/*
 * Pupusita — marketing site.
 * Palette is copied verbatim from the app's lib/theme.ts, plus the splash /
 * adaptive-icon brown from app.json. Keep the two in sync by hand: the app is
 * React Native and cannot import this file. The one exception is --muted, which
 * is darkened here for WCAG contrast on the cream background — see its comment.
 */

:root {
  --bg: #fbf4e9;
  --surface: #ffffff;
  --primary: #82351a;
  --primary-soft: #f0d9c9;
  --on-primary: #ffffff;
  --text: #2a1a10;
  /* The one token that deliberately diverges from lib/theme.ts. The app's
     #8A6F5C is 4.26:1 on --bg — under WCAG AA's 4.5:1 — and it carries
     normal-size body text here (.section-head p, .faq .answer, .lang button).
     #856A57 is the smallest step that clears it: 4.58:1 on --bg, 5.00:1 on
     --surface. */
  --muted: #856a57;
  /* Muted text on --primary-soft, which is darker than --bg: --muted is only
     3.69:1 there. Used by the one section that has that background. */
  --muted-on-soft: #74594a;
  --border: #e7d9c6;
  --deep: #3f1808;

  --radius: 16px;
  --radius-lg: 28px;
  --maxw: 1040px;
  --gutter: clamp(20px, 5vw, 40px);
  /* Measured height of the sticky header — the hero subtracts it to fill
     exactly the rest of the first screen. It's the same at every width: the
     44px tap targets, not the wordmark, set it. */
  --header-h: 73px;

  color-scheme: light;
}

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

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  /* Images are not draggable off the page. WebKit/Blink honour user-drag;
     Firefox needs the dragstart handler in site.js. */
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

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

a:hover {
  text-decoration-thickness: 2px;
}

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

h1,
h2,
h3 {
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
  font-weight: 800;
}

h1 {
  font-size: clamp(2.1rem, 6.5vw, 3.6rem);
}

h2 {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
}

h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
}

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

/* The screenshots are the strongest thing on the page; four of them inside the
   1040 text measure shrinks each to ~210px and the UI stops being readable. */
.wrap-wide {
  max-width: 1200px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary);
  color: var(--on-primary);
  padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0;
  z-index: 20;
}

