/*!
 * CADECOM — Sistema de diseño y componentes
 * ------------------------------------------------------------------------
 * Índice:
 *   1. Variables de diseño (design tokens)
 *   2. Reset y base tipográfica
 *   3. Utilidades y accesibilidad
 *   4. Layout (container, grids)
 *   5. Botones
 *   6. Barra superior + cabecera + navegación (mega menú + móvil)
 *   7. Hero / carrusel
 *   8. Indicadores
 *   9. Secciones genéricas + tarjetas (servicios, productos, noticias, promos, beneficios)
 *  10. Pestañas (tabs) de productos
 *  11. Testimonios
 *  12. Ubicación / mapa
 *  13. Pie de página
 *  14. Botones flotantes (WhatsApp / llamar)
 *  15. Formularios y mensajes de estado
 *  16. Breadcrumbs
 *  17. Animaciones y prefers-reduced-motion
 *  18. Páginas internas (Fase 2): Nosotros, Productos, Simulador
 *  19. Servicios, Banca Digital, Educación Financiera (Fase 3)
 *  20. Transparencia, Atención al Cliente, Trabaja con Nosotros, Contacto (Fase 4)
 *  21. Noticias / Blog
 *  22. Barra de aviso institucional
 *  23. Galería de imágenes y lightbox
 * ------------------------------------------------------------------------
 * NOTA DE MARCA: los colores institucionales (--color-primary, --color-
 * secondary) son un placeholder profesional (azul + dorado) hasta recibir
 * el manual de marca oficial de CADECOM. Todo el sistema de color depende
 * de estas variables: para re-marcar el sitio basta con editar el bloque
 * :root de la sección 1.
 */

/* ==========================================================================
   1. Variables de diseño
   ========================================================================== */
:root {
	/* Color institucional (placeholder, ver nota de marca arriba) */
	--color-primary: #0b3b60;
	--color-primary-dark: #082b47;
	--color-primary-light: #1565a6;
	--color-secondary: #c9a227;
	--color-secondary-dark: #a8850f;
	--color-accent: #1f8a4c;
	--color-whatsapp: #25d366;

	--color-text: #1c2733;
	--color-text-muted: #55636f;
	--color-border: #e2e8ef;
	--color-surface: #ffffff;
	--color-surface-tinted: #f4f7fa;
	--color-danger: #b3261e;
	--color-success: #1f8a4c;

	/* Tipografía */
	--font-heading: 'Poppins', 'Inter', system-ui, sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, sans-serif;

	/* Espaciado */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.5rem;
	--space-6: 4rem;

	/* Layout */
	--container-max: 1200px;
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--shadow-sm: 0 2px 8px rgba(8, 43, 71, 0.08);
	--shadow-md: 0 8px 24px rgba(8, 43, 71, 0.12);
	--shadow-lg: 0 16px 48px rgba(8, 43, 71, 0.18);

	--ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
	--transition-fast: 180ms var(--ease-smooth);
	--transition-base: 320ms var(--ease-smooth);

	--header-height: 76px;
}

/* ==========================================================================
   2. Reset y base tipográfica
   ========================================================================== */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 16px);
}

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

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	color: var(--color-primary-dark);
	line-height: 1.2;
	margin: 0 0 var(--space-3);
}

h1 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }

p { margin: 0 0 var(--space-3); }

a {
	color: var(--color-primary);
	text-decoration: none;
}

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

ul { list-style: none; margin: 0; padding: 0; }

button { font-family: inherit; cursor: pointer; }

/* ==========================================================================
   3. Utilidades y accesibilidad
   ========================================================================== */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-3);
	z-index: 10000;
	background: var(--color-primary);
	color: #fff;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	transition: top var(--transition-fast);
}
.skip-link:focus {
	top: var(--space-3);
}

:focus-visible {
	outline: 3px solid var(--color-secondary);
	outline-offset: 2px;
}

.eyebrow {
	color: var(--color-secondary-dark);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.85rem;
	margin-bottom: var(--space-2);
}

.visually-hidden-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   4. Layout
   ========================================================================== */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

.section {
	padding-block: var(--space-6);
}

.section--tinted {
	background: var(--color-surface-tinted);
}

.section__header {
	max-width: 720px;
	margin-bottom: var(--space-5);
}

.section__header--split {
	max-width: none;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.section__lead {
	color: var(--color-text-muted);
	font-size: 1.05rem;
}

.section__cta {
	margin-top: var(--space-5);
	text-align: center;
}
/* Cuando el CTA vive dentro de un .cards-grid (p. ej. el aviso de "Simular
   rendimiento" en la pestaña de Inversiones de Inicio), ocupa todo el ancho
   de la grilla en vez de comportarse como una celda más. */
.section__cta--grid-span { grid-column: 1 / -1; }

.cards-grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 640px) {
	.cards-grid--3, .cards-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
	.cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.cards-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   5. Botones
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.85rem 1.5rem;
	border-radius: var(--radius-sm);
	font-weight: 600;
	border: 2px solid transparent;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
	white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-light); color: #fff; box-shadow: var(--shadow-sm); }

