/*
Theme Name:   Centro Bennu Child
Theme URI:    https://centrobennu.cl
Description:  Tema hijo de Hello Elementor para Centro Bennu. Aporta las fuentes
              autoalojadas, los tokens del sistema de diseño y los estilos base.
Author:       Atelier Atenea
Author URI:   https://atelieratenea.es
Template:     hello-elementor
Version:      1.4.2
Text Domain:  centrobennu-child
*/

/* ==========================================================================
   1. FUENTES AUTOALOJADAS
   --------------------------------------------------------------------------
   Las tres familias son fuentes VARIABLES: un solo archivo cubre todo el rango
   de pesos. Por eso `font-weight` lleva un rango (p. ej. `400 700`) y no un
   valor único. No añadir archivos por peso: sería duplicar la descarga.

   Subset: solo latin. Verificado que cubre el español completo, incluidos
   ñ ü ¿ ¡ y la puntuación tipográfica del diseño (— – … « » “ ”).
   Se descartaron los subsets cyrillic, greek y vietnamese del export original.

   `font-display: swap` es obligatorio: el texto se pinta con la fuente de
   respaldo y se sustituye al cargar, en vez de dejar un hueco en blanco.
   ========================================================================== */

@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-latin-var.woff2') format('woff2');
  font-weight: 400 700;      /* eje wght del archivo variable */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-italic-latin-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/nunitosans-latin-var.woff2') format('woff2');
  font-weight: 200 1000;     /* ejes wght + opsz (6-12) */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrainsmono-latin-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. TOKENS DEL SISTEMA DE DISEÑO
   --------------------------------------------------------------------------
   Espejo exacto de `design-tokens.md`. Los nombres coinciden con los que usa
   el prototipo original (`var(--navy)`, `var(--serif)`...), de modo que
   cualquier CSS trasladado desde el JSX funciona sin traducción.

   Los mismos valores se cargan además como Colores y Fuentes Globales del Kit
   de Elementor, para que estén disponibles en el editor. Estas variables son
   la fuente de verdad para el CSS custom.
   ========================================================================== */

:root {
  /* Colores de marca */
  --navy:            #023047;
  --navy-deep:       #012233;
  --amber:           #ffb703;
  --amber-dark:      #d4960a;
  --yellow:          #ffcb47;
  --turquoise:       #5ab8c0;
  --mint:            #92d1c3;

  /* Tintes para fondos de sección */
  --tint-mint:       rgba(146, 209, 195, .15);
  --tint-yellow:     rgba(255, 203, 71, .20);
  --tint-turq:       rgba(90, 184, 192, .15);
  --tint-amber:      rgba(255, 183, 3, .14);
  --tint-navy:       rgba(2, 48, 71, .04);

  /* Texto */
  --text:            #2d2d2d;
  --text-strong:     #1a1a2e;
  --muted:           #6b7785;
  --on-dark:         #ffffff;
  --on-dark-muted:   #c0d0d8;

  /* Superficies y bordes */
  --surface:         #ffffff;
  --border:          #e6ebee;
  --border-strong:   #cdd6db;

  /* Familias tipográficas */
  /* Alto del header. Lo usan la propia barra (§4.1) y el hero de la home, que
     lo descuenta de su `100dvh` en móvil (§8, hero de la home). Un solo
     sitio que cambiar. */
  --cb-header-h: 76px;

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono:  'JetBrains Mono', Menlo, monospace;
}

/* ==========================================================================
   3. BASE
   ========================================================================== */

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--surface);
  /* El eje óptico de Nunito Sans se ajusta solo al tamaño de fuente */
  font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  color: var(--text-strong);
}

/* ==========================================================================
   4. HEADER
   --------------------------------------------------------------------------
   Estados que alterna `assets/js/header-scroll.js`. Los valores replican el
   comportamiento del prototipo (cb-router.jsx:58-83).

   El contenedor del header debe llevar la clase `cb-header`, añadida en
   Elementor en Avanzado → Clases CSS.
   ========================================================================== */

.cb-header {
  position: sticky;
  top: 0;
  z-index: 999;
  transition: transform .32s ease, background-color .32s ease, box-shadow .32s ease;
  will-change: transform;
}

/* Separado del top: fondo sólido, sombra y desenfoque */
.cb-header--solid {
  background: rgba(2, 48, 71, .97);
  box-shadow: 0 2px 24px rgba(0, 0, 0, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Oculto al bajar. -110% en vez de -100% para que la sombra no asome */
.cb-header--hidden {
  transform: translateY(-110%);
}

/* --- 4.1 Estructura interna ------------------------------------------------
   El header ocupa su sitio en el flujo y NO flota sobre el hero: así funciona
   en las cinco páginas pase lo que pase con cada hero, en vez de depender de
   que todas empiecen con un fondo oscuro. Decidido con Peter el 2026-08-20. */

.elementor-element.cb-header {
  background: var(--navy);
}

/*
 * EL CONTENEDOR DE ELEMENTOR NO ES UN `div` VACÍO (lecciones L-028).
 *
 * `.e-con` llega con `flex-direction: column`, `flex-wrap: wrap` y
 * `position: relative` puestos de fábrica. Las tres rompieron este header, y
 * cada una se descubrió por separado. Por eso aquí se declara la caja ENTERA
 * en lugar de ir tapando defectos de uno en uno: más largo de leer, mucho más
 * difícil de romper.
 *
 * `flex-wrap: nowrap` es el que arregla el móvil: con `wrap`, en cuanto el
 * logo y las acciones no caben en 390px, las acciones saltan a una segunda
 * línea y el botón de llamar se estira de lado a lado.
 */
.elementor-element.cb-header__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  max-width: 100%;
  min-height: var(--cb-header-h);
}

/*
 * EL ANCHO DE LA BARRA LO FIJA EL TEMA HIJO, NO EL KIT.
 *
 * `boxed_width` en el JSON no llega a `--content-width`: el contenedor sale
 * con el ancho de contenido del Kit, que en esta instalación sigue siendo el
 * de fábrica (la Fase 3 del todo está sin cerrar). Resultado: el fondo azul
 * ocupa toda la pantalla pero el contenido se queda encajonado y el
 * `space-between` no tiene espacio que repartir.
 *
 * Se fija aquí y se deja de depender de una clave sin verificar. El día que
 * el Content Width del Kit se ponga en 1440, esta regla dirá lo mismo.
 */
.elementor-element.cb-header > .e-con-inner,
.elementor-element.cb-footer > .e-con-inner {
  max-width: 1440px;
  width: 100%;
  margin-inline: auto;
}

/*
 * DENTRO DEL HEADER NO HAY NADA POSICIONADO SALVO LA PROPIA BARRA.
 *
 * Elementor da `position: relative` a los contenedores Y a los envoltorios de
 * widget. Por eso el panel del menú móvil (`position: absolute`) se anclaba al
 * envoltorio del widget que contiene el `<nav>` —a media barra a la derecha—
 * en vez de a la barra entera. Verificado leyendo `offsetParent` en
 * producción, no deducido.
 *
 * Se neutralizan TODOS los descendientes de golpe en lugar de irlos nombrando:
 * al hacerlo uno a uno ya se escapó justamente el envoltorio del widget.
 *
 * El selector empieza por `.elementor-element.cb-header` y no por `.cb-header`
 * a secas para llegar a (0,3,0): la regla de Elementor que hay que vencer es
 * `.elementor-element.elementor-widget` (0,2,0), y con un simple empate esto
 * dependería de qué hoja se cargue después. No debe depender.
 */
.elementor-element.cb-header .elementor-element {
  position: static;
}

.elementor-element.cb-header__logo {
  flex: 0 0 auto;
}

/*
 * EL BOTÓN MIDE LO QUE MIDE SU TEXTO.
 *
 * El `<a>` va dentro de tres bloques anidados (widget → contenedor de widget →
 * wrapper del botón), y un bloque toma el ancho de su padre. Resultado: el
 * botón se estiraba hasta llenar el hueco entre el logo y la hamburguesa y,
 * cuando ya no cabía, se salía por la izquierda y se montaba sobre el logo.
 *
 * `width: max-content` corta esa cadena de raíz en lugar de ir ajustando
 * eslabón por eslabón: el ancho lo decide el contenido y deja de depender de
 * lo que haga el padre.
 */
.elementor-element.cb-header__cta {
  flex: 0 0 auto;
  width: max-content;
}

/* 52px y no 46: el archivo de la mediateca mide 293x134 y el lockup lleva
   dentro el texto «CENTRO BENNU». Por debajo de esta altura ese texto baja de
   10px y deja de leerse. */
.elementor-element.cb-header__logo img {
  display: block;
  height: 52px;
  width: auto;
}

.elementor-element.cb-header__acciones {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  flex: 0 1 auto;
}

/* --- 4.2 Navegación --------------------------------------------------------
   Los cinco enlaces van en un solo bloque de HTML y no en cinco widgets
   sueltos: así el marcado es un `<nav>` de verdad con su `aria-label`, y los
   enlaces se editan juntos en un único sitio. */

.cb-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.cb-nav a {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--on-dark);
  text-decoration: none;
  opacity: .78;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: opacity .15s ease, border-color .15s ease;
  white-space: nowrap;
}

.cb-nav a:hover,
.cb-nav a:focus-visible { opacity: 1; }

/* Página actual. La marca `header-nav.js` comparando la ruta; si el script no
   llega a cargarse simplemente no se resalta ninguna: fallo inocuo. */
.cb-nav a[aria-current="page"] {
  opacity: 1;
  border-bottom-color: var(--yellow);
}

/* --- 4.3 Botón de hamburguesa ----------------------------------------------
   Las tres barras son pseudoelementos, no `<span>` vacíos: un elemento sin
   contenido dentro de un widget WYSIWYG no sobrevive de forma fiable
   (lecciones L-027). El botón sí lleva texto, oculto con `cb-sr-only`. */

.cb-burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--on-dark);
  flex: 0 0 auto;
}

.cb-burger::before,
.cb-burger::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 2px;
  margin-left: -12px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

/* Cerrado: `::before` dibuja las tres barras con dos sombras; `::after` no se ve */
.cb-burger::before { box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; }
.cb-burger::after  { opacity: 0; }

/* Abierto: se van las sombras y las dos barras forman la equis */
.cb-header--menu-abierto .cb-burger::before {
  box-shadow: none;
  transform: rotate(45deg);
}

.cb-header--menu-abierto .cb-burger::after {
  opacity: 1;
  transform: rotate(-45deg);
}

/* --- 4.4 Estado móvil ------------------------------------------------------
   La misma `<nav>` se recoloca como panel desplegable. No se duplica el menú:
   dos copias del mismo enlace se desincronizan en cuanto alguien edita una. */

