/* main.css — Generado automáticamente por build.py */


/* === tokens.css === */

/* ===========================================================================
   tokens.css — Sistema de diseño de Producar
   ===========================================================================
   Cambiá los valores acá y todo el sitio se actualiza.
   ========================================================================= */

/* ---------- Color (paleta de marca) ---------- */
:root {
  /* Verde de marca (tomado del sitio original #00792B) */
  --brand-50:  #E6F4EA;
  --brand-100: #C8E7D2;
  --brand-200: #95D0A7;
  --brand-300: #5FB57B;
  --brand-400: #2E9B53;
  --brand-500: #00792B;   /* primario */
  --brand-600: #006223;
  --brand-700: #00471A;
  --brand-800: #002E10;
  --brand-900: #001507;

  /* Acento dorado (para detalles, estrellas, ratings) */
  --accent-300: #FFD455;
  --accent-400: #FFD027;
  --accent-500: #FEC104;
  --accent-600: #E2A800;

  /* Tinta (texto) */
  --ink-900: #0F1419;
  --ink-800: #1A1F26;
  --ink-700: #3A4047;
  --ink-600: #4B5563;
  --ink-500: #6B7280;
  --ink-400: #9CA3AF;
  --ink-300: #D1D5DB;
  --ink-200: #E5E7EB;
  --ink-100: #F1F3F5;

  /* Fondos */
  --bg-0:    #FFFFFF;
  --bg-50:   #F7F8F5;     /* warm off-white */
  --bg-100:  #EEF0E9;
  --bg-dark: #0F1419;

  /* Superficies y bordes */
  --surface: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;

  /* Estado */
  --success: #10B981;
  --warning: #F59E0B;
  --error:   #DC2626;
  --info:    #3B82F6;

  /* ---------- Tipografía ---------- */
  --font-display: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Heebo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala tipográfica con clamp() (mobile-first) */
  --fs-100: 0.8125rem;   /* 13px */
  --fs-200: 0.875rem;    /* 14px */
  --fs-300: 0.9375rem;   /* 15px */
  --fs-400: 1rem;        /* 16px base */
  --fs-500: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);  /* 17-19 */
  --fs-600: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);    /* 20-24 */
  --fs-700: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);      /* 24-30 */
  --fs-800: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);  /* 30-40 */
  --fs-900: clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem);   /* 36-52 */
  --fs-1000: clamp(2.75rem, 2rem + 3.75vw, 4.5rem);    /* 44-72 hero */

  /* Pesos */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Line-height */
  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-base:     1.55;
  --lh-relaxed:  1.7;

  /* Letter-spacing */
  --ls-tight:    -0.02em;
  --ls-base:     0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;

  /* ---------- Espaciado (4-pt scale) ---------- */
  --sp-0:  0;
  --sp-1:  0.25rem;   /* 4 */
  --sp-2:  0.5rem;    /* 8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.25rem;   /* 20 */
  --sp-6:  1.5rem;    /* 24 */
  --sp-8:  2rem;      /* 32 */
  --sp-10: 2.5rem;    /* 40 */
  --sp-12: 3rem;      /* 48 */
  --sp-16: 4rem;      /* 64 */
  --sp-20: 5rem;      /* 80 */
  --sp-24: 6rem;      /* 96 */
  --sp-32: 8rem;      /* 128 */

  /* ---------- Radius ---------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---------- Sombras (sutiles, no de 2018) ---------- */
  /* Usar en hovers de cards/buttons para "profundidad suave" moderna (micro-interacción ligera).
     Ej: .foo:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); transition: ... } */
  --shadow-xs: 0 1px 2px rgba(15, 20, 25, 0.04);
  --shadow-sm: 0 2px 4px rgba(15, 20, 25, 0.04), 0 1px 2px rgba(15, 20, 25, 0.06);
  --shadow-md: 0 4px 8px rgba(15, 20, 25, 0.05), 0 2px 4px rgba(15, 20, 25, 0.05);
  --shadow-lg: 0 10px 20px rgba(15, 20, 25, 0.06), 0 4px 8px rgba(15, 20, 25, 0.04);
  --shadow-xl: 0 20px 40px rgba(15, 20, 25, 0.08), 0 8px 16px rgba(15, 20, 25, 0.04);
  --shadow-glow: 0 0 0 4px rgba(0, 121, 43, 0.15);

  /* ---------- Motion ---------- */
  --motion-fast:  180ms;
  --motion-base:  280ms;
  --motion-slow:  480ms;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-narrow: 880px;
  --header-h: 88px;
  --header-h-sticky: 72px;

  /* ---------- Z-index ---------- */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 900;
  --z-modal:  1000;
  --z-toast:  1100;
}

/* ---------- Respetar usuarios con reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Modo oscuro (preparado para futuro, no activado por defecto) ---------- */
@media (prefers-color-scheme: dark) {
  :root.theme-auto-dark {
    --bg-0: #0F1419;
    --bg-50: #1A1F26;
    --surface: #1F242C;
    --ink-900: #F1F3F5;
    --ink-700: #D1D5DB;
    --ink-500: #9CA3AF;
    --border: #2D333B;
  }
}


/* === base/reset.css === */

/* ===========================================================================
   reset.css — Reset moderno (basado en Andy Bell + Josh Comeau)
   ========================================================================= */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  line-height: var(--lh-base);
  font-family: var(--font-body);
  font-size: var(--fs-400);
  color: var(--ink-900);
  background: var(--bg-0);
  min-height: 100vh;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; cursor: pointer; padding: 0; }

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

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  hyphens: auto;
}

ul, ol {
  list-style: none;
  padding: 0;
}

table { border-collapse: collapse; }

/* Quitar outline por defecto, mantener focus visible accesible */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Selection */
::selection {
  background: var(--brand-500);
  color: #fff;
}

/* Scrollbar discreto en navegadores WebKit */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-50); }
::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }


/* === base/typography.css === */

/* ===========================================================================
   typography.css — Tipografía base
   ========================================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--ink-900);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
}

h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-700); }
h4 { font-size: var(--fs-600); }
h5 { font-size: var(--fs-500); }
h6 { font-size: var(--fs-400); font-weight: var(--fw-semibold); }

p {
  font-size: var(--fs-400);
  line-height: var(--lh-base);
  color: var(--ink-700);
}

p + p { margin-top: var(--sp-4); }

a {
  color: var(--brand-500);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out);
}

a:hover {
  color: var(--brand-600);
}

small, .text-sm { font-size: var(--fs-200); }
.text-xs { font-size: var(--fs-100); }
.text-lg { font-size: var(--fs-500); }
.text-xl { font-size: var(--fs-600); }

.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-ink-500 { color: var(--ink-500); }
.text-ink-700 { color: var(--ink-700); }
.text-ink-900 { color: var(--ink-900); }
.text-brand { color: var(--brand-500); }
.text-accent { color: var(--accent-500); }

.text-uppercase { text-transform: uppercase; letter-spacing: var(--ls-wide); }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--brand-500);
  margin-bottom: var(--sp-3);
}

.lead {
  font-size: var(--fs-500);
  line-height: var(--lh-relaxed);
  color: var(--ink-600);
}


/* === base/utilities.css === */

