/* Tokens copiados de venti7-cliente/constants/theme.ts (ver DESIGN.md).
   Tema navy único por decisión de producto: no hay modo claro.
   Ratios de contraste medidos sobre navy #131927. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Inter_400Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Inter_600SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Inter_700Bold.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* Marca */
  --color-navy: #131927;
  --color-teal: #3C8895;          /* solo decorativo / tamaño grande */
  --color-teal-on-dark: #3E8D9A;  /* 4.59:1 */
  --color-orange: #EC793A;        /* 6.16:1; texto encima siempre navy, nunca blanco */
  --color-orange-pressed: #DE5C15;

  /* Superficies */
  --color-surface-1: #171E30;
  --color-surface-2: #1B2438;
  --color-surface-3: #202941;
  --color-border: #273350;

  /* Texto */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #D1D5DB; /* 11.92:1 */
  --color-text-tertiary: #9CA3AF;  /* 6.92:1 */

  /* Estado */
  --color-success: #22C55E;        /* 7.71:1 */
  --color-error: #F87171;          /* 6.35:1 */

  /* Tipografía (px de theme.ts en rem, base 16px) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-caption: 0.75rem;    --line-height-caption: 1rem;      /* 12/16 */
  --font-size-body: 0.875rem;      --line-height-body: 1.25rem;      /* 14/20 */
  --font-size-body-lg: 1rem;       --line-height-body-lg: 1.375rem;  /* 16/22 */
  --font-size-title: 1.25rem;      --line-height-title: 1.625rem;    /* 20/26 */
  --font-size-headline: 1.5rem;    --line-height-headline: 1.875rem; /* 24/30 */
  --font-size-display: 2rem;       --line-height-display: 2.375rem;  /* 32/38 */

  /* Espaciado y radios */
  --space-xs: 0.25rem;  --space-sm: 0.5rem;  --space-md: 0.75rem;
  --space-lg: 1rem;     --space-xl: 1.25rem; --space-2xl: 1.5rem;
  --space-3xl: 2rem;    --space-4xl: 2.5rem; --space-5xl: 3rem;
  --space-6xl: 4rem;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-full: 999px;
  --min-touch-target: 44px;

  --focus-ring: 3px solid var(--color-orange);

  /* Maqueta: ancho máximo del contenido y márgenes laterales. */
  --content-max: 70rem; /* 1120px */
  --gutter: var(--space-lg);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-navy);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-body-lg);
  line-height: 1.5;
  /* Con el texto ampliado, una palabra larga (un correo, "restaurants" en
     un titular) se parte antes que salirse de la pantalla. */
  overflow-wrap: break-word;
}

/* Titulares: grandes, apretados y equilibrados; el interlineado baja a
   medida que crece el cuerpo. Nunca menos de 16px en ningún texto. */
h1,
h2,
h3 {
  margin: 0 0 var(--space-lg);
  font-weight: var(--font-weight-bold);
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-display);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--font-size-title);
  line-height: var(--line-height-title);
  margin-bottom: var(--space-sm);
}

p {
  margin: 0 0 var(--space-lg);
  max-width: 65ch;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-orange);
  text-underline-offset: 0.15em;
}

/* Los :hover solo cambian el aspecto y solo existen con ratón: en pantallas
   táctiles no hay estados "pegados" ni nada que dependa de pasar por encima. */
@media (hover: hover) {
  a:hover {
    text-decoration-thickness: 2px;
  }
}

/* Enlaces dentro de un texto: el relleno vertical lleva el área táctil a
   44px sin cambiar el interlineado (el relleno de un elemento en línea no
   ocupa espacio en la línea). */
p a:not(.button) {
  padding-block: 0.75rem;
}

/* Eleventy Image envuelve cada foto en <picture>. */
picture {
  display: block;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Foco visible solo con teclado; el anillo naranja da 6.16:1 sobre navy. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-lg);
  top: var(--space-lg);
  z-index: 10;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  background: var(--color-orange);
  color: var(--color-navy);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  max-width: calc(100% - 2 * var(--space-lg));
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  outline-color: var(--color-text-primary);
}

.container {
  width: min(100% - 2 * var(--gutter), var(--content-max));
  margin-inline: auto;
}

.narrow > * {
  max-width: 40rem;
}

/* Cabecera y pie */

.site-header {
  border-bottom: 1px solid var(--color-border);
}

/* Cabecera. Móvil: logo e idioma arriba (el idioma baja de línea si no
   caben, con el texto ampliado) y el menú debajo, a todo el ancho: en
   español no cabe junto al logo. Desde 768px, todo en una fila. */
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-lg);
  padding-block: var(--space-sm);
}

.site-lang {
  order: 1;
  margin-left: auto;
}

.site-nav {
  order: 2;
  flex-basis: 100%;
  /* Los enlaces llevan relleno lateral para el área táctil; así el texto
     del primero se alinea con el logo. */
  margin-inline: calc(-1 * var(--space-sm));
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  padding-block: var(--space-md);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--min-touch-target);
}

