/* ==========================================================================
   Qomensal — landing para restaurantes
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fuentes (autoalojadas en assets/fonts/)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Familjen Grotesk";
  src: url("assets/fonts/familjen-grotesk-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url("assets/fonts/familjen-grotesk-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("assets/fonts/source-serif-4-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --papel: #FAF9F6;
  --papel-hundido: #F1EFE9;
  --tinta: #1C2733;
  --tinta-suave: #5A6673;
  --verde: #2F5D50;
  --verde-hondo: #22443B;
  --ambar: #E0A32E;
  --linea: #D9D5CC;
  --error: #A6382E;
  --error-sobre-verde: #EFB7AD;

  /* Tipografía */
  --fuente-titulares: "Familjen Grotesk", system-ui, sans-serif;
  --fuente-cuerpo: "Source Serif 4", Georgia, serif;
  --fuente-interfaz: var(--fuente-titulares);
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-titular: 600;
  --fs-hero: clamp(40px, 4.2vw + 12px, 72px);
  --fs-seccion: clamp(33px, 3vw + 10px, 48px);
  --fs-subtitular: 26px;
  --fs-destacado: 21px;
  --fs-cuerpo-grande: 19px;
  --fs-cuerpo: 17px;
  --fs-interfaz: 16px;
  --fs-pie: 14px;
  --lh-cuerpo: 1.65;
  --lh-interfaz: 1.3;
  --lh-pie: 1.4;
  --tracking-grande: -0.02em;

  /* Espacio */
  --espacio-1: 8px;
  --espacio-2: 16px;
  --espacio-3: 24px;
  --espacio-4: 40px;
  --espacio-5: 64px;
  --espacio-6: 96px;
  --espacio-seccion: 128px;
  --ancho-contenido: 1200px;

  /* Líneas, radios, controles */
  --linea-1: 1px solid var(--linea);
  --linea-2: 2px solid var(--verde);
  --radio-0: 0;
  --radio-1: 3px;
  --alto-control: 48px;
  --sombra: none;

  /* Movimiento */
  --duracion: 150ms;
  --curva: ease-out;
  --transicion: var(--duracion) var(--curva);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracion: 0ms;
    --transicion: none;
  }
}

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: var(--peso-normal) var(--fs-cuerpo) / var(--lh-cuerpo) var(--fuente-cuerpo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--fuente-titulares);
  letter-spacing: var(--tracking-grande);
}

p { margin: 0; }
p + p { margin-top: var(--espacio-3); }

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

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.tabular { font-variant-numeric: tabular-nums; }

.contenedor { max-width: var(--ancho-contenido); margin: 0 auto; }

.texto-grande { font-size: var(--fs-cuerpo-grande); max-width: 60ch; text-wrap: pretty; }

.seccion { padding: var(--espacio-seccion) var(--espacio-3); }
.seccion--hundida { background: var(--papel-hundido); }
.seccion--sin-arriba { padding-top: 0; }

.seccion__titulo {
  font-size: var(--fs-seccion);
  font-weight: var(--peso-titular);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.seccion__titulo--con-margen { margin-bottom: 56px; }

/* Rejilla de dos columnas que se apila en móvil */
.problema__grid,
.que-es__grid,
.que-no-cambia__grid,
.faq__grid,
.contacto__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: var(--espacio-4) var(--espacio-6);
  align-items: start;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alto-control);
  padding: 0 28px;
  font: var(--peso-medio) var(--fs-interfaz) / var(--lh-interfaz) var(--fuente-interfaz);
  border-radius: var(--radio-1);
  border: 1px solid var(--verde);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--sombra);
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
.boton--primario { background: var(--verde); color: var(--papel); }
.boton--primario:hover { background: var(--verde-hondo); border-color: var(--verde-hondo); color: var(--papel); }
.boton--secundario { background: transparent; color: var(--verde); }
.boton--secundario:hover { background: var(--papel-hundido); border-color: var(--verde-hondo); color: var(--verde-hondo); }

/* Primario sobre fondo verde hondo: se invierte */
.boton--invertido { background: var(--papel); color: var(--verde-hondo); border-color: var(--papel); }
.boton--invertido:hover { background: var(--papel-hundido); border-color: var(--papel-hundido); color: var(--verde-hondo); }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--papel);
  border-bottom: var(--linea-1);
}
.cabecera__interior {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0 var(--espacio-3);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}
.wordmark {
  display: flex;
  align-items: center;
  text-decoration: none;
}
/* El PNG lleva mucho lienzo transparente alrededor del dibujo, así que la
   altura del elemento es bastante mayor que la del logotipo que se ve. */
