/* ============================================================================
   HECHO EN CASA 369 — Sistema de diseño
   Extraído de los 27 flyers de img/Assets/ + img/Menu_Actual.jpeg
   Fuente de verdad: IdentidadVisual.md
   ========================================================================== */

/* --- 0. Tipografías auto-alojadas ---------------------------------------
   Descargadas de Google Fonts y servidas desde /fonts: el sitio no depende
   de un CDN externo, carga más rápido y funciona sin conexión.
   ---------------------------------------------------------------------- */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lobster-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lobster-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/nunito-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/nunito-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/nunito-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/nunito-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 1. Tokens ------------------------------------------------------------ */
:root {
  /* Paleta verificada por muestreo cromático sobre los flyers reales */
  --papel:        #F7EFE0;  /* Crema papel artesanal — fondo general      19.8% */
  --papel-claro:  #FDF9F1;  /* Crema luz — tarjetas, superficies elevadas        */
  --kraft:        #E9D6B6;  /* Kraft tostado — franjas, separadores       11.8% */
  --kraft-osc:    #D8BC90;  /* Kraft profundo — bordes, sombras de papel   10.6% */

  --chocolate:    #4A2C18;  /* Marrón chocolate — títulos y texto fuerte    7.2% */
  --chocolate-osc:#2E1B0F;  /* Chocolate oscuro — texto sobre crema              */

  --oliva:        #5F6F3C;  /* Verde oliva — cintas, sellos, botones            */
  --oliva-osc:    #3E4A32;  /* Verde bosque — sellos de precio, pie         9.8% */
  --oliva-claro:  #8A9A63;  /* Verde claro — bordes suaves, estados hover       */

  --mostaza:      #E0A526;  /* Mostaza dorado — precios, CTA, subrayados    6.5% */
  --mostaza-osc:  #BA782F;  /* Ámbar tostado — hover, detalles              5.4% */

  --rojo:         #C0392F;  /* Rojo corazón — solo acentos pequeños             */
  --tinta:        #33261D;  /* Texto de cuerpo                                   */
  --claro:        #FFFBF2;  /* Blanco crema — texto sobre áreas oscuras         */

  /* Tipografía: 2 principales + 1 auxiliar (regla IdentidadVisual §3) */
  --f-display: "Anton", "Oswald", "Arial Narrow", sans-serif;
  --f-script:  "Lobster", "Brush Script MT", cursive;
  --f-cuerpo:  "Nunito Sans", "Poppins", "Segoe UI", system-ui, sans-serif;

  /* Escala tipográfica fluida */
  --t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --t-sm:   clamp(0.86rem, 0.83rem + 0.18vw, 0.95rem);
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --t-md:   clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --t-lg:   clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --t-xl:   clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --t-2xl:  clamp(2.6rem, 1.9rem + 3.4vw, 4.8rem);

  /* Espaciado */
  --e-1: 0.35rem;  --e-2: 0.7rem;  --e-3: 1.1rem;
  --e-4: 1.7rem;   --e-5: 2.6rem;  --e-6: 4rem;   --e-7: 6rem;

  --ancho: 1180px;
  --radio: 16px;
  --radio-sm: 10px;
  --radio-lg: 26px;

  --sombra-1: 0 2px 8px rgba(74, 44, 24, 0.08);
  --sombra-2: 0 8px 24px rgba(74, 44, 24, 0.13);
  --sombra-3: 0 18px 46px rgba(74, 44, 24, 0.18);

  --borde: 1.5px solid rgba(74, 44, 24, 0.16);
}

/* --- 2. Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--f-cuerpo);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--tinta);
  background-color: var(--papel);
  /* Textura de papel artesanal: fibra + manchas cálidas muy sutiles */
  background-image:
    radial-gradient(ellipse 60% 40% at 12% 4%,  rgba(74,44,24,0.045), transparent 70%),
    radial-gradient(ellipse 50% 45% at 88% 92%, rgba(95,111,60,0.05), transparent 70%),
    radial-gradient(ellipse 40% 30% at 72% 28%, rgba(224,165,38,0.045), transparent 70%),
    repeating-linear-gradient(94deg, rgba(74,44,24,0.014) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(4deg,  rgba(74,44,24,0.011) 0 1px, transparent 1px 6px);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--oliva); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--mostaza-osc); }

