/* ==========================================================================
   EL DETALLE IDEAL PARA … — widget hda-ocasiones (interruptor previsto
   hda_ocasiones_v2_enabled). Spec: desarrollo/web/ocasiones-v2.md §3/§3.10.
   Tokens propios en .hoc (no hereda de .hh2/.hda-header/.hcat: no son
   ancestros). Construido en el banco dentro del envoltorio real de Elementor
   (gotcha 94): `.elementor img{height:auto}` y las reglas de Astra por
   etiqueta (h2, a, del/ins) están en juego a propósito.
   ========================================================================== */

.hoc {
	--hoc-brand: #7A0D13;
	--hoc-cream: #FEF3E7;
	--hoc-ink: #2B1520;
	--hoc-font-display: "Qalogre fit", Georgia, serif;
	--hoc-font-text: "Founders Grotesk Official", Arial, sans-serif;
	--hoc-pad: clamp(16px, calc(16px + (100vw - 390px) * .099), 154px);

	/* Tarjeta (escritorio ≥1200, spec §3.10) */
	--hoc-card-w: 272px;
	--hoc-card-h: 360px;
	--hoc-card-radius: 12px;
	--hoc-gap-v: 140px;      /* gap vertical entre tarjetas de una columna */
	--hoc-offset: 180px;     /* desfase de la columna derecha */
	--hoc-gap-col: 32px;     /* aire entre columna y bloque central (no lo fija el spec; ver REPORTE) */

	/* Título */
	--hoc-title-size: 66px;
	--hoc-title-lh: 1.02;

	/* Píldora */
	--hoc-pill-h: 84px;
	--hoc-pill-pad: 0 32px;
	--hoc-pill-radius: 22px;
	--hoc-pill-font: 40px;
	--hoc-pill-gap: 40px;    /* separación "para" ↔ píldora */

	/* Overlay de producto */
	--hoc-ov-inset: 14px;
	--hoc-ov-h: 60px;
	--hoc-ov-radius: 14px;
	--hoc-ov-thumb: 44px;
	--hoc-ov-thumb-radius: 10px;
	--hoc-ov-name: 14px;
	--hoc-ov-price: 13px;
	--hoc-ov-price-del: 12px;
	--hoc-ov-btn: 30px;
	/* Corrección hallazgo 1/3 (2026-09-23): el spec fija miniatura/inset/alto
	   y alto del botón, pero NO fija el gap interno del panel ni el padding
	   horizontal del botón "Ver" — son detalle de implementación. Medido con
	   Puppeteer que a 768px y 390px esos dos valores (8px/16px, iguales a
	   escritorio) dejaban .hoc__meta en 45.9px/34.9px de ancho real: no
	   alcanzaba ni para un precio de 8 cifras, y en Charme D'amour (con
	   oferta) el <ins> con el precio vigente quedaba 0% visible. Se angostan
	   SOLO en tablet/móvil (abajo) sin tocar ningún número de §3.10. */
	--hoc-ov-gap: 8px;
	--hoc-ov-btn-pad: 16px;

	position: relative;
	display: block;
	background: var(--hoc-cream);
	padding-block: 80px;
	overflow: clip; /* evita que el desfase de la columna derecha abra scroll horizontal */
}

@media (min-width: 768px) and (max-width: 1199px) {
	.hoc {
		--hoc-card-w: 200px;
		--hoc-card-h: 267px;
		--hoc-gap-v: 100px;
		--hoc-offset: 134px;
		--hoc-title-size: 52px;
		--hoc-pill-h: 64px;
		--hoc-pill-pad: 0 24px;
		--hoc-pill-font: 30px;
		--hoc-ov-gap: 6px;
		--hoc-ov-btn-pad: 10px;
		padding-block: 64px;
	}
}

