/* CheckPlease — landing page styles
   Rediseño oscuro y cálido. Instrument Serif para titulares, DM Sans para todo
   lo demás. Un solo hero (antes había tres variantes conmutables). */

:root {
  --bg: #242623;
  --bg-deep: #141513; /* scrim: franja detrás de hojas y pies */
  --surface: #2e312b;
  --surface-alt: #292b26; /* barra y pies fijos */
  --surface-strong: #383b32; /* íconos en círculo, botones secundarios, iniciales */
  --field: #2d3029;
  --border: #474a41;
  --divider: #383b34;
  --text: #f1e9dc;
  --text-muted: #b8ac9c;
  --text-subtle: #9a8f80;
  --accent: #e72174;
  --accent-deep: #c2255c;
  /* Variantes del acento que pasan contraste AA (4.5:1) en texto chico:
     --accent-text sobre los fondos oscuros, --accent-cta como fondo de texto
     blanco. El --accent puro da 3.5:1 y 4.3:1; se sigue usando en titulares
     grandes, íconos y fondos sin texto. */
  --accent-text: #f0649c;
  --accent-cta: #db1f6e;
  --ink: #1e201d;
  --cream: #efe6d8;
  --open-dot: #6cc48a;
  --open-text: #a8ddb9;
  --star: #d4af63;
  --amber: #e0a84e;
  --red: #e5675c;
  --overlay: rgba(36, 38, 35, 0.62); /* cápsulas sobre fotos */

  --font-head: "Instrument Serif", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);

  /* ---------- Legacy (páginas internas) ----------
     contacto.html, soporte.html, privacidad.html, invita.html,
     eliminar-cuenta.html y descargar-app-restaurante.html tienen su propio
     <style> embebido que referencia estos nombres directamente — son de
     ANTES del rediseño oscuro y siguen con su diseño claro original (la guía
     del rediseño solo especificó la home). Se restauran con sus valores
     exactos de antes para que esas páginas no se rompan con el rename de
     arriba. index.html y los estilos nuevos de este archivo ya NO los usan.
     Cuando esas páginas se rediseñen, este bloque se puede borrar.
     (--ink no se repite aquí: ya quedó arriba en #1d1d1b, casi idéntico al
     #0b0b0c original — mismo "negro cálido" para los dos usos.) */
  --paper: #f7f5f1;
  --paper-2: #efebe4;
  --paper-3: #e6e1d8;
  --muted: #6a6862;
  --muted-dark: #a3a09a;
  --line: rgba(11, 11, 12, 0.12);
  --line-dark: rgba(247, 245, 241, 0.16);
  --magenta: #ee1c70;
  --magenta-deep: #c4145b;
  --font-mono: "Space Mono", ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--accent);
}

.eyebrow.no-rule::before {
  display: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1.5px solid var(--text);
  background: var(--text);
  color: var(--bg);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--magenta {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--text);
}

.btn--ghost:hover {
  background: var(--text);
  color: var(--bg);
}

