/* =====================================================================
   GIUSEPPINA FIRENZE — Landing Page Styles
   ===================================================================== */

/* ── Lemon Milk (local font — colocar archivo en assets/fonts/) ── */
@font-face {
  font-family: 'Lemon Milk';
  src: url('assets/fonts/LemonMilk-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Design Tokens ── */
:root {
  /* Los 5 colores salen del manual de marca, pagina 14 (gama cromatica).
     No cambiarlos por valores "parecidos": son los oficiales de la marca. */
  --color-primary: #75152D;            /* BIKIN RED   RGB (117, 21, 45) */
  /* Mismo bordo en RGB suelto, para las transparencias. Un solo lugar de
     verdad, igual que --color-ganache-rgb mas abajo. */
  --color-primary-rgb: 117, 21, 45;
  --color-primary-dark: #550F1B;       /* CABERNET    RGB (85, 15, 27) */
  --color-ganache: #360E14;            /* GANACHE     RGB (54, 14, 20) */
  /* Mismo ganache en RGB suelto, para poder darle transparencia sin repetir
     el valor. Un solo lugar de verdad para los velos del sitio. */
  --color-ganache-rgb: 54, 14, 20;
  /* Velo para tapar fotos. Ganache y no bordó a propósito: el bordó sobre una
     foto clara se lava y queda malva, y además le mete dominante rosa a la
     comida. El bordó se reserva para fondos planos, donde sí se ve fiel. */
  --scrim: rgba(var(--color-ganache-rgb), 0.85);
  /* ALMOND OIL: el PDF del manual tiene este RGB MAL TIPEADO (le puso el de
     CABERNET). El valor sale de la paleta de Canva de las duenas, que es la
     unica fuente que lo tiene bien. Los otros 4 colores SI salen del PDF. */
  --color-almond-oil: #F2E5C6;         /* ALMOND OIL  RGB (242, 229, 198) */
  --color-coconut-milk: #F3EEE6;       /* COCONUT MILK RGB (243, 238, 230) */
  --color-dark: #1A1A1A;
  --color-cream: #FAF8F5;
  --color-light: #F0EDE8;
  --color-muted: #5c5c5c;
  --color-white: #FFFFFF;
  --color-placeholder: #D8D0C8;

  --font-display: 'Lemon Milk', 'Montserrat', sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 120px;

  --radius: 2px;
  /* --ease es SOLO la curva. --transition ya incluye duración:
     usalo como `propiedad var(--transition)`, nunca con una duración
     propia adelante o el segundo tiempo se lee como delay. */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition: 0.4s var(--ease);
  --transition-fast: 0.2s ease;

  --navbar-h: 72px;
  --container-max: 1200px;
}

#hero, #productos, #encargos, #ubicacion {
  scroll-margin-top: var(--navbar-h);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background-color: var(--color-cream);
  color: var(--color-dark);
  line-height: 1.6;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ── Utilities ── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

/* 0.75 y no 0.6: sobre el bordó de Encargos, 0.6 daba 4.4:1 y no llega al 4.5:1 que pide WCAG AA */
.label--light { color: rgba(255,255,255,0.75); }

/* Visible para lectores de pantalla y buscadores, no para la vista.
   No usar display:none ni visibility:hidden — eso lo esconde de todos. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.heading-display {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.heading-display em {
  font-style: normal;
  font-weight: 400;
  opacity: 0.75;
}

.heading-display--light { color: var(--color-white); }

/* ── Foco de teclado ──
   :focus-visible aparece al navegar con Tab pero no al hacer click con
   el mouse. Sobre los fondos oscuros el bordó no se distingue, así que
   ahí el contorno pasa a blanco. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.hero :focus-visible,
.page-hero :focus-visible,
.encargos :focus-visible,
.footer :focus-visible {
  outline-color: var(--color-white);
}

.navbar__link:focus-visible::after { left: 0; right: 0; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 1.5px solid currentColor;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
}

.btn__icon { width: 18px; height: 18px; flex-shrink: 0; }

.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.3);
}

.btn--outline {
  background: transparent;
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.btn--outline:hover {
  background: var(--color-dark);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn--white {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);
}
.btn--white:hover {
  background: transparent;
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.btn--lg { padding: 18px 44px; font-size: 14px; }

/* ── Scroll Reveal ──
   Sólo se esconde si hay JS (la clase .js la pone un script inline en el
   <head>, y se saca sola si main.js no carga o falla). Sin eso, el
   contenido se ve normal en vez de quedar la página en blanco. */
.js .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js .reveal-hero {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.js .reveal-hero.is-visible { opacity: 1; transform: translateY(0); }

/* ── Movimiento reducido ──
   Para quien lo pidió en su sistema operativo: nada de animaciones ni
   scroll suave, y el contenido arranca visible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal,
  .js .reveal-hero {
    opacity: 1;
    transform: none;
  }

  .hero__scroll-hint { display: none; }
}

/* =====================================================================
   NAVBAR
   ===================================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--navbar-h);
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.navbar.scrolled {
  border-bottom-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}

.navbar__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-sm);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.navbar__logo-link { display: flex; align-items: center; }
.navbar__logo { height: 62px; width: 62px; object-fit: contain; }

.navbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-left: auto;
}

.navbar__link {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--color-dark);
  position: relative;
  padding-bottom: 2px;
}

.navbar__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 1px;
  background: var(--color-primary);
  transition: left var(--transition-fast), right var(--transition-fast);
}

.navbar__link:hover::after { left: 0; right: 0; }

.navbar__cta { margin-left: var(--space-md); font-size: 12px; padding: 10px 22px; }
.navbar__cta:hover {
  background: var(--color-ganache) !important;
  border-color: var(--color-ganache) !important;
  color: var(--color-coconut-milk) !important;
}

.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}

.navbar__hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-dark);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Hamburguesa → X. Se engancha del aria-expanded que ya escribe el JS,
   así el estado visual y el estado accesible no se pueden desincronizar.
   Los 6.5px son el paso entre barras: 1.5px de alto + 5px de gap. */
.navbar__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.navbar__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.navbar__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  /* Reserva arriba el navbar fijo y abajo la zona de la rayita de scroll,
     para que el centrado del contenido no los pise. */
  padding: var(--navbar-h) 0 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-primary-dark);
  background-image: url('assets/hero.jpg');
  background-size: cover;
  background-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26,4,12,0.55) 0%,
    rgba(26,4,12,0.45) 60%,
    rgba(26,4,12,0.7) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 var(--space-md);
}