@media (max-width: 720px) {
  /* Barra más baja en móvil. Se redefine el token, no el valor suelto: el hero
     de la home lo lee para descontarlo de su `100dvh`. */
  :root { --cb-header-h: 64px; }

  .elementor-element.cb-header__acciones { gap: 10px; }

  /* 46px, no 38: a 38 el texto «CENTRO BENNU» del lockup baja de 8px y no se
     lee. Cabe de sobra en los 64px de la barra. */
  .elementor-element.cb-header__logo img { height: 46px; }

  /* Con el logo más grande, el hueco entre logo y acciones se aprieta. */
  .elementor-element.cb-header__inner { gap: 12px; }

  .cb-burger { display: block; }

  .cb-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .22);
    padding: 8px 20px 20px;
  }

  .cb-header--menu-abierto .cb-nav { display: flex; }

  .cb-nav a {
    opacity: 1;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 16px;
    white-space: normal;
  }

  .cb-nav a:last-child { border-bottom: 0; }

  .cb-nav a[aria-current="page"] {
    color: var(--yellow);
    border-bottom-color: rgba(255, 255, 255, .12);
  }

  /* El botón de llamar NO se esconde dentro del menú: es la acción que más
     importa en un móvil y va siempre a la vista (todo.md, Fase 5).

     `white-space: nowrap` no es cosmético: sin él «Llámanos →» se parte en
     tres líneas entre el logo y la hamburguesa, el header pasa de 64 a 72px
     de alto y con ello descuadra el `calc()` del hero (§4.5).

     EL SELECTOR LLEVA `.cb-header` DELANTE A PROPÓSITO. El botón base
     (`.elementor-element.cb-btn .elementor-button`, §5) tiene la misma
     especificidad que este y se carga DESPUÉS, así que ganaría por orden y
     esta regla no haría nada. Con el ancestro sube a (0,4,0) y el orden de
     las secciones dentro del archivo deja de importar. */
  .cb-header .elementor-element.cb-header__cta,
  .cb-header .elementor-element.cb-header__cta .elementor-button {
    /*
     * EL BOTÓN DEL HEADER ES LA EXCEPCIÓN A LA REGLA MÓVIL DE LOS BOTONES.
     *
     * En móvil el proyecto pone `width: 100%` a todo `.cb-btn` (§5): un CTA
     * apilado dentro de una sección debe ocupar el ancho. Pero este vive en una
     * fila junto al logo y la hamburguesa, así que ese 100% lo estiraba hasta
     * salirse por la izquierda y montarse sobre el logo.
     *
     * Va con `.cb-header` delante para ganar por especificidad (0,4,0 y 0,3,0)
     * a la regla genérica, que se carga después y si no ganaría por orden.
     */
    width: max-content;
  }

  .cb-header .elementor-element.cb-header__cta .elementor-button {
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* ==========================================================================
   4B. FOOTER
   --------------------------------------------------------------------------
   Estructura del prototipo (`cb-shared.jsx`, componente `Footer`) con una
   diferencia deliberada: allí las columnas «Programas» y «Centro» listaban
   ocho entradas —«Metodología clínica», «Equipo», «Testimonios»…— que no
   tienen ninguna página a la que apuntar. Aquí se agrupan en una sola columna
   de navegación con las cinco páginas que existen de verdad. Un pie lleno de
   texto que parece enlace y no lo es se lee como un sitio roto.
   ========================================================================== */

.elementor-element.cb-footer {
  background: var(--navy);
}

.elementor-element.cb-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 48px;
  width: 100%;
}

.elementor-element.cb-footer__logo img {
  display: block;
  height: 80px;
  width: auto;
}

.cb-footer__claim {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--on-dark-muted);
  margin: 20px 0 0;
  max-width: 320px;
}

.cb-footer__titulo {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin: 0 0 18px;
}

.cb-footer__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.cb-footer__lista li {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--on-dark-muted);
}

.cb-footer__lista a {
  color: var(--on-dark-muted);
  text-decoration: none;
  transition: color .15s ease;
}

.cb-footer__lista a:hover,
.cb-footer__lista a:focus-visible { color: var(--yellow); }

/* --- Barra inferior -------------------------------------------------------- */

.elementor-element.cb-footer__base {
  display: flex;
  flex-direction: row;   /* `.e-con` es column por defecto — ver §4.1 */
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.cb-footer__legal,
.cb-footer__enlaces {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .55);
  margin: 0;
}

.cb-footer__enlaces a {
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  transition: color .15s ease;
}

.cb-footer__enlaces a:hover,
.cb-footer__enlaces a:focus-visible { color: var(--yellow); }