.wordmark__imagen {
  display: block;
  height: 62px;
  width: auto;
}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  min-height: 640px;
}
.hero__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--espacio-6) 48px var(--espacio-6) max(var(--espacio-3), calc((100vw - var(--ancho-contenido)) / 2 + var(--espacio-3)));
}
.hero__titulo {
  font-size: var(--fs-hero);
  font-weight: var(--peso-titular);
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 14ch;
  text-wrap: balance;
}
.hero__entradilla {
  margin-top: 32px;
  font-size: var(--fs-destacado);
  line-height: 1.5;
  max-width: 42ch;
  text-wrap: pretty;
}
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin-top: var(--espacio-4);
}
.hero__visual { position: relative; min-height: 420px; }
.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Panel con la retícula, superpuesto a la foto */
.reticula-panel {
  position: absolute;
  left: 0;
  bottom: 48px;
  width: min(400px, calc(100% - 48px));
  background: var(--papel);
  padding: var(--espacio-3);
  border-top: var(--linea-1);
  border-right: var(--linea-1);
  border-bottom: var(--linea-1);
}
.reticula-panel__titulo {
  margin-bottom: var(--espacio-2);
  font: var(--peso-medio) var(--fs-interfaz) / var(--lh-interfaz) var(--fuente-interfaz);
  color: var(--tinta-suave);
}

/* Retícula horaria: SVG en línea que hereda los tokens */
.reticula { display: block; width: 100%; height: auto; }
.reticula text {
  font-family: var(--fuente-interfaz);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  fill: var(--tinta-suave);
}
.reticula__linea { stroke: var(--linea); stroke-width: 1; }
.reticula__hueco { fill: var(--ambar); }
.reticula__hueco-etiqueta { font-weight: var(--peso-medio); fill: var(--tinta); }

/* Único movimiento de la página: el hueco aparece al cargar */
@media (prefers-reduced-motion: no-preference) {
  .reticula__hueco,
  .reticula__hueco-etiqueta {
    opacity: 0;
    animation: aparecer-hueco 200ms ease-out 350ms forwards;
  }
  @keyframes aparecer-hueco {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* --------------------------------------------------------------------------
   2. El problema
   -------------------------------------------------------------------------- */
.problema__destacado {
  margin-top: 48px;
  font: var(--peso-medio) clamp(24px, 2vw + 10px, 32px) / 1.25 var(--fuente-titulares);
  letter-spacing: var(--tracking-grande);
  color: var(--verde);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   3. Qué es Qomensal
   -------------------------------------------------------------------------- */
.que-es__titulo { max-width: 20ch; }
.que-es__grid { margin-top: 56px; }
.bloque-destacado {
  border-left: var(--linea-2);
  padding-left: var(--espacio-3);
}
.bloque-destacado p {
  font: var(--peso-medio) clamp(21px, 1.5vw + 10px, 26px) / 1.35 var(--fuente-titulares);
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4. Cómo funciona
   -------------------------------------------------------------------------- */
.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 0 48px;
}
.paso { border-top: var(--linea-1); padding: 32px 0 var(--espacio-4); }
.paso__numero {
  display: block;
  font: var(--peso-medio) clamp(40px, 3vw + 16px, 56px) / 1 var(--fuente-titulares);
  letter-spacing: -0.03em;
  color: var(--verde);
}
.paso__titulo {
  margin-top: 32px;
  font-size: var(--fs-subtitular);
  font-weight: var(--peso-medio);
  line-height: 1.2;
}
.paso p { margin-top: var(--espacio-2); max-width: 40ch; }

/* --------------------------------------------------------------------------
   5. Qué no cambia
   -------------------------------------------------------------------------- */
.que-no-cambia__grid { gap: 48px var(--espacio-6); }
.que-no-cambia__entradilla { margin-top: 32px; max-width: 48ch; }
.que-no-cambia__cierre {
  margin-top: 32px;
  max-width: 48ch;
  font: var(--peso-normal) var(--fs-interfaz) / var(--lh-pie) var(--fuente-interfaz);
  color: var(--tinta-suave);
}
.lista-reglada {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.lista-reglada li {
  border-top: var(--linea-1);
  padding: var(--espacio-3) 0;
  font: var(--peso-medio) clamp(20px, 1.3vw + 10px, 24px) / 1.3 var(--fuente-titulares);
  letter-spacing: -0.015em;
}
.lista-reglada li:last-child { border-bottom: var(--linea-1); }

/* --------------------------------------------------------------------------
   6. Qué ganas
   -------------------------------------------------------------------------- */
.ventajas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 48px;
}
.ventaja { border-top: var(--linea-2); padding-top: var(--espacio-3); }
.ventaja__titulo {
  font-size: var(--fs-subtitular);
  font-weight: var(--peso-medio);
  line-height: 1.2;
}
.ventaja p { margin-top: var(--espacio-2); max-width: 40ch; }

/* --------------------------------------------------------------------------
   7. Preguntas frecuentes
   -------------------------------------------------------------------------- */
.faq__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.acordeon__item { border-bottom: var(--linea-1); }
.acordeon__pregunta { margin: 0; font: inherit; }
.acordeon__boton {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-3);
  margin: 0;
  padding: 22px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--tinta);
  font: var(--peso-medio) var(--fs-destacado) / 1.3 var(--fuente-titulares);
  letter-spacing: -0.01em;
  transition: color var(--transicion);
}
.acordeon__boton:hover { color: var(--verde); }
.acordeon__icono {
  flex: none;
  fill: none;
  stroke: var(--tinta-suave);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.acordeon__boton[aria-expanded="true"] .acordeon__icono-vertical { display: none; }
.acordeon__respuesta p { padding: 0 var(--espacio-4) 28px 0; max-width: 60ch; }

/* --------------------------------------------------------------------------
   8. Formulario
   -------------------------------------------------------------------------- */
.contacto {
  background: var(--verde-hondo);
  color: var(--papel);
}
.contacto__grid { gap: 56px var(--espacio-6); }
.contacto__entradilla { margin-top: 32px; max-width: 48ch; }
.contacto a { color: var(--papel); }
.contacto a:hover { color: var(--papel-hundido); }

.formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--espacio-3);
  align-items: start;
}
.campo { display: flex; flex-direction: column; gap: var(--espacio-1); }
.campo--ancho { grid-column: 1 / -1; }
.campo__etiqueta {
  font: var(--peso-normal) var(--fs-pie) / var(--lh-pie) var(--fuente-interfaz);
  color: var(--papel);
}
.campo__control {
  width: 100%;
  min-height: var(--alto-control);
  padding: 0 12px;
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-1);
  font: var(--peso-normal) var(--fs-interfaz) / var(--lh-interfaz) var(--fuente-interfaz);
  outline: none;
  transition: border-color var(--transicion);
}
.campo__control--area { padding: 12px; resize: vertical; min-height: 0; }
.campo__control:focus { border: 2px solid var(--verde); }
.campo__control:focus-visible { outline: 2px solid var(--papel); outline-offset: 2px; }