::selection { background: var(--mostaza); color: var(--chocolate-osc); }

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

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--oliva-osc); color: var(--claro);
  padding: .7rem 1.3rem; border-radius: 0 0 var(--radio-sm) 0; font-weight: 700;
}
.saltar:focus { left: 0; }

/* --- 3. Tipografía -------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--chocolate);
  line-height: 1.04;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { text-wrap: pretty; }

.script {
  font-family: var(--f-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--oliva);
  font-size: var(--t-md);
  line-height: 1.35;
}

.kicker {
  font-family: var(--f-cuerpo);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mostaza-osc);
}

.plomo { color: rgba(51,38,29,.76); }
.centro { text-align: center; }

/* Subrayado a mano bajo un título (flyer "DE MAICENA") */
.subrayado-mano {
  display: inline-block;
  background-image: linear-gradient(var(--mostaza), var(--mostaza));
  background-repeat: no-repeat;
  background-size: 100% 5px;
  background-position: 0 100%;
  padding-bottom: 4px;
}

/* --- 4. Layout ------------------------------------------------------------ */
.contenedor { width: min(100% - 2.4rem, var(--ancho)); margin-inline: auto; }
.contenedor-sm { width: min(100% - 2.4rem, 760px); margin-inline: auto; }

section { padding-block: var(--e-6); }
@media (max-width: 640px) { section { padding-block: var(--e-5); } }

.seccion-cabecera { text-align: center; margin-bottom: var(--e-5); }
.seccion-cabecera .script { margin-top: var(--e-1); }

/* Franja kraft para alternar secciones */
.franja-kraft {
  background:
    linear-gradient(rgba(233,214,182,.55), rgba(233,214,182,.55)),
    var(--papel);
  border-block: var(--borde);
}
.franja-oliva {
  background: var(--oliva-osc);
  color: var(--claro);
}
.franja-oliva h1, .franja-oliva h2, .franja-oliva h3 { color: var(--claro); }
.franja-oliva .script { color: var(--mostaza); }
.franja-oliva .kicker { color: var(--mostaza); }

/* --- 5. Cinta (ribbon) — componente firma de los flyers ------------------- */
.cinta {
  position: relative;
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--oliva-osc);
  color: var(--claro);
  font-family: var(--f-display);
  font-size: var(--t-md);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .5em 1.5em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%);
  padding-inline: 2.2em;
}
.cinta--mostaza { background: var(--mostaza); color: var(--chocolate-osc); }
.cinta--chocolate { background: var(--chocolate); }
.cinta::before, .cinta::after {
  content: "♥"; font-family: var(--f-cuerpo); font-size: .62em; opacity: .9;
}
.cinta--simple::before, .cinta--simple::after { content: none; }

