/* PROT INN · Sistema visual web · v4
   ─────────────────────────────────────────────────────────────────────────
   Construido siguiendo la estructura real de honestgreens.com, revisada
   pantalla por pantalla. Las reglas que la definen:

   · UNA sola tipografía para todo: un grotesco (Archivo). Nada de serif.
     El serif es lo que hacía que la página se leyera "editorial".
   · Titulares en MAYÚSCULA, peso 800-900, interlínea 0.85, tracking cerrado
     y punto final. Enormes.
   · Fondo BLANCO. Un solo bloque greige para cortar. Texto negro.
   · Esquinas RECTAS en las fotos. La única forma redonda son los botones,
     que son píldoras negras con flecha ↗.
   · Denso: el titular arranca casi pegado al borde superior de la sección.

   Del brandbook se conserva el Persimmon como color de acción y el tono sin
   autoelogio. Fraunces y Bone quedan fuera: no llegaban al resultado. */

@font-face {
  font-family: "Archivo"; src: url("/assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --white: #FFFFFF;
  --greige: #EFEBE1;
  --greige-2: #E4DED0;
  --black: #111110;
  --black-60: rgba(17, 17, 16, .6);
  --black-40: rgba(17, 17, 16, .4);
  --hair: rgba(17, 17, 16, .12);
  --persimmon: #E85D2A;
  --ember: #F2A65A;
  --terracotta: #C7714A;

  --sans: "Archivo", Helvetica Neue, Helvetica, Arial, sans-serif;
  --gut: clamp(1.1rem, 4.5vw, 5rem);
  --head-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--persimmon); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--black); color: #fff; padding: .8rem 1.2rem; }
.skip:focus { left: 1rem; top: 1rem; }

.wrap { padding-inline: var(--gut); max-width: 1680px; margin-inline: auto; }
.wrap.narrow > * { max-width: 640px; }

