/* ============================================================
   tuCOACH — hoja de estilos principal
   Tokens heredados de la landing original + componentes nuevos
   ============================================================ */

/* ============ TOKENS ============ */
:root{
  --bg-0:#08090a;
  --bg-1:#0e1110;
  --bg-2:#141816;
  --card:#12151b;
  --card-border:rgba(255,255,255,.08);
  --mint:#2fe8a6;          /* verde único de marca: idéntico en tema claro y oscuro */
  --mint-text:#2fe8a6;     /* acento aplicado a texto (mismo verde en ambos temas) */
  --mint-dim:#1c9c72;
  --mint-glow:rgba(47,232,166,.35);
  --mint-soft:rgba(47,232,166,.08);
  --ink:#f4f7f5;
  --ink-dim:#aab3ae;
  --ink-faint:#7b857f;   /* >=4.7:1 sobre todas las superficies oscuras */
  --mint-text-shadow:none;   /* no hace falta sobre fondos oscuros */
  --danger:#ff6b6b;
  --radius-s:10px;
  --radius-m:18px;
  --radius-l:28px;
  --maxw:1180px;
  --display:'Outfit',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  color-scheme: dark;
}

:root[data-theme="light"]{
  --bg-0:#f6f8f7;
  --bg-1:#ffffff;
  --bg-2:#eef2f0;
  --card:#ffffff;
  --card-border:rgba(15,23,18,.10);
  --mint:#2fe8a6;
  --mint-text:#2fe8a6;
  --mint-dim:#1c9c72;
  --mint-glow:rgba(47,232,166,.35);
  --mint-soft:rgba(47,232,166,.08);
  --ink:#0e130f;
  --ink-dim:#4c554e;
  --ink-faint:#646d67;   /* >=4.7:1 sobre todas las superficies claras */
  --mint-text-shadow:none;
  --danger:#d1453d;
  color-scheme: light;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-0);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .25s ease, color .25s ease;
}
img,svg,video{display:block; max-width:100%;}
[hidden]{display:none !important;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:5000;
  background:var(--mint); color:#04140d; padding:12px 20px; border-radius:0 0 var(--radius-s) 0;
  font-family:var(--display); font-weight:600;
}
.skip-link:focus{left:0;}

h1,h2,h3,h4{font-family:var(--display); font-weight:700; letter-spacing:-.01em; color:var(--ink);}
h1{font-size:clamp(2.2rem,4.4vw,3.9rem); line-height:1.02; font-weight:800; letter-spacing:-.03em;}
h2{font-size:clamp(1.7rem,3.6vw,3rem); line-height:1.15;}
h3{font-size:1.35rem; font-weight:600;}
p{color:var(--ink-dim);}
.lede{font-size:clamp(1.02rem,1.6vw,1.25rem); color:var(--ink-dim); max-width:54ch;}
.center{text-align:center;}
.center .lede{margin-left:auto; margin-right:auto;}

.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:1rem; letter-spacing:.01em;
  color:var(--mint-text); text-shadow:var(--mint-text-shadow); margin-bottom:14px;
}
.kicker::before{content:''; width:22px; height:2px; background:var(--mint); border-radius:2px; flex-shrink:0;}
.center .kicker{justify-content:center;}

.footnote{font-size:.78rem; color:var(--ink-faint); margin-top:8px;}
.microcopy{font-size:.85rem; color:var(--ink-faint); margin-top:10px;}

/* dot grid */
.dotgrid{
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, black 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, black 40%, transparent 100%);
}
:root[data-theme="light"] .dotgrid{background-image:radial-gradient(rgba(15,23,18,.07) 1px, transparent 1px);}

/* ============ BOTONES ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--display); font-weight:600; font-size:.98rem;
  padding:15px 28px; border-radius:999px; cursor:pointer;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--mint); color:#04140d;}
.btn-primary:hover{box-shadow:0 8px 30px -6px var(--mint-glow); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--card-border);}
.btn-ghost:hover{border-color:var(--mint); color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}
.center .btn-row{justify-content:center;}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none;}

.section{position:relative; padding:clamp(40px, 4.2vw, 58px) 0;}
.section-alt{background:var(--bg-1);}

/* Secciones que siempre muestran la paleta opuesta al tema resuelto del sitio,
   para lograr una mezcla ~70/30 en la landing. --mint / --mint-text no cambian.
   Mutuamente excluyente con .section-alt: nunca van juntas en la misma sección. */
.section-accent{
  --bg-0:#08090a; --bg-1:#0e1110; --bg-2:#141816; --card:#12151b;
  --card-border:rgba(255,255,255,.08); --ink:#f4f7f5; --ink-dim:#aab3ae; --ink-faint:#7b857f;
  --mint-text-shadow:none;
  background:var(--bg-0); color:var(--ink);
}
:root[data-theme="dark"] .section-accent{
  --bg-0:#f6f8f7; --bg-1:#ffffff; --bg-2:#eef2f0; --card:#ffffff;
  --card-border:rgba(15,23,18,.10); --ink:#0e130f; --ink-dim:#4c554e; --ink-faint:#646d67;
  --mint-text-shadow:none;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .section-accent{
    --bg-0:#f6f8f7; --bg-1:#ffffff; --bg-2:#eef2f0; --card:#ffffff;
    --card-border:rgba(15,23,18,.10); --ink:#0e130f; --ink-dim:#4c554e; --ink-faint:#646d67;
    --mint-text-shadow:none;
  }
}
.section-tight{padding:clamp(32px, 3vw, 44px) 0;}

/* ============ PANTALLA DE CARGA ============ */
#loader{
  position:fixed; inset:0; z-index:9000; background:var(--bg-0);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .5s ease, visibility .5s ease;
}
#loader.done{opacity:0; visibility:hidden;}
#loader .logo{font-size:1.8rem;}
.loader-track{width:180px; height:2px; background:var(--card-border); border-radius:2px; overflow:hidden;}
.loader-fill{height:100%; width:0%; background:var(--mint); transition:width .3s ease;}

/* ============ HEADER ============ */
header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg-0) 84%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--card-border);
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  header{background:rgba(8,9,10,.85);}
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:var(--maxw); margin:0 auto; gap:16px;}
.logo{font-family:var(--display); font-weight:800; font-size:1.32rem; letter-spacing:-.02em; display:flex; align-items:center; flex-shrink:0;}
.logo .tu{color:var(--ink);}
.logo .coach{color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
.navlinks{display:flex; align-items:center; gap:22px;}
.navlinks .nav-link,
.nav-dd-trigger{
  font:inherit; font-size:.94rem; font-weight:500; color:var(--ink-dim);
  background:none; border:0; padding:8px 0; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  transition:color .15s;
}
.navlinks .nav-link:hover,
.nav-dd-trigger:hover,
.nav-dd.open .nav-dd-trigger{color:var(--ink);}
.nav-dd-trigger:focus-visible,
.navlinks .nav-link:focus-visible,
.dd-item:focus-visible{outline:2px solid var(--mint); outline-offset:3px; border-radius:8px;}
.nav-caret{flex-shrink:0; transition:transform .18s ease;}
.nav-dd.open .nav-caret{transform:rotate(180deg);}

/* Desplegables del menú principal */
.nav-dd{position:relative;}
.nav-dd-panel{
  display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:110;
  min-width:330px; max-width:min(360px, calc(100vw - 32px)); padding:8px;
  background:var(--card); border:1px solid var(--card-border); border-radius:16px;
  box-shadow:0 22px 44px -14px rgba(0,0,0,.5);
}
:root[data-theme="light"] .nav-dd-panel{box-shadow:0 22px 44px -16px rgba(15,23,18,.28);}
.nav-dd-panel::before{content:''; position:absolute; left:0; right:0; top:-10px; height:10px;}
.nav-dd.open .nav-dd-panel{display:block;}
.nav-dd-panel.align-right{left:auto; right:0;}
.dd-item{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px;
  color:var(--ink); font-size:.92rem; font-weight:500; line-height:1.3;
  transition:background .15s ease;
}
a.dd-item:hover,a.dd-item:focus-visible{background:var(--mint-soft);}
.dd-title{font-family:var(--display); font-weight:600; font-size:.95rem; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.dd-desc{font-size:.8rem; font-weight:400; line-height:1.4; color:var(--ink-dim);}
.dd-disabled{cursor:default; pointer-events:none;}
.dd-disabled .dd-title{color:var(--ink-faint);}
.dd-pill{
  font-family:var(--body); font-size:.68rem; font-weight:600; letter-spacing:.01em; line-height:1;
  padding:4px 8px; border-radius:999px; color:var(--ink-dim);
  background:color-mix(in srgb, var(--ink) 8%, transparent);
  border:1px solid var(--card-border);
}
.dd-pill-new{color:#04140d; background:var(--mint); border-color:var(--mint);}
.mm-inline-row{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;}

.navcta{display:flex; align-items:center; gap:14px;}
.navcta .btn{padding:11px 20px; font-size:.9rem;}

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--bg-2); border:1px solid var(--card-border); color:var(--ink);
  cursor:pointer; transition:border-color .15s ease, transform .15s ease, color .15s ease;
}
.icon-btn:hover{border-color:var(--mint); color:var(--mint-text); text-shadow:var(--mint-text-shadow); transform:translateY(-1px);}
.icon-btn svg{pointer-events:none;}

.burger{display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:38px; height:38px; background:none; border:0; cursor:pointer;}
.burger span{width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{display:none; flex-direction:column; padding:6px 28px 24px; border-top:1px solid var(--card-border); background:var(--bg-0); max-height:calc(100vh - 76px); overflow-y:auto;}
.mobile-menu.open{display:flex;}
.mobile-menu > a,
.mm-row a,
.mm-title{padding:14px 2px; font-size:.98rem; font-weight:500; color:var(--ink-dim);}
.mobile-menu > a{border-bottom:1px solid var(--card-border);}
.mobile-menu a:hover,.mm-title:hover{color:var(--ink);}
.mobile-menu .mobile-cta{border-bottom:none; margin-top:14px; text-align:center; color:#04140d;}
.mm-group{border-bottom:1px solid var(--card-border);}
.mm-row{display:flex; align-items:stretch;}
.mm-row a{flex:1; min-width:0;}
.mm-title{flex:1; text-align:left; background:none; border:0; font-family:inherit; cursor:pointer;}
.mm-caret{
  display:inline-flex; align-items:center; justify-content:center; width:48px; flex-shrink:0;
  background:none; border:0; color:var(--ink-dim); cursor:pointer;
}
.mm-caret .nav-caret{width:14px; height:14px;}
.mm-caret[aria-expanded="true"] .nav-caret,
.mm-group.open .mm-caret .nav-caret{transform:rotate(180deg);}
.mm-sub{display:flex; flex-direction:column; padding:0 0 10px 16px;}
.mm-sub[hidden]{display:none;}
.mm-sub a,.mm-disabled{display:flex; flex-direction:column; gap:2px; padding:10px 8px; font-size:.93rem; color:var(--ink-dim); border-bottom:0; border-radius:10px;}
.mm-sub a:hover{background:var(--mint-soft);}
.mm-sub .dd-title{font-size:.95rem;}
.mm-disabled{cursor:default;}
.mm-disabled .dd-title{color:var(--ink-faint);}
.mm-caret:focus-visible,.mm-title:focus-visible,.mobile-menu a:focus-visible{outline:2px solid var(--mint); outline-offset:-2px; border-radius:8px;}

/* Con el nuevo desplegable "tuCOACH" y el interruptor de tema reubicado, la cabecera de
   escritorio necesita algo más de ancho: el corte del menú móvil sube de 900 a 960 px
   (independiente de isDesktop() en main.js, que solo afecta el efecto de scroll del hero). */
@media(min-width:961px){ .mobile-menu{display:none !important;} }
@media(max-width:960px){
  /* En móvil, .navlinks solo deja visible el interruptor de tema (junto a la hamburguesa);
     los desplegables y enlaces de escritorio se ocultan porque viven en #mobile-menu. */
  .navlinks{display:flex; gap:0;}
  .navlinks > .nav-dd,
  .navlinks > a.nav-link{display:none;}
  .burger{display:flex;}
}
@media(max-width:960px){ .navcta .btn-primary{display:none;} }

/* ============ HERO CINEMATOGRÁFICO ============ */
.hero-scroll{position:relative; height:135vh;}
/* padding-top deja libre la altura de la cabecera pegajosa: sin él, el
   titular se centra en 100vh y queda cortado por debajo del menú. */
.hero-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center; padding-top:76px;
}

.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media video,.hero-media img.hero-poster{width:100%; height:100%; object-fit:cover;}
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 70% at 70% 50%, transparent, var(--bg-0) 78%),
    linear-gradient(90deg, var(--bg-0) 8%, color-mix(in srgb, var(--bg-0) 55%, transparent) 45%, transparent 75%);
}
:root[data-theme="light"] .hero-media{opacity:.5;}

