/* =============================================================
   PET HAPP · CARNIS — styles.css
   Índice:
   1. Tokens            2. Reset & base      3. Utilidades
   4. Tipografía        5. Fondo continuo    6. Header y navegación
   7. Componentes base  8. Media (fotos)     9. Secciones
   10. Bloques de página  11. Footer         12. Animaciones
   13. Responsive       14. Reduced motion
   ============================================================= */

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  /* -----------------------------------------------------------
     PALETA OFICIAL PET HAPP
     Fuente: "nueva paleta de colores.jpeg" (agosto 2026).
     Reemplaza la paleta anterior y también la del brief 1.1.

     Cada color tiene 4 variantes:
       ·  base   → relleno de fondo, el color "real" de la marca
       · -dark   → hover de botones
       · -deep   → estados presionados y bordes
       · -text   → la ÚNICA versión válida cuando el color es TEXTO
                   sobre fondo crema (ver nota de contraste abajo)
     ----------------------------------------------------------- */
  --cream:       #F3E8D5;   /* Crema — fondo principal */
  --cream-deep:  #E9DBC3;
  --cream-warm:  #EEDFC7;
  --paper:       #FFFFFF;

  /* Rojo de marca — color primario.
     Historial: #B81B18 (brief 1.0) → #8E2F3D (paleta agosto 2026) →
                #8A1524 → este.
     El #8A1524 era correcto pero se leía apagado: el pedido fue "más
     vívido, con más vida". Este valor NO se eligió a ojo — sale del
     CMYK del logo 2.0 (18.8 / 98 / 97.7 / 10.5, en "pet happ logo 2.0.pdf"),
     así que el rojo de la web y el de las piezas gráficas son el mismo.
     El token sigue llamándose --bordo para no renombrar ~40 reglas. */
  --bordo:       #B4121F;
  --bordo-dark:  #940F19;
  --bordo-deep:  #770C14;
  --bordo-text:  #B4121F;   /* 5.68:1 sobre crema — la base ya sirve */

  /* Naranja — Carnis de Pollo */
  --naranja:      #FF6B21;
  --naranja-dark: #DB6020;
  --naranja-deep: #A84716;
  --naranja-text: #A34413;  /* 5.10:1 — la base da 2.35:1, NO sirve como texto */

  /* Azul cobalto — Carnis de Pescado */
  --cobalto:      #2340E8;
  --cobalto-dark: #1D34BE;
  --cobalto-deep: #172A99;
  --cobalto-text: #2340E8;  /* 5.83:1 sobre crema — la base ya sirve */

  /* Verde pistacho — Caldo de Huesos y sección BARF */
  --pistacho:      #AFD03F;
  --pistacho-dark: #9BB839;
  --pistacho-deep: #74892A;
  --pistacho-text: #57681F; /* 5.08:1 — la base da 1.45:1, NO sirve como texto */

  --ink:         #211913;
  --ink-soft:    #3B2F27;
  --ink-mute:    #6E6155;

  /* -----------------------------------------------------------
     ⚠️ REGLA DE CONTRASTE — no romper
     Medido con WCAG sobre el crema #F3E8D5, con la paleta viva
     (septiembre 2026). Subir la saturación acercó todos los colores
     al piso, así que estos números valen menos margen que antes:

       rojo     5.68:1  ✅ texto        blanco encima: 6.89:1 ✅
       cobalto  5.83:1  ✅ texto        blanco encima: 7.07:1 ✅
       naranja  2.35:1  ❌ ilegible     blanco encima: 2.85:1 ❌
       pistacho 1.45:1  ❌ ilegible     blanco encima: 1.76:1 ❌

     El naranja y el pistacho van SOLO como relleno de fondo, y
     siempre con texto --ink encima (6.08:1 y 9.82:1, correctos).
     Cuando tengan que ser texto se usa su variante -text.
     Por eso existe --accent-text: nunca uses --accent para color
     de texto, aunque "se vea bien" en el naranja de tu pantalla.
     ----------------------------------------------------------- */

  /* Alias heredados — el resto del CSS y los data-accent del HTML
     siguen hablando de red/orange/blue. Mantenerlos evita renombrar
     ~40 reglas y todos los data-accent de src/pages/. */
  --red:         var(--bordo);
  --red-dark:    var(--bordo-dark);
  --red-deep:    var(--bordo-deep);

  --orange:      var(--naranja);
  --orange-deep: var(--naranja-dark);
  --orange-dark: var(--naranja-deep);

  --blue:        var(--cobalto);
  --blue-dark:   var(--cobalto-dark);
  --blue-deep:   var(--cobalto-deep);

  --green:       var(--pistacho);
  --green-dark:  var(--pistacho-dark);
  --green-deep:  var(--pistacho-deep);
  /* ----------------------------------------------------------- */

  --line:        rgba(33, 25, 19, 0.10);
  --line-strong: rgba(33, 25, 19, 0.18);

  /* Codificación de sabor */
  --flavor-res:     var(--bordo);
  --flavor-pollo:   var(--naranja);
  --flavor-pescado: var(--cobalto);
  --flavor-caldo:   var(--pistacho);

  /* TIPOGRAFÍA
     Anton = títulos, la misma del packaging (confirmada en el PDF
     de la etiqueta del Caldo de Huesos). Tiene UN SOLO peso (400) y
     es muy condensada: no la uses en textos chicos ni pidas 700/800
     sobre ella, el navegador la va a engordar sintéticamente y queda
     sucia. Todo lo que no sea h1/h2/h3 o un número grande va Poppins. */
  --font-display: "Anton", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Acento por defecto (lo pisan [data-accent] más abajo) */
  --accent:          var(--bordo);
  --accent-strong:   var(--bordo-dark);
  --accent-deep:     var(--bordo-deep);
  --accent-text:     var(--bordo-text);
  --accent-contrast: var(--cream);
  --accent-tint:     rgba(180, 18, 31, 0.07);
  --accent-soft:     rgba(180, 18, 31, 0.16);
  --accent-glow:     rgba(180, 18, 31, 0.30);

  /* Superficies */
  --surface-0: var(--cream);
  --surface-1: var(--cream-deep);
  --surface-2: var(--paper);

  /* Elevación — sombras tintadas en ink (cálidas, no grises).
     Este detalle es la mitad de la sensación "premium". */
  --shadow-1: 0 1px 2px rgba(33, 25, 19, .05), 0 2px 6px -2px rgba(33, 25, 19, .06);
  --shadow-2: 0 2px 4px rgba(33, 25, 19, .04), 0 8px 20px -8px rgba(33, 25, 19, .12);
  --shadow-3: 0 4px 10px rgba(33, 25, 19, .05), 0 18px 40px -16px rgba(33, 25, 19, .20);
  --shadow-4: 0 8px 20px rgba(33, 25, 19, .06), 0 34px 70px -28px rgba(33, 25, 19, .30);
  --shadow-accent: 0 18px 40px -18px var(--accent-glow);

  /* Escala de espaciado fluida */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 2.5rem;  --space-8: clamp(2.25rem, 3.2vw, 3rem);
  --space-9: clamp(2.75rem, 4.5vw, 4rem); --space-10: clamp(3.25rem, 5.2vw, 5.25rem);

  /* Radios */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 24px;  --r-xl: 32px;
  --r-pill: 999px;
  --blob: 42% 58% 63% 37% / 41% 44% 56% 59%;
  --blob-alt: 58% 42% 37% 63% / 44% 41% 59% 56%;

  /* Movimiento */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-1: .18s;  --dur-2: .32s;  --dur-3: .55s;  --dur-4: .9s;

  --container: 1180px;
  --container-narrow: 780px;
  --header-h: 74px;
  --measure: 65ch;
}

/* --- Acentos por página / sección ------------------------------
   Cada bloque define 5 cosas:
     --accent          relleno (fondos, barras, rellenos de icono)
     --accent-text     el mismo color pero legible como TEXTO sobre crema
     --accent-contrast qué color de texto va ENCIMA de --accent
     --accent-strong / -deep   hover y presionado
   Los rgba() están escritos a mano con el RGB de cada color: si
   cambiás un hex arriba, hay que actualizarlos acá también.
   ---------------------------------------------------------------- */
[data-accent="red"] {
  --accent: var(--bordo); --accent-strong: var(--bordo-dark); --accent-deep: var(--bordo-deep);
  --accent-text: var(--bordo-text);
  --accent-contrast: var(--cream);
  --accent-tint: rgba(180, 18, 31, .07); --accent-soft: rgba(180, 18, 31, .16); --accent-glow: rgba(180, 18, 31, .30);
}
[data-accent="orange"] {
  --accent: var(--naranja); --accent-strong: var(--naranja-dark); --accent-deep: var(--naranja-deep);
  --accent-text: var(--naranja-text);
  --accent-contrast: var(--ink);   /* ← nunca cream: el naranja no aguanta texto claro */
  --accent-tint: rgba(255, 107, 33, .12); --accent-soft: rgba(255, 107, 33, .24); --accent-glow: rgba(255, 107, 33, .34);
}
[data-accent="blue"] {
  --accent: var(--cobalto); --accent-strong: var(--cobalto-dark); --accent-deep: var(--cobalto-deep);
  --accent-text: var(--cobalto-text);
  --accent-contrast: var(--cream);
  --accent-tint: rgba(35, 64, 232, .07); --accent-soft: rgba(35, 64, 232, .16); --accent-glow: rgba(35, 64, 232, .30);
}
[data-accent="green"] {
  --accent: var(--pistacho); --accent-strong: var(--pistacho-dark); --accent-deep: var(--pistacho-deep);
  --accent-text: var(--pistacho-text);
  --accent-contrast: var(--ink);   /* ← nunca cream: el pistacho es clarísimo */
  --accent-tint: rgba(175, 208, 63, .22); --accent-soft: rgba(175, 208, 63, .38); --accent-glow: rgba(175, 208, 63, .45);
}
[data-accent="ink"] {
  --accent: var(--ink); --accent-strong: var(--ink-soft); --accent-deep: #100C09;
  --accent-text: var(--ink);
  --accent-contrast: var(--cream);
  --accent-tint: rgba(33, 25, 19, .06); --accent-soft: rgba(33, 25, 19, .14); --accent-glow: rgba(33, 25, 19, .28);
}

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--cream);
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

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

/* El reset de arriba (author CSS) pisa la regla [hidden]{display:none} del
   navegador porque tiene más especificidad — sin esto, toggles como el de
   Perro/Gato dejarían la imagen oculta visible igual. */
[hidden] { display: none !important; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { max-width: var(--measure); text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.08; letter-spacing: 0; font-family: var(--font-display); font-weight: 400; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--accent); color: var(--accent-contrast); }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Capa de contenido por encima del fondo continuo */
main, .site-footer { position: relative; z-index: 1; }

/* =============================================================
   3. UTILIDADES
   ============================================================= */
.container { max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.container.narrow { max-width: var(--container-narrow); }
@media (min-width: 720px)  { .container { padding-inline: 2rem; } }
@media (min-width: 1280px) { .container { padding-inline: 2.5rem; } }

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

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .8rem 1.3rem; background: var(--ink); color: var(--cream);
  z-index: 9999; border-radius: var(--r-sm); font-weight: 700;
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: .9rem;
  max-width: none;
}
.kicker-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-text); flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--accent-tint);
}

.section { padding-block: var(--space-10); position: relative; }
.section-tight { padding-block: var(--space-8); }
.section-head { margin-bottom: var(--space-8); }
.section-lead { max-width: 52ch; color: var(--ink-mute); font-size: 1.06rem; margin-top: 1rem; }
.section-foot { margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: 1rem; }

