/* ===================================================================================
   UEB Tienda — layout: barra superior, cabecera, navegación, secciones, pie
   ===================================================================================

   REDISEÑO 2026-08 — qué ha cambiado y qué NO.

   CAMBIA: la capa visual entera (paleta clara, esquinas a 12px, Archivo, alturas y
   espaciados del mockup "Náutica clara").

   NO CAMBIA: ni un solo nombre de clase ni ningún gancho de estado. El marcado del tema
   ya era más correcto que el de los mockups y depende de él tanto assets/js/ueb-chrome.js
   como los lectores de pantalla:

     · `.megamenu[hidden]` + `.mm-trigger[aria-expanded]` en vez del `:hover` puro del
       mockup, que dejaba el megamenú inalcanzable con teclado y sin cierre con Escape.
     · `.nav-toggle[aria-expanded]` y `.mobnav[data-open]` en vez de clases `.on`: así el
       CSS y la tecnología asistiva no pueden discrepar sobre si algo está abierto.
     · `.cart-count[data-count]`, que refresca WooCommerce por fragmento AJAX.
     · `html.ueb-locked`, que pone y quita el gestor de capas con contador de anidamiento.

   Reescribir esas clases para parecerse a los mockups habría sido perder accesibilidad a
   cambio de nada. Donde el mockup aporta (métrica, color, tipografía) se sigue al pie de
   la letra; donde el tema ya estaba mejor, se conserva.
   =================================================================================== */

/* ==================================================================================
   BARRA SUPERIOR
   ================================================================================== */
.topbar {
	background: var(--hdr-bg);
	border-bottom: 1px solid var(--hdr-line);
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hdr-fg-dim);
}

.topbar .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--topbar-h);
	gap: 24px;
}

.topbar .t-left,
.topbar .t-right {
	display: flex;
	align-items: center;
	gap: 22px;
}

.topbar .t-right {
	gap: 20px;
}

.topbar a:hover {
	color: var(--hdr-fg);
}

/* El rombo ◆ del mockup era un glifo fuera del subset latin. Aquí es un cuadrado de 5px
   girado 45°: mismo resultado óptico, sin depender de ninguna fuente. */
.topbar .dot {
	display: inline-block;
	width: 5px;
	height: 5px;
	background: var(--accent-strong);
	transform: rotate(45deg);
	margin-right: 4px;
	vertical-align: middle;
}

/* El reloj es la única parte que cambia sola: reservarle ancho evita que la barra dé un
   salto al pasar de "--:--:--" al valor real. `tabular-nums` impide que baile con cada
   segundo. */
.topbar .clock {
	font-variant-numeric: tabular-nums;
	min-width: 14ch;
	text-align: right;
}

/* ==================================================================================
   CABECERA
   ==================================================================================
   Sobre fondo claro la cabecera es opaca, no translúcida con desenfoque como en el diseño
   oscuro anterior: el blanco al 82% sobre contenido blanco no separa nada y solo cuesta
   una capa de composición. El filete inferior hace todo el trabajo. */
.hdr {
	position: sticky;
	top: 0;
	z-index: var(--z-hdr);
	background: var(--hdr-bg);
	border-bottom: 1px solid var(--hdr-line);
}

/* La barra de administración de WordPress es `position:fixed; top:0` con un z-index muy por
   encima del de la cabecera (99999 contra 60). Sin esto, al hacer scroll la cabecera sticky
   se clava en el mismo `top:0` que la barra y queda con sus primeros 32px (46px en móvil)
   tapados por ella — y el megamenú, que cuelga de `top:100%` de esta misma cabecera, hereda
   el desajuste. Solo se nota con sesión iniciada, que es justo cuando hay que revisar la
   tienda (está en "en construcción" para cualquiera sin sesión). */
body.admin-bar .hdr {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .hdr {
		top: 46px;
	}
}

/* Por debajo de 600px WordPress pasa la barra a `position:absolute`, o sea que se va con el
   scroll y deja de tapar nada: la cabecera vuelve a pegarse arriba del todo. */
