/* --- Header limpio, una fila: logo izq + menú der --- */
.container-header {
  padding: 12px 0 !important;                 /* menos alto */
  background:#fff !important;
  border-bottom:1px solid #eaeaea !important;
}
.container-header .grid-child {
  width: min(1200px, 92%) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

/* Logo a la izquierda (mediano) */
.container-header .site-branding {
  margin-right: 32px !important;
}
.container-header .site-branding img {
  max-height: 80px !important;  /* ajusta si lo quieres más chico/grande */
  height: auto !important;
}

/* Contenedor del menú a la derecha */
.container-header .container-nav {
  margin-left: auto !important;
}

/* Menú horizontal con separación moderada */
.container-header .mod-menu {
  display: flex !important;
  gap: 200px !important;          /* espacio entre items */
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Texto del menú: tamaño normal y negro */
.container-header .mod-menu a {
  color: #000 !important;
  font-weight: 600 !important;
  font-size: 17px !important;    /* ← aquí reduces el tamaño */
  line-height: 1.2 !important;
  text-decoration: none !important;
}
.container-header .mod-menu a:hover {
  text-decoration: underline !important;
}
/* --- Efecto azul al pasar el cursor por los ítems del menú --- */
.container-header .mod-menu a:hover,
.container-header .mod-menu a:focus,
.container-header .mod-menu li.active > a {
  color: #1d4ed8 !important; /* azul elegante (puedes usar #007BFF si prefieres más fuerte) */
  transition: color 0.2s ease-in-out !important;
}

/* ====== CooBook · Hero principal ====== */
:root{
  --cb-bg: #ffffff;
  --cb-text: #0a0a0a;
  --cb-muted: #5b6472;
  --cb-primary: #0b62ff;
  --cb-primary-ink: #0a46b8;
  --cb-ring: rgba(11,98,255,0.18);
}

.cb-hero{
  position: relative;
  isolation: isolate;
  background: var(--cb-bg);
  overflow: hidden;
  padding: clamp(72px, 8vw, 120px) 24px;
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}

.cb-hero__inner{
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.cb-hero__title{
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--cb-text);
  margin: 0 0 12px 0;
}

.cb-hero__subtitle{
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--cb-muted);
  margin: 0 auto 28px auto;
  max-width: 900px;
}

.cb-hero__actions{
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 18px;
}

.cb-btn{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  will-change: transform;
  border: 1px solid transparent;
}

.cb-btn--primary{
  background: var(--cb-primary);
  color: #fff;
  box-shadow: 0 10px 30px var(--cb-ring);
}
.cb-btn--primary:hover{
  transform: translateY(-2px);
  background: var(--cb-primary-ink);
  box-shadow: 0 14px 36px var(--cb-ring);
}

.cb-btn--ghost{
  background: transparent;
  color: var(--cb-text);
  border-color: rgba(10,10,10,0.12);
}
.cb-btn--ghost:hover{
  transform: translateY(-2px);
  border-color: rgba(10,10,10,0.24);
}

.cb-hero__meta{
  margin-top: 8px;
  font-size: 14px;
  color: var(--cb-muted);
}

/* ====== Fondo animado con orbes ====== */
.cb-hero__bg{
  position: absolute;
  inset: -10% -10% 0 -10%;
  z-index: -1;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(11,98,255,0.06), transparent 60%),
    linear-gradient(180deg, rgba(11,98,255,0.03) 0%, transparent 50%);
  pointer-events: none;
}

.cb-orb{
  position: absolute;
  width: clamp(160px, 20vw, 320px);
  aspect-ratio: 1/1;
  filter: blur(28px);
  border-radius: 50%;
  opacity: .6;
  animation: float 12s ease-in-out infinite;
  background: radial-gradient(circle at 30% 30%, rgba(11,98,255,.48), rgba(11,98,255,.08) 60%, transparent 70%);
}

.cb-orb--1{ top: 10%; left: 8%; animation-delay: 0s; }
.cb-orb--2{ top: 40%; right: 6%; animation-delay: 2.2s; }
.cb-orb--3{ bottom: -4%; left: 50%; transform: translateX(-50%); animation-delay: 4.5s; }

@keyframes float{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,-14px,0) scale(1.03); }
}

/* ====== Responsivo ====== */
@media (min-width: 992px){
  .cb-hero__subtitle{ margin-bottom: 32px; }
  .cb-hero__actions{ gap: 16px; }
}fy-self: end; }
}

___________________________________________________________________________________________________________________________


Sesion 2 

/* ====== Bloque 2 PRO · Qué es CooBook (futurista) ====== */
:root{
  --cb-primary: #0b62ff;
  --cb-primary-ink: #0a46b8;
  --cb-text: #0a0a0a;
  --cb-muted: #5b6472;
}

/* Contenedor general con fondo tech */
.cb-about-pro{
  position: relative;
  overflow: clip;
  border-radius: 28px;
  margin-top: clamp(28px, 4vw, 56px);
  padding: 0;
  background: #fff;
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
}

/* Fondo: grid animada + orbes */
.cb-techbg{
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(11,98,255,.08), transparent 60%),
    radial-gradient(800px 400px at 10% 110%, rgba(11,98,255,.05), transparent 60%);
}
.cb-techbg__grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(10,10,10,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.06) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
  mask-image: radial-gradient(80% 60% at 50% 40%, #000 70%, transparent 100%);
  animation: cb-scan 12s linear infinite;
}
@keyframes cb-scan{
  0%{ transform: translateY(0) }
  100%{ transform: translateY(-26px) }
}
.cb-techbg__orb{
  position: absolute; width: clamp(160px, 24vw, 380px); aspect-ratio: 1/1;
  border-radius: 50%; filter: blur(30px); opacity: .5;
  background: radial-gradient(circle at 30% 30%, rgba(11,98,255,.45), rgba(11,98,255,.08) 60%, transparent 70%);
  animation: float 14s ease-in-out infinite;
}
.cb-techbg__orb--a{ top: 8%; left: 8%; animation-delay: .2s; }
.cb-techbg__orb--b{ bottom: -6%; right: 6%; animation-delay: 3.2s; }

@keyframes float{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,-14px,0) scale(1.03); }
}

/* Layout principal */
.cb-about-pro__inner{
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 22px;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 28px);
}

/* Tarjeta vidrio con halo neon */
.cb-card{
  position: relative;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(14px);
  border-radius: 22px;
  padding: clamp(22px, 3.8vw, 28px);
  border: 1px solid rgba(11,98,255,.18);
  box-shadow:
    0 10px 30px rgba(11,98,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.6);
}
.cb-card::before{
  content:""; position:absolute; inset:-2px;
  border-radius: 24px;
  background: conic-gradient(from 180deg at 50% 50%,
    rgba(11,98,255,.0), rgba(11,98,255,.25), rgba(11,98,255,.0));
  filter: blur(20px); opacity: .8; z-index:-1;
}

