/* Big Plum Connect v2: "WhatsApp, por el canal oficial" (prefijo x2-)
   Dos luces que se hablan a través del agua (portada): la lámpara de tu negocio y la ventana de quien te escribe.
   Dos escenas fijas: «Al abrir Connect» (el día contado en frases, que se vuelve paneles) y «Una conversación» (llega,
   24 horas para responder, responde quien toca, sabes que ha llegado y, pasadas las 24 horas, una plantilla). Después,
   lo que incluye, el permiso (BAJA en directo), lo que cobra Meta, los datos, lo que viene, lo que no es y el contacto */

.x2 { --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --x2-surface: #1c1b21; --x2-deep: #141318; --x2-line: rgba(245, 244, 241, .1); }
/* A: la lámpara de señales del muelle (63 %, 40 %) y, a la derecha, la casa que contesta. En móvil se encuadran las dos */
.x2-cover { --cover-focus: 63% 40%; --cover-stack-pos: 88% 50%; }

/* Dos luces que se hablan: la lámpara lanza un pulso y, al poco, la ventana de la casa contesta con dos destellos.
   Cada luz es la propia foto sumada sobre sí misma (screen) y recortada con una máscara sacada de la foto (su haz, su ventana),
   con la misma geometría cover que la imagen, así que no hay trazos encima ni bordes. Ciclo de 9 s */
.x2-pulse {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    animation: 9s ease-in-out 1.8s infinite both;
}

.x2-pulse--send { -webkit-mask-image: url(/assets/img/connect-v2/mascara-senal.webp); mask-image: url(/assets/img/connect-v2/mascara-senal.webp); animation-name: x2Send; }
.x2-pulse--reply { -webkit-mask-image: url(/assets/img/connect-v2/mascara-respuesta.webp); mask-image: url(/assets/img/connect-v2/mascara-respuesta.webp); animation-name: x2Reply; }
.x2-pulse--halo { background: rgb(255, 204, 140); -webkit-mask-image: url(/assets/img/connect-v2/mascara-halo.webp); mask-image: url(/assets/img/connect-v2/mascara-halo.webp); animation-name: x2Halo; }

@keyframes x2Send { 0% { opacity: 0; } 6% { opacity: .62; } 17% { opacity: .62; } 36% { opacity: 0; } 100% { opacity: 0; } }
@keyframes x2Reply { 0%, 40% { opacity: 0; } 43% { opacity: 1; } 47% { opacity: .1; } 51% { opacity: 1; } 57% { opacity: 0; } 100% { opacity: 0; } }
@keyframes x2Halo { 0%, 40% { opacity: 0; } 43% { opacity: .32; } 47% { opacity: .04; } 51% { opacity: .32; } 59% { opacity: 0; } 100% { opacity: 0; } }

@media (max-width: 820px) {
    .x2-pulse { -webkit-mask-position: var(--cover-stack-pos, 50% 50%); mask-position: var(--cover-stack-pos, 50% 50%); }
}

@media (prefers-reduced-motion: reduce) {
    .x2-pulse { animation: none; opacity: 0; }
}

/* ---------- Las dos escenas: escenario fijo con el texto a la izquierda y el dispositivo a la derecha ---------- */

.x2-today { position: relative; height: 430svh; background: var(--carbon); }
.x2-flow { position: relative; height: 600svh; background: var(--carbon-2); }

.x2-today__stage,
.x2-flow__stage {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
    height: 100lvh; /* lvh: sin hueco al esconderse la barra del móvil (31-10-2026) */
    padding: 6rem max(var(--gutter), calc((100% - 82rem) / 2)) 4rem;
    overflow: hidden;
}

.x2-today__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 35rem); }

.x2-today__text,
.x2-flow__text { position: relative; align-self: stretch; display: grid; align-content: center; }
.x2-today__text > .v3-kicker,
.x2-flow__text > .v3-kicker { position: absolute; top: clamp(2rem, 8vh, 5rem); }

.x2-say {
    grid-area: 1 / 1;
    max-width: 30rem;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s ease, transform 1s var(--ease-out);
    pointer-events: none;
}

.x2-say.is-on { opacity: 1; transform: none; transition-delay: .18s; pointer-events: auto; }
.x2-say.is-past { transform: translateY(-26px); }

.x2-say__n { margin: 0 0 1.2rem; color: rgba(var(--luz), .8); font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; }

.x2-say__title {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2.3rem, 4vw, 4rem);
    font-weight: 300;
    letter-spacing: -.025em;
    line-height: 1.04;
    text-wrap: balance;
}

.x2-say.is-on .v3-lit { --on: 1; }
.x2-say__line { max-width: 27rem; margin: 1.4rem 0 0; color: rgba(245, 244, 241, .68); font-size: clamp(.98rem, 1.05vw, 1.08rem); font-weight: 300; line-height: 1.7; }

.x2-flow__steps { position: absolute; bottom: calc(clamp(1rem, 5vh, 3rem) + var(--bar)); left: 0; display: flex; gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.x2-flow__steps li { color: rgba(245, 244, 241, .3); font-family: var(--mono); font-size: .66rem; transition: color .6s ease; }
.x2-flow__steps li.is-on { color: rgb(var(--luz-core)); }
.x2-flow__steps b { font-weight: 500; }

.x2-device__note { margin: 1rem 0 0; color: rgba(245, 244, 241, .32); font-size: .56rem; font-weight: 600; letter-spacing: .22em; text-align: right; text-transform: uppercase; }

/* ---------- Escena 1: «Al abrir Connect». La pantalla Hoy de la app, dibujada (no es una captura) ---------- */

.x2-app { position: relative; }

.x2-app__frame {
    position: relative;
    border: 1px solid var(--x2-line);
    border-radius: 1.1rem;
    background: var(--x2-deep);
    box-shadow: 0 50px 100px -60px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .3);
}

