/* === ENJ:NOBOOST INICIO === */
html{ -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; text-size-adjust:100%; }
/* === ENJ:NOBOOST FIN === */
/* =====================================================================
   ENJAMBRE - CSS personalizado (D_RETRO)  ---  LIMPIO

   Cambios de esta limpieza:
   1. Se elimino la copia DUPLICADA de las lineas 1-627. El archivo tenia
      el bloque completo dos veces; la segunda era la version revisada
      (traia el velo oscuro del footer que la primera no tenia). Se
      conservo la segunda para no alterar el orden de la cascada.
      Verificado: 0 selectores exclusivos en la copia borrada.
   2. Se quito url('REEMPLAZA_CON_LA_RUTA_DE_TU_IMAGEN'), que pedia una
      imagen inexistente y devolvia 404 en cada pagina interna.
   3. Se agrego al final el arreglo de miniaturas de la rejilla.
   4. Se recorto el @import de Google Fonts: se quito Orbitron completo
      (se descargaba y no se usaba en ninguna regla), Sora 400 y
      Hanken Grotesk 500. De 12 pesos en 4 familias a 8 en 3.
   ===================================================================== */

/* =====================================================================
   ENJAMBRE — CSS COMPLETO de la tienda (Codebob / tema Basic)
   Sistema D_RETRO neobrutalista — REEMPLAZA TODO el CSS personalizado
   ===================================================================== */

/* ---------- FUENTES (deben ir al inicio) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Hanken+Grotesk:wght@400;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

/* ---------- VARIABLES ---------- */
:root{
  --primary_color: 250, 191, 5;
  --secondary_color: 17, 17, 18;
  --background_color: 255, 255, 255;
  --navbar_background_color: 255, 255, 255;
  --premium_color: 234, 160, 8;
  --inner_background_color: 255, 255, 255;
  --elements_background_color: 255, 255, 255;
  --elements_inner_background_color: 254, 251, 234;
  --trending_item_badge_color: 250, 191, 5;
  --sale_item_badge_color: 101, 194, 43;
  --free_item_badge_color: 150, 41, 209;
  --premium_item_badge_color: 234, 160, 8;
  --text_color: 17, 17, 18;
  --text_muted: 86, 86, 95;
  --text_green: 40, 167, 69;
  --border_color: 17, 17, 18;
  --item_preview_navbar_background: 17, 17, 18;
  --footer_background_color: 20, 20, 22;
  --footer_heading_color: 255, 255, 255;
  --footer_border_color: 42, 42, 46;
  --footer_text_color: 160, 160, 166;

  --paper:#FFFFFF;
  --cream:#FEFBEA;
  --ink:#111112;
  --ink-2:#2A2A2E;
  --muted:#56565F;
  --muted-2:#84848E;
  --yellow:#FABF05;
  --yellow-lite:#FFD60A;
  --yellow-soft:#FFF3C4;
  --bw:2.5px;
  --sh:6px 6px 0 var(--ink);
  --sh-sm:4px 4px 0 var(--ink);
  --sh-lg:9px 9px 0 var(--ink);
  --font-display:"Sora",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.25,1);

  --bs-primary:#FABF05;
  --bs-primary-rgb:250,191,5;
  --bs-body-font-family:var(--font-body);
  --bs-body-color:#111112;
  --bs-border-radius:0; --bs-border-radius-sm:0; --bs-border-radius-lg:0; --bs-border-radius-xl:0;
  --bs-link-color:#111112;
  --bs-link-hover-color:#FABF05;
}

/* ---------- TIPOGRAFIA ---------- */
body{ font-family:var(--font-body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
.header-title,.section-header,.section-title{
  font-family:var(--font-display) !important; font-weight:800; letter-spacing:-.03em; color:var(--ink);
}
p,a,span,li,td,th,input,textarea,button,label,.nav-bar-links{ font-family:var(--font-body); }
.item-price,.item-price-amount,.item-badge,.item-category,.badge,.footer-counter-text{
  font-family:var(--font-mono) !important; letter-spacing:-.01em;
}

/* ---------- RADIUS 0 GLOBAL ---------- */
.btn,.card,.form-control,.form-select,.input-group-text,.badge,.alert,.dropdown-menu,
.modal-content,.nav-tabs .nav-link,.list-group,.list-group-item,.pagination .page-link,
.toast,.offcanvas,.progress,.rounded,.rounded-1,.rounded-2,.rounded-3,.rounded-circle,
.rounded-pill,img.rounded,.form-check-input,input,select,textarea,.home-category,.item,.item-card{
  border-radius:0 !important;
}

/* ---------- BOTONES ---------- */
.btn{
  font-family:var(--font-body); font-weight:700;
  border:var(--bw) solid var(--ink) !important; box-shadow:var(--sh-sm);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .12s;
}
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
.btn-primary,.btn-warning{ background:var(--yellow) !important; color:var(--ink) !important; border-color:var(--ink) !important; }
.btn-primary:hover,.btn-warning:hover{ background:var(--yellow-lite) !important; color:var(--ink) !important; }
.btn-dark,.btn-secondary{ background:var(--ink) !important; color:var(--paper) !important; border-color:var(--ink) !important; }
.btn-dark:hover,.btn-secondary:hover{ background:var(--ink-2) !important; }
.btn-outline-primary,.btn-outline-dark,.btn-light,.btn-outline-secondary{
  background:var(--paper) !important; color:var(--ink) !important; border-color:var(--ink) !important;
}
.btn-outline-primary:hover,.btn-outline-dark:hover,.btn-light:hover{ background:var(--yellow) !important; }
.btn-premium,.premium-btn,a[href*="premium"].btn{
  background:var(--yellow) !important; color:var(--ink) !important; border:var(--bw) solid var(--ink) !important;
}

/* ---------- TARJETAS / CAJAS ---------- */
.card,.box,.item,.item-card,.elements-box{
  border:var(--bw) solid var(--ink) !important; box-shadow:var(--sh); background:var(--paper);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease);
}
.card:hover,.item:hover,.item-card:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink); }

/* ---------- TARJETAS DE CATEGORIA ---------- */
.home-category{
  background:var(--paper) !important;
  border:var(--bw) solid var(--ink) !important;
  outline:none !important;
  box-shadow:var(--sh) !important;
  border-radius:0 !important;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease);
  animation:none !important;
}
.home-category:hover{
  transform:translate(3px,3px) !important;
  box-shadow:3px 3px 0 var(--ink) !important;
  border-color:var(--ink) !important;
}
.home-category-title{ color:var(--ink) !important; font-family:var(--font-display) !important; }

/* ---------- INPUTS ---------- */
.form-control,.form-select,textarea,
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number]{
  border:var(--bw) solid var(--ink) !important; background:var(--paper);
}
.form-control:focus,.form-select:focus,textarea:focus{
  border-color:var(--ink) !important; box-shadow:var(--sh-sm) !important; outline:none;
}

/* ---------- BADGES ---------- */
.badge{
  font-family:var(--font-mono) !important; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border:2px solid var(--ink) !important; color:var(--ink); background:var(--yellow); border-radius:0 !important;
}
.item-badge{ border:2px solid var(--ink) !important; }

/* ---------- ENLACES ---------- */
a.text-primary,.text-primary{ color:var(--ink) !important; }
a:hover{ color:var(--yellow); }

/* ---------- NAVBAR ---------- */
.navbar,header .navbar,.header:not(.header-bg):not(.header-home){
  border-bottom:var(--bw) solid var(--ink); background:var(--paper) !important;
}
.navbar .nav-link,.nav-bar-links a{ font-weight:600; position:relative; }
.navbar .nav-link.active,.nav-bar-links a.active{ font-weight:700; }