@media screen and (max-width: 600px) {
	body.admin-bar .hdr {
		top: 0;
	}
}

/* Logo del cliente en la barra de administración del front (con sesión iniciada), en vez del
   logotipo de WordPress. Réplica exacta de la regla de assets/css/ueb-admin.css (agrandada de
   los 15x20 del núcleo a 28x28: a ese tamaño el escudo con corona y banda salía ilegible, un
   borrón oscuro con una raya rojiza) — esa hoja solo se encola en wp-admin (ver inc/admin.php,
   ueb_admin_enqueue()), así que el front necesita su propia copia — no hay una capa de CSS
   compartida entre los dos lados del admin. */
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon {
	width: 28px !important;
	height: 28px !important;
	margin: 2px 4px 2px 0 !important;
	padding: 0 !important;
	background-image: url(../img/ueb-logo-header.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon::before {
	content: '' !important;
}

/* `> .wrap` y NO `.wrap` a secas: el panel del megamenú vive DENTRO de esta misma cabecera y
   lleva su propio `.wrap` interior, así que un selector descendiente le caía encima y le
   imponía `display:flex`, `align-items:center` y `height:80px`. El efecto era el que se veía:
   la caja blanca del megamenú se quedaba en 82px de alto, su contenido se maquetaba como una
   fila flex centrada y se derramaba por arriba y por abajo SIN fondo detrás — o sea,
   superpuesto al menú y aparentemente transparente. La cabecera solo quiere estilar su
   propio contenedor, que es hijo directo. */
.hdr > .wrap {
	display: flex;
	align-items: center;
	gap: 30px;
	height: var(--hdr-h);
}

/* --- Marca ------------------------------------------------------------------------- */
.brand {
	display: flex;
	align-items: center;
	gap: 11px;
	flex-shrink: 0;
}

.brand img {
	height: 40px;
	width: auto;
}

.brand .bt {
	line-height: 1;
}

.brand .bt b {
	display: block;
	font-family: var(--font);
	font-weight: 800;
	font-size: 16.5px;
	letter-spacing: .01em;
	color: var(--hdr-fg);
}

.brand .bt span {
	display: block;
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: .18em;
	color: var(--accent-strong);
	text-transform: uppercase;
	margin-top: 3px;
}

.brand:hover {
	color: inherit;
}

/* --- Navegación principal ---------------------------------------------------------- */
.nav {
	display: flex;
	gap: 28px;
	align-items: center;
	margin-left: 6px;
}

.nav a {
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--hdr-fg-dim);
	position: relative;
	padding: 6px 0;
	white-space: nowrap;
}

.nav a:hover,
.nav .current-menu-item > a,
.nav .current-menu-parent > a,
.nav .current-menu-ancestor > a,
.nav a[aria-current] {
	color: var(--hdr-fg);
}

/* El subrayado del activo: 2px en menta, con las puntas redondeadas. */
.nav .current-menu-item > a::after,
.nav .current-menu-parent > a::after,
.nav .current-menu-ancestor > a::after,
.nav a[aria-current]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 2px;
	border-radius: 2px;
	background: var(--nav-accent);
}

/* El menú sale de wp_nav_menu, así que es <ul><li>: se aplana para que quede igual que
   los <a> sueltos del mockup. */
.nav ul {
	display: flex;
	gap: 28px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav li {
	position: relative;
}

/* Indicador de submenú. En el mockup era un glifo ▾, fuera del subset latin; aquí es un
   chevron SVG en máscara, que hereda currentColor. */
.nav .menu-item-has-children > a::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-left: 5px;
	vertical-align: baseline;
	background: currentColor;
	opacity: .5;
	-webkit-mask: var(--ueb-chevron) center / contain no-repeat;
	mask: var(--ueb-chevron) center / contain no-repeat;
}

.nav .menu-item-has-children:hover > a::before {
	opacity: 1;
}

:root {
	--ueb-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 7 8 7-8z' fill='%23000'/%3E%3C/svg%3E");
}