/* ===========================================================================
   utilities.css — Utilidades frecuentes (no reemplazar Tailwind)
   ========================================================================= */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.section {
  padding-block: var(--sp-16);
}

.section--lg { padding-block: var(--sp-24); }

.section--sm { padding-block: var(--sp-12); }

.section--bg {
  background: var(--bg-50);
}

.section--dark {
  background: var(--bg-dark);
  color: var(--ink-100);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-12);
}

.section-header .eyebrow { display: block; }

.section-header h2 {
  font-size: var(--fs-800);
  margin-bottom: var(--sp-4);
}

.section-header p {
  font-size: var(--fs-500);
  color: var(--ink-500);
  line-height: var(--lh-relaxed);
}

/* Stacks (vertical rhythm) */
.stack > * + * { margin-top: var(--stack-space, var(--sp-4)); }
.stack-sm { --stack-space: var(--sp-2); }
.stack-md { --stack-space: var(--sp-4); }
.stack-lg { --stack-space: var(--sp-6); }
.stack-xl { --stack-space: var(--sp-8); }

/* Cluster (horizontal con wrap) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--sp-3));
  align-items: center;
}

.cluster-sm { --cluster-gap: var(--sp-2); }
.cluster-md { --cluster-gap: var(--sp-4); }
.cluster-lg { --cluster-gap: var(--sp-6); }

/* Grid helpers */
.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Visually hidden (a11y) */
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  background: var(--brand-500);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  z-index: var(--z-toast);
  transition: top var(--motion-base) var(--ease-out);
}

.skip-link:focus-visible {
  top: var(--sp-4);
  color: #fff;
}

/* Imágenes responsivas con aspect ratio */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Decoradores */
.divider {
  width: 64px;
  height: 3px;
  background: var(--brand-500);
  border-radius: var(--r-pill);
  margin: var(--sp-4) 0;
}

.divider-center { margin-inline: auto; }

/* Para imágenes con skeleton antes de cargar */
.img-skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-100) 0%,
    var(--bg-50) 50%,
    var(--bg-100) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Foco visible mejorado en todo el documento */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}


/* === base/animations.css === */

/* ===========================================================================
   animations.css — Animaciones reutilizables
   ========================================================================= */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes ken-burns {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.08) translate(-1%, -1%); }
  100% { transform: scale(1) translate(0, 0); }
}

/* Gentler Ken-Burns for mobile: less zoom and pan so it stays within the visible cropped area of the wide image when viewed in portrait. */
@keyframes ken-burns-mobile {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.04) translate(-0.5%, 0); }
  100% { transform: scale(1) translate(0, 0); }
}

@keyframes scroll-cue {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  30% { opacity: 1; }
  100% {
    transform: translateY(16px);
    opacity: 0;
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 121, 43, 0.5);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 16px rgba(0, 121, 43, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 121, 43, 0);
  }
}

/* Clases de utilidad para activar al hacer scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--motion-slow) var(--ease-out),
    transform var(--motion-slow) var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }
.reveal--delay-4 { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* === layout/container.css === */

/* ===========================================================================
   container.css — Contenedores y layout principal
   ========================================================================= */

main {
  min-height: 60vh;
}

.page-hero {
  position: relative;
  padding-block: var(--sp-16) var(--sp-12);
  background: var(--bg-50);
  overflow: hidden;
  isolation: isolate;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--brand-50) 0%, var(--bg-50) 100%);
  z-index: -1;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  font-size: var(--fs-900);
  margin-bottom: var(--sp-3);
}

.page-hero p {
  font-size: var(--fs-500);
  color: var(--ink-600);
  max-width: 640px;
}

.page-hero--image {
  padding-block: var(--sp-24) var(--sp-20);
  color: #fff;
  text-align: center;
  background-size: cover;
  background-position: center;
}

.page-hero--image::before {
  background: linear-gradient(
    180deg,
    rgba(15, 20, 25, 0.45) 0%,
    rgba(15, 20, 25, 0.65) 100%
  );
}

.page-hero--image h1 { color: #fff; }
.page-hero--image p { color: rgba(255, 255, 255, 0.9); margin-inline: auto; }


/* === layout/header.css === */

/* ===========================================================================
   header.css — Header sticky con menú accesible
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: var(--z-sticky);
  transition: box-shadow var(--motion-base) var(--ease-out);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.site-header__top {
  background: var(--brand-700);
  color: #fff;
  font-size: var(--fs-200);
  padding-block: var(--sp-2);
}

.site-header__top a { color: rgba(255, 255, 255, 0.9); }
.site-header__top a:hover { color: #fff; }

.site-header__top-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.site-header__info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  align-items: center;
}

.site-header__info-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.site-header__info-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}

.site-header__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-block: var(--sp-4);
  min-height: var(--header-h-sticky);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity var(--motion-fast) var(--ease-out);
}

.site-header__logo:hover { opacity: 0.85; }

.site-header__logo img {
  height: 48px;
  width: auto;
  display: block;
}

@media (min-width: 768px) {
  .site-header__logo img { height: 56px; }
}

.site-nav {
  display: none;
}

@media (min-width: 1024px) {
  .site-nav { display: block; }
}

.site-nav__list {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: var(--fw-medium);
  color: var(--ink-700);
  border-radius: var(--r-sm);
  transition:
    color var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-2);
  height: 2px;
  background: var(--brand-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-base) var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--brand-500);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  color: var(--ink-700);
  transition: background var(--motion-fast) var(--ease-out);
}

.menu-toggle:hover {
  background: var(--bg-50);
  color: var(--brand-500);
}

@media (min-width: 1024px) {
  .menu-toggle { display: none; }
}

.menu-toggle svg { width: 24px; height: 24px; }

/* ===========================================================================
   Mobile header optimizations (top info bar + main nav height)
   - Top green bar (.site-header__top) is invasive on mobile because of wrap (long address).
   - Reduce padding/font by default on small screens.
   - On scroll (using existing .is-scrolled class from nav.ts), hide the top bar
     on mobile to give more vertical space (smooth via max-height + opacity).
   - Also reduce main header (.site-header__main) height/padding and logo on mobile.
   Desktop remains as-is (excellent per user).
   ========================================================================= */

@media (max-width: 640px) {
  /* Make top info bar (green line) less tall by default */
  .site-header__top {
    font-size: var(--fs-100); /* ~13px instead of 14px */
    padding-block: 3px;       /* tighter than var(--sp-2)=8px */
  }

  .site-header__top-inner {
    gap: var(--sp-1);
  }

  .site-header__info {
    gap: 2px var(--sp-3);
  }

  .site-header__info-item {
    gap: var(--sp-1);
  }

  .site-header__info-item svg {
    width: 12px;
    height: 12px;
  }

  /* Smooth hide of top bar when user scrolls (mobile only) */
  .site-header__top {
    max-height: 42px; /* enough room for single line content */
    overflow: hidden;
    transition:
      max-height var(--motion-base) var(--ease-out),
      padding-block var(--motion-base) var(--ease-out),
      opacity var(--motion-base) var(--ease-out);
  }

  .site-header.is-scrolled .site-header__top {
    max-height: 0;
    padding-block: 0;
    opacity: 0;
  }

  /* Slightly shorter main navbar on mobile */
  .site-header__main {
    padding-block: 6px; /* was var(--sp-4)=16px */
    min-height: 48px;   /* was 72px via token; more compact */
  }

  .site-header__logo img {
    height: 38px; /* was 48px on mobile */
  }
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s var(--motion-slow);
}

.mobile-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s 0s;
}

.mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 25, 0.5);
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-out);
}

.mobile-drawer.is-open .mobile-drawer__backdrop {
  opacity: 1;
}

.mobile-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 90vw);
  background: var(--bg-0);
  padding: var(--sp-6);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--motion-slow) var(--ease-out);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
}

.mobile-drawer.is-open .mobile-drawer__panel {
  transform: translateX(0);
}

.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}

.mobile-drawer__close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--ink-700);
}

.mobile-drawer__close:hover {
  background: var(--bg-50);
  color: var(--brand-500);
}

.mobile-drawer__close svg { width: 20px; height: 20px; }

.mobile-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1;
}

.mobile-drawer__link {
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: var(--fw-medium);
  color: var(--ink-700);
  border-radius: var(--r-md);
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.mobile-drawer__link:hover,
.mobile-drawer__link[aria-current="page"] {
  background: var(--brand-50);
  color: var(--brand-600);
}

.mobile-drawer__footer {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}

.mobile-drawer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-300);
  color: var(--ink-600);
}

.mobile-drawer__contact a:hover { color: var(--brand-500); }


/* === layout/footer.css === */

/* ===========================================================================
   footer.css — Pie de página
   ========================================================================= */

.site-footer {
  background: var(--bg-dark);
  color: var(--ink-300);
  padding-block: var(--sp-16) var(--sp-8);
  margin-top: var(--sp-20);
}

.site-footer h4 {
  color: #fff;
  font-size: var(--fs-400);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-4);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

.site-footer__brand p {
  color: var(--ink-400);
  font-size: var(--fs-300);
  line-height: var(--lh-relaxed);
  margin-top: var(--sp-3);
  max-width: 32ch;
}

.site-footer__brand img {
  height: 48px;
  width: auto;
  filter: brightness(0) invert(1);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.site-footer__list a {
  color: var(--ink-400);
  font-size: var(--fs-300);
  transition: color var(--motion-fast) var(--ease-out);
}

.site-footer__list a:hover { color: #fff; }

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-300);
}

.site-footer__contact a:hover { color: #fff; }

.site-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--ink-400);
}

.site-footer__contact-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--brand-400);
}

.site-footer__social {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-circle);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-300);
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.site-footer__social a:hover {
  background: var(--brand-500);
  color: #fff;
}

.site-footer__social svg { width: 16px; height: 16px; }

.site-footer__bottom {
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-200);
  color: var(--ink-500);
  text-align: center;
}

@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
    text-align: left;
  }
}


/* === components/button.css === */

/* ===========================================================================
   button.css — Botones y CTAs
   ========================================================================= */

.btn {
  --btn-bg: var(--brand-500);
  --btn-fg: #fff;
  --btn-border: var(--brand-500);
  --btn-bg-hover: var(--brand-600);
  --btn-border-hover: var(--brand-600);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-border);
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--motion-base) var(--ease-out),
    color var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out),
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
  user-select: none;
}

.btn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  color: var(--btn-fg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active { transform: translateY(0); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--motion-base) var(--ease-out);
}

.btn:hover svg { transform: translateX(2px); }

/* Variantes */
.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--brand-500);
  --btn-border: var(--brand-500);
  --btn-bg-hover: var(--brand-50);
  --btn-border-hover: var(--brand-500);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-700);
  --btn-border: transparent;
  --btn-bg-hover: var(--bg-50);
  --btn-border-hover: transparent;
}

.btn--ghost:hover {
  color: var(--brand-500);
  box-shadow: none;
  transform: none;
}

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--ink-900);
  --btn-border: #fff;
  --btn-bg-hover: var(--brand-50);
  --btn-border-hover: var(--brand-50);
}

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.6);
  --btn-bg-hover: rgba(255, 255, 255, 0.1);
  --btn-border-hover: #fff;
}

.btn--dark {
  --btn-bg: var(--ink-900);
  --btn-fg: #fff;
  --btn-border: var(--ink-900);
  --btn-bg-hover: var(--ink-800);
  --btn-border-hover: var(--ink-800);
}

/* Tamaños */
.btn--sm {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-200);
}

.btn--lg {
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--fs-400);
}

.btn--block { width: 100%; }

/* Botón de WhatsApp (verde oficial) */
.btn--whatsapp {
  --btn-bg: #25D366;
  --btn-fg: #fff;
  --btn-border: #25D366;
  --btn-bg-hover: #1DAB54;
  --btn-border-hover: #1DAB54;
}

/* Botón "Ver más" / "Leer más" con flecha */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--brand-500);
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  padding: var(--sp-2) 0;
}

.btn-link::after {
  content: "→";
  transition: transform var(--motion-base) var(--ease-out);
}

.btn-link:hover { color: var(--brand-600); }
.btn-link:hover::after { transform: translateX(4px); }


/* === components/card.css === */

/* ===========================================================================
   card.css — Cards base (producto, sucursal, receta)
   ========================================================================= */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out);
  height: 100%;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-200);
  color: inherit;
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-50);
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-out);
}

.card:hover .card__media img {
  transform: scale(1.05);
}

.card__badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  background: var(--brand-500);
  color: #fff;
  border-radius: var(--r-pill);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  flex: 1;
}