.btn--ghost-light {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn--ghost-light:hover {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* Botones de la franja crema "Únete a la red": fondo claro, texto/borde tinta. */
.btn--dark {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.btn--outline-dark {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn--outline-dark:hover {
  background: var(--ink);
  color: var(--cream);
}

/* ---------- NAV ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--divider);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 74px;
}

.nav__logo {
  height: 32px;
  width: auto;
  display: block;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: 14px;
}

.nav__links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.18s ease;
}

.nav__links a:hover {
  color: var(--text);
}

.nav__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.lang button {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  padding: 7px 12px;
  cursor: pointer;
  font: inherit;
  transition: background 0.18s ease, color 0.18s ease;
}

.lang button[aria-pressed="true"] {
  background: var(--text);
  color: var(--bg);
}

.nav__burger {
  display: none;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
}

.hero__eyebrow {
  margin-bottom: 26px;
}

.hero h1 {
  font-size: clamp(44px, 7.6vw, 104px);
  letter-spacing: -0.02em;
}

.hero h1 .mag {
  color: var(--accent);
}

.hero__sub {
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--text-muted);
  max-width: 46ch;
}

.hero__bullets {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2.5vw, 24px);
  align-items: center;
  margin-top: 16px;
  margin-bottom: 32px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.hero__bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero__bullets li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
}

.heroB .hero__bullets {
  justify-content: flex-start;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.hero__pay {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero__pay b {
  color: var(--text);
  font-weight: 700;
}

/* El hero — fondo de video, único (antes "variante B" entre tres). */
.heroB {
  background: var(--bg);
  color: var(--text);
  padding: clamp(25.5px, 4vw, 60px) 0 clamp(56px, 8vw, 120px);
  text-align: left;
  /* Contiene el video de fondo, que se posiciona contra esta caja. */
  position: relative;
  overflow: hidden;

  /* En MÓVIL el contenido se ancla ABAJO (`flex-end`), igual que el mockup
     móvil: los badges quedan cerca del borde inferior y todo el espacio de
     arriba queda de video. En DESKTOP el mockup centra verticalmente un
     bloque de texto a la izquierda — ver el media query de abajo.

     `svh` y no `dvh`: en móvil la barra de URL que se colapsa cambia `dvh`
     durante el scroll y provoca un salto de layout; `svh` se queda quieto.

     Sin `aspect-ratio`: con el alto fijado en 100svh la proporción la impone la
     ventana, y el video va en `cover`, que llena y recorta los lados. */
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.heroB > .wrap {
  width: 100%;
}

/* Video de fondo del hero.
   `cover` y no `contain`: el hero cierra poco después de los badges, así que es
   más ancho que el 16:9 del archivo. `contain` dejaría bandas laterales
   enormes; `cover` llena y recorta arriba y abajo, donde el plato no está.
   Se usan z-index positivos (no negativos) para no depender de cómo se
   resuelva el contexto de apilamiento. */
.heroB__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  z-index: 1;
  pointer-events: none;
  /* Los dos videos están apilados; solo el activo se ve. El fundido debe durar
     lo mismo que la constante FUNDIDO del script del hero. */
  opacity: 0;
  transition: opacity 600ms ease;
}

.heroB__video.is-active {
  opacity: 1;
}

/* Foto fija del hero (sustituye a los videos mientras no estén regradeados). */
.heroB__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  z-index: 1;
  pointer-events: none;
}

/* Sin fundido para quien pide menos movimiento: el cambio es instantáneo. El
   respaldo para cuando el video no carga o el navegador bloquea el autoplay es
   el `background: var(--bg)` de `.heroB` — el hero nunca queda sin fondo. */
@media (prefers-reduced-motion: reduce) {
  .heroB__video {
    transition: none;
  }
}

/* Móvil vertical: 16:9 entero serían 390×219, una franja con el resto vacío.
   Ahí conviene recortar y llenar. `object-position` centra en el plato, que
   es donde está el interés. */
@media (max-width: 700px) {
  /* Igual que en desktop, el alto lo manda el contenido: el hero cierra poco
     después de los badges. */
  .heroB {
    padding: clamp(20px, 3vh, 40px) 0 clamp(24px, 4vh, 48px);
  }

  .heroB h1 {
    font-size: clamp(28px, 4.6vh, 44px);
    margin-bottom: clamp(10px, 1.6vh, 20px);
  }

  .heroB .hero__bullets {
    margin-top: clamp(8px, 1.2vh, 14px);
    margin-bottom: clamp(12px, 2vh, 24px);
  }

  .heroB .hero__cta {
    margin-bottom: clamp(8px, 1.4vh, 18px);
  }

  .heroB .store-badge {
    height: clamp(40px, 5.6vh, 52px);
  }

  .heroB__video,
  .heroB__still {
    object-position: center 40%;
  }
}

/* Escala vertical del hero en desktop.
   El resto de la landing dimensiona con `vw`, pero aquí la restricción es el
   ALTO: el hero es 16:9, así que en pantallas anchas y bajas el contenido
   crecía justo cuando menos espacio vertical había, y los badges quedaban
   cortados por el `overflow: hidden`. A 1440px el contenido medía ~848px
   contra 810px de hero.
   Midiendo en `vh` el hero se autoajusta y los badges entran en la primera
   vista en prácticamente cualquier proporción de pantalla. */
@media (min-width: 701px) {
  .heroB {
    padding: clamp(20px, 3vh, 44px) 0 clamp(24px, 4vh, 60px);
    /* El mockup de escritorio centra el bloque de texto verticalmente en vez
       de anclarlo abajo — en móvil se queda anclado abajo (ver base de arriba). */
    justify-content: center;
  }

  /* `.wrap` sigue siendo el contenedor responsive de siempre (centrado,
     con el padding fluido `--pad`); el bloque de texto adentro se limita a
     ~620px (el ancho del mockup) y se queda pegado a la izquierda de ESE
     contenedor, no del viewport — con pantallas más anchas que 1440px el
     texto no se va a la mitad de la pantalla. */
  .heroB__content {
    max-width: 620px;
  }

  .heroB h1 {
    font-size: clamp(34px, 6.2vh, 72px);
    margin-bottom: clamp(10px, 1.8vh, 22px);
  }

  .heroB .hero__sub {
    font-size: clamp(15px, 2.1vh, 20px);
  }

  .heroB .hero__bullets {
    margin-top: clamp(8px, 1.4vh, 16px);
    margin-bottom: clamp(12px, 2.2vh, 28px);
  }

  .heroB .hero__cta {
    margin-bottom: clamp(8px, 1.6vh, 22px);
  }

  .heroB .store-badge {
    height: clamp(42px, 6.2vh, 55px);
  }

  .heroB__scrim {
    background:
      linear-gradient(180deg, rgba(36, 38, 35, 0) 0%, var(--bg) 100%),
      linear-gradient(90deg,
        rgba(36, 38, 35, 0.94) 0%,
        rgba(36, 38, 35, 0.75) 38%,
        rgba(36, 38, 35, 0.1) 72%);
    background-size: 100% 200px, 100% 100%;
    background-position: bottom left, top left;
    background-repeat: no-repeat, no-repeat;
  }
}

/* El velo NO es decorativo: sobre video en movimiento ningún color de texto
   tiene contraste garantizado en todos los fotogramas.
   Móvil (abajo): vertical, igual al mockup — más oscuro arriba (nav) y abajo
   (texto), más claro a la mitad (se ve el video).
   Desktop (media query más abajo): horizontal — oscuro a la izquierda, donde
   cae el texto, transparente a la derecha, donde se ve el video. */
.heroB__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(36, 38, 35, 0.55) 0%,
      rgba(36, 38, 35, 0.15) 30%,
      rgba(36, 38, 35, 0.85) 62%,
      var(--bg) 100%);
}

/* El contenido va por encima del video y del velo. */
.heroB > .wrap {
  position: relative;
  z-index: 3;
}

/* Sin video para quien pide menos movimiento: degrada al hero sólido de
   siempre, que es un diseño terminado por sí mismo. */
@media (prefers-reduced-motion: reduce) {
  .heroB__video {
    display: none;
  }
}

.heroB .eyebrow {
  color: var(--text-muted);
}

.heroB h1 {
  color: var(--text);
  margin: 0 0 24px;
  /* 28ch y no 16ch: "Pide la cuenta." son pocos caracteres y con 16ch se
     partía sola aunque se quitara el <br>. */
  max-width: 28ch;
}

.heroB .hero__sub {
  color: var(--text-muted);
  margin: 0 0 16px;
}

.heroB .hero__cta {
  margin-bottom: 30px;
}

.heroB .hero__pay {
  color: var(--text-muted);
}

.heroB .hero__pay b {
  color: var(--text);
}

/* ---------- HERO + NAV EN ESCRITORIO (diseño "CheckPlease — Web") ----------
   El diseño es un hero de 820px de alto: la foto llena la caja, el velo oscuro
   solo cubre la izquierda (donde va el texto) y la barra de navegación es
   transparente, encima de la foto. Va en un bloque aparte, al final de las
   reglas del hero, para que gane sobre las reglas base sin tocarlas: el móvil
   se queda como estaba. */
.nav__cta {
  display: none;
}

@media (min-width: 701px) {
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
  }

  .nav__inner {
    max-width: none;
    height: 96px;
    padding: 0 clamp(24px, 8.33vw, 120px);
    gap: 36px;
  }

  .nav__logo {
    height: auto;
    width: 112px;
  }

  .nav__links {
    margin-left: auto;
    gap: clamp(16px, 2.5vw, 36px);
  }

  .nav__links a {
    white-space: nowrap;
  }

  .nav__links a {
    color: var(--text);
  }

  .nav__right {
    margin-left: 0;
    gap: 36px;
  }

  /* ES / EN como texto: el idioma activo en gris claro, el otro en crema. */
  .lang {
    border: 0;
    border-radius: 0;
    overflow: visible;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
  }

  .lang button {
    padding: 0;
    color: var(--text);
  }

  .lang button + button::before {
    content: "/";
    color: #74766c;
    margin: 0 5px;
  }

  .lang button[aria-pressed="true"] {
    background: transparent;
    color: var(--text-muted);
  }

  .nav__cta {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 22px;
    border-radius: 22px;
    background: var(--accent-cta);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
  }

  .heroB {
    height: 820px;
    min-height: 0;
    padding: 0;
    justify-content: flex-start;
  }

  .heroB__still {
    object-position: 60% 50%;
  }

  .heroB__scrim {
    background:
      linear-gradient(180deg, rgba(36, 38, 35, 0) 0, rgba(36, 38, 35, 0) calc(100% - 200px), var(--bg) 100%),
      linear-gradient(90deg, rgba(36, 38, 35, 0.94) 0%, rgba(36, 38, 35, 0.75) 38%, rgba(36, 38, 35, 0.1) 72%);
  }

  /* `.home .heroB > .wrap` (y no solo `.heroB > .wrap`): la regla `.home .wrap`
     de más abajo devuelve el padding lateral y, sin esto, el texto se corría a
     la derecha y se estrechaba hasta empujar los botones fuera del hero. */
  .home .heroB > .wrap {
    position: absolute;
    /* 230px como el diseño; en ventanas bajas sube hasta 150px para que los
       botones de las tiendas no queden pegados al borde inferior. */
    top: min(230px, max(150px, calc(100vh - 560px)));
    left: clamp(24px, 8.33vw, 120px);
    width: min(620px, calc(100% - 48px));
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .heroB__content {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }

  .heroB .eyebrow {
    margin: 0;
    font-size: 13px;
    letter-spacing: 1.4px;
    color: #e0d5c5;
  }

  .heroB h1 {
    margin: 0;
    max-width: none;
    font-size: clamp(52px, 6.1vw, 88px);
    line-height: 0.95;
    letter-spacing: -1px;
  }

  .heroB h1 .mag {
    color: inherit;
  }

  .heroB .hero__sub {
    margin: 0;
    max-width: 520px;
    font-size: 19px;
    line-height: 1.5;
    color: #d9cebd;
  }

  .heroB .hero__bullets {
    margin: 0;
    gap: 24px;
    font-size: 15px;
    color: #e0d5c5;
  }

  .heroB .hero__bullets li::before {
    width: 16px;
    height: 16px;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0D5C5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .heroB .hero__cta {
    margin: 8px 0 0;
    gap: 12px;
  }

  .heroB .store-badge {
    height: 56px;
  }
}

/* ---------- RESTO DE LA HOME EN ESCRITORIO (diseño "CheckPlease — Web") ----------
   Todo va bajo `.home` (la clase del <body> de index.html) para no mover las
   páginas internas, que comparten styles.css pero tienen su propio diseño. */
.home .eyebrow::before {
  display: none;
}

.home .eyebrow {
  letter-spacing: 1.4px;
}

/* Iconos de la lista de saldo y chip de la tarjeta: valen en todos los anchos,
   porque el HTML ya no lleva el rombo fucsia sino un ícono de línea. */
.home .cash__bullet {
  width: 44px;
  height: 44px;
  margin: 0;
  background: transparent;
  border-radius: 12px;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

.home .balance__chip {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

.home .balance__amount small {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-muted);
}

@media (min-width: 701px) {
  /* Márgenes de 120px a 1440, igual que el diseño. */
  .home .wrap {
    max-width: 1440px;
    padding-inline: clamp(24px, 8.33vw, 120px);
  }

  /* Encabezado de sección: eyebrow y título a la izquierda, texto a la derecha. */
  .home .section__head {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr minmax(0, 380px);
    column-gap: 40px;
    align-items: end;
    margin-bottom: 56px;
  }

  .home .section__head .eyebrow {
    grid-column: 1;
    margin-bottom: 16px;
  }

  .home .section__head h2 {
    grid-column: 1;
    font-size: clamp(44px, 4.17vw, 60px);
    line-height: 1;
  }

  .home .section__head .lede {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
  }

  .home #how {
    padding: 110px 0 140px;
  }

  .home .steps {
    gap: 32px;
  }

  .home .step {
    gap: 14px;
  }

  .home .step__no {
    margin-top: 6px;
    letter-spacing: 0.04em;
  }

  .home .step h3 {
    font-size: 26px;
  }

  /* Tu saldo: franja más clara, con la tarjeta de ejemplo más oscura encima. */
  .home #saldo {
    background: var(--surface);
    padding: 0;
    min-height: 820px;
    display: flex;
    align-items: center;
  }

  .home .cash {
    grid-template-columns: minmax(0, 560px) minmax(0, 480px);
    justify-content: space-between;
    gap: 40px;
  }

  .home .cash__copy {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .home .cash__copy h2 {
    font-size: clamp(44px, 4.17vw, 60px);
    line-height: 1;
    margin: 0;
  }

  .home .cash__copy .lede {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--text-muted);
  }

  .home .cash__list {
    gap: 18px;
    margin-top: 14px;
  }

  .home .cash__item {
    gap: 16px;
  }



  .home .cash__item h3 {
    font-size: 17px;
    margin-bottom: 4px;
  }

  .home .cash__item p {
    font-size: 15px;
  }

  .home .balance {
    background: var(--bg);
    border: 1px solid var(--divider);
    border-radius: 28px;
    box-shadow: none;
  }





  /* Restaurantes: dos tarjetas y la de "en camino", sin mapa. */
  .home #restaurants {
    padding: 110px 0 140px;
  }

  .home .resto-layout {
    display: block;
  }

  /* El mapa va debajo de las tarjetas, a todo el ancho (no está en el diseño). */
  .home .resto-map {
    position: relative;
    top: auto;
    height: 480px;
    max-height: none;
    margin-top: 40px;
    border-radius: 20px;
  }

  .home .resto-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .home .resto__name {
    font-size: 24px;
  }

  .home .resto-promo {
    grid-column: auto;
    justify-content: flex-start;
    align-items: flex-end;
    text-align: left;
    padding: 36px;
    align-self: start;
    aspect-ratio: 378 / 340;
    min-height: 0;
    border-radius: 20px;
    border-width: 1px;
  }

  .home .resto-promo h3 {
    font-size: 32px;
    line-height: 1.05;
    margin-top: 0;
  }

  .home .resto-promo .eyebrow {
    display: none;
  }

  /* Franja crema. */
  .home .joinstrip {
    padding: 80px 0;
  }

  /* Preguntas: título a la izquierda y las cinco respuestas abiertas. */
  .home #faq {
    padding: 110px 0 140px;
  }

  .home .faq {
    grid-template-columns: 380px minmax(0, 1fr);
    column-gap: 0;
  }

  .home .faq .section__head {
    display: block;
    margin: 0;
  }

  .home .faq .section__head .eyebrow {
    display: block;
  }

  .home .faq .section__head h2 {
    margin-top: 16px;
  }

  .home .faq__q {
    list-style: none;
    font-size: 20px;
    padding: 28px 0 0;
  }

  .home .faq__q::-webkit-details-marker {
    display: none;
  }

  .home .faq__q::after {
    display: none;
  }

  .home .faq__item {
    padding-bottom: 28px;
  }

  .home .faq__a {
    padding: 10px 0 0;
    font-size: 16px;
    max-width: none;
  }

  /* Cierre: 600px de alto, imagen más oscura, titular en dos líneas. */
  .home .ctastrip {
    min-height: 600px;
    display: flex;
    align-items: center;
    padding: 0;
  }

  .home .ctastrip__bg {
    object-position: 50% 45%;
  }

  .home .ctastrip__scrim {
    background: rgba(36, 38, 35, 0.62);
  }

  .home .ctastrip > .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }

  .home .ctastrip h2 {
    font-size: 76px;
    line-height: 1;
    letter-spacing: 0;
    margin: 0;
    max-width: 8.2em;
    text-wrap: balance;
    color: var(--text);
  }

  .home .ctastrip p {
    font-size: 18px;
    color: #e0d5c5;
    margin: 0;
    max-width: none;
  }

  .home .ctastrip .hero__cta {
    margin-top: 8px;
  }

  .home .ctastrip .store-badge {
    height: 56px;
  }

  /* Pie: mismo fondo que la página, logo a 120px, columnas a la derecha. */
  .home .footer {
    background: var(--bg);
    padding: 72px 0 40px;
  }

  .home .footer__grid {
    display: flex;
    gap: 96px;
    margin-bottom: 56px;
  }

  .home .footer__grid > div:first-child {
    width: 380px;
    flex: none;
  }

  .home .footer__col:nth-child(2) {
    margin-left: auto;
  }

  .home .footer__logo {
    height: auto;
    width: 120px;
  }

  .home .footer__col {
    padding-left: 0;
  }

  .home .footer__col h3 {
    font-size: 13px;
    letter-spacing: 1.2px;
  }
}