.x2-app__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem .8rem .75rem 1.1rem;
    border-bottom: 1px solid rgba(245, 244, 241, .07);
}

.x2-app__biz { display: inline-flex; align-items: center; gap: .6rem; color: rgba(245, 244, 241, .86); font-family: var(--serif); font-size: .95rem; font-weight: 400; white-space: nowrap; }
.x2-app__biz i { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: .4rem; color: var(--hueso); background: var(--ciruela); font-family: var(--serif); font-size: .78rem; font-style: normal; }

/* Frases · Paneles: el segmentado de la barra de Connect. Funciona de verdad: cambia la pantalla de al lado */
.x2-app__modes { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid rgba(245, 244, 241, .12); border-radius: 999px; }

.x2-app__mode {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 1.9rem;
    padding: 0 .8rem;
    border: 0;
    border-radius: 999px;
    color: rgba(245, 244, 241, .5);
    background: transparent;
    font-family: var(--serif);
    font-size: .82rem;
    font-weight: 300;
    cursor: pointer;
    transition: color .5s ease, background-color .5s ease;
}

.x2-app__mode svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.x2-app__mode[aria-pressed="true"] { color: var(--hueso); background: rgba(245, 244, 241, .1); font-style: italic; }
:where(html:not(.is-touch)) .x2-app__mode:hover { color: rgba(245, 244, 241, .85); }
.x2-app__mode:focus-visible { outline: 1px solid rgba(var(--luz), .8); outline-offset: 2px; }

.x2-app__day { position: relative; min-height: var(--x2-day-h, auto); padding: 1.9rem 2rem 1.6rem 2.7rem; }

/* La luz de la app: baja por el margen a medida que el día se cuenta (JS: --fill hasta la última frase encendida) */
.x2-app__edge { position: absolute; top: 2.1rem; bottom: 1.6rem; left: 1.35rem; width: 1px; background: rgba(245, 244, 241, .05); }