/* Escenografía CSS de fondo: retícula, haz de luz y resplandor */
.hero-atmos{position:absolute; inset:0; z-index:0; overflow:hidden;}
.hero-atmos .beam{
  position:absolute; top:-30%; left:52%; width:38%; height:170%;
  background:linear-gradient(180deg, transparent, var(--mint-soft) 30%, transparent);
  transform:rotate(14deg); filter:blur(28px);
}
.hero-atmos .floorglow{
  position:absolute; bottom:-30%; right:-10%; width:70%; height:70%;
  background:radial-gradient(circle, var(--mint-glow), transparent 68%);
  filter:blur(20px); opacity:.5;
}

/* ---- Hero-stage: composición animada de capturas reales del producto ---- */
.hero-stage{position:relative; padding:28px 24px 36px;}
/* Escritorio: el hero usa un contenedor más ancho para que la composición gane presencia */
.hero .hero-content.wrap{max-width:1360px;}
.hs-panel{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  border-radius:var(--radius-l); border:1px solid var(--card-border);
  background:#12151b;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(47,232,166,.06);
}
.hs-frame{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.04);
  transition:opacity .9s ease, transform 6s ease-out;
}
.hs-frame.is-active{opacity:1; transform:scale(1);}
.hs-badge{
  position:absolute; left:14px; top:14px; z-index:2;
  font-family:var(--display); font-size:.72rem; font-weight:700; letter-spacing:.02em;
  color:#08090a; background:var(--mint);
  padding:6px 12px; border-radius:999px;
}
.hs-tile{
  position:absolute; width:27%; aspect-ratio:1/1; overflow:hidden;
  border-radius:var(--radius-m); border:1px solid rgba(255,255,255,.08);
  background:#12151b; box-shadow:0 26px 60px -24px rgba(0,0,0,.75);
  animation:hs-float 6s ease-in-out infinite alternate;
}
.hs-tile img{width:100%; height:100%; object-fit:cover; transform:scale(1.32); display:block;}
.hs-tile-a{top:0; right:0;}
.hs-tile-b{left:0; bottom:6px; width:24%; animation-delay:-3s;}
.hs-chip{
  position:absolute; right:6%; bottom:0;
  display:flex; align-items:center; gap:8px; padding:9px 14px 9px 9px;
  border-radius:999px; background:rgba(18,21,27,.92); border:1px solid rgba(47,232,166,.28);
  color:#e9efeb; font-size:.8rem; font-weight:600;
  box-shadow:0 20px 44px -22px rgba(0,0,0,.7);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:hs-float 5s ease-in-out infinite alternate; animation-delay:-1.5s;
}
.hs-chip-dot{
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  background:var(--mint); color:#08090a;
  display:flex; align-items:center; justify-content:center;
}
.hs-chip-text{transition:opacity .35s ease;}
.hs-chip-text.is-out{opacity:0;}
@keyframes hs-float{from{transform:translateY(0);} to{transform:translateY(-10px);}}
.hero-content{
  position:relative; z-index:3; width:100%;
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:40px; align-items:center;
}
@media(max-width:900px){
  .hero-content{grid-template-columns:1fr; gap:0; align-items:start;}
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--mint-soft); border:1px solid color-mix(in srgb, var(--mint) 30%, transparent);
  color:var(--mint-text); text-shadow:var(--mint-text-shadow); font-size:.82rem; font-weight:600;
  padding:7px 14px; border-radius:999px; margin-bottom:22px;
}
.dot-live{width:7px; height:7px; border-radius:50%; background:var(--mint); display:inline-block; box-shadow:0 0 8px var(--mint); flex-shrink:0; animation:pulse-dot 2.4s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;} 50%{opacity:.35;}}
.hero h1{margin-bottom:22px; max-width:16ch;}
.hero h1 .accent{color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
.hero .lede{margin-bottom:32px;}
.hero .lede strong{color:var(--ink); font-weight:700;}
.hero .btn-row{margin-bottom:18px;}
.hero-col{max-width:600px;}

.hero-progress{
  position:absolute; left:28px; bottom:34px; z-index:4;
  display:flex; align-items:center; gap:12px; font-size:.72rem; color:var(--ink-faint);
  font-family:var(--display); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.hero-progress-track{width:120px; height:2px; background:var(--card-border); border-radius:2px; overflow:hidden;}
.hero-progress-fill{height:100%; width:0%; background:var(--mint);}

@media(max-width:900px){
  .hero-scroll{height:auto;}
  /* En móvil el contenido arranca arriba, sin centrado vertical: el distintivo
     queda ~22px bajo la cabecera pegajosa. */
  .hero-sticky{position:relative; height:auto; min-height:0; align-items:flex-start; padding:22px 0 64px;}
  .hero-media::after{background:linear-gradient(180deg, color-mix(in srgb, var(--bg-0) 70%, transparent), var(--bg-0) 85%);}
  .hero-progress{display:none;}
}

/* ============ GRIDS GENÉRICAS ============ */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.grid-5{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
@media(max-width:1040px){ .grid-5{grid-template-columns:repeat(3,1fr);} }
@media(max-width:900px){ .grid-2{grid-template-columns:1fr; gap:36px;} }
@media(max-width:720px){ .grid-3{grid-template-columns:1fr;} }
@media(max-width:640px){ .grid-5{grid-template-columns:1fr 1fr;} }
@media(max-width:440px){ .grid-5{grid-template-columns:1fr;} }

.card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-m); padding:28px;}
.card h4{font-size:1rem; margin-bottom:8px;}
.card p{font-size:.88rem; line-height:1.55;}

.stat-num{font-family:var(--display); font-weight:800; font-size:2.1rem; color:var(--mint-text); text-shadow:var(--mint-text-shadow); line-height:1; margin-bottom:12px;}

.myth-card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-l); padding:36px;}
.myth-label{font-size:.8rem; color:var(--ink-faint); font-weight:600; margin-bottom:14px;}
.myth-quote{font-family:var(--display); font-size:1.3rem; font-weight:500; color:var(--ink-dim); line-height:1.4; margin-bottom:26px; padding-left:18px; border-left:2px solid var(--card-border);}
.myth-answer-label{font-size:.8rem; color:var(--mint-text); text-shadow:var(--mint-text-shadow); font-weight:600; margin-bottom:10px;}
.myth-answer{font-size:1rem; color:var(--ink);}
@media(max-width:600px){ .myth-card{padding:26px;} }

.myth-col{display:flex; flex-direction:column; gap:20px;}
.problema-media{
  margin:0; width:100%; overflow:hidden; aspect-ratio:16/9;
  border-radius:var(--radius-l); border:1px solid var(--card-border);
  background:var(--card); box-shadow:0 20px 50px -30px rgba(0,0,0,.55);
}
.problema-media img{width:100%; height:100%; object-fit:cover; display:block;}
.problema-media.img-falta{display:none;}
/* Escritorio: la columna derecha iguala la altura de la izquierda y la foto la rellena */
@media(min-width:901px){
  .myth-col{align-self:stretch;}
  .problema-media{flex:1; position:relative; aspect-ratio:auto; min-height:320px;}
  .problema-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
}