/* ---------- BARRA DE ANUNCIO ---------- */
.announcement,.announce,.top-announcement{
  background:var(--yellow) !important; color:var(--ink) !important;
  border-bottom:var(--bw) solid var(--ink); font-family:var(--font-body); font-weight:600;
}

/* =====================================================================
   PANAL HEXAGONAL en fondos
   ===================================================================== */
body{ position:relative; }
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31z' fill='none' stroke='%23111112' stroke-opacity='.10' stroke-width='2'/%3E%3C/svg%3E");
  background-size:56px 64px;
}
body>*{ position:relative; z-index:1; }

.footer .container,.footer .container-custom{ position:relative; z-index:1; }

/* =====================================================================
   HEADER OSCURO de paginas internas
   >>> REEMPLAZA la ruta por la de TU imagen del panal <<<
   ===================================================================== */
.header.header-bg{
  position:relative;
  background:#0b0b0e !important;
  overflow:hidden;
}
.header.header-bg .header-bg-img{ display:none !important; }
.header.header-bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(8,8,10,.85) 0%, rgba(8,8,10,.35) 35%, transparent 65%);
}
.header.header-bg .header-inner{ position:relative; z-index:2; }
.header.header-bg .header-title{ color:#FFFFFF !important; }
.header.header-bg .breadcrumb .link-title,
.header.header-bg .breadcrumb-item{ color:#FABF05 !important; }
.header.header-bg{ animation:bannerBreath 5s ease-in-out infinite; }
@keyframes bannerBreath{
  0%,100%{ filter:brightness(1) saturate(1); }
  50%    { filter:brightness(1.15) saturate(1.12); }
}
@media (prefers-reduced-motion: reduce){
  .header.header-bg{ animation:none; }
  .home-category,.card,.item,.btn{ transition:none; }
}

/* =====================================================================
   CAPA 2 — afinado
   ===================================================================== */
h1, h2,
.section-title, .section-header, .sec-title, .home-section-title,
.section-heading, .title-section, .home-title{
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--ink) !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}
.header.header-bg .header-title{ -webkit-text-fill-color:#FFFFFF !important; color:#FFFFFF !important; }

/* TESTIMONIOS */
.testimonial, .testimonial-item, .testimonial-card, .testimonials .card,
.testimonials-item, .testimonial-box, .home-testimonial{
  background: var(--paper) !important;
  border: 2.5px solid var(--yellow) !important;
  box-shadow: 0 0 16px 1px rgba(250,191,5,.55) !important;
  border-radius: 0 !important;
  padding: 26px !important;
  animation: testiGlow 3.2s ease-in-out infinite;
}
.testimonial:hover, .testimonial-item:hover, .testimonial-card:hover,
.testimonials .card:hover, .testimonial-box:hover, .home-testimonial:hover{
  box-shadow: 0 0 26px 3px rgba(250,191,5,.85) !important;
  transform: translateY(-3px);
}
@keyframes testiGlow{
  0%,100%{ box-shadow:0 0 14px 1px rgba(250,191,5,.45); }
  50%    { box-shadow:0 0 24px 3px rgba(250,191,5,.75); }
}

/* FOOTER negro + canvas del panal (animado, en footer.blade.php) */
.footer{ background:#111112 !important; position:relative; overflow:hidden; }
#footerHoney{ position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; opacity:.55; }
.footer-upper, .footer-lower{ position:relative; z-index:1; }
/* Velo oscuro para que el texto siempre se lea sobre el panal */
.footer-upper::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 120% at 30% 40%, rgba(17,17,18,.82) 0%, rgba(17,17,18,.5) 55%, transparent 100%);
}
.footer-upper{ position:relative; }
.footer .footer-text, .footer-copyright, .footer-link, .footer-title .h5,
.footer h5, .footer .h5{ text-shadow:0 1px 6px rgba(0,0,0,.9); }

/* BOLETIN */
.footer h1, .footer h2, .footer h3, .footer h4,
.footer-upper h1, .footer-upper h2, .footer-upper h3,
.footer .section-title, .footer .h2, .newsletter h2, .newsletter h3{
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: none !important;
}
.footer-text, .footer p, .footer-copyright{ color: var(--footer_text_color) !important; }
.footer-title .h5, .footer-title span{ color:#FFFFFF !important; }
.footer .form-control, .newsletter .form-control, .footer input[type=email]{
  border: 2.5px solid var(--yellow) !important;
  background: rgba(255,255,255,.04) !important;
  color: #FFFFFF !important;
}
.footer .form-control::placeholder{ color:#9a9aa2 !important; }

/* FILTROS / TABS */
.nav-pills .nav-link, .category-tabs .tab, .filter-tab, .categories-filter a{
  border: 2.5px solid var(--ink) !important; box-shadow: var(--sh-sm);
  background: var(--paper) !important; color: var(--ink) !important; font-weight:600;
  border-radius:0 !important;
}
.nav-pills .nav-link.active, .category-tabs .tab.active, .filter-tab.active,
.categories-filter a.active{
  background: var(--yellow) !important; color: var(--ink) !important; font-weight:700;
}

/* FAQ */
.faq-item, .accordion-item, .faq-box{
  border: 2.5px solid var(--ink) !important; box-shadow: var(--sh-sm);
  border-radius:0 !important; background: var(--paper) !important;
}
.faq-item.active, .accordion-item.active, .faq-box.active{ box-shadow: var(--sh) !important; }

@media (prefers-reduced-motion: reduce){
  .testimonial, .testimonial-item, .testimonial-card,
  .testimonials .card, .testimonial-box, .home-testimonial{ animation:none !important; }
}

/* =====================================================================
   HERO 2 COLUMNAS + BUSCADOR FULL + TARJETA
   ===================================================================== */
.header-home{
  position:relative; overflow:hidden;
  background:var(--paper) !important;
  border-bottom:var(--bw) solid var(--ink);
  padding:clamp(40px,4.4vw,64px) 0;
  min-height:auto !important;
}
#honeyCanvas{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  -webkit-mask-image:radial-gradient(130% 110% at 85% 50%,#000 50%,transparent 92%);
  mask-image:radial-gradient(130% 110% at 85% 50%,#000 50%,transparent 92%);
}
.header-home .container{ position:relative; z-index:1; }

.hero-search-top{ width:100%; margin:0 auto clamp(28px,3vw,42px); }
.hero-search-top form,
.hero-search-top .search-form{ width:100% !important; max-width:100% !important; margin:0 !important; }
.hero-search-top input[type="search"],
.hero-search-top input[type="text"]{ height:56px !important; font-size:1.05rem !important; }

.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,4vw,56px); align-items:center;
}
.hero-copy{ text-align:left; }

.hero-badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 15px;
  background:var(--yellow); border:var(--bw) solid var(--ink); box-shadow:var(--sh-sm);
  font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); margin-bottom:20px;
}

.header-home .header-title{
  text-align:left !important;
  font-family:var(--font-display) !important; font-weight:800 !important;
  font-size:clamp(2.2rem,4vw,3.6rem) !important; line-height:1.04 !important;
  letter-spacing:-.035em !important;
  color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important; background:none !important;
  margin:0; display:inline-block; position:relative;
}
.header-home .header-title::after{
  content:""; display:block; height:15px; width:min(70%,290px); margin-top:10px; background:var(--yellow);
}
.header-home .header-text{
  text-align:left !important; color:var(--muted) !important;
  max-width:44ch; margin:18px 0 24px; font-size:1.06rem !important;
}
.hero-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.hero-chips .chip{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
  border:var(--bw) solid var(--ink); background:var(--paper);
  font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
}

