/* Idea de la página: se empieza en gris (página 4, nadie te ve) y se sube
   hasta un fondo soleado (primera posición). Todo luminoso, tema único. */
:root{
  color-scheme: light;
  --tinta:#1F2440;      /* texto */
  --papel:#F1FAF8;      /* fondo general, menta muy clara */
  --sol:#FFC93C;        /* llamadas a la acción y primera posición */
  --coral:#FF5A36;      /* tu web, la cifra grande */
  --turquesa:#0B7A72;   /* botones, enlaces y mejoras */
  --gris:#5F6B85;
  --linea:#DDE6EA;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --texto:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --ancho:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--texto);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-variation-settings:"SOFT" 100;line-height:1.04;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:4px}
.caja{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.boton{display:inline-flex;align-items:center;justify-content:center;font:600 17px/1 var(--texto);padding:16px 22px;border-radius:10px;border:0;cursor:pointer;text-decoration:none;background:var(--sol);color:var(--tinta)}
.boton:hover{background:#ffd460}
.boton.azul{background:var(--turquesa);color:#fff}
.boton.azul:hover{background:#09665F}

/* Cabecera y portada */
.portada{background:#fff;color:var(--tinta);padding-bottom:56px}
.cabecera{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:10px;font:700 26px/1 var(--display);letter-spacing:-.02em;text-decoration:none;font-variation-settings:"SOFT" 100}
.logo svg{width:30px;height:30px}
.cabecera nav{display:flex;gap:26px;align-items:center;font-size:15px;flex-wrap:wrap}
.cabecera nav a{text-decoration:none;opacity:.86}
.cabecera nav a:hover{opacity:1;text-decoration:underline}
.portada-cuerpo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:end;padding-top:56px}
.portada h1{font-size:clamp(42px,7vw,92px);font-weight:800}
.portada .sub{font-size:20px;max-width:34em;margin-top:24px;color:#45506E}
.dominio{display:flex;gap:10px;margin-top:32px;max-width:560px;flex-wrap:wrap}
.dominio input{flex:1 1 220px;min-width:0;font:500 17px var(--texto);padding:15px 16px;border-radius:10px;border:2px solid #C5D3D8;background:#fff;color:var(--tinta)}
.dominio input::placeholder{color:#8A94AB}
.nota{font-size:14px;color:var(--gris);margin-top:12px}
.paginas{justify-self:end;text-align:right}
.paginas ol{list-style:none;display:flex;gap:8px;margin:0 0 14px;padding:0;justify-content:flex-end;font:700 22px/1 var(--display);font-variant-numeric:tabular-nums}
.paginas li{width:48px;height:56px;display:grid;place-items:center;border-radius:10px;color:var(--gris);border:2px solid var(--linea)}
.paginas li.venta{background:var(--sol);color:var(--tinta);border-color:var(--sol)}
.paginas li.tu{border-color:var(--coral);color:var(--coral)}
.paginas p{font-size:15px;color:#45506E}
.paginas strong{color:var(--tinta)}
.baja{margin-top:44px;font-size:15px;color:var(--gris);display:flex;align-items:center;gap:10px}
.baja svg{width:18px;height:18px}

/* Escena de subida */
.subida{height:760vh;position:relative}
.fija{position:sticky;top:0;height:100vh;height:100svh;background:#D5DBE8;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;padding:28px max(24px,calc((100vw - var(--ancho))/2 + 24px));align-items:stretch}
.serp,.relato{background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(31,36,64,.14);min-height:0}
.serp{display:flex;flex-direction:column;overflow:hidden}
.barra{display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--linea)}
.busca{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:var(--papel);border-radius:999px;padding:10px 16px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.busca svg{flex:none;width:16px;height:16px;color:var(--gris)}
.busca span{overflow:hidden;text-overflow:ellipsis}
.pag{flex:none;font:700 14px/1 var(--texto);padding:9px 12px;border-radius:999px;background:var(--turquesa);color:#fff;font-variant-numeric:tabular-nums}
.vista{position:relative;flex:1;overflow:hidden;min-height:0}
.pista{position:absolute;left:0;right:0;top:0;will-change:transform}
.corte{position:absolute;left:0;right:0;height:40px;display:flex;align-items:center;gap:12px;padding:0 18px;font:600 13px/1 var(--texto);color:var(--gris)}
.corte::after{content:"";flex:1;height:1px;background:var(--linea)}
.fila{position:absolute;left:0;right:0;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:start;padding:0 18px 0 0;will-change:transform}
.fila .n{font:700 15px/72px var(--display);text-align:center;color:#A9B3CD;font-variant-numeric:tabular-nums}
.comp{height:72px}
.comp .rayas{display:grid;gap:8px;padding-top:14px}
.comp i{display:block;height:8px;border-radius:4px;background:#E4E9F6}
.comp i.t{height:12px;background:#C7D2F4}
.tuya{min-height:72px;z-index:2;background:#fff;border-radius:12px;box-shadow:0 0 0 2px var(--coral),0 10px 28px rgba(255,90,54,.2)}
.tuya .n{color:var(--coral);font-size:18px}
.tuya .cont{padding:10px 0 12px}
.tuya .url{font-size:13px;color:var(--gris)}
.tuya .tit{font:600 17px/1.25 var(--texto);color:#1a3fd0;margin-top:2px}
.tuya .desc{font-size:14px;line-height:1.4;color:#3d4763;margin-top:3px}
.tuya .faq{display:none;margin-top:8px;border-top:1px solid var(--linea);font-size:14px}
.tuya .faq div{padding:7px 0;border-bottom:1px solid var(--linea);display:flex;justify-content:space-between;gap:12px}
.tuya .faq div::after{content:"+";color:var(--gris)}
.tuya .marcas{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tuya .marcas span{display:none;font:600 12px/1 var(--texto);padding:6px 8px;border-radius:6px;background:#DDF3F0;color:var(--turquesa)}
.v{display:none}
[data-paso="0"] .v0,[data-paso="1"] .v0{display:inline}
.serp:not([data-paso="0"]):not([data-paso="1"]) .v2{display:inline}
[data-paso="0"] .d0,[data-paso="1"] .d0,[data-paso="2"] .d0{display:inline}
.serp:not([data-paso="0"]):not([data-paso="1"]):not([data-paso="2"]) .d3{display:inline}
.serp:not([data-paso="0"]) .m1,
.serp:not([data-paso="0"]):not([data-paso="1"]) .m2,
.serp:not([data-paso="0"]):not([data-paso="1"]):not([data-paso="2"]) .m3,
.serp[data-paso="4"] .marcas .m4,.serp[data-paso="5"] .marcas .m4,.serp[data-paso="6"] .marcas .m4,.serp[data-paso="7"] .marcas .m4,
.serp[data-paso="5"] .marcas .m5,.serp[data-paso="6"] .marcas .m5,.serp[data-paso="7"] .marcas .m5{display:inline-block}
[data-paso="4"] .faq,[data-paso="5"] .faq,[data-paso="6"] .faq,[data-paso="7"] .faq{display:block}

/* Respuesta de IA */
.ia{position:absolute;inset:0;background:#fff;padding:22px;display:flex;flex-direction:column;gap:14px;transform:translateY(102%);transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:5;overflow:hidden}
[data-paso="6"] .ia{transform:none}
.ia h3{font:700 16px/1 var(--texto);letter-spacing:0;display:flex;align-items:center;gap:8px;color:var(--turquesa)}
.ia h3 svg{width:18px;height:18px}
.ia .preg{align-self:flex-end;max-width:85%;background:var(--turquesa);color:#fff;padding:12px 16px;border-radius:16px 16px 4px 16px;font-size:15px}
.ia .resp{font-size:17px;line-height:1.55;min-height:6em}
.ia .fuente{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--texto);padding:10px 12px;border-radius:8px;border:2px solid var(--turquesa);color:var(--turquesa);opacity:0;transition:opacity .3s}
.ia .fuente.on{opacity:1}

/* Contactos */
.leads{position:absolute;inset:0;background:rgba(255,255,255,.84);padding:18px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;opacity:0;pointer-events:none;transition:opacity .35s;z-index:6}
[data-paso="7"] .leads{opacity:1}
.lead{background:#fff;border-radius:12px;padding:12px 14px 12px 16px;border-left:6px solid var(--coral);box-shadow:0 6px 20px rgba(31,36,64,.16);display:none}
.lead.on{display:block;animation:entra .35s cubic-bezier(.2,.9,.3,1.2)}
.lead b{display:block;font-size:14px}
.lead span{font-size:14px;color:#3d4763}
@keyframes entra{from{transform:translateY(18px) scale(.96);opacity:0}}

/* Relato */
.relato{padding:28px;display:flex;flex-direction:column;overflow:hidden}
.lectura{display:flex;align-items:flex-end;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--linea)}
.lectura .num{font:800 clamp(72px,9vw,128px)/.82 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--coral)}
.lectura .eti{font-size:15px;color:var(--gris);padding-bottom:6px}
.lectura .eti b{display:block;color:var(--tinta);font-size:17px}
.pasos{position:relative;flex:1;min-height:0;margin-top:22px}
.paso{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .3s}
.paso.on{opacity:1;visibility:visible}
.paso .cuenta{font:600 14px/1 var(--texto);color:var(--turquesa);margin-bottom:10px}
.paso h2{font-size:clamp(24px,2.6vw,36px);font-weight:700}
.paso p{margin-top:12px;max-width:30em}
.paso .salto{margin-top:14px;font:700 15px/1 var(--texto);color:var(--turquesa);font-variant-numeric:tabular-nums}
.cifras{display:flex;gap:28px;margin-top:18px;flex-wrap:wrap}
.cifras div{font-size:14px;color:var(--gris)}
.cifras b{display:block;font:800 40px/1 var(--display);color:var(--tinta);font-variant-numeric:tabular-nums}
.aviso{font-size:13px;line-height:1.4;color:var(--gris);padding-top:14px;border-top:1px solid var(--linea)}

/* Secciones */
.bloque{padding:96px 0}
.bloque h2{font-size:clamp(34px,4.6vw,60px);font-weight:800}
.entrada{font-size:20px;max-width:36em;margin-top:20px;color:#33405f}
.analisis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px;align-items:start}
.cuatro{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:0;max-width:34em}
.cuatro li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--linea)}
.cuatro li:last-child{border-bottom:1px solid var(--linea)}
.cuatro b{font-family:var(--display);font-size:18px}
form.ficha{background:#fff;border-radius:16px;padding:28px;display:grid;gap:16px;box-shadow:0 18px 50px rgba(20,33,61,.12)}
.ficha h3{font-size:26px;font-weight:700}
.campo{display:grid;gap:6px;font-size:15px;font-weight:600}
.campo input{font:400 17px var(--texto);padding:13px 14px;border:2px solid var(--linea);border-radius:10px;color:var(--tinta);background:#fff;width:100%}
.campo input:focus{border-color:var(--turquesa);outline:0}
.acepto{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#3d4763}
.acepto input{margin-top:4px;width:18px;height:18px;flex:none}
.estado{font-size:15px;padding:12px 14px;border-radius:10px;background:#FFF4D6;display:none}
.estado.on{display:block}
.enlace{background:none;border:0;padding:0;font:inherit;color:var(--turquesa);text-decoration:underline;cursor:pointer}

.metodo{background:#fff}
.escalera{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px;align-items:end}
.peldano{border-top:6px solid var(--turquesa);padding-top:18px}
.peldano:nth-child(1){margin-bottom:0}
.peldano:nth-child(2){padding-bottom:64px}
.peldano:nth-child(3){padding-bottom:128px;border-color:var(--sol)}
.peldano .orden{font:600 14px/1 var(--texto);color:var(--gris)}
.peldano h3{font-size:28px;font-weight:700;margin-top:10px}
.peldano p{margin-top:10px;color:#33405f}
.reglas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:56px;list-style:none;padding:0}
.reglas li{padding:18px 0;border-top:1px solid var(--linea)}
.reglas b{font-family:var(--display);font-size:20px;display:block}

.claro{background:var(--turquesa);color:#fff}
.claro .entrada{color:#E3F6F3}
.claro h2{max-width:14em}

.somos{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}
.somos .texto{display:grid;gap:18px;font-size:19px;max-width:36em;color:#33405f}

.contacto{background:#fff}
.vias{display:grid;gap:0;margin-top:40px;list-style:none;padding:0}
.vias li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:center;padding:22px 0;border-top:1px solid var(--linea)}
.vias li:last-child{border-bottom:1px solid var(--linea)}
.vias b{font:700 24px/1.1 var(--display);display:block}
.vias span{color:#33405f;font-size:16px}
.vias .dato{font-weight:600;color:var(--tinta)}
[hidden]{display:none!important}

.pie{background:#FFF3D1;color:var(--tinta);padding:40px 0;font-size:15px}
.pie .caja{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.pie .logo{font-size:22px}
.pie nav{display:flex;gap:20px;flex-wrap:wrap}
.pie .enlace{color:var(--tinta)}

dialog{border:0;border-radius:16px;padding:0;max-width:680px;width:calc(100% - 32px);color:var(--tinta)}
dialog::backdrop{background:rgba(31,36,64,.45)}
dialog article{padding:32px;display:grid;gap:14px;font-size:16px}
dialog h2{font-size:30px}
dialog h3{font-size:19px;margin-top:8px}
dialog mark{background:#FFF0C2;padding:0 4px;border-radius:3px}
dialog .cerrar{justify-self:start;margin-top:8px}

@media (max-width:860px){
  .portada-cuerpo{grid-template-columns:1fr;padding-top:32px}
  .paginas{justify-self:start;text-align:left}
  .paginas ol{justify-content:flex-start}
  .fija{grid-template-columns:1fr;grid-template-rows:minmax(0,1.05fr) minmax(0,.95fr);gap:12px;padding:12px}
  .relato{padding:16px}
  .leads{padding:10px;gap:6px}
  .lead{padding:7px 10px 7px 12px;border-left-width:5px}
  .lead b,.lead span{font-size:12.5px;line-height:1.3}
  .lectura{padding-bottom:10px;gap:12px}
  .lectura .num{font-size:56px}
  .lectura .eti{font-size:13px;padding-bottom:2px}
  .lectura .eti b{font-size:15px}
  .pasos{margin-top:12px}
  .paso .cuenta{margin-bottom:6px;font-size:13px}
  .paso h2{font-size:21px}
  .paso p{font-size:15px;line-height:1.4;margin-top:6px}
  .paso .salto{margin-top:8px;font-size:14px}
  .cifras{margin-top:8px;gap:18px}
  .cifras b{font-size:28px}
  .aviso{font-size:11.5px;padding-top:8px}
  .bloque{padding:64px 0}
  .analisis,.somos{grid-template-columns:1fr;gap:36px}
  .escalera{grid-template-columns:1fr;gap:28px}
  .peldano:nth-child(n){padding-bottom:0}
  .reglas{grid-template-columns:1fr}
  .cuatro li{grid-template-columns:1fr;gap:2px}
  .vias li{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ia,.leads,.paso,.ia .fuente{transition:none}
  .lead.on{animation:none}
}

/* ---------- Cabecera fija ---------- */
:root{--cab:68px}
html{scroll-padding-top:calc(var(--cab) + 16px)}
.sup{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.sup .cabecera{height:var(--cab);padding-top:0;padding-bottom:0;flex-wrap:nowrap}
.sup nav{display:flex;gap:24px;align-items:center;font-size:15px;font-weight:500}
.sup nav a{text-decoration:none;opacity:1;color:var(--tinta)}
.sup nav a:not(.boton):hover,.sup nav a[aria-current="page"]{color:var(--turquesa);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.sup .boton{padding:12px 16px;font-size:15px}
.menu-btn{display:none;background:none;border:2px solid var(--linea);border-radius:10px;width:44px;height:44px;cursor:pointer;color:var(--tinta);align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px}
.lado{display:flex;align-items:center;gap:10px}
.portada{padding-bottom:48px}
.portada-cuerpo{align-items:center;padding-top:48px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.portada h1{font-size:clamp(40px,6vw,80px)}
.fija{top:var(--cab);height:calc(100vh - var(--cab));height:calc(100svh - var(--cab))}

/* ---------- Ilustración de buscador en la portada ---------- */
.mock{background:var(--papel);border-radius:20px;padding:22px;display:grid;gap:16px}
.mock-barra{display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:12px 18px;font-size:16px;box-shadow:0 2px 10px rgba(31,36,64,.08)}
.mock-barra svg{width:18px;height:18px;color:var(--gris);flex:none}
.mock-res{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mock-res li{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:start;background:#fff;border-radius:12px;padding:12px 14px 12px 8px}
.mock-res b{font:700 16px/1.3 var(--display);color:#A9B3CD;text-align:center}
.mock-res span{display:grid;gap:7px;padding-top:3px}
.mock-res i{display:block;height:8px;border-radius:4px;background:#E4E9F6}
.mock-res i.t{height:11px;background:#C7D2F4}
.mock-nota{font-size:15px;color:#45506E;text-align:center}
.mock-nota strong{color:var(--tinta)}
.mock-pag{display:flex;justify-content:center;align-items:flex-start;font:800 clamp(30px,3.6vw,46px)/1 var(--display);font-variation-settings:"SOFT" 100;color:#B7C0D6;letter-spacing:-.01em}
.mock-pag .o{display:grid;justify-items:center;gap:6px}
.mock-pag .o small{font:700 14px/1 var(--texto);color:var(--gris);letter-spacing:0}
.mock-pag .o.uno{color:var(--sol)}
.mock-pag .o.uno small{color:var(--tinta)}
.mock-pag .o.tu{color:var(--coral)}
.mock-pag .o.tu small{color:var(--coral)}
.mock-ley{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:14px;color:#45506E}
.mock-ley span{display:inline-flex;align-items:center;gap:6px}
.mock-ley span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--sol)}
.mock-ley span.tu::before{background:var(--coral)}

/* ---------- Páginas interiores ---------- */
.cab-pag{background:#fff;padding:56px 0 48px;border-bottom:1px solid var(--linea)}
.migas{font-size:14px;color:var(--gris);margin-bottom:18px}
.migas a{color:var(--gris)}
.cab-pag h1{font-size:clamp(36px,5vw,64px);font-weight:800;max-width:16em}
.cab-pag .entrada{max-width:38em}
.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:64px;align-items:start;padding-top:56px;padding-bottom:96px}
.prosa{max-width:42em}
.prosa h2{font-size:clamp(26px,3vw,36px);font-weight:700;margin-top:56px}
.prosa h2:first-child{margin-top:0}
.prosa h3{font-size:21px;font-weight:700;margin-top:28px}
.prosa p{margin-top:14px;color:#33405f}
.prosa ul,.prosa ol{margin:16px 0 0;padding-left:22px;color:#33405f;display:grid;gap:10px}
.prosa li b{color:var(--tinta)}
.prosa a{color:var(--turquesa)}
.aparte{position:sticky;top:calc(var(--cab) + 24px);background:#fff;border-radius:16px;padding:24px;display:grid;gap:14px;box-shadow:0 18px 50px rgba(31,36,64,.1)}
.aparte h2{font-size:24px;font-weight:700}
.aparte p{font-size:15px;color:#33405f}
.aparte ul{margin:0;padding-left:18px;font-size:15px;color:#33405f;display:grid;gap:6px}
.legal .prosa h2{font-size:24px;margin-top:36px}
.legal mark{background:#FFF0C2;padding:0 4px;border-radius:3px}
.pie nav a{color:var(--tinta)}
.pie .cols{display:flex;gap:20px 28px;flex-wrap:wrap}
dialog.ventana{max-width:480px}
dialog.ventana form.ficha{box-shadow:none;border-radius:0}
dialog.ventana .x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:var(--papel);cursor:pointer;font-size:20px;line-height:1;color:var(--tinta)}

@media (max-width:860px){
  :root{--cab:60px}
  .menu-btn{display:inline-flex}
  .sup nav{display:none;position:absolute;top:var(--cab);left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 16px;border-bottom:1px solid var(--linea);box-shadow:0 20px 30px rgba(31,36,64,.1)}
  .sup nav.abierto{display:flex}
  .sup nav a{padding:14px 0;border-bottom:1px solid var(--linea);font-size:17px}
  .sup .lado .boton{padding:11px 13px;font-size:14px}
  .logo{font-size:23px}
  .portada-cuerpo{grid-template-columns:1fr;padding-top:28px;gap:32px}
  .dos{grid-template-columns:1fr;gap:40px;padding-top:40px;padding-bottom:64px}
  .aparte{position:static}
  .cab-pag{padding:36px 0 32px}
}