/* =========================================================
   Oddino Grid — grilla con celdas imagen/video + overlay
   (titulo + boton). 4 layouts, alto svh opcional, mobile apila.
   ========================================================= */
.oddino-grid {
	display: grid;
	gap: 10px;
	width: 100%;
}

/* Celdas (hijos directos) */
.oddino-grid > * {
	position: relative;
	overflow: hidden;
	min-height: 0;
	min-width: 0;
}

/* Fondo imagen/video */
.oddino-grid-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	z-index: 0;
}

/* Elementor trae `.elementor img { height: auto }`. Su especificidad (0,1,1)
   le gana a `.oddino-grid-media` (0,1,0), asi que la imagen se dibujaba con su
   ALTO NATURAL en vez de llenar la celda: en el layout "1 grande + 2 chicas"
   la imagen grande medía 715px dentro de una celda de 900px y quedaba una
   franja vacia abajo (y object-fit:cover no ayudaba, porque el elemento ya no
   tenia el alto de la celda). Repetimos la regla calificada con el contenedor
   para llegar a (0,2,0) y ganar la cascada sin recurrir a !important. */
.oddino-grid .oddino-grid-media {
	width: 100%;
	height: 100%;
}

/* ── Carrusel de fondo ──
   El contenedor ocupa la celda; cada diapositiva se apila encima con
   object-fit:cover. Misma pelea de especificidad que arriba contra
   `.elementor img { height:auto }`: por eso `.oddino-grid .oddino-grid-slide`. */
.oddino-grid-carousel {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

.oddino-grid .oddino-grid-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Fundido */
.oddino-grid-carousel--fade .oddino-grid-slide {
	opacity: 0;
	transition: opacity var(--oddino-car-speed, 800ms) ease-in-out;
}
.oddino-grid-carousel--fade .oddino-grid-slide.is-active {
	opacity: 1;
}

/* Deslizar: la activa queda centrada; las demas esperan a un costado.
   .is-prev evita que la saliente "salte" al otro lado al cambiar. */
.oddino-grid-carousel--slide .oddino-grid-slide {
	transform: translateX(100%);
	transition: transform var(--oddino-car-speed, 800ms) cubic-bezier(0.215, 0.61, 0.355, 1);
}
.oddino-grid-carousel--slide .oddino-grid-slide.is-active {
	transform: translateX(0);
}
.oddino-grid-carousel--slide .oddino-grid-slide.is-prev {
	transform: translateX(-100%);
}

/* Navegacion */
.oddino-grid-car-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 26px;
	line-height: 1;
	color: #fff;
	background: rgba(0, 0, 0, 0.32);
	border: 0;
	cursor: pointer;
	transition: background 0.25s ease;
	-webkit-appearance: none;
	        appearance: none;
}
.oddino-grid-car-nav:hover,
.oddino-grid-car-nav:focus-visible {
	background: rgba(0, 0, 0, 0.6);
}
.oddino-grid-car-prev { left: 12px; }
.oddino-grid-car-next { right: 12px; }

.oddino-grid-car-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.oddino-grid-car-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
	-webkit-appearance: none;
	        appearance: none;
}
.oddino-grid-car-dot.is-active {
	background: #fff;
	transform: scale(1.25);
}

/* El overlay (titulo + boton) va SIEMPRE por encima del carrusel. */
.oddino-grid-content { z-index: 4; }

/* ═════════ Layout DIAGONAL ═════════
   Las dos celdas se SUPERPONEN (no es grilla) y cada una se recorta con
   clip-path a un lado del corte. --oddino-diag-lean es el corrimiento
   horizontal del corte y lo calcula grid-diagonal.js a partir del alto real
   y del angulo pedido: los porcentajes de clip-path son por eje, asi que un
   angulo verdadero no se puede expresar solo en CSS. */
.oddino-grid--diag {
	display: block;
	position: relative;
	overflow: hidden;
}

.oddino-grid--diag > .oddino-grid-cell {
	position: absolute;
	inset: 0;
}

.oddino-grid--diag > .oddino-grid-cell:nth-child(1) {
	-webkit-clip-path: polygon(0 0, calc(50% + var(--oddino-diag-lean, 0px) - var(--oddino-diag-gap, 0px) / 2) 0, calc(50% - var(--oddino-diag-lean, 0px) - var(--oddino-diag-gap, 0px) / 2) 100%, 0 100%);
	        clip-path: polygon(0 0, calc(50% + var(--oddino-diag-lean, 0px) - var(--oddino-diag-gap, 0px) / 2) 0, calc(50% - var(--oddino-diag-lean, 0px) - var(--oddino-diag-gap, 0px) / 2) 100%, 0 100%);
}

.oddino-grid--diag > .oddino-grid-cell:nth-child(2) {
	-webkit-clip-path: polygon(calc(50% + var(--oddino-diag-lean, 0px) + var(--oddino-diag-gap, 0px) / 2) 0, 100% 0, 100% 100%, calc(50% - var(--oddino-diag-lean, 0px) + var(--oddino-diag-gap, 0px) / 2) 100%);
	        clip-path: polygon(calc(50% + var(--oddino-diag-lean, 0px) + var(--oddino-diag-gap, 0px) / 2) 0, 100% 0, 100% 100%, calc(50% - var(--oddino-diag-lean, 0px) + var(--oddino-diag-gap, 0px) / 2) 100%);
}

/* Texto centrado: por encima del corte y sin recortar. */
.oddino-grid-center {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 30px;
	text-align: center;
	pointer-events: none;   /* solo el boton es clickable */
}
.oddino-grid-center .oddino-grid-btn {
	pointer-events: auto;
}