/* Estado de error: lo aplica script.js con la clase .campo--error */
.campo--error .campo__control { border: 2px solid var(--error); }
.campo__error {
  font: var(--peso-normal) var(--fs-pie) / var(--lh-pie) var(--fuente-interfaz);
  color: var(--error-sobre-verde);
}
.campo__error[hidden] { display: none; }

/* Honeypot: fuera de pantalla, no display:none para que los bots lo rellenen */
.campo--trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.casilla {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font: var(--peso-normal) var(--fs-pie) / var(--lh-pie) var(--fuente-interfaz);
  color: var(--papel);
  cursor: pointer;
}
.casilla__control { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--verde); }
.casilla__control:focus-visible { outline: 2px solid var(--papel); outline-offset: 2px; }

.contacto .boton--invertido:focus-visible { outline: 2px solid var(--papel); }

/* Mensaje de éxito: sustituye al <form> */
.formulario__exito {
  font: var(--peso-medio) var(--fs-subtitular) / 1.25 var(--fuente-titulares);
  letter-spacing: var(--tracking-grande);
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
.pie {
  border-top: var(--linea-1);
  padding: var(--espacio-4) var(--espacio-3);
  font: var(--peso-normal) var(--fs-pie) / var(--lh-pie) var(--fuente-interfaz);
  color: var(--tinta-suave);
}
.pie__interior {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}
.pie__enlaces { display: flex; flex-wrap: wrap; gap: var(--espacio-3); }
.pie a { color: var(--tinta-suave); }
.pie a:hover { color: var(--verde-hondo); }

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --espacio-seccion: 56px; }
  .seccion__titulo--con-margen { margin-bottom: var(--espacio-4); }
  .hero__texto { padding: 56px var(--espacio-3); }
  .hero__visual { min-height: 480px; }
  .reticula-panel { bottom: var(--espacio-3); }
  .paso { padding-bottom: 32px; }
}

/* --------------------------------------------------------------------------
   Páginas legales (aviso legal, privacidad, cookies)
   Sin tokens nuevos: todo sale de :root.
   -------------------------------------------------------------------------- */
