/* =====================================================================
   CÓMO TRABAJO — como-trabajo.html
   Se carga ADEMÁS de styles.css (tokens, header, botones, footer, reveal,
   banner de cookies). Idea visual de la página: un ASCENSO (escalera
   caracol en el hero que se arma alrededor de una columna de luz, riel de luz
   que se llena con el scroll, torre que se construye nivel por nivel).

   ÍNDICE
   1. Base de la página (superficie compartida de tarjetas, sello)
   2. Botones (el estilo ahora vive en styles.css, secciones 19-20)
   3. Hero (título, CTA, escalera caracol)
   4. El recorrido: layout, índice fijo compacto + navegador del recorrido
      (desktop), barra fija (mobile)
   5. Riel de luz, nodos y tarjetas de etapa
   6. Bloques internos (pago 50/50, rondas, entrega, mantenimiento)
   7. Compromisos (bento), después del recorrido
   8. Cierre
   9. Entradas/salidas atadas al scroll
   10. Breakpoints
   11. Reduced motion
   ===================================================================== */

/* =====================================================================
   1. BASE
   ===================================================================== */
/* Igual que en las páginas legales: con overflow-x:hidden (styles.css)
   <body> se vuelve un contenedor de scroll propio y position:sticky deja
   de funcionar (índice lateral y barra mobile). "clip" recorta igual sin
   crear ese contenedor. */
body.ct-page{overflow-x:clip;}

.ct-page{
    /* Grano fino propio de las tarjetas (además del grain global) */
    --ct-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    /* Marca de "incluido": un trazo propio (pata corta, pata larga y fina)
       usado como máscara, en vez del tilde tipográfico */
    --ct-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.6l2.6 2.5L12.2 5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ct-radius:18px;
    /* Todo el texto de la página en blanco (legibilidad); los grises solo
       quedan para los chips de etapa y los títulos de etapas aún no recorridas */
    --gray-soft:var(--white);
    --gray-mid:var(--white);
}

/* Superficie compartida (etapas y compromisos): borde degradado real
   (padding-box / border-box), grano, un foco de luz que sigue al mouse
   (--mx/--my desde como-trabajo.js) y sombra profunda. */
.ct-surface{
    position:relative;
    border:1px solid transparent;
    border-radius:var(--ct-radius);
    background:
        var(--ct-noise) padding-box,
        radial-gradient(380px circle at var(--mx,-600px) var(--my,-600px), rgba(91,141,255,.11), transparent 62%) padding-box,
        radial-gradient(120% 80% at 0% 0%, rgba(47,111,237,.07), transparent 55%) padding-box,
        linear-gradient(180deg,#131319 0%,#0d0d12 100%) padding-box,
        linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 38%,rgba(255,255,255,.02) 62%,rgba(91,141,255,.16)) border-box;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 1px 0 rgba(0,0,0,.4),
        0 26px 50px -30px rgba(0,0,0,.85);
}

/* Sello de "incluido": aro con degradado cónico + trazo que se dibuja
   (clip-path) cuando el contenedor recibe .show. Se usa en ::before
   (aro) y ::after (trazo) de cada ítem. */
.ct-seal-host{position:relative;}
.ct-seal-host::before{
    content:'';
    position:absolute;
    width:18px;height:18px;
    border-radius:50%;
    background:
        radial-gradient(circle,#0e1017 0 58%,transparent 61%),
        conic-gradient(from 210deg,var(--accent-hot),var(--wave-teal),#eafffb,var(--accent-hot));
    box-shadow:0 0 14px -2px rgba(31,201,195,.45);
}
.ct-seal-host::after{
    content:'';
    position:absolute;
    width:18px;height:18px;
    background:linear-gradient(135deg,#eafffb,var(--wave-teal));
    -webkit-mask:var(--ct-mark) center / 14px 14px no-repeat;
    mask:var(--ct-mark) center / 14px 14px no-repeat;
    clip-path:inset(0 0 0 0);
}
.ct-js .ct-seal-host::after{clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--ease-out-expo);}
.ct-js .ct-seal-host::before{transform:scale(.6);opacity:0;transition:transform .7s var(--ease-out-expo), opacity .5s ease;}
.ct-js .show .ct-seal-host::after{clip-path:inset(0 0 0 0);}
.ct-js .show .ct-seal-host::before{transform:none;opacity:1;}

/* =====================================================================
   2. BOTONES
   El estilo de filetes que nació en esta página ahora es el botón por
   defecto de todo el sitio: vive en styles.css (secciones 19 y 20, junto
   con el separador vertical .btn-sep). Acá sólo queda su layout.
   ===================================================================== */

/* =====================================================================
   3. HERO
   ===================================================================== */
/* Una sola pantalla. Mobile: título, texto y botón, debajo la escalera y
   al final los tres datos. Desktop (>=1024px): texto y datos a la
   izquierda, escalera a la derecha. --ct-hdr = alto del navbar fijo. */
.ct-hero{
    --ct-hdr:68px;
    position:relative;
    box-sizing:border-box;
    min-height:100vh;
    min-height:100svh;
    padding:calc(var(--ct-hdr) + 28px) 0 32px;
    display:flex;flex-direction:column;justify-content:center;
    isolation:isolate;
    --aura-x:50%;--aura-y:66%;
}
/* Fondo del hero: luz muy suave con los colores de la web detrás de la
   escalera, acompañando su subida (azul abajo a la izquierda, teal arriba
   a la derecha), una banda tipo vía láctea en el mismo sentido y estrellas
   finitas alrededor. Todo estático en reposo (sin loops, sin costo de
   GPU). Entra con la escalera: cuando el JS le pone .is-live a .ct-cs,
   cada capa aparece en el momento de la escalera que le corresponde
   (tiempos del bloque "CARACOL" de como-trabajo.js: cámara 0.4 s (la banda arranca a 0.3 s, apenas antes),
   escalones desde 0.8 s, la luz sube de 2.5 a 6.1 s, cima 5.85 s).
   --aura-x/y = centro de la escalera. */
.ct-hero-aura{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.ct-hero-aura > *{position:absolute;inset:0;}
.ct-aura-glow{
    background:
        radial-gradient(ellipse 30% 26% at calc(var(--aura-x) - 9%) calc(var(--aura-y) + 12%), rgba(47,111,237,.09), transparent 70%),
        radial-gradient(ellipse 42% 38% at var(--aura-x) var(--aura-y), rgba(91,141,255,.035), transparent 72%);
}
.ct-aura-top{background:radial-gradient(ellipse 26% 24% at calc(var(--aura-x) + 9%) calc(var(--aura-y) - 14%), rgba(31,201,195,.065), transparent 70%);}
/* Banda tipo vía láctea: cruza la escalera en diagonal, en el sentido de
   la subida. Tres capas, todo CSS (sin imágenes, cero bytes extra):
   .mw-glow = nubes de luz irregulares (elipses superpuestas azul/teal/
   blanco), .mw-dust = polvo de estrellas (assets/img/ct-estrellas.svg,
   distribución fractal: grumos y huecos a todas las escalas, nunca una
   trama; lo genera docs/superpowers/tools/ct-stars.py) concentrado en el
   centro de la banda, .mw-lane = la franja de polvo oscuro que parte la banda. Las
   puntas se desvanecen con máscara. */
.ct-aura-band{
    inset:auto;
    left:calc(var(--aura-x) - 34%);top:var(--aura-y);
    width:68%;height:min(28vh,230px);margin-top:calc(min(28vh,230px) / -2);
    transform:rotate(-24deg);
    -webkit-mask:linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent);
    mask:linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent);
}
.ct-aura-band i{position:absolute;inset:0;}
.mw-glow{
    background:
        radial-gradient(ellipse 16% 22% at 30% 52%, rgba(205,225,255,.07), transparent 70%),
        radial-gradient(ellipse 12% 16% at 47% 46%, rgba(235,245,255,.075), transparent 70%),
        radial-gradient(ellipse 18% 20% at 62% 55%, rgba(160,240,235,.06), transparent 70%),
        radial-gradient(ellipse 10% 14% at 76% 47%, rgba(31,201,195,.055), transparent 70%),
        radial-gradient(ellipse 50% 34% at 50% 50%, rgba(91,141,255,.06), transparent 72%),
        linear-gradient(180deg, transparent 18%, rgba(91,141,255,.025) 40%, rgba(170,220,240,.04) 50%, rgba(31,201,195,.025) 60%, transparent 82%);
}
.mw-dust{
    background:url(../img/ct-estrellas.svg?v=1) center / cover no-repeat;
    -webkit-mask:radial-gradient(ellipse 50% 46% at 50% 50%, #000 20%, transparent 100%);
    mask:radial-gradient(ellipse 50% 46% at 50% 50%, #000 20%, transparent 100%);
    opacity:.8;
}
.mw-lane{
    background:
        radial-gradient(ellipse 22% 5% at 40% 53%, rgba(8,9,12,.5), transparent 75%),
        radial-gradient(ellipse 16% 4% at 63% 50%, rgba(8,9,12,.4), transparent 75%);
}
/* Estrellas: dos capas de puntitos de 1-1.5px, más densas cerca de la
   escalera (máscara radial) y casi nada debajo del texto */
.ct-aura-stars{
    -webkit-mask:radial-gradient(ellipse 55% 60% at var(--aura-x) var(--aura-y), #000 30%, transparent 100%);
    mask:radial-gradient(ellipse 55% 60% at var(--aura-x) var(--aura-y), #000 30%, transparent 100%);
}
.ct-aura-s1{background:
        radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.55), transparent),
        radial-gradient(1px 1px at 27% 8%, rgba(255,255,255,.32), transparent),
        radial-gradient(1.2px 1.2px at 41% 24%, rgba(170,200,255,.5), transparent),
        radial-gradient(1.5px 1.5px at 58% 12%, rgba(255,255,255,.55), transparent),
        radial-gradient(1px 1px at 73% 30%, rgba(255,255,255,.32), transparent),
        radial-gradient(1.3px 1.3px at 88% 16%, rgba(160,240,235,.5), transparent),
        radial-gradient(1px 1px at 95% 42%, rgba(255,255,255,.32), transparent),
        radial-gradient(1px 1px at 8% 48%, rgba(255,255,255,.32), transparent),
        radial-gradient(1.3px 1.3px at 34% 58%, rgba(255,255,255,.55), transparent),
        radial-gradient(1px 1px at 62% 46%, rgba(160,240,235,.5), transparent),
        radial-gradient(1.4px 1.4px at 80% 64%, rgba(255,255,255,.32), transparent),
        radial-gradient(1.2px 1.2px at 18% 80%, rgba(170,200,255,.5), transparent),
        radial-gradient(1px 1px at 48% 86%, rgba(255,255,255,.32), transparent),
        radial-gradient(1.3px 1.3px at 92% 82%, rgba(255,255,255,.55), transparent);}
.ct-aura-s2{background:
        radial-gradient(1px 1px at 20% 32%, rgba(255,255,255,.32), transparent),
        radial-gradient(1.2px 1.2px at 36% 14%, rgba(160,240,235,.5), transparent),
        radial-gradient(1px 1px at 52% 34%, rgba(255,255,255,.55), transparent),
        radial-gradient(1.2px 1.2px at 67% 20%, rgba(255,255,255,.32), transparent),
        radial-gradient(1px 1px at 84% 40%, rgba(170,200,255,.5), transparent),
        radial-gradient(1.2px 1.2px at 6% 66%, rgba(255,255,255,.32), transparent),
        radial-gradient(1px 1px at 44% 70%, rgba(160,240,235,.5), transparent),
        radial-gradient(1.2px 1.2px at 70% 78%, rgba(255,255,255,.32), transparent),
        radial-gradient(1px 1px at 97% 60%, rgba(255,255,255,.55), transparent),
        radial-gradient(1px 1px at 28% 94%, rgba(255,255,255,.32), transparent);}
@media (max-width:1023px){
    .ct-aura-band{left:-14%;width:128%;}
}
/* Entrada (fill:both = queda en su estado final, sin quedar corriendo).
   Sin JS se ve todo; con JS se oculta hasta que la escalera arranca, con
   el mismo failsafe de 4 s que la escalera. */
.ct-js .ct-hero-aura > *{opacity:0;animation:ctAuraShow 0s 4s forwards;}
.ct-js .ct-hero:has(.ct-cs.is-static) .ct-hero-aura > *{opacity:1;animation:none;}
/* Mientras la escalera espera a verse (mobile: queda después de la primera
   pantalla) el fondo también espera, oculto y sin failsafe. Antes se
   mostraba entero acá y, al arrancar la escalera, su entrada lo llevaba a
   opacidad 0 y lo volvía a prender: con scroll rápido se veía aparecer,
   desaparecer y reaparecer. */
.ct-js .ct-hero:not(.ct-aura-on):has(.ct-cs.is-wait:not(.is-live)) .ct-hero-aura > *{opacity:0;animation:none;}
/* El fondo no espera a la escalera: apenas la página y el polvo de
   estrellas están listos el JS pone .ct-aura-on y el fondo arranca solo
   (la escalera sigue esperando su 65% visible). Son las mismas animaciones
   que con .is-live, con el mismo nombre: cuando la escalera arranca no se
   reinician. La luz de la cima (.ct-aura-top) sigue atada a la escalera. */
.ct-js .ct-hero:has(.ct-cs.is-wait:not(.is-live)) .ct-aura-top{opacity:0;animation:none;}
.ct-js .ct-hero:is(.ct-aura-on, :has(.ct-cs.is-live)) .ct-aura-glow{animation:ctAuraGlow 2.6s cubic-bezier(.16,1,.3,1) .4s both;}
.ct-js .ct-hero:is(.ct-aura-on, :has(.ct-cs.is-live)) .ct-aura-s1{animation:ctAuraFade 2.2s ease-out 1s both;}
.ct-js .ct-hero:is(.ct-aura-on, :has(.ct-cs.is-live)) .ct-aura-s2{animation:ctAuraFade 2.2s ease-out 2.4s both;}
.ct-js .ct-hero:is(.ct-aura-on, :has(.ct-cs.is-live)) .ct-aura-band{animation:ctAuraBand 3s cubic-bezier(.16,1,.3,1) .3s both;}
.ct-js .ct-hero:has(.ct-cs.is-live) .ct-aura-top{animation:ctAuraGlow 2.2s cubic-bezier(.16,1,.3,1) 5.6s both;}
/* Mobile: misma entrada de siempre (mismas curvas y orden), pero arranca
   un poco antes y su primer tramo es algo más rápido */
@media (max-width:1023px){
    .ct-js .ct-hero:is(.ct-aura-on, :has(.ct-cs.is-live)) .ct-aura-glow{animation-duration:2.2s;animation-delay:.15s;}
    .ct-js .ct-hero:is(.ct-aura-on, :has(.ct-cs.is-live)) .ct-aura-s1{animation-duration:2s;animation-delay:.6s;}
    .ct-js .ct-hero:is(.ct-aura-on, :has(.ct-cs.is-live)) .ct-aura-s2{animation-duration:2s;animation-delay:1.8s;}
    .ct-js .ct-hero:is(.ct-aura-on, :has(.ct-cs.is-live)) .ct-aura-band{animation-duration:2.4s;animation-delay:.1s;}
}
@keyframes ctAuraShow{to{opacity:1;}}
@keyframes ctAuraFade{from{opacity:0;}to{opacity:1;}}
@keyframes ctAuraGlow{from{opacity:0;transform:scale(.86);}to{opacity:1;transform:none;}}
/* La banda aparece deslizándose apenas desde abajo a la izquierda, en el
   sentido de la subida; arranca 0.1 s antes que la cámara de la escalera */
@keyframes ctAuraBand{
    from{opacity:0;transform:rotate(-24deg) translateX(-7%) scale(.94);}
    to{opacity:1;transform:rotate(-24deg);}
}
.ct-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:26px;}
.ct-hero-copy{
    display:flex;flex-direction:column;align-items:center;
    text-align:center;
}
/* .ct-cs es contenedor de tamaño: el marco necesita alto definido */
.ct-cs-frame{
    position:relative;
    height:clamp(220px, 36svh, 360px);
}
/* Tres datos bajo una línea fina que se desvanece a los costados */
.ct-hero-facts{
    position:relative;
    list-style:none;margin:0;padding:18px 0 0;
    display:grid;grid-template-columns:minmax(0,1fr);gap:12px;
    text-align:center;
}
.ct-hero-facts::before{
    content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.16) 20%, rgba(255,255,255,.16) 80%, transparent);
}
.ct-hero-facts strong{
    display:block;
    font-family:var(--font-display);font-style:italic;font-weight:400;
    font-size:1.12rem;line-height:1.35;color:var(--white);
}
.ct-hero-facts strong{font-family:inherit;font-style:normal;font-weight:800;letter-spacing:-.02em;line-height:1.3;}
.ct-hero-facts li > span{display:block;margin-top:2px;font-size:.84rem;line-height:1.35;color:rgba(247,247,249,.68);}