.hero__imagotipo {
  width: min(930px, 88vw);
  height: auto;
  object-fit: contain;
  margin-bottom: var(--space-xs);
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.3));
}

.hero__tagline {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-top: -4px;
}

/* Hero reveal animation — el estado base está junto a .reveal, arriba */
.js .reveal-hero:nth-child(1) { transition-delay: 0.2s; }
.js .reveal-hero:nth-child(2) { transition-delay: 0.45s; }
.js .reveal-hero:nth-child(3) { transition-delay: 0.65s; }
.js .reveal-hero:nth-child(4) { transition-delay: 0.85s; }

/* Scroll hint */
.hero__scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero__scroll-hint span {
  display: block;
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5));
  animation: scrollLine 2s ease-in-out infinite;
  margin: 0 auto;
}
@keyframes scrollLine {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}

/* =====================================================================
   PRODUCTOS
   ===================================================================== */
.productos {
  padding: var(--space-xl) 0;
  background: var(--color-light);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-header .label { justify-content: center; }

.productos__categoria-group {
  margin-bottom: var(--space-xl);
}

.productos__categoria-group:last-child {
  margin-bottom: 0;
}

.productos__categoria {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: var(--space-md);
}

.productos__proximamente {
  text-align: center;
  color: var(--color-muted);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Una categoría sin productos no merece el mismo peso que una llena: el título
   se atenúa y se pega al "Próximamente" para que los dos se lean como una sola
   unidad, en vez de como un encabezado al que le falta el contenido. */
.productos__categoria-group:has(> .productos__proximamente) {
  margin-bottom: var(--space-lg);
}

.productos__categoria-group:has(> .productos__proximamente) .productos__categoria {
  margin-bottom: var(--space-xs);
  opacity: 0.55;
}

.productos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

/* Categorías que no llenan la fila de 3: en vez de dejar tarjetas huérfanas
   pegadas a la izquierda, se baja la cantidad de columnas y se centra el
   conjunto. El max-width mantiene el tamaño de tarjeta de la grilla de 3
   (357px), así todas las categorías se ven parejas entre sí. */
.productos__grid:has(> .producto-card:only-child) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 360px;
  margin-inline: auto;
}

.productos__grid:has(> .producto-card:nth-child(2):last-child),
.productos__grid:has(> .producto-card:nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 752px;
  margin-inline: auto;
}

/* Grilla larga que termina con una sola tarjeta en la última fila (19 productos
   = 6 filas de 3 + 1): se centra en vez de quedar pegada a la izquierda.
   El :not(:only-child) protege a las categorías de una sola tarjeta, que ya
   usan una columna y romperían con un grid-column: 2. Sólo arriba de 1024px,
   que es donde la grilla tiene realmente 3 columnas. */
@media (min-width: 1025px) {
  .productos__grid > .producto-card:last-child:nth-child(3n + 1):not(:only-child) {
    grid-column: 2;
  }
}

.producto-card { cursor: pointer; }

.producto-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
  background: var(--color-placeholder);
}

