/*
 * Landings de "Por sectores" — rediseño visual (2026-09-29).
 *
 * Se carga solo en las 6 plantillas de sector, después de landing-sectores.css
 * y revision-agosto.css (functions.php, locopolo_enqueue_sectores_rediseno,
 * prioridad 110). Comentar ese add_action lo revierte entero.
 *
 * Las imágenes NO se tocan: son las elegidas a mano. Cambia todo lo demás.
 *
 * Respeta la revisión de agosto (revision-agosto.css):
 *  - el verde, en el texto; nada de subrayados ni bloques verdes;
 *  - al pasar el ratón, gris muy clarito, no negro ni verde;
 *  - bordes finos.
 * Y sigue el lenguaje de la página de alérgenos: tarjetas blancas sin borde
 * sobre el fondo crema, esquinas generosas y titulares pesados.
 */

.sector-landing {
	--sr-radio: 24px;
	--sr-radio-sm: 14px;
	--sr-campo: #f7f6f4;
	--sr-hover: #f2f1ef;
	--sr-linea: #e4e1dc;
}

/* ── Ritmo y titulares ───────────────────────────────────────────────────── */

.sector-landing .sl-inner {
	padding-top: 96px;
	padding-bottom: 96px;
}

.sector-landing .sl-eyebrow {
	font-size: 12px;
	font-style: normal;
	letter-spacing: .14em;
	color: var(--sl-green-dk);
	margin-bottom: 14px;
}