/* ============ 5 MOTORES ============ */
.flow-panel{
  position:relative; margin-top:36px;
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-l);
  padding:60px 40px 44px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:20px;
}
.flow-track{display:none; position:absolute; top:88px; left:76px; right:76px; height:1px; z-index:0; background:var(--card-border); overflow:hidden;}
.flow-track::after{content:''; position:absolute; inset:0; width:var(--p,0%); background:linear-gradient(90deg, var(--mint-dim), var(--mint)); transition:width .1s linear;}
.flow-node{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;}
.flow-icon{
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  background:var(--mint-soft); border:1.5px solid var(--mint); color:var(--mint-text);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 26px -6px var(--mint-glow);
}
.flow-verb{
  display:inline-block; background:var(--mint); color:#04140d;
  border:1.5px solid var(--mint); border-radius:999px;
  padding:4px 12px; font-size:.78rem; font-weight:700; margin-bottom:2px;
}
:root[data-theme="light"] .flow-verb{background:#0e130f; border-color:#0e130f; color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
.flow-node p{font-size:.78rem; line-height:1.45; margin-top:2px;}
@media(max-width:900px){ .flow-panel{grid-template-columns:1fr 1fr;} .flow-track{display:none;} }
@media(max-width:480px){ .flow-panel{grid-template-columns:1fr; padding:36px 24px;} }

/* ============ COMPARADOR 30 SEG ============ */
.timer-row{display:flex; align-items:center; justify-content:center; gap:34px; margin:44px 0 40px; flex-wrap:wrap;}
.timer{text-align:center;}
.timer-value{font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,6vw,3.8rem); line-height:1; font-variant-numeric:tabular-nums;}
.timer.before .timer-value{color:var(--ink-dim);}
.timer.after .timer-value{color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
.timer-label{font-size:.82rem; color:var(--ink-faint); margin-top:8px;}
.timer-vs{font-family:var(--display); font-weight:700; color:var(--ink-faint); font-size:.9rem;}

.compare{display:grid; grid-template-columns:1fr auto 1fr; max-width:840px; margin:0 auto; text-align:left;}
.compare-col{background:var(--card); border:1px solid var(--card-border); padding:32px;}
.compare-col.before{border-radius:var(--radius-m) 0 0 var(--radius-m);}
.compare-col.after{border-radius:0 var(--radius-m) var(--radius-m) 0; border-color:color-mix(in srgb, var(--mint) 35%, transparent);}
.compare-vs{display:flex; align-items:center; justify-content:center; padding:0 22px; font-family:var(--display); font-weight:700; color:var(--ink-faint); font-size:.85rem;}
.compare-label{font-size:.82rem; font-weight:600; margin-bottom:16px; color:var(--ink-faint);}
.compare-col.after .compare-label{color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
.compare-list{display:flex; flex-direction:column; gap:9px;}
.compare-list li{font-size:.86rem; color:var(--ink-dim); display:flex; gap:8px;}
.compare-list li::before{content:'—'; color:var(--ink-faint);}
.compare-col.after .compare-list li::before{content:'✓'; color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
/* Escritorio: el comparador «Sin tuCOACH / Con tuCOACH» a 1,5× (móvil queda igual) */
@media(min-width:761px){
  .compare{max-width:min(1260px,100%);}
  .compare-col{padding:48px;}
  .compare-col.before{border-radius:27px 0 0 27px;}
  .compare-col.after{border-radius:0 27px 27px 0;}
  .compare-vs{padding:0 33px; font-size:1.28rem;}
  .compare-label{font-size:1.23rem; margin-bottom:24px;}
  .compare-list{gap:14px;}
  .compare-list li{font-size:1.29rem; gap:12px;}
}
@media(max-width:760px){
  .compare{grid-template-columns:1fr; gap:14px;}
  .compare-col.before,.compare-col.after{border-radius:var(--radius-m);}
  .compare-vs{padding:6px 0;}
}

/* ============ MÓDULOS (tabs accesibles) ============ */
.modulos-shell{display:grid; grid-template-columns:280px 1fr; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-l); overflow:hidden; margin-top:44px;}
@media(max-width:640px){ .modulos-shell{margin-top:32px;} }
.mod-tabs{border-right:1px solid var(--card-border); background:var(--bg-2); display:flex; flex-direction:column;}
.mod-tab{
  display:flex; align-items:center; gap:12px; text-align:left;
  padding:20px 24px; font-family:var(--display); font-weight:600; font-size:.98rem;
  color:var(--ink-dim); cursor:pointer; border:0; border-left:2px solid transparent;
  background:transparent; transition:color .15s, border-color .15s, background .15s;
}
.mod-tab:hover{color:var(--ink);}
.mod-tab[aria-selected="true"]{color:var(--ink); background:var(--bg-1); border-left-color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
.mod-num{width:26px; height:26px; border-radius:8px; background:var(--bg-1); display:flex; align-items:center; justify-content:center; font-size:.76rem; font-family:var(--body); flex-shrink:0;}
.mod-tab[aria-selected="true"] .mod-num{background:var(--mint); color:#04140d;}
.mod-panels{padding:44px;}
.mod-panel h3{margin-bottom:14px; font-size:1.5rem;}
.mod-panel > p{margin-bottom:24px; max-width:58ch;}
.mod-feature-list{display:grid; gap:12px;}
.mod-feature-list li{display:flex; gap:12px; align-items:flex-start; font-size:.92rem; color:var(--ink-dim);}
.mod-feature-list li .tick{color:var(--mint-text); text-shadow:var(--mint-text-shadow); flex-shrink:0; margin-top:2px;}
.mod-panel-inner{display:grid; grid-template-columns:130px 1fr; gap:32px; align-items:start;}
.mod-illustration{width:130px; height:130px; border-radius:var(--radius-m); flex-shrink:0; background:var(--bg-1); border:1px solid var(--card-border); color:var(--mint-text); text-shadow:var(--mint-text-shadow); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.mod-illustration img{width:100%; height:100%; object-fit:cover;}
@media(max-width:840px){
  .modulos-shell{grid-template-columns:1fr;}
  .mod-tabs{flex-direction:row; border-right:none; border-bottom:1px solid var(--card-border); overflow-x:auto;}
  .mod-tab{border-left:none; border-bottom:2px solid transparent; white-space:nowrap;}
  .mod-tab[aria-selected="true"]{border-left-color:transparent; border-bottom-color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
  .mod-panels{padding:30px 24px;}
}
@media(max-width:768px){ .mod-panel-inner{grid-template-columns:1fr;} .mod-illustration{display:none;} }

/* ============ CALCULADORA DE ROI ============ */
.roi{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:36px; align-items:start;}
.roi-controls,.roi-results{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-l); padding:34px;}
.roi-results{background:linear-gradient(160deg, var(--mint-soft), transparent 55%), var(--card); border-color:color-mix(in srgb, var(--mint) 25%, transparent); position:sticky; top:96px;}
.roi-field{margin-bottom:26px;}
.roi-field:last-child{margin-bottom:0;}
.roi-field-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px;}
.roi-field-head label{font-size:.88rem; font-weight:600; color:var(--ink);}
.roi-field-head output{font-family:var(--display); font-weight:700; font-size:1rem; color:var(--mint-text); text-shadow:var(--mint-text-shadow); font-variant-numeric:tabular-nums;}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px;
  background:var(--card-border); outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--mint); border:3px solid var(--bg-0); cursor:pointer; box-shadow:0 0 0 1px var(--mint);
}
input[type=range]::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:var(--mint); border:3px solid var(--bg-0); cursor:pointer;}
input[type=range]:focus-visible{outline:2px solid var(--mint); outline-offset:6px;}

.roi-toggles{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.roi-toggle{
  font-size:.8rem; font-family:var(--display); font-weight:600;
  padding:8px 15px; border-radius:999px; cursor:pointer;
  background:var(--bg-1); border:1px solid var(--card-border); color:var(--ink-dim);
  transition:all .15s ease;
}
.roi-toggle[aria-pressed="true"]{background:var(--mint); border-color:var(--mint); color:#04140d; font-weight:700;}

.roi-headline{font-family:var(--display); font-weight:800; font-size:clamp(2rem,4.4vw,2.9rem); color:var(--mint-text); text-shadow:var(--mint-text-shadow); line-height:1; font-variant-numeric:tabular-nums;}
.roi-headline-label{font-size:.86rem; color:var(--ink-dim); margin-top:8px; margin-bottom:28px;}
.roi-lines{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--card-border);}
.roi-line{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:14px 0; border-bottom:1px solid var(--card-border); font-size:.9rem;}
.roi-line span{color:var(--ink-dim);}
.roi-line b{font-family:var(--display); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; text-align:right;}
.roi-line.highlight b{color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
.roi-plan{margin-top:26px; padding:20px; border-radius:var(--radius-m); background:var(--bg-1); border:1px solid var(--card-border);}
.roi-plan-label{font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:600;}
.roi-plan-name{font-family:var(--display); font-weight:800; font-size:1.3rem; margin-top:6px;}
.roi-plan-price{font-size:.9rem; color:var(--ink-dim); margin-top:4px;}
.roi-disclaimer{font-size:.76rem; color:var(--ink-faint); margin-top:18px; line-height:1.5;}
@media(max-width:900px){ .roi{grid-template-columns:1fr;} .roi-results{position:static;} }
@media(max-width:600px){ .roi-controls,.roi-results{padding:26px 22px;} }

/* ============ TABLA COMPARATIVA ============ */
.table-scroll{overflow-x:auto; margin-top:44px; border:1px solid var(--card-border); border-radius:var(--radius-l); background:var(--card);}
table.compare-table{width:100%; border-collapse:collapse; min-width:720px;}
table.compare-table th,table.compare-table td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--card-border); font-size:.88rem;}
table.compare-table thead th{font-family:var(--display); font-weight:700; color:var(--ink); font-size:.85rem; background:var(--bg-2); position:sticky; top:0;}
table.compare-table thead th.own{color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
table.compare-table td:first-child{color:var(--ink); font-weight:500;}
table.compare-table td{color:var(--ink-dim);}
table.compare-table tbody tr:last-child td{border-bottom:0;}
table.compare-table td.own{background:var(--mint-soft); color:var(--ink);}
.yes{color:var(--mint-text); text-shadow:var(--mint-text-shadow); font-weight:700;}
.no{color:var(--ink-faint);}

/* ============ TIMELINE ============ */
.timeline{margin-top:36px; position:relative;}
.timeline::before{content:''; position:absolute; left:23px; top:8px; bottom:8px; width:1px; background:linear-gradient(180deg, var(--mint), transparent);}
.tl-item{position:relative; padding-left:70px; padding-bottom:44px;}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%; background:var(--bg-1); border:1px solid var(--mint); color:var(--mint-text); text-shadow:var(--mint-text-shadow); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:.95rem;}
.tl-item h4{font-size:1.1rem; margin-bottom:6px;}
.tl-item p{font-size:.92rem; max-width:60ch;}

/* Escritorio: el viaje del cliente es una cuadrícula de 6 columnas con tarjetas de
   2 columnas (3 arriba y 2 centradas abajo). Cada tarjeta lleva la imagen grande
   primero y debajo el número, el título y el párrafo. Solo aplica a la línea de
   tiempo con imágenes; la del curso conserva el diseño base. */
@media(min-width:860px){
  .timeline:has(> .tl-item > .tl-media){
    display:grid; grid-template-columns:repeat(6,1fr); gap:36px 32px;
  }
  .timeline:has(> .tl-item > .tl-media)::before{display:none;}
  .timeline:has(> .tl-item > .tl-media) > .tl-item{
    grid-column:span 2; padding:0; min-width:0;
    display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:12px; row-gap:0;
    grid-template-areas:"img img" "dot title" "text text"; align-items:center; align-content:start;
  }
  .timeline:has(> .tl-item > .tl-media) > .tl-item > .tl-media{grid-area:img; width:100%; max-width:none; margin:0 0 18px; border-radius:24px;}
  .timeline:has(> .tl-item > .tl-media) > .tl-item > .tl-dot{position:static; grid-area:dot; width:36px; height:36px; font-size:.85rem;}
  .timeline:has(> .tl-item > .tl-media) > .tl-item > h4{grid-area:title; margin:0; font-size:1.15rem; line-height:1.25;}
  .timeline:has(> .tl-item > .tl-media) > .tl-item > p{grid-area:text; margin:10px 0 0; font-size:.95rem;}
}
.tl-media{
  margin:0; aspect-ratio:1/1; overflow:hidden;
  border-radius:var(--radius-l); border:1px solid var(--card-border);
  background:var(--bg-1); box-shadow:0 26px 60px -30px rgba(0,0,0,.55);
}
.tl-media img{width:100%; height:100%; object-fit:cover; display:block;}
.tl-media.img-falta{display:none;}
@media(max-width:859px){
  .tl-media{margin-top:16px; width:100%; max-width:360px; aspect-ratio:1/1;}
}
@media(max-width:520px){ .tl-item{padding-left:60px;} .tl-dot{width:40px; height:40px;} .timeline::before{left:19px;} }

/* Móvil: el viaje del cliente (6 pasos) pasa a tarjetas deslizables con snap.
   Tablet y escritorio conservan su diseño. La línea de tiempo del curso (sin
   imágenes) no se toca. */
.tl-dots{display:none;}
@media(max-width:640px){
  .timeline:has(> .tl-item > .tl-media){
    --wrap-pad:20px;
    display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-left:calc(-1 * var(--wrap-pad)); margin-right:calc(-1 * var(--wrap-pad));
    padding:8px var(--wrap-pad) 10px;
    overscroll-behavior-x:contain;
  }
  .timeline:has(> .tl-item > .tl-media)::-webkit-scrollbar{display:none;}
  .timeline:has(> .tl-item > .tl-media)::before{display:none;}
  .timeline:has(> .tl-item > .tl-media) > .tl-item{
    flex:0 0 82%; scroll-snap-align:center; min-width:0;
    padding:14px 14px 22px; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-m);
    display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:12px; row-gap:0;
    grid-template-areas:"img img" "dot title" "text text"; align-items:center; align-content:start;
  }
  .timeline:has(> .tl-item > .tl-media) > .tl-item:last-child{padding-bottom:22px;}
  .timeline:has(> .tl-item > .tl-media) > .tl-item > .tl-media{grid-area:img; width:100%; max-width:none; margin:0 0 16px; border-radius:18px;}
  .timeline:has(> .tl-item > .tl-media) > .tl-item > .tl-dot{position:static; grid-area:dot; width:36px; height:36px; font-size:.85rem;}
  .timeline:has(> .tl-item > .tl-media) > .tl-item > h4{grid-area:title; margin:0; font-size:1.05rem; line-height:1.25;}
  .timeline:has(> .tl-item > .tl-media) > .tl-item > p{grid-area:text; margin:10px 0 0; font-size:.92rem;}
  .tl-dots{display:flex; justify-content:center; gap:8px; margin-top:6px;}
  .tl-dots span{
    width:8px; height:8px; border-radius:999px;
    background:color-mix(in srgb, var(--ink) 26%, transparent);
    transition:width .2s ease, background .2s ease;
  }
  .tl-dots span.is-active{background:var(--mint); width:22px;}
}
@media(max-width:420px){ .timeline:has(> .tl-item > .tl-media){--wrap-pad:16px;} }

