/*=========================================
TABLETS
=========================================*/

@media(max-width:1100px){

.hero h1{

font-size:56px;

}

.grid-eventos{

grid-template-columns:repeat(2,1fr);

}

.servicios-grid{

grid-template-columns:repeat(2,1fr);

}

.planes-grid{

grid-template-columns:1fr;

}

.galeria-grid{

grid-template-columns:repeat(2,1fr);

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

.destacado .container{

grid-template-columns:1fr;

}

}

/*-----Celulares-----*/

@media(max-width:768px){

.hero{

text-align:center;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.hero-buttons{

justify-content:center;

}

.estadisticas .container{

grid-template-columns:1fr 1fr;

}

.grid-eventos{

grid-template-columns:1fr;

}

.servicios-grid{

grid-template-columns:1fr;

}

.galeria-grid{

grid-template-columns:1fr;

}

.testimonios-grid{

grid-template-columns:1fr;

}

.pasos{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.titulo h2{

font-size:2.3rem;

}

.cta h2{

font-size:2.5rem;

}

/* Header: el logo y los botones no cabían junto al hamburger */
.logo img{

height:44px;

}

.acciones .btn-secundario{

display:none;

}

.acciones .btn-principal{

padding:11px 20px;

font-size:.85rem;

}

/* La tarjeta Premium se salía del viewport por el scale() */
.premium{

transform:none;

}

.plan:hover{

transform:translateY(-6px);

}

}

.menu-mobile{

display:none;

font-size:34px;

cursor:pointer;

}

@media(max-width:768px){

.menu-mobile{

display:block;

}

nav{

position:fixed;

top:0;

right:-100%;

width:300px;

height:100vh;

background:#fff;

padding:80px 40px;

transition:.4s;

box-shadow:-10px 0 35px rgba(0,0,0,.15);

}

nav.active{

right:0;

}

nav ul{

flex-direction:column;

gap:28px;

}

}

/*=========================================
ESPACIADOS — las secciones estaban pensadas
para desktop (90–170px de padding vertical)
=========================================*/

@media(max-width:768px){

.estadisticas{ padding:56px 0; }
.eventos{ padding:70px 0; }
.servicios{ padding:70px 0; }
.como-funciona{ padding:70px 0; }
.destacado{ padding:70px 0; }
.ia{ padding:70px 0; }
.galeria{ padding:70px 0; }
.testimonios{ padding:70px 0; }
.faq{ padding:70px 0; }
.cta{ padding:90px 0; }

.titulo{ margin:0 auto 40px; }

.card-evento{ padding:32px; }
.servicio{ padding:28px; }
.plan{ padding:36px 28px; }
.testimonio{ padding:32px; }
.ia-box{ padding:40px 26px; }
.destacado .container{ gap:50px; }
.pasos{ gap:40px; }

}

/*=========================================
CELULARES PEQUEÑOS
=========================================*/

@media(max-width:480px){

.hero h1{ font-size:34px; }
.hero p{ font-size:16px; }

.estadisticas .container{ gap:16px; }
.stat{ padding:26px 16px; }
.stat h2{ font-size:36px; }

.hero-buttons{ flex-direction:column; width:100%; }
.hero-buttons a{ width:100%; text-align:center; }

.etiqueta{ font-size:.7rem; padding:8px 46px; right:-34px; }

.whatsapp{ width:56px; height:56px; right:18px; bottom:18px; }
.whatsapp img{ width:28px; }
.toTop{ width:48px; height:48px; left:18px; bottom:18px; font-size:20px; }

}