/* De qué hablo · «tres conversaciones» (fase 1)
   Cristal líquido sobre ónix: fondo blanco al 8 %, blur(18px) saturate(140%), borde de 1 px de blanco .35 a .05,
   arista especular a 120° (blanco .40 → transparente) y sombra 0 12px 40px rgb(0 0 0/.25).
   Movimiento: entrada cubic-bezier(.2,.7,.2,1), salida cubic-bezier(.4,0,1,1); bloques de 520 ms, palabras que suben 12 px
   cada 70 ms, motivos de 900 ms una sola vez. Sólo transform y opacity.
   Los estados iniciales sólo existen bajo .cf-vivo (lo pone conferencias.js): sin JS, todo está quieto y completo. */

.cf{
 --cf-onix:#0b0a0c;--cf-rosa:#c45c7c;--cf-rosa-s:#e6b4c2;--cf-rosa-t:#9e2f55;--cf-perla:#f3dde4;
 --cf-plat:#d9d7dc;--cf-plat-c:#f3f2f5;
 --cf-entra:cubic-bezier(.2,.7,.2,1);--cf-sale:cubic-bezier(.4,0,1,1);
 --cf-px:max(24px,env(safe-area-inset-left,0px));
 position:relative;isolation:isolate;overflow:clip;
 padding:clamp(96px,14svh,150px) var(--cf-px) clamp(88px,12svh,132px);
 background:var(--cf-onix);color:var(--cf-plat-c);
}
.cf-frente{position:relative;z-index:2;max-width:1180px;margin-inline:auto}

/* Lo que el cristal refracta: tres orbes de la paleta, muy bajos, con un leve paralaje de scroll */
.cf-fondo{position:absolute;inset:0;z-index:0;pointer-events:none}
.cf-orbe{position:absolute;display:block;border-radius:50%;transform:translate3d(0,var(--oy,0px),0);will-change:transform}
.cf-orbe-a{width:min(92vw,620px);aspect-ratio:1;left:-28vw;top:30%;
 background:radial-gradient(closest-side,rgb(196 92 124/.42),rgb(158 47 85/.18) 55%,rgb(158 47 85/0))}
.cf-orbe-b{width:min(70vw,520px);aspect-ratio:1;right:-22vw;top:44%;
 background:radial-gradient(closest-side,rgb(243 221 228/.16),rgb(217 215 220/.05) 60%,rgb(217 215 220/0))}
.cf-orbe-c{width:min(56vw,380px);aspect-ratio:1;left:38%;top:62%;
 background:radial-gradient(closest-side,rgb(230 180 194/.22),rgb(230 180 194/0))}

/* Cabeza */
.cf-etq{color:var(--cf-rosa-s)}
.cf-titular{margin-top:18px;max-width:13ch;color:var(--cf-plat-c)}
.cf-titular em{color:var(--cf-rosa-s)}
.cf-w{display:inline-block;font-style:inherit}

/* La pista: carrusel en el teléfono */
.cf-pista{list-style:none;margin:40px calc(-1 * var(--cf-px)) 0;padding:6px 0 28px;
 display:grid;grid-auto-flow:column;grid-auto-columns:var(--cf-ancho);gap:12px;
 --cf-ancho:min(78vw,340px);
 padding-inline:calc((100vw - var(--cf-ancho)) / 2);
 overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cf-pista::-webkit-scrollbar{display:none}
.cf-carta{scroll-snap-align:center;scroll-snap-stop:always;display:flex;
 transform:scale(var(--cf-s,1));opacity:var(--cf-o,1);transform-origin:50% 50%;will-change:transform,opacity}

/* El cristal */
.cf-cara{position:relative;flex:1;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;
 padding:20px 20px 24px;
 background:linear-gradient(180deg,rgb(11 10 12/0) 40%,rgb(11 10 12/.28)),rgb(255 255 255/.08);
 -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
 box-shadow:0 12px 40px rgb(0 0 0/.25),inset 0 1px 0 rgb(255 255 255/.10)}
/* Borde de 1 px: blanco .35 arriba, .05 abajo */
.cf-cara::after,.cf-cara::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
 -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)}
