/* ============================================================
   Federación de Natación Artística México
   Sistema visual — azules acuáticos
   ============================================================ */

:root{
  /* Tinta / profundidad */
  --ink:    #0A2A36;
  --deep:   #0E3B49;
  --ocean:  #134E63;
  --royal:  #1E5BA8;
  --teal:   #16808A;
  --aqua:   #3FA9CE;
  --aqua-2: #5BBCDB;
  --aqua-soft:#9BD7E8;

  /* Superficies */
  --paper:  #FFFFFF;
  --mist:   #F6FBFC;
  --foam:   #EAF4F8;
  --foam-2: #DDEEF4;

  /* Texto */
  --text:   #0C2C38;
  --muted:  #4F6B76;
  --soft:   #748b94;

  /* Acento medalla (uso mínimo) */
  --gold:   #C9A227;
  --gold-soft:#E7D7A2;

  --line:   rgba(12,44,56,.12);
  --line-2: rgba(12,44,56,.07);

  --shadow-sm: 0 1px 2px rgba(10,42,54,.06), 0 2px 8px rgba(10,42,54,.05);
  --shadow:    0 10px 30px -12px rgba(10,42,54,.22), 0 3px 10px -4px rgba(10,42,54,.10);
  --shadow-lg: 0 30px 70px -28px rgba(10,42,54,.40);

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --r:   18px;
  --r-sm:12px;

  --font-display:'Archivo', system-ui, sans-serif;
  --font-body:'Hanken Grotesk', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--paper);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; line-height:1.04; letter-spacing:-.02em; margin:0; }
p{ margin:0; text-wrap:pretty; }
section{ position:relative; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

.eyebrow{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--teal);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--teal),var(--aqua));
  display:inline-block; border-radius:2px;
}
.eyebrow.center::before{ display:none; }

/* ---------- Botones ---------- */
.btn{
  --bg:var(--royal); --fg:#fff;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-display); font-weight:700; font-size:.98rem; letter-spacing:.01em;
  padding:.95em 1.5em; border-radius:999px; cursor:pointer; border:1px solid transparent;
  background:var(--bg); color:var(--fg);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s;
  box-shadow:0 8px 22px -10px rgba(30,91,168,.7);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(30,91,168,.75); }
.btn .ar{ transition:transform .25s; }
.btn:hover .ar{ transform:translateX(3px); }
.btn.ghost{
  background:transparent; color:var(--deep); border-color:var(--line);
  box-shadow:none;
}
.btn.ghost:hover{ border-color:var(--teal); color:var(--teal); background:var(--mist); }
.btn.on-dark{ box-shadow:0 10px 30px -10px rgba(0,0,0,.5); }
.btn.on-dark.ghost{ color:#eaf6fb; border-color:rgba(255,255,255,.32); }
.btn.on-dark.ghost:hover{ border-color:#fff; color:#fff; background:rgba(255,255,255,.08); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  transition:background .35s, box-shadow .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.nav .nav-in{
  max-width:var(--maxw); margin-inline:auto; padding:14px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:13px; }
.brand-mark{ width:46px; height:46px; }
.brand-mark--white{ display:none; }
body[data-hero="a"] .nav:not(.scrolled) .brand-mark--color{ display:none; }
body[data-hero="a"] .nav:not(.scrolled) .brand-mark--white{ display:block; }
.brand-tx{ display:flex; flex-direction:column; line-height:1; }
.brand-tx b{
  font-family:var(--font-display); font-weight:800; font-size:1.02rem; letter-spacing:-.01em;
  color:var(--deep);
}
.brand-tx span{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); margin-top:4px; font-weight:600; }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  font-family:var(--font-display); font-weight:600; font-size:.94rem; color:var(--deep);
  padding:.55em .9em; border-radius:999px; transition:background .2s,color .2s;
}
.nav-links a:hover{ background:var(--foam); color:var(--ocean); }
.nav-cta{ margin-left:8px; }

/* estado al hacer scroll */
.nav.scrolled{ background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(1.4); border-color:var(--line); box-shadow:0 6px 24px -18px rgba(10,42,54,.5); }

