/* ==========================================================================
   EL DETALLE IDEAL PARA … — versión Pebble (widget hda-ocasiones, interruptor
   hda_ocasiones_pebble_enabled). Copia de la sección "scrolling-cards" de
   Pebble (pebble-little.myshopify.com) con la marca de Hechizos. Medidas y
   decisiones: desarrollo/web/ocasiones-v2.md §13.
   Todo con especificidad >= (0,2,0): Astra pinta a:hover/a:focus y h2
   (capitalize, line-height .83em) y Elementor pone `.elementor img{height:auto}`
   (gotchas 54, 85, 94).
   ========================================================================== */

@font-face {
	/* Founders Grotesk Bold, subconjunto latino (16 KB). Familia propia a propósito:
	   si se declarara como peso 700 de "Founders Grotesk Official", cambiaría la
	   negrita sintética de cualquier otro texto de la home. */
	font-family: "HDA Founders Bold";
	src: url("founders-grotesk-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.hop {
	--hop-brand: #7A0D13;
	--hop-cream: #FEF3E7;
	--hop-ink: #2B1520;
	--hop-muted: #6E5A62;
	--hop-display: "Qalogre fit", Georgia, serif;
	--hop-text: "Founders Grotesk Official", Arial, sans-serif;
	--hop-bold: "HDA Founders Bold", "Founders Grotesk Official", Arial, sans-serif;

	--hop-pad: 16px;          /* margen lateral (Pebble: 16 bajo 1200, 50 desde 1200) */
	--hop-gap: 50px;          /* entre columnas (Pebble: 50 desde 1024, 30 en tablet) */
	--hop-row: 80px;          /* entre filas */
	--hop-zig: 140px;         /* desfase de la columna derecha (80 en tablet) */
	--hop-radius: 20px;
	--hop-hdr: 136px;         /* alto del header fijo (86 bajo 1024): margen de scroll y ventanas bajas */
	/* Panel: Pebble usa vidrio blanco al 40 % sin base, y con texto claro sobre fotos claras
	   no llega a 4,5:1. Medido sobre las 6 fotos (contraste-hop.mjs, percentil 5 del fondo
	   detrás del nombre y el precio): .42/.4 daba 2,3:1; .7/.4, 3,7:1; .6/.08, 5,2:1 en la peor. */
	--hop-base: .6;           /* base oscura */
	--hop-glass: .08;         /* brillo blanco del vidrio */

	position: relative;
	display: block;
	background: var(--hop-cream);
	padding-block: clamp(48px, calc(7.558vw - 9.97px), 100px);
	overflow: clip; /* clip, no hidden: no rompe el sticky (sí lo rompería hidden) */
}

.hop .hop__wrap {
	padding-inline: var(--hop-pad);
}

@media (min-width: 1200px) {
	/* Pebble salta a 135 px de margen en 1536 y achica las tarjetas 53 px; acá el
	   margen crece sin salto hasta que el contenido llega a 1440 (en 1540). */
	.hop .hop__wrap { padding-inline: max(50px, calc(50% - 720px)); }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.hop { --hop-gap: 30px; --hop-zig: 80px; }
}

@media (max-width: 1023.98px) {
	.hop { --hop-hdr: 86px; }
}

/* ---------- Escenario: grilla de tarjetas + capa con el bloque fijo ---------- */
.hop .hop__stage {
	position: relative;
}

.hop .hop__cards {
	display: grid;
	grid-template-columns: 1fr 1.2fr 1fr;
	column-gap: var(--hop-gap);
	/* --hop-row-extra lo pone el JS cuando el recorrido del titular quedaría corto (tablets en
	   vertical, monitores altos): estira el espacio entre filas para que dure al menos 600 px. */
	row-gap: calc(var(--hop-row) + var(--hop-row-extra, 0px));
	align-items: start;
	margin: 0;
	padding: 0;
}

.hop .hop__cards > :nth-child(odd) { grid-column: 1; }
.hop .hop__cards > :nth-child(even) { grid-column: 3; margin-top: var(--hop-zig); }

.hop .hop__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.hop .hop__sticky {
	position: sticky;
	top: 0;
	height: min(100%, calc(100vh - 80px));
	height: min(100%, calc(100svh - 80px));
	display: grid;
	grid-template-columns: 1fr 1.2fr 1fr;
	column-gap: var(--hop-gap);
	align-items: center;
}

/* Ventanas bajas (menos de 700 px de alto): el header, al reaparecer cuando se sube, tapaba el
   antetítulo y hasta la primera línea del titular. Ahí el bloque se centra debajo del header. */
@media (min-width: 768px) and (max-height: 700px) {
	.hop .hop__sticky {
		top: var(--hop-hdr);
		height: min(100%, calc(100vh - var(--hop-hdr)));
		height: min(100%, calc(100svh - var(--hop-hdr)));
	}
}

.hop .hop__text {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	container-type: inline-size;
	min-width: 0;
}

.hop .hop__text a { pointer-events: auto; }

/* ---------- Bloque central ---------- */
.hop .hop__eyebrow {
	margin: 0;
	padding: 0 0 clamp(16px, calc(.581vw + 11.54px), 20px);
	font-family: var(--hop-bold);
	font-weight: 700;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--hop-brand);
}

