/* =========================================================================
   NEXA · Capa de compatibilidad Elementor
   -------------------------------------------------------------------------
   El sistema de diseño (nexa-design.css) es una copia literal del diseño
   aprobado. Aquí sólo se neutraliza lo que Elementor añade por su cuenta:
   contenedores flex por defecto, envoltorios de widget y estilos de botón.
   Nada de esto cambia el diseño: lo protege.
   ========================================================================= */

/* ---------------------------------------------------------------
   1 · Valores por defecto de los contenedores
   Elementor mete 10px de padding y 20px de gap a todo contenedor.
   El espaciado lo define la hoja de diseño, no el maquetador.
   --------------------------------------------------------------- */
body {
	--container-default-padding-top: 0px;
	--container-default-padding-right: 0px;
	--container-default-padding-bottom: 0px;
	--container-default-padding-left: 0px;
	--widgets-spacing: 0px;
	--widgets-spacing-row: 0px;
	--widgets-spacing-column: 0px;
	--kit-widget-spacing: 0px;
}

/* Contenedores marcados como bloque (secciones, envoltorios y columnas de
   texto). Los que la hoja de diseño declara como grid/flex se respetan. */
.e-con.nxb,
.e-con.nxb > .e-con-inner {
	display: block;
}
/* Elementor fija width:100% en todo contenedor; en el diseño estos eran
   <div>/<section> normales, cuyo ancho lo decide el contexto. */
.e-con.nxb {
	width: auto;
}

/* Elementor fuerza height:100% en el envoltorio del widget: lo devolvemos
   a auto para que las alturas las decidan las reglas del diseño. */
.elementor-widget-container,
.e-con > .e-con-inner > .elementor-widget > .elementor-widget-container {
	height: auto;
}

/* Un widget nunca debe imponer ancho a la maqueta. */
.e-con > .elementor-widget,
.e-con > .e-con-inner > .elementor-widget {
	min-width: 0;
}

/* ---------------------------------------------------------------
   2 · Títulos
   `.elementor-heading-title` fija line-height:1; se devuelve al
   interlineado del sistema. Las reglas compuestas del diseño
   (.hero h1, .pd-intro h1, …) siguen mandando por especificidad.
   --------------------------------------------------------------- */
.elementor-heading-title {
	line-height: 1.08;
	font-weight: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-transform: inherit;
	font-size: inherit;
}
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title,
h4.elementor-heading-title,
h5.elementor-heading-title,
h6.elementor-heading-title {
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--white);
}
h1.elementor-heading-title {
	font-weight: 900;
	font-size: clamp(2.3rem, 5.2vw, 4.2rem);
	letter-spacing: -0.04em;
}
h2.elementor-heading-title {
	font-weight: 900;
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	letter-spacing: -0.035em;
}
h3.elementor-heading-title {
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	letter-spacing: -0.02em;
}
.section.light h1.elementor-heading-title,
.section.light h2.elementor-heading-title,
.section.light h3.elementor-heading-title,
.section.light h4.elementor-heading-title {
	color: #04192e;
}

/* El editor de texto de Elementor produce <p>: se comporta como el diseño. */
.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
   3 · Botones nativos de Elementor con el aspecto .btn de NEXA
   Clases: nx-btn  +  nx-btn--primary | --ghost | --blue  [+ nx-btn--sm]
   --------------------------------------------------------------- */
.nx-btn .elementor-button-wrapper {
	display: inline-flex;
}
.nx-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font);
	font-weight: 700;
	font-size: 0.96rem;
	letter-spacing: 0.01em;
	line-height: 1.2;
	padding: 14px 28px;
	border-radius: 4px;
	background: transparent;
	color: var(--white);
	transition: transform 0.3s var(--ease), background 0.25s ease, color 0.25s ease,
		border-color 0.25s ease;
	white-space: nowrap;
}
.nx-btn .elementor-button-content-wrapper {
	gap: 10px;
	align-items: center;
}
.nx-btn .elementor-button svg {
	transition: transform 0.3s var(--ease);
	width: 1.15em;
	height: 1.15em;
}
.nx-btn .elementor-button:hover svg {
	transform: translateX(4px);
}

.nx-btn--primary .elementor-button {
	background: var(--orange);
	color: #fff;
	border-bottom: 3px solid var(--orange-600);
}
.nx-btn--primary .elementor-button:hover,
.nx-btn--primary .elementor-button:focus {
	background: var(--orange-400);
	color: #fff;
	transform: translateY(-2px);
}

.nx-btn--ghost .elementor-button {
	background: transparent;
	color: var(--white);
	border: 1.5px solid rgba(255, 255, 255, 0.22);
}
.nx-btn--ghost .elementor-button:hover,
.nx-btn--ghost .elementor-button:focus {
	border-color: var(--orange);
	color: var(--orange-400);
}

.nx-btn--blue .elementor-button {
	background: var(--blue);
	color: #fff;
	border-bottom: 3px solid var(--blue-deep);
}
.nx-btn--blue .elementor-button:hover {
	background: var(--blue-400);
	color: #fff;
	transform: translateY(-2px);
}

.nx-btn--sm .elementor-button {
	padding: 11px 20px;
	font-size: 0.88rem;
}

/* ---------------------------------------------------------------
   4 · Menús de WordPress dentro de la cabecera y el pie
   --------------------------------------------------------------- */