/* --- Submenú simple ---------------------------------------------------------------
   El desplegable de un ítem de menú con hijos. Distinto del megamenú (abajo): aquel es el
   panel ancho de un único enlace. */
.nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -14px;
	min-width: 220px;
	flex-direction: column;
	gap: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-menu);
	padding: 8px;
	margin-top: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
}

/* Un ítem marcado como megamenú SIEMPRE tiene hijos (los necesita para el rail, ver
   inc/megamenu.php), así que wp_nav_menu() pinta también su <ul class="sub-menu"> normal
   con esos mismos hijos. Sin esto, al pasar el ratón se abrían los dos paneles a la vez: el
   submenú estrecho (éste, por :hover puro) y el megamenú ancho (por JS, debajo de toda la
   cabecera) — superpuestos, y el submenú transparentándose encima mientras hace su
   transición de opacidad. El megamenú es siempre el que manda para estos ítems. */
.nav a.mm-trigger ~ .sub-menu {
	display: none;
}

.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav .sub-menu li {
	width: 100%;
}

.nav .sub-menu a {
	display: block;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-dim);
	white-space: nowrap;
}

.nav .sub-menu a:hover {
	color: var(--ink);
	background: var(--bg);
}

.nav .sub-menu .current-menu-item > a::after {
	display: none;
}

/* ==================================================================================
   MEGAMENÚ — variante 1b: rail de categorías + productos destacados
   ==================================================================================
   El panel cuelga de la cabecera (`position:absolute; top:100%`), no con un `top:114px`
   fijo como el mockup: así no hay que recalcular nada cuando aparece la barra de
   administración de WordPress ni si cambia la altura del cromo.

   Los seis paneles vienen precargados en el HTML (ver inc/woocommerce/megamenu.php) para
   que recorrer el rail sea instantáneo, sin AJAX. */
.mm-trigger {
	position: relative;
}

.mm-trigger::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-left: 5px;
	vertical-align: baseline;
	background: currentColor;
	opacity: .5;
	-webkit-mask: var(--ueb-chevron) center / contain no-repeat;
	mask: var(--ueb-chevron) center / contain no-repeat;
}

.mm-trigger[aria-expanded="true"]::before {
	opacity: 1;
}

.megamenu {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--surface);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-mega);
	z-index: var(--z-mega);
}

.megamenu[hidden] {
	display: none;
}

.megamenu .wrap {
	padding-top: 36px;
	padding-bottom: 36px;
}

/* Rail de 260px + panel. El filete divisorio va en el rail, así que queda a 44px del
   contenido y no centrado en el hueco: es del diseño. */
.mmB {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 44px;
}

.mmB .rail {
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--line);
}

.mmB .rail a {
	/* El 0 de la izquierda pegaba el texto al propio borde: sin hueco entre los dos, el filete
	   verde de activo/hover sale prácticamente encima de la letra en vez de al margen del
	   raíl. Con relleno a los dos lados, además, TODOS los items —activos o no— quedan
	   alineados igual, no solo los que tienen el borde encendido. */
	position: relative;
	padding: 13px 20px 13px 14px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink-dim);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: baseline;
	transition: color var(--fast) var(--ease);
}

/* El filete de activo/hover ya NO es `border-left`: ese siempre estira a la altura entera de
   la fila. Con `::before` de alto fijo y centrado se queda corto y suelto, no una franja de
   pared a pared. */
.mmB .rail a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 2px;
	height: 18px;
	transform: translateY(-50%);
	background: transparent;
	transition: background-color var(--fast) var(--ease);
}

.mmB .rail a:hover::before,
.mmB .rail a:focus-visible::before,
.mmB .rail a.on::before {
	background: var(--accent-strong);
}

.mmB .rail a:hover,
.mmB .rail a:focus-visible,
.mmB .rail a.on {
	color: var(--ink);
}

/* Contador de productos de la categoría. */
.mmB .rail a span {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-mute);
	flex-shrink: 0;
}