/* TARJETA (mock) */
.hero-visual{ display:flex; justify-content:center; }
.mock{ width:100%; max-width:440px; background:var(--paper); border:var(--bw) solid var(--ink); box-shadow:var(--sh-lg); }
.mock-top{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:var(--bw) solid var(--ink); }
.mock-dots{ display:flex; gap:6px; }
.mock-dots i{ width:11px; height:11px; border:2px solid var(--ink); display:block; }
.mock-dots i:first-child{ background:var(--ink); }
.mock-title{ margin-inline:auto; font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.mock-plan{ padding:3px 9px; background:var(--yellow); border:2px solid var(--ink); font-family:var(--font-mono); font-size:.68rem; font-weight:700; }
.mock-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px; }
.ms{ padding:12px 8px; border:var(--bw) solid var(--ink); text-align:center; }
.ms.on{ background:var(--yellow); }
.ms b{ display:block; font-family:var(--font-display); font-size:1.5rem; font-weight:800; line-height:1; }
.ms span{ font-family:var(--font-mono); font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.ms.on span{ color:var(--ink); }
.mock-mid{ display:grid; grid-template-columns:auto 1fr; gap:14px; padding:0 14px 14px; align-items:center; }
.honey-box{ width:104px; height:104px; border:var(--bw) solid var(--ink); display:grid; place-items:center; background:var(--paper); }
.honey-box svg{ width:84px; height:84px; }
.honey-box path{ fill:none; stroke:var(--ink); stroke-width:3; stroke-linejoin:round; }
.mock-info b{ font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.mock-info small{ display:block; color:var(--muted); font-family:var(--font-mono); font-size:.74rem; margin-bottom:9px; }
.bars{ display:flex; align-items:flex-end; gap:5px; height:44px; }
.bars i{ flex:1; background:var(--ink); border:2px solid var(--ink); }
.bars i.hi{ background:var(--yellow); animation:barPulse 2.4s ease-in-out infinite; }
@keyframes barPulse{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.82); } }
.mock-list{ border-top:var(--bw) solid var(--ink); }
.mock-list > b{ display:block; padding:11px 14px 4px; font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }
.mrow{ display:flex; align-items:center; gap:10px; padding:9px 14px; border-top:1.5px solid rgba(17,17,18,.12); font-size:.85rem; }
.mrow em{ width:26px; height:19px; display:grid; place-items:center; background:var(--yellow); border:2px solid var(--ink); font-family:var(--font-mono); font-size:.55rem; font-weight:700; font-style:normal; }
.mrow span:last-child{ margin-left:auto; color:var(--muted-2); font-family:var(--font-mono); font-size:.72rem; }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ margin-top:10px; }
  #honeyCanvas{
    -webkit-mask-image:radial-gradient(160% 100% at 50% 20%,#000 45%,transparent 88%);
    mask-image:radial-gradient(160% 100% at 50% 20%,#000 45%,transparent 88%);
  }
}
@media (prefers-reduced-motion: reduce){ .bars i.hi{ animation:none; } }

/* =====================================================================
   FIN
   ===================================================================== */

/* =====================================================================
   ENJAMBRE — BARRA DE BUSQUEDA STICKY (baja al hacer scroll)
   >>> AGREGAR AL FINAL del CSS personalizado <<<
   ===================================================================== */
.sticky-search{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1040;
  background:var(--paper);
  border-bottom:var(--bw) solid var(--ink);
  box-shadow:0 6px 0 -3px rgba(17,17,18,.12);
  transform:translateY(-100%);
  transition:transform .28s var(--ease);
  padding:12px 0;
}
.sticky-search.is-visible{ transform:translateY(0); }

.sticky-search form{
  display:flex; width:100%; margin:0;
  border:var(--bw) solid var(--ink);
  box-shadow:var(--sh-sm);
  background:var(--paper);
}
.sticky-search input[type="search"]{
  flex:1 1 auto; min-width:0;
  border:none !important; outline:none;
  background:transparent;
  padding:0 16px; height:46px;
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
}
.sticky-search input::placeholder{ color:var(--muted-2); }
.sticky-search button{
  flex:0 0 auto;
  border:none; border-left:var(--bw) solid var(--ink);
  background:var(--yellow); color:var(--ink);
  font-family:var(--font-body); font-weight:700;
  padding:0 22px; cursor:pointer;
  display:inline-flex; align-items:center;
  transition:background .12s;
}
.sticky-search button:hover{ background:var(--yellow-lite); }

/* =====================================================================
   FIN BARRA STICKY
   ===================================================================== */

/* =====================================================================
   ENJAMBRE — Secciones tipo landing (base + Por que Enjambre)
   >>> AGREGAR AL FINAL del CSS personalizado <<<
   ===================================================================== */

/* Base de secciones (reutilizable para las demas) */
.ej-sec{ position:relative; padding:clamp(52px,6vw,88px) 0; background:var(--paper); z-index:1; }
.ej-sec--cream{ background:var(--cream); border-top:var(--bw) solid var(--ink); border-bottom:var(--bw) solid var(--ink); }
.ej-sec--ink{ background:var(--ink); color:var(--paper); }
.ej-head{ text-align:center; max-width:760px; margin:0 auto clamp(34px,4vw,54px); }
.ej-badge{
  display:inline-block; margin-bottom:18px; padding:7px 14px;
  background:var(--yellow); border:var(--bw) solid var(--ink); box-shadow:var(--sh-sm);
  font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink);
}
.ej-head h2{
  font-family:var(--font-display) !important; font-weight:800 !important;
  font-size:clamp(1.9rem,3.4vw,3rem) !important; line-height:1.06; letter-spacing:-.03em;
  color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important; background:none !important; margin:0;
}
.ej-sec--ink .ej-head h2{ color:var(--paper) !important; -webkit-text-fill-color:var(--paper) !important; }

/* Grid de "Por que" */
.ej-whys{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.ej-why{
  background:var(--paper); border:var(--bw) solid var(--ink); box-shadow:var(--sh);
  padding:26px 22px; transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}
.ej-why:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink); }
.ej-ico{
  display:grid; place-items:center; width:56px; height:56px; margin-bottom:16px;
  background:var(--yellow); border:var(--bw) solid var(--ink);
}
.ej-ico svg{ width:30px; height:30px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ej-why h3{
  font-family:var(--font-display) !important; font-weight:800; font-size:1.12rem;
  letter-spacing:-.02em; margin:0 0 8px; color:var(--ink) !important;
}
.ej-why p{ color:var(--muted); font-size:.96rem; line-height:1.5; margin:0; }

@media (max-width:992px){ .ej-whys{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .ej-whys{ grid-template-columns:1fr; } }

/* =====================================================================
   FIN Por que Enjambre
   ===================================================================== */

/* =====================================================================
   ENJAMBRE — Seccion COMO FUNCIONA (3 pasos)
   >>> AGREGAR AL FINAL del CSS personalizado <<<
   ===================================================================== */
.ej-head p{ color:var(--muted); font-size:1.05rem; margin:14px auto 0; max-width:52ch; }
.ej-sec--ink .ej-head p{ color:rgba(255,255,255,.7); }

.ej-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ej-step{
  position:relative; background:var(--paper); border:var(--bw) solid var(--ink); box-shadow:var(--sh);
  padding:30px 24px 26px; transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}
.ej-step:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink); }
.ej-step-n{
  position:absolute; top:-18px; right:20px;
  width:44px; height:44px; display:grid; place-items:center;
  background:var(--ink); color:var(--paper);
  border:var(--bw) solid var(--ink);
  font-family:var(--font-display); font-weight:800; font-size:1.3rem;
}
.ej-step .ej-ico{ margin-bottom:16px; }
.ej-step h3{
  font-family:var(--font-display) !important; font-weight:800; font-size:1.18rem;
  letter-spacing:-.02em; margin:0 0 8px; color:var(--ink) !important;
}
.ej-step p{ color:var(--muted); font-size:.96rem; line-height:1.5; margin:0; }

@media (max-width:860px){ .ej-steps{ grid-template-columns:1fr; gap:30px; } }