.hop .hop__title {
	margin: 0;
	padding: 0;
	width: 100%;
	font-family: var(--hop-display);
	font-weight: 400;
	/* La fórmula de Pebble, con tope por el ancho de la columna: "para Aniversarios"
	   mide 8,28 em en Qalogre y no cabía entre 768 y ~1056 px (ni en 1200-1230). */
	font-size: min(clamp(34px, calc(2.729vw + 13.07px), 48px), 11.2cqi);
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: var(--hop-brand);
}

.hop .hop__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Ventana de dos líneas (la de Pebble). Qalogre tiene ascendentes y descendentes que se
   salen de la caja de línea, así que cada titular lleva .2em de aire arriba y abajo, y la
   ventana mide exactamente un titular (2 líneas + .4em = 2,8em). Con ventana = paso, a mitad
   de camino entre dos ocasiones se ven enteras la 2.ª línea de la que sale y la 1.ª de la que
   entra, como en Pebble (antes, con ventana 2,65 y paso 2,9, se cortaban 12 px de una línea).
   El aire de arriba guarda los ascendentes (antes se cortaban 1-3 px) y el de abajo los
   descendentes. El JS mide el paso real con getBoundingClientRect (fraccionario). */
.hop .hop__win {
	display: block;
	position: relative;
	height: 2.8em;
	overflow-y: clip;       /* corte duro, sin máscara ni fundido (como Pebble) */
}

.hop .hop__rail {
	display: block;
	will-change: transform;
}

.hop .hop__h {
	display: block;
	padding-block: .2em;
}

.hop .hop__h,
.hop .hop__l {
	white-space: nowrap;
}

.hop .hop__l { display: block; }

.hop .hop__hl {
	font-style: normal;
	color: inherit;
	background-image: linear-gradient(var(--hl, #F8C6C3), var(--hl, #F8C6C3));
	background-repeat: no-repeat;
	/* Banda de 1,1em (la de Pebble mide 1,11em) que arranca en el tope de su LÍNEA: la caja del em
	   (Qalogre, 1,6em) empieza .2em por encima de la línea, así que con la banda desde .06em asomaba
	   una franja de 7 px en la ventana del titular vecino. Antes, 92 % de la caja daba 1,47em. */
	background-position: 0 .2em;
	background-size: 100% 1.1em;
}

.hop .hop__lede br { display: none; } /* el corte lo decide text-wrap: balance */

.hop .hop__lede {
	text-wrap: balance;
	margin: 0;
	padding: clamp(19.92px, calc(.593vw + 15.37px), 24px) 0 0;
	font-family: var(--hop-text);
	font-weight: 400;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--hop-muted);
}

/* ---------- Botón "Ver todos los regalos" (el "Shop Now" de Pebble) ---------- */
.hop a.hop__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
	min-height: 50px;       /* 149 × 50 en Pebble */
	box-sizing: border-box;
	padding: 10px 48px 10px 24px;
	border: 1px solid var(--hop-brand);
	border-radius: 60px;
	background: var(--hop-brand);
	color: var(--hop-cream);
	font-family: var(--hop-bold);
	font-weight: 700;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
	transition: background-color .35s, color .35s, border-color .35s;
}

