/* =========================================================
   Arequipe La Colmena — Sistema de diseño v3
   Paleta y tipografía 100% oficiales según Manual de Marca
   ========================================================= */
:root{
  /* ---- Paleta oficial (7 colores curados del manual) ---- */
  --color-cream:#FFFFFB;      /* Blanco cálido de marca */
  --color-black:#1D1E18;      /* Negro de marca */
  --color-yellow:#FFDE3E;     /* Amarillo brillante */
  --color-primary:#FFC200;    /* Amarillo/dorado — color central de marca */
  --color-amber:#E88E00;      /* Ámbar oscuro */
  --color-red:#DF040B;        /* Rojo de marca */
  --color-gray:#9B9B9B;       /* Gris de marca */

  /* Alias usados por el resto del sistema para no romper compatibilidad */
  --color-white:#FFFFFF;
  --color-footer-orange:#E88E00;
  --color-footer-red:#DF040B;
  --color-footer-white:#FFFFFB;
  --color-amber-dark:#C77600;
  --color-amber-light:#FFDE3E;

  /* ---- Tipografía oficial: Poppins + Gotham ---- */
  /* Gotham es una fuente comercial sin distribución libre en Google Fonts;
     se usa Poppins (muy afín geométricamente) como base y como respaldo
     de Gotham hasta contar con los archivos de licencia oficiales. */
  --font-display:'Poppins', 'Gotham', system-ui, sans-serif;
  --font-body:'Poppins', 'Gotham', system-ui, sans-serif;
  /* Serif elegante de acento para titulares editoriales (Home v5) */
  --font-serif:'Fraunces', 'Playfair Display', serif;

  --shadow-soft:0 10px 30px -10px rgba(223,4,11,.25);
  --shadow-lift:0 20px 50px -15px rgba(255,194,0,.4);
  --shadow-xl:0 30px 70px -20px rgba(29,30,24,.25);
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--color-black);
  background:var(--color-white);
  overflow-x:hidden;
  position:relative;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display);}

/* Textura de grano sutil sobre toda la página, para dar acabado "premium" */
body::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Utilidades de marca ---------- */
.text-amber{color:var(--color-amber);}
.text-brand-red{color:var(--color-red);}
.text-brand-yellow{color:var(--color-primary);}
.text-brand-gray{color:var(--color-gray);}
.bg-amber{background-color:var(--color-amber);}
.bg-brand-red{background-color:var(--color-red);}
.bg-brand-yellow{background-color:var(--color-primary);}
.bg-brand-cream{background-color:var(--color-cream);}
.bg-brand-primary{background-color:var(--color-primary);}