.nav-links li,
.drawer li,
.footer-col li {
	list-style: none;
}
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a,
.nav-links .current-menu-ancestor > a,
.nav-links .current-menu-parent > a {
	color: #fff;
}
.nav-links .current-menu-item > a::after,
.nav-links .current_page_item > a::after,
.nav-links .current-menu-ancestor > a::after,
.nav-links .current-menu-parent > a::after {
	transform: scaleX(1);
}
.drawer .current-menu-item > a,
.drawer .current_page_item > a {
	color: var(--orange-400);
}

/* Icono del menú hamburguesa (abrir / cerrar) */
.burger-close {
	display: none;
}
.nav-wrap.menu-open .burger-open {
	display: none;
}
.nav-wrap.menu-open .burger-close {
	display: block;
}

/* Telón del menú lateral: sólo visible cuando está abierto */
.drawer-scrim {
	display: none;
}
.drawer-scrim.on {
	display: block;
}

/* La cabecera de Elementor es la que se fija en pantalla */
.nav-wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}
/* La barra promocional es su propio contexto de posicionamiento */
.promo-bar {
	position: relative;
}

/* ---------------------------------------------------------------
   5 · Reveal on-scroll
   Sin JavaScript el contenido nunca queda invisible.
   --------------------------------------------------------------- */
.reveal {
	opacity: 1;
	transform: none;
}
.nexa-js .reveal {
	opacity: 0;
	transform: translateY(34px);
}
.nexa-js .reveal.in {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------------
   6 · Selectores de hijo directo del diseño que ahora atraviesan
   el envoltorio del widget de Elementor.
   --------------------------------------------------------------- */
.e-con.why-copy > .elementor-widget.elementor-widget-text-editor {
	margin-bottom: 30px;
}
.why-copy .elementor-widget-text-editor p {
	font-size: 1.05rem;
	color: var(--text-soft);
}
.why-copy .elementor-widget-heading h2 {
	margin: 16px 0 18px;
}

.e-con.certs-copy > .elementor-widget.elementor-widget-text-editor {
	margin-bottom: 26px;
}
.certs-copy .elementor-widget-text-editor p {
	font-size: 1.03rem;
	color: var(--text-soft);
}
.certs.light .certs-copy .elementor-widget-text-editor p {
	color: #55606f;
}
.certs-copy .elementor-widget-heading h2 {
	margin: 16px 0 16px;
}

.e-con.contacto-copy > .elementor-widget.elementor-widget-text-editor {
	margin-bottom: 24px;
}
.contacto-copy .elementor-widget-text-editor p {
	font-size: 1.05rem;
	color: var(--text-soft);
}
.contacto-copy .elementor-widget-heading h2 {
	margin: 16px 0 16px;
}

.nos-hist-copy .elementor-widget-text-editor p {
	color: var(--text-soft);
	margin-bottom: 16px;
}
.nos-hist-copy .elementor-widget-heading h2 {
	margin: 16px 0 20px;
}

.e-con.nos-cta-content > .elementor-widget.elementor-widget-text-editor {
	margin-bottom: 28px;
}
.nos-cta-content .elementor-widget-text-editor p {
	color: var(--text-soft);
	font-size: 1.05rem;
}
.nos-cta-content .elementor-widget-heading h2 {
	margin-bottom: 14px;
}

.pd-block .elementor-widget-text-editor p {
	color: var(--text-soft);
}
.respaldo-copy .elementor-widget-heading h2 {
	margin: 16px 0 30px;
}
.section-head-row .elementor-widget-heading h2 {
	margin-top: 14px;
}

/* ---------------------------------------------------------------
   7 · Detalles que dependían del árbol de React
   --------------------------------------------------------------- */
.why-figure .elementor-widget-image,
.nos-hist-visual .elementor-widget-image,
.respaldo-visual .elementor-widget-image,
.cert-photo .elementor-widget-image {
	line-height: 0;
}

/* Bloques del detalle de programa: el h2 con filete naranja */
.pd-block .elementor-widget-heading h2 {
	font-size: 1.7rem;
	margin-bottom: 16px;
	position: relative;
	padding-left: 16px;
}
.pd-block .elementor-widget-heading h2::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 3px;
	background: var(--grad-orange);
}

/* ---------------------------------------------------------------
   8 · Loop Grid de Elementor Pro con la métrica del diseño
   --------------------------------------------------------------- */
.nx-loop .elementor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	align-items: stretch;
}
.nx-loop--3 .elementor-grid {
	grid-template-columns: repeat(3, 1fr);
}
.nx-loop .elementor-grid > *:not(style):not(link) {
	display: flex;
	min-width: 0;
}
/* La tarjeta debe llenar su celda: toda la cadena del loop item (contenedor
   → widget → envoltorio) se vuelve flex para que `.pcard { height: 100% }`
   tenga contra qué resolverse y todas las tarjetas de una fila midan igual. */
.nx-loop .e-loop-item,
.nx-loop .e-loop-item > .e-con-inner,
.nx-loop .e-loop-item > .e-con,
.nx-loop .e-loop-item > .e-con > .elementor-widget,
.nx-loop .e-loop-item > .e-con > .elementor-widget > .elementor-widget-container,
.nx-loop .e-loop-item > .elementor-widget,
.nx-loop .e-loop-item > .elementor-widget > .elementor-widget-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}
.nx-loop .pcard {
	width: 100%;
}
@media (max-width: 1100px) {
	.nx-loop--3 .elementor-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 620px) {
	.nx-loop--3 .elementor-grid {
		grid-template-columns: 1fr;
	}
}