.hop a.hop__cta:hover,
.hop a.hop__cta:focus { color: var(--hop-cream); background: var(--hop-brand); text-decoration: none; }
.hop a.hop__cta:focus:not(:focus-visible) { outline: none; }
.hop a.hop__cta:focus-visible { outline: 3px solid var(--hop-brand); outline-offset: 3px; }

/* Capa invertida (crema con texto carmesí) recortada a un círculo de 30 px: es el
   círculo con la flecha. Al pasar el mouse el círculo crece y llena el botón. Va DENTRO
   del borde (inset 0): con inset -1px tapaba el borde y en hover el botón se fundía con
   el fondo crema (escéptico del 14-oct). */
.hop .hop__cta-inv {
	position: absolute;
	inset: 0;
	display: inline-flex;
	align-items: center;
	padding: 10px 48px 10px 24px;
	border-radius: inherit;
	background: var(--hop-cream);
	color: var(--hop-brand);
	clip-path: circle(15px at calc(100% - 25px) 50%);
	transition: clip-path .6s cubic-bezier(.4, 0, .2, 1);
	pointer-events: none;
}

.hop .hop__cta-ic {
	position: absolute;
	top: 50%;
	right: 10px;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
}

.hop .hop__cta-ar {
	display: block;
	width: 12px;
	height: 12px;
}

@media (hover: hover) and (pointer: fine) {
	.hop a.hop__cta:hover .hop__cta-inv { clip-path: circle(150% at calc(100% - 25px) 50%); }
	.hop a.hop__cta:hover .hop__cta-ar { animation: hop-flecha 1s ease infinite; } /* Pebble: slideInOut 1s ease infinite */
}

/* slideInOut de Pebble: sale por la derecha recortada por el círculo y entra por la izquierda. */
@keyframes hop-flecha {
	0%      { transform: translateX(0); }
	50%     { transform: translateX(20px); }
	50.001% { transform: translateX(-20px); }
	100%    { transform: translateX(0); }
}

.hop .hop__cta-mob { display: none; }

/* ---------- Tarjetas ---------- */
.hop a.hop__card,
.hop .hop__card {
	position: relative;
	display: block;
	border-radius: var(--hop-radius);
	background: rgba(43, 21, 32, .06);
	color: var(--hop-cream);
	text-decoration: none;
	container-type: inline-size;
	/* El header fijo (136 / 86 px) no tapa la tarjeta que recibe el foco con Tab. */
	scroll-margin-top: calc(var(--hop-hdr) + 16px);
	scroll-margin-bottom: 16px;
}

.hop a.hop__cta { scroll-margin-top: calc(var(--hop-hdr) + 16px); scroll-margin-bottom: 24px; }

.hop a.hop__card:hover,
.hop a.hop__card:focus { color: var(--hop-cream); text-decoration: none; }
.hop a.hop__card:focus:not(:focus-visible) { outline: none; }
.hop a.hop__card:focus-visible { outline: 3px solid var(--hop-brand); outline-offset: 3px; }

/* El recorte de esquinas vive acá y no en el enlace: con overflow/mask en el <a>, el anillo de
   foco (que se pinta por fuera) quedaba recortado y no se veía (escéptico del 14-oct). */
.hop .hop__media {
	display: block;
	aspect-ratio: 2400 / 3180;
	border-radius: inherit;
	overflow: hidden;
	-webkit-mask-image: radial-gradient(white, black); /* recorte de esquinas con zoom en Safari */
}

.hop .hop__media .hop__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: 0;
	transition: scale .5s cubic-bezier(.3, 1, .3, 1);
}

@media (hover: hover) and (pointer: fine) {
	.hop a.hop__card:hover .hop__media .hop__img { scale: 1.05; }
}

