/* Letras de Google Fonts declaradas aquí (solo el juego latino, que cubre
   todo el español) para no depender de la hoja de fonts.googleapis.com, que
   frenaba el primer pintado. Los archivos siguen viniendo de fonts.gstatic.com. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://fonts.gstatic.com/s/anton/v27/1Ptgg87LROyAm3Kz-C8CSKlv.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHrv4kjgoGqM7E_Cfs7wH8Dnzcj.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHpv4kjgoGqM7E_DMs5ynghnQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHqv4kjgoGqM7E3_-gs51ostz0rdg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHqv4kjgoGqM7E30-8s51ostz0rdg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B4-Lwz3bWuYMBYro.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B4873z3bWuYMBYro.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3bWuYMBYro.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Las letras de reserva son angostas (Impact, Arial Narrow) a propósito:
   mientras llegan Anton y Barlow Condensed el texto se acomoda casi igual y
   la página no brinca cuando cambian. */
:root {
  color-scheme: dark;
  --red: #ec1e28;
  --red-deep: #b20d2b;
  --ink: #0b0a0a;
  --charcoal: #171111;
  --paper: #f5f1ea;
  --cream: #f3e5c6;
  --gold: #ffd8a8;
  --muted: #a69e97;
  /* Duración del ciclo completo del fondo: 5 fotogramas de parrilla. */
  --ember-cycle: 34s;
  --ember-step: 6.8s;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Barlow", system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid #ff4a52;
  outline-offset: 4px;
}

img {
  max-width: 100%;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  left: 16px;
  top: 12px;
  transform: translateY(-160%);
  background: var(--paper);
  color: var(--charcoal);
  padding: 12px 18px;
  border: 2px solid var(--red);
  font-weight: 700;
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---------------------------------------------------------------- fondo */

/* Fondo vivo de parrilla: los fotogramas se encadenan con zoom y paneo
   distintos, así el fuego nunca se repite igual. */
.ember-stage {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  background: #060505;
  pointer-events: none;
}

.ember-frame {
  position: absolute;
  inset: -8%;
  background-position: center 62%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  will-change: transform, opacity;
  animation-duration: var(--ember-cycle);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* El fotograma que entra siempre se dibuja encima de uno todavía opaco:
   así el cruce no pierde luminosidad. El primero es la excepción, porque
   está debajo de todos: aparece ya opaco y el último se retira sobre él. */
.ember-frame:nth-child(1) {
  background-image: url(parrilla-fuego-01.webp);
  animation-name: emberHoldFirst, emberDrift1;
  animation-delay: 0s, 0s;
}

.ember-frame:nth-child(2) {
  animation-name: emberHold, emberDrift2;
  animation-delay: var(--ember-step), var(--ember-step);
}

.ember-frame:nth-child(3) {
  animation-name: emberHold, emberDrift3;
  animation-delay: calc(var(--ember-step) * 2), calc(var(--ember-step) * 2);
}

.ember-frame:nth-child(4) {
  animation-name: emberHold, emberDrift4;
  animation-delay: calc(var(--ember-step) * 3), calc(var(--ember-step) * 3);
}

.ember-frame:nth-child(5) {
  animation-name: emberHoldLast, emberDrift5;
  animation-delay: calc(var(--ember-step) * 4), calc(var(--ember-step) * 4);
}

/* Los fotogramas 2 a 5 (unos 540 KB) se piden cuando la página terminó de
   cargar: el segundo entra a los 6,8 s, así que llegan a tiempo sin competir
   con la foto del producto. */
.ember-stage.is-live .ember-frame:nth-child(2) {
  background-image: url(parrilla-fuego-02.webp);
}

.ember-stage.is-live .ember-frame:nth-child(3) {
  background-image: url(parrilla-fuego-03.webp);
}

.ember-stage.is-live .ember-frame:nth-child(4) {
  background-image: url(parrilla-fuego-04.webp);
}

.ember-stage.is-live .ember-frame:nth-child(5) {
  background-image: url(parrilla-fuego-05.webp);
}

/* Velo oscuro para que el texto siga siendo legible sobre las brasas. */
.ember-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 85% at 50% 100%, rgba(196, 20, 29, 0.16) 0%, rgba(6, 5, 5, 0) 58%),
    linear-gradient(
      180deg,
      rgba(6, 5, 5, 0.9) 0%,
      rgba(6, 5, 5, 0.76) 26%,
      rgba(6, 5, 5, 0.78) 68%,
      rgba(6, 5, 5, 0.94) 100%
    );
}