/* ============ GRÁFICOS TÉCNICOS ============ */
.chart-card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-l); padding:36px 36px 28px; margin-top:44px;}
.chart-card svg{width:100%; height:auto;}
.chart-head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:22px;}
.chart-head h4{font-size:1rem;}
.chart-legend{display:flex; gap:18px; font-size:.78rem; color:var(--ink-faint); flex-wrap:wrap;}
.chart-legend span{display:inline-flex; align-items:center; gap:7px;}
.chart-legend i{width:14px; height:2px; display:inline-block; border-radius:2px;}
.chart-caption{margin-top:16px; font-size:.82rem; color:var(--ink-faint); max-width:70ch;}
@media(max-width:600px){ .chart-card{padding:24px 20px 20px;} }

.method-block{margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center;}
.method-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.tag-pill{background:var(--bg-1); border:1px solid var(--card-border); border-radius:999px; padding:9px 16px; font-size:.82rem; color:var(--ink-dim);}
@media(max-width:860px){ .method-block{grid-template-columns:1fr;} }

/* Arsenal técnico: tres tarjetas con imagen en una sola fila (escritorio) y
   carrusel deslizable con snap en móvil. */
.arsenal-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:32px;}
.arsenal-grid:focus-visible{outline:2px solid var(--mint); outline-offset:4px; border-radius:var(--radius-m);}
.arsenal-card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-m); overflow:hidden; display:flex; flex-direction:column;}
.arsenal-media{margin:0; aspect-ratio:3/2; overflow:hidden; background:var(--bg-1);}
.arsenal-media img{width:100%; height:100%; object-fit:cover; display:block;}
.arsenal-body{padding:22px 24px 26px;}
.arsenal-body .stat-num{font-size:1.7rem; margin-bottom:10px;}
.arsenal-body h4{font-size:1.05rem; margin-bottom:6px;}
.arsenal-body p{font-size:.9rem;}
.arsenal-dots{display:none;}
@media(max-width:860px){
  .arsenal-grid{
    --wrap-pad:28px;
    display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-left:calc(-1 * var(--wrap-pad)); margin-right:calc(-1 * var(--wrap-pad));
    padding:8px var(--wrap-pad) 10px;
    overscroll-behavior-x:contain;
  }
  .arsenal-grid::-webkit-scrollbar{display:none;}
  .arsenal-card{flex:0 0 82%; scroll-snap-align:center;}
  .arsenal-dots{display:flex; justify-content:center; gap:8px; margin-top:6px;}
  .arsenal-dots span{
    width:8px; height:8px; border-radius:999px;
    background:color-mix(in srgb, var(--ink) 26%, transparent);
    transition:width .2s ease, background .2s ease;
  }
  .arsenal-dots span.is-active{background:var(--mint); width:22px;}
}
@media(max-width:640px){ .arsenal-grid{--wrap-pad:20px;} }
@media(max-width:420px){ .arsenal-grid{--wrap-pad:16px;} }

/* ============ PERFILES / FIT ============ */
.perfil-card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-m); padding:24px 20px; display:flex; flex-direction:column;}
.perfil-icon{width:38px; height:38px; border-radius:10px; background:var(--mint-soft); display:flex; align-items:center; justify-content:center; color:var(--mint-text); text-shadow:var(--mint-text-shadow); margin-bottom:16px;}
.perfil-card h4{font-size:.98rem; margin-bottom:8px;}
.perfil-card p{font-size:.82rem; line-height:1.5; flex:1;}

.fit-split{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px;}
.fit-col{border-radius:var(--radius-m); padding:28px; border:1px solid var(--card-border);}
.fit-col.yes-col{
  background:var(--mint-soft);
  border:1px solid color-mix(in srgb, var(--mint) 38%, var(--card-border));
  box-shadow:0 18px 44px -28px var(--mint-glow);
}
.fit-col.no-col{
  background:var(--card);
  border:1px solid color-mix(in srgb, var(--ink) 22%, var(--card-border));
  box-shadow:0 18px 44px -30px rgba(0,0,0,.45);
}
.fit-col h4{font-size:1.2rem; margin-bottom:20px;}
.fit-col ul{display:flex; flex-direction:column; gap:16px;}
.fit-col li{font-size:1rem; line-height:1.55; color:var(--ink-dim); display:flex; gap:10px; align-items:flex-start;}
.fit-col.yes-col li::before{content:'✓'; color:var(--mint-text); text-shadow:var(--mint-text-shadow); flex-shrink:0;}
.fit-col.no-col li::before{content:'✕'; color:var(--ink-faint); flex-shrink:0;}
@media(max-width:800px){ .fit-split{grid-template-columns:1fr;} }
@media(max-width:600px){ .fit-col{padding:24px;} }

/* ============ EXPERTOS ============ */
.expert-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px;}
.expert-card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-m); padding:26px;}
.expert-card h4{margin:14px 0 6px; font-size:1rem;}
.expert-role{font-size:.82rem; color:var(--mint-text); text-shadow:var(--mint-text-shadow); font-weight:600; margin-bottom:10px; line-height:1.4;}
.expert-card p{font-size:.85rem; line-height:1.5;}
.avatar{width:48px; height:48px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg, var(--mint), var(--mint-dim)); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; color:#04140d; font-size:1.05rem;}
@media(max-width:900px){ .expert-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .expert-grid{grid-template-columns:1fr;} }

/* ============ SEGURIDAD ============ */
.security-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px;}
.security-card{border:1px solid var(--card-border); border-radius:var(--radius-m); padding:26px 22px; background:var(--card);}
.security-card svg{color:var(--mint-text); text-shadow:var(--mint-text-shadow); margin-bottom:16px;}
.security-card h4{font-size:.95rem; margin-bottom:8px;}
.security-card p{font-size:.83rem; line-height:1.5;}
@media(max-width:900px){ .security-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:520px){ .security-grid{grid-template-columns:1fr;} }

/* ============ PRECIOS ============ */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; align-items:stretch;}
.pricing-card{position:relative; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-l); padding:34px 28px; display:flex; flex-direction:column;}
.pricing-card.featured{border-color:var(--mint); box-shadow:0 0 60px -30px var(--mint-glow);}
.pricing-badge{position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--mint); color:#04140d; font-family:var(--display); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; border-radius:999px; padding:5px 14px; white-space:nowrap;}
.pricing-name{font-family:var(--display); font-weight:700; font-size:1.1rem;}
.pricing-scope{font-size:.83rem; color:var(--ink-faint); margin-top:4px; margin-bottom:20px;}
.pricing-amount{font-family:var(--display); font-weight:800; font-size:2.4rem; line-height:1;}
.pricing-amount .cur{font-size:1rem; font-weight:600; color:var(--ink-dim);}
.pricing-was{font-size:.85rem; color:var(--ink-faint); text-decoration:line-through; margin-top:6px;}
.pricing-period{font-size:.83rem; color:var(--ink-dim); margin-top:6px; margin-bottom:22px;}
.pricing-card ul{display:flex; flex-direction:column; gap:11px; flex:1; margin-bottom:26px;}
.pricing-card li{font-size:.86rem; color:var(--ink-dim); display:flex; gap:10px; align-items:flex-start;}
.pricing-card li::before{content:'✓'; color:var(--mint-text); text-shadow:var(--mint-text-shadow); flex-shrink:0;}
@media(max-width:860px){ .pricing-grid{grid-template-columns:1fr; gap:28px;} }

/* Círculo Fundador */
.founder{background:linear-gradient(150deg, color-mix(in srgb, var(--mint) 12%, var(--bg-1)), var(--bg-0) 62%); border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border);}
.founder-box{display:grid; grid-template-columns:1.3fr 1fr; gap:44px; align-items:center;}
.founder-seats{background:var(--card); border:1px solid color-mix(in srgb, var(--mint) 30%, transparent); border-radius:var(--radius-l); padding:30px;}
.seats-bar{height:6px; border-radius:6px; background:var(--card-border); overflow:hidden; margin:16px 0 10px;}
.seats-fill{height:100%; background:linear-gradient(90deg, var(--mint-dim), var(--mint)); border-radius:6px;}
.seats-num{font-family:var(--display); font-weight:800; font-size:2.2rem; color:var(--mint-text); text-shadow:var(--mint-text-shadow); line-height:1;}
@media(max-width:860px){ .founder-box{grid-template-columns:1fr;} }


/* ============ FAQ ============ */
.faq-list{max-width:780px; margin:36px auto 0; text-align:left;}
details{border-bottom:1px solid var(--card-border); padding:22px 0;}
details summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--ink);}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:'+'; color:var(--mint-text); text-shadow:var(--mint-text-shadow); font-size:1.4rem; font-weight:400; margin-left:16px; flex-shrink:0; transition:transform .2s ease;}
details[open] summary::after{transform:rotate(45deg);}
details p{margin-top:14px; font-size:.94rem; max-width:66ch;}
.faq-list details ul{margin-top:14px; padding-left:20px; list-style:disc;}
.faq-list details li{font-size:.93rem; color:var(--ink-dim); margin-bottom:8px;}

/* ============ FOOTER ============ */
footer{background:var(--bg-1); border-top:1px solid var(--card-border); padding:72px 0 32px;}
.footer-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; margin-bottom:52px;}
.footer-brand p{font-size:.88rem; max-width:34ch; margin-top:14px;}
.footer-col h5{font-size:.85rem; color:var(--ink); font-weight:600; margin-bottom:16px;}
.footer-col a{display:block; font-size:.86rem; color:var(--ink-dim); margin-bottom:10px;}
.footer-col a:hover{color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; border-top:1px solid var(--card-border); padding-top:28px; font-size:.8rem; color:var(--ink-faint);}
@media(max-width:820px){ .footer-top{grid-template-columns:1fr 1fr; row-gap:36px;} }
@media(max-width:520px){ .footer-top{grid-template-columns:1fr;} footer{padding:56px 0 28px;} }