.card__category {
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--brand-500);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  line-height: var(--lh-snug);
  margin: 0;
}

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

.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card__desc {
  font-size: var(--fs-300);
  color: var(--ink-600);
  line-height: var(--lh-base);
  margin: 0;
}

.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--sp-3);
}

.card__meta {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-200);
  color: var(--ink-500);
}

.card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.card__meta-item svg { width: 14px; height: 14px; }


/* === components/breadcrumb.css === */

/* ===========================================================================
   breadcrumb.css — Migas de pan
   ========================================================================= */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-200);
  color: var(--ink-500);
  margin-bottom: var(--sp-4);
}

.breadcrumb a {
  color: var(--ink-500);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out);
}

.breadcrumb a:hover { color: var(--brand-500); }

.breadcrumb__sep {
  color: var(--ink-300);
  user-select: none;
}

.breadcrumb__current {
  color: var(--ink-700);
  font-weight: var(--fw-medium);
}

.breadcrumb--light { color: rgba(255, 255, 255, 0.8); }
.breadcrumb--light a { color: rgba(255, 255, 255, 0.8); }
.breadcrumb--light a:hover { color: #fff; }
.breadcrumb--light .breadcrumb__current { color: #fff; }
.breadcrumb--light .breadcrumb__sep { color: rgba(255, 255, 255, 0.4); }


/* === components/badge.css === */

/* ===========================================================================
   badge.css — Etiquetas y chips
   ========================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--bg-50);
  color: var(--ink-700);
  border: 1px solid var(--border);
}

.badge--brand {
  background: var(--brand-50);
  color: var(--brand-700);
  border-color: var(--brand-100);
}

.badge--accent {
  background: var(--accent-500);
  color: var(--ink-900);
  border-color: var(--accent-500);
}

.badge--outline {
  background: transparent;
  color: var(--ink-700);
  border-color: var(--border-strong);
}

.badge--dark {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
}

.badge--sm { padding: 2px var(--sp-2); font-size: 10px; }


/* === components/service-card.css === */

/* ===========================================================================
   service-card.css — Card de servicio (home, categorías)
   ========================================================================= */

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--sp-8) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out);
  height: 100%;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-slow) var(--ease-out);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-200);
  color: inherit;
}

.service-card:hover::before { transform: scaleX(1); }

.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-500);
  margin-bottom: var(--sp-5);
  transition:
    background var(--motion-base) var(--ease-out),
    color var(--motion-base) var(--ease-out);
}

.service-card__icon svg { width: 28px; height: 28px; }

.service-card:hover .service-card__icon {
  background: var(--brand-500);
  color: #fff;
}

.service-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-snug);
}

.service-card__desc {
  color: var(--ink-600);
  font-size: var(--fs-400);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-5);
  flex: 1;
}

.service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--brand-500);
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  margin-top: auto;
}

.service-card__cta::after {
  content: "→";
  transition: transform var(--motion-base) var(--ease-out);
}

.service-card:hover .service-card__cta::after {
  transform: translateX(4px);
}

.service-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* === components/product-card.css === */

/* ===========================================================================
   product-card.css — Card de producto
   ========================================================================= */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out);
  height: 100%;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-200);
}

.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-50);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-card__media img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  transition: transform var(--motion-slow) var(--ease-out);
  mix-blend-mode: multiply;
}

.product-card:hover .product-card__media img {
  transform: scale(1.06);
}

.product-card__category {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  background: var(--ink-900);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  border-radius: var(--r-pill);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  flex: 1;
}

.product-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.product-card__desc {
  font-size: var(--fs-300);
  color: var(--ink-600);
  line-height: var(--lh-base);
}

.product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--brand-500);
  font-family: var(--font-display);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-top: auto;
}

.product-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* === components/branch-card.css === */

/* ===========================================================================
   branch-card.css — Card de sucursal
   ========================================================================= */

.branch-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden; /* corta cualquier desborde del iframe */
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

@media (min-width: 640px) {
  .branch-card { grid-template-columns: 1fr 1fr; }
}

/* Regla de oro para grid: hijos pueden encogerse por debajo de su contenido.
   Sin esto, el iframe de Google Maps (que tiene un min-width interno) empuja
   la columna y desborda la card. */
.branch-card > * { min-width: 0; }

.branch-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.branch-card__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.branch-card__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-circle);
  background: var(--brand-50);
  color: var(--brand-500);
  flex-shrink: 0;
}

.branch-card__pin svg { width: 20px; height: 20px; }

.branch-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  margin: 0;
}

.branch-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-300);
  color: var(--ink-600);
  line-height: var(--lh-base);
}

.branch-card__info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  word-break: break-word;
}

.branch-card__info-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--brand-500);
  margin-top: 2px;
}

.branch-card__info-item a {
  color: var(--ink-700);
  font-weight: var(--fw-medium);
}

.branch-card__info-item a:hover { color: var(--brand-500); }

/* ---- Mapa (contenedor) ---- */
.branch-card__map {
  position: relative;
  background: var(--bg-100);
  border-radius: var(--r-md);
  overflow: hidden;
  width: 100%;
  /* aspect-ratio en TODOS los breakpoints para que el iframe tenga altura */
  aspect-ratio: 4 / 3;
  contain: layout paint; /* aísla el iframe del flujo exterior */
}

@media (min-width: 640px) {
  .branch-card__map { aspect-ratio: 16 / 10; }
}

.branch-card__map iframe {
  position: absolute;  /* ocupa todo el contenedor que tiene aspect-ratio */
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border: 0;
  display: block;
}

/* ---- Placeholder (botón "Cargar mapa") ---- */
.branch-card__map-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  height: 100%;
  padding: var(--sp-4);
  background: linear-gradient(135deg, var(--brand-50) 0%, var(--bg-50) 100%);
  color: var(--ink-700);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  text-align: center;
  cursor: pointer;
  border: 0;
  font-size: var(--fs-300);
  transition: background var(--motion-base) var(--ease-out);
}

.branch-card__map-placeholder:hover {
  background: linear-gradient(135deg, var(--brand-100) 0%, var(--brand-50) 100%);
}

.branch-card__map-placeholder svg {
  width: 32px;
  height: 32px;
  color: var(--brand-500);
  flex-shrink: 0;
}

.branch-card__map.is-loaded .branch-card__map-placeholder {
  display: none;
}


/* === components/recipe-card.css === */

/* ===========================================================================
   recipe-card.css — Card de receta
   ========================================================================= */

.recipe-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition:
    transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}

.recipe-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  color: inherit;
}

.recipe-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-50);
  overflow: hidden;
}

.recipe-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-out);
}