@media (max-width: 767px) {
	.hoc {
		--hoc-pad: 16px; /* fijo en móvil (no el clamp): la fórmula del ancho de tarjeta lo asume así */
		/* Corrección hallazgo 8 (2026-09-23): esta variable se REFERENCIABA
		   con fallback pero nunca se declaraba — el 12px real vivía
		   hardcodeado aparte en `column-gap` de .hoc__grid (abajo). Ambos
		   coincidían de casualidad; ahora hay una sola fuente de verdad. */
		--hoc-gap-col-mobile: 12px;
		--hoc-card-w: calc((100vw - (2 * var(--hoc-pad)) - var(--hoc-gap-col-mobile, 12px)) / 2);
		--hoc-card-h: auto;
		--hoc-card-radius: 10px;
		--hoc-gap-v: 40px;
		--hoc-offset: 60px;
		--hoc-title-size: 34px;
		--hoc-pill-h: 52px;
		--hoc-pill-pad: 0 20px;
		--hoc-pill-radius: 14px;
		--hoc-pill-font: 24px;
		--hoc-pill-gap: 14px;
		--hoc-ov-inset: 10px;
		--hoc-ov-h: 52px;
		--hoc-ov-thumb: 36px;
		--hoc-ov-thumb-radius: 8px;
		--hoc-ov-name: 12px;
		--hoc-ov-price: 12px;
		--hoc-ov-price-del: 11px;
		--hoc-ov-btn: 26px;
		--hoc-ov-gap: 5px;
		--hoc-ov-btn-pad: 8px;
		/* Ajuste §3.11 (2026-09-23, última hora): padding-block parejo (48px)
		   dejaba un vacío de ~300px bajo la última tarjeta izquierda (el
		   desfase de la columna derecha + el aire de la sección siguiente).
		   Se separa: el tope queda igual, la base baja a 24px. */
		padding-top: 48px;
		padding-bottom: 24px;
	}
}

/* ===== Rejilla =====
   Escritorio/tablet: 3 columnas (auto 1fr auto) pegadas a --hoc-pad de cada
   lado; la columna del medio es flexible y aloja el bloque sticky centrado.
   Móvil: 2 columnas iguales (izq/der); el bloque de texto pasa a franja
   sticky de ancho completo, primero en el DOM visual (order: -1). */
.hoc .hoc__grid {
	display: grid;
	grid-template-columns: auto 1fr auto;
	column-gap: var(--hoc-gap-col);
	align-items: start;
	padding-inline: var(--hoc-pad);
}
@media (max-width: 767px) {
	.hoc .hoc__grid {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--hoc-gap-col-mobile);
		row-gap: 0;
	}
}

.hoc .hoc__col {
	display: flex;
	flex-direction: column;
	gap: var(--hoc-gap-v);
	width: var(--hoc-card-w);
}
.hoc .hoc__col--der {
	padding-top: var(--hoc-offset);
}
@media (max-width: 767px) {
	.hoc .hoc__col { width: auto; }
}

/* ===== Tarjeta =====
   Toda la tarjeta es UN <a> (el botón "Ver" es un <span> decorativo, sin
   interactivos anidados). Astra pone `a{transition:all .2s linear;
   color:...; text-decoration:...}` y un `:focus{outline:1px dotted}`: se
   neutralizan explícitos, sin depender de :where(). */
.hoc a.hoc__card {
	position: relative;
	display: block;
	width: var(--hoc-card-w);
	height: var(--hoc-card-h);
	border-radius: var(--hoc-card-radius);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background: var(--hoc-ink);
	transition: none;
}
@media (max-width: 767px) {
	.hoc a.hoc__card { aspect-ratio: 3 / 4; }
}
.hoc a.hoc__card:focus:not(:focus-visible) { outline: 0; }
.hoc a.hoc__card:focus-visible {
	outline: 3px solid var(--hoc-brand);
	outline-offset: 3px;
}

/* (0,3,0) — le gana a `.elementor img{height:auto}` (0,1,1) sin !important
   (gotcha 94, mismo patrón que categorias-v2.css). */
.hoc .hoc__card .hoc__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
	transition: transform .4s ease;
}
.hoc a.hoc__card:hover .hoc__img,
.hoc a.hoc__card:focus-visible .hoc__img {
	transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
	.hoc .hoc__card .hoc__img { transition: none; }
}

