/*
Theme Name: Alemán
Theme URI: https://aleman.volcanolabs.agency
Description: Child theme de Volcano Base para Alemán — moda de autor sobre jean recuperado, Managua. Tienda WooCommerce en córdobas. Portada, header y footer code-first; páginas de contenido editables.
Author: Volcano Labs
Author URI: https://volcanolabs.agency
Template: volcano-base
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aleman
*/

/* Los tokens de marca viven en theme.json. Aquí solo estructura y
   composición, siempre a través de las variables de preset. */

/* <picture> es solo un envoltorio para el WebP: que no se convierta en el
   hijo directo de los grids/flex donde el layout espera al <img>. */
picture {
	display: contents;
}

/* Con `display: contents` los <source> dejan de heredar el `display:none` del
   UA y pasan a contar como items del grid/flex (se veía en el split: 4 items
   en 2 columnas → la segunda imagen caía a una fila de altura 0). */
picture > source {
	display: none;
}

/*
 * Blindaje de las fuentes de marca.
 *
 * En este subsitio el merge de theme.json devuelve los slugs `sans` y
 * `heading` DUPLICADOS —los del child y los de volcano-base— y gana el padre,
 * así que los titulares caían a -apple-system. Afecta también a fior y
 * amantoli; petala se salva. No es caché (se verificó con `wp cache flush`).
 *
 * Redefinir los presets aquí es independiente de ese merge. La doble `:root`
 * sube la especificidad a (0,2,0) para no depender del orden en que se
 * impriman las hojas de estilo globales.
 */
:root:root {
	--wp--preset--font-family--sans: 'Inter', Helvetica, Arial, sans-serif;
	--wp--preset--font-family--heading: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
}

:root {
	--aleman-ease: var(--wp--custom--ease, cubic-bezier(0.22, 1, 0.36, 1));
	--aleman-marquee-h: 2.25rem;
	--aleman-gutter: 1rem;
	/* Alto de la barra del header. Lo comparten la barra y el logotipo fijo,
	   que vive fuera de ella: así el logo queda centrado sin cuentas a mano. */
	--aleman-header-h: 5rem;
	/* Hilo entre cards de producto. Medido sobre la referencia (captura
	   Retina 2×): 10px de captura = 5px reales, y el mismo valor de margen
	   exterior, así que la rejilla respira igual por fuera que por dentro. */
	--aleman-card-gap: 5px;
}

@media (min-width: 768px) {
	:root { --aleman-gutter: 1.5rem; }
}

/* ============================================================
   Utilidades tipográficas (equivalen a las @utility del diseño)
   ============================================================ */

.display-xl {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(48px, 11vw, 140px);
	line-height: 0.86;
	letter-spacing: var(--wp--custom--tracking--display, -2px);
	font-weight: 400;
	margin: 0;
}

.display-lg {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(40px, 6vw, 84px);
	line-height: 0.9;
	letter-spacing: var(--wp--custom--tracking--display, -2px);
	font-weight: 400;
	margin: 0;
}

.display-md {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(28px, 3.4vw, 48px);
	line-height: 0.94;
	letter-spacing: -0.02em;
	font-weight: 400;
	margin: 0;
}

.label-xs,
.label-sm {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: var(--wp--custom--tracking--label, 0.12em);
	text-transform: uppercase;
	margin: 0;
}

.label-sm { font-size: 13px; }

.body-copy {
	font-size: 15px;
	line-height: 1.7;
	margin: 0;
}

.aleman-muted { color: var(--wp--preset--color--neutral-400); }

.pill-outline {
	display: inline-block;
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 0.85rem 1.75rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	letter-spacing: var(--wp--custom--tracking--label, 0.12em);
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	transition: background-color 600ms var(--aleman-ease), color 600ms var(--aleman-ease);
}

.pill-outline:hover,
.pill-outline:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.aleman-hero .pill-outline:hover,
.aleman-hero .pill-outline:focus-visible {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Zoom lento en hover sobre la imagen contenida. */
.zoom-slow { overflow: hidden; }
.zoom-slow img { transition: transform 900ms var(--aleman-ease); }
.zoom-slow:hover img,
.zoom-slow:focus-visible img { transform: scale(1.06); }

/* Reveal al entrar en viewport (lo activa aleman.js).
   Solo se oculta si hay JS: sin él, el contenido se ve tal cual. */
.aleman-js .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 700ms var(--aleman-ease) var(--delay, 0ms),
		transform 700ms var(--aleman-ease) var(--delay, 0ms);
}

.aleman-js .reveal-in {
	opacity: 1;
	transform: none;
}

/* ============================================================
   Marquee de avisos (fijo arriba)
   ============================================================ */

/*
 * El alto lo fija el token, no el contenido: con `padding-block` la barra
 * medía 44px mientras el resto del layout reservaba los 36px de
 * --aleman-marquee-h, y esos 8px de descuadre se veían como una franja entre
 * el marquee y el hero. Header y logotipo fijo cuelgan del mismo token, así
 * que también estaban 8px altos.
 */
.aleman-marquee {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	overflow: hidden;
	box-sizing: border-box;
	height: var(--aleman-marquee-h);
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
}

.marquee-track {
	display: inline-flex;
	white-space: nowrap;
	/* Como hijo flex no debe encogerse: su ancho es el del bucle. */
	flex: 0 0 auto;
	animation: aleman-marquee 40s linear infinite;
}

.aleman-marquee:hover .marquee-track { animation-play-state: paused; }

