/* SAY - Producto · vista Facts */

.say-pro {
	/* Paleta */
	--say-pro-oscuro: #0d2e40;
	--say-pro-acento: #e43d30;
	--say-pro-claro: #efece7;
	--say-pro-texto: #0d2e40;

	/* Alto de la vista: viewport menos lo que haya sobre ella (el JS mide y sobrescribe) */
	--say-pro-top: 96px;
	--say-pro-alto: calc(100svh - var(--say-pro-top));
	--say-pro-min: 0px;                              /* piso opcional */

	/* Columna izquierda */
	--say-pro-izq: 46.5%;
	--say-pro-margen: clamp(20px, 3.25vw, 60px);
	--say-pro-pad-top: clamp(24px, calc(var(--say-pro-alto) * .13), 140px);
	--say-pro-velo: rgba(13, 46, 64, .45);          /* tinte general (multiply) */
	--say-pro-rombo-x: 66.5%;                        /* vértice izquierdo del rombo */
	--say-pro-rombo-op: .92;
	--say-pro-titulo-fs: clamp(32px, 3.15vw, 58px);
	--say-pro-titulo-fw: 400;
	--say-pro-titulo-mb: clamp(16px, calc(var(--say-pro-alto) * .06), 64px);

	/* Índice */
	--say-pro-riel: rgba(255, 255, 255, .7);
	--say-pro-pin-w: 10px;
	--say-pro-pin-h: 17px;
	--say-pro-item-pl: 28px;                         /* riel → ícono */
	--say-pro-item-py: clamp(4px, calc(var(--say-pro-alto) * .028 - 4px), 17px);
	--say-pro-item-fs: clamp(11px, .93vw, 14px);
	--say-pro-item-fw: 500;
	--say-pro-item-ls: .2em;
	--say-pro-ico: 1.55em;
	--say-pro-ico-gap: 1.85em;
	--say-pro-cta-bottom: clamp(24px, calc(var(--say-pro-alto) * .06), 64px);

	/* Panel */
	--say-pro-img-alto: 50%;
	--say-pro-txt-w: 490px;
	--say-pro-pimg-ratio: 12 / 5;                    /* imagen del panel en móvil */
	--say-pro-ptit-fs: clamp(12px, .95vw, 14px);
	--say-pro-ptxt-fs: clamp(11px, .85vw, 13px);

	/* Slider */
	--say-pro-ctrl-bottom: 5.5%;

	--say-pro-t: .5s;
	--say-pro-ease: cubic-bezier(.4, 0, .2, 1);

	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: var(--say-pro-izq) minmax(0, 1fr);
	min-height: max(var(--say-pro-min), var(--say-pro-alto));
	overflow: hidden;
	font-family: Montserrat, system-ui, sans-serif;
}

.say-pro *,
.say-pro *::before,
.say-pro *::after { box-sizing: border-box; }

/* ------------------------------------------------------------ Izquierda */

.say-pro__izq {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	padding: var(--say-pro-pad-top) var(--say-pro-margen) 0 var(--say-pro-margen);
	color: #fff;
	background-color: var(--say-pro-oscuro);
	background-image: var(--say-pro-fondo, none);
	background-size: cover;
	background-position: center;
}

/* velo general */
.say-pro__izq::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--say-pro-velo);
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* medio rombo oscuro contra el borde derecho */
.say-pro__izq::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--say-pro-oscuro);
	clip-path: polygon(100% 0, var(--say-pro-rombo-x) 50%, 100% 100%);
	mix-blend-mode: multiply;
	opacity: var(--say-pro-rombo-op);
	pointer-events: none;
}

.say-pro__titulo {
	margin: 0 0 var(--say-pro-titulo-mb);
	padding: 0;
	font-family: inherit;
	font-size: var(--say-pro-titulo-fs);
	font-weight: var(--say-pro-titulo-fw);
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
}

.say-pro__nav {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding-bottom: var(--say-pro-cta-bottom);
}

/* riel + rombo indicador */
.say-pro__riel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	border-left: 1px solid var(--say-pro-riel);
	pointer-events: none;
}

.say-pro__pin {
	position: absolute;
	left: -.5px;
	top: var(--say-pro-y, 0);
	width: var(--say-pro-pin-w);
	height: var(--say-pro-pin-h);
	background: var(--say-pro-acento);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	transform: translate(-50%, -50%) scale(0);
	transition: top .45s var(--say-pro-ease), transform .3s var(--say-pro-ease);
}