.text-gradient{
  background:linear-gradient(100deg, var(--color-red) 0%, var(--color-amber) 55%, var(--color-primary) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.gradient-hero{
  background:
    radial-gradient(60% 55% at 88% -8%, rgba(255,222,62,.4) 0%, transparent 60%),
    radial-gradient(50% 45% at 6% 8%, rgba(232,142,0,.22) 0%, transparent 65%),
    radial-gradient(120% 120% at 10% 0%, var(--color-cream) 0%, #FFF 45%, #FFF 100%);
}
.gradient-honey{
  background:linear-gradient(135deg, var(--color-amber) 0%, var(--color-primary) 50%, var(--color-yellow) 100%);
}
.gradient-brand{
  background:var(--color-primary);
}
.gradient-red{
  background:linear-gradient(135deg, var(--color-red) 0%, #9c0308 100%);
}
.gradient-footer{
  background:linear-gradient(160deg, var(--color-black) 0%, #34362b 100%);
}

.text-outline{
  -webkit-text-stroke:2px var(--color-red);
  color:transparent;
}

/* Panal de abejas decorativo — hexágonos auténticos estilo manual de marca */
.honeycomb-bg{
  background-image: radial-gradient(circle at 1px 1px, rgba(232,142,0,.16) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}
/* Hexágonos delineados (outline) reales — panal de abejas auténtico.
   CAMBIO DE ESTRATEGIA DEFINITIVO: los intentos anteriores usaban una
   "tesela" diminuta que se repite (background-repeat) miles de veces;
   cualquier error mínimo al cortar el hexágono en el borde de esa tesela
   se multiplicaba y se veía como octágonos/rombos con huecos.
   Esta versión NO se repite: es UNA sola imagen con 26 hexágonos
   COMPLETOS y CERRADOS (nunca cortados), calculados uno por uno con la
   fórmula estándar de hexágono regular "pointy-top" (radio 70, centro
   ± offsets fijos de 60.62/35/70) — matemáticamente no puede haber
   costuras porque no hay repetición ni bordes que deban coincidir.
   Se usa background-size:cover para llenar el panel sin deformar los
   hexágonos, igual que en la imagen de referencia de marca. */
.honeycomb-pattern{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='848.68' height='455' viewBox='0 0 848.68 455'%3E%3Cg fill='none' stroke='%23FFC200' stroke-width='1.6' opacity='.55'%3E%3Cpolygon points='60.62,0 121.24,35 121.24,105 60.62,140 0,105 0,35'/%3E%3Cpolygon points='303.1,0 363.72,35 363.72,105 303.1,140 242.48,105 242.48,35'/%3E%3Cpolygon points='545.58,0 606.2,35 606.2,105 545.58,140 484.96,105 484.96,35'/%3E%3Cpolygon points='788.06,0 848.68,35 848.68,105 788.06,140 727.44,105 727.44,35'/%3E%3Cpolygon points='181.86,105 242.48,140 242.48,210 181.86,245 121.24,210 121.24,140'/%3E%3Cpolygon points='424.34,105 484.96,140 484.96,210 424.34,245 363.72,210 363.72,140'/%3E%3Cpolygon points='666.82,105 727.44,140 727.44,210 666.82,245 606.2,210 606.2,140'/%3E%3Cpolygon points='60.62,210 121.24,245 121.24,315 60.62,350 0,315 0,245'/%3E%3Cpolygon points='303.1,210 363.72,245 363.72,315 303.1,350 242.48,315 242.48,245'/%3E%3Cpolygon points='545.58,210 606.2,245 606.2,315 545.58,350 484.96,315 484.96,245'/%3E%3Cpolygon points='788.06,210 848.68,245 848.68,315 788.06,350 727.44,315 727.44,245'/%3E%3Cpolygon points='181.86,315 242.48,350 242.48,420 181.86,455 121.24,420 121.24,350'/%3E%3Cpolygon points='424.34,315 484.96,350 484.96,420 424.34,455 363.72,420 363.72,350'/%3E%3Cpolygon points='666.82,315 727.44,350 727.44,420 666.82,455 606.2,420 606.2,350'/%3E%3C/g%3E%3Cg fill='none' stroke='%23FFC200' stroke-width='3' opacity='.85'%3E%3Cpolygon points='242.48,105 303.1,140 303.1,210 242.48,245 181.86,210 181.86,140'/%3E%3Cpolygon points='484.96,105 545.58,140 545.58,210 484.96,245 424.34,210 424.34,140'/%3E%3Cpolygon points='727.44,105 788.06,140 788.06,210 727.44,245 666.82,210 666.82,140'/%3E%3Cpolygon points='121.24,315 181.86,350 181.86,420 121.24,455 60.62,420 60.62,350'/%3E%3Cpolygon points='363.72,315 424.34,350 424.34,420 363.72,455 303.1,420 303.1,350'/%3E%3Cpolygon points='606.2,315 666.82,350 666.82,420 606.2,455 545.58,420 545.58,350'/%3E%3Cpolygon points='242.48,315 303.1,350 303.1,420 242.48,455 181.86,420 181.86,350'/%3E%3Cpolygon points='363.72,315 424.34,350 424.34,420 363.72,455 303.1,420 303.1,350'/%3E%3Cpolygon points='484.96,315 545.58,350 545.58,420 484.96,455 424.34,420 424.34,350'/%3E%3Cpolygon points='606.2,315 666.82,350 666.82,420 606.2,455 545.58,420 545.58,350'/%3E%3Cpolygon points='727.44,315 788.06,350 788.06,420 727.44,455 666.82,420 666.82,350'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity:.5;
}
.honeycomb-pattern.dark-hex{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='848.68' height='455' viewBox='0 0 848.68 455'%3E%3Cg fill='none' stroke='%23E88E00' stroke-width='1.6' opacity='.5'%3E%3Cpolygon points='60.62,0 121.24,35 121.24,105 60.62,140 0,105 0,35'/%3E%3Cpolygon points='303.1,0 363.72,35 363.72,105 303.1,140 242.48,105 242.48,35'/%3E%3Cpolygon points='545.58,0 606.2,35 606.2,105 545.58,140 484.96,105 484.96,35'/%3E%3Cpolygon points='788.06,0 848.68,35 848.68,105 788.06,140 727.44,105 727.44,35'/%3E%3Cpolygon points='181.86,105 242.48,140 242.48,210 181.86,245 121.24,210 121.24,140'/%3E%3Cpolygon points='424.34,105 484.96,140 484.96,210 424.34,245 363.72,210 363.72,140'/%3E%3Cpolygon points='666.82,105 727.44,140 727.44,210 666.82,245 606.2,210 606.2,140'/%3E%3Cpolygon points='60.62,210 121.24,245 121.24,315 60.62,350 0,315 0,245'/%3E%3Cpolygon points='303.1,210 363.72,245 363.72,315 303.1,350 242.48,315 242.48,245'/%3E%3Cpolygon points='545.58,210 606.2,245 606.2,315 545.58,350 484.96,315 484.96,245'/%3E%3Cpolygon points='788.06,210 848.68,245 848.68,315 788.06,350 727.44,315 727.44,245'/%3E%3Cpolygon points='181.86,315 242.48,350 242.48,420 181.86,455 121.24,420 121.24,350'/%3E%3Cpolygon points='424.34,315 484.96,350 484.96,420 424.34,455 363.72,420 363.72,350'/%3E%3Cpolygon points='666.82,315 727.44,350 727.44,420 666.82,455 606.2,420 606.2,350'/%3E%3C/g%3E%3Cg fill='none' stroke='%23E88E00' stroke-width='3' opacity='.75'%3E%3Cpolygon points='242.48,105 303.1,140 303.1,210 242.48,245 181.86,210 181.86,140'/%3E%3Cpolygon points='484.96,105 545.58,140 545.58,210 484.96,245 424.34,210 424.34,140'/%3E%3Cpolygon points='727.44,105 788.06,140 788.06,210 727.44,245 666.82,210 666.82,140'/%3E%3Cpolygon points='121.24,315 181.86,350 181.86,420 121.24,455 60.62,420 60.62,350'/%3E%3Cpolygon points='363.72,315 424.34,350 424.34,420 363.72,455 303.1,420 303.1,350'/%3E%3Cpolygon points='606.2,315 666.82,350 666.82,420 606.2,455 545.58,420 545.58,350'/%3E%3Cpolygon points='242.48,315 303.1,350 303.1,420 242.48,455 181.86,420 181.86,350'/%3E%3Cpolygon points='363.72,315 424.34,350 424.34,420 363.72,455 303.1,420 303.1,350'/%3E%3Cpolygon points='484.96,315 545.58,350 545.58,420 484.96,455 424.34,420 424.34,350'/%3E%3Cpolygon points='606.2,315 666.82,350 666.82,420 606.2,455 545.58,420 545.58,350'/%3E%3Cpolygon points='727.44,315 788.06,350 788.06,420 727.44,455 666.82,420 666.82,350'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.honeycomb-pattern.subtle{ opacity:.2; }

/* Cascada diagonal de hexágonos (acento de esquina, NO cuadrícula uniforme):
   a diferencia de .honeycomb-pattern (grilla completa que cubre todo el
   panel a opacidad pareja, efecto "papel tapiz"), esta variante dibuja un
   grupo acotado de ~19 hexágonos SOLO contorno (sin relleno), tesalados
   entre sí, en cascada diagonal y con opacidad/grosor de trazo distinto en
   cada uno (de muy tenue a bien marcado) para dar sensación de profundidad
   orgánica — pensado para usarse como acento en una esquina/lateral de una
   sección, no como fondo de borde a borde. */
.hex-cascade{
  position:absolute;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='860' viewBox='0 0 700 860'%3E%3Cg fill='none' stroke='%23FFC200'%3E%3Cpolygon points='60,0 111.96,30 111.96,90 60,120 8.04,90 8.04,30' stroke-width='1.8' opacity='.22'/%3E%3Cpolygon points='163.92,0 215.88,30 215.88,90 163.92,120 111.96,90 111.96,30' stroke-width='2.6' opacity='.55'/%3E%3Cpolygon points='111.96,90 163.92,120 163.92,180 111.96,210 60,180 60,120' stroke-width='1.8' opacity='.2'/%3E%3Cpolygon points='215.88,90 267.84,120 267.84,180 215.88,210 163.92,180 163.92,120' stroke-width='1.6' opacity='.15'/%3E%3Cpolygon points='319.8,90 371.76,120 371.76,180 319.8,210 267.84,180 267.84,120' stroke-width='2.8' opacity='.6'/%3E%3Cpolygon points='163.92,180 215.88,210 215.88,270 163.92,300 111.96,270 111.96,210' stroke-width='2.4' opacity='.5'/%3E%3Cpolygon points='267.84,180 319.8,210 319.8,270 267.84,300 215.88,270 215.88,210' stroke-width='1.8' opacity='.2'/%3E%3Cpolygon points='371.76,180 423.72,210 423.72,270 371.76,300 319.8,270 319.8,210' stroke-width='2' opacity='.3'/%3E%3Cpolygon points='319.8,270 371.76,300 371.76,360 319.8,390 267.84,360 267.84,300' stroke-width='1.8' opacity='.22'/%3E%3Cpolygon points='423.72,270 475.68,300 475.68,360 423.72,390 371.76,360 371.76,300' stroke-width='2.4' opacity='.5'/%3E%3Cpolygon points='371.76,360 423.72,390 423.72,450 371.76,480 319.8,450 319.8,390' stroke-width='1.8' opacity='.2'/%3E%3Cpolygon points='475.68,360 527.64,390 527.64,450 475.68,480 423.72,450 423.72,390' stroke-width='3' opacity='.85'/%3E%3Cpolygon points='423.72,450 475.68,480 475.68,540 423.72,570 371.76,540 371.76,480' stroke-width='1.6' opacity='.18'/%3E%3Cpolygon points='527.64,450 579.6,480 579.6,540 527.64,570 475.68,540 475.68,480' stroke-width='1.8' opacity='.22'/%3E%3Cpolygon points='475.68,540 527.64,570 527.64,630 475.68,660 423.72,630 423.72,570' stroke-width='1.6' opacity='.18'/%3E%3Cpolygon points='579.6,540 631.56,570 631.56,630 579.6,660 527.64,630 527.64,570' stroke-width='1.7' opacity='.2'/%3E%3Cpolygon points='527.64,630 579.6,660 579.6,720 527.64,750 475.68,720 475.68,660' stroke-width='1.6' opacity='.18'/%3E%3Cpolygon points='631.56,630 683.52,660 683.52,720 631.56,750 579.6,720 579.6,660' stroke-width='1.6' opacity='.18'/%3E%3Cpolygon points='579.6,720 631.56,750 631.56,810 579.6,840 527.64,810 527.64,750' stroke-width='1.5' opacity='.15'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}
.hex-cascade.flip{ transform:scaleX(-1) scaleY(-1); }

/* Clúster de hexágonos "tipo colmena" (elemento decorativo oficial del manual):
   grupo de hexágonos amarillos degradados, para usar como acento no invasivo. */
.hex-cluster{
  position:absolute;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='240' viewBox='0 0 220 240'%3E%3Cg fill='%23FFC200'%3E%3Cpolygon points='55,4 96,27 96,73 55,96 14,73 14,27' opacity='.95'/%3E%3Cpolygon points='110,4 151,27 151,73 110,96 69,73 69,27' opacity='.6'/%3E%3Cpolygon points='27,52 68,75 68,121 27,144 -14,121 -14,75' opacity='.75'/%3E%3Cpolygon points='83,52 124,75 124,121 83,144 42,121 42,75' opacity='.5'/%3E%3Cpolygon points='138,52 179,75 179,121 138,144 97,121 97,75' opacity='.35'/%3E%3Cpolygon points='55,100 96,123 96,169 55,192 14,169 14,123' opacity='.55'/%3E%3Cpolygon points='110,100 151,123 151,169 110,192 69,169 69,123' opacity='.3'/%3E%3Cpolygon points='27,148 68,171 68,217 27,240 -14,217 -14,171' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain;
  width:220px;height:240px;
}
/* ---------- Formas orgánicas (blobs) ---------- */
.blob-mask{
  border-radius: 62% 38% 55% 45% / 55% 45% 60% 40%;
  animation: blobMorph 10s ease-in-out infinite;
}
@keyframes blobMorph{
  0%,100%{border-radius: 62% 38% 55% 45% / 55% 45% 60% 40%;}
  50%{border-radius: 45% 55% 40% 60% / 40% 62% 38% 60%;}
}
.blob-bg{
  position:absolute;border-radius:50%;pointer-events:none;
  opacity:.4;
}
.blob-bg.blob-amber{background:radial-gradient(circle, rgba(232,142,0,.5) 0%, rgba(232,142,0,0) 70%);}
.blob-bg.blob-yellow{background:radial-gradient(circle, rgba(255,194,0,.5) 0%, rgba(255,194,0,0) 70%);}
.blob-bg.blob-red{background:radial-gradient(circle, rgba(223,4,11,.3) 0%, rgba(223,4,11,0) 70%);}
.blob-bg.blob-white{background:radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 70%);}
@media (max-width:767px){
  .blob-bg{opacity:.28;}
}
.squiggle-underline{
  position:relative;display:inline-block;
}
.squiggle-underline::after{
  content:'';position:absolute;left:2%;right:2%;bottom:-.12em;height:.35em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M0 12 Q 15 2, 30 12 T 60 12 T 90 12 T 120 12 T 150 12 T 180 12 T 210 12' stroke='%23FFC200' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
  background-size:110px 100%;
  z-index:-1;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);
  font-weight:700;
  padding:.9rem 1.9rem;
  border-radius:999px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35) 45%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .6s ease;
}
.btn:hover::before{transform:translateX(120%);}
.btn:active{transform:scale(.97);}
.btn-primary{
  background:var(--color-red);
  color:#fff;
  box-shadow:var(--shadow-soft);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 34px -10px rgba(223,4,11,.45);}
.btn-honey{
  background:var(--color-primary);
  color:var(--color-black);
  box-shadow:var(--shadow-lift);
}
.btn-honey:hover{transform:translateY(-3px);}
.btn-outline{
  background:transparent;
  border:2px solid var(--color-red);
  color:var(--color-red);
}
.btn-outline:hover{background:var(--color-red);color:#fff;transform:translateY(-3px);}
.btn-whatsapp{
  background:#25D366;color:#fff;box-shadow:0 10px 30px -10px rgba(37,211,102,.5);
}
.btn-whatsapp:hover{transform:translateY(-3px);}

/* ---------- Navbar ---------- */
#site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  box-shadow:0 2px 16px rgba(26,18,6,.05);
}
#site-header.scrolled{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  box-shadow:0 4px 30px rgba(26,18,6,.1);
}
#site-header .topbar{
  background:var(--color-black);
  color:rgba(255,255,255,.85);
}
.nav-link{
  position:relative;font-weight:700;color:var(--color-black);
}
.nav-link::after{
  content:'';position:absolute;left:0;bottom:-4px;height:3px;width:0;
  background:var(--color-red);border-radius:2px;transition:width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after{width:100%;}
.nav-link.active{color:var(--color-red);}

/* ---------- Cards ---------- */
.card{
  background:#fff;border-radius:var(--radius-md);
  box-shadow:0 8px 30px rgba(26,18,6,.06);
  transition:transform .35s ease, box-shadow .35s ease;
}
.card:hover{transform:translateY(-8px);box-shadow:0 24px 55px -12px rgba(26,18,6,.2);}

.product-card{
  position:relative;overflow:hidden;
}
.product-card img{transition:transform .5s ease;}
.product-card:hover img{transform:scale(1.08) rotate(-2deg);}

/* Tarjeta de producto premium con fondo circular de color */
.product-card-v2{
  position:relative;background:#fff;border-radius:22px;
  padding:1.1rem;text-align:center;overflow:hidden;
  box-shadow:0 10px 34px rgba(26,18,6,.07);
  transition:transform .4s cubic-bezier(.2,.9,.3,1), box-shadow .4s ease;
  border:1px solid rgba(26,18,6,.05);
}
@media (min-width:768px){
  .product-card-v2{border-radius:26px;padding:1.75rem;}
}
.product-card-v2:hover{
  transform:translateY(-10px) rotate(-0.6deg);
  box-shadow:0 30px 60px -14px rgba(209,27,27,.28);
}
.product-card-v2 .pc-blob{
  width:100px;height:100px;margin:0 auto .85rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
@media (min-width:768px){
  .product-card-v2 .pc-blob{width:150px;height:150px;margin:0 auto 1rem;}
}
.product-card-v2 .pc-blob img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(26,18,6,.22));
  transition:transform .5s cubic-bezier(.2,.9,.3,1);
}
.product-card-v2:hover .pc-blob img{transform:scale(1.1) rotate(4deg);}
.pc-ribbon{
  position:absolute;top:14px;left:-34px;
  background:var(--color-red);color:#fff;font-family:var(--font-display);
  font-size:.68rem;font-weight:700;letter-spacing:.04em;
  padding:.3rem 2.4rem;transform:rotate(-40deg);
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  text-transform:uppercase;
}

/* ---------- Iconos hexagonales ---------- */
.icon-hex{
  width:60px;height:60px;
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.3rem;flex-shrink:0;
  box-shadow:0 10px 24px -8px rgba(26,18,6,.35);
  transition:transform .35s ease;
}
@media (min-width:768px){
  .icon-hex{width:68px;height:68px;font-size:1.5rem;}
}
.card:hover .icon-hex, .process-step:hover .icon-hex, .bento-item:hover .icon-hex{transform:rotate(18deg) scale(1.08);}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease, transform .8s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal-scale{opacity:0;transform:scale(.85);transition:opacity .7s ease, transform .7s ease;}
.reveal-scale.in-view{opacity:1;transform:scale(1);}
.reveal-left{opacity:0;transform:translateX(-60px);transition:opacity .8s ease, transform .8s ease;}
.reveal-left.in-view{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(60px);transition:opacity .8s ease, transform .8s ease;}
.reveal-right.in-view{opacity:1;transform:translateX(0);}

/* ---------- Drip / miel goteando ---------- */
.honey-drip{
  position:relative;
}
.honey-drip::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:26px;
  background:radial-gradient(circle at 10% 0, transparent 60%, var(--color-amber) 61%) 0 0/40px 26px repeat-x,
             radial-gradient(circle at 60% 0, transparent 60%, var(--color-amber) 61%) 20px 0/40px 26px repeat-x;
}
.honey-drip-white::after{
  background:radial-gradient(circle at 10% 0, transparent 60%, #fff 61%) 0 0/40px 26px repeat-x,
             radial-gradient(circle at 60% 0, transparent 60%, #fff 61%) 20px 0/40px 26px repeat-x;
}

/* Divisor tipo onda entre secciones */
.wave-divider{
  display:block;width:100%;height:70px;margin-bottom:-2px;
}

/* ---------- Float animation ---------- */
@keyframes float-y{
  0%,100%{transform:translateY(0px) rotate(0deg);}
  50%{transform:translateY(-18px) rotate(3deg);}
}
.float{animation:float-y 5s ease-in-out infinite;}
.float-slow{animation:float-y 8s ease-in-out infinite;}
.float-delay{animation-delay:1.2s;}

@keyframes spin-slow{ to{transform:rotate(360deg);} }
.spin-slow{animation:spin-slow 18s linear infinite;}

/* ---------- Enjambre de abejitas del Hero ---------- */
/* Estructura de 3 capas por abeja:
   .hero-bee       -> posición absoluta (top/left/right/bottom/width) alrededor del tarro
   .hero-bee-angle -> ángulo FIJO individual de cada abeja (rotate inline distinto por abeja)
   .hero-bee-inner -> animación de órbita/flote (translate+rotate por keyframes)
   Se separan en dos elementos anidados porque una animación CSS sobre
   "transform" sobreescribe cualquier transform inline puesto en ESE MISMO
   elemento; al poner el ángulo fijo en el padre y la órbita en el hijo,
   ambos efectos se combinan correctamente (cada abeja conserva su propio
   ángulo mientras orbita). Cada abeja usa una única imagen fija (bee-1 o
   bee-2, alternadas), sin aleteo/parpadeo. */
.hero-jar-wrap{ margin:0 auto; }
.hero-bee{
  position:absolute;
  pointer-events:none;
  aspect-ratio:1/1;
}
.hero-bee-angle{
  width:100%;height:100%;
}
.hero-bee-inner{
  position:relative;
  width:100%;height:100%;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
.hero-bee-frame{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
/* Tres trayectorias orbitales distintas para variar el vuelo de cada abeja */
@keyframes beeOrbit1{
  0%{transform:translate(0,0) rotate(0deg);}
  25%{transform:translate(10px,-12px) rotate(6deg);}
  50%{transform:translate(2px,-22px) rotate(-4deg);}
  75%{transform:translate(-10px,-10px) rotate(-8deg);}
  100%{transform:translate(0,0) rotate(0deg);}
}
@keyframes beeOrbit2{
  0%{transform:translate(0,0) rotate(0deg);}
  30%{transform:translate(-14px,-8px) rotate(-6deg);}
  60%{transform:translate(-6px,10px) rotate(5deg);}
  100%{transform:translate(0,0) rotate(0deg);}
}
@keyframes beeOrbit3{
  0%{transform:translate(0,0) rotate(0deg);}
  35%{transform:translate(12px,10px) rotate(8deg);}
  70%{transform:translate(4px,-14px) rotate(-6deg);}
  100%{transform:translate(0,0) rotate(0deg);}
}
.orbit-1{ animation-name:beeOrbit1; animation-duration:6.5s; }
.orbit-2{ animation-name:beeOrbit2; animation-duration:5.2s; }
.orbit-3{ animation-name:beeOrbit3; animation-duration:7.8s; }

@keyframes pulse-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(255,194,0,.5);}
  50%{box-shadow:0 0 0 18px rgba(255,194,0,0);}
}
.pulse-glow{animation:pulse-glow 2.4s ease-out infinite;}

/* ---------- Loader / spinner ---------- */
.spinner{
  width:44px;height:44px;border-radius:50%;
  border:5px solid var(--color-cream);
  border-top-color:var(--color-red);
  animation:spin-slow 1s linear infinite;
}

/* ---------- WhatsApp Floating Button ---------- */
#whatsapp-float{
  position:fixed;bottom:24px;right:24px;z-index:90;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--color-cream);}
::-webkit-scrollbar-thumb{background:var(--color-amber);border-radius:10px;}

/* ---------- FAQ Assistant widget ---------- */
#ai-assistant-btn{
  position:fixed;bottom:24px;left:24px;z-index:90;
}
#ai-assistant-panel{
  position:fixed;bottom:96px;left:24px;z-index:95;
  width:min(360px, calc(100vw - 48px));
  max-height:70vh;
  transform-origin:bottom left;
}
.chat-bubble-bot{
  background:var(--color-cream);border-radius:16px 16px 16px 4px;
}
.chat-bubble-user{
  background:var(--color-red);color:#fff;border-radius:16px 16px 4px 16px;
}

