/* =========================================================================
   Callibree — capa de diseño para Elementor (tema hijo de Hello Elementor)
   Se carga en todo el sitio. Las clases cb-* se ponen en Elementor:
   Avanzado > Clases CSS. Ver LEEME.md para el mapa de clases.
   ========================================================================= */

/* ---------- Fuentes alojadas en el servidor (subconjunto latino: cubre el español) ---------- */
@font-face{ font-family:"Geist"; src:url("../fonts/Geist-Variable-latin.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap }
@font-face{ font-family:"Geist Mono"; src:url("../fonts/GeistMono-Variable-latin.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap }
@font-face{ font-family:"Instrument Serif"; src:url("../fonts/InstrumentSerif-Regular-latin.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap }
@font-face{ font-family:"Instrument Serif"; src:url("../fonts/InstrumentSerif-Italic-latin.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap }

/* ---------- Tokens (iguales que los colores globales del kit, ver LEEME.md) ---------- */
:root{
  --cb-bg:#121212;
  --cb-band:#1C1C1C;
  --cb-grey-2:#2A2A2A;
  --cb-grey-3:#3D3D3D;
  --cb-cream:#FAF6ED;
  --cb-coral:#EC5C53;
  --cb-text-on-cream:#4A4A4A;
  --cb-cream-60:rgba(250,246,237,.62);
  --cb-cream-30:rgba(250,246,237,.28);
  --cb-cream-12:rgba(250,246,237,.12);

  --cb-sans:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --cb-serif:"Instrument Serif","Times New Roman",Georgia,serif;
  --cb-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --cb-m:clamp(20px,4vw,64px);
  --cb-g:24px;
  --cb-sec:clamp(80px,11vw,160px);
  --cb-header-h:96px;
  --cb-header-h-compact:64px;
  --cb-ease:cubic-bezier(.33,1,.68,1);
  --cb-ease-io:cubic-bezier(.65,0,.35,1);
  --cb-adminbar:var(--wp-admin--admin-bar--height,0px);
}

/* El sitio trae scroll-behavior:smooth y descoloca las secciones fijadas al recalcular */
html{ scroll-behavior:auto !important }
/* Elementor anima "transform" en sus contenedores (0,4 s) y eso choca con GSAP */
.pin-spacer > *, .e-con[class*="cb-"]{ transition:none !important }
/* Lo mismo en los widgets que mueve GSAP (menú, entradas, botón magnético): sin esto se mueven con retraso */
.cb-menu .elementor-element, .cb-menu .menu-item, .elementor-element.cb-late, .elementor-element.cb-reveal, .elementor-element.cb-magnet{ transition:none !important }

/* Transición entre páginas (marcado en callibree-motion.php, animación de salida en site.js; inspirada en hugeinc.com): panel que sube y, en el centro, el nombre de la página de destino.
   Al llegar, la página nace tapada (html.cb-pt-in) y la salida
   del nombre y del panel es CSS puro: no depende del JS, así que en 1,2 s como máximo la página está destapada. */
.cb-pt{ position:fixed; inset:0; z-index:100000; pointer-events:none; overflow:hidden }
.cb-pt-veil{ position:absolute; inset:0; background:#000; opacity:0 }
.cb-pt-panel{ position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:clamp(18px,2.4vw,32px); background:var(--cb-band); clip-path:inset(100% 0 0 0); will-change:clip-path }
.cb-pt-panel > b{ position:absolute; left:0; right:0; top:0; height:2px; background:var(--cb-coral); transform:scaleX(0); transform-origin:left }
.cb-pt-name{ margin:0; padding-inline:var(--cb-m); display:flex; flex-wrap:wrap; justify-content:center; column-gap:.24em; text-align:center; font:300 clamp(44px,9vw,156px)/1 var(--cb-sans); letter-spacing:-.055em; color:var(--cb-cream) }
.cb-pt-name .w{ display:inline-block; overflow:clip; padding-bottom:.1em; margin-bottom:-.1em }
.cb-pt-name .w > *{ display:inline-block; transform:translateY(110%) }
.cb-pt-name em{ font:italic 400 1.06em/1 var(--cb-serif); letter-spacing:-.02em; color:var(--cb-coral) }
/* Línea de carga bajo el nombre: se mueve mientras llega la página nueva */
.cb-pt-load{ width:clamp(80px,9vw,140px); height:1px; background:var(--cb-cream-12); overflow:hidden; opacity:0 }
.cb-pt-load i{ display:block; height:100%; background:var(--cb-coral); transform:scaleX(0); transform-origin:left }

/* Llegada: el nombre está en su sitio, sube y se va; después el panel se recoge hacia arriba */
html.cb-pt-in .cb-pt-panel{ clip-path:inset(0 0 0 0); animation:cb-pt-up .85s cubic-bezier(.87,0,.13,1) .38s both }
html.cb-pt-in .cb-pt-name .w > *{ transform:none; animation:cb-pt-word .55s cubic-bezier(.7,0,.84,0) .08s both }
html.cb-pt-in .cb-pt-name .w:nth-child(2) > *{ animation-delay:.12s }
html.cb-pt-in .cb-pt-name .w:nth-child(3) > *{ animation-delay:.16s }
html.cb-pt-in .cb-pt-name .w:nth-child(n+4) > *{ animation-delay:.2s }
@keyframes cb-pt-up{ from{ clip-path:inset(0 0 0 0) } to{ clip-path:inset(0 0 100% 0) } }
@keyframes cb-pt-word{ from{ transform:none } to{ transform:translateY(-110%) } }
@media (prefers-reduced-motion:reduce){ .cb-pt{ display:none } }

/* Lenis */
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain }
.lenis.lenis-stopped{ overflow:hidden }

body{ -webkit-font-smoothing:antialiased }
body.home{ background:var(--cb-bg); color:var(--cb-cream); overflow-x:clip }

/* ---------- Utilidades de texto (usables en cualquier página) ---------- */
/* Palabra destacada en cursiva serif coral. En el widget Título: <em class="s">boca a boca.</em> */
em.s, .cb-serif{ font-family:var(--cb-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--cb-coral) }
.cb-eyebrow, .elementor .cb-eyebrow .elementor-heading-title{
  font:500 12px/1.3 var(--cb-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--cb-cream-60);
}
.elementor .cb-t-hero .elementor-heading-title{ font:300 clamp(32px,3.7vw,62px)/1.02 var(--cb-sans); letter-spacing:-.035em; text-wrap:balance; color:var(--cb-cream) }
.elementor .cb-t-h2 .elementor-heading-title{ font:300 clamp(28px,2.5vw,40px)/1.08 var(--cb-sans); letter-spacing:-.03em; text-wrap:balance; color:inherit }
.elementor .cb-t-display .elementor-heading-title{ font:300 clamp(32px,3.5vw,60px)/1.04 var(--cb-sans); letter-spacing:-.035em; text-wrap:balance; color:inherit }
.elementor .cb-t-lead, .elementor .cb-t-lead p{ font:400 17px/1.6 var(--cb-sans); color:var(--cb-cream-60) }
.cb-link{ color:var(--cb-cream); border-bottom:1px solid var(--cb-coral); padding-bottom:2px; transition:color .2s }
.cb-link:hover{ color:var(--cb-coral) }
.cb-ln{ overflow:clip; padding-bottom:.08em; margin-bottom:-.08em } /* máscara de línea de SplitText */

/* Botones de Elementor con clase cb-btn (coral) o cb-btn-ghost (contorno) */
.elementor .cb-btn .elementor-button{ background:var(--cb-coral); color:var(--cb-bg); border-radius:0; padding:16px 26px; font:500 15px/1 var(--cb-sans); letter-spacing:.01em; transition:background-color .25s var(--cb-ease) }
.elementor .cb-btn .elementor-button:hover{ background:var(--cb-cream); color:var(--cb-bg) }
.elementor .cb-btn-ghost .elementor-button{ background:transparent; color:var(--cb-cream); border-radius:0; padding:16px 26px; box-shadow:inset 0 0 0 1px var(--cb-cream-30); font:500 15px/1 var(--cb-sans) }
.elementor .cb-btn-ghost .elementor-button:hover{ box-shadow:inset 0 0 0 1px var(--cb-cream); color:var(--cb-cream) }

/* =========================================================================
   CABECERA (plantilla de Elementor 258) — contenedor con clase cb-header
   ========================================================================= */
.elementor-location-header{ position:sticky; top:var(--cb-adminbar); z-index:60; transition:transform .4s var(--cb-ease-io) }
body.home .elementor-location-header{ position:fixed; left:0; right:0; top:var(--cb-adminbar) }
.elementor-location-header.is-hidden{ transform:translateY(-110%) }

.cb-header{ min-height:var(--cb-header-h); background:var(--cb-bg); transition:min-height .4s var(--cb-ease-io), background-color .4s var(--cb-ease-io) }
body.home .cb-header{ background:transparent }
.is-compact .cb-header{ min-height:var(--cb-header-h-compact); background:rgba(18,18,18,.6) !important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px) }

/* Widget Menú (Nav Menu) con clase cb-nav */
.elementor .cb-nav .elementor-nav-menu--main .elementor-item{ font:400 15px/1 var(--cb-sans); color:var(--cb-cream); opacity:.78; padding-inline:14px }
.elementor .cb-nav .elementor-nav-menu--main .elementor-item:hover,
.elementor .cb-nav .elementor-nav-menu--main .elementor-item.elementor-item-active{ opacity:1; color:var(--cb-cream) }
.elementor .cb-nav .elementor-item::after{ background-color:var(--cb-coral) !important; height:1px !important }

/* Botón hamburguesa (widget HTML: html-widgets/burger.html) */
.cb-burger{ display:inline-flex; align-items:center; gap:10px; background:none; border:0; padding:8px 0; cursor:pointer; color:var(--cb-cream); font:500 12px/1 var(--cb-mono); letter-spacing:.08em; text-transform:uppercase }
.cb-burger i{ display:grid; gap:5px; width:22px }
.cb-burger i::before, .cb-burger i::after{ content:""; height:1.5px; background:currentColor; transition:transform .4s var(--cb-ease-io) }
.cb-menu-open .cb-burger i::before{ transform:translateY(3.25px) rotate(45deg) }
.cb-menu-open .cb-burger i::after{ transform:translateY(-3.25px) rotate(-45deg) }
.cb-burger:focus-visible{ outline:2px solid var(--cb-coral); outline-offset:3px }

/* =========================================================================
   MENÚ A PANTALLA COMPLETA (popup de Elementor) — contenedor raíz con clase cb-menu
   Ajustes del popup: ancho 100vw, alto 100vh, sin animación de entrada, fondo #1C1C1C.
   ========================================================================= */
.cb-menu{ background:var(--cb-band) }
.elementor .cb-menu-main .elementor-nav-menu--main .elementor-item,
.elementor .cb-menu-main .elementor-nav-menu--dropdown .elementor-item{ font:300 clamp(28px,3vw,44px)/1.1 var(--cb-sans) !important; letter-spacing:-.03em; color:var(--cb-cream) !important; padding:4px 0 !important }
.elementor .cb-menu-main .elementor-item:hover{ color:var(--cb-coral) !important }
.elementor .cb-menu-main .elementor-item::after{ display:none }
.elementor .cb-menu-col .elementor-nav-menu--main .elementor-item,
.elementor .cb-menu-col .elementor-icon-list-text{ font:400 19px/1.35 var(--cb-sans); color:var(--cb-cream-60); padding:4px 0 }
.elementor .cb-menu-col .elementor-item:hover{ color:var(--cb-cream) }
.cb-menu-col a{ color:var(--cb-cream-60); text-decoration:none; transition:color .2s }
.cb-menu-col a:hover{ color:var(--cb-cream) }
.cb-menu .elementor-widget{ will-change:transform }

/* =========================================================================
   PIE (plantilla de Elementor 321) — contenedor con clase cb-footer
   ========================================================================= */
.cb-footer{ background:var(--cb-bg); color:var(--cb-cream-60) }
.cb-footer a{ color:var(--cb-cream-60); transition:color .2s }
.cb-footer a:hover{ color:var(--cb-cream) }
.cb-footer .elementor-heading-title{ color:var(--cb-cream) }

/* =========================================================================
   HOME
   ========================================================================= */

/* --- Hero: contenedor cb-hero; el widget HTML del vídeo lleva la clase cb-hero-media-widget --- */
.cb-hero{ position:relative; min-height:100svh !important; overflow:hidden; justify-content:flex-end }
.cb-hero-copy{ position:relative; z-index:2 }
.elementor .cb-hero-media-widget{ position:absolute !important; inset:0; width:100% !important; max-width:none !important; margin:0 !important; z-index:0 }
.elementor .cb-hero-media-widget > .elementor-widget-container{ height:100% }
.cb-hero-media{ position:absolute; inset:0; clip-path:inset(0% 0% 0% 0%); background:var(--cb-band) }
.cb-hero-media video, .cb-hero-media img{ width:100%; height:100%; object-fit:cover; display:block }
.cb-hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,18,18,.5) 0%, rgba(18,18,18,.1) 40%, rgba(18,18,18,.72) 100%), rgba(18,18,18,.32) }
.cb-hero-after{ position:absolute !important; left:0; right:0; bottom:16%; z-index:2; pointer-events:none; opacity:0; padding-inline:var(--cb-m) }
.elementor .cb-hero-after .elementor-heading-title{ font:300 clamp(20px,1.7vw,26px)/1.2 var(--cb-sans); letter-spacing:-.02em; color:var(--cb-cream); max-width:24em; margin-left:8.33% }

/* --- Manifiesto (html-widgets/manifiesto.html) --- */
.cb-manifesto-text{ margin:0; font:300 clamp(22px,2.2vw,34px)/1.3 var(--cb-sans); letter-spacing:-.025em; color:var(--cb-cream); max-width:30em }
.cb-pic{ display:inline-block; vertical-align:-.08em; width:1.75em; height:.84em; overflow:hidden; margin-inline:.06em; background:var(--cb-band) }
.cb-pic img{ width:100% !important; height:100% !important; object-fit:cover; display:block }

/* --- Cifras (html-widgets/cifras.html) --- */
.cb-figures{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px var(--cb-g); margin:0; color:var(--cb-bg) }
.cb-fig{ border-top:1px solid rgba(18,18,18,.18); padding-top:18px; display:flex; flex-direction:column; gap:10px; min-width:0 }
.cb-fig dd{ order:-1; margin:0; font:300 clamp(32px,3vw,48px)/.95 var(--cb-sans); letter-spacing:-.04em; font-variant-numeric:tabular-nums }
.cb-fig dd small{ font-size:.42em; letter-spacing:-.02em; margin-left:.08em }
.cb-fig dt{ font:500 12px/1.4 var(--cb-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--cb-text-on-cream); max-width:24ch }
@media (max-width:900px){ .cb-figures{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:600px){ .cb-figures{ grid-template-columns:1fr } }

/* --- Sistema PLC (html-widgets/sistema-plc.html), dentro del contenedor cb-plc --- */
.cb-plc{ min-height:100svh }
.cb-plc-stage{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--cb-g) }
.cb-plc-num{ grid-column:1 / span 5; position:relative; overflow:hidden; height:clamp(110px,13vw,190px); border-top:1px solid var(--cb-cream-30) }
.cb-plc-num span{ position:absolute; left:0; top:0; height:100%; padding-top:12px; font:300 clamp(110px,13vw,190px)/.78 var(--cb-sans); letter-spacing:-.07em; color:var(--cb-coral); font-variant-numeric:tabular-nums }
.cb-plc-steps{ grid-column:7 / span 6; position:relative; border-top:1px solid var(--cb-cream-30) }
.cb-step{ padding-top:20px }
.cb-step .cb-eyebrow{ color:var(--cb-coral) }
.cb-step h3{ margin:14px 0; font:300 clamp(24px,1.9vw,30px)/1.1 var(--cb-sans); letter-spacing:-.025em; color:var(--cb-cream) }
.cb-step p{ margin:0; color:var(--cb-cream-60); max-width:44ch; font-size:17px; line-height:1.6 }
.cb-step ul{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.cb-step li{ font:500 12px/1 var(--cb-mono); letter-spacing:.05em; text-transform:uppercase; padding:9px 12px; box-shadow:inset 0 0 0 1px var(--cb-cream-30); color:var(--cb-cream) }
.cb-plc-bar{ grid-column:1 / -1; margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--cb-g) }
.cb-plc-bar span{ font:500 12px/1 var(--cb-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--cb-cream-60); padding-top:14px; position:relative }
.cb-plc-bar span::before{ content:""; position:absolute; inset:0 0 auto; height:2px; background:var(--cb-cream-12) }
.cb-plc-bar span i{ position:absolute; inset:0 0 auto; height:2px; background:var(--cb-coral); transform-origin:left; transform:scaleX(0) }
.cb-plc-bar span.on{ color:var(--cb-cream) }
.cb-js-plc .cb-step{ position:absolute; inset:0 0 auto 0 }
@media (max-width:900px){
  .cb-plc{ min-height:0 }
  .cb-plc-num, .cb-plc-bar{ display:none }
  .cb-plc-steps{ grid-column:1 / -1; display:grid; gap:48px; border-top:0 }
  .cb-step{ border-top:1px solid var(--cb-cream-30) }
}

/* --- Sectores (html-widgets/sectores.html) --- */
.cb-idx{ list-style:none; margin:0; padding:0; border-top:1px solid var(--cb-cream-30) }
.cb-idx li{ border-bottom:1px solid var(--cb-cream-30); margin:0 }
.cb-idx a{ display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:var(--cb-g); padding-block:clamp(14px,1.8vw,24px); color:var(--cb-cream); text-decoration:none; transition:color .3s var(--cb-ease), padding .4s var(--cb-ease) }
.cb-idx .n{ font:500 12px/1 var(--cb-mono); color:var(--cb-cream-60); font-variant-numeric:tabular-nums }
.cb-idx .t{ font:300 clamp(22px,2.3vw,38px)/1.1 var(--cb-sans); letter-spacing:-.025em }
.cb-idx .go{ font:500 12px/1 var(--cb-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--cb-cream-60) }
.cb-idx .thumb{ display:none }
.cb-idx:hover a{ color:var(--cb-cream-30) }
.cb-idx:hover a:hover{ color:var(--cb-cream); padding-left:12px }
.cb-idx a:hover .go{ color:var(--cb-coral) }
.cb-preview{ position:fixed; left:0; top:0; z-index:40; width:clamp(130px,10vw,170px); aspect-ratio:4/5; pointer-events:none; overflow:hidden; opacity:0; visibility:hidden }
.cb-preview img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
@media (hover:none), (max-width:900px){
  .cb-idx a{ grid-template-columns:96px 1fr }
  .cb-idx .n, .cb-idx .go{ display:none }
  .cb-idx .thumb{ display:block; width:96px; aspect-ratio:1; object-fit:cover }
  .cb-preview{ display:none }
}

/* --- Casos (widget Loop Grid con clase cb-casos): en escritorio, fila horizontal --- */
@media (min-width:901px){
  .cb-casos.cb-h .elementor-loop-container{ display:flex !important; flex-wrap:nowrap; gap:var(--cb-g) !important; width:max-content; padding-inline:var(--cb-m); will-change:transform }
  .cb-casos.cb-h .e-loop-item{ width:clamp(300px,34vw,560px) !important; flex:none }
  .cb-casos.cb-h .e-loop-item:nth-child(even){ margin-top:80px }
  .cb-casos.cb-h{ overflow:hidden }
}
.cb-casos .e-loop-item img{ transition:scale .8s var(--cb-ease) }
.cb-casos .e-loop-item:hover img{ scale:1.04 }
.cb-casos-progress{ display:flex; align-items:center; gap:16px; margin:56px var(--cb-m) 0 }
.cb-casos-progress .bar{ flex:1; height:1px; background:var(--cb-cream-30); position:relative }
.cb-casos-progress .bar i{ position:absolute; inset:0; background:var(--cb-cream); transform-origin:left; transform:scaleX(0) }
.cb-casos-progress .c{ font:500 12px/1 var(--cb-mono); font-variant-numeric:tabular-nums; color:var(--cb-cream) }
@media (max-width:900px){ .cb-casos-progress{ display:none } }
/* Tarjeta de proyecto (plantilla de bucle): el marco recorta la imagen, que el parallax amplía a 1,14 */
.cb-card{ display:flex; text-decoration:none; color:inherit }
.cb-card-frame{ overflow:hidden; aspect-ratio:768/537; width:100%; background:var(--cb-band) }
.cb-card-frame .elementor-widget-container, .cb-card-frame a{ display:block; height:100% }
.cb-card-frame img{ display:block; width:100% !important; height:100% !important; max-width:none; object-fit:cover }
.cb-card .elementor-element{ transition:none !important }

/* --- Caso de éxito: contenedor cb-caso con imagen de fondo de Elementor --- */
.cb-caso{ min-height:100svh; background-size:cover; background-position:50% 0% }
.cb-caso dl{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--cb-g); margin:0 }
.cb-caso dl div{ border-top:1px solid var(--cb-cream-30); padding-top:16px; display:flex; flex-direction:column; gap:8px }
.cb-caso dd{ order:-1; margin:0; font:300 clamp(28px,2.5vw,40px)/.95 var(--cb-sans); letter-spacing:-.035em; color:var(--cb-cream); font-variant-numeric:tabular-nums }
.cb-caso dt{ font:500 12px/1.4 var(--cb-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--cb-cream-60) }
@media (max-width:600px){ .cb-caso dl{ grid-template-columns:1fr } }

/* --- Logos (html-widgets/logos.html) --- */
.cb-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.cb-marquee-row{ display:flex; gap:clamp(40px,6vw,96px); width:max-content; align-items:center }
.cb-marquee-row img{ height:56px !important; width:auto !important; opacity:.72 }
@media (max-width:600px){ .cb-marquee-row{ flex-wrap:wrap; width:auto; justify-content:center; gap:24px 40px } }

/* --- Botón magnético: widget Botón con clases cb-btn cb-magnet --- */
.cb-magnet{ display:inline-block; will-change:transform }

@media (prefers-reduced-motion:reduce){
  .cb-casos .e-loop-item img, .elementor-location-header, .cb-header{ transition:none }
}
/* =========================================================================
   BLOG — tarjetas de posts (loop grids). Prefijo cbb-.
   Lo estructural de las tarjetas va AQUÍ (en el tema), no en el JSON de la
   plantilla loop: el CSS de una plantilla importada se pierde al importar
   (lección 7.4). Mismo patrón que .cb-card del porfolio.
   ========================================================================= */
/* Tarjeta DESTACADA grande (loop-template "Post destacado") */
.elementor .cbb-feat{ background:#1C1C1C; border:1px solid rgba(250,246,237,.12); padding:clamp(24px,3vw,48px); height:100%; justify-content:space-between; transition:border-color .3s }
.elementor .cbb-feat:hover{ border-color:#EC5C53 }
.elementor .cbb-feat-meta{ align-items:flex-start; justify-content:space-between }
.elementor .cbb-feat-num .elementor-heading-title{ margin:0; font:300 clamp(72px,8vw,120px)/1 Geist,sans-serif; letter-spacing:-.06em; color:rgba(250,246,237,.10) !important }
.elementor .cbb-feat-cat .elementor-heading-title{ margin:0; font:500 12px/1 "Geist Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:#EC5C53; text-align:right }
.elementor .cbb-feat-body{ margin:auto 0 }
.elementor .cbb-feat-title a, .elementor .cbb-feat-title .elementor-heading-title{ margin:0; font:300 clamp(30px,3.4vw,52px)/1.05 Geist,sans-serif; letter-spacing:-.035em; color:#FAF6ED; text-wrap:balance }
.elementor .cbb-feat:hover .cbb-feat-title{ color:#EC5C53 }
.elementor .cbb-feat-title a{ text-decoration:none; color:#FAF6ED }
.elementor .cbb-feat-excerpt p{ margin:clamp(16px,2vw,28px) 0 0; color:rgba(250,246,237,.62); font:400 16px/1.6 Geist,sans-serif; max-width:46ch }
.elementor .cbb-feat-foot{ align-items:center; justify-content:space-between; border-top:1px solid rgba(250,246,237,.12); padding-top:20px }
.elementor .cbb-feat-date .elementor-heading-title{ margin:0; font:500 12px/1 "Geist Mono",monospace; color:rgba(250,246,237,.62) }
.elementor .cbb-feat-go .elementor-heading-title{ margin:0; font:500 12px/1 "Geist Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:#FAF6ED }
.elementor .cbb-feat:hover .cbb-feat-go .elementor-heading-title{ color:#EC5C53 }
/* Fila LISTA (loop-template "Post lista") */
.elementor .cbb-row{ padding-block:clamp(22px,2.8vw,40px); align-items:center; justify-content:space-between; gap:24px }
.elementor .cbb-n .elementor-heading-title{ margin:0; font:500 13px/1 "Geist Mono",monospace; color:rgba(250,246,237,.28) !important; font-variant-numeric:tabular-nums }
.elementor .cbb-cat .elementor-heading-title{ margin:0; font:500 11px/1 "Geist Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:#EC5C53 }
.elementor .cbb-t a, .elementor .cbb-t .elementor-heading-title{ margin:0; font:300 clamp(20px,2.2vw,32px)/1.12 Geist,sans-serif; letter-spacing:-.025em; color:#FAF6ED; text-wrap:balance }
.elementor .cbb-row:hover .cbb-t{ color:#EC5C53 }
.elementor .cbb-t a{ text-decoration:none; color:#FAF6ED }
.elementor .cbb-x p{ margin:8px 0 0; color:rgba(250,246,237,.62); font:400 15px/1.6 Geist,sans-serif; max-width:72ch }
.elementor .cbb-d .elementor-heading-title{ margin:0; font:500 12px/1 "Geist Mono",monospace; color:rgba(250,246,237,.62); white-space:nowrap }
/* Numeración automática por posición en el loop */
.cbb-grid .elementor-loop-container{ counter-reset:cbbfeat }
.cbb-list .elementor-loop-container{ counter-reset:cbbrow }
.cbb-grid .e-loop-item{ counter-increment:cbbfeat }
.cbb-list .e-loop-item{ counter-increment:cbbrow }
.cbb-feat-num .elementor-heading-title::after{ content:counter(cbbfeat,decimal-leading-zero) }
.cbb-n .elementor-heading-title::after{ content:counter(cbbrow,decimal-leading-zero) }
@media (max-width:900px){
  .cbb-feat-num{ display:none }
  .cbb-grid .elementor-loop-container{ grid-template-columns:1fr !important }
}
/* =========================================================================
   BLOG — tarjetas de posts (loop grids). Prefijo cbb-.
   Lo estructural de las tarjetas va AQUÍ (en el tema), no en el JSON de la
   plantilla loop: el CSS de una plantilla importada se pierde al importar
   (lección 7.4). Mismo patrón que .cb-card del porfolio.
   ========================================================================= */
/* Tarjeta DESTACADA grande (loop-template "Post destacado") */
.elementor .cbb-feat{ background:#1C1C1C; border:1px solid rgba(250,246,237,.12); padding:clamp(24px,3vw,48px); height:100%; justify-content:space-between; transition:border-color .3s }
.elementor .cbb-feat:hover{ border-color:#EC5C53 }
.elementor .cbb-feat-meta{ align-items:flex-start; justify-content:space-between }
.elementor .cbb-feat-num .elementor-heading-title{ margin:0; font:300 clamp(72px,8vw,120px)/1 Geist,sans-serif; letter-spacing:-.06em; color:rgba(250,246,237,.10) !important }
.elementor .cbb-feat-cat .elementor-heading-title{ margin:0; font:500 12px/1 "Geist Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:#EC5C53; text-align:right }
.elementor .cbb-feat-body{ margin:auto 0 }
.elementor .cbb-feat-title a, .elementor .cbb-feat-title .elementor-heading-title{ margin:0; font:300 clamp(30px,3.4vw,52px)/1.05 Geist,sans-serif; letter-spacing:-.035em; color:#FAF6ED; text-wrap:balance }
.elementor .cbb-feat:hover .cbb-feat-title{ color:#EC5C53 }
.elementor .cbb-feat-title a{ text-decoration:none; color:#FAF6ED }
.elementor .cbb-feat-excerpt p{ margin:clamp(16px,2vw,28px) 0 0; color:rgba(250,246,237,.62); font:400 16px/1.6 Geist,sans-serif; max-width:46ch }
.elementor .cbb-feat-foot{ align-items:center; justify-content:space-between; border-top:1px solid rgba(250,246,237,.12); padding-top:20px }
.elementor .cbb-feat-date .elementor-heading-title{ margin:0; font:500 12px/1 "Geist Mono",monospace; color:rgba(250,246,237,.62) }
.elementor .cbb-feat-go .elementor-heading-title{ margin:0; font:500 12px/1 "Geist Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:#FAF6ED }
.elementor .cbb-feat:hover .cbb-feat-go .elementor-heading-title{ color:#EC5C53 }
/* Fila LISTA (loop-template "Post lista") */
.elementor .cbb-row{ padding-block:clamp(22px,2.8vw,40px); align-items:center; justify-content:space-between; gap:24px }
.elementor .cbb-n .elementor-heading-title{ margin:0; font:500 13px/1 "Geist Mono",monospace; color:rgba(250,246,237,.28) !important; font-variant-numeric:tabular-nums }
.elementor .cbb-cat .elementor-heading-title{ margin:0; font:500 11px/1 "Geist Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:#EC5C53 }
.elementor .cbb-t a, .elementor .cbb-t .elementor-heading-title{ margin:0; font:300 clamp(20px,2.2vw,32px)/1.12 Geist,sans-serif; letter-spacing:-.025em; color:#FAF6ED; text-wrap:balance }
.elementor .cbb-row:hover .cbb-t{ color:#EC5C53 }
.elementor .cbb-t a{ text-decoration:none; color:#FAF6ED }
.elementor .cbb-x p{ margin:8px 0 0; color:rgba(250,246,237,.62); font:400 15px/1.6 Geist,sans-serif; max-width:72ch }
.elementor .cbb-d .elementor-heading-title{ margin:0; font:500 12px/1 "Geist Mono",monospace; color:rgba(250,246,237,.62); white-space:nowrap }
/* Numeración automática por posición en el loop */
.cbb-grid .elementor-loop-container{ counter-reset:cbbfeat }
.cbb-list .elementor-loop-container{ counter-reset:cbbrow }
.cbb-grid .e-loop-item{ counter-increment:cbbfeat }
.cbb-list .e-loop-item{ counter-increment:cbbrow }
.cbb-feat-num .elementor-heading-title::after{ content:counter(cbbfeat,decimal-leading-zero) }
.cbb-n .elementor-heading-title::after{ content:counter(cbbrow,decimal-leading-zero) }
@media (max-width:900px){
  .cbb-feat-num{ display:none }
  .cbb-grid .elementor-loop-container{ grid-template-columns:1fr !important }
}