.aleman-marquee__group {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.aleman-marquee__sep { padding-inline: 0.25rem; }
.aleman-marquee__group .label-xs { padding-inline: 1rem; }

@keyframes aleman-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ============================================================
   Wordmark fijo con parallax + inversión por superficie
   ============================================================ */

.aleman-pinned {
	position: fixed;
	top: var(--aleman-marquee-h);
	left: calc(var(--aleman-gutter) + 0.5rem);
	height: var(--aleman-header-h);
	display: flex;
	align-items: center;
	z-index: 60;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: color 500ms ease;
}

.aleman-pinned.is-on-dark { color: var(--wp--preset--color--base); }

.aleman-wordmark {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 30px;
	line-height: 0.8;
	letter-spacing: var(--wp--custom--tracking--display, -2px);
	user-select: none;
}

/* Logotipo de marca (negro sobre transparente). Tamaño fijo: no encoge con
   el scroll. Lo único que sigue animándose es la inversión de color. */
.aleman-pinned .aleman-logo {
	display: block;
	height: auto;
	width: auto;
	max-height: 1.75rem;
	transition: filter 500ms ease;
}

/* Sobre secciones oscuras el logotipo se invierte a blanco, igual que hace
   el lettering con `color`. Sin esto desaparecería sobre el hero. */
.aleman-pinned.is-on-dark .aleman-logo {
	filter: invert(1);
}

/* …salvo con el mega-menú abierto: ahí el header se vuelve blanco y un logo
   invertido desaparecería. El logo es hermano del header, así que hay que
   mirar desde <body>. */
body:has(.aleman-nav__mega:hover) .aleman-pinned .aleman-logo,
body:has(.aleman-nav__mega:focus-within) .aleman-pinned .aleman-logo {
	filter: none;
}

body:has(.aleman-nav__mega:hover) .aleman-pinned,
body:has(.aleman-nav__mega:focus-within) .aleman-pinned {
	color: var(--wp--preset--color--contrast);
}

@media (min-width: 768px) {
	.aleman-wordmark {
		font-size: 64px;
	}

	.aleman-pinned .aleman-logo {
		max-height: 2.5rem;
	}
}

/* En el drawer el fondo siempre es claro: nunca invertir ahí. */
.aleman-drawer__brand .aleman-logo {
	display: block;
	max-height: 2rem;
	width: auto;
}

/* ============================================================
   Header (barra de acciones) y drawer
   ============================================================ */

/*
 * Header fijo de dos estados:
 *   arriba del todo  → transparente, deja ver el hero
 *   al bajar (>48px) → «glass»: fondo translúcido + blur
 * Las clases las pone aleman.js.
 */
.aleman-header {
	position: fixed;
	inset: var(--aleman-marquee-h) 0 auto 0;
	z-index: 55;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid transparent;
	color: var(--wp--preset--color--contrast);
	transition:
		background-color 400ms var(--aleman-ease),
		backdrop-filter 400ms var(--aleman-ease),
		border-color 400ms var(--aleman-ease),
		color 400ms ease;
}

/* Sobre una sección oscura y sin glass, los iconos van en claro. */
.aleman-header.is-on-dark {
	color: var(--wp--preset--color--base);
}

/*
 * Velo superior para el estado transparente.
 *
 * La inversión a blanco se decide por el `data-surface` de la sección, no por
 * el brillo real de los píxeles: si la foto del hero tiene la parte de arriba
 * clara, el nav en blanco se perdía. Este degradado asegura contraste sea cual
 * sea la foto de temporada. Se desvanece hacia abajo y desaparece con el glass.
 */
.aleman-header::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: calc(var(--aleman-header-h) + 3rem);
	z-index: -1;
	pointer-events: none;
	background-image: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent) 55%,
		transparent 100%
	);
	opacity: 0;
	transition: opacity 400ms var(--aleman-ease);
}

.aleman-header.is-on-dark:not(.is-glass)::before {
	opacity: 1;
}

.aleman-header.is-glass {
	/* Fallback sólido para navegadores sin color-mix (sigue siendo el token). */
	background-color: var(--wp--preset--color--base);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom-color: var(--wp--preset--color--neutral-100);
	color: var(--wp--preset--color--contrast);
}

/* Sin soporte de backdrop-filter, un fondo casi sólido en vez de nada. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.aleman-header.is-glass {
		background-color: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
	}
}

.aleman-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--aleman-header-h);
	padding: 0 calc(var(--aleman-gutter) + 0.5rem);
}

/* Reserva el sitio del logotipo fijo para que el nav quede centrado. */
.aleman-header__hueco {
	flex: 0 0 auto;
	width: 0;
}

@media (min-width: 900px) {
	.aleman-header__hueco { width: 11rem; }
}

.aleman-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	flex: 0 0 auto;
}

@media (min-width: 900px) {
	.aleman-header__actions { width: 11rem; }
}

/* ---- Nav central (solo escritorio; en móvil manda el drawer) ---- */

.aleman-nav {
	display: none;
	align-items: center;
	gap: 1.75rem;
}

@media (min-width: 900px) {
	.aleman-nav { display: flex; }
	/* Especificidad (0,2,0): `.aleman-iconbtn { display:inline-grid }` se
	   declara más abajo y con una sola clase le ganaría. */
	.aleman-header .aleman-header__burger { display: none; }
}

.aleman-nav a {
	color: inherit;
	text-decoration: none;
	transition: opacity 300ms ease;
	white-space: nowrap;
}

/* Solo los enlaces de primer nivel: dentro del mega hay taglines en Inter y
   títulos en Bebas, que solo tiene un peso y se sintetizaría. 600 es el peso
   que auto-alojamos (ver fonts.css). */
.aleman-nav > a,
.aleman-nav__trigger {
	font-weight: 600;
}

.aleman-nav a:hover,
.aleman-nav a:focus-visible { opacity: 0.6; }

/* Cursor de desplegable dibujado en CSS, sin glifo que dependa de la fuente. */
.aleman-nav__caret {
	display: inline-block;
	width: 0.36em;
	height: 0.36em;
	margin-left: 0.5em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 300ms var(--aleman-ease);
}

/* ---- Mega-menú de colecciones ---- */

.aleman-nav__mega { position: static; }

.aleman-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background-color: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--neutral-100);
	color: var(--wp--preset--color--contrast);
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		max-height 500ms var(--aleman-ease),
		opacity 300ms ease,
		visibility 0s linear 500ms;
}

/* Abre con ratón y con teclado (focus-within), sin necesidad de JS. */
.aleman-nav__mega:hover .aleman-mega,
.aleman-nav__mega:focus-within .aleman-mega {
	/* Tope de la animación: tiene que quedar por encima del alto máximo de la
	   rejilla (38rem) o el panel recortaría el pie de las cards. */
	max-height: 40rem;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.aleman-nav__mega:hover .aleman-nav__caret,
.aleman-nav__mega:focus-within .aleman-nav__caret {
	transform: translateY(0.05em) rotate(225deg);
}

/* Rejilla a sangre: tres colecciones + «Ver todo», sin márgenes ni huecos.
   El alto sigue al ancho de columna (33vw ≈ 4/3 de un cuarto de pantalla) para
   que las cards queden verticales como en la referencia, con suelo y techo para
   que no se estiren de más en pantallas angostas ni muy anchas. */
.aleman-mega__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: clamp(23rem, 33vw, 38rem);
}