.logo {
  display: block;
  height: 1.75rem;
  width: auto;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--min-touch-target);
  min-width: var(--min-touch-target);
  padding-inline: var(--space-sm);
  color: var(--color-text-secondary);
}

.nav-list a[aria-current="page"] {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

/* Selector de idioma: el idioma actual en blanco y sin enlace; el otro,
   enlazado. El punto medio es decorativo (texto alternativo vacío). */
.lang-switch {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lang-switch li + li::before {
  content: "·" / "";
  color: var(--color-text-tertiary);
}

.lang-switch a,
.lang-switch__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--min-touch-target);
  min-width: var(--min-touch-target);
}

.lang-switch a {
  color: var(--color-text-secondary);
}

.lang-switch__current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-tertiary);
}

.copyright {
  margin: 0;
}

/* Contenido */

main {
  flex: 1;
}

.page {
  padding-block: var(--space-4xl) var(--space-6xl);
}

.page h2 {
  margin-top: var(--space-3xl);
}

.lead {
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  line-height: 1.5;
}

.section {
  padding-block: var(--space-5xl);
}

.section--surface {
  background: var(--color-surface-1);
  border-block: 1px solid var(--color-border);
}

/* Botones */

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: var(--space-3xl) 0 0;
  padding: 0;
  list-style: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--min-touch-target);
  padding: var(--space-md) var(--space-xl);
  border: 2px solid var(--color-orange);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
}

/* Texto siempre navy sobre naranja, nunca blanco (regla de theme.ts). */
.button--primary {
  background: var(--color-orange);
  color: var(--color-navy);
}

@media (hover: hover) {
  .button--primary:hover {
    background: var(--color-orange-pressed);
    border-color: var(--color-orange-pressed);
  }
}

.button--secondary {
  background: transparent;
  color: var(--color-text-primary);
}

@media (hover: hover) {
  .button--secondary:hover {
    background: var(--color-surface-2);
  }
}

.button--large {
  min-height: 3.5rem;
  padding: var(--space-lg) var(--space-3xl);
  font-size: 1.125rem;
}

/* Tiendas: segunda fila, más sobria que las llamadas principales (fondo de
   superficie, borde neutro) para no competir con el naranja. */
.store-row {
  margin-top: var(--space-md);
}

/* Mismo ancho los dos (cabe el texto más largo, en español), para que al
   apilarse no queden desiguales. El mínimo va en el li: ahí el 100 % es el
   ancho de la fila y nunca se sale de la pantalla con el texto ampliado. */
.store-row li {
  min-width: min(16rem, 100%);
}

.button--store {
  width: 100%;
  border-color: var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-primary);
}

@media (hover: hover) {
  .button--store:hover {
    background: var(--color-surface-3);
  }
}

/* Móvil: botones a todo el ancho, uno debajo de otro. */
@media (max-width: 39.99rem) {
  .button-row li {
    flex: 1 1 100%;
  }

  .button {
    width: 100%;
  }
}

/* Portada: cabecera */

.hero {
  padding-block: var(--space-4xl) var(--space-5xl);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4xl);
}

.tag {
  display: inline-block;
  margin-bottom: var(--space-xl);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-teal-on-dark);
  /* 24px: píldora en una línea; caja redondeada, no óvalo, si en español
     o con letra grande pasa a dos. */
  border-radius: var(--radius-xl);
  font-weight: var(--font-weight-semibold);
}

.hero h1 {
  max-width: 14ch;
  font-size: 2.5rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hero .lead {
  max-width: 34ch;
}

.hero__photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

/* Portada: cómo funciona (los pasos sí son una secuencia: van numerados) */

.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  margin: var(--space-2xl) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  text-wrap: pretty;
  position: relative;
  padding: var(--space-xl) var(--space-xl) var(--space-xl) calc(var(--space-xl) + 2.5rem + var(--space-md));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-1);
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: var(--space-xl);
  top: var(--space-lg);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--color-orange);
  color: var(--color-navy);
  font-weight: var(--font-weight-bold);
}

/* Pantallas estrechas medidas en rem (320px, o cualquier móvil con el
   texto ampliado): el número va encima del texto, como en escritorio, para
   no comerse media tarjeta y partir las palabras. */
@media (max-width: 22.5rem) {
  .steps li {
    padding: calc(var(--space-xl) + 2.5rem + var(--space-md)) var(--space-xl) var(--space-xl);
  }
}

/* Portada: confianza */

.trust__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xl);
  margin: var(--space-3xl) 0 0;
  padding: 0;
  list-style: none;
}

.trust__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-lg);
  color: var(--color-teal-on-dark);
}

.trust__item p {
  text-wrap: pretty;
  max-width: 40ch;
  color: var(--color-text-secondary);
}

/* Portada: cocineros */

.cooks {
  scroll-margin-top: var(--space-lg);
}

.cooks__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4xl);
}

.ticks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  margin: var(--space-2xl) 0;
  padding: 0;
  list-style: none;
  font-size: 1.125rem;
}

.ticks li {
  text-wrap: pretty;
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.ticks__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  color: var(--color-orange);
}