.sector-landing .sl-sec-title {
	font-size: clamp(32px, 3.4vw, 52px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.04;
}

.sector-landing .sl-head {
	margin-bottom: 48px;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

/* El botón principal pasa de blanco con sombra desplazada a negro liso. */
.sector-landing .sl-btn--outline,
.sector-landing .sl-form-submit {
	background: var(--sl-black);
	color: #fff;
	border: 1.5px solid var(--sl-black);
	box-shadow: none;
	padding: 17px 30px;
	font-size: 12.5px;
	letter-spacing: .1em;
	transition: background-color .18s, color .18s;
}

.sector-landing .sl-btn--outline:hover,
.sector-landing .sl-btn--outline:focus-visible,
.sector-landing .sl-form-submit:hover,
.sector-landing .sl-form-submit:focus-visible {
	background: var(--sr-hover);
	color: var(--sl-black);
}

/* Botón secundario: texto con flecha, sin caja. */
.sector-landing .sl-btn--link {
	padding: 17px 4px;
	background: none;
	border: 0;
	color: var(--sl-black);
	font-size: 12.5px;
	letter-spacing: .1em;
	transition: opacity .18s;
}

.sector-landing .sl-btn--link:hover,
.sector-landing .sl-btn--link:focus-visible {
	opacity: .6;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.sector-landing .sl-hero__inner {
	gap: 72px;
	/* Deja sitio a la barra de navegación fija (74px; 108px en móvil). Va
	   explícito porque la regla general de .sl-inner de abajo lo pisaría. */
	padding-top: 120px;
	padding-bottom: 72px;
}

.sector-landing .sl-hero__h1 {
	font-size: clamp(36px, 3.7vw, 56px);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.04;
	margin-bottom: 28px;
}

.sector-landing .sl-hero__sub {
	font-size: 18px;
	line-height: 1.65;
	max-width: 520px;
	margin-bottom: 40px;
}

.sector-landing .sl-hero__inner > * {
	/* Sin esto, el botón más largo fija el ancho mínimo de la columna y en
	   móvil el hero entero se sale por la derecha (cortado, sin barra). */
	min-width: 0;
}

.sector-landing .sl-hero__ctas .sl-btn {
	white-space: normal;
	text-align: center;
	line-height: 1.35;
}

.sector-landing .sl-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 28px;
}

.sector-landing .sl-hero__media,
.sector-landing .sl-sol-hero__media {
	border-radius: 28px;
}

/* Nota del mini corner (Restauración): la revisión pidió destacarla. */
.sector-landing .sl-hero__nota {
	display: inline-flex;
	margin: 28px 0 0;
	padding: 12px 18px;
	background: #fff;
	border-radius: var(--sr-radio-sm);
	font-size: 14px;
	line-height: 1.45;
	color: var(--sl-black);
}

/* ── Ticker ──────────────────────────────────────────────────────────────── */

.sector-landing .sl-ticker-wrap {
	padding: 14px 0;
}

.sector-landing .sl-ticker-item,
.sector-landing .sl-ticker-sep {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .16em;
}

/* 2026-10-06: una sola cinta, como en la portada. La del pie (#wrapper-carousel-ad)
   ya no se pinta en las landings (smn_carousel_ad()) y esta ocupa su sitio: fija
   abajo, 40 px y el mismo z-index (1030, .fixed-bottom). body.has-ticker se
   mantiene, así que los legales siguen con su aire (revision-agosto.css).
   Para volver atrás, borrar este bloque. */
.sector-landing .sl-ticker-wrap {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1030;
	padding: 0;
	height: 40px;
	display: flex;
	align-items: center;
}

.sector-landing .sl-ticker-item,
.sector-landing .sl-ticker-sep {
	font-size: 15px;
	line-height: 40px;
}

/* ── 3 argumentos ────────────────────────────────────────────────────────── */

.sector-landing .sl-section--args .sl-inner {
	padding-bottom: 24px;
}

.sector-landing .sl-args-grid {
	gap: 16px;
}

.sector-landing .sl-arg-card {
	display: flex;
	flex-direction: column;
	padding: 40px 36px 44px;
	background: #fff;
	border: 0;
	border-radius: var(--sr-radio);
	box-shadow: none;
}

.sector-landing .sl-arg-card__num {
	margin-bottom: 28px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .08em;
	color: var(--sl-green-dk);
	-webkit-text-stroke: 0;
}

.sector-landing .sl-arg-card__title {
	margin: 0 0 12px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.15;
}

.sector-landing .sl-arg-card__body {
	font-size: 16px;
	line-height: 1.6;
}

/* ── Testimonios: una cita grande y centrada ─────────────────────────────── */

.sector-landing .sl-testi__inner {
	display: block;
	max-width: 960px;
	text-align: center;
}

.sector-landing .sl-testi__inner .sl-sec-title {
	margin-bottom: 40px;
}

/* La comilla suelta de la columna izquierda pasa a presidir la tarjeta. */
.sector-landing .sl-testi__quote {
	display: none;
}

.sector-landing .sl-testi-card {
	position: relative;
	padding: 72px 72px 56px;
	background: #fff;
	border: 0;
	border-radius: 28px;
	box-shadow: none;
}

.sector-landing .sl-testi-card::before {
	content: "\201C";
	position: absolute;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 88px;
	line-height: 1;
	color: var(--sl-green);
}

.sector-landing .sl-testi-card__text {
	margin: 0 0 28px;
	font-size: clamp(19px, 1.8vw, 25px);
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -.01em;
}

.sector-landing .sl-testi-card__author {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	letter-spacing: .12em;
}

.sector-landing .sl-testi-card__author::before {
	content: "";
	width: 28px;
	height: 1.5px;
	background: currentColor;
}

.sector-landing .sl-testi-controls {
	justify-content: center;
	gap: 28px;
	margin-top: 28px;
}

.sector-landing .sl-testi-dot {
	width: 7px;
	height: 7px;
	background: #cfcbc4;
	transition: width .2s, background-color .2s;
}

.sector-landing .sl-testi-dot.active {
	width: 22px;
	border-radius: 4px;
	background: var(--sl-black);
}

.sector-landing .sl-testi-btn {
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--sl-black);
	box-shadow: none;
	background: transparent;
	font-size: 20px;
	font-weight: 500;
}

.sector-landing .sl-testi-btn:hover,
.sector-landing .sl-testi-btn:focus-visible {
	background: #fff;
}

/* ── Formulario: tarjeta con el mensaje a la izquierda ───────────────────── */

.sector-landing .sl-form__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: 72px;
	align-items: start;
	max-width: none;
	padding: 64px;
	background: #fff;
	border-radius: 32px;
}

.sector-landing .sl-form__inner > .sl-head,
.sector-landing .sl-form__inner > .sl-form-sub {
	grid-column: 1;
}

.sector-landing .sl-form__inner > form {
	grid-column: 2;
	grid-row: 1 / span 3;
}