/* Especificidad (0,2,0): `.aleman-nav a { color: inherit }` es (0,1,1) y le
   ganaba, así que los títulos heredaban la tinta del header en vez de ir en
   blanco sobre la foto. */
.aleman-mega .aleman-mega__item {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--secondary);
}

/* La celda final va sobre fondo claro: texto en tinta, al pie y a la izquierda,
   a la misma altura que los nombres de las colecciones —así lo resuelve la
   referencia—. Mantiene la misma especificidad (0,2,0) que la regla de arriba,
   o esta le pisaría el `display` y el texto se saldría por arriba de la celda. */
.aleman-mega .aleman-mega__todo {
	display: grid;
	place-items: end start;
	padding: 1.25rem;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-left: 1px solid var(--wp--preset--color--neutral-100);
	transition: background-color 400ms var(--aleman-ease);
}

.aleman-mega .aleman-mega__todo:hover {
	background-color: var(--wp--preset--color--secondary);
}

.aleman-mega .aleman-mega__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Velo tenue, solo el necesario para que el texto blanco se sostenga sobre
   fotos claras. Concentra lo poco que hay al pie, que es donde va el texto. */
.aleman-mega__scrim {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top,
		color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent) 45%,
		transparent 100%
	);
	transition: opacity 500ms var(--aleman-ease);
}

/* Nombre superpuesto abajo a la izquierda, como en la referencia. */
.aleman-mega__copy {
	position: absolute;
	left: 1.25rem;
	bottom: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	text-shadow: 0 1px 12px color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
}

/* Celda final, sin imagen: hereda el fondo del panel. */
/* Con el mega abierto el header se vuelve sólido, o el panel quedaría
   colgando de una barra transparente sobre el hero. */
.aleman-header:has(.aleman-nav__mega:hover),
.aleman-header:has(.aleman-nav__mega:focus-within) {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-bottom-color: var(--wp--preset--color--neutral-100);
}

/* …y el velo se apaga con él. Arriba del todo (`is-on-dark`, sin glass) el velo
   seguía encendido y se veía por encima del blanco: el header es `fixed` con
   `z-index`, o sea contexto de apilamiento, y ahí el orden de pintado es fondo →
   hijos con z-index negativo → contenido; el `::before` queda sobre el fondo, no
   debajo. Encima mide 3rem más que el header, así que manchaba el borde
   superior del panel. */
.aleman-header:has(.aleman-nav__mega:hover)::before,
.aleman-header:has(.aleman-nav__mega:focus-within)::before {
	opacity: 0;
}

.aleman-iconbtn {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	position: relative;
}

.aleman-iconbtn svg {
	width: 1.25rem;
	height: 1.25rem;
}

.aleman-cart__count {
	position: absolute;
	top: 0.25rem;
	right: 0.15rem;
	min-width: 1.05rem;
	height: 1.05rem;
	display: grid;
	place-items: center;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 10px;
	line-height: 1;
	padding-inline: 0.25rem;
}

.aleman-cart__count.is-empty { display: none; }

.aleman-drawer {
	position: fixed;
	inset: 0;
	z-index: 70;
	visibility: hidden;
	pointer-events: none;
}

.aleman-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.aleman-drawer__scrim {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--contrast);
	opacity: 0;
	transition: opacity 500ms var(--aleman-ease);
}

.aleman-drawer.is-open .aleman-drawer__scrim { opacity: 0.4; }

.aleman-drawer__panel {
	position: absolute;
	inset: 0 auto 0 0;
	width: min(22rem, 88vw);
	background-color: var(--wp--preset--color--base);
	padding: 1.25rem var(--aleman-gutter) 2rem;
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform 500ms var(--aleman-ease);
	overflow-y: auto;
}

.aleman-drawer.is-open .aleman-drawer__panel { transform: none; }

.aleman-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.aleman-drawer__brand {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.aleman-drawer__brand .aleman-wordmark { font-size: 30px; }

.aleman-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	flex: 1;
}

.aleman-drawer__list a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.75rem;
	line-height: 1;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: opacity 300ms ease;
}

.aleman-drawer__list a:hover { opacity: 0.55; }

.aleman-drawer__foot {
	margin-top: 2rem;
	color: var(--wp--preset--color--neutral-400);
}

/* ============================================================
   Portada
   ============================================================ */

/* Offset del marquee fijo: en el contenedor de página (presente tanto en la
   portada code-first como en la construida en Elementor), no en .aleman-home. */
body.home .site-main { padding-top: var(--aleman-marquee-h); }

/* 1 — Hero */
.aleman-hero {
	position: relative;
	width: 100%;
	height: calc(100svh - var(--aleman-marquee-h));
	overflow: hidden;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.aleman-hero .aleman-hero__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.aleman-hero__scrim {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--contrast);
	opacity: 0.2;
}

