/* ==========================================================================
   Anfitrionas de Oro — hoja de estilos del sitio
   Marron #231510 y dorado sobre Poppins, la misma paleta de la landing.
   Sin frameworks ni librerias externas.

   Compatibilidad deliberada: sin gap de flexbox, sin inset, blur con
   @supports. El sitio se abre mucho desde el navegador interno de
   Instagram y Facebook, y desde moviles viejos.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  /* Paleta tomada literalmente de la landing de GHL (evergreen/vsl-b):
     ahi el fondo es #231510, no negro. Mismos nombres que esa landing para
     que no haya dos vocabularios de marca conviviendo. */
  --marron-900:  #231510;
  --marron-800:  #2E1E17;
  --marron-700:  #3D291F;
  --gold:        #D4AF37;
  --gold-light:  #F2DC96;
  --gold-dim:    #A8862A;
  --beige:       #BFA896;
  --cream:       #FFF7EF;
  --gold-faint:  rgba(212,175,55,.10);
  --line:        rgba(212,175,55,.22);

  --black-soft:  #1D120D;
  --black-card:  var(--marron-800);
  --border:      #3A2820;
  --border-lit:  #5A4030;
  --text:        var(--beige);
  --whatsapp:    #25D366;
  --whatsapp-dk: #128C7E;
  --maxw:        1120px;

  --sombra:      0 18px 44px rgba(12,6,3,.55);
  --brillo-oro:  0 0 0 1px rgba(212,175,55,.35), 0 18px 44px rgba(212,175,55,.16);
}

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--marron-900);
  color:var(--text);
  font-family:'Poppins','Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:300;
  line-height:1.75;
  font-size:16px;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:1.5rem; padding-right:1.5rem; }