/* Pincelada (brush band) — cierre de flyer */
.pincelada {
  display: block; text-align: center;
  background: var(--oliva);
  color: var(--claro);
  font-family: var(--f-script);
  font-size: var(--t-md);
  padding: .55em 2.4em;
  border-radius: 40% 40% 42% 42% / 58% 58% 55% 55%;
  transform: rotate(-.35deg);
}
.pincelada--crema {
  background: var(--papel-claro);
  color: var(--chocolate);
  font-family: var(--f-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --- 6. Sello de precio (circular stamp) ---------------------------------- */
.sello {
  --sello-tam: 118px;
  position: relative;
  flex: 0 0 auto;
  width: var(--sello-tam); height: var(--sello-tam);
  display: grid; place-content: center; text-align: center;
  border-radius: 50%;
  background: var(--oliva-osc);
  color: var(--claro);
  box-shadow: var(--sombra-2);
  transform: rotate(-4deg);
}
.sello::before {
  content: ""; position: absolute; inset: 7px;
  border: 2px dashed rgba(255, 251, 242, .55);
  border-radius: 50%;
}
.sello .valor {
  font-family: var(--f-display);
  font-size: calc(var(--sello-tam) * .26);
  line-height: 1; letter-spacing: .01em;
}
.sello .formato {
  font-size: calc(var(--sello-tam) * .098);
  font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: .3em; opacity: .95;
  padding-inline: .6em;
}
.sello--mostaza { background: var(--mostaza); color: var(--chocolate-osc); }
.sello--mostaza::before { border-color: rgba(46,27,15,.45); }
.sello--sm { --sello-tam: 84px; }
.sello--lg { --sello-tam: 168px; }

/* Medallón de precio (tarjeta crema con borde punteado) */
.medallon {
  display: inline-flex; flex-direction: column; align-items: center;
  background: var(--papel-claro);
  border: 3px dashed var(--kraft-osc);
  border-radius: var(--radio-lg);
  padding: .8rem 1.6rem;
  box-shadow: var(--sombra-1);
}
.medallon .valor {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  color: var(--chocolate-osc);
  line-height: 1;
}
.medallon .formato {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mostaza-osc); margin-top: .35rem;
}

/* --- 7. Botones ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--f-cuerpo);
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .82em 1.7em;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primario { background: var(--oliva-osc); color: var(--claro); box-shadow: var(--sombra-2); }
.btn--primario:hover { background: var(--oliva); color: var(--claro); box-shadow: var(--sombra-3); }

.btn--mostaza { background: var(--mostaza); color: var(--chocolate-osc); box-shadow: var(--sombra-2); }
.btn--mostaza:hover { background: var(--mostaza-osc); color: var(--claro); }

.btn--contorno { background: transparent; color: var(--chocolate); border-color: var(--chocolate); }
.btn--contorno:hover { background: var(--chocolate); color: var(--claro); }

.btn--claro { background: var(--papel-claro); color: var(--chocolate); }
.btn--claro:hover { background: var(--claro); }

.btn--sm { font-size: var(--t-xs); padding: .62em 1.25em; }
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; }

/* --- 8. Cabecera ---------------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 239, 224, .93);
  backdrop-filter: blur(10px);
  border-bottom: var(--borde);
  transition: box-shadow .2s ease;
}
.cabecera.pegada { box-shadow: var(--sombra-2); }
.cabecera-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3); padding-block: .7rem;
}
.logo {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-display); font-size: var(--t-md);
  color: var(--chocolate); text-transform: uppercase; letter-spacing: .04em;
}
.logo:hover { color: var(--chocolate); }
.logo-marca {
  display: grid; place-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--oliva-osc); color: var(--claro);
  font-size: .82rem; letter-spacing: 0;
  flex: 0 0 auto;
}
.logo-texto { display: flex; flex-direction: column; line-height: 1; }
.logo-texto small {
  font-family: var(--f-cuerpo); font-size: .58rem; font-weight: 800;
  letter-spacing: .17em; color: var(--mostaza-osc); text-transform: uppercase;
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: .3rem; }
.nav a {
  font-size: var(--t-sm); font-weight: 700; color: var(--chocolate);
  padding: .45rem .75rem; border-radius: 999px;
  transition: background .16s ease, color .16s ease;
}
.nav a:hover, .nav a.activo { background: var(--oliva-osc); color: var(--claro); }
.nav .btn { margin-left: .4rem; }
/* La regla .nav a fija color chocolate y ganaba por especificidad al botón,
   dejando texto chocolate sobre verde oscuro (contraste 1.7:1). */
.nav a.btn--primario { color: var(--claro); }
.nav a.btn--primario:hover { color: var(--claro); }
.nav a.btn--mostaza { color: var(--chocolate-osc); }
.nav a.btn--contorno { color: var(--chocolate); }

.nav-toggle {
  display: none; background: none; border: 2px solid var(--chocolate);
  border-radius: var(--radio-sm); padding: .4rem .55rem; cursor: pointer;
  color: var(--chocolate);
}
.nav-toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.2; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 64px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: var(--papel); border-bottom: var(--borde);
    padding: var(--e-3) 1.2rem var(--e-4);
    box-shadow: var(--sombra-2);
    transform: translateY(-130%); transition: transform .24s ease;
  }
  .nav.abierto { transform: translateY(0); }
  .nav a { padding: .7rem .9rem; }
  .nav .btn { margin: .5rem 0 0; }
}

