/* =========================================================
   Chocolates El Rey — Editorial Luxury Stylesheet
   Palette: deep cacao, warm cream, antique gold
   ========================================================= */

:root {
  /* Surfaces */
  --bg:           #f6efe5;        /* warm cream page */
  --bg-alt:       #ede1cf;        /* darker cream */
  --bg-cream:     #faf3e8;
  --bg-paper:     #ffffff;
  --bg-dark:      #1a0e08;        /* near-black cacao */
  --bg-deep:      #2a160c;        /* warm espresso */
  --bg-rich:      #3a1f12;        /* rich brown */

  /* Ink */
  --ink:          #1a0d07;
  --ink-soft:     #3a2418;
  --ink-mute:     #6b574a;
  --ink-on-dark:  #f3e7d3;
  --ink-on-dark-mute: #b9a079;

  /* Accent */
  --gold:         #c2964c;
  --gold-bright:  #d8b06a;
  --gold-deep:    #8a6628;

  /* Lines */
  --line:         rgba(58, 29, 15, 0.14);
  --line-light:   rgba(58, 29, 15, 0.07);
  --line-dark:    rgba(243, 231, 211, 0.18);

  /* Type */
  --serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --container: 1240px;
  --container-narrow: 920px;
  --container-wide: 1400px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t: 0.35s var(--ease);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Modern overflow-x: clip does NOT create a scroll container, so position:
     sticky on .site-header still works. Prevents the cream strip / horizontal
     scrollbar that can appear when any descendant accidentally exceeds the
     viewport width. Older `hidden` value would have broken sticky. */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t), opacity var(--t);
}
a:hover { color: var(--gold-deep); }

::selection { background: var(--gold); color: #fff; }

/* ====== Typography ====== */

h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0 0 0.6em;
  color: var(--ink);
}
h1 { font-size: clamp(2.6rem, 5.5vw, 5rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 400; }
h3 { font-size: clamp(1.35rem, 1.8vw, 1.75rem); font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.02em; }

p { margin: 0 0 1.1em; color: var(--ink-soft); }

em, .italic { font-style: italic; color: var(--gold-deep); }

.eyebrow,
.hero-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 1.2rem;
}

.section-dark .eyebrow,
.section-dark .hero-eyebrow {
  color: var(--gold-bright);
}
.eyebrow.light { color: var(--gold-bright); }

/* Display — the hero/page-hero headline class */
.display {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5.2vw, 4.6rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
.section-dark .display { color: var(--ink-on-dark); }

/* h2 utility class — matches h2 tag but for divs/sections using .h2 */
.h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: var(--ink);
}
.h2.light,
.section-dark .h2 { color: var(--ink-on-dark); }

/* Lede — the intro paragraph style under a display/h2 */
.lede {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 0 1.6rem;
}
.section-dark .lede,
.lede.light { color: var(--ink-on-dark-mute); }

/* ====== Layout helpers ====== */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2rem;
}
.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 2rem;
}

section { padding: 7rem 0; }

.section-cream { background: var(--bg-alt); }
.section-paper { background: var(--bg-paper); }
.section-dark {
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  position: relative;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 {
  color: var(--ink-on-dark);
}
.section-dark p { color: var(--ink-on-dark-mute); }

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 5rem;
}
.section-header p {
  font-size: 1.12rem;
  color: var(--ink-mute);
}
.section-dark .section-header p { color: var(--ink-on-dark-mute); }

.divider {
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 1.5rem auto 2rem;
}

/* ====== Buttons ====== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.05rem 2.2rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
}
.btn:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: #fff;
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--bg);
}

.section-dark .btn-outline,
.hero .btn-outline,
.hero .btn.btn-outline,
.cacao-map .btn-outline {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  background: transparent;
}
.section-dark .btn-outline:hover,
.hero .btn-outline:hover,
.hero .btn.btn-outline:hover,
.cacao-map .btn-outline:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg-dark);
}

/* Default (non-outline) .btn sitting on the dark hero gets a gold fill
   so both CTAs read with strong contrast side-by-side. */
.hero .btn:not(.btn-outline) {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg-dark);
}
.hero .btn:not(.btn-outline):hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--bg-dark);
}

.btn-ghost {
  padding: 0;
  background: transparent;
  border: none;
  color: var(--gold-deep);
  letter-spacing: 0.18em;
  border-bottom: 1px solid var(--gold);
  border-radius: 0;
  padding-bottom: 4px;
}
.btn-ghost:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
  background: transparent;
  transform: none;
}

/* Primary button — solid gold, strong editorial CTA */
.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg-dark);
}
.btn-primary:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--bg-dark);
}
.section-dark .btn-primary:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}

/* Size variants */
.btn-lg {
  padding: 1.2rem 2.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.24em;
}
.btn-sm {
  padding: 0.7rem 1.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
}

/* ====== Header & Nav ====== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(26, 14, 8, 0.96); /* same dark cacao as the footer */
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(243, 231, 211, 0.12);
  color: var(--ink-on-dark);
}

.nav {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 1.1rem 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-right: auto;
  text-decoration: none;
  flex: 0 0 auto;
}
.nav-brand img {
  height: 78px;
  width: auto;
  max-width: 340px;
  display: block;
  transition: height var(--t);
}
.nav-brand span {
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  display: none; /* logo carries the wordmark */
}
.nav-links {
  display: flex;
  gap: 2.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-wrap: nowrap;
}
/* Push the CTA item to the far right on desktop so the plain links
   stay clustered together. */
.nav-links .nav-cta-item { margin-left: auto; }

/* The NAV BURGER BREAKPOINT EXTENSION block was moved to the bottom of this
   file (search "NAV BURGER BREAKPOINT EXTENSION") so it cascades AFTER the
   default `.nav-toggle { display: none }` rule and `.nav-links` desktop rule. */

/* Only plain <li> links get the uppercase nav-link styling — the
   .nav-cta-item is styled as a button and should be excluded from
   the underline / hover treatment. */
.nav-links li:not(.nav-cta-item) a {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-on-dark);
  position: relative;
  padding: 0.4rem 0;
  text-decoration: none;
}
.nav-links li:not(.nav-cta-item) a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--gold-bright);
  transition: width var(--t);
}
.nav-links li:not(.nav-cta-item) a:hover,
.nav-links li:not(.nav-cta-item) a.active,
.nav-links li:not(.nav-cta-item) a[aria-current="page"] {
  color: var(--gold-bright);
}
.nav-links li:not(.nav-cta-item) a.active::after,
.nav-links li:not(.nav-cta-item) a:hover::after,
.nav-links li:not(.nav-cta-item) a[aria-current="page"]::after { width: 100%; }

.nav-cta {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.75rem 1.35rem;
  border: 1px solid var(--gold);
  color: var(--ink-on-dark);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  transition: all var(--t);
}
.nav-cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg-dark);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-left: auto;
  cursor: pointer;
  color: var(--ink-on-dark);
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
  z-index: 55;
}
.nav-toggle-bar {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
  width: 100%;
}
.site-header.menu-open .nav-toggle-bar:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.site-header.menu-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.site-header.menu-open .nav-toggle-bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
body.nav-lock { overflow: hidden; }

/* ====== Hero ====== */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: linear-gradient(
      135deg,
      rgba(26, 14, 8, 0.78) 0%,
      rgba(26, 14, 8, 0.55) 55%,
      rgba(26, 14, 8, 0.78) 100%
    ),
    url('../images/hero-cacao-pod.jpg') center/cover no-repeat;
  color: var(--ink-on-dark);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(194, 150, 76, 0.18), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(194, 150, 76, 0.12), transparent 60%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 8rem 2rem 6rem;
  text-align: center;
  z-index: 1;
}
.hero h1 {
  color: var(--ink-on-dark);
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 5.4rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.hero h1 em {
  font-style: italic;
  color: var(--gold-bright);
  font-weight: 400;
}
.hero-sub {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--ink-on-dark-mute);
  max-width: 640px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-on-dark-mute);
  writing-mode: vertical-rl;
  z-index: 1;
}
.hero-scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 50px;
  background: var(--gold);
  margin: 0.6rem auto 0;
}

/* ====== Pillars ====== */

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.pillars.pillars--three {
  grid-template-columns: repeat(3, 1fr);
}
.pillar-num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--gold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
  opacity: 0.9;
}
@media (max-width: 900px) {
  .pillars.pillars--three { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pillars.pillars--three { grid-template-columns: 1fr; }
}
.pillar {
  padding: 3rem 2rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-cream);
  transition: background var(--t);
}
.pillar:hover { background: var(--bg-paper); }
.pillar-icon {
  font-size: 1.75rem;
  color: var(--gold);
  margin-bottom: 1.2rem;
  line-height: 1;
}
.pillar h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  font-family: var(--serif);
}
.pillar p { font-size: 0.95rem; color: var(--ink-mute); margin: 0; }

/* --- Pillars: iconic variant (image or SVG visual + label + copy) --- */
.pillars-iconic .pillar {
  padding: 2.75rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pillars-iconic .pillar-visual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin-bottom: 1.35rem;
  transition: transform 0.55s var(--ease);
}
.pillars-iconic .pillar-visual svg {
  width: 56px;
  height: 56px;
  display: block;
  overflow: visible;
}
.pillars-iconic .pillar-visual--image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: transparent;
}
.pillars-iconic .pillar:hover .pillar-visual {
  transform: translateY(-4px) scale(1.06);
}
.pillars-iconic .pillar-label {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  opacity: 0.9;
}
@media (max-width: 900px) {
  .pillars-iconic .pillar { padding: 2.25rem 1.5rem 2rem; }
  .pillars-iconic .pillar-visual { width: 84px; height: 84px; margin-bottom: 1rem; }
  .pillars-iconic .pillar-visual svg { width: 48px; height: 48px; }
}

/* ====== Process Diagram ====== */

.process {
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-deep) 100%);
  color: var(--ink-on-dark);
  padding: 6rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.process::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(194, 150, 76, 0.08), transparent 60%),
    radial-gradient(circle at 85% 70%, rgba(194, 150, 76, 0.06), transparent 60%);
  pointer-events: none;
}
.process > .container { position: relative; }

.process-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.5rem;
}
.process-header .eyebrow { color: var(--gold-bright); }
.process-header .divider { background: var(--gold); }

.process-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  line-height: 1.15;
  margin: 0.8rem 0 1rem;
  color: var(--ink-on-dark);
}
.process-title em {
  color: var(--gold-bright);
  font-style: italic;
}
.process-lede {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-on-dark-mute);
  margin: 1.4rem 0 0;
}

.process-hint {
  font-size: 0.7rem;
  color: var(--ink-on-dark-mute);
  text-align: center;
  margin: 0 0 2rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.65;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  margin-top: 2.5rem;
}

.process-step {
  position: relative;
  padding: 1.5rem 1rem 0;
  text-align: center;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  outline: none;
  transition: transform 0.5s var(--ease);
}
.process-step:hover,
.process-step:focus-visible { transform: translateY(-4px); }
.process-step:focus-visible .step-icon-wrap {
  box-shadow: 0 0 0 3px rgba(216, 176, 106, 0.18);
  border-radius: 6px;
}

.step-number {
  display: block;
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--gold);
  letter-spacing: 0.22em;
  margin-bottom: 1rem;
}

.step-icon-wrap {
  width: 130px;
  height: 130px;
  margin: 0 auto 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s var(--ease);
}
.step-icon {
  width: 110px;
  height: 110px;
  object-fit: contain;
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease),
              opacity 0.5s var(--ease);
  opacity: 0.78;
}
.process-step:hover .step-icon,
.process-step.is-active .step-icon {
  transform: scale(1.06);
  opacity: 1;
  filter: drop-shadow(0 0 18px rgba(216, 176, 106, 0.22));
}

.step-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 0.4rem;
  line-height: 1.4;
}
.process-step:hover .step-label,
.process-step.is-active .step-label { color: var(--gold-bright); }

.step-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink-on-dark);
  margin: 0;
  line-height: 1.3;
}

/* Connector chevrons between steps */
.process-step::after {
  content: '';
  position: absolute;
  top: 92px;
  right: -10px;
  width: 18px;
  height: 18px;
  border-top: 1px solid var(--gold-deep);
  border-right: 1px solid var(--gold-deep);
  transform: rotate(45deg);
  opacity: 0.6;
}
.process-step:last-child::after { display: none; }

/* Detail panel (appears below) */
.process-detail {
  margin-top: 3rem;
  min-height: 120px;
  position: relative;
}
.detail-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 2.5rem;
  background: rgba(243, 231, 211, 0.04);
  border-left: 2px solid var(--gold-bright);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  text-align: left;
  position: relative;
}
.detail-card.is-visible { opacity: 1; transform: translateY(0); }

.detail-step {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 0.6rem;
}
.detail-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--ink-on-dark);
  margin: 0 0 0.8rem;
}
.detail-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-on-dark-mute);
  margin: 0;
}

/* ====== Split (text + media) ====== */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }

.split-media {
  position: relative;
  overflow: hidden;
}
.split-media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.8s var(--ease);
}
.split-media:hover img { transform: scale(1.04); }
.split-media::after {
  content: '';
  position: absolute;
  inset: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
  z-index: 2;
}

/* --- Crossfade slideshow inside split-media --- */
.split-media .slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.split-media .slideshow .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.9s var(--ease), transform 3.2s var(--ease);
  will-change: opacity, transform;
}
.split-media .slideshow .slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
.split-media:hover .slideshow .slide.is-active { transform: scale(1.05); }

.split-content h2 { margin-top: 0; }

/* ====== Nuestros programas — flip cards (dark section) ====== */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}
.program-card.flip-card {
  position: relative;
  min-height: 540px;
  perspective: 1400px;
  cursor: pointer;
  outline: none;
  background: transparent;
  border: 0;
  padding: 0;
}
.program-card.flip-card:focus-visible .flip-card-inner {
  box-shadow: 0 0 0 2px var(--gold);
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.program-card.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-face {
  position: absolute;
  inset: 0;
  min-height: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--line-dark);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.flip-front {
  padding: 2.75rem 2.25rem 3rem;
  background: rgba(243, 231, 211, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.flip-front .program-num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.2em;
  margin-bottom: 1.1rem;
}
.flip-front h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--ink-on-dark);
  margin: 0 0 1.1rem;
}
.flip-front p {
  color: rgba(243, 231, 211, 0.78);
  font-size: 0.96rem;
  line-height: 1.65;
  margin: 0 0 1rem;
}
.flip-front p:last-of-type { margin-bottom: 1.5rem; }

.flip-hint {
  margin-top: auto;
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  transition: opacity var(--t), transform var(--t);
}
.program-card.flip-card:hover .flip-front .flip-hint {
  opacity: 1;
  transform: translateX(3px);
}

.flip-back {
  transform: rotateY(180deg);
  background-size: cover;
  background-position: center;
  background-color: #1a0e08;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.25rem 2.25rem 2rem;
}
.flip-back::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 14, 8, 0.15) 0%, rgba(26, 14, 8, 0.55) 60%, rgba(26, 14, 8, 0.82) 100%);
  pointer-events: none;
}
.flip-caption {
  position: relative;
  color: #f3e7d3;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
  max-width: 420px;
  margin-bottom: 0.9rem;
}
.flip-hint--back {
  position: relative;
  color: var(--gold);
  align-self: flex-start;
}
.program-card.flip-card:hover .flip-face { border-color: rgba(194, 150, 76, 0.45); }
.program-card.flip-card:hover:not(.is-flipped) .flip-front { background: rgba(194, 150, 76, 0.07); }

@media (max-width: 900px) {
  .programs-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .program-card.flip-card { min-height: 520px; }
  .flip-front { padding: 2.25rem 1.75rem 2.25rem; }
  .flip-back { padding: 1.75rem 1.75rem 1.75rem; }
  .flip-front h3 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .flip-card-inner { transition-duration: 0.001s; }
}


/* ====== Origins (dark cards) ====== */

.origins {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.origin-card {
  padding: 2.5rem 2rem;
  background: rgba(243, 231, 211, 0.04);
  border: 1px solid var(--line-dark);
  transition: all var(--t);
  position: relative;
}
.origin-card:hover {
  background: rgba(194, 150, 76, 0.08);
  border-color: var(--gold);
  transform: translateY(-4px);
}
.origin-name {
  font-family: var(--serif);
  font-size: 1.55rem;
  color: var(--ink-on-dark);
  margin-bottom: 0.35rem;
}
.origin-pct {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 1.2rem;
}
.origin-notes {
  font-size: 0.95rem;
  color: var(--ink-on-dark-mute);
  line-height: 1.65;
}

/* Per-region program statistics on Responsabilidad Social */
.program-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: var(--ink-on-dark-mute);
  line-height: 1.5;
}
.program-stats li {
  padding-left: 0.95rem;
  position: relative;
}
.program-stats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 1px;
  background: var(--gold-bright);
}
.program-stats strong {
  color: var(--ink-on-dark);
  font-weight: 600;
  font-feature-settings: "tnum";
}
.program-stats em {
  color: var(--gold-bright);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-top: 0.35rem;
}
.program-stats-note {
  margin-top: 2.2rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-on-dark-mute);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Flip-card variant of origin cards (Más y Mejor Cacao section) */
.flip-instruction {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid rgba(194, 150, 76, 0.6);
  border-radius: 999px;
  background: rgba(194, 150, 76, 0.12);
  color: var(--gold-bright);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 0 rgba(194, 150, 76, 0.45);
  animation: flipInstrPulse 2.4s ease-in-out infinite;
}
.flip-instruction strong {
  color: #f3e7d3;
  font-weight: 700;
}
@keyframes flipInstrPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 150, 76, 0.45); }
  50%      { box-shadow: 0 0 0 10px rgba(194, 150, 76, 0); }
}
.flip-instruction-icon {
  display: inline-block;
  font-size: 1.25rem;
  font-style: normal;
  line-height: 1;
}
.origins-flip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.origin-card.flip-card {
  position: relative;
  min-height: 460px;
  perspective: 1400px;
  cursor: pointer;
  outline: none;
  background: transparent;
  border: 0;
  padding: 0;
}
.origin-card.flip-card:focus-visible .flip-card-inner {
  box-shadow: 0 0 0 2px var(--gold);
}
.origin-card.flip-card .flip-card-inner {
  min-height: 460px;
}
.origin-card.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}
.origin-flip-front {
  padding: 2.25rem 1.85rem 1.85rem;
  background: rgba(243, 231, 211, 0.04);
  display: flex;
  flex-direction: column;
}
.origin-flip-front h3 {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--ink-on-dark);
  margin: 0 0 0.85rem;
}
.origin-flip-front .origin-desc {
  color: rgba(243, 231, 211, 0.82);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 1.3rem;
}
.origin-flip-back {
  padding: 2.25rem 1.85rem 1.85rem;
  background: linear-gradient(160deg, #2a1a10 0%, #1a0e08 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.origin-flip-back::before { display: none; }
.origin-flip-back .flip-back-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 0.55rem;
}
.origin-flip-back h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--ink-on-dark);
  margin: 0 0 0.5rem;
  position: relative;
}
.origin-flip-back .origin-pct {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 1.1rem;
}
.origin-flip-back .program-stats {
  margin-bottom: 1.3rem;
}
.origin-flip-back p {
  position: relative;
  color: rgba(243, 231, 211, 0.85);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 1.5rem;
}
.origin-card.flip-card:hover .flip-face { border-color: rgba(194, 150, 76, 0.45); }
.origin-card.flip-card:hover:not(.is-flipped) .origin-flip-front {
  background: rgba(194, 150, 76, 0.08);
  transform: translateY(-2px);
  transition: transform var(--t), background var(--t);
}
.origin-card.flip-card .flip-hint {
  margin-top: auto;
}
@media (max-width: 1100px) {
  .origins-flip { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   REGIONS V2 — Redesigned Más y Mejor Cacao section
   ================================================================ */
.regions-section {
  position: relative;
  background: linear-gradient(180deg, #1a0e08 0%, #221208 50%, #1a0e08 100%);
}
.regions-header { text-align: center; }
.flip-tip {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.6rem auto 0;
  padding: 0.7rem 1.4rem 0.7rem 1rem;
  border-radius: 999px;
  background: rgba(194, 150, 76, 0.1);
  border: 1px solid rgba(194, 150, 76, 0.3);
  color: rgba(243, 231, 211, 0.92);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  backdrop-filter: blur(4px);
}
.flip-tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(194, 150, 76, 0.2);
  color: var(--gold-bright);
  flex-shrink: 0;
}
.flip-tip-text strong { color: var(--gold-bright); font-weight: 600; }

/* Card grid */
.origins-flip-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  margin-top: 3rem;
  perspective: 1800px;
}
.region-card {
  position: relative;
  min-height: 480px;
  perspective: 1800px;
  cursor: pointer;
  outline: none;
  background: transparent;
  border: 0;
  padding: 0;
}
.region-card .flip-card-inner {
  min-height: 480px;
  transition: transform 0.75s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.4s ease;
  transform-style: preserve-3d;
}
.region-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }
.region-card:focus-visible .flip-card-inner { box-shadow: 0 0 0 2px var(--gold); }

/* Hover preview tilt — subtle 3D wiggle to advertise interactivity */
.region-card:not(.is-flipped):hover .flip-card-inner {
  transform: perspective(1800px) rotateY(-12deg);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.7);
}
.region-card.is-flipped:hover .flip-card-inner {
  transform: rotateY(168deg);
}

/* Faces share base style */
.region-front,
.region-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  border: 1px solid rgba(194, 150, 76, 0.18);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  transition: border-color 0.4s ease;
}
.region-card:hover .region-front,
.region-card:hover .region-back { border-color: rgba(194, 150, 76, 0.5); }

/* Front face */
.region-front {
  padding: 1.7rem 1.5rem 1.5rem;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(194, 150, 76, 0.12) 0%, transparent 60%),
    linear-gradient(160deg, #261610 0%, #1a0e08 100%);
}
.region-front::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  opacity: 0.7;
}
.region-front-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.region-num {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-style: italic;
  color: var(--gold-bright);
  letter-spacing: 0.02em;
  line-height: 1;
}
.region-front-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(194, 150, 76, 0.12);
  border: 1px solid rgba(194, 150, 76, 0.3);
  color: var(--gold-bright);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.region-front-cue svg { display: block; }
.region-front-body { flex: 1; }
.region-front-body h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.18;
  color: var(--ink-on-dark);
  margin: 0 0 0.85rem;
  letter-spacing: 0.005em;
}
.region-desc {
  color: rgba(243, 231, 211, 0.78);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}
.region-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(194, 150, 76, 0.18);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  transition: color 0.3s ease;
}
.region-cta-arrow {
  font-size: 1rem;
  letter-spacing: 0;
  transition: transform 0.3s ease;
}
.region-card:hover .region-cta-arrow { transform: translateX(4px); }

/* Back face */
.region-back {
  padding: 1.5rem 1.4rem 1.4rem;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(194, 150, 76, 0.18) 0%, transparent 60%),
    linear-gradient(160deg, #2c1a10 0%, #170c06 100%);
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.region-back::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold-bright);
  opacity: 0.8;
}
.region-back-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}
.region-num-back {
  font-size: 1.2rem;
  opacity: 0.8;
}
.region-back-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.region-back h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.18;
  color: var(--ink-on-dark);
  margin: 0 0 0.35rem;
}
.region-variety {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 231, 211, 0.6);
  margin-bottom: 1.1rem;
}

/* Stat grid — big numbers, small labels */
.impact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem 1rem;
  margin-bottom: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(194, 150, 76, 0.18);
  border-bottom: 1px solid rgba(194, 150, 76, 0.18);
}
.impact-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.impact-stat-wide { grid-column: span 2; }
.impact-num {
  font-family: var(--serif);
  font-size: 1.65rem;
  line-height: 1;
  color: var(--gold-bright);
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}
.impact-num small {
  font-size: 0.62em;
  margin-left: 0.15em;
  opacity: 0.75;
  font-style: italic;
}
.impact-label {
  font-size: 0.7rem;
  color: rgba(243, 231, 211, 0.7);
  line-height: 1.3;
}

/* Special program callout */
.impact-special {
  background: rgba(194, 150, 76, 0.08);
  border-left: 2px solid var(--gold-bright);
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.9rem;
  border-radius: 0 3px 3px 0;
}
.impact-special-tag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 0.25rem;
}
.impact-special p {
  margin: 0;
  color: rgba(243, 231, 211, 0.85);
  font-size: 0.78rem;
  line-height: 1.45;
}

.region-back-cta {
  margin-top: auto;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(194, 150, 76, 0.65);
  padding-top: 0.5rem;
}