.cf-cara::after{background:linear-gradient(180deg,rgb(255 255 255/.35),rgb(255 255 255/.05))}
/* Arista especular superior: 120°, blanco .40 → transparente */
.cf-cara::before{padding:1.5px;background:linear-gradient(120deg,rgb(255 255 255/.40),rgb(255 255 255/0) 38%)}
/* El brillo que sigue al puntero (computadora) o al scroll (teléfono): máximo 8 px, 120 ms */
.cf-brillo{position:absolute;inset:-12px;z-index:0;pointer-events:none;border-radius:inherit;
 background:radial-gradient(70% 46% at 24% 0%,rgb(255 255 255/.16),rgb(255 255 255/0) 70%),
            radial-gradient(60% 40% at 100% 100%,rgb(230 180 194/.10),rgb(230 180 194/0) 70%);
 transform:translate3d(var(--bx,0px),var(--by,0px),0);transition:transform .12s var(--cf-entra)}
.cf-cara>*:not(.cf-brillo){position:relative;z-index:1}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .cf-cara{background:rgb(28 26 31/.92)}
}

.cf-num{margin:0;display:flex;align-items:center;gap:12px;font:500 10.5px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
.cf-num b{font:italic 400 38px/.9 "Bodoni Moda",Didot,Georgia,serif;letter-spacing:-.02em;color:var(--cf-rosa-s)}
.cf-num-l{flex:1;height:1px;background:linear-gradient(90deg,rgb(243 242 245/.28),rgb(243 242 245/.06));transform-origin:0 50%}
.cf-num span{color:rgb(243 242 245/.45)}

/* El escenario del motivo */
.cf-motivo{margin:18px -4px 0;padding:0}
.cf-motivo svg{display:block;width:100%;height:auto;overflow:visible}
.cf-m1-tacha,.cf-m1-subraya,.cf-m1-fila,.cf-m2-aguja,.cf-m3-barrido,.cf-m3-una,.cf-m3-fin,.cf-m3-nudo{transform-box:fill-box}
.cf-sv-etq{font:500 11.5px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;fill:rgb(243 242 245/.55)}
.cf-sv-rosa{fill:var(--cf-rosa-s)}
.cf-sv-base{stroke:rgb(243 242 245/.14);stroke-width:1}

/* 1 · El titular tachado que se vuelve un dato subrayado */
.cf-m1-tit rect{fill:rgb(243 242 245/.30)}
.cf-m1-tit{opacity:.38}
.cf-m1-tacha{stroke:var(--cf-rosa-s);stroke-width:1.5;stroke-linecap:round;transform-origin:0 50%}
.cf-m1-punto{fill:var(--cf-rosa)}
.cf-m1-txt{font:500 12.5px "JetBrains Mono",ui-monospace,monospace;fill:var(--cf-plat-c)}
.cf-m1-subraya{stroke:var(--cf-rosa);stroke-width:2;stroke-linecap:round;transform-origin:0 50%}

/* 2 · La manecilla que recorre la primera hora */
.cf-m2-cara{fill:rgb(255 255 255/.03);stroke:rgb(243 242 245/.30);stroke-width:1}
.cf-m2-marcas line{stroke:var(--cf-rosa-s);stroke-width:1.5;stroke-linecap:round}
.cf-m2-aguja{transform-origin:50% 50%}
.cf-m2-aguja line{stroke:var(--cf-perla);stroke-width:1.5;stroke-linecap:round}
.cf-m2-eje{fill:var(--cf-rosa)}
.cf-m2-cuenta{font:400 44px "Bodoni Moda",Didot,Georgia,serif;fill:var(--cf-plat-c);letter-spacing:-.01em}
.cf-m2-u{font:500 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;fill:var(--cf-rosa-s);text-transform:uppercase}

/* 3 · La IA propone (las ramas) y el criterio decide (una sola línea) */
.cf-m3-barrido{transform-origin:0 50%}
.cf-m3-rama{fill:none;stroke:rgb(243 242 245/.55);stroke-width:1.1;stroke-linecap:round}
.cf-m3-op{fill:var(--cf-onix);stroke:rgb(243 242 245/.7);stroke-width:1.1}
.cf-m3-otra{opacity:.32}
.cf-m3-ini{fill:var(--cf-plat-c)}
.cf-m3-una{stroke:var(--cf-rosa);stroke-width:2;stroke-linecap:round;transform-origin:0 50%}
.cf-m3-fin{fill:var(--cf-rosa);stroke:var(--cf-perla);stroke-width:1}
.cf-m3-elegida{fill:none;stroke:var(--cf-rosa-s);stroke-width:1.5;stroke-linecap:round}
.cf-m3-nudo{fill:var(--cf-onix);stroke:var(--cf-rosa-s);stroke-width:1.25}

/* Texto de la tarjeta */
.cf-titulo{margin:auto 0 0;padding-top:18px;font:400 clamp(27px,7.2vw,34px)/1.08 "Bodoni Moda",Didot,Georgia,serif;letter-spacing:-.01em;color:var(--cf-plat-c);text-wrap:balance}
.cf-titulo em{color:var(--cf-rosa-s)}
.cf-promesa{margin:14px 0 0;text-wrap:balance;font:400 16px/1.55 Archivo,"Helvetica Neue",Arial,sans-serif;color:rgb(243 242 245/.80)}
.cf-clave{position:relative;white-space:nowrap;color:var(--cf-plat-c)}
.cf-clave::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;border-radius:1px;background:var(--cf-rosa);transform-origin:0 50%}

