/* ============================================================
   ZEN NATURAL BALANCED NUTRITION
   Dirección de arte: editorial premium, no landing SaaS
   ============================================================ */

/* Gotham para Zen: cargar desde las fuentes proporcionadas por el propietario.
   Instala los archivos con INSTALAR_Y_ABRIR_ZEN.bat. */
@font-face { font-family: 'Zen Gotham'; src: local('Gotham Light'), url('../fonts/gotham/Gotham-Light.otf') format('opentype'); font-style: normal; font-weight: 300; font-display: swap; }
@font-face { font-family: 'Zen Gotham'; src: local('Gotham Book'), url('../fonts/gotham/Gotham-Book.otf') format('opentype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Zen Gotham'; src: local('Gotham Medium'), url('../fonts/gotham/Gotham-Medium.otf') format('opentype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Zen Gotham'; src: local('Gotham Bold'), url('../fonts/gotham/Gotham-Bold.otf') format('opentype'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Zen Gotham'; src: local('Gotham Black'), url('../fonts/gotham/Gotham-Black.otf') format('opentype'); font-style: normal; font-weight: 900; font-display: swap; }
@font-face { font-family: 'Zen Gotham'; src: local('Gotham Italic'), url('../fonts/gotham/Gotham-Italic.otf') format('opentype'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Zen Gotham'; src: local('Gotham Bold Italic'), url('../fonts/gotham/Gotham-BoldItalic.ttf') format('truetype'); font-style: italic; font-weight: 700; font-display: swap; }


:root {
  --negro:   #1a1a1a;
  --dorado:  #C9A84C;
  --crema:   #F5F2EC;
  --marron:  #2C1A00;
  --gris:    #7a776f;
  --gris-cl: #b5b2aa;
  --borde:   #e2ddd4;
  --font:    'Zen Gotham', 'Gotham', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--crema); color: var(--negro); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; }

/* ── TICKER ─────────────────────────────────────────────── */
.ticker {
  background: var(--negro);
  overflow: hidden;
  white-space: nowrap;
  padding: 9px 0;
  border-bottom: 1px solid var(--dorado);
}
.ticker-inner {
  display: inline-block;
  animation: tick 28s linear infinite;
  font-size: 10px;
  font-weight: 500;
  color: var(--dorado);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── NAVBAR ──────────────────────────────────────────────── */
.navbar {
  background: var(--crema);
  display: flex;
  align-items: center;
  padding: 0 48px;
  height: 64px;
  border-bottom: 0.5px solid var(--borde);
}
.nav-logo-img { height: 38px; width: auto; margin-right: 48px; flex-shrink: 0; }
.nav-links { display: flex; align-items: stretch; height: 64px; gap: 0; }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 20px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--gris);
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  cursor: pointer;
  text-decoration: none;
}
.nav-item:hover, .nav-item.active { color: var(--negro); border-bottom-color: var(--dorado); }
/* Perros y Gatos: el texto es enlace y el chevron un botón, sin cambiar el aspecto */
.nav-item-drop { padding: 0; }
.nav-item-link { display: flex; align-items: center; height: 100%; padding: 0 4px 0 20px; color: inherit; text-decoration: none; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.nav-item-toggle { display: flex; align-items: center; height: 100%; padding: 0 20px 0 0; background: none; border: none; color: inherit; cursor: pointer; font: inherit; }
.nav-item-link:focus-visible, .nav-item-toggle:focus-visible, .nav-mobile-link:focus-visible, .nav-mobile-btn:focus-visible, .nav-mobile-close:focus-visible, .mega-link:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }
.nav-item-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Mega-menú en bloques: banda alineada con la página, no colgada del ítem */
.nav-item-drop { position: static; }
.mega-menu-ancho { position: absolute; left: 0; right: 0; width: auto; max-width: none; top: 64px; padding: 26px 48px 30px; border-left: none; border-right: none; }
.mm-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.6fr; gap: 0 32px; align-items: start; text-transform: none; letter-spacing: normal; }
.mm-col { border-right: 0.5px solid var(--borde); padding-right: 32px; }
.mm-col:last-child { border-right: none; padding-right: 0; }
.mm-bloque { display: block; position: relative; padding: 9px 12px; margin-bottom: 3px; background: transparent; border: 0.5px solid transparent; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--gris); text-transform: none; letter-spacing: 0.01em; text-decoration: none; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.mm-bloque:hover, .mm-bloque:focus-visible { background: #EDE9E1; border-color: var(--borde); color: var(--negro); }
.mm-nota { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); margin-top: 2px; }
.mm-vertodo { display: inline-block; margin-top: 10px; margin-left: 12px; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-cl); text-decoration: none; border-bottom: 0.5px solid var(--dorado); padding-bottom: 2px; }
.mm-vertodo:hover { color: var(--negro); }
/* La columna de gamas es la más larga: va a dos filas para no descuadrar el panel */
.mm-col-gamas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.mm-col-gamas .mega-col-title { grid-column: 1 / -1; }
.mm-col-gamas .mm-vertodo { grid-column: 1 / -1; }
@media (max-width: 1080px) { .mm-grid { grid-template-columns: 1fr 1fr; gap: 0 24px; } .mm-col { border-right: none; padding-right: 0; padding-bottom: 16px; } }
.nav-item svg { width: 9px; height: 9px; flex-shrink: 0; transition: transform 0.2s; }
.nav-item:hover .nav-item-toggle svg { transform: rotate(180deg); }

/* Mega-menú: anclado a su propio ítem, ancho según contenido */
.navbar { position: relative; }
.nav-item { position: relative; }

.mega-menu {
  position: absolute;
  top: 64px;
  left: 0;
  width: max-content;
  max-width: min(900px, calc(100vw - 96px));
  background: var(--crema);
  border: 0.5px solid var(--borde);
  border-top: 2px solid var(--dorado);
  box-shadow: 0 14px 32px rgba(26,26,26,0.08);
  padding: 30px 36px 34px;
  display: none;
  z-index: 400;
}
.nav-item.menu-open .mega-menu { display: block; }

.mega-menu-grid {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  grid-template-columns: none !important;
  gap: 0;
  align-items: start;
}
.mega-menu-grid > div {
  padding-right: 30px;
  border-right: 0.5px solid var(--borde);
}
.mega-menu-grid > div:last-child { border-right: none; padding-right: 0; }
.mega-menu-grid > div + div { padding-left: 30px; }
.mega-col-title {
  white-space: nowrap;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dorado);
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 0.5px solid var(--borde);
}
.mega-link { display: block; font-size: 12.5px; color: var(--gris); padding: 5px 0; transition: color 0.1s; white-space: nowrap; }
.mega-link:hover { color: var(--negro); }
.mega-link.is-soon { color: #B0AAA0; cursor: default; }
.mega-link.is-soon::after { content: "Próximamente"; display: inline-block; margin-left: 8px; font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #C0BAB0; vertical-align: 1px; }

/* ── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb {
  padding: 12px 48px;
  font-size: 11px;
  color: var(--gris-cl);
  border-bottom: 0.5px solid var(--borde);
  background: var(--crema);
}
.breadcrumb a { color: var(--gris-cl); transition: color 0.1s; }
.breadcrumb a:hover { color: var(--negro); }
.breadcrumb span { color: var(--negro); font-weight: 600; }

/* ── FICHA PRODUCTO ──────────────────────────────────────── */
.product-layout {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 640px;
  background: var(--crema);
}
.gallery {
  background: #EDE9E1;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 0.5px solid var(--borde);
}
.main-img {
  background: #EDE9E1;
  height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 18px;
}
.main-img img { height: 100%; width: 100%; object-fit: contain; transition: transform 0.4s ease; }
.main-img:hover img { transform: scale(1.03); }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumb {
  width: 66px; height: 66px;
  background: var(--crema);
  border: 1px solid transparent;
  overflow: hidden;
  cursor: pointer;
  padding: 4px;
  transition: border-color 0.15s;
}
.thumb.active, .thumb:hover { border-color: var(--negro); }
.thumb img { width: 100%; height: 100%; object-fit: contain; }

.product-info {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  border-right: 0.5px solid var(--borde);
}
.prod-eyebrow {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dorado); margin-bottom: 14px;
}
.prod-title {
  font-size: 28px; font-weight: 700;
  line-height: 1.15; color: var(--negro);
  margin-bottom: 16px;
}
.prod-stars { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.prod-stars i { font-size: 12px; color: var(--dorado); }
.prod-stars span { font-size: 11px; color: var(--gris-cl); border-bottom: 1px solid var(--borde); padding-bottom: 1px; cursor: pointer; }
.prod-sub { font-size: 13px; color: var(--gris); line-height: 1.75; margin-bottom: 24px; }

/* Sellos en atributos */
.prod-attrs { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 0.5px solid var(--borde); flex-wrap: wrap; }
.attr-sello { height: 52px; width: auto; object-fit: contain; transition: transform 0.2s; }
.attr-sello:hover { transform: scale(1.05); }

.size-label { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--negro); margin-bottom: 12px; }
.size-opts { display: flex; gap: 8px; margin-bottom: 24px; }
.size-opt {
  border: 1px solid var(--borde);
  padding: 11px 18px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 84px;
  background: transparent;
}
.size-opt.active { border-color: var(--negro); background: var(--negro); color: #fff; }
.size-opt:hover:not(.active) { border-color: var(--dorado); }
.size-opt-kg { font-size: 14px; font-weight: 700; }
.size-opt-note { font-size: 9px; color: var(--gris-cl); margin-top: 3px; letter-spacing: 0.04em; }
.size-opt.active .size-opt-note { color: rgba(255,255,255,0.5); }

.find-btn {
  display: block; width: 100%;
  padding: 15px;
  background: var(--negro); color: #fff;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center; border: none;
  transition: background 0.15s;
  margin-bottom: 10px;
}
.find-btn:hover { background: var(--marron); }
.find-sub {
  font-size: 10px; color: var(--gris-cl);
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-bottom: 28px;
}

.accordion { border-top: 0.5px solid var(--borde); }
.acc-item { border-bottom: 0.5px solid var(--borde); }
.acc-header { padding: 15px 0; display: flex; justify-content: space-between; cursor: pointer; }
.acc-title { font-size: 12px; font-weight: 600; color: var(--negro); letter-spacing: 0.02em; }
.acc-icon { font-size: 18px; color: var(--gris-cl); transition: transform 0.2s; user-select: none; line-height: 1; }
.acc-icon.open { transform: rotate(45deg); }
.acc-body { display: none; padding-bottom: 16px; }
.acc-body.open { display: block; }
.acc-text { font-size: 13px; color: var(--gris); line-height: 1.75; }
.nutr-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.nutr-table tr { border-bottom: 0.5px solid var(--borde); }
.nutr-table td { padding: 7px 0; color: var(--gris); }
.nutr-table td:last-child { text-align: right; font-weight: 700; color: var(--negro); }
.for-who { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.for-item { font-size: 12px; color: var(--gris); display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.for-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--dorado); flex-shrink: 0; }

/* ── FRANJA SELLOS EDITORIAL ─────────────────────────────── */
.ficha-sellos-wrap {
  background: var(--marron);
  padding: 36px 48px;
  border-top: 1px solid var(--dorado);
  border-bottom: 1px solid var(--dorado);
}
.ficha-sellos-claim {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dorado); text-align: center;
  margin-bottom: 24px;
}
.ficha-sellos-fila {
  display: flex; align-items: center;
  justify-content: center; gap: 0;
  margin-bottom: 12px;
}
.ficha-sello { padding: 0 28px; display: flex; align-items: center; justify-content: center; }
.ficha-sello img { height: 56px; width: auto; object-fit: contain; }
.ficha-sello-sep { width: 0.5px; height: 44px; background: rgba(255,255,255,0.12); flex-shrink: 0; align-self: center; }
.ficha-sellos-labels {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 28px;
}
.ficha-sellos-labels span {
  font-size: 9px; font-weight: 500;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.ficha-sellos-labels .dot { color: rgba(255,255,255,0.15); font-size: 12px; }

/* Stats grandes editorial */
.ficha-stats-grandes {
  display: flex; align-items: flex-start;
  justify-content: center; gap: 0;
  padding: 0 0 24px;
}
.fsg-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 0 24px;
  border-right: 0.5px solid rgba(255,255,255,0.1);
}
.fsg-col:last-child { border-right: none; }
.fsg-num {
  font-size: 48px; font-weight: 700;
  color: #fff; line-height: 1; letter-spacing: -0.02em;
}
.fsg-num sup { font-size: 22px; font-weight: 700; color: #fff; vertical-align: super; font-style: normal; }
.fsg-brand-stat { display: flex; align-items: center; min-height: 48px; }
.fsg-brand-stat img { display: block; width: 104px; max-width: 100%; height: auto; }
.fsg-plus { font-size: 24px; font-weight: 800; color: var(--dorado); margin-left: 1px; }
.fsg-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: rgba(255,255,255,0.85);
  text-align: center; line-height: 1.6;
}
.fsg-label em { font-weight: 400; color: rgba(255,255,255,0.4); text-transform: none; letter-spacing: 0.04em; }

/* Fila secundaria */
.ficha-stats-secundarios {
  display: flex; align-items: center; justify-content: center; gap: 0;
  border-top: 0.5px solid rgba(255,255,255,0.1);
  padding-top: 20px;
}
.fss-item { display: flex; align-items: center; gap: 8px; padding: 0 28px; }
.fss-item img { height: 20px; width: auto; object-fit: contain; opacity: 0.7; }
.fss-item span {
  font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}

/* ── INGREDIENTES ─────────────────────────────────────────── */
.ing-section { padding: 72px 48px; background: var(--crema); }
.ing-section-header { margin-bottom: 40px; }
.ing-section-title { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--negro); margin-bottom: 6px; }
.ing-section-sub { font-size: 12px; color: var(--gris-cl); letter-spacing: 0.04em; }
.ing-scroll {
  display: flex; gap: 28px;
  overflow-x: auto; padding-bottom: 12px;
  scroll-snap-type: x mandatory;
}
.ing-scroll::-webkit-scrollbar { height: 1px; }
.ing-scroll::-webkit-scrollbar-thumb { background: var(--dorado); }
.ing-card { flex-shrink: 0; width: 180px; scroll-snap-align: start; }
.ing-photo {
  height: 160px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; position: relative;
  background: #EDE9E1;
}
.ing-photo img { width: 82%; height: 82%; object-fit: contain; transition: transform 0.35s ease; }
.ing-card:hover .ing-photo img { transform: scale(1.07); }
.ing-pct { font-size: 9px; font-weight: 700; color: var(--dorado); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 5px; }
.ing-name { font-size: 14px; font-weight: 700; color: var(--negro); margin-bottom: 6px; }
.ing-desc { font-size: 11px; color: var(--gris); line-height: 1.6; }

/* ── STATS GIGANTES (ficha y home) ───────────────────────── */
.stats-giant {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 0.5px solid var(--borde);
  background: var(--crema);
}

/* ── BENEFICIOS ───────────────────────────────────────────── */
.why-section { padding: 72px 48px; background: #EDE9E1; border-top: 0.5px solid var(--borde); }
.why-title { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--negro); margin-bottom: 40px; }
.why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 36px; }
.why-item { display: flex; flex-direction: column; gap: 10px; }
.why-circle {
  width: 56px; height: 56px;
  border: 1px solid var(--dorado);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.why-circle i { font-size: 22px; color: var(--dorado); }
.why-lbl { font-size: 13px; font-weight: 700; color: var(--negro); line-height: 1.3; }
.why-desc { font-size: 12px; color: var(--gris); line-height: 1.65; }

/* ── CALCULADORA ──────────────────────────────────────────── */
.racion-section { background: var(--crema); padding: 72px 48px; border-top: 0.5px solid var(--borde); }
.section-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); margin-bottom: 10px; display: block; }
.section-title { font-size: 24px; font-weight: 700; color: var(--negro); margin-bottom: 8px; }
.section-sub { font-size: 13px; color: var(--gris); margin-bottom: 36px; line-height: 1.7; }
.controls-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 24px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--negro); }
.field-select {
  padding: 10px 12px; border: 0.5px solid var(--borde);
  background: transparent; font-size: 13px; color: var(--negro);
  outline: none; font-family: var(--font);
  transition: border-color 0.15s;
}
.field-select:focus { border-color: var(--dorado); }
.peso-row { margin-bottom: 28px; }
input[type=range] { width: 100%; accent-color: var(--dorado); height: 2px; }
.slider-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--gris-cl); margin-top: 8px; }
.racion-result {
  background: #EDE9E1;
  padding: 28px 32px;
  margin-bottom: 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-left: 3px solid var(--dorado);
}
.racion-num { font-size: 56px; font-weight: 700; color: var(--negro); line-height: 1; }
.racion-unit { font-size: 14px; color: var(--gris); margin-left: 4px; }
.racion-desc-text { font-size: 12px; color: var(--gris); margin-top: 6px; }
.splits { display: flex; gap: 10px; }
.split-item { background: var(--crema); padding: 12px 18px; text-align: center; border: 0.5px solid var(--borde); }
.split-num { font-size: 18px; font-weight: 700; color: var(--negro); }
.split-label { font-size: 10px; color: var(--gris-cl); margin-top: 3px; letter-spacing: 0.06em; }
.sacks-title { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--negro); margin-bottom: 14px; }
.sacks-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sacks-table thead tr { border-bottom: 1px solid var(--negro); }
.sacks-table th { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); padding: 10px 0; text-align: left; }
.sacks-table th:not(:first-child) { text-align: center; }
.sacks-table td { padding: 12px 0; color: var(--negro); border-bottom: 0.5px solid var(--borde); }
.sacks-table tr:last-child td { border-bottom: none; }
.sacks-table td:not(:first-child) { text-align: center; color: var(--gris); }
.nota { font-size: 11px; color: var(--gris-cl); margin-top: 20px; line-height: 1.7; }