/* ---------- Marquee ---------- */
.marquee-track{
  display:flex;gap:3rem;white-space:nowrap;
  animation:marquee 22s linear infinite;
}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.marquee-track-slow{animation-duration:38s;}

/* ---------- Hero home: tipografía fluida ---------- */
.hero-title{
  font-size:clamp(2.6rem, 8vw, 6rem);
  line-height:1.02;
  letter-spacing:-.01em;
}
.hero-lead{
  font-size:clamp(1rem, 2.2vw, 1.15rem);
}
.stat-number{
  font-size:clamp(1.6rem, 4vw, 2.2rem);
}

/* ---------- Section titles ---------- */
.section-eyebrow{
  font-family:var(--font-display);
  letter-spacing:.14em;text-transform:uppercase;
  font-size:.8rem;font-weight:600;color:var(--color-red);
  display:inline-flex;align-items:center;gap:.4rem;
}
.section-eyebrow::before{
  content:'';width:22px;height:2px;background:var(--color-amber);display:inline-block;
}

/* ---------- Hero de página interior ---------- */
.page-hero{
  position:relative;overflow:hidden;
  padding:9.5rem 1.5rem 5rem;
  text-align:center;
}
.page-hero .icon-hex.hero-icon{
  width:76px;height:76px;margin:0 auto 1.25rem;font-size:1.7rem;
}

