/*
 * AGL Legaspi — paleta de marca (extraída de LOGO-AGL.png)
 *
 * Azul AGL:  #1C4FA0  — color primario (AGL, llama principal)
 * Rojo AGL:  #F20032  — color de acento (LEGASPI, llama secundaria)
 * Blanco:    #FFFFFF  — texto sobre fondos de color
 * Navy:      #10264F  — fondos oscuros / secciones charcoal
 */

:root {
	--agl-blue: #1C4FA0;
	--agl-red: #F20032;
	--agl-white: #FFFFFF;
	--agl-navy: #10264F;
	--agl-navy-light: #1a3566;
}

/* ── Utilidades de color ── */

.color-blue,
.color-blue strong {
	color: var(--agl-blue);
}

.bkg-blue {
	background-color: var(--agl-blue);
	border-color: var(--agl-blue);
}

.border-blue {
	border-color: var(--agl-blue);
}

.bkg-theme,
.bkg-hover-theme:hover {
	background-color: var(--agl-red);
	border-color: var(--agl-red);
}

.border-theme,
.border-hover-theme:hover {
	border-color: var(--agl-red);
}

.color-theme,
.color-hover-theme:hover {
	color: var(--agl-red);
}

.bkg-charcoal,
.bkg-hover-charcoal:hover {
	background-color: var(--agl-navy);
	border-color: var(--agl-navy);
}

.bkg-charcoal-light,
.bkg-hover-charcoal-light:hover {
	background-color: var(--agl-navy-light);
	border-color: var(--agl-navy-light);
}

.border-charcoal,
.border-hover-charcoal:hover {
	border-color: var(--agl-navy);
}

.color-charcoal,
.color-hover-charcoal:hover {
	color: var(--agl-navy);
}

/* ── Tipografía: hovers de enlaces → azul ── */

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
a:hover,
p a:hover,
.box a:not(.button):hover,
.social-list li a:hover,
.team-1 .social-list a:hover,
.team-2 .social-list a:hover,
.accordion li a:hover,
.accordion li.active a,
.tabs li a:hover,
.tabs li.active a,
.tabs li.active a:hover,
.blog-masonry .with-background .post-read-more a:hover,
.post-info a:hover,
.post-info-over a:hover,
.post-info-over a:hover span,
.post-author-aside a:hover,
.post-love a:hover,
.post-love a:hover span,
.scroll-down a:hover,
.widget a:not(.button):hover,
.footer a:hover + .post-info .post-date,
.footer .navigation a:hover,
.footer .social-list a:hover,
.footer .footer-bottom a:hover,
.footer-top a:not(.button):hover {
	color: var(--agl-blue);
}

a:hover .text-line,
a.animated-link:hover .text-line,
.accordion li a:hover .text-line,
.tabs li a:hover .text-line,
.blog-masonry .with-background .post-read-more a:hover .text-line {
	background-color: var(--agl-blue);
}

/* ── Navegación principal ── */

.header-background .header-inner {
	background-color: #fff;
	border-color: #eee;
}

.header .header-inner .primary-navigation {
	display: flex;
	align-items: center;
	height: 8rem;
	line-height: 1;
}

.header-compact .header-inner .primary-navigation {
	height: 6rem;
}