/* Revelado de la foto (solo con JS: sin JS nunca queda invisible). */
.hop.hop--js .hop__media .hop__img {
	opacity: 0;
	transform: scale(1.15);
	transition: transform 1.3s cubic-bezier(.16, 1, .3, 1), opacity .3s ease-in-out, scale .5s cubic-bezier(.3, 1, .3, 1);
}

.hop.hop--js .hop__card.is-in.is-loaded .hop__media .hop__img {
	opacity: 1;
	transform: none;
}

/* ---------- Panel de vidrio ---------- */
.hop .hop__panel {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 80px;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 10px;
	background:
		linear-gradient(111.49deg, rgba(255, 255, 255, var(--hop-glass)) -8.95%, rgba(255, 255, 255, .01) 114%),
		rgba(30, 20, 22, var(--hop-base));
	-webkit-backdrop-filter: blur(50px);
	backdrop-filter: blur(50px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.hop .hop__panel { background: rgba(43, 21, 32, .78); }
}

.hop .hop__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(-45deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .1), rgba(255, 255, 255, .5));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}

.hop .hop__panel .hop__thumb {
	flex: none;
	display: block;
	width: 60px;
	height: 60px;
	max-width: none;
	border-radius: 10px;
	object-fit: cover;
}

.hop .hop__meta {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.hop .hop__name {
	align-self: flex-start;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--hop-bold);
	font-weight: 700;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--hop-cream);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size .35s cubic-bezier(.3, 1, .3, 1);
}

@media (hover: hover) and (pointer: fine) {
	.hop a.hop__card:hover .hop__name { background-size: 100% 1px; }
}

.hop .hop__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 4px;
	font-family: var(--hop-bold);
	font-weight: 700;
	font-size: 15px;
	line-height: 24px;
	color: var(--hop-cream);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.hop .hop__price del {
	font-family: var(--hop-text);
	font-weight: 400;
	font-size: 12px;
	opacity: .9; /* con .7 daba 3,5:1 sobre la foto de Belleza y Ternura; WCAG pide 4,5:1 */
	color: inherit;
}

.hop .hop__price ins {
	text-decoration: none;
	background: none;
	color: inherit;
	font-weight: 700;
}

/* "Ver": píldora crema con texto carmesí; al pasar el mouse por la tarjeta se
   llena de carmesí de izquierda a derecha (la tarjeta entera es un solo enlace). */
.hop .hop__btn {
	position: relative;
	z-index: 0;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	margin-left: auto;
	padding: 8px 20px;
	box-sizing: border-box;
	border: 1px solid var(--hop-cream);
	border-radius: 60px;
	overflow: hidden;
	background: var(--hop-cream);
	color: var(--hop-brand);
	font-family: var(--hop-bold);
	font-weight: 700;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	transition: color .3s;
}

.hop .hop__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hop-brand);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .3s cubic-bezier(.3, 1, .3, 1);
}

@media (hover: hover) and (pointer: fine) {
	.hop a.hop__card:hover .hop__btn { color: var(--hop-cream); }
	.hop a.hop__card:hover .hop__btn::before { transform: none; }
}

/* Panel de las tarjetas de Bodas (sin producto: título + "Ver"). */
.hop .hop__panel.hop__panel--enlace .hop__name {
	white-space: normal;
}

/* Panel chico (tarjeta angosta, como Pebble bajo 301 px; acá el botón se oculta
   hasta 341 porque los precios en pesos con oferta son más largos que "$24.00"). */
@container (max-width: 340.98px) {
	.hop .hop__panel {
		left: 12px;
		right: 12px;
		bottom: 10px;
		min-height: 72px;
	}
	.hop .hop__panel { gap: 10px; }
	.hop .hop__panel .hop__thumb { width: 44px; height: 44px; }
	.hop .hop__btn { display: none; }
	/* Entre 768 y ~800 px el precio con oferta se partía en dos líneas y el panel crecía hasta
	   tapar el 39 % de la foto. */
	.hop .hop__price { flex-wrap: nowrap; white-space: nowrap; }
	.hop .hop__price del { font-size: 11px; }
	.hop .hop__name {
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-height: 20px;
	}
}