/* Fotogramas 2 a 5: entran fundiéndose sobre el anterior, que sigue opaco,
   y se apagan de golpe ya tapados por el siguiente. */
@keyframes emberHold {
  0% {
    opacity: 0;
  }

  4%,
  25% {
    opacity: 1;
  }

  25.01%,
  100% {
    opacity: 0;
  }
}

/* El primero está al fondo: entra ya opaco, escondido bajo el quinto. */
@keyframes emberHoldFirst {
  0%,
  25% {
    opacity: 1;
  }

  25.01%,
  100% {
    opacity: 0;
  }
}

/* El último se retira con un fundido que descubre al primero. */
@keyframes emberHoldLast {
  0% {
    opacity: 0;
  }

  4%,
  20% {
    opacity: 1;
  }

  24%,
  100% {
    opacity: 0;
  }
}

/* Acercamiento lento al centro de la parrilla. */
@keyframes emberDrift1 {
  0% {
    transform: scale(1.04) translate3d(0, 0, 0);
  }

  25%,
  100% {
    transform: scale(1.22) translate3d(0, -1.5%, 0);
  }
}

/* Se aleja desde muy cerca, hacia la derecha. */
@keyframes emberDrift2 {
  0% {
    transform: scale(1.26) translate3d(2%, -2%, 0);
  }

  25%,
  100% {
    transform: scale(1.05) translate3d(0, 0, 0);
  }
}

/* Acerca y barre de derecha a izquierda. */
@keyframes emberDrift3 {
  0% {
    transform: scale(1.08) translate3d(3.5%, 0, 0);
  }

  25%,
  100% {
    transform: scale(1.24) translate3d(-2.5%, -1%, 0);
  }
}

/* Se abre subiendo, como si el humo se levantara. */
@keyframes emberDrift4 {
  0% {
    transform: scale(1.25) translate3d(-3%, 2.5%, 0);
  }

  25%,
  100% {
    transform: scale(1.06) translate3d(1.5%, -1.5%, 0);
  }
}

/* Cierre: entra de lleno a las brasas. */
@keyframes emberDrift5 {
  0% {
    transform: scale(1.03) translate3d(0, -2%, 0);
  }

  25%,
  100% {
    transform: scale(1.28) translate3d(0, 2.5%, 0);
  }
}

/* -------------------------------------------------------------- cabecera */

.topline,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

.topline {
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--red) 0 36px, #131010 36px 44px);
}

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  background: rgba(245, 241, 234, 0.96);
  border-bottom: 3px solid #131010;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}

.header-inner,
.page-width {
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 56px);
}

.header-inner {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header-logo {
  width: auto;
  height: 54px;
  display: block;
}

.header-nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  gap: clamp(12px, 1.8vw, 30px);
  padding: 8px 4px 8px 0;
  overflow-x: auto;
  scrollbar-width: none;
  color: #131010;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.header-nav::-webkit-scrollbar {
  display: none;
}

.header-nav a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.header-nav a:hover {
  color: #c4141d;
}

.header-cta {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--red);
  color: #fff;
  padding: 13px 22px;
  border-radius: 2px;
  box-shadow: 3px 3px 0 #131010;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.25s ease, transform 0.25s ease;
}