.skip-link:focus {
  left: 0;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(251, 244, 233, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  flex-wrap: wrap;
  padding-block: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 999px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background: var(--primary-soft);
  color: var(--primary);
}

/* Under ~520px the wordmark, both nav links and the language toggle no longer
   fit on one line, and a wrapped sticky header eats a third of a phone screen.
   The icon alone still reads as the brand. */
@media (max-width: 520px) {
  /* Hidden from sight, not from the accessibility tree: the icon carries
     alt="" (it's decorative next to the wordmark), so `display: none` here
     would leave the home link with no accessible name at all. */
  .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .site-header .wrap {
    gap: 8px;
  }
  .site-nav a {
    padding-inline: 8px;
  }
}

/* language toggle */

.lang {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.lang button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 7px 15px;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
}

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

/* ------------------------------------------------------------------ hero */

/*
 * The hero shot is the background rather than an <img>: the phone sits in the
 * left half of the frame and the copy sits over the right half, so the two have
 * to overlap rather than sit in separate columns.
 *
 * Phones get the 4:5 crop instead — at 390px the landscape frame shrinks the
 * on-screen UI to nothing. There the image occupies the top and the copy sits
 * below it, on the solid end of the scrim.
 */
.hero {
  background-color: var(--deep);
  color: #fff;
  position: relative;
  overflow: hidden;
  /* Fills the rest of the first screen. svh, not vh, so mobile browser chrome
     collapsing doesn't resize the hero mid-scroll. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  /*
   * Column, with the photo as a real flex item (::before counts as one when
   * it isn't absolutely positioned) that grows to fill whatever's left above
   * the copy. A fixed photo height here previously left a dead flat-color gap
   * between the image and the text that grew with viewport height — up to
   * 147px on a 430×932 screen — because min-height stretched the section to
   * fill the screen while the photo stayed a constant size. flex: 1 makes the
   * photo itself claim that space instead of leaving it blank.
   */
  display: flex;
  flex-direction: column;
  /* The generic `section { padding-block }` rule further down also matches
     this element (it's a <section>) — without an explicit override here, its
     48px+ padding-top leaks back in above the photo. */
  padding-top: 0;
  padding-bottom: clamp(24px, 5vw, 40px);
}

/*
 * The photo + its blend-to-solid scrim, as an in-flow flex item rather than an
 * absolutely-positioned overlay — so it can flex-grow to fill the space above
 * the copy instead of stopping at a fixed height. Bounded so a very tall
 * screen doesn't force `cover` to crop the photo down to a narrow zoomed
 * sliver, and a very short one still shows enough of it to read as a photo.
 * On desktop (media query further down) this goes back to an absolutely
 * positioned overlay across the whole section, which is already full-bleed
 * there via `cover` and has no leftover space to fill.
 */
.hero::before {
  content: "";
  flex: 1 1 auto;
  min-height: 260px;
  max-height: 620px;
  /*
   * The copy sits fully below this box, in flow, already on .hero's own solid
   * background-color — so unlike the desktop scrim, this one isn't holding
   * text contrast against anything. Its only job is closing the seam at the
   * photo's bottom edge, so it stays out of the way until the last stretch.
   */
  background-image:
    linear-gradient(
      180deg,
      rgba(63, 24, 8, 0) 0%,
      rgba(63, 24, 8, 0) 78%,
      rgba(63, 24, 8, 0.45) 92%,
      var(--deep) 100%
    ),
    url("assets/hero-portrait.webp");
  background-size:
    100% 100%,
    cover;
  background-position:
    center top,
    center top;
  background-repeat: no-repeat, no-repeat;
}

.hero .wrap {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero h1 {
  text-transform: uppercase;
  letter-spacing: -0.025em;
  font-weight: 800;
  margin-bottom: 0.3em;
  text-wrap: balance;
}

.hero p {
  font-size: clamp(1.05rem, 2.4vw, 1.28rem);
  color: rgba(255, 255, 255, 0.86);
  max-width: 34ch;
}

.hero h1,
.hero p {
  /* The copy sits on photography, not flat colour. The scrim is deliberately
     light so the dish stays visible, so the shadow does the rest of the work
     of holding contrast over a pale pupusa. */
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 2px 22px rgba(0, 0, 0, 0.6);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn-primary:hover {
  background: #96401f;
}

.btn-ghost {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

/*
 * Store badges. Built here rather than as images so the wording translates with
 * the rest of the page. Apple and Google both require their own supplied badge
 * artwork in production — see README, "Still to do".
 */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 8px 16px;
  min-height: 54px;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.store-badge:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

.store-badge-logo {
  width: 26px;
  height: 26px;
  flex: none;
}

/* The Play mark keeps its own four colours; the Apple mark inherits white. */
.store-badge-logo--mono {
  fill: #fff;
}

.store-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.store-badge-sub {
  font-size: 0.63rem;
  letter-spacing: 0.01em;
}

.store-badge-name {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

@media (min-width: 760px) {
  .hero {
    background-image: url("assets/hero.webp");
    /* Biased upward: cover has to crop a 3:2 photo into a wide band, and the
       person chips at the top of the phone are worth more than the buttons at
       the bottom — they're what "cada quién su pedido" means. */
    background-position: left 32%;
    background-size: cover;
    padding-block: clamp(56px, 6vw, 88px);
    /* Mobile's photo is a flex item that shares the column with the copy;
       here the photo is .hero's own full-bleed background instead, so the
       single .wrap child just needs centring on a normal row axis. */
    flex-direction: row;
    align-items: center;
    /* At least the rest of the first screen, and at least the photo's own 3:2
       height so a short laptop window still shows most of the frame rather
       than a narrow band of it. */
    min-height: max(
      calc(100svh - var(--header-h)),
      min(calc(100vw / 1.5), 820px)
    );
  }

  /*
   * Horizontal scrim: clear over the phone in the left half, near-solid under
   * the copy on the right. The stops are percentages so they track the copy
   * column, which starts at the 50% line of the centred wrap.
   *
   * No image layer here — the photo lives directly on .hero at this width,
   * full-bleed via `cover`, so there's no separate height to keep in sync and
   * no seam risk the way there is on the mobile crop. Back to an absolutely
   * positioned overlay across the whole (variable-height) section — mobile's
   * flex-item sizing (flex/min-height/max-height) is undone here since this
   * box no longer takes up space in the flex flow.
   */
  .hero::before {
    position: absolute;
    flex: none;
    min-height: 0;
    max-height: none;
    inset: 0;
    background-image: linear-gradient(
      90deg,
      rgba(63, 24, 8, 0) 0%,
      rgba(63, 24, 8, 0) 46%,
      rgba(63, 24, 8, 0.3) 53%,
      rgba(63, 24, 8, 0.62) 58%,
      rgba(63, 24, 8, 0.64) 100%
    );
    background-size: 100% 100%;
    background-position: center top;
  }

  .hero .wrap {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  /* Second column, pushed further right still: the more of the photo that
     stays clear of text, the better the dish reads. */
  .hero-copy {
    grid-column: 2;
    padding-left: clamp(16px, 5vw, 80px);
  }

  .hero-copy p {
    max-width: 32ch;
  }
}

/* Very wide viewports: the centred wrap drifts inward while the gradient stays
   proportional, so the copy would slide off the solid end. Pushing the stops
   left keeps it covered. */
@media (min-width: 1500px) {
  .hero::before {
    /* background-image, not the background shorthand — the shorthand would
       reset background-size/position back to their initial values and undo
       the 100% 100% sizing set at the 760px breakpoint. */
    background-image: linear-gradient(
      90deg,
      rgba(63, 24, 8, 0) 0%,
      rgba(63, 24, 8, 0) 38%,
      rgba(63, 24, 8, 0.3) 45%,
      rgba(63, 24, 8, 0.62) 50%,
      rgba(63, 24, 8, 0.64) 100%
    );
  }
}

/* --------------------------------------------------------------- section */

section {
  padding-block: clamp(48px, 8vw, 84px);
}

.section-head {
  max-width: 56ch;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.section-head p {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0;
}

.eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}

/* features */

.cards {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}

.card .ico {
  font-size: 1.7rem;
  line-height: 1;
  display: block;
  margin-bottom: 14px;
}

.card p {
  color: var(--muted);
  margin: 0;
  font-size: 0.98rem;
}

/* screenshots */

/* Four screenshots: 1 up on phones, 2 up from 560px, all 4 in a row on wide
   screens. auto-fit is avoided here — at 1040px it lands on three columns and
   leaves the fourth shot orphaned on its own row. */
.shots {
  display: grid;
  gap: clamp(24px, 4vw, 32px);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .shots {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .shots {
    grid-template-columns: repeat(4, 1fr);
  }
}

.shot figcaption {
  margin-top: 16px;
}

.shot figcaption strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.shot figcaption span {
  color: var(--muted);
  font-size: 0.95rem;
}

.shot img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

/* whatsapp / copy section */

.split {
  display: grid;
  gap: clamp(28px, 5vw, 52px);
  align-items: center;
}

@media (min-width: 760px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
}

.chat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 0 14px 34px rgba(63, 24, 8, 0.07);
}

.chat pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}

.chat .chat-head {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

/* flavors */

.flavors {
  background: var(--primary-soft);
}

.flavors .section-head p {
  color: var(--muted-on-soft);
}

.flavor-art {
  display: flex;
  justify-content: center;
  /* Not the default `stretch`: these three cutouts have slightly different
     aspect ratios, and stretching each to the tallest one's height overrides
     `height: auto` and squashes the other two. */
  align-items: flex-end;
  gap: clamp(8px, 3vw, 28px);
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.flavor-art img {
  width: clamp(88px, 22vw, 150px);
  height: auto;
  filter: drop-shadow(0 12px 22px rgba(63, 24, 8, 0.22));
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.chips li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.95rem;
  font-weight: 600;
}

/* --------------------------------------------------------------- article */

.doc {
  max-width: 68ch;
}

.doc h2 {
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  margin-top: 2em;
}

.doc h2:first-of-type {
  margin-top: 1em;
}

.doc ul {
  padding-left: 1.2em;
  margin: 0 0 1em;
}

.doc li {
  margin-bottom: 0.5em;
}

.doc .updated {
  color: var(--muted);
  font-size: 0.92rem;
}

.callout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--primary);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 0 0 1.6em;
}

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

.page-head {
  background: var(--deep);
  color: #fff;
  padding-block: clamp(36px, 7vw, 64px);
}

.page-head h1 {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  margin: 0;
}

.page-head p {
  color: rgba(255, 255, 255, 0.78);
  margin: 10px 0 0;
}

/* faq */

.faq {
  border-top: 1px solid var(--border);
  max-width: 68ch;
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  cursor: pointer;
  padding: 18px 34px 18px 2px;
  font-weight: 700;
  list-style: none;
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
}

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

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--primary);
  line-height: 1;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq .answer {
  padding: 0 2px 20px;
  color: var(--muted);
}

.faq .answer p:last-child {
  margin-bottom: 0;
}

/* contact card */

.contact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 34px);
  margin-bottom: 32px;
}

.contact .email {
  font-size: clamp(1.05rem, 3vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  word-break: break-word;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--deep);
  color: rgba(255, 255, 255, 0.72);
  padding-block: 44px;
  font-size: 0.94rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  /* Tap-target height without adding visible bulk to the footer row. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-left: auto;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
}

.footer-brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}