.regions-footnote {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(243, 231, 211, 0.55);
  font-style: italic;
  letter-spacing: 0.02em;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive */
@media (max-width: 1100px) {
  .origins-flip-v2 { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .region-card { min-height: 460px; }
  .region-card .flip-card-inner { min-height: 460px; }
}
@media (max-width: 600px) {
  .origins-flip-v2 { grid-template-columns: 1fr; gap: 1.2rem; }
  .region-card,
  .region-card .flip-card-inner { min-height: 440px; }
  .region-card:not(.is-flipped):hover .flip-card-inner { transform: none; }
  .impact-grid { gap: 0.7rem 0.85rem; }
  .impact-num { font-size: 1.55rem; }
  .flip-tip { font-size: 0.85rem; padding: 0.6rem 1.1rem 0.6rem 0.85rem; }
}
@media (max-width: 600px) {
  .origins-flip { grid-template-columns: 1fr; }
  .origin-card.flip-card,
  .origin-card.flip-card .flip-card-inner { min-height: 420px; }
}

/* ============================================================
   REGION CARDS - premium color-coded tints (responsibility.html
   "Mas y Mejor Cacao"). Brings story.html "Las regiones" feel:
   region-tinted gradient + colored top stripe + colored accents.
   data-region-accent map (matches the actual chocolate origin):
     paria      -> riocaribe green
     barlovento -> carenero orange
     andes      -> sanjoaquin purple
     surlago    -> surdellago rose
   ============================================================ */

.region-card[data-region-accent="paria"] {
  --rc: #4ea874;
  --rc-tint: rgba(78, 168, 116, 0.18);
  --rc-tint-strong: rgba(78, 168, 116, 0.26);
  --rc-glow: rgba(78, 168, 116, 0.35);
  --rc-cta-line: rgba(78, 168, 116, 0.28);
  --rc-cue-bg: rgba(78, 168, 116, 0.14);
  --rc-cue-bd: rgba(78, 168, 116, 0.40);
  --rc-special-bg: rgba(78, 168, 116, 0.10);
  --rc-impact-line: rgba(78, 168, 116, 0.22);
}
.region-card[data-region-accent="barlovento"] {
  --rc: #e08344;
  --rc-tint: rgba(217, 122, 60, 0.20);
  --rc-tint-strong: rgba(217, 122, 60, 0.28);
  --rc-glow: rgba(217, 122, 60, 0.38);
  --rc-cta-line: rgba(217, 122, 60, 0.30);
  --rc-cue-bg: rgba(217, 122, 60, 0.15);
  --rc-cue-bd: rgba(217, 122, 60, 0.42);
  --rc-special-bg: rgba(217, 122, 60, 0.11);
  --rc-impact-line: rgba(217, 122, 60, 0.24);
}
.region-card[data-region-accent="andes"] {
  --rc: #a988c4;
  --rc-tint: rgba(169, 136, 196, 0.20);
  --rc-tint-strong: rgba(169, 136, 196, 0.28);
  --rc-glow: rgba(169, 136, 196, 0.36);
  --rc-cta-line: rgba(169, 136, 196, 0.30);
  --rc-cue-bg: rgba(169, 136, 196, 0.15);
  --rc-cue-bd: rgba(169, 136, 196, 0.42);
  --rc-special-bg: rgba(169, 136, 196, 0.11);
  --rc-impact-line: rgba(169, 136, 196, 0.24);
}
.region-card[data-region-accent="surlago"] {
  --rc: #c25e6f;
  --rc-tint: rgba(194, 94, 111, 0.20);
  --rc-tint-strong: rgba(194, 94, 111, 0.28);
  --rc-glow: rgba(194, 94, 111, 0.36);
  --rc-cta-line: rgba(194, 94, 111, 0.30);
  --rc-cue-bg: rgba(194, 94, 111, 0.15);
  --rc-cue-bd: rgba(194, 94, 111, 0.42);
  --rc-special-bg: rgba(194, 94, 111, 0.11);
  --rc-impact-line: rgba(194, 94, 111, 0.24);
}

/* Front face -- region-tinted gradient + bold colored top stripe */
.region-card[data-region-accent] .region-front {
  background:
    radial-gradient(120% 65% at 50% -10%, var(--rc-tint) 0%, transparent 60%),
    linear-gradient(160deg, #261610 0%, #1a0e08 100%);
}
.region-card[data-region-accent] .region-front::before {
  height: 5px;
  background: var(--rc);
  opacity: 1;
  transition: height 0.3s ease, box-shadow 0.35s ease;
}
.region-card[data-region-accent]:hover .region-front::before,
.region-card[data-region-accent]:focus-visible .region-front::before {
  height: 7px;
  box-shadow: 0 0 18px var(--rc-glow);
}

/* Back face -- same colored signature so the flip feels continuous */
.region-card[data-region-accent] .region-back {
  background:
    radial-gradient(120% 65% at 50% -10%, var(--rc-tint-strong) 0%, transparent 60%),
    linear-gradient(160deg, #2c1a10 0%, #170c06 100%);
}
.region-card[data-region-accent] .region-back::before {
  height: 5px;
  background: var(--rc);
  opacity: 1;
}

/* Borders pick up region color on hover (more elegant than flat gold) */
.region-card[data-region-accent] .region-front,
.region-card[data-region-accent] .region-back {
  border-color: rgba(255, 255, 255, 0.06);
}
.region-card[data-region-accent]:hover .region-front,
.region-card[data-region-accent]:hover .region-back {
  border-color: var(--rc);
}

/* Accent text + chips + dividers shift to region color */
.region-card[data-region-accent] .region-num,
.region-card[data-region-accent] .region-num-back,
.region-card[data-region-accent] .region-back-eyebrow,
.region-card[data-region-accent] .region-cta,
.region-card[data-region-accent] .impact-num,
.region-card[data-region-accent] .impact-special-tag {
  color: var(--rc);
}
.region-card[data-region-accent] .region-front-cue {
  color: var(--rc);
  background: var(--rc-cue-bg);
  border-color: var(--rc-cue-bd);
}
.region-card[data-region-accent] .region-cta {
  border-top-color: var(--rc-cta-line);
}
.region-card[data-region-accent] .impact-grid {
  border-top-color: var(--rc-impact-line);
  border-bottom-color: var(--rc-impact-line);
}
.region-card[data-region-accent] .impact-special {
  background: var(--rc-special-bg);
  border-left-color: var(--rc);
}
/* ===== END REGION CARDS PREMIUM TINTS ===== */

/* ====== Product grid ====== */

.product-grid,
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
}
/* Simplified card style used on homepage / products page where cards do
   not wrap an image in .product-card-media. Images get a fixed aspect-ratio
   and the card gets its own padding so h4/p are legible on the cream section. */
.products-grid .product-card {
  background: var(--bg-paper);
  border: 1px solid var(--line-light);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.products-grid .product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(26, 14, 8, 0.25);
  border-color: var(--gold);
}
.products-grid .product-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bg-cream);
  display: block;
}
.products-grid .product-card h3,
.products-grid .product-card h4 {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink);
  margin: 1.6rem 1.6rem 0.6rem;
  line-height: 1.3;
}
.products-grid .product-card p {
  color: var(--ink-mute);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 1.6rem 1.8rem;
}
.product-card {
  background: var(--bg-paper);
  border: 1px solid var(--line-light);
  transition: all var(--t);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(26, 14, 8, 0.25);
  border-color: var(--gold);
}
.product-card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.product-card:hover .product-card-media img { transform: scale(1.06); }
.product-card-body {
  padding: 2rem 1.8rem 2.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-card-tag {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 0.7rem;
}
.product-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}
.product-card p {
  font-size: 0.95rem;
  color: var(--ink-mute);
  margin-bottom: 1.5rem;
  flex: 1;
}
.product-card-link {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: all var(--t);
}
.product-card-link:hover {
  color: var(--gold-deep);
  letter-spacing: 0.28em;
}

/* Origin list — used on Products page */
.origin-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.origin-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.5rem;
  padding: 3rem 2.5rem;
  border-bottom: 1px solid var(--line);
  align-items: start;
  background: var(--bg-cream);
}
.origin-row:nth-child(odd) {
  border-right: 1px solid var(--line);
}
.origin-row .swatch {
  aspect-ratio: 1 / 1;
  background: var(--bg-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line-light);
}
.origin-row .swatch img { width: 100%; height: 100%; object-fit: cover; }
.origin-row .badge {
  display: inline-block;
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--gold-deep);
  line-height: 1;
  margin-bottom: 0.6rem;
}
.origin-row h3 {
  font-size: 1.6rem;
  margin: 0 0 0.4rem;
  font-family: var(--serif);
}
.origin-row .origin-type {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.2rem;
  font-weight: 600;
}
.origin-row .notes {
  font-size: 0.98rem;
  color: var(--ink-soft);
  margin-bottom: 0.8rem;
}
.origin-row .meta {
  font-size: 0.85rem;
  color: var(--ink-mute);
  font-style: italic;
}

/* ====== Pull quote ====== */

.pullquote {
  background: #ece0c8; /* warm ivory — clearly distinct from page cream */
  color: var(--ink);
  padding: 6.5rem 0;
  position: relative;
  text-align: center;
  border-top: 1px solid rgba(138, 102, 40, 0.18);
  border-bottom: 1px solid rgba(138, 102, 40, 0.18);
}
.pullquote blockquote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.1vw, 2rem);
  line-height: 1.6;
  font-style: italic;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  color: var(--ink);
}
.pullquote blockquote p {
  margin: 0;
}
/* shared glyph styles — identical box for both quote marks so
   the visual gap between each mark and the text is the same */
.pullquote blockquote::before,
.pullquote blockquote p::after {
  display: block;
  width: 100%;
  height: 2.4rem;
  font-family: var(--serif);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--gold);
  font-style: normal;
  text-align: center;
  overflow: visible;
}
.pullquote blockquote::before {
  content: '\201C';
  margin: 0 auto 1.8rem;
}
.pullquote blockquote p::after {
  content: '\201D';
  margin: 1.8rem auto 0;
}
.pullquote cite {
  display: block;
  margin-top: 2.8rem;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
}
.pullquote cite::before {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
  margin: 0 auto 1.5rem;
}
@media (max-width: 820px) {
  .pullquote { padding: 5rem 0; }
  .pullquote blockquote::before,
  .pullquote blockquote p::after { font-size: 3.8rem; height: 2rem; }
  .pullquote blockquote::before { margin-bottom: 1.4rem; }
  .pullquote blockquote p::after { margin-top: 1.4rem; }
}
@media (max-width: 520px) {
  .pullquote { padding: 4rem 0; }
  .pullquote blockquote { font-size: 1.15rem; line-height: 1.6; }
  .pullquote blockquote::before,
  .pullquote blockquote p::after { font-size: 3rem; height: 1.6rem; }
  .pullquote blockquote::before { margin-bottom: 1.1rem; }
  .pullquote blockquote p::after { margin-top: 1.1rem; }
  .pullquote cite { margin-top: 2.2rem; font-size: 0.72rem; }
}

/* ====== Recipes ====== */

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.recipe-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
}
.recipe-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.recipe-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(26, 14, 8, 0.85) 100%);
}
.recipe-card-caption {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 2;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: #fff;
  line-height: 1.3;
}
.recipe-card-caption span {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.recipe-card:hover img { transform: scale(1.07); }

/* ====== Awards strip ====== */

.awards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  align-items: center;
  padding: 4rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.awards-item {
  text-align: center;
}
.awards-item img {
  margin: 0 auto 1rem;
  max-height: 70px;
  width: auto;
  opacity: 0.85;
  transition: opacity var(--t);
}
.awards-item:hover img { opacity: 1; }
.awards-item p {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
  font-weight: 500;
}

/* ====== CTA banner ====== */

/* Base: neutral, centered, roomy. Tone (cream/dark) comes from the
   .section-cream or .section-dark companion class on the same element. */
.cta-banner {
  text-align: center;
  padding: 7rem 0;
}
.cta-banner.section-dark {
  background:
    linear-gradient(135deg, rgba(26, 14, 8, 0.88), rgba(58, 31, 18, 0.88)),
    url('../images/cacao-grains-hero.jpg') center/cover no-repeat;
  color: var(--ink-on-dark);
}
.cta-banner.section-dark.cta-banner--agri {
  background:
    linear-gradient(135deg, rgba(26, 14, 8, 0.78), rgba(58, 31, 18, 0.82)),
    url('../images/cta-agri.jpg') center/cover no-repeat;
}
.cta-banner-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2rem;
}
.cta-banner h2,
.cta-banner .h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  margin-bottom: 1.2rem;
}
.cta-banner.section-dark h2,
.cta-banner.section-dark .h2 { color: var(--ink-on-dark); }
.cta-banner p {
  font-size: 1.08rem;
  margin: 0 auto 2rem;
  max-width: 620px;
}
.cta-banner.section-dark p { color: var(--ink-on-dark-mute); }

/* ====== Page hero (interior pages) ====== */

.page-hero {
  position: relative;
  padding: 7.5rem 0 5.5rem;
  background: var(--bg-alt);
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.page-hero .eyebrow { margin-bottom: 1.2rem; }
.page-hero h1,
.page-hero .display {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1.1rem;
}
.page-hero p,
.page-hero .lede {
  max-width: 640px;
  margin: 0 auto 0.5rem;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--ink-mute);
}

/* ====== Story timeline ====== */

.timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 0;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 110px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.timeline-item {
  position: relative;
  padding: 2rem 0 2rem 160px;
  margin-bottom: 1rem;
}
.timeline-year {
  position: absolute;
  left: 0;
  top: 2.2rem;
  width: 90px;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--gold-deep);
  font-weight: 500;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: 105px;
  top: 2.5rem;
  width: 11px;
  height: 11px;
  background: var(--gold);
  border-radius: 50%;
  border: 2px solid var(--bg);
}
.timeline-item h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.timeline-item p {
  margin: 0;
  font-size: 1rem;
  color: var(--ink-mute);
}

/* ====== Split grids (generic 2-col editorial) ====== */

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.story-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

/* ====== Contact page ====== */

.contact-grid .split-grid {
  grid-template-columns: 0.9fr 1.1fr;
  gap: 5rem;
}

.contact-info h3,
.contact-info h4 {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 1.8rem 0 0.3rem;
}
.contact-info h3:first-child,
.contact-info h4:first-child { margin-top: 0; }

.contact-address {
  font-style: normal;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0.6rem 0 2rem;
}
.contact-address strong { color: var(--ink); font-weight: 600; }

.contact-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem 2rem;
  margin: 1.4rem 0 2rem;
}
.contact-methods > div p { margin: 0.3rem 0 0; }
.contact-methods a {
  color: var(--gold-deep);
  border-bottom: 1px dotted var(--gold);
}
.contact-methods a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.contact-hours {
  font-size: 0.9rem;
  color: var(--ink-mute);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-light);
  margin: 1.4rem 0 0;
}

/* ====== Contact form ====== */

.contact-form {
  background: var(--bg-paper);
  padding: 2.8rem 2.6rem;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -40px rgba(26, 14, 8, 0.25);
}
.contact-form .eyebrow { margin-bottom: 0.5rem; }
.contact-form .h2 { margin-bottom: 1.8rem; }

.field-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}
.field-row label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.field-row input,
.field-row select,
.field-row textarea {
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 2px;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.field-row input:focus,
.field-row select:focus,
.field-row textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg-paper);
  box-shadow: 0 0 0 3px rgba(194, 150, 76, 0.18);
}
.field-row textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.6;
}

.field-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.field-row-split .field-row { margin-bottom: 1.2rem; }

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0.8rem 0 1.6rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.field-check input[type="checkbox"] {
  margin-top: 0.25rem;
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.form-note {
  margin: 1.2rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}

/* Keep legacy .form-row and .field styles working if any page still uses them */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.field label {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  background: var(--bg-paper);
  color: var(--ink);
  transition: all var(--t);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(194, 150, 76, 0.15);
}
.field textarea {
  resize: vertical;
  min-height: 140px;
}

/* ====== FAQ (contact page) ====== */

.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.faq-card {
  padding: 2rem 1.8rem;
  background: rgba(243, 231, 211, 0.05);
  border: 1px solid rgba(243, 231, 211, 0.12);
  border-radius: 2px;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.faq-card:hover {
  background: rgba(243, 231, 211, 0.08);
  border-color: rgba(216, 176, 106, 0.3);
  transform: translateY(-2px);
}
.faq-card h3 {
  font-size: 1.1rem;
  line-height: 1.3;
  margin-bottom: 0.7rem;
  color: var(--ink-on-dark);
}
.faq-card p {
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
  color: var(--ink-on-dark-mute);
}
.faq-card a {
  color: var(--gold-bright);
  border-bottom: 1px dotted var(--gold);
}
.faq-card a:hover { color: var(--ink-on-dark); }

/* ====== CTA banner container centering (used on contact + story pages) ====== */

.cta-banner .container {
  max-width: 760px;
}

/* ====== Footer ====== */

.site-footer {
  background: var(--bg-dark);
  color: var(--ink-on-dark-mute);
  padding: 5rem 0 2rem;
  border-top: 4px solid var(--gold);
}
/* Blanket: any link inside the footer should be legible on dark */
.site-footer a {
  color: var(--ink-on-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 231, 211, 0.18);
  transition: color var(--t), border-color var(--t);
}
.site-footer a:hover {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
}
.site-footer h4 {
  color: var(--ink-on-dark);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  font-weight: 600;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer li {
  margin-bottom: 0.65rem;
  font-size: 0.95rem;
  color: var(--ink-on-dark-mute);
}
.site-footer address {
  font-style: normal;
  color: var(--ink-on-dark-mute);
  font-size: 0.95rem;
  line-height: 1.75;
}
.site-footer .brand-mark.light {
  color: var(--ink-on-dark);
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  margin-bottom: 0.5rem;
}
.site-footer .footer-tag {
  color: var(--ink-on-dark-mute);
  font-size: 0.95rem;
  max-width: 280px;
  line-height: 1.55;
}
.site-footer .footer-bottom {
  color: var(--ink-on-dark-mute);
  font-size: 0.82rem;
}
.site-footer .footer-bottom a {
  border-bottom: none;
}
.footer-langs a { color: var(--ink-on-dark) \!important; }
.footer-langs .muted { color: var(--ink-on-dark-mute); opacity: 0.5; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}
.footer-brand img {
  height: 72px;
  margin-bottom: 1.2rem;
  width: auto;
}
.footer-brand p {
  color: var(--ink-on-dark-mute);
  font-size: 0.95rem;
  max-width: 320px;
}
.footer-col h4 {
  color: var(--ink-on-dark);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  font-family: var(--sans);
  font-weight: 600;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.7rem; font-size: 0.95rem; }
.footer-col a { color: var(--ink-on-dark-mute); transition: color var(--t); }
.footer-col a:hover { color: var(--gold-bright); }

.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--ink-on-dark-mute);
  flex-wrap: wrap;
  gap: 1rem;
}

/* ====== Reveal-on-scroll ====== */
/* Progressive enhancement: content is visible by default. JS adds the
   .js-reveal-ready class to <html>, which enables the hidden starting
   state so IntersectionObserver can animate it in. If JS fails to load
   or errors out, nothing gets hidden and the page still reads fine. */

.reveal {
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
}
.js-reveal-ready .reveal.visible,
.js-reveal-ready .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
}

/* ====== Responsive ====== */

/* ---- Large desktop → small desktop (≤1100) ---- */
@media (max-width: 1100px) {
  .nav-brand img { height: 64px; }

  section { padding: 6rem 0; }
  .section-header { margin: 0 auto 4rem; }

  .pillars { grid-template-columns: repeat(2, 1fr); }
  .origins { grid-template-columns: repeat(2, 1fr); }
  .product-grid,
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .recipe-grid { grid-template-columns: repeat(2, 1fr); }
  .awards { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }

  .split { gap: 4rem; }
  .split-media img { height: auto; }
  .origin-list { grid-template-columns: 1fr; }
  .origin-row:nth-child(odd) { border-right: none; }
}

/* ---- Tablet (≤960) ---- */
@media (max-width: 960px) {
  section { padding: 5.5rem 0; }
  .container,
  .container-narrow { padding: 0 1.8rem; }
  .section-header { margin: 0 auto 3.5rem; }

  .hero-inner { padding: 7rem 1.6rem 5rem; }
  .page-hero { padding: 6rem 0 4.5rem; }

  .split { gap: 3rem; }
  .split-media img { height: auto; }

  .timeline { padding: 1rem 0; }
  .timeline::before { left: 90px; }
  .timeline-item { padding: 1.5rem 0 1.5rem 130px; }
  .timeline-year { width: 76px; font-size: 1.4rem; }
  .timeline-item::before { left: 85px; top: 2rem; }

  .origin-row { grid-template-columns: 180px 1fr; gap: 2rem; padding: 2.5rem 2rem; }

  .product-card-body { padding: 1.8rem 1.6rem 2rem; }
  .pillar { padding: 2.6rem 1.8rem; }

  .faq-grid { gap: 1.2rem; }

  /* Process diagram: shrink icons so all 5 fit comfortably */
  .process { padding: 5rem 0 4rem; }
  .step-icon-wrap { width: 100px; height: 100px; margin-bottom: 1rem; }
  .step-icon { width: 78px; height: 78px; }
  .step-name { font-size: 1rem; }
  .step-label { font-size: 0.68rem; letter-spacing: 0.18em; }
  .process-step::after { top: 70px; width: 14px; height: 14px; }
}

/* ---- Large phone / small tablet (≤820) ---- */
@media (max-width: 820px) {
  section { padding: 5rem 0; }
  .container,
  .container-narrow { padding: 0 1.4rem; }
  .section-header { margin: 0 auto 3rem; }

  .nav-brand img { height: 52px; max-width: 240px; }
  .nav { padding: 1rem 1.4rem; gap: 1rem; flex-wrap: wrap; }
  .site-header { position: sticky; }

  .nav-toggle { display: flex; }

  /* Mobile nav dropdown — matches the dark header so the cream nav text reads. */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    background: rgba(26, 14, 8, 0.98);
    border-top: 1px solid rgba(243, 231, 211, 0.12);
    padding: 1.4rem 1.8rem 1.8rem;
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.55);
    z-index: 60;
  }
  .site-header.menu-open .nav-links { display: flex; }

  .nav-links li { width: 100%; margin-left: 0; }
  .nav-links .nav-cta-item { margin-left: 0; margin-top: 0.8rem; }

  /* Mobile nav links: full-width rows with subtle divider, color-only
     active state (no ::after underline to avoid overlap on stacked rows). */
  .nav-links li:not(.nav-cta-item) a {
    width: 100%;
    padding: 0.9rem 0;
    font-size: 0.95rem;
    letter-spacing: 0.18em;
    border-bottom: 1px solid rgba(243, 231, 211, 0.08);
  }
  .nav-links li:not(.nav-cta-item) a::after { display: none; }
  .nav-links li:not(.nav-cta-item):nth-last-child(2) a { border-bottom: none; }

  /* CTA stacks as a full-width button inside the dropdown. */
  .nav-cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.95rem 1.35rem;
  }

  .hero { min-height: 72vh; padding: 5rem 0 4rem; }
  .hero-inner { padding: 6rem 1.2rem 4.5rem; }
  .display { font-size: clamp(2.2rem, 7vw, 3.2rem); }
  .h2 { font-size: clamp(1.8rem, 4.5vw, 2.4rem); }
  .lede { font-size: 1.05rem; }
  .hero-scroll { display: none; }

  .page-hero { padding: 5.5rem 0 4rem; }

  /* Editorial 2-col layouts stack on mobile */
  .split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .split.reverse { direction: ltr; }
  .split-media img {
    height: auto;
  }
  .split-media::after { inset: 0.8rem; }

  .split-grid,
  .contact-grid .split-grid,
  .story-split { grid-template-columns: 1fr; gap: 3rem; }

  .contact-form { padding: 2rem 1.6rem; }

  .pillars,
  .origins,
  .product-grid,
  .products-grid,
  .recipe-grid,
  .faq-grid,
  .awards,
  .footer-grid { grid-template-columns: 1fr; }

  /* Process diagram: stack vertically, compact rows */
  .process { padding: 4.5rem 0 3.5rem; }
  .process-steps {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    margin-top: 2rem;
  }
  .process-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
    align-items: center;
    text-align: left;
    padding: 1.1rem 0.8rem;
    border-bottom: 1px solid rgba(243, 231, 211, 0.08);
  }
  .process-step:last-child { border-bottom: none; }
  .process-step:hover,
  .process-step:focus-visible { transform: none; }
  .process-step.is-active { background: rgba(194, 150, 76, 0.06); }

  .step-number {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    margin: 0;
    align-self: center;
  }
  .step-icon-wrap { display: none; }
  .step-label {
    grid-column: 2 / 3;
    margin: 0 0 0.25rem;
  }
  .step-name {
    grid-column: 2 / 3;
    font-size: 1.05rem;
  }
  .process-step::after { display: none; }

  .detail-card { padding: 1.5rem 1.5rem; }
  .detail-title { font-size: 1.35rem; }

  .footer-grid { gap: 2.2rem; }

  /* Timeline: collapse wide left gutter to sit closer to the rail */
  .timeline { padding: 0.5rem 0; }
  .timeline::before { left: 18px; }
  .timeline-item { padding: 1rem 0 1.5rem 48px; margin-bottom: 0.5rem; }
  .timeline-year {
    position: static;
    display: block;
    width: auto;
    font-size: 1.25rem;
    margin-bottom: 0.3rem;
  }
  .timeline-item::before { left: 13px; top: 1.4rem; }

  /* Origin rows stack the swatch above the text */
  .origin-row {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    padding: 2rem 1.8rem;
  }
  .origin-row .swatch { max-width: 180px; }

  .pullquote { font-size: clamp(1.3rem, 4vw, 1.8rem); }

  .contact-methods { grid-template-columns: 1fr 1fr; }
  .field-row-split { grid-template-columns: 1fr; gap: 0; }

  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
}