.x2-app__date { margin: 0; color: rgba(245, 244, 241, .55); font-size: .56rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.x2-app__hello { margin: .55rem 0 0; color: var(--hueso); font-family: var(--serif); font-size: clamp(1.7rem, 2.3vw, 2.15rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.x2-app__hello em { color: var(--ciruela-luz); }

.x2-app__lines { position: relative; display: grid; gap: .85rem; margin-top: 1.4rem; }

/* Una frase se intuye antes de que la alcance la luz (6 %, como el resto de la web) y se enfoca al llegar (JS: --in) */
.x2-line {
    --in: 0;
    margin: 0;
    color: rgba(245, 244, 241, .86);
    font-family: var(--serif);
    font-size: clamp(1rem, 1.18vw, 1.14rem);
    font-weight: 300;
    line-height: 1.5;
    opacity: calc(.06 + var(--in) * .94);
    filter: blur(calc((1 - var(--in)) * 3px));
}

.x2-line--soft { color: rgba(245, 244, 241, .52); }
.x2-line__key { color: var(--hueso); }
.x2-line__n { display: inline-block; font-weight: 300; }
.x2-line u { text-decoration: underline; text-decoration-color: rgba(176, 74, 151, .65); text-decoration-thickness: 1px; text-underline-offset: .24em; transition: text-decoration-color .6s ease; }
.x2-line__label { display: none; }

/* Paso 2: la primera frase se toca y abre quién espera */
.x2-app.is-pointing .x2-line[data-x2-line="0"] u { text-decoration-color: rgb(var(--luz-warm)); }
.x2-app.is-pointing .x2-line[data-x2-line="0"] .x2-line__key { text-shadow: 0 0 18px rgba(var(--luz), .45); }

.x2-wait {
    position: absolute;
    z-index: 3;
    left: 2.2rem;
    top: var(--wait-top, 9rem);
    width: min(19.5rem, calc(100% - 3.4rem));
    padding: .9rem 1rem .5rem;
    border: 1px solid rgba(var(--luz), .32);
    border-radius: .85rem;
    background: var(--x2-surface);
    box-shadow: 0 28px 60px -26px rgba(0, 0, 0, .95), 0 0 30px -12px rgba(var(--luz), .35);
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: 1.4rem 0;
    pointer-events: none;
    transition: opacity .5s ease, transform .7s var(--ease-out);
}

.x2-app.is-pointing .x2-wait { opacity: 1; transform: none; }
.x2-wait__head { margin: 0 0 .55rem; color: rgba(245, 244, 241, .55); font-size: .54rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.x2-wait__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; margin: 0; padding: .5rem 0; border-top: 1px solid rgba(245, 244, 241, .06); }
.x2-wait__row i { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; color: rgba(245, 244, 241, .8); background: rgba(245, 244, 241, .08); font-size: .55rem; font-style: normal; font-weight: 600; letter-spacing: .04em; }
.x2-wait__row span { overflow: hidden; color: rgba(245, 244, 241, .9); font-size: .74rem; white-space: nowrap; text-overflow: ellipsis; }
.x2-wait__row small { display: block; overflow: hidden; color: rgba(245, 244, 241, .55); font-size: .66rem; text-overflow: ellipsis; }
/* Cuánto lleva cada uno: la luz bajo el tiempo es más larga cuanto más espera */
.x2-wait__row em { position: relative; padding-bottom: .3rem; color: rgba(245, 244, 241, .7); font-family: var(--mono); font-size: .62rem; font-style: normal; }
.x2-wait__row em::after { content: ""; position: absolute; right: 0; bottom: 0; width: calc(var(--w) * 100%); min-width: 4px; height: 1px; background: linear-gradient(90deg, rgba(var(--luz), 0), rgb(var(--luz-core))); box-shadow: 0 0 6px rgba(var(--luz), .7); }

.x2-app__sum { position: relative; margin: 1.5rem 0 0; padding-top: 1rem; color: rgba(245, 244, 241, .55); font-size: .74rem; font-weight: 300; opacity: 0; transition: opacity .9s ease; }
.x2-app__sum b { color: var(--hueso); font-weight: 500; }
.x2-app.is-summed .x2-app__sum { opacity: 1; }
/* La rayita de luz de Hoy, sobre el resumen */
.x2-app__glow { position: absolute; top: 0; left: 0; width: 5.5rem; height: 1px; background: linear-gradient(90deg, rgba(var(--luz), 0), rgba(var(--luz), .9) 50%, rgba(var(--luz), 0)); box-shadow: 0 0 8px rgba(var(--luz), .6); }

/* Paneles: cada frase se vuelve su cifra (el JS anima el paso con FLIP: nada salta) */
.x2-app[data-mode="paneles"] .x2-app__lines { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }

.x2-app[data-mode="paneles"] .x2-line {
    display: grid;
    align-content: start;
    gap: .45rem;
    padding: 1rem 1.1rem 1.05rem;
    border: 1px solid rgba(245, 244, 241, .09);
    border-radius: .8rem;
    background: rgba(245, 244, 241, .025);
    color: rgba(245, 244, 241, .86);
    line-height: 1.2;
}

.x2-app[data-mode="paneles"] .x2-line__more,
.x2-app[data-mode="paneles"] .x2-line__key u { display: none; }
.x2-app[data-mode="paneles"] .x2-line__key { display: block; }
.x2-app[data-mode="paneles"] .x2-line__n { display: block; color: var(--hueso); font-size: clamp(2rem, 2.8vw, 2.6rem); letter-spacing: -.03em; line-height: 1; }
.x2-app[data-mode="paneles"] .x2-line__label { display: block; color: rgba(245, 244, 241, .55); font-family: var(--sans, Inter, sans-serif); font-size: .7rem; line-height: 1.35; }
.x2-app[data-mode="paneles"] .x2-line[data-x2-line="0"] { border-color: rgba(var(--luz), .4); box-shadow: inset 0 0 26px -14px rgba(var(--luz), .6); }
.x2-app[data-mode="paneles"] .x2-line[data-x2-line="3"] .x2-line__n { color: rgb(var(--luz-core)); text-shadow: 0 0 18px rgba(var(--luz), .45); }

/* ---------- Escena 2: «Una conversación». La bandeja arriba, el cable y el teléfono de quien escribe ---------- */

.x2-device { position: relative; }

.x2-card {
    position: relative;
    overflow: hidden;
    padding: 1.3rem 1.5rem 1.2rem;
    border: 1px solid var(--x2-line);
    border-radius: 1rem;
    background: var(--x2-surface);
    transition: border-color 1.2s var(--glow-ease), box-shadow 1.2s var(--glow-ease);
}

.x2-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; color: rgba(245, 244, 241, .55); font-size: .58rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }

.x2-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .7rem;
    border: 1px solid rgba(245, 244, 241, .18);
    border-radius: 999px;
    color: rgba(245, 244, 241, .6);
    font-family: var(--sans, Inter, sans-serif);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: none;
    transition: color .8s ease, border-color .8s ease, background-color .8s ease;
}

.x2-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; transition: background-color .8s ease, box-shadow .8s ease, opacity .8s ease; }
.x2-flow.is-waiting .x2-pill { border-color: rgba(var(--luz), .45); color: rgba(var(--luz-warm), .95); }
.x2-flow.is-waiting .x2-pill::before { opacity: 1; background: rgb(var(--luz-core)); animation: x2Wait 1.6s ease-in-out infinite; }
.x2-flow.is-answered .x2-pill { border-color: rgba(245, 244, 241, .22); color: rgba(245, 244, 241, .75); }
.x2-flow.is-template .x2-pill { border-color: rgba(var(--luz), .7); color: rgb(var(--luz-core)); background: rgba(var(--luz), .12); }
.x2-flow.is-template .x2-pill::before { opacity: 1; background: rgb(var(--luz-core)); box-shadow: 0 0 8px 1px rgba(var(--luz), .7); }

@keyframes x2Wait { 50% { opacity: .2; } }

.x2-chat__who { margin: 0; color: var(--hueso); font-family: var(--serif); font-size: 1.2rem; font-weight: 300; letter-spacing: -.01em; }
.x2-chat__who small { display: block; margin-top: .2rem; color: rgba(245, 244, 241, .55); font-family: var(--sans, Inter, sans-serif); font-size: .64rem; letter-spacing: .02em; }

/* La ventana de 24 horas: una luz que se gasta. Al cerrarse se apaga y el texto lo dice */
.x2-window { display: grid; gap: .45rem; margin-top: .75rem; opacity: 0; transition: opacity .8s ease; }
.x2-flow.is-open .x2-window { opacity: 1; }
.x2-window__track { position: relative; height: 1px; background: rgba(245, 244, 241, .1); }
.x2-window__track i { position: absolute; inset: 0 auto 0 0; width: var(--left, 100%); background: linear-gradient(90deg, rgba(var(--luz), .5), rgb(var(--luz-core))); box-shadow: 0 0 8px rgba(var(--luz), .55); transition: width 1.4s var(--ease-out), opacity .8s ease; }
.x2-window__label { color: rgba(245, 244, 241, .55); font-size: .7rem; font-weight: 300; line-height: 1.45; }
.x2-window__label b { color: var(--hueso); font-weight: 500; }
.x2-flow.is-closed .x2-window__track i { opacity: 0; }