/* ── RELACIONADOS ─────────────────────────────────────────── */
.related { background: var(--crema); padding: 72px 48px; border-top: 0.5px solid var(--borde); }
.related-title { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--negro); margin-bottom: 36px; }
.rel-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: 0.5px solid var(--borde); }
.rel-card { text-decoration: none; display: block; background: var(--crema); border-right: 0.5px solid var(--borde); transition: background 0.15s; }
.rel-card:last-child { border-right: none; }
.rel-card:hover { background: #EDE9E1; }
.rel-img { background: #EDE9E1; padding: 24px; display: flex; align-items: center; justify-content: center; height: 160px; border-bottom: 0.5px solid var(--borde); }
.rel-img img { height: 100%; object-fit: contain; }
.rel-body { padding: 18px; }
.rel-tag { font-size: 9px; font-weight: 700; color: var(--dorado); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 5px; }
.rel-name { font-size: 13px; font-weight: 700; color: var(--negro); line-height: 1.4; }

/* ── GRID CATEGORÍA ───────────────────────────────────────── */
.product-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 0.5px solid var(--borde); margin: 40px 48px; }
.pcard { text-decoration: none; display: block; border-right: 0.5px solid var(--borde); background: var(--crema); transition: background 0.15s; }
.pcard:last-child { border-right: none; }
.pcard:hover { background: #EDE9E1; }
.pcard-img { background: #EDE9E1; aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; padding: 12px; position: relative; overflow: hidden; border-bottom: 0.5px solid var(--borde); }
.pcard-img img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s ease; }
.pcard:hover .pcard-img img { transform: scale(1.04); }
/* En las rejillas de húmedo el producto se muestra a menor escala; los sacos van a tamaño completo */
.grid-humedo .pcard-img img { width: 66%; height: 66%; }
/* Las latas ya traen el margen dentro del archivo: no se reducen otra vez */
.grid-humedo .pcard-img img.img-full { width: 100%; height: 100%; }
.grid-humedo .pcard:hover .pcard-img img { transform: scale(1.05); }
.pcard-badge { position: absolute; top: 12px; left: 12px; }
.badge-pill { display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; }
.badge-pill-gold { background: var(--dorado); color: var(--marron); }
.badge-pill-green { background: var(--negro); color: #fff; }
.badge-pill-blue { background: var(--negro); color: #fff; }
.badge-pill-purple { background: var(--negro); color: #fff; }
.badge-pill-red { background: var(--negro); color: #fff; }
.pcard-body { padding: 20px; }
.pcard-tag { font-size: 9px; font-weight: 700; color: var(--dorado); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.pcard-name { font-size: 13px; font-weight: 700; color: var(--negro); line-height: 1.4; margin-bottom: 8px; }
.pcard-desc { font-size: 11px; color: var(--gris); line-height: 1.55; margin-bottom: 14px; }
.pcard-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard-sizes { display: flex; gap: 4px; flex-wrap: wrap; }
.size-tag { font-size: 9px; padding: 2px 6px; border: 0.5px solid var(--borde); color: var(--gris); letter-spacing: 0.04em; }
.pcard-btn { display: inline-block; font-size: 9px; font-weight: 700; padding: 7px 14px; background: var(--negro); color: #fff; border: none; letter-spacing: 0.1em; text-transform: uppercase; transition: background 0.15s; }
.pcard-btn:hover { background: var(--marron); }

/* ── FOOTER ───────────────────────────────────────────────── */
.footer { background: var(--negro); color: rgba(255,255,255,0.4); padding: 64px 48px 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.footer-logo { margin-bottom: 14px; }
.footer-logo span { color: var(--dorado); }
.footer-desc { font-size: 12px; line-height: 1.8; }
.footer-col-title { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); margin-bottom: 18px; }
.footer-link { display: block; font-size: 12px; color: rgba(255,255,255,0.4); padding: 4px 0; transition: color 0.1s; }
.footer-link:hover { color: #fff; }
.footer-bottom { border-top: 0.5px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; font-size: 10px; letter-spacing: 0.04em; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { color: rgba(255,255,255,0.25); transition: color 0.1s; }
.footer-legal a:hover { color: rgba(255,255,255,0.6); }

/* ── HOME ─────────────────────────────────────────────────── */
/* Hero editorial: imagen full + texto anclado abajo izquierda */
.hero-editorial {
  position: relative;
  height: 88vh; min-height: 560px;
  overflow: hidden;
  background: var(--negro);
}
.hero-editorial-img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; opacity: 0.55; }
.hero-editorial-content {
  position: absolute;
  bottom: 0; left: 0;
  padding: 56px 64px;
  max-width: 620px;
}
.hero-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); margin-bottom: 16px; display: block; }
.hero-title { font-size: 48px; font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 20px; }
.hero-sub { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.7; max-width: 440px; }
.hero-cta {
  display: inline-block; margin-top: 28px;
  padding: 14px 32px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  transition: border-color 0.15s, background 0.15s;
}
.hero-cta:hover { border-color: var(--dorado); background: rgba(201,168,76,0.12); }

/* Beneficio principal: bloque editorial de carne y pescado fresco */
.home-sello-strip {
  background: var(--marron);
  border-top: 1px solid var(--dorado);
  border-bottom: 1px solid var(--dorado);
  padding: 28px 48px;
  display: flex; align-items: center; gap: 0;
}
.home-sello-item {
  display: flex; align-items: center; gap: 18px;
  flex: 1; padding: 0 32px;
}
.home-sello-item:first-child { padding-left: 0; }
.home-sello-item img { height: 56px; width: auto; object-fit: contain; flex-shrink: 0; }
.home-sello-text { display: flex; flex-direction: column; gap: 4px; }
.home-sello-title { font-size: 12px; font-weight: 700; color: #fff; }
.home-sello-desc { font-size: 11px; color: rgba(255,255,255,0.45); line-height: 1.5; }
.home-sello-div { width: 0.5px; height: 52px; background: rgba(255,255,255,0.1); flex-shrink: 0; }

/* Stats numéricos home */
.home-stats-img {
  display: flex; align-items: stretch; gap: 0;
  border-bottom: 0.5px solid var(--borde);
  background: var(--crema);
}
.home-stat-img-item {
  flex: 1; display: flex; align-items: center; gap: 20px;
  padding: 40px 48px;
  border-right: 0.5px solid var(--borde);
}
.home-stat-img-item:last-child { border-right: none; }
.home-stat-img-num { height: 52px; width: auto; object-fit: contain; flex-shrink: 0; }
.home-stat-img-text { display: flex; flex-direction: column; gap: 5px; }
.home-stat-img-label { font-size: 12px; font-weight: 700; color: var(--negro); }
.home-stat-img-desc { font-size: 11px; color: var(--gris); line-height: 1.6; max-width: 220px; }

/* Split convivo */
.split-section { display: grid; grid-template-columns: 1fr 1fr; }
.split-panel { position: relative; height: 520px; overflow: hidden; display: block; text-decoration: none; }
.split-panel img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform 0.6s ease; }
.split-panel-perro img { object-position: center top; }
.split-panel:hover img { transform: scale(1.04); }
.split-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 55%); display: flex; flex-direction: column; justify-content: flex-end; padding: 44px; }
.split-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); margin-bottom: 10px; display: block; }
.split-title { font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 18px; line-height: 1.2; }
.split-btn { display: inline-block; padding: 10px 22px; border: 1px solid rgba(255,255,255,0.5); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; transition: border-color 0.15s, background 0.15s; }
.split-panel:hover .split-btn { border-color: var(--dorado); background: rgba(201,168,76,0.15); }

/* Carrusel novedades */
.novedades { padding: 72px 48px; background: var(--crema); border-top: 0.5px solid var(--borde); }
.novedades-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; }
.novedades-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); margin-bottom: 8px; display: block; }
.novedades-title { font-size: 22px; font-weight: 700; color: var(--negro); }
.novedades-arrows { display: flex; gap: 8px; }
.nov-arrow { width: 38px; height: 38px; border: 1px solid var(--borde); background: transparent; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, background 0.15s; }
.nov-arrow:hover { border-color: var(--negro); background: var(--negro); }
.nov-arrow:hover svg { stroke: #fff; }
.nov-arrow svg { width: 14px; height: 14px; stroke: var(--negro); fill: none; }
.nov-track { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; border: 0.5px solid var(--borde); scrollbar-width: none; }
.nov-track::-webkit-scrollbar { display: none; }
.nov-card { flex-shrink: 0; width: 260px; scroll-snap-align: start; text-decoration: none; display: block; background: var(--crema); border-right: 0.5px solid var(--borde); transition: background 0.15s; }
.nov-card:last-child { border-right: none; }
.nov-card:hover { background: #EDE9E1; }
.nov-img { position: relative; background: #EDE9E1; height: 300px; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: hidden; border-bottom: 0.5px solid var(--borde); }
.nov-img img { height: 100%; width: 100%; object-fit: contain; transition: transform 0.4s ease; }
.nov-card:hover .nov-img img { transform: scale(1.04); }
.nov-badge { position: absolute; top: 0; left: 0; font-size: 8px; font-weight: 700; padding: 4px 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.nov-badge-new { background: var(--negro); color: #fff; }
.nov-badge-best { background: var(--dorado); color: var(--marron); }
.nov-badge-dest { background: var(--crema); color: var(--negro); border-right: 0.5px solid var(--borde); border-bottom: 0.5px solid var(--borde); }
.nov-body { padding: 18px 20px; }
.nov-gama { font-size: 9px; font-weight: 700; color: var(--dorado); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.nov-name { font-size: 14px; font-weight: 700; color: var(--negro); line-height: 1.3; margin-bottom: 6px; }
.nov-tag { font-size: 11px; color: var(--gris); line-height: 1.5; }

/* Carrusel ingredientes */
.ingredientes-section { padding: 72px 48px; background: #EDE9E1; border-top: 0.5px solid var(--borde); }
.ingredientes-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); margin-bottom: 8px; display: block; }
.ingredientes-title { font-size: 22px; font-weight: 700; color: var(--negro); margin-bottom: 36px; }
.ing-track { display: flex; gap: 36px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.ing-track::-webkit-scrollbar { display: none; }
.ing-slide { flex-shrink: 0; width: 160px; text-align: center; cursor: default; }
.ing-slide-img { width: 140px; height: 140px; margin: 0 auto 14px; background: var(--crema); border: 0.5px solid var(--borde); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: border-color 0.2s; }
.ing-slide:hover .ing-slide-img { border-color: var(--dorado); }
.ing-slide-img img { width: 80%; height: 80%; object-fit: contain; transition: transform 0.3s ease; }
.ing-slide:hover .ing-slide-img img { transform: scale(1.08); }
.ing-slide-name { font-size: 12px; font-weight: 700; color: var(--negro); margin-bottom: 4px; }
.ing-slide-desc { font-size: 11px; color: var(--gris); line-height: 1.5; }

/* Home categorías */
.home-cats { padding: 72px 48px; background: var(--crema); border-top: 0.5px solid var(--borde); }
.home-cats-header { margin-bottom: 40px; }
.home-cats-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); margin-bottom: 10px; display: block; }
.home-cats-title { font-size: 22px; font-weight: 700; color: var(--negro); }
.cats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 0.5px solid var(--borde); }
.cat-card { padding: 48px; border-right: 0.5px solid var(--borde); text-decoration: none; display: block; background: var(--crema); transition: background 0.15s; }
.cat-card:last-child { border-right: none; }
.cat-card:hover { background: #EDE9E1; }
.cat-card-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); margin-bottom: 12px; display: block; }
.cat-card-title { font-size: 24px; font-weight: 700; color: var(--negro); margin-bottom: 12px; }
.cat-card-desc { font-size: 13px; color: var(--gris); line-height: 1.7; margin-bottom: 24px; max-width: 340px; }
.cat-card-link { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--negro); display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--negro); padding-bottom: 2px; transition: color 0.15s, border-color 0.15s; }
.cat-card:hover .cat-card-link { color: var(--dorado); border-color: var(--dorado); }