.cb-card__title{
  font-size: clamp(22px, 3.2vw, 36px);
  line-height: 1.15; letter-spacing: -0.01em;
  color: var(--cb-text); margin: 2px 0 10px;
}
.cb-card__lead{
  font-size: clamp(16px, 2.2vw, 18px);
  color: var(--cb-muted); margin-bottom: 16px;
}

.cb-feats{ list-style: none; padding:0; margin:0; display:grid; gap:14px; }
.cb-feat{
  display:grid; grid-template-columns: 42px 1fr; gap:12px; align-items:flex-start;
  padding:12px; border-radius:14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(10,10,10,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cb-feat:hover{
  transform: translateY(-2px);
  border-color: rgba(11,98,255,.28);
  box-shadow: 0 10px 28px rgba(11,98,255,.12);
}
.cb-feat__ico{
  width:50px; height:50px; display:inline-grid; place-items:center;
  border-radius:12px;
  background: radial-gradient(120% 120% at 20% 10%, rgba(11,98,255,.20), rgba(11,98,255,.08));
  color: var(--cb-primary);
  box-shadow: inset 0 0 0 1px rgba(11,98,255,.28);
}
.cb-feat__ico img{
  width:50px; height:50px; display:block; filter: invert(0);
}

.cb-about-pro__cta{ margin-top: 16px; display:flex; gap:12px; flex-wrap:wrap; }
.cb-btn{
  display:inline-block; padding:12px 18px; border-radius:14px; font-weight:600;
  text-decoration:none; border:1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.cb-btn--primary{ background: var(--cb-primary); color:#fff; box-shadow: 0 10px 30px rgba(11,98,255,.18); }
.cb-btn--primary:hover{ background: var(--cb-primary-ink); transform: translateY(-2px); box-shadow: 0 14px 38px rgba(11,98,255,.22); }
.cb-btn--ghost{ background: transparent; color: var(--cb-text); border-color: rgba(10,10,10,.16); }
.cb-btn--ghost:hover{ transform: translateY(-2px); border-color: rgba(10,10,10,.28); }

/* Imagen del e-reader con efecto tilt */
.cb-device{
  position: relative; margin: 0 auto; max-width: 720px;
  perspective: 1000px;
}
.cb-device img{
  width: 100%; height: auto; display:block;
  border-radius: 20px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  transform: rotateX(4deg) rotateY(-8deg);
  transition: transform .35s ease, box-shadow .35s ease;
}
.cb-device:hover img{
  transform: rotateX(0deg) rotateY(0deg) translateY(-2px);
  box-shadow: 0 28px 80px rgba(11,98,255,.22);
}
.cb-device__glow{
  position:absolute; inset:-6% -6% auto -6%; height: 60%;
  background: radial-gradient(60% 80% at 50% 100%, rgba(11,98,255,.22), transparent 70%);
  filter: blur(20px); z-index:-1;
}

/* Responsive layout */
@media (min-width: 992px){
  .cb-about-pro__inner{
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 34px;
  }
}
Sesion 3 _____________________________________________________________________________________________________________________________________________________
/* ====== Bloque 3 · Cómo funciona (línea animada + glass) ====== */
:root{
  --cb-primary:#0b62ff;
  --cb-primary-ink:#0a46b8;
  --cb-text:#0a0a0a;
  --cb-muted:#5b6472;
}

.cb-flow{
  position: relative;
  margin-top: clamp(32px,4vw,60px);
  background:#fff;
  border-radius: 28px;
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
  overflow: hidden;
}
.cb-flow__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px,6vw,72px) clamp(20px,4vw,28px);
  position: relative;
  z-index: 1;
}
.cb-flow__head{ text-align:center; margin-bottom: 20px; }
.cb-flow__title{
  font-size: clamp(22px,3.2vw,36px);
  letter-spacing:-0.01em; margin:0 0 8px 0; color:var(--cb-text);
}
.cb-flow__lead{ color:var(--cb-muted); font-size: clamp(15px,2.1vw,18px); margin:0; }

/* Track animado (línea con pulso que recorre los pasos) */
.cb-flow__track{
  position: absolute; left: 50%; transform: translateX(-50%);
  top: clamp(116px, 14vw, 140px);
  width: min(92%, 1100px);
  height: 4px;
  background: linear-gradient(90deg, rgba(11,98,255,.15), rgba(11,98,255,.05));
  border-radius: 999px;
  overflow: hidden;
}
.cb-flow__pulse{
  position: absolute; top:-6px; left:-10%;
  width: 14%; height: 16px; border-radius: 999px;
  background: radial-gradient(60% 80% at 50% 50%, rgba(11,98,255,.55), rgba(11,98,255,0));
  animation: cb-pulse-move 5.5s linear infinite;
  filter: blur(2px);
}
@keyframes cb-pulse-move{
  0%{ transform: translateX(0%); opacity:.85; }
  65%{ opacity:.85; }
  100%{ transform: translateX(820%); opacity:0; }
}

/* Pasos */
.cb-flow__steps{
  list-style:none; padding:0; margin: clamp(24px,3vw,32px) 0 0 0;
  display: grid; gap: 16px;
}
.cb-step{
  position: relative;
  background: rgba(255,255,255,.66);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(11,98,255,.18);
  border-radius: 18px;
  padding: 14px 14px 16px 14px;
  box-shadow: 0 10px 28px rgba(11,98,255,.08), inset 0 0 0 1px rgba(255,255,255,.6);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cb-step:hover{
  transform: translateY(-2px);
  border-color: rgba(11,98,255,.28);
  box-shadow: 0 16px 36px rgba(11,98,255,.12);
}
.cb-step__icon{
  width: 80px; height: 80px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 10px;
  background: radial-gradient(120% 120% at 20% 10%, rgba(11,98,255,.20), rgba(11,98,255,.08));
  box-shadow: inset 0 0 0 1px rgba(11,98,255,.26);
}
.cb-step__icon img{
  width: 80px; height: 80px; display:block;
}
.cb-step__title{
  margin: 0 0 4px 0; font-weight: 700;
  letter-spacing: .2px; color: var(--cb-text);
}
.cb-step__text{ margin:0; color:var(--cb-muted); font-size: 14.5px; }

/* Conectores visuales entre tarjetas (desktop) */
@media (min-width: 980px){
  .cb-flow__steps{
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
  }
  .cb-step::after{
    content:""; position: absolute; top: 36px; right: -10px;
    width: 20px; height: 4px; border-radius: 999px;
    background: linear-gradient(90deg, rgba(11,98,255,.22), rgba(11,98,255,.06));
  }
  .cb-step:last-child::after{ display:none; }
}

/* Fondo sutil cuadriculado del bloque */
.cb-flow::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(11,98,255,.06), transparent 60%),
    radial-gradient(800px 400px at 10% 110%, rgba(11,98,255,.04), transparent 60%),
    linear-gradient(rgba(10,10,10,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.05) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px, 26px 26px;
  mask-image: radial-gradient(80% 60% at 50% 40%, #000 70%, transparent 100%);
}

Sesion 4 _____________________________________________________________

/* ====== Título cinético con aurora + cápsula lateral ====== */
:root{
  --cb-text: #0a0a0a;
  --cb-muted: #5b6472;
  --cb-primary: #0b62ff;
  --cb-ink: #0a46b8;
  --cb-aurora-a: #6aa8ff;
  --cb-aurora-b: #8be7ff;
  --cb-aurora-c: #b08bff;
  --cb-aurora-d: #67ffd1;
}

#cb-title-kinetic{
  position: relative;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
  margin: clamp(28px,4vw,48px) 0;
}
#cb-title-kinetic::before{
  /* retícula sutil distinta a bloques previos */
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1000px 500px at 80% -10%, rgba(11,98,255,.05), transparent 60%),
    radial-gradient(700px 350px at 10% 110%, rgba(11,98,255,.04), transparent 60%),
    linear-gradient(rgba(10,10,10,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.045) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px, 22px 22px;
  mask-image: radial-gradient(80% 60% at 50% 40%, #000 70%, transparent 100%);
}

.cb-title__inner{
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  padding: clamp(26px, 4vw, 42px) clamp(18px, 4vw, 28px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Cápsula lateral: pieza visual viva (sin texto) */
.cb-pod{
  position: relative;
  width: 120px; height: 120px;
  border-radius: 20px;
  background: linear-gradient(145deg, #f6f9ff, #ffffff);
  border: 1px solid rgba(11,98,255,.14);
  box-shadow: 0 10px 28px rgba(11,98,255,.12), inset 0 0 0 1px rgba(255,255,255,.7);
  overflow: hidden;
}
.cb-pod__core{
  position:absolute; inset: 18% 18% 18% 18%;
  background: radial-gradient(60% 60% at 50% 50%, var(--cb-aurora-b), transparent 70%);
  filter: blur(6px);
  animation: core-pulse 3.2s ease-in-out infinite;
}
@keyframes core-pulse{
  0%,100%{ transform: scale(1); opacity:.7; }
  50%{ transform: scale(1.06); opacity:1; }
}
.cb-pod__ring{
  position:absolute; inset: 8% 8% 8% 8%;
  border-radius: 18px;
  border: 1px dashed rgba(11,98,255,.28);
  animation: ring-spin 10s linear infinite;
}
.cb-pod__ring--a{ animation-direction: normal; }
.cb-pod__ring--b{ inset: 2% 2% 2% 2%; animation-direction: reverse; opacity:.6; }
@keyframes ring-spin{
  0%{ transform: rotate(0deg) }
  100%{ transform: rotate(360deg) }
}
.cb-pod__spark{
  position:absolute; width: 60px; height: 60px;
  background: radial-gradient(40% 40% at 50% 50%, var(--cb-aurora-c), transparent 70%);
  filter: blur(10px);
  opacity:.6;
}
.cb-pod__spark--1{ top:-10px; left:-6px; animation: spark1 7s ease-in-out infinite; }
.cb-pod__spark--2{ bottom:-12px; right:-10px; animation: spark2 7s ease-in-out infinite; }
@keyframes spark1{
  0%,100%{ transform: translate(0,0) }
  50%{ transform: translate(8px, 10px) }
}
@keyframes spark2{
  0%,100%{ transform: translate(0,0) }
  50%{ transform: translate(-10px, -6px) }
}

/* Titular con aurora y subrayado cinético */
.cb-headline{
  display: grid; gap: 8px; align-content: center;
}
.cb-title{
  position: relative;
  font-size: clamp(26px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--cb-text);
  isolation: isolate;
  display: inline-block;
  max-width: 100%;
}
.cb-title__aurora{
  /* halo “aurora” que se desplaza suavemente sobre el título */
  content:""; position:absolute; inset:-16% -6% -18% -6%;
  z-index:-1; border-radius: 28px;
  background:
    radial-gradient(60% 120% at 0% 60%, var(--cb-aurora-a), transparent 60%),
    radial-gradient(60% 120% at 100% 40%, var(--cb-aurora-d), transparent 60%),
    radial-gradient(120% 60% at 50% 0%, var(--cb-aurora-c), transparent 60%);
  filter: blur(22px);
  opacity:.6;
  animation: aurora-drift 12s ease-in-out infinite;
}
@keyframes aurora-drift{
  0%,100%{ transform: translate3d(0,0,0) }
  50%{ transform: translate3d(0,6px,0) }
}
.cb-title__underline{
  content:""; position:absolute; left: 0; right: 0;
  bottom: -8px; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--cb-primary), var(--cb-ink));
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  overflow: hidden;
}
.cb-title__underline::after{
  /* destello viajero */
  content:""; position:absolute; top:-6px; left:-10%;
  width: 14%; height: 16px; border-radius: 999px;
  background: radial-gradient(60% 80% at 50% 50%, rgba(255,255,255,.9), rgba(255,255,255,0));
  animation: underline-spark 3.8s linear infinite;
  filter: blur(2px);
}
@keyframes underline-spark{
  0%{ transform: translateX(0%); opacity:.9; }
  100%{ transform: translateX(820%); opacity:0; }
}

.cb-subtitle{
  margin: 2px 0 0 0;
  font-size: clamp(14px, 2vw, 18px);
  color: var(--cb-muted);
}

/* Layout responsive del bloque título */
@media (min-width: 960px){
  .cb-title__inner{
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 22px;
  }
  .cb-pod{ justify-self: start; }
}
@media (max-width: 959.98px){
  .cb-pod{
    width: 100px; height: 100px;
    justify-self: center;
  }
  .cb-headline{ text-align: center; }
}

/* ====== Perfiles y beneficios (Bootstrap Accordion + estilo futurista) ====== */
:root{
  --cb-primary:#0b62ff;
  --cb-primary-ink:#0a46b8;
  --cb-text:#0a0a0a;
  --cb-muted:#5b6472;
  --cb-glass: rgba(255,255,255,.65);
}

#coobook-perfiles{
  margin-top: clamp(36px, 5vw, 72px);
}
.cb-profiles__inner{
  position: relative;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
  overflow: hidden;
  padding: clamp(36px, 6vw, 72px) clamp(18px, 4vw, 28px);
}
.cb-profiles__head{
  margin-bottom: clamp(18px, 3vw, 28px);
}
.cb-profiles__title{
  font-size: clamp(22px, 3.2vw, 36px);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--cb-text);
}
.cb-profiles__lead{
  color: var(--cb-muted);
}

/* Acordeón */
.cb-accordion .cb-acc-item{
  background: transparent;
  border: none;
  margin-bottom: 14px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}
.cb-accordion .cb-acc-item::before{
  content:""; position:absolute; inset:-2px;
  background: conic-gradient(from 180deg, rgba(11,98,255,.0), rgba(11,98,255,.2), rgba(11,98,255,.0));
  filter: blur(20px); z-index:0; opacity:.7;
  border-radius: 20px;
}
.cb-acc-btn{
  position: relative;
  z-index: 1;
  background: var(--cb-glass);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(11,98,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 8px 26px rgba(11,98,255,.12);
  border-radius: 18px;
  font-weight: 700;
  color: var(--cb-text);
}
.cb-acc-btn:focus{
  box-shadow: 0 0 0 3px rgba(11,98,255,.25);
}
.cb-acc-btn:not(.collapsed){
  color: var(--cb-text);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  border-color: rgba(11,98,255,.28);
}

.accordion-body{
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(11,98,255,.16);
  border-top: none;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06) inset;
}

/* Grid de tarjetas */
.cb-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 10px;
}
@media (min-width: 768px){
  .cb-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px){
  .cb-grid{ grid-template-columns: repeat(3, 1fr); }
}
.cb-card{
  border-radius: 16px;
  padding: 14px 14px 16px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(10,10,10,.06);
  box-shadow: 0 10px 26px rgba(11,98,255,.08), inset 0 0 0 1px rgba(255,255,255,.6);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cb-card:hover{
  transform: translateY(-2px);
  border-color: rgba(11,98,255,.28);
  box-shadow: 0 14px 32px rgba(11,98,255,.12);
}
.cb-card h3{
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--cb-text);
}
.cb-card p{
  font-size: 14.5px;
  color: var(--cb-muted);
  margin: 0;
}