.sector-landing .sl-form-sub {
	margin: 20px 0 0;
	font-size: 18px;
	line-height: 1.6;
}

.sector-landing .sl-form-grid {
	gap: 18px 16px;
}

.sector-landing .sl-fg {
	gap: 8px;
}

.sector-landing .sl-fg label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
}

.sector-landing .sl-fg input,
.sector-landing .sl-fg select,
.sector-landing .sl-fg textarea {
	padding: 14px 16px;
	background: var(--sr-campo);
	border: 1.5px solid transparent;
	border-radius: 12px;
	transition: border-color .15s, background-color .15s;
}

.sector-landing .sl-fg input:hover,
.sector-landing .sl-fg select:hover,
.sector-landing .sl-fg textarea:hover {
	border-color: var(--sr-linea);
}

.sector-landing .sl-fg input:focus,
.sector-landing .sl-fg select:focus,
.sector-landing .sl-fg textarea:focus {
	background: #fff;
	border-color: var(--sl-black);
}

.sector-landing .sl-fg input::placeholder,
.sector-landing .sl-fg textarea::placeholder {
	color: #a5a29b;
}

.sector-landing .sl-form-submit {
	margin-top: 24px;
}

.sector-landing .sl-form-note {
	text-align: left;
}

/* ── Preguntas frecuentes: título a la izquierda, tarjetas a la derecha ─── */

.sector-landing .sl-inner:has(> .sl-faqs-list) {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	column-gap: 72px;
	align-items: start;
}

.sector-landing .sl-inner:has(> .sl-faqs-list) > .sl-head {
	position: sticky;
	top: 110px;
	margin-bottom: 0;
}

.sector-landing .sl-faqs-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: none;
	border: 0;
}

.sector-landing .sl-faq {
	background: #fff;
	border: 0;
	border-radius: 18px;
	transition: background-color .15s;
}

.sector-landing .sl-faq summary {
	padding: 24px 28px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.sector-landing .sl-faq summary:hover {
	background: var(--sr-hover);
	border-radius: 18px;
}

.sector-landing .sl-faq[open] summary:hover {
	border-radius: 18px 18px 0 0;
}

.sector-landing .sl-faq__icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--sl-bg);
	font-size: 20px;
	font-weight: 400;
}

.sector-landing .sl-faq__body {
	padding: 0 28px 28px;
	font-size: 16px;
	line-height: 1.7;
}

/* 2026-10-06: enlace dentro de una respuesta (faqN_link), mismo patrón que .sl-fmt-note a */
.sector-landing .sl-faq__body a {
	color: inherit;
	font-weight: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Soluciones a medida: lenguaje editorial ─────────────────────────────── */
/*
 * Rehecho el 2026-09-30. La primera versión (tarjetas con emojis, pasos 01-04
 * en bloque negro, ticks) "olía a plantilla de IA". Aquí mandan las fotos
 * propias, la tipografía y las líneas finas; casi no hay cajas.
 */

/* Bloque 1: foto a la izquierda, índice de lo personalizable a la derecha. */
.sector-landing .sl-ed-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 80px;
	align-items: start;
}

.sector-landing .sl-ed-split__media {
	position: sticky;
	top: 110px;
	margin: 0;
	border-radius: 28px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: #fff;
}

.sector-landing .sl-ed-split__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sector-landing .sl-ed-list {
	margin: 0;
	border-top: 1px solid var(--sl-black);
}

.sector-landing .sl-ed-list__row {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 32px;
	padding: 30px 0 32px;
	border-bottom: 1px solid var(--sr-linea);
}

.sector-landing .sl-ed-list dt {
	font-size: clamp(24px, 2.2vw, 34px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.05;
}

.sector-landing .sl-ed-list dd {
	margin: 4px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--sl-muted);
}

/* Bloque 2: foto ancha y los casos como lista a dos columnas. */
.sector-landing .sl-ed-head {
	max-width: 720px;
}

.sector-landing .sl-ed-wide {
	margin: 0 0 56px;
	border-radius: 28px;
	overflow: hidden;
	aspect-ratio: 21 / 9;
}

.sector-landing .sl-ed-wide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
}