.header-cta:hover {
  background: #131010;
  transform: translateY(-2px);
}

.header-cta svg {
  width: 17px;
  height: 17px;
}

/* -------------------------------------------------------------- piezas */

.kicker {
  display: inline-block;
  margin-bottom: 18px;
  background: var(--red);
  color: #fff;
  padding: 9px 28px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%, 13px 50%);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* La etiqueta dentro de un título (como en el landing): misma figura, sin
   heredar el tamaño ni el contorno del título. */
.kicker--in-title {
  display: block;
  width: fit-content;
  line-height: normal;
  -webkit-text-stroke: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--red);
  color: #fff;
  padding: 16px 30px;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 7px 0 rgba(83, 7, 21, 0.75);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.button:hover {
  transform: translateY(3px);
  box-shadow: 0 4px 0 rgba(83, 7, 21, 0.75);
}

.button svg {
  width: 18px;
  height: 18px;
}

.button.dark {
  background: var(--charcoal);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.55);
}

.button.ghost {
  background: transparent;
  border: 2px solid rgba(245, 241, 234, 0.65);
  box-shadow: none;
}

.button.ghost:hover {
  background: rgba(245, 241, 234, 0.12);
  transform: translateY(-2px);
  box-shadow: none;
}

h1,
h2,
h3 {
  font-family: "Anton", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

.section-title {
  margin: 0 0 16px;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1;
  text-wrap: balance;
}

.section-lead {
  max-width: 620px;
  margin: 0;
  font-size: 17px;
  line-height: 1.62;
  color: #a39b94;
  text-wrap: pretty;
}

/* ------------------------------------------------------------ hero ficha */

.breadcrumbs {
  padding: 26px 0 4px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8e8680;
}

.breadcrumbs a {
  color: var(--cream);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--red);
}

.pdp-hero {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(320px, 1.28fr);
  gap: clamp(34px, 5vw, 72px);
  /* Arriba y no al centro: si el texto cambia de alto al llegar la letra, la
     foto no se mueve con él. */
  align-items: start;
  padding: clamp(26px, 4vw, 46px) 0 clamp(56px, 7vw, 96px);
}

.pdp-frame {
  position: relative;
  width: min(100%, 360px);
  margin: 0 auto;
  padding: 12px;
  background: #f8f2e8;
  border: 3px solid var(--charcoal);
  box-shadow: 12px 14px 0 var(--charcoal), 0 28px 56px rgba(0, 0, 0, 0.42);
  transform: rotate(-2deg);
}

/* Sin recortes: la foto manda su propia proporción (no todas son 4:5). */
.pdp-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.pdp-frame-caption {
  position: absolute;
  z-index: 2;
  left: -14px;
  bottom: 26px;
  padding: 10px 18px;
  background: var(--red);
  color: #fff;
  box-shadow: 5px 5px 0 var(--charcoal);
  transform: rotate(-5deg);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pdp-title {
  margin: 0 0 22px;
  font-size: clamp(48px, 6.6vw, 88px);
  line-height: 0.86;
  color: #fff;
  -webkit-text-stroke: 9px var(--charcoal);
  paint-order: stroke fill;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.65));
  text-wrap: balance;
}

.pdp-lead {
  max-width: 560px;
  margin: 0 0 30px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: #ded7cd;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.8);
  text-wrap: pretty;
}

.pdp-price {
  display: inline-flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 30px;
  padding: 16px 24px 14px;
  background: rgba(18, 16, 16, 0.82);
  border: 1px solid rgba(245, 241, 234, 0.14);
  border-left: 5px solid var(--red);
  border-radius: 0 26px 8px 0;
  box-shadow: 8px 9px 0 rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
}

.pdp-price b {
  font-family: "Anton", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1;
}

.pdp-price span {
  padding-bottom: 6px;
  color: var(--gold);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pdp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 32px;
}