/* ── Tipografía ─────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.035em;
  line-height: .85;
  margin: 0 0 .3em;
}
h1 { font-weight: 800; }
h2 { font-size: clamp(2.8rem, 8.5vw, 8rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2.4rem); letter-spacing: -.03em; }
h4 { font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; margin: 0; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.02rem, 1.25vw, 1.18rem); color: var(--black-60); max-width: 44ch; line-height: 1.45; }

/* Etiqueta de sección: minúscula alta, negrita, encima del titular */
.kicker {
  display: block; font-weight: 700; font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--black);
  margin: 0 0 1.1rem;
}
.kicker.light { color: #fff; }
.kicker.accent { color: var(--persimmon); }

/* ── Header ─────────────────────────────────────────────── */

.site-head {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--head-h);
  background: var(--white); border-bottom: 1px solid var(--hair);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.site-head.over { background: transparent; border-color: transparent; color: #fff; }
.head-in { display: flex; align-items: center; gap: 2rem; height: var(--head-h); }

.logo { font-weight: 700; font-size: 1.1rem; letter-spacing: -.03em; text-decoration: none; white-space: nowrap; line-height: 1; }
.logo small { display: none; }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 1.9vw, 1.9rem); }
.nav a { font-weight: 400; font-size: .95rem; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.nav a:hover { text-decoration: underline; text-underline-offset: .35em; }
.nav a[aria-current="page"] { font-weight: 600; }
.nav .lang { font-weight: 600; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.nav .order { font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.nav .order::after { content: " ↗"; }
.nav .order:hover { text-decoration: none; color: var(--persimmon); }
/* La navegación central, como la referencia */
.nav { margin-inline: auto 0; }
.head-in .nav { position: absolute; left: 50%; transform: translateX(-50%); }
.head-in .nav .lang, .head-in .nav .order { position: static; }
@media (min-width: 1161px) {
  .head-in { position: relative; }
  .head-in > .nav { position: static; transform: none; margin-left: auto; }
}

.nav-toggle { display: none; }

/* Con "Trabaja con nosotros" en el menú hay seis enlaces más el idioma y el
   botón de pedido: por debajo de 1160 px ya no caben en una línea. */
@media (max-width: 1160px) {
  .nav-toggle {
    display: inline-flex; margin-left: auto; align-items: center;
    background: none; border: 0; padding: .5rem 0; cursor: pointer; color: inherit;
    font-family: var(--sans); font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  }
  .head-in .nav {
    position: fixed; inset: var(--head-h) 0 auto; transform: none; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); color: var(--black);
    padding: 1.4rem var(--gut) 2.4rem;
    max-height: calc(100dvh - var(--head-h)); overflow: auto;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: .7rem 0; font-weight: 800; font-size: 2.1rem; letter-spacing: -.035em; text-transform: uppercase; line-height: .95; }
  .nav .lang, .nav .order { font-size: .9rem; padding-top: 1.4rem; }
}

/* ── Botones ────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--sans); font-weight: 700; font-size: .92rem; letter-spacing: -.01em;
  padding: 1rem 1.9rem; text-decoration: none; border: 0; border-radius: 999px;
  background: var(--black); color: #fff; cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.btn::after { content: "↗"; font-size: .95em; }
.btn:hover { background: var(--persimmon); color: #fff; }
.btn.accent { background: var(--persimmon); }
.btn.accent:hover { background: var(--black); }
.btn.light { background: #fff; color: var(--black); }
.btn.light:hover { background: var(--persimmon); color: #fff; }
.btn.outline-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); }
.btn.outline-light:hover { background: #fff; color: var(--black); box-shadow: none; }
.btn.small { padding: .78rem 1.4rem; font-size: .84rem; }
.btn.plain::after { content: none; }
/* Botón secundario: mismo cuerpo, contorno en vez de relleno. Lo usan las
   fichas de local, donde tres botones negros seguidos pesarían demasiado. */
.btn.ghost { background: transparent; color: var(--black); box-shadow: inset 0 0 0 1.5px rgba(17,17,16,.22); }
.btn.ghost:hover { background: var(--black); color: #fff; box-shadow: none; }
.btns { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Enlace grande con flecha, como los de la referencia */
.arrow {
  font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.2rem); text-transform: uppercase;
  letter-spacing: -.035em; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
  transition: color .25s;
}
.arrow::after { content: "→"; transition: transform .35s cubic-bezier(.22,.7,.25,1); }
.arrow:hover { color: var(--persimmon); }
.arrow:hover::after { transform: translateX(8px); }
.arrow.sm { font-size: 1rem; letter-spacing: 0; }

/* ── Imágenes: esquinas rectas ──────────────────────────── */

.ph { position: relative; overflow: hidden; background: var(--greige-2); }
.ph > img { width: 100%; height: 100%; object-fit: cover; }

/* ── Hero ───────────────────────────────────────────────── */

.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  color: #fff; overflow: hidden;
  padding: calc(var(--head-h) + 2rem) 0 clamp(2.5rem, 6vw, 5rem);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(17,17,16,.42) 0%, rgba(17,17,16,.1) 30%, rgba(17,17,16,.34) 70%, rgba(17,17,16,.6) 100%);
}
.hero > .wrap { position: relative; z-index: 2; width: 100%; }
.hero h1 {
  font-size: clamp(3.6rem, 14vw, 15rem);
  font-weight: 800; line-height: .82; letter-spacing: -.05em; margin: 0 0 1.4rem;
}
.hero .sub { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: rgba(255,255,255,.9); max-width: 40ch; margin: 0 0 2rem; line-height: 1.4; font-weight: 400; }

.hero.short { min-height: 68svh; align-items: flex-end; }
.hero.short h1 { font-size: clamp(3rem, 10vw, 9rem); }
.hero.mini { min-height: 52svh; align-items: flex-end; }
.hero.mini h1 { font-size: clamp(2.5rem, 7vw, 6rem); }

.seal { display: none; }

/* ── Secciones ──────────────────────────────────────────── */

section { padding-block: clamp(3rem, 6vw, 6rem); }
section.tight { padding-block: clamp(2.4rem, 4vw, 4rem); }
section.flush { padding-block: 0; }
.greige { background: var(--greige); }
.dark { background: var(--black); color: #fff; }
.dark .lede, .dark p { color: rgba(255,255,255,.7); }
.hair { border: 0; border-top: 1px solid var(--hair); margin: 0; }

.sec-head { display: flex; flex-wrap: wrap; gap: 1.2rem 3rem; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.sec-head h2 { margin: 0; max-width: 12ch; }

/* ── Carrusel horizontal ────────────────────────────────── */

.rail-head { display: flex; justify-content: flex-end; gap: 1.2rem; margin-bottom: 1.2rem; }
.rail-btn {
  width: 34px; height: 34px; border: 0; background: none; color: var(--black);
  cursor: pointer; font-size: 1.5rem; line-height: 1; display: grid; place-items: center;
  transition: color .2s, opacity .2s;
}
.rail-btn:hover { color: var(--persimmon); }
.rail-btn[disabled] { opacity: .25; cursor: default; }

.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 24vw);
  gap: clamp(1rem, 1.7vw, 1.7rem); overflow-x: auto; scroll-snap-type: x proximity;
  padding-inline: var(--gut); scroll-padding-inline: var(--gut);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (max-width: 700px) { .rail { grid-auto-columns: 68vw; } }

/* ── Ficha: foto + nombre con flecha + dato (patrón de la referencia) ── */

.card { display: block; text-decoration: none; }
.card .ph { aspect-ratio: 1 / 1; margin-bottom: 1.1rem; }
.card img { transition: transform .8s cubic-bezier(.16,.84,.28,1); }
.card:hover img { transform: scale(1.04); }
.card h3 { margin: 0 0 .3rem; font-size: clamp(1.25rem, 2vw, 1.8rem); display: flex; align-items: center; gap: .45rem; }
.card h3::after { content: "↗"; font-size: .8em; transition: transform .3s cubic-bezier(.22,.7,.25,1); }
.card:hover h3::after { transform: translate(4px, -4px); }
.card p { font-size: .95rem; color: var(--black-60); margin: 0; text-transform: none; font-weight: 400; }
.card .meta { display: block; font-weight: 700; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--black-40); margin-bottom: .6rem; }

.cards { display: grid; gap: clamp(1.4rem, 2.5vw, 2.4rem); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 660px) { .cards { grid-template-columns: 1fr; } }

.tag { display: inline-block; font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--black); background: var(--ember); padding: .3rem .8rem; border-radius: 999px; margin-bottom: .9rem; }
.tag.terra { background: var(--persimmon); color: #fff; }

/* ── Mosaico ────────────────────────────────────────────── */

.tiles { display: grid; gap: clamp(1rem, 1.7vw, 1.7rem); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tile { position: relative; display: block; text-decoration: none; }
.tile .ph { aspect-ratio: 1 / 1; margin-bottom: 1rem; }
.tile img { transition: transform .8s cubic-bezier(.16,.84,.28,1); }
.tile:hover img { transform: scale(1.04); }
.tile .cap h3 { margin: 0; font-size: clamp(1.2rem, 1.9vw, 1.7rem); display: flex; align-items: center; gap: .4rem; }
.tile .cap h3::after { content: "→"; transition: transform .3s cubic-bezier(.22,.7,.25,1); }
.tile:hover .cap h3::after { transform: translateX(6px); }
.tile .cap .meta { display: block; font-size: .88rem; color: var(--black-40); margin-top: .25rem; font-weight: 400; text-transform: none; }

/* ── Bloque partido: foto pegada al borde ───────────────── */

.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split .media .ph { height: 100%; min-height: clamp(340px, 46vw, 640px); }
.split .body { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 5vw, 5.5rem) clamp(1.5rem, 4vw, 5rem); }
.split .body > * { max-width: 40ch; }
.split.rev .media { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.rev .media { order: 0; } .split .media .ph { min-height: 58vw; } }

/* ── Franja con foto de fondo ───────────────────────────── */

.band { position: relative; color: #fff; overflow: hidden; display: flex; align-items: flex-end; min-height: 78svh; }
.band > .bg { position: absolute; inset: 0; }
.band > .bg .ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,16,.25) 0%, rgba(17,17,16,.06) 40%, rgba(17,17,16,.8) 100%); }
.band > .wrap { position: relative; z-index: 2; padding-block: clamp(3rem, 5vw, 5rem); width: 100%; }

