/* ==========================================================================
   KARMA VOLEIBOL CLUB — Hoja de estilos principal
   Paleta: negro · amarillo (logo) · rojo · blanco
   ========================================================================== */

:root{
  /* Marca */
  --negro:        #0A0A0B;
  --negro-2:      #0F0F11;
  --carbon:       #17171B;
  --carbon-2:     #1F1F24;
  --amarillo:     #F0E820;
  --amarillo-hi:  #FFFA5C;
  --rojo:         #E01B22;
  --rojo-hi:      #FF3A41;
  --blanco:       #FFFFFF;
  --hueso:        #F6F6F4;
  --gris:         #9A9AA2;
  --gris-2:       #6B6B73;
  --linea:        rgba(255,255,255,.10);
  --linea-dark:   rgba(10,10,11,.10);

  /* Tipografía */
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --texto:   'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Métrica */
  --max:      1240px;
  --radio:    14px;
  --radio-sm: 8px;
  --sombra:   0 24px 60px -18px rgba(0,0,0,.65);
  --nav-h:    76px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
body{
  margin:0;
  font-family:var(--texto);
  font-size:17px;
  line-height:1.65;
  color:var(--hueso);
  background:var(--negro);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.02; font-family:var(--display); font-weight:400; letter-spacing:.005em; text-transform:uppercase; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--amarillo); color:var(--negro); }

/* ---------- Utilidades ---------- */
.wrap{
  width:min(100% - 44px, var(--max)); margin-inline:auto;
  padding-left:env(safe-area-inset-left, 0px); padding-right:env(safe-area-inset-right, 0px);
}
.sec{ padding:clamp(64px,9vw,120px) 0; position:relative; }
.sec--tight{ padding:clamp(48px,6vw,84px) 0; }
.claro{ background:var(--hueso); color:var(--negro); }
.claro .kicker{ color:var(--rojo); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--texto); font-size:.72rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--amarillo);
  margin-bottom:18px;
}
.kicker::before{ content:""; width:28px; height:2px; background:currentColor; }