.btn--secondary { background: var(--color-secondary); color: var(--color-primary-dark); }
.btn--secondary:hover { background: var(--color-secondary-dark); color: #fff; box-shadow: var(--shadow-sm); }

.btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: #fff; }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn--outline-light:hover { background: #fff; color: var(--color-primary-dark); }

.btn--whatsapp { background: var(--color-whatsapp); color: #fff; }
.btn--whatsapp:hover { background: #1da851; color: #fff; }

.btn--sm { padding: 0.55rem 1.1rem; font-size: 0.9rem; }
.btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-primary-dark);
	font-size: 1.1rem;
	transition: background var(--transition-fast);
}
.icon-btn:hover { background: var(--color-surface-tinted); }

/* ==========================================================================
   6. Barra superior + cabecera + navegación
   ========================================================================== */
.topbar {
	background: var(--color-primary-dark);
	color: rgba(255,255,255,0.9);
	font-size: 0.85rem;
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-block: var(--space-2);
	flex-wrap: wrap;
}
.topbar__contact { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.topbar__contact a { color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.topbar__contact a:hover { color: var(--color-secondary); }
.topbar__location { display: inline-flex; align-items: center; gap: 6px; }
.topbar__social { display: flex; gap: var(--space-2); }
.topbar__social a { color: inherit; font-size: 1rem; }
.topbar__social a:hover { color: var(--color-secondary); }

.site-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: #fff;
	box-shadow: none;
	transition: box-shadow var(--transition-base);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-height: var(--header-height);
	/* Sin límite propio: a diferencia del resto del contenido (que respeta
	   --container-max, 1200px), la cabecera se extiende hasta el borde de la
	   ventana (menos el padding-inline heredado de .container) para que el
	   menú principal y sus 11 elementos no se sientan apretados en monitores
	   anchos. Prueba solicitada explícitamente; revertir a un valor fijo
	   (p. ej. 1320px) si en el uso real se prefiere un ancho más contenido. */
	max-width: none;
}
.site-logo { display: inline-flex; align-items: center; }
.site-logo__text { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--color-primary-dark); }
.site-logo .custom-logo-link { display: inline-flex; }
.site-logo img.custom-logo { height: 52px; width: auto; display: block; }

/* El archivo del logo institucional tiene fondo blanco sólido (no
   transparente): sobre el header (blanco) se integra solo, pero sobre el
   pie de página (fondo oscuro) necesita una "tarjeta" propia para no verse
   como un recuadro blanco fuera de lugar. */
.site-logo--footer {
	background: #fff;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-3);
}
.site-logo--footer img.custom-logo { height: 44px; }

.site-logo--mobile img.custom-logo { height: 36px; }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.mobile-menu-toggle { display: none; }

.nav-primary { flex: 1; }
.nav-primary__menu {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	position: relative;
}
.nav-primary__menu > li { position: relative; }
.nav-primary__menu > li > a {
	display: inline-flex;
	align-items: center;
	text-align: center;
	max-width: 9rem;
	padding: 1.1rem 0.15rem;
	color: var(--color-text);
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.25;
	border-bottom: 3px solid transparent;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}
.nav-primary__menu > li:hover > a,
.nav-primary__menu > li > a:focus-visible {
	color: var(--color-primary);
	border-bottom-color: var(--color-secondary);
}

/* Mega menú: los hijos de nivel 2 se muestran como panel de ancho completo */
.nav-primary__menu .sub-menu {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-2) var(--space-4);
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 480px;
	background: #fff;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--space-4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px) scale(0.98);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.nav-primary__menu li.menu-item-has-children:hover > .sub-menu,
.nav-primary__menu li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}
.nav-primary__menu .sub-menu a {
	display: block;
	padding: var(--space-2);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-weight: 500;
}
.nav-primary__menu .sub-menu a:hover { background: var(--color-surface-tinted); color: var(--color-primary); }

.site-search {
	background: var(--color-surface-tinted);
	padding: var(--space-3) 0;
	border-top: 1px solid var(--color-border);
}
.site-search .container { display: flex; gap: var(--space-2); }
.site-search input {
	flex: 1;
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 1rem;
}

/* Menú móvil off-canvas */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
	pointer-events: none;
}
.mobile-menu.is-open {
	visibility: visible;
	pointer-events: auto;
}
.mobile-menu__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 43, 71, 0.55);
	opacity: 0;
	transition: opacity var(--transition-base);
}
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }
.mobile-menu__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(360px, 88vw);
	background: #fff;
	padding: var(--space-4);
	transform: translateX(100%);
	transition: transform var(--transition-base);
	overflow-y: auto;
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.mobile-menu__list li { border-bottom: 1px solid var(--color-border); }
.mobile-menu__list a { display: block; padding: var(--space-3) 0; font-weight: 600; color: var(--color-text); }
.mobile-menu__list .sub-menu { padding-left: var(--space-3); }
.mobile-menu__actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }

/* El punto de corte se sube de ~992px a 1480px a propósito: con 11
   elementos en el menú principal más DOS botones de cabecera ("Hazte
   socio" y "Banca Digital"), el diseño de escritorio necesita ese ancho
   mínimo para no desbordar el encabezado (verificado empíricamente igual
   que el corte anterior de 1360px, que alcanzaba con un solo botón). Por
   debajo de eso, incluso en laptops/tablets "de escritorio" (1024px,
   1280px, muchos portátiles de 13"), se sirve el menú móvil ya probado en
   vez de un menú de escritorio recortado o desbordado. */
@media (max-width: 1480px) {
	.nav-primary, .site-header__cta { display: none; }
	.mobile-menu-toggle { display: inline-flex; }
}

/* ==========================================================================
   7. Hero / carrusel
   ========================================================================== */
.hero { position: relative; }
.hero-carousel, .hero-carousel__track { position: relative; }
.hero-slide {
	position: relative;
	min-height: 640px;
	display: flex;
	align-items: flex-end;
	color: #fff;
}
.hero-slide__media { position: absolute; inset: 0; overflow: hidden; }
/* La imagen mide más que su caja (122% de alto, centrada con top:-11%) para
   dejar "colchón" fuera de vista en cada borde: initHeroParallax() (ver
   main.js) desplaza la imagen verticalmente al hacer scroll, y sin este
   colchón ese desplazamiento dejaría ver un borde vacío. Colchón ampliado
   junto con la intensidad del efecto (antes 112%/-6%, ver main.js). */