/* ===== Overlay translúcido de producto ===== */
.hoc .hoc__panel {
	position: absolute;
	left: var(--hoc-ov-inset);
	right: var(--hoc-ov-inset);
	bottom: var(--hoc-ov-inset);
	height: var(--hoc-ov-h);
	border-radius: var(--hoc-ov-radius);
	display: flex;
	align-items: center;
	gap: var(--hoc-ov-gap);
	padding-inline: var(--hoc-ov-gap);
	/* Ajuste §3.11 (2026-09-23, última hora): .35 -> .5. El contraste del
	   texto crema no llegaba a 4.5:1 sobre 4 de las 6 fotos reales
	   (hallazgo 7 del panel de escépticos, documentado en REPORTE.md §7).
	   El text-shadow de .hoc__name/.hoc__price (abajo) queda como red de
	   seguridad adicional, no como sustituto de este arreglo. */
	background: rgba(30, 20, 22, .5);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--hoc-cream);
	overflow: hidden; /* el precio con oferta (del+ins) no puede desbordar el panel a 173px (móvil) */
}
/* Sin soporte de backdrop-filter: fondo más opaco para que el texto crema
   siga legible sobre cualquier foto (gotcha del spec §3.10). */
@supports not (backdrop-filter: blur(1px)) {
	.hoc .hoc__panel { background: rgba(20, 13, 15, .62); }
}

.hoc .hoc__thumb {
	flex: none;
	width: var(--hoc-ov-thumb);
	height: var(--hoc-ov-thumb);
	border-radius: var(--hoc-ov-thumb-radius);
	background: #fff;
	object-fit: cover;
}

