/*
Theme Name: Bachillerato por Madurez Child
Template: twentytwentyfive
Version: 1.0.1
Description: Child theme de Bachillerato por Madurez sobre TT5 — tokens de marca, contenedor 1200px, sidebar.
Author: Equipo Web (Hermes)
Requires at least: 6.7
Requires PHP: 8.0
Text Domain: bxm-child
*/

/*
   TOKENS DE MARCA (espejo de theme.json — para CSS custom)
   Azul de marca #0078BF · Azul oscuro #192335 · CTA #ffde00
*/
:root {
	/* Los presets de theme.json son la fuente. El hex queda como fallback por si el
	   preset no estuviera disponible: asi el color nunca se pierde. */

	/* ⚠️ El ORDEN importa con mi-cuenta.css: ese archivo depende de `bxm-child` (este),
	   asi que se carga DESPUES y sus definiciones ganarian. Por eso sus duplicados se
	   quitaron: este bloque es la UNICA fuente. Medido 17-sep-2026. */
	--bxm-blue: var(--wp--preset--color--primary, #0078BF);
	--bxm-dark: var(--wp--preset--color--secondary, #192335);
	--bxm-yellow: var(--wp--preset--color--cta, #ffde00);

	/* ⚠️ SIN preset equivalente: en la paleta `contrast` es #192335, NO #334155.
	   Migrarlo a `contrast` oscurecia el texto sin avisar. Se queda en hex. */
	--bxm-text: #334155;

	--bxm-muted: var(--wp--preset--color--muted, #64748B);
	--bxm-border: var(--wp--preset--color--border, #E2E8F0);
	--bxm-bg: var(--wp--preset--color--light, #F5F7FA);

	/* Altura del header sticky. Si cambia el header, se cambia AQUÍ y el CTA lo sigue.
	   OJO: un `@media` de movil la baja a 56px, asi que este bloque tiene que seguir
	   ARRIBA de ese media (ver la nota de las dos variables de abajo). */
	--bxm-header-h: 88px;

	/* RITMO VERTICAL DE LAS DOS COLUMNAS DE CONTACTO: un solo valor para el aire entre las
	   tarjetas de la derecha y el que separa el texto del formulario en la izquierda; tienen
	   que coincidir para que las dos columnas rimen. Sale de los 19,2px que ya ponia el
	   `blockGap` mas 50px pedidos.
	   CONSOLIDADO 18-sep-2026: estas dos vivian en un SEGUNDO bloque `:root` mas abajo. Se
	   fusionaron ACA, no alla, porque entre los dos hay un `@media` que baja
	   `--bxm-header-h` a 56px: llevando este bloque abajo, los 88px de aca le ganaban al
	   media y el header de movil volvia a 88 (medido). Este es su lugar, no un descuido. */
	--bxm-gap-tarjetas: 69px;
	--bxm-gap-tarjetas-movil: 44px;

	/* EL BLOQUE DE ACCESO DEL HEADER, medido (18-sep-2026).
	   Con la sesión CERRADA el header lleva el widget de acceso (los campos + los dos botones) y
	   ocupa 457px; con la sesión ABIERTA lo reemplaza un botón «MI CUENTA» de 98,5px. El
	   `space-between` de la fila reparte el sobrante según el ancho OCUPADO, así que si el botón
	   ocupa menos, el hueco con el ☰ se agranda y el header se corre al iniciar sesión (medido:
	   145,98px contra 26,48px). Por eso el botón lleva como margen izquierdo la DIFERENCIA.
	   Los dos números van acá, con nombre, y la resta se hace en `calc()`: NO se escribe el
	   resultado a mano. Si cambia el ancho del widget o del botón, se cambia el token que
	   corresponda y la compensación sigue sola. (Ninguno de los dos lleva tipografía fluida, así
	   que son constantes de 1271 a 1920.) */
	--bxm-acceso-ancho: 457px;
	--bxm-cuenta-ancho: 98.5px;
}

/*
   SIDEBAR — BXM no lo usaba en Astra; en TT5 sí se implementa.
   Se define aquí el aspecto base; el contenido va en parts/sidebar.html
*/
/* CONSOLIDADO 18-sep-2026: `.bxm-sidebar` tenia CUATRO reglas repartidas por la hoja
   (aca el `padding: 1.5rem 0` original, y tres mas abajo). Ahora es una sola, en el
   bloque del reparto de columnas: alli gano `padding: 0`, que es el que mandaba. */

.bxm-sidebar .wp-block-heading {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--bxm-dark);
	margin-bottom: .75rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--bxm-yellow);
}

.bxm-sidebar ul {
	list-style: none;
	padding-left: 0;
}

.bxm-sidebar li {
	padding: .4rem 0;
	border-bottom: 1px solid var(--bxm-border);
	font-size: .93rem;
}

.bxm-sidebar li:last-child {
	border-bottom: none;
}

.bxm-sidebar a {
	color: var(--bxm-blue);
	text-decoration: none;
}

.bxm-sidebar a:hover {
	text-decoration: underline;
}

/*
   BXM — HEADER (replica del mockup oficial /mockup/)
   Fuente: Elementor 11536 (header de producción)
   Tokens:  fondo #192335 · menu Poppins 0.72em/500 · hover #FDEB00
*/

.bxm-header {
	background-color: #192335;
	z-index: 100;
}

.bxm-header-inner {
  display: flex;
  flex-wrap: nowrap;            /* una sola linea, siempre */
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1600px;
  margin: 0 auto;
  /* El padding vertical vive ACÁ, no en el `style=""` del bloque: antes venía en línea
     desde el HTML y por eso el CSS de móvil no podía bajarlo (un estilo en línea pisa la
     hoja). Con el logo de 60px da la barra de 88px de escritorio. */
  padding-top: 14px;
  padding-bottom: 14px;
  /* Padding lateral: 3.5% (mas ajustado que el 6% del diseno original, para que el header
     quepa en UNA linea con logo + nav + login). CONSOLIDADO 18-sep-2026: vivia en una
     SEGUNDA regla `.bxm-header-inner` mas abajo. Se fusiono ACA, no alla, porque entre las
     dos hay `@media` que cambian `flex-wrap`: la fusionada de abajo los pisaba y el header
     dejaba de envolver en pantallas medianas (medido). */
  padding-left: 3.5%;
  padding-right: 3.5%;
}

/* Logo --- */
.bxm-header .bxm-logo,
.bxm-header .custom-logo-link { flex: 0 0 auto; display: flex; align-items: center; }
.bxm-header .custom-logo { width: 141px; height: auto; display: block; }

/* Menu de navegacion --- */
.bxm-header .bxm-nav { flex: 0 1 auto; }
.bxm-header .bxm-nav .wp-block-navigation__container { flex-wrap: nowrap; gap: 0; }

/* ⚠️ EL MENÚ EN LÍNEA Y EL PANEL DEL ☰ YA NO COMPARTEN REGLA (21-oct-2026).
   Estaban juntos en un solo bloque, y el `white-space: nowrap` que necesita la barra
   horizontal (una barra de navegación no debe partir en dos líneas) llegaba también
   al panel, que es una COLUMNA de 320px con 255px útiles.
   MEDIDO a 1366x900 con el menú de 12 entradas y tres niveles: la lista pedía 347px,
   el `overflow:auto` del panel recortaba el sobrante y los textos se leían cortados
   («anes» por «Exámenes», «ducación Media Básica» por «Educación Media Básica»).
   Ahora cada menú tiene su regla: el en línea conserva el `nowrap` y el panel parte
   línea. Los valores son los mismos en los dos; lo único que cambia es el `nowrap`. */
.bxm-header .bxm-nav .wp-block-navigation-item__content {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.72em;            /* igual que el mockup: 11.52px */
  font-weight: 500;
  color: #FFFFFF;
  fill: #FFFFFF;
  padding: 8px 12px;            /* AJUSTE: 20px -> 12px para que no haga 2a linea */
  white-space: nowrap;
  line-height: 1.4;
  transition: color .2s ease;
}
.bxm-header .bxm-nav-panel .wp-block-navigation-item__content {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.72em;
  font-weight: 500;
  color: #FFFFFF;
  fill: #FFFFFF;
  padding: 8px 12px;
  white-space: normal;          /* el panel SÍ parte línea: es una columna estrecha */
  overflow-wrap: break-word;
  line-height: 1.4;
  transition: color .2s ease;
}
.bxm-header .bxm-nav .wp-block-navigation-item__content:hover,
.bxm-header .bxm-nav .wp-block-navigation-item__content:focus {
  color: #FDEB00;
}
.bxm-header .bxm-nav .current-menu-item > .wp-block-navigation-item__content,
.bxm-header .bxm-nav .wp-block-navigation-item__content[aria-current="page"] {
  color: #FDEB00;
}

/* Submenus desplegables del menu en linea (>=1270px) ---
   ⚠️ MEDIDO: el submenu del core trae `background-color:#fff` y borde
   `1px rgba(0,0,0,.15)`, pero sus items heredan el BLANCO de la regla de arriba
   (`.bxm-header .bxm-nav .wp-block-navigation-item__content`). Texto blanco sobre
   fondo blanco: las 6 materias de cada ano eran INVISIBLES, solo se veia el recuadro.
   Se les da el mismo lenguaje visual que el panel hamburguesa (pedido del dueno,
   19-oct-2026): fondo #192335, texto blanco, separadores 1px rgba(255,255,255,.16)
   y acento #FDEB00 en hover y en la materia actual.
   Va acotado a `.bxm-nav` (menu en linea de escritorio): los submenus del panel
   movil viven en `.bxm-nav-panel` y quedan intactos. Especificidad (0,4,0), gana a
   la regla de color (0,3,0) sin `!important`. */
.bxm-header .bxm-nav .wp-block-navigation__submenu-container {
  background-color: #192335;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
  padding: 4px 0;
  /* 304px: el nombre mas largo («Educacion Ciudadana de Septimo Año») pide 296px con el
     padding de 16px por lado; medido con scrollWidth. Con 264 el texto se cortaba. */
  min-width: 304px;
  z-index: 30;
}

.bxm-header .bxm-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.bxm-header .bxm-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
  border-bottom: 0;
}

/* ⚠️ El hijo se escribe completo (`> .wp-block-navigation-item > .…__content`)
   porque el core trae `.wp-block-navigation__submenu-container > .wp-block-navigation-item >
   .wp-block-navigation-item__content{padding:.5em 1em}`, que es (0,4,0) — la MISMA
   especificidad que un selector abreviado — y ganaba por orden de carga: medido 7.2px 14.4px
   (0.5em/1em) en vez de los 10px 16px de acá. Con el camino completo queda (0,5,0) y gana. */
.bxm-header .bxm-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  color: #FFFFFF;
  padding: 10px 16px;
  transition: color .2s ease, background-color .2s ease;
}

.bxm-header .bxm-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.bxm-header .bxm-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus {
  color: #FDEB00;
  background-color: rgba(255, 255, 255, 0.06);
}

.bxm-header .bxm-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
.bxm-header .bxm-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"] {
  color: #FDEB00;
}

/* Boton hamburguesa del menu (movil) ---
   ⚠️ MEDIDO EN VIVO: el icono salia en rgb(25,35,53) = #192335, EXACTAMENTE el mismo
   color que el fondo del header (#192335) -> INVISIBLE. El menu existia y abria bien,
   pero no habia forma de verlo: por eso el header parecia no tener menu en movil.
   CAUSA: los enlaces de navegacion (.wp-block-navigation-item__content) SI llevan
   `color/fill: #FFFFFF`, pero el boton que los ABRE no estaba en esa regla y heredaba
   el color de texto por defecto del tema (#192335).
   Ademas medía 24x24: por debajo del minimo tactil recomendado (44x44). */
.bxm-header .wp-block-navigation__responsive-container-open,
.bxm-header .wp-block-navigation__responsive-container-close {
  color: #FFFFFF;
  fill: #FFFFFF;
  width: 44px;
  height: 44px;
  padding: 10px;                /* 24 del icono + 10 por lado = 44 de area tactil */
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.bxm-header .wp-block-navigation__responsive-container-open svg,
.bxm-header .wp-block-navigation__responsive-container-close svg {
  width: 24px;
  height: 24px;
}
/* El `fill` hay que fijarlo tambien en el SVG y en los path: el core los pinta con
   `currentColor`, pero un `fill` propio en el path le gana al `color` del boton. */
.bxm-header .wp-block-navigation__responsive-container-open svg,
.bxm-header .wp-block-navigation__responsive-container-close svg,
.bxm-header .wp-block-navigation__responsive-container-open path,
.bxm-header .wp-block-navigation__responsive-container-close path {
  fill: currentColor;
}

/* ⚠️ EL ☰ DEL BLOQUE A (EL MENÚ EN LÍNEA) NO SE VE NUNCA (18-sep-2026).
   Desde que el menú en línea y el panel son DOS bloques, A tiene su propio botón de
   hamburguesa. El core solo lo esconde a partir de 600px
   (`.responsive-container-open:not(.always-shown){display:none}`, (0,2,0)), y la regla
   del child de arriba —`.bxm-header .wp-block-navigation__responsive-container-open`,
   también (0,2,0)— viene DESPUÉS en la cascada y le gana: MEDIDO EN VIVO con el bloque A
   sin `overlayMenu`, el ☰ de A se pintaba 44x44 en x=221,33 a 1440 y empujaba el menú
   29,35px a la derecha (el contenedor pasaba de x=235,98 a 265,33).
   El ☰ visible es SIEMPRE el de B (`.bxm-nav-panel`), que sí lleva `always-shown` y no
   matchea este selector. Vale a todos los anchos a propósito: por debajo de 1270 el
   bloque A entero sale de la fila (regla al final de este archivo). */
.bxm-header .bxm-nav .wp-block-navigation__responsive-container-open {
  display: none;
}

/* Panel del menu en MOVIL ---
   ⚠️ MEDIDO EN VIVO: el core abre el panel del menu con fondo BLANCO, pero las reglas
   de arriba estan escritas para el HEADER OSCURO (enlaces #FFFFFF, activo #FDEB00).
   Resultado: el panel abria blanco con los enlaces BLANCOS -> invisibles, y el activo
   en amarillo sobre blanco (1,1:1) -> ilegible. Ademas el boton de cerrar tambien es
   blanco y desaparecia. En la practica el menu "abria" pero no se podia leer ni cerrar.
   Fix: el panel se pinta del mismo azul del header (#192335), asi el menu se lee igual
   que en escritorio y no hay que duplicar el esquema de color.
   ⚠️ OJO CON LA ESPECIFICIDAD DEL CORE. La regla que pinta el panel de blanco es
        .wp-block-navigation:not(.has-background)
          .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
      y cada :not() APORTA la especificidad de su argumento: son (0,5,0), no (0,3,0).
      Una version anterior de esta regla (`.bxm-header .bxm-nav ...`, (0,4,0)) perdia
      contra ella y el panel seguia blanco. Por eso aca van dos clases mas
      (.bxm-header-inner y .has-modal-open) para llegar a (0,6,0) y ganar sin
      `!important`. */
.bxm-header .bxm-header-inner .bxm-nav-panel .wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
  background-color: #192335;
  color: #FFFFFF;
  /* PANEL EN COLUMNA, YA NO A PANTALLA COMPLETA (18-sep-2026). Pedido del dueno:
     «deberia ser solo una columna que muestre los items del menu con un padding de
     25px para que respire y no quede todo pegado a bordes».
     El core abre este contenedor a pantalla completa — `top/right/bottom/left: 0` —
     y aca pasa a ser una COLUMNA de 320px pegada al borde derecho (el lado del ☰),
     de altura completa y con 25px de padding en los cuatro lados.
     MEDIDO ANTES: 1300x900 (el 100% del viewport) con el padding 16px 50px del core
     (`clamp(1rem, --wp--style--root--padding-*, 20rem)`), los 3 items centrados item
     por item a media altura y, a 375px, la ✕ solapando el primer item.
     `box-sizing: border-box` es lo que hace que `width` sea el ancho VISIBLE: el
     contenedor del core viene en content-box y sin esa linea mediria 320+50=370.
     `left: auto` es lo que lo vuelve una columna apoyada en el derecho: con los dos
     bordes laterales atados el ancho lo fija el viewport y no el `width`.
     La ✕ queda DENTRO del panel sin regla propia: vive en
     `.wp-block-navigation__responsive-dialog` (position: relative), que es el que
     hereda los 25px de padding de aca. */
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(320px, 100%);
  box-sizing: border-box;
  padding: 25px;
}
.bxm-header .bxm-nav-panel .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
  color: #FFFFFF;
  padding: 12px 16px;           /* area tactil comoda para el dedo */
}
.bxm-header .bxm-nav-panel .wp-block-navigation__responsive-container .current-menu-item > .wp-block-navigation-item__content,
.bxm-header .bxm-nav-panel .wp-block-navigation__responsive-container .wp-block-navigation-item__content[aria-current="page"] {
  color: #FDEB00;
}
.bxm-header .bxm-nav-panel .wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover,
.bxm-header .bxm-nav-panel .wp-block-navigation__responsive-container .wp-block-navigation-item__content:focus {
  color: #FDEB00;
}

/* Los 3 items, en UNA columna pareja y con aire entre ellos.
   `row-gap`: el `gap` del core llega como `gap: inherit` y el ul del header lo tiene
   en 0 (`.bxm-nav .wp-block-navigation__container`, mas arriba en este archivo), asi
   que MEDIDO los rects de los items quedaban PEGADOS (separacion 0px).
   `align-items: stretch` (0,4,0, gana al core por especificidad) hace que cada fila
   ocupe el ancho del panel: los 3 items arrancan en el mismo x y la columna queda
   pareja, en vez de centrado item por item como estaban. */
.bxm-header .bxm-nav-panel .wp-block-navigation__responsive-container .wp-block-navigation__container {
  align-items: stretch;
  row-gap: 10px;
}
/* La lista de primer nivel tampoco debe exceder el ancho útil del panel (21-oct-2026).
   El `align-items: stretch` de arriba actúa sobre los ítems dentro de la lista; la
   LISTA dentro del contenido seguía midiendo lo que pedía su ítem más ancho y, como el
   core la centra, el sobrante se repartía a los dos lados y el `overflow:auto` del
   panel lo recortaba. MEDIDO a 1366x900 antes de esta regla: lista de 1010 a 1357,
   panel de 1031 a 1351 (46px de recorte por lado). Después: 1056 a 1311, dentro.
   Va con el hijo directo (`>`) para no tocar los submenús, que ya tienen su ancho. */
.bxm-header .bxm-header-inner .bxm-nav-panel .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.bxm-header .bxm-nav-panel .wp-block-navigation__responsive-container .wp-block-navigation-item {
  align-items: stretch;
}

/* El aire de la ✕ sobre el primer item. El core le reserva el alto con
   `padding-top: calc(24px + 2rem)` en el contenido del panel; a 375px ese calc da
   54px (la tipografia fluida baja el rem a 15px) y la ✕ mide 56, asi que MEDIDO sus
   rects se superponian 2px y el solape real con el primer item era de 1,6 px².
   64px = los 56 de la ✕ mas 8 de aire en el ancho mas chico (en escritorio la ✕ mide
   44 y el aire queda en 20px).
   ⚠️ EL SELECTOR VA ACOTADO AL PANEL ABIERTO (`is-menu-open.has-modal-open`) Y CON
   `.bxm-header-inner`: el mismo div del contenido vive tambien en el MENU EN LINEA de
   >=1270 (que se muestra desde el mismo contenedor), asi que una regla sin acotar le
   metia el padding-top al menu de escritorio — MEDIDO: los 3 items bajaban 56px y el
   header crecia 48px (de 86 a 134) con el widget, LOG IN y «Crear cuenta» corridos
   24px. Acotada, el estado en linea queda identico al aprobado. */
.bxm-header .bxm-header-inner .bxm-nav-panel .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content {
  padding-top: 64px;
}

/* Login inline (widget del repo) ---
   ⚠️ Cada selector de este widget estaba DOS veces: la colocacion de encaje (aca) y
   los ajustes de «Login mas compacto» (mas abajo, seccion 3). Se consolidaron el
   18-sep-2026: cada selector tiene ahora UNA sola regla con la union de las dos, y
   quedan aca las que NO se podian mover de lugar:
     · el contenedor `.bxm-login-inline`: su `display: flex` tiene que seguir ANTES del
       `@media (max-width: 1270px)` que lo oculta, o el widget aparece en el telefono
       (medido: a 375px pasaba de `display: none` a `display: flex`).
     · los campos: `input:focus` va justo despues y manda por orden (misma especificidad).
   Las de estado (`:focus`, `::placeholder`, `:hover`) nunca estuvieron duplicadas. */
.bxm-header .bxm-login-inline {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
}
.bxm-header .bxm-login-inline input[type="email"],
.bxm-header .bxm-login-inline input[type="password"] {
  /* 30x118 = el ajuste que antes vivia en «Login mas compacto». Se fusiono aca, no
     alla, porque `input:focus` (linea de abajo) tiene la MISMA especificidad y manda
     por ir despues: moviendo esta regla, el borde azul del foco se perdia. */
  height: 30px; width: 118px; border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px; padding: 0 8px; font-size: 12px; font-family: inherit;
  color: #192335; background: #fff; outline: none; transition: border-color .2s;
}
.bxm-header .bxm-login-inline input:focus { border-color: #0078BF; }
.bxm-header .bxm-login-inline input::placeholder { color: #94A3B8; }
.bxm-header .bxm-login-inline .bxm-login-actions { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.bxm-header .bxm-login-inline .bxm-btn-login {
  background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.7);
}
.bxm-header .bxm-login-inline .bxm-btn-login:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.bxm-header .bxm-login-inline .bxm-btn-join {
  background: #ffde00; color: #192335; border: 1.5px solid #ffde00;
}
.bxm-header .bxm-login-inline .bxm-btn-join:hover { background: #EAB308; border-color: #EAB308; }
.bxm-header .bxm-login-inline .bxm-login-forgot:hover { text-decoration: underline; }

/* Responsive: el login se oculta antes que romper la linea ---
   ACA VIVIA una `@media (max-width: 1320px)` con `width: 110px` para los campos del
   widget y `padding: 8px 9px` para los items del menu: no afectaba a NINGUN elemento.
   Los campos: su selector empata en especificidad (0,3,0) con el de mas abajo
   (`.bxm-header .bxm-login-inline input[...] { width: 118px; height: 30px }`), que va
   DESPUES en el archivo, asi que los 110px nunca se aplicaron (los campos miden
   118px — 136 con padding y borde — y el widget 457px, no 441).
   Los items: los toca la regla del panel (0,4,0) de mas arriba por especificidad.
   Se borro el 18-sep con la prueba en vivo: desactivando el bloque en el CSSOM, los
   valores computados son IDENTICOS en 9 anchos (1440/1300/1270/1200/1024/900/768/
   600/375). No volver a agregarla. */
/* El login se oculta cuando DE VERDAD no cabe, no antes.
   Medido: el bloque necesita 1266px para convivir en una línea con el logo (141),
   la nav (546, que no puede encogerse porque es `nowrap`) los dos gaps (38.4) y
   el padding lateral (3.5% x2). Con el corte en 1100px había una ventana de
   145px (1100-1245) donde el login se mostraba pero desbordaba el header hasta
   53px, generando scroll horizontal en toda la página.
   El corte se sube a 1270, el primer ancho donde cabe de verdad. */
@media (max-width: 1270px) {
  .bxm-header .bxm-login-inline { display: none; }
}
@media (max-width: 900px) {
  .bxm-header-inner { flex-wrap: wrap; }
  .bxm-header .bxm-nav-panel .wp-block-navigation-item__content { font-size: 0.85em; }
}

/* Ajuste de encaje: el header debe quedar en UNA linea --- */
/* 2. Padding lateral: 3.5% — CONSOLIDADO 18-sep-2026 con la regla `.bxm-header-inner` de
 * arriba (habia dos). Se fusiono alla porque entre las dos hay `@media` de `flex-wrap`:
 * al vivir dos veces, la de abajo pisaba esos media. NO se vuelve a declarar aqui. */

/* 3. Login mas compacto: los ajustes de encaje + etiquetas solo para lectores de pantalla
   CONSOLIDADO 18-sep-2026: cada selector de este widget tenia DOS reglas (la de arriba,
   «Login inline», y esta). Ahora hay una sola con la union de las dos, y donde chocaban
   gana el valor de la mas compacta (que es la que mandaba por ir despues). Va aca, no
   arriba, por el mismo motivo. Los campos NO estan aca: se fusionaron arriba, junto a
   `input:focus`. El contenedor `.bxm-login-inline { gap: 6px }` queda sin fusionar. */
.bxm-header .bxm-login-inline label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
  font-size: 9px; font-weight: 600; color: rgba(255,255,255,.6);
  letter-spacing: .3px; text-transform: uppercase; white-space: nowrap;
}
.bxm-header .bxm-login-inline .bxm-login-field {
  display: flex; flex-direction: column; gap: 2px; position: relative;
}
.bxm-header .bxm-login-inline .bxm-btn-login,
.bxm-header .bxm-login-inline .bxm-btn-join {
  height: 30px; padding: 0 10px; border-radius: 4px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .5px; font-family: inherit; cursor: pointer; transition: all .2s; white-space: nowrap;
}
/* Área táctil. La auditoría de touch targets (axe, regla target-size = WCAG
   2.5.8 AA) medía este enlace en 174 x 13,5px y pedía 24 x 24 como mínimo.
   Se le da altura real de 24px, NO 44: el header es un bloque compacto de
   88px y 44px lo agrandaría 30px. 24 es lo que exige la norma. */
.bxm-header .bxm-login-inline .bxm-login-forgot {
  font-size: 9px; color: rgba(255,255,255,.7); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 24px;
}
/* ⚠️ Este NO se fusiona con el de arriba: `display: flex` tiene que seguir ANTES del
   `@media (max-width: 1270px)` que oculta el widget, o el login aparece en el telefono
   (medido a 375px: pasaba de `display: none` a `display: flex`). Es su lugar, no un olvido. */
.bxm-header .bxm-login-inline { gap: 6px; }
.bxm-header .bxm-login-inline .bxm-login-fields { display: flex; align-items: center; gap: 5px; }
.bxm-header .bxm-login-inline .bxm-login-row { display: flex; gap: 5px; align-items: center; }

/* 4. Sin scroll horizontal por el header */

/* ⚠️ NO poner `overflow` aquí ni en `body`: cualquier overflow en un ancestro convierte a
   ese elemento en contenedor de scroll y DESACTIVA el `position: sticky` del header
   (sticky nativo del bloque, ver `parts/header.html`). */

/*
   BXM — CONTENEDOR GLOBAL: 1320px (templates + header + footer)
*/
.bxm-header-inner,
.wp-block-group.is-layout-constrained > .alignwide,
.wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  /* Sin `!important`: el selector lleva `.wp-block-group.is-layout-constrained` (0,2,0),
     que ya gana al `.is-layout-constrained > *` del core (0,1,0). Comprobado quitandolo
     en vivo a 1600px de viewport: el contenido sigue midiendo 1320px. */
  max-width: 1320px;
}
/* El footer es de ANCHO COMPLETO: sin `max-width` ni `margin: auto`.
   El header SÍ conserva su tope de 1320px. */

/*
   BXM — FOOTER (replica del Elementor 10219)
   Tokens: fondo #192335 · barra #192234 · enlaces #3A85AF
           titulos H6 16px/600 blanco · copia 13px/300
*/
.bxm-footer {
  background-color: #192335;
  color: #FFFFFF;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin-top: 0;
}

/* El aviso legal se movió del single al footer: pasa de fondo blanco a fondo oscuro,
   así que hereda el tratamiento de texto claro del footer. */
.bxm-footer .bxm-footer-legal {
	font-size: 13px;                /* ⚠️ EXCEPCIÓN CONSCIENTE a la escala tipográfica:
                                        la tabla del cliente pide 16px (1rem) para <p>.
                                        Taylor pidió 13px para el aviso legal del footer.
                                        NO "corregir" sin consultar. */
	line-height: 1.65;
	font-weight: 300;
	color: #b8b8b7;
	margin: 0;
}

.bxm-footer .bxm-footer-legal p {
	font-size: inherit;
	line-height: inherit;
	margin: 0 0 12px;
}

.bxm-footer .bxm-footer-legal p:last-child {
	margin-bottom: 0;
}

/* «Aviso de Responsabilidad:» — el énfasis se ve sin gritar sobre el fondo oscuro */
.bxm-footer .bxm-footer-legal strong {
	font-weight: 600;
	color: #FFFFFF;
}

.bxm-footer .bxm-footer-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0;
  padding: 40px 7% 30px;   /* el hueco hasta la barra de créditos = 30px */
}

/* Columna 1: marca */
.bxm-footer .bxm-footer-brand { padding-right: 21px; }
.bxm-footer .bxm-footer-logo { margin: 0 0 20px; }
.bxm-footer .bxm-footer-logo img { width: 132px; height: auto; display: block; }

/* Columnas 2 y 3: enlaces */
.bxm-footer .bxm-footer-col { padding: 0 10.6px; }

.bxm-footer .bxm-footer-title {
  font-family: 'Poppins', sans-serif;
/* ⚠️ EXCEPCION DELIBERADA A LA ESCALA TIPOGRAFICA (son DOS lugares: el footer y el h2 del modal de login,
   documentado en `mu-plugins/bxm-login.css`) — el footer es UNO DE ELLOS: el tamaño del
   encabezado NO sigue a su nivel (decisión de Taylor).
   El nivel es `<h3>` para que el índice de encabezados encadene sin saltos (era `<h6>`, que saltaba 3→6),
   pero un `<h3>` de la escala son 24px y el footer debe pesar MENOS que el contenido: si compite, la vista se
   va al pie. Regla general: nivel y tamaño van juntos; esta es la única excepción y está escrita acá.
   ⚠️ CÓMO DETECTAR QUE SE FILTRA: si otro h3 del sitio aparece con este tamaño en vez de 24px, la excepción
   se está aplicando de más.
   ⚠️ EL TAMAÑO VA EN px, NO EN em — ese fue el error: la versión anterior decía `0.875em` comentando «= 14px
   (el padre es de 16px)», pero el padre mide 14px (el `font-size` del propio pie), así que en `em` el título
   renderizaba 12.25px desde que se escribió (medido en vivo). Con `em` el valor depende de algo que vive en
   otro lugar del archivo y puede cambiar sin que esta regla lo sepa; en px el valor es el que dice ser.
   13px = un px por debajo de los 14 buscados (pedido de Taylor). Detalle → sitio/NOTAS-CSS.md §10 */
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  text-transform: capitalize;
  /* El `letter-spacing` de 1,4px lo ponia el estilo de elemento `h6` del
     theme.json, no nuestro CSS. Se fija explicito para no perderlo en el cambio
     de nivel: medido, sin esto el titulo deja de envolver a dos lineas (la caja
     pasa de 42px a 21px) y el footer cambia de forma. */
  letter-spacing: 1.4px;
  margin: 0 0 20px;
  line-height: 1.3;
}

.bxm-footer .bxm-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bxm-footer .bxm-footer-list li { margin: 0; }
.bxm-footer .bxm-footer-list a {
  font-size: 0.9em;      /* 12.6px — 0.9 sobre un padre de 14px, no de 16: el comentario
                            anterior decia "14.4px" por la misma suposicion equivocada */
  font-weight: 300;
  color: #b8b8b7;
  text-decoration: none;
  transition: color .2s ease;
}
.bxm-footer .bxm-footer-list a:hover,
.bxm-footer .bxm-footer-list a:focus { color: #FFFFFF; text-decoration: underline; }

/* ÁREA TÁCTIL DE LOS ENLACES DEL PIE (móvil) ────────────────────────────────
   MEDIDO: cada enlace medía 17px de alto, porque el <a> solo abarca su texto. El
   mínimo legal de WCAG 2.2 (2.5.8) es 24x24 y el recomendado 44x44, así que 17 falla
   los dos: con el pulgar se erra seguido.
   FIX: el enlace ocupa la fila completa y la FILA pasa a ser el objetivo táctil.
   El gap de 10px se anula porque ese aire ahora lo da el propio alto de la fila; si
   se dejara, las filas quedarían separadas y el objetivo no sería contiguo.
   ⚠️ Solo en móvil: en escritorio el puntero es preciso y 44px por fila estirarían
   el pie (11 enlaces x 44 = 484px de solo enlaces). */
@media (max-width: 781px) {
  .bxm-footer .bxm-footer-list { gap: 0; }
  .bxm-footer .bxm-footer-list li { display: flex; }
  .bxm-footer .bxm-footer-list a {
    display: flex;
    align-items: center;
    min-height: 44px;      /* Pinnacle usa el mismo criterio: la fila es el objetivo */
    width: 100%;
  }
  /* ⚠️ LEY DE PROXIMIDAD: con la fila en 44px, el margen de 20px del título ya no
     alcanza para que se lea como el encabezado de esa lista. Medido:
       título -> primer enlace = 20 (margen) + 15,5 (centrado en la fila) = 35,5px
       enlace -> enlace        = 44 (fila) - 13 (texto)                = 31px
     O sea el título quedaba MÁS lejos de su lista que los enlaces entre sí, y la
     lista se leía como suelta. Bajando el margen a 2px el primer enlace queda a
     17,5px del título: menos de la mitad que entre enlaces, que es lo que agrupa. */
  .bxm-footer .bxm-footer-title { margin-bottom: 2px; }
}

/* Barra inferior */
.bxm-footer .bxm-footer-bar {
  background-color: #192234;
  padding: 13px 7% 20px;
	/* WP emite `:root :where(.is-layout-flow) > * { margin-block: 1.2rem 0 }`, que ponía
	   19.2px encima de la barra. Sumado al padding-bottom del inner daba 51px de hueco;
	   anulado aquí, el hueco lo define solo el padding del inner (30px). */
	margin-block-start: 0;
}
.bxm-footer .bxm-footer-copy {
  font-size: 13px;                /* pedido por Taylor: mismo tamaño que el aviso legal */
  font-weight: 300;
  color: #b8b8b7;
  margin: 0;
  text-align: center;
}

/* Color de los iconos SVG ──
   `wp_get_icon()` añade aria-hidden/focusable/width/height y preserva el viewBox, pero
   DESCARTA el atributo `fill="currentColor"` del SVG. Sin fill, un <svg> se pinta NEGRO
   por defecto en vez de heredar el color del texto, así que lo reponemos aquí.
   `currentColor` hace que el icono siga SIEMPRE al color del contenedor: eso es lo que
   los hace tematizables. */
.bxm-red svg,
.bxm-red svg path,
.bxm-social-link svg,
.bxm-social-link svg path {
	fill: currentColor;
}

/* Redes sociales del footer («Seguinos en Redes Sociales:») ──
   La frase va BLANCA a 14px. Los iconos son RELATIVOS a la frase (em), así que
   si cambia el tamaño del texto, los iconos acompañan. El color de los iconos es
   el gris del footer y lo heredan con `currentColor` (ver `inc/icons.php`). */
.bxm-footer-social {
	/* El `font-size` va AQUÍ, en el contenedor: así el `em` de los iconos se calcula
	   desde la frase (14px) y no desde el footer (15.9px). */
	font-size: 14px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
}

.bxm-footer-social-label {
	font-size: 1em;                /* = 14px, heredado del contenedor */
	font-weight: 400;
	color: #FFFFFF;
	margin-right: 2px;
}

.bxm-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #b8b8b7;                       /* el gris del footer */
	transition: color .2s ease;
}

