/* ===================================================
   BASE CSS — Gimnasio Prana
   Organización:
   00) Variables / Reset / Utilidad
   01) Layout Global (titulares, badges, botones)
   02) Header & Navbar (MENÚ HAMBURGUESA unificado)
   03) Heroes (home tiles + inner hero)
   04) Componentes comunes (cards)
   05) Footer
   06) Quienes Somos
   07) Disciplinas
   08) Espacio Prana
   09) Galerías + Lightbox
   10) Contacto
   11) Ajustes finos responsive
   =================================================== */

/* ========== 00) VARIABLES / RESET / UTILIDAD ========== */
:root{
  --rojo:#E53935;
  --amarillo:#FDD835;
  --negro:#111;
  --gris:#333;
  --gris2:#666;
  --blanco:#fff;

  --max:1200px;
  --gap:22px;
  --radius:16px;
  --shadow:0 10px 24px rgba(0,0,0,.15);

  /* altura dinámica del header (se actualiza por JS) */
  --navH: 64px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Lato,Arial,sans-serif;
  color:var(--gris);
  background:#f6f6f6;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}

/* helpers */
.wrap{max-width:var(--max);margin:0 auto;padding:26px 16px}
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:1fr}
@media(min-width:900px){.grid-2{grid-template-columns:repeat(2,1fr)}}
.grid-3{grid-template-columns:1fr}
@media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* ===================================================
   01) LAYOUT GLOBAL (titulares, badges, botones)
   =================================================== */