.header .header-inner .primary-navigation > ul {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
	height: auto;
	line-height: 1;
	padding: 0.9rem 1.45rem;
	border-radius: 999px;
	background: rgba(16, 38, 79, 0.34);
	border: 1px solid transparent;
	box-shadow: 0 0.8rem 2.4rem rgba(16, 38, 79, 0.16);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.header .header-inner .primary-navigation > ul > li {
	height: auto;
	line-height: 1;
	flex-shrink: 0;
}

.header .header-inner .primary-navigation > ul > li > a:not(.button),
.header-compact .header-inner .primary-navigation > ul > li > a:not(.button) {
	position: relative;
	height: auto;
	line-height: 1.25;
	margin: 0;
	padding: 0.65rem 0.9rem;
	border-radius: 999px;
	background: transparent !important;
	border: 0;
	box-shadow: none;
	color: #fff;
	font-size: 1.45rem;
	font-weight: 400;
	opacity: 1;
	white-space: nowrap;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.header .header-inner .primary-navigation > ul > li.current > a:not(.button),
.header .header-inner .primary-navigation > ul > li > a:not(.button):hover,
.header-transparent .header-inner .primary-navigation > ul > li.current > a:not(.button),
.header-transparent .header-inner .primary-navigation > ul > li > a:not(.button):hover {
	background: rgba(255, 255, 255, 0.22) !important;
	color: #fff;
	box-shadow: none;
}

.header-background .header-inner .primary-navigation > ul {
	padding: 0.75rem 1.15rem;
	background: transparent;
	border: 1px solid transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

@media only screen and (max-width: 1400px) {
	.header .header-inner .primary-navigation > ul,
	.header-background .header-inner .primary-navigation > ul {
		gap: 0.1rem;
		padding: 0.55rem 0.7rem;
	}

	.header .header-inner .primary-navigation > ul > li > a:not(.button),
	.header-compact .header-inner .primary-navigation > ul > li > a:not(.button) {
		padding: 0.5rem 0.55rem;
		font-size: 1.32rem;
	}
}

.header-background .header-inner .primary-navigation > ul > li > a:not(.button) {
	color: #999;
	text-shadow: none;
}

.header-background .header-inner .primary-navigation > ul > li.current > a:not(.button),
.header-background .header-inner .primary-navigation > ul > li.current > a:not(.button):hover,
.header-background .header-inner .primary-navigation > ul > li > a:not(.button):hover {
	color: #000;
	background: rgba(28, 79, 160, 0.12) !important;
	box-shadow: none;
}

.mobile .header .header-inner .primary-navigation > ul {
	background: rgba(255, 255, 255, 0.86);
	border-color: rgba(28, 79, 160, 0.14);
}

.mobile .header .header-inner .primary-navigation > ul > li > a:not(.button) {
	color: var(--agl-navy);
	text-shadow: none;
}

.mobile .header .header-inner .primary-navigation > ul > li.current > a:not(.button),
.mobile .header .header-inner .primary-navigation > ul > li > a:not(.button):hover {
	color: var(--agl-blue);
	box-shadow: inset 0 -2px 0 var(--agl-blue);
}

.navigation .sub-menu li > a:not(.button):hover,
.navigation .mega-sub-menu ul li > a:not(.button):hover,
.navigation .dropdown-list li > a:not(.button):hover,
.navigation .sub-menu li.current > a:not(.button),
.navigation .dropdown-list li.current > a:not(.button),
.navigation .mega-sub-menu ul li.current > a:not(.button) {
	color: var(--agl-red);
}

.navigation .sub-menu:not(.custom-content) a,
.navigation .sub-menu.custom-content,
.navigation .mega-sub-menu,
.navigation .dropdown-list {
	background-color: var(--agl-navy);
	color: #fff;
}

/* El desplegable anidado se iba fuera de la pantalla. Se lee en la misma columna. */
.header .primary-navigation > ul > li > .sub-menu {
	width: 28rem;
}

.header .primary-navigation > ul > li:hover > .sub-menu .sub-menu,
.header .primary-navigation > ul > li:focus-within > .sub-menu .sub-menu {
	position: static;
	width: 100%;
	height: auto;
	opacity: 1;
	visibility: visible;
	box-shadow: none;
	padding: 0;
}

.header .primary-navigation .sub-menu a,
.header .primary-navigation .sub-menu li a {
	color: #fff;
	white-space: normal;
}

.header .primary-navigation .sub-menu .sub-menu a {
	padding-left: 2.8rem;
	background-color: #16356e;
	color: #fff;
}

.header .primary-navigation .sub-menu li > a:hover,
.header .primary-navigation .sub-menu li.current > a {
	color: var(--agl-red);
}

/* ── Botones ── */

.header .v-align-middle > .button:not(.nav-icon),
.header .dropdown > .button:not(.nav-icon),
.header-background .v-align-middle > .button:not(.nav-icon),
.header-background .dropdown > .button:not(.nav-icon),
.mobile .v-align-middle > .button:not(.nav-icon),
.mobile .dropdown > .button:not(.nav-icon),
.shop .cart-overview .button,
.shop .product .button,
.form-submit.button.bkg-charcoal {
	background-color: var(--agl-blue);
	border-color: var(--agl-blue);
	color: var(--agl-white);
}

.header .v-align-middle > .button:not(.nav-icon):hover,
.header .dropdown > .button:not(.nav-icon):hover,
.header .dropdown > .button.active:not(.nav-icon),
.header-background .v-align-middle > .button:not(.nav-icon):hover,
.header-background .dropdown > .button:not(.nav-icon):hover,
.mobile .v-align-middle > .button:not(.nav-icon):hover,
.mobile .dropdown > .button:not(.nav-icon):hover,
.shop .cart-overview .button:hover,
.shop .product .button:hover,
.navigation .cart-overview .checkout.button,
.side-navigation .cart-overview .checkout.button,
.overlay-navigation .cart-overview .checkout.button {
	background-color: var(--agl-red);
	border-color: var(--agl-red);
	color: var(--agl-white);
}

.navigation .cart-overview .checkout.button:hover,
.side-navigation .cart-overview .checkout.button:hover,
.overlay-navigation .cart-overview .checkout.button:hover {
	background-color: var(--agl-blue);
	border-color: var(--agl-blue);
}

/* ── Footer ── */

.footer {
	background: var(--agl-navy);
}

.footer .footer-bottom-inner {
	border-color: var(--agl-navy-light);
}

/* ── Formularios ── */

.checkbox:checked + .checkbox-label:before {
	background: var(--agl-red);
	border-color: var(--agl-red);
}

.radio:checked + .radio-label:before {
	background: var(--agl-red);
}

.checkbox.required-field + .checkbox-label:before {
	border-color: var(--agl-red);
}

/* ── Acordeón y tabs ── */

.accordion > ul > li.active > a,
.accordion > ul > li.active > a:hover {
	background-color: var(--agl-navy);
}

.accordion.style-1 > ul > li.active > a,
.accordion.style-1 > ul > li.active > a:hover,
.accordion.style-2 > ul > li.active > a,
.accordion.style-2 > ul > li.active > a:hover {
	color: var(--agl-red);
}

.tabs.style-1 .tab-nav > li.active a,
.tabs.style-1 .tab-nav > li.active a:hover,
.tabs.style-1.vertical.right .tab-nav > li.active a,
.tabs.style-1.vertical.right .tab-nav > li.active a:hover {
	background-color: var(--agl-red);
}

.tabs.style-2 .tab-nav > li.active a,
.tabs.style-2 .tab-nav > li.active a:hover,
.tabs.style-2.vertical .tab-nav > li.active a,
.tabs.style-2.vertical.right .tab-nav > li.active a {
	border-color: var(--agl-red);
}

/* ── Etiquetas, badges y shop ── */

.sub-menu li .label,
.mega-menu li .label,
.dropdown li .label,
.navigation .cart .badge,
.shop .products .product .onsale,
.single-product .product .onsale {
	background-color: var(--agl-red);
	border-color: var(--agl-red);
}

.shop .products .product .outofstock,
.single-product .product .outofstock {
	background-color: var(--agl-navy);
}

.map-pan-link-container a.button.active {
	border-color: var(--agl-red);
}

/* ── Loader / animación ── */

@keyframes color {
	0%,
	40%,
	66%,
	80%,
	90%,
	100% {
		stroke: var(--agl-red);
		border-bottom-color: var(--agl-red);
	}
}

/* ── Overlays de hero ── */

.featured-media [data-overlay-bkg-color],
.page-hero [data-overlay-bkg-color] {
	--hero-overlay: var(--agl-navy);
}

/* ── Filtros de grid ── */

.grid-filter-menu a:hover,
.grid-filter-menu a.active {
	color: var(--agl-blue);
}

.grid-filter-menu a.active {
	border-color: var(--agl-red);
}

/* ── Paginación ── */

.pagination-3 .pagination-previous,
.pagination-3 .pagination-next,
.pagination-3 a.current,
.pagination-3 a:hover {
	color: var(--agl-blue);
}

/* ── Navegación lateral móvil: misma paleta que el menú de escritorio ── */

.side-navigation-wrapper {
	background-color: #fff;
	box-shadow: -1.2rem 0 3.2rem rgba(16, 38, 79, 0.12) !important;
}

.side-navigation-wrapper .navigation-hide,
.side-navigation-wrapper .navigation-hide a {
	color: var(--agl-navy);
}

.side-navigation-wrapper .navigation-hide a:hover {
	color: var(--agl-blue);
}

.side-navigation,
.side-navigation ul {
	text-align: left;
}

.side-navigation > ul > li > a,
.header .primary-navigation > ul > li > a {
	text-transform: none;
	letter-spacing: 0;
}

.side-navigation > ul > li > a {
	color: var(--agl-navy);
	font-weight: 500;
}

.side-navigation > ul > li.current > a,
.side-navigation > ul > li.current > a:hover,
.side-navigation > ul > li > a:hover {
	color: var(--agl-blue);
}

.side-navigation > ul > li.current > a:after {
	background-color: var(--agl-red);
}

.side-navigation .sub-menu {
	background: transparent;
}

.side-navigation ul li:hover > .sub-menu {
	opacity: 1 !important;
}

.side-navigation .sub-menu a,
.side-navigation .sub-menu .contains-sub-menu,
.side-navigation ul li.current > .sub-menu a {
	color: var(--agl-navy) !important;
	opacity: 1;
	font-size: 1.45rem;
	line-height: 1.35;
	text-align: left;
}

.side-navigation .sub-menu .sub-menu a {
	color: var(--agl-blue) !important;
	padding-left: 7.2rem;
}

.side-navigation .sub-menu a:hover,
.side-navigation .sub-menu li.current > a,
.side-navigation ul li.current > a:hover {
	color: var(--agl-red) !important;
}

.side-navigation .sub-menu.open,
.side-navigation .sub-menu.open .sub-menu {
	height: auto !important;
	overflow: visible !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.side-navigation-footer,
.side-navigation-footer .copyright {
	color: rgba(16, 38, 79, 0.55);
}

.overlay-navigation > ul > li.current > a,
.overlay-navigation ul li.current > a:hover {
	color: var(--agl-red);
}

/* ── Header / Hero slider arrows ── */

.featured-media .tms-arrow-nav,
.full-width-slider .tms-arrow-nav {
	width: 4.8rem;
	height: 4.8rem;
	margin-top: -2.4rem;
	border-radius: 50%;
	background: rgba(16, 38, 79, 0.42);
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: #fff;
	font-size: 1.8rem;
	line-height: 4.8rem;
	box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.18);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0 !important;
	pointer-events: none;
	transition:
		opacity 0.2s ease,
		background 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.featured-media:hover .tms-arrow-nav,
.full-width-slider:hover .tms-arrow-nav {
	opacity: 1 !important;
	pointer-events: auto;
}

.featured-media .tms-arrow-nav:hover,
.full-width-slider .tms-arrow-nav:hover {
	width: 4.8rem;
	background: var(--agl-blue);
	border-color: var(--agl-blue);
	opacity: 1 !important;
	transform: scale(1.06);
	box-shadow: 0 1rem 2.8rem rgba(28, 79, 160, 0.28);
}

.featured-media .tms-arrow-nav:before,
.full-width-slider .tms-arrow-nav:before {
	line-height: 4.8rem;
}

@media only screen and (max-width: 768px) {
	.featured-media .tms-arrow-nav,
	.full-width-slider .tms-arrow-nav {
		width: 4rem;
		height: 4rem;
		margin-top: -2rem;
		font-size: 1.5rem;
		line-height: 4rem;
	}

	.featured-media .tms-arrow-nav:hover,
	.full-width-slider .tms-arrow-nav:hover {
		width: 4rem;
	}

	.featured-media .tms-arrow-nav:before,
	.full-width-slider .tms-arrow-nav:before {
		line-height: 4rem;
	}
}

/* Feature sections — alinear título e imagen cuando no hay texto */
.feature-2--title-only .row.flex {
	align-items: center;
}

/* Feature sections — imagen ajustada a la columna (cover) */
.feature-2--image-cover .feature-image-inner {
	width: 100%;
	min-height: 34rem;
	overflow: hidden;
}

.feature-2--image-cover .feature-image img {
	width: 100%;
	height: 100%;
	min-height: 34rem;
	object-fit: cover;
	object-position: center;
	display: block;
}

@media only screen and (max-width: 768px) {
	.feature-2--image-cover .feature-image-inner,
	.feature-2--image-cover .feature-image img {
		min-height: 22rem;
	}
}

.button.is-disabled,
.is-disabled.button {
	opacity: 0.72;
	cursor: default;
	pointer-events: none;
}

/* ============================================================
 * Sistema de secciones AGL — escala 8pt (1rem = 10px)
 *
 * Todo el contenido vive dentro de .agl-shell: un contenedor
 * centrado con gutters progresivos. Solo los elementos
 * decorativos (marquesinas, bandas) rompen el ancho.
 * ============================================================ */
:root {
	--sp-1: 0.4rem;
	--sp-2: 0.8rem;
	--sp-3: 1.2rem;
	--sp-4: 1.6rem;
	--sp-5: 2.4rem;
	--sp-6: 3.2rem;
	--sp-7: 4rem;
	--sp-8: 4.8rem;
	--sp-9: 6.4rem;

	--shell-max: 126rem;
	--shell-pad: 2rem;
	--section-y: 5.6rem;

	--card-radius: 1.4rem;
	--card-ratio: 16 / 9;

	--ink: #141a22;
	--muted: #5c6878;
	--line: #e3e8f0;
	--surface: #f5f7fa;

}

@media only screen and (min-width: 768px) {
	:root {
		--shell-pad: 3.2rem;
		--section-y: 7.2rem;
	}
}

@media only screen and (min-width: 1200px) {
	:root {
		--shell-pad: 4rem;
		--section-y: 8.8rem;
	}
}

/* z-index: 1 mantiene las secciones por encima del hero con parallax,
   cuyo slider es position: fixed (equivale a .section-block de Timber). */
.agl-section,
.agl-band {
	position: relative;
	z-index: 1;
}

.agl-section {
	padding-block: var(--section-y);
	background: #fff;
}

.agl-section--tint {
	background: var(--surface);
}

.agl-shell {
	width: 100%;
	max-width: var(--shell-max);
	margin-inline: auto;
	padding-inline: var(--shell-pad);
}

/* ── Encabezado de sección ── */

.agl-head {
	max-width: 72rem;
	margin: 0 0 var(--sp-8);
}

.agl-head--center {
	margin-inline: auto;
	text-align: center;
}

.agl-eyebrow {
	display: block;
	margin: 0 0 var(--sp-4);
	color: var(--agl-red);
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}

.agl-title {
	margin: 0;
	color: var(--ink);
	font-size: clamp(2.8rem, 1.9rem + 1.9vw, 4rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	text-wrap: balance;
}

.agl-lead {
	margin: var(--sp-5) 0 0;
	max-width: 58ch;
	color: var(--muted);
	font-size: 1.7rem;
	line-height: 1.65;
}

/* ── Botón de sección ── */

.agl-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 1.5rem 3rem;
	border: 0;
	border-radius: 999px;
	background-color: var(--agl-blue);
	color: #fff;
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.agl-btn:hover,
.agl-btn:focus {
	background-color: var(--agl-red);
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
}

.agl-btn--ghost {
	padding: 1.4rem 2.8rem;
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--line);
	color: var(--ink);
}

.agl-btn--ghost:hover,
.agl-btn--ghost:focus {
	background-color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--ink);
	color: #fff;
	transform: translateY(-2px);
}

/* El hero de Timber deja el fondo negro de .featured-media a la vista
   cuando el slider queda más bajo que la sección, sobre todo en móvil. */
.featured-media.window-height {
	height: 100vh !important;
	height: 100svh !important;
	min-height: 100vh;
	min-height: 100svh;
}

.featured-media.window-height .tm-slider-container.full-width-slider,
.featured-media.window-height .tms-slides,
.featured-media.window-height .tms-slide {
	height: 100% !important;
}

.featured-media.window-height .tms-slide {
	background-size: cover !important;
	background-position: center center !important;
}

/* En móvil el header queda fuera del hero. Si el hero mide 100svh,
   el texto alineado abajo se sale de la pantalla. */
@media only screen and (max-width: 960px) {
	.featured-media.window-height {
		height: calc(100svh - 6.4rem) !important;
		min-height: calc(100svh - 6.4rem);
	}
}