h1{ font-size:clamp(2.7rem,7.4vw,5.6rem); }
h2{ font-size:clamp(2rem,4.6vw,3.5rem); }
h3{ font-size:clamp(1.15rem,2vw,1.45rem); }
.lead{ font-size:clamp(1.02rem,1.45vw,1.2rem); color:var(--gris); max-width:60ch; }
.claro .lead{ color:#4A4A52; }
.hl{ color:var(--amarillo); }
.hl-r{ color:var(--rojo); }
.claro .hl{ color:var(--negro); background:var(--amarillo); padding:0 .18em; }

/* Franja diagonal decorativa */
.hexbg{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 0l24 14v28L28 56 4 42V14z' fill='none' stroke='%23F0E820' stroke-opacity='.075' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size:56px 64px;
  mask-image:linear-gradient(180deg,transparent,#000 35%,#000 65%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 35%,#000 65%,transparent);
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 28px; border-radius:100px; border:2px solid transparent;
  font-family:var(--texto); font-size:.88rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); }
.btn:focus-visible{ outline:3px solid var(--amarillo); outline-offset:3px; }
.btn--amarillo{ background:var(--amarillo); color:var(--negro); box-shadow:0 12px 30px -12px rgba(240,232,32,.75); }
.btn--amarillo:hover{ background:var(--amarillo-hi); box-shadow:0 18px 40px -12px rgba(240,232,32,.9); }
.btn--rojo{ background:var(--rojo); color:#fff; box-shadow:0 12px 30px -12px rgba(224,27,34,.8); }
.btn--rojo:hover{ background:var(--rojo-hi); }
.btn--linea{ border-color:rgba(255,255,255,.35); color:#fff; }
.btn--linea:hover{ border-color:var(--amarillo); color:var(--amarillo); }
.claro .btn--linea{ border-color:rgba(10,10,11,.28); color:var(--negro); }
.claro .btn--linea:hover{ border-color:var(--negro); background:var(--negro); color:#fff; }
.btn--lg{ padding:19px 38px; font-size:.95rem; }
.btn svg{ width:18px; height:18px; flex:none; }

/* ---------- Topbar ---------- */
.topbar{
  background:var(--rojo); color:#fff;
  font-size:.74rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  /* Reserva el notch/status bar en iOS (Safari a pantalla completa o app instalada) */
  padding-top:env(safe-area-inset-top, 0px);
}
.topbar__in{
  display:flex; align-items:center; justify-content:center; gap:10px 26px;
  min-height:38px; flex-wrap:wrap; text-align:center; padding:9px 0;
  padding-left:env(safe-area-inset-left, 0px); padding-right:env(safe-area-inset-right, 0px);
}
.topbar a{ display:inline-flex; align-items:center; gap:7px; line-height:1.3; }
.topbar a:hover{ color:var(--amarillo); }
.topbar span{ line-height:1.3; }
.topbar .sep{ opacity:.5; }
.topbar svg{ width:14px; height:14px; flex:none; }

/* En pantallas angostas el flex-wrap de 3 items en una fila queda apretado:
   se apila en columna, una línea por dato, en vez de dejar que rompa a mitad de fila. */
@media (max-width:640px){
  .topbar__in{ flex-direction:column; gap:6px; padding:10px 0; min-height:0; }
  .topbar .sep{ display:none; }
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:90;
  /* Fondo casi opaco en vez de backdrop-filter: el blur en un elemento sticky
     junto a la barra roja provocaba un glitch real de compositing en Chromium/Edge
     (texto de la primera fila "cortado" en ventanas angostas). Sin blur, cero riesgo. */
  background:rgba(9,9,10,.94);
  border-bottom:1px solid var(--linea);
  transition:background .3s, border-color .3s;
}
.nav.is-stuck{ background:rgba(8,8,9,.99); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--nav-h); }
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand img{ height:46px; width:auto; }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__txt b{ font-family:var(--display); font-size:1.06rem; letter-spacing:.03em; text-transform:uppercase; }
.brand__txt span{ font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--amarillo); margin-top:4px; white-space:nowrap; }
.nav__links{ display:flex; align-items:center; gap:clamp(16px,1.8vw,28px); }
.nav__links a{
  font-size:.79rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gris); position:relative; padding:6px 0; transition:color .2s; white-space:nowrap;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--amarillo); transition:width .28s var(--ease);
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:12px; }
.nav__cta .btn{ padding:12px 22px; font-size:.78rem; }
.burger{
  display:none; width:46px; height:46px; border:1px solid var(--linea);
  background:transparent; border-radius:10px; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.burger span{ display:block; width:20px; height:2px; background:#fff; position:relative; transition:background .2s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:#fff; transition:transform .28s var(--ease); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
body.menu-open .burger span{ background:transparent; }
body.menu-open .burger span::before{ transform:translateY(6px) rotate(45deg); }
body.menu-open .burger span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:1180px){
  .nav__links{
    position:fixed; inset:calc(var(--nav-h) + 38px) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--negro-2); border-bottom:1px solid var(--linea);
    padding:10px 22px 26px; transform:translateY(-140%); transition:transform .38s var(--ease);
    max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
  }
  body.menu-open .nav__links{ transform:translateY(0); }
  .nav__links a{ padding:15px 0; border-bottom:1px solid var(--linea); font-size:.92rem; color:#fff; }
  .nav__cta .btn{ display:none; }
  .nav__cta .btn--wa-nav{ display:inline-flex; }
  .burger{ display:flex; }
}
@media (max-width:560px){
  .nav__cta .btn--wa-nav span{ display:none; }
  .nav__cta .btn--wa-nav{ padding:12px 14px; }
  .brand__txt{ display:none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; min-height:clamp(600px,94vh,900px); display:flex; align-items:flex-end; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(105deg, rgba(10,10,11,.96) 0%, rgba(10,10,11,.86) 34%, rgba(10,10,11,.45) 62%, rgba(10,10,11,.72) 100%),
    linear-gradient(0deg, rgba(10,10,11,1) 2%, rgba(10,10,11,0) 46%);
}
.hero__in{ position:relative; z-index:2; padding:150px 0 66px; }
.hero__badge{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:24px;
  background:rgba(240,232,32,.11); border:1px solid rgba(240,232,32,.42);
  color:var(--amarillo); border-radius:100px; padding:9px 18px;
  font-size:.7rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
}
.hero__badge i{ width:7px; height:7px; border-radius:50%; background:var(--amarillo); animation:pulso 2s infinite; }
@keyframes pulso{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }
.hero h1{ max-width:16ch; text-shadow:0 6px 40px rgba(0,0,0,.6); }
.hero h1 em{ font-style:normal; display:block; color:var(--amarillo); }
.hero__lead{ margin:26px 0 34px; max-width:52ch; font-size:clamp(1.02rem,1.5vw,1.2rem); color:#D8D8DC; }
.hero__acts{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__scroll{
  position:absolute; right:32px; bottom:36px; z-index:3;
  writing-mode:vertical-rl; font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gris); display:flex; align-items:center; gap:14px;
}
.hero__scroll::after{ content:""; width:1px; height:60px; background:linear-gradient(var(--amarillo),transparent); }
@media (max-width:900px){ .hero__scroll{ display:none; } .hero__in{ padding:110px 0 56px; } }

/* Marquee de valores */
.marquee{
  background:var(--amarillo); color:var(--negro);
  padding:15px 0; overflow:hidden; white-space:nowrap;
  border-top:3px solid var(--negro); border-bottom:3px solid var(--negro);
}
.marquee__track{ display:inline-flex; gap:0; animation:corre 34s linear infinite; }
.marquee span{
  font-family:var(--display); font-size:1.12rem; letter-spacing:.06em;
  text-transform:uppercase; padding:0 26px; display:inline-flex; align-items:center; gap:26px;
}
.marquee span::after{ content:""; width:9px; height:9px; background:var(--negro); transform:rotate(45deg); }
@keyframes corre{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ==========================================================================
   Bloques de contenido
   ========================================================================== */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:center; }
.duo--inv .duo__fig{ order:-1; }
@media (max-width:900px){ .duo{ grid-template-columns:1fr; } .duo--inv .duo__fig{ order:0; } }

.duo__fig{ position:relative; isolation:isolate; }
.duo__fig img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radio); }
.duo__fig::before{
  content:""; position:absolute; inset:18px -18px -18px 18px; z-index:-1;
  border:2px solid var(--amarillo); border-radius:var(--radio);
}
.duo__fig--rojo::before{ border-color:var(--rojo); inset:18px 18px -18px -18px; }
.duo__tag{
  position:absolute; left:-14px; bottom:22px;
  background:var(--rojo); color:#fff; padding:11px 20px; border-radius:6px;
  font-family:var(--display); font-size:.92rem; letter-spacing:.05em; text-transform:uppercase;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.6);
}
.duo__fig--rojo .duo__tag{ background:var(--amarillo); color:var(--negro); left:auto; right:-14px; }