/* ---------- CELULAR (≤700px): hero y restaurantes ---------- */
.resto__rating {
  font-size: 15px;
}

/* Preguntas: sin el triangulito nativo de <details> en ningún ancho. */
.home .faq__q {
  list-style: none;
}

.home .faq__q::-webkit-details-marker {
  display: none;
}

@media (max-width: 700px) {
  /* Barra transparente sobre la foto, con el botón de descarga (como el diseño). */
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
  }

  .nav__inner {
    height: 72px;
    gap: 12px;
  }

  .nav__logo {
    height: 30px;
  }

  .nav__links {
    display: none;
  }

  .nav__cta {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 20px;
    background: var(--accent-cta);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
  }

  /* Hero de 660px (el diseño usa 780) con el texto pegado abajo, para que el texto
     empiece más arriba: antes ocupaba toda
     la pantalla (100svh) y, al anclar el texto abajo, quedaba un hueco enorme
     arriba y el texto "partía" muy abajo. */
  .heroB {
    height: 660px;
    min-height: 0;
    padding: 0;
    justify-content: flex-end;
  }

  .heroB__still {
    object-position: 55% 50%;
  }

  .home .heroB > .wrap {
    padding: 0 20px 36px;
  }

  .heroB__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .heroB .eyebrow {
    margin: 0;
    font-size: 12px;
    letter-spacing: 1.2px;
    color: #e0d5c5;
  }

  .heroB h1 {
    margin: 0;
    max-width: none;
    font-size: 52px;
    line-height: 0.95;
  }

  .heroB h1 .mag {
    color: inherit;
  }

  .heroB .hero__sub {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #d9cebd;
  }

  .heroB .hero__bullets {
    margin: 0;
    gap: 8px 16px;
    font-size: 14px;
    color: #e0d5c5;
  }

  .heroB .hero__bullets li::before {
    width: 14px;
    height: 14px;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0D5C5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .heroB .hero__cta {
    margin: 4px 0 0;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .heroB .store-badge {
    height: 48px;
  }

  /* Restaurantes: dos columnas, sin mapa. */
  .home .resto-layout {
    display: block;
  }

  .home .resto-map {
    position: relative;
    top: auto;
    height: 360px;
    max-height: none;
    margin-top: 28px;
    border-radius: 16px;
  }

  .home .resto-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 14px;
  }

  .home .resto {
    gap: 10px;
  }

  .home .resto__img {
    border-radius: 16px;
  }

  .home .resto__badge {
    top: 8px;
    right: 8px;
    height: 26px;
    padding: 0 9px;
    font-size: 12px;
    gap: 4px;
  }

  .home .resto__body > div:first-child {
    flex-wrap: wrap;
    gap: 2px 8px !important;
  }

  .home .resto__name {
    font-size: 16px;
  }

  .home .resto .resto__rating {
    font-size: 12px;
  }

  .home .resto__cuisine {
    font-size: 12px;
    line-height: 1.4;
  }

  .home .resto-promo {
    grid-column: 1 / -1;
    justify-content: flex-start;
    text-align: left;
    padding: 24px;
    border-radius: 18px;
    border-width: 1px;
  }

  .home .resto-promo .eyebrow {
    display: none;
  }

  .home .resto-promo h3 {
    font-size: 28px;
    line-height: 1.05;
    margin: 0 0 10px;
  }
}