.aleman-hero__copy {
	position: absolute;
	/* Algo más adentro que el resto del contenido: el bloque del hero es el
	   único que va sobre foto y pegado al borde perdía peso. */
	left: calc(var(--aleman-gutter) + 0.5rem);
	bottom: 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

/* Titular de varias palabras: se baja el cuerpo respecto al display-xl
   genérico y se acota la medida, o a 140px desbordaría el hero. */
.aleman-hero__copy .display-xl {
	margin-top: 0.5rem;
	max-width: 15ch;
	font-size: clamp(40px, 7.5vw, 104px);
}

.aleman-hero__copy .pill-outline { margin-top: 1.5rem; }

@media (min-width: 768px) {
	.aleman-hero__copy { bottom: 4rem; }
}

/* 2 — Categorías */
/* Mismo fondo que «Nuevo», la sección que sigue: si es blanco, la fila de
   nombres se lee como una cinta entre el hero oscuro y la crema de abajo. */
.aleman-cats {
	display: flex;
	background-color: var(--wp--preset--color--secondary);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.aleman-cats::-webkit-scrollbar { display: none; }

.aleman-cats__item {
	flex: 0 0 62vw;
	scroll-snap-align: start;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.aleman-cats__media {
	display: block;
	aspect-ratio: 3 / 4.6;
	overflow: hidden;
}

.aleman-cats .aleman-cats__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* El nombre va debajo de la foto y centrado con su tile. 600 es el peso de
   Inter que auto-alojamos (ver fonts.css). */
.aleman-cats__name {
	display: block;
	text-align: center;
	padding: 1rem 0.75rem;
	font-weight: 600;
}

@media (min-width: 768px) {
	.aleman-cats { overflow-x: visible; }
	.aleman-cats__item { flex: 1 1 20%; }
}

/* 3 — Nuevo */
.aleman-nuevo {
	background-color: var(--wp--preset--color--secondary);
	padding: 6rem var(--aleman-gutter);
}

/* En «Nuevo» la sección tiene padding lateral por el titular, así que la
   rejilla lo compensa para alinearse con el borde igual que en el catálogo. */
.aleman-nuevo .aleman-grid {
	/* Se retira el gutter entero: el hilo de 5px lo pone el padding de la
	   propia rejilla, igual que en el catálogo. */
	margin-inline: calc(var(--aleman-gutter) * -1);
}

/* Rejilla de producto casi a sangre, como la referencia: un hilo de 5px separa
   las fotos entre sí y del borde del viewport. */
.aleman-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--aleman-card-gap);
	row-gap: 3rem;
	margin-top: 2.5rem;
	padding-inline: var(--aleman-card-gap);
}

@media (min-width: 768px) {
	.aleman-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.aleman-nuevo__cta { margin-top: 3.5rem; }

/* ============================================================
   Card de producto — una sola para todo el sitio
   ============================================================ */

.aleman-card { position: relative; }

.aleman-card__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background-color: var(--wp--preset--color--secondary);
}

/* Selector descendiente a propósito: los page builders inyectan
   `img { height:auto }`, que anula el object-fit y deja object-position sin
   efecto. Con una sola clase perderíamos la especificidad. */
.aleman-card .aleman-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 500ms var(--aleman-ease), transform 700ms var(--aleman-ease);
}

.aleman-card__img.is-hover { opacity: 0; }

/* Hover swap. Si el producto no tiene segunda foto no hay `.is-hover` y la
   primera nunca desaparece. */
@media (hover: hover) {
	.aleman-card:hover .aleman-card__img.is-base { opacity: 0; }
	.aleman-card:hover .aleman-card__img.is-hover { opacity: 1; }
}

/* Enlace estirado: hermano vacío de los botones, nunca envolviéndolos. */
.aleman-card__enlace {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.aleman-card__chip {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 0.25rem 0.6rem;
}

/*
 * Corazón. Medida la luminancia de esta esquina en las 11 fotos del catálogo
 * (0.299R+0.587G+0.114B): va de 8 a 237, con 7 por encima de 170. Ni un icono
 * blanco ni uno oscuro funcionan solos, así que se apoya en un disco
 * translúcido con blur — el mismo recurso que el header.
 */
.aleman-card__wish,
.aleman-card__mas {
	position: absolute;
	z-index: 2;
	display: inline-grid;
	place-items: center;
	border: 0;
	cursor: pointer;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	/* Los temas base pintan todo <button>: color explícito para no heredarlo. */
	color: var(--wp--preset--color--contrast);
	transition: background-color 300ms ease, opacity 300ms ease, transform 300ms var(--aleman-ease);
}

.aleman-card__wish {
	top: 0.6rem;
	right: 0.6rem;
	width: 2.1rem;
	height: 2.1rem;
}

.aleman-card__wish svg { width: 1.05rem; height: 1.05rem; fill: none; }

.aleman-card.is-guardada .aleman-card__wish svg {
	fill: currentColor;
}

.aleman-card__mas {
	bottom: 0.75rem;
	left: 50%;
	transform: translateX(-50%);
	width: 2.4rem;
	height: 2.4rem;
}

.aleman-card__mas svg { width: 1.1rem; height: 1.1rem; }

.aleman-card__wish:hover,
.aleman-card__mas:hover { background-color: var(--wp--preset--color--base); }

/* La revelación por hover va dentro de @media (hover: hover): si no, el
   agregado rápido no existiría en móvil, que es donde más se usa. */
@media (hover: hover) {
	.aleman-card__mas { opacity: 0; }
	.aleman-card:hover .aleman-card__mas,
	.aleman-card:focus-within .aleman-card__mas { opacity: 1; }
}

/* ---- Panel de tallas ---- */

.aleman-panel {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 3;
	background-color: var(--wp--preset--color--base);
	padding: 1rem 1rem 0;
	animation: aleman-panel-sube 320ms var(--aleman-ease);
}

@keyframes aleman-panel-sube {
	from { transform: translateY(100%); }
	to   { transform: none; }
}

.aleman-panel__cerrar {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	width: 1.9rem;
	height: 1.9rem;
	display: inline-grid;
	place-items: center;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.aleman-panel__cerrar svg { width: 0.95rem; height: 0.95rem; }
.aleman-panel__eyebrow { color: var(--wp--preset--color--neutral-400); }

.aleman-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.75rem 0 1rem;
}

.aleman-chip {
	min-width: 2.5rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--wp--preset--color--neutral-100);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	letter-spacing: var(--wp--custom--tracking--label, 0.12em);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
}

.aleman-chip:hover:not(:disabled) { border-color: var(--wp--preset--color--contrast); }

