/**
 * Portada de venta.
 *
 * Dos mundos a propósito y una sola vez: la página es papel cálido —la luz de
 * un local abierto de día— y todo lo que representa la PANTALLA del kiosko va
 * en noche. Ese contraste es el argumento del producto dicho sin palabras: tu
 * negocio de día, la pantalla encendida cuando ya no hay nadie.
 *
 * El acento cálido (--luz) no es decorativo: es el mismo color que el foco que
 * el render le pone a la cara del avatar (`avatar.light_spot_color` en la
 * configuración), oscurecido lo justo para tener contraste sobre papel.
 */

:root {
    color-scheme: light;

    --papel: #faf6f0;
    --papel-2: #f2ece1;
    --papel-3: #ebe3d5;
    --borde: #e2d9c9;
    --tinta: #191720;
    --tinta-2: #56515f;
    --tinta-3: #7d7788;

    --noche: #0e1017;
    --noche-2: #171c28;
    --noche-borde: #2a3143;
    --noche-texto: #e8ecf5;
    --noche-texto-2: #98a2b8;

    --luz: #f0a44e;          /* el foco cálido del avatar, con contraste sobre papel */
    --luz-clara: #ffd7a0;    /* el mismo, para fondo noche */
    --voz: #3d4de0;
    --voz-oscura: #2c37a8;
    --verde: #167a4a;
    --verde-claro: #6ee7a8;

    --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
    --texto: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    --dato: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

    --ancho: 1120px;
    --radio: 14px;
    --radio-s: 9px;
}

* { box-sizing: border-box; }

/* El `hidden` del HTML lo aplica el agente de usuario y cualquier `display` de autor lo gana sin que la especificidad intervenga. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--texto);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.022em;
    margin: 0;
    text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--voz); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--voz-oscura); }

:focus-visible {
    outline: 2.5px solid var(--voz);
    outline-offset: 3px;
    border-radius: 4px;
}

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem; }

/* Salto al contenido: invisible hasta que alguien navega con teclado. */
.saltar {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--tinta); color: var(--papel);
    padding: .7rem 1.1rem; border-radius: 0 0 var(--radio-s) 0;
}
.saltar:focus { left: 0; }

/* ─────────────────────────────────────────────────────── cabecera */

.cabecera {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--papel) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, background .2s;
}
.cabecera[data-pegada] { border-bottom-color: var(--borde); }

/* La cabecera cambia de mundo con la sección que tiene debajo. Una barra de
   papel flotando sobre las secciones de noche partía la página en dos justo
   donde el contraste día/noche tenía que leerse como una transición. */
.cabecera[data-noche] {
    background: color-mix(in srgb, var(--noche) 82%, transparent);
    border-bottom-color: transparent;
}
.cabecera[data-noche][data-pegada] { border-bottom-color: var(--noche-borde); }
.cabecera[data-noche] .marca { color: #fff; }
.cabecera[data-noche] nav a { color: var(--noche-texto-2); }
.cabecera[data-noche] nav a:hover { color: #fff; }

.cabecera .envoltura {
    display: flex; align-items: center; gap: 1.5rem;
    min-height: 60px;
}

.marca {
    font-family: var(--display);
    font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
    color: var(--tinta); text-decoration: none;
    display: flex; align-items: center; gap: .55rem;
}
.marca:hover { color: var(--tinta); }

.cabecera nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.cabecera nav a {
    color: var(--tinta-2); text-decoration: none; font-size: .92rem;
}
.cabecera nav a:hover { color: var(--tinta); }
@media (max-width: 780px) { .cabecera nav .oculta-movil { display: none; } }

/* ─────────────────────────────────────────────── el punto de estado */

/* La señal que el kiosko enseña de verdad en su esquina. Se reutiliza en la
   portada porque nombra los tres estados con las palabras del producto —y
   «dormida» es justo el argumento económico: mientras no hay nadie, no gasta. */
.estado {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--dato); font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--tinta-3);
}
.estado::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; flex: none;
}
.estado[data-estado="dormida"] { color: var(--tinta-3); }
.estado[data-estado="conectando"] { color: var(--luz); }
.estado[data-estado="atenta"] { color: var(--verde); }
.estado[data-estado="atenta"]::before { animation: latido 2.4s ease-in-out infinite; }

@keyframes latido {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde) 55%, transparent); }
    60%      { box-shadow: 0 0 0 7px transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .estado[data-estado="atenta"]::before { animation: none; }
}