/* El hilo de la conversación: cada mensaje nuevo entra abajo y empuja a los demás, como en un chat (max-height, sin saltos) */
.x2-chat__thread { display: flex; flex-direction: column; justify-content: flex-end; height: 12.2rem; margin-top: .9rem; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.6rem); mask-image: linear-gradient(180deg, transparent 0, #000 1.6rem); }

.x2-msg,
.x2-tpl {
    position: relative;
    flex: none;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: max-height .9s var(--ease-out), margin .9s var(--ease-out), padding .9s var(--ease-out), opacity .6s ease, transform .9s var(--ease-out);
}

.x2-msg.is-shown,
.x2-tpl.is-shown { max-height: 11rem; margin-top: .55rem; opacity: 1; transform: none; }
/* Sin mostrar no ocupan nada (ni su relleno ni su borde), para que el hilo quede pegado abajo */
.x2-msg:not(.is-shown),
.x2-tpl:not(.is-shown) { padding-block: 0; border-width: 0; }

.x2-msg { max-width: 86%; padding: .6rem .8rem 1.15rem; border-radius: .8rem; font-size: .8rem; font-weight: 300; line-height: 1.45; }
.x2-msg.is-shown { overflow: visible; }
.x2-msg small { position: absolute; right: .65rem; bottom: .3rem; color: rgba(245, 244, 241, .55); font-size: .58rem; }
.x2-msg--in { align-self: flex-start; color: rgba(245, 244, 241, .88); background: rgba(245, 244, 241, .07); border-radius: .8rem .8rem .8rem .2rem; }
.x2-msg--out { align-self: flex-end; color: var(--hueso); background: rgba(131, 19, 108, .34); border: 1px solid rgba(176, 74, 151, .35); border-radius: .8rem .8rem .2rem .8rem; }
.x2-msg--out [data-x2-tick] { transition: color .6s ease; }
/* El cuadro de escribir: el atajo se escribe y se despliega en la respuesta guardada; al enviarla, pasa al hilo */
.x2-compose { position: relative; height: 4.3rem; margin-top: .8rem; padding: .6rem 2.6rem .6rem .8rem; border: 1px solid rgba(245, 244, 241, .1); border-radius: .75rem; background: rgba(245, 244, 241, .025); font-size: .74rem; font-weight: 300; line-height: 1.45; transition: border-color .6s ease, box-shadow .6s ease; }
.x2-compose__hint { color: rgba(245, 244, 241, .5); transition: opacity .4s ease; }
.x2-compose__text { position: absolute; inset: .6rem 2.6rem .6rem .8rem; color: rgba(245, 244, 241, .92); }
.x2-compose__text.is-shortcut { color: var(--ciruela-luz); font-family: var(--mono); }
.x2-compose__text.is-expanded { animation: x2Focus .7s ease both; }
.x2-flow.is-typing .x2-compose { border-color: rgba(var(--luz), .45); box-shadow: 0 0 22px -10px rgba(var(--luz), .55); }
.x2-flow.is-typing .x2-compose__hint { opacity: 0; }
.x2-compose__send { position: absolute; right: .55rem; bottom: .5rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; color: rgba(245, 244, 241, .55); background: rgba(245, 244, 241, .06); transition: color .5s ease, background-color .5s ease; }
.x2-compose__send svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.x2-flow.is-typing .x2-compose__send { color: var(--hueso); background: var(--ciruela); }

@keyframes x2Focus { from { opacity: 0; filter: blur(5px); } }
.x2-flow.is-read .x2-msg--out [data-x2-tick] { color: rgb(var(--luz-core)); }
/* La nota interna: solo la ve el equipo. Borde a trazos y luz cálida, como en Connect */
.x2-msg--note { align-self: center; max-width: 92%; padding: .55rem .8rem .65rem; border: 1px dashed rgba(var(--luz), .4); color: rgba(var(--luz-warm), .9); background: rgba(var(--luz), .05); font-family: var(--serif); font-style: italic; }
.x2-msg--note span { display: block; margin-bottom: .2rem; color: rgba(var(--luz), .75); font-family: var(--sans, Inter, sans-serif); font-size: .52rem; font-style: normal; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }

.x2-tpl { align-self: stretch; padding: .75rem .9rem .8rem; border: 1px solid rgba(var(--luz), .55); border-radius: .8rem; background: rgba(var(--luz), .04); box-shadow: 0 0 0 1px rgba(var(--luz), .1), 0 20px 50px -30px rgba(var(--luz), .5); }
.x2-tpl.is-shown { margin-top: .8rem; }
.x2-tpl__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0; }
.x2-tpl__head code { color: var(--hueso); font-family: var(--mono); font-size: .74rem; }
.x2-tpl__ok { padding: .15rem .5rem; border-radius: 999px; color: rgb(var(--luz-core)); background: rgba(var(--luz), .14); font-size: .56rem; font-weight: 500; letter-spacing: .06em; }
.x2-tpl__body { margin: .5rem 0 0; color: rgba(245, 244, 241, .82); font-family: var(--serif); font-size: .9rem; font-weight: 300; line-height: 1.45; }
.x2-tpl__body i { padding: 0 .25em; border-radius: .25rem; color: rgba(var(--luz), .95); background: rgba(var(--luz), .1); font-family: var(--mono); font-size: .74em; font-style: normal; }
.x2-tpl__cost { margin: .55rem 0 0; color: rgba(245, 244, 241, .55); font-size: .62rem; letter-spacing: .02em; }