.recipe-card:hover .recipe-card__media img {
  transform: scale(1.06);
}

.recipe-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(15, 20, 25, 0.6) 100%);
  pointer-events: none;
}

.recipe-card__time {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink-700);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
}

.recipe-card__time svg {
  width: 12px;
  height: 12px;
}

.recipe-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  flex: 1;
}

.recipe-card__date {
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--brand-500);
}

.recipe-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.recipe-card__meta {
  display: flex;
  gap: var(--sp-4);
  font-size: var(--fs-200);
  color: var(--ink-500);
  margin-top: auto;
  padding-top: var(--sp-3);
}

.recipe-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.recipe-card__meta-item svg {
  width: 14px;
  height: 14px;
}

.recipe-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* === components/hero.css === */

/* ===========================================================================
   hero.css — Hero moderno (full-bleed con Ken-Burns)
   ========================================================================= */

.hero {
  position: relative;
  min-height: clamp(520px, 80vh, 720px);
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  margin-top: -1px; /* evitar línea debajo del header */
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg-dark);
  overflow: hidden;
}

/* <picture> es inline por defecto, lo que rompe width/height 100% del <img>
   dentro (resuelve contra el tamano intrinseco del img, no contra el hero).
   Forzamos a picture a ocupar todo el contenedor para que el img llene el hero. */
.hero__media picture,
.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img {
  object-fit: cover;
  object-position: center;
  animation: ken-burns 24s ease-in-out infinite;
  will-change: transform;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(15, 20, 25, 0.75) 0%,
      rgba(15, 20, 25, 0.45) 60%,
      rgba(15, 20, 25, 0.25) 100%
    );
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-5);
  padding-block: var(--sp-16);
}

.hero__content {
  max-width: 640px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-5);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: #fff;
  backdrop-filter: blur(8px);
  animation: fade-down var(--motion-slow) var(--ease-out);
}

.hero__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-circle);
  background: var(--accent-500);
  animation: pulse-ring 2s infinite;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 4vw, 4.5rem);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: var(--sp-5);
  text-wrap: balance;
  animation: fade-up var(--motion-slow) var(--ease-out) 100ms both;
}

.hero__title em {
  font-style: normal;
  color: var(--accent-500);
}

.hero__subtitle {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--sp-8);
  max-width: 52ch;
  animation: fade-up var(--motion-slow) var(--ease-out) 200ms both;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  animation: fade-up var(--motion-slow) var(--ease-out) 300ms both;
}

.hero__scroll-cue {
  position: absolute;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 28px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--r-pill);
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.hero__scroll-cue::after {
  content: "";
  width: 4px;
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.8);
  animation: scroll-cue 1.8s ease-in-out infinite;
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  animation: fade-up var(--motion-slow) var(--ease-out) 400ms both;
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.hero__stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--accent-500);
  letter-spacing: -0.02em;
}

.hero__stat-label {
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 640px) {
  /* =====================================================================
     ESTRATEGIA MOBILE (<= 640px):
     - La imagen debe LLENAR todo el hero (no quedar arriba con fondo
       vacio abajo). El <picture> es inline por default y rompe el
       width/height:100% del <img>, por eso se fuerza display:block
       en el bloque base (.hero__media picture).
     - Gradiente suave (max 0.6 al pie) para que la imagen sea visible
       de arriba a abajo, no solo en la parte superior.
     - Text-shadow garantiza legibilidad sin depender de un gradiente
       agresivo que tape la imagen.
     - La carne (x=1200-2400, ~47-94% del ancho original) se muestra
       en la mitad superior del viewport con object-position: 70% 30%,
       dejando el area inferior para el texto anclado al fondo.
     ===================================================================== */

  .hero {
    min-height: clamp(540px, 88vh, 700px);
    align-items: flex-end; /* contenido anclado al fondo */
  }

  .hero__media::after {
    /* Gradiente vertical SUAVE: la imagen se ve en todo el hero, solo
       se oscurece lo justo al pie para que el texto sea leible. */
    background: linear-gradient(
      180deg,
      rgba(15, 20, 25, 0.05) 0%,
      rgba(15, 20, 25, 0.12) 40%,
      rgba(15, 20, 25, 0.40) 80%,
      rgba(15, 20, 25, 0.60) 100%
    );
  }

  .hero__media img {
    /* La carne esta en x=1200-2400 de los 2560px de ancho (47-94%).
       70% horizontal + 30% vertical la ubica en la mitad superior del
       viewport, fuera del area del texto inferior. */
    object-position: 70% 30%;
    animation: ken-burns-mobile 24s ease-in-out infinite;
  }

  .hero__inner {
    padding-block: var(--sp-8) calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
    padding-inline: var(--sp-4);
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__title {
    font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem);
    margin-bottom: var(--sp-3);
    /* Text-shadow: legibilidad sin depender de gradiente agresivo */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7), 0 0 14px rgba(0, 0, 0, 0.4);
  }

  .hero__subtitle {
    font-size: clamp(0.9375rem, 0.875rem + 0.4vw, 1.0625rem);
    margin-bottom: var(--sp-5);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75), 0 0 10px rgba(0, 0, 0, 0.45);
  }

  .hero__actions {
    gap: var(--sp-2);
  }

  .hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-5);
    row-gap: var(--sp-4);
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
  }

  .hero__stat-value {
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  }

  .hero__stat-label {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  }

  .hero__scroll-cue { display: none; }
}

  .hero__media::after {
    /* Gradiente vertical: arriba casi transparente (deja ver la carne),
       abajo muy oscuro (asegura legibilidad del texto). */
    background: linear-gradient(
      180deg,
      rgba(15, 20, 25, 0.10) 0%,
      rgba(15, 20, 25, 0.30) 45%,
      rgba(15, 20, 25, 0.75) 75%,
      rgba(15, 20, 25, 0.92) 100%
    );
  }

  .hero__media img {
    /* Mostrar la carne (sujeto) en la mitad SUPERIOR del viewport.
       La carne esta aprox en x=1200-2400 (47-94%) de la imagen de 2560px.
       Con object-fit: cover en portrait, 70% horizontal + 30% vertical
       ubica la carne en la zona alta-derecha del hero, fuera del area
       del texto. Ajustar el % horizontal si cambia la imagen. */
    object-position: 70% 30%;

    /* Ken-Burns mas sutil en mobile (menos zoom/pan) para que el sujeto
       no salga del area visible durante la animacion. */
    animation: ken-burns-mobile 24s ease-in-out infinite;
  }

  .hero__inner {
    /* Padding inferior respeta el notch/home indicator de iOS */
    padding-block: var(--sp-8) calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
    padding-inline: var(--sp-4);
  }

  .hero__content {
    /* Permitir que el contenido use el ancho completo del inner */
    max-width: 100%;
  }

  .hero__title {
    /* Cap mas agresivo en mobile: 28-40px en vez de 36-72px.
       "La mejor carne del Paraguay" no necesita ser gigante en phone. */
    font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem);
    margin-bottom: var(--sp-3);
  }

  .hero__subtitle {
    font-size: clamp(0.9375rem, 0.875rem + 0.4vw, 1.0625rem);
    margin-bottom: var(--sp-5);
  }

  .hero__actions {
    /* Gap mas cerrado en mobile para que los 2 botones quepan si es posible */
    gap: var(--sp-2);
  }

  .hero__stats {
    /* Grid 2x2 predecible en mobile (antes flex-wrap hacia layouts raros
       en viewports pequenos). Cada stat tiene su columna garantizada. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-5);
    row-gap: var(--sp-4);
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
  }

  .hero__stat-value {
    /* Cap los valores en mobile (eran 28-40px, ahora 24-32px) */
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  }

  .hero__scroll-cue { display: none; }
}