.prosa p{ font-size:1.04rem; color:var(--gris); }
.claro .prosa p{ color:#45454D; }
.prosa .destacado{
  font-family:var(--display); font-size:clamp(1.25rem,2.1vw,1.7rem);
  text-transform:uppercase; line-height:1.18; color:var(--blanco); margin:28px 0;
  padding-left:20px; border-left:4px solid var(--amarillo);
}
.claro .prosa .destacado{ color:var(--negro); border-left-color:var(--rojo); }

/* ==========================================================================
   Banners parallax
   ========================================================================== */
.banner{
  position:relative; min-height:clamp(420px,58vw,580px);
  display:flex; align-items:center; overflow:hidden;
}
.banner__bg{ position:absolute; inset:-8% 0; }
.banner__bg img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.banner__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.82), rgba(10,10,11,.6) 45%, rgba(10,10,11,.92));
}
.banner__in{ position:relative; z-index:2; text-align:center; }
.banner__in h2{ max-width:20ch; margin-inline:auto; text-shadow:0 6px 34px rgba(0,0,0,.65); }
.banner__in .lead{ margin:22px auto 0; color:#DCDCE0; }
.banner--rojo .banner__bg::after{
  background:linear-gradient(180deg, rgba(120,8,12,.72), rgba(10,10,11,.76) 50%, rgba(10,10,11,.95));
}
.banner__cita{
  font-family:var(--display); font-size:clamp(1.9rem,4.4vw,3.4rem);
  line-height:1.05; text-transform:uppercase; max-width:18ch; margin:0 auto;
}
.banner__cita span{ color:var(--amarillo); }
.banner__firma{ margin-top:26px; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gris); }

/* ==========================================================================
   Método — tarjetas numeradas
   ========================================================================== */
.metodo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:16px; margin-top:52px; }
.mcard{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--carbon),var(--negro-2));
  border:1px solid var(--linea); border-radius:var(--radio); padding:30px 26px 28px;
  transition:transform .35s var(--ease), border-color .35s;
}
.mcard::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--amarillo);
  transition:width .45s var(--ease);
}
.mcard:hover{ transform:translateY(-6px); border-color:rgba(240,232,32,.4); }
.mcard:hover::before{ width:100%; }
.mcard__n{
  font-family:var(--display); font-size:3.4rem; line-height:1; color:transparent;
  -webkit-text-stroke:1.5px rgba(240,232,32,.4); display:block; margin-bottom:12px;
}
.mcard:nth-child(even) .mcard__n{ -webkit-text-stroke-color:rgba(224,27,34,.5); }
.mcard:nth-child(even)::before{ background:var(--rojo); }
.mcard h3{ margin-bottom:10px; }
.mcard p{ margin:0; font-size:.94rem; color:var(--gris); line-height:1.55; }