.hero-slide__media img { position: absolute; inset: 0; width: 100%; height: 122%; top: -11%; object-fit: cover; }
/* Zoom lento y continuo sobre la imagen activa, para que el carrusel se
   sienta vivo en vez de una foto estática detrás del texto. Se desactiva
   con prefers-reduced-motion.
   Sin "infinite alternate": ese modo hacía que, al ocultarse un slide
   (`display:none` pausa la animación sin avanzarla) y volver a mostrarse
   más tarde, el zoom retomara desde el punto exacto donde había quedado
   -no desde cero-, así que cada vuelta del carrusel arrancaba en un nivel
   de zoom distinto e inconsistente ("se robotiza" el movimiento). Ahora es
   un solo recorrido hacia adelante que initCarousel() (main.js) reinicia a
   mano cada vez que el slide se activa, para que el zoom sea siempre el
   mismo recorrido suave y predecible.
   Usa la propiedad `scale` (no `transform`) a propósito: initHeroParallax()
   controla el parallax con la propiedad `translate` en el mismo elemento, y
   al ser propiedades independientes no se pisan entre sí -si ambas usaran
   `transform`, la última en aplicarse anularía a la otra. */
@media (prefers-reduced-motion: no-preference) {
	.hero-slide__media img { animation: cadecom-hero-zoom 20s linear forwards; }
}
@keyframes cadecom-hero-zoom {
	from { scale: 1; }
	to { scale: 1.08; }
}
.hero-slide__overlay {
	position: absolute;
	inset: 0;
	/* Antes cubría casi toda la foto con un degradado oscuro (hasta 92% de
	   opacidad) para garantizar contraste del texto; eso dejaba la imagen
	   como fondo secundario. Ahora solo se oscurece una franja baja y
	   angosta donde vive el texto -franja más corta que la primera versión,
	   a pedido explícito de dejar la imagen más despejada-, compensando la
	   legibilidad con text-shadow en el contenido. */
	background: linear-gradient(to top, rgba(8,43,71,0.85) 0%, rgba(8,43,71,0.45) 18%, rgba(8,43,71,0) 40%);
}
.hero-slide--static .hero-slide__media { position: absolute; inset: 0; background: var(--color-primary-dark); }
/* Misma colisión de especificidad que .tabs__panel[hidden]: .hero-slide
   declara display:flex, que empata con `[hidden] { display: none }` del
   navegador. Se fuerza aquí para que el carrusel oculte de verdad las
   diapositivas inactivas en vez de apilarlas en el flujo del documento. */
.hero-slide[hidden] { display: none; }
/* padding-block asimétrico a propósito: poco arriba (así el bloque de
   texto empieza más abajo y deja ver más foto por encima) y algo más abajo
   (aire antes del borde del hero). */
.hero-slide__content { position: relative; max-width: 640px; padding-block: var(--space-3) var(--space-5); }
.hero-slide__content h1, .hero-slide__content p { text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.hero-slide__content h1 {
	color: #fff;
	/* Más chico que el h1 general del sitio: ocupa menos alto sobre la
	   imagen sin dejar de leerse como titular. */
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	margin-bottom: var(--space-2);
}
.hero-slide__content p { color: rgba(255,255,255,0.95); font-size: 1.05rem; margin-bottom: var(--space-2); }
.hero-slide__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }

@media (max-width: 480px) {
	/* Deja espacio libre para que los botones flotantes de WhatsApp/llamada
	   no queden encima del último CTA del hero en pantallas pequeñas. */
	.hero-slide__actions { margin-bottom: 72px; }
}

.hero-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
}
.hero-carousel__nav--prev { left: var(--space-3); }
.hero-carousel__nav--next { right: var(--space-3); }
.hero-carousel__nav:hover { background: rgba(255,255,255,0.3); }

/* En móvil el texto del hero suele ocupar más alto que el slide, y las
   flechas centradas verticalmente terminan tapando el contenido: se ocultan
   y se deja la navegación por puntos (además del autoplay). */
@media (max-width: 767px) {
	.hero-carousel__nav { display: none; }
}

.hero-carousel__dots, .testimonial-carousel__dots {
	position: absolute;
	bottom: var(--space-4);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: var(--space-2);
	z-index: 5;
}
.testimonial-carousel__dots { position: static; transform: none; justify-content: center; margin-top: var(--space-4); }
.hero-carousel__dots button, .testimonial-carousel__dots button {
	width: 10px; height: 10px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.5);
	padding: 0;
}
.hero-carousel__dots button[aria-selected="true"] { background: var(--color-secondary); width: 28px; border-radius: 6px; }
.testimonial-carousel__dots button[aria-selected="true"] { background: var(--color-primary); width: 28px; border-radius: 6px; }

/* ==========================================================================
   8. Indicadores
   ========================================================================== */
.indicadores { background: var(--color-primary); padding-block: var(--space-5); }
.indicadores__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	text-align: center;
}
@media (min-width: 768px) { .indicadores__grid { grid-template-columns: repeat(4, 1fr); } }
.indicador-card { color: #fff; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.indicador-card i { font-size: 1.8rem; color: var(--color-secondary); margin-bottom: var(--space-1); }
.indicador-card__value { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; }
.indicador-card__label { color: rgba(255,255,255,0.8); font-size: 0.9rem; }

/* ==========================================================================
   9. Tarjetas
   ========================================================================== */
.service-card, .product-card, .benefit-card, .promo-card, .news-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	display: flex;
	flex-direction: column;
}
.service-card:hover, .product-card:hover, .promo-card:hover, .news-card:hover, .benefit-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
}

