/**
 * AVELUNEXA — secciones de portada y armazón de tienda.
 *
 * Se carga solo en la portada y en las plantillas que usan estas secciones.
 * Todo se apoya en los tokens de tokens.css: aquí no hay ni un color literal.
 */

/* -------------------------------------------------------------------------
 * Announcement bar
 * ---------------------------------------------------------------------- */

.av-announcement {
	background-color: var(--av-color-bg-inverse);
	color: var(--av-color-text-inverse);
	text-align: center;
}

.av-announcement__inner {
	max-width: var(--av-container);
	margin-inline: auto;
	padding: var(--av-space-2xs) var(--av-gutter);
	font-size: var(--av-text-xs);
	font-weight: var(--av-weight-medium);
	letter-spacing: var(--av-tracking-wide);
	text-transform: uppercase;
	/* Una sola línea en escritorio; en móvil se permite que envuelva en dos
	   antes que recortar el texto. */
	line-height: 1.6;
}

.av-announcement a {
	color: var(--av-color-accent);
	text-underline-offset: 0.25em;
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

.av-hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(24rem, 18rem + 26vw, 40rem);
	padding-block: var(--av-section-y);
	background-color: var(--av-color-bg-sunken);
	overflow: hidden;
}

.av-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--av-container);
	margin-inline: auto;
	padding-inline: var(--av-gutter);
}

.av-hero__content {
	max-width: 34rem;
}

.av-hero__title {
	font-size: var(--av-text-4xl);
	margin-block: 0 var(--av-space-sm);
}

.av-hero__lede {
	max-width: 46ch;
	margin-block-end: var(--av-space-lg);
}

.av-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--av-space-2xs);
}

/* Variante sobre imagen: se oscurece para garantizar contraste del texto
   pase lo que pase en la fotografía. */
.av-hero--media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(13, 27, 42, 0.82) 0%,
		rgba(13, 27, 42, 0.55) 45%,
		rgba(13, 27, 42, 0.15) 100%
	);
}

.av-hero--media .av-hero__inner { z-index: 2; }
.av-hero--media .av-hero__title { color: var(--av-color-text-inverse); }
.av-hero--media .av-hero__lede { color: var(--av-ivory-300); }

.av-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * Barra de garantías
 *
 * Solo se renderiza cuando hay algo verificable que decir — ver
 * inc/storefront.php. Si está vacía, el bloque entero no llega al HTML.
 * ---------------------------------------------------------------------- */

.av-trust {
	border-block: 1px solid var(--av-color-border);
	background-color: var(--av-color-bg-raised);
}

.av-trust__grid {
	display: grid;
	gap: var(--av-space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	max-width: var(--av-container);
	margin-inline: auto;
	padding: var(--av-space-lg) var(--av-gutter);
}

.av-trust__item {
	display: flex;
	flex-direction: column;
	gap: var(--av-space-3xs);
	text-align: center;
}

.av-trust__title {
	font-family: var(--av-font-body);
	font-size: var(--av-text-xs);
	font-weight: var(--av-weight-semibold);
	letter-spacing: var(--av-tracking-wide);
	text-transform: uppercase;
	color: var(--av-color-text);
}

.av-trust__copy {
	font-size: var(--av-text-sm);
	color: var(--av-color-text-muted);
	line-height: var(--av-leading-normal);
}

/* -------------------------------------------------------------------------
 * Colecciones / categorías
 * ---------------------------------------------------------------------- */

.av-collections__grid {
	display: grid;
	gap: var(--av-space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.av-collection {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--av-radius-sm);
	background-color: var(--av-navy-800);
	text-decoration: none;
	aspect-ratio: 3 / 4;
}

.av-collection__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--av-duration-base) var(--av-ease);
}

.av-collection:hover .av-collection__media { transform: scale(1.03); }

.av-collection__label {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: var(--av-space-lg) var(--av-space-sm) var(--av-space-sm);
	background: linear-gradient(180deg, rgba(13, 27, 42, 0) 0%, rgba(13, 27, 42, 0.85) 100%);
	color: var(--av-color-text-inverse);
	font-family: var(--av-font-display);
	font-size: var(--av-text-xl);
	line-height: var(--av-leading-snug);
}

/* -------------------------------------------------------------------------
 * Sección editorial de marca
 * ---------------------------------------------------------------------- */

.av-editorial {
	display: grid;
	gap: var(--av-space-xl);
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	max-width: var(--av-container);
	margin-inline: auto;
	padding-inline: var(--av-gutter);
}

.av-editorial__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--av-radius-sm);
	background-color: var(--av-color-bg-sunken);
}