/* ---------- Proceso artesanal (timeline) ---------- */
.process-step{
  position:relative;
  background:#fff;border-radius:24px;padding:2rem 1.5rem;
  box-shadow:0 8px 26px rgba(26,18,6,.06);
  text-align:center;
  transition:transform .35s ease, box-shadow .35s ease;
}
.process-step:hover{transform:translateY(-6px);box-shadow:0 20px 44px -10px rgba(26,18,6,.16);}
.process-step .step-number{
  position:absolute;top:-16px;right:-8px;
  width:38px;height:38px;border-radius:50%;
  background:var(--color-black);color:var(--color-primary);
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}
.process-line{
  position:absolute;top:38px;left:0;right:0;height:3px;
  background:repeating-linear-gradient(90deg, var(--color-amber) 0 12px, transparent 12px 22px);
  z-index:0;
}

/* ---------- Bento grid "Por qué elegirnos" ---------- */
.bento-item{
  background:#fff;border-radius:26px;padding:2rem;
  box-shadow:0 10px 30px rgba(26,18,6,.06);
  position:relative;overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
}
.bento-item:hover{transform:translateY(-6px);box-shadow:0 24px 50px -12px rgba(26,18,6,.16);}
.bento-item.dark{
  background:linear-gradient(160deg, var(--color-black) 0%, #34362b 100%);
  color:#fff;
}

/* ---------- Testimonios ---------- */
.testimonial-card{
  background:#fff;border-radius:22px;padding:1.75rem;
  box-shadow:0 10px 28px rgba(26,18,6,.08);
  width:320px;flex-shrink:0;
}
.testimonial-card .stars{color:var(--color-amber);}

/* ---------- Responsive helpers ---------- */
@media (max-width:768px){
  #ai-assistant-panel{left:12px;right:12px;width:auto;}
  #ai-assistant-btn{left:16px;}
  #whatsapp-float{right:16px;}
  .page-hero{padding:7.5rem 1.25rem 3.5rem;}
}

/* =========================================================
   SISTEMA "PREMIUM ARTESANAL" — Home v6
   Síntesis de dos referencias estudiadas a profundidad:
   - leadermel.com (marca de miel): botones píldora con degradé,
     paneles muy redondeados, fotografía de producto sobre fondo
     oscuro con resplandor dramático, flourish curvo bajo
     etiquetas "eyebrow", iconos circulares de borde fino.
   - dulcedelechemardel.com (competencia real de dulce de leche):
     grid de producto limpio y directo (imagen + categoría bold +
     variante en mayúsculas pequeñas), headline conversacional.
   Todo reconstruido con la paleta oficial de marca (dorado/ámbar/
   rojo/negro/crema) para lograr una home de alto contraste,
   premium y memorable — ni plana (v5) ni pesada tipo cómic (v4).
   ========================================================= */

.font-serif{ font-family:var(--font-serif); }

/* Fondo cálido y luminoso general para secciones claras */
.bg-silk{
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(255,222,62,.16) 0%, transparent 60%),
    radial-gradient(45% 40% at 0% 100%, rgba(232,142,0,.08) 0%, transparent 65%),
    var(--color-cream);
}

/* Acento script cálido (uso puntual en palabras clave, inspirado en el
   wordmark manuscrito de leadermel, con la calidez de nuestra propia marca).
   AJUSTE DE EQUILIBRIO: usaba --color-primary (amarillo dorado brillante),
   que tenía buen contraste sobre el antiguo Hero negro, pero ahora que el
   Hero (y el resto de secciones donde se usa este acento) tiene fondo
   claro, ese amarillo se ve pálido y cuesta leerlo. Se cambia a
   --color-amber (más oscuro y saturado) para mantener buena legibilidad
   sobre fondo claro en todos los títulos que lo usan. */
.accent-script{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:600;
  color:var(--color-amber);
}

/* Etiqueta "eyebrow" con flourish curvo (línea ondulada), estilo leadermel */
.label-pro{
  display:inline-flex;flex-direction:column;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;
  font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--color-amber);
}
.label-pro::after{
  content:'';display:block;width:70px;height:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 8'%3E%3Cpath d='M1 4 Q 17.5 -2, 35 4 T 69 4' stroke='%23E88E00' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.label-pro.on-dark{ color:var(--color-primary); }
.label-pro.on-dark::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 8'%3E%3Cpath d='M1 4 Q 17.5 -2, 35 4 T 69 4' stroke='%23FFC200' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Titulares bold y confiados (Poppins ExtraBold, no serif delgada) */
.heading-pro{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.04;
}

/* ---------- Header oscuro premium ---------- */
.topbar-pro{
  background:var(--color-black);
  color:rgba(255,255,255,.78);
}

/* ---------- HERO v6: escenario claro y cálido, fotografía dramática ----------
   CAMBIO DE FONDO (decisión de marca/UX): el escenario oscuro casi negro se
   sentía en contradicción con el mensaje del copy ("tradición venezolana",
   "sabor de casa", "receta de siempre") — el negro comunica lujo/tecnología,
   mientras que el público objetivo (hogares, panaderías, distribuidores)
   responde mejor a calidez y cercanía. Se reemplaza por un degradé claro y
   cálido (crema → dorado suave), consistente con el resto del sitio
   (.bg-silk), manteniendo el mismo resplandor dorado detrás del tarro para
   que el producto se siga viendo premium y protagonista. */
.hero-pro{ position:relative; background:var(--color-cream); overflow:hidden; }
/* AJUSTE DE EQUILIBRIO: al pasar de escenario oscuro a claro, la "tarjeta"
   del Hero (.hero-pro-stage) quedaba casi del mismo tono que el fondo de
   toda la página (.bg-silk, también crema), perdiendo la sensación de
   panel/tarjeta flotante premium que tenía antes por puro contraste con el
   negro. Se refuerza con un borde más marcado y una sombra más profunda y
   cálida para que el escenario se siga leyendo como un elemento propio,
   no como una continuación plana del fondo del body. */
.hero-pro-stage{
  border-radius:40px;
  background:
    radial-gradient(120% 130% at 88% -10%, rgba(255,194,0,.3) 0%, transparent 55%),
    radial-gradient(90% 100% at -5% 115%, rgba(232,142,0,.16) 0%, transparent 60%),
    linear-gradient(155deg, #FFFDF5 0%, var(--color-cream) 55%, #FFF3D2 100%);
  box-shadow:0 50px 110px -30px rgba(232,142,0,.4), 0 4px 0 rgba(232,142,0,.06);
  border:1.5px solid rgba(232,142,0,.28);
}
.hero-pro-glow{
  position:absolute;border-radius:50%;pointer-events:none;filter:blur(20px);
}

/* Sombra/resplandor ambiental grande y aplanado, justo debajo del tarro
   del Hero (reemplaza el círculo/"nube" amarilla flotante que no tenía
   relación visual con el producto). Elipse muy difuminada que simula luz
   de piso bajo el tarro.
   AJUSTE: aumentada de tamaño (ancho y alto) y con más intensidad/contraste
   (núcleo más opaco y saturado, capas intermedias más marcadas) para que
   se note claramente como un resplandor dorado potente bajo el producto,
   no un detalle sutil. */
.hero-jar-shadow{
  position:absolute;
  left:50%;
  bottom:0%;
  transform:translateX(-50%);
  width:112%;
  aspect-ratio:2.1/1;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,222,62,.85) 0%, rgba(255,194,0,.6) 30%, rgba(255,194,0,.32) 52%, transparent 75%);
  filter:blur(22px);
  pointer-events:none;
  z-index:0;
}
.hero-pro-orb{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,194,0,.35) 0%, rgba(255,194,0,0) 68%);
}

/* Chips flotantes tipo cápsula blanca */
.chip-pro{
  background:#fff;border-radius:999px;
  box-shadow:0 20px 45px -18px rgba(0,0,0,.4);
}

/* ---------- Medalla "100% Natural": sello de certificación premium ----------
   REDISEÑO COMPLETO (v2): el problema del diseño anterior era doble —
   (1) visualmente muy plano (un solo aro festoneado, poco relieve) y
   (2) posición aislada en una esquina vacía del fondo oscuro, sin relación
   con el tarro, lo que rompía el equilibrio de toda la composición.
   Solución:
   - Diseño en 3 capas de profundidad: (a) un aro de "rayos de sol"
     dorados detrás, más ancho, que asoma alrededor y da sensación de
     insignia oficial; (b) el disco principal con anillo bicolor
     ámbar→dorado; (c) núcleo interior crema con borde rojo grueso,
     ícono, número y etiqueta, más contraste tipográfico.
   - Reposicionada ANCLADA AL TARRO: esquina inferior derecha del propio
     ".hero-jar-wrap", semi-superpuesta sobre la base del envase, como una
     calcomanía real de producto — integrada visualmente con el tarro en
     vez de flotar sola en el fondo, lo que da equilibrio real a la
     composición (tarro + abejas + sello quedan unidos en un mismo grupo
     visual, dejando el resto del escenario oscuro respirar). */
.seal-medal{
  position:absolute;
  right:-4%;
  bottom:6%;
  z-index:26;
  width:24%;
  min-width:104px;
  max-width:150px;
  aspect-ratio:1/1;
  align-items:center;justify-content:center;
  transform:rotate(-8deg);
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.55));
}
/* Anillo dorado detrás del disco con forma de ENGRANAJE (piñón): en vez de
   rayos/radios largos que salían desde cerca del centro hasta el borde
   (que parecían los rayos de un timón de barco), ahora es un disco sólido
   con dientes CORTOS recortados en el borde exterior mediante clip-path
   (24 puntos alternando radio exterior/interior con poca diferencia entre
   ellos, para que los dientes se vean pequeños y densos, como un piñón
   mecánico real). Mantiene el mismo giro lento que antes. */