/* Entrada en cascada al cargar (--d) */
.ct-in{
    opacity:0;
    animation:ctUp 1s var(--ease-out-expo) both;
    animation-delay:calc(var(--d,0) * 90ms + 120ms);
}
@keyframes ctUp{
    from{opacity:0;transform:translateY(22px);}
    to{opacity:1;transform:none;}
}

/* Título: entra con el mismo ascenso suave que el resto del hero (el
   pintado con luz se probó acá y era demasiado: quedó para los títulos de
   sección). La primera frase es blanca; la segunda lleva el tratamiento
   .duo del inicio (gradiente azul → teal con brillo y luz, section 21 de
   styles.css), que le da el protagonismo. */
.ct-title{
    font-size:clamp(2.6rem,11vw,4.8rem);
    line-height:1.05;
    letter-spacing:-.035em;
    margin:0 0 20px;
    color:var(--white);
    animation:none;
}
/* Entrada del título: cada frase se destapa de abajo hacia arriba (la
   máscara se abre mientras sube y se enfoca), la segunda un instante
   después. Sólo transform/opacity/filter/clip-path y una sola vez
   (backwards: al terminar no queda ninguna animación activa). La del
   acento suma el brillo .duo que ya tenía, porque `animation` lo pisaría. */
@keyframes ctTitleLine{
    from{opacity:0;transform:translateY(.55em);filter:blur(14px);clip-path:inset(0 0 100% 0);}
    60%{opacity:1;}
    to{opacity:1;transform:none;filter:blur(0);clip-path:inset(-.2em -.1em -.2em -.1em);}
}
.ct-title .ct-line{
    padding-bottom:.22em;margin-bottom:-.22em;
    animation:ctTitleLine 1.35s var(--ease-out-expo) backwards;
    animation-delay:calc(var(--d,1) * 260ms - 120ms);
}
.ct-title.duo .text-accent.ct-line{
    animation:ctTitleLine 1.35s var(--ease-out-expo) backwards, duoShimmer 7s steps(4,end) infinite;
    animation-delay:calc(var(--d,1) * 260ms - 120ms), 1.6s;
}
/* El degradado se mide contra la caja del texto, no contra todo el ancho */
.ct-title .text-accent.ct-line{width:fit-content;max-width:100%;margin-inline:auto;}
/* Brillos que recorren un texto recortado (background-clip:text): mover
   el degradado obliga a repintar el texto en cada cuadro y no hay forma de
   hacerlo sólo con la GPU. Mismo recorrido y misma curva (ease-in-out,
   muestreada cada 2.5% del ciclo), pero con timing steps(): se actualiza
   ~20 veces por segundo. En un degradado suave no se nota la diferencia y
   el costo de GPU baja ~65% (medido: era lo que más cargaba la página). */
@keyframes ctShimmer{
    0%{background-position:0% 0;}
    2.5%{background-position:0.48% 0;}
    5%{background-position:1.97% 0;}
    7.5%{background-position:4.52% 0;}
    10%{background-position:8.17% 0;}
    12.5%{background-position:12.92% 0;}
    15%{background-position:18.74% 0;}
    17.5%{background-position:25.55% 0;}
    20%{background-position:33.19% 0;}
    22.5%{background-position:41.43% 0;}
    25%{background-position:50% 0;}
    27.5%{background-position:58.57% 0;}
    30%{background-position:66.81% 0;}
    32.5%{background-position:74.45% 0;}
    35%{background-position:81.26% 0;}
    37.5%{background-position:87.08% 0;}
    40%{background-position:91.83% 0;}
    42.5%{background-position:95.48% 0;}
    45%{background-position:98.03% 0;}
    47.5%{background-position:99.52% 0;}
    50%{background-position:100% 0;}
    52.5%{background-position:99.52% 0;}
    55%{background-position:98.03% 0;}
    57.5%{background-position:95.48% 0;}
    60%{background-position:91.83% 0;}
    62.5%{background-position:87.08% 0;}
    65%{background-position:81.26% 0;}
    67.5%{background-position:74.45% 0;}
    70%{background-position:66.81% 0;}
    72.5%{background-position:58.57% 0;}
    75%{background-position:50% 0;}
    77.5%{background-position:41.43% 0;}
    80%{background-position:33.19% 0;}
    82.5%{background-position:25.55% 0;}
    85%{background-position:18.74% 0;}
    87.5%{background-position:12.92% 0;}
    90%{background-position:8.17% 0;}
    92.5%{background-position:4.52% 0;}
    95%{background-position:1.97% 0;}
    97.5%{background-position:0.48% 0;}
    100%{background-position:0% 0;}
}

/* ---------- Títulos que se pintan ----------
   El título del hero (al cargar) y los de sección (al entrar en pantalla)
   se escriben con luz, como "Axel Javier Salomon" en sobre-mi: primero
   solo el contorno, en su lugar y a su tamaño, y el relleno avanza de
   izquierda a derecha, renglón por renglón, con un cabezal de luz en el
   borde. Lógica en como-trabajo.js ("TÍTULOS QUE SE PINTAN").
   - Contorno: el propio título con relleno transparente, trazo fino y un
     halo suave (text-shadow del glifo). Estático: se pinta una vez.
   - Relleno: .pt-fill (aria-hidden) es una copia del texto armada por
     renglón visual, encima del contorno. Cada renglón es una ventana
     (.pt-win, recorte en x y borde suave) que se corre a la izquierda
     mientras su texto (.pt-txt) se corre a la derecha lo mismo: el texto
     queda quieto y lo que avanza es el borde. Solo transform.
   - Al terminar se saca el contorno (el título real ya está relleno, en
     el mismo lugar) y la copia se funde y se va. */
.pt-outline{
    position:relative;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:calc(.55px + .012em) rgba(226,234,255,.5);
    text-shadow:0 0 .4em rgba(91,141,255,.28);
}
.pt-outline .duo-a{text-shadow:inherit;}
.pt-outline .text-accent{
    background:none;
    filter:none;
    animation:none;
    -webkit-text-stroke-color:rgba(64,214,206,.7);
    text-shadow:0 0 .4em rgba(32,201,193,.3);
}
/* El sable bajo los títulos de sección se enciende cuando termina el
   relleno (al quitar .pt-outline; ver styles.css). */

.pt-fill{position:absolute;inset:0;pointer-events:none;z-index:1;}
.pt-line{
    position:absolute;display:block;white-space:nowrap;
    -webkit-text-fill-color:currentColor;
    -webkit-text-stroke-width:0;
    text-shadow:none;
}
/* Ventana del relleno: borde de avance suave (.35em, FEATHER en el JS) y
   aire arriba/abajo para que la máscara no corte acentos ni descendentes. */