/* ---- Phone (≤640) ---- */
@media (max-width: 640px) {
  section { padding: 4.5rem 0; }
  .container,
  .container-narrow { padding: 0 1.2rem; }
  .section-header { margin: 0 auto 2.5rem; }

  .hero-inner { padding: 5rem 1rem 4rem; }
  .page-hero { padding: 5rem 0 3.5rem; }

  .display { font-size: clamp(2rem, 7.5vw, 2.7rem); }
  .h2 { font-size: clamp(1.6rem, 5.5vw, 2.1rem); }

  .split { gap: 2rem; }
  .split-media img { height: auto; }

  .pillar { padding: 2.2rem 1.4rem; }
  .product-card-body { padding: 1.5rem 1.3rem 1.8rem; }
  .faq-card { padding: 1.8rem 1.4rem; }

  .hero-actions .btn { width: 100%; }
  .hero-actions { gap: 0.8rem; }
}

/* ---- Very narrow (≤480) ---- */
@media (max-width: 480px) {
  .container,
  .container-narrow { padding: 0 1.1rem; }
  section { padding: 4rem 0; }
  .section-header { margin: 0 auto 2.2rem; }
  .page-hero { padding: 4.5rem 0 3.5rem; }

  .display { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .h2 { font-size: clamp(1.6rem, 6vw, 2rem); }
  .lede { font-size: 1rem; }

  .btn-lg { width: 100%; }
  .btn { padding: 0.85rem 1.4rem; font-size: 0.78rem; }

  .contact-methods { grid-template-columns: 1fr; }
  .contact-form { padding: 1.8rem 1.3rem; }
  .faq-card { padding: 1.6rem 1.4rem; }

  .origin-row { padding: 1.8rem 1.4rem; }
  .origin-row .badge { font-size: 1.9rem; }
  .origin-row h3 { font-size: 1.35rem; }

  .timeline-item { padding-left: 42px; }
  .timeline::before { left: 14px; }
  .timeline-item::before { left: 9px; }

  .pullquote { padding: 0 0.5rem; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }

  .process { padding: 4rem 0 3rem; }
  .process-title { font-size: 1.7rem; }
  .step-number { font-size: 0.78rem; }
  .step-label { font-size: 0.66rem; }
  .step-name { font-size: 1rem; }
  .detail-card { padding: 1.3rem 1.2rem; }
}

/* =========================================================
   Cacao Origins Map (interactive section)
   ========================================================= */

/* ============ Cacao Map Section ============ */

/* ============ Cacao Map ============ */

.cacao-map {
  /* Locally pin the preview's exact palette so text colors match the original map */
  --cream:       #f3e7d3;
  --cream-mute:  #b9a079;
  --gold:        #c2964c;
  --gold-bright: #e5b864;
  --gold-deep:   #8a6628;

  background:
    radial-gradient(ellipse at 30% 20%, rgba(194, 150, 76, 0.08), transparent 60%),
    radial-gradient(ellipse at 75% 85%, rgba(138, 90, 60, 0.12), transparent 55%),
    linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-deep) 55%, var(--bg-rich) 100%);
  padding: 5rem 2.5rem 4.5rem;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(243, 231, 211, 0.06);
}

.cacao-map-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3rem;
  position: relative;
  z-index: 1;
}
.cacao-map-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 0.9rem;
}
.cacao-map-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.15;
  margin: 0 0 0.9rem;
  color: var(--cream);
}
.cacao-map-title em { color: var(--gold-bright); font-style: italic; }
.cacao-map-lede {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cream-mute);
  margin: 1rem 0 0;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.cacao-map-divider {
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: 1.4rem auto 0;
  opacity: 0.55;
}

/* ------- Stage: map + side card ------- */

.cacao-map-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.cacao-map-stage > .cacao-detail {
  max-width: 460px;
  justify-self: start;
  width: 100%;
}

.cacao-map .cacao-svg-wrap {
  position: relative;
  width: 100%;
}
.cacao-map .cacao-svg-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.35));
}

/* Venezuela body */
.cacao-map .vz-outline {
  fill: url(#vzEarth);
  stroke: var(--gold-bright);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cacao-map .vz-esequibo-line {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0.55;
  pointer-events: none;
}
.cacao-map .vz-esequibo-label {
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 600;
  fill: var(--gold-bright);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.9;
  pointer-events: none;
}
.cacao-map .vz-esequibo-sublabel {
  font-family: var(--sans);
  font-size: 6.5px;
  font-style: italic;
  fill: var(--cream-mute);
  letter-spacing: 0.12em;
  opacity: 0.75;
  pointer-events: none;
}
.cacao-map .vz-orinoco {
  stroke: var(--gold);
  stroke-width: 1;
  fill: none;
  opacity: 0.35;
}
.cacao-map .vz-river-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 8px;
  fill: var(--gold);
  opacity: 0.55;
  letter-spacing: 0.08em;
  pointer-events: none;
}
.cacao-map .vz-feature-label {
  font-family: var(--sans);
  font-size: 7px;
  fill: var(--cream-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
  pointer-events: none;
}
.cacao-map .vz-compass {
  opacity: 0.6;
}
.cacao-map .vz-compass-text {
  font-family: var(--serif);
  font-size: 9px;
  fill: var(--gold-bright);
  letter-spacing: 0.18em;
}

/* Region markers */
.cacao-map .region-marker {
  cursor: pointer;
  outline: none;
}
.cacao-map .region-hit {
  fill: transparent;
  pointer-events: all;
}
.cacao-map .region-pulse {
  fill: var(--gold-bright);
  opacity: 0.12;
  transform-origin: center;
  transform-box: fill-box;
  animation: cacaoPulse 3s var(--ease) infinite;
  pointer-events: none;
}
.cacao-map .region-marker.is-active .region-pulse {
  opacity: 0.2;
  animation-duration: 2s;
}
@keyframes cacaoPulse {
  0%   { transform: scale(0.6); opacity: 0.28; }
  100% { transform: scale(1.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .region-pulse { animation: none; opacity: 0.18; }
}
.cacao-map .region-ring {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 0.9;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(0.85);
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease), stroke-width 0.45s var(--ease);
  pointer-events: none;
}
.region-marker:hover .region-ring,
.region-marker:focus-visible .region-ring,
.cacao-map .region-marker.is-active .region-ring {
  opacity: 0.95;
  transform: scale(1.55);
  stroke-width: 1.2;
}
.cacao-map .region-dot {
  fill: var(--gold-bright);
  stroke: var(--bg-dark);
  stroke-width: 1.4;
  transition: transform 0.35s var(--ease), fill 0.35s var(--ease), stroke 0.35s var(--ease), r 0.35s var(--ease);
  transform-origin: center;
  transform-box: fill-box;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.region-marker:hover .region-dot,
.region-marker:focus-visible .region-dot,
.cacao-map .region-marker.is-active .region-dot {
  fill: var(--cream);
  stroke: var(--gold-bright);
  stroke-width: 2;
  transform: scale(1.4);
}
.region-marker {
  cursor: pointer;
  outline: none;
}
.region-marker:focus-visible {
  outline: 2px dashed var(--gold-bright);
  outline-offset: 4px;
}

/* ================================================================
   CACAO MAP — canonical styles mirroring cacao-map-preview.html
   All selectors scoped under .cacao-map / .cacao-detail so they
   don't collide with the process-diagram's own .detail-card.
   ================================================================ */

/* SVG label-line / labels — hidden by default, revealed on hover/active */
.cacao-map .region-label-line {
  stroke: var(--gold-bright);
  stroke-width: 0.7;
  opacity: 0;
  transition: opacity 0.3s var(--ease), stroke-width 0.3s var(--ease);
  pointer-events: none;
}
.cacao-map .region-marker.is-active .region-label-line,
.cacao-map .region-marker:hover .region-label-line,
.cacao-map .region-marker:focus-visible .region-label-line {
  opacity: 0.9;
  stroke-width: 0.9;
}

.cacao-map .region-label {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  fill: var(--gold-bright);
  letter-spacing: 0.01em;
  opacity: 0;
  transition: opacity 0.35s var(--ease), font-size 0.35s var(--ease);
  pointer-events: none;
  paint-order: stroke fill;
  stroke: rgba(42, 22, 12, 0.92);
  stroke-width: 4px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cacao-map .region-marker:hover .region-label,
.cacao-map .region-marker:focus-visible .region-label,
.cacao-map .region-marker.is-active .region-label {
  opacity: 1;
}

.cacao-map .region-sublabel {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  fill: var(--cream);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
  paint-order: stroke fill;
  stroke: rgba(42, 22, 12, 0.9);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.cacao-map .region-marker:hover .region-sublabel,
.cacao-map .region-marker:focus-visible .region-sublabel,
.cacao-map .region-marker.is-active .region-sublabel {
  opacity: 0.85;
}

.cacao-map .vz-neighbor-label {
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 400;
  fill: var(--gold-deep);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.48;
}

/* ------- Detail side card ------- */
.cacao-map .cacao-detail {
  position: relative;
  position: relative;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
.cacao-detail .detail-card {
  padding: 2rem 2rem 2.2rem;
  background: linear-gradient(180deg, rgba(243, 231, 211, 0.035) 0%, rgba(243, 231, 211, 0.015) 100%);
  border-left: 2px solid var(--gold-bright);
  position: relative;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  /* Override process-diagram shared .detail-card default (opacity:0) */
  opacity: 1;
  transform: none;
  max-width: none;
  margin: 0;
  text-align: left;
}
.cacao-detail .detail-card.is-changing {
  opacity: 0;
  transform: translateY(8px);
}

.cacao-detail .detail-header {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.cacao-detail .detail-number {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-bright);
  font-feature-settings: "lnum" 1;
}
.cacao-detail .detail-region {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream-mute);
  margin: 0;
  flex: 1;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(243, 231, 211, 0.1);
}
.cacao-detail .detail-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--cream);
  margin: 0 0 0.4rem;
}
.cacao-detail .detail-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold);
  margin: 0 0 1.2rem;
}
.cacao-detail .detail-body {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--cream-mute);
  margin: 0 0 1.4rem;
}
.cacao-detail .detail-notes {
  list-style: none;
  padding: 1.1rem 0 0;
  margin: 0;
  border-top: 1px solid rgba(243, 231, 211, 0.08);
}
.cacao-detail .detail-notes li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  font-size: 0.88rem;
}
.cacao-detail .detail-notes li + li {
  border-top: 1px dashed rgba(243, 231, 211, 0.06);
}
.cacao-detail .detail-notes li .note-label {
  color: var(--cream-mute);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 500;
  flex-shrink: 0;
}
.cacao-detail .detail-notes li .note-value {
  color: var(--cream);
  font-family: var(--serif);
  font-style: italic;
  text-align: right;
}

/* ----- Region tab-rail (named navigation above the detail card) ----- */
.cacao-detail .region-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid rgba(243, 231, 211, 0.1);
  position: relative;
}
.cacao-detail .region-tab {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7rem 0.5rem 0.85rem;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--cream-mute);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
  margin-bottom: -1px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
}
.cacao-detail .region-tab:hover {
  color: var(--cream);
}
.cacao-detail .region-tab:focus-visible {
  outline: none;
  color: var(--cream);
  background: rgba(229, 184, 100, 0.05);
}
.cacao-detail .region-tab.is-active {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
}

/* ----- Bottom navigation row ----- */
.cacao-detail .detail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.8rem;
  padding-top: 0.5rem;
}
.cacao-detail .detail-progress {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--cream-mute);
  font-feature-settings: "lnum" 1;
}
.cacao-detail .detail-progress #detailProgress {
  color: var(--gold-bright);
  font-weight: 500;
}
.cacao-detail .detail-progress-sep {
  margin: 0 0.35rem;
  opacity: 0.5;
}
.cacao-detail .detail-arrows {
  display: flex;
  gap: 0.35rem;
}
.cacao-detail .detail-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(243, 231, 211, 0.15);
  background: transparent;
  color: var(--cream-mute);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.cacao-detail .detail-arrow:hover:not(:disabled),
.cacao-detail .detail-arrow:focus-visible:not(:disabled) {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  background: rgba(229, 184, 100, 0.06);
  outline: none;
}
.cacao-detail .detail-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.cacao-detail .detail-arrow svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* ----- Legend ----- */
.cacao-map .map-legend {
  margin: 2.2rem auto 0;
  max-width: 720px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--cream-mute);
  opacity: 0.7;
  position: relative;
  z-index: 1;
}
.cacao-map .map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  letter-spacing: 0.08em;
}
.cacao-map .map-legend-swatch {
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--gold-bright);
}
.cacao-map .map-legend-swatch.is-dashed {
  height: 0;
  background: transparent;
  border-top: 1px dashed var(--gold-bright);
  opacity: 0.7;
}

/* (legacy) detail-hint preserved for compatibility — no longer used in markup */
.cacao-map .detail-hint {
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-mute);
  opacity: 0.55;
  margin: 1rem 0 0;
  position: relative;
  z-index: 1;
}

/* Focus visible on markers */
.cacao-map .region-marker:focus-visible .region-hit {
  stroke: var(--gold-bright);
  stroke-width: 1.2;
  stroke-dasharray: 2 2;
}

/* Responsive */
@media (max-width: 960px) {
  .cacao-map { padding: 4rem 1.8rem 3.5rem; }
  .cacao-map-stage {
    grid-template-columns: 1fr;
    gap: 2.2rem;
    max-width: none;
  }
  .cacao-map-stage > .cacao-detail {
    max-width: none;
    justify-self: stretch;
  }
  .cacao-map .cacao-detail  { min-height: auto; }
  .cacao-detail .detail-card { padding: 1.8rem 1.6rem; }
  .cacao-detail .detail-title { font-size: 1.55rem; }
  .cacao-detail .detail-number { font-size: 2rem; }
}

@media (max-width: 520px) {
  .cacao-map { padding: 2.8rem 1.1rem 2.2rem; }
  .cacao-map-title { font-size: 1.65rem; }
  .cacao-map .region-label { font-size: 12px; }
  .cacao-map .region-sublabel { font-size: 7px; }
  .cacao-map .vz-neighbor-label { font-size: 7px; }
  .cacao-detail .detail-card { padding: 1.5rem 1.3rem; }
  .cacao-detail .detail-title { font-size: 1.4rem; }
  .cacao-detail .detail-number { font-size: 1.7rem; }
  .cacao-detail .region-tab { font-size: 0.6rem; padding: 0.55rem 0.25rem 0.7rem; letter-spacing: 0.04em; }
  .cacao-map .map-legend { font-size: 0.66rem; gap: 1rem; }
  .cacao-detail .detail-arrow { width: 34px; height: 34px; }
}

/* ================================================================
   HEADER LOGO — prevent overflow past the sticky header on mobile
   ================================================================ */
@media (max-width: 820px) {
  .header .nav .logo img {
    max-height: 44px;
    width: auto;
    height: auto;
  }
  .header .nav .logo {
    flex-shrink: 1;
    min-width: 0;
  }
}

/* ===== PRODUCTS PAGE — REGION SECTIONS + MODAL ===== */

/* ----- Hero anchors row ----- */
.products-hero .region-anchors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.7rem;
  margin: 2.6rem auto 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  max-width: 760px;
}
.products-hero .region-anchors a {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.2rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              background 0.3s var(--ease), transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
.products-hero .region-anchors a:hover,
.products-hero .region-anchors a:focus-visible {
  color: var(--paper, #fbf8f1);
  border-color: var(--gold);
  background: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(168, 121, 47, 0.6);
  outline: none;
}

/* ----- Region section ----- */
.region-section {
  padding: 5.5rem 0 5rem;
  scroll-margin-top: 80px;
}
.region-section .region-header {
  max-width: 720px;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.region-section .region-header .eyebrow {
  display: block;
  margin-bottom: 0.8rem;
}
.region-section .region-header h2 {
  margin: 0 0 0.6rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  line-height: 1.2;
}
.region-section .region-header .divider {
  width: 38px;
  height: 1px;
  background: var(--gold);
  margin: 1.1rem auto 1.4rem;
  opacity: 0.7;
}
.region-section .region-header .lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-mute);
  margin: 0;
}

/* When a region-section sits on a dark background (.section-cream is light, default body cream) */

/* ----- Product grid ----- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.product-grid-single {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

/* ----- Product card ----- */
.product-card {
  background: var(--bg-paper, #fbf8f1);
  border: 1px solid var(--line, rgba(31, 22, 17, 0.08));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 38px -28px rgba(31, 22, 17, 0.35);
  border-color: rgba(168, 121, 47, 0.35);
}
.product-card .product-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(180deg, #f4ecdc 0%, #ece1c8 100%);
}
.product-card .product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 1.2rem;
  transition: transform 0.7s var(--ease);
}
.product-card:hover .product-image img {
  transform: scale(1.04);
}
.product-card .product-meta {
  padding: 1.6rem 1.6rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-align: left;
  border-top: 1px solid rgba(31, 22, 17, 0.08);
}
.product-card .product-region {
  font-family: var(--sans);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}
.product-card .product-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.product-card .product-pct {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-mute);
  margin: 0 0 0.2rem;
}
.product-card .product-pct span {
  color: var(--gold);
  font-weight: 600;
  font-feature-settings: "lnum" 1;
}
.product-card .product-blurb {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-mute);
  margin: 0.2rem 0 0.4rem;
}
.product-card .product-cta {
  align-self: flex-start;
  margin-top: 0.6rem;
  padding: 0.55rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), gap 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.product-card .product-cta:hover,
.product-card .product-cta:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
  outline: none;
  gap: 0.6rem;
}
.product-card .product-cta span { transition: transform 0.3s var(--ease); }
.product-card .product-cta:hover span { transform: translateX(2px); }

/* Feature card (Sur del Lago / San Joaquín — single per region) */
.product-card-feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  border: 1px solid rgba(31, 22, 17, 0.1);
}
.product-card-feature .product-image {
  aspect-ratio: auto;
  min-height: 360px;
}
.product-card-feature .product-meta {
  border-top: 0;
  border-left: 1px solid rgba(31, 22, 17, 0.08);
  padding: 2.4rem 2.2rem;
  justify-content: center;
  gap: 0.6rem;
}
.product-card-feature .product-name { font-size: 1.95rem; }

/* Region section variant on cream background — already inherits .section-cream tokens */

/* ================================================================
   PRODUCT MODAL
   ================================================================ */
.product-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 3vw, 2rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.product-modal[hidden] { display: none; }
.product-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.product-modal .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 8, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.product-modal .modal-dialog {
  position: relative;
  background: var(--bg-paper, #fbf8f1);
  width: 100%;
  max-width: 980px;
  max-height: calc(100vh - 4rem);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border: 1px solid rgba(168, 121, 47, 0.2);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transform: translateY(14px) scale(0.985);
  transition: transform 0.4s var(--ease);
}
.product-modal.is-open .modal-dialog { transform: translateY(0) scale(1); }
.product-modal .modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(31, 22, 17, 0.12);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.product-modal .modal-close:hover,
.product-modal .modal-close:focus-visible {
  background: var(--ink);
  color: var(--cream);
  outline: none;
}

/* ----- Modal gallery (left side) ----- */
.modal-gallery {
  position: relative;
  background: linear-gradient(180deg, #f4ecdc 0%, #ece1c8 100%);
  display: flex;
  flex-direction: column;
  min-height: 360px;
  min-width: 0;
  overflow: hidden;
}
.modal-gallery .gallery-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.modal-gallery .gallery-track {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-gallery .gallery-track img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 1.6rem;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.modal-gallery .gallery-track img.is-active {
  opacity: 1;
  position: relative;
}
.modal-gallery .gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(31, 22, 17, 0.1);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.modal-gallery .gallery-arrow:hover:not(:disabled) {
  background: var(--ink);
  color: var(--cream);
}
.modal-gallery .gallery-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
.modal-gallery .gallery-prev { left: 0.7rem; }
.modal-gallery .gallery-next { right: 0.7rem; }
.modal-gallery .gallery-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem 0 1.1rem;
  background: linear-gradient(180deg, transparent 0%, rgba(244, 236, 220, 0.35) 100%);
}
.modal-gallery .gallery-dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  background: rgba(31, 22, 17, 0.2);
  padding: 0;
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.modal-gallery .gallery-dots button:hover { background: rgba(31, 22, 17, 0.4); }
.modal-gallery .gallery-dots button.is-active {
  background: var(--gold);
  transform: scale(1.25);
}
.modal-gallery.is-single .gallery-arrow,
.modal-gallery.is-single .gallery-dots { display: none; }

/* ----- Modal info (right side) ----- */
.modal-info {
  padding: 2.2rem 2.2rem 2.4rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 121, 47, 0.4) transparent;
  /* CSS Grid scroll fix: grid items default to min-height: auto which prevents inner overflow */
  min-height: 0;
  min-width: 0;
  max-height: 100%;
}
.modal-info::-webkit-scrollbar { width: 8px; }
.modal-info::-webkit-scrollbar-thumb { background: rgba(168, 121, 47, 0.4); border-radius: 4px; }
.modal-info::-webkit-scrollbar-track { background: transparent; }
.modal-info .modal-region {
  margin: 0;
}
.modal-info .modal-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--ink);
  margin: 0.3rem 0 0.2rem;
}
.modal-info .modal-pct {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-mute);
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(31, 22, 17, 0.1);
}
.modal-info .modal-pct strong {
  color: var(--gold);
  font-weight: 600;
  font-feature-settings: "lnum" 1;
}
.modal-info .modal-desc {
  font-family: var(--serif);
  font-size: 0.96rem;
  line-height: 1.78;
  color: var(--ink);
  margin: 0 0 1.4rem;
}
.modal-info .modal-section {
  margin-bottom: 1.3rem;
}
.modal-info .modal-section:last-child { margin-bottom: 0; }
.modal-info .modal-subhead {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.7rem;
  font-weight: 600;
}
.modal-info .modal-tech {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.88rem;
}
.modal-info .modal-tech td {
  padding: 0.5rem 0;
  border-top: 1px solid rgba(31, 22, 17, 0.07);
  color: var(--ink);
}
.modal-info .modal-tech td:first-child {
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.modal-info .modal-tech td:last-child {
  text-align: right;
  font-feature-settings: "lnum" 1;
  font-weight: 500;
}
.modal-info .modal-tech tr:first-child td { border-top: 0; }
.modal-info .modal-apps {
  font-family: var(--serif);
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}
.modal-info .modal-pres {
  list-style: none;
  padding: 0;
  margin: 0;
}
.modal-info .modal-pres li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-top: 1px dashed rgba(31, 22, 17, 0.08);
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--ink);
}
.modal-info .modal-pres li:first-child { border-top: 0; }
.modal-info .modal-pres li .pres-label { color: var(--ink-mute); }
.modal-info .modal-pres li .pres-value {
  font-feature-settings: "lnum" 1;
  font-weight: 500;
  text-align: right;
}

/* When a section is hidden (no data), JS toggles .is-hidden */
.modal-info .modal-section.is-hidden { display: none; }

/* ================================================================
   RESPONSIVE BREAKPOINTS — products page
   ================================================================ */
@media (max-width: 960px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
  }
  .product-grid-single { grid-template-columns: 1fr; }

  .product-card-feature {
    grid-template-columns: 1fr;
  }
  .product-card-feature .product-image {
    min-height: 320px;
    aspect-ratio: 4 / 3;
  }
  .product-card-feature .product-meta {
    border-left: 0;
    border-top: 1px solid rgba(31, 22, 17, 0.08);
    padding: 1.8rem 1.6rem;
  }

  .product-modal .modal-dialog {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(280px, 36vh) 1fr;
    max-height: calc(100vh - 1.5rem);
  }
  .modal-gallery { min-height: 280px; }
  .modal-info { padding: 1.6rem 1.4rem 1.8rem; }
  .modal-info .modal-name { font-size: 1.65rem; }
}