.brandline {
  font-family: var(--font-body); font-weight: 600; font-size: 1.2rem;
  color: var(--accent-text); font-style: italic; margin-top: 1.25rem;
}

/* =============================================================
   4. TIPOGRAFÍA
   ============================================================= */
h1 { font-size: clamp(2.5rem, 4.8vw + 1rem, 4.8rem); font-weight: 400; }
h2 { font-size: clamp(1.95rem, 2.5vw + 1rem, 3.1rem); font-weight: 400; max-width: 22ch; }
h3 { font-size: clamp(1.15rem, .6vw + 1rem, 1.45rem); font-weight: 400; }
strong, b { font-weight: 700; color: var(--ink); }
em { font-style: italic; }

/* =============================================================
   5. FONDO CONTINUO
   Capas de gradiente que se cruzan con el scroll. Las secciones
   son transparentes, así que no hay borde donde cortar.
   ============================================================= */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient-layer {
  position: absolute; inset: -10%;
  opacity: 0;
  transition: opacity 1.1s var(--ease-soft);
  will-change: opacity;
}
/* Los rgba() de acá son la paleta viva en RGB:
   rojo 180,18,31 · naranja 255,107,33 · cobalto 35,64,232 · pistacho 175,208,63
   Las alfas subieron ~50% respecto de agosto 2026: el pedido fue que el fondo
   "tenga más vida". Son el parámetro que más se nota al scrollear — más que
   el hex — así que si hay que retocar la intensidad, se retoca acá. */
.ambient-layer[data-ambient="cream"] {
  opacity: 1;
  background:
    radial-gradient(120% 80% at 78% 8%,  rgba(255, 107, 33,.16) 0%, transparent 58%),
    radial-gradient(100% 70% at 8% 92%,  rgba(180, 18, 31,.11)  0%, transparent 62%),
    linear-gradient(175deg, var(--cream) 0%, var(--cream-warm) 55%, var(--cream-deep) 100%);
}
.ambient-layer[data-ambient="orange"] {
  background:
    radial-gradient(110% 75% at 88% 18%, rgba(255, 107, 33,.34) 0%, transparent 60%),
    radial-gradient(90% 65% at 4% 88%,   rgba(180, 18, 31,.15)  0%, transparent 60%),
    linear-gradient(170deg, var(--cream-warm) 0%, #F6DFB8 60%, #F0D9B6 100%);
}
.ambient-layer[data-ambient="blue"] {
  background:
    radial-gradient(110% 78% at 12% 12%, rgba(35, 64, 232,.28)  0%, transparent 62%),
    radial-gradient(95% 62% at 92% 82%,  rgba(35, 64, 232,.14)  0%, transparent 58%),
    linear-gradient(180deg, var(--cream) 0%, #E7E8E8 55%, #DADEF0 100%);
}
.ambient-layer[data-ambient="red"] {
  background:
    radial-gradient(120% 80% at 50% 0%,  rgba(180, 18, 31,.30) 0%, transparent 62%),
    radial-gradient(90% 70% at 90% 95%,  rgba(119, 12, 20,.22)  0%, transparent 60%),
    linear-gradient(175deg, var(--cream-warm) 0%, #F1D8C4 60%, #EDCDB8 100%);
}
/* Verde pistacho — sección BARF y Caldo de Huesos */
.ambient-layer[data-ambient="green"] {
  background:
    radial-gradient(115% 78% at 20% 10%, rgba(175, 208, 63,.45) 0%, transparent 62%),
    radial-gradient(95% 65% at 88% 88%,  rgba(116, 137, 42,.20)  0%, transparent 58%),
    linear-gradient(178deg, var(--cream) 0%, #EEEDC8 58%, #E4E8B8 100%);
}
/* Grano finísimo: rompe el banding de los degradados grandes. */
.ambient-grain {
  position: absolute; inset: 0; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.35'/></svg>");
}

/* =============================================================
   6. HEADER Y NAVEGACIÓN
   ============================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
}

/* ⚠️ El vidrio esmerilado va en este ::before y NO en el .site-header.
   No es un capricho de estilo: `backdrop-filter` crea un BLOQUE
   CONTENEDOR para los descendientes `position: fixed`, y .mobile-menu
   (fixed, inset: 0) es hijo del header.
   Con el filtro sobre el header, apenas se scrolleaba 12px entraba
   .is-scrolled y el menú dejaba de medir contra el viewport: pasaba de
   390×844 a 390×130, encerrado en la franja de la barra. Se veía sólo
   la primera opción y el resto de la página quedaba debajo.
   Un pseudo-elemento no tiene descendientes, así que el efecto se ve
   idéntico y el menú vuelve a cubrir la pantalla. Lo mismo vale para
   transform, filter, perspective y will-change: ninguno puede volver
   al .site-header mientras el menú viva adentro. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: transparent;
  transition: background-color var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out),
              backdrop-filter var(--dur-3) var(--ease-out);
}
.site-header.is-scrolled::before {
  background: rgba(243, 232, 213, .82);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 1px 0 var(--line), 0 8px 28px -22px rgba(33, 25, 19, .5);
}

/* Barra de progreso de lectura */
.header-progress {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  transform: scaleX(var(--progress, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
}
.site-header.is-scrolled .header-progress { opacity: 1; }

/* z-index por encima de .mobile-menu (90): el menú vive dentro del <header>,
   así que sin esto la propia barra —logo y botón de cerrar— queda tapada
   por el panel al abrirlo. */
.header-row {
  position: relative; z-index: 95;
  display: flex; align-items: center; gap: 1rem; min-height: var(--header-h);
}

/* El logo es el lockup vectorial de marca (assets/logo-lockup.svg, exportado
   de "pet happ logo 2.0.pdf"). Antes era un isotipo dibujado a mano + el
   wordmark en Anton: ninguno de los dos era la marca real.
   El SVG es 375×185 (ratio 2.03:1). El alto manda, porque lo que no puede
   pasarse es --header-h (74px); el ancho sale solo. */
.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo-lockup {
  height: 46px; width: auto;
  transition: transform var(--dur-3) var(--ease-bounce);
}
.logo:hover .logo-lockup { transform: rotate(-3deg) scale(1.05); }
/* El footer va sobre --ink: usa la variante clara del lockup, donde la
   mitad oscura del wordmark ("pet") está en crema. Con el archivo normal
   esa palabra desaparecía contra el fondo. */
.logo-lockup-footer { height: 58px; width: auto; }

.main-nav { display: none; margin-left: auto; }
.main-nav ul { display: flex; gap: 1.4rem; align-items: center; }
.main-nav a {
  position: relative; display: block; padding: .4rem 0;
  font-weight: 600; font-size: .92rem; color: var(--ink-soft);
  transition: color var(--dur-2) var(--ease-out);
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent-text); border-radius: 2px;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--dur-3) var(--ease-out);
}
.main-nav a:hover { color: var(--accent-text); }
.main-nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.main-nav a[aria-current="page"] { color: var(--accent-text); }
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (min-width: 1060px) { .main-nav { display: block; } }

/* Botón hamburguesa */
.menu-toggle { margin-left: auto; width: 46px; height: 46px; display: grid; place-items: center; flex-shrink: 0; }
.menu-toggle-bars { position: relative; display: block; width: 24px; height: 16px; }
.menu-toggle-bars i {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out), width var(--dur-2) var(--ease-out);
}
.menu-toggle-bars i:nth-child(1) { top: 0; }
.menu-toggle-bars i:nth-child(2) { top: 7px; width: 70%; }
.menu-toggle-bars i:nth-child(3) { top: 14px; }
.menu-toggle:hover .menu-toggle-bars i:nth-child(2) { width: 100%; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars i:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1060px) { .menu-toggle { display: none; } }

/* Menú móvil */
.mobile-menu {
  position: fixed; inset: 0; top: 0;
  padding: calc(var(--header-h) + 1.5rem) 1.5rem 2rem;
  background:
    radial-gradient(90% 60% at 90% 4%, var(--accent-tint) 0%, transparent 60%),
    var(--cream);
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  z-index: 90;
  visibility: hidden; opacity: 0;
  clip-path: circle(0% at calc(100% - 44px) 38px);
  transition: clip-path var(--dur-3) var(--ease-out), opacity var(--dur-1) linear, visibility 0s linear var(--dur-3);
  overflow-y: auto;
}
.mobile-menu.is-open {
  visibility: visible; opacity: 1;
  clip-path: circle(150% at calc(100% - 44px) 38px);
  transition: clip-path var(--dur-4) var(--ease-out), opacity var(--dur-1) linear, visibility 0s linear 0s;
}
.mobile-menu-nav ul { display: flex; flex-direction: column; gap: .35rem; }
.mobile-menu-nav li {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.mobile-menu.is-open .mobile-menu-nav li { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-menu-nav li:nth-child(1) { transition-delay: .10s; }
.mobile-menu.is-open .mobile-menu-nav li:nth-child(2) { transition-delay: .16s; }
.mobile-menu.is-open .mobile-menu-nav li:nth-child(3) { transition-delay: .22s; }
.mobile-menu.is-open .mobile-menu-nav li:nth-child(4) { transition-delay: .28s; }
.mobile-menu.is-open .mobile-menu-nav li:nth-child(5) { transition-delay: .34s; }
.mobile-menu.is-open .mobile-menu-nav li:nth-child(6) { transition-delay: .40s; }
.mobile-menu.is-open .mobile-menu-nav li:nth-child(7) { transition-delay: .46s; }
.mobile-menu-nav a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  padding: .5rem 0; border-bottom: 1px solid var(--line);
  transition: color var(--dur-2) var(--ease-out), padding-left var(--dur-2) var(--ease-out);
}
.mobile-menu-nav a::after {
  content: "→"; font-size: .6em; opacity: 0; transform: translateX(-8px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.mobile-menu-nav a:hover, .mobile-menu-nav a[aria-current="page"] { color: var(--accent-text); padding-left: .5rem; }
.mobile-menu-nav a:hover::after, .mobile-menu-nav a[aria-current="page"]::after { opacity: 1; transform: none; }
.mobile-menu-foot { display: flex; flex-direction: column; gap: 1rem; }
.mobile-menu-tagline {
  font-family: var(--font-body); font-style: italic; font-weight: 600;
  color: var(--ink-mute); text-align: center; font-size: .95rem; max-width: none;
}
@media (min-width: 1060px) { .mobile-menu { display: none; } }

/* =============================================================
   7. COMPONENTES BASE
   ============================================================= */

/* --- Botones --------------------------------------------------- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.6rem;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: .96rem; white-space: nowrap;
  min-height: 46px;
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
/* Barrido de relleno desde abajo */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform var(--dur-3) var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-arrow { width: 17px; height: 17px; transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn-primary { background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow-2); }
.btn-primary::before { background: var(--accent-strong); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-accent); }

.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn-ghost::before { background: var(--accent-tint); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--accent-text); color: var(--accent-text); }

.btn-outline { background: transparent; color: currentColor; border: 1.5px solid currentColor; }
.btn-outline::before { background: currentColor; opacity: .12; }
.btn-outline:hover { transform: translateY(-2px); }

.btn-lg { padding: 1.05rem 2rem; font-size: 1.02rem; min-height: 54px; }
.btn-block { width: 100%; }

/* El CTA del header queda SIEMPRE en rojo de marca, aunque la página tenga
   otro acento. Es la acción constante del sitio —igual que el botón flotante—
   y si cambiara de color en cada página perdería fuerza de reconocimiento. */
.btn-nav-cta {
  display: none; font-size: .88rem; padding: .7rem 1.2rem; min-height: 42px;
  background: var(--red); color: var(--cream);
}
.btn-nav-cta::before { background: var(--red-dark); }
.btn-nav-cta:hover { box-shadow: 0 14px 30px -14px rgba(180, 18, 31, .55); }
@media (min-width: 1060px) { .btn-nav-cta { display: inline-flex; } }

/* Mismo criterio para el CTA del menú móvil */
.mobile-menu-foot .btn-primary { background: var(--red); color: var(--cream); }
.mobile-menu-foot .btn-primary::before { background: var(--red-dark); }

/* --- Enlace con flecha ----------------------------------------- */
.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.6rem; font-weight: 700; color: var(--accent-text);
  position: relative; padding-bottom: 3px;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-3) var(--ease-out);
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow-icon { width: 17px; height: 17px; transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover .link-arrow-icon { transform: translateX(4px); }

/* --- FAB WhatsApp ---------------------------------------------- */
.fab-whatsapp {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 80;
  height: 56px; min-width: 56px; padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--red); color: var(--cream);
  display: flex; align-items: center; gap: .6rem;
  box-shadow: 0 14px 32px -12px rgba(180, 18, 31, .6);
  opacity: 0; transform: translateY(18px) scale(.9); pointer-events: none;
  transition: transform var(--dur-3) var(--ease-bounce), opacity var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
}
.fab-whatsapp.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab-whatsapp:hover { background: var(--red-dark); }
.fab-whatsapp svg { width: 27px; height: 27px; flex-shrink: 0; }
.fab-label {
  font-weight: 700; font-size: .9rem; white-space: nowrap;
  max-width: 0; overflow: hidden; opacity: 0;
  transition: max-width var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fab-whatsapp:hover .fab-label { max-width: 180px; opacity: 1; }
}
@media (max-width: 719px) { .fab-whatsapp { padding: 0; width: 56px; justify-content: center; } }

/* --- Marquee: barra de alimentos, ancho completo ---------------- */
.marquee {
  --marquee-dur: 52s;
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw); max-width: none;
  margin-top: var(--space-8);
  display: flex; overflow: hidden;
  padding-block: 1rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex; flex: 0 0 auto; align-items: center; width: max-content;
  animation: marquee-scroll var(--marquee-dur) linear infinite;
}
@keyframes marquee-scroll { to { transform: translate3d(-100%, 0, 0); } }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: .5rem;
  padding-inline: 1.4rem; white-space: nowrap;
  font-size: .92rem; color: var(--ink-mute);
  border-right: 1px solid var(--line);
}
.marquee-item b {
  font-family: var(--font-display); font-weight: 400;
  color: var(--ink); letter-spacing: -.01em;
}
.marquee-item i { font-style: normal; opacity: .8; }
.marquee-icon { width: 19px; height: 19px; color: var(--accent-text); flex-shrink: 0; }
.marquee-item:nth-child(3n+2) .marquee-icon { color: var(--orange); }
.marquee-item:nth-child(3n+3) .marquee-icon { color: var(--blue); }

/* --- Callout ---------------------------------------------------- */
.callout {
  margin-top: 1.75rem; padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.callout p { color: var(--ink-soft); font-size: .95rem; max-width: none; }
.callout-lg { margin-top: 0; padding: 1.75rem 2rem; border-radius: var(--r-lg); border-left-width: 4px; }
.callout-lg p { font-size: 1.05rem; }

/* --- Listas ----------------------------------------------------- */
.fact-list { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.5rem; font-size: .98rem; }
.fact-list li { padding-left: 1.6rem; position: relative; color: var(--ink-soft); }
.fact-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-text); box-shadow: 0 0 0 4px var(--accent-tint);
}