.producto-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s var(--ease);
}

.producto-card:hover .producto-card__image {
  transform: scale(1.06);
}

.producto-card__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  margin-top: var(--space-sm);
  letter-spacing: 0.01em;
}

/* Descripción — desktop: se superpone a la foto en hover */
.producto-card { position: relative; }

.producto-card__desc {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  text-align: center;
  background: var(--scrim);
  color: var(--color-white);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.producto-card:hover .producto-card__desc,
.producto-card:focus-visible .producto-card__desc { opacity: 1; }

/* ── Producto sin foto todavía ──
   Recuadro con el isotipo muy atenuado, en vez de una imagen rota o un gris
   plano. Como no hay foto que mirar, la descripción se muestra siempre: sin
   eso la tarjeta sería un cuadro vacío con un nombre y nada más. */
.producto-card__image-wrap--sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
  border: 1px solid rgba(var(--color-primary-rgb), 0.10);
}

.producto-card__iso {
  width: 34%;
  height: auto;
  opacity: 0.16;
}

.producto-card:has(.producto-card__image-wrap--sin-foto) .producto-card__desc {
  position: static;
  aspect-ratio: auto;
  display: block;
  padding: 0;
  margin-top: var(--space-xs);
  text-align: left;
  background: none;
  color: var(--color-muted);
  opacity: 1;
  pointer-events: auto;
}

.producto-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* =====================================================================
   ENCARGOS (CTA)
   ===================================================================== */
.encargos {
  background: var(--color-primary);
  padding: var(--space-lg) var(--space-md);
  overflow: hidden;
  position: relative;
}

.encargos__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  position: relative;
  z-index: 1;
}

.encargos__sub {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  background: var(--color-ganache);
  padding: var(--space-lg) 0 var(--space-md);
  color: rgba(255,255,255,0.6);
}

.footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  padding-bottom: var(--space-md);
}

.footer__logo {
  height: auto;
  width: min(260px, 70vw);
  opacity: 0.9;
}

.footer__tagline {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
}

.footer__fatto {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-style: italic;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
  margin-top: 8px;
}

.footer__divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 0 0 var(--space-md);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.footer__location {
  font-size: 13px;
  letter-spacing: 0.05em;
}

.footer__instagram {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.6);
  transition: color var(--transition-fast);
}

.footer__instagram:hover { color: var(--color-white); }

.footer__copy {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.03em;
}

/* =====================================================================
   UBICACIÓN
   ===================================================================== */
.ubicacion {
  padding: var(--space-xl) 0;
  background: var(--color-cream);
}

.ubicacion__grid {
  display: grid;
  /* minmax(0, …) evita que una palabra larga estire la columna
     más allá del contenedor (ver "ENCONTRANOS" en mobile) */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--space-lg);
  align-items: center;
}

/* El título de esta sección vive en una columna angosta: se le baja
   el techo para que "en Jesús María" entre en una sola línea.
   Única media query min-width del archivo — el resto es desktop-first. */
@media (min-width: 769px) {
  .ubicacion .heading-display { font-size: clamp(1.75rem, 3.4vw, 3rem); }
}

.ubicacion__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.ubicacion__address {
  font-size: 18px;
  font-weight: 300;
  color: #444;
  line-height: 1.7;
}

.ubicacion__horarios {
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: var(--space-md);
}

.ubicacion__horarios-titulo {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.horarios {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.horarios__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: 15px;
  font-weight: 300;
  color: #444;
}

.horarios__fila dt { font-weight: 400; }
.horarios__fila dd { text-align: right; }
.horarios__fila--cerrado { color: var(--color-muted); }

.ubicacion__btn { align-self: flex-start; }

.ubicacion__map {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid var(--color-light);
}

.ubicacion__map iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  filter: grayscale(15%) contrast(1.02);
}