/* === components/about-block.css === */

/* ===========================================================================
   about-block.css — Bloque "Sobre X" con imagen + texto
   ========================================================================= */

.about-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  align-items: center;
}

@media (min-width: 900px) {
  .about-block { grid-template-columns: 1fr 1fr; }
  .about-block--reverse > :first-child { order: 2; }
}

.about-block__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lg);
}

.about-block__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-out);
}

.about-block:hover .about-block__media img {
  transform: scale(1.03);
}

.about-block__content h2 {
  font-size: var(--fs-800);
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}

.about-block__content p {
  font-size: var(--fs-400);
  line-height: var(--lh-relaxed);
  color: var(--ink-600);
  margin-bottom: var(--sp-4);
}

.about-block__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-6);
}

.about-block__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg-50);
  border-radius: var(--r-md);
}

.about-block__feature-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--brand-500);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-block__feature-icon svg { width: 18px; height: 18px; }

.about-block__feature-text {
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: var(--fw-medium);
  color: var(--ink-800);
  line-height: var(--lh-snug);
}

/* Tarjetas de valores (4 columnas) */
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.value-card {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: left;
  transition: border-color var(--motion-base) var(--ease-out);
}

.value-card:hover {
  border-color: var(--brand-200);
}

.value-card__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-50);
  color: var(--brand-500);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
}

.value-card__icon svg { width: 22px; height: 22px; }

.value-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  margin-bottom: var(--sp-2);
}

.value-card__desc {
  font-size: var(--fs-300);
  color: var(--ink-600);
  line-height: var(--lh-base);
  margin: 0;
}


/* === components/timeline.css === */

/* ===========================================================================
   timeline.css — Línea de tiempo (historia)
   ========================================================================= */

.timeline {
  position: relative;
  margin: var(--sp-8) 0;
  padding-left: var(--sp-6);
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-200) 100%);
}

.timeline__item {
  position: relative;
  padding-bottom: var(--sp-8);
  padding-left: var(--sp-6);
}

.timeline__item:last-child { padding-bottom: 0; }

.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-6) - 5px);
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: var(--r-circle);
  background: var(--brand-500);
  box-shadow: 0 0 0 4px var(--brand-100);
}

.timeline__year {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  background: var(--brand-500);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

.timeline__title {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  margin-bottom: var(--sp-2);
}

.timeline__desc {
  font-size: var(--fs-400);
  color: var(--ink-600);
  line-height: var(--lh-relaxed);
  max-width: 60ch;
}

/* Directorio (mesa directiva) */
.board {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

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

@media (min-width: 1024px) {
  .board { grid-template-columns: repeat(3, 1fr); }
}

.board__group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}

.board__group-title {
  font-family: var(--font-display);
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
  color: var(--brand-500);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.board__members {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.board__member {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-300);
  line-height: var(--lh-base);
}

.board__member-name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
}

.board__member-role {
  color: var(--brand-500);
  font-size: var(--fs-200);
  font-weight: var(--fw-medium);
}

.board__member-org {
  color: var(--ink-500);
  font-size: var(--fs-200);
  font-style: italic;
}


/* === components/product-detail.css === */

/* ===========================================================================
   product-detail.css — Vista de detalle de producto
   ========================================================================= */

.product-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  align-items: start;
}

@media (min-width: 900px) {
  .product-detail { grid-template-columns: 1.1fr 1fr; }
}

.product-detail__media {
  position: relative;
  background: var(--bg-50);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10);
  overflow: hidden;
}

.product-detail__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.product-detail__category {
  display: inline-flex;
  margin-bottom: var(--sp-3);
}

.product-detail__title {
  font-size: var(--fs-800);
  margin-bottom: var(--sp-3);
  text-wrap: balance;
}

.product-detail__desc {
  font-size: var(--fs-500);
  color: var(--ink-600);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-6);
}

.product-detail__ingredients {
  background: var(--bg-50);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin-top: var(--sp-6);
}

.product-detail__ingredients h4 {
  font-size: var(--fs-400);
  margin-bottom: var(--sp-3);
  color: var(--ink-900);
}

.product-detail__ingredients ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.product-detail__ingredients li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-300);
  color: var(--ink-700);
}

.product-detail__ingredients li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-circle);
  background: var(--brand-500);
  flex-shrink: 0;
}

.product-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* Filter bar (categorías) */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
  justify-content: center;
}

.filter-bar__btn {
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: var(--fw-medium);
  color: var(--ink-700);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.filter-bar__btn:hover {
  border-color: var(--brand-300);
  color: var(--brand-600);
}

.filter-bar__btn[aria-pressed="true"] {
  background: var(--brand-500);
  color: #fff;
  border-color: var(--brand-500);
}

/* Product grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-5);
}

@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}


/* === components/recipe-detail.css === */

/* ===========================================================================
   recipe-detail.css — Vista de receta
   ========================================================================= */

.recipe-detail {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.recipe-detail__hero {
  margin-bottom: var(--sp-10);
}

.recipe-detail__hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.recipe-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  font-size: var(--fs-300);
  color: var(--ink-500);
}

.recipe-detail__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-50);
  border-radius: var(--r-pill);
}

.recipe-detail__meta-item svg {
  width: 16px;
  height: 16px;
  color: var(--brand-500);
}

.recipe-detail__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  margin-top: var(--sp-10);
}

@media (min-width: 800px) {
  .recipe-detail__content { grid-template-columns: 1fr 2fr; }
}

.recipe-detail__ingredients {
  background: var(--bg-50);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  align-self: start;
  position: sticky;
  top: calc(var(--header-h-sticky) + var(--sp-4));
}