.hoc .hoc__meta {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hoc .hoc__name {
	font-family: var(--hoc-font-text);
	font-weight: 400;
	font-size: var(--hoc-ov-name);
	line-height: 1.2;
	color: var(--hoc-cream);
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Mitigación hallazgo 7 (2026-09-23): sobre las 6 fotos reales el overlay
	   al 35% (rgba(30,20,22,.35), número fijado en §3.10) no siempre llega a
	   4.5:1 (medido: 3 de 18 combinaciones texto×foto pasan AA). Subir la
	   opacidad arreglaría el contraste de verdad, pero es un valor explícito
	   del spec — no se toca sin que el dueño lo decida (queda documentado en
	   REPORTE.md). Esta sombra es una red de seguridad independiente del
	   fondo: no sustituye el arreglo real. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.hoc .hoc__price {
	font-family: var(--hoc-font-text);
	font-weight: 400;
	font-size: var(--hoc-ov-price);
	line-height: 1.2;
	color: rgba(254, 243, 231, .8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.hoc .hoc__price del {
	font-size: var(--hoc-ov-price-del);
	color: rgba(254, 243, 231, .6);
	text-decoration: line-through;
	margin-right: 4px;
}
.hoc .hoc__price ins {
	text-decoration: none;
}
/* Corrección hallazgo 1/3 (2026-09-23): en tablet y móvil, con el precio en
   oferta (<del>…</del> <ins>…</ins>, con un espacio real entre los dos) el
   nowrap+ellipsis dejaba el <ins> con el precio vigente 0% visible — el
   cliente solo veía el precio TACHADO. Se permite envolver en el espacio
   ya existente entre <del> y <ins> (el panel mide 52-60px de alto, sobra
   para 2 líneas) en vez de recortar con "…". No toca ningún número de
   §3.10 (inset/alto/miniatura/tipografía siguen igual). */
@media (max-width: 1199px) {
	.hoc .hoc__price {
		white-space: normal;
		overflow-wrap: normal;
		text-overflow: clip;
	}
}

/* Ajuste §3.11 (2026-09-23, última hora): a 173px de tarjeta (móvil) la
   miniatura + el nombre + el precio no entran en una sola línea de 52px
   sin recortar el nombre con "…". Se oculta la miniatura y se deja que el
   nombre envuelva hasta 2 líneas — el panel crece (height -> min-height)
   para darle espacio a la segunda línea sin desbordar la tarjeta. No toca
   ningún número de §3.10 (inset/miniatura/tipografía de escritorio y
   tablet siguen igual; el panel de escritorio/tablet sigue con altura
   fija). Verificado con Puppeteer contra las 6 tarjetas reales a 390px:
   ningún nombre queda cortado con elipsis. */
@media (max-width: 767px) {
	.hoc .hoc__thumb {
		display: none;
	}
	.hoc .hoc__panel {
		height: auto;
		min-height: var(--hoc-ov-h);
	}
	.hoc .hoc__name {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		overflow-wrap: break-word;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
}

.hoc .hoc__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--hoc-ov-btn);
	padding-inline: var(--hoc-ov-btn-pad);
	border-radius: 999px;
	background: var(--hoc-cream);
	color: var(--hoc-brand);
	font-family: var(--hoc-font-text);
	font-weight: 400;
	font-size: 13px;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
}

/* ===== Bloque central (titular + píldora) =====
   Escritorio/tablet: sticky centrado en la ventana mientras dura la
   sección. Los -100px son la mitad aproximada del alto del bloque (título +
   píldora), medida en el banco — no es una fórmula genérica. */
.hoc .hoc__text {
	position: sticky;
	top: 50vh; /* fallback sin svh */
	top: calc(50svh - 100px);
	align-self: start;
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
}

.hoc h2.hoc__title {
	margin: 0;
	font-family: var(--hoc-font-display);
	font-weight: 400;
	font-size: var(--hoc-title-size);
	line-height: var(--hoc-title-lh);
	color: var(--hoc-brand);
	text-transform: none; /* Astra: h2{text-transform:capitalize} (gotcha 85) */
}
.hoc .hoc__line {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--hoc-pill-gap);
	line-height: inherit; /* explícito: no heredar el .83em de Astra en px fijo (gotcha 85) */
}

/* ===== Píldora "odómetro" =====
   display:inline-grid con las tres palabras en la MISMA celda (grid-area
   1/1): el ancho de la píldora queda fijado por la palabra más larga sin
   JS, porque el tamaño de la pista de grid se calcula con el contenido
   intrínseco de los tres hijos aunque estén desplazados con `transform`
   (transform no afecta layout/sizing). */
.hoc .hoc__pill {
	display: inline-grid;
	place-items: center;
	height: var(--hoc-pill-h);
	padding: var(--hoc-pill-pad);
	border-radius: var(--hoc-pill-radius);
	background: var(--hoc-brand);
	overflow: hidden;
	vertical-align: bottom;
}

.hoc .hoc__word {
	grid-area: 1 / 1;
	display: block;
	white-space: nowrap;
	font-family: var(--hoc-font-display);
	font-weight: 400;
	font-size: var(--hoc-pill-font);
	line-height: 1;
	color: var(--hoc-cream);
	text-transform: none;
	transform: translateY(110%);
	opacity: 0;
	transition: transform .4s cubic-bezier(.22, .61, .36, 1),
		opacity .4s cubic-bezier(.22, .61, .36, 1),
		visibility 0s linear .4s;
	visibility: hidden;
}
.hoc .hoc__word.is-active {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	transition: transform .4s cubic-bezier(.22, .61, .36, 1),
		opacity .4s cubic-bezier(.22, .61, .36, 1);
}
.hoc .hoc__word.is-above { transform: translateY(-110%); opacity: 0; }
.hoc .hoc__word.is-below { transform: translateY(110%); opacity: 0; }

@media (max-width: 767px) {
	.hoc .hoc__text {
		position: sticky;
		top: calc(86px + 12px); /* alto de header móvil (86px) + 12px de aire */
		grid-column: 1 / -1;
		order: -1;
		z-index: 2;
		background: var(--hoc-cream);
		max-width: none;
		padding-block: 16px;
		text-align: center;
	}
	.hoc .hoc__line { justify-content: center; }
	/* El header se autooculta al bajar (.is-hidden, header-scroll.js): la
	   franja sube con él para no dejar un hueco crema flotando. */
	body:has(.hda-header.is-hidden) .hoc .hoc__text { top: 12px; }
}

/* ===== prefers-reduced-motion: cambio instantáneo, sin zoom de hover ===== */
@media (prefers-reduced-motion: reduce) {
	.hoc .hoc__word,
	.hoc .hoc__word.is-active {
		transition: none;
	}
	.hoc .hoc__text { scroll-behavior: auto; }
}