/* =====================================================================
   FIN COMO FUNCIONA
   ===================================================================== */

/* =====================================================================
   ENJAMBRE — Seccion STATS (barra de cifras)
   >>> AGREGAR AL FINAL del CSS personalizado <<<
   ===================================================================== */
.ej-stats-sec{ position:relative; padding:clamp(30px,4vw,50px) 0; background:var(--cream); z-index:1; border-bottom:var(--bw) solid var(--ink); }
.ej-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:var(--bw) solid var(--ink); box-shadow:var(--sh-lg);
  background:var(--paper); position:relative;
}
.ej-stats::before{
  content:""; position:absolute; top:calc(var(--bw) * -1); left:0; right:0; height:7px;
  background:var(--yellow); border-bottom:var(--bw) solid var(--ink);
}
.ej-stat{ padding:clamp(22px,2.4vw,32px) 14px; text-align:center; border-right:var(--bw) solid var(--ink); }
.ej-stat:last-child{ border-right:none; }
.ej-stat b{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.8rem,2.8vw,2.6rem); line-height:1; color:var(--ink); margin-bottom:8px;
}
.ej-stat span{
  font-family:var(--font-mono); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
@media (max-width:760px){
  .ej-stats{ grid-template-columns:repeat(2,1fr); }
  .ej-stat:nth-child(2){ border-right:none; }
  .ej-stat:nth-child(1),.ej-stat:nth-child(2){ border-bottom:var(--bw) solid var(--ink); }
}

/* =====================================================================
   FIN STATS
   ===================================================================== */

/* =====================================================================
   ENJAMBRE — Seccion PRECIOS (cascaron -> /premium)
   >>> AGREGAR AL FINAL del CSS personalizado <<<
   ===================================================================== */
.ej-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.ej-plan{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper); border:var(--bw) solid var(--ink); box-shadow:var(--sh);
  padding:30px 26px; transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}