.recipe-detail__ingredients h3 {
  font-size: var(--fs-500);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.recipe-detail__ingredients h3 svg {
  width: 20px;
  height: 20px;
  color: var(--brand-500);
}

.recipe-detail__ingredients ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.recipe-detail__ingredients li {
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--border);
  font-size: var(--fs-300);
  color: var(--ink-700);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.recipe-detail__ingredients li:last-child { border-bottom: none; }

.recipe-detail__ingredients li::before {
  content: "•";
  color: var(--brand-500);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.recipe-detail__steps h2 {
  font-size: var(--fs-700);
  margin-bottom: var(--sp-6);
}

.recipe-detail__steps ol {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  counter-reset: step;
}

.recipe-detail__steps li {
  position: relative;
  padding-left: var(--sp-12);
  counter-increment: step;
  font-size: var(--fs-400);
  line-height: var(--lh-relaxed);
  color: var(--ink-700);
}

.recipe-detail__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 36px;
  height: 36px;
  border-radius: var(--r-circle);
  background: var(--brand-500);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-300);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Related products in recipe page */
.recipe-related {
  margin-top: var(--sp-16);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--border);
}

.recipe-related h3 {
  font-size: var(--fs-700);
  margin-bottom: var(--sp-6);
  text-align: center;
}


/* === components/cta-section.css === */

/* ===========================================================================
   cta-section.css — Sección de llamado a la acción
   ========================================================================= */

.cta-section {
  position: relative;
  padding: var(--sp-16) var(--sp-5);
  text-align: center;
  background: var(--bg-dark);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 121, 43, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(254, 193, 4, 0.15) 0%, transparent 50%);
  z-index: -1;
}

.cta-section h2 {
  font-size: clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);
  color: #fff;
  margin-bottom: var(--sp-3);
  text-wrap: balance;
}

.cta-section p {
  font-size: var(--fs-500);
  color: rgba(255, 255, 255, 0.85);
  max-width: 56ch;
  margin: 0 auto var(--sp-8);
}

.cta-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}


/* === components/sidebar-info.css === */

/* ===========================================================================
   sidebar-info.css — Panel lateral "Sobre nosotros" (drawer)
   ========================================================================= */

.sidebar-info {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s var(--motion-slow);
}

.sidebar-info.is-open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s 0s;
}

.sidebar-info__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 25, 0.6);
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-out);
}

.sidebar-info.is-open .sidebar-info__backdrop {
  opacity: 1;
}

.sidebar-info__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: var(--bg-0);
  padding: var(--sp-6);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--motion-slow) var(--ease-out);
  box-shadow: var(--shadow-xl);
}

.sidebar-info.is-open .sidebar-info__panel {
  transform: translateX(0);
}

.sidebar-info__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}

.sidebar-info__close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-circle);
  color: var(--ink-700);
  transition: background var(--motion-fast) var(--ease-out);
}

.sidebar-info__close:hover {
  background: var(--bg-50);
  color: var(--brand-500);
}

.sidebar-info__logo {
  height: 48px;
  width: auto;
}

.sidebar-info__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.sidebar-info__intro h4 {
  font-size: var(--fs-500);
  margin-bottom: var(--sp-2);
}

.sidebar-info__intro p {
  font-size: var(--fs-300);
  color: var(--ink-600);
  line-height: var(--lh-relaxed);
}

.sidebar-info__contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--bg-50);
  border-radius: var(--r-md);
}

.sidebar-info__contact h5 {
  font-size: var(--fs-200);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--ink-500);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-2);
}

.sidebar-info__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-300);
  color: var(--ink-700);
}

.sidebar-info__contact-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--brand-500);
  margin-top: 3px;
}

.sidebar-info__contact-item a:hover { color: var(--brand-500); }

.sidebar-info__social {
  display: flex;
  gap: var(--sp-2);
}

.sidebar-info__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-circle);
  background: var(--bg-50);
  color: var(--ink-700);
  border: 1px solid var(--border);
  transition: all var(--motion-fast) var(--ease-out);
}

.sidebar-info__social a:hover {
  background: var(--brand-500);
  color: #fff;
  border-color: var(--brand-500);
  transform: translateY(-2px);
}

.sidebar-info__social svg { width: 16px; height: 16px; }


/* === components/product-section.css === */

/* ===========================================================================
   product-section.css — Sección de productos en home
   ========================================================================= */

.product-section {
  background: var(--bg-50);
  position: relative;
}

.product-section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--sp-10);
}

.product-section__head h2 {
  font-size: var(--fs-800);
  margin-bottom: var(--sp-3);
}

.product-section__head p {
  font-size: var(--fs-500);
  color: var(--ink-600);
  max-width: 56ch;
}


/* === components/contact-form.css === */

/* ===========================================================================
   contact-form.css — Formulario de contacto
   ========================================================================= */

.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  max-width: 640px;
  margin: var(--sp-8) auto 0;
  text-align: left;
}

@media (min-width: 700px) {
  .contact-form { grid-template-columns: 1fr 1fr; }
  .contact-form__field--full { grid-column: 1 / -1; }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.contact-form__label {
  font-family: var(--font-display);
  font-size: var(--fs-200);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.9);
}

.contact-form__label--required::after {
  content: " *";
  color: var(--accent-400);
}

.contact-form__input,
.contact-form__textarea,
.contact-form__select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-300);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-md);
  transition:
    border-color var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-body);
}

.contact-form__select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%23ffffff' d='M6 8L0 0h12z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 10px;
  padding-right: var(--sp-10);
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__select:focus {
  outline: none;
  border-color: var(--brand-300);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(0, 121, 43, 0.3);
}

.contact-form__input[aria-invalid="true"],
.contact-form__textarea[aria-invalid="true"],
.contact-form__select[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

.contact-form__error {
  display: none;
  font-size: var(--fs-100);
  color: var(--accent-300);
  margin-top: var(--sp-1);
}

.contact-form__error.is-visible {
  display: block;
}

/* Honeypot: oculto para usuarios, visible para bots */
.contact-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.contact-form__submit {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-2);
}

.contact-form__submit-btn {
  min-width: 180px;
}

.contact-form__status {
  flex: 1;
  font-size: var(--fs-200);
  font-weight: var(--fw-medium);
  text-align: right;
  min-height: 1.4em;
}

.contact-form__status--success { color: var(--success); }
.contact-form__status--error   { color: var(--accent-300); }
.contact-form__status--loading { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 700px) {
  .contact-form__status { text-align: left; width: 100%; }
}


/* === pages/contacto.css === */

