/* Diseño: negro puro, Inter ligera y una sola escala de color. */
:root{color-scheme:dark;--violeta:#8052ff;--ambar:#ffb829;--gris:#bdbdbd;--ceniza:#9a9a9a;--curva:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{background:#000;scroll-padding-top:24px}body{margin:0;background:#05070b;isolation:isolate;color:#fff;font:200 18px/1.5 Inter,sans-serif;font-feature-settings:"ss01" on}h1,h2,h3,p,ol,dl,dd{margin:0}h1,h2,h3{font-weight:400;letter-spacing:-.04em}h1,.display{font-size:clamp(78px,7.85vw,113px);line-height:1.02}.heading-lg{font-size:78px;line-height:1.1}.heading-sm{font-size:42px;line-height:1.2}p+p{margin-top:24px}.gris{color:var(--gris)}.etiqueta{font-size:14px;font-weight:600;letter-spacing:.025em;color:var(--ambar);text-transform:uppercase;margin-bottom:24px}.ademas{font-size:14px;color:var(--ceniza)}
/* Diseño: dos columnas asimétricas, ancho máximo y espacio sin contenedores. */
.ancho{width:calc(100% - 96px);max-width:1280px;margin-inline:auto}.seccion{margin-top:120px}.dos-columnas{display:grid;grid-template-columns:1.12fr 1fr;gap:96px;align-items:start}.dos-columnas>*{min-width:0}.hero{display:grid;grid-template-columns:1.14fr 1fr;gap:24px;align-items:center;min-height:800px;padding:64px 0 48px}.texto>p:not(.etiqueta){max-width:540px;margin-top:30px}#constelacion{position:fixed;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 600ms ease-out}#constelacion.lista{opacity:1}.acciones{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:36px}
/* Interacción: enlaces nativos, foco violeta y transiciones de color de 160 ms. */
a,button{color:var(--ceniza);text-decoration:none;transition:color 160ms var(--curva)}a{display:inline-flex;align-items:center}a:focus-visible,button:focus-visible{outline:2px solid var(--violeta);outline-offset:5px}.cta{min-height:48px;padding:12px 22px;font-size:14px;font-weight:600;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap;background:var(--violeta);color:#fff;border-radius:24px;transition:transform 160ms var(--curva),filter 160ms var(--curva)}.cta:active{transform:scale(.97)}.cta-hero{background:var(--violeta);color:#fff}.fantasma{font-size:14px;font-weight:400}@media(hover:hover){a:hover{color:#fff}.cta:hover{color:#fff;filter:brightness(1.12)}}
/* Diseño e interacción: navegación transparente que sale con el documento. */
.cabecera nav{height:96px;display:flex;align-items:center;gap:36px}.marca{font-size:20px;letter-spacing:-.025em;font-weight:400;color:#fff;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.marca svg{width:24px;height:24px;color:var(--violeta)}.enlaces{display:flex;gap:30px;margin-left:auto}.enlaces a,footer nav a{font-size:14px;font-weight:600;letter-spacing:.025em;text-transform:uppercase}
/* Diseño: cifras grandes, frentes en zigzag y una lectura por pantalla. */
.cifras{display:grid;gap:60px;padding-top:42px}.numero{font-size:78px;line-height:1.1;letter-spacing:-.04em;font-weight:400}.contador{font-variant-numeric:tabular-nums}.cifras p+p{margin-top:12px}.introduccion>p{align-self:end;color:var(--gris)}.frente{min-height:78svh;align-content:center;padding-block:96px}.frente:nth-of-type(even) .frente-titulo{grid-column:2;grid-row:1}.frente:nth-of-type(even) .frente-detalle{grid-column:1;grid-row:1}.ordinal{margin-bottom:30px}.frente-titulo .gris{margin-top:18px;font-size:14px}.ejemplo{margin-top:30px;color:var(--gris)}.frente-detalle .ademas{margin-top:30px}.cierre-equipo{max-width:620px;margin-left:auto}.pasos{list-style:none;padding:0;display:grid;gap:48px}.pasos h3{font-size:27px;line-height:1.2;margin-bottom:12px}.pasos .etiqueta{display:block;margin-bottom:12px}#como-funciona .ademas{margin-top:30px}
/* Diseño: conversación tipográfica, sin burbujas; fuentes junto a resultados. */
.conversacion{list-style:none;padding:0;display:grid;gap:36px}.conversacion .hora{font-size:12px;font-weight:600;letter-spacing:.025em;text-transform:uppercase;color:var(--ambar);margin-bottom:8px}.conversacion p+p{margin-top:0}.director{color:var(--gris)}.dueno{padding-left:48px;color:#fff}.resultados>h2{max-width:14ch;margin-bottom:24px}.resultado{padding-top:60px;align-items:center}.resultado:nth-of-type(even) h2{grid-column:2;grid-row:1}.resultado:nth-of-type(even) p{grid-column:1;grid-row:1}.dudas{display:grid;gap:42px}.dudas dt{font-size:24px;font-weight:400;letter-spacing:-.02em;margin-bottom:12px}.dudas dd{color:var(--gris)}.cierre{max-width:1000px;padding-block:60px}.cierre p{margin-top:30px;color:var(--gris)}.cierre .cta{margin-top:36px}footer{padding-block:96px 36px;color:var(--ceniza);font-size:14px}footer .pie-marca{display:flex;align-items:center;gap:18px;flex-wrap:wrap}footer nav{display:flex;gap:30px;margin-top:30px}
/* La entrada ocurre por sección completa, sin secuencias de letras. */
section.entrada-pendiente{opacity:0;transform:translateY(14px)}
section.entrada-visible{opacity:1;transform:none;transition:opacity 180ms var(--curva),transform 180ms var(--curva)}
@media(min-width:769px){
.hero{grid-template-columns:1fr 1fr}.hero .texto{grid-column:1}h1{font-size:clamp(52px,5.1vw,74px)}
.frente{grid-template-columns:1fr 1fr;column-gap:12%;row-gap:30px}
.frente .frente-titulo,.frente .frente-detalle{grid-column:1;grid-row:auto}
.frente:nth-of-type(even) .frente-titulo,.frente:nth-of-type(even) .frente-detalle{grid-column:2;grid-row:auto}
[data-fase="dolor"],[data-fase="como"]{display:block;text-align:center;max-width:850px;margin-inline:auto}
[data-fase="dolor"] .cifras,[data-fase="como"] .pasos{margin-top:60px}
[data-fase="dia"]>div,[data-fase="dia"]>.conversacion{grid-column:2}
.cierre{text-align:center;margin-inline:auto}
}
/* Diseño: ajuste fluido para tablet; nunca se fuerza la escala de escritorio en celular. */
@media(max-width:1100px){.ancho{width:calc(100% - 64px)}.dos-columnas{gap:48px}.heading-lg{font-size:64px}.hero{grid-template-columns:1fr 1fr}h1{font-size:clamp(52px,5.1vw,74px)}.enlaces{gap:18px}.cabecera nav{gap:20px}}
/* Interacción: cuerpo 300 y blancos táctiles; diseño: margen de 16 px, constelación centrada. */
@media(max-width:768px){body{font-weight:300}.ancho{width:calc(100% - 32px)}.enlaces{display:none}.cabecera nav{height:80px;justify-content:space-between;gap:12px}.cabecera .cta{font-size:12px;padding-inline:16px}.marca{font-size:18px}.hero{display:flex;flex-direction:column;gap:24px;min-height:0;padding-top:0}.texto{width:100%}h1,.display{font-size:clamp(52px,10vw,76px);line-height:1.04}.heading-lg{font-size:clamp(42px,8vw,62px)}.heading-sm{font-size:36px}.dos-columnas{grid-template-columns:1fr;gap:36px}.seccion{margin-top:96px}.frente{min-height:85svh;padding-block:72px;gap:30px}.frente:nth-of-type(even) .frente-titulo,.frente:nth-of-type(even) .frente-detalle,.resultado:nth-of-type(even) h2,.resultado:nth-of-type(even) p{grid-column:auto;grid-row:auto}.numero{font-size:72px}.cifras{padding:0;gap:42px}.resultado{gap:18px}.cierre{padding-block:0}.acciones{gap:18px}footer{padding-top:96px}.pie-marca>span:last-child{line-height:2}footer nav{gap:24px}footer nav a{font-size:12px}}
@media(pointer:coarse){a,button{min-height:44px;min-width:44px}}
/* Interacción: reducción de movimiento dinámica, estados accesibles sin animación. */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}a:active,button:active{transform:none}}

@media(prefers-reduced-motion:reduce){section.entrada-pendiente{opacity:1;transform:none}}
/* Chat con Roberto (roberto.js). Un solo bloque; en celular ocupa toda la pantalla. */
.roberto{position:fixed;right:24px;bottom:24px;z-index:20;font-weight:300}
.roberto-abrir{border:0;cursor:pointer;margin-top:0;box-shadow:0 8px 30px rgba(128,82,255,.35)}
.roberto-panel[hidden],.roberto-abrir[hidden]{display:none}
.roberto-panel{width:min(400px,calc(100vw - 32px));height:min(600px,calc(100svh - 48px));display:flex;flex-direction:column;background:#0b0b0e;border:1px solid rgba(255,255,255,.12);border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.roberto-panel header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.roberto-panel header div{display:flex;flex-direction:column;line-height:1.3}
.roberto-panel header strong{font-weight:600;color:#fff;font-size:15px}
.roberto-panel header span{font-size:12px;color:var(--ceniza)}
.roberto-cerrar{background:none;border:0;color:var(--ceniza);font-size:26px;line-height:1;cursor:pointer;padding:6px 10px}
.roberto-mensajes{list-style:none;margin:0;padding:16px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.45}
.roberto-mensajes li{max-width:88%;padding:10px 14px;border-radius:16px;white-space:pre-wrap;overflow-wrap:anywhere}
.roberto-roberto{align-self:flex-start;background:rgba(255,255,255,.07);color:#fff;border-bottom-left-radius:4px}
.roberto-tu{align-self:flex-end;background:var(--violeta);color:#fff;border-bottom-right-radius:4px}
.roberto-pensando{color:var(--ceniza)}
.roberto-roberto a{color:var(--ambar);text-decoration:underline;display:inline}
.roberto-form{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.08)}
.roberto-form textarea{flex:1;resize:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;color:#fff;font:inherit;font-size:15px;padding:11px 14px;min-height:44px;max-height:120px}
.roberto-form textarea:focus{outline:2px solid var(--violeta);outline-offset:0;border-color:transparent}
.roberto-form button{width:44px;height:44px;align-self:flex-end;border:0;border-radius:50%;background:var(--violeta);color:#fff;font-size:20px;cursor:pointer}
.roberto-form button:disabled{opacity:.5;cursor:default}
@media(max-width:768px){.roberto{right:16px;bottom:16px}.roberto-panel{position:fixed;inset:0;width:100%;height:100%;border-radius:0;border:0}}

/* Copy v2: tarjetas por grupo y superficies que mantienen el contraste sobre el pulpo. */
.hero .texto{max-width:640px;background:rgba(0,0,0,.86);box-shadow:0 0 32px 20px rgba(0,0,0,.86);border-radius:24px}.hero .nota-hero{font-size:14px;line-height:1.5;max-width:410px;margin-top:12px}.hero .acciones{align-items:flex-start;gap:12px}.fantasma{min-height:44px}.cta.fantasma{background:transparent;border:1px solid rgba(255,255,255,.3);color:var(--gris)}.perfiles{max-width:none;text-align:left}.grupo-perfiles{margin-top:42px}.grupo-perfiles .etiqueta{margin-bottom:18px}.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.tarjeta{position:relative;display:flex;align-items:center;font:inherit;text-align:left;cursor:pointer;min-height:120px;padding:24px;color:#fff;transition:color 160ms var(--curva),background-color 160ms var(--curva),border-color 160ms var(--curva),transform 160ms var(--curva)}.tarjeta:active{transform:scale(.97)}.cierre-perfiles{margin-top:36px;max-width:680px}.cierre-perfiles .cta,.cierre-equipo .cta{margin-top:24px}.control{max-width:none;text-align:left}.control>div:first-child{max-width:850px}.control-puntos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:48px}.control-puntos h3{font-size:27px;line-height:1.2;margin-bottom:18px}.control-puntos>div{padding:24px}.control .prueba{margin-top:36px;max-width:850px}.precio{max-width:680px;margin:60px 0 0 auto}.precio p{margin-top:24px}

@media(min-width:769px) and (max-width:1100px){.hero{grid-template-columns:minmax(0,640px) 1fr;gap:36px}.hero .texto{width:100%}.tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}.control-puntos{gap:18px}.control-puntos>div{padding:18px}}
@media(max-width:768px){.tarjetas,.control-puntos{grid-template-columns:1fr}.tarjeta{min-height:96px}.hero .texto{box-shadow:0 0 16px 8px rgba(0,0,0,.86)}.control-puntos{gap:24px}.hero .nota-hero{max-width:100%}}
/* Hero v2: velo suave sin orilla (no caja) solo donde el pulpo queda detrás del texto; "Ver qué hace" junto a su botón. */
.hero .texto{background:none;box-shadow:none;border-radius:0;position:relative;isolation:isolate}.hero .acciones{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:24px}.hero .acciones>div{display:contents}.hero .acciones .nota-hero{grid-column:1/-1;grid-row:2;margin-top:4px}
.hero .texto::before{content:"";position:absolute;inset:-72px -96px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 45% 50%,rgba(5,7,11,.85) 0%,rgba(5,7,11,.7) 50%,rgba(5,7,11,0) 100%)}.hero .acciones .cta-hero{justify-self:start}.hero .acciones .nota-hero{contain:inline-size}
@media(max-width:768px){.hero .texto{box-shadow:none}.hero .texto::before{inset:-40px -16px}}

.tarjeta[aria-pressed="true"]{color:#fff}.tarjeta:focus-visible{outline:2px solid var(--violeta);outline-offset:5px}.instruccion-dolores{margin-top:18px}.contador-dolores{font-size:14px;color:var(--gris)}.contador-dolores:not(:empty){margin-top:24px}

/* Los textos flotan sobre negro; la sombra conserva la lectura sobre las partículas. */
body{background:#000}.hero,.seccion{text-shadow:0 0 18px #000,0 0 2px #000}.seccion{margin-top:144px}
.hero h1{font-size:clamp(64px,6.2vw,92px);line-height:1.02;letter-spacing:-.04em;font-weight:400;max-width:100%}.hero .texto{min-width:0}
.heading-lg{font-size:78px;line-height:1.1;letter-spacing:-.04em;font-weight:400}.heading-sm{font-size:42px;letter-spacing:-1.68px}
.perfiles .instruccion-dolores,.cierre p,.precio p{margin-top:48px}.introduccion{margin-bottom:48px}.dos-columnas{column-gap:60px}.frente{column-gap:12%}
/* Cada opción es un renglón estable con un círculo de selección de 24 px. */
.tarjetas{grid-template-columns:1fr;gap:24px 48px}.tarjeta{min-height:44px;padding:10px 0;gap:18px;border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none;font:400 24px/1.25 Inter,sans-serif;letter-spacing:-.48px;color:#bdbdbd;transition:color 160ms var(--curva);align-items:flex-start}.tarjeta:active{transform:none}
.tarjeta::before{content:"";box-sizing:border-box;flex:0 0 24px;width:24px;height:24px;margin-top:3px;border:1px solid #9a9a9a;border-radius:50%;background:transparent;color:transparent;display:grid;place-items:center;font-size:17px;line-height:1;letter-spacing:0;text-shadow:none;transition:background-color 160ms var(--curva),border-color 160ms var(--curva),color 160ms var(--curva)}
.tarjeta[aria-pressed="true"]{color:#fff}.tarjeta[aria-pressed="true"]::before{content:"✓";background:#8052ff;border-color:#8052ff;color:#fff}.tarjeta:focus-visible{outline:2px solid #8052ff;outline-offset:5px}
@media(hover:hover){.tarjeta:hover{color:#fff}}
.control-puntos>div{padding:0;border:0;border-radius:0;background:none;box-shadow:none}.control-puntos h3{font-size:27px;line-height:1;font-weight:400}
/* Las cifras comparten el contador existente y se leen sin contenedores. */
.cifras-fila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}.cifras-franja .contador{display:block;font-size:113px;line-height:1.1;font-weight:400;letter-spacing:-.04em;color:#fff}.cifras-fila p{font-size:15px;font-weight:400;line-height:1.5;color:#9a9a9a;margin-top:18px}.cifras-nota{font-size:14px;font-weight:400;color:#9a9a9a;margin-top:48px}
@media(min-width:1100px){.tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:769px){.perfiles,.control{max-width:none;text-align:left}.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}}
@media(max-width:1100px){.heading-lg{font-size:64px}}
@media(max-width:768px){body{font-weight:300}.seccion{margin-top:96px}.heading-lg{font-size:clamp(40px,9vw,56px)}.dos-columnas{gap:48px}.frente{gap:48px}.control-puntos{grid-template-columns:1fr;gap:48px}.cifras-fila{grid-template-columns:1fr;gap:48px}.cifras-franja .contador{font-size:72px}}
/* Tarjetas de "¿Cuáles de estos te pasan?" con su caja (pedido del jefe 2026-09-24: así no se pierden sobre el pulpo). */
.perfiles .tarjetas{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:none}
.perfiles .tarjeta{min-height:120px;padding:24px;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:18px;line-height:1.4;letter-spacing:0;text-shadow:none}
.perfiles .tarjeta[aria-pressed="true"]{border-color:var(--violeta);background:rgba(128,82,255,.22);color:#fff}
@media(hover:hover){.perfiles .tarjeta:hover{border-color:rgba(255,255,255,.45)}}
@media(max-width:1100px){.perfiles .tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){.perfiles .tarjetas{grid-template-columns:1fr}.perfiles .tarjeta{min-height:96px}}
/* Texto que se perdía sobre la animación (pedido del jefe 2026-09-24): mismas cajas semitransparentes que las tarjetas. */
.pasos li{padding:24px;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:none}
.pasos{display:grid;gap:18px}
.cierre-equipo{padding:24px;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:none}
/* Plática "Un martes cualquiera" en globos semitransparentes para que no se pierda sobre la animación. */
.conversacion{display:flex;flex-direction:column;gap:12px}
.conversacion li{max-width:88%;padding:16px 20px;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:none}
.conversacion li.director{align-self:flex-start;border-bottom-left-radius:6px}
.conversacion li.dueno{align-self:flex-end;border-color:rgba(128,82,255,.55);background:rgba(128,82,255,.22);border-bottom-right-radius:6px}
/* Chat de verdad (pedido del jefe 2026-09-24): ventana con encabezado, globos juntos, hora dentro del globo y palomitas en tus mensajes. */
.conversacion{position:relative;gap:6px;padding:64px 18px 22px;border:1px solid rgba(255,255,255,.14);border-radius:28px;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);max-width:560px}
.conversacion::before{content:"Roberto · en línea";position:absolute;top:0;left:0;right:0;padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px;font-weight:600;color:#fff;border-radius:28px 28px 0 0;background:rgba(128,82,255,.18)}
.conversacion li{display:flex;flex-direction:column;max-width:82%;padding:10px 14px 8px;border:0;border-radius:18px;font-size:16px;line-height:1.4;background:rgba(255,255,255,.1);backdrop-filter:none;-webkit-backdrop-filter:none}
.conversacion li.director{border-bottom-left-radius:4px}
.conversacion li.dueno{background:rgba(128,82,255,.55);border:0;border-bottom-right-radius:4px}
.conversacion li+li.director,.conversacion li+li.dueno{margin-top:2px}
.conversacion li.director+li.dueno,.conversacion li.dueno+li.director{margin-top:12px}
.conversacion .hora{order:2;align-self:flex-end;margin:4px 0 0;font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.55)}
.conversacion li.dueno .hora::after{content:" ✓✓";color:#7fe3ff}

/* Respaldo independiente de WebGL: las cajas se quedan quietas en celular y con movimiento reducido. */
@media(max-width:768px),(prefers-reduced-motion:reduce){.control-puntos>div{padding:24px;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}