/* ==========================================================================
   HERO V2 — Hechizos de Amor (interruptor hda_hero_v2_enabled)
   Portado tal cual del banco (scratchpad/hero/hero-v2.css, aprobado —
   ver desarrollo/web/hero-v2.md e informe-diseno.md). Tokens propios en
   .hh2: NO hereda --mm-* del header (.hh2 no es descendiente de
   .hda-header, así que esas custom properties no llegan acá por
   herencia). Colores sampleados del mockup del dueño en informe-diseno.md;
   donde el mockup usa un rojo distinto al vinotinto de marca (franja y
   píldora: #780D11 medido vs #7A0D13 de marca), se usó el token de marca —
   consistencia de marca > mockup.
   ========================================================================== */

.hh2 {
	--hh2-brand: #7A0D13;      /* vinotinto de marca (no el rojo del mockup) */
	--hh2-cream: #FEF3E7;      /* crema del sitio */
	--hh2-pill-track: rgba(254, 243, 231, .43); /* medido en el mockup, ver informe */

	position: relative;
	isolation: isolate; /* el scrim/pill no se filtran fuera del border-radius */
	overflow: hidden;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	border-radius: 0 0 30px 30px;
	background: var(--hh2-brand); /* color de espera antes de que pinte la imagen */
}
/* Escritorio: tope de 60vw (relación mínima 1,67). Con 100svh a secas, en una ventana de
   1440×900 (1,6) el `cover` de una foto 16:9 recortaba ~5 % por lado y se comía el final de
   "Valentine's"; el mockup del dueño es 1435×842 (1,7). Con el tope, el recorte lateral no pasa
   del 3 %. Las mismas dos líneas van en el estilo crítico inline de hero-v2.php. */
@media (min-width: 768px) {
	.hh2 { height: min(100vh, 60vw); height: min(100svh, 60vw); }
}

/* Transición suave (hero-v2.md §9, 2026-09-23): los slides pasan de una fila
   `flex` trasladada (rebobinaba al dar la vuelta — diagnóstico 1 del §9) a
   quedar APILADOS (position:absolute) uno sobre otro; hero-v2.js anima cada
   cambio con Web Animations API sobre el slide ENTRANTE y el SALIENTE nada
   más (nunca los dos slides intermedios en un carrusel de 2, pero sí
   generaliza a N). `.hh2__track` ya no traslada nada — se conserva como
   contenedor porque la píldora y los listeners de swipe (pointerdown,
   dragstart, click fantasma) siguen enganchados a él. */
.hh2__track {
	position: relative;
	height: 100%;
}

.hh2__slide {
	position: absolute;
	inset: 0;
	height: 100%;
	z-index: 0;
	/* Recorte del salto al hacer clic (spec §9, verificado 2026-09-24): el
	   ENTRANTE arranca en translateX(d·100%) — su caja entera fuera de la
	   ventana — pero adentro la <picture> lleva SU PROPIA transform
	   individual (translate ±40%, spec §9-1). Sin overflow:hidden acá, ese
	   ±40% de la foto asoma DENTRO del viewport desde el fotograma 0 (solo
	   lo recortaba `.hh2`, y el hueco cae adentro de SU caja, no de la del
	   slide — `.hh2` no ve nada que recortar). Con overflow:hidden en el
	   propio slide, a t=0 el entrante queda entero fuera; el borde de la
	   foto dentro del slide nunca baja de x=W durante toda la animación, así
	   que no hay salto — la foto entra deslizándose desde el borde, como
	   pidió el dueño. Declarado en la regla base para que aplique también
	   sin JS (`:first-child` más abajo) y bajo `prefers-reduced-motion`
	   (ese bloque no toca `overflow`, así que hereda este valor). No recorta
	   el área de click/foco del propio slide: su caja (position:absolute;
	   inset:0) es idéntica a la de `.hh2`, así que solo recorta lo que se
	   sale de ESA caja — la `<picture>` desplazada o escalada (1.06→1),
	   nunca el propio `.hh2__slide`. */
	overflow: hidden;
	/* Oculto por defecto: solo se ve el activo (.is-active) o, durante una
	   transición, el que entra/sale (clases temporales de hero-v2.js). Antes
	   de que el JS marque `.hh2--ready` (o sin JS del todo) manda la regla de
	   más abajo, de mayor especificidad, que fuerza el PRIMER slide visible —
	   así nunca hay un instante sin ninguna foto (CLS 0, spec §9-7).
	   Corrección ronda 2 (verificación del brief-transicion.md, hallazgo
	   "regresiones/precarga"): además de `visibility:hidden` (spec §9-7, se
	   conserva tal cual), el estado oculto lleva `display:none`. Sin esto,
	   `position:absolute;inset:0` deja al slide oculto geométricamente
	   superpuesto al viewport completo, y el navegador considera "cerca del
	   viewport" a cualquier `<img loading=lazy>` ahí — es el gotcha 55/61 de
	   CLAUDE.md aplicado al propio hero. Medido antes de este cambio: la foto
	   del slide 2 (con `loading="lazy"` puesto por class-hda-hero-widget.php,
	   que el brief no permite tocar) se pedía por red ~2 segundos ANTES del
	   evento `load`, compitiendo por ancho de banda con la foto candidata a
	   LCP. `display:none` le quita el layout box: sin box, el disparador
	   nativo de `loading=lazy` no tiene nada que medir y no dispara — el
	   fetch real solo ocurre cuando `preloadOtherSlides()` (hero-v2.js, tras
	   `load`+idle) fuerza `img.loading='eager'`, que sí ignora la geometría.
	   No se tocó el HTML/PHP (brief): el atributo `loading="lazy"` del slide
	   2 sigue como está, solo se le quitó la oportunidad de dispararse
	   temprano. Verificado después del cambio: la foto se pide ~500ms
	   DESPUÉS de `load` (ver corrector-resultado-precarga.json). */
	display: none;
	visibility: hidden;
}