/* --- 9. Hero -------------------------------------------------------------- */
.hero { position: relative; padding-block: var(--e-7) var(--e-6); overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--e-5); align-items: center;
}
.hero h1 { margin-block: var(--e-2) var(--e-2); }
.hero h1 .linea-script {
  display: block; font-family: var(--f-script); text-transform: none;
  color: var(--oliva); font-size: .52em; letter-spacing: 0; margin-top: .12em;
}
.hero-texto > .cinta { margin-bottom: var(--e-3); }
.hero-desc { font-size: var(--t-md); max-width: 46ch; margin-bottom: var(--e-4); }
.hero-acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero-marco { position: relative; }
.hero-foto {
  position: relative;
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: 6px solid var(--papel-claro);
  box-shadow: var(--sombra-3);
  aspect-ratio: 4 / 3;
  transform: rotate(1.2deg);
}
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.hero-marco .sello { position: absolute; right: -14px; bottom: -20px; z-index: 2; }
.hero-marco .cinta {
  position: absolute; left: -10px; top: 18px; z-index: 2;
  font-size: var(--t-sm); transform: rotate(-2.5deg);
}

.hero-datos {
  display: flex; flex-wrap: wrap; gap: var(--e-4);
  margin-top: var(--e-5); padding-top: var(--e-4);
  border-top: 2px dashed var(--kraft-osc);
}
.hero-dato { display: flex; align-items: center; gap: .7rem; }
.hero-dato strong {
  font-family: var(--f-display); font-size: var(--t-md); color: var(--chocolate);
  display: block; line-height: 1;
}
.hero-dato span { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mostaza-osc); }

@media (max-width: 880px) {
  .hero { padding-block: var(--e-5); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--e-4); }
  .hero-marco { max-width: 480px; margin-inline: auto; }
}

/* --- 10. Iconos redondos + atributos (fila de beneficios del flyer) ------- */
.icono-circ {
  display: grid; place-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--oliva); color: var(--claro);
  flex: 0 0 auto;
}
.icono-circ svg { width: 26px; height: 26px; fill: currentColor; }
.icono-circ--mostaza { background: var(--mostaza); color: var(--chocolate-osc); }
.icono-circ--crema { background: var(--papel-claro); color: var(--oliva); border: 2px solid var(--oliva-claro); }

.atributos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e-3);
  background: var(--papel-claro);
  border: 2px dashed var(--kraft-osc);
  border-radius: var(--radio-lg);
  padding: var(--e-3) var(--e-4);
}
.atributo { display: flex; align-items: center; gap: .85rem; }
.atributo h4 { font-family: var(--f-cuerpo); font-size: var(--t-sm); font-weight: 900;
  letter-spacing: .04em; color: var(--chocolate); line-height: 1.25; }
.atributo p { font-size: var(--t-xs); color: rgba(51,38,29,.72); line-height: 1.4; }

/* --- 11. Tarjeta de producto --------------------------------------------- */
.grilla-productos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: var(--e-4);
}
.producto {
  position: relative; display: flex; flex-direction: column;
  background: var(--papel-claro);
  border: var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.producto:hover { transform: translateY(-5px); box-shadow: var(--sombra-3); border-color: var(--oliva-claro); }
.producto-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--kraft); }
.producto-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.producto:hover .producto-foto img { transform: scale(1.06); }

.producto-precio {
  position: absolute; right: 12px; bottom: 12px;
  background: var(--oliva-osc); color: var(--claro);
  font-family: var(--f-display); font-size: var(--t-md);
  padding: .28em .8em; border-radius: 999px;
  box-shadow: var(--sombra-2);
  border: 2px solid var(--papel-claro);
}
.producto-cat {
  position: absolute; left: 12px; top: 12px;
  background: rgba(253,249,241,.94); color: var(--oliva-osc);
  font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  padding: .32em .8em; border-radius: 999px;
}

.producto-cuerpo { padding: var(--e-3); display: flex; flex-direction: column; flex: 1; gap: .5rem; }
.producto-cuerpo h3 { font-size: var(--t-md); }
.producto-cuerpo p { font-size: var(--t-sm); color: rgba(51,38,29,.76); flex: 1; }
.producto-formato { font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mostaza-osc); }
.producto-acciones { display: flex; gap: .5rem; margin-top: .3rem; }
.producto-acciones .btn { flex: 1; }