.say-pro.is-panel .say-pro__pin { transform: translate(-50%, -50%) scale(1); }
.say-pro.sin-trans .say-pro__pin { transition: transform .3s var(--say-pro-ease); }

.say-pro__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.say-pro__item { margin: 0; padding: 0; }
.say-pro__item::before { content: none; }

.say-pro__btn {
	appearance: none;
	display: grid;
	grid-template-columns: var(--say-pro-ico) minmax(0, 1fr);
	column-gap: var(--say-pro-ico-gap);
	align-items: start;
	width: 100%;
	max-width: 34em;
	margin: 0;
	padding: var(--say-pro-item-py) 0 var(--say-pro-item-py) var(--say-pro-item-pl);
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #fff;
	font: inherit;
	font-size: var(--say-pro-item-fs);
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.say-pro__btn:hover,
.say-pro__btn:focus { background: none; color: #fff; }
.say-pro__btn:focus { outline: none; }
.say-pro__btn:focus-visible .say-pro__lbl { outline: 1px dotted rgba(255, 255, 255, .8); outline-offset: 4px; }

.say-pro__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1.2em;                 /* = alto de la primera línea del texto */
	color: #fff;
}

.say-pro__ico svg,
.say-pro__ico img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 1.6em;
	overflow: visible;
}

.say-pro__lbl {
	display: block;
	font-weight: var(--say-pro-item-fw);
	line-height: 1.2;
	letter-spacing: var(--say-pro-item-ls);
	text-transform: uppercase;
}

.say-pro__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: auto 0 0 var(--say-pro-item-pl);
	padding: .95em 1.9em;
	border-radius: 999px;
	background: var(--say-pro-acento);
	color: #fff;
	font-size: clamp(12px, .95vw, 14px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .25s, transform .25s;
}

.say-pro__cta:hover,
.say-pro__cta:focus-visible { background: #c9301f; color: #fff; text-decoration: none; }
.say-pro__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ------------------------------------------------------------ Derecha */

.say-pro__der {
	position: relative;
	min-width: 0;
	overflow: hidden;
	background: var(--say-pro-claro);
}

/* Slider */
.say-pro__slider {
	position: absolute;
	inset: 0;
	transition: opacity var(--say-pro-t) var(--say-pro-ease), visibility 0s linear 0s;
}

.say-pro.is-panel .say-pro__slider {
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--say-pro-t) var(--say-pro-ease), visibility 0s linear var(--say-pro-t);
}

.say-pro__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity .9s var(--say-pro-ease);
}

.say-pro__slide.is-activo { opacity: 1; }

.say-pro__slide img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.say-pro__slide--contain img { object-fit: contain; }

.say-pro__ctrl {
	--say-pro-ctrl: #fff;
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--say-pro-ctrl-bottom);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 3vw, 44px);
	color: var(--say-pro-ctrl);
}

.say-pro__slider[data-tono="oscuro"] .say-pro__ctrl { --say-pro-ctrl: var(--say-pro-oscuro); }

.say-pro__flecha,
.say-pro__dot {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
}

.say-pro__flecha {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	transition: transform .2s;
}

.say-pro__flecha:hover,
.say-pro__flecha:focus { background: none; color: inherit; }
.say-pro__flecha:hover { transform: scale(1.12); }

.say-pro__dots { display: flex; gap: 8px; }

.say-pro__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	opacity: .4;
	transition: opacity .25s, transform .25s;
}

.say-pro__dot:hover,
.say-pro__dot:focus { background: currentColor; opacity: .7; }
.say-pro__dot.is-activo { opacity: 1; transform: scale(1.15); }

.say-pro__flecha:focus-visible,
.say-pro__dot:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* Controles del carrusel de paneles: solo móvil */
.say-pro__pctrl { display: none; }

/* Paneles */
.say-pro__panel {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: var(--say-pro-img-alto) minmax(0, 1fr);
	background: var(--say-pro-claro);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--say-pro-t) var(--say-pro-ease), visibility 0s linear var(--say-pro-t);
}

.say-pro__panel--sin-img { grid-template-rows: minmax(0, 1fr); }

.say-pro__panel.is-activo {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity var(--say-pro-t) var(--say-pro-ease), visibility 0s linear 0s;
}

.say-pro__pimg { position: relative; overflow: hidden; min-height: 0; }

.say-pro__pimg img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: scale(1.04);
	transition: transform 1.2s var(--say-pro-ease);
}

.say-pro__panel.is-activo .say-pro__pimg img { transform: scale(1); }

