/* =====================================================================
   SISTEMA DE DISEÑO (variables y tokens)
   ===================================================================== */
:root{
  --brand-bg:#f5e8d2;
  --brand-red:#D32F2F;
  --brand-yellow:#FBC02D;
  --text:  #111827;  /* un toque más oscuro (opcional pero ayuda) */
  --muted: #5c5246;  /* gris cálido marrón — coherente con paleta warm */
  --shadow-lg:0 10px 25px rgba(0,0,0,.12);
  --radius-2xl:24px;

  --logo-size:80px;
  --logo-size-shrink:60px;
  --logo-pad:1px;
  --header-pad:10px;
  --logo-shrink-scale:1;
}
@media (max-width:768px){
  :root{
    --logo-size:120px;
    --logo-size-shrink:76px;
    --logo-pad:1px;
  }
}

/* =====================================================================
   RESETEOS + BASE
   ===================================================================== */
*{box-sizing:border-box}

html{scroll-behavior:smooth}
html,body{
  margin:0;
  padding:0;
  font-family:'Lora',Georgia,'Times New Roman',serif;
  color:var(--text);

  /* Fondo de madera — tono más profundo para cohesión con hero */
  background-color:#e8d9be;
  background-image:
    linear-gradient(rgba(225,210,185,0.85),rgba(225,210,185,0.85)),
    url("../images/fotos/img-2955.jpg");
  background-repeat:no-repeat,repeat;
  background-size:100% 100%,560px auto;
  background-position:center top,left top;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
[hidden]{display:none!important}

/* Layout container */
.container{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 32px;
}
@media (min-width:640px){
  .container{padding:0 40px}
}

/* =====================================================================
   HEADER + NAVEGACIÓN (desktop + mobile)
   ===================================================================== */

body > header{
  position:sticky;
  top:0;
  z-index:50;
  background:#0e0806f8;
  color:#fff;
  border-bottom:none;
  box-shadow:none;
  contain:paint;
  will-change: transform;
}

/* evita saltos por wrapping en los menús */
body > header .nav{white-space:nowrap}
body > header .nav a{line-height:1}

.h-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:10px 0;
  column-gap:76px;
}

.nav{
  display:flex;
  gap:48px;
  font-weight:600;
  align-items:center;
}
.nav-l{justify-content:flex-end}
.nav-r{justify-content:flex-start}

.nav a{
  font-size:16px;
  letter-spacing:.02em;
  font-weight:600;
  opacity:.95;
  position:relative;
  padding-bottom:6px;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:2px;
  background:var(--brand-yellow);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .2s ease;
}
.nav a:hover::after{transform:scaleX(1)}
.nav a.active{color:var(--brand-red)}
.nav a.active::after{transform:scaleX(1)}
.nav a:hover{color:var(--brand-red)!important}

.logo{
  width:var(--logo-size)!important;
  height:var(--logo-size)!important;
  border-radius:999px;
  object-fit:contain;
  background:transparent;
  color:#fff;
  box-shadow:none;
  padding:0;
  transition:width .25s ease,height .25s ease;
  will-change:transform,width,height;
  backface-visibility:hidden;
  transform:translateZ(0);
}


/* Header fijo — sin shrink */

.nav-l,.nav-r{transform:translateY(3px)}

/* Header responsive */
@media (max-width:768px){
  .h-row{display:none}

  .h-row-m{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 0;
    transition:padding .25s ease;
  }

  .logo{
    width:var(--logo-size)!important;
    height:var(--logo-size)!important;
  }
}
@media (min-width:769px){
  .h-row-m{display:none}
}

.burger{
  border:1px solid #d1d5db;
  border-radius:12px;
  background:#fff;
  padding:8px;
}

.mnav{
  border-top:1px solid #e5e7eb;
  padding:12px 0;
  display:none;
}
.mnav.open{display:block}
.mnav a{
  display:block;
  padding:16px;
  border-radius:12px;
  font-size:16px;
  letter-spacing:.02em;
  font-weight:600;
}
.mnav a:hover{background:#f3f4f6}

/* =====================================================================
   HERO HOME
   ===================================================================== */
.hero{position:relative;overflow:hidden;min-height:560px;}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 62%;
  filter:contrast(1.05) saturate(1.05) brightness(.98);
  transition:filter .2s ease;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 70%,rgba(0,0,0,0.2) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 70%,rgba(0,0,0,0.2) 100%);
}
.hero-copy{
  max-width: 640px;
  padding-inline: clamp(48px, 5vw, 64px);
  justify-self: center;
  position: relative;
  transform: translateX(-300px) translateY(-20px);
}


.hero-copy h1{
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  text-shadow: 0 2px 12px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}
.hero-copy p{
  font-size: 18px;
  line-height: 1.6;
  max-width: 48ch;
  opacity: .95;
  text-shadow: 0 1px 8px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.60) 30%,rgba(0,0,0,.35) 55%,rgba(0,0,0,0) 75%);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  mix-blend-mode:multiply;
  background:linear-gradient(90deg,rgba(251,193,45,.064) 0%,rgba(211,47,47,.082) 100%);
}

.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  gap:40px;
  grid-template-columns:1fr;
  padding:clamp(64px,10vw,120px) 0;
  max-width: var(--container);
  margin-inline: auto;
}


/* En mobile, casi nada (para no cortar) */
@media (max-width:768px){
  .hero-copy{
    transform: none;          /* <- resetea el translateX/Y que la tira a la izquierda */
    margin-top: 0;            /* por si todavía te estaba subiendo/bajando */
    margin-left: auto;
    margin-right: auto;
    text-align: center;       /* centra títulos/texto/botones */
    max-width: 38ch;          /* opcional: evita líneas demasiado largas */
  }
  .cta-row{
    justify-content: center;  /* centra la fila de botones */
  }
}



.hero h1{
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-size:clamp(34px,5.2vw,58px);
  line-height:1.05;
  margin:0 0 14px;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
  letter-spacing:-0.01em;
}

.hero p{
  color:#fff;
  max-width:60ch;
  opacity:0.95;
  margin:0;
  font-size:clamp(16px,1.6vw,18px);
}

.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:clamp(48px,8vw,80px);
}

/* =====================================================================
   STAGGER ANIMATIONS — Hero + Polaroids Historia
   ===================================================================== */

/* Hero: entrada escalonada */
.hero h1{
  animation:heroReveal 0.8s ease-out both;
}
.hero p{
  animation:fadeUp 0.6s ease-out 0.3s both;
}
.hero .cta-row{
  animation:fadeUp 0.6s ease-out 0.5s both;
}

@keyframes heroReveal{
  from{ clip-path:inset(0 100% 0 0); opacity:0; }
  to  { clip-path:inset(0 0% 0 0);   opacity:1; }
}
@keyframes fadeUp{
  from{ transform:translateY(20px); opacity:0; }
  to  { transform:translateY(0);    opacity:1; }
}

/* Polaroids Historia: animación base (JS asigna animation-delay por índice) */
.hist-album .ph{
  opacity:0;
  animation:polaroidIn 0.5s ease-out both;
}
@keyframes polaroidIn{
  from{ transform:translateY(20px); opacity:0; }
  to  { transform:translateY(0);    opacity:1; }
}

/* Sin animaciones si el usuario prefiere movimiento reducido */
@media(prefers-reduced-motion:reduce){
  .hero h1,.hero p,.hero .cta-row,.hist-album .ph{
    animation:none;
    opacity:1;
  }
}


/* Botones */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:18px;
  font-weight:700;
  font-size:14px;
  box-shadow:var(--shadow-lg);
  border:none;
  cursor:pointer;
  line-height:1; 
}

.btn-dark{
  background:#111;
  color:#fff;
  padding:12px 18px;
}
.btn-dark svg{transition:transform .2s ease}
.btn-dark:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}
.btn-dark:hover svg{transform:translateX(4px)}

.btn-light{
  background:rgba(255,255,255,.92);
  color:#111;
  border:1px solid rgba(0,0,0,.08);
  padding:10px 16px;   /* <-- más chico que 12/18 */
  font-size:12px;     /* <-- un toque más chico, no 9px */
  border-radius:16px;   /* un toque más fino que 18 */
}




/* Ajuste en pantallas grandes */
@media (min-width:900px){
  .hero-inner > div:first-child{
    left:-28px;
    top:-18px;
  }
}

/* En mobile, casi nada (para no cortar) */
@media (max-width:768px){
  .hero-inner > div:first-child{
    left:-6px;
    top:-8px;
  }
}
/* =====================================================================
   SECCIONES BASE + COMPONENTES
   ===================================================================== */
.section{padding:22px 0}
.section h2{font-size:32px;margin:0}

.muted{color:var(--muted)}
:target{scroll-margin-top:110px}

/* Home: títulos centrados (sin centrar el contenido) */
#route-home .section h2{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  max-width:40ch;
}

/* Grids */
.grid-2{
  display:grid;
  gap:32px;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .grid-2{grid-template-columns:1fr 1fr}
}

.cards{
  display:grid;
  gap:24px;
  grid-template-columns:1fr;
}
@media (min-width:640px){
  .cards{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .cards{grid-template-columns:repeat(4,1fr)}
}

/* Cards */
.card{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:var(--radius-2xl);
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0, 0, 0, 0);
}
.card-body{padding:16px}

.ph{
  aspect-ratio:4/5;
  background:transparent;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;

  /* limpieza absoluta */
  box-shadow:none;
  filter:none;
}

.ph::after{
  content:"";
  position:absolute;
  left:22%;
  right:22%;
  bottom:12%;
  height:14%;
  background:rgba(0, 0, 0, 0.25);
  filter:blur(18px);
  border-radius:999px;
  pointer-events:none;
  z-index:0;
}
.ph > img{
  position:relative;
  z-index:1;
  transform:translateY(-2px);
}
.obj-contain{
  max-width:100%;
  max-height:86%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;

  /* limpieza total */
  filter:none;
  box-shadow:none;
}

/* Chips */
.chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.chip{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(180, 130, 50, .25);
  background:rgba(241, 201, 75, .12);
  font-size:12px;
  font-weight:600;
  color:#6b5a2e;
}
/* =====================================================================
   QUIÉNES SOMOS — banda con stats
   ===================================================================== */
#about{
  position:relative;
  background:linear-gradient(180deg,
    rgba(248,243,235,.75) 0%,
    rgba(240,230,212,.75) 65%,
    rgba(180,160,130,.55) 88%,
    rgba(80,60,35,.45) 100%
  );
  padding:56px 0 60px;
  text-align:center;
  overflow:hidden;
}
#about::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('../images/fotos/map.jpg') center/cover no-repeat;
  opacity:.27;
  z-index:0;
}
.about-wrap{
  position:relative;
  z-index:1;
  max-width:800px;
  margin:0 auto;
  padding:0 24px;
}
.about-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(107, 90, 46, .7);
  margin-bottom:12px;
}
.about-title{
  font-size:clamp(30px, 4.2vw, 48px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-0.02em;
  color:#1a1208;
  margin:0 0 18px;
}
.about-lead{
  font-size:17px;
  line-height:1.65;
  color:#4a3f2f;
  max-width:56ch;
  margin:0 auto 36px;
}

/* Stats */
.about-stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  flex-wrap:wrap;
}
.about-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 clamp(20px, 4vw, 48px);
}
.about-stat__number{
  font-size:clamp(40px, 5.5vw, 64px);
  font-weight:900;
  letter-spacing:-0.03em;
  color:#2c2218;
  line-height:1;
}
.about-stat__label{
  font-size:13px;
  font-weight:600;
  color:rgba(74, 63, 47, .7);
  margin-top:6px;
  letter-spacing:.02em;
}
.about-stat__divider{
  width:1px;
  height:48px;
  background:rgba(44, 34, 24, .15);
  flex-shrink:0;
}
@media (max-width:520px){
  .about-stats{ gap:20px 0; }
  .about-stat__divider{ display:none; }
  .about-stat{ padding:0 16px; }
}
/* =====================================================================
   HISTORIA (HOME) — collage épico + polaroids momento
   ===================================================================== */
#history{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:72px 0 64px;
  background:#1a1208;
}

/* ── Collage de fondo — la imagen que dice "120 años" ── */
.hist-collage-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.hist-collage-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:grayscale(.3) contrast(1.1) brightness(.7);
  opacity:.35;
}
/* Overlay oscuro sobre el collage para legibilidad */
#history::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,
      rgba(26, 18, 8, .82) 0%,
      rgba(26, 18, 8, .55) 40%,
      rgba(26, 18, 8, .65) 70%,
      rgba(26, 18, 8, .88) 100%
    );
  pointer-events:none;
}
/* Viñeta cálida sutil */
#history::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(26, 18, 8, .5) 100%);
}

.hist-home{
  position:relative;
  z-index:2;
  max-width:1100px;
  margin:0 auto;
  padding:0 24px;
}

/* ── Copy central ── */
.hist-copy{
  text-align:center;
  max-width:640px;
  margin:0 auto 48px;
}
.hist-badge{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255, 180, 80, .8);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255, 180, 80, .15);
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:18px;
  backdrop-filter:blur(4px);
}
.hist-copy h2{
  font-size:clamp(32px, 4.5vw, 54px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-0.02em;
  color:#fff;
  margin:0 0 16px;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}
.hist-copy p{
  font-size:17px;
  line-height:1.6;
  color:rgba(255,255,255,.72);
  max-width:52ch;
  margin:0 auto 24px;
}
.hist-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(8px);
  padding:11px 24px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  transition:background .18s ease, transform .18s ease;
}
.hist-cta:hover{
  background:rgba(255,255,255,.20);
  transform:translateY(-1px);
}

/* ── Álbum familiar — 7 polaroids simétricas ── */
.hist-album{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px 24px;
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:0 max(24px, calc(50vw - 560px));  /* centra con max-width ~1120px */
  justify-items:center;
}

.hist-polaroid{
  position:relative;
  background:#fff;
  border-radius:10px;
  padding:7px 7px 28px;
  box-shadow:
    0 14px 32px rgba(0,0,0,.4),
    0 4px 10px rgba(0,0,0,.25);
  width:100%;
  max-width:250px;
  transition:transform .22s ease, box-shadow .22s ease;
}
.hist-polaroid .ph{
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:6px;
  background:#f7f7f7;
}
.hist-polaroid img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.2) contrast(1.05) sepia(.08);
  transition:filter .3s ease, transform .3s ease;
}
.hist-polaroid:hover img{
  filter:grayscale(0) contrast(1.1) sepia(0);
  transform:scale(1.04);
}
.hist-polaroid figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:8px;
  text-align:center;
  font-size:11px;
  font-weight:600;
  color:#7a6a5a;
  letter-spacing:.01em;
}

/* ── Rotaciones individuales — efecto mesa familiar ── */
/* Fila 1: 4 fotos */
.hist-p1{ transform:rotate(-2.5deg) translateY(6px); }
.hist-p2{ transform:rotate(1.5deg) translateY(-4px); }
.hist-p3{ transform:rotate(-1deg) translateY(2px); }
.hist-p4{ transform:rotate(2deg) translateY(5px); }

/* Fila 2: 4 fotos — simétrica con fila 1 */
.hist-p5{ transform:rotate(1.5deg) translateY(-2px); }
.hist-p6{ transform:rotate(-1.5deg) translateY(4px); }
.hist-p7{ transform:rotate(2deg) translateY(-3px); }
.hist-p8{ transform:rotate(-2deg) translateY(6px); }

.hist-polaroid:hover{
  transform:rotate(0deg) translateY(-6px) scale(1.05);
  box-shadow:
    0 24px 52px rgba(0,0,0,.5),
    0 8px 18px rgba(0,0,0,.3);
  z-index:4;
}

/* ── Responsive ── */
@media (max-width:900px){
  .hist-album{
    grid-template-columns:repeat(3, 1fr);
    padding:0 20px;
  }
  .hist-p5, .hist-p6, .hist-p7, .hist-p8{
    grid-column:auto;
    justify-self:center;
    margin:0;
  }
}
@media (max-width:640px){
  .hist-album{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
    padding:0 16px;
  }
  .hist-polaroid{ max-width:none; }
}
@media (max-width:480px){
  #history{ padding:40px 0 36px; }
  .hist-copy{ margin-bottom:24px; }
  .hist-polaroid{ padding:5px 5px 22px; }
}
/* =====================================================================
   CARRUSEL DE ESPECIAS (HOME) — Enciclopedia (cabezal + teasers)
   ===================================================================== */

/* Scroll horizontal base */
.hscroll{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:0 16px 8px;        /* ← simetría */
  justify-content:center;   /* ← centra si entra */
  scroll-padding-left:16px;
}

.hscroll::-webkit-scrollbar{height:8px}
.hscroll::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.15);
  border-radius:999px;
}

/* Cabezal */
.spices-head{
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  justify-items:center;
  text-align:center;
  gap:20px;
  margin-bottom:16px;
}


#spices .spices-kicker{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9e3a1c;
  font-weight:800;
  margin-bottom:8px;
}

#spices h2{
  font-size:clamp(32px, 4.6vw, 52px);
  line-height:1.05;
  max-width:38ch;
  margin:0 auto 10px;
}

#spices .muted{
  max-width:52ch;
  line-height:1.55;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  color:#4a3d2e;
}


#spices .spices-link{
  font-size:13px;
  opacity:.9;
  margin-top:10px;
  max-width:78ch;
  margin-left:auto;
  margin-right:auto;
}
#spices .spices-link strong{color:#111}

/* Acciones / botones */
#spices .spices-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;   /* ← clave */
  margin:12px 0 8px;
}

#spices .spices-actions .btn{
  border-radius:999px;
  padding:11px 16px;
  font-weight:800;
  letter-spacing:.01em;
  transform:translateY(0);
}

#spices .spices-actions .btn.btn-dark{
  background:#2c2218;
  color:#fff;
  box-shadow:0 8px 20px rgba(44, 34, 24, .25);
}
#spices .spices-actions .btn.btn-dark:hover{
  transform:translateY(-1px);
  background:#1e170f;
  box-shadow:0 14px 30px rgba(44, 34, 24, .30);
}

#spices .spices-actions .btn.btn-light{
  background:rgba(255,255,255,.65);
  color:#2c2218;
  border:1px solid rgba(44, 34, 24, .12);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
#spices .spices-actions .btn.btn-light:hover{
  background:rgba(255,255,255,.92);
  transform:translateY(-1px);
}

/* Si seguís usando .spices-ghost en HTML */
#spices .spices-ghost{
  border:1px solid rgba(0,0,0,.06);
}

/* Header del carrusel */
.spices-carousel-header{
  margin-top:4px;
  display:flex;
  align-items:center;
  justify-content:center;   /* ← clave */
  text-align:center;        /* ← acompaña */
  gap:8px;
}


/* Scroll específico de especias */
.spices-scroll{
  scroll-padding-left:16px;
  gap:34px;
}

/* Card teaser */
.spice-teaser{
  position:relative;
  flex:0 0 clamp(240px,26vw,290px);
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:
    0 4px 12px rgba(0,0,0,.06),
    0 10px 28px rgba(120, 80, 30, .12);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease;
  isolation:isolate;
}

.spice-teaser:focus-visible{
  outline:2px solid var(--brand-yellow);
  outline-offset:3px;
}

.spice-teaser:hover{
  transform:translateY(-4px);
  box-shadow:
    0 8px 18px rgba(0,0,0,.08),
    0 18px 38px rgba(120, 80, 30, .18);
}

/* Imagen */
.spice-teaser__photo{
  width:100%;
  aspect-ratio:5 / 3;
  overflow:hidden;
  background:#f0e6d4;
}
.spice-teaser__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .3s ease;
}
.spice-teaser:hover .spice-teaser__photo img{
  transform:scale(1.04);
}

/* Cuerpo */
.spice-teaser__body{
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}
.spice-teaser__body h3{
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:8px 0 4px;
  color:#1a1208;
}
.spice-teaser__body p{
  font-size:14px;
  line-height:1.45;
  margin:4px 0 10px;
  color:#555;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Chips simétricos (solo dentro del teaser) */
.spice-teaser .chips{
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  align-items:start;
}
.spice-teaser .chip{
  width:100%;
  text-align:center;
  padding:6px 8px;
  line-height:1.15;
  white-space:normal;
}

/* =========================================================
   COVERFLOW — carrusel rotativo
   ========================================================= */
.coverflow{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  height:480px;
  margin-top:28px;
  margin-bottom:8px;
  overflow:hidden;
}

/* Stage: posiciona las cards en el centro */
.cf-stage{
  position:relative;
  width:100%;
  height:100%;
  perspective:1400px;
  perspective-origin:50% 45%;
}

/* Cada card dentro del coverflow */
.cf-stage .spice-teaser{
  position:absolute;
  top:50%;
  left:50%;
  width:280px;

  /* Reset del flex layout del teaser */
  display:flex;
  flex-direction:column;
  border-radius:18px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(0,0,0,.06);
  overflow:hidden;
  cursor:pointer;
  isolation:isolate;

  /* Se posiciona vía JS con transform */
  transition:transform .55s cubic-bezier(.25,.46,.45,.94),
             opacity .55s ease,
             box-shadow .55s ease,
             filter .55s ease;
  will-change:transform, opacity;
  transform-style:preserve-3d;
}

/* Card activa (centro) */
.cf-stage .spice-teaser.cf-active{
  z-index:10;
  box-shadow:
    0 8px 24px rgba(0,0,0,.12),
    0 24px 60px rgba(120, 80, 30, .22);
  filter:none;
}

/* Cards vecinas (±1) */
.cf-stage .spice-teaser.cf-near{
  box-shadow:
    0 6px 18px rgba(0,0,0,.10),
    0 16px 40px rgba(120, 80, 30, .14);
  filter:none;
  cursor:pointer;
}

/* Cards lejanas */
.cf-stage .spice-teaser:not(.cf-active):not(.cf-near){
  pointer-events:none;
}

/* ── Hover overlay épico — gradiente oscuro + CTA ── */
.cf-hover-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding:0 18px 22px;
  background:linear-gradient(
    to top,
    rgba(8, 4, 1, .97) 0%,
    rgba(10, 6, 2, .93) 30%,
    rgba(14, 8, 3, .85) 50%,
    rgba(18, 10, 4, .72) 70%,
    rgba(20, 12, 4, .55) 85%,
    rgba(20, 12, 4, .35) 100%
  );
  opacity:0;
  transition:opacity .28s ease;
  pointer-events:none;
  border-radius:18px;
  z-index:5;
}

/* Hover solo en las 3 cards interactivas */
.cf-stage .spice-teaser.cf-active:hover .cf-hover-overlay,
.cf-stage .spice-teaser.cf-near:hover .cf-hover-overlay{
  opacity:1;
}

/* Zoom de la foto en hover */
.cf-stage .spice-teaser.cf-active:hover .spice-teaser__photo img,
.cf-stage .spice-teaser.cf-near:hover .spice-teaser__photo img{
  transform:scale(1.08);
}

.cf-hover-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255, 180, 80, .8);
  margin-bottom:4px;
}
.cf-hover-name{
  font-size:22px;
  font-weight:900;
  color:#fff;
  letter-spacing:-0.01em;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
  margin-bottom:10px;
}
.cf-hover-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  color:#fff;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(6px);
  padding:8px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  transition:background .18s ease, transform .18s ease;
}
.cf-stage .spice-teaser:hover .cf-hover-cta{
  background:rgba(255,255,255,.22);
  transform:translateY(-1px);
}

/* Foto */
.cf-stage .spice-teaser__photo{
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#f0e6d4;
}
.cf-stage .spice-teaser__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
/* El zoom de foto en hover se maneja junto al overlay más arriba */

/* Body */
.cf-stage .spice-teaser__body{
  padding:14px 16px 16px;
  text-align:center;
}
.cf-stage .spice-teaser__body h3{
  font-size:17px;
  font-weight:700;
  margin:0 0 4px;
  color:#1a1208;
}
.cf-stage .spice-teaser__body p{
  font-size:13px;
  line-height:1.4;
  color:#666;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Tags en la card activa */
.cf-stage .spice-teaser__tags{
  padding:0 16px 14px;
  text-align:center;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  color:rgba(160, 110, 40, .7);
}

/* ── Flechas ── */
.cf-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:20;

  width:48px;
  height:48px;
  border-radius:50%;
  border:1.5px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(8px);
  color:#2c2218;
  font-size:20px;
  font-weight:700;

  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 4px 16px rgba(0,0,0,.10);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.cf-prev{ left:max(16px, calc(50% - 420px)); }
.cf-next{ right:max(16px, calc(50% - 420px)); }

.cf-arrow:hover{
  transform:translateY(-50%) scale(1.1);
  box-shadow:0 6px 22px rgba(0,0,0,.16);
  background:#fff;
}
.cf-arrow:active{
  transform:translateY(-50%) scale(.95);
}

/* ── Responsive ── */
@media (max-width:640px){
  .coverflow{ height:400px; }
  .cf-stage .spice-teaser{ width:230px; }
  .cf-arrow{ width:40px; height:40px; font-size:17px; }
  .cf-prev{ left:8px; }
  .cf-next{ right:8px; }
}
@media (max-width:420px){
  .coverflow{ height:360px; }
  .cf-stage .spice-teaser{ width:200px; }
  .cf-prev{ left:4px; }
  .cf-next{ right:4px; }
}

@media (max-width:768px){
  .spices-head{grid-template-columns:1fr}
}
#spices{
  position:relative;
  isolation:isolate;

  /* Tono base cálido — transición desde Historia oscura hacia Productos */
  background:linear-gradient(180deg,
    rgba(235, 218, 190, .45) 0%,
    rgba(225, 205, 172, .55) 30%,
    rgba(215, 192, 158, .50) 60%,
    rgba(180, 155, 118, .55) 85%,
    rgba(120, 95, 65, .45) 100%
  );
  padding-top:52px;
  padding-bottom:56px;
}

/* Mapa dorado — más presente, es identitario */
#spices::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;

  background-image:url("../images/fotos/map.jpg");
  background-size:cover;
  background-position:center 40%;
  background-repeat:no-repeat;

  opacity:.14;
  filter:contrast(.85) brightness(1.05) saturate(.7);
  mix-blend-mode:multiply;
}

/* Viñeta cálida central */
#spices::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(
    ellipse 80% 65% at 50% 50%,
    rgba(180, 130, 60, .08),
    transparent 70%
  );
}
/* =====================================================================
   PRODUCTOS — Home (sección completa)
   ===================================================================== */

/* =========================================================
   PRODUCTOS — Banda oscura (misma lógica que Recetas)
   ========================================================= */
#products{
  position:relative;
  isolation:isolate;

  /* ── Banda oscura cálida full-width ── */
  background:linear-gradient(175deg,
    #2c2218 0%,
    #352a1e 40%,
    #2e2419 100%
  );
  color:#fff;

  /* Rompe el container para full-bleed */
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:56px 0 64px;
}

/* ── Textura de madera sutil sobre la banda oscura ── */
#products::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("../images/fotos/img-2955.jpg");
  background-size:560px auto;
  background-position:center;
  background-repeat:repeat;
  opacity:.04;
  filter:grayscale(1) brightness(.8);
}

/* ── Viñeta cálida central ── */
#products::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(
    ellipse 70% 60% at 50% 50%,
    rgba(200, 140, 60, .06),
    transparent 70%
  );
}

/* Contenido por arriba */
#products .products-wrap{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  text-align:center;
}

/* ── Kicker ── */
#products .products-kicker{
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,180,80,.65);
  margin-bottom:6px;
}

/* Título */
#products h2{
  font-size:clamp(38px, 5.2vw, 64px);
  line-height:1.02;
  letter-spacing:-0.02em;
  margin:0 auto;
  color:#fff;
  text-align:center;
  width:100%;
}

/* Subtítulo */
#products .products-sub{
  margin:12px auto 0;
  max-width:48ch;
  text-align:center;
  font-size:15px;
  line-height:1.55;
  color:rgba(255,255,255,.55);
}

/* Bisagra editorial */
#products .prod-bridge{
  margin:24px auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  max-width:860px;
  padding:0 14px;
}
#products .prod-bridge-line{
  height:1px;
  flex:1;
  border-radius:2px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.12), transparent);
}
#products .prod-bridge-text{
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.30);
  white-space:nowrap;
}

/* =========================================================
   CTA arriba (2 botones) — sobre fondo oscuro
   ========================================================= */
#products .prod-cta{
  margin-top:20px;
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
#products .prod-cta .btn{
  border-radius:12px;
  padding:12px 20px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  border:2px solid transparent;
  text-decoration:none;
  transition:background-color .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
  box-shadow:none;
}
#products .prod-cta .btn.btn-dark{
  background-color:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.20);
  color:#fff;
}
#products .prod-cta .btn.btn-light{
  background-color:transparent;
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.55);
}

/* =========================================================
   Grid categorías — COLOR BLOCKS
   ========================================================= */
#products .prod4{
  max-width:1100px;
  margin:34px auto 0;
  display:grid;
  gap:24px;
  grid-template-columns:1fr;
}

/* ── Slot = color block card ── */
#products .prod-slot{
  display:block;
  text-align:center;
  border-radius:24px;
  overflow:hidden;
  padding:40px 28px 32px;
  position:relative;
  cursor:pointer;
  outline:none;
  color:#fff;

  /* Gradiente base usando --cat-bg del inline style */
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--cat-bg) 85%, #fff 15%) 0%,
      var(--cat-bg) 35%,
      color-mix(in srgb, var(--cat-bg) 82%, #000 18%) 100%
    );

  /* Borde sutil luminoso + sombra con tinte del color */
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 4px 12px rgba(0,0,0,.15),
    0 14px 36px color-mix(in srgb, var(--cat-bg) 45%, transparent 55%);

  transition:transform .28s ease, box-shadow .28s ease;
}

/* Highlight de luz superior (simula iluminación cenital) */
#products .prod-slot::before{
  content:'';
  position:absolute;
  top:-30%;
  left:10%;
  width:80%;
  height:80%;
  background:radial-gradient(ellipse, rgba(255,255,255,.10) 0%, transparent 65%);
  pointer-events:none;
  z-index:1;
}

/* Textura de ruido sutil (emula materialidad, no se siente "digital plano") */
#products .prod-slot::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  mix-blend-mode:overlay;
}

/* ── Stage packs — flex horizontal con abanico ── */
#products .prod-stage{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  height:240px;
  margin-bottom:18px;
  overflow:visible;
}

#products .prod-stage img{
  height:195px;
  width:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 4px 8px rgba(0,0,0,.20))
    drop-shadow(0 12px 24px rgba(0,0,0,.25));
  transition:transform .32s cubic-bezier(.25,.46,.45,.94), filter .3s ease;
}

/* Sobre central elevado */
#products .pack-c{
  z-index:3;
  transform:scale(1.08);
}

/* Laterales: inclinados en abanico, visibles */
#products .pack-l{
  z-index:1;
  transform:scale(0.82) rotate(-5deg);
  margin-right:-22px;
  opacity:.92;
}
#products .pack-r{
  z-index:1;
  transform:scale(0.82) rotate(5deg);
  margin-left:-22px;
  opacity:.92;
}

/* ── Kicker ── */
#products .prod-cat{
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.40);
}

/* ── Texto ── */
#products .prod-meta{
  position:relative;
  z-index:2;
  margin-top:0;
  padding-bottom:6px;
}

#products .prod-title{
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size:26px;
  letter-spacing:-0.01em;
  margin:6px 0 8px;
  color:#fff;
}

#products .prod-desc{
  margin:0 auto 18px;
  max-width:28ch;
  font-size:14px;
  line-height:1.45;
  color:rgba(255,255,255,.62);
}

/* ── Botón por categoría ── */
#products .prod-actions{
  display:flex;
  justify-content:center;
}

#products .prod-mini-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 24px;
  border-radius:999px;
  font-weight:800;
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  cursor:pointer;

  border:1.5px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.06);

  box-shadow:0 2px 8px rgba(0,0,0,.10);
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* =========================================================
   MEDIA
   ========================================================= */
@media (min-width:640px){
  #products .prod4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  #products .prod4{ grid-template-columns:repeat(3,1fr); }
}

/* =========================================================
   HOVER
   ========================================================= */
@media (hover:hover){
  /* Card hover — se eleva con sombra más intensa */
  #products .prod-slot:hover{
    transform:translateY(-5px);
    box-shadow:
      0 8px 20px rgba(0,0,0,.12),
      0 20px 48px color-mix(in srgb, var(--cat-bg) 50%, transparent 50%);
  }

  /* Sobres: abanico se abre, central sube */
  #products .prod-slot:hover .pack-c img{
    transform:translateY(-10px) scale(1.03);
    filter:
      drop-shadow(0 6px 12px rgba(0,0,0,.25))
      drop-shadow(0 18px 32px rgba(0,0,0,.30));
  }
  #products .prod-slot:hover .pack-l{
    transform:scale(0.84) rotate(-7deg) translateX(-10px);
    opacity:1;
  }
  #products .prod-slot:hover .pack-r{
    transform:scale(0.84) rotate(7deg) translateX(10px);
    opacity:1;
  }

  /* CTA arriba — sobre fondo oscuro */
  #products .prod-cta .btn:hover{
    transform:translateY(-1px);
  }
  #products .prod-cta .btn.btn-dark:hover{
    background-color:rgba(255,255,255,.22);
    border-color:rgba(255,255,255,.35);
  }
  #products .prod-cta .btn.btn-light:hover{
    border-color:rgba(255,255,255,.30);
    color:rgba(255,255,255,.80);
  }

  /* Mini botón */
  #products .prod-mini-btn:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.50);
    box-shadow:0 4px 14px rgba(0,0,0,.15);
  }
}


/* =====================================================================
   RECETAS — Home (banda editorial + 4 cards)
   ===================================================================== */

#recipes{
  overflow-x:hidden;
}
#recipes .recipes-band{
  position:relative;

  width:100vw;
  margin-left:calc(50% - 50vw);

  padding:56px 0 64px;

  isolation:isolate;
}

#recipes .recipes-band::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  /* Banda suave + coherente con tu estética (sin "rojo kinders") */
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.12),
      rgba(255,255,255,.06)
    );

  mix-blend-mode:multiply;
}

#recipes .recipes-wrap{
  position:relative;
  z-index:1;
}

#recipes h2{
  font-size:clamp(34px, 4.8vw, 56px);
  line-height:1.02;
  letter-spacing:-0.02em;
  margin:0;
}

#recipes .recipes-sub{
  margin:10px 0 0;
  max-width:70ch;
}

#recipes .recipes-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:26px;
}

/* CTA a página secundaria (mantiene tu sistema de botones) */
#recipes .recipes-cta{
  border-radius:12px;
  padding:12px 18px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}

/* Grid de recetas */
#recipes .recipes-grid{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
  overflow:hidden;
  width:100%;
}

#recipes .recipe-card{
  border-radius:16px;
  overflow:hidden;
  position:relative;
  height:260px;
  background:#111;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}

#recipes .recipe-link{
  display:block;
  height:100%;
  color:inherit;
  text-decoration:none;
  position:relative;
}

#recipes .recipe-media{
  position:absolute;
  inset:0;
  background:#1a1008;
  overflow:hidden;
}

#recipes .recipe-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.00);
  transition:transform .30s ease;
  opacity:.82;
  /* fallback si la imagen falla — no deja un rectángulo negro vacío */
  min-height:100%;
  background-color:#1a1208;
}

#recipes .recipe-badge{
  display:inline-block;
  margin-top:8px;
  padding:4px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:var(--brand-yellow);
  color:#1a0a00;
  opacity:.92;
}

#recipes .recipe-body{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:40px 18px 18px;
  background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.40) 60%, transparent 100%);
  color:#fff;
}

#recipes .recipe-body h3{
  margin:0 0 5px;
  font-size:18px;
  font-weight:900;
  letter-spacing:-0.01em;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}

#recipes .recipe-body p{
  margin:0;
  font-size:13px;
  line-height:1.4;
  color:rgba(255,255,255,.75);
}

/* Hovers */
@media (hover:hover){
  #recipes .recipe-card:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 36px rgba(0,0,0,.22);
  }
  #recipes .recipe-card:hover .recipe-media img{
    transform:scale(1.05);
    opacity:.92;
  }
}

/* Responsive grid */
@media (min-width:720px){
  #recipes .recipes-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:1024px){
  #recipes .container{ max-width:1400px; }
  #recipes .recipes-grid{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 193px 193px 260px;
    align-items: stretch;
  }
  #recipes .recipe-card{
    height: auto;
  }
  #recipes .recipe-card[data-index="0"]{
    grid-column: span 2;
    grid-row: span 2;
  }
  #recipes .recipe-card[data-index="0"] .recipe-body h3{ font-size:26px; }
  #recipes .recipe-card[data-index="0"] .recipe-body p{ font-size:15px; }
}

/* Flechas slider featured */
#recipes .recipe-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  background:rgba(0,0,0,.30);
  border:none;
  color:#fff;
  font-size:20px;
  width:44px;
  height:44px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .18s, opacity .20s;
  opacity:0;
  pointer-events:none;
  backdrop-filter:blur(4px);
  line-height:1;
}
#recipes .recipe-card[data-index="0"]:hover .recipe-arrow{
  opacity:1;
  pointer-events:auto;
}
#recipes .recipe-arrow:hover{ background:rgba(0,0,0,.55); }
#recipes .recipe-arrow-prev{ left:14px; }
#recipes .recipe-arrow-next{ right:14px; }

/* =====================================================================
   ROUTE RECETAS — Diseño editorial completo
   ===================================================================== */