/* Puntos del carrusel */
.cf-puntos{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-6px}
.cf-puntos[hidden]{display:none}
.cf-cuenta{font:500 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;color:rgb(243 242 245/.5)}
.cf-cuenta b{font-weight:500;color:var(--cf-rosa-s)}
.cf-botones{display:flex}
.cf-botones button{display:grid;place-items:center;width:44px;height:44px;border-radius:12px}
.cf-botones i{display:block;width:7px;height:7px;border-radius:50%;background:rgb(243 242 245/.32);transition:transform .2s var(--cf-entra),opacity .2s var(--cf-entra)}
.cf-botones i::after{content:"";display:block;width:100%;height:100%;border-radius:50%;background:var(--cf-rosa);opacity:0;transition:opacity .2s var(--cf-entra)}
.cf-botones [aria-current] i{transform:scale(1.45)}
.cf-botones [aria-current] i::after{opacity:1}

/* Formatos y llamada */
.cf-pie{display:grid;gap:26px;margin-top:30px}
.cf-formatos-t{margin:0 0 12px;font:600 10.5px/1.4 Archivo,sans-serif;font-stretch:118%;letter-spacing:.22em;text-transform:uppercase;color:rgb(243 242 245/.55)}
.cf-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cf-chips li{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:12px;
 font:500 14px/1 Archivo,sans-serif;color:var(--cf-plat-c);
 background:rgb(255 255 255/.06);border:1px solid rgb(255 255 255/.14)}
.cf-chip-dur{font:600 12px/1 Archivo,sans-serif;letter-spacing:.02em;color:var(--cf-rosa-s)}
@media (max-width:899px){
 .cf-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .cf-chips li{justify-content:center;min-height:40px;padding:0 10px;font-size:13.5px;gap:6px}
 .cf-cta{display:flex}
}
.cf-cta{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:18px;
 min-height:56px;padding:0 22px 0 24px;border-radius:16px;text-decoration:none;
 font:600 13px/1 Archivo,sans-serif;font-stretch:112%;letter-spacing:.16em;text-transform:uppercase;color:#fff;
 background:linear-gradient(120deg,rgb(196 92 124/.92),rgb(158 47 85/.92));
 box-shadow:0 12px 40px rgb(0 0 0/.25),0 0 0 1px rgb(255 255 255/.16) inset}
.cf-cta::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;padding:1.5px;pointer-events:none;
 background:linear-gradient(120deg,rgb(255 255 255/.40),rgb(255 255 255/0) 40%);
 -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)}
.cf-cta .cf-brillo{z-index:-1;background:radial-gradient(60% 90% at 30% 0%,rgb(255 255 255/.22),rgb(255 255 255/0) 70%)}
.cf-cta-f{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
 transition:transform .2s var(--cf-entra)}
.cf-cta:hover .cf-cta-f,.cf-cta:focus-visible .cf-cta-f{transform:translateX(4px)}
.cf-cta:focus-visible{outline:2px solid var(--cf-perla);outline-offset:3px}

/* ——— Con movimiento (.cf-vivo lo pone el JS si no hay movimiento reducido) ——— */
/* La cabeza: el titular sube palabra por palabra */
.cf-vivo .cf-etq{opacity:0;transform:translateY(12px);transition:opacity .52s var(--cf-entra),transform .52s var(--cf-entra)}
.cf-vivo .cf-titular .cf-w{opacity:0;transform:translateY(12px);transition:opacity .52s var(--cf-entra) calc(120ms + var(--k) * 70ms),transform .52s var(--cf-entra) calc(120ms + var(--k) * 70ms)}
.cf-vivo .cf-cabeza.en .cf-etq,.cf-vivo .cf-cabeza.en .cf-titular .cf-w{opacity:1;transform:none}