@media (max-width: 720px) {
  .elementor-element.cb-footer__cols {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .elementor-element.cb-footer__logo img { height: 64px; }

  .elementor-element.cb-footer__base {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 40px;
  }
}

/* ==========================================================================
   5. COMPONENTES
   --------------------------------------------------------------------------
   Portados de `WebCentroBennu/styles.css`. Viven aquí y no en el `custom_css`
   de cada widget de Elementor por dos razones: ese campo ha sido históricamente
   de Pro, y aquí el CSS es versionable y se edita en un solo sitio.

   Se aplican añadiendo la clase en Elementor → Avanzado → Clases CSS.
   ========================================================================== */

/* --- Botones -------------------------------------------------------------
   ATENCIÓN AL SELECTOR (ver lessons.md L-020).

   Elementor coloca las clases de `_css_classes` en el DIV ENVOLTORIO del
   widget, nunca en el elemento semántico de dentro:

     <div class="elementor-element … cb-btn cb-btn-primary elementor-widget-button">
       <div class="elementor-widget-container">
         <a class="elementor-button">…</a>

   Estilar `.cb-btn` a secas pinta el ENVOLTORIO y deja una caja de color
   alrededor del botón real, que conserva el estilo por defecto de Elementor.
   Por eso todo va al descendiente `.elementor-button`, con `.elementor-element`
   delante para ganar en especificidad (0,3,0) al CSS del Kit (`.elementor-kit-N
   .elementor-button`, 0,2,0) sin recurrir a `!important`.

   Se mantiene `a.cb-btn` en las listas para los enlaces sueltos escritos a mano
   (footer, HTML custom), que sí llevan la clase en el propio `<a>`.
   -------------------------------------------------------------------------- */

/* El envoltorio no es el botón: se neutraliza cualquier caja heredada. */
.elementor-element.cb-btn {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.elementor-element.cb-btn .elementor-button,
a.cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  /* El Kit de Elementor pone versalitas por defecto; el diseño usa caja normal */
  text-transform: none;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease, box-shadow .2s ease;
}

.elementor-element.cb-btn .elementor-button:hover,
a.cb-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.elementor-element.cb-btn .elementor-button:active,
a.cb-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.elementor-element.cb-btn-primary .elementor-button,
a.cb-btn-primary          { background-color: var(--amber); color: var(--navy); }
.elementor-element.cb-btn-primary .elementor-button:hover,
a.cb-btn-primary:hover    { background-color: var(--amber-dark); color: var(--navy); }

.elementor-element.cb-btn-secondary .elementor-button,
a.cb-btn-secondary        { background-color: var(--navy); color: #fff; }
.elementor-element.cb-btn-secondary .elementor-button:hover,
a.cb-btn-secondary:hover  { background-color: var(--navy-deep); color: #fff; }

.elementor-element.cb-btn-turquoise .elementor-button,
a.cb-btn-turquoise        { background-color: var(--turquoise); color: var(--navy); }
.elementor-element.cb-btn-turquoise .elementor-button:hover,
a.cb-btn-turquoise:hover  { background-color: #4aa4ac; color: var(--navy); }

.elementor-element.cb-btn-ghost .elementor-button,
a.cb-btn-ghost            { background-color: transparent; color: var(--navy); border: 1.5px solid var(--navy); }

.elementor-element.cb-btn-on-dark-ghost .elementor-button,
a.cb-btn-on-dark-ghost    { background-color: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .6); }
.elementor-element.cb-btn-on-dark-ghost .elementor-button:hover,
a.cb-btn-on-dark-ghost:hover { background-color: rgba(255, 255, 255, .12); color: #fff; }

.elementor-element.cb-btn-link .elementor-button,
a.cb-btn-link {
  background-color: transparent;
  color: var(--navy);
  padding: 0;
  font-weight: 600;
  border-bottom: 1.5px solid var(--amber);
  border-radius: 0;
}

/* --- Subrayado ámbar de los titulares ----------------------------------- */

.cb-amber-underline {
  display: inline-block;
  position: relative;
}

.cb-amber-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 4px;
  background: var(--amber);
  border-radius: 2px;
}

/* --- Hero de la home ---------------------------------------------------- */

/*
 * El overlay tiene TRES paradas de gradiente. El overlay nativo de Elementor
 * solo admite dos, así que se pinta aquí con un pseudoelemento.
 * El rgba(2,29,44) es un azul ad-hoc del diseño, más oscuro que --navy.
 *
 * OJO CON EL PSEUDOELEMENTO (ver lessons.md L-020). Elementor ya define
 * `.e-con::before { content: var(--background-overlay) }` para su propio
 * overlay. Sin esa variable el `content` es inválido y el pseudoelemento NO
 * se genera, y esa regla gana a `.cb-hero-home::before` (misma especificidad,
 * carga después). Se ataca por los dos lados:
 *   1. `--background-overlay: ''` — hace válida la propia regla de Elementor.
 *   2. `.elementor-element.cb-hero-home::before` (0,2,0) — gana en
 *      especificidad pase lo que pase con el orden de carga.
 */
.elementor-element.cb-hero-home {
  position: relative;
  --background-overlay: '';
}

.elementor-element.cb-hero-home::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(
    180deg,
    rgba(2, 29, 44, .55) 0%,
    rgba(2, 29, 44, .35) 40%,
    rgba(2, 29, 44, .75) 100%
  );
}

/* El contenido va por encima del overlay */
.elementor-element.cb-hero-home > .e-con-inner,
.elementor-element.cb-hero-home > .elementor-element {
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  /*
   * `min-height: 100dvh` en vez de `100vh`: en iOS Safari la barra de
   * direcciones hace que 100vh sobresalga de la pantalla.
   * El doble selector iguala la especificidad del CSS que genera Elementor,
   * para no recurrir a !important.
   */
  .elementor-element.cb-hero-home {
    /* Se descuenta el header, que está en el flujo por encima: sin restarlo,
       hero + barra suman más de una pantalla y el hero deja de llenarla
       exacta. Una sola regla, no dos compitiendo (lecciones L-029). */
    min-height: calc(100dvh - var(--cb-header-h));
  }

  /* Los <br> del H1 están pensados para una línea de 800px */
  .cb-hero-home h1 br {
    display: none;
  }
}

/* --- Fila de acciones (todo grupo de botones del sitio) ----------------- */

.elementor-element.cb-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.elementor-element.cb-actions--mt32   { margin-top: 32px; }
.elementor-element.cb-actions--mt36   { margin-top: 36px; }
.elementor-element.cb-actions--mt48   { margin-top: 48px; }
/* Empuja el botón al fondo de una tarjeta de altura variable */
.elementor-element.cb-actions--bottom { margin-top: auto; }

@media (max-width: 720px) {
  /*
   * Se apila SIEMPRE, nunca `flex-wrap`. Envolver deja un botón a un ancho y
   * el otro a otro distinto (reglas-colapso-movil.md §4).
   */
  .elementor-element.cb-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .elementor-element.cb-actions--mt48 { margin-top: 32px; }

  .elementor-element.cb-btn {
    width: 100%;
  }

  .elementor-element.cb-btn .elementor-button,
  a.cb-btn {
    width: 100%;
    /* Los CTA de texto largo refluyen a dos líneas antes que encoger la fuente */
    white-space: normal;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   6. RED DE SEGURIDAD CONTRA DESBORDAMIENTO HORIZONTAL
   --------------------------------------------------------------------------
   El diseño lleva logos decorativos anclados con offsets negativos
   (right: -120px y similares). Las reglas de colapso los clampan a 0 y
   contienen cada sección, pero esto es la red por si alguno se escapa.

   `clip`, NO `hidden`. Con `overflow-x: hidden` el elemento se convierte en
   contenedor de scroll y rompe `position: sticky` en TODOS sus descendientes
   — incluido el header de aquí arriba, y justo en móvil, que es donde el
   header que se oculta al bajar aporta más. `clip` contiene el desbordamiento
   sin crear contenedor de scroll.

   Se declara primero `hidden` como respaldo para navegadores sin soporte de
   `clip` (Safari < 16): ahí es preferible perder el sticky a tener scroll
   horizontal. Los navegadores con soporte aplican la segunda y conservan ambos.
   ========================================================================== */

@media (max-width: 720px) {
  html,
  body {
    overflow-x: hidden;
    overflow-x: clip;
  }
}

/* ==========================================================================
   7. ACCESIBILIDAD
   --------------------------------------------------------------------------
   No negociable (WCAG 2.1 AA). No eliminar.
   ========================================================================== */

/* Foco visible en todo elemento interactivo. Nunca quitar sin alternativa. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Objetivo táctil mínimo de 44x44px en móvil */
@media (max-width: 720px) {
  .elementor-element.cb-btn .elementor-button,
  a.cb-btn,
  .elementor-button,
  button,
  input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Respetar la preferencia del sistema de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * Texto solo para lectores de pantalla.
 *
 * No se usa `display: none` ni `visibility: hidden`: ambos sacan el elemento
 * del árbol de accesibilidad y entonces tampoco lo lee nadie. La técnica del
 * recorte de 1px es la que sí lo mantiene anunciable.
 */
.cb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Saltar al contenido, para navegación por teclado y lectores de pantalla */
.cb-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--navy);
  color: var(--on-dark);
  font-family: var(--sans);
  text-decoration: none;
}

.cb-skip-link:focus {
  left: 0;
}

/* ==========================================================================
   8. SISTEMA DE SECCIONES
   --------------------------------------------------------------------------
   Vocabulario compartido por las 5 páginas. Todo lo que aquí se define lo
   emite `generador/cb_elementor.py` como clase, nunca como ajuste suelto de
   Elementor. Cambiar una regla aquí cambia las 41 secciones a la vez.

   DOS REGLAS QUE NO SE PUEDEN OLVIDAR (lessons.md L-020):

   1. Las clases de Elementor caen en el DIV ENVOLTORIO del widget, no en el
      elemento semántico. Por eso todo lo que estila texto de un titular va al
      descendiente `.elementor-heading-title`, y no a la clase a secas.

   2. `.elementor-element` delante sube la especificidad a (0,2,0) o (0,3,0),
      lo justo para ganar al CSS de Elementor y del Kit sin `!important`.
      En los contenedores hace falta además para vencer a `.e-con`, que trae
      `display: var(--display)` y convertiría cualquier rejilla en flex.
   ========================================================================== */

/* --- 8.1 Fondos de sección ---------------------------------------------- */

.elementor-element.cb-bg-white  { background-color: var(--surface); }
.elementor-element.cb-bg-mint   { background-color: var(--tint-mint); }
.elementor-element.cb-bg-navy   { background-color: var(--navy); }
.elementor-element.cb-bg-yellow { background-color: var(--tint-yellow); }
.elementor-element.cb-bg-amber  { background-color: var(--amber); color: var(--navy); }

/* #fafbfb es un gris literal del prototipo: no corresponde a ningún tinte con
   nombre. Se nombra por color y no por uso porque aparece como fondo de
   sección "neutra" en tres páginas distintas. */
.elementor-element.cb-bg-offwhite { background-color: #fafbfb; }

/* Sección oscura: el texto hereda blanco; los titulares lo reciben del JSON */
.elementor-element.cb-on-dark { color: var(--on-dark); }

/* --- 8.2 Rejillas -------------------------------------------------------- */

/*
 * Todas las rejillas son contenedores `content_width: full` (sin envoltorio
 * `.e-con-inner`), así que el `display: grid` se aplica al propio contenedor.
 * El colapso móvil vive AQUÍ y en ningún otro sitio: es la traducción literal
 * de la tabla de `reglas-colapso-movil.md` §4.
 */
.elementor-element.cb-grid-2,
.elementor-element.cb-grid-3,
.elementor-element.cb-grid-4,
.elementor-element.cb-grid-5,
.elementor-element.cb-split {
  display: grid;
  width: 100%;
}

.elementor-element.cb-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.elementor-element.cb-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Gap menor en 4 y 5 columnas: son tarjetas cortas y 24px las estrangularía */
.elementor-element.cb-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.elementor-element.cb-grid-5 { grid-template-columns: repeat(5, 1fr); gap: 16px; }

/* Ratios de las rejillas de dos columnas. La lista completa del sitio: cada
   uno viene de un `grid-template-columns` literal de alguna spec. */
.elementor-element.cb-split          { gap: 56px; }
.elementor-element.cb-split--09-11   { grid-template-columns: 0.9fr 1.1fr; }
.elementor-element.cb-split--11-09   { grid-template-columns: 1.1fr 0.9fr; }
.elementor-element.cb-split--1-1     { grid-template-columns: 1fr 1fr; }
.elementor-element.cb-split--10-11   { grid-template-columns: 1fr 1.1fr; }
.elementor-element.cb-split--1-12    { grid-template-columns: 1fr 1.2fr; }
.elementor-element.cb-split--10-14   { grid-template-columns: 1fr 1.4fr; }
.elementor-element.cb-split--12-1    { grid-template-columns: 1.2fr 1fr; }
.elementor-element.cb-split--13-10   { grid-template-columns: 1.3fr 1fr; }
.elementor-element.cb-split--14-1    { grid-template-columns: 1.4fr 1fr; }
.elementor-element.cb-split--08-12   { grid-template-columns: 0.8fr 1.2fr; }
.elementor-element.cb-split--gap64   { gap: 64px; }
.elementor-element.cb-split--end     { align-items: end; }
.elementor-element.cb-split--center  { align-items: center; }
.elementor-element.cb-split--start   { align-items: start; }
.elementor-element.cb-split--stretch { align-items: stretch; }
.elementor-element.cb-split--mb56    { margin-bottom: 56px; }

/* Columna que acompaña al scroll. Se apaga al apilar (ver el @media de abajo):
   un sticky dentro de una sola columna no tiene contra qué desplazarse. */
.elementor-element.cb-sticky {
  position: sticky;
  top: 24px;
  align-self: start;
}

/* Utilidades de alineación de texto */
.elementor-element.cb-text-center { text-align: center; }
.elementor-element.cb-text-right  { text-align: right; }

/* `min-width: 0` evita que una palabra larga infle su columna y desborde */
.elementor-element.cb-split__a,
.elementor-element.cb-split__b {
  min-width: 0;
}

/* Encabezado de sección en fila: pill+H2 a la izquierda, párrafo a la derecha */
.elementor-element.cb-row-end {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  margin-bottom: 40px;
}

.elementor-element.cb-row-end--mb48 { margin-bottom: 48px; }

@media (max-width: 720px) {
  /* 2 y 3 columnas → 1. Son tarjetas con título y varias líneas de cuerpo:
     a 335px de ancho útil, dos columnas las dejarían ilegibles. */
  .elementor-element.cb-grid-3,
  .elementor-element.cb-grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* 4 y 5 columnas → 2, no 1. Son tarjetas cortas (título + una o dos líneas)
     y a ~161px por columna siguen leyéndose; forzar una sola columna solo
     alargaría la página sin ganar nada (reglas-colapso-movil.md §4). */
  .elementor-element.cb-grid-4,
  .elementor-element.cb-grid-5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Con número impar de tarjetas, la última ocupa el ancho completo en vez de
     dejar un hueco */
  .elementor-element.cb-grid-5 > *:last-child { grid-column: 1 / -1; }

  .elementor-element.cb-split {
    grid-template-columns: 1fr;
    /* El gap horizontal de escritorio se convierte en separación vertical */
    gap: 32px;
    align-items: stretch;
  }

  .elementor-element.cb-split--mb56 { margin-bottom: 32px; }

  /* En una sola columna no hay contra qué hacer sticky */
  .elementor-element.cb-sticky { position: static; }

  /* Centrado sí, alineado a la derecha no: a 335px produce un bloque
     desequilibrado contra el borde */
  .elementor-element.cb-text-right { text-align: left; }

  .elementor-element.cb-row-end {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    margin-bottom: 32px;
  }
}

/* --- 8.3 Pill (badge de sección) ---------------------------------------- */

.cb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.cb-pill--turquoise { background: rgba(90, 184, 192, .18); color: #0c5762; }
.cb-pill--amber     { background: rgba(255, 183, 3, .18);  color: #5a4002; }
.cb-pill--yellow    { background: rgba(255, 203, 71, .32); color: #7a5400; }
.cb-pill--navy      { background: rgba(2, 48, 71, .08);    color: var(--navy); }
.cb-pill--mint      { background: rgba(146, 209, 195, .28); color: #1a6b5e; }

/* --- 8.4 Kickers --------------------------------------------------------- */

/*
 * Dos sabores deliberadamente distintos (spec-home.md, componentes §9). No
 * fusionarlos: el mono etiqueta fichas y tarjetas, el sans encabeza secciones.
 */
.cb-kicker-mono {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}

.cb-kicker-mono--amber { color: var(--amber-dark); }
.cb-kicker-mono--navy  { color: var(--navy); }

.cb-kicker-sans {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mint);
  line-height: 1.4;
}

/* --- 8.5 Titulares y texto corrido --------------------------------------- */

/*
 * El tamaño de fuente lo pone Elementor por widget (verificado en el piloto:
 * el H1 sale a 76px/1,28 exactos). Aquí solo va el color, que es constante
 * por rol, para que Peter pueda retocar tamaños en el editor sin tocar CSS.
 */
.elementor-element.cb-h2 .elementor-heading-title {
  color: var(--navy);
}

.elementor-element.cb-h2--on-dark .elementor-heading-title { color: var(--on-dark); }
.elementor-element.cb-card-title .elementor-heading-title  { color: var(--navy); }
.elementor-element.cb-card-num .elementor-heading-title    { color: var(--amber-dark); }

.elementor-element.cb-lead,
.elementor-element.cb-body,
.elementor-element.cb-card-body { color: var(--text); }

.elementor-element.cb-body--justify { text-align: justify; }

/* Span en cursiva dentro de un titular (`<span class="cb-italic">`) */
.cb-italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

@media (max-width: 720px) {
  /* Justificado a 335px de ancho abre ríos de espacio entre palabras */
  .elementor-element.cb-body--justify { text-align: left; }

  /* Los <br> de los titulares están calculados para líneas de 800px */
  .elementor-element.cb-h2 .elementor-heading-title br { display: none; }
}

/* --- 8.6 Imágenes de contenido ------------------------------------------ */

.elementor-element.cb-media img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.elementor-element.cb-media--140 img { height: 140px; }
.elementor-element.cb-media--160 img { height: 160px; }
.elementor-element.cb-media--200 img { height: 200px; }
.elementor-element.cb-media--220 img { height: 220px; }
.elementor-element.cb-media--400 img { height: 400px; }
.elementor-element.cb-media--440 img { height: 440px; }
.elementor-element.cb-media--460 img { height: 460px; }
.elementor-element.cb-media--480 img { height: 480px; }

/* Variantes por proporción en vez de por altura: cuando la spec fija un
   `aspect-ratio` la caja se adapta al ancho de su columna sin recortar. */
.elementor-element.cb-media--ar43 img { height: auto; aspect-ratio: 4 / 3; }
.elementor-element.cb-media--ar45 img { height: auto; aspect-ratio: 4 / 5; }

@media (max-width: 720px) {
  /*
   * Ninguna altura fija sobrevive a 720px: una foto de 440px en una columna de
   * 335px sale recortada a un sello vertical. El contenido manda sobre la caja.
   */
  .elementor-element.cb-media img {
    height: auto;
  }
}

/* --- 8.7 Tarjeta con tinte (pilares) ------------------------------------ */

.elementor-element.cb-card-tint {
  padding: 32px 28px;
  border-radius: 6px;
  min-width: 0;
}

.elementor-element.cb-tint-mint   { background-color: var(--tint-mint); }
.elementor-element.cb-tint-yellow { background-color: var(--tint-yellow); }
.elementor-element.cb-tint-turq   { background-color: var(--tint-turq); }

/* --- 8.8 Tarjeta de programa -------------------------------------------- */

.elementor-element.cb-programcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  min-width: 0;
}

/* La foto va a sangre contra el borde de la tarjeta, que ya redondea */
.elementor-element.cb-programcard .cb-media img { border-radius: 0; }

.elementor-element.cb-programcard__body {
  padding: 32px;
  /* `flex: 1` + `cb-actions--bottom` alinean los botones de las dos tarjetas
     aunque los textos tengan alturas distintas */
  flex: 1;
}

.cb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 4px;
}

.cb-chip {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(2, 48, 71, .05);
  color: var(--navy);
  line-height: 1.4;
}

/* --- 8.9 Tarjeta de testimonio ------------------------------------------ */

.elementor-element.cb-card-quote {
  padding: 32px 28px;
  border-radius: 6px;
  /* Valor ad-hoc del diseño: NO es --tint-turq, que va al .15 (spec-home §6) */
  background-color: rgba(90, 184, 192, .10);
  min-width: 0;
}

.cb-quote-mark {
  display: block;
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--turquoise);
  margin-bottom: 4px;
}

.elementor-element.cb-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: italic;
  color: var(--navy);
}

.elementor-element.cb-quote-author { color: var(--muted); }

/* --- 8.10 Cierre narrativo ---------------------------------------------- */

.elementor-element.cb-cierre {
  position: relative;
  overflow: hidden;
  /*
   * Igual que en el hero: Elementor define `.e-con::before` con
   * `content: var(--background-overlay)`, y sin esa variable el pseudoelemento
   * no llega a generarse. Ver §5 y lessons.md L-020.
   */
  --background-overlay: '';
}

/*
 * Marca de agua decorativa. Va como pseudoelemento y no como widget de imagen
 * a propósito: el prototipo le da `alt=""` y `pointer-events: none`, así que no
 * debe existir en el árbol de accesibilidad. El archivo viaja dentro del tema,
 * no en la mediateca, porque no es contenido editable.
 */
.elementor-element.cb-cierre::before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  background: url('assets/img/logo-bennu-alas-solo.webp') center / contain no-repeat;
  opacity: .10;
  pointer-events: none;
  z-index: 0;
}

.elementor-element.cb-cierre > .e-con-inner {
  position: relative;
  z-index: 1;
}

.elementor-element.cb-cierre__inner {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}

.cb-rule-amber {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--amber);
  margin: 0 auto 32px;
}

.elementor-element.cb-frase .elementor-heading-title {
  color: var(--navy);
  text-wrap: balance;
}

@media (max-width: 720px) {
  /*
   * 240px, por debajo del límite general de 280px de los decorativos.
   * Excepción 2 de `reglas-colapso-movil.md`: esta marca está CENTRADA detrás
   * de la frase, no anclada a una esquina; a 280px competiría con el texto en
   * una caja de solo 335px útiles.
   */
  .elementor-element.cb-cierre::before {
    width: 240px;
    height: 240px;
  }
}

/* --- 8.11 Hueco de formulario --------------------------------------------
   LOS FORMULARIOS NO SE CONSTRUYEN AQUÍ. Los monta Peter con un plugin
   (todo.md, Fase 6). Esta caja marca dónde va y con qué altura aproximada,
   para poder juzgar la composición de la página sin él.

   Es deliberadamente un hueco rotulado y NO una maqueta con cajas que
   parezcan campos: en un centro sanitario, quien intenta escribir en un input
   falso se va sin contactar, y un lector de pantalla que anuncia etiquetas sin
   campo asociado incumple WCAG 2.1 (1.3.1 y 4.1.2).

   Dos usos: el formulario de Contacto y el de derivación B2B de Jóvenes.
   -------------------------------------------------------------------------- */

.elementor-element.cb-form-slot {
  padding: 40px;
  background: var(--surface);
  border: 2px dashed var(--border-strong);
  border-radius: 6px;
  min-height: 640px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

/* Sobre sección navy se invierte, para no abrir un rectángulo blanco */
.elementor-element.cb-form-slot--on-dark {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .28);
  min-height: 520px;
}

.cb-form-slot__msg {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.6;
  max-width: 360px;
  margin: 0 auto;
}

.cb-form-slot--on-dark .cb-form-slot__msg { color: rgba(255, 255, 255, .7); }

@media (max-width: 720px) {
  .elementor-element.cb-form-slot {
    padding: 24px 20px;
    min-height: 480px;
  }

  .elementor-element.cb-form-slot--on-dark { min-height: 400px; }
}

/* --- 8.12 Colapso de tarjetas en móvil ---------------------------------- */

@media (max-width: 720px) {
  .elementor-element.cb-card-tint,
  .elementor-element.cb-card-quote,
  .elementor-element.cb-programcard__body {
    padding: 24px 20px;
  }
}

/* === INICIO DEL BLOQUE FUSIONADO (generado por fusiona_css.py) === */

/* ==========================================================================
   9. COMPONENTES DE QUIÉNES SOMOS
   --------------------------------------------------------------------------
   Solo lo que existe unicamente en esta pagina. Lo reutilizable vive en la
   seccion 8. Fuente: `generador/css-pendiente-somos.css`.
   ========================================================================== */

/* --- S.1 Hero de página con isologo decorativo --------------------------
   La home tiene una FOTO de fondo (`cb-hero-home`); el hero de Quiénes Somos
   no lleva foto, lleva fondo navy liso y un isologo grande semitransparente
   anclado a la esquina superior derecha (spec-somos.md sección 1). Es un
   patrón distinto al de la home, así que necesita su propio nombre — no es
   una variante de `cb-hero-home` porque esa clase ya trae su propio
   `::before` de degradado (lessons.md L-020) que aquí no aplica.
   -------------------------------------------------------------------------- */

.elementor-element.cb-hero-somos {
  position: relative;
  overflow: hidden;
  background-color: var(--navy);
}

/* El isologo es un widget de imagen real (no pseudoelemento) porque en el
   prototipo también lo es (`<img>` suelto, no decorativo puro vía CSS) y así
   Peter puede sustituirlo desde la mediateca sin tocar código. */

.elementor-element.cb-hero-somos-isologo {
  position: absolute;
  right: -130px;
  top: -60px;
  width: 520px;
  height: 520px;
  pointer-events: none;
  z-index: 0;
}

.elementor-element.cb-hero-somos-isologo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .09;
}