/* Solo se muestra el panel de la categoría activa, y el estado va por el atributo `hidden`
   — el mismo que mueve ueb-chrome.js (`p.hidden = …`) y el que leen los lectores de pantalla.
   Antes esto era `.mm-panel{display:none}` + `.mm-panel.on{display:block}`, y como el PHP
   marca el estado con `hidden` y nunca pone `.on`, el panel de la primera categoría salía
   oculto también: el megamenú se abría vacío hasta pasar el ratón por el rail.

   La declaración es necesaria aunque el navegador ya dé `display:none` a `[hidden]` por su
   hoja de agente de usuario: cualquier `display` en una regla de autor gana a `[hidden]`, y
   aquí conviven con `.mmB` y sus rejillas. */
.mm-panel[hidden] {
	display: none;
}

/* Fundido de entrada al cambiar de categoría en el rail: solo de entrada, nunca de salida.
   Un cruce real (el saliente desvaneciéndose mientras entra el nuevo) exigiría tener los dos
   paneles visibles a la vez, y aquí van en flujo normal dentro de `.mm-panels` — dos visibles
   a la vez apilaría uno debajo del otro un instante. El saliente desaparece al momento (ya lo
   hacía) y solo el entrante gana un fundido corto; se nota mucho menos brusco sin ese riesgo de
   layout. Arranca en `.is-entering` (opacity:0) y ueb-chrome.js quita la clase tras forzar
   un reflow, para que el navegador sí registre el estado de partida antes de animar. */
.mm-panel {
	transition: opacity var(--med) var(--ease);
}

.mm-panel.is-entering {
	opacity: 0;
}

/* Categoría con productos pero cuya consulta no devuelve nada publicado (borradores). */
.mm-none {
	grid-column: 1 / -1;
	color: var(--ink-dim);
	font-size: 13.5px;
}

/* Los enlaces del panel: los "nietos" que el administrador pone bajo cada elemento del rail en
   Apariencia → Menús (ver inc/megamenu.php). Es la parte editable del panel; los productos
   destacados van debajo, en `.feat-grid`.

   Dos columnas y no una: el diseño reparte los enlaces de cada categoría en cuatro columnas
   (mockup "Home A":412-415), pero ahí el panel ENTERO era la lista. En la variante 1b el panel
   comparte sitio con las tarjetas de producto, así que caben dos. */
.mm-links {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px 30px;
}

.mm-links a {
	font-size: 14px;
	color: var(--ink-dim);
}

.mm-links a:hover {
	color: var(--ink);
}

/* Sin destacados debajo, la lista no necesita separación inferior. */
.mm-panel:not(:has(.feat-grid)) .mm-links {
	margin-bottom: 0;
}

.mmB .feat-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	margin-bottom: 20px;
}

.mmB .feat-head h4 {
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
	margin: 0;
}

.mmB .feat-head a {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent-strong);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mmB .feat-head a svg {
	width: 13px;
	height: 13px;
}

.mmB .feat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	min-width: 0;
}

/* Es literalmente la misma `.pcard` que el catálogo (components.css) — mismas clases, mismo
   CSS, mismo botón de compra —, no un componente `.fcard` aparte que replicaba el estilo a
   mano y se desincronizaba en cuanto tocaras uno de los dos. Aquí solo se ajusta la densidad:
   este rail mide ~206px de ancho por tarjeta, bastante menos que la rejilla del catálogo, así
   que el cuerpo y la tipografía se encogen; el resto (fondo, borde, radio, elevación al pasar
   el ratón, el botón `.pc-add`) es 100% heredado sin tocar nada aquí. */
.mmB .pcard {
	min-width: 0;
}

.mmB .pc-body {
	padding: 10px 12px 12px;
	gap: 2px;
}

.mmB .pc-brand {
	font-size: 10px;
}

.mmB .pc-name {
	font-size: 13.5px;
}

.mmB .pc-price {
	font-size: 13px;
}

.mmB .pc-add {
	width: 30px;
	height: 30px;
}

.mmB .pc-add svg {
	width: 15px;
	height: 15px;
}