.pt-win{
    display:block;
    padding:.3em .45em .3em 0;margin:-.3em 0;
    overflow:clip;
    -webkit-mask-image:linear-gradient(to left,transparent,#000 .35em);
    mask-image:linear-gradient(to left,transparent,#000 .35em);
}
.pt-txt{display:inline-block;will-change:transform;}
.pt-acc{
    background:linear-gradient(100deg,var(--accent-hot) 0%,var(--wave-teal) 60%,var(--accent-hot) 100%);
    background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
}
/* Cabezal de luz: viaja con el borde del relleno (degradado fijo, sin
   filter: solo se traslada y se apaga, en el compositor). */
.pt-head{
    position:absolute;top:0;bottom:0;left:0;z-index:2;
    width:.5em;opacity:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(91,141,255,0),rgba(91,141,255,.28) 32%,rgba(234,255,251,.95) 50%,rgba(32,201,193,.28) 68%,rgba(32,201,193,0));
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
    mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
    will-change:transform,opacity;
}
@media (prefers-reduced-motion: reduce){
    .pt-outline{-webkit-text-fill-color:initial;-webkit-text-stroke-width:0;text-shadow:none;}
    .pt-fill{display:none;}
}

.ct-lead{font-size:.98rem;line-height:1.72;max-width:520px;color:var(--white);}
.ct-hero-cta{
    display:flex;
    flex-direction:column;
    align-items:center;justify-content:center;
    gap:22px;
    margin-top:32px;
}
.ct-hero-cta .btn{width:100%;}
/* ---------- Escalera caracol ----------
   Geometría en em: el escenario mide --k-w x --k-h em (justo lo que ocupa
   la escalera dibujada, rótulos incluidos) y su font-size es el mayor que
   entra en el marco a lo ancho y a lo alto (cqi/cqb), así la escalera
   escala entera sin JS y nunca se corta. Ángulo de cada escalón: --phi (0 = de frente a cámara,
   positivo = derecha). Posiciones con sin()/cos() de CSS. Los --k-* son
   números sin unidad que también lee el JS (bloque "CARACOL"): una sola
   fuente de verdad para la geometría.
   Regla: nada de opacity/filter en la cadena preserve-3d (aplana el 3D);
   la opacidad va siempre en las hojas. */
.ct-cs{
    /* Abanico de izquierda a derecha (geometría original del preview
       b2-caracol). --k-w/--k-h = escenario en em, --k-cx/--k-cy = pie de la
       columna, --k-py = altura del ojo. */
    --k-phi0:-68; --k-dphi:23; --k-tilt:24; --k-spin:-2;
    --k-r:25.7; --k-step:6.5;
    /* Radio de la luz: por dentro del borde de las huellas, pasa por
       detrás de sus esquinas (trayectoria en railAt, como-trabajo.js) */
    --k-rail:20;
    --k-w:60; --k-h:46; --k-cx:31; --k-cy:41.5; --k-py:19.5;
    --tilt:calc(var(--k-tilt) * 1deg);
    --spin:calc(var(--k-spin) * 1deg);
    position:relative;
    width:100%;
    height:100%;
    container-type:size;
    display:grid;
    place-items:center;
}
.ct-cs-defs{position:absolute;width:0;height:0;overflow:hidden;}
.ct-cs-stage{
    position:relative;
    font-size:min(100cqi / var(--k-w), 100cqb / var(--k-h));
    width:calc(var(--k-w) * 1em);
    height:calc(var(--k-h) * 1em);
    perspective:128em;
    perspective-origin:calc(var(--k-cx) * 1em) calc(var(--k-py) * 1em);
}
.ct-cs-cam, .ct-cs-spin, .ct-cs-step, .ct-cs-slab, .ct-cs-lbl, .ct-cs-unspin, .ct-cs-untilt{
    position:absolute;left:0;top:0;transform-style:preserve-3d;
}
.ct-cs-cam{left:calc(var(--k-cx) * 1em);top:calc(var(--k-cy) * 1em);transform:rotateX(var(--tilt));}
.ct-cs-spin{transform:rotateY(var(--spin));}
.ct-cs-step{
    --phi:calc((var(--k-phi0) + var(--i) * var(--k-dphi)) * 1deg);
    --y:calc(var(--i) * var(--k-step) * -1em);
    --r:calc(var(--k-r) * 1em);
}
/* Huella: cuña horizontal con el vértice en la columna */
.ct-cs-tread{
    position:absolute;left:0;top:0;
    width:25.7em;height:16.3em;margin-top:-8.15em;
    transform-origin:0 50%;
    transform:translate3d(0,var(--y),0) rotateY(calc(var(--phi) - 90deg)) rotateX(90deg);
}
.ct-cs-tread svg{display:block;width:100%;height:100%;overflow:visible;}
/* Huella encendida: la misma cuña apenas por encima; se funde con opacidad */
.ct-cs-tread-lit{
    transform:translate3d(0,calc(var(--y) - .03em),0) rotateY(calc(var(--phi) - 90deg)) rotateX(90deg);
    opacity:.45;
}
.ct-cs-step--top .ct-cs-tread-lit{opacity:1;}
/* Volumen del escalón: base y tres paredes (la cuarta es .ct-cs-riser).
   .ct-cs-slab repite el marco de la huella, así las paredes se ubican en
   coordenadas de la cuña (em = viewBox 300x190 * .0857). */
.ct-cs-base{transform:translate3d(0,calc(var(--y) + 1.7em),0) rotateY(calc(var(--phi) - 90deg)) rotateX(90deg);}
.ct-cs-slab{
    position:absolute;left:0;top:0;
    width:25.7em;height:16.3em;margin-top:-8.15em;
    transform-origin:0 50%;
    transform:translate3d(0,var(--y),0) rotateY(calc(var(--phi) - 90deg)) rotateX(90deg);
}
.ct-cs-wall{
    position:absolute;display:block;height:1.7em;transform-origin:0 0;
    /* Opaca (gradiente sobre fondo sólido): la luz pasa por detrás de los
       escalones y no debe transparentarse a través de su cuerpo */
    background:linear-gradient(180deg, rgba(205,214,232,.2), rgba(15,17,24,.94)), #0d0f15;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.ct-cs-w-ab{left:4.283em;top:7.036em;width:22.54em;transform:rotateZ(-18.18deg) rotateX(-90deg);}
.ct-cs-w-dc{left:4.283em;top:9.266em;width:22.54em;transform:rotateZ(18.18deg) rotateX(-90deg);}
.ct-cs-w-da{left:4.283em;top:7.036em;width:2.23em;transform:rotateZ(90deg) rotateX(-90deg);}
/* Canto exterior del escalón, mirando hacia afuera */
.ct-cs-riser{
    position:absolute;left:0;top:0;
    width:16.3em;height:1.7em;margin-left:-8.15em;border-radius:.25em;
    background:linear-gradient(180deg, rgba(222,229,242,.16), rgba(14,16,22,.7)), #0d0f15;
    transform:translate3d(calc(sin(var(--phi)) * var(--r)), var(--y), calc(cos(var(--phi)) * var(--r))) rotateY(var(--phi));
}
.ct-cs-riser i{position:absolute;inset:0;border-radius:inherit;opacity:.22;background:linear-gradient(90deg, rgba(235,241,250,.7), rgba(150,226,220,.7));}
/* El acento de color queda sólo en el último escalón */
.ct-cs-step--top .ct-cs-riser i{background:linear-gradient(90deg, var(--accent), var(--wave-teal));}
/* Vidrio neutro (antes azul saturado): pisa los fill/stroke del SVG */
.ct-cs-tread polygon{stroke:rgba(255,255,255,.2);}
.ct-cs-tread-lit polygon{stroke:rgba(236,242,252,.55);}
.ct-cs-step--top .ct-cs-tread-lit polygon{stroke:rgba(150,232,226,.85);}
.ct-cs-base polygon{fill:#0d0f15;stroke:rgba(255,255,255,.07);}
.ct-cs-step--top .ct-cs-riser i{opacity:1;}
/* Rótulo: parado sobre el escalón y siempre de frente (contrarrota giro e inclinación) */
.ct-cs-lbl{
    --lr:calc(var(--r) * .86);
    --ly:2.4em;
    transform:translate3d(calc(sin(var(--phi)) * var(--lr)), calc(var(--y) - var(--ly)), calc(cos(var(--phi)) * var(--lr)));
}
/* El de arriba va más hacia cámara: a .86 la huella lo cortaba ("Manten|imiento") */
.ct-cs-step--top .ct-cs-lbl{--lr:calc(var(--r) * .9);--ly:4.46em;}
/* El primero también queda rozado por la esquina de su propio escalón, como los demás */
.ct-cs-spin > .ct-cs-step:first-child .ct-cs-lbl{--ly:1.5em;}
.ct-cs-unspin{transform:rotateY(calc(var(--spin) * -1));}
.ct-cs-untilt{transform:rotateX(calc(var(--tilt) * -1));}
.ct-cs-nm{
    position:absolute;left:0;bottom:0;
    transform:translateX(-50%);
    white-space:nowrap;
    font-size:max(2.14em, 14px);
    font-weight:600;
    letter-spacing:-.02em;
    color:rgba(247,247,249,.5);
}
.ct-cs-nm i{position:absolute;left:0;top:0;font-style:normal;color:var(--white);opacity:.75;}
.ct-cs-step--top .ct-cs-nm i{opacity:1;}
/* Brillo de la cima (reemplaza al sello): estático, se enciende al llegar la luz */
.ct-cs-summit{
    position:absolute;left:42%;top:-6%;width:62%;aspect-ratio:1.2;
    border-radius:50%;
    background:radial-gradient(closest-side, rgba(205,218,240,.12), rgba(31,201,195,.05) 55%, transparent);
    opacity:.55;
    pointer-events:none;
}
/* Con JS: la escalera queda oculta hasta que el JS crea las animaciones
   (todas con fill:backwards, arrancan en su pose inicial). Si el JS no
   llega nunca, el failsafe la muestra armada a los 4 s. */
.ct-js .ct-cs:not(.is-live):not(.is-static) .ct-cs-spin{visibility:hidden;animation:ctCsFailsafe 0s 4s forwards;}
.ct-js .ct-cs:not(.is-live):not(.is-static) .ct-cs-summit{opacity:0;animation:ctCsFailsafeOp 0s 4s forwards;}
/* Mobile: el JS espera a que la escalera se vea (.is-wait) y ahí arranca;
   sin failsafe mientras tanto. */
.ct-js .ct-cs.is-wait:not(.is-live) .ct-cs-spin{animation:none;}
.ct-js .ct-cs.is-wait:not(.is-live) .ct-cs-summit{animation:none;}
@keyframes ctCsFailsafe{to{visibility:visible;}}
@keyframes ctCsFailsafeOp{to{opacity:.55;}}
/* Baranda y cabeza de luz (las crea el JS) */
.ct-cs-seg{
    position:absolute;left:0;top:0;height:2px;margin-top:-1px;border-radius:2px;
    background:linear-gradient(90deg, rgba(232,239,250,.85), rgba(140,228,221,.85));
    opacity:.85;
}
.ct-cs-head{position:absolute;left:0;top:0;transform-style:preserve-3d;}
/* Destello al pasar la luz (lo crea el JS): cuatro rayos de una línea fina,
   sin halo; solo opacity/transform */
.ct-cs-glint{position:absolute;left:0;top:0;transform-style:preserve-3d;}
.ct-cs-glint b{
    position:absolute;left:-1.6em;top:-1.6em;width:3.2em;height:3.2em;opacity:0;
    background:
        linear-gradient(90deg, transparent, rgba(255,255,255,.95) 50%, transparent) center / 100% 1.5px no-repeat,
        linear-gradient(0deg, transparent, rgba(255,255,255,.95) 50%, transparent) center / 1.5px 100% no-repeat,
        linear-gradient(45deg, transparent 38%, rgba(214,240,255,.55) 50%, transparent 62%) center / 46% 46% no-repeat,
        linear-gradient(-45deg, transparent 38%, rgba(214,240,255,.55) 50%, transparent 62%) center / 46% 46% no-repeat;
}
.ct-cs-head b{
    position:absolute;left:-2.2em;top:-2.2em;width:4.4em;height:4.4em;border-radius:50%;
    background:radial-gradient(closest-side, #fff 0 16%, rgba(226,240,255,.7) 30%, rgba(127,227,220,.16) 62%, transparent);
    opacity:0;
}
.ct-cs.is-live:not(.is-done) .ct-cs-step,
.ct-cs.is-live:not(.is-done) .ct-cs-nm{will-change:transform;}
/* =====================================================================
   4. EL RECORRIDO
   ===================================================================== */
.ct-journey{position:relative;z-index:2;padding:50px 0 70px;}
.ct-journey .section-header{margin-bottom:38px;}
.ct-journey-grid{position:relative;}

/* Columna izquierda (índice + torre): sólo desktop */
.ct-index{display:none;}

/* ---------- Índice: mismo formato que .lg-toc (legal.css) ---------- */
.ct-toc{
    flex-shrink:0;
    position:relative;
    border:1px solid rgba(31,201,195,.2);
    border-radius:14px;
    background:var(--ct-pill-bg);
    box-shadow:var(--ct-pill-shadow);
    padding:0 18px 16px;
}
.ct-toc-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 0 12px;
    font-family:var(--font-mono);
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:1.4px;
    color:var(--wave-teal);
}
.ct-toc-count{color:var(--gray-mid);letter-spacing:1px;font-size:.64rem;}
.ct-toc-count b{color:var(--white);font-weight:600;}
/* Nombre de la etapa: sólo en el modo compacto (índice como la barra mobile) */
.ct-toc-name{display:none;}
.ct-toc-seal{display:none;}
/* Desktop: "Recorrido" a la izquierda, la moneda AJS al centro y
   "Etapa N de 6" a la derecha */
@media (min-width:1024px){
    .ct-toc-head{display:grid;grid-template-columns:1fr auto 1fr;}
    .ct-toc-label{grid-column:1;}
    .ct-toc-seal{display:block;grid-column:2;grid-row:1;width:36px;height:36px;margin:-8px 0;}
    .ct-toc-count{grid-column:3;grid-row:1;justify-self:end;}
}

/* ---------- Moneda AJS en 3D ----------
   Misma construcción que el tazo de sobre-mi (.sm-tazo) en chico: dos
   caras con el mismo SVG y un canto de discos apilados con translateZ.
   Quieta de frente casi todo el ciclo y, cada tanto, una vuelta completa
   con un leve cabeceo. Sólo transform (compositor); sin opacity ni
   filter en la cadena 3D. Se pausa cuando la pastilla no se ve. */
.ct-coin{position:relative;perspective:220px;pointer-events:none;}
.ct-coin-spin{
    position:absolute;inset:0;
    transform-style:preserve-3d;
    animation:ctCoin 7s cubic-bezier(.45,0,.2,1) 2.2s infinite both;
}
.ct-coin-spin i{
    position:absolute;inset:.6%;border-radius:50%;
    background:#15233d;
    transform:translateZ(calc((var(--i) - 2.5) * var(--th, .55px)));
}
.ct-coin-spin i:nth-child(odd){background:#2f4f82;}
.ct-coin-spin img{
    position:absolute;inset:0;width:100%;height:100%;display:block;
    border-radius:50%;
    backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.ct-coin-front{transform:translateZ(calc(3 * var(--th, .55px)));}
.ct-coin-back{transform:rotateY(180deg) translateZ(calc(3 * var(--th, .55px)));}
/* 0-70%: de frente con un vaivén mínimo; 70-90%: vuelta completa que
   muestra el canto; 360deg = 0deg, el ciclo cierra sin salto. */
@keyframes ctCoin{
    0%{transform:rotateY(0) rotateX(0);}
    35%{transform:rotateY(-12deg) rotateX(5deg);animation-timing-function:ease-in-out;}
    70%{transform:rotateY(0) rotateX(0);animation-timing-function:cubic-bezier(.6,0,.2,1);}
    90%{transform:rotateY(372deg) rotateX(-6deg);animation-timing-function:ease-out;}
    100%{transform:rotateY(360deg) rotateX(0);}
}
.ct-mbar:not(.is-on) .ct-coin-spin{animation-play-state:paused;}

/* ---------- Entrada del índice ----------
   Cuando el recorrido entra en pantalla (como-trabajo.js pone .is-in):
   el panel sube desde un leve desenfoque, una luz lo cruza en diagonal,
   la pista vertical se traza de arriba abajo y las etapas entran en
   cascada. Sin JS (sin html.ct-js) queda todo visible. */
.ct-js .ct-toc{
    opacity:0;
    transform:translate3d(0,22px,0) scale(.97);
    transition:opacity .7s ease, transform 1s var(--ease-out-expo);
}
.ct-js .ct-toc.is-in{opacity:1;transform:none;}
.ct-js .ct-toc-head > *{
    opacity:0;transform:translate3d(0,8px,0);
    transition:opacity .5s ease, transform .7s var(--ease-out-expo);
}
.ct-js .ct-toc-head > .ct-toc-seal{transform:scale(.4);transition-duration:.6s, .9s;}
.ct-js .ct-toc.is-in .ct-toc-head > *{opacity:1;transform:none;}
.ct-js .ct-toc.is-in .ct-toc-label{transition-delay:.18s;}
.ct-js .ct-toc.is-in .ct-toc-seal{transition-delay:.28s;}
.ct-js .ct-toc.is-in .ct-toc-count{transition-delay:.38s;}
.ct-js .ct-toc-list::before{transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ease-out-expo) .3s;}
.ct-js .ct-toc.is-in .ct-toc-list::before{transform:none;}
.ct-js .ct-toc-list li{
    opacity:0;transform:translate3d(-14px,0,0);
    transition:opacity .5s ease, transform .8s var(--ease-out-expo);
    transition-delay:calc(.4s + var(--i, 0) * 70ms);
}
.ct-js .ct-toc.is-in .ct-toc-list li{opacity:1;transform:none;}
.ct-toc-list li:nth-child(2){--i:1;}
.ct-toc-list li:nth-child(3){--i:2;}
.ct-toc-list li:nth-child(4){--i:3;}
.ct-toc-list li:nth-child(5){--i:4;}
.ct-toc-list li:nth-child(6){--i:5;}
/* Luz que cruza el panel una sola vez al entrar */
.ct-toc-shine{
    position:absolute;inset:0;
    border-radius:inherit;
    overflow:hidden;
    pointer-events:none;
}
.ct-toc-shine::before{
    content:'';
    position:absolute;top:-20%;bottom:-20%;left:0;width:45%;
    background:linear-gradient(100deg, transparent, rgba(140,245,236,.16) 45%, rgba(255,255,255,.22) 50%, rgba(140,245,236,.16) 55%, transparent);
    transform:translate3d(-120%,0,0) skewX(-12deg);
    opacity:0;
}
.ct-toc.is-in .ct-toc-shine::before{animation:ctTocShine 1.3s cubic-bezier(.55,.1,.3,1) .25s both;}
@keyframes ctTocShine{
    0%{transform:translate3d(-120%,0,0) skewX(-12deg);opacity:0;}
    15%{opacity:1;}
    85%{opacity:1;}
    100%{transform:translate3d(320%,0,0) skewX(-12deg);opacity:0;}
}
.ct-toc-name.is-flip{animation:ctFlip .5s var(--ease-out-expo) both;}
.ct-toc-list{list-style:none;position:relative;padding-left:16px;}
/* Pista vertical + relleno de progreso (--p, el mismo del riel) */
.ct-toc-list::before,
.ct-toc-list::after{
    content:'';
    position:absolute;
    left:0;top:4px;bottom:4px;
    width:2px;
    border-radius:2px;
}
.ct-toc-list::before{background:var(--border-soft);}
.ct-toc-list::after{
    background:linear-gradient(180deg,rgba(31,201,195,.6),#5cf0e4);
    transform-origin:top;
    transform:scaleY(var(--p,0));
    box-shadow:0 0 12px rgba(31,201,195,.55);
}
.ct-toc-list a{
    position:relative;
    display:flex;
    gap:10px;
    padding:7px 10px;
    border-radius:10px;
    font-size:.86rem;
    line-height:1.4;
    color:rgba(247,247,249,.4);
    transition:color .3s ease, background .3s ease;
}
.ct-toc-list a b{
    font-family:var(--font-mono);
    font-weight:500;
    font-size:.7rem;
    min-width:.9em;
    padding-top:.15em;
    color:rgba(247,247,249,.4);
    transition:color .3s ease;
}
.ct-toc-list a:hover{color:var(--white);}
.ct-toc-list a.is-past{color:var(--white);}
.ct-toc-list a.is-past b{color:var(--wave-teal);}
.ct-toc-list a.is-active{color:var(--white);background:rgba(31,201,195,.1);}
.ct-toc-list a.is-active b{color:var(--wave-teal);}

/* ---------- Navegador del recorrido (#ctBrowser) ----------
   Reemplazó al notebook en video (oct 2026). Un navegador con el sitio de
   un cliente ficticio (tuweb.com, una tienda online) que
   se arma etapa por etapa.
   El HTML es el estado final (data-stage="6" + ge1..ge6): sin JS y con
   movimiento reducido se ve el sitio en línea, quieto. como-trabajo.js
   ("NAVEGADOR DEL RECORRIDO") solo cambia data-stage y ge*. Todo lo que
   se mueve acá es transform/opacity (tests/e2e/como-trabajo-browser.test.mjs
   lo verifica). El sitio mide en cqi (ancho de .ct-br-vp): se ve igual a
   cualquier tamaño.
   Capas de .ct-br-vp, de abajo hacia arriba: resplandor (1-2), wireframe (2,
   clon), borrador (3, clon), sitio final que entra con una pasada de luz
   (4+), reunión (1), plan (2), haz del lanzamiento (5, WAAPI), aviso de
   entrega (5) y panel de mantenimiento (6).
   Regla de las transiciones: el estado "fuera" va en la base (corta, sin
   demora) y el "dentro" en la etapa (más larga, con su demora): al volver
   con el scroll todo sale rápido y sin esperas. */
.ct-br{
    --ct-br-url:#1d1e24;
    position:relative;
    width:100%;
    border-radius:14px;
    overflow:hidden;
    text-align:left;
    container:ctbr / inline-size;
    background:linear-gradient(180deg,#16171d,#0d0e12);
    box-shadow:0 0 0 1px rgba(255,255,255,.09), 0 40px 80px -40px rgba(0,0,0,.95), 0 0 120px -40px rgba(47,111,237,.25);
}
.ct-br-bar{position:relative;height:36px;display:flex;align-items:center;gap:10px;padding:0 10px 0 12px;border-bottom:1px solid rgba(255,255,255,.06);}
.ct-br-dots{display:flex;gap:6px;flex:none;}
.ct-br-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.12);}
.ct-br-url{
    position:relative;flex:1;min-width:0;max-width:320px;height:22px;margin:0 auto;
    border-radius:7px;background:var(--ct-br-url);overflow:hidden;
    font:500 10.5px/22px var(--font-mono);color:rgba(247,247,249,.42);white-space:nowrap;
}
.ct-br-url > span{position:absolute;left:10px;top:0;display:flex;align-items:center;gap:6px;}
.ct-br-host{color:var(--white);}
.ct-br-host svg{width:10px;height:10px;flex:none;color:var(--wave-teal);}
.ct-br-host-win{position:relative;overflow:hidden;}
/* "Tipeo" del dominio: una tapa del color de la URL se corre por pasos */
.ct-br-host-win::after{content:'';position:absolute;inset:0;background:var(--ct-br-url);transform:translateX(101%);}
.ct-br-chips{position:relative;flex:none;width:108px;height:22px;}
.ct-br-chip{
    position:absolute;right:0;top:0;height:22px;display:flex;align-items:center;gap:7px;padding:0 8px;
    border-radius:6px;white-space:nowrap;font:600 9.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
    color:var(--white);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.ct-br-chip i{width:18px;height:2px;background:linear-gradient(90deg,var(--wave-teal) 50%,rgba(255,255,255,.15) 50%);}
.ct-br-r2 i{background:var(--wave-teal);}
.ct-br-live{color:var(--wave-teal);background:var(--ct-pill-bg, rgba(31,201,195,.1));box-shadow:inset 0 0 0 1px rgba(31,201,195,.45);}
@container ctbr (max-width:380px){
    .ct-br-dots{display:none;}
    .ct-br-chip{font-size:8.5px;padding:0 6px;}
}

.ct-br-vp{position:relative;aspect-ratio:16 / 10;container-type:inline-size;overflow:hidden;background:#0c0d11;}
.ct-br-paper,.ct-br-win,.ct-br-notes,.ct-br-site{position:absolute;inset:0;}
/* Fondo de las etapas 1-2: dos resplandores suaves (turquesa y azul de la página), estáticos */
.ct-br-paper{background:radial-gradient(55% 65% at 22% 18%,rgba(31,201,195,.11),transparent 70%),radial-gradient(50% 60% at 82% 88%,rgba(47,111,237,.13),transparent 70%);}

/* ---- El sitio del cliente (final; el wireframe y el borrador son clones con otra piel) ---- */
.ct-br-site{
    --t:var(--white); --acc:var(--accent-hot); --txt:rgba(247,247,249,.68); --mut:rgba(247,247,249,.6);
    --btn:var(--accent); --btn-fg:#fff; --btn-r:1cqi;
    --btn-sh:0 1cqi 3cqi -1cqi rgba(47,111,237,.7), inset 0 1px 0 rgba(255,255,255,.25);
    --card:rgba(255,255,255,.035); --card-r:1.2cqi;
    --card-ring:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(140,245,236,.35);
    --slot:rgba(18,20,28,.82); --slot-cta:var(--wave-teal); --slot-fg:#04110f; --img-r:1.6cqi; --link:var(--wave-teal);
    display:flex;flex-direction:column;gap:3.2cqi;padding:3.2cqi 4.2cqi 3.6cqi;
    font-family:var(--font-sans);color:var(--txt);
}
.ct-blk{position:relative;display:block;}
.ct-br-nav{display:flex;align-items:center;gap:3cqi;flex:none;}
.ct-br-logo{font:750 2.3cqi/1 var(--font-sans);letter-spacing:-.02em;color:var(--t);}
.ct-br-logo em{font-style:normal;color:var(--wave-teal);}
.ct-br-links{margin-left:auto;display:flex;gap:2.6cqi;padding:.8cqi 0;font:500 1.35cqi/1 var(--font-sans);color:var(--mut);}
.ct-br-btn{padding:1.3cqi 2cqi;border-radius:var(--btn-r);background:var(--btn);color:var(--btn-fg);box-shadow:var(--btn-sh);font:650 1.35cqi/1 var(--font-sans);white-space:nowrap;}
.ct-br-hero{flex:1;min-height:0;display:grid;grid-template-columns:1.06fr .94fr;gap:4.4cqi;}
.ct-br-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2.4cqi;}
.ct-br-h{font:750 5.6cqi/1.02 var(--font-sans);letter-spacing:-.03em;color:var(--t);}
.ct-br-acc{color:var(--acc);}
.ct-br-p{max-width:92%;font:400 1.6cqi/1.5 var(--font-sans);}
.ct-br-ctas{display:flex;align-items:center;flex-wrap:wrap;gap:2cqi;}
.ct-br-ctas .ct-br-btn{padding:1.6cqi 2.4cqi;font-size:1.55cqi;}
.ct-br-link{padding:.6cqi 0;font:600 1.5cqi/1 var(--font-sans);color:var(--t);box-shadow:inset 0 -1px 0 var(--link);}
.ct-br-media{min-height:0;}
.ct-br-img{
    position:absolute;inset:0;border-radius:var(--img-r);overflow:hidden;
    background:
        radial-gradient(70% 60% at 70% 25%,rgba(91,141,255,.55),transparent 60%),
        radial-gradient(60% 70% at 20% 85%,rgba(31,201,195,.45),transparent 60%),
        linear-gradient(160deg,#1b2a52,#0d1424 55%,#0b1a1f);
}
.ct-br-img::after{content:'';position:absolute;left:18%;top:16%;width:62%;height:62%;border-radius:50%;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 4cqi rgba(255,255,255,.025);}
.ct-br-slot{
    position:absolute;left:-3cqi;bottom:3cqi;width:22cqi;padding:1.6cqi 1.8cqi;border-radius:1.2cqi;
    display:flex;flex-direction:column;gap:.7cqi;background:var(--slot);
    box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 2cqi 4cqi -2cqi rgba(0,0,0,.9);
}
.ct-br-slot small{font:500 1.05cqi/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);}
.ct-br-slot strong{font:700 2.1cqi/1 var(--font-sans);color:var(--t);}
.ct-br-slot-cta{position:relative;align-self:flex-start;margin-top:.6cqi;}
.ct-br-slot-cta b{display:block;padding:.9cqi 1.6cqi;border-radius:.8cqi;font:650 1.15cqi/1 var(--font-sans);white-space:nowrap;background:var(--slot-cta);color:var(--slot-fg);}
.ct-br-slot-b{position:absolute;left:0;top:0;opacity:0;}
.ct-br-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqi;flex:none;}
.ct-br-feat{display:flex;flex-direction:column;gap:.8cqi;padding:1.8cqi;border-radius:var(--card-r);background:var(--card);box-shadow:var(--card-ring);}
.ct-br-feat strong{font:700 1.45cqi/1 var(--font-sans);color:var(--t);}
.ct-br-feat span{font:400 1.15cqi/1.2 var(--font-sans);color:var(--mut);}

/* Borrador (etapa 3): el mismo sitio en grises, botones planos, imagen de placeholder */
.ct-br-draft{
    --t:#c4c8cf; --acc:#c4c8cf; --txt:#8d929b; --mut:#7d828b;
    --btn:#2a2d34; --btn-fg:#d9dce1; --btn-r:.3cqi; --btn-sh:none;
    --card:#15171c; --card-r:.3cqi; --card-ring:none;
    --slot:#22252b; --slot-cta:#33363e; --slot-fg:#d9dce1; --img-r:.4cqi; --link:rgba(255,255,255,.2);
}
.ct-br-draft .ct-br-logo em{color:inherit;}
.ct-br-draft .ct-br-img{background:
    linear-gradient(to top right,transparent calc(50% - .5px),rgba(255,255,255,.12) 50%,transparent calc(50% + .5px)),
    linear-gradient(to bottom right,transparent calc(50% - .5px),rgba(255,255,255,.12) 50%,transparent calc(50% + .5px)),
    #17191e;}
.ct-br-draft .ct-br-img::after{display:none;}
.ct-br-draft .ct-br-slot{box-shadow:none;}

/* Wireframe (etapa 2): cada bloque es una caja de filete con su etiqueta */
.ct-br-wire .ct-blk{color:transparent;background:rgba(31,201,195,.03);box-shadow:inset 0 0 0 1px rgba(140,245,236,.5);border-radius:.7cqi;}
.ct-br-wire .ct-blk *{visibility:hidden;}
.ct-br-wire .ct-blk::before{content:attr(data-w);position:absolute;left:.8cqi;top:.7cqi;font:500 1.05cqi/1 var(--font-mono);letter-spacing:.12em;color:rgba(140,245,236,.85);}

/* Ventana del sitio final (entra en el pulido) */
.ct-br-win{
    overflow:hidden;
    background:
        radial-gradient(60% 70% at 78% 30%,rgba(47,111,237,.22),transparent 70%),
        radial-gradient(40% 50% at 12% 90%,rgba(31,201,195,.1),transparent 70%),
        #0c0d11;
}
.ct-br-head{position:absolute;top:0;bottom:0;right:0;width:1px;opacity:0;pointer-events:none;background:#fff;box-shadow:0 0 10px 1px rgba(91,141,255,.9), 0 0 34px 6px rgba(47,111,237,.35);}

/* Reunión inicial (etapa 1): conocernos. Dos presencias (vos y la marca)
   que se acercan y quedan unidas por un filete de luz, y una sola frase.
   Poco texto a propósito: la card de la etapa ya cuenta el detalle. */
.ct-br-notes{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.ct-br-meet{display:flex;align-items:center;width:min(60cqi,84%);}
.ct-br-who{
    position:relative;flex:none;display:grid;place-items:center;width:13cqi;aspect-ratio:1;border-radius:50%;
    border:1px solid rgba(31,201,195,.32);background:var(--ct-pill-bg, rgba(6,15,16,.94));box-shadow:var(--ct-pill-shadow, none);
    font:650 2.6cqi/1 var(--font-sans);letter-spacing:-.01em;color:var(--white);
}
.ct-br-who img{width:62%;height:auto;}
.ct-br-tie{position:relative;flex:1;height:1px;}
.ct-br-tie i{position:absolute;top:0;width:50%;height:1px;}
.ct-br-tie i:first-child{left:0;transform-origin:left;background:linear-gradient(90deg,rgba(31,201,195,.25),#bff8f3);}
.ct-br-tie i + i{right:0;transform-origin:right;background:linear-gradient(270deg,rgba(91,141,255,.3),#bff8f3);}
/* Destello donde se encuentran: cuatro filetes, sin halo */
.ct-br-tie b{
    position:absolute;left:50%;top:50%;width:6cqi;height:6cqi;margin:-3cqi 0 0 -3cqi;
    background:
        linear-gradient(90deg,transparent,rgba(255,255,255,.95) 50%,transparent) center / 100% 1px no-repeat,
        linear-gradient(0deg,transparent,rgba(255,255,255,.95) 50%,transparent) center / 1px 100% no-repeat,
        linear-gradient(45deg,transparent 38%,rgba(214,240,255,.5) 50%,transparent 62%) center / 46% 46% no-repeat,
        linear-gradient(-45deg,transparent 38%,rgba(214,240,255,.5) 50%,transparent 62%) center / 46% 46% no-repeat;
}
.ct-br-meet-k{margin-top:5cqi;font:500 1.3cqi/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--wave-teal);}
.ct-br-nt{max-width:86%;margin:1.6cqi 0 0;font:700 4.2cqi/1.1 var(--font-sans);letter-spacing:-.02em;color:var(--white);overflow-wrap:anywhere;}
@container ctbr (max-width:520px){
    .ct-br-meet{width:78%;}
    .ct-br-who{width:16cqi;font-size:3.4cqi;}
    .ct-br-meet-k{margin-top:6cqi;font-size:2cqi;}
    .ct-br-nt{font-size:5.4cqi;}
}

/* Plan de acción (etapa 2): una hoja suelta apoyada sobre el wireframe,
   inclinada a propósito y sujeta con una cinta: es el documento por
   escrito que el cliente aprueba, no parte del sitio. */
.ct-br-plan{
    position:absolute;right:4.4cqi;bottom:4.4cqi;width:31cqi;padding:2.6cqi 2.4cqi 2.2cqi;border-radius:.6cqi;color:var(--white);
    background:rgba(16,18,24,.96);box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 1cqi 1.6cqi -.6cqi rgba(0,0,0,.8), 0 4cqi 7cqi -2cqi rgba(0,0,0,.95);
}
/* Cinta que la sujeta (estática) */
.ct-br-plan::before{
    content:'';position:absolute;left:50%;top:-1.5cqi;width:10cqi;height:2.8cqi;
    transform:translateX(-50%) rotate(5deg);
    background:linear-gradient(90deg,rgba(140,245,236,.16),rgba(220,250,247,.26) 50%,rgba(140,245,236,.16));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.ct-br-plan strong{display:block;margin-bottom:1.6cqi;font:700 2cqi/1 var(--font-sans);}
.ct-br-plan dl{display:grid;grid-template-columns:auto 1fr;gap:1.1cqi 2cqi;margin:0;font:400 1.35cqi/1.3 var(--font-sans);}
.ct-br-plan dt{font:500 1.1cqi/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(247,247,249,.42);}
.ct-br-plan dd{margin:0;min-width:0;overflow-wrap:anywhere;color:var(--gray-soft);}
.ct-br-pay{display:flex;gap:.5cqi;margin-top:.6cqi;}
.ct-br-pay i{flex:1;height:.6cqi;border-radius:1cqi;background:var(--wave-teal);transform-origin:left;}
.ct-br-pay i + i{background:rgba(31,201,195,.35);}

/* Haz del lanzamiento (etapa 5; lo anima como-trabajo.js con WAAPI) */
.ct-br-beam{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateY(-100%);}
.ct-br-beam::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#fff 18%,#fff 82%,transparent);box-shadow:0 0 10px 1px rgba(91,141,255,.9), 0 0 36px 6px rgba(47,111,237,.4);}
.ct-br-beam::after{content:'';position:absolute;left:0;right:0;bottom:0;height:16cqi;background:linear-gradient(to top,rgba(91,141,255,.16),transparent);}

/* Aviso de entrega (etapa 5) y panel de mantenimiento (etapa 6) */
.ct-br-toast{
    position:absolute;left:0;right:0;bottom:3.4cqi;width:max-content;max-width:92%;margin:0 auto;padding:1.3cqi 2cqi;border-radius:1cqi;
    font:500 1.25cqi/1.3 var(--font-mono);letter-spacing:.06em;text-align:center;color:var(--white);
    background:rgba(16,18,24,.92);box-shadow:inset 0 0 0 1px rgba(31,201,195,.5);
}
.ct-br-hud{
    position:absolute;right:3cqi;top:10.5cqi;width:27cqi;padding:1.8cqi 2cqi;border-radius:1.3cqi;
    background:rgba(14,16,22,.9);box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 3cqi 6cqi -2cqi rgba(0,0,0,.95);
}
.ct-br-hud strong{display:block;font:500 1.1cqi/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--wave-teal);}
.ct-br-sweep{position:relative;display:block;height:1px;margin:1.2cqi 0 1.3cqi;overflow:hidden;background:rgba(255,255,255,.08);}
.ct-br-sweep::after{content:'';position:absolute;inset:0;width:30%;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(140,245,236,.95),transparent);}
.ct-br-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4cqi 1cqi;font:400 1.3cqi/1.2 var(--font-sans);color:var(--gray-soft);}
.ct-br-row + .ct-br-row{margin-top:1.1cqi;}
.ct-br-row b{font-weight:600;color:var(--white);overflow-wrap:anywhere;}

/* ---- Coreografía por etapa ---- */
/* Barra */
.ct-br-ph,.ct-br-host{opacity:0;transition:opacity .3s var(--ease-smooth);}
.ct-br:is([data-stage="0"],[data-stage="1"],[data-stage="2"]) .ct-br-ph-new,
.ct-br:is([data-stage="3"],[data-stage="4"]) .ct-br-ph-draft,
.ct-br.ge5 .ct-br-host{opacity:1;transition-delay:.15s;}
.ct-br:not(.ge5) .ct-br-host-win::after{transform:none;}
.ct-br.ge5 .ct-br-host-win::after{transition:transform .6s steps(9, end) .45s;}
.ct-br-chip{opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease-smooth), transform .4s var(--ease-out-expo);}
.ct-br[data-stage="3"] .ct-br-r1,
.ct-br[data-stage="4"] .ct-br-r2{opacity:1;transform:none;transition-delay:.35s;}
.ct-br.ge5 .ct-br-live{opacity:1;transform:none;transition-delay:1.15s;}
/* Fondo (1-2) y reunión (1) */
.ct-br-paper{opacity:0;transition:opacity .4s var(--ease-smooth);}
.ct-br:is([data-stage="1"],[data-stage="2"]) .ct-br-paper{opacity:1;}
.ct-br-notes{opacity:0;transition:opacity .35s var(--ease-smooth);}
.ct-br[data-stage="1"] .ct-br-notes{opacity:1;transition-duration:.5s;}
.ct-br-who,.ct-br-meet-k,.ct-br-nt{opacity:0;transition:opacity .25s, transform .3s;}
.ct-br-who-a{transform:translateX(-7cqi);}
.ct-br-who-b{transform:translateX(7cqi);}
.ct-br-meet-k,.ct-br-nt{transform:translateY(1.5cqi);}
.ct-br-tie i{transform:scaleX(0);transition:transform .25s;}
.ct-br-tie b{opacity:0;transform:scale(.3) rotate(0deg);transition:opacity .2s, transform .3s;}
.ct-br[data-stage="1"] .ct-br-who{opacity:1;transform:translateX(0);transition:opacity .5s var(--ease-smooth) .15s, transform 1.1s var(--ease-out-expo) .15s;}
.ct-br[data-stage="1"] .ct-br-tie i{transform:scaleX(1);transition:transform .7s cubic-bezier(.5,0,.3,1) .7s;}
.ct-br[data-stage="1"] .ct-br-tie b{opacity:1;transform:scale(1) rotate(45deg);transition:opacity .3s 1.35s, transform .9s var(--ease-out-expo) 1.35s;}
.ct-br[data-stage="1"] .ct-br-meet-k{opacity:1;transform:translateY(0);transition:opacity .5s var(--ease-smooth) 1.5s, transform .8s var(--ease-out-expo) 1.5s;}
.ct-br[data-stage="1"] .ct-br-nt{opacity:1;transform:translateY(0);transition:opacity .5s var(--ease-smooth) 1.65s, transform .8s var(--ease-out-expo) 1.65s;}

/* Wireframe (2) y plan (2) */
.ct-br-wire,.ct-br-draft{transition:opacity .4s var(--ease-smooth);}
.ct-br-wire .ct-blk{opacity:0;transform:scale(.96);transition:opacity .25s, transform .3s;}
.ct-br.ge2 .ct-br-wire .ct-blk{opacity:1;transform:none;transition:opacity .45s var(--ease-smooth) calc(var(--i) * 70ms), transform .7s var(--ease-out-expo) calc(var(--i) * 70ms);}
.ct-br.ge3 .ct-br-wire{opacity:.16;}
.ct-br.ge4 .ct-br-wire{opacity:0;}
/* Cae y se apoya: entra más girada y desde arriba, y se asienta en -4deg */
.ct-br-plan{opacity:0;transform:translate(3cqi,-6cqi) rotate(-11deg) scale(1.06);transition:opacity .3s, transform .4s;}
.ct-br[data-stage="2"] .ct-br-plan{opacity:1;transform:translate(0,0) rotate(-4deg) scale(1);transition:opacity .4s var(--ease-smooth) .9s, transform 1s var(--ease-out-expo) .9s;}
.ct-br-pay i{transform:scaleX(0);transition:transform .2s;}
.ct-br[data-stage="2"] .ct-br-pay i{transform:none;transition:transform 1.4s cubic-bezier(.06,.9,.22,1) 1.4s;}
.ct-br[data-stage="2"] .ct-br-pay i + i{transition-delay:1.8s;}
/* Borrador (3) */
.ct-br-draft .ct-blk{opacity:0;transform:translateY(.8cqi);transition:opacity .25s, transform .3s;}
.ct-br.ge3 .ct-br-draft .ct-blk{opacity:1;transform:none;transition:opacity .5s var(--ease-smooth) calc(var(--i) * 60ms), transform .8s var(--ease-out-expo) calc(var(--i) * 60ms);}
/* Pulido (4): la ventana del sitio final barre de izquierda a derecha y su
   contenido queda quieto (contra-traslación): dos transforms, compositor. */
.ct-br-win,.ct-br-win > .ct-br-site{transition:transform 1.3s cubic-bezier(.65,0,.35,1);}
.ct-br:not(.ge4) .ct-br-win{transform:translateX(-101%);}
.ct-br:not(.ge4) .ct-br-win > .ct-br-site{transform:translateX(101%);}
/* Lanzamiento (5) */
.ct-br-toast{opacity:0;transform:translateY(1.5cqi);transition:opacity .3s, transform .4s;}
.ct-br[data-stage="5"] .ct-br-toast{opacity:1;transform:none;transition:opacity .5s var(--ease-smooth) 1.4s, transform .8s var(--ease-out-expo) 1.4s;}
/* Mantenimiento (6): el panel y la venta confirmada (el sitio funcionando) */
.ct-br-hud{opacity:0;transform:translateY(-1.5cqi);transition:opacity .3s, transform .4s;}
.ct-br[data-stage="6"] .ct-br-hud{opacity:1;transform:none;transition:opacity .5s var(--ease-smooth) .3s, transform .8s var(--ease-out-expo) .3s;}
.ct-br[data-stage="6"] .ct-br-sweep::after{animation:ctBrSweep 2.4s var(--ease-smooth) .8s infinite;}
@keyframes ctBrSweep{from{transform:translateX(-100%);}to{transform:translateX(340%);}}
/* Solo en el sitio final: en las capas clonadas (wireframe, borrador) no se ve */
.ct-br-win .ct-br-slot-a,.ct-br-win .ct-br-slot-b{transition:opacity .3s;}
.ct-br[data-stage="6"] .ct-br-win .ct-br-slot-a{opacity:0;transition:opacity .4s 1.8s;}
.ct-br[data-stage="6"] .ct-br-win .ct-br-slot-b{opacity:1;transition:opacity .4s 1.8s;}

/* Cambio de etapa sin animar (carga, cambio de lugar) y movimiento reducido */
.ct-br.is-instant *,.ct-br.is-instant *::before,.ct-br.is-instant *::after{transition:none !important;animation:none !important;}
@media (prefers-reduced-motion: reduce){
    .ct-br *,.ct-br *::before,.ct-br *::after{transition:none !important;animation:none !important;}
}

/* ---------- Vitrina (mobile/tablet, debajo del recorrido) ---------- */
.ct-showcase{
    margin:34px auto 0;
    max-width:560px;
    text-align:center;
}

.ct-showcase figcaption{
    margin-top:34px;
    font-family:var(--font-display);
    font-style:italic;
    font-weight:400;
    font-size:clamp(1.45rem,6vw,1.9rem);
    line-height:1.25;
    letter-spacing:-.005em;
    text-wrap:balance;
    background:linear-gradient(100deg,#fff 0%,var(--accent-hot) 38%,var(--wave-teal) 72%,#eafffb 100%);
    background-size:200% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 6px 22px rgba(47,111,237,.35));
    animation:ctShimmer 8s steps(4,end) infinite;
}

/* ---------- Barra compacta mobile/tablet ----------
   position:fixed (no sticky) y de ancho FIJO: antes era sticky y medía lo
   que midiera el nombre de la etapa, así que cambiaba de tamaño en cada
   etapa y se "movía"; además el backdrop-filter sobre un elemento pegado
   que se reposiciona en cada frame de scroll temblaba en iOS. Ahora el
   compositor la deja clavada, sin desenfoque (fondo casi opaco) y el JS
   sólo le pone/saca .is-on cuando el recorrido entra o sale de pantalla. */
.ct-mbar{
    position:fixed;
    top:80px;
    right:16px;
    z-index:60;
    display:flex;
    align-items:center;
    gap:14px;
    width:min(300px, calc(100% - 32px));
    padding:10px 16px;
    border-radius:999px;
    border:1px solid var(--border-soft-hover);
    background:rgba(12,13,18,.94);
    box-shadow:0 10px 30px -12px rgba(0,0,0,.7);
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transform:translate3d(0,-8px,0);
    transition:opacity .35s ease, transform .45s var(--ease-smooth), visibility 0s linear .45s;
    pointer-events:none;
    /* Capa propia y aislada: el compositor la mantiene clavada a la
       pantalla mientras el dedo scrollea (en iOS, sin esto, se
       redibujaba con la página y "vibraba"). También por eso vive como
       hijo directo de <body> en el HTML. */
    will-change:transform, opacity;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    contain:layout style;
}
.ct-mbar.is-on{
    opacity:1;
    visibility:visible;
    transform:translate3d(0,0,0);
    transition:opacity .35s ease, transform .45s var(--ease-smooth);
}
.ct-mbar::after{
    content:'';
    position:absolute;
    left:0;right:0;bottom:0;
    height:1px;
    background:linear-gradient(90deg,var(--accent-hot),var(--wave-teal));
    box-shadow:0 0 8px rgba(31,201,195,.7);
    transform-origin:left;
    transform:scaleX(var(--p,0));
}
.ct-mbar-num{
    font-family:var(--font-mono);
    font-size:.64rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--gray-mid);
    white-space:nowrap;
    padding-right:14px;
    border-right:1px solid var(--border-soft-hover);
}
.ct-mbar-num b{color:var(--accent-hot);font-weight:600;}
.ct-mbar-name{
    flex:1;
    min-width:0;
    font-size:.86rem;
    font-weight:600;
    color:var(--white);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* Pastilla de etapa: vidrio oscuro con el verde de la paleta (el teal,
   casi sin uso en el resto de la página), esquinas más rectas, anillo de
   luz que se desvanece a los lados y dos renglones: "Etapa N de 6" arriba
   y el nombre debajo. La misma pastilla es el índice compacto de desktop
   (.ct-toc en columna baja, más abajo). */
.ct-page{
    --ct-pill-bg:
        radial-gradient(70% 160% at 0% 0%, rgba(31,201,195,.2), transparent 70%),
        linear-gradient(135deg, rgba(31,201,195,.1), rgba(31,201,195,.02) 60%),
        rgba(6,15,16,.94);
    --ct-pill-shadow:0 0 30px -12px rgba(31,201,195,.5), 0 14px 30px -16px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
    --ct-pill-ring:linear-gradient(180deg, rgba(140,245,236,.95), rgba(31,201,195,.32) 55%, rgba(31,201,195,.6));
    --ct-pill-fade:linear-gradient(90deg, rgba(0,0,0,.3) 0%, #000 24%, #000 76%, rgba(0,0,0,.3) 100%);
}
.ct-mbar{
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:4px;
    padding:13px 20px 14px;
    border-radius:14px;
    background:var(--ct-pill-bg);
    border-color:rgba(31,201,195,.2);
    box-shadow:var(--ct-pill-shadow);
}
.ct-mbar::before{
    content:'';
    position:absolute;inset:0;
    z-index:1;
    pointer-events:none;
    border-radius:inherit;
    padding:1px;
    background:var(--ct-pill-ring);
    -webkit-mask:var(--ct-pill-fade), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:source-in, xor;
    mask:var(--ct-pill-fade), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:intersect, exclude;
}
.ct-mbar::after{height:2px;background:linear-gradient(90deg, rgba(31,201,195,.55), #5cf0e4);box-shadow:0 0 10px rgba(31,201,195,.75);}
.ct-mbar-num{font-size:.68rem;letter-spacing:.22em;padding-right:0;border-right:0;color:rgba(190,240,235,.62);}
.ct-mbar-num b{color:#fff;text-shadow:0 0 12px rgba(31,201,195,.95);}
.ct-mbar-name{flex:none;max-width:100%;font-size:1.04rem;line-height:1.2;font-weight:700;letter-spacing:-.01em;}
.ct-mbar{padding-right:68px;}
.ct-mbar-seal{position:absolute;right:16px;top:50%;width:34px;height:34px;margin-top:-17px;}
.ct-mbar-name.is-flip{animation:ctFlip .5s var(--ease-out-expo) both;}
@keyframes ctFlip{
    from{transform:translateY(40%);opacity:0;}
    to{transform:none;opacity:1;}
}

/* =====================================================================
   5. RIEL DE LUZ, NODOS Y ETAPAS
   ===================================================================== */
.ct-steps{
    --gut:34px;
    --pad-t:26px;   /* padding superior de la tarjeta */
    --ico:42px;     /* alto del ícono de cabecera: el nodo se centra en él */
    position:relative;
    padding-left:var(--gut);
}
/* El riel va del centro del primer nodo al centro vertical de la última
   tarjeta (top/height los calcula como-trabajo.js; sin JS, cubre toda la
   columna). El relleno es una línea de luz: núcleo claro, halo azul/teal
   que respira y una "cabeza" brillante que marca hasta dónde llegó. */
.ct-rail{
    position:absolute;
    left:9px;
    top:40px;
    bottom:40px;
    width:1px;
    background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.1) 88%,transparent);
}
.ct-rail-fill{
    position:absolute;
    top:0;bottom:0;
    left:-.5px;
    width:2px;
    border-radius:2px;
    background:linear-gradient(180deg,var(--accent-hot),#9fdcff 45%,var(--wave-teal) 80%,#eafffb);
    box-shadow:
        0 0 4px rgba(234,255,251,.7),
        0 0 12px 1px rgba(91,141,255,.75),
        0 0 28px 3px rgba(31,201,195,.35);
    transform-origin:top;
    transform:scaleY(var(--p,0));
}
.ct-rail-fill::before{
    content:'';
    position:absolute;
    inset:0 -9px;
    border-radius:inherit;
    background:inherit;
    /* Halo difuso con máscara (bordes laterales suaves) en vez de
       filter:blur, que se recalculaba en cada cuadro del scroll. */
    -webkit-mask-image:linear-gradient(90deg, transparent, rgba(0,0,0,.55) 30%, #000 50%, rgba(0,0,0,.55) 70%, transparent);
    mask-image:linear-gradient(90deg, transparent, rgba(0,0,0,.55) 30%, #000 50%, rgba(0,0,0,.55) 70%, transparent);
    opacity:.7;
    animation:ctRailBreath 3.2s ease-in-out infinite;
}
@keyframes ctRailBreath{
    0%,100%{opacity:.45;}
    50%{opacity:.95;}
}
.ct-js .ct-rail-fill{will-change:transform;}
/* Cabeza de la luz: se desplaza con --p sobre el alto real (--rail-h) */
.ct-rail-head{
    position:absolute;
    left:.5px;top:0;
    width:7px;height:7px;
    border-radius:50%;
    background:#fff;
    box-shadow:
        0 0 6px 1px #eafffb,
        0 0 16px 4px rgba(91,141,255,.8),
        0 0 36px 8px rgba(31,201,195,.4);
    transform:translate(-50%, calc(var(--p,0) * var(--rail-h,0px) - 50%));
    opacity:0;
    transition:opacity .5s ease;
    pointer-events:none;
}
.ct-rail.is-lit .ct-rail-head{opacity:1;}
/* Estela corta detrás de la cabeza */
/* Donde el navegador soporta scroll-driven animations, el relleno, la
   cabeza de luz, la pista del índice y la barra mobile las mueve el
   propio navegador con el scroll (línea de tiempo con nombre --ctrail
   sobre el riel: con view-timeline-inset 45%/55% la "ventana" es la línea
   de lectura al 45% de la pantalla, la misma que usa el JS). Corre en el
   compositor, así que en mobile va pegada al dedo en vez de trabarse. El
   JS sigue calculando la etapa activa y, sin soporte, escribe --p. */
@supports (animation-timeline: view()) and (timeline-scope: --a){
    /* En <body> (no en la grilla): la barra mobile vive fuera del recorrido
       y tiene que poder ver la línea de tiempo del riel. */
    body.ct-page{timeline-scope:--ctrail;}
    .ct-rail{view-timeline:--ctrail block;view-timeline-inset:45% 54.9%;}
    .ct-rail-fill{animation:ctRailFill linear both;animation-timeline:--ctrail;}
    .ct-rail-head{animation:ctRailHead linear both;animation-timeline:--ctrail;}
    .ct-mbar::after{animation:ctBarFill linear both;animation-timeline:--ctrail;}
    .ct-toc-list::after{animation:ctRailFill linear both;animation-timeline:--ctrail;}
    .ct-toc::after{animation:ctBarFill linear both;animation-timeline:--ctrail;}
    @keyframes ctRailFill{from{transform:scaleY(0);}to{transform:scaleY(1);}}
    @keyframes ctBarFill{from{transform:scaleX(0);}to{transform:scaleX(1);}}
    @keyframes ctRailHead{
        from{transform:translate(-50%,-50%);}
        to{transform:translate(-50%, calc(var(--rail-h,0px) - 50%));}
    }
}
.ct-rail-head::before{
    content:'';
    position:absolute;
    left:50%;bottom:50%;
    width:2px;height:70px;
    transform:translateX(-50%);
    background:linear-gradient(180deg,transparent,rgba(234,255,251,.9));
}

.ct-step{
    margin-bottom:20px;
    padding:var(--pad-t) 22px 28px;
    scroll-margin-top:150px;
    transition:box-shadow .7s ease;
}
.ct-step:last-child{margin-bottom:0;}
/* Borde luminoso de la etapa activa: un aro con máscara que se funde */
.ct-step::before{
    content:'';
    position:absolute;
    inset:-1px;
    padding:1px;
    border-radius:inherit;
    background:linear-gradient(145deg,var(--accent-hot),rgba(31,201,195,.7) 35%,rgba(31,201,195,0) 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity:0;
    transition:opacity .7s ease;
    pointer-events:none;
}
/* Brillo superior (un reflejo de luz sobre el canto) */
.ct-step::after{
    content:'';
    position:absolute;
    left:12%;right:12%;top:-1px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(234,255,251,.85),transparent);
    opacity:0;
    transform:scaleX(.3);
    transition:opacity .7s ease, transform 1.1s var(--ease-out-expo);
    pointer-events:none;
}
.ct-step.is-active{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 1px 0 rgba(0,0,0,.4),
        0 40px 80px -40px rgba(47,111,237,.55),
        0 26px 50px -30px rgba(0,0,0,.85);
}
.ct-step.is-active::before{opacity:1;}
.ct-step.is-active::after{opacity:1;transform:none;}

/* Nodo sobre el riel: un rombo centrado en el ícono de cabecera */
.ct-node{
    position:absolute;
    left:calc(9.5px - 5px - var(--gut));
    top:calc(var(--pad-t) + var(--ico) / 2 - 5px);
    width:10px;height:10px;
    background:var(--bg-black);
    border:1px solid rgba(255,255,255,.3);
    transform:rotate(45deg);
    transition:border-color .5s ease, background .5s ease, transform .5s var(--ease-smooth), box-shadow .5s ease;
}
.ct-step.is-past .ct-node{border-color:var(--wave-teal);background:var(--wave-teal);box-shadow:0 0 10px rgba(31,201,195,.6);}
.ct-step.is-active .ct-node{
    border-color:#eafffb;
    background:var(--accent-hot);
    transform:rotate(45deg) scale(1.35);
    box-shadow:0 0 0 4px rgba(91,141,255,.16), 0 0 18px rgba(91,141,255,.9);
}

.ct-step-head{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 14px;
    margin-bottom:20px;
}
/* Ícono de etapa: cápsula de vidrio con borde degradado */
.ct-step-ico{
    position:relative;
    flex-shrink:0;
    width:var(--ico);height:var(--ico);
    display:grid;place-items:center;
    border-radius:13px;
    border:1px solid transparent;
    color:var(--gray-soft);
    background:
        linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)) padding-box,
        linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.04)) border-box;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px -10px rgba(0,0,0,.8);
    transition:color .5s ease, box-shadow .6s ease, transform .6s var(--ease-smooth);
}
.ct-step-ico svg{width:20px;height:20px;}
.ct-step.is-past .ct-step-ico{color:var(--wave-teal);}
.ct-step.is-active .ct-step-ico{
    color:#eafffb;
    background:
        radial-gradient(90% 90% at 30% 20%, rgba(91,141,255,.45), rgba(47,111,237,.12) 70%) padding-box,
        linear-gradient(150deg,var(--accent-hot),var(--wave-teal)) border-box;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 26px -8px rgba(47,111,237,.75);
}
.ct-step:hover .ct-step-ico{transform:translateY(-2px);}

/* "Etapa N": versalitas mono. En la etapa activa toma el brillo del link
   "Portfolio Animado" del navbar (@keyframes navShine en styles.css). */
.ct-step-kicker{
    font-family:var(--font-mono);
    font-size:.7rem;
    font-weight:500;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--gray-mid);
    transition:color .5s ease;
}
.ct-step.is-past .ct-step-kicker{color:var(--wave-teal);}
.ct-step.is-active .ct-step-kicker{color:var(--accent-hot);}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
    .ct-step.is-active .ct-step-kicker{
        background-image:linear-gradient(100deg,
            var(--accent-hot) 0%, var(--accent-hot) 40%,
            #fff 48%, var(--wave-teal) 52%, #fff 56%,
            var(--accent-hot) 64%, var(--accent-hot) 100%);
        background-size:220% 100%;
        background-position:200% 0;
        -webkit-background-clip:text;
        background-clip:text;
        color:transparent;
        animation:navShine 6s steps(3,end) infinite;
    }
}
.ct-tag{
    display:inline-flex;
    align-items:center;
    margin-left:auto;
    padding:4px 11px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.025);
    /* Tipografía de los títulos chicos (.eyebrow), más chica y liviana
       para que no compita con el título de la etapa */
    font-family:var(--font-display);
    font-style:italic;
    font-weight:300;
    font-size:.8rem;
    line-height:1.15;
    letter-spacing:.01em;
    text-transform:none;
    color:rgba(247,247,249,.58);
    white-space:nowrap;
}
.ct-tag-opt{border-color:rgba(31,201,195,.45);color:var(--wave-teal);background:rgba(31,201,195,.08);box-shadow:0 0 16px -6px rgba(31,201,195,.6);}
.ct-step h3{
    font-size:clamp(1.55rem,5.8vw,2rem);
    font-weight:700;
    line-height:1.12;
    letter-spacing:-.03em;
    margin-bottom:12px;
    color:rgba(247,247,249,.4);
    transition:color .5s ease;
}
.ct-step.is-past h3,
.ct-step.is-active h3{color:var(--white);}
html:not(.ct-js) .ct-step h3{color:var(--white);}
.ct-step > p{font-size:.96rem;line-height:1.75;}

/* Lo que se obtiene en cada etapa: filas con sello */
.ct-gets{
    list-style:none;
    display:grid;
    gap:10px;
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.06);
}
.ct-gets li{
    padding-left:32px;
    font-size:.92rem;
    line-height:1.55;
    color:var(--gray-soft);
}
.ct-gets li::before, .ct-gets li::after{left:0;top:.08em;}
.ct-gets li:nth-child(2)::after, .ct-gets li:nth-child(2)::before{transition-delay:.15s;}

/* =====================================================================
   6. BLOQUES INTERNOS DE LAS ETAPAS
   ===================================================================== */
/* ---------- Pago 50 / 50 ---------- */
.ct-pay{
    margin-top:22px;
    padding:18px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.06);
    background:rgba(8,8,12,.45);
}
.ct-pay-bar{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    height:38px;
}
.ct-pay-seg{
    position:relative;
    display:flex;
    align-items:center;
    padding:0 14px;
    border-radius:10px;
    overflow:hidden;
    background:rgba(255,255,255,.04);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.ct-pay-seg::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(255,255,255,.18),transparent 55%),
        linear-gradient(90deg,var(--accent),var(--accent-hot));
    transform-origin:left;
    transform:scaleX(0);
    /* Arranca con el mismo impulso de antes y va frenando cada vez más
       hasta el final (desaceleración larga en vez de un frenazo). */
    transition:transform 2.8s cubic-bezier(.06,.9,.22,1) .35s;
}
.ct-pay-seg + .ct-pay-seg::before{
    background:
        linear-gradient(180deg,rgba(255,255,255,.18),transparent 55%),
        linear-gradient(90deg,#1aa9b8,var(--wave-teal));
    transition-delay:.75s;
}
.ct-step.show .ct-pay-seg::before{transform:scaleX(1);}
.ct-pay-seg b{position:relative;font-family:var(--font-mono);font-size:.76rem;font-weight:600;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35);}
.ct-pay-legend{
    display:flex;
    flex-wrap:wrap;
    gap:8px 22px;
    margin-top:14px;
    font-size:.85rem;
    color:var(--gray-soft);
}
.ct-pay-legend span{display:inline-flex;align-items:center;gap:9px;}
.ct-pay-legend i{width:8px;height:8px;border-radius:50%;background:var(--accent-hot);box-shadow:0 0 8px rgba(91,141,255,.8);}
.ct-pay-legend span + span i{background:var(--wave-teal);box-shadow:0 0 8px rgba(31,201,195,.8);}
.ct-pay-alt{
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.05);
    font-size:.8rem;
    color:var(--gray-mid);
}

/* ---------- Rondas de revisión ---------- */
.ct-round{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-top:22px;
    padding:9px 16px 9px 12px;
    border-radius:999px;
    border:1px solid var(--border-soft);
    background:rgba(255,255,255,.025);
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.3px;
    color:var(--gray-soft);
}
.ct-round-dots{display:inline-flex;gap:4px;}
.ct-round-dots i{
    width:20px;height:5px;
    border-radius:5px;
    background:rgba(255,255,255,.12);
}
.ct-round-dots i.is-on{background:linear-gradient(90deg,var(--accent-hot),var(--wave-teal));box-shadow:0 0 10px rgba(31,201,195,.55);}

/* ---------- Entrega (etapa 5) ---------- */
.ct-handoff{
    list-style:none;
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:22px;
}
.ct-handoff li{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    column-gap:14px;
    row-gap:2px;
    align-items:center;
    padding:16px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.06);
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(47,111,237,.07), transparent 60%),
        rgba(8,8,12,.45);
    transition:border-color .4s ease, transform .6s var(--ease-smooth), box-shadow .6s ease;
}
.ct-handoff li:hover{
    border-color:rgba(91,141,255,.32);
    transform:translateY(-3px);
    box-shadow:0 18px 34px -20px rgba(47,111,237,.6);
}
.ct-handoff-ico{
    grid-row:1 / 3;
    width:40px;height:40px;
    border-radius:12px;
    display:grid;place-items:center;
    color:var(--accent-hot);
    border:1px solid transparent;
    background:
        linear-gradient(180deg,rgba(47,111,237,.16),rgba(47,111,237,.05)) padding-box,
        linear-gradient(150deg,rgba(91,141,255,.55),rgba(31,201,195,.2)) border-box;
}
.ct-handoff-ico svg{width:20px;height:20px;}
.ct-handoff strong{font-size:.93rem;color:var(--white);font-weight:600;}
.ct-handoff li > span:last-child{font-size:.8rem;line-height:1.5;color:var(--gray-mid);}

