/*
Theme Name: CBD León Code (Definitivo PRO)
Theme URI: https://cbdleon.com/
Author: CBD León
Author URI: https://cbdleon.com/
Description: Tema WordPress a medida 100% por código. Producción limpia, layout global consistente, sticky footer y soporte WooCommerce + shortcodes.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
Text Domain: cbdleon-code
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =========================================================
   BASE GLOBAL (Sticky footer / fondo hasta abajo)
========================================================= */
:root{
  --c-white:#fff;
  --c-gray-50:#f9fafb;
  --c-gray-100:#f3f4f6;
  --c-gray-200:#e5e7eb;
  --c-gray-300:#d1d5db;
  --c-gray-500:#6b7280;
  --c-gray-600:#4b5563;
  --c-gray-700:#374151;
  --c-gray-900:#111827;
  --c-green-50:#f0fdf4;
  --c-green-600:#16a34a;
  --c-green-700:#15803d;
  --c-green-800:#166534;
  --c-green-950:#052e16;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--c-gray-900);
  background:var(--c-gray-50);
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{opacity:.98}

/* =========================================================
   UTILIDADES (subset tipo Tailwind)
========================================================= */
.container{width:100%}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}
.max-w-none{max-width:none}
.mx-auto{margin-left:auto;margin-right:auto}

.w-full{width:100%}
.h-full{height:100%}
.h-9{height:2.25rem}
.w-9{width:2.25rem}

.relative{position:relative}
.absolute{position:absolute}
.inset-0{top:0;right:0;bottom:0;left:0}
.z-10{z-index:10}
.overflow-hidden{overflow:hidden}
.pointer-events-none{pointer-events:none}

.text-center{text-align:center}
.inline-block{display:inline-block}
.inline-flex{display:inline-flex}
.block{display:block}
.hidden{display:none}
.underline{text-decoration:underline}

.flex{display:flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}

.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}

.p-4{padding:1rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.p-10{padding:2.5rem}

.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-7{padding-left:1.75rem;padding-right:1.75rem}
.px-8{padding-left:2rem;padding-right:2rem}

.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.py-18{padding-top:4.5rem;padding-bottom:4.5rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-24{padding-top:6rem;padding-bottom:6rem}

.pt-6{padding-top:1.5rem}

.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}
.mb-2{margin-bottom:.5rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}
.mb-14{margin-bottom:3.5rem}

.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.gap-10{gap:2.5rem}
.gap-x-6{column-gap:1.5rem}
.gap-y-3{row-gap:.75rem}

.space-y-4 > * + *{margin-top:1rem}

.border{border:1px solid var(--c-gray-200)}
.border-t{border-top:1px solid var(--c-gray-200)}
.border-b{border-bottom:1px solid var(--c-gray-200)}
.border-gray-200{border-color:var(--c-gray-200)}
.border-gray-300{border-color:var(--c-gray-300)}
.border-green-100{border-color:#dcfce7}
.border-green-700\/60{border-color:rgba(21,128,61,.6)}
.border-white\/30{border-color:rgba(255,255,255,.3)}
.border-black\/10{border-color:rgba(0,0,0,.10)}

.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.rounded-full{border-radius:9999px}

.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.06)}
.shadow-md{box-shadow:0 4px 12px rgba(0,0,0,.10)}
.hover\:shadow-md:hover{box-shadow:0 4px 12px rgba(0,0,0,.10)}

.text-xs{font-size:.75rem}
.text-sm{font-size:.875rem}
.text-base{font-size:1rem}
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.text-3xl{font-size:1.875rem}
.text-4xl{font-size:2.25rem}
.text-6xl{font-size:3.75rem}

.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}

.leading-tight{line-height:1.25}
.tracking-tight{letter-spacing:-0.02em}

.bg-white{background:var(--c-white)}
.bg-gray-50{background:var(--c-gray-50)}
.bg-gray-100{background:var(--c-gray-100)}
.bg-green-50{background:var(--c-green-50)}
.bg-green-600{background:var(--c-green-600)}
.bg-green-700{background:var(--c-green-700)}
.bg-green-950{background:var(--c-green-950)}
.bg-green-800\/40{background:rgba(22,101,52,.4)}
.bg-white\/10{background:rgba(255,255,255,.10)}

