/* =========================================================
   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;
}
/* Barra fija de ancho completo, SOLO visible en móvil (ver @media más
   abajo) -- en escritorio se mantiene oculta y se usa el ícono circular
   .wa-float-btn de siempre. */
.wa-float-bar{
  display:none;
  align-items:center;justify-content:center;gap:.6rem;
  width:100%;height:56px;
  background:#25D366;color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  box-shadow:0 -6px 20px rgba(0,0,0,.18);
  border:none;
}
.wa-float-bar i{font-size:1.3rem;}

/* ---------- 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:19s;}

/* ---------- 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){
  /* Asistente de IA: se sube para no quedar tapado por la nueva barra fija
     de WhatsApp (56px de alto) que ahora ocupa toda la parte inferior en
     móvil -- ver .wa-float-bar y #whatsapp-float más abajo. */
  #ai-assistant-panel{left:12px;right:12px;width:auto;bottom:152px;}
  #ai-assistant-btn{left:16px;bottom:80px;}
  /* WhatsApp: en vez del ícono circular en la esquina (que en móvil el ojo
     aprende a ignorar rápido, igual que un banner), se convierte en una
     barra fija de ancho completo, pegada abajo, con texto visible -- mucho
     más notoria y fácil de tocar con el pulgar. A pedido explícito del
     usuario ("como gran parte de las personas ven esta página por móvil"). */
  #whatsapp-float{left:0;right:0;bottom:0;width:100%;}
  /* !important + selector reforzado: el botón circular trae clases de
     Tailwind (p.ej. "flex") que el CDN de Tailwind inyecta en un <style>
     que carga DESPUÉS de este archivo, así que con la misma especificidad
     "flex" le ganaba a "display:none" y el círculo verde seguía viéndose
     detrás/junto al botón del asistente de IA en móvil. Se fuerza aquí
     para que SIEMPRE quede oculto en móvil y solo se vea la barra. */
  #whatsapp-float .wa-float-btn{display:none !important;}
  #whatsapp-float .wa-float-bar{display:flex !important;}
  .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);
}

/* ---------- Galería de fotos de planta/producción (fotos reales,
   formato vertical/retrato): altura FIJA e idéntica en las 4 tarjetas
   (en vez de aspect-ratio, que puede dar alturas ligeramente distintas
   por redondeos dentro de un grid) para que las 4 queden perfectamente
   parejas, sin ninguna más corta o más larga que las demás. */
.plant-photo-wrap{
  position:relative;
  width:100%;
  height:260px;
  border-radius:20px;
  overflow:hidden;
  background:#f3ede2;
}
.plant-photo-wrap img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:20px;
}
@media (min-width:768px){
  .plant-photo-wrap{ height:340px; }
}

/* ---------- Testimonios en video (archivo nativo <video>, alojado en el
   propio sitio, sin ningún embed de Instagram) ----------
   Los 4 videos se muestran en su formato vertical real de Reel (9:16),
   cada uno dentro de su propia tarjeta, reproducidos in-situ con los
   controles nativos del navegador: nunca se abren en un modal más grande
   ni llevan a Instagram. Las 4 tarjetas quedan en una sola fila
   horizontal (desktop/tablet), con scroll horizontal suave si la
   pantalla es más angosta que las 4 juntas; en móvil colapsan a una
   columna. */