.x2-chat__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; padding-top: .7rem; border-top: 1px solid rgba(245, 244, 241, .07); color: rgba(245, 244, 241, .5); font-size: .66rem; }
.x2-chat__who-answers { display: inline-flex; align-items: center; gap: .5rem; opacity: .25; transition: opacity .8s ease; }
.x2-chat__who-answers i { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; color: var(--hueso); background: var(--ciruela); font-size: .5rem; font-style: normal; font-weight: 600; }
.x2-flow.is-assigned .x2-chat__who-answers { opacity: 1; color: rgba(245, 244, 241, .8); }
.x2-chat__free { position: relative; transition: color .8s ease; }
.x2-chat__free b { color: rgba(245, 244, 241, .85); font-family: var(--mono); font-weight: 500; }
.x2-flow.is-free .x2-chat__free { color: rgba(var(--luz-warm), .9); }
.x2-flow.is-free .x2-chat__free b { color: rgb(var(--luz-core)); text-shadow: 0 0 14px rgba(var(--luz), .6); }

/* El cable: la luz sube del teléfono a la bandeja cuando te escriben y baja cuando respondes */
.x2-wire { position: relative; width: 1px; height: clamp(2.4rem, 6vh, 4rem); margin-left: 72%; background: rgba(245, 244, 241, .1); }
.x2-wire.is-up .v3-beam { transform: scaleY(-1); }

.x2-phone {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 80%;
    height: 8.4rem;
    margin-left: auto;
    padding: .9rem;
    overflow: hidden;
    border: 1px solid var(--x2-line);
    border-radius: 1.3rem;
    background: var(--x2-deep);
}

.x2-phone__bubble {
    position: relative;
    flex: none;
    max-width: 90%;
    max-height: 0;
    margin: 0;
    padding: 0 .9rem;
    overflow: hidden;
    border-radius: .9rem .9rem .9rem .25rem;
    color: var(--carbon);
    background: var(--hueso);
    font-size: .76rem;
    font-weight: 400;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(10px) scale(.98);
    transform-origin: 0 100%;
    transition: max-height .9s var(--ease-out), padding .9s var(--ease-out), margin .9s var(--ease-out), opacity .7s ease, transform .9s var(--ease-out);
}

.x2-phone__bubble.is-shown { max-height: 10rem; margin-top: .5rem; padding: .65rem .9rem 1.25rem; opacity: 1; transform: none; }
.x2-phone__bubble small { position: absolute; right: .75rem; bottom: .38rem; color: rgba(17, 17, 17, .45); font-size: .6rem; }
.x2-phone__bubble--me { align-self: flex-end; color: var(--hueso); background: #2c4a3c; border-radius: .9rem .9rem .25rem .9rem; transform-origin: 100% 100%; }
.x2-phone__bubble--me small { color: rgba(245, 244, 241, .55); }
.x2-phone__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: .6rem -.9rem -1.25rem; border-top: 1px solid rgba(17, 17, 17, .1); }
.x2-phone__btns span { padding: .45rem 0 .5rem; color: #3d6b8f; font-size: .72rem; font-weight: 500; text-align: center; }
.x2-phone__btns span + span { border-left: 1px solid rgba(17, 17, 17, .1); }
.x2-phone__bubble--tpl.is-shown { padding-bottom: 1.25rem; }
/* La hora, como en WhatsApp: en la última línea si cabe y, si no, en la suya (en danés pisaba el texto). Los márgenes la
   dejan al píxel donde estaba cuando cabe */
.x2-phone__bubble--tpl small { position: static; float: right; margin: .29rem -.15rem -.3rem .8rem; line-height: 1.45; }
.x2-phone__bubble--tpl .x2-phone__btns { clear: both; }

/* ---------- Qué incluye (sección clara con v3-includes) ---------- */

.x2-does { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- El permiso: BAJA, en directo ---------- */

.x2-consent,
.x2-cost {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
    padding: clamp(6rem, 14vh, 9rem) max(var(--gutter), calc((100% - 82rem) / 2));
}

.x2-consent { background: var(--carbon); }
.x2-consent__head .v3-body,
.x2-cost__text .v3-body { margin-top: 1.4rem; }

.x2-consent__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin: 2.4rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid rgba(245, 244, 241, .12); list-style: none; }
.x2-consent__facts li { color: rgba(245, 244, 241, .55); font-size: .78rem; font-weight: 300; line-height: 1.5; }
.x2-consent__facts b { display: block; margin-bottom: .35rem; color: var(--hueso); font-family: var(--serif); font-size: 1.15rem; font-weight: 300; }

.x2-perm { --p: 0; position: relative; display: grid; gap: 1.1rem; max-width: 30rem; justify-self: end; width: 100%; }
.x2-perm__card { position: relative; padding: 1.3rem 1.4rem 1.2rem; border: 1px solid var(--x2-line); border-radius: 1rem; background: var(--x2-surface); }
.x2-perm__who { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; color: var(--hueso); font-family: var(--serif); font-size: 1.2rem; font-weight: 300; }
.x2-perm__who i { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; color: rgba(245, 244, 241, .85); background: rgba(245, 244, 241, .08); font-family: var(--sans, Inter, sans-serif); font-size: .62rem; font-style: normal; font-weight: 600; }
.x2-perm__who small { display: block; color: rgba(245, 244, 241, .55); font-family: var(--sans, Inter, sans-serif); font-size: .64rem; }
.x2-perm__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: .8rem 0; border-top: 1px solid rgba(245, 244, 241, .07); color: rgba(245, 244, 241, .88); font-size: .86rem; }
.x2-perm__row small { display: block; margin-top: .15rem; color: rgba(245, 244, 241, .55); font-size: .66rem; transition: color .6s ease; }