.checklist { counter-reset: step; display: flex; flex-direction: column; gap: .85rem; margin-top: 1.5rem; }
.checklist li {
  counter-increment: step; position: relative; padding-left: 2.6rem;
  color: var(--ink-soft); font-size: .98rem;
}
.checklist li::before {
  content: counter(step); position: absolute; left: 0; top: -.1em;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-contrast);
  font-family: var(--font-body); font-weight: 700; font-size: .8rem;
}

/* =============================================================
   8. MEDIA (fotos)
   Contenedor de proporción fija + object-fit: cover.
   Cualquier foto que entre se recorta sola y nunca rompe el layout.
   ============================================================= */
.media {
  position: relative; overflow: hidden;
  aspect-ratio: var(--ratio, 4 / 3);
  border-radius: var(--r-lg);
  background: var(--cream-deep);
  box-shadow: var(--shadow-3);
  isolation: isolate;
}
.media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focal, center);
  transition: transform 1.1s var(--ease-out);
}
/* Barrido de luz muy tenue al pasar el cursor */
.media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0s;
}
@media (hover: hover) and (pointer: fine) {
  .media:hover img { transform: scale(1.045); }
  .media:hover { box-shadow: var(--shadow-4); }
  .media:hover::after { transform: translateX(120%); transition: transform 1.1s var(--ease-out); }
}
.rounded-blob { border-radius: var(--blob); }
.rounded-lg { border-radius: var(--r-xl); }

/* Etiquetas de producto: son arte plano sobre fondo blanco, no fotos.
   Sin un marco propio el blanco se lee como un error de recorte contra
   el crema de la página, así que se presentan como una tarjeta. */
.label-card {
  border-radius: var(--r-xl);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  padding: .5rem;
}

/* Placeholder para slots que todavía esperan foto oficial */
.media-empty {
  display: grid; place-content: center; gap: .75rem; justify-items: center;
  background:
    radial-gradient(80% 70% at 30% 20%, var(--accent-tint) 0%, transparent 70%),
    linear-gradient(150deg, var(--cream-warm), var(--cream-deep));
  border: 1.5px dashed var(--line-strong);
  box-shadow: none;
  color: var(--ink-mute);
}
.media-empty::after { content: none; }
.media-empty-mark {
  display: grid; place-items: center; width: 58px; height: 58px;
  border-radius: 50%; background: var(--accent-tint); color: var(--accent-text);
}
.media-empty-icon { width: 30px; height: 30px; }
.media-empty-label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }

/* =============================================================
   9. SECCIONES — layouts reutilizables
   ============================================================= */

/* --- Grilla partida (texto + foto) ------------------------------ */
.split-grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 960px) {
  .split-grid { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
  .split-grid.split-grid-reverse .split-copy { order: 1; }
  .split-grid.split-grid-reverse .split-media { order: 2; }
}
.split-copy p { color: var(--ink-soft); margin-top: 1.1rem; }
/* Un botón suelto al final de la columna: sin esto queda pegado a la
   lista o al párrafo de arriba. Mismo respiro que .link-arrow, que es
   el otro cierre posible de este bloque. */
.split-copy > .btn { margin-top: 1.8rem; }
.split-media { position: relative; }

/* Bloque de foto + texto insertado EN MEDIO de una sección, con más
   contenido abajo (la grilla de productos de carnis.html). La foto va en
   blob —un óvalo— así que su borde inferior sobresale del alto que el
   grid reserva y queda chocando contra las tarjetas. Este respiro es la
   diferencia entre "insertado" y "encimado". */
/* El .media se pasa entre 6 y 14px del alto que el grid reserva (el blob
   es un óvalo y la animación mask-up deja transform), así que un margen
   por tokens daba huecos de 39px en tablet y 64px en desktop. Con un
   clamp propio el respiro real queda parejo en los tres anchos. */
.split-grid-inset { margin-bottom: clamp(4.5rem, 6vw, 5rem); }

/* --- Hero (inicio) ---------------------------------------------- */
.hero { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: 0; position: relative; }
.hero-grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--space-8); } }

.hero-title { margin-bottom: 1.2rem; }
.hero-sub { color: var(--ink-soft); font-size: 1.09rem; margin-bottom: 1.8rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.6rem; }
.hero-micro {
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;
  font-size: .87rem; color: var(--ink-mute); font-weight: 600;
}
.hero-micro li { display: inline-flex; align-items: center; gap: .4rem; }
.hero-micro-icon { width: 17px; height: 17px; color: var(--accent-text); }

.hero-media { position: relative; display: flex; justify-content: center; }
/* El hueso del hero va RECORTADO, sin fondo ni marco: se apoya directo
   sobre el degradé de la portada (pedido del cliente, septiembre 2026).
   Antes acá había un "blob" —un óvalo crema con sombra— que enmarcaba una
   foto rectangular. Con el PNG transparente ese óvalo se veía DETRÁS del
   hueso, que es exactamente lo que se quería sacar.

   La foto es muy vertical (395×813, casi 1:2). Sin límite de alto se
   comía la pantalla entera, así que se acota con altura y contain: el
   hueso entra completo, nunca recortado. */
.hero-blob {
  width: min(420px, 100%);
  display: flex; justify-content: center;
}
.hero-blob .media {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  aspect-ratio: auto;
  max-height: min(62vh, 560px);
}
.hero-blob .media img {
  width: auto; height: 100%;
  max-height: min(62vh, 560px);
  object-fit: contain;
  /* ⚠️ OJO CON AGRANDAR ESTA SOMBRA.
     `drop-shadow` sigue el contorno del recorte, sí — pero con mucho
     desenfoque el hueso es tan ancho que la sombra se esparce y llena
     toda la caja de la imagen. Deja de leerse como sombra y pasa a
     leerse como un rectángulo gris de fondo, que es justo lo que se
     quiso evitar al recortar la foto.

     Estaba en `0 26px 34px .28` y se veía la caja: medido, el interior
     quedaba 8 tonos más oscuro que el fondo de la página. Con estos
     valores la diferencia es de 0.9 tonos — invisible.
     Para comprobarlo hay que medir TODA la caja, no mirar una esquina:
     en las esquinas la sombra siempre es débil y engaña. */
  filter: drop-shadow(0 10px 10px rgba(33, 25, 19, .14));
}
/* El barrido de luz del hover asume una caja: sobre un recorte se ve
   como un rectángulo fantasma flotando. */
.hero-blob .media::after { display: none; }
.hero-chip {
  position: absolute; z-index: 2;
  padding: .5rem 1rem; border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-weight: 700; font-size: .82rem;
  box-shadow: var(--shadow-3);
  white-space: nowrap;
}
.hero-chip-a { top: 6%; right: -2%; color: var(--red); }
.hero-chip-b { bottom: 10%; left: -2%; color: var(--blue); }
@media (max-width: 559px) {
  .hero-chip { font-size: .74rem; padding: .4rem .8rem; }
  .hero-chip-b { bottom: 8%; left: 8%; }
}

/* --- Cabecera de páginas interiores ----------------------------- */
.page-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--space-9); }
.page-hero-grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 960px) { .page-hero-grid { grid-template-columns: 1.1fr .9fr; gap: var(--space-8); } }
.page-hero-lead { font-size: 1.1rem; color: var(--ink-soft); margin-top: 1.4rem; }
.page-hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.page-hero-center { text-align: center; }
.page-hero-center .kicker { justify-content: center; }
.page-hero-center h1 { margin-inline: auto; }
.page-hero-center .page-hero-lead { margin-inline: auto; }
.page-hero-center .page-hero-ctas { justify-content: center; }
.page-hero-media .media { max-width: 420px; margin-inline: auto; }
/* OJO CON LA ESPECIFICIDAD: la regla de arriba, .page-hero-media .media,
   pesa mas que .barf-hero-photo a secas, asi que el max-width de esta
   linea no se aplicaba y la foto salia a 420px. Por eso va calificada.

   El tope no es estetico: el original mide 480x820 y el recorte queda en
   382 de ancho. A 420px en pantalla, en un monitor 2x, el navegador la
   agrandaba 2,26 veces y se veia blanda. A 290 el estiron baja a 1,5.
   Si algun dia llega un original mas grande, esto se puede subir. */