.seal-medal-rays{
  position:absolute;
  inset:-14%;
  background:var(--color-primary);
  /* Engranaje de 12 dientes cortos: 24 puntos exactos de un círculo,
     alternando radio exterior (50%) y radio interior (42%) cada 15°,
     calculados con la fórmula estándar x=50+r·cos(θ), y=50+r·sin(θ).
     La diferencia entre radios es de solo 8 puntos porcentuales, por lo
     que los "dientes" quedan cortos y densos (look de piñón mecánico),
     nada que ver con los picos largos tipo timón de la versión anterior. */
  clip-path:polygon(
    100% 50%, 90.57% 60.87%, 93.30% 75%, 79.70% 79.70%, 75% 93.30%, 60.87% 90.57%,
    50% 100%, 39.13% 90.57%, 25% 93.30%, 20.30% 79.70%, 6.70% 75%, 9.43% 60.87%,
    0% 50%, 9.43% 39.13%, 6.70% 25%, 20.30% 20.30%, 25% 6.70%, 39.13% 9.43%,
    50% 0%, 60.87% 9.43%, 75% 6.70%, 79.70% 20.30%, 93.30% 25%, 90.57% 39.13%
  );
  animation:sealSpin 22s linear infinite;
  z-index:1;
}
.seal-medal-disc{
  width:100%;height:100%;
  border-radius:50%;
  position:relative;
  z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg, var(--color-primary) 0%, var(--color-amber) 100%);
  padding:6px;
  box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 0 0 5px rgba(29,30,24,.12);
}
.seal-medal-inner{
  width:100%;height:100%;
  border-radius:50%;
  background:var(--color-cream);
  border:3px solid var(--color-red);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.12);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.seal-medal-icon{
  color:var(--color-red);font-size:1.15rem;margin-bottom:.1rem;
}
.seal-medal-num{
  font-family:var(--font-display);font-weight:800;
  font-size:1.3rem;line-height:1;color:var(--color-black);
}
.seal-medal-label{
  font-family:var(--font-display);font-weight:700;
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-red);margin-top:.18rem;
}
.seal-medal-ribbon{
  position:absolute;
  top:70%;
  width:20%;
  height:38%;
  background:var(--color-red);
  z-index:0;
}
.seal-medal-ribbon-l{
  left:26%;
  transform:rotate(16deg);
  clip-path:polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
  filter:brightness(.88);
}
.seal-medal-ribbon-r{
  right:26%;
  transform:rotate(-16deg);
  clip-path:polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
}
@keyframes sealSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@media (max-width:1023px){
  .seal-medal{ display:none !important; }
}

.stat-pro .num{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.8rem, 3vw, 2.5rem);
  color:var(--color-black); line-height:1;
}
.stat-pro .lbl{
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(29,30,24,.55);
}

/* Insignia "Pura Leche de Vaca" integrada como una estadística más de la
   fila (mismo tamaño visual que "40+ Distribuidores autorizados"): el
   ícono ocupa el mismo alto que los números .stat-pro .num, y el texto
   usa exactamente la misma clase .lbl que las demás etiquetas, para que
   quede a juego en vez de una caja aparte. mix-blend-mode:multiply
   elimina visualmente el fondo blanco real del PNG del ícono. */
.stat-pro-cow-icon{
  height:2.875rem;width:auto;display:block;margin:0 auto;
  mix-blend-mode:multiply;
  position:relative;top:-.35rem; /* subido un poco más a pedido del usuario */
}
.stat-pro-cow .lbl{ text-align:center; }
/* Tipografía del texto "Pura Leche de Vaca": el usuario pidió cambiar el
   tipo de letra (no le gustó el look genérico de .lbl); se usa la misma
   fuente de titulares de marca (Poppins ExtraBold, var(--font-display))
   en vez de la fuente fina en mayúsculas de las demás etiquetas .lbl. */
.cow-badge-text{
  font-family:var(--font-display);font-weight:800;font-size:.72rem;
  letter-spacing:.01em;text-transform:none;text-align:center;
  color:var(--color-black);line-height:1.2;
}

/* ---------- Ticker sobre fondo oscuro, tipografía firme ----------
   AJUSTE DE EQUILIBRIO: antes el negro plano contrastaba con un Hero
   también oscuro y quedaba integrado. Ahora que el Hero es claro/cálido,
   se unifica el ticker con el mismo degradé cálido oscuro que usa el
   footer (.gradient-footer / estilo inline del footer), para que los
   bloques oscuros del sitio hablen el mismo idioma visual entre sí. */
.ticker-pro{
  background:linear-gradient(160deg, var(--color-black) 0%, #2b2c24 100%);
  overflow:hidden;position:relative;
}
.ticker-pro .marquee-track span{
  font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;
  color:#fff;
}
.ticker-pro .marquee-track span.dot{ color:var(--color-primary); letter-spacing:0; }

/* ---------- Tarjetas premium redondeadas ---------- */
.card-pro{
  background:#fff;
  border-radius:28px;
  border:1px solid rgba(29,30,24,.06);
  box-shadow:0 20px 50px -24px rgba(29,30,24,.2);
  transition:transform .4s cubic-bezier(.2,.9,.3,1), box-shadow .4s ease;
}
.card-pro:hover{
  transform:translateY(-8px);
  box-shadow:0 34px 65px -20px rgba(232,142,0,.32);
}
.card-pro.on-dark{
  background:#24251e;
  border-color:rgba(255,255,255,.08);
  box-shadow:0 20px 50px -22px rgba(0,0,0,.5);
}

/* Icono circular de borde fino, estilo leadermel (reemplaza el hexágono sólido) */
.icon-circle-pro{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:1.5px solid var(--color-amber);
  color:var(--color-amber);font-size:1.35rem;
  background:var(--color-cream);
  transition:transform .35s ease, background .35s ease, color .35s ease;
}
.card-pro:hover .icon-circle-pro{
  background:var(--color-amber);color:#fff;transform:rotate(8deg) scale(1.05);
}

/* Número editorial como badge circular sólido y firme */
.index-pro{
  width:46px;height:46px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--color-black);color:var(--color-primary);
  font-family:var(--font-display);font-weight:800;font-size:1rem;
  flex-shrink:0;
}

/* ---------- Fila de features ---------- */
.feature-row-pro{
  border-top:1px solid rgba(29,30,24,.08);
  transition:background .3s ease, padding-left .3s ease;
}
.feature-row-pro:last-child{ border-bottom:1px solid rgba(29,30,24,.08); }
.feature-row-pro:hover{ background:rgba(255,194,0,.06); padding-left:.5rem; }

/* ---------- Tiles de producto: imagen + categoría bold + variante (estilo mardel) ---------- */
.tile-pro{
  background:#fff;
  border-radius:26px;
  border:1px solid rgba(29,30,24,.06);
  position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.9,.3,1), box-shadow .4s ease;
  box-shadow:0 18px 40px -22px rgba(29,30,24,.16);
}
.tile-pro:hover{
  transform:translateY(-8px);
  box-shadow:0 34px 60px -20px rgba(232,142,0,.32);
}
.tile-pro .tile-pro-img-wrap{
  border-radius:26px 26px 0 0; overflow:hidden;
  background:radial-gradient(circle at 38% 30%, rgba(255,194,0,.18), transparent 70%);
}
.tile-pro .tile-pro-cat{
  font-family:var(--font-display);font-weight:800;font-size:.95rem;
  color:var(--color-black);
}
.tile-pro .tile-pro-variant{
  font-family:var(--font-display);font-weight:700;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-amber);
}

/* ---------- Testimonios ---------- */
.testimonial-pro{
  background:#fff;
  border-radius:26px;
  border:1px solid rgba(29,30,24,.06);
  box-shadow:0 20px 45px -22px rgba(29,30,24,.15);
  width:320px;flex-shrink:0;
}
.testimonial-pro .quote-mark-pro{
  font-family:var(--font-display);font-weight:800;
  font-size:3rem;line-height:1;color:var(--color-primary);
}

/* ---------- Panel CTA con degradé bold de marca (rojo→ámbar→dorado) ---------- */
.panel-gradient-pro{
  background:linear-gradient(125deg, var(--color-red) 0%, var(--color-amber) 55%, var(--color-primary) 100%);
  border-radius:40px;position:relative;overflow:hidden;color:#fff;
}
.panel-gradient-pro .honeycomb-pattern{ opacity:.2; }