/* El carro sin gente es casi cuadrado: a 21:9 se cortaba la rueda. */
.sector-landing .sl-ed-wide--carro {
	aspect-ratio: 16 / 9;
}

.sector-landing .sl-ed-wide--carro img {
	object-position: center 90%;
}

.sector-landing .sl-ed-casos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 72px;
}

.sector-landing .sl-ed-caso {
	display: block;
	padding: 28px 0 30px;
	border-top: 1px solid var(--sr-linea);
}

.sector-landing .sl-ed-caso h3 {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
}

.sector-landing .sl-ed-caso p {
	margin: 0;
	max-width: 520px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--sl-muted);
}

.sector-landing .sl-ed-caso--cta {
	color: var(--sl-black);
	transition: opacity .18s;
}

.sector-landing .sl-ed-caso--cta h3 {
	color: var(--sl-green-dk);
}

.sector-landing .sl-ed-caso--cta:hover,
.sector-landing .sl-ed-caso--cta:focus-visible {
	opacity: .65;
}

/* Bloque 3: línea de tiempo fina, sin números gigantes. */
.sector-landing .sl-ed-proceso-wrap {
	background: #fff;
}

.sector-landing .sl-ed-proceso {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.sector-landing .sl-ed-paso {
	position: relative;
	padding-top: 44px;
	counter-increment: paso;
}

/* La línea que une los pasos, y el punto de cada uno. */
.sector-landing .sl-ed-paso::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	right: -40px;
	height: 1px;
	background: var(--sr-linea);
}

.sector-landing .sl-ed-paso:last-child::before {
	right: 0;
}

.sector-landing .sl-ed-paso::after {
	content: counter(paso);
	position: absolute;
	top: -6px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--sl-black);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
}

.sector-landing .sl-ed-paso h3 {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.25;
}

.sector-landing .sl-ed-paso p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--sl-muted);
}

/* Bloque 4: frases grandes separadas por líneas. */
.sector-landing .sl-ed-porque {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	column-gap: 72px;
	align-items: start;
}

.sector-landing .sl-ed-porque > .sl-head {
	margin-bottom: 0;
}

.sector-landing .sl-ed-frases {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--sl-black);
}

.sector-landing .sl-ed-frases li {
	padding: 24px 0 26px;
	border-bottom: 1px solid var(--sr-linea);
	font-size: clamp(20px, 1.8vw, 26px);
	line-height: 1.3;
	letter-spacing: -.02em;
}

.sector-landing .sl-ed-frases strong {
	font-weight: 800;
}