/* --- 12. Filtros del catálogo -------------------------------------------- */
.filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-bottom: var(--e-4);
}
.chip {
  font-family: var(--f-cuerpo);
  font-size: var(--t-sm); font-weight: 800; letter-spacing: .04em;
  padding: .55em 1.15em; border-radius: 999px;
  border: 2px solid var(--kraft-osc);
  background: var(--papel-claro); color: var(--chocolate);
  cursor: pointer; transition: all .16s ease;
  display: inline-flex; align-items: center; gap: .45rem;
}
.chip:hover { border-color: var(--oliva); }
.chip[aria-pressed="true"] { background: var(--oliva-osc); border-color: var(--oliva-osc); color: var(--claro); }
.chip .cuenta { font-size: .74em; opacity: .75; }

.buscador { position: relative; margin-left: auto; min-width: 230px; flex: 0 1 300px; }
.buscador input {
  width: 100%; font-family: var(--f-cuerpo); font-size: var(--t-sm);
  padding: .7em 1em .7em 2.6em;
  border: 2px solid var(--kraft-osc); border-radius: 999px;
  background: var(--papel-claro); color: var(--tinta);
}
.buscador input:focus { outline: none; border-color: var(--oliva); }
.buscador svg {
  position: absolute; left: .95em; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; fill: none; stroke: var(--oliva); stroke-width: 2.2;
}
@media (max-width: 640px) { .buscador { margin-left: 0; flex: 1 1 100%; } }

.sin-resultados { text-align: center; padding: var(--e-6) 0; color: rgba(51,38,29,.66); }

/* --- 13. Ficha de producto ----------------------------------------------- */
.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); align-items: start; }
.ficha-galeria { position: sticky; top: 96px; }
.ficha-foto {
  border-radius: var(--radio-lg); overflow: hidden;
  border: 7px solid var(--papel-claro); box-shadow: var(--sombra-3);
  aspect-ratio: 4 / 3;
}
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha h1 { font-size: var(--t-xl); margin-block: var(--e-2) var(--e-1); }
.ficha-lema { margin-bottom: var(--e-3); }
.ficha-desc { font-size: var(--t-md); margin-bottom: var(--e-4); }
.ficha-precios { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center;
  margin-bottom: var(--e-4); }
.ficha .atributos { margin-block: var(--e-4); }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: var(--e-4); }
.migas { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mostaza-osc); }
.migas a { color: inherit; }

.alergenos {
  background: var(--papel-claro); border: 2px solid var(--kraft-osc);
  border-left: 6px solid var(--mostaza);
  border-radius: var(--radio-sm); padding: var(--e-3);
}
.alergenos h4 { font-family: var(--f-cuerpo); font-size: var(--t-sm); font-weight: 900;
  letter-spacing: .05em; color: var(--chocolate); margin-bottom: .5rem; }
.etiquetas { display: flex; flex-wrap: wrap; gap: .45rem; }
.etiqueta {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .04em;
  padding: .3em .85em; border-radius: 999px;
  background: var(--kraft); color: var(--chocolate);
}
.etiqueta--ok { background: var(--oliva); color: var(--claro); }

@media (max-width: 880px) {
  .ficha { grid-template-columns: 1fr; }
  .ficha-galeria { position: static; }
}

/* --- 14. Nosotros / historia --------------------------------------------- */
.nosotros-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--e-5); align-items: center; }
.marco-papel {
  background: var(--papel-claro);
  border: var(--borde);
  border-radius: var(--radio-lg);
  padding: var(--e-4);
  box-shadow: var(--sombra-1);
  position: relative;
}
.marco-papel::before {
  content: ""; position: absolute; inset: 9px;
  border: 2px dashed var(--kraft-osc); border-radius: calc(var(--radio-lg) - 8px);
  pointer-events: none;
}
.marco-papel > * { position: relative; }
.marco-logo {
  border-radius: var(--radio-lg); overflow: hidden; border: 7px solid var(--papel-claro);
  box-shadow: var(--sombra-2); background: var(--papel-claro);
}
.marco-logo img { width: 100%; max-width: 380px; margin-inline: auto; }
.marco-logo figcaption {
  text-align: center; font-family: var(--f-script); color: var(--oliva);
  padding: .7rem; font-size: var(--t-md);
}
@media (max-width: 880px) { .nosotros-grid { grid-template-columns: 1fr; } }