/* ── Cifras ─────────────────────────────────────────────── */

.stats { display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 5rem); margin-top: 2.6rem; }
.stat .n { font-weight: 800; font-size: clamp(3rem, 6vw, 6rem); line-height: .8; display: block; letter-spacing: -.05em; }
.stat .l { font-weight: 700; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; opacity: .5; margin-top: .8rem; display: block; }

/* ── Carta ──────────────────────────────────────────────── */

.menu-nav { position: sticky; top: var(--head-h); z-index: 20; background: var(--white); border-bottom: 1px solid var(--hair); }
.menu-nav .inner { display: flex; gap: 1.8rem; overflow-x: auto; padding: 1rem 0; scrollbar-width: none; }
.menu-nav .inner::-webkit-scrollbar { display: none; }
.menu-nav a { font-weight: 600; font-size: .88rem; text-decoration: none; color: var(--black-60); white-space: nowrap; }
.menu-nav a:hover { color: var(--black); }

.menu-cat { scroll-margin-top: calc(var(--head-h) + 70px); padding-block: clamp(2.5rem, 5vw, 5rem); }
.menu-cat + .menu-cat { border-top: 1px solid var(--hair); }
.menu-cat .head { display: grid; grid-template-columns: minmax(200px, 24%) 1fr; gap: clamp(1.8rem, 4vw, 4rem); align-items: start; }
.menu-cat .head .ph { aspect-ratio: 1 / 1; position: sticky; top: calc(var(--head-h) + 90px); }
.menu-cat h2 { margin: 0 0 .4rem; font-size: clamp(2.2rem, 5vw, 4.4rem); }
.menu-cat .note { font-size: .95rem; color: var(--black-40); margin: 0 0 2.2rem; }
@media (max-width: 820px) { .menu-cat .head { grid-template-columns: 1fr; } .menu-cat .head .ph { aspect-ratio: 16 / 10; position: static; } }

