/* =========================================================================
   APMA Theme — estilos del header, footer y utilidades de marca.
   El contenido de las páginas se maqueta con Elementor; aquí solo va el
   "chrome" del sitio (navbar + footer) y helpers reutilizables.
   ========================================================================= */

/* ---------- Reset ligero / base ---------- */
* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--apma-font);
	color: var(--apma-text);
	background: #fff;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--apma-orange); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

.apma-container {
	width: 100%;
	max-width: var(--apma-container);
	margin-inline: auto;
	padding-inline: 20px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

.apma-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100000;
	background: var(--apma-orange); color: #fff; padding: 10px 16px;
}
.apma-skip-link:focus { left: 8px; top: 8px; }

/* =========================================================================
   HEADER / NAVBAR
   ========================================================================= */
.apma-header {
	background: #fff;
	color: var(--apma-navy);
	position: sticky;
	top: 0;
	z-index: 999;
	border-bottom: 1px solid var(--apma-border);
	box-shadow: 0 2px 10px rgba(8, 23, 55, .06);
}

.apma-header__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding: 0 24px;
	min-height: var(--apma-header-h);
	display: flex;
	align-items: center;
	gap: 24px;
}

/* --- Marca / logo --- */
.apma-header__brand { flex: 0 0 auto; display: flex; align-items: center; }
.apma-header__brand img,
.apma-header__brand .custom-logo { max-height: 52px; width: auto; display: block; }

.apma-logo-fallback { display: flex; align-items: center; gap: 10px; color: #fff; }
.apma-logo-fallback:hover { text-decoration: none; }
/* En el header (fondo blanco) el texto del logo va en navy. El footer lo mantiene claro. */
.apma-header .apma-logo-fallback { color: var(--apma-royal); }

/* Escudo de respaldo sobre fondo OSCURO. La clase la pone template-parts/brand.php
   según el fondo que declare cada pieza, así que vale para cualquier variante
   presente o futura (no hay que añadir una regla por diseño). */
.apma-header .apma-logo-fallback--on-dark,
.apma-footer .apma-logo-fallback--on-dark { color: var(--apma-white); }
.apma-header .apma-logo-fallback--on-dark .apma-logo-text small { color: #b9c6de; }
.apma-header .apma-logo-text small { color: var(--apma-royal); }
.apma-logo-mark {
	display: grid; place-items: center;
	width: 42px; height: 42px; border-radius: 8px;
	background: linear-gradient(160deg, var(--apma-blue), var(--apma-navy-dark));
	border: 2px solid var(--apma-gold);
	font-weight: 800; font-size: 22px; color: #fff;
}
.apma-logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.apma-logo-text strong { font-size: 20px; letter-spacing: .5px; }
.apma-logo-text small { font-size: 8.5px; letter-spacing: 1px; color: #b9c6de; }

/* --- Menú --- */
.apma-nav { flex: 1 1 auto; }

.apma-menu {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	flex-wrap: wrap;
}

.apma-menu li { position: relative; }

.apma-menu a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--apma-menu-text);
	font-size: 11.5px;
	font-weight: 900;
	letter-spacing: .2px;
	text-transform: uppercase;
	padding: 10px 11px;
	border-radius: 6px;
	white-space: nowrap;
	transition: color .15s ease, background .15s ease;
}
.apma-menu a:hover {
	color: var(--apma-orange);
	text-decoration: none;
	background: var(--apma-blue-light);
}
/* Página actual: se mantiene en azul royal sin "pill". Así, aunque haya enlaces
   provisionales que apunten al home (y marquen todos los ítems como actuales),
   el menú se ve limpio. El hover sí da el acento naranja. */
.apma-menu .current-menu-item > a,
.apma-menu .current-menu-ancestor > a {
	color: var(--apma-menu-text);
	background: transparent;
}

/* Caret de submenús */
.apma-submenu-toggle {
	background: none; border: 0; cursor: pointer;
	/* El enlace tiene 11px de padding derecho; con -9px la flecha queda ~2px
	   después del texto (al lado, sin encimarse). */
	padding: 8px 6px 8px 0; margin-left: -9px;
	color: var(--apma-caret);
	display: inline-flex; align-items: center;
	vertical-align: middle; /* centra la flecha con el texto (no por baseline) */
}
.apma-caret {
	width: 4px; height: 4px; /* flecha pequeña */
	border-right: 1.4px solid currentColor;
	border-bottom: 1.4px solid currentColor;
	/* rotate hace un chevron hacia abajo; el translateY compensa su centro óptico */
	transform: rotate(45deg) translateY(-1px);
	transition: transform .2s ease;
}
.apma-menu-open > .apma-submenu-toggle .apma-caret { transform: rotate(-135deg); }

/* Submenús desplegables */
.apma-menu .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 230px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(8,23,55,.22);
	padding: 8px;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 50;
}
.apma-menu li:hover > .sub-menu,
.apma-menu li:focus-within > .sub-menu,
.apma-menu .apma-menu-open > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.apma-menu .sub-menu a {
	color: var(--apma-text);
	text-transform: none;
	font-weight: 500;
	font-size: 14px;
	padding: 9px 12px;
	border-radius: 6px;
	width: 100%;
}
.apma-menu .sub-menu a:hover {
	background: var(--apma-blue-light);
	color: var(--apma-navy);
}

/* --- Submenús anidados (nivel 3+): flyout lateral en escritorio --- */
.apma-menu .sub-menu .menu-item-has-children > a { padding-right: 28px; }

.apma-menu .sub-menu .sub-menu {
	top: -8px;                 /* alinea con el ítem padre */
	left: 100%;                /* se despliega hacia la derecha */
	margin-left: 4px;
}
/* Si no hay espacio a la derecha, el nivel se abre hacia la izquierda */
.apma-menu .sub-menu li:hover > .sub-menu.apma-flip-left,
.apma-menu .sub-menu .apma-menu-open > .sub-menu.apma-flip-left {
	left: auto; right: 100%; margin-left: 0; margin-right: 4px;
}

/* Caret de los niveles anidados: apunta a la derecha (▸) en escritorio */
.apma-submenu-toggle--nested {
	position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	padding: 6px; color: var(--apma-caret);
}
.apma-submenu-toggle--nested .apma-caret {
	transform: rotate(-45deg); /* apunta a la derecha */
	width: 5px; height: 5px;
}
.apma-menu .sub-menu li { position: relative; }
.apma-menu .sub-menu .apma-menu-open > .apma-submenu-toggle--nested .apma-caret {
	transform: rotate(45deg);
}