/* Paginación del catálogo con la estética NEXA */
.nx-loop .elementor-pagination {
	margin-top: 34px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.nx-loop .elementor-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line-strong);
	color: var(--text-soft);
	font-size: 0.88rem;
	font-weight: 700;
	transition: all 0.25s var(--ease);
}
.nx-loop .elementor-pagination .page-numbers:hover,
.nx-loop .elementor-pagination .page-numbers.current {
	background: var(--orange);
	border-color: var(--orange);
	color: #fff;
}

/* Botón «aplicar filtros»: sólo hace falta sin JavaScript */
.filtros-submit {
	width: 100%;
	margin-bottom: 18px;
}

/* ---------------------------------------------------------------
   9 · WooCommerce dentro del sistema oscuro
   --------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: #06203a;
	border-top-color: var(--orange);
	color: var(--text-soft);
}
.woocommerce-message a,
.woocommerce-info a {
	color: var(--orange-400);
}
.woocommerce-page .site-main,
.woocommerce .site-main {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Hello Elementor no debe recortar el ancho del contenido */
.site-main,
.page-content {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* ---------------------------------------------------------------
   10 · Contenedores flex en fila
   El diseño declara `display:flex` sin dirección (fila por defecto);
   Elementor impone columna. Aquí se devuelve la fila.
   --------------------------------------------------------------- */
.e-con.section-head-row,
.e-con.certs-visual,
.e-con.nos-cta-actions,
.e-con.pd-block-head,
.e-con.hero-actions,
.e-con.contacto-direct {
	flex-direction: row;
}

/* La apertura del programa es un elemento de la rejilla .pd-grid */
.pd-grid > .elementor-widget-nexa-course-intro {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}
@media (max-width: 992px) {
	.pd-grid > .elementor-widget-nexa-course-intro {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Telón del hero del programa */
.pd-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 780px;
	pointer-events: none;
	z-index: 0;
}

/* Resplandor del CTA de Nosotros (era un <div class="glow"> en el diseño) */
.nos-cta-box::after {
	content: '';
	position: absolute;
	width: 320px;
	height: 320px;
	top: -80px;
	left: 60px;
	border-radius: 50%;
	filter: blur(90px);
	background: rgba(255, 68, 0, 0.3);
	pointer-events: none;
	z-index: 0;
}

/* ---------------------------------------------------------------
   11 · Reset de <button> de Hello Elementor
   El tema padre pinta todos los botones (borde rosa, padding y hover).
   El diseño NEXA usa botones desnudos salvo donde declara .btn.
   --------------------------------------------------------------- */
.promo-close,
.burger,
.filtros-clear,
.cat-vacio-link,
.pd-mod-head {
	padding: 0;
	border: none;
	border-radius: 0;
	white-space: normal;
	text-align: inherit;
	width: auto;
}
/* Los puntos del hero llevan su propio ancho en el diseño (26 px, 48 px el
   activo): aquí no se toca el ancho o desaparecen los inactivos. */
.hero-dots button {
	padding: 0;
	border: none;
	border-radius: 0;
}
.burger {
	padding: 4px;
}
.pd-mod-head {
	padding: 18px 20px;
	width: 100%;
	text-align: left;
}
.promo-close:hover,
.promo-close:focus,
.burger:hover,
.burger:focus,
.filtros-clear:hover,
.filtros-clear:focus,
.cat-vacio-link:hover,
.cat-vacio-link:focus,
.pd-mod-head:hover,
.pd-mod-head:focus {
	background: none;
	background-color: transparent;
}
.hero-dots button:hover,
.hero-dots button:focus {
	background-color: rgba(255, 255, 255, 0.22);
}
.hero-dots button.on:hover,
.hero-dots button.on:focus {
	background-color: var(--orange);
}
.cform-btn:hover,
.cform-btn:focus {
	color: #fff;
}

/* ---------------------------------------------------------------
   12 · Flecha del sistema en los botones nativos de Elementor
   Es el mismo trazo SVG del set de iconos NEXA, aplicado como
   máscara para que herede el color del botón.
   --------------------------------------------------------------- */
.nx-btn--arrow .elementor-button-content-wrapper::after {
	content: '';
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.3s var(--ease);
}
.nx-btn--sm.nx-btn--arrow .elementor-button-content-wrapper::after {
	width: 16px;
	height: 16px;
}
.nx-btn--arrow .elementor-button:hover .elementor-button-content-wrapper::after {
	transform: translateX(4px);
}

/* ---------------------------------------------------------------
   13 · Correcciones puntuales del DOM de Elementor
   --------------------------------------------------------------- */

/* `.cform-done` declara display:flex y ganaba a [hidden]. */
.cform-done[hidden],
[hidden] {
	display: none;
}

/* Widgets que deben ocupar todo el ancho dentro de un contenedor flex. */
.certs-visual > .elementor-widget,
.respaldo-visual > .elementor-widget,
.pd-side > .elementor-widget,
.catalogo-main > .elementor-widget {
	width: 100%;
}

/* Elementor usa `.e-con::before` para su capa de superposición y fija left:0;
   el panel diagonal del diseño va anclado a la derecha. */
.e-con.section.light::before {
	left: auto;
	right: 0;
	bottom: auto;
	mix-blend-mode: normal;
	opacity: 1;
	border: 0;
	border-radius: 0;
}

/* ---------------------------------------------------------------
   14 · Botones del sistema sobre <button type="submit">
   El reset del tema padre usa `[type=submit]` (0,1,0) y ganaba al
   `button { border: none }` del diseño (0,0,1).
   --------------------------------------------------------------- */
.btn {
	border: none;
	background: none;
	width: auto;
}
.btn-primary {
	background: var(--orange);
	color: #fff;
	border-bottom: 3px solid var(--orange-600);
}
.btn-blue {
	background: var(--blue);
	color: #fff;
	border-bottom: 3px solid var(--blue-deep);
}
.btn-ghost {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.22);
}
.btn-primary:hover,
.btn-primary:focus {
	background: var(--orange-400);
	color: #fff;
}
.btn-blue:hover,
.btn-blue:focus {
	background: var(--blue-400);
	color: #fff;
}
.btn-ghost:hover,
.btn-ghost:focus {
	background: transparent;
	border-color: var(--orange);
	color: var(--orange-400);
}

/* La separación entre secciones del pie no depende del reset del tema */
.footer-bottom p,
.footer-tagline {
	margin: 0;
}

/* El UA fija `line-height: normal` en <button>; el reset del tema padre lo
   cambia a 1.5 y engordaba los botones respecto al diseño. */
button.btn {
	line-height: normal;
}

/* ---------------------------------------------------------------
   15 · Reset tipográfico del diseño
   global.css hace `* { margin: 0 }` (0,0,0); el reset del tema padre
   usa selectores de elemento (0,0,1) y le ganaba, añadiendo márgenes
   fantasma bajo párrafos y títulos.
   --------------------------------------------------------------- */
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
figure,
blockquote,
dl,
dd,
fieldset,
hr {
	margin: 0;
	padding: 0;
}

/* Hello Elementor y WooCommerce reescriben <label>; el formulario del
   diseño hereda el interlineado del cuerpo. */
.cform label {
	line-height: inherit;
}
.cform label,
.filtro-grupo label {
	float: none;
	clear: none;
	margin-right: 0;
	vertical-align: baseline;
}
.cform label span {
	line-height: 1.6;
}

/* ---------------------------------------------------------------
   16 · <figure> dentro de widgets
   Elementor aplica `.elementor .elementor-widget:not(…):not(…) figure
   { margin: 0 }` (0,4,1) y borraba la separación de las fichas.
   --------------------------------------------------------------- */
.elementor .elementor-widget figure.why-card-img.why-card-img,
.elementor .elementor-widget figure.nos-dif-img.nos-dif-img {
	margin: 0 0 14px;
}

/* Campos del formulario: el tema padre fuerza line-height 1.5 y engordaba
   los inputs respecto al diseño (que usa el valor normal del navegador). */
.cform input,
.cform select,
.cform textarea,
.filtros input {
	line-height: normal;
}

/* ---------------------------------------------------------------
   17 · Logos de las herramientas en la marquesina
   Conviven con el icono del sistema: si una herramienta no tiene
   logo cargado, se sigue mostrando el icono original del diseño.
   --------------------------------------------------------------- */
.conv-logo {
	height: 28px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	display: block;
	flex-shrink: 0;
}
/* Los apilados (símbolo sobre texto) necesitan más alto para que su palabra
   pese lo mismo que la de los horizontales. */
.conv-logo--apilado {
	height: 42px;
}
.conv-item--mono .conv-logo {
	filter: brightness(0) invert(1);
	opacity: 0.85;
	transition: opacity 0.3s var(--ease);
}
.conv-item--mono:hover .conv-logo {
	opacity: 1;
}

/* ---------------------------------------------------------------
   18 · Sellos de las entidades certificadoras
   En la sección clara van directos sobre la fila blanca; en la ficha
   del programa (fondo azul) se apoyan en una placa blanca para que
   conserven sus colores oficiales y sigan siendo legibles.
   --------------------------------------------------------------- */
.certs-logo {
	height: 30px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
	flex-shrink: 0;
	display: block;
}

.pd-certs-logo {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	align-self: center;
	padding: 6px 9px;
	background: #fff;
	border-radius: 3px;
}
.pd-certs-logo img {
	height: 26px;
	width: auto;
	max-width: 130px;
	object-fit: contain;
	display: block;
}
.pd-certs li {
	align-items: center;
}

/* ---------------------------------------------------------------
   19 · Logos de las alianzas
   Sustituyen al icono en la tarjeta. Van sobre placa blanca porque
   la tarjeta es azul oscuro y son marcas institucionales que no se
   pueden recolorear.
   --------------------------------------------------------------- */
.respaldo-logo {
	flex-shrink: 0;
	/* Flex y no grid: dentro de un grid la fila crece con la imagen y las
	   alturas en porcentaje dejan de clampear, de ahí que el logo desbordara. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 8px;
	background: #fff;
	border-radius: 3px;
	overflow: hidden;
}

/* Sólo logo: el lockup completo ya nombra a la entidad, así que la placa
   ocupa el ancho de la tarjeta y el logo se centra. Todas las placas miden
   igual para que la columna no quede desalineada. */
.respaldo-card--solo {
	justify-content: center;
	padding: 18px 20px;
}
/* La placa se ajusta al logo y se centra en la tarjeta: así el fondo azul
   sigue mandando, como en el diseño original. */
.respaldo-card--solo .respaldo-logo {
	width: 100%;
	padding: 10px 20px;
}
/* Los logos vienen normalizados por área visual sobre un lienzo 3:1, así que
   basta con encajarlos: todos pesan ópticamente lo mismo. */
.respaldo-card--solo .respaldo-logo img {
	width: 100%;
	height: 100%;
	min-height: 0;
	max-width: none;
	max-height: none;
	object-fit: contain;
	object-position: center;
}

/* Dos columnas: placas idénticas y rejilla más compacta. */
.respaldo-grid--2 {
	grid-template-columns: 1fr 1fr;
}
.respaldo-grid--2 .respaldo-card--solo {
	padding: 14px;
}
.respaldo-grid--2 .respaldo-card--solo .respaldo-logo {
	padding: 8px 14px;
}
@media (max-width: 640px) {
	.respaldo-grid--2 {
		grid-template-columns: 1fr;
	}
}
.respaldo-logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* ---------------------------------------------------------------
   20 · Vídeo de fondo del hero
   Ocupa el mismo plano que las imágenes de diapositiva a las que
   sustituye; el degradado del diseño sigue por encima.
   --------------------------------------------------------------- */
/* El vídeo de fondo ocupa el mismo plano que la imagen de diapositiva a la
   que sustituye, así hereda su transición de opacidad. */
/*
 * `inset: 0` no basta para un <video>: al ser un elemento reemplazado,
 * conserva su proporción y sólo obedece al ancho. Sin alto explícito el
 * vídeo medía 810 px en un hero de 900 y dejaba una franja sin fondo.
 */
.hero-slide-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}
/* El vídeo del recuadro se comporta igual que su imagen. */
.hero-figure-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* ---------------------------------------------------------------
   21 · Logos del respaldo en la ficha del programa
   Ocupan el lugar del nombre dentro de la misma etiqueta del diseño;
   al ir sobre fondo azul necesitan placa blanca. Flex y no grid: con
   grid la fila crece con la imagen y el alto en % deja de clampear.
   --------------------------------------------------------------- */
.pd-cocert-list .pd-cocert-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 139px;
	height: 48px;
	padding: 7px 12px;
	background: #fff;
	border-color: transparent;
	border-radius: 2px;
	overflow: hidden;
}
.pd-cocert-list .pd-cocert-logo img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: contain;
	display: block;
}
.pd-cocert-list .pd-cocert-logo:hover {
	border-color: transparent;
}