.text-white{color:var(--c-white)}
.text-gray-500{color:var(--c-gray-500)}
.text-gray-600{color:var(--c-gray-600)}
.text-gray-700{color:var(--c-gray-700)}
.text-gray-900{color:var(--c-gray-900)}
.text-green-700{color:var(--c-green-700)}
.text-white\/80{color:rgba(255,255,255,.80)}

.opacity-\[0\.12\]{opacity:.12}
.opacity-\[0\.06\]{opacity:.06}

.transition{transition:all .15s ease}
.hover\:bg-green-700:hover{background:var(--c-green-700)}
.hover\:bg-white\/10:hover{background:rgba(255,255,255,.10)}
.hover\:bg-gray-100:hover{background:var(--c-gray-100)}
.hover\:text-green-800:hover{color:var(--c-green-800)}
.group:hover .group-hover\:scale-\[1\.02\]{transform:scale(1.02)}

.object-cover{object-fit:cover}
.group-hover\:scale-\[1\.02\]{transform:scale(1); transition:transform .15s ease}

/* Aspect ratio (16/10) */
.aspect-\[16\/10\]{position:relative}
.aspect-\[16\/10\]::before{content:""; display:block; padding-top:62.5%}
.aspect-\[16\/10\] > *{position:absolute; inset:0}

/* Navegación */
.cbdleon-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1.25rem; align-items:center}
.cbdleon-nav a{font-weight:800; color:var(--c-gray-900)}
.cbdleon-nav a:hover{text-decoration:underline}

/* Botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.6rem; border-radius:9999px; font-weight:800}
.btn-primary{background:var(--c-green-600); color:#fff}
.btn-primary:hover{background:var(--c-green-700)}
.btn-ghost{border:1px solid var(--c-gray-300); background:#fff; color:var(--c-gray-900)}
.btn-ghost:hover{background:var(--c-gray-100)}

/* CONTENIDO general */
.entry-wrap{max-width:72rem; margin:0 auto; padding:4rem 1rem}
.entry-card{background:#fff; border:1px solid var(--c-gray-200); border-radius:1.5rem; box-shadow:0 1px 2px rgba(0,0,0,.06); padding:2.25rem}
.entry-title{font-size:2.25rem; font-weight:900; letter-spacing:-0.02em; margin:0 0 1rem}
.entry-content{line-height:1.8}
.entry-content p{margin:0 0 1rem}
.entry-content h2{font-size:1.5rem; margin:2rem 0 1rem; font-weight:900}
.entry-content h3{font-size:1.25rem; margin:1.5rem 0 .75rem; font-weight:900}
.entry-content ul, .entry-content ol{margin:0 0 1rem 1.25rem}
.entry-content li{margin:.25rem 0}
.entry-content a{text-decoration:underline}
.entry-content hr{border:0; border-top:1px solid var(--c-gray-200); margin:2rem 0}

/* Tabs */
.cbdleon-tabs{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.25rem 0 0}
.cbdleon-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem 1rem;
  border-radius:9999px;
  border:1px solid var(--c-gray-300);
  background:#fff;
  font-weight:800;
  font-size:.9rem;
}
.cbdleon-tab:hover{background:var(--c-gray-100)}
.cbdleon-tab.is-active{
  border-color:rgba(21,128,61,.6);
  background:rgba(22,101,52,.08);
}

/* Promo strip */
.cbdleon-promo{
  border-top:1px solid var(--c-gray-200);
  border-bottom:1px solid var(--c-gray-200);
  background:var(--c-green-950);
  color:#fff;
}
.cbdleon-promo__inner{
  max-width:80rem;
  margin:0 auto;
  padding:1.25rem 1rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.75rem 1.25rem;
}
.cbdleon-promo__badge{
  display:inline-flex;
  padding:.25rem .75rem;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.10);
  font-weight:800;
  font-size:.75rem;
}
.cbdleon-promo__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.65rem 1.1rem;
  border-radius:9999px;
  background:var(--c-green-600);
  color:#fff;
  font-weight:900;
  white-space:nowrap;
}
.cbdleon-promo__btn:hover{background:var(--c-green-700)}