/* ============ WHATSAPP FLOTANTE ============ */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:500;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--mint); color:#04140d; font-family:var(--display); font-weight:700; font-size:.9rem;
  padding:13px 20px 13px 16px; border-radius:999px;
  box-shadow:0 12px 34px -10px rgba(0,0,0,.6);
  transition:transform .18s ease;
}
.wa-float:hover{transform:translateY(-2px); background:var(--mint); color:#04140d; box-shadow:0 14px 36px -10px var(--mint-glow);}
@media(max-width:560px){ .wa-float span{display:none;} .wa-float{padding:14px; border-radius:50%;} }

/* ============ VISTAS INTERNAS ============ */
.page-view{position:fixed; inset:0; z-index:2000; background:var(--bg-0); display:flex; flex-direction:column; animation:page-view-in .2s ease;}
@keyframes page-view-in{from{opacity:0;} to{opacity:1;}}
.page-view-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; border-bottom:1px solid var(--card-border); background:var(--bg-1); flex-shrink:0;}
.page-view-back{display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--ink-dim); background:transparent; border:1px solid var(--card-border); border-radius:999px; padding:9px 16px 9px 12px; cursor:pointer;}
.page-view-back:hover{color:var(--ink); border-color:var(--mint);}
.page-view-body{flex:1; overflow:auto; -webkit-overflow-scrolling:touch;}
.page-view-body-center{display:flex; align-items:flex-start; justify-content:center; padding:48px 20px; background:#f6f8f7;}
/* Formularios (registro, lead, construcción): fondo claro detrás y tarjeta siempre oscura. */
.page-view-body-center .registro-card{
  --bg-0:#08090a; --bg-1:#0e1110; --bg-2:#141816; --card:#12151b;
  --card-border:rgba(255,255,255,.08); --ink:#f4f7f5; --ink-dim:#aab3ae; --ink-faint:#7b857f; --danger:#ff6b6b;
  color:var(--ink); color-scheme:dark;
}

/* ============ FORMULARIO ============ */
.registro-card{width:100%; max-width:500px; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-l); padding:36px 32px;}
.registro-card h3{font-size:1.3rem; margin-bottom:4px;}
.form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.form-row label{font-size:.82rem; font-weight:600; color:var(--ink-dim);}
.form-row input,.form-row select,.form-row textarea{
  font:inherit; font-size:.95rem; color:var(--ink); background:var(--bg-1);
  border:1px solid var(--card-border); border-radius:var(--radius-s); padding:12px 14px; width:100%;
}
.form-row textarea{resize:vertical; min-height:88px;}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:2px solid var(--mint); outline-offset:1px;}
.form-row.invalid input,.form-row.invalid select{border-color:var(--danger);}
.field-error{font-size:.78rem; color:var(--danger); min-height:0;}
.form-row.invalid .field-error{min-height:1em;}
.phone-group{display:grid; grid-template-columns:158px 1fr; gap:8px;}
.phone-group select{padding:12px 8px;}
.hp{position:absolute; left:-9999px; opacity:0; height:0; width:0;}
.form-alert{background:color-mix(in srgb, var(--danger) 12%, transparent); border:1px solid var(--danger); color:var(--ink); border-radius:var(--radius-s); padding:12px 14px; font-size:.86rem; margin-bottom:16px;}
.success-icon{width:52px; height:52px; border-radius:50%; margin-bottom:16px; background:var(--mint-soft); border:1px solid var(--mint); color:var(--mint-text); text-shadow:var(--mint-text-shadow); display:flex; align-items:center; justify-content:center;}
@media(max-width:520px){
  .page-view-bar{padding:12px 16px;}
  .page-view-back span{display:none;}
  .page-view-body-center{padding:24px 12px;}
  .registro-card{padding:28px 22px;}
  .phone-group{grid-template-columns:132px 1fr;}
}

/* ============ FORMULARIO: casilla de consentimiento ============ */
.consent-row{margin-bottom:20px;}
.consent-label{display:flex; align-items:flex-start; gap:10px; font-size:.85rem; font-weight:400; color:var(--ink-dim); cursor:pointer;}
.consent-label input[type="checkbox"]{width:18px; height:18px; flex-shrink:0; margin-top:2px; accent-color:var(--mint);}
.consent-label a{color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
.consent-row.invalid .consent-label{color:var(--danger);}

/* Grupos de opciones (casillas y botones de radio) */
.form-group{border:0; padding:0; min-width:0; margin-inline:0;}
.form-group legend{padding:0; margin-bottom:8px; font-size:.82rem; font-weight:600; color:var(--ink-dim);}
.form-hint{font-weight:400; color:var(--ink-faint);}
.form-row .choice{display:flex; align-items:flex-start; gap:10px; font-size:.92rem; font-weight:400; color:var(--ink); cursor:pointer; padding:4px 0;}
.form-row .choice input{width:18px; height:18px; padding:0; flex-shrink:0; margin-top:2px; accent-color:var(--mint);}
.form-group.invalid legend{color:var(--danger);}
.form-row select:disabled{opacity:.6; cursor:not-allowed;}

/* ============================================================
   PUERTA DE ENTRADA (gate de segmentación, pantalla completa)
   ============================================================ */
/* Fondo siempre claro; las tarjetas conservan la paleta oscura en ambos temas. */
#gate{
  --bg-0:#f6f8f7; --ink:#0e130f; --ink-dim:#4c554e; --ink-faint:#646d67;
  position:fixed; inset:0; z-index:3000; background:#f6f8f7; color:#0e130f; color-scheme:light;
  display:flex; align-items:flex-start; justify-content:center;
  padding:40px 20px; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
#gate[hidden]{display:none;}
/* margin:auto centra en vertical cuando sobra espacio y, si no cabe, alinea arriba sin cortar el logo. */
.gate-inner{width:100%; max-width:920px; text-align:center; margin:auto;}
.gate-inner > .logo{display:inline-block; font-size:1.3rem; margin-bottom:28px;}
#gate-title{font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,4vw,2.3rem); line-height:1.15; margin-bottom:10px;}
.gate-sub{color:var(--ink-dim); font-size:.98rem; margin-bottom:36px;}
.gate-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:700px){
  .gate-grid{grid-template-columns:1fr 1fr;}
}
.gate-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  --card:#12151b; --card-border:rgba(255,255,255,.08); --ink:#f4f7f5; --ink-dim:#aab3ae;
  text-align:left; font:inherit; background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius-l); padding:22px 22px 24px; cursor:pointer;
  transition:border-color .2s ease, transform .2s ease;
}
.gate-card:hover{border-color:color-mix(in srgb, var(--mint) 40%, transparent); transform:translateY(-2px);}
.gate-card:focus-visible{outline:2px solid var(--mint); outline-offset:3px;}
.gate-card-icon{
  width:40px; height:40px; border-radius:50%; background:var(--mint-soft);
  color:var(--mint-text); text-shadow:var(--mint-text-shadow);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.gate-card-label{font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--ink);}
.gate-card-sub{font-size:.85rem; color:var(--ink-dim);}
@media(prefers-reduced-motion:reduce){
  .gate-card{transition:none;}
  .gate-card:hover{transform:none;}
}
@media(max-width:480px){
  #gate{padding:28px 16px;}
  .gate-inner > .logo{margin-bottom:20px;}
  .gate-sub{margin-bottom:26px;}
}

/* ============ IMÁGENES GENERADAS ============
   Los contenedores con [data-img] los rellena js/main.js cuando
   TUCOACH.images está en true. Vacíos no ocupan espacio. */
/* El hueco solo aparece cuando su imagen ha cargado de verdad, o cuando
   está activado el modo de previsualización de huecos (.has-slot). */
.section-figure.img-falta,
.perfil-media.img-falta{display:none;}

/* ---- Marcador de imagen pendiente ----
   Se ve solo con TUCOACH.mostrarHuecos = true en js/main.js.
   Sirve para juzgar el diseño antes de generar las imágenes. */
.img-slot{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; width:100%; height:100%; min-height:130px; padding:20px; text-align:center;
  border:2px dashed color-mix(in srgb, var(--mint) 48%, transparent);
  border-radius:inherit;
  background:
    repeating-linear-gradient(45deg, var(--mint-soft) 0 10px, transparent 10px 22px),
    var(--bg-1);
}
.img-slot b{font-family:var(--display); font-size:.95rem; color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
.img-slot em{font-style:normal; font-size:.78rem; color:var(--ink-dim); max-width:40ch; line-height:1.45;}
.img-slot code{
  font-size:.72rem; color:var(--ink-faint);
  background:var(--bg-2); border:1px solid var(--card-border);
  border-radius:6px; padding:3px 8px;
}
.img-slot .slot-ratio{font-size:.72rem; font-weight:600; color:var(--mint-text); text-shadow:var(--mint-text-shadow); letter-spacing:.04em;}

/* Figuras de sección grandes: rompen el ancho del contenido para ganar
   presencia, como las referencias de la competencia. */
.section-figure{
  margin:32px 0 0; width:100%; overflow:hidden;
  border-radius:var(--radius-l); border:1px solid var(--card-border);
  background:var(--card);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.6);
}
.section-figure img{width:100%; height:100%; object-fit:cover; display:block;}
.section-figure.ratio-16-9{aspect-ratio:16/9;}
.section-figure.ratio-3-2{aspect-ratio:3/2;}
/* La figura del fundador vive en una rejilla de dos columnas: nunca se sale del contenedor. */
.founder-box > .section-figure{width:100%; margin:0;}
.section-figure.ratio-21-9{aspect-ratio:21/9;}
@media(min-width:1240px){
  /* Se salen del contenedor 60 px por lado */
  .section-figure{width:calc(100% + 120px); margin-left:-60px;}
}
@media(max-width:640px){ .section-figure.ratio-21-9{aspect-ratio:16/10;} }

/* Tarjetas de perfil: 6 en una fila en escritorio (>=1100px), 3 por fila
   en tableta y carrusel horizontal con snap en móvil (<=700px). La foto
   va a sangre en la parte superior de la tarjeta. */
.perfiles-grid{
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px;
}
.perfiles-grid:focus-visible{outline:2px solid var(--mint); outline-offset:4px; border-radius:var(--radius-m);}
.perfiles-grid .perfil-card{
  padding:0; overflow:hidden;
  border-radius:var(--radius-m); background:var(--card);
  transition:transform .25s ease, border-color .25s ease;
}
.perfiles-grid .perfil-card:hover{transform:translateY(-4px); border-color:color-mix(in srgb, var(--mint) 35%, transparent);}
.perfil-media{
  aspect-ratio:4/5; margin:0; overflow:hidden;
  border:0; border-radius:0; background:var(--bg-1);
}
.perfil-media img{width:100%; height:100%; object-fit:cover; display:block;}
.perfiles-grid .perfil-card > :not(.perfil-media){margin-left:20px; margin-right:20px;}
.perfiles-grid .perfil-icon{margin-top:18px; margin-bottom:12px; width:34px; height:34px;}
.perfiles-grid .perfil-card h4{font-size:1.05rem;}
.perfiles-grid .perfil-card p{font-size:.88rem; margin-bottom:20px;}
.perfiles-dots{display:none;}