/* ---------- Botones píldora premium, con degradé (estilo leadermel) ---------- */
.btn-pro{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-display);font-weight:700;
  letter-spacing:.01em;
  padding:1rem 2.2rem;
  border-radius:999px;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
  white-space:nowrap;
}
.btn-pro-primary{
  background:linear-gradient(135deg, var(--color-red) 0%, var(--color-amber) 100%);
  color:#fff;
  box-shadow:0 18px 36px -14px rgba(223,4,11,.5);
}
.btn-pro-primary:hover{ transform:translateY(-3px); box-shadow:0 24px 44px -14px rgba(223,4,11,.6); }
.btn-pro-dark{
  background:var(--color-black); color:#fff;
  box-shadow:0 16px 34px -14px rgba(29,30,24,.45);
}
.btn-pro-dark:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -14px rgba(29,30,24,.5); }
.btn-pro-outline{
  background:transparent;color:var(--color-black);
  border:1.5px solid rgba(29,30,24,.25);
}
.btn-pro-outline:hover{ border-color:var(--color-black); transform:translateY(-3px); }
.btn-pro-outline.on-dark{ color:#fff; border-color:rgba(255,255,255,.35); }
.btn-pro-outline.on-dark:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

@media (max-width:767px){
  .hero-pro-stage{ border-radius:28px; }
  .panel-gradient-pro{ border-radius:28px; }
}

/* ---------- Ventana emergente (modal) para ver el catálogo PDF sin salir de la página ---------- */
.catalog-modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(29,30,24,.72);
  display:none; align-items:center; justify-content:center;
  padding:1.25rem;
  opacity:0;
  transition:opacity .25s ease;
}
.catalog-modal-overlay.active{ display:flex; opacity:1; }
.catalog-modal-box{
  background:#fff; border-radius:24px; overflow:hidden;
  width:100%; max-width:920px; height:90vh;
  display:flex; flex-direction:column;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.5);
  transform:translateY(16px) scale(.98);
  transition:transform .25s ease;
}
.catalog-modal-overlay.active .catalog-modal-box{ transform:translateY(0) scale(1); }
.catalog-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.25rem; background:var(--color-black); color:#fff; shrink:0;
}
.catalog-modal-head span{ font-family:var(--font-display); font-weight:700; font-size:.95rem; }
.catalog-modal-close{
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; color:#fff;
  border:none; cursor:pointer; transition:background .2s ease;
}
.catalog-modal-close:hover{ background:rgba(255,255,255,.25); }
.catalog-modal-box iframe{ flex:1; width:100%; border:none; }

/* =========================================================
   🎯 Portón de Calificación de Leads (embudo B2B / Klaviyo)
   Modal de varios pasos que intercepta los botones de
   contacto/WhatsApp del sitio. Reutiliza el lenguaje visual
   "Premium Artesanal" (card-pro, icon-circle-pro, btn-pro,
   label-pro, heading-pro) y añade sus propios estilos de
   formulario, opciones y overlay.
   ========================================================= */
.lead-gate-overlay{
  position:fixed; inset:0; z-index:210;
  background:rgba(29,30,24,.72);
  display:none; align-items:center; justify-content:center;
  padding:1.25rem;
  opacity:0;
  transition:opacity .25s ease;
}
.lead-gate-overlay.active{ display:flex; opacity:1; }
.lead-gate-box{
  background:#fff; border-radius:28px;
  width:100%; max-width:460px; max-height:92vh;
  overflow-y:auto;
  position:relative;
  padding:2.25rem 1.75rem 2rem;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.5);
  transform:translateY(16px) scale(.98);
  transition:transform .25s ease;
}
.lead-gate-overlay.active .lead-gate-box{ transform:translateY(0) scale(1); }
@media (min-width:640px){
  .lead-gate-box{ padding:2.75rem 2.5rem 2.25rem; }
}
.lead-gate-close{
  position:absolute; top:1.1rem; right:1.1rem;
  width:34px; height:34px; border-radius:50%;
  background:rgba(29,30,24,.06);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-black); border:none; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
  z-index:2;
}
.lead-gate-close:hover{ background:rgba(29,30,24,.12); transform:rotate(90deg); }

.lg-step{ display:none; }
.lg-head{ margin-bottom:1.5rem; }

/* ---------- Paso 1: opciones grandes tipo tarjeta ---------- */
.lg-options{ display:flex; flex-direction:column; gap:.9rem; }
.lg-option-btn{
  display:flex; align-items:center; gap:1rem;
  width:100%; text-align:left;
  background:var(--color-cream);
  border:1.5px solid rgba(232,142,0,.18);
  border-radius:20px;
  padding:1.1rem 1.15rem;
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.lg-option-btn:hover{
  border-color:var(--color-amber);
  background:#fff;
  transform:translateY(-3px);
  box-shadow:0 20px 40px -20px rgba(232,142,0,.35);
}
.lg-option-btn > i:first-child{
  flex-shrink:0; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--color-amber); font-size:1.05rem;
  border:1.5px solid rgba(232,142,0,.25);
}
.lg-option-btn:hover > i:first-child{ background:var(--color-amber); color:#fff; }
.lg-option-btn > div{ flex:1; min-width:0; }
.lg-option-title{
  font-family:var(--font-display); font-weight:800; font-size:.95rem;
  color:var(--color-black); line-height:1.25;
}
.lg-option-sub{
  font-size:.78rem; color:rgba(29,30,24,.55); margin-top:.15rem; line-height:1.3;
}
.lg-option-arrow{
  flex-shrink:0; color:rgba(29,30,24,.25); font-size:.85rem;
  transition:transform .25s ease, color .25s ease;
}
.lg-option-btn:hover .lg-option-arrow{ transform:translateX(3px); color:var(--color-amber); }

/* ---------- Separador "o si quieres" ---------- */
.lg-divider{
  display:flex; align-items:center; gap:.75rem;
  margin:1.35rem 0 1rem;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(29,30,24,.4);
}
.lg-divider::before, .lg-divider::after{
  content:''; flex:1; height:1px; background:rgba(29,30,24,.12);
}

/* ---------- Campos de formulario ---------- */
.lg-label{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:.74rem; letter-spacing:.02em;
  color:rgba(29,30,24,.7); margin-bottom:.35rem;
}
.lg-input{
  width:100%; background:var(--color-cream);
  border:1.5px solid rgba(29,30,24,.12); border-radius:14px;
  padding:.8rem 1rem; font-size:.9rem; color:var(--color-black);
  transition:border-color .2s ease, background .2s ease;
  font-family:inherit;
}
.lg-input:focus{
  outline:none; border-color:var(--color-amber); background:#fff;
}
select.lg-input{ cursor:pointer; }

.lg-checkbox{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.78rem; color:rgba(29,30,24,.65); line-height:1.4;
  cursor:pointer; padding-top:.25rem;
}
.lg-checkbox input{
  margin-top:.15rem; width:16px; height:16px; flex-shrink:0; accent-color:var(--color-amber);
  cursor:pointer;
}

.lg-hint{
  display:flex; align-items:flex-start; gap:.4rem;
  font-size:.74rem; color:var(--color-amber);
  background:rgba(255,194,0,.12); border-radius:10px;
  padding:.55rem .75rem; line-height:1.35;
}

.lg-back-link{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:1.1rem; font-size:.8rem; font-weight:600;
  color:rgba(29,30,24,.5); background:none; border:none; cursor:pointer;
  transition:color .2s ease;
}
.lg-back-link:hover{ color:var(--color-black); }

@media (max-width:480px){
  .lead-gate-box{ border-radius:22px; padding:2rem 1.25rem 1.75rem; }
}

/* =========================================================
   Buscador/localizador de clientes (página Distribuidores)
   "Store locator" premium: panel unificado con fondo propio,
   píldoras de color sólido, segmented control de orden y
   tarjetas de resultado con franja superior de categoría.
   ========================================================= */

/* ---------- Panel contenedor del buscador ---------- */
.search-panel-pro{
  background:linear-gradient(155deg, #FFFDF5 0%, var(--color-cream) 100%);
  border:1.5px solid rgba(232,142,0,.16);
  border-radius:32px;
  padding:2rem 1.75rem;
  box-shadow:0 30px 70px -32px rgba(29,30,24,.18);
}
@media (min-width:768px){
  .search-panel-pro{ padding:2.5rem 2.75rem; }
}
.filter-block{
  margin-top:1.75rem;
  padding-top:1.75rem;
  border-top:1px dashed rgba(29,30,24,.12);
}
.filter-block-label{
  display:flex;align-items:center;gap:.45rem;
  font-family:var(--font-display);font-weight:700;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-amber);margin-bottom:.9rem;
}

.locator-input{
  border:1.5px solid rgba(29,30,24,.12);
  border-radius:999px;
  transition:border-color .3s ease, box-shadow .3s ease;
  box-shadow:0 12px 30px -18px rgba(29,30,24,.12);
}
.locator-input:focus-within{
  border-color:var(--color-amber);
  box-shadow:0 0 0 4px rgba(232,142,0,.14);
}

.geo-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;font-size:.85rem;
  padding:1.05rem 1.6rem;border-radius:999px;
  background:linear-gradient(135deg, var(--color-black) 0%, #34362b 100%);
  color:var(--color-primary);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
  border:none;cursor:pointer;white-space:nowrap;
  box-shadow:0 18px 36px -14px rgba(29,30,24,.5);
}
.geo-btn:hover{ transform:translateY(-3px); }
.geo-btn.locating{ opacity:.75;pointer-events:none; }
.geo-btn.located{ background:linear-gradient(135deg, var(--color-amber) 0%, var(--color-primary) 100%); color:#fff; }

/* Píldoras de categoría: relleno sólido de color al activarse, con
   sombra de color propia — mucho más presencia que un simple borde. */
.cat-pill{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;font-size:.85rem;
  padding:.75rem 1.35rem;border-radius:999px;
  border:none;
  background:#fff;color:rgba(29,30,24,.65);
  box-shadow:0 6px 18px -10px rgba(29,30,24,.12), inset 0 0 0 1.5px rgba(29,30,24,.1);
  transition:all .3s cubic-bezier(.2,.9,.3,1);cursor:pointer;
}
.cat-pill:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -14px rgba(29,30,24,.25), inset 0 0 0 1.5px rgba(29,30,24,.2); }
.cat-pill .cat-pill-count{
  font-size:.72rem;font-weight:700;
  background:rgba(29,30,24,.08);
  padding:.12rem .5rem;border-radius:999px;
}
.cat-pill.active{
  color:#fff;
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 16px 30px -12px var(--pill-shadow-color, rgba(232,142,0,.55)), inset 0 0 0 0 transparent;
}
.cat-pill.active .cat-pill-count{ background:rgba(255,255,255,.28); color:#fff; }

/* Chips rápidos de estado */
.state-quick-chip{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-display);font-weight:600;font-size:.8rem;
  padding:.6rem 1.1rem;border-radius:999px;
  border:1.5px solid rgba(29,30,24,.12);
  color:rgba(29,30,24,.6);background:#fff;
  transition:all .25s ease;cursor:pointer;white-space:nowrap;
}
.state-quick-chip:hover{ border-color:var(--color-amber); color:var(--color-black); transform:translateY(-2px); }
.state-quick-chip.active{
  background:var(--color-black);color:var(--color-primary);border-color:var(--color-black);
  box-shadow:0 12px 24px -12px rgba(29,30,24,.5);
}

/* Segmented control de orden: un solo bloque con "píldora deslizante" */
.sort-segment{
  display:inline-flex;gap:.3rem;
  background:rgba(29,30,24,.05);
  border-radius:999px;padding:.3rem;
}
.sort-toggle-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-display);font-weight:700;font-size:.78rem;
  padding:.55rem 1.1rem;border-radius:999px;
  border:none;background:transparent;
  color:rgba(29,30,24,.5);
  transition:all .25s ease;cursor:pointer;white-space:nowrap;
}
.sort-toggle-btn.active{
  background:#fff;color:var(--color-black);
  box-shadow:0 8px 18px -10px rgba(29,30,24,.3);
}

