/* ==========================================================================
   ARMA EL DETALLE COMPLETO — widget hda-combo (interruptor hda_combo_enabled).
   Copia del "Bundle & Save" de Pebble con tres productos propios, sin descuento.
   Medidas pasadas a px (en este sitio 1 rem = 15 px, no 10 como en Pebble).
   Doc: desarrollo/web/home-pebble.md. Especificidad >= (0,2,0) (gotchas 54, 85, 94).

   Orden del DOM = orden de lectura: título, foto, productos, botón. Una grilla pone la
   foto a la izquierda en escritorio (escéptico del 14-oct: con display:contents + order,
   el lector oía la foto y los puntos antes que el título).
   ========================================================================== */

.hcb {
	--hcb-brand: #7A0D13;
	--hcb-cream: #FEF3E7;
	--hcb-ink: #2B1520;
	--hcb-rose: #F3DBD7;
	--hcb-sale: #B8143C;
	--hcb-display: "Qalogre fit", Georgia, serif;
	--hcb-text: "Founders Grotesk Official", Arial, sans-serif;
	--hcb-bold: "HDA Founders Bold", "Founders Grotesk Official", Arial, sans-serif;
	--hcb-pad: 16px;
	--hcb-gap: clamp(24px, calc(3.119vw + .08px), 40px);
	--hcb-side: clamp(50px, calc(19.608vw - 185.29px), 100px); /* aire de la columna de texto */

	display: block;
	padding-block: clamp(48px, calc(7.558vw - 9.97px), 100px);
}

.hcb .hcb__wrap { padding-inline: var(--hcb-pad); }
@media (min-width: 1200px) { .hcb { --hcb-pad: max(50px, calc(50% - 720px)); } }
@media (min-width: 768px) and (max-width: 1199.98px) { .hcb { --hcb-side: 24px; } }

/* ---------- Dos columnas 50/50 (Pebble): la foto ocupa toda la izquierda y el bloque de la
   derecha se centra en alto con dos filas elásticas, arriba y abajo. ---------- */
.hcb .hcb__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: 1fr auto auto auto 1fr;
	grid-template-areas:
		"banner ."
		"banner head"
		"banner items"
		"banner buy"
		"banner .";
	row-gap: var(--hcb-gap);
}

.hcb .hcb__head  { grid-area: head; }
.hcb .hcb__items { grid-area: items; }
.hcb .hcb__buy   { grid-area: buy; }

.hcb .hcb__head,
.hcb .hcb__items,
.hcb .hcb__buy { padding-inline: var(--hcb-side); box-sizing: border-box; min-width: 0; }

/* ---------- Foto ---------- */
.hcb .hcb__banner {
	grid-area: banner;
	/* center y no stretch: estirada (cuando la columna de productos es más alta, entre 768 y
	   1023) perdía la proporción y los puntos caían en otra parte de la foto. */
	align-self: center;
	position: relative;
	aspect-ratio: 1660 / 1882;  /* 0,882, la de Pebble */
	border-radius: 20px;
	overflow: hidden;
	-webkit-mask-image: radial-gradient(white, black);
	background: rgba(43, 21, 32, .05);
}

.hcb .hcb__banner .hcb__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: 0;
}

/* Puntos numerados. Doble anillo (blanco + tinta) para que se vean sobre cualquier zona de la
   foto: el borde carmesí al .35 daba 1,26:1 sobre la sábana blanca. */
.hcb button.hcb__dot {
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hcb-cream);
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(43, 21, 32, .6), 0 2px 8px rgba(43, 21, 32, .3);
	color: var(--hcb-brand);
	font-family: var(--hcb-bold);
	font-weight: 700;
	font-size: 15px;
	line-height: 24px;
	text-shadow: none;
	text-transform: none;
	cursor: pointer;
	transition: color .35s ease-in-out, background-color .35s ease-in-out;
}

.hcb button.hcb__dot:hover,
.hcb button.hcb__dot:focus,
.hcb button.hcb__dot.is-selected { background: var(--hcb-brand); color: var(--hcb-cream); }
.hcb button.hcb__dot:focus:not(:focus-visible) { outline: none; }
.hcb button.hcb__dot:focus-visible {
	outline: 2px solid transparent; /* para el modo de alto contraste */
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--hcb-ink), 0 2px 8px rgba(43, 21, 32, .3);
}

/* ---------- Encabezado ---------- */
.hcb .hcb__head { text-align: center; container-type: inline-size; }

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

.hcb .hcb__title {
	margin: 0;
	font-family: var(--hcb-display);
	font-weight: 400;
	/* Fórmula de Pebble, con tope por el ancho: "Arma el detalle completo" mide 11,5 em en Qalogre. */
	font-size: min(clamp(28px, calc(2.339vw + 10.06px), 40px), 8.4cqi);
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-wrap: balance;
	color: var(--hcb-brand);
}