.pdp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.pdp-badges span {
  padding: 8px 14px;
  border: 1px solid rgba(243, 229, 198, 0.42);
  border-radius: 999px;
  color: var(--cream);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- ticker */

.ticker {
  overflow: hidden;
  padding: 15px 0;
  background: var(--red);
  border-top: 3px solid #131010;
  border-bottom: 3px solid #131010;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: tickerScroll 34s linear infinite;
  font-family: "Anton", Impact, "Arial Narrow", sans-serif;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.ticker-group {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
}

.ticker-group i {
  color: rgba(255, 255, 255, 0.5);
  font-style: normal;
}

@keyframes tickerScroll {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------- bandas */

.band {
  padding: clamp(56px, 8vw, 104px) 0;
}

.band--cream {
  background: var(--cream);
  color: var(--charcoal);
  border-top: 3px solid #131010;
  border-bottom: 3px solid #131010;
}

.band--cream .section-lead {
  color: #5a4e43;
}

.band-head {
  max-width: 660px;
  margin-bottom: clamp(30px, 4vw, 50px);
}

/* Tarjeta roja: la misma figura que usan las tarjetas del landing. */
.card-red {
  padding: clamp(26px, 3vw, 38px);
  background: linear-gradient(145deg, #c41336 0%, #a80727 72%, #8f061f 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px 7px 26px 8px;
  box-shadow: 10px 12px 0 var(--charcoal), 0 24px 46px rgba(91, 26, 20, 0.25);
  color: #fff;
}

.card-red h3 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.4vw, 29px);
  line-height: 1.05;
  color: var(--gold);
}

.card-red p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  text-wrap: pretty;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  background: rgba(23, 17, 17, 0.06);
  border-left: 4px solid var(--red);
}

.step b {
  font-family: "Anton", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--red);
  line-height: 1.1;
}

.step strong {
  display: block;
  margin-bottom: 5px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 19px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.step p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: #5a4e43;
}

.step p a {
  color: var(--red-deep);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* Cómo prepararlo: la foto de la receta al lado de los pasos. */
.howto {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin-top: clamp(30px, 4vw, 52px);
}

.howto-photo {
  margin: 0;
  overflow: hidden;
  border: 3px solid var(--charcoal);
  border-radius: 3px;
  box-shadow: 10px 12px 0 var(--red);
  transform: rotate(-1.2deg);
  background: var(--charcoal);
}

.howto-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.howto-steps {
  display: grid;
  gap: 14px;
}

.howto-title {
  margin: 0 0 4px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
  text-wrap: balance;
}

/* ---------------------------------------------------------- otros items */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(18px, 2vw, 26px);
}

.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(18, 16, 16, 0.78);
  border: 1px solid rgba(245, 241, 234, 0.12);
  border-radius: 4px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(9px);
  text-decoration: none;
  transition: transform 0.32s ease, border-color 0.3s ease, box-shadow 0.32s ease;
}

.product-card:hover {
  transform: translateY(-7px);
  border-color: rgba(236, 30, 40, 0.7);
  box-shadow: 0 34px 64px rgba(0, 0, 0, 0.62);
}

/* La foto se muestra completa sobre su fondo claro: nunca recortada. */
.product-card-photo {
  position: relative;
  display: grid;
  place-items: center;
  height: 300px;
  padding: 14px;
  background: #f3f2ef;
  border-bottom: 3px solid var(--red);
}

.product-card-photo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.product-card-photo span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  background: var(--red);
  color: #fff;
  box-shadow: 3px 3px 0 #131010;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.product-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
}

.product-card-body h3 {
  margin: 0;
  font-size: 26px;
  line-height: 1.05;
}

.product-card-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #a8a09a;
}

.product-card-body em {
  margin-top: auto;
  padding-top: 6px;
  color: var(--red);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ------------------------------------------------------- tira de línea */

/* En la ficha no hace falta un segundo catálogo: basta una tira compacta
   para saltar de un producto a otro. */
.rail-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}

