/* ==========================================================================
   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); }
}

.hh2__track {
	display: flex;
	height: 100%;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.hh2__slide {
	flex: 0 0 100%;
	min-width: 100%;
	height: 100%;
	position: relative;
	display: block;
}

.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);
}

.hh2__count {
	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__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);
}
/* 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;
	transition: background-color .15s 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;
}

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

/* ===== prefers-reduced-motion: fundido, sin desplazamiento ni autoplay =====
   (el JS también deja de avanzar solo; ver hero-v2.js) */
@media (prefers-reduced-motion: reduce) {
	.hh2__track {
		position: relative;
		transition: none;
	}
	.hh2__slide {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity .5s ease;
	}
	.hh2__slide.is-active { opacity: 1; }
}

/* 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);
}

/* 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; }
}