/* Responsive */
@media (min-width:640px){
  .sm\:flex-row{flex-direction:row}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  .md\:block{display:block}
  .md\:flex{display:flex}
  .md\:flex-row{flex-direction:row}
  .md\:items-center{align-items:center}
  .md\:justify-between{justify-content:space-between}
  .md\:text-xl{font-size:1.25rem}
  .md\:text-4xl{font-size:2.25rem}
  .md\:text-6xl{font-size:3.75rem}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .lg\:px-8{padding-left:2rem;padding-right:2rem}
  .lg\:text-4xl{font-size:2.25rem}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* =========================================================
   CBDLEON HOME – UNIFICACIÓN VISUAL (FASE 1 / SOLO CSS)
   Pegar al FINAL de style.css
========================================================= */
:root{
  --cbd-bg: #0b1220;              /* fondo */
  --cbd-panel: rgba(255,255,255,.06);
  --cbd-border: rgba(34,197,94,.55);  /* verde borde */
  --cbd-border-soft: rgba(255,255,255,.14);
  --cbd-text: rgba(255,255,255,.92);
  --cbd-text-dim: rgba(255,255,255,.72);
  --cbd-accent: #22c55e;
  --cbd-accent-dark: #16a34a;
  --cbd-radius: 18px;
}

/* 1) Tipografía y base */
body{
  background: var(--cbd-bg);
  color: var(--cbd-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p{ color: var(--cbd-text-dim); }

/* 2) Fondo “hojitas”: o TODO o NADA.
   De momento lo aplicamos A TODA la home para que no parezca “corte” */
body.home::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  opacity:.18;
  /* Si ya tienes patrón como SVG en CSS, sustitúyelo aquí.
     Si NO tienes, lo dejamos “suave” con un degradado. */
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(34,197,94,.10), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(34,197,94,.08), transparent 60%);
  z-index: 0;
}
body.home *{ position: relative; z-index: 1; }

/* 3) Botones: que “parezcan botones” siempre */
.cbd-btn,
a.button,
button,
.wp-element-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.7rem 1.05rem;
  border-radius: 999px;
  font-weight: 800;
  text-decoration:none;
  border: 1px solid var(--cbd-border-soft);
  background: rgba(255,255,255,.06);
  color: var(--cbd-text);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.cbd-btn:hover,
a.button:hover,
button:hover,
.wp-element-button:hover{
  transform: translateY(-1px);
  border-color: var(--cbd-border);
  background: rgba(34,197,94,.10);
}

/* Botón principal “Entrar a la tienda” */
.cbd-btn--primary{
  border-color: rgba(34,197,94,.75);
  background: rgba(34,197,94,.14);
}
.cbd-btn--primary:hover{
  background: rgba(34,197,94,.20);
}

/* 4) Tarjetas: mismo borde verde y mismo radio */
.cbd-card,
.cbdleon-card,
.cbdleon-tabs,
.cbdleon-promo,
.cbd-box,
.card{
  border-radius: var(--cbd-radius);
}

/* Si tus tarjetas son “paneles blancos”, las homogeneizamos */
.cbd-card,
.cbdleon-card,
.card{
  background: var(--cbd-panel);
  border: 1px solid var(--cbd-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
}

/* 5) Títulos: que no haya 4 jerarquías distintas */
h1,h2,h3{
  letter-spacing: -0.02em;
}
h1{ font-weight: 900; }
h2{ font-weight: 900; }
h3{ font-weight: 800; }
/* =========================================================
   CBD León UI System (Home + Header/Footer)
   Pegar al FINAL de style.css
========================================================= */

:root{
  --cbd-bg: #0b1220;              /* fondo base */
  --cbd-bg-2: rgba(255,255,255,.04);
  --cbd-bg-3: rgba(0,0,0,.22);
  --cbd-text: rgba(255,255,255,.92);
  --cbd-muted: rgba(255,255,255,.68);
  --cbd-muted-2: rgba(255,255,255,.52);

  --cbd-green: rgba(34,197,94,1);
  --cbd-border: rgba(34,197,94,.35);
  --cbd-border-soft: rgba(255,255,255,.12);

  --cbd-radius: 24px;
  --cbd-radius-sm: 18px;
  --cbd-shadow: 0 12px 30px rgba(0,0,0,.35);
}

body{
  background: var(--cbd-bg);
  color: var(--cbd-text);
}

.cbd-wrap{
  max-width: 80rem; /* ~1280px */
  margin: 0 auto;
  padding: 0 1rem;
}

.cbd-section{
  padding: 4rem 0; /* ritmo fijo */
}

@media (min-width: 640px){
  .cbd-section{ padding: 5rem 0; }
}

.cbd-h2{
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: 1.875rem; /* 30px */
}

@media (min-width: 640px){
  .cbd-h2{ font-size: 2.25rem; } /* 36px */
}

.cbd-lead{
  margin-top: .75rem;
  color: var(--cbd-muted);
  font-size: 1rem;
}

.cbd-card{
  border: 1px solid var(--cbd-border);
  background: var(--cbd-bg-2);
  border-radius: var(--cbd-radius);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.cbd-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--cbd-shadow);
  border-color: rgba(34,197,94,.55);
  background: rgba(255,255,255,.055);
}

.cbd-card-pad{
  padding: 2rem;
}

.cbd-h3{
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: 1.125rem; /* 18px */
}

.cbd-text{
  color: var(--cbd-muted);
  font-size: .95rem;
}

.cbd-pill{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  border: 1px solid var(--cbd-border-soft);
  background: var(--cbd-bg-3);
  color: rgba(255,255,255,.78);
}

.cbd-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  font-weight: 800;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
  border: 1px solid var(--cbd-border-soft);
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.04);
}