/* ---------------------------------------------------------------
   22 · Detalle del programa en móvil
   `.pd-main` es una columna flex; sus bloques se estiraban al
   min-content del contenido (475 px) en lugar de al ancho de la
   columna, y la ficha desbordaba en horizontal.
   --------------------------------------------------------------- */
.pd-main > .e-con {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}
.pd-main,
.pd-side,
.pd-grid > .elementor-widget {
	min-width: 0;
	max-width: 100%;
}

/* El acordeón y las listas no deben empujar el ancho */
.pd-mod-head,
.pd-mod-inner,
.pd-obj,
.pd-certs,
.pd-salidas,
.pd-mentor,
.pd-mentor-info {
	min-width: 0;
}

/* En móvil el módulo abierto pasa a una sola columna: con dos, la de texto
   quedaba en 68 px, el contenido se disparaba a 3.700 px de alto y el
   `max-height` del diseño lo recortaba casi entero. */
@media (max-width: 620px) {
	.pd-mod-inner {
		grid-template-columns: 1fr;
		padding-right: 20px;
	}
	.pd-mod-fig {
		max-width: 260px;
		margin-left: 20px;
	}
	.pd-mod.open .pd-mod-body {
		max-height: 1600px;
	}
	.pd-mod-head {
		gap: 12px;
		padding: 16px;
	}
	.pd-mod-n {
		min-width: 24px;
	}
}
.pd-mod-title,
.pd-mod-list li,
.pd-obj li,
.pd-certs li {
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------
   23 · Botón flotante de WhatsApp perfectamente circular
   El alto (60 px) incluye el borde por box-sizing, pero el ancho es
   automático y sí lo suma: 14+30+14+2 = 60. Con los 17 px del diseño
   salía 66×60, un óvalo.
   --------------------------------------------------------------- */
.wa-float {
	padding: 0 14px;
	justify-content: center;
}
@media (max-width: 560px) {
	.wa-float {
		/* alto 56: 12+30+12+2 */
		padding: 0 12px;
	}
}

/* ---------------------------------------------------------------
   24 · Libro de Reclamaciones
   Reutiliza el lenguaje del formulario de contacto del diseño.
   --------------------------------------------------------------- */
.lr {
	min-width: 0;
}
.lr-proveedor {
	padding: 20px 22px;
	margin-bottom: 26px;
	background: #06203a;
	border: 1px solid var(--line);
	border-top: 2px solid var(--orange);
}
.lr-proveedor h3 {
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.lr-proveedor ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px 24px;
}
.lr-proveedor li {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.lr-proveedor span {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-mut);
}
.lr-proveedor b {
	color: #fff;
	font-size: 0.92rem;
	overflow-wrap: anywhere;
}

.lr-aviso {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px;
	margin-bottom: 24px;
	border: 1px solid var(--line-strong);
	background: #06203a;
}
.lr-aviso strong {
	display: block;
	color: #fff;
	margin-bottom: 4px;
}
.lr-aviso p {
	font-size: 0.9rem;
	color: var(--text-soft);
}
.lr-aviso svg {
	flex-shrink: 0;
	margin-top: 2px;
}
.lr-aviso--ok {
	border-color: rgba(30, 178, 87, 0.5);
}
.lr-aviso--ok svg {
	color: #1eb257;
}
.lr-aviso--error {
	border-color: var(--edge-orange);
}
.lr-aviso--error svg {
	color: var(--orange);
}

.lr-bloque {
	border: 1px solid var(--line);
	background: #06203a;
	padding: 22px;
	margin-bottom: 18px;
}
.lr-bloque legend {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 10px 0 0;
	font-size: 0.86rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}
.lr-bloque legend span {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	background: var(--orange);
	color: #fff;
	font-size: 0.8rem;
}

.lr-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 16px;
}
.lr-2 {
	grid-column: span 2;
}
.lr-3 {
	grid-column: 1 / -1;
}
.lr-grid label {
	display: block;
	min-width: 0;
}
.lr-grid label > span {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--text-soft);
	margin-bottom: 7px;
}
.lr-grid input[type='text'],
.lr-grid input[type='tel'],
.lr-grid input[type='email'],
.lr-grid textarea,
.lr-grid select {
	width: 100%;
	background: rgba(3, 15, 29, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 3px;
	padding: 13px 15px;
	color: #fff;
	font-family: inherit;
	font-size: 0.95rem;
	line-height: normal;
	resize: vertical;
	transition: border-color 0.25s ease, background 0.25s ease;
}
.lr-grid input:focus,
.lr-grid textarea:focus,
.lr-grid select:focus {
	outline: none;
	border-color: var(--orange);
	background: rgba(3, 15, 29, 0.85);
}
.lr-check,
.lr-radio {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
}
.lr-check span,
.lr-radio span {
	margin: 0 !important;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--text-soft);
}
.lr-radio b {
	color: #fff;
}
.lr-check input,
.lr-radio input {
	margin-top: 3px;
	accent-color: #ff4400;
	flex-shrink: 0;
}
.lr-trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lr-legal {
	font-size: 0.85rem;
	color: var(--text-soft);
	padding: 16px 18px;
	border-left: 2px solid var(--orange);
	background: rgba(255, 68, 0, 0.06);
	margin-bottom: 20px;
}
.lr-legal b {
	color: #fff;
}
.lr-btn {
	width: 100%;
}

