/* ==========================================================================
   Happy Image Carousel
   Todo lo configurable pasa por variables: Elementor las pisa en el wrapper.
   ========================================================================== */

.hic-carousel {
	--hic-img-width: 100%;
	--hic-ratio: 1 / 1;
	--hic-fit: contain;
	--hic-img-radius: 0px;
	--hic-title-gap: 14px;
	--hic-title-lines: 2;
	--hic-title-lh: 1.25;

	--hic-arrow-size: 40px;
	--hic-arrow-icon: 20px;
	--hic-arrow-offset: -6px;
	--hic-arrow-top: 50%;
	--hic-arrow-radius: 50%;
	--hic-arrow-color: #222;
	--hic-arrow-bg: #fff;
	--hic-arrow-border: #e5e5e5;
	--hic-arrow-color-hover: var(--hic-arrow-color);
	--hic-arrow-bg-hover: #f4f4f4;

	--hic-dot: #cfcfcf;
	--hic-dot-active: #222;
	--hic-dot-size: 8px;
	--hic-dot-top: 18px;

	position: relative;
	width: 100%;
}

.hic-carousel .hic-swiper {
	overflow: hidden;
}

/* Todas las slides al mismo alto (las tarjetas quedan parejas). */
.hic-carousel .hic-slide {
	height: auto;
	display: flex;
	box-sizing: border-box;
}

/* --- Margen a los costados -------------------------------------------------
   Lo que permite mezclar anchos en una misma portada: el bloque de imágenes
   a sangre y esta fila con aire a los lados, sin envolver cada sección en un
   contenedor de Elementor.

   Va en el carrusel y en el encabezado porque son hermanos, no padre e hijo
   (ver HIC_Render::carousel). 0 por defecto: es como se veía antes. */
.hic-carousel,
.hic-heading {
	padding-left: var(--hic-pad-lados, 0);
	padding-right: var(--hic-pad-lados, 0);
	box-sizing: border-box;
}

/* --- Ítem ----------------------------------------------------------------- */
.hic-carousel .hic-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hic-title-gap);
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	color: inherit;
	text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