/* (0,4,0) a propósito: le gana tanto a la regla base de arriba (0,1,0) como
   a la de prefers-reduced-motion de más abajo (0,1,0) — sin JS (o antes de
   que corra) el primer slide se ve SIEMPRE, con o sin reduced-motion. */
.hh2:not(.hh2--ready) .hh2__slide:first-child {
	display: block;
	visibility: visible;
	opacity: 1;
}

.hh2__slide.is-active,
.hh2__slide.hh2__slide--entering,
.hh2__slide.hh2__slide--leaving {
	display: block;
	visibility: visible;
}
/* El entrante se desliza POR ENCIMA del saliente (spec §9-1). */
.hh2__slide.hh2__slide--entering { z-index: 2; }
.hh2__slide.hh2__slide--leaving { z-index: 1; }

/* will-change temporal (clase que agrega/quita hero-v2.js): solo mientras
   una animación real está en curso, nunca declarado a fuego (evita el costo
   de una capa de compositor permanente en un elemento que pasa la mayor
   parte del tiempo quieto). */
.hh2__will-change { will-change: transform; }

/* Capa de oscurecido del SALIENTE (spec §9-1): no se puede animar un
   pseudo-elemento con WAAPI directamente, así que es un <span> real que
   hero-v2.js inserta una vez por slide (última hoja del brief, paso 2). En
   reposo queda en opacity:0 — invisible e inofensiva incluso si el slide
   nunca llega a ser "saliente" en la sesión (p. ej. si el visitante nunca
   navega). */
.hh2__shade {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .35);
	opacity: 0;
	pointer-events: none;
}
/* Sin paralaje/oscurecido bajo reduced-motion (spec §9-8): la capa no se
   anima ahí, así que ni se inserta el costo de pintarla. */
@media (prefers-reduced-motion: reduce) {
	.hh2__shade { display: none; }
}

.hh2__slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* (0,3,0) a propósito: dentro de Elementor, `.elementor img { height: auto }` (0,1,1) le
   ganaba a `.hh2__img` (0,1,0) y la foto quedaba a su alto natural (219 px en un móvil de
   390, 810 en 1440) mientras la sección sí medía 100svh — medido en staging con
   CSS.getMatchedStylesForNode (gotchas 18 y 90). */
.hh2 .hh2__slide .hh2__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* Sin esto, un click-and-drag con MOUSE sobre la foto dispara el drag
	   nativo de imagen del navegador (arrastrar-para-guardar): Chrome deja
	   de emitir pointermove a mitad de gesto y el swipe con mouse queda
	   muerto sin ningún error (probado con puppeteer: el drag "funcionaba"
	   con touch pero no con mouse). El widget ya tiene su propio drag. */
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}