/* ===========================================================================
   contacto.css — Estilos específicos de la página de Contacto
   (canales directos + lista compacta de teléfonos por sucursal/centro)
   ========================================================================= */

/* Los 3 canales principales usan .service-card (ya estilizado).
   Solo ajustes menores de espaciado cuando están en la página de contacto. */
.contact-channels .grid {
  gap: var(--sp-4);
}

/* Lista compacta de sucursales + centros (estética, fácil de copiar/tocar) */
.locations-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

@media (min-width: 640px) {
  .locations-compact {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

.location-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-200);
  color: var(--ink-700);
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.location-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.location-item__name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  flex: 1 1 100%;
  min-width: 0;
  color: var(--ink-900);
}

.location-item__phone {
  white-space: nowrap;
  color: var(--brand-500);
  text-decoration: none;
}

.location-item__phone:hover {
  text-decoration: underline;
}

.location-item .btn--whatsapp {
  padding: 0.2em 0.55em;
  font-size: 0.82em;
  line-height: 1;
  gap: 0.25em;
}

.location-item .badge {
  font-size: 0.68em;
  padding: 0.05em 0.45em;
  vertical-align: middle;
}

/* === pages/nosotros.css === */

/* ===========================================================================
   nosotros.css — Estilos específicos de la página "Nosotros"
   ========================================================================= */

.nosotros-hero {
  position: relative;
  padding: var(--sp-20) 0 var(--sp-16);
  background: linear-gradient(135deg, var(--brand-50) 0%, var(--bg-50) 100%);
  text-align: center;
  overflow: hidden;
}

.nosotros-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%, var(--brand-100) 0%, transparent 50%),
                    radial-gradient(circle at 80% 70%, var(--accent-100) 0%, transparent 50%);
  opacity: 0.4;
  pointer-events: none;
}

.nosotros-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-inline: auto;
}

.nosotros-hero h1 {
  font-size: var(--fs-900);
  margin-block: var(--sp-3) var(--sp-5);
  text-wrap: balance;
}

.nosotros-hero p {
  font-size: var(--fs-500);
  color: var(--ink-600);
  line-height: var(--lh-relaxed);
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

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

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

.value-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  text-align: center;
  transition: transform var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-circle);
  background: var(--brand-50);
  color: var(--brand-500);
  margin-bottom: var(--sp-4);
}

.value-card__icon svg {
  width: 32px;
  height: 32px;
}

.value-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  margin-bottom: var(--sp-2);
}

.value-card__desc {
  font-size: var(--fs-300);
  color: var(--ink-600);
  line-height: var(--lh-relaxed);
}


/* === pages/sucursales.css === */

/* ===========================================================================
   sucursales.css — Estilos específicos de la página "Sucursales"
   ========================================================================= */

.sucursales-hero {
  padding: var(--sp-16) 0 var(--sp-10);
  background: linear-gradient(135deg, var(--brand-50) 0%, var(--bg-50) 100%);
  text-align: center;
}

.sucursales-hero h1 {
  font-size: var(--fs-900);
  margin-block: var(--sp-3) var(--sp-5);
}

.sucursales-hero p {
  font-size: var(--fs-500);
  color: var(--ink-600);
  max-width: 720px;
  margin-inline: auto;
}

.branches-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  /* Evita que el contenido (mapas) haga crecer las celdas */
  min-width: 0;
}

.branches-grid > * { min-width: 0; }

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

/* ===========================================================================
   Centros de Distribución B2B (nueva sección)
   ========================================================================= */

.centros-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}

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

.centro-card {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.centro-card__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.centro-card__pin {
  width: 36px;
  height: 36px;
  border-radius: var(--r-circle);
  background: var(--brand-50);
  color: var(--brand-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.centro-card__pin svg { width: 18px; height: 18px; }

.centro-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
  margin: 0;
  flex: 1;
}

.centro-card__actions .btn {
  width: 100%;
  justify-content: center;
}

/* Placeholder elegante para la imagen futura (no vacío, con espacio real) */
.distribution-placeholder {
  aspect-ratio: 16 / 9;
  border: 2px dashed var(--border);
  background: var(--bg-50);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-500);
  font-size: var(--fs-400);
  text-align: center;
  padding: var(--sp-6);
}

.distribution-placeholder svg {
  width: 42px;
  height: 42px;
  color: var(--brand-500);
  margin-bottom: var(--sp-2);
}


/* === pages/productos.css === */

/* ===========================================================================
   productos.css — Estilos específicos de la página "Productos"
   ========================================================================= */

.productos-hero {
  padding: var(--sp-16) 0 var(--sp-10);
  background: linear-gradient(135deg, var(--brand-50) 0%, var(--bg-50) 100%);
  text-align: center;
}

.productos-hero h1 {
  font-size: var(--fs-900);
  margin-block: var(--sp-3) var(--sp-5);
}

.productos-hero p {
  font-size: var(--fs-500);
  color: var(--ink-600);
  max-width: 720px;
  margin-inline: auto;
}

.categories-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

@media (min-width: 800px) {
  .categories-grid { grid-template-columns: repeat(3, 1fr); }
}

.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  color: inherit;
}

.category-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-50);
}

.category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-out);
}

.category-card:hover .category-card__media img {
  transform: scale(1.05);
}

.category-card__body {
  padding: var(--sp-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.category-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
}

.category-card__desc {
  font-size: var(--fs-300);
  color: var(--ink-600);
  line-height: var(--lh-relaxed);
  flex: 1;
}

.category-card__cta {
  font-family: var(--font-display);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  color: var(--brand-500);
  margin-top: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Fix: las flechas (ICON_ARROW svg) junto a "Ver más" estaban desproporcionadamente
   grandes porque el svg sin width/height explícito usaba el default del browser (~300px).
   Con 1em escala con el tamaño de fuente del cta y respeta el diseño. */
.category-card__cta svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Filter bar (subcategorías embutidos) */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
  justify-content: center;
}


/* === pages/recetas.css === */

/* ===========================================================================
   recetas.css — Estilos específicos de la página "Recetas"
   ========================================================================= */

.recetas-hero {
  padding: var(--sp-16) 0 var(--sp-10);
  background: linear-gradient(135deg, var(--brand-50) 0%, var(--bg-50) 100%);
  text-align: center;
}

.recetas-hero h1 {
  font-size: var(--fs-900);
  margin-block: var(--sp-3) var(--sp-5);
}

.recetas-hero p {
  font-size: var(--fs-500);
  color: var(--ink-600);
  max-width: 720px;
  margin-inline: auto;
}

.recetas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

@media (min-width: 800px) {
  .recetas-grid { grid-template-columns: repeat(3, 1fr); }
}