/* --- 15. Blog: tarjetas de receta ---------------------------------------- */
.grilla-recetas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--e-4);
}
.receta-card {
  display: flex; flex-direction: column;
  background: var(--papel-claro);
  border: var(--borde); border-radius: var(--radio-lg);
  overflow: hidden; box-shadow: var(--sombra-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.receta-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-3); border-color: var(--oliva-claro); }
.receta-card a { color: inherit; display: flex; flex-direction: column; height: 100%; }
.receta-tapa {
  aspect-ratio: 16 / 9; display: grid; place-content: center;
  background: linear-gradient(150deg, var(--kraft), var(--kraft-osc));
  font-size: 3.2rem; position: relative;
}
.receta-tapa::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,251,242,.14) 0 8px, transparent 8px 16px);
}
.receta-card-cuerpo { padding: var(--e-3); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.receta-card h3 { font-size: var(--t-md); }
.receta-card p { font-size: var(--t-sm); color: rgba(51,38,29,.76); flex: 1; }
.receta-meta {
  display: flex; flex-wrap: wrap; gap: .8rem;
  font-size: var(--t-xs); font-weight: 700; color: var(--mostaza-osc);
  letter-spacing: .04em; text-transform: uppercase;
  padding-top: .6rem; border-top: 1px dashed var(--kraft-osc);
}

/* Destacado del día */
.destacado {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--oliva-osc); color: var(--claro);
  border-radius: var(--radio-lg); overflow: hidden;
  box-shadow: var(--sombra-3);
}
.destacado-info { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); }
.destacado-info h2, .destacado-info h3 { color: var(--claro); }
.destacado-info p { color: rgba(255,251,242,.86); }
.destacado-arte {
  display: grid; place-content: center; font-size: 7rem;
  background:
    repeating-linear-gradient(45deg, rgba(255,251,242,.06) 0 14px, transparent 14px 28px),
    linear-gradient(150deg, var(--oliva), var(--oliva-osc));
  min-height: 260px;
}
.destacado .btn { align-self: flex-start; }
.destacado-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: var(--e-2); }
@media (max-width: 820px) { .destacado { grid-template-columns: 1fr; } .destacado-arte { min-height: 180px; font-size: 5rem; } }

/* Artículo de receta */
.articulo { max-width: 760px; margin-inline: auto; }
.articulo h2 {
  font-size: var(--t-lg); margin-top: var(--e-5); margin-bottom: var(--e-2);
  padding-bottom: .35rem; border-bottom: 3px solid var(--mostaza);
  display: inline-block;
}
.articulo p { margin-bottom: var(--e-2); }
.articulo ul, .articulo ol { margin: 0 0 var(--e-3) 1.3rem; }
.articulo li { margin-bottom: .45rem; }
.articulo ul { list-style: none; margin-left: 0; }
.articulo ul li { position: relative; padding-left: 1.7rem; }
.articulo ul li::before {
  content: ""; position: absolute; left: .35rem; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--mostaza);
}
.articulo ol { counter-reset: paso; list-style: none; margin-left: 0; }
.articulo ol li { position: relative; padding-left: 2.4rem; margin-bottom: .85rem; }
.articulo ol li::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; left: 0; top: .05em;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--oliva-osc); color: var(--claro);
  font-family: var(--f-display); font-size: .82rem;
  display: grid; place-content: center;
}

.chips-meta { display: flex; flex-wrap: wrap; gap: .55rem; margin-block: var(--e-3); }
.chip-meta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--papel-claro); border: 2px solid var(--kraft-osc);
  border-radius: 999px; padding: .35em .95em;
  font-size: var(--t-xs); font-weight: 800; color: var(--chocolate);
}

/* --- 16. CTA / bloque de pedido ------------------------------------------ */
.cta-bloque {
  text-align: center;
  background: var(--papel-claro);
  border: 3px dashed var(--kraft-osc);
  border-radius: var(--radio-lg);
  padding: var(--e-5) var(--e-4);
  box-shadow: var(--sombra-1);
}
.cta-bloque h2, .cta-bloque h3 { margin-bottom: var(--e-2); }
.cta-bloque .btn { margin-top: var(--e-3); }