.cbd-btn:hover{ background: rgba(255,255,255,.08); }

.cbd-btn--primary{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.85);
  color: #04110a;
}

.cbd-btn--primary:hover{
  background: rgba(34,197,94,1);
  transform: translateY(-1px);
}

.cbd-link{
  color: rgba(167,243,208,.95);
  font-weight: 800;
}

.cbd-link:hover{ color: rgba(110,231,183,1); }

.cbd-divider{
  border-top: 1px solid rgba(255,255,255,.10);
}

/* mini-cards iguales (trust + beneficios) */
.cbd-mini{
  border: 1px solid var(--cbd-border-soft);
  background: rgba(255,255,255,.035);
  border-radius: var(--cbd-radius-sm);
  padding: .85rem 1rem;
}

.cbd-mini .k{ font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--cbd-muted-2); }
.cbd-mini .v{ font-size: 14px; font-weight: 900; color: rgba(255,255,255,.92); }

/* =========================================================
   CBD LEÓN – UI CONSISTENTE (HOME/HEADER/FOOTER)
   Pegarlo al FINAL del style.css
========================================================= */
:root{
  --cbd-bg: #0b1210;
  --cbd-bg2:#0d1a14;
  --cbd-card:#111a17;
  --cbd-line: rgba(94,234,212,.35);
  --cbd-line2: rgba(255,255,255,.12);
  --cbd-text: rgba(255,255,255,.86);
  --cbd-muted: rgba(255,255,255,.66);
  --cbd-green: #22c55e;
  --cbd-green2:#16a34a;
  --cbd-radius: 22px;
  --cbd-radius2: 16px;
  --cbd-shadow: 0 12px 40px rgba(0,0,0,.32);
}

html, body{ height:100%; }
body{
  background: var(--cbd-bg);
  color: var(--cbd-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin:0;
}

a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }

.cbd-page{ min-height: 60vh; }
.cbd-container{
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}

/* Header */
.cbd-site-header{ position: sticky; top:0; z-index: 50; background: rgba(11,18,16,.82); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08); }
.cbd-topbar{ border-bottom: 1px solid rgba(255,255,255,.08); }
.cbd-topbar__inner{ display:flex; align-items:center; justify-content:space-between; padding:.55rem 0; }
.cbd-topbar__pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .7rem;
  border-radius: 999px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.28);
  color: rgba(255,255,255,.80);
  font-weight: 800;
  font-size: .78rem;
}