.ig-video-row{
  display:flex;
  flex-wrap:nowrap;
  gap:1.5rem;
  overflow-x:auto;
  overflow-y:hidden;
  padding:.25rem .25rem 1rem;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.ig-video-row::-webkit-scrollbar{ height:6px; }
.ig-video-row::-webkit-scrollbar-thumb{ background:rgba(232,142,0,.35); border-radius:10px; }
.ig-video-card{
  flex:0 0 auto;
  width:290px;
  max-width:88vw;
  scroll-snap-align:start;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 50px -24px rgba(29,30,24,.2);
  background:#000;
  aspect-ratio:9/16;
}
.ig-video-card video{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  border-radius:20px;
  background:#000;
}
@media (min-width:1180px){
  .ig-video-row{ justify-content:center; overflow-x:visible; }
}
@media (max-width:640px){
  .ig-video-card{ width:82vw; }
}

/* 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);
}

/* Variante grande del icon-circle-pro para heroes editoriales (Misión/Visión),
   con reducción de tamaño en móviles muy pequeños para no verse desproporcionado. */
.icon-circle-pro-hero{
  width:170px;height:170px;font-size:3.6rem;
}
@media (max-width:480px){
  .icon-circle-pro-hero{ width:120px;height:120px;font-size:2.6rem; }
}

/* Mapa interactivo (Distribuidores): altura fija en desktop/tablet,
   reducida en móvil para no ocupar la mitad de la pantalla. */
.map-pro-responsive{ height:480px; }
@media (max-width:767px){
  .map-pro-responsive{ height:340px; }
}
@media (max-width:480px){
  .map-pro-responsive{ height:280px; }
}

/* 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 ---------- */
/* z-index:210 (defensa adicional al fix en handleSoftOptinSubmit() de
   js/common-v12.js): el catálogo debe quedar SIEMPRE por encima de
   cualquier otro overlay del sitio (ej. .exit-optin-overlay, z-index:205),
   para que nunca vuelva a quedar visualmente "tapado" por un aviso que no
   se cerró correctamente. */
.catalog-modal-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;
}
.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; }
}

/* =========================================================
   MOTOR DE EXPANSIÓN TERRITORIAL (expansion-territorial.html)
   Landing de captación B2B agresiva por estado/zona sin
   presencia. Reutiliza 100% el sistema "Premium Artesanal"
   (hero-pro, card-pro, btn-pro, label-pro, heading-pro,
   icon-circle-pro, seal-medal...) — solo se añaden aquí los
   componentes propios de esta landing que no existían antes:
   selector de estado tipo mapa, barra de "termómetro" de
   cobertura, tarjetas de urgencia/oportunidad, banner
   pegajoso de zona detectada y ticker de prueba social.
   ========================================================= */

/* ---------- Selector de estado en el Hero: grid de "chips-mapa" ----------
   Rango de breakpoints reescrito con límites explícitos (sin solapamiento)
   para que la progresión de columnas sea inequívoca en cualquier ancho:
   <480px → 2 col · 480–639px → 3 col · ≥640px → 3 col (se mantiene, ya
   es suficientemente ancho en tablet/desktop). */
.territory-select-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;
}
@media (min-width:480px){ .territory-select-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:768px){ .territory-select-grid{ grid-template-columns:repeat(4,1fr); } }
.territory-chip{
  display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;
  background:#fff;border:1.5px solid rgba(29,30,24,.1);
  border-radius:16px;padding:.85rem 1rem;
  cursor:pointer;transition:all .25s cubic-bezier(.2,.9,.3,1);
  text-align:left;
}
.territory-chip:hover{ border-color:var(--color-amber); transform:translateY(-3px); box-shadow:0 16px 30px -16px rgba(232,142,0,.35); }
.territory-chip.active{
  background:linear-gradient(135deg, var(--color-red) 0%, var(--color-amber) 100%);
  border-color:transparent;color:#fff;
  box-shadow:0 18px 34px -14px rgba(223,4,11,.45);
}
.territory-chip .tc-state{ font-family:var(--font-display);font-weight:800;font-size:.86rem;line-height:1.2; }
.territory-chip .tc-status{
  font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  opacity:.7;display:inline-flex;align-items:center;gap:.3rem;
}
.territory-chip .tc-status i{ font-size:.6rem; }
.territory-chip.active .tc-status{ opacity:.95; }