/* En una línea solo desde 1300 px, donde sobra lugar: con el espaciado de texto de WCAG 1.4.12
   se salía de la columna entre 768 y ~1270 px. */
@media (min-width: 1300px) {
	.hcb .hcb__title { white-space: nowrap; }
}

/* ---------- Tarjetas numeradas: cada tarjeta comparte las filas de la grilla (subgrid), así
   los precios quedan alineados sin reservar dos líneas fijas para el nombre. ---------- */
.hcb .hcb__items {
	display: grid;
	grid-template-columns: repeat(var(--hcb-n, 3), minmax(0, 1fr));
	grid-template-rows: auto auto auto auto; /* número, foto, nombre, precio */
	column-gap: 10px;
	margin: 0;
	list-style: none;
}

.hcb .hcb__item {
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
	justify-items: center;
	row-gap: 12px;
	margin: 0;
	min-width: 0;
}

.hcb .hcb__info { display: contents; }

/* Atenuado de Pebble al pasar por un punto: solo la FOTO de las otras tarjetas (el texto al .5
   quedaba bajo contraste) y solo mientras dura el hover o el foco. */
.hcb .hcb__items.is-focus .hcb__item:not(.is-selected) a.hcb__media { opacity: .45; }
.hcb a.hcb__media { transition: opacity .35s ease-in-out; }

.hcb .hcb__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--hcb-rose);
	color: var(--hcb-brand);
	font-family: var(--hcb-bold);
	font-weight: 700;
	font-size: 15px;
	line-height: 24px;
}

.hcb a.hcb__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: 20px;
	overflow: hidden;
	-webkit-mask-image: radial-gradient(white, black);
	background: rgba(43, 21, 32, .05);
}

.hcb a.hcb__media .hcb__pimg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}

.hcb .hcb__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 10px;
	border-radius: 60px;
	background: var(--hcb-sale);
	color: #fff;
	font-family: var(--hcb-bold);
	font-weight: 700;
	font-size: 13px;
	line-height: 21px;
	white-space: nowrap;
}

.hcb a.hcb__name {
	justify-self: start;
	align-self: start; /* en la fila de la subgrid: el subrayado y el foco van con el texto, no con la fila */
	color: var(--hcb-ink);
	font-family: var(--hcb-bold);
	font-weight: 700;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	scroll-margin-top: 160px; /* el punto lleva el foco acá: que el header no lo tape */
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0 1px;
	transition: background-size .35s cubic-bezier(.3, 1, .3, 1);
}

.hcb a.hcb__name:hover,
.hcb a.hcb__name:focus { color: var(--hcb-ink); text-decoration: none; background-position: 0 100%; background-size: 100% 1px; }
.hcb a.hcb__name:focus:not(:focus-visible) { outline: none; }
.hcb a.hcb__name:focus-visible { outline: 3px solid var(--hcb-brand); outline-offset: 3px; }

.hcb .hcb__price {
	justify-self: start;
	margin-top: -8px; /* 4 px bajo el nombre, como Pebble (el row-gap de la tarjeta es 12) */
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 4px;
	color: var(--hcb-ink);
	font-family: var(--hcb-bold);
	font-weight: 700;
	font-size: 15px;
	line-height: 24px;
}

.hcb .hcb__price ins { order: 0; color: var(--hcb-sale); text-decoration: none; background: none; }
/* Tachado al .7 (no .6 como Pebble): con tinta sobre crema .6 daba 4,39:1. */
.hcb .hcb__price del { order: 1; color: var(--hcb-ink); opacity: .7; }

