/* ==========================================================================
   Los Tapatio's
   Gallery system on white. The packaging is the artwork, the page is the wall.

   Type:  Petrona (display) + Archivo (UI), both Omnibus-Type, Buenos Aires.
   Color: one accent, gold, taken from the burlap on the product label.
          Brand red lives only inside the photography, never in the chrome.
   ========================================================================== */

:root {
  /* ground */
  --ink:        #FFFFFF;
  --ink-2:      #F5F5F5;
  --ink-3:      #EEEEEE;

  /* content */
  --paper:      #1A1A1A;
  --muted:      #595959;
  --faint:      #6E6E6E;

  /* warm paper mat behind every product photo (was --paper, which is now text) */
  --mat:        #F3EEE2;

  /* the single accent. Darkened from label gold (#C9A227, 2.4:1 on white) so
     it works as text and borders: 5.1:1 on white. */
  --gold:       #8A6A00;
  --gold-soft:  rgba(138, 106, 0, 0.08);

  --rule:       #DDDDDD;

  /* type scale, 1.25 minor third off 16px */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.25rem;
  --t-lg:   1.563rem;
  --t-xl:   1.953rem;
  --t-2xl:  2.441rem;
  --t-3xl:  3.052rem;
  --t-4xl:  3.815rem;

  --shell:  1240px;
  --r:      4px;
  --r-lg:   8px;

  --ease:   cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

/* Author display rules (.btn, .form-done) would otherwise beat [hidden]. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: Petrona, Georgia, serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
img { max-width: 100%; display: block; }

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

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

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
  width: 100%;
}

/* Spanish primary, English secondary. Used across every page. */
.en {
  display: block;
  font-family: Archivo, sans-serif;
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--muted);
  line-height: 1.4;
}

/* ==========================================================================
   Navigation. One line, 72px, dark. Products opens a panel on hover.
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 72px;
  /* Solid, not translucent. A backdrop blur here pulls the dropdown into the
     nav's filter context and the page shows through the open panel. */
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
}

.nav-in {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Petrona, serif;
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* The mark is a white-ground badge, so give it a radius and let it read as a
   deliberate seal rather than an untrimmed cutout. */
.wordmark img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 4px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 72px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 72px;
  padding-inline: 14px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--paper);
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: color 0.18s var(--ease);
}
.nav-link:hover,
.nav-link[aria-expanded="true"] { color: var(--gold); }

.nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 22px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.22s var(--ease);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after,
.nav-link[aria-expanded="true"]::after { transform: scaleX(1); }

.caret {
  width: 9px;
  height: 9px;
  transition: transform 0.22s var(--ease);
}
.nav-link[aria-expanded="true"] .caret { transform: rotate(180deg); }

.nav-cta {
  margin-left: 8px;
  padding: 9px 18px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-size: var(--t-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.nav-cta:hover { background: var(--gold); color: var(--ink); }

/* The trigger sits in normal flow. The panel below anchors to .nav, which is
   sticky and therefore a containing block, so it can span the full width. */
.has-mega {
  display: flex;
  align-items: center;
  height: 72px;
}

/* the dropdown panel */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 72px;
  z-index: 2;
  background: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.mega[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 40px;
  padding: 28px 24px 32px;
}

.mega-item {
  display: block;
  padding: 12px 14px;
  border-radius: var(--r);
  border-left: 2px solid transparent;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.mega-item:hover { background: var(--ink-3); border-left-color: var(--gold); }
.mega-item strong {
  font-family: Petrona, serif;
  font-size: var(--t-md);
  font-weight: 600;
  display: block;
}
.mega-item:hover strong { color: var(--gold); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--paper);
  padding: 8px;
  cursor: pointer;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: Archivo, sans-serif;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--gold);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), transform 0.1s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-solid { background: var(--gold); color: var(--ink); }
.btn-solid:hover { background: #A07F0A; }

.btn-line { background: none; color: var(--gold); }
.btn-line:hover { background: var(--gold); color: var(--ink); }

.btn-block { display: block; width: 100%; text-align: center; }

/* ==========================================================================
   Hero. Asymmetric: type block left, real packaging bleeding off the right.
   ========================================================================== */

.hero {
  position: relative;
  padding-top: 88px;
  padding-bottom: 0;
  overflow: hidden;
}

.hero h1 {
  font-size: clamp(2.6rem, 7vw, var(--t-4xl));
  max-width: 15ch;
  margin-bottom: 20px;
}

.hero-sub {
  max-width: 46ch;
  color: var(--muted);
  font-size: var(--t-md);
  line-height: 1.55;
  margin-bottom: 32px;
}

/* Photograph anchored to the hero's top right, dissolved into the white ground
   on every edge so the headline never sits on busy pixels. */
.hero-art {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  max-width: 900px;
  height: 640px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
}
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      #fff 0%,
      rgba(255, 255, 255, 0.94) 16%,
      rgba(255, 255, 255, 0.60) 36%,
      rgba(255, 255, 255, 0) 60%),
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 70%,
      #fff 100%);
}