.cbd-header-main__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .9rem 0; }
.cbd-brand{ display:flex; flex-direction:column; gap:.1rem; min-width: 180px; }
.cbd-brand__name{ font-weight: 950; letter-spacing: .2px; }
.cbd-brand__tagline{ font-size: .82rem; color: rgba(255,255,255,.55); font-weight: 700; }

.cbd-nav{ flex: 1; display:flex; justify-content:center; }
.cbd-nav__list{ list-style:none; display:flex; gap:1.1rem; padding:0; margin:0; flex-wrap:wrap; justify-content:center; }
.cbd-nav__list a{ font-weight: 850; font-size:.92rem; color: rgba(255,255,255,.78); padding:.35rem .55rem; border-radius: 999px; }
.cbd-nav__list a:hover{ background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); }

.cbd-header-actions{ min-width: 180px; display:flex; justify-content:flex-end; }

/* Buttons */
.cbd-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px;
  padding: .9rem 1.15rem;
  font-weight: 900;
  letter-spacing:.2px;
  border: 1px solid transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
  user-select:none;
  white-space:nowrap;
}
.cbd-btn:hover{ transform: translateY(-1px); }
.cbd-btn--primary{ background: var(--cbd-green2); color: white; border-color: rgba(34,197,94,.35); }
.cbd-btn--primary:hover{ background: #15803d; }
.cbd-btn--ghost{ background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.86); }
.cbd-btn--ghost:hover{ background: rgba(255,255,255,.07); }
.cbd-btn--sm{ padding: .7rem 1rem; font-size: .92rem; }

.cbd-link{ display:inline-flex; font-weight: 950; color: rgba(94,234,212,.95); }
.cbd-link:hover{ color: rgba(34,197,94,.95); }

/* Sections */
.cbd-home{ background: var(--cbd-bg); }
.cbd-section{ padding: 4.25rem 0; }
.cbd-section--tight{ padding: 3.25rem 0; }
.cbd-section__head{ text-align:center; margin-bottom: 1.75rem; }
.cbd-h2{ font-size: clamp(1.6rem, 2.3vw, 2.2rem); margin:0; font-weight: 950; letter-spacing: -.2px; }
.cbd-lead{ margin:.55rem auto 0; max-width: 720px; color: var(--cbd-muted); font-weight: 750; line-height: 1.55; }
.cbd-h3{ font-size: 1.18rem; margin:.65rem 0 .35rem; font-weight: 950; }
.cbd-text{ color: rgba(255,255,255,.68); font-weight: 700; line-height: 1.55; margin:0; }

/* Hero */
.cbd-hero{ position: relative; overflow:hidden; padding: 4.6rem 0 3.4rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.cbd-hero__bg{ position:absolute; inset:0; opacity: .22; pointer-events:none; }
.cbd-hero__svg{ width:100%; height:100%; }
.cbd-hero__inner{ position: relative; text-align:center; }
.cbd-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.42rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 900;
  font-size:.82rem;
  color: rgba(255,255,255,.78);
}
.cbd-hero__title{
  margin: 1.2rem 0 .55rem;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  font-weight: 1000;
  letter-spacing: -.6px;
}
.cbd-hero__subtitle{
  margin: 0 auto 1.3rem;
  max-width: 720px;
  color: rgba(255,255,255,.72);
  font-weight: 750;
  line-height: 1.6;
}
.cbd-hero__actions{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top: 1.2rem; }

/* Stats (4 en fila, iguales) */
.cbd-stats{
  margin: 1.8rem auto 0;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .8rem;
  max-width: 760px;
}
.cbd-stat{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: .85rem .9rem;
  text-align:center;
}
.cbd-stat__k{ font-weight: 950; color: rgba(255,255,255,.72); font-size:.82rem; }
.cbd-stat__v{ font-weight: 1000; font-size: 1.02rem; margin-top:.12rem; }

/* Grid helpers */
.cbd-grid{ display:grid; gap: 1.15rem; }
.cbd-grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.cbd-grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.cbd-grid--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 980px){
  .cbd-grid--4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cbd-grid--3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cbd-grid--2{ grid-template-columns: 1fr; }
  .cbd-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .cbd-grid--3{ grid-template-columns: 1fr; }
  .cbd-grid--4{ grid-template-columns: 1fr; }
}