/* object-position en móvil: sin recorte vertical (el alto siempre entra
   entero), pero con una foto panorámica sin versión vertical el ancho de
   390px solo muestra una franja angosta del original. El widget no expone
   un control para `--hh2-mobile-pos` (no está en la lista de controles del
   brief): queda en `center` (el fallback de abajo), que es una limitación
   de contenido conocida con la foto de hoy — ver informe-porte.md. */
@media (max-width: 767px) {
	.hh2__img { object-position: var(--hh2-mobile-pos, center); }
}

/* Un solo slide: el widget no imprime la píldora (ver class-hda-hero-widget.php),
   pero hero-v2.js igual agrega esta clase en runtime por si el HTML viniera
   de otro origen (banco, versión vieja cacheada) — inofensivo si no hay
   `.hh2__pill` que ocultar. */
.hh2--single .hh2__pill { display: none; }

/* ===== Píldora de control =====
   ~415×60 y a 40px del borde inferior (hero-v2.md §3, decisión ya tomada).
   Medido en el mockup: ≈409×55, margen inferior ≈44px — confirma la
   decisión, no la contradice (ver tabla en informe-diseno.md). */
.hh2__pill {
	position: absolute;
	left: 50%;
	bottom: 40px;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 16px;
	height: 60px;
	padding-inline: 26px;
	border-radius: 999px;
	background: var(--hh2-brand);
	color: var(--hh2-cream);
}

/* Contador tipo odómetro (spec §9-5): hero-v2.js reestructura este <span>
   una sola vez al iniciar — arma adentro un visor con overflow:hidden
   (`.hh2__count-viewport`, decorativo, aria-hidden) con los dos dígitos que
   se turnan, y un segundo <span> invisible-mente-visual (`.hh2__count-sr`,
   estilo "sr-only" de siempre) que es el que de verdad lleva `aria-live` —
   así ningún lector de pantalla se topa con el DOM que va y viene de la
   animación, solo con el texto final ("2/2"). El HTML que imprime PHP
   (class-hda-hero-widget.php) no se tocó: esto lo arma el JS en runtime. */