/* =====================================================================
   NAVBAR — ACTIVE LINK
   ===================================================================== */
.navbar__link--active::after {
  left: 0;
  right: 0;
}

/* =====================================================================
   PAGE HERO (nosotros.html y otras páginas internas)
   ===================================================================== */
.page-hero {
  position: relative;
  height: 58vh;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-primary-dark);
  background-image: url('assets/hero.jpg');
  background-size: cover;
  background-position: center 30%;
  margin-top: var(--navbar-h);
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26,4,12,0.3) 0%,
    rgba(26,4,12,0.65) 100%
  );
}

.page-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-lg);
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-top: var(--space-sm);
}

.page-hero__title em {
  font-style: normal;
  opacity: 0.65;
}

/* =====================================================================
   HISTORIA — MISIÓN / VISIÓN
   ===================================================================== */
.historia-mision {
  padding: var(--space-xl) 0;
  background: var(--color-cream);
}

.historia-mision__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.historia-mision__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.historia-body {
  font-size: 16px;
  font-weight: 300;
  color: #444;
  line-height: 1.8;
  max-width: 520px;
}

.historia-body--vision {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-light);
  font-size: 15px;
}

.historia-body--destacado {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-primary);
  border-left: 2px solid var(--color-primary);
  padding-left: var(--space-sm);
  margin-top: var(--space-sm);
  max-width: 480px;
}


.historia-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}

.historia-mision__caption {
  display: none;
}

.historia-image.historia-image--portrait {
  width: 220px;
  max-width: 100%;
  aspect-ratio: 4/5;
  height: auto;
  object-fit: cover;
  object-position: center top;
}

/* =====================================================================
   ORIGEN — CÓMO COMENZÓ TODO
   ===================================================================== */
.origen {
  padding: var(--space-xl) 0;
  background: var(--color-light);
}

.origen__header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.origen__quote {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.5vw, 1.55rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-primary);
  line-height: 1.65;
  max-width: 680px;
  margin: 0 auto var(--space-xl);
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(var(--color-primary-rgb), 0.2);
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.2);
}

.origen__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-lg);
  align-items: start;
  margin-bottom: var(--space-xl);
}

.origen__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.origen__subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-dark);
}

.origen__hermanas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  max-width: 560px;
  margin: 0 auto;
}

.origen__hermana {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.origen__hermana-nombre {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dark);
}

.origen__hermana-rol {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
  .productos__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --navbar-h: 60px;
    --space-xl: 72px;
    --space-lg: 48px;
  }

  /* Navbar mobile */
  .navbar__nav {
    position: fixed;
    top: var(--navbar-h);
    left: 0;
    right: 0;
    background: var(--color-cream);
    flex-direction: column;
    padding: var(--space-md);
    gap: var(--space-sm);
    border-top: 1px solid rgba(0,0,0,0.08);
    transform: translateY(-100%);
    opacity: 0;
    /* visibility saca los links del orden de tabulación; opacity y
       pointer-events por sí solos los dejaban alcanzables con Tab.
       Al transicionarla, el menú sigue visible durante el cierre. */
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
    margin-left: 0;
  }

  .navbar__nav.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .navbar__cta { display: none; }
  .navbar__hamburger { display: flex; }

  /* Productos */
  .productos__grid { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }

  /* Descripción — mobile: texto normal debajo del nombre */
  .producto-card__desc {
    position: static;
    aspect-ratio: auto;
    display: block;
    padding: 0;
    margin-top: var(--space-xs);
    text-align: left;
    background: none;
    color: var(--color-muted);
    opacity: 1;
    pointer-events: auto;
  }

  /* Footer */
  .footer__bottom { flex-direction: column; align-items: center; text-align: center; }

  /* Ubicación */
  .ubicacion__grid { grid-template-columns: minmax(0, 1fr); }
  .ubicacion__map { aspect-ratio: 3/2; }

  /* En pantallas angostas el horario no entra al lado del día */
  .horarios__fila {
    flex-direction: column;
    gap: 2px;
  }
  .horarios__fila dd { text-align: left; }

  /* Nosotros page */
  .historia-mision__grid,
  .origen__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .historia-mision__image {
    order: -1;
    position: relative;
    max-width: 300px;
    margin: 0 auto;
  }
  .historia-image { aspect-ratio: auto; height: auto; }

  .historia-mision__text .label,
  .historia-mision__text > .heading-display {
    display: none;
  }

  .historia-mision__caption {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-sm) var(--space-sm) var(--space-md);
    background: linear-gradient(to top, var(--scrim), rgba(var(--color-ganache-rgb), 0));
  }

  .historia-mision__caption .heading-display {
    font-size: 1.6rem;
  }

  .origen__hermanas {
    max-width: 100%;
    gap: var(--space-md);
  }

  .page-hero {
    height: 50vh;
    min-height: 320px;
  }
}