.ri-header{
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:#1c1008;
  color:#fff;
  padding:52px 0 56px;
}
.ri-header-inner{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.ri-back{
  display:inline-block;
  color:rgba(255,255,255,.45);
  text-decoration:none;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:color .15s;
}
.ri-back:hover{ color:#fff; }
.ri-kicker{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--brand-yellow);
  margin:0 0 12px;
}
.ri-title{
  font-size:clamp(36px, 5.5vw, 72px);
  font-weight:900;
  letter-spacing:-0.025em;
  line-height:1.00;
  margin:0 0 20px;
  color:#fff;
}
.ri-desc{
  max-width:52ch;
  color:rgba(255,255,255,.60);
  font-size:1rem;
  line-height:1.6;
  margin:0;
}

/* Barra sticky */
.ri-controls-bar{
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:#faf8f4;
  border-bottom:1px solid rgba(0,0,0,.08);
  padding:12px 0;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.ri-controls-inner{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.ri-search{
  flex:0 0 auto;
  width:min(280px, 100%);
  padding:9px 14px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.13);
  background:#fff;
  font-size:.92rem;
  outline:none;
  transition:border-color .18s;
}
.ri-search:focus{ border-color:rgba(171,6,6,.5); }
.ri-filters{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  flex:1;
}
.ri-chip{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.13);
  background:#fff;
  font-size:.77rem;
  font-weight:700;
  letter-spacing:.03em;
  cursor:pointer;
  transition:all .15s;
  color:rgba(0,0,0,.60);
  white-space:nowrap;
}
.ri-chip:hover{ background:#f0e9de; border-color:rgba(0,0,0,.2); }
.ri-chip.active{
  background:var(--brand-red,#ab0606);
  border-color:var(--brand-red,#ab0606);
  color:#fff;
}
.ri-count{
  font-size:.80rem;
  color:rgba(0,0,0,.40);
  white-space:nowrap;
  margin-left:auto;
}

/* Grid */
.ri-body{
  padding-top:32px;
  padding-bottom:48px;
}
.ri-grid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
  grid-auto-rows:240px;
  grid-auto-flow:row dense;
}
.ri-card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#1a1008;
  cursor:pointer;
  transition:transform .20s ease, box-shadow .20s ease;
  box-shadow:0 4px 14px rgba(0,0,0,.10);
}
.ri-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,.17);
}
.ri-card a{
  display:block;
  height:100%;
  text-decoration:none;
  color:inherit;
  position:relative;
}
.ri-card-media{
  position:absolute;
  inset:0;
}
.ri-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:.78;
  transition:transform .30s ease, opacity .18s;
}
.ri-card:hover .ri-card-media img{
  transform:scale(1.05);
  opacity:.88;
}
.ri-card-cat{
  position:absolute;
  top:12px;
  left:12px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(6px);
  color:rgba(255,255,255,.88);
  padding:4px 9px;
  border-radius:999px;
}
.ri-card-badge{
  display:inline-block;
  margin-top:6px;
  font-size:.63rem;
  font-weight:800;
  letter-spacing:.04em;
  background:var(--brand-yellow);
  color:#1a0a00;
  padding:3px 9px;
  border-radius:999px;
  opacity:.92;
}
.ri-card-body{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:48px 16px 16px;
  background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.28) 65%, transparent 100%);
  color:#fff;
}
.ri-card-title{
  font-size:1.0rem;
  font-weight:900;
  margin:0 0 4px;
  letter-spacing:-0.01em;
  line-height:1.2;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.ri-card-meta{
  font-size:.72rem;
  color:rgba(255,255,255,.58);
}

/* Cards grandes */
.ri-card--lg{
  grid-row:span 2;
}
.ri-card--lg .ri-card-title{ font-size:1.25rem; }
.ri-card--lg .ri-card-body{ padding-bottom:22px; }

/* Responsive */
@media (min-width:600px){
  .ri-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  #route-recetas .container{ max-width:1400px; }
  .ri-grid{ grid-template-columns:repeat(4,1fr); gap:14px; }
}

/* Banda inferior */
.ri-bottom-band{
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:#f7f2ea;
  padding:52px 0 56px;
  text-align:center;
  border-top:1px solid rgba(0,0,0,.07);
}
.ri-bottom-quote{
  font-size:clamp(1.1rem, 2vw, 1.5rem);
  font-weight:800;
  font-style:italic;
  letter-spacing:-0.01em;
  color:#1c1008;
  margin:0 auto 14px;
  max-width:40ch;
  line-height:1.3;
}
.ri-bottom-sub{
  font-size:.95rem;
  color:rgba(0,0,0,.50);
  margin:0;
}
.ri-bottom-link{
  color:var(--brand-red,#ab0606);
  font-weight:700;
  text-decoration:none;
}
.ri-bottom-link:hover{ text-decoration:underline; }
/* =====================================================================
   Contacto
   ===================================================================== */
#contact{
  background:#1a1208;
  color:#fff;
  padding:48px 0;
}
#contact h2{
  color:#fff;
  font-size:clamp(2rem,4vw,2.8rem);
  margin:0 0 12px;
}
#contact .muted{
  color:rgba(255,255,255,.75);
}
.contact-kicker{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--brand-yellow);
  margin-bottom:8px;
}
.contact-block-title{
  font-size:1.05rem;
  font-weight:700;
  color:#fff;
  margin-bottom:6px;
}
/* Inputs dentro de fondo rojo */
#contact input,
#contact textarea{
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.3)!important;
  color:#fff!important;
  border-radius:12px;
}
#contact input::placeholder,
#contact textarea::placeholder{
  color:rgba(255,255,255,.55);
}
#contact input:focus,
#contact textarea:focus{
  outline:2px solid var(--brand-yellow);
  background:rgba(255,255,255,.18)!important;
}
/* Botón sobre fondo morado */
#contact .btn-light{
  background:#fff;
  color:#211a2f;
  border-color:#fff;
}
#contact .btn-light:hover{
  background:var(--brand-yellow);
  border-color:var(--brand-yellow);
  color:#111;
}
.contact-info-block {
  padding: 18px;
  line-height: 1.8;
}
/* =====================================================================
   ROUTE RECIPE — Página individual de receta
   ===================================================================== */

/* Topbar */
.rp-topbar{
  padding:14px 0;
  border-bottom:1px solid rgba(0,0,0,.07);
  background:#fff;
  position:sticky;
  top:100px; /* logo 80px + padding 10px×2 */
  z-index:40;
}
@media (max-width:768px){
  .rp-topbar{ top:140px; } /* logo 120px + padding 10px×2 */
}
.rp-back{
  display:inline-block;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(0,0,0,.45);
  text-decoration:none;
  transition:color .15s;
}
.rp-back:hover{ color:var(--brand-red,#ab0606); }

/* Hero */
.rp-hero{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  min-height:calc(100vh - 80px);
  overflow:hidden;
  background:#1a1008;
}
.rp-hero-media{
  position:absolute;
  inset:0;
}
.rp-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.75;
  display:block;
}
.rp-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.90) 0%,
    rgba(0,0,0,.55) 40%,
    rgba(0,0,0,.10) 75%,
    transparent 100%
  );
  display:flex;
  align-items:flex-end;
}
.rp-hero-content{
  padding-bottom:32px;
  color:#fff;
}
.rp-kicker{
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--brand-yellow);
  margin:0 0 10px;
}
.rp-title{
  font-size:clamp(28px, 5vw, 54px);
  font-weight:900;
  letter-spacing:-0.025em;
  line-height:1.0;
  margin:0 0 12px;
  color:#fff;
  max-width:18ch;
}
.rp-subtitle{
  font-size:1rem;
  color:rgba(255,255,255,.72);
  margin:0 0 16px;
  max-width:44ch;
  line-height:1.5;
}
.rp-subtitle:empty{ display:none; }
/* Meta bar — reemplaza los chips, más grande y visual */
.rp-meta-bar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
  margin-bottom:18px;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:12px 20px;
  width:fit-content;
  max-width:100%;
}
.rp-meta-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
}
.rp-meta-item:first-child{ padding-left:0; }
.rp-meta-item:last-child{ padding-right:0; }
.rp-meta-sep{
  width:1px;
  height:32px;
  background:rgba(255,255,255,.2);
}
.rp-meta-icon{
  font-size:1.25rem;
  line-height:1;
  color:var(--brand-yellow,#f0c040);
  flex-shrink:0;
}
.rp-meta-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.rp-meta-label{
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  line-height:1;
}
.rp-meta-value{
  font-size:.88rem;
  font-weight:700;
  color:#fff;
  line-height:1.2;
}
.rp-meta-value:empty + .rp-meta-text,
.rp-meta-item:has(.rp-meta-value:empty){ display:none; }
/* Mobile: reduce padding, hide labels, inline layout */
@media (max-width:500px){
  .rp-meta-bar{ padding:10px 14px; gap:0; }
  .rp-meta-item{ padding:0 10px; gap:6px; }
  .rp-meta-label{ display:none; }
  .rp-meta-value{ font-size:.82rem; }
  .rp-meta-icon{ font-size:1rem; }
  .rp-meta-sep{ height:20px; }
}

/* Jump nav — dentro del hero (fondo oscuro) */
.rp-jump-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.rp-jump-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 16px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.04em;
  color:#fff;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(6px);
  text-decoration:none;
  transition:background .15s, border-color .15s;
  cursor:pointer;
}
.rp-jump-pill:hover{
  background:rgba(255,255,255,.28);
  border-color:rgba(255,255,255,.55);
}

.rp-badge{
  display:inline-block;
  padding:5px 13px;
  background:var(--brand-yellow);
  color:#1a0a00;
  border-radius:999px;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.04em;
}
.rp-badge:empty{ display:none; }

/* Layout más ancho */
#route-recipe .container{ max-width:1400px; }

/* Fullwidth section — Acto 5 WARM: full-bleed con gradiente cálido */
.rp-fullwidth{
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:linear-gradient(180deg,#f5e8d2 0%,#efe0c8 100%);
  padding:56px 32px 72px;
}
.rp-fullwidth > *{
  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
}
@media (min-width:640px){ .rp-fullwidth{ padding:72px 40px 80px; } }

/* Layout 2 columnas — solo hasta spice band */
.rp-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  padding-top:36px;
  padding-bottom:0;
  /* align-items: stretch por defecto — las columnas se estiran */
}
@media (min-width:900px){
  .rp-layout{
    grid-template-columns:300px 1fr;
    gap:56px;
    padding-top:56px;
    align-items:stretch; /* aside y main misma altura */
  }
}

/* Tips + FAQ en 2 columnas full width */
.rp-tips-faq-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  margin-bottom:52px;
}
@media (min-width:900px){
  .rp-tips-faq-grid{
    grid-template-columns:1fr 1fr;
    gap:56px;
  }
}
.rp-tips-faq-grid [data-recipe-block="tips"],
.rp-tips-faq-grid [data-recipe-block="faq"]{
  /* Sin rp-block, añadimos margen propio */
}

/* Aside (solo desktop) */
.rp-aside{ display:none; }
@media (min-width:900px){
  .rp-aside{ display:block; }
  .rp-aside-sticky{
    position:sticky;
    top:80px;
    background:#1a1208;
    border-radius:16px;
    padding:28px 24px;
    border:none;
    border-top:3px solid transparent;
    border-image:linear-gradient(90deg, var(--brand-red,#D32F2F), var(--brand-yellow,#FBC02D)) 1;
    color:#f5e8d2;
  }
}
/* Aside dark — colores internos (scoped para no afectar mobile) */
.rp-aside .rp-aside-title{
  color:var(--brand-yellow,#FBC02D);
}
.rp-aside .rp-ing-list li{
  border-bottom-color:rgba(245,232,210,.12);
  color:rgba(245,232,210,.85);
}
.rp-aside .rp-ing-list li:last-child{ border-bottom:none; }
.rp-aside .rp-ing-list li::before{
  color:var(--brand-yellow,#FBC02D);
}
.rp-aside .rp-notes{
  color:rgba(245,232,210,.50);
}
/* Ingrediente checkeado en aside oscuro */
.rp-aside .rp-ing-list li.rp-ing-checked{
  text-decoration:line-through;
  text-decoration-color:var(--brand-yellow,#FBC02D);
  text-decoration-thickness:2px;
  color:rgba(245,232,210,.30);
}
.rp-aside .rp-ing-list li.rp-ing-checked::before{
  content:"✓";
  color:var(--brand-yellow,#FBC02D);
}
/* Aside dark — más elementos internos */
.rp-aside .rp-aside-spices{
  border-top-color:rgba(245,232,210,.12);
}
.rp-aside .rp-spice-mini-name{
  color:rgba(245,232,210,.85);
}
.rp-aside .rp-spice-mini-badge{
  color:var(--brand-yellow,#FBC02D);
}
.rp-aside .rp-spice-mini-card:hover{
  background:rgba(245,232,210,.08);
}
.rp-aside .rp-aside-more{
  border-top-color:rgba(245,232,210,.12);
}
.rp-aside .rp-aside-more-title{
  color:rgba(245,232,210,.45);
}
.rp-aside .rp-aside-more-item{
  border-bottom-color:rgba(245,232,210,.08);
}
.rp-aside .rp-aside-more-item span{
  color:rgba(245,232,210,.82);
}
.rp-aside .rp-aside-more-item:hover span{
  color:var(--brand-yellow,#FBC02D);
}
.rp-aside .rp-spice-cards-label{
  color:rgba(245,232,210,.45);
}
.rp-aside-title{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(0,0,0,.40);
  margin:0 0 16px;
}

/* Ingredientes colapsables (solo mobile) */
.rp-ing-mobile{
  margin-bottom:36px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  overflow:hidden;
}
@media (min-width:900px){ .rp-ing-mobile{ display:none; } }
.rp-ing-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  background:#faf8f4;
  border:none;
  cursor:pointer;
  font-size:1rem;
  font-weight:700;
  color:inherit;
  text-align:left;
}
.rp-ing-arrow{
  transition:transform .22s ease;
  font-size:.85rem;
  color:rgba(0,0,0,.40);
}
.rp-ing-mobile.open .rp-ing-arrow{ transform:rotate(180deg); }
.rp-ing-collapse{
  max-height:0;
  overflow:hidden;
  transition:max-height .30s ease;
  padding:0 18px;
}
.rp-ing-mobile.open .rp-ing-collapse{
  max-height:1000px;
  padding:16px 18px 20px;
}

/* Lista de ingredientes */
.rp-ing-list{
  list-style:none;
  padding:0;
  margin:0;
}
.rp-ing-list li{
  padding:10px 0;
  border-bottom:1px dotted rgba(0,0,0,.18);
  font-size:.95rem;
  line-height:1.45;
  display:flex;
  gap:8px;
  align-items:baseline;
}
.rp-ing-list li:last-child{ border-bottom:none; }
.rp-ing-list li::before{
  content:"·";
  color:var(--brand-red,#ab0606);
  font-weight:900;
  font-size:1.2rem;
  flex-shrink:0;
  line-height:1;
}
/* Ingrediente checkeado */
.rp-ing-list li{
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  transition:opacity .2s ease, color .2s ease;
}
.rp-ing-list li:hover{
  opacity:.85;
}
.rp-ing-list li.rp-ing-checked{
  text-decoration:line-through;
  text-decoration-color:var(--brand-red,#ab0606);
  text-decoration-thickness:2px;
  color:rgba(0,0,0,.35);
}
.rp-ing-list li.rp-ing-checked::before{
  content:"✓";
  color:var(--brand-red,#ab0606);
  font-size:.9rem;
}
.rp-notes{
  margin:16px 0 0;
  font-size:.85rem;
  color:rgba(0,0,0,.50);
  line-height:1.5;
}
.rp-notes:empty{ display:none; }

/* Main */
.rp-main{ min-width:0; }

/* Bloques */
.rp-block{ margin-bottom:52px; }
.rp-section-title{
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0 0 36px;
  padding-bottom:0;
  border-bottom:none;
}
.rp-section-title::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  background:var(--brand-red,#D32F2F);
  margin-top:10px;
}

/* Prosa */
.rp-prose p{
  font-size:1rem;
  line-height:1.75;
  color:rgba(0,0,0,.78);
  margin:0 0 16px;
}
.rp-prose p:last-child{ margin-bottom:0; }
/* Pull-quote — primer párrafo de la intro más impactante */
.rp-block [data-recipe="intro"] p:first-of-type{
  font-size:1.13rem;
  font-style:italic;
  line-height:1.72;
  color:rgba(0,0,0,.80);
  border-left:3px solid var(--brand-red,#ab0606);
  padding-left:18px;
  margin-bottom:22px;
}

/* Pasos numerados */
.rp-steps{
  list-style:none;
  padding:0;
  margin:0;
  counter-reset:step;
}
.rp-steps li{
  counter-increment:step;
  position:relative;
  padding:8px 0 48px 56px;
  font-size:1rem;
  line-height:1.7;
  color:rgba(0,0,0,.78);
  border-bottom:1px solid rgba(0,0,0,.10);
}
.rp-steps li:last-child{ padding-bottom:0; border-bottom:none; }
.rp-steps li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:-4px;
  font-family:'Playfair Display',serif;
  font-size:60px;
  font-weight:700;
  line-height:1;
  color:var(--brand-red,#ab0606);
  opacity:.22;
  pointer-events:none;
  z-index:0;
}
.rp-steps li::after{
  display:none;
}
.rp-steps li:last-child::after{ display:none; }

/* Wrapper pasos — fondo sutil */
.rp-steps-wrap{
  background:rgba(255,255,255,.35);
  border-radius:20px;
  padding:32px 28px 36px;
  margin-bottom:40px;
  border:1px solid rgba(0,0,0,.06);
}
.rp-steps-wrap .rp-block--nostep{
  margin-bottom:0;
}

/* Banda especia protagonista — dentro del grid, se extiende al ancho del main */
/* Acto 4 — DARK */
.rp-spice-band{
  background:#1a1208;
  padding:36px 32px;
  border-radius:16px;
  margin:0 0 48px;
  color:#f5e8d2;
}
.rp-spice-eyebrow{
  font-size:.73rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--brand-yellow,#FBC02D);
  margin:0 0 8px;
}
.rp-spice-title{
  font-size:1.3rem;
  font-weight:900;
  letter-spacing:-0.01em;
  margin:0 0 20px;
  color:#f5e8d2;
}
.rp-spice-band .rp-prose p{
  color:rgba(245,232,210,.82);
}

/* Tips — grilla con número grande decorativo */
.rp-tips-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:14px;
  counter-reset:tip-num;
}
.rp-tips-list li{
  counter-increment:tip-num;
  position:relative;
  padding:22px 20px 20px;
  background:var(--brand-bg,#f5e8d2);
  border-radius:16px;
  font-size:.95rem;
  line-height:1.65;
  color:rgba(0,0,0,.78);
  overflow:hidden;
}
/* Número grande de fondo */
.rp-tips-list li::before{
  content:counter(tip-num, decimal-leading-zero);
  position:absolute;
  bottom:-10px;
  right:10px;
  font-size:5rem;
  font-weight:900;
  line-height:1;
  color:var(--brand-red);
  opacity:.08;
  pointer-events:none;
  user-select:none;
}
/* Línea amarilla arriba */
.rp-tips-list li::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--brand-yellow);
  border-radius:16px 16px 0 0;
}

/* FAQ — accordion con <details>/<summary> */
.rp-faq{ display:flex; flex-direction:column; gap:0; }
.rp-faq details.faq-item{
  border-bottom:1px solid rgba(0,0,0,.09);
}
.rp-faq details.faq-item:first-child{ border-top:1px solid rgba(0,0,0,.09); }
.rp-faq summary.faq-q{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 4px;
  cursor:pointer;
  list-style:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.rp-faq summary.faq-q::-webkit-details-marker{ display:none; }
.faq-num{
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.06em;
  color:#fff;
  background:var(--brand-red);
  border-radius:50%;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .2s;
}
details[open] .faq-num{ background:#1a1a1a; }
.faq-q-text{
  flex:1;
  font-weight:800;
  font-size:1rem;
  color:rgba(0,0,0,.85);
  line-height:1.4;
}
.faq-chevron{
  font-size:.8rem;
  color:rgba(0,0,0,.35);
  transition:transform .25s ease;
  flex-shrink:0;
}
details[open] .faq-chevron{ transform:rotate(180deg); color:var(--brand-red); }
.faq-a{
  padding:0 4px 22px 44px;
  font-size:.95rem;
  line-height:1.7;
  color:rgba(0,0,0,.62);
}
.faq-a p{ margin:0; }

/* Banda CTA especia → enciclopedia — sobre fondo dark (Acto 4) */
.rp-spice-enc-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:22px;
  padding:10px 20px;
  border:2px solid rgba(245,232,210,.40);
  border-radius:999px;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.04em;
  color:#f5e8d2;
  text-decoration:none;
  transition:background .18s, color .18s;
  cursor:pointer;
}
.rp-spice-enc-cta:hover{
  background:rgba(245,232,210,.12);
  color:#fff;
}

/* Mini cards de especias — en aside (verticales) */
.rp-aside-spices{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid rgba(0,0,0,.08);
}
.rp-aside-spices .rp-spice-cards-header{
  margin-bottom:14px;
}
.rp-aside-spices .rp-spice-cards-row{
  flex-direction:column;
  gap:8px;
}
.rp-aside-spices .rp-spice-mini-card{
  flex-direction:row;
  width:100%;
  text-align:left;
  gap:12px;
  align-items:center;
  padding:6px 8px;
  border-radius:10px;
  background:transparent;
  transition:background .15s, transform .15s;
}
.rp-aside-spices .rp-spice-mini-card:hover{
  background:rgba(0,0,0,.04);
  transform:none;
}
.rp-aside-spices .rp-spice-mini-img{
  width:44px;
  height:44px;
  flex-shrink:0;
}
.rp-aside-spices .rp-spice-mini-card--main .rp-spice-mini-img{
  width:48px;
  height:48px;
}
.rp-aside-spices .rp-spice-mini-name{
  font-size:.88rem;
  text-align:left;
}
.rp-aside-spices .rp-spice-mini-badge{
  text-align:left;
  font-size:.6rem;
}

/* Box de productos con sobres reales + rotador */
.rp-product-box{
  margin-bottom:52px;
  border-radius:20px;
  background:linear-gradient(135deg,#1a1008 0%,#2d1a0a 100%);
  overflow:hidden;
  padding:48px 44px;
  display:flex;
  align-items:center;
  gap:40px;
  flex-wrap:wrap;
  position:relative;
}
/* Contenedor de sobres: flex en línea, centrado */
.rp-product-box-sobres{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Sobres laterales: en flujo normal, con transform para el abanico */
.rp-sob--side{
  width:120px;
  object-fit:contain;
  flex-shrink:0;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.55));
  transition:transform .3s ease, opacity .3s ease;
}
.rp-sob--left{
  transform:rotate(-13deg) translateY(12px);
  z-index:1;
  opacity:.82;
  margin-right:-28px;
}
.rp-sob--right{
  transform:rotate(11deg) translateY(12px);
  z-index:1;
  opacity:.82;
  margin-left:-28px;
}
.rp-product-box:hover .rp-sob--left{
  transform:rotate(-17deg) translateY(-4px);
  opacity:1;
}
.rp-product-box:hover .rp-sob--right{
  transform:rotate(15deg) translateY(-4px);
  opacity:1;
}
/* Sobre central: posición relativa para el rotador */
.rp-sob-mid-wrap{
  position:relative;
  width:140px;
  height:190px;
  flex-shrink:0;
  z-index:3;
}
.rp-sob-mid{
  width:140px;
  height:190px;
  object-fit:contain;
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  transition:opacity .6s ease;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.60));
}
.rp-sob-mid.active{
  opacity:1;
}
.rp-product-box-content{ flex:1; min-width:160px; }
.rp-product-box-label{
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brand-yellow);
  margin:0 0 8px;
}
.rp-product-box-title{
  font-size:1.2rem;
  font-weight:900;
  color:#fff;
  margin:0 0 8px;
  line-height:1.25;
}
.rp-product-box-sub{
  font-size:.82rem;
  color:rgba(255,255,255,.55);
  margin:0 0 20px;
  line-height:1.5;
}
.rp-product-box-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 22px;
  background:var(--brand-yellow);
  color:#111;
  border-radius:999px;
  font-size:.82rem;
  font-weight:800;
  text-decoration:none;
  letter-spacing:.03em;
  transition:opacity .15s;
  cursor:pointer;
}
.rp-product-box-btn:hover{ opacity:.85; }

@media (max-width:640px){
  .rp-product-box{
    flex-direction:column;
    align-items:center;
    padding:36px 24px 40px;
    overflow:visible;
    text-align:center;
  }
  .rp-product-box-sobres{
    width:100%;
    justify-content:center;
    padding:0 20px;
  }
  .rp-sob--side{ width:90px; }
  .rp-sob-mid-wrap{ width:110px; height:150px; }
  .rp-sob-mid{ width:110px; height:150px; }
}

/* Mini cards de especias — en main (ya no se usa, placeholder) */
.rp-product-strip{
  margin-bottom:52px;
}
.rp-spice-cards-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
  flex-wrap:wrap;
  gap:8px;
}
.rp-spice-cards-label{
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(0,0,0,.38);
  margin:0;
}
.rp-spice-cards-cta{
  font-size:.8rem;
  font-weight:700;
  color:var(--brand-red);
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.rp-spice-cards-cta:hover{ text-decoration:underline; }
.rp-spice-cards-row{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.rp-spice-mini-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  cursor:pointer;
  width:88px;
  transition:transform .2s;
}
.rp-spice-mini-card:hover{ transform:translateY(-4px); }
.rp-spice-mini-img{
  width:80px;
  height:80px;
  border-radius:50%;
  overflow:hidden;
  background:#f0e8d5;
  border:2px solid transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 2px 10px rgba(0,0,0,.10);
  transition:box-shadow .2s;
}
.rp-spice-mini-card:hover .rp-spice-mini-img{
  box-shadow:0 6px 18px rgba(0,0,0,.16);
}
.rp-spice-mini-card--main .rp-spice-mini-img{
  border-color:var(--brand-red);
  width:90px;
  height:90px;
}
.rp-spice-mini-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.rp-spice-mini-name{
  font-size:.78rem;
  font-weight:700;
  text-align:center;
  color:rgba(0,0,0,.82);
  line-height:1.25;
}
.rp-spice-mini-badge{
  display:block;
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--brand-red);
  text-align:center;
}

/* Separador decorativo entre secciones */
/* =====================================================================
   HUB ALERT (advertencia por variante)
   ===================================================================== */
.rp-hub-alert{
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:var(--brand-red);
  border-radius:14px;
  padding:20px 24px;
  margin-bottom:32px;
}
.rp-hub-alert-icon{
  font-size:1.6rem;
  color:#fff;
  flex-shrink:0;
  line-height:1.3;
}
.rp-hub-alert-body{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.rp-hub-alert-title{
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
}
.rp-hub-alert p{
  margin:0;
  font-size:.92rem;
  font-weight:600;
  color:#fff;
  line-height:1.55;
  opacity:.93;
}

/* =====================================================================
   HUB SELECTOR (pizza multi-variante)
   ===================================================================== */
/* Wrapper externo — banda oscura pegada al hero */
#rp-hub-selector{
  background:#120b04;
  padding:28px 0 32px;
}
.rp-hub-selector{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}
.rp-hub-selector-label{
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(245,232,210,.38);
  margin:0 0 16px;
}
.rp-hub-pills{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
  gap:10px;
}
.rp-hub-pill{
  padding:16px 14px;
  border-radius:12px;
  border:1px solid rgba(245,232,210,.12);
  background:rgba(245,232,210,.06);
  font-size:.86rem;
  font-weight:700;
  color:rgba(245,232,210,.65);
  cursor:pointer;
  transition:all .18s ease;
  line-height:1.3;
  text-align:center;
  letter-spacing:.01em;
}
.rp-hub-pill:hover{
  border-color:rgba(245,232,210,.35);
  color:#f5e8d2;
  background:rgba(245,232,210,.1);
}
.rp-hub-pill.active{
  background:var(--brand-red);
  border-color:var(--brand-red);
  color:#fff;
  box-shadow:0 6px 20px rgba(180,30,20,.35);
}
@media(max-width:640px){
  .rp-hub-selector{ padding:0 16px; }
  .rp-hub-pills{ grid-template-columns:repeat(2, 1fr); gap:8px; }
  .rp-hub-pill{ padding:13px 10px; font-size:.82rem; }
}
/* ===================================================================== */

.rp-section-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 40px;
  color:rgba(0,0,0,.18);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.rp-section-divider::before,
.rp-section-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(0,0,0,.1);
}

/* (drop-cap removido — el pull-quote usa borde izquierdo rojo, ver arriba) */

/* Variantes y acompañamientos */
/* Variantes — rediseño editorial */
.rp-variants-block{ margin-bottom:52px; }
.rp-var-header{ margin-bottom:28px; }
.rp-var-eyebrow{
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brand-red,#ab0606);
  margin:0 0 6px;
}
.rp-variants-block .rp-section-title{
  margin-bottom:0;
  border-bottom:none;
  font-size:1.5rem;
}
.rp-var-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
}
/* Cada ítem: layout horizontal número + contenido */
.rp-var-item{
  display:flex;
  align-items:flex-start;
  gap:0;
  background:#1c0e04;
  border-radius:16px;
  overflow:hidden;
  transition:transform .18s, box-shadow .18s;
  cursor:default;
}
.rp-var-item:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
/* Número lateral */
.rp-var-num{
  flex-shrink:0;
  width:52px;
  padding:20px 0;
  background:var(--brand-red,#ab0606);
  color:#fff;
  font-size:1.1rem;
  font-weight:900;
  letter-spacing:.02em;
  text-align:center;
  font-variant-numeric:tabular-nums;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  writing-mode:vertical-lr;
  transform:rotate(180deg);
}
/* Número par — amarillo */
.rp-var-item:nth-child(even) .rp-var-num{
  background:var(--brand-yellow,#f0c040);
  color:#1a0a00;
}
/* Contenido */
.rp-var-content{
  flex:1;
  padding:20px 20px 18px;
  min-width:0;
}
.rp-var-name{
  display:block;
  font-size:.92rem;
  font-weight:800;
  color:var(--brand-yellow,#f0c040);
  margin-bottom:6px;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.rp-var-desc{
  font-size:.9rem;
  line-height:1.65;
  color:rgba(255,255,255,.80);
  margin:0;
}

/* Intro editorial */
[data-recipe-block="intro"] .rp-prose p{
  font-size:1.1rem;
  line-height:1.85;
  color:rgba(0,0,0,.82);
}

/* Aside: otras recetas */
.rp-aside-more{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid rgba(0,0,0,.08);
}
.rp-aside-more-title{
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(0,0,0,.38);
  margin:0 0 14px;
}
.rp-aside-more-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  cursor:pointer;
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:opacity .15s;
}
.rp-aside-more-item:last-child{ border-bottom:none; }
.rp-aside-more-item:hover{ opacity:.75; }
.rp-aside-more-item img{
  width:52px;
  height:52px;
  object-fit:cover;
  border-radius:8px;
  flex-shrink:0;
  background:#e8dcc8;
}
.rp-aside-more-item span{
  font-size:.85rem;
  font-weight:600;
  line-height:1.35;
  color:rgba(0,0,0,.82);
}
.rp-aside-more-item:hover span{ color:var(--brand-red); }

/* Banda "Seguí cocinando" */
.rp-more-band{
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:#f7f2ea;
  padding:64px 0 72px;
}
.rp-more-band .container{ max-width:1400px; }
/* Header con flechas al lado */
.rp-more-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:36px;
  gap:16px;
}
.rp-more-header .rp-more-title{ margin-bottom:0; }
/* Flechas */
.rp-more-arrows{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.rp-more-arrow{
  width:44px;
  height:44px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.15);
  background:#fff;
  color:rgba(0,0,0,.70);
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, border-color .15s, color .15s, transform .15s;
  font-weight:400;
}
.rp-more-arrow:hover:not(:disabled){
  background:var(--brand-red,#ab0606);
  border-color:var(--brand-red,#ab0606);
  color:#fff;
  transform:scale(1.08);
}
.rp-more-arrow:disabled{
  opacity:.3;
  cursor:default;
}
.rp-more-counter{
  font-size:.78rem;
  font-weight:700;
  color:rgba(0,0,0,.40);
  min-width:36px;
  text-align:center;
}
.rp-more-eyebrow{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--brand-red);
  margin:0 0 10px;
}
.rp-more-title{
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:900;
  letter-spacing:-.02em;
  margin:0;
}
.rp-more-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media (max-width:720px){
  .rp-more-grid{ grid-template-columns:1fr; gap:16px; }
}
@media (min-width:721px) and (max-width:980px){
  .rp-more-grid{ grid-template-columns:repeat(2,1fr); }
}
.rp-more-card{
  cursor:pointer;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 14px rgba(0,0,0,.07);
  transition:transform .22s ease, box-shadow .22s ease;
  display:flex;
  flex-direction:column;
}
.rp-more-card:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 28px rgba(0,0,0,.13);
}
.rp-more-card-media{
  aspect-ratio:4/3;
  overflow:hidden;
  background:#e8dcc8;
  flex-shrink:0;
}
.rp-more-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.rp-more-card:hover .rp-more-card-media img{
  transform:scale(1.05);
}
.rp-more-card-body{
  padding:20px 22px 24px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.rp-more-card-cat{
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brand-red);
  margin-bottom:6px;
  display:block;
}
.rp-more-card-title{
  font-size:1.05rem;
  font-weight:800;
  margin:0 0 8px;
  line-height:1.3;
  color:rgba(0,0,0,.88);
}
.rp-more-card-time{
  font-size:.8rem;
  color:rgba(0,0,0,.45);
  margin:0 0 auto;
}
.rp-more-card-link{
  display:inline-block;
  margin-top:16px;
  font-size:.8rem;
  font-weight:700;
  color:var(--brand-red);
  letter-spacing:.03em;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
footer{
  background:#111;
  color:#d1d5db;
}
.f-row{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:24px 0;
}
.f-logo{
  width:44px;
  height:auto;
  display:block;
  flex-shrink:0;
}

/* =====================================================================
   ACCESIBILIDAD + HELPERS
   ===================================================================== */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:16px;
  top:12px;
  width:auto;
  height:auto;
  padding:10px 14px;
  background:#111;
  color:#fff;
  border-radius:12px;
  z-index:1000;
}

.nav a:focus-visible,
.mnav a:focus-visible,
.burger:focus-visible{
  outline:2px solid var(--brand-yellow);
  outline-offset:3px;
  border-radius:10px;
}

body.no-scroll{overflow:hidden}

.sr-only{
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =====================================================================
   BOTÓN FLOTANTE WHATSAPP
   ===================================================================== */
.whatsapp-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:60;
  width:54px;
  height:54px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#128C7E;
  color:#fff;
  box-shadow:0 12px 24px rgba(0,0,0,.25);
  border:2px solid rgba(255,255,255,.9);
  cursor:pointer;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
}
.whatsapp-float:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(0,0,0,.28);
  background:#0f7a6e;
}
.whatsapp-float:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.whatsapp-icon{
  font-weight:800;
  font-size:14px;
  letter-spacing:.08em;
}
@media (max-width:640px){
  .whatsapp-float{
    right:14px;
    bottom:14px;
    width:50px;
    height:50px;
  }
}

/* =====================================================================
   PERFORMANCE / SPA ROUTES
   ===================================================================== */
#route-home{
  content-visibility:auto;
  contain-intrinsic-size:1129px 3585px;
}
.route{display:none}
.route.active{display:block}

.section.route{
  content-visibility:auto;
  contain-intrinsic-size:800px;
}

#route-especia,
#route-especia .section,
#route-especia section,
#route-especia article,
#route-especia div {
  content-visibility: visible !important;
  contain-intrinsic-size: unset !important;
}
/* =====================================================================
   RUTA EXTENDIDA: HISTORIA — Rediseño 5 beats (Abril 2026)
   ===================================================================== */
#route-historia{
  content-visibility:auto;
  contain-intrinsic-size:1200px;
}

/* ── Beat Hero ── */
.hist-beat-hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60vh;
  overflow:hidden;
  background:#1a1208;
}
.hist-beat-hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(.4);
}
.hist-beat-hero__h1{
  position:relative;
  z-index:2;
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:700;
  color:#fff;
  text-shadow:0 4px 16px rgba(0,0,0,.45);
  line-height:1.15;
  text-align:center;
  max-width:88%;
  margin:0;
}
@media(max-width:768px){
  .hist-beat-hero{min-height:75svh}
}

/* ── Beat sections ── */
.hist-beat{padding:clamp(48px,8vw,96px) 0}
.hist-beat--light{background:#faf6f0;color:var(--text)}
.hist-beat--dark{background:#1a1208;color:#f0e6d2}

/* ── Beat grid (2-col desktop) ── */
.hist-beat-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}
.hist-beat-grid--centered{
  max-width:680px;
  margin:0 auto;
}
@media(max-width:768px){
  .hist-beat-grid{grid-template-columns:1fr;gap:32px}
}

/* ── Typography ── */
.hist-eyebrow{
  display:block;
  font-family:'Courier New',monospace;
  font-size:.8rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
  margin-bottom:.4rem;
}
.hist-beat--dark .hist-eyebrow{color:rgba(240,230,210,.6)}
.hist-beat-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:700;
  line-height:1.1;
  margin:.3em 0 .8em;
  color:inherit;
}
.hist-beat-text{
  font-family:'Lora',serif;
  font-size:clamp(1rem,1.2vw,1.1rem);
  line-height:1.75;
  max-width:60ch;
  margin:0 0 1.5rem;
}
.hist-beat-text--ref{
  font-size:.92em;font-style:italic;
  color:rgba(0,0,0,.55);margin-top:.5rem;
}
.hist-beat--dark .hist-beat-text--ref{color:rgba(240,230,210,.55)}
.hist-beat-text a{
  color:var(--brand-red);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .2s;
}
.hist-beat-text a:hover{color:#b71c1c}
.hist-beat--dark .hist-beat-text a{color:var(--brand-yellow)}

/* ── Dominant image ── */
.hist-dominant-img{
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.15);
}
.hist-dominant-img img{width:100%;height:auto;display:block}
.hist-dominant-img figcaption{
  font-size:.85rem;color:var(--muted);font-style:italic;
  padding:8px 4px 0;
}

/* ── Secondary image ── */
.hist-secondary-img{
  max-width:320px;
  border-radius:8px;
  margin-top:1.5rem;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  overflow:hidden;
}
.hist-secondary-img img{width:100%;height:auto;display:block}
.hist-secondary-img figcaption{
  font-size:.8rem;color:var(--muted);font-style:italic;
  padding:6px 4px 0;
}