.hh2__count {
	position: relative;
	display: inline-block;
	min-width: 30px;
	text-align: center;
	font: 500 15px/1 'Founders Grotesk Official', 'Space Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}
.hh2__count-viewport {
	position: relative;
	display: block;
	overflow: hidden;
	height: 15px; /* == el font-size/line-height de arriba (1) */
	line-height: 15px;
}
.hh2__count-digit {
	position: absolute;
	inset: 0;
	display: block;
}
/* sr-only de siempre: fuera de pantalla pero leíble, nunca `display:none`
   (eso lo sacaría del árbol de accesibilidad). */
.hh2__count-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hh2__bar {
	position: relative;
	width: 190px;
	height: 3px;
	border-radius: 999px;
	background: var(--hh2-pill-track);
	overflow: hidden;
}

.hh2__bar-fill {
	position: absolute;
	inset: 0;
	width: 0%;
	border-radius: inherit;
	background: var(--hh2-cream);
}
/* Al navegar a mano la barra vuelve a 0 con esta transición (spec §9-5);
   hero-v2.js agrega la clase justo antes de poner `width:0%` y la saca
   después — el avance del autoplay NUNCA la lleva puesta, así que no hereda
   ninguna transición y salta de frame a frame como corresponde (gotcha 27
   en espíritu: una transición puesta donde no corresponde se nota más que
   si no estuviera). */
.hh2__bar-fill--reset { transition: width .35s cubic-bezier(.22, .61, .36, 1); }
/* Sin autoplay (reduced-motion, un solo slide, o el control "autoplay" del
   widget en No) la barra no tiene sentido. */
.hh2--no-autoplay .hh2__bar { display: none; }

/* Botones ≥44px de área táctil, icono chico centrado. Especificidad
   (0,3,0): el sitio tiene "button:hover,button:focus" de Astra (fondo
   beige) y ".elementor-kit-840 button" del kit (text-shadow) en (0,1,1)
   — gotcha 54. ".hh2 .hh2__pill .hh2__arrow" les gana sin depender del
   orden de los archivos. */
.hh2 .hh2__pill .hh2__arrow {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-inline: -6px; /* compensa visualmente el hit-area extra */
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	/* background-color: hover/foco de siempre. transform: respuesta al
	   presionar (spec §9-9), :active de acá abajo. */
	transition: background-color .15s ease, transform .12s ease;
}
.hh2 .hh2__pill .hh2__arrow:hover,
.hh2 .hh2__pill .hh2__arrow:focus-visible {
	background: rgba(255, 255, 255, .18);
}
/* Gotcha 54: el foco que mueve el JS tras un click no matchea :focus-visible. */
.hh2 .hh2__pill .hh2__arrow:focus:not(:focus-visible) {
	background: none;
}
.hh2 .hh2__pill .hh2__arrow:focus-visible {
	outline: 2px solid var(--hh2-cream);
	outline-offset: 2px;
}
/* Respuesta al presionar (spec §9-9): que el click se sienta registrado
   incluso antes de que la foto termine de moverse. */
.hh2 .hh2__pill .hh2__arrow:active {
	transform: scale(.92);
}

.hh2__slide:focus-visible {
	outline: 2px solid var(--hh2-cream);
	outline-offset: -3px;
}

/* ===== Cursor de marca sobre la foto (hero-v2.md §11, 2026-09-24) =====
   Pedido del dueño: "tengo el mismo cursor de siempre, debería ser otro".
   .hh2__cursor lo crea hero-v2.js (spec §11-1): ancla de tamaño 0 posicionada
   por transform (JS escribe translate3d cuadro a cuadro, spec §11-3 — sin
   transition acá, el retraso ya lo da la interpolación del JS); el círculo
   visible de 80px es el hijo .hh2__cursor-inner, centrado con márgenes
   negativos, cuya opacidad/escala SÍ transicionan por CSS (aparecer/
   presionar/desaparecer). pointer-events:none para no robarle el hit-test a
   la foto ni a la píldora de abajo. */
.hh2__cursor {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 2; /* último hijo de .hh2: gana el empate con slides/scrim (mismo z-index) por orden de pintado; la píldora (z-index 3) siempre queda encima */
}
.hh2__cursor-inner {
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px; /* centra el círculo de 80px sobre el punto que ancla .hh2__cursor */
	opacity: 0;
	transform: scale(.6);
	transition: opacity .2s ease, transform .2s ease; /* entrada y presión: 200ms (spec §11-3) */
}
.hh2__cursor-svg { display: block; }
/* Salida: 150ms (spec §11-3) — clase temporal que hero-v2.js agrega justo
   antes de ocultar y quita al volver a mostrarse (mismo patrón que
   .hh2__bar-fill--reset más abajo). */
.hh2__cursor-inner--fastout {
	transition-duration: .15s;
}
.hh2--cursor .hh2__cursor-inner {
	opacity: 1;
	transform: scale(1);
}
/* Presionar: escala 0,75 (spec §11-3). (0,3,0) a propósito para ganarle
   siempre a la regla de arriba (0,2,0) sin depender del orden. */
.hh2--cursor .hh2__cursor-inner.hh2__cursor-inner--pressed {
	transform: scale(.75);
}
.hh2__cursor-circle {
	fill: var(--hh2-cream);
	fill-opacity: .9;
	stroke: var(--hh2-brand);
	stroke-opacity: .35;
	stroke-width: 1.5;
}
.hh2__cursor-chevron {
	fill: none;
	stroke: var(--hh2-brand);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
	/* Sin animación de escala/opacidad (spec §11-6); el retraso de posición
	   se apaga en hero-v2.js (factor de interpolación 1, sin rAF).
	   Nota (panel de escépticos, "regresiones/menor"): esta regla es en la
	   práctica REDUNDANTE. Elementor ya inyecta sitewide, bajo esta misma
	   media query, `html * { transition-duration: 0s !important;
	   transition-delay: 0s !important }` (gotcha 102, confirmado con
	   CSS.getMatchedStylesForNode en hero-v2.md §10) — esa regla, por llevar
	   !important, ya fuerza duración 0 en `.hh2__cursor-inner` sin necesidad
	   de esto. Se deja explícita de todos modos, por claridad y como defensa
	   ante un futuro cambio de Elementor que la quite o la acote. */
	.hh2__cursor-inner { transition: none; }
}

/* Cursor del sistema (spec §11-5): "none" SOLO mientras el círculo está
   activo (clase `.hh2--cursor`, que hero-v2.js agrega nada más con mouse
   real — spec §11-2); si el JS no corrió o el círculo no aplica (touch,
   pointer coarse, un solo slide), queda "grab"/"grabbing" para que la foto
   siga diciendo que se puede arrastrar. El bloque de "none" va DESPUÉS a
   propósito, con la MISMA especificidad (0,3,0) que el de :active, para
   ganar el empate sin depender del orden de carga de la hoja. */
.hh2--ready .hh2__slide {
	cursor: grab;
}
.hh2--ready .hh2__slide:active {
	cursor: grabbing;
}
.hh2--cursor .hh2__slide,
.hh2--cursor .hh2__slide:active {
	cursor: none;
}

/* ===== prefers-reduced-motion: fundido, sin desplazamiento ni autoplay =====
   (el JS también deja de avanzar solo y no arma la transición apilada con
   paralaje; ver hero-v2.js — spec §9-8, 400 ms). `.hh2__slide` ya es
   position:absolute por defecto (arriba), así que acá solo hace falta
   forzar visibility:visible en TODOS (la base los esconde) y animar la
   opacidad; la regla de más arriba `.hh2:not(.hh2--ready) :first-child`
   (0,4,0) sigue ganando mientras el JS no inicializó, con o sin este
   bloque. `display:block` es obligatorio acá (la base ahora es
   `display:none`, corrección ronda 2 de arriba): un fundido cruzado por
   opacidad necesita que TODOS los slides tengan caja de layout al mismo
   tiempo, no solo el activo — si alguno quedara en `display:none` no habría
   nada que desvanecer. Nota: esto reintroduce, solo bajo esta media query,
   la exposición geométrica que la corrección de arriba evita en el caso
   normal (con todos los slides con caja, el `loading=lazy` del slide 2
   vuelve a ser "cercano al viewport" para un visitante con
   prefers-reduced-motion). Es inherente a hacer un fundido cruzado por
   opacidad (spec §9-8) y no lo cubre ningún hallazgo de esta ronda — queda
   anotado, no corregido, para no rediseñar una decisión del §9 fuera de
   pedido. */
@media (prefers-reduced-motion: reduce) {
	/* !important obligatorio: Elementor (el plugin, no el tema) inyecta
	   sitewide bajo esta MISMA media query `html * { transition-duration: 0s
	   !important; transition-delay: 0s !important; }`
	   (wp-content/plugins/elementor/assets/css/frontend.min.css) — sin
	   !important acá, esa regla le gana a esta por especificidad de
	   !important (no por selector) y el fundido de 400 ms del spec §9-8 se
	   convierte en un corte instantáneo. Confirmado con
	   CSS.getMatchedStylesForNode (gotcha 18): con el !important puesto,
	   document.getAnimations() muestra la transición corriendo cuadro a
	   cuadro entre el click y ~400 ms después; sin él, 0 animaciones en
	   cualquier muestreo tras el click. Hallazgo del panel de escépticos,
	   ronda de corrección. */
	.hh2__slide {
		display: block;
		visibility: visible;
		opacity: 0;
		pointer-events: none;
		transition: opacity .4s ease !important;
	}
	.hh2__slide.is-active {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Sin scroll horizontal a 390px (gotcha 56): el hero nunca debe ser el
   causante, así que se lo dejamos explícito aunque overflow:hidden ya
   lo cubre en el propio componente. */
@media (max-width: 480px) {
	.hh2__pill {
		bottom: 24px;
		gap: 10px;
		padding-inline: 18px;
		height: 52px;
	}
	.hh2__bar { width: 110px; }
}

/* ==========================================================================
   HEADER — hero v2 (interruptor hda_hero_v2_enabled, solo en la home)
   Portado de scratchpad/hero/header-hero.css. Va ACÁ (no en megamenu.css:
   ese archivo no se toca — brief) porque usa los tokens --mm-* que
   megamenu.css declara en .hda-header, y esas custom properties se heredan
   igual por los descendientes sin importar en qué hoja de estilos esté
   escrita esta regla, siempre que cargue DESPUÉS de que .hda-header exista
   en el DOM (el orden de carga de la hoja no importa para la herencia de
   variables, solo importa para qué valor "gana" si dos reglas compiten por
   la MISMA propiedad — acá no compite con nada de megamenu.css).
   ========================================================================== */

/* El header flota sobre el hero: el hero ya reserva 100svh, no hace falta
   el spacer (que además empujaría el hero 136px hacia abajo). */
body.hda-hero-top .hda-header-spacer { height: 0; }

/* ===== Estado "arriba del todo" (DEFAULT bajo body.hda-hero-top — ronda 1
   de correcciones: la transparencia YA NO depende de una clase que agrega
   hero-header.js en DOMContentLoaded, así que no hay nada que esperar y no
   hay parpadeo vinotinto en el primer pintado. hero-header.js solo agrega
   `.is-scrolled` cuando scrollY >= 60, así que el selector se invierte a
   `:not(.is-scrolled)`: sin JS (o antes de que corra) esto YA hace match. ===== */
/* El propio .hda-header (el contenedor, no la barra) trae `background:
   #7A0D13` a mano en critical-css.php — es intencional (evita el parpadeo
   del gotcha del brief), pero por eso NO ALCANZA con transparentar solo
   `.hda-header__bar`: el fondo del contenedor pinta detrás igual y la
   "barra transparente" se ve exactamente igual que la sólida de siempre.
   Se comprobó por computed style, no a ojo (gotcha 18): la barra SÍ daba
   `rgba(0,0,0,0)`, pero `.hda-header` daba `rgb(122,13,19)` opaco en los
   dos breakpoints — el bug pasaba desapercibido en la propia captura
   porque un magenta sólido y un magenta con scrim sobre una foto clara
   se parecen a simple vista. Hay que transparentar el contenedor TAMBIÉN. */
body.hda-hero-top .hda-header:not(.is-scrolled) {
	background: transparent;
}
body.hda-hero-top .hda-header:not(.is-scrolled) .hda-header__bar {
	background: transparent;
	transition: background-color .2s ease;
}
/* La franja SÍ mantiene color (vinotinto de marca) para que "Envío gratis…"
   se siga leyendo sin depender de qué foto haya debajo. El mockup del
   dueño usa un rojo distinto (#780D11 medido) al vinotinto de marca
   (#7A0D13): se usa --mm-brand a propósito — consistencia de marca >
   mockup, ver informe-diseno.md. */
body.hda-hero-top .hda-header:not(.is-scrolled) .hda-header__strip {
	background: var(--mm-brand);
}
body.hda-hero-top .hda-header:not(.is-scrolled) .hda-header__strip-msg {
	color: var(--mm-on-brand);
}

/* Defecto 4 (revisión de salud 2026-09-26): no había regla para la franja
   en .is-scrolled, así que al pasar de "arriba del todo" a "bajado" caía
   al --mm-strip rosa pálido de base (megamenu.css), una franja clara
   quedando pegada debajo de la barra ya sólida carmesí (.hda-header__bar
   vuelve a var(--mm-brand) apenas se pierde el :not(.is-scrolled) de
   arriba). Medido con Chrome (scroll real, no saltos): eso pasa SOLO en
   home con hero — entre ~60px bajando y siempre que el header reaparece al
   subir (header-scroll.js lo oculta pasado el top-offset y lo vuelve a
   mostrar con is-scrolled puesto). En una página sin hero (ej.
   /ramos-flores/) .is-scrolled nunca se agrega (hero-header.js solo corre
   bajo body.hda-hero-top): ahí la franja rosa pálido es la base de SIEMPRE,
   no un salto — no es este bug y no se toca. La franja tiene que acompañar
   a la barra: mismo carmesí, con el texto en el crema de --mm-on-brand
   (igual que en :not(.is-scrolled), para que no cambie el contraste al
   cruzar el umbral). */
body.hda-hero-top .hda-header.is-scrolled .hda-header__strip {
	background: var(--mm-brand);
}
body.hda-hero-top .hda-header.is-scrolled .hda-header__strip-msg {
	color: var(--mm-on-brand);
}

/* Scrim del hero: vive acá (no separado) porque el problema que resuelve
   es la LECTURA DEL MENÚ, no una decisión del hero en sí. 220px medidos
   contra el mockup (columna de píxeles): el degradado del mockup se
   confunde con la foto real por debajo de esa altura — ver informe. */
body.hda-hero-top .hh2::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 220px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
	pointer-events: none;
	z-index: 2;
}

/* Logo por estado (header-logo-iconos.md §3, 2026-09-22): hero-v2.php
   imprime los TRES <img> siempre (negative/transparente/beish — ya no dos
   ni por clon de JS, ver hero-header.js), y el CSS elige cuál se ve por
   clase. Reposo (arriba, sin scroll): transparente. Al bajar (.is-scrolled,
   barra vinotinto sólida): el logo de siempre (negative) — sin cambios de
   comportamiento ahí. El hover/panel-abierto (beish) vive en el bloque de
   abajo, DENTRO de `:not(.is-scrolled)`: nunca se pisan entre sí. Estas
   reglas base viven ACÁ sin gatillo de :hover/.is-open a propósito — mismo
   motivo que antes (ver historial): ponerlas solo dentro del bloque de
   hover deja el logo equivocado visible en reposo. */
.hda-header__logo img.hh-logo--transparente { display: block; }
.hda-header__logo img.hh-logo--negative,
.hda-header__logo img.hh-logo--beish { display: none; }
.hda-header.is-scrolled .hda-header__logo img.hh-logo--negative { display: block; }
.hda-header.is-scrolled .hda-header__logo img.hh-logo--transparente,
.hda-header.is-scrolled .hda-header__logo img.hh-logo--beish { display: none; }

/* ===== Hover / panel abierto = header sólido crema (pedido del dueño) =====
   Solo puntero fino con hover real: en táctil no hay hover que journal, y
   el brief lo dice explícito ("Móvil: … sin hover"). */
@media (hover: hover) and (pointer: fine) {
	body.hda-hero-top .hda-header:not(.is-scrolled):hover .hda-header__bar,
	body.hda-hero-top .hda-header:not(.is-scrolled).is-open .hda-header__bar {
		background: #FEF3E7;
	}
	body.hda-hero-top .hda-header:not(.is-scrolled):hover .hda-header__strip,
	body.hda-hero-top .hda-header:not(.is-scrolled).is-open .hda-header__strip {
		background: var(--mm-brand); /* ya lo estaba (transparente); se deja explícito */
	}
	body.hda-hero-top .hda-header:not(.is-scrolled):hover .hda-mm__link,
	body.hda-hero-top .hda-header:not(.is-scrolled).is-open .hda-mm__link,
	body.hda-hero-top .hda-header:not(.is-scrolled):hover .hda-header__util svg,
	body.hda-hero-top .hda-header:not(.is-scrolled).is-open .hda-header__util svg {
		color: #7A0D13;
	}
	body.hda-hero-top .hda-header:not(.is-scrolled):hover .hda-header__burger,
	body.hda-hero-top .hda-header:not(.is-scrolled).is-open .hda-header__burger {
		color: #7A0D13;
	}
	/* El puntito de notificación del carrito usa --mm-on-brand (crema):
	   sobre fondo crema quedaría invisible si no se pisa acá. */
	body.hda-hero-top .hda-header:not(.is-scrolled):hover .zenth-cart-icon__count,
	body.hda-hero-top .hda-header:not(.is-scrolled).is-open .zenth-cart-icon__count {
		background: #7A0D13;
	}
	body.hda-hero-top .hda-header:not(.is-scrolled):hover .hda-header__logo img.hh-logo--transparente,
	body.hda-hero-top .hda-header:not(.is-scrolled).is-open .hda-header__logo img.hh-logo--transparente {
		display: none;
	}
	body.hda-hero-top .hda-header:not(.is-scrolled):hover .hda-header__logo img.hh-logo--beish,
	body.hda-hero-top .hda-header:not(.is-scrolled).is-open .hda-header__logo img.hh-logo--beish {
		display: block;
	}
}

/* Móvil: header transparente arriba igual, sin hover (no aplica el bloque
   de arriba). El nav de escritorio ya está display:none <1024px, así que
   ".is-open" tampoco puede pasar acá abajo — nada que hacer aparte del
   fondo transparente, que ya cubre la regla base. */

/* Móvil en modo hero: la franja arriba de la barra (el header móvil normal las invierte). */
@media (max-width: 1023.98px) {
	body.hda-hero-top .hda-header .hda-header__strip { order: 0; }
	body.hda-hero-top .hda-header .hda-header__bar { order: 1; }
}