@media (max-width: 480px) {
  .hero__imagotipo { width: min(450px, 90vw); }
}

/* Ventanas bajas (notebooks de 1366x768 y parecidas): el logo mide 523px
   fijos y empuja el botón fuera del hero. Acá se lo limita por alto de
   viewport. Arriba de 800px de alto no aplica y todo queda igual. */
@media (max-height: 800px) {
  .hero__imagotipo { max-height: 46vh; }
}

/* ── Ocultar productos/categorías temporalmente ───────────────────────────
   Se ocultan con el atributo `hidden` en el HTML. Esta regla lo blinda por
   si alguna clase llegara a definir `display`. Para volver a mostrar algo,
   basta con borrar la palabra `hidden` de su etiqueta en index.html.       */
[hidden] {
  display: none !important;
}

/* Sin esto, al ocultar la última categoría el margen inferior queda de más:
   selecciona el último grupo *visible* de la sección. */
.productos__categoria-group:not([hidden]):not(:has(~ .productos__categoria-group:not([hidden]))) {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONSENTIMIENTO DE COOKIES
   Tarjeta en la esquina, no barra a lo ancho: ocupa menos, tapa menos y
   deja leer la página mientras se decide. El cartel se muestra desde
   consentimiento.js quitándole el atributo `hidden`; con JavaScript
   apagado nunca aparece, y está bien, porque sin JS tampoco se carga el
   píxel y no hay nada que consentir.
   ═══════════════════════════════════════════════════════════════════════ */
.consent {
  position: fixed;
  left: var(--space-md);
  bottom: var(--space-md);
  z-index: 200;
  width: min(420px, calc(100vw - var(--space-md) * 2));
  max-height: calc(100vh - var(--space-md) * 2);
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--color-light);
  box-shadow: 0 24px 60px -20px rgba(var(--color-ganache-rgb), 0.28);
  padding: var(--space-sm) var(--space-sm) 0;
  animation: consent-entra 0.45s var(--ease);
}

@keyframes consent-entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Rechazar es un enlace de texto arriba a la derecha, como en las
   implementaciones que cumplen de verdad: visible y a un solo clic, no
   escondido detrás de "Personalizar". */
.consent__salir {
  display: block;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.consent__salir:hover { color: var(--color-primary); }

.consent__marca {
  width: 34px;
  height: 34px;
  display: block;
  margin-top: var(--space-sm);
}

.consent__titulo {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin: 10px 0 var(--space-sm);
}

.consent__texto {
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-muted);
  margin: 0 0 var(--space-sm);
}

.consent__texto a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Panel de opciones ── */
.consent__opciones {
  border-top: 1px solid var(--color-light);
  margin-bottom: var(--space-sm);
}

.consent__opcion {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-light);
}
.consent__opcion:last-child { border-bottom: 0; }

/* La fila entera es el control: label envolvente, así el área de toque
   es grande en el teléfono y no sólo el interruptor. */
label.consent__opcion { cursor: pointer; }

.consent__opcion-t {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 4px;
}

.consent__opcion-d {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-muted);
}

.consent__siempre {
  grid-column: 2;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: right;
  margin-top: 6px;
}

/* ── Interruptor ── */
.consent__check {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 24px;
  margin: 0;
  cursor: pointer;
}

.consent__switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--color-placeholder);
  transition: background var(--transition-fast);
}

.consent__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--transition-fast);
}

.consent__check:checked ~ .consent__switch { background: var(--color-primary); }
.consent__check:checked ~ .consent__switch::after { transform: translateX(20px); }

/* El foco se dibuja sobre el interruptor porque el input real es
   invisible: sin esto, quien navega con Tab no ve dónde está parado. */