/* Chip de color: muestra + nombre, para que se elija a conciencia. */
.aleman-chip--color {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.aleman-chip--color .aleman-dot {
	width: 0.7rem;
	height: 0.7rem;
	flex: 0 0 auto;
}

.aleman-chip.is-elegida {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

.aleman-chip.is-agotada,
.aleman-chip:disabled {
	text-decoration: line-through;
	color: var(--wp--preset--color--neutral-400);
	cursor: not-allowed;
	opacity: 0.7;
}

/* Barra a todo el ancho: precio a la izquierda, acción a la derecha. */
.aleman-panel__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-inline: -1rem;
	padding: 0.85rem 1rem;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.aleman-panel__precio { color: var(--wp--preset--color--base); }
.aleman-panel__precio del { opacity: 0.5; margin-right: 0.35rem; }

.aleman-panel__accion {
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--base);
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	transition: opacity 250ms ease;
}

.aleman-panel__accion:disabled { opacity: 0.45; cursor: default; }

/* ---- Pie de la card ---- */

/* El pie va sangrado respecto a la foto, como en la referencia (21px). */
.aleman-card__meta {
	margin-top: 0.75rem;
	padding-inline: 1.25rem;
}
.aleman-card__nombre { color: var(--wp--preset--color--contrast); }

.aleman-card__price {
	margin-top: 0.25rem;
	color: var(--wp--preset--color--neutral-400);
}

.aleman-card__price del { margin-right: 0.35rem; opacity: 0.7; }
.aleman-card__price ins { text-decoration: none; color: var(--wp--preset--color--contrast); }

.aleman-card__stock {
	margin-top: 0.25rem;
	color: var(--wp--preset--color--neutral-400);
}

.aleman-card__colors {
	display: flex;
	gap: 0.375rem;
	margin-top: 0.5rem;
}

.aleman-dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	border: 1px solid var(--wp--preset--color--neutral-100);
	display: block;
}

/* 4 — Split editorial. Dos columnas independientes: cada una rota su propia
   pila de fotos, desfasadas en el tiempo (ver aleman.js). */
.aleman-split {
	position: relative;
	width: 100%;
	height: 90vh;
	overflow: hidden;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: 100%;
}

@media (min-width: 768px) {
	.aleman-split { height: 100vh; }
}

.aleman-split__lado {
	position: relative;
	overflow: hidden;
}

/*
 * El cambio se hace por z-index, no por opacidad.
 *
 * Con `opacity: 0` el navegador no rasteriza la capa hasta que hace falta, así
 * que al mostrarla se colaba un fotograma con el fondo de la sección —negro— a
 * la vista. Manteniéndolas todas opacas y apiladas, la foto entrante ya está
 * pintada y el cambio es inmediato.
 */
.aleman-split__foto {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.aleman-split__foto.is-active { z-index: 1; }

.aleman-split .aleman-split__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Logotipo calado sobre las dos fotos. El PNG es negro sobre transparente y
   `difference` con negro no cambia nada, así que primero se invierte a blanco
   y luego se mezcla: ahí sí recorta la imagen de detrás. */
.aleman-split__word {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(62%, 46rem);
	height: auto;
	transform: translate(-50%, -50%);
	filter: invert(1);
	mix-blend-mode: difference;
	pointer-events: none;
	z-index: 2;
}

.aleman-split__label {
	position: absolute;
	bottom: 1.5rem;
	left: var(--aleman-gutter);
	color: var(--wp--preset--color--base);
	z-index: 2;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 0.2rem;
	transition: border-color 300ms ease;
}

.aleman-split__label:hover,
.aleman-split__label:focus-visible {
	border-bottom-color: currentColor;
}

/* 5 — Identidad */
.aleman-identidad {
	background-color: var(--wp--preset--color--base);
	padding: 6rem var(--aleman-gutter);
	position: relative;
}

.aleman-identidad__slide {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

/* El `display:none` que trae el atributo `hidden` viene de la hoja del
   navegador, así que cualquier regla de autor le gana: sin esto las tres
   slides se pintaban apiladas. */
.aleman-identidad__slide[hidden] {
	display: none;
}

@media (min-width: 768px) {
	.aleman-identidad__slide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4rem;
	}
}

.aleman-identidad__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--wp--preset--color--secondary);
}

.aleman-identidad .aleman-identidad__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* El retrato de Isabella es vertical y de cuerpo entero (838×1300): recortado
   al cuadrado desde el centro, la banda visible empezaba por encima de las
   cejas y le cortaba la cabeza. Anclando el recorte al 15% queda la cara
   completa, con aire arriba, y corta a la altura del vestido. */
.aleman-identidad__slide[data-key="disenadora"] .aleman-identidad__media img {
	object-position: center 15%;
}

.aleman-identidad__copy .display-lg { margin-top: 0.75rem; }

.aleman-identidad__texto {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 46ch;
}

.aleman-identidad__tabs {
	display: flex;
	gap: 1rem;
	margin-top: 2.5rem;
}

.aleman-identidad__tabs button {
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: var(--wp--preset--color--neutral-400);
	transition: color 300ms ease;
}

.aleman-identidad__tabs button:hover,
.aleman-identidad__tabs button.is-active {
	color: var(--wp--preset--color--contrast);
}

/* 6 — Colecciones */
.aleman-colecciones { background-color: var(--wp--preset--color--contrast); }

.aleman-coleccion {
	position: relative;
	display: block;
	width: 100%;
	height: 60vh;
	overflow: hidden;
	text-decoration: none;
	color: var(--wp--preset--color--base);
}

.aleman-colecciones .aleman-coleccion img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.aleman-coleccion__scrim {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--contrast);
	opacity: 0.25;
}