.ej-plan:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink); }
.ej-plan--pop{ box-shadow:var(--sh-lg); }
.ej-plan--pop:hover{ transform:translate(4px,4px); box-shadow:5px 5px 0 var(--ink); }
.ej-pop-tag{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  padding:6px 14px; background:var(--ink); color:var(--paper);
  border:var(--bw) solid var(--ink);
  font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.ej-plan-ico{
  width:56px; height:56px; display:grid; place-items:center; margin-bottom:16px;
  background:var(--yellow); border:var(--bw) solid var(--ink);
}
.ej-plan-ico svg{ width:30px !important; height:30px !important; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ej-pname{ font-family:var(--font-mono); font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ej-pprice{ display:flex; align-items:baseline; gap:6px; margin:6px 0 10px; }
.ej-pnum{ font-family:var(--font-display); font-weight:800; font-size:2.6rem; line-height:1; color:var(--ink); letter-spacing:-.03em; }
.ej-pper{ font-family:var(--font-mono); font-size:.8rem; font-weight:700; color:var(--muted); }
.ej-pdesc{ color:var(--muted); font-size:.95rem; line-height:1.5; margin:0 0 18px; }
.ej-plan ul{ list-style:none; padding:0; margin:0 0 22px; display:grid; gap:10px; }
.ej-plan li{ display:flex; align-items:flex-start; gap:10px; font-size:.95rem; color:var(--ink); }
.ej-tick{ flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center; background:var(--yellow); border:2px solid var(--ink); }
.ej-tick svg{ width:13px !important; height:13px !important; fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.ej-plan .ej-plan-cta{
  margin-top:auto; display:inline-flex; align-items:center; justify-content:center;
  padding:13px 18px; font-family:var(--font-body); font-weight:700; font-size:1rem;
  border:var(--bw) solid var(--ink); box-shadow:var(--sh-sm);
  background:var(--paper); color:var(--ink); text-decoration:none;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .12s;
}
.ej-plan .ej-plan-cta:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); background:var(--yellow); }
.ej-plan--pop .ej-plan-cta{ background:var(--ink); color:var(--paper); }
.ej-plan--pop .ej-plan-cta:hover{ background:var(--ink-2); color:var(--paper); }
.ej-pnote{ display:block; text-align:center; margin-top:12px; font-family:var(--font-mono); font-size:.72rem; color:var(--muted-2); }
.ej-plegal{ text-align:center; margin:34px auto 0; max-width:60ch; color:var(--muted); font-size:.88rem; }

@media (max-width:900px){ .ej-plans{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }

/* =====================================================================
   FIN PRECIOS
   ===================================================================== */

/* Latido sutil de la etiqueta Mas popular */
.ej-pop-tag{ animation:popBeat 2.6s ease-in-out infinite; }
@keyframes popBeat{ 0%,100%{ transform:translateX(-50%) scale(1); } 50%{ transform:translateX(-50%) scale(1.06); } }
@media (prefers-reduced-motion: reduce){ .ej-pop-tag{ animation:none; } }

/* =====================================================================
   ENJAMBRE — CTA FINAL (seccion negra de cierre)
   >>> AGREGAR AL FINAL del CSS personalizado <<<
   ===================================================================== */
.ej-cta{ text-align:center; }
.ej-cta .ej-badge{ background:var(--paper); color:var(--ink); }
.ej-cta h2{
  font-family:var(--font-display) !important; font-weight:800 !important;
  font-size:clamp(2rem,4vw,3.4rem) !important; line-height:1.05; letter-spacing:-.03em;
  color:var(--paper) !important; -webkit-text-fill-color:var(--paper) !important; background:none !important;
  margin:0 0 16px;
}
.ej-cta h2 em{ font-style:normal; background:var(--yellow); color:var(--ink); -webkit-text-fill-color:var(--ink); padding:0 10px; }
.ej-cta p{ color:rgba(255,255,255,.72); font-size:1.1rem; max-width:52ch; margin:0 auto 28px; }
.ej-cta-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; background:var(--yellow); color:var(--ink); text-decoration:none;
  border:var(--bw) solid var(--paper); box-shadow:6px 6px 0 rgba(255,255,255,.25);
  font-family:var(--font-body); font-weight:700; font-size:1.05rem;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .12s;
}
.ej-cta-btn:hover{ transform:translate(2px,2px); box-shadow:3px 3px 0 rgba(255,255,255,.25); background:var(--yellow-lite); color:var(--ink); }
.ej-cta-btn svg{ width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.ej-cta small{ display:block; margin-top:18px; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em; color:rgba(255,255,255,.55); }

/* =====================================================================
   FIN CTA FINAL
   ===================================================================== */
/* =====================================================================
   ENJAMBRE — FIX: panal del header interno + menu sin apreturas
   >>> AGREGAR AL FINAL del CSS personalizado <<<
   ===================================================================== */

/* ---------------------------------------------------------------
   1) HEADER OSCURO de paginas internas: mismo panal que el hero
      (anula la imagen placeholder que quedo sin ruta)
   --------------------------------------------------------------- */
.header.header-bg{
  background:#111112 !important;
  background-image:none !important;
  position:relative;
  overflow:hidden;
}
.header.header-bg .header-bg-img{ display:none !important; }

/* Panal amarillo, mismo trazo y tamano que el hero */
.header.header-bg::before{
  content:"";
  position:absolute; inset:-10px; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31z' fill='none' stroke='%23FABF05' stroke-width='2'/%3E%3C/svg%3E");
  background-size:56px 64px;
  opacity:.20;
  animation:hdrHoneyPulse 5s ease-in-out infinite;
}
/* Brillo suave a la derecha, como el hero */
.header.header-bg::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 100% at 85% 50%, rgba(250,191,5,.16) 0%, transparent 65%),
    linear-gradient(90deg, rgba(17,17,18,.85) 0%, rgba(17,17,18,.45) 45%, transparent 80%) !important;
}
@keyframes hdrHoneyPulse{
  0%,100%{ opacity:.14; }
  50%    { opacity:.28; }
}
/* Contenido del header siempre por encima */
.header.header-bg .header-inner,
.header.header-bg .container,
.header.header-bg .container-custom{ position:relative; z-index:2; }
.header.header-bg .header-title{ color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; }
.header.header-bg .breadcrumb .link-title,
.header.header-bg .breadcrumb-item,
.header.header-bg .breadcrumb a{ color:#FABF05 !important; }

/* ---------------------------------------------------------------
 /* =====================================================================
   ENJAMBRE — FIX 2: panal REAL entrelazado (misma calidad que el hero)
   >>> BORRA el bloque anterior "FIX: panal del header interno" y pega ESTE <<<
   Geometria identica al canvas del hero: hexagono R=30 (mosaico 52x90)
   ===================================================================== */

/* ---------------------------------------------------------------
   1) HEADER OSCURO de paginas internas
   --------------------------------------------------------------- */
.header.header-bg{
  background:#111112 !important;
  background-image:none !important;
  position:relative;
  overflow:hidden;
}
.header.header-bg .header-bg-img{ display:none !important; }

/* Panal amarillo entrelazado, mismo tamano que el hero */
.header.header-bg::before{
  content:"";
  position:absolute; inset:-20px; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cpath d='M0 -30L26 -15L26 15L0 30L-26 15L-26 -15Z M52 -30L78 -15L78 15L52 30L26 15L26 -15Z M26 15L52 30L52 60L26 75L0 60L0 30Z M0 60L26 75L26 105L0 120L-26 105L-26 75Z M52 60L78 75L78 105L52 120L26 105L26 75Z' fill='none' stroke='%23FABF05' stroke-width='2'/%3E%3C/svg%3E");
  background-size:52px 90px;
  opacity:.26;
  animation:hdrHoneyPulse 5s ease-in-out infinite;
}
/* Racimo de hexagonos encendidos a la derecha (como el hero) */
.header.header-bg::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(48% 90% at 88% 50%, rgba(250,191,5,.20) 0%, transparent 70%),
    linear-gradient(90deg, rgba(17,17,18,.88) 0%, rgba(17,17,18,.45) 45%, transparent 82%) !important;
}
@keyframes hdrHoneyPulse{
  0%,100%{ opacity:.18; }
  50%    { opacity:.34; }
}
.header.header-bg .header-inner,
.header.header-bg .container,
.header.header-bg .container-custom{ position:relative; z-index:2; }
.header.header-bg .header-title{ color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; }
.header.header-bg .breadcrumb .link-title,
.header.header-bg .breadcrumb-item,
.header.header-bg .breadcrumb a{ color:#FABF05 !important; }

/* ---------------------------------------------------------------
   2) PANAL DE FONDO general: mismo tejido, en negro tenue
   --------------------------------------------------------------- */
body::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cpath d='M0 -30L26 -15L26 15L0 30L-26 15L-26 -15Z M52 -30L78 -15L78 15L52 30L26 15L26 -15Z M26 15L52 30L52 60L26 75L0 60L0 30Z M0 60L26 75L26 105L0 120L-26 105L-26 75Z M52 60L78 75L78 105L52 120L26 105L26 75Z' fill='none' stroke='%23111112' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-size:52px 90px !important;
  opacity:.10 !important;
}

/* ---------------------------------------------------------------
   3) MENU: nada partido en dos lineas + mas compacto
   --------------------------------------------------------------- */
.nav-bar-links .link,
.nav-bar-links .link-title,
.nav-bar-links .link-title span,
.nav-bar-links .drop-down-btn,
.nav-bar-links .drop-down-btn span,
.nav-bar-links a,
.nav-bar-actions .user-menu,
.nav-bar-actions .user-menu *,
.user-menu-name, .user-name{
  white-space:nowrap !important;
}
.nav-bar-links{ align-items:center; column-gap:0; }
.nav-bar-links .link,
.nav-bar-links .drop-down-btn{ padding-left:8px; padding-right:8px; }

@media (min-width:1200px) and (max-width:1600px){
  .nav-bar-links .link-title span,
  .nav-bar-links .drop-down-btn span{ font-size:.92rem; }
  .nav-bar-links .link,
  .nav-bar-links .drop-down-btn{ padding-left:6px; padding-right:6px; }
  .nav-bar-container .logo img{ max-height:34px; }
}

/* =====================================================================
   FIN FIX 2
   ===================================================================== */
/* =====================================================================
   ENJAMBRE — FIX: categorias encimadas sobre la barra de Stats
   Causa: el tema trae margen negativo en la seccion de categorias
   >>> AGREGAR AL FINAL del CSS personalizado <<<
   ===================================================================== */

/* La barra de Stats manda en el apilado y no se deja encimar */
.ej-stats-sec{
  position:relative;
  z-index:5;
  margin-bottom:0;
  padding-bottom:clamp(30px,4vw,50px);
}

/* La seccion que sigue (categorias) pierde el margen negativo del tema */
.ej-stats-sec + *{
  margin-top:0 !important;
  padding-top:clamp(40px,5vw,72px) !important;
  position:relative;
  z-index:1;
}
.ej-stats-sec + * > .container,
.ej-stats-sec + * > .container-custom,
.ej-stats-sec + * .container,
.ej-stats-sec + * .container-custom{
  margin-top:0 !important;
}

/* Refuerzo: cualquier contenedor de tarjetas de categoria sin margen negativo */
section:has(.home-category),
div:has(> .container > .row > .col .home-category){
  margin-top:0 !important;
}

/* Que las tarjetas nunca se dibujen encima de la barra de Stats */
.home-category{ position:relative; z-index:1; }

/* =====================================================================
   FIN FIX categorias
   ===================================================================== */
/* =====================================================================
   ENJAMBRE — Logo mas grande sin que crezca la barra del menu
   >>> AGREGAR AL FINAL del CSS personalizado <<<
   ===================================================================== */

/* Logo mas amplio */
.nav-bar-container .logo img,
.nav-bar .logo img{
  max-height:52px !important;
  height:auto !important;
  width:auto !important;
}

/* La barra compensa reduciendo su padding vertical (misma altura) */
.nav-bar .nav-bar-container{
  padding-top:4px !important;
  padding-bottom:4px !important;
}

/* En pantallas medianas, un pelin menos para que todo siga cabiendo */
@media (min-width:1200px) and (max-width:1600px){
  .nav-bar-container .logo img,
  .nav-bar .logo img{ max-height:46px !important; }
}

/* =====================================================================
   FIN logo
   ===================================================================== */
/* =====================================================================
 /* =====================================================================
   ENJAMBRE — Aviso cookies FIX 2 (forzar boton Entendido visible)
   >>> BORRA el bloque anterior de cookies y pega ESTE <<<
   ===================================================================== */
.cookies{
  border:var(--bw) solid var(--ink) !important;
  box-shadow:var(--sh) !important;
  border-radius:0 !important;
  background:var(--paper) !important;
  padding:22px 20px !important;
}
.cookies-text{ color:var(--ink) !important; font-family:var(--font-body); }

.cookies .d-flex{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  margin-top:10px !important;
}

/* Boton ENTENDIDO — forzado a verse (tamano, color, visibilidad) */
button#acceptCookie{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  width:auto !important;
  min-width:130px !important;
  height:auto !important;
  min-height:44px !important;
  align-items:center !important;
  justify-content:center !important;
  background:#FABF05 !important;
  color:#111112 !important;
  border:2.5px solid #111112 !important;
  box-shadow:4px 4px 0 #111112 !important;
  border-radius:0 !important;
  font-family:var(--font-body) !important;
  font-weight:700 !important;
  font-size:1rem !important;
  line-height:1 !important;
  padding:12px 26px !important;
  cursor:pointer !important;
  overflow:visible !important;
  white-space:nowrap !important;
}
button#acceptCookie:hover{
  background:#FFD60A !important;
  transform:translate(2px,2px) !important;
  box-shadow:2px 2px 0 #111112 !important;
}