.consent__check:focus-visible ~ .consent__switch {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Las esenciales se muestran encendidas y sin control: no se pueden
   apagar, y fingir un interruptor que no hace nada sería mentir. */
.consent__switch--fijo {
  background: var(--color-primary);
  opacity: 0.35;
}
.consent__switch--fijo::after { transform: translateX(20px); }

/* ── Botones ── */
.consent__acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-light);
  margin: 0 calc(var(--space-sm) * -1);
}

.consent__btn {
  padding: 16px 10px;
  background: none;
  border: 0;
  border-left: 1px solid var(--color-light);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dark);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.consent__btn:first-child { border-left: 0; }
.consent__btn:hover { background: var(--color-cream); color: var(--color-primary); }

#consent-aceptar { color: var(--color-primary); font-weight: 600; }

@media (max-width: 560px) {
  .consent {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PÁGINAS LEGALES
   ═══════════════════════════════════════════════════════════════════════ */
.legal {
  padding: calc(var(--navbar-h) + var(--space-lg)) var(--space-sm) var(--space-xl);
  background: var(--color-white);
}

.legal__inner {
  max-width: 720px;
  margin: 0 auto;
}

.legal__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  line-height: 1.1;
  color: var(--color-primary);
  margin: var(--space-xs) 0 var(--space-sm);
}

.legal__title em {
  font-style: italic;
  font-family: var(--font-body);
  font-weight: 300;
  text-transform: none;
}

.legal__fecha {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-md);
}

.legal__intro {
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-dark);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-light);
}

.legal__acordeon { border-top: 1px solid var(--color-light); }

.legal__item { border-bottom: 1px solid var(--color-light); }

/* summary trae un triangulito propio en cada navegador; se saca por las
   dos vías porque WebKit no respeta list-style. El indicador lo dibujamos
   nosotros para que sea igual en todos lados. */
.legal__sum {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dark);
  transition: color var(--transition-fast);
}
.legal__sum::-webkit-details-marker { display: none; }
.legal__sum:hover { color: var(--color-primary); }

/* El "+" que gira a "×" al abrir: dos trazos cruzados, uno se desvanece. */
.legal__sum::after {
  content: '';
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  transition: transform var(--transition), opacity var(--transition-fast);
}
.legal__item[open] > .legal__sum { color: var(--color-primary); }
.legal__item[open] > .legal__sum::after { transform: rotate(135deg); }

.legal__cuerpo {
  padding-bottom: var(--space-sm);
  max-width: 62ch;
  animation: legal-abre 0.3s var(--ease);
}

@keyframes legal-abre {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.legal__cuerpo p,
.legal__cuerpo li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-muted);
  margin: 0 0 12px;
}

.legal__cuerpo p:last-child,
.legal__cuerpo li:last-child { margin-bottom: 0; }

.legal__cuerpo strong { color: var(--color-dark); font-weight: 600; }

.legal__cuerpo ul { margin: 0 0 12px; padding-left: 20px; }
.legal__cuerpo li { margin-bottom: 8px; }

.legal__cuerpo a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal__cuerpo code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
  background: var(--color-light);
  padding: 1px 5px;
  border-radius: var(--radius);
}

/* El texto de la ley se cita, no se parafrasea, y se marca como cita. */
.legal__clausula {
  border-left: 2px solid var(--color-light);
  padding-left: var(--space-sm);
  font-size: 13px !important;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .legal__cuerpo { animation: none; }
  .legal__sum::after { transition: none; }
}

/* Enlaces legales del pie */
.footer__legal {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--transition-fast);
}
.footer__legal:hover { opacity: 0.7; }
.footer__sep { opacity: 0.4; margin: 0 4px; }

/* ── Página 404 ──
   Cloudflare Pages sirve este archivo solo, por estar en la raíz y llamarse
   404.html. Sin él, cualquier dirección inventada devolvía la portada con
   código 200, y Google podía indexar infinitas URLs duplicadas. */
.error404 {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: calc(var(--navbar-h) + var(--space-xl)) var(--space-md) var(--space-xl);
  text-align: center;
}
.error404 .heading-display { margin: var(--space-sm) 0 var(--space-md); }
.error404 .historia-body { margin: 0 auto var(--space-lg); max-width: 46ch; }

/* ── Foto de Giuseppina (la nonna) ──
   Es una foto familiar de época: el borde blanco del papel y los pliegues son
   parte de ella. Por eso NO se recorta en ningún tamaño — proporción natural
   siempre, en vez de forzarla a un marco como el resto de las imágenes. */
.origen__foto {
  width: 100%;
  height: auto;
  display: block;
}