.rail-head h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
}

.rail-head a {
  color: var(--red);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 2px solid var(--red);
  padding-bottom: 3px;
}

.rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.rail-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 16px 12px 12px;
  background: rgba(18, 16, 16, 0.72);
  border: 1px solid rgba(245, 241, 234, 0.12);
  border-left: 3px solid rgba(236, 30, 40, 0.55);
  backdrop-filter: blur(8px);
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.rail-item:hover {
  transform: translateX(4px);
  border-left-color: var(--red);
  background: rgba(28, 24, 24, 0.85);
}

.rail-thumb {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 5px;
  background: #f3f2ef;
  border-radius: 2px;
}

.rail-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.rail-item strong {
  display: block;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.rail-item span {
  display: block;
  margin-top: 3px;
  color: #9a928b;
  font-size: 13.5px;
  line-height: 1.35;
}

/* ------------------------------------------------------------- cierre */

.closing {
  padding: clamp(50px, 7vw, 90px) 0 clamp(60px, 8vw, 100px);
}

.closing-card {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  justify-content: space-between;
  padding: clamp(30px, 4vw, 52px);
  background: linear-gradient(145deg, #c41336 0%, #a80727 72%, #8f061f 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 30px 8px 28px 9px;
  box-shadow: 12px 14px 0 var(--charcoal), 0 30px 60px rgba(91, 26, 20, 0.32);
}

.closing-card h2 {
  margin: 0 0 10px;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 0.98;
  color: #fff;
  text-wrap: balance;
}

.closing-card p {
  margin: 0;
  max-width: 44ch;
  font-size: 16.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}

.closing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

/* --------------------------------------------------------------- pie */

.site-footer {
  background: var(--cream);
  color: var(--charcoal);
  border-top: 3px solid var(--red);
  padding: clamp(40px, 6vw, 66px) 0 32px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(23, 17, 17, 0.22);
}

.footer-logo {
  padding: 14px 20px 11px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 5px 5px 0 rgba(236, 30, 40, 0.85);
}

.footer-logo img {
  height: 56px;
  width: auto;
  display: block;
}

.footer-note {
  max-width: 380px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #5a4e43;
  text-wrap: pretty;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border: 2px solid rgba(23, 17, 17, 0.3);
  border-radius: 2px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.footer-links a:hover {
  border-color: var(--red);
  color: var(--red);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  padding-top: 24px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6d6158;
}

.footer-zarela {
  color: var(--charcoal);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.footer-zarela:hover {
  color: var(--red);
}

.wa-float {
  position: fixed;
  z-index: 90;
  right: clamp(16px, 2.5vw, 30px);
  bottom: clamp(16px, 2.5vw, 30px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 19px 14px 15px;
  background: #25d366;
  color: #102516;
  border: 2px solid #102516;
  border-radius: 999px;
  box-shadow: 6px 7px 0 var(--charcoal), 0 18px 38px rgba(0, 0, 0, 0.26);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wa-float:hover {
  transform: translateY(-3px);
  box-shadow: 8px 10px 0 var(--charcoal), 0 22px 44px rgba(0, 0, 0, 0.3);
}

.wa-float svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------ catálogo */

.catalog-intro {
  max-width: 780px;
  padding: clamp(38px, 5vw, 62px) 0 clamp(30px, 4vw, 46px);
}

.catalog-intro h1 {
  margin: 0 0 20px;
  font-size: clamp(44px, 6vw, 78px);
  line-height: 0.9;
  color: #fff;
  -webkit-text-stroke: 8px var(--charcoal);
  paint-order: stroke fill;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.6));
  text-wrap: balance;
}

/* En el catálogo la rejilla ya vive dentro de una banda con su propio aire. */
.catalog-grid {
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

/* -------------------------------------------------------------- recetas */

.howto-recipe {
  justify-self: start;
  margin-top: 4px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--red);
  padding-bottom: 3px;
}

.recipe-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(30px, 4.5vw, 64px);
  align-items: start;
  padding: clamp(26px, 4vw, 46px) 0 clamp(56px, 7vw, 96px);
}

.recipe-photo {
  position: relative;
  margin: 0;
  padding: 10px;
  background: #f8f2e8;
  border: 3px solid var(--charcoal);
  box-shadow: 12px 14px 0 var(--charcoal), 0 28px 56px rgba(0, 0, 0, 0.42);
  transform: rotate(-1.5deg);
}

.recipe-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Foto del empaque mientras no haya foto del plato: entera, sin recortar. */
.recipe-photo--product img {
  object-fit: contain;
  background: #fff;
}

.recipe-title {
  font-size: clamp(42px, 5.4vw, 74px);
}

.recipe-meta {
  margin: 0 0 26px;
}

.recipe-body {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(26px, 3.6vw, 52px);
  align-items: start;
}

.recipe-ingredients h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  color: var(--gold);
}

.recipe-ingredients ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.15em;
  font-size: 16.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.recipe-steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recipe-tip {
  margin: 20px 0 0;
  padding: 18px 22px;
  background: rgba(236, 30, 40, 0.1);
  border-left: 4px solid var(--red-deep);
  font-size: 16px;
  line-height: 1.55;
  color: #3a312a;
}

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

.recipe-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #191616 0%, #100e0e 100%);
  border: 1px solid rgba(245, 241, 234, 0.11);
  border-radius: 4px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5);
  color: var(--paper);
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.recipe-card:hover {
  transform: translateY(-6px);
  border-color: rgba(236, 30, 40, 0.65);
}

.recipe-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 3px solid var(--red);
}