/* Fondo sutil de la sección */
.cb-profiles__inner::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(11,98,255,.06), transparent 60%),
    radial-gradient(800px 400px at 10% 110%, rgba(11,98,255,.04), transparent 60%),
    linear-gradient(rgba(10,10,10,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.05) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px, 26px 26px;
  mask-image: radial-gradient(80% 60% at 50% 40%, #000 70%, transparent 100%);
}

Sesion 5 ________________________________________________

/* ====== TECNOLOGÍA v2 (animaciones puras CSS, diseño distinto) ====== */
:root{
  --tx:#0a0a0a;
  --mut:#5b6472;
  --pri:#0b62ff;
  --ink:#0a46b8;
  --glass: rgba(255,255,255,.75);
}

.techv2{
  position: relative;
  background:#fff;
  border-radius: 30px;
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
  overflow: hidden;
  margin-top: clamp(36px,5vw,64px);
  isolation: isolate;
}
.techv2__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(36px,6vw,80px) clamp(18px,4vw,28px);
  position: relative; z-index: 1;
}

/* Fondo dinámico (blobs + mesh + circuitos) */
.techv2__bg{ position:absolute; inset:0; z-index:0; }
.blob{
  position:absolute; width: min(42vw,560px); aspect-ratio:1/1;
  filter: blur(36px); opacity:.45; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(11,98,255,.55), rgba(11,98,255,.06) 60%, transparent 70%);
  animation: drift 26s ease-in-out infinite;
}
.blob--a{ top:-18%; left:-10%; }
.blob--b{ bottom:-22%; right:-12%; animation-delay: 8s; }
@keyframes drift{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,-18px,0) scale(1.04); }
}
.mesh{
  position:absolute; inset:0; opacity:.5;
  background:
    linear-gradient(rgba(10,10,10,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.045) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  mask-image: radial-gradient(80% 60% at 50% 40%, #000 70%, transparent 100%);
}
.circuits{
  position:absolute; inset:0; opacity:.25;
  background:
    repeating-linear-gradient(90deg, rgba(11,98,255,.18), rgba(11,98,255,.18) 2px, transparent 2px, transparent 14px),
    repeating-linear-gradient(0deg, rgba(11,98,255,.12), rgba(11,98,255,.12) 2px, transparent 2px, transparent 18px);
  mask-image: radial-gradient(70% 50% at 70% 30%, #000 60%, transparent 100%);
  animation: circuitsFlow 18s linear infinite;
}
@keyframes circuitsFlow{
  from{ transform: translateX(0) }
  to{ transform: translateX(-24px) }
}

/* Encabezado */
.techv2__head{ text-align:center; margin-bottom: clamp(18px,3vw,28px); }
.techv2__title{
  position: relative; display:inline-block;
  font-size: clamp(24px,4.2vw,48px);
  line-height:1.06; letter-spacing:-.02em; color:var(--tx);
}
.title-sheen{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:4px;
  border-radius:999px; background: linear-gradient(90deg, var(--pri), var(--ink));
  overflow:hidden; mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.title-sheen::after{
  content:""; position:absolute; top:-6px; left:-12%;
  width:14%; height:16px; border-radius:999px;
  background: radial-gradient(60% 80% at 50% 50%, rgba(255,255,255,.9), rgba(255,255,255,0));
  animation: sheen 3.6s linear infinite; filter: blur(2px);
}
@keyframes sheen{ to{ transform: translateX(820%)} }
.techv2__lead{ color:var(--mut); max-width:860px; margin:10px auto 0; }

/* Ticker */
.techv2__ticker{
  margin-top: 12px; overflow:hidden; height: 26px; position: relative; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.techv2__ticker span{
  position:absolute; white-space:nowrap; left:0; right:auto;
  animation: ticker 16s linear infinite;
  color: rgba(10,10,10,.55); font-weight:600; letter-spacing:.4px;
}
@keyframes ticker{
  from{ transform: translateX(0)}
  to{ transform: translateX(-50%)}
}

/* Grid */
.techv2__grid{
  display:grid; gap:18px; grid-template-columns: 1fr;
  margin-top: clamp(18px,3vw,28px);
}
@media (min-width: 980px){
  .techv2__grid{ grid-template-columns: repeat(2,1fr); }
}

/* Tile base */
.tile{
  position:relative; border-radius:22px; overflow:hidden;
  background: var(--glass);
  border:1px solid rgba(11,98,255,.18);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px rgba(11,98,255,.10), inset 0 0 0 1px rgba(255,255,255,.6);
  padding: clamp(18px,3.2vw,24px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover{
  transform: translateY(-3px);
  border-color: rgba(11,98,255,.3);
  box-shadow: 0 20px 52px rgba(11,98,255,.16);
}
.tile__art{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.tile__head{ position:relative; z-index:1; margin-bottom: 8px; }
.tile__head h3{ margin:0 0 2px; font-size: clamp(18px,2.6vw,22px); color:var(--tx); letter-spacing:-.01em; }
.kicker{ margin:0; color:var(--mut); font-size:14.5px; }
.tile__list{ position:relative; z-index:1; margin: 10px 0 0 18px; }
.tile__list li{ margin:6px 0; }

/* ===== Stablecoin: moneda girando + brillos ===== */
.tile--stable .coin{
  position:absolute; width:140px; height:140px; right:-20px; top:-20px;
  transform-style: preserve-3d; animation: coinSpin 10s linear infinite;
}
.coin__ring{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.2) 40%, rgba(11,98,255,.2) 60%, transparent 70%),
    conic-gradient(from 0deg, rgba(11,98,255,.28), rgba(11,98,255,.05), rgba(11,98,255,.28));
  box-shadow: 0 12px 24px rgba(11,98,255,.18);
}
.coin__shine{
  position:absolute; inset:10% 10% 10% 10%; border-radius:50%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.7), transparent 60%);
  filter: blur(4px); animation: shinePulse 3.2s ease-in-out infinite;
}
.spark{
  position:absolute; width:54px; height:54px; border-radius:50%;
  background: radial-gradient(circle at 50% 50%, rgba(11,98,255,.4), transparent 70%);
  filter: blur(10px); opacity:.6;
}
.spark--1{ left:-18px; top:6px; animation: sparkFloat 7s ease-in-out infinite; }
.spark--2{ right:-10px; bottom:0px; animation: sparkFloat 7s 1.2s ease-in-out infinite; }
@keyframes coinSpin{ to{ transform: rotateY(360deg) } }
@keyframes shinePulse{ 50%{ opacity:.9; transform: scale(1.04)} }
@keyframes sparkFloat{ 50%{ transform: translate(8px,-6px)} }

/* ===== Core Nodes: grafo con pulsos ===== */
.tile--nodes .graph{
  position:absolute; inset: 8% 8% 8% 8%;
}
.n{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(11,98,255,.9), rgba(11,98,255,.25));
  box-shadow: 0 0 0 0 rgba(11,98,255,.35);
  animation: pulse 2.6s infinite;
}
.n1{ left:14%; top:28%; }
.n2{ left:46%; top:18%; animation-delay:.4s; }
.n3{ right:18%; top:40%; animation-delay:.8s; }
.n4{ left:36%; bottom:18%; animation-delay:1.2s; }
.edge{
  position:absolute; height:2px; background: linear-gradient(90deg, rgba(11,98,255,.35), rgba(11,98,255,.1));
  transform-origin:left center; filter: blur(.2px);
}
.e1{ left:14%; top:28%; width: 36%; }
.e2{ left:46%; top:18%; width: 40%; transform: rotate(18deg); }
.e3{ left:36%; bottom:18%; width: 30%; transform: rotate(-28deg); }
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(11,98,255,.35) }
  50%{ box-shadow: 0 0 0 12px rgba(11,98,255,0) }
}

/* ===== Consenso: onda con escáner ===== */
.tile--consensus .wave{
  position:absolute; left:-10%; right:-10%; bottom:-8px; height: 96px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(11,98,255,.24), transparent 60%),
    repeating-linear-gradient(90deg, rgba(11,98,255,.22), rgba(11,98,255,.22) 2px, rgba(11,98,255,.06) 2px, rgba(11,98,255,.06) 10px);
  mask-image: radial-gradient(80% 100% at 50% 30%, #000, transparent 80%);
  filter: blur(6px);
}
.tile--consensus .scan{
  position:absolute; top:-10px; left:-12%; width:14%; height: 18px; border-radius: 999px;
  background: radial-gradient(60% 80% at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0));
  filter: blur(2px); opacity:.9; animation: scanMove 4.2s linear infinite;
}
@keyframes scanMove{ to{ transform: translateX(820%) } }