/* ---------- Mantenimiento (etapa 6) ---------- */
/* Frase destacada: el subrayado brillante del link "Portfolio Animado"
   del navbar (mismo gradiente que porqueLineSweep), en versión de texto
   corrido. box-decoration-break:clone hace que cada renglón tenga su
   propio subrayado. Se "enciende" (de 0 a 2px) cuando la etapa entra en
   pantalla y se engrosa un poco al pasar el mouse. */
.ct-hl{
    color:var(--white);
    font-weight:500;
    padding-bottom:3px;
    background-image:linear-gradient(90deg,
        var(--accent) 0%, var(--accent) 32%,
        var(--wave-teal) 46%, #eafffb 50%, var(--wave-teal) 54%,
        var(--accent) 68%, var(--accent) 100%);
    background-size:300% 0px;
    background-repeat:repeat-x;
    background-position:200% 100%;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
    transition:background-size 1s var(--ease-out-expo);
}
/* El barrido corre sólo con el subrayado visible (antes animaba, y
   repintaba, también mientras medía 0px). */
.ct-step.show .ct-hl{background-size:300% 2px;animation:ctHlSweep 5.5s cubic-bezier(.83,0,.17,1) infinite;}
.ct-step.show .ct-hl:hover{background-size:300% 3px;transition-duration:.35s;}
@keyframes ctHlSweep{
    from{background-position:200% 100%;}
    to{background-position:-100% 100%;}
}
.ct-plan{
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    margin-top:22px;
    padding:22px;
    border-radius:16px;
    border:1px solid transparent;
    background:
        var(--ct-noise) padding-box,
        radial-gradient(120% 140% at 100% 0%, rgba(31,201,195,.13), transparent 60%) padding-box,
        radial-gradient(90% 120% at 0% 100%, rgba(47,111,237,.12), transparent 60%) padding-box,
        linear-gradient(180deg,#0f1117,#0b0b10) padding-box,
        linear-gradient(150deg,rgba(31,201,195,.5),rgba(255,255,255,.05) 45%,rgba(91,141,255,.35)) border-box;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 44px -28px rgba(31,201,195,.45);
}
.ct-plan-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;}
.ct-plan-price small{
    font-family:var(--font-mono);
    font-size:.66rem;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--gray-mid);
    width:100%;
}
.ct-plan-price strong{
    font-size:2.6rem;
    line-height:1;
    letter-spacing:-.045em;
    font-weight:800;
    background:linear-gradient(135deg,#fff 35%,#bff5f1 70%,var(--wave-teal));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.ct-plan-price em{font-style:normal;font-size:.9rem;color:var(--gray-soft);}
.ct-plan-list{list-style:none;display:grid;gap:16px;}
.ct-plan-list li{
    position:relative;
    display:grid;
    gap:2px;
    padding-left:34px;
}
.ct-plan-list strong{font-size:.98rem;font-weight:700;letter-spacing:-.01em;color:var(--white);line-height:1.3;}
.ct-plan-list span{font-size:.86rem;line-height:1.55;color:var(--gray-soft);}
.ct-plan-list li::before, .ct-plan-list li::after{left:0;top:1px;}
.ct-plan-list li:nth-child(2)::before, .ct-plan-list li:nth-child(2)::after{transition-delay:.08s;}
.ct-plan-list li:nth-child(3)::before, .ct-plan-list li:nth-child(3)::after{transition-delay:.16s;}
.ct-plan-list li:nth-child(4)::before, .ct-plan-list li:nth-child(4)::after{transition-delay:.24s;}
.ct-plan-list li:nth-child(5)::before, .ct-plan-list li:nth-child(5)::after{transition-delay:.32s;}
.ct-fine{margin-top:16px;font-size:.78rem;line-height:1.7;color:var(--gray-mid);}

/* =====================================================================
   7. COMPROMISOS (bento asimétrico), después del recorrido
   ===================================================================== */
.ct-promises{position:relative;padding:40px 0 30px;}
.ct-promises .section-header{margin-bottom:30px;}
.ct-bento{display:grid;grid-template-columns:1fr;gap:16px;}
.ct-card{
    padding:28px 24px;
    overflow:hidden;
    transition:transform .7s var(--ease-smooth), box-shadow .7s ease;
}
.ct-card::after{
    content:'';
    position:absolute;
    left:14%;right:14%;top:-1px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(234,255,251,.8),transparent);
    transform:scaleX(0);
    transition:transform .9s var(--ease-out-expo);
}
.ct-card:hover{
    transform:translateY(-3px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 36px 70px -36px rgba(47,111,237,.5), 0 26px 50px -30px rgba(0,0,0,.85);
}
.ct-card:hover::after,
.ct-card.reveal-done::after{transform:scaleX(1);}
.ct-card h3{font-size:1.18rem;letter-spacing:-.02em;margin-bottom:8px;}
.ct-card p{font-size:.92rem;line-height:1.72;}

.ct-card-own{
    background:
        var(--ct-noise) padding-box,
        radial-gradient(380px circle at var(--mx,-600px) var(--my,-600px), rgba(91,141,255,.12), transparent 62%) padding-box,
        radial-gradient(90% 80% at 100% 100%, rgba(31,201,195,.12), transparent 60%) padding-box,
        radial-gradient(100% 90% at 0% 0%, rgba(47,111,237,.2), transparent 60%) padding-box,
        linear-gradient(180deg,#131319,#0d0d12) padding-box,
        linear-gradient(150deg,rgba(91,141,255,.55),rgba(255,255,255,.05) 40%,rgba(31,201,195,.35)) border-box;
}
.ct-card-own h3{font-size:clamp(1.5rem,5vw,1.95rem);letter-spacing:-.03em;margin-bottom:12px;}
.ct-card-ico{
    width:50px;height:50px;
    border-radius:15px;
    display:grid;place-items:center;
    margin-bottom:22px;
    color:#eafffb;
    border:1px solid transparent;
    background:
        radial-gradient(90% 90% at 30% 20%, rgba(91,141,255,.4), rgba(47,111,237,.1) 70%) padding-box,
        linear-gradient(150deg,var(--accent-hot),var(--wave-teal)) border-box;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 12px 28px -10px rgba(47,111,237,.7);
    transition:transform .6s var(--ease-smooth);
}
.ct-card-ico svg{width:24px;height:24px;}
.ct-card-own:hover .ct-card-ico{transform:rotate(-12deg) scale(1.05);}
/* Filas tipo "título de propiedad": qué es tuyo y en qué condición.
   El estado es una pastilla con sello que se dibuja en cascada. */
.ct-own-list{
    list-style:none;
    display:grid;
    gap:8px;
    margin-top:24px;
}
.ct-own-list li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 12px 12px 16px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.06);
    background:rgba(8,8,12,.5);
    transition:border-color .4s ease, background .4s ease;
}
.ct-own-list li:hover{border-color:rgba(91,141,255,.3);background:rgba(47,111,237,.06);}
.ct-own-list span{font-size:.93rem;font-weight:600;color:var(--white);}
.ct-own-list em{
    position:relative;
    display:inline-flex;
    align-items:center;
    padding:6px 12px 6px 34px;
    border-radius:999px;
    border:1px solid rgba(31,201,195,.28);
    background:rgba(31,201,195,.07);
    font-style:normal;
    font-family:var(--font-mono);
    font-size:.62rem;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:#bff5f1;
    text-align:right;
    white-space:nowrap;
}
.ct-own-list em::before, .ct-own-list em::after{left:8px;top:50%;margin-top:-9px;}
/* Cada fila se "firma" en cascada cuando la tarjeta termina de entrar */
.ct-js .ct-own-list li{opacity:0;transform:translateX(-10px);transition:opacity .6s ease, transform .8s var(--ease-out-expo), border-color .4s ease, background .4s ease;}
.ct-js .ct-card-own.show .ct-own-list li{opacity:1;transform:none;}
.ct-card-own.show .ct-own-list li:nth-child(1){transition-delay:.35s, .35s, 0s, 0s;}
.ct-card-own.show .ct-own-list li:nth-child(2){transition-delay:.45s, .45s, 0s, 0s;}
.ct-card-own.show .ct-own-list li:nth-child(3){transition-delay:.55s, .55s, 0s, 0s;}
.ct-card-own.show .ct-own-list li:nth-child(4){transition-delay:.65s, .65s, 0s, 0s;}
.ct-card-own.show .ct-own-list li:nth-child(1) em::before, .ct-card-own.show .ct-own-list li:nth-child(1) em::after{transition-delay:.7s;}
.ct-card-own.show .ct-own-list li:nth-child(2) em::before, .ct-card-own.show .ct-own-list li:nth-child(2) em::after{transition-delay:.8s;}
.ct-card-own.show .ct-own-list li:nth-child(3) em::before, .ct-card-own.show .ct-own-list li:nth-child(3) em::after{transition-delay:.9s;}
.ct-card-own.show .ct-own-list li:nth-child(4) em::before, .ct-card-own.show .ct-own-list li:nth-child(4) em::after{transition-delay:1s;}

.ct-card-fig{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-bottom:16px;
}
.ct-big{
    font-size:3.4rem;
    font-weight:800;
    line-height:.9;
    letter-spacing:-.05em;
    background:linear-gradient(135deg,var(--white) 30%,var(--accent-hot) 75%,var(--wave-teal));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.ct-card-fig small{
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--gray-mid);
}

/* =====================================================================
   8. CIERRE
   ===================================================================== */
.ct-final{padding:40px 0 100px;position:relative;}
.ct-final-card{
    position:relative;
    display:grid;
    gap:28px;
    padding:34px 24px;
    border-radius:var(--ct-radius);
    border:1px solid rgba(91,141,255,.26);
    background:
        radial-gradient(90% 120% at 0% 100%, rgba(31,201,195,.12), transparent 60%),
        radial-gradient(90% 120% at 100% 0%, rgba(47,111,237,.2), transparent 60%),
        var(--bg-card);
    overflow:hidden;
    isolation:isolate;
}
/* Malla triangular que se revela alrededor del cursor: el mismo recurso
   que el fondo de "Por qué elegirme" en index.html (script.js), portado
   a esta tarjeta en como-trabajo.js. */
.ct-final-grid{
    position:absolute;
    inset:0;
    z-index:-1;
    width:100%;height:100%;
    pointer-events:none;
}
.ct-final-copy h2{
    font-size:clamp(1.8rem,7vw,2.9rem);
    line-height:1.08;
    letter-spacing:-.03em;
    margin:4px 0 14px;
}
.ct-final-copy p{font-size:.98rem;max-width:520px;}
.ct-final-actions{display:flex;flex-direction:column;gap:22px;}
.ct-final-actions .btn{width:100%;}
.ct-final-alt{font-size:.82rem;color:var(--gray-mid);margin-top:4px;text-align:center;}
.ct-final-alt a{
    color:var(--white);
    text-decoration:underline;
    text-decoration-color:rgba(91,141,255,.55);
    text-underline-offset:3px;
    transition:color .3s ease;
}
.ct-final-alt a:hover{color:var(--accent-hot);}

/* =====================================================================
   9. ENTRADAS Y SALIDAS ATADAS AL SCROLL
   Tarjetas de etapa y de compromisos (.ct-sd): entran levantándose desde
   abajo con un leve giro 3D que se endereza mientras una máscara las
   descubre; al salir por arriba se hunden y se apagan. Todo sigue al
   scroll (view()), así que responde en ambos sentidos. como-trabajo.js
   les quita .reveal en estos navegadores para que no se sumen las dos
   entradas; sin soporte (Safari, Firefox) queda el reveal de siempre.
   El clip-path deja margen a los costados para no cortar el rombo del
   riel, que vive por fuera de la tarjeta.
   ===================================================================== */
@supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
        /* Sólo posición y opacidad: la tarjeta tiene su tamaño real desde
           el primer cuadro (antes también escalaba y giraba en 3D, y se
           veía achicarse y agrandarse). */
        .ct-sd{
            animation:ctSdIn linear both, ctSdOut linear both;
            animation-timeline:view(), view();
            animation-range:entry 0% entry 90%, exit 20% exit 100%;
        }
        @keyframes ctSdIn{
            from{opacity:0;transform:translateY(70px);}
            to{opacity:1;transform:none;}
        }
        @keyframes ctSdOut{
            to{opacity:.15;transform:translateY(-30px);}
        }
        /* En desktop se suma la máscara que la descubre (clip-path no se
           anima en el compositor: en mobile restaba fluidez al scroll). */
        @media (min-width:1024px){
            .ct-sd{
                /* ctSdMask con fill "backwards": al terminar la entrada su
                   valor final equivale a no recortar, y dejarlo aplicado
                   hacía que Chrome repintara TODAS las tarjetas en cada
                   cuadro de cualquier otra animación de la página. */
                animation:ctSdIn linear both, ctSdMask linear backwards, ctSdOut linear both;
                animation-timeline:view(), view(), view();
                animation-range:entry 0% entry 90%, entry 0% entry 90%, exit 20% exit 100%;
            }
            @keyframes ctSdMask{
                from{clip-path:inset(-40% -120px 55% -120px);}
                to{clip-path:inset(-40% -120px -40% -120px);}
            }
        }
    }
}