/* Boton "Mas" (secundario) */
.cookies a.btn-outline-primary{
  display:inline-flex !important;
  align-items:center !important;
  background:#FFFFFF !important;
  color:#111112 !important;
  border:2.5px solid #111112 !important;
  box-shadow:4px 4px 0 #111112 !important;
  border-radius:0 !important;
  font-weight:700 !important;
  padding:12px 22px !important;
  min-height:44px !important;
}
.cookies a.btn-outline-primary:hover{ background:#FABF05 !important; }

/* =====================================================================
   FIN cookies FIX 2
   ===================================================================== */
/* ============================================================
   ENJAMBRE - Navbar responsivo
   Pegar al FINAL del CSS personalizado, reemplazando el bloque
   anterior de "barra a todo lo ancho" y "logo mas grande".
   ============================================================ */

/* ---------- 1. Barra a todo lo ancho ---------- */
.nav-bar .container.container-custom{
  max-width: 100% !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* ---------- 2. Alto fijo de barra + logo grande (escritorio) ---------- */
.nav-bar .nav-bar-container{
  min-height: 72px;
  max-height: 72px;
}
.nav-bar .logo{
  display: flex;
  align-items: center;
  height: 72px;
  overflow: visible;
  flex-shrink: 0;
}
.nav-bar .logo img{
  height: 62px !important;
  max-height: 62px !important;
  width: auto !important;
}

/* ---------- 3. Nada se desborda nunca ---------- */
.nav-bar .nav-bar-container{
  flex-wrap: nowrap;
}
.nav-bar .nav-bar-actions{
  flex-shrink: 0;
  white-space: nowrap;
}

/* ============================================================
   4. Que el menu horizontal QUEPA en laptops
   El menu completo necesita ~1615px. En laptops de 1440 o 1536
   no cabe y corta el boton de sesion. En vez de mandar todo a
   hamburguesa, se compacta por niveles: primero el espaciado,
   luego la tipografia, luego el logo.
   ============================================================ */

/* --- Nivel 1: 1550 a 1699px (necesita ~1432px) --- */
@media (min-width: 1550px) and (max-width: 1699.98px){
  .nav-bar .logo{ height: 64px; }
  .nav-bar .logo img{
    height: 55px !important;
    max-height: 55px !important;
  }
  .nav-bar .link:not(:last-child),
  .nav-bar .drop-down:not(:last-child){ margin-right: 10px !important; }
  .nav-bar .link-btn:not(:last-child){ margin-right: 8px !important; }
  .nav-bar .link,
  .nav-bar .drop-down-btn{ font-size: 14.5px !important; }
  .nav-bar .nav-bar-buttons{ padding-inline-start: 8px !important; }
  .nav-bar .container.container-custom{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* --- Nivel 2: 1400 a 1549px (necesita ~1249px) --- */
@media (min-width: 1400px) and (max-width: 1549.98px){
  .nav-bar .logo{ height: 60px; }
  .nav-bar .logo img{
    height: 48px !important;
    max-height: 48px !important;
  }
  .nav-bar .link:not(:last-child),
  .nav-bar .drop-down:not(:last-child){ margin-right: 8px !important; }
  .nav-bar .link-btn:not(:last-child){ margin-right: 6px !important; }
  .nav-bar .link,
  .nav-bar .drop-down-btn{ font-size: 13.5px !important; }
  .nav-bar .nav-bar-buttons{ padding-inline-start: 6px !important; }
  .nav-bar .container.container-custom{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* boton Premium mas angosto */
  .nav-bar .link-btn .btn{
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 13.5px !important;
  }
  /* nombre de usuario recortado con puntos suspensivos */
  .nav-bar .nav-bar-actions .drop-down-btn span,
  .nav-bar .nav-bar-actions .user-name{
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
  }
}

/* ---------- 5. 1700 a 1899px: solo un pelin mas juntos ---------- */
@media (min-width: 1700px) and (max-width: 1899.98px){
  .nav-bar .link:not(:last-child),
  .nav-bar .drop-down:not(:last-child){ margin-right: 16px !important; }
  .nav-bar .container.container-custom{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---------- 6. Tabletas y celulares: logo mas chico ---------- */
@media (max-width: 991.98px){
  .nav-bar .nav-bar-container{
    min-height: 62px;
    max-height: 62px;
  }
  .nav-bar .logo{ height: 62px; }
  .nav-bar .logo img{
    height: 42px !important;
    max-height: 42px !important;
  }
  .nav-bar .container.container-custom{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ---------- 7. Celulares chicos ---------- */
@media (max-width: 575.98px){
  .nav-bar .nav-bar-container{
    min-height: 56px;
    max-height: 56px;
  }
  .nav-bar .logo{ height: 56px; }
  .nav-bar .logo img{
    height: 34px !important;
    max-height: 34px !important;
  }
}

/* =====================================================================
   MINIATURAS DE PRODUCTO EN LA REJILLA
   El tema fijaba .item-img en height:180px y .item-img img en 100%/100%
   sin object-fit, asi que estiraba la imagen. Las portadas de Enjambre
   son 1200x750 = 8/5 exacto: dandole ese aspect-ratio a la caja no se
   recorta ni se deforma nada, y las tarjetas quedan todas iguales.
   ===================================================================== */
.item .item-img:not(.item-img-sm):not(.item-img-xs){
  height:auto;
  aspect-ratio:8 / 5;
}
.item-img img{
  object-fit:cover;
}
/* ===== FIN miniaturas ===== */

/* =====================================================================
   ENJAMBRE - Descargas restantes del plan (panel de producto)
   Se muestra debajo del boton de descarga premium. Los valores salen de
   Subscription::remainingDownloads() y remainingToday().
   ===================================================================== */
.enj-creditos{
  border:2.5px solid #111112;
  background:#FEFBEA;
  padding:12px 14px;
  text-align:left;
}
.enj-creditos-fila{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.78rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#111112;
}
.enj-creditos-fila + .enj-creditos-fila{ margin-top:7px; }
.enj-creditos-fila strong{
  font-family:"Sora",system-ui,sans-serif;
  font-weight:800;
  font-size:1.05rem;
  line-height:1;
  letter-spacing:-.02em;
}
.enj-creditos-tope{
  font-weight:600;
  font-size:.8rem;
  opacity:.55;
}
.enj-barra{
  height:9px;
  margin-top:9px;
  background:#fff;
  border:2px solid #111112;
  overflow:hidden;
}
.enj-barra-relleno{
  height:100%;
  background:#FABF05;
  transition:width .35s ease;
}
.enj-creditos-hoy strong,
.enj-creditos-fecha strong{ font-size:.9rem; }
.enj-creditos-fecha{ opacity:.72; }
.enj-creditos-fecha strong{ font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:700; }
/* ===== FIN descargas restantes ===== */
/* === ENJ:LEGALES INICIO === */
/* =========================================================
   ENJAMBRE - Paginas de contenido (legales) - D_RETRO
   Pegar al final de Apariencia > Temas > CSS personalizado
   Alcance: SOLO el contenedor .enj-legal de las paginas legales
   ========================================================= */

/* ---------- Ancho de lectura y ritmo ---------- */
.enj-legal{
  font-family:var(--font-body);
  max-width:62rem;
  margin-left:auto;
  margin-right:auto;
}
.enj-legal > p,
.enj-legal > ul,
.enj-legal > ol,
.enj-legal > h2,
.enj-legal > h3,
.enj-legal > table{ max-width:none; }

.enj-legal p{
  font-size:1.02rem;
  line-height:1.72;
  color:var(--ink);
  margin:0 0 1.05rem;
}
.enj-legal p em{ color:var(--muted); font-style:normal; font-family:var(--font-mono); font-size:.82rem; }
.enj-legal strong{ font-weight:700; }

/* ---------- Encabezados con barra amarilla ---------- */
.enj-legal h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.42rem;
  letter-spacing:-.035em;
  line-height:1.2;
  color:var(--ink);
  margin:2.6rem 0 1rem;
  padding:0 0 .55rem .9rem;
  border-left:var(--bw) solid var(--yellow);
  border-bottom:var(--bw) solid var(--ink);
}
.enj-legal h2:first-child{ margin-top:.6rem; }

.enj-legal h3{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.06rem;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:1.7rem 0 .7rem;
}
.enj-legal h3::before{
  content:"";
  display:inline-block;
  width:.62rem; height:.62rem;
  margin-right:.5rem;
  background:var(--yellow);
  border:2px solid var(--ink);
  vertical-align:middle;
}

/* ---------- Listas ---------- */
.enj-legal ul{
  list-style:none;
  padding-left:0;
  margin:0 0 1.25rem;
}
.enj-legal ul li{
  position:relative;
  padding-left:1.5rem;
  margin-bottom:.6rem;
  line-height:1.66;
}
.enj-legal ul li::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width:.5rem; height:.5rem;
  background:var(--yellow);
  border:2px solid var(--ink);
}

/* ---------- Tablas D_RETRO ---------- */
.enj-legal table{
  width:100%;
  border-collapse:collapse;
  border:var(--bw) solid var(--ink);
  box-shadow:var(--sh);
  background:var(--paper);
  margin:1.4rem 0 2.1rem;
  font-size:.92rem;
}
.enj-legal table th{
  background:var(--yellow);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.74rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  text-align:left;
  padding:.7rem .85rem;
  border:2px solid var(--ink);
  vertical-align:middle;
}
.enj-legal table td{
  padding:.66rem .85rem;
  border:2px solid var(--ink);
  color:var(--ink);
  line-height:1.5;
  vertical-align:top;
}
.enj-legal table tr:nth-child(even) td{ background:var(--cream); }
.enj-legal table td:first-child{ font-weight:600; }

/* ---------- Tablas en pantallas chicas: scroll horizontal ---------- */
@media (max-width:767.98px){
  .enj-legal table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    box-shadow:var(--sh-sm);
    font-size:.84rem;
  }
  .enj-legal table th,
  .enj-legal table td{ padding:.55rem .6rem; }
  .enj-legal h2{ font-size:1.2rem; margin-top:2rem; }
}
/* === ENJ:LEGALES FIN === */

/* === ENJ:PANAL INICIO === */
/* UNA SOLA CAPA. Sin velos ni mascaras.
   Medido con el canvas al 100% de amarillo: con mascara el borde derecho
   marcaba 48 y el centro 37 (de ahi la mancha en L). Sin mascara ni velo
   queda parejo: 38 en TODAS las columnas. La intensidad se controla solo
   con la opacidad del canvas, que es lo unico que hay encima del fondo. */

/* ---------- HERO ---------- */
#honeyCanvas{
  opacity:.75 !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
/* Se anula el velo blanco: creaba una segunda capa con borde visible */
.header-home::after{ content:none !important; display:none !important; }

/* ---------- FOOTER ---------- */
#footerHoney{ opacity:.22 !important; }
/* El velo del footer era otro radial que terminaba en transparent:
   mismo defecto, borde derecho e inferior sin atenuar. Se anulan los dos. */
.footer-upper::before{ content:none !important; display:none !important; }
.footer::after{ content:none !important; display:none !important; }
/* === ENJ:PANAL FIN === */
/* === ENJ:NEGRO INICIO === */
/* Pasa a fondo negro el hero, la barra de estadisticas y las dos secciones crema.
   Las tarjetas se quedan BLANCAS: la sombra solida cambia de negro a amarillo,
   porque negro sobre negro no se ve y las tarjetas quedarian planas.
   No se toca ningun texto que viva dentro de una tarjeta blanca. */

:root{
  --enj-negro:#0E0E12;
  --enj-negro-2:#141418;
  --enj-txt:#EDEDF2;
  --enj-txt-2:#9C9CA8;
  --enj-txt-3:#84848E;
  --enj-panal:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MC4wNyIgaGVpZ2h0PSIxNTYuMDAiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiIHN0cm9rZS13aWR0aD0iMi4yIj48cGF0aCBkPSJNNDUuMDMgLTUyLjAwIEw5MC4wNyAtMjYuMDAgTDkwLjA3IDI2LjAwIEw0NS4wMyA1Mi4wMCBMLTAuMDAgMjYuMDAgTDAuMDAgLTI2LjAwWiIvPjxwYXRoIGQ9Ik00NS4wMyAxMDQuMDAgTDkwLjA3IDEzMC4wMCBMOTAuMDcgMTgyLjAwIEw0NS4wMyAyMDguMDAgTC0wLjAwIDE4Mi4wMCBMMC4wMCAxMzAuMDBaIi8+PHBhdGggZD0iTTAuMDAgMjYuMDAgTDQ1LjAzIDUyLjAwIEw0NS4wMyAxMDQuMDAgTDAuMDAgMTMwLjAwIEwtNDUuMDMgMTA0LjAwIEwtNDUuMDMgNTIuMDBaIi8+PHBhdGggZD0iTTkwLjA3IDI2LjAwIEwxMzUuMTAgNTIuMDAgTDEzNS4xMCAxMDQuMDAgTDkwLjA3IDEzMC4wMCBMNDUuMDMgMTA0LjAwIEw0NS4wMyA1Mi4wMFoiLz48L2c+PC9zdmc+");
  --enj-panal-tam:90.07px 156.00px;
}

/* ---------------- HERO ---------------- */
.header-home{
  background-color:var(--enj-negro) !important;
  background-image:var(--enj-panal) !important;
  background-size:var(--enj-panal-tam) !important;
  background-repeat:repeat !important;
  border-bottom:var(--bw) solid var(--yellow);
}
/* el canvas del panal ya existe: se le quita la mascara para que cubra parejo */
#honeyCanvas{
  opacity:.9 !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
.header-home .header-title{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
.header-home .header-text{ color:var(--enj-txt-2) !important; }
/* la sombra del badge era negra: sobre negro no se veia */
.header-home .hero-badge{ box-shadow:4px 4px 0 #FFFFFF; }
.header-home .hero-chips .chip{
  background:rgba(255,214,10,.07);
  border-color:var(--yellow);
  color:var(--enj-txt);
  box-shadow:4px 4px 0 var(--yellow);
}
/* la tarjeta del catalogo se queda blanca, con sombra amarilla */
.header-home .mock{ box-shadow:9px 9px 0 var(--yellow) !important; }
/* resplandor detras de la tarjeta para que no flote en el vacio */
.header-home .hero-visual{ position:relative; }
.header-home .hero-visual::before{
  content:""; position:absolute; left:50%; top:50%; width:96%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; z-index:0; pointer-events:none;
  filter:blur(20px);
  background:radial-gradient(circle,rgba(255,214,10,.15),rgba(255,214,10,.04) 46%,transparent 70%);
  animation:enjPulso 6s ease-in-out infinite;
}
.header-home .hero-visual > *{ position:relative; z-index:1; }
@keyframes enjPulso{
  0%,100%{ opacity:.72; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.07); }
}
/* el buscador del hero sobre fondo oscuro */
.header-home .hero-search-top input[type="search"],
.header-home .hero-search-top input[type="text"]{
  background:var(--enj-negro-2) !important;
  border-color:var(--yellow) !important;
  color:var(--enj-txt) !important;
}
.header-home .hero-search-top input::placeholder{ color:var(--enj-txt-3) !important; }

/* ---------------- BARRA DE ESTADISTICAS ---------------- */
.ej-stats-sec{
  background-color:var(--enj-negro) !important;
  background-image:var(--enj-panal) !important;
  background-size:var(--enj-panal-tam) !important;
  background-repeat:repeat !important;
  border-bottom:var(--bw) solid var(--yellow);
}
.ej-stats{ box-shadow:9px 9px 0 var(--yellow); }

/* ---------------- SECCIONES QUE ERAN CREMA ---------------- */
/* "El poder de una gran agencia" y "Elige como quieres descargar" */
.ej-sec--cream{
  background-color:var(--enj-negro) !important;
  background-image:var(--enj-panal) !important;
  background-size:var(--enj-panal-tam) !important;
  background-repeat:repeat !important;
  border-top:var(--bw) solid var(--yellow);
  border-bottom:var(--bw) solid var(--yellow);
  color:var(--enj-txt);
}
.ej-sec--cream .ej-head h2{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
.ej-sec--cream .ej-head p{ color:var(--enj-txt-2); }
.ej-sec--cream .ej-badge{ box-shadow:4px 4px 0 #FFFFFF; }

/* tarjetas de "por que enjambre" */
.ej-sec--cream .ej-why{ box-shadow:6px 6px 0 var(--yellow); }
.ej-sec--cream .ej-why:hover{ box-shadow:3px 3px 0 var(--yellow); }

/* tarjetas de planes */
.ej-sec--cream .ej-plan{ box-shadow:6px 6px 0 var(--yellow); }
.ej-sec--cream .ej-plan:hover{ box-shadow:3px 3px 0 var(--yellow); }
.ej-sec--cream .ej-plan--pop{ box-shadow:9px 9px 0 var(--yellow); }
.ej-sec--cream .ej-plan--pop:hover{ box-shadow:5px 5px 0 var(--yellow); }
/* la etiqueta "mas popular" era negra sobre crema: sobre negro se perdia */
.ej-sec--cream .ej-pop-tag{
  background:var(--yellow); color:var(--ink); border-color:var(--ink);
}
/* la nota legal vive FUERA de las tarjetas */
.ej-sec--cream .ej-plegal{ color:var(--enj-txt-3); }
.ej-sec--cream .ej-plegal a{ color:var(--yellow); }

@media (prefers-reduced-motion:reduce){
  .header-home .hero-visual::before{ animation:none; }
}

/* ---------------- CAPA DE LUZ DE LAS SECCIONES ---------------- */
/* el panal lo pinta el patron de fondo; este canvas solo pone la luz */
.ej-stats-sec, .ej-sec--cream{ position:relative; overflow:hidden; }
.ej-stats-sec > .container, .ej-sec--cream > .container{ position:relative; z-index:2; }
.enj-luz{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}

/* ---------------- MASCOTAS DEL HERO ---------------- */
.header-home .hero-visual{ position:relative; }
.header-home .hero-visual .mock{ position:relative; z-index:4; }
/* el tema pone position:relative a las imagenes: hay que ganarle */
.header-home .hero-visual .enj-abeja{
  position:absolute !important; z-index:6; height:auto !important;
  max-width:none; pointer-events:none;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.55));
}
.header-home .hero-visual .enj-abeja--temas{
  width:26% !important; right:-11%; top:-4%; left:auto; bottom:auto;
  animation:enjFlota 6.6s ease-in-out infinite;
}
.header-home .hero-visual .enj-abeja--plugins{
  width:26% !important; left:-12%; bottom:-6%; right:auto; top:auto;
  animation:enjFlota 7.4s ease-in-out infinite; animation-delay:-1.6s;
}
@keyframes enjFlota{
  0%,100%{ translate:0 0; rotate:0deg; }
  50%    { translate:0 -13px; rotate:-2deg; }
}
@media (max-width:1199.98px){
  .header-home .hero-visual .enj-abeja--temas{ width:23% !important; right:-6%; top:-11%; }
  .header-home .hero-visual .enj-abeja--plugins{ width:23% !important; left:-6%; bottom:-9%; }
}
@media (max-width:767.98px){ .header-home .hero-visual .enj-abeja{ display:none !important; } }
@media (prefers-reduced-motion:reduce){ .enj-abeja{ animation:none; } }

/* ---------------- TITULO Y BOTONES DEL HERO ---------------- */
.header-home .header-title .enj-acento{
  font-style:normal; color:var(--yellow);
  -webkit-text-fill-color:var(--yellow);
}
/* el subrayado amarillo del tema sobraba con el acento en color */
.header-home .header-title::after{ display:none; }
.header-home .header-text{ margin-bottom:26px; }
.enj-hero-btns{ display:flex; flex-wrap:wrap; gap:12px; margin:0 0 24px; }
.enj-btn{
  display:inline-flex; align-items:center; gap:9px; padding:15px 26px;
  border:var(--bw) solid var(--ink); font-family:var(--font-body);
  font-weight:700; font-size:.98rem; text-decoration:none; white-space:nowrap;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s;
}
.enj-btn--y{ background:var(--yellow); color:var(--ink); box-shadow:6px 6px 0 #FFFFFF; }
.enj-btn--y:hover{ background:var(--yellow-lite); color:var(--ink);
  transform:translate(3px,3px); box-shadow:3px 3px 0 #FFFFFF; }
.enj-btn--g{ background:transparent; color:#EDEDF2; border-color:var(--yellow);
  box-shadow:6px 6px 0 var(--yellow); }
.enj-btn--g:hover{ background:rgba(255,214,10,.08); color:#FFFFFF;
  transform:translate(3px,3px); box-shadow:3px 3px 0 var(--yellow); }
@media (max-width:560px){ .enj-btn{ padding:13px 20px; font-size:.92rem; } }

/* ---------------- MOVIL: que quepa la sombra solida ---------------- */
/* Las sombras se desplazan 6 y 9px a la derecha. En escritorio sobra
   margen, pero en movil la tarjeta llega al filo de la pantalla y la
   sombra se corta. Se le reserva ese espacio y se acorta el desplazamiento. */
@media (max-width:991.98px){
  .ej-stats,
  .ej-sec--cream .ej-why,
  .ej-sec--cream .ej-plan,
  .header-home .mock{
    margin-right:7px;
    box-shadow:6px 6px 0 var(--yellow);
  }
  .ej-sec--cream .ej-plan--pop{ box-shadow:6px 6px 0 var(--yellow); }
  .header-home .hero-chips .chip,
  .header-home .hero-badge,
  .ej-sec--cream .ej-badge{
    margin-right:5px;
    box-shadow:3px 3px 0 currentColor;
  }
  .header-home .hero-chips .chip{ box-shadow:3px 3px 0 var(--yellow); }
  .header-home .hero-badge,
  .ej-sec--cream .ej-badge{ box-shadow:3px 3px 0 #FFFFFF; }
  .enj-btn{ margin-right:6px; }
  .enj-btn--y{ box-shadow:4px 4px 0 #FFFFFF; }
  .enj-btn--g{ box-shadow:4px 4px 0 var(--yellow); }
  /* el hexagono del patron a escala del ancho de pantalla */
  .header-home, .ej-stats-sec, .ej-sec--cream{
    background-size:60px 104px !important;
  }
}
@media (max-width:575.98px){
  .ej-stats,
  .ej-sec--cream .ej-why,
  .ej-sec--cream .ej-plan,
  .ej-sec--cream .ej-plan--pop,
  .header-home .mock{
    margin-right:6px;
    box-shadow:5px 5px 0 var(--yellow);
  }
  .enj-hero-btns{ gap:10px; }
  .enj-btn{ padding:13px 18px; font-size:.9rem; }
}
/* === ENJ:NEGRO FIN === */