.page-hero-media .media.barf-hero-photo { max-width: 290px; }

/* --- Fotos RECORTADAS, sin fondo --------------------------------------
   La caja de .media —fondo crema, sombra, esquinas redondeadas y barrido
   de luz en el hover— esta pensada para una foto rectangular. Sobre un
   recorte con transparencia dibuja exactamente el rectangulo que el
   recorte venia a sacar: se ve la caja y no se entiende por que.
   Esto ya estaba resuelto a mano para el hueso del hero, en
   .hero-blob .media; aca queda como clase, que es lo que corresponde
   ahora que hay dos recortes en el sitio. */
.media.media-recorte {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  aspect-ratio: auto;
}
.media.media-recorte img {
  width: 100%; height: auto;
  object-fit: contain;
  /* MISMA ADVERTENCIA QUE EN EL HERO: drop-shadow sigue el contorno, pero
     con mucho desenfoque la sombra se esparce, llena la caja y vuelve a
     leerse como un rectangulo gris. Para comprobarlo hay que medir TODA
     la caja, no mirar una esquina: ahi la sombra siempre es debil. */
  filter: drop-shadow(0 10px 10px rgba(33, 25, 19, .14));
}
/* El barrido y el zoom del hover tambien asumen una caja. */
.media.media-recorte::after { display: none; }
.media.media-recorte:hover { box-shadow: none; }
.media.media-recorte:hover img { transform: none; }

/* --- Banda de CTA ------------------------------------------------ */
.cta-band {
  color: var(--cream);
  background: linear-gradient(150deg, var(--accent-strong) 0%, var(--accent) 45%, var(--accent-deep) 100%);
  border-radius: var(--r-xl);
  margin-inline: 1.25rem; margin-block: var(--space-9);
  padding-block: var(--space-9);
  overflow: hidden; position: relative;
  box-shadow: var(--shadow-4);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 88% 6%, rgba(255,255,255,.16) 0%, transparent 60%),
    radial-gradient(50% 60% at 4% 96%, rgba(0,0,0,.16) 0%, transparent 60%);
}
.cta-band-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta-band .kicker { color: var(--cream); opacity: .85; justify-content: center; }
.cta-band .kicker-dot { background: var(--cream); box-shadow: 0 0 0 4px rgba(243,232,213,.18); }
.cta-band h2 { color: var(--cream); margin-inline: auto; }
.cta-band p { color: rgba(243, 232, 213, .88); margin-inline: auto; margin-top: 1.1rem; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2.2rem; }
.cta-band .btn-primary { background: var(--cream); color: var(--accent-text); }
.cta-band .btn-primary::before { background: var(--paper); }
.cta-band .btn-primary:hover { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5); }
.cta-band .btn-outline { color: var(--cream); border-color: rgba(243, 232, 213, .45); }
.cta-band .btn-outline::before { background: var(--cream); opacity: .16; }
@media (min-width: 720px) { .cta-band { margin-inline: 2rem; } }
@media (min-width: 1240px) { .cta-band { margin-inline: auto; max-width: calc(var(--container) - 2rem); } }

/* =============================================================
   10. BLOQUES DE PÁGINA
   ============================================================= */

/* --- Beneficios -------------------------------------------------- */
.benefits-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.benefit-card {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.9rem 1.6rem;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out);
}
.benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-3);
  border-color: var(--accent-soft);
  background: rgba(255, 255, 255, .92);
}
.benefit-icon-wrap {
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: var(--r-md); background: var(--accent-tint); color: var(--accent-text);
  margin-bottom: 1.2rem;
  transition: transform var(--dur-3) var(--ease-bounce), background-color var(--dur-3) var(--ease-out);
}
.benefit-card:hover .benefit-icon-wrap { transform: scale(1.08) rotate(-5deg); background: var(--accent-soft); }
.benefit-icon { width: 30px; height: 30px; }
.benefit-card h3 { margin-bottom: .55rem; }
.benefit-card p { color: var(--ink-mute); font-size: .94rem; max-width: none; }

/* --- Composición (Carnis) ---------------------------------------- */
.composition-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.composition-card {
  padding: 1.75rem 1.5rem; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.composition-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-3); }
.composition-icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--accent-tint); color: var(--accent-text); margin-bottom: 1rem;
}
.composition-icon-svg { width: 24px; height: 24px; }
.composition-card h3 { margin-bottom: .45rem; }
.composition-card p { color: var(--ink-mute); font-size: .93rem; max-width: none; }

/* --- Pilares BARF ------------------------------------------------ */
.pillars-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pillars-grid li {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, .72);
  border-radius: var(--r-md); padding: 1.4rem 1.3rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.pillars-grid li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent-text); transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform var(--dur-3) var(--ease-out);
}
.pillars-grid li:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.pillars-grid li:hover::before { transform: scaleY(1); }
.pillar-name {
  display: block; font-family: var(--font-display); font-weight: 400;
  margin-bottom: .35rem; color: var(--accent-text); font-size: 1.05rem;
}
.pillar-fn { display: block; font-size: .89rem; color: var(--ink-mute); }

/* --- Mitos / dudas ----------------------------------------------- */
.myth-list { display: flex; flex-direction: column; gap: 1.1rem; }
.myth-list li {
  padding: 1.5rem 1.6rem; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .7); border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.myth-list li:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.myth-list h3 { color: var(--accent-text); margin-bottom: .5rem; }
.myth-list p { color: var(--ink-soft); font-size: .96rem; max-width: none; }

/* --- Productos ---------------------------------------------------- */
.products-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.products-grid-compact { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.product-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(8px);
  border-radius: var(--r-xl);
  padding: 1.9rem 1.75rem 1.75rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out);
}
.product-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .06;
  background: var(--accent); pointer-events: none;
}
.product-card-glow {
  position: absolute; inset: -40% 10% auto; height: 60%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 50%, var(--accent-soft) 0%, transparent 70%);
  opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
}
.product-card:hover { box-shadow: 0 30px 60px -24px var(--accent-glow); border-color: var(--accent-soft); }
.product-card:hover .product-card-glow { opacity: 1; }

.product-card-top { margin-bottom: 1.2rem; }
.product-badge-weight {
  display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: .74rem;
  letter-spacing: .06em;
  padding: .32rem .75rem; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-contrast);
  margin-bottom: .8rem;
}
.product-card h3 { font-size: 1.35rem; }
.product-tagline { font-size: .92rem; color: var(--ink-mute); margin-top: .35rem; max-width: none; }
.product-species {
  display: flex; align-items: center; gap: .35rem;
  font-size: .84rem; font-weight: 700; color: var(--accent-text); margin-top: .6rem; max-width: none;
}
.product-species-icon { width: 16px; height: 16px; }

.product-ingredients { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.3rem; }
.product-ingredients li {
  position: relative; display: flex; align-items: center; gap: .65rem;
  font-size: .9rem; padding-bottom: .55rem;
}
.ing-pct {
  flex-shrink: 0; width: 44px;
  font-family: var(--font-body); font-weight: 700; font-size: .82rem;
  color: var(--accent-text); font-variant-numeric: tabular-nums;
}
[data-flavor="pollo"] .ing-pct { color: var(--orange-deep); }
.ing-label { color: var(--ink-soft); }
.ing-bar {
  position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 3px;
  width: 0; background: var(--accent-text); opacity: .5;
  transition: width 1.1s var(--ease-out);
}
.product-card.is-inview .ing-bar { width: var(--pct); }
.product-ingredients li:nth-child(1) .ing-bar { transition-delay: .05s; }
.product-ingredients li:nth-child(2) .ing-bar { transition-delay: .13s; }
.product-ingredients li:nth-child(3) .ing-bar { transition-delay: .21s; }
.product-ingredients li:nth-child(4) .ing-bar { transition-delay: .29s; }
.product-ingredients li:nth-child(5) .ing-bar { transition-delay: .37s; }
.product-ingredients li:nth-child(6) .ing-bar { transition-delay: .45s; }
.product-ingredients li:nth-child(7) .ing-bar { transition-delay: .53s; }

.product-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.product-badges span {
  font-size: .72rem; font-weight: 700; padding: .32rem .65rem;
  border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent-text);
}
.product-card .btn { margin-top: auto; }
.products-note { margin-top: var(--space-6); font-size: .9rem; color: var(--ink-mute); max-width: 60ch; }
.products-note b { color: var(--accent-text); }

/* --- Precio -------------------------------------------------------
   El de efectivo manda visualmente; el de tarjeta va secundario.
   Los productos sin precio de tarjeta muestran una sola cifra. */
.product-price {
  display: flex; flex-direction: column; gap: .15rem;
  margin: 0 0 1.3rem; max-width: none;
}
.product-price-main {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.9rem; line-height: 1; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.product-price-main i {
  font-style: normal; font-family: var(--font-body);
  font-size: .74rem; font-weight: 600; color: var(--ink-mute);
  letter-spacing: .01em;
}
.product-price-alt {
  font-size: .82rem; font-weight: 600; color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.product-price-alt i { font-style: normal; font-weight: 500; }

/* --- Contenido sin porcentajes (caldo y pack) --------------------- */
.product-contents { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.3rem; }
.content-item {
  position: relative; padding-left: 1.1rem;
  font-size: .9rem; color: var(--ink-soft);
}
.content-item::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text);
}

/* --- Tag superior (ej. "Ideal para empezar") ---------------------- */
.product-tag {
  display: inline-block; margin-bottom: .7rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  background: var(--accent-tint); color: var(--accent-text);
}

/* --- Pack Testeo: las 3 franjas de color -------------------------- */
.product-card-pack .product-stripes {
  display: grid; grid-template-rows: repeat(3, 1fr);
  margin: -1.9rem -1.75rem 1.4rem; height: 132px;
  border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden;
}
.product-stripes span {
  display: flex; align-items: center; padding-left: 1.75rem;
  font-family: var(--font-display); font-weight: 400; font-size: 1.15rem;
  letter-spacing: .02em;
  /* El color de texto sale de --accent-contrast del propio data-accent:
     crema sobre bordó y cobalto, tinta sobre naranja. */
  background: var(--accent); color: var(--accent-contrast);
}

/* --- Aviso de veterinario ----------------------------------------
   Acompaña todo el contenido de salud animal que el brief marca
   con ⚠️ hasta que un veterinario nutricionista lo valide. */
.vet-notice, .faq-vet {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-top: 1.4rem;
  /* Padding asimétrico a propósito. Con .85rem parejo la caja queda
     centrada pero el TEXTO se ve corrido hacia arriba: medido, 17.5px
     de aire arriba contra 21px abajo. Es Poppins — con line-height 1.5
     reserva lugar para descendentes, y estas líneas terminan casi
     siempre sin ninguna ("…alimentación."), así que abajo sobra hueco.
     Los ~1.75px de diferencia se compensan acá. */
  padding: .96rem 1.1rem .74rem;
  border-radius: var(--r-md);
  background: var(--accent-tint);
  border-left: 3px solid var(--accent-text);
  font-size: .86rem; line-height: 1.5; color: var(--ink-soft);
  max-width: 62ch;
}
.vet-notice-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: .12rem; color: var(--accent-text); }
/* El aviso vive dentro de un panel de pregunta, y ahí `.faq-panel-inner p`
   (0-1-1) le ganaba a `.faq-vet` (0-1-0) y le imponía su propio
   `padding: 0 1.6rem 1.5rem` — o sea CERO arriba y 24px abajo. El texto
   quedaba pegado al borde superior con un hueco muerto debajo.
   Se resuelve igualando la especificidad, no con !important. */