/* El cristal entra con la sección (24 px, 520 ms, 80 ms entre tarjetas) */
.cf-vivo .cf-cara{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .52s var(--cf-entra) var(--cf-d,0ms),transform .52s var(--cf-entra) var(--cf-d,0ms)}
.cf-vivo .cf-pista.en .cf-cara{opacity:1;transform:none}

/* Dentro de cada tarjeta, al quedar a la vista: palabras, subrayados y motivo */
.cf-vivo .cf-carta .cf-titulo .cf-w{opacity:0;transform:translateY(12px)}
.cf-vivo .cf-carta.en .cf-titulo .cf-w{opacity:1;transform:none;transition:opacity .52s var(--cf-entra) calc(var(--cf-d,0ms) + 140ms + var(--k) * 70ms),transform .52s var(--cf-entra) calc(var(--cf-d,0ms) + 140ms + var(--k) * 70ms)}
.cf-vivo .cf-carta .cf-promesa{opacity:0;transform:translateY(12px)}
.cf-vivo .cf-carta.en .cf-promesa{opacity:1;transform:none;transition:opacity .52s var(--cf-entra) calc(var(--cf-d,0ms) + 420ms),transform .52s var(--cf-entra) calc(var(--cf-d,0ms) + 420ms)}
.cf-vivo .cf-carta .cf-num-l{transform:scaleX(0)}
.cf-vivo .cf-carta.en .cf-num-l{transform:none;transition:transform .6s var(--cf-entra) calc(var(--cf-d,0ms) + 80ms)}
.cf-vivo .cf-carta .cf-clave::after{transform:scaleX(0)}
.cf-vivo .cf-carta.en .cf-clave::after{transform:none;transition:transform .5s var(--cf-entra) calc(var(--cf-d,0ms) + 760ms + var(--c) * 80ms)}

/* Motivo 1 (900 ms): se tacha el titular (0–380), se apaga (300–540), sube el dato (380–800) y se subraya (520–900) */
.cf-vivo .cf-m1 .cf-m1-tacha{transform:scaleX(0)}
.cf-vivo .cf-m1 .cf-m1-tit{opacity:.9}
.cf-vivo .cf-m1 .cf-m1-fila{opacity:0;transform:translateY(12px)}
.cf-vivo .cf-m1 .cf-m1-subraya{transform:scaleX(0)}
.cf-vivo .cf-m1.on .cf-m1-tacha{transform:none;transition:transform .38s var(--cf-entra)}
.cf-vivo .cf-m1.on .cf-m1-tit{opacity:.38;transition:opacity .24s var(--cf-sale) .3s}
.cf-vivo .cf-m1.on .cf-m1-fila{opacity:1;transform:none;transition:opacity .36s var(--cf-entra) calc(300ms + var(--f) * 70ms),transform .36s var(--cf-entra) calc(300ms + var(--f) * 70ms)}
.cf-vivo .cf-m1.on .cf-m1-subraya{transform:none;transition:transform .34s var(--cf-entra) .56s}

/* Motivo 2 (900 ms): la manecilla da la vuelta completa y las marcas se encienden a su paso */
.cf-vivo .cf-m2 .cf-m2-aguja{transform:rotate(0deg)}
.cf-vivo .cf-m2.on .cf-m2-aguja{transform:rotate(360deg);transition:transform .9s cubic-bezier(.4,0,.2,1)}
.cf-vivo .cf-m2 .cf-m2-marcas line{opacity:.22}
.cf-vivo .cf-m2.on .cf-m2-marcas line{opacity:1;transition:opacity .16s var(--cf-entra) var(--td)}
.cf-m2-marcas line:nth-child(2){--td:149ms}.cf-m2-marcas line:nth-child(3){--td:196ms}.cf-m2-marcas line:nth-child(4){--td:230ms}
.cf-m2-marcas line:nth-child(5){--td:259ms}.cf-m2-marcas line:nth-child(6){--td:286ms}.cf-m2-marcas line:nth-child(7){--td:315ms}
.cf-m2-marcas line:nth-child(8){--td:347ms}.cf-m2-marcas line:nth-child(9){--td:385ms}.cf-m2-marcas line:nth-child(10){--td:433ms}
.cf-m2-marcas line:nth-child(11){--td:497ms}.cf-m2-marcas line:nth-child(12){--td:594ms}.cf-m2-marcas line:nth-child(1){--td:740ms}