.aleman-coleccion__copy {
	position: absolute;
	bottom: 2rem;
	left: var(--aleman-gutter);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.aleman-coleccion__cta {
	margin-top: 0.5rem;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.25rem;
}

/* 7 — Notas */
.aleman-notas {
	background-color: var(--wp--preset--color--base);
	padding: 6rem var(--aleman-gutter);
}

.aleman-notas__grid {
	display: grid;
	gap: 2.5rem;
	margin-top: 2.5rem;
}

@media (min-width: 768px) {
	.aleman-notas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.aleman-nota {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.aleman-nota__media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: var(--wp--preset--color--secondary);
}

.aleman-notas .aleman-nota__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.aleman-nota__fecha { display: block; margin-top: 1rem; }
.aleman-nota__titulo { display: block; margin-top: 0.5rem; }
.aleman-nota .body-copy { display: block; margin-top: 0.5rem; }

/* ============================================================
   Páginas interiores (About, Colecciones, Notas, Contacto)
   ============================================================ */

/* Derivado del alto real del cromo fijo, para que no haya que recalcularlo
   a mano cada vez que cambie la barra. */
.aleman-pagina {
	padding-top: calc(var(--aleman-marquee-h) + var(--aleman-header-h) + 4rem);
	padding-bottom: 6rem;
	background-color: var(--wp--preset--color--base);
}

.aleman-pagina__head { padding-inline: var(--aleman-gutter); }

.aleman-pagina__contenido {
	padding: 3rem var(--aleman-gutter) 0;
	max-width: 46rem;
	margin-inline: auto;
}

/* ---- Sobre Alemán ---- */

/* ---- Portada de About: retrato + presentación a la par ---- */

.aleman-about__portada {
	display: grid;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 768px) {
	.aleman-about__portada {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 3.5rem;
	}

	/* El centrado se calcula contra la figura entera, que incluye la leyenda,
	   así que el texto caía ~23px por debajo del centro de la foto. Este
	   margen —el alto de la leyenda— lo sube justo esa mitad. */
	.aleman-about__presenta { margin-bottom: 2.9rem; }
}

.aleman-about__retrato {
	margin: 0;
	max-width: 36rem;
}

.aleman-about__portada .aleman-about__retrato img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: top center;
	background-color: var(--wp--preset--color--secondary);
}

.aleman-about__retrato figcaption {
	margin-top: 0.9rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.aleman-about__nombre { color: var(--wp--preset--color--contrast); }

.aleman-about__intro {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 44ch;
}

.aleman-about__hero {
	margin-top: 3rem;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--wp--preset--color--secondary);
}

.aleman-about .aleman-about__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.aleman-about__cuerpo {
	display: grid;
	gap: 2.5rem;
	padding: 5rem var(--aleman-gutter);
}

@media (min-width: 768px) {
	.aleman-about__cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
}

.aleman-about__texto {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 46ch;
}

.aleman-about__texto p:last-child { margin-top: 0.75rem; }

.aleman-about__galeria {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	padding-inline: var(--aleman-gutter);
}

.aleman-about__foto {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background-color: var(--wp--preset--color--secondary);
}

.aleman-about .aleman-about__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Colecciones ---- */

/* ---- Colecciones: rejilla de cards con el nombre dentro ---- */

.aleman-colgrid { margin-top: 3rem; }

.aleman-colcard {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--secondary);
}

.aleman-colcard__media {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.aleman-colgrid .aleman-colcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 900ms var(--aleman-ease);
}

@media (hover: hover) {
	.aleman-colcard:hover .aleman-colcard__media img { transform: scale(1.05); }
}

.aleman-colcard__scrim {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top,
		color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent) 55%,
		transparent 100%
	);
}

/* El nombre va dentro de la card, sobre la foto. */
.aleman-colcard__copy {
	position: absolute;
	left: 1.1rem;
	right: 1.1rem;
	bottom: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	text-shadow: 0 1px 12px color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
}

/* ---- Ficha de colección ---- */

.aleman-colficha__head {
	padding-inline: var(--aleman-gutter);
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.aleman-colficha__head .display-xl { margin-block: 0.25rem; }
.aleman-colficha__texto { max-width: 52ch; }
.aleman-colficha__head p:last-child { margin-top: 1rem; }

.aleman-colficha__galeria {
	display: grid;
	gap: var(--aleman-card-gap);
	margin-top: 3.5rem;
	padding-inline: var(--aleman-card-gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
	.aleman-colficha__galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.aleman-colficha__foto {
	margin: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--secondary);
}

.aleman-colficha__galeria .aleman-colficha__foto img {
	width: 100%;
	height: 100%;
	display: block;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.aleman-colficha__pendiente {
	margin-top: 3rem;
	padding-inline: var(--aleman-gutter);
}

/* ---- Notas ---- */

.aleman-notaspag__lista {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	margin-top: 3.5rem;
	padding-inline: var(--aleman-gutter);
}

.aleman-notaspag__item {
	display: grid;
	gap: 1.5rem;
	align-items: center;
}

@media (min-width: 768px) {
	.aleman-notaspag__item { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
}

.aleman-notaspag__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--wp--preset--color--secondary);
}

.aleman-notaspag__lista .aleman-notaspag__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.aleman-notaspag__copy .display-lg { margin-top: 0.75rem; }
.aleman-notaspag__copy .display-lg a { color: inherit; text-decoration: none; }
.aleman-notaspag__copy .body-copy { margin-top: 1rem; max-width: 46ch; }

/* ---- Contacto ---- */

.aleman-contacto__cols {
	display: grid;
	gap: 3rem;
	margin-top: 3rem;
	padding-inline: var(--aleman-gutter);
}

@media (min-width: 768px) {
	.aleman-contacto__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; }
}

.aleman-contacto__datos {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.aleman-contacto__datos a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
	transition: border-color 300ms ease;
}

.aleman-contacto__datos a:hover { border-bottom-color: var(--wp--preset--color--contrast); }

.aleman-contacto__form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 34rem;
}

.aleman-contacto__form label { display: block; margin-bottom: 0.5rem; }

.aleman-contacto__form input,
.aleman-contacto__form textarea {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	padding-bottom: 0.5rem;
	font-family: inherit;
	border-radius: 0;
	transition: border-color 300ms ease;
}

.aleman-contacto__form input:focus,
.aleman-contacto__form textarea:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--contrast);
}

.aleman-contacto__form textarea { resize: vertical; }
.aleman-contacto__form button { align-self: flex-start; cursor: pointer; }
.aleman-contacto__aviso { color: var(--wp--preset--color--neutral-400); }

/* ============================================================
   Footer
   ============================================================ */

.aleman-footer {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 5rem var(--aleman-gutter) 2rem;
	overflow: hidden;
}

.aleman-footer__top {
	display: grid;
	gap: 3rem;
}

@media (min-width: 768px) {
	.aleman-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}

/* El logotipo es negro sobre transparente y el footer es tinta: se invierte a
   blanco, igual que el del header sobre superficies oscuras. */
.aleman-footer__logo {
	display: block;
	width: 9rem;
	height: auto;
	margin-bottom: 1.5rem;
	filter: invert(1);
	user-select: none;
}

.aleman-footer__lema { max-width: 32ch; }

.aleman-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
}

@media (min-width: 640px) {
	.aleman-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sobre la tinta del footer el gris tiene que ser más CLARO, no más oscuro:
   neutral-400 cumple AA sobre blanco y crema, neutral-300 sobre oscuro. */
.aleman-footer__head {
	color: var(--wp--preset--color--neutral-300);
	margin-bottom: 1rem;
}

.aleman-footer__cols ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.aleman-footer__cols a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-size: 15px;
	transition: opacity 300ms ease;
}