/* ===== OS e-readers: dispositivo con scanline + candado ===== */
.tile--os .ereader{
  position:absolute; right: -8px; bottom: -6px;
  width: 160px; height: 110px; border-radius: 14px;
  background: linear-gradient(145deg, #f7faff, #ffffff);
  border: 1px solid rgba(11,98,255,.18);
  box-shadow: 0 10px 28px rgba(11,98,255,.12), inset 0 0 0 1px rgba(255,255,255,.7);
}
.tile--os .screen{
  position:absolute; inset: 12px 14px; border-radius: 10px; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(11,98,255,.10), rgba(11,98,255,.0) 40%),
    #eaf1ff;
}
.tile--os .scanline{
  position:absolute; left:14px; right:14px; top: 20px; height: 8px; border-radius: 8px;
  background: radial-gradient(60% 80% at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0));
  filter: blur(1.2px); opacity:.9; animation: vScan 3.4s linear infinite;
}
@keyframes vScan{
  0%{ transform: translateY(0) }
  100%{ transform: translateY(52px) }
}
.tile--os .lock{
  position:absolute; left: 22px; bottom: 16px;
  width: 18px; height: 18px; border-radius: 4px;
  background: linear-gradient(145deg, #172030, #2a3c68);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.tile--os .lock::before{
  content:""; position:absolute; width: 12px; height: 10px; left:3px; top:-8px;
  border: 2px solid #2a3c68; border-bottom: none; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.15), transparent);
}

/* Pie CTA */
.techv2__foot{ margin-top: clamp(18px,3vw,28px); text-align:center; }
.btn-ghost{
  display:inline-block; padding:10px 16px; border-radius:14px;
  text-decoration:none; font-weight:700; color:var(--tx);
  border:1px solid rgba(10,10,10,.16);
  transition: transform .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn-ghost:hover{
  transform: translateY(-2px);
  border-color: rgba(11,98,255,.3);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(11,98,255,.12);
}


Sesion 6________________________________________________

/* ====== SESIÓN 6 · Por qué invertir en CooBook ====== */
:root{
  --tx:#0a0a0a;
  --mut:#5b6472;
  --pri:#0b62ff;
  --ink:#0a46b8;
}

.investv1{
  position:relative;
  background:#000;
  color:#fff;
  border-radius:30px;
  overflow:hidden;
  margin-top:clamp(36px,6vw,72px);
  isolation:isolate;
}
.investv1__inner{
  max-width:1200px;
  margin:0 auto;
  padding:clamp(48px,7vw,90px) clamp(20px,4vw,32px);
  position:relative;
  z-index:1;
}

/* --- Fondo animado --- */
.investv1__bg{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.orb{
  position:absolute; width:min(40vw,480px); aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(11,98,255,.4),rgba(11,98,255,.05)60%,transparent);
  filter:blur(40px); opacity:.5; animation:floatOrb 22s ease-in-out infinite;
}
.orb--1{ top:-15%; left:-10%; }
.orb--2{ bottom:-25%; right:-15%; animation-delay:7s; }
@keyframes floatOrb{
  0%,100%{ transform:translate3d(0,0,0) scale(1);}
  50%{ transform:translate3d(0,-30px,0) scale(1.1);}
}
.gridlines{
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,255,255,.06)1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06)1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(80% 60% at 50% 40%,#000 70%,transparent 100%);
  opacity:.5;
}
.pulse{
  position:absolute; left:50%; top:50%;
  width:80px; height:80px; border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 0 rgba(11,98,255,.3);
  animation:pulseCenter 4s infinite;
}
@keyframes pulseCenter{
  0%{box-shadow:0 0 0 0 rgba(11,98,255,.3);}
  70%{box-shadow:0 0 0 80px rgba(11,98,255,0);}
  100%{box-shadow:0 0 0 0 rgba(11,98,255,0);}
}

/* --- Encabezado --- */
.investv1__head{text-align:center;margin-bottom:clamp(24px,4vw,40px);}
.investv1__title{
  position:relative;display:inline-block;
  font-size:clamp(26px,4.5vw,52px);
  letter-spacing:-.02em;font-weight:700;
  background:linear-gradient(90deg,#ffffff,#a5c9ff,#67d0ff);
  -webkit-background-clip:text;color:transparent;
}
.glowline{
  position:absolute;left:0;right:0;bottom:-10px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,#0b62ff,#67d0ff);
  animation:lineFlow 4s linear infinite;
  mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
}
@keyframes lineFlow{to{transform:translateX(100%)}}
.investv1__lead{color:#d9d9d9;max-width:820px;margin:10px auto 0;}

/* --- Tarjetas --- */
.investv1__grid{
  display:grid;gap:20px;margin-top:clamp(20px,3vw,30px);
  grid-template-columns:1fr;
}
@media(min-width:980px){.investv1__grid{grid-template-columns:repeat(2,1fr);}}

/* Tarjeta base */
.card{
  position:relative;overflow:hidden;border-radius:18px;
  padding:clamp(20px,3vw,28px);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .3s ease,box-shadow .3s ease;
  backdrop-filter:blur(12px);
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 60px rgba(11,98,255,.3);
}
.card h3{margin:0 0 8px;font-size:22px;color:#fff;}
.card p{margin:0;color:#d0d0d0;font-size:15px;}
.card__icon{
  position:absolute;top:0;right:0;width:80px;height:80px;opacity:.25;
  background:radial-gradient(circle at 50% 50%,#67d0ff,transparent 70%);
  filter:blur(14px);animation:iconFloat 6s ease-in-out infinite;
}
@keyframes iconFloat{50%{transform:translateY(-8px);}}

/* Colores por tipo */
.card--growth{background:rgba(11,98,255,.1);}
.card--security{background:rgba(20,20,20,.4);}
.card--innovation{background:rgba(255,255,255,.08);}
.card--impact{background:rgba(11,98,255,.14);}

/* --- Botón CTA --- */
.investv1__foot{text-align:center;margin-top:clamp(28px,4vw,44px);}
.btn-neon{
  display:inline-block;
  padding:12px 24px;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
  color:#fff;
  border:1px solid rgba(103,208,255,.6);
  box-shadow:0 0 20px rgba(103,208,255,.3),inset 0 0 8px rgba(11,98,255,.3);
  background:linear-gradient(90deg,rgba(11,98,255,.4),rgba(103,208,255,.2));
  transition:box-shadow .3s ease,transform .2s ease;
}
.btn-neon:hover{
  transform:translateY(-2px);
  box-shadow:0 0 40px rgba(103,208,255,.6),inset 0 0 12px rgba(11,98,255,.4);
}

Sesion 7________________________________________________________

/* ====== SESIÓN 7 · VISIÓN Y FUTURO ====== */
:root{
  --v-text:#0a0a0a;
  --v-muted:#5b6472;
  --v-pri:#0b62ff;
  --v-ink:#0a46b8;
}

.vision7{
  position:relative; background:#fff; border-radius:30px;
  box-shadow:0 18px 60px rgba(0,0,0,.06); overflow:hidden;
  margin-top:clamp(36px,5vw,64px); isolation:isolate;
}
.vision7__inner{
  max-width:1200px; margin:0 auto;
  padding:clamp(36px,6vw,80px) clamp(18px,4vw,28px);
  position:relative; z-index:1;
}

/* Fondo etéreo distinto */
.vision7__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(11,98,255,.08), transparent 60%),
    radial-gradient(900px 500px at 90% 100%, rgba(11,98,255,.06), transparent 60%),
    linear-gradient(#ffffff, #ffffff);
}
.vision7__head{ text-align:center; margin-bottom:clamp(18px,3vw,28px); }
.vision7__title{
  position:relative; display:inline-block;
  font-size:clamp(24px,4.2vw,48px); letter-spacing:-.02em; color:var(--v-text);
}
.vision7__underline{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:4px; border-radius:999px;
  background:linear-gradient(90deg, var(--v-pri), var(--v-ink));
  overflow:hidden; mask-image:linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.vision7__underline::after{
  content:""; position:absolute; top:-6px; left:-12%; width:14%; height:16px; border-radius:999px;
  background:radial-gradient(60% 80% at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0));
  filter:blur(2px); animation: vSheen 3.6s linear infinite;
}
@keyframes vSheen{ to{ transform: translateX(820%) } }
.vision7__lead{ color:var(--v-muted); max-width:860px; margin:10px auto 0; }

/* === Marco animado para la animación === */
.vbox{
  position:relative; border-radius:22px; overflow:hidden;
  aspect-ratio: 16 / 9;               /* Cambia a 21/9 o 4/3 si te conviene */
  background:#f6f9ff;
  border:1px solid rgba(11,98,255,.18);
  box-shadow:0 14px 40px rgba(11,98,255,.10), inset 0 0 0 1px rgba(255,255,255,.7);
  margin-top:clamp(12px,2.5vw,22px);
}
.vbox::before{
  /* Borde dinámico (neón orbitando) */
  content:""; position:absolute; inset:-2px; border-radius:24px;
  background: conic-gradient(from 0deg, rgba(11,98,255,.0), rgba(11,98,255,.35), rgba(11,98,255,.0));
  filter: blur(6px); z-index:0; animation: ringOrbit 6s linear infinite;
}
@keyframes ringOrbit{ to{ transform: rotate(360deg) } }

/* Contenido multimedia */
.vbox__video, .vbox__fallback{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1; display:block;
}
/* Por defecto mostramos el VIDEO si existe; el GIF queda detrás. */
.vbox__fallback{ z-index:0; opacity:.95; }

/* CTA */
.vision7__foot{ text-align:center; margin-top:clamp(18px,3vw,28px); }
.vision7__btn{
  display:inline-block; padding:10px 16px; border-radius:14px; text-decoration:none;
  font-weight:700; color:var(--v-text);
  border:1px solid rgba(10,10,10,.16);
  transition: transform .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.vision7__btn:hover{
  transform: translateY(-2px);
  border-color: rgba(11,98,255,.3);
 
  box-shadow: 0 12px 30px rgba(11,98,255,.12);
}








_____________________________________________________________________________



.cb-footer-wrap {
    width: 100%;
    background: radial-gradient(circle at 10% 100%, rgba(15, 61, 147, 0.35) 0%, rgba(3, 6, 12, 1) 48%, rgba(1, 1, 2, 1) 100%);
    border-top: 1px solid rgba(158, 196, 255, 0.05);
}

.cb-footer-full {
    max-width: min(1180px, 100%);
    margin: 0 auto;
    padding: 3.5rem 1.5rem 2.5rem;
    color: #e6eeff;
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------------------- CAPA SUPERIOR ---------------------- */
.cb-footer-head {
    display: flex;
    justify-content: space-between;
    gap: 2.5rem;
    align-items: flex-start;
    margin-bottom: 2.8rem;
}

.cb-footer-logo {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .08em;
    margin-bottom: .6rem;
}

.cb-footer-tagline {
    max-width: 26rem;
    font-size: .9rem;
    color: rgba(230, 238, 255, .6);
    line-height: 1.5;
}

.cb-footer-company {
    margin-top: 1rem;
    font-size: .75rem;
    color: rgba(230, 238, 255, .38);
}

.cb-footer-social-title {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .24em;
    color: rgba(230, 238, 255, .6);
    margin-bottom: .75rem;
}

.cb-footer-social-list {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.cb-social-chip {
    display: inline-block;
    padding: .42rem .95rem .45rem;
    border-radius: 999px;
    border: 1px solid rgba(170, 207, 255, .18);
    background: rgba(0, 0, 0, .15);
    text-decoration: none;
    color: #fff;
    font-size: .7rem;
    letter-spacing: .01em;
    transition: all .15s ease-in-out;
    backdrop-filter: blur(2px);
}

.cb-social-chip:hover {
    border-color: rgba(170, 207, 255, .55);
    background: rgba(10, 99, 255, .22);
    transform: translateY(-1px);
}

/* --- Botón de donaciones --- */
.cb-footer-donate {
    margin-top: 1.5rem;
}

.cb-donate-btn {
    display: inline-block;
    background: linear-gradient(130deg, #5f9bff 0%, #0a6bff 100%);
    color: #fff;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    padding: .6rem 1.4rem;
    border-radius: 999px;
    letter-spacing: .05em;
    box-shadow: 0 0 12px rgba(22, 108, 255, 0.3);
    transition: all .2s ease;
}

.cb-donate-btn:hover {
    background: linear-gradient(130deg, #72a8ff 0%, #2178ff 100%);
    box-shadow: 0 0 18px rgba(22, 108, 255, 0.55);
    transform: translateY(-2px);
}

/* ---------------------- CAPA DE ENLACES ---------------------- */
.cb-footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 2rem;
    border-top: 1px solid rgba(240, 243, 252, .03);
    border-bottom: 1px solid rgba(240, 243, 252, .03);
    padding: 2.3rem 0 2rem;
}

.cb-footer-col h4 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .25em;
    margin-bottom: 1rem;
    color: #fff;
}

.cb-footer-col a {
    display: block;
    text-decoration: none;
    font-size: .8rem;
    margin-bottom: .5rem;
    color: rgba(230, 238, 255, .6);
    transition: color .12s ease, transform .12s ease;
}

.cb-footer-col a:hover {
    color: #fff;
    transform: translateX(3px);
}

.cb-footer-news p {
    font-size: .78rem;
    line-height: 1.45;
    margin-bottom: .8rem;
    color: rgba(230, 238, 255, .6);
}

.cb-footer-form {
    display: flex;
    gap: .6rem;
}

.cb-footer-form input {
    flex: 1;
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(169, 207, 255, .2);
    border-radius: .6rem;
    padding: .5rem .75rem;
    color: #fff;
    font-size: .78rem;
}

.cb-footer-form input::placeholder {
    color: rgba(230, 238, 255, .3);
}

.cb-footer-form button {
    background: linear-gradient(120deg, #5f9bff 0%, #0a6bff 100%);
    border: none;
    border-radius: .55rem;
    padding: .5rem .9rem;
    color: #fff;
    font-size: .75rem;
    cursor: pointer;
    transition: filter .12s ease;
}

.cb-footer-form button:hover {
    filter: brightness(1.03);
}

/* ---------------------- BARRA INFERIOR ---------------------- */
.cb-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 1.6rem;
    font-size: .7rem;
    color: rgba(230, 238, 255, .34);
}

.cb-footer-bottom-links {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.cb-footer-bottom-links a {
    color: rgba(230, 238, 255, .55);
    text-decoration: none;
    font-size: .7rem;
    transition: color .12s ease;
}

.cb-footer-bottom-links a:hover {
    color: #fff;
}

/* ---------------------- RESPONSIVE ---------------------- */

/* Tablets grandes */
@media (max-width: 1050px) {
    .cb-footer-head {
        flex-direction: column;
    }
    .cb-footer-links {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

/* Móviles */
@media (max-width: 640px) {
    .cb-footer-full {
        padding: 3.2rem 1rem 2.2rem;
    }

    .cb-footer-links {
        grid-template-columns: 1fr;
    }

    .cb-footer-form {
        flex-direction: column;
    }

    .cb-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .cb-footer-social-list {
        gap: .4rem;
    }

    .cb-social-chip {
        font-size: .68rem;
    }

    .cb-footer-donate {
        margin-top: 1rem;
    }

    .cb-donate-btn {
        font-size: .75rem;
        padding: .55rem 1.2rem;
    }
}







/* ====== FOOTER UPGRADE: fondo, acentos y animaciones ====== */

/* Fondo con grid sutil y barrido de luz */
.cb-footer-wrap {
  position: relative;
  overflow: hidden;
}

/* Grid sutil */
.cb-footer-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 10% 100%, rgba(39,86,158,0.18), transparent 60%),
    radial-gradient(900px 400px at 90% 0%, rgba(19,58,126,0.18), transparent 60%),
    linear-gradient(transparent, transparent),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.03) 0 1px,
      transparent 1px 48px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.03) 0 1px,
      transparent 1px 48px
    );
  pointer-events: none;
  z-index: 0;
}

/* Barrido de luz diagonal */
.cb-footer-wrap::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 140%;
  height: 140%;
  background: linear-gradient(115deg, transparent 35%, rgba(120,175,255,0.10) 45%, rgba(120,175,255,0.16) 50%, transparent 60%);
  filter: blur(10px);
  animation: cbSweep 9s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes cbSweep {
  0%   { transform: translate3d(0,0,0) rotate(0.001deg); }
  100% { transform: translate3d(30%,10%,0) rotate(0.001deg); }
}

/* El contenido queda por encima */
.cb-footer-full { position: relative; z-index: 1; }

/* Separadores con brillo suave */
.cb-footer-links {
  border-top: 1px solid rgba(160,200,255,0.10);
  border-bottom: 1px solid rgba(160,200,255,0.10);
  box-shadow: inset 0 1px 0 rgba(120,175,255,0.06), inset 0 -1px 0 rgba(120,175,255,0.06);
}

/* Títulos con subrayado neón */
.cb-footer-col h4,
.cb-footer-social-title {
  position: relative;
  text-shadow: 0 0 12px rgba(120,175,255,0.15);
}
.cb-footer-col h4::after,
.cb-footer-social-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #69a3ff, rgba(105,163,255,0));
  box-shadow: 0 0 12px rgba(105,163,255,0.6);
}

/* Logo más pro (gradiente sutil) */
.cb-footer-logo {
  background: linear-gradient(180deg, #ffffff, #cfe0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Chips sociales con glow */
.cb-social-chip {
  border-color: rgba(170, 207, 255, .32);
  background: rgba(10,16,28,.35);
  box-shadow: 0 0 0 0 rgba(105,163,255,0.0);
}
.cb-social-chip:hover {
  background: rgba(22, 109, 255, .18);
  box-shadow: 0 0 18px rgba(105,163,255,0.35);
  transform: translateY(-2px);
}

/* Links con micro-animación direccional */
.cb-footer-col a {
  position: relative;
  padding-left: 0;
}
.cb-footer-col a::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(105,163,255,0.0);
  transform: translateY(-50%) scale(0.8);
  transition: all .18s ease;
}
.cb-footer-col a:hover {
  transform: translateX(5px);
}
.cb-footer-col a:hover::before {
  background: rgba(105,163,255,0.9);
  box-shadow: 0 0 10px rgba(105,163,255,0.6);
}

/* Botón Donaciones con “shine” continuo */
.cb-donate-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cb-donate-btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    linear-gradient(130deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-120%);
  animation: cbShine 3.8s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes cbShine {
  0%   { transform: translateX(-120%); opacity: .0; }
  10%  { opacity: .35; }
  40%  { transform: translateX(120%); opacity: .0; }
  100% { transform: translateX(120%); opacity: .0; }
}

/* Barra inferior con desenfoque sutil */
.cb-footer-bottom {
  background: radial-gradient(120% 120% at 50% 0%, rgba(130,170,255,0.06), rgba(0,0,0,0));
  border-top: 1px solid rgba(160,200,255,0.08);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.12) inset;
  border-radius: 0.4rem;
  padding: 1.6rem 1rem 1.2rem;
}

/* Ajustes responsive extra para que el “wow” no estorbe en móvil */
@media (max-width: 1050px) {
  .cb-footer-col h4::after,
  .cb-footer-social-title::after { bottom: -6px; }
}
@media (max-width: 640px) {
  .cb-footer-wrap::after { top: -50%; left: -80%; }
  .cb-footer-col a:hover { transform: translateX(3px); }
  .cb-footer-bottom { border-radius: .3rem; }
}



/* --- BOTÓN DE DONACIONES --- */
.cb-donation-box {
    margin-top: 1.8rem;
    text-align: left;
}

.cb-donation-btn {
    display: inline-block;
    padding: 0.55rem 1.4rem;
    background: linear-gradient(135deg, #4f9bff 0%, #0054ff 100%);
    border: none;
    border-radius: 999px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(79, 155, 255, 0.35);
    transition: all 0.25s ease-in-out;
}

.cb-donation-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(79, 155, 255, 0.55);
}

.cb-donation-note {
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: rgba(230, 238, 255, 0.45);
}

/* Responsive ajustes para móviles */
@media (max-width: 620px) {
    .cb-donation-box {
        margin-top: 1.2rem;
        text-align: left;
    }

    .cb-donation-btn {
        width: 100%;
        text-align: center;
        font-size: 0.78rem;
    }
}







__________________________

/* ====== RESET PEQUEÑO PARA EL HEADER ====== */
.cbk-header, .cbk-header * {
  box-sizing: border-box;
}

/* ====== CONTENEDOR PRINCIPAL ====== */
.cbk-header {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.03);
  position: sticky; /* si no lo quieres fijo, quita esta línea */
  top: 0;
  z-index: 999;
}

/* ====== BARRA ====== */
.cbk-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ====== LOGO ====== */
.cbk-logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
}
.cbk-logo__img {
  display: block;
  max-height: 250px;
  height: auto;
}

/* ====== MENÚ DESKTOP ====== */
.cbk-nav {
  display: block;
}
.cbk-nav ul {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.cbk-nav a {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.cbk-nav a:hover,
.cbk-nav a:focus {
  color: #1b4fd1;
  border-color: #1b4fd1;
}
.cbk-nav a.active {
  color: #1b4fd1;
  border-color: #1b4fd1;
}

/* ====== BOTÓN HAMBURGUESA (OCULTO EN ESCRITORIO) ====== */
.cbk-menu-toggle {
  display: none;
  width: 34px;
  height: 30px;
  border: none;
  background: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  padding: 3px 0;
}
.cbk-menu-toggle span {
  display: block;
  height: 3px;
  background: #111;
  border-radius: 999px;
  transition: transform .25s ease, opacity .25s ease;
}

/* ====== BREAKPOINT ====== */
/* a partir de aquí será menú hamburguesa */
@media (max-width: 1024px) {
  .cbk-header__inner {
    max-width: 100%;
    padding: 0.6rem 1rem;
  }

  /* mostramos botón */
  .cbk-menu-toggle {
    display: flex;
  }

  /* el menú pasa a oculto y desplegable */
  .cbk-nav {
    position: absolute;
    top: 70px;          /* altura del header */
    left: 0;
    right: 0;
    background: #fff;
    display: none;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }
  .cbk-nav ul {
    flex-direction: column;
    align-items: flex-start;
  }
  .cbk-nav li {
    width: 100%;
  }
  .cbk-nav a {
    width: 100%;
    padding: .85rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,.03);
  }

  /* cuando está abierto */
  .cbk-nav.is-open {
    display: block;
  }

  /* animación del icono */
  .cbk-menu-toggle.is-open span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }
  .cbk-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }
  .cbk-menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  /* el logo no cambia, solo centramos un poco si quieres
  .cbk-logo__img { max-height: 58px; }
  */
}

/* ====== BREAKPOINT MUY PEQUEÑO (MÓVIL ESTRECHO) ====== */
@media (max-width: 480px) {
  .cbk-header__inner {
    padding: 0.55rem .8rem;
  }
  .cbk-nav a {
    font-size: .9rem;
  }
}

/* AJUSTA XYZ POR EL ITEMID REAL DE “Tecnología” */
body.itemid-XYZ .container-component,
body.itemid-XYZ main,
body.itemid-XYZ .coobook-section:first-of-type {
  /* Altura del header + respiro */
  padding-top: 5.5rem;   /* prueba 5.5–6.5rem según tu header */
  margin-top: 0 !important;
}

/* Si tu template usa un contenedor distinto para el primer bloque,
   deja este fallback también: */
body.itemid-XYZ #content,
body.itemid-XYZ .site-grid,
body.itemid-XYZ .grid-child {
  padding-top: 5.5rem;
}
/* Aplica el espacio a cualquier vista de artículo para evitar pegue al header */
body.view-article .container-component {
  padding-top: 5.5rem;
}