/**
 * El sistema de la página pública. NO es el de la consola, y eso es deliberado.
 *
 * `src/lib/tokens.ts` está pensado para una herramienta que alguien mira ocho
 * horas: texto de 13 px, grises suaves, densidad alta, poco color. Todo eso es
 * correcto ahí y es exactamente lo contrario de lo que necesita una página que
 * tiene cinco segundos para explicar un producto. Reutilizarlo daría una página
 * que parece un panel de administración, que es el error más común y el que más
 * se nota.
 *
 * Lo único que comparten es la marca: el rojo, el negro y el blanco.
 *
 * ── LA ESCALA ────────────────────────────────────────────────────────────────
 *
 * Salto grande entre pasos. En una herramienta, dos tamaños contiguos se
 * distinguen porque se ven juntos todo el día; en una página, o el salto es
 * evidente o no hay jerarquía. De ahí 16 → 20 → 28 → 40 → 64, que es
 * aproximadamente una razón de 1,4.
 *
 * ── EL ESPACIO ───────────────────────────────────────────────────────────────
 *
 * Tres valores de separación entre secciones y ni uno más: 48, 96, 160. Lo que
 * hace que una página parezca cara casi nunca es el color, es que todo cae en
 * la misma rejilla y que el aire entre bloques es el mismo siempre.
 */

:root {
  /* La marca, la misma de la consola. */
  --rojo: #c1121f;
  --rojo-vivo: #e11d2a;
  /*
    Dos rojos, por el mismo motivo que en la consola: uno para RELLENAR y otro
    para ESCRIBIR. El de relleno solo necesita 3:1 —no se lee, se ve— y el de
    texto 4,5. En oscuro, `#e11d2a` sobre el fondo da 4,10: vale para pintar un
    botón y no vale para escribir encima de nada.
  */
  --rojo-texto: #c1121f;
  --negro: #0c0c0e;
  --blanco: #ffffff;

  --fondo: #ffffff;
  --fondo-alt: #f7f7f8;
  --texto: #0c0c0e;
  --texto-suave: #52525b;
  --borde: #e4e4e7;

  /* Tipografía: un paso de 1,4 aproximadamente. */
  --t-sm: 0.875rem;   /* 14 */
  --t-base: 1rem;     /* 16 */
  --t-md: 1.25rem;    /* 20 */
  --t-lg: 1.75rem;    /* 28 */
  --t-xl: 2.5rem;     /* 40 */
  --t-2xl: 4rem;      /* 64 */

  /* Espacio: múltiplos de 8, y tres saltos de sección. */
  --e-1: 8px;
  --e-2: 16px;
  --e-3: 24px;
  --e-4: 32px;
  --e-5: 48px;
  --e-6: 96px;
  --e-7: 160px;

  --ancho: 1120px;
  /* 65 caracteres es el ancho de lectura cómodo para texto corrido. */
  --lectura: 62ch;

  --radio: 10px;
  --radio-caja: 16px;

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/*
  El modo oscuro se diseña A LA VEZ, no se deriva.

  La marca es roja, negra y blanca, así que el oscuro no es un añadido: es la
  otra mitad natural de la identidad. En oscuro el rojo sube a `--rojo-vivo`,
  que es el mismo valor que ya usa la paleta oscura de la consola y que está
  medido: el `#C1121F` sobre negro se hunde.
*/
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0c0c0e;
    --fondo-alt: #141417;
    --texto: #f4f4f5;
    --texto-suave: #a1a1aa;
    /*
      De #27272a a #414144: contra el fondo daba 1,31, o sea que el borde de
      las tarjetas era invisible de noche y la página se leía como una mancha.
      Ahora 1,92, que es el mismo umbral que exige la prueba de la consola y
      por el mismo motivo.
    */
    --borde: #414144;
    --rojo: var(--rojo-vivo);
    /* Aclarado hasta 5,94 sobre el fondo. Ver el comentario de arriba. */
    --rojo-texto: #f15b5b;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /*
    La cabecera es `sticky`, así que al saltar a un ancla el navegador deja el
    destino justo DEBAJO de ella y el título queda cortado por la mitad. Esto
    le dice cuánto tiene que dejar libre. Se pone en `html` para que valga
    también cuando el salto lo hace el navegador al recargar con `#algo`.
  */
  scroll-padding-top: 80px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  /* Sin esto, en macOS el texto claro sobre negro se ve más gordo de la cuenta. */
  -webkit-font-smoothing: antialiased;
}

/* El gutter de 16 px en móvil: sin él, el texto toca el borde del cristal. */
.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--e-2);
}

@media (min-width: 768px) {
  .envoltura {
    padding: 0 var(--e-4);
  }
}