/* =====================================================================
   10. BREAKPOINTS
   ===================================================================== */
/* Hero en mobile/tablet: copy centrado. Cada frase es un bloque y se
   balancea sola (nunca queda una palabra suelta en el último renglón):
   "Iniciamos con / una reunión / y continuamos / con tu web." */
@media (max-width:1023px){
    .ct-title .ct-line{display:block;text-wrap:balance;}
    .ct-lead{margin-left:auto;margin-right:auto;text-wrap:pretty;}
}
/* Celular: más compacto para que título, texto, botón y escalera entren
   en la primera pantalla (los datos quedan justo debajo) */
@media (max-width:767px){
    .ct-hero{padding-top:calc(var(--ct-hdr) + 16px);}
    .ct-hero-grid{row-gap:0;}
    .ct-title{margin-bottom:24px;}
    .ct-lead{font-size:.95rem;line-height:1.72;}
    .ct-hero-cta{margin-top:36px;}
    /* La escalera ya no se comprime para entrar en la primera pantalla: el
       texto ocupa la primera vista y la escalera viene después, a todo el
       ancho y más alta (su entrada espera a que se vea, bloque CARACOL de
       como-trabajo.js). Geometría propia, más vertical: más alto entre
       escalones y cámara menos inclinada; --k-w/h/cx/cy/py medidos para
       esta geometría (rótulos de 14px incluidos, 1.5em de margen). */
    .ct-hero{justify-content:flex-start;}
    .ct-hero-copy{min-height:calc(100svh - var(--ct-hdr) - 16px - 40px);justify-content:center;}
    /* Mismo aire arriba y abajo de la escalera: --gap es la distancia entre
       su borde visible y el elemento más cercano (el botón arriba, el borde
       del marco abajo). --f/--e replican el escalado de .ct-cs-stage (el
       ancho manda, --k-w/--k-h de abajo) para saber cuánto aire propio ya
       trae la escena (--e); --d agrega el resto debajo. Arriba, la holgura
       con que el texto queda centrado en la primera pantalla (--ct-slack,
       la mide como-trabajo.js) se absorbe con un margen negativo. Si el
       JS no corre, queda sin absorber y sólo es más espacio arriba. */
    .ct-cs-frame{
        --gap:68px;
        --fh:min(118vw, 520px);
        --f:min(calc(100vw / 57.4), calc(var(--fh) / 64.6));
        --e:calc((var(--fh) - 64.6 * var(--f)) / 2 + 1.5 * var(--f));
        --d:max(0px, calc(2 * (var(--gap) - var(--e))));
        margin:calc(var(--ct-slack, 0px) * -1) calc(var(--container-pad) * -1) 44px;
        height:calc(var(--fh) + var(--d));
    }
    /* El marco crece por --d pero la escena conserva su escala */
    .ct-cs-stage{font-size:min(100cqi / var(--k-w), var(--fh) / var(--k-h));}
    .ct-hero-facts{padding-top:28px;}
    .ct-cs{--k-step:10;--k-tilt:16;--k-w:57.4;--k-h:64.6;--k-cx:32.2;--k-cy:61.4;--k-py:39.4;}
}