/* Copy sits above the photograph. */
.hero > .shell { position: relative; z-index: 1; }

/* Story band. The photograph runs full bleed behind the copy and fades to the
   page ground on all four edges, so the band still reads as part of the page
   rather than a pasted-in panel. */
.story { position: relative; overflow: hidden; }

.story-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.story-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 52%;
}
.story-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Copy runs across roughly the left half; keep the veil near solid there
       and let the photograph show at full colour to the right. */
    linear-gradient(to right,
      #fff 20%,
      rgba(255, 255, 255, 0.95) 56%,
      rgba(255, 255, 255, 0.38) 80%,
      rgba(255, 255, 255, 0.10) 100%),
    linear-gradient(to bottom,
      #fff 0%,
      rgba(255, 255, 255, 0) 22%,
      rgba(255, 255, 255, 0) 78%,
      #fff 100%);
}
.story > .shell { position: relative; z-index: 1; }

/* Page heading paired with the mark. */
.page-head {
  display: flex;
  align-items: center;
  gap: 20px;
}
.page-head img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  flex: none;
  border-radius: 8px;
}

/* About: copy left, warehouse photograph right. */
.split {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 400px);
  gap: 56px;
  align-items: center;
}
.split-art {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
}
/* The source is a tall portrait. Crop it to a calmer ratio so the heading
   beside it does not float in dead space. */
.split-art img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 38%;
}

