/* Altius — estilos globales mínimos. Los componentes cargan su propio CSS. */

:root {
	--a-header-h: var(--wp--custom--header--alto, 64px);
	--a-rojo: var(--wp--preset--color--rojo);
	--a-grafito: var(--wp--preset--color--grafito);
	--a-gris: var(--wp--preset--color--gris);
	--a-niebla: var(--wp--preset--color--niebla);
	--a-radio-media: var(--wp--custom--radio--media);
	--a-radio-panel: var(--wp--custom--radio--panel);
	--a-ancho: var(--wp--style--global--wide-size, 1240px);
	--a-pad: var(--wp--style--root--padding-left, 1.25rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--a-header-h) + 1rem); -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-optical-sizing: auto; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--a-rojo); outline-offset: 3px; }

.a-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #fff; padding: .75rem 1rem; }
.a-skip:focus { left: 1rem; top: 1rem; }

/* Las partes de la plantilla van pegadas, sin el espaciado general entre bloques. */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Encabezado: fijo, translúcido, discreto. El sticky va en el contenedor de la parte. */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
.a-header {
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.a-header__derecha { display: flex; align-items: center; gap: .5rem; }
.a-header__inner { min-height: var(--a-header-h); max-width: var(--a-ancho); margin-inline: auto; }
.a-header .wp-block-site-logo img { height: 58px; width: auto; }
@media (max-width: 760px) {
	:root { --a-header-h: 64px; }
	.a-header .wp-block-site-logo img { height: 40px; }
}

/*
 * Etiqueta "Nuevo" en un ítem del menú.
 * Se activa poniendo la clase  a-nav-nuevo  en el enlace (Editor → Navegación →
 * enlace → Avanzado → Clases CSS adicionales). Para quitarla, borrar la clase.
 */
.a-nav-nuevo { margin-right: .9rem; } /* Espacio para la etiqueta, que sobresale a la derecha. */
.a-nav-nuevo .wp-block-navigation-item__label { position: relative; }
.a-nav-nuevo .wp-block-navigation-item__label::after {
	content: "Nuevo";
	position: absolute; top: 0; right: 0; transform: translate(62%, -78%);
	padding: .2em .5em; border-radius: 999px;
	background: var(--wp--preset--color--rojo-intenso, #fc0000); color: #fff;
	font-size: .5625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	line-height: 1.1; white-space: nowrap; pointer-events: none;
}

/*
 * Menú principal: mismo orden que la web anterior, con más ítems.
 * Entre 600 y 1180 px no entran todos en una línea: se usa el menú desplegable (hamburguesa).
 */
.a-header .wp-block-navigation { font-size: .9375rem; }
.a-header .wp-block-navigation .wp-block-navigation-item { white-space: nowrap; }
.a-header .a-nav-contacto > .wp-block-navigation-item__content { font-weight: 600; color: var(--wp--preset--color--rojo); }
@media (min-width: 600px) and (max-width: 1180px) {
	.a-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.a-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* Contenedor de secciones a ancho amplio. */
.a-wrap { max-width: var(--a-ancho); margin-inline: auto; padding-inline: var(--a-pad); }
.a-section { padding-block: var(--wp--preset--spacing--50); }
.a-section--niebla { background: var(--a-niebla); }
.a-section__titulo { font-size: var(--wp--preset--font-size--grande); margin: 0 0 var(--wp--preset--spacing--30); }

/* Botones propios (fuera del bloque core/button). */
.a-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 44px; padding: .7rem 1.35rem; border: 0; border-radius: 999px;
	background: var(--a-rojo); color: #fff; font: inherit; font-weight: 500; line-height: 1.2;
	text-decoration: none; cursor: pointer;
}
.a-btn:hover { background: var(--wp--preset--color--rojo-oscuro); color: #fff; text-decoration: none; }
.a-btn--sec { background: transparent; color: #000; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.a-btn--sec:hover { background: rgba(0, 0, 0, .05); color: #000; }
.a-btn--wa { background: #1f8f4e; }
.a-btn--wa:hover { background: #18733e; }
.a-link { color: var(--a-rojo); font: inherit; font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; }
.a-link:hover { text-decoration: underline; }

/* Etiquetas de disponibilidad: "Última unidad" (llena) y "Últimas N unidades" (contorno). */
.a-stock {
	display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 999px;
	font-size: .8125rem; font-weight: 700; line-height: 1.2; white-space: nowrap; letter-spacing: .01em;
}
.a-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.a-stock--ultima { background: var(--wp--preset--color--rojo-intenso, #fc0000); color: #fff; }
.a-stock--pocas { background: #fff1f1; color: var(--wp--preset--color--rojo-intenso, #fc0000); box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--rojo-intenso, #fc0000); }

/* Diálogos (planos, galería). */
.a-dialog { border: 0; padding: 0; max-width: min(1100px, 94vw); width: 100%; border-radius: var(--a-radio-panel); background: #fff; }
.a-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.a-dialog__cerrar {
	position: absolute; top: .75rem; right: .75rem; z-index: 2; width: 40px; height: 40px;
	border-radius: 50%; border: 0; background: rgba(0, 0, 0, .06); font-size: 1.5rem; line-height: 1; cursor: pointer;
}

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

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}