@media (min-width:560px){
    .ct-hero-cta{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:12px;}
    .ct-hero-cta .btn{width:auto;}
    .ct-hero-cta .btn-sep, .ct-final-actions .btn-sep{display:block;}
    .ct-handoff{grid-template-columns:repeat(3,1fr);}
    .ct-handoff li{grid-template-columns:1fr;grid-template-rows:auto;row-gap:4px;align-content:start;}
    .ct-handoff-ico{grid-row:auto;margin-bottom:10px;}
    .ct-plan{grid-template-columns:auto 1fr;gap:28px;align-items:center;}
    .ct-plan-price{flex-direction:column;align-items:flex-start;gap:4px;padding-right:28px;border-right:1px solid rgba(255,255,255,.08);}
    .ct-final-actions{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:12px;}
    .ct-final-actions .btn{width:auto;}
    .ct-final-alt{width:100%;}
}

@media (min-width:768px){
    /* Tablet: escalones más separados (con 6.5 quedaban encimados) y marco
       más alto para que la escalera use el espacio; --k-w/h/cx/cy/py
       medidos para esta geometría (desktop la pisa en su bloque) */
    .ct-cs-frame{height:clamp(320px, 56svh, 600px);}
    .ct-cs{--k-step:11;--k-tilt:18;--k-w:56.4;--k-h:69.1;--k-cx:31.82;--k-cy:64.81;--k-py:42.81;}
    .ct-promises{padding:60px 0 40px;}
    .ct-journey{padding:70px 0 90px;}
    .ct-steps{--gut:56px;--pad-t:32px;--ico:46px;}
    .ct-step{padding:var(--pad-t) 34px 34px;}
    .ct-mbar{top:92px;right:32px;}
    .ct-bento{grid-template-columns:1.2fr 1fr;}
    .ct-card-own{grid-row:span 2;padding:36px 34px;display:flex;flex-direction:column;}
    .ct-card-own p{margin-bottom:28px;}
    .ct-card-own .ct-own-list{margin-top:auto;}
    .ct-final-card{padding:52px 48px;}
}