/* Compromiso */
.commit-section { background: var(--negro); padding: 72px 48px; border-top: 1px solid var(--dorado); }
.commit-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); margin-bottom: 14px; display: block; }
.commit-title { font-size: 36px; font-weight: 700; color: #fff; margin-bottom: 56px; line-height: 1.2; }
.commit-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top: 0.5px solid rgba(255,255,255,0.1); }
.commit-item { padding: 32px 0 32px; border-right: 0.5px solid rgba(255,255,255,0.1); padding-right: 32px; }
.commit-item:last-child { border-right: none; padding-right: 0; }
.commit-item + .commit-item { padding-left: 32px; }
.commit-item svg { width: 24px; height: 24px; color: var(--dorado); margin-bottom: 16px; }
.commit-item-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.commit-item-desc { font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.7; }
.commit-cta { display: inline-block; margin-top: 48px; padding: 13px 28px; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.6); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; transition: border-color 0.15s, color 0.15s; }
.commit-cta:hover { border-color: var(--dorado); color: #fff; }

/* Utilidades */
.btn-primary { background: var(--negro); color: #fff; font-size: 10px; font-weight: 700; padding: 13px 26px; border: none; letter-spacing: 0.14em; text-transform: uppercase; display: inline-block; transition: background 0.15s; font-family: var(--font); }
.btn-primary:hover { background: var(--marron); }
.btn-ghost { background: transparent; color: var(--negro); font-size: 10px; font-weight: 700; padding: 13px 26px; border: 1px solid var(--borde); letter-spacing: 0.14em; text-transform: uppercase; display: inline-block; transition: border-color 0.15s; font-family: var(--font); }
.btn-ghost:hover { border-color: var(--negro); }

/* ── SELLOS EN PANEL DE INFO ─────────────────────────────── */
.prod-attrs-sellos {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 0.5px solid var(--borde);
}
.prod-attrs-sellos .attr-sello {
  height: 52px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.prod-attrs-sellos .attr-sello:hover { transform: scale(1.06); }

/* ── FRANJA STATS FICHA ──────────────────────────────────── */
.ficha-sellos-wrap {
  background: var(--marron);
  padding: 40px 48px;
  border-top: 1px solid var(--dorado);
  border-bottom: 1px solid var(--dorado);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ficha-sellos-claim {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado);
  text-align: center;
  margin-bottom: 28px;
}
.ficha-stats-ref {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 900px;
  padding-bottom: 28px;
}
.fsr-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 32px;
  border-right: 0.5px solid rgba(255,255,255,0.12);
}
.fsr-col:last-child { border-right: none; }
.fsr-num {
  font-size: 56px;
  font-weight: 700;

  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.fsr-pct { font-size: 28px; font-weight: 700; color: #fff; }
.fsr-plus { font-size: 30px; font-weight: 800; color: var(--dorado); margin-left: 2px; }
.fsr-text { font-size: 38px; }
.fsr-label {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: center;
  line-height: 1.5;
}
.fsr-label em { font-weight: 400; text-transform: none; }
.fsr-sub {
  font-size: 11px;

  font-weight: 400;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
  text-align: center;
}
.fsr-sub-bold {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
}
.fsr-sep { display: none; }

/* Fila secundaria de iconos */
.ficha-stats-sec2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  border-top: 0.5px solid rgba(255,255,255,0.12);
  padding-top: 20px;
}
.fss2-item { display: flex; align-items: center; gap: 8px; padding: 0 28px; }
.fss2-item img { height: 22px; width: auto; object-fit: contain; opacity: 0.7; }
.fss2-item span {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fss2-sep { width: 0.5px; height: 24px; background: rgba(255,255,255,0.12); flex-shrink: 0; }

/* ============================================================
   RESPONSIVE DEFINITIVO
   ============================================================ */

/* Scroll táctil todos los carruseles */
.nov-track, .ing-track, .ing-scroll {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

/* Botón hamburguesa — oculto por defecto en desktop */
.nav-mobile-btn { display: none; }
.nav-mobile-open { display: none; }

/* ── TABLET 601–1024px ───────────────────────────────────── */
@media (min-width: 601px) and (max-width: 1024px) {
  .navbar { padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
  .nav-links { display: none !important; }
  .nav-mobile-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
  }
  .nav-mobile-btn svg { width: 24px; height: 24px; stroke: var(--negro); fill: none; display: block; }
  .nav-mobile-open {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: var(--crema);
    z-index: 9999;
    padding: 20px 32px 60px;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-mobile-open.active { display: flex !important; }
  .nav-mobile-close { align-self: flex-end; background: none; border: none; cursor: pointer; padding: 6px; margin-bottom: 12px; flex-shrink: 0; }
  .nav-mobile-close svg { width: 24px; height: 24px; stroke: var(--negro); fill: none; display: block; }
  .nav-mobile-section { border-bottom: 0.5px solid var(--borde); padding: 14px 0; flex-shrink: 0; }
  .nav-mobile-title { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); margin-bottom: 10px; display: block; }
  .nav-mobile-link { display: block; font-size: 18px; font-weight: 700; color: var(--negro); padding: 4px 0; text-decoration: none; }
  .nav-mobile-sub { display: block; font-size: 13px; color: var(--gris); padding: 4px 0; text-decoration: none; }
  .hero-editorial { height: 60vh; min-height: 380px; }
  .hero-title { font-size: 34px; }
  .hero-editorial-content { padding: 32px 28px; }
  .split-panel { height: 360px; }
  .split-title { font-size: 22px; }
  .home-sello-item { padding: 0 18px; }
  .home-sello-item img { height: 44px; }
  .home-stat-img-item { padding: 28px 20px; }
  .home-stat-img-num { height: 38px; }
  .novedades { padding: 48px 24px; }
  .nov-card { width: 220px; }
  .nov-img { height: 240px; }
  .ingredientes-section { padding: 48px 24px; }
  .home-cats { padding: 48px 24px; }
  .commit-section { padding: 48px 24px; }
  .commit-title { font-size: 26px; }
  .product-layout { grid-template-columns: 1fr 1fr; min-height: 560px; }
  .main-img { height: 440px; }
  .product-info { padding: 24px; }
  .prod-title { font-size: 20px; }
  .fsr-num { font-size: 44px; }
  .fsr-text { font-size: 30px; }
  .fsr-col { padding: 0 18px; }
  .stats-giant { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: repeat(2,1fr); margin: 24px; }
  .ing-section, .racion-section, .related, .why-section { padding: 48px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer { padding: 48px 24px 24px; }
  .controls-grid { grid-template-columns: 1fr 1fr; }
}

/* ── MÓVIL ≤600px ────────────────────────────────────────── */
@media (max-width: 600px) {

  /* Navbar */
  .navbar {
    padding: 0 20px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-links { display: none !important; }
  .nav-logo-img { height: 28px; margin-right: 0; }

  /* Hamburguesa */
  .nav-mobile-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
  }
  .nav-mobile-btn svg { width: 24px; height: 24px; stroke: var(--negro); fill: none; display: block; }

  /* Menú overlay */
  .nav-mobile-open {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: var(--crema);
    z-index: 9999;
    padding: 16px 24px 60px;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-mobile-open.active { display: flex !important; }
  .nav-mobile-close {
    align-self: flex-end;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-bottom: 20px;
  }
  .nav-mobile-close svg { width: 24px; height: 24px; stroke: var(--negro); fill: none; display: block; }
  .nav-mobile-section { border-bottom: 0.5px solid var(--borde); padding: 14px 0; flex-shrink: 0; }
  .nav-mobile-title { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); margin-bottom: 10px; display: block; }
  .nav-mobile-link { display: block; font-size: 18px; font-weight: 700; color: var(--negro); padding: 4px 0; text-decoration: none; }
  .nav-mobile-sub { display: block; font-size: 13px; color: var(--gris); padding: 4px 0; text-decoration: none; }

  /* Ticker */
  .ticker-inner { font-size: 9px; letter-spacing: 0.1em; }

  /* Hero */
  .hero-editorial { height: 80vh; min-height: 440px; }
  .hero-editorial-content { padding: 24px 20px; max-width: 100%; }
  .hero-eyebrow { font-size: 8px; }
  .hero-title { font-size: 26px; }
  .hero-sub { font-size: 12px; }
  .hero-cta { padding: 11px 20px; font-size: 9px; margin-top: 20px; }

  /* Beneficio principal */

  /* Franja sellos home */
  .home-sello-strip { flex-direction: column; padding: 24px 20px; gap: 18px; }
  .home-sello-div { display: none; }
  .home-sello-item { padding: 0; gap: 14px; }
  .home-sello-item img { height: 40px; }
  .home-sello-title { font-size: 13px; }
  .home-sello-desc { font-size: 11px; }

  /* Stats img home */
  .home-stats-img { flex-direction: column; }
  .home-stat-img-item { padding: 20px; border-right: none; border-bottom: 0.5px solid var(--borde); gap: 14px; }
  .home-stat-img-item:last-child { border-bottom: none; }
  .home-stat-img-num { height: 32px; }

  /* Split */
  .split-section { grid-template-columns: 1fr; }
  .split-panel { height: 260px; }
  .split-title { font-size: 20px; }
  .split-overlay { padding: 20px; }
  .split-btn { padding: 8px 16px; font-size: 9px; }

  /* Novedades */
  .novedades { padding: 36px 20px; }
  .novedades-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .novedades-title { font-size: 18px; }
  .nov-card { width: 190px; }
  .nov-img { height: 210px; }
  .nov-name { font-size: 12px; }
  .nov-tag { font-size: 10px; }

  /* Ingredientes home */
  .ingredientes-section { padding: 36px 20px; }
  .ingredientes-title { font-size: 18px; }
  .ing-slide { width: 120px; }
  .ing-slide-img { width: 100px; height: 100px; }
  .ing-slide-name { font-size: 11px; }
  .ing-slide-desc { font-size: 10px; }

  /* Categorías */
  .home-cats { padding: 36px 20px; }
  .cats-grid { grid-template-columns: 1fr; }
  .cat-card { border-right: none; border-bottom: 0.5px solid var(--borde); padding: 24px; }
  .cat-card:last-child { border-bottom: none; }
  .home-cats-title { font-size: 18px; }
  .cat-card-title { font-size: 20px; }

  /* Compromiso */
  .commit-section { padding: 36px 20px; }
  .commit-title { font-size: 22px; }
  .commit-grid { grid-template-columns: 1fr; }
  .commit-item { border-right: none !important; padding: 18px 0; border-bottom: 0.5px solid rgba(255,255,255,0.08); }
  .commit-item + .commit-item { padding-left: 0; }
  .commit-item:last-child { border-bottom: none; }

  /* Breadcrumb */
  .breadcrumb { padding: 10px 20px; font-size: 10px; }

  /* Ficha producto */
  .product-layout { grid-template-columns: 1fr; }
  .gallery { padding: 16px; }
  .main-img { height: 380px; padding: 10px; }
  .product-info { padding: 20px; }
  .prod-eyebrow { font-size: 8px; }
  .prod-title { font-size: 20px; }
  .prod-sub { font-size: 12px; }
  .prod-attrs-sellos .attr-sello { height: 38px; }
  .size-opts { flex-wrap: wrap; gap: 6px; }
  .size-opt { min-width: 80px; padding: 9px 12px; }
  .find-btn { font-size: 9px; padding: 13px; }
  .find-sub { font-size: 10px; }
  .acc-title { font-size: 11px; }

  /* Franja sellos ficha */
  .ficha-sellos-wrap { padding: 20px; }
  .ficha-sellos-claim { font-size: 8px; }
  .ficha-sellos-fila { flex-wrap: wrap; gap: 8px; justify-content: center; }
  .ficha-sello-sep { display: none; }
  .ficha-sello { padding: 0 8px; }
  .ficha-sello img { height: 36px; }
  .ficha-sellos-labels { display: none; }

  /* Stats grandes ficha */
  .ficha-stats-ref { flex-direction: column; gap: 16px; padding: 12px 0; }
  .fsr-col { border-right: none !important; border-bottom: 0.5px solid rgba(255,255,255,0.1); padding: 0 0 16px; align-items: flex-start; width: 100%; }
  .fsr-col:last-child { border-bottom: none; padding-bottom: 0; }
  .fsr-sep { display: none; }
  .fsr-num { font-size: 48px; }
  .fsr-text { font-size: 32px; }

  /* Stats giant */
  .stats-giant { grid-template-columns: 1fr; }

  /* Ingredientes ficha */
  .ing-section { padding: 36px 20px; }
  .ing-card { width: 140px; }
  .ing-photo { height: 120px; }
  .ing-name { font-size: 12px; }
  .ing-desc { font-size: 10px; }

  /* Calculadora */
  .racion-section { padding: 36px 20px; }
  .section-title { font-size: 18px; }
  .controls-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .racion-result { flex-direction: column; align-items: flex-start; gap: 12px; }
  .racion-num { font-size: 40px; }
  .splits { flex-wrap: wrap; gap: 8px; }
  .sacks-table { font-size: 11px; }
  .sacks-table th, .sacks-table td { padding: 8px 4px; }

  /* Beneficios */
  .why-section { padding: 36px 20px; }
  .why-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .why-circle { width: 52px; height: 52px; }
  .why-circle i { font-size: 22px; }
  .why-lbl { font-size: 11px; }
  .why-desc { font-size: 10px; }

  /* Relacionados */
  .related { padding: 36px 20px; }
  .rel-grid { grid-template-columns: 1fr; }
  .rel-card { border-right: none; border-bottom: 0.5px solid var(--borde); }
  .rel-card:last-child { border-bottom: none; }
  .rel-img { height: 120px; }

  /* Grid categoría */
  .product-grid { grid-template-columns: 1fr 1fr; margin: 16px; }
  .pcard-body { padding: 12px; }
  .pcard-name { font-size: 11px; }
  .pcard-desc { display: none; }

  /* Página perros */
  .gama-grid { grid-template-columns: 1fr !important; margin: 0 20px !important; }
  .gama-card { border-right: none !important; }
  .gama-num { font-size: 32px; }
  .gama-name { font-size: 16px; }

  /* Footer */
  .footer { padding: 36px 20px 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .footer-legal { flex-wrap: wrap; justify-content: center; gap: 14px; }
}

/* Header con flechas en carrusel de ingredientes */
.ing-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 20px;
}
@media (max-width: 600px) {
  .ing-header-row { flex-direction: row; align-items: center; margin-bottom: 20px; }
  .ing-header-row .novedades-arrows { flex-shrink: 0; }
  .nov-arrow { width: 34px; height: 34px; }
  .nov-arrow svg { width: 13px; height: 13px; }
}

/* Página perros — helpers responsive */
.gama-section-header { padding: 48px 48px 0; }
.gama-grid-wrap { margin: 0 48px; }
@media (max-width: 1024px) {
  .gama-section-header { padding: 36px 24px 0; }
  .gama-grid-wrap { margin: 0 24px; }
}
@media (max-width: 600px) {
  .gama-section-header { padding: 28px 20px 0; }
  .gama-grid-wrap { margin: 0 20px !important; }
}


/* ============================================================
   RECORRIDO DE TRANSICIÓN — editorial continuo
   ============================================================ */
.transicion-section {
  background: var(--marron);
  border-top: 1px solid var(--dorado);
  border-bottom: 1px solid var(--dorado);
  padding: 88px 0 72px;
  overflow: hidden;
}

/* Cabecera: dos columnas asimétricas, no centrada */
.trans-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
  align-items: end;
  padding: 0 64px;
  margin-bottom: 76px;
}
.trans-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado);
  display: block;
  margin-bottom: 20px;
}
.trans-title {
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.trans-title em {

  font-weight: 700;
  color: rgba(255,255,255,0.72);
}
.trans-intro {
  font-size: 13.5px;
  line-height: 1.85;
  color: rgba(255,255,255,0.48);
  padding-bottom: 6px;
  max-width: 44ch;
}
.trans-intro b { color: rgba(255,255,255,0.82); font-weight: 500; }

/* ── El recorrido ────────────────────────────────────────── */
.trans-recorrido {
  position: relative;
  padding: 0 64px;
}

/* Riel: una sola línea continua de extremo a extremo */
.trans-riel {
  position: absolute;
  left: 64px;
  right: 64px;
  top: 0;
  height: 1px;
  background: rgba(255,255,255,0.14);
}
/* Tramo dorado que muere justo en el hito final */
.trans-riel::after {
  content: '';
  position: absolute;
  inset: 0 0 0 0;
  background: linear-gradient(
    to right,
    rgba(201,168,76,0.25) 0%,
    rgba(201,168,76,0.55) 40%,
    var(--dorado) 88%,
    var(--dorado) 100%
  );
}

/* Rejilla de hitos sobre el riel */
.trans-hitos {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 0.95fr 1fr 1.35fr;
  align-items: start;
}

.trans-hito {
  position: relative;
  padding-right: 40px;
  padding-top: 34px;
}
.trans-hito:last-child { padding-right: 0; }

/* Marcador sobre la línea */
.trans-hito::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--marron);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
}
/* Tick vertical corto que baja del marcador */
.trans-hito::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 3px;
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.12);
}
/* Hito final: relleno, mayor, con halo */
.trans-hito--final::before {
  width: 11px;
  height: 11px;
  top: -5px;
  left: -2px;
  background: var(--dorado);
  border-color: var(--dorado);
  box-shadow: 0 0 0 5px rgba(201,168,76,0.14);
}
.trans-hito--final::after {
  left: 3px;
  top: 7px;
  height: 22px;
  background: rgba(201,168,76,0.4);
}

.trans-dias {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  display: block;
  margin-bottom: 22px;
}
.trans-hito--final .trans-dias { color: var(--dorado); }