/* El índice legal marca la política que se está leyendo */
.legal-nav a.on {
	color: #fff;
	font-weight: 700;
}

@media (max-width: 720px) {
	.lr-grid {
		grid-template-columns: 1fr;
	}
	.lr-2,
	.lr-3 {
		grid-column: 1 / -1;
	}
	.lr-bloque {
		padding: 16px;
	}
}

/* Subtítulos dentro de una política */
.legal-block h3 {
	font-size: 1.02rem;
	color: #fff;
	margin: 22px 0 10px;
	padding-left: 12px;
	border-left: 2px solid var(--orange);
	letter-spacing: -0.01em;
}
.legal-block h3:first-of-type {
	margin-top: 6px;
}

/* El índice legal suelto es el primer elemento de la rejilla y se queda pegado */
.legal-layout > .elementor-widget-nexa-legal-nav {
	position: sticky;
	top: calc(var(--header-h) + var(--stick));
	align-self: start;
}
@media (max-width: 900px) {
	.legal-layout > .elementor-widget-nexa-legal-nav {
		position: static;
	}
}

/* =========================================================================
   25 · Movimiento
   Añadidos sobre el diseño: nada altera la geometría, solo cómo aparece
   y cómo responde al puntero. Todo se apaga con prefers-reduced-motion.
   ========================================================================= */