/* ---------- SECTION SCAFFOLD ---------- */
section {
  position: relative;
}

.section {
  padding: clamp(72px, 10vw, 140px) 0;
}

.section__head {
  max-width: 760px;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.section__head .eyebrow {
  margin-bottom: 22px;
}

.section__head h2 {
  font-size: clamp(32px, 4.6vw, 60px);
  letter-spacing: -0.01em;
}

.section__head .lede {
  margin-top: 22px;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--text-muted);
  max-width: 56ch;
}

/* ---------- CÓMO FUNCIONA ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

.step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 378 / 440;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}

.step__no {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}

.step h3 {
  font-size: clamp(21px, 2vw, 26px);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.step p {
  color: var(--text-muted);
  font-size: 16px;
}

/* ---------- SALDO ---------- */
.cash {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.cash__list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 32px;
}

.cash__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.cash__bullet {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 7px;
  background: var(--accent);
  border-radius: 3px;
  transform: rotate(45deg);
}

.cash__item h3 {
  font-size: 18px;
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: 3px;
}

.cash__item p {
  color: var(--text-muted);
  font-size: 15.5px;
}

/* tarjeta de saldo */
.balance {
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: clamp(26px, 3vw, 38px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.5);
}

.balance__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.balance__brand {
  height: 22px;
  width: auto;
}

