/**
 * addon-landings — frontend CSS.
 * El instalador copia este fichero a theme/<tema>/css/landings.css en el primer
 * install y NO se sobrescribe en actualizaciones — el cliente puede personalizarlo.
 */

.landing-page { margin: 24px 0 32px; }

.landing-page__title {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.25;
	color: #1a1a1a;
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 2px solid #f0f0f0;
}

.landing-page__hero { display: flex; flex-wrap: wrap; gap: 20px; margin: 0 0 28px; }
.landing-page__hero-image { flex: 1 1 360px; }
.landing-page__hero-image img { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.landing-page__hero-video { flex: 1 1 480px; }
.landing-page__hero-video iframe { width: 100%; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }

.landing-page__description {
	font-size: 15px;
	line-height: 1.75;
	color: #3a3a3a;
	margin: 0 0 32px;
}

.landing-page__description > *:first-child { margin-top: 0; }
.landing-page__description > *:last-child  { margin-bottom: 0; }

.landing-page__description p { margin: 0 0 16px; line-height: 1.75; }

.landing-page__description h2 {
	font-size: 24px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 36px 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ececec;
	line-height: 1.3;
}

.landing-page__description h3 {
	font-size: 19px;
	font-weight: 600;
	color: #2a2a2a;
	margin: 28px 0 12px;
	line-height: 1.35;
}

.landing-page__description h4 {
	font-size: 16px;
	font-weight: 600;
	color: #2a2a2a;
	margin: 22px 0 10px;
}

.landing-page__description ul,
.landing-page__description ol {
	padding-left: 32px;
	margin: 14px 0 18px 8px;
	list-style-position: outside;
}
.landing-page__description ul { list-style-type: disc; }
.landing-page__description ol { list-style-type: decimal; }
.landing-page__description li {
	margin: 0 0 8px;
	line-height: 1.65;
	display: list-item;
	list-style-type: inherit;
}
.landing-page__description li > p { margin: 0 0 6px; }

/* Enlaces SOLO dentro de bloques textuales (no afectan al carrusel) */
.landing-page__description p a,
.landing-page__description ul a,
.landing-page__description ol a,
.landing-page__description blockquote a,
.landing-page__description h2 a,
.landing-page__description h3 a,
.landing-page__description h4 a {
	color: #001644;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
	transition: opacity .2s ease;
}
.landing-page__description p a:hover,
.landing-page__description ul a:hover,
.landing-page__description ol a:hover,
.landing-page__description blockquote a:hover,
.landing-page__description h2 a:hover,
.landing-page__description h3 a:hover,
.landing-page__description h4 a:hover { opacity: .7; }

.landing-page__description strong,
.landing-page__description b { color: #1a1a1a; font-weight: 700; }

.landing-page__description em,
.landing-page__description i { font-style: italic; color: #444; }

.landing-page__description blockquote {
	border-left: 4px solid #001644;
	background: #f7fbff;
	padding: 12px 18px;
	margin: 18px 0;
	color: #444;
	font-style: italic;
}

.landing-page__description img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	margin: 12px 0;
}

.landing-page__description hr { border: 0; border-top: 1px solid #ececec; margin: 28px 0; }

.landing-page__description code {
	background: #f4f5f7;
	color: #c0392b;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 0.9em;
}

.landing-page__description table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.landing-page__description th,
.landing-page__description td { padding: 10px 12px; border: 1px solid #e5e5e5; text-align: left; }
.landing-page__description th { background: #f7f9fb; font-weight: 600; }

/* === Carrusel nativo (scroll-snap) — sin Slick ===
   Estructura:
     .landing-carousel
       .landing-carousel__title
       .landing-carousel__slider.landing-carousel__track   ← contiene los .products-list__item
       .landing-carousel__nav.landing-carousel__nav--prev   (inyectado por JS)
       .landing-carousel__nav.landing-carousel__nav--next   (inyectado por JS)
*/
.landing-carousel { margin: 32px 0; color: #42484e; padding: 0 70px; position: relative; }
.landing-carousel__title {
	font-size: 22px;
	font-weight: 700;
	color: #001644;
	margin: 0 0 16px;
	padding: 0 0 8px;
	border-bottom: 2px solid #f0f0f0;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	line-height: 1.2;
}

/* Variables de slides/gap — selector SIMPLE para que las media queries (también simples)
   puedan sobreescribirlas sin guerra de especificidad. */
.landing-carousel__track {
	--lc-slides: 5;
	--lc-gap: 16px;
}

/* Propiedades de layout — selector ESPECÍFICO + !important para anular las reglas del
   theme sobre .products-list / .products-list--5 / etc. (que aplican display: grid). */
.landing-carousel .landing-carousel__track,
.landing-carousel .landing-carousel__track.products-list,
.landing-carousel .landing-carousel__track.products-list--1,
.landing-carousel .landing-carousel__track.products-list--2,
.landing-carousel .landing-carousel__track.products-list--3,
.landing-carousel .landing-carousel__track.products-list--4,
.landing-carousel .landing-carousel__track.products-list--5 {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
	grid-gap: 0 !important;
	gap: var(--lc-gap) !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 0 12px;
	margin: 0 !important;
	width: 100% !important;
	min-width: 0 !important;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.landing-carousel .landing-carousel__track::-webkit-scrollbar { display: none; }

/* Cada slide hijo directo del track ocupa una fracción del ancho según --lc-slides */
.landing-carousel .landing-carousel__track > .products-list__item,
.landing-carousel .landing-carousel__track > * {
	flex: 0 0 calc((100% - (var(--lc-slides) - 1) * var(--lc-gap)) / var(--lc-slides)) !important;
	max-width: calc((100% - (var(--lc-slides) - 1) * var(--lc-gap)) / var(--lc-slides)) !important;
	min-width: 0 !important;
	margin: 0 !important;
	scroll-snap-align: start;
	display: flex;
}

/* Flechas */
.landing-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 0;
	background: #fff;
	color: #001644;
	box-shadow: 0 2px 10px rgba(0,0,0,.12);
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: opacity .2s ease, background .2s ease, box-shadow .2s ease;
	padding: 0;
}
.landing-carousel__nav:hover { background: #f4f7fc; box-shadow: 0 3px 14px rgba(0,0,0,.18); }
.landing-carousel__nav.is-disabled { opacity: 0; pointer-events: none; }
.landing-carousel__nav--prev { left: 10px; }
.landing-carousel__nav--next { right: 10px; }
.landing-carousel__nav--prev span { margin-right: 3px; }
.landing-carousel__nav--next span { margin-left: 3px; }

/* Si no hay overflow (todos los slides caben), ocultar flechas */
.landing-carousel.is-no-overflow .landing-carousel__nav { display: none; }

/* Responsive: cuántos slides se ven a la vez.
   Selector simple → misma especificidad que el bloque base, las MQ ganan por orden.
   En los breakpoints SIN flechas usamos fraccionales para que asome el siguiente slide
   (peek): así el cliente percibe visualmente que el carrusel se puede arrastrar. */
@media (max-width: 1366px) {
	.landing-carousel__track { --lc-slides: 4; }
}
@media (max-width: 1024px) {
	.landing-carousel { padding: 0; }
	.landing-carousel__track { --lc-slides: 3.2; }
	.landing-carousel__nav { display: none; }
}
@media (max-width: 768px) {
	.landing-carousel__track { --lc-slides: 2.2; --lc-gap: 12px; }
}
@media (max-width: 480px) {
	.landing-carousel__track { --lc-slides: 1.2; --lc-gap: 10px; }
}

@media (max-width: 768px) {
	.landing-page__title { font-size: 26px; }
	.landing-page__description h2 { font-size: 21px; margin-top: 28px; }
	.landing-page__description h3 { font-size: 18px; }
	.landing-carousel__title { font-size: 18px; }
}