/* El contenido de texto va por encima del isologo */

.elementor-element.cb-hero-somos > .e-con-inner,
.elementor-element.cb-hero-somos > .elementor-element {
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  /* Tamaño + offset clampado a 0, regla de "Fondos absolutos" de
     reglas-colapso-movil.md §4: máx. 280px de lado, sin desplazamiento
     negativo que reintroduzca overflow horizontal. */
  .elementor-element.cb-hero-somos-isologo {
    width: 220px;
    height: 220px;
    right: 0;
    top: 0;
  }
}

/* --- S.2 Rejilla de 2 columnas, ratios y alineación que faltaban --------
   `cb-split` ya define `--09-11` (0.9/1.1) y `--11-09` (1.1/0.9) en el tema
   hijo. La sección Origen (spec-somos.md §2) pide `1fr 1.1fr` exacto —
   columna de imagen sin encoger, columna de texto algo más ancha — que no es
   ninguna de las dos proporciones existentes. `cb-split--start` cubre el
   `alignItems: start` de la sección "El nombre Bennu" (spec §3), que no
   coincide con `--center` ni `--end`, ya definidos.
   -------------------------------------------------------------------------- */

/* --- S.3 Columna con imagen "sticky" -------------------------------------
   Efecto "sticky sidebar" de la sección Origen (spec-somos.md §2): la
   columna de imagen queda fija mientras se hace scroll por la columna de
   texto, más alta. Se apaga en móvil porque ahí las columnas se apilan (no
   hay recorrido de scroll paralelo que fijar) — regla de
   reglas-colapso-movil.md §4, fila "sticky → static al apilar".
   -------------------------------------------------------------------------- */

/* --- S.4 Rejillas de 4 y 5 columnas ---------------------------------------
   `cb_elementor.py` / style.css solo definen `cb-grid-2` y `cb-grid-3`. Esta
   página necesita además 4 columnas (Equipo clínico por área, spec §7.2) y 5
   columnas (Valores, spec §5) — ambas ya previstas en la tabla de
   reglas-colapso-movil.md §4 ("Grid de 4 columnas" → 2 columnas móvil, "Grid
   de 5 columnas" → 2 columnas móvil con la última a ancho completo si el
   total es impar). Se generalizan aquí porque son patrones de rejilla, no
   ganchos de una sola sección: cualquier página futura con 4 o 5 tarjetas
   puede reutilizarlos sin duplicar la regla.
   -------------------------------------------------------------------------- */

/* --- S.5 Fondos de sección que faltaban ------------------------------------
   `style.css` §8.1 solo define blanco, mint y navy. Se añaden los dos que
   faltan para esta página: `cb-bg-offwhite` (`#fafbfb`, tarjeta Misión y
   fondo de Valores — ver nota de coordinación al inicio del archivo) y
   `cb-bg-yellow` (`--tint-yellow`, Responsabilidad social), siguiendo el
   mismo patrón de nombre que `cb-bg-mint`.
   -------------------------------------------------------------------------- */

/* Franja de Valores: única sección de esta página con borde horizontal
   superior e inferior (spec-somos.md §5), en vez de fondo o tinte a bloque. */