/* ==================================================================================
   ACCIONES DE CABECERA
   ================================================================================== */
.hdr .actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.iconbtn {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: none;
	border-radius: var(--radius-sm);
	color: var(--hdr-fg-dim);
	background: none;
	position: relative;
	padding: 0;
	transition: var(--fast);
	flex-shrink: 0;
}

.iconbtn:hover {
	color: var(--hdr-fg);
	background: var(--hdr-line);
}

.iconbtn svg {
	width: 22px;
	height: 22px;
}

/* Contador del carrito. `min-width` + padding para que aguante de 1 a 3 cifras sin
   deformarse; a partir de 99 el fragmento escribe "99+". */
.cart-count {
	position: absolute;
	top: 1px;
	right: 1px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border-radius: 8px;
	background: var(--accent-strong);
	color: #fff;
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 700;
	display: grid;
	place-items: center;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Carrito vacío: se oculta el globo en lugar de mostrar un 0. */
.cart-count[data-count="0"] {
	display: none;
}

/* --- Zoom del icono al añadir ---------------------------------------------------------
   ueb-cart.js pone `.is-added` en el <a> al recibir 'added_to_cart' (evento del núcleo,
   ver ueb-cart.js) y la quita sola al terminar (evento `animationend`, con
   `animation-fill-mode` a su valor por defecto no hace falta tocar nada más). Amplía y
   devuelve el SVG, no el <a>: así el `::after`/halo de :hover del propio .iconbtn no se ve
   afectado. */
@keyframes ueb-cart-spin {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

.iconbtn[data-ueb-cart-open].is-added svg {
	animation: ueb-cart-spin .4s var(--ease);
}

/* --- Popover "añadido a la cesta" ----------------------------------------------------
   Mismo patrón visual que `.acc-menu` (superficie, filete, --shadow-menu) pero abierto por
   JS con `[data-open]` en vez de por :hover — no es un desplegable de navegación, es un
   aviso transitorio tras una acción. `.cart-trigger` es el envoltorio con position:relative,
   igual que `.acc-trigger` para el mismo problema (un <a> no puede contener otro <a>). */
.cart-trigger {
	position: relative;
}

.cart-added {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 12px;
	width: 300px;
	max-width: calc(100vw - 32px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-menu);
	padding: 16px;
	z-index: var(--z-accmenu);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
}

.cart-added[data-open="true"] {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cart-added-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--accent-strong);
	margin-bottom: 12px;
}

.cart-added-head svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.cart-added-item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.cart-added-thumb {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	background-color: var(--media);
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}

.cart-added-name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cart-added-actions {
	display: flex;
	gap: 8px;
}

.cart-added-actions .btn {
	flex: 1;
	padding: 10px 12px;
	font-size: 12.5px;
}

/* --- Desplegable de cuenta ----------------------------------------------------------
   El icono de usuario sigue siendo un enlace normal a "Mi cuenta" (el clic navega igual que
   siempre); esto solo cuelga un mini panel al pasar el ratón o el foco por encima, igual que
   `.nav .sub-menu` — mismo mecanismo de :hover/:focus-within, sin JS. `.acc-trigger` es el
   envoltorio con position:relative: no puede ser el propio `.iconbtn` porque el desplegable
   lleva varios <a> y un <a> no puede contener otro <a>. */
.acc-trigger {
	position: relative;
}

.acc-menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	min-width: 220px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-menu);
	padding: 8px;
	z-index: var(--z-accmenu);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
}

.acc-trigger:hover > .acc-menu,
.acc-trigger:focus-within > .acc-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

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

.acc-menu li + li {
	border-top: 1px solid var(--line);
}

.acc-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-dim);
	white-space: nowrap;
}

.acc-menu a svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.acc-menu a:hover {
	color: var(--ink);
	background: var(--bg);
}

/* Mismo criterio que `.acc-nav` (el rail de la propia página de cuenta, en account.css):
   el activo en menta, "Cerrar sesión" en rojo porque es la única entrada que no lleva a
   ninguna parte DENTRO de la cuenta. */