.note {
  color: var(--color-text-tertiary);
}

.cooks__cta {
  margin-top: var(--space-3xl);
}

/* Móvil: la foto va encima del título y en cuadrado, encuadrada de la
   cuchara a la olla (del 11 % al 91 % de la altura del original 4:5), no en
   el delantal. Desde 768px va al lado del texto, entera en 4:5. */
.cooks__inner > picture {
  order: -1;
}

.cooks__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 55%;
  border-radius: var(--radius-xl);
}

@media (min-width: 48rem) {
  :root {
    --gutter: var(--space-3xl);
  }

  h2 {
    font-size: 2.25rem;
    line-height: 1.1;
  }

  .hero {
    padding-block: 3.5rem var(--space-6xl);
  }

  .hero h1 {
    font-size: 3.5rem;
  }

  .lead {
    font-size: var(--font-size-title);
  }

  .section {
    padding-block: var(--space-6xl);
  }

  .trust__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5xl);
    max-width: 52rem;
  }

  .logo {
    height: 2rem;
  }

  .site-header__inner {
    flex-wrap: nowrap;
    padding-block: var(--space-md);
  }

  .site-nav {
    order: 0;
    flex-basis: auto;
    margin-inline: auto 0;
  }

  .site-lang {
    margin-left: 0;
  }

  .lang-switch {
    padding-left: var(--space-md);
    border-left: 1px solid var(--color-border);
  }

  /* Tableta vertical: la cabecera sigue en una columna (el titular no cabe
     a 56px en media tableta), pero la foto pasa a 16:9 para que texto,
     botones y foto entren juntos en la primera pantalla. */
  .hero h1 {
    max-width: 16ch;
  }

  /* La entradilla ocupa el ancho de la columna: con 34ch dejaba media
     tableta vacía a la derecha. El límite de 65ch de los párrafos sigue. */
  .hero .lead {
    max-width: none;
  }

  .hero__photo {
    aspect-ratio: 16 / 9;
  }

  /* Cocineros: dos columnas ya en tableta. Las líneas son cortas y caben en
     media pantalla; en una columna la foto quedaba como un bloque enorme
     después del botón. Foto a la izquierda para alternar con la cabecera. */
  .cooks__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4xl);
  }

  .cooks__photo {
    aspect-ratio: 4 / 5;
  }
}

/* Cómo funciona: tres columnas solo desde 900px. En tableta vertical cada
   tarjeta quedaba en 220px con el texto en tres o cuatro líneas; en una
   columna, número a la izquierda y frase en una sola línea. */
@media (min-width: 56.25rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .steps li {
    padding: calc(var(--space-xl) + 2.5rem + var(--space-md)) var(--space-xl) var(--space-xl);
  }
}

/* Tableta horizontal y ordenador: la cabecera pasa a dos columnas. Hasta
   1280px, columnas iguales y hueco menor para que el titular no se parta en
   cuatro líneas; desde ahí, la foto gana un 20 % de ancho. */
@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-5xl);
  }

  .hero h1 {
    max-width: 14ch;
  }

  /* Más alta que ancha no: 5:4, más alta que el bloque de texto, para que
     la comida mande. El encuadre se desplaza a la izquierda para no perder
     el plato principal. */
  .hero__photo {
    aspect-ratio: 5 / 4;
    object-position: 30% 50%;
  }

  .cooks__inner {
    gap: var(--space-6xl);
  }

  /* Por encima de 1024px vuelve el espaciado amplio entre secciones. */
  .hero {
    padding-block: var(--space-6xl) 4.5rem;
  }

  .section {
    padding-block: 5.5rem;
  }
}

@media (min-width: 80rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-6xl);
  }
}

/* Contacto y páginas de Stripe */

.contact__cta {
  margin-top: var(--space-2xl);
}

/* Bloque de cocineros dentro de contacto: superficie propia para separarlo
   del contacto general. */
.pitch {
  margin-block: var(--space-5xl);
  padding: var(--space-2xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-1);
}

.page .pitch h2 {
  margin-top: 0;
}

/* Pantalla estrecha en rem: el bloque pierde relleno para no estrechar el
   texto, y los puntos y el botón (elementos flex, donde break-word no
   basta) pueden partir una palabra que no quepa. */
@media (max-width: 22.5rem) {
  .pitch {
    padding: var(--space-lg);
  }
}

.ticks li,
.button {
  overflow-wrap: anywhere;
}

.help {
  margin-top: var(--space-3xl);
  color: var(--color-text-secondary);
}

@media (min-width: 48rem) {
  .pitch {
    padding: var(--space-4xl);
  }
}

/* Móvil en horizontal (pantalla baja): cabecera más compacta para que el
   botón principal quede dentro de la primera pantalla. */
@media (orientation: landscape) and (max-height: 30rem) {
  .hero {
    padding-top: var(--space-2xl);
  }

  .tag {
    margin-bottom: var(--space-md);
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .hero .lead {
    max-width: none;
  }

  .hero .button-row {
    margin-top: var(--space-xl);
  }
}

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