/* ---------- Termómetro de cobertura (barra de urgencia visual) ---------- */
.coverage-meter{
  background:rgba(29,30,24,.07);border-radius:999px;
  height:14px;overflow:hidden;position:relative;
}
.coverage-meter-fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg, var(--color-red) 0%, var(--color-amber) 100%);
  transition:width .8s cubic-bezier(.2,.9,.3,1);
}
.coverage-meter-fill.is-zero{ background:repeating-linear-gradient(135deg, var(--color-red) 0 10px, #ffb3b3 10px 20px); }

/* ---------- Banner "zona detectada" pegajoso bajo el header ---------- */
.zone-banner{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg, var(--color-black) 0%, #3B2F14 100%);
  color:#fff;
}
.zone-banner .zb-pulse{
  width:10px;height:10px;border-radius:50%;
  background:var(--color-primary);
  animation:pulse-glow 2.4s ease-out infinite;
  flex-shrink:0;
}

/* ---------- Tarjeta de "oportunidad" (motivo por el que la zona es prioritaria) ---------- */
.opportunity-card{
  background:#fff;border-radius:24px;
  border:1.5px solid rgba(223,4,11,.14);
  box-shadow:0 22px 50px -28px rgba(223,4,11,.22);
  padding:1.6rem 1.5rem;
  transition:transform .35s ease, box-shadow .35s ease;
}
.opportunity-card:hover{ transform:translateY(-6px); box-shadow:0 30px 58px -22px rgba(223,4,11,.32); }
.opportunity-card .oc-num{
  font-family:var(--font-display);font-weight:800;
  font-size:2.2rem;line-height:1;color:var(--color-red);
}

/* ---------- Ventaja exclusiva (grid de razones para actuar YA) ---------- */
.perk-row{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1.1rem 0;border-top:1px solid rgba(29,30,24,.08);
}
.perk-row:first-child{ border-top:none; }

/* ---------- Badge "Cupo limitado / Territorio exclusivo" ---------- */
.exclusivity-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:800;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;
  background:rgba(223,4,11,.1);color:var(--color-red);
  border:1.5px solid rgba(223,4,11,.25);
  padding:.5rem 1rem;border-radius:999px;
}
.exclusivity-badge i{ animation:pulse-glow 2s ease-out infinite; border-radius:50%; }

/* =========================================================
   🧮 CALCULADORA DE OPORTUNIDAD DE NEGOCIO (Bloque A, punto 2)
   Simulador interactivo en descubre-arequipe.html: reutiliza
   100% el sistema "Premium Artesanal" (card-pro, label-pro,
   heading-pro, btn-pro, lg-input/lg-label del Portón de Leads)
   para que se sienta una pieza nativa del sitio.
   ========================================================= */
.calc-pro{
  background:#fff;border-radius:28px;
  border:1.5px solid rgba(232,142,0,.18);
  box-shadow:0 30px 70px -32px rgba(29,30,24,.22);
  padding:2rem 1.5rem;
}
@media (min-width:768px){
  .calc-pro{ padding:2.75rem 3rem; }
}
.calc-pro-grid{
  display:grid;grid-template-columns:1fr;gap:2rem;
}
@media (min-width:900px){
  .calc-pro-grid{ grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
}
.calc-field + .calc-field{ margin-top:1.1rem; }
.calc-pro-result{
  background:var(--color-cream);
  border-radius:22px;
  padding:1.6rem 1.5rem;
  border:1.5px solid rgba(232,142,0,.16);
}
.calc-result-row{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:.7rem 0;border-top:1px solid rgba(29,30,24,.08);
}
.calc-result-row:first-child{ border-top:none; }
.calc-result-label{
  font-size:.82rem;color:rgba(29,30,24,.6);font-weight:600;
}
.calc-result-value{
  font-family:var(--font-display);font-weight:800;
  font-size:1.4rem;color:var(--color-black);white-space:nowrap;
}
.calc-result-value.is-highlight{ color:var(--color-red); font-size:1.9rem; }
.calc-result-note{
  font-size:.72rem;color:rgba(29,30,24,.45);margin-top:.9rem;line-height:1.4;
}
.calc-pro-chart-wrap{
  position:relative;height:220px;margin-top:1.3rem;
}
.calc-gate{
  margin-top:1.4rem;padding-top:1.3rem;border-top:1.5px dashed rgba(232,142,0,.3);
}
/* ---------- Candado de la Calculadora de Oportunidad ----------
   A pedido explícito del usuario: antes se regalaba el resultado completo
   (ganancia mensual + proyección a 12 meses + gráfico) gratis, sin ningún
   motivo real para dejar el correo -- confirmado con datos reales de
   producción que eso dejaba la captura de leads de la Calculadora en CERO.
   Ahora esos 3 elementos quedan desenfocados detrás de un candado visual
   hasta que la persona deja su correo (ver initOpportunityCalculator(),
   js/common-v12.js); el "Ingreso mensual estimado" se mantiene siempre
   visible como anzuelo inicial. */
.calc-locked-zone{ position:relative; }
.calc-locked-zone.is-locked .calc-result-row,
.calc-locked-zone.is-locked .calc-pro-chart-wrap{
  filter:blur(7px);
  user-select:none;
  transition:filter .5s ease;
}
.calc-locked-zone:not(.is-locked) .calc-result-row,
.calc-locked-zone:not(.is-locked) .calc-pro-chart-wrap{
  transition:filter .5s ease;
}
.calc-lock-overlay{
  display:none;
}
.calc-locked-zone.is-locked .calc-lock-overlay{
  display:flex;
  position:absolute;inset:0;
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.6rem;
  background:rgba(255,253,245,.55);
  border-radius:16px;
  padding:1.5rem;
  z-index:5;
}
.calc-lock-overlay i{ font-size:1.6rem;color:var(--color-amber); }
.calc-lock-overlay p{
  font-family:var(--font-display);font-weight:700;font-size:.85rem;
  color:var(--color-black);max-width:230px;line-height:1.4;
}

/* =========================================================
   ✉️ OPT-IN "INTERÉS TIBIO" (Bloque A, punto 1)
   Franja discreta insertada en descubre-arequipe.html para
   capturar el correo de quien no completa el formulario de
   calificación B2B completo. Reutiliza .card-pro/.lg-input.
   ========================================================= */
.soft-optin-card{
  background:linear-gradient(160deg, #FFFDF5 0%, #FFF3D2 100%);
  border:1.5px solid rgba(232,142,0,.28);
  border-radius:26px;
  padding:1.9rem 1.6rem;
}
@media (min-width:768px){
  .soft-optin-card{ padding:2.2rem 2.4rem; }
}
.soft-optin-form{
  display:flex;flex-direction:column;gap:.75rem;margin-top:1.1rem;
}
@media (min-width:560px){
  .soft-optin-form{ flex-direction:row; }
  .soft-optin-form .lg-input{ flex:1; }
}
.soft-optin-success{
  display:flex;align-items:center;gap:.6rem;
  color:var(--color-amber-dark);font-weight:700;font-size:.9rem;
}

/* ---------- Exit-intent: mini variante del Portón de Leads ---------- */
.exit-optin-overlay{
  position:fixed; inset:0; z-index:205;
  background:rgba(29,30,24,.72);
  display:none; align-items:center; justify-content:center;
  padding:1.25rem; opacity:0; transition:opacity .25s ease;
}
.exit-optin-overlay.active{ display:flex; opacity:1; }
.exit-optin-box{
  background:#fff;border-radius:26px;width:100%;max-width:420px;
  padding:2.25rem 1.9rem 2rem;position:relative;text-align:center;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.5);
  transform:translateY(16px) scale(.98); transition:transform .25s ease;
}
.exit-optin-overlay.active .exit-optin-box{ transform:translateY(0) scale(1); }
.exit-optin-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;
}
.exit-optin-close:hover{ background:rgba(29,30,24,.12); transform:rotate(90deg); }