.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 clamp(2rem, 4vw, 4rem); }
.item { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.item h4 { font-weight: 700; font-size: 1.02rem; }
.item .price { font-weight: 700; font-size: .98rem; white-space: nowrap; }
.item .desc { grid-column: 1 / -1; font-size: .89rem; color: var(--black-40); margin: 0; }
.item .flag { display: inline-block; font-weight: 700; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--black); background: var(--ember); padding: .1rem .45rem; border-radius: 999px; margin-left: .5rem; vertical-align: middle; }

/* ── Locales ────────────────────────────────────────────── */

.city-block { margin-bottom: clamp(2.6rem, 4.5vw, 4rem); scroll-margin-top: calc(var(--head-h) + 20px); }
.city-block > h3 { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1.4rem; }
.city-block .count { font-weight: 700; font-size: .8rem; color: var(--black-40); }

.loc-facts { display: grid; gap: clamp(1.6rem, 3.5vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0; }
.loc-facts dt { font-weight: 700; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--black-40); margin-bottom: .7rem; }
.loc-facts dd { margin: 0; font-size: 1rem; }
.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: 1.5rem; max-width: 220px; padding: .15rem 0; font-size: .95rem; }
.hours span:last-child { color: var(--black-40); }

/* ── FAQ ────────────────────────────────────────────────── */