/* ── tipografia ─────────────────────────────────────── */
.eyebrow{
  display:inline-block;
  font-size:.62rem; font-weight:500; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold);
  border:1px solid var(--line); padding:.5rem 1.2rem; border-radius:100px;
  background:var(--gold-faint);
}
h1,h2{ color:var(--gold-light); font-weight:200; letter-spacing:-.015em; }
h1{ font-size:clamp(2.1rem,5.4vw,3.7rem); line-height:1.18; }
h2{ font-size:clamp(1.8rem,4.2vw,2.8rem); line-height:1.24; }
h1 strong, h2 strong{
  font-weight:600;
  background:linear-gradient(96deg, var(--gold-light) 0%, var(--gold) 45%, #B98F2E 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--gold);
}
h3{ font-size:1.05rem; font-weight:500; color:var(--gold-light); line-height:1.5; }
.lead{ color:var(--beige); max-width:62ch; }
p + p{ margin-top:1rem; }

.gold-line{
  width:52px; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:1.6rem 0;
}
.gold-line.center{ margin-left:auto; margin-right:auto; }

section{ padding:6rem 0; position:relative; }
/* Separador tenue en vez de una linea dura de borde a borde.
   Se posiciona con left/right y NO con un ancho fijo: con width:520px y
   margin-left:-260px se salia por la derecha en pantallas estrechas y
   provocaba scroll horizontal en toda la pagina. Un pseudo-elemento que
   desborda no aparece al inspeccionar elementos, asi que cuesta verlo. */
section + section::before{
  content:''; position:absolute; top:0; left:15%; right:15%;
  max-width:520px; margin:0 auto; height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
section.plain::before{ display:none; }
.section-head{ margin-bottom:3.4rem; }
.section-head .eyebrow{ margin-bottom:1.6rem; }
.center{ text-align:center; }
.center .lead{ margin-left:auto; margin-right:auto; }

/* Fondo alterno para que el scroll tenga ritmo y no sea una pared plana */
section.tono{
  background:
    radial-gradient(900px 380px at 50% 0%, rgba(212,175,55,.06), transparent 70%),
    var(--black-soft);
}

/* ── botones ────────────────────────────────────────── */
.btn{
  position:relative; overflow:hidden;
  display:inline-block;
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:1.15rem 2.5rem; border-radius:100px;
  border:1px solid var(--gold);
  background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 52%, #B08526 100%);
  color:var(--marron-900);
  box-shadow:0 10px 26px rgba(212,175,55,.22);
  transition:transform .25s, box-shadow .25s, filter .25s;
}
/* Destello que cruza el boton al pasar por encima */
.btn::after{
  content:''; position:absolute; top:0; bottom:0; left:-120%;
  width:60%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transition:left .6s ease;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(212,175,55,.34); filter:brightness(1.04); }
.btn:hover::after{ left:130%; }
.btn:active{ transform:translateY(-1px); }

.btn.ghost{
  background:transparent; color:var(--gold);
  border-color:var(--border-lit); box-shadow:none;
}
.btn.ghost:hover{ background:var(--gold-faint); border-color:var(--gold); box-shadow:0 12px 30px rgba(212,175,55,.14); }

.btn.wa{
  background:linear-gradient(135deg, #2FE372 0%, var(--whatsapp) 55%, var(--whatsapp-dk) 100%);
  border-color:transparent; color:#06301D;
  box-shadow:0 10px 26px rgba(37,211,102,.26);
}
.btn.wa:hover{ box-shadow:0 16px 36px rgba(37,211,102,.4); }
.btn.wa svg{ width:17px; height:17px; vertical-align:-3px; margin-right:.5rem; }
.btn.wa svg path{ fill:#06301D; }

.btn.sm{ padding:.78rem 1.6rem; font-size:.68rem; }
.btn.lg{ padding:1.3rem 3rem; font-size:.84rem; }

/* Latido suave en el CTA principal, para que el ojo lo encuentre */
@keyframes latido{
  0%,100%{ box-shadow:0 10px 26px rgba(212,175,55,.22); }
  50%    { box-shadow:0 10px 34px rgba(212,175,55,.46); }
}
.btn.pulso{ animation:latido 2.8s ease-in-out infinite; }

/* ── cabecera ───────────────────────────────────────── */
header.sitio{
  position:sticky; top:0; z-index:60;
  background:rgba(35,21,16,.95); border-bottom:1px solid var(--border);
}
@supports ((-webkit-backdrop-filter:blur(10px)) or (backdrop-filter:blur(10px))){
  header.sitio{ background:rgba(35,21,16,.78); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding-top:1rem; padding-bottom:1rem; }
.logo{ height:42px; width:auto; }
.nav-links{ display:flex; align-items:center; }
.nav-links a{
  position:relative;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--beige); margin-left:1.9rem; padding-bottom:.25rem;
  transition:color .2s;
}
/* Subrayado dorado que crece desde el centro */
.nav-links a:not(.btn)::after{
  content:''; position:absolute; left:50%; right:50%; bottom:0; height:1px;
  background:var(--gold); transition:left .25s, right .25s;
}
.nav-links a:not(.btn):hover{ color:var(--gold-light); }
.nav-links a:not(.btn):hover::after{ left:0; right:0; }
.nav-links a.activo{ color:var(--gold-light); }
.nav-links a.activo::after{ left:0; right:0; }
.nav-links .btn{ margin-left:1.9rem; color:var(--marron-900); }
.nav-toggle{
  display:none; background:none; border:1px solid var(--border);
  border-radius:8px; padding:.5rem .6rem; cursor:pointer;
}
.nav-toggle span{ display:block; width:20px; height:1.5px; background:var(--gold); margin:4px 0; }

/* ── portada ────────────────────────────────────────── */
.portada{
  position:relative; overflow:hidden;
  min-height:92vh; display:flex; align-items:center;
  /* En Safari de iPhone, 1vh cuenta la altura CON la barra de direcciones
     retraida, asi que 92vh sale mas alto que la pantalla visible y el hero
     empuja todo hacia abajo. dvh mide el viewport real; se deja el vh
     delante como respaldo para navegadores que no lo entiendan. */
  min-height:92dvh;
  text-align:center;
  /* El fondo va aqui y no en un style= de cada pagina para poder servir la
     version ligera en movil (78 KB frente a 255 KB). Un style en linea le
     gana a la media query y obligaria a !important. */
  background:var(--marron-900) url('portada.jpg') center center / cover no-repeat;
}
@media (max-width:720px){
  .portada{ background-image:url('portada-movil.jpg'); }
}

/* Cada pagina interior tiene su propia escena, no la portada repetida.
   Estas reglas van DESPUES de la media query de arriba a proposito:
   .portada.programa (0,2,0) le gana a .portada (0,1,0) aunque este dentro
   de la media query, asi que la variante movil de cada una necesita su
   propio bloque, mas abajo. */
.portada.programa{     background-image:url('seccion-programa.jpg'); }
.portada.nosotros{     background-image:url('seccion-quienes-somos.jpg'); }
.portada.testimonios{  background-image:url('seccion-testimonios.jpg'); }
.portada.contacto{     background-image:url('seccion-contacto.jpg'); }

@media (max-width:720px){
  .portada.programa{    background-image:url('seccion-programa-movil.jpg'); }
  .portada.nosotros{    background-image:url('seccion-quienes-somos-movil.jpg'); }
  .portada.testimonios{ background-image:url('seccion-testimonios-movil.jpg'); }
  .portada.contacto{    background-image:url('seccion-contacto-movil.jpg'); }
}

/* El video de fondo. Se sirve SOLO en escritorio: sitio.js le pone el src
   desde data-src si la pantalla es ancha y el navegador no pide ahorro de
   datos. En movil se queda la imagen de fondo. */
.portada video{
  position:absolute; top:50%; left:50%;
  min-width:100%; min-height:100%;
  width:auto; height:auto;
  transform:translate(-50%,-50%);
  object-fit:cover;
  z-index:0;
  /* El poster va tratado en calido oscuro desde el propio JPG. Este filtro
     reproduce ese tratamiento sobre el video para que al cargar no se vea
     el salto de marron a azul brillante. Si cambias el JPG, cambia esto. */
  filter:saturate(.72) brightness(.64) sepia(.14);
}

/* El velo sostiene el contraste del titular sobre foto o video claros.
   No aligerarlo sin volver a mirar el texto encima. */
.portada .velo{
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:1;
  background:
    radial-gradient(680px 380px at 50% 42%, rgba(212,175,55,.10), transparent 72%),
    linear-gradient(180deg, rgba(35,21,16,.92) 0%, rgba(45,28,20,.70) 42%, rgba(35,21,16,.97) 100%);
}
.portada .wrap{ position:relative; z-index:2; width:100%; padding-top:5rem; padding-bottom:5rem; }
.portada h1{ margin:2rem auto 0; max-width:17ch; }
.portada h1 strong{ display:block; }
.portada .lead{ margin:0 auto; font-size:1.05rem; }
.portada-cta{ margin-top:2.8rem; }
.portada-cta .btn{ margin:.45rem .45rem 0; }
.portada-nota{ margin-top:1.6rem; font-size:.76rem; letter-spacing:.05em; color:var(--gold-dim); }

.portada.corta{ min-height:0; }
.portada.corta .wrap{ padding-top:6rem; padding-bottom:4.5rem; }

/* Flecha de "sigue bajando" */
@keyframes flota{ 0%,100%{ transform:translateY(0); opacity:.55; } 50%{ transform:translateY(9px); opacity:1; } }
.baja{
  position:absolute; bottom:26px; left:50%; margin-left:-13px; z-index:2;
  width:26px; height:26px; animation:flota 2.2s ease-in-out infinite;
}
.baja path{ stroke:var(--gold); }

/* ── cita ───────────────────────────────────────────── */
.quote{
  background:
    radial-gradient(700px 200px at 50% 0%, rgba(212,175,55,.07), transparent 70%),
    var(--black-soft);
  padding:3.4rem 0; text-align:center;
}
.quote p{ font-size:clamp(1.05rem,2.5vw,1.45rem); font-style:italic; font-weight:200; color:var(--gold-light); max-width:44ch; margin:0 auto .7rem; }
.quote span{ font-size:.63rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-dim); }

/* ── rejillas y tarjetas ────────────────────────────── */
.grid{ display:grid; margin-left:-.7rem; margin-right:-.7rem; }
.grid.c2{ grid-template-columns:repeat(2,1fr); }
.grid.c3{ grid-template-columns:repeat(3,1fr); }
.grid > *{ margin:.7rem; }

.card{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--marron-800) 0%, #291A14 100%);
  border:1px solid var(--border);
  border-radius:16px;
  padding:2.2rem 1.8rem;
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
/* Filete dorado que se despliega en el borde superior al pasar por encima */
.card::before{
  content:''; position:absolute; top:0; left:50%; right:50%; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transition:left .4s ease, right .4s ease;
}
.card:hover{
  border-color:var(--border-lit);
  transform:translateY(-6px);
  box-shadow:var(--sombra);
}
.card:hover::before{ left:0; right:0; }
.card h3{ margin-bottom:.6rem; }
.card p{ font-size:.92rem; color:var(--beige); line-height:1.7; }

/* Icono dentro de una chapa dorada, no suelto */
.icon-chip{
  width:52px; height:52px; border-radius:14px;
  background:linear-gradient(150deg, rgba(212,175,55,.20), rgba(212,175,55,.05));
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.3rem;
  transition:transform .3s, box-shadow .3s;
}
.card:hover .icon-chip{ transform:scale(1.08) rotate(-3deg); box-shadow:0 8px 22px rgba(212,175,55,.2); }
.icon{ width:26px; height:26px; }

/* ── modulos del metodo ─────────────────────────────── */
.mods{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
}
.mod{
  position:relative; overflow:hidden;
  background:var(--marron-800); padding:1.9rem 1.5rem 1.7rem;
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  transition:background .3s, transform .3s;
}
/* Numero fantasma al fondo: da profundidad sin ensuciar */
.mod::after{
  content:attr(data-n);
  position:absolute; right:.7rem; bottom:-.6rem;
  font-size:3.6rem; font-weight:600; line-height:1;
  color:rgba(212,175,55,.07);
  transition:color .3s, transform .3s;
}
.mod:hover{ background:#33211A; transform:translateY(-3px); }
.mod:hover::after{ color:rgba(212,175,55,.16); transform:translateY(-4px); }
.mod b{ display:block; font-weight:500; font-size:.96rem; color:var(--gold-light); margin-bottom:.35rem; position:relative; }
.mod span{ font-size:.83rem; color:var(--beige); line-height:1.62; position:relative; }

.extras{ margin-top:1.8rem; }
.chip{
  display:inline-block; font-size:.73rem; letter-spacing:.06em; color:var(--beige);
  border:1px solid var(--border); border-radius:100px; padding:.55rem 1.1rem;
  margin:0 .5rem .5rem 0; background:var(--marron-800);
  transition:border-color .25s, color .25s, transform .25s;
}
.chip:hover{ border-color:var(--gold); color:var(--gold-light); transform:translateY(-2px); }

/* ── paneles si / no ────────────────────────────────── */
.panel{
  position:relative;
  border:1px solid var(--border); border-radius:16px;
  padding:2.4rem 2rem; background:linear-gradient(160deg, var(--marron-800), #291A14);
  transition:border-color .3s, box-shadow .3s, transform .3s;
}
.panel:hover{ transform:translateY(-4px); box-shadow:var(--sombra); }
.panel.yes{ border-color:var(--border-lit); }
.panel.yes:hover{ box-shadow:var(--brillo-oro); }
.panel h3{ font-size:1.2rem; margin-bottom:1.5rem; }
.panel ul{ list-style:none; }
.panel li{ position:relative; padding-left:1.8rem; margin-bottom:1rem; font-size:.93rem; color:var(--beige); line-height:1.65; }
.panel li::before{ position:absolute; left:0; top:0; font-size:.9rem; color:var(--gold); }
.panel.yes li::before{ content:'\2726'; }
.panel.no  li::before{ content:'\00B7'; color:var(--gold-dim); font-size:1.5rem; line-height:1; }

/* ── video (portada + carga al pulsar) ──────────────── */
.video{
  position:relative; width:100%; padding-top:56.25%;
  background:var(--marron-800); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; cursor:pointer;
  transition:border-color .3s, box-shadow .3s, transform .3s;
}
.video:hover{ border-color:var(--border-lit); transform:translateY(-4px); box-shadow:var(--sombra); }
.video img, .video iframe{ position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; border:0; }
.video img{ object-fit:cover; opacity:.72; transition:opacity .35s, transform .6s; }
.video:hover img{ opacity:1; transform:scale(1.05); }
.play{
  position:absolute; top:50%; left:50%; margin:-30px 0 0 -30px;
  width:60px; height:60px; border-radius:50%;
  border:1px solid var(--gold); background:rgba(35,21,16,.62);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, transform .25s, box-shadow .25s;
}
.video:hover .play{ background:var(--gold); transform:scale(1.1); box-shadow:0 0 30px rgba(212,175,55,.5); }
.play svg{ width:17px; height:17px; margin-left:3px; }
.play path{ fill:var(--gold); transition:fill .25s; }
.video:hover .play path{ fill:var(--marron-900); }
.t-meta{ padding:1.2rem .2rem 0; }
.t-meta b{ display:block; font-weight:500; color:var(--gold-light); font-size:.96rem; }
.t-meta span{ font-size:.86rem; color:var(--beige); }
.t-tag{
  display:inline-block; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--line); border-radius:100px;
  padding:.3rem .85rem; margin-bottom:.8rem; background:var(--gold-faint);
}

/* ── preguntas ──────────────────────────────────────── */
.faq{ max-width:820px; margin:0 auto; }
details{
  border:1px solid var(--border); border-radius:14px;
  background:var(--marron-800); margin-bottom:.8rem;
  transition:border-color .25s, background .25s;
}
details:hover{ border-color:var(--border-lit); }
details[open]{ border-color:var(--border-lit); background:#291A14; }
summary{
  list-style:none; cursor:pointer; padding:1.35rem 3.2rem 1.35rem 1.5rem;
  position:relative; font-size:1rem; font-weight:400; color:var(--gold-light);
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:'+'; position:absolute; right:1.4rem; top:1.1rem;
  width:26px; height:26px; line-height:24px; text-align:center;
  border:1px solid var(--line); border-radius:50%;
  font-size:1.1rem; font-weight:300; color:var(--gold);
  transition:background .25s;
}
details[open] summary::after{ content:'\2013'; background:var(--gold-faint); }
details p{ padding:0 1.5rem 1.5rem; font-size:.94rem; color:var(--beige); }
details p a{ color:var(--gold); text-decoration:underline; }

/* ── franja de llamada a la accion ──────────────────── */
.cta-band{
  position:relative; overflow:hidden;
  border:1px solid var(--border-lit); border-radius:22px;
  padding:3.4rem 2rem;
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(212,175,55,.16), transparent 72%),
    linear-gradient(160deg, #33211A 0%, var(--marron-800) 100%);
  text-align:center;
  box-shadow:var(--sombra);
}
.cta-band h2{ margin-bottom:.4rem; }
.cta-band .lead{ margin:0 auto 2rem; }
.cta-band .btn{ margin:.4rem .4rem 0; }
.cta-nota{ margin-top:1.4rem; font-size:.78rem; color:var(--gold-dim); }

/* ── agenda ─────────────────────────────────────────────
   El widget de GHL viene con FONDO TRANSPARENTE Y TEXTO NEGRO. Sobre el
   marron del sitio quedaba negro sobre marron: ilegible, y por eso no se
   podia usar. El iframe va sobre una tarjeta clara: no es un capricho
   estetico, es lo que lo hace legible.
   Su contenido mide unos 900 px de alto; con 720 y scrolling="no" la parte
   de elegir hora quedaba cortada y sin forma de desplazarse. */
.agenda{
  margin-top:2.8rem;
  background:var(--cream);
  border:1px solid var(--gold);
  border-radius:18px; padding:.9rem;
  box-shadow:var(--brillo-oro);
  overflow:hidden;
}
.agenda iframe{
  width:100%; min-height:940px; border:0; display:block;
  border-radius:12px; background:var(--cream);
}

/* ── contacto ───────────────────────────────────────── */
.contacto-item{
  position:relative; overflow:hidden; display:block;
  padding:1.9rem; border:1px solid var(--border); border-radius:16px;
  background:linear-gradient(160deg, var(--marron-800), #291A14);
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.contacto-item::before{
  content:''; position:absolute; top:0; left:50%; right:50%; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transition:left .4s ease, right .4s ease;
}
.contacto-item:hover{ border-color:var(--border-lit); transform:translateY(-5px); box-shadow:var(--sombra); }
.contacto-item:hover::before{ left:0; right:0; }
.contacto-item .et{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.7rem; }
.contacto-item .val{ font-size:1.05rem; color:var(--gold-light); font-weight:400; word-break:break-word; }

/* ── boton flotante de whatsapp ─────────────────────── */
.wa-flota{
  position:fixed; right:20px; bottom:20px; z-index:70;
  display:flex; align-items:center;
  background:linear-gradient(135deg, #2FE372, var(--whatsapp) 55%, var(--whatsapp-dk));
  color:#fff;
  border-radius:100px; padding:.9rem 1.35rem .9rem 1.05rem;
  font-size:.82rem; font-weight:500;
  transition:transform .25s;
}
.wa-flota:hover{ transform:translateY(-3px) scale(1.03); }
.wa-flota svg{ width:23px; height:23px; margin-right:.6rem; flex-shrink:0; }
.wa-flota svg path{ fill:#fff; }
/* Halo que late, para que el ojo lo encuentre sin taparlo todo */
@keyframes halo{
  0%  { box-shadow:0 10px 30px rgba(12,6,3,.5), 0 0 0 0 rgba(37,211,102,.45); }
  70% { box-shadow:0 10px 30px rgba(12,6,3,.5), 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 10px 30px rgba(12,6,3,.5), 0 0 0 0 rgba(37,211,102,0); }
}
.wa-flota{ animation:halo 3.2s ease-out infinite; }

/* ── barra de accion en movil ───────────────────────────
   En el movil el boton flotante solo no basta: esta barra deja las dos
   acciones siempre a mano sin tapar el contenido. */
.barra-movil{ display:none; }
@media (max-width:720px){
  .barra-movil{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:75;
    background:rgba(29,18,13,.97); border-top:1px solid var(--border);
    padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  }
  .barra-movil a{
    /* min-width:0 es imprescindible: un elemento flex no baja de su ancho de
       contenido aunque tenga flex:1, y sin esto la barra medía 448 px dentro
       de una pantalla de 375 y desbordaba la pagina entera. */
    flex:1 1 0; min-width:0;
    margin:0 .25rem; text-align:center;
    padding:.95rem .4rem; border-radius:100px;
    font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .barra-movil .b-oro{ background:linear-gradient(135deg, var(--gold-light), var(--gold)); color:var(--marron-900); }
  .barra-movil .b-wa{ background:linear-gradient(135deg, #2FE372, var(--whatsapp)); color:#06301D; }
  /* Con la barra abajo, el boton flotante sobra: taparia contenido */
  .wa-flota{ display:none; }
  body{ padding-bottom:74px; }
}

/* ── pie ────────────────────────────────────────────── */
footer.sitio{ border-top:1px solid var(--border); padding:4rem 0 2.6rem; background:var(--black-soft); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; }
.foot-grid > div{ margin-bottom:2rem; padding-right:1.5rem; }
.foot-grid img{ height:42px; margin-bottom:1.2rem; }
.foot-grid p{ font-size:.86rem; color:var(--beige); max-width:34ch; }
.foot-grid h4{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:1.1rem; }
.foot-grid li{ list-style:none; margin-bottom:.65rem; }
.foot-grid li a{ display:inline-block; font-size:.88rem; color:var(--beige); transition:color .2s, transform .2s; }
.foot-grid li a:hover{ color:var(--gold-light); transform:translateX(5px); }
.copy{ border-top:1px solid var(--border); margin-top:1rem; padding-top:1.8rem; font-size:.74rem; color:#8A7355; text-align:center; }

/* ── aparicion al hacer scroll ──────────────────────── */
html.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .75s ease, transform .75s ease; }
html.js .reveal.in{ opacity:1; transform:none; }
/* Escalonado dentro de una rejilla: entran una detras de otra */
html.js .grid > .reveal:nth-child(2){ transition-delay:.09s; }
html.js .grid > .reveal:nth-child(3){ transition-delay:.18s; }
html.js .grid > .reveal:nth-child(4){ transition-delay:.27s; }

/* ── responsive ─────────────────────────────────────── */
@media (max-width:900px){
  .mods{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  section{ padding:4.2rem 0; }
  .nav-toggle{ display:block; }
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start;
    background:#1D120D; border-bottom:1px solid var(--border);
    padding:1.2rem 1.5rem 1.8rem;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ margin:0 0 1.1rem; font-size:.85rem; }
  .nav-links .btn{ margin:.4rem 0 0; }
  .grid.c2, .grid.c3, .mods, .foot-grid{ grid-template-columns:1fr; }
  .portada{ min-height:0; }
  .portada .wrap{ padding-top:4.2rem; padding-bottom:4.2rem; }
  /* En 375 px el titular se partia en cinco lineas y el conjunto quedaba
     apretado. Menos cuerpo y mas caracteres por linea: dos o tres lineas. */
  .portada h1{ font-size:clamp(1.85rem,7.4vw,2.5rem); max-width:22ch; margin-top:1.5rem; }
  .portada .lead{ font-size:.98rem; }
  .eyebrow{ font-size:.56rem; letter-spacing:.2em; padding:.45rem 1rem; }
  .portada-cta .btn{ display:block; margin:.6rem auto 0; max-width:320px; }
  .agenda iframe{ min-height:1120px; }
  .cta-band{ padding:2.6rem 1.4rem; }
  .baja{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html.js .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}