.hic-carousel a.hic-item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --- Imagen --------------------------------------------------------------- */
.hic-carousel .hic-media {
	display: block;
	width: var(--hic-img-width);
	max-width: 100%;
	aspect-ratio: var(--hic-ratio);
	border-radius: var(--hic-img-radius);
	overflow: hidden;
	box-sizing: border-box;
	flex: 0 0 auto;
	line-height: 0;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.hic-carousel .hic-media .hic-img {
	display: block;
	width: 100%;
	height: var(--hic-img-h, 100%);
	max-width: none;
	object-fit: var(--hic-fit);
	border-radius: inherit;
	transition: transform .35s ease;
}

/* --- Título --------------------------------------------------------------- */
.hic-carousel .hic-title {
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: 15px;
	font-weight: 600;
	line-height: var(--hic-title-lh);
	color: #222;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--hic-title-lines);
	line-clamp: var(--hic-title-lines);
	overflow: hidden;
	overflow-wrap: break-word;
	hyphens: auto;
	transition: color .2s ease;
}

/* Reserva el alto de N líneas para que las imágenes queden alineadas. */
.hic-reserve-yes .hic-carousel .hic-title {
	min-height: calc(var(--hic-title-lines) * var(--hic-title-lh) * 1em);
}

/* --- Estilo: Tarjeta (imagen 1) ------------------------------------------ */
.hic-carousel.hic--card .hic-item {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	padding: 28px 20px;
}

@media (max-width: 767px) {
	.hic-carousel.hic--card .hic-item {
		padding: 18px 12px;
	}
}

/* --- Estilo: Foto con pie oscuro ------------------------------------------
   Foto grande arriba y una franja de color abajo con el nombre y un botón.
   A diferencia de los otros tres, el título NO va suelto debajo de la
   imagen: va adentro de la franja, que es parte de la tarjeta (ver
   HIC_Render::item, que arma ese marcado solo para este estilo).

   La tarjeta recorta con overflow:hidden y la imagen va sin radio propio:
   así las esquinas de arriba las redondea la tarjeta y la franja cierra
   las de abajo, sin que queden dos radios peleando. */
.hic-carousel.hic--pie {
	--hic-fit: cover;
	--hic-title-gap: 0;
}

.hic-carousel.hic--pie .hic-item {
	/* Respeta el radio que el cliente haya configurado en Homepage (el
	   mismo --hh-borde-radio del borde/sombra compartidos); 14px es el
	   valor propio cuando no configuró ninguno. Sin esto, la tarjeta
	   ignoraba ese ajuste porque este selector le gana por especificidad. */
	border-radius: var(--hh-borde-radio, 14px);
	overflow: hidden;
	padding: 0;
	background: var(--hic-pie-bg, #1f2329);
	/* La tarjeta tiene que llenar el alto de la slide para que todas las
	   franjas queden alineadas aunque un nombre ocupe dos líneas. */
	height: 100%;
	justify-content: flex-start;
}

.hic-carousel.hic--pie .hic-media {
	width: 100%;
	aspect-ratio: var(--hic-ratio, 4 / 3);
	border-radius: 0;
}

.hic-carousel.hic--pie .hic-pie {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	/* mt-auto: si una tarjeta tiene el nombre en una línea y la de al lado
	   en dos, la franja igual queda pegada abajo en las dos. */
	margin-top: auto;
	padding: 16px 14px 18px;
	color: #fff;
	box-sizing: border-box;
}

.hic-carousel.hic--pie .hic-title {
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* El botón es decorativo: toda la tarjeta ya es el enlace, así que no se
   anida un <a> adentro de otro (marcado inválido y un salto de tabulación
   de más por cada categoría). */
.hic-carousel.hic--pie .hic-cta {
	display: inline-block;
	padding: 8px 15px;
	border: 1px solid currentColor;
	border-radius: 4px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .06em;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color .2s ease, color .2s ease;
}

.hic-carousel.hic--pie .hic-item:hover .hic-cta,
.hic-carousel.hic--pie .hic-item:focus-visible .hic-cta {
	background: #fff;
	color: var(--hic-pie-bg, #1f2329);
}

@media (max-width: 767px) {
	.hic-carousel.hic--pie .hic-pie {
		gap: 10px;
		padding: 13px 10px 15px;
	}

	.hic-carousel.hic--pie .hic-title {
		font-size: 13px;
	}
}


/* --- Estilo: Círculo (imagen 2) ------------------------------------------- */
.hic-carousel.hic--circle {
	--hic-fit: cover;
	--hic-title-gap: 18px;
}

.hic-carousel.hic--circle .hic-media {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}

.hic-carousel.hic--circle .hic-media .hic-img {
	height: 100%;
}

.hic-carousel.hic--circle .hic-title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* --- Hover ---------------------------------------------------------------- */
.hic-hover-lift .hic-carousel .hic-item:hover {
	transform: translateY(-3px);
}

.hic-hover-lift .hic-carousel.hic--card .hic-item:hover {
	box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
}

.hic-hover-zoom .hic-carousel .hic-item:hover .hic-img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.hic-carousel .hic-item,
	.hic-carousel .hic-img {
		transition: none !important;
		transform: none !important;
	}
}

/* --- Flechas -------------------------------------------------------------- */
.hic-carousel .hic-arrow {
	position: absolute;
	top: var(--hic-arrow-top);
	transform: translateY(-50%);
	z-index: 5;

	/* Blindado contra los estilos de <button> del tema. */
	box-sizing: border-box;
	width: var(--hic-arrow-size);
	height: var(--hic-arrow-size);
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	line-height: 1;
	font-size: 0;
	text-transform: none;
	letter-spacing: normal;
	appearance: none;
	-webkit-appearance: none;

	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hic-arrow-color);
	background: var(--hic-arrow-bg);
	border: 1px solid var(--hic-arrow-border);
	border-radius: var(--hic-arrow-radius);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

.hic-carousel .hic-arrow:hover,
.hic-carousel .hic-arrow:focus {
	color: var(--hic-arrow-color-hover);
	background: var(--hic-arrow-bg-hover);
	border-color: var(--hic-arrow-border);
	outline: none;
}

.hic-carousel .hic-arrow:focus-visible {
	outline: 2px solid var(--hic-arrow-color);
	outline-offset: 2px;
}

.hic-carousel .hic-arrow svg {
	display: block;
	width: var(--hic-arrow-icon);
	height: var(--hic-arrow-icon);
	flex: 0 0 auto;
	pointer-events: none;
}

.hic-carousel .hic-prev { left: var(--hic-arrow-offset); }
.hic-carousel .hic-next { right: var(--hic-arrow-offset); }

.hic-carousel .hic-arrow.swiper-button-disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

/* Si todos los ítems entran en pantalla, Swiper "bloquea" la navegación:
   se esconden flechas y puntos (gana sobre el "Mostrar" de Elementor). */
.hic-carousel .hic-arrow.swiper-button-lock,
.hic-carousel .hic-pagination.swiper-pagination-lock {
	display: none !important;
}

/* --- Paginación ----------------------------------------------------------- */
.hic-carousel .hic-pagination {
	position: static;
	margin-top: var(--hic-dot-top);
	text-align: center;
	line-height: 0;
}

.hic-carousel .hic-pagination .swiper-pagination-bullet {
	width: var(--hic-dot-size);
	height: var(--hic-dot-size);
	background: var(--hic-dot);
	opacity: 1;
	margin: 0 4px;
}

.hic-carousel .hic-pagination .swiper-pagination-bullet-active {
	background: var(--hic-dot-active);
}

/* --- Editor: sin ítems ---------------------------------------------------- */
.hic-empty {
	padding: 24px;
	text-align: center;
	color: #777;
	border: 1px dashed #ccc;
	border-radius: 8px;
}

/* --- Encabezado de la fila ------------------------------------------------ */
/* Lo manda el panel (título de la sección). Hereda del tema a propósito:
   el tamaño y la tipografía los define la web, no este plugin. La línea
   decorativa al costado se puede apagar con --hic-heading-line: none. */
.hic-heading {
	display: flex;
	align-items: center;
	gap: var(--hic-heading-gap, 16px);
	margin: 0 0 var(--hic-heading-space, 20px);
	font-size: var(--hic-heading-size, 1.4em);
	font-weight: var(--hic-heading-weight, 700);
	color: var(--hic-heading-color, inherit);
	line-height: 1.2;
}

.hic-heading::after {
	content: "";
	display: var(--hic-heading-line, block);
	flex: 1 1 auto;
	height: var(--hic-heading-line-size, 2px);
	background: var(--hic-heading-line-color, currentColor);
	opacity: var(--hic-heading-line-opacity, .15);
}

/* --- Estilo: Solo imagen, tamaño original --------------------------------- */
/* La imagen ocupa todo el ancho de la slide y define su propio alto: no se
   recorta nada. Pensado para piezas gráficas ya diseñadas (una tarjeta de
   categoría con su texto adentro), donde cualquier recorte se come parte
   del arte. Como cada imagen puede tener un alto distinto, las slides se
   alinean arriba en vez de estirarse. */
.hic-carousel.hic--natural {
	--hic-ratio: auto;
	--hic-img-radius: 10px;
	--hic-fit: unset;
}

.hic-carousel.hic--natural .hic-slide {
	align-items: flex-start;
}

.hic-carousel.hic--natural .hic-media {
	width: 100%;
}

.hic-carousel.hic--natural .hic-media .hic-img {
	height: auto;
}

/* --- Disposición: grilla --------------------------------------------------
   Mismo marcado que el carrusel, sin Swiper. El JS se saltea esta clase,
   así que alcanza con deshacer el layout de fila de Swiper y repartir el
   ancho entre las columnas.

   Se usa flex con calc() y no grid con repeat(): --hic-cols puede venir
   con decimales (el control admite 2.3 para el modo carrusel), y un
   repeat() con un valor no entero invalida la declaración entera y deja
   la grilla en una sola columna. Con calc() un decimal da un ancho raro
   pero nada se rompe.

   --hic-cols y --hic-gap los escribe Elementor por dispositivo, con sus
   propios cortes: los mismos que usa el resto de la página. */
.hic-carousel.hic--grilla .hic-swiper {
	overflow: visible;
}

.hic-carousel.hic--grilla .swiper-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hic-gap, 20px);
	transform: none !important;
}

.hic-carousel.hic--grilla .hic-slide {
	flex: 0 0 calc(
		(100% - (var(--hic-cols, 4) - 1) * var(--hic-gap, 20px)) /
		var(--hic-cols, 4)
	);
	width: auto !important;
	margin: 0 !important;
}


/* ==========================================================================
   La página /marcas y el enlace que lleva a ella
   --------------------------------------------------------------------------
   La fila de la portada muestra las marcas destacadas en el panel; esta
   página las muestra TODAS, en grilla. Son el mismo elemento visual —logo
   cuadrado con el nombre debajo— y por eso comparten esta hoja.
   ========================================================================== */

/* El enlace debajo del carrusel. Centrado y discreto: es una salida, no
   una llamada a la acción que compita con las marcas de arriba. */
.hic-ver-todas {
	margin: 14px 0 0;
	padding-left: var(--hic-pad-lados, 0);
	padding-right: var(--hic-pad-lados, 0);
	text-align: center;
}

.hic-ver-todas a {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid var(--hh-borde, #e5e7eb);
	border-radius: var(--hh-borde-radio, 8px);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: inherit;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease;
}

.hic-ver-todas a:hover {
	border-color: currentColor;
}