/* ==========================================================================
   Ruta a liga — timeline
   ========================================================================== */
.ruta{ counter-reset:paso; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:0; margin-top:56px; }
.paso{ position:relative; padding:0 18px; text-align:center; }
.paso::before{
  counter-increment:paso; content:counter(paso,decimal-leading-zero);
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; margin:0 auto 18px;
  border-radius:50%; background:var(--negro); border:2px solid var(--amarillo);
  font-family:var(--display); font-size:1.1rem; color:var(--amarillo);
  position:relative; z-index:2;
}
.paso::after{
  content:""; position:absolute; top:28px; left:50%; width:100%; height:2px;
  background:repeating-linear-gradient(90deg,rgba(240,232,32,.4) 0 7px,transparent 7px 15px); z-index:1;
}
.paso:last-child::after{ display:none; }
.paso h3{ font-size:1rem; margin-bottom:8px; }
.paso p{ font-size:.86rem; color:var(--gris); margin:0; }
@media (max-width:760px){
  .ruta{ grid-template-columns:1fr; gap:26px; }
  .paso{ display:grid; grid-template-columns:56px 1fr; gap:18px; text-align:left; padding:0; }
  .paso::before{ margin:0; }
  .paso::after{ top:56px; left:27px; width:2px; height:calc(100% + 26px);
    background:repeating-linear-gradient(180deg,rgba(240,232,32,.4) 0 7px,transparent 7px 15px); }
  .paso h3,.paso p{ grid-column:2; }
}

/* ==========================================================================
   Categorías (cards con foto)
   ========================================================================== */
.cats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:50px; }
.cat{
  position:relative; border-radius:var(--radio); overflow:hidden; min-height:340px;
  display:flex; align-items:flex-end; isolation:isolate;
}
.cat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .7s var(--ease); }
.cat::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,11,.1) 30%,rgba(10,10,11,.92));
  transition:background .4s;
}
.cat:hover img{ transform:scale(1.07); }
.cat:hover::after{ background:linear-gradient(180deg,rgba(10,10,11,.18) 20%,rgba(120,8,12,.55),rgba(10,10,11,.95)); }
.cat__in{ padding:26px 24px; width:100%; }
.cat__edad{
  display:inline-block; background:var(--amarillo); color:var(--negro);
  font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 12px; border-radius:100px; margin-bottom:12px;
}
.cat h3{ font-size:1.35rem; color:#fff; }
.cat p{ margin:8px 0 0; font-size:.9rem; color:#C9C9CF; }

/* Beneficios chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:36px; }
.chip{
  border:1px solid var(--linea); border-radius:100px; padding:11px 20px;
  font-size:.88rem; font-weight:500; display:inline-flex; align-items:center; gap:9px;
  transition:border-color .25s, background .25s, transform .25s var(--ease);
}
.claro .chip{ border-color:var(--linea-dark); background:#fff; }
.chip:hover{ border-color:var(--amarillo); transform:translateY(-3px); }
.chip::before{ content:""; width:6px; height:6px; background:var(--rojo); transform:rotate(45deg); flex:none; }

/* ==========================================================================
   Campeonatos
   ========================================================================== */
.torneos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:44px; }
.torneo{
  border:1px dashed rgba(255,255,255,.26); border-radius:var(--radio);
  padding:26px 24px; background:rgba(255,255,255,.03); position:relative;
}
.torneo span{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amarillo); display:block; margin-bottom:10px;
}
.torneo h3{ font-size:1.18rem; margin-bottom:8px; }
.torneo p{ margin:0; font-size:.88rem; color:var(--gris); }

/* ==========================================================================
   Horarios
   ========================================================================== */
