/* ============================================================
   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;          /* color de marca: rellenos, bordes, botones */
  --mint-text:#2fe8a6;     /* acento aplicado a TEXTO: debe cumplir contraste AA */
  --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 */
  --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:#12b981;
  --mint-text:#07704d;     /* 4.9:1 sobre #f6f8f7 — cumple AA en texto pequeño */
  --mint-dim:#0f8f65;
  --mint-glow:rgba(18,185,129,.28);
  --mint-soft:rgba(18,185,129,.07);
  --ink:#0e130f;
  --ink-dim:#4c554e;
  --ink-faint:#646d67;   /* >=4.7:1 sobre todas las superficies claras */
  --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); 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);}
.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);}
.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);}
.navlinks{display:flex; align-items:center; gap:30px;}
.navlinks a{font-size:.94rem; font-weight:500; color:var(--ink-dim); transition:color .15s;}
.navlinks a:hover{color:var(--ink);}
.navcta{display:flex; align-items:center; gap:14px;}
.navcta .btn{padding:11px 20px; font-size:.9rem;}
.navlogin{font-size:.9rem; color:var(--ink-dim); font-weight:500;}
.navlogin:hover{color:var(--ink);}

.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); 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);}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:14px 2px; font-size:.98rem; font-weight:500; color:var(--ink-dim); border-bottom:1px solid var(--card-border);}
.mobile-menu a:hover{color:var(--ink);}
.mobile-menu .mobile-cta{border-bottom:none; margin-top:14px; text-align:center; color:#04140d;}

@media(min-width:901px){ .mobile-menu{display:none !important;} }
@media(max-width:900px){
  .navlinks,.navlogin{display:none;}
  .burger{display:flex;}
}
@media(max-width:560px){ .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;}
.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:1fr 1.02fr; gap:52px; align-items:center;
}
@media(max-width:980px){
  .hero-content{grid-template-columns:1fr; gap:0;}
}
.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); 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);}
.hero .lede{margin-bottom:32px;}
.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;}
  .hero-sticky{position:relative; height:auto; min-height:88vh; padding:70px 0 90px;}
  .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); 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); 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;}

/* ============ 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{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(--bg-1); border:1px 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-node h4{font-family:var(--display); font-size:.92rem; font-weight:600;}
.flow-node p{font-size:.78rem; line-height:1.45;}
@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);}
.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);}
.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);}
@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:36px;}
.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);}
.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); 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); 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);}
  .mod-panels{padding:30px 24px;}
}
@media(max-width:640px){ .mod-panel-inner{grid-template-columns:1fr;} .mod-illustration{width:80px; height:80px;} }

/* ============ 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); 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-soft); border-color:var(--mint); color:var(--mint-text);}

.roi-headline{font-family:var(--display); font-weight:800; font-size:clamp(2rem,4.4vw,2.9rem); color:var(--mint-text); 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);}
.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);}
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); 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); 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;}

/* Cada paso lleva su propia imagen cuadrada a la derecha */
@media(min-width:860px){
  .tl-item{
    display:grid; grid-template-columns:minmax(0, 600px) 132px; grid-template-rows:auto 1fr;
    column-gap:40px; justify-content:start; align-items:start; padding-bottom:24px;
  }
  .tl-item .tl-dot{grid-row:1 / -1;}
  /* El título arranca a la altura del número, no al fondo de la imagen */
  .tl-item h4{grid-column:1; grid-row:1; margin-top:12px;}
  .tl-item p{grid-column:1; grid-row:2; margin:0;}
  .tl-media{grid-column:2; grid-row:1 / -1;}
}
.tl-media{
  margin:0; aspect-ratio:1/1; overflow:hidden;
  border-radius:var(--radius-m); border:1px solid var(--card-border);
  background:var(--bg-1);
}
.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; max-width:280px; aspect-ratio:16/10;}
}
@media(max-width:520px){ .tl-item{padding-left:60px;} .tl-dot{width:40px; height:40px;} .timeline::before{left:19px;} }

/* ============ 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;} }

/* ============ 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); 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:32px; border:1px solid var(--card-border);}
.fit-col.yes-col{background:var(--mint-soft); border-color:color-mix(in srgb, var(--mint) 25%, transparent);}
.fit-col.no-col{background:var(--card);}
.fit-col h4{font-size:1rem; margin-bottom:20px;}
.fit-col ul{display:flex; flex-direction:column; gap:14px;}
.fit-col li{font-size:.9rem; color:var(--ink-dim); display:flex; gap:10px; align-items:flex-start;}
.fit-col.yes-col li::before{content:'✓'; color:var(--mint-text); 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); 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); 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); 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); line-height:1;}
@media(max-width:860px){ .founder-box{grid-template-columns:1fr;} }

/* ============ ACADEMIA ============ */
.academia{background:linear-gradient(135deg, color-mix(in srgb, var(--mint) 8%, var(--bg-1)), var(--bg-0) 60%); border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border);}
.academia-box{display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;}
.academia-box h2{margin-bottom:14px; max-width:18ch;}
.academia-box p{max-width:56ch;}
@media(max-width:860px){ .academia-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); 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);}
.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:#25D366; color:#06281a; 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);}
@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;}

/* ============ 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); 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;}
}

/* ============ 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);}
.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); 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;}
.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 grandes: 3 por fila, con la fotografía a sangre en
   la parte superior de la tarjeta. Antes eran 5 diminutas en fila. */
.perfiles-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px;
}
.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:26px; margin-right:26px;}
.perfiles-grid .perfil-icon{margin-top:24px;}
.perfiles-grid .perfil-card p{margin-bottom:28px;}
.perfiles-grid .perfil-card h4{font-size:1.15rem;}
@media(max-width:960px){ .perfiles-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){
  .perfiles-grid{grid-template-columns:1fr;}
  .perfil-media{aspect-ratio:16/10;}
}

.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){
  .hero-stage{padding:20px 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;}
}