.legal__interior { max-width: 720px; }
.legal h1 { margin-bottom: var(--espacio-4); }

/* Marca de contenido pendiente. Quien la hace visible es el rótulo en
   --error, no la línea: el ámbar está reservado para la marca de hueco del
   hero y no se usa como decoración en ningún otro sitio. */
.pendiente {
  border-left: 3px solid var(--linea);
  background: var(--papel-hundido);
  padding: var(--espacio-3);
}
.pendiente__marca {
  font: var(--peso-titular) var(--fs-interfaz) / var(--lh-interfaz) var(--fuente-interfaz);
  color: var(--error);
}
.pendiente p + p { margin-top: var(--espacio-2); }
.pendiente__nota {
  font-size: var(--fs-pie);
  line-height: var(--lh-pie);
  color: var(--tinta-suave);
}
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--papel);
  border: var(--linea-1);
  border-radius: var(--radio-1);
  padding: 1px 5px;
}

/* Texto corrido de las páginas legales.
   Sin tokens nuevos: subtitular para los h2, cuerpo serif para los párrafos y
   líneas de 1px para las listas, como pide el punto 9 del design system. */
.legal h2 {
  margin-top: var(--espacio-5);
  font-size: var(--fs-subtitular);
  font-weight: var(--peso-medio);
  line-height: 1.2;
}
.legal h2 + p { margin-top: var(--espacio-2); }

/* El límite de 68 caracteres del design system. El contenedor es más ancho
   para que la tabla respire, así que la medida se limita en el párrafo. */
.legal p,
.legal__lista li { max-width: 62ch; }

/* La fecha se pega al titular en vez de quedar suelta a media distancia. */
.legal h1:has(+ .legal__fecha) { margin-bottom: var(--espacio-1); }
.legal__fecha {
  font: var(--peso-normal) var(--fs-pie) / var(--lh-pie) var(--fuente-interfaz);
  color: var(--tinta-suave);
}

/* Lista de puntos: una línea de 1px y una sangría, sin viñetas. */
.legal__lista {
  list-style: none;
  margin: var(--espacio-3) 0 0;
  padding: 0;
}
.legal__lista li {
  border-top: var(--linea-1);
  padding: var(--espacio-2) 0 var(--espacio-2) var(--espacio-3);
}
.legal__lista li:last-child { border-bottom: var(--linea-1); }
.legal__lista + p { margin-top: var(--espacio-3); }

/* Tabla de datos. Es una retícula: reglas de 1px, radio 0 y ninguna sombra.
   En pantallas estrechas se desplaza en horizontal dentro de su envoltorio,
   que es enfocable para poder recorrerla también con el teclado. */
.tabla__envoltorio {
  margin-top: var(--espacio-3);
  overflow-x: auto;
  border-bottom: var(--linea-1);
}
.tabla__envoltorio:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.tabla {
  width: 100%;
  /* Por debajo de este ancho la columna de finalidad baja de cinco palabras
     por línea y se vuelve incómoda: a partir de aquí la tabla se desplaza
     dentro de su envoltorio en vez de comprimirse más. Probado a 460px, donde
     se recorren 100px menos a cambio de duplicar el alto de cada fila.
     En escritorio manda el width: 100%. */
  min-width: 560px;
  border-collapse: collapse;
  text-align: left;
}
.tabla__titulo {
  padding-bottom: var(--espacio-2);
  font: var(--peso-medio) var(--fs-interfaz) / var(--lh-interfaz) var(--fuente-interfaz);
  color: var(--tinta-suave);
  text-align: left;
}
.tabla th,
.tabla td {
  padding: var(--espacio-2) var(--espacio-3) var(--espacio-2) 0;
  vertical-align: top;
}
.tabla th:last-child,
.tabla td:last-child { padding-right: 0; }
/* La duración es un dato corto: que no se parta en dos líneas. */
.tabla td:last-child { white-space: nowrap; }
.tabla thead th {
  border-bottom: var(--linea-2);
  padding-top: 0;
  font: var(--peso-medio) var(--fs-pie) / var(--lh-pie) var(--fuente-interfaz);
  color: var(--tinta-suave);
}
.tabla tbody th,
.tabla tbody td {
  border-top: var(--linea-1);
  font-size: var(--fs-pie);
  line-height: 1.5;
  font-weight: var(--peso-normal);
}
.tabla tbody tr:first-child th,
.tabla tbody tr:first-child td { border-top: 0; }
.tabla__envoltorio + p { margin-top: var(--espacio-3); }

/* Página 404 */
.error404__texto { margin-top: var(--espacio-3); }
.error404__accion { margin-top: var(--espacio-4); }