.elementor-element.cb-band-border {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* --- S.6 Utilidades de columna (gap y margen entre bloques apilados) -----
   Micro-utilidades para los `flex_direction: column` que no forman parte de
   ninguna rejilla (párrafos sueltos de Origen, encabezados de Trayectoria y
   Equipo). Nombradas por valor, como el resto del vocabulario de espaciado
   (`cb-actions--mt32/36/48`), para no crear una clase de un solo uso por
   sección.
   -------------------------------------------------------------------------- */

.elementor-element.cb-col-gap10 { display: flex; flex-direction: column; gap: 10px; }

.elementor-element.cb-col-gap24 { display: flex; flex-direction: column; gap: 24px; }

.elementor-element.cb-col-mb48  { margin-bottom: 48px; }

.elementor-element.cb-col-mb56  { margin-bottom: 56px; }

.elementor-element.cb-col-mb96  { margin-bottom: 96px; }

@media (max-width: 720px) {
  .elementor-element.cb-col-mb48,
  .elementor-element.cb-col-mb56,
  .elementor-element.cb-col-mb96 {
    margin-bottom: 32px;
  }
}

/* Alinea a la derecha el párrafo del encabezado de Valores (spec §5, único
   caso de `textAlign: right` en un encabezado de sección de esta página). */

/* Fila de botones apilados verticalmente ya en escritorio (Cierre CTA,
   spec-somos.md §9: "dos botones apilados" con `flexDirection: column`,
   a diferencia de `cb-actions`, que en escritorio es una fila). En móvil
   ambas convergen en el mismo resultado, así que solo cambia el estado de
   escritorio. */

.elementor-element.cb-actions--col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.elementor-element.cb-actions--col .elementor-element.cb-btn .elementor-button,
.elementor-element.cb-actions--col a.cb-btn {
  width: 100%;
  justify-content: space-between;
}

/* --- S.7 Aspect ratio 4/5 de imagen ----------------------------------------
   `cb-media` ya define `--200/--440/--460` (alturas fijas en px). La imagen
   de "El nombre Bennu" (spec §3) usa en cambio `aspectRatio: 4/5` porque es
   una columna vertical estrecha junto a un bloque de texto largo, no una
   franja horizontal — una altura fija en px no serviría porque la columna
   cambia de ancho según el ratio del split. Ya nace responsive porque
   `aspect-ratio` no necesita la regla de "height: auto" en móvil que sí
   necesitan las variantes `--200/--440/--460`.
   -------------------------------------------------------------------------- */

/* --- S.8 Tarjeta de Misión / Visión ---------------------------------------
   `cb-card-tint` (home, pilares) ya resuelve "tarjeta con fondo de tinte",
   pero con otra composición interna (número + h3 26px + párrafo 15.5px) y
   otro padding (32px 28px). La tarjeta de Misión/Visión (spec-somos.md §4)
   es más grande y solemne: `padding: 48px 44px`, kicker mono + título serif
   28px + un único párrafo largo, sin número. Reutilizar `cb-card-tint`
   habría forzado ese padding y esa tipografía dentro de una clase pensada
   para otra cosa, así que es una tarjeta nueva y no una variante.
   -------------------------------------------------------------------------- */

.elementor-element.cb-card-mv {
  padding: 48px 44px;
  border-radius: 6px;
  min-width: 0;
}

.elementor-element.cb-card-mv--mision {
  background-color: #fafbfb;
  border: 1px solid var(--border);
}

.elementor-element.cb-card-mv--vision {
  background-color: var(--tint-turq);
}

.elementor-element.cb-card-mv-kicker--mision .elementor-heading-title { color: var(--amber-dark); }

.elementor-element.cb-card-mv-kicker--vision .elementor-heading-title { color: #0c5762; }

.elementor-element.cb-card-mv-title .elementor-heading-title { color: var(--navy); }

@media (max-width: 720px) {
  .elementor-element.cb-card-mv {
    padding: 28px 22px;
  }
}

/* --- S.9 Tarjeta de valor --------------------------------------------------
   5 repeticiones (spec-somos.md §5): número mono ámbar + h4 serif 22px +
   párrafo sans 13.5px, `min-height: 200px` en escritorio. El suelo de altura
   fija es justo lo que `reglas-colapso-movil.md` prohíbe conservar en móvil
   ("ninguna dimensión fija sobrevive a 720px"): se libera a `auto` para que
   las tarjetas de 2 columnas no arrastren un hueco vacío bajo textos cortos.
   -------------------------------------------------------------------------- */

.elementor-element.cb-card-value {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 22px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  min-height: 200px;
  min-width: 0;
}

.elementor-element.cb-card-value-num .elementor-heading-title { color: var(--amber); }

.elementor-element.cb-card-value-title .elementor-heading-title { color: var(--navy); }

@media (max-width: 720px) {
  .elementor-element.cb-card-value {
    min-height: 0;
    padding: 24px 20px;
  }
}

/* --- S.10 Timeline vertical (Trayectoria) ----------------------------------
   Componente nuevo: línea vertical continua (`border-left` ámbar) con un
   punto por hito, calcada de spec-somos.md §6. Es el mismo patrón que
   `reglas-colapso-movil.md` cita como precedente para el timeline horizontal
   de Jóvenes (Excepción 4) — aquí es donde se define por primera vez.

   `cb-timeline-wrap` va en la SECCIÓN (contiene el `overflow:hidden` que
   necesita la foto flotante absoluta); `cb-timeline-wrap-inner` es el
   contenedor interno que pone en fila el bloque de texto y la foto, y
   `cb-timeline-content` es la columna de texto con el `max-width: 62%` que
   convive con esa foto.
   -------------------------------------------------------------------------- */

.elementor-element.cb-timeline-wrap {
  position: relative;
  overflow: hidden;
}

.elementor-element.cb-timeline-wrap-inner {
  position: relative;
  display: flex;
  /* `.e-con` de Elementor es `column` por defecto: la fila hay que pedirla */
  flex-direction: row;
  width: 100%;
}

.elementor-element.cb-timeline-content {
  position: relative;
  max-width: 62%;
}

.elementor-element.cb-timeline {
  position: relative;
  border-left: 2px solid var(--amber);
  padding-left: 32px;
  width: 100%;
}

.elementor-element.cb-timeline-item {
  position: relative;
  padding-left: 28px;
  padding-bottom: 36px;
}

.elementor-element.cb-timeline-item:last-child {
  padding-bottom: 0;
}

/* Punto del hito: círculo ámbar con borde blanco, "clavado" en la línea */

.cb-timeline-dot {
  position: absolute;
  left: -41px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--amber);
  border: 4px solid var(--surface);
  box-shadow: 0 0 0 1px var(--amber);
}

.elementor-element.cb-timeline-year .elementor-heading-title { color: var(--amber-dark); }

.elementor-element.cb-timeline-title .elementor-heading-title { color: var(--navy); }

/* --- S.11 Foto flotante recortada del timeline -----------------------------
   Imagen "cutout" absoluta al 38% de ancho (spec-somos.md §6). Se oculta por
   completo en móvil: Excepción 3 de reglas-colapso-movil.md — no hay hueco
   lateral que ocupar en 1 columna sin solaparse con los hitos, y forzarla
   arriba/abajo del texto rompe la composición para la que fue recortada.
   -------------------------------------------------------------------------- */

.elementor-element.cb-timeline-photo {
  position: absolute;
  right: 0;
  top: 80px;
  bottom: 80px;
  width: 38%;
  pointer-events: none;
  background-image: radial-gradient(ellipse at center, rgba(146, 209, 195, .22) 0%, transparent 65%);
}

.elementor-element.cb-timeline-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 720px) {
  .elementor-element.cb-timeline-photo {
    display: none;
  }
  .elementor-element.cb-timeline-content {
    max-width: 100%;
  }
  .elementor-element.cb-timeline-wrap-inner {
    flex-direction: column;
  }
}

/* --- S.12 Rejilla de retratos del equipo (`.cb-equipo-grid`) --------------
   HALLAZGO: `spec-somos.md` (§7.1) y `reglas-colapso-movil.md` (Excepción 1)
   documentan esta clase como "ya resuelta en styles.css", pero un grep del
   tema hijo real (`tema-hijo/centrobennu-child/style.css`) no la encuentra:
   no existe. La spec describe el comportamiento pretendido, no el estado
   real del CSS entregado. Se define aquí, exactamente con los valores que
   ambos documentos ya acuerdan, para no inventar un tercer criterio.
   -------------------------------------------------------------------------- */

.elementor-element.cb-equipo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: 100%;
}

.elementor-element.cb-equipo-item {
  aspect-ratio: 4 / 3;
}

.elementor-element.cb-equipo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

@media (max-width: 720px) {
  .elementor-element.cb-equipo-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
    padding-right: 84px;
    gap: 14px;
  }
  .elementor-element.cb-equipo-item {
    flex: 0 0 68vw;
    scroll-snap-align: start;
  }
}

/* --- S.13 Tarjeta de equipo clínico por área -------------------------------
   4 repeticiones (spec-somos.md §7.2): h4 serif 18px + párrafo sans 13.5px,
   fondo `--tint-mint`. Distinta de `cb-card-value` (fondo blanco con borde,
   sin tinte) y de `cb-card-tint` (que trae número y otra tipografía), así
   que no reutiliza ninguna de las dos.
   -------------------------------------------------------------------------- */

.elementor-element.cb-card-area {
  padding: 24px 22px;
  background-color: var(--tint-mint);
  border-radius: 4px;
  min-width: 0;
}

.elementor-element.cb-card-area-title .elementor-heading-title { color: var(--navy); }

/* --- S.14 Tarjeta de Responsabilidad Social --------------------------------
   Grid interno de 2 columnas (imagen 1fr / texto 1.2fr) dentro de cada una
   de las 4 tarjetas de una rejilla externa también de 2 columnas (spec-somos
   §8). Doble nivel de "grid de 2 columnas" que la tabla de colapso resuelve
   aplicando la misma regla dos veces: la externa ya la cubre `cb-grid-2`;
   la interna (imagen/texto) es nueva porque su ratio (1/1.2) y su colapso a
   imagen-arriba-texto-abajo con `aspect-ratio` no coincide con `cb-split`.
   -------------------------------------------------------------------------- */

.elementor-element.cb-card-rs {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: stretch;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  min-width: 0;
}

.elementor-element.cb-card-rs-media {
  position: relative;
  min-height: 180px;
}