.section-title{
  font-family:Montserrat,sans-serif;font-weight:800;
  font-size:clamp(20px,2.4vw,28px);
  margin:8px 0 18px;letter-spacing:.3px;color:#111;
}
.section-title::after{
  content:"";display:block;width:64px;height:4px;margin-top:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--rojo),var(--amarillo));
}
.eyebrow{
  display:inline-block;background:var(--amarillo);color:#111;
  font:700 12px/1 Montserrat,sans-serif;padding:6px 10px;border-radius:999px;margin-bottom:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.btn{display:inline-block;font-weight:800;border-radius:12px;padding:10px 14px;line-height:1;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.btn--primary{background:var(--rojo);color:#fff;box-shadow:0 10px 22px rgba(0,0,0,.35)}
.btn--primary:hover{transform:translateY(-1px);filter:brightness(.96)}
.btn--ghost{background:rgba(17,17,17,.5);color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn--ghost:hover{background:rgba(17,17,17,.65)}
.cta{display:inline-block;background:var(--rojo);color:#fff;font-weight:800;padding:10px 14px;border-radius:12px;box-shadow:0 10px 22px rgba(0,0,0,.35)}
.cta:hover{filter:brightness(.95);transform:translateY(-1px)}

/* ===================================================
   02) HEADER & NAVBAR — unificado (mobile overlay)
   =================================================== */
header{
  position: sticky; top:0; z-index: 5000;
  color:#fff; background: rgba(18,18,20,.92);
  backdrop-filter: blur(8px) saturate(1.05);
}
header::after{
  content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--rojo),var(--amarillo));
}
.nav{
  max-width:var(--max);margin:0 auto;padding:8px 16px;
  min-height:var(--navH);
  display:flex;align-items:center;gap:12px;
}
.brand img{
  height:90px;width:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.menu{
  margin-left:auto;display:flex;gap:14px;flex-wrap:wrap;
}
.menu a{
  color:#f3f3f3;font-weight:800;position:relative;
  padding:8px 10px;border-radius:8px;transition:background .2s ease;
}
.menu a:hover{ background:rgba(255,255,255,.06) }
.menu a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;
  background:transparent;border-radius:2px;transition:background .2s ease;
}
.menu a:hover::after,.menu a.active::after{ background: var(--amarillo) }

/* botón hamburguesa */
.nav-toggle{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  width:44px;height:44px;position:relative;z-index:6000;
}
.nav-toggle .bar,
.nav-toggle::before,
.nav-toggle::after{
  content:"";position:absolute;left:10px;right:10px;height:2px;
  background:#fff;border-radius:2px;transition:.25s ease;
}
.nav-toggle .bar{ top:21px }
.nav-toggle::before{ top:12px }
.nav-toggle::after{ bottom:12px }
/* animación a X */
header.nav-open .nav-toggle .bar{ opacity:0 }
header.nav-open .nav-toggle::before{ top:21px; transform:rotate(45deg) }
header.nav-open .nav-toggle::after{ bottom:21px; transform:rotate(-45deg) }

/* Mobile: menú como overlay completo debajo del header */
@media (max-width:900px){
  .brand img{ height:56px }
  .nav-toggle{ display:block }

  .menu{
    display:none; /* cerrado por defecto */
    position: fixed; z-index:5500;
    top: var(--navH); left:0; right:0; bottom:0;
    background:#0f0f11;
    padding:12px 16px 24px;
    flex-direction:column; gap:6px;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  header.nav-open .menu{ display:flex } /* abrir */

  /* Backdrop que NO tapa el header */
  header.nav-open::before{
    content:""; position:fixed; z-index:5400;
    left:0; right:0; top: var(--navH); bottom:0;
    background: rgba(0,0,0,.45);
  }

  .menu a{ font-size:1.06rem; padding:14px 12px; border-radius:10px }
}
/* Bloquear scroll del documento al abrir menú */
html.no-scroll, body.no-scroll{ overflow:hidden; height:100%; }

/* ===================================================
   03) HEROES
   =================================================== */
/* Tiles home */
.tile{position:relative;border-radius:16px;overflow:hidden;background:#000;color:#fff;box-shadow:0 14px 32px rgba(0,0,0,.18)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.25) 90%);z-index:1}
.tile .content{position:absolute;left:0;right:0;bottom:0;padding:20px;z-index:2}
.tile h2,.tile h3{color:#fff;font-weight:900;text-shadow:0 4px 12px rgba(0,0,0,.95)}
.tile p,.tile .p{color:#f7f7f7;font-weight:700;text-shadow:0 3px 10px rgba(0,0,0,.9)}

/* Inner hero (otras páginas) */
.inner-hero{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin:24px 0;background:#000;color:#fff;aspect-ratio:16/5}
.inner-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.inner-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.25) 90%)}
.inner-hero .content{position:absolute;left:0;right:0;bottom:0;padding:24px;z-index:2}
.inner-hero h2{color:#fff;font-weight:900;text-shadow:0 4px 12px rgba(0,0,0,.95)}
.inner-hero p{color:#f7f7f7;font-weight:700;text-shadow:0 3px 10px rgba(0,0,0,.9)}

/* ===================================================
   04) COMPONENTES COMUNES
   =================================================== */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;border:1px solid #eee;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.12)}

/* ===================================================
   05) FOOTER
   =================================================== */
footer{background:#0D0D10;color:#ddd;position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--rojo),var(--amarillo))}
.foot{max-width:1200px;margin:0 auto;padding:28px 16px;display:grid;gap:18px 28px;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.foot{grid-template-columns:2fr 1fr 1fr}}
.foot h4{margin:0 0 10px;font:800 13px/1 Montserrat,sans-serif;letter-spacing:.4px;text-transform:uppercase;color:#fff}
.foot p{margin:0 0 8px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:6px 0}
.foot a{color:var(--amarillo);font-weight:700}
.foot .brand{color:#fff}
.foot .muted{color:#bdbdbd}
.foot .credit{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.08);padding-top:12px;margin-top:4px;color:#cfcfcf;text-align:center}
.foot .credit a{color:var(--amarillo);text-decoration:underline;text-underline-offset:3px}

/* ===================================================
   06) QUIENES SOMOS
   =================================================== */
.qs-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:960px){.qs-grid{grid-template-columns:1.25fr 1fr}}

.qs-card{display:grid;gap:0;grid-template-rows:auto 1fr;border:1px solid #ececec;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.08);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;position:relative;padding:18px}
.qs-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.12);border-color:#e5e5e5}
.qs-card::before,.qs-textcard::before,.qs-feature::before{content:"";position:absolute;inset:0;border-radius:14px;padding:2px;background:linear-gradient(45deg,#ff0000,#ffb400);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}

.qs-media{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.qs-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .35s ease}
.qs-card:hover .qs-media img{transform:scale(1.05)}
.qs-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 70%)}

.qs-body{padding:18px}
.qs-body h3{font-family:Montserrat,sans-serif;font-weight:800;margin:0 0 8px;color:#111}
.qs-body p{margin:0 0 10px;color:#222}
.qs-body .list{margin:8px 0 0 18px;color:#222}
.qs-body .list li{margin:6px 0}

.qs-textcard{border:1px solid #ececec;border-radius:16px;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.06);padding:18px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;position:relative}
.qs-textcard:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.10);border-color:#e5e5e5}

.qs-features{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){.qs-features{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.qs-features{grid-template-columns:repeat(3,1fr)}}
.qs-feature{background:#fff;border:1px solid #ececec;border-radius:14px;padding:16px;box-shadow:0 10px 22px rgba(0,0,0,.06);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;position:relative}
.qs-feature:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.10);border-color:#e5e5e5}
.qs-feature h4{margin:0 0 6px;font-family:Montserrat,sans-serif;font-weight:800;color:#111}
.qs-feature p{margin:0;color:#333;font-size:.98rem}
.qs-card:hover::before,.qs-textcard:hover::before,.qs-feature:hover::before{background:linear-gradient(90deg,#ffb400,#ff0000);transition:background .5s ease}

/* ===================================================
   07) DISCIPLINAS
   =================================================== */
.disc-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:760px){.disc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.disc-grid{grid-template-columns:repeat(3,1fr)}}

.disc-card{position:relative;border-radius:14px;background:#fff;overflow:hidden;display:flex;flex-direction:column;min-height:100%;box-shadow:0 10px 22px rgba(0,0,0,.06)}
.disc-card::before{content:"";position:absolute;inset:0;border-radius:14px;padding:2px;background:linear-gradient(45deg,#ff0000,#ffb400);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}
.disc-card:hover::before{background:linear-gradient(90deg,#ffb400,#ff0000);transition:background .5s ease}
.disc-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.10);transition:transform .16s ease,box-shadow .16s ease}
.disc-media{position:relative;aspect-ratio:16/10;background:#000;overflow:hidden}
.disc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .35s ease}
.disc-card:hover .disc-media img{transform:scale(1.05)}
.disc-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.disc-title{font-family:Montserrat,sans-serif;font-weight:800;color:#111;font-size:1.05rem;margin:0}
.disc-text{color:#333;font-size:.95rem;margin:0}
.disc-actions{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.btn--whatsapp{background:#25D366;color:#fff;font-weight:800;border-radius:12px;padding:10px 14px;display:inline-block;box-shadow:0 10px 22px rgba(0,0,0,.12)}
.btn--whatsapp:hover{filter:brightness(.95);transform:translateY(-1px);transition:transform .15s ease,filter .15s ease}

/* ===================================================
   08) ESPACIO PRANA
   =================================================== */
.espacio-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:960px){.espacio-grid{grid-template-columns:1fr 1fr}}
.espacio-card{position:relative;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 10px 22px rgba(0,0,0,.06);padding:18px}
.espacio-card::before{content:"";position:absolute;inset:0;border-radius:14px;padding:2px;background:linear-gradient(45deg,#ff0000,#ffb400);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}
.espacio-card:hover::before{background:linear-gradient(90deg,#ffb400,#ff0000)}
.espacio-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.10);transition:all .16s ease}

/* Beneficios */
.espacio-beneficios{display:grid;gap:20px;grid-template-columns:1fr;margin-top:24px}
@media(min-width:760px){.espacio-beneficios{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.espacio-beneficios{grid-template-columns:repeat(3,1fr)}}
.benef-card{position:relative;border-radius:14px;background:#fff;padding:16px;box-shadow:0 10px 22px rgba(0,0,0,.06)}
.benef-card::before{content:"";position:absolute;inset:0;border-radius:14px;padding:2px;background:linear-gradient(45deg,#ff0000,#ffb400);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}
.benef-card:hover::before{background:linear-gradient(90deg,#ffb400,#ff0000)}
.benef-card h4{font-family:Montserrat,sans-serif;font-weight:800;margin:0 0 6px;color:#111}
.benef-card p{margin:0;color:#333;font-size:.95rem}

/* ===================================================
   09) GALERÍAS + LIGHTBOX
   =================================================== */
.gal3-grid{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px}
@media(max-width:1024px){.gal3-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.gal3-grid{grid-template-columns:1fr}}
.gal-card{position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 10px 22px rgba(0,0,0,.06);cursor:pointer}
.gal-card::before{content:"";position:absolute;inset:0;border-radius:14px;padding:2px;background:linear-gradient(45deg,#ff0000,#ffb400);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:1;pointer-events:none}
.gal-photo{width:100%;height:260px;object-fit:cover;display:block;border-radius:12px;transform:scale(1);transition:transform .35s ease;position:relative;z-index:2}
.gal-card:hover .gal-photo{transform:scale(1.04)}

.lb{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:1000}
.lb.open{display:flex}
.lb-inner{position:relative;max-width:95vw;max-height:86vh}
.lb-img{max-width:95vw;max-height:86vh;border-radius:10px;display:block}
.lb-cap{color:#fff;text-align:center;margin-top:10px;font-weight:700}
.lb-close,.lb-prev,.lb-next{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:800;user-select:none
}
.lb-close{top:-8px;right:-8px;transform:none;border-radius:999px}
.lb-prev{left:-56px}.lb-next{right:-56px}
@media(max-width:640px){.lb-prev{left:-10px}.lb-next{right:-10px}}

/* ===================================================
   10) CONTACTO
   =================================================== */
.contact-panel{
  position:relative;border-radius:16px;background:#fff;padding:22px;margin-top:24px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  border:3px solid transparent;
  background-clip:padding-box,border-box;background-origin:border-box;
  background-image:linear-gradient(#fff,#fff),linear-gradient(45deg,#ff0000,#ffb400);
}
.contact-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){.contact-grid{grid-template-columns:repeat(2,1fr)}}

.contact-card{
  position:relative;display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:14px;padding:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  border:2px solid transparent;background-clip:padding-box,border-box;background-origin:border-box;
  background-image:linear-gradient(#fff,#fff),linear-gradient(45deg,#ff0000,#ffb400);
}
.contact-icon{flex:0 0 44px;height:44px;border-radius:999px;display:grid;place-items:center;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.contact-icon svg{width:22px;height:22px}
.contact-icon.wsp{background:#25D366}
.contact-icon.mail{background:#e64a19}
.contact-icon.ig{background:radial-gradient(120% 120% at 30% 110%,#feda75,#fa7e1e 40%,#d62976 60%,#962fbf 80%,#4f5bd5 100%)}
.contact-icon.map{background:#1976d2}
.contact-card h4{margin:0;font:800 1.02rem/1.1 Montserrat,sans-serif;color:#111}
.contact-card p{margin:4px 0 0;color:#222}
.contact-card a{color:#111;font-weight:800;border-bottom:2px solid rgba(0,0,0,.1);padding-bottom:1px}
.contact-card a:hover{border-color:#111}

.contact-form{display:flex;flex-direction:column;gap:14px}
.contact-form input,.contact-form textarea{
  border:1px solid #d9d9d9;background:#fff;border-radius:12px;padding:12px 14px;font-size:1rem;transition:border-color .15s ease,box-shadow .15s ease;width:100%
}
.contact-form input:focus,.contact-form textarea:focus{border-color:#ffb400;box-shadow:0 0 0 3px rgba(255,180,0,.18);outline:none}
.contact-form button{
  width:100%;background:#25D366;color:#fff;font-weight:900;letter-spacing:.3px;border:none;border-radius:14px;padding:14px;cursor:pointer;
  box-shadow:0 12px 24px rgba(37,211,102,.25)
}
.contact-form button:hover{filter:brightness(.95);transform:translateY(-1px)}
.map-embed{border:0;width:100%;height:340px;border-radius:12px}

/* ===================================================
   11) AJUSTES FINOS RESPONSIVE
   =================================================== */
@media(max-width:560px){
  .wrap{padding:20px 14px}
  .tile .content{padding:16px}
  .inner-hero .content{padding:18px}
  .brand img{height:56px}
}

/* ===== NAVBAR — OVERRIDE A PRUEBA DE BALAS (solo mobile) ===== */
@media (max-width: 900px){

  /* 1) El header siempre arriba */
  header{
    position: sticky !important;
    top: 0 !important;
    z-index: 6000 !important;
  }

  .nav{
    min-height: 56px !important;
    padding: 8px 16px !important;
  }
  .brand img{ height: 56px !important; }

  /* 2) Botón hamburguesa visible */
  .nav-toggle{
    display: block !important;
    position: relative !important;
    z-index: 6500 !important; /* por encima del overlay para poder cerrarlo */
  }

  /* 3) Menú como overlay de pantalla completa (por debajo del header) */
  .menu{
    display: none !important;              /* cerrado por defecto */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 5900 !important;              /* debajo del header (6000) */
    background: #0f0f11 !important;
    padding: 72px 16px 24px !important;    /* 72px para despegar del header */
    flex-direction: column !important;
    gap: 8px !important;
    overflow-y: auto !important;           /* scroll SOLO dentro del menú */
    -webkit-overflow-scrolling: touch !important;
    transform: none !important;            /* anula cualquier translate viejo */
    height: auto !important;
    max-height: none !important;
  }
  header.nav-open .menu{
    display: flex !important;              /* abrir */
  }

  /* 4) Backdrop opcional (no tapa el header) */
  header.nav-open::before{
    content: "" !important;
    position: fixed !important;
    left: 0; right: 0;
    top: 56px;                              /* misma altura del header en mobile */
    bottom: 0;
    background: rgba(0,0,0,.45);
    z-index: 5850 !important;
  }

  /* 5) Links grandes y cómodos */
  .menu a{
    display: block !important;
    font-size: 1.06rem !important;
    padding: 14px 12px !important;
    border-radius: 10px !important;
  }
  .menu a:hover{
    background: rgba(255,255,255,.08) !important;
  }
}

/* 6) Bloquear el scroll del documento cuando el menú está abierto */
html.no-scroll, body.no-scroll{
  overflow: hidden !important;
  height: 100% !important;
}
/* ====== MENÚ MOBILE ABRE HACIA ABAJO (SIN OVERLAY) ====== */
@media (max-width: 900px){

  /* Header compacto */
  header{
    position: sticky !important;
    top: 0; z-index: 5000;
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:6px 12px !important; min-height:56px !important;
  }
  .brand img{ height:44px !important; width:auto; }

  /* Mostrar botón hamburguesa */
  .nav-toggle{ display:block !important; }

  /* BASE del menú en mobile: ocupa 100% y está en el flujo (debajo del header) */
  .menu{
    position: static !important;   /* clave: NO absoluto/fixed */
    width: 100% !important;
    background: #0f0f11;
    border-radius: 0 0 12px 12px;
  }

  /* Colapsado por defecto: altura 0, sin mostrar enlaces */
  header .menu{
    max-height: 0;                 /* colapsado */
    overflow: hidden;
    padding: 0 8px;                /* padding horizontal sutil */
    transition: max-height .3s ease, padding .2s ease;
  }

  /* Abierto: expande hacia abajo y empuja el contenido */
  header.nav-open .menu{
    max-height: 80vh;              /* espacio disponible */
    padding: 8px 8px 12px;         /* agrega padding sólo abierto */
  }

  /* Enlaces en columna y a todo el ancho */
  .menu a{
    display:block; width:100%;
    color:#f3f3f3; font-weight:800;
    padding:12px 10px;
    border-bottom:1px solid rgba(255,255,255,.08);
    border-radius:8px;
  }
  .menu a:last-child{ border-bottom:none; }
  .menu a:hover{ background: rgba(255,255,255,.08); }
}

/* (Opcional) evitar rebotes del body cuando el menú está abierto */
html.no-scroll, body.no-scroll{ overflow:hidden; height:100%; }

/* === SCROLL UNLOCK – fuerza scroll en mobile y con menú abierto === */
@media (max-width: 900px){
  /* Si algún CSS viejo dejó no-scroll, lo neutralizamos */
  html.no-scroll, body.no-scroll { 
    overflow-y: auto !important; 
    height: auto !important;
  }

  /* Si por error se dejó overflow:hidden inline, lo forzamos a auto */
  html, body {
    overflow-y: auto !important;
    height: auto !important;
  }

  /* Con el menú abierto (header.nav-open), forzamos scroll del documento */
  html:has(header.nav-open),
  body:has(header.nav-open) {
    overflow-y: auto !important;
    height: auto !important;
  }
}
/* =========================
   Responsive polish pack
   (NO rompe desktop)
   ========================= */

/* --- Mejor lectura sobre imágenes en pantallas chicas --- */
@media (max-width: 900px){
  .tile .overlay,
  .inner-hero::after{
    background: linear-gradient(
      to top,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.62) 55%,
      rgba(0,0,0,.28) 90%
    ) !important;
  }
  .tile .content{ padding:14px 12px !important; }
  .tile h2{ font-size: clamp(18px, 5.4vw, 24px) !important; }
  .tile h3{ font-size: clamp(16px, 4.8vw, 20px) !important; }
  .tile p,.tile .p{ font-size: clamp(13px, 3.8vw, 16px) !important; }
  .cta,.btn,.btn--primary,.btn--ghost{ padding:10px 12px !important; border-radius:10px; }
}

/* --- Hero (index): relaciones y alturas seguras --- */
.hero .tile{ min-height: 220px; }
.hero .hero-xl{ aspect-ratio: 16/9; }
@media (max-width: 900px){
  .hero .hero-xl{ aspect-ratio: 16/11; }
  .hero .tile{ min-height: 200px; }
}

/* --- Inner hero (otras secciones) --- */
@media (max-width: 900px){
  .inner-hero{ aspect-ratio: 16/10 !important; margin:16px 0 !important; }
  .inner-hero .content{ padding:16px !important; }
  .inner-hero h2{ font-size: clamp(18px, 5.2vw, 24px) !important; }
  .inner-hero p{  font-size: clamp(13px, 3.8vw, 16px) !important; }
}
/* Evita encuadres feos en fotos de hero */
.tile img,
.inner-hero img{ object-fit: cover; object-position: center 40%; }

/* --- Grids a 1 columna en móviles (por si alguna queda “apretada”) --- */
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr !important; }
  .grid-2{ grid-template-columns: 1fr !important; }
  .qs-grid{ grid-template-columns: 1fr !important; }
  .qs-features{ grid-template-columns: 1fr !important; }
  .disc-grid{ grid-template-columns: 1fr !important; }
  .espacio-grid{ grid-template-columns: 1fr !important; }
  .espacio-beneficios{ grid-template-columns: 1fr !important; }
}

/* --- Disciplina cards: que no “corten” textos ni fotos --- */
@media (max-width: 900px){
  .disc-media{ aspect-ratio: 16/11; }
  .disc-title{ font-size: clamp(15px, 4.6vw, 18px); }
  .disc-text{  font-size: clamp(13px, 3.8vw, 15px); }
}

/* --- Galerías: altura adaptativa según viewport --- */
.gal-photo{
  height: clamp(180px, 38vw, 260px);    /* móvil → desktop */
  object-fit: cover;
}
@media (max-width: 480px){
  .gal-photo{ height: clamp(160px, 42vw, 220px); }
}

/* --- Tarjetas (quienes somos / beneficios) tipografía + padding --- */
@media (max-width: 900px){
  .qs-body{ padding:14px !important; }
  .qs-feature{ padding:14px !important; }
  .benef-card{ padding:14px !important; }
  .qs-body p, .qs-feature p, .benef-card p{
    font-size: clamp(13px, 3.8vw, 15px);
  }
}

/* --- Botones dentro de tiles en móvil: que no se salgan --- */
@media (max-width: 400px){
  .tile .cta, .tile .btn, .tile .btn--primary{
    font-size: 14px;
    padding: 9px 12px;
  }
}

/* --- Espacio Prana: fotos de la grilla extra más parejas --- */
@media (max-width: 900px){
  .gal3-grid{ grid-template-columns: 1fr !important; }
}
@media (min-width: 901px) and (max-width: 1200px){
  .gal3-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- Footer: respiración en móvil --- */
@media (max-width: 560px){
  .foot{ padding:22px 14px !important; gap:16px !important; }
}

/* --- Ajuste fino del header en móvil para ganar espacio vertical --- */
@media (max-width: 900px){
  .nav{ min-height: 56px !important; padding:6px 12px !important; }
  .brand img{ height: 44px !important; }
}
/* ===== INDEX: apilar tiles del hero en móvil ===== */
@media (max-width: 900px){
  /* La sección hero pasa a 1 columna con separación */
  .hero{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Asegura que cada tile ocupe todo el ancho y no “flote” */
  .hero .tile{
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: both !important;
    min-height: 200px;      /* altura segura para que no se pisen */
  }

  /* El hero grande también en su propia fila */
  .hero .hero-xl{
    grid-column: 1 / -1 !important;
    aspect-ratio: 16/11;    /* un poquito más alto en móvil */
  }

  /* Las tres tarjetas chicas, una abajo de la otra */
  .hero .piso,
  .hero .artes,
  .hero .eventos{
    grid-column: 1 / -1 !important;
  }

  /* Más lectura sobre foto en pantallas chicas */
  .hero .tile .overlay{
    background: linear-gradient(
      to top,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.62) 55%,
      rgba(0,0,0,.28) 90%
    ) !important;
  }
}

/* =========================
   EMPRESAS – MISMO BRANDING
   ========================= */

/* Grillas reutilizando tus layouts */
.emp-grid { display:grid; gap:22px; grid-template-columns:1fr; }
@media (min-width: 960px){ .emp-grid{ grid-template-columns:1.2fr 1fr; } }

/* Logos con el mismo borde degradé que las cards */
.emp-logos{
  display:grid; gap:16px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){ .emp-logos{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px){ .emp-logos{ grid-template-columns:repeat(4,1fr); } }

.emp-logo{
  position:relative; border-radius:14px; background:#fff; padding:12px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
}
.emp-logo::before{
  content:""; position:absolute; inset:0; border-radius:14px; padding:2px;
  background:linear-gradient(45deg,#ff0000,#ffb400);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; z-index:-1;
}
.emp-logo:hover::before{ background:linear-gradient(90deg,#ffb400,#ff0000); }

.emp-logo img{
  width:100%; height:64px; object-fit:contain; display:block;
  filter:grayscale(.15) contrast(1.05); opacity:.95;
}
.emp-logo img:hover{ filter:none; opacity:1; }