/* --- Entrada en cascada ------------------------------------------------- */
.nexa-js .reveal {
	transition-delay: var(--nx-delay, 0ms);
	will-change: opacity, transform;
}
.nexa-js .reveal.in {
	will-change: auto;
}

/* La primera pantalla entra sola, sin depender del scroll */
.nexa-entrada .hero-copy > .hero-text.on,
.nexa-entrada .hero-actions,
.nexa-entrada .hero-dots,
.nexa-entrada .hero-visual {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
}
.nexa-entrada .hero-actions {
	transition-delay: 0.18s;
}
.nexa-entrada .hero-dots {
	transition-delay: 0.26s;
}
.nexa-entrada .hero-visual {
	transform: translateY(28px) scale(0.985);
	transition-delay: 0.1s;
}
.nexa-entrada-lista .hero-copy > .hero-text.on,
.nexa-entrada-lista .hero-actions,
.nexa-entrada-lista .hero-dots,
.nexa-entrada-lista .hero-visual {
	opacity: 1;
	transform: none;
}

/* --- Hover: tarjetas ---------------------------------------------------- */
/* El diseño ya eleva las tarjetas; se añade una cornisa de color que
   refuerza el gesto sin cambiar la caja. */
.pcard,
.tool-card,
.respaldo-card,
.nos-team-card,
.nos-val-card {
	transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
		box-shadow 0.4s var(--ease);
}
.pcard:hover,
.tool-card:hover,
.respaldo-card:hover,
.nos-team-card:hover {
	box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9);
}
.pcard:hover .pcard-tag--tl {
	background: var(--orange-400);
}

/* Botón principal: el acento inferior se comporta como un pedal */
.btn-primary,
.nx-btn--primary .elementor-button {
	transition: transform 0.28s var(--ease), background 0.25s ease,
		border-color 0.25s ease, box-shadow 0.28s var(--ease);
}
.btn-primary:hover,
.nx-btn--primary .elementor-button:hover {
	box-shadow: 0 10px 22px -12px var(--orange-glow);
}
.btn-primary:active,
.nx-btn--primary .elementor-button:active {
	transform: translateY(0);
	border-bottom-width: 2px;
}

/* Enlaces del pie y del índice legal: subrayado que crece */
.footer-col a,
.legal-nav a {
	position: relative;
}
.footer-col a::after,
.legal-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--ease);
}
.footer-col a:hover::after,
.legal-nav a:hover::after {
	transform: scaleX(1);
}
.legal-nav a::after {
	left: 22px;
	width: calc(100% - 22px);
}