/* ── Placeholders ── */
.hist-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:200px;
  border:2px dashed rgba(0,0,0,.15);
  border-radius:12px;
  background:rgba(0,0,0,.03);
  gap:8px;padding:24px;
}
.hist-placeholder--tall{min-height:360px}
.hist-placeholder--sm{min-height:140px;width:140px;flex:0 0 auto;padding:16px}
.hist-beat--dark .hist-placeholder{
  border-color:rgba(240,230,210,.2);
  background:rgba(255,255,255,.05);
}
.hist-placeholder-label{
  font-family:'Playfair Display',serif;font-size:.95rem;font-weight:600;opacity:.6;
  text-align:center;
}
.hist-placeholder-tag{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;opacity:.4;font-weight:700;
}

/* ── Expand / collapse ── */
.hist-expand-wrap{text-align:center;margin:2.5rem 0 0}
.hist-expand-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Playfair Display',serif;font-size:.95rem;font-weight:600;
  background:transparent;
  border:1px solid rgba(0,0,0,.15);
  border-radius:3rem;padding:.65rem 1.6rem;
  cursor:pointer;letter-spacing:.02em;
  transition:background .25s,border-color .25s;
  color:inherit;
}
.hist-beat--dark .hist-expand-btn{color:#f0e6d2;border-color:rgba(240,230,210,.3)}
.hist-expand-btn:hover{background:rgba(0,0,0,.05)}
.hist-beat--dark .hist-expand-btn:hover{background:rgba(255,255,255,.08)}
.hist-expand-arrow{font-size:.85rem;transition:transform .3s}
.hist-expand-btn[aria-expanded="true"] .hist-expand-arrow{transform:rotate(180deg)}
.hist-expandable{max-height:0;overflow:hidden;transition:max-height .5s ease-in-out}
.hist-expandable-inner{padding:2rem 0}

/* ── Expand grid & datums ── */
.hist-expand-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:1.5rem}
@media(min-width:700px){.hist-expand-grid{grid-template-columns:repeat(2,1fr)}}
.hist-expand-datum{
  font-family:'Lora',serif;font-size:.95rem;line-height:1.7;
  padding:14px 18px;
  border-left:3px solid var(--brand-red);
  background:rgba(0,0,0,.02);
  border-radius:0 8px 8px 0;
  margin-top:.75rem;
}
.hist-beat--dark .hist-expand-datum{
  background:rgba(255,255,255,.05);
  border-left-color:var(--brand-yellow);
  color:#f0e6d2;
}

/* ── Expand photos ── */
.hist-expand-photo{margin:0;overflow:hidden;border-radius:8px}
.hist-expand-photo img{width:100%;display:block;border-radius:8px;transition:transform .3s}
.hist-expand-photo:hover img{transform:scale(1.03)}
.hist-expand-photo figcaption{
  font-size:.8rem;margin-top:.5rem;opacity:.65;text-align:center;
  font-family:'Lora',serif;
}
/* Standalone horizontal photo (e.g., Banco de la Paciencia) */
.hist-expand-photo--wide{max-width:600px;margin:1.5rem auto}
.hist-expand-photo--wide img{width:100%;height:auto}
@media(min-width:700px){.hist-expand-grid{grid-template-columns:repeat(3,1fr)}}

/* ── Floating documents (transparent bg, drop shadow, slight rotation) ── */
.hist-floating-doc{
  display:block;max-width:200px;margin:2.5rem auto;
  transform:rotate(-2.5deg);
  filter:drop-shadow(4px 8px 16px rgba(0,0,0,.3));
  transition:transform .4s ease, filter .4s ease;
}
.hist-floating-doc:hover{transform:rotate(0deg) scale(1.04);filter:drop-shadow(4px 8px 20px rgba(0,0,0,.4))}
.hist-floating-doc img{width:100%;display:block;border-radius:16px;overflow:hidden}
.hist-floating-doc figcaption{
  text-align:center;font-size:.8rem;margin-top:.6rem;opacity:.55;
  font-family:'Lora',serif;font-style:italic;
}

/* ── Expand photos equal height grid ── */
.hist-expand-grid--equal figure img{
  height:280px;width:100%;object-fit:contain;
}

/* ── Packaging strip items ── */
.hist-packaging-item{margin:0;flex:0 0 auto;width:160px;text-align:center}
.hist-packaging-item img{
  width:160px;height:160px;object-fit:cover;border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.1);transition:transform .3s;
}
.hist-packaging-item:hover img{transform:scale(1.05)}
.hist-packaging-item figcaption{font-size:.75rem;margin-top:.4rem;opacity:.6}

/* ── Blockquote inside expandable ── */
.hist-blockquote{
  border-left:4px solid var(--brand-yellow);
  padding-left:1.5rem;
  margin:0 0 2rem;
  font-family:'Lora',serif;
  font-style:italic;
  font-size:1rem;
  line-height:1.85;
  color:#f0e6d2;
}

/* ── Packaging strip ── */
.hist-strip-label{
  font-size:.8rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin:2rem 0 .75rem;
}
.hist-packaging-strip{
  display:flex;gap:14px;overflow-x:auto;padding:8px 0 12px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.hist-packaging-strip>*{scroll-snap-align:start}

/* ── Beat 4 — Cita (cierre) ── */
.hist-beat--cita{
  background:linear-gradient(180deg,#f5ede0 0%,#faf6f0 100%);
  padding:clamp(64px,10vw,120px) 24px;
}
.hist-cita-block{max-width:680px;margin:0 auto;text-align:center}
.hist-cita-block blockquote{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  font-style:italic;line-height:1.85;
  color:#2c1a0e;margin:0;padding:0;border:none;
}
.hist-cita-block blockquote p{margin:0 0 1.2em}
.hist-cita-block blockquote p:last-child{margin-bottom:0}
.hist-cita-attr{
  margin-top:1.5rem;font-family:'Lora',serif;
  font-size:.9rem;font-weight:600;font-style:italic;
  letter-spacing:.03em;color:var(--muted);
}

/* =====================================================================
   TIPOGRAFÍA — Home
   ===================================================================== */

#route-home h2,
#route-home h3{
  font-family:'Rubik Dirt',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* Rubik Dirt funciona bien en fondos oscuros (Historia, Productos), no en fondo crema.
   Override: secciones sobre fondo claro → Playfair italic.
   #products h2 queda con Rubik Dirt (tiene fondo dark #2c2218, correcto). */
#spices h2,
#recipes h2{
  font-family:'Playfair Display',serif;
  font-style:italic;
}

    /* =====================================================================
       ENCICLOPEDIA 51
       ===================================================================== */
    .tabs{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin:12px 0 16px;
    }
    .tab{
      padding:10px 14px;
      border:1px solid #e5e7eb;
      border-radius:999px;
      background:#fff;
      font-weight:700;
      cursor:pointer;
    }
    .tab[aria-selected="true"]{
      background:var(--brand-red);
      color:#fff;
      border-color:transparent;
    }

    .grid-cards{
      display:grid;
      gap:16px;
      grid-template-columns:1fr;
    }
    @media (min-width:640px){
      .grid-cards{grid-template-columns:repeat(2,1fr)}
    }
    @media (min-width:1024px){
      .grid-cards{grid-template-columns:repeat(3,1fr)}
    }

    .card.spice-mini{
      display:flex;
      flex-direction:column;
      border-radius:16px;
      overflow:hidden;
      box-shadow:0 2px 12px rgba(44,24,16,.12);
      border:1px solid rgba(44,24,16,.10);
      cursor:pointer;
      transition:transform .2s, box-shadow .2s, border-color .2s;
    }
    .card.spice-mini:hover{
      transform:translateY(-4px);
      box-shadow:0 8px 24px rgba(44,24,16,.2);
      border-color:rgba(44,24,16,.22);
    }
    .card.spice-mini .ph{
      aspect-ratio:3/2;
      padding:8px;
    }
    .card.spice-mini .ph img{
      width:100%;
      height:100%;
      object-fit:contain;
    }
    .card.spice-mini .body{
      padding:10px 12px 12px;
    }
    .card.spice-mini h3{
      margin:0 0 3px;
      font-size:.95rem;
    }
    .card.spice-mini p{
      margin:0;
      font-size:.82rem;
      color:var(--muted);
    }

    /* ── Fondo oscuro unificado + línea de color por categoría ── */
    .card.spice-mini[data-cat]{
      background:#2c1810;
      border:1px solid rgba(255,255,255,.06);
      position:relative;
    }
    .card.spice-mini[data-cat]::before{
      content:'';
      position:absolute;
      top:0; left:0; right:0;
      height:3px;
      z-index:1;
    }
    .card.spice-mini[data-cat] .ph{
      background:#3d2415;
      padding:8px;
    }
    .card.spice-mini[data-cat] h3{ color:#f5e8d2; }
    .card.spice-mini[data-cat] p{ color:rgba(245,232,210,.6); }

    /* Especias — rojo→dorado, igual que pairing cards y quickuse */
    .card.spice-mini[data-cat="especias"]::before{
      background:linear-gradient(90deg, #D32F2F, #FBC02D);
    }
    /* Hierbas — verde oliva */
    .card.spice-mini[data-cat="hierbas"]::before{
      background:#6b8f3a;
    }
    /* Blends — dorado ámbar */
    .card.spice-mini[data-cat="blends"]::before{
      background:#c8920a;
    }
    /* Repostería — lavanda apagada */
    .card.spice-mini[data-cat="reposteria"]::before{
      background:#9b7ec8;
    }
    
/* =====================================================================
   SPICE INTRO SECTION (Ají molido — sección editorial global)
   Oscuro, como Origen — establece contexto mundial antes de lo práctico
   ===================================================================== */
.spice-intro-section{
  background:#1a1008;
  padding:80px 0 72px;
  position:relative;
  overflow:hidden;
}
/* Fondo texturizado sutil */
.spice-intro-section::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:url('../images/fotos/img-2959.jpg');
  background-size:cover;
  background-position:center;
  opacity:.04;
  pointer-events:none;
}
/* Glow rojo dramático en la parte superior — ancla el título */
.spice-intro-section::after{
  content:'';
  position:absolute;
  top:-80px;
  left:50%;
  transform:translateX(-50%);
  width:800px;
  height:420px;
  background:radial-gradient(ellipse at center top, rgba(192,57,43,.18) 0%, transparent 68%);
  pointer-events:none;
  z-index:0;
}
.spice-intro{
  max-width:1400px;
  position:relative;
  z-index:1;
}
.spice-intro .spice-section-eyebrow{
  color:rgba(251,192,45,.8) !important;
  font-size:.8rem !important;
  letter-spacing:.2em;
  margin-bottom:.8rem;
  text-align:center;
}

/* Título más grande e impactante, con línea roja debajo */
.spice-intro-title{
  font-family:'Playfair Display',serif;
  font-size:2.8rem;
  font-weight:700;
  color:#f5e8d2;
  margin:0 0 .5rem;
  line-height:1.15;
  text-align:center;
}
.spice-intro-title::after{
  content:'';
  display:block;
  width:80px;
  height:3px;
  background:#c0392b;
  border-radius:2px;
  margin:14px auto 1.8rem;
}

/* Prose más angosta = más legible */
.spice-intro-prose{
  max-width:720px;
  margin:0 auto 2.5rem;
  text-align:center;
}
/* Wider prose when triad table follows (ajo en polvo) */
.spice-intro:has(.spice-intro-triad) .spice-intro-prose{
  max-width:960px;
}
/* Wider prose when versus table follows (canela) */
.spice-intro:has(.spice-intro-versus) .spice-intro-prose{
  max-width:960px;
}
/* Wider prose when reveal layout follows (azafrán, pimienta, nuez moscada) */
.spice-intro:has(.spice-intro-reveal) .spice-intro-prose{
  max-width:900px;
}
/* Wider prose when blend layout follows (adobo, chimichurri, provenzal, aves) */
.spice-intro:has(.spice-intro-blend) .spice-intro-prose{
  max-width:960px;
}
.spice-intro-prose p{
  color:rgba(245,232,210,.78);
  line-height:1.82;
  font-size:.97rem;
  margin:0 0 1rem;
}
.spice-intro-prose p:first-child{
  font-size:1.05rem;
  color:rgba(245,232,210,.9);
}
.spice-intro-prose p:last-child{ margin-bottom:0; }
.spice-intro-prose strong{ color:#f5e8d2; }
.spice-intro-prose em{ color:rgba(251,192,45,.85); font-style:normal; }

/* 2×2 grid de métodos de secado */
.spice-intro-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:2rem auto;
  max-width:1160px;
}
.spice-intro-detail{
  background:rgba(255,255,255,.04);
  border-left:3px solid rgba(251,192,45,.35);
  border-radius:0 10px 10px 0;
  padding:16px 18px;
  transition:background .2s, border-color .2s;
}
.spice-intro-detail:hover{
  background:rgba(255,255,255,.07);
  border-left-color:rgba(251,192,45,.7);
}
.spice-intro-detail h4{
  font-family:'Playfair Display',serif;
  font-size:.95rem;
  font-weight:700;
  color:rgba(251,192,45,.9);
  margin:0 0 6px;
}
.spice-intro-detail p{
  color:rgba(245,232,210,.68);
  font-size:.85rem;
  line-height:1.65;
  margin:0;
}
.spice-intro-detail p strong{ color:rgba(245,232,210,.9); }

/* Pull quote — introClosing */
.spice-intro-closing{
  background:rgba(251,192,45,.07);
  border:1px solid rgba(251,192,45,.18);
  border-radius:12px;
  padding:20px 26px 20px 48px;
  color:#f5e8d2;
  font-size:.97rem;
  line-height:1.7;
  font-style:italic;
  margin:2rem auto 0;
  max-width:1160px;
  position:relative;
}
.spice-intro-closing::before{
  content:'"';
  position:absolute;
  left:18px;
  top:8px;
  font-family:'Playfair Display',serif;
  font-size:2.8rem;
  color:rgba(251,192,45,.3);
  line-height:1;
}

/* ── Intro: country highlights — world tour cards ──────────────────── */
.spice-intro-countries{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:0 auto 2rem;
  max-width:1160px;
  align-items:stretch;
}

/* Card base — bordes redondeados completos, sin borde izquierdo genérico */
.spice-intro-country{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:26px 24px 24px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.spice-intro-country:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.07);
  box-shadow:0 8px 24px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
}

/* México — terracota naranja */
.spice-intro-country:nth-child(1){
  border-top:3px solid #e0622f;
  background:linear-gradient(155deg, rgba(224,98,47,.13) 0%, rgba(44,24,16,0) 52%);
}
/* Perú — borgoña */
.spice-intro-country:nth-child(2){
  border-top:3px solid #9e1a2d;
  background:linear-gradient(155deg, rgba(158,26,45,.16) 0%, rgba(44,24,16,0) 52%);
}
/* India — azafrán */
.spice-intro-country:nth-child(3){
  border-top:3px solid #c98100;
  background:linear-gradient(155deg, rgba(201,129,0,.14) 0%, rgba(44,24,16,0) 52%);
}

/* Bandera más grande, visible, como encabezado de la card */
.spice-intro-country-flag{
  font-size:2.4rem;
  line-height:1;
  display:block;
  margin-bottom:0;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.spice-intro-country-body{
  color:rgba(245,232,210,.75);
  font-size:.88rem;
  line-height:1.72;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Nombre del país — display más grande y serif */
.spice-intro-country-body > strong{
  color:#f5e8d2;
  display:block;
  font-family:'Playfair Display',serif;
  font-size:1.12rem;
  font-weight:700;
  margin-bottom:2px;
  line-height:1.2;
}

/* Bold dentro del texto de ejemplos — dorado, inline */
.spice-intro-country-body span strong{
  display:inline;
  font-family:inherit;
  font-size:inherit;
  color:rgba(251,192,45,.95);
  font-weight:600;
}

/* ── Intro: Argentina callout — banda roja de cierre ───────────────── */
.spice-intro-argentina{
  background:linear-gradient(135deg, rgba(185,35,35,.24) 0%, rgba(26,16,8,.7) 100%);
  border:1px solid rgba(192,57,43,.32);
  border-left:4px solid #c0392b;
  border-radius:16px;
  padding:28px 36px;
  margin:0 auto 2rem;
  max-width:1160px;
  display:flex;
  gap:22px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
/* Glow rojo suave a la izquierda */
.spice-intro-argentina::before{
  content:'';
  position:absolute;
  left:-70px;
  top:50%;
  transform:translateY(-50%);
  width:240px;
  height:240px;
  background:rgba(192,57,43,.18);
  border-radius:50%;
  filter:blur(55px);
  pointer-events:none;
}
.spice-intro-argentina .spice-intro-country-flag{
  font-size:3rem;
  flex-shrink:0;
  margin-bottom:0;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.spice-intro-argentina .spice-intro-country-body{
  color:rgba(245,232,210,.87);
  font-size:.94rem;
  line-height:1.78;
}
.spice-intro-argentina .spice-intro-country-body strong{
  display:inline;
  font-family:inherit;
  font-size:inherit;
  font-weight:700;
  color:#f5e8d2;
}

/* ── Intro: drying note — tarjeta sutil, no solo un divider ────────── */
.spice-intro-drying{
  margin:2.5rem auto 0;
  max-width:1160px;
  padding:26px 32px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(251,192,45,.22);
  border-radius:14px;
}
.spice-intro-drying h3{
  font-family:'Playfair Display',serif;
  font-size:1rem;
  font-weight:700;
  color:rgba(251,192,45,.85);
  margin:0 0 .5rem;
}
.spice-intro-drying p{
  color:rgba(245,232,210,.7);
  font-size:.88rem;
  line-height:1.78;
  margin:0;
  max-width:900px;
}
.spice-intro-drying p strong{
  color:rgba(245,232,210,.95);
}

/* ── Intro: TIMELINE layout — viaje del pimentón ─────────────────── */
.spice-intro-timeline{
  position:relative;
  max-width:1060px;
  margin:0 auto 2.5rem;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding:36px 0 0;
}
/* Línea dorada conectora */
.spice-intro-timeline::before{
  content:'';
  position:absolute;
  top:60px;
  left:60px;
  right:60px;
  height:2px;
  background:linear-gradient(90deg,
    rgba(251,192,45,.12) 0%,
    rgba(251,192,45,.45) 20%,
    rgba(251,192,45,.45) 80%,
    rgba(192,57,43,.55) 100%);
  z-index:0;
}

/* Cada parada */
.tl-stop{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:1;
}

/* Marcador circular con flag */
.tl-stop-marker{
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(26,16,8,.95);
  border:2px solid rgba(251,192,45,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  position:relative;
  transition:border-color .3s, box-shadow .3s;
}
.tl-stop:hover .tl-stop-marker{
  border-color:rgba(251,192,45,.7);
  box-shadow:0 0 20px rgba(251,192,45,.18);
}
/* Glow sutil detrás del marcador */
.tl-stop-marker::before{
  content:'';
  position:absolute;
  inset:-12px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(251,192,45,.1) 0%, transparent 70%);
  pointer-events:none;
}
.tl-stop-flag{
  font-size:1.8rem;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));
}

/* Contenido de cada parada */
.tl-stop-content{
  max-width:300px;
}
.tl-stop-name{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  font-weight:700;
  color:#f5e8d2;
  margin-bottom:8px;
}
.tl-stop-text{
  color:rgba(245,232,210,.7);
  font-size:.85rem;
  line-height:1.72;
  margin:0;
}
.tl-stop-text strong{
  color:rgba(251,192,45,.95);
  font-weight:600;
}
.tl-stop-text em{
  color:rgba(251,192,45,.75);
  font-style:italic;
}

/* Parada final (Argentina) — acento rojo */
.tl-stop--arrival .tl-stop-marker{
  border-color:rgba(192,57,43,.6);
  background:rgba(80,20,15,.6);
  box-shadow:0 0 24px rgba(192,57,43,.2);
}
.tl-stop--arrival:hover .tl-stop-marker{
  border-color:rgba(192,57,43,.85);
  box-shadow:0 0 30px rgba(192,57,43,.3);
}
.tl-stop--arrival .tl-stop-marker::before{
  background:radial-gradient(circle, rgba(192,57,43,.12) 0%, transparent 70%);
}
.tl-stop--arrival .tl-stop-name{
  color:#f5e8d2;
}

/* ── Timeline responsive ─────────────────────────────────────────── */
@media(max-width:768px){
  .spice-intro-timeline{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:20px 0 0 32px;
  }
  /* Línea vertical en vez de horizontal */
  .spice-intro-timeline::before{
    top:0;
    bottom:0;
    left:59px;
    right:auto;
    width:2px;
    height:auto;
    background:linear-gradient(180deg,
      rgba(251,192,45,.12) 0%,
      rgba(251,192,45,.45) 20%,
      rgba(251,192,45,.45) 80%,
      rgba(192,57,43,.55) 100%);
  }
  .tl-stop{
    flex-direction:row;
    align-items:flex-start;
    text-align:left;
    gap:18px;
    padding:0 0 28px;
  }
  .tl-stop:last-child{ padding-bottom:0; }
  .tl-stop-marker{
    flex-shrink:0;
    margin-bottom:0;
  }
  .tl-stop-content{ max-width:none; }
}

/* ── Intro: REVEAL layout — mismo fruto, diferentes resultados ────── */
.spice-intro-reveal{
  max-width:1160px;
  margin:0 auto 2.5rem;
}
.rv-label{
  text-align:center;
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(251,192,45,.7);
  margin:0 0 2rem;
}
.rv-label em{
  font-style:italic;
  color:rgba(251,192,45,.5);
}

/* Tres variantes en fila */
.rv-variants{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  position:relative;
  padding-top:20px;
}
/* Línea conectora horizontal detrás de los dots */
.rv-variants::before{
  content:'';
  position:absolute;
  top:46px;
  left:calc(16.66% + 14px);
  right:calc(16.66% + 14px);
  height:2px;
  background:linear-gradient(90deg,
    rgba(60,60,60,.6) 0%,
    rgba(251,192,45,.35) 50%,
    rgba(90,122,58,.5) 100%);
  z-index:0;
}
/* Dos variantes — grid 2 columnas, más ancho, línea centrada */
.rv-variants--two{
  grid-template-columns:repeat(2,1fr);
  max-width:780px;
  margin:0 auto;
}
.rv-variants--two::before{
  left:calc(25% + 14px);
  right:calc(25% + 14px);
}

.rv-variant{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:1;
}

/* Punto grande de color */
.rv-dot{
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.35);
  position:relative;
}
.rv-dot::after{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  pointer-events:none;
}
.rv-dot-icon{
  font-size:1.3rem;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.3));
}

.rv-name{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:1.1rem;
  font-weight:700;
  color:#f5e8d2;
  margin-bottom:10px;
}
.rv-process{
  color:rgba(245,232,210,.68);
  font-size:.84rem;
  line-height:1.72;
  margin:0;
  max-width:280px;
}
.rv-process strong{
  color:rgba(251,192,45,.9);
  font-weight:600;
}