.service-card, .product-card, .benefit-card { padding: var(--space-4); }
/* Cuando el producto tiene imagen destacada (ej. tarjetas VISA), la foto
   sangra hasta los bordes de la tarjeta -márgenes negativos que cancelan
   el padding de .product-card- en vez del ícono genérico de abajo. */
.product-card__image {
	margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	overflow: hidden;
	aspect-ratio: 640 / 420;
}
.product-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-base); }
.product-card:hover .product-card__image img { transform: scale(1.05); }
.service-card__icon, .product-card__icon, .benefit-card__icon {
	width: 56px; height: 56px;
	border-radius: var(--radius-sm);
	background: var(--color-surface-tinted);
	color: var(--color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin-bottom: var(--space-3);
	transition: transform var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.service-card:hover .service-card__icon,
.product-card:hover .product-card__icon,
.benefit-card:hover .benefit-card__icon {
	transform: scale(1.1);
	background: var(--color-secondary);
	color: var(--color-primary-dark);
}
.service-card__link, .product-card__link {
	margin-top: auto;
	padding-top: var(--space-3);
	font-weight: 700;
	color: var(--color-primary);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.service-card__link i, .product-card__link i {
	transition: transform var(--transition-base);
}
.service-card:hover .service-card__link i,
.product-card:hover .product-card__link i {
	transform: translateX(4px);
}
.product-card__rate { color: var(--color-accent); font-weight: 700; }

.promo-card__media img, .news-card__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.promo-card__body, .news-card__body { padding: var(--space-4); }
.news-card__placeholder {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 16/10;
	background: var(--color-surface-tinted);
	color: var(--color-border);
	font-size: 2rem;
}
.news-card__meta { display: flex; gap: var(--space-3); font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.news-card__category { color: var(--color-primary); font-weight: 700; }
.news-card__title a { color: var(--color-primary-dark); }

/* ==========================================================================
   10. Pestañas (tabs)
   ========================================================================== */
.tabs__list { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.tabs__tab {
	background: transparent;
	border: none;
	padding: var(--space-3) var(--space-4);
	font-weight: 700;
	color: var(--color-text-muted);
	border-bottom: 3px solid transparent;
	white-space: nowrap;
}

@media (max-width: 480px) {
	/* En móviles angostos, 3+ pestañas con etiquetas largas ("Cuentas de
	   ahorro") no caben en una fila sin partirse a la mitad; se prefiere un
	   listado con scroll horizontal (patrón habitual de tabs en móvil) a
	   dejar que una pestaña quede sola en una segunda línea. */
	.tabs__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}
	.tabs__tab { flex-shrink: 0; padding-inline: var(--space-3); }
}
.tabs__tab[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-secondary); }

/* .tabs__panel también lleva la clase .cards-grid (display: grid), que
   empata en especificidad con la regla `[hidden] { display: none }` del
   navegador y puede ganarle por orden de cascada. Se fuerza aquí para que
   los paneles inactivos queden realmente ocultos. */
.tabs__panel[hidden] { display: none; }

/* ==========================================================================
   11. Testimonios
   ========================================================================== */
.testimonial-carousel { max-width: 760px; margin-inline: auto; text-align: center; position: relative; }
.testimonial-slide__stars { color: var(--color-secondary); font-size: 1.1rem; margin-bottom: var(--space-3); }
.testimonial-slide__text { font-size: 1.25rem; font-style: italic; color: var(--color-primary-dark); }
.testimonial-slide__author { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.testimonial-slide__author img, .testimonial-slide__avatar-placeholder {
	width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
}
.testimonial-slide__avatar-placeholder { background: var(--color-surface-tinted); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); }
.testimonial-slide__author div { text-align: left; }
.testimonial-slide__author cite { display: block; font-style: normal; font-weight: 700; color: var(--color-primary-dark); }
.testimonial-slide__author span { font-size: 0.85rem; color: var(--color-text-muted); }

/* ==========================================================================
   12. Ubicación / mapa
   ========================================================================== */
.location-grid { display: grid; gap: var(--space-5); align-items: stretch; }
@media (min-width: 900px) { .location-grid { grid-template-columns: 1fr 1.2fr; } }
.location-info__list { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; }
.location-info__list li { display: flex; align-items: center; gap: var(--space-2); }
.location-info__list i { color: var(--color-primary); font-size: 1.2rem; }
.location-info__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.location-map { min-height: 320px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.location-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; }

/* ==========================================================================
   13. Pie de página
   ========================================================================== */
.site-footer { background: var(--color-primary-dark); color: rgba(255,255,255,0.85); padding-top: var(--space-6); }
.site-footer__grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; padding-bottom: var(--space-5); }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; } }
/* Los items de grid tienen min-width:auto (=ancho de su contenido) por
   defecto, así que sin esta regla la columna del boletín fuerza la pista de
   la grilla a ensancharse más allá de su reparto en fr y desborda el body
   en anchos angostos (p. ej. 768px). */