.elementor-element.cb-card-rs-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.elementor-element.cb-card-rs-body {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.elementor-element.cb-card-rs-kicker .elementor-heading-title { color: var(--amber-dark); }

.elementor-element.cb-card-rs-title .elementor-heading-title { color: var(--navy); }

@media (max-width: 720px) {
  .elementor-element.cb-card-rs {
    grid-template-columns: 1fr;
  }
  .elementor-element.cb-card-rs-media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .elementor-element.cb-card-rs-body {
    padding: 20px;
  }
}

/* --- S.15 Nota: párrafo de ancho fijo de Responsabilidad Social -----------
   El párrafo derecho de esa sección usa `width: 600px` FIJO (no `max-width`)
   en el prototipo — caso crítico marcado explícitamente en
   reglas-colapso-movil.md §3 como el único punto del sitio con overflow
   horizontal garantizado si no se corrige. Se emite ya en el JSON con
   `_element_width_mobile: initial` + `100%` (helper `parrafo(ancho=...)` de
   `cb_elementor.py`, igual que en el resto del sitio), así que no hace falta
   CSS adicional: se deja constancia para que quien audite sepa que este
   riesgo concreto de la spec está cerrado por los ajustes de Elementor, no
   por una regla de este archivo.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   10. COMPONENTES DE PROGRAMA ADULTOS
   --------------------------------------------------------------------------
   Solo lo que existe unicamente en esta pagina. Lo reutilizable vive en la
   seccion 8. Fuente: `generador/css-pendiente-adultos.css`.
   ========================================================================== */

/* --- A. Fondo de seccion que falta ---------------------------------------
   Mismo patron que .cb-bg-white/.cb-bg-mint/.cb-bg-navy (style.css 8.1),
   variante amarilla que ninguna pagina anterior necesito. */

/* --- B. Hero de Adultos ---------------------------------------------------
   A diferencia del hero de home (foto de fondo + degradado), este hero es
   fondo navy solido con un logo decorativo semitransparente en la esquina.
   Por eso NO reutiliza `.cb-hero-home`: no hay overlay de imagen que pintar,
   solo hay que fijar posicion relativa para anclar el decorativo. */

.elementor-element.cb-hero-adultos {
  position: relative;
  overflow: hidden;
}

.elementor-element.cb-hero-adultos > .e-con-inner,
.elementor-element.cb-hero-adultos > .elementor-element {
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  /* Igual que el hero de home: min-height, no height, y sin los <br> */
  .elementor-element.cb-hero-adultos {
    min-height: 0;
  }
  .cb-hero-adultos h1 br {
    display: none;
  }
}

/* --- C. Fondo decorativo de esquina (logo semitransparente) --------------
   Patron que se repite 3 veces en esta pagina (hero, metodologia, CTA
   final) con distinto archivo/tamaño/posicion/opacidad, y que la spec
   marca explicitamente como candidato a componente compartido entre
   secciones oscuras de cualquier pagina (spec-adultos.md, "Componentes
   repetidos" #8). Se resuelve como un widget de imagen posicionado en
   absoluto dentro de la seccion (que ya lleva `position: relative`).

   Decorativo puro (alt=""): se saca del arbol de tabulacion por si acaso,
   aunque al no ser interactivo no lo necesita estrictamente. */

.elementor-element.cb-hero-decor {
  position: absolute !important;
  pointer-events: none;
  z-index: 0;
}

.elementor-element.cb-hero-decor img {
  display: block;
  object-fit: contain;
}

/* Hero: 620x620, opacity .14, right:-100px; top:-60px */

.elementor-element.cb-hero-decor--hero {
  right: -100px;
  top: -60px;
  width: 620px;
  height: 620px;
  opacity: .14;
}

/* Metodologia: 480x480, opacity .05, right:-120px; top:-80px */

.elementor-element.cb-hero-decor--md {
  right: -120px;
  top: -80px;
  width: 480px;
  height: 480px;
  opacity: .05;
}

/* CTA final: 520x520, opacity .05, right:-120px; top:-40px */

.elementor-element.cb-hero-decor--cta {
  right: -120px;
  top: -40px;
  width: 520px;
  height: 520px;
  opacity: .05;
}

@media (max-width: 720px) {
  /*
   * Regla general de decorativos (reglas-colapso-movil.md 4): maximo 280px,
   * offsets negativos clampados a 0. Las tres variantes convergen al mismo
   * tamaño/posicion en movil porque a 280px con esquina en (0,0) la
   * diferencia entre 480/520/620px de origen deja de ser perceptible y no
   * hay razon de diseño para no unificarlas.
   */
  .elementor-element.cb-hero-decor--hero,
  .elementor-element.cb-hero-decor--md,
  .elementor-element.cb-hero-decor--cta {
    right: 0;
    top: 0;
    width: 280px;
    height: 280px;
  }
}

/* --- D. Ratios de split que faltan + alineacion "start" -------------------
   style.css ya define cb-split--09-11, --11-09, --1-1, --gap64, --end,
   --center, --mb56. Faltan el ratio 1.2fr/1fr (sede, CTA final) y el 0.8/1.2
   (FAQ), y el modificador de alineacion "start" (arriba, en vez de stretch o
   center) que las secciones 2, 6 y 8 necesitan explicitamente. */

/* --- E. Encabezado de seccion (Pill + H2 + parrafo, en columna) -----------
   Patron de las secciones 3 (dentro de cb-row-end), 4 y 5: bloque de
   ancho maximo con separacion inferior antes de la rejilla que sigue. Ya
   existe el ancho maximo (`width`/`width_mobile` va en el JSON, seccion 3
   de reglas-colapso-movil.md), asi que esta clase solo pone el margen. */

.elementor-element.cb-section-head--mb48 { margin-bottom: 48px; }

.elementor-element.cb-section-head--mb56 { margin-bottom: 56px; }

@media (max-width: 720px) {
  .elementor-element.cb-section-head--mb48,
  .elementor-element.cb-section-head--mb56 {
    margin-bottom: 32px;
  }
}

/* --- F. Columna sticky (FAQ) -----------------------------------------------
   Unico uso de sticky de esta pagina (spec-adultos.md seccion 8). Se
   desactiva al apilar en movil (reglas-colapso-movil.md 4, fila "Layout de
   dos columnas con imagen sticky"). */

/* --- G. Tarjeta de criterio sin imagen (seccion 2) -------------------------
   Mismo espiritu que `.cb-card-tint` (style.css 8.7) pero con padding y
   border-radius propios: el JSX de esta tarjeta usa 22px/24px y 6px, no los
   32px/28px de la tarjeta de pilares de home. Se separa en vez de reusar
   `.cb-card-tint` para no arrastrar su padding a esta pagina ni forzar un
   parametro nuevo en una clase que ya esta en produccion en Home. El fondo
   de tinte lo sigue aportando `.cb-tint-mint`, que ya existe. */

.elementor-element.cb-card-crit {
  padding: 22px 24px;
  border-radius: 6px;
  min-width: 0;
}

@media (max-width: 720px) {
  .elementor-element.cb-card-crit {
    padding: 18px 20px;
  }
}

/* --- H. Tarjeta de marco teorico, sobre fondo oscuro (seccion 3) ----------
   Variante de tarjeta con fondo translucido sobre navy: no existe nada
   parecido en el vocabulario actual (las tarjetas de Home son todas sobre
   fondo claro). `.cb-card-title`/`.cb-card-body` de style.css fijan color
   navy/text, incompatibles con esta seccion oscura — de ahi los sufijos
   "-dark" en vez de reusarlas. */

.elementor-element.cb-card-marco {
  padding: 24px 20px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.elementor-element.cb-card-title-dark .elementor-heading-title { color: #ffffff; }

.elementor-element.cb-card-body-dark { color: rgba(255, 255, 255, .72); }

/* Grid de 5 columnas (metodologia): no existe en el vocabulario de Home,
   que solo llega a 3. Colapso: 2 columnas, ultima a ancho completo si el
   total es impar (reglas-colapso-movil.md 4, fila "Grid de 5 columnas"). */

@media (max-width: 720px) {
  /* 5 tarjetas en 2 columnas: la quinta (ultima, impar) ocupa el ancho
     completo para no dejar una celda huerfana a media anchura. */
  .elementor-element.cb-card-marco {
    padding: 20px 18px;
  }
}

/* --- I. Fila de fase numerada (seccion 4) ----------------------------------
   Componente nuevo: no hay nada parecido en el vocabulario existente. Grid
   de 4 columnas con dos anchos fijos y dos fraccionarios
   (80px 1fr 220px 2fr), alineado con la fila de la tabla de
   reglas-colapso-movil.md 4 ("Fila de fase / paso con columnas de ancho
   fijo mezcladas con fr"). Candidato explicito a reutilizar en Jovenes,
   segun avisa la propia spec de Adultos. */

.elementor-element.cb-fases-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.elementor-element.cb-fase-row {
  display: grid;
  grid-template-columns: 80px 1fr 220px 2fr;
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  border-top: 1px solid var(--border);
}

/* La primera fila no lleva borde superior (ya lo aporta el contenedor) */

.elementor-element.cb-fase-row:first-child {
  border-top: none;
}

/* Fondo alterno: par = blanco, impar = #fafbfb (spec-adultos.md seccion 4) */

.elementor-element.cb-fase-row:nth-child(odd) {
  background: #ffffff;
}

.elementor-element.cb-fase-row:nth-child(even) {
  background: #fafbfb;
}

.elementor-element.cb-fase-num .elementor-heading-title {
  color: var(--amber-dark);
}

.elementor-element.cb-fase-titulo .elementor-heading-title {
  color: var(--navy);
}

.cb-fase-duracion {
  color: var(--muted);
  letter-spacing: .04em;
}

.elementor-element.cb-fase-body { color: var(--text); }

@media (max-width: 720px) {
  /*
   * 1 columna apilada: numeral en su propia fila (reducido a 28px, ver
   * reglas-colapso-movil.md seccion 2), titulo, duracion como chip mono
   * debajo, descripcion. gap:6px entre bloques.
   */
  .elementor-element.cb-fase-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 20px;
  }
}

/* --- J. Lista de bullets con marcador circular (seccion 7) -----------------
   No existe una lista con marcador custom en el vocabulario actual (las
   listas previas del sitio son de FAQ o de nav). Reglas tomadas literalmente
   del JSX: circulo de 6px en amber, alineado a la base del texto. */

.cb-bullet-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cb-bullet-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
}

.cb-bullet-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--amber);
  border-radius: 50%;
  margin-top: 2px;
  flex: 0 0 auto;
}

/* --- K. Recuadro "Direccion" (seccion 6) -----------------------------------
   Caja de dato unico (etiqueta mono + valor serif) sobre fondo gris muy
   claro. No hay nada parecido: las tarjetas existentes son siempre de tinte
   de color o blancas con borde, nunca con este fondo #fafbfb especifico. */

.elementor-element.cb-direccion-box {
  margin-top: 28px;
  padding: 20px 22px;
  background: #fafbfb;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.elementor-element.cb-direccion-valor .elementor-heading-title {
  color: var(--navy);
}

/* --- L. Acordeon FAQ con <details>/<summary> nativo (seccion 8) -----------
   Componente nuevo. Deliberadamente NO usa `.faq-item`/`.faq-question` de
   `cb-proto.css`: esa version tiene JS propio y rota el icono a "x" al
   abrir; esta pagina especifica <details> nativo del navegador, sin esa
   mejora (signo "+" estatico) — ver spec-adultos.md seccion 8. Mismo aviso
   que las filas de fase: candidato a reutilizar en Jovenes/Contacto si
   tienen un FAQ equivalente. */

.cb-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.cb-faq-item {
  border-top: 1px solid var(--border);
}

.cb-faq-item:first-child {
  border-top: none;
}

/* Fondo alterno: impar (1,3,5 -> segundo, cuarto, sexto) = #fafbfb */

.cb-faq-item:nth-child(even) {
  background: #fafbfb;
}

.cb-faq-item:nth-child(odd) {
  background: #ffffff;
}

.cb-faq-question {
  padding: 22px 28px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* Oculta el triangulo por defecto del navegador en Chrome/Safari */

.cb-faq-question::-webkit-details-marker {
  display: none;
}

.cb-faq-question:hover {
  background: #fafbfb;
}

.cb-faq-plus {
  color: var(--amber-dark);
  font-size: 22px;
  font-weight: 400;
  font-family: var(--sans);
  flex: 0 0 auto;
}

.cb-faq-answer {
  padding: 0 28px 22px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  line-height: 1.65;
}

@media (max-width: 720px) {
  .cb-faq-question {
    padding: 18px 20px;
    font-size: 17px;
  }
  .cb-faq-answer {
    padding: 0 20px 18px;
  }
}

/* --- M. Modificadores de imagen que faltan en .cb-media -------------------
   style.css ya define la base `.cb-media` (width:100%, object-fit:cover,
   border-radius:6px, height:auto en movil) y los modificadores --200/--440/
   --460. Faltan los tamaños que usa esta pagina y una variante de
   aspect-ratio para las fotos pequeñas de la sede (4:3 fijo, no una altura
   en px). */

/* --- N. Bloque de botones + nota del CTA final -----------------------------
   El CTA final de Adultos apila los dos botones en columna incluso en
   escritorio (a diferencia del CTA de Home, que los pone en fila) y añade
   una nota de texto pequeña debajo. `.cb-actions` no sirve tal cual: esa
   clase es una FILA horizontal que solo se apila a 720px. Aqui hace falta
   columna desde el principio. */

.elementor-element.cb-cta-botones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.cb-cta-nota {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  margin-top: 6px;
  text-align: center;
}

/* Los dos botones de este CTA llevan texto largo con flecha final y
   `justify-content: space-between` en escritorio (ver spec-adultos.md
   seccion 9). En movil siguen la regla general de "boton con texto largo"
   de reglas-colapso-movil.md 4: refluyen a dos lineas, la flecha se pega al
   texto en vez de quedar sola contra el borde derecho. */

.elementor-element.cb-cta-botones .elementor-element.cb-btn .elementor-button {
  width: 100%;
  justify-content: space-between;
  padding: 18px 24px;
  font-size: 16px;
}

@media (max-width: 720px) {
  .elementor-element.cb-cta-botones .elementor-element.cb-btn .elementor-button {
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    font-size: 15px;
    white-space: normal;
    text-align: left;
  }
}

/* ==========================================================================
   11. COMPONENTES DE PROGRAMA JÓVENES
   --------------------------------------------------------------------------
   Solo lo que existe unicamente en esta pagina. Lo reutilizable vive en la
   seccion 8. Fuente: `generador/css-pendiente-jovenes.css`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RATIOS DE SPLIT NUEVOS
   --------------------------------------------------------------------------
   `.cb-split` y su colapso móvil ya existen (style.css §8.2). Solo faltan
   los ratios propios de esta página: 1.4fr/1fr (hero) y 1fr/1.2fr (CTA
   contacto B2B). Se declaran junto a los ratios existentes (09-11, 11-09,
   1-1) por coherencia de vocabulario, no como reglas aisladas.
   -------------------------------------------------------------------------- */

/* Modificadores de alineación que faltaban en el vocabulario de split */

/* Rejilla de 4 columnas ("para quién"), sigue el mismo patrón que
   cb-grid-2/cb-grid-3 de style.css §8.2 */

/* --------------------------------------------------------------------------
   2. HERO TÉCNICO (`cb-hero-jovenes`)
   --------------------------------------------------------------------------
   Mismo mecanismo que `.cb-hero-home` (style.css §5, pseudoelemento porque
   Elementor solo admite 2 paradas de gradiente nativo), con un degradado
   propio de 3 paradas y un tono de azul distinto de --navy (más oscuro, sin
   token — valor RGB literal según spec-jovenes.md).
   -------------------------------------------------------------------------- */

.elementor-element.cb-hero-jovenes {
  position: relative;
  --background-overlay: '';
}

.elementor-element.cb-hero-jovenes::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(
    180deg,
    rgba(2, 29, 44, .85) 0%,
    rgba(2, 29, 44, .75) 60%,
    rgba(2, 29, 44, .95) 100%
  );
}

.elementor-element.cb-hero-jovenes > .e-con-inner,
.elementor-element.cb-hero-jovenes > .elementor-element {
  position: relative;
  z-index: 1;
}

/* Columna derecha de la ficha: `align-self: end` en escritorio (spec) */

.elementor-element.cb-hero-ficha-col {
  align-self: end;
  min-width: 0;
}

/* Eyebrow / kicker con línea decorativa + texto, ambos en un span de HTML
   crudo (no hay widget de "línea + texto" en el vocabulario existente) */