/* --- Acciones (carrito) --- */
.apma-header__actions { flex: 0 0 auto; display: flex; align-items: center; }
.apma-cart {
	position: relative;
	color: var(--apma-menu-text);
	display: inline-flex;
	padding: 8px;
	border-radius: 8px;
}
.apma-cart:hover { background: var(--apma-blue-light); }
.apma-cart__icon { display: block; }
.apma-cart-count {
	position: absolute; top: 0; right: 0;
	min-width: 18px; height: 18px;
	padding: 0 4px;
	background: var(--apma-orange);
	color: #fff; font-size: 11px; font-weight: 700;
	border-radius: 999px;
	display: grid; place-items: center;
	line-height: 1;
}

/* --- Toggle móvil --- */
.apma-nav-toggle {
	display: none;
	margin-left: auto;
	background: none; border: 0; cursor: pointer;
	padding: 10px;
}
.apma-nav-toggle__box { display: block; width: 24px; height: 18px; position: relative; }
.apma-nav-toggle__box span {
	position: absolute; left: 0; height: 2px; width: 100%;
	background: var(--apma-royal); border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
}
.apma-nav-toggle__box span:nth-child(1) { top: 0; }
.apma-nav-toggle__box span:nth-child(2) { top: 8px; }
.apma-nav-toggle__box span:nth-child(3) { top: 16px; }
.apma-nav-toggle[aria-expanded="true"] .apma-nav-toggle__box span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.apma-nav-toggle[aria-expanded="true"] .apma-nav-toggle__box span:nth-child(2) { opacity: 0; }
.apma-nav-toggle[aria-expanded="true"] .apma-nav-toggle__box span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================================
   BOTONES DE MARCA (reutilizables fuera de Elementor)
   ========================================================================= */