section {
  padding: var(--e-6) 0;
}

@media (min-width: 768px) {
  section {
    /*
      112 y no 160. Con 160 arriba y 160 abajo, entre dos secciones quedan 320
      px de nada, que en un portatil es media pantalla vacia: se lee como que
      la pagina se acabo. El aire tiene que separar, no interrumpir.
    */
    padding: 112px 0;
  }
}

.alterna {
  background: var(--fondo-alt);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h1 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 7vw, var(--t-2xl));
}

h2 {
  font-family: var(--display);
  font-size: clamp(1.75rem, 4.5vw, var(--t-xl));
}

h3 {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
  max-width: var(--lectura);
}

.suave {
  color: var(--texto-suave);
}

.grande {
  font-size: var(--t-md);
}

.pequeno {
  font-size: var(--t-sm);
}

/* ── Botones ──────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  /* 48 y no 44: en una página de venta el botón principal es el elemento que
     más tiene que pesar, y 44 es el mínimo, no el objetivo. */
  min-height: 48px;
  padding: 0 var(--e-3);
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-size: var(--t-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, background-color 150ms ease;
}

.boton-principal {
  background: var(--rojo);
  color: #fff;
}

/* La elevación al señalar: 1 px, no 4. Más se lee como un juguete. */
.boton-principal:hover {
  transform: translateY(-1px);
}

.boton-secundario {
  background: transparent;
  border-color: var(--borde);
  color: var(--texto);
}

.boton-secundario:hover {
  border-color: var(--texto-suave);
}

/*
  El foco con teclado, visible.

  Es lo primero que se pierde en una página de venta, porque se diseña mirando
  y no tabulando.
*/
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Enlaces ──────────────────────────────────────────────────────────────── */

a {
  color: inherit;
}

.enlace {
  color: var(--texto);
  text-decoration: none;
  border-bottom: 1px solid var(--borde);
  padding-bottom: 1px;
  transition: border-color 150ms ease;
}

.enlace:hover {
  border-color: var(--rojo);
}

/* ── Rejilla ──────────────────────────────────────────────────────────────── */

.rejilla {
  display: grid;
  gap: var(--e-5);
}

@media (min-width: 768px) {
  .rejilla-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .rejilla-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e-6);
    align-items: center;
  }
}

.caja {
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-caja);
  background: var(--fondo);
}

/* ── El movimiento al desplazar ───────────────────────────────────────────── */

/*
  16 px y 300 ms, una sola vez, y solo en los bloques.

  Una página sin nada de movimiento parece plana; con movimiento en todo, barata
  y lenta. La diferencia está en mover poco: `transform` y `opacity` son las dos
  únicas que el navegador anima sin recalcular la caja.

  Empieza VISIBLE y lo esconde el JavaScript. Al revés —empezar oculto en el
  CSS— quien tenga el JavaScript bloqueado se queda con una página en blanco,
  que es la forma más tonta de perder a alguien.
*/
.entra {
  opacity: 1;
}

.entra.oculto {
  opacity: 0;
  transform: translateY(16px);
  /*
    El bloque sigue OCUPANDO su sitio mientras está oculto.
    `visibility: hidden` o `display: none` lo sacarían del flujo y la sección
    se plegaría, que es justo el hueco vacío que se ve al desplazar rápido.
  */
}

.entra.visible {
  opacity: 1;
  transform: none;
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

/* ── Encabezado y pie ─────────────────────────────────────────────────────── */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--e-2) 0;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}

.cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  font-size: var(--t-base);
}

.marca-punto {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--rojo);
}

.pie {
  padding: var(--e-5) 0;
  border-top: 1px solid var(--borde);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.pie-fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
  justify-content: space-between;
}

/*
 * Los cinco enlaces del pie, que se salían de la pantalla en un teléfono.
 *
 * Esto era un `style="display: flex; gap: …"` en el HTML, sin `flex-wrap`:
 * cinco enlaces en una sola línea miden 455 px y el viewport de un iPhone SE
 * tiene 375. El resultado era barra de desplazamiento LATERAL en toda la
 * página —la página entera se movía de lado al arrastrar— y no se veía desde
 * el escritorio ni desde el primer pantallazo del teléfono, porque el
 * desbordamiento está abajo del todo.
 *
 * Lo de fuera (`.pie-fila`) ya envolvía. Lo de dentro no, y flex no encoge por
 * debajo del contenido de sus hijos: envolver el padre no sirve de nada si el
 * hijo es una barra rígida.
 *
 * El `row-gap` va aparte del `gap` heredado: al envolver, dos filas de
 * enlaces pegadas se leen como una sola lista revuelta.
 */
.pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--e-3);
  row-gap: var(--e-1);
}

.pie a {
  color: var(--texto-suave);
  text-decoration: none;
  /*
   * 24 px de alto mínimo: es el objetivo táctil mínimo de la WCAG 2.5.8 para
   * enlaces en línea. En un pie, un enlace de 17 px de alto entre otros cuatro
   * se falla con el pulgar y se acaba abriendo «Conditions» queriendo abrir
   * «Se connecter».
   */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.pie a:hover {
  color: var(--texto);
}

/* ── La consola, dibujada ─────────────────────────────────────────────────────
 *
 * No es una captura: es la interfaz de verdad, con su misma rejilla, su misma
 * paleta y sus mismos radios, escrita en HTML. Se eligió así por dos motivos.
 *
 * Una captura se queda vieja en cuanto cambia la consola, y las capturas viejas
 * en una página de producto se notan y restan. Esto se actualiza cuando se
 * actualizan los tokens.
 *
 * Y sobre todo: una captura no se puede leer con un lector de pantalla ni
 * seleccionar ni traducir. Esto sí, porque es texto.
 *
 * Los datos son inventados y verosímiles de Montreal. NUNCA de una conversación
 * real: las de BonPrix son de sus clientes, no nuestras.
 */

.consola {
  border: 1px solid var(--borde);
  border-radius: var(--radio-caja);
  background: var(--fondo);
  overflow: hidden;
  /* Sin la sombra, la maqueta se lee como otra caja más de la página en vez de
     como una ventana. Es lo único que la separa del papel. */
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
}

.consola-barra {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  padding: 10px var(--e-2);
  background: var(--negro);
  color: #fafafa;
  font-size: var(--t-sm);
  font-weight: 600;
}

.consola-cuerpo {
  padding: var(--e-3);
  display: grid;
  gap: var(--e-3);
}

.consola-quien {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* El avatar con iniciales, igual que `src/lib/Avatar.tsx`. */
.avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: var(--t-sm);
  font-weight: 600;
}

/* El punto de estado: relleno ámbar = esperando respuesta. Ver
   `src/lib/estadoConversacion.ts`, donde está el porqué de la forma. */
.punto {
  /*
    `inline-block` y no `inline`: un elemento en linea IGNORA `width` y
    `height`, asi que el punto existia en el DOM y medía cero. Se veia como un
    espacio de mas y nada mas.
  */
  display: inline-block;
  vertical-align: 1px;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #b45309;
}

.consola-dato {
  display: flex;
  gap: var(--e-2);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.consola-etiqueta {
  flex-shrink: 0;
  width: 92px;
  color: var(--texto-suave);
}

.consola-valor {
  color: var(--texto);
  /* Las cifras que se comparan en vertical, de ancho fijo. */
  font-variant-numeric: tabular-nums;
}

.recorrido {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chip {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: 12px;
  white-space: nowrap;
}

.pedido {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: var(--t-sm);
}

.estado-ok {
  margin-left: auto;
  color: #15803d;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (prefers-color-scheme: dark) {
  .estado-ok {
    color: #22c55e;
  }
  .punto {
    background: #f59e0b;
  }
}

/* ── Preguntas frecuentes ─────────────────────────────────────────────────────
 *
 * `<details>` del navegador y no un acordeón propio. Tres motivos, y el tercero
 * es el que decide:
 *
 *  · Funciona sin JavaScript.
 *  · Ya es accesible: el teclado lo abre con Enter y el lector de pantalla
 *    anuncia si está abierto o cerrado, sin que haya que acordarse de poner un
 *    `aria-expanded` que se olvida la mitad de las veces.
 *  · El buscador lee el contenido aunque esté cerrado, que es lo que permite
 *    que estas preguntas salgan desplegadas en el resultado de búsqueda.
 */

.preguntas {
  display: grid;
  gap: 0;
  margin-top: var(--e-5);
  max-width: 760px;
}

.pregunta {
  border-bottom: 1px solid var(--borde);
}

.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  /* 56 de alto: la fila entera es lo que se pulsa, no solo el texto. */
  min-height: 56px;
  padding: var(--e-2) 0;
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  /* El triángulo del sistema se quita porque se dibuja el signo propio; el
     `list-style` es para Firefox y el `::-webkit-details-marker` para Safari. */
  list-style: none;
}

.pregunta summary::-webkit-details-marker {
  display: none;
}

.pregunta summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: var(--t-md);
  font-weight: 400;
  color: var(--texto-suave);
  transition: transform 150ms ease;
}

.pregunta[open] summary::after {
  content: "−";
}

.pregunta p {
  padding-bottom: var(--e-3);
  color: var(--texto-suave);
}