@media(min-width:1100px){
  .perfiles-grid{grid-template-columns:repeat(6,1fr); gap:16px;}
  .perfiles-grid .perfil-card > :not(.perfil-media){margin-left:14px; margin-right:14px;}
  .perfiles-grid .perfil-icon{width:32px; height:32px; margin-top:14px; margin-bottom:10px;}
  .perfiles-grid .perfil-icon svg{width:16px; height:16px;}
  .perfiles-grid .perfil-card h4{font-size:1rem; margin-bottom:6px;}
  .perfiles-grid .perfil-card p{font-size:.82rem; line-height:1.45; margin-bottom:16px;}
}

@media(max-width:700px){
  .perfiles-grid{
    --wrap-pad:28px;
    display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-left:calc(-1 * var(--wrap-pad)); margin-right:calc(-1 * var(--wrap-pad));
    padding:8px var(--wrap-pad) 10px;
    overscroll-behavior-x:contain;
  }
  .perfiles-grid::-webkit-scrollbar{display:none;}
  .perfiles-grid .perfil-card{flex:0 0 78%; scroll-snap-align:center;}
  .perfiles-grid .perfil-card:hover{transform:none;}
  .perfil-media{aspect-ratio:4/3;}
  .perfiles-dots{display:flex; justify-content:center; gap:8px; margin-top:6px;}
  .perfiles-dots span{
    width:8px; height:8px; border-radius:999px;
    background:color-mix(in srgb, var(--ink) 26%, transparent);
    transition:width .2s ease, background .2s ease;
  }
  .perfiles-dots span.is-active{background:var(--mint); width:22px;}
}
@media(max-width:640px){ .perfiles-grid{--wrap-pad:20px;} }
@media(max-width:420px){ .perfiles-grid{--wrap-pad:16px;} }

.mod-illustration img{width:100%; height:100%; object-fit:cover; display:block;}

/* Captura grande del producto dentro de cada pestaña de módulo */
.mod-shot{
  margin:24px 0 0; aspect-ratio:16/10; overflow:hidden;
  border-radius:var(--radius-m); border:1px solid var(--card-border);
  background:var(--bg-1);
  box-shadow:0 26px 60px -32px rgba(0,0,0,.65);
}
.mod-shot img{width:100%; height:100%; object-fit:cover; display:block;}
.mod-shot.img-falta{display:none;}

/* tuCOACH está en desarrollo: las capturas son vistas previas de la
   interfaz con datos de ejemplo, y así se indica sobre la imagen. */
.mod-shot{position:relative;}
.mod-shot.has-img::after{
  content:'Vista previa del producto';
  position:absolute; left:14px; bottom:14px;
  font-family:var(--display); font-size:.72rem; font-weight:600; letter-spacing:.02em;
  color:#04140d; background:var(--mint);
  padding:5px 11px; border-radius:999px;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
}

@media(max-width:900px){
  /* Separación clara respecto al microcopy y sitio para que la tarjeta flotante
     (.hs-tile-a) quede dentro de la caja del escenario. */
  .hero-stage{margin-top:36px; padding:40px 12px 28px;}
  .hs-tile{width:24%;}
  .hs-tile-b{width:22%;}
}
@media(max-width:520px){ .hs-chip{display:none;} }

/* ============ REVELADO POR SCROLL ============
   El estado oculto solo se aplica si hay JavaScript e IntersectionObserver
   (clase .js puesta desde el <head>). Sin eso, el contenido se ve siempre:
   nunca se esconde información detrás de una animación que puede no correr. */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);}
.js .reveal.in{opacity:1; transform:none;}

/* ============ ESPACIADO RESPONSIVE ============ */
@media(max-width:640px){
  .wrap{padding:0 20px;}
  .section{padding:44px 0;}
  .section-tight{padding:32px 0;}
}
@media(max-width:420px){ .wrap{padding:0 16px;} }

/* ============ FOCUS ============ */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--mint); outline-offset:3px;
}

/* ============ MOVIMIENTO REDUCIDO ============ */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  .reveal{opacity:1; transform:none;}
  .hero-scroll{height:auto;}
  .hero-sticky{position:relative; height:auto; padding:80px 0;}
  .hs-tile,.hs-chip{animation:none;}
  .hs-frame{transition:none;}
}

/* ============================================================
   CURSO — vista interna (réplica del sitio del curso)
   Todo con prefijo cu- para no chocar con la landing.
   ============================================================ */

/* Barra: navegación interna (solo escritorio) */
.cu-nav{display:none; align-items:center; gap:4px;}
.cu-navlink{font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--ink-dim); padding:8px 12px; border-radius:999px; transition:color .18s ease, background .18s ease;}
.cu-navlink:hover{color:var(--ink); background:var(--mint-soft);}
.cu-nav .btn{padding:9px 20px; font-size:.88rem; margin-left:8px;}
@media(min-width:900px){ .cu-nav{display:flex;} }

/* Bandas siempre oscuras: redeclaran los tokens oscuros */
.cu-dark{
  --bg-0:#08090a; --bg-1:#0e1110; --bg-2:#141816; --card:#12151b;
  --card-border:rgba(255,255,255,.08);
  --ink:#f4f7f5; --ink-dim:#aab3ae; --ink-faint:#7b857f; --danger:#ff6b6b;
  background:var(--bg-0); color:var(--ink); color-scheme:dark;
}

.cu{scroll-behavior:smooth;}
.cu-sec{padding:clamp(52px,6.5vw,92px) 0; background:var(--bg-0);}
.cu-sec.cu-dark{background:var(--bg-0);}
.cu-alt{background:var(--bg-1);}
.cu-sec-line{border-top:1px solid var(--card-border);}
.cu section[id]{scroll-margin-top:0;}
#perfiles,#producto{scroll-margin-top:80px;}
.cu-narrow{max-width:900px;}

.cu-h2{font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.15; letter-spacing:-.02em; margin-bottom:0;}
.cu-h2-quiet{font-family:var(--body); font-weight:400; font-size:1.05rem; letter-spacing:0; color:var(--ink-dim); line-height:1.5;}
.cu-p{font-size:1.02rem; line-height:1.7; margin-top:20px; max-width:62ch;}
.cu-intro{margin-top:16px; margin-bottom:0;}

/* Iconos de línea (sprite) */
.cu-ico{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}
.cu-ico-circle{width:36px; height:36px; border-radius:50%; background:var(--mint); color:#04140d; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.cu-ico-lg{width:44px; height:44px;}
.cu-ico-sm{width:34px; height:34px; background:var(--mint-soft); color:var(--mint-text); text-shadow:var(--mint-text-shadow); border:1px solid var(--card-border);}

/* ---- Hero ---- */
.cu-hero{padding:clamp(36px,5vw,72px) 0 clamp(44px,5.5vw,80px); background:var(--bg-0);}
.cu-hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,5vw,72px); align-items:center;}
.cu-tagline{font-style:italic; color:var(--ink-dim); font-size:1rem; margin-bottom:22px;}
.cu-eyebrow{font-size:.95rem; color:var(--ink-dim); margin-bottom:6px;}
.cu-hero h1{font-size:clamp(1.85rem,3.6vw,3rem); line-height:1.1; letter-spacing:-.025em;}
.cu-rule{display:block; width:72px; height:3px; border-radius:2px; background:var(--mint); margin:24px 0;}
.cu-hero-lede{font-size:1.08rem; line-height:1.65; max-width:52ch; margin-bottom:28px;}
.cu-hero-stats{display:flex; flex-wrap:wrap; gap:18px 40px; margin-top:34px;}
.cu-hero-stats > div{max-width:190px;}
.cu-stat{display:block; font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,3vw,2.5rem); line-height:1; color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
.cu-stat-label{display:block; margin-top:8px; font-size:.86rem; color:var(--ink-dim); line-height:1.4;}

.cu-info{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-m); padding:10px 28px 28px; box-shadow:0 24px 60px -36px rgba(0,0,0,.45);}
/* Fotos del curso (siempre oscuras/fotograficas; marcos con tokens) */
.cu-hero-side{min-width:0;}
.cu-hero-photo,.cu-figure{margin:0; overflow:hidden; border:1px solid var(--card-border); border-radius:var(--radius-l); box-shadow:0 30px 70px -40px rgba(0,0,0,.55); background:var(--bg-2);}
.cu-hero-photo{aspect-ratio:16/10;}
.cu-figure{width:100%; aspect-ratio:21/9; margin:36px 0 0;}
.cu-hero-photo img,.cu-figure img,.cu-phase-img img{display:block; width:100%; height:100%; object-fit:cover;}
.cu-hero-side .cu-info{position:relative; z-index:1; margin:-44px 20px 0;}
.cu-hero-side .cu-info dl > div{padding:14px 0;}
.cu-split-4-0{margin-top:36px;}
.cu-split-4-0 .cu-quote{margin-top:0;}
.cu-phase-img{position:relative; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--card-border); border-radius:18px; margin-bottom:18px; background:var(--bg-2);}
.cu-example{display:block; margin:-8px 0 14px; font-size:12px; font-weight:500; line-height:1; letter-spacing:.02em; color:var(--ink-faint);}
.cu-info dl > div{padding:18px 0; border-bottom:1px solid var(--card-border);}
.cu-info dt{font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mint-text); text-shadow:var(--mint-text-shadow); margin-bottom:4px;}
.cu-info dd{font-size:.98rem; color:var(--ink);}
.cu-info .btn{width:100%; margin-top:22px; white-space:normal; text-align:center;}

/* ---- Franja de beneficios ---- */
.cu-strip{background:var(--bg-1); border-block:1px solid var(--card-border);}
.cu-strip ul{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 44px; padding-block:18px;}
.cu-strip li{display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--ink-dim);}
.cu-strip .cu-ico{color:var(--mint-text); text-shadow:var(--mint-text-shadow);}

/* ---- Fitness 4.0 ---- */
.cu-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:start;}
.cu-quote{margin:28px 0 4px; background:var(--card); border:1px solid var(--card-border); border-left:3px solid var(--mint); border-radius:var(--radius-s); padding:20px 24px;}
.cu-quote figcaption{font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px;}
.cu-quote blockquote{font-style:italic; color:var(--ink); font-size:1rem; line-height:1.6;}
.cu-fifty{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-m); padding:clamp(24px,3vw,36px); box-shadow:0 24px 60px -36px rgba(0,0,0,.45);}
.cu-fifty-label{font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mint-text); text-shadow:var(--mint-text-shadow); margin-bottom:10px;}
.cu-fifty h3{font-size:1.4rem; line-height:1.25; margin-bottom:22px;}
.cu-fifty-row{display:flex; gap:16px; padding:18px 0 0;}
.cu-fifty-row h4{font-size:1rem; margin-bottom:4px;}
.cu-fifty-row p{font-size:.9rem; line-height:1.55;}