/* El interruptor: encendido con la luz cálida; al darse de baja se apaga */
.x2-switch { position: relative; flex: none; width: 2.3rem; height: 1.3rem; border: 1px solid rgba(245, 244, 241, .2); border-radius: 999px; background: rgba(245, 244, 241, .05); transition: background-color .6s ease, border-color .6s ease, box-shadow .6s ease; }
.x2-switch i { position: absolute; top: 2px; left: 2px; width: calc(1.3rem - 6px); height: calc(1.3rem - 6px); border-radius: 50%; background: rgba(245, 244, 241, .55); transition: transform .6s var(--ease-out), background-color .6s ease, box-shadow .6s ease; }
.x2-switch.is-on { border-color: rgba(var(--luz), .6); background: rgba(var(--luz), .16); }
.x2-switch.is-on i { transform: translateX(1rem); background: rgb(var(--luz-core)); box-shadow: 0 0 10px 1px rgba(var(--luz), .7); }

.x2-perm__log { display: flex; align-items: center; gap: .6rem; max-height: 0; margin: 0; overflow: hidden; color: rgba(245, 244, 241, .6); font-size: .7rem; opacity: 0; transition: max-height .8s var(--ease-out), padding .8s var(--ease-out), opacity .6s ease; }
.x2-perm.is-logged .x2-perm__log { max-height: 3rem; padding-top: .8rem; border-top: 1px solid rgba(245, 244, 241, .07); opacity: 1; }
.x2-perm__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--luz-core)); box-shadow: 0 0 8px rgba(var(--luz), .8); }

/* «BAJA» llega como un mensaje de WhatsApp, del lado de quien escribe; su sitio está reservado: no empuja nada */
.x2-perm__msg { position: relative; justify-self: end; margin: 0 0 -.4rem; padding: .55rem 2.7rem .55rem .85rem; border-radius: .8rem .8rem .2rem .8rem; color: var(--hueso); background: #2c4a3c; font-size: .82rem; font-weight: 500; letter-spacing: .04em; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9); opacity: 0; transform: translate(14px, 10px) scale(.96); transform-origin: 100% 100%; transition: opacity .6s ease, transform .9s var(--ease-out); }
.x2-perm__msg small { position: absolute; right: .6rem; bottom: .4rem; color: rgba(245, 244, 241, .55); font-size: .56rem; font-weight: 400; letter-spacing: 0; }
.x2-perm.is-asked .x2-perm__msg { opacity: 1; transform: none; }

.x2-perm__send { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid rgba(245, 244, 241, .08); border-radius: .9rem; background: rgba(245, 244, 241, .02); }
.x2-perm__send p { margin: 0; color: rgba(245, 244, 241, .5); font-size: .68rem; line-height: 1.45; }
.x2-perm__what b { display: block; color: rgba(245, 244, 241, .9); font-family: var(--serif); font-size: 1rem; font-weight: 300; }
.x2-perm__send .x2-perm__count { color: rgba(245, 244, 241, .7); text-align: right; }
.x2-perm__count b { color: var(--hueso); font-family: var(--mono); font-size: .95rem; font-weight: 500; }
.x2-perm__count small { display: block; max-height: 0; overflow: hidden; color: rgba(var(--luz-warm), .9); font-size: .64rem; opacity: 0; transition: max-height .6s ease, opacity .6s ease; }
.x2-perm.is-out .x2-perm__count small { max-height: 1.2rem; opacity: 1; }

/* ---------- Lo que cobra Meta: el anillo de las 1.000 respuestas gratis ---------- */

.x2-cost { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); background: var(--carbon-2); }

.x2-meter { position: relative; display: grid; place-items: center; width: min(100%, 22rem); aspect-ratio: 1; justify-self: center; }
.x2-meter__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.x2-meter__ring circle { fill: none; stroke-width: 1; }
.x2-meter__track { stroke: rgba(245, 244, 241, .09); }
/* Lo que queda, encendido; se gasta desde el final hasta lo usado (JS: --left, 0-1000) */
.x2-meter__used { stroke: rgb(254, 243, 202); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: var(--left, 1000) 1000; filter: drop-shadow(0 0 6px rgba(var(--luz), .7)) drop-shadow(0 0 18px rgba(190, 128, 64, .45)); }
.x2-meter__n { position: relative; margin: 0; text-align: center; }
.x2-meter__n b { display: block; color: var(--hueso); font-family: var(--serif); font-size: clamp(3.4rem, 6vw, 5.2rem); font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1; }
.x2-meter__n span { display: block; margin-top: .7rem; color: rgba(245, 244, 241, .5); font-size: .62rem; font-weight: 600; letter-spacing: .22em; line-height: 1.6; text-transform: uppercase; }