.faq-panel-inner p.faq-vet,
.faq-vet {
  margin-top: 1rem; font-size: .84rem;
  padding: .96rem 1.1rem .74rem;
}

/* --- Garantía de devolución --------------------------------------- */
/* --- Medios de pago y zonas --------------------------------------- */
.pay-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.pay-chip {
  font-size: .84rem; font-weight: 600;
  padding: .45rem .95rem; border-radius: var(--r-pill);
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.zones-list { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.2rem; }
.zones-list li {
  position: relative; padding-left: 1.4rem; color: var(--ink-soft);
}
.zones-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-text); box-shadow: 0 0 0 4px var(--accent-tint);
}

/* --- Timeline (cambios semana a semana / pasos de transición) -----
   Misma forma visual para los dos: cambia solo el contenido. */
.timeline {
  display: grid; gap: 1.25rem; margin-top: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.tl-item {
  position: relative;
  padding: 1.5rem 1.4rem 1.4rem;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.tl-item::before {
  content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 0; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--accent-text);
}
.tl-when {
  display: inline-block; margin-bottom: .6rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text);
}
.tl-title { font-size: 1.15rem; margin-bottom: .45rem; }
.tl-text { font-size: .92rem; color: var(--ink-mute); max-width: none; }
.timeline-note {
  margin-top: var(--space-5); font-size: .88rem; color: var(--ink-mute); max-width: 62ch;
}

/* --- FAQ agrupada por tema ---------------------------------------- */
.faq-group { margin-bottom: var(--space-8); }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-title {
  font-size: clamp(1.3rem, 1.2vw + 1rem, 1.65rem);
  margin-bottom: 1.1rem; padding-bottom: .6rem;
  border-bottom: 2px solid var(--accent-soft);
  color: var(--accent-text); max-width: none;
}

/* --- Tabla comparativa -------------------------------------------- */
.compare-table-wrap {
  overflow-x: auto; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .7);
  box-shadow: var(--shadow-1);
}
.compare-table { min-width: 520px; }
.compare-table th, .compare-table td { padding: 1rem 1.2rem; text-align: left; }
.compare-table thead th {
  font-family: var(--font-body); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
  border-bottom: 1px solid var(--line);
}
.compare-table tbody tr { border-bottom: 1px solid var(--line); transition: background-color var(--dur-2) var(--ease-out); }
.compare-table tbody tr:last-child { border-bottom: 0; }
.compare-table tbody tr:hover { background: var(--accent-tint); }
.compare-table tbody th {
  font-family: var(--font-display); font-weight: 400; font-size: 1.1rem;
  display: flex; align-items: center; gap: .6rem; color: var(--accent-text);
}
.compare-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-text); flex-shrink: 0; }
.compare-table td { color: var(--ink-soft); font-size: .93rem; }
.compare-note { margin-top: 1.5rem; font-size: .92rem; color: var(--ink-mute); }

/* --- Pasos (Cómo comprar) ------------------------------------------
   Desktop: columna sticky con visual + progreso, pasos a la derecha.
   Mobile: columna única con línea que se dibuja al scrollear.
   ------------------------------------------------------------------ */
.steps-section { padding-block: var(--space-9); position: relative; }
.steps-grid { display: grid; gap: var(--space-7); }
@media (min-width: 960px) {
  /* align-items en stretch (no start) a propósito: si la columna izquierda
     midiera sólo su contenido, el sticky no tendría recorrido y la foto se
     iría de pantalla en el primer paso. */
  .steps-grid { grid-template-columns: .85fr 1.15fr; gap: var(--space-9); align-items: stretch; }
}

/* OJO: esta columna estaba en display:none abajo de 960px, asi que las
   fotos de los pasos no se veian en celular — que es por donde entra la
   mayoria. Ahora se muestra siempre; en celular queda pegada arriba y con
   el ancho limitado, para que la foto y el paso que describe entren
   juntos en pantalla. Si se vuelve a ocultar, se pierden tres fotos. */
.steps-aside { display: none; }
@media (min-width: 960px) { .steps-aside { display: block; } }
.steps-sticky { position: sticky; top: calc(var(--header-h) + 3rem); }

.steps-visual-stack { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-xl); overflow: hidden; }

/* La foto dentro de cada paso: es la de abajo de 960px, donde no hay
   columna sticky. Arriba de 960 se apaga, porque si no la misma foto
   aparece dos veces en pantalla. */
.step-foto { margin-top: var(--space-5); max-width: 420px; }
@media (min-width: 960px) { .step-foto { display: none; } }

/* El cruce entre fotos es a proposito mas largo que el resto de las
   transiciones del sitio: son tres fotos del mismo ambiente y se pisan
   una sobre otra, asi que un fundido corto se lee como un parpadeo.
   El zoom dura un poco mas que la opacidad: la foto sigue acomodandose
   despues de terminar de aparecer, y por eso se siente serena. */
.step-visual {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.025);
  transition: opacity 1.1s var(--ease-out), transform 1.5s var(--ease-out);
}
.step-visual.is-active { opacity: 1; transform: none; }
.step-visual .media { width: 100%; height: 100%; border-radius: var(--r-xl); }

.steps-progress {
  margin-top: 1.5rem; height: 4px; border-radius: 4px;
  background: var(--line); overflow: hidden;
}
.steps-progress-bar {
  display: block; height: 100%; width: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--orange), var(--red));
  transform: scaleX(var(--steps-progress, 0)); transform-origin: 0 50%;
  transition: transform var(--dur-2) linear;
}
.steps-counter {
  margin-top: .8rem; font-family: var(--font-body); font-weight: 700;
  color: var(--ink-mute); font-size: .95rem; max-width: none;
}
.steps-counter b { color: var(--accent-text); font-size: 1.4rem; }

.steps-list { position: relative; display: flex; flex-direction: column; gap: var(--space-8); }
@media (min-width: 960px) { .steps-list { gap: clamp(3.5rem, 11vh, 7rem); } }

/* Línea vertical que se dibuja con el scroll.
   Arranca y termina en el centro del primer y último número, no en los
   bordes de la lista: si no, sobresale por arriba y por abajo. */
.steps-line {
  position: absolute; left: 22px; top: 23px; bottom: 23px; width: 2px;
  background: var(--line); border-radius: 2px;
}
.steps-line i {
  display: block; width: 100%; height: 100%; border-radius: 2px;
  background: linear-gradient(180deg, var(--orange), var(--red));
  transform: scaleY(var(--steps-line, 0)); transform-origin: 50% 0;
  transition: transform var(--dur-2) linear;
}

.step { position: relative; display: flex; gap: 1.4rem; align-items: flex-start; }
.step-marker { flex-shrink: 0; position: relative; z-index: 1; }
.step-num {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--cream-deep); color: var(--ink-mute);
  font-family: var(--font-display); font-weight: 400; font-size: 1.15rem;
  border: 2px solid var(--cream);
  box-shadow: 0 0 0 4px var(--cream);
  transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-bounce), box-shadow var(--dur-3) var(--ease-out);
}
.step.is-active .step-num {
  background: var(--accent); color: var(--accent-contrast);
  transform: scale(1.12);
  box-shadow: 0 0 0 4px var(--cream), 0 10px 26px -10px var(--accent-glow);
}
.step-body { padding-top: .35rem; opacity: .45; transition: opacity var(--dur-3) var(--ease-out); }
.step.is-active .step-body { opacity: 1; }
.step-body h3 { font-size: clamp(1.25rem, 1.4vw + 1rem, 1.7rem); margin-bottom: .6rem; }
.step-body p { color: var(--ink-soft); }
.step-micro {
  margin-top: .8rem; font-size: .88rem; color: var(--accent-text);
  font-weight: 700; font-style: italic;
}

.steps-closer {
  text-align: center; margin-top: var(--space-8);
  font-family: var(--font-display); font-weight: 400; font-size: 1.3rem;
  color: var(--accent-text); max-width: none;
}

/* --- Guía de porciones -------------------------------------------- */
.portion-guide {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 2rem; box-shadow: var(--shadow-2);
}
.portion-guide h3 { margin-bottom: 1.4rem; font-size: 1.12rem; }
.portion-list { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.4rem; }
.portion-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-bottom: 1px dashed var(--line); padding-block: .85rem;
  transition: padding-left var(--dur-2) var(--ease-out);
}
.portion-list li:last-child { border-bottom: 0; }
.portion-list li:hover { padding-left: .4rem; }
.portion-size { font-weight: 700; display: flex; flex-direction: column; }
.portion-size i { font-style: normal; font-weight: 500; font-size: .82rem; color: var(--ink-mute); }
.portion-range {
  font-family: var(--font-display); font-weight: 400; color: var(--accent-text);
  font-size: 1.05rem; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.portion-note {
  display: flex; gap: .5rem; align-items: flex-start;
  font-size: .86rem; color: var(--ink-mute); max-width: none;
  padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.portion-note-icon { width: 17px; height: 17px; flex-shrink: 0; margin-top: .15rem; color: var(--accent-text); }

/* --- Selector Perro / Gato ----------------------------------------- */
.audience-toggle {
  position: relative; display: inline-flex;
  background: rgba(255, 255, 255, .8); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 5px; margin-top: 1.75rem; gap: 2px;
  box-shadow: var(--shadow-1);
}
.audience-toggle button {
  position: relative; z-index: 2; padding: .65rem 1.7rem; border-radius: var(--r-pill);
  font-weight: 700; min-height: 44px; min-width: 96px;
  color: var(--ink-mute); transition: color var(--dur-2) var(--ease-out);
}
.audience-toggle button[aria-selected="true"] { color: var(--accent-contrast); }
.audience-pill {
  position: absolute; top: 5px; left: 5px; height: calc(100% - 10px); width: 0;
  background: var(--accent); border-radius: var(--r-pill); z-index: 1;
  box-shadow: 0 6px 16px -6px var(--accent-glow);
  opacity: 0;
  transition: transform var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out), opacity var(--dur-1) linear;
}
.audience-pill.is-ready { opacity: 1; }
.audience-text { margin-top: 1.5rem; color: var(--ink-soft); font-size: 1.02rem; }
.audience-media .media { max-width: 400px; margin-inline: auto; }

/* --- FAQ ------------------------------------------------------------ */
.faq-container { max-width: 840px; }
.faq-list {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .7); backdrop-filter: blur(6px);
  overflow: hidden; box-shadow: var(--shadow-2);
}
.faq-item { border-bottom: 1px solid var(--line); transition: background-color var(--dur-2) var(--ease-out); }
.faq-item:last-child { border-bottom: 0; }
.faq-item[data-open="true"] { background: var(--accent-tint); }
.faq-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 1.6rem; text-align: left;
  font-family: var(--font-body); font-weight: 600; font-size: 1.02rem;
  min-height: 44px;
  transition: color var(--dur-2) var(--ease-out);
}
.faq-trigger:hover { color: var(--accent-text); }
.faq-icon {
  width: 30px; height: 30px; flex-shrink: 0; padding: 5px;
  border-radius: 50%; background: var(--accent-tint); color: var(--accent-text);
  transition: transform var(--dur-3) var(--ease-soft), background-color var(--dur-2) var(--ease-out);
}
.faq-item[data-open="false"] .faq-icon { transform: rotate(-90deg); }
.faq-trigger:hover .faq-icon { background: var(--accent-soft); }
.faq-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-3) var(--ease-soft); }
.faq-item[data-open="false"] .faq-panel { grid-template-rows: 0fr; }
.faq-panel-inner { overflow: hidden; min-height: 0; }
.faq-panel-inner p { padding: 0 1.6rem 1.5rem; color: var(--ink-soft); max-width: 68ch; }