/* tamaño RELATIVO a la frase: 1.15em ≈ 16px sobre los 14px de la etiqueta */
.bxm-social-link svg {
	width: 1.15em;
	height: 1.15em;
	display: block;
}

.bxm-social-link:hover,
.bxm-social-link:focus {
	color: #FFFFFF;
}

/* Crédito «Desarrollado por tmaroto.com» — mismo tratamiento que el aviso legal. */
.bxm-footer .bxm-footer-credit {
	font-size: 13px;
	line-height: 1.65;
	font-weight: 300;
	color: #b8b8b7;
	margin: 6px 0 0;
	text-align: center;
}

.bxm-footer .bxm-footer-credit a {
	color: #b8b8b7;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color .2s ease;
}

.bxm-footer .bxm-footer-credit a:hover,
.bxm-footer .bxm-footer-credit a:focus {
	color: #FFFFFF;
}

/* Responsive */
@media (max-width: 1024px) {
  .bxm-footer .bxm-footer-inner { flex-wrap: wrap; row-gap: 32px; }
  .bxm-footer .bxm-footer-brand { flex: 1 1 100%; padding-right: 0; }
  .bxm-footer .bxm-footer-col {
    flex: 1 1 auto;          /* apilado en movil: ocupa el ancho completo */
  }
}
@media (max-width: 600px) {

  /* --- Formulario de resenas: el campo de la valoracion con el MISMO aire inferior
     que el resto de los campos. Medido: los demas campos quedan con 10px de margen
     inferior entre ellos; el area de texto (rows=8, resize:both) se veia con un aire
     mayor y descuadrado respecto de Nombre / Correo. Se iguala aqui, con el selector
     completo del campo para no depender del orden de las hojas de WooCommerce. --- */
  .bxm-producto-resenas .comment-form p.comment-form-comment,
  .bxm-producto-resenas #review_form p.comment-form-comment {
    margin-bottom: 10px;
    padding-bottom: 0;
  }
  .bxm-producto-resenas .comment-form-comment textarea,
  .bxm-producto-resenas #review_form textarea#comment {
    margin-bottom: 0;
    /* Mismo criterio que las demas areas de texto del sitio (mi-cuenta.css):
       padding 12px 14px, min-height 96px, line-height 1.5. El cuadro de resenas
       traia height:100px con padding 2px, asi que el aire interior no coincidia
       con el resto del sitio y sobraba alto. */
    height: 96px;
    min-height: 96px;
    padding: 12px 14px;
    line-height: 1.5;
    display: block;
    vertical-align: top;
  }
  /* Una sola distancia etiqueta→campo en todo el formulario. Medido: la etiqueta del
     area de texto quedaba a 1px de su cuadro (3px en el movil del dueno) mientras que
     las de Nombre y Correo quedaban a 10px (13px en el movil). El margen se declara
     aqui para todas las etiquetas del formulario, salvo la del checkbox de cookies,
     que envuelve a su propio control y no debe separarse de el. */
  .bxm-producto-resenas .comment-form p:not(.comment-form-cookies-consent) > label,
  .bxm-producto-resenas #review_form p:not(.comment-form-cookies-consent) > label {
    display: block;
    margin-bottom: 10px;
  }
  /* La puntuacion no va en un <p> como los demas campos: va en un div.comment-form-rating,
     y su etiqueta es inline, asi que el margin-bottom que ya traia no se aplicaba (en
     elementos en linea los margenes verticales no cuentan) y las estrellas quedaban
     pegadas a 1px. Se declara block con la misma distancia que el resto. */
  .bxm-producto-resenas .comment-form div.comment-form-rating > label,
  .bxm-producto-resenas #review_form div.comment-form-rating > label {
    display: block;
    margin-bottom: 10px;
  }

  .bxm-footer .bxm-footer-inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 32px 6%;
	align-items: start; }
  /* Los DOS bloques de enlaces van lado a lado en movil (pedido de Taylor, 14-oct-2026).
     MEDIDO ANTES: apilados, cada bloque a 343px de ancho y el pie interior de 978px de alto
     (marca 373 + bloque 239 + 32 + bloque 239). Con la rejilla de dos columnas los enlaces
     se leen de un golpe y el pie pierde el alto de uno de los bloques. La marca ocupa las dos
     columnas; cada bloque de enlaces, una. Los objetivos tactiles de 44px siguen intactos. */
  .bxm-footer .bxm-footer-brand { grid-column: 1 / -1; }
  .bxm-footer .bxm-footer-col { padding: 0; }
}

/*
   BXM — SINGLE POST con SIDEBAR (columna derecha)
   Layout medido en produccion: contenido 729px + sidebar 356px
   Contenedor: 1320px
*/
/* CONSOLIDADO 18-sep-2026: aca vivia `.bxm-single-main { padding: 40px 0 60px }`. El mismo
   selector estaba otra vez en el bloque del layout 65:35 con `padding: 0`, que es el que
   gana (va despues). La fusion deja un solo valor, el que ya mandaba, en ese bloque. */

/* CONSOLIDADO 18-sep-2026: aca vivia `.bxm-single-article { flex: 1 1 auto; min-width: 0 }`.
   El selector estaba TRES veces; ahora es una sola, en el bloque del archive, donde gana
   su `flex: 0 1 65%`. */

/* Titulo y metadatos --- */
/*
   BREADCRUMB (bloque de Yoast)
   Valores medidos en produccion: 13.6px / w500 / lh 19.04px (1.4) / rgb(84,89,95).
   Sin reglas propias, el bloque heredaba el cuerpo (15.92px / 400) y -lo que mas
   cantaba- el ENLACE tomaba el azul de marca: WP declara
   `a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--primary) }`,
   asi que el breadcrumb salia celeste, del MISMO color que el titulo del post, y
   competia con el en vez de acompanarlo.
   El selector del enlace va anclado a dos clases (0,2,1) para ganarle a esa regla
   de WP (0,1,1) sin `!important`. El separador » es texto suelto dentro del div, no
   un span: hereda el color del contenedor, que ya queda en gris.
*/
.bxm-breadcrumb {
	font-size: 0.85rem;      /* produccion: 13.6px */
	font-weight: 500;
	line-height: 1.4;        /* produccion: 19.04px */
}

.bxm-breadcrumb,
.bxm-breadcrumb .wp-block-breadcrumbs,
.bxm-breadcrumb .wp-block-breadcrumbs span,
.bxm-breadcrumb .wp-block-breadcrumbs li,
.bxm-breadcrumb .wp-block-breadcrumbs a {
	color: rgb(84, 89, 95);
}

.bxm-breadcrumb .wp-block-breadcrumbs a:hover,
.bxm-breadcrumb .wp-block-breadcrumbs a:focus {
	color: var(--wp--preset--color--enlace);
}

/* CONSOLIDADO 18-sep-2026: aca vivia la regla `.bxm-single-title` con la tipografia del
   titulo (familia, 2.5rem, 700, azul de marca, 1.2). Habia dos reglas del mismo selector:
   ahora es una sola, mas abajo, donde ya vivia su `max-width: 100%`. */

/* Imagen destacada --- */
/* El aire inferior va en la FIGURA, no en la <img>: en produccion la figura lleva
   `margin-bottom: 20px` y la imagen 0. Con el margen en la imagen, el hueco hasta
   la fila de datos salia de 47px (28 de la imagen + 19.2 del blockGap de WP) en
   vez de los 40px del main. Moviendolo, el hueco es 20 + 19.2 = 39.2px. */
/* El selector va ANCLADO al articulo (0,2,0): con una clase suelta (0,1,0) empata
   en especificidad con `:root :where(.is-layout-flow) > *` de WP y, como WP la
   inyecta despues, su `margin-block` gana y este margen se ignora en silencio
   (mismo caso que la fecha de las tarjetas y los margenes del TOC). */
/* SIN margen propio: el bloque recibe el mismo blockGap (19.2px) que el resto
   del articulo. Aqui hubo `margin-bottom: 20px` para calcar los 40px de
   produccion hasta la fila de datos, pero eso dejaba un hueco de 39px entre la
   imagen y la fila: el DOBLE que el resto. Taylor pidio simetria y la simetria
   interna manda sobre calcar produccion. */

/* NOTA: hubo aqui `.bxm-featured { margin-bottom: 20px }` para calcar los 40px de
   produccion hasta la fila de datos. Dos problemas: (1) una clase suelta (0,1,0)
   EMPATA con `:root :where(.is-layout-flow) > *` de WP y WP gana por orden, asi
   que el margen no aplicaba; (2) anclado a (0,2,0) SI aplicaba, pero dejaba el
   hueco imagen -> fila en 39px, el DOBLE que los 19px del resto del articulo.
   NO volver a declarar margen aqui: el blockGap (1.2rem = 19.2px) le da al
   featured el MISMO hueco que a todos los demas bloques, que es lo simetrico. */

.bxm-featured img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 0; }

/* Contenido ---
   CONSOLIDADO 18-sep-2026: aca vivia la regla `.bxm-post-content` con la tipografia del
   cuerpo (1rem, 1.5, 400, #334155). Habia dos del mismo selector; ahora es una sola, mas
   abajo, donde ya vivia su `max-width: 674px`. */

/* ── Aviso de contenido restringido (WooCommerce Memberships) ────────────────
   El plugin trae su propio HTML (`.woocommerce-info.wc-memberships-message.
   wc-memberships-content-restricted-message`) pero NINGUNA hoja del sitio lo
   estilaba: el aviso salía como un párrafo más del artículo —misma tipografía,
   mismo color, sin caja— y se leía como parte del contenido. Verificado en la
   entrada 2877 como invitado, con apply_filters('the_content', …).

   Tratamiento: el MISMO de tarjeta que ya usan los bloques del sitio (filo de 5px
   en el naranja de marca + contorno de 1px + radio 15px), fondo con un tinte claro
   del mismo naranja para despegarlo del blanco del artículo, y un candado a la
   izquierda. Los planes enlazados quedan como pastillas: son la acción que
   desbloquea la entrada.

   Contraste medido sobre el tinte #FFF6F1: texto #192335 = 14,78:1 · enlaces
   #00619A = 6,20:1 · candado #C2410C = 4,86:1 → AA en los tres. */
.bxm-post-content .wc-memberships-content-restricted-message,
.bxm-post-content .woocommerce-info.wc-memberships-message {
	position: relative;
	margin: 34px 0;
	padding: 20px 24px 20px 62px;
	background-color: #FFF6F1;
	border: 1px solid #F6C9B4;
	border-top: 5px solid var(--wp--preset--color--formulario, #C94A0E);
	border-radius: 15px;
	color: #192335;
	font-size: 1.05rem;
	line-height: 1.65;
	/* Si la hoja de WooCommerce llega a esta página, `.woocommerce-info` trae fondo
	   azul propio: se anula para que el aviso se vea siempre igual. */
	background-image: none;
	box-shadow: none;
}

/* El candado va como SVG embebido: sin petición extra y sin tocar el markup del plugin. */
.bxm-post-content .wc-memberships-content-restricted-message::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 21px;
	width: 24px;
	height: 24px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}

/* El envoltorio del plugin no aporta nada acá y trae márgenes propios. */
.bxm-post-content > .woocommerce:has(.wc-memberships-message) { margin: 0; }

/* Los planes enlazados: en negrita y con subrayado grueso, para que se lean como la
   acción que desbloquea la entrada. Van como enlaces y no como pastillas porque la frase
   ya trae la «o» del merge tag: con fondo de pastilla, al partirse el renglón la «o»
   quedaba huérfana y la segunda pastilla saltaba desalineada. */