/* Impostor — la pimienta rosa */
.rv-impostor{
  margin-top:2.5rem;
  background:linear-gradient(135deg, rgba(120,40,40,.2) 0%, rgba(26,16,8,.6) 100%);
  border:1px solid rgba(180,60,60,.25);
  border-radius:16px;
  padding:28px 32px;
  position:relative;
  overflow:hidden;
}
.rv-impostor::before{
  content:'';
  position:absolute;
  right:-40px;
  top:50%;
  transform:translateY(-50%);
  width:200px;
  height:200px;
  background:rgba(180,60,60,.08);
  border-radius:50%;
  filter:blur(40px);
  pointer-events:none;
}
.rv-impostor-badge{
  display:inline-block;
  background:rgba(192,57,43,.8);
  color:#fff;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.15em;
  padding:4px 12px;
  border-radius:4px;
  margin-bottom:16px;
}
.rv-impostor-body{
  display:flex;
  gap:18px;
  align-items:flex-start;
  position:relative;
  z-index:1;
}
.rv-impostor-icon{
  font-size:2rem;
  flex-shrink:0;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.rv-impostor-content strong{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  font-weight:700;
  color:#f5e8d2;
  margin-bottom:6px;
}
.rv-impostor-content p{
  color:rgba(245,232,210,.72);
  font-size:.86rem;
  line-height:1.72;
  margin:0;
}
.rv-impostor-content p em{
  color:rgba(251,192,45,.7);
  font-style:italic;
}
.rv-impostor-content p strong{
  display:inline;
  font-family:inherit;
  font-size:inherit;
  color:rgba(245,232,210,.95);
}

/* ── Intro: DUALITY layout — contraste fresco vs seco ────────────── */
.spice-intro-duality{
  max-width:900px;
  margin:0 auto 2.5rem;
}
.du-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-bottom:2rem;
}
.du-header-label{
  font-family:'Playfair Display',serif;
  font-size:1.15rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.du-header-fresh{ color:rgba(120,180,90,.85); }
.du-header-dry{ color:rgba(251,192,45,.85); }
.du-header-vs{
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(245,232,210,.35);
}
.du-rows{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.du-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:stretch;
}
.du-cell{
  background:rgba(255,255,255,.04);
  border-radius:10px;
  padding:22px 24px;
  transition:background .2s;
}
.du-cell:hover{ background:rgba(255,255,255,.07); }
.du-fresh{
  border-left:3px solid rgba(120,180,90,.4);
}
.du-dry{
  border-left:3px solid rgba(251,192,45,.4);
}
.du-icon{
  display:block;
  font-size:1.2rem;
  margin-bottom:8px;
}
.du-cell p{
  color:rgba(245,232,210,.78);
  font-size:.92rem;
  line-height:1.7;
  margin:0;
}
.du-cell p strong{ color:#f5e8d2; }
.du-label{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(245,232,210,.3);
  writing-mode:vertical-lr;
  text-orientation:mixed;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
}
/* Spotlight — bloque destacado Argentina */
.du-spotlight{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin-top:2.5rem;
  padding:24px 28px;
  background:rgba(251,192,45,.06);
  border:1px solid rgba(251,192,45,.15);
  border-radius:12px;
}
.du-spotlight-flag{ font-size:2rem; flex-shrink:0; }
.du-spotlight-body strong{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:1.1rem;
  color:#f5e8d2;
  margin-bottom:6px;
}
.du-spotlight-body p{
  color:rgba(245,232,210,.78);
  font-size:.92rem;
  line-height:1.7;
  margin:0;
}
.du-spotlight-body p strong{ color:#f5e8d2; display:inline; font-family:inherit; font-size:inherit; }
.du-spotlight-body p em{ color:rgba(251,192,45,.7); font-style:italic; }

/* ── Duality responsive ──────────────────────────────────────────── */
@media(max-width:768px){
  .du-row{
    grid-template-columns:1fr;
    gap:8px;
  }
  .du-label{
    writing-mode:horizontal-tb;
    text-align:center;
    min-width:auto;
    padding:4px 0;
  }
  .du-spotlight{ flex-direction:column; text-align:center; }
}

/* ── Two-lives layout: split crudo / transformada (e.g. Albahaca) ──── */
.spice-intro-twolives{
  max-width:1160px;
  margin:2rem auto 0;
}
.tl2-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:stretch;
}
.tl2-column{
  border-radius:18px;
  padding:28px 26px 26px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.tl2-column--crudo{
  background:linear-gradient(160deg, rgba(120,180,90,.12) 0%, rgba(30,26,22,.6) 55%);
  border:1px solid rgba(120,180,90,.22);
}
.tl2-column--transformada{
  background:linear-gradient(160deg, rgba(251,192,45,.10) 0%, rgba(30,26,22,.6) 55%);
  border:1px solid rgba(251,192,45,.20);
}
.tl2-col-header{
  display:flex;
  align-items:center;
  gap:10px;
}
.tl2-col-icon{ font-size:1.5rem; }
.tl2-col-label{
  font-family:'Playfair Display',serif;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.tl2-column--crudo .tl2-col-label{ color:rgba(120,180,90,.9); }
.tl2-column--transformada .tl2-col-label{ color:rgba(251,192,45,.9); }
.tl2-col-desc{
  color:rgba(245,232,210,.6);
  font-size:.85rem;
  line-height:1.6;
  margin:0;
  font-style:italic;
}
.tl2-cards{
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
}
.tl2-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:22px 22px 20px;
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.tl2-card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.07);
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.tl2-card-flag{
  font-size:1.8rem;
  display:block;
  margin-bottom:8px;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));
}
.tl2-card-name{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  color:#f5e8d2;
  margin-bottom:6px;
}
.tl2-card-text{
  color:rgba(245,232,210,.75);
  font-size:.88rem;
  line-height:1.72;
  margin:0;
}
.tl2-card-text strong{
  display:inline;
  font-family:inherit;
  font-size:inherit;
  color:rgba(251,192,45,.95);
  font-weight:600;
}
/* Bridge — bloque full-width Argentina que une las dos vidas */
.tl2-bridge{
  display:flex;
  align-items:flex-start;
  gap:22px;
  margin-top:24px;
  padding:28px 32px;
  background:linear-gradient(135deg, rgba(120,180,90,.08) 0%, rgba(251,192,45,.08) 50%, rgba(185,35,35,.12) 100%);
  border:1px solid rgba(251,192,45,.18);
  border-radius:16px;
  position:relative;
  overflow:hidden;
}
.tl2-bridge::before{
  content:'';
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:100%;
  height:3px;
  background:linear-gradient(90deg, rgba(120,180,90,.5), rgba(251,192,45,.5), rgba(185,35,35,.5));
}
.tl2-bridge-flag{
  font-size:2.8rem;
  flex-shrink:0;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.tl2-bridge-body strong{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:1.12rem;
  color:#f5e8d2;
  margin-bottom:8px;
}
.tl2-bridge-body p{
  color:rgba(245,232,210,.82);
  font-size:.94rem;
  line-height:1.78;
  margin:0;
}
.tl2-bridge-body p strong{
  display:inline;
  font-family:inherit;
  font-size:inherit;
  color:rgba(251,192,45,.95);
  font-weight:600;
}
/* Two-lives responsive */
@media(max-width:768px){
  .tl2-columns{
    grid-template-columns:1fr;
  }
  .tl2-bridge{
    flex-direction:column;
    text-align:center;
    gap:14px;
  }
}

/* ── Blend anatomy layout ─────────────────────────────────────────── */
.spice-intro-blend{
  margin-top:2.5rem;
  text-align:center;
}
/* ·· core label ·· */
.bl-core-label,
.bl-extras-label{
  font-family:'Playfair Display',serif;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(251,192,45,.85);
  margin:0 0 1rem;
}
/* ·· core row ·· */
.bl-core{
  display:flex;
  align-items:stretch;
  justify-content:center;
  flex-wrap:wrap;
  gap:.5rem 0;
}
.bl-core-card{
  flex:1;
  max-width:240px;
  min-width:160px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:2.2rem 1.6rem 1.8rem;
  text-align:center;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bl-core-card:hover{
  transform:translateY(-5px);
  border-color:rgba(251,192,45,.35);
  box-shadow:0 8px 32px rgba(251,192,45,.08);
}
.bl-core-icon{
  font-size:2.8rem;
  display:block;
  margin-bottom:.8rem;
}
.bl-core-name{
  font-family:'Playfair Display',serif;
  font-size:1.25rem;
  color:#fff;
  display:block;
  margin-bottom:.5rem;
}
.bl-core-role{
  font-size:.95rem;
  color:rgba(255,255,255,.7);
  line-height:1.55;
  margin:0;
}
/* ·· plus connector ·· */
.bl-plus{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Playfair Display',serif;
  font-size:1.5rem;
  font-weight:700;
  color:rgba(251,192,45,.7);
  padding:0 .8rem;
  flex-shrink:0;
}
/* ·· extras section ·· */
.bl-extras-label{
  margin-top:2.2rem;
  color:rgba(255,255,255,.45);
  font-size:.7rem;
}
.bl-extras{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.65rem;
  margin-top:.75rem;
}
.bl-extra-card{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  padding:.9rem 1.1rem;
  text-align:center;
  min-width:115px;
  max-width:148px;
  transition:border-color .25s ease;
}
.bl-extra-card:hover{
  border-color:rgba(255,255,255,.18);
}
.bl-extra-icon{
  font-size:1.3rem;
  display:block;
  margin-bottom:.35rem;
}
.bl-extra-name{
  font-size:.82rem;
  color:rgba(255,255,255,.82);
  display:block;
  margin-bottom:.2rem;
}
.bl-extra-role{
  font-size:.78rem;
  color:rgba(255,255,255,.45);
  line-height:1.4;
  margin:0;
}
/* ·· blend responsive ·· */
@media(max-width:768px){
  .bl-core{flex-direction:column;align-items:center;}
  .bl-core-card{max-width:100%;}
  .bl-plus{padding:.6rem 0;font-size:1.4rem;}
  .bl-extras{gap:.5rem;}
  .bl-extra-card{min-width:45%;max-width:48%;}
}

/* ── Versus layout: two-column head-to-head (e.g. Casia vs Ceilán) ─── */
.spice-intro-versus{
  max-width:1060px;
  margin:2rem auto 0;
  border:1px solid rgba(251,192,45,.15);
  border-radius:14px;
  overflow:hidden;
  background:rgba(30,26,22,.5);
}
.vs-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:22px 20px;
  border-bottom:1px solid rgba(251,192,45,.15);
}
.vs-header-label{
  font-family:'Playfair Display',serif;
  font-size:1.15rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-align:center;
  flex:1;
  max-width:340px;
}
.vs-header-icon{
  display:block;
  font-size:1.6rem;
  margin-bottom:6px;
}
.vs-header-vs{
  font-size:.8rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(245,232,210,.3);
  flex-shrink:0;
}
.vs-header--casia{  color:rgba(210,140,60,.9); border-bottom:3px solid rgba(210,140,60,.4); padding-bottom:8px; }
.vs-header--ceilan{ color:rgba(120,180,90,.9); border-bottom:3px solid rgba(120,180,90,.4); padding-bottom:8px; }

.vs-rows{
  display:flex;
  flex-direction:column;
}
.vs-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:0;
  border-bottom:1px solid rgba(251,192,45,.08);
}
.vs-row:last-child{ border-bottom:none; }

.vs-cell{
  padding:20px 26px;
  font-size:.93rem;
  line-height:1.65;
  color:rgba(245,232,210,.82);
}
.vs-cell strong{ color:#f5e8d2; }
.vs-cell--left{  border-right:1px solid rgba(251,192,45,.05); }
.vs-cell--right{ border-left:1px solid rgba(251,192,45,.05); }

.vs-label{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(245,232,210,.35);
  writing-mode:vertical-lr;
  text-orientation:mixed;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  padding:8px 4px;
  border-left:1px solid rgba(251,192,45,.05);
  border-right:1px solid rgba(251,192,45,.05);
}

/* Verdict block (below versus table) */
.vs-verdict{
  margin:2rem auto 0;
  max-width:960px;
  display:flex;
  align-items:flex-start;
  gap:20px;
  padding:28px 32px;
  border:1px solid rgba(251,192,45,.2);
  border-radius:12px;
  background:rgba(251,192,45,.04);
}
.vs-verdict-icon{ font-size:1.8rem; flex-shrink:0; margin-top:2px; }
.vs-verdict-body{ flex:1; }
.vs-verdict-body strong{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  color:#f5e8d2;
  margin-bottom:8px;
}
.vs-verdict-body p{
  font-size:.9rem;
  line-height:1.7;
  color:rgba(245,232,210,.72);
  margin:0;
}
.vs-verdict-body p strong{ display:inline; font-family:inherit; font-size:inherit; color:#f5e8d2; }

/* ── Versus responsive ─────────────────────────────────────────── */
@media(max-width:768px){
  .vs-row{
    grid-template-columns:1fr;
    gap:0;
  }
  .vs-label{
    writing-mode:horizontal-tb;
    text-align:center;
    min-width:auto;
    padding:8px 16px 4px;
    border-left:none;
    border-right:none;
    border-bottom:1px solid rgba(251,192,45,.05);
  }
  .vs-cell--left{ border-right:none; border-bottom:1px solid rgba(251,192,45,.05); }
  .vs-cell--right{ border-left:none; }
  .vs-header{ flex-direction:column; gap:8px; padding:16px; }
  .vs-header-label{ max-width:none; }
  .vs-verdict{ flex-direction:column; text-align:center; }
}

/* ── Triad layout: three-column comparison (e.g. fresco/polvo/granulado) */
.spice-intro-triad{
  max-width:1160px;
  margin:2rem auto 0;
  border:1px solid rgba(251,192,45,.15);
  border-radius:14px;
  overflow:hidden;
  background:rgba(30,26,22,.5);
}
.tr-header{
  display:grid;
  grid-template-columns:140px 1fr 1fr 1fr;
  gap:0;
  border-bottom:1px solid rgba(251,192,45,.15);
}
.tr-header-spacer{ padding:18px 20px; }
.tr-header-label{
  padding:18px 20px;
  text-align:center;
  font-family:'Playfair Display',serif;
  font-size:1rem;
  letter-spacing:.5px;
}
.tr-header-icon{
  display:block;
  font-size:1.5rem;
  margin-bottom:4px;
}
.tr-header-fresh{ color:rgba(120,180,90,.9); border-bottom:3px solid rgba(120,180,90,.4); }
.tr-header-polvo{ color:rgba(251,192,45,.9); border-bottom:3px solid rgba(251,192,45,.4); }
.tr-header-gran{  color:rgba(210,140,60,.9);  border-bottom:3px solid rgba(210,140,60,.4); }

.tr-row{
  display:grid;
  grid-template-columns:140px 1fr 1fr 1fr;
  gap:0;
  border-bottom:1px solid rgba(251,192,45,.08);
}
.tr-row:last-child{ border-bottom:none; }

.tr-label{
  padding:20px 24px;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:rgba(245,232,210,.5);
  display:flex;
  align-items:center;
  border-right:1px solid rgba(251,192,45,.08);
}
.tr-cell{
  padding:20px 24px;
  font-size:.93rem;
  line-height:1.6;
  color:rgba(245,232,210,.82);
  border-right:1px solid rgba(251,192,45,.05);
}
.tr-cell:last-child{ border-right:none; }
.tr-cell-icon{
  display:block;
  font-size:1.1rem;
  margin-bottom:4px;
}

/* Quality insight block (below triad) */
.tr-quality{
  margin:2rem auto 0;
  max-width:960px;
  display:flex;
  align-items:flex-start;
  gap:20px;
  padding:28px 32px;
  border:1px solid rgba(251,192,45,.2);
  border-radius:12px;
  background:rgba(251,192,45,.04);
}
.tr-quality-icon{ font-size:1.8rem; flex-shrink:0; margin-top:2px; }
.tr-quality-body{ flex:1; }
.tr-quality-body strong{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  color:#f5e8d2;
  margin-bottom:8px;
}
.tr-quality-body p{
  font-size:.9rem;
  line-height:1.7;
  color:rgba(245,232,210,.72);
  margin:0;
}

/* ── Triad responsive ──────────────────────────────────────────── */
@media(max-width:768px){
  .tr-header,
  .tr-row{
    grid-template-columns:1fr;
    gap:0;
  }
  .tr-header-spacer{ display:none; }
  .tr-header{
    display:flex;
    justify-content:center;
    gap:8px;
    padding:10px;
  }
  .tr-header-label{
    flex:1;
    padding:10px 6px;
    border-radius:8px;
    border-bottom:none;
  }
  .tr-header-fresh{ background:rgba(120,180,90,.08); }
  .tr-header-polvo{ background:rgba(251,192,45,.08); }
  .tr-header-gran{  background:rgba(210,140,60,.08); }

  .tr-label{
    border-right:none;
    border-bottom:1px solid rgba(251,192,45,.08);
    padding:10px 16px 4px;
    font-size:.75rem;
  }
  .tr-row{
    padding:0 12px;
  }
  .tr-cell{
    border-right:none;
    padding:6px 16px 12px;
    display:flex;
    align-items:baseline;
    gap:6px;
  }
  .tr-cell::before{
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:1px;
    color:rgba(245,232,210,.4);
    flex-shrink:0;
    min-width:70px;
  }
  .tr-cell:nth-child(2)::before{ content:'Fresco'; color:rgba(120,180,90,.6); }
  .tr-cell:nth-child(3)::before{ content:'Polvo'; color:rgba(251,192,45,.6); }
  .tr-cell:nth-child(4)::before{ content:'Gran.'; color:rgba(210,140,60,.6); }
  .tr-quality{ flex-direction:column; text-align:center; }
}

/* ── Reveal responsive ───────────────────────────────────────────── */
@media(max-width:768px){
  .rv-variants{
    grid-template-columns:1fr;
    gap:24px;
    padding-top:0;
  }
  .rv-variants::before{ display:none; }
  .rv-variant{
    flex-direction:row;
    text-align:left;
    gap:16px;
  }
  .rv-dot{ flex-shrink:0; margin-bottom:0; }
  .rv-process{ max-width:none; }
  .rv-impostor-body{ flex-direction:column; }
}

@media(max-width:768px){
  .spice-intro-details{ grid-template-columns:1fr; }
  .spice-intro-title{ font-size:1.9rem; }
  .spice-intro-countries{ grid-template-columns:1fr !important; }
  .spice-intro-argentina{ flex-direction:column; text-align:center; }
}

/* ── FAQ section ───────────────────────────────────────────────────── */
.spice-faq-section{
  padding:64px 0;
  background:var(--bg-alt,#f8f5f0);
}
.spice-faq .spice-section-eyebrow{
  text-align:center;
  margin-bottom:.5rem;
}
.spice-faq h3{
  font-family:'Playfair Display',serif;
  font-size:1.7rem;
  font-weight:700;
  text-align:center;
  margin:0 0 2rem;
}
.spice-faq-list{
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.spice-faq-item{
  background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.06);
  border-radius:10px;
  overflow:hidden;
  transition:background .2s;
}
.spice-faq-item[open]{
  background:rgba(0,0,0,.05);
}
.spice-faq-item summary{
  padding:16px 20px;
  font-weight:600;
  font-size:.95rem;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
}
.spice-faq-item summary::before{
  content:'+';
  font-size:1.2rem;
  font-weight:700;
  color:var(--brand-red,#c0392b);
  flex-shrink:0;
  width:20px;
  text-align:center;
  transition:transform .2s;
}
.spice-faq-item[open] summary::before{
  content:'−';
}
.spice-faq-item summary::-webkit-details-marker{ display:none; }
.spice-faq-item p{
  padding:0 20px 18px 50px;
  margin:0;
  font-size:.9rem;
  line-height:1.75;
  color:rgba(0,0,0,.7);
}
.spice-faq-item p strong{ color:rgba(0,0,0,.85); }
.spice-faq-item p em{ color:var(--brand-red,#c0392b); font-style:normal; }

/* =====================================================================
   TYPES WORLD LAYOUT (Ají molido — El Ají en el Mundo)
   3 cards mundo + callout Texas + Argentina full-width
   ===================================================================== */
.spice-types-world-section{
  background:#f5ede0;
  border-top:4px solid #1a1008;   /* línea que cierra el bloque oscuro del intro */
}
.spice-types-world{
  padding:72px 24px 64px;
  max-width:1400px;
  margin:0 auto;
}
.spice-types-world-header{
  text-align:center;
  margin-bottom:40px;
}
.spice-types-world-header .spice-types-eyebrow{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:700;
  color:var(--brand-red);
  margin-bottom:.5rem;
}
.spice-types-world-header h3{
  font-family:'Playfair Display',serif;
  font-size:1.9rem;
  font-weight:700;
  color:#2c1810;
  margin:0 0 .6rem;
}
.spice-types-world-header p{
  font-size:.92rem;
  color:#5a4638;
  max-width:640px;
  margin:0 auto;
  line-height:1.65;
}

/* 3 cards del mundo — horizontal */
.spice-types-world-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:20px;
}
.spice-type-world-card{
  background:#2c1810;
  border-radius:14px;
  padding:22px 20px 24px;
  position:relative;
  overflow:hidden;
  border-top:3px solid var(--brand-red);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.spice-type-world-card-header{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.spice-type-world-card-flag{
  font-size:1.8rem;
  line-height:1;
  flex-shrink:0;
  margin-top:2px;
}
.spice-type-world-card h4{
  font-family:'Playfair Display',serif;
  font-size:1rem;
  font-weight:700;
  color:#f5e8d2;
  margin:0 0 3px;
  line-height:1.25;
}
.spice-type-world-card-subtitle{
  font-size:.75rem;
  color:rgba(245,232,210,.5);
  margin:0;
  font-style:italic;
  line-height:1.3;
}
.spice-type-world-card p{
  font-size:.82rem;
  line-height:1.65;
  color:rgba(245,232,210,.7);
  margin:0;
}
.spice-type-world-card p strong{ color:#f5e8d2; }

/* Pepper bullet list — inside world cards */
.pepper-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pepper-item{
  padding:10px 12px;
  background:rgba(0,0,0,.25);
  border-radius:8px;
  border-left:2px solid var(--brand-red);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.pepper-item-top{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.pepper-name{
  font-weight:700;
  color:#f5e8d2;
  font-size:.85rem;
  font-family:'Playfair Display',serif;
}
.pepper-shu{
  font-size:.7rem;
  color:var(--brand-gold,#FBC02D);
  background:rgba(251,192,45,.12);
  border:1px solid rgba(251,192,45,.3);
  border-radius:20px;
  padding:1px 7px;
  white-space:nowrap;
  font-weight:600;
  letter-spacing:.01em;
}
.pepper-detail{
  font-size:.78rem;
  color:rgba(245,232,210,.65);
  line-height:1.4;
}
.pepper-use{
  font-size:.75rem;
  color:rgba(251,192,45,.8);
  font-style:italic;
}

/* Callout Texas — curiosidad con "?" */
.spice-types-curiosity{
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:rgba(251,192,45,.07);
  border:1px solid rgba(251,192,45,.2);
  border-radius:12px;
  padding:18px 22px;
  margin-bottom:20px;
}
.spice-types-curiosity-icon{
  width:32px;
  height:32px;
  border-radius:50%;
  background:#FBC02D;
  color:#1a1008;
  font-size:.95rem;
  font-weight:800;
  font-family:'Playfair Display',serif;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:2px;
}
.spice-types-curiosity-text{
  font-size:.88rem;
  line-height:1.65;
  color:#3d2e1e;
}
.spice-types-curiosity-text strong{
  display:block;
  color:#2c1810;
  margin-bottom:4px;
  font-size:.92rem;
}

/* Card Argentina — full width, destacada */
.spice-type-argentina{
  background:linear-gradient(135deg, #1a1008 0%, #2c1810 100%);
  border-radius:14px;
  padding:28px 32px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:24px;
  align-items:flex-start;
  border-top:3px solid;
  border-image:linear-gradient(90deg,#D32F2F,#FBC02D) 1;
  position:relative;
  overflow:hidden;
}
.spice-type-argentina::after{
  content:'';
  position:absolute;
  top:-60px; right:-60px;
  width:220px; height:220px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(211,47,47,.08) 0%,transparent 70%);
  pointer-events:none;
}
.spice-type-argentina-flag{
  font-size:2.4rem;
  line-height:1;
  padding-top:4px;
}
.spice-type-argentina-body h4{
  font-family:'Playfair Display',serif;
  font-size:1.2rem;
  font-weight:700;
  color:#f5e8d2;
  margin:0 0 10px;
}
.spice-type-argentina-body p{
  font-size:.9rem;
  line-height:1.7;
  color:rgba(245,232,210,.78);
  margin:0;
}
.spice-type-argentina-body p strong{ color:#f5e8d2; }

@media(max-width:768px){
  .spice-types-world-grid{ grid-template-columns:1fr; }
  .spice-type-argentina{ grid-template-columns:1fr; }
}

/* =====================================================================
   HERB MAP — cuadro comparativo entre hierbas
   ===================================================================== */
.hm-section{
  padding:60px 0 56px;
  background:linear-gradient(180deg, rgba(26,16,8,.92) 0%, rgba(44,24,16,.88) 100%);
  position:relative;
  overflow:hidden;
}
.hm-section::before{
  content:'';
  position:absolute;inset:0;
  background:url('../images/fotos/map.jpg') center/cover no-repeat;
  opacity:.04;
  pointer-events:none;
}
.hm-container{
  max-width:1100px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
  text-align:center;
}
.hm-section .spice-section-eyebrow{
  color:#FBC02D;
  letter-spacing:.18em;
  font-size:.7rem;
  margin-bottom:8px;
}
.hm-section h3{
  font-family:'Playfair Display',serif;
  font-size:1.6rem;
  color:#f5e8d2;
  margin:0 0 6px;
}
.hm-subtitle{
  color:rgba(245,232,210,.55);
  font-size:.88rem;
  margin:0 0 32px;
}
/* ── Table ── */
.hm-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 -12px;
  padding:0 12px;
}
.hm-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  text-align:left;
  table-layout:fixed;
}
/* corner cell */
.hm-corner{
  width:130px;
  background:transparent;
}
/* ── Header columns ── */
.hm-col{
  padding:18px 14px 14px;
  background:rgba(245,232,210,.04);
  border-bottom:2px solid rgba(245,232,210,.08);
  vertical-align:bottom;
}
.hm-col--active{
  background:rgba(251,192,45,.08);
  border-bottom-color:rgba(251,192,45,.35);
  position:relative;
}
.hm-col-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.hm-herb-img{
  width:56px;
  height:56px;
  object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.hm-herb-name{
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  color:#f5e8d2;
  font-weight:600;
}
.hm-herb-badge{
  font-size:.65rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(245,232,210,.45);
  background:rgba(245,232,210,.06);
  padding:2px 10px;
  border-radius:20px;
}
.hm-col--active .hm-herb-badge{
  color:#FBC02D;
  background:rgba(251,192,45,.12);
}
.hm-badge-active{
  font-size:.6rem;
  letter-spacing:.15em;
  color:#1a1008;
  background:#FBC02D;
  padding:3px 10px;
  border-radius:20px;
  font-weight:700;
}
.hm-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-decoration:none;
  transition:opacity .2s;
}
.hm-link:hover{
  opacity:.8;
}
.hm-link:hover .hm-herb-name{
  color:#FBC02D;
}
/* ── Body rows ── */
.hm-dim{
  padding:12px 14px 12px 0;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(245,232,210,.4);
  font-weight:600;
  vertical-align:top;
  white-space:nowrap;
  border-bottom:1px solid rgba(245,232,210,.06);
}
.hm-cell{
  padding:12px 14px;
  font-size:.84rem;
  line-height:1.55;
  color:rgba(245,232,210,.7);
  border-bottom:1px solid rgba(245,232,210,.06);
  vertical-align:top;
}
.hm-cell--active{
  color:#f5e8d2;
  background:rgba(251,192,45,.04);
}
/* last row no border */
.hm-table tbody tr:last-child .hm-dim,
.hm-table tbody tr:last-child .hm-cell{
  border-bottom:none;
}
/* "regla rápida" row emphasis */
.hm-table tbody tr:last-child .hm-cell{
  font-weight:600;
  font-style:italic;
  color:rgba(245,232,210,.55);
}
.hm-table tbody tr:last-child .hm-cell--active{
  color:#FBC02D;
}

/* ── Mobile ── */
@media(max-width:768px){
  .hm-section{padding:44px 0 40px;}
  .hm-section h3{font-size:1.3rem;}
  .hm-corner{width:90px;}
  .hm-table{min-width:640px;}
  .hm-herb-img{width:44px;height:44px;}
  .hm-herb-name{font-size:.92rem;}
  .hm-dim{font-size:.62rem;padding:10px 10px 10px 0;}
  .hm-cell{font-size:.78rem;padding:10px;}
}

/* =====================================================================
   PURPOSE COLUMNS LAYOUT (whatItDoes + whenToUse a la par)
   ===================================================================== */
.spice-purpose-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:flex-start;
  max-width:1400px;
}
@media(max-width:768px){
  .spice-purpose-columns{ grid-template-columns:1fr; }
}

/* CTA editorial — cierre de sección sin emoji */
.spice-cta-line{
  margin-top:1.2rem;
  padding-top:1rem;
  border-top:1px solid rgba(44,24,16,.12);
  font-size:.92rem;
  color:#5a4638;
  font-style:italic;
}
.spice-cta-line strong{
  font-weight:600;
  color:#2c1810;
}

/* =====================================================================
   SPICE PAGE — 7-ACT NARRATIVE LAYOUT
   Visual rhythm: DARK hero → WARM purpose → CLEAN types →
                  DARK origin → WARM recipes → LIGHT mastery → WARM close
   ===================================================================== */

/* ── Shared eyebrow ──────────────────────────────────────────────── */
.spice-section-eyebrow{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--brand-red);
  font-weight:800;
  margin:0 0 .35rem;
}

/* ── Section divider line ────────────────────────────────────────── */
.spice-divider{
  width:48px;
  height:2px;
  background:var(--brand-red);
  border:none;
  margin:0 0 1.2rem;
  opacity:.6;
}

/* =====================================================================
   ACTO 1 — HERO (Identidad)
   Oscuro, cinematográfico, inmersivo
   ===================================================================== */
.spice-hero{
  position:relative;
  overflow:hidden;
  /* calc(100vh - 100px): descuenta el header sticky (80px logo + 20px padding)
     para que el hero quepa exactamente en el viewport visible y el scroll
     indicator "Descubrí más" quede dentro del fold */
  min-height:calc(100vh - 100px);
}
.spice-hero .hero-inner{
  min-height:calc(100vh - 100px);
  align-content:center;
  padding-top:80px;
  padding-bottom:120px;
}
.spice-hero .hero-bg{
  object-position:center center;
}
/* Stronger left gradient for text readability */
.spice-hero::before{
  background:linear-gradient(
    100deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.58) 28%,
    rgba(0,0,0,.30) 52%,
    rgba(0,0,0,.08) 72%,
    rgba(0,0,0,0) 100%
  );
}
/* Bottom fade */
.spice-hero::after{
  background:linear-gradient(180deg,
    transparent 60%,
    rgba(26,16,8,.6) 100%
  );
}

/* Scroll indicator */
.spice-hero-scroll{
  position:absolute;
  bottom:64px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  opacity:.75;
  transition:opacity .3s;
  cursor:pointer;
}
.spice-hero-scroll:hover{opacity:1;}
.spice-hero-scroll span{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(245,232,210,.8);
  font-weight:600;
}
.spice-hero-scroll-arrow{
  width:20px;
  height:20px;
  border-right:2px solid rgba(245,232,210,.7);
  border-bottom:2px solid rgba(245,232,210,.7);
  transform:rotate(45deg);
  animation:scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce{
  0%,100%{transform:rotate(45deg) translateY(0);}
  50%{transform:rotate(45deg) translateY(6px);}
}

.spice-hero .chips{margin-top:.7rem;}
.spice-hero .chip{
  background:rgba(251,192,45,.1);
  border:1px solid rgba(251,192,45,.45);
  color:#f9fafb;
  backdrop-filter:blur(4px);
  padding:5px 14px;
  font-size:.78rem;
}

/* Breadcrumb */
.spice-breadcrumb{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:.8rem;
  margin-bottom:.8rem;
}
.spice-breadcrumb a{
  color:rgba(251,192,45,.75);
  text-decoration:none;
  transition:color .2s;
  font-weight:500;
}
.spice-breadcrumb a:hover{ color:var(--brand-yellow); }
.spice-breadcrumb-sep{ color:rgba(255,255,255,.3); font-size:.7rem; }
.spice-breadcrumb span:last-child{
  color:rgba(255,255,255,.5);
}

/* Tagline */
.spice-hero-tagline{
  font-size:1.15rem;
  line-height:1.6;
  margin-top:.65rem;
  max-width:34rem;
  font-style:italic;
  opacity:.92;
}

/* =====================================================================
   ACTO 2 — PROPÓSITO
   CÁLIDO PREMIUM — fondo cálido que respira después del hero oscuro
   ===================================================================== */
.spice-purpose-section{
  padding:72px 0 36px;
  position:relative;
  background:rgba(210,190,160,.35);
  box-shadow:inset 0 1px 0 rgba(44,24,16,.06);
  overflow:hidden;
}

.spice-purpose{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:48px;
  margin-top:0;
  align-items:flex-start;
  max-width:1400px;
}

/* Main editorial column */
.spice-main{max-width:none;}
.spice-main section{margin-bottom:2.4rem;}
.spice-main h3{
  margin:.2rem 0 .8rem;
  font-size:1.45rem;
  font-family:'Playfair Display',serif;
  position:relative;
  padding-bottom:.6rem;
  color:#2c1810;
  font-weight:700;
  letter-spacing:.01em;
}
/* Warm accent underline */
.spice-main h3::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:48px;
  height:2.5px;
  background:linear-gradient(90deg, var(--brand-red), var(--brand-yellow));
  border-radius:2px;
}
.spice-main ul{
  padding-left:0;
  margin:.8rem 0 .5rem;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0;
}
.spice-main ul li{
  padding:.85rem 1rem .85rem 1.4rem;
  position:relative;
  background:transparent;
  border:none;
  border-radius:0;
  border-left:3px solid var(--brand-red);
  border-bottom:1px solid rgba(44,24,16,.07);
  font-size:.92rem;
  line-height:1.65;
  color:#3d2e1e;
  box-shadow:none;
  transition:border-color .2s, background .2s, padding-left .2s;
}
.spice-main ul li:first-child{
  border-top:1px solid rgba(44,24,16,.07);
}
.spice-main ul li:hover{
  background:rgba(211,47,47,.04);
  border-left-color:var(--brand-yellow);
  padding-left:1.7rem;
}
.spice-main ul li::before{
  display:none;
}
.spice-main p{
  line-height:1.75;
  font-size:.95rem;
  color:#3d2e1e;
}
.spice-main strong{color:#2c1810;}
.spice-main em{color:var(--brand-red); font-style:normal;}

/* Sidebar: quick use card */
.spice-sidebar{
  position:static;
}
.spice-quickuse{
  border-radius:16px;
  border:none;
  padding:28px 24px 30px;
  background:#2c1810;
  box-shadow:0 12px 36px rgba(44,24,16,.28), 0 2px 8px rgba(44,24,16,.15);
  position:relative;
  overflow:hidden;
}
/* Gradiente rojo→dorado arriba — mismo patrón que pairing cards */
.spice-quickuse::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, var(--brand-red), var(--brand-yellow));
}
/* Glow sutil en el fondo */
.spice-quickuse::after{
  content:'';
  position:absolute;
  top:-40px;
  right:-40px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(251,192,45,.07) 0%, transparent 70%);
  pointer-events:none;
}
.spice-quickuse-title{
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 1rem;
  font-family:'Playfair Display',serif;
  color:#f5e8d2;
}
.spice-quickuse-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  font-size:.88rem;
  line-height:1.6;
  counter-reset:quickuse;
}
.spice-quickuse-list li{
  background:rgba(255,255,255,.05);
  border:none;
  border-radius:10px;
  padding:.7rem 1rem .7rem 2.6rem;
  position:relative;
  counter-increment:quickuse;
  transition:background .18s, padding-left .18s;
  color:rgba(245,232,210,.85);
  border-left:2px solid rgba(251,192,45,.2);
}
.spice-quickuse-list li:hover{
  background:rgba(255,255,255,.09);
  padding-left:2.9rem;
  border-left-color:rgba(251,192,45,.6);
}
.spice-quickuse-list li strong{color:#f5e8d2;}
/* Numbered circle — dorado sobre oscuro */
.spice-quickuse-list li::before{
  content:counter(quickuse);
  position:absolute;
  left:.7rem;
  top:.72rem;
  width:1.4rem;
  height:1.4rem;
  border-radius:50%;
  background:rgba(251,192,45,.18);
  border:1px solid rgba(251,192,45,.4);
  color:rgba(251,192,45,.9);
  font-size:.68rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Sidebar: recipe preview card */
.sidebar-recipe-card{
  border-radius:16px;
  overflow:hidden;
  background:rgba(44,24,16,.22);
  box-shadow:0 8px 28px rgba(44,24,16,.18);
  margin-bottom:20px;
  transition:transform .2s, box-shadow .2s;
}
.sidebar-recipe-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 36px rgba(44,24,16,.26);
}
.sidebar-recipe-img-wrap{
  position:relative;
  height:180px;
  overflow:hidden;
}
.sidebar-recipe-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s;
}
.sidebar-recipe-card:hover .sidebar-recipe-img{
  transform:scale(1.05);
}
.sidebar-recipe-badge{
  position:absolute;
  top:12px;
  left:12px;
  background:var(--brand-red);
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:4px 10px;
  border-radius:6px;
}
.sidebar-recipe-body{
  padding:18px 20px 20px;
}
.sidebar-recipe-title{
  font-family:'Playfair Display',serif;
  font-size:1.1rem;
  font-weight:700;
  color:#f5e8d2;
  margin:0 0 6px;
  line-height:1.3;
}
.sidebar-recipe-sub{
  font-size:.82rem;
  line-height:1.5;
  color:rgba(245,232,210,.75);
  margin:0 0 12px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.sidebar-recipe-meta{
  display:flex;
  gap:12px;
  font-size:.78rem;
  color:rgba(245,232,210,.55);
  margin-bottom:8px;
}
.sidebar-recipe-ing{
  font-size:.78rem;
  color:rgba(245,232,210,.55);
  margin:0 0 12px;
}
.sidebar-recipe-cta{
  font-size:.85rem;
  font-weight:700;
  color:var(--brand-red);
  transition:color .2s;
}
.sidebar-recipe-card:hover .sidebar-recipe-cta{
  color:#a01e1e;
}

/* Sidebar: flavor profile card */
.sidebar-flavor-card{
  background:rgba(44,24,16,.22);
  border-radius:16px;
  padding:22px 24px 24px;
  box-shadow:0 2px 16px rgba(44,24,16,.15);
  margin-bottom:20px;
}
.sidebar-flavor-title{
  font-family:'Playfair Display',serif;
  font-size:1rem;
  font-weight:700;
  color:#f5e8d2;
  margin:0 0 16px;
}
.sidebar-flavor-bars{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.flavor-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.flavor-label{
  font-size:.78rem;
  font-weight:600;
  color:rgba(245,232,210,.8);
  width:52px;
  flex-shrink:0;
}
.flavor-track{
  flex:1;
  height:8px;
  background:rgba(255,255,255,.12);
  border-radius:4px;
  overflow:hidden;
}
.flavor-fill{
  height:100%;
  border-radius:4px;
  background:linear-gradient(90deg, #FBC02D, #c62828);
  transition:width .6s ease;
}
.flavor-value{
  font-size:.72rem;
  color:rgba(251,192,45,.7);
  width:28px;
  text-align:right;
  flex-shrink:0;
}

/* Sidebar: dosage guide card */
.sidebar-dosage-card{
  background:linear-gradient(145deg, #3b2113, #2c1810);
  border-radius:16px;
  padding:22px 24px 24px;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
  margin-bottom:20px;
}
.sidebar-dosage-title{
  font-family:'Playfair Display',serif;
  font-size:1rem;
  font-weight:700;
  color:#f5e8d2;
  margin:0 0 16px;
}
.sidebar-dosage-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dosage-row{
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(245,232,210,.06);
  border-radius:10px;
  padding:10px 14px;
  transition:background .2s;
}
.dosage-row:hover{
  background:rgba(245,232,210,.1);
}
.dosage-icon{
  font-size:1.2rem;
  flex-shrink:0;
}
.dosage-info{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex:1;
  gap:8px;
}
.dosage-use{
  font-size:.82rem;
  color:rgba(245,232,210,.7);
}
.dosage-amount{
  font-size:.85rem;
  font-weight:700;
  color:#FBC02D;
  white-space:nowrap;
}

/* =====================================================================
   SPICE PAIRINGS STRIP
   Shelf cards con panel oscuro — imagen arriba, reveal cálido abajo
   ===================================================================== */
.spice-pairings-section{
  padding:36px 0 80px;
  background:rgba(200,180,150,.18);
  border-top:1px solid rgba(44,24,16,.08);
  border-bottom:1px solid rgba(44,24,16,.08);
}
.spice-pairings-container{
  max-width:1400px;
}

/* Header editorial — centrado */
.spice-pairings-header{
  text-align:center;
  margin-bottom:48px;
}
.spice-pairings-header .spice-section-eyebrow{
  color:var(--brand-red) !important;
  font-size:.82rem !important;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:700;
  margin-bottom:.6rem;
}
.spice-pairings-header h3{
  font-family:'Playfair Display',serif;
  font-size:2rem;
  font-weight:700;
  color:#2c1810;
  margin:0 0 .5rem;
  display:inline-block;
  position:relative;
}
.spice-pairings-header h3::after{
  content:'';
  display:block;
  width:48px;
  height:3px;
  background:var(--brand-red);
  margin:10px auto 0;
  border-radius:2px;
}

/* Grid de cards — fila centrada, wrap en mobile */
.spice-pairings-grid{
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

/* Card — crece para llenar el ancho, overflow hidden, borde gradiente arriba */
.pairing-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  flex:1;
  min-width:160px;
  max-width:220px;
  border-radius:14px;
  overflow:hidden;
  position:relative;
  box-shadow:0 8px 28px rgba(44,24,16,.13), 0 2px 8px rgba(44,24,16,.07);
  border-top:3px solid transparent;
  background:linear-gradient(#2c1810,#2c1810) padding-box,
             linear-gradient(90deg,var(--brand-red),#FBC02D) border-box;
  transition:transform .28s ease, box-shadow .28s ease;
}
.pairing-card:hover{
  transform:translateY(-7px);
  box-shadow:0 18px 42px rgba(44,24,16,.22), 0 4px 12px rgba(251,192,45,.15);
}

/* Zona imagen — fondo pergamino, altura fija */
.pairing-img-wrap{
  width:100%;
  height:150px;
  background:linear-gradient(160deg, rgba(245,232,210,1) 0%, rgba(235,218,192,1) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
  transition:background .25s;
}
.pairing-card:hover .pairing-img-wrap{
  background:linear-gradient(160deg, rgba(250,240,220,1) 0%, rgba(240,225,200,1) 100%);
}
.pairing-img{
  width:72%;
  height:72%;
  object-fit:contain;
  transition:transform .32s ease;
}
.pairing-card:hover .pairing-img{
  transform:scale(1.1);
}

/* Panel oscuro — nombre + nota, altura fija */
.pairing-dark-panel{
  background:#2c1810;
  padding:14px 14px 16px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  border-top:1px solid rgba(251,192,45,.2);
}
.pairing-name{
  font-family:'Playfair Display',serif;
  font-size:.92rem;
  font-weight:700;
  color:#f5e8d2;
  line-height:1.25;
}
.pairing-note{
  font-size:.75rem;
  color:rgba(251,192,45,.8);
  line-height:1.4;
  font-style:italic;
}

/* Responsive — scroll horizontal en móvil */
@media(max-width:768px){
  .spice-pairings-grid{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    padding-bottom:12px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .spice-pairings-grid::-webkit-scrollbar{ display:none; }
  .pairing-card{ flex-shrink:0; }
  .spice-pairings-header{ text-align:center; }
}

/* =====================================================================
   ACTO 3 — VARIEDADES (Types)
   Claro con cards de color — cada tipo tiene identidad visual propia
   ===================================================================== */
.spice-types{
  margin:0 auto;
  max-width:1400px;
  padding:36px 24px 36px;
  position:relative;
}
.spice-types-header{
  max-width:42rem;
  margin:0 auto 2.5rem;
  text-align:center;
}
.spice-types-eyebrow{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--brand-red);
  font-weight:700;
  margin-bottom:.5rem;
}
.spice-types-title{
  font-size:1.7rem;
  letter-spacing:.01em;
  margin:0;
  font-family:'Playfair Display',serif;
  color:#2c1810;
  font-weight:700;
}
.spice-type-grid{
  display:grid;
  gap:0;
  grid-template-columns:1fr;
  margin-top:1.5rem;
  max-width:1400px;
  margin-inline:auto;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 48px rgba(0,0,0,.18);
}
.spice-type-card{
  padding:0;
  overflow:hidden;
  background:linear-gradient(145deg, #3b2113, #2c1810);
  transition:background .3s ease;
  position:relative;
  border-bottom:1px solid rgba(245,232,210,.06);
}
.spice-type-card:last-child{border-bottom:none;}
.spice-type-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg, var(--brand-red), var(--brand-yellow));
  opacity:0;
  transition:opacity .3s;
}
.spice-type-card:hover::before{opacity:1;}
.spice-type-card-inner{
  padding:32px 36px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 24px;
  align-items:center;
}
.type-icon-wrap{
  width:56px;
  height:56px;
  border-radius:50%;
  background:transparent;
  border:1.5px solid rgba(251,192,45,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  grid-row:1 / 3;
  margin-bottom:0;
  transition:border-color .3s;
}
.spice-type-card:hover .type-icon-wrap{
  border-color:rgba(251,192,45,.6);
}
.type-icon{
  font-size:.95rem;
  line-height:1;
  font-family:'Playfair Display',serif;
  font-weight:700;
  color:rgba(251,192,45,.7);
  letter-spacing:.05em;
}
.spice-type-card h4{
  margin:0 0 .35rem;
  font-size:1.15rem;
  font-family:'Playfair Display',serif;
  font-weight:700;
  color:#f5e8d2;
  align-self:end;
}
.spice-type-card p{
  margin:0;
  font-size:.9rem;
  color:rgba(245,232,210,.6);
  line-height:1.65;
  align-self:start;
}
.spice-type-card p strong{color:rgba(251,192,45,.85);}
.spice-type-card:hover{
  background:linear-gradient(145deg, #4a2a18, #3b2113);
}

/* ── Type card highlight variant (quality callout, not a "type") ────── */
.spice-type-card--highlight{
  margin-top:20px;
  border-radius:14px;
  background:linear-gradient(145deg, #3d2f14, #33270f) !important;
  border:1px solid rgba(251,192,45,.5) !important;
  border-bottom:1px solid rgba(251,192,45,.5) !important;
}
.spice-type-card--highlight .type-icon-wrap{
  border-color:rgba(251,192,45,.7);
  background:rgba(251,192,45,.18);
}
.spice-type-card--highlight .type-icon{
  font-family:inherit;
  font-size:1.3rem;
}
.spice-type-card--highlight h4{
  color:#FBC02D;
}
.spice-type-card--highlight p{
  color:rgba(245,232,210,.92);
}
.spice-type-card--highlight p em{
  color:#FBC02D;
  font-style:normal;
}
.spice-type-card--highlight::before{ display:none; }
.spice-type-card--highlight:hover{
  background:linear-gradient(145deg, #48361a, #3d2f14) !important;
}

/* =====================================================================
   FISH TYPES — comparativa de tipos de pescado
   AZUL PROFUNDO — estética de mar, madera visible debajo
   ===================================================================== */
.spice-fish-types-section{
  margin-top:0;
  padding:72px 0 64px;
  background:
    linear-gradient(180deg,
      rgba(5,18,40,.90) 0%,
      rgba(8,25,50,.87) 50%,
      rgba(5,18,40,.90) 100%);
  color:#dce8f5;
  position:relative;
  overflow:hidden;
}
/* Wood texture visible beneath the blue */
.spice-fish-types-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("../images/fotos/img-2959.jpg");
  background-size:600px auto;
  opacity:.08;
  pointer-events:none;
  z-index:0;
}
.spice-fish-types-container{
  max-width:1400px;
  position:relative;
  z-index:1;
}
.spice-fish-types-header{
  text-align:center;
  margin-bottom:48px;
}
.spice-fish-types-header .spice-section-eyebrow{
  color:rgba(140,190,240,.85);
  letter-spacing:.14em;
}
.spice-fish-types-header h3{
  font-family:var(--serif);
  font-size:1.9rem;
  color:#e8f0fa;
  margin:.5rem 0 0;
}
.spice-fish-types-header h3::after{
  content:'';
  display:block;
  width:60px;
  height:3px;
  margin:12px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg,rgba(100,160,230,.6),rgba(140,200,255,.9),rgba(100,160,230,.6));
}
.spice-fish-types-subtitle{
  color:rgba(200,220,240,.7);
  font-size:1rem;
  margin:.8rem 0 0;
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}

/* ── Grid: 3 cards ────────────────────────────────────────── */
.spice-fish-types-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.fish-type-card{
  background:linear-gradient(160deg,
    rgba(10,24,48,.90),
    rgba(6,16,36,.95));
  border:1px solid rgba(100,160,230,.15);
  border-radius:18px;
  padding:32px 28px 28px;
  display:flex;
  flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.fish-type-card:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 36px rgba(0,20,60,.4);
}
/* Best match card — gold accent */
.fish-type-card--best{
  border-color:rgba(251,192,45,.4);
  box-shadow:0 0 24px rgba(251,192,45,.08);
}
.fish-type-card--best .fish-type-card-title{
  color:#FBC02D;
}
.fish-type-card--best .fish-type-blend-label{
  color:#FBC02D;
}

/* Card icon */
.fish-type-card-icon{
  font-size:2.4rem;
  margin-bottom:12px;
}
.fish-type-card-title{
  font-family:var(--serif);
  font-size:1.25rem;
  color:#e8f0fa;
  margin:0 0 4px;
}
.fish-type-card-examples{
  color:rgba(160,190,220,.7);
  font-size:.85rem;
  font-style:italic;
  margin:0 0 16px;
}

/* Stats mini-bar */
.fish-type-card-stats{
  display:flex;
  gap:12px;
  margin-bottom:18px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(100,160,230,.12);
}
.fish-type-stat{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.fish-type-stat-label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(140,180,220,.6);
}
.fish-type-stat-value{
  font-size:.85rem;
  font-weight:600;
  color:#c0d8f0;
}

/* Body description */
.fish-type-card-body{
  flex:1;
  margin-bottom:18px;
}
.fish-type-card-body p{
  font-size:.92rem;
  line-height:1.6;
  color:rgba(200,220,240,.85);
  margin:0;
}

/* Blend recommendation */
.fish-type-card-blend{
  background:rgba(255,255,255,.05);
  border-radius:12px;
  padding:14px 16px;
  border:1px solid rgba(100,160,230,.1);
}
.fish-type-blend-label{
  display:block;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(140,190,240,.85);
  margin-bottom:6px;
}
.fish-type-card-blend p{
  font-size:.88rem;
  line-height:1.5;
  color:rgba(200,220,240,.8);
  margin:0;
}

/* Footnote */
.spice-fish-types-footnote{
  text-align:center;
  color:rgba(160,190,220,.6);
  font-size:.88rem;
  margin-top:32px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:900px){
  .spice-fish-types-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .spice-fish-types-header h3{
    font-size:1.5rem;
  }
}

/* =====================================================================
   ACTO 4 — ORIGEN (full width)
   OSCURO — estética de atlas antiguo, dorados sobre negro
   ===================================================================== */
.spice-origin-section{
  margin-top:0;
  padding:64px 0 56px;
  background:
    linear-gradient(180deg, #1a1008 0%, #2a1c10 50%, #1a1008 100%);
  color:#f5e8d2;
  position:relative;
  overflow:hidden;
}
/* Subtle texture overlay — wood */
.spice-origin-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("../images/fotos/img-2959.jpg");
  background-size:600px auto;
  opacity:.04;
  pointer-events:none;
}
/* Map background — subtle geographic context */
.spice-origin-section::after{
  content:'';
  position:absolute;
  inset:0;
  background:url("../images/fotos/map.jpg") center 40%/cover no-repeat;
  opacity:.08;
  filter:saturate(.5) brightness(.9);
  mix-blend-mode:soft-light;
  pointer-events:none;
}

.spice-origin-container{
  max-width:1400px;
  position:relative;
  z-index:1;
}
.spice-origin-grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:48px;
  align-items:center;
}

/* Map column */
.spice-origin-map-col{
  width:100%;
}
.spice-map-bg{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(251,192,45,.15),
    0 12px 40px rgba(0,0,0,.4);
}
/* Golden vignette frame */
.spice-map-bg::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:14px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.5);
  z-index:3;
  pointer-events:none;
}
.spice-map-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.spice-origin-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.spice-origin-chips .chip{
  border-radius:999px;
  border:1px solid rgba(251,192,45,.3);
  background:rgba(251,192,45,.08);
  padding:5px 12px;
  font-size:.75rem;
  color:rgba(245,232,210,.8);
}

/* Map dots — pulsing on dark bg */
.spice-map-dot{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--brand-red);
  box-shadow:
    0 0 0 3px rgba(251,192,45,.5),
    0 0 12px rgba(251,192,45,.3);
  z-index:4;
  border:none;
  transition:transform .2s;
  animation:dotPulse 2.5s ease-in-out infinite;
}
.spice-map-dot:hover{
  transform:scale(1.6);
  animation:none;
}
@keyframes dotPulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(251,192,45,.5), 0 0 12px rgba(251,192,45,.3); }
  50%{ box-shadow:0 0 0 5px rgba(251,192,45,.3), 0 0 20px rgba(251,192,45,.2); }
}

/* Text column (light on dark) */
.spice-origin-section .spice-section-eyebrow{
  color:var(--brand-yellow);
}
.spice-origin-text-col h3{
  margin:0 0 .6rem;
  font-size:1.25rem;
  font-family:'Playfair Display',serif;
  color:#f5e8d2;
}
.spice-origin-text-col p{
  margin:.4rem 0;
  font-size:.92rem;
  line-height:1.65;
  color:rgba(245,232,210,.78);
}
.spice-origin-text-col strong{
  color:#f5e8d2;
}

/* =====================================================================
   ACTO 5 — RECETAS (full-bleed cinema slider)
   Cálido sobre fondo claro, foto protagonista, flechas de navegación
   ===================================================================== */
.spice-recipes-section{
  margin-top:0;
  padding:0;
  position:relative;
  overflow:hidden;
}

/* Lead-in bar — cinematic ramp into the photo */
.recipe-lead-in{
  background:#1a1008;
  padding:18px 48px;
  display:flex;
  align-items:center;
  gap:12px;
}
.recipe-lead-eyebrow{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#FBC02D;
  font-weight:700;
}
.recipe-lead-sep{
  color:rgba(245,232,210,.25);
  font-size:.8rem;
}
.recipe-lead-spice{
  font-size:.88rem;
  color:rgba(245,232,210,.7);
  font-family:'Playfair Display',serif;
  font-weight:400;
}

/* Cinema container — full bleed */
.spice-recipes-cinema{
  position:relative;
  width:100%;
  height:420px;
  background:#0f0a04;
  overflow:hidden;
}

/* Slides */
.recipe-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}
.recipe-slide-active{
  opacity:1;
  pointer-events:auto;
}
.recipe-slide-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 6s ease;
}
.recipe-slide-active .recipe-slide-img{
  transform:scale(1.04);
}

/* Text overlay — bottom left */
.recipe-slide-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:36px 48px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(10,6,2,.15) 40%,
    rgba(10,6,2,.7) 100%);
  color:#fff;
}
.recipe-slide-eyebrow{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#FBC02D;
  font-weight:700;
  margin-bottom:6px;
}
.recipe-slide-title{
  font-size:1.7rem;
  font-family:'Playfair Display',serif;
  font-weight:700;
  margin:0 0 6px;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.recipe-slide-sub{
  font-size:.92rem;
  max-width:32rem;
  opacity:.85;
  line-height:1.5;
  margin:0;
}

/* Arrow buttons */
.recipe-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  background:rgba(0,0,0,.35);
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
  width:48px;
  height:48px;
  border-radius:50%;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s, border-color .2s;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.recipe-arrow:hover{
  background:rgba(0,0,0,.55);
  border-color:rgba(251,192,45,.4);
}
.recipe-arrow-prev{ left:20px; }
.recipe-arrow-next{ right:20px; }

/* Dot indicators */
.recipe-dots{
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:3;
}
.recipe-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5);
  background:transparent;
  cursor:pointer;
  transition:background .25s, border-color .25s;
  padding:0;
}
.recipe-dot:hover{
  border-color:#FBC02D;
}
.recipe-dot-active{
  background:#FBC02D;
  border-color:#FBC02D;
}

/* =====================================================================
   ACTO 5 — MAESTRÍA (Tips + Test)
   CLARO — fondo cálido, tarjetas blancas, acentos dorados y verdes
   ===================================================================== */
.spice-mastery-section{
  margin-top:0;
  padding:68px 0 60px;
  background:rgba(210,190,160,.32);
  box-shadow:inset 0 1px 0 rgba(44,24,16,.06);
  position:relative;
  overflow:hidden;
}
.spice-mastery-container{
  max-width:1100px;
  position:relative;
  z-index:1;
}
.spice-mastery-header{
  text-align:center;
  margin-bottom:40px;
}
.spice-mastery-header .spice-section-eyebrow{
  color:#8B1A1A !important;
  font-size:.78rem !important;
  letter-spacing:.16em;
  font-weight:700;
  margin-bottom:.4rem;
}
.spice-mastery-header h3{
  font-size:clamp(1.5rem, 2.6vw, 2.1rem);
  font-family:'Playfair Display',serif;
  color:#1a1008;
  font-weight:700;
  margin:0;
}
.spice-mastery-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;
  align-items:start;
}

/* Tips — fondo crema, números serif grandes */
.spice-tips{
  display:flex;
  flex-direction:column;
}
.spice-tips-title{
  font-weight:700;
  font-size:1.05rem;
  margin:0 0 1.25rem;
  font-family:'Playfair Display',serif;
  color:#1a1008;
  padding-bottom:.75rem;
  border-bottom:1px solid rgba(44,24,16,.1);
}
.spice-tips-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
}
.spice-tips-list li{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:1.1rem 0;
  border-bottom:1px solid rgba(44,24,16,.08);
  font-size:.9rem;
  line-height:1.65;
  color:#3a2a1a;
}
.spice-tips-list li:last-child{border-bottom:none;}
.spice-tips-list li strong{color:#1a1008;}
.tip-num{
  font-family:'Playfair Display',serif;
  font-size:1.6rem;
  font-weight:700;
  color:rgba(139,26,26,.45);
  flex-shrink:0;
  line-height:1;
  min-width:1.4rem;
  text-align:right;
  margin-top:2px;
}
.tip-text{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.tip-title{
  font-family:'Playfair Display',serif;
  font-size:.92rem;
  font-weight:700;
  line-height:1.45;
  color:#1a1008;
}
.tip-title strong{ font-weight:700; }
.tip-desc{
  font-size:.85rem;
  line-height:1.6;
  color:#5a4638;
}

/* Test / Challenge — fondo crema, íconos sutiles */
.spice-test{
  display:flex;
  flex-direction:column;
}
.spice-test-title{
  font-weight:700;
  font-size:1.05rem;
  margin:0 0 1.25rem;
  font-family:'Playfair Display',serif;
  color:#1a1008;
  padding-bottom:.75rem;
  border-bottom:1px solid rgba(44,24,16,.1);
}
.spice-test-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
}
.test-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:1rem 0;
  border-bottom:1px solid rgba(44,24,16,.08);
  font-size:.9rem;
  line-height:1.6;
}
.test-item:last-child{border-bottom:none;}
.test-item-ok{}
.test-item-bad{}
.test-item-neutral{}
.test-icon{
  font-size:.85rem;
  flex-shrink:0;
  font-weight:700;
  margin-top:2px;
  line-height:1;
}
.test-ok{color:#8B6914;}
.test-bad{color:#8B1A1A;}
.test-neutral{color:#8B6914;}
.test-text{flex:1; color:#3a2a1a;}
.test-text strong{
  font-family:'Playfair Display',serif;
  font-weight:700;
  color:#1a1008;
}

/* Mastery close — editorial pause */
.mastery-close{
  max-width:700px;
  margin:3rem auto 0;
  padding:2.5rem 1.5rem 0;
  text-align:center;
  font-family:'Playfair Display', serif;
  font-size:clamp(1.1rem, 1.8vw, 1.3rem);
  line-height:1.55;
  color:#5a4638;
  font-style:italic;
  border-top:1px solid rgba(44,24,16,.1);
}
.mastery-close strong{ color:#1a1008; font-weight:700; font-style:normal; }

/* Extra fact — warm golden callout */
.spice-extra{
  display:flex;
  align-items:flex-start;
  gap:18px;
  background:rgba(251,192,45,.08);
  border-radius:16px;
  border:1px solid rgba(251,192,45,.22);
  padding:24px 28px;
  box-shadow:0 2px 12px rgba(44,24,16,.06);
  margin-top:24px;
}
.spice-extra-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#FBC02D;
  color:#1a1008;
  font-size:.9rem;
  font-weight:800;
  font-style:italic;
  font-family:'Playfair Display',serif;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:2px;
}
.spice-extra-content > strong{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:1rem;
  font-weight:700;
  color:#2c1810;
  margin-bottom:14px;
}
.spice-extra-single{
  margin:0;
  font-size:.9rem;
  line-height:1.7;
  color:#2c1810;
}
.spice-extra-single strong{ color:#1a1008; }
.spice-extra-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
}
.spice-extra-list li{
  position:relative;
  padding:.75rem 0 .75rem 1.3rem;
  font-size:.9rem;
  line-height:1.7;
  color:#2c1810;
  border-bottom:1px solid rgba(44,24,16,.07);
}
.spice-extra-list li:last-child{
  border-bottom:none;
}
.spice-extra-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  border-radius:2px;
  background:#FBC02D;
  opacity:.7;
}

/* =====================================================================
   ACTO 7 — PRODUCTOS (cierre comercial)
   Limpio, centrado, invitación suave
   ===================================================================== */
/* ── Acto 7: Products — Dark showcase ──────────────────────────────── */
.spice-products-section{
  margin-top:0;
  padding:56px 0 60px;
  position:relative;
  background:#1a1008;
  overflow:hidden;
}
/* Wood texture at low opacity */
.spice-products-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('../images/fotos/img-2959.jpg') center/cover no-repeat;
  opacity:.04;
  pointer-events:none;
}
/* Warm spotlight behind packs */
.spice-products-section::after{
  content:'';
  position:absolute;
  top:40%;
  left:50%;
  transform:translate(-50%,-50%);
  width:600px;
  height:400px;
  background:radial-gradient(ellipse, rgba(251,192,45,.12) 0%, rgba(211,47,47,.04) 40%, transparent 70%);
  pointer-events:none;
  z-index:0;
}
.spice-products-container{
  max-width:1160px;
  text-align:center;
  position:relative;
  z-index:1;
}
.spice-products-header{
  margin-bottom:32px;
}
.spice-products-header .spice-section-eyebrow{
  color:#FBC02D !important;
  font-size:1rem !important;
  letter-spacing:.14em;
  font-weight:700;
  opacity:1;
  margin-bottom:4px;
}
.spice-products-header h3{
  font-size:2rem;
  margin:.5rem 0 0;
  font-family:'Playfair Display',serif;
  color:#f5e8d2;
  font-weight:700;
}
.products-brand-accent{
  color:var(--brand-gold);
}
/* ── Pack showcase: flex row, items bottom-aligned ─────────────────── */
.spice-products-showcase{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:48px;
  flex-wrap:wrap;
  padding:0 40px;
}
.pack-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  position:relative;
  transition:transform .3s cubic-bezier(.25,.46,.45,.94);
}
.pack-item:hover{
  transform:translateY(-8px);
}
/* Glow element behind each pack */
.pack-glow{
  position:absolute;
  bottom:20%;
  left:50%;
  transform:translateX(-50%);
  width:120%;
  height:60%;
  background:radial-gradient(ellipse, rgba(251,192,45,.15) 0%, transparent 70%);
  pointer-events:none;
  opacity:0;
  transition:opacity .4s;
  z-index:0;
}
.pack-item:hover .pack-glow{
  opacity:1;
}
.pack-item img{
  width:160px;
  height:auto;
  max-height:220px;
  object-fit:contain;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.4)) drop-shadow(0 2px 8px rgba(251,192,45,.08));
  transition:transform .3s cubic-bezier(.25,.46,.45,.94), filter .3s;
}
.pack-item:hover img{
  transform:scale(1.08);
  filter:drop-shadow(0 12px 32px rgba(0,0,0,.5)) drop-shadow(0 4px 16px rgba(251,192,45,.15));
}
/* Hero pack: larger + more prominent */
.pack-hero img{
  width:200px;
}
.pack-hero .pack-glow{
  opacity:.5;
}
/* Pack info text */
.pack-info{
  position:relative;
  z-index:1;
}
.pack-label{
  font-size:.85rem;
  color:#f5e8d2;
  margin:0;
  font-weight:600;
  letter-spacing:.02em;
}
.pack-detail{
  font-size:.75rem;
  color:rgba(251,192,45,.7);
  margin:2px 0 0;
  font-weight:400;
}
/* ── Adaptive layouts by pack count ─────────────────────────────── */
/* 1 pack: single hero, centered large */
[data-pack-count="1"] .pack-item img{
  width:220px;
}
[data-pack-count="1"] .pack-glow{
  opacity:.4;
}
/* 2 packs */
[data-pack-count="2"] .pack-item img{
  width:175px;
}
[data-pack-count="2"] .pack-hero img{
  width:210px;
}
/* CTA button */
.spice-products-cta{
  margin-top:36px;
}
.spice-products-cta .btn{
  background:rgba(251,192,45,.1);
  border:1.5px solid rgba(251,192,45,.7);
  color:#FBC02D;
  padding:12px 32px;
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.03em;
  transition:all .25s;
}
.spice-products-cta .btn:hover{
  background:rgba(251,192,45,.2);
  border-color:#FBC02D;
  color:#fff;
}