/* Redes del pie: giro mínimo al pasar */
.footer-social a {
	transition: transform 0.35s var(--ease), background 0.3s ease,
		border-color 0.3s ease, color 0.3s ease;
}
.footer-social a:hover {
	transform: translateY(-3px) rotate(-4deg);
}

/* Módulo del plan de estudios: la cabecera reacciona al puntero */
.pd-mod-head {
	transition: background 0.3s ease;
}
.pd-mod-head:hover {
	background: rgba(255, 255, 255, 0.03);
}
.pd-mod-head:hover .pd-mod-n {
	color: var(--orange);
}

/* Filas de certificación y filtros */
.certs-list li,
.filtro-grupo label,
.filtro-tipos a {
	transition: transform 0.3s var(--ease), border-color 0.3s ease, color 0.2s ease;
}

/* Logos: se despiertan al pasar por encima */
.respaldo-logo,
.pd-cocert-logo,
.certs-logo {
	transition: transform 0.35s var(--ease);
}
.respaldo-card:hover .respaldo-logo,
.certs-list li:hover .certs-logo {
	transform: scale(1.04);
}

/* --- Nada de esto si el sistema pide menos movimiento ------------------- */
@media (prefers-reduced-motion: reduce) {
	.nexa-js .reveal,
	.nexa-entrada .hero-copy > .hero-text.on,
	.nexa-entrada .hero-actions,
	.nexa-entrada .hero-dots,
	.nexa-entrada .hero-visual {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* =======================================================================
 * 26 · PERFIL DEL EGRESADO
 * El folleto lo presenta en tres tiempos: capacidades, párrafo de cierre
 * y cargos. Las capacidades reutilizan la lista de objetivos (.pd-obj)
 * porque son frases largas y ahí sí respiran; los cargos siguen siendo
 * las etiquetas cortas de .pd-salidas.
 * ===================================================================== */
.pd-perfil {
	margin-bottom: 18px;
}
.pd-perfil-cierre {
	margin: 0 0 20px;
	padding-left: 15px;
	border-left: 2px solid var(--orange);
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--text-soft);
}
.pd-perfil-label {
	margin: 0 0 12px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-dim, var(--text-soft));
}

@media (max-width: 720px) {
	.pd-perfil {
		grid-template-columns: 1fr;
	}
}

/* =======================================================================
 * 27 · FONDO DEL HERO SEGÚN EL ANCHO
 * El fondo va tras el velo y recortado por `cover`: en un móvil no se
 * distingue la copia de 768 px de la de 1024, pero pesa la mitad y es la
 * imagen que marca el LCP.
 * ===================================================================== */
.hero-bg .hero-slide-img {
	background-image: var(--nx-bg, none);
}
@media (max-width: 780px) {
	.hero-bg .hero-slide-img {
		background-image: var(--nx-bg-m, var(--nx-bg, none));
	}
}

/* =======================================================================
 * 28 · MÓDULOS DEL PLAN DE ESTUDIOS
 * Los folletos reparten las unidades en MÓDULO 1 y MÓDULO 2. La cabecera
 * usa el mismo lenguaje que el resto de la ficha: antetítulo naranja,
 * título y una cota discreta a la derecha.
 * ===================================================================== */
.pd-modulo-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	margin: 26px 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}
.pd-accordion + .pd-modulo-head {
	margin-top: 34px;
}
.pd-modulo-n {
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--orange-400);
}
.pd-modulo-title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 1.06rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--text);
}
.pd-modulo-count {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-soft);
	white-space: nowrap;
}

@media (max-width: 620px) {
	.pd-modulo-head {
		gap: 6px 12px;
		margin: 22px 0 12px;
	}
	.pd-modulo-title {
		flex: 1 0 100%;
		font-size: 1rem;
	}
}

/* =======================================================================
 * 29 · PRECIOS: PREVENTA Y TARIFA DE COLEGIADOS
 * Dos cifras cuando hay preventa (la de público tachada y la vigente) y,
 * debajo, la tarifa del CAP, que no se cobra desde la web.
 * ===================================================================== */
.pd-precio {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}
.pd-precio-etiqueta {
	display: inline-block;
	margin-bottom: 8px;
	padding: 4px 10px;
	background: var(--orange);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pd-precio-cifras {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}
.pd-precio-cifras del {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text-soft);
	text-decoration-thickness: 1px;
}
.pd-precio-cifras ins {
	font-size: 1.72rem;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--text);
	text-decoration: none;
	background: none;
}
.pd-precio-cifras .woocommerce-Price-amount {
	white-space: nowrap;
}

/* La tarifa de colegiados lleva a WhatsApp: hay que acreditar colegiatura. */
.pd-precio-cap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding: 10px 13px;
	background: rgba(37, 211, 102, 0.08);
	border: 1px solid rgba(37, 211, 102, 0.3);
	color: var(--text-soft);
	font-size: 0.88rem;
	text-decoration: none;
	transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.pd-precio-cap:hover {
	background: rgba(37, 211, 102, 0.14);
	border-color: rgba(37, 211, 102, 0.55);
}
.pd-precio-cap b {
	color: var(--text);
}
.pd-precio-cap-cifra {
	margin-left: 4px;
	font-weight: 800;
	white-space: nowrap;
}
.pd-precio-cap-cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	font-weight: 700;
	color: #25d366;
	white-space: nowrap;
}
.pd-precio-cap-cta svg {
	flex: 0 0 auto;
}

/* La tarjeta del catálogo enseña la rebaja en pequeño. */
.pcard-precio del {
	display: block;
	margin-bottom: 1px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--text-soft);
	text-decoration-thickness: 1px;
}
.pcard-precio strong .woocommerce-Price-amount {
	white-space: nowrap;
}