.bxm-post-content .wc-memberships-content-restricted-message a {
	color: var(--wp--preset--color--enlace, #00619A);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.bxm-post-content .wc-memberships-content-restricted-message a:hover,
.bxm-post-content .wc-memberships-content-restricted-message a:focus {
	color: var(--wp--preset--color--share, #143F5E);
	text-decoration-thickness: 3px;
}

/* ⚠️ Los DOS selectores, no solo el primero: el aviso lleva la clase `woocommerce-info`,
   así que también coincide con `.woocommerce-info.wc-memberships-message` = (0,3,0), y esa
   regla le gana a la de aquí si esta se queda en (0,2,0). Medido en 390px antes de esto: el
   padding seguía en el de escritorio mientras el candado sí bajaba a 18px.

   CENTRADO DEL CANDADO (pedido del usuario, 14-oct-2026): en móvil el texto ocupa 5 líneas y
   el candado, alineado con la primera, quedaba con todo el aire abajo. El centrado lo hace la
   regla `::before` de más abajo con `top: 50%` + `translateY(-50%)`, NO con flex (el intento
   con flex partía la frase en columnas: ver el comentario de esa regla). */
@media (max-width: 600px) {
	.bxm-post-content .wc-memberships-content-restricted-message,
	.bxm-post-content .woocommerce-info.wc-memberships-message {
		margin: 26px 0;
		padding: 18px 18px 18px 56px;
	}
	/* El candado va CENTRADO verticalmente (pedido del usuario, 14-oct-2026: en móvil el
	   texto ocupa 5 líneas y el candado quedaba pegado a la primera). NO se usa flex: dentro
	   de un contenedor flex el `<span>` que envuelve a los planes se blockifica y pasa a ser
	   un ítem propio, así que la frase se parte en columnas (medido: tres bloques lado a
	   lado). Con `top: 50%` + `translateY(-50%)` el candado sigue absoluto y el texto fluye
	   igual; el 50% se calcula sobre la caja de padding de la tarjeta, que acá coincide con
	   el centro del bloque de texto. */
	.bxm-post-content .wc-memberships-content-restricted-message::before {
		top: 50%;
		transform: translateY(-50%);
		left: 18px;
	}
}
.bxm-post-content a {
  color: var(--wp--preset--color--enlace);
  /* Las URLs sueltas (khanacademy, nationalgeographic, wikipedia) no tienen donde
     partirse: sin esto la pagina gana 106px de scroll horizontal en movil. Se parte
     la palabra larga en vez de recortarla, que es lo que hacia el tema viejo. */
  overflow-wrap: anywhere;
}
.bxm-post-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 20px 0; }

/*
   BXM — TABLAS DEL CONTENIDO (.responsive-table)
   CSS provisto por Taylor (2026-09-10). Es el diseño oficial de BXM:
   reemplaza el patrón genérico que se había copiado de VisiteGuanacaste.
   332 tablas del contenido ya llevan esta clase en el HTML.
*/

/* Formato A del contenido: <div class="responsive-table-container"><table>
   El contenedor es el que da el scroll horizontal en pantallas chicas. */
.responsive-table-container {
    width: 100%;
    overflow-x: auto;   /* red de seguridad: solo actúa si una tabla muy ancha no cabe */
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
    border-radius: 15px;
}

.responsive-table {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-collapse: separate;   /* permite el radio */
    border-spacing: 0;
    border-radius: 15px;
    overflow: hidden;            /* que el fondo no tape las esquinas */
}

.responsive-table thead {
    background-color: #0078bf;
    color: #ffffff;
}

.responsive-table td,
.responsive-table th {
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    text-align: left;
}

/* limpieza de bordes internos para no duplicar con el borde exterior */
.responsive-table td:last-child,
.responsive-table th:last-child {
    border-right: none;
}

.responsive-table tbody tr:last-child td {
    border-bottom: none;
}

/* fondos alternos (solo en el cuerpo) */
.responsive-table tbody tr:nth-child(odd) {
    background-color: #f7f7f7;
}

.responsive-table tbody tr:nth-child(even) {
    background-color: #ffffff;
}

/* Las 39 tablas del contenido que NO traen la clase reciben el mismo tratamiento */
.bxm-post-content table:not(.responsive-table) {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 15px;
    overflow: hidden;
}
.bxm-post-content table:not(.responsive-table) th {
    background-color: #0078bf;
    color: #ffffff;
    padding: 20px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
}
.bxm-post-content table:not(.responsive-table) td {
    padding: 20px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
}
.bxm-post-content table:not(.responsive-table) tr:nth-child(odd) { background-color: #f7f7f7; }
.bxm-post-content table:not(.responsive-table) tr:nth-child(even) { background-color: #ffffff; }

/* Pantallas chicas: celdas compactas en vez de scroll horizontal */
@media (max-width: 768px) {
    .responsive-table td,
    .responsive-table th {
        padding: 12px 14px;
        font-size: .92em;
    }
    .bxm-post-content table:not(.responsive-table) td,
    .bxm-post-content table:not(.responsive-table) th {
        padding: 12px 14px;
        font-size: .92em;
    }
}

@media (max-width: 600px) {
    .responsive-table { border-radius: 10px; }
    .responsive-table td,
    .responsive-table th {
        padding: 9px 10px;
        font-size: .86em;
    }
    .bxm-post-content table:not(.responsive-table) td,
    .bxm-post-content table:not(.responsive-table) th {
        padding: 9px 10px;
        font-size: .86em;
    }
}

@media (max-width: 480px) {
    .responsive-table td,
    .responsive-table th {
        padding: 7px 8px;
        font-size: .8em;
    }
    .bxm-post-content table:not(.responsive-table) td,
    .bxm-post-content table:not(.responsive-table) th {
        padding: 7px 8px;
        font-size: .8em;
    }
}

/*
   BXM — ARCHIVE (del JSON del Elementor 9082 "Pag - Categorias")
   Listado: 1 columna · thumbnail a la IZQUIERDA al 44%
*/
.bxm-archive-main { padding: 0; }
/* El main NO aporta padding vertical: el aire lo da la columna, igual que en el
   single (.bxm-single-main también tiene padding 0 salvo el lateral). Antes el
   archive sumaba 40px del main + 30px de la columna = 70px de aire bajo el
   header, contra los 40px del single. Medido con el breadcrumb: single 128,
   archive 158. */

/* CONSOLIDADO 18-sep-2026: aca vivia `.bxm-archive-content { flex: 1 1 auto; min-width: 0 }`.
   Habia dos reglas del mismo selector; ahora es una sola, mas abajo, en el bloque del
   archive (donde ya vivia su fondo/padding). */

.bxm-archive-title {
	font-family: 'Poppins', sans-serif;
	font-size: 2.4em;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	line-height: 1.25;
	margin: 0 0 20px;
}

/* Descripción de la categoría (bloque nativo core/term-description).
   Sobria y en el gris secundario de marca: acompaña al título sin competir
   con él. No se muestra mientras las categorías no tengan descripción,
   porque el bloque no imprime nada en ese caso. */
.bxm-archive-description {
	font-size: 1em;
	line-height: 1.6;
	color: #54595F;
	margin: 0 0 25px;
}

.bxm-archive-description p { margin: 0 0 12px; }

.bxm-archive-description p:last-child { margin-bottom: 0; }

/* Box del autor */

/* Compartir */
.bxm-share-block { margin: 0 0 20px; }
/* .bxm-share-title se ELIMINA: el <h4> del archive se sustituyó por el shortcode
   [bxm_compartir], que imprime su propio rótulo con .bxm-compartir-label
   (Poppins 1em 600, mismo azul de marca). La regla quedaba sin usar. */

/* EL LISTADO: 1 columna, thumbnail izquierda --- */
.bxm-post-list { display: flex; flex-direction: column; gap: 25px; }

/* El aire entre tarjetas NO es solo el `gap`. WP le añade un margen a cada `li`
   con `:root :where(.is-layout-flow) > * { margin-block: 1.2rem 0 }` (19.2px),
   porque el wp:post-template usa layout "default" y eso emite `is-layout-flow`.
   MEDIDO en el navegador: gap 20 + margen 19.2 = 39px reales de hueco.
   La especificidad de esa regla es (0,1,0) — la MISMA que `.bxm-post-list` — así
   que perdía por orden, y es la causa nº1 de «mi regla no aplica».
   El selector se ancla a `.bxm-post-list > .wp-block-post` = (0,2,0) y gana sin
   `!important`. Verificado: con esta regla el hueco es exactamente el `gap`
   (probado en vivo: gap 25 + margen 0 = 25px de hueco; sin ella, 44px). */
.bxm-post-list > .wp-block-post { margin-block: 0; }

.bxm-post-item {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: flex-start;
  /* Tarjeta con padding propio; la imagen lo «rompe» con márgenes negativos
     (patrón de producción: imagen al borde, esquinas redondeadas por el card). */
  padding: 25px;
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 15px;
  overflow: hidden;
}
/* OJO: el selector va ANCLADO a `.bxm-post-item` a propósito.
   WP inyecta `.is-layout-flex > :is(*, div) { margin: 0 }`, cuya especificidad es (0,1,1)
   (:is() toma la del selector más específico de su lista = `div`). Un `.bxm-item-thumb`
   suelto (0,1,0) PIERDE y el margen negativo nunca se aplica. Anclado = (0,2,0) → gana. */
.bxm-post-item .bxm-item-thumb {
  flex: 0 0 44%;
  /* -25px = el padding del card: la imagen llega a los bordes izq/sup/inf.
     A la derecha NO se anula (el gap: 20px separa del texto). */
  margin: -25px 0 -25px -25px;
}
.bxm-item-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Sin radio propio: las esquinas las redondea el card (15px + overflow: hidden),
     igual que en producción. */
  border-radius: 0;
  display: block;
}
.bxm-item-body { flex: 1 1 auto; min-width: 0; padding-top: 4px; }

.bxm-item-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.125rem;      /* 18px */
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
}
.bxm-item-title a { color: #1A1D1F; text-decoration: none; }
.bxm-item-title a:hover { color: var(--wp--preset--color--enlace); }

.bxm-item-excerpt {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: #4B5563;
  margin: 0 0 10px;
}

.bxm-item-meta {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: capitalize;
  line-height: 1.5;
  color: #191919;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.bxm-item-meta a { color: #191919; text-decoration: none; }
.bxm-item-meta a:hover { color: var(--wp--preset--color--enlace); }
.bxm-meta-sep { color: #0078BF; margin: 0; font-size: inherit; }

.bxm-item-more {
  font-family: 'Poppins', sans-serif;
  font-size: 0.875em;
  font-weight: 600;
  color: #0078BF;
  text-decoration: none;
}

/* Paginación */
.bxm-pagination {
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 55px;
}
.bxm-pagination a, .bxm-pagination .page-numbers {
  color: var(--wp--preset--color--enlace); text-decoration: none; padding: 0 6px;
}
.bxm-pagination .current { color: #192335; font-weight: 700; }

.bxm-no-results {
  font-family: 'Poppins', sans-serif; font-size: 1em; color: #4B5563;
  padding: 20px 0;
}

/* Responsive */
@media (max-width: 1024px) {
  
  .bxm-archive-content .bxm-sidebar-col,
  .bxm-archive-layout > .bxm-sidebar-col { flex: 1 1 100%; width: 100%; }
}
@media (max-width: 700px) {
  /* `align-items: stretch` necesita el selector ANCLADO (0,2,0). El bloque lleva
     `"verticalAlignment":"top"` en el template, y de ahí WordPress emite
     `.is-vertically-aligned-top { align-items: flex-start }`, con la MISMA
     especificidad (0,1,0) pero inyectada DESPUÉS en el <head>: gana por ORDEN.
     Comprobado en el CSSOM: la regla de este @media estaba cargada y aun así el
     computado devolvía `flex-start`. Importa porque en flex-direction COLUMN es
     `align-items` quien gobierna el ANCHO (no `width`): sin stretch la imagen no
     puede llegar a los dos bordes. */
  .bxm-archive-posts .bxm-post-item {
    flex-direction: column;
    align-items: stretch;
  }
  /* El selector va ANCLADO a `.bxm-post-item` (0,2,0) a propósito: la regla de
     desktop de más arriba usa esa misma forma, y si aquí se escribe
     `.bxm-item-thumb` suelto (0,1,0) PIERDE contra ella. Consecuencia real
     medible: en móvil seguían aplicándose `flex: 0 0 44%` y
     `margin: -25px 0 -25px -25px`, así que la imagen medía 275px dentro de una
     tarjeta de 327 (51px de hueco a la derecha) y terminaba en y=207 mientras el
     texto empezaba en y=200 -> 7px de superposición sobre la foto, exactamente
     los 18px del `gap` menos los 25px del margen negativo.
     En columna el `margin-bottom` negativo no tiene sentido (abajo va el texto,
     no el borde de la tarjeta): se rompe el padding de 25px arriba y a los
     lados, y abajo queda 0 para que el `gap` separe imagen y texto.
     `align-items: stretch` es imprescindible: en flex-direction COLUMN es
     `align-items` quien gobierna el ANCHO, y la tarjeta lo tiene en flex-start. */
  .bxm-post-item .bxm-item-thumb {
    flex: 0 0 auto;
    width: auto;
    margin: -25px -25px 0 -25px;
  }
  .bxm-archive-title { font-size: 1.8em; }
  
}

/*
   BXM — SIDEBAR v2 · CSS derivado de la auditoría QA (2026-09-10)
   Fuente de verdad: JSON del template Elementor 9055.
   El sidebar de producción NO son tarjetas: es UN panel blanco
   (#FFFFFF, padding 40px) sobre fondo de página gris (#F3F3F3),
   con secciones separadas por líneas de 2px #D0D0D0.
*/
/*
   BXM — SIDEBAR v2 · réplica medida del sidebar de producción (Elementor 9055)
   Medido con navegador real @1280px: contenido 808.8px / sidebar 436.2px
   (65:35 del ancho libre de 1245px, gap 20px) · caja interior sidebar 356.2px
   Página gris #F3F3F3 + columnas panel blanco #FFFFFF con padding 40px
   AÑADIR AL FINAL de sitio/child-theme/style.css (necesita ganar por orden
   y especificidad a las reglas .bxm-sidebar de las líneas 30-65 y 360-436)
*/

/* NOTAS DE APLICACIÓN (sidebar)
   - Si el margen entre módulos sale a 47.2px en vez de 65px, el theme está ganando con
     el block-gap de TT5 (1.2rem): ajustar el margin-top del módulo, no parchear.
   - Las materias ya son DOS LISTAS CURADAS (6 básica + 9 bachillerato) con iconos, vía
     el shortcode [bxm_materias] — ver parts/sidebar.html e inc/icons.php.
   - 'Entradas recientes' NO existe en producción: no reponerlo. */

/* 1) CONTEXTO DE PÁGINA — el gris #F3F3F3 vive ahora en theme.json
      (styles.color.background -> var(--wp--preset--color--canvas)), que es la vía
      nativa y aplica a TODAS las plantillas. Antes se hacía aquí con
      `body.single-post, .bxm-single-main` y por eso el archive y la home salían
      blancos: producción es gris en todas (medido @1440: archive, single, home y
      tienda). Esta regla se ELIMINA por redundante, no se deja conviviendo. */
/* CONSOLIDADO 18-sep-2026: el otro `.bxm-single-main` (el de «SINGLE POST con SIDEBAR»,
   con `padding: 40px 0 60px`) se elimino; este es el valor que mandaba y el unico que
   queda. Medido: la pagina no cambia. */
.bxm-single-main { padding: 0; }

/* 2) LAYOUT 65:35 CON GAP 20px (medido: 808.812 / 436.188 @1280; 896.6 / 483.4 @1600).

   CONSOLIDADO 18-sep-2026: los dos selectores de este bloque estaban repetidos.
   `.bxm-single-article` vivia tambien en el bloque del single y en el del archive; ahora
   es una sola, mas abajo, en el del archive (alli gana este `flex: 0 1 65%` sobre el
   `flex: 1 1 auto` de arriba). `.bxm-sidebar-col` tenia otras dos (el padding del archive
   y el `display: flex` del estirado) y se queda ACA: llevada abajo, la fusion le ganaba al
   `@media (max-width: 1024px)` que la pasa a `flex: 1 1 100%` (medido a 1000px: la pagina
   cambiaba). */
.bxm-sidebar-col {
  flex: 0 1 35%;
  width: auto;
  background: #FFFFFF;
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 3) COLUMNA DEL SIDEBAR: sin tarjetas por módulo, 20px entre módulos.
   CONSOLIDADO 18-sep-2026: esta regla se fusiono con las otras tres de `.bxm-sidebar`
   (ver el bloque «El panel del sidebar ocupa toda la altura de su columna»). */

/* Separadores: en producción cada sección va precedida por una línea de 2px
   #D0D0D0 con 45px de aire arriba y abajo (widget divider de 92px de alto).
   El gap de 20px se suma: 20+45 = 65px hasta la línea y 45+20 = 65px después. */

/* 4) TÍTULOS DE MÓDULO — producción: Poppins 600 · 16px · 19.2px · #54595F · sin borde */
.bxm-sidebar .bxm-widget-title,
.bxm-sidebar .wp-block-heading.bxm-widget-title {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  color: #54595F;
  text-transform: none;
  margin: 0 0 30px;   /* 10px de margen + 20px de gap = 30px hasta el contenido */
  padding: 0;
  border: 0;
}

/* 5) LISTA DE MATERIAS — producción: ítem 33.8px, 5px entre ítems, enlace
      Poppins 400 · 16px · 28.8px · #3A85AF, sin bordes inferiores */

/* jerarquía de wp:categories (en producción las listas son planas).
   El selector de `.bxm-cats` se retira: quedó huérfano (sin llaves) de una limpieza
   anterior y se fusionaba con la regla del buscador de mas abajo. */

/* 6) BUSCADOR — producción: input 277.2x71 + 8px + botón 71x71 #0078BF */

.bxm-search,
.bxm-search .wp-block-search__inside-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
}
.bxm-sidebar .bxm-search input[type='search'],
.bxm-404 .bxm-search input[type='search'] {
  flex: 1 1 auto;
  min-width: 0;
  height: 71px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #54595F;
  background: #FFFFFF;
  border: 1px solid #CDCDCD;
  border-radius: 0;
  padding: 16px 28px 16px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.bxm-sidebar .bxm-search input[type='search']::placeholder,
.bxm-404 .bxm-search input[type='search']::placeholder { color: #54595F; opacity: 1; }
.bxm-sidebar .bxm-search input[type='search']:focus,
.bxm-404 .bxm-search input[type='search']:focus { outline: 0; border-color: #0078BF; }
.bxm-sidebar .bxm-search .wp-block-search__button,
.bxm-404 .bxm-search .wp-block-search__button {
  flex: 0 0 71px;
  width: 71px;
  height: 71px;
  margin: 0;
  padding: 24px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: #0078BF;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  cursor: pointer;
}
.bxm-sidebar .bxm-search .wp-block-search__button:hover,
.bxm-404 .bxm-search .wp-block-search__button:hover { background: #192335; }
.bxm-sidebar .bxm-search .wp-block-search__button svg,
.bxm-404 .bxm-search .wp-block-search__button svg { width: 23px; height: 23px; fill: currentColor; }

/* 8) RESPONSIVE — el sidebar baja debajo del contenido y deja de ser panel lateral.
      Las dos reglas de aqui daban `flex: 1 1 100%` pero SIN `width: 100%`; su efecto
      ya lo cubre el @media de mas abajo, que ademas declara el ancho. Se retiran
      junto con los restos de .bxm-recent, que quedaron sin llaves propias y hacian
      que el navegador descartara el @media entero. */

@media (max-width: 600px) {
  .bxm-single-article,
  .bxm-sidebar-col { padding: 16px; }
}

.bxm-single-article {
  /* CONSOLIDADO 18-sep-2026: este selector tenia tres reglas (el `flex: 1 1 auto` del
     bloque del single, la de layout 65:35 y esta). Ahora es una sola, acá, con la union:
     gana el `flex: 0 1 65%` de la 65:35 sobre el `flex: 1 1 auto` de arriba. */
  flex: 0 1 65%;
  min-width: 0;
  background: #FFFFFF;
  padding: 40px;
  box-sizing: border-box;
}
/* Mismo padding que la columna del single (.bxm-single-article): 40px. Antes el
   archive usaba 30px para igualar el ancho del listado de producción, pero ese
   era el criterio viejo; ahora la referencia es el single de staging. Además el
   aire superior tiene que ser el de la columna y no el del main. */
.bxm-archive-content {
  /* CONSOLIDADO 18-sep-2026: `flex: 1 1 auto; min-width: 0` vivia en una PRIMERA regla
     `.bxm-archive-content` arriba, con el bloque del single. Se fusiona acá porque el
     `@media (max-width: 1024px)` que lo pasa a `flex: 1 1 100%` va despues y sigue
     mandando; entre las dos no hay nada que toque el elemento. */
  flex: 1 1 auto;
  min-width: 0;
  background: #FFFFFF;
  padding: 40px;
  box-sizing: border-box;
}
/* CONSOLIDADO 18-sep-2026: aca vivia `.bxm-sidebar-col { background: #FFFFFF; padding: 40px;
   box-sizing: border-box }`. El selector estaba tres veces; ahora es una sola, arriba en
   el bloque «LAYOUT 65:35», que es su lugar (ahi no le gana el @media de 1024px). */

/* Reparto 65:35 con gap 20px (medido en producción), no 356px fijos.
   CONSOLIDADO 18-sep-2026: `.bxm-sidebar { position: static; padding: 0; gap: 20px }`
   se fusiono con las otras tres reglas del mismo selector (ver el bloque «El panel del
   sidebar ocupa toda la altura de su columna»). */

@media (max-width: 1024px) {
  .bxm-single-article, .bxm-archive-content,
  .bxm-sidebar-col { flex: 1 1 100%; width: 100%; padding: 24px; }
}

/*
   BXM — MATERIAS del sidebar (.bxm-materias)
   El bloque es ahora wp:list con enlaces curados (6 básica + 9 bachillerato),
   tal como producción. Valores del JSON 9055:
   enlace Poppins 400 · 1em (16px) · line-height 1.8 (28.8px) · #3A85AF
   ítem de 33.8px con 5px de separación, sin bordes
*/
.bxm-sidebar .bxm-materias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bxm-sidebar .bxm-materias li {
  margin: 0;
  padding: 0 0 5px;
  border: 0;
  list-style: none;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.8;
}
.bxm-sidebar .bxm-materias li::marker { content: none; }
/* CONSOLIDADO 18-sep-2026: aca vivia la tipografia del enlace de materia (display: block,
   Poppins 16px/28.8px, #1A1D1F, sin subrayado, transicion de color). El selector estaba dos
   veces; ahora es una sola, abajo, junto a los iconos. */
/* Iconos de las materias ──
   Vienen de la colección nativa `bxm` (ver inc/icons.php). En producción eran de
   FontAwesome vía Elementor, un plugin que se retira.
   El tamaño es RELATIVO al texto del enlace (em) y el color se hereda con
   `currentColor`, así que acompañan al hover sin reglas extra. */
.bxm-sidebar .bxm-materias a {
	/* CONSOLIDADO 18-sep-2026: el selector tenia dos reglas (la tipografia del enlace y
	   esta). Ahora es una sola, acá, con la union: `display: flex` gana al `block`. */
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 28.8px;
	color: #1A1D1F;   /* el TEXTO va negro; el azul es sólo del icono */
	text-decoration: none;
	transition: color .2s ease;
}

.bxm-sidebar .bxm-materias a svg {
	width: 1.25em;              /* 20px sobre el texto de 16px, igual que producción */
	height: 1.25em;
	flex: 0 0 auto;
	fill: #0078BF;              /* ⚠️ color FIJO, no `currentColor`: sólo el icono es azul */
}

.bxm-sidebar .bxm-materias .bxm-materia-nombre {
	line-height: 1.4;
}

.bxm-sidebar .bxm-materias a:hover {
	color: #1A1D1F;             /* el hover no cambia el color del texto (igual que producción) */
	text-decoration: underline;
}

/* Separadores del sidebar: línea de 2px #D0D0D0 dentro de un bloque de 92px
   (45px de aire arriba + 2px + 45px abajo), como el widget divider de producción */
/* El separador del sidebar del single post, reutilizado en la ficha entre el botón de compra y los
   relacionados (pedido del dueño: que no compitan). El selector se AMPLÍA DUPLICÁNDOLO ENTERO —no el
   prefijo—: el ámbito es parte del selector y recortarlo lo aplicaría al contenedor equivocado. */
.bxm-sidebar .bxm-divider { border: 0;
  border-top: 2px solid #D0D0D0;
  width: 100%;
  margin: 45px 0 45px;
  height: 0;
  background: none;
  opacity: 1; }
/* En la FICHA el aire de abajo se compensa: el <h2> mide 30px con 37,5px de interlineado, así que su
   tinta arranca más abajo que su caja y con 45/45 la línea se veía corrida hacia arriba. Medido por
   PÍXELES (no por cajas): 45px arriba contra 50px abajo, o sea 5px de desfase, que es lo que se resta.
   El sidebar conserva su 45/45: por eso las reglas van separadas y no compartidas. */
.bxm-producto-info .bxm-divider { border: 0;
  border-top: 2px solid #D0D0D0;
  width: 100%;
  margin: 45px 0 40px;
  height: 0;
  background: none;
  opacity: 1; }

/* El CTA de Telegram/WhatsApp (del JSON: Poppins 0.9rem · #7A7A7A) */
/* El CTA es un grupo dentro de un contenedor flex, así que WP le añade su blockGap
   (1.2rem = 19.2px) como `margin-block`. En flex los márgenes NO colapsan: se sumaban
   al margen del separador y daban 84px arriba contra 65px abajo. Neutralizado aquí,
   la separación la define el separador (45px) por ambos lados. */
.bxm-sidebar > .bxm-cta-membresia {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Barra de administración de WordPress ──
   Con sesión iniciada, WP añade la admin bar y DESPLAZA el header hacia abajo
   (body.admin-bar), así que el header sticky ocupa de y=32 a y=120 y el CTA en 112
   se solapaba 8px. WP publica su altura en `--wp-admin--admin-bar--height`
   (32px en escritorio, 46px por debajo de 782px): se suma a la compensación. */
body.admin-bar .bxm-cta-membresia {
	top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--bxm-header-h, 88px) + 24px);
}

/* CTA de membresía del sidebar ──
   En producción estaba DESHABILITADO. Reconstruido con bloques nativos
   (group + heading + paragraph + list + buttons) y con TOKENS del tema:
   el borde usa --primary (#0078BF), el texto y el botón --share (#143F5E)
   y el fondo del botón --cta (#ffde00). Retematizar = cambiar theme.json. */
.bxm-cta-membresia {
	background-color: #FFFFFF;
	/* Mismo tratamiento de borde que el bloque de suscripción: filo superior de 5px
	   en celeste de marca + contorno de 1px en gris. */
	border: 1px solid #E0E0E0;
	border-top: 5px solid var(--wp--preset--color--primary);
	border-radius: 15px;
	/* Padding y gap de 25px/20px, iguales al bloque de comunidad: al reparar la regla
	   el padding había quedado en 20px y todo se veía demasiado pegado. */
	padding: 25px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	/* El header es sticky y mide 88px: se compensa con su altura + 24px de aire.
	   SIN z-index propio: así el header siempre queda por ENCIMA. */
	top: calc(var(--bxm-header-h, 88px) + 24px);
}

/* El selector va ANCLADO al contenedor: el theme emite `.bxm-sidebar .wp-block-heading`
   = (0,2,0), y una clase suelta (0,1,0) pierde aunque venga después. Anclado empata y
   gana por orden. NO usar `!important` para esto. */
.bxm-cta-membresia .bxm-cta-titulo {
	color: #54595F;
	font-size: 16px;
	font-weight: 600;
	/* line-height 1.45 (antes 1.2): con 1.2 los descendentes de «q», «¿» y «?» invadían
	   el padding y la línea parecía pegada al texto. */
	line-height: 1.45;
	text-align: left;
	margin: 0;
	/* 20px: el mismo aire que hay bajo la línea (gap 20 + el line-box del párrafo),
	   para que la línea quede CENTRADA entre el título y el contenido. */
	padding: 0 0 20px;
	border-bottom: 1px solid var(--wp--preset--color--primary);
}
.bxm-cta-membresia .bxm-cta-lead {
	font-size: 13px;
	color: #444444;
	/* Alineado a la izquierda, coherente con el resto del sidebar.
	   SIN margen propio: la separación la gobierna el `gap` del contenedor. En flex los
	   márgenes no colapsan y el gap se sumaba, dejando 15px arriba y 31px abajo. */
	text-align: left;
	margin: 0;
}

.bxm-cta-lista {
	text-align: left;
	list-style: none;
	padding: 0;
	margin: 15px 0;
	font-size: 14px;
	color: #444444;
}

.bxm-cta-lista li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	padding: 0;
	border: 0;
}

.bxm-cta-lista li::marker { content: none; }

/* El check: SVG inline de `core/check`, verde y al tamaño del texto.
   `fill` explícito porque `wp_get_icon()` no lo emite (ver inc/icons.php). */
.bxm-cta-ico {
	/* El icono va RELATIVO al texto de la lista (1em del li), no en px fijos.
	   El SVG de `bxm/check` tiene el viewBox recortado al dibujo, así que `1em`
	   aquí es el tamaño REAL del check (antes el dibujo ocupaba el 46% del svg). */
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #2E7D32;
}

/* El SVG hereda el color del span por `currentColor` (wp_get_icon no emite `fill`). */
.bxm-cta-ico svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

/* El wrapper del botón también al 100%: si no, el enlace (`width: 100%`)
   solo llena el ancho del wrapper, que se ajusta a su contenido. */
.bxm-cta-accion { margin: 15px 0 0; }
.bxm-cta-btn { width: 100%; }

.bxm-cta-btn .wp-block-button__link {
	display: block;
	width: 100%;
	background-color: #0E7A45;   /* verde del estandar de proceso (antes #14A05C: con
	                            blanco encima daba 3,38:1 y no alcanzaba WCAG AA) */
	color: #FFFFFF;              /* texto blanco */
	padding: 12px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 700;
	text-align: center;
	transition: background-color .2s ease, transform .2s ease;
}

.bxm-cta-btn .wp-block-button__link:hover,
.bxm-cta-btn .wp-block-button__link:focus {
	background-color: #0A5C34;   /* hover: un escalon mas oscuro, blanco encima da 8.10:1 */
	color: #FFFFFF;
	transform: scale(1.03);
}

/* Bloque de Comunidad (suscripción al newsletter) ──
   Reemplaza al formulario de Mailchimp del diseño original. Cambios de fondo:
     · Mailchimp pedía 5 campos (correo, país, nombre, apellidos, programa).
       Ahora se pide SOLO el email: menos fricción y menos datos que custodiar.
     · El destino es Listmonk (lista #3) con DOBLE OPT-IN.
   NO es sticky (a diferencia del CTA de membresía): queda en el flujo.
   Colores por TOKENS del tema donde existen. */
.bxm-comunidad {
	background-color: #FFFFFF;
	border: 1px solid #E0E0E0;
	border-top: 5px solid var(--wp--preset--color--primary);
	border-radius: 15px;
	padding: 25px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-sizing: border-box;
	width: 100%;
}

.bxm-comunidad .bxm-comunidad-titulo {
	color: #54595F;
	font-size: 16px;
	font-weight: 600;
	/* Idem que el CTA: 1.45 y 20px de aire para que la línea quede centrada. */
	line-height: 1.45;
	text-align: left;
	margin: 0;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--wp--preset--color--primary);
}

.bxm-comunidad .bxm-comunidad-lead {
	font-size: 15px;
	color: #444444;
	line-height: 1.4;
	/* SIN margen propio: la separación la gobierna el `gap` del contenedor. En flex los
	   márgenes no colapsan y el gap se sumaba, dejando 15px arriba y 36px abajo. */
	margin: 0;
}

.bxm-comunidad .bxm-comunidad-lista {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.bxm-comunidad .bxm-comunidad-lista li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: #333333;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	border: 0;
}

.bxm-comunidad .bxm-comunidad-lista li::marker { content: none; }

/* Los checks salen de `bxm/check` (viewBox recortado) y van relativos al texto. */
.bxm-comunidad .bxm-cta-ico {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	color: #2E7D32;
}

/* Los hijos del CTA no aportan margen propio: la separación la gobierna el `gap` del
   contenedor, una sola fuente de verdad. Antes se sumaban los márgenes de WP (19.2px)
   con los propios y cada salto quedaba distinto. */
/* Los hijos del CTA no aportan margen propio: la separación la gobierna el `gap` del
   contenedor, una sola fuente de verdad. El selector va ANCLADO porque `.bxm-cta-membresia > *`
   empata en especificidad con `.bxm-cta-lead` y perdía por orden. */
.bxm-cta-membresia > .bxm-cta-titulo,
.bxm-cta-membresia > .bxm-cta-lead,
.bxm-cta-membresia > .wp-block-list,
.bxm-cta-membresia > .bxm-cta-accion {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Los hijos del bloque de comunidad no aportan margen propio: manda el `gap` del contenedor.
   El selector va ANCLADO porque `> *` empata en especificidad con `.bxm-comunidad-lead`. */
.bxm-comunidad > .bxm-comunidad-titulo,
.bxm-comunidad > .bxm-comunidad-lead,
.bxm-comunidad > .wp-block-list,
.bxm-comunidad > form {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* El formulario ── */
.bxm-comunidad-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background-color: #F9FBFD;
	border: 1px solid #EEF2F5;
	border-radius: 12px;
	padding: 20px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

/* Texto del formulario de suscripcion en blanco. */

.bxm-comunidad-form .bxm-comunidad-req {
	color: #FFFFFF;
}

.bxm-comunidad-campo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: left;
}

.bxm-comunidad-campo label {
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--share);
}

.bxm-comunidad-req { color: #E74C3C; }

.bxm-comunidad-campo input[type='email'] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #CCCCCC;
	border-radius: 8px;
	font-size: 13px;
	color: #333333;
	background-color: #FFFFFF;
	box-sizing: border-box;
	transition: border-color .2s ease;
}

.bxm-comunidad-campo input[type='email']:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 0;
}

/* HONEYPOT — invisible para personas, visible para bots. */
.bxm-comunidad-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* El CTA de suscripción: naranja de marca con texto BLANCO (decisión del usuario,
   14-oct-2026). El token `formulario` bajó a #C94A0E el 19-oct-2026: blanco sobre ese
   tono da 4,70:1 y YA cumple WCAG 2.2 AA (4,5:1). Con el #FF6F3C anterior se quedaba
   en 2,77:1 e incumplía. */
.bxm-comunidad-btn {
	background-color: var(--wp--preset--color--formulario, #C94A0E);
	color: #FFFFFF;
	border: 0;
	border-radius: 12px;
	padding: 14px 18px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 800;
	line-height: normal;
	width: 100%;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 4px 6px rgba(0, 0, 0, .05);
	/* Sin transición: el CTA no se anima (decisión del usuario, 14-oct-2026). */
}

/* Sin efecto al pasar el mouse (decisión del usuario, 14-oct-2026): el botón queda igual
   en hover. Antes subía 2px (`translateY(-2px)`), oscurecía el fondo a #E85F2B y agrandaba
   la sombra, animado en .3s. Solo se conserva el foco por TECLADO, que el mouse no ve. */
.bxm-comunidad-btn:focus-visible {
	outline: 2px solid #0078BF;
	outline-offset: 2px;
}

.bxm-comunidad-btn:disabled {
	opacity: .7;
	cursor: default;
}

.bxm-comunidad-aviso {
	font-size: 12px;
	font-weight: 600;
	margin: 0;
	padding: 0;
	border-radius: 6px;
	line-height: 1.4;
}

.bxm-comunidad-aviso:not(:empty) { padding: 8px; }
.bxm-comunidad-aviso.es-ok { background-color: #DEF7EC; color: #0E6251; }
.bxm-comunidad-aviso.es-error { background-color: #FDE8E8; color: #B91C1C; }

/* El bloque de tracción es ahora un `wp:paragraph` NATIVO (antes `wp:html` con 4 estilos en
   línea, todos redundantes porque su CSS ya estaba aquí). Sin margen propio: la separación
   la gobierna el `gap` del sidebar. */
.bxm-sidebar .cta-traccion {
	font-size: 0.9rem;
	color: #7A7A7A;
	line-height: 1.4;
	margin: 0;
}
.bxm-sidebar .cta-traccion a { color: var(--wp--preset--color--enlace); font-weight: 700; text-decoration: none; }
.bxm-sidebar .cta-traccion a:hover { text-decoration: underline; }

/*
   BXM — EL SIDEBAR SE ESTIRA A LA ALTURA DEL CONTENIDO
   En producción el panel del sidebar es tan alto como el artículo
   (align-items: stretch). Sin esto el panel se corta a la altura de
   su propio contenido y se ve un borde blanco cortado.
*/
.bxm-single-article,
.bxm-archive-content,
.bxm-sidebar-col {
  align-self: stretch;
}

/* El panel del sidebar ocupa toda la altura de su columna.
   CONSOLIDADO 18-sep-2026: `.bxm-sidebar` tenia CUATRO reglas en la hoja (su `padding:
   1.5rem 0` original del bloque SIDEBAR, la del reparto 65:35, la de `position: static`
   y esta). Ahora es una sola, acá. Donde chocaban gana el valor que ya mandaba: `padding:
   0` (no `1.5rem 0`), `gap: 20px`, `position: static`, `top: auto`. */
.bxm-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: static;
  top: auto;
  padding: 0;
  flex: 1 1 auto;
  height: auto;
  min-height: 100%;
}

/* El contenido del sidebar NO se estira: se queda arriba */
.bxm-sidebar > * { flex: 0 0 auto; }

/* La columna de contenido también es un panel que llega al fondo.
   CONSOLIDADO 18-sep-2026: `.bxm-single-article, .bxm-archive-content` tenia TRES reglas
   con `display`/`flex` (esta, la del reparto 68:32 y la de la medida de lectura). Ahora es
   una sola, en la del final. */
.bxm-single-article > * { flex: 0 0 auto; }

/*
   BXM — REPARTO DE COLUMNAS Y MEDIDA DE LECTURA (híbrido)
   Contenedor 1320px (el 1400 dejaba la lectura en 98 CPL).
   Proporción 68:32 → sidebar 336px útiles (el estándar ~300-350px).
   El texto se acota a una medida de lectura propia (ver la regla de abajo).
   Poppins es ancha: 8.03px por carácter (medido con el texto ya renderizado).
   El panel de contenido conserva su ancho para que el layout no se
   vea estrecho; el aire sobrante queda alrededor del texto.
*/
/* CONSOLIDADO 18-sep-2026: `.bxm-single-article, .bxm-archive-content { flex: 1 1 68%;
   min-width: 0 }` vivia aca. El selector estaba tres veces; ahora es una sola, al final
   del bloque (donde gana su `flex: 1 1 640px`). */
/* .bxm-sidebar-col { flex: 0 0 32% } se ELIMINA: quedaba pisada por la regla
   anclada `.bxm-...-layout > .bxm-sidebar-col { flex: 0 1 437px }` de más abajo
   (0,2,0 contra 0,1,0). Nunca llegaba a aplicarse. */

/* La medida de lectura: el texto se acota y se centra en su columna.
   674px con Poppins (8.03px/carácter medido) = ~84 CPL.

   ⚠️ DECISIÓN CONSCIENTE, NO UN DESCUIDO — no "corregir" sin consultar.
   84 CPL supera el rango cómodo de libro (55-75; óptimo 66), y se mantiene
   a propósito:
     1. Producción está en 87 CPL, así que este valor YA es una mejora.
     2. El rango 55-75 se definió para papel sin scroll; aquí hay
        line-height 1.5 y párrafos cortos con subtítulos frecuentes.
     3. Se validó visualmente con el cliente.
   Se probó 602px (75 CPL, el tope del rango) y el resultado era MÁS ANGOSTO
   que los 624px originales, que era justamente el problema a resolver:
   cumplir la cifra empeoraba el resultado.

   Para 75 CPL el ancho sería 602px · para 80 CPL, 642px · para 66 CPL, 530px.

   La regla :has() de abajo LIBERA este tope en los exámenes de Evalúa:
   ahí no se lee texto corrido, se opera una interfaz, y acotarla
   reflowaría las preguntas y aumentaría el scroll vertical. */
.bxm-post-content {
  /* CONSOLIDADO 18-sep-2026: la tipografia del cuerpo vivia en una PRIMERA regla
     `.bxm-post-content` arriba (con el resto del single). Se fusiona acá porque el
     `@media (max-width: 1024px)` de acá abajo —que la libera en pantallas chicas— va
     despues y sigue mandando; no hay nada en medio que toque el elemento. */
  font-size: 1rem;    /* 16px — escala oficial (antes 1.05em = 16.8px) */
  line-height: 1.5;   /* escala oficial (antes 1.75) */
  font-weight: 400;   /* escala oficial (el padre aplicaba 300) */
  color: #334155;
  max-width: 674px;
  margin-left: auto;
  margin-right: auto;
}
/* Los títulos sí pueden usar el ancho del panel (no son texto corrido).
   CONSOLIDADO 18-sep-2026: la tipografia (familia, 2.5rem, 700, azul de marca, 1.2) vivia en
   una PRIMERA regla `.bxm-single-title` arriba con el resto del single. Se fusiona acá y no
   alla porque entre las dos la unica regla que toca el elemento es el `@media (max-width:
   767px)` de la escala tipografica, que va DESPUES: fusionada arriba, le ganaba. */
.bxm-single-title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #0078bf;   /* azul de marca (pedido por Taylor) */
  line-height: 1.2;
  /* SIN margen propio: el blockGap (19.2px) es el mismo que separa el breadcrumb
     del titulo, asi que el hueco queda simetrico con el resto del articulo. */
  max-width: 100%;
}

/* En pantallas chicas el texto ocupa todo el ancho disponible */
@media (max-width: 1024px) {
  .bxm-single-article, .bxm-archive-content { flex: 1 1 100%; }
  /* La expansión del sidebar NO se declara aquí: perdía contra la regla anclada
     `.bxm-...-layout > .bxm-sidebar-col` de más abajo (misma especificidad 0,2,0
     pero ella va DESPUÉS). Se declara al FINAL del archivo, con la misma forma. */
  .bxm-post-content { max-width: 100%; }
}

/*
   BXM — LOS EXÁMENES DEL PLUGIN EVALÚA NO SE ACOTAN
   El examen NO es texto de lectura: es una interfaz. El plugin define su
   propio layout (max-width: 100%) y una tarjeta de pregunta mide ~716px
   (contexto 408 + enunciado 26 + opciones 282), justo el viewport.
   Acotarlo a 674px reflowaría el texto y AUMENTARÍA el scroll vertical,
   que es exactamente el problema que queremos evitar.
   Medido en producción: 729px de ancho, 1.6 pantallas de scroll total.
*/
.bxm-post-content:has(.bem-exam-breakout),
.bxm-post-content:has(.bem-examen-container),
.bxm-post-content:has(.bem-preguntas-container) {
  max-width: 100%;
}

/* Y el contenedor de la columna también le da todo el ancho disponible */
.bxm-single-article:has(.bem-examen-container) .bxm-post-content { max-width: 100%; }

/* Los shortcodes de plugin (calculadora, etc.) tampoco son texto corrido */
.bxm-post-content:has(.calculadora-nota),
.bxm-post-content:has(.bloque-comunidad-final) { max-width: 100%; }

/*
   BOX DE AUTOR EN EL SINGLE
   La regla de .author-box-card del archivo está anidada bajo
   .bxm-archive-content (es la del archive). Aquí se replica para
   el single, con la misma paleta y medidas.
*/

/* El bloque wp:avatar aplica className al DIV contenedor, no al <img>.
   El CSS de .author-photo apunta al div, así que la imagen se queda con
   el border-radius de WordPress (100px). Se apunta al <img> de dentro. */

/* El bloque wp:avatar trae su propio margen inferior. */
/*
   EXTRACTO DEL SINGLE
*/
/* Valores tomados del template de producción (Elementor 9055):
   Poppins, 1em, weight 400, line-height 1.5. SIN borde, sin color propio ni
   padding: producción no los define, así que el extracto hereda del theme. */
.bxm-single-excerpt {
	font-family: 'Poppins', sans-serif;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.5;
	/* SIN margenes propios a proposito: aqui habia `margin-top: 0 !important` y
	   `margin-bottom: 22px !important`. El primero anulaba el blockGap de WP, asi
	   que el extracto quedaba PEGADO al titulo (0px de hueco, y -4px medido sobre
	   el texto); el segundo se SUMABA al blockGap del bloque siguiente y daba 41px.
	   El ritmo vertical del articulo lo da el blockGap (1.2rem = 19.2px) para
	   todos los bloques por igual: declarar margenes propios solo lo desiguala. */
}

/*
   META DEL SINGLE — autor · última actualización · tiempo de lectura
   Valores tomados del template de producción (Elementor 9055):
   Poppins 0.9em weight 600 #626D71 capitalize · iconos 15px #0F4C81
   separación entre items 20px · icono↔texto 10px
*/
.bxm-post-info {
	/* VERTICAL: autor / última actualización / tiempo de lectura, uno por línea.
	   En horizontal los tres items pedían todo el ancho y empujaban los botones
	   de compartir a una segunda fila (quedaban apilados en vez de en columna). */
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 6px;
	margin: 0 0 10px;
	font-family: 'Poppins', sans-serif;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.4;
	color: #626D71;
	text-transform: capitalize;
}

.bxm-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.bxm-meta-ico {
	color: #0F4C81;
	flex: 0 0 auto;
}

.bxm-meta-texto {
	white-space: normal;
}

/* El bloque de shortcode de WP envuelve la salida en un div con su propio
   margen. Se neutraliza SOLO el envoltorio, no .bxm-post-info (que sí lleva
   los 10px de producción en su margen inferior).
   OJO: en la primera versión esta regla apuntaba también a .bxm-post-info y se
   anulaba a sí misma — el margen salía 0px en vez de 10px. */
.wp-block-shortcode:has(> .bxm-post-info) {
	margin: 0;
}

/*
   ÍNDICE DE CONTENIDO (TOC)
   Valores del template de producción (Elementor 9055):
   título Poppins 1em weight 600 #54595F · items Poppins 1em #333333
   hover/activo #0078BF · viñetas #143F5E · fondo #FFFFFF · borde #F3F3F3 3px
*/
.bxm-toc {
	background: #FFFFFF;
	border: 3px solid #F3F3F3;
	padding: 0;   /* el relleno lo pone el botón del índice: así todo el renglón es clicable */
	margin: 0 0 30px;
}

.bxm-toc-titulo {
	font-family: 'Poppins', sans-serif;
	font-size: 1em;
	font-weight: 600;
	color: #54595F;
	margin: 0;
	padding: 15px 20px;
}

.bxm-toc-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bxm-toc-item {
	font-family: 'Poppins', sans-serif;
	font-size: 1em;
	line-height: 1.5;
	margin: 0;
	/* 7px y no 4px: con la divisoria puesta, el renglón de 4px se veía apretado contra la línea */
	padding: 7px 0;
	/* Divisoria entre temas (pedido del usuario, 14-oct-2026). Antes: ninguna en escritorio y #eee
	   —casi invisible sobre blanco— en móvil. */
	border-bottom: 1px solid #d2d2d2;
	position: relative;
}

/* El último no lleva línea: el cierre de la lista ya lo da la caja del índice */
.bxm-toc-item:last-child {
	border-bottom: none;
}

/* Viñeta, como en producción (marker_view: bullets, color #143F5E) */
.bxm-toc-item::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #143F5E;
	margin-right: 10px;
	vertical-align: middle;
}

.bxm-toc-item a {
	color: #333333;
	text-decoration: none;
}

.bxm-toc-item a:hover,
.bxm-toc-item a:focus {
	color: var(--wp--preset--color--enlace);
	text-decoration: underline;
}

/* Los h3 anidados van sangrados respecto a los h2 */
.bxm-toc-item-h3 {
	padding-left: 22px;
}

/*
   ÍNDICE PLEGABLE (2026-10-14, pedido del usuario)
   El índice sale CERRADO y el lector lo abre con un clic. Lo emite el shortcode [bxm_toc] como
   <details>/<summary> nativos: funciona sin JavaScript, se abre con teclado (Tab + Enter) y
   anuncia su estado. El botón ES el título, así que «Índice de contenido» se lee igual que antes.
*/
.bxm-toc-plegable { display: block; }

.bxm-toc-titulo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	list-style: none;              /* sin el triángulo que pone el navegador */
}
.bxm-toc-titulo::-webkit-details-marker { display: none; }

/* La flecha la dibuja el botón y gira al abrir: ninguna fuente de iconos de por medio */
.bxm-toc-titulo::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-top: -4px;
	border-right: 2px solid #143F5E;
	border-bottom: 2px solid #143F5E;
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.bxm-toc-plegable[open] > .bxm-toc-titulo::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.bxm-toc-titulo:hover { background-color: #FBFBFB; }
.bxm-toc-titulo:focus-visible {
	outline: 2px solid var(--wp--preset--color--enlace);
	outline-offset: -3px;
}

.bxm-toc-cuerpo { padding: 0 20px 18px; }

/* Al imprimir, el índice sale completo y con su título: se quita solo la flecha, que en papel
   no significa nada. OJO: con el <details> cerrado, `display: block` NO alcanza — Chrome esconde
   el contenido con `content-visibility: hidden` en el pseudo-elemento ::details-content (medido
   imprimiendo a PDF el 14-oct-2026: la lista no aparecía en el papel). Hay que liberar los dos. */
@media print {
	.bxm-toc-titulo::after { display: none; }
	.bxm-toc-plegable::details-content { content-visibility: visible !important; }
	.bxm-toc-plegable > .bxm-toc-cuerpo { display: block !important; }
}

/*
   BOTONES DE COMPARTIR
   Producción: forma redondeada · color primario #FFFFFF
   secundario #143F5E · iconos 2.8em

   TAMAÑO A 3/4 (pedido de Taylor, 2026-09-13).
   Los valores del original eran 44px de círculo, 22px de icono y 12px de gap.
   En vez de repetir el número en tres sitios se declara UNA variable y todo lo
   demás se deriva con calc(), así el próximo ajuste es cambiar un solo valor.
   Al ser `em`-free (px) el tamaño no depende del contexto donde salga el bloque:
   el shortcode [bxm_compartir] se usa en el single Y en el archivo de categoría,
   y así mide igual en los dos.
*/
.bxm-compartir {
	--bxm-red-tam: 33px;      /* 3/4 de 44px */
	--bxm-red-ico: 16.5px;    /* 3/4 de 22px */
	--bxm-red-gap: 9px;       /* 3/4 de 12px */
	margin: 28px 0 10px;
	/* Fila única: la etiqueta ocupa su propia línea (`flex: 0 0 100%`) y los iconos
	   comparten línea con el botón de Google. El `gap` de aquí SUSTITUYE al margen
	   superior que el botón necesitaba cuando el contenedor era `display: block`. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;                /* el mismo valor que separaba antes cada pieza */
}

.bxm-compartir-label {
	font-family: 'Poppins', sans-serif;
	font-size: 1em;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	margin: 0;
	flex: 0 0 100%;      /* la etiqueta NO comparte fila: parte la fila en dos */
}

.bxm-compartir-redes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bxm-red-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bxm-red a,
.bxm-red button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--bxm-red-tam);
	height: var(--bxm-red-tam);
	border-radius: 50%;
	/* Tokens del tema: se re-tematizan cambiando la paleta en theme.json, sin tocar
	   este CSS. `--wp--preset--color--share` = #143F5E (token propio de BXM). */
	background: var(--wp--preset--color--share);
	color: var(--wp--preset--color--base);
	border: none;
	cursor: pointer;
	text-decoration: none;
	padding: 0;
	transition: opacity .2s ease, transform .2s ease;
}

.bxm-red a:hover,
.bxm-red button:hover,
.bxm-red a:focus,
.bxm-red button:focus {
	opacity: .85;
	transform: translateY(-2px);
}

.bxm-red svg {
	width: var(--bxm-red-ico);
	height: var(--bxm-red-ico);
}

/* Botón «Añadinos en Google News» (Google Preferred Sources) ──
   Es un DEEPLINK (https://www.google.com/preferences/source?q=<dominio>), una de
   las tres implementaciones que documenta Google. Se probó el botón JavaScript
   (el <script> de publisher.js + un <div google-add-preferred-source-btn>) y
   Google lo renderiza EN INGLÉS y no acepta forzar el idioma; el deeplink lleva
   el texto a mano en español. El SVG de Google va a color.
   @see https://developers.google.com/search/docs/appearance/preferred-sources
   Requisito: el dominio debe figurar en la herramienta de preferencias de Google
   (solo dominios y subdominios, no subdirectorios). */
.bxm-compartir-gnews {
	display: inline-flex;
	align-items: center;
	/*
	 * Aquí vivía `margin-block-start: 12px`, que NO era decorativo: compensaba el
	 * `gap` que se perdía cuando el botón envolvía dentro del shortcode.
	 *
	 * Ya no hace falta. El botón vuelve a compartir fila con los iconos y la
	 * separación la da el `gap: 12px` de `.bxm-compartir` — el MISMO valor que se
	 * había medido del `gap` del padre. Un solo mecanismo en vez de dos.
	 */
	margin-block-start: 0;
}

/* La fila envuelve: en móvil el botón de Google baja de línea sin romper nada. */
@media (max-width: 600px) {
	.bxm-red a,
	.bxm-red button {
		width: 30px;    /* un paso más chico en móvil, para que entren los 6 */
		height: 30px;
	}
	.bxm-red svg {
		width: 15px;
		height: 15px;
	}
}

/*
   ÍNDICE EN MÓVIL
   Producción lo hacía estático bajo 767px (no flotante) con
   sombra suave y esquinas redondeadas.
*/
@media (max-width: 767px) {
	.bxm-toc {
		/* Sin `!important`: la regla base `.bxm-toc` tiene la MISMA especificidad
		   (0,1,0) y esta va despues en el archivo, asi que gana por orden. Se probo
		   quitandolos en vivo: position/width/margin salen identicos (static · 637px
		   · 21px). Los `!important` eran herencia de un conflicto ya resuelto. */
		position: static;
		width: 100%;
		margin: 1.5em 0;
		box-shadow: 0 4px 10px rgba(0,0,0,.05);
		border-radius: 10px;
		overflow: hidden;
		padding: 0;
	}
	.bxm-toc-titulo {
		padding: 15px;
		margin: 0;
		background-color: #f9f9f9;
	}
	.bxm-toc-cuerpo {
		padding: 0;   /* en móvil cada renglón del índice ya trae su propio relleno */
	}
	.bxm-toc-item {
		padding: 8px 15px;
		border-bottom: 1px solid #d2d2d2;   /* mismo gris que en escritorio */
	}
	.bxm-toc-item:last-child {
		border-bottom: none;
	}
	.bxm-toc-item-h3 {
		padding-left: 32px;
	}
}

/*
   ESCALA TIPOGRÁFICA DE ENCABEZADOS
   Fuente: tabla «Fonts Size Optimizado» de Taylor.
   Base 16px en escritorio/tablet · 15px en móvil (<768px).
   Los valores de la tabla van en «em» pero corresponden a rem:
   2.5 × 16 = 40px y, en móvil, 1.75 × 15 = 26.25px. Usar rem evita
   que la escala se acumule por anidamiento.

   ⚠️ ANTES estos valores eran 1.6em / 1.3em: los había puesto YO al crear
   el child theme, por debajo de la escala oficial. Corregido aquí.
*/
.bxm-post-content h1 { font-family: 'Poppins', sans-serif; font-size: 2.5rem;   font-weight: 700; line-height: 1.2;  color: #192335; margin: 40px 0 16px; }
.bxm-post-content h2 { font-family: 'Poppins', sans-serif; font-size: 1.875rem; font-weight: 700; line-height: 1.25; color: #192335; margin: 36px 0 14px; }
.bxm-post-content h3 { font-family: 'Poppins', sans-serif; font-size: 1.5rem;   font-weight: 600; line-height: 1.3;  color: #192335; margin: 28px 0 12px; }
.bxm-post-content h4 { font-family: 'Poppins', sans-serif; font-size: 1.25rem;  font-weight: 600; line-height: 1.4;  color: #192335; margin: 24px 0 10px; }
.bxm-post-content h5 { font-family: 'Poppins', sans-serif; font-size: 1.125rem; font-weight: 500; line-height: 1.4;  color: #192335; margin: 20px 0 8px; }
.bxm-post-content h6 { font-family: 'Poppins', sans-serif; font-size: 1rem;     font-weight: 500; line-height: 1.5;  color: #192335; margin: 18px 0 8px; }

/*
   BASE TIPOGRÁFICA Y ESCALA EN MÓVIL
   La tabla define dos bases: 16px en escritorio/tablet y 15px en móvil.
   Al cambiar la base, toda la escala en rem se recalcula sola — pero la
   tabla además define proporciones distintas en móvil (h1 2.2 en vez de 2.5),
   así que se declaran explícitamente.
*/
html {
	/* CONSOLIDADO 18-sep-2026: `scroll-padding-top` vivia en un SEGUNDO `html` mas abajo.
	   Se fusiono ACA porque entre los dos hay un `@media (max-width: 767px)` que baja el
	   `font-size` a 15px: la fusionada de abajo pisaba ese 15px (medido: la escala en rem
	   de movil se iba a 16). Este es su lugar. */
	font-size: 16px;
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--bxm-header-h, 88px) + 24px);
}

@media (max-width: 767px) {
	html { font-size: 15px; }

	.bxm-post-content h1 { font-size: 2.2rem;  font-weight: 700; line-height: 1.2; }
	.bxm-post-content h2 { font-size: 1.75rem; font-weight: 700; line-height: 1.25; }
	.bxm-post-content h3 { font-size: 1.4rem;  font-weight: 600; line-height: 1.3; }
	.bxm-post-content h4 { font-size: 1.2rem;  font-weight: 600; line-height: 1.4; }
	.bxm-post-content h5 { font-size: 1.1rem;  font-weight: 500; line-height: 1.4; }
	.bxm-post-content h6 { font-size: 1rem;    font-weight: 500; line-height: 1.5; }

	.bxm-single-title { font-size: 2.2rem; line-height: 1.2; }
}

/*
   AUTHOR BOX — valores LITERALES del template de producción
   Copiados de `custom_css` del widget del author box en el JSON del
   template Elementor 9055 (single-post-9055.json). NO son una
   interpretación: son el CSS que corre en producción hoy.

   ⚠️ La versión anterior de este bloque tenía los valores del author box
   de la plantilla de ARCHIVO (fondo #F5F7FA, padding 20px) — que son
   distintos de los del SINGLE. Ver JERARQUIA... / AUTHOR-BOX-AUDITORIA.
*/
.author-box-card {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-top: 5px solid #0078bf;
	border-radius: 15px;
	padding: 35px;
	margin: 40px 0;
	box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
.author-box-card .author-content-wrapper {
	/* Ya estaba anclado a `.author-box-card`; los `!important` sobraban: (0,2,0) ya
	   gana al blockGap de WP `.is-layout-flow > *` (0,1,0). Comprobado en vivo
	   inyectando la misma hoja SIN ellos: el resultado es identico. */
	display: flex;
	align-items: center;
	gap: 35px;
}
.author-box-card .author-text {
	flex: 1;
	/* SIN `!important`: el ancla `.author-box-card` da (0,2,0) y el blockGap de WP
	   es (0,1,0), asi que gana limpio. Era el otro motivo de los !important. */
	margin-top: 0;
}
.author-box-card .author-label {
	display: block;
	font-size: 13px;
	color: #666;
	margin-bottom: 5px;
	font-weight: 500;
	line-height: 1.65;   /* producción: 21.45px */
}
.author-box-card .author-title {
	font-size: 22px;
	color: #143f5e;
	font-weight: 800;
	line-height: 1.2;    /* producción: 26.4px */
	margin: 0 0 10px 0;
}
.author-box-card .author-bio {
	font-size: 15px;
	line-height: 1.6;
	color: #444;
	margin-top: 0;
	margin-bottom: 15px;
}
.author-box-card .author-cta-link {
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--enlace);
	text-decoration: none;
	line-height: 1.65;             /* producción: 24.75px */
	margin-top: 0;
	transition: all 0.2s ease;     /* producción tiene transición */
}
.author-box-card .author-cta-link:hover {
	color: #005a91;                /* producción: rgb(0,90,145) */
	transform: translateX(5px);    /* desplazamiento hacia la derecha */
}

/* El contenedor del avatar: en producción es `.author-avatar-container`
   (120px, círculo, borde claro). Aquí el bloque nativo `wp:avatar` genera
   `div.wp-block-avatar`, así que se aplica el MISMO tratamiento a ese
   contenedor para reproducir el círculo y el tamaño. */
.author-box-card .wp-block-avatar {
	flex-shrink: 0;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid #f9fbfd;
	box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.author-box-card .wp-block-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;   /* el círculo lo hace el contenedor, no la imagen */
}

/* Responsive móvil del author box — del custom_css del template.
   En móvil la foto pasa arriba, centrada, y el texto se centra. */
@media (max-width: 767px) {
	.author-box-card .author-content-wrapper {
		flex-direction: column;
		text-align: center;
	}
	.author-box-card .wp-block-avatar {
		margin: 0 auto 15px auto;
	}
}

/*
   LAYOUT DE DOS COLUMNAS — mínimo necesario
   El layout lo gobierna WordPress desde los BLOQUES (templates):
     · flex + flexWrap: wrap  → apila las columnas cuando no caben
     · blockGap: 20px         → separación
     · align: wide            → ancho de 1320px (wideSize del theme.json)
   Por eso aquí NO se repiten display/flex-wrap/gap/max-width ni @media:
   si se declararan, competirían con el bloque y ganaría el que esté más
   abajo en el archivo (fue justo el bug de los 48px en móvil).
   Solo queda lo que el bloque no puede expresar: la PROPORCIÓN de columnas.
*/
.bxm-single-article,
.bxm-archive-content {
	/* CONSOLIDADO 18-sep-2026: el selector tenia tres reglas (el `display: flex`/
	   `flex-direction` del estirado, el `flex: 1 1 68%` del reparto 68:32 y esta).
	   Ahora es una sola, acá, con la union: gana `flex: 1 1 640px` sobre el 68%. */
	display: flex;
	flex-direction: column;
	flex: 1 1 640px;    /* crece; si no cabe junto al sidebar, salta de línea */
	min-width: 0;       /* permite ceder espacio al sidebar */
}

.bxm-single-layout > .bxm-sidebar-col,
.bxm-archive-layout > .bxm-sidebar-col {
	flex: 0 1 437px;
	min-width: 280px;
}

/*
   FILA «DATOS + ACCIONES» DEL SINGLE
   Agrupa en dos columnas lo que antes eran bloques sueltos:
     · izquierda: autor, última actualización, tiempo de lectura
     · derecha:   botones de compartir + «Añadir como fuente en Google»
   El contenedor es un wp:group con flexWrap: wrap, así que si las dos
   columnas no caben (móvil) se apilan solas — sin @media.
*/
.bxm-meta-datos {
	/* flex-grow DEBE ser 0: con `1 1 auto` el bloque se estiraba a todo el ancho,
	   ocupaba la línea completa y empujaba los share abajo. */
	flex: 0 1 auto;
	max-width: 400px;
	/* En el DOM el bloque de compartir va PRIMERO (así lo escribe la plantilla). El orden visual
	   lo da `order`, y va aquí —en la base, no en la @media— para que rija en TODOS los anchos:
	   en móvil, donde las dos columnas se apilan, los datos salen arriba (pedido del usuario,
	   14-oct-2026). */
	order: 1;
}

.bxm-meta-share {
	/* `flex-basis` acotado a 360px para MÓVIL. El artículo útil mide 783px y la
	   columna de datos hasta 400px: si esta reclamara sus 402px en pantallas
	   estrechas, el padre (flex con wrap) apilaría mal y podría desbordar. */
	flex: 1 1 300px;
	max-width: 360px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	order: 2;   /* después de los datos, también en móvil */
}

/*
   ESCRITORIO: DOS COLUMNAS (pedido del usuario, 14-oct-2026).
   ─────────────────────────────────────────────────────────────────────────────
   Izquierda los datos del artículo, una divisoria de 1px y a la derecha el bloque de compartir,
   todo en la MISMA fila. Antes había dos filas: al liberarle el tope de 360px, el bloque de
   compartir pedía 648px (rótulo + iconos + botón de Google calculados en una sola línea) y con
   los 355px de los datos más el gap de 24px no cabía en los 759px útiles, así que el contenedor
   —flex con wrap— apilaba: compartir arriba y los datos solos abajo (medido: dos filas, 238px).

   El reparto lo decide un `flex-basis` explícito, no el encogimiento: con `0 1 320px` el bloque
   de compartir entra en la misma fila y reparte sus tres piezas en tres líneas (rótulo 230px,
   iconos 201px, botón 193px — todas caben en los 294px de contenido, porque dentro de la columna
   el `flex-wrap` del propio bloque hace su trabajo). Medido con la entrada 2042: una sola fila de
   139px, datos 355px a la izquierda, compartir 347px a la derecha, divisoria de 1px a todo lo alto.

   El tope de 360px de móvil y tablet sigue igual: la @media solo añade el reparto en columnas, la
   divisoria y el aire del rótulo. El orden visual (datos antes que compartir) se declara en la base.
*/
@media (min-width: 1025px) {
	.bxm-meta-share {
		flex: 0 1 320px;
		max-width: none;
		align-self: stretch;              /* la divisoria va de arriba a abajo de la fila */
		border-left: 1px solid #d2d2d2;
		padding-left: 26px;
	}
	/* `.bxm-compartir` trae 28px de aire arriba: dentro de la columna ese aire dejaba la
	   divisoria sobresaliendo por encima del rótulo. */
	.bxm-meta-share .bxm-compartir {
		margin-top: 0;
		margin-bottom: 0;
	}
}

/*
   AIRE ENTRE LOS DOS BLOQUES EN MÓVIL Y TABLET (pedido del usuario, 14-oct-2026).
   ─────────────────────────────────────────────────────────────────────────────
   Apilados, la distancia entre el último dato y el rótulo de compartir medía 62px y se veía
   suelta: 10 del margen de abajo de `.bxm-post-info`, 24 del `gap` que WordPress le pone al
   grupo y 28 del aire de arriba de `.bxm-compartir` — este último sobra en móvil, donde la
   columna no comparte fila con nadie. Repartido en 0 + 18 + 14 = 32px los dos bloques siguen
   claramente separados y la fila baja de 273px a 243px (medido, entrada 2042).
   Los selectores llevan dos clases para ganarle a las reglas base sin `!important`: el `gap` del
   grupo lo escribe WordPress en línea como `.wp-container-core-group-is-layout-<hash>{gap:24px}`,
   que es (0,1,0).
*/
@media (max-width: 1024px) {
	.bxm-meta-datos .bxm-post-info { margin-bottom: 0; }
	.bxm-single-article .bxm-meta-acciones { gap: 18px; }
	.bxm-meta-share .bxm-compartir { margin-top: 14px; }
}

/* El botón de «fuente preferida en Google».
   Valores literales del custom_css del widget en el template 9055. */

.google-source-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 9px 15px;
	background: #f3f3f3;
	border: 1px solid #dadce0;
	border-radius: 8px;
	text-decoration: none;
	font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
	color: #3c4043;
	font-weight: 500;
	font-size: 14px;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	max-width: 100%;
	white-space: nowrap;
}

/* El bloque del botón de Google es un `wp:html` dentro del grupo flex. WordPress le
   inyecta `margin-block-start` (19.2px = --wp--style--block-gap) con `.is-layout-flow > *`,
   especificidad (0,1,0). Una clase suelta EMPATA y pierde por orden de carga, así que se
   sube a (0,2,0) anclando al contenedor. NO usar `!important`: la especificidad resuelve. */
/* El botón de Google ya no es hijo directo de .bxm-meta-share: vive dentro del
   shortcode [bxm_compartir], en .bxm-compartir-gnews. Aquí solo se le da el
   `inline-flex` que necesita para alinear el icono con las dos líneas de texto. */
.bxm-meta-share .google-source-wordpress {
	display: inline-flex;
}

.google-source-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
	border-color: #4285F4;
}

.google-icon {
	flex-shrink: 0;
	display: flex;
}

.google-source-btn .btn-text {
	line-height: 1.3;
	text-align: left;
}

.google-source-btn .btn-text small {
	font-size: 12px;
	color: #5f6368;
	font-weight: 400;
}

@media (max-width: 767px) {
	.google-source-btn {
		padding: 10px 16px;
		font-size: 13px;
	}
	.google-source-btn .btn-text small {
		font-size: 11px;
	}
}

/* Sticky del CTA de membresía ──
   El CTA es el último elemento del sidebar y es `sticky` con `top: calc(header + 24px)`.
   NO necesita espaciadores ni padding añadidos: el sidebar se estira hasta la altura del
   artículo (`min-height: 100%`), así que el sticky acompaña TODO el contenido.

   Medido: el artículo termina de leerse en scroll y=5057 y el CTA se despega en y=5360
   (303px después), porque ahí ya se agotó el sidebar y empieza el footer. Es el
   comportamiento correcto.

   ⚠️ NO añadir `padding-bottom` al sidebar para «dar recorrido»: el sticky no puede pasar
   el CONTENT-BOX del padre, así que el padding RESTA recorrido. Y un `::after` tampoco
   aporta nada mientras el `min-height: 100%` sea mayor que el contenido. */

/*
 * RELACIONADOS — «Continúa con tu preparación:»
 * --------------------------------------------------------------------------
 * Réplica del widget `posts` de Elementor del main. Todos los valores salen de
 * MEDIR producción y de leer los settings del JSON, no de copiar el CSS de
 * Elementor:
 *   tarjeta   → fondo #FFF, borde 1px #E0E0E0, radio 15px, sin sombra
 *   imagen    → ratio 16:9 (el contenedor mide 335x167 en el main)
 *   texto     → padding 20px, columna con `space-between` (así el CTA cae al
 *               fondo y todas las tarjetas se leen igual)
 *   orden     → título · fecha · extracto · CTA   <- el orden REAL del main
 *   título    → 1.125rem / w600 / #1A1D1F / lh 1.3
 *   fecha     → 0.775rem (12.4px) / w500 / rgb(25,25,25) / lh 1.5
 *   extracto  → 14px / w500 / #4B5563 / lh 1.5 / 20 palabras
 *   CTA       → 0.798rem (12.77px) / w600 / #0078BF  («Estudiar tema ->»)
 *   encabezado→ 1.5rem (24px) / w600 / #0F4C81
 *
 * La especificidad se resuelve anclando al contenedor, sin declaraciones
 * forzadas: el archivo no tiene ninguna añadida por este bloque.
 * ========================================================================== */

/* El ritmo vertical de este titulo NO se declara: lo aporta el blockGap de WP
   (`:root :where(.is-layout-flow) > * { margin-block: 1.2rem 0 }`), que es el
   mismo que separa todos los demas bloques del articulo.
   Declarar un margen propio aqui no funciona y ademas perjudica:
     - una clase suelta (0,1,0) EMPATA en especificidad con esa regla de WP y
       WP la aplica despues, asi que el valor propio se ignora en silencio; y
     - en flex los margenes NO colapsan: un `margin-bottom` propio se SUMA al
       `margin-top` del grid y daba 39px donde produccion mide 20px.
   Medido en produccion: 20px entre el titulo y el grid -> el blockGap de WP
   (19.2px) lo reproduce sin escribir nada. */
.bxm-relacionados-titulo {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.25;
	color: #0F4C81;
}

.bxm-relacionados-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* El `gap` NO se declara aqui a proposito: lo pone el bloque con
	   `style.spacing.blockGap` = var:preset|spacing|40 (30px, el valor de produccion).
	   Una declaracion propia en esta regla quedaba MUERTA: `:root :where(.is-layout-grid)`
	   de WP aplica `gap: var(--wp--style--block-gap)` y, como viene despues y empata en
	   especificidad, ganaba. Por eso el valor se cambia en el BLOQUE, no en el CSS. */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* la tarjeta se estira a lo alto de la fila y ordena su contenido en columna */
.bxm-rel-card.wp-block-group {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	border-radius: 15px;
}

/* la imagen ocupa el ancho y respeta el radio superior de la tarjeta */
.bxm-rel-card .bxm-rel-img {
	margin: 0;
}

.bxm-rel-card .bxm-rel-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* el bloque de texto empuja el CTA al fondo (equivale al space-between del main) */
.bxm-rel-card .bxm-rel-texto.wp-block-group {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1 1 auto;
	margin: 0;
	padding: 20px;
}

.bxm-rel-card .bxm-rel-titulo {
	margin: 0 0 6.6px;
}

.bxm-rel-titulo {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

.bxm-rel-titulo a {
	color: #1A1D1F;
	text-decoration: none;
}

.bxm-rel-titulo a:hover {
	color: var(--wp--preset--color--enlace);
}

.bxm-rel-card .bxm-rel-fecha {
	margin: 0 0 3.7px;
	font-size: 0.775rem;
	font-weight: 500;
	line-height: 1.5;
	/* El theme declara `:root :where(.wp-block-post-date) { color; font-size }`, que empata
	   en especificidad (0,1,0) con una clase suelta y gana por orden, pintando la fecha con
	   el azul oscuro del sitio y 13px. Anclando a `.bxm-rel-card` sube a (0,2,0) y gana. */
	color: rgb(25, 25, 25);
}

.bxm-rel-card .bxm-rel-extracto {
	margin: 0 0 4.4px;
}

.bxm-rel-card .bxm-rel-extracto p {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: #4B5563;
}

.bxm-rel-card .bxm-rel-cta {
	margin: 0;
	font-size: 0.798rem;
	font-weight: 600;
	line-height: 1.5;
	color: #0078BF;
	text-decoration: none;
}

.bxm-rel-card .bxm-rel-cta:hover {
	text-decoration: underline;
}

.bxm-rel-vacio {
	margin: 0;
	font-size: 0.95rem;
	color: #54595F;
}

/* A 1 columna por debajo de 767px — el MISMO breakpoint que produccion
   (medido: 768px da 2 columnas y 767px da 1).
   El selector va anclado a TRES clases a proposito: WP emite su propia regla
   `:root`-less `.wp-block-post-template-is-layout-grid[class*="columns-"]:not(.has-native-responsive-grid)`
   = (0,3,0) dentro de un `@media (max-width: 600px)`. Con una clase suelta
   (0,1,0) esta regla quedaba MUERTA y el grid pasaba a 1 columna recien a 600px,
   asi que entre 600 y 767 se veian DOS columnas donde produccion muestra UNA.
   Con (0,3,0) se EMPATA con la de WP y gana por ORDEN (style.css del child theme
   va despues del CSS del core). Sin `!important`. */
@media (max-width: 767px) {
	.bxm-single-article .bxm-relacionados .bxm-relacionados-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * DOS CORRECCIONES DE QA (informe del agente, 11-sep-2026)
 * ========================================================================== */

/* 1) TOC: las anclas aterrizaban DEBAJO del header sticky ──────────────
 * El header es `position: sticky` y mide 88px, asi que al pulsar un indice del
 * TOC el titulo destino quedaba en y=0 con el header por delante: el h3 entero
 * tapado y la navegacion inservible.
 *
 * Se corrige con `scroll-padding-top` en el elemento que scrollea (html), NO con
 * `scroll-margin-top` en cada titulo: una sola declaracion resuelve TODAS las
 * anclas del sitio (TOC, tablas de contenido, enlaces entrantes con #), y no hay
 * que mantenerla cada vez que se anade un encabezado.
 *
 * Lleva tambien la barra de administracion de WP, que es fixed y desplaza el
 * documento: sin ese termino, con sesion iniciada el destino volvia a quedar 32px
 * tapado (46px en movil). WP publica su altura en --wp-admin--admin-bar--height.
 * El margen de 24px es el mismo aire que lleva el sticky del sidebar.
 * ⚠️ CONSOLIDADO 18-sep-2026: esta declaracion se movio al `html` de la escala tipografica
 * (habia dos reglas `html`). No se vuelve a declarar aqui. */

/* 2) HEADER: desbordaba entre 600 y 768px ──────────────────────────────
 * El bloque `core/navigation` conmuta al menu de hamburguesa en un breakpoint
 * FIJO de 600px (no es configurable: issues abiertos en Gutenberg #34783 y
 * #49572). Entre 600 y 768 el menu horizontal ya no cabe junto al logo -el nav
 * mide ~570px y la pagina ~750- y como sus items son `white-space: nowrap` el
 * contenido desborda al nav y empuja el scrollWidth: hasta 110px de scroll
 * horizontal a 600px.
 *
 * El corte del header quedo alineado en 1270 en las tres cosas (menu, login y CTA).
 * ACA VIVIAN las dos @media que replicaban las reglas del core para mover ese
 * breakpoint (`(min-width:600px) and (max-width:1269px)` y `(min-width:1270px)`).
 * Con `overlayMenu:"always"` (OPCION A, bloque al final del archivo) el core agrega
 * `hidden-by-default` al contenedor y `always-shown` al boton, asi que los
 * selectores de esas replicas (`:not(.hidden-by-default)`, `:not(.always-shown)`) NO
 * MATCHEAN NINGUN ELEMENTO en ningun ancho ni en ningun estado del panel: quedaron
 * inertes y se borraron el 18-sep-2026.
 * PRUEBA: desactivadas en vivo desde el CSSOM, el valor computado fue identico en 7
 * anchos x 2 estados (cerrado/abierto) para el ☰, el contenedor, la ✕, los 3 items,
 * los campos, LOG IN, «Crear cuenta» y el desborde horizontal.
 * SI SE REVIERTE `overlayMenu:"always"`, hay que reponerlas: el corte de 1270 del
 * header depende de ellas en ese estado.
 * Por debajo de 600px no se toca nada: el comportamiento movil nativo ya es
 * correcto y sigue siendo el del core. */

/* MOVIL (GLOBAL): los contenedores con fondo propio llegan al borde.
   El `main` del single lleva la clase nativa `has-global-padding` (`--wp--style--root--padding-*` =
   clamp(30px, 5vw, 50px)), así que a 375px son 30px por lado: 60px de fondo gris alrededor del artículo más
   los 24px de padding interno, y el texto arrancaba a 54px (el gris ocupaba el 29% del ancho).
   Se sobrescribe LA MISMA VARIABLE que usa el core (no el `padding` a pelo ni quitando la clase): el
   mecanismo nativo sigue mandando, acá solo cambia su valor en móvil. En escritorio no se toca nada. El aire
   lateral lo sigue dando el padding interno de cada bloque blanco.
   ES GLOBAL A PROPÓSITO (clase del core, no `.bxm-single-main`): a 375px el ARCHIVE tenía el mismo defecto
   (60px de franja) y la home y /membresias/ también reciben el padding. Acotarlo al single habría dejado el
   resto roto. Detalle → sitio/NOTAS-CSS.md §8 */
@media (max-width: 1024px) {
/* ⚠️ ACOTADO A PROPÓSITO: antes esta regla era `.has-global-padding` a secas y anulaba el padding lateral
   raíz en TODA la web. El problema: `has-global-padding` NO es solo un padding — es también el mecanismo con
   el que WordPress hace escapar a un `alignfull` del padding, vía el margen negativo que aplica a sus hijos
   `alignfull`. Anular la variable apaga las dos cosas a la vez.
   Estas dos plantillas lo anulan porque su aire lo da la COLUMNA (`.bxm-archive-content` y
   `.bxm-single-article` llevan `padding: 24px`): ahí el padding raíz sería aire doble.
   EL RANGO ES TABLET Y MOVIL (<=1024px), no solo móvil: medido, a 1024px el padding raíz son 50px por lado
   y a 900px son 45px — en una pantalla de 800px eso es el 12% del ancho perdido en gris. Las columnas ya se
   apilan al 100% desde 1024px, así que el padding raíz no aporta nada ahí.
   Las páginas con caja blanca se sumaron después, con `:has()`. Detalle → sitio/NOTAS-CSS.md §11 */
	.bxm-archive-main.has-global-padding,
	.bxm-single-main.has-global-padding {
		--wp--style--root--padding-left: 0;
		--wp--style--root--padding-right: 0;
	}

/* PAGINAS CON CAJA BLANCA (`page.html`) Y LA FICHA DE PRODUCTO (`single-product.html`): el fondo
   llega al borde en tablet y móvil. La ficha entra por el mismo motivo que la página: su aire lo da la caja
   blanca (`.bxm-producto-caja`), no una columna, así que el padding raíz sería gris de sobra a los lados.
   Se distingue con `:has()` igual que la página, para no apagar el mecanismo de `alignfull` en plantillas que
   sí dependen de él. Detalle → sitio/NOTAS-CSS.md §11.
   A 375px el `main` lleva 30px por lado, así que la caja blanca (`.bxm-page-caja`) iba del 30 al 345 y se
   veían 30px de gris a cada lado. En el single eso no pasa porque su aire lo da la columna
   (`.bxm-single-article` con `padding: 24px`); la página no tiene columna, tiene la caja.
   POR QUE `:has()` Y NO `.bxm-page-main`: `page-inicio.html` usa LA MISMA clase y `bxm-page-main` no tiene
   ninguna regla propia. Anular la variable ahí apagaría también el margen negativo del que dependen los
   `alignfull` de /inicio/ (8, hoy aprobados). `:has(.bxm-page-caja)` distingue las dos plantillas por el
   único elemento que importa. Solo cambia el VALOR de la misma variable del core, en móvil, y solo en la
   plantilla que tiene caja. Detalle → sitio/NOTAS-CSS.md §9 */
	.bxm-page-main.has-global-padding:has(.bxm-page-caja),
	.bxm-producto-main.has-global-padding:has(.bxm-producto-caja) {
		--wp--style--root--padding-left: 0;
		--wp--style--root--padding-right: 0;
	}
}

/*
   ARCHIVE — anular el padding lateral raíz (igual que producción)
   WordPress aplica `--wp--style--root--padding-left/right` (clamp(30px,5vw,50px))
   a `.has-global-padding`. En el archive eso dejaba el layout en 1165px en vez
   de 1265: los 50px por lado le robaban 100px a la columna de contenido, y la
   tarjeta medía 628px contra los 748px de producción.
   Medido a 1280px: con esta regla la columna llega a 808px y la tarjeta a 748.
   Acotado a `.bxm-archive-main` para NO tocar el single ni la home, que ya están
   aprobados (el single mide 863px y coincide con producción).
*/
.bxm-archive-main.has-global-padding {
	--wp--style--root--padding-left: 0;
	--wp--style--root--padding-right: 0;
}

/*
   CALCULADORA DE NOTAS  (shortcode [bxm_calculadora])
   Portada desde Shortcoder (plugin que se elimina). El CSS venía en un
   <style> inline dentro del shortcode; aquí vive en la hoja del tema.
   Sin `!important`: todo es específico por clase y no compite con WP.
   El JS va encolado condicionalmente (ver functions.php) y usa
   addEventListener, NO `onclick` inline — Cloudflare Rocket Loader
   intercepta los onclick inline y así fue como la calculadora quedó
   muerta en producción (funciones undefined, contenedor en display:none).

   BORDE: mismo tratamiento que los demás bloques del sidebar
   (.bxm-comunidad y .bxm-cta-membresia): contorno de 1px en gris +
   filo superior de 5px en el celeste de marca. Antes tenía solo el
   contorno de las tarjetas del listado, que es otro patrón.
   El token es el del theme.json, no un color a mano.
*/
.calculadora-nota {
	background: #FFFFFF;
	padding: 25px;
	max-width: 100%;
	margin: 0 0 25px 0;
	font-family: inherit;
	border: 1px solid #E0E0E0;
	border-top: 5px solid var(--wp--preset--color--primary);
	border-radius: 15px;
	box-sizing: border-box;
}

.calculadora-nota .calculadora-titulo {
	color: #143f5e;
	font-size: 26px;
	font-weight: 800;
	margin-top: 0;
	margin-bottom: 25px;
	text-align: center;
	line-height: 1.2;
}

.calculadora-nota .campo { margin-bottom: 20px; }

.calculadora-nota label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #143f5e;
	font-weight: 700;
	margin-bottom: 8px;
	font-size: 14px;
}

.calculadora-nota label svg {
	width: 16px;
	height: 16px;
	stroke: #0078BF;
	stroke-width: 2;
	fill: none;
}

.calculadora-nota input {
	width: 100%;
	padding: 12px;
	border: 1px solid #E0E0E0;
	border-radius: 8px;
	font-size: 16px;
	transition: all 0.3s ease;
	box-sizing: border-box;
	background-color: #FCFCFC;
}

.calculadora-nota input:focus {
	outline: none;
	border-color: #0078BF;
	background-color: #FFFFFF;
}

.calculadora-nota .button-group { display: flex; gap: 10px; margin-top: 15px; }

.calculadora-nota button {
	background: #0078BF;
	color: #FFFFFF;
	border: none;
	padding: 14px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 8px;
	cursor: pointer;
	flex: 2;
	transition: background 0.3s ease;
}

.calculadora-nota button:hover { background: #005A91; }

.calculadora-nota .btn-limpiar {
	background: #F1F1F1;
	color: #666666;
	flex: 1;
}

.calculadora-nota .btn-limpiar:hover { background: #E5E5E5; color: #333333; }

.calculadora-nota .resultado {
	margin-top: 20px;
	padding: 15px;
	background: #F9FBFD;
	border-radius: 10px;
	text-align: center;
	border: 1px solid #E0E0E0;
	display: none;
}

.calculadora-nota .resultado.visible { display: block; }
.calculadora-nota .resultado.aprobado-border { border-left: 5px solid #2E7D32; }
.calculadora-nota .resultado.reprobado-border { border-left: 5px solid #C62828; }

.calculadora-nota .resultado .nota-final {
	font-size: 42px;
	font-weight: 800;
	color: #143f5e;
	margin: 5px 0;
}

.calculadora-nota .resultado .resultado-etiqueta {
	color: #0078BF;
	font-weight: 700;
	font-size: 13px;
}

.calculadora-nota .resultado .detalle {
	font-size: 13px;
	color: #666666;
}

.calculadora-nota .resultado .estado { margin-top: 10px; }

.calculadora-nota .mensaje-error {
	color: #C62828;
	font-size: 12px;
	margin-top: 5px;
	display: none;
}

/*
   EL PIE TAMPOCO LLEVA AIRE ARRIBA
   `:where(.wp-site-blocks) > *` le pone `margin-block-start: 1.2rem`
   a cada hijo de la raíz, y en el pie eso deja 19,2px entre el
   contenido y el footer. MEDIDO: `main` termina y el pie empezaba
   19px después, en las 4 plantillas (page, single, archive, search).

   No se puede quitar por atributo de bloque, probadas las dos vías:
     - `wp:template-part` NO acepta atributos de spacing: WP ignora su
       `style` y el margen lo impone igual el blockGap del contenedor.
     - `core/group` tampoco emite su PROPIO `margin` -- emite el
       `blockGap` de sus hijos, que es otra cosa. Medido: el grupo
       envoltorio seguía con 19,2px.

   Así que va con el mismo recurso que el `main` de arriba: anclar el
   selector. El `:where()` de WordPress es (0,0,0), así que basta (0,1,0).
*/

/*
   LA PÁGINA NO LLEVA MARGEN SUPERIOR
   WP le pone 19.2px de margen al `main` con la misma familia de reglas
   que afecta a los `li` del listado: `.wp-site-blocks > *` hereda el
   blockGap del theme (1.2rem). MEDIDO: el header pegajoso termina en
   y=88 y el `main` empezaba en y=107 -> 19.2px de aire que NO existe en
   producción (allí el contenido arranca pegado al header).
   Se anula en los `main` del sitio (archive, single y la ficha de producto): los tres deben
   arrancar pegados al header, sin la banda de fondo que deja el margen del core. A la ficha no la agarraba
   ni `.wp-site-blocks > main` porque su `main` viene ANIDADO dentro del envoltorio de WooCommerce. La ficha se
   sumó el 20-sep-2026; medido: hueco header→caja 0px en 390, 768 y 1440. El selector
   incluye `.wp-site-blocks > main` para ganar por orden a la regla del
   core, que es (0,1,0); `main.bxm-archive-main` es (0,1,1) y gana.
   Sin subir a !important: se ancla el selector. */
.wp-site-blocks > main,
main.bxm-archive-main,
main.bxm-single-main,
main.bxm-producto-main,
.wp-site-blocks > .wp-block-group:has(> .wp-block-template-part) {
  margin-block-start: 0;
}

/*
   SIDEBAR EN TABLET: debe EXPANDIRSE a todo el ancho
   En tablet (<=1024px) las columnas se apilan, pero el sidebar se quedaba
   clavado en sus 437px en vez de ocupar el ancho completo.
   CAUSA: la regla que lo fija es
       .bxm-single-layout > .bxm-sidebar-col,
       .bxm-archive-layout > .bxm-sidebar-col { flex: 0 1 437px; min-width: 280px }
   — dos clases = (0,2,0) — y estaba la ÚLTIMA del archivo. Las reglas del
   @media (max-width:1024px) que intentaban expandirlo eran (0,1,0) y perdían
   por especificidad, o (0,2,0) pero ANTES y perdían por ORDEN.
   Comprobado en el CSSOM a 768px: de 7 reglas que matcheaban, el computado
   devolvía `flex: 0 1 437px` y ni una de las de expansión llegaba a aplicar.
   FIX: la misma forma de selector (0,2,0) dentro del @media y AL FINAL del
   archivo, así gana por orden. Sin `!important`.
   EL BREAKPOINT ES 1200, NO 1024. Medido en el navegador, con 1024 quedaban dos
   huecos: entre ~1090 y ~1250px las dos columnas ya no caben (640 del contenido
   + 437 del sidebar + 20 de gap + 100 del padding del main = ~1200) y el layout
   DESBORDABA hasta 72px; y entre 1024 y 1090 el sidebar se apilaba pero seguía
   clavado en 437px sin expandir. Con 1200 los dos casos quedan cubiertos.
   `min-width: 0` es necesario: con `min-width: 280px` heredado, en pantallas
   muy angostas el sidebar no podría encogerse por debajo de 280px.
*/
@media (max-width: 1200px) {
  .bxm-single-layout > .bxm-sidebar-col,
  .bxm-archive-layout > .bxm-sidebar-col {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
}

/*
   HEADER EN MÓVIL — compacto + CTA «Crear cuenta»
   Referencia: Pinnacle en móvil, barra de ~56-60px con las acciones de
   cuenta siempre visibles.
   MEDIDO antes del cambio a 375px: el header medía 88px porque el logo
   mide 60px de alto y el inner suma 14px de padding arriba y abajo
   (14 + 60 + 14 = 88). Y el login se oculta a <=1270px, así que en móvil
   y tablet el header se quedaba SIN ninguna acción de cuenta.
   Con el logo a 32px: 14 + 32 + 14 = 60px, que es la referencia.
   `--bxm-header-h` tiene que bajar con él: la usan el sticky del TOC
   (top y scroll-padding-top) y, si no, el ancla queda 28px corrida.
   El CTA es un `wp:button` normal: hereda fondo y texto de
   styles.elements.button del theme.json (--cta #ffde00 / --secondary),
   sin CSS de color propio.
*/

/* El CTA solo aparece cuando el login NO está visible (<=1270px), para no
   duplicar el mismo botón en escritorio, donde el login ya lo trae.
   OJO CON LA ESPECIFICIDAD: escrito como `.bxm-header-cta` suelto (0,1,0) el
   `display: none` PIERDE contra el `.wp-block-buttons { display: flex }` que
   WordPress emite para el bloque, que es (0,1,0) pero va DESPUÉS en el <head>.
   Medido con el selector suelto: en escritorio el CTA se veía, el botón se
   estiraba a 88x362 y el header pasaba de 88px a 390px, desbordando 75px.
   Por eso va anclado a `.bxm-header .bxm-header-cta` = (0,2,0). */
.bxm-header .bxm-header-cta { display: none; }

/* LOG IN compacto (patrón Pinnacle en móvil) ---
   MEDIDO en pinnacle.com a 390px: LOG IN 64x28 · borde 1px blanco · fondo transparente ·
   texto 12px/700 blanco · radio 2px · padding 7px 12px, y al lado el botón de registro
   relleno. Se copian las MEDIDAS (alto, tipografía, padding, contorno) pero el radio
   queda en el de BXM (10px, el mismo del «Crear cuenta») para que los dos hagan pareja:
   el radio de 2px es la identidad de ellos, no la nuestra.
   Aparece exactamente cuando el login inline desaparece (<=1270px), igual que el CTA. */
.bxm-header .bxm-header-login { display: none; }

@media (max-width: 1270px) {
  .bxm-header .bxm-header-cta { display: flex; }

  .bxm-header .bxm-header-login {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    align-self: center;
    padding: 7px 12px;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    white-space: nowrap;
    cursor: pointer;
  }
  .bxm-header .bxm-header-login:hover,
  .bxm-header .bxm-header-login:focus { background: rgba(255, 255, 255, .12); }

  /* El `wp:buttons` es flex y su enlace se estira a toda la línea: medido, el
     botón salía de 207x62 en vez de ~110x34 y en 885px empujaba el header a
     348px de alto (porque ahí el header ya hace `flex-wrap: wrap`).
     El tamaño real lo fija el enlace, no el contenedor. */
  .bxm-header .bxm-header-cta .wp-block-button,
  .bxm-header .bxm-header-cta .wp-block-button__link {
    flex: 0 0 auto;
    align-self: center;
  }
  .bxm-header .bxm-header-cta .wp-block-button__link {
    padding: 8px 14px;
    font-size: 12.5px;
    line-height: 1.2;
  }
}

@media (max-width: 768px) {
  /* Logo a 32px */
  .bxm-header .bxm-logo img,
  .bxm-header .bxm-logo .custom-logo {
    width: auto;
    height: 32px;
    max-height: 32px;
  }
  /* BARRA DE 56px — patrón Pinnacle (medido en pinnacle.com: 390x56).
     Antes era 14 + 32 + 14 = 60 y, tras arreglar el ☰, 72. Acá el padding vertical del
     inner va a 0 y la altura la fija el ☰ de 56x56: así la barra queda EXACTAMENTE en 56
     y el área táctil de la hamburguesa es toda la altura, como en Pinnacle. */
  .bxm-header .bxm-header-inner {
    padding-top: 0;
    padding-bottom: 0;
    gap: 8px;
  }
  /* ☰ de 56x56: toda la altura de la barra. El icono sigue midiendo 24px; los 16px de
     padding por lado son el área táctil (Pinnacle: 56x56 con pad 7 y el resto del
     contenedor). WCAG 2.2 pide 24x24 como mínimo legal y recomienda 44x44: acá son 56. */
  .bxm-header .wp-block-navigation__responsive-container-open,
  .bxm-header .wp-block-navigation__responsive-container-close {
    width: 56px;
    height: 56px;
    padding: 16px;
  }
  /* Los DOS botones del par con las mismas medidas (Pinnacle: 28px de alto, 12px/700,
     padding 7px 12px). Uno con contorno y el otro relleno, como en la referencia. */
  .bxm-header .bxm-header-cta .wp-block-button__link,
  .bxm-header .bxm-header-login {
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    min-height: 28px;
  }
  /* El `wp:buttons` es flex y estira el enlace a la altura de la línea: en
     desktop el botón medía 207x61 en vez de ~110x34. El ancho/alto real lo
     fija el enlace, no el contenedor. */
  .bxm-header .bxm-header-cta .wp-block-button,
  .bxm-header .bxm-header-cta .wp-block-button__link {
    flex: 0 0 auto;
    align-self: center;
  }
  /* El TOC y los anclajes del sticky usan esta variable: baja con la barra. */
  :root { --bxm-header-h: 56px; }
}

/*
   PÁGINA 404  (templates/404.html)
   El 404 reutiliza clases que ya existen para el título, el texto y el
   buscador, así que aquí va SOLO lo que es propio de esta página:

   1. El contenedor .bxm-404 necesita pegar sus hijos más que el resto del
      sitio. El tema aplica un blockGap de 19.2px entre bloques y en una
      página de error, que es corta y se lee de un tirón, ese aire la
      desarma: el título, el texto y el buscador tienen que leerse como un
      bloque único. Por eso gap 14px y no 19.2px.

   2. .bxm-404-subtitulo es un h2 que NO es un título de sección real (es el
      rótulo de la lista de materias). No lleva el azul de marca ni el tamaño
      de los h2 del contenido: va chico y en el gris de los encabezados del
      sidebar (#54595F), que es el mismo tratamiento que ya usan los títulos
      de los bloques laterales. Así no compite con el H1 de la página.

   3. La lista de materias sale del bloque NATIVO core/categories, que imprime
      un <ul> con sus <li>. WordPress le pone viñetas y un padding-left por
      defecto; acá se quitan porque la lista funciona mejor como columnas de
      enlaces (que es como se lee una lista de materias) y además el padding
      por defecto desalineaba la lista respecto del H1 y del buscador.
*/
.bxm-404 {
  gap: 14px;
}
.bxm-404-subtitulo {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05em;
  font-weight: 600;
  color: #54595F;
  line-height: 1.3;
  margin: 10px 0 0;
}
.bxm-404-materias ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.bxm-404-materias a {
  color: #3A85AF;
  text-decoration: none;
}
.bxm-404-materias a:hover {
  color: var(--wp--preset--color--enlace);
  text-decoration: underline;
}

/*
   MOCKUP — PORTADA (secciones 1 a 3)
   Reconstruido de los valores MEDIDOS en producción (Elementor), antes de que
   ese sitio se elimine. Los números no son elegidos: salen del navegador.

   ⚠️ Las tres secciones van con `align:"full"` porque en producción los CINCO
   fondos van borde a borde (medido a 1600px: w=1585 · left=0). Lo que cambia
   entre secciones es el ancho del CONTENIDO, no el fondo.
   Funciona gracias a `page.html`: main constrained + post-content alignfull.

   Sin `!important`: todo va por clase propia y no compite con el core.
*/

/* 0. EMPALME ENTRE SECCIONES: sin franja gris ──────────────────────────
   `wp-site-blocks` aplica el `blockGap` global (1.2rem = 19,2px) como
   `margin-block-start` a cada hijo del contenedor de contenido. Entre dos
   secciones full-bleed de color distinto eso deja una banda de 19,2px por la
   que se ve el fondo del body (#F3F3F3). Medido: 4 bandas, una por empalme
   (hero→pasos, pasos→rendimiento, rendimiento→social, social→newsletter).
   El hero no la tenía porque es el primer hijo y el core lo exime con
   `> :first-child`. Las secciones de color van a ras, como en el mockup.
   (0,2,0) le gana a la regla del core, que es (0,1,0). */
.bxm-page-content > .alignfull { margin-block-start: 0; }

/* 1. HERO ──────────────────────────────────────────────────────────────
   Producción: flex column · align-items flex-start · gap 20px
   ⚠️ MEDIDO 13-sep-2026: el hero de producción tiene **min-height 675px**, no 750
   como decía este comentario. Nuestro `.bxm-hero` sigue con 750 → queda **75px
   más alto**. El valor de 750 se puso creyendo que era el del mockup; hay que
   decidir si se baja a 675 para igualarlo.
   Fondo: imagen + overlay. El overlay NO es decorativo: el texto es blanco y
   sobre la foto sin oscurecer no se lee. El valor del velo es 0.292 — o sea el
   producto del color de producción (.73) por su `opacity: .4` (ver abajo). */
.bxm-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	/* ALTO DEL HERO (19-oct-2026, pedido de Taylor): 441px = 49vh a 900 de alto.
	   Se expresa como `max(441px, 49vh)`: manda el 49vh del viewport y 441px es el
	   piso, así en pantallas bajas no queda por debajo del pedido y en pantallas
	   altas crece en la misma proporción. Antes eran 750px clavados. */
	min-height: max(441px, 49vh);
	/* ⚠️ LA IMAGEN YA NO VA ACÁ. Este `background-image` se quitó a propósito: un fondo CSS
	   NO admite `fetchpriority` (el navegador lo descubre recién al parsear el CSS) ni
	   `srcset`/`sizes` (no elige variante por ancho), así que en un teléfono se bajaba la
	   imagen de 1600 en vez de la de 768 (44 KB). Ahora es un <img> nativo dentro del bloque
	   (clase .bxm-hero-img), el mismo criterio que se aplicó en stg.vg el 2026-09-10.
	   La geometría del recorte NO cambia: el <img> cubre el mismo contenedor con
	   `object-fit: cover`, que equivale al `background-size: cover` que había acá.
	   ⚠️ En VG el <img> necesitó `height: 100vh` porque el fondo usaba
	   `background-attachment: fixed` (se dimensionaba sobre el VIEWPORT). Acá el attachment
	   era `scroll`, o sea sobre el ELEMENTO: con `height: 100%` alcanza. */
	background-size: cover;          /* por si algún navegador ignora el <img> futuro */
	background-repeat: no-repeat;
}

/* La imagen del hero, nativa ───────────────────────────────────────────────
   Es el elemento LCP: va con `fetchpriority="high"` (lo emite WordPress), sin `loading`
   diferido y con `srcset` para que el navegador elija la variante.
   750px de alto es el hero; `object-position: center` reproduce el
   `background-position: center center` que tenía el fondo. */
.bxm-hero .bxm-hero-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	/* ⚠️ WordPress limita todo hijo de un contenedor `is-layout-constrained` al
	   `contentSize` del tema (1320px acá) con un `:where()` de especificidad (0,1,0).
	   Medido: con `inset: 0` a secas, la imagen quedaba en 1320 mientras el hero mide
	   1425 — o sea 105px SIN CUBRIR a la derecha. Con `max-width: none` + `width: 100%`
	   la figura toma el ancho del hero. (Los `margin-left/right: auto !important` del
	   core siguen ahí, pero con el ancho al 100% no tienen espacio que repartir.) */
	max-width: none;
	width: 100%;
}
.bxm-hero .bxm-hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* El overlay va en un pseudo-elemento y no con `background-blend-mode` para que
   la imagen se pueda cambiar sin tocar el color, y al revés.
   ⚠️ El valor NO es el del color de producción tal cual: en el mockup el
   pseudo-elemento lleva `rgba(0,0,0,.73)` **con `opacity:.4`**, así que el velo
   real es 0.73 × 0.4 = 0.292. Copiar solo el color dejaba el hero 2,5 veces más
   oscuro (0.73). Se escribe el producto ya calculado: una capa, un valor.
   ⚠️ `z-index: 1` EXPLÍCITO: el pseudo-elemento va ANTES que la imagen en el orden del
   DOM, así que con `auto` (como estaba) la imagen —que ahora es un elemento posicionado—
   pintaba POR ENCIMA del velo y el texto blanco quedaba sobre la foto sin oscurecer.
   Los tres niveles quedan fijos: imagen 0 · velo 1 · contenido 2. */
.bxm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.292);
	pointer-events: none;
}

/* El contenido tiene que quedar POR ENCIMA del overlay (nivel 2 de los tres).
   ⚠️ `margin-block-start: 0` NO es decorativo: al insertar la imagen como PRIMER hijo del
   hero, este bloque dejó de ser el `:first-child`, y el core aplica a todo hijo de un
   contenedor `is-layout-constrained` un `margin-block-start: 1.2rem`
   (`:root :where(.is-layout-constrained) > *`). Efecto medido: **18px de corrimiento hacia
   abajo** de todo el texto del hero. Se detectó comparando el hero antes/después píxel a
   píxel (diferencia 23/255 concentrada en la zona del texto); el método tiene ruido CERO,
   así que la diferencia era real. Este selector es (0,2,0) y le gana sin `!important`. */
.bxm-hero .bxm-hero-inner {
	position: relative;
	z-index: 2;
	gap: 20px;
	margin-block-start: 0;
}

.bxm-hero-titulo {
	font-family: 'Poppins', sans-serif;
	font-size: 2.5rem;        /* 40px */
	font-weight: 800;
	line-height: 1.2;         /* el landing usa 1.1–1.2: bloque de titular cerrado */
	letter-spacing: -0.02em;  /* el titular del landing va con tracking negativo */
	color: #FFFFFF;
	/* Antes 60px arriba: era el aire que separaba el título del borde del hero cuando
	   NO había etiqueta. Ahora la etiqueta va encima y ese aire lo pone ella. */
	margin: 0 0 14px;
	/* El ancho de lectura se fija más abajo, en una regla con `.bxm-hero` delante: ver nota. */
}

.bxm-hero-sub {
	font-family: 'Poppins', sans-serif;
	/* El párrafo del landing es el más liviano del bloque: 16px, peso regular e interlineado
	   amplio. Antes iba en 24px semibold, más grande que el reclamo: la jerarquía quedaba
	   invertida respecto del landing. */
	font-size: 1.05rem;       /* 17px */
	font-weight: 400;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 26px;
}

/* ESTRUCTURA DE TEXTO DEL HERO (19-oct-2026, pedido de Taylor)
   Se copia el orden del landing de devcr.ponderosacostarica.com:
       etiqueta (píldora) · h1 · reclamo corto · texto · dos botones
   Son piezas NUEVAS: no existían en el hero de BXM, que iba h1 + un párrafo + un botón.
   La etiqueta va en el amarillo de marca (#FFDE00) con el azul oscuro encima: el
   contraste es 13,6:1. El reclamo va en blanco y más chico que el h1 (20px). */
.bxm-hero .bxm-hero-etiqueta {
	display: inline-block;
	margin: 0 0 16px;
	padding: 7px 14px;
	border-radius: 999px;
	background-color: #FFDE00;
	color: #192335;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.45;
}

/* ETIQUETA EN DOS LÍNEAS ORDENADAS (19-oct-2026, pedido de Taylor)
   En un teléfono los cuatro niveles no entran en una línea: el navegador partía donde caía
   y dejaba el «·» colgando al final («SÉPTIMO · OCTAVO · NOVENO ·» / «BACHILLERATO»). El
   contenido va partido en dos grupos y acá se decide dónde se rompe: en escritorio los dos
   grupos y el separador van en la misma línea; en móvil cada grupo es una línea y el
   separador se oculta, así el corte siempre queda «SÉPTIMO · OCTAVO» / «NOVENO · BACHILLERATO». */
.bxm-hero .bxm-hero-etiqueta .bxm-etq-grupo { display: inline; }
.bxm-hero .bxm-hero-etiqueta .bxm-etq-sep { display: inline; }

.bxm-hero .bxm-hero-reclamo {
	margin: 0 0 12px;
	max-width: 44ch;
	font-family: 'Poppins', sans-serif;
	font-size: 1.3rem;        /* 21px */
	font-weight: 600;
	line-height: 1.45;
	color: #FFFFFF;
}

/* ALINEACIÓN A LA IZQUIERDA DEL TEXTO DEL HERO (19-oct-2026, pedido de Taylor)
   El core centra todo hijo de un contenedor `is-layout-constrained` con una regla que remata
   en `margin-left: auto !important; margin-right: auto !important` (y `max-width:
   --wp--style--global--content-size`). Como los textos del hero ahora tienen tope en `ch`, ese
   `margin:auto` los dejaba flotando al centro en escritorio y tablet. Hay que neutralizarlo con
   `!important`; sin `!important` la regla del core gana y el bloque sigue centrado.
   El grupo interno NO se estira: se queda con el ancho de contenido del tema (1320px) y
   centrado, para que el texto arranque donde arrancan las demás secciones. */
.bxm-hero .bxm-hero-inner {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1320px);
	margin-left: auto !important;
	margin-right: auto !important;
	/* El resto de la página queda a doble padding: el grupo de sección y su grupo interno
	   llevan los dos el padding del sistema. El hero, al no tener grupo interno anidado,
	   quedaba 30px más pegado al borde que las demás secciones (medido a 390: hero en x=44
	   y siguiente sección en x=60). Con este padding el texto cae exactamente donde caen
	   las otras secciones a cualquier ancho: 60 a 390, 77 a 768, 100 a 1024, 103 a 1440. */
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

.bxm-hero .bxm-hero-inner > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ANCHO DE LECTURA DEL HERO (19-oct-2026) — por qué con `.bxm-hero` delante:
   el layout del core emite `:root :where(.is-layout-constrained) > *` con
   `max-width: var(--wp--style--global--content-size)` (1320px en este tema). Esa regla
   tiene la misma especificidad que una clase suelta y gana por orden de carga, así que un
   `.bxm-hero-titulo { max-width: 22ch }` se quedaba sin efecto (medido: 1320px aplicados).
   Con `.bxm-hero` delante la especificidad sube y sí manda. En `ch`, no en px, para que
   respete el zoom de texto del navegador. */
.bxm-hero .bxm-hero-titulo { max-width: 22ch; }
.bxm-hero .bxm-hero-sub    { max-width: 56ch; }

/* Los botones arrancan donde arranca el texto en cualquier ancho: si el grupo se queda con
   el tope de 1320px y `margin:auto`, en pantallas anchas el CTA se corría al centro (medido
   a 1920: botón en x=293 y titular en x=60). */
.bxm-hero .bxm-hero-acciones {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	justify-content: flex-start;
}

/* ÉNFASIS DEL HERO: SOLO POR JERARQUÍA, SIN COLOR (19-oct-2026, pedido de Taylor)
   El landing de Ponderosa no colorea palabras: el énfasis lo dan el tamaño y el peso
   (título 40px/800 · reclamo 21px/600 · párrafo 17px/400) sobre texto blanco. Se quitó el
   amarillo del párrafo y, con él, los <strong> del contenido: si vuelven a aparecer, quedan
   en blanco con el mismo peso del párrafo para no romper la escala. */
.bxm-hero .bxm-hero-reclamo strong,
.bxm-hero .bxm-hero-sub strong {
	font-weight: inherit;
	color: inherit;
}

/* Los dos botones del hero, en fila y con el mismo hueco que el landing (14px).
   El secundario es contorno blanco: no compite con el verde del CTA principal. */
.bxm-hero .bxm-hero-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.bxm-hero .bxm-btn-secundario .wp-block-button__link {
	background-color: transparent;
	color: #FFFFFF;
	border: 2px solid #FFFFFF;
	border-radius: 12px;
	/* Sin esto el secundario quedaba de 21px de alto: el padding y el tamaño de
	   letra los pone `.bxm-btn-cta`, y esta clase no los hereda. Medido antes de
	   corregirlo: principal 45px, secundario 21px. */
	font-family: 'Poppins', sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	padding: 12px 24px;
}

.bxm-hero .bxm-btn-secundario .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, .14);
	color: #FFFFFF;
}

/* BOTÓN CTA "Ver Planes de Suscripción" ────────────────────────────────
   ESTÁNDAR DE COLOR DE PROCESO (Taylor): todo CTA que lleva a los planes va en VERDE
   con TEXTO BLANCO. El amarillo #FFDE00 queda reservado para "Crear cuenta"
   (.bxm-btn-join), que NO lleva esta clase.
   Tipografía sin cambios: 19.2px / 600 · pad 12px 24px · radio 12px.
   ⚠️ El amarillo global de los botones NO se toca: sale de theme.json
   (styles.elements.button -> var(--wp--preset--color--cta)) y pintaría TODOS los
   botones del sitio.
   ⚠️ SON DOS CLASES Y SE PARECEN MUCHO — no confundirlas:
        .bxm-btn-cta  → los CTA de la portada (hero, pasos, rendimiento, estudiantes)
        .bxm-cta-btn  → el CTA del sidebar ("Ver Planes Pro" -> /planes/)
      Las dos llevan el mismo verde desde este cambio; antes el sidebar tenía #14A05C.
   ⚠️ Los labels son DISTINTOS A PROPÓSITO (decisión de Taylor, 13-sep-2026): el sidebar
   dice "Ver Planes Pro" y los de la portada "Ver Planes de Suscripción". Los dos llevan
   al mismo /planes/. NO es una inconsistencia que haya que unificar: no se toca.
   ✅ CONTRASTE MEDIDO: blanco sobre #0E7A45 = 5.40:1 → pasa WCAG AA (el umbral es
   4.5:1 para 19.2px/600, que no cuenta como texto grande). El #14A05C de marca daba
   3.38:1 y por eso se oscureció (opción elegida por Taylor). Hover #0A5C34 = 8.10:1.
   ⚠️ El verde de los ICONOS de las tarjetas de pasos SIGUE siendo #14A05C: es un
   gráfico, no un fondo con texto encima, así que el requisito de contraste no aplica. */
.bxm-btn-cta .wp-block-button__link {
	background-color: #0E7A45;
	color: #FFFFFF;
	font-family: 'Poppins', sans-serif;
	font-size: 1.2rem;        /* 19.2px */
	font-weight: 600;
	padding: 12px 24px;
	border-radius: 12px;
	border: 0;
	text-decoration: none;
	transition: background-color .2s ease;
}

.bxm-btn-cta .wp-block-button__link:hover,
.bxm-btn-cta .wp-block-button__link:focus {
	background-color: #0A5C34;   /* hover: un escalon mas oscuro, blanco encima da 8.10:1 */
	color: #FFFFFF;
}

/* Los CTA de las secciones de PASOS y RENDIMIENTO van A LA IZQUIERDA (19-oct-2026,
   pedido de Taylor: con el titulo y los puntos ya a la izquierda, un boton centrado
   rompe la simetria de la seccion).
   ⚠️ Los dos bloques traen `is-content-justification-center` del editor y el estilo
   generado por el core (`wp-container-core-buttons-is-layout-…`), los dos de (0,1,0).
   Un selector de dos clases (0,2,0) les gana sin `!important`.
   El ancla es `.bxm-seccion-acciones`, la clase marcadora de estos dos CTA (aparece
   dos veces en la portada y no tiene reglas propias), y va acotada a las DOS
   secciones para no mover el CTA del hero ni el de estudiantes. */
.bxm-pasos .bxm-seccion-acciones,
.bxm-rendimiento .bxm-seccion-acciones {
	justify-content: flex-start;
}

/* 2. SECCIÓN "3 PASOS" ─────────────────────────────────────────────────
   Producción: fondo #F9FAFA · min-height 288px · padding 45px 45px 65px · gap 55px
   ⚠️ El vertical NO se copia tal cual: producción tiene 45 arriba y 65 abajo, así
   que la sección queda desbalanceada (45 de aire arriba contra 65 abajo). Se
   igualan a 65 — el lado generoso — porque además se pidió que la sección
   respire. Es una desviación DELIBERADA del mockup, no un descuido.
   El lateral lo da el sistema (ver nota del bloque); acá solo el vertical. */
/* ⚠️ PADDING VERTICAL UNIFICADO — 72px arriba y abajo para TODAS las secciones de la
   portada, en TODOS los anchos. Decision de Taylor: "todas las secciones con el mismo
   padding top y bottom en todas las visualizaciones, tenemos que cuidar la simetria y
   estetica". Antes cada seccion tenia el suyo (65, 90, 72, 72) y ademas otro par en
   movil (40, 50, 56, 56): el ritmo del scroll cambiaba al pasar de una a otra.
   ⚠️ NO se toman los valores del mockup aca: el criterio es que quede mejor.
   ⚠️ Los overrides de movil SE BORRARON a proposito. Si hace falta cambiarlo, se
   cambia en UN lugar (aca) y no se agregan reglas por breakpoint: fue justamente eso
   lo que desincronizo los valores. */
.bxm-pasos {
	background-color: #F9FAFA;
	padding-top: 72px;
	padding-bottom: 72px;
}

/* ⚠️ El `margin: auto` del core sobre los hijos de un grupo `is-layout-constrained`
   llega como `margin-left/right: auto !important`. En un contenedor de BLOQUE eso los
   centraba; en esta rejilla el efecto es otro y peor: el hijo que no se estira (el h3,
   que mide lo que mide su texto) se contrae y flota al centro de su celda. Medido:
   el h3 arrancaba en x=197 cuando la columna de texto arranca en x=141 — 56px de
   sangria falsa, la misma distancia que se repartian los dos margenes automaticos.
   Se neutraliza con `!important` (sin el, la regla del core gana) y solo aca dentro. */
.bxm-paso > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* El titulo de esta seccion va a la IZQUIERDA (19-oct-2026, pedido de Taylor).
   Se acota a `.bxm-pasos` A PROPOSITO: `.bxm-seccion-titulo` la comparten las demas
   secciones de la portada y esas siguen centradas. El h2 ya ocupa el ancho completo
   del grupo interno (medido: 1165px de 1165), asi que basta `text-align`; no hace
   falta pelear con el `margin: auto` del core. */
.bxm-pasos .bxm-seccion-titulo {
	text-align: left;
}

/* ⚠️ ACÁ HABÍA un `gap: 55px` que NUNCA aplicó: `.bxm-seccion-inner` es un grupo
   con `is-layout-constrained`, o sea `display: block`, y **`gap` no existe para
   un layout de bloque**. La separación real la daba el `blockGap` por defecto del
   core: 1.2rem = 19.2px. Medido en navegador: el CSS pedía 55 y el navegador
   daba 19,2 sin avisar.
   El espaciado ahora va donde corresponde: en el **`blockGap` del bloque**
   (`style.spacing.blockGap`), que es el mecanismo nativo de WordPress. En móvil
   se sobreescribe la variable que usa el core (abajo, en el @media). */

/* Título de sección: 30px / 700 / #192335 / centrado / margin 45px 0 19px */
.bxm-seccion-titulo {
	font-family: 'Poppins', sans-serif;
	/* ⚠️ SIN `font-size` A PROPOSITO: el tamano lo pone el theme.json en
	   `styles.elements.h2.typography.fontSize` (1.875rem = 30px). Es el <h2> del
	   bloque, asi que hereda la escala del sistema por si mismo.
	   NO usar `var(--wp--preset--font-size--h-2)`: WordPress RENOMBRA los slugs al
	   emitir las variables (h2 -> h-2, le mete un guion entre letra y digito), asi
	   que ese token NO EXISTE y `var()` sin fallback deja el texto en 16px.
	   Y los presets son fluidos (clamp): el del h2 llega a 1.875rem solo en
	   pantallas anchas, mientras el elemento del theme.json es fijo. */
	font-weight: 700;
	line-height: 1.25;
	color: #192335;
	text-align: center;
	margin: 45px 0 19px;
}

/* En las secciones de fondo oscuro el título va en blanco. */
.bxm-titulo-claro { color: #FFFFFF; }

/* Lista con check: el SVG va como `list-style-image` por CSS y no como HTML
   repetido, así el contenido queda limpio y el icono es un solo recurso. */
.bxm-lista-check {
	list-style: none;
	padding: 0;
	margin: 0 0 25px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
}

.bxm-lista-check li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
	color: #192335;
	padding-left: 26px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%232E7D32' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 18px 18px;
}

/* En la sección azul el texto y el check van en blanco, sobre un check claro. */
.bxm-lista-clara li {
	color: #FFFFFF;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FFFFFF' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
}

/* Los 3 pasos en columnas. El `gap` lo gobierna el BLOQUE (columns), así que
   se declara en el atributo del bloque y no acá. Solo se ajusta el fondo de
   cada paso, que el bloque no expone. */
/* ⚠️ El selector lleva `.wp-block-group` (0,2,0) A PROPOSITO.
   El core trae `.has-global-padding :where(...) { padding-left: 0; padding-right: 0 }`
   y nuestra hoja carga ANTES que la suya, asi que con `.bxm-paso` a secas el empate
   de especificidad lo ganaba el core. Medido: el CSS pedia `padding: 25px` y el
   navegador daba `25px 0px` — la tarjeta perdia los laterales.
   La SOMBRA es del mockup, y no es decorativa: el blanco de la tarjeta sobre el
   #F9FAFA de la seccion no se distingue, asi que sin sombra la tarjeta parece no
   existir.

   ── 19-oct-2026 · PATRÓN "ICONO A LA IZQUIERDA" (pedido de Taylor) ──────────
   Antes cada tarjeta apilaba icono de 99px / titulo / parrafo, TODO centrado.
   Ahora es una rejilla de DOS columnas: el icono ocupa la izquierda y a su derecha
   van el titulo y la descripcion, los dos alineados a la izquierda.
   Se hace SOLO con CSS: el HTML del bloque no cambia (icono, h3 y p siguen siendo
   hijos directos del grupo). La celda de cada hijo se asigna de forma EXPLICITA
   porque con `auto-flow` el parrafo caeria en la columna del icono (fila 2,
   columna 1) y el icono se quedaria sin su fila. */
.wp-block-group.bxm-paso {
	background: #FFFFFF;
	border-radius: 11px;
	padding: 25px;
	height: 100%;
	text-align: left;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	display: grid;
	grid-template-columns: 48px 1fr;
	column-gap: 18px;
	row-gap: 6px;
	align-content: start;
	align-items: start;
}

/* El icono: 48px en un circulo de verde muy claro. El glifo interior se queda en
   el verde de conversion (#14A05C, el mismo que ya usa el sitio) y en 26px, que es
   lo que lo hace acompanar al texto en vez de competir con el.
   `core/icon` NO emite width/height, asi que el tamano lo manda el CSS sin pelear
   con ningun atributo. */
.bxm-paso .wp-block-icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 48px;
	height: 48px;
	margin: 0;
	border-radius: 50%;
	background-color: #E8F5EE;
	display: grid;
	place-items: center;
}

.bxm-paso .wp-block-icon svg {
	width: 26px;
	height: 26px;
	fill: #14A05C;
	display: block;
	margin: 0;
}

.bxm-paso-titulo {
	grid-column: 2;
	grid-row: 1;
	/* ⚠️ `justify-self: start` + `width: 100%` NO son decorativos: sin ellos el h3 se
	   contráia a su texto y flotaba al centro de la celda (medido: x=197 cuando la
	   columna arranca en x=141). Neutralizar el `margin: auto` del core NO bastó.
	   Con `width: 100%` el título ocupa la columna entera y arranca donde arranca la
	   descripción, que es la alineación que se pidió. */
	justify-self: start;
	width: 100%;
	font-family: 'Poppins', sans-serif;
	/* ⚠️ Aca HABIA `font-size: 1.25rem` (20px), que NO es el tamano del h3 del
	   sistema: el theme.json define `styles.elements.h3` en 1.5rem (24px). O sea
	   que un <h3> se veia con el tamano de un h4. Se quita la declaracion y manda
	   el theme.json, igual que en el titulo de seccion. */
	font-weight: 600;
	color: #192335;
	/* ⚠️ Antes 17.2px: separaba el titulo del parrafo cuando iban apilados. Ahora
	   la separacion la da el `row-gap` de la rejilla (6px) y este margen la
	   DUPLICABA. */
	margin: 0;
}

.bxm-paso-texto {
	grid-column: 2;
	grid-row: 2;
	font-size: 1rem;
	line-height: 1.6;
	color: #54595F;
	margin: 0;
}

.bxm-pasos-grid { margin-bottom: 10px; }

/* 3. SECCIÓN "RENDIMIENTO" (azul) ──────────────────────────────────────
   Producción: fondo #0078BF · min-height 468px · padding 0 45px */
.bxm-rendimiento {
	background-color: #0078BF;
	/* ⚠️ SIN `min-height` a mano. Tenia 468px clavados y el contenido mide 303: el
	   titulo arrancaba en top=0 (pegado al borde) y sobraban 165px de aire muerto
	   abajo. El alto lo pone el contenido. Produccion mide 596 con los bloques
	   separados 55px; con 90px arriba y abajo esta seccion queda en ~590.
	   Los 90px son simetricos a proposito: un padding asimetrico desbalancea la
	   seccion (el mismo error que en pasos, 45 arriba / 65 abajo). */
	padding-top: 72px;
	padding-bottom: 72px;
}

/* Titulo y lista de esta seccion A LA IZQUIERDA (19-oct-2026, pedido de Taylor).
   ⚠️ Las dos reglas van acotadas a `.bxm-rendimiento` A PROPOSITO:
     · `.bxm-seccion-titulo` la comparten todas las secciones de la portada, y las
       demas siguen centradas.
     · `.bxm-lista-check` la usan tambien la seccion del newsletter
       (`bxm-news-beneficios`), que no se toca.
   El h2 ya ocupa el ancho completo del grupo interno (medido: 1251px de 1251), asi
   que basta `text-align`; la lista es un flex con `justify-content: center` y pasa a
   `flex-start`. Medido antes: los tres items arrancaban en x=337/580/818 sobre un
   contenedor que empieza en x=50. */
.bxm-rendimiento .bxm-seccion-titulo {
	text-align: left;
}

.bxm-rendimiento .bxm-lista-check {
	justify-content: flex-start;
}

/* Contadores: número 69px / 600 / blanco · título 18.4px / 400 / blanco */
.bxm-contadores { margin-bottom: 20px; }

.bxm-contador-numero {
	font-family: 'Poppins', sans-serif;
	/* Los contadores se ANIMAN (assets/bxm-contadores.js): con dígitos de ancho
	   variable el número "tiembla" mientras cuenta. `tabular-nums` los fija. */
	font-variant-numeric: tabular-nums;
	font-size: 4.3125rem;     /* 69px */
	font-weight: 600;
	line-height: 1.1;
	color: #FFFFFF;
	text-align: center;
	margin: 0 0 6px;
}

.bxm-contador-titulo {
	font-size: 1.15rem;       /* 18.4px */
	font-weight: 400;
	color: #FFFFFF;
	text-align: center;
	margin: 0;
}

/* MÓVIL ────────────────────────────────────────────────────────────────
   Los 750px del hero y los 55px de separación son medidas de escritorio: en
   móvil dejan la primera pantalla sin contenido útil. */
@media (max-width: 781px) {
	/* 441px es el piso del pedido (19-oct-2026); el 49vh del escritorio en un
	   teléfono daría ~330px y el texto no entra, así que acá manda el piso. */
	.bxm-hero { min-height: 441px; }
	.bxm-hero-titulo { font-size: 1.7rem; line-height: 1.2; margin: 0 0 12px; }
	.bxm-hero-sub { font-size: 1rem; line-height: 1.55; margin: 0 0 18px; }
	/* Ojo con la especificidad: las reglas base de la etiqueta y del reclamo llevan
	   `.bxm-hero` delante, así que estas también lo necesitan o no se aplican. */
	.bxm-hero .bxm-hero-etiqueta { font-size: 11px; padding: 6px 11px; margin-bottom: 12px; }
	/* Dos líneas con el corte siempre entre grupos, nunca en medio de un nivel ni con el
	   separador colgando. */
	.bxm-hero .bxm-hero-etiqueta .bxm-etq-grupo { display: block; }
	.bxm-hero .bxm-hero-etiqueta .bxm-etq-sep { display: none; }
	.bxm-hero .bxm-hero-reclamo { font-size: 1.1rem; margin-bottom: 10px; }
	/* El CTA va a lo ancho y en UNA línea: a 390px el texto se partía en dos renglones
	   dentro de un botón de 141px. Con 100% del ancho y 1rem entra completo. */
	.bxm-hero .bxm-btn-cta .wp-block-button__link {
		width: 100%;
		text-align: center;
		font-size: 1rem;
		padding: 12px 14px;
		white-space: nowrap;
	}
	/* ⚠️ Solo verticales: el aire LATERAL lo da la regla del sistema
	   (`--wp--style--root--padding-*`), igual que en escritorio. Fijar 20px acá
	   desalinearía el móvil 10px respecto del blog, que usa 30. */
	/* Vertical igual arriba y abajo, como en escritorio. */
	/* ⚠️ En móvil el blockGap baja a 30px. NO se puede hacer sobreescribiendo
	   `--wp--style--block-gap` (probado: el navegador sigue aplicando 55px), así
	   que se le gana por ESPECIFICIDAD al selector del contenedor que emite el
	   core: `.wp-block-group.bxm-seccion-inner` es (0,2,0) contra (0,1,0) del
	   generado. Sin `!important`. Verificado midiendo el margen computado. */
	.wp-block-group.bxm-seccion-inner > * + * { margin-block-start: 30px; }
	.bxm-seccion-titulo { font-size: 1.5rem; margin: 25px 0 14px; }
	.bxm-contador-numero { font-size: 3rem; }
	/* Los 5 contadores en 3 filas (2 + 2 + 1) en vez de 5 filas de ancho completo.
	   MEDIDO: apilados ocupaban 585px (5 x 93 + 4 gaps de 30) y empujaban el boton
	   fuera de la pantalla — el contenido de la seccion no entraba en un movil.
	   En 2 columnas son 3 filas (~339px), o sea ~246px menos.
	   El contenedor es un `wp-block-columns`, que el core pone en `display: flex`;
	   aca pasa a GRID. El selector es (0,2,0) contra (0,1,0) del core, asi que gana
	   sin `!important` (y `flex-basis`, que el core fuerza con !important en movil,
	   simplemente no aplica a un item de grid). */
	.bxm-rendimiento .bxm-contadores {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 26px 18px;              /* fila / columna */
	}
	/* El 5to (1800) ocupa las dos columnas: el numero y su etiqueta ya van
	   centrados por `text-align: center`, asi que queda centrado en la fila. */
	.bxm-rendimiento .bxm-contadores > :nth-child(5) {
		grid-column: 1 / -1;
	}
	/* ⚠️ El selector lleva `.wp-block-group` por la MISMA razon que en escritorio: la
	   regla base es (0,2,0) y con `.bxm-paso` a secas (0,1,0) este padding NUNCA
	   aplicaba — el movil venia usando los 25px de escritorio desde siempre.
	   El patron icono-izquierda se mantiene tambien aca: es lo que lo hace legible
	   cuando la tarjeta se va a ancho completo. */
	.wp-block-group.bxm-paso {
		padding: 18px;
		grid-template-columns: 40px 1fr;
		column-gap: 14px;
	}
	.bxm-paso .wp-block-icon { width: 40px; height: 40px; }
	.bxm-paso .wp-block-icon svg { width: 22px; height: 22px; }
}

/* 4. SECCIÓN "SOCIAL" — +704 estudiantes ───────────────────────────────
   Producción (/mockup/): fondo #FFFFFF · full-bleed · flex en fila centrada ·
   gap 96px · padding 72px 24px. El TEXTO va a la IZQUIERDA (order 1) y el
   collage de 12 retratos a la DERECHA (order 2).

   ⚠️ El collage en producción era HTML plano con `img:nth-child(n)`. Acá cada
   foto es un `core/image`, que renderiza un <figure>: el <figure> SÍ es hijo
   directo del grupo, así que la GEOMETRÍA (left/top/z-index/rotate) va en el
   <figure> y el ASPECTO (radio, borde, sombra, recorte) en el <img> de
   adentro. Mismos valores, misma posición, mismo resultado.

   ⚠️ El aire LATERAL sí se fija acá, con el MISMO token que usa el sistema, para
   que la sección quede igual que .bxm-pasos y .bxm-rendimiento (50px a 1440).
   Hace falta declararlo porque al pasar el bloque a `layout:flow` (ver abajo)
   WordPress deja de añadirle `has-global-padding`, y sin eso el aire lateral se
   perdía: medido, la sección quedaba en 0px mientras las otras dos tenían 50px,
   y en móvil el texto arrancaba pegado al borde. Se usa la variable del sistema
   en vez de un valor fijo: `--wp--style--root--padding-*`. */
.bxm-estudiantes {
	background-color: #FFFFFF;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 96px;
	padding-top: 72px;
	padding-bottom: 72px;
	padding-left: var(--wp--style--root--padding-left, 30px);
	padding-right: var(--wp--style--root--padding-right, 30px);
	/* Red de seguridad: si la fila no entra en el ancho disponible, el collage
	   baja en vez de desbordar. En producción esta franja (769–1024px) desbordaba
	   hasta 156px y el sitio quedaba con scroll horizontal. */
	flex-wrap: wrap;
}

/* ⚠️ (0,3,0) A PROPÓSITO. La regla de WordPress
   `.wp-block-group.is-layout-constrained > :where(:not(.alignleft)…)` es (0,2,0)
   y le GANA a una clase suelta. Medido: con `.bxm-estudiantes-texto` a secas el
   navegador computaba `max-width: 1320px` (el contentSize del tema) y el texto
   medía 564px en vez de los 520 de producción. Por eso el selector es compuesto. */
.bxm-estudiantes > .wp-block-group.bxm-estudiantes-texto {
	flex-shrink: 0;
	order: 1;
	max-width: 520px;
}

.bxm-estudiantes-titulo {
	color: #192335;
	font-family: 'Poppins', sans-serif;
	font-size: 1.625rem;      /* 26px */
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px;
}

.bxm-estudiantes-lead {
	color: #475569;
	font-size: 1rem;          /* 16px */
	line-height: 1.5;
	margin: 0 0 24px;
}

/* ⚠️ LOS AUTO-MÁRGENES DEL CORE LLEVAN `!important` — Y NO SE PUEDEN GANAR.
   WordPress aplica a los hijos de un bloque `is-layout-constrained`:
       .is-layout-constrained > :where(...) { margin-left/right: auto !important }
   En una FILA FLEX esos auto-márgenes ABSORBEN el espacio libre ANTES de
   `justify-content` y se SUMAN al `gap`. Medido a 1440px:
       declarado `gap: 96px` -> computado `margin: 0 72.25px` en cada hijo
       -> separación REAL entre columnas 240,5px (72,25 + 96 + 72,25)
       -> y 19,2px de más en el alto (493,2 vs 474,0 de producción)
   Como lleva `!important`, ninguna regla propia lo gana (verificado: una regla
   a (0,2,1) pierde y el margen sigue en 32,25px). La solución es NATIVA: el
   bloque se declara con `layout:{"type":"flow"}`, así la regla no aplica y la
   separación queda en los 96px exactos de producción.
   Esta regla se mantiene como red: en `is-layout-flow` el core añade
   `margin-block-start` a partir del `blockGap`, y eso sí hay que anularlo. */
.bxm-estudiantes > div.wp-block-group {
	margin: 0;
}

/* Ritmo interno del texto. ⚠️ Los `margin` declarados arriba (8px en el h3 y
   24px en el p) NO se aplican solos: el core los pisa y el espaciado real sale
   del `blockGap` (19,2px). Medido: daba 19,2 / 19,2 en vez de los 17,8 / 24 que
   RENDERIZA producción.
   Los 39px de `margin-top` del h3 son la tipografía GLOBAL de Elementor: el
   mockup declara 0, pero producción los RENDERIZA y son los que hacen que el
   bloque de texto mida 249,4px (acá daba 210,2). Se reproducen para igualar la
   referencia; si se prefiere el valor declarado del mockup, basta quitarlos.

   ⚠️ SELECTOR COMPUESTO A PROPÓSITO — WordPress tiene:
       :root :where(.is-layout-constrained) > *           { margin-block-start: 1.2rem }  (0,1,0)
       :root :where(.is-layout-constrained) > :first-child { margin-block-start: 0 }      (0,2,0)
   El `:first-child` es una PSEUDO-CLASE y suma en la columna de clases, así que
   esa regla es (0,2,0) y EMPATA con una regla de dos clases: gana por orden de
   las hojas (el estilo del core va inline, después). Por eso el p (que compite
   contra `> *`, de (0,1,0)) sí tomaba el margen y el h3 (primer hijo) no.
   `.wp-block-heading` sube el selector a (0,3,0) y gana sin depender del orden. */
.bxm-estudiantes-texto > .wp-block-heading.bxm-estudiantes-titulo { margin: 39px 0 17.8px; }
.bxm-estudiantes-texto > .bxm-estudiantes-lead { margin: 0 0 24px; }

.bxm-estudiantes-collage {
	position: relative;
	width: min(640px, 43%);
	height: auto;
    aspect-ratio: 420 / 330;
	flex-shrink: 0;
	order: 2;
}

.bxm-estudiantes-collage > figure {
	position: absolute;
	width: 26.667%;
	height: 33.333%;
	margin: 0;
}

.bxm-estudiantes-collage > figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 14px;
	border: 3px solid #FFFFFF;
	box-shadow: 0 3px 8px rgba(0, 0, 0, .14);
}

.bxm-estudiantes-collage > figure:nth-child(1) { left: 0%; top: 6.061%; z-index: 3; transform: rotate(-3deg); }
.bxm-estudiantes-collage > figure:nth-child(2) { left: 20.952%; top: 0%; z-index: 5; transform: rotate(2deg); }
.bxm-estudiantes-collage > figure:nth-child(3) { left: 41.905%; top: 7.576%; z-index: 4; transform: rotate(-1deg); }
.bxm-estudiantes-collage > figure:nth-child(4) { left: 62.857%; top: 2.424%; z-index: 6; transform: rotate(3deg); }
.bxm-estudiantes-collage > figure:nth-child(5) { left: 7.143%; top: 33.333%; z-index: 4; transform: rotate(2deg); }
.bxm-estudiantes-collage > figure:nth-child(6) { left: 28.095%; top: 27.879%; z-index: 6; transform: rotate(-2deg); }
.bxm-estudiantes-collage > figure:nth-child(7) { left: 49.048%; top: 34.848%; z-index: 5; transform: rotate(1deg); }
.bxm-estudiantes-collage > figure:nth-child(8) { left: 70%; top: 29.697%; z-index: 7; transform: rotate(-3deg); }
.bxm-estudiantes-collage > figure:nth-child(9) { left: 14.286%; top: 63.636%; z-index: 5; transform: rotate(-2deg); }
.bxm-estudiantes-collage > figure:nth-child(10) { left: 35.238%; top: 59.091%; z-index: 7; transform: rotate(3deg); }
.bxm-estudiantes-collage > figure:nth-child(11) { left: 56.19%; top: 66.061%; z-index: 6; transform: rotate(-1deg); }
.bxm-estudiantes-collage > figure:nth-child(12) { left: 73.333%; top: 60.606%; z-index: 8; transform: rotate(2deg); }

/* Tableta (≤1200px): la fila NO entra. El contenido necesita
   520 + 96 + 420 = 1036px más el aire lateral, así que por debajo de eso se
   apila centrado. ⚠️ En producción esta franja DESBORDABA (156px a 1024px,
   143px a 769px) y dejaba scroll horizontal en todo el sitio: es un defecto
   heredado del mockup, no un cambio de diseño. Mismas medidas de producción. */
@media (max-width: 1200px) {
	.bxm-estudiantes {
		flex-direction: column;
		text-align: center;
		gap: 48px;
	}
	/* Mismo selector compuesto que la base: con la clase suelta, la regla de
	   arriba (que es (0,3,0)) ganaría y el texto seguiría a 520px. */
	.bxm-estudiantes > .wp-block-group.bxm-estudiantes-texto { max-width: 100%; }
}

/* Móvil: además del apilado, el collage y el aire se achican (producción: ≤768px) */
@media (max-width: 768px) {
	.bxm-estudiantes {
		gap: 40px;
	}
	/* ORDEN EN MOVIL: collage -> titulo -> texto -> CTA (pedido de Taylor).
	   El bloque de texto ya lleva el titulo, el texto y el CTA en ese orden, asi que
	   basta con subir el collage al primer lugar: se intercambian los `order`.
	   ⚠️ El selector del texto tiene que ser el COMPUESTO (0,3,0), el mismo de la
	   base: con la clase suelta perdia contra la regla de escritorio y el `order`
	   no cambiaba. */
	/* CONSOLIDADO 18-sep-2026: el `order: 1` que iba aca se fusiono con la otra regla del
	   mismo selector, mas abajo, donde vive el ancho y la proporcion. */
	.bxm-estudiantes > .wp-block-group.bxm-estudiantes-texto { order: 2; }
	/* ⚠️ Con el collage arriba, el `margin-top: 39px` del titulo queda como un
	   HUECO de 79px entre el collage y el titulo: 40 del gap de la seccion + 39 del
	   margen. Ese margen reproduce la tipografia global de Elementor para el
	   ESCRITORIO (donde el texto es lo primero y el margen da el aire de arriba);
	   en el orden movil ya no cumple esa funcion y desbalancea la seccion (medido y
	   confirmado con vision: el hueco era el triple que los demas).
	   Se anula SOLO en movil: en escritorio sigue siendo el valor de produccion.
	   Selector compuesto (0,3,0), el mismo de la base, para ganar por orden. */
	.bxm-estudiantes-texto > .wp-block-heading.bxm-estudiantes-titulo { margin-top: 0; }
	/* El CTA quedaba alineado a la IZQUIERDA mientras el titulo y el texto ya iban
	   centrados: en movil la seccion lleva `text-align: center`, pero eso no mueve un
	   contenedor FLEX como `.wp-block-buttons`.
	   Los CTA de pasos y rendimiento SI estan centrados porque su bloque lleva la
	   clase `is-content-justification-center`; este no la tiene, porque en ESCRITORIO
	   va a la izquierda junto al texto (asi es el mockup). Por eso se centra aca y
	   solo aca: el escritorio no se toca. */
	.bxm-estudiantes .wp-block-buttons { justify-content: center; }
	/* ⚠️ El collage va en % para que encoja solo. En móvil el ancho útil es
	   viewport − 2×aire lateral (30px): a 320px son 260px. Con los 300px FIJOS
	   de producción desbordaba por debajo de ~360px (lo midió el QA). Los % son
	   exactos: 26.667% de 300 = 80px y 33.333% de 240 = 80px, así que en móvil
	   grande se ve idéntico a producción y por debajo se encoge sin desbordar. */
	.bxm-estudiantes-collage { order: 1; width: min(300px, 100%); height: auto; aspect-ratio: 300 / 240; }
	.bxm-estudiantes-collage > figure { width: 26.667%; height: 33.333%; }
	.bxm-estudiantes-collage > figure:nth-child(1)  { left: 0;        top: 6.667%; }
	.bxm-estudiantes-collage > figure:nth-child(2)  { left: 20.667%;  top: 0; }
	.bxm-estudiantes-collage > figure:nth-child(3)  { left: 41.333%;  top: 8.333%; }
	.bxm-estudiantes-collage > figure:nth-child(4)  { left: 62%;      top: 2.5%; }
	.bxm-estudiantes-collage > figure:nth-child(5)  { left: 8%;       top: 34.167%; }
	.bxm-estudiantes-collage > figure:nth-child(6)  { left: 28.667%;  top: 28.333%; }
	.bxm-estudiantes-collage > figure:nth-child(7)  { left: 49.333%;  top: 36.667%; }
	.bxm-estudiantes-collage > figure:nth-child(8)  { left: 70%;      top: 30.833%; }
	.bxm-estudiantes-collage > figure:nth-child(9)  { left: 16%;      top: 62.5%; }
	.bxm-estudiantes-collage > figure:nth-child(10) { left: 36.667%;  top: 57.5%; }
	.bxm-estudiantes-collage > figure:nth-child(11) { left: 57.333%;  top: 65.833%; }
	.bxm-estudiantes-collage > figure:nth-child(12) { left: 72.667%;  top: 60%; }
}

/*
   MOCKUP — SECCIÓN NEWSLETTER
   Producción (medido a 1600px): fondo #F9FAFA · contenedor a ancho completo
   (w=1585) · contenido interno .bxm-row limitado a 1200px, en dos columnas:
   imagen del estudiante + formulario con beneficios.

   El formulario NO es HTML propio: sale del shortcode [bxm_comunidad] del
   mu-plugin, que es el que tiene el honeypot, el nonce y la llamada a Listmonk.
   Acá solo se le da forma.
*/
.bxm-newsletter {
	background-color: #F9FAFA;
	/* Alineado con la seccion de al lado (.bxm-estudiantes, 72/72): tenia 55/55 y era
	   la mas apretada del sitio. Es la seccion CONTIGUA y con la misma estructura
	   (contenido + CTA), asi que compartir el aire hace que el ritmo del scroll no
	   cambie al pasar de una a otra.
	   ⚠️ NO se toma el valor de produccion: aca el criterio es que quede MEJOR, no que
	   copie al mockup (indicacion de Taylor). */
	padding-top: 72px;
	padding-bottom: 72px;
}

/* ⚠️ SIN max-width propio. Los 1200px eran la medida de producción (Elementor);
   este stack tiene UNA sola medida —`contentSize` = 1320— y está bloqueada
   (`allowCustomContentAndWideSize: false` en theme.json). Declarar un ancho
   distinto acá dejaría esta sección desalineada del resto del sitio y sería una
   segunda fuente de verdad del ancho. Hereda el del contenedor. */
.bxm-newsletter-inner {
	max-width: none;
}

.bxm-news-titulo {
	font-family: 'Poppins', sans-serif;
	font-size: 1.75rem;       /* 28px */
	font-weight: 700;
	line-height: 1.25;
	color: #192335;
	margin: 0 0 14px;
}

.bxm-news-sub {
	font-size: 1.05rem;
	line-height: 1.6;
	color: #54595F;
	margin: 0 0 20px;
}

/* Los beneficios van en columna y alineados a la izquierda: el check de
   `.bxm-lista-check` es el mismo recurso SVG que usan las otras secciones. */
.bxm-news-beneficios {
	flex-direction: column;
	justify-content: flex-start;
	gap: 10px;
	margin: 0 0 24px;
}

.bxm-news-beneficios li { font-size: 1rem; }

.bxm-news-img img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}

/* Formulario (shortcode [bxm_comunidad]) ─────────────────────────── */
.bxm-newsletter .bxm-comunidad-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bxm-newsletter .bxm-comunidad-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bxm-newsletter .bxm-comunidad-campo label {
	font-size: .95rem;
	font-weight: 600;
	color: #192335;
}

.bxm-newsletter .bxm-comunidad-req { color: #0078BF; }

.bxm-newsletter .bxm-comunidad-campo input[type="email"] {
	width: 100%;
	padding: 13px 16px;
	font-size: 1rem;
	font-family: inherit;
	color: #192335;
	background: #FFFFFF;
	border: 1px solid #CFC7C7;
	border-radius: 8px;
	box-sizing: border-box;
}

.bxm-newsletter .bxm-comunidad-campo input[type="email"]:focus {
	outline: 2px solid #0078BF;
	outline-offset: 1px;
	border-color: #0078BF;
}

/* El CTA de adquisición va en el naranja del token `formulario` y con texto BLANCO
   (decisión del usuario, 14-oct-2026). Con el token en #C94A0E (19-oct-2026) el blanco
   da 4,70:1 y cumple AA; antes, sobre #FF6F3C, se quedaba en 2,77:1. */
.bxm-newsletter .bxm-comunidad-btn {
	background-color: var(--wp--preset--color--formulario, #C94A0E);
	color: #FFFFFF;
	font-family: 'Poppins', sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	padding: 14px 24px;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	/* Sin transición ni cambio de tono al pasar el mouse (decisión del usuario,
	   14-oct-2026): antes el fondo pasaba a #E85F2B con un fundido de .2s. */
}

.bxm-newsletter .bxm-comunidad-btn:focus-visible {
	outline: 2px solid #0078BF;
	outline-offset: 2px;
}

.bxm-newsletter .bxm-comunidad-btn[disabled] { opacity: .65; cursor: progress; }

.bxm-newsletter .bxm-comunidad-aviso {
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
	color: #54595F;
	min-height: 0;
}

.bxm-newsletter .bxm-comunidad-aviso.es-error { color: #C62828; }
.bxm-newsletter .bxm-comunidad-aviso.es-ok { color: #2E7D32; }

/* Honeypot: invisible para personas, presente en el DOM para los bots.
   Sin `display:none` a propósito — algunos bots lo detectan y lo saltan. */
.bxm-newsletter .bxm-comunidad-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	opacity: 0;
	height: 0;
	width: 0;
	overflow: hidden;
}

@media (max-width: 781px) {
	/* Igual que la seccion de al lado en movil (.bxm-estudiantes, 56/56): tenia 30/30
	   y era la mas apretada por lejos (las otras van de 40 a 56). */
	.bxm-news-titulo { font-size: 1.4rem; }
	.bxm-news-img-col { margin-bottom: 22px; }
}

/*
   SECCIONES A ANCHO COMPLETO — el aire lateral lo da el SISTEMA
   Las secciones van con `align:"full"` y por eso ESCAPAN del padding del
   `post-content` (WordPress compensa con margen negativo). O sea: si no
   declaran su propio aire, el texto toca los bordes de la pantalla.

   La tentación es copiar los 45px de producción. **Es un error de stack**: esos
   45px eran de Elementor, y este stack tiene su propia medida, la misma que usan
   el blog y las páginas:

       --wp--style--root--padding-left / --right = clamp(30px, 5vw, 50px)

   Usando ESA variable, el contenido de las secciones queda alineado al píxel con
   el del resto del sitio, y si algún día cambia el aire del sitio cambia acá
   solo. Declarar 45px fijos desalineaba 5px y creaba una segunda fuente de
   verdad.

   Va con `:where()` para no ganarle a nada por especificidad. */
:where(.bxm-hero-inner, .bxm-seccion-inner, .bxm-newsletter-inner) {
	padding-left: var(--wp--style--root--padding-left, 30px);
	padding-right: var(--wp--style--root--padding-right, 30px);
}

/*
   CAJAS DE CONTACTO (icono + titulo + texto) — /contacto-y-soporte-tecnico/
   Reemplazan los `icon-box` de Elementor. El icono sale del bloque nativo
   `core/icon` con la coleccion `bxm`, asi que el SVG vive en el registro del
   tema y no duplicado en el contenido.

   Medidas tomadas de produccion (1440px): icono 30px, color #0078BE,
   separacion icono->texto 17px (el blockGap lo pone el bloque, ver el HTML).
*/

.bxm-caja-contacto {
	background: #FFFFFF;
	border-top: 5px solid #0078BF;
	/* 12px solo arriba: es el radio que tiene el icon-box de produccion
	   (12px | 12px | 0 | 0). Abajo va recto. */
	border-radius: 12px 12px 0 0;
	padding: 24px;
	box-sizing: border-box;
}

/* El contenedor que emite `core/icon` es un DIV.wp-block-icon. */
.bxm-caja-contacto .wp-block-icon { line-height: 0; }

.bxm-caja-contacto .wp-block-icon svg {
	width: 40px;
	height: 40px;
	fill: #0078BE;
	display: block;
}

/* Subtítulo: MISMO estilo que `.bxm-sidebar .bxm-widget-title`.
   ⚠️ SIN `margin`. El `margin: 0 0 30px` del sidebar anulaba el `blockGap` del
   grupo (por especificidad, igual que en los parrafos) y dejaba el ICONO pegado
   al titulo. Con el blockGap, los tres huecos internos quedan IGUALES:
       icono -> titulo · titulo -> dato · dato -> texto   = 17px los tres
   que es el ritmo simetrico que tiene el icon-box de produccion (medido: 17/17). */
.bxm-caja-contacto h2 {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	color: #54595F;
	text-transform: none;
	padding: 0;
	border: 0;
}

/* El dato lleva enlace `mailto:` (lo pide el usuario: clickeable desde el movil).
   Toma el color del token `enlace` -- el mismo que usa el contenido para los
   enlaces de texto -- y el hover con subrayado que el resto del sitio. */
.bxm-caja-contacto a {
	color: var(--wp--preset--color--enlace);
	text-decoration: none;
}

.bxm-caja-contacto a:hover {
	text-decoration: underline;
}

/* Aire entre un bloque y el siguiente: los 19,2px que ya pone el `blockGap` de la
   columna + 50px pedidos = 69px. Solo DESDE el segundo, con `+`, para no mover el
   aire de arriba del primero.
   ⚠️ El `margin-bottom` que tenia antes esta regla NUNCA se aplico: el
   `:root :where(.is-layout-flow) > * { margin-block-end: 0 }` de WordPress empata
   en (0,1,0) y gana por orden de carga. La separacion real la da el blockGap, asi
   que se ajusta con `margin-block-start`, que es la misma propiedad que el usa. */
.bxm-caja-contacto + .bxm-caja-contacto {
	margin-block-start: var(--bxm-gap-tarjetas);
}

/* Texto: MISMO estilo que `.bxm-sidebar .bxm-materias a` (lh 1.8 = 28.8px).
   ⚠️ SIN `margin: 0`: esa declaracion gana por especificidad (0,1,1) al
   `:root :where(.is-layout-flow) > * { margin-block-start }` del blockGap (0,1,0)
   y PEGABA el dato con el texto de abajo. El grupo ya trae `blockGap: 17px`, que
   es lo que los separa -- igual que el <br><br> de produccion. */
.bxm-caja-contacto p {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	color: #1A1D1F;
}

@media (max-width: 781px) {
	/* En movil las dos columnas se apilan y la separacion baja. */
	.bxm-caja-contacto { padding: 20px; }
	/* La separacion tambien baja en movil, en la misma proporcion que el resto. */
	.bxm-caja-contacto + .bxm-caja-contacto { margin-block-start: var(--bxm-gap-tarjetas-movil); }
	/* 1/3 menos que en escritorio, en la misma proporcion. */
	.bxm-caja-contacto .wp-block-icon svg { width: 34px; height: 34px; }
}

/*
   FORMULARIO DE CONTACTO — /contacto-y-soporte-tecnico/
   Es un formulario DISTINTO al del newsletter a proposito: aquel da de alta un
   suscriptor en Listmonk; este manda un mensaje al buzon del sitio. No comparten
   destino, ni finalidad, ni transporte.

   Los valores repiten los del formulario de comunidad para que los dos se vean
   iguales en el sitio: mismo borde, mismo radio, mismo foco.
*/

/*
	COLOR DEL FORMULARIO (decision del usuario): fondo del token `formulario` con texto
	blanco y sin borde, tanto en CONTACTO como en SUSCRIPCION, en todo el sitio.

	Va por TOKEN (`--wp--preset--color--formulario`) y no con el hex suelto, para
	que cambiar el tono sea una linea en theme.json.

	19-oct-2026 — CONTRASTE CERRADO: el token bajo de #FF6F3C a #C94A0E.
	Blanco sobre #C94A0E = 4,70:1 → CUMPLE AA (4,5:1). Antes, sobre #FF6F3C, daba
	2,77:1 y fallaba. Los CAMPOS siguen con fondo blanco y texto oscuro para que el
	dato se lea; lo que va en blanco sobre el naranja son las etiquetas, que son texto
	corto y en negrita, ahora por encima del umbral.
	Si se quisiera volver al naranja vivo (#FF6F3C) habria que resolver la pareja
	texto/fondo, no solo el fondo.
*/

.bxm-contacto-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 640px;
}

/* (el color de marca va en el BOTON, no en el contenedor ni en las etiquetas) */

.bxm-contacto-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bxm-contacto-campo label {
	font-size: .95rem;
	font-weight: 600;
	color: #192335;
}

.bxm-contacto-req { color: var(--wp--preset--color--enlace); }

.bxm-contacto-campo input[type="text"],
.bxm-contacto-campo input[type="email"],
.bxm-contacto-campo select,
.bxm-contacto-campo textarea {
	width: 100%;
	padding: 13px 16px;
	font-size: 1rem;
	font-family: inherit;
	color: #192335;
	background: #FFFFFF;
	border: 1px solid #CFC7C7;
	border-radius: 8px;
	box-sizing: border-box;
}

.bxm-contacto-campo textarea { resize: vertical; line-height: 1.5; }

.bxm-contacto-campo input:focus,
.bxm-contacto-campo select:focus,
.bxm-contacto-campo textarea:focus {
	outline: 2px solid #0078BF;
	outline-offset: 1px;
	border-color: #0078BF;
}

/*
	COPIA DEL MENSAJE — fila, no columna
	`.bxm-contacto-campo` apila en columna, que es lo correcto para un campo de
	texto y lo incorrecto para un check: aca la casilla va a la IZQUIERDA del
	texto. Ademas los inputs del formulario llevan `width: 100%` y padding, que
	sobre un checkbox lo deforman — por eso la casilla se dimensiona aparte.

	Va DESPUES de `.bxm-contacto-campo label` a proposito: misma especificidad
	(0,1,1), gana el ultimo, y asi el texto de una opcion no sale en negrita
	como si fuera la etiqueta de un campo obligatorio.
*/

.bxm-contacto-copia { flex-direction: row; }

.bxm-contacto-copia label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	font-size: .95rem;
	line-height: 1.45;
	cursor: pointer;
}

/* El foco de los campos de texto pinta un outline azul de 2px; en la casilla
   alcanza con el anillo nativo del navegador, que ya es visible. */
.bxm-contacto-copia input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0 0;
	padding: 0;
	accent-color: #0078BF;
	cursor: pointer;
}

/* El CTA usa el amarillo de marca (regla de BXM: #FFDE00 solo para CTAs).
   Contraste #192335 sobre #FFDE00 = 11.78:1 (AA y AAA). */
/*
	RITMO VERTICAL DE LAS DOS COLUMNAS DE CONTACTO
	⚠️ Estas dos variables se movieron al `:root` de ARRIBA el 18-sep-2026 (habia dos
	bloques `:root`, cada uno con la mitad de las variables). No se vuelven a declarar
	aqui: el lugar es el de arriba, donde queda ANTES del `@media` que cambia
	`--bxm-header-h`.
*/

/*
	AIRE ENTRE EL TEXTO Y EL FORMULARIO DE CONTACTO
	MISMO valor que la separacion entre las tarjetas de la derecha, por SIMETRIA:
	las dos columnas arrancan alineadas en el mismo pixel y el ritmo vertical tiene
	que ser el mismo en las dos. Por eso los dos usan la MISMA variable
	(`--bxm-gap-tarjetas`), y no dos numeros iguales escritos por separado que se
	desincronizan al primer ajuste.

	El formulario queda dentro de la columna izquierda, cuyo `blockGap` le pone
	`margin-block-start: 1.2rem` (19,2px) y lo deja pegado al texto de arriba.

	⚠️ NO alcanza con `.bxm-contacto-form { margin-block-start: 100px }`: el selector
	de WordPress es `:root :where(.is-layout-flow) > *`, que da (0,1,0) -- el `:root`
	cuenta y el `:where()` no -- y EMPATA con esa regla; la del core se carga despues
	y gana por orden. Medido: declaraba 100px y computaba 19,2px. Se ANCLA el selector
	con `.wp-block-column`, que lo sube a (0,2,0).
*/

.wp-block-column .bxm-contacto-form {
	margin-block-start: var(--bxm-gap-tarjetas);
}

.bxm-contacto-btn {
	align-self: flex-start;
	/* Color del CTA: el naranja del token `formulario`, con texto BLANCO y sin borde,
	   igual que el CTA de suscripción (`.bxm-comunidad-btn`) y el de adquisición.
	   Antes este botón era el único con texto azul #192335: se veía como un CTA de
	   otra familia al lado de los demás (pedido del dueño, 19-oct-2026).
	   Contraste cerrado el 19-oct-2026: se oscureció el token `formulario` a #C94A0E en
	   theme.json y el blanco pasa de 2,77:1 a 4,70:1 (AA). El texto no se tocó. */
	background-color: var(--wp--preset--color--formulario, #C94A0E);
	color: #FFFFFF;
	border: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	padding: 14px 32px;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	transition: background-color .2s ease;
}

/* Hover un paso MÁS OSCURO que la base nueva (#C94A0E → #B0400B = 5,86:1 con el texto
   blanco). Antes era #E85F2B, que sobre el naranja viejo daba 3,44:1 e incumplía. */
.bxm-contacto-btn:hover,
.bxm-contacto-btn:focus { background-color: #B0400B; }

.bxm-contacto-btn[disabled] { opacity: .65; cursor: progress; }

.bxm-contacto-aviso {
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
	color: #54595F;
	min-height: 0;
}

.bxm-contacto-aviso.es-error { color: #C62828; }
.bxm-contacto-aviso.es-ok    { color: #2E7D32; }

/* Honeypot: invisible para personas, presente en el DOM para los bots.
   Sin `display:none` a proposito — algunos bots lo detectan y lo saltan. */
.bxm-contacto-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	opacity: 0;
	height: 0;
	width: 0;
	overflow: hidden;
}

@media (max-width: 781px) {
	.bxm-contacto-btn { align-self: stretch; }
	/* El aire de arriba del formulario baja en movil: 100px es demasiado en 375. */
	.wp-block-column .bxm-contacto-form { margin-block-start: var(--bxm-gap-tarjetas-movil); }
	/* La casilla de la copia tambien tiene que ser comoda de tocar con el dedo:
	   la fila entera (casilla + texto) llega a los 44px del estandar del sitio. */
	.bxm-contacto-copia label { min-height: 44px; }
}

/* CONTACTO EN TABLET: las tarjetas van ABAJO del formulario y EN FILA (601-1024px).
   Arriba de 782px WordPress pone las dos columnas en fila y la de tarjetas queda en 180-262px: el texto no se
   lee. Debajo de 781px las apila, pero entonces cada tarjeta ocupa los 643px completos y la página se estira.
   ⚠️ El apilado NO se hace con `flex-basis`: WordPress lo gobierna con
   `@media (max-width: 781px) { .wp-block-column { flex-basis: 100% !important } }` y un `!important` no se
   gana sin otro. Se hace con `min-width: 100%`, que WordPress NO toca (en `.wp-block-column` solo declara
   `min-width: 0`), anclado a `.wp-block-columns >` para quedar en (0,2,0) y ganarle al (0,1,0) del core.
   Es la misma técnica del `margin-block-start`: no pelear de frente contra la propiedad que WordPress
   controla, sino mover la que deja libre. Detalle → sitio/NOTAS-CSS.md §12 */

@media (min-width: 601px) and (max-width: 1024px) {

	/* Las tarjetas se ponen en fila. El gap es mas chico que el vertical: al ir
	   lado a lado no necesitan el aire de 69px, y con 24px entran mas anchas. */
	.bxm-col-tarjetas {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 24px;
	}

	/* `flex: 1 1 180px` + `wrap`: mientras entren tres de 180px van las tres; cuando el
		   ancho no alcanza, la ultima baja sola en vez de dejar las tres ilegibles.
		   Medido: a 768px entran 3 (198px cada una); a 601px entran 2. */
	.bxm-col-tarjetas > .bxm-caja-contacto {
		flex: 1 1 180px;
		min-width: 0;
	}

	/* Ya estan en fila: el margen de apilado sobra y descuadraria la ultima. */
	.bxm-col-tarjetas > .bxm-caja-contacto + .bxm-caja-contacto {
		margin-block-start: 0;
	}

}

/*
   EL APILADO EN TABLET EXIGE `!important`, y esta justificado
   Entre 782 y 1024px WordPress fuerza las columnas en fila con
       @media (min-width: 782px) { .wp-block-columns { flex-wrap: nowrap !important } }
   y un `!important` no se gana con otro selector, por mas especificidad que tenga:
   solo se gana con otro `!important`. No hay propiedad libre que sirva aca.

   Se probo primero con `min-width: 100%` (que WordPress si deja libre) y el
   resultado fue PEOR: sobre un contenedor `nowrap`, dos items al 100% suman 200%
   y la pagina desbordaba 832px a 1024, 734px a 900 y 684px a 834.

   Va acotado a las dos columnas de contacto y solo en ese rango, con el motivo
   escrito al lado. Es la unica excepcion a la regla de cero `!important`.
*/

@media (min-width: 782px) and (max-width: 1024px) {

	/* Permite que la segunda columna baje en vez de estirar la fila. */
	.wp-block-columns:has(> .bxm-col-tarjetas) {
		flex-wrap: wrap !important;
	}

	/* Y cada columna toma el ancho completo, asi la de tarjetas queda ABAJO. */
	.wp-block-columns > .bxm-col-form,
	.wp-block-columns > .bxm-col-tarjetas {
		flex-basis: 100% !important;
	}
}

/* En movil tres tarjetas en fila no se leen: vuelven a apilarse. */
@media (max-width: 600px) {
	.bxm-col-tarjetas {
		flex-direction: column;
	}
}

/*
   ACORDEON DE FAQ NATIVO (bloques core/details)

   La "flecha" del acordeon NO es un SVG ni un icono: es el marcador que el
   navegador dibuja solo en un <summary> (list-style: disclosure-open). Por eso
   se pinta con ::marker, que es la unica via estandar que existe. No hay
   equivalente en theme.json: no es un elemento ni un bloque, es un pseudo-elemento.

   Acotado a .bxm-faq para NO tocar ningun otro <details> de la pagina. El
   contenido migrado trae mas de uno, y el generador del schema de FAQ usa
   exactamente la misma marca.

   Ojo con el ::marker de las LISTAS: arriba hay reglas que lo APAGAN con
   `content: none` donde no se quiere viñeta. Aqui se pinta, que es lo contrario.
*/
.bxm-faq > summary::marker {
	color: var(--wp--preset--color--primary);
	font-size: 1.33em;
	line-height: 1;
}

/*
 * La fila de la pregunta es el elemento CLICABLE del acordeon, asi que entra en
 * la regla de area minima tactil: WCAG 2.2 (2.5.8) pide 24x24 como minimo legal
 * y 44x44 como recomendado. Medido antes: 327x42 — dos pixeles cortos.
 * `min-height` en vez de padding: no cambia el ritmo vertical de los 5 items,
 * solo garantiza el piso cuando el contenido es mas bajo.
 * El ancho ya lo da el bloque (ocupa el 100% del contenedor).
*/
.bxm-faq > summary {
	min-height: 44px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PADDING VERTICAL DE LAS SECCIONES EN MÓVIL — 45px

   Taylor: "te parece si les definimos a todas padding top y bottom de 45px en mobile?"
   Sí: 45 cae en el rango que las secciones tenían antes de unificarlas (40 a 56), y al
   ser las cuatro iguales se mantiene la simetría. Baja el scroll de la portada en
   ~216px (4 secciones x 27px x 2 lados).

   ⚠️ ESTE BLOQUE VA AL FINAL DEL ARCHIVO A PROPÓSITO. La primera vez la regla se puso
   en el bloque de 781px de más arriba y solo la tomaron 2 de las 4 secciones: las
   reglas BASE de .bxm-estudiantes y .bxm-newsletter están más abajo en el archivo y,
   con la MISMA especificidad, ganan por orden. Acá no puede venir nada después.

   ⚠️ Una sola regla agrupada: tener el mismo valor repetido por sección y por
   breakpoint fue justamente lo que los desincronizó antes. Escritorio (72px) intacto. */
@media (max-width: 781px) {
	.bxm-pasos,
	.bxm-rendimiento,
	.bxm-estudiantes,
	.bxm-newsletter {
		padding-top: 45px;
		padding-bottom: 45px;
	}
}

/*
   TABLAS DE PLANES DE /planes/ (bloques nativos, no Elementor)

   El contenido de la página son 4 acordeones (core/details, clase .bxm-anio),
   uno por año, y dentro de cada uno una fila de 3 tarjetas de plan
   (core/column, clase .bxm-plan).

   El lenguaje visual NO es nuevo: es el mismo de .bxm-caja-contacto —
   blanco, filo superior de 5px en color, 12px de radio arriba y 24px de aire.
   El marcador del <summary> se deja el nativo (disclosure) porque es lo único
   que avisa que el bloque se abre; solo se le cambia el color.

   ⚠️ La clase del acordeón es .bxm-anio, NO .bxm-faq: el generador de schema
   de FAQ del mu-plugin convierte en FAQ todo <details> con la marca .bxm-faq,
   y estas tablas de precios no son preguntas frecuentes.
*/

.bxm-anio {
	margin-block-start: 30px;
}

/* El año es un <summary>, no un encabezado: su tamaño no lo fija la escala
   tipográfica. Se le da el de H3 (1.5rem / 600) porque es el nivel de sección
   dentro de la página. */
.bxm-anio > summary {
	font-family: 'Poppins', sans-serif;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
	color: #0078BF;
	cursor: pointer;
	padding-block: 14px;
}

/* El nombre del año pasa a ser un h2 dentro del `summary` (jerarquía de
   encabezados: la página salta de h1 a h3 sin un h2 intermedio y los auditores lo
   marcan). El summary ya fija el tamaño, así que el h2 hereda TODO para que el
   aspecto no cambie: si no, WordPress le aplicaría su tamaño de h2 (1.875rem) y
   los títulos de año crecerían. */
.bxm-anio > summary h2 {
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
    /* `display: inline` es OBLIGATORIO, no estético. El h2 va dentro del summary
    por semántica (cada año es una sección), pero un `list-item` cuyo contenido
    empieza con un BLOQUE le genera al marcador una línea anónima propia: el
    triángulo quedaba flotando 31,2px arriba del texto y el summary medía 90,4px
    en vez de 59,2. En línea, marcador y texto comparten la misma línea. */
    display: inline;
}

.bxm-anio > summary::marker {
	color: #0E7A45;
	font-size: 0.75em;
	line-height: 1;
}

/* Tres tarjetas: mientras entren lado a lado van las tres; cuando el ancho no
   alcanza, WP las apila solo y esta separación las despega. */
.bxm-planes {
	margin-block-start: 24px;
	/* Ancho y separación MEDIDOS en producción: columnas de 312px con 20px entre
	   ellas. El ancho lo gobierna el CONTENEDOR, no la tarjeta: si se limita la
	   tarjeta a 312px, la separación entre ellas crece a 68px. 3 x 312 + 2 x 20
	   = 976px. Con `auto` queda centrado. */
	max-width: 976px;
	margin-inline: auto;
	gap: 20px;
}

/*
   LA TARJETA DE PLAN, EMULANDO PRODUCCIÓN

   Valores MEDIDOS del `.elementor-price-table` de producción (no leídos de
   una captura), al 14-sep-2026:

     contenedor   fondo #F9FAFA · borde 1px #E0E0E0 · radio 11px · overflow hidden
     banda        fondo #0078BF · alto 122px · padding 20px 0
     nombre       blanco · 24px · 600 · centrado
     precio       65px · 600 · #555555 · bloque de 153px con padding 40px 0
     «Mensual»    16px · 400 · #54595F
     beneficios   16px · 400 · #192335 · icono de 21px · 15px entre items
     botón        padding 15px 30px · radio 4px · 16px · 500 · ancho 199px
     cinta        diagonal, azul marino #1B4965, caja de 231x231 en la esquina

   ⚠️ UNA DIFERENCIA DELIBERADA: el botón. Producción usa #14A05C, que con
   texto blanco da 2,9:1 y NO pasa WCAG AA (el mínimo es 4,5:1). Acá se queda
   el #0E7A45 del estándar de color del sitio, que mide 5,40:1. Se emula la
   FORMA (radio 4px, padding 15/30, ancho 199px), no el color inaccesible.
*/

.bxm-plan {
	background: #F9FAFA;
	border: 1px solid #E0E0E0;
	border-radius: 11px;
	overflow: hidden;          /* recorta la banda azul y la cinta diagonal */
	padding: 0;
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* La banda del nombre: sangra hasta los bordes y respeta el radio de arriba. */
.bxm-plan > h3 {
	background: #0078BF;
	color: #FFFFFF;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	margin: 0;
	padding: 20px 16px;
	min-height: 122px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* El precio, como en producción: grande, gris y centrado. */
.bxm-plan .bxm-plan-precio {
	color: #555555;
	/* 65px (el valor medido en producción) menos un tercio, pedido por el usuario:
	   65 x 2/3 = 43,33px; y un 10% menos pedido el 14-oct-2026: 43,33 x 0,9 = 39px
	   (2,4375rem). Antes de cambiar el tamaño se mira cuál era el anterior y en qué
	   dirección hay que moverse: acá se achica. */
	font-size: 2.4375rem;
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	/* 40 arriba y 20 abajo: el padding va DESIGUAL a propósito, porque lo que se
	   mira no es la caja del bloque sino el aire entre la cabecera y la primera
	   línea de beneficios. Ese tramo incluye dos cosas que no son del bloque: los
	   13px de padding-top del `li` y el medio-leading del último renglón. Medido:
	   con 40/40 el precio se veía 26px alto; con 40/13 quedaba 6px bajo; con 40/20
	   los tres planes quedan dentro de ±2px. */
	padding: 40px 12px 20px;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Altura mínima del bloque de precio, para que los LISTADOS arranquen a la misma
   altura en los tres planes de cada fila (pedido del usuario: orden, simetría).

   La causa de la desalineación es que el plan gratis no lleva la línea
   «equivale a US$…»: su bloque de precio medía 145px y el de los otros 168px, así
   que su listado empezaba 23px más arriba. 168px es la altura del bloque MÁS
   alto, o sea la que ya tienen los planes pagos; el contenido va centrado (el
   bloque es flex con `justify-content: center`), así que el gratis queda con su
   precio centrado en el mismo alto.

   Solo en escritorio: en móvil las tarjetas se apilan y los 23px serían aire
   desperdiciado. */
@media (min-width: 782px) {
	.bxm-plan .bxm-plan-precio {
		/* `box-sizing: border-box` es IMPRESCINDIBLE acá, y su ausencia fue un
		   error: el tema usa `content-box`, así que un `min-height` NO cubre el
		   padding. Con 168px pelados el bloque medía 168 + 80 de padding = 248px
		   reales — 80px de más, que es el espacio que sobraba.
		   Con border-box, 168px ES la altura real del bloque (88 de contenido +
		   80 de padding), o sea la que ya tenían los planes pagos. */
		box-sizing: border-box;
		min-height: 168px;
	}
}

.bxm-plan .bxm-plan-periodo {
	font-size: 1rem;
	font-weight: 400;
	color: #54595F;
}

/* El equivalente en dólares: la referencia, más chica que el precio. */
.bxm-plan .bxm-precio-usd {
	font-size: 0.875rem;
	font-weight: 400;
	color: #54595F;
	line-height: 1.6;
}

/*
   LA REFERENCIA EN COLONES ES UNA LÍNEA DE REFERENCIA, NO UN SEGUNDO PRECIO

   `.bxm-monedalocal` (mu-plugin bxm-monedalocal.php) nace con `font-size: .9em`, que dentro de
   `.bxm-plan-precio` son 39px: casi el mismo tamaño que el precio y demasiado para los 288px
   útiles de la tarjeta (312 − 12 de padding por lado). Medido en la réplica con el CSS real y
   Poppins: la etiqueta «Precio en colones:» se partía en DOS renglones, el bloque de precio de los
   planes pagos medía 295px contra 168px del plan gratis, y sus listados arrancaban en y=418 contra
   y=291 — 127px de desalineación entre tarjetas.

   Acá se le da la escala de la línea de referencia que ya usa la casa (`.bxm-precio-usd`: 0.875rem,
   #54595F), se fuerza un solo renglón y el monto queda un punto mayor que su etiqueta. Medido tras
   el cambio: bloque de 168px en los tres planes y los tres listados en y=291 (los tres bloques
   caben dentro del `min-height: 168px` de arriba, así que la simetría se mantiene sola).

   Especificidad (0,3,0) contra el (0,1,0) del mu-plugin: gana sin `!important`.
*/
.bxm-plan .bxm-plan-precio .bxm-monedalocal {
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.6;
	opacity: 1;
	color: #54595F;
	white-space: nowrap;
}

.bxm-plan .bxm-plan-precio .bxm-monedalocal .bxm-monto {
	font-size: 1.15em;
	font-weight: 600;
	color: #555555;
}

.bxm-plan .bxm-plan-precio .bxm-monedalocal sup {
	font-size: .75em;
}

/* Los beneficios: en producción el icono es OSCURO, no verde. */
/* DOS clases a propósito: con una sola (0,1,0) empata con la regla de WordPress
   `:root :where(.is-layout-flow) > * { margin-block-start: 1.2rem }` —que también
   es (0,1,0)— y gana ella por orden de aparición, metiendo 19,2px de aire.
   Se probó neutralizar TODA la familia con una regla global `[class*="bxm-"]` y
   fue peor: borraba el espaciado de componentes que sí lo necesitan (medido:
   /contacto/ perdía 643px de alto y pasaba de 6 a 16 elementos pegados). */
.bxm-plan .bxm-plan-features {
	flex-grow: 1;
	margin: 0;
	/* SIN marcador automático: el `::marker` solo acepta tipografía (fuente,
	   color, content) — NO se le puede dar margen ni posición, así que quedaba a
	   14px del borde y a 29px del texto, sin forma de moverlo. El ✓ pasa a un
	   `::before` del `li`, que es una caja normal y se posiciona donde haga falta. */
	list-style: none;
	padding: 0 24px 22px;
	display: flex;
	flex-direction: column;
	/* SIN `gap`: la separación la dan el padding del ítem y su línea. Con `gap`
	   se sumaba al padding y quedaba un hueco irregular. */
	gap: 0;
}

.bxm-plan-features li {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	color: #192335;
	/* ⚠️ SIN margen: en flex los márgenes NO colapsan, se SUMAN al padding y la
	   separación queda irregular. El aire lo da este padding, medido contra
	   producción (allí cada ítem mide 52px de contenido + 17px de separador). */
	position: relative;         /* referencia para el ✓ */
	margin: 0;
	/* 13px arriba y abajo: producción mide 52px de ítem con una línea de texto de
	   26px (26 + 13 + 13).
	   Los 16px de la izquierda reservan el ✓ (8px de glifo) más su aire: el texto
	   queda a ~10px del ✓. */
	padding: 13px 0 13px 16px;
}

/* El ✓ de cada beneficio. Como caja propia se controla a gusto: arranca en el
   MISMO x que el inicio de las líneas separadoras (el borde izquierdo del `li`)
   y así el adorno queda alineado con el separador en vez de colgando afuera. */
.bxm-plan-features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 13px;                  /* alineado con la primera línea (mismo padding) */
	color: #192335;
	font-size: 1rem;
	line-height: 1.6;
}

/* La línea entre beneficios: es el separador de producción, medido como un
   `::before` de 2px en #DDDDDD (gris suave). Acá se hace con `border-top`, que
   es nativo y no necesita pseudo-elemento. Va del SEGUNDO ítem en adelante:
   en producción el primero mide 52px y los demás 69px — o sea que el primero
   no lleva línea. */
.bxm-plan-features li + li {
	border-top: 2px solid #DDDDDD;
}

.bxm-plan .wp-block-buttons {
	margin: 0;
	margin-block-start: auto;
	padding: 30px 24px;
	display: flex;
	justify-content: center;
}

/* Ancho de contenido, no al 100%: producción lo tiene en 199px. */
.bxm-plan .wp-block-button {
	width: auto;
}

.bxm-plan .wp-block-button__link {
	width: auto;
	min-width: 199px;
	background-color: #0E7A45;
	color: #FFFFFF;
	border-radius: 4px;
	padding: 15px 30px;
	font-size: 1rem;
	font-weight: 500;
	text-align: center;
}

/*
   LA TARJETA DESTACADA (`.bxm-plan-destacado`)

   La marca es una CLASE en la columna, puesta desde el contenido. Antes se
   deducía del párrafo «Recomendado» con `:has()`; se pasó a clase por pedido
   del usuario: es explícita, se ve en el editor y permite borrar ese párrafo
   oculto del contenido.

   No es la normal con un lazo: cambia de color entera. Son SEIS diferencias
   medidas de producción, no una:

       cabecera            #FFCC00 (amarillo) en vez de #0078BF
       título del plan     #1B4965 (azul marino) en vez de blanco
       fondo del precio    #F0F0F0 (gris claro) en vez de transparente
       botón               #FFCC00 con texto #1B4965, en vez de verde y blanco
       ancho del botón     266px en vez de 199px

   El contraste acá sale mejor que en la normal: marino sobre amarillo da
   ~9:1 (AAA). En estas dos sí se copia el color tal cual viene del origen.
*/

.bxm-plan-destacado > h3 {
	background: #FFCC00;
	color: #1B4965;
}

/* El gris va en el CONTENEDOR, no pieza por pieza.

   En producción el gris cubre el CUERPO entero: precio, beneficios y el aire del
   CTA. Puesto por elementos quedaba sin cubrir lo que hay ENTRE ellos —y el
   padding del bloque del botón—, y como el fondo de la tarjeta es casi blanco
   (#F9FAFA) se veía una franja clara colgando dentro del gris.
   En el contenedor, todo lo que no tenga fondo propio muestra gris: no puede
   quedar hueco. */
.bxm-plan-destacado {
	background-color: #F0F0F0;
}

.bxm-plan-destacado .bxm-plan-periodo,
.bxm-plan-destacado .bxm-precio-usd {
	color: #54595F;
}

.bxm-plan-destacado .wp-block-button__link {
	background-color: #FFCC00;
	color: #1B4965;
	min-width: 266px;
	/* 600 en el CTA del plan que interesa vender (pedido del usuario). Las
	   demás tarjetas quedan en 500, que es el peso medido en producción. */
	font-weight: 600;
}

.bxm-plan-destacado .wp-block-button__link:hover,
.bxm-plan-destacado .wp-block-button__link:focus {
	background-color: #E6B800;
}

/* La cinta «Recomendado»: banda DIAGONAL recortada por el `overflow: hidden`
   de la tarjeta, igual que la de producción.

   Cómo lo hace producción, medido: un recuadro de 150x150 en la esquina con
   `overflow: hidden`, y dentro una banda de 300px rotada (el padre lleva
   `rotate(90deg)` y la banda `rotate(45deg)`, de ahí la diagonal). El ancho de
   300px y los 13px del texto salen de ahí.

   Acá se logra con un solo elemento: la banda de 300px rotada 45°, con su
   CENTRO puesto a 91px de la esquina superior derecha —que es donde queda el
   centro del recuadro de producción, escalado al ancho de esta tarjeta— y
   recortada por el `overflow: hidden` del contenedor. Los offsets salen de
   esa cuenta: `right = -(300/2 - 91)` y `top = 91 - alto/2`.

   Solo dentro de la tabla: la tarjeta de año usa la misma clase para
   «Más Popular» y ahí va en el flujo normal, no como cinta. */

@media (max-width: 781px) {
	.bxm-plan .bxm-plan-precio {
		/* Mismo salto que en escritorio: 3rem/4.0625rem = 0,738. Con el precio nuevo
		   (39px de escritorio, un 10% menos que 43,33) el móvil queda en
		   39 x 0,738 = 28,8px (1,8rem): el mismo 10% y la misma proporción. */
		font-size: 1.8rem;
	}
	.bxm-plan > h3 {
		min-height: 84px;
		font-size: 1.25rem;
	}
	.bxm-plan-features {
		padding: 0 18px;
	}
	.bxm-plan .wp-block-buttons {
		padding: 24px 18px;
	}
	/* Esta regla NO es de las tarjetas: es del <summary> del año. Se perdió al
	   reemplazar el bloque de arriba y se repone acá, en el mismo breakpoint. */
	.bxm-anio > summary {
		font-size: 1.25rem;
	}
}

/*
   PRECIO SECUNDARIO EN DÓLARES

   La tienda cobra en colones (moneda principal) y el dólar es una referencia
   para quien piensa en dólares. El span lo agrega el mu-plugin
   `bxm-precio-usd.php` en `woocommerce_get_price_html`, así que aparece en
   catálogo, ficha y relacionados, pero NO en carrito/checkout (ahí el importe
   que se cobra es en colones y un segundo número confunde).

   Va en `em` a propósito: tiene que quedar más chico que el precio de colones
   sea cual sea el tamaño que ese precio tenga en cada plantilla.
*/
.bxm-precio-usd {
	display: block;
	font-family: 'Poppins', sans-serif;
	/* Proporcional PERO con tope: en la ficha el precio de colones mide 36px y un
	   0.78em daría 28px para una mera referencia informativa. El `min()` lo deja
	   en 0.78em cuando el precio es chico (catálogo: 10px) y lo frena en el texto
	   base (16px) cuando el precio es grande. Nunca queda más grande que el cuerpo. */
	font-size: min(0.78em, 1rem);
	font-weight: 400;
	line-height: 1.5;
	color: #4A5568;
	white-space: nowrap;
}

/*
   TARJETAS DE AÑO (arriba de las tablas en /planes/)

   Son el primer paso de la página: cada año con su descripción y un botón que
   baja a su tabla. Mismo lenguaje que .bxm-plan y que .bxm-caja-contacto:
   blanco, filo superior de 5px, 12px de radio arriba, 24px de aire.

   Las descripciones y la cinta «Más Popular» son las ORIGINALES de producción,
   palabra por palabra.
*/

/* La tarjeta destacada se distingue con el verde de los planes, igual que
   el plan completo dentro de cada tabla. */

/* El botón lleva al ancla de su año: no es un CTA de compra, así que va
   neutro en vez del verde de los CTA de planes. */

/* La nota de suscripción, al pie de todas las tablas. Es el texto ORIGINAL de
   producción (con su negrita y su enlace), solo con el enlace hecho local: en
   producción apuntaba a un dominio ajeno. */
/* DOS clases (regla del pitfall 26): con una sola, WordPress le gana con
   `:root :where(.is-layout-flow) > * { margin-block-start: 1.2rem }` y la nota
   quedaba a 19,2px de las tablas —medido—, o sea 21px más alta que el hueco de
   abajo y sin centrar.

   El espacio de arriba tiene que igualar al de abajo para que la nota quede
   centrada entre el final de las tablas y el footer. El de abajo lo pone el
   padding inferior de `.bxm-page-content`, que es FLUIDO —medido: 40px a 1440,
   38,4 a 1280, 30,72 a 1024, 24 a 390—, y esos cuatro valores caben en
   `clamp(1.5rem, 3vw, 2.5rem)`. Con un valor fijo la nota queda centrada en un
   ancho y descentrada en los demás: por eso va el mismo clamp, no un número. */
.bxm-page-content .bxm-planes-nota {
	margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
	color: #4A5568;
}

/* El enlace «¿Olvidaste tu correo o contraseña?» del MODAL de login (clase
   propia, del mu-plugin). Lighthouse no lo audita porque el modal está oculto,
   pero al abrirlo el problema es el mismo: medía 404 x 20px y la norma (axe,
   target-size = WCAG 2.5.8 AA) pide 24 de alto como mínimo.
   NO se toca el `display`: el plugin lo deja en `block` y cambiarlo movería el
   texto y el subrayado. Solo se le da altura real. */
.bxm-login-der .bxm-login-olvidaste {
	min-height: 24px;
}

/*
   EL RECUADRO QUE DEJA EL CLIC (en todo el sitio).
   El core emite `:where(.wp-site-blocks :focus) { outline: 2px solid … }`: usa `:focus` y NO
   `:focus-visible`, así que dibuja el recuadro al hacer clic con el mouse sobre cualquier enlace, botón o
   `<summary>`, y se queda hasta que se hace clic en otro lado.
   Acá se anula SOLO cuando el foco no viene del teclado (`:not(:focus-visible)`): al hacer clic no aparece
   nada y al navegar con Tab el anillo sigue ahí, que es requisito de accesibilidad (WCAG 2.4.7). Borrarlo sin
   esa condición dejaría el sitio inoperable con teclado.
   Sin `!important`: el `:where()` del core no aporta especificidad (0,0,0) y esta regla es (0,1,0).
   ✅ VERIFICADO 18-sep-2026 con Tab REAL (no `focus()` por JS) en 3 páginas y 133 elementos: el 100% recibe
   el recuadro al enfocar con teclado y 22-27 además cambian de color o subrayado por reglas del tema. Se
   probó QUITARLA: en el footer, el CTA y el botón LOG IN el recuadro de 2px vuelve a dibujarse con el color
   del texto al hacer clic — volvería el problema en todo el sitio sin ganar accesibilidad. Por eso NO se
   acota: no duplica al core, aplica `:focus-visible` (el patrón recomendado) sobre el `:focus` del core.
   La medición y la nota sobre el color de acento del navegador → sitio/NOTAS-CSS.md §4
*/
:where(.wp-site-blocks :focus):not(:focus-visible) {
	outline: none;
}

/* El header con sesión: «MI CUENTA» ocupa el lugar de «Crear cuenta».
   Azul primario, no amarillo: el amarillo es el código de color del proceso de crear cuenta. */
.bxm-header .bxm-btn-cuenta {
  height: 32px; padding: 0 14px; border-radius: 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; font-family: inherit; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; text-decoration: none;
  background: var(--wp--preset--color--primary); color: #fff;
}
.bxm-header .bxm-btn-cuenta:hover { background: var(--wp--preset--color--enlace); color: #fff; }

/* EL ESPACIO QUE NECESITA EL ☰ A >=1270 (opción A del dueño, 18-sep-2026).
   El ☰ vive en su propio bloque de navegación (`wp:navigation` con `"overlayMenu":"always"`), con el que el
   core marca el contenedor `hidden-by-default` y el botón `always-shown`: solo se RENDERIZA el ☰.
   1) Espacio: a 1300 el header pedía 1314,13px para 1195,06px de área de contenido (exceso 119,07) y a 1440
      pedía 1314,13 para 1220,25 (exceso 93,88). Se libera bajando los espaciados del header en ese rango:
      padding lateral 3,5% → 16px, separación entre bloques 19,2 → 4px y padding lateral de los ítems
      16 → 8px. Ningún elemento se quita, se mueve ni cambia de tamaño.
   2) El ☰ al borde derecho: el grupo `.bxm-header-acciones` se aplana (`display:contents`) y el nav del ☰ se
      ordena último (`order:1`), así participa de la fila del `.bxm-header-inner` y el `space-between` lo pega
      al borde derecho del área de contenido, igual que a <=1269. No se toca `justify-content` ni márgenes.
   Detalle → sitio/NOTAS-CSS.md §6 */
@media (min-width: 1270px) {

  /* 1) EL MENÚ EN LÍNEA (bloque A) YA NO NECESITA NINGUNA REGLA ACÁ.
     Hasta el 18-sep vivía acá —y se BORRÓ— esta regla:

       .bxm-header .bxm-nav .wp-block-navigation__responsive-container
         .hidden-by-default:not(.is-menu-open) { display:block; position:relative; width:auto }

     Existía porque el menú en línea y el panel eran el MISMO bloque: con
     `overlayMenu:"always"` el core marca el contenedor con `hidden-by-default`
     (wp-includes/blocks/navigation.php:693) y su regla de >=600 lo deja en
     `display:none` a todos los anchos, así que había que devolvérselo a mano para
     que los 3 ítems se vieran en la fila. Con los DOS bloques separados el
     contenedor de A ya no lleva `hidden-by-default` y el core lo muestra solo
     (`.wp-block-navigation__responsive-container:not(.hidden-by-default):
     not(.is-menu-open)` con `display:block` dentro de su @media de 600px).
     PRUEBA de que quedó muerta: su selector
     `.bxm-nav .wp-block-navigation__responsive-container.hidden-by-default` no
     matchea NINGÚN nodo (medido en 11 anchos, en los dos estados y con el panel
     abierto) y el valor computado de todas las piezas del header es idéntico con
     la regla puesta y con la regla borrada. */

  /* 2) el espacio que necesita el ☰, tomado de los espaciados del header */
  .bxm-header .bxm-header-inner {
    padding-left: 16px;
    padding-right: 16px;
    /* MÍNIMO, no la separación final: el `justify-content: space-between` que ya
       tenía el bloque reparte el sobrante, así que la separación REAL medida es
       14,83px a 1300 y 26,48px a 1440. Con este mínimo en 8px no entraba entre
       1271 y 1277 (ahí el widget ya se ve y los campos están en su ancho mínimo):
       sobraban 16,47px de contenido para tres huecos de 8px y el ☰ se metía
       7,53px dentro del padding lateral. Con 4px entra a todo >=1271. */
    gap: 4px;
  }
  /* El padding lateral de los ítems del bloque A (es el espacio que se libera para
     el ☰) y el MISMO valor para los del panel de B: a >=1270 el estado aprobado
     medía 12px 8px en el panel (el bloque único aplicaba esta regla a las dos
     cosas), así que se mantiene en los dos y el panel queda idéntico a lo aprobado
     en TODOS los anchos. */
  .bxm-header .bxm-nav .wp-block-navigation__responsive-container .wp-block-navigation-item__content,
  .bxm-header .bxm-nav-panel .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
    padding: 12px 8px;
  }

  /* 3) el ☰ como último ítem de la fila del header.
     El grupo `.bxm-header-acciones` se aplana (`display:contents`) para que sus
     hijos participen de la fila del `.bxm-header-inner`, y el bloque del ☰ (B) se
     ordena ÚLTIMO con `order:1` en su propio nav: así el `space-between` que ya
     tenía el bloque lo pega al borde derecho del área de contenido, igual que a
     <=1269 (donde el grupo es el último hijo de la fila).
     ACA VIVIA, hasta el 18-sep, el aplanado del PROPIO nav del menú
     (`nav.bxm-nav{display:contents}`) y el `order:1` puesto en el BOTÓN: con el
     bloque único el ☰ vivía dentro de ese nav y había que sacarlo a la fila. Con
     los dos bloques el ☰ tiene su nav propio (`nav.bxm-nav-panel`), el aplanado
     del nav del menú dejó de tener función (el contenedor del menú pasa a ser
     hijo del nav y su ancho medido no cambia: 566,53px a 1300 y 1440) y el
     `order:1` se muda al nav del ☰. */
  .bxm-header .bxm-header-acciones {
    display: contents;
  }
  .bxm-header nav.bxm-nav-panel {
    order: 1;
  }
}

/*
   ARREGLOS DEL HEADER — 18-sep-2026 (segunda tanda): los dos defectos que
   reporto el dueno con la sesion iniciada. Nada de aca cambia el estado
   aprobado (el ☰ a todos los anchos, el menu en linea, el panel de 320px con
   25px de padding, el widget, LOG IN ni «Crear cuenta»).
*/

/* 1) LA ✕ DEL MENU NO SE PINTA CON EL MENU CERRADO.
   MEDIDO ANTES (1440/1300/1920, menu cerrado, en los DOS estados): la ✕
   (`.wp-block-navigation__responsive-container-close`) medía 44x44 en
   [758,52 22 44 44] con `display: flex`, y su rect se superponía 1936 px² con
   el TERCER item del menu («Tecnicas de Estudio»): `document.elementFromPoint`
   en su centro devolvia la propia ✕. La causa: el core solo la retira dentro de
   su panel modal, y a >=1270 el contenedor en linea —el que la OPCION A vuelve
   a mostrar con `hidden-by-default:not(.is-menu-open)`— la deja dibujada.
   La clase de estado que el core SI emite al abrir el panel es `is-menu-open`
   (la misma que usa la regla del panel azul, mas arriba en este archivo), asi
   que la ✕ se oculta SOLO mientras el menu esta cerrado: con el panel abierto
   esta regla NO matchea y la ✕ sigue visible, con su tamano, y sigue cerrando.
   Especificidad (0,5,0) contra la (0,2,0) de la regla de mas arriba: gana sin
   `!important` y sin tocar el CSS del core. NO acotar a >=1270: por debajo la ✕
   ya queda 0x0, y con el panel abierto la muestra igual. */
.bxm-header .bxm-nav-panel .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
  display: none;
}

/* 2) EL HUECO ENTRE «MI CUENTA» Y EL ☰ CON SESIÓN INICIADA.
   MEDIDO ANTES a 1440: «MI CUENTA» quedaba a 145,98px del ☰ contra los 26,48px del mismo hueco en el estado
   anónimo. CAUSA: el `space-between` del `.bxm-header-inner` reparte el sobrante en partes iguales y, con
   sesión, el bloque de acceso (457px) se reemplaza por un botón de 98,5px.
   ARREGLO: devolverle al botón, como margen izquierdo invisible, la diferencia entre los dos anchos, para que
   la fila ocupe lo mismo que con el widget. Los dos anchos son los tokens `--bxm-acceso-ancho` (457px) y
   `--bxm-cuenta-ancho` (98,5px) del `:root`, y el margen es su resta en `calc()` (ver ese comentario: antes
   el resultado estaba escrito a mano y quedaba viejo si cambiaba cualquiera de los dos).
   El corte es 1271px y NO 1270: el widget existe a partir de 1271. Verificado en 7 anchos (1271 a 1920): el
   bloque de acceso y el ☰ caen en la misma x con sesión y sin sesión.
   Detalle → sitio/NOTAS-CSS.md §7 */
@media (min-width: 1271px) {
  /* El widget se ancla a su token: así el número no puede quedar desfasado del ancho real (si el
     contenido del widget cambiara, el desfase se vería como desborde, no como un header corrido
     en silencio). */
  .bxm-header .bxm-login-inline {
    width: var(--bxm-acceso-ancho);
  }
  .bxm-header .bxm-header-inner .bxm-btn-cuenta {
    margin-left: calc(var(--bxm-acceso-ancho) - var(--bxm-cuenta-ancho));
  }
}

/* ARREGLO DEL HEADER (tercera tanda, 18-sep-2026): UN SOLO «MI CUENTA» CON SESIÓN POR DEBAJO DE 1271px.
   DEFECTO MEDIDO (sesión iniciada, 1024/900/768/600/375): quedaban DOS «MI CUENTA» —el CTA de móvil, que
   con sesión también pasa a decir «MI CUENTA», más el ancla `.bxm-btn-cuenta`— y el ☰ dejaba de ser el
   último ítem de la fila (hasta 328,88px a la izquierda del borde derecho, 507,06px² de solape con el CTA y
   28px de desborde horizontal a 375).
   CAUSA: `inc/header-sesion.php` reemplaza el bloque de acceso por un `<a class="bxm-btn-cuenta">`, así que
   el `@media (max-width:1270px)` cuyo selector es `.bxm-header .bxm-login-inline` ya no matchea (esa clase
   desapareció del HTML) y el ancla queda visible como último hijo del `.bxm-header-inner`, DESPUÉS del
   grupo del ☰.
   ARREGLO: ocultar SOLO el ancla suelta y SOLO por debajo de 1271px, con el mismo selector y la misma forma
   que la regla vecina (la del margen de >=1271): las dos cubren los dos lados del corte sin `!important` y
   sin tocar ninguna regla existente.
   MEDIDO DESPUÉS: un solo «MI CUENTA» (el del CTA), ☰ con desviación 0,00px contra el borde derecho del área
   de contenido en los 5 anchos, x IDÉNTICAS a las del estado anónimo y desborde 0. A >=1271 no cambia nada
   (el CTA está oculto y el ancla es el único «MI CUENTA»), por eso el corte NO puede subir: sin el ancla,
   arriba de 1270 el header se quedaría sin acción de cuenta.
   Matriz de los 5 anchos y desglose → sitio/NOTAS-CSS.md §2 */
@media (max-width: 1270px) {
  .bxm-header .bxm-header-inner .bxm-btn-cuenta {
    display: none;
  }
}

/* EL MENÚ EN LÍNEA Y EL PANEL DEL ☰ SON DOS BLOQUES (18-sep-2026).
   DEFECTO DEL DUEÑO: «cuando se abre hay una modificación en el header, tanto así que el menú nav se
   oculta». MEDIDO ANTES: con el panel cerrado la fila tenía 3 de 3 ítems del menú; con el panel ABIERTO, 0
   (a 1920/1440/1300), y el widget de acceso se corría 289,02px a 1440 y 283,17px a 1300. CAUSA: menú y panel
   eran UN bloque con `overlayMenu:"always"`, así que al abrir el panel ese elemento dejaba la fila del header
   y pasaba a ser el overlay fijo.
   ARREGLO: `parts/header.html` declara DOS bloques de navegación: A) `.bxm-nav`, el menú EN LÍNEA del header;
   B) `.bxm-nav-panel`, solo el ☰ con `overlayMenu:"always"` (su contenedor en `display:none`, su overlay
   muestra el menú). Abrir el panel de B ya no toca a A.
   ESTA REGLA: por debajo de 1270 el bloque A no aporta nada (su contenedor en línea está oculto y su propio ☰
   también), así que sale de la fila. Sin esto el core lo mostraría desde 600 y el grupo
   `.bxm-header-acciones` tendría un hijo de ancho 0 con su `gap` de 12px, corriendo a «LOG IN» y «Crear
   cuenta». A >=1270 no aplica: ahí el menú en línea lo muestra el core con su regla de >=600 y el único ☰
   visible es el de B.
   Detalle → sitio/NOTAS-CSS.md §5 */
@media (max-width: 1269px) {
  .bxm-header nav.bxm-nav { display: none; }
}

/* EL MENÚ DEL ☰ ES OTRO MENÚ, NO EL DE LA FILA (cuarta tanda, 18-sep-2026).
   El menú EN LÍNEA (bloque A, `.bxm-nav`) se queda con `ref:716` («Menú Principal», 3 categorías) y el panel
   (bloque B, `.bxm-nav-panel`) pasó a `ref:1391` («Menú del panel», 12 ítems). Los dos están en
   `parts/header.html`; el `ariaLabel` de B («Menú del panel») sale de ahí. Ese menú vive en la BASE
   (`wp_navigation` 1391) y su copia exacta está en `sitio/MENU-DEL-PANEL.md`: sin esa copia no se puede
   reconstruir desde el repo.
   ESTA REGLA: los cuatro primeros ítems del panel dependen de la cuenta (Mi Cuenta · Detalles de la cuenta ·
   Mis Exámenes · Cerrar Sesión). Los cuatro llevan la clase `bxm-menu-sesion` en el propio menú (el
   `className` del `wp:navigation-link`, que el core imprime en el `<li>`) y acá se ocultan mientras el
   `body` no tenga `logged-in`. Con sesión se ven los 12 ítems; sin sesión quedan los 8 que no dependen de la
   cuenta, en la misma columna de 320px y con los mismos 25px de padding (ocultar filas no mueve nada).
   ⚠️ «Cerrar Sesión» es el caso aparte: WooCommerce lo maneja de forma NATIVA (filtro
   `block_core_navigation_render_inner_blocks`): sin sesión lo SACA del DOM y con sesión le cambia la URL por
   `wp_nonce_url( $url, 'customer-logout' )`. La clase de acá es el respaldo por si ese filtro cambiara.
   ⚠️ Sin `!important`: el selector (0,5,2) le gana por especificidad al `display:flex` del core. Acotado a
   `nav.bxm-nav-panel`: si esa clase se usara en un ítem del menú en línea, esta regla no lo alcanza.
   Detalle completo → sitio/NOTAS-CSS.md §3 */
body:not(.logged-in) .bxm-header nav.bxm-nav-panel .wp-block-navigation-item.bxm-menu-sesion {
  display: none;
}

/* PANEL DEL ☰ EN TELÉFONO: los 12 ítems entran sin scroll y cada uno con 44px de área táctil
   (18-sep-2026, pedido del dueño).
   MEDIDO ANTES: cada ítem 40,66px (3,34px por debajo del mínimo) y el panel scrolleaba 118px a 360x640
   y 91px a 375x667.
   QUÉ HACE: padding vertical del `a` 12 → 13,7px (el ítem pasa a 44,03px: 16,66 de line-height + 2×13,7;
   13,7 es el menor valor que llega a 44 con el `font-size` más chico de la escala fluida), `row-gap` del
   `ul` 10 → 0 (devuelve 110px; el aire lo da el padding del `a`) y `padding-top` del contenido 64 → 56px
   (alto de la ✕: 0,00px² de solape con los 12 ítems, medido).
   SOLO TELÉFONO, `max-width: 781px` = corte exacto del core (a 782px la ✕ pasa de 56 a 44 y la
   compensación de la barra de administración de 46 a 32).
   MEDIDO DESPUÉS: alumno 360x640 → 634 ≤ 640 ✔ (y 375x667 / 390x844 / 414x896 ✔), anónimo ✔, ítem 44,03px ✔.
   Con un ADMINISTRADOR quedan 40px (360x640) y 13px (375x667) de scroll: son los 46px que el core reserva
   para la barra de administración y que un alumno no ve. NO se toca: moverla mueve la ✕.
   Escritorio y tablet no cambian (ítem 44,16px a 1920/1440, 44,31px a 834; padding 12px, row-gap 10px,
   aire de la ✕ 64px).
   Desglose del alto píxel por píxel y matriz de 4 teléfonos → sitio/NOTAS-CSS.md §1 */
@media (max-width: 781px) {
  .bxm-header .bxm-nav-panel .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
    padding: 13.7px 16px;    /* área táctil de 44,03px por ítem (era 40,66px) */
  }
  .bxm-header .bxm-nav-panel .wp-block-navigation__responsive-container .wp-block-navigation__container {
    row-gap: 0;              /* era 10px: 110px que vuelven al panel */
  }
  .bxm-header .bxm-header-inner .bxm-nav-panel .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content {
    padding-top: 56px;       /* era 64px: el alto exacto de la ✕ de teléfono */
  }
}

/* ---------------------------------------------------------------------------
   FICHA DE PRODUCTO (`templates/single-product.html`) — 19-sep-2026

   Contenedor 1320 del sistema (el mismo de `page.html`), reparto 40/60 del diseño aprobado.
   El padding de la caja va en los ATRIBUTOS del bloque y no acá: WordPress genera su propio CSS con
   la misma especificidad y su hoja carga después, así que un padding en CSS pierde (ya pasó).

   ⚠️ El `fill` de los iconos va ACÁ: el sanitizador de WordPress lo borra del registro aunque esté
   (medido 18-sep-2026, también en los iconos que ya usaba el sitio), y sin él salen negros.
   --------------------------------------------------------------------------- */
.bxm-producto-caja { background: var(--wp--preset--color--base, #FFFFFF); }
.bxm-producto-columnas { align-items: flex-start; }

/* El padding móvil va a la CAJA (.author-box-card), no al envoltorio: el envoltorio
   ya no se pinta, y era él quien lo recibía. */
@media (max-width: 767px) { .author-box-card { padding: 25px; } }

/* Los dos títulos de sección del diseño (h2 por jerarquía, tamaño fijo por clase) */
.bxm-producto-subtitulo { font-weight: 600; color: #54595F; margin: 0 0 10px; }

/* Las dos listas con icono: sin viñeta, icono y texto alineados y el icono del tamaño del diseño */
.bxm-producto-sellos { list-style: none; padding-left: 0; margin: 0; }
.bxm-producto-sellos li { display: flex; align-items: center; gap: 9px; }
.bxm-producto-sellos { margin: 20px 0; padding-top: 15px; border-top: 1px solid #EEF2F5; }
.bxm-producto-sellos li { font-size: 1em; font-weight: 500; line-height: 1.5; color: var(--wp--preset--color--secondary, #192335); padding-bottom: 8px; }
.bxm-producto-sellos .wp-block-icon svg {
  width: 20px; height: 20px; flex: 0 0 auto; fill: var(--wp--preset--color--primary, #0078BF); display: block;
}
/* El título del producto (bloque `post-title`): el diseño pide Poppins 1.875em/700 en el azul de marca. */
.bxm-producto-titulo { font-weight: 700; line-height: 1.5; color: var(--wp--preset--color--primary, #0078BF); margin: 0 0 10px; }

/* Relacionados y reseñas DENTRO de la columna de 720px (no a ancho completo como en Elementor):
   la grilla de Woo pasa a 2 columnas para que las tarjetas no queden de 170px. */
.bxm-producto-relacionados, .bxm-producto-resenas { margin-top: 40px; }
.bxm-producto-relacionados ul.products,
.bxm-producto-relacionados .wc-block-grid__products { grid-template-columns: repeat(2, 1fr) !important; }
.bxm-producto-relacionados ul.products li.product,
.bxm-producto-resenas .commentlist li { border: 1px solid #E0E0E0; border-radius: 15px; overflow: hidden; }
.bxm-producto-estrellas { margin: 0 0 10px; }

/* ESTRELLAS DE CALIFICACIÓN de la ficha de producto (19-sep-2026).
   El diseño aprobado las pide amarillas (`#FEDD00`, del JSON de Elementor) y el bloque de Woo hereda el
   color del texto del tema, así que salían azul oscuro y no resaltaban. Woo pinta las estrellas con su
   fuente de iconos (`content: "SSSSS"`) y la parte vacía es el mismo color con opacidad 0,5: cambiando el
   `color` del contenedor quedan amarillas las llenas y amarillo apagado las vacías, sin tocar la fuente. */
.bxm-producto-estrellas .wc-block-components-product-rating__stars,
.bxm-producto-estrellas .wc-block-components-product-rating__stars .star-rating { color: #E6B800; }

/* PRECIO DE LA FICHA AL DOBLE (19-sep-2026, pedido del dueño).
   Medido antes: el precio salía a 16px y la frase «equivale a US$…» (`.bxm-precio-usd`) a 12,48px
   (0,78em). El doble se escribe en `em` —2em y 1,56em— para que escale con el contenedor en vez de
   dejar dos números en píxeles que se desincronicen si cambia la base. */
.bxm-producto-info .woocommerce-Price-amount { font-size: 1.5em; }   /* 16px    -> 24px  (×1,5) */
.bxm-producto-info .bxm-precio-usd { font-size: 0.9375em; }          /* 15px sobre la base de 16px, en la misma unidad que el resto */

/* ETIQUETA «Precio de suscripción:» delante del precio (19-sep-2026, pedido del dueño).
   Va como texto real en la plantilla dentro de un grupo en fila, no como `content` de CSS: así la lee un
   lector de pantalla y se puede traducir. La etiqueta queda en el tamaño base (1em) porque el precio mide
   el doble (32px) y a ese tamaño la etiqueta competiría en vez de rotular. */
/* La caja del bloque de precio se saca del flujo (`display: contents`, el mismo recurso que usa
   `.bxm-header-acciones`): así la etiqueta, el monto y la frase del equivalente pasan a ser ítems de ESTA
   fila y se alinean por línea base entre ellos. Sin esto, la caja de Woo mide 85px (adentro tiene dos
   líneas) y la etiqueta quedaba flotando entre las dos en vez de en la línea del precio.
   La frase «equivale a …» se va a la línea de abajo con `flex-basis: 100%`, que fuerza el salto. */
.bxm-precio-linea { display: flex; flex-wrap: wrap; align-items: baseline; }
.bxm-precio-linea .wp-block-woocommerce-product-price,
.bxm-precio-linea .wc-block-components-product-price { display: contents; }
.bxm-precio-linea .bxm-precio-usd { flex: 0 0 100%; }
.bxm-precio-etiqueta { margin: 0; font-size: 1em; font-weight: 600; color: #192335; white-space: nowrap; }

/* DESCRIPCIÓN DE LA FICHA (20-sep-2026, pedido del dueño: «hay mucho espacio entre los subtítulos y el texto»).
   Medido en el 1096: la descripción mide 1161px y trae **4 párrafos VACÍOS** (`<p></p>`, 96px de aire puro);
   cada uno cae junto a un subtítulo, así que el hueco real era párrafo vacío + margen del encabezado.
   El encabezado es `<h3>` (18,4px, peso 600) y traía el MISMO margen arriba y abajo (18,4px), o sea que
   flotaba en vez de pertenecer al texto. Se le da más aire arriba y menos abajo: 1.4em (22,4px) contra
   0.4em (6,4px), medido en `em` como el resto de la ficha. */
.bxm-producto-info .wc-block-components-product-summary h3,
.bxm-producto-info .wp-block-woocommerce-product-summary h3 { margin-top: 1.4em; margin-bottom: 0.4em; }
/* Lo que sigue al subtítulo trae 16px de `margin-top` y COLAPSA con el margen del h3: gana el mayor, así que
   bajar solo el h3 no movía nada (medido: seguía en 16px). Se le baja el margen al de abajo. */
.bxm-producto-info .wc-block-components-product-summary h3 + p,
.bxm-producto-info .wc-block-components-product-summary h3 + ul,
.bxm-producto-info .wp-block-woocommerce-product-summary h3 + p,
.bxm-producto-info .wp-block-woocommerce-product-summary h3 + ul { margin-top: 0.15em; }

/* JERARQUÍA DE LA FICHA A LA ESCALA DEL SITIO (20-sep-2026, decisión del dueño: congruencia, sin parches).
   El sitio define su escala en `theme.json` (h1 2.5rem · h2 1.875rem · h3 1.5rem · h4 1.25rem) y WordPress la
   sirve FLUIDA, con `clamp()` y `vw`: los presets `--wp--preset--font-size--*` ya traen el valor responsivo,
   así que usarlos es seguir la escala del sitio, no inventar un tamaño. OJO con el nombre: WordPress
   RENOMBRA los slugs y les mete un guion (`h2` → `h-2`); con el nombre sin guion la variable no existe, CSS
   descarta la declaración y el título termina heredando el tamaño del párrafo (medido: 16px en vez de 30px).
   Antes había dos overrides propios que la rompían (`.bxm-producto-titulo` 1.875em = 30px y
   `.bxm-producto-subtitulo` 1em = 16px) y quedaron quitados: ahora cada nivel manda solo.
   Esta es la única regla que hace falta, y es una restauración: el bloque de resumen de Woo trae su propia
   hoja (`product-summary.css`) que fuerza sus encabezados a `1.15em` (18,4px) y los saca de la escala. */
.wc-block-components-product-summary h2,
.wp-block-woocommerce-product-summary h2 { font-size: var(--wp--preset--font-size--h-2); }
.wc-block-components-product-summary h3,
.wp-block-woocommerce-product-summary h3 { font-size: var(--wp--preset--font-size--h-3); }
.wc-block-components-product-summary h4,
.wp-block-woocommerce-product-summary h4 { font-size: var(--wp--preset--font-size--h-4); }

/* ESQUINAS DE LAS TARJETAS DE RELACIONADOS (20-sep-2026, pedido del dueño: «12px en las esquinas altas»).
   No se inventa el valor: es el mismo radio que ya documenta `.bxm-caja-contacto` —«12px solo arriba: es el
   radio que tiene el icon-box de produccion (12px | 12px | 0 | 0). Abajo va recto»—, o sea la línea de estilo
   del sitio. Va en la imagen porque es lo que ocupa la parte alta de la tarjeta. */
.bxm-relacionados .wc-block-components-product-image,
.bxm-relacionados .wc-block-components-product-image img { border-radius: 12px 12px 0 0; }

/* El SEGUNDO separador (relacionados → reseñas) necesita su propio ajuste, y no es capricho: el bloque del
   botón de cada tarjeta declara `margin-bottom: 1rem` en sus ATRIBUTOS, así que ese aire de 16px viaja hasta
   la línea y el hueco de arriba quedaba en 61px (45 del margen + 16 de la tarjeta) contra 45 abajo.
   Medido por píxeles. Acá se le restan esos 16px para que los dos separadores se vean iguales: 45/45.
   Se ancla con el selector de hermano adyacente para no tocar el primero. */
.bxm-producto-info .bxm-producto-relacionados + .bxm-divider { margin-top: 29px; }

/* AIRE BAJO EL TÍTULO DE VALORACIONES (20-sep-2026, pedido del dueño: «está pegado a los reviews»).
   Medido: el título tenía margin-bottom 0 y la lista de reseñas arrancaba exactamente en su borde, con 8px de
   blanco reales entre las dos tintas. Acá se le da padding-bottom, como pidió el dueño, y el número es un
   valor de partida: se ajusta en un solo lugar si hace falta más o menos aire. */
.bxm-producto-resenas .woocommerce-Reviews-title { padding-bottom: 20px; }

/* AIRE DEL CONTENIDO DE LA FICHA EN TABLET Y MÓVIL (20-sep-2026, pedido del dueño: «ganancia de espacio»).
   Con los márgenes laterales ya en cero, el aire lo da el padding de la caja: 40px por lado, o sea el texto
   usando 310px de 390 (79%). Medido por píxeles y confirmado a ojo (las migas partían en dos líneas por falta
   de ancho).
   Se copia el criterio que el sitio ya usa para su columna equivalente (`.bxm-single-article`): 24px en
   tablet y 16px en móvil. Son los MISMOS breakpoints y los mismos valores: no se inventa una escala nueva. */
.bxm-producto-caja { padding: 40px; }  /* el aire del contenido: antes venía de los ATRIBUTOS del bloque, que no admiten media queries */
@media (max-width: 1024px) { .bxm-producto-caja { padding: 24px; } }
@media (max-width: 600px)  { .bxm-producto-caja { padding: 16px; } }

/* FORMULARIO DE RESEÑAS: CAMPOS APILADOS EN MÓVIL (20-sep-2026, pedido del dueño: «todos los fields deberían
   estar debajo del texto que indica lo que hay que ingresar»).
   MEDIDO: a 360 y 390 los campos ya caían apilados por el quiebre natural del texto, pero a partir de ~400px
   el input de «Nombre» entraba al lado de su etiqueta (input x=107 con la etiqueta en x=40, misma línea). El
   ancho de varios teléfonos está en ese rango, así que el problema aparecía en unos sí y en otros no.
   Se fuerza el apilado en el rango móvil del sitio (<=600px): etiqueta en su renglón e input a todo el ancho,
   igual que los demás campos del formulario. El checkbox de cookies NO se toca: ahí el cuadradito va con su
   texto al lado, que es la convención. En escritorio el formulario queda como estaba. */
@media (max-width: 600px) {
	.comment-form p.comment-form-author label,
	.comment-form p.comment-form-email label { display: block; }
	.comment-form p.comment-form-author input,
	.comment-form p.comment-form-email input { display: block; width: 100%; }
}

/* ============================================================================
   TIENDA — `archive-product.html` (19-sep-2026)
   Construida nativa desde cero, con el mismo patrón que la ficha:
   · La caja copia a `.bxm-producto-caja`: 1320 con 40px internos (24 ≤1024, 16 ≤600),
     que es el mismo ancho ÚTIL que página, single post y single product.
   · Las tarjetas reutilizan `.bxm-rel-card` (fondo blanco, borde #E0E0E0, radio 15px):
     aquí solo se añade lo propio de un producto, las estrellas y el precio.
   El botón de compra NO va en las tarjetas: el clic entra al producto.
   ============================================================================ */
/* El selector va ANCLADO al main: `padding: 40px` a secas tiene la misma especificidad
   (0,1,0) que la regla del core para `.has-global-padding` y el core se inyecta despues,
   asi que el lateral quedaba en 0 y el contenido arrancaba 40px antes que en las otras
   plantillas. Anclado (0,2,0) gana sin `!important`. */
.bxm-tienda-main .bxm-tienda-caja {
  background: var(--wp--preset--color--base, #FFFFFF);
  padding: 40px;
}
.bxm-tienda-estrellas {
  margin: 0 0 6px;
  /* Alto reservado: los productos sin reseñas no imprimen el bloque y la tarjeta
     quedaba más corta que sus vecinas, rompiendo la alineación de la fila.
     Con el alto fijo, la fila se mantiene pareja tenga o no tenga estrellas. */
  min-height: 20px;
}
/* Las estrellas del bloque de WooCommerce se pintan con las fuentes `star`/`WooCommerce`;
   el color va en el contenedor y lo heredan los iconos. */
.bxm-tienda-estrellas .wc-block-components-product-rating,
.bxm-tienda-estrellas .wc-block-components-product-rating__stars,
.bxm-tienda-estrellas .star-rating span::before,
.bxm-tienda-estrellas .star-rating::before {
  color: #E6B800;
}
.bxm-tienda-precio {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #192335;
}
.bxm-tienda-precio .woocommerce-Price-amount {
  font-size: 1.05rem;
  font-weight: 700;
}

/* ---- FILTROS (19-sep-2026) ----
   El contenedor y los filtros son bloques nativos de WooCommerce. Aqui solo va el reparto:
   columna de 260px a la izquierda y resultados a la derecha; en movil el bloque ya trae su
   propio panel (`showFilterDrawer`), asi que solo se apila. */
.bxm-tienda-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.bxm-tienda-filtros {
  flex: 0 0 260px;
}
.bxm-tienda-resultados {
  flex: 1 1 auto;
  min-width: 0;
}
.bxm-tienda-filtros-titulo {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 16px;
}

/* El nombre de cada filtro va en un titulo propio (`bxm-tienda-filtro-nombre`), no en el
   `legend` del bloque: ese `legend` es solo para lectores de pantalla y WordPress lo
   posiciona en absoluto (gana a un `position: static`), asi que al intentar revelarlo se
   encimaba sobre la primera opcion. Revelarlo por CSS fue el error; el titulo propio es el
   arreglo, y la leyenda vuelve a cumplir su funcion de accesibilidad. */
.bxm-tienda-filtro-grupo {
  margin: 0 0 22px;
}
.bxm-tienda-filtro-nombre {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #192335;
  margin: 0 0 10px;
}
/* La casilla y su etiqueta, con la tipografia del sitio */
.bxm-tienda-filtros .wc-block-product-filter-checkbox-list__item label {
  font-size: 0.875rem;
  line-height: 1.6;
}
.bxm-tienda-filtros .wc-block-product-filter-checkbox-list__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---- TARJETA: alineación de estrellas y orden del precio (19-sep-2026) ----
   Con titulos de 2 y 3 lineas, las estrellas quedaban a distinta altura en la misma fila
   (medido: 605 vs 617). Con `margin-top: auto` el bloque de estrellas y el precio se anclan
   al fondo de la tarjeta, asi que arrancan a la misma altura en toda la fila.
   Y el precio: la tarjeta mide ~225px, asi que las tres piezas (`precio`, `equivale a US$`,
   `/ mes`) se apinaban y el sufijo caia solo a una linea. El equivalente pasa a su propia
   linea y el sufijo se mantiene pegado al importe. */
.bxm-tienda-main .bxm-rel-card .bxm-tienda-estrellas {
  margin-top: auto;
}
.bxm-tienda-main .bxm-rel-card .bxm-tienda-precio .bxm-precio-usd {
  display: block;
  font-size: 0.75rem;
  margin-top: 2px;
}
.bxm-tienda-main .bxm-rel-card .bxm-tienda-precio .subscription-details {
  white-space: nowrap;
}

/* ---- MÓVIL Y TABLET: caja, franjas grises y grilla ---- */
@media (max-width: 1024px) {
  .bxm-tienda-main .bxm-tienda-caja { padding: 24px; }

  /* La caja blanca llega a los bordes: sin el aire lateral gris del root. Es la misma
     regla que ya usa la ficha. */
  .bxm-tienda-main.has-global-padding:has(.bxm-tienda-caja) {
    --wp--style--root--padding-left: 0;
    --wp--style--root--padding-right: 0;
  }

  /* ⚠️ MARGEN VERTICAL Y FRANJAS GRISES — SOLO EN MÓVIL (pedido del dueño, 19-sep-2026).
     El envoltorio del pie trae `margin-block-start` del core y deja ver el gris del body.
     En escritorio se conserva tal cual. */
  div.wp-block-group:has(> footer.wp-block-template-part) {
    margin-block-start: 0;
  }

  /* Grilla: 4 columnas en escritorio (lo declara el bloque), 3 en tablet.
     Decisión del dueño (19-sep-2026): 4 / 3 / 2, para ver más producto sin castigar la lectura. */
  .bxm-tienda-main .wc-block-product-template,
  .bxm-tienda-main ul.wc-block-product-template {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* En tablet y movil los filtros dejan de ser columna: el bloque los convierte en
     boton con panel desplegable, asi que la fila se apila. */
  .bxm-tienda-layout {
    flex-direction: column;
    gap: 20px;
  }
  /* ⚠️ Al apilar, el `flex-basis` de 260px que en escritorio es ANCHO pasa a ser ALTO:
     el boton del panel medía 260px de alto y dejaba un hueco vacio enorme. Se devuelve
     a su alto natural (`flex: 0 0 auto`) y el boton tampoco se estira. */
  .bxm-tienda-filtros,
  .bxm-tienda-filtros .wc-block-product-filters__open-overlay {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  /* ---- Filtros como CAJÓN también en tablet (19-sep-2026, pedido del dueño) ----
     El bloque arma el cajón hasta `max-width: 782px`, pero un bloque `min-width: 601px` lo
     devuelve a formato en línea: apaga botón, encabezado y pie (`display: none`) y deja el
     panel `position: relative` con `background: inherit`. Esos valores se replican aquí con
     los MISMOS números del bloque, y con selectores sin `:where()` para ganarle a su
     especificidad 0 (el tema carga después del plugin).
     ⚠️ Es CSS ajeno copiado: revisar cuando se actualice WooCommerce. */
  .wc-block-product-filters .wc-block-product-filters__open-overlay,
  .wc-block-product-filters .wc-block-product-filters__overlay-header,
  .wc-block-product-filters .wc-block-product-filters__overlay-footer {
    display: flex;
  }
  .wc-block-product-filters .wc-block-product-filters__overlay {
    background-color: transparent;
    flex-grow: 0;
    inset: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: background-color .5s;
  }
  .wc-block-product-filters .wc-block-product-filters__overlay-wrapper {
    background: transparent;
    height: 100%;
    position: relative;
    width: 100%;
  }
  .wc-block-product-filters .wc-block-product-filters__overlay-dialog {
    background-color: var(--wc-product-filters-overlay-background-color, var(--wc-product-filters-background-color, Canvas));
    color: var(--wc-product-filters-overlay-text-color, var(--wc-product-filters-text-color, CanvasText));
    display: flex;
    flex-direction: column;
    inset: 0;
    max-height: 100%;
    position: absolute;
    transform: translateY(100vh);
    transition: none;
  }
  .wc-block-product-filters .wc-block-product-filters__overlay-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: scroll;
    padding: 0 var(--wp--preset--spacing--40);
  }
  .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
    background-color: rgba(95, 95, 95, .35);
    pointer-events: auto;
    z-index: 9999;
  }
  .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
    transform: translateY(0);
    transition: transform .5s;
  }
}

@media (max-width: 600px) {
  .bxm-tienda-main .bxm-tienda-caja { padding: 16px; }

  .bxm-tienda-main .wc-block-product-template,
  .bxm-tienda-main ul.wc-block-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ══ TÍTULO DE CARRITO Y CHECKOUT ════════════════════════════════════════════════════════════════
   `woocommerce-blocktheme.css` trae `.woocommerce-cart .wp-block-post-title { max-width: 1000px }`,
   con la MISMA especificidad (0,2,0) que una regla de dos clases propia, y su hoja carga después:
   a igual especificidad gana la última. El título quedaba en 1000px en vez de ocupar la caja.

   Se gana subiendo la especificidad (tres clases), no con `!important`. La alineación del texto la da
   el relleno del grupo que envuelve al título, puesto por ATRIBUTO del bloque, como el resto del sitio.

   ⚠️ No confundir con los auto-márgenes del core: esos SÍ llevan `!important` y no se ganan; por eso
   el título va dentro de un grupo con `layout: default`, que lo saca del tratamiento "constrained".
   ─────────────────────────────────────────────────────────────────────────────────────────────── */
.bxm-page-main .bxm-page-caja .wp-block-post-title {
	max-width: none;
}


/* ══ HUECO TÍTULO → FORMULARIO (CARRITO Y CHECKOUT) ══════════════════════════════════════════════
   El aire de abajo salía DUPLICADO: el `blockGap` del core le pone `margin-block-start: 19,2px` al
   contenido (la conocida regla `:where(.is-layout-flow) > *`), y encima WooCommerce abre su propio
   espacio al comenzar el paso. Medido: 39px contra los 15 del resto del sitio.

   El margen del título no era el problema: se COLAPSA con el del contenido (20 contra 19,2 → gana el
   mayor), por eso quitarlo no movió nada. Lo que se quita acá es el del CONTENIDO, que es el que suma.

   Se ancla con tres clases para no depender del orden de las hojas. El espacio propio de WooCommerce
   se deja: es su ritmo interno de formulario y no se ve mal.
   ─────────────────────────────────────────────────────────────────────────────────────────────── */
.bxm-page-main .bxm-page-caja > .bxm-page-content {
	margin-block-start: 0;
}


/* ══ BARRA DEL FILTRO DE PRECIO ══════════════════════════════════════════════════════════════════
   La barra del control deslizante se pinta con
       --range-color: var(--wc-product-filter-price-slider, currentColor)
   y al no estar definida cae en `currentColor`, que es el azul oscuro del texto (se veía negro).

   WooCommerce expone `--wc-product-filter-price-slider` precisamente para esto, así que se apunta ahí
   con el token del sitio en vez de pintar el elemento a mano: si mañana cambia el color primario en
   `theme.json`, la barra lo sigue sola.
   ─────────────────────────────────────────────────────────────────────────────────────────────── */
.wp-block-woocommerce-product-filter-price .wc-block-product-filter-price-slider__range {
	--wc-product-filter-price-slider: var(--wp--preset--color--primary, #0078BF);
}

/* ⚠️ El botón compacto «LOG IN» del encabezado se mostraba TAMBIÉN con la sesión iniciada:
   solo lo condicionaba el ancho de pantalla (@media max-width:1270px), sin guarda de sesión.
   Con sesión no tiene sentido —el encabezado ya muestra «MI CUENTA»— y abría el modal de
   ingreso a alguien que ya está adentro. Medido el 26-sep-2026 (informe de journey y embudo). */
body.logged-in .bxm-header .bxm-header-login { display: none; }

/* ─── Ficha de plan: bloque de diferenciación (27-sep-2026) ───────────────────
   Datos reales del plan (materia, nivel, modalidad, precio y hermanos) en lugar
   de repetir la plantilla del texto. Ver mu-plugins/bxm-fichas-producto.php. */
.bxm-ficha-datos,
.bxm-ficha-comparar { margin: 28px 0 0; }
.bxm-ficha-datos .bxm-producto-subtitulo,
.bxm-ficha-comparar .bxm-producto-subtitulo { margin-bottom: 10px; }
.bxm-ficha-lista { list-style: none; margin: 0; padding: 0; }
.bxm-ficha-lista li { position: relative; padding: 7px 0 7px 18px; line-height: 1.55; border-bottom: 1px solid rgba(25, 35, 53, 0.08); }
.bxm-ficha-lista li:last-child { border-bottom: 0; }
.bxm-ficha-lista li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--formulario, #C94A0E); }
.bxm-ficha-comparar { border-top: 1px solid rgba(25, 35, 53, 0.12); padding-top: 20px; }
.bxm-ficha-pie { margin-top: 10px; font-size: 0.92em; color: #54595F; }

/* ══════════════════════════════════════════════════════════════════════════
   14-oct-2026 — TEXTO BLANCO EN EL CTA DE SUSCRIPCIÓN (decisión del usuario)
   Se revierte a blanco el texto del botón de suscripción en los cuatro lugares donde
   aparece: la PORTADA (bloque `bxm-newsletter`, contenido de la página 1262) y el
   SIDEBAR (`parts/sidebar.html`), que es el que lo muestra en categorías, resultados
   de búsqueda, single y 404.
   Medido con la fórmula de WCAG 2.2: blanco sobre #FF6F3C = 2,77:1 → no alcanza AA
   (4,5:1; el botón es de 1,1rem/600, o sea texto normal, no grande) ni el 3:1 de texto
   grande. El hover #E85F2B queda en 3,44:1. Queda ANOTADO, no arreglado: el arreglo
   limpio es bajar el naranja del token `formulario` (theme.json) a #C2410C (5,18:1) o
   #9A3412 (7,31:1), que mantiene el texto blanco y el tono de marca.
   El CTA del formulario de CONTACTO queda como estaba (texto #192335 sobre el mismo
   naranja = 5,69:1): no es el CTA de suscripción y no se toca sin pedido.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   19-oct-2026 — EL CONTRASTE DEL NARANJA QUEDA CERRADO (decisión del usuario)
   El dueño pidió igualar el CTA de CONTACTO al resto (texto blanco) y, al ver que el
   blanco sobre #FF6F3C se veía flojo, autorizó el ajuste. Se bajó el token
   `formulario` de theme.json a #C94A0E en vez de tocar el texto de ningún botón:
     · blanco sobre #C94A0E = 4,70:1 → cumple AA (4,5:1) en los TRES CTA.
     · hover de contacto #B0400B = 5,86:1.
   Los tres CTA (suscripción, adquisición y contacto) quedan idénticos: mismo token,
   mismo texto blanco. El naranja sigue siendo naranja, un paso más profundo.
   Si algún día se quiere el naranja vivo de antes (#FF6F3C), el contraste vuelve a
   2,77:1 y hay que volver a resolver la pareja texto/fondo, no solo el fondo.
   ══════════════════════════════════════════════════════════════════════════ */

/* =====================================================================
   SUBMENÚS DEL PANEL — SANGRÍA, AIRE Y DIVISORIAS (v15, 14-oct-2026)

   Decisión del usuario: sin plegado, sin flechas, sin trucos; la hoja del
   tema + lo mínimo. La tipografía NO se toca (11.9px en los tres niveles).

   1) SANGRÍA: el core aplica `padding-left: 2rem` en el overlay; acá 7px.
      Se acumula por anidación: 0 / 7px / 14px.
   2) AIRE DE BLOQUE: 16px arriba de cada rótulo que encabeza grupo (nivel 1
      con hijos: «Educación Media Básica», «Educación Media Avanzada»; nivel 2
      con hijos: los años).
   3) SIN HUECO INTERNO: el `<ul>` de cada submenú trae `padding-top: 18px`
      (medido); en 0, así el rótulo del año queda pegado a su primera materia
      (29px, igual que entre materias).
   4) DIVISORIAS (patrón pedido por el usuario): una línea al CIERRE de cada
      ítem de primer nivel, menos el último, y una al ABRIR de cada año.
      La de cierre va con `border-bottom` y `:not(:last-child)`, no con
      `border-top` + hermano adyacente: con lo segundo, un invitado recibía
      línea arriba de «Planes» (el primer ítem visible), porque los ítems de
      cuenta siguen en el DOM aunque el tema los esconda sin sesión.
      Resultado: entre cada par de ítems de primer nivel; línea tras el rótulo
      de «Media Básica» y entre cada año (por el `border-top` de los años);
      línea antes de «Media Avanzada» (el `border-bottom` de Básica cae al
      final de su subárbol); NINGUNA dentro de las materias de Avanzada; y
      ninguna después de «Metodología», que cierra.
      La línea es 1px en blanco al 16% (el panel es rgb(25,35,53)).
   Especificidad (0,5,0)+body, la ya verificada contra la regla del overlay.
   ===================================================================== */
body .bxm-header .bxm-nav-panel .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-container {
  padding-left: 7px;
  padding-top: 0;
}
body .bxm-header .bxm-nav-panel .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child {
  margin-top: 16px;
}
body .bxm-header .bxm-nav-panel .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container > .wp-block-navigation-item.has-child {
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
body .bxm-header .bxm-nav-panel .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* ── Descripción de categoría usada como hub del cluster ─────────────────────
   WordPress imprime `:root :where(.wp-block-term-description){font-size:var(--wp--preset--font-size--medium)}`.
   Ese `:root` le da especificidad (0,1,0) —la MISMA que una clase— y, como va después
   en el <head>, le ganaba a `.bxm-archive-description`. Por eso el texto salía más
   grande que el de los artículos. Aquí se sube a (0,2,0) y queda igual al cuerpo del
   post: 1rem / 1.5 / 400 / #334155 (los valores de `.bxm-post-content`). */
.wp-block-term-description.bxm-archive-description {
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 400;
	color: #334155;
	margin: 0 0 24px;
}
.wp-block-term-description.bxm-archive-description p { margin: 0 0 14px; }
.wp-block-term-description.bxm-archive-description p:last-child { margin-bottom: 0; }
.wp-block-term-description.bxm-archive-description strong { font-weight: 600; color: inherit; }
.wp-block-term-description.bxm-archive-description em { font-style: italic; }
.wp-block-term-description.bxm-archive-description blockquote {
	margin: 0 0 14px;
	padding: 4px 0 4px 14px;
	border-left: 3px solid #E3E6EA;
	color: #54595F;
}
.wp-block-term-description.bxm-archive-description a {
	color: var(--wp--preset--color--primary, #0078BF);
	text-decoration: none;
	font-weight: 500;
}
.wp-block-term-description.bxm-archive-description a:hover { text-decoration: underline; }
@media (max-width: 640px) {
	.wp-block-term-description.bxm-archive-description { font-size: 1rem; }
}


/*
   BXM — REFERENCIAS SIN DESBORDAMIENTO (2026-10-21)
   En `section.referencias` las direcciones van como texto plano, no como enlaces.
   Por eso no reciben el `overflow-wrap: anywhere` de `.bxm-post-content a`.
   Sin esta regla, una URL de LibreTexts o de OpenStax mide 2.280 px dentro de un
   bloque de 674 px y arrastra scroll horizontal en toda la página.
   Se parte la palabra larga; no se recorta ni se oculta nada.
*/
.bxm-post-content .referencias,
.bxm-post-content .referencias li,
.bxm-post-content .referencias p,
.bxm-post-content .referencias a,
.bxm-post-content section.referencias,
.bxm-post-content section.referencias li,
.bxm-post-content section.referencias p,
.bxm-post-content section.referencias a {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}