.balance__chip {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--open-text);
  background: rgba(108, 196, 138, 0.14);
  border: none;
  padding: 6px 12px;
  border-radius: 999px;
}

.balance__label {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.balance__amount {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(44px, 5vw, 64px);
  letter-spacing: -0.01em;
  margin: 6px 0 4px;
}

.balance__amount span {
  color: var(--text);
}

.balance__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--divider);
  font-size: 15px;
  font-weight: 700;
}

.balance__row-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.balance__row-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-subtle);
}

.balance__row:first-of-type {
  margin-top: 20px;
}

.balance__row .pos {
  color: var(--accent-text);
  font-size: 14px;
  font-weight: 700;
}

.balance__row .muted {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

/* ---------- RESTAURANTES ---------- */
.resto-layout {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(18px, 2.4vw, 28px);
}

@media (max-width: 900px) {
  .resto-layout {
    grid-template-columns: 1fr;
  }
}

.resto-map {
  width: 100%;
  position: sticky;
  top: 100px;
  height: calc(100vh - 120px);
  max-height: 800px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
}

.resto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.4vw, 28px);
}

.resto {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.resto__img {
  position: relative;
  aspect-ratio: 378 / 340;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.resto__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--surface);
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(241, 233, 220, 0.04) 11px 22px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder span {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  padding: 6px 12px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
}

.resto__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(241, 233, 220, 0.18);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  padding: 0 11px;
  border-radius: 15px;
}