/* the row of real product photos under the hero copy */
.hero-rail {
  display: flex;
  gap: 18px;
  margin-top: 72px;
  padding-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.hero-rail::-webkit-scrollbar { display: none; }

.hero-rail .plate {
  flex: 0 0 200px;
  margin: 0;
}


/* ==========================================================================
   Plate. A product photo matted on warm paper, like a framed print.
   ========================================================================== */

.plate {
  background: var(--mat);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 14px;
}
.plate img {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ==========================================================================
   Section furniture
   ========================================================================== */

.band { padding-block: 96px; }
.band-rule { border-top: 1px solid var(--rule); }

.band-head { margin-bottom: 44px; }
.band-head h2 {
  font-size: clamp(2rem, 4.5vw, var(--t-2xl));
  margin-bottom: 10px;
}
.band-head .en { font-size: var(--t-base); }

/* ==========================================================================
   Category tiles
   ========================================================================== */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.cat {
  display: block;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.cat:hover { border-color: var(--gold); background: var(--ink-3); }

.cat .plate { aspect-ratio: 4 / 3; margin-bottom: 20px; }
.cat h3 { font-size: var(--t-lg); margin-bottom: 2px; }
.cat:hover h3 { color: var(--gold); }
.cat-count {
  margin-top: 14px;
  font-size: var(--t-xs);
  color: var(--faint);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Product grid
   ========================================================================== */

.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

.prod {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}
.prod .plate {
  margin-bottom: 14px;
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
}
.prod:hover .plate {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
}
.prod h3 {
  font-size: var(--t-md);
  font-weight: 600;
  margin-bottom: 2px;
}
.prod:hover h3 { color: var(--gold); }
.prod .size {
  margin-top: 8px;
  font-size: var(--t-xs);
  color: var(--faint);
  letter-spacing: 0.03em;
}

/* ==========================================================================
   Recipes
   ========================================================================== */

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}

.recipe {
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: border-color 0.2s var(--ease);
}
.recipe:hover { border-color: var(--gold); }

.recipe h3 { font-size: var(--t-lg); margin-bottom: 4px; }
.recipe-meta {
  display: flex;
  gap: 18px;
  margin: 18px 0;
  padding-block: 14px;
  border-block: 1px solid var(--rule);
  font-size: var(--t-xs);
  color: var(--muted);
  letter-spacing: 0.02em;
}
.recipe-body { color: var(--muted); font-size: var(--t-sm); line-height: 1.65; }

.recipe-uses {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.recipe-uses span {
  display: inline-block;
  margin: 3px 6px 3px 0;
  padding: 5px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--t-xs);
  color: var(--gold);
  background: var(--gold-soft);
}

/* long-form recipe page */
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--t-xl); margin: 48px 0 14px; }
.prose h3 { font-size: var(--t-lg); margin: 34px 0 10px; }
.prose p { color: var(--muted); margin-bottom: 16px; line-height: 1.7; }
.prose ul, .prose ol { color: var(--muted); padding-left: 22px; margin-bottom: 16px; }
.prose li { margin-bottom: 9px; line-height: 1.65; }
.prose li::marker { color: var(--gold); }

/* ==========================================================================
   Modal
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(6px);
}
.modal[data-open="true"] { display: grid; }

.modal-card {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-card .plate { border-radius: var(--r-lg) var(--r-lg) 0 0; aspect-ratio: 1; max-height: 340px; width: 100%; }
.modal-body { padding: 26px; }
.modal-body h2 { font-size: var(--t-xl); margin-bottom: 3px; }

.modal-close {
  z-index: 5;
  position: absolute;
  top: 26px;
  right: 26px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-md);
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { border-color: var(--gold); color: var(--gold); }

.quote-note {
  margin: 22px 0;
  padding: 16px 18px;
  border-left: 2px solid var(--gold);
  background: var(--gold-soft);
  border-radius: 0 var(--r) var(--r) 0;
}
.quote-note strong { font-size: var(--t-sm); font-weight: 600; }
.quote-note p { font-size: var(--t-sm); color: var(--muted); margin-top: 6px; }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  margin-bottom: 7px;
}
.field label .en { display: inline; font-size: var(--t-xs); }

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  color: var(--paper);
  font-family: inherit;
  font-size: var(--t-sm);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--faint); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

.form-done { text-align: center; padding: 36px 0; }
.form-done h3 { color: var(--gold); font-size: var(--t-xl); margin-bottom: 6px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: 56px 40px;
  margin-top: 40px;
}
.foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 32px;
}
.foot-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
}
.foot-col h4 {
  font-family: Archivo, sans-serif;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--faint);
  margin-bottom: 14px;
}
.foot-col a {
  display: block;
  font-size: var(--t-sm);
  color: var(--muted);
  padding: 4px 0;
  transition: color 0.16s var(--ease);
}
.foot-col a:hover { color: var(--gold); }

.foot-base {
  border-top: 1px solid var(--rule);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--faint);
}
.foot-base a { color: var(--faint); }
.foot-base a:hover { color: var(--muted); }

/* ==========================================================================
   Motion. One reveal on entry, nothing else uninvited.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.reveal.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    inset: 72px 0 0;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    padding: 20px 24px 40px;
    overflow-y: auto;
    display: none;
  }
  .nav-links[data-open="true"] { display: flex; }

  .has-mega { display: block; height: auto; }

  .nav-link {
    height: auto;
    padding: 16px 0;
    font-size: var(--t-md);
    border-bottom: 1px solid var(--rule);
    justify-content: space-between;
  }
  .nav-link::after { display: none; }

  .mega {
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .mega[data-open="true"] { display: block; }
  .mega-grid { grid-template-columns: 1fr; padding: 8px 0 16px; gap: 0; }
  .mega-item { padding: 11px 0 11px 14px; }
  .mega-item strong { font-size: var(--t-base); }

  .nav-cta { margin: 22px 0 0; text-align: center; }

  /* Narrow screens: the kitchen photo is a banner above the copy, so the
     headline never sits on her face. */
  .hero { padding-top: 0; }
  .hero-art {
    position: relative;
    width: 100%;
    max-width: none;
    height: 300px;
  }
  .hero-art img { object-position: 60% 30%; }
  .hero-art::after {
    background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 62%,
      #fff 100%);
  }
  .hero > .shell { padding-top: 8px; }
  .cat-grid { grid-template-columns: 1fr; }

  /* Narrow screens have no side room for the copy to clear the image, so the
     veil goes heavier and the text keeps its contrast. */
  .story-art::after {
    background: linear-gradient(to bottom,
      #fff 0%,
      rgba(255, 255, 255, 0.88) 26%,
      rgba(255, 255, 255, 0.88) 70%,
      #fff 100%);
  }

  .page-head { gap: 14px; }
  .page-head img { width: 54px; height: 54px; }

  .split { grid-template-columns: 1fr; gap: 32px; }
  .split-art { max-width: 340px; }

  .band { padding-block: 64px; }
  .hero-rail { margin-top: 48px; gap: 12px; }
  .hero-rail .plate { flex-basis: 150px; }
  .foot-cols { gap: 32px; }

}