.cats__cta{ margin:32px 0 0; }
.horarios{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:16px; margin-top:44px; }
.hcard{
  background:#fff; border:1px solid var(--linea-dark); border-radius:var(--radio);
  padding:26px 24px; border-top:4px solid var(--rojo);
}
.hcard:nth-child(2){ border-top-color:var(--amarillo); }
.hcard:nth-child(3){ border-top-color:var(--negro); }
.hcard__top{ margin-bottom:16px; }
.hcard__top h3{ font-size:1.5rem; color:var(--negro); }
.hcard__top span{ display:block; margin-top:6px; font-size:.84rem; color:var(--gris-2); }
.hcard dl{ margin:0; }
.hcard__fila{ padding:14px 0; border-top:1px solid var(--linea-dark); }
.hcard dt{
  font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rojo); margin-bottom:4px;
}
.hcard dd{ margin:0; font-size:.98rem; line-height:1.55; color:#2A2A30; font-variant-numeric:tabular-nums; }
.horarios__nota{
  display:flex; gap:10px; align-items:flex-start; margin:26px 0 0;
  font-size:.95rem; color:#45454D;
}
.horarios__nota svg{ width:20px; height:20px; flex:none; margin-top:2px; color:var(--rojo); }

/* ==========================================================================
   Entrenadores
   ========================================================================== */
.coaches{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:48px; }
.coach{
  background:#fff; border:1px solid var(--linea-dark); border-radius:var(--radio); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.coach:hover{ transform:translateY(-6px); box-shadow:0 22px 44px -24px rgba(0,0,0,.35); }
.coach{ display:flex; flex-direction:column; }
.coach__foto{
  width:84px; height:84px; margin:26px 22px 0; border-radius:50%;
  object-fit:cover; border:3px solid var(--amarillo); background:var(--negro);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.5);
}
.coach:nth-child(2) .coach__foto{ border-color:var(--rojo); }
.coach__in{ padding:22px 22px 24px; }
.coach__rol{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  background:var(--amarillo); color:var(--negro); padding:4px 10px; border-radius:4px; margin-bottom:12px;
}
.coach h3{ font-size:1.35rem; color:var(--negro); }
.coach p{ margin:8px 0 0; font-size:.93rem; color:#45454D; line-height:1.55; }
@media (prefers-reduced-motion:reduce){ .coach, .coach:hover{ transition:none; transform:none; } }

/* ==========================================================================
   Galería
   ========================================================================== */
.galeria{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:48px; }
.galeria figure{ margin:0; position:relative; overflow:hidden; border-radius:10px; cursor:zoom-in; background:var(--carbon); }
.galeria img{ width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ease), filter .4s; }
.galeria figure::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(224,27,34,.55));
  opacity:0; transition:opacity .35s;
}
.galeria figure:hover img{ transform:scale(1.08); }
.galeria figure:hover::after{ opacity:1; }
.galeria .g-tall{ grid-row:span 2; }
.galeria .g-wide{ grid-column:span 2; }
.galeria figure > img{ aspect-ratio:4/3; }
.galeria .g-tall > img{ aspect-ratio:3/4.2; }
@media (max-width:900px){ .galeria{ grid-template-columns:repeat(2,1fr); } .galeria .g-wide{ grid-column:span 2; } }
@media (max-width:520px){ .galeria .g-tall{ grid-row:span 1; } .galeria .g-tall > img{ aspect-ratio:4/3; } }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(5,5,6,.95);
  display:none; align-items:center; justify-content:center; padding:5vw;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.lightbox.is-open{ display:flex; animation:fade .3s var(--ease); }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.lightbox img{ max-width:100%; max-height:88vh; border-radius:10px; box-shadow:var(--sombra); }
.lightbox__x{
  position:absolute; top:22px; right:22px; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--linea); background:rgba(255,255,255,.06); color:#fff;
  font-size:1.5rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lightbox__x:hover{ background:var(--rojo); border-color:var(--rojo); }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  border:1px solid var(--linea); background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
}
.lightbox__nav:hover{ background:var(--amarillo); color:var(--negro); border-color:var(--amarillo); }
.lightbox__nav--prev{ left:18px; } .lightbox__nav--next{ right:18px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ max-width:860px; margin:48px auto 0; }
.faq details{ border-bottom:1px solid var(--linea-dark); }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-family:var(--display); font-size:clamp(1rem,1.7vw,1.22rem);
  text-transform:uppercase; letter-spacing:.01em; transition:color .25s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--rojo); }
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:13px; height:13px;
  border-right:2px solid var(--rojo); border-bottom:2px solid var(--rojo);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq details p{ margin:0; padding:0 44px 24px 0; color:#4A4A52; font-size:.99rem; }

/* ==========================================================================
   Formulario → WhatsApp
   ========================================================================== */
.form-sec{ position:relative; overflow:hidden; background:var(--negro-2); }
.form-sec__bg{ position:absolute; inset:0; opacity:.16; }
.form-sec__bg img{ width:100%; height:100%; object-fit:cover; }
.form-sec__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,var(--negro-2) 0%,rgba(15,15,17,.5) 40%,var(--negro-2) 100%); }
.form-grid{ position:relative; z-index:2; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,68px); align-items:start; }
@media (max-width:900px){ .form-grid{ grid-template-columns:1fr; } }