.say-pro__pcuerpo {
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(24px, 7vh, 52px) var(--say-pro-margen) clamp(20px, 4vh, 40px);
	scrollbar-width: thin;
}

.say-pro__pbox {
	width: 100%;
	max-width: var(--say-pro-txt-w);
	margin: 0 auto;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--say-pro-t) var(--say-pro-ease) .08s, transform var(--say-pro-t) var(--say-pro-ease) .08s;
}

.say-pro__panel.is-activo .say-pro__pbox { opacity: 1; transform: none; }

.say-pro__sep {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--say-pro-acento);
}

.say-pro__sep::before,
.say-pro__sep::after {
	content: "";
	flex: 1 1 0;
	border-top: 1px solid currentColor;
}

.say-pro__sep svg { flex: none; display: block; width: 36px; height: 14px; }

.say-pro__ptit {
	margin: clamp(18px, 5vh, 40px) 0 .9em;
	padding: 0;
	font-family: inherit;
	font-size: var(--say-pro-ptit-fs);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .08em;
	text-align: center;
	text-transform: uppercase;
	color: var(--say-pro-acento);
}

.say-pro__ptxt {
	margin: 0;
	font-size: var(--say-pro-ptxt-fs);
	font-weight: 500;
	line-height: 1.3;
	color: var(--say-pro-texto);
	white-space: pre-line;
	text-align: justify;
	text-align-last: center;
	hyphens: manual;
}

.say-pro__ptxt--centrado { text-align: center; }

.say-pro__pcomp { margin-top: clamp(16px, 3vh, 28px); }

.say-pro__pcomp img {
	display: block;
	max-width: 100%;
	height: auto;
	max-height: 22vh;
	margin: 0 auto;
}

/* ------------------------------------------------------------ ≤ 768 px */

@media (max-width: 768px) {
	.say-pro {
		--say-pro-item-fs: 12px;
		--say-pro-ico-gap: 1.3em;
		--say-pro-item-pl: 22px;
		--say-pro-titulo-fs: clamp(36px, 10vw, 48px);
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		overflow: visible;
	}

	/* El índice es la vista principal, a pantalla completa bajo el header */
	.say-pro__izq {
		--say-pro-rombo-x: 62%;
		min-height: max(var(--say-pro-min), var(--say-pro-alto));
	}

	/* Sin slider pasivo; el carrusel de paneles aparece al tocar un ítem */
	.say-pro__slider { display: none; }

	.say-pro__der {
		display: none;
		overflow: hidden;
		scroll-margin-top: var(--say-pro-top);
	}

	.say-pro.is-panel .say-pro__der { display: block; }

	.say-pro__panel {
		position: relative;
		inset: auto;
		display: none;
		grid-template-rows: auto auto;
		opacity: 1;
		visibility: visible;
		transition: none;
	}

	.say-pro__panel.is-activo {
		display: grid;
		animation: say-pro-in .35s var(--say-pro-ease);
	}

	.say-pro__der[data-dir="next"] .say-pro__panel.is-activo { animation-name: say-pro-next; }
	.say-pro__der[data-dir="prev"] .say-pro__panel.is-activo { animation-name: say-pro-prev; }

	.say-pro__pimg { aspect-ratio: var(--say-pro-pimg-ratio); }
	.say-pro__pimg img { transform: none; }
	.say-pro__pcuerpo { overflow: visible; padding: 32px var(--say-pro-margen) 12px; }
	.say-pro__pbox { opacity: 1; transform: none; transition: none; }
	.say-pro__ptit { margin-top: 24px; font-size: 15px; }
	.say-pro__ptxt { font-size: 13px; line-height: 1.45; }
	.say-pro__pcomp img { max-height: none; }

	.say-pro__pctrl {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 28px;
		padding: 8px var(--say-pro-margen) 36px;
		color: var(--say-pro-oscuro);
	}
}

@keyframes say-pro-next {
	from { opacity: 0; transform: translateX(28px); }
	to { opacity: 1; transform: none; }
}

@keyframes say-pro-prev {
	from { opacity: 0; transform: translateX(-28px); }
	to { opacity: 1; transform: none; }
}

/* Pro fija min-height de viewport en .x-root sin descontar el header (que vive fuera) */
.x-root:has(.say-pro) { min-height: 0; }

@keyframes say-pro-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.say-pro *,
	.say-pro *::before,
	.say-pro *::after {
		transition-duration: 0s !important;
		transition-delay: 0s !important;
		animation: none !important;
	}
}