/* ==========================================================================
   EXPLORA CATEGORÍAS — widget hda-categorias (interruptor hda_categorias_v2_enabled)
   Spec: desarrollo/web/categorias-v2.md. Tokens propios en .hcat (no hereda
   nada de .hh2 ni de .hda-header: 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, ul, li, a, button)
   están en juego a propósito.
   ========================================================================== */

.hcat {
	--hcat-brand: #7A0D13;
	--hcat-cream: #FEF3E7;
	--hcat-ink: #2B1520;
	--hcat-soft: #6E5A62;
	--hcat-track: rgba(122, 13, 19, .22);
	--hcat-font-display: "Qalogre fit", Georgia, serif;
	--hcat-font-text: "Founders Grotesk Official", Arial, sans-serif;
	--hcat-pad: clamp(16px, calc(16px + (100vw - 390px) * .099), 154px);
	--hcat-card-w: 236px;
	--hcat-gap: 12px;

	position: relative;
	display: block;
	background: var(--hcat-cream);
	padding-block: 150px 72px;
}

@media (max-width: 767px) {
	.hcat { --hcat-card-w: 160px; --hcat-gap: 10px; padding-block: 56px 48px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.hcat { --hcat-card-w: 208px; }
}

/* ===== Cabecera ===== */
.hcat .hcat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-inline: var(--hcat-pad);
	margin-bottom: 48px;
}
@media (max-width: 767px) {
	.hcat .hcat__head { flex-direction: column; align-items: flex-start; margin-bottom: 24px; }
}

/* Título: Astra pone h2{text-transform:capitalize} y h1-h6{line-height:.83em}
   (gotcha 85) — los dos se pisan explícitos, sin depender de :where(). */
.hcat h2.hcat__title {
	margin: 0;
	font-family: var(--hcat-font-display);
	font-weight: 400;
	font-size: 48px;
	line-height: 1.05;
	color: var(--hcat-brand);
	text-transform: none;
}
@media (max-width: 767px) {
	.hcat h2.hcat__title { font-size: 30px; }
}

/* ===== Pestañas (píldora) =====
   role=tab construido a mano (no hay ningún role=tab en el tema). Astra no
   tiene una regla propia de "button" con especificidad de etiqueta salvo el
   fondo beige de :hover/:focus del gotcha 54, así que (0,2,0) alcanza aquí,
   pero se sube a (0,3,0) para no depender del orden de las hojas. */
.hcat .hcat__tabs {
	display: inline-flex;
	align-items: center;
	background: transparent;
	flex: none;
}
@media (max-width: 767px) {
	.hcat .hcat__tabs { width: 100%; }
}

.hcat .hcat__tabs .hcat__tab {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 18px;
	border-radius: 999px;
	font-family: var(--hcat-font-text);
	font-weight: 400;
	font-size: 15px;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	color: var(--hcat-brand);
	background: transparent;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.hcat .hcat__tabs .hcat__tab[aria-selected="true"] {
	background: var(--hcat-brand);
	color: var(--hcat-cream);
}
.hcat .hcat__tabs .hcat__tab:hover:not([aria-selected="true"]) {
	background: rgba(122, 13, 19, .08);
}
.hcat .hcat__tabs .hcat__tab:focus:not(:focus-visible) { outline: 0; }
.hcat .hcat__tabs .hcat__tab:focus-visible {
	outline: 2px solid var(--hcat-brand);
	outline-offset: 2px;
}

/* ===== Fila / carrusel =====
   Ninguna regla propia pone `display` sobre .hcat__panel: el `hidden` del
   panel inactivo (atributo HTML) es lo único que evita que sus fotos
   `loading=lazy` se descarguen (gotchas 55/61/72). */
.hcat .hcat__panel { }

.hcat ul.hcat__track {
	display: flex;
	gap: var(--hcat-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--hcat-pad);
	padding-inline: var(--hcat-pad);
	margin: 0;
	list-style: none;
	scrollbar-width: none;
	max-width: none;
}
.hcat ul.hcat__track::-webkit-scrollbar { display: none; }

.hcat li.hcat__item {
	flex: 0 0 var(--hcat-card-w);
	scroll-snap-align: start;
	list-style: none;
}

.hcat a.hcat__card {
	display: block;
	text-decoration: none;
	color: inherit;
	/* Astra pone `a{transition:all .2s linear}` (especificidad de etiqueta) y
	   esta tarjeta nunca declaraba su propio `transition`, así que lo heredaba:
	   el anillo de foco tardaba ~200-300ms en llegar a su color/ancho/radio
	   reales (corrector, hallazgos de comportamiento). Ninguna propiedad de
	   esta tarjeta está pensada para animarse en su estado base (el zoom de
	   la foto ya tiene su propio `transition` en `.hcat__media img`). */
	transition: none;
}
.hcat a.hcat__card:focus:not(:focus-visible) { outline: 0; }
.hcat a.hcat__card:focus-visible {
	outline: 4px solid var(--hcat-brand);
	outline-offset: 3px;
	border-radius: 12px;
}

.hcat .hcat__media {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 236 / 304;
	border-radius: 12px;
	overflow: hidden;
	background: var(--hcat-track);
}

/* (0,2,1) — le gana a `.elementor img{height:auto}` (0,1,1) sin !important
   (gotcha 94, verificado con CSS.getMatchedStylesForNode, gotcha 18). */
.hcat .hcat__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .4s ease;
}
.hcat a.hcat__card:hover .hcat__media img,
.hcat a.hcat__card:focus-visible .hcat__media img {
	transform: scale(1.04);
}