.hcb .hcb__out {
	order: 2;
	color: var(--hcb-ink);
	font-family: var(--hcb-bold);
	font-weight: 700;
	font-size: 13px;
	line-height: 20px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.hcb .hcb__item.is-agotado a.hcb__media .hcb__pimg { opacity: .55; }

/* ---------- Total y botón ---------- */
.hcb .hcb__buy {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hcb .hcb__buy > * + * { margin-top: 12px; }
/* La región de estado existe siempre (para que el lector la anuncie) pero vacía no ocupa lugar. */
.hcb .hcb__buy > .hcb__estado:empty { margin-top: 0; }

.hcb .hcb__total {
	margin-bottom: 0;
	color: var(--hcb-ink);
	font-family: var(--hcb-text);
	font-size: 15px;
	line-height: 24px;
}

.hcb .hcb__buy > .hcb__total { margin-top: 0; }
.hcb .hcb__total span { font-family: var(--hcb-bold); font-weight: 700; }

.hcb button.hcb__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 50px;
	margin-bottom: 0;
	padding: 10px 48px 10px 24px;
	box-sizing: border-box;
	border: 1px solid var(--hcb-brand);
	border-radius: 60px;
	background: var(--hcb-brand);
	color: var(--hcb-cream);
	box-shadow: none;
	text-shadow: none;
	font-family: var(--hcb-bold);
	font-weight: 700;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .35s, color .35s, border-color .35s, opacity .35s;
}

.hcb button.hcb__btn:hover,
.hcb button.hcb__btn:focus { background: var(--hcb-brand); color: var(--hcb-cream); }
.hcb button.hcb__btn:focus:not(:focus-visible) { outline: none; }
.hcb button.hcb__btn:focus-visible { outline: 3px solid var(--hcb-brand); outline-offset: 3px; }
.hcb button.hcb__btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.hcb button.hcb__btn.is-cargando { cursor: progress; }

/* Capa invertida (crema): es el círculo con la flecha y al pasar el mouse llena el botón.
   Va DENTRO del borde (inset 0): con -1px tapaba el borde y en hover el botón se fundía con el
   fondo (escéptico del 14-oct). Mientras agrega no se muestra: tenía su propia copia del texto
   viejo y tapaba "Agregando…". */
.hcb .hcb__btn-inv {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding: 10px 48px 10px 24px;
	border-radius: inherit;
	background: var(--hcb-cream);
	color: var(--hcb-brand);
	clip-path: circle(15px at calc(100% - 25px) 50%);
	transition: clip-path .6s cubic-bezier(.4, 0, .2, 1);
	pointer-events: none;
}

/* Mientras agrega, la capa vuelve al círculo de la flecha (el JS le cambia también el texto). */
.hcb button.hcb__btn.is-cargando .hcb__btn-inv { clip-path: circle(15px at calc(100% - 25px) 50%); }

.hcb .hcb__btn-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;
}

.hcb .hcb__btn-ar { display: block; width: 12px; height: 12px; }

@media (hover: hover) and (pointer: fine) {
	.hcb button.hcb__btn:not([aria-disabled="true"]):not(.is-cargando):hover .hcb__btn-inv { clip-path: circle(150% at calc(100% - 25px) 50%); }
	.hcb button.hcb__btn:not([aria-disabled="true"]):hover .hcb__btn-ar { animation: hcb-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 hcb-flecha {
	0%      { transform: translateX(0); }
	50%     { transform: translateX(20px); }
	50.001% { transform: translateX(-20px); }
	100%    { transform: translateX(0); }
}

.hcb .hcb__aviso,
.hcb .hcb__estado {
	margin-bottom: 0;
	max-width: 36ch;
	text-align: center;
	color: var(--hcb-ink);
	font-family: var(--hcb-text);
	font-size: 14px;
	line-height: 20px;
}

/* Sin JS (o hasta que carga) los puntos, el total y el botón no pueden hacer nada y quedan los
   enlaces a cada producto. El botón y el total se ESCONDEN pero guardan su lugar: con display:none
   el bloque crecía 54-86 px al cargar combo.js tarde (salto de diseño). */
.hcb:not(.hcb--js) button.hcb__dot { display: none; }
.hcb:not(.hcb--js) button.hcb__btn,
.hcb:not(.hcb--js) .hcb__total { visibility: hidden; }

/* ---------- Hasta 1023 px: una fila por producto (a 768 las tarjetas quedaban de 100 px) ---------- */
@media (max-width: 1023.98px) {
	.hcb .hcb__items { display: block; }
	.hcb .hcb__item {
		display: grid;
		grid-row: auto;
		grid-template-columns: 30px 80px minmax(0, 1fr);
		grid-template-rows: none;
		align-items: center;
		justify-items: stretch;
		gap: 0 16px;
		padding: 20px 0;
		border-top: 1px solid rgba(122, 13, 19, .12);
	}
	.hcb .hcb__item:first-child { border-top: 0; padding-top: 0; }
	.hcb a.hcb__media { border-radius: 10px; }
	.hcb .hcb__badge { display: none; }
	.hcb .hcb__info { display: grid; grid-template-rows: auto auto; row-gap: 4px; justify-items: start; }
	.hcb .hcb__price { margin-top: 0; }
}

/* ---------- Celular: título, foto, una fila por producto, botón a todo el ancho ---------- */
@media (max-width: 767.98px) {
	.hcb .hcb__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas: "head" "banner" "items" "buy";
		row-gap: 24px;
	}
	.hcb .hcb__head,
	.hcb .hcb__items,
	.hcb .hcb__buy { padding-inline: 0; }
	.hcb .hcb__banner { align-self: auto; }
	.hcb .hcb__title { font-size: min(28px, 8.4vw); }
	.hcb .hcb__buy { align-items: stretch; }

	.hcb button.hcb__btn { justify-content: flex-start; width: 100%; }
	.hcb .hcb__total { text-align: center; }
	.hcb .hcb__aviso, .hcb .hcb__estado { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hcb button.hcb__btn .hcb__btn-ar { animation: none !important; }
	.hcb .hcb__btn-inv { transition: none; }
	.hcb a.hcb__media { transition: none; }
}