/* ---------- Tarjeta de resultado ---------- */
.client-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(29,30,24,.07);
  box-shadow:0 18px 44px -26px rgba(29,30,24,.22);
  transition:transform .4s cubic-bezier(.2,.9,.3,1), box-shadow .4s ease;
}
.client-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 55px -22px rgba(232,142,0,.3);
}
.client-card-accent{
  height:6px;width:100%;
}
.client-card-body{ padding:1.5rem; }
.client-card-icon{
  width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;flex-shrink:0;
}
.cat-badge-pro{
  display:inline-flex;align-items:center;
  font-family:var(--font-display);font-weight:800;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.28rem .65rem;border-radius:8px;
}

/* Insignia de distancia (cuando la geolocalización está activa) */
.distance-badge{
  display:inline-flex;align-items:center;gap:.32rem;
  font-family:var(--font-display);font-weight:700;font-size:.68rem;
  color:var(--color-black);background:rgba(255,194,0,.22);
  padding:.35rem .65rem;border-radius:999px;white-space:nowrap;flex-shrink:0;
}

/* Botón "Ver dirección" dentro de la tarjeta */
.address-toggle-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;margin-top:1.1rem;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;
  padding:.75rem 1rem;border-radius:14px;
  border:1.5px solid rgba(29,30,24,.14);
  background:rgba(29,30,24,.02);color:var(--color-black);
  transition:all .25s ease;cursor:pointer;
}
.address-toggle-btn:hover{ background:rgba(232,142,0,.08); border-color:rgba(232,142,0,.35); }

/* Caja de dirección revelada dentro de la tarjeta (sin salir de la página) */
.address-reveal{
  margin-top:.85rem;
  padding:1rem 1.1rem;
  border-radius:14px;
  background:rgba(232,142,0,.07);
  font-size:.85rem;line-height:1.55;
  color:rgba(29,30,24,.7);
  animation:addressFadeIn .3s ease;
}
@keyframes addressFadeIn{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Punto de leyenda del mapa */
.map-legend-dot{
  width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0;
}

@media (max-width:640px){
  .geo-btn{ width:100%; }
  .search-panel-pro{ border-radius:24px; }
}

/* =========================================================
   BLOG / ARTÍCULO — Estética editorial "revista de clase"
   Aplica al listado (blog.html) y a la página de artículo
   individual (post.html). Reutiliza al 100% el sistema
   "Premium Artesanal" (paleta, tipografía, sombras, radios)
   pero con tratamiento tipográfico propio de publicación
   (portada fotográfica grande con overlay, cuerpo en serif,
   drop-cap, listas con viñeta de marca, tarjetas "sigue
   leyendo" horizontales) para que deje de sentirse como un
   simple "blog de recetas" y se lea como revista de marca.
   ========================================================= */

/* ---------- Enlace de retorno ---------- */
.back-link-pro{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;font-size:.85rem;
  color:var(--color-red);
  transition:gap .25s ease, opacity .25s ease;
}
.back-link-pro:hover{ gap:.85rem; }

/* ---------- Portada del artículo (cover con overlay) ---------- */
.article-cover{
  position:relative;
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 45px 95px -30px rgba(29,30,24,.4);
  background:var(--color-black);
}
.article-cover-frame{
  position:relative;
  aspect-ratio:4/3;
  min-height:260px;
}
@media (min-width:640px){ .article-cover-frame{ aspect-ratio:16/9; } }
@media (min-width:1024px){ .article-cover-frame{ aspect-ratio:21/9; } }
.article-cover-frame img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.article-cover-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(29,30,24,0) 30%, rgba(29,30,24,.45) 68%, rgba(29,30,24,.9) 100%);
}
.article-cover-cat{
  position:absolute;top:1.35rem;left:1.35rem;z-index:2;
  font-family:var(--font-display);font-weight:800;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  padding:.5rem 1.15rem;border-radius:999px;
  box-shadow:0 10px 22px -8px rgba(0,0,0,.4);
}
@media (min-width:768px){ .article-cover-cat{ top:1.75rem;left:1.75rem; } }
.article-cover-title-wrap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.75rem 1.5rem 1.75rem;
}
@media (min-width:768px){ .article-cover-title-wrap{ padding:3rem 3.25rem 2.75rem; max-width:88%; } }
.article-cover-title{
  font-family:var(--font-serif);font-weight:600;
  color:#fff;line-height:1.12;
  font-size:clamp(1.5rem, 4.4vw, 2.9rem);
  text-shadow:0 6px 24px rgba(0,0,0,.4);
}

/* ---------- Barra de metadatos del artículo ---------- */
.article-meta-bar{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;
  align-items:center;justify-content:center;
  padding:1.5rem 0 2.1rem;
  border-bottom:1px solid rgba(29,30,24,.09);
  margin-bottom:2.6rem;
  font-family:var(--font-display);font-weight:600;
  font-size:.82rem;color:rgba(29,30,24,.55);
}
.article-meta-bar span{ display:inline-flex;align-items:center;gap:.45rem; }
.article-meta-bar i{ color:var(--color-amber); }

/* ---------- Cuerpo editorial (tipografía de revista) ---------- */
.prose-editorial{
  font-family:var(--font-serif);
  font-size:1.13rem;line-height:1.9;
  color:rgba(29,30,24,.8);
}
.prose-editorial h2, .prose-editorial h3{
  font-family:var(--font-display);font-weight:800;
  color:var(--color-black);line-height:1.28;letter-spacing:-.01em;
  margin-top:2.6rem;margin-bottom:1.1rem;
}
.prose-editorial h2{ font-size:1.55rem; }
.prose-editorial h3{ font-size:1.22rem; }
.prose-editorial p{ margin-bottom:1.5rem; }
.prose-editorial p:first-of-type::first-letter{
  font-family:var(--font-serif);font-weight:700;
  font-size:3.7rem;line-height:.82;
  float:left;padding:.15rem .55rem 0 0;
  color:var(--color-red);
}
.prose-editorial ul{ list-style:none;margin:0 0 1.7rem 0;padding-left:0; }
.prose-editorial ul li{ position:relative;padding-left:1.65rem;margin-bottom:.7rem; }
.prose-editorial ul li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:50%;
  background:var(--color-amber);
}
.prose-editorial ol{ margin:0 0 1.7rem 0;padding-left:1.4rem; }
.prose-editorial ol li{ margin-bottom:.7rem;padding-left:.4rem; }
.prose-editorial ol li::marker{ font-family:var(--font-display);font-weight:800;color:var(--color-red); }
.prose-editorial strong{ color:var(--color-black);font-weight:700; }
.prose-editorial em{ color:var(--color-amber);font-style:italic; }
.prose-editorial a{ color:var(--color-red);text-decoration:underline;text-decoration-color:rgba(223,4,11,.35); }

/* ---------- Compartir artículo ---------- */
.share-pro{ display:flex;align-items:center;gap:.7rem;margin:.5rem 0 3rem; }
.share-pro-label{
  font-family:var(--font-display);font-weight:700;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(29,30,24,.42);
  margin-right:.3rem;
}
.share-btn-pro{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--color-cream);color:var(--color-black);
  border:1.5px solid rgba(29,30,24,.12);
  transition:all .3s ease;flex-shrink:0;
}
.share-btn-pro:hover{ transform:translateY(-3px);background:var(--color-black);color:var(--color-primary); }

/* ---------- Tarjetas "Sigue leyendo" ---------- */
.read-next-card{
  display:flex;flex-direction:column;
  background:#fff;border-radius:24px;overflow:hidden;
  border:1px solid rgba(29,30,24,.06);
  box-shadow:0 18px 40px -22px rgba(29,30,24,.18);
  transition:transform .4s cubic-bezier(.2,.9,.3,1), box-shadow .4s ease;
}
.read-next-card:hover{ transform:translateY(-8px); box-shadow:0 32px 55px -20px rgba(232,142,0,.32); }
.read-next-card .rnc-img{ position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--color-black); }
.read-next-card .rnc-img img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease; }
.read-next-card:hover .rnc-img img{ transform:scale(1.08); }
.read-next-card .rnc-cat{
  position:absolute;top:.85rem;left:.85rem;z-index:2;
  font-family:var(--font-display);font-weight:800;font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;
  padding:.32rem .75rem;border-radius:999px;
}
.read-next-card .rnc-body{ padding:1.35rem 1.4rem 1.5rem;flex:1;display:flex;flex-direction:column; }