.faq { max-width: 940px; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  font-weight: 800; font-size: clamp(1.1rem, 2.1vw, 1.8rem); text-transform: uppercase; letter-spacing: -.03em;
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 2rem;
  align-items: center; padding: 1.3rem 0; transition: color .2s;
}
.faq summary:hover { color: var(--persimmon); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.6rem; flex: none; transition: transform .3s cubic-bezier(.22,.7,.25,1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.6rem; color: var(--black-60); max-width: 62ch; font-size: 1rem; }

/* ── Artículos ──────────────────────────────────────────── */

.article { max-width: 640px; }
.article h2 { margin-top: 2.8rem; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.article p { color: var(--black-60); font-size: 1.08rem; line-height: 1.62; }
.breadcrumb { font-weight: 700; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--black-40); margin-bottom: 1.6rem; }
.breadcrumb a { text-decoration: none; }

.delivery-logos { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }

/* ── Macros ─────────────────────────────────────────────── */
/* La línea de macros va bajo la descripción, en monoespaciado óptico: son
   números y se leen mejor alineados. La proteína en negro y el resto en gris
   porque es el dato por el que la gente compara. */
.macros { margin: .45rem 0 0; font-size: .82rem; letter-spacing: -.01em; color: var(--black-40); font-variant-numeric: tabular-nums; }
.macros strong { color: var(--black); font-weight: 700; }
.macro-note { font-style: italic; }
.flag.prot { background: var(--black); color: #fff; }

/* Ranking de proteína: la tabla que ningún competidor tiene publicada. */
.prot-list { list-style: none; counter-reset: p; margin: 2rem 0 0; padding: 0; max-width: 720px; }
.prot-list li { counter-increment: p; display: grid; grid-template-columns: 2.2rem 1fr auto auto;
  gap: .8rem 1.2rem; align-items: baseline; padding: .85rem 0; border-top: 1px solid var(--hair); }
.prot-list li:last-child { border-bottom: 1px solid var(--hair); }
.prot-list li::before { content: counter(p, decimal-leading-zero); font-size: .78rem; font-weight: 700; color: var(--black-40); }
.prot-list a { text-decoration: none; }
.prot-list a:hover .pn { color: var(--persimmon); }
.prot-list .pn { font-weight: 700; letter-spacing: -.02em; }
.prot-list .pv { font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.prot-list .pk { font-size: .8rem; color: var(--black-40); font-variant-numeric: tabular-nums; min-width: 9ch; text-align: right; }
@media (max-width: 560px) {
  .prot-list li { grid-template-columns: 1.8rem 1fr auto; }
  .prot-list .pk { grid-column: 2 / -1; text-align: left; margin-top: -.4rem; }
}

/* ── Banda compacta (delivery en la home) ───────────────── */
/* Antes esto era un split con foto a media pantalla: ocupaba un scroll entero
   para decir una frase y tres botones. Ahora es una banda. */
.strip { display: grid; grid-template-columns: 1fr auto; gap: 1.6rem 3rem; align-items: center;
  background: var(--greige); padding: clamp(1.8rem, 3vw, 2.8rem) clamp(1.5rem, 3vw, 3rem); }
.strip h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); margin: .5rem 0 .4rem; }
.strip p { margin: 0; max-width: 34ch; color: var(--black-60, rgba(17,17,16,.6)); }
.strip-side { display: grid; gap: 1rem; justify-items: start; }
.strip .delivery-logos { margin-top: 0; }
@media (max-width: 820px) { .strip { grid-template-columns: 1fr; } }

/* ── Fichas de local con toda la info a la vista ─────────── */
.loc-cards { display: grid; gap: clamp(1.2rem, 2vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.loc-card { display: grid; grid-template-columns: 132px 1fr; gap: 1.2rem; align-items: start; }
.loc-card-img { display: block; }
.loc-card-img .ph { aspect-ratio: 1 / 1; }
.loc-card-body { display: grid; gap: .5rem; justify-items: start; }
.loc-card-body .kicker { margin: 0; }
.loc-card h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin: 0; }
.loc-card h3 a { text-decoration: none; color: inherit; }
.loc-card h3 a:hover { color: var(--persimmon); }
.loc-card .addr { margin: 0; font-size: .95rem; color: var(--black-60, rgba(17,17,16,.6)); }
.loc-card .hours li { max-width: 100%; font-size: .9rem; }
.loc-card .soft { margin: 0; font-size: .9rem; color: var(--black-40); }
.loc-card-acts { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .3rem; }
.loc-card-acts .btn { padding: .55rem 1rem; font-size: .78rem; }
@media (max-width: 520px) { .loc-card { grid-template-columns: 96px 1fr; gap: .9rem; } }

/* ── Mapa embebido en la página de local ────────────────── */
/* Carga diferida: el iframe de Google pesa más que el resto de la página junta,
   así que no se pide hasta que el visitante se acerca a él. */
.loc-map { position: relative; aspect-ratio: 16 / 8; background: var(--greige); }
.loc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 700px) { .loc-map { aspect-ratio: 4 / 3; } }

/* ── Footer ─────────────────────────────────────────────── */

.site-foot { background: var(--black); color: rgba(255,255,255,.6); padding: clamp(3.5rem, 6vw, 6rem) 0 1.8rem; font-size: .92rem; }
.site-foot a { color: rgba(255,255,255,.6); text-decoration: none; }
.site-foot a:hover { color: #fff; }

/* Cierre: el lema a tamaño de titular, igual que el hero. Da un final a la
   página en vez de dejarla morir en una lista de enlaces. */
.foot-say { display: grid; grid-template-columns: 1fr minmax(0, 27ch); align-items: end; gap: 1.4rem 2.5rem; padding-bottom: clamp(2rem, 3vw, 2.8rem); border-bottom: 1px solid rgba(255,255,255,.14); }
.foot-mark { display: block; color: #fff; font-weight: 800; text-transform: uppercase; line-height: .82; letter-spacing: -.045em; font-size: clamp(2.4rem, 8.2vw, 7.5rem); }
.foot-say p { margin: 0 0 .2rem; max-width: 30ch; }

/* Cuatro columnas explícitas. Ojo: `repeat(auto-fit, …)` NO se puede combinar
   con tracks en `fr` — es CSS inválido y el navegador tira la regla entera,
   con lo que el footer se apila en una sola columna. Por eso van a mano. */
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 2.4rem 2rem; padding: clamp(2.4rem, 4vw, 3.4rem) 0; }
.foot-grid h4 { font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 1.1rem; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.foot-grid a { overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .foot-say { grid-template-columns: 1fr; align-items: start; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.foot-bottom { padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: .6rem 1rem; justify-content: space-between; font-size: .76rem; color: rgba(255,255,255,.35); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── La galleta ──────────────────────────────────────────────────────────────
   Bloque de la portada que abre un producto y muestra sus macros.

   Fondo blanco, como el resto de la página. Estuvo en negro un tiempo, con la
   idea de que la pieza pareciera iluminada en un estudio; con la foto real del
   producto —tomada sobre papel claro— el negro pedía una foto que no existe.
   En blanco, la galleta recortada se apoya sobre la página sin que se note
   dónde acaba la foto. */

.galleta-sec {
  background: var(--white);
  color: var(--black);
  padding-block: clamp(5rem, 11vw, 8.5rem);
  overflow: hidden;
  /* Filetes finos arriba y abajo: sin el bloque de color, la sección necesita
     algo que la separe de la de al lado. */
  border-block: 1px solid var(--hair);
}
.galleta-sec .kicker { color: var(--black-40); }
.galleta-sec h2 { color: var(--black); }
.galleta-lede { color: var(--black-60); max-width: 48ch; }
.galleta-lede b { color: var(--black); font-weight: 600; }

.galleta-esc {
  display: grid;
  /* La pieza manda: columna central grande y los datos a los lados. El ancho
     total se limita para que en pantallas anchas las líneas no crucen medio
     monitor — a partir de cierto largo dejan de leerse como punteros. */
  grid-template-columns: minmax(0, 1fr) minmax(260px, 500px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(.6rem, 2.5vw, 3rem);
  max-width: 1220px;
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
}

.gd-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(1.6rem, 4vw, 2.8rem); }
.gd { display: flex; align-items: center; gap: 1rem; }
.gd-izq .gd-txt { order: 0; text-align: right; }
.gd-izq .gd-linea { order: 1; transform-origin: left center; }
.gd-der .gd-linea { order: 0; transform-origin: right center; }
.gd-der .gd-txt { order: 1; text-align: left; }

/* La línea que sale del dato hacia la galleta. Se desvanece al acercarse a la
   pieza para que no parezca que la toca. */
.gd-linea { flex: 1 1 auto; min-width: 22px; height: 1px; }
.gd-izq .gd-linea { background: linear-gradient(90deg, rgba(17,17,16,.34), rgba(17,17,16,0)); }
.gd-der .gd-linea { background: linear-gradient(270deg, rgba(17,17,16,.34), rgba(17,17,16,0)); }

.gd-txt { flex: 0 0 auto; }
.gd-n { display: block; font-size: clamp(2.3rem, 4.6vw, 3.5rem); font-weight: 800; letter-spacing: -.035em; line-height: .88; font-variant-numeric: tabular-nums; }
.gd-t { display: block; font-size: clamp(.95rem, 1.7vw, 1.3rem); text-wrap: balance; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05; }
.gd-l { display: block; margin-top: .55rem; font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--black-40); }

.galleta-pieza { perspective: 1100px; }
/* La foto viene recortada contra transparencia, así que la sombra la pone el
   CSS y no la foto: `drop-shadow` sigue la silueta real de la galleta, no su
   caja. Una sombra pintada en la foto se vería mal en cuanto cambie el fondo
   de la sección. */
.galleta-foto img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 26px 34px rgba(17, 17, 16, .17)) drop-shadow(0 4px 8px rgba(17, 17, 16, .09));
}
.galleta-3d { position: relative; transform-style: preserve-3d; }
.galleta-svg { display: block; width: 100%; height: auto; }
/* Las chispas van en su propio plano, 34 px por delante de la masa: al
   inclinarse la pieza se desplazan respecto del fondo y aparece el relieve. */
.galleta-chispas { position: absolute; inset: 0; transform: translateZ(34px); }

.galleta-pie {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  font-family: var(--mono); font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--black-40); text-align: center;
}

@media (max-width: 860px) {
  /* En vertical no hay sitio para líneas cruzando la pantalla: la galleta se
     queda arriba y los datos pasan a una rejilla debajo. */
  .galleta-esc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.2rem; }
  .galleta-pieza { grid-column: 1 / -1; max-width: 320px; margin-inline: auto; }
  .gd-t { font-size: .96rem; }
  .gd-l { font-size: .55rem; letter-spacing: .16em; }
  .gd-col { gap: 2rem; }
  .gd-linea { display: none; }
  .gd-izq .gd-txt, .gd-der .gd-txt { text-align: left; }
  /* `flex: 0 0 auto` impedía que el texto se encogiera, así que en pantallas
     estrechas "HARINA DE ALMENDRA" no partía línea: se salía por el borde
     derecho. Dejándolo encoger, parte y se queda dentro. */
  .gd-txt { flex: 0 1 auto; min-width: 0; }
  .galleta-esc .gd-izq { order: 2; }
  .galleta-esc .gd-der { order: 3; }
}