/* --- Tarjetas de enlace ---------------------------------------------- */
.link-cards { display: flex; flex-direction: column; gap: .9rem; }
.link-cards a {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.25rem 1.4rem; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .72); border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out);
}
.link-cards a:hover { transform: translateY(-4px) translateX(3px); box-shadow: var(--shadow-3); border-color: var(--accent-soft); }
.link-card-icon {
  display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0;
  border-radius: var(--r-md); background: var(--accent-tint); color: var(--accent-text);
  transition: transform var(--dur-3) var(--ease-bounce);
}
.link-cards a:hover .link-card-icon { transform: rotate(-6deg) scale(1.06); }
.link-card-icon-svg { width: 24px; height: 24px; }
.link-card-body { display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.link-card-body b { font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; }
.link-card-body span { font-size: .9rem; color: var(--ink-mute); }
.link-card-arrow { width: 20px; height: 20px; color: var(--accent-text); flex-shrink: 0; transition: transform var(--dur-2) var(--ease-out); }
.link-cards a:hover .link-card-arrow { transform: translateX(5px); }

/* --- Redes sociales ---------------------------------------------------
   Hover: barrido de color de la plataforma desde abajo.
   Los colores de cada red salen de manifest.js (--net-fill / --net-on).
   ---------------------------------------------------------------------- */
.social-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.social-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 1.3rem;
  padding: 1.9rem 2rem; border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .8); backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  color: var(--ink);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out),
              color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.social-fill {
  position: absolute; inset: 0; z-index: -1;
  background: var(--net-fill);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform var(--dur-3) var(--ease-out);
}
.social-card:hover, .social-card:focus-visible {
  transform: translateY(-6px);
  color: var(--net-on);
  border-color: transparent;
  box-shadow: 0 26px 54px -22px var(--net-solid);
}
.social-card:hover .social-fill, .social-card:focus-visible .social-fill { transform: scaleY(1); }

.social-logo {
  display: grid; place-items: center; width: 62px; height: 62px; flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--net-solid); color: #FFFFFF;
  transition: transform var(--dur-3) var(--ease-bounce), background-color var(--dur-3) var(--ease-out);
}
.social-card:hover .social-logo { transform: scale(1.06) rotate(-4deg); background: rgba(255, 255, 255, .2); }
.social-icon { width: 32px; height: 32px; }

.social-text { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.social-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; color: inherit; }
.social-handle { font-size: .95rem; font-weight: 600; opacity: .9; }
.social-blurb { font-size: .86rem; opacity: .68; text-wrap: pretty; }
.social-arrow {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%; border: 1.5px solid currentColor; opacity: .35;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.social-card:hover .social-arrow { opacity: 1; transform: translateX(4px); }
.social-card:hover .social-blurb, .social-card:focus-visible .social-blurb { opacity: .88; }
.social-arrow-icon { width: 16px; height: 16px; }

/* --- Créditos --------------------------------------------------------- */
.credits-list { display: flex; flex-direction: column; gap: .9rem; }
.credits-list li {
  padding: 1.1rem 1.35rem; background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: .93rem; color: var(--ink-soft);
  box-shadow: var(--shadow-1);
}
.credits-list a { text-decoration: underline; color: var(--accent-text); font-weight: 600; }

/* --- 404 --------------------------------------------------------------- */
.error-hero { padding-top: clamp(3rem, 8vw, 6rem); }
.error-code {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(5rem, 20vw, 11rem); line-height: .85;
  color: var(--accent-text); opacity: .16; letter-spacing: -.04em;
  margin-bottom: -.1em; max-width: none;
}

/* --- Portada (prompt 1.2) ---------------------------------------------- */
.hero-slogan {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(.82rem, .5vw + .7rem, 1rem);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: .9rem; max-width: none;
}
.hero-question {
  font-size: clamp(1.02rem, .5vw + .9rem, 1.2rem);
  font-style: italic; color: var(--ink-soft);
  border-left: 3px solid var(--accent-soft);
  padding-left: 1rem; margin-top: 1.1rem; max-width: 46ch;
}

/* Los 5 atributos no entran de a 5 en una fila legible: en pantallas
   grandes van 3 + 2, que es más estable que forzar repeat(5, 1fr). */
.benefits-grid-5 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* --- Qué aporta cada ingrediente (02) ---------------------------------- */
.nutrients-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.nutrient-card {
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.4rem 1.3rem; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.nutrient-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.nutrient-icon { color: var(--accent-text); line-height: 0; }
.nutrient-icon-svg { width: 26px; height: 26px; }
.nutrient-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.1rem; letter-spacing: .01em; max-width: none;
}
.nutrient-gives { display: flex; flex-wrap: wrap; gap: .35rem; }
.nutrient-gives li {
  font-size: .78rem; line-height: 1.3;
  padding: .28rem .6rem; border-radius: 999px;
  background: var(--accent-tint); color: var(--ink-soft);
}

/* --- Cuestionamos costumbres (04) -------------------------------------- */
.question-list { margin: var(--space-5) 0; display: grid; gap: .8rem; }
.question-list li {
  position: relative; padding-left: 1.6rem;
  font-size: clamp(1rem, .4vw + .9rem, 1.12rem);
  color: var(--ink-soft); max-width: 62ch;
}
.question-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--accent);
}
/* Dos etapas, no cuatro: sin el minmax chico quedan dos columnas
   angostísimas en tablet. */
.timeline-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* --- Tarjeta de producto: agregados del prompt 1.2 ---------------------- */
.product-keywords {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin-top: .5rem; max-width: none;
}
.product-keywords span {
  font-family: var(--font-display); font-weight: 400;
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .22rem .5rem; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-text);
}
.product-body {
  font-size: .88rem; line-height: 1.55; color: var(--ink-mute);
  margin-top: .9rem; max-width: none;
}
.product-link {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .7rem; align-self: center;
  font-size: .84rem; font-weight: 500; color: var(--accent-text);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.product-link:hover { border-bottom-color: currentColor; }
.product-link-icon { width: 15px; height: 15px; transition: transform var(--dur-2) var(--ease-out); }
.product-link:hover .product-link-icon { transform: translateX(3px); }

/* --- Calculadora de porción (08) --------------------------------------- */
.calc {
  margin-top: var(--space-6);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.calc-form { display: grid; gap: 1.4rem; }
.calc-label {
  font-family: var(--font-display); font-weight: 400;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: .6rem; max-width: none;
}
.calc-label label { cursor: pointer; }
.calc-toggle { margin: 0; }

.calc-input { position: relative; max-width: 15rem; }
.calc-input input {
  width: 100%; font-family: var(--font-body);
  font-size: 1.5rem; font-weight: 600; color: var(--ink);
  padding: .7rem 3rem .7rem 1rem;
  background: var(--surface-0);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.calc-input input:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.calc-unit {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  font-weight: 600; color: var(--ink-mute); pointer-events: none;
}

.calc-empty { margin-top: 1.4rem; color: var(--ink-mute); font-size: .92rem; }
.calc-result { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.calc-result-label {
  font-family: var(--font-display); font-weight: 400;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); max-width: none;
}
.calc-grams { display: flex; align-items: baseline; gap: .5rem; margin-top: .3rem; max-width: none; }
.calc-grams b {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 3.2rem); line-height: 1;
  color: var(--accent-text); letter-spacing: -.01em;
}
.calc-grams span { color: var(--ink-mute); font-size: .95rem; }

.calc-pieces {
  display: grid; gap: .7rem; margin-top: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.calc-piece {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .9rem 1rem; border-radius: var(--r-md);
  background: var(--accent-tint); border: 1px solid var(--line);
}
.calc-piece-name {
  font-weight: 600; font-size: .92rem; color: var(--ink);
  display: flex; flex-direction: column;
}
.calc-piece-name i { font-style: normal; font-size: .76rem; color: var(--ink-mute); font-weight: 400; }
.calc-piece-count { font-size: .92rem; color: var(--ink-soft); }
.calc-piece-count b { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: var(--accent-text); }

.calc-mix, .calc-bag {
  margin-top: 1.1rem; font-size: .92rem; line-height: 1.6; color: var(--ink-soft);
}
.calc-bag b[data-calc-days] { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--accent-text); }
.calc-note {
  margin-top: 1.1rem; font-size: .86rem; line-height: 1.6;
  color: var(--ink-mute); max-width: 62ch;
}

/* --- Tabla de porción por peso (09) ------------------------------------ */
/* Va dentro del panel de una pregunta, así que el scroll horizontal
   tiene que quedarse adentro del acordeón y no empujar la página. */
.portion-table {
  width: 100%; margin: 1rem 0 .4rem;
  border-collapse: collapse; font-size: .9rem;
  display: block; overflow-x: auto;
}
.portion-table th, .portion-table td {
  text-align: left; padding: .55rem .8rem;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.portion-table thead th {
  font-family: var(--font-display); font-weight: 400;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute); border-bottom: 2px solid var(--accent-soft);
}
.portion-table tbody th { font-weight: 600; color: var(--ink); }
.portion-table tbody tr:last-child th,
.portion-table tbody tr:last-child td { border-bottom: 0; }

/* --- Perros y gatos (07) y cierre (11) --------------------------------- */
.audience-close { margin-top: 1.1rem; font-weight: 500; color: var(--ink-soft); }
.cta-band-links {
  margin-top: 1.2rem; display: flex; flex-wrap: wrap;
  justify-content: center; gap: .6rem; font-size: .95rem;
}
.cta-band-links a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.cta-band-links span { opacity: .5; }


/* --- Catálogo del inicio: filas de producto -------------------------
   Reemplazó a la grilla "Elegí sus Carnis" (prompt 3.0). Cada fila es
   un recuadro con el copy a la izquierda y la foto a la derecha; la
   foto lleva encima un botón que agrega al carrito sin abrir nada. */
.product-rows { display: flex; flex-direction: column; gap: 1.5rem; }

.product-row {
  display: grid; gap: 1.5rem;
  padding: 1.5rem;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  transition: box-shadow var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-out);
}
/* La barra de color del acento: es lo que hace que las 4 filas se lean
   como una familia y no como 4 cajas iguales. */
.product-row { border-left: 4px solid var(--accent-text); }

@media (min-width: 760px) {
  .product-row { grid-template-columns: 1fr minmax(0, 42%); align-items: center; padding: 1.75rem 2rem; }
}
@media (hover: hover) and (pointer: fine) {
  .product-row:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
}

.product-row-copy { display: flex; flex-direction: column; align-items: flex-start; }
.product-row-format {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-contrast); background: var(--accent);
  padding: .3rem .7rem; border-radius: var(--r-pill);
}
.product-row-name { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: .7rem; }
.product-row-tagline { color: var(--ink-soft); margin-top: .5rem; }
.product-row .product-species { margin-top: .7rem; }
.product-row-price { margin-top: 1rem; display: flex; flex-direction: column; gap: .15rem; }
.product-row-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem;
  margin-top: 1.3rem;
}
.btn-plus { width: 18px; height: 18px; flex-shrink: 0; }

/* La foto del packaging va ENTERA, no recortada: lo que se vende es la
   bolsa. Por eso contain y no el cover del resto del sitio. */
.media-contain { background: var(--paper); }
.media-contain img { object-fit: contain; padding: .5rem; }

.product-row-media { position: relative; }