/* ---- Tarjetas y rejillas ---- */
.cu-grid-3,.cu-grid-4{display:grid; gap:20px; margin-top:40px;}
.cu-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cu-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.cu-card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-m); padding:28px; transition:border-color .2s ease;}
.cu-card:hover{border-color:color-mix(in srgb, var(--mint) 40%, transparent);}
.cu-card .cu-ico-circle{margin-bottom:20px;}
.cu-card .cu-phase-top .cu-ico-circle{margin-bottom:0;}
.cu-card h3{font-size:1.15rem; margin-bottom:10px;}
.cu-card p{font-size:.92rem; line-height:1.6;}
.cu-big{font-family:var(--display); font-weight:800; font-size:clamp(2.1rem,3.4vw,2.8rem); line-height:1; color:var(--mint-text); text-shadow:var(--mint-text-shadow); margin-bottom:18px;}

.cu-phase-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px;}
.cu-phase-num{font-family:var(--display); font-weight:700; font-size:2.4rem; line-height:1; color:var(--ink-faint); opacity:.55;}
.cu-phase-weeks{font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mint-text); text-shadow:var(--mint-text-shadow); margin-bottom:8px;}
.cu-phase h3{font-size:1.08rem;}

/* ---- Temario ---- */
.cu-weeks{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:40px;}
.cu-week{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-s); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s ease;}
.cu-week:hover{border-color:color-mix(in srgb, var(--mint) 40%, transparent);}
.cu-week-head{background:rgba(0,0,0,.4); border-bottom:1px solid var(--card-border); padding:13px 22px; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mint);}
.cu-week-body{padding:22px; flex:1;}
.cu-week h3{font-size:1.02rem; line-height:1.3; margin-bottom:16px;}
.cu-week li{display:flex; gap:10px; align-items:flex-start; font-size:.86rem; line-height:1.5; color:var(--ink-dim); margin-bottom:11px;}
.cu-week li:last-child{margin-bottom:0;}
.cu-week li .cu-ico{color:var(--mint); margin-top:4px;}

/* ---- Para quién ---- */
.cu-fit{display:grid; grid-template-columns:1fr 1fr; margin-top:36px; border:1px solid var(--card-border); border-radius:var(--radius-m); overflow:hidden;}
.cu-fit-side{padding:clamp(24px,3vw,36px);}
.cu-fit-yes{background:var(--bg-2);}
.cu-fit-no{background:var(--card); border-left:1px solid var(--card-border);}
.cu-fit-head{display:flex; align-items:center; gap:14px; margin-bottom:24px;}
.cu-fit-head h3{font-size:1.1rem;}
.cu-fit-yes .cu-fit-icon{color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
.cu-fit-no .cu-fit-icon{color:var(--ink-faint);}
.cu-fit li{display:flex; gap:12px; align-items:flex-start; font-size:.92rem; line-height:1.55; color:var(--ink-dim); margin-bottom:16px;}
.cu-fit li:last-child{margin-bottom:0;}
.cu-fit li .cu-ico{margin-top:4px;}
.cu-fit-yes li .cu-ico{color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
.cu-fit-no li .cu-ico{color:var(--ink-faint);}

/* ---- Inversión ---- */
.cu-inv-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:start;}
.cu-facts{margin-top:28px; display:grid; gap:14px;}
.cu-facts li{display:flex; gap:12px; align-items:flex-start; font-size:.94rem; color:var(--ink-dim); line-height:1.5;}
.cu-facts li strong{color:var(--ink); font-weight:600;}
.cu-facts .cu-ico{color:var(--mint); margin-top:2px;}
.cu-price{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-m); padding:clamp(24px,3vw,36px);}
.cu-price-label{font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mint); margin-bottom:6px;}
.cu-stage{display:flex; justify-content:space-between; align-items:center; gap:8px 16px; flex-wrap:wrap; padding:16px 0; border-bottom:1px solid var(--card-border);}
.cu-stage-name{font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; flex-wrap:wrap; gap:8px;}
.cu-stage-date{font-size:.86rem; color:var(--ink-dim); margin-top:2px;}
.cu-stage-amount{font-family:var(--display); font-weight:700; font-size:1.65rem; line-height:1; color:var(--mint);}
.cu-stage-active{background:var(--mint-soft); border-radius:var(--radius-s); padding-inline:14px; margin-inline:-14px;}
.cu-stage-active .cu-stage-name{color:var(--ink);}
.cu-badge{display:inline-block; font-family:var(--display); font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:none; background:var(--mint); color:#04140d; border-radius:999px; padding:3px 10px;}
.cu-price-note{font-size:.84rem; line-height:1.55; color:var(--ink-faint); padding:16px 0 20px; border-bottom:1px solid var(--card-border);}
.cu-checks{display:grid; gap:12px; padding:22px 0 26px;}
.cu-checks li{display:flex; gap:12px; align-items:flex-start; font-size:.9rem; line-height:1.5; color:var(--ink-dim);}
.cu-checks .cu-ico{color:var(--mint); margin-top:3px;}
.cu-block-btn{width:100%; white-space:normal; text-align:center;}

/* ---- Expertos ---- */
.cu-experts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:32px;}
.cu-expert{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-s); padding:26px;}
.cu-expert-num{display:block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.72rem; color:var(--ink-faint); margin-bottom:12px;}
.cu-expert h3{font-size:1.15rem; margin-bottom:10px;}
.cu-expert-role{font-style:italic; color:var(--ink); font-size:.9rem; line-height:1.5; margin-bottom:12px;}
.cu-expert p:last-child{font-size:.86rem; line-height:1.55; color:var(--ink-faint);}

/* ---- FAQ ---- */
.cu-faq{margin:32px 0 0; max-width:none;}
.cu-faq details p{font-size:.96rem; line-height:1.65;}

/* ---- Inscripción ---- */
.cu-banner{background:var(--mint); border-radius:var(--radius-s); padding:clamp(22px,3vw,34px) clamp(20px,3vw,36px);}
.cu-banner h2{font-size:clamp(1.1rem,2.2vw,1.65rem); line-height:1.25; letter-spacing:.01em; text-transform:uppercase; color:#04140d; font-weight:700;}
.cu-contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,64px); margin-top:44px; align-items:start;}
.cu-contact-title{font-size:1.25rem;}
.cu-contact-list{margin-top:28px; display:grid; gap:18px;}
.cu-contact-list li{display:flex; align-items:center; gap:16px;}
.cu-contact-list li > div{min-width:0;}
.cu-contact-label{display:block; font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mint);}
.cu-contact-value{display:block; color:var(--ink); font-size:.98rem; overflow-wrap:anywhere;}
a.cu-contact-value:hover{color:var(--mint);}
.cu-form{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-m); padding:clamp(22px,3vw,32px);}
.cu-form .form-row label{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);}
.cu-form .form-row input,.cu-form .form-row select,.cu-form .form-row textarea{background:var(--bg-2);}
.cu-form-note{font-size:.8rem; color:var(--ink-faint); margin-top:14px; line-height:1.5;}
.cu-form-status{font-size:.86rem; color:var(--ink); background:var(--mint-soft); border:1px solid var(--card-border); border-radius:var(--radius-s); padding:10px 14px; margin-top:14px;}
.cu-form-status a{color:var(--mint); text-decoration:underline;}

.cu-foot{border-top:1px solid var(--card-border); padding:26px 20px 32px; text-align:center;}
.cu-foot p{font-size:.78rem; letter-spacing:.06em; color:var(--ink-faint);}

/* ---- Responsive ---- */
@media(max-width:1099px){
  .cu-experts{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:1100px){
  .cu-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cu-weeks{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:900px){
  .cu-hero-grid,.cu-split,.cu-inv-grid,.cu-contact-grid{grid-template-columns:minmax(0,1fr);}
  .cu-experts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cu-hero-side .cu-info{margin:-24px 12px 0;}
}
@media(max-width:820px){
  .cu-grid-3{grid-template-columns:minmax(0,1fr);}
}
@media(max-width:760px){
  .cu-fit{grid-template-columns:minmax(0,1fr);}
  .cu-fit-no{border-left:0; border-top:1px solid var(--card-border);}
}
@media(max-width:640px){
  .cu-weeks,.cu-grid-4,.cu-experts{grid-template-columns:minmax(0,1fr);}
  .cu-strip ul{justify-content:flex-start; gap:12px 28px;}
  .cu-hero-stats{gap:18px 28px;}
  .cu-stage{flex-direction:column; align-items:flex-start;}
}
@media (prefers-reduced-motion: reduce){
  .cu{scroll-behavior:auto;}
  .cu-card,.cu-week,.cu-navlink{transition:none;}
}

/* ============================================================
   MATCH POR UBICACIÓN (landing)
   La tarjeta visual usa .cu-dark: siempre oscura en ambos temas.
   ============================================================ */
.match-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:center; margin-top:0;}
.match-copy h2{max-width:20ch;}
.match-steps{list-style:none; counter-reset:mstep; display:grid; gap:20px; margin-top:30px;}
.match-steps li{counter-increment:mstep; display:grid; grid-template-columns:34px minmax(0,1fr); gap:16px; align-items:start;}
.match-steps li::before{
  content:counter(mstep);
  width:34px; height:34px; border-radius:50%;
  background:var(--mint); color:#04140d;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:.95rem;
}
.match-step-title{display:block; font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink); margin-bottom:4px; line-height:1.3;}
.match-steps p{font-size:.95rem; line-height:1.55; color:var(--ink-dim);}
.match-note{
  display:flex; gap:10px; align-items:flex-start;
  margin-top:26px; padding:14px 16px;
  font-size:.86rem; line-height:1.5; color:var(--ink-dim);
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-s);
}
.match-note svg{color:var(--mint-text); text-shadow:var(--mint-text-shadow); flex-shrink:0; margin-top:1px;}