/* Cards (TODO IGUAL) */
.cbd-card{
  background: rgba(17,26,23,.92);
  border: 1px solid rgba(94,234,212,.35);
  border-radius: var(--cbd-radius);
  box-shadow: var(--cbd-shadow);
  overflow:hidden;
}
.cbd-card--big{ padding: 1.35rem; }
.cbd-card--mini{ padding: 1.05rem; border-color: rgba(255,255,255,.16); box-shadow: none; background: rgba(255,255,255,.02); }
.cbd-card--link{ transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.cbd-card--link:hover{ transform: translateY(-2px); border-color: rgba(34,197,94,.45); background: rgba(17,26,23,.98); }

.cbd-card__top{ padding-bottom: .95rem; border-bottom: 1px solid rgba(255,255,255,.10); }
.cbd-card__actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top: 1rem; }
.cbd-note{ margin-top: .85rem; color: rgba(255,255,255,.52); font-weight: 750; font-size: .78rem; }

.cbd-tag{
  display:inline-flex; align-items:center;
  padding:.35rem .7rem;
  border-radius: 999px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.28);
  color: rgba(255,255,255,.80);
  font-weight: 950;
  font-size: .78rem;
}

/* mini grid inside big card */
.cbd-mini-grid{
  margin-top: 1rem;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .7rem;
}
@media (max-width: 560px){
  .cbd-mini-grid{ grid-template-columns: 1fr; }
}
.cbd-mini{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  padding: .85rem .9rem;
}
.cbd-mini__t{ font-weight: 950; }
.cbd-mini__d{ color: rgba(255,255,255,.62); font-weight: 750; margin-top:.2rem; font-size:.9rem; }

/* Steps */
.cbd-steps{ list-style:none; padding:0; margin: 1rem 0 0; display:grid; gap:.75rem; }
.cbd-step{
  display:grid;
  grid-template-columns: 34px 1fr;
  gap:.75rem;
  align-items:start;
  padding: .75rem .85rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
}
.cbd-step__n{
  width:34px; height:34px;
  border-radius: 999px;
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.35);
  display:flex; align-items:center; justify-content:center;
  font-weight: 1000;
}
.cbd-step__b{ display:block; font-weight: 1000; }
.cbd-step__t{ display:block; color: rgba(255,255,255,.64); font-weight: 750; margin-top:.15rem; }

.cbd-tip{
  margin-top: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(94,234,212,.25);
  background: rgba(94,234,212,.06);
  padding: .9rem 1rem;
}
.cbd-tip__k{ font-weight: 1000; color: rgba(255,255,255,.82); }
.cbd-tip__v{ color: rgba(255,255,255,.68); font-weight: 800; margin-top:.15rem; }

/* Info card media */
.cbd-card__media{ aspect-ratio: 16/10; background: rgba(0,0,0,.25); border-bottom: 1px solid rgba(255,255,255,.08); }
.cbd-card__media img{ width:100%; height:100%; object-fit:cover; }
.cbd-card__body{ padding: 1.05rem 1.15rem 1.15rem; }

.cbd-icon{ font-size: 1.6rem; margin-bottom:.35rem; }
.cbd-chiprow{ display:flex; gap:.4rem; flex-wrap:wrap; margin:.75rem 0 .35rem; }
.cbd-chip{
  font-size:.76rem;
  font-weight: 950;
  color: rgba(255,255,255,.76);
  padding:.28rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.02);
}

/* Footer */
.cbd-site-footer{ border-top: 1px solid rgba(255,255,255,.08); padding: 2.2rem 0 1.2rem; background: rgba(0,0,0,.12); }
.cbd-footer-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.2rem;
}
@media (max-width: 980px){ .cbd-footer-grid{ grid-template-columns: 1fr; } }
.cbd-footer-title{ font-weight: 1000; margin:0 0 .6rem; }
.cbd-footer-text{ margin:.35rem 0 0; color: rgba(255,255,255,.64); font-weight: 750; }
.cbd-footer-menu{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.cbd-footer-menu a{ color: rgba(255,255,255,.70); font-weight: 850; }
.cbd-footer-menu a:hover{ color: rgba(34,197,94,.95); }
.cbd-footer-bottom{ margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.55); font-weight: 800; }