/* ==========================================================
   Pizzeria Caruso · Tradizione napoletana · Arica
   Versión minimalista, inspirada en Il figlio di Emiliano.
   Títulos: Gloock · Menú, dirección y texto: Adelle Sans
   Subtítulo del hero: Art Galleria (la letra del logo y la carta)
   ========================================================== */

@font-face { font-family: "Adelle Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("assets/fonts/AdelleSans-Light.otf") format("opentype"); }
@font-face { font-family: "Adelle Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/AdelleSans-Regular.otf") format("opentype"); }
@font-face { font-family: "Adelle Sans"; font-weight: 500 600; font-style: normal; font-display: swap; src: url("assets/fonts/AdelleSans-Semibold.otf") format("opentype"); }
@font-face { font-family: "Art Galleria"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/ArtGalleria.otf") format("opentype"); }

:root {
  --green: #10281a;        /* verde oscuro (pie, cabecera fija) */
  --green-ink: #12301f;    /* títulos sobre blanco */
  --red: #a8221c;          /* rojo del logo, botones */
  --red-dark: #8c1b16;
  --red-bright: #d62a20;    /* punto de la franja */
  --green-text: #2c6a3c;   /* verde de los precios y palabras destacadas */
  --white: #ffffff;
  --grey: #f4f4f4;
  --ink: #212121;
  --ink-soft: #5b5f5c;

  --f-title: "Gloock", "Times New Roman", serif;
  --f-sans: "Adelle Sans", "Helvetica Neue", Arial, sans-serif;
  --f-deco: "Art Galleria", var(--f-sans);

  --container: 1360px;
  --gutter: clamp(20px, 4vw, 40px);
  --topbar-h: 52px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }
img, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, ul, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
ol { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--red); color: var(--white); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow { max-width: calc(820px + var(--gutter) * 2); }
.center { text-align: center; }

.icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  padding: 10px 16px; background: var(--white); color: var(--ink);
}
.skip:focus { top: 16px; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font-family: var(--f-sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--red { background: var(--red); color: var(--white); }
.btn--outline { border: 1px solid var(--red); color: var(--red); background: transparent; padding: 16px 34px; font-size: 15px; }
.btn--line { border: 1px solid currentColor; color: var(--white); background: transparent; padding: 14px 26px; font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
  .btn--red:hover { background: var(--red-dark); }
  .btn--outline:hover { background: var(--red); color: var(--white); }
  .btn--line:hover { background: var(--white); color: var(--green); border-color: var(--white); }
}

/* ==========================================================
   CABECERA
   ========================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--white);
  transition: transform 420ms var(--ease-out), background-color 420ms ease;
}
.site-header.is-scrolled {
  transform: translateY(calc(var(--topbar-h) * -1));
  background: var(--green);
}

.topbar { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.topbar__inner {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: opacity 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .topbar__item:hover { opacity: 0.75; }
}

.navbar {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: height 420ms var(--ease-out);
}
.is-scrolled .navbar { height: 80px; }
.brand { display: block; width: 150px; transition: width 420ms var(--ease-out); }
.is-scrolled .brand { width: 100px; }

.nav { display: flex; gap: 34px; }
.nav a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 0;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav a:hover::after { transform: scaleX(1); transform-origin: left; }
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  z-index: 60;
}
.burger span {
  position: absolute;
  left: 9px;
  width: 26px;
  height: 1px;
  background: var(--white);
  transition: transform 300ms var(--ease-out), opacity 200ms ease;
}
.burger span:nth-child(1) { top: 14.5px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 29.5px; }
.menu-open .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; }
.menu-open .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--green);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; transition: opacity 320ms ease; }
.mobile-menu nav { display: grid; gap: 18px; }
.mobile-menu nav a {
  font-family: var(--f-title);
  font-size: 40px;
  line-height: 1.1;
  text-transform: uppercase;
  transform: translateY(16px);
  opacity: 0;
  transition: transform 500ms var(--ease-out), opacity 500ms ease;
}
.menu-open .mobile-menu nav a { transform: none; opacity: 1; }
.menu-open .mobile-menu nav a:nth-child(2) { transition-delay: 60ms; }
.menu-open .mobile-menu nav a:nth-child(3) { transition-delay: 120ms; }
.mobile-menu__info { font-size: 15px; opacity: 0.8; }

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--white);
  background: #1b1b1b;
}
.hero__media { position: absolute; inset: 0; }
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: hero-zoom 2.4s var(--ease-out) forwards;
}
@keyframes hero-zoom { to { transform: scale(1); } }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(14, 18, 16, 0.45); /* velo para leer el título sobre el video */
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 140px var(--gutter) 60px;
}
.hero__title {
  font-family: var(--f-title);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.005em;
}
.hero__line { display: block; }
.hero__line--1 { font-size: clamp(54px, 7.4vw, 136px); }
.hero__line--2 { font-size: clamp(64px, 8.9vw, 164px); }
/* el bloque mide lo que mide "CARUSO": las líneas del subtítulo llegan hasta sus bordes */
.hero__brand { display: table; margin-inline: auto; }
.hero__sub {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin-top: 24px;
  font-family: var(--f-deco);
  font-size: clamp(22px, 2.1vw, 36px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero__sub { padding-inline: 0.2em; } /* las líneas terminan donde se ve la letra, no en el borde de la caja */
.hero__sub::before, .hero__sub::after { content: ""; flex: 1 1 0; min-width: 14px; height: 2px; background: currentColor; }
.hero__cta {
  margin-top: 36px;
  padding: 18px 36px;
  font-size: clamp(17px, 1.3vw, 22px);
}

/* ==========================================================
   SECCIONES
   ========================================================== */
.section { padding: clamp(80px, 10vw, 140px) 0; }
.section--white { background-color: var(--bg-white, #fff); }
.section--grey { background-color: var(--bg-grey, #f4f4f4); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--red);
  font-family: var(--f-title);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kicker::before,
.kicker::after {
  content: "";
  width: 56px;
  height: 1px;
  background: currentColor;
}
.title {
  margin-top: 10px;
  font-family: var(--f-title);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 50px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--green-ink);
}
.lead {
  margin: 20px auto 0;
  max-width: 62ch;
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
}


/* ---------- historia ---------- */
.historia { background-color: var(--bg-white, #fff); overflow-x: clip; }
.historia__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
}
.historia__plate { max-width: 460px; justify-self: center; }
.historia__plate img { width: 100%; will-change: transform; }
.kicker--left::after { display: none; }
.historia__title {
  margin-top: 14px;
  font-family: var(--f-title);
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--green-ink);
}
.historia__title em { font-style: normal; }
.historia__p {
  margin-top: 28px;
  max-width: 34em;
  font-size: clamp(19px, 1.45vw, 23px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
}
.historia__p + .historia__p { margin-top: 22px; }
.hl--green { color: var(--green-text); }
.hl--red { color: var(--red); }
.historia__p .hl { font-weight: 400; }

/* palabras que se encienden al bajar */
.js .w { opacity: 0.16; transition: opacity 380ms ease; }
.js .w.on { opacity: 1; }

/* proceso: de la masa a la mesa */
.proceso {
  list-style: none;
  margin-top: clamp(80px, 10vw, 150px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  align-items: start;
}
.proceso__item:nth-child(even) { margin-top: clamp(32px, 5vw, 80px); }
.proceso figure { display: grid; gap: 16px; }
.proceso__img { aspect-ratio: 3 / 4; overflow: hidden; background: #ddd; }
.proceso__img img {
  width: 100%;
  height: 112%;
  margin-top: -6%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  will-change: transform;
}
.proceso figcaption {
  font-family: var(--f-deco);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green-ink);
}

/* ---------- franja ---------- */
.marquee {
  overflow-x: clip;
  background-color: var(--green);
  color: var(--white);
  /* abajo deja espacio para el borde ondulado de la carta, que se monta encima */
  padding: 24px 0 calc(24px + clamp(30px, 4vw, 64px));
}
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee__group { display: flex; flex: none; }
.marquee span {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-deco);
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.marquee span::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: 0 clamp(28px, 3vw, 48px);
  border-radius: 50%;
  background: var(--red-bright);
}

/* ---------- carta ---------- */
.carta { position: relative; overflow-x: clip; isolation: isolate; }
.carta__watermark {
  position: absolute;
  z-index: -1;
  right: max(-150px, calc(50% - 900px));
  top: 90px;
  width: clamp(340px, 31vw, 520px);
  opacity: 0.07;
  pointer-events: none;
}

.tabs {
  position: relative;
  display: flex;
  justify-content: center;
  gap: clamp(18px, 3vw, 44px);
  margin: clamp(40px, 5vw, 64px) auto 0;
  border-bottom: 1px solid #dcdcdc;
  width: max-content;
  max-width: 100%;
}
.tabs__tab {
  position: relative;
  padding: 14px 2px 16px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: color 220ms ease, transform 160ms var(--ease-out);
}
.tabs__tab[aria-selected="true"] { color: var(--red); }
.tabs__tab:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .tabs__tab:hover { color: var(--ink); }
  .tabs__tab[aria-selected="true"]:hover { color: var(--red); }
}
.tabs__indicator {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100px;
  background: var(--red);
  transform-origin: left;
  transition: transform 420ms var(--ease-out), width 420ms var(--ease-out);
}

.panels {
  display: grid;
  margin-top: clamp(40px, 5vw, 64px);
  max-width: calc(1040px + var(--gutter) * 2);
}
.panel { grid-area: 1 / 1; }
.panel:focus-visible { outline-offset: 12px; }
.dishes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px clamp(40px, 6vw, 88px);
  align-content: start;
}
.dishes--compact { gap: 14px clamp(40px, 6vw, 88px); }
.dish__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.dish__name {
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.dish__dots {
  flex: 1;
  min-width: 24px;
  border-bottom: 1.5px dotted #b9b9b9;
  transform: translateY(-4px);
}
.dish__price {
  font-size: 17px;
  font-weight: 500;
  color: var(--green-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dish__desc {
  margin-top: 6px;
  max-width: 40em;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* cambio de categoría */
.panel .dish {
  opacity: 0;
  transform: translateY(14px);
}
.panel.is-active .dish {
  opacity: 1;
  transform: none;
  transition: opacity 480ms var(--ease-out), transform 560ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms + 80ms);
}
.panel.is-leaving .dish {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 160ms ease, transform 200ms ease;
  transition-delay: 0ms;
}
.carta__pdf { margin-top: clamp(48px, 6vw, 72px); }

/* platos destacados: más vendida y nueva */
.dish--featured {
  position: relative;
  margin: -20px -22px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(168, 34, 28, 0.18);
}
.dish--new { border-color: rgba(44, 106, 60, 0.22); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
}
.badge--red { background: var(--red); }
.badge--green { background: var(--green-text); }
.badge__icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.dish__urgency {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--red);
}
.dish--new .dish__urgency { color: var(--green-text); }
.dish__urgency a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
  transition: opacity 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .dish__urgency a:hover { opacity: 0.7; }
}
/* punto que late: transmite "ahora" */
.pulse {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-1px);
}
.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.8s var(--ease-out) infinite;
}
@keyframes pulse {
  from { transform: scale(1); opacity: 0.55; }
  to { transform: scale(2.8); opacity: 0; }
}
.tabs__chip {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--green-text);
  color: var(--white);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1;
  vertical-align: 2px;
}


/* reserva: tres pasos + vista previa del mensaje */
.reserva__grid {
  margin-top: clamp(44px, 5vw, 64px);
  max-width: calc(1120px + var(--gutter) * 2);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.steps { list-style: none; display: grid; gap: clamp(30px, 3.4vw, 44px); }
.step__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.step__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--red);
  border-radius: 50%;
  font-family: var(--f-title);
  font-size: 20px;
  line-height: 1;
  color: var(--red);
  transition: background-color 300ms ease, color 300ms ease;
}
.step.is-done .step__num { background: var(--red); color: var(--white); }
.step__title {
  font-family: var(--f-title);
  font-weight: 400;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.15;
  color: var(--green-ink);
}
.step__hint { margin-top: 2px; font-size: 15px; font-weight: 300; color: var(--ink-soft); }

.chips { display: grid; gap: 8px; padding-left: 58px; }
.chips--days { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 460px; }
.chips--hours { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.chip {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 8px 6px;
  background: var(--white);
  border: 1px solid #ddd8ce;
  cursor: pointer;
  text-align: center;
  line-height: 1.15;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:active { transform: scale(0.96); }
.chip__dow { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.chip__day { font-family: var(--f-title); font-size: 24px; line-height: 1.1; color: var(--ink); }
.chip__mon { font-size: 13px; color: var(--ink-soft); }
.chip__hour { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.chip:has(input:checked) { background: var(--green); border-color: var(--green); color: var(--white); }
.chip:has(input:checked) .chip__dow,
.chip:has(input:checked) .chip__day,
.chip:has(input:checked) .chip__mon { color: var(--white); }
.chip:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.chip:has(input:disabled) { opacity: 0.35; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .chip:not(:has(input:checked)):not(:has(input:disabled)):hover { border-color: var(--green-text); }
}

.step__row { display: flex; flex-wrap: wrap; gap: 16px; padding-left: 58px; }
.field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.field--grow { flex: 1 1 220px; }
.field input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid #ddd8ce;
  border-radius: 0;
  background: var(--white);
  font-size: 16px;
  color: var(--ink);
  transition: border-color 200ms ease;
}
.field input:focus { outline: none; border-color: var(--green-text); }
.field input[aria-invalid="true"] { border-color: var(--red); }
.stepper {
  display: grid;
  grid-template-columns: 48px 56px 48px;
  height: 52px;
  background: var(--white);
  border: 1px solid #ddd8ce;
}
.stepper button {
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--green-ink);
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.stepper button:active { transform: scale(0.9); }
.stepper button:disabled { color: #c9c4ba; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .stepper button:not(:disabled):hover { background: var(--bg-grey, #f4f4f4); }
}
.stepper output {
  display: grid;
  place-items: center;
  font-family: var(--f-title);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.booking__error { margin-top: 10px; padding-left: 58px; color: var(--red); font-size: 14px; font-weight: 500; }

/* columna derecha: días y vista previa */
.preview { position: sticky; top: 104px; display: grid; gap: 18px; }
.week {
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #e3ded4;
}
.week__title { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.week__days { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.week__days li {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 500;
}
.week__days abbr { text-decoration: none; }
.week__days .is-open { background: var(--green); color: var(--white); }
.week__days .is-closed { color: #b7b1a6; border: 1px dashed #d5cfc4; }
.week__days .is-picked { background: var(--red); }
.week__hours { margin-top: 12px; font-family: var(--f-title); font-size: 22px; color: var(--green-ink); text-align: center; }

.chat { background: #ece5dc; border: 1px solid #e0d8cc; }
.chat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--green);
  color: var(--white);
}
.chat__avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; background: var(--white); }
.chat__avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat__name { font-size: 15px; font-weight: 500; line-height: 1.2; }
.chat__phone { font-size: 13px; font-weight: 300; opacity: 0.8; }
.chat__body { padding: 18px 16px 22px; }
.chat__label { margin-bottom: 10px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: #7a7366; text-align: center; }
.bubble {
  position: relative;
  margin-left: auto;
  max-width: 94%;
  padding: 12px 14px 22px;
  background: #dcf1d4;
  border-radius: 10px 0 10px 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #1f2a20;
}
.bubble::after {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  border-width: 0 0 10px 8px;
  border-style: solid;
  border-color: transparent transparent transparent #dcf1d4;
}
.bubble p + p { margin-top: 2px; }
.bubble b { font-weight: 600; }
.bubble__gap { height: 0.7em; }
.bubble b.is-empty { color: #8a9a86; font-weight: 400; font-style: italic; }
.bubble b.flash { animation: flash 700ms var(--ease-out); }
@keyframes flash { from { background: rgba(44, 106, 60, 0.28); } to { background: transparent; } }
.bubble__meta {
  position: absolute;
  right: 10px;
  bottom: 5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #6c7d68;
}
.bubble__meta svg { color: #7b8b78; }
.chat__foot { padding: 0 16px 16px; }
.btn--block { display: flex; width: 100%; }
.chat__foot .btn { gap: 10px; height: 54px; font-size: 15px; }
.chat__foot .btn .icon { width: 18px; height: 18px; }
.chat__note { margin-top: 10px; font-size: 13px; font-weight: 300; text-align: center; color: #5f584c; }
.chat__note a { text-decoration: underline; text-underline-offset: 2px; }

/* fechas especiales: feriados */
.chips--days { row-gap: 18px; padding-top: 4px; }
.chip__tag {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% + 8px);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--green-text);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}
.chip.is-special:not(:has(input:checked)) { border-color: var(--green-text); }
.chip.is-special, .chip.is-closed { padding-top: 18px; }
.chip.is-closed .chip__tag { background: var(--red); }
.chip.is-closed:has(input:disabled) { opacity: 1; background: #f1ede6; border-style: dashed; }
.chip.is-closed .chip__dow, .chip.is-closed .chip__mon { color: #a39d92; }
.chip.is-closed .chip__day {
  color: #a39d92;
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}
.special-notes, .hours-special { list-style: none; display: grid; gap: 6px; }
.special-notes { margin-top: 16px; padding-left: 58px; }
.special-notes li, .hours-special li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.45; }
.special-notes li { color: var(--ink-soft); }
.special-notes b { font-weight: 500; color: var(--ink); }
.special-notes .dot, .hours-special .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); transform: translateY(-1px); }
.special-notes .is-open .dot { background: var(--green-text); }
.hours-special { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.hours-special li { color: rgba(255, 255, 255, 0.85); font-weight: 300; }
.hours-special b { font-weight: 500; color: var(--white); }
.hours-special .is-closed .dot { background: #ff6b5e; }
.hours-special .is-open .dot { background: #3ddc84; }
.hours-special__title { font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6) !important; }

/* pedidos: tipo de pedido */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-left: 58px; }
.mode {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 16px 16px;
  background: var(--white);
  border: 1px solid #ddd8ce;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode:active { transform: scale(0.98); }
.mode__icon { grid-row: span 2; width: 30px; height: 30px; fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mode__title { font-size: 16px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.mode__text { font-size: 13px; font-weight: 300; line-height: 1.35; color: var(--ink-soft); }
.mode:has(input:checked) { background: var(--green); border-color: var(--green); }
.mode:has(input:checked) .mode__title, .mode:has(input:checked) .mode__text { color: var(--white); }
.mode:has(input:checked) .mode__icon { stroke: var(--white); }
.mode:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.mode--alt { grid-column: 1 / -1; padding: 11px 16px; background: transparent; border-style: dashed; }
.mode--alt .mode__icon { grid-row: auto; width: 22px; height: 22px; stroke: var(--ink-soft); }
.mode--alt .mode__title { font-size: 15px; font-weight: 300; }
.mode__link { font-weight: 500; color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.mode--alt:has(input:checked) .mode__link { color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .mode:not(:has(input:checked)):hover { border-color: var(--green-text); }
}

/* pedidos: armar el pedido */
.order { display: grid; gap: 18px; padding-left: 58px; }
.order__cat {
  margin-bottom: 6px;
  font-family: var(--f-title);
  font-size: 18px;
  color: var(--red);
}
.order__group--more summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.order__group--more summary::-webkit-details-marker { display: none; }
.order__group--more summary::after { content: "+"; font-family: var(--f-sans); font-size: 18px; color: var(--ink-soft); transition: transform 200ms var(--ease-out); }
.order__group--more[open] summary::after { transform: rotate(45deg); }
.order__list { display: grid; gap: 4px; }
.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #e6e1d7;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.item.is-on { background: #eef6ee; border-color: var(--green-text); }
.item__name { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.3; }
.badge--xs { margin: 0; padding: 3px 8px 3px 6px; gap: 4px; font-size: 10px; letter-spacing: 0.07em; }
.badge--xs .badge__icon { width: 11px; height: 11px; }
.item__tag { display: inline-block; margin-left: 4px; padding: 2px 6px; border-radius: 999px; font-size: 9px; letter-spacing: 0.06em; color: var(--white); vertical-align: 1px; }
.item__tag--hot { background: var(--red); }
.item__tag--new { background: var(--green-text); }
.item__price { font-size: 14px; font-weight: 500; color: var(--green-text); font-variant-numeric: tabular-nums; }
.qty { display: grid; grid-template-columns: 34px 30px 34px; height: 34px; background: var(--white); border: 1px solid #ddd8ce; }
.qty button { border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: var(--green-ink); transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.qty button:active { transform: scale(0.88); }
.qty button:disabled { color: #cfc9be; cursor: default; }
.qty output { display: grid; place-items: center; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.item.is-on .qty output { color: var(--green-text); }
@media (hover: hover) and (pointer: fine) {
  .qty button:not(:disabled):hover { background: var(--bg-grey, #f4f4f4); }
}
.order__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 14px 0 0 58px;
  padding: 12px 14px;
  background: var(--green);
  color: var(--white);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.order__total b { font-family: var(--f-title); font-size: 24px; font-weight: 400; letter-spacing: 0; }
.field--full { flex: 1 1 100%; }
.field__opt { text-transform: none; letter-spacing: 0; font-weight: 300; }
.bubble .ph { color: #8a9a86; font-style: italic; }

/* cómo funciona el pedido */
.howto {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.howto li { display: inline-flex; align-items: center; gap: 8px; }
.howto__n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-family: var(--f-title);
  font-size: 14px;
}
.howto__note {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 62ch;
  margin-top: 14px;
  padding: 10px 14px;
  background: #e9f5ec;
  border: 1px solid #c8e3cf;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  color: #1f4a2c;
}
.howto__note .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #1fa855; }

/* cotizador de envío */
.envio { display: grid; gap: 10px; }
.addr { position: relative; }
.addr__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid #ddd8ce;
  box-shadow: 0 12px 28px rgba(16, 40, 26, 0.16);
}
.addr__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.3;
}
.addr__list li + li { border-top: 1px solid #f0ece4; }
.addr__list li[aria-selected="true"], .addr__list li:hover { background: #eef6ee; }
.addr__list .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--red); flex: none; }
.addr__list b { display: block; font-weight: 500; }
.addr__list small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-soft); }
.addr__geo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--green-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.addr__geo .icon { width: 14px; height: 14px; }
.quote {
  margin-top: 4px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #e3ded4;
}
.quote__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green-ink);
}
.quote__title .icon { width: 18px; height: 18px; color: var(--red); }
.quote__text { display: grid; gap: 2px; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.quote__text[data-estado="calc"] { display: flex; align-items: center; gap: 8px; }
.quote__price { font-family: var(--f-title); font-size: 26px; line-height: 1.1; color: var(--green-text); }
.quote__price--off { color: var(--red); }
.quote__km { font-size: 14px; color: var(--ink); }
.quote__tip { font-size: 13px; color: var(--ink-soft); }
.quote__spin {
  width: 14px;
  height: 14px;
  border: 2px solid #cfe6d5;
  border-top-color: var(--green-text);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.quote__map {
  position: relative;
  z-index: 0;
  isolation: isolate;
  height: 230px;
  margin-top: 12px;
  background: #e8e4dc;
}
.map-pin { background: none; border: 0; }
.map-pin span {
  position: absolute;
  left: 3px;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid var(--white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.map-pin--casa span { background: var(--red); cursor: grab; }
.map-pin--local span { background: var(--green); }
/* tarifas: regla de distancia, con el tramo de tu dirección en verde y un marcador */
.ruler { margin-top: 16px; }
.ruler__title { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.ruler__prices { list-style: none; display: flex; margin-top: 8px; }
.ruler__prices li {
  padding-bottom: 6px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: #8b8a83;
  transition: color 250ms ease;
}
.ruler__prices li.is-on { font-weight: 600; color: var(--green-text); }
.ruler__bar { position: relative; display: flex; gap: 3px; height: 8px; }
.ruler__seg { background: #e6e1d6; border-radius: 4px; transition: background-color 300ms ease; }
.ruler__seg.is-on { background: var(--green-text); }
.ruler.is-fuera .ruler__seg { background: #efd3cf; }
.ruler__you {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(calc(var(--p, 0) * 1%));
  transition: transform 500ms var(--ease-out);
}
.ruler__you i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: var(--red);
  border: 3px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.ruler__ticks { position: relative; height: 18px; margin-top: 6px; font-size: 11px; color: #8b8a83; font-variant-numeric: tabular-nums; }
.ruler__ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ruler__ticks span:first-child { transform: none; }
.ruler__ticks span:last-child { transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) { .ruler__you { transition: none; } }

/* mapa fijo: no se arrastra; el crédito de OpenStreetMap queda chico y discreto */
.quote__map { cursor: pointer; }
.quote__map .leaflet-control-attribution {
  padding: 0 5px;
  font-size: 9px;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.6);
}
.quote__map .leaflet-control-attribution a { color: #6b6a64; text-decoration: none; }
.quote__label { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

/* aviso "Hoy vendimos todo" (se activa en stock.js) */
.agotado {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  max-width: 600px;
  margin: 28px auto 4px;
  padding: 20px 24px;
  text-align: left;
  background: var(--white);
  border: 1px solid #e3ded4;
  border-left: 4px solid var(--red);
}
.agotado__sello {
  display: grid;
  justify-items: center;
  padding: 8px 12px 6px;
  font-family: var(--f-deco);
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  border: 2px solid currentColor;
  outline: 1px solid currentColor;
  outline-offset: 3px;
  transform: rotate(-6deg);
  opacity: 0.92;
}
.agotado__sello small { margin-top: 4px; font-family: var(--f-sans); font-size: 10px; letter-spacing: 0.18em; }
.agotado__title { font-family: var(--f-title); font-size: 24px; line-height: 1.15; color: var(--green-ink); }
.agotado__body { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.agotado__body b { font-weight: 600; color: var(--green-text); }
.agotado:not([hidden]) .agotado__sello { animation: sello 420ms var(--ease-out) 200ms both; }
@keyframes sello { from { opacity: 0; transform: rotate(-6deg) scale(1.25); } to { opacity: 0.92; transform: rotate(-6deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .agotado:not([hidden]) .agotado__sello { animation: none; } }
@media (max-width: 560px) {
  .agotado { grid-template-columns: 1fr; justify-items: center; gap: 14px; padding: 20px 18px; text-align: center; border-left-width: 1px; border-top: 4px solid var(--red); }
}
.chip--day.is-agotado .chip__mon { color: var(--red); }

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

/* reseñas en el pie: bloque compacto con carrusel */
.reviews {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 20px clamp(28px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(36px, 4vw, 48px);
  padding-bottom: clamp(32px, 4vw, 44px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.reviews__brand { display: flex; align-items: center; gap: 12px; }
.reviews__badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: var(--white); flex: none; }
.reviews__badge .icon { width: 18px; height: 18px; }
.reviews__title { font-family: var(--f-title); font-weight: 400; font-size: 24px; line-height: 1.1; white-space: nowrap; }
.reviews__rating { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; font-size: 13px; font-weight: 300; color: rgba(255, 255, 255, 0.8); }
.reviews__score { font-family: var(--f-title); font-size: 20px; font-weight: 400; color: var(--white); }
.stars { color: #fbbc04; letter-spacing: 1px; font-size: 14px; line-height: 1; }
.stars__off, .stars--empty { color: rgba(255, 255, 255, 0.25); }
.stars--meter { position: relative; display: inline-block; color: rgba(255, 255, 255, 0.25); }
.stars__fill { position: absolute; inset: 0 auto 0 0; width: var(--p, 100%); overflow: hidden; white-space: nowrap; color: #fbbc04; }
.reviews__write { margin-top: 16px; height: 44px; padding: 0 20px; font-size: 13px; gap: 8px; }
.reviews__write .icon { width: 14px; height: 14px; color: #fbbc04; }
.btn--line.reviews__write:hover .icon { color: var(--red); }
.carousel { min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.carousel__track {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 28px) / 3);
  column-gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.carousel__track.is-dragging { cursor: grabbing; }
.carousel__track::-webkit-scrollbar { display: none; }
.review {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.review__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.review__type { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); }
.review__text {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review__who { margin-top: auto; padding-top: 10px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }

/* ==========================================================
   PIE
   ========================================================== */
.footer {
  position: relative;
  overflow-x: clip;
  background-color: var(--green);
  color: var(--white);
  padding: clamp(36px, 4vw, 56px) 0 0;
}
.footer a { transition: color 200ms ease, opacity 200ms ease, background-color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out); }
.footer .icon { width: 16px; height: 16px; }

/* llamada a reservar */
.footer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding-bottom: clamp(40px, 5vw, 56px);
  margin-bottom: clamp(44px, 5vw, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.footer__cta-text {
  font-family: var(--f-title);
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.12;
  max-width: 18em;
}
.footer__cta-sub { margin-top: 8px; font-size: 15px; font-weight: 300; color: rgba(255, 255, 255, 0.75); }
.footer__cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.footer__cta .btn { height: 52px; padding: 0 26px; font-size: 15px; gap: 10px; }
.footer__cta .btn .icon { width: 18px; height: 18px; }
.btn--wa { background: #25d366; color: #0b3d1e; }
@media (hover: hover) and (pointer: fine) {
  .btn--wa:hover { background: #1fbe5b; }
}

.footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  gap: 36px clamp(32px, 4vw, 64px);
}
/* dos filas: Visítanos / Explora arriba, Contacto / Síguenos abajo, siempre alineados */
.footer__brand, .footer__grid > .footer__col:nth-child(2) { grid-row: span 2; }
.footer__logo { width: 168px; }
.footer__tagline {
  margin-top: 14px;
  font-family: var(--f-deco);
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
}
.footer__text { margin-top: 16px; max-width: 32ch; font-size: 15px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, 0.8); }

.social { display: flex; gap: 10px; margin-top: 24px; }
.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}
.social .icon { width: 18px; height: 18px; }
.social a:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .social--ig:hover { background: var(--white); color: #c13584; border-color: var(--white); }
  .social--tt:hover { background: var(--white); color: #000; border-color: var(--white); }
  .social--wa:hover { background: #25d366; color: var(--white); border-color: #25d366; }
}

.footer__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.95);
}
.footer__label .icon { opacity: 0.75; }
.footer__label--gap { margin-top: 32px; }

/* estado en vivo y horario */
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.status__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #c9c3b8; flex: none; }
.status.is-open .status__dot { background: #3ddc84; }
.status.is-open .status__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #3ddc84;
  animation: pulse 1.8s var(--ease-out) infinite;
}
.hours { display: grid; gap: 6px; }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 8px;
  margin: 0 -8px;
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
}
.hours li.is-open { color: rgba(255, 255, 255, 0.92); }
.hours li span:last-child { font-variant-numeric: tabular-nums; }
.hours li.is-today { background: rgba(255, 255, 255, 0.1); color: var(--white); font-weight: 500; }

.footer__address { font-style: normal; font-size: 16px; font-weight: 300; line-height: 1.6; }
.footer__links { display: grid; gap: 10px; margin-top: 12px; }
.footer__links a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 300; color: rgba(255, 255, 255, 0.85); }
.footer__links .icon { opacity: 0.7; }
.footer__nav { display: grid; gap: 10px; }
.footer__nav a { font-size: 15px; font-weight: 300; color: rgba(255, 255, 255, 0.85); }
@media (hover: hover) and (pointer: fine) {
  .footer__links a:hover, .footer__nav a:hover { color: var(--white); }
  .footer__nav a:hover { transform: translateX(3px); }
}

/* barra final con la bandera */
.footer__bottom { margin-top: clamp(56px, 6vw, 80px); }
.flag { display: flex; height: 4px; }
.flag span { flex: 1; }
.flag span:nth-child(1) { background: #1e8a46; }
.flag span:nth-child(2) { background: #f4f1ea; }
.flag span:nth-child(3) { background: #c8261d; }
.footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 22px;
  padding-bottom: 26px;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
}
.footer__bottom a { text-decoration: none; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__legal a { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.85); }
@media (hover: hover) and (pointer: fine) {
  .footer__bottom a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
}

/* verificado en el chat */
.chat__name { display: inline-flex; align-items: center; gap: 5px; }
.verified { width: 16px; height: 16px; flex: none; }

/* ==========================================================
   TEXTURA DE PAPEL Y BORDES HECHOS A MANO
   Para quitar la textura: borrar la clase "con-textura" del <body>.
   ========================================================== */
.con-textura {
  --bg-white: #f9f7f2;   /* blanco papel */
  --bg-grey: #f0ece4;    /* gris papel */
}
.con-textura .tex {
  background-image: url("assets/img/textura-papel.png?v=3");
  background-size: 768px 768px;
  background-repeat: repeat;
}

/* Borde ondulado: la sección crece hacia arriba (un borde transparente donde igual
   se pinta su fondo y su textura) y se recorta con la onda. Es la misma sección,
   sin capa extra encima, así que nunca se nota la unión. */
.edge-top {
  --edge-h: clamp(30px, 4vw, 64px);
  --mask-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25'/%3E%3C/svg%3E");
  position: relative;
  margin-top: calc(var(--edge-h) * -1);
  border-top: var(--edge-h) solid transparent;
  -webkit-mask-image: var(--edge-mask), var(--mask-solid);
  -webkit-mask-size: 100% var(--edge-h), 100% 100%;
  -webkit-mask-position: 0 0, 0 calc(var(--edge-h) - 1px);
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--edge-mask), var(--mask-solid);
  mask-size: 100% var(--edge-h), 100% 100%;
  mask-position: 0 0, 0 calc(var(--edge-h) - 1px);
  mask-repeat: no-repeat;
}
.edge-1 { --edge-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 64%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 64L0.0 28.1L7.4 27.5L17.0 28.2L24.7 27.1L35.5 27.7L45.9 26.4L58.8 25.1L70.9 24.5L78.8 23.6L87.7 23.8L95.7 22.7L106.6 21.4L116.9 19.9L124.2 19.3L135.3 18.4L144.2 17.7L153.9 16.3L165.7 15.7L174.1 14.8L184.3 14.5L195.7 12.9L208.5 12.1L218.1 12.7L226.0 12.2L233.2 12.4L244.8 12.4L257.0 12.4L268.2 13.2L278.7 13.6L290.7 15.1L300.6 15.4L307.9 16.0L318.8 17.4L330.8 17.4L340.1 18.7L347.2 19.0L355.2 19.2L362.6 20.7L370.3 20.6L379.7 22.2L387.2 22.1L397.5 23.4L409.4 24.1L418.1 24.0L427.2 25.1L440.0 24.8L448.0 25.4L456.4 26.2L467.0 26.5L474.0 27.2L483.2 28.0L495.9 29.1L506.0 29.8L517.1 30.1L529.5 32.3L541.7 33.7L551.1 34.2L558.7 35.4L566.1 35.6L574.3 36.7L583.3 37.7L590.3 38.8L598.0 40.0L605.1 41.6L615.8 41.9L624.3 43.2L633.5 43.8L645.6 46.2L655.4 46.2L662.9 46.2L672.0 47.0L683.9 47.3L691.1 48.6L701.2 47.6L711.5 47.4L721.7 48.6L733.8 47.8L742.4 47.0L750.4 47.2L760.6 46.7L769.6 45.4L781.5 45.7L793.6 44.8L805.5 44.0L813.8 43.2L823.0 42.0L830.1 42.1L838.7 42.3L851.4 41.5L864.1 42.0L876.8 40.9L885.1 40.6L893.3 40.5L904.0 41.4L916.1 40.8L927.0 41.2L934.5 40.9L947.0 41.0L958.5 40.4L966.5 40.6L975.5 40.4L988.4 39.4L997.8 39.8L1009.1 38.2L1016.9 37.7L1029.3 37.9L1037.2 37.5L1050.1 36.4L1059.2 35.7L1067.0 34.4L1079.8 34.5L1089.9 34.4L1099.5 33.9L1111.5 32.5L1120.0 32.4L1128.5 32.7L1137.0 32.4L1144.8 33.1L1153.9 32.5L1164.4 33.4L1173.9 33.8L1184.0 33.6L1194.1 33.4L1203.7 34.2L1210.8 35.5L1218.8 35.5L1230.1 36.3L1239.1 36.7L1249.4 37.7L1257.1 37.7L1265.6 37.7L1277.2 38.4L1287.6 39.0L1300.0 38.7L1310.7 38.7L1320.8 38.8L1330.5 38.3L1340.4 38.5L1351.6 37.8L1364.2 36.2L1374.6 36.5L1386.6 34.5L1394.3 34.4L1401.8 33.6L1409.2 33.6L1420.9 33.1L1428.8 32.4L1439.8 30.9L1440 30.9L1440 64Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.edge-2 { --edge-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 64%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 64L0.0 14.6L7.0 14.2L17.5 13.0L29.3 12.6L37.7 12.1L50.7 13.1L62.9 13.3L70.1 13.3L80.1 13.8L92.8 15.4L100.8 16.9L108.5 17.9L118.2 18.5L127.3 19.3L135.4 19.4L147.6 20.7L159.3 21.2L172.1 22.5L183.6 22.4L194.1 22.2L201.8 21.7L213.8 20.9L226.3 21.5L235.8 20.6L245.5 20.5L258.5 20.6L265.6 20.3L276.9 21.9L286.9 21.7L297.2 22.7L305.6 23.0L315.9 23.6L324.0 23.4L333.1 24.9L342.1 24.7L351.0 24.1L358.4 25.0L370.0 24.1L381.1 23.9L393.5 23.4L403.0 22.6L415.7 20.8L428.0 19.6L437.3 18.5L449.6 17.6L457.0 18.2L468.6 17.5L480.6 17.0L489.2 17.6L498.7 18.0L506.1 18.8L518.5 20.7L530.0 21.1L538.5 22.6L548.7 23.2L555.8 23.0L567.9 24.7L580.1 25.2L589.7 25.5L601.8 25.5L612.0 25.7L623.6 25.6L634.7 27.3L641.9 27.1L652.7 28.1L663.2 28.0L672.7 29.9L685.1 30.3L692.7 31.3L699.8 32.9L707.7 34.8L718.6 35.7L728.8 37.9L738.8 39.5L746.8 40.8L756.1 43.0L766.4 43.5L777.6 45.9L789.3 46.7L796.3 46.6L803.7 47.3L811.7 47.4L820.3 47.4L829.1 46.4L838.5 46.7L850.9 46.4L860.9 46.6L873.6 45.9L884.2 46.6L895.6 47.5L904.5 47.4L914.6 47.7L922.0 48.4L934.9 48.3L943.8 49.6L951.4 48.6L958.9 49.8L970.4 49.3L981.1 48.5L992.0 48.7L1002.1 47.9L1011.5 46.9L1018.8 46.4L1027.3 45.9L1039.2 44.5L1048.9 42.8L1058.3 42.1L1069.0 41.8L1076.6 40.5L1086.5 40.3L1098.9 40.0L1109.6 40.0L1120.6 40.4L1131.8 40.6L1140.3 41.4L1149.6 41.5L1161.6 42.7L1174.5 42.1L1183.4 42.9L1192.7 42.9L1203.0 42.9L1211.8 44.0L1223.3 43.1L1231.0 43.6L1242.2 42.1L1251.2 42.3L1262.3 41.4L1275.0 41.2L1283.5 41.8L1291.4 41.6L1299.6 41.7L1308.3 41.7L1320.9 42.5L1330.6 43.3L1339.2 43.3L1348.6 44.2L1356.7 45.7L1363.9 46.0L1376.5 46.5L1383.6 46.4L1390.8 46.7L1402.1 46.0L1409.1 46.2L1416.7 45.4L1426.4 45.5L1435.6 43.5L1440 43.5L1440 64Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.edge-3 { --edge-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 64%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 64L0.0 36.0L8.3 36.0L15.5 34.9L26.4 34.5L34.7 33.9L46.5 32.3L58.4 32.8L67.4 31.9L80.2 32.1L87.7 31.9L99.8 33.1L111.7 33.8L121.9 34.7L131.1 34.6L143.1 35.3L155.3 35.8L166.5 35.3L174.9 35.7L182.4 35.7L190.0 35.7L200.8 35.6L210.0 35.1L218.6 35.9L229.5 35.1L237.5 35.0L245.5 34.4L258.4 34.7L268.8 34.8L280.8 35.2L289.2 34.4L298.1 35.1L306.4 36.4L318.6 36.1L329.6 36.6L342.0 37.0L350.6 36.7L361.0 36.6L371.5 37.2L380.9 35.7L393.9 35.1L401.4 33.8L409.1 33.8L420.9 32.2L428.2 31.3L441.2 30.1L454.0 29.2L461.1 28.4L472.2 27.2L480.8 26.7L488.5 26.0L498.2 26.3L510.4 24.8L520.4 24.3L532.9 24.8L541.7 24.0L552.4 22.7L563.9 22.5L575.6 21.5L582.6 20.5L589.7 20.7L602.0 19.2L610.8 17.1L623.1 17.0L630.6 15.6L638.0 15.3L649.6 13.6L659.5 13.7L668.1 13.8L677.6 12.8L687.9 13.7L696.1 13.4L709.0 14.6L718.7 15.1L726.4 15.2L735.4 16.5L743.8 16.6L751.2 17.8L759.6 18.8L771.8 18.5L780.2 19.8L788.5 19.5L801.1 20.8L810.9 21.5L822.8 21.3L830.3 22.1L839.9 22.8L851.3 24.0L864.2 24.6L873.6 26.1L885.8 27.7L893.9 29.3L903.4 30.7L911.9 33.1L921.6 34.7L931.9 35.4L944.9 38.7L957.7 40.7L969.8 41.1L979.7 42.2L989.1 42.7L998.4 44.6L1007.0 44.7L1016.7 44.6L1029.4 45.8L1039.8 45.7L1047.7 45.3L1060.5 46.1L1070.8 46.7L1078.1 46.8L1088.1 47.7L1096.1 48.3L1103.6 47.6L1114.1 48.9L1122.5 48.5L1134.9 49.2L1145.5 49.9L1155.0 49.8L1165.1 50.1L1173.3 49.5L1181.8 48.5L1192.8 47.5L1201.7 47.3L1209.1 46.0L1222.1 45.2L1229.6 43.2L1238.1 43.2L1250.4 41.7L1259.6 39.7L1271.6 39.4L1282.3 39.0L1293.2 37.0L1305.1 36.9L1316.1 37.4L1323.9 36.0L1331.6 36.4L1340.2 36.2L1351.5 35.2L1362.3 34.7L1372.3 35.0L1384.3 33.0L1393.9 32.4L1400.9 32.5L1411.7 30.7L1423.2 30.0L1432.7 28.4L1440 28.4L1440 64Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.edge-4 { --edge-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 64%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 64L0.0 20.9L7.7 20.2L15.8 21.0L26.8 21.1L34.8 21.8L46.9 21.4L59.4 21.8L71.6 21.9L84.2 23.2L97.0 23.2L109.7 24.2L116.9 24.5L126.1 25.4L136.1 27.0L145.4 28.0L155.0 30.0L167.1 32.1L174.9 34.5L182.4 35.7L193.7 38.9L202.9 39.3L212.7 41.4L221.6 43.1L231.0 43.7L242.1 44.9L252.5 45.1L262.4 45.7L275.1 46.0L287.7 45.8L294.9 44.9L303.3 44.9L315.0 45.1L322.4 44.1L331.3 44.1L341.7 44.5L354.6 45.5L366.1 45.7L375.9 45.6L385.2 47.2L398.0 47.1L409.0 46.3L422.0 47.1L430.8 46.2L439.5 46.0L448.2 45.1L460.7 42.7L472.1 40.9L481.1 39.9L490.4 39.2L498.5 38.0L507.9 37.1L519.1 35.5L531.3 34.4L543.8 34.6L552.7 35.4L561.9 35.1L573.0 35.6L584.9 36.4L594.2 37.1L603.5 37.7L612.3 38.6L625.1 40.0L636.7 40.6L645.0 40.8L652.7 39.9L660.3 40.7L670.0 40.4L678.3 40.6L688.0 39.1L698.8 38.9L710.5 38.6L719.4 39.3L730.4 39.2L738.1 38.9L750.6 39.7L760.9 40.8L769.4 40.9L781.7 42.6L791.0 42.7L798.0 43.4L809.7 44.6L819.0 44.4L831.0 44.5L839.9 43.3L851.6 42.7L863.1 41.9L872.8 40.1L881.1 38.7L892.6 37.3L901.1 35.0L912.9 33.7L921.6 31.4L933.5 29.3L945.4 28.2L953.7 27.0L962.6 26.3L970.9 26.1L979.0 24.7L987.4 24.8L1000.0 23.6L1011.6 23.4L1020.4 23.2L1033.4 21.6L1045.5 20.8L1052.6 20.3L1065.5 19.0L1075.8 18.1L1084.6 16.4L1094.2 15.5L1106.7 14.4L1116.9 13.4L1127.9 12.1L1135.4 12.4L1142.6 12.2L1150.4 12.3L1159.9 13.3L1169.1 13.0L1179.1 14.7L1190.7 15.5L1202.7 17.8L1209.9 18.6L1221.9 20.0L1229.3 20.8L1237.3 22.3L1247.9 23.7L1257.1 23.2L1264.6 24.3L1277.2 24.2L1288.1 24.6L1300.4 25.3L1310.8 24.8L1320.6 25.2L1328.0 24.1L1337.8 25.1L1350.0 24.8L1362.9 26.5L1374.7 26.5L1383.3 28.1L1396.2 29.1L1407.1 30.0L1415.1 30.7L1424.3 30.7L1435.0 30.9L1440 30.9L1440 64Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.edge-5 { --edge-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 64%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M1440.0 64L1440.0 28.1L1432.6 27.5L1423.0 28.2L1415.3 27.1L1404.5 27.7L1394.1 26.4L1381.2 25.1L1369.1 24.5L1361.2 23.6L1352.3 23.8L1344.3 22.7L1333.4 21.4L1323.1 19.9L1315.8 19.3L1304.7 18.4L1295.8 17.7L1286.1 16.3L1274.3 15.7L1265.9 14.8L1255.7 14.5L1244.3 12.9L1231.5 12.1L1221.9 12.7L1214.0 12.2L1206.8 12.4L1195.2 12.4L1183.0 12.4L1171.8 13.2L1161.3 13.6L1149.3 15.1L1139.4 15.4L1132.1 16.0L1121.2 17.4L1109.2 17.4L1099.9 18.7L1092.8 19.0L1084.8 19.2L1077.4 20.7L1069.7 20.6L1060.3 22.2L1052.8 22.1L1042.5 23.4L1030.6 24.1L1021.9 24.0L1012.8 25.1L1000.0 24.8L992.0 25.4L983.6 26.2L973.0 26.5L966.0 27.2L956.8 28.0L944.1 29.1L934.0 29.8L922.9 30.1L910.5 32.3L898.3 33.7L888.9 34.2L881.3 35.4L873.9 35.6L865.7 36.7L856.7 37.7L849.7 38.8L842.0 40.0L834.9 41.6L824.2 41.9L815.7 43.2L806.5 43.8L794.4 46.2L784.6 46.2L777.1 46.2L768.0 47.0L756.1 47.3L748.9 48.6L738.8 47.6L728.5 47.4L718.3 48.6L706.2 47.8L697.6 47.0L689.6 47.2L679.4 46.7L670.4 45.4L658.5 45.7L646.4 44.8L634.5 44.0L626.2 43.2L617.0 42.0L609.9 42.1L601.3 42.3L588.6 41.5L575.9 42.0L563.2 40.9L554.9 40.6L546.7 40.5L536.0 41.4L523.9 40.8L513.0 41.2L505.5 40.9L493.0 41.0L481.5 40.4L473.5 40.6L464.5 40.4L451.6 39.4L442.2 39.8L430.9 38.2L423.1 37.7L410.7 37.9L402.8 37.5L389.9 36.4L380.8 35.7L373.0 34.4L360.2 34.5L350.1 34.4L340.5 33.9L328.5 32.5L320.0 32.4L311.5 32.7L303.0 32.4L295.2 33.1L286.1 32.5L275.6 33.4L266.1 33.8L256.0 33.6L245.9 33.4L236.3 34.2L229.2 35.5L221.2 35.5L209.9 36.3L200.9 36.7L190.6 37.7L182.9 37.7L174.4 37.7L162.8 38.4L152.4 39.0L140.0 38.7L129.3 38.7L119.2 38.8L109.5 38.3L99.6 38.5L88.4 37.8L75.8 36.2L65.4 36.5L53.4 34.5L45.7 34.4L38.2 33.6L30.8 33.6L19.1 33.1L11.2 32.4L0.2 30.9L0.0 30.9L0.0 64Z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }

/* ==========================================================
   PÁGINA LEGAL (política de privacidad)
   ========================================================== */
.legal-header { background: var(--green); color: var(--white); }
.legal-header__inner { height: 92px; display: flex; align-items: center; justify-content: space-between; }
.legal-header .brand { width: 132px; }
.legal-back { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
@media (hover: hover) and (pointer: fine) { .legal-back:hover { opacity: 0.75; } }
.legal { padding-top: clamp(56px, 7vw, 96px); }
.legal__title {
  margin-top: 12px;
  font-family: var(--f-title);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  color: var(--green-ink);
}
.legal__updated { margin: 10px 0 36px; font-size: 14px; color: var(--ink-soft); }
.legal h2 {
  margin: 40px 0 10px;
  font-family: var(--f-title);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--green-ink);
}
.legal p, .legal li { font-size: 17px; font-weight: 300; line-height: 1.7; }
.legal p + p { margin-top: 12px; }
.legal ul { display: grid; gap: 12px; margin-top: 8px; }
.legal li { position: relative; padding-left: 20px; }
.legal li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.legal strong { font-weight: 500; }
.legal a:not(.btn) { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.legal__back { margin-top: 48px !important; }
.legal-footer { background: var(--green); color: var(--white); }

/* ==========================================================
   ANIMACIONES: aparecer al bajar
   ========================================================== */
.js .hero__title .hero__line,
.js .hero__sub,
.js .hero__cta {
  opacity: 0;
  transform: translateY(28px);
}
.is-loaded .hero__title .hero__line,
.is-loaded .hero__sub,
.is-loaded .hero__cta {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), background-color 220ms ease;
}
.is-loaded .hero__line--1 { transition-delay: 150ms; }
.is-loaded .hero__line--2 { transition-delay: 260ms; }
.is-loaded .hero__sub { transition-delay: 420ms; }
.is-loaded .hero__cta { transition-delay: 560ms; }
.is-loaded .hero__cta:active { transform: scale(0.97); transition-delay: 0ms; }
.js .site-header { opacity: 0; }
.is-loaded .site-header { opacity: 1; transition: opacity 900ms ease 100ms, transform 420ms var(--ease-out), background-color 420ms ease; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-soft), transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html:not(.lenis) { scroll-behavior: auto; }
  .hero__video { animation: none; transform: none; }
  .js [data-reveal],
  .js .hero__title .hero__line, .js .hero__sub, .js .hero__cta { transform: none !important; }
  .pulse::after { animation: none; opacity: 0; }
  .quote__spin { animation-duration: 1.4s; }
  .panel .dish, .panel.is-active .dish { transition: opacity 200ms ease !important; transform: none !important; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 960px) {
  .reserva__grid { grid-template-columns: 1fr; max-width: 640px; }
  .preview { position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .footer__brand { grid-column: 1 / -1; grid-row: auto; }
  .reviews { grid-template-columns: 1fr; }
  .carousel__track { grid-auto-columns: calc((100% - 14px) / 2); }
}

@media (max-width: 900px) {
  .historia__grid { grid-template-columns: 1fr; }
  .historia__plate { max-width: 300px; order: 2; }
  .proceso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proceso__item:nth-child(even) { margin-top: 40px; }
  .proceso__item:nth-child(n+3) { margin-top: 0; }
  .proceso__item:nth-child(4) { margin-top: 40px; }
  .carta__watermark { opacity: 0.05; right: -120px; }
}

@media (max-width: 767px) {
  :root { --topbar-h: 0px; }
  .topbar { display: none; }
  .nav { display: none; }
  .burger { display: block; }
  .navbar { height: 100px; padding-top: 6px; }
  .is-scrolled .navbar { height: 64px; padding-top: 0; }
  .brand { width: 124px; }
  .is-scrolled .brand { width: 88px; }
  .burger { margin-right: -9px; }
  .hero__content { padding-top: 120px; }
  .hero__line--1 { font-size: 17.4vw; }
  .hero__line--2 { font-size: 19.6vw; }
  .hero__sub { font-size: 21px; margin-top: 20px; }
  .hero__sub { letter-spacing: 0.06em; }
  .tabs {
    width: auto;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    scroll-padding: 0 var(--gutter);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .dishes, .dishes--compact { grid-template-columns: 1fr; }
  .dishes { gap: 26px; }
  .dish--featured { margin: 0 -14px; padding: 18px 14px; }
  .dishes--compact { gap: 14px; }
  .dish__name { font-size: 15px; }
  .kicker::before, .kicker::after { width: 32px; }
  .chips, .step__row, .booking__error, .special-notes, .modes, .order { padding-left: 0; }
  .order__total { margin-left: 0; }
  .modes { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .howto { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
  .quote__map { height: 200px; }
  .mode--alt { grid-column: auto; }
  .item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .item__price { grid-row: 2; grid-column: 1; }
  .item .qty { grid-row: 1 / span 2; grid-column: 2; }
  .carousel__track { grid-auto-columns: 86%; }
  .step__num { width: 36px; height: 36px; font-size: 18px; }
  .chips--days { grid-template-columns: repeat(4, 1fr); }
  .chips--hours { grid-template-columns: repeat(4, 1fr); }
  .chip__day { font-size: 22px; }
  .footer__grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 36px; }
  .footer__grid > .footer__col:nth-child(2) { grid-row: auto; }
  .footer__col--visita { order: 1; }
  .footer__col--contacto { order: 2; }
  .footer__col--explora { order: 3; }
  .footer__col--siguenos { order: 4; }
  .footer__cta { flex-direction: column; align-items: flex-start; }
  .footer__cta-actions, .footer__cta .btn { width: 100%; }
  .footer__bottom-inner { flex-direction: column; text-align: center; }
}

/* aviso de cookies (consent.js) */
.cookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  max-width: 560px;
  margin-inline: auto;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #e3ded4;
  border-top: 3px solid var(--green);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.cookies p { flex: 1 1 260px; }
.cookies a { color: var(--green-text); text-decoration: underline; text-underline-offset: 2px; }
.cookies__btns { display: flex; gap: 8px; }
.cookies .btn { height: 40px; padding-inline: 16px; font-size: 13px; }
.legal--404 { min-height: 60vh; display: grid; align-items: center; }
.legal--404 .btn--red { padding: 16px 34px; font-size: 15px; }
.legal--404 .legal__back { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* al sumar una pizza destacada: el sello salta y suelta chispas */
.item .badge { position: relative; }
.badge.is-pop { animation: sello-pop 420ms var(--ease-out); }
@keyframes sello-pop { 0% { transform: scale(1); } 35% { transform: scale(1.28) rotate(-4deg); } 100% { transform: scale(1); } }
.chispas { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.chispas i {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: chispa 800ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.chispas--hot i:nth-child(odd) { background: #d62a20; }
.chispas--hot i:nth-child(even) { background: #f2a33a; }
.chispas--new i:nth-child(odd) { background: var(--green-text); }
.chispas--new i:nth-child(even) { background: #9fd3a8; }
.chispas i:nth-child(1) { --a: 0deg; }   .chispas i:nth-child(2) { --a: 36deg; }
.chispas i:nth-child(3) { --a: 72deg; }  .chispas i:nth-child(4) { --a: 108deg; }
.chispas i:nth-child(5) { --a: 144deg; } .chispas i:nth-child(6) { --a: 180deg; }
.chispas i:nth-child(7) { --a: 216deg; } .chispas i:nth-child(8) { --a: 252deg; }
.chispas i:nth-child(9) { --a: 288deg; } .chispas i:nth-child(10) { --a: 324deg; }
@keyframes chispa {
  0% { transform: rotate(var(--a)) translateX(6px) scale(1); opacity: 1; }
  65% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(48px) scale(0.5); opacity: 0; }
}
/* con "reducir movimiento": sin saltos ni chispas que vuelan, solo un brillo */
@media (prefers-reduced-motion: reduce) {
  .badge.is-pop { animation: sello-brillo 700ms ease; }
  @keyframes sello-brillo { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 6px rgba(242, 163, 58, 0.55); } }
  .chispas { display: none; }
}