/* =====================================================================
   SPICE PAGE — RESPONSIVE
   ===================================================================== */
@media (max-width:768px){
  /* Altura mobile: 78vh mantiene presencia de hero casi full-screen.
     object-position 75% 50% compensa el crop agresivo: al tirar el punto
     focal hacia la derecha de la imagen, el objeto importante (que suele
     estar en la mitad derecha) queda más al centro-izquierda del crop
     visible. Altura y posición se suben juntos porque trabajan en contra. */
  .spice-hero{min-height:78vh;}
  .spice-hero .hero-inner{min-height:78vh;padding-bottom:90px;}
  .spice-hero .hero-bg{object-position:75% 50%;}
  .spice-hero-tagline{font-size:1rem;}
  .spice-purpose-section{padding:40px 0 36px;}
  .spice-purpose{
    grid-template-columns:1fr;
    gap:28px;
  }
  .spice-sidebar{
    position:static;
  }
  .spice-types{padding:40px 16px 36px;}
  .spice-origin-section{padding:48px 0 40px;}
  .spice-origin-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .spice-origin-map-col{ order:1; }
  .spice-origin-text-col{ order:2; }
  .spice-origin-text-col h3{font-size:1.1rem;}
  .spice-recipes-section{padding:44px 0 40px;}
  .spice-recipes-header{padding:36px 0 20px;}
  .spice-recipes-header h3{font-size:1.4rem;}
  .recipe-lead-in{padding:14px 20px;}
  .spice-recipes-cinema{height:320px;}
  .recipe-slide-overlay{padding:24px 20px;}
  .recipe-slide-title{font-size:1.25rem;}
  .recipe-arrow{width:38px; height:38px; font-size:1.2rem;}
  .recipe-arrow-prev{left:10px;}
  .recipe-arrow-next{right:10px;}
  .spice-mastery-section{padding:44px 0 36px;}
  .spice-mastery-grid{
    grid-template-columns:1fr;
    gap:32px;
  }
  .spice-extra{padding:20px;}
  .spice-products-section{padding:40px 0 48px;}
  .spice-products-showcase{gap:24px; padding:0 16px;}
  .pack-item img{width:120px;}
  .pack-hero img{width:150px;}
  [data-pack-count="1"] .pack-item img{width:170px;}
  [data-pack-count="2"] .pack-item img{width:140px;}
  [data-pack-count="2"] .pack-hero img{width:165px;}
  /* 3 productos: fuerza fila única para evitar 2+1 desbalanceado */
  [data-pack-count="3"] .spice-products-showcase{flex-wrap:nowrap; gap:14px; padding:0 8px;}
  [data-pack-count="3"] .pack-item img{width:88px;}
  [data-pack-count="3"] .pack-hero img{width:108px;}
}

/* =====================================================================
   VANILLA JOURNEY — horizontal serpentine S-timeline
   One continuous golden line: horizontal across each row, vertical down
   the side, curved U-turns connecting rows.
   ===================================================================== */
.vj-section{
  padding:64px 0 56px;
  background:linear-gradient(180deg, #1c120a 0%, #2b1d12 40%, #1c120a 100%);
  color:#f5e8d2;
  position:relative;
  overflow:hidden;
}
/* Wood texture */
.vj-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("../images/fotos/img-2955.jpg");
  background-size:560px auto;
  background-repeat:repeat;
  opacity:.04;
  filter:grayscale(1) brightness(.8);
  pointer-events:none;
}
/* Map background — geographic journey context */
.vj-section::after{
  content:'';
  position:absolute;
  inset:0;
  background:url("../images/fotos/map.jpg") center 40%/cover no-repeat;
  opacity:.07;
  filter:saturate(.5) brightness(.9);
  mix-blend-mode:soft-light;
  pointer-events:none;
}
.vj-section .container{
  max-width:1100px;
  position:relative;
  z-index:1;
}
.vj-section .spice-section-eyebrow{
  color:rgba(251,192,45,.7);
  text-align:center;
}
.vj-section h3{
  text-align:center;
  font-size:1.8rem;
  margin-bottom:48px;
  color:#f5e8d2;
}
.vj-serpentine{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* ── Row: 3-column grid ──────────────────────────────────────────── */
.vj-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  position:relative;
  /* Extra bottom padding so vertical connector has room for the curve */
  padding-bottom:44px;
}
.vj-row--last{ padding-bottom:0; }

/* Reversed row (right-to-left display) */
.vj-row--reversed{ direction:rtl; }
.vj-row--reversed > *{ direction:ltr; }

/* ── Horizontal line — across the row at marker center ───────────── */
.vj-row-line{
  position:absolute;
  top:21px;
  left:22px;
  right:22px;
  height:3px;
  background:rgba(251,192,45,.4);
  z-index:0;
}

/* ── Exit connector: L-shaped border with curve ──────────────────── */
/* Draws horizontal extension + curved corner + vertical drop        */
.vj-row--exit-right::after{
  content:'';
  position:absolute;
  box-sizing:border-box;
  top:21px;
  right:2px;
  width:20px;          /* left edge at right:22px — flush with hline end */
  bottom:0;
  border-top:3px solid rgba(251,192,45,.4);
  border-right:3px solid rgba(251,192,45,.4);
  border-top-right-radius:18px;
  background:transparent;
  z-index:0;
}
.vj-row--exit-left::after{
  content:'';
  position:absolute;
  box-sizing:border-box;
  top:21px;
  left:2px;
  width:20px;
  bottom:0;
  border-top:3px solid rgba(251,192,45,.4);
  border-left:3px solid rgba(251,192,45,.4);
  border-top-left-radius:18px;
  background:transparent;
  z-index:0;
}

/* ── Enter connector: L-shaped border with curve ─────────────────── */
/* Draws vertical drop from above + curved corner + horizontal       */
.vj-row--enter-right::before{
  content:'';
  position:absolute;
  box-sizing:border-box;
  top:0;
  right:2px;
  width:20px;
  height:24px;         /* from row top down to horizontal line bottom (21+3) */
  border-bottom:3px solid rgba(251,192,45,.4);
  border-right:3px solid rgba(251,192,45,.4);
  border-bottom-right-radius:18px;
  background:transparent;
  z-index:0;
}
.vj-row--enter-left::before{
  content:'';
  position:absolute;
  box-sizing:border-box;
  top:0;
  left:2px;
  width:20px;
  height:24px;
  border-bottom:3px solid rgba(251,192,45,.4);
  border-left:3px solid rgba(251,192,45,.4);
  border-bottom-left-radius:18px;
  background:transparent;
  z-index:0;
}

/* ── Individual stop ─────────────────────────────────────────────── */
.vj-stop{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:1;
}
.vj-stop-marker{
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(251,192,45,.15);
  border:2px solid rgba(251,192,45,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-bottom:12px;
}
.vj-stop-icon{font-size:1.2rem;}
.vj-stop-year{
  display:block;
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(251,192,45,.7);
  margin-bottom:6px;
  font-weight:600;
}
.vj-stop-title{
  display:block;
  font-size:.95rem;
  color:#f5e8d2;
  margin-bottom:6px;
  line-height:1.3;
}
.vj-stop-text{
  font-size:.85rem;
  line-height:1.5;
  color:rgba(245,232,210,.7);
  margin:0;
  max-width:280px;
}
.vj-stop-text em{font-style:italic; color:rgba(251,192,45,.6);}
/* Last stop glow */
.vj-stop--last .vj-stop-marker{
  background:rgba(251,192,45,.25);
  border-color:rgba(251,192,45,.8);
  box-shadow:0 0 20px rgba(251,192,45,.3);
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media(max-width:768px){
  .vj-section{padding:48px 0 40px;}
  .vj-section h3{font-size:1.4rem; margin-bottom:32px;}
  .vj-serpentine{gap:0;}
  .vj-row{
    grid-template-columns:1fr !important;
    gap:0;
    padding-bottom:0;
    padding-left:52px;
  }
  .vj-row--reversed{direction:ltr;}
  /* On mobile: single vertical line on the left */
  .vj-row-line{
    top:0; bottom:0; left:-30px; right:auto;
    width:3px; height:auto;
    border-radius:0 !important;
  }
  .vj-row--exit-right::after,
  .vj-row--exit-left::after,
  .vj-row--enter-right::before,
  .vj-row--enter-left::before{ display:none; }
  .vj-stop{
    flex-direction:row;
    text-align:left;
    align-items:flex-start;
    gap:14px;
    padding:16px 0;
  }
  .vj-stop-marker{margin-bottom:0; flex-shrink:0; width:36px; height:36px;}
  .vj-stop-text{max-width:100%;}
  .vj-stop-icon{font-size:1rem;}
}

/* =====================================================================
   VANILLA SCALE — supply vs demand visualization
   ===================================================================== */
.vs-scale-section{
  padding:64px 0 56px;
  background:
    linear-gradient(180deg, rgba(30,20,10,.97) 0%, rgba(45,30,15,.97) 50%, rgba(30,20,10,.97) 100%);
  color:#f5e8d2;
  position:relative;
  overflow:hidden;
}
/* Wood texture */
.vs-scale-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("../images/fotos/img-2955.jpg");
  background-size:560px auto;
  background-repeat:repeat;
  opacity:.04;
  filter:grayscale(1) brightness(.8);
  pointer-events:none;
}
.vs-scale-section .container{
  max-width:900px;
  position:relative;
  z-index:1;
}
.vs-scale-section .spice-section-eyebrow{
  color:rgba(251,192,45,.7);
  text-align:center;
}
.vs-scale-section h3{
  text-align:center;
  font-size:1.8rem;
  margin-bottom:48px;
  color:#f5e8d2;
}
.vs-scale-visual{
  display:flex;
  flex-direction:column;
  gap:28px;
  margin-bottom:40px;
  max-width:100%;
  overflow:hidden;
}
/* Each row: label + track + description */
.vs-scale-row{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.vs-scale-label{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.vs-scale-num{
  font-size:2rem;
  font-weight:700;
  color:#f5e8d2;
  line-height:1;
}
.vs-scale-unit{
  font-size:.9rem;
  color:rgba(245,232,210,.55);
}
.vs-scale-track{
  width:100%;
  height:40px;
  background:rgba(255,255,255,.06);
  border-radius:8px;
  overflow:hidden;
}
.vs-scale-bar-fill{
  height:100%;
  border-radius:8px;
}
.vs-scale-fill--supply{
  width:0.2%;
  min-width:6px;
  background:linear-gradient(90deg, rgba(251,192,45,.5), rgba(251,192,45,.8));
}
.vs-scale-fill--demand{
  width:100%;
  background:linear-gradient(90deg, rgba(200,80,60,.4), rgba(200,80,60,.75));
}
.vs-scale-desc{
  font-size:.85rem;
  color:rgba(245,232,210,.5);
  margin:0;
}
/* Prose */
.vs-scale-prose{
  max-width:720px;
  margin:0 auto;
}
.vs-scale-prose p{
  font-size:1rem;
  line-height:1.65;
  color:rgba(245,232,210,.8);
  margin-bottom:16px;
}
.vs-scale-prose p em{color:rgba(251,192,45,.7); font-style:italic;}
/* Facts row */
.vs-scale-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:20px;
  margin-top:36px;
}
.vs-scale-fact{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(251,192,45,.12);
  border-radius:10px;
  padding:20px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.vs-scale-fact-icon{font-size:1.4rem; flex-shrink:0; margin-top:2px;}
.vs-scale-fact p{
  margin:0;
  font-size:.9rem;
  line-height:1.5;
  color:rgba(245,232,210,.75);
}
.vs-scale-fact strong{color:#f5e8d2;}

@media(max-width:768px){
  .vs-scale-section{padding:48px 0 40px;}
  .vs-scale-section h3{font-size:1.4rem; margin-bottom:32px;}
  .vs-scale-num{font-size:1.5rem;}
  .vs-scale-track{height:32px;}
  .vs-scale-facts{grid-template-columns:1fr;}
}

/* =====================================================================
   VANILLA SPECTRUM — type comparison cards
   ===================================================================== */
.sp-section{
  padding:64px 0 56px;
  background:rgba(210,190,160,.15);
  position:relative;
}
.sp-section .container{
  max-width:1100px;
}
.sp-section .spice-section-eyebrow{
  text-align:center;
  color:rgba(90,60,30,.5);
}
.sp-section h3{
  text-align:center;
  font-size:1.8rem;
  color:#2a1c10;
  margin-bottom:8px;
}
.sp-subtitle{
  text-align:center;
  font-size:1.05rem;
  color:rgba(42,28,16,.6);
  margin-bottom:36px;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}
/* Arrow label: natural ← → synthetic */
.sp-arrow-label{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:600px;
  margin:0 auto 28px;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(42,28,16,.4);
  font-weight:600;
}
.sp-arrow-line{
  flex:1;
  height:2px;
  background:linear-gradient(90deg,
    rgba(50,120,50,.35),
    rgba(42,28,16,.15) 50%,
    rgba(180,80,50,.35));
  border-radius:1px;
}
/* Grid of cards */
.sp-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.sp-card{
  background:rgba(255,255,255,.8);
  border:1px solid rgba(42,28,16,.1);
  border-radius:14px;
  padding:24px 20px 20px;
  position:relative;
  transition:transform .2s, box-shadow .2s;
}
.sp-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,.1);
}
.sp-card--highlight{
  background:rgba(251,192,45,.1);
  border-color:rgba(251,192,45,.35);
  box-shadow:0 0 0 2px rgba(251,192,45,.15);
}
.sp-card-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.sp-card-icon{font-size:1.8rem;}
.sp-card-name{
  font-size:1.05rem;
  color:#2a1c10;
}
/* Meta rows */
.sp-card-meta{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(42,28,16,.08);
}
.sp-card-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.85rem;
}
.sp-card-label{color:rgba(42,28,16,.5);}
.sp-card-value{
  font-weight:600;
  color:#2a1c10;
}
.sp-card-price{
  color:rgba(180,120,40,.85);
  letter-spacing:.05em;
}
/* Purity dots */
.sp-card-purity{
  display:flex;
  gap:4px;
}
.sp-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(42,28,16,.1);
  border:1px solid rgba(42,28,16,.15);
}
.sp-dot--filled{
  background:linear-gradient(135deg, rgba(50,120,50,.6), rgba(50,120,50,.8));
  border-color:rgba(50,120,50,.4);
}
/* Description */
.sp-card-desc{
  font-size:.88rem;
  line-height:1.5;
  color:rgba(42,28,16,.65);
  margin:0 0 10px;
}
/* Tag */
.sp-card-tag{
  display:inline-block;
  font-size:.75rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:600;
  color:rgba(42,28,16,.45);
  background:rgba(42,28,16,.06);
  border-radius:4px;
  padding:4px 8px;
}
.sp-card--highlight .sp-card-tag{
  color:rgba(180,120,40,.9);
  background:rgba(251,192,45,.15);
}
/* Footnote */
.sp-footnote{
  text-align:center;
  font-size:.85rem;
  color:rgba(42,28,16,.45);
  margin-top:24px;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:900px){
  .sp-grid{grid-template-columns:repeat(2, 1fr);}
}
@media(max-width:768px){
  .sp-section{padding:48px 0 40px;}
  .sp-section h3{font-size:1.4rem;}
  .sp-grid{grid-template-columns:1fr;}
  .sp-arrow-label{display:none;}
  .sp-card{padding:20px 18px 16px;}
}

/* =====================================================================
   BICARBONATO — Blue/celeste theme (types section only)
   ===================================================================== */

/* Types section: full-bleed blue background */
[data-spice-id="bicarbonato"] .spice-types{
  position:relative;
  overflow:hidden;
  /* Override base .spice-types constraints */
  max-width:none;
  margin:0;
  padding:64px 24px 56px;
  background:linear-gradient(180deg, #0a1520 0%, #122035 50%, #0a1520 100%);
  color:#e0eaf5;
}
/* Side-by-side cards (2 columns), centered */
[data-spice-id="bicarbonato"] .spice-type-grid{
  grid-template-columns:repeat(2, 1fr);
  max-width:960px;
  margin-inline:auto;
  gap:24px;
  border-radius:16px;
  box-shadow:none;
  overflow:visible;
}
/* Cards: vertical layout (icon on top) */
[data-spice-id="bicarbonato"] .spice-type-card{
  border-radius:14px;
  border:1px solid rgba(100,180,230,.15);
  border-bottom:1px solid rgba(100,180,230,.15);
  background:rgba(255,255,255,.04);
}
[data-spice-id="bicarbonato"] .spice-type-card::before{
  display:none; /* remove the left accent bar */
}
[data-spice-id="bicarbonato"] .spice-type-card-inner{
  grid-template-columns:1fr;  /* single column — icon stacks above text */
  text-align:center;
  padding:36px 28px;
  gap:16px;
}
/* Icon centered above */
[data-spice-id="bicarbonato"] .type-icon-wrap{
  grid-row:auto;
  margin:0 auto 4px;
  border-color:rgba(100,180,230,.4);
  width:52px;
  height:52px;
}
[data-spice-id="bicarbonato"] .spice-type-card:hover .type-icon-wrap{
  border-color:rgba(100,180,230,.7);
}
[data-spice-id="bicarbonato"] .type-icon{
  color:rgba(100,180,230,.85);
}
/* Title centered */
[data-spice-id="bicarbonato"] .spice-type-card h4{
  text-align:center;
  margin-bottom:8px;
}
/* Desc left-aligned for readability */
[data-spice-id="bicarbonato"] .spice-type-card p{
  text-align:left;
}
@media(max-width:768px){
  [data-spice-id="bicarbonato"] .spice-type-grid{
    grid-template-columns:1fr;
  }
}
[data-spice-id="bicarbonato"] .spice-types::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("../images/fotos/img-2955.jpg");
  background-size:560px auto;
  background-repeat:repeat;
  opacity:.03;
  filter:grayscale(1) brightness(.5);
  pointer-events:none;
}
[data-spice-id="bicarbonato"] .spice-types .spice-types-eyebrow{
  color:rgba(100,180,230,.8);
}
[data-spice-id="bicarbonato"] .spice-types .spice-types-title{
  color:#e0eaf5;
}
[data-spice-id="bicarbonato"] .spice-type-card{
  border-color:rgba(100,180,230,.15);
  background:rgba(255,255,255,.04);
  color:#e0eaf5;
}
[data-spice-id="bicarbonato"] .spice-type-card--best{
  border-color:rgba(100,180,230,.4);
  box-shadow:0 0 20px rgba(100,180,230,.08);
}
[data-spice-id="bicarbonato"] .spice-type-card h4{
  color:#e0eaf5;
}
[data-spice-id="bicarbonato"] .spice-types .spice-types-footnote{
  color:rgba(200,220,240,.6);
}
[data-spice-id="bicarbonato"] .spice-types .muted{
  color:rgba(200,220,240,.6);
}
/* Center content inside full-bleed */
[data-spice-id="bicarbonato"] .spice-types .spice-types-header{
  max-width:1100px;
  margin-inline:auto;
  text-align:center;
}
[data-spice-id="bicarbonato"] .spice-types .spice-types-footnote{
  max-width:1100px;
  margin-inline:auto;
}
/* Spec lines inside type cards */
[data-spice-id="bicarbonato"] .spice-type-card em{
  font-style:normal;
  color:rgba(100,180,230,.85);
  font-weight:600;
  font-size:.85rem;
}
[data-spice-id="bicarbonato"] .spice-type-card p{
  line-height:1.65;
}
/* Best card glow */
[data-spice-id="bicarbonato"] .spice-type-card--best::after{
  content:'LO QUE VENDE 51';
  position:absolute;
  top:12px;
  right:12px;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(100,180,230,.9);
  background:rgba(100,180,230,.12);
  padding:3px 10px;
  border-radius:20px;
}
[data-spice-id="bicarbonato"] .spice-type-card--best{
  position:relative;
}

/* =====================================================================
   POLVO PARA HORNEAR — Amber/gold theme (types section only)
   ===================================================================== */

/* Types section: full-bleed warm amber background */
[data-spice-id="polvo"] .spice-types{
  position:relative;
  overflow:hidden;
  max-width:none;
  margin:0;
  padding:64px 24px 56px;
  background:linear-gradient(180deg, #1a1208 0%, #2a1e10 50%, #1a1208 100%);
  color:#f5e8d0;
}
[data-spice-id="polvo"] .spice-types::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("../images/fotos/img-2955.jpg");
  background-size:560px auto;
  background-repeat:repeat;
  opacity:.04;
  filter:grayscale(1) brightness(.5);
  pointer-events:none;
}
/* Side-by-side cards, centered */
[data-spice-id="polvo"] .spice-type-grid{
  grid-template-columns:repeat(2, 1fr);
  max-width:960px;
  margin-inline:auto;
  gap:24px;
  border-radius:16px;
  box-shadow:none;
  overflow:visible;
}
/* Cards: vertical layout */
[data-spice-id="polvo"] .spice-type-card{
  border-radius:14px;
  border:1px solid rgba(210,170,90,.15);
  background:rgba(255,255,255,.04);
  color:#f5e8d0;
}
[data-spice-id="polvo"] .spice-type-card::before{
  display:none;
}
[data-spice-id="polvo"] .spice-type-card-inner{
  grid-template-columns:1fr;
  text-align:center;
  padding:36px 28px;
  gap:16px;
}
/* Icon centered above */
[data-spice-id="polvo"] .type-icon-wrap{
  grid-row:auto;
  margin:0 auto 4px;
  border-color:rgba(210,170,90,.4);
  width:52px;
  height:52px;
}
[data-spice-id="polvo"] .spice-type-card:hover .type-icon-wrap{
  border-color:rgba(210,170,90,.7);
}
[data-spice-id="polvo"] .type-icon{
  color:rgba(210,170,90,.85);
}
/* Titles */
[data-spice-id="polvo"] .spice-type-card h4{
  text-align:center;
  margin-bottom:8px;
  color:#f5e8d0;
}
/* Desc left-aligned */
[data-spice-id="polvo"] .spice-type-card p{
  text-align:left;
  line-height:1.65;
}
/* Eyebrow & header */
[data-spice-id="polvo"] .spice-types .spice-types-eyebrow{
  color:rgba(210,170,90,.8);
}
[data-spice-id="polvo"] .spice-types .spice-types-title{
  color:#f5e8d0;
}
[data-spice-id="polvo"] .spice-types .spice-types-header{
  max-width:1100px;
  margin-inline:auto;
  text-align:center;
}
[data-spice-id="polvo"] .spice-types .spice-types-footnote{
  max-width:1100px;
  margin-inline:auto;
  color:rgba(230,210,170,.6);
}
[data-spice-id="polvo"] .spice-types .muted{
  color:rgba(230,210,170,.6);
}
/* Spec lines */
[data-spice-id="polvo"] .spice-type-card em{
  font-style:normal;
  color:rgba(210,170,90,.85);
  font-weight:600;
  font-size:.85rem;
}
/* Best card accent */
[data-spice-id="polvo"] .spice-type-card--best{
  position:relative;
  border-color:rgba(210,170,90,.4);
  box-shadow:0 0 20px rgba(210,170,90,.08);
}
[data-spice-id="polvo"] .spice-type-card--best::after{
  content:'LO QUE VENDE 51';
  position:absolute;
  top:12px;
  right:12px;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(210,170,90,.9);
  background:rgba(210,170,90,.12);
  padding:3px 10px;
  border-radius:20px;
}
@media(max-width:768px){
  [data-spice-id="polvo"] .spice-type-grid{
    grid-template-columns:1fr;
  }
}

/* =====================================================================
   COCO RALLADO — Brown/cacao theme (types section only)
   ===================================================================== */