.match-visual{
  position:relative; min-width:0;
  padding:14px 14px 12px; border-radius:var(--radius-l);
  border:1px solid var(--card-border);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.6);
}
.match-map{position:relative; aspect-ratio:4/3; border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--card-border);}
.match-map svg{position:absolute; inset:0; width:100%; height:100%;}
.mm-label{
  position:absolute; z-index:1;
  font-family:var(--display); font-weight:600; font-size:11.5px; line-height:1.2;
  color:var(--ink); background:rgba(8,9,10,.82);
  border:1px solid var(--card-border); border-radius:999px;
  padding:3px 8px; white-space:nowrap; transform:translateX(-50%);
}
/* Etiquetas sobre el mapa: posiciones en % del viewBox 1024x768 (el mapa es siempre 4:3) */
.mm-label{background:rgba(8,9,10,.88); border-color:rgba(255,255,255,.16); color:#f4f7f5;}
.mm-place{left:10px; top:10px; transform:none; color:#f4f7f5;}
.mm-anchor{left:44%; top:50%; transform:translate(-100%,-50%); color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
.mm-km{left:calc(70.6% + 7px); top:50%; transform:translateY(-50%); color:var(--mint-text); text-shadow:var(--mint-text-shadow);}
.mm-wait{left:24.4%; top:86%; color:#d5dbd7;}
.mm-attr{
  position:absolute; right:0; bottom:0; z-index:2;
  font-family:var(--body); font-size:10px; line-height:1.3; color:#1b211d;
  background:rgba(255,255,255,.78); padding:2px 7px; border-top-left-radius:8px;
}
.mm-attr:hover{background:#fff; text-decoration:underline;}
.mm-attr:focus-visible{outline:2px solid var(--mint); outline-offset:-2px;}

.match-agenda{margin-top:12px; padding:14px 14px 6px; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-m);}
.ma-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
.ma-title{font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--ink);}
.ma-zone{
  font-family:var(--display); font-weight:600; font-size:11.5px;
  color:var(--mint-text); text-shadow:var(--mint-text-shadow); background:var(--mint-soft);
  border:1px solid color-mix(in srgb, var(--mint) 35%, transparent);
  border-radius:999px; padding:3px 10px;
}
.ma-list{list-style:none;}
.ma-list li{display:grid; grid-template-columns:48px minmax(0,1fr); gap:12px; align-items:start; padding:10px 0; border-top:1px solid var(--card-border);}
.ma-time{font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--mint-text); text-shadow:var(--mint-text-shadow); font-variant-numeric:tabular-nums;}
.ma-body{display:flex; flex-direction:column; min-width:0;}
.ma-body b{font-size:.92rem; font-weight:600; color:var(--ink); line-height:1.3;}
.ma-body span{font-size:.82rem; color:var(--ink-dim); line-height:1.4;}
.match-cap{text-align:right; margin-top:8px; padding-right:2px; font-size:11.5px; color:var(--ink-faint); line-height:1.2;}

@media(max-width:900px){
  .match-grid{grid-template-columns:minmax(0,1fr);}
  .match-copy h2{max-width:none;}
}
.match-dots{display:none;}

/* Móvil: orden cabecera > mapa > pasos (carrusel) > nota > botón */
@media(max-width:700px){
  .match-grid{display:flex; flex-direction:column; align-items:stretch; gap:0;}
  .match-copy{display:contents;}
  .match-head{order:1; margin-bottom:26px;}
  .match-visual{order:2; margin-bottom:26px;}
  .match-steps-wrap{order:3;}
  .match-dots{order:4;}
  .match-note{order:5; margin-top:22px;}
  .match-copy > .btn-row{order:6;}

  .match-steps-wrap{
    --wrap-pad:28px;
    position:relative; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-left:calc(-1 * var(--wrap-pad)); margin-right:calc(-1 * var(--wrap-pad));
    padding:8px var(--wrap-pad) 10px;
    overscroll-behavior-x:contain;
  }
  .match-steps-wrap::-webkit-scrollbar{display:none;}
  .match-steps-wrap:focus-visible{outline:2px solid var(--mint); outline-offset:-2px; border-radius:var(--radius-m);}
  .match-steps{display:flex; gap:14px; width:max-content; margin-top:0;}
  .match-steps li{
    display:block; flex:0 0 calc(100vw * .82); scroll-snap-align:center;
    padding:18px; background:var(--card); border:1px solid var(--card-border); border-radius:20px;
  }
  .match-steps li::before{margin-bottom:12px;}
  .match-dots{display:flex; justify-content:center; gap:8px; margin-top:6px;}
  .match-dots span{
    width:8px; height:8px; border-radius:999px;
    background:color-mix(in srgb, var(--ink) 26%, transparent);
    transition:width .2s ease, background .2s ease;
  }
  .match-dots span.is-active{background:var(--mint); width:22px;}
}
@media(max-width:640px){ .match-steps-wrap{--wrap-pad:20px;} }
@media(max-width:420px){ .match-steps-wrap{--wrap-pad:16px;} }
@media(max-width:400px){
  .match-visual{padding:10px 10px 10px;}
  .match-agenda{padding:12px 12px 4px;}
  .ma-list li{grid-template-columns:42px minmax(0,1fr); gap:10px;}
}

/* ============================================================
   tuCOACH UNIVERSITY — vista interna
   Reutiliza cu- (hero, franja, tarjetas, formulario, bandas .cu-dark).
   Solo lo propio lleva prefijo un-.
   ============================================================ */
.un-steps,.un-flow{list-style:none;}
.un-label{font-family:var(--display); font-weight:600; font-size:1.05rem; letter-spacing:.01em; color:var(--mint-text); text-shadow:var(--mint-text-shadow); margin-bottom:14px;}

/* Hero: tarjeta "Qué incluye" */
.un-incl{padding:24px 28px 26px;}
.un-incl-title{font-family:var(--body); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mint-text); text-shadow:var(--mint-text-shadow); margin-bottom:4px;}
.un-incl-list li{display:flex; gap:12px; align-items:flex-start; padding:15px 0; border-bottom:1px solid var(--card-border); font-size:.98rem; line-height:1.45; color:var(--ink);}
.un-incl-list li:last-child{border-bottom:0; padding-bottom:0;}
.un-incl-list .cu-ico{color:var(--mint-text); text-shadow:var(--mint-text-shadow); margin-top:2px;}

/* Cómo funciona */
.un-how{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,4vw,56px); margin-top:40px; align-items:start;}
.un-how-main{display:grid; gap:20px; min-width:0;}
.un-mech{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start;}
.un-mech-img{flex:0 0 100%; width:100%; aspect-ratio:960/700; object-fit:cover; border-radius:16px; border:1px solid var(--card-border); display:block;}
.un-mech .cu-ico-circle{margin-bottom:0;}
.un-mech > div{min-width:0;}
.un-sum{display:flex; align-items:center; gap:14px; background:var(--mint-soft); border:1px solid color-mix(in srgb, var(--mint) 35%, transparent); border-radius:var(--radius-s); padding:16px 20px;}
.un-sum p{color:var(--ink); font-size:.95rem; line-height:1.5;}
.un-sum strong{color:var(--mint-text); text-shadow:var(--mint-text-shadow); font-weight:600;}

/* Vista de ejemplo del perfil (siempre oscura) */
.un-mock{margin:0; min-width:0; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-m); padding:clamp(20px,2.6vw,28px); box-shadow:0 24px 60px -36px rgba(0,0,0,.6);}
.un-mock-head{display:flex; align-items:center; gap:14px; margin-bottom:22px;}
.un-avatar{width:44px; height:44px; border-radius:50%; background:var(--mint-soft); border:1px solid var(--mint); color:var(--mint); display:inline-flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:.9rem; flex-shrink:0;}
.un-mock-name{display:block; font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink);}
.un-mock-role{display:block; font-size:.85rem; color:var(--ink-dim);}
.un-mock-total-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:.85rem; color:var(--ink-dim); margin-bottom:10px;}
.un-mock-total-row strong{font-family:var(--display); font-size:1.25rem; color:var(--ink);}
.un-bar{height:10px; border-radius:999px; background:var(--bg-2); overflow:hidden;}
.un-bar span{display:block; height:100%; background:var(--mint); border-radius:999px;}
.un-mock-rows{margin-top:22px; display:grid; gap:10px;}
.un-mock-rows li{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 12px; background:var(--bg-2); border:1px solid var(--card-border); border-radius:var(--radius-s); padding:12px 14px;}
.un-mock-row-name{font-size:.9rem; color:var(--ink);}
.un-tag{font-size:.7rem; font-weight:700; letter-spacing:.06em; color:var(--mint); background:var(--mint-soft); border:1px solid color-mix(in srgb, var(--mint) 35%, transparent); border-radius:999px; padding:3px 10px; white-space:nowrap;}
.un-mock-foot{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-top:22px;}
.un-pill{display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600; color:var(--ink-dim); border:1px dashed var(--ink-faint); border-radius:999px; padding:6px 12px;}
.un-pill::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--ink-faint); flex-shrink:0;}
.un-qr{width:64px; height:64px; padding:7px; box-sizing:border-box; background:var(--bg-2); border:1px solid var(--card-border); border-radius:var(--radius-s); fill:var(--ink); flex-shrink:0;}
.un-mock-cap{margin-top:16px; text-align:center; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}

/* Certificación: secuencia de 4 pasos */
.un-steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:40px;}
.un-step{position:relative; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-m); padding:26px 24px; transition:border-color .2s ease;}
.un-step:hover{border-color:color-mix(in srgb, var(--mint) 40%, transparent);}
.un-step-num{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--mint); color:#04140d; font-family:var(--display); font-weight:800; margin-bottom:18px;}
.un-step h3{font-size:1.08rem; margin-bottom:8px;}
.un-step p{font-size:.92rem; line-height:1.6;}
.un-step:not(:last-child)::after{
  content:''; position:absolute; top:32px; left:100%; width:26px; height:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 28'%3E%3Cpath d='M1 2 L13 9 L3 15 L23 21 L13 26' fill='none' stroke='%232fe8a6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' opacity='.75'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:contain;
}

/* Graduación: recorrido en 3 nodos */
.un-flow{display:flex; align-items:stretch; justify-content:space-between; gap:10px; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-m); padding:clamp(22px,3vw,32px); box-shadow:0 24px 60px -36px rgba(0,0,0,.45);}
.un-node{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; flex:1 1 0; min-width:0;}
.un-node .cu-ico-circle{margin-bottom:6px;}
.un-node-name{font-family:var(--display); font-weight:700; font-size:1rem; line-height:1.25; color:var(--ink);}
.un-node-sub{font-size:.82rem; line-height:1.4; color:var(--ink-dim);}
.un-arrow{display:flex; align-items:flex-start; margin-top:11px; color:var(--mint-text); text-shadow:var(--mint-text-shadow); flex-shrink:0;}

/* Contacto */
.un-contact-grid{margin-top:0;}

@media(max-width:1000px){
  .un-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .un-step:not(:last-child)::after{display:none;}
}
@media(max-width:900px){
  .un-how{grid-template-columns:minmax(0,1fr);}
}
/* Escritorio: los dos mecanismos van lado a lado y debajo el perfil con el contador,
   para no dejar una columna vacía. */
@media(min-width:901px){
  .un-how{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch;}
  .un-how-main{display:contents;}
  .un-how .un-mock{order:3; align-self:stretch;}
  .un-how .un-sum{order:4; align-self:stretch; flex-direction:column; justify-content:center; text-align:center; gap:18px; padding:32px 36px;}
  .un-how .un-sum p{font-size:1.2rem; line-height:1.55;}
  .un-how .un-sum .cu-ico-circle{width:56px; height:56px;}
}
@media(max-width:640px){
  .un-steps{grid-template-columns:minmax(0,1fr); gap:20px;}
  .un-step:not(:last-child)::after{display:block; top:100%; left:43px; width:2px; height:20px; background-image:none; background-color:color-mix(in srgb, var(--mint) 55%, transparent);}
}
@media(max-width:560px){
  .un-flow{flex-direction:column; align-items:center; gap:6px;}
  .un-node{flex:none; width:100%;}
  .un-arrow{margin-top:0; align-self:center; transform:rotate(90deg);}
}
@media(max-width:480px){
  /* En columna, flex-wrap + flex-basis:100% enviaba el texto a una segunda columna fuera de pantalla */
  .un-mech{flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:14px;}
  .un-mech-img{flex:0 0 auto;}
}
@media (prefers-reduced-motion: reduce){
  .un-step{transition:none;}
}

/* ============================================================
   CTAs EN MÓVIL: botones a todo el ancho, con la etiqueta centrada
   (el CTA de la cabecera y el botón de WhatsApp no se tocan)
   ============================================================ */
@media(max-width:640px){
  .hero .microcopy{text-align:center;}
  section .btn,.btn-row .btn,.pricing-card .btn{white-space:normal; text-align:center;}
  .btn-row{flex-direction:column; align-items:stretch; width:100%;}
  .btn-row .btn,
  .pricing-card .btn,
  section .btn{width:100%;}
}