/* Motivo 3 (900 ms): las propuestas se abren (0–650), se apagan las que no (520–760) y queda una línea (600–880) */
.cf-vivo .cf-m3 .cf-m3-barrido{transform:scaleX(0)}
.cf-vivo .cf-m3.on .cf-m3-barrido{transform:none;transition:transform .65s var(--cf-entra)}
.cf-vivo .cf-m3 .cf-m3-otra{opacity:1}
.cf-vivo .cf-m3.on .cf-m3-otra{opacity:.32;transition:opacity .24s var(--cf-sale) .52s}
.cf-vivo .cf-m3 .cf-m3-elegida,.cf-vivo .cf-m3 .cf-m3-nudo{opacity:0}
.cf-vivo .cf-m3.on .cf-m3-elegida{opacity:1;transition:opacity .24s var(--cf-entra) .52s}
.cf-vivo .cf-m3.on .cf-m3-nudo{opacity:1;transition:opacity .2s var(--cf-entra) .58s}
.cf-vivo .cf-m3 .cf-m3-una{transform:scaleX(0)}
.cf-vivo .cf-m3.on .cf-m3-una{transform:none;transition:transform .28s var(--cf-entra) .6s}
.cf-vivo .cf-m3 .cf-m3-fin{opacity:0;transform:scale(.98)}
.cf-vivo .cf-m3.on .cf-m3-fin{opacity:1;transform:none;transition:opacity .2s var(--cf-entra) .7s,transform .2s var(--cf-entra) .7s}

/* El pie: los formatos llegan uno a uno (70 ms) y luego la llamada */
.cf-vivo .cf-chips li,.cf-vivo .cf-formatos-t,.cf-vivo .cf-cta{opacity:0;transform:translateY(12px)}
.cf-vivo .cf-pie.en .cf-formatos-t{opacity:1;transform:none;transition:opacity .42s var(--cf-entra),transform .42s var(--cf-entra)}
.cf-vivo .cf-pie.en .cf-chips li{opacity:1;transform:none;transition:opacity .42s var(--cf-entra) calc(70ms + var(--c) * 70ms),transform .42s var(--cf-entra) calc(70ms + var(--c) * 70ms)}
.cf-vivo .cf-pie.en .cf-cta{opacity:1;transform:none;transition:opacity .48s var(--cf-entra) .38s,transform .48s var(--cf-entra) .38s}

/* ——— Computadora: tres columnas ——— */
@media (min-width:900px){
 .cf{padding-inline:max(48px,env(safe-area-inset-left,0px))}
 .cf-cabeza{display:grid;grid-template-columns:minmax(0,1fr);}
 .cf-titular{max-width:16ch;font-size:clamp(56px,6vw,88px)}
 .cf-pista{margin:56px 0 0;padding:0;overflow:visible;scroll-snap-type:none;grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;gap:20px}
 .cf-carta{transform:none;opacity:1}
 .cf-carta:nth-child(2){--cf-d:80ms;margin-top:40px;margin-bottom:-40px}.cf-carta:nth-child(3){--cf-d:160ms}
 .cf-promesa{font-size:17px}
 .cf-cara::after{transition:opacity .2s var(--cf-entra)}
 .cf-cara:hover::after{background:linear-gradient(180deg,rgb(255 255 255/.5),rgb(230 180 194/.18))}
 .cf-cara{padding:26px 26px 30px}
 .cf-titulo{font-size:clamp(28px,2.5vw,36px)}
 .cf-pie{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;margin-top:84px}
 .cf-orbe-a{left:-8vw;top:28%}
 .cf-orbe-b{right:-6vw;top:20%}
 .cf-orbe-c{left:44%;top:58%}
}

/* ——— Movimiento reducido: todo quieto, en su estado final ——— */
@media (prefers-reduced-motion:reduce){
 .cf-carta{transform:none!important;opacity:1!important}
 .cf-brillo,.cf-orbe{transform:none!important;transition:none!important}
 .cf-botones i,.cf-botones i::after,.cf-cta-f{transition:none}
 .cf-pista{scroll-behavior:auto}
}

/* Integración: en computadora el hilo de la casa baja en diagonal hacia la conversación y cruzaba la tarjeta 01.
   La sección (fondo ónix propio) queda por encima del hilo, como la trayectoria; reaparece en «Hablemos». */
@media(min-width:900px){.cf{z-index:2}}