.apma-btn {
	display: inline-flex; align-items: center; gap: 8px;
	font-weight: 600; font-size: 14px;
	padding: 12px 22px; border-radius: 6px;
	transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
	text-transform: uppercase; letter-spacing: .4px;
}
.apma-btn:hover { text-decoration: none; transform: translateY(-1px); }
.apma-btn--primary { background: var(--apma-orange); color: #fff; }
.apma-btn--primary:hover { background: var(--apma-orange-dark); color: #fff; }
.apma-btn--outline { background: transparent; color: var(--apma-navy); border: 2px solid var(--apma-navy); }

/* =========================================================================
   HERO (home)  —  Texto+Botones | Imagen (fade izq/der) | Tarjeta (sobrepuesta)
   Las clases se asignan desde gen-home.js; el layout se controla aquí.
   ========================================================================= */
/* Las columnas del hero se estiran a la misma altura (para que la imagen la ocupe) */
.apma-hero > .elementor-container { align-items: stretch; }

/* La columna IMAGEN NO se mueve (sin margin negativo); es la IMAGEN INTERIOR la
   que se extiende a la derecha para meterse bajo la tarjeta, sin mover columnas.
   La TARJETA se monta encima con z-index mayor. */
.apma-hero-photo-col { position: relative; z-index: 1; overflow: visible; }
.apma-hero-card-col  { position: relative; z-index: 2; }
/* El texto queda por encima de la extensión izquierda de la imagen */
.apma-hero-text { position: relative; z-index: 3; }

/* La imagen ocupa TODA la altura de la columna (recorta con object-fit) + fade lat. */
.apma-hero-photo-col > .elementor-widget-wrap { height: 100%; align-content: stretch; }
.apma-hero-photo,
.apma-hero-photo > .elementor-widget-container { display: block; width: 100%; height: 100%; overflow: visible; }
.apma-hero-photo img {
	display: block;
	width: calc(100% + 140px) !important;  /* se extiende 70px a CADA lado */
	margin-left: -70px !important;          /* extensión hacia la izquierda */
	max-width: none !important;
	height: 100% !important;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 68%, transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 68%, transparent 100%);
}

/* La columna 3 solo posiciona; NO lleva el borde. */
.apma-hero-card-col { align-self: center; }

/* El borde vive en un CONTENEDOR real (inner-section) DENTRO de la columna.
   Así podemos darle espacio arriba (margin-top) y los icon-box van adentro. */
.apma-hero-card {
	margin-top: 22px;                              /* ← espacio arriba del borde */
	background: rgba(9, 23, 55, 0.92);
	border: 1.5px solid rgba(242, 106, 33, 0.60);  /* naranja claro */
	border-radius: 16px;
	padding: 20px 18px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
}
/* El inner-section no debe añadir gutters propios */
.apma-hero-card > .elementor-container { --gap: 0px; }
/* Separación entre ítems (icon-box) de la tarjeta */
.apma-hero-card-col .elementor-widget-icon-box { margin-bottom: 6px; }
.apma-hero-card-col .elementor-widget-icon-box:last-child { margin-bottom: 0; }
/* Icono a la izquierda, texto alineado arriba y a la izquierda */
.apma-hero-card-col .elementor-icon-box-wrapper { align-items: flex-start; }
.apma-hero-card-col .elementor-icon-box-content { text-align: left; }

/* =========================================================================
   BARRA DE STATS (contadores)  —  Icono izq + Cantidad + Subtítulo (2 líneas)
   ========================================================================= */
.apma-stats .elementor-icon-box-wrapper { align-items: center; justify-content: center; }
.apma-stats .elementor-icon-box-content { text-align: left; }
/* Fuerza el subtítulo a ~2 líneas (limita el ancho para que envuelva) */
.apma-stats .elementor-icon-box-description { max-width: 130px; }
/* El icono no se encoge y respeta su tamaño */
.apma-stats .elementor-icon-box-icon { flex: 0 0 auto; }

/* =========================================================================
   ROADMAP (4 tarjetas)  —  estructura en Elementor: Columna = [Imagen, Card].
   El Card (inner-section .apma-roadmap-card) lleva su fondo/borde/sombra/overlap
   como ajustes de Elementor (editables por ti). Única regla CSS: la raya azul
   superior, porque Elementor no hace bordes de distinto color por lado.
   ========================================================================= */
.apma-roadmap-card { border-top: 4px solid #1B4F9C !important; position: relative; }

/* Borde falso: barra azul vertical arriba-izquierda, SOLO en los cards 2, 3 y 4 */
.apma-roadmap-cards .elementor-top-column:not(:first-child) .apma-roadmap-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 39px;
	background: #1B4F9C;
	border-top-left-radius: 8px;
}
/* En tablet y celular (cuando las tarjetas se apilan) se oculta el borde falso.
   El margin-left -7px de las columnas 2-4 se maneja en Elementor (margen
   responsive por dispositivo: Tablet/Móvil), no aquí. */
@media (max-width: 1024px) {
	.apma-roadmap-cards .elementor-top-column:not(:first-child) .apma-roadmap-card::before { display: none; }
}

/* =========================================================================
   SECCIONES DE PRODUCTO (cards)  —  imagen con fade + features en grilla
   ========================================================================= */
/* Imagen a full alto (recorta con object-fit) + desvanecido lateral */
.apma-product-img,
.apma-product-img .elementor-widget-container { height: 100%; }
.apma-product-img img {
	height: 100% !important;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
/* Poco espacio entre título / subtítulo / contenido / features / botón */
.apma-product-body .elementor-widget:not(:last-child) { margin-bottom: 7px; }
/* El <p> del contenido sin márgenes propios (quita el espacio bajo el subtítulo) */
.apma-product-body .elementor-widget-text-editor p { margin: 0; }
/* Logos 20% más pequeños */
.apma-product-logos img { width: 80%; }
/* Features: 4 en fila (icono + texto) */
.apma-product-features .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px 16px;
}
.apma-product-features .elementor-icon-list-item { align-items: flex-start; }
@media (max-width: 1024px) {
	.apma-product-features .elementor-icon-list-items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.apma-product-features .elementor-icon-list-items { grid-template-columns: 1fr; }
}

/* =========================================================================
   TESTIMONIOS + FUNDADOR
   ========================================================================= */
/* Poco espacio entre título, subtítulo y las tarjetas */
.apma-testi-col > .elementor-widget-wrap > .elementor-widget:not(:last-child) { margin-bottom: 4px; }
/* Sin margen del <p> del subtítulo (ese hueco no se puede quitar desde Elementor) */
.apma-testi-col .elementor-widget-text-editor p { margin: 0; }
/* Avatar del testimonio 40% más pequeño */
.apma-tcard .elementor-testimonial-image img { width: 36px; height: 36px; }
/* Tarjetas de IGUAL alto y autor (imagen+nombre/cargo) alineado abajo,
   sin importar la longitud del texto del testimonio */
.apma-tcard > .elementor-widget-wrap { display: flex; flex-direction: column; height: 100%; }
.apma-tcard .elementor-widget-testimonial { flex: 1 0 auto; }
.apma-tcard .elementor-widget-testimonial > .elementor-widget-container { height: 100%; }
.apma-tcard .elementor-testimonial-wrapper { display: flex; flex-direction: column; height: 100%; }
.apma-tcard .elementor-testimonial-content { flex: 1 0 auto; }

/* =========================================================================
   FRANJA WHATSAPP  —  sin gaps internos (col → inner-section → columnas)
   ========================================================================= */
.apma-whatsapp .elementor-element-populated { padding: 0 !important; }

/* Botones del hero: lado a lado con ~15px de separación */
.apma-hero-actions > .elementor-container {
	gap: 15px;
	justify-content: flex-start;
	flex-wrap: nowrap;
}
.apma-hero-actions .elementor-column { width: auto !important; }
.apma-hero-actions .elementor-widget-button,
.apma-hero-actions .elementor-widget-wrap { width: auto; }

@media (max-width: 1024px) {
	/* En tablet/móvil: sin overlap, columnas apiladas, sin fade */
	.apma-hero-photo-col { margin-right: 0; }
	.apma-hero-photo img { -webkit-mask-image: none; mask-image: none; }
	.apma-hero-actions > .elementor-container { flex-wrap: wrap; }
}

/* =========================================================================
   CONTENIDO / PÁGINAS
   ========================================================================= */
.apma-site-content { min-height: 40vh; }
.apma-main { padding-block: 40px; }
.apma-main--page { padding: 0; } /* Elementor controla su propio espaciado */

.apma-page-header { text-align: center; padding: 48px 20px 8px; }
.apma-page-title { font-size: 34px; color: var(--apma-navy); }

.apma-post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 28px; }
.apma-card { background: #fff; border: 1px solid var(--apma-border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.apma-card__thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.apma-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.apma-card__title { font-size: 20px; margin: 0; color: var(--apma-navy); }
.apma-card__title a { color: inherit; }
.apma-card__meta { color: var(--apma-muted); font-size: 13px; }

.apma-single { max-width: 800px; margin-inline: auto; }
.apma-single__title { font-size: 36px; color: var(--apma-navy); margin-bottom: 12px; }
.apma-single__meta { display: flex; gap: 16px; color: var(--apma-muted); font-size: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.apma-single__thumb { margin: 0 0 28px; border-radius: 12px; overflow: hidden; }
.apma-single__content { font-size: 17px; }

.apma-404 { text-align: center; padding-block: 80px; }
.apma-404__code { font-size: 96px; color: var(--apma-orange); margin: 0; line-height: 1; }
.apma-404__title { font-size: 30px; color: var(--apma-navy); margin: 8px 0 16px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.apma-footer { background: var(--apma-navy-dark); color: #c6d2e6; }
.apma-footer__inner {
	max-width: var(--apma-container);
	margin-inline: auto;
	padding: 56px 20px 40px;
	display: grid;
	grid-template-columns: 1.6fr repeat(5, 1fr);
	gap: 32px;
}
.apma-footer__brand .apma-logo-mark { width: 38px; height: 38px; font-size: 18px; }
/* Sin este tope, un logo real se imprime a su tamaño natural en el pie. */
.apma-footer__brand img,
.apma-footer__brand .custom-logo { max-height: 46px; width: auto; display: block; }
.apma-footer__desc { font-size: 13.5px; margin-top: 16px; max-width: 280px; }
.apma-footer-title { color: #fff; font-size: 13px; letter-spacing: .6px; margin: 0 0 14px; text-transform: uppercase; }
.apma-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.apma-footer-menu a { color: #b7c4db; font-size: 13.5px; }
.apma-footer-menu a:hover { color: #fff; text-decoration: none; }

.apma-footer__bar { background: #060f26; }
.apma-footer__inner--bar {
	padding: 16px 20px;
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	grid-template-columns: none;
}
.apma-copy, .apma-tagline { margin: 0; font-size: 12.5px; color: #8ea0bf; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px) {
	.apma-menu a { font-size: 12px; padding: 9px 8px; }
	.apma-header__inner { gap: 12px; }
}

@media (max-width: 960px) {
	.apma-nav-toggle { display: block; order: 3; }
	.apma-header__actions { order: 2; margin-left: auto; }

	.apma-nav {
		order: 4;
		flex-basis: 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s ease;
	}
	.apma-nav.is-open { max-height: 80vh; overflow-y: auto; }

	.apma-header__inner { flex-wrap: wrap; padding-block: 12px; }

	.apma-menu { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding-bottom: 12px; }
	.apma-menu > li { border-bottom: 1px solid var(--apma-border); }
	.apma-menu a { padding: 14px 8px; font-size: 14px; }

	/* Submenús en móvil: acordeón */
	.apma-menu .sub-menu {
		position: static;
		opacity: 1; visibility: visible; transform: none;
		box-shadow: none; background: rgba(11,30,69,.03);
		border-radius: 0; padding: 0 0 8px;
		display: none;
	}
	.apma-menu .apma-menu-open > .sub-menu { display: block; }
	.apma-menu .sub-menu a { color: var(--apma-menu-text); }
	.apma-menu .sub-menu a:hover { background: var(--apma-blue-light); color: var(--apma-orange); }

	.apma-submenu-toggle { position: absolute; right: 0; top: 4px; padding: 12px; color: var(--apma-caret); }

	/* Niveles anidados en móvil: acordeón con sangría (no flyout lateral) */
	.apma-menu .sub-menu .sub-menu {
		position: static; left: auto; right: auto; margin: 0;
		background: rgba(11,30,69,.05);
	}
	.apma-menu .sub-menu .sub-menu a { padding-left: 24px; }         /* nivel 3 */
	.apma-menu .sub-menu .sub-menu .sub-menu a { padding-left: 40px; } /* nivel 4 */
	.apma-submenu-toggle--nested { color: var(--apma-caret); }
	.apma-submenu-toggle--nested .apma-caret { transform: rotate(45deg); } /* abajo, como los demás */
	.apma-menu .sub-menu .apma-menu-open > .apma-submenu-toggle--nested .apma-caret { transform: rotate(-135deg); }
}

@media (max-width: 900px) {
	.apma-footer__inner { grid-template-columns: 1fr 1fr; }
	.apma-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.apma-footer__inner { grid-template-columns: 1fr; }
	.apma-footer__inner--bar { flex-direction: column; text-align: center; }
}

/* =========================================================================
   SKIN ALTERNATIVO
   -------------------------------------------------------------------------
   Se activa con la clase .apma-skin-simuladores que functions.php pone en el <body>
   de toda página que use la plantilla "APMA — Header/Footer alternativo".

   Invierte la marca respecto al skin por defecto:
       header  blanco  ->  navy
       footer  navy    ->  claro

   Es SOLO color/disposición: la estructura de esas páginas vive en
   header-alt.php y footer-alt.php. Para volver atrás, borra este bloque.
   ========================================================================= */

/* --- Header alternativo (navy) --- */
.apma-skin-simuladores .apma-header--simuladores {
	background: var(--apma-navy);
	color: var(--apma-white);
	border-bottom-color: rgba(255, 255, 255, .12);
	box-shadow: 0 2px 18px rgba(6, 15, 38, .35);
}

/* Solo PRIMER NIVEL (> li > a). Con un `.apma-menu a` a secas estas reglas
   alcanzaban también a los enlaces del submenú y, por tener una clase más que
   `.apma-menu .sub-menu a`, los pintaban de blanco dentro de la tarjeta blanca:
   el desplegable se abría pero no se leía nada. */
.apma-skin-simuladores .apma-header--simuladores .apma-menu > li > a { color: rgba(255, 255, 255, .88); }
.apma-skin-simuladores .apma-header--simuladores .apma-menu > li > a:hover {
	color: var(--apma-white);
	background: rgba(255, 255, 255, .10);
}
.apma-skin-simuladores .apma-header--simuladores .apma-menu > .current-menu-item > a,
.apma-skin-simuladores .apma-header--simuladores .apma-menu > .current-menu-ancestor > a { color: var(--apma-white); }

/* Submenús: sobre fondo navy se mantienen en tarjeta blanca (legibilidad).
   Sus enlaces usan los colores base (.apma-menu .sub-menu a). En móvil no hay
   tarjeta —el acordeón se abre sobre el navy—; eso lo cubre el bloque
   @media de más abajo. */
.apma-skin-simuladores .apma-header--simuladores .apma-submenu-toggle { color: rgba(255, 255, 255, .7); }
.apma-skin-simuladores .apma-header--simuladores .apma-menu .sub-menu .apma-submenu-toggle { color: var(--apma-caret); }

/* Hamburguesa y carrito (si lo reactivas) en blanco. */
.apma-skin-simuladores .apma-header--simuladores .apma-nav-toggle__box span { background: var(--apma-white); }
.apma-skin-simuladores .apma-header--simuladores .apma-cart { color: var(--apma-white); }
.apma-skin-simuladores .apma-header--simuladores .apma-cart:hover { background: rgba(255, 255, 255, .10); }

/* Móvil: el submenú deja de ser tarjeta blanca y se abre en acordeón sobre el
   navy, así que ahí sus enlaces sí van en claro. Mismo corte que el acordeón
   del bloque RESPONSIVE (960px). */
@media (max-width: 960px) {
	.apma-skin-simuladores .apma-header--simuladores .apma-menu .sub-menu a { color: rgba(255, 255, 255, .88); }
	.apma-skin-simuladores .apma-header--simuladores .apma-menu .sub-menu a:hover {
		color: var(--apma-white);
		background: rgba(255, 255, 255, .10);
	}
}

/* El escudo de respaldo sobre navy lo resuelve .apma-logo-fallback--on-dark
   (regla genérica en la sección HEADER), que brand.php aplica solo. */

/* Menú centrado y carrito a la derecha. */
.apma-header__inner--simuladores { justify-content: space-between; }
.apma-nav--center { margin-inline: auto; }

/* -------------------------------------------------------------------------
   Footer de Simuladores
   -------------------------------------------------------------------------
   Siete columnas (marca + 5 de enlaces + contacto) sobre navy, y debajo una
   barra con copyright, llamada de WhatsApp y QR.

   El marcado lo pone template-parts/footer/simuladores.php. A diferencia de las
   secciones de página, este pie NO se maqueta en Elementor: es una pieza del
   tema, así que su estilo vive aquí por definición.
   ---------------------------------------------------------------------- */
.apma-footer--simuladores {
	background: linear-gradient(180deg, #0C2456 0%, #08183C 100%);
	color: #A9C0DE;
	border-top: 2px solid #2E6BC7;
}

.apma-footer__inner--simuladores {
	/* La marca y el contacto piden más aire que las columnas de enlaces. */
	grid-template-columns: 1.45fr repeat(5, 1fr) 1.35fr;
	gap: 0;
	align-items: start;
	padding: 34px 20px 26px;
}

/* Hairline entre columnas: en todas menos la primera de cada línea. */
.apma-footer--simuladores .apma-footer__col {
	padding: 2px 0 2px 24px;
	border-left: 1px solid rgba(255, 255, 255, .10);
}
.apma-footer--simuladores .apma-footer__brand { padding-right: 24px; }

.apma-footer--simuladores .apma-footer-title {
	color: #C6E2FF; /* mismo celeste que el rótulo "ALINEADOS A ESTÁNDARES" de la sección de arriba */
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .9px;
	margin: 0 0 15px;
}
.apma-footer--simuladores .apma-footer-menu { gap: 0; } /* los <li> ya separan por su altura de línea */
.apma-footer--simuladores .apma-footer-menu a {
	color: var(--apma-white);
	font-size: 12.5px;
	transition: color .15s ease;
}
.apma-footer--simuladores .apma-footer-menu a:hover { color: #C6E2FF; }

.apma-footer--simuladores .apma-footer__desc {
	font-size: 12.5px;
	line-height: 1.65;
	margin: 14px 0 0;
	max-width: 250px;
}

/* --- Redes sociales de la columna de marca --- */
.apma-footer__redes {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	gap: 16px;
}
.apma-footer__redes a {
	color: #C6D8F0;
	display: block;
	transition: color .15s ease;
}
.apma-footer__redes a:hover { color: var(--apma-white); }
.apma-footer__redes svg { width: 19px; height: 19px; display: block; }

/* --- Columna de contacto: icono + dato --- */
.apma-footer-contacto a {
	display: flex;
	align-items: center;
	gap: 10px;
}
.apma-footer-contacto__icono {
	color: #C6D8F0;
	flex: 0 0 auto;
	display: block;
}
.apma-footer-contacto__icono svg { width: 17px; height: 17px; display: block; }

/* --- Barra inferior: copyright | WhatsApp | QR --- */
.apma-footer--simuladores .apma-footer__bar {
	background: transparent;
	border-top: 1px solid rgba(255, 255, 255, .10);
}
.apma-footer--simuladores .apma-footer__inner--bar {
	align-items: center;
	gap: 24px;
	padding: 16px 20px;
}
.apma-footer--simuladores .apma-copy {
	color: #8FA8CC;
	font-size: 12px;
	margin: 0;
	flex: 1 1 auto;
}

.apma-footer__wa {
	display: flex;
	align-items: center;
	gap: 14px;
	color: #C6E2FF; /* mismo celeste que los títulos de las columnas */
	flex: 0 0 auto;
}
.apma-footer__wa:hover { text-decoration: none; }
/* Sin círculo de fondo: el SVG ya trae la burbuja verde de la marca. */
.apma-footer__wa-icono {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}
/* 32px de caja. El lienzo del SVG tiene 28 unidades para dejar sitio al aro,
   así que la burbuja en sí se ve a unos 27px. */
.apma-footer__wa-icono svg { width: 32px; height: 32px; display: block; }
.apma-footer__wa-texto {
	font-size: 11.25px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: .3px;
	text-transform: uppercase;
}
.apma-footer__wa:hover .apma-footer__wa-texto { color: var(--apma-white); }

/* El QR va CENTRADO sobre la raya separadora, no colgando de ella.
   El marco blanco es además la zona de silencio del código: el PNG se genera
   sin ella (ver dev/gen-qr.js) para no pintarla dos veces y engordar el borde.
   Con 76px de imagen quedan 2,6px por módulo y 3,1 módulos de silencio. */
.apma-footer__qr {
	--qr-lado: 76px;
	--qr-marco: 8px;
	background: var(--apma-white);
	border-radius: 4px;
	padding: var(--qr-marco);
	flex: 0 0 auto;
	line-height: 0;
	/* Se sube media caja más el relleno superior de la barra, que es lo que
	   separa el contenido de la raya. Así el centro del QR cae sobre la línea. */
	align-self: flex-start;
	margin-top: calc(-1 * (var(--qr-lado) + 2 * var(--qr-marco)) / 2 - 16px);
}
.apma-footer__qr img { width: var(--qr-lado); height: var(--qr-lado); display: block; }

/* --- Reflujo ---
   Al pasar a varias líneas el borde izquierdo delata dónde empieza cada una, así
   que se cambia por un separador superior y se quita la sangría. */
@media (max-width: 1100px) {
	.apma-footer__inner--simuladores { grid-template-columns: repeat(3, 1fr); gap: 26px 0; }
	.apma-footer--simuladores .apma-footer__brand { grid-column: 1 / -1; padding-right: 0; }
	.apma-footer--simuladores .apma-footer__col:nth-child(3n + 2) { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
	.apma-footer__inner--simuladores { grid-template-columns: repeat(2, 1fr); }
	.apma-footer--simuladores .apma-footer__col { border-left: 0; padding-left: 0; }
	.apma-footer--simuladores .apma-footer__desc { max-width: none; }
	.apma-footer--simuladores .apma-footer__inner--bar {
		flex-direction: column;
		text-align: center;
		gap: 18px;
	}
	.apma-footer__qr { align-self: center; margin-top: 0; }
	.apma-footer__wa { flex-direction: row; text-align: left; }
}
@media (max-width: 460px) {
	.apma-footer__inner--simuladores { grid-template-columns: 1fr; }
}

/* =========================================================================
   SKIN "FICHA DE PRODUCTO"  (plantilla page-templates/ficha.php)
   -------------------------------------------------------------------------
   Header: el del Diseño Principal (la variante no tiene pieza de header).
   Footer: solo la barra de copyright (template-parts/footer/ficha.php).

   La barra va en el azul oscuro de la ficha (#0B1747, el que el usuario fijó
   para /simulador-ccp) con el texto en blanco, como en la imagen de
   referencia, y no en el casi negro de la barra del pie principal.
   Ancho 1280 con 24 px de relleno: los mismos del header, para que el
   copyright arranque bajo el logo y el escudo cierre bajo el carrito.
   ========================================================================= */
.apma-footer--ficha { background: #0B1747; }
.apma-footer--ficha .apma-footer__bar { background: transparent; }
.apma-footer--ficha .apma-footer__inner--bar {
	max-width: 1280px;
	padding: 12px 24px;
	gap: 22px;
}
.apma-footer--ficha .apma-copy,
.apma-footer--ficha .apma-tagline { color: #fff; }
/* El lema y el escudo van juntos a la derecha: el margen automático se lleva
   todo el espacio libre, que si no "space-between" repartiría entre los tres. */
.apma-footer--ficha .apma-tagline { margin-left: auto; }
.apma-footer__escudo { height: 30px; width: auto; flex: 0 0 auto; display: block; }

@media (max-width: 560px) {
	/* Apilado y centrado, como la barra del pie principal. */
	.apma-footer--ficha .apma-tagline { margin-left: 0; }
}

/* =========================================================================
   PÁGINA SIMULADORES — SECCIÓN "ELIGE TU NIVEL DE SIMULACIÓN"
   -------------------------------------------------------------------------
   EXCEPCIÓN CONSCIENTE a la regla "el estilo vive en Elementor" (ver README).
   Aquí SOLO está lo que Elementor 4.1.4 free no puede hacer con sus controles.
   Colores, tipografías y espaciados NO están aquí: se editan en el editor.

   A) Botón anclado al fondo de la tarjeta, para que los 4 queden alineados
      aunque tengan distinto contenido. Elementor solo ofrece "Espacio entre"
      en la columna, que reparte el hueco entre TODOS los widgets y descuadra
      el resto de separaciones.
   B) Flecha del botón pegada al borde derecho (Elementor centra texto+icono
      como un bloque).
   C) Subtítulo gris bajo cada simulador incluido: dos estilos dentro del
      mismo ítem, imposible con un solo widget. El COLOR del nombre no está
      aquí: se hereda del "Color del texto" del widget, que sí es un ajuste.
   D) Separación entre tarjetas. El control "Espacio entre columnas" de
      Elementor es padding INTERNO de la columna: metería el hueco dentro de
      la tarjeta y la foto dejaría de ir a sangre.
   E) Aro blanco del círculo del icono: el borde del widget Icono solo existe
      en la vista "framed" y aquí hace falta "stacked" (relleno sólido).
   ========================================================================= */

/* D) Rejilla de tarjetas */
.apma-niveles-grid > .elementor-container {
	gap: 10px;
	flex-wrap: nowrap;
	align-items: stretch;
}
.apma-niveles-grid > .elementor-container > .elementor-column {
	width: auto;
	flex: 1 1 0;
	min-width: 0;
}

/* A) La tarjeta apila en columna para poder empujar el botón al fondo */
.apma-nivel-card > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: stretch;
}
.apma-nivel-card > .elementor-widget-wrap > .elementor-element { width: 100%; }
.apma-nivel-card > .elementor-widget-wrap > .elementor-widget-button { margin-top: auto; }

/* B) Texto a la izquierda, flecha al extremo derecho */
.apma-nivel-card .elementor-button .elementor-button-content-wrapper {
	width: 100%;
	justify-content: space-between;
}

/* E) Separación blanca entre el círculo y la foto.
   box-shadow y no border: así el aro no altera el tamaño del círculo y el
   solape de -36px calculado en el generador sigue siendo exacto. */
.apma-nivel-card .elementor-icon {
	box-shadow: 0 0 0 5px #FFFFFF;
}

/* C) Lista de simuladores incluidos */
.apma-nivel-incluidos ul {
	margin: 0;
	padding-left: 17px;
}
.apma-nivel-incluidos li {
	margin-bottom: 9px;
	break-inside: avoid;
}
.apma-nivel-incluidos li strong { font-weight: 800; }
.apma-nivel-incluidos li span {
	display: block;
	margin-top: 1px;
	color: #7A8AA0;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.3;
}

/* Responsive de la rejilla: 4 → 2 → 1 */
@media (max-width: 1024px) {
	.apma-niveles-grid > .elementor-container { flex-wrap: wrap; }
	.apma-niveles-grid > .elementor-container > .elementor-column { flex: 1 1 calc(50% - 5px); }
}
@media (max-width: 640px) {
	.apma-niveles-grid > .elementor-container > .elementor-column { flex: 1 1 100%; }
}

/* F) Velo de color sobre la foto de cada tarjeta.
   Los WIDGETS de Elementor no tienen "superposición de fondo" — ese control
   solo existe en secciones y contenedores — y aquí la foto es el fondo de un
   widget Título (para poder poner el número encima sin Elementor Pro).
   El color de cada nivel se declara en --nivel y el tinte es un ::before.
   Para subir o bajar el tinte, cambiar la opacidad de .apma-nivel-foto::before. */
.apma-nivel-foto { position: relative; }
.apma-nivel-foto::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--nivel);
	opacity: .55;
	pointer-events: none;
}
/* El número, por encima del velo. */
.apma-nivel-foto > * { position: relative; z-index: 1; }

.apma-nivel-foto--01 { --nivel: #2E7D4F; }
.apma-nivel-foto--02 { --nivel: #1B4F9C; }
.apma-nivel-foto--03 { --nivel: #6A2C91; }
.apma-nivel-foto--04 { --nivel: #E07A10; }

/* G) Caja del número. El fondo del widget ya lo ocupa la foto, y el widget
   Título no tiene control de fondo para su texto, así que la caja va aquí.
   Reutiliza --nivel: el mismo color del velo pero a plena opacidad. */
.apma-nivel-foto .elementor-heading-title {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 10px;
	background: var(--nivel);
}

/* =========================================================================
   PÁGINA SIMULADORES — FRANJA DE CREDENCIALES (.apma-credenciales)
   Sección: mensaje + 4 atributos arriba, logos de entidades abajo.
   Generador: dev/gen-simuladores-credenciales.js

   Una sola excepción. Todo lo demás (colores, tipografías, espaciados, la
   línea vertical, la horizontal y el reparto por dispositivo) son ajustes
   nativos de Elementor.
   ========================================================================= */

/* A) Divisor vertical al apilar.
   La línea que separa el mensaje de los cuatro atributos es el borde izquierdo
   de la columna del primer atributo, un control nativo de Elementor. Lo que no
   se puede hacer desde Elementor es apagarla en pantallas pequeñas: en 4.1.4 el
   grupo de Borde de columna se registra SIN 'responsive'
   (elementor/includes/elements/column.php), así que no existen las pestañas de
   tablet y móvil y no hay ajuste que tocar. Al apilar, la fila de iconos empieza
   en una línea nueva y la raya se queda colgando a su izquierda.
   !important es necesario: theme.css se encola ANTES que el CSS de la página y
   la regla que genera Elementor es más específica (0,4,0). */
@media (max-width: 1024px) {
	.apma-cred-divisor > .elementor-element-populated {
		border-left-width: 0 !important;
	}
}

/* B) Separador entre logos, en la columna que abre cada línea.
   El separador en sí es nativo: el borde izquierdo de cada columna de logo
   menos la primera, con su color y grosor editables en Elementor. Lo que no se
   puede expresar allí es "quítalo en la columna que empieza una línea nueva":
   al envolverse la fila en tablet (3 por línea) y móvil (2 por línea), esas
   columnas dejan una raya suelta pegada al margen izquierdo.
   Mismo motivo que en A para el !important: el CSS del tema se encola antes. */
@media (max-width: 1024px) {
	.apma-cred-logos > .elementor-container > .elementor-column:nth-child(3n + 1) > .elementor-element-populated {
		border-left-width: 0 !important;
	}
}
@media (max-width: 767px) {
	.apma-cred-logos > .elementor-container > .elementor-column:nth-child(2n + 1) > .elementor-element-populated {
		border-left-width: 0 !important;
	}
}

/* C) Separadores entre los cuatro atributos, en la columna que abre línea.
   Mismo caso que B pero en la fila del mensaje. Las cuatro columnas de atributo
   llevan borde izquierdo como ajuste nativo (la primera separa del mensaje, las
   otras tres separan un icono del siguiente).
   En tablet los cuatro siguen en una fila y solo sobra el de la primera, que ya
   apaga la regla A. En móvil van de dos en dos, así que también sobra el de la
   tercera. Dentro de .apma-cred-atributos los hijos son: 1 comilla, 2 mensaje,
   3-6 atributos; los que abren línea en móvil son el 3 y el 5, ambos impares.
   El hijo 1 no tiene borde, así que entra en el selector sin efecto. */
@media (max-width: 767px) {
	.apma-cred-atributos > .elementor-container > .elementor-column:nth-child(2n + 1) > .elementor-element-populated {
		border-left-width: 0 !important;
	}
}

/* Separadores de la franja de cifras, en la columna que abre línea.
   Las cinco columnas menos la primera llevan borde izquierdo como ajuste nativo
   (color y grosor editables en Elementor). Lo que no se puede decir allí es
   "quítalo en la que empieza línea": al envolverse en tablet (3 por línea) y en
   móvil (2 por línea) esas columnas dejan una raya suelta pegada al margen.
   Mismo caso que las excepciones A, B y C del bloque .apma-credenciales. */
@media (max-width: 1024px) {
	.apma-stats > .elementor-container > .elementor-column:nth-child(3n + 1) > .elementor-element-populated {
		border-left-width: 0 !important;
	}
}
@media (max-width: 767px) {
	.apma-stats > .elementor-container > .elementor-column:nth-child(2n + 1) > .elementor-element-populated {
		border-left-width: 0 !important;
	}
}

/* =========================================================================
   PÁGINA TECHNICAL SIMULATORS — HERO
   Generador: dev/gen-technical-simulators.js

   Dos excepciones. Todo lo demás (fondo, tipografías, colores, separadores,
   reparto de columnas) son ajustes nativos de Elementor.
   ========================================================================= */

/* 1) Comilla de cierre de la cita, pegada a "Professional." en la misma línea.
   Elementor no colorea PARTE del texto de un widget, así que va como <span> con
   esta clase dentro del título. Color y fuente repiten los de la comilla de
   apertura (ajustes nativos de su widget): si cambias uno, cambia el otro.
   Nunito por la misma razón que en credenciales: su comilla es la de puntas
   redondas. line-height 0 evita que el glifo grande abra la última línea. */
.apma-cita-cierre {
	font-family: "Nunito", sans-serif;
	font-weight: 900;
	color: #E0A93E;
	font-size: 2.4em;
	line-height: 0;
	vertical-align: -0.36em;
	margin-left: 0.12em;
}

/* 2) Separadores de los 5 atributos, en la columna que abre línea en móvil
   (2 por línea). El Borde de columna no es responsivo en Elementor 4.1.4; mismo
   caso que .apma-stats y .apma-credenciales. En tablet caben los 5 en una línea. */
@media (max-width: 767px) {
	.apma-tech-atributos > .elementor-container > .elementor-column:nth-child(2n + 1) > .elementor-element-populated {
		border-left-width: 0 !important;
	}
}

/* Recuadro verde sobre la foto de las tarjetas de producto.
   Única excepción de esa sección: el <p> del Editor de texto trae el margen
   superior del navegador (1em) y Elementor solo permite ajustar el inferior
   ("Espaciado del párrafo"), así que el texto quedaba descentrado dentro del
   recuadro. El relleno del recuadro sigue siendo un ajuste de Elementor.
   Mismo caso que .apma-product-body y .apma-testi-col, más arriba. */
.apma-tech-recuadro p { margin: 0; }

/* Fundido inferior del fondo del hero de Technical Simulators.
   Excepción: una sección de Elementor admite UN solo velo (Superposición de
   fondo) y el suyo ya lo ocupa el degradado horizontal que oscurece la
   izquierda. Este segundo degradado, de abajo hacia arriba, funde la foto con
   el navy de la sección siguiente (#03122E, el mismo color).
   Va con z-index 0 y el contenido con 1, para que el velo quede por debajo. */
.apma-tech-hero::after {
	content: "";
	position: absolute;
	/* Termina 150 px ANTES del final del hero, que es justo donde empieza el
	   panel de productos (su margen superior negativo vale -150). Si el fundido
	   llegara al borde, esos últimos 150 px quedarían tapados por el panel y no
	   se vería. Al acabar aquí, el degradado llega a #03122E y el panel sigue
	   con ese mismo color: la unión no se nota.
	   SI CAMBIA ese margen del panel, cambiar este valor con él. */
	inset: auto 0 150px 0;
	height: 40%;
	background: linear-gradient(to top, #03122E 0%, rgba(3, 18, 46, 0) 100%);
	pointer-events: none;
	z-index: 0;
}
.apma-tech-hero > .elementor-container { position: relative; z-index: 1; }

/* Separadores verticales de la banda de cierre de Technical Simulators.
   Excepción: el control de Borde de Elementor pinta un color plano y el diseño
   pide una línea que se funde por arriba y por abajo. border-image con un
   degradado es la única forma de hacerlo sobre el propio borde (sin añadir
   elementos), y no existe como ajuste del editor.
   El grosor, el lado y el apagado en tablet siguen siendo ajustes nativos:
   aquí solo se sustituye el color por el degradado. */
.apma-tech-sep {
	border-image: linear-gradient(
		to bottom,
		rgba(43, 108, 176, 0) 0%,
		#2B6CB0 45%,
		#2B6CB0 55%,
		rgba(43, 108, 176, 0) 100%
	) 1;
}
@media (max-width: 1024px) {
	/* En tablet el borde vale 0 y border-image no debe reaparecer. */
	.apma-tech-sep { border-image: none; }
}

/* =========================================================================
   FICHAS DE PRODUCTO — /simulador-ccp y /workbook-ccp
   Generadores: dev/gen-simulador-ccp.js · dev/gen-workbook-ccp.js

   Las excepciones cuelgan de la clase que llevan las secciones raíz de cada
   página: .apma-ccp en /simulador-ccp (la primera ficha, cuando aún no había
   más) y .apma-ficha en /workbook-ccp y las que vengan. Las dos primeras
   valen para ambas; la 3 es del título del simulador y la 4, de la clase
   nueva. Todo lo demás (colores, tipografías, tarjetas, bordes, separadores,
   repartos y apilado en móvil) son ajustes nativos de Elementor.
   ========================================================================= */

/* 1) Márgenes del <p> del Editor de texto. Mismo caso que .apma-tech-recuadro:
   el <p> trae el margen superior del navegador (1em) y Elementor solo deja
   ajustar el inferior ("Espaciado del párrafo"). Dentro de un contenedor flex
   ese margen no colapsa y abre un hueco encima de cada bloque de texto.
   El inferior del ÚLTIMO párrafo se anula para que "Espaciado del párrafo"
   separe párrafos entre sí y no añada aire al final del widget; ahí la
   separación la pone el contenedor. !important porque theme.css se encola
   antes que el CSS de la página y a igual especificidad perdería. */
.apma-ccp .elementor-widget-text-editor p,
.apma-ficha .elementor-widget-text-editor p { margin-top: 0; }
.apma-ccp .elementor-widget-text-editor p:last-child,
.apma-ficha .elementor-widget-text-editor p:last-child { margin-bottom: 0 !important; }

/* 2) Tamaño del icono de los botones. El widget Botón no tiene control para
   ello: lo fija a 1em, el tamaño del texto. En el diseño el carrito, el play y
   el logo de WhatsApp son claramente mayores que su rótulo. */
.apma-ccp .elementor-button-icon svg,
.apma-ficha .elementor-button-icon svg { width: 1.55em; }

/* 3) La ® del título del hero: "…(CCP<sup>®</sup>)".
   Elementor no tiene control sobre una PARTE del texto de un widget, y ni él
   ni el tema normalizan <sup>: el navegador lo sube con vertical-align: super
   pero le deja su caja de línea entera, así que la segunda línea del título
   crecía ~18 px y el interlineado se veía mucho mayor que el configurado.
   line-height: 0 saca al <sup> del cálculo de la línea; el interlineado vuelve
   a ser el del widget (0,99 em, ajuste nativo).
   Tamaño y altura medidos en la referencia y en la TTF de Roboto Condensed: la
   ® de esa fuente es tan alta como una mayúscula (0,727 em) y en el diseño
   mide el 31 % de la mayúscula, con el borde superior a ras de las letras.
   0,32 em la deja en esa proporción; subirla 1,55 em propios alinea su techo
   (0,72 × 0,32 = 0,23 em) con el de las mayúsculas (0,72 em). */
.apma-ccp .elementor-heading-title sup {
	font-size: .32em;
	line-height: 0;
	position: relative;
	top: -1.55em;
	vertical-align: baseline;
	margin-left: .06em;
}

/* 4) La ® en los textos de las fichas: "CCP<sup>®</sup>", "CCT<sup>®</sup>".
   Mismo problema que la 3, pero en texto corrido en Nunito y en cualquier
   widget (títulos y descripciones de icon-box, encabezados): sin normalizar,
   el <sup> abre la línea en la que cae y deja un interlineado desigual.
   La ® de Nunito también mide lo que una mayúscula (0,718 em, medido en la
   TTF). A 0,45 em queda en un 45 % de esa altura, y subirla 0,87 em propios
   pone su borde superior a ras de las mayúsculas (0,71 − 0,71 × 0,45 = 0,39 em
   del texto), que es como aparece en el diseño. */
.apma-ficha sup {
	font-size: .45em;
	line-height: 0;
	position: relative;
	top: -.87em;
	vertical-align: baseline;
}

/* 5) Icono de los botones con la clase .apma-boton-flecha: la flecha de "VER
   DETALLES" en /curso-preparacion y todos los botones con icono de
   /acerca-de-apma. Elementor centra el icono del botón sobre la caja de línea, pero
   las mayúsculas de Nunito quedan por encima de ese centro: medida a 4× en el
   navegador, la flecha caía 2,4 px más baja que el texto (centro del texto a
   1361,8 px, de la flecha a 1364,1 px), y el usuario lo señaló (2026-10-27).
   El widget Botón no tiene control de desplazamiento vertical del icono.
   0,22 em del botón (11 px) = 2,4 px: sube la flecha hasta el centro de las
   mayúsculas. */
.apma-ficha .apma-boton-flecha .elementor-button-icon { transform: translateY(-.22em); }