.aleman-footer__cols a:hover { opacity: 0.6; }

/* El nombre en grande, ya no como imagen sino en Bebas: ocupa el mismo ancho
   que ocupaba el logotipo (78% de la caja, tope 52rem) porque el cuerpo sigue
   al viewport y la caja recorta lo que sobre. */
.aleman-footer__word {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(4.5rem, 23vw, 24rem);
	line-height: 0.82;
	letter-spacing: 0.02em;
	font-weight: 400;
	text-align: center;
	margin: 4rem 0 0;
	user-select: none;
}

.aleman-footer__legal {
	margin-top: 2rem;
	color: var(--wp--preset--color--neutral-300);
	text-align: center;
}

/* ============================================================
   WooCommerce
   ============================================================ */

.aleman-woo {
	padding: calc(var(--aleman-marquee-h) + var(--aleman-header-h) + 2rem) var(--aleman-gutter) 5rem;
	max-width: var(--wp--style--global--wide-size, 90rem);
	margin-inline: auto;
}

.aleman-woo .woocommerce-products-header__title,
.aleman-woo .product_title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(40px, 6vw, 84px);
	line-height: 0.9;
	letter-spacing: var(--wp--custom--tracking--display, -2px);
	font-weight: 400;
}

.aleman-woo ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	letter-spacing: var(--wp--custom--tracking--label, 0.12em);
	text-transform: uppercase;
}

.aleman-woo ul.products li.product .price {
	color: var(--wp--preset--color--neutral-400);
	font-size: 12px;
	letter-spacing: var(--wp--custom--tracking--label, 0.12em);
}

.aleman-woo .button,
.aleman-woo button.button,
.aleman-woo a.button,
.aleman-woo .woocommerce-button {
	border-radius: var(--wp--custom--radius--pill, 999px);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	letter-spacing: var(--wp--custom--tracking--label, 0.12em);
	text-transform: uppercase;
	padding: 0.85rem 1.75rem;
	transition: opacity 400ms ease;
}

.aleman-woo .button:hover,
.aleman-woo a.button:hover,
.aleman-woo button.button:hover { opacity: 0.8; }

.aleman-woo .onsale {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--pill, 999px);
}

/* Gotcha del runbook: `.woocommerce-page img { height:auto }` le gana a una
   sola clase. Subimos especificidad para el logotipo del header, sin fijar
   `max-height` para no pisar el parallax de arriba. */
.woocommerce-page .aleman-pinned .aleman-logo,
.woocommerce .aleman-pinned .aleman-logo {
	width: auto;
	height: auto;
}

/* Las páginas Woo no llevan hero: dejar aire bajo la barra fija. */
.woocommerce-page .aleman-header,
.woocommerce .aleman-header { color: var(--wp--preset--color--contrast); }

/* ============================================================
   Catálogo (shop) — plantilla propia, no la de Woo
   ============================================================ */

.aleman-shop__bajada { margin-top: 1rem; max-width: 46ch; }

.aleman-shop__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 2.5rem;
	padding-inline: var(--aleman-gutter);
}

.aleman-shop__filtro {
	color: var(--wp--preset--color--neutral-400);
	text-decoration: none;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid transparent;
	transition: color 300ms ease, border-color 300ms ease;
}

.aleman-shop__filtro:hover { color: var(--wp--preset--color--contrast); }

.aleman-shop__filtro.is-activo {
	color: var(--wp--preset--color--contrast);
	border-bottom-color: var(--wp--preset--color--contrast);
}

.aleman-shop__grid {
	margin-top: 3rem;
}

.aleman-shop__paginacion {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 4rem;
}

.aleman-shop__paginacion a,
.aleman-shop__paginacion span {
	color: var(--wp--preset--color--neutral-400);
	text-decoration: none;
	padding: 0.35rem 0.6rem;
	border: 1px solid transparent;
}

.aleman-shop__paginacion .current {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--neutral-100);
}

.aleman-shop__vacio,
.aleman-wishlist-pag__vacia {
	margin-top: 3rem;
	padding-inline: var(--aleman-gutter);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
}

/* ============================================================
   Ficha de producto
   ============================================================ */