/* Escalera tipográfica: cada etapa crece */
.trans-cifra {
  font-family: var(--font);

  font-weight: 700;
  color: rgba(255,255,255,0.55);
  line-height: 0.86;
  letter-spacing: -0.035em;
  display: block;
  margin-bottom: 14px;
}
.trans-cifra sup {
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: super;
  margin-left: 1px;
}
.trans-hito:nth-child(1) .trans-cifra { font-size: 40px; }
.trans-hito:nth-child(1) .trans-cifra sup { font-size: 19px; }
.trans-hito:nth-child(2) .trans-cifra { font-size: 48px; color: rgba(255,255,255,0.68); }
.trans-hito:nth-child(2) .trans-cifra sup { font-size: 22px; }
.trans-hito:nth-child(3) .trans-cifra { font-size: 58px; color: rgba(255,255,255,0.82); }
.trans-hito:nth-child(3) .trans-cifra sup { font-size: 26px; }
.trans-hito--final .trans-cifra {
  font-size: 78px;
  color: #fff;
}
.trans-hito--final .trans-cifra sup { font-size: 34px; color: var(--dorado); }

/* Etiqueta bajo la cifra */
.trans-mezcla {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  display: block;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  max-width: 92%;
}
.trans-hito--final .trans-mezcla {
  color: var(--dorado);
  border-bottom-color: rgba(201,168,76,0.4);
}

.trans-nota-hito {
  font-size: 12px;
  line-height: 1.75;
  color: rgba(255,255,255,0.4);
  max-width: 30ch;
}
.trans-hito--final .trans-nota-hito {
  color: rgba(255,255,255,0.62);
  max-width: 34ch;
}

/* ── Anotación final al margen ───────────────────────────── */
.trans-margen {
  margin-top: 84px;
  padding: 0 64px;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.trans-margen-tag {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado);
  padding-top: 5px;
  line-height: 1.8;
  border-top: 1px solid rgba(201,168,76,0.45);
}
.trans-margen-texto {
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255,255,255,0.42);
  max-width: 62ch;
  padding-top: 5px;
  border-top: 1px solid rgba(255,255,255,0.09);
}
.trans-margen-texto b { color: rgba(255,255,255,0.78); font-weight: 700; }

/* ── Tablet ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .transicion-section { padding: 64px 0 56px; }
  .trans-head { grid-template-columns: 1fr; gap: 24px; padding: 0 40px; margin-bottom: 56px; }
  .trans-title { font-size: 30px; }
  .trans-recorrido { padding: 0 40px; }
  .trans-riel { left: 40px; right: 40px; }
  .trans-hitos { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .trans-hito { padding-right: 32px; }
  .trans-hito:nth-child(1) .trans-cifra { font-size: 42px; }
  .trans-hito:nth-child(2) .trans-cifra { font-size: 48px; }
  .trans-hito:nth-child(3) .trans-cifra { font-size: 54px; }
  .trans-hito--final .trans-cifra { font-size: 72px; }
  /* La línea solo cruza la primera fila */
  .trans-hito:nth-child(3)::before,
  .trans-hito:nth-child(4)::before { top: -3px; }
  .trans-margen { padding: 0 40px; margin-top: 56px; }
}

/* ── Móvil: recorrido vertical ───────────────────────────── */
@media (max-width: 640px) {
  .transicion-section { padding: 48px 0 44px; }
  .trans-head { padding: 0 24px; margin-bottom: 44px; gap: 18px; }
  .trans-title { font-size: 25px; }
  .trans-intro { font-size: 13px; }

  .trans-recorrido { padding: 0 24px; }
  /* El riel pasa a ser vertical, a la izquierda */
  .trans-riel {
    left: 27px;
    right: auto;
    top: 6px;
    bottom: 14px;
    height: auto;
    width: 1px;
  }
  .trans-riel::after {
    background: linear-gradient(
      to bottom,
      rgba(201,168,76,0.25) 0%,
      rgba(201,168,76,0.55) 40%,
      var(--dorado) 88%,
      var(--dorado) 100%
    );
  }
  .trans-hitos { grid-template-columns: 1fr; row-gap: 0; }
  .trans-hito {
    padding: 0 0 40px 34px;
    padding-right: 0;
  }
  .trans-hito:last-child { padding-bottom: 0; }
  .trans-hito::before { top: 4px; left: -34px; }
  .trans-hito--final::before { top: 2px; left: -36px; }
  .trans-hito::after { display: none; }

  .trans-dias { margin-bottom: 12px; }
  .trans-hito:nth-child(1) .trans-cifra { font-size: 42px; }
  .trans-hito:nth-child(2) .trans-cifra { font-size: 48px; }
  .trans-hito:nth-child(3) .trans-cifra { font-size: 54px; }
  .trans-hito--final .trans-cifra { font-size: 66px; }
  .trans-cifra { margin-bottom: 10px; }
  .trans-mezcla { max-width: 100%; }
  .trans-nota-hito { max-width: 100%; font-size: 12px; }

  .trans-margen {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 24px;
    margin-top: 44px;
  }
  .trans-margen-tag { border-top: none; padding-top: 0; }
  .trans-margen-texto { border-top: none; padding-top: 0; font-size: 12.5px; }
}

/* ============================================================
   FAQ CONTEXTUAL
   ============================================================ */
.faq-section {
  background: var(--crema);
  padding: 72px 48px;
  border-top: 0.5px solid var(--borde);
}
.faq-header { margin-bottom: 40px; max-width: 560px; }
.faq-eyebrow {
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dorado);
  margin-bottom: 12px; display: block;
}
.faq-title { font-size: 26px; font-weight: 700; color: var(--negro); margin-bottom: 12px; }
.faq-sub { font-size: 13px; color: var(--gris); line-height: 1.75; }
.faq-list { border-top: 0.5px solid var(--borde); max-width: 860px; }
.faq-item { border-bottom: 0.5px solid var(--borde); }
.faq-q {
  padding: 22px 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; cursor: pointer;
  transition: color 0.15s;
}
.faq-q:hover .faq-q-text { color: var(--dorado); }
.faq-q-text {
  font-size: 15px; font-weight: 700; color: var(--negro);
  line-height: 1.4; transition: color 0.15s;
}
.faq-q-icon {
  font-size: 22px; color: var(--gris-cl);
  line-height: 1; flex-shrink: 0;
  transition: transform 0.25s ease, color 0.15s;
  user-select: none;
}
.faq-q-icon.open { transform: rotate(45deg); color: var(--dorado); }
.faq-a {
  display: none;
  padding: 0 0 24px;
  max-width: 680px;
}
.faq-a.open { display: block; }
.faq-a p { font-size: 13px; color: var(--gris); line-height: 1.85; }
.faq-a p + p { margin-top: 12px; }
.faq-a ul { margin: 12px 0 0 0; padding-left: 0; list-style: none; }
.faq-a li {
  font-size: 13px; color: var(--gris); line-height: 1.7;
  padding: 5px 0 5px 20px; position: relative;
}
.faq-a li::before {
  content: ''; position: absolute; left: 0; top: 13px;
  width: 5px; height: 5px; background: var(--dorado);
}
.faq-a strong { color: var(--negro); font-weight: 700; }

/* Responsive transición + FAQ */
@media (min-width: 601px) and (max-width: 1024px) {
  .transicion-section, .faq-section { padding: 48px 24px; }
    .trans-step:nth-child(2n) { border-right: none; }
  .trans-step:nth-child(-n+2) { border-bottom: 0.5px solid rgba(255,255,255,0.1); }
  .transicion-title, .faq-title { font-size: 22px; }
}
@media (max-width: 600px) {
  .transicion-section, .faq-section { padding: 40px 20px; }
          .trans-step:last-child { border-bottom: none; }
    .faq-title { font-size: 20px; }
  .faq-q { padding: 18px 0; gap: 16px; }
  .faq-q-text { font-size: 14px; }
  .faq-a p, .faq-a li { font-size: 12px; }
}

/* ============================================================
   RITMOS DE ESPACIADO — compacto / normal / editorial
   ============================================================ */
:root {
  --ritmo-compacto: 40px;
  --ritmo-normal: 80px;
  --ritmo-editorial: 128px;
}

/* ============================================================
   COMPROMISO EN HOME — narrativa, no cuadrícula de iconos
   ============================================================ */
.commit-section {
  background: var(--negro);
  border-top: 1px solid var(--dorado);
  padding: var(--ritmo-editorial) 64px;
}
.commit-lead { margin-bottom: 56px; }
.commit-eyebrow {
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dorado);
  display: block; margin-bottom: 20px;
}
.commit-title {
  font-size: 42px; font-weight: 700; color: #fff;
  line-height: 1.06; letter-spacing: -0.02em;
}
.commit-title em { color: rgba(255,255,255,0.55); }