@media (min-width:1024px){
    /* Texto + datos a la izquierda, escalera a la derecha */
    .ct-hero{--ct-hdr:78px;padding:calc(var(--ct-hdr) + 24px) 0 40px;}
    .ct-hero-grid{
        grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
        grid-template-areas:"copy stage";
        grid-template-rows:auto;
        align-content:center;
        column-gap:clamp(24px,3vw,56px);row-gap:44px;
    }
    .ct-hero-copy{grid-area:copy;align-self:center;align-items:flex-start;text-align:left;}
    /* La frase "Te detallo cada uno de los pasos…" repetía la última del
       texto y el botón: en desktop se quita para darle aire al título */
    .ct-hero-facts{display:none;}
    .ct-cs-frame{grid-area:stage;align-self:center;height:min(calc(100svh - var(--ct-hdr) - 64px), 720px);}
    .ct-hero-copy{max-width:760px;}
    .ct-hero{--aura-x:74%;--aura-y:52%;}
    /* Título protagonista: lo más grande que permite su columna ("y
       continuamos", el renglón más largo, mide ~7.1em: 13.6cqi lo deja
       entrar siempre en una línea), con tope por alto para que el hero
       siga entrando en una pantalla (1280x720) */
    .ct-hero-copy{container-type:inline-size;}
    .ct-title{font-size:clamp(3.2rem, min(13.6cqi, 9.2svh), 6rem);line-height:1;letter-spacing:-.04em;margin-bottom:28px;}
    .ct-title .ct-line{display:block;text-wrap:balance;}
    .ct-title .text-accent.ct-line{margin-inline:0;}
    .ct-lead{margin:8px 0 0;max-width:470px;text-wrap:pretty;}
    .ct-hero-cta{justify-content:flex-start;}
    /* Abanico más abierto en pantallas anchas y más alto entre escalones
       (con 6.5 quedaban encimados y sobraba alto en la columna): la
       escalera usa el alto disponible y sólo se achica si no entra.
       --k-w/h/cx/cy/py medidos para esta geometría (rótulos y luz
       incluidos, 1.5em de margen). */
    .ct-cs{--k-phi0:-88;--k-dphi:30;--k-step:11;--k-tilt:18;--k-w:57.6;--k-h:67.4;--k-cx:31.45;--k-cy:62.03;--k-py:40.03;}
    /* Columna fija más ancha que antes (era 268px): el navegador es lo
       que más espacio pide; las tarjetas siguen teniendo ~600-700px. */
    .ct-journey-grid{
        display:grid;
        grid-template-columns:minmax(300px,.58fr) minmax(0,1fr);
        column-gap:56px;
        align-items:start;
    }
    /* La columna fija ocupa todo el alto disponible: índice arriba, la
       navegador del recorrido abajo, ocupando todo lo que sobra. */
    .ct-index{
        --ct-top:clamp(84px, 13vh, 112px);
        grid-column:1;
        grid-row:1 / span 2;
        position:sticky;
        top:var(--ct-top);
        display:flex;
        flex-direction:column;
        gap:clamp(8px, 1.6vh, 16px);
        height:calc(100vh - var(--ct-top) - 24px);
        height:calc(100dvh - var(--ct-top) - 24px);
        container:ctidx / size;
    }
    .ct-steps{grid-column:2;grid-row:1;}
    /* Navegador del recorrido: ocupa el alto libre debajo del índice. El
       ancho sale del alto (barra 36px + viewport 16:10) para que entre
       entero; si el hueco es casi nulo se oculta sin salir del layout. */
    .ct-br-place{
        flex:1 1 0;min-height:0;
        display:flex;align-items:center;justify-content:center;
        margin:0 -16px;
        container-type:size;
    }
    .ct-br-place .ct-br{width:min(100cqw, (100cqh - 36px) * 1.6);}
    @container (max-height:200px){
        .ct-br-place .ct-br{visibility:hidden;}
    }
    /* Índice más chico que el de las páginas legales, para dejarle lugar
       al navegador del recorrido */
    .ct-toc{padding:0 16px 14px;}
    .ct-toc-head{padding:14px 0 14px;font-size:.64rem;}
    .ct-toc-list{display:flex;flex-direction:column;gap:4px;}
    .ct-toc-list a{padding:7px 12px;font-size:.8rem;line-height:1.3;}
    .ct-toc-list a b{font-size:.64rem;}
    /* Columna baja (pantallas de poca altura, zoom, texto grande): el
       índice pasa a ser igual a la barra mobile (.ct-mbar): una pastilla
       con "Etapa N de 6 | nombre" y el progreso como línea inferior. */
    @container ctidx (max-height:700px){
        .ct-toc{
            position:relative;overflow:hidden;border-radius:14px;padding:0 20px;
            background:var(--ct-pill-bg);
            border-color:rgba(31,201,195,.2);
            box-shadow:var(--ct-pill-shadow);
        }
        .ct-toc::before{
            content:'';
            position:absolute;inset:0;
            z-index:1;
            pointer-events:none;
            border-radius:inherit;
            padding:1px;
            background:var(--ct-pill-ring);
            -webkit-mask:var(--ct-pill-fade), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite:source-in, xor;
            mask:var(--ct-pill-fade), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite:intersect, exclude;
        }
        .ct-toc::after{
            content:'';
            position:absolute;
            left:0;right:0;bottom:0;
            height:2px;
            background:linear-gradient(90deg, rgba(31,201,195,.55), #5cf0e4);
            box-shadow:0 0 10px rgba(31,201,195,.75);
            transform-origin:left;
            transform:scaleX(var(--p,0));
        }
        .ct-toc-head{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:14px 72px 15px 0;}
        .ct-toc-label, .ct-toc-list{display:none;}
        .ct-toc-count{
            white-space:nowrap;
            font-size:.68rem;
            letter-spacing:.22em;
            color:rgba(190,240,235,.62);
            margin-left:0;
        }
        .ct-toc-count b{color:#fff;text-shadow:0 0 12px rgba(31,201,195,.95);}
        .ct-toc-name{
            display:block;
            flex:none;min-width:0;max-width:100%;
            font-family:var(--font-sans);
            font-size:1.04rem;
            line-height:1.2;
            font-weight:700;
            letter-spacing:-.01em;
            text-transform:none;
            color:var(--white);
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        /* Emblema AJS plano en el extremo derecho, separado por un filete */
        .ct-toc-seal{
            display:block;
            position:absolute;right:16px;top:50%;
            width:46px;height:46px;
            margin-top:-23px;
        }
        .ct-toc-head::after{
            content:'';
            position:absolute;right:76px;top:16px;bottom:16px;width:1px;
            background:linear-gradient(180deg, transparent, rgba(31,201,195,.35), transparent);
        }
    }
    .ct-mbar{display:none;}
    /* Con JS el navegador vive en #ctBrSlot; sin JS queda acá abajo. */
    html.ct-js .ct-showcase{display:none;}
    .ct-steps{max-width:780px;}
    .ct-promises{padding:70px 0 40px;}
    .ct-final-card{grid-template-columns:1.25fr .75fr;align-items:center;gap:48px;padding:64px 60px;}
    .ct-final-actions{flex-direction:column;align-items:stretch;gap:20px;}
    .ct-final-actions .btn{width:100%;}
    .ct-final-actions .btn-sep{display:none;}
    .ct-final-alt{text-align:center;}
}
/* Desktop: los blobs de fondo miden lo mismo que en mobile (340px), pero
   en una pantalla ancha quedaban chiquitos y casi no se notaba su baile.
   "scale" (propiedad independiente) los agranda sin pisar el transform de
   su animación. */
@media (min-width:1024px){
    .ct-page .blob{scale:2.1;}
    .ct-page .blob-blue{opacity:.3;}
    .ct-page .blob-teal{opacity:.24;}
}

/* =====================================================================
   11. REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
    .ct-in, .ct-title, .ct-line{animation:none !important;opacity:1;transform:none;filter:none;}
    .ct-cs, .ct-cs *{animation:none !important;}
    .ct-cs-spin{visibility:visible !important;}
    .ct-mbar-name.is-flip{animation:none;}
    .ct-step.is-active .ct-step-kicker{animation:none;}
    .ct-rail-fill::before{animation:none;}
    .ct-hl{animation:none;background-position:50% 100%;background-size:300% 2px;transition:none;}
    .ct-step, .ct-step::before, .ct-step::after, .ct-node, .ct-card, .ct-card::after, .ct-pay-seg::before, .ct-handoff li, .ct-step-ico{transition:none;}
    .ct-card:hover, .ct-handoff li:hover, .ct-step:hover .ct-step-ico{transform:none;}
    .ct-js .ct-own-list li{opacity:1;transform:none;transition:none;}
    .ct-js .ct-seal-host::before, .ct-js .ct-seal-host::after{transition:none;transform:none;opacity:1;clip-path:none;}
    .ct-pay-seg::before{transform:scaleX(1);}
    .ct-toc-name.is-flip{animation:none;}
    .ct-coin-spin{animation:none;transform:rotateY(-12deg) rotateX(4deg);}
    .ct-js .ct-toc, .ct-js .ct-toc-head > *, .ct-js .ct-toc-list li, .ct-js .ct-toc-list::before{opacity:1;transform:none;transition:none;}
    .ct-toc-shine{display:none;}
}