/* =====================================================================
   KAISÉ — EXPERIENCIA v2
   Se carga después de style.css + inicio.css.
   ===================================================================== */

/* =====================================================================
   HERO — foto B/N con wordmark gigante
   ===================================================================== */
.exp-hero {
	position: relative;
	overflow: hidden;
	/* Igual que Nosotros: el banner definitivo (Banner-Experiencia-Kaise.jpg) ya
	   trae el "kaisé" gigante y el tratamiento en blanco y negro, así que el alto
	   sigue la proporción del banner y se quitaron el velo oscuro, el wordmark y
	   los círculos que antes se dibujaban con CSS. */
	/* alto = ancho / 1.9 (proporción del banner), entre 380px y 88% de la ventana.
	   Ojo: NO usar aspect-ratio + max-height juntos: el navegador transfiere el
	   tope de alto al ancho y el hero queda angosto en pantallas bajas. */
	height: clamp(380px, 52.63vw, 88vh);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: #2a2a2c;
	background-size: cover;
	background-position: center bottom;
}
.exp-hero__content { position: relative; z-index: 2; color: #fff; text-shadow: 0 2px 26px rgba(0,0,0,.35); } /* sin el velo oscuro de antes, la sombra suave asegura la lectura sobre la foto */
.exp-hero__content .line1 { display: block; text-transform: uppercase; font-style: italic; font-weight: 800; font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1.1; }
.exp-hero__content .line2 { display: block; text-transform: uppercase; font-weight: 400; letter-spacing: .04em; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; margin-top: .1em; }

/* =====================================================================
   ESTILO DE VIDA
   ===================================================================== */
.exp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.exp-split img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; border-radius: 0; }
.exp-split__text h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 18px; }
.exp-split__text h2 em { font-style: italic; color: var(--kaise-primary); }
.exp-split__text p { color: #4a4a4a; font-size: .92rem; line-height: 1.8; max-width: 420px; }
.exp-split__text p strong { color: var(--kaise-dark); font-weight: 700; }

/* =====================================================================
   DUAL QUOTE
   ===================================================================== */
.exp-dualquote { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.exp-dualquote__item {
	position: relative; min-height: 340px; border-radius: 0; overflow: hidden;
	display: flex; align-items: center; justify-content: center; text-align: center;
	background-size: cover; background-position: center;
	filter: grayscale(1);
}
.exp-dualquote__item::before { content:""; position:absolute; inset:0; background: rgba(10,10,12,.32); }
.exp-dualquote__item p {
	position: relative; z-index: 2; color: #fff; margin: 0;
	font-size: 2.25rem; font-weight: 400; line-height: 1.3; max-width: 460px; padding: 0 30px; /* XD: 36px Regular */
	filter: none;
}
.exp-dualquote__item p em { font-style: italic; }
.exp-dualquote__item p strong { font-weight: 800; }
.exp-dualquote__item p strong em { font-style: italic; }

/* =====================================================================
   HEADING CENTRADO + GRILLA DE 6 FOTOS
   ===================================================================== */
.exp-claim { text-align: center; max-width: 720px; margin: 0 auto; }
.exp-claim h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.35; } /* XD: 36px */
.exp-claim h2 em { font-style: italic; color: var(--kaise-primary); }

.exp-photo-row { display: grid; grid-template-columns: repeat(6, 1fr); }
.exp-photo-row img { width: 100%; height: 320px; object-fit: cover; }

/* =====================================================================
   INSPIRACIÓN Y COMUNIDAD (texto centrado en columna gris)
   ===================================================================== */
.exp-inspiration { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.exp-inspiration__text {
	background: var(--kaise-light-gray);
	display: flex; align-items: center; justify-content: center;
	text-align: center; padding: 70px 50px;
}
.exp-inspiration__text-inner { max-width: 420px; }
.exp-inspiration__text h2 { font-size: 2.25rem; font-weight: 700; margin-bottom: 24px; } /* XD: 36px */
.exp-inspiration__text h2 em { font-style: italic; color: var(--kaise-primary); }
.exp-inspiration__text p { color: #707070; font-size: 1.125rem; line-height: 1.7; margin-bottom: 1.3em; } /* XD: 18px, #707070 */
.exp-inspiration__text p strong { color: var(--kaise-dark); font-weight: 700; }
.exp-inspiration__media { min-height: 480px; background-size: cover; background-position: center; } /* XD: más altura */

/* =====================================================================
   TEAM KAISÉ
   ===================================================================== */
.exp-team-head { text-align: center; max-width: 760px; margin: 0 auto 30px; }
.exp-team-head h2 { font-size: 2.25rem; font-weight: 700; font-style: italic; color: var(--kaise-primary); margin-bottom: 24px; } /* XD: 36px Bold Italic, #467FA5 */
.exp-team-head h2 em { font-style: italic; color: var(--kaise-primary); font-weight: 700; }
.exp-team-head p { color: #707070; font-size: 1.125rem; line-height: 1.7; margin-bottom: 1.2em; } /* XD: 18px, #707070 */
.exp-team-head p strong { color: var(--kaise-dark); font-weight: 700; }
.exp-team-head .claim { color: var(--kaise-primary); font-weight: 600; font-size: 1.125rem; } /* XD: 18px SemiBold */
.exp-team-head .claim em { font-style: italic; }

.exp-team-carousel { position: relative; }
.exp-team-track {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
	scroll-snap-type: x mandatory;
}
.exp-team-card {
	background: #fff; border: 1px solid var(--kaise-border); border-radius: 0; overflow: hidden;
	scroll-snap-align: start;
}
.exp-team-card__media { aspect-ratio: 9 / 10; overflow: hidden; } /* XD: marco de foto 396x440. Las fotos ya vienen recortadas con el encuadre del diseño (team-*-v2.jpg) */
.exp-team-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.exp-team-card:hover .exp-team-card__media img { transform: scale(1.04); }
.exp-team-card__body { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; gap: 10px; }
.exp-team-card__body h4 { font-size: 1rem; font-weight: 600; margin: 0 0 2px; } /* XD: 16px SemiBold */
.exp-team-card__body p { font-size: .875rem; color: var(--kaise-gray); margin: 0; } /* XD: 14px */
.exp-team-card__ig {
	width: 30px; height: 30px; border-radius: 50%; flex: none;
	background: var(--kaise-primary); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.exp-team-arrow {
	position: absolute; top: 40%; width: 38px; height: 38px; border-radius: 50%;
	background: #fff; border: 1px solid var(--kaise-border); color: var(--kaise-dark);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	box-shadow: 0 6px 16px rgba(0,0,0,.08); z-index: 3;
}
.exp-team-arrow--prev { left: -50px; }
.exp-team-arrow--next { right: -50px; }

/* =====================================================================
   EXPERIENCIA DIGITAL (texto centrado en columna gris)
   ===================================================================== */
.exp-digital { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.exp-digital__text {
	background: var(--kaise-light-gray);
	display: flex; align-items: center; justify-content: center;
	text-align: center; padding: 70px 50px;
}
.exp-digital__text-inner { max-width: 380px; }
.exp-digital__text h2 { font-size: 2.25rem; font-weight: 700; margin-bottom: 20px; } /* XD: 36px */
.exp-digital__text h2 em { font-style: italic; color: var(--kaise-primary); }
.exp-digital__text p { color: #707070; font-size: 1.125rem; line-height: 1.7; } /* XD: 18px, #707070 */
.exp-digital__text p strong { color: var(--kaise-dark); font-weight: 700; }
.exp-digital__media { min-height: 420px; background-size: cover; background-position: center; }

/* =====================================================================
   BANNER BIENVENIDA
   ===================================================================== */
.exp-welcome {
	position: relative; min-height: 260px;
	display: flex; align-items: center; justify-content: center; text-align: center;
	background-size: cover; background-position: center;
}
.exp-welcome::before { content:""; position:absolute; inset:0; background: rgba(20,15,10,.42); }
.exp-welcome h2 { position: relative; z-index: 2; color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.3; margin: 0; }
.exp-welcome h2 em { font-style: italic; display: block; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 991px) {
	.exp-split { grid-template-columns: 1fr; gap: 30px; }
	.exp-dualquote { grid-template-columns: 1fr; }
	.exp-photo-row { grid-template-columns: repeat(3, 1fr); }
	.exp-inspiration, .exp-digital { grid-template-columns: 1fr; }
	.exp-inspiration__media, .exp-digital__media { min-height: 280px; }
	.exp-team-track { grid-template-columns: repeat(2, 1fr); }
	.exp-team-arrow { display: none; }
}
@media (max-width: 767px) {
	.exp-photo-row { grid-template-columns: repeat(2, 1fr); }
	.exp-photo-row img { height: 200px; }
	.exp-team-track { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}