.sector-landing .sl-ed-frases span {
	color: var(--sl-muted);
	font-weight: 400;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	.sector-landing .sl-form__inner {
		grid-template-columns: 1fr;
		padding: 48px;
	}

	.sector-landing .sl-form__inner > form {
		grid-column: 1;
		grid-row: auto;
		margin-top: 36px;
	}

	.sector-landing .sl-inner:has(> .sl-faqs-list) {
		grid-template-columns: 1fr;
	}

	.sector-landing .sl-inner:has(> .sl-faqs-list) > .sl-head {
		position: static;
		margin-bottom: 36px;
	}

	.sector-landing .sl-ed-split,
	.sector-landing .sl-ed-porque {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.sector-landing .sl-ed-split__media {
		position: static;
		aspect-ratio: 16 / 10;
	}

	.sector-landing .sl-ed-proceso {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 48px;
	}

	/* En dos filas la línea no puede cruzar al paso de abajo. */
	.sector-landing .sl-ed-paso:nth-child(2n)::before {
		right: 0;
	}
}

@media (max-width: 992px) {
	.sector-landing .sl-inner {
		padding-top: 72px;
		padding-bottom: 72px;
	}

	.sector-landing .sl-hero__inner,
	.sector-landing .sl-sol-hero__inner {
		gap: 40px;
		padding-top: 110px;
		padding-bottom: 56px;
	}
}

@media (max-width: 576px) {
	.sector-landing .sl-inner {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.sector-landing .sl-hero__inner,
	.sector-landing .sl-sol-hero__inner {
		padding-top: 140px;
	}

	.sector-landing .sl-hero__sub,
	.sector-landing .sl-form-sub {
		font-size: 16px;
	}

	.sector-landing .sl-hero__ctas .sl-btn--outline {
		width: 100%;
	}

	.sector-landing .sl-ed-list__row,
	.sector-landing .sl-ed-casos {
		grid-template-columns: 1fr;
	}

	.sector-landing .sl-ed-list__row {
		gap: 10px;
		padding: 24px 0;
	}

	.sector-landing .sl-ed-wide {
		aspect-ratio: 4 / 3;
		margin-bottom: 32px;
	}

	/* En móvil los pasos van en columna, con la línea en vertical. */
	.sector-landing .sl-ed-proceso {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.sector-landing .sl-ed-paso {
		padding: 0 0 36px 48px;
	}

	.sector-landing .sl-ed-paso::before,
	.sector-landing .sl-ed-paso:nth-child(2n)::before {
		top: 22px;
		bottom: 0;
		left: 13.5px;
		right: auto;
		width: 1px;
		height: auto;
	}

	.sector-landing .sl-ed-paso:last-child::before {
		display: none;
	}

	.sector-landing .sl-ed-paso::after {
		top: -4px;
	}

	.sector-landing .sl-arg-card {
		padding: 32px 26px;
	}

	.sector-landing .sl-testi-card {
		padding: 64px 26px 36px;
	}

	.sector-landing .sl-form__inner {
		padding: 32px 22px;
		border-radius: var(--sr-radio);
	}

	.sector-landing .sl-faq summary {
		padding: 20px;
		font-size: 16px;
	}

	.sector-landing .sl-faq__body {
		padding: 0 20px 22px;
	}
}

/* ── Piezas nuevas de catering, distribuidoras y hostelería (2026-09-30) ── */
/*
 * Mismo lenguaje editorial que Soluciones a medida: líneas finas y fotos
 * propias, sin tarjetas iguales.
 */

/* Las tres líneas de producto: tres columnas, cada una enlaza a su categoría. */
.sector-landing .sl-ed-casos--tres {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 48px;
}

.sector-landing a.sl-ed-caso {
	color: var(--sl-black);
	text-decoration: none;
	transition: opacity .18s;
}

.sector-landing a.sl-ed-caso:hover,
.sector-landing a.sl-ed-caso:focus-visible {
	opacity: .65;
}

.sector-landing .sl-ed-caso__mas {
	display: inline-block;
	margin-top: 14px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sl-green-dk);
}

/* Tira de fotos con flechas: se desliza sola con el dedo o con las flechas. */
.sector-landing .sl-fotos__pista {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0 0 8px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.sector-landing .sl-fotos__pista::-webkit-scrollbar {
	display: none;
}

.sector-landing .sl-fotos__item {
	flex: 0 0 calc((100% - 32px) / 3);
	scroll-snap-align: start;
}

.sector-landing .sl-fotos__item figure {
	margin: 0;
}

.sector-landing .sl-fotos__item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 24px;
	background: #fff;
}

.sector-landing .sl-fotos__item figcaption {
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sl-muted);
}

.sector-landing .sl-fotos__nav {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
}

.sector-landing .sl-fmt-note {
	margin: 28px 0 0;
	font-size: 15px;
	font-style: italic;
	color: var(--sl-muted);
}

@media (max-width: 992px) {
	.sector-landing .sl-ed-casos--tres {
		grid-template-columns: 1fr;
	}

	.sector-landing .sl-fotos__item {
		flex-basis: calc((100% - 16px) / 2);
	}
}

@media (max-width: 576px) {
	.sector-landing .sl-fotos__item {
		flex-basis: 82%;
	}
}

/* ── Fotos de sabores sueltos (reunión 2026-10-01) ── */
/*
 * Son bombones recortados sobre blanco: se encajan enteros (contain) en vez de
 * recortarse, que en móvil (16:10) dejaba el palito fuera.
 */
.sector-landing .sl-ed-split__media--producto img {
	object-fit: contain;
	padding: 6%;
}

/* Foto de cada línea en las tarjetas de Catering. */
.sector-landing .sl-ed-caso__img {
	display: block;
	width: 100%;
	max-width: 280px;
	aspect-ratio: 1 / 1;
	margin: 0 0 18px;
	object-fit: contain;
	background: #fff;
	border-radius: 20px;
}

/*
 * Tiras de empaquetados (Distribuidoras y Retail): las cajas son apaisadas y
 * el recorte 4:5 se comía los bordes. Se encajan enteras.
 */
.sector-landing #sl-fotos-packaging .sl-fotos__item img,
.sector-landing #sl-fotos-retail .sl-fotos__item img,
.sector-landing #sl-fotos-retail-expones .sl-fotos__item img {
	object-fit: contain;
	background: #f0efed; /* el gris de fondo de estas fotos */
}