/* ─────────────────────────────────────────────────────────── héroe */

.heroe { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem); }

/* Dos columnas en pantalla ancha: el argumento a la izquierda y la pantalla
   encendida a la derecha, a la misma altura. Apiladas, la pantalla —que es lo
   único que enseña de verdad qué hace esto— quedaba fuera de la vista y había
   que fiarse del titular. */
.heroe .envoltura {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}
@media (min-width: 1000px) {
    .heroe .envoltura { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
}

.heroe h1 {
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);
    font-weight: 700;
    margin: .9rem 0 0;
    max-width: 15ch;
}
.heroe h1 em {
    font-style: normal;
    color: var(--voz);
}

.heroe .entrada {
    font-size: clamp(1.04rem, 1.3vw, 1.16rem);
    color: var(--tinta-2);
    max-width: 46ch;
    margin: 1.2rem 0 0;
    line-height: 1.55;
}

.acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.boton {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--texto); font-size: 1rem; font-weight: 600;
    padding: .85rem 1.5rem; border-radius: 999px;
    border: 1.5px solid transparent; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    transition: transform .12s ease, background .15s, border-color .15s, color .15s;
}
.boton:active { transform: translateY(1px); }
.boton--fuerte { background: var(--voz); color: #fff; }
.boton--fuerte:hover { background: var(--voz-oscura); color: #fff; }
.boton--linea { border-color: var(--tinta); color: var(--tinta); }
.boton--linea:hover { background: var(--tinta); color: var(--papel); }
.boton--noche { background: var(--luz-clara); color: #241503; }
.boton--noche:hover { background: #fff; color: #241503; }

.nota-accion { font-size: .875rem; color: var(--tinta-3); margin-top: .9rem; }

/* ───────────────────────────────────── la pantalla (mundo noche) */

.pantalla {
    background: var(--noche);
    border-radius: 20px;
    border: 1px solid var(--noche-borde);
    padding: clamp(1.2rem, 3vw, 2rem);
    color: var(--noche-texto);
    position: relative;
    overflow: hidden;
    /* El foco cálido sobre la cara, hecho luz de verdad y no un degradado
       decorativo: es el key light del render, en el mismo sitio. */
    background-image: radial-gradient(60% 55% at 22% 12%,
        color-mix(in srgb, var(--luz-clara) 13%, transparent) 0%, transparent 70%);
    box-shadow: 0 24px 60px -28px rgba(20, 15, 40, .45);
}

.pantalla__barra {
    display: flex; align-items: center; gap: 1rem;
    padding-bottom: 1.1rem; margin-bottom: 1.3rem;
    border-bottom: 1px solid var(--noche-borde);
}
.pantalla .estado { color: var(--noche-texto-2); }
.pantalla .estado[data-estado="conectando"] { color: var(--luz-clara); }
.pantalla .estado[data-estado="atenta"] { color: var(--verde-claro); }

.pantalla__negocio {
    margin-left: auto; font-size: .82rem; color: var(--noche-texto-2);
    display: flex; align-items: center; gap: .5rem;
}
.pantalla__negocio span {
    width: 22px; height: 22px; border-radius: 6px; flex: none;
    background: linear-gradient(140deg, #2e7d4f, #16532f);
}

/* El diálogo: no burbujas de chat sino la línea de subtítulos que el cliente
   ve en la pantalla real, que es lo que este producto muestra de verdad. */
.dialogo { display: flex; flex-direction: column; gap: 1.05rem; min-height: 8.5rem; }

.turno { display: flex; gap: .85rem; align-items: flex-start; }
.turno__quien {
    font-family: var(--dato); font-size: .68rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--noche-texto-2);
    padding-top: .28rem; width: 5.2rem; flex: none; text-align: right;
}
.turno__texto { font-size: clamp(1rem, 1.9vw, 1.28rem); line-height: 1.45; }
.turno--avatar .turno__texto { color: var(--luz-clara); }
.turno--avatar .turno__quien { color: var(--luz-clara); opacity: .7; }

/* El cursor solo existe mientras algo se está escribiendo. */
.cursor {
    display: inline-block; width: .58ch; height: 1.05em;
    background: currentColor; vertical-align: -.16em;
    margin-left: .1em; animation: parpadeo 1.05s steps(2, start) infinite;
}
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; opacity: .6; } }
@keyframes parpadeo { 50% { opacity: 0; } }

.pantalla__pie {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: 1.4rem; padding-top: 1.1rem;
    border-top: 1px solid var(--noche-borde);
    font-family: var(--dato); font-size: .72rem; color: var(--noche-texto-2);
    flex-wrap: wrap;
}
.pantalla__pie b { color: var(--luz-clara); font-weight: 500; }

/* Vúmetro: mide el mismo audio que mueve la boca del avatar. Aquí es
   decorativo y por eso se apaga con reduced-motion sin perder información. */
.vumetro { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.vumetro i {
    width: 3px; background: var(--verde-claro); border-radius: 2px;
    height: 20%; animation: vu 1.1s ease-in-out infinite;
}
.vumetro i:nth-child(2) { animation-delay: .12s; }
.vumetro i:nth-child(3) { animation-delay: .26s; }
.vumetro i:nth-child(4) { animation-delay: .07s; }
.vumetro i:nth-child(5) { animation-delay: .3s; }
@keyframes vu { 0%, 100% { height: 18%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .vumetro i { animation: none; height: 55%; } }
.pantalla:not([data-estado="atenta"]) .vumetro { visibility: hidden; }

/* ────────────────────────────────────────────────────── secciones */

.seccion { padding: clamp(3.5rem, 8vw, 6.5rem) 0; border-top: 1px solid var(--borde); }
.seccion--noche {
    background: var(--noche); color: var(--noche-texto);
    border-top-color: var(--noche);
}
.seccion--noche h2, .seccion--noche h3 { color: #fff; }
.seccion--noche .pregunta { color: var(--luz-clara); }
.seccion--noche .seccion__entrada { color: var(--noche-texto-2); }

/* El encabezado de cada sección es LA PREGUNTA que hace quien está pensando
   en comprar esto, con sus palabras. No es un adorno: la página está ordenada
   como la conversación de venta, y por eso van en ese orden y no en otro. */
.pregunta {
    font-family: var(--dato); font-size: .78rem;
    letter-spacing: .04em; color: var(--voz);
    margin: 0 0 .9rem;
}

.seccion h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); max-width: 20ch; }
.seccion__entrada {
    font-size: clamp(1.02rem, 1.4vw, 1.16rem);
    color: var(--tinta-2); max-width: 62ch; margin-top: 1.1rem;
}

.rejilla {
    display: grid; gap: 1.1rem; margin-top: 2.6rem;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.tarjeta {
    background: var(--papel-2); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 1.4rem 1.5rem;
}
/* En el mundo noche la tarjeta se viste sola: antes cada una llevaba su
   `style=` repetido en el HTML. */
.seccion--noche .tarjeta { background: var(--noche-2); border-color: var(--noche-borde); }
.seccion--noche .tarjeta p { color: var(--noche-texto-2); }

/* Cuatro respuestas, dos y dos. Con la rejilla automática caían tres arriba y
   una sola abajo, y esa cuarta parecía un añadido de última hora. */
.rejilla--pares { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.tarjeta h3 { font-size: 1.12rem; margin-bottom: .55rem; }
.tarjeta p { font-size: .96rem; color: var(--tinta-2); }
.tarjeta__cifra {
    font-family: var(--dato); font-size: 1.9rem; font-weight: 500;
    color: var(--tinta); display: block; line-height: 1.1; margin-bottom: .3rem;
}

/* ───────────────────────────────────────── las preguntas repetidas */

/* Lista, no carrusel: el argumento es el VOLUMEN de preguntas iguales, y una
   lista quieta que se lee de un vistazo lo transmite mejor que algo que se
   mueve y obliga a esperar. */
.repetidas {
    margin: 2.4rem 0 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; gap: .55rem;
}
.repetidas li {
    background: var(--papel-2); border: 1px solid var(--borde);
    border-radius: 999px; padding: .45rem 1rem;
    font-size: .94rem; color: var(--tinta-2);
}
.repetidas li::before { content: '“'; opacity: .5; }
.repetidas li::after { content: '”'; opacity: .5; }

/* ───────────────────────────────────────────────────── los demos */

.demos { display: grid; gap: 1.2rem; margin-top: 2.8rem;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.demo {
    display: flex; flex-direction: column;
    background: var(--noche-2); border: 1px solid var(--noche-borde);
    border-radius: var(--radio); padding: 1.5rem;
    transition: border-color .18s, transform .18s;
}
.demo:hover { border-color: var(--luz-clara); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .demo:hover { transform: none; } }

.demo__rotulo {
    font-family: var(--dato); font-size: .7rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--luz-clara); margin-bottom: .7rem;
}
.demo h3 { font-size: 1.3rem; margin-bottom: .2rem; }
.demo__quien { font-size: .9rem; color: var(--noche-texto-2); margin-bottom: 1.1rem; }
.demo__quien b { color: var(--noche-texto); font-weight: 600; }

.demo__lista { list-style: none; margin: 0 0 1.5rem; padding: 0;
    display: flex; flex-direction: column; gap: .5rem; }
.demo__lista li {
    font-size: .93rem; color: var(--noche-texto);
    padding-left: 1.1rem; position: relative; line-height: 1.45;
}
.demo__lista li::before {
    content: ''; position: absolute; left: 0; top: .62em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--luz-clara);
}
.demo .boton { margin-top: auto; justify-content: center; }

/* ────────────────────────────────────────────── la calculadora */

.calculadora {
    margin-top: 2.8rem;
    display: grid; gap: 1.6rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}
@media (max-width: 760px) { .calculadora { grid-template-columns: 1fr; } }

.mandos {
    background: var(--papel-2); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 1.5rem;
}
.mando { margin-bottom: 1.4rem; }
.mando:last-child { margin-bottom: 0; }
.mando label {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    font-size: .93rem; margin-bottom: .5rem;
}
.mando output {
    font-family: var(--dato); font-size: 1rem; font-weight: 500;
    color: var(--tinta);
}
.mando input[type=range] {
    width: 100%; accent-color: var(--voz); height: 1.6rem; cursor: pointer;
}
.mando .pista { font-size: .8rem; color: var(--tinta-3); margin-top: .1rem; }

.resultado {
    background: var(--noche); color: var(--noche-texto);
    border-radius: var(--radio); padding: 1.6rem;
    background-image: radial-gradient(70% 60% at 80% 0%,
        color-mix(in srgb, var(--luz-clara) 11%, transparent) 0%, transparent 70%);
}
.resultado dl { margin: 0; display: flex; flex-direction: column; gap: .9rem; }
.resultado .fila { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.resultado dt { font-size: .93rem; color: var(--noche-texto-2); }
.resultado dd { margin: 0; font-family: var(--dato); font-size: 1.02rem; }
.resultado .fila--total {
    border-top: 1px solid var(--noche-borde); padding-top: .9rem; margin-top: .2rem;
}
.resultado .fila--total dt { color: #fff; font-size: 1rem; font-weight: 600; font-family: var(--texto); }
.resultado .fila--total dd { color: var(--verde-claro); font-size: 1.55rem; font-weight: 500; }
.resultado .letra-chica {
    font-size: .8rem; color: var(--noche-texto-2); margin-top: 1.3rem; line-height: 1.5;
}

/* ────────────────────────────────────── inventario del panel */

.panel-lista {
    margin-top: 2.6rem; display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grupo {
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--papel-2); padding: 1.3rem 1.4rem;
}
.grupo h3 {
    font-size: .78rem; font-family: var(--dato); font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--voz); margin-bottom: .85rem;
}
.grupo ul { margin: 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: .55rem; }
.grupo li { font-size: .93rem; line-height: 1.45; color: var(--tinta-2); }
.grupo li b { color: var(--tinta); font-weight: 600; }

/* ─────────────────────────────────────────────── cierre y pie */

.cierre { text-align: center; }
.cierre h2 { margin: 0 auto; max-width: 22ch; }
.cierre .seccion__entrada { margin-left: auto; margin-right: auto; }
.cierre .acciones { justify-content: center; }

.pie {
    background: var(--noche); color: var(--noche-texto-2);
    padding: 2.6rem 0; font-size: .88rem;
}
.pie .envoltura { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.pie a { color: var(--noche-texto); }
.pie a:hover { color: #fff; }
.pie .pie__legal { margin-left: auto; color: var(--noche-texto-2); }
@media (max-width: 700px) { .pie .pie__legal { margin-left: 0; } }

/* ────────────────────────────── WhatsApp flotante (solo en móvil) */

.whatsapp-flotante {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
    display: none;
    align-items: center; gap: .5rem;
    background: #128c7e; color: #fff; text-decoration: none;
    padding: .8rem 1.2rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .45);
}
.whatsapp-flotante:hover { color: #fff; background: #0f7568; }
@media (max-width: 780px) { .whatsapp-flotante { display: inline-flex; } }