/* En mobile el corte diagonal apila mal (quedaria un triangulo altisimo):
   pasa a un corte horizontal, mitad y mitad. */
@media (max-width: 767px) {
	.oddino-grid--diag > .oddino-grid-cell:nth-child(1) {
		-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(50% - var(--oddino-diag-gap, 0px) / 2), 0 calc(50% - var(--oddino-diag-gap, 0px) / 2));
		        clip-path: polygon(0 0, 100% 0, 100% calc(50% - var(--oddino-diag-gap, 0px) / 2), 0 calc(50% - var(--oddino-diag-gap, 0px) / 2));
	}
	.oddino-grid--diag > .oddino-grid-cell:nth-child(2) {
		-webkit-clip-path: polygon(0 calc(50% + var(--oddino-diag-gap, 0px) / 2), 100% calc(50% + var(--oddino-diag-gap, 0px) / 2), 100% 100%, 0 100%);
		        clip-path: polygon(0 calc(50% + var(--oddino-diag-gap, 0px) / 2), 100% calc(50% + var(--oddino-diag-gap, 0px) / 2), 100% 100%, 0 100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.oddino-grid-carousel--fade .oddino-grid-slide,
	.oddino-grid-carousel--slide .oddino-grid-slide {
		transition: none;
	}
}

/* Overlay con titulo + boton */
.oddino-grid-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;   /* posicion vertical (controlable) */
	align-items: flex-start;     /* posicion horizontal (controlable) */
	gap: 16px;
	padding: 30px;
	pointer-events: none;        /* solo el boton es clickable */
}
.oddino-grid-title {
	margin: 0;
	color: #fff;
	font-size: clamp(28px, 5vw, 64px);
	line-height: 1.05;
}
.oddino-grid-title2 {
	margin: 0;
	color: #fff;
	font-size: clamp(15px, 2vw, 20px);
	line-height: 1.4;
}
/* Cada par titulo+boton va junto (titulo arriba, su boton debajo). */
.oddino-grid-item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: inherit;
}
.oddino-grid-btn {
	pointer-events: auto;
	display: inline-block;
	background: #fff;
	color: #111;
	text-decoration: none;
	padding: 12px 22px;
	border-radius: 6px;
	font-weight: 600;
	line-height: 1;
}

/* ── Layouts ── */
.oddino-grid--full  { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.oddino-grid--split { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }

.oddino-grid--1l2r { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.oddino-grid--1l2r > *:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.oddino-grid--1l2r > *:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.oddino-grid--1l2r > *:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }

.oddino-grid--2l1r { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.oddino-grid--2l1r > *:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.oddino-grid--2l1r > *:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.oddino-grid--2l1r > *:nth-child(3) { grid-area: 1 / 2 / 3 / 3; }

/* ── Animacion de entrada ──
   A PRUEBA DE FALLOS: el estado oculto (opacity:0 + transform) solo aplica
   cuando el JS agrega .oa-ready. Si el JS no corre, el contenido se ve igual
   (nunca queda invisible). grid-anim.js agrega is-in para revelar. */
.oddino-grid--anim.oa-ready .oa-anim {
	opacity: 0;
	transition: opacity var(--oa-dur, 600ms) ease, transform var(--oa-dur, 600ms) ease;
	transition-delay: var(--oa-delay, 0ms);
	will-change: opacity, transform;
}
.oddino-grid--anim-fade-up.oa-ready    .oa-anim { transform: translateY(40px); }
.oddino-grid--anim-fade-down.oa-ready   .oa-anim { transform: translateY(-40px); }
.oddino-grid--anim-fade-left.oa-ready   .oa-anim { transform: translateX(40px); }
.oddino-grid--anim-fade-right.oa-ready  .oa-anim { transform: translateX(-40px); }
.oddino-grid--anim-zoom.oa-ready        .oa-anim { transform: scale(0.92); }
.oddino-grid--anim.oa-ready.is-in .oa-anim {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.oddino-grid--anim .oa-anim {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ── Alto completo de pantalla (para usar dentro del Fullpage Scroll) ── */
.oddino-grid--full-vh {
	height: 100vh !important;   /* fallback */
	height: 100svh !important;  /* iOS-safe */
}

/* ── Mobile: apilar a 1 columna MANTENIENDO la proporcion del layout ──
   La grilla conserva su alto (full-vh o el alto definido) y las filas
   respetan la jerarquia: la imagen grande pesa el doble que las chicas.
     1l2r -> 50% / 25% / 25%   (grande arriba)
     2l1r -> 25% / 25% / 50%   (grande abajo)
     split -> 50% / 50%
   ========================================================= */
@media (max-width: 767px) {
	.oddino-grid {
		grid-template-columns: 1fr !important;
		/* Red de seguridad: la grilla NUNCA supera el alto visible real
		   (svh = pantalla con la barra de Safari). Evita el corte de iOS
		   aunque el alto este seteado en 100vh (que en iOS mide de mas). */
		max-height: 100svh;
	}
	.oddino-grid > * {
		grid-column: auto !important;
		grid-row: auto !important;
	}
	.oddino-grid--full  { grid-template-rows: 1fr !important; }
	.oddino-grid--split { grid-template-rows: 1fr 1fr !important; }
	.oddino-grid--1l2r  { grid-template-rows: 2fr 1fr 1fr !important; }
	.oddino-grid--2l1r  { grid-template-rows: 1fr 1fr 2fr !important; }
}