.av-editorial__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * Newsletter
 * ---------------------------------------------------------------------- */

.av-newsletter__inner {
	max-width: var(--av-container-narrow);
	margin-inline: auto;
	padding-inline: var(--av-gutter);
	text-align: center;
}

.av-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--av-space-2xs);
	justify-content: center;
	margin-block-start: var(--av-space-md);
}

.av-newsletter__form input[type='email'] {
	flex: 1 1 18rem;
	max-width: 24rem;
}

.av-newsletter__note {
	margin-block-start: var(--av-space-2xs);
	font-size: var(--av-text-xs);
	color: var(--av-color-text-muted);
}

/* Estado deshabilitado: sin proveedor de email conectado, el formulario se
   muestra inerte en lugar de fingir que funciona. */
.av-newsletter--pending .av-newsletter__form { opacity: 0.55; }

/* -------------------------------------------------------------------------
 * Estado vacío de catálogo
 *
 * Lo que se ve cuando aún no hay productos. Deliberadamente sobrio: nada de
 * productos de ejemplo que puedan confundirse con catálogo real.
 * ---------------------------------------------------------------------- */

.av-empty {
	max-width: 46ch;
	margin-inline: auto;
	padding-block: var(--av-space-2xl);
	text-align: center;
	color: var(--av-color-text-muted);
}

.av-empty__title {
	font-family: var(--av-font-display);
	font-size: var(--av-text-2xl);
	color: var(--av-color-text);
	margin-block-end: var(--av-space-2xs);
}

/* -------------------------------------------------------------------------
 * Aviso de marcador de posición — SOLO para administradores
 *
 * Sirve para que el equipo vea qué falta sin que un visitante lo perciba
 * jamás como información real. Se imprime únicamente si el usuario puede
 * gestionar la tienda (ver inc/storefront.php).
 * ---------------------------------------------------------------------- */

.av-placeholder-note {
	max-width: var(--av-container);
	margin: var(--av-space-sm) auto;
	padding: var(--av-space-xs) var(--av-space-sm);
	border: 1px dashed var(--av-color-warning);
	border-radius: var(--av-radius-sm);
	background-color: #fff8e6;
	color: #6b4e0c;
	font-family: var(--av-font-body);
	font-size: var(--av-text-sm);
	line-height: var(--av-leading-normal);
}

.av-placeholder-note strong { font-weight: var(--av-weight-semibold); }

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.av-footer {
	background-color: var(--av-color-bg-inverse);
	color: var(--av-gray-300);
}

.av-footer__grid {
	display: grid;
	gap: var(--av-space-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	max-width: var(--av-container);
	margin-inline: auto;
	padding: var(--av-space-2xl) var(--av-gutter) var(--av-space-lg);
}

.av-footer__brand {
	font-family: var(--av-font-display);
	font-size: var(--av-text-xl);
	letter-spacing: var(--av-tracking-wide);
	color: var(--av-color-text-inverse);
}

.av-footer__heading {
	font-size: var(--av-text-xs);
	font-weight: var(--av-weight-semibold);
	letter-spacing: var(--av-tracking-widest);
	text-transform: uppercase;
	color: var(--av-color-accent);
	margin-block-end: var(--av-space-2xs);
}

.av-footer a { color: var(--av-gray-300); text-decoration: none; }
.av-footer a:hover { color: var(--av-color-text-inverse); text-decoration: underline; }

.av-footer__bottom {
	border-block-start: 1px solid rgba(250, 247, 242, 0.12);
	max-width: var(--av-container);
	margin-inline: auto;
	padding: var(--av-space-sm) var(--av-gutter);
	display: flex;
	flex-wrap: wrap;
	gap: var(--av-space-2xs) var(--av-space-md);
	justify-content: space-between;
	font-size: var(--av-text-xs);
	color: var(--av-gray-500);
}

/* -------------------------------------------------------------------------
 * Móvil
 * ---------------------------------------------------------------------- */

@media (max-width: 47.9375em) {
	.av-hero { min-height: 22rem; text-align: left; }
	.av-hero__actions .av-btn { width: 100%; }

	.av-collections__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--av-space-2xs); }
	.av-collection__label { font-size: var(--av-text-base); padding: var(--av-space-md) var(--av-space-2xs) var(--av-space-2xs); }

	.av-trust__grid { grid-template-columns: 1fr; gap: var(--av-space-sm); }
	.av-trust__item { text-align: left; }

	.av-footer__grid { padding-block: var(--av-space-xl) var(--av-space-md); }
	.av-footer__bottom { flex-direction: column; }
}