@media (max-width: 620px) {
  .region-section { padding: 3.5rem 0 3.2rem; }
  .region-section .region-header { margin-bottom: 2.2rem; }
  .product-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    max-width: 420px;
  }
  .product-card .product-name { font-size: 1.4rem; }
  .product-card .product-meta { padding: 1.3rem 1.3rem 1.5rem; }

  .products-hero .region-anchors a {
    font-size: 0.65rem;
    padding: 0.5rem 0.85rem;
    letter-spacing: 0.14em;
  }

  .modal-gallery .gallery-arrow {
    width: 34px;
    height: 34px;
  }
  .product-modal .modal-close {
    width: 34px;
    height: 34px;
    top: 0.6rem;
    right: 0.6rem;
  }
}

/* ===== END PRODUCTS PAGE ===== */

/* ===== PRODUCTS PAGE V2 — UX/UI ENHANCEMENTS ===== */

/* Sticky region nav — appears after hero scrolls past */
.sticky-region-nav {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(251, 248, 241, 0.96);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  pointer-events: none;
}
.sticky-region-nav.is-visible {
  transform: translateY(0);
  box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}
.sticky-region-nav .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.4rem;
  flex-wrap: wrap;
  padding: 0.7rem 1.5rem;
}
.sticky-region-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-mute);
  text-decoration: none;
  border-radius: 999px;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
  position: relative;
}
.sticky-region-nav a:hover { color: var(--ink); background: rgba(168, 121, 47, 0.08); }
.sticky-region-nav a.is-active {
  color: var(--paper, #fbf8f1);
  background: var(--gold);
}

/* % Cacao corner badge on product cards */
.product-card .pct-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(31, 22, 17, 0.92);
  color: var(--gold-bright, #f0d089);
  font-family: var(--sans);
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.product-card .pct-badge .pct-num {
  font-size: 1.18rem;
  font-weight: 600;
  font-feature-settings: "lnum" 1;
}
.product-card .pct-badge .pct-label {
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 0.18rem;
  color: rgba(243, 231, 211, 0.75);
}
.product-card .pct-badge.is-white {
  background: rgba(251, 248, 241, 0.95);
  color: var(--ink);
  border: 1px solid rgba(168, 121, 47, 0.25);
}
.product-card .pct-badge.is-white .pct-label { color: var(--ink-mute); }

/* Award ribbon — top-right of card */
.product-card .award-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem 0.4rem 0.55rem;
  background: linear-gradient(135deg, var(--gold) 0%, #c69445 100%);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 6px 16px -6px rgba(168, 121, 47, 0.65);
  pointer-events: none;
}
.product-card .award-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.product-card .award-badge .award-count {
  font-feature-settings: "lnum" 1;
  font-weight: 700;
}

/* Type chip — small label inside meta (Oscuro / Leche / Blanco) */
.product-card .type-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  border: 1px solid transparent;
}
.product-card .type-chip.is-oscuro {
  background: rgba(31, 22, 17, 0.88);
  color: var(--gold-bright, #f0d089);
}
.product-card .type-chip.is-leche {
  background: #d6a872;
  color: #3a2511;
}
.product-card .type-chip.is-blanco {
  background: #f5ecd9;
  color: #6b5226;
  border-color: rgba(168, 121, 47, 0.3);
}

/* Reserva especial badge for SDL & SJ feature cards */
.product-card-feature .reserva-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  top: auto;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem 0.55rem 0.85rem;
  background: linear-gradient(135deg, #1f1611 0%, #3a2918 100%);
  color: var(--gold-bright, #f0d089);
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 0 12px 0 0;
}
.product-card-feature .reserva-badge svg {
  width: 11px;
  height: 11px;
  color: var(--gold);
}

/* Make whole card clickable by overlaying an invisible link */
.product-card { position: relative; }
.product-card .card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0;
  color: transparent;
  width: 100%;
  height: 100%;
}
.product-card .card-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -4px;
  border-radius: 4px;
}
/* CTA button stays visually a button but isn't a separate target */
.product-card .product-cta {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* Per-region accent stripe on top of region-section */
.region-section { position: relative; }
.region-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  background: var(--gold);
  border-radius: 0 0 6px 6px;
  opacity: 0.85;
}
/* Per-region accent stripe — palette unified with story.html "Las regiones" cards */
#carenero::before    { background: linear-gradient(90deg, #e08344 0%, #c25524 100%); }
#riocaribe::before   { background: linear-gradient(90deg, #4ea874 0%, #2d7a4f 100%); }
#surdellago::before  { background: linear-gradient(90deg, #c25e6f 0%, #7a2935 100%); }
#sanjoaquin::before  { background: linear-gradient(90deg, #a988c4 0%, #5e3e7a 100%); }

/* ============================================================
   PRODUCTS PAGE — REGION-TINTED SECTION BACKGROUNDS
   ------------------------------------------------------------
   Each region section starts with a soft colored radial glow
   (the unified palette from story.html "Las regiones" cards +
   index.html cacao map) and fades INTO the deep cacao brown
   (--bg-dark, #1a0e08) — same surface the cards on story.html
   sit against. The colored ::before stripe still marks the
   start of the section.
   ============================================================ */
#carenero.region-section,
#riocaribe.region-section,
#surdellago.region-section,
#sanjoaquin.region-section {
  background-color: var(--bg-dark);
  color: var(--ink-on-dark);
}
#carenero.region-section {
  background:
    radial-gradient(ellipse 95% 55% at 50% 0%, rgba(224, 131, 68, 0.42) 0%, rgba(224, 131, 68, 0.10) 35%, rgba(26, 14, 8, 0) 70%),
    var(--bg-dark);
}
#riocaribe.region-section {
  background:
    radial-gradient(ellipse 95% 55% at 50% 0%, rgba(78, 168, 116, 0.42) 0%, rgba(78, 168, 116, 0.10) 35%, rgba(26, 14, 8, 0) 70%),
    var(--bg-dark);
}
#surdellago.region-section {
  background:
    radial-gradient(ellipse 95% 55% at 50% 0%, rgba(194, 94, 111, 0.45) 0%, rgba(194, 94, 111, 0.11) 35%, rgba(26, 14, 8, 0) 70%),
    var(--bg-dark);
}
#sanjoaquin.region-section {
  background:
    radial-gradient(ellipse 95% 55% at 50% 0%, rgba(169, 136, 196, 0.48) 0%, rgba(169, 136, 196, 0.12) 35%, rgba(26, 14, 8, 0) 70%),
    var(--bg-dark);
}

/* Region section text — light treatment to read on the dark cacao surface */
#carenero.region-section,
#riocaribe.region-section,
#surdellago.region-section,
#sanjoaquin.region-section {
  /* header text */
}
#carenero.region-section .region-header h2,
#riocaribe.region-section .region-header h2,
#surdellago.region-section .region-header h2,
#sanjoaquin.region-section .region-header h2,
#carenero.region-section .region-header .eyebrow,
#riocaribe.region-section .region-header .eyebrow,
#surdellago.region-section .region-header .eyebrow,
#sanjoaquin.region-section .region-header .eyebrow {
  color: var(--ink-on-dark);
}
#carenero.region-section .region-header .lede,
#riocaribe.region-section .region-header .lede,
#surdellago.region-section .region-header .lede,
#sanjoaquin.region-section .region-header .lede {
  color: var(--ink-on-dark-mute);
}
#carenero.region-section .region-header .divider,
#riocaribe.region-section .region-header .divider,
#surdellago.region-section .region-header .divider,
#sanjoaquin.region-section .region-header .divider {
  background: var(--gold-bright, #f0d089);
  opacity: 0.85;
}

/* Lift the colored top stripe slightly so it reads strong on the dark surface */
#carenero.region-section::before,
#riocaribe.region-section::before,
#surdellago.region-section::before,
#sanjoaquin.region-section::before {
  height: 4px;
  width: 84px;
  opacity: 1;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
}

/* Back-to-top floating button */
.back-to-top {
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  z-index: 60;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold-bright, #f0d089);
  border: 1px solid rgba(243, 231, 211, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  pointer-events: none;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
              background 0.3s var(--ease);
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover { background: var(--gold); color: #fff; }
.back-to-top svg { width: 16px; height: 16px; }

/* Modal close: better visual prominence */
.product-modal .modal-close {
  background: rgba(31, 22, 17, 0.9);
  color: #fff;
  border: 1px solid rgba(243, 231, 211, 0.2);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
}
.product-modal .modal-close:hover {
  background: var(--gold);
  color: #fff;
}

/* Modal: award notice strip if applicable */
.modal-info .modal-award {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  margin: -0.2rem 0 1.2rem;
  background: linear-gradient(135deg, rgba(168, 121, 47, 0.12) 0%, rgba(168, 121, 47, 0.06) 100%);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink);
  line-height: 1.45;
}
.modal-info .modal-award svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gold);
}
.modal-info .modal-award.is-hidden { display: none; }

@media (max-width: 620px) {
  .sticky-region-nav { top: 60px; }
  .sticky-region-nav .container { padding: 0.55rem 0.8rem; gap: 0.3rem; }
  .sticky-region-nav a {
    font-size: 0.6rem;
    padding: 0.4rem 0.7rem;
    letter-spacing: 0.12em;
  }
  .product-card .pct-badge {
    width: 54px;
    height: 54px;
    top: 0.7rem;
    left: 0.7rem;
  }
  .product-card .pct-badge .pct-num { font-size: 1rem; }
  .product-card .award-badge {
    top: 0.7rem;
    right: 0.7rem;
    font-size: 0.55rem;
    padding: 0.32rem 0.55rem 0.32rem 0.42rem;
  }
  .back-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 42px;
    height: 42px;
  }
}

/* ===== END PRODUCTS PAGE V2 ===== */

/* ===== PRODUCTS PAGE V3 — AWARDS SYSTEM + SENSORY RADAR ===== */