.footer-col { min-width: 0; }
.footer-col__title { color: #fff; font-size: 1rem; margin-bottom: var(--space-3); }
.footer-menu li, .legal-menu li { display: inline-block; }
.footer-menu a { display: block; padding-block: 6px; color: rgba(255,255,255,0.75); }
.footer-menu a:hover { color: var(--color-secondary); }

/* Widgets de WordPress en el pie de página (Apariencia > Widgets, columnas
   "Pie de página"). Sin esta regla, el título del widget (<h3>) heredaría
   el azul oscuro global de los encabezados, ilegible sobre el fondo oscuro
   del footer. */
.footer-widget { margin-bottom: var(--space-4); }
.footer-widget__title { color: #fff; font-size: 1rem; margin-bottom: var(--space-3); }
.footer-widget a { color: rgba(255,255,255,0.75); }
.footer-widget a:hover { color: var(--color-secondary); }
.footer-col__seps { font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.newsletter-form__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.newsletter-form input {
	flex: 1 1 160px;
	min-width: 0; /* evita que el input imponga su ancho mínimo de contenido y desborde la columna angosta del footer en grillas estrechas (p. ej. 768px) */
	padding: 0.7rem 1rem;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(255,255,255,0.2);
	background: rgba(255,255,255,0.08);
	color: #fff;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-block: var(--space-3); margin-top: var(--space-4); font-size: 0.85rem; }
.site-footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.legal-menu { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.legal-menu a { color: rgba(255,255,255,0.7); }
.legal-menu a:hover { color: var(--color-secondary); }

/* ==========================================================================
   14. Botones flotantes
   ========================================================================== */
.fab-group {
	position: fixed;
	right: var(--space-3);
	bottom: var(--space-3);
	z-index: 800;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.fab {
	width: 56px; height: 56px;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.5rem;
	font-family: inherit;
	cursor: pointer;
	box-shadow: var(--shadow-md);
	transition: transform var(--transition-fast);
}
.fab:hover { transform: scale(1.08); }
.fab--whatsapp { background: var(--color-whatsapp); }
.fab--call { background: var(--color-primary); }
.fab--top {
	background: var(--color-primary-dark);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-fast), background var(--transition-fast);
}
.fab--top:hover { transform: translateY(0) scale(1.08); }
.fab--top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

@media (max-width: 480px) {
	/* Botones más compactos en móvil para reducir el riesgo de tapar
	   contenido/CTAs que caigan en la esquina inferior derecha. */
	.fab { width: 48px; height: 48px; font-size: 1.3rem; }
}

/* Google reCAPTCHA v3 inyecta una insignia fija ("protegido por reCAPTCHA")
   que tapaba el grupo de botones flotantes (WhatsApp/llamar). Los términos de
   Google permiten ocultar la insignia con CSS siempre que el aviso legal
   ("Este sitio está protegido por reCAPTCHA...") se muestre en otro lugar
   visible del sitio -ver el pie de página en footer.php-, así que aquí solo
   se oculta. */
.grecaptcha-badge {
	visibility: hidden !important;
}

/* Aviso legal de reCAPTCHA en el pie de página (ver footer.php), obligatorio
   mientras la insignia esté oculta arriba. */
.recaptcha-notice {
	margin: var(--space-3) 0 0;
	font-size: 0.75rem;
	color: var(--color-text-muted, #9ca3af);
	text-align: center;
}

.recaptcha-notice a {
	color: inherit;
	text-decoration: underline;
}

/* ==========================================================================
   15. Formularios y mensajes de estado
   ========================================================================== */
.form-alert {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3);
	border-radius: var(--radius-sm);
	margin-top: var(--space-3);
	font-weight: 600;
}
.form-alert--success { background: rgba(31, 138, 76, 0.12); color: var(--color-success); }
.form-alert--error { background: rgba(179, 38, 30, 0.1); color: var(--color-danger); }

/* ==========================================================================
   16. Breadcrumbs
   ========================================================================== */
.breadcrumbs { background: var(--color-surface-tinted); padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 0.9rem; }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: var(--space-2); color: var(--color-text-muted); }
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs [aria-current="page"] { color: var(--color-primary); font-weight: 600; }

/* ==========================================================================
   17. Animaciones y prefers-reduced-motion
   ========================================================================== */
[data-animate] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 700ms var(--ease-smooth), transform 700ms var(--ease-smooth);
}
[data-animate].is-visible {
	opacity: 1;
	transform: translateY(0);
}
/* Variantes direccionales para pares de columnas (texto + mapa, formulario +
   barra lateral, etc.): entran desde el lado donde se ubican visualmente en
   vez de siempre desde abajo, reforzando la composición de la sección. */
[data-animate="fade-left"] { transform: translateX(-36px); }
[data-animate="fade-left"].is-visible { transform: translateX(0); }
[data-animate="fade-right"] { transform: translateX(36px); }
[data-animate="fade-right"].is-visible { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	[data-animate] { opacity: 1; transform: none; }
}

/* ==========================================================================
   18. Páginas internas (Fase 2): Nosotros, Productos, Simulador
   ========================================================================== */
.container--narrow { max-width: 820px; }

.cards-grid--2 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .cards-grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* "Nuestra historia" (Nosotros): texto + fotografía real de Macará,
   mismo patrón de dos columnas que .location-grid. */
.historia-grid { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 900px) { .historia-grid { grid-template-columns: 1.1fr 1fr; } }
.historia-grid__media {
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}
.historia-grid__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cabecera de página interna: versión más compacta del hero de Inicio,
   sin carrusel, usada en Nosotros/Productos/Simulador y en las páginas de
   fases siguientes. */
.page-hero {
	background: linear-gradient(120deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
	color: #fff;
	padding-block: var(--space-5);
}
.page-hero h1 { color: #fff; margin-bottom: var(--space-2); }
.page-hero__lead { color: rgba(255,255,255,0.85); max-width: 640px; font-size: 1.05rem; margin: 0; }
.page-hero--product { padding-block: var(--space-4); }

/* Contenido editorial largo (WYSIWYG de ACF, the_content()): tipografía
   legible con ancho de línea cómodo y separación entre elementos. */
.prose { font-size: 1.05rem; color: var(--color-text); }
.prose h2 { margin-top: var(--space-5); }
.prose h3 { margin-top: var(--space-4); }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: var(--space-3); }
.prose li { margin-bottom: var(--space-1); }
.prose img { border-radius: var(--radius-md); margin-block: var(--space-3); }

.value-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	text-align: center;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.value-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
}
.value-card__icon {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: var(--color-surface-tinted);
	color: var(--color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	margin-bottom: var(--space-3);
	transition: transform var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.value-card:hover .value-card__icon {
	transform: scale(1.1);
	background: var(--color-secondary);
	color: var(--color-primary-dark);
}
.value-card--compact { padding: var(--space-3); }
.value-card--compact .value-card__icon { width: 52px; height: 52px; font-size: 1.4rem; }
.value-card--compact h3 { font-size: 1.05rem; }
.value-card--compact p { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; }

/* Distintivo corto ("Ideal para...") que aclara cuándo conviene cada canal
   (Banca Web vs. App Móvil) sin necesitar párrafos largos ni sub-marcas
   nuevas. */
.value-card__badge {
	display: inline-block;
	background: var(--color-surface-tinted);
	color: var(--color-primary);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	margin-bottom: var(--space-2);
}

.org-chart {
	width: 100%;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
}

.board-group { margin-bottom: var(--space-5); }
.board-group__title {
	color: var(--color-primary);
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 2px solid var(--color-secondary);
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-4);
}

.directivo-card { text-align: center; padding: var(--space-3); border-radius: var(--radius-md); transition: transform var(--transition-base); }
.directivo-card:hover { transform: translateY(-4px); }
.directivo-card img, .directivo-card__avatar-placeholder {
	width: 96px; height: 96px;
	border-radius: 50%;
	object-fit: cover;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	margin: 0 auto var(--space-3);
}
.directivo-card__avatar-placeholder {
	display: flex; align-items: center; justify-content: center;
	background: var(--color-surface-tinted);
	color: var(--color-text-muted);
	font-size: 2rem;
}
.directivo-card:hover img,
.directivo-card:hover .directivo-card__avatar-placeholder {
	box-shadow: 0 0 0 4px var(--color-secondary);
}
.directivo-card h4 { margin-bottom: 2px; }
.directivo-card__cargo { color: var(--color-primary); font-weight: 600; font-size: 0.9rem; margin-bottom: 2px; }
.directivo-card__periodo { color: var(--color-text-muted); font-size: 0.85rem; margin: 0; }

.cta-banner { background: var(--color-primary-dark); color: #fff; }
.cta-banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
}
.cta-banner h2 { color: #fff; margin-bottom: var(--space-1); }
.cta-banner p { color: rgba(255,255,255,0.8); margin: 0; }
.cta-banner__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Detalle de producto financiero */
.product-single__layout {
	display: grid;
	gap: var(--space-5);
	padding-block: var(--space-5);
}
@media (min-width: 900px) {
	.product-single__layout { grid-template-columns: 2fr 1fr; align-items: start; }
}
.product-single__sidebar { position: sticky; top: calc(var(--header-height) + 16px); }

.product-info-box {
	background: var(--color-surface-tinted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}
/* La foto del producto (ej. tarjetas VISA) sangra hasta los bordes de la
   caja con márgenes negativos que cancelan su padding, en vez de quedar
   recuadrada adentro; solo se redondean las esquinas superiores para
   seguir el contorno de `.product-info-box`. */
.product-info-box__image {
	margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	overflow: hidden;
	aspect-ratio: 640 / 420;
}
.product-info-box__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-info-box__icon {
	width: 56px; height: 56px;
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin-bottom: var(--space-3);
}
.product-info-box__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: var(--space-2);
	border-bottom: 1px solid var(--color-border);
	font-size: 0.95rem;
}
.product-info-box__row strong { color: var(--color-primary-dark); }
.product-info-box__cta { width: 100%; justify-content: center; margin-top: var(--space-3); }

/* Simulador de rendimiento */
.simulator {
	display: grid;
	gap: var(--space-4);
	background: var(--color-surface-tinted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-block: var(--space-4);
}
@media (min-width: 640px) { .simulator { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.simulator__field { display: flex; flex-direction: column; gap: 6px; }
.simulator__field label { font-weight: 600; font-size: 0.9rem; }
.simulator__field input, .simulator__field select {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 1rem;
}
.simulator__hint { font-size: 0.8rem; color: var(--color-text-muted); margin: 0; }
.simulator #sim-calcular { grid-column: 1 / -1; justify-self: start; }

.simulator-result {
	background: var(--color-primary-dark);
	color: #fff;
	border-radius: var(--radius-md);
	padding: var(--space-4);
}
.simulator-result__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
.simulator-result__label { display: block; color: rgba(255,255,255,0.7); font-size: 0.9rem; margin-bottom: 4px; }
.simulator-result__value { display: block; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; }
.simulator-result__value--highlight { color: var(--color-secondary); }
/* Línea de aviso (p. ej. "seguro no incluido") dentro del propio resultado:
   deliberadamente más pequeña y sin negrita para no competir visualmente
   con las cifras calculadas, pero visible sin tener que leer el disclaimer
   aparte al pie del simulador. */
.simulator-result__value--muted { font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.75); }
.simulator__disclaimer {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
	margin-top: var(--space-3);
}

/* Paginación de archivos (index.php) */
.pagination { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-top: var(--space-5); }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--space-2);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	color: var(--color-text);
}
.pagination .page-numbers.current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination a.page-numbers:hover { background: var(--color-surface-tinted); }

/* ==========================================================================
   19. Servicios, Banca Digital, Educación Financiera (Fase 3)
   ========================================================================== */

/* Botones de tienda de aplicaciones (App Store / Google Play) */
.app-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.app-badges a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0.6rem 1rem;
	border-radius: var(--radius-sm);
	background: var(--color-primary-dark);
	color: #fff;
	font-weight: 600;
	font-size: 0.9rem;
}
.app-badges a:hover { background: var(--color-primary); }

/* Tarjeta de video embebido (tutoriales / educación financiera) */
.video-card__embed {
	position: relative;
	aspect-ratio: 16/9;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-primary-dark);
}
.video-card__embed iframe { width: 100%; height: 100%; border: 0; }
.video-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.6);
	font-size: 2.5rem;
}
.video-card__title { margin-top: var(--space-2); font-size: 1rem; }

/* Lista de consejos (seguridad digital) */
.tips-list { display: flex; flex-direction: column; gap: var(--space-3); }
.tips-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	background: var(--color-surface-tinted);
	border-radius: var(--radius-sm);
	padding: var(--space-3);
}
.tips-list i { color: var(--color-primary); font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }

/* Acordeón de preguntas frecuentes, construido con <details>/<summary>
   nativos: funciona sin JavaScript y es accesible por teclado/lector de
   pantalla de forma predeterminada. */
.accordion { display: flex; flex-direction: column; gap: var(--space-2); }
.accordion__item {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.accordion__trigger {
	cursor: pointer;
	padding: var(--space-3) var(--space-4);
	font-weight: 600;
	color: var(--color-primary-dark);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.accordion__trigger::-webkit-details-marker { display: none; }
.accordion__trigger::after {
	content: '\002B'; /* + */
	font-size: 1.3rem;
	color: var(--color-primary);
	transition: transform var(--transition-fast);
}
.accordion__item[open] .accordion__trigger::after { transform: rotate(45deg); }
.accordion__panel { padding: 0 var(--space-4) var(--space-4); }

/* Variantes de 3/4 columnas para el resultado de la calculadora de crédito */
.simulator-result__grid--3 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .simulator-result__grid--3 { grid-template-columns: repeat(3, 1fr); } }
.simulator-result__grid--4 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .simulator-result__grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .simulator-result__grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   20. Transparencia, Atención al Cliente, Trabaja con Nosotros, Contacto (Fase 4)
   ========================================================================== */

/* Formularios del sitio (PQRS, postulación, contacto): mismo lenguaje
   visual que .simulator pero pensado para formularios largos de una sola
   columna con filas de 2 campos. */
.cadecom-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-top: var(--space-4);
}
.cadecom-form__row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cadecom-form__row--2 { grid-template-columns: repeat(2, 1fr); } }
.cadecom-form__field { display: flex; flex-direction: column; gap: 6px; }
.cadecom-form__field label { font-weight: 600; font-size: 0.9rem; }
.cadecom-form__field input,
.cadecom-form__field select,
.cadecom-form__field textarea {
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 1rem;
	font-family: inherit;
}
.cadecom-form__field textarea { resize: vertical; }
.cadecom-form__privacy { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }

/* Tabla de tarifario (Transparencia) */
.table-responsive { overflow-x: auto; }
.rate-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius-md); overflow: hidden; }
.rate-table th, .rate-table td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); }
.rate-table th { background: var(--color-primary-dark); color: #fff; font-weight: 600; }
.rate-table tr:last-child td { border-bottom: none; }

/* Lista de documentos descargables */
.document-list { display: flex; flex-direction: column; gap: var(--space-2); }
.document-list__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-3);
}
.document-list__item i { color: var(--color-danger); font-size: 1.3rem; flex-shrink: 0; }
.document-list__title { flex: 1; font-weight: 600; }
.document-list__year { color: var(--color-text-muted); font-weight: 400; }
.document-list__pending { color: var(--color-text-muted); font-size: 0.85rem; font-style: italic; }

/* Tarjeta de sucursal */
.sucursal-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}
.sucursal-card p { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin-bottom: var(--space-2); }
.sucursal-card i { color: var(--color-primary); }

/* Badges y metadatos de vacante (Trabaja con Nosotros) */
.vacante-badge {
	display: inline-block;
	margin-left: var(--space-2);
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--color-surface-tinted);
	color: var(--color-primary);
	font-size: 0.75rem;
	font-weight: 600;
	vertical-align: middle;
}
.vacante-meta { display: flex; gap: var(--space-4); font-size: 0.9rem; color: var(--color-text-muted); }
.vacante-meta i { margin-right: 4px; }

/* Página de Contacto: formulario + barra lateral de canales y mapa */
.contact-grid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1.6fr 1fr; } }