.cb-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.cb-hero-eyebrow-line {
  display: inline-block;
  width: 36px;
  height: 2px;
  background: var(--amber);
}

.cb-hero-eyebrow-text {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
}

/* Ficha técnica B2B (tarjeta + lista de definición 110px/1fr) */

.elementor-element.cb-ficha-card {
  padding: 24px 26px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 4px;
  min-width: 0;
}

.cb-ficha {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.cb-ficha__fila {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: baseline;
}

.cb-ficha__fila:not(:first-child) {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 12px;
}

.cb-ficha__clave {
  font-family: var(--sans);
  font-size: 11.5px;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cb-ficha__valor {
  font-family: var(--sans);
  font-size: 14.5px;
  color: #fff;
  font-weight: 500;
}

@media (max-width: 720px) {
  /*
   * Excepción de orden (reglas-colapso-movil.md §4, fila "Grid de 2
   * columnas"): en el hero de Jóvenes el DOM ya trae el texto antes que la
   * ficha, así que apilar sin más ya da el orden correcto — no hace falta
   * `order`.
   */
  .elementor-element.cb-hero-ficha-col {
    align-self: stretch;
  }
  /* Lista de definición con columna >=80px -> 1 columna apilada
     (reglas-colapso-movil.md §4) */
  .cb-ficha__fila {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* --------------------------------------------------------------------------
   3. BANDA DIFERENCIADORA (`cb-banda`)
   --------------------------------------------------------------------------
   Fondo ámbar de sección ya se resuelve con `.cb-bg-amber` (nueva, sigue el
   patrón de `.cb-bg-white/.cb-bg-mint/.cb-bg-navy` de style.css §8.1).
   -------------------------------------------------------------------------- */

.elementor-element.cb-banda {
  display: flex;
  /* `.e-con` de Elementor es `column` por defecto: la fila hay que pedirla */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
}

.cb-banda__texto {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cb-banda__kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cb-banda__linea {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
}

@media (max-width: 720px) {
  /* Fila con botón -> columna, mismo criterio que cb-actions (style.css §5) */
  .elementor-element.cb-banda {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
}

/* --------------------------------------------------------------------------
   4. TARJETA NUMERADA TEXTO-ONLY (dos variantes: clara / oscura)
   --------------------------------------------------------------------------
   Patrón repetido en las secciones 3 (Marco metodológico, fondo claro) y 4
   (Para quién, fondo oscuro). Mismo esqueleto que las tarjetas de pilares de
   Home (`cb-card-tint`), pero sin tinte de color: número mono + h4 serif +
   párrafo sans. Se documentan como componente único con dos modificadores,
   no como dos clases sin relación, para que el coordinador no las trate
   como cosas distintas al fusionar CSS.
   -------------------------------------------------------------------------- */

.elementor-element.cb-card-num-lt {
  padding: 22px 22px;
  background: #fafbfb;
  border: 1px solid var(--border);
  border-radius: 4px;
  min-width: 0;
}

.cb-card-num-lt__num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--amber-dark);
  font-weight: 600;
}

.elementor-element.cb-card-num-lt__title .elementor-heading-title { color: var(--navy); }

.elementor-element.cb-card-num-lt__body { color: var(--text); }

.elementor-element.cb-card-num-dk {
  padding: 24px 22px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.cb-card-num-dk__num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--amber);
  font-weight: 600;
}

.elementor-element.cb-card-num-dk__title .elementor-heading-title { color: #fff; }

.elementor-element.cb-card-num-dk__body { color: rgba(255, 255, 255, .72); }

@media (max-width: 720px) {
  .elementor-element.cb-card-num-lt,
  .elementor-element.cb-card-num-dk {
    padding: 20px 18px;
  }
}

/* --------------------------------------------------------------------------
   5. MARCO METODOLÓGICO — nota destacada + sticky
   -------------------------------------------------------------------------- */

.cb-nota-navy {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--tint-navy);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
}

.cb-nota-navy strong { color: var(--navy); }

/* Columna izquierda pegajosa en escritorio (spec: sticky, top 24px) */

.elementor-element.cb-metodologia-col {
  position: sticky;
  top: 24px;
  align-self: start;
  min-width: 0;
}

@media (max-width: 720px) {
  /* Sticky solo tiene sentido con columna al lado; al apilar se desactiva
     (reglas-colapso-movil.md §4, fila "layout con imagen sticky") */
  .elementor-element.cb-metodologia-col {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   6. PARA QUIÉN ESTÁ PENSADO — fondo con foto + overlay navy
   --------------------------------------------------------------------------
   Mismo mecanismo de imagen de fondo + overlay que el hero, pero un
   degradado propio de 2 paradas (0.6 a 0.78): SÍ cabe en el overlay nativo
   de Elementor, pero se mantiene el patrón de pseudoelemento por coherencia
   con el resto de fondos con foto de la página y para no depender de que
   Elementor properties genere el overlay del mismo modo entre navegadores.
   -------------------------------------------------------------------------- */

.elementor-element.cb-para-quien {
  position: relative;
  overflow: hidden;
  --background-overlay: '';
}

.elementor-element.cb-para-quien::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(
    180deg,
    rgba(2, 48, 71, .6) 0%,
    rgba(2, 48, 71, .78) 100%
  );
}

.elementor-element.cb-para-quien > .e-con-inner,
.elementor-element.cb-para-quien > .elementor-element {
  position: relative;
  z-index: 1;
}

.cb-para-quien__header {
  max-width: 880px;
}

/* Variante ámbar del kicker sans (style.css §8.4 solo define el tono mint) */

.cb-kicker-sans--amber { color: var(--amber); }

@media (max-width: 720px) {
  .elementor-element.cb-para-quien {
    overflow-x: hidden;
    overflow-x: clip;
  }
}

/* --------------------------------------------------------------------------
   7. TIMELINE HORIZONTAL DE 4 PASOS (Excepción 4)
   --------------------------------------------------------------------------
   Colapsa a 1 columna con línea vertical continua — mismo patrón que el
   timeline vertical de Quiénes Somos (borde izquierdo ámbar + dot/círculo
   alineado a la izquierda), no un componente inventado aparte. En
   escritorio, la línea horizontal común se pinta con `::before` sobre el
   propio grid, pasando por detrás de los círculos (z-index).
   -------------------------------------------------------------------------- */

.elementor-element.cb-timeline-h {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  width: 100%;
}

.elementor-element.cb-timeline-h::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--amber);
  opacity: .4;
}

.elementor-element.cb-timeline-h__paso {
  padding: 0 16px;
  position: relative;
  min-width: 0;
}

.cb-timeline-h__circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--navy);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  margin: 0 auto 22px;
  position: relative;
  z-index: 1;
  border: 6px solid #fff;
}

.elementor-element.cb-timeline-h__title .elementor-heading-title {
  color: var(--navy);
  text-align: center;
}

.elementor-element.cb-timeline-h__body {
  color: var(--text);
  text-align: center;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 720px) {
  /*
   * Excepción 4 de reglas-colapso-movil.md: no es un grid de tarjetas
   * intercambiables, es una secuencia — 1 columna siempre, nunca 2. La línea
   * horizontal por porcentaje (pensada para 4 columnas) se sustituye por una
   * línea vertical continua, tomando el mismo patrón que el timeline de
   * Quiénes Somos (`border-left` + dot alineado a la izquierda).
   */
  .elementor-element.cb-timeline-h {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 32px;
    border-left: 2px solid var(--amber);
  }
  .elementor-element.cb-timeline-h::before {
    content: none;
  }
  .elementor-element.cb-timeline-h__paso {
    padding: 0 0 32px 28px;
    text-align: left;
  }
  .elementor-element.cb-timeline-h__paso:last-child {
    padding-bottom: 0;
  }
  .cb-timeline-h__circulo {
    position: absolute;
    left: -60px;
    top: -4px;
    width: 48px;
    height: 48px;
    font-size: 18px;
    margin: 0;
    border-width: 4px;
  }
  .elementor-element.cb-timeline-h__title .elementor-heading-title,
  .elementor-element.cb-timeline-h__body {
    text-align: left;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* --------------------------------------------------------------------------
   8. CONFIANZA — métricas + panel turquesa
   -------------------------------------------------------------------------- */

.elementor-element.cb-confianza-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: center;
  min-width: 0;
}

/* Reutiliza cb-grid-3 para el layout; cb-metricas solo ajusta el gap propio
   de la spec (20px, no los 24px por defecto de cb-grid-3) */

.elementor-element.cb-metricas { gap: 20px; }

.elementor-element.cb-metrica {
  border-left: 2px solid var(--amber);
  padding-left: 14px;
  min-width: 0;
}

.cb-metrica__num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 30px;
  color: var(--navy);
  line-height: 1;
}

.cb-metrica__label {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: .02em;
  line-height: 1.4;
}