/* --- 17. Contacto --------------------------------------------------------- */
.grilla-contacto {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e-3);
}
.tarjeta-contacto {
  background: var(--papel-claro); border: var(--borde);
  border-radius: var(--radio-lg); padding: var(--e-4) var(--e-3);
  text-align: center; box-shadow: var(--sombra-1);
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tarjeta-contacto:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.tarjeta-contacto .etiqueta-campo {
  font-size: var(--t-xs); font-weight: 900; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mostaza-osc);
}
.tarjeta-contacto .dato { font-family: var(--f-display); font-size: var(--t-md); color: var(--chocolate); }
.tarjeta-contacto .dato a { color: inherit; }
.qr { width: 118px; border-radius: var(--radio-sm); border: 3px solid var(--papel); }

/* --- 18. Menú impreso + zona de entrega ----------------------------------- */
.menu-bloque {
  display: grid; grid-template-columns: 1.45fr 1fr;
  gap: var(--e-4); align-items: start;
}
.menu-hoja {
  background: var(--papel-claro); border: var(--borde);
  border-radius: var(--radio-lg); overflow: hidden; box-shadow: var(--sombra-2);
}
.menu-hoja a { display: block; }
.menu-hoja img { width: 100%; height: auto; transition: transform .35s ease; }
.menu-hoja a:hover img { transform: scale(1.02); }
.menu-hoja figcaption {
  padding: var(--e-3); text-align: center; font-size: var(--t-sm);
  color: rgba(51,38,29,.78); border-top: 2px dashed var(--kraft-osc);
}

.entrega-tarjeta {
  background: var(--papel-claro);
  border: 3px dashed var(--kraft-osc);
  border-radius: var(--radio-lg);
  padding: var(--e-4);
  box-shadow: var(--sombra-1);
  display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
}
.entrega-tarjeta h3 { font-size: var(--t-lg); }
.entrega-tarjeta .script { margin-top: -.35rem; }
.entrega-tarjeta p { font-size: var(--t-sm); }
.entrega-refs {
  background: var(--kraft); border-radius: var(--radio-sm);
  padding: .7rem .9rem; font-size: var(--t-xs) !important;
  line-height: 1.55; color: var(--chocolate-osc);
}
.entrega-aviso { font-weight: 700; color: var(--oliva-osc); }
.entrega-tarjeta .btn { margin-top: .3rem; }

@media (max-width: 880px) {
  .menu-bloque { grid-template-columns: 1fr; }
}

/* --- 19. Pie -------------------------------------------------------------- */
.pie {
  background: var(--oliva-osc); color: rgba(255,251,242,.82);
  padding-block: var(--e-5) var(--e-3); margin-top: var(--e-6);
}
.pie-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--e-4); }
.pie h4 { color: var(--mostaza); font-size: var(--t-sm); letter-spacing: .12em; margin-bottom: .8rem; }
.pie a { color: rgba(255,251,242,.82); }
.pie a:hover { color: var(--mostaza); }
.pie ul { list-style: none; display: flex; flex-direction: column; gap: .35rem; font-size: var(--t-sm); }
.pie .script { color: var(--mostaza); }
.pie-marca { font-family: var(--f-display); font-size: var(--t-lg); color: var(--claro); letter-spacing: .04em; }
.pie-legal {
  margin-top: var(--e-4); padding-top: var(--e-3);
  border-top: 1px solid rgba(255,251,242,.18);
  font-size: var(--t-xs); text-align: center; color: rgba(255,251,242,.6);
}
@media (max-width: 760px) { .pie-grid { grid-template-columns: 1fr; } }