.acc-menu a.on {
	color: var(--accent-strong);
	background: var(--accent-soft);
}

.acc-menu a.out {
	color: var(--danger);
}

.acc-menu a.out:hover {
	background: var(--danger-soft);
}

/* --- Selector de idioma ------------------------------------------------------------ */
.lang {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--hdr-line);
	border-radius: var(--radius-sm);
	overflow: hidden;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 500;
	margin-left: 4px;
}

.lang a,
.lang span {
	padding: 9px 11px;
	background: none;
	border: none;
	color: var(--hdr-fg-dim);
	letter-spacing: .06em;
	line-height: 1;
	display: flex;
	align-items: center;
}

.lang a:hover {
	color: var(--hdr-fg);
}

.lang .on,
.lang [aria-current="true"] {
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 700;
}

.lang .on:hover,
.lang [aria-current="true"]:hover {
	color: var(--accent-ink);
}

/* --- CTA de cabecera ---------------------------------------------------------------
   El "Presupuesto" del diseño: botón primario compacto. */
.hdr .req {
	margin-left: 6px;
	padding: 10px 18px;
	display: inline-flex;
	align-items: center;
	font-family: var(--font);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	background: var(--ink);
	color: #fff;
	border-radius: var(--radius);
	border: 1.5px solid var(--ink);
	white-space: nowrap;
	transition: var(--fast);
}

.hdr .req:hover {
	background: var(--surface);
	color: var(--ink);
}

/* --- Hamburguesa ------------------------------------------------------------------
   No existe en los mockups de interior: solo había `.nav{display:none}` por debajo del
   punto de corte, o sea que la tienda se quedaba literalmente sin navegación. */
.nav-toggle {
	display: none;
	width: 38px;
	height: 38px;
	border: none;
	border-radius: var(--radius-sm);
	background: none;
	padding: 0;
	position: relative;
	color: var(--hdr-fg);
	flex-shrink: 0;
}

.nav-toggle:hover {
	background: var(--hdr-line);
}

.nav-toggle span {
	position: absolute;
	left: 10px;
	width: 18px;
	height: 1.6px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--med), opacity var(--fast), top var(--med);
}

.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 18.2px; }
.nav-toggle span:nth-child(3) { top: 23.4px; }

/* Aspa cuando está abierto: el estado lo lleva aria-expanded, no una clase, para que el
   CSS y los lectores de pantalla no puedan discrepar. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
	top: 18.2px;
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
	top: 18.2px;
	transform: rotate(-45deg);
}

/* ==================================================================================
   MENÚ MÓVIL (panel a pantalla completa)
   ================================================================================== */
.mobnav {
	position: fixed;
	inset: 0;
	z-index: var(--z-mobnav);
	background: var(--surface);
	padding: calc(var(--hdr-h) + var(--topbar-h) + 24px) var(--pad) 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--med), visibility var(--med);
}

.mobnav[data-open="true"] {
	opacity: 1;
	visibility: visible;
}

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

.mobnav > ul > li {
	border-bottom: 1px solid var(--line);
}

.mobnav a {
	display: block;
	padding: 15px 0;
	font-family: var(--font);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ink);
}

.mobnav a:hover,
.mobnav .current-menu-item > a {
	color: var(--accent-strong);
}

/* Submenú como acordeón. El <button> lo inyecta ueb-chrome.js junto al enlace padre, así
   que el padre sigue siendo un enlace navegable y el desplegable es un control aparte:
   en móvil, un padre que solo abre el submenú y no lleva a su propia página desconcierta. */
.mobnav .sub-menu {
	display: none;
	padding: 0 0 12px 16px;
	border-left: 1px solid var(--line-2);
	margin-bottom: 8px;
}

.mobnav li[data-expanded="true"] > .sub-menu {
	display: block;
}

.mobnav .sub-menu a {
	padding: 11px 0;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-dim);
}