.contact-channels { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.contact-channel {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-3);
	color: var(--color-text);
	transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.contact-channel:hover { border-color: var(--color-primary); transform: translateX(4px); }
.contact-channel i { font-size: 1.4rem; color: var(--color-primary); }
.contact-channel strong { display: block; }
.contact-channel span { font-size: 0.85rem; color: var(--color-text-muted); }

.location-map--sidebar { min-height: 260px; }
.location-map--sidebar iframe { min-height: 260px; }

/* ==========================================================================
   21. Noticias / Blog
   ========================================================================== */

/* Píldoras de filtro por categoría */
.category-pills-wrap { background: var(--color-surface-tinted); border-bottom: 1px solid var(--color-border); padding-block: var(--space-3); }
.category-pills { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.category-pill {
	padding: 0.4rem 1rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--color-border);
	color: var(--color-text);
	font-size: 0.85rem;
	font-weight: 600;
}
.category-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.category-pill--active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Tarjeta destacada (primera noticia del blog) */
.featured-news {
	display: grid;
	gap: var(--space-4);
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: var(--space-5);
}
@media (min-width: 768px) { .featured-news { grid-template-columns: 1.2fr 1fr; align-items: stretch; } }
.featured-news__media img { width: 100%; height: 100%; object-fit: cover; min-height: 240px; }
.featured-news__body { padding: var(--space-4); display: flex; flex-direction: column; justify-content: center; }
.featured-news__title { font-size: 1.6rem; }
.featured-news__title a { color: var(--color-primary-dark); }

/* Detalle de artículo */
.news-single__meta { display: flex; align-items: center; gap: var(--space-2); font-size: 0.95rem; }
.news-single__featured-image img { width: 100%; max-height: 480px; object-fit: cover; }
.news-single__layout { padding-block: var(--space-5); }

.share-buttons {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}
.share-buttons__label { font-weight: 600; margin-right: var(--space-1); }
.share-buttons a {
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--color-surface-tinted);
	color: var(--color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.share-buttons a:hover { background: var(--color-primary); color: #fff; }

/* ==========================================================================
   22. Barra de aviso institucional
   ========================================================================== */
.notice-bar {
	color: #fff;
	font-size: 0.9rem;
	position: relative;
	z-index: 950; /* Por encima de la topbar/cabecera, por debajo del menú móvil (1000). */
}
.notice-bar--info { background: var(--color-primary); }
.notice-bar--advertencia { background: var(--color-secondary-dark); }
.notice-bar--urgente { background: var(--color-danger); }

.notice-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding-block: var(--space-2);
	position: relative;
}
.notice-bar__text { margin: 0; text-align: center; padding-right: 2rem; }
.notice-bar__text a { color: #fff; text-decoration: underline; font-weight: 600; margin-left: var(--space-2); }
.notice-bar__close {
	position: absolute;
	right: var(--space-4);
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: rgba(255,255,255,0.85);
	font-size: 1rem;
	line-height: 1;
	padding: 4px;
}
.notice-bar__close:hover { color: #fff; }

/* ==========================================================================
   23. Galería de imágenes y lightbox
   ========================================================================== */
.custom-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
}
@media (min-width: 640px) { .custom-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .custom-gallery { grid-template-columns: repeat(4, 1fr); } }
.custom-gallery figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-tinted); }
.custom-gallery img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-base);
}
.custom-gallery img:hover { transform: scale(1.05); }
.custom-gallery figcaption { padding: var(--space-2); font-size: 0.85rem; color: var(--color-text-muted); }

/* El bloque Gallery nativo de WordPress conserva su propio grid; solo se
   ajusta el cursor/hover para que se note que las imágenes son interactivas. */
.wp-block-gallery img { cursor: zoom-in; transition: opacity var(--transition-fast); }
.wp-block-gallery img:hover { opacity: 0.9; }

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1100; /* Por encima del menú móvil: es un visor modal de máxima prioridad. */
	visibility: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--transition-base), visibility var(--transition-base);
}
.lightbox.is-open { visibility: visible; pointer-events: auto; opacity: 1; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(8, 43, 71, 0.92); }
.lightbox__dialog {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-5);
}
.lightbox__image { max-width: min(90vw, 1100px); max-height: 75vh; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox__caption { color: rgba(255,255,255,0.85); margin-top: var(--space-3); text-align: center; max-width: 700px; }
.lightbox__close {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.3);
	color: #fff;
	font-size: 1.1rem;
}
.lightbox__close:hover { background: rgba(255,255,255,0.2); }
.lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.3);
	color: #fff;
	font-size: 1.4rem;
}
.lightbox__nav:hover { background: rgba(255,255,255,0.2); }
.lightbox__nav--prev { left: var(--space-4); }
.lightbox__nav--next { right: var(--space-4); }

@media (max-width: 640px) {
	.notice-bar__inner { flex-direction: column; gap: 4px; padding-block: var(--space-3); }
	.notice-bar__text { padding-right: 0; }
	.notice-bar__close { top: var(--space-2); transform: none; }
	.lightbox__nav { width: 40px; height: 40px; font-size: 1.1rem; }
}

/* ==========================================================================
   24. Preloader de carga de página
   ========================================================================== */
.page-preloader {
	position: fixed;
	inset: 0;
	z-index: 10500; /* por encima de todo: skip-link (10000) y el lightbox (1100) */
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	transition: opacity 400ms var(--ease-smooth), visibility 400ms var(--ease-smooth);
}
.page-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.page-preloader__mark { position: relative; width: min(200px, 60vw); aspect-ratio: 320 / 216; }
.page-preloader__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.page-preloader__img--ghost { opacity: 0.2; filter: grayscale(100%); }
/* La copia "fill" se revela de abajo hacia arriba con clip-path, dando la
   sensación de que el logo "se llena" mientras carga la página. La
   animación se detiene en 15% (no llega a completarse) para no aparentar
   que ya terminó si la carga real toma más tiempo; JS remata el último
   tramo con la clase `is-loaded` en cuanto dispara `window.load`. */
.page-preloader__img--fill {
	clip-path: inset(100% 0 0 0);
	animation: cadecom-preloader-fill 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.page-preloader.is-loaded .page-preloader__img--fill {
	animation: none;
	clip-path: inset(0 0 0 0);
	transition: clip-path 350ms var(--ease-smooth);
}
.page-preloader__text {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--color-primary-dark);
	animation: cadecom-preloader-pulse 1.1s ease-in-out infinite;
}

@keyframes cadecom-preloader-fill {
	0% { clip-path: inset(100% 0 0 0); }
	100% { clip-path: inset(15% 0 0 0); }
}
@keyframes cadecom-preloader-pulse {
	0%, 100% { opacity: 0.35; }
	50% { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
	.page-preloader__img--fill { animation: none; clip-path: inset(0 0 0 0); }
	.page-preloader__text { animation: none; opacity: 0.7; }
}