.resto__badge svg {
  flex-shrink: 0;
}

.resto__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.resto__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.resto__cuisine {
  color: var(--text-muted);
  font-size: 15px;
}

/* ---------- RESTO PROMO (próximamente) ---------- */
.resto-promo {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--border);
  border-radius: 18px;
  padding: 40px var(--pad);
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  grid-column: 1 / -1;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.resto-promo:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}

.resto-promo__content {
  max-width: 440px;
}

.resto-promo .eyebrow {
  color: var(--accent);
}

.resto-promo h3 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  margin-top: 14px;
  margin-bottom: 10px;
  color: var(--text);
}

.resto-promo p {
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--text-muted);
  line-height: 1.5;
}

@media (max-width: 960px) {
  .resto-promo {
    grid-column: span 1;
  }
}

/* ---------- ÚNETE A LA RED (franja crema, dueños de restaurante) ---------- */
.joinstrip {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(48px, 7vw, 90px) 0;
}

.joinstrip__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  flex-wrap: wrap;
}

.joinstrip__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
}

.joinstrip .eyebrow {
  color: #5e5448;
}

.joinstrip .eyebrow::before {
  background: var(--accent);
}

.joinstrip h2 {
  font-size: clamp(32px, 4vw, 52px);
}

.joinstrip p {
  font-size: 17px;
  color: #4a4238;
}