.mobnav .submenu-toggle {
	position: absolute;
	right: 0;
	top: 8px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	background: none;
	border: 1px solid var(--line-2);
	border-radius: var(--radius-sm);
	color: var(--ink-dim);
	padding: 0;
}

.mobnav .submenu-toggle svg {
	width: 14px;
	height: 14px;
	transition: transform var(--fast);
}

.mobnav li[data-expanded="true"] > .submenu-toggle svg {
	transform: rotate(180deg);
}

.mobnav .menu-item-has-children {
	position: relative;
}

/* Bloque inferior: idioma + CTA + contacto, lo que en escritorio vive en .actions. */
.mobnav-foot {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mobnav-foot .lang {
	margin-left: 0;
	align-self: flex-start;
}

.mobnav-meta {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-mute);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Bloqueo de scroll del documento mientras hay una capa abierta. Lo pone y lo quita el
   gestor de capas de ueb-chrome.js, que lleva contador de anidamiento. */
html.ueb-locked,
body.ueb-locked {
	overflow: hidden;
}

/* ==================================================================================
   SECCIONES
   ==================================================================================
   Solo el eje vertical, nunca el shorthand: las plantillas aplican `wrap sec` en el mismo
   elemento, y `padding: X 0` fijaría padding-left/right a 0 pisando el margen lateral de
   .wrap (misma especificidad, y layout.css carga después de base.css). */
.sec {
	padding-top: 26px;
	padding-bottom: 26px;
}

.sec-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 30px;
}

/* El icono decorativo junto al titular, que el rediseño añade en cada sección de portada. */
.sec-head .sec-title {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.sec-head .sec-title > svg {
	width: 36px;
	height: 36px;
	color: var(--accent-strong);
	flex-shrink: 0;
}

.sec-head h2 {
	font-size: 36px;
	letter-spacing: -.01em;
	color: var(--ink);
}

/* `.sec-title` (la fila icono + titular) también cuenta como "el titular" para este margen:
   ueb_sec_head() envuelve el <h2> en ella cuando la sección lleva icono. */
.sec-head .eyebrow + h2,
.sec-head .eyebrow + .sec-title {
	margin-top: 18px;
}

/* El <h2> ya lleva su margen desde .sec-title; anularlo evita que se sumen los dos. */
.sec-head .sec-title h2 {
	margin-top: 0;
}

.sec-head p {
	color: var(--ink-dim);
	max-width: 46ch;
	font-size: 15px;
	margin-top: 14px;
}

/* Agrupa el enlace "Ver todos →" con las flechas del carrusel, que normalmente van juntos a
   la derecha de la cabecera de sección. Sin acotar a `.sec-head`: "Equipo destacado" reutiliza
   esta misma agrupación fuera de la cabecera, a la altura de los chips (ver `.filters-row` y
   featured.php). */
.sec-aside {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

/* Sin acotar a `.sec-head`: "Equipo destacado" reutiliza este mismo enlace fuera de la
   cabecera, agrupado con las flechas del carrusel a la altura de los chips (ver `.sec-aside`
   más arriba y featured.php). woocommerce.css:152 documenta el motivo de por qué NO se usaba
   esta clase fuera de `.sec-head` — ya no aplica, esa nota queda obsoleta. */
.link {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent-strong);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.link:hover {
	color: var(--ink);
}

.link svg {
	width: 13px;
	height: 13px;
}

/* --- Banda de cifras --------------------------------------------------------------- */
/* El filete va en `::before`, a sangre, y NO en `border-top` del propio `.stats`: éste
   vive dentro de `.hero .wrap`, que tiene el padding lateral de --pad, así que un
   border-top normal se queda corto contra ese padding en vez de llegar al borde físico del
   bloque — que es como se lee el resto de filetes a sangre del sitio (`.usp`, por ejemplo).
   `position:relative` en `.stats` es lo que ancla el `::before` a SU caja y no a la de
   `.wrap`. */
.stats {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 40px;
	padding-top: 22px;
}

.stats::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(-1 * var(--pad));
	right: calc(-1 * var(--pad));
	border-top: 1px solid var(--line);
}

.stats div + div {
	border-left: 1px solid var(--line);
	padding-left: 20px;
}

.stats b {
	display: block;
	font-family: var(--mono);
	font-size: 25px;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.stats span {
	font-size: 12px;
	color: var(--ink-mute);
	margin-top: 4px;
	display: block;
}

/* ==================================================================================
   PIE
   ================================================================================== */
.foot {
	background: var(--foot-bg);
	color: var(--foot-fg);
	padding: 42px 0 22px;
}

.foot-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 32px;
}

/* Nota de fidelidad: el mock de Mi cuenta y el de producto ponen este h5 a 9.5px con .6 de
   opacidad, y el de la Home a 11.5px con .7. Se toma el de la Home, que es el diseño más
   reciente y el único que muestra el pie completo — a 9.5px una monoespaciada en
   versalitas queda por debajo del mínimo legible. */
.foot h5 {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hdr-fg);
	opacity: .7;
	margin: 0 0 13px;
	font-weight: 600;
}