/* --- 20. WhatsApp flotante ------------------------------------------------ */
.wa-flotante {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; display: grid; place-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .42);
  transition: transform .18s ease;
}
.wa-flotante:hover { transform: scale(1.08); }
.wa-flotante svg { width: 30px; height: 30px; fill: #fff; }

/* --- 21. Animación de entrada -------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .producto, .receta-card, .btn, .tarjeta-contacto { transition: none; }
}

/* --- 22. Impresión -------------------------------------------------------- */
@media print {
  .cabecera, .wa-flotante, .nav, .filtros, .btn { display: none !important; }
  body { background: #fff; }
  .producto, .marco-papel { box-shadow: none; break-inside: avoid; }
}

/* --- 23. Logo vectorial en la cabecera ----------------------------------- */
.cabecera .logo-marca {
  width: 46px; height: 46px; background: none; border-radius: 0;
  object-fit: contain; flex: 0 0 auto;
}
.logo-texto b { color: var(--mostaza-osc); font-weight: inherit; }
.pie-emblema { width: 132px; margin-bottom: var(--e-2); }

/* --- 24. Ajustes finos de iconos ------------------------------------------ */
.chip svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; fill: currentColor; }
.chip[aria-pressed="true"] svg { fill: currentColor; }
.tarjeta-contacto .icono-circ svg { width: 26px; height: 26px; }
.btn svg { flex: 0 0 auto; }

/* --- 25. Mapa de la zona de entrega --------------------------------------- */
.mapa-zona {
  --barra: 62px;              /* alto de la cabecera de Google My Maps */
  position: relative;
  width: 100%;
  aspect-ratio: var(--rel, 4 / 3);
  border-radius: var(--radio);
  overflow: hidden;           /* recorta la cabecera del embed */
  border: 3px solid var(--papel);
  box-shadow: var(--sombra-1);
  background: var(--kraft);
}
/* El embed de My Maps no tiene parámetro para ocultar su barra superior
   (título, avatar del propietario, compartir, pantalla completa). Se desplaza
   el iframe hacia arriba y se recorta con overflow, dejando solo el mapa.
   La atribución inferior de Google se conserva: es obligatoria. */
.mapa-zona iframe {
  position: absolute;
  top: calc(var(--barra) * -1);
  left: 0;
  width: 100%;
  height: calc(100% + var(--barra));
  border: 0;
  display: block;
}
.mapa-pie {
  font-size: var(--t-xs) !important;
  font-weight: 700; letter-spacing: .03em;
  margin-top: .5rem;
}
.mapa-pie a { color: var(--mostaza-osc); }
/* La tarjeta de entrega necesita más ancho cuando lleva mapa dentro */
.menu-bloque { grid-template-columns: 1.05fr 1fr; }
@media (max-width: 880px) { .menu-bloque { grid-template-columns: 1fr; } }

/* --- 26. Aviso del teléfono obsoleto del menú impreso ---------------------- */
/* El flyer publicado muestra un WhatsApp antiguo (+569 5920 2784). Mientras no
   se rehaga la imagen, esta nota evita que un cliente marque el número que no
   es. Al reemplazar img/Menu_Actual.jpeg, quitar esto y la nota del generador.
   Contexto: docs/DATOS-DEL-NEGOCIO.md §2 */
.nota-telefono {
  display: block;
  margin-top: .7rem;
  padding: .6rem .8rem;
  background: rgba(224, 165, 38, .16);
  border-left: 4px solid var(--mostaza);
  border-radius: var(--radio-sm);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--chocolate-osc);
  text-align: left;
}

/* --- 27. El nombre de la marca nunca se parte ------------------------------
   Regla de marca: "Hecho en Casa 369" se lee siempre en UNA sola línea, en
   cualquier ancho. El `369` forma parte del nombre, no es un añadido.
   Se combina `white-space: nowrap` con un tamaño que depende del viewport,
   para que en móvil encoja en vez de desbordarse.
   -------------------------------------------------------------------------- */
.marca-nombre {
  white-space: nowrap;
  display: inline-block;
}
.marca-nombre b { font-weight: inherit; color: var(--mostaza-osc); }

/* Cabecera: nombre y bajada son dos filas, pero el nombre va entero */
.logo-texto .marca-nombre { font-size: clamp(.92rem, 2.6vw, 1.35rem); }

/* H1 de portada: el límite por vw garantiza que quepa hasta en 320 px */
.titulo-marca .marca-nombre {
  font-size: min(var(--t-2xl), 10.6vw);
  line-height: 1;
}
.titulo-marca .linea-script { font-size: min(2.4rem, 7.2vw); }

/* Pie */
.pie-marca.marca-nombre { font-size: clamp(1.15rem, 4.2vw, var(--t-lg)); }