.joinstrip__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}

.faq__list {
  border-top: 1px solid var(--divider);
}

.faq__item {
  border-bottom: 1px solid var(--divider);
}

.faq__q {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 22px);
  color: inherit;
  padding: 26px 44px 26px 0;
  position: relative;
  letter-spacing: -0.01em;
}

.faq__q::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: var(--accent);
  transition: transform 0.25s ease;
}

.faq__item[open] .faq__q::after {
  content: "–";
}

.faq__a {
  padding: 0 44px 28px 0;
  color: var(--text-muted);
  font-size: 16.5px;
  max-width: 60ch;
}

/* ---------- CIERRE (CTA final) ---------- */
.ctastrip {
  position: relative;
  color: #fff;
  text-align: center;
  padding: clamp(64px, 9vw, 130px) 0;
  overflow: hidden;
}

.ctastrip__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.ctastrip__scrim {
  position: absolute;
  inset: 0;
  background: rgba(36, 38, 35, 0.64);
  z-index: 1;
}

.ctastrip > .wrap {
  position: relative;
  z-index: 2;
}

.ctastrip h2 {
  font-size: clamp(34px, 5.4vw, 76px);
  letter-spacing: -0.02em;
  margin-bottom: 22px;
  color: #fff;
}

.ctastrip p {
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(17px, 1.5vw, 20px);
  max-width: 48ch;
  margin: 0 auto 38px;
}