.foot ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.foot ul a {
	font-size: 12.5px;
	opacity: .85;
}

.foot ul a:hover {
	opacity: 1;
}

/* Los submenús no se anidan visualmente en el pie: se aplanan como un nivel más de la
   misma lista, porque una columna de pie con jerarquía no aporta nada. */
.foot .sub-menu {
	margin-top: 8px;
	gap: 8px;
	padding-left: 14px;
	border-left: 1px solid var(--line);
}

.foot .f-brand img {
	height: 30px;
	width: auto;
}

.foot .f-brand .f-lockup {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font);
	font-weight: 800;
	font-size: 16.5px;
	color: var(--hdr-fg);
	margin-bottom: 12px;
}

.foot .f-brand .f-lockup span {
	color: var(--accent-strong);
}

.foot .f-brand p {
	font-size: 12px;
	line-height: 1.7;
	max-width: 32ch;
	opacity: .85;
}

.foot-bot {
	margin-top: 30px;
	padding-top: 18px;
	border-top: 1px solid var(--hdr-line);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .7;
	flex-wrap: wrap;
}

.foot-bot .coords {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* ==================================================================================
   PUNTOS DE RUPTURA
   ==================================================================================
   El mockup cambia a móvil en 860px, pero su lienzo es de 1280px fijos y nunca prueba los
   anchos intermedios. Con las seis entradas del nav a 13.5px + 28px de hueco (~620px), la
   marca (~200px) y las acciones (~250px), la cabecera revienta bastante antes de 860. Por
   eso el cambio a hamburguesa se mantiene en 1080px, como ya estaba. */

@media (max-width: 1080px) {
	.nav {
		display: none;
	}

	.nav-toggle {
		display: block;
	}

	.megamenu {
		display: none !important;
	}

	.foot-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 860px) {
	.topbar {
		font-size: 9px;
	}

	.hdr > .wrap {
		gap: 12px;
	}

	.brand img {
		height: 32px;
	}

	.brand .bt span {
		display: none;
	}

	.iconbtn {
		width: 34px;
		height: 34px;
	}

	.iconbtn svg {
		width: 19px;
		height: 19px;
	}

	.sec {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.sec-head h2 {
		font-size: 27px;
	}

	.stats {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 20px;
	}

	/* Con dos columnas el filete izquierdo solo debe separar la 2ª de la 1ª y la 4ª de la
	   3ª; con la regla general lo llevarían todas menos la primera. */
	.stats div:nth-child(odd) {
		border-left: none;
		padding-left: 0;
	}
}

@media (max-width: 720px) {
	.hdr .req,
	.topbar .t-left {
		display: none;
	}

	/* El selector de idioma se va al panel móvil, donde hay sitio para etiquetarlo. */
	.hdr .actions > .lang {
		display: none;
	}

	.foot-grid {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}

	.sec-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.foot-bot {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

@media (max-width: 480px) {
	.foot-grid {
		grid-template-columns: 1fr;
	}

	.topbar .t-right {
		gap: 14px;
	}
}