/* ---------- Artículo destacado (portada revista, blog.html) ---------- */
.feature-post-pro{
  position:relative;border-radius:36px;overflow:hidden;
  display:grid;grid-template-columns:1fr;
  box-shadow:0 45px 95px -30px rgba(29,30,24,.32);
  border:1px solid rgba(29,30,24,.06);
}
@media (min-width:900px){ .feature-post-pro{ grid-template-columns:1.15fr 1fr; } }
.feature-post-pro .fp-img{ position:relative;min-height:260px;background:var(--color-black); }
.feature-post-pro .fp-img img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.feature-post-pro .fp-body{
  background:#fff;padding:2.4rem 1.75rem;
  display:flex;flex-direction:column;justify-content:center;
}
@media (min-width:768px){ .feature-post-pro .fp-body{ padding:3rem 3.5rem; } }
@media (max-width:767px){ .feature-post-pro{ border-radius:28px; } }

/* =========================================================
   RECETARIO — nueva sección de recetas (independiente del Blog)
   Reutiliza 100% el sistema "Premium Artesanal" (paleta, radios,
   sombras, tipografía) con componentes propios de receta de
   cocina: badges de porciones/tiempo/dificultad, checklist de
   ingredientes y pasos numerados con badge circular editorial.
   ========================================================= */

/* ---------- Badges de meta-receta (porciones / tiempo / dificultad) ---------- */
.recipe-meta-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:700;font-size:.8rem;
  color:var(--color-black);
  background:#fff;border-radius:999px;
  padding:.55rem 1.1rem;
  border:1px solid rgba(29,30,24,.08);
  box-shadow:0 10px 24px -14px rgba(29,30,24,.18);
}
.recipe-meta-badge i{ color:var(--color-amber); }
.recipe-meta-badge.on-dark{
  background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2);
}
.recipe-meta-badge.on-dark i{ color:var(--color-primary); }

/* ---------- Tarjeta de categoría de receta (chip de filtro) ---------- */
.recipe-cat-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;
  padding:.7rem 1.3rem;border-radius:999px;
  border:1.5px solid rgba(29,30,24,.14);
  background:#fff;color:rgba(29,30,24,.6);
  transition:all .3s cubic-bezier(.2,.9,.3,1);cursor:pointer;white-space:nowrap;
}
.recipe-cat-chip:hover{ transform:translateY(-2px); border-color:var(--color-amber); }
.recipe-cat-chip.active{
  background:linear-gradient(135deg, var(--color-red) 0%, var(--color-amber) 100%);
  color:#fff;border-color:transparent;
  box-shadow:0 14px 28px -12px rgba(223,4,11,.45);
}

/* ---------- Panel de ingredientes (checklist tipo receta real) ---------- */
.ingredient-panel{
  background:#fff;border-radius:28px;
  border:1px solid rgba(29,30,24,.06);
  box-shadow:0 24px 55px -28px rgba(29,30,24,.22);
  padding:1.75rem 1.5rem;
}
@media (min-width:768px){ .ingredient-panel{ padding:2.25rem 2rem; } }
.ingredient-list{ list-style:none;margin:0;padding:0; }
.ingredient-list li{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.7rem 0;
  border-bottom:1px dashed rgba(29,30,24,.1);
  font-size:.95rem;color:rgba(29,30,24,.78);
  line-height:1.5;
}
.ingredient-list li:last-child{ border-bottom:none; }
.ingredient-list li .ing-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--color-amber);flex-shrink:0;margin-top:.45rem;
}

/* ---------- Lista de pasos numerados (badge circular editorial) ---------- */
.step-list{ list-style:none;margin:0;padding:0; }
.step-list li{
  display:flex;gap:1.1rem;
  padding:1.2rem 0;
  border-bottom:1px solid rgba(29,30,24,.07);
  align-items:flex-start;
}
.step-list li:last-child{ border-bottom:none; }
.step-list li .step-num{
  width:38px;height:38px;border-radius:50%;
  background:var(--color-black);color:var(--color-primary);
  font-family:var(--font-display);font-weight:800;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.step-list li p{ color:rgba(29,30,24,.78);line-height:1.7;padding-top:.35rem;margin:0; }

/* ---------- Caja de "Tip de la abuela" / consejo del chef ---------- */
.chef-tip-box{
  background:linear-gradient(155deg, #FFFDF5 0%, var(--color-cream) 100%);
  border:1.5px solid rgba(232,142,0,.2);
  border-radius:24px;
  padding:1.5rem 1.6rem;
  display:flex;gap:1rem;align-items:flex-start;
}
.chef-tip-box .tip-icon{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:var(--color-primary);color:var(--color-black);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}

/* ---------- Portada de receta (similar a article-cover, con badges) ---------- */
.recipe-cover{
  position:relative;border-radius:32px;overflow:hidden;
  box-shadow:0 45px 95px -30px rgba(29,30,24,.4);
  background:var(--color-black);
}
.recipe-cover-frame{ position:relative;aspect-ratio:4/3;min-height:260px; }
@media (min-width:640px){ .recipe-cover-frame{ aspect-ratio:16/9; } }
@media (min-width:1024px){ .recipe-cover-frame{ aspect-ratio:21/9; } }
.recipe-cover-frame img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; }
.recipe-cover-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(29,30,24,0) 25%, rgba(29,30,24,.5) 68%, rgba(29,30,24,.92) 100%);
}
.recipe-cover-cat{
  position:absolute;top:1.35rem;left:1.35rem;z-index:2;
  font-family:var(--font-display);font-weight:800;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:var(--color-red);
  padding:.5rem 1.15rem;border-radius:999px;
  box-shadow:0 10px 22px -8px rgba(0,0,0,.4);
}
@media (min-width:768px){ .recipe-cover-cat{ top:1.75rem;left:1.75rem; } }
.recipe-cover-title-wrap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.75rem 1.5rem 1.75rem;
}
@media (min-width:768px){ .recipe-cover-title-wrap{ padding:2.75rem 3.25rem 2rem; max-width:88%; } }
.recipe-cover-title{
  font-family:var(--font-serif);font-weight:600;
  color:#fff;line-height:1.12;
  font-size:clamp(1.5rem, 4.4vw, 2.7rem);
  text-shadow:0 6px 24px rgba(0,0,0,.4);
}
.recipe-cover-badges{
  display:flex;flex-wrap:wrap;gap:.6rem;
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  transform:translateY(calc(100% + 1rem));
}

/* ---------- Tarjeta de receta (grid del recetario) ---------- */
.recipe-card-pro{
  background:#fff;border-radius:26px;overflow:hidden;
  border:1px solid rgba(29,30,24,.06);
  box-shadow:0 18px 44px -24px rgba(29,30,24,.2);
  transition:transform .4s cubic-bezier(.2,.9,.3,1), box-shadow .4s ease;
  display:flex;flex-direction:column;
}
.recipe-card-pro:hover{ transform:translateY(-8px); box-shadow:0 34px 65px -20px rgba(232,142,0,.32); }
.recipe-card-pro .rc-img{ position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--color-black); }
.recipe-card-pro .rc-img img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease; }
.recipe-card-pro:hover .rc-img img{ transform:scale(1.08); }
.recipe-card-pro .rc-cat{
  position:absolute;top:.9rem;left:.9rem;z-index:2;
  font-family:var(--font-display);font-weight:800;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:var(--color-red);
  padding:.32rem .8rem;border-radius:999px;
}
.recipe-card-pro .rc-body{ padding:1.4rem 1.5rem 1.6rem;flex:1;display:flex;flex-direction:column; }
.recipe-card-pro .rc-meta{
  display:flex;gap:1rem;margin-top:auto;padding-top:1rem;
  font-size:.76rem;color:rgba(29,30,24,.5);font-weight:600;
}
.recipe-card-pro .rc-meta span{ display:inline-flex;align-items:center;gap:.35rem; }
.recipe-card-pro .rc-meta i{ color:var(--color-amber); }

/* ---------- Botón "Imprimir / Descargar PDF" en el detalle de receta ---------- */
.recipe-print-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;
  color:var(--color-black);
  background:#fff;border-radius:999px;
  padding:.65rem 1.3rem;
  border:1.5px solid rgba(29,30,24,.14);
  box-shadow:0 10px 24px -14px rgba(29,30,24,.18);
  cursor:pointer;transition:all .3s cubic-bezier(.2,.9,.3,1);
}
.recipe-print-btn:hover{ transform:translateY(-2px); border-color:var(--color-amber); box-shadow:0 16px 32px -14px rgba(232,142,0,.35); }
.recipe-print-btn i{ color:var(--color-amber); }

/* ---------- Impresión de receta: página limpia estilo "hoja de recetario" ---------- */
@media print{
  body.printing-recipe #site-header,
  body.printing-recipe #site-footer,
  body.printing-recipe #whatsapp-float,
  body.printing-recipe #ai-assistant-btn,
  body.printing-recipe #ai-assistant-panel,
  body.printing-recipe .back-link-pro,
  body.printing-recipe .recipe-print-btn,
  body.printing-recipe #related-section,
  body.printing-recipe .no-print{
    display:none !important;
  }
  body.printing-recipe{ background:#fff !important; }
  body.printing-recipe .recipe-cover{ box-shadow:none !important; border-radius:0 !important; }
  body.printing-recipe .recipe-cover-frame{ aspect-ratio:16/7 !important; }
  body.printing-recipe .ingredient-panel{ box-shadow:none !important; border:1px solid #ddd !important; break-inside:avoid; }
  body.printing-recipe .chef-tip-box{ break-inside:avoid; }
  body.printing-recipe .card-pro{ box-shadow:none !important; border:1px solid #ddd !important; }
  body.printing-recipe .step-list li,
  body.printing-recipe .ingredient-list li{ break-inside:avoid; }
  @page{ margin:1.2cm; }
}