/* ── Líneas de producto con foto (Distribuidoras y Hostelería, 2026-10-02) ── */
/* Misma foto que en Catering (.sl-ed-caso__img); la del polo es de ambiente y se recorta. */
.sector-landing .sl-ed-caso__img--foto {
	object-fit: cover;
}

/* Retail: subtítulos "Cómo lo recibes" / "Cómo lo expones" sobre cada tira. */
.sector-landing .sl-fotos-sub {
	margin: 0 0 18px;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
}

.sector-landing .sl-fotos ~ .sl-fotos-sub {
	margin-top: 48px;
}

/* ── Distribuidoras, reunión 2026-10-02 ── */
/*
 * Packaging: son solo dos cajas. En la rejilla de tres quedaban pegadas a la
 * izquierda con un hueco a la derecha. Dos columnas iguales, centradas y en
 * cuadrado (las fotos lo son).
 */
.sector-landing #sl-fotos-packaging .sl-fotos__pista {
	justify-content: center;
}

.sector-landing #sl-fotos-packaging .sl-fotos__item {
	flex-basis: calc((100% - 16px) / 2);
	max-width: 520px;
}

.sector-landing #sl-fotos-packaging .sl-fotos__item img {
	aspect-ratio: 1 / 1;
}

.sector-landing #sl-fotos-packaging .sl-fotos__nav {
	display: none;
}

/*
 * Ejemplos de exposición: las tres fotos son cuadradas y el recorte 4:5 se
 * comía los lados (el carro salía cortado y con mucho zoom). Se muestran en 1:1.
 */
.sector-landing #sl-fotos-formatos .sl-fotos__item img {
	aspect-ratio: 1 / 1;
}

@media (max-width: 576px) {
	.sector-landing #sl-fotos-packaging .sl-fotos__item {
		flex-basis: 82%;
	}

	.sector-landing #sl-fotos-packaging .sl-fotos__pista {
		justify-content: flex-start;
	}

	.sector-landing #sl-fotos-packaging .sl-fotos__nav {
		display: flex;
	}
}

/* ── Hostelería, reunión 2026-10-02 ── */
/*
 * "Cómo llega a tu mesa": el plato (4:3) y la vitrina de terraza (3:2) son
 * apaisados y el recorte 4:5 los cortaba por los lados. Cada foto va a la misma
 * altura con su proporción real (sin recorte), más pequeña y con aire entre
 * ellas: en escritorio caben las cuatro sin flechas.
 */
.sector-landing #sl-fotos-hosteleria .sl-fotos__pista {
	gap: 28px;
}

.sector-landing #sl-fotos-hosteleria .sl-fotos__item {
	flex: 0 0 auto;
}

.sector-landing #sl-fotos-hosteleria .sl-fotos__item img {
	width: auto;
	height: 220px;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 18px;
	background: transparent;
}

.sector-landing #sl-fotos-hosteleria .sl-fotos__item figure {
	display: table;   /* el pie se ajusta al ancho de la foto */
}

.sector-landing #sl-fotos-hosteleria .sl-fotos__item figcaption {
	display: table-caption;
	caption-side: bottom;
}

@media (min-width: 1200px) {
	.sector-landing #sl-fotos-hosteleria .sl-fotos__pista {
		justify-content: space-between;
	}

	.sector-landing #sl-fotos-hosteleria .sl-fotos__nav {
		display: none;
	}
}

@media (max-width: 576px) {
	.sector-landing #sl-fotos-hosteleria .sl-fotos__item img {
		height: 200px;
	}
}

/* ── Plantilla común de 8 bloques (revisión de Asier, 2026-10-05) ── */
/*
 * Las cinco landings (Catering, Distribuidoras, Hostelería, Retail y Soluciones
 * a medida) comparten piezas de inc/landing-partes.php. Las reglas por id de
 * arriba (#sl-fotos-packaging, #sl-fotos-hosteleria, #sl-fotos-formatos...) ya
 * no se usan: las tiras se llaman ahora <landing>-0, -1, -2.
 */