.aleman-ficha__miga {
	padding-inline: var(--aleman-gutter);
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.aleman-ficha__miga a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.aleman-ficha__miga a:hover { text-decoration: underline; }

.aleman-ficha__cols {
	display: grid;
	gap: 2.5rem;
	margin-top: 2rem;
	padding-inline: var(--aleman-gutter);
}

/*
 * Proporciones medidas sobre la referencia (1512 CSS): foto 620px (41% del
 * viewport), columna de compra 448px, separación 84px y márgenes ~10%. De ahí
 * salen la razón 1 : 0.72 y los porcentajes de abajo.
 */
@media (min-width: 900px) {
	.aleman-ficha__cols {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
		gap: 5.5%;
		padding-inline: 10%;
		/* `stretch` (el valor por defecto) es lo que hace posible el sticky: la
		   columna de compra ocupa el alto de la galería y su hijo pegajoso
		   tiene por dónde recorrer. Con `start` medía lo mismo que su
		   contenido y se iba con el scroll. */
		align-items: stretch;
	}
}

/* ---- Galería ---- */

.aleman-ficha__galeria { display: grid; gap: 0.75rem; }

@media (min-width: 768px) {
	/* 2.5rem de raíl = 30px de miniatura + 8px de aire + 2px de barrita, para
	   que la miniatura mida los 30px de la referencia. */
	.aleman-ficha__galeria { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1.25rem; }
}

/* Raíl de miniaturas + barrita: se queda a la vista mientras se recorren las
   fotos. */
.aleman-ficha__rail {
	display: none;
	position: sticky;
	top: calc(var(--aleman-marquee-h) + var(--aleman-header-h) + 1rem);
	align-self: start;
	gap: 0.5rem;
}

@media (min-width: 768px) {
	.aleman-ficha__rail { display: grid; grid-template-columns: 1fr auto; }
}

.aleman-ficha__tira {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

/* Barrita de progreso de la galería: riel fino y pulgar que baja con el
   scroll (lo posiciona aleman.js). */
.aleman-ficha__barra {
	position: relative;
	width: 2px;
	height: 7.5rem;
	background-color: var(--wp--preset--color--neutral-100);
	align-self: start;
}

.aleman-ficha__barra-pulgar {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1.6rem;
	background-color: var(--wp--preset--color--contrast);
	transform: translateY(var(--barra, 0px));
	transition: transform 120ms linear;
}

.aleman-ficha__mini {
	display: block;
	overflow: hidden;
	opacity: 0.55;
	transition: opacity 300ms ease;
	background-color: var(--wp--preset--color--secondary);
}

.aleman-ficha__mini:hover,
.aleman-ficha__mini.is-activa { opacity: 1; }

.aleman-ficha__galeria .aleman-ficha__mini img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* Sin separación entre fotos: en la referencia se apilan al hilo. */
.aleman-ficha__fotos {
	display: grid;
	gap: 0;
}

.aleman-ficha__foto {
	margin: 0;
	background-color: var(--wp--preset--color--secondary);
	overflow: hidden;
	scroll-margin-top: calc(var(--aleman-marquee-h) + var(--aleman-header-h) + 1rem);
}

.aleman-ficha__galeria .aleman-ficha__foto img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* ---- Columna de compra ---- */

.aleman-ficha__pegajosa {
	position: sticky;
	top: calc(var(--aleman-marquee-h) + var(--aleman-header-h) + 2rem);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 30rem;
}

.aleman-ficha__titulo {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.aleman-ficha__titulo .display-lg { font-size: clamp(32px, 3.6vw, 56px); }

.aleman-ficha__wish {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.aleman-ficha__wish svg { width: 1.25rem; height: 1.25rem; fill: none; }
.aleman-ficha.is-guardada .aleman-ficha__wish svg { fill: currentColor; }

.aleman-ficha__precio {
	font-size: 1.125rem;
	margin: 0;
}

.aleman-ficha__precio del { opacity: 0.55; margin-right: 0.4rem; }
.aleman-ficha__precio ins { text-decoration: none; }

.aleman-ficha__bajada p { margin: 0; }
.aleman-ficha__bloque { display: grid; gap: 0.6rem; }

/* Botón de compra: barra sólida a todo el ancho, como la referencia. */
.aleman-ficha__add {
	width: 100%;
	border: 0;
	cursor: pointer;
	padding: 1.15rem 1.5rem;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	letter-spacing: var(--wp--custom--tracking--label, 0.12em);
	text-transform: uppercase;
	transition: opacity 300ms ease;
}

.aleman-ficha__add:hover:not(:disabled) { opacity: 0.85; }
.aleman-ficha__add:disabled { opacity: 0.45; cursor: default; }

.aleman-ficha__stock { color: var(--wp--preset--color--neutral-400); }

.aleman-ficha__notas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.aleman-ficha__notas li {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--neutral-400);
	padding: 0.7rem 1rem;
	flex: 1 1 auto;
	text-align: center;
}

/* ---- Acordeones ---- */

.aleman-acordeon { border-top: 1px solid var(--wp--preset--color--neutral-100); }

.aleman-acordeon details {
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
}

.aleman-acordeon summary {
	list-style: none;
	cursor: pointer;
	padding-block: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.aleman-acordeon summary::-webkit-details-marker { display: none; }

/* El «+» que gira a «−» al abrir, dibujado sin glifo. */
.aleman-acordeon summary::after {
	content: '';
	width: 0.75rem;
	height: 0.75rem;
	flex: 0 0 auto;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-size: 100% 1px, 1px 100%;
	background-position: center, center;
	background-repeat: no-repeat;
	transition: transform 300ms var(--aleman-ease);
}

.aleman-acordeon details[open] summary::after {
	transform: rotate(90deg);
	background-size: 100% 1px, 0 0;
}

.aleman-acordeon details > div { padding-bottom: 1.25rem; }
.aleman-acordeon details > div p { margin: 0 0 0.75rem; }
.aleman-acordeon details > div p:last-child { margin-bottom: 0; }

/* ---- Similares ---- */

.aleman-ficha__similares { margin-top: 5rem; }
.aleman-ficha__similares > .display-md { padding-inline: var(--aleman-gutter); }

/* ============================================================
   Drawer de la bolsa
   ============================================================ */

.aleman-drawer-carrito {
	position: fixed;
	inset: 0;
	z-index: 80;
	visibility: hidden;
	pointer-events: none;
}

.aleman-drawer-carrito.is-open {
	visibility: visible;
	pointer-events: auto;
}

.aleman-drawer-carrito__scrim {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--contrast);
	opacity: 0;
	transition: opacity 400ms var(--aleman-ease);
}

.aleman-drawer-carrito.is-open .aleman-drawer-carrito__scrim { opacity: 0.4; }

.aleman-drawer-carrito__panel {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(26rem, 90vw);
	background-color: var(--wp--preset--color--base);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 400ms var(--aleman-ease);
	overflow-y: auto;
}

.aleman-drawer-carrito.is-open .aleman-drawer-carrito__panel { transform: none; }

.aleman-drawer-carrito__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem var(--aleman-gutter);
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
}

.aleman-drawer-carrito__cuerpo {
	padding: 1.5rem var(--aleman-gutter);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	flex: 1;
}

.aleman-bolsa {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.aleman-bolsa__item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}

.aleman-bolsa__media { display: block; background-color: var(--wp--preset--color--secondary); }

.aleman-drawer-carrito .aleman-bolsa__media img {
	width: 100%;
	height: auto;
	display: block;
}

.aleman-bolsa__datos {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.aleman-bolsa__total,
.aleman-bolsa__acciones {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
}

.aleman-bolsa__total {
	border-top: 1px solid var(--wp--preset--color--neutral-100);
	padding-top: 1rem;
}

.aleman-bolsa__acciones { flex-wrap: wrap; }

.pill-outline.is-solida {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

/* ============================================================
   Accesibilidad / movimiento reducido
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.marquee-track { animation: none; }
	.aleman-js .reveal { opacity: 1; transform: none; }
	.zoom-slow:hover img { transform: none; }
	.aleman-pinned { transform: none; }
	*, *::before, *::after { transition-duration: 0.01ms !important; }
}

:where(.site-main, .aleman-woo, .aleman-footer) a:focus-visible,
.aleman-iconbtn:focus-visible,
.aleman-identidad__tabs button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}