[data-spice-id="coco"] .spice-types{
  position:relative;
  overflow:hidden;
  max-width:none;
  margin:0;
  padding:64px 24px 56px;
  background:linear-gradient(180deg, #0f1a10 0%, #1a2a15 50%, #0f1a10 100%);
  color:#f5e6d4;
}
[data-spice-id="coco"] .spice-types::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("../images/fotos/img-2955.jpg");
  background-size:560px auto;
  background-repeat:repeat;
  opacity:.04;
  filter:grayscale(1) brightness(.5);
  pointer-events:none;
}
[data-spice-id="coco"] .spice-type-grid{
  grid-template-columns:repeat(2, 1fr);
  max-width:960px;
  margin-inline:auto;
  gap:24px;
  border-radius:16px;
  box-shadow:none;
  overflow:visible;
}
[data-spice-id="coco"] .spice-type-card{
  border-radius:14px;
  border:1px solid rgba(140,190,100,.15);
  background:rgba(255,255,255,.04);
  color:#f5e6d4;
}
[data-spice-id="coco"] .spice-type-card::before{
  display:none;
}
[data-spice-id="coco"] .spice-type-card-inner{
  grid-template-columns:1fr;
  text-align:center;
  padding:36px 28px;
  gap:16px;
}
[data-spice-id="coco"] .type-icon-wrap{
  grid-row:auto;
  margin:0 auto 4px;
  border-color:rgba(140,190,100,.4);
  width:52px;
  height:52px;
}
[data-spice-id="coco"] .spice-type-card:hover .type-icon-wrap{
  border-color:rgba(140,190,100,.7);
}
[data-spice-id="coco"] .type-icon{
  color:rgba(140,190,100,.85);
}
[data-spice-id="coco"] .spice-type-card h4{
  text-align:center;
  margin-bottom:8px;
  color:#f5e6d4;
}
[data-spice-id="coco"] .spice-type-card p{
  text-align:left;
  line-height:1.65;
}
[data-spice-id="coco"] .spice-types .spice-types-eyebrow{
  color:rgba(140,190,100,.8);
}
[data-spice-id="coco"] .spice-types .spice-types-title{
  color:#f5e6d4;
}
[data-spice-id="coco"] .spice-types .spice-types-header{
  max-width:1100px;
  margin-inline:auto;
  text-align:center;
}
[data-spice-id="coco"] .spice-types .spice-types-footnote{
  max-width:1100px;
  margin-inline:auto;
  color:rgba(220,190,150,.6);
}
[data-spice-id="coco"] .spice-types .muted{
  color:rgba(220,190,150,.6);
}
[data-spice-id="coco"] .spice-type-card em{
  font-style:normal;
  color:rgba(140,190,100,.85);
  font-weight:600;
  font-size:.85rem;
}
[data-spice-id="coco"] .spice-type-card--best{
  position:relative;
  border-color:rgba(220,190,100,.4);
  box-shadow:0 0 20px rgba(220,190,100,.08);
}
[data-spice-id="coco"] .spice-type-card--best::after{
  content:'LO QUE VENDE 51';
  position:absolute;
  top:12px;
  right:12px;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(220,190,100,.9);
  background:rgba(220,190,100,.12);
  padding:3px 10px;
  border-radius:20px;
}
[data-spice-id="coco"] .spice-type-card:not(.spice-type-card--best){
  border-color:rgba(160,160,160,.12);
}
[data-spice-id="coco"] .spice-type-card:not(.spice-type-card--best) .type-icon{
  opacity:.75;
}
[data-spice-id="coco"] .spice-type-card:not(.spice-type-card--best) h4{
  opacity:.85;
}
@media(max-width:768px){
  [data-spice-id="coco"] .spice-type-grid{
    grid-template-columns:1fr;
  }
}

/* ── Coco: Coconut Anatomy section ──────────────────────────────── */
[data-spice-id="coco"] .ca-section{
  position:relative;
  overflow:hidden;
  padding:64px 24px 56px;
  background:linear-gradient(180deg, rgba(15,25,15,.95) 0%, rgba(20,35,20,.9) 50%, rgba(15,25,15,.95) 100%);
  color:#e8f0e0;
}
[data-spice-id="coco"] .ca-section .spice-section-eyebrow{
  color:rgba(140,190,100,.8);
  text-align:center;
}
[data-spice-id="coco"] .ca-section h3{
  color:#e8f0e0;
  text-align:center;
  margin-bottom:8px;
}
.ca-subtitle{
  text-align:center;
  color:rgba(220,230,210,.55);
  font-size:.95rem;
  max-width:620px;
  margin:0 auto 40px;
  line-height:1.5;
}
.ca-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  max-width:960px;
  margin-inline:auto;
}
.ca-card{
  flex:0 1 calc(25% - 15px);
  min-width:180px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(140,190,100,.15);
  border-radius:14px;
  padding:28px 20px;
  text-align:center;
  transition:border-color .3s, transform .3s;
}
.ca-card:hover{
  border-color:rgba(140,190,100,.35);
  transform:translateY(-2px);
}
.ca-card-icon{
  display:block;
  font-size:2rem;
  margin-bottom:10px;
}
.ca-card-part{
  display:block;
  font-size:.95rem;
  color:#e8f0e0;
  margin-bottom:8px;
}
.ca-card-products{
  font-size:.82rem;
  color:rgba(220,230,210,.55);
  line-height:1.5;
  margin:0;
}
.ca-footnote{
  text-align:center;
  color:rgba(140,190,100,.65);
  font-size:.9rem;
  font-style:italic;
  margin:36px auto 0;
  max-width:600px;
}
@media(max-width:768px){
  .ca-card{
    flex:0 1 calc(50% - 10px);
  }
}
@media(max-width:480px){
  .ca-card{
    flex:0 1 100%;
  }
}

/* ── Azúcar Impalpable: tema blanco/nieve ──────────────────────── */
[data-spice-id="azucar"] .spice-types{
  position:relative;
  overflow:hidden;
  max-width:none;
  margin:0;
  padding:64px 24px 56px;
  background:linear-gradient(180deg, #0c0e14 0%, #141822 50%, #0c0e14 100%);
  color:#f0f0f5;
}
[data-spice-id="azucar"] .spice-types::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("../images/fotos/img-2955.jpg");
  background-size:560px auto;
  background-repeat:repeat;
  opacity:.03;
  filter:grayscale(1) brightness(.7);
  pointer-events:none;
}
[data-spice-id="azucar"] .spice-type-grid{
  grid-template-columns:repeat(2, 1fr);
  max-width:960px;
  margin-inline:auto;
  gap:24px;
  border-radius:16px;
  box-shadow:none;
  overflow:visible;
}
[data-spice-id="azucar"] .spice-type-card{
  border-radius:14px;
  border:1px solid rgba(200,210,230,.15);
  background:rgba(255,255,255,.04);
  color:#f0f0f5;
}
[data-spice-id="azucar"] .spice-type-card::before{
  display:none;
}
[data-spice-id="azucar"] .spice-type-card-inner{
  grid-template-columns:1fr;
  text-align:center;
  padding:36px 28px;
  gap:16px;
}
[data-spice-id="azucar"] .type-icon-wrap{
  grid-row:auto;
  margin:0 auto 4px;
  border-color:rgba(200,210,230,.4);
  width:52px;
  height:52px;
}
[data-spice-id="azucar"] .spice-type-card:hover .type-icon-wrap{
  border-color:rgba(200,210,230,.7);
}
[data-spice-id="azucar"] .type-icon{
  color:rgba(200,210,230,.85);
}
[data-spice-id="azucar"] .spice-type-card h4{
  text-align:center;
  margin-bottom:8px;
  color:#f0f0f5;
}
[data-spice-id="azucar"] .spice-type-card p{
  text-align:left;
  line-height:1.65;
}
[data-spice-id="azucar"] .spice-types .spice-types-eyebrow{
  color:rgba(200,210,230,.8);
}
[data-spice-id="azucar"] .spice-types .spice-types-title{
  color:#f0f0f5;
}
[data-spice-id="azucar"] .spice-types .spice-types-header{
  max-width:1100px;
  margin-inline:auto;
  text-align:center;
}
[data-spice-id="azucar"] .spice-types .spice-types-footnote{
  max-width:1100px;
  margin-inline:auto;
  color:rgba(200,210,230,.5);
}
[data-spice-id="azucar"] .spice-types .muted{
  color:rgba(200,210,230,.5);
}
[data-spice-id="azucar"] .spice-type-card em{
  font-style:normal;
  color:rgba(200,210,230,.85);
  font-weight:600;
  font-size:.85rem;
}
[data-spice-id="azucar"] .spice-type-card--best{
  position:relative;
  border-color:rgba(230,235,245,.35);
  box-shadow:0 0 24px rgba(230,235,245,.06);
}
[data-spice-id="azucar"] .spice-type-card--best::after{
  content:'LO QUE VENDE 51';
  position:absolute;
  top:12px;
  right:12px;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(230,235,245,.9);
  background:rgba(230,235,245,.1);
  padding:3px 10px;
  border-radius:20px;
}
[data-spice-id="azucar"] .spice-type-card:not(.spice-type-card--best){
  border-color:rgba(180,160,120,.12);
}
[data-spice-id="azucar"] .spice-type-card:not(.spice-type-card--best) .type-icon{
  color:rgba(180,160,120,.7);
}
[data-spice-id="azucar"] .spice-type-card:not(.spice-type-card--best) h4{
  opacity:.85;
}
@media(max-width:768px){
  [data-spice-id="azucar"] .spice-type-grid{
    grid-template-columns:1fr;
  }
}

/* ── Salsa de Soja: tema ámbar/oscuro ──────────────────────────── */
[data-spice-id="soja"] .spice-types{
  position:relative;
  overflow:hidden;
  max-width:none;
  margin:0;
  padding:64px 24px 56px;
  background:linear-gradient(180deg, #120c06 0%, #1e1408 50%, #120c06 100%);
  color:#f5e8d4;
}
[data-spice-id="soja"] .spice-types::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("../images/fotos/img-2955.jpg");
  background-size:560px auto;
  background-repeat:repeat;
  opacity:.03;
  filter:grayscale(1) brightness(.5);
  pointer-events:none;
}
[data-spice-id="soja"] .spice-type-grid{
  grid-template-columns:repeat(2, 1fr);
  max-width:960px;
  margin-inline:auto;
  gap:24px;
  border-radius:16px;
  box-shadow:none;
  overflow:visible;
}
[data-spice-id="soja"] .spice-type-card{
  border-radius:14px;
  border:1px solid rgba(190,150,80,.15);
  background:rgba(255,255,255,.04);
  color:#f5e8d4;
}
[data-spice-id="soja"] .spice-type-card::before{
  display:none;
}
[data-spice-id="soja"] .spice-type-card-inner{
  grid-template-columns:1fr;
  text-align:center;
  padding:36px 28px;
  gap:16px;
}
[data-spice-id="soja"] .type-icon-wrap{
  grid-row:auto;
  margin:0 auto 4px;
  border-color:rgba(190,150,80,.4);
  width:52px;
  height:52px;
}
[data-spice-id="soja"] .spice-type-card:hover .type-icon-wrap{
  border-color:rgba(190,150,80,.7);
}
[data-spice-id="soja"] .type-icon{
  color:rgba(190,150,80,.85);
}
[data-spice-id="soja"] .spice-type-card h4{
  text-align:center;
  margin-bottom:8px;
  color:#f5e8d4;
}
[data-spice-id="soja"] .spice-type-card p{
  text-align:left;
  line-height:1.65;
}
[data-spice-id="soja"] .spice-types .spice-types-eyebrow{
  color:rgba(190,150,80,.8);
}
[data-spice-id="soja"] .spice-types .spice-types-title{
  color:#f5e8d4;
}
[data-spice-id="soja"] .spice-types .spice-types-header{
  max-width:1100px;
  margin-inline:auto;
  text-align:center;
}
[data-spice-id="soja"] .spice-types .spice-types-footnote{
  max-width:1100px;
  margin-inline:auto;
  color:rgba(220,200,160,.5);
}
[data-spice-id="soja"] .spice-types .muted{
  color:rgba(220,200,160,.5);
}
[data-spice-id="soja"] .spice-type-card em{
  font-style:normal;
  color:rgba(190,150,80,.85);
  font-weight:600;
  font-size:.85rem;
}
[data-spice-id="soja"] .spice-type-card--best{
  position:relative;
  border-color:rgba(190,150,80,.4);
  box-shadow:0 0 20px rgba(190,150,80,.08);
}
[data-spice-id="soja"] .spice-type-card--best::after{
  content:'LO QUE VENDE 51';
  position:absolute;
  top:12px;
  right:12px;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(190,150,80,.9);
  background:rgba(190,150,80,.12);
  padding:3px 10px;
  border-radius:20px;
}
[data-spice-id="soja"] .spice-type-card:not(.spice-type-card--best){
  border-color:rgba(160,160,160,.12);
}
[data-spice-id="soja"] .spice-type-card:not(.spice-type-card--best) .type-icon{
  color:rgba(160,160,160,.6);
}
[data-spice-id="soja"] .spice-type-card:not(.spice-type-card--best) h4{
  opacity:.8;
}
@media(max-width:768px){
  [data-spice-id="soja"] .spice-type-grid{
    grid-template-columns:1fr;
  }
}