/* Solo el formulario, sin columna de texto/contacto: se centra con un ancho de lectura cómodo */
.form-grid > *{ min-width:0; }
.form-grid--solo{ grid-template-columns:1fr; max-width:640px; margin-inline:auto; }

.form-card{
  background:var(--carbon); border:1px solid var(--linea); border-radius:20px;
  padding:clamp(26px,3.5vw,42px); box-shadow:var(--sombra);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-row > *{ min-width:0; }
.campo select{ min-width:0; max-width:100%; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.campo{ margin-bottom:16px; }
.campo label{
  display:block; font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris); margin-bottom:8px;
}
.campo label b{ color:var(--rojo); font-weight:700; }
.campo input,.campo select,.campo textarea{
  width:100%; background:var(--negro); border:1px solid var(--linea);
  border-radius:10px; padding:14px 16px; font-size:.97rem; color:#fff;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.campo textarea{ resize:vertical; min-height:96px; }
.campo select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F0E820' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:44px;
}
.campo input::placeholder,.campo textarea::placeholder{ color:var(--gris-2); }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--amarillo); box-shadow:0 0 0 3px rgba(240,232,32,.16);
}
.campo.err input,.campo.err select{ border-color:var(--rojo); box-shadow:0 0 0 3px rgba(224,27,34,.18); }
.campo .msg-err{ display:none; margin-top:7px; font-size:.78rem; color:var(--rojo-hi); }
.campo.err .msg-err{ display:block; }
.form-card .btn{ width:100%; margin-top:10px; }
.form-nota{ margin:16px 0 0; font-size:.78rem; color:var(--gris-2); text-align:center; line-height:1.5; }
.form-ok{
  display:none; margin-top:18px; padding:16px 18px; border-radius:12px;
  background:rgba(240,232,32,.1); border:1px solid rgba(240,232,32,.4);
  color:var(--amarillo); font-size:.88rem;
}
.form-ok.is-on{ display:block; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background:#060607; border-top:1px solid var(--linea); padding:70px 0 0; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }
.footer h4{ font-size:.82rem; letter-spacing:.16em; color:var(--amarillo); margin-bottom:18px; }
.footer p,.footer li{ font-size:.9rem; color:var(--gris); }
.footer li{ margin-bottom:10px; }
.footer a:hover{ color:var(--amarillo); }
.footer__brand img{ height:76px; width:auto; margin-bottom:18px; }
.footer__lema{ font-family:var(--display); font-size:1.05rem; text-transform:uppercase; color:#fff; line-height:1.2; }
.footer__redes{ display:flex; gap:10px; margin-top:20px; }
.footer__redes a{
  width:42px; height:42px; border-radius:11px; border:1px solid var(--linea);
  display:flex; align-items:center; justify-content:center; transition:all .25s;
}
.footer__redes a:hover{ background:var(--amarillo); border-color:var(--amarillo); color:var(--negro); }
.footer__redes svg{ width:18px; height:18px; }
.footer__bottom{
  margin-top:54px; border-top:1px solid var(--linea); padding:24px 0;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.78rem; color:var(--gris-2);
}

/* WhatsApp flotante */
.wa-float{
  position:fixed; z-index:80;
  right:max(20px, calc(env(safe-area-inset-right, 0px) + 12px));
  bottom:max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 34px -8px rgba(37,211,102,.65);
  transition:transform .3s var(--ease);
}
.wa-float:hover{ transform:scale(1.09) rotate(-6deg); }
.wa-float svg{ width:31px; height:31px; }
.wa-float::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:aro 2.4s infinite;
}
@keyframes aro{ 0%{transform:scale(1);opacity:.8} 100%{transform:scale(1.5);opacity:0} }

/* ---------- Scroll reveal ---------- */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s } .rv-d2{ transition-delay:.16s } .rv-d3{ transition-delay:.24s } .rv-d4{ transition-delay:.32s }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .banner__bg img{ transform:none !important; }
}