.elementor-element.cb-panel-turq {
  padding: 48px 44px;
  background: var(--turquoise);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.cb-panel-turq__kicker {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 18px;
  font-weight: 700;
}

.cb-panel-turq__lista {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cb-panel-turq__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: baseline;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  color: var(--navy);
  line-height: 1.4;
}

.cb-panel-turq__item:not(:first-child) {
  border-top: 1px solid rgba(2, 48, 71, .18);
  padding-top: 18px;
}

.cb-panel-turq__num {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  opacity: .7;
}

@media (max-width: 720px) {
  .elementor-element.cb-metricas {
    gap: 12px;
  }
  /* 19px de lead baja a 17px (escala tipográfica §2) */
  .cb-panel-turq__item {
    font-size: 17px;
  }
  .elementor-element.cb-panel-turq {
    padding: 32px 20px;
  }
  /* Marcador estrecho (28px), conserva su columna fija (regla del umbral
     de 80px en reglas-colapso-movil.md §4) */
}

/* --------------------------------------------------------------------------
   9. ALTURAS DE IMAGEN NUEVAS — 140px (tratamiento) y 220px (confianza)
   --------------------------------------------------------------------------
   Siguen el mismo patrón de modificador que cb-media--200/440/460
   (style.css §8.6); el colapso a `height: auto` en móvil ya es una regla
   general de `.cb-media img` y no necesita repetirse aquí.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   10. TARJETA INSTITUCIONAL SIMPLE (organismos, sección 8)
   -------------------------------------------------------------------------- */

.elementor-element.cb-card-simple {
  padding: 22px 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  min-width: 0;
}

.elementor-element.cb-card-simple__title .elementor-heading-title { color: var(--navy); }

.elementor-element.cb-card-simple__body { color: var(--text); }

@media (max-width: 720px) {
  .elementor-element.cb-card-simple {
    padding: 20px 18px;
  }
}

/* --------------------------------------------------------------------------
   11. CTA CONTACTO B2B — canal directo, marca de agua, formulario maqueta
   -------------------------------------------------------------------------- */

.elementor-element.cb-cta-jovenes {
  position: relative;
  overflow: hidden;
}

/*
 * Logo decorativo anclado a la esquina superior derecha, con offset
 * negativo — mismo patrón que la marca de agua del cierre de Home, pero
 * anclada (no centrada) y sin pseudoelemento porque no compite con texto
 * centrado encima: se pinta como imagen de fondo del propio contenedor.
 */

.elementor-element.cb-cta-jovenes::after {
  content: '';
  position: absolute;
  right: -120px;
  top: -40px;
  width: 520px;
  height: 520px;
  background: url('assets/img/logo-bennu-alas-solo.webp') center / contain no-repeat;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}

.elementor-element.cb-cta-jovenes > .e-con-inner,
.elementor-element.cb-cta-jovenes > .elementor-element {
  position: relative;
  z-index: 1;
}

/* Variante on-dark del pill amarillo (style.css §8.3 no define esta combinación) */

.cb-pill--on-dark.cb-pill--yellow {
  background: rgba(255, 255, 255, .14);
  color: var(--yellow);
}

.elementor-element.cb-canal-directo {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cb-kicker-mono--mint { color: var(--mint); }

.cb-canal-directo__datos {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: #fff;
}

/* Botón de ancho completo del formulario (envío) */

.elementor-element.cb-actions--mt24 { margin-top: 24px; }

@media (max-width: 720px) {
  /* Decorativo con offset negativo: clamp a 0 + tamaño máx 280px
     (reglas-colapso-movil.md §4, fila "Fondos absolutos") */
  .elementor-element.cb-cta-jovenes::after {
    right: 0;
    top: 0;
    width: 280px;
    height: 280px;
  }
}

/* ==========================================================================
   12. COMPONENTES DE CONTACTO
   --------------------------------------------------------------------------
   Solo lo que existe unicamente en esta pagina. Lo reutilizable vive en la
   seccion 8. Fuente: `generador/css-pendiente-contacto.css`.
   ========================================================================== */

/* --- 8.12 Fondo adicional ------------------------------------------------- */

/* #fafbfb es un gris literal del prototipo, no coincide con ningún tinte con
   nombre existente (ver spec-contacto.md sección 5). Nombre por color y no por
   uso porque el mismo valor aparece en varias páginas como fondo de sección
   "neutra", no específico de Ubicación. */

/* --- 8.13 Ratios de rejilla adicionales (`cb-split--*`) ------------------- */

/* --- 8.14 Utilidad de centrado --------------------------------------------
   Único uso hasta ahora: cabecera del selector de público. Utilidad genérica
   y no un modificador de un componente, para que cualquier otra página la
   reutilice sin heredar nada más. */

/* --- 8.15 Hero de Contacto -------------------------------------------------
   A diferencia del hero de Home, este NO lleva foto de fondo (spec-contacto.md
   sección 2: `background: var(--navy)`, sin `background-image`). El único
   elemento decorativo es el logo de alas a opacidad muy baja, anclado a la
   esquina superior derecha con offset negativo — incluido como pseudoelemento,
   igual criterio que `.cb-cierre::before` (L-020: es puramente ambiental,
   `alt=""` en el prototipo, no debe entrar en el árbol de accesibilidad). */

.elementor-element.cb-hero-contacto {
  position: relative;
  overflow: hidden;
}

.elementor-element.cb-hero-contacto::before {
  content: '';
  display: block;
  position: absolute;
  right: -120px;
  top: -40px;
  width: 520px;
  height: 520px;
  background: url('assets/img/logo-bennu-alas-solo.webp') center / contain no-repeat;
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}

.elementor-element.cb-hero-contacto > .e-con-inner,
.elementor-element.cb-hero-contacto > .elementor-element {
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  /* Regla general de decorativos (reglas-colapso-movil.md §4): máx. 280px de
     lado y offsets negativos clampados a 0. La sección ya lleva overflow
     hidden propio, así que no depende solo de la red global `overflow-x:clip`. */
  .elementor-element.cb-hero-contacto::before {
    width: 280px;
    height: 280px;
    right: 0;
    top: 0;
  }
}

/* --- 8.16 Tarjeta de contacto rápido (hero) — `ContactBlock` --------------
   Tres bloques apilados con filete superior. Patrón local a esta página: no
   se ve en ninguna otra spec, así que no se generaliza. */

.elementor-element.cb-contact-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.elementor-element.cb-contact-block {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 16px;
}

.elementor-element.cb-contact-block__big .elementor-heading-title { color: #fff; }

.elementor-element.cb-contact-block__sub { color: rgba(255, 255, 255, .6); }

/* --- 8.17 Selector de público — `SelectorCard` -----------------------------
   Dos tarjetas que eligen a qué público pertenece quien escribe y con ello
   qué panel de contexto y qué formulario se muestran más abajo.

   REPARTO DE RESPONSABILIDADES

   El marcado que genera `gen_contacto.py` ya trae el estado por defecto
   escrito (familia activa, bloque de organismos con `cb-is-hidden`). Sin
   JavaScript la página se queda exactamente ahí, y ese estado es válido: se
   ve el formulario de familias, que es el público mayoritario.

   `assets/js/contacto-selector.js` no hace más que alternar esas mismas
   clases al hacer clic — no escribe estilos, no inyecta contenido. Por eso
   todo el aspecto de los dos estados vive aquí y se puede juzgar sin ejecutar
   el script.

   Los roles ARIA (`radiogroup` / `radio`, `aria-checked`, tabindex móvil) los
   pone el JS, no la plantilla: una clave de atributo sin verificar contra el
   export real se descartaría en silencio (lecciones L-021), y además un
   `role="radio"` sin teclado detrás es peor que no ponerlo. */

.elementor-element.cb-selector-header {
  margin-bottom: 36px;
}

/*
 * Oculta uno de los dos estados. Va con `.elementor-element` delante para
 * empatar en especificidad con `.elementor-element.cb-split { display: grid }`
 * (§8.2) y ganarle por orden: esta regla se carga después. Sin ese prefijo el
 * `display: grid` del split gana y el bloque oculto se vería igualmente.
 */

.elementor-element.cb-is-hidden {
  display: none;
}

.elementor-element.cb-selector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

.elementor-element.cb-selector-card {
  padding: 32px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  min-width: 0;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.elementor-element.cb-selector-card--active {
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(2, 48, 71, .10);
}

.elementor-element.cb-selector-card--inactive {
  background: #fafbfb;
  border: 2px solid var(--border);
}

/* La tarjeta entera es el control, así que tiene que responder al puntero
   antes de pulsarla. Solo la inactiva: la activa no lleva a ninguna parte. */

.elementor-element.cb-selector-card--inactive:hover {
  border-color: var(--border-strong);
  background: var(--surface);
}

/* El texto de dentro es parte del control, no texto para copiar. */

.elementor-element.cb-selector-card * {
  cursor: pointer;
}

.elementor-element.cb-selector-card--amber.cb-selector-card--active {
  border: 2px solid var(--amber);
}

.elementor-element.cb-selector-card--navy.cb-selector-card--active {
  border: 2px solid var(--navy);
}

.cb-selector-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* El kicker mono ya trae su color (`var(--muted)`); la tarjeta activa lo
   sobrescribe al color de acento correspondiente. */

.cb-selector-card--amber.cb-selector-card--active .cb-selector-card__top .cb-kicker-mono {
  color: var(--amber-dark);
}

.cb-selector-card--navy.cb-selector-card--active .cb-selector-card__top .cb-kicker-mono {
  color: var(--navy);
}

/*
 * El círculo del radio, como PSEUDOELEMENTO y no como `<span>` vacío.
 *
 * Antes era `<span class="cb-selector-card__radio"></span>` dentro del HTML del
 * widget. El de la tarjeta de organismos desapareció entre el JSON y el HTML
 * que sirve el servidor —no lo borró el navegador ni el JS— y la tarjeta se
 * quedó sin ningún indicador de que era seleccionable.
 *
 * No se ha averiguado qué lo borró: 13 spans vacíos idénticos en las otras
 * páginas sobrevivieron, así que no es una regla general de WordPress. Lo que
 * sí es general es la fragilidad: un elemento vacío, sin texto ni semántica,
 * dentro del contenido de un editor WYSIWYG, es exactamente lo que cualquier
 * saneador se siente autorizado a tirar — y basta con que alguien abra ese
 * widget en el editor para perderlo.
 *
 * Un pseudoelemento no se puede borrar: no está en el contenido. Y de paso el
 * JS ya no tiene que tocarlo, porque deriva de las clases de la tarjeta.
 *
 * El punto interior sale de una sombra interna en vez de un segundo
 * pseudoelemento: 22px − 2×2px de borde − 2×5px de sombra = 8px de punto.
 */

.cb-selector-card__top::after {
  content: '';
  display: block;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
}

.cb-selector-card--amber.cb-selector-card--active .cb-selector-card__top::after {
  border-color: var(--amber);
  background: var(--navy);
  box-shadow: inset 0 0 0 5px var(--amber);
}

.cb-selector-card--navy.cb-selector-card--active .cb-selector-card__top::after {
  border-color: var(--navy);
  background: #fff;
  box-shadow: inset 0 0 0 5px var(--navy);
}

@media (max-width: 720px) {
  /* Grid de 2 columnas → 1 columna (reglas-colapso-movil.md §4) */
  .elementor-element.cb-selector-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .elementor-element.cb-selector-card {
    padding: 24px 20px;
  }
}

/* --- 8.18 Panel de contexto del formulario ---------------------------------
   Fondo de tinte (amarillo en el estado 'familia' construido) + caja de
   respuesta rápida. `position: sticky` se resuelve como el resto de columnas
   de 2 vía la regla general `cb-split` (→ `static` en móvil). */

.elementor-element.cb-context-panel {
  padding: 36px 32px;
  border-radius: 6px;
  min-width: 0;
  position: sticky;
  top: 24px;
}

.elementor-element.cb-context-panel--familia { background: var(--tint-yellow); }

.elementor-element.cb-context-panel--organismo { background: var(--tint-navy); }

.cb-context-answer {
  margin-top: 24px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .6);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
}

.cb-context-answer strong { color: var(--navy); }

@media (max-width: 720px) {
  /* Grid de 2 columnas → 1: el sticky se desactiva (regla general) */
  .elementor-element.cb-context-panel {
    position: static;
    padding: 24px 20px;
  }
}

/* --- 8.19 Hueco del formulario (`cb-form-slot`) ----------------------------
   EL FORMULARIO NO SE CONSTRUYE (todo.md Fase 6). Esta clase es el contenedor
   vacío que marca dónde va: mismo `padding`, `border` y `border-radius` que
   tendría el panel de formulario real (spec-contacto.md 4.2), con una altura
   mínima aproximada a la del formulario de 6 campos (`FormFamilia`) más el pie
   de confidencialidad, para que la composición de la página se pueda juzgar
   sin el formulario real. */

/* --- 8.20 Fila de dato — `InfoRow` (componente reutilizable) ---------------
   NOTA PARA EL COORDINADOR: la ficha técnica del hero de Jóvenes usa el mismo
   patrón con columna fija de 110px en vez de 180px (spec-jóvenes, ficha
   técnica). Mismo comportamiento de colapso (reglas-colapso-movil.md §4, fila
   "Lista de definición..."). Se deja aquí con el ancho de columna como único
   parámetro variable (`--cb-info-row-label-w`) para que, al fusionar los CSS
   de las 4 páginas, sea una sola regla con dos usos en vez de dos reglas
   casi idénticas. Contacto define 180px; Jóvenes deberá definir 110px sobre
   la misma clase base o una variante `cb-info-row--tight`. */

.elementor-element.cb-info-row-list {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}

.elementor-element.cb-info-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  align-items: start;
  min-width: 0;
}

.cb-info-row__label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-top: 2px;
}

@media (max-width: 720px) {
  /* Columna fija ≥80px → apilado, etiqueta arriba y valor debajo (regla
     "Lista de definición" de reglas-colapso-movil.md §4). */
  .elementor-element.cb-info-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* --- 8.21 Sección Ubicación y hueco del mapa ------------------------------- */

.elementor-element.cb-ubicacion {
  border-top: 1px solid var(--border);
}

/* Placeholder del mapa: no hay iframe real en el prototipo, es un
   `<image-slot>` rotulado (spec-contacto.md sección 5). Mismo tratamiento
   visual que `cb-form-slot` — caja marcada, sin contenido inventado. */

.elementor-element.cb-map-slot {
  height: 520px;
  border-radius: 6px;
  background: #fafbfb;
  border: 2px dashed var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
  padding: 24px;
}

.cb-map-slot__msg {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.6;
  max-width: 320px;
  margin: 0;
}

@media (max-width: 720px) {
  /* Imagen/caja con altura fija en px → aspect-ratio, sin altura fija
     (reglas-colapso-movil.md §4, fila "Imagen con altura fija", caso
     explícito del mapa de contacto: 520px → aspect-ratio 4/3). */
  .elementor-element.cb-map-slot {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}