/* El botón sobre la foto. En touch no hay hover, así que abajo se
   muestra siempre — si no, en el celular no habría forma de verlo. */
.product-add-fab {
  position: absolute; inset-inline-end: .8rem; inset-block-end: .8rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem .9rem;
  border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-contrast);
  font-weight: 700; font-size: .84rem;
  box-shadow: var(--shadow-3);
  transition: transform var(--dur-2) var(--ease-bounce),
              opacity var(--dur-2) var(--ease-out);
}
.product-add-fab-icon { width: 17px; height: 17px; }
.product-add-fab:active { transform: scale(.94); }

@media (hover: hover) and (pointer: fine) {
  .product-add-fab { opacity: 0; transform: translateY(8px) scale(.94); }
  .product-row:hover .product-add-fab,
  .product-add-fab:focus-visible { opacity: 1; transform: none; }
}

/* --- Panel de detalle del producto ---------------------------------
   Se emite en el build, oculto con [hidden], y el JS sólo lo muestra.
   Así el contenido existe para Google y sin JavaScript. */
.product-panel {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: 1.25rem;
  background: rgba(33, 25, 19, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}
.product-panel-inner {
  position: relative;
  display: grid; gap: 1.5rem;
  width: min(100%, 900px);
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  padding: 1.75rem;
  border-radius: var(--r-xl);
  background: var(--cream);
  box-shadow: var(--shadow-4);
}
@media (min-width: 780px) {
  .product-panel-inner { grid-template-columns: minmax(0, 38%) 1fr; align-items: start; padding: 2rem; }
}
.product-panel-close {
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--cream-deep); color: var(--ink);
}
.product-panel-close-icon { width: 18px; height: 18px; }
.product-panel-copy { display: flex; flex-direction: column; align-items: flex-start; }
.product-panel-copy h3 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin-top: .7rem; }
.product-panel-h {
  font-family: var(--font-body); font-weight: 700; font-size: .78rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute);
  margin-top: 1.4rem;
}
.product-panel-copy .product-ingredients,
.product-panel-copy .product-contents { width: 100%; margin-top: .7rem; }
.product-panel-storage { font-size: .88rem; color: var(--ink-soft); margin-top: 1.2rem; }
.product-panel-copy .product-badges { margin-top: 1rem; }
.product-panel-copy .btn { margin-top: 1.4rem; }


/* --- Carrito -------------------------------------------------------
   El cajón vive al final del <body> (ver partials/footer.html): dentro
   del header quedaría atrapado por su backdrop-filter. */
.cart-toggle {
  position: relative; flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: var(--ink);
  transition: background-color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-bounce);
}
.cart-toggle:hover { background: var(--accent-tint); }
.cart-toggle:active { transform: scale(.93); }
.cart-toggle-icon { width: 24px; height: 24px; }
.cart-count {
  position: absolute; top: 2px; right: 2px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--red); color: var(--cream);
  font-size: .68rem; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px var(--cream);
}

/* Señal de que el click hizo algo: el botón "Agregar" está lejos del
   header y sin esto la acción no da ninguna respuesta visible. */
@keyframes cart-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(.92); }
  100% { transform: scale(1); }
}
.is-pulsing { animation: cart-pulse .42s var(--ease-bounce); }

.cart-drawer {
  position: fixed; inset: 0; z-index: 130;
  display: flex; justify-content: flex-end;
  background: rgba(33, 25, 19, 0);
  transition: background-color var(--dur-3) var(--ease-out);
}
.cart-drawer.is-open { background: rgba(33, 25, 19, .5); }

.cart-panel {
  display: flex; flex-direction: column;
  width: min(100%, 420px); height: 100%;
  background: var(--cream);
  box-shadow: var(--shadow-4);
  transform: translateX(100%);
  transition: transform var(--dur-3) var(--ease-out);
}
.cart-drawer.is-open .cart-panel { transform: none; }

.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.25rem 1.35rem;
  border-bottom: 1px solid var(--line);
}
.cart-head h2 { font-size: 1.4rem; }
.cart-close {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--cream-deep); color: var(--ink);
}
.cart-close-icon { width: 17px; height: 17px; }

.cart-empty {
  padding: 2.5rem 1.35rem; color: var(--ink-mute);
  font-size: .93rem; text-align: center;
}

.cart-lines {
  flex: 1; overflow-y: auto;
  padding: .5rem 1.35rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.cart-line {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: .35rem .8rem;
  align-items: center;
  padding: .9rem 2rem .9rem .9rem;
  border-radius: var(--r-md);
  background: var(--paper);
  border-left: 3px solid var(--accent-text);
}
.cart-line-name { font-weight: 600; font-size: .93rem; }
.cart-line-format { font-size: .76rem; color: var(--ink-mute); }
.cart-line-qty {
  grid-column: 1; justify-self: start;
  display: inline-flex; align-items: center; gap: .1rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: .1rem;
}
.cart-line-qty button {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: var(--r-pill); font-size: 1rem; line-height: 1; color: var(--ink);
}
.cart-line-qty button:hover { background: var(--accent-tint); color: var(--accent-text); }
.cart-line-qty b { min-width: 22px; text-align: center; font-size: .9rem; }
.cart-line-sub { grid-column: 2; grid-row: 2; font-weight: 700; font-size: .95rem; }
.cart-line-del {
  position: absolute; top: .5rem; right: .5rem;
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: var(--r-pill); color: var(--ink-mute); font-size: 1.1rem; line-height: 1;
}
.cart-line-del:hover { background: var(--accent-tint); color: var(--accent-text); }

.cart-foot {
  padding: 1.2rem 1.35rem calc(1.2rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--cream-warm);
}
.cart-total-row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 1rem; margin-bottom: .35rem;
}
.cart-total-row b { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; }
.cart-shipping-note {
  font-size: .78rem; color: var(--ink-mute); line-height: 1.5; margin-bottom: 1rem;
}
.cart-clear {
  display: block; width: 100%; margin-top: .7rem;
  font-size: .82rem; color: var(--ink-mute); text-decoration: underline;
}
.cart-clear:hover { color: var(--accent-text); }

/* Con el cajón abierto el botón flotante estorba en el mismo rincón. */
.cart-drawer.is-open ~ .fab-whatsapp { opacity: 0; pointer-events: none; }


/* --- Checkout ------------------------------------------------------ */
.checkout-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr minmax(0, 360px); align-items: start; gap: 3rem; }
}

.checkout-h { font-size: 1.35rem; }
.checkout-sub { color: var(--ink-mute); font-size: .9rem; margin-top: .3rem; margin-bottom: 1.4rem; }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block; margin-bottom: .4rem;
  font-size: .86rem; font-weight: 600; color: var(--ink);
}
.field label i { font-style: normal; font-weight: 400; color: var(--ink-mute); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .95rem;
  font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* :invalid a secas marcaría en rojo todos los campos vacíos apenas
   carga la página. :user-invalid sólo marca los que la persona tocó. */
.field input:user-invalid, .field select:user-invalid {
  border-color: var(--red); box-shadow: 0 0 0 3px rgba(180, 18, 31, .14);
}

.checkout-error {
  padding: .85rem 1.05rem; margin-bottom: 1rem;
  border-radius: var(--r-sm);
  background: rgba(180, 18, 31, .1);
  border-left: 3px solid var(--red);
  color: var(--bordo-text); font-size: .9rem;
}
.checkout-legal {
  margin-top: 1rem; font-size: .8rem; line-height: 1.6; color: var(--ink-mute);
}

.checkout-summary {
  padding: 1.5rem;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
@media (min-width: 900px) { .checkout-summary { position: sticky; top: calc(var(--header-h) + 1.5rem); } }

.checkout-lines { margin: 1.2rem 0; display: flex; flex-direction: column; gap: .8rem; }
.checkout-line {
  display: grid; grid-template-columns: auto 1fr auto; gap: .6rem;
  align-items: baseline; font-size: .92rem;
}
.checkout-line-qty { font-weight: 700; color: var(--accent-text); }
.checkout-line-name { display: flex; flex-direction: column; }
.checkout-line-name i { font-style: normal; font-size: .76rem; color: var(--ink-mute); }
.checkout-line-sub { font-weight: 600; white-space: nowrap; }
.checkout-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 1rem; margin-bottom: 1rem;
  border-top: 1px solid var(--line);
}
.checkout-total b { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; }

.checkout-empty { text-align: center; padding: 3rem 0; }
.checkout-empty p { margin: 0 auto 1.5rem; color: var(--ink-mute); }

.footer-legal { margin-top: .3rem; }
.footer-legal a { text-decoration: underline; opacity: .75; }
.footer-legal a:hover { opacity: 1; }


/* --- Pet Happ Family ----------------------------------------------- */
.family-benefits {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: var(--space-8);
}
.family-benefit {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1.2rem;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .74);
  border: 1px solid var(--line);
}
.family-benefit-icon {
  flex-shrink: 0; width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent-tint); color: var(--accent-text);
}
.family-benefit-svg { width: 21px; height: 21px; }
.family-benefit h3 { font-family: var(--font-body); font-weight: 700; font-size: .95rem; }
.family-benefit p { font-size: .86rem; color: var(--ink-soft); margin-top: .25rem; }

.family-builder { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .family-builder { grid-template-columns: 1fr minmax(0, 340px); align-items: start; gap: 2.5rem; }
}

.family-h { font-size: 1.1rem; margin-bottom: 1rem; }

.family-picks { display: flex; flex-direction: column; gap: .7rem; }
.family-pick {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  transition: border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
/* Con 4 productos todos iguales no se ve qué elegiste. */
.family-pick.is-picked { border-left-color: var(--accent-text); box-shadow: var(--shadow-2); }
.family-pick-name { display: flex; flex-direction: column; font-weight: 600; font-size: .93rem; }
.family-pick-name i { font-style: normal; font-size: .76rem; color: var(--ink-mute); font-weight: 400; }
.family-pick-qty {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .1rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: .1rem;
}
.family-pick-qty button {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--r-pill); font-size: 1rem; line-height: 1; color: var(--ink);
}
.family-pick-qty button:hover { background: var(--accent-tint); color: var(--accent-text); }
.family-pick-qty b { min-width: 24px; text-align: center; font-size: .92rem; }

.family-summary {
  padding: 1.5rem;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
@media (min-width: 900px) { .family-summary { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.family-empty { font-size: .89rem; color: var(--ink-mute); padding: .5rem 0 1rem; }
.family-rows { margin-bottom: 1rem; }
.family-rows > div {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: .4rem 0; font-size: .92rem;
}
.family-rows dt { color: var(--ink-soft); }
.family-rows dd { font-weight: 600; }
.family-row-off dd { color: var(--accent-text); }
.family-free { color: var(--pistacho-text); font-weight: 700; }
.family-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: .9rem; margin-bottom: 1.2rem;
  border-top: 1px solid var(--line);
}
.family-total b { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; }
.family-note { font-size: .8rem; color: var(--ink-mute); margin-top: .9rem; line-height: 1.55; }


/* --- Dónde encontrarnos --------------------------------------------- */
.where-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.where-card {
  padding: 1.6rem;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.where-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 1rem;
  border-radius: var(--r-pill);
  background: var(--accent-tint); color: var(--accent-text);
}
.where-icon-svg { width: 22px; height: 22px; }
.where-card h3 { font-size: 1.15rem; }
.where-card p { font-size: .92rem; color: var(--ink-soft); margin-top: .5rem; }
.where-list { margin-top: 1rem; display: flex; flex-direction: column; gap: .55rem; }
.where-list li { display: flex; flex-direction: column; font-size: .9rem; }
.where-list li span { font-size: .82rem; color: var(--ink-mute); }
.where-list-plain li {
  padding-left: 1.1rem; position: relative; color: var(--ink-soft);
}
.where-list-plain li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.where-note {
  margin-top: 1.5rem; font-size: .9rem; color: var(--ink-mute);
  max-width: var(--measure);
}


/* --- Botón de Instagram: cierre de la portada -----------------------
   Es el único lugar del sitio donde el gradiente de Instagram se usa
   en grande. La regla de la marca dice que los colores de plataforma
   van sólo en el hover de los botones de redes; acá se hace una
   excepción deliberada porque el pedido era un botón llamativo, y un
   Instagram en crema y bordó no se lee como Instagram.
   El gradiente entra por --ig-fill, que sale del manifest. */
.ig-cta-wrap {
  display: flex; justify-content: center;
  margin-top: var(--space-8);
}

.ig-cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 1rem;
  width: min(100%, 620px);
  padding: 1.1rem 1.3rem;
  border-radius: var(--r-xl);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-3) var(--ease-bounce),
              box-shadow var(--dur-3) var(--ease-out);
}