.x2-cost__list { display: grid; gap: 0; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.x2-cost__list li { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 1.2rem; align-items: baseline; padding: 1.1rem 0; border-top: 1px solid rgba(245, 244, 241, .1); color: rgba(245, 244, 241, .62); font-size: .92rem; font-weight: 300; line-height: 1.55; }
.x2-cost__list b { color: var(--hueso); font-family: var(--serif); font-size: 1.6rem; font-weight: 300; letter-spacing: -.02em; line-height: 1; }

/* ---------- Datos ---------- */

.x2-data {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
    padding: clamp(6rem, 14vh, 9rem) max(var(--gutter), calc((100% - 82rem) / 2));
    background: var(--carbon);
}

.x2-data__head .v3-body { margin-top: 1.4rem; }
.x2-data__links { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; margin: 2rem 0 0; }
.x2-data__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; margin: 0; padding: 0; list-style: none; }
.x2-data__list li { padding: 1.6rem 0; border-top: 1px solid rgba(245, 244, 241, .12); }
.x2-data__list h3 { margin: 0 0 .6rem; font-family: var(--serif); font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 300; line-height: 1.2; }
.x2-data__list p { margin: 0; color: rgba(245, 244, 241, .6); font-size: .9rem; font-weight: 300; line-height: 1.65; }

/* ---------- Lo que viene: una línea de luz con cinco pilotos en brasa, como en el taller de Productos ---------- */

.x2-next { position: relative; padding: clamp(6rem, 14vh, 9rem) max(var(--gutter), calc((100% - 82rem) / 2)); background: var(--carbon-2); }
.x2-next__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); align-items: end; }
.x2-next__line { position: relative; height: 2px; margin: clamp(3.5rem, 8vh, 5rem) 0 0; background: rgba(245, 244, 241, .08); }
.x2-next__line .v3-lightline { --t: 0; position: absolute; inset: 0; width: 100%; height: 2px; overflow: visible; }
.x2-next__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; counter-reset: x2stop; }

.x2-stop { position: relative; padding-top: 2.2rem; }
.x2-stop h3 { margin: 0; color: var(--hueso); font-family: var(--serif); font-size: clamp(1.2rem, 1.5vw, 1.4rem); font-weight: 300; line-height: 1.2; opacity: .42; transition: opacity 1.2s ease; }
.x2-stop p { margin: .7rem 0 0; color: rgba(245, 244, 241, .55); font-size: .86rem; font-weight: 300; line-height: 1.6; opacity: .42; transition: opacity 1.2s ease; }
.x2-stop.is-tested h3,
.x2-stop.is-tested p { opacity: 1; }