/* ── Salsa Blanca: tema crema/blanco cálido ────────────────────── */
[data-spice-id="salsa_blanca"] .spice-types{
  position:relative;
  overflow:hidden;
  max-width:none;
  margin:0;
  padding:64px 24px 56px;
  background:linear-gradient(180deg, #14120e 0%, #1e1c16 50%, #14120e 100%);
  color:#f5f0e8;
}
[data-spice-id="salsa_blanca"] .spice-types::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("../images/fotos/img-2955.jpg");
  background-size:560px auto;
  background-repeat:repeat;
  opacity:.03;
  filter:grayscale(1) brightness(.6);
  pointer-events:none;
}
[data-spice-id="salsa_blanca"] .spice-type-grid{
  grid-template-columns:repeat(2, 1fr);
  max-width:960px;
  margin-inline:auto;
  gap:24px;
  border-radius:16px;
  box-shadow:none;
  overflow:visible;
}
[data-spice-id="salsa_blanca"] .spice-type-card{
  border-radius:14px;
  border:1px solid rgba(220,210,180,.15);
  background:rgba(255,255,255,.04);
  color:#f5f0e8;
}
[data-spice-id="salsa_blanca"] .spice-type-card::before{
  display:none;
}
[data-spice-id="salsa_blanca"] .spice-type-card-inner{
  grid-template-columns:1fr;
  text-align:center;
  padding:36px 28px;
  gap:16px;
}
[data-spice-id="salsa_blanca"] .type-icon-wrap{
  grid-row:auto;
  margin:0 auto 4px;
  border-color:rgba(220,210,180,.4);
  width:52px;
  height:52px;
}
[data-spice-id="salsa_blanca"] .spice-type-card:hover .type-icon-wrap{
  border-color:rgba(220,210,180,.7);
}
[data-spice-id="salsa_blanca"] .type-icon{
  color:rgba(220,210,180,.85);
}
[data-spice-id="salsa_blanca"] .spice-type-card h4{
  text-align:center;
  margin-bottom:8px;
  color:#f5f0e8;
}
[data-spice-id="salsa_blanca"] .spice-type-card p{
  text-align:left;
  line-height:1.65;
}
[data-spice-id="salsa_blanca"] .spice-types .spice-types-eyebrow{
  color:rgba(220,210,180,.8);
}
[data-spice-id="salsa_blanca"] .spice-types .spice-types-title{
  color:#f5f0e8;
}
[data-spice-id="salsa_blanca"] .spice-types .spice-types-header{
  max-width:1100px;
  margin-inline:auto;
  text-align:center;
}
[data-spice-id="salsa_blanca"] .spice-types .spice-types-footnote{
  max-width:1100px;
  margin-inline:auto;
  color:rgba(220,210,180,.5);
}
[data-spice-id="salsa_blanca"] .spice-types .muted{
  color:rgba(220,210,180,.5);
}
[data-spice-id="salsa_blanca"] .spice-type-card em{
  font-style:normal;
  color:rgba(220,210,180,.85);
  font-weight:600;
  font-size:.85rem;
}
[data-spice-id="salsa_blanca"] .spice-type-card--best{
  position:relative;
  border-color:rgba(240,230,200,.35);
  box-shadow:0 0 20px rgba(240,230,200,.06);
}
[data-spice-id="salsa_blanca"] .spice-type-card--best::after{
  content:'LO QUE VENDE 51';
  position:absolute;
  top:12px;
  right:12px;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(240,230,200,.9);
  background:rgba(240,230,200,.1);
  padding:3px 10px;
  border-radius:20px;
}
[data-spice-id="salsa_blanca"] .spice-type-card:not(.spice-type-card--best){
  border-color:rgba(180,170,150,.12);
}
[data-spice-id="salsa_blanca"] .spice-type-card:not(.spice-type-card--best) .type-icon{
  color:rgba(180,170,150,.7);
}
[data-spice-id="salsa_blanca"] .spice-type-card:not(.spice-type-card--best) h4{
  opacity:.85;
}
@media(max-width:768px){
  [data-spice-id="salsa_blanca"] .spice-type-grid{
    grid-template-columns:1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOTHER SAUCES — intro visual (salsa blanca)
   ═══════════════════════════════════════════════════════════════════════ */
.spice-intro-mother-sauces{
  margin-top:2.5rem;
  background:rgba(220,210,180,.04);
  border:1px solid rgba(220,210,180,.1);
  border-radius:1rem;
  padding:1.75rem 1.5rem 1.5rem;
}
.ms-label{
  font-size:.8rem; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(220,210,180,.7); margin-bottom:1.25rem; text-align:center;
  font-weight:600;
}
.ms-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1rem;
}
.ms-sauce-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:.75rem; padding:1.4rem 1rem; text-align:center;
  transition:border-color .3s, background .3s;
}
.ms-sauce-card:hover{
  border-color:rgba(220,210,180,.25); background:rgba(255,255,255,.08);
}
.ms-sauce-card--highlight{
  border-color:rgba(220,210,180,.45); background:rgba(220,210,180,.1);
  position:relative;
}
.ms-sauce-card--highlight::after{
  content:'★ ESTA'; position:absolute; top:-.6rem; left:50%; transform:translateX(-50%);
  background:rgba(220,210,180,.92); color:#1a1810; font-size:.6rem; font-weight:700;
  letter-spacing:.1em; padding:.2rem .7rem; border-radius:1rem;
}
.ms-sauce-icon{
  display:block; font-size:2rem; margin-bottom:.6rem;
}
.ms-sauce-name{
  display:block; font-size:1.05rem; font-weight:600; color:rgba(240,235,220,.95); margin-bottom:.3rem;
}
.ms-sauce-base{
  display:block; font-size:.8rem; color:rgba(220,210,180,.55); margin-bottom:.6rem;
}
.ms-sauce-difficulty{
  display:flex; gap:.3rem; justify-content:center; margin-bottom:.6rem;
}
.ms-dot{
  width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.08);
}
.ms-dot--active{
  background:rgba(220,210,180,.75); border-color:rgba(220,210,180,.3);
}
.ms-sauce-desc{
  font-size:.82rem; line-height:1.5; color:rgba(240,235,220,.6); margin:0;
}
.ms-sauce-card--highlight .ms-sauce-desc{
  color:rgba(240,235,220,.75);
}
@media(max-width:900px){
  .ms-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:550px){
  .ms-grid{ grid-template-columns:repeat(2,1fr); }
  .ms-sauce-card--highlight{ grid-column:1 / -1; }
  .spice-intro-mother-sauces{ padding:1.25rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PROCESS TYPES — parallel step-by-step paths (salsa blanca)
   ═══════════════════════════════════════════════════════════════════════ */
.spice-types-process{
  padding:4rem 0;
}
.spice-types-process .spice-types-header{
  text-align:center; margin-bottom:2.5rem;
}
.tp-paths{
  display:grid; grid-template-columns:1fr 1fr; gap:2rem;
}
.tp-path{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:1rem; padding:1.5rem;
}
.tp-path--best{
  border-color:rgba(220,210,180,.3); background:rgba(220,210,180,.05);
  position:relative;
}
.tp-path--best::after{
  content:'★ 51'; position:absolute; top:-.55rem; right:1.5rem;
  background:rgba(220,210,180,.9); color:#1a1810; font-size:.6rem; font-weight:700;
  letter-spacing:.1em; padding:.15rem .6rem; border-radius:1rem;
}
.tp-path-header{
  display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem;
  padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.08);
}
.tp-path-icon{ font-size:1.5rem; }
.tp-path-label{ font-size:1rem; color:rgba(240,235,220,.9); }
.tp-path-time{
  margin-left:auto; font-size:.8rem; opacity:.5;
  background:rgba(255,255,255,.06); padding:.2rem .6rem; border-radius:.5rem;
}
.tp-steps{
  display:flex; flex-direction:column; gap:0;
}
.tp-step{
  display:flex; gap:.75rem; align-items:flex-start;
}
.tp-step-marker{
  display:flex; flex-direction:column; align-items:center; flex-shrink:0;
  width:2.5rem;
}
.tp-step-icon{
  font-size:1.1rem; width:2.2rem; height:2.2rem;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border-radius:50%;
}
.tp-step-line{
  width:2px; height:1.5rem; background:rgba(255,255,255,.1); margin:.25rem 0;
}
.tp-path--best .tp-step-icon{
  background:rgba(220,210,180,.12);
}
.tp-path--best .tp-step-line{
  background:rgba(220,210,180,.15);
}
.tp-step-content{
  padding-top:.35rem; padding-bottom:.75rem;
}
.tp-step-label{
  display:block; font-size:.88rem; color:rgba(240,235,220,.85);
}
.tp-step-detail{
  display:block; font-size:.78rem; opacity:.5; margin-top:.15rem;
}
.tp-step--final .tp-step-icon{
  background:rgba(100,180,100,.2);
}
@media(max-width:700px){
  .tp-paths{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BÉCHAMEL JOURNEY — vertical timeline (salsa blanca)
   ═══════════════════════════════════════════════════════════════════════ */
.bj-section{
  padding:4rem 0;
  background:linear-gradient(180deg, #1a1610 0%, #24201a 50%, #1a1610 100%);
  position:relative;
  overflow:hidden;
}
.bj-section::before{
  content:'';position:absolute;inset:0;
  background:url("../images/fotos/img-2959.jpg");background-size:600px auto;
  opacity:.03;pointer-events:none;
}
.bj-section .container{
  position:relative; z-index:1;
}
.bj-section h3{
  margin-bottom:2rem;
}
.bj-timeline{
  position:relative; max-width:750px; margin:0 auto;
}
.bj-stop{
  display:flex; gap:1.25rem; align-items:stretch; position:relative;
}
.bj-stop-marker{
  display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:3.2rem;
}
.bj-stop-icon{
  font-size:1.4rem; width:3rem; height:3rem;
  display:flex; align-items:center; justify-content:center;
  background:rgba(220,210,180,.12); border:2px solid rgba(220,210,180,.25);
  border-radius:50%;
}
.bj-stop-line{
  width:2px; flex:1; min-height:1rem; background:rgba(220,210,180,.18);
}
.bj-stop-content{
  flex:1; padding:1rem 1.25rem 1.25rem;
  margin-bottom:1rem;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(220,210,180,.12);
  border-radius:.75rem;
}
.bj-stop--last .bj-stop-content{
  margin-bottom:0;
}
.bj-stop-year{
  display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(220,210,180,.7); margin-bottom:.35rem;
  background:rgba(220,210,180,.12); padding:.2rem .6rem; border-radius:.3rem;
}
.bj-stop-title{
  display:block; font-size:1.05rem; font-weight:600; color:rgba(240,235,220,.95); margin-bottom:.4rem;
}
.bj-stop-text{
  font-size:.9rem; line-height:1.6; color:rgba(240,235,220,.72); margin:0;
}
.bj-stop-text em{
  color:rgba(220,210,180,.85); font-style:italic;
}
.bj-stop--last .bj-stop-icon{
  background:rgba(220,210,180,.2); border-color:rgba(220,210,180,.4);
}
.bj-stop:hover .bj-stop-content{
  background:rgba(255,255,255,.06);
  border-color:rgba(220,210,180,.2);
}
@media(max-width:550px){
  .bj-stop-marker{ width:2.4rem; }
  .bj-stop-icon{ width:2.4rem; height:2.4rem; font-size:1.1rem; }
  .bj-stop-content{ padding:.8rem 1rem; }
}
/* =====================================================================
   PIMENTÓN — Historia narrativa (Origen + Mural Flores + Puente)
   Tres secciones específicas de la entrada Pimentón. Ritmo visual:
   LIMPIO (origen) → OSCURO (mural) → CÁLIDO (puente a Historia).
   ===================================================================== */

/* ── Shared: visual placeholders para huecos de imagen pendientes ── */
.spice-visual-placeholder{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem;
  width:100%; aspect-ratio:4/3;
  background:
    repeating-linear-gradient(135deg,
      rgba(211,47,47,.06) 0 10px,
      rgba(251,192,45,.06) 10px 20px),
    #f5e8d2;
  border:1px dashed rgba(211,47,47,.45);
  border-radius:10px;
  color:#7a4a1e;
  text-align:center; padding:14px;
}
.spice-visual-placeholder-tag{
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#b02a1a;
  background:rgba(255,255,255,.7);
  padding:.25rem .55rem; border-radius:4px;
}
.spice-visual-placeholder-note{
  font-size:.78rem; line-height:1.35; max-width:22ch; color:#5a3410; font-style:italic;
}
.spice-visual-placeholder-small{ aspect-ratio:1/1.1; }
.spice-visual-placeholder-portrait{ aspect-ratio:3/4; }
.spice-visual-placeholder-bridge{ aspect-ratio:1/1; }

/* =====================================================================
   1) pimentonHeritage — "El rojo que heredamos"
   Bloque unificado con dos capas integradas. Fondo madera oscura +
   rojo profundo saturado. Tipografía editorial. Sin fotos históricas.
   Referencia visual: .spice-intro-section (madera oscura + gold/red).
   ===================================================================== */
.spice-pimenton-heritage{
  position:relative;
  padding:96px 0 88px;
  background:#140906;
  color:#f5e8d2;
  overflow:hidden;
  isolation:isolate;
}
/* Textura madera oscura sutil */
.spice-pimenton-heritage .heritage-bg{
  position:absolute; inset:0; z-index:0;
  background-image:url('../images/fotos/img-2959.jpg');
  background-size:cover;
  background-position:center;
  opacity:.07;
  filter:contrast(1.15) saturate(.7);
  pointer-events:none;
}
/* Glow rojo profundo dramático — ancla la narrativa */
.spice-pimenton-heritage .heritage-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(176,42,26,.38) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 80%, rgba(211,47,47,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(251,192,45,.07) 0%, transparent 50%),
    linear-gradient(180deg, rgba(20,9,6,0) 0%, rgba(20,9,6,.5) 100%);
}
.spice-pimenton-heritage-inner{
  position:relative;
  z-index:1;
  max-width:1120px;
}
.spice-pimenton-heritage-header{
  text-align:center;
  max-width:820px;
  margin:0 auto 48px;
}
.spice-pimenton-heritage-header .spice-section-eyebrow{
  color:rgba(251,192,45,.85);
  letter-spacing:.22em;
  font-size:.82rem;
  text-transform:uppercase;
}
/* Título — reset defensivo para que respire directo sobre la textura
   del bloque. Sin background, sin box-shadow, sin borde heredado. */
.spice-pimenton-heritage-title,
.spice-pimenton-heritage h3{
  font-family:'Playfair Display', serif;
  font-size:clamp(1.85rem, 3.4vw, 3rem);
  font-weight:700;
  line-height:1.14;
  color:#f7ecd0;
  margin:.6rem 0 0;
  padding:0;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border:none !important;
  text-shadow:0 2px 18px rgba(20,9,6,.55);
  text-wrap:balance;
  position:relative;
}
.spice-pimenton-heritage-title::before,
.spice-pimenton-heritage-title::after,
.spice-pimenton-heritage h3::before,
.spice-pimenton-heritage h3::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

.spice-pimenton-heritage-layers{
  max-width:820px;
  margin:0 auto;
  position:relative;
}

/* ── Capa superior — intro épica ─────────────────────────────── */
.spice-pimenton-heritage .heritage-upper{
  position:relative;
}
.spice-pimenton-heritage .heritage-upper p{
  font-family:'Playfair Display', serif;
  font-size:1.18rem;
  line-height:1.78;
  color:rgba(245,232,210,.93);
  margin:0 0 1.2rem;
  text-wrap:pretty;
}
.spice-pimenton-heritage .heritage-upper p:first-child::first-letter{
  font-family:'Playfair Display', serif;
  font-size:3.6rem;
  float:left;
  line-height:.95;
  margin:.35rem .55rem -.15rem 0;
  color:#d6432a;
  font-weight:700;
}
.spice-pimenton-heritage .heritage-upper strong{ color:#fbc02d; font-weight:700; }
.spice-pimenton-heritage .heritage-upper em{
  color:rgba(251,192,45,.92);
  font-style:italic;
}
/* Línea de transición — editorial, íntima, sin corte */
.spice-pimenton-heritage .heritage-transition{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:1.28rem !important;
  line-height:1.5 !important;
  color:#f7ecd0 !important;
  text-align:center;
  margin:2.2rem auto 0 !important;
  max-width:640px;
  padding:0 1rem;
  text-wrap:balance;
}
.spice-pimenton-heritage .heritage-transition strong{ color:#fbc02d; }

/* ── Flujo geográfico decorativo ─────────────────────────────── */
.spice-pimenton-heritage .heritage-flow{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:14px 18px;
  margin:3rem auto 3rem;
  padding:1.4rem 1rem;
  max-width:760px;
  border-top:1px solid rgba(251,192,45,.22);
  border-bottom:1px solid rgba(251,192,45,.22);
  position:relative;
}
.spice-pimenton-heritage .heritage-flow::before,
.spice-pimenton-heritage .heritage-flow::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%;
  background:#b02a1a;
  box-shadow:0 0 14px rgba(211,47,47,.7);
}
.spice-pimenton-heritage .heritage-flow::before{ top:-5px; }
.spice-pimenton-heritage .heritage-flow::after{ bottom:-5px; }
.spice-pimenton-heritage .heritage-flow-step{
  font-family:'Playfair Display', serif;
  font-size:1rem;
  font-style:italic;
  color:#f7ecd0;
  letter-spacing:.03em;
  white-space:nowrap;
}
.spice-pimenton-heritage .heritage-flow-arrow{
  font-family:'Playfair Display', serif;
  color:rgba(251,192,45,.7);
  font-size:1.1rem;
}

/* ── Capa inferior — historia comprimida ─────────────────────── */
.spice-pimenton-heritage .heritage-lower{
  position:relative;
}
.spice-pimenton-heritage .heritage-lower p{
  font-size:1.02rem;
  line-height:1.82;
  color:rgba(245,232,210,.82);
  margin:0 0 1.1rem;
  text-wrap:pretty;
}
.spice-pimenton-heritage .heritage-lower p:last-child{ margin-bottom:0; }
.spice-pimenton-heritage .heritage-lower strong{
  color:#f5e8d2;
  font-weight:700;
}
.spice-pimenton-heritage .heritage-lower em{
  color:rgba(251,192,45,.85);
  font-style:italic;
}

/* Línea puente que enlaza con el mural más abajo */
.spice-pimenton-heritage .heritage-bridge{
  margin:2.4rem auto 0;
  padding:1.4rem 1.6rem;
  max-width:680px;
  text-align:center;
  font-family:'Playfair Display', serif;
  font-size:1.08rem;
  line-height:1.55;
  color:#f7ecd0;
  background:rgba(176,42,26,.09);
  border:1px solid rgba(176,42,26,.35);
  border-radius:4px;
  position:relative;
}
.spice-pimenton-heritage .heritage-bridge::before,
.spice-pimenton-heritage .heritage-bridge::after{
  content:'';
  position:absolute;
  left:50%; transform:translateX(-50%);
  width:60px; height:1px;
  background:rgba(251,192,45,.5);
}
.spice-pimenton-heritage .heritage-bridge::before{ top:-1px; }
.spice-pimenton-heritage .heritage-bridge::after{ bottom:-1px; }
.spice-pimenton-heritage .heritage-bridge strong{ color:#fbc02d; }
.heritage-bridge-link{
  color:#C0392B;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(192,57,43,.5);
  cursor:pointer;
  transition:color .2s, text-decoration-color .2s;
}
.heritage-bridge-link:hover{
  color:#fbc02d;
  text-decoration-color:rgba(251,192,45,.6);
}

/* Nota editorial sobre el placeholder de asset IA (interna) */
.spice-pimenton-heritage .heritage-ai-note{
  margin:2.4rem auto 0;
  max-width:620px;
  padding:.8rem 1rem;
  text-align:center;
  font-size:.72rem;
  line-height:1.5;
  color:rgba(245,232,210,.4);
  border:1px dashed rgba(251,192,45,.22);
  border-radius:4px;
  background:rgba(255,255,255,.02);
  font-style:italic;
}
.spice-pimenton-heritage .heritage-ai-tag{
  display:inline-block;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(251,192,45,.6);
  margin-right:.5rem;
}

/* =====================================================================
   1.5) pimentonContext — REMOVED in v18 (P2)
   La información de los 3 países se reubicó: Valles Calchaquíes vive
   ahora en pimentonJourney (rama Argentina) y en pimentonHeritage.
   ===================================================================== */

/* ── Solo wrappers para whatItDoes/whenToUse en pimentón (v17) ──
   Cuando estos bloques se renderizan como secciones independientes
   (fuera del contenedor purpose con sidebar), se centran a un ancho
   lectura editorial cómodo. */
.spice-purpose-solo .spice-purpose-solo-inner{
  max-width:820px;
}
.spice-purpose-solo + .spice-purpose-solo{
  padding-top:0;
}

/* =====================================================================
   PIMENTÓN TYPES — tarjetas + tabla escuelas (v21)
   ===================================================================== */

/* ── Alternating backgrounds (pimentón only) ───────────────────────── */
[data-spice-id="pimenton"] .pt-section{
  background:linear-gradient(180deg, #1a0e06 0%, #241408 50%, #1a0e06 100%);
  position:relative;
}
[data-spice-id="pimenton"] .pt-section::before{
  content:'';position:absolute;inset:0;
  background:url("../images/fotos/img-2959.jpg");background-size:600px auto;
  opacity:.03;pointer-events:none;
}
[data-spice-id="pimenton"] .pt-section .container{
  position:relative; z-index:1;
}
[data-spice-id="pimenton"] .spice-pairings-section{
  background:linear-gradient(180deg, #1a0e06 0%, #241408 50%, #1a0e06 100%);
  position:relative; border:none;
  padding-top:4rem;
}
[data-spice-id="pimenton"] .spice-pairings-section::before{
  content:'';position:absolute;inset:0;
  background:url("../images/fotos/img-2959.jpg");background-size:600px auto;
  opacity:.03;pointer-events:none;
}
[data-spice-id="pimenton"] .spice-pairings-section > .container{
  position:relative; z-index:1;
}
[data-spice-id="pimenton"] .spice-pairings-header h3{
  color:#f0e6d2;
}
[data-spice-id="pimenton"] .spice-pairings-header h3::after{
  background:#f0e6d2;
}
/* pimentón mastery usa el fondo oscuro global — no necesita override */

/* ── Section container ─────────────────────────────────────────────── */
.pt-section{
  padding:4rem 0 0;
}
.pt-header{
  text-align:center; margin-bottom:2rem;
}
.pt-header .spice-section-eyebrow{
  color:#8B1A1A;
}
.pt-title{
  font-family:'Playfair Display', serif;
  font-size:clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight:700; line-height:1.2;
  color:#f0e6d2; margin:0 0 .3rem;
}
.pt-subtitle{
  font-size:.95rem; color:rgba(240,230,210,.55); margin:0;
}

/* ── Parte A: Tres tarjetas ────────────────────────────────────────── */
.pt-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
.pt-card{
  border-radius:1rem;
  padding:1.75rem 1.5rem 1.5rem;
  position:relative;
  overflow:hidden;
  transition:transform .2s, box-shadow .2s;
}
/* Per-card distinct backgrounds */
.pt-card--dulce{
  background:#2A0A0A;
  border:1px solid rgba(139,26,26,.35);
}
.pt-card--picante{
  background:#2A1400;
  border:1px solid rgba(139,58,0,.35);
}
.pt-card--ahumado{
  background:#1A0D00;
  border:1px solid rgba(74,40,0,.35);
}
.pt-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
/* Per-card accent line */
.pt-card-accent{
  position:absolute; top:0; left:0; right:0; height:3px;
}
.pt-card--dulce .pt-card-accent{ background:#8B1A1A; }
.pt-card--picante .pt-card-accent{ background:#8B3A00; }
.pt-card--ahumado .pt-card-accent{ background:#4A2800; }
/* Per-card eyebrow color */
.pt-card-eyebrow{
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  margin:0 0 .75rem; font-weight:600;
}
.pt-card--dulce .pt-card-eyebrow{ color:#C0392B; }
.pt-card--picante .pt-card-eyebrow{ color:#D4580A; }
.pt-card--ahumado .pt-card-eyebrow{ color:#8B6914; }
.pt-card-title{
  font-family:'Playfair Display', serif;
  font-size:1.25rem; font-weight:700; line-height:1.3;
  color:#f0e6d2; margin:0 0 .75rem;
}
.pt-card-text{
  font-size:.9rem; line-height:1.6; color:rgba(240,230,210,.75); margin:0;
}
.pt-card-note{
  font-size:.78rem; line-height:1.5; color:rgba(240,230,210,.45);
  margin:1rem 0 0; padding-top:.75rem;
  border-top:1px solid rgba(255,255,255,.06);
  font-style:italic;
}
@media(max-width:800px){
  .pt-cards{ grid-template-columns:1fr; }
}

/* ── Parte B: Bridge — pausa editorial ─────────────────────────────── */
.pt-bridge{
  max-width:740px; margin:0 auto;
  padding:3rem 1.5rem;
  text-align:center;
  font-family:'Playfair Display', serif;
  font-size:clamp(1.2rem, 2vw, 1.4rem);
  line-height:1.55;
  color:rgba(240,230,210,.6);
  font-style:italic;
}

/* ── Parte C: Escuelas (tarjetas verticales) — fondo claro ────────── */
.pt-schools{
  background:rgba(210,190,160,.32);
  color:#1a1008;
  padding:3rem 0; margin-top:2rem;
}
.pt-schools .spice-section-eyebrow{
  color:#8B1A1A; text-align:center;
}
.pt-schools-title{
  font-family:'Playfair Display', serif;
  font-size:clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight:700; color:#1a1008;
  text-align:center; margin-bottom:2rem;
}

/* Desktop school cards — 5-card horizontal grid */
.ps-cards-desktop{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1rem;
  max-width:1200px; margin:0 auto; padding:0 1.5rem;
}
.ps-card{
  background:#2A1A0A;
  border:1px solid rgba(240,230,210,.08);
  border-radius:.85rem;
  padding:1.5rem 1.25rem 1.25rem;
  position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s;
}
.ps-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.ps-card-accent{
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--ps-accent, #8B1A1A);
}
.ps-card--highlight{
  border-left:4px solid #8B1A1A;
}
.ps-card-badge{
  display:inline-block;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  background:#8B1A1A; color:#f0e6d2;
  padding:.2rem .55rem; border-radius:.25rem;
  margin-bottom:.6rem; font-weight:700;
}
.ps-card-name{
  font-family:'Playfair Display', serif;
  font-size:1.05rem; font-weight:700; line-height:1.25;
  color:#f0e6d2; margin:0 0 1rem;
}
.ps-params{
  display:flex; flex-direction:column; gap:0;
}
.ps-param{
  display:flex; flex-direction:column; gap:.15rem;
  padding:.55rem 0;
  border-bottom:1px solid rgba(240,230,210,.06);
}
.ps-param:last-child{ border-bottom:none; }
.ps-param-label{
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ps-accent, #8B1A1A); font-weight:600;
}
.ps-param-value{
  font-size:.82rem; line-height:1.45; color:rgba(240,230,210,.75);
}

/* Note at footer */
.pt-schools-note{
  max-width:700px; margin:1.5rem auto 0;
  text-align:center; font-size:.8rem; color:rgba(26,16,8,.5);
  font-style:italic; padding:0 1.5rem;
}

/* Mobile: tabs + panels — hidden on desktop */
.ps-mobile{ display:none; }

@media(max-width:900px){
  .ps-cards-desktop{ display:none; }
  .ps-mobile{
    display:block; padding:0 1.25rem;
  }
  .ps-tabs{
    display:flex; gap:.4rem; overflow-x:auto;
    padding-bottom:.75rem; padding-left:1.25rem; padding-right:1.25rem;
    margin-bottom:1rem; margin-left:-1.25rem; margin-right:-1.25rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .ps-tabs::-webkit-scrollbar{ display:none; }
  .ps-tab{
    flex-shrink:0;
    font-size:.72rem; letter-spacing:.06em; font-weight:600;
    background:rgba(240,230,210,.08);
    color:rgba(240,230,210,.5);
    border:1px solid rgba(240,230,210,.1);
    border-radius:2rem; padding:.45rem .85rem;
    cursor:pointer; white-space:nowrap;
    transition:background .2s, color .2s, border-color .2s;
  }
  .ps-tab--active{
    background:var(--ps-accent, #8B1A1A);
    color:#f0e6d2;
    border-color:var(--ps-accent, #8B1A1A);
  }
  .ps-panels{ position:relative; }
  .ps-panel{
    display:none;
    background:#2A1A0A;
    border:1px solid rgba(240,230,210,.08);
    border-radius:.85rem; padding:1.25rem;
  }
  .ps-panel--active{ display:block; }
  .ps-panel .ps-card-badge{ margin-bottom:.75rem; }
}

/* =====================================================================
   2) pimentonMural — "El apellido que significaba pimentón"
   Acto OSCURO. Densidad visual = mensaje.
   ===================================================================== */
.spice-pimenton-mural{
  position:relative;
  padding:88px 0 80px;
  background:#140a06;
  color:#f0e6d2;
  overflow:hidden;
}
.spice-pimenton-mural::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(211,47,47,.18), transparent 60%),
    radial-gradient(ellipse at 10% 100%, rgba(251,192,45,.08), transparent 55%);
  pointer-events:none;
}
.spice-pimenton-mural > .container{ position:relative; }
.spice-pimenton-mural-header{
  max-width:760px; margin:0 auto 44px; text-align:center;
}
.spice-pimenton-mural .spice-section-eyebrow{
  color:#fbc02d;
}
.spice-pimenton-mural-header h3{
  font-family:'Playfair Display', serif;
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  line-height:1.15; margin:.4rem 0 1rem;
  color:#f7ecd0;
}
.spice-pimenton-mural-lead{
  font-size:1.02rem; line-height:1.65; color:rgba(240,230,210,.82);
  margin:.4rem 0;
}
.spice-pimenton-mural-lead strong{ color:#fbc02d; }

/* Stats strip */
.spice-pimenton-mural-stats{
  list-style:none; padding:0; margin:0 auto 2.5rem;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
  max-width:980px;
}
.spice-pimenton-mural-stats li{
  text-align:center;
  padding:20px 14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(251,192,45,.22);
  border-radius:8px;
}
.spice-pimenton-mural-stat-number{
  display:block;
  font-family:'Playfair Display', serif;
  font-size:1.7rem; font-weight:700;
  color:#fbc02d; line-height:1.1;
}
.spice-pimenton-mural-stat-unit{
  display:block;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(251,192,45,.75); margin-top:.25rem;
}
.spice-pimenton-mural-stat-note{
  display:block;
  font-size:.78rem; line-height:1.45;
  color:rgba(240,230,210,.7);
  margin-top:.55rem;
}

/* ── Mural toggle button ─────────────────────────────────────────── */
.mural-toggle-wrap{
  text-align:center;
  margin:0 0 2.5rem;
}
.mural-toggle-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:'Playfair Display', serif;
  font-size:1rem;
  font-weight:600;
  color:#f0e6d2;
  background:transparent;
  border:1px solid rgba(240,230,210,.3);
  border-radius:3rem;
  padding:.7rem 1.8rem;
  cursor:pointer;
  letter-spacing:.02em;
  transition:background .25s, border-color .25s, color .25s;
}
.mural-toggle-btn:hover{
  background:rgba(139,26,26,.3);
  border-color:rgba(192,57,43,.5);
}
.mural-toggle-arrow{
  font-size:.85rem;
  transition:transform .3s;
}
.mural-toggle-btn[aria-expanded="true"] .mural-toggle-arrow{
  transform:rotate(180deg);
}

/* ── Mural expandable wrapper ────────────────────────────────────── */
.mural-expandable{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s ease-in-out;
}
.mural-expandable[aria-hidden="false"]{
  /* max-height set by JS */
}
.mural-expandable-inner{
  padding-top:1rem;
}

/* =====================================================================
   MURAL TREE V2 — Genealogía corregida (Guillamón → Muelas → gap → Antonio)
   5 niveles + hermanos + ramales + murciana + envases
   ===================================================================== */
.mural-tree-v2{
  max-width:760px;
  margin:0 auto 48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}

/* ── Shared card base ──────────────────────────────────────────────── */
.mural-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(251,192,45,.2);
  border-radius:8px;
  overflow:hidden;
  transition:border-color .25s, background .25s;
}
.mural-card:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(251,192,45,.4);
}
.mural-card-visual{
  position:relative;
}
.mural-card-visual img{
  width:100%;
  aspect-ratio:1/1.2;
  object-fit:cover;
  filter:sepia(.15);
  display:block;
}
.mural-card-body{
  padding:16px 20px;
}
.mural-card-label{
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(251,192,45,.7);
  margin:0 0 .4rem;
  font-weight:700;
}
.mural-card-name{
  font-family:'Playfair Display', serif;
  font-size:1.15rem;
  line-height:1.2;
  color:#f7ecd0;
  margin:0 0 .3rem;
  font-weight:700;
}
.mural-card-role{
  font-size:.88rem;
  color:#fbc02d;
  font-style:italic;
  margin:0 0 .5rem;
}
.mural-card-note{
  font-size:.84rem;
  line-height:1.6;
  color:rgba(240,230,210,.75);
  margin:0;
}

/* ── Level wrapper (centers card + connector) ───────────────────────── */
.mural-level{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
.mural-level-tag{
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(240,230,210,.45);
  margin:0 0 .6rem;
  text-align:center;
}

/* ── Connectors ────────────────────────────────────────────────────── */
.mural-connector{
  width:2px;
  height:40px;
  background:linear-gradient(to bottom, rgba(251,192,45,.45), rgba(251,192,45,.1));
  margin:0 auto;
}
.mural-connector--dashed{
  background:none;
  border-left:2px dashed rgba(251,192,45,.35);
}

/* ── Level 0: Origin (Guillamón) — text-only, sober ───────────────── */
.mural-card--origin{
  max-width:520px;
  width:100%;
  background:rgba(255,255,255,.02);
  border-color:rgba(160,160,160,.25);
}
.mural-card--origin:hover{
  border-color:rgba(160,160,160,.4);
}
.mural-card--origin .mural-card-body{
  text-align:center;
  padding:18px 24px;
}
.mural-card--origin .mural-card-name{
  font-size:1.05rem;
  color:rgba(240,230,210,.7);
}
.mural-card--origin .mural-card-role{
  color:rgba(240,230,210,.5);
  font-size:.82rem;
}

/* ── Level 1: Root (Flores Muelas) — portrait left, text right ────── */
.mural-card--root{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:0;
  max-width:620px;
  width:100%;
  border-left:3px solid #C0392B;
}
.mural-card--root .mural-card-visual img{
  height:100%;
  aspect-ratio:auto;
  border-radius:0;
}
.mural-card--root .mural-card-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mural-card--root .mural-card-name{ font-size:1.2rem; }

/* ── Level 2: Expansion (Flores Guillamón) — portrait, orange border ─ */
.mural-card--expansion{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:0;
  max-width:580px;
  width:100%;
  border-left:3px solid #E67E22;
}
.mural-card--expansion .mural-card-visual img{
  height:100%;
  aspect-ratio:auto;
  border-radius:0;
}
.mural-card--expansion .mural-card-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ── Gap — dashed line + centered label ──────────────────────────── */
.mural-gap{
  text-align:center;
  padding:6px 0;
}
.mural-gap-label{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(240,230,210,.5);
  font-weight:600;
  padding:.35rem 1rem;
  border:1px dashed rgba(240,230,210,.25);
  border-radius:999px;
  margin:0;
}
.mural-gap-note{
  font-size:.78rem;
  color:rgba(240,230,210,.4);
  font-style:italic;
  margin:.4rem 0 0;
}

/* ── Level 3: Core (Antonio) — largest card, gold/red border ─────── */
.mural-card--core{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:0;
  max-width:760px;
  width:100%;
  background:linear-gradient(135deg, rgba(176,42,26,.15), rgba(251,192,45,.06));
  border:2px solid rgba(251,192,45,.45);
  border-radius:10px;
}
.mural-card--core .mural-card-visual img{
  height:100%;
  aspect-ratio:auto;
  border-radius:0;
}
.mural-card--core .mural-card-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px 28px;
}
.mural-card--core .mural-card-label{ color:#ffd95a; }
.mural-card--core .mural-card-name{ font-size:1.45rem; }
.mural-card--core .mural-card-role{ font-size:.95rem; color:#ffd95a; }

/* ── Brothers ────────────────────────────────────────────────────── */
.mural-brothers-label,
.mural-branches-label{
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(251,192,45,.6);
  font-weight:700;
  text-align:center;
  margin:40px 0 16px;
  position:relative;
}
.mural-brothers-label::before,
.mural-branches-label::before{
  content:"";
  display:block;
  width:48px;
  height:1px;
  background:rgba(251,192,45,.3);
  margin:0 auto 10px;
}
.mural-brothers{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  max-width:760px;
  width:100%;
}
.mural-brother{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(251,192,45,.18);
  border-radius:6px;
  padding:16px;
  text-align:center;
  transition:border-color .25s, background .25s;
}
.mural-brother:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(251,192,45,.35);
}
.mural-brother-visual{
  margin-bottom:10px;
}
.mural-brother-visual img{
  width:80px;
  height:80px;
  border-radius:50%;
  object-fit:cover;
  filter:sepia(.15);
  margin:0 auto;
  display:block;
}
.mural-brother-visual .spice-visual-placeholder{
  width:80px;
  height:80px;
  border-radius:50%;
  margin:0 auto;
}
.mural-brother-name{
  font-family:'Playfair Display', serif;
  font-size:.95rem;
  color:#f7ecd0;
  margin:0 0 .15rem;
  font-weight:700;
}
.mural-brother-nickname{
  font-size:.72rem;
  color:#fbc02d;
  font-style:italic;
  margin:0 0 .3rem;
}
.mural-brother-role{
  font-size:.78rem;
  color:rgba(240,230,210,.65);
  margin:0 0 .3rem;
}
.mural-brother-note{
  font-size:.75rem;
  color:rgba(240,230,210,.5);
  margin:.3rem 0 0;
  font-style:italic;
}

/* ── Branches (ramales periféricos) ──────────────────────────────── */
.mural-branches{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  max-width:760px;
  width:100%;
}
.mural-branch{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(251,192,45,.15);
  border-radius:6px;
  padding:14px 16px;
  transition:border-color .25s;
}
.mural-branch:hover{
  border-color:rgba(251,192,45,.3);
}
.mural-branch--verify{
  border-style:dashed;
  opacity:.75;
}
.mural-branch-family{
  font-family:'Playfair Display', serif;
  font-size:.88rem;
  color:#f7ecd0;
  margin:0 0 .3rem;
  font-weight:700;
}
.mural-branch-verify-tag{
  display:inline-block;
  font-size:.58rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(240,230,210,.5);
  background:rgba(255,255,255,.06);
  padding:.15rem .5rem;
  border-radius:999px;
  vertical-align:middle;
  margin-left:.4rem;
  font-weight:600;
  font-family:ui-sans-serif, system-ui, sans-serif;
}
.mural-branch-head{
  font-size:.78rem;
  color:rgba(240,230,210,.6);
  margin:0 0 .3rem;
}
.mural-branch-brands{
  font-size:.72rem;
  color:#fbc02d;
  font-style:italic;
  line-height:1.5;
}

/* ── La Murciana ─────────────────────────────────────────────────── */
.mural-murciana{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:0;
  max-width:760px;
  width:100%;
  margin:48px auto 0;
  background:rgba(210,190,160,.08);
  border:1px solid rgba(210,190,160,.2);
  border-radius:8px;
  overflow:hidden;
}
.mural-murciana-visual{
  position:relative;
}
.mural-murciana-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.mural-murciana-visual .spice-visual-placeholder{
  height:100%;
}
.mural-murciana-body{
  padding:24px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mural-murciana-title{
  font-family:'Playfair Display', serif;
  font-size:1.2rem;
  color:#f7ecd0;
  margin:.3rem 0 .8rem;
  font-weight:700;
}
.mural-murciana-text{
  font-size:.9rem;
  line-height:1.7;
  color:rgba(240,230,210,.75);
  margin:0 0 .6rem;
}
.mural-murciana-text:last-child{ margin-bottom:0; }

/* ── Envases históricos ──────────────────────────────────────────── */
.mural-envases{
  max-width:760px;
  width:100%;
  margin:40px auto 0;
}
.mural-envases-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-top:16px;
}
.mural-envase{
  margin:0;
  text-align:center;
}
.mural-envase img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:4px;
  filter:grayscale(.6) sepia(.1);
}
.mural-envase .spice-visual-placeholder{
  aspect-ratio:3/4;
}
.mural-envase figcaption{
  font-size:.78rem;
  font-style:italic;
  color:rgba(240,230,210,.55);
  margin-top:.6rem;
}

/* ── Mural tree v2 responsive ────────────────────────────────────── */
@media(max-width:900px){
  .mural-card--root{ grid-template-columns:100px 1fr; }
  .mural-card--expansion{ grid-template-columns:100px 1fr; }
  .mural-card--core{ grid-template-columns:140px 1fr; }
  .mural-brothers{ grid-template-columns:1fr; gap:14px; max-width:420px; }
  .mural-branches{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .mural-murciana{ grid-template-columns:180px 1fr; }
}
@media(max-width:640px){
  .mural-card--root,
  .mural-card--expansion{
    grid-template-columns:1fr;
    border-left:none;
    border-top:3px solid;
  }
  .mural-card--root{ border-top-color:#C0392B; }
  .mural-card--expansion{ border-top-color:#E67E22; }
  .mural-card--root .mural-card-visual img{
    aspect-ratio:4/3;
    max-height:260px;
  }
  .mural-card--expansion .mural-card-visual img{
    aspect-ratio:4/3;
    max-height:260px;
    object-position:center 20%;
  }
  .mural-card--core{
    grid-template-columns:1fr;
  }
  .mural-card--core .mural-card-visual img{
    aspect-ratio:4/3;
    max-height:280px;
  }
  .mural-card--core .mural-card-name{ font-size:1.3rem; }
  .mural-branches{ grid-template-columns:1fr; }
  .mural-murciana{
    grid-template-columns:1fr;
  }
  .mural-murciana-visual img{
    aspect-ratio:4/3;
    max-height:280px;
  }
  .mural-envases-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* Grid mural ramales */
.spice-pimenton-mural-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  max-width:1120px; margin:0 auto 48px;
}
.spice-pimenton-mural-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(251,192,45,.18);
  border-radius:6px;
  padding:14px 14px 16px;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.spice-pimenton-mural-card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.06);
  border-color:rgba(251,192,45,.4);
}
.spice-pimenton-mural-card-visual{
  margin-bottom:12px;
}
.spice-pimenton-mural-card-visual img{
  width:100%; aspect-ratio:1/1.15; object-fit:cover; border-radius:4px;
}
.spice-pimenton-mural-card-family{
  font-family:'Playfair Display', serif;
  font-size:1.02rem; line-height:1.2; margin:0;
  color:#f7ecd0;
}
.spice-pimenton-mural-card-brand{
  font-size:.78rem; font-style:italic;
  color:#fbc02d; margin:.3rem 0 0;
}
.spice-pimenton-mural-card-years{
  font-size:.72rem; letter-spacing:.08em;
  color:rgba(240,230,210,.55); margin:.3rem 0 0;
}

/* Marcas registradas — tira flotante */
.spice-pimenton-mural-brands{
  max-width:980px; margin:0 auto 56px;
  text-align:center;
}
.spice-pimenton-mural-brands-eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(251,192,45,.7); margin:0 0 16px;
}
.spice-pimenton-mural-brands-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px;
}
.spice-pimenton-mural-brands-list li{
  font-family:'Playfair Display', serif; font-style:italic;
  font-size:1rem; color:#f7ecd0;
  padding:.45rem 1rem;
  border:1px solid rgba(251,192,45,.28);
  border-radius:999px;
  background:rgba(255,255,255,.03);
}

/* Retratos */
.spice-pimenton-mural-portraits{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  max-width:620px; margin:0 auto 44px;
}
.spice-pimenton-mural-portrait{ margin:0; }
.spice-pimenton-mural-portrait img{
  width:100%; height:auto; border-radius:4px;
  filter:sepia(.15);
}
.spice-pimenton-mural-portrait figcaption{
  text-align:center; font-size:.78rem; font-style:italic;
  color:rgba(240,230,210,.6); margin-top:.5rem;
}

/* Coda (3 hermanos, diáspora) */
.spice-pimenton-mural-coda{
  max-width:680px; margin:0 auto 28px;
  padding:28px 32px;
  border-top:1px solid rgba(251,192,45,.22);
  border-bottom:1px solid rgba(251,192,45,.22);
  text-align:center;
}
.spice-pimenton-mural-coda p{
  font-size:1rem; line-height:1.65; color:#f0e6d2; margin:.5rem 0;
}
.spice-pimenton-mural-coda p strong{ color:#fbc02d; }

.spice-pimenton-mural-source{
  max-width:680px; margin:0 auto;
  text-align:center;
  font-size:.72rem; color:rgba(240,230,210,.45);
  letter-spacing:.04em;
}


/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:900px){
  .spice-pimenton-mural-grid{ grid-template-columns:repeat(3, 1fr); }
  .spice-pimenton-mural-stats{ grid-template-columns:repeat(2, 1fr); }
  .spice-pimenton-heritage{ padding:72px 0 64px; }
  .spice-pimenton-heritage .heritage-upper p{ font-size:1.08rem; line-height:1.72; }
  .spice-pimenton-heritage .heritage-upper p:first-child::first-letter{ font-size:3rem; }
  .spice-pimenton-heritage .heritage-transition{ font-size:1.14rem !important; }
}
@media(max-width:768px){
  .spice-pimenton-heritage{ padding:60px 0 54px; }
  .spice-pimenton-heritage-header{ margin-bottom:36px; }
  .spice-pimenton-heritage .heritage-upper p{ font-size:1rem; line-height:1.7; }
  .spice-pimenton-heritage .heritage-upper p:first-child::first-letter{
    font-size:2.6rem; margin:.2rem .4rem -.1rem 0;
  }
  .spice-pimenton-heritage .heritage-flow{
    margin:2rem auto; padding:1.1rem .6rem; gap:8px 12px;
  }
  .spice-pimenton-heritage .heritage-flow-step{ font-size:.9rem; }
  .spice-pimenton-heritage .heritage-lower p{ font-size:.95rem; line-height:1.75; }
  .spice-pimenton-heritage .heritage-bridge{
    font-size:.98rem; padding:1.2rem 1.2rem;
  }

  .spice-pimenton-mural{ padding:60px 0 56px; }
  .spice-pimenton-mural-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
  .spice-pimenton-mural-stats{ gap:14px; margin-bottom:40px; }
  .spice-pimenton-mural-stat-number{ font-size:1.4rem; }
  .spice-pimenton-mural-portraits{ max-width:420px; gap:16px; }
  .spice-pimenton-mural-coda{ padding:22px 20px; }
}
@media(max-width:480px){
  .spice-pimenton-mural-grid{ grid-template-columns:1fr 1fr; }
  .spice-pimenton-mural-stats{ grid-template-columns:1fr; }
  .spice-pimenton-heritage-title{ font-size:1.65rem; }
  .spice-pimenton-heritage .heritage-flow{ flex-direction:column; gap:8px; }
  .spice-pimenton-heritage .heritage-flow-arrow{ transform:rotate(90deg); }
}

/* =====================================================================
   v18 · PIMENTÓN JOURNEY — diagrama de árbol vertical con flechas
   Ref: dibujo de Thomas (América → Yuste → ramales → Espinardo → Flores → mundo)
   Angosto, editorial, con conectores CSS. No supera 820px de ancho.
   ===================================================================== */
.spice-pimenton-journey{
  padding:84px 0 88px;
  background:linear-gradient(180deg,#f6ecd6 0%,#efe2c8 100%);
  position:relative;
  overflow:hidden;
}
.spice-pimenton-journey::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(211,47,47,.10), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(140,60,30,.08), transparent 55%);
  pointer-events:none;
}
.spice-pimenton-journey-inner{
  max-width:820px;
  position:relative;
}
.spice-pimenton-journey-header{
  text-align:center;
  margin:0 auto 48px;
  max-width:680px;
}
.spice-pimenton-journey-header h3{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,3vw,2.5rem);
  line-height:1.15;
  margin:.3rem 0 1rem;
  color:#2c1810;
  font-weight:700;
}
.spice-pimenton-journey-intro{
  font-size:1rem;
  line-height:1.65;
  color:#5a4638;
  font-style:italic;
  margin:0;
}

/* ── Tree container ──────────────────────────────────────────── */
.pj-tree{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
}
.pj-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}

/* ── Connector between stages (vertical line + arrow) ────────── */
.pj-connector{
  display:flex;
  flex-direction:column;
  align-items:center;
  height:48px;
  width:100%;
  position:relative;
}
.pj-connector-line{
  width:2px;
  flex:1;
  background:linear-gradient(180deg,rgba(211,47,47,.55),rgba(211,47,47,.85));
}
.pj-connector-arrow{
  color:rgba(211,47,47,.85);
  font-size:.85rem;
  line-height:1;
  margin-top:-2px;
}

/* ── Node (single stage) ─────────────────────────────────────── */
.pj-node{
  background:#fffdf7;
  border:1.5px solid rgba(211,47,47,.3);
  border-radius:10px;
  padding:20px 26px;
  max-width:560px;
  width:100%;
  text-align:center;
  box-shadow:0 6px 18px rgba(44,24,16,.08);
  position:relative;
}
.pj-node-year{
  display:inline-block;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand-red,#d32f2f);
  font-weight:700;
  margin-bottom:.3rem;
}
.pj-node-label{
  font-family:'Playfair Display',serif;
  font-size:1.4rem;
  font-weight:700;
  color:#2c1810;
  margin:0 0 .6rem;
  letter-spacing:.01em;
}
.pj-node-text{
  font-size:.92rem;
  line-height:1.6;
  color:#4a382c;
  margin:0;
}
.pj-node-text em{ color:#8b4513; }
.pj-node-text strong{ color:#2c1810; }

.pj-node--highlight{
  background:linear-gradient(180deg,#fff8e1 0%,#ffecb3 100%);
  border-color:rgba(211,47,47,.7);
  border-width:2px;
  box-shadow:0 10px 30px rgba(211,47,47,.14);
}
.pj-node--flores{
  background:linear-gradient(180deg,#2c1810 0%,#3b1f12 100%);
  color:#f7ecd0;
  border-color:#fbc02d;
  border-width:2px;
}
.pj-node--flores .pj-node-year{ color:#fbc02d; }
.pj-node--flores .pj-node-label{ color:#f7ecd0; }
.pj-node--flores .pj-node-text{ color:rgba(240,230,210,.9); }
.pj-node--flores .pj-node-text strong{ color:#fbc02d; }
.pj-node--hub{
  background:linear-gradient(180deg,#fff3d6 0%,#fbe3a6 100%);
  border-color:#d32f2f;
  border-width:2px;
}

/* ── Fan (fork into multiple children) ───────────────────────── */
.pj-fan{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.pj-fan-header{
  text-align:center;
  max-width:620px;
}
.pj-fan-label{
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brand-red,#d32f2f);
  font-weight:700;
  margin:0 0 .4rem;
}
.pj-fan-text{
  font-size:.9rem;
  line-height:1.55;
  color:#5a4638;
  margin:0;
  font-style:italic;
}
.pj-fan-grid{
  display:grid;
  gap:12px;
  width:100%;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
}
.pj-fan-grid[data-count="5"]{ grid-template-columns:repeat(5,1fr); }
.pj-fan-grid[data-count="6"]{ grid-template-columns:repeat(3,1fr); }
.pj-fan-grid[data-count="9"]{ grid-template-columns:repeat(3,1fr); }

.pj-leaf{
  background:#fffdf7;
  border:1px solid rgba(44,24,16,.18);
  border-top:3px solid rgba(211,47,47,.4);
  border-radius:6px;
  padding:12px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:60px;
  transition:transform .2s,box-shadow .2s;
}
.pj-leaf:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(44,24,16,.12);
}
.pj-leaf-label{
  font-family:'Playfair Display',serif;
  font-size:.98rem;
  font-weight:700;
  color:#2c1810;
  line-height:1.2;
}
.pj-leaf-note{
  font-size:.78rem;
  line-height:1.45;
  color:#6a5648;
}
.pj-leaf--highlight{
  background:linear-gradient(180deg,#fff8e1 0%,#ffe8a3 100%);
  border-top-color:#d32f2f;
  border-top-width:4px;
}
.pj-leaf--highlight .pj-leaf-label{ color:#8b2818; }

/* ── Chain (linear sequence with → arrows) ───────────────────── */
.pj-chain{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.pj-chain-row{
  display:flex;
  align-items:stretch;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  width:100%;
}
.pj-chain-step{
  background:#fffdf7;
  border:1px solid rgba(44,24,16,.2);
  border-left:4px solid rgba(211,47,47,.55);
  border-radius:6px;
  padding:12px 16px;
  max-width:260px;
  flex:1 1 200px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.pj-chain-year{
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brand-red,#d32f2f);
  font-weight:700;
}
.pj-chain-label{
  font-family:'Playfair Display',serif;
  font-size:1.1rem;
  color:#2c1810;
}
.pj-chain-note{
  font-size:.82rem;
  line-height:1.5;
  color:#5a4638;
  margin:0;
}
.pj-chain-arrow{
  align-self:center;
  font-size:1.2rem;
  color:rgba(211,47,47,.75);
  font-weight:700;
}

/* ── Poles (two-column "los dos polos") ──────────────────────── */
.pj-poles{
  width:100%;
  max-width:620px;
  text-align:center;
  background:linear-gradient(180deg,rgba(44,24,16,.06) 0%,rgba(211,47,47,.08) 100%);
  border:1.5px dashed rgba(211,47,47,.5);
  border-radius:10px;
  padding:22px 24px 24px;
}
.pj-poles-eyebrow{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand-red,#d32f2f);
  font-weight:800;
  margin:0 0 .6rem;
}
.pj-poles-text{
  font-size:.92rem;
  line-height:1.6;
  color:#4a382c;
  margin:0 0 1rem;
  font-style:italic;
}
.pj-poles-text strong{ color:#8b2818; font-style:normal; }
.pj-poles-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.pj-pole{
  background:#fffdf7;
  border:1px solid rgba(44,24,16,.2);
  border-radius:6px;
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.pj-pole-label{
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  color:#2c1810;
}
.pj-pole-sub{
  font-size:.76rem;
  color:#6a5648;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.pj-pole--highlight{
  background:linear-gradient(180deg,#fff8e1 0%,#ffe8a3 100%);
  border-color:#d32f2f;
  border-width:2px;
}

/* ── End (closing line, no arrow after) ──────────────────────── */
.pj-end{
  max-width:620px;
  text-align:center;
  padding:24px 20px 0;
}
.pj-end-label{
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-size:1.4rem;
  color:#8b2818;
  margin:0 0 .6rem;
}
.pj-end-text{
  font-size:.95rem;
  line-height:1.7;
  color:#4a382c;
  margin:0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:720px){
  .spice-pimenton-journey{ padding:64px 0 68px; }
  .pj-connector{ height:36px; }
  .pj-node{ padding:16px 18px; }
  .pj-node-label{ font-size:1.2rem; }
  .pj-fan-grid[data-count="5"]{ grid-template-columns:repeat(2,1fr); }
  .pj-fan-grid[data-count="6"]{ grid-template-columns:repeat(2,1fr); }
  .pj-fan-grid[data-count="9"]{ grid-template-columns:repeat(2,1fr); }
  .pj-chain-row{ flex-direction:column; align-items:stretch; }
  .pj-chain-step{ max-width:none; }
  .pj-chain-arrow{ transform:rotate(90deg); }
  .pj-poles-grid{ grid-template-columns:1fr; }
}

/* =====================================================================
   v18 · PIMENTÓN PURPOSE — "Qué hace" + "Cuándo usarlo" side-by-side
   Reemplazo del layout plano anterior (whatItDoes / whenToUse en solo).
   Dos columnas editoriales con tipografía viva.
   ===================================================================== */
.spice-pimenton-purpose{
  padding:72px 0 68px;
  background:rgba(210,190,160,.32);
  box-shadow:inset 0 1px 0 rgba(44,24,16,.06);
}
.spice-pimenton-purpose-inner{ max-width:1180px; }
.spice-pimenton-purpose-header{
  text-align:center;
  max-width:720px;
  margin:0 auto 40px;
}
.spice-pimenton-purpose-header h3{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.7rem,2.6vw,2.2rem);
  color:#2c1810;
  margin:.3rem 0 0;
  font-weight:700;
  line-height:1.2;
}
.pp-columns{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:40px;
  align-items:flex-start;
}
.pp-col{
  background:#fffdf7;
  border:1px solid rgba(44,24,16,.14);
  border-radius:10px;
  padding:28px 30px 30px;
  position:relative;
}
.pp-col--what{ border-top:4px solid var(--brand-red,#d32f2f); }
.pp-col--when{ border-top:4px solid var(--brand-yellow,#fbc02d); }
.pp-col-kicker{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--brand-red,#d32f2f);
  margin:0 0 1rem;
}
.pp-col--when .pp-col-kicker{ color:#8b6e00; }
.pp-lead{
  font-size:.96rem;
  line-height:1.65;
  color:#4a382c;
  margin:0 0 1.2rem;
}
.pp-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.pp-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px dashed rgba(44,24,16,.12);
}
.pp-item:last-child{ border-bottom:none; padding-bottom:0; }
.pp-item-icon{
  flex:0 0 auto;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  font-size:1.1rem;
  color:var(--brand-red,#d32f2f);
  background:rgba(211,47,47,.08);
  border-radius:50%;
  font-weight:700;
}
.pp-item-body{ flex:1 1 auto; }
.pp-item-title{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  font-weight:700;
  color:#2c1810;
  margin-bottom:.2rem;
  line-height:1.25;
}
.pp-item-desc{
  font-size:.9rem;
  line-height:1.6;
  color:#5a4638;
  margin:0;
}
.pp-item-desc em{ color:#8b4513; }
.pp-chips{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pp-chip{
  background:rgba(251,192,45,.08);
  border-left:3px solid rgba(251,192,45,.7);
  border-radius:0 6px 6px 0;
  padding:10px 14px;
}
.pp-chip-title{
  font-family:'Playfair Display',serif;
  font-size:.98rem;
  color:#2c1810;
  display:block;
  margin-bottom:.15rem;
}
.pp-chip-desc{
  font-size:.85rem;
  line-height:1.5;
  color:#5a4638;
}
.pp-cta{
  margin:1.2rem 0 0;
  padding-top:1rem;
  border-top:1px solid rgba(44,24,16,.1);
  font-size:.88rem;
  color:#5a4638;
}
@media(max-width:820px){
  .pp-columns{ grid-template-columns:1fr; gap:24px; }
  .spice-pimenton-purpose{ padding:56px 0 48px; }
  .pp-col{ padding:22px 22px 24px; }
}

/* ── v18 P4 — Pimentón Purpose prose variant ──────────────────────
   Two-column prose (no icons, no chips, no boxes — solo bold inline).
   Light bg max-width 1100px, full-width closing quote underneath. */
.spice-pimenton-purpose .spice-pimenton-purpose-inner{ max-width:1100px; }
.pp-columns--prose{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:flex-start;
}
.pp-columns--prose .pp-col{
  background:transparent;
  border:none;
  border-top:none;
  padding:0;
}
.pp-columns--prose .pp-col-kicker{
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:800;
  margin:0 0 1.4rem;
  padding-bottom:.7rem;
  border-bottom:1px solid rgba(44,24,16,.18);
}
.pp-columns--prose .pp-col--what .pp-col-kicker{ color:#b02a1a; }
.pp-columns--prose .pp-col--when .pp-col-kicker{ color:#8b6e00; }
.pp-prose{
  font-size:1rem;
  line-height:1.7;
  color:#3a2a1e;
  margin:0 0 1.3rem;
}
.pp-prose:last-child{ margin-bottom:0; }
.pp-prose-title{
  font-family:'Playfair Display', serif;
  font-weight:700;
  color:#2c1810;
  font-size:1.05rem;
  margin-right:.25rem;
}
.pp-prose em{ color:#8b4513; font-style:italic; }
.pp-closer{
  margin:56px auto 0;
  max-width:860px;
  padding:36px 32px 0;
  text-align:center;
  border-top:1px solid rgba(176,42,26,.22);
}
.pp-closer-quote{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:clamp(1.15rem, 2vw, 1.4rem);
  line-height:1.55;
  color:#2c1810;
  margin:0;
}
@media(max-width:820px){
  .pp-columns--prose{ grid-template-columns:1fr; gap:36px; }
  .pp-closer{ margin-top:36px; padding:28px 16px 0; }
}

/* ── v18 P3 — pj-pole-note (Espinardo / Hungría notes) ──────────── */
.pj-pole-note{
  font-size:.92rem;
  line-height:1.55;
  color:#f5e8d2;
  margin:.8rem 0 0;
  padding-top:.7rem;
  border-top:1px solid rgba(245,232,210,.15);
}
.pj-pole-note strong{ color:#fbc02d; font-weight:700; }
.pj-pole-note em{ color:#f0d4a8; font-style:italic; }
.pj-pole--highlight .pj-pole-note{
  border-top-color:rgba(251,192,45,.3);
}

/* Allow HTML inside fan leaf notes (1932 kilos data) */
.pj-leaf-note strong{ color:#fbc02d; font-weight:700; }
.pj-leaf-note em{ color:#f0d4a8; font-style:italic; }

/* ── v18 P6 — Mural Coda ─────────────────────────────────────────── */
.mural-coda{
  max-width:680px;
  margin:64px auto 48px;
  padding:48px 24px 48px;
  border-top:1px solid rgba(245,232,210,.18);
  border-bottom:1px solid rgba(245,232,210,.18);
  text-align:center;
}
.mural-coda-para{
  font-family:'Playfair Display', serif;
  font-size:1.05rem;
  line-height:1.8;
  color:rgba(240,230,210,.8);
  margin:0;
}
.mural-coda-pivot{
  font-family:'Playfair Display', serif;
  font-size:clamp(2rem, 3.6vw, 2.6rem);
  font-weight:800;
  color:#fbc02d;
  margin:48px 0;
  letter-spacing:.01em;
  line-height:1.2;
}
.mural-coda-finale{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.mural-coda-finale li{
  font-family:'Playfair Display', serif;
  line-height:1.5;
}
.mural-coda-finale li:nth-child(1){
  font-size:1rem;
  color:rgba(240,230,210,.5);
}
.mural-coda-finale li:nth-child(2){
  font-size:1rem;
  color:rgba(240,230,210,.5);
}
.mural-coda-finale li:nth-child(3){
  font-size:clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight:700;
  color:#fff8e8;
  margin-top:.5rem;
}
@media(max-width:720px){
  .mural-coda{ padding:36px 16px 36px; margin:48px auto 36px; }
  .mural-coda-pivot{ margin:36px 0; }
}

/* =====================================================================
   PIMENTÓN TREE — Árbol de dispersión geográfica (v19)
   SVG interactivo con panel lateral. Museum-grade, sobrio.
   ===================================================================== */
/* ── Pimentón Tree v5: 1800px canvas, título, fills sólidos, píldoras ────── */

/* Tree wrap: breakout del .container (1120px) para usar hasta 1800px */
.pt-tree-wrap{
  position:relative;
  width:calc(100vw - 32px);
  max-width:1800px;
  margin:48px auto 32px;
  /* Centra el bloque rompiendo los límites del padre (1120px .container) */
  left:50%;
  transform:translateX(-50%);
  padding:0 16px;
}

/* ── Título del árbol (v5) ── */
.pt-tree-header{
  text-align:center;
  margin-bottom:32px;
}
.pt-tree-eyebrow{
  font-family:'Source Sans Pro','Segoe UI',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(212,160,86,.7);
  margin:0 0 10px;
}
.pt-tree-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(26px,4vw,40px);
  font-weight:700;
  color:#F5F0E8;
  margin:0 0 12px;
  line-height:1.1;
}
.pt-tree-subtitle{
  font-family:'Source Sans Pro','Segoe UI',sans-serif;
  font-size:15px;
  color:rgba(245,232,210,.65);
  margin:0;
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.5;
}

/* v11: "Ver árbol completo" button */
#pt-expand-all-btn{
  display:inline-block;
  margin-top:16px;
  font-family:'Source Sans Pro','Segoe UI',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(212,160,86,.6);
  background:none;
  border:1px solid rgba(212,160,86,.28);
  border-radius:4px;
  padding:7px 18px;
  cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
#pt-expand-all-btn:hover{
  color:rgba(212,160,86,1);
  border-color:rgba(212,160,86,.65);
  background:rgba(212,160,86,.07);
}

/* Hover hint (desktop only, disappears on first hover) */
.pt-hint{
  text-align:center;
  font-family:'Source Sans Pro','Segoe UI',sans-serif;
  font-size:.82rem;
  color:rgba(212,160,86,.5);
  letter-spacing:.04em;
  margin:0 auto 20px;
  transition:opacity .4s;
}

/* SVG wrap */
.pt-svg-wrap{ position:relative; }
.pt-svg{
  width:100%;
  height:auto;
  display:block;
}

/* SVG paths — base */
.pt-path{
  fill:none;
  stroke:rgba(212,160,86,.28);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:0;
}
/* Highlighted path (Category A/B connections) */
.pt-path--hl{
  stroke:rgba(212,160,86,.5);
  stroke-width:2;
}
/* Arrow path: same draw animation, just adds marker-end in HTML */
.pt-path--arrow{
  /* marker-end set via HTML attribute; CSS only adjusts width */
  stroke-width:1.6;
}
.pt-path--hl.pt-path--arrow{ stroke-width:2.2; }
/* Dashed path (Category C — industrial, no animation draw) */
.pt-path--dashed{
  stroke:rgba(212,160,86,.2);
  stroke-width:1.2;
  stroke-dasharray:6 5;
  stroke-dashoffset:0;
  opacity:0;
}
/* Lit path (active hover) */
.pt-path--lit{
  stroke:rgba(251,192,45,.85) !important;
  stroke-width:2.5 !important;
  transition:stroke .3s, stroke-width .3s;
}
@keyframes ptDraw{
  from{ stroke-dashoffset:1; opacity:0; }
  to{ stroke-dashoffset:0; opacity:1; }
}
@keyframes ptFadeInPath{
  to{ opacity:1; }
}
/* v11: progressive reveal — paths animate only when .pt-path--live is added */
.pt-path--live{
  animation:ptDraw .65s ease-out forwards;
}
.pt-path--dashed.pt-path--live{
  animation:ptFadeInPath .65s ease-out forwards;
}
/* Arrowhead marker fill */
.pt-arrow-head{
  fill:rgba(212,160,86,.4);
}

/* SVG nodes — base */
.pt-node rect{
  fill:rgba(20,9,6,.75);
  stroke:rgba(212,160,86,.3);
  stroke-width:1;
  transition:fill .25s, stroke .25s, filter .25s;
}
/* Origin: América & Colón */
.pt-node--origin rect{
  fill:rgba(80,18,10,.55);
  stroke:rgba(251,192,45,.5);
  stroke-width:1.5;
}
/* Category A — Las tres grandes escuelas (rojo profundo, borde dorado) */
.pt-node--cat-a rect{
  fill:rgba(120,25,18,.5);
  stroke:rgba(212,160,86,.6);
  stroke-width:1.5;
}
/* Category B — Culturas locales (oscuro, borde crema) */
.pt-node--cat-b rect{
  fill:rgba(30,14,8,.7);
  stroke:rgba(245,232,210,.4);
  stroke-width:1;
}
/* Category C — Industriales modernos (muy oscuro, borde punteado, opaco) */
.pt-node--cat-c{
  opacity:0.65;
}
.pt-node--cat-c rect{
  fill:rgba(20,9,6,.6);
  stroke:rgba(212,160,86,.25);
  stroke-width:1;
  stroke-dasharray:3 3;
}
/* Hero nodes (El Salto Flores + 51) */
.pt-node--hero rect{
  fill:rgba(160,35,20,.65);
  stroke:rgba(251,192,45,.75);
  stroke-width:2;
}
/* Active (hovered) */
.pt-node--active rect{
  fill:rgba(185,45,28,.75) !important;
  stroke:rgba(251,192,45,.95) !important;
  stroke-width:2 !important;
  stroke-dasharray:none !important;
  filter:drop-shadow(0 0 10px rgba(251,192,45,.28));
}
.pt-node--active{ opacity:1 !important; }
.pt-node-label{
  fill:#f5e8d2;
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;
  pointer-events:none;
}
.pt-node-sub{
  fill:rgba(245,232,210,.5);
  font-family:'Source Sans Pro','Segoe UI',sans-serif;
  pointer-events:none;
}
/* Category C labels dimmed */
.pt-node--cat-c .pt-node-label{ fill:rgba(245,232,210,.65); }
.pt-node--cat-c .pt-node-sub  { fill:rgba(245,232,210,.4); }

/* ── Product node halos (anillo exterior) ── */
.pt-node-halo{
  fill:none;
  stroke-width:2;
  pointer-events:none;
  transition:opacity 0.2s;
}
.pt-node--cat-a .pt-node-halo{ stroke:rgba(160,30,30,.55); }
.pt-node--cat-b .pt-node-halo{ stroke:rgba(180,100,50,.5); }
.pt-node--cat-c .pt-node-halo{ stroke:rgba(160,150,140,.38); stroke-dasharray:4 3; }
.pt-node--hero  .pt-node-halo{ stroke:rgba(212,160,86,.7); }
.pt-node--active .pt-node-halo{ opacity:0; }

/* ── Product nodes (v5): fill sólido según categoría ── */
/* Cat A — Pimentón de La Vera, Pimentón Murciano, Paprika Húngara */
.pt-node--product.pt-node--cat-a .pt-node-rect{
  fill:#6B1515;
  stroke:#A02020;
  stroke-width:1.5;
}
/* Cat B — Pimentão Português, Pimentón Kashmiri */
.pt-node--product.pt-node--cat-b .pt-node-rect{
  fill:#7A4A2A;
  stroke:#9A6A4A;
  stroke-width:1.5;
}
/* Cat C — Pimentón Chino, Pimentón Peruano */
.pt-node--product.pt-node--cat-c .pt-node-rect{
  fill:#3A3A3A;
  stroke:#555555;
  stroke-width:1;
  stroke-dasharray:4 3;
}
/* Texto en nodos producto — color crema o gris según cat */
.pt-node--product.pt-node--cat-a .pt-node-label,
.pt-node--product.pt-node--cat-a .pt-node-sub,
.pt-node--product.pt-node--cat-b .pt-node-label,
.pt-node--product.pt-node--cat-b .pt-node-sub{ fill:#F5F0E8; }
.pt-node--product.pt-node--cat-c .pt-node-label,
.pt-node--product.pt-node--cat-c .pt-node-sub{ fill:#AAAAAA; }
/* Cat C product: opacidad normal (no dimmear como nodos geográficos C) */
.pt-node--cat-c.pt-node--product{ opacity:1; }

/* v11-b: progressive disclosure */
.pt-node--closed{ display:none; }
/* Previous levels dim when a new level opens */
.pt-node--prev{
  opacity:0.52 !important;
  transition:opacity .5s;
}
/* Hover still brightens dimmed nodes */
.pt-node--prev.pt-node--active{ opacity:1 !important; }

/* v11-b: SVG level indicator (animated arrow below each revealed level) */
.pt-invite-text{
  fill:rgba(212,160,86,.55);
  font-family:'Source Sans Pro','Segoe UI',sans-serif;
  font-size:11px;
  letter-spacing:.08em;
  pointer-events:none;
}
.pt-invite-arrow-path{
  fill:none;
  stroke:rgba(212,160,86,.48);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* Ottoman Empire path label */
.pt-ottoman-label{
  font-family:'Source Sans Pro','Segoe UI',sans-serif;
  font-size:8.5px;
  fill:rgba(212,160,86,.42);
  letter-spacing:.04em;
  pointer-events:none;
}

/* ── Pill badge PIMENTÓN / PAPRIKA ── */
.pt-node-pill-bg{
  fill:rgba(0,0,0,0.28);
  pointer-events:none;
}
.pt-node-pill-text{
  font-family:'Source Sans Pro','Segoe UI',sans-serif;
  font-size:7px;
  font-weight:700;
  letter-spacing:1.2px;
  fill:rgba(245,232,210,0.85);
  pointer-events:none;
}
.pt-node--product.pt-node--cat-c .pt-node-pill-text{ fill:rgba(180,180,180,0.8); }

/* ── Popover (reemplaza el panel lateral) ── */
.pt-popover{
  position:absolute;
  z-index:10;
  width:320px;
  max-width:calc(100vw - 48px);
  background:#F5F0E8;
  color:#2a1a0e;
  border:1px solid rgba(212,160,86,.35);
  border-radius:8px;
  padding:20px 22px;
  box-shadow:0 8px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
  pointer-events:none;
  display:none !important;
  visibility:hidden;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .2s ease-out, transform .2s ease-out;
}
.pt-popover--visible{
  display:block !important;
  visibility:visible;
  pointer-events:auto;
  opacity:1;
  transform:translateY(0);
}
.pt-pop-eyebrow{
  font-family:'Source Sans Pro','Segoe UI',sans-serif;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#a67c52;
  margin:0 0 .4rem;
}
.pt-pop-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.25rem;
  line-height:1.25;
  color:#2a1a0e;
  margin:0 0 .7rem;
}
.pt-pop-text{
  font-family:'Source Sans Pro','Segoe UI',sans-serif;
  font-size:.92rem;
  line-height:1.65;
  color:#3d2a1a;
  margin:0;
}
.pt-pop-text em{ font-style:italic; color:#6b4c30; }

/* Map note below SVG */
.pt-map-note{
  font-family:'Source Sans Pro','Segoe UI',sans-serif;
  font-size:.78rem;
  color:rgba(245,232,210,.4);
  text-align:center;
  margin:14px auto 0;
  max-width:580px;
  font-style:italic;
}

/* ── Mobile tree legacy (acordeón — reemplazado por pt-timeline en v7) ── */
.pt-mobile-tree{ display:none; }

/* ── Mobile timeline (v7) — visible solo en mobile ── */
.pt-timeline{ display:none; }
.pt-tl-open-btn{
  display:none;
  width:100%;
  margin:8px 0 24px;
  padding:14px 24px;
  background:linear-gradient(135deg,#8b1a1a,#c0392b);
  color:#f5e8d2;
  font-family:'Playfair Display',Georgia,serif;
  font-size:17px;
  font-style:italic;
  letter-spacing:0.3px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.pt-tl-card{
  background:rgba(20,8,5,.65);
  border:1px solid rgba(212,160,86,.2);
  border-radius:8px;
  padding:22px 18px 18px;
}
.pt-tl-card--hero{
  background:rgba(38,14,8,.72);
  border-color:rgba(212,160,86,.5);
  border-width:2px;
}
.pt-tl-card--final{
  background:rgba(50,10,10,.8);
  border-color:rgba(160,30,30,.65);
  border-width:2px;
}
.pt-tl-head{ margin-bottom:12px; }
.pt-tl-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:17px;
  font-weight:700;
  color:#F5F0E8;
  margin:0 0 4px;
  line-height:1.2;
}
.pt-tl-card--hero .pt-tl-title{
  font-size:20px;
  color:#D4A056;
}
.pt-tl-card--final .pt-tl-title{
  font-size:22px;
  color:#F5F0E8;
}
.pt-tl-sub{
  font-family:'Source Sans Pro','Segoe UI',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.8px;
  text-transform:uppercase;
  color:rgba(212,160,86,.68);
  margin:0;
}
.pt-tl-text{
  font-family:'Source Sans Pro','Segoe UI',sans-serif;
  font-size:14px;
  line-height:1.58;
  color:rgba(245,232,210,.78);
  margin:0;
}
/* Conectores entre tarjetas */
.pt-tl-conn{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:2px 0;
  cursor:pointer;
  transition:opacity .2s;
}
.pt-tl-conn:hover .pt-tl-conn-arrow{ color:rgba(212,160,86,.85); }
.pt-tl-conn--used{
  cursor:default;
  opacity:0.3;
  pointer-events:none;
}
.pt-tl-conn-line{
  width:1px;
  height:20px;
  background:rgba(212,160,86,.28);
}
.pt-tl-conn-arrow{
  width:12px;
  height:14px;
  color:rgba(212,160,86,.38);
  transition:color .2s;
}
/* v11: collapsed timeline cards */
/* pt-tl-card--collapsed removed: all cards now visible once tree is opened */

.pt-mob-item{
  width:100%;
  max-width:340px;
}
.pt-mob-node{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:rgba(20,9,6,.75);
  border:1px solid rgba(212,160,86,.3);
  border-radius:6px;
  padding:12px 20px;
  cursor:pointer;
  text-align:center;
  transition:border-color .25s, background .25s;
}
.pt-mob-node--active{
  border-color:rgba(251,192,45,.85);
  background:rgba(180,42,26,.45);
  border-radius:6px 6px 0 0;
}
.pt-mob-node--hero{
  border-color:rgba(251,192,45,.55);
  border-width:2px;
  padding:14px 24px;
}
/* Mobile category variants */
.pt-mob-node--cat-a{
  border-color:rgba(212,160,86,.55);
  background:rgba(120,25,18,.35);
}
.pt-mob-node--cat-b{
  border-color:rgba(245,232,210,.3);
}
.pt-mob-label{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1rem;
  font-weight:700;
  color:#f5e8d2;
}
.pt-mob-sub{
  font-family:'Source Sans Pro','Segoe UI',sans-serif;
  font-size:.8rem;
  color:rgba(245,232,210,.55);
  margin-top:2px;
}
.pt-mob-line{
  width:2px;
  height:20px;
  background:rgba(212,160,86,.3);
}

/* Accordion body: collapsed by default, opens on tap */
.pt-mob-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  background:rgba(20,9,6,.55);
  border:1px solid rgba(212,160,86,.15);
  border-top:none;
  border-radius:0 0 6px 6px;
}
.pt-mob-item--open .pt-mob-body{
  max-height:400px;
}
.pt-mob-body-text{
  font-family:'Source Sans Pro','Segoe UI',sans-serif;
  font-size:.92rem;
  line-height:1.65;
  color:rgba(245,232,210,.8);
  padding:14px 18px 18px;
  margin:0;
}
.pt-mob-body-text em{ font-style:italic; color:rgba(245,232,210,.65); }

/* ── Responsive: mobile (<900px) ── */
@media(max-width:899px){
  .pt-tree-wrap{ margin:32px auto 20px; }
  .pt-svg-wrap{ display:none; }
  .pt-hint{ display:none; }
  .pt-popover{ display:none !important; }
  .pt-tree-header{ margin-bottom:20px; }
  /* v7: mostrar timeline, ocultar acordeón legacy */
  .pt-mobile-tree{ display:none; }
  .pt-timeline{ display:block; }
  /* v12: botón "Abrir el árbol" */
  .pt-tl-open-btn{ display:block; }
}

/* =====================================================================
   v20 · JOURNEY ADDITIONS — pimentones, branches, argentina, aside,
   travel flag (flecha vs línea)
   ===================================================================== */

/* ── Travel flag on fan leaves: flecha (↗) vs línea (│) ──────── */
.pj-leaf-connector-icon{
  display:block;
  text-align:center;
  font-size:1rem;
  line-height:1;
  height:20px;
  color:rgba(211,47,47,.55);
  margin-bottom:2px;
}
.pj-leaf--travel .pj-leaf-connector-icon{
  color:var(--brand-red,#d32f2f);
  font-weight:700;
}
.pj-leaf--dual .pj-leaf-connector-icon::after{
  content:' ×2';
  font-size:.6rem;
  vertical-align:super;
  color:#8b6e00;
  font-weight:700;
}

/* ── Pimentones: tres tarjetas principales + secundarios ─────── */
.pj-pimentones{ width:100%; }
.pj-pim-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:20px;
}
.pj-pim-card{
  background:#fffdf7;
  border:1.5px solid rgba(44,24,16,.18);
  border-top:4px solid rgba(211,47,47,.45);
  border-radius:10px;
  padding:20px 18px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pj-pim-card--highlight{
  background:linear-gradient(180deg,#fff8e1 0%,#ffecb3 100%);
  border-top-color:#d32f2f;
  border-top-width:5px;
  box-shadow:0 8px 24px rgba(211,47,47,.12);
}
.pj-pim-card-header{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.pj-pim-card-name{
  font-family:'Playfair Display',serif;
  font-size:1.15rem;
  font-weight:700;
  color:#2c1810;
  margin:0;
  line-height:1.2;
}
.pj-pim-card-sub{
  font-size:.76rem;
  color:#6a5648;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.pj-pim-card-badge{
  display:inline-block;
  align-self:flex-start;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fffdf7;
  background:var(--brand-red,#d32f2f);
  padding:3px 10px;
  border-radius:3px;
  margin-top:4px;
}
.pj-pim-card--highlight .pj-pim-card-badge{
  background:#8b2818;
}
.pj-pim-card-details{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pj-pim-row{
  display:flex;
  gap:8px;
  font-size:.84rem;
  line-height:1.5;
}
.pj-pim-row dt{
  flex:0 0 auto;
  min-width:72px;
  font-weight:700;
  color:var(--brand-red,#d32f2f);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding-top:2px;
}
.pj-pim-row dd{
  margin:0;
  color:#4a382c;
}

/* Secondary pimentones (small, muted) */
.pj-pim-secondary{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
}
.pj-pim-sec-eyebrow{
  width:100%;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8a7a6c;
  font-weight:700;
  margin:0 0 4px;
}
.pj-pim-sec{
  background:rgba(44,24,16,.04);
  border:1px solid rgba(44,24,16,.12);
  border-radius:6px;
  padding:8px 12px;
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1 1 180px;
}
.pj-pim-sec-label{
  font-size:.88rem;
  color:#5a4638;
}
.pj-pim-sec-note{
  font-size:.76rem;
  color:#8a7a6c;
  line-height:1.4;
}

/* ── Branches: dos columnas paralelas ────────────────────────── */
.pj-branches{ width:100%; }
.pj-br-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
}
.pj-br-col{
  background:#fffdf7;
  border:1.5px solid rgba(44,24,16,.16);
  border-radius:10px;
  padding:22px 20px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pj-br-col--right.pj-br-col--highlight{
  background:linear-gradient(180deg,#2c1810 0%,#3b1f12 100%);
  color:#f7ecd0;
  border-color:#fbc02d;
  border-width:2px;
}
.pj-br-col-heading{
  font-family:'Playfair Display',serif;
  font-size:1.2rem;
  font-weight:700;
  margin:0;
  color:#2c1810;
}
.pj-br-col--highlight .pj-br-col-heading{ color:#fbc02d; }
.pj-br-col-sub{
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--brand-red,#d32f2f);
  font-weight:700;
}
.pj-br-col--highlight .pj-br-col-sub{ color:rgba(251,192,45,.75); }
.pj-br-col-text{
  font-size:.88rem;
  line-height:1.55;
  color:#5a4638;
  margin:0;
  font-style:italic;
}
.pj-br-col--highlight .pj-br-col-text{ color:rgba(240,230,210,.85); }
.pj-br-dests{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}
.pj-br-dest{
  display:inline-flex;
  flex-direction:column;
  background:rgba(44,24,16,.06);
  border:1px solid rgba(44,24,16,.12);
  border-radius:4px;
  padding:5px 10px;
  font-size:.8rem;
  color:#4a382c;
  line-height:1.35;
}
.pj-br-col--highlight .pj-br-dest{
  background:rgba(255,255,255,.08);
  border-color:rgba(251,192,45,.25);
  color:#f0e6d2;
}
.pj-br-dest--hl{
  border-color:var(--brand-red,#d32f2f);
  font-weight:600;
}
.pj-br-col--highlight .pj-br-dest--hl{
  border-color:#fbc02d;
  background:rgba(251,192,45,.15);
  color:#fbc02d;
}
.pj-br-dest-note{
  font-style:italic;
  font-size:.72rem;
  color:#6a5648;
  font-weight:400;
}
.pj-br-col--highlight .pj-br-dest-note{ color:rgba(240,230,210,.7); }

/* ── Argentina fork (51 + Calchaquíes) ───────────────────────── */
.pj-argentina{ width:100%; max-width:680px; }
.pj-ar-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px;
}
.pj-ar-card{
  background:#fffdf7;
  border:1.5px solid rgba(44,24,16,.16);
  border-radius:10px;
  padding:20px 18px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pj-ar-card--highlight{
  background:linear-gradient(180deg,#fff8e1 0%,#ffe8a3 100%);
  border-color:#d32f2f;
  border-width:2px;
  border-top:5px solid #d32f2f;
}
.pj-ar-card-label{
  font-family:'Playfair Display',serif;
  font-size:1.3rem;
  font-weight:700;
  color:#2c1810;
  margin:0;
}
.pj-ar-card--highlight .pj-ar-card-label{ color:#8b2818; }
.pj-ar-card-sub{
  font-size:.74rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand-red,#d32f2f);
  font-weight:700;
}
.pj-ar-card-text{
  font-size:.88rem;
  line-height:1.55;
  color:#4a382c;
  margin:0;
}

/* ── Aside (Perú + China — tono menor, menos protagonismo) ──── */
.pj-aside{
  width:100%;
  max-width:740px;
  background:rgba(44,24,16,.03);
  border:1px dashed rgba(44,24,16,.2);
  border-radius:10px;
  padding:24px 22px 26px;
}
.pj-aside-header{ text-align:center; margin-bottom:16px; }
.pj-aside-eyebrow{
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:#8a7a6c;
  margin:0 0 .4rem;
}
.pj-aside-text{
  font-size:.86rem;
  line-height:1.55;
  color:#6a5648;
  margin:0;
  font-style:italic;
}
.pj-aside-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.pj-aside-item{
  background:#fffdf7;
  border:1px solid rgba(44,24,16,.12);
  border-radius:6px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pj-aside-item-label{
  font-family:'Playfair Display',serif;
  font-size:1rem;
  font-weight:700;
  color:#5a4638;
  margin:0;
}
.pj-aside-item-note{
  font-size:.82rem;
  line-height:1.55;
  color:#6a5648;
  margin:0;
}
.pj-aside-item-note em{ color:#8b4513; }
/* Peru: sin flecha — indicador visual "siempre estuvo ahí" */
.pj-aside-item--america::before{
  content:'Siempre estuvo en América';
  display:block;
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8a7a6c;
  font-weight:700;
  margin-bottom:2px;
}
/* China: dual entry */
.pj-aside-item--dual::before{
  content:'Llegó por dos vías';
  display:block;
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8a7a6c;
  font-weight:700;
  margin-bottom:2px;
}

/* ── Responsive additions (v20) ──────────────────────────────── */
@media(max-width:720px){
  .pj-pim-grid{ grid-template-columns:1fr; }
  .pj-br-grid{ grid-template-columns:1fr; }
  .pj-ar-grid{ grid-template-columns:1fr; }
  .pj-aside-grid{ grid-template-columns:1fr; }
  .pj-pim-card{ padding:16px 14px 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   CATÁLOGO DE PRODUCTOS — route-productos (v21)
   ═══════════════════════════════════════════════════════════════ */

/* Route wrapper — fondo oscuro para tapar la madera del body */
#route-productos{
  background:#0e0806;
}

/* Hero */
.cat-hero{
  padding:clamp(60px,10vw,100px) 0 clamp(40px,6vw,64px);
  text-align:center;
  background:linear-gradient(170deg,#1a1008 0%,#2d1a0a 60%,#0e0806 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cat-kicker{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand-yellow);
  margin:0 0 12px;
}
#cat-title{
  font-family:var(--ff-serif);
  font-size:clamp(2rem,5vw,3.2rem);
  font-weight:700;
  color:#fff;
  margin:0 0 16px;
  line-height:1.15;
}
.cat-sub{
  max-width:580px;
  margin:0 auto 32px;
  font-size:clamp(.95rem,1.8vw,1.1rem);
  color:rgba(255,255,255,.7);
  line-height:1.55;
}
.cat-hero-ctas{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Body */
.cat-body{
  padding:0;
}

/* Sections — full-bleed con tono por categoría sobre textura */
.cat-section{
  /* Full-bleed: romper fuera del container */
  margin-left:calc(-50vw + 50%);
  margin-right:calc(-50vw + 50%);
  padding:clamp(48px,7vw,72px) calc(50vw - 50%);
  border-bottom:1px solid rgba(255,255,255,.04);
}
/* Especias — rojo pimentón sobre madera */
#cat-especias{
  background:
    linear-gradient(170deg,rgba(40,18,12,.92) 0%,rgba(55,22,16,.88) 40%,rgba(40,18,12,.92) 100%),
    url("../images/fotos/img-2955.jpg");
  background-size:100% 100%,560px auto;
}
/* Blends — verde oliva herbáceo sobre madera */
#cat-blends{
  background:
    linear-gradient(170deg,rgba(20,28,14,.92) 0%,rgba(30,38,18,.88) 40%,rgba(20,28,14,.92) 100%),
    url("../images/fotos/img-2955.jpg");
  background-size:100% 100%,560px auto;
}
/* Repostería — ámbar cálido sobre madera */
#cat-reposteria{
  background:
    linear-gradient(170deg,rgba(35,28,14,.92) 0%,rgba(48,35,16,.88) 40%,rgba(35,28,14,.92) 100%),
    url("../images/fotos/img-2955.jpg");
  background-size:100% 100%,560px auto;
}
/* Industrial — neutro profesional sobre madera */
#cat-industrial{
  background:
    linear-gradient(170deg,rgba(18,18,16,.93) 0%,rgba(26,24,20,.90) 40%,rgba(18,18,16,.93) 100%),
    url("../images/fotos/img-2955.jpg");
  background-size:100% 100%,560px auto;
}
.cat-section-head{
  margin-bottom:32px;
  display:flex;
  align-items:baseline;
  gap:16px;
  flex-wrap:wrap;
}
.cat-section-head h2{
  font-family:var(--ff-serif);
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:700;
  color:#fff;
  margin:0;
}
/* Acento por sección — línea inferior sutil */
#cat-especias .cat-section-head h2{ border-bottom:2px solid #6b2a2a; padding-bottom:6px; }
#cat-blends .cat-section-head h2{ border-bottom:2px solid #4a5a2a; padding-bottom:6px; }
#cat-reposteria .cat-section-head h2{ border-bottom:2px solid #7a5a2a; padding-bottom:6px; }
#cat-industrial .cat-section-head h2{ border-bottom:2px solid rgba(255,255,255,.15); padding-bottom:6px; }
.cat-section-sub{
  font-size:.95rem;
  color:rgba(255,255,255,.7);
  margin:0;
}

/* Grid */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:20px;
}

/* Card */
.cat-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.cat-card:nth-child(even){
  background:rgba(255,255,255,.06);
}
.cat-card:hover,
.cat-card:focus-visible{
  border-color:rgba(255,255,255,.20);
  transform:translateY(-3px);
  box-shadow:0 10px 32px rgba(0,0,0,.4);
  outline:none;
  background:rgba(255,255,255,.08);
}
/* Card border accent por sección en hover */
#cat-especias .cat-card:hover{ border-color:#6b2a2a; box-shadow:0 10px 32px rgba(107,42,42,.2); }
#cat-blends .cat-card:hover{ border-color:#4a5a2a; box-shadow:0 10px 32px rgba(74,90,42,.2); }
#cat-reposteria .cat-card:hover{ border-color:#7a5a2a; box-shadow:0 10px 32px rgba(122,90,42,.2); }
.cat-card[tabindex="0"]{ cursor:pointer; }

/* Card image — sobres flotan sin fondo */
.cat-card-img{
  background:transparent;
  padding:28px 16px 12px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:0;
  min-height:180px;
}
.cat-card-img img{
  max-height:160px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.55));
  transition:transform .3s ease;
}
.cat-card:hover .cat-card-img img{
  transform:scale(1.06) translateY(-4px);
}

/* Dual pack: sobre 25g + sobre 100g, mismo tamaño */
.cat-card-img--dual{
  gap:0;
  align-items:flex-end;
}
.cat-card-img--dual .cat-sob-sm{
  max-height:140px;
  margin-right:-18px;
  z-index:1;
  transform:rotate(-5deg);
  transition:transform .3s ease;
}
.cat-card-img--dual .cat-sob-lg{
  max-height:140px;
  z-index:2;
  transform:rotate(5deg);
  transition:transform .3s ease;
}
.cat-card:hover .cat-sob-sm{
  transform:rotate(-8deg) translateY(-4px);
}
.cat-card:hover .cat-sob-lg{
  transform:rotate(8deg) translateY(-4px);
}

/* Card info */
.cat-card-info{
  padding:16px 18px 20px;
}
.cat-card-info h3{
  font-size:.95rem;
  font-weight:700;
  color:#fff;
  margin:0 0 8px;
  line-height:1.3;
}

/* Size chips */
.cat-sizes{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}
.cat-sizes span{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:3px 8px;
  border-radius:4px;
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.85);
  white-space:nowrap;
}

/* Variants line */
.cat-variants{
  font-size:.78rem;
  color:rgba(255,255,255,.65);
  margin-bottom:8px;
  font-style:italic;
}

/* Bulk / formato mayor */
.cat-bulk{
  font-size:.72rem;
  color:rgba(255,255,255,.5);
  margin-top:4px;
  line-height:1.4;
}
.cat-bulk strong{
  color:rgba(255,255,255,.7);
  font-weight:600;
}

/* Enc link */
.cat-enc-link{
  font-size:.78rem;
  font-weight:600;
  color:rgba(255,255,255,.5);
  transition:color .2s;
}
.cat-card:hover .cat-enc-link{
  color:var(--brand-yellow);
}

/* ── Industrial / formato mayor ── */
.cat-ind-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}
.cat-ind-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-left:3px solid var(--cat-ind-accent,rgba(255,255,255,.15));
  border-radius:10px;
  transition:border-color .25s, background .25s;
}
.cat-ind-card:hover{
  background:rgba(255,255,255,.06);
  border-left-color:var(--brand-yellow);
}
.cat-ind-card-info{
  flex:1;
  min-width:0;
}
.cat-ind-card-name{
  font-size:.92rem;
  font-weight:700;
  color:#fff;
  margin:0 0 6px;
  line-height:1.3;
}
.cat-ind-card-cat{
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cat-ind-accent,rgba(255,255,255,.4));
  margin:0 0 8px;
}
.cat-ind-card .cat-sizes{
  margin-bottom:0;
}
.cat-ind-card .cat-sizes span{
  background:rgba(255,255,255,.14);
  color:rgba(255,255,255,.9);
  font-size:.75rem;
  padding:4px 10px;
}

/* Accent por categoría */
.cat-ind-card[data-cat="especias"]{ --cat-ind-accent:#8b3a3a; }
.cat-ind-card[data-cat="blends"]{ --cat-ind-accent:#6b6b2e; }
.cat-ind-card[data-cat="reposteria"]{ --cat-ind-accent:#7a5a3a; }

@media(max-width:600px){
  .cat-ind-grid{ grid-template-columns:1fr; }
}

/* ── B2B Block — full-bleed ── */
.cat-b2b{
  margin-left:calc(-50vw + 50%);
  margin-right:calc(-50vw + 50%);
  padding:0 calc(50vw - 50%);
  background:
    linear-gradient(135deg,rgba(26,16,8,.94) 0%,rgba(45,26,10,.90) 100%),
    url("../images/fotos/img-2955.jpg");
  background-size:100% 100%,560px auto;
  border-top:1px solid rgba(255,255,255,.06);
}
.cat-b2b-inner{
  padding:clamp(36px,5vw,56px) clamp(24px,4vw,48px);
}
.cat-b2b h2{
  font-family:var(--ff-serif);
  font-size:clamp(1.4rem,3vw,1.9rem);
  font-weight:700;
  color:#fff;
  margin:0 0 12px;
}
.cat-b2b-sub{
  font-size:clamp(.9rem,1.6vw,1.05rem);
  color:rgba(255,255,255,.6);
  line-height:1.55;
  max-width:640px;
  margin:0 0 32px;
}
.cat-b2b-points{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:24px;
  margin-bottom:36px;
}
.cat-b2b-point{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cat-b2b-point strong{
  font-size:.95rem;
  color:var(--brand-yellow);
  font-weight:700;
}
.cat-b2b-point span{
  font-size:.88rem;
  color:rgba(255,255,255,.55);
  line-height:1.5;
}
.cat-b2b-ctas{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* ── Responsive catálogo ── */
@media(max-width:600px){
  .cat-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
  .cat-card-img{
    padding:18px 10px 8px;
    min-height:130px;
  }
  .cat-card-img img{ max-height:120px; }
  .cat-card-info{ padding:12px 12px 16px; }
  .cat-card-info h3{ font-size:.85rem; }
  .cat-b2b-points{ grid-template-columns:1fr; }
}

/* =====================================================================
   FALLBACK — contenedores dinámicos vacíos durante carga
   ===================================================================== */
#spice-coverflow:empty,
#recipes-featured:empty,
#enc-grid:empty{
  min-height:300px;
  background:repeating-linear-gradient(
    90deg,
    transparent,
    transparent 200px,
    rgba(0,0,0,.03) 200px,
    rgba(0,0,0,.03) 220px
  );
  border-radius:8px;
}

/* =====================================================================
   SCROLL REVEAL — fade-in al entrar en viewport
   ===================================================================== */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}
/* No animar si el usuario prefiere movimiento reducido */
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =====================================================
   BOTÓN ZOOM ACCESIBILIDAD — recetas, solo mobile
   4 niveles progresivos
   ===================================================== */

/* Oculto en desktop */
.rp-zoom-btn{ display:none; }

@media(max-width:768px){

  .rp-zoom-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    bottom:22px;
    right:16px;
    z-index:900;
    min-width:62px;
    height:62px;
    padding:6px 10px;
    border-radius:16px;
    border:2px solid rgba(255,255,255,.25);
    background:rgba(30,20,14,.88);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:#fff;
    cursor:pointer;
    box-shadow:0 4px 20px rgba(0,0,0,.4);
    transition:transform .2s ease, background .2s ease, border-color .2s ease;
  }
  .rp-zoom-btn:active{
    transform:scale(.93);
  }
  .rp-zoom-btn.active{
    background:var(--brand-red,#ab0606);
    border-color:rgba(255,255,255,.45);
  }

  .rp-zoom-label{
    font-family:system-ui,-apple-system,sans-serif;
    font-weight:700;
    font-size:12px;
    line-height:1.25;
    text-align:center;
    letter-spacing:.02em;
    pointer-events:none;
    text-transform:uppercase;
  }

  /* Transición suave en textos */
  .rp-ing-list li,
  .rp-steps li,
  .rp-prose p,
  .rp-notes{
    transition:font-size .25s ease, line-height .25s ease, padding .25s ease;
  }

  /* ── Nivel 1: sutil (+15%) ── */
  #route-recipe.rp-zoom-1 .rp-ing-mobile .rp-ing-list li{
    font-size:1.1rem; line-height:1.5; padding:12px 0;
  }
  #route-recipe.rp-zoom-1 .rp-steps li{
    font-size:1.15rem; line-height:1.7;
  }
  #route-recipe.rp-zoom-1 .rp-prose p{
    font-size:1.1rem; line-height:1.75;
  }
  #route-recipe.rp-zoom-1 .rp-block [data-recipe="intro"] p:first-of-type{
    font-size:1.2rem;
  }
  #route-recipe.rp-zoom-1 .rp-notes{
    font-size:.95rem;
  }

  /* ── Nivel 2: cómodo (+30%) ── */
  #route-recipe.rp-zoom-2 .rp-ing-mobile .rp-ing-list li{
    font-size:1.25rem; line-height:1.55; padding:14px 0;
  }
  #route-recipe.rp-zoom-2 .rp-steps li{
    font-size:1.3rem; line-height:1.75;
  }
  #route-recipe.rp-zoom-2 .rp-prose p{
    font-size:1.25rem; line-height:1.75;
  }
  #route-recipe.rp-zoom-2 .rp-block [data-recipe="intro"] p:first-of-type{
    font-size:1.35rem;
  }
  #route-recipe.rp-zoom-2 .rp-notes{
    font-size:1.1rem;
  }

  /* ── Nivel 3: grande (+50%) ── */
  #route-recipe.rp-zoom-3 .rp-ing-mobile .rp-ing-list li{
    font-size:1.45rem; line-height:1.6; padding:16px 0;
  }
  #route-recipe.rp-zoom-3 .rp-steps li{
    font-size:1.5rem; line-height:1.8; padding-bottom:56px;
  }
  #route-recipe.rp-zoom-3 .rp-prose p{
    font-size:1.4rem; line-height:1.8;
  }
  #route-recipe.rp-zoom-3 .rp-block [data-recipe="intro"] p:first-of-type{
    font-size:1.55rem; line-height:1.7;
  }
  #route-recipe.rp-zoom-3 .rp-notes{
    font-size:1.25rem; line-height:1.6;
  }

  /* ── Nivel 4: máximo (+75%) — legibilidad total ── */
  #route-recipe.rp-zoom-4 .rp-ing-mobile .rp-ing-list li{
    font-size:1.65rem; line-height:1.65; padding:18px 0;
  }
  #route-recipe.rp-zoom-4 .rp-steps li{
    font-size:1.7rem; line-height:1.85; padding-bottom:60px; padding-left:48px;
  }
  #route-recipe.rp-zoom-4 .rp-steps li::before{
    font-size:50px;
  }
  #route-recipe.rp-zoom-4 .rp-prose p{
    font-size:1.6rem; line-height:1.85;
  }
  #route-recipe.rp-zoom-4 .rp-block [data-recipe="intro"] p:first-of-type{
    font-size:1.75rem; line-height:1.75;
  }
  #route-recipe.rp-zoom-4 .rp-notes{
    font-size:1.4rem; line-height:1.65;
  }

}/* /max-width:768px */