/* Banda verde en bucle: más texto que antes, así que va más despacio. */
.sector-landing .sl-ticker-track--bucle {
	animation-duration: 70s;
}

@media (prefers-reduced-motion: reduce) {
	.sector-landing .sl-ticker-track--bucle {
		animation: none;
	}
}

/* Hero con <picture>: vertical en móvil, 4:5 en escritorio. */
.sector-landing .sl-hero__media picture {
	display: block;
	height: 100%;
}

/* Por qué Locopolo sin foto (Soluciones a medida): el texto, a un ancho legible. */
.sector-landing .sl-ed-split--solo .sl-ed-split__text {
	max-width: 860px;
}

.sector-landing .sl-ventajas__link {
	display: inline-block;
	margin-top: 26px;
	text-decoration: none;
}

/* Formatos: subtítulos y partes de solo texto. */
.sector-landing .sl-fotos-sub--sigue {
	margin-top: 48px;
}

.sector-landing .sl-formatos__texto {
	max-width: 720px;
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--sl-muted);
}

.sector-landing .sl-fmt-note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Tiras de formatos: todas en cuadrado; los packshots, enteros sobre gris. */
.sector-landing .sl-fotos--cuadradas .sl-fotos__item img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.sector-landing .sl-fotos--cuadradas .sl-fotos__item--encaja img {
	object-fit: contain;
	background: #f0efed;
}

/*
 * El flowpack de polo (vertical, 1066x1400) trae su propio fondo, algo más oscuro
 * que #f0efed: con el gris común se veía un rectángulo de esquinas rectas dentro
 * del cuadrado. Se pinta el hueco con el color del borde de la foto. Si se vuelve
 * a exportar en cuadrado sobre #f0efed, esta regla sobra.
 * 2026-10-08: el catálogo ya usa el PNG transparente (polo-locopolo-pistacho-envase.png);
 * esta regla ya no se aplica a ninguna foto y se puede quitar.
 */
.sector-landing .sl-fotos--cuadradas .sl-fotos__item--encaja img[src*="flowpack-locopolo-pistacho"] {
	background: rgb(233, 229, 226);
}

@media (min-width: 993px) {
	.sector-landing .sl-fotos--pocas .sl-fotos__nav {
		display: none;
	}

	/*
	 * Tiras con 1 o 2 fotos (Catering solo bandeja; Hostelería plato y caja de
	 * consumo, por decisión de Asier): centradas, sin hueco a la derecha.
	 */
	.sector-landing .sl-fotos--pocas .sl-fotos__pista {
		justify-content: center;
	}
}

.sector-landing .sl-fotos--una .sl-fotos__nav {
	display: none;
}

/* Soluciones a medida: los 4 pasos, en la columna del mensaje, junto al formulario. */
.sector-landing .sl-form__inner > .sl-pasos,
.sector-landing .sl-form__inner > .sl-pasos__cierre {
	grid-column: 1;
}

@media (min-width: 1101px) {
	/* La última fila es flexible: el alto del formulario se lo come ella y no
	   separa el titular del subtítulo. */
	.sector-landing #soluciones-page .sl-form__inner {
		grid-template-rows: repeat(4, auto) 1fr;
	}

	.sector-landing #soluciones-page .sl-form__inner > form {
		grid-row: 1 / span 5;
	}
}

.sector-landing .sl-pasos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: sl-paso;
}

.sector-landing .sl-pasos li {
	counter-increment: sl-paso;
	padding-top: 14px;
	border-top: 1px solid rgba(0, 0, 0, .15);
	font-size: 15px;
	line-height: 1.45;
}

.sector-landing .sl-pasos li::before {
	content: counter(sl-paso, decimal-leading-zero);
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--sl-green-dk);
}

.sector-landing .sl-pasos__cierre {
	margin: 24px 0 28px;
	font-size: 19px;
	font-weight: 700;
}

.sector-landing .sl-fg:has(#sol-fecha_proyecto) {
	grid-column: 1 / -1;
}