.x2-stop__lamp { position: absolute; top: calc(-1px - 7px); left: 0; width: 14px; height: 14px; border: 1px solid #3b3a3f; border-radius: 50%; background: #0f0f12; transition: background-color 1s ease, border-color 1s ease, box-shadow 1s ease; }
.x2-stop.is-tested .x2-stop__lamp { border-color: color-mix(in srgb, rgb(var(--luz)) 50%, #0f0f12); background: color-mix(in srgb, rgb(var(--luz)) 42%, #0f0f12); box-shadow: 0 0 8px 1px rgba(var(--luz), .2); animation: x2Test .9s ease-out both, x2Ember 4.2s ease-in-out .9s infinite; }

@keyframes x2Test { 0% { background: rgb(var(--luz-core)); box-shadow: 0 0 16px 5px rgba(var(--luz), .8), 0 0 40px 12px rgba(190, 128, 64, .35); } }
@keyframes x2Ember { 50% { background: color-mix(in srgb, rgb(var(--luz)) 28%, #0f0f12); box-shadow: 0 0 5px 1px rgba(var(--luz), .12); } }

.x2-next__list { margin-top: -1px; }
.x2-next__later { margin: 3rem 0 0; padding-top: 1.4rem; border-top: 1px solid rgba(245, 244, 241, .08); color: rgba(245, 244, 241, .5); font-family: var(--serif); font-size: 1.05rem; font-style: italic; font-weight: 300; }

/* ---------- Lo que no es ---------- */

.x2-not {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(3rem, 7vw, 7rem);
    padding: clamp(6rem, 14vh, 9rem) max(var(--gutter), calc((100% - 82rem) / 2));
    background: var(--carbon);
}

.x2-not__head .v3-body { margin-top: 1.4rem; }
.x2-not__list { margin: 0; padding: 0; border-top: 1px solid rgba(245, 244, 241, .12); list-style: none; }
.x2-not__list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: .5rem 2rem; padding: 1.6rem 0; border-bottom: 1px solid rgba(245, 244, 241, .12); }
.x2-not__list h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 300; line-height: 1.25; }
.x2-not__list p { margin: 0; color: rgba(245, 244, 241, .6); font-size: .92rem; font-weight: 300; line-height: 1.65; }

/* ---------- Contacto en escena: la ventana que contesta ----------
   B: la casa de la otra orilla con la ventana encendida y la esfera dentro; a lo lejos, a la izquierda, la lámpara del
   muelle de la portada manda su haz. La frase va en el cielo oscuro de arriba, por encima del haz (a media altura lo
   tapaba). Toda en hueso: «negocio?» en ciruela luz quedaba en 2,06:1 sobre ese cielo (medido en la foto); en hueso, 7,6-10:1.
   En móvil se encuadra la ventana y la frase baja al agua oscura, junto a las rocas */
.x2-contact .v3-contact__media img { object-position: 70% 50%; }
.x2-contact .v3-contact__caption { top: 13%; }

/* ---------- Responsive ---------- */

/* Pantallas grandes y altas: las escenas crecen (los dispositivos con una escala, para que sus medidas en px no cambien) */
@media (min-width: 1600px) and (min-height: 1100px) {
    .x2-device { transform: scale(1.3); transform-origin: 100% 50%; }
    .x2-app { transform: scale(1.22); transform-origin: 100% 50%; }
    .x2-say__title { font-size: clamp(4rem, 3.4vw, 5rem); }
    .x2-say__line { max-width: 31rem; font-size: 1.2rem; }
    .x2-say { max-width: 36rem; }
}

@media (max-width: 1180px) {
    .x2-does { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .x2-not, .x2-data, .x2-consent, .x2-cost, .x2-next__head { grid-template-columns: 1fr; }
    .x2-perm { justify-self: start; }
    .x2-cost .x2-meter { order: 2; justify-self: start; }
    .x2-next__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 3rem; }
}

@media (max-width: 900px) {
    .x2-today { height: 440svh; }
    .x2-flow { height: 660svh; }
    /* El dispositivo arriba y el texto debajo. Arriba, lo justo para el logo; abajo, el sitio del botón de WhatsApp */
    .x2-today__stage,
    .x2-flow__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 1.4rem; align-items: start; padding: 4.5rem 1.5rem calc(3.75rem + env(safe-area-inset-bottom)); }
    /* Si la pantalla es baja, el dispositivo se reduce lo justo para que el texto quepa entero (JS: --x2-fit y --x2-h) */
    .x2-device,
    .x2-app { grid-row: 1; width: min(100%, 26rem); margin: 0 auto calc((var(--x2-fit, 1) - 1) * var(--x2-h, 0px)); transform: scale(var(--x2-fit, 1)); transform-origin: 50% 0; }
    .x2-app { width: min(100%, 27rem); }
    .x2-today__text,
    .x2-flow__text { grid-row: 2; align-content: start; }
    .x2-today__text > .v3-kicker,
    .x2-flow__text > .v3-kicker { display: none; }
    .x2-flow__steps { display: none; }
    .x2-card { padding: 1rem 1.1rem 1rem; }
    .x2-card__head { margin-bottom: .6rem; }
    /* «Conversación cerrada…» ocupa dos líneas: su sitio se reserva desde el principio para que la tarjeta no crezca */
    .x2-window__label { min-height: 2.9em; }
    .x2-chat__thread { height: 8.6rem; }
    .x2-compose { height: 3.9rem; font-size: .7rem; }
    .x2-wire { height: 2.4rem; }
    .x2-phone { height: 7rem; padding: .7rem; }
    .x2-phone__bubble { font-size: .72rem; }
    .x2-device__note { display: none; }
    .x2-app__bar { padding: .6rem .6rem .6rem .9rem; }
    .x2-app__biz { gap: .5rem; font-size: .88rem; }
    .x2-app__mode { padding: 0 .6rem; font-size: .78rem; }
    .x2-app__day { padding: 1.3rem 1.2rem 1.2rem 1.9rem; }
    .x2-app__edge { left: .95rem; top: 1.5rem; bottom: 1.2rem; }
    .x2-app__lines { gap: .6rem; margin-top: 1rem; }
    .x2-line { font-size: .95rem; }
    .x2-app__sum { margin-top: 1rem; padding-top: .8rem; font-size: .68rem; }
    .x2-wait { left: 1.4rem; width: calc(100% - 2.4rem); }
    .x2-say__n { margin-bottom: .6rem; }
    .x2-say__title { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
    .x2-say__line { margin-top: .8rem; font-size: .92rem; line-height: 1.6; }
}

/* Móviles bajos (360 × 640): el texto del paso, algo más compacto, para que quepa entero sobre el botón flotante */
@media (max-width: 900px) and (max-height: 700px) {
    .x2-say__n { margin-bottom: .35rem; }
    .x2-say__title { font-size: 1.75rem; }
    .x2-say__line { margin-top: .6rem; font-size: .86rem; line-height: 1.5; }
}

@media (max-width: 820px) {
    /* 84 %: la ventana entera, con la esfera, a 390 px (al 80 % se cortaba por la derecha) */
    .x2-contact .v3-contact__media img { object-position: 84% 50%; }
    .x2-contact .v3-contact__caption { top: auto; bottom: calc(9lvh + var(--bar)); }
    .x2-does { grid-template-columns: 1fr; }
    .x2-not, .x2-data, .x2-consent, .x2-cost, .x2-next { padding: 5.5rem 1.5rem; }
    .x2-not__list li, .x2-data__list { grid-template-columns: 1fr; }
    .x2-consent__facts { grid-template-columns: 1fr; gap: 1rem; }
    .x2-cost__list li { grid-template-columns: 4.4rem minmax(0, 1fr); gap: .9rem; }
    /* Lo que viene, en vertical: la luz baja por la izquierda */
    .x2-next__line { display: none; }
    .x2-next__list { grid-template-columns: 1fr; gap: 2.2rem; margin-top: 3rem; padding-left: 2rem; border-left: 1px solid rgba(245, 244, 241, .1); }
    .x2-stop { padding-top: 0; }
    .x2-stop__lamp { top: .35rem; left: calc(-2rem - 7.5px); }
}

/* Sin movimiento: cada historia, quieta y en orden */
@media (prefers-reduced-motion: reduce) {
    .x2-today, .x2-flow { height: auto; }
    .x2-today__stage, .x2-flow__stage { position: static; height: auto; padding-block: 6rem; align-items: start; }
    .x2-today__text, .x2-flow__text { display: grid; gap: 2.4rem; }
    .x2-today__text > .v3-kicker, .x2-flow__text > .v3-kicker { position: static; }
    .x2-say, .x2-say.is-past { grid-area: auto; opacity: 1; transform: none; }
    .x2-flow__steps { display: none; }
    .x2-line { opacity: 1; filter: none; }
    .x2-stop h3, .x2-stop p { opacity: 1; }
    .x2-stop__lamp { animation: none !important; }
}