/* nav sobre hero oscuro (Inmersión) */
body[data-hero="a"] .nav:not(.scrolled) .brand-tx b{ color:#fff; }
body[data-hero="a"] .nav:not(.scrolled) .brand-tx span{ color:rgba(255,255,255,.7); }
body[data-hero="a"] .nav:not(.scrolled) .nav-links a{ color:#eaf6fb; }
body[data-hero="a"] .nav:not(.scrolled) .nav-links a:hover{ background:rgba(255,255,255,.12); color:#fff; }
body[data-hero="a"] .nav:not(.scrolled) .brand-mark{ filter:drop-shadow(0 2px 10px rgba(0,0,0,.4)); }

.nav-burger{ display:none; }

/* ============================================================
   HERO — contenedor común
   ============================================================ */
.hero{ display:none; }
body[data-hero="a"] #hero-a{ display:flex; }
body[data-hero="b"] #hero-b{ display:flex; }
body[data-hero="c"] #hero-c{ display:flex; }
.kicker-name{
  font-family:var(--font-display); font-weight:800; letter-spacing:-.01em;
}

/* ---------- HERO A — Inmersión ---------- */
#hero-a{
  min-height:100svh; position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(63,169,206,.30), transparent 55%),
    radial-gradient(120% 120% at 12% 100%, rgba(22,128,138,.40), transparent 55%),
    linear-gradient(160deg, #0A2A36 0%, #0E3B49 38%, #123F58 64%, #0A2A36 100%);
  color:#eaf6fb;
  align-items:center;
}
.caustics{ position:absolute; inset:0; opacity:.5; mix-blend-mode:screen; pointer-events:none;
  background:
    radial-gradient(60% 40% at 30% 20%, rgba(155,215,232,.18), transparent 60%),
    radial-gradient(40% 30% at 80% 70%, rgba(91,188,219,.14), transparent 60%);
}
.ripple-field{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.ripple-field .ring{
  position:absolute; border-radius:50%; border:1.5px solid rgba(155,215,232,.16);
  left:78%; top:14%; translate:-50% -50%;
  animation:ripple 7s ease-out infinite;
}
@keyframes ripple{
  0%{ width:60px; height:60px; opacity:.0; }
  18%{ opacity:.55; }
  100%{ width:1300px; height:1300px; opacity:0; }
}
#hero-a .wrap{ position:relative; z-index:3; padding-top:120px; padding-bottom:80px; }
.hero-a-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
#hero-a .eyebrow{ color:var(--aqua-soft); }
#hero-a .eyebrow::before{ background:linear-gradient(90deg,var(--aqua-soft),transparent); }
#hero-a h1{
  font-size:clamp(2.5rem, 5.4vw, 4.5rem); font-weight:900; margin:.42em 0 0;
  letter-spacing:-.035em;
  text-shadow:0 2px 30px rgba(0,0,0,.25);
}
#hero-a h1 .hl{ color:var(--aqua-2); }
#hero-a .lede{ font-size:1.18rem; color:#cfe8f1; max-width:34ch; margin-top:1.15em; }
#hero-a .cta-row{ margin-top:2em; display:flex; gap:14px; flex-wrap:wrap; }
.hero-a-emblem{ position:relative; display:grid; place-items:center; }
.hero-a-emblem img{
  width:min(100%,420px); filter:drop-shadow(0 30px 60px rgba(0,0,0,.45));
  animation:floaty 9s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

.hero-a-stats{
  position:relative; z-index:3; margin-top:18px;
  display:flex; gap:34px; flex-wrap:wrap; padding-top:26px; border-top:1px solid rgba(255,255,255,.14);
}
.hero-a-stats .s b{ font-family:var(--font-display); font-weight:800; font-size:1.9rem; display:block; color:#fff; }
.hero-a-stats .s span{ font-size:.82rem; color:#a9cdd9; letter-spacing:.02em; }

.scroll-hint{ position:absolute; left:50%; bottom:26px; translate:-50% 0; z-index:3; color:#bfe1ec;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; }
.scroll-hint .dot{ width:22px; height:36px; border:1.5px solid rgba(191,225,236,.6); border-radius:12px; position:relative; }
.scroll-hint .dot::after{ content:""; position:absolute; left:50%; top:7px; translate:-50% 0; width:4px; height:7px; border-radius:3px; background:var(--aqua-soft); animation:scrolldot 1.8s ease-in-out infinite; }
@keyframes scrolldot{ 0%,100%{ transform:translate(-50%,0); opacity:1;} 60%{ transform:translate(-50%,12px); opacity:.2; } }

/* ---------- HERO B — Institucional ---------- */
#hero-b{ background:var(--mist); padding-top:118px; padding-bottom:72px; min-height:100svh; align-items:center; }
#hero-b::before{ content:""; position:absolute; inset:0; background:
  radial-gradient(50% 60% at 100% 0%, rgba(63,169,206,.10), transparent 60%); pointer-events:none; }
.hero-b-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:54px; align-items:center; position:relative; z-index:2; }
#hero-b h1{ font-size:clamp(2.3rem,4.8vw,3.9rem); font-weight:900; color:var(--ink); margin-top:.4em; letter-spacing:-.035em; }
#hero-b h1 .hl{ color:var(--royal); }
#hero-b .lede{ font-size:1.12rem; color:var(--muted); max-width:42ch; margin-top:1.1em; }
#hero-b .cta-row{ margin-top:1.8em; display:flex; gap:14px; flex-wrap:wrap; }
.hero-b-stats{ margin-top:2.2em; display:flex; gap:30px; flex-wrap:wrap; }
.hero-b-stats .s b{ font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:var(--ocean); display:block; }
.hero-b-stats .s span{ font-size:.8rem; color:var(--soft); }
.hero-b-media{ position:relative; }
.media-ph{
  position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--foam) 0 16px, var(--foam-2) 16px 32px);
  border:1px solid var(--line); box-shadow:var(--shadow);
  display:grid; place-items:center;
}
.media-ph .ph-tag{
  font-family:var(--font-body); font-weight:600; font-size:.8rem; letter-spacing:.04em;
  color:var(--ocean); background:rgba(255,255,255,.86); padding:.5em 1em; border-radius:999px;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.media-ph .ph-mono{ position:absolute; left:14px; top:12px; font-family:ui-monospace,Menlo,monospace; font-size:.7rem; color:var(--soft); letter-spacing:.02em; }
.badge-emblem{
  position:absolute; right:-22px; bottom:-22px; width:118px; height:118px; border-radius:50%;
  background:#fff; display:grid; place-items:center; box-shadow:var(--shadow-lg); border:1px solid var(--line);
}
.badge-emblem img{ width:84px; }

/* ---------- HERO C — Editorial ---------- */
#hero-c{ background:#fff; min-height:100svh; padding-top:130px; padding-bottom:60px; align-items:center; overflow:hidden; }
.c-rings{ position:absolute; right:-12vw; top:50%; translate:0 -50%; width:78vw; max-width:980px; aspect-ratio:1; pointer-events:none; opacity:.85; }
.c-rings svg{ width:100%; height:100%; }
#hero-c .wrap{ position:relative; z-index:3; }
.hero-c-inner{ max-width:60ch; }
#hero-c .eyebrow{ color:var(--royal); }
#hero-c h1{
  font-size:clamp(2.6rem, 7vw, 5.6rem); font-weight:900; letter-spacing:-.04em; color:var(--ink);
  margin-top:.3em; line-height:.98;
}
#hero-c h1 .hl{
  background:linear-gradient(105deg,var(--royal),var(--teal) 60%,var(--aqua));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#hero-c .lede{ font-size:1.16rem; color:var(--muted); max-width:46ch; margin-top:1.3em; }
#hero-c .cta-row{ margin-top:2em; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-c-foot{ margin-top:3.2em; display:flex; gap:34px; flex-wrap:wrap; align-items:center; border-top:1px solid var(--line); padding-top:22px; max-width:60ch; }
.hero-c-foot .s b{ font-family:var(--font-display); font-weight:800; font-size:1.6rem; color:var(--ocean); display:block; }
.hero-c-foot .s span{ font-size:.78rem; color:var(--soft); }
.watermark{
  position:absolute; right:6vw; bottom:2vh; z-index:1; font-family:var(--font-display); font-weight:900;
  font-size:clamp(4rem,16vw,15rem); letter-spacing:-.06em; color:var(--foam); line-height:.8; pointer-events:none; user-select:none;
}

/* ============================================================
   SECCIÓN genérica
   ============================================================ */
.section{ padding:clamp(70px,9vw,120px) 0; }
.section.tint{ background:var(--mist); }
.sec-head{ max-width:62ch; margin-bottom:clamp(34px,5vw,56px); }
.sec-head h2{ font-size:clamp(2rem,4.2vw,3.1rem); font-weight:900; color:var(--ink); margin-top:.3em; letter-spacing:-.03em; }
.sec-head p{ font-size:1.1rem; color:var(--muted); margin-top:.9em; max-width:54ch; }
.sec-head.row{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; max-width:none; flex-wrap:wrap; }

/* ---------- Banda de estadísticas ---------- */
.statband{ background:linear-gradient(120deg,var(--deep),var(--ocean) 55%,var(--teal)); color:#fff; }
.statband .wrap{ padding-block:clamp(40px,5vw,58px); display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.statband .stat{ position:relative; }
.statband .stat + .stat{ border-left:1px solid rgba(255,255,255,.16); padding-left:24px; }
.statband b{ font-family:var(--font-display); font-weight:900; font-size:clamp(2.4rem,4.5vw,3.4rem); display:block; letter-spacing:-.03em; line-height:1; }
.statband .lab{ margin-top:.6em; font-size:.92rem; color:#bfe1ec; letter-spacing:.01em; }
.statband .gold{ color:var(--gold-soft); }

/* ---------- Competencias ---------- */
.comp-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.comp-card{
  position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 28px 26px; box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.comp-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(var(--royal),var(--teal)); opacity:.9; }
.comp-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent; }
.comp-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.comp-date{ font-family:var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); }
.comp-flag{ font-size:1.5rem; line-height:1; }
.comp-card h3{ font-size:1.42rem; color:var(--ink); margin-top:.5em; font-weight:800; letter-spacing:-.02em; }
.comp-loc{ display:inline-flex; align-items:center; gap:.4em; color:var(--muted); font-size:.92rem; margin-top:.45em; }
.comp-loc svg{ width:15px; height:15px; opacity:.7; }
.comp-results{ margin-top:18px; display:flex; flex-direction:column; gap:9px; }
.res-line{ display:flex; align-items:center; gap:11px; font-size:.96rem; }
.medal{ flex:none; width:11px; height:11px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.medal.g{ background:radial-gradient(circle at 35% 30%,#F4E2A1,var(--gold)); }
.medal.s{ background:radial-gradient(circle at 35% 30%,#fff,#B8C4CC); }
.medal.b{ background:radial-gradient(circle at 35% 30%,#E7B58C,#B06B3A); }
.res-line .ev{ color:var(--text); }
.res-line .ev b{ font-weight:700; color:var(--ink); }
.res-line .sc{ margin-left:auto; font-family:var(--font-display); font-weight:600; font-size:.82rem; color:var(--soft); }
.comp-tag{
  display:inline-flex; align-items:center; gap:.5em; margin-top:18px; font-size:.82rem; font-weight:600;
  color:var(--ocean); background:var(--foam); padding:.5em .85em; border-radius:999px;
}
.comp-note{ margin-top:14px; font-size:.95rem; color:var(--muted); }

/* ---------- Logros ---------- */
.logros-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-auto-rows:auto; gap:22px; }
.logro{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:30px;
  position:relative; overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .3s, box-shadow .3s;
}
.logro:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.logro .ico{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--foam); color:var(--ocean); margin-bottom:18px; }
.logro .ico svg{ width:24px; height:24px; }
.logro h3{ font-size:1.25rem; color:var(--ink); font-weight:800; letter-spacing:-.02em; }
.logro p{ color:var(--muted); margin-top:.55em; font-size:.98rem; }
.logro.feature{
  grid-row:span 2; color:#fff; border:none;
  background:
    radial-gradient(120% 90% at 90% 0%, rgba(63,169,206,.4), transparent 55%),
    linear-gradient(160deg,var(--deep),var(--ocean));
  display:flex; flex-direction:column; justify-content:space-between;
}
.logro.feature .ico{ background:rgba(255,255,255,.14); color:#fff; }
.logro.feature h3{ color:#fff; font-size:1.5rem; }
.logro.feature p{ color:#cfe8f1; }
.logro.feature .bignum{ font-family:var(--font-display); font-weight:900; font-size:clamp(3.4rem,7vw,5rem); line-height:.9; letter-spacing:-.04em; margin-bottom:.1em; }
.logro.feature .bignum em{ font-style:normal; color:var(--aqua-2); }
.medal-breakdown{ display:flex; gap:18px; margin-top:18px; }
.medal-breakdown .mb{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; }
.medal-breakdown .mb .medal{ width:14px; height:14px; }

.athlete{ display:flex; gap:16px; align-items:center; }
.athlete .av{ flex:none; width:60px; height:60px; border-radius:50%; overflow:hidden; border:1px solid var(--line);
  background:repeating-linear-gradient(135deg,var(--foam) 0 8px,var(--foam-2) 8px 16px); display:grid; place-items:center; }
.athlete .av span{ font-family:ui-monospace,monospace; font-size:.5rem; color:var(--soft); text-align:center; line-height:1.2; }
.athlete .info b{ font-family:var(--font-display); font-size:1.05rem; color:var(--ink); display:block; }
.athlete .info span{ font-size:.86rem; color:var(--muted); }

.qualify-row{ display:flex; flex-direction:column; gap:14px; }
.qual{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--line-2); }
.qual:first-child{ border-top:none; padding-top:0; }
.qual .qd{ flex:none; width:40px; height:40px; border-radius:10px; background:var(--foam); display:grid; place-items:center; color:var(--teal); font-family:var(--font-display); font-weight:800; }
.qual b{ font-family:var(--font-display); color:var(--ink); display:block; font-size:1.02rem; }
.qual span{ color:var(--muted); font-size:.9rem; }

/* ---------- Contacto ---------- */
.contact-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:48px; align-items:start; }
.contact-aside h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); color:var(--ink); font-weight:900; letter-spacing:-.03em; margin-top:.3em; }
.contact-aside p{ color:var(--muted); margin-top:1em; font-size:1.06rem; max-width:38ch; }
.contact-items{ margin-top:30px; display:flex; flex-direction:column; gap:6px; }
.citem{ display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line-2); }
.citem:first-child{ border-top:none; }
.citem .ci{ flex:none; width:42px; height:42px; border-radius:11px; background:var(--foam); display:grid; place-items:center; color:var(--ocean); }
.citem .ci svg{ width:20px; height:20px; }
.citem .ctx small{ display:block; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); font-weight:600; }
.citem .ctx a, .citem .ctx b{ font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:1.02rem; }
.citem .ctx a:hover{ color:var(--royal); }

.socials{ display:flex; gap:12px; margin-top:26px; }
.soc{ display:inline-flex; align-items:center; gap:.6em; padding:.7em 1.1em; border-radius:999px; border:1px solid var(--line);
  font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--deep); transition:.22s; background:#fff; }
.soc svg{ width:19px; height:19px; }
.soc:hover{ transform:translateY(-2px); border-color:transparent; color:#fff; box-shadow:var(--shadow); }
.soc.ig:hover{ background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF); }
.soc.tt:hover{ background:#111; }

.form-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(26px,3.4vw,40px); box-shadow:var(--shadow); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label{ font-family:var(--font-display); font-weight:600; font-size:.86rem; color:var(--deep); }
.field label .req{ color:var(--teal); }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--text);
  padding:.85em 1em; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--mist);
  transition:border-color .2s, box-shadow .2s, background .2s; width:100%;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--aqua); background:#fff; box-shadow:0 0 0 4px rgba(63,169,206,.14);
}
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#d9534f; box-shadow:0 0 0 4px rgba(217,83,79,.12); }
.field .err{ font-size:.78rem; color:#c0392b; display:none; }
.field.invalid .err{ display:block; }
.form-foot{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:6px; flex-wrap:wrap; }
.form-foot .note{ font-size:.82rem; color:var(--soft); max-width:30ch; }
.form-success{
  display:none; text-align:center; padding:30px 10px;
}
.form-success.show{ display:block; animation:pop .4s cubic-bezier(.2,.9,.3,1.3); }
@keyframes pop{ from{ opacity:0; transform:scale(.94);} to{ opacity:1; transform:scale(1);} }
.form-success .check{ width:64px; height:64px; border-radius:50%; background:linear-gradient(150deg,var(--teal),var(--royal)); display:grid; place-items:center; margin:0 auto 18px; box-shadow:0 14px 30px -12px rgba(22,128,138,.6); }
.form-success .check svg{ width:32px; height:32px; color:#fff; }
.form-success h3{ font-size:1.5rem; color:var(--ink); }
.form-success p{ color:var(--muted); margin-top:.5em; }

/* ---------- Redes sociales: preview de publicaciones ---------- */
.social-block{ margin-top:30px; }
.social-block .eyebrow{ margin-bottom:16px; }
.social-feed{ display:grid; gap:16px; }
.feed-card{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s; }
.feed-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.feed-head{ display:flex; align-items:center; gap:12px; padding:14px 16px; }
.feed-head .pic{ flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#fff; }
.feed-head .pic svg{ width:22px; height:22px; }
.feed-head .pic.ig{ background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF); }
.feed-head .pic.tt{ background:#111; }
.feed-head .meta{ line-height:1.2; min-width:0; }
.feed-head .meta b{ font-family:var(--font-display); font-weight:700; font-size:.98rem; color:var(--ink); display:block; }
.feed-head .meta span{ font-size:.8rem; color:var(--soft); }
.feed-head .follow{ margin-left:auto; flex:none; font-family:var(--font-display); font-weight:700; font-size:.82rem; color:#fff; background:var(--royal); padding:.5em 1em; border-radius:999px; transition:.2s; }
.feed-head .follow:hover{ background:var(--ocean); transform:translateY(-1px); }
.feed-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.feed-grid .post{ position:relative; aspect-ratio:1; overflow:hidden; display:grid; place-items:center;
  background:repeating-linear-gradient(135deg,var(--foam) 0 10px,var(--foam-2) 10px 20px); }
.feed-grid .post .ph-mono{ font-family:ui-monospace,Menlo,monospace; font-size:.62rem; color:var(--soft); letter-spacing:.04em; }
.feed-grid .post .ov{ position:absolute; top:7px; right:7px; width:22px; height:22px; border-radius:6px; background:rgba(255,255,255,.82); display:grid; place-items:center; color:var(--ocean); box-shadow:var(--shadow-sm); }
.feed-grid .post .ov svg{ width:13px; height:13px; }
.feed-grid .post::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg,transparent 55%,rgba(12,44,56,.06)); }
.feed-card:hover .feed-grid .post::after{ background:linear-gradient(160deg,rgba(63,169,206,.08),rgba(12,44,56,.10)); }
.feed-note{ font-size:.76rem; color:var(--soft); margin-top:12px; font-family:ui-monospace,Menlo,monospace; }

/* ---------- Nav: enlace Entrar ---------- */
.nav-login .ext{ font-size:.8em; opacity:.85; }
body[data-hero="a"] .nav:not(.scrolled) .nav-burger{ color:#fff; border-color:rgba(255,255,255,.32); }

/* ============================================================
   BANNER — Quiero nadar
   ============================================================ */
.join{ position:relative; overflow:hidden; color:#eaf6fb;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(91,188,219,.45), transparent 55%),
    linear-gradient(135deg, var(--royal) 0%, var(--ocean) 48%, var(--teal) 100%);
  padding:clamp(52px,7vw,86px) 0;
}
.join-rings{ position:absolute; right:-180px; bottom:-220px; width:580px; height:580px; border-radius:50%;
  pointer-events:none; opacity:.9;
  background:radial-gradient(circle,
    transparent 37%, rgba(255,255,255,.10) 38%, transparent 40%,
    transparent 50%, rgba(255,255,255,.09) 51%, transparent 53%,
    transparent 63%, rgba(255,255,255,.07) 64%, transparent 66%,
    transparent 77%, rgba(255,255,255,.05) 78%, transparent 80%); }
.join-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,56px); align-items:center; }
.eyebrow.light{ color:#bfe7f2; }
.eyebrow.light::before{ background:linear-gradient(90deg,#bfe7f2,transparent); }
.join-copy h2{ font-size:clamp(2rem,4.4vw,3.2rem); font-weight:900; color:#fff; margin-top:.35em; letter-spacing:-.03em; }
.join-copy p{ color:#d7ecf4; font-size:1.12rem; margin-top:1em; max-width:46ch; }
.join-copy p strong{ color:#fff; }
.join-points{ list-style:none; margin:1.6em 0 0; padding:0; display:flex; flex-direction:column; gap:.7em; }
.join-points li{ display:flex; align-items:center; gap:.7em; font-weight:600; color:#eaf6fb; }
.join-points .tick{ flex:none; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:.8rem; color:#fff; }
.join-card{ background:#fff; border-radius:var(--r); padding:clamp(24px,3vw,36px); box-shadow:var(--shadow-lg); color:var(--text); }
.join-card h3{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--ink); margin-bottom:18px; letter-spacing:-.02em; }
.join-submit{ width:100%; justify-content:center; margin-top:6px; }
.join-note{ font-size:.78rem; color:var(--soft); margin-top:12px; text-align:center; }
#joinSuccess .check{ background:linear-gradient(150deg,var(--royal),var(--teal)); }

/* ---------- Redes: recuadros de fotos (image-slot) + embed TikTok ---------- */
.feed-grid .post-slot{ display:block; width:100%; aspect-ratio:1; }
.tt-embed{ padding:10px; min-height:320px; max-height:600px; overflow-y:auto; background:var(--mist); border-top:1px solid var(--line-2); }
.tt-embed .tiktok-embed{ margin:0 auto !important; }
.tt-embed > section, .tt-embed a{ color:var(--royal); font-family:var(--font-display); font-weight:600; }

@media (max-width:920px){
  .nav-links{ display:none; }
  .nav-burger{ display:grid; }
}
@media (max-width:840px){
  .join-grid{ grid-template-columns:1fr; }
}

/* ---------- CAPTCHA (reto numérico propio) ---------- */
.captcha{
  display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
  background:var(--mist); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:14px 16px; margin-bottom:16px;
}
.captcha-q{ display:flex; flex-direction:column; gap:7px; }
.captcha-label{ font-family:var(--font-display); font-weight:600; font-size:.74rem; letter-spacing:.04em; color:var(--soft); text-transform:uppercase; }
.captcha-prompt{ display:flex; align-items:center; gap:10px; }
.captcha-text{
  font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--ink);
  letter-spacing:.04em; user-select:none; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:.28em .7em; min-width:118px; text-align:center;
}
.captcha-refresh{
  flex:none; width:38px; height:38px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--ocean); font-size:1.1rem; line-height:1;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), background .2s, color .2s, border-color .2s;
}
.captcha-refresh:hover{ background:var(--foam); color:var(--royal); border-color:var(--aqua); }
.captcha-refresh:active{ transform:rotate(-180deg); }
.captcha-field{ margin-bottom:0; flex:1; min-width:120px; }
.captcha-field input{ max-width:140px; }
.captcha.ok .captcha-text{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(22,128,138,.12); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:#cfe1e8; padding-top:64px; }
.footer .wrap{ padding-bottom:34px; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:42px; border-bottom:1px solid rgba(255,255,255,.1); }
.foot-brand{ display:flex; gap:14px; align-items:flex-start; }
.foot-brand img{ width:58px; height:58px; }
.foot-brand .ft b{ font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:#fff; display:block; }
.foot-brand .ft span{ font-size:.84rem; color:#8fb0bb; display:block; margin-top:6px; max-width:34ch; line-height:1.5; }
.foot-col h4{ font-family:var(--font-display); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#7fa3af; font-weight:700; margin-bottom:14px; }
.foot-col a{ display:block; color:#cfe1e8; font-size:.96rem; padding:5px 0; transition:color .2s; }
.foot-col a:hover{ color:#fff; }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:24px; flex-wrap:wrap; font-size:.84rem; color:#7fa3af; }
.foot-bottom .legal b{ color:#aecbd4; font-weight:600; }

/* ============================================================
   SWITCHER de portada (ayuda de revisión)
   ============================================================ */
.hero-switch{
  position:fixed; z-index:90; left:50%; bottom:22px; translate:-50% 0;
  display:flex; align-items:center; gap:6px; padding:7px 8px 7px 16px;
  background:rgba(10,42,54,.86); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.14);
  border-radius:999px; box-shadow:var(--shadow-lg); color:#eaf6fb;
  transition:opacity .3s, transform .3s;
  animation:swPulse 2.4s ease-in-out 3;
}
@keyframes swPulse{
  0%,100%{ box-shadow:var(--shadow-lg), 0 0 0 0 rgba(63,169,206,.0); }
  50%{ box-shadow:var(--shadow-lg), 0 0 0 8px rgba(63,169,206,.16); }
}
.hs-tip{
  position:absolute; bottom:calc(100% + 12px); left:50%; translate:-50% 0;
  background:#fff; color:var(--deep); font-family:var(--font-display); font-weight:700; font-size:.82rem;
  white-space:nowrap; padding:.6em 1em; border-radius:999px; box-shadow:var(--shadow);
  transition:opacity .4s, transform .4s; animation:tipBob 1.8s ease-in-out infinite;
}
.hs-tip::after{ content:""; position:absolute; top:100%; left:50%; translate:-50% -1px; border:7px solid transparent; border-top-color:#fff; }
.hero-switch.tip-hidden .hs-tip{ opacity:0; transform:translateY(6px); pointer-events:none; }
@keyframes tipBob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,-4px); } }
.hero-switch .hs-lab{ font-family:var(--font-display); font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:#9cc4d2; margin-right:4px; }
.hero-switch button{
  font-family:var(--font-display); font-weight:700; font-size:.86rem; color:#cfe8f1; cursor:pointer;
  background:transparent; border:none; padding:.5em .95em; border-radius:999px; transition:.2s; white-space:nowrap;
}
.hero-switch button:hover{ background:rgba(255,255,255,.1); color:#fff; }
.hero-switch button.on{ background:#fff; color:var(--deep); }
.hero-switch .hs-x{ width:30px; height:30px; padding:0; display:grid; place-items:center; color:#9cc4d2; margin-left:2px; }
.hero-switch.hidden{ opacity:0; transform:translateY(20px); pointer-events:none; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero-a-grid{ grid-template-columns:1fr; gap:30px; }
  .hero-a-emblem{ order:-1; }
  .hero-a-emblem img{ width:min(70%,320px); }
  .hero-b-grid{ grid-template-columns:1fr; gap:40px; }
  .hero-b-media{ max-width:440px; }
  .logros-grid{ grid-template-columns:1fr 1fr; }
  .logro.feature{ grid-column:1 / -1; grid-row:auto; flex-direction:row; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .contact-grid{ grid-template-columns:1fr; gap:34px; }
  .statband .wrap{ grid-template-columns:1fr 1fr; gap:30px; }
  .statband .stat + .stat{ border-left:none; padding-left:0; }
  .statband .stat:nth-child(odd){ border-left:none; }
}
@media (max-width:760px){
  .nav-links{ display:none; }
  .nav-burger{ display:grid; }
  .comp-grid{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr; gap:32px; }
  .form-row{ grid-template-columns:1fr; }
  .watermark{ display:none; }
  .hero-switch{ left:12px; right:12px; translate:0 0; justify-content:center; }
}
@media (max-width:560px){
  .logros-grid{ grid-template-columns:1fr; }
  .statband .wrap{ grid-template-columns:1fr 1fr; }
  body{ font-size:16px; }
  .hero-a-stats{ gap:22px; }
}