.ctastrip .hero__cta {
  justify-content: center;
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--bg-deep);
  color: var(--text);
  padding: clamp(56px, 7vw, 90px) 0 40px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: 56px;
}

.footer__logo {
  height: 26px;
  width: auto;
  margin-bottom: 20px;
}

.footer__tag {
  color: var(--text-muted);
  font-size: 15px;
  max-width: 30ch;
}

/* Era <h5> (heredaba la fuente del body); como h3 recibiría la de titulares. */
.footer__col h3 {
  font-family: var(--font-body);
  line-height: 1.55;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0 0 18px;
}

.footer__col a {
  display: block;
  color: var(--text);
  font-size: 15px;
  margin-bottom: 12px;
  opacity: 0.85;
  transition: opacity 0.18s ease, color 0.18s;
}

.footer__col a:hover {
  opacity: 1;
  color: var(--accent);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 28px;
  border-top: 1px solid var(--divider);
  flex-wrap: wrap;
}

.footer__bottom p {
  font-size: 13px;
  color: var(--text-subtle);
}

/* reveal — pure CSS load animation; content is always visible (never gated on JS) */
.reveal {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: cpRise 0.8s cubic-bezier(.2, .7, .2, 1) both;
  }
}

@keyframes cpRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
  .cash {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .resto-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .faq {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .joinstrip__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav__links {
    display: none;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 17px;
  }

  .resto-grid {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .nav__inner {
    gap: 14px;
  }

  .hero h1 {
    font-size: clamp(40px, 12vw, 60px);
  }
}

/* ---------- STORE BADGES ---------- */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.store-badge {
  height: 55px;
  width: auto;
  display: block;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.store-badge:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.store-badge--google {
  height: 55px;
  border-radius: 8px;
  border: 1px solid #000000;
  box-sizing: border-box;
}

@media (max-width: 600px) {

  .store-badge,
  .store-badge--google {
    height: 44px;
  }
}