/* El gradiente vive en una capa aparte, apagada, y sube al pasar el
   cursor. Así el botón no grita en reposo pero responde al tocarlo. */
.ig-cta-glow {
  position: absolute; inset: 0; z-index: -1;
  background: var(--ig-fill);
  opacity: .08;
  transition: opacity var(--dur-3) var(--ease-out);
}

.ig-cta-logo {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--ig-fill);
  color: #FFFFFF;
  box-shadow: 0 8px 20px -8px rgba(214, 36, 159, .55);
  transition: transform var(--dur-3) var(--ease-bounce);
}
.ig-cta-icon { width: 27px; height: 27px; }

.ig-cta-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ig-cta-text b {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.15rem; line-height: 1.15; color: var(--ink);
}
.ig-cta-text span {
  font-size: .84rem; color: var(--ink-mute); margin-top: .15rem;
}

.ig-cta-handle {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .9rem;
  border-radius: var(--r-pill);
  background: var(--ig-fill);
  color: #FFFFFF;
  font-weight: 700; font-size: .86rem;
  box-shadow: 0 8px 18px -8px rgba(214, 36, 159, .5);
}
.ig-cta-arrow {
  width: 16px; height: 16px;
  transition: transform var(--dur-2) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .ig-cta:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
  .ig-cta:hover .ig-cta-glow { opacity: .16; }
  .ig-cta:hover .ig-cta-logo { transform: rotate(-6deg) scale(1.06); }
  .ig-cta:hover .ig-cta-arrow { transform: translateX(4px); }
}
.ig-cta:active { transform: scale(.985); }

/* En pantallas chicas el @ no entra al lado del texto: pasa abajo y el
   botón se apila. Sin esto, el handle aplasta el título a dos letras. */
@media (max-width: 559px) {
  .ig-cta { flex-wrap: wrap; gap: .85rem; padding: 1.1rem; }
  .ig-cta-text { flex-basis: calc(100% - 52px - .85rem); }
  .ig-cta-handle { flex-basis: 100%; justify-content: center; padding: .7rem; }
}


/* --- Documentos legales ---------------------------------------------
   Privacidad y arrepentimiento. Son textos largos para leer, no para
   escanear: medida cómoda, jerarquía clara y nada que distraiga. */
.legal h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  margin-top: var(--space-8);
  margin-bottom: .7rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin-bottom: .9rem; line-height: 1.75; }

.legal-date {
  margin-top: 1rem;
  font-size: .84rem; color: var(--ink-mute);
}

.legal-list { margin: 0 0 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.legal-list li {
  position: relative; padding-left: 1.4rem;
  line-height: 1.7; color: var(--ink-soft);
  max-width: var(--measure);
}
.legal-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* Tabla de datos: en móvil no se achica, se desliza. Achicarla haría
   ilegible justo la columna que explica para qué se usa cada dato. */
.legal-table {
  display: block; overflow-x: auto;
  margin-bottom: 1.4rem;
  font-size: .93rem;
}
.legal-table th, .legal-table td {
  padding: .7rem .9rem; text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal-table th {
  font-size: .76rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom-color: var(--line-strong);
  white-space: nowrap;
}
.legal-table td:first-child { font-weight: 600; white-space: nowrap; }
.legal-table td:last-child { color: var(--ink-soft); }

.legal-parties { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.4rem; }
.legal-parties li {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}
.legal-parties b { font-size: 1rem; }
.legal-parties span { font-size: .9rem; color: var(--ink-soft); line-height: 1.65; }
.legal-parties a {
  font-size: .84rem; font-weight: 600; color: var(--accent-text);
  text-decoration: underline; margin-top: .2rem;
}

/* La letra chica que exige la ley. Se lee más apagada porque es texto
   normativo literal, pero NO se esconde: tiene que poder leerse. */
.legal-fine {
  font-size: .82rem; line-height: 1.7; color: var(--ink-mute);
  padding-left: 1rem; border-left: 2px solid var(--line-strong);
  margin-bottom: .9rem;
}

.legal .hero-ctas { margin-top: var(--space-8); }
.legal .callout { margin-bottom: 1.4rem; }

/* =============================================================
   11. FOOTER
   ============================================================= */
.site-footer {
  position: relative;
  background: var(--ink); color: var(--cream);
  padding-block: var(--space-9) 5.5rem;
  margin-top: var(--space-9);
}
.footer-wave { position: absolute; top: -1px; left: 0; width: 100%; height: 40px; transform: translateY(-100%); }
.footer-wave path { fill: var(--ink); }
@media (min-width: 720px) { .site-footer { padding-bottom: 2rem; } }

.footer-grid {
  display: grid; gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(243, 232, 213, .14);
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); } }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.footer-tagline { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; max-width: none; }
.footer-sub { font-size: .86rem; opacity: .6; margin-top: .3rem; max-width: none; }
.footer-heading {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  opacity: .5; margin-bottom: .9rem;
}
.footer-nav ul, .footer-contact { display: flex; flex-direction: column; gap: .65rem; align-items: flex-start; }
.footer-nav a, .footer-contact a {
  opacity: .82; font-weight: 600; font-size: .95rem;
  position: relative; padding-bottom: 2px;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.footer-nav a::after, .footer-contact a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-3) var(--ease-out);
}
.footer-nav a:hover, .footer-contact a:hover { opacity: 1; transform: translateX(3px); }
.footer-nav a:hover::after, .footer-contact a:hover::after { transform: scaleX(1); }
.footer-nav a[aria-current="page"] { opacity: 1; color: var(--cream); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem;
  padding-top: 1.5rem; font-size: .81rem; opacity: .62;
}
.footer-bottom p { max-width: none; }
.footer-credits a { text-decoration: underline; }

/* =============================================================
   12. ANIMACIONES
   Estados iniciales sólo con JS activo (.js), para que sin JS
   el sitio se lea completo igual.
   ============================================================= */
.js [data-anim] { opacity: 0; }
.js [data-anim="rise"]     { transform: translate3d(0, 34px, 0); }
.js [data-anim="fade"]     { transform: translate3d(0, 16px, 0); }
.js [data-anim="scale-in"] { transform: scale(.94); }
/* Las 4 medidas del inset van en % a propósito: GSAP interpola número por
   número, y si el origen y el destino no tienen las mismas unidades la
   tween del clip-path sale con saltos. */
.js [data-anim="mask-up"]  { clip-path: inset(100% 0% 0% 0%); transform: scale(1.03); }

/* Camino sin GSAP (o si su carga falla): transición CSS pura.
   Va detrás de .no-gsap para no pisarse con las tweens de GSAP —
   si las dos capas animaran lo mismo, el movimiento se vería trabado. */
.js.no-gsap [data-anim].is-inview {
  opacity: 1; transform: none; clip-path: inset(0 0 0 0);
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out),
              clip-path var(--dur-4) var(--ease-out);
}

/* Titulares partidos en palabras */
.split-word { display: inline-block; }
.js [data-split] .split-word { opacity: 0; transform: translate3d(0, .5em, 0); }
.js.no-gsap [data-split].is-inview .split-word {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

/* Piezas flotando muy suave */
@media (prefers-reduced-motion: no-preference) {
  [data-float] { animation: float-soft 7s var(--ease-soft) infinite; }
  [data-float="2"] { animation-duration: 8.5s; animation-delay: -2.5s; }
}
@keyframes float-soft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}

/* Transición entre páginas */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* Fallback JS para navegadores sin View Transitions */
.js.is-leaving main, .js.is-leaving .site-footer {
  opacity: 0; transform: translateY(-8px);
  transition: opacity .26s var(--ease-in), transform .26s var(--ease-in);
}

/* No animar el fondo continuo durante la transición: evita parpadeos */
::view-transition-group(root) { animation-duration: .42s; }

/* =============================================================
   13. RESPONSIVE  (mobile-first; breakpoints 540/720/960/1060/1280/1600)
   ============================================================= */
@media (min-width: 540px) {
  .hero-ctas, .page-hero-ctas { flex-wrap: nowrap; }
}

/* Poppins es más ancha que la tipografía anterior: en pantallas chicas
   los botones de etiqueta larga se pasaban del ancho y provocaban scroll
   horizontal. Se les permite cortar en dos líneas. */
@media (max-width: 620px) {
  .btn { white-space: normal; text-align: center; }
}

@media (max-width: 959px) {
  /* En mobile la línea de pasos arranca desde el número */
  .steps-line { left: 22px; }
  .step-body { opacity: 1; }
  .steps-visual-stack { display: none; }
}

@media (max-width: 419px) {
  /* El lockup mide 2.03:1 — a 46px de alto ocupa 93px de ancho, y en 390px
     de pantalla compite con el botón de WhatsApp y el de menú. */
  .logo-lockup { height: 38px; }
  .step { gap: 1rem; }
  .steps-line { left: 19px; }
  .step-num { width: 40px; height: 40px; font-size: .95rem; }
  .social-card { padding: 1.3rem 1.2rem; gap: .9rem; }
  .social-logo { width: 46px; height: 46px; }
  .social-icon { width: 24px; height: 24px; }
  .social-arrow { display: none; }
}

@media (min-width: 1600px) {
  :root { --container: 1300px; }
}

/* Nota: se evaluó content-visibility:auto para las secciones bajo el fold.
   Se descartó: la altura estimada hace saltar la barra de scroll y
   descoloca las mediciones de ScrollTrigger (parallax y pasos). El costo
   de render acá es bajo; la fluidez del scroll vale más. */

/* =============================================================
   14. REDUCED MOTION
   Se apaga todo lo ambiental; lo funcional (toggles, acordeón,
   pasos, barras) sigue funcionando, sólo que sin movimiento.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .marquee-track { animation: none; transform: none; }
  .ambient-layer { transition: none; }

  .js [data-anim],
  .js [data-split] .split-word {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }

  .step-body { opacity: 1; }
  .step-visual { opacity: 1; transform: none; }
  .step-visual:not(.is-active) { opacity: 0; }
  .media::after { content: none; }
  .js.is-leaving main, .js.is-leaving .site-footer { opacity: 1; transform: none; }
}

/* Crédito Digital Zoman (pie). Variante clara porque el pie va sobre --ink */
.dz-credit {
  display: inline-flex; align-items: center; gap: 5px;
  color: #C9B8FF; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: color .2s ease;
}
.dz-credit:hover { color: #E4DAFF; }
.dz-credit img { height: 13px; width: auto; display: block; filter: brightness(0) invert(1); opacity: .9; }