@media (max-width: 420px) {
	.pd-precio-cap {
		flex-direction: column;
		align-items: flex-start;
		gap: 7px;
	}
}

/* =======================================================================
 * 30 · DIAPOSITIVA DE FONDO LIBRE
 * Cuando una diapositiva no lleva columna de imagen, el velo se mantiene
 * denso donde está el texto y se abre hacia la derecha para que se vea el
 * fondo. Las otras diapositivas no se enteran: su figura va por encima.
 * ===================================================================== */
.hero-figure--libre {
	background: none;
	border: 0;
	box-shadow: none;
}

.hero--libre .hero-overlay {
	background:
		linear-gradient(
			100deg,
			#04192e 6%,
			rgba(4, 25, 46, 0.94) 30%,
			rgba(4, 25, 46, 0.66) 44%,
			rgba(4, 25, 46, 0.20) 60%,
			rgba(4, 25, 46, 0.06) 78%,
			rgba(4, 25, 46, 0.24) 100%
		),
		linear-gradient(180deg, rgba(4, 25, 46, 0.30), rgba(3, 15, 29, 0.58));
	transition: background 0.9s var(--ease);
}

/* En móvil el texto ocupa todo el ancho: el velo vuelve a cerrarse. */
@media (max-width: 900px) {
	.hero--libre .hero-overlay {
		background:
			linear-gradient(
				180deg,
				rgba(4, 25, 46, 0.86) 0%,
				rgba(4, 25, 46, 0.78) 55%,
				rgba(4, 25, 46, 0.9) 100%
			);
	}
}

/* =======================================================================
 * 31 · CARRUSEL FLOTANTE SOBRE EL HERO
 * La tira de herramientas se apoya sobre el fondo del hero, como si los
 * logos fueran nodos más de la red del mapa. Sin fondo propio, con un
 * degradado suave que la despega y un halo azulado que los emparenta con
 * los puntos de luz del vídeo.
 * ===================================================================== */
.convenios--flotante {
	position: relative;
	z-index: 3;
	margin-top: -164px;
	background: transparent;
	/* El filete que separa la sección sobra cuando flota sobre el hero. */
	border-block: 0;
	/* La tira no debe robar clics a los botones del hero. */
	pointer-events: none;
}
.convenios--flotante .conv-item {
	pointer-events: auto;
}

/* El hero necesita sitio abajo para que la tira no pise sus controles. */
.elementor:has(.convenios--flotante) .hero {
	padding-bottom: 190px;
}

/*
 * Sin velo bajo la tira: el fondo del hero ya es oscuro en esa franja y
 * cualquier degradado se leía como una banda con borde. Los logos se
 * despegan con su propia sombra, que además los emparenta con los nodos
 * de luz del vídeo.
 */
.convenios--flotante .container {
	position: relative;
	z-index: 1;
}

/* Una línea fina, del mismo azul de las conexiones del mapa. */
.convenios--flotante .convenios-label {
	position: relative;
	padding-bottom: 14px;
}
.convenios--flotante .convenios-label::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 46px;
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.85), transparent);
}

/* Los logos brillan como los nodos del vídeo. */
.convenios--flotante .conv-logo {
	filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.4)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.convenios--flotante .conv-item--mono .conv-logo {
	opacity: 0.92;
}
.convenios--flotante .conv-item--mono:hover .conv-logo {
	opacity: 1;
}

@media (max-width: 900px) {
	.convenios--flotante {
		margin-top: -156px;
	}
	.elementor:has(.convenios--flotante) .hero {
		padding-bottom: 150px;
	}
}

/* =======================================================================
 * 32 · BANDA DE CIFRAS
 * Pasa de cuatro números separados por filetes a tarjetas con presencia:
 * cada cifra en su placa, con un acento superior y el número en degradado.
 * Aguanta cinco columnas sin apretarse y se reparte sola en pantallas
 * menores.
 * ===================================================================== */
.stats-band {
	padding: 76px 0;
}
.stats-inner {
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
	gap: 14px;
}

/* Los filetes sobran: ahora cada cifra tiene su propia caja. */
.stat-item:not(:last-child)::after {
	display: none;
}

.stat-item {
	position: relative;
	padding: 26px 18px 22px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.09);
	overflow: hidden;
	transition: border-color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease);
}
.stat-item::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: var(--grad-orange);
	transform: scaleX(0.32);
	transform-origin: left;
	transition: transform 0.5s var(--ease);
}
.stat-item:hover {
	background: rgba(255, 255, 255, 0.055);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(-4px);
}
.stat-item:hover::before {
	transform: scaleX(1);
}

.stat-num {
	font-size: clamp(2.4rem, 4.2vw, 3.35rem);
	background: var(--grad-orange);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-variant-numeric: tabular-nums;
}
/* El sufijo («h», «+») acompaña sin competir con la cifra. */
.stat-num span,
.stat-num em {
	-webkit-text-fill-color: initial;
	color: var(--text-soft);
	font-style: normal;
	font-size: 0.52em;
	font-weight: 800;
	margin-left: 2px;
}

.stat-item p {
	margin-top: 12px;
	font-size: 0.83rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.02em;
	color: var(--text-soft);
}

@media (max-width: 900px) {
	.stats-band {
		padding: 56px 0;
	}
	.stat-item {
		padding: 22px 14px 18px;
	}
}
@media (max-width: 560px) {
	.stats-inner {
		grid-template-columns: 1fr 1fr;
	}
}