.recipe-card--product img {
  object-fit: contain;
  background: #f3f2ef;
}

.recipe-card div {
  display: grid;
  gap: 10px;
  padding: 22px 24px 26px;
}

.recipe-card h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.02;
}

.recipe-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #a8a09a;
}

.recipe-card em {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

/* Miniatura de una foto de receta (no de empaque): llena el cuadro. */
.rail-thumb--photo {
  padding: 0;
  overflow: hidden;
}

.rail-thumb--photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* ------------------------------------------------------------ responsive */

/* Como en el landing: en pantallas medianas y chicas el menú se esconde y
   quedan el logo y el botón de WhatsApp (antes se cortaba a la derecha). */
@media (max-width: 960px) {
  .header-nav {
    display: none;
  }
}

@media (max-width: 900px) {
  .pdp-hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .howto,
  .recipe-hero,
  .recipe-body {
    grid-template-columns: 1fr;
  }

  .pdp-frame {
    transform: rotate(-1.5deg);
    box-shadow: 10px 12px 0 var(--charcoal), 0 22px 44px rgba(0, 0, 0, 0.42);
  }

  .closing-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  .header-inner {
    height: 74px;
    gap: 14px;
  }

  .header-logo {
    height: 44px;
  }

  .header-nav {
    font-size: 13.5px;
    letter-spacing: 0.1em;
  }

  /* Sin el menú hay espacio para el texto del botón, igual que en el landing. */
  .header-cta {
    padding: 10px 12px;
    gap: 6px;
    font-size: 12.5px;
    letter-spacing: 0.045em;
  }

  .pdp-title {
    -webkit-text-stroke-width: 7px;
  }

  .wa-float span {
    display: none;
  }

  .wa-float {
    padding: 14px;
  }

  /* En móvil el recorrido es más corto: menos trabajo para la GPU. */
  .ember-frame {
    inset: -5%;
    background-position: center 70%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .ticker-track {
    animation: none;
  }

  .ember-frame {
    animation: none;
    opacity: 0;
  }

  .ember-frame:nth-child(1) {
    opacity: 1;
    transform: scale(1.06);
  }
}