/* ---- Hero awards proof strip ---- */
.awards-strip {
  background: linear-gradient(180deg, rgba(101, 67, 33, 0.06), rgba(101, 67, 33, 0.02));
  border-top: 1px solid rgba(101, 67, 33, 0.10);
  border-bottom: 1px solid rgba(101, 67, 33, 0.10);
  padding: 1.4rem 0;
}
.awards-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  text-align: center;
}
.awards-medals {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.medal-orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 -2px 4px rgba(0, 0, 0, 0.18);
}
.medal-orb svg { width: 22px; height: 22px; }
.medal-orb.is-gold   { background: linear-gradient(180deg, #f5d772, #c69a2b); }
.medal-orb.is-silver { background: linear-gradient(180deg, #e6e6e8, #9b9ea3); }
.medal-orb.is-bronze { background: linear-gradient(180deg, #d29764, #8a5a2c); }
.awards-copy { line-height: 1.4; }
.awards-count {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  color: #3a2718;
  letter-spacing: 0.01em;
}
.awards-count strong { font-weight: 600; }
.awards-source {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: #6b5a48;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.awards-source .muted { color: #b8a894; margin: 0 0.25rem; }

/* ---- Card ribbon tier variants ---- */
.product-card .award-badge {
  background: linear-gradient(135deg, #c69a2b, #a67918);
  color: #fff;
}
.product-card .award-badge.is-gold {
  background: linear-gradient(135deg, #e8c25c, #a67918);
}
.product-card .award-badge.is-silver {
  background: linear-gradient(135deg, #d8d9de, #8d9095);
  color: #2d2820;
}
.product-card .award-badge.is-bronze {
  background: linear-gradient(135deg, #cd8f55, #7a4a23);
}

/* ---- Modal: Reconocimientos pills ---- */
.awards-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.award-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem 0.45rem 0.55rem;
  border-radius: 999px;
  background: #f6f0e6;
  border: 1px solid rgba(101, 67, 33, 0.12);
  font-size: 0.78rem;
  line-height: 1.2;
  color: #3a2718;
  white-space: nowrap;
}
.award-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.award-pill.is-gold svg   { color: #c69a2b; }
.award-pill.is-silver svg { color: #8d9095; }
.award-pill.is-bronze svg { color: #a3673a; }
.award-pill .pill-label {
  font-weight: 600;
}
.award-pill .pill-meta {
  color: #6b5a48;
  font-size: 0.73rem;
  letter-spacing: 0.02em;
}

/* ---- Modal: Sensory radar chart ---- */
.modal-sensory-hint {
  margin: -0.5rem 0 0.8rem;
  font-size: 0.75rem;
  color: #6b5a48;
  font-style: italic;
}
.sensory-radar {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fbf6ee;
  border-radius: 12px;
  padding: 0.8rem;
  margin-top: 0.4rem;
}
.sensory-radar svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  overflow: visible;
}
.sensory-radar .radar-ring {
  fill: none;
  stroke: rgba(101, 67, 33, 0.10);
  stroke-width: 1;
}
.sensory-radar .radar-ring:nth-child(odd) {
  stroke: rgba(101, 67, 33, 0.14);
}
.sensory-radar .radar-spoke {
  stroke: rgba(101, 67, 33, 0.10);
  stroke-width: 1;
}
.sensory-radar .radar-data {
  fill: rgba(166, 121, 24, 0.22);
  stroke: #a67918;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.sensory-radar .radar-dot {
  fill: #a67918;
  stroke: #fbf6ee;
  stroke-width: 1.5;
}
.sensory-radar .radar-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  fill: #3a2718;
  letter-spacing: 0.01em;
}
.sensory-radar .radar-val {
  fill: #a67918;
  font-weight: 700;
  font-size: 10px;
}

/* ---- Responsive tweaks ---- */
@media (max-width: 720px) {
  .awards-strip { padding: 1.1rem 0; }
  .awards-strip-inner { gap: 0.9rem; }
  .medal-orb { width: 32px; height: 32px; }
  .medal-orb svg { width: 18px; height: 18px; }
  .awards-count { font-size: 1rem; }
  .awards-source { font-size: 0.7rem; }
  .award-pill { font-size: 0.72rem; padding: 0.38rem 0.62rem 0.38rem 0.48rem; }
  .award-pill .pill-meta { font-size: 0.66rem; }
  .sensory-radar { padding: 0.5rem; }
  .sensory-radar svg { max-width: 100%; }
  .sensory-radar .radar-label { font-size: 10px; }
}

/* ===== END PRODUCTS PAGE V3 ===== */

/* ===== PRODUCTS PAGE V4 — WHITE-ON-CREAM PRODUCT CARDS ===== */
/*
 * Design rationale:
 * - Product photos are shot on white. The previous cream image-area background
 *   created a visible rectangular seam where the photo's white plate met the
 *   card. Switching the image area (and card body) to pure white eliminates
 *   that seam and gives the photo a clean "shelf" to sit on.
 * - The surrounding section keeps its warm cream tone, so the card now lifts
 *   off the page like a piece of merchandise on a counter — premium retail feel.
 * - Stronger border + drop-shadow gives the white card definition without
 *   needing a colored frame.
 */

/* White card body + white image plate */
.product-card {
  background: #ffffff;
  border: 1px solid rgba(31, 22, 17, 0.08);
  box-shadow: 0 1px 2px rgba(31, 22, 17, 0.04), 0 8px 24px -16px rgba(31, 22, 17, 0.18);
}
.product-card .product-image {
  background: #ffffff;
}
.product-card .product-meta {
  background: #ffffff;
  border-top: 1px solid rgba(31, 22, 17, 0.06);
}
.product-card:hover {
  box-shadow: 0 4px 8px rgba(31, 22, 17, 0.06), 0 28px 50px -28px rgba(31, 22, 17, 0.32);
  border-color: rgba(168, 121, 47, 0.42);
}

/* Feature-card variant (Sur del Lago, San Joaqu&iacute;n) — keep two-column layout, white throughout */
.product-card-feature .product-image { background: #ffffff; }
.product-card-feature .product-meta {
  background: #ffffff;
  border-left-color: rgba(31, 22, 17, 0.06);
}

/* Modal hero gallery: also white plate so the same product photo
   carries the same backdrop in card AND in modal */
.modal-gallery {
  background: #ffffff;
  border-right: 1px solid rgba(31, 22, 17, 0.06);
}
.modal-gallery .gallery-arrow {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(31, 22, 17, 0.10);
  box-shadow: 0 2px 8px rgba(31, 22, 17, 0.10);
}

/* Subtle inner padding on the photo so it doesn't feel cramped against card edges */
.product-card .product-image img {
  padding: 0.5rem 0.6rem 0.4rem;
}

/* The pct-badge keeps its dark fill — high contrast on white. But round its
   corner softly with a thin ring for a more "chip" feel on the new bg. */
.product-card .pct-badge {
  box-shadow: 0 2px 6px rgba(31, 22, 17, 0.18);
}
.product-card .pct-badge.is-white {
  background: #ffffff;
  border: 1px solid rgba(168, 121, 47, 0.45);
  box-shadow: 0 2px 6px rgba(31, 22, 17, 0.10);
}

/* Region accent stripe — lifted slightly so it reads as a section "hat" 
   above the now-whiter cards (the stripe was previously fighting the cream image). */
.region-section::before {
  height: 4px;
  opacity: 0.95;
}

/* Mobile: tighten card padding */
@media (max-width: 600px) {
  .product-card .product-image img { padding: 0.35rem 0.4rem 0.3rem; }
}

/* ===== END PRODUCTS PAGE V4 ===== */


/* ===== PRODUCTS PAGE V5 — WARM PARCHMENT META AREA ===== */
/*
 * Design rationale (revised — was deep cacao, swapped to parchment):
 * - Deep cacao under the white photo plate created a harsh value stripe
 *   (~100% lightness vs ~8% lightness). The card stopped reading as one
 *   object and started reading as a banner.
 * - Warm parchment (#ece1cc) keeps a single tonal family — white plate to
 *   parchment meta is roughly a 12-step lightness drop, which the eye
 *   reads as "same card, two zones." It's the look of a fine chocolate
 *   label (Amedei, Domori, Marou) rather than a logo footer.
 * - Section background sits a touch LIGHTER than this cream, so the card
 *   still lifts off the page. A hairline gold-tinted border closes it.
 * - Text returns to brand espresso ink for full legibility; gold accents
 *   stay; type chips revert to their cream-friendly V3/V4 variants.
 */

/* Warm parchment card footer */
.product-card .product-meta {
  background: #ece1cc;
  border-top: 1px solid rgba(31, 22, 17, 0.08);
  color: var(--ink, #1f1611);
}
.product-card-feature .product-meta {
  background: #ece1cc;
  border-left-color: rgba(31, 22, 17, 0.08);
  color: var(--ink, #1f1611);
}

/* Text colors on parchment — dark and readable */
.product-card .product-region {
  color: var(--ink-mute, #6b5226);
}
.product-card .product-name {
  color: var(--ink, #1f1611);
}
.product-card .product-pct {
  color: var(--ink-mute, #6b5226);
}
.product-card .product-pct span {
  color: var(--gold, #a8792f);
}
.product-card .product-blurb {
  color: var(--ink-mute, #6b5226);
}

/* "Ver detalles &rarr;" CTA */
.product-card .product-cta {
  color: var(--gold, #a8792f);
  border-bottom-color: var(--gold, #a8792f);
}
.product-card .product-cta:hover,
.product-card .product-cta:focus-visible {
  color: var(--ink, #1f1611);
  border-color: var(--ink, #1f1611);
}

/* Type chips — back to cream-friendly variants */
.product-card .type-chip.is-oscuro {
  background: rgba(31, 22, 17, 0.88);
  color: var(--gold-bright, #f0d089);
  border: 1px solid transparent;
}
.product-card .type-chip.is-leche {
  background: #d6a872;
  color: #3a2511;
  border-color: transparent;
}
.product-card .type-chip.is-blanco {
  background: #ffffff;
  color: #6b5226;
  border-color: rgba(168, 121, 47, 0.40);
}

/* Award ribbon — softer shadow on white plate */
.product-card .award-badge {
  box-shadow: 0 4px 10px rgba(31, 22, 17, 0.16);
}

/* Card border — warm hairline that bridges white top + parchment bottom */
.product-card {
  border-color: rgba(168, 121, 47, 0.22);
  box-shadow: 0 1px 2px rgba(31, 22, 17, 0.04), 0 10px 24px -16px rgba(31, 22, 17, 0.20);
}
.product-card:hover {
  border-color: rgba(168, 121, 47, 0.55);
  box-shadow: 0 3px 8px rgba(31, 22, 17, 0.08), 0 24px 48px -24px rgba(31, 22, 17, 0.28);
}

/* Modal info panel: also warm parchment so card-to-modal carries one mood */
.modal-info {
  background: #ece1cc;
}

/* Mobile: compact parchment footer */
@media (max-width: 600px) {
  .product-card .product-meta { padding: 1.1rem 1.1rem 1.3rem; }
}

/* ===== END PRODUCTS PAGE V5 ===== */

/* ===== PRODUCTS PAGE V6 — MODAL SCROLL + IMAGE CENTERING FIX ===== */
/*
 * Bug 1 (scrolling): .modal-dialog is a grid container with max-height set,
 *   but no grid-template-rows. Implicit rows default to auto-sizing based on
 *   content, which can grow taller than the dialog's max-height. The dialog's
 *   overflow:hidden then clips off the bottom, but .modal-info's max-height:100%
 *   resolves to the unbounded row height — so there is no overflow to scroll.
 *   Fix: grid-template-rows: minmax(0, 1fr) on the dialog forces the row to
 *   match dialog height, which gives modal-info a real boundary and triggers
 *   its overflow-y: auto.
 *
 * Bug 2 (image not centered): .gallery-track img toggles position:absolute->
 *   position:relative when active. The active image has width:100% height:100%
 *   with object-fit:contain, but the inset:0 from the absolute state lingers
 *   visually awkward at certain aspect ratios. Reset inset to auto when
 *   relative, and let flex on the parent do the centering cleanly.
 */

/* Bug 1 fix: bound the grid row */
.product-modal .modal-dialog {
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

/* Reinforce modal-info scroll guarantees (defense in depth) */
.modal-info {
  overflow-y: auto !important;
  min-height: 0 !important;
  max-height: 100%;
  height: 100%;
}

/* Bug 2 fix: image centering in modal gallery */
.modal-gallery .gallery-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}
.modal-gallery .gallery-track {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-gallery .gallery-track img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  padding: 1.4rem;
  margin: auto;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.modal-gallery .gallery-track img.is-active {
  opacity: 1;
}
/* Single-image gallery (almost every product) — render without arrows/dots cleanly */
.modal-gallery.is-single .gallery-stage,
.modal-gallery .gallery-stage:only-child {
  padding-bottom: 0;
}

/* Mobile: stacked layout — make gallery a fixed row, info column scrollable */
@media (max-width: 960px) {
  .product-modal .modal-dialog {
    grid-template-rows: minmax(220px, 36vh) minmax(0, 1fr);
  }
  .modal-info {
    max-height: 100%;
    height: 100%;
  }
}

/* Very small screens — keep dialog filling viewport, info scrolls inside */
@media (max-width: 620px) {
  .product-modal .modal-dialog {
    max-height: calc(100vh - 1rem);
    grid-template-rows: minmax(200px, 32vh) minmax(0, 1fr);
  }
  .modal-gallery .gallery-track img { padding: 0.9rem; }
}

/* ===== END PRODUCTS PAGE V6 ===== */

/* ===== PRODUCTS PAGE V7 — STICKY REGION NAV CLEARANCE FIX ===== */
/*
 * Bug: .sticky-region-nav was at top:70px, but the actual site-header is
 *   ~113px tall on desktop (78px logo + 1.1rem * 2 padding). The sticky nav
 *   was overlapping the bottom ~43px of the header — covering the logo
 *   bottom and obscuring the main page links.
 *
 * Fix: align sticky-region-nav `top` with each breakpoint's header height.
 *   Calculations (logo height + nav padding):
 *     default (>1100px):  78 + 17.6*2 = 113px
 *     <=1100px:           64 + 17.6*2 = ~99px
 *     <=820px (mobile):   52 + 16*2   = ~84px
 *   These selectors match the existing site-header / nav-brand breakpoints
 *   so the sticky nav always sits flush UNDER the header, never on top of it.
 *
 * Defense: lower z-index of sticky nav from 50 to 49, so the site-header
 *   (z-index:50) always wins if any rounding causes a 1-2px overlap.
 */

.sticky-region-nav {
  top: 113px;
  z-index: 49;
}

@media (max-width: 1100px) {
  .sticky-region-nav { top: 99px; }
}

@media (max-width: 820px) {
  .sticky-region-nav { top: 84px; }
}

@media (max-width: 620px) {
  /* Override the older 60px rule with a value that matches the actual mobile
     header height. Padding tightens to 0.8rem on very small phones. */
  .sticky-region-nav { top: 84px; }
}

/* ===== END PRODUCTS PAGE V7 ===== */


/* ===== V8 — Products page hero photo treatment (matches home hero) ===== */
.products-hero {
  position: relative;
  min-height: 64vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 7rem 0 5rem;
  border-bottom: none;
  background:
    linear-gradient(
      135deg,
      rgba(26, 14, 8, 0.78) 0%,
      rgba(26, 14, 8, 0.55) 55%,
      rgba(26, 14, 8, 0.78) 100%
    ),
    url('../images/hero-paisaje-venezolano.jpg') center/cover no-repeat;
  color: var(--ink-on-dark, #fbf6ee);
  overflow: hidden;
}
.products-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(194, 150, 76, 0.18), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(194, 150, 76, 0.12), transparent 60%);
  pointer-events: none;
}
.products-hero .container {
  position: relative;
  z-index: 1;
}
.products-hero .eyebrow {
  color: var(--gold-bright, #f0d089);
}
.products-hero h1,
.products-hero .display {
  color: var(--ink-on-dark, #fbf6ee);
}
.products-hero h1 em,
.products-hero .display em {
  color: var(--gold-bright, #f0d089);
  font-style: italic;
}
.products-hero p,
.products-hero .lede {
  color: rgba(251, 246, 238, 0.86);
}
.products-hero .region-anchors {
  border-top: 1px solid rgba(251, 246, 238, 0.18);
}
.products-hero .region-anchors a {
  color: var(--ink-on-dark, #fbf6ee);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(251, 246, 238, 0.28);
  backdrop-filter: blur(2px);
}
.products-hero .region-anchors a:hover,
.products-hero .region-anchors a:focus-visible {
  color: #2a160c;
  background: var(--gold-bright, #f0d089);
  border-color: var(--gold-bright, #f0d089);
}

@media (max-width: 820px) {
  .products-hero { min-height: 56vh; padding: 6rem 0 4rem; }
}
@media (max-width: 620px) {
  .products-hero { min-height: 50vh; padding: 5rem 0 3.5rem; }
}
/* ===== END V8 ===== */


/* ===== V9 — Subtle hover tilt on Nuestros programas cards (matches region cards) ===== */
.program-card.flip-card:not(.is-flipped):hover .flip-card-inner {
  transform: perspective(1400px) rotateY(-12deg);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.7);
}
.program-card.flip-card.is-flipped:hover .flip-card-inner {
  transform: rotateY(168deg);
}
@media (max-width: 900px) {
  /* Disable wiggle on touch/small screens — flip is the primary interaction */
  .program-card.flip-card:not(.is-flipped):hover .flip-card-inner {
    transform: none;
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .program-card.flip-card:not(.is-flipped):hover .flip-card-inner {
    transform: none;
    box-shadow: none;
  }
}
/* ===== END V9 ===== */


/* ===== V10 — Recipes editorial hub (hero / featured / gallery / modal / print) ===== */

/* --- Hero (matches products-hero treatment) --- */
.recipes-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 7rem 0 5rem;
  border-bottom: none;
  background:
    linear-gradient(135deg,
      rgba(26, 14, 8, 0.78) 0%,
      rgba(26, 14, 8, 0.58) 55%,
      rgba(26, 14, 8, 0.78) 100%),
    url('../images/recipes-hero.png') center/cover no-repeat;
  color: var(--ink-on-dark, #fbf6ee);
  overflow: hidden;
}
.recipes-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(194, 150, 76, 0.18), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(194, 150, 76, 0.12), transparent 60%);
  pointer-events: none;
}
.recipes-hero .container {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
}
.recipes-hero .eyebrow {
  color: var(--gold-bright, #f0d089);
}
.recipes-hero h1,
.recipes-hero .display {
  color: var(--ink-on-dark, #fbf6ee);
  margin-bottom: 1.4rem;
}
.recipes-hero h1 em,
.recipes-hero .display em {
  color: var(--gold-bright, #f0d089);
  font-style: italic;
}
.recipes-hero .lede {
  color: rgba(251, 246, 238, 0.86);
}

@media (max-width: 820px) {
  .recipes-hero { min-height: 56vh; padding: 6rem 0 4rem; }
}
@media (max-width: 620px) {
  .recipes-hero { min-height: 50vh; padding: 5rem 0 3.5rem; }
}

/* --- Featured "Receta del mes" (magazine layout) --- */
.featured-recipe {
  padding: 5.5rem 0 5rem;
}
.featured-recipe .featured-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4rem;
  align-items: center;
}
.featured-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 25px 50px -25px rgba(42, 22, 12, 0.45);
}
.featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: var(--bg-deep, #2a160c);
  color: var(--gold-bright, #f0d089);
  padding: 0.45rem 0.95rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
}
.featured-body .h2 {
  margin: 0.4rem 0 1.1rem;
  line-height: 1.15;
}
.featured-body .h2 em {
  font-style: italic;
  color: #6b3a1c;
}
.featured-lede {
  color: #4d3b2a;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.6rem;
}
.featured-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 1.6rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: #5d4a37;
  letter-spacing: 0.02em;
}
.featured-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.featured-meta .meta-icon {
  color: #8a5a2b;
  font-size: 1.05rem;
}

@media (max-width: 900px) {
  .featured-recipe .featured-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .featured-media { aspect-ratio: 16 / 11; }
}

/* --- Collection (gallery grid) --- */
.recipe-collection {
  padding: 4rem 0 6rem;
  border-top: 1px solid rgba(106, 70, 38, 0.15);
}
.collection-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.collection-head .h2 {
  margin: 0.4rem 0 0.9rem;
}
.collection-intro {
  color: #5d4a37;
  font-size: 1rem;
  line-height: 1.65;
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2.2rem;
}

/* --- Recipe tile (clickable card) --- */
.recipe-tile {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 30px -20px rgba(42, 22, 12, 0.35);
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  border: 1px solid rgba(106, 70, 38, 0.08);
  display: flex;
  flex-direction: column;
  outline: none;
}
.recipe-tile:hover,
.recipe-tile:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 25px 45px -20px rgba(42, 22, 12, 0.5);
}
.recipe-tile:focus-visible {
  outline: 2px solid var(--gold-bright, #f0d089);
  outline-offset: 4px;
}
.tile-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.recipe-tile:hover .tile-media img {
  transform: scale(1.05);
}
.tile-body {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.tile-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 0.9rem;
  display: flex;
  gap: 0.9rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: #7a5e3f;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tile-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.tile-meta .meta-icon {
  font-size: 1rem;
  color: #8a5a2b;
}
.tile-meta .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c8995b;
  display: inline-block;
}
.tile-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #2a160c;
  margin: 0 0 0.55rem;
  line-height: 1.25;
}
.tile-desc {
  color: #5d4a37;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1.1rem;
  flex-grow: 1;
}
.tile-pair {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #6b3a1c;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(106, 70, 38, 0.12);
  letter-spacing: 0.02em;
}
.tile-pair strong {
  color: #2a160c;
  font-weight: 600;
}

/* --- Recipe modal — magazine 2-col on desktop --- */
.recipe-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.recipe-modal.is-open {
  display: flex;
}
.recipe-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 10, 5, 0.72);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.recipe-modal-dialog {
  position: relative;
  width: min(1120px, 96vw);
  max-height: 92vh;
  background: var(--bg-cream, #f3eadc);
  border-radius: 10px;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-template-rows: minmax(0, 1fr);
  animation: recipeModalIn 0.32s ease;
}
@keyframes recipeModalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.recipe-modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 10, 5, 0.78);
  color: #f3eadc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.recipe-modal-close:hover,
.recipe-modal-close:focus-visible {
  background: #2a160c;
  color: var(--gold-bright, #f0d089);
  transform: scale(1.06);
  outline: none;
}

/* PHOTO COLUMN — full height, no overlay, lets the dish be the hero */
.recipe-modal-hero {
  margin: 0;
  grid-column: 1;
  grid-row: 1;
  background: #2a160c;
  overflow: hidden;
  position: relative;
}
.recipe-modal-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* CONTENT COLUMN — body scrolls + sticky action bar at bottom */
.recipe-modal-content {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.recipe-modal-body {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.8rem 2.4rem 1.4rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.recipe-modal-header {
  margin-bottom: 0.9rem;
  padding-right: 3rem; /* space for close button on mobile */
}
.recipe-modal-header .eyebrow {
  margin: 0 0 0.3rem;
  color: #8a5a2b;
}
.recipe-modal-header .h2 {
  margin: 0;
  color: #2a160c;
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  line-height: 1.18;
}

.recipe-modal-meta {
  list-style: none;
  padding: 0 0 0.75rem;
  margin: 0 0 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: #5d4a37;
  border-bottom: 1px solid rgba(106, 70, 38, 0.15);
}
.recipe-modal-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.recipe-modal-meta li strong {
  color: #2a160c;
  font-weight: 600;
}
.recipe-modal-lede {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1rem;
  color: #4d3b2a;
  line-height: 1.6;
  margin: 0 0 0.95rem;
  padding-left: 1rem;
  border-left: 3px solid var(--gold-bright, #f0d089);
}
.recipe-modal-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.55);
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(106, 70, 38, 0.18);
  margin-bottom: 1.1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  max-width: 100%;
}
.recipe-modal-pair .pair-label {
  color: #7a5e3f;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.recipe-modal-pair .pair-link {
  color: #2a160c;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s ease;
}
.recipe-modal-pair .pair-link:hover {
  color: #6b3a1c;
}

.recipe-modal-section {
  margin-bottom: 1rem;
}
.recipe-modal-section:last-of-type {
  margin-bottom: 0.4rem;
}
.recipe-modal-section .modal-subhead {
  position: relative;
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #2a160c;
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
  letter-spacing: 0.01em;
}
.recipe-modal-section .modal-subhead::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--gold-bright, #f0d089);
}
.recipe-ingredients-list,
.recipe-method-list {
  margin: 0;
  padding-left: 1.2rem;
  color: #4d3b2a;
  font-size: 0.93rem;
  line-height: 1.55;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.recipe-ingredients-list li,
.recipe-method-list li {
  margin-bottom: 0.34rem;
  padding-left: 0.15rem;
}
/* Desktop only: 2-column ingredients when modal is wide enough */
@media (min-width: 981px) {
  .recipe-ingredients-list {
    column-count: 2;
    column-gap: 1.6rem;
    column-rule: 1px solid rgba(106, 70, 38, 0.12);
  }
  .recipe-ingredients-list li {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}
/* CJK: looser line-height for readability */
:lang(ja) .recipe-ingredients-list,
:lang(ja) .recipe-method-list,
:lang(zh) .recipe-ingredients-list,
:lang(zh) .recipe-method-list,
:lang(ja) .recipe-modal-lede,
:lang(zh) .recipe-modal-lede {
  line-height: 1.75;
}
:lang(ja) .recipe-ingredients-list,
:lang(zh) .recipe-ingredients-list {
  word-break: normal;
  hyphens: none;
}
.recipe-ingredients-list li:last-child,
.recipe-method-list li:last-child {
  margin-bottom: 0;
}
.recipe-method-list li::marker {
  color: #8a5a2b;
  font-weight: 600;
}
.recipe-ingredients-list { list-style: disc; }
.recipe-ingredients-list li::marker { color: #c8995b; }

/* --- Action bar (sits at bottom of content column) --- */
.recipe-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 2.4rem 1.2rem;
  border-top: 1px solid rgba(106, 70, 38, 0.15);
  background: rgba(255, 255, 255, 0.55);
}
.recipe-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: #fff;
  color: #2a160c;
  border: 1px solid rgba(106, 70, 38, 0.2);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.recipe-action-btn:hover,
.recipe-action-btn:focus-visible {
  background: #2a160c;
  color: var(--gold-bright, #f0d089);
  border-color: #2a160c;
  outline: none;
}
.recipe-action-btn.recipe-action-link {
  background: #2a160c;
  color: var(--gold-bright, #f0d089);
  border-color: #2a160c;
  margin-left: auto;
}
.recipe-action-btn.recipe-action-link:hover {
  background: #6b3a1c;
  border-color: #6b3a1c;
}
.recipe-action-btn.is-copied {
  background: #1f5132;
  color: #fff;
  border-color: #1f5132;
}

body.recipe-modal-open {
  overflow: hidden;
}

/* Modal — TABLET LANDSCAPE / NARROW DESKTOP (980→1100px keeps full layout) */

/* Modal — TABLET: 4/8 split keeps photo readable + roomier text */
@media (max-width: 1024px) {
  .recipe-modal-dialog {
    grid-template-columns: 4fr 6fr;
  }
  .recipe-modal-body { padding: 1.6rem 2rem 1.2rem; }
  .recipe-modal-actions { padding: 0.9rem 2rem 1.1rem; }
  /* Drop ingredients to single column at this width — too narrow for 2 */
}

/* Modal — SMALL TABLET: still 2-col but tighter */
@media (max-width: 880px) {
  .recipe-modal-dialog {
    grid-template-columns: 5fr 7fr;
  }
  .recipe-modal-body { padding: 1.4rem 1.6rem 1rem; }
  .recipe-modal-actions { padding: 0.85rem 1.6rem 1rem; }
  .recipe-modal-header .h2 { font-size: 1.5rem; }
  .recipe-modal-lede { font-size: 0.95rem; }
}

/* Modal — MOBILE: single column, hero on top, slim aspect for above-fold content */
@media (max-width: 760px) {
  .recipe-modal-dialog {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .recipe-modal-hero {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 38vh;
  }
  .recipe-modal-content {
    grid-column: 1;
    grid-row: 2;
  }
  .recipe-modal-body {
    padding: 1.25rem 1.15rem 1rem;
  }
  .recipe-modal-actions {
    padding: 0.75rem 1.15rem 0.95rem;
    gap: 0.45rem;
  }
  .recipe-modal-header { padding-right: 0; }
  .recipe-modal-header .h2 { font-size: 1.4rem; }
  .recipe-modal-header .eyebrow { font-size: 0.75rem; }
  .recipe-modal-lede {
    font-size: 0.95rem;
    padding-left: 0.85rem;
  }
  .recipe-modal-pair { font-size: 0.78rem; padding: 0.4rem 0.75rem; margin-bottom: 0.95rem; }
  .recipe-modal-section { margin-bottom: 0.85rem; }
  .recipe-ingredients-list,
  .recipe-method-list { font-size: 0.92rem; padding-left: 1.1rem; }
  /* Hide print on mobile — phones rarely print; reclaim row width */
  .recipe-action-btn[data-action="print"] { display: none; }
  /* Make CTA primary + full width; share is secondary half-width */
  .recipe-action-btn.recipe-action-link {
    margin-left: 0;
    width: 100%;
    justify-content: center;
    order: -1;
    padding: 0.8rem 1.1rem;
    font-size: 0.88rem;
  }
  .recipe-action-btn[data-action="share"] {
    width: 100%;
    justify-content: center;
  }
  /* Bigger close on mobile, easier to hit; sit on dark scrim corner */
  .recipe-modal-close {
    top: 0.7rem;
    right: 0.7rem;
    width: 44px;
    height: 44px;
  }
}

/* Very small phones: tighter still */
@media (max-width: 380px) {
  .recipe-modal-body { padding: 1.1rem 0.95rem 0.9rem; }
  .recipe-modal-actions { padding: 0.7rem 0.95rem 0.85rem; }
  .recipe-modal-header .h2 { font-size: 1.3rem; line-height: 1.2; }
  .recipe-modal-meta { font-size: 0.8rem; gap: 0.4rem 0.95rem; }
  .recipe-action-btn { font-size: 0.82rem; padding: 0.6rem 0.9rem; }
}

/* Landscape phones (wide & short): keep hero proportional, don't dominate */
@media (max-width: 920px) and (max-height: 520px) and (orientation: landscape) {
  .recipe-modal-dialog {
    grid-template-columns: 5fr 7fr;
    grid-template-rows: minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
  }
  .recipe-modal-hero {
    grid-column: 1; grid-row: 1;
    aspect-ratio: auto;
    max-height: none;
    height: 100%;
  }
  .recipe-modal-content { grid-column: 2; grid-row: 1; }
  .recipe-action-btn[data-action="print"] { display: inline-flex; }
  .recipe-action-btn.recipe-action-link {
    margin-left: auto;
    width: auto;
    order: 0;
  }
  .recipe-action-btn[data-action="share"] { width: auto; }
}

/* --- Print stylesheet: clean recipe sheet --- */
@media print {
  @page { margin: 1.5cm; }
  body { background: #fff !important; color: #000 !important; }
  body * { visibility: hidden; }

  .recipe-modal,
  .recipe-modal * { visibility: visible; }

  .recipe-modal {
    position: static !important;
    display: block !important;
    background: #fff !important;
  }
  .recipe-modal-backdrop,
  .recipe-modal-close,
  .recipe-modal-actions { display: none !important; }
  .recipe-modal-dialog {
    box-shadow: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    width: 100% !important;
    max-height: none !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
  }
  .recipe-modal-hero {
    aspect-ratio: auto !important;
    height: 240px !important;
    margin-bottom: 1rem !important;
  }
  .recipe-modal-hero img { object-fit: cover; }
  .recipe-modal-content { display: block !important; }
  .recipe-modal-body {
    overflow: visible !important;
    padding: 0 !important;
  }
  .recipe-modal-section { page-break-inside: avoid; }
  .recipe-modal-pair { background: none !important; border: 1px solid #999 !important; }

  .site-header,
  .site-footer,
  .back-to-top,
  .nav-toggle { display: none !important; }
}

/* ===== END V10 ===== */

/* =========================================================================
   V11 — PROFESSIONALS HUB (libros + hojas de venta)
   Editorial, two-column flip-book gallery + utility download cards.
   ========================================================================= */

.pro-hero { padding-bottom: 3.5rem; }
.pro-hero-anchor {
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  color: rgba(243, 234, 220, 0.78);
}
.pro-hero-anchor a {
  color: var(--gold-bright, #f0d089);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 208, 137, 0.35);
  padding-bottom: 1px;
  transition: border-color var(--t), color var(--t);
}
.pro-hero-anchor a:hover { border-bottom-color: rgba(240, 208, 137, 1); }

.pro-section { padding: 6rem 0; }
.pro-section .text-center { max-width: 780px; margin: 0 auto 3.5rem; }
.pro-section .text-center .divider { margin: 1.4rem auto 1.6rem; }

.pro-section--dark {
  background: #2a160c;
  color: var(--ink-on-dark, #f3eadc);
}
.pro-section--dark h2 { color: var(--ink-on-dark, #f3eadc); }
.pro-section--dark .lede,
.pro-section--dark p { color: rgba(243, 234, 220, 0.82); }
.pro-section--dark .eyebrow { color: var(--gold-bright, #f0d089); }
.pro-section--dark .divider { background: rgba(240, 208, 137, 0.45); }

/* ---------- Books grid ---------- */
.books-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  margin-bottom: 4rem;
}

.book-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.book-flip {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  perspective: 1400px;
  cursor: pointer;
  outline: none;
  background: transparent;
  border: 0;
  padding: 0;
}
.book-flip:focus-visible .flip-card-inner { box-shadow: 0 0 0 2px var(--gold); }

/* hover-to-flip (desktop) and click/tap toggle via .is-flipped (touch + a11y) */
@media (hover: hover) {
  .book-flip:hover .flip-card-inner { transform: rotateY(180deg); }
  .book-flip:hover .book-flip-hint { opacity: 0; }
}
.book-flip.is-flipped .flip-card-inner { transform: rotateY(180deg); }

.book-face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #1a0e08;
  box-shadow: 0 22px 48px -28px rgba(20, 12, 6, 0.55), 0 6px 18px -10px rgba(20, 12, 6, 0.35);
  overflow: hidden;
  transition: box-shadow var(--t);
}
.book-card:hover .book-face { box-shadow: 0 26px 56px -22px rgba(20, 12, 6, 0.65), 0 10px 22px -10px rgba(20, 12, 6, 0.4); }
.book-face--front { transform: rotateY(0deg); }
.book-face--back { transform: rotateY(180deg); }

.book-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.book-flip-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 14, 8, 0.78);
  color: #f0d089;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.book-flip:hover .book-flip-hint,
.book-flip:focus-visible .book-flip-hint { opacity: 1; }
@media (hover: none) {
  .book-flip-hint { opacity: 0.85; bottom: 10px; }
}

.book-meta {
  padding: 1.2rem 1.15rem 1.3rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.book-meta h3 {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.22;
  margin: 0;
  color: var(--bg-deep, #2a160c);
}
.book-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.35;
  color: rgba(42, 22, 12, 0.78);
  margin: 0;
}
.book-author {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: rgba(42, 22, 12, 0.6);
  margin: 0 0 0.25rem;
}
.book-blurb {
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(42, 22, 12, 0.82);
  margin: 0;
}
.book-virtual {
  margin-top: 0.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(42, 22, 12, 0.12);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  font-style: italic;
}
.book-virtual--soon { color: rgba(42, 22, 12, 0.55); }

.book-download {
  margin-top: 0.9rem;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.7rem;
  padding: 0.8rem 1.1rem;
  background: var(--bg-deep, #2a160c);
  color: #f3eadc;
  text-decoration: none;
  border: 1px solid var(--bg-deep, #2a160c);
  font-family: var(--sans, inherit);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--t), color var(--t), transform var(--t);
  align-self: flex-start;
  cursor: pointer;
  max-width: 100%;
}
.book-download:hover {
  background: var(--gold, #c2964c);
  border-color: var(--gold, #c2964c);
  color: #fff;
  transform: translateY(-1px);
}
.book-download-meta {
  font-size: 0.74rem;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
  opacity: 0.78;
}

/* ---------- Physical-copy block ---------- */
.physical-copy {
  margin-top: 2rem;
  background: linear-gradient(135deg, rgba(42, 22, 12, 0.97), rgba(74, 38, 20, 0.93));
  color: var(--ink-on-dark, #f3eadc);
  border-radius: 4px;
  padding: 3rem 2.5rem;
  position: relative;
  overflow: hidden;
}
.physical-copy::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(240, 208, 137, 0.18), transparent 60%);
  pointer-events: none;
}
.physical-copy-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
}
.physical-copy-text .eyebrow { color: var(--gold-bright, #f0d089); }
.physical-copy-text h3 {
  font-family: var(--serif);
  font-size: 1.85rem;
  line-height: 1.2;
  margin: 0.4rem 0 1rem;
  color: var(--ink-on-dark, #f3eadc);
}
.physical-copy-text p {
  color: rgba(243, 234, 220, 0.82);
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0;
}
.physical-copy-text strong { color: var(--gold-bright, #f0d089); font-weight: 500; }

.physical-copy-channels {
  display: grid;
  gap: 0.9rem;
}
.physical-copy-channel {
  display: block;
  padding: 1.1rem 1.3rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(240, 208, 137, 0.28);
  text-decoration: none;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.physical-copy-channel:hover {
  background: rgba(240, 208, 137, 0.1);
  border-color: rgba(240, 208, 137, 0.6);
  transform: translateY(-1px);
}
.physical-copy-label {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240, 208, 137, 0.78);
  margin-bottom: 0.3rem;
}
.physical-copy-value {
  display: block;
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  color: #f3eadc;
}

/* ---------- Sales sheets — colored flip cards ---------- */
.sheets-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.sheet-flip-card {
  position: relative;
  aspect-ratio: 3 / 4;
  perspective: 1400px;
  cursor: pointer;
  outline: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 4px;
}
.sheet-flip-card:focus-visible .flip-card-inner {
  box-shadow: 0 0 0 3px var(--gold-bright, #f0d089);
}

@media (hover: hover) {
  .sheet-flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
  .sheet-flip-card:hover .sheet-front-pod { transform: rotate(-6deg) scale(1.05); }
}
.sheet-flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }

.sheet-face {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 22px 48px -28px rgba(20, 12, 6, 0.55), 0 6px 18px -10px rgba(20, 12, 6, 0.35);
  transition: box-shadow var(--t);
}
.sheet-flip-card:hover .sheet-face {
  box-shadow: 0 30px 60px -22px rgba(20, 12, 6, 0.72), 0 12px 24px -10px rgba(20, 12, 6, 0.45);
}
.sheet-face--front {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem 1.35rem 1.3rem;
  color: #fff;
  transform: rotateY(0deg);
}
.sheet-face--back {
  background: #fbf6ec;
  display: flex;
  flex-direction: column;
  transform: rotateY(180deg);
  color: var(--bg-deep, #2a160c);
}

/* Region color modifiers */
.sheet-flip-card--carenero      .sheet-face--front { background: #c25524; }
.sheet-flip-card--rio-caribe    .sheet-face--front { background: #2d7a4f; }
.sheet-flip-card--san-joaquin   .sheet-face--front { background: #5e3e7a; }
.sheet-flip-card--sur-del-lago  .sheet-face--front { background: #7a2935; }

.sheet-flip-card--carenero      .sheet-back-band  { background: #c25524; }
.sheet-flip-card--rio-caribe    .sheet-back-band  { background: #2d7a4f; }
.sheet-flip-card--san-joaquin   .sheet-back-band  { background: #5e3e7a; }
.sheet-flip-card--sur-del-lago  .sheet-back-band  { background: #7a2935; }

.sheet-flip-card--carenero      .sheet-back-download { background: #c25524; border-color: #c25524; }
.sheet-flip-card--rio-caribe    .sheet-back-download { background: #2d7a4f; border-color: #2d7a4f; }
.sheet-flip-card--san-joaquin   .sheet-back-download { background: #5e3e7a; border-color: #5e3e7a; }
.sheet-flip-card--sur-del-lago  .sheet-back-download { background: #7a2935; border-color: #7a2935; }

/* Front face */
.sheet-front-top { position: relative; z-index: 2; }
.sheet-front-eyebrow {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.7rem;
}
.sheet-front-title {
  font-family: var(--serif);
  font-size: 1.85rem;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
  font-weight: 500;
}
.sheet-front-locale {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.35;
}
.sheet-front-pod {
  position: absolute;
  right: -28px;
  bottom: -36px;
  width: 145px;
  height: 195px;
  color: rgba(255, 255, 255, 0.16);
  pointer-events: none;
  transition: transform 0.55s ease;
  z-index: 1;
}
.sheet-front-pod svg { width: 100%; height: 100%; display: block; }
.sheet-front-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.sheet-front-badge {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--sans, inherit);
  color: rgba(255, 255, 255, 0.92);
  padding: 0.42rem 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
}
.sheet-front-cta {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

/* Back face */
.sheet-back-band {
  padding: 0.95rem 1.4rem;
  color: #fff;
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  font-style: italic;
}
.sheet-back-band span { opacity: 0.96; }
.sheet-back-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.4rem 1.35rem;
  gap: 0.65rem;
}
.sheet-back-eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(42, 22, 12, 0.55);
  font-family: var(--sans, inherit);
}
.sheet-back-body p {
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(42, 22, 12, 0.78);
  margin: 0;
}
.sheet-back-download {
  margin-top: auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  padding: 0.78rem 1rem;
  color: #fff;
  text-decoration: none;
  font-family: var(--sans, inherit);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: flex-start;
  transition: filter var(--t), transform var(--t);
  max-width: 100%;
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
}
.sheet-back-download:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  color: #fff;
}
.sheet-back-meta {
  font-size: 0.68rem;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
  opacity: 0.92;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .books-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 1.6rem; }
  .sheets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .sheet-front-title { font-size: 1.7rem; }
  .book-meta h3 { font-size: 1.3rem; }
  .book-subtitle { font-size: 1rem; }
  .book-blurb { font-size: 0.93rem; }
}
@media (max-width: 760px) {
  .pro-section { padding: 4.2rem 0; }
  .pro-section .text-center { margin-bottom: 2.5rem; }
  .books-grid { gap: 2.4rem; grid-template-columns: 1fr; }
  .book-flip { max-width: 320px; margin: 0 auto; }
  .book-meta { padding: 1.3rem 1.2rem 1.4rem; }
  .book-meta h3 { font-size: 1.35rem; }
  .physical-copy { padding: 2.2rem 1.5rem; }
  .physical-copy-inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .physical-copy-text h3 { font-size: 1.45rem; }
  .sheets-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .sheet-front-title { font-size: 2rem; }
}


/* ============================================================
   SENSORY PROFILE BUILDER — interactive filter tool
   Dark premium palette, region-coded cards, glow on active chips
   ============================================================ */
/* ============================================================
   CONSULTOR SENSORIAL - premium iteration
   - Cohesive cacao-trade chip palette (less neon, more refined)
   - Lighter region tints on body; bold regional stripe + accents
   - Removed dot-grid texture; warm radial wash carries the panel
   - Bumped typography (Playfair % numeral); premium ease curves
   ============================================================ */
.sensory-tool {
  background:
    radial-gradient(ellipse 80% 60% at 18% -10%, rgba(240,208,137,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 100% 110%, rgba(207,110,58,0.12) 0%, transparent 60%),
    linear-gradient(180deg, #28150b 0%, #190b05 100%);
  color: #f5ead6;
  position: relative;
  overflow: hidden;
  padding-top: 5.6rem;
  padding-bottom: 5.6rem;
}
.sensory-tool > .container { position: relative; z-index: 1; }

.sensory-tool .text-center { margin-bottom: 2.8rem; }
.sensory-tool .text-center .eyebrow { color: #d9b163; letter-spacing: 0.32em; }
.sensory-tool .text-center h2 {
  color: #f7ecd5;
  font-size: clamp(1.8rem, 2.4vw + 1rem, 2.6rem);
  letter-spacing: -0.005em;
  line-height: 1.18;
}
.sensory-tool .text-center .lede { color: #c9b495; max-width: 720px; margin-left: auto; margin-right: auto; }
.sensory-tool .text-center .divider {
  background: linear-gradient(90deg, transparent, rgba(217,177,99,0.7), transparent);
  height: 1px;
  width: 88px;
  margin: 1.4rem auto;
}

.sensory-tool-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.55fr);
  gap: 3rem;
  align-items: start;
  margin-top: 2.4rem;
  background:
    linear-gradient(180deg, rgba(255,247,232,0.045) 0%, rgba(255,247,232,0.025) 100%);
  border: 1px solid rgba(217,177,99,0.18);
  border-radius: 24px;
  padding: 2.8rem;
  box-shadow:
    0 40px 90px -32px rgba(0,0,0,0.75),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.sensory-attrs-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(217,177,99,0.18);
  padding-bottom: 1.05rem;
  margin-bottom: 1.7rem;
}
.sensory-attrs-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.45rem;
  margin: 0;
  color: #f7ecd5;
  letter-spacing: 0.005em;
}
.sensory-reset {
  background: transparent;
  border: none;
  cursor: pointer;
  font: 600 0.7rem/1 'Inter', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d9b163;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(217,177,99,0.32);
  transition: color 220ms cubic-bezier(0.16,1,0.3,1), border-color 220ms cubic-bezier(0.16,1,0.3,1);
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.sensory-reset svg { width: 11px; height: 11px; transition: transform 380ms cubic-bezier(0.16,1,0.3,1); }
.sensory-reset:hover { color: #f5ead6; border-color: #f0d089; }
.sensory-reset:hover svg { transform: rotate(-180deg); }

.sensory-family { margin-bottom: 1.7rem; }
.sensory-family:last-child { margin-bottom: 0; }
.sensory-family-label {
  display: block;
  font: 700 0.62rem/1 'Inter', sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #b89a64;
  margin-bottom: 0.85rem;
}
.sensory-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.sensory-chip {
  --chip-dot: #b89a64;
  --chip-glow: rgba(217,177,99,0.30);
  --chip-active-bg: #d9b163;
  --chip-active-fg: #2a160c;
  background: rgba(255,255,255,0.045);
  color: #ede0c2;
  border: 1px solid rgba(217,177,99,0.26);
  border-radius: 999px;
  padding: 0.62rem 1.05rem;
  font: 600 0.83rem/1 'Inter', sans-serif;
  letter-spacing: 0.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition:
    background 280ms cubic-bezier(0.16,1,0.3,1),
    color 280ms cubic-bezier(0.16,1,0.3,1),
    border-color 280ms cubic-bezier(0.16,1,0.3,1),
    transform 280ms cubic-bezier(0.16,1,0.3,1),
    box-shadow 320ms cubic-bezier(0.16,1,0.3,1),
    opacity 280ms cubic-bezier(0.16,1,0.3,1);
}
.sensory-chip::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--chip-dot);
  flex: 0 0 8px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.04);
  transition: background 240ms cubic-bezier(0.16,1,0.3,1), box-shadow 240ms cubic-bezier(0.16,1,0.3,1);
}
.sensory-chip:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--chip-dot);
  background: rgba(255,255,255,0.075);
  box-shadow: 0 8px 22px -10px var(--chip-glow);
}
.sensory-chip.is-active,
.sensory-chip.is-active:hover:not(:disabled),
.sensory-chip.is-active:focus-visible {
  background: var(--chip-active-bg);
  color: var(--chip-active-fg);
  border-color: var(--chip-active-bg);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 3px rgba(217,177,99,0.16),
    0 12px 26px -8px var(--chip-glow);
}
.sensory-chip.is-active::before,
.sensory-chip.is-active:hover:not(:disabled)::before { background: rgba(42,22,12,0.55); box-shadow: none; }

/* Locked chips - always-on notes that cannot be toggled off (cacao + dulce) */
.sensory-chip.is-locked {
  cursor: default;
  position: relative;
}
.sensory-chip.is-locked::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 8px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(42,22,12,0.55);
  box-shadow: 0 0 0 2px rgba(255,247,230,0.55);
}
.sensory-chip.is-locked:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 3px rgba(217,177,99,0.16),
    0 12px 26px -8px var(--chip-glow);
}

/* Implied chips - note shared by every currently-matched product. Soft-on look. */
.sensory-chip.is-implied {
  background: var(--chip-glow);
  color: #f5ead6;
  border-color: var(--chip-active-bg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 6px 18px -10px var(--chip-glow);
  transform: translateY(-1px);
  cursor: default;
}
.sensory-chip.is-implied::before {
  background: var(--chip-active-bg);
  box-shadow: 0 0 0 2px rgba(255,247,230,0.18);
}
.sensory-chip.is-implied:hover:not(:disabled) {
  background: var(--chip-glow);
  color: #f5ead6;
  border-color: var(--chip-active-bg);
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 6px 18px -10px var(--chip-glow);
}
.sensory-chip.is-implied:hover:not(:disabled)::before {
  background: var(--chip-active-bg);
  box-shadow: 0 0 0 2px rgba(255,247,230,0.18);
}

.sensory-chip:disabled,
.sensory-chip.is-disabled {
  opacity: 0.22;
  cursor: not-allowed;
  transform: none;
  border-color: rgba(217,177,99,0.10);
  background: rgba(255,255,255,0.02);
  box-shadow: none;
}

/* Family color tokens - cohesive cacao-trade palette (refined) */
.sensory-chip[data-sensory-family="cacao"]   { --chip-dot: #cf6e3a; --chip-glow: rgba(207,110,58,0.40); --chip-active-bg: #d97a3c; --chip-active-fg: #2a160c; }
.sensory-chip[data-sensory-family="dulce"]   { --chip-dot: #d9b163; --chip-glow: rgba(217,177,99,0.50); --chip-active-bg: #e6c479; --chip-active-fg: #2a160c; }
.sensory-chip[data-sensory-family="lacteo"]  { --chip-dot: #d6c19c; --chip-glow: rgba(214,193,156,0.45); --chip-active-bg: #e3d3b1; --chip-active-fg: #2a160c; }
.sensory-chip[data-sensory-family="madera"]  { --chip-dot: #769e6c; --chip-glow: rgba(118,158,108,0.40); --chip-active-bg: #87ad7d; --chip-active-fg: #1c2418; }
.sensory-chip[data-sensory-family="frutas"]  { --chip-dot: #b85b6e; --chip-glow: rgba(184,91,110,0.40); --chip-active-bg: #c87382; --chip-active-fg: #2a160c; }
.sensory-chip[data-sensory-family="nueces"]  { --chip-dot: #b48259; --chip-glow: rgba(180,130,89,0.40); --chip-active-bg: #c2956d; --chip-active-fg: #2a160c; }
.sensory-chip[data-sensory-family="citrico"] { --chip-dot: #dfb04a; --chip-glow: rgba(223,176,74,0.45); --chip-active-bg: #e9c264; --chip-active-fg: #2a160c; }
.sensory-chip[data-sensory-family="floral"]  { --chip-dot: #c08aa6; --chip-glow: rgba(192,138,166,0.40); --chip-active-bg: #cd9bb4; --chip-active-fg: #2a160c; }

/* ---------- RIGHT: results ---------- */
.sensory-results-head {
  margin-bottom: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.sensory-results-eyebrow {
  align-self: flex-start;
  font: 700 0.7rem/1 'Inter', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2a160c;
  background: linear-gradient(135deg, #e6c479 0%, #c9923b 100%);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 8px 22px -10px rgba(217,177,99,0.5);
}
.sensory-results-help {
  margin: 0;
  color: #c9b495;
  line-height: 1.55;
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.05rem;
}

.sensory-products-grid {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

/* ---------- product cards: cream parchment with regional accents ---------- */
.sensory-product {
  --region-color: #5d3a1f;
  --region-deep:  #2a160c;
  --region-tint:  rgba(93,58,31,0.10);
  --region-glow:  rgba(93,58,31,0.20);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 100% 90% at 100% 50%, var(--region-tint) 0%, rgba(255,247,236,0) 70%),
    linear-gradient(180deg, #fffaf0 0%, #f6e7cb 100%);
  border: 1px solid rgba(42,22,12,0.10);
  border-radius: 14px;
  padding: 0.95rem 1.05rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 132px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 8px 18px -14px rgba(0,0,0,0.4);
  transition:
    opacity 380ms cubic-bezier(0.16,1,0.3,1),
    transform 380ms cubic-bezier(0.16,1,0.3,1),
    box-shadow 380ms cubic-bezier(0.16,1,0.3,1),
    border-color 380ms cubic-bezier(0.16,1,0.3,1),
    filter 380ms cubic-bezier(0.16,1,0.3,1);
}
.sensory-product::after {
  content: '';
  position: absolute;
  right: -40px; bottom: -40px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--region-glow) 0%, transparent 70%);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 380ms cubic-bezier(0.16,1,0.3,1), transform 380ms cubic-bezier(0.16,1,0.3,1);
}
.sensory-product > * { position: relative; z-index: 1; }
.sensory-product-stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--region-color) 0%, var(--region-deep) 100%);
  z-index: 2;
}
.sensory-product:hover:not(.is-out) {
  transform: translateY(-4px);
  border-color: var(--region-color);
  box-shadow:
    0 18px 36px -18px rgba(0,0,0,0.4),
    0 0 0 1px var(--region-color);
}
.sensory-product:hover:not(.is-out)::after {
  opacity: 0.85;
  transform: scale(1.2);
}
.sensory-product.is-out {
  opacity: 0.14;
  transform: scale(0.96);
  pointer-events: none;
  filter: saturate(0.3) brightness(0.85);
}

.sensory-product-region {
  display: inline-flex; align-items: center;
  gap: 0.4rem;
  font: 700 0.58rem/1 'Inter', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--region-color);
  margin-top: 4px;
  padding-right: 80px;
  min-height: 8px;
}
.sensory-product-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--region-color);
  flex: 0 0 6px;
  box-shadow: 0 0 0 2px rgba(255,247,236,0.7);
}
.sensory-product-name {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.18;
  color: #2a160c;
  margin: 0.15rem 0 0.3rem;
  letter-spacing: -0.005em;
  padding-right: 70px;
}
.sensory-product-pct {
  position: absolute;
  top: 0.85rem;
  right: 1.05rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
  z-index: 2;
  margin: 0;
}
.sensory-product-pct strong {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.95rem;
  line-height: 0.95;
  color: var(--region-color);
  letter-spacing: -0.025em;
}
.sensory-product-pct span {
  font: 600 0.55rem/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a6a48;
}
.sensory-product-link {
  font: 700 0.64rem/1 'Inter', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--region-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  padding-bottom: 3px;
  margin-top: auto;
  transition:
    border-color 280ms cubic-bezier(0.16,1,0.3,1),
    gap 280ms cubic-bezier(0.16,1,0.3,1),
    color 280ms cubic-bezier(0.16,1,0.3,1);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.sensory-product-link span[aria-hidden] {
  display: inline-block;
  transition: transform 320ms cubic-bezier(0.16,1,0.3,1);
}
.sensory-product-link:hover {
  border-color: var(--region-color);
  gap: 0.6rem;
  color: var(--region-deep);
}
.sensory-product-link:hover span[aria-hidden] {
  transform: translateX(3px);
}

/* Region color tokens - refined sales-sheet palette (kept regional identity) */
.sensory-product[data-region="carenero"]   { --region-color: #d97a3c; --region-deep: #b3531c; --region-tint: rgba(217,122,60,0.12);  --region-glow: rgba(217,122,60,0.32); }
.sensory-product[data-region="riocaribe"]  { --region-color: #5fa078; --region-deep: #2f7050; --region-tint: rgba(95,160,120,0.12);  --region-glow: rgba(95,160,120,0.30); }
.sensory-product[data-region="sanjoaquin"] { --region-color: #9b78b8; --region-deep: #654280; --region-tint: rgba(155,120,184,0.12); --region-glow: rgba(155,120,184,0.32); }
.sensory-product[data-region="surdellago"] { --region-color: #bb5466; --region-deep: #7a2935; --region-tint: rgba(187,84,102,0.12);  --region-glow: rgba(187,84,102,0.30); }

/* Recommended state - kept available but not auto-applied (per prior feedback) */
.sensory-product.is-recommended {
  border-color: #d9b163;
  background:
    linear-gradient(180deg, rgba(217,177,99,0.16) 0%, transparent 60%),
    linear-gradient(180deg, #fffaf0 0%, #f5e6cf 100%);
  box-shadow:
    0 0 0 2px rgba(217,177,99,0.3),
    0 28px 56px -18px rgba(217,177,99,0.5);
  transform: translateY(-2px) scale(1.015);
}
.sensory-product.is-recommended::after {
  content: 'Su recomendaci\00f3n';
  position: absolute;
  top: -12px; right: 14px;
  background: linear-gradient(135deg, #e6c479 0%, #c9923b 100%);
  color: #2a160c;
  font: 800 0.6rem/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px -4px rgba(217,177,99,0.6);
}

@media (max-width: 1024px) {
  .sensory-tool-panel { grid-template-columns: 1fr; padding: 2rem; gap: 2rem; }
  .sensory-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sensory-tool { padding-top: 4rem; padding-bottom: 4rem; }
  .sensory-tool-panel { padding: 1.5rem; gap: 1.5rem; border-radius: 18px; }
  .sensory-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .sensory-product { padding: 0.9rem; min-height: 124px; }
  .sensory-product-name { font-size: 1rem; padding-right: 60px; }
  .sensory-product-region { padding-right: 65px; }
  .sensory-product-pct strong { font-size: 1.65rem; }
  .sensory-product-pct { top: 0.75rem; right: 0.9rem; }
  .sensory-attrs-title { font-size: 1.2rem; }
  .sensory-chip { padding: 0.52rem 0.88rem; font-size: 0.78rem; }
  .sensory-results-eyebrow { font-size: 0.65rem; padding: 0.5rem 0.95rem; }
}
@media (max-width: 460px) {
  /* Keep 2 columns on mobile — tighten content so cards fit at ~150-180px wide */
  .sensory-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
  .sensory-product {
    min-height: 132px;
    padding: 0.7rem 0.75rem 0.8rem;
  }
  .sensory-product-region {
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    padding-right: 0;
    line-height: 1.25;
    white-space: normal;
  }
  .sensory-product-name {
    font-size: 0.92rem;
    padding-right: 0;
    line-height: 1.2;
    margin-top: 0.15rem;
  }
  .sensory-product-pct {
    position: static;
    margin-top: 0.45rem;
    text-align: left;
  }
  .sensory-product-pct strong { font-size: 1.1rem; }
  .sensory-product-pct .pct-suffix,
  .sensory-product-pct small { font-size: 0.5rem; letter-spacing: 0.1em; }
  .sensory-product-cta { font-size: 0.6rem; letter-spacing: 0.08em; margin-top: 0.55rem; }
}


/* ============================================================
   ORIGIN CARDS — LINKED VARIANT (story.html "Las regiones")
   Inspired by Hojas de venta — Food service flip cards.
   Region color tokens: carenero / riocaribe / surdellago / sanjoaquin
   ============================================================ */

.origin-card.origin-card--linked {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  padding: 1.7rem 1.6rem 1.4rem;
  background:
    linear-gradient(180deg, var(--region-tint, rgba(255,255,255,0.05)) 0%, rgba(255,247,232,0.02) 65%),
    rgba(243, 231, 211, 0.04);
  border: 1px solid rgba(240, 208, 137, 0.18);
  border-top: none;
  overflow: hidden;
  isolation: isolate;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1), border-color 0.25s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.origin-card.origin-card--linked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, var(--region-tint, transparent) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.origin-card.origin-card--linked > * { position: relative; z-index: 2; }

.origin-card-stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--region-color, var(--gold));
  z-index: 3;
  transition: height 0.25s ease, box-shadow 0.3s ease;
}

.origin-card.origin-card--linked:hover .origin-card-stripe,
.origin-card.origin-card--linked:focus-visible .origin-card-stripe {
  height: 7px;
  box-shadow: 0 0 18px var(--region-color, transparent);
}

.origin-region-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--region-color, var(--gold-bright));
  margin-bottom: 0.55rem;
  margin-top: 0.15rem;
}
.origin-region-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--region-color, var(--gold-bright));
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04), 0 0 10px var(--region-color, transparent);
}

.origin-card.origin-card--linked .origin-name {
  font-size: 1.5rem;
  margin-bottom: 0.35rem;
}
.origin-card.origin-card--linked .origin-pct {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--ink-on-dark-mute);
  margin-bottom: 1rem;
}
.origin-card.origin-card--linked .origin-notes {
  flex: 1;
  font-size: 0.92rem;
  margin-bottom: 1.25rem;
}

.origin-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--region-color, var(--gold-bright));
  padding-top: 0.85rem;
  border-top: 1px solid rgba(240, 208, 137, 0.16);
  transition: color 0.25s ease;
}
.origin-card-cta span[aria-hidden] {
  display: inline-block;
  transition: transform 0.25s ease;
}

.origin-card.origin-card--linked:hover {
  transform: translateY(-6px);
  border-color: var(--region-color, var(--gold));
  background:
    linear-gradient(180deg, var(--region-tint-strong, rgba(255,255,255,0.07)) 0%, rgba(255,247,232,0.03) 70%),
    rgba(243, 231, 211, 0.05);
  box-shadow:
    0 28px 56px -22px rgba(0,0,0,0.65),
    0 0 0 1px var(--region-color, rgba(240,208,137,0.4));
}
.origin-card.origin-card--linked:hover::after { opacity: 0.55; }
.origin-card.origin-card--linked:hover .origin-card-cta span[aria-hidden] { transform: translateX(5px); }

.origin-card.origin-card--linked:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
}

/* Region color tokens — brightened versions of the food-service palette */
.origin-card.origin-card--linked[data-region="carenero"] {
  --region-color: #e08344;
  --region-tint: rgba(217, 122, 60, 0.16);
  --region-tint-strong: rgba(217, 122, 60, 0.22);
}
.origin-card.origin-card--linked[data-region="riocaribe"] {
  --region-color: #4ea874;
  --region-tint: rgba(78, 168, 116, 0.16);
  --region-tint-strong: rgba(78, 168, 116, 0.22);
}
.origin-card.origin-card--linked[data-region="surdellago"] {
  --region-color: #c25e6f;
  --region-tint: rgba(194, 94, 111, 0.18);
  --region-tint-strong: rgba(194, 94, 111, 0.24);
}
.origin-card.origin-card--linked[data-region="sanjoaquin"] {
  --region-color: #a988c4;
  --region-tint: rgba(169, 136, 196, 0.18);
  --region-tint-strong: rgba(169, 136, 196, 0.24);
}

/* Tablet */
@media (max-width: 960px) {
  .origin-card.origin-card--linked { padding: 1.6rem 1.4rem 1.3rem; }
  .origin-card.origin-card--linked .origin-name { font-size: 1.35rem; }
}
/* Mobile */
@media (max-width: 600px) {
  .origin-card.origin-card--linked { padding: 1.5rem 1.3rem 1.2rem; }
  .origin-card.origin-card--linked:hover { transform: none; }
}

/* ===== END ORIGIN CARDS LINKED VARIANT ===== */


/* ============================================================
   CACAO MAP — REGION COLOR THEMING (index.html "Orígenes del cacao")
   Same palette as story.html "Las regiones" linked cards.
   - Per-marker color always visible on the SVG map
   - Per-tab dot + colored active state
   - Detail card switches accent color via [data-active-region]
   ============================================================ */

/* Brightened region tokens (same as story.html origin-card--linked) */
.cacao-map {
  --color-carenero:    #e08344;
  --color-riocaribe:   #4ea874;
  --color-surdellago:  #c25e6f;
  --color-sanjoaquin:  #a988c4;
  --tint-carenero:     rgba(224, 131, 68, 0.18);
  --tint-riocaribe:    rgba(78, 168, 116, 0.18);
  --tint-surdellago:   rgba(194, 94, 111, 0.18);
  --tint-sanjoaquin:   rgba(169, 136, 196, 0.20);
}

/* === SVG MARKERS — always show region color === */
.cacao-map .region-marker[data-region-name="carenero"]   { --m: var(--color-carenero); }
.cacao-map .region-marker[data-region-name="riocaribe"]  { --m: var(--color-riocaribe); }
.cacao-map .region-marker[data-region-name="surdellago"] { --m: var(--color-surdellago); }
.cacao-map .region-marker[data-region-name="sanjoaquin"] { --m: var(--color-sanjoaquin); }

.cacao-map .region-marker[data-region-name] .region-dot {
  fill: var(--m);
  stroke: rgba(42, 22, 12, 0.85);
}
.cacao-map .region-marker[data-region-name] .region-pulse {
  fill: var(--m);
  opacity: 0.22;
}
.cacao-map .region-marker[data-region-name] .region-ring {
  stroke: var(--m);
}
.cacao-map .region-marker[data-region-name] .region-label {
  fill: var(--m);
}
.cacao-map .region-marker[data-region-name] .region-label-line {
  stroke: var(--m);
}
/* Active marker: dot stays its color (not generic cream), with stronger ring */
.cacao-map .region-marker[data-region-name].is-active .region-dot,
.cacao-map .region-marker[data-region-name]:hover .region-dot,
.cacao-map .region-marker[data-region-name]:focus-visible .region-dot {
  fill: var(--m);
  stroke: #fff7e6;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 6px var(--m));
}
.cacao-map .region-marker[data-region-name].is-active .region-pulse {
  opacity: 0.35;
}

/* === REGION TABS — colored dot + colored active state === */
.cacao-detail .region-tab[data-region-name] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.cacao-detail .region-tab[data-region-name]::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  opacity: 0.75;
  transition: opacity 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.cacao-detail .region-tab[data-region-name="carenero"]::before   { background: var(--color-carenero); }
.cacao-detail .region-tab[data-region-name="riocaribe"]::before  { background: var(--color-riocaribe); }
.cacao-detail .region-tab[data-region-name="surdellago"]::before { background: var(--color-surdellago); }
.cacao-detail .region-tab[data-region-name="sanjoaquin"]::before { background: var(--color-sanjoaquin); }

.cacao-detail .region-tab[data-region-name]:hover::before {
  opacity: 1;
  transform: scale(1.15);
}
.cacao-detail .region-tab[data-region-name].is-active::before {
  opacity: 1;
  transform: scale(1.25);
  box-shadow: 0 0 0 3px rgba(255, 247, 230, 0.06), 0 0 12px currentColor;
}

.cacao-detail .region-tab[data-region-name="carenero"].is-active   { color: var(--color-carenero); border-bottom-color: var(--color-carenero); }
.cacao-detail .region-tab[data-region-name="riocaribe"].is-active  { color: var(--color-riocaribe); border-bottom-color: var(--color-riocaribe); }
.cacao-detail .region-tab[data-region-name="surdellago"].is-active { color: var(--color-surdellago); border-bottom-color: var(--color-surdellago); }
.cacao-detail .region-tab[data-region-name="sanjoaquin"].is-active { color: var(--color-sanjoaquin); border-bottom-color: var(--color-sanjoaquin); }

/* === DETAIL CARD — accent switches with active region === */
.cacao-map[data-active-region="carenero"]   { --active-region-color: var(--color-carenero);   --active-region-tint: var(--tint-carenero); }
.cacao-map[data-active-region="riocaribe"]  { --active-region-color: var(--color-riocaribe);  --active-region-tint: var(--tint-riocaribe); }
.cacao-map[data-active-region="surdellago"] { --active-region-color: var(--color-surdellago); --active-region-tint: var(--tint-surdellago); }
.cacao-map[data-active-region="sanjoaquin"] { --active-region-color: var(--color-sanjoaquin); --active-region-tint: var(--tint-sanjoaquin); }

.cacao-map[data-active-region] .cacao-detail .detail-card {
  border-left-color: var(--active-region-color, var(--gold-bright));
  border-left-width: 3px;
  background:
    linear-gradient(180deg, var(--active-region-tint, rgba(255,255,255,0.04)) 0%, rgba(243, 231, 211, 0.015) 70%);
  transition: border-color 0.4s ease, background 0.4s ease;
}
.cacao-map[data-active-region] .cacao-detail .detail-number {
  color: var(--active-region-color, var(--gold-bright));
  transition: color 0.4s ease;
}
.cacao-map[data-active-region] .cacao-detail .detail-subtitle {
  color: var(--active-region-color, var(--gold-bright));
  transition: color 0.4s ease;
}
.cacao-map[data-active-region] .cacao-detail .detail-progress #detailProgress {
  background: var(--active-region-color, var(--gold-bright));
  transition: background 0.4s ease;
}
.cacao-map[data-active-region] .cacao-detail .detail-divider {
  border-color: var(--active-region-color, var(--gold-bright));
  transition: border-color 0.4s ease;
}
.cacao-map[data-active-region] .cacao-detail .detail-title em {
  color: var(--active-region-color, var(--gold-bright));
  transition: color 0.4s ease;
}


/* ============================================================
   MAP REDESIGN — REGION WASH, TOPO OVERLAY, MULTI-PULSE,
   ORNATE COMPASS, VIGNETTE, DETAIL EXTRAS (coords + sensory)
   ============================================================ */

/* SVG wrap vignette — depth around the country shape */
.cacao-map .cacao-svg-wrap { isolation: isolate; }
.cacao-map .cacao-svg-wrap::before {
  content: '';
  position: absolute;
  inset: -8% -6%;
  background: radial-gradient(ellipse at 50% 55%, transparent 38%, rgba(0,0,0,0.32) 78%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
  z-index: 0;
}
.cacao-map .cacao-svg-wrap > svg { position: relative; z-index: 1; }

/* Region area washes — only the active region's wash is visible */
.cacao-map .vz-region-wash {
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.cacao-map[data-active-region="carenero"]   .vz-region-wash[data-region-wash="carenero"],
.cacao-map[data-active-region="riocaribe"]  .vz-region-wash[data-region-wash="riocaribe"],
.cacao-map[data-active-region="surdellago"] .vz-region-wash[data-region-wash="surdellago"],
.cacao-map[data-active-region="sanjoaquin"] .vz-region-wash[data-region-wash="sanjoaquin"] {
  opacity: 1;
}

/* Topographic wave overlay — subtle constant texture inside outline */
.cacao-map .vz-topo {
  opacity: 0.07;
  mix-blend-mode: screen;
}

/* Multi-pulse stagger — three concentric rings emanating with delay */
.cacao-map .region-pulse-1 { animation-delay: 0s; }
.cacao-map .region-pulse-2 { animation-delay: 0.7s; opacity: 0.08; }
.cacao-map .region-pulse-3 { animation-delay: 1.4s; opacity: 0.05; }

.cacao-map .region-marker[data-region-name].is-active .region-pulse {
  fill: var(--m);
}
.cacao-map .region-marker[data-region-name].is-active .region-pulse-1 { opacity: 0.45; animation-duration: 2.4s; }
.cacao-map .region-marker[data-region-name].is-active .region-pulse-2 { opacity: 0.32; animation-duration: 2.4s; }
.cacao-map .region-marker[data-region-name].is-active .region-pulse-3 { opacity: 0.22; animation-duration: 2.4s; }

@media (prefers-reduced-motion: reduce) {
  .cacao-map .region-pulse-2,
  .cacao-map .region-pulse-3 { display: none; }
}

/* Ornate compass — minor cardinal labels (S, E, O) smaller + dimmer */
.cacao-map .vz-compass-minor {
  font-size: 6.5px;
  opacity: 0.55;
}
.cacao-map .vz-compass-ring {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 0.6;
  opacity: 0.45;
}
.cacao-map .vz-compass-tick {
  stroke: var(--gold-bright);
  stroke-width: 0.7;
  opacity: 0.55;
}

/* Detail card — coordinates strip */
.cacao-detail .detail-coords {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
  font-family: var(--serif);
  font-size: 0.74rem;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--cream-mute);
  opacity: 0.88;
}
.cacao-detail .detail-coords::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--active-region-color, var(--gold-bright));
  opacity: 0.7;
  flex: 0 0 auto;
}
.cacao-detail .detail-coords .coord-sep {
  margin: 0 0.45em;
  opacity: 0.5;
}

/* Detail card — sensory profile bars */
.cacao-detail .detail-sensory {
  margin: 1.3rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px dashed rgba(243, 231, 211, 0.1);
}
.cacao-detail .detail-sensory-title {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-mute);
  margin: 0 0 0.85rem;
}
.cacao-detail .sense-row {
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: center;
  gap: 0.85rem;
  padding: 0.32rem 0;
}
.cacao-detail .sense-name {
  font-family: var(--serif);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--cream);
  white-space: nowrap;
}
.cacao-detail .sense-bar {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: rgba(243, 231, 211, 0.08);
  overflow: hidden;
}
.cacao-detail .sense-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--sense-pct, 0%);
  background: linear-gradient(90deg,
    var(--active-region-color, var(--gold-bright)) 0%,
    rgba(229, 184, 100, 0.55) 100%);
  border-radius: 2px;
  transition: width 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================================
   REGION NAV BUTTONS — PER-REGION HOVER/ACTIVE COLOR
   ------------------------------------------------------------
   Both the page-hero pills (.region-anchors) and the sticky
   top nav (.sticky-region-nav) tint to the matching region
   color on hover, focus and active/click. Keeps the user's
   "I'm heading to X" sense of place consistent with the rest
   of the site's region palette.
   ============================================================ */

/* Hero pills (.products-hero .region-anchors) */
.products-hero .region-anchors a[href="#carenero"]:hover,
.products-hero .region-anchors a[href="#carenero"]:focus-visible,
.products-hero .region-anchors a[href="#carenero"]:active {
  background: #e08344;
  border-color: #e08344;
  color: #2a160c;
  box-shadow: 0 8px 22px -10px rgba(224, 131, 68, 0.7);
}
.products-hero .region-anchors a[href="#riocaribe"]:hover,
.products-hero .region-anchors a[href="#riocaribe"]:focus-visible,
.products-hero .region-anchors a[href="#riocaribe"]:active {
  background: #4ea874;
  border-color: #4ea874;
  color: #08210f;
  box-shadow: 0 8px 22px -10px rgba(78, 168, 116, 0.7);
}
.products-hero .region-anchors a[href="#surdellago"]:hover,
.products-hero .region-anchors a[href="#surdellago"]:focus-visible,
.products-hero .region-anchors a[href="#surdellago"]:active {
  background: #c25e6f;
  border-color: #c25e6f;
  color: #2a0a10;
  box-shadow: 0 8px 22px -10px rgba(194, 94, 111, 0.7);
}
.products-hero .region-anchors a[href="#sanjoaquin"]:hover,
.products-hero .region-anchors a[href="#sanjoaquin"]:focus-visible,
.products-hero .region-anchors a[href="#sanjoaquin"]:active {
  background: #a988c4;
  border-color: #a988c4;
  color: #1d1029;
  box-shadow: 0 8px 22px -10px rgba(169, 136, 196, 0.7);
}

/* Sticky top nav (.sticky-region-nav) — hover + active scroll-spy state */
.sticky-region-nav a[data-region="carenero"]:hover,
.sticky-region-nav a[data-region="carenero"]:focus-visible,
.sticky-region-nav a[data-region="carenero"].is-active {
  background: #e08344;
  color: #2a160c;
}
.sticky-region-nav a[data-region="riocaribe"]:hover,
.sticky-region-nav a[data-region="riocaribe"]:focus-visible,
.sticky-region-nav a[data-region="riocaribe"].is-active {
  background: #4ea874;
  color: #08210f;
}
.sticky-region-nav a[data-region="surdellago"]:hover,
.sticky-region-nav a[data-region="surdellago"]:focus-visible,
.sticky-region-nav a[data-region="surdellago"].is-active {
  background: #c25e6f;
  color: #2a0a10;
}
.sticky-region-nav a[data-region="sanjoaquin"]:hover,
.sticky-region-nav a[data-region="sanjoaquin"]:focus-visible,
.sticky-region-nav a[data-region="sanjoaquin"].is-active {
  background: #a988c4;
  color: #1d1029;
}


/* ============================================================
   RESPONSIBILITY PAGE HERO - forest path photo treatment
   Mirrors the products-hero pattern: full-bleed photo with
   warm cacao-tinted dark overlay so headline + lede stay
   readable. Adds a subtle gold gradient on top to echo the
   premium feel of the rest of the site.
   ============================================================ */
.page-hero.responsibility-hero {
  position: relative;
  min-height: 64vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 7rem 0 5rem;
  border-bottom: none;
  background:
    linear-gradient(
      135deg,
      rgba(26, 14, 8, 0.82) 0%,
      rgba(26, 14, 8, 0.55) 55%,
      rgba(26, 14, 8, 0.82) 100%
    ),
    url('../images/resp-hero.png') center/cover no-repeat;
  color: var(--ink-on-dark, #fbf6ee);
  overflow: hidden;
}
.page-hero.responsibility-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(194, 150, 76, 0.18), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(78, 168, 116, 0.14), transparent 60%);
  pointer-events: none;
}
.page-hero.responsibility-hero .container {
  position: relative;
  z-index: 1;
}
.page-hero.responsibility-hero .eyebrow {
  color: var(--gold-bright, #f0d089);
}
.page-hero.responsibility-hero h1,
.page-hero.responsibility-hero .display {
  color: var(--ink-on-dark, #fbf6ee);
}
.page-hero.responsibility-hero h1 em,
.page-hero.responsibility-hero .display em {
  color: var(--gold-bright, #f0d089);
  font-style: italic;
}
.page-hero.responsibility-hero p,
.page-hero.responsibility-hero .lede {
  color: rgba(251, 246, 238, 0.88);
}

@media (max-width: 820px) {
  .page-hero.responsibility-hero { min-height: 56vh; padding: 6rem 0 4rem; }
}
@media (max-width: 620px) {
  .page-hero.responsibility-hero { min-height: 50vh; padding: 5rem 0 3.5rem; }
}
/* ===== END RESPONSIBILITY HERO ===== */


/* ============================================================
   STORY PAGE HERO - cacao pod photo treatment
   Mirrors the responsibility-hero pattern with a slightly warmer
   tint to honor the heritage feel of "Nuestra Historia". The
   pod1 photo is wide (2528x1204) so it scales beautifully edge-
   to-edge as a background.
   ============================================================ */
.page-hero.story-hero {
  position: relative;
  min-height: 64vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 7rem 0 5rem;
  border-bottom: none;
  background:
    linear-gradient(
      135deg,
      rgba(26, 14, 8, 0.84) 0%,
      rgba(26, 14, 8, 0.5) 55%,
      rgba(26, 14, 8, 0.84) 100%
    ),
    url('../images/story-hero.png') center/cover no-repeat;
  color: var(--ink-on-dark, #fbf6ee);
  overflow: hidden;
}
.page-hero.story-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(217, 122, 60, 0.18), transparent 55%),
    radial-gradient(circle at 82% 72%, rgba(194, 150, 76, 0.16), transparent 60%);
  pointer-events: none;
}
.page-hero.story-hero .container {
  position: relative;
  z-index: 1;
}
.page-hero.story-hero .eyebrow {
  color: var(--gold-bright, #f0d089);
}
.page-hero.story-hero h1,
.page-hero.story-hero .display {
  color: var(--ink-on-dark, #fbf6ee);
}
.page-hero.story-hero h1 em,
.page-hero.story-hero .display em {
  color: var(--gold-bright, #f0d089);
  font-style: italic;
}
.page-hero.story-hero p,
.page-hero.story-hero .lede {
  color: rgba(251, 246, 238, 0.88);
}

@media (max-width: 820px) {
  .page-hero.story-hero { min-height: 56vh; padding: 6rem 0 4rem; }
}
@media (max-width: 620px) {
  .page-hero.story-hero { min-height: 50vh; padding: 5rem 0 3.5rem; }
}
/* ===== END STORY HERO ===== */


/* ===== START BROWNIE TILE CENTERING ===== */
.recipe-tile[data-recipe="brownies"] .tile-media img {
  object-position: 50% 22%;
  transform: scale(1.12);
  transform-origin: 38% 22%;
}
.recipe-tile[data-recipe="brownies"]:hover .tile-media img {
  transform: scale(1.18);
}
/* ===== END BROWNIE TILE CENTERING ===== */


/* ===== START HELADO TILE CENTERING ===== */
.recipe-tile[data-recipe="helado"] .tile-media img {
  object-position: 50% 30%;
}
/* ===== END HELADO TILE CENTERING ===== */


/* ===== START TARTA + FONDUE TILE CENTERING ===== */
.recipe-tile[data-recipe="tarta"] .tile-media img {
  /* Match the breathing-room feel of the helado tile (50% 30%): show
     marble above + below the tart instead of zooming into the pastry */
  object-position: 50% 50%;
}
.recipe-tile[data-recipe="fondue"] .tile-media img {
  object-position: 50% 35%;
}
/* ===== END TARTA + FONDUE TILE CENTERING ===== */


/* ===== START MOBILE PRODUCTS LAYOUT FIX (region nav single-line + 2-col grid) ===== */
@media (max-width: 620px) {
  /* Two-column product grid on mobile */
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    max-width: none;
  }
  /* Sur del Lago + San Joaquín are single-product sections — keep 1-up on mobile */
  .product-grid.product-grid-single {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .product-grid .product-card {
    border-radius: 14px;
  }
  .product-grid .product-card .product-meta {
    padding: 0.95rem 0.85rem 1.05rem;
  }
  .product-grid .product-card .product-name,
  .product-grid .product-card h3,
  .product-grid .product-card h4 {
    font-size: 1.05rem;
    line-height: 1.18;
  }
  .product-grid .product-card .product-region,
  .product-grid .product-card .product-tagline {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }
  .product-grid .product-card p {
    font-size: 0.78rem;
    line-height: 1.4;
  }
  .product-grid .product-card .pct-badge {
    width: 42px;
    height: 42px;
    top: 0.5rem;
    left: 0.5rem;
  }
  .product-grid .product-card .pct-badge .pct-num {
    font-size: 0.78rem;
  }
  .product-grid .product-card .pct-badge .pct-label {
    font-size: 0.42rem;
    letter-spacing: 0.08em;
    margin-top: 1px;
  }
  .product-grid .product-card .award-badge {
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.5rem;
    padding: 0.28rem 0.45rem 0.28rem 0.36rem;
  }

  /* Single-line region nav rows (in-hero + sticky) — centered, scroll only if overflow */
  .products-hero .region-anchors {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: center;
    gap: 0.4rem;
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 100%;
  }
  .products-hero .region-anchors::-webkit-scrollbar { display: none; }
  .products-hero .region-anchors a {
    flex-shrink: 0;
    font-size: 0.58rem;
    padding: 0.45rem 0.7rem;
    letter-spacing: 0.1em;
  }

  .sticky-region-nav .container {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.55rem 0.6rem;
  }
  .sticky-region-nav .container::-webkit-scrollbar { display: none; }
  .sticky-region-nav a {
    flex-shrink: 0;
    font-size: 0.56rem;
    padding: 0.36rem 0.6rem;
    letter-spacing: 0.08em;
  }
}

/* Extra-tight tweaks for very narrow phones */
@media (max-width: 380px) {
  .product-grid {
    gap: 0.7rem;
  }
  .product-grid .product-card .product-meta {
    padding: 0.8rem 0.7rem 0.9rem;
  }
  .product-grid .product-card .product-name {
    font-size: 0.95rem;
  }
  .products-hero .region-anchors a,
  .sticky-region-nav a {
    font-size: 0.52rem;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.55rem;
  }
}
/* ===== END MOBILE PRODUCTS LAYOUT FIX ===== */


/* ===== GLOBAL OVERFLOW GUARD — RE-ENABLED =====
   Now applied via `overflow-x: clip` on body (see top of file). Per modern
   CSS Box Model spec, `clip` does NOT create a scroll container, so
   position: sticky on .site-header still works. This prevents the cream
   strip / horizontal scrollbar that previously appeared when any descendant
   accidentally exceeded the viewport width.
   ============================================== */


/* ===== START FLIP CARD TOUCH-TILT FIX =====
   The hover-tilt rules apply rotateY(-12deg) as preview wiggle and
   rotateY(168deg) on the flipped state. On touch devices :hover sticks
   after tap, and on hybrid devices (Surface, iPad with mouse) hover
   actually fires — both cases freeze the card at an angle. The fix:
   force .is-flipped to ALWAYS land on exactly 180deg, regardless of
   hover/device. Universal !important wins over any earlier hover-tilt
   rule and works on every device. */
.region-card.is-flipped .flip-card-inner,
.program-card.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg) !important;
}
/* Also suppress the preview-wiggle on touch (hybrid devices keep hover) */
@media (hover: none) {
  .region-card:not(.is-flipped):hover .flip-card-inner,
  .program-card.flip-card:not(.is-flipped):hover .flip-card-inner {
    transform: none !important;
    box-shadow: none !important;
  }
}
/* ===== END FLIP CARD TOUCH-TILT FIX ===== */


/* ===== START PRO SECTION FLIP CARDS — MOBILE OPTIMIZATIONS =====
   Books + sales sheets jumped 4 cols → 1 col at 760px wasting space on
   tablets and large phones, the hint text said "Pasar para girar" (hover
   only), and once flipped there was no obvious cue to tap-back. */

/* Two-column intermediate range (481-760px) for both grids */
@media (max-width: 760px) and (min-width: 481px) {
  .books-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 1rem;
  }
  .book-flip { max-width: none; }
  .book-meta { padding: 1rem 0.95rem 1.1rem; }
  .book-meta h3 { font-size: 1.05rem; line-height: 1.22; }
  .book-subtitle { font-size: 0.85rem; line-height: 1.32; }
  .book-author { font-size: 0.7rem; line-height: 1.35; }
  .book-blurb { font-size: 0.8rem; line-height: 1.45; }
  .book-virtual { font-size: 0.74rem; padding-top: 0.7rem; }
  .book-download { padding: 0.6rem 0.85rem; font-size: 0.78rem; }
  .book-download-meta { font-size: 0.65rem; }

  .sheets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    max-width: none;
  }
  .sheet-front-title { font-size: 1.5rem; }
  .sheet-front-eyebrow { font-size: 0.66rem; }
  .sheet-front-locale { font-size: 0.75rem; }
}

/* Touch-friendly hint text: swap "Pasar para girar" for "Toque para girar".
   Hide the original hint and inject a touch-specific one via ::after on the
   front face wrapper. */
@media (hover: none) {
  .book-flip-hint { display: none !important; }
  .book-face--front::after {
    content: 'Toque para girar';
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(26, 14, 8, 0.78);
    color: #f0d089;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0.9;
    z-index: 5;
  }
  /* Once flipped, we don't show the hint anymore (back face is visible) */
  .book-flip.is-flipped .book-face--front::after { opacity: 0; }
}

/* "Tap to return" affordance — small circular badge on the back face of any
   flipped card. Lives on both books and sheets back faces. */
.book-face--back,
.sheet-face--back { position: absolute; }
.book-flip.is-flipped .book-face--back::after,
.sheet-flip-card.is-flipped .sheet-face--back::after {
  content: '\21BA'; /* anti-clockwise arrow */
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 14, 8, 0.55);
  color: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  font-size: 1.05rem;
  font-weight: 700;
  pointer-events: none;
  z-index: 6;
  /* Pulse once on flip-in to draw the eye */
  animation: flipReturnPulse 1.6s ease-out 0.5s 1;
}
@keyframes flipReturnPulse {
  0%   { transform: scale(0.85); opacity: 0; }
  30%  { transform: scale(1.15); opacity: 1; }
  60%  { transform: scale(1);    opacity: 1; }
  100% { transform: scale(1);    opacity: 0.9; }
}

/* Snappier flip transition on touch (slow flip feels sluggish on mobile) */
@media (hover: none) {
  .book-flip .flip-card-inner,
  .sheet-flip-card .flip-card-inner {
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
/* ===== END PRO SECTION FLIP CARDS — MOBILE OPTIMIZATIONS ===== */


/* ===== START NUESTRO MÉTODO — MOBILE V3: ACTIVE-DETAIL ABOVE PASOS =====
   Mobile-only redesign of the homepage process diagram.
   Pattern: tab-content active-above-tabs.
   - Detail card (icon + paso label + name + description) is rendered FIRST
     and only shows the currently active step.
   - Below it, 2-col grid of paso buttons with paso 5 centered alone in
     row 3.
   - Tapping any button updates the detail above (existing JS).
   Desktop layout >820px is untouched. */
@media (max-width: 820px) {
  .process-hint { display: none; }
  .process-mobile-grid { display: none; }

  /* Establish flex order so .process-detail can sit BEFORE .process-steps */
  .process .container { display: flex; flex-direction: column; }
  .process-header { order: 0; }
  .process-detail  { order: 1; }
  .process-steps   { order: 2; }

  /* The detail card on mobile becomes a richer panel with icon */
  .process-detail {
    margin-top: 1.6rem;
    margin-bottom: 1.4rem;
  }
  .detail-card {
    text-align: center;
    padding: 1.6rem 1.4rem 1.7rem;
    border: 1px solid rgba(216, 176, 106, 0.22);
    border-radius: 14px;
    background: rgba(194, 150, 76, 0.07);
  }
  .detail-card .detail-icon {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto 1rem;
    object-fit: contain;
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(216, 176, 106, 0.22));
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .detail-card:not(.is-visible) .detail-icon {
    opacity: 0;
    transform: scale(0.92);
  }
  .detail-step {
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    color: var(--gold);
    margin: 0 0 0.5rem;
  }
  .detail-title {
    font-size: 1.25rem;
    line-height: 1.25;
    margin: 0 0 0.7rem;
  }
  .detail-body {
    font-size: 0.86rem;
    line-height: 1.55;
    margin: 0;
    color: rgba(243, 231, 211, 0.82);
  }

  /* Paso buttons — 2-col grid, no icons inside (icon is in the detail card now) */
  .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.65rem;
    margin-top: 0.4rem;
  }
  .process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Reduced top/bottom padding so each box is shorter */
    padding: 0.55rem 0.6rem 0.65rem;
    border: 1px solid rgba(243, 231, 211, 0.1);
    border-radius: 10px;
    background: rgba(243, 231, 211, 0.025);
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
                transform 0.3s var(--ease);
  }
  .process-step.is-active {
    background: rgba(194, 150, 76, 0.16);
    border-color: rgba(216, 176, 106, 0.55);
    box-shadow: 0 6px 16px -8px rgba(216, 176, 106, 0.35);
  }
  .process-step:hover,
  .process-step:focus-visible { transform: none; }

  /* Same font sizes as before, but tighter vertical spacing between elements */
  .step-number {
    display: block;
    margin: 0 0 0.2rem;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    color: var(--gold);
  }
  .step-icon-wrap { display: none; }
  .step-label {
    margin: 0 0 0.15rem;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    line-height: 1.2;
  }
  .step-name {
    font-size: 1rem;
    line-height: 1.15;
  }
  .process-step::after { display: none; }

  /* Paso 5 alone, centered — exactly the same width as boxes 1-4
     (col-gap 0.65rem → half-gap 0.325rem; 50% - 0.325rem = column width) */
  .process-step:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.325rem);
  }
}

/* Desktop only: hide the new mobile detail icon and keep prior layout */
@media (min-width: 821px) {
  .detail-card .detail-icon { display: none; }
}

/* Hide the legacy v2 mobile grid (5 icon+description rows) at every size.
   It still lives in index.html for back-compat, but V3 (detail-card panel)
   replaces it on mobile, and on desktop it should never appear. */
.process-mobile-grid { display: none !important; }

/* Tighter sizing on very narrow phones */
@media (max-width: 380px) {
  .detail-card { padding: 1.35rem 1.1rem 1.45rem; }
  .detail-card .detail-icon { width: 84px; height: 84px; margin-bottom: 0.85rem; }
  .detail-title { font-size: 1.15rem; }
  .detail-body { font-size: 0.82rem; }

  .process-step { padding: 0.5rem 0.5rem 0.6rem; }
  .step-number { font-size: 0.78rem; }
  .step-name { font-size: 0.92rem; }
  .step-label { font-size: 0.62rem; }
}
/* ===== END NUESTRO MÉTODO — MOBILE V3 ===== */


/* ===== START MOBILE 2-COL GRIDS — 6 SECTIONS =====
   Forces minimum 2 columns on mobile for: Las regiones, Nuestros valores,
   Nuestros pilares, Programa Más y Mejor Cacao, Nuestros programas,
   Toda la colección. Desktop layouts unchanged. */
@media (max-width: 820px) {

  /* (1) Las regiones — kept at 1 column on mobile (per user request).
     Existing @max-width:820px rule already collapses .origins to 1fr;
     no override added here. */

  /* (2) Nuestros valores — kept at 1 column on mobile (per user request).
     Existing @max-width:640px rule already sets pillars--three to 1fr. */

  /* (3) Nuestros pilares — index.html + responsibility.html (4 pillars → 2×2) */
  .pillars.pillars-iconic {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.95rem;
  }
  .pillars.pillars-iconic .pillar {
    padding: 1.4rem 1rem 1.5rem;
  }
  .pillars.pillars-iconic .pillar-visual--image img {
    width: 64px;
    height: 64px;
  }
  .pillars.pillars-iconic .pillar h3 {
    font-size: 1rem;
    line-height: 1.22;
  }
  .pillars.pillars-iconic .pillar p {
    font-size: 0.78rem;
    line-height: 1.45;
  }
  .pillars.pillars-iconic .pillar-label {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }

  /* (4) Programa Más y Mejor Cacao — kept at 1 column on mobile (per user
     request). Existing @max-width:600px rule already sets it to 1fr; no
     override added here. */

  /* (5) Nuestros programas — kept at 1 column on mobile (per user request).
     Existing @max-width:900px rule already sets grid-template-columns: 1fr;
     no override added here. */

  /* (6) Toda la colección — recipes.html (8 recipe tiles → 2×4) */
  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
  /* Tighter padding on the inner content container (was wrongly applied to
     .tile-meta which made the time/difficulty row look indented vs the
     title/description below) */
  .collection-grid .recipe-tile .tile-body {
    padding: 0.95rem 0.9rem 1.1rem;
  }
  .collection-grid .recipe-tile h3,
  .collection-grid .recipe-tile .tile-title {
    font-size: 1rem;
    line-height: 1.2;
  }
  .collection-grid .recipe-tile .tile-eyebrow,
  .collection-grid .recipe-tile .tile-region {
    font-size: 0.6rem;
    letter-spacing: 0.16em;
  }
  .collection-grid .recipe-tile p,
  .collection-grid .recipe-tile .tile-blurb {
    font-size: 0.78rem;
    line-height: 1.4;
  }
  .collection-grid .recipe-tile .tile-cta {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }
}

/* Tighter still on very narrow phones */
@media (max-width: 380px) {
  .pillars.pillars-iconic,
  .collection-grid { gap: 0.65rem !important; }

  .pillars.pillars-iconic .pillar-visual--image img { width: 56px; height: 56px; }
  .pillars.pillars-iconic .pillar h3 { font-size: 0.92rem; }
  .pillars.pillars-iconic .pillar p { font-size: 0.74rem; }

  .collection-grid .recipe-tile h3,
  .collection-grid .recipe-tile .tile-title { font-size: 0.92rem; }
}
/* ===== END MOBILE 2-COL GRIDS ===== */


/* ===== START RECIPE MODAL HERO — PER-RECIPE CENTERING =====
   Default .recipe-modal-hero img uses object-position: center which
   miscrops portrait photos (brownies, helado, tarta, fondue) for the
   modal's landscape/portrait hero. Per-recipe object-position keeps the
   main subject in frame on both desktop (left column ~36% width) and
   mobile (top, aspect 4:3). The JS sets data-current-recipe on the
   modal whenever a recipe is opened. */
.recipe-modal[data-current-recipe="brownies"] .recipe-modal-hero img {
  object-position: 50% 28%;
}
.recipe-modal[data-current-recipe="helado"] .recipe-modal-hero img {
  object-position: 50% 32%;
}
.recipe-modal[data-current-recipe="tarta"] .recipe-modal-hero img {
  object-position: 50% 38%;
}
.recipe-modal[data-current-recipe="fondue"] .recipe-modal-hero img {
  object-position: 50% 36%;
}
/* On mobile (modal stacks: image on top, fixed 4:3 aspect-ratio) we want
   slightly more space at top so the dish stays in the visible portion */
@media (max-width: 760px) {
  .recipe-modal[data-current-recipe="brownies"] .recipe-modal-hero img {
    object-position: 50% 32%;
  }
  .recipe-modal[data-current-recipe="helado"] .recipe-modal-hero img {
    object-position: 50% 35%;
  }
  .recipe-modal[data-current-recipe="tarta"] .recipe-modal-hero img {
    object-position: 50% 42%;
  }
  .recipe-modal[data-current-recipe="fondue"] .recipe-modal-hero img {
    object-position: 50% 40%;
  }
}
/* ===== END RECIPE MODAL HERO ===== */


/* ===== START RECIPE TILE META — MOBILE LINE-WRAP FIX =====
   In 2-col mobile layout the .tile-meta items ("15 min", "Fácil", etc.)
   were wrapping mid-word ("15 / MIN") because the card got narrower than
   the items can fit on one line. Lock each item to nowrap, let the flex
   container wrap whole items, and tighten font on the smallest viewports. */
@media (max-width: 760px) {
  .tile-meta {
    flex-wrap: wrap;
    gap: 0.4rem 0.7rem;
    font-size: 0.7rem;
  }
  .tile-meta li {
    white-space: nowrap;
  }
  .tile-meta .meta-icon { font-size: 0.85rem; }
}
@media (max-width: 380px) {
  .tile-meta {
    gap: 0.3rem 0.55rem;
    font-size: 0.65rem;
  }
  .tile-meta .meta-icon { font-size: 0.78rem; }
}
/* ===== END RECIPE TILE META ===== */


/* ===== START MAS Y MEJOR CACAO 1-COL ON ALL MOBILE =====
   The base .origins-flip-v2 rule at @max-width:600px sets it to 1-col,
   but devices between 601-820px still showed 2 cols (from the @1100px
   rule). User wants 1 column for ALL mobile-sized viewports. */
@media (max-width: 820px) {
  .origins-flip-v2 { grid-template-columns: 1fr !important; }
}
/* ===== END MAS Y MEJOR CACAO 1-COL ===== */


/* (Reverted: BOOKS + SHEETS 2-COL block removed per user request — both
   grids fall back to the existing @max-width:760px 1-col rule.) */


/* ===== START PRO HERO PHOTO BACKGROUND =====
   Para profesionales hero: full-bleed mata1 cacao plantation photo with
   warm dark gradient overlay so the cream/gold text stays legible. Same
   pattern as story-hero, recipes-hero, responsibility-hero. */
.page-hero.pro-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 7rem 0 5rem;
  border-bottom: none;
  background:
    linear-gradient(
      135deg,
      rgba(26, 14, 8, 0.82) 0%,
      rgba(26, 14, 8, 0.55) 55%,
      rgba(26, 14, 8, 0.82) 100%
    ),
    /* anchor to the top so the nursery canopy/roof stays in frame */
    url('../images/professionals-hero.png') center top / cover no-repeat;
  color: var(--ink-on-dark, #fbf6ee);
  overflow: hidden;
}
.page-hero.pro-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(194, 150, 76, 0.18), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(78, 168, 116, 0.14), transparent 60%);
  pointer-events: none;
}
.page-hero.pro-hero .container {
  position: relative;
  z-index: 1;
}
.page-hero.pro-hero .eyebrow { color: var(--gold-bright, #f0d089); }
.page-hero.pro-hero h1,
.page-hero.pro-hero .display { color: var(--ink-on-dark, #fbf6ee); }
.page-hero.pro-hero h1 em,
.page-hero.pro-hero .display em {
  color: var(--gold-bright, #f0d089);
  font-style: italic;
}
.page-hero.pro-hero .lede { color: rgba(243, 234, 220, 0.86); }

@media (max-width: 760px) {
  .page-hero.pro-hero { min-height: 56vh; padding: 6rem 0 4rem; }
}
@media (max-width: 380px) {
  .page-hero.pro-hero { min-height: 50vh; padding: 5rem 0 3.5rem; }
}
/* ===== END PRO HERO ===== */


/* ===== START CONTACT HERO PHOTO BACKGROUND =====
   Contacto page hero: full-bleed pile1 cacao beans + scoop photo with warm
   dark gradient overlay so the cream/gold text reads. Same pattern as story-
   hero, recipes-hero, responsibility-hero, pro-hero. */
.page-hero.contact-hero {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 7rem 0 5rem;
  border-bottom: none;
  background:
    linear-gradient(
      135deg,
      rgba(26, 14, 8, 0.82) 0%,
      rgba(26, 14, 8, 0.55) 55%,
      rgba(26, 14, 8, 0.82) 100%
    ),
    url('../images/contact-hero.png') center/cover no-repeat;
  color: var(--ink-on-dark, #fbf6ee);
  overflow: hidden;
}
.page-hero.contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(194, 150, 76, 0.18), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(194, 150, 76, 0.12), transparent 60%);
  pointer-events: none;
}
.page-hero.contact-hero .container {
  position: relative;
  z-index: 1;
}
.page-hero.contact-hero .eyebrow { color: var(--gold-bright, #f0d089); }
.page-hero.contact-hero h1,
.page-hero.contact-hero .display { color: var(--ink-on-dark, #fbf6ee); }
.page-hero.contact-hero h1 em,
.page-hero.contact-hero .display em {
  color: var(--gold-bright, #f0d089);
  font-style: italic;
}
.page-hero.contact-hero .lede { color: rgba(243, 234, 220, 0.86); }

@media (max-width: 760px) {
  .page-hero.contact-hero { min-height: 52vh; padding: 6rem 0 4rem; }
}
@media (max-width: 380px) {
  .page-hero.contact-hero { min-height: 46vh; padding: 5rem 0 3.5rem; }
}
/* ===== END CONTACT HERO ===== */


/* ===== START CONTACT PRO BANNER (¿Es chef o chocolatero profesional?) =====
   Full-bleed banner with contact1 pastry kitchen photo as background, warm
   dark overlay, centered text + CTA pointing to professionals.html. */
.contact-pro-banner {
  position: relative;
  padding: 6rem 0;
  background:
    linear-gradient(
      135deg,
      rgba(26, 14, 8, 0.78) 0%,
      rgba(26, 14, 8, 0.55) 50%,
      rgba(26, 14, 8, 0.78) 100%
    ),
    url('../images/contact-pro-banner.png') center/cover no-repeat;
  color: var(--ink-on-dark, #fbf6ee);
  text-align: center;
  overflow: hidden;
}
.contact-pro-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(194, 150, 76, 0.18), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(194, 150, 76, 0.12), transparent 60%);
  pointer-events: none;
}
.contact-pro-banner-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}
.contact-pro-banner .eyebrow {
  color: var(--gold-bright, #f0d089);
  margin-bottom: 1.1rem;
}
.contact-pro-banner h2,
.contact-pro-banner .h2 {
  color: var(--ink-on-dark, #fbf6ee);
  margin-bottom: 1rem;
}
.contact-pro-banner p {
  color: rgba(243, 234, 220, 0.86);
  margin-bottom: 2rem;
  font-size: 1.02rem;
  line-height: 1.65;
}

@media (max-width: 760px) {
  .contact-pro-banner { padding: 4.5rem 0; }
  .contact-pro-banner p { font-size: 0.95rem; }
}
@media (max-width: 380px) {
  .contact-pro-banner { padding: 3.5rem 0; }
}
/* ===== END CONTACT PRO BANNER ===== */


/* ===== START CONTACT SUCCESS MODAL ===== */
.contact-success-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.contact-success-modal[hidden] { display: none; }

.contact-success-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 14, 8, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  animation: contactSuccessBackdropIn 0.25s ease-out both;
}
@keyframes contactSuccessBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.contact-success-card {
  position: relative;
  z-index: 1;
  max-width: 480px;
  width: 100%;
  background: var(--paper, #fbf6ee);
  border: 1px solid rgba(216, 176, 106, 0.3);
  border-radius: 14px;
  padding: 2.2rem 2rem 2rem;
  text-align: center;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
  animation: contactSuccessCardIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes contactSuccessCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.contact-success-close {
  position: absolute;
  top: 0.6rem;
  right: 0.85rem;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--ink-mute, #7a5e3f);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease;
}
.contact-success-close:hover {
  background: rgba(168, 121, 47, 0.1);
  color: var(--ink, #2a160c);
}

.contact-success-icon {
  display: inline-flex;
  width: 80px;
  height: 80px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem;
  color: #2d7a4f;
  background: rgba(45, 122, 79, 0.1);
  border-radius: 50%;
  animation: contactSuccessIconPop 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
@keyframes contactSuccessIconPop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.contact-success-icon svg { width: 56px; height: 56px; }

.contact-success-card h3 {
  font-family: var(--serif);
  font-size: 1.55rem;
  margin: 0 0 0.7rem;
  color: var(--ink, #2a160c);
}
.contact-success-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-mute, #5d4a37);
  margin: 0 0 1.6rem;
}
.contact-success-card .btn {
  min-width: 140px;
}

@media (max-width: 480px) {
  .contact-success-card { padding: 1.8rem 1.4rem 1.6rem; }
  .contact-success-icon { width: 68px; height: 68px; margin-bottom: 0.85rem; }
  .contact-success-icon svg { width: 46px; height: 46px; }
  .contact-success-card h3 { font-size: 1.3rem; }
  .contact-success-card p { font-size: 0.88rem; }
}
/* ===== END CONTACT SUCCESS MODAL ===== */


/* ===== START TIPS BUEN OFICIO BACKGROUND =====
   Distinct background for the recipes "Buen oficio" section so it visibly
   separates from the "Toda la colección" gallery (which uses --bg-alt cream).
   Use the lighter --bg-cream (#faf3e8) for an editorial paper feel. */
.tips.tips-bg {
  background: var(--bg-cream, #faf3e8);
  border-top: 1px solid rgba(106, 70, 38, 0.1);
}
/* ===== END TIPS BUEN OFICIO BG ===== */


/* ===== START NAV LANG SWITCHER ===== */
.nav-lang-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-right: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-lang-item .nav-lang {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  padding: 0.2em 0.45em;
  border-radius: 3px;
  transition: color .2s ease, background .2s ease;
  line-height: 1;
}
.nav-lang-item a.nav-lang:hover,
.nav-lang-item a.nav-lang:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.nav-lang-item .nav-lang.is-current {
  color: #fff;
  font-weight: 600;
  cursor: default;
}
.nav-lang-item .nav-lang-sep {
  color: rgba(255, 255, 255, 0.3);
  user-select: none;
}
@media (max-width: 900px) {
  .nav-lang-item {
    margin: 0.6rem 0 0.3rem;
    font-size: 0.85rem;
    justify-content: center;
  }
}
/* ===== END NAV LANG SWITCHER ===== */


/* ===== START NAV LANG DROPDOWN ===== */
/* Editorial language switcher — dark brown panel that flows out of the
   header (same color family) with cream text and gold accents. */

.nav-lang-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 0.55rem 0 0;
  list-style: none;
}

/* ----- Trigger ----- */
.nav-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.55rem;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  transition: color .25s ease, background-color .25s ease;
}
.nav-lang-toggle:hover,
.nav-lang-toggle:focus-visible {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.06);
  outline: none;
}
.nav-lang-toggle[aria-expanded="true"] {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.10);
}

.nav-lang-globe {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity .25s ease;
}
.nav-lang-toggle:hover .nav-lang-globe,
.nav-lang-toggle[aria-expanded="true"] .nav-lang-globe {
  opacity: 1;
}

.nav-lang-current-code {
  font-weight: 600;
  letter-spacing: 0.18em;
}

.nav-lang-chevron {
  flex-shrink: 0;
  opacity: 0.55;
  margin-left: 0.05rem;
  transition: transform .28s cubic-bezier(.5,.05,.2,1), opacity .25s ease;
}
.nav-lang-toggle[aria-expanded="true"] .nav-lang-chevron {
  transform: rotate(180deg);
  opacity: 0.85;
}

/* ----- Dropdown panel — DARK BROWN ----- */
.nav-lang-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: 1000;
  min-width: 210px;
  margin: 0;
  padding: 0.45rem;
  list-style: none;
  background: #2a1a0d; /* warm dark brown — slightly lighter than header for separation */
  border: 1px solid rgba(216, 176, 106, 0.18);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 16px 38px -12px rgba(0, 0, 0, 0.55),
    0 6px 14px -6px rgba(0, 0, 0, 0.32);
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top right;
  transition:
    opacity .22s cubic-bezier(.32,.72,.34,1.04),
    transform .26s cubic-bezier(.32,.72,.34,1.04);
  pointer-events: none;
}
.nav-lang-menu:not([hidden]) {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ----- Items ----- */
.nav-lang-option {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.75rem 0.55rem 0.85rem;
  color: rgba(243, 231, 211, 0.88); /* cream */
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  border-radius: 8px;
  text-transform: none;
  letter-spacing: 0;
  transition: background-color .16s ease, color .16s ease, padding-left .2s ease;
}
.nav-lang-option:hover,
.nav-lang-option:focus-visible {
  background-color: rgba(216, 176, 106, 0.12);
  color: #fff;
  outline: none;
  padding-left: 1rem;
}
.nav-lang-option .nav-lang-name {
  flex: 1;
  font-weight: 500;
}
.nav-lang-option .nav-lang-code {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(216, 176, 106, 0.55);
  text-transform: uppercase;
}

/* Current language: a clean, confident filled card. One signal, not five —
   the gold-tint background + bold cream text + bright gold code does
   the job without floating rules or extra ornaments. */
.nav-lang-option.is-current {
  cursor: default;
  pointer-events: none;
  color: #fff7e6;
  background-color: rgba(216, 176, 106, 0.20);
}
.nav-lang-option.is-current .nav-lang-name {
  font-weight: 600;
  color: #fff7e6;
}
.nav-lang-option.is-current .nav-lang-code {
  color: var(--gold-bright, #d8b06a);
  font-weight: 700;
}

/* ----- Mobile (inside burger menu) -----
   Keep the brown panel; rows become slightly lighter brown cards for
   visible separation; chevron + active feedback for touch. */
@media (max-width: 900px) {
  .nav-lang-item {
    margin: 0.4rem auto 0.2rem;
    width: max-content;
  }
  .nav-lang-toggle {
    font-size: 0.82rem;
    padding: 0.5rem 0.7rem;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
  }
  .nav-lang-menu {
    right: auto;
    left: 50%;
    transform: translate(-50%, -8px) scale(0.985);
    transform-origin: top center;
    min-width: 240px;
    max-width: calc(100vw - 2rem);
    padding: 0.3rem;
    background: #2a1a0d;
  }
  .nav-lang-menu:not([hidden]) {
    transform: translate(-50%, 0) scale(1);
  }

  /* Each option becomes a clearly tappable row on the dark brown panel:
     slightly elevated brown bg, hairline gold dividers, chevron + 48px+ height. */
  .nav-lang-menu li + li .nav-lang-option {
    border-top: 1px solid rgba(216, 176, 106, 0.10);
    border-radius: 0;
  }
  .nav-lang-menu li:first-child .nav-lang-option { border-radius: 10px 10px 0 0; }
  .nav-lang-menu li:last-child .nav-lang-option  { border-radius: 0 0 10px 10px; }

  .nav-lang-option {
    min-height: 48px;
    padding: 0.85rem 1.65rem 0.85rem 1.05rem;
    font-size: 1rem;
    background-color: rgba(255, 255, 255, 0.04); /* subtle elevation on brown */
    color: rgba(243, 231, 211, 0.92);
  }
  .nav-lang-option:not(.is-current)::after {
    content: "";
    position: absolute;
    right: 0.85rem;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--gold-bright, #d8b06a);
    border-top: 1.5px solid var(--gold-bright, #d8b06a);
    transform: translateY(-50%) rotate(45deg);
    opacity: 0.7;
    transition: opacity .15s ease, transform .15s ease;
  }
}
/* ===== END NAV BURGER BREAKPOINT EXTENSION ===== */


/* ===== SENSORY CHIP — DEAD-END STATE =====
   When adding a sensory note would yield zero matches, the chip becomes
   greyed out and non-interactive (signals the user the filter is a dead end). */
.sensory-chip.is-deadend {
  opacity: 0.35;
  cursor: not-allowed;
}
.sensory-chip.is-deadend:hover { transform: none; box-shadow: none; }