.commit-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 72px;
  align-items: start;
}
.commit-parrafo {
  font-size: 15px; line-height: 1.9;
  color: rgba(255,255,255,0.55);
  max-width: 40ch;
}
.commit-parrafo b { color: #fff; font-weight: 700; }

.commit-decisiones { display: flex; flex-direction: column; }
.commit-dec {
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  gap: 32px;
  align-items: baseline;
}
.commit-dec:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.commit-dec dt {
  font-size: 13px; font-weight: 700; color: #fff;
  line-height: 1.4; letter-spacing: -0.005em;
}
.commit-dec dd {
  font-size: 12.5px; line-height: 1.8;
  color: rgba(255,255,255,0.42); margin: 0;
}
.commit-cta {
  display: inline-block; margin-top: 56px;
  padding: 14px 30px;
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.65);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: border-color 0.15s, color 0.15s;
}
.commit-cta:hover, .commit-cta:focus-visible { border-color: var(--dorado); color: #fff; }

/* ============================================================
   DÓNDE COMPRAR — jerarquía, no 01/02/03
   ============================================================ */
.dc-wrap { padding: var(--ritmo-editorial) 64px; }
.dc-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 72px; align-items: end;
  margin-bottom: 72px;
}
.dc-title {
  font-size: 42px; font-weight: 700; color: var(--negro);
  line-height: 1.06; letter-spacing: -0.02em;
}
.dc-title em { color: var(--dorado); }
.dc-intro {
  font-size: 14px; line-height: 1.9; color: var(--gris);
  max-width: 46ch; padding-bottom: 6px;
}
.dc-canales {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 0;
  border-top: 1px solid var(--negro);
}
.dc-canal {
  padding: 32px 40px 40px 0;
  border-right: 0.5px solid var(--borde);
}
.dc-canal:last-child { border-right: none; padding-right: 0; }
.dc-canal + .dc-canal { padding-left: 40px; }
.dc-canal-titulo {
  font-size: 17px; font-weight: 700; color: var(--negro);
  margin-bottom: 12px; letter-spacing: -0.01em;
}
.dc-canal-texto { font-size: 12.5px; line-height: 1.8; color: var(--gris); }
.dc-contacto {
  margin-top: 72px; padding-top: 32px;
  border-top: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.dc-contacto-texto { font-size: 15px; color: var(--negro); font-weight: 500; }

/* ============================================================
   COMPROMISO ZEN (página) — texto editorial
   ============================================================ */
.cz-hero {
  background: var(--negro);
  padding: var(--ritmo-editorial) 64px 96px;
}
.cz-eyebrow {
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dorado);
  display: block; margin-bottom: 22px;
}
.cz-title {
  font-size: 48px; font-weight: 700; color: #fff;
  line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 28px;
}
.cz-title em { color: rgba(255,255,255,0.55); }
.cz-intro {
  font-size: 15px; line-height: 1.9;
  color: rgba(255,255,255,0.5); max-width: 52ch;
}
.cz-cuerpo { padding: 96px 64px var(--ritmo-editorial); max-width: 1100px; }
.cz-parrafo {
  font-size: 16px; line-height: 1.9; color: var(--gris);
  max-width: 62ch; margin-bottom: 24px;
}
.cz-parrafo b { color: var(--negro); font-weight: 700; }
.cz-decision {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 48px;
  padding: 32px 0;
  border-top: 1px solid var(--borde);
  align-items: start;
}
.cz-decision:first-of-type { margin-top: 32px; }
.cz-decision:last-child { border-bottom: 1px solid var(--borde); }
.cz-decision-titulo {
  font-size: 18px; font-weight: 700; color: var(--negro);
  line-height: 1.3; letter-spacing: -0.01em;
}
.cz-decision-texto { font-size: 13.5px; line-height: 1.9; color: var(--gris); max-width: 56ch; }

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 3px;
}
/* Objetivos táctiles ≥44px en controles principales */
.nov-arrow, .nav-mobile-btn, .nav-mobile-close { min-width: 44px; min-height: 44px; }
.faq-q, .acc-header { min-height: 44px; }
/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .ticker-inner { animation: none; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   RESPONSIVE — secciones nuevas
   ============================================================ */
@media (max-width: 1100px) {
  :root { --ritmo-editorial: 80px; --ritmo-normal: 56px; --ritmo-compacto: 32px; }
  .commit-section { padding: var(--ritmo-editorial) 40px; }
  .commit-title, .dc-title { font-size: 32px; }
  .commit-cuerpo { grid-template-columns: 1fr; gap: 40px; }
  .commit-parrafo { max-width: 62ch; }
  .dc-wrap { padding: var(--ritmo-editorial) 40px; }
  .dc-lead { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .dc-canales { grid-template-columns: 1fr; }
  .dc-canal { border-right: none; border-bottom: 0.5px solid var(--borde); padding: 28px 0; }
  .dc-canal + .dc-canal { padding-left: 0; }
  .dc-canal:last-child { border-bottom: none; }
  .cz-hero { padding: var(--ritmo-editorial) 40px 64px; }
  .cz-title { font-size: 36px; }
  .cz-cuerpo { padding: 64px 40px var(--ritmo-editorial); }
  .cz-decision { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  :root { --ritmo-editorial: 56px; --ritmo-normal: 40px; --ritmo-compacto: 24px; }
  .commit-section { padding: var(--ritmo-editorial) 24px; }
  .commit-title { font-size: 26px; }
  .commit-lead { margin-bottom: 32px; }
  .commit-dec { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .commit-cta { margin-top: 36px; }
  .dc-wrap { padding: var(--ritmo-editorial) 24px; }
  .dc-title { font-size: 26px; }
  .dc-canal-titulo { font-size: 16px; }
  .dc-contacto { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 48px; }
  .cz-hero { padding: var(--ritmo-editorial) 24px 48px; }
  .cz-title { font-size: 28px; }
  .cz-intro, .cz-parrafo { font-size: 14px; }
  .cz-cuerpo { padding: 48px 24px var(--ritmo-editorial); }
  .cz-decision-titulo { font-size: 16px; }
}

/* Aviso de dieta veterinaria */
.vet-aviso { border-top: 0.5px solid var(--dorado); border-bottom: 0.5px solid var(--dorado); padding: 16px 0; margin: 22px 0; }
.vet-aviso-t { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); margin-bottom: 8px; }
.vet-aviso-p { font-size: 12px; line-height: 1.7; color: var(--gris); }

/* ============================================================
   NAVEGACIÓN UX v39 — jerarquía, CTA y menús progresivos
   ============================================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 0 rgba(26,26,26,0.03);
}
.nav-brand { display: flex; align-items: center; flex-shrink: 0; }
.nav-links { flex: 1; min-width: 0; }
.nav-item-feature { color: var(--negro); font-weight: 700; }
.nav-store-cta {
  align-self: center;
  height: 38px;
  margin-left: auto;
  padding: 0 18px;
  border: 1px solid var(--negro);
  border-radius: 999px;
  background: var(--negro);
  color: var(--crema);
}
.nav-store-cta:hover,
.nav-store-cta.active { background: var(--dorado); border-color: var(--dorado); color: var(--negro); }
.nav-mobile-actions { display: none; align-items: center; gap: 4px; }
.nav-store-mobile { display: none; align-items: center; min-height: 44px; padding: 0 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--negro); border-radius: 999px; }

/* Las reglas históricas usan !important; esta capa restablece la rejilla final. */
.mega-menu-ancho { left: 0; right: 0; width: auto; max-width: none; padding: 26px 48px 0; }
.mega-menu-ancho .mm-grid {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: 1fr 1fr 1fr 1.6fr !important;
  gap: 0 32px;
}
.mega-menu-ancho .mm-grid > div { padding-right: 32px; }
.mega-menu-ancho .mm-grid > div + div { padding-left: 0; }
.mm-helper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 24px -48px 0;
  padding: 16px 48px;
  border-top: 0.5px solid var(--borde);
  background: #EDE9E1;
}
.mm-helper > div { display: flex; align-items: baseline; gap: 14px; }
.mm-helper strong { font-size: 12px; }
.mm-helper span { font-size: 11px; color: var(--gris); }
.mm-helper > a { flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.mm-helper > a span { color: inherit; }

/* Landings de especie: primero tareas, después gamas. */
.species-start { padding: 56px 48px 24px; border-bottom: 0.5px solid var(--borde); }
.species-start-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.species-start-head h2 { margin-top: 8px; font-size: 28px; line-height: 1.2; }
.species-start-all { flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.species-start-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 0.5px solid var(--borde); }
.species-start-card { min-height: 190px; padding: 26px; border-right: 0.5px solid var(--borde); transition: background 0.15s, transform 0.15s; }
.species-start-card:last-child { border-right: 0; }
.species-start-card:hover { background: #EDE9E1; transform: translateY(-2px); }
.species-start-card > span { display: block; margin-bottom: 36px; color: var(--dorado); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; }
.species-start-card strong { display: block; margin-bottom: 9px; font-size: 16px; }
.species-start-card small { display: block; max-width: 210px; color: var(--gris); font-size: 11px; line-height: 1.6; }
.species-reco { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; padding: 24px 28px; background: var(--negro); color: #fff; }
.species-reco .section-eyebrow { color: var(--dorado); }
.species-reco h3 { margin-top: 6px; font-size: 18px; }
.species-reco .btn-primary { background: var(--dorado); color: var(--negro); }

/* Landings de especie: la necesidad es la primera decisión. */
.species-start-needs { padding-bottom: 32px; }
.species-need-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 0.5px solid var(--borde);
  border-left: 0.5px solid var(--borde);
}
.species-need-card {
  position: relative;
  min-width: 0;
  min-height: 176px;
  padding: 25px 52px 24px 25px;
  border-right: 0.5px solid var(--borde);
  border-bottom: 0.5px solid var(--borde);
  background: var(--crema);
  transition: background 0.15s, transform 0.15s;
}
.species-need-card:hover,
.species-need-card:focus-visible { background: #EDE9E1; transform: translateY(-2px); }
.species-need-card:focus-visible { outline: 2px solid var(--dorado); outline-offset: -2px; }
.species-need-kicker {
  display: block;
  margin-bottom: 16px;
  color: var(--dorado);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.species-need-card strong { display: block; margin-bottom: 9px; font-size: 16px; line-height: 1.25; }
.species-need-card small { display: block; max-width: 290px; color: var(--gris); font-size: 11px; line-height: 1.6; }
.species-need-arrow { position: absolute; top: 24px; right: 24px; font-size: 17px; transition: transform 0.15s; }
.species-need-card:hover .species-need-arrow { transform: translateX(3px); }
.species-need-card-clinical { background: #F1EEE7; }
.species-type-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 0.5px solid var(--borde);
}
.species-type-strip > span { margin-right: 8px; color: var(--gris); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.species-type-strip a { padding: 9px 12px; border: 1px solid var(--borde); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.species-type-strip a:hover,
.species-type-strip a:focus-visible { background: var(--negro); border-color: var(--negro); color: #fff; }

.gama-grid.gama-grid--balanced { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gama-grid.gama-grid--balanced > .gama-card { min-width: 0; border-right: 0.5px solid var(--borde); border-bottom: 0.5px solid var(--borde); }
.gama-grid.gama-grid--balanced > .gama-card:nth-child(even) { border-right: none; }
.gama-grid.gama-grid--balanced > .gama-card:nth-last-child(-n+2) { border-bottom: none; }

/* Perros: entrada visual por formato y contexto de marca. */
.dog-format-section { padding: 88px 48px 64px; background: #EDE9E1; border-bottom: .5px solid var(--borde); }
.dog-format-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 36px; }
.dog-format-head > div { max-width: 670px; }
.dog-format-head h2 { margin: 9px 0 12px; color: var(--negro); font-size: clamp(30px,3.4vw,48px); letter-spacing: -.035em; line-height: 1.06; }
.dog-format-head p { max-width: 60ch; color: var(--gris); font-size: 13px; line-height: 1.75; }
.dog-format-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: .5px solid var(--borde); border-left: .5px solid var(--borde); }
.dog-format-card { min-width: 0; background: var(--crema); border-right: .5px solid var(--borde); border-bottom: .5px solid var(--borde); transition: background .2s ease; }
.dog-format-card:hover,
.dog-format-card:focus-visible { background: #F7F4EE; }
.dog-format-card:focus-visible { outline: 2px solid var(--dorado); outline-offset: -2px; }
.dog-format-media { height: 320px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #DDD2BF; }
.dog-format-card:nth-child(even) .dog-format-media { background: #E6DED0; }
.dog-format-media img { width: 78%; height: 84%; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(25,19,10,.14)); transition: transform .35s ease; }
.dog-format-card:nth-child(2) .dog-format-media img { width: 88%; height: 88%; }
.cat-format-section .dog-format-card:nth-child(2) .dog-format-media img,
.cat-format-section .dog-format-card:nth-child(4) .dog-format-media img { width: 70%; height: 82%; }
.cat-format-section .dog-format-card:nth-child(3) .dog-format-media img { width: 82%; height: 80%; }
.dog-format-card-vet .dog-format-copy > span { color: #806C4F; }
.dog-format-card:hover .dog-format-media img { transform: translateY(-5px) scale(1.025); }
.dog-format-copy { min-height: 260px; padding: 26px 24px 28px; }
.dog-format-copy > span { display: block; margin-bottom: 34px; color: var(--dorado); font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.dog-format-copy h3 { margin-bottom: 10px; color: var(--negro); font-size: 19px; line-height: 1.25; }
.dog-format-copy p { min-height: 60px; color: var(--gris); font-size: 11px; line-height: 1.7; }
.dog-format-copy strong { display: inline-block; margin-top: 22px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.dog-format-copy strong i { margin-left: 8px; font-style: normal; transition: margin .15s ease; }
.dog-format-card:hover .dog-format-copy strong i { margin-left: 12px; }
.dog-experience { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); gap: 8vw; padding: 88px 48px; background: var(--negro); color: #fff; }
.dog-experience-intro h2 { margin: 10px 0 18px; font-size: clamp(30px,3.4vw,48px); letter-spacing: -.035em; line-height: 1.06; }
.dog-experience-intro h2 em { color: var(--dorado); font-family: var(--font); font-weight: 400; }
.dog-experience-intro p { max-width: 47ch; color: rgba(255,255,255,.52); font-size: 12px; line-height: 1.8; }
.dog-experience-points { border-top: 1px solid rgba(255,255,255,.14); }
.dog-experience-points article { display: grid; grid-template-columns: 42px minmax(170px,.7fr) 1fr; gap: 24px; padding: 27px 0; border-bottom: 1px solid rgba(255,255,255,.14); align-items: start; }
.dog-experience-points span { color: var(--dorado); font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.dog-experience-points h3 { color: #fff; font-size: 16px; line-height: 1.35; }
.dog-experience-points p { color: rgba(255,255,255,.5); font-size: 11px; line-height: 1.7; }
.dog-range-title { color: var(--negro); font-size: clamp(26px,2.8vw,40px); letter-spacing: -.03em; line-height: 1.08; }

/* Venta cruzada contextual en fichas de producto. */
.cross-sell { padding: 88px 48px; background: #D8C9AA; border-top: .5px solid rgba(26,26,26,.16); }
.cross-sell-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 38px; }
.cross-sell-head > div { max-width: 700px; }
.cross-sell-head h2 { margin: 9px 0 12px; color: var(--negro); font-size: clamp(30px,3.2vw,46px); letter-spacing: -.035em; line-height: 1.06; }
.cross-sell-head p { max-width: 64ch; color: rgba(26,26,26,.62); font-size: 12px; line-height: 1.75; }
.cross-sell-all { flex-shrink: 0; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.cross-sell-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid rgba(26,26,26,.17); border-left: 1px solid rgba(26,26,26,.17); }
.cross-sell-card { display: grid; grid-template-columns: minmax(150px,.72fr) minmax(0,1.28fr); min-height: 300px; background: rgba(245,241,233,.66); border-right: 1px solid rgba(26,26,26,.17); border-bottom: 1px solid rgba(26,26,26,.17); transition: background .18s ease; }
.cross-sell-card:hover,
.cross-sell-card:focus-visible { background: var(--crema); }
.cross-sell-card:focus-visible { outline: 2px solid var(--negro); outline-offset: -2px; }
.cross-sell-media { display: flex; align-items: center; justify-content: center; padding: 25px; background: rgba(255,255,255,.22); border-right: 1px solid rgba(26,26,26,.13); }
.cross-sell-media img { width: 88%; height: 230px; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(25,19,10,.12)); transition: transform .3s ease; }
.cross-sell-card:hover .cross-sell-media img { transform: translateY(-4px) scale(1.02); }
.cross-sell-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 30px; }
.cross-sell-tag { margin-bottom: 28px; color: #8A6B29; font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.cross-sell-copy h3 { margin-bottom: 10px; color: var(--negro); font-size: 19px; line-height: 1.25; }
.cross-sell-copy p { color: rgba(26,26,26,.62); font-size: 11px; line-height: 1.7; }
.cross-sell-cta { margin-top: 24px; padding-bottom: 5px; border-bottom: 1px solid currentColor; color: var(--negro); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cross-sell-cta i { margin-left: 8px; font-style: normal; }
.cross-sell-vet { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr); gap: 8vw; background: #E8E2D7; }
.cross-sell-vet .cross-sell-head { display: block; margin: 0; }
.cross-sell-vet-note { padding: 32px; border: 1px solid var(--borde); background: var(--crema); }
.cross-sell-vet-note strong { display: block; margin-bottom: 10px; font-size: 16px; }
.cross-sell-vet-note p { color: var(--gris); font-size: 11px; line-height: 1.75; }
.cross-sell-vet-note a { display: inline-block; margin-top: 20px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* ============================================================
   POR QUÉ ZEN v50 — relato editorial + catálogo de ingredientes
   ============================================================ */
.zen-origin { background: var(--crema); }
.zen-origin-hero {
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(390px, .84fr) minmax(0, 1.16fr);
  background: #E8DFCF;
  border-bottom: .5px solid var(--borde);
}
.zen-origin-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 84px 56px 86px 64px;
}
.zen-origin-eyebrow {
  display: block;
  margin-bottom: 18px;
  color: var(--dorado);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.zen-origin-copy h1 {
  max-width: 720px;
  margin-bottom: 26px;
  color: var(--negro);
  font-size: clamp(40px, 4.4vw, 68px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .99;
}
.zen-origin-copy h1 em { color: #806C4F; }
.zen-origin-copy > p {
  max-width: 55ch;
  color: #625D55;
  font-size: 14px;
  line-height: 1.85;
}
.zen-origin-actions { display: flex; align-items: center; gap: 26px; margin-top: 32px; flex-wrap: wrap; }
.zen-origin-link,
.zen-origin-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: var(--negro);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.zen-origin-figure { position: relative; min-width: 0; min-height: 620px; overflow: hidden; }
.zen-origin-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(232,223,207,.62) 0%, rgba(232,223,207,0) 24%);
  pointer-events: none;
}
.zen-origin-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.zen-origin-figure figcaption {
  position: absolute;
  z-index: 1;
  right: 28px;
  bottom: 24px;
  max-width: 280px;
  padding: 11px 14px;
  background: rgba(247,244,238,.88);
  color: #625D55;
  font-size: 9px;
  line-height: 1.55;
  backdrop-filter: blur(8px);
}
.zen-origin-intro {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 9vw;
  padding: 96px 64px;
  border-bottom: .5px solid var(--borde);
}
.zen-origin-intro h2,
.zen-ingredient-head h2,
.zen-origin-guide h2,
.zen-origin-cta h2 {
  color: var(--negro);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
}
.zen-origin-intro-copy { max-width: 650px; }
.zen-origin-intro-copy p { color: var(--gris); font-size: 14px; line-height: 1.9; }
.zen-origin-intro-copy p + p { margin-top: 18px; }
.zen-complex-title { display: flex; flex-direction: column; align-items: flex-start; }
.zen-complex-title > span { font-size: clamp(34px,4.2vw,62px); letter-spacing: -.055em; line-height: .95; }
.zen-complex-title b { color: var(--dorado); font-weight: 300; }
.zen-complex-title small { margin-top: 10px; color: #806C4F; font-size: 15px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.zen-recipe-mark { display: block; width: min(72%, 330px); height: auto; margin-top: 22px; object-fit: contain; }
.zen-origin-pillars { padding: 86px 64px 42px; background: var(--negro); color: #fff; }
.zen-origin-pillars-head { max-width: 620px; margin-bottom: 46px; }
.zen-origin-pillars-head h2 { font-size: clamp(30px, 3vw, 44px); letter-spacing: -.03em; line-height: 1.08; }
.zen-origin-pillars-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.13); }
.zen-origin-pillar {
  min-height: 300px;
  padding: 38px 40px 56px 0;
  border-right: 1px solid rgba(255,255,255,.13);
}
.zen-origin-pillar + .zen-origin-pillar { padding-left: 40px; }
.zen-origin-pillar:last-child { border-right: none; }
.zen-origin-pillar-num { display: block; margin-bottom: 72px; color: var(--dorado); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.zen-origin-pillar-value { display: block; margin-bottom: 52px; color: var(--dorado); font-size: 58px; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.zen-origin-pillar-value sup { font-size: .46em; font-style: normal; vertical-align: super; }
.zen-origin-pillar-icon-value { display: flex; align-items: center; height: 58px; }
.zen-origin-pillar-icon-value img { display: block; width: 131px; max-width: 100%; height: auto; }
.zen-origin-pillar:first-child .zen-origin-pillar-icon-value img { width: 122px; }
.zen-origin-pillar-word { font-size: 46px; }
.zen-origin-pillar h3 { margin-bottom: 12px; color: #fff; font-size: 18px; line-height: 1.25; }
.zen-origin-pillar p { max-width: 40ch; color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.8; }
.zen-origin-pillars-note { max-width: 760px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.38); font-size: 10px; line-height: 1.7; }
.zen-ingredient-catalog { padding: 96px 64px; scroll-margin-top: 100px; }
.zen-ingredient-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 42px; }
.zen-ingredient-head > div:first-child { max-width: 620px; }
.zen-ingredient-head h2 { margin-bottom: 12px; }
.zen-ingredient-head p { color: var(--gris); font-size: 13px; line-height: 1.7; }
.zen-ingredient-filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.zen-ingredient-filter {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--negro);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.zen-ingredient-filter:hover,
.zen-ingredient-filter.is-active { border-color: var(--negro); background: var(--negro); color: #fff; }
.zen-ingredient-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: .5px solid var(--borde); border-left: .5px solid var(--borde); }
.zen-ingredient-card { min-width: 0; border-right: .5px solid var(--borde); border-bottom: .5px solid var(--borde); background: var(--crema); }
.zen-ingredient-card[hidden] { display: none; }
.zen-ingredient-image { height: 245px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #EEE9DF; }
.zen-ingredient-image img { width: 72%; height: 72%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; }
.zen-ingredient-card:hover .zen-ingredient-image img { transform: scale(1.07); }
.zen-ingredient-body { min-height: 188px; padding: 24px; border-top: .5px solid var(--borde); }
.zen-ingredient-body > span { display: block; margin-bottom: 9px; color: var(--dorado); font-size: 8px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.zen-ingredient-body h3 { margin-bottom: 9px; color: var(--negro); font-size: 17px; }
.zen-ingredient-body p { color: var(--gris); font-size: 11px; line-height: 1.7; }
.zen-benefits { padding: 88px 64px 0; background: #211F1B; border-top: .5px solid rgba(255,255,255,.12); color: #fff; }
.zen-benefits-head { max-width: 680px; margin-bottom: 42px; }
.zen-benefits-head h2 { margin-bottom: 12px; color: #fff; font-size: clamp(28px,3vw,44px); letter-spacing: -.03em; line-height: 1.08; }
.zen-benefits-head > p { max-width: 55ch; color: rgba(255,255,255,.56); font-size: 13px; line-height: 1.7; }
.zen-benefits-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.13); border-left: 1px solid rgba(255,255,255,.13); }
.zen-benefits-grid article { min-height: 318px; padding: 32px 28px 42px; border-right: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); }
.zen-benefit-top { display: flex; align-items: flex-start; justify-content: space-between; min-height: 116px; margin-bottom: 24px; }
.zen-benefit-top img { display: block; width: 78px; height: 88px; object-fit: contain; object-position: left top; }
.zen-benefit-top span { color: rgba(255,255,255,.38); font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.zen-benefits-grid h3 { margin-bottom: 10px; color: #fff; font-size: 17px; line-height: 1.3; }
.zen-benefits-grid p { color: rgba(255,255,255,.5); font-size: 11px; line-height: 1.7; }
.zen-benefits-note { padding: 22px 0 30px; color: rgba(255,255,255,.38); font-size: 9px; line-height: 1.7; }
.zen-origin-guide { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: 9vw; padding: 92px 64px; background: #EDE9E1; border-top: .5px solid var(--borde); }
.zen-origin-guide-list { list-style: none; border-top: .5px solid var(--borde); }
.zen-origin-guide-list li { display: grid; grid-template-columns: 46px 1fr; gap: 22px; padding: 25px 0; border-bottom: .5px solid var(--borde); }
.zen-origin-guide-list li > span { color: var(--dorado); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.zen-origin-guide-list h3 { margin-bottom: 7px; color: var(--negro); font-size: 15px; line-height: 1.35; }
.zen-origin-guide-list p { color: var(--gris); font-size: 12px; line-height: 1.7; }
.zen-origin-cta { padding: 96px 64px; background: #B28C38; }
.zen-origin-cta .zen-origin-eyebrow { color: rgba(26,26,26,.65); }
.zen-origin-cta h2 { max-width: 760px; font-size: clamp(34px,4vw,58px); }
.zen-origin-cta > p { max-width: 610px; margin-top: 20px; color: rgba(26,26,26,.7); font-size: 14px; line-height: 1.8; }
.zen-origin-cta > div { display: flex; align-items: center; gap: 28px; margin-top: 32px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .zen-origin-hero { min-height: 560px; grid-template-columns: minmax(340px,.95fr) 1.05fr; }
  .zen-origin-copy { padding: 64px 36px 64px 40px; }
  .zen-origin-figure { min-height: 560px; }
  .zen-origin-intro,
  .zen-origin-guide { gap: 48px; padding: 72px 40px; }
  .zen-origin-pillars { padding: 72px 40px 38px; }
  .zen-origin-pillar { padding-right: 26px; }
  .zen-origin-pillar + .zen-origin-pillar { padding-left: 26px; }
  .zen-ingredient-catalog { padding: 72px 40px; }
  .zen-ingredient-head { align-items: flex-start; flex-direction: column; }
  .zen-ingredient-filters { justify-content: flex-start; }
  .zen-ingredient-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zen-benefits { padding: 72px 40px 0; }
  .zen-benefits-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zen-origin-cta { padding: 76px 40px; }
}
@media (max-width: 700px) {
  .zen-origin-hero { display: flex; flex-direction: column; min-height: 0; }
  .zen-origin-copy { padding: 54px 24px 48px; }
  .zen-origin-copy h1 { font-size: 38px; }
  .zen-origin-copy > p { font-size: 13px; }
  .zen-origin-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .zen-origin-figure { min-height: 360px; order: -1; }
  .zen-origin-figure::after { background: linear-gradient(0deg, rgba(232,223,207,.62), rgba(232,223,207,0) 28%); }
  .zen-origin-figure img { object-position: 67% center; }
  .zen-origin-figure figcaption { right: 18px; bottom: 16px; left: 18px; max-width: none; }
  .zen-origin-intro,
  .zen-origin-guide { grid-template-columns: 1fr; gap: 30px; padding: 56px 24px; }
  .zen-origin-pillars { padding: 56px 24px 34px; }
  .zen-origin-pillars-grid { grid-template-columns: 1fr; }
  .zen-origin-pillar,
  .zen-origin-pillar + .zen-origin-pillar { min-height: 0; padding: 28px 0 34px; border-right: none; border-bottom: 1px solid rgba(255,255,255,.13); }
  .zen-origin-pillar:last-child { border-bottom: none; }
  .zen-origin-pillar-num,
  .zen-origin-pillar-value { margin-bottom: 34px; }
  .zen-origin-pillar-value { font-size: 50px; }
  .zen-origin-pillar-word { font-size: 40px; }
  .zen-ingredient-catalog { padding: 56px 24px; }
  .zen-ingredient-head { gap: 26px; margin-bottom: 30px; }
  .zen-ingredient-filters { gap: 6px; }
  .zen-ingredient-filter { flex: 1 1 calc(50% - 6px); padding: 0 10px; }
  .zen-ingredient-grid { grid-template-columns: 1fr; }
  .zen-ingredient-image { height: 230px; }
  .zen-ingredient-body { min-height: 0; }
  .zen-benefits { padding: 56px 24px 0; }
  .zen-benefits-grid { grid-template-columns: 1fr; }
  .zen-benefits-grid article,
  .zen-benefits-grid article + article { min-height: 0; padding: 26px 24px 30px; }
  .zen-benefit-top { min-height: 96px; margin-bottom: 18px; }
  .zen-benefit-top img { width: 68px; height: 78px; }
  .zen-origin-cta { padding: 64px 24px; }
  .zen-origin-cta > div { align-items: flex-start; flex-direction: column; gap: 20px; }
}

/* Perros v49: cabecera editorial con selección por necesidad como siguiente paso. */
.dog-editorial-hero {
  position: relative;
  min-height: clamp(520px, 63vw, 760px);
  overflow: hidden;
  border-bottom: .5px solid var(--borde);
  background: #F1ECE2;
}
.dog-editorial-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left 22%; }
.dog-editorial-copy {
  position: relative;
  z-index: 1;
  width: min(43%, 560px);
  margin-left: auto;
  padding: clamp(74px, 9vw, 132px) clamp(40px, 6vw, 92px) 72px 30px;
}
.dog-editorial-copy h1 { margin: 16px 0 20px; font-size: clamp(40px, 5vw, 72px); line-height: .98; letter-spacing: -.045em; }
.dog-editorial-copy h1 em { color: #9C7A32; }
.dog-editorial-copy p { max-width: 38ch; margin-bottom: 30px; color: #5F5A52; font-size: 13px; line-height: 1.8; }
.dog-editorial-copy .btn-primary { display: inline-flex; }
@media (max-width: 900px) {
  .dog-editorial-hero { min-height: 620px; }
  .dog-editorial-hero > img { object-position: 24% center; }
  .dog-editorial-copy { width: min(48%, 440px); padding: 72px 32px 54px 18px; }
  .dog-editorial-copy h1 { font-size: 45px; }
}
@media (max-width: 600px) {
  .dog-editorial-hero { display: grid; min-height: 0; }
  .dog-editorial-hero > img { position: relative; width: 100%; height: 390px; object-position: 24% center; }
  .dog-editorial-copy { width: auto; margin: 0; padding: 42px 20px 48px; background: #F1ECE2; }
  .dog-editorial-copy h1 { font-size: 39px; }
  .dog-editorial-copy p { font-size: 12px; }
}

/* Home: una sola elección de especie y categorías transversales. */
.home-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 0.5px solid var(--borde); }
.home-type-card { min-height: 270px; padding: 28px; border-right: 0.5px solid var(--borde); }
.home-type-card:last-child { border-right: 0; }
.home-type-num { display: block; margin-bottom: 38px; color: var(--dorado); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; }
.home-type-card h3 { margin-bottom: 10px; font-size: 18px; }
.home-type-card p { min-height: 64px; margin-bottom: 24px; color: var(--gris); font-size: 11px; line-height: 1.65; }
.home-type-card > div { display: flex; flex-wrap: wrap; gap: 8px; }
.home-type-card a { padding: 9px 11px; border: 1px solid var(--borde); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: background 0.12s, border-color 0.12s; }
.home-type-card a:hover { background: var(--negro); border-color: var(--negro); color: #fff; }
.home-reco-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 28px 32px; background: #EDE9E1; }
.home-reco-band h3 { margin-top: 7px; font-size: 20px; }

@media (max-width: 1160px) {
  .nav-logo-img { margin-right: 24px; }
  .nav-item { padding-left: 13px; padding-right: 13px; font-size: 10px; }
  .nav-item-link { padding-left: 13px; }
  .nav-item-toggle { padding-right: 13px; }
}

@media (max-width: 1024px) {
  .nav-mobile-actions { display: flex; }
  .nav-store-mobile { display: inline-flex; }
  .nav-mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .nav-mobile-brand { display: block; }
  .nav-mobile-logo { width: auto; height: 30px; }
  .nav-mobile-close { margin: 0; }
  .nav-mobile-accordion { border-bottom: 0.5px solid var(--borde); }
  .nav-mobile-accordion-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 62px; padding: 0; border: 0; background: transparent; color: var(--negro); font-size: 22px; font-weight: 700; text-align: left; }
  .nav-mobile-accordion-toggle svg { width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 0.18s; }
  .nav-mobile-accordion-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .nav-mobile-panel { padding: 0 0 20px; }
  .nav-mobile-panel[hidden] { display: none; }
  .nav-mobile-link { min-height: 44px; padding: 10px 0; font-size: 16px; }
  .nav-mobile-sub, .nav-mobile-foot { display: flex; align-items: center; min-height: 42px; padding: 8px 0; font-size: 13px; color: var(--gris); }
  .nav-mobile-foot { margin-top: 8px; color: var(--negro); font-weight: 700; border-bottom: 1px solid currentColor; width: max-content; }
  .nav-mobile-group { display: block; margin: 14px 0 4px; color: var(--dorado); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
  .nav-mobile-secondary { display: grid; gap: 0; padding-top: 16px; }
  .nav-mobile-action { display: flex; align-items: center; min-height: 52px; border-bottom: 0.5px solid var(--borde); font-size: 15px; font-weight: 700; }
  .nav-mobile-action-primary { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 72px; margin-bottom: 8px; padding: 12px 16px; background: var(--negro); color: #fff; border: 0; }
  .nav-mobile-action-primary small { margin-top: 5px; color: var(--dorado); font-size: 10px; font-weight: 500; }
  .species-start { padding: 44px 24px 20px; }
  .species-need-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .species-start-grid, .home-type-grid { grid-template-columns: 1fr 1fr; }
  .species-start-card:nth-child(2), .home-type-card:nth-child(2) { border-right: 0; }
  .species-start-card:nth-child(-n+2), .home-type-card:nth-child(-n+2) { border-bottom: 0.5px solid var(--borde); }
  .home-type-card { min-height: 240px; }
  .dog-format-section { padding: 68px 24px 48px; }
  .dog-format-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dog-format-media { height: 300px; }
  .dog-experience { grid-template-columns: 1fr; gap: 42px; padding: 68px 24px; }
  .cross-sell { padding: 68px 24px; }
  .cross-sell-card { grid-template-columns: 1fr; }
  .cross-sell-media { min-height: 250px; border-right: 0; border-bottom: 1px solid rgba(26,26,26,.13); }
  .cross-sell-media img { height: 210px; }
  .cross-sell-vet { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 600px) {
  .navbar { padding-left: 18px; padding-right: 14px; }
  .nav-store-mobile { min-height: 38px; padding: 0 10px; font-size: 9px; }
  .nav-mobile-open { padding: 20px 22px 32px; }
  .species-start { padding: 36px 20px 18px; }
  .species-start-head { display: block; }
  .species-start-head h2 { font-size: 23px; }
  .species-start-all { display: inline-block; margin-top: 16px; }
  .species-start-grid, .home-type-grid { grid-template-columns: 1fr; }
  .species-need-grid { grid-template-columns: 1fr; }
  .species-need-card { min-height: 0; padding: 22px 48px 22px 20px; }
  .species-need-arrow { top: 20px; right: 20px; }
  .species-type-strip { align-items: stretch; }
  .species-type-strip > span { width: 100%; margin: 0 0 4px; }
  .species-type-strip a { flex: 1 1 calc(50% - 4px); text-align: center; }
  .species-start-card, .home-type-card { min-height: 0; border-right: 0; border-bottom: 0.5px solid var(--borde); }
  .species-start-card:last-child, .home-type-card:last-child { border-bottom: 0; }
  .species-start-card > span, .home-type-num { margin-bottom: 24px; }
  .species-reco, .home-reco-band { align-items: flex-start; flex-direction: column; }
  .home-type-card p { min-height: 0; }
  .home-reco-band { padding: 24px; }
  .home-reco-band h3 { font-size: 17px; }
  .dog-format-section { padding: 54px 20px 40px; }
  .dog-format-head { align-items: flex-start; flex-direction: column; gap: 4px; margin-bottom: 28px; }
  .dog-format-head h2 { font-size: 30px; }
  .dog-format-grid { grid-template-columns: 1fr; }
  .dog-format-media { height: 300px; }
  .dog-format-copy { min-height: 0; padding: 24px 22px 28px; }
  .dog-format-copy > span { margin-bottom: 22px; }
  .dog-format-copy p { min-height: 0; }
  .dog-experience { gap: 34px; padding: 58px 20px; }
  .dog-experience-intro h2 { font-size: 31px; }
  .dog-experience-points article { grid-template-columns: 34px 1fr; gap: 16px; }
  .dog-experience-points article p { grid-column: 2; }
  .cross-sell { padding: 56px 20px; }
  .cross-sell-head { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 28px; }
  .cross-sell-head h2 { font-size: 31px; }
  .cross-sell-grid { grid-template-columns: 1fr; }
  .cross-sell-card { min-height: 0; }
  .cross-sell-copy { padding: 26px 22px 30px; }
  .cross-sell-tag { margin-bottom: 20px; }
  .cross-sell-vet-note { padding: 26px 22px; }
}

/* ============================================================
   NAVEGACIÓN UX v40 — corrección del panel de megamenú
   El desplegable debe posicionarse respecto a toda la cabecera,
   no respecto al ancho del enlace Perros/Gatos.
   ============================================================ */
@media (min-width: 1025px) {
  .navbar > .nav-links > .nav-item-drop {
    position: static;
  }

  .navbar > .nav-links {
    overflow: visible;
  }

  .navbar .mega-menu-ancho {
    top: 64px;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 64px);
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 30px 48px 0;
    background: var(--crema);
    color: var(--negro);
    border-right: 0;
    border-left: 0;
    border-top: 2px solid var(--dorado);
    box-shadow: 0 18px 38px rgba(26,26,26,0.16);
    isolation: isolate;
  }

  .navbar .mega-menu-ancho .mm-grid {
    width: 100%;
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(170px, 1fr) minmax(280px, 1.55fr) !important;
    gap: 0 32px;
  }

  .navbar .mega-menu-ancho .mm-col {
    min-width: 0;
  }

  .navbar .mega-menu-ancho .mm-bloque {
    color: #68645e;
  }

  .navbar .mega-menu-ancho .mm-bloque:hover,
  .navbar .mega-menu-ancho .mm-bloque:focus-visible {
    color: var(--negro);
  }

  .navbar .mega-menu-ancho .mm-helper {
    margin-right: -48px;
    margin-left: -48px;
  }

  .nav-store-cta {
    flex-shrink: 0;
  }
}

@media (min-width: 1025px) and (max-width: 1180px) {
  .navbar .mega-menu-ancho .mm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 24px;
  }

  .navbar .mega-menu-ancho .mm-col:nth-child(2) {
    border-right: 0;
  }
}

/* FAQ editorial, preguntas contextuales y páginas legales. */
.faq-page { background: var(--crema); }
.faq-hero { padding: 92px 64px 76px; background: #211F1B; color: #fff; }
.faq-hero .section-eyebrow { color: var(--dorado); }
.faq-hero h1 { max-width: 920px; margin: 18px 0 22px; color: #fff; font-size: clamp(42px,6vw,78px); letter-spacing: -.045em; line-height: .98; }
.faq-hero h1 em { color: var(--dorado); font-weight: 700; }
.faq-hero > p { max-width: 650px; color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.8; }
.faq-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.faq-jump a { padding: 11px 14px; border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.faq-jump a:hover, .faq-jump a:focus-visible { border-color: var(--dorado); color: var(--dorado); }
.faq-layout { display: grid; grid-template-columns: minmax(250px,.62fr) minmax(0,1.38fr); gap: 8vw; padding: 86px 64px; }
.faq-aside { position: sticky; top: 94px; align-self: start; padding-right: 24px; }
.faq-aside > span { color: var(--dorado); font-size: 9px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.faq-aside h2 { margin: 16px 0; font-size: clamp(25px,2.5vw,38px); letter-spacing: -.03em; line-height: 1.08; }
.faq-aside p { max-width: 36ch; color: var(--gris); font-size: 12px; line-height: 1.75; }
.faq-aside a, .zen-faq-teaser a { display: inline-block; margin-top: 24px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.faq-group + .faq-group { margin-top: 72px; }
.faq-group > h2 { margin: 12px 0 26px; font-size: clamp(27px,3vw,42px); }
.faq-group details, .context-faq-list details { border-top: .5px solid var(--borde); }
.faq-group details:last-child, .context-faq-list details:last-child { border-bottom: .5px solid var(--borde); }
.faq-group summary, .context-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; color: var(--negro); cursor: pointer; font-size: 14px; font-weight: 700; list-style: none; }
.faq-group summary::-webkit-details-marker, .context-faq-list summary::-webkit-details-marker { display: none; }
.faq-group summary i, .context-faq-list summary i { position: relative; width: 18px; height: 18px; flex: 0 0 18px; }
.faq-group summary i::before, .faq-group summary i::after, .context-faq-list summary i::before, .context-faq-list summary i::after { position: absolute; top: 8px; left: 2px; width: 14px; height: 1px; background: currentColor; content: ''; }
.faq-group summary i::after, .context-faq-list summary i::after { transform: rotate(90deg); transition: transform .18s ease; }
.faq-group details[open] summary i::after, .context-faq-list details[open] summary i::after { transform: rotate(0); }
.faq-group details > div, .context-faq-list details > div { padding: 0 42px 24px 0; }
.faq-group details p, .context-faq-list details p { max-width: 72ch; color: var(--gris); font-size: 12px; line-height: 1.8; }
.faq-steps { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 22px; list-style: none; border: .5px solid var(--borde); }
.faq-steps li { padding: 18px; border-right: .5px solid var(--borde); }
.faq-steps li:last-child { border-right: 0; }
.faq-steps b, .faq-steps span { display: block; }
.faq-steps b { color: var(--dorado); font-size: 22px; }
.faq-steps span { margin-top: 5px; color: var(--gris); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.faq-contact { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 72px 64px; background: #EDE9E1; }
.faq-contact h2 { margin: 10px 0; font-size: clamp(28px,3vw,42px); }
.faq-contact p { max-width: 62ch; color: var(--gris); font-size: 12px; line-height: 1.75; }
.context-faq { padding: 80px 64px; background: #EDE9E1; border-top: .5px solid var(--borde); }
.context-faq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; margin-bottom: 32px; }
.context-faq-head h2 { margin-top: 10px; font-size: clamp(27px,3vw,42px); }
.context-faq-head > a { padding-bottom: 5px; border-bottom: 1px solid currentColor; flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.context-faq-list { max-width: 960px; }
.product-faq { background: var(--crema); }
.zen-faq-teaser { display: grid; grid-template-columns: 1fr .8fr; gap: 8vw; padding: 82px 64px; background: var(--crema); border-top: .5px solid var(--borde); }
.zen-faq-teaser h2 { max-width: 670px; margin: 12px 0; font-size: clamp(30px,4vw,50px); line-height: 1.05; }
.zen-faq-teaser p { max-width: 62ch; color: var(--gris); font-size: 12px; line-height: 1.8; }
.zen-faq-teaser-list { align-self: center; border-top: .5px solid var(--borde); }
.zen-faq-teaser-list span { display: block; padding: 22px 0; border-bottom: .5px solid var(--borde); font-size: 13px; font-weight: 700; }
.legal-page { background: var(--crema); }
.legal-hero { padding: 82px 64px 68px; background: #211F1B; color: #fff; }
.legal-hero h1 { margin: 14px 0 18px; color: #fff; font-size: clamp(40px,5vw,68px); letter-spacing: -.04em; }
.legal-hero > p { max-width: 640px; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.8; }
.legal-hero > a { display: inline-block; margin-top: 26px; padding-bottom: 5px; border-bottom: 1px solid var(--dorado); color: var(--dorado); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.legal-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(240px,.55fr); gap: 7vw; padding: 76px 64px 96px; }
.legal-content { max-width: 850px; }
.legal-content h2 { margin: 42px 0 14px; padding-top: 34px; border-top: .5px solid var(--borde); font-size: 22px; }
.legal-content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-content p, .legal-content li, .legal-content dd { color: var(--gris); font-size: 12px; line-height: 1.85; }
.legal-content p + p { margin-top: 12px; }
.legal-content ul { display: grid; gap: 9px; padding-left: 19px; }
.legal-content a { color: var(--negro); text-decoration: underline; text-underline-offset: 3px; }
.legal-data { display: grid; grid-template-columns: 1fr 1fr; border-top: .5px solid var(--borde); border-left: .5px solid var(--borde); }
.legal-data > div { padding: 18px; border-right: .5px solid var(--borde); border-bottom: .5px solid var(--borde); }
.legal-data dt { margin-bottom: 6px; color: var(--dorado); font-size: 8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.legal-note { position: sticky; top: 94px; align-self: start; padding: 24px; background: #EDE9E1; border-top: 2px solid var(--dorado); }
.legal-note strong { font-size: 13px; }
.legal-note p { margin-top: 10px; color: var(--gris); font-size: 10px; line-height: 1.7; }
.legal-table-wrap { overflow-x: auto; border: .5px solid var(--borde); }
.legal-table { width: 100%; border-collapse: collapse; min-width: 580px; }
.legal-table th, .legal-table td { padding: 14px; border-right: .5px solid var(--borde); border-bottom: .5px solid var(--borde); text-align: left; }
.legal-table th { color: var(--dorado); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.legal-table td { color: var(--gris); font-size: 11px; line-height: 1.6; }
.legal-caption { margin-top: 10px; font-size: 9px !important; }
@media (max-width: 900px) {
  .faq-layout, .legal-layout { grid-template-columns: 1fr; gap: 48px; padding: 64px 32px; }
  .faq-aside, .legal-note { position: static; }
  .zen-faq-teaser { grid-template-columns: 1fr; gap: 40px; padding: 68px 32px; }
  .context-faq, .faq-contact { padding: 64px 32px; }
}
@media (max-width: 600px) {
  .faq-hero, .legal-hero { padding: 58px 20px 50px; }
  .faq-hero h1 { font-size: 42px; }
  .faq-layout, .legal-layout { padding: 50px 20px 64px; }
  .faq-group + .faq-group { margin-top: 56px; }
  .faq-group summary, .context-faq-list summary { padding: 19px 0; font-size: 13px; }
  .faq-steps { grid-template-columns: 1fr 1fr; }
  .faq-steps li:nth-child(2) { border-right: 0; }
  .faq-steps li:nth-child(-n+2) { border-bottom: .5px solid var(--borde); }
  .faq-contact, .context-faq-head { align-items: flex-start; flex-direction: column; }
  .faq-contact, .context-faq, .zen-faq-teaser { padding: 52px 20px; }
  .legal-data { grid-template-columns: 1fr; }
}


/* ---- Contacto ---- */
.ct-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; }
.ct-panel { padding: 72px 48px; border-right: 0.5px solid var(--borde); }
.ct-panel-form { border-right: none; background: #EDE9E1; }
.ct-h1 { font-size: 36px; font-weight: 700; margin-bottom: 20px; }
.ct-intro { font-size: 14px; color: var(--gris); margin-bottom: 48px; line-height: 1.75; }
.ct-datos { display: flex; flex-direction: column; gap: 28px; }
.ct-dato { padding-bottom: 28px; border-bottom: 0.5px solid var(--borde); }
.ct-label { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); margin-bottom: 8px; }
.ct-valor { font-size: 14px; color: var(--negro); }
.ct-h2 { font-size: 18px; font-weight: 700; margin-bottom: 28px; }
.ct-campos { display: flex; flex-direction: column; gap: 16px; }
.ct-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-flabel { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 6px; }
.ct-input { width: 100%; padding: 10px 12px; border: 0.5px solid var(--borde); background: var(--crema); font-family: var(--font); font-size: 13px; }
.ct-textarea { resize: vertical; }
.ct-nota { font-size: 12px; color: var(--gris); line-height: 1.7; }
.ct-envio { align-self: flex-start; }

@media (max-width: 900px) {
  .ct-split { grid-template-columns: 1fr; min-height: 0; }
  .ct-panel { padding: 48px 24px; border-right: none; border-bottom: 0.5px solid var(--borde); }
  .ct-panel-form { border-bottom: none; }
  .ct-h1 { font-size: 28px; }
  .ct-intro { margin-bottom: 36px; }
  .ct-row2 { grid-template-columns: 1fr; }
  .ct-envio { align-self: stretch; }
}

.footer-logo-img { height: 64px; width: auto; display: block; }
@media (max-width: 900px) { .footer-logo-img { height: 52px; } }





/* ---- Banda de cifras de ficha (patrón Healthy Fish) ---- */
.fsr-wrap { background: #1C1208; display: flex; flex-direction: column; align-items: center; }
.fsr-claim { font-family: var(--font); font-style: italic; font-size: 19px; color: rgba(255,255,255,0.7); margin-bottom: 26px; text-align: center; }
.fsr-iconos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; width: 100%; max-width: 900px; padding-top: 18px; border-top: 0.5px solid rgba(255,255,255,0.1); }
.fsr-ic { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 6px 22px; border-right: 0.5px solid rgba(255,255,255,0.12); }
.fsr-ic:last-child { border-right: none; }
.fsr-ic img { height: 22px; width: auto; }
.fsr-ic span { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.8); }

@media (max-width: 900px) {
  .fsr-claim { font-size: 16px; margin-bottom: 20px; }
  .fsr-ic { padding: 6px 14px; }
  .fsr-ic span { font-size: 8px; }
}
@media (max-width: 600px) {
  .fsr-iconos { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fsr-ic { border-right: none; padding: 4px 0; }
}

/* ---- Producto servido ---- */
.servido-strip { padding: 64px 48px; background: var(--crema); border-top: 0.5px solid var(--borde); }
.serv-title { font-size: 26px; font-weight: 700; color: var(--negro); margin-bottom: 12px; }
.serv-intro { font-size: 13px; color: var(--gris); line-height: 1.8; max-width: 520px; margin-bottom: 32px; }
.serv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 820px; }
.serv-item { margin: 0; border: 0.5px solid var(--borde); background: #fff; }
.serv-item img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .servido-strip { padding: 44px 24px; } .serv-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .serv-item:last-child { display: none; } }

.serv-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
@media (max-width: 700px) { .serv-grid-2 .serv-item:last-child { display: block; } }
.dc-foto { margin: 0 0 44px; border: 0.5px solid var(--borde); overflow: hidden; }
.dc-foto img { display: block; width: 100%; height: clamp(240px, 34vw, 470px); object-fit: cover; object-position: center 12%; }


/* ---- Buscador de puntos de venta ---- */
.tnd-section { padding: 64px 48px; background: var(--crema); border-top: 0.5px solid var(--borde); }
.tnd-head { margin-bottom: 26px; }
.tnd-title { font-size: 26px; font-weight: 700; color: var(--negro); margin-bottom: 10px; }
.tnd-intro { font-size: 13px; color: var(--gris); line-height: 1.8; max-width: 560px; }
.tnd-intro strong { color: var(--negro); }
.tnd-barra { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.tnd-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tnd-input { flex: 1; min-width: 240px; padding: 11px 13px; border: 0.5px solid var(--borde); background: #fff; font-family: var(--font); font-size: 13px; }
.tnd-geo { padding: 11px 16px; border: 0.5px solid var(--negro); background: transparent; font-family: var(--font); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, color 0.15s; }
.tnd-geo:hover:not(:disabled) { background: var(--negro); color: #fff; }
.tnd-geo:disabled { opacity: 0.5; cursor: default; }
.tnd-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: start; }
.tnd-mapa { height: 560px; border: 0.5px solid var(--borde); background: #EDE9E1; position: sticky; top: 84px; z-index: 1; overflow: hidden; }
.tnd-lista { max-height: 560px; overflow-y: auto; border: 0.5px solid var(--borde); background: #fff; }
.tnd-item { padding: 16px 18px; border-bottom: 0.5px solid var(--borde); cursor: pointer; transition: background 0.12s; }
.tnd-item:hover { background: #F5F2EC; }
.tnd-item:last-child { border-bottom: none; }
.tnd-n { font-size: 13px; font-weight: 700; color: var(--negro); margin-bottom: 4px; }
.tnd-km { display: inline-block; font-size: 10px; color: var(--dorado); font-weight: 700; letter-spacing: 0.06em; margin-bottom: 4px; }
.tnd-d { font-size: 12px; color: var(--gris); line-height: 1.6; }
.tnd-c { font-size: 11px; color: var(--gris-cl); margin-top: 3px; }
.tnd-acc { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; }
.tnd-acc a { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--gris); border-bottom: 0.5px solid var(--borde); padding-bottom: 2px; }
.tnd-acc a:hover, .tnd-acc a:focus-visible { color: var(--negro); border-color: var(--dorado); }
.tnd-ir { color: var(--negro) !important; }
.tnd-vacio, .tnd-mas { padding: 22px 18px; font-size: 12px; color: var(--gris); line-height: 1.7; }
.tnd-nota { margin-top: 22px; font-size: 11px; color: var(--gris-cl); line-height: 1.8; max-width: 680px; }
.leaflet-container a { color: var(--negro); }

@media (max-width: 900px) {
  .tnd-section { padding: 44px 24px; }
  .tnd-cols { grid-template-columns: 1fr; }
  .tnd-mapa { height: 340px; position: static; }
  .tnd-lista { max-height: 460px; }
}

.tnd-mapa-off { display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font-size: 12px; color: var(--gris); line-height: 1.7; }

.tnd-aprox { font-size: 10px; color: var(--dorado); letter-spacing: 0.04em; }


/* racimos del mapa de tiendas */
.tnd-cluster { display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: rgba(245,242,236,0.95); border: 1.5px solid var(--dorado); border-radius: 50%; color: var(--marron); font-family: var(--font); transition: background 0.15s, border-color 0.15s; }
.tnd-cluster span { font-size: 12px; font-weight: 700; letter-spacing: 0.01em; line-height: 1; }
.tnd-cluster:hover { background: var(--marron); border-color: var(--marron); color: #fff; }
.marker-cluster, .marker-cluster div { background: transparent; }
.leaflet-popup-content-wrapper { border-radius: 0; }
.leaflet-popup-content { font-family: var(--font); font-size: 12px; line-height: 1.6; }
.leaflet-popup-content strong { color: var(--negro); }
.leaflet-container { font-family: var(--font); }
.leaflet-bar a { border-radius: 0 !important; color: var(--negro); }

/* ---- Promesa Zen (texto oficial de la marca) ---- */
.promesa-zen { padding: 64px 48px; background: var(--marron); text-align: center; }
.promesa-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); margin-bottom: 22px; }
.promesa-cita { font-family: var(--font); font-style: italic; font-size: clamp(19px, 2.4vw, 28px); line-height: 1.55; color: #fff; max-width: 840px; margin: 0 auto; }
.promesa-cita strong { font-style: normal; font-weight: 700; color: var(--dorado); }
.promesa-pie { margin: 28px auto 0; max-width: 680px; font-size: 12px; line-height: 1.85; color: rgba(255,255,255,0.55); }
@media (max-width: 700px) { .promesa-zen { padding: 44px 24px; } }


/* ================= Móvil y tablet: correcciones ================= */

/* 1 · Tablas. La del comparador tiene 5 columnas y no cabe en un teléfono:
      se permite desplazarla en horizontal en vez de romper la página. */
.nutr-table, .sacks-table { width: 100%; }
@media (max-width: 700px) {
  .sacks-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .sacks-table thead, .sacks-table tbody, .sacks-table tr { display: table; width: 100%; table-layout: fixed; }
  .nutr-table td { word-break: break-word; }
  .nutr-table td:first-child { width: 58%; }
}

/* 2 · Banda de cifras con 4 columnas: en tablet van 2 y 2, en móvil una debajo de otra */
@media (min-width: 601px) and (max-width: 1024px) {
  .ficha-stats-ref { flex-wrap: wrap; }
  .ficha-stats-ref .fsr-col { flex: 0 0 50%; padding: 14px 18px; border-right: none; }
  .ficha-stats-ref .fsr-col:nth-child(odd) { border-right: 0.5px solid rgba(255,255,255,0.12); }
}
@media (max-width: 900px) { .fsr-wrap { padding-left: 24px; padding-right: 24px; } }

/* 3 · Buscador de tiendas. Con 41 provincias los filtros ocupan media pantalla:
      se limita la altura y se permite desplazarlos. */
@media (max-width: 900px) {
  .tnd-barra { flex-direction: column; align-items: stretch; gap: 10px; }
  .tnd-input, .tnd-geo { width: 100%; }
}

/* 4 · Zonas táctiles: mínimo recomendado de 44 px en los controles del listado */
@media (pointer: coarse) {
  .acc-header, .faq-q { min-height: 48px; }
}

/* 5 · Nada puede desbordar el ancho de la pantalla */
@media (max-width: 700px) {
  .hero-editorial-content, .hero-sub, .home-stat-img-desc { max-width: 100%; width: auto; }
  img, table, pre { max-width: 100%; }
}

/* selector de provincia */
.tnd-campo { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.tnd-campo .tnd-lbl { position: static; width: auto; height: auto; clip: auto; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-cl); }
.tnd-select { padding: 11px 13px; border: 0.5px solid var(--borde); background: #fff; font-family: var(--font); font-size: 13px; color: var(--negro); cursor: pointer; }
.tnd-select:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }
.tnd-res { padding: 12px 18px; border-bottom: 0.5px solid var(--borde); background: #F5F2EC; }
.tnd-res-txt { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); }
@media (max-width: 900px) {
  .tnd-barra { flex-direction: column; align-items: stretch; gap: 12px; }
  .tnd-campo, .tnd-select, .tnd-input, .tnd-geo { width: 100%; }
}


/* ---- Sección actual visible (aria-current tenía atributo pero no estilo) ---- */
.nav-item[aria-current="page"], .nav-item-link[aria-current="page"] { color: var(--negro); border-bottom: 2px solid var(--dorado); padding-bottom: 2px; }
.nav-mobile-link[aria-current="page"], .nav-store-mobile[aria-current="page"] { color: var(--negro); border-left: 3px solid var(--dorado); padding-left: 13px; }
.footer-link[aria-current="page"] { color: #fff; }
.mm-bloque[aria-current="page"] { background: #EDE9E1; border-color: var(--borde); color: var(--negro); }

/* ---- Filtros aplicados, encima del listado ---- */
.lst-aplicados { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 48px; background: #EDE9E1; border-bottom: 0.5px solid var(--borde); }
.lst-apl-lbl { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-cl); margin-right: 4px; }
.lst-apl { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 0.5px solid var(--negro); background: var(--negro); color: #fff; font-family: var(--font); font-size: 11px; cursor: pointer; transition: background 0.12s; }
.lst-apl span[aria-hidden] { font-size: 14px; line-height: 1; }
.lst-apl:hover, .lst-apl:focus-visible { background: var(--marron); }
.lst-apl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lst-apl-todo { padding: 6px 12px; border: 0.5px solid var(--borde); background: transparent; font-family: var(--font); font-size: 11px; color: var(--gris); cursor: pointer; }
.lst-apl-todo:hover, .lst-apl-todo:focus-visible { border-color: var(--dorado); color: var(--negro); }

/* ---- Botón de buscar en el localizador ---- */
.tnd-inputwrap { display: flex; }
.tnd-inputwrap .tnd-input { flex: 1; border-right: none; }
.tnd-buscar { padding: 11px 18px; border: 0.5px solid var(--negro); background: var(--negro); color: #fff; font-family: var(--font); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.tnd-buscar:hover, .tnd-buscar:focus-visible { background: var(--marron); border-color: var(--marron); }
.tnd-campo-q { flex: 1; min-width: 240px; }

@media (max-width: 900px) {
  .lst-aplicados { padding: 12px 24px; }
  /* el listado por encima del mapa: en el móvil el teclado tapa la mitad inferior */
  .tnd-cols { display: flex; flex-direction: column; }
  .tnd-cols .tnd-panel { order: 0; }
  .tnd-cols .tnd-mapa { order: 1; }
}

.tnd-panel { display: flex; flex-direction: column; border: 0.5px solid var(--borde); background: #fff; max-height: 560px; }
.tnd-panel .tnd-lista { border: none; flex: 1; max-height: none; }
.tnd-panel .tnd-res { flex: 0 0 auto; }
@media (max-width: 900px) { .tnd-panel { max-height: 520px; } }

.tnd-panel { position: relative; z-index: 1; }


/* ---- Carne fresca (portada): texto a la izquierda, imagen a la derecha ---- */
.carnes-band { display: grid; grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr); align-items: center; gap: 0; background: var(--crema); border-top: 0.5px solid var(--borde); }
.carnes-band-copy { padding: 68px 40px 68px 48px; }
.carnes-band-title { font-size: clamp(26px, 3vw, 42px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; color: var(--negro); margin: 14px 0 16px; }
.carnes-band-title em { color: #95802D; }
.carnes-band-sub { font-size: 13px; line-height: 1.85; color: var(--gris); max-width: 44ch; }
.carnes-band-cta { display: inline-block; margin-top: 26px; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--negro); text-decoration: none; border-bottom: 0.5px solid var(--dorado); padding-bottom: 4px; }
.carnes-band-cta:hover, .carnes-band-cta:focus-visible { color: var(--marron); }
.carnes-band-img { display: block; width: 100%; height: 100%; max-height: 460px; object-fit: cover; object-position: center; }

@media (max-width: 900px) {
  .carnes-band { grid-template-columns: 1fr; }
  .carnes-band-copy { padding: 44px 24px 30px; }
  .carnes-band-img { max-height: 300px; }
}

.ct-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; }
.ct-consent input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--negro); }
.ct-consent label { font-size: 11px; line-height: 1.7; color: var(--gris); }
.ct-consent a { color: var(--negro); text-decoration: underline; }
select.ct-input { cursor: pointer; }

.ct-botcheck { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.ct-error { color: #8a3a2a !important; }

/* Confirmación de envío del formulario de contacto */
.ct-exito { border: 0.5px solid #C9A84C; padding: 32px 28px; background: #FFFFFF; }
.ct-exito:focus { outline: 2px solid #C9A84C; outline-offset: 4px; }
.ct-exito-sello { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #C9A84C; margin: 0 0 14px; }
.ct-exito-txt { font-size: 16px; line-height: 1.65; color: #1a1a1a; margin: 0 0 22px; }
.ct-exito-links { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; border-top: 0.5px solid #C9A84C; padding-top: 18px; }
.ct-exito-links a, .ct-otra { font-size: 14px; letter-spacing: 0.04em; color: #1a1a1a; text-decoration: none; border-bottom: 0.5px solid #C9A84C; padding-bottom: 2px; }
.ct-otra { background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; font-family: inherit; padding: 0 0 2px; }
.ct-exito-links a:hover, .ct-otra:hover { color: #C9A84C; }
@media (max-width: 700px) {
  .ct-exito { padding: 24px 20px; }
  .ct-exito-links { gap: 16px; flex-direction: column; align-items: flex-start; }
}

/* Sello GOOD + FEEL junto al título del carrusel de ingredientes */
.ing-titulo-mark { display: flex; align-items: center; gap: 20px; }
.ing-sello { width: 128px; height: auto; display: block; flex-shrink: 0; }
@media (max-width: 700px) {
  .ing-titulo-mark { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ing-sello { width: 104px; }
}

/* Catálogo de carnes y pescados frescos (Por qué Zen) */
.carnes-cat { padding: 72px 64px; background: var(--crema); border-bottom: 0.5px solid var(--borde); }
.carnes-cat-head { max-width: 620px; margin-bottom: 40px; }
.carnes-cat-head h2 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--negro); margin: 12px 0 12px; }
.carnes-cat-head p { font-size: 13px; line-height: 1.75; color: var(--gris); }
.carnes-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border-top: 0.5px solid var(--borde); border-left: 0.5px solid var(--borde); }
.carne-card { min-width: 0; border-right: 0.5px solid var(--borde); border-bottom: 0.5px solid var(--borde); display: flex; flex-direction: column; }
.carne-img { height: 168px; display: flex; align-items: center; justify-content: center; padding: 18px 20px 6px; }
.carne-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.carne-body { padding: 4px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.carne-body h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--negro); margin-bottom: 8px; }
.carne-body p { font-size: 12px; line-height: 1.7; color: var(--gris); }
@media (max-width: 1200px) { .carnes-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 860px) {
  .carnes-cat { padding: 52px 24px; }
  .carnes-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .carne-img { height: 138px; padding: 14px 14px 4px; }
  .carne-body { padding: 4px 16px 20px; }
}
@media (max-width: 480px) { .carnes-grid { grid-template-columns: 1fr; } }

.tnd-ficha { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--negro); text-decoration: none; border-bottom: 0.5px solid var(--dorado); padding-bottom: 3px; margin-right: 16px; }
.tnd-ficha:hover { color: var(--marron); }


/* ===== Zen | Fase 3: experiencia de producto y localizador ===== */
.zen-availability { color:#575148; font-size:11px; line-height:1.6; margin:11px 0 2px; }
.zen-mobile-find { display:none; }
.zen-skip { position:fixed; z-index:12000; top:8px; left:8px; transform:translateY(-180%);
  border-radius:3px; background:#221b12; color:white; text-decoration:none; padding:13px 17px; font:600 13px/1.4 var(--font); }
.zen-skip:focus { transform:translateY(0); }
.zen-recipe-context { margin:0 0 20px; padding:18px 20px; background:#f4efe4; border-left:3px solid #ab944e;
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px; color:#2e2921; }
.zen-recipe-context[hidden] { display:none !important; }
.zen-recipe-label { font-size:12px; }
.zen-recipe-context strong { font-size:14px; }
.zen-recipe-context p { margin:8px 0 0; font-size:12px; line-height:1.6; }
.zen-recipe-clear { border:1px solid #716859; border-radius:2px; background:transparent; color:inherit;
  min-height:42px; padding:9px 13px; cursor:pointer; font:600 11px/1.4 var(--font); white-space:nowrap; }
.zen-recipe-clear:hover { background:white; }
:where(a,button,input,select,textarea,[role="button"]):focus-visible { outline:3px solid #b9902e; outline-offset:3px; }
@media (max-width: 760px) {
  .zen-has-product-cta { padding-bottom:calc(74px + env(safe-area-inset-bottom)); }
  .zen-mobile-find { display:flex; align-items:center; justify-content:center; gap:10px;
    position:fixed; z-index:900; bottom:0; left:0; right:0; min-height:64px;
    padding:13px 24px calc(13px + env(safe-area-inset-bottom)); background:#211c16; color:#fff;
    border-top:2px solid #ba9c4b; text-decoration:none; font-size:13px; font-weight:700;
    letter-spacing:.04em; box-shadow:0 -8px 24px rgba(0,0,0,.18); }
  .zen-mobile-find span[aria-hidden] { font-size:24px; line-height:1; }
  .product-info .find-btn { min-height:46px; display:flex; align-items:center; justify-content:center; }
  .product-layout { scroll-margin-top:100px; }
  .zen-recipe-context { flex-direction:column; gap:12px; }
  .zen-recipe-clear { width:100%; }
  .tnd-campo-q { min-width:0; }
  .tnd-buscar { min-width:66px; }
  .tnd-acc a { min-height:42px; display:inline-flex; align-items:center; }
  .tnd-lista { overscroll-behavior:contain; }
}
@media (prefers-reduced-motion:reduce) {
  .zen-mobile-find, .zen-skip { transition:none !important; animation:none !important; }
}

/* Fichas tecnicas oficiales Zen - enlaces PDF */
.zen-techdoc-link{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;margin-top:.65rem;padding:.7rem 1rem;border:1px solid #867b68;border-radius:999px;color:#272522;text-decoration:none;font-size:.9rem;font-weight:600;background:transparent;min-height:44px;transition:background-color .2s}
.zen-techdoc-link:hover,.zen-techdoc-link:focus-visible{background:#efe9de;color:#171613}
.zen-techdoc-link small{font-size:.74rem;font-weight:400;opacity:.75}
@media(max-width:640px){.zen-techdoc-link{width:100%;box-sizing:border-box}}

/* Los controles mantienen los colores y medidas originales; solo cambia la familia. */
input, select, textarea, option, optgroup { font-family: var(--font); }

/* Zen localizador: el fondo neutro impide mostrar mosaicos 403 de otros proveedores. */
.tnd-mapa { background: #eeeae1; }
#tnd-mapa-aviso { position: absolute; left: 14px; right: 14px; bottom: 34px; z-index: 1100;
 margin: 0; padding: 12px 15px; border: 1px solid #c9a84c; border-radius: 5px;
 background: rgba(255,253,249,.98); color: #37291d; font: 500 13px/1.55 'Zen Gotham',Arial,sans-serif;
 box-shadow: 0 3px 15px rgba(0,0,0,.12); pointer-events: none; }

/* Google Maps: reserva informativa si falta autorización, sin alterar el buscador. */
.tnd-mapa-error { position:absolute; inset:0; z-index:20; display:flex;
  align-items:center; justify-content:center; padding:28px; text-align:center;
  background:#eeeae1; color:#33241a; font-size:14px; line-height:1.65; }
.zen-google-popup { font: 13px/1.6 Arial, sans-serif; color:#291d14; }
.zen-google-popup strong { font-weight:700; }
.tnd-item[role="button"]:focus-visible { outline:2px solid #c9a84c;outline-offset:-2px; }