.hcat .hcat__meta {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 14px;
	min-height: calc(18px * 1.3 * 2); /* reserva 2 líneas: la barra queda alineada aunque un nombre envuelva */
}
@media (max-width: 767px) {
	.hcat .hcat__meta { margin-top: 12px; }
}

.hcat .hcat__name {
	font-family: var(--hcat-font-text);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.3;
	color: var(--hcat-ink);
}
.hcat .hcat__count {
	font-family: var(--hcat-font-text);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.3;
	color: var(--hcat-soft);
	font-variant-numeric: tabular-nums;
	flex: none;
}

/* ===== Pie: barra + flechas =====
   align-items: flex-start (no center): con center, la barra fina (6px) queda
   centrada contra el alto de las flechas (52/44px) y el "nombres → barra"
   del spec §3.9 (56/32) medía 23px/19px de más en escritorio/tablet
   (corrector, hallazgo de fidelidad). Con flex-start, el tope de la barra
   cae exactamente al `margin-top` del pie, sin tocar la geometría de las
   flechas (siguen midiendo 52/44px, solo que ahora arrancan arriba). */
.hcat .hcat__foot {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding-inline: var(--hcat-pad);
	margin-top: 56px;
}
@media (max-width: 767px) {
	.hcat .hcat__foot { margin-top: 32px; }
}

.hcat .hcat__progress {
	position: relative;
	width: 402px;
	max-width: 100%;
	height: 6px;
	border-radius: 999px;
	background: var(--hcat-track);
	overflow: hidden;
	flex: 1 1 auto;
}
@media (min-width: 768px) {
	.hcat .hcat__progress { flex: 0 0 402px; }
}
.hcat .hcat__progress-fill {
	position: absolute;
	inset: 0;
	width: 0%;
	border-radius: inherit;
	background: var(--hcat-brand);
}

.hcat .hcat__arrows {
	display: flex;
	gap: 17px;
	flex: none;
}
/* El JS pone `hidden` (atributo HTML) cuando un solo panel/fila no desborda
   (spec §3.8); sin este override, el `display:flex` de arriba (misma
   especificidad que el `[hidden]` del UA) ganaría por venir después. */
.hcat .hcat__arrows[hidden] { display: none; }
/* Ocultas en <768px (se desliza con el dedo, spec §3.7) */
@media (max-width: 767px) {
	.hcat .hcat__arrows { display: none; }
	.hcat .hcat__progress { flex: 1 1 auto; }
}

.hcat .hcat__arrows .hcat__arrow {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 2px solid var(--hcat-brand);
	color: var(--hcat-brand);
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
@media (min-width: 768px) and (max-width: 1023px) {
	.hcat .hcat__arrows .hcat__arrow { width: 44px; height: 44px; }
}
.hcat .hcat__arrows .hcat__arrow:hover,
.hcat .hcat__arrows .hcat__arrow:focus-visible {
	background: var(--hcat-brand);
	color: var(--hcat-cream);
}
.hcat .hcat__arrows .hcat__arrow:focus:not(:focus-visible) { outline: 0; }
.hcat .hcat__arrows .hcat__arrow:focus-visible {
	outline: 2px solid var(--hcat-brand);
	outline-offset: 2px;
}
.hcat .hcat__arrows .hcat__arrow[aria-disabled="true"] {
	opacity: .35;
	cursor: default;
}
.hcat .hcat__arrows .hcat__arrow[aria-disabled="true"]:hover {
	background: transparent;
	color: var(--hcat-brand);
}

/* ===== prefers-reduced-motion: sin transiciones ni scroll suave ===== */
@media (prefers-reduced-motion: reduce) {
	.hcat .hcat__media img { transition: none; }
	.hcat .hcat__tabs .hcat__tab,
	.hcat .hcat__arrows .hcat__arrow { transition: none; }
	.hcat ul.hcat__track { scroll-behavior: auto; }
}