/* ---------- Entrada del texto (solo con JS) ----------
   Como Pebble: cada elemento entra cuando ÉL aparece (su propio observador en el JS), no los
   cuatro juntos cuando asoma el antetítulo. */
.hop.hop--js .hop__eyebrow,
.hop.hop--js .hop__title,
.hop.hop--js .hop__lede,
.hop.hop--js .hop__text .hop__cta {
	opacity: 0;
	transform: translateY(25px);
	transition: opacity 1.5s cubic-bezier(.16, 1, .3, 1), transform 1.5s cubic-bezier(.16, 1, .3, 1);
}

.hop.hop--js .hop__eyebrow { transition-delay: .05s; }
.hop.hop--js .hop__title { transition-delay: .1s; }
.hop.hop--js .hop__lede { transition-delay: .15s; }
.hop.hop--js .hop__text .hop__cta { transition-delay: .2s; }

.hop.hop--js .hop__eyebrow.is-in,
.hop.hop--js .hop__title.is-in,
.hop.hop--js .hop__lede.is-in,
.hop.hop--js .hop__text .hop__cta.is-in {
	opacity: 1;
	transform: none;
}

/* El marcador se dibuja de izquierda a derecha la primera vez que su titular entra. */
.hop.hop--js .hop__hl {
	background-size: 0% 1.1em;
	transition: background-size .6s cubic-bezier(.3, 1, .3, 1);
}

.hop.hop--js .hop__hl.is-drawn { background-size: 100% 1.1em; }

/* ---------- Celular: carrusel de una tarjeta grande (Pebble bajo 768) ---------- */
@media (max-width: 767.98px) {
	.hop .hop__overlay {
		position: static;
		pointer-events: auto;
	}
	.hop .hop__sticky {
		position: static;
		height: auto;
		display: block;
	}
	.hop .hop__text { padding-bottom: 28px; }

	.hop .hop__cards {
		display: grid;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 73.08vw;
		column-gap: 8px;
		row-gap: 0;
		overflow-x: auto;
		overflow-y: hidden;
		margin-inline: calc(-1 * var(--hop-pad));
		padding-inline: var(--hop-pad);
		/* Aire para que el anillo de foco (3 + 3 px) no lo recorte el overflow del carrusel. */
		margin-block: -8px;
		padding-block: 8px;
		scroll-padding-inline: var(--hop-pad);
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scroll-behavior: smooth;
		scrollbar-width: none;
	}
	.hop .hop__cards::-webkit-scrollbar { display: none; }
	.hop .hop__cards > :nth-child(odd),
	.hop .hop__cards > :nth-child(even) {
		grid-column: auto;
		margin-top: 0;
		scroll-snap-align: start;
	}

	/* El botón de arriba se oculta y aparece uno de ancho completo bajo el carrusel. */
	.hop .hop__text .hop__cta { display: none; }
	.hop .hop__cta-mob { display: block; margin-top: 24px; }
	.hop .hop__cta-mob a.hop__cta {
		display: flex;
		width: 100%;
		margin-top: 0;
		box-sizing: border-box;
	}

	/* En celular el titular no se arrastra con el scroll: rueda a la ocasión de la
	   tarjeta que queda adelante al deslizar. */
	.hop.hop--js .hop__rail { transition: transform .5s cubic-bezier(.3, 1, .3, 1); }
}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
	.hop.hop--js .hop__media .hop__img,
	.hop.hop--js .hop__eyebrow,
	.hop.hop--js .hop__title,
	.hop.hop--js .hop__lede,
	.hop.hop--js .hop__text .hop__cta {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.hop.hop--js .hop__hl { background-size: 100% 1.1em !important; transition: none !important; }
	.hop.hop--js .hop__rail { transition: none !important; }
	.hop a.hop__card:hover .hop__media .hop__img { scale: 1; }
	.hop a.hop__cta:hover .hop__cta-ar { animation: none !important; }
	.hop .hop__cards { scroll-behavior: auto !important; }
}