/* =====================================================================
   KAISÉ — NOSOTROS v2
   Hoja de estilos específica para la página Nosotros.
   Se carga DESPUÉS de style.css e inicio.css (reutiliza componentes
   compartidos: .icon-btn, .logo-text, .products-grid/.pcard, footer).
   ===================================================================== */

/* Nav activo */
.site-nav__list a.is-current { color: var(--kaise-primary); position: relative; }
.site-nav__list a.is-current::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
	height: 2px; background: var(--kaise-primary);
}

/* =====================================================================
   HERO "SOBRE NOSOTROS"
   ===================================================================== */
.about-hero {
	position: relative;
	overflow: hidden;
	/* El banner definitivo (Banner-Nosotros-Kaise.jpg) trae el "kaisé" gigante
	   incorporado a la imagen, así que el alto sigue la proporción del banner
	   (2400x1263) para que se vea completo tal como lo diseñó Maria Paz, con
	   tope de alto para que en pantallas muy anchas no ocupe más que la ventana.
	   Antes el wordmark, la mancha y el "tick" se dibujaban con CSS encima de la
	   foto — se quitaron para no duplicar el wordmark. */
	/* 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);
	background-color: #eef3f7;
	background-size: cover;
	background-position: center bottom; /* el wordmark se sale por abajo a propósito */
	display: flex;
	align-items: center;
}
.about-hero__content { position: relative; z-index: 2; text-align: center; width: 100%; }
.about-hero__content h1 {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	font-size: clamp(2rem, 3.6vw, 2.7rem);
	color: var(--kaise-dark);
	line-height: 1.15;
	margin: 0;
}
.about-hero__content h1 em {
	display: block;
	font-style: italic;
	font-weight: 800;
}

/* =====================================================================
   INTRO — heading + párrafo en dos columnas
   ===================================================================== */
.about-intro { padding: 110px 0 80px; } /* XD: más altura arriba Y abajo (antes 0 abajo) */
.about-intro__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; }
.about-intro__grid h2 { font-size: 2.25rem; font-weight: 700; color: var(--kaise-dark); line-height: 1.25; } /* XD: 36px */
.about-intro__grid h2 em { font-style: italic; color: var(--kaise-primary); }
.about-intro__grid .col-right p { color: #707070; font-size: .95rem; line-height: 1.6; margin-bottom: 1.2em; } /* XD: interlineado más ajustado, gris #707070 */
.about-intro__grid .col-right p strong { color: var(--kaise-dark); font-weight: 600; }

/* Foto ancha de running, a continuación del intro */
.about-runbanner {
	margin-top: 80px;
	height: 380px;
	background-size: cover;
	background-position: center 30%;
}

/* =====================================================================
   FOTOS + FRASE
   ===================================================================== */
.about-quote-photos { background: var(--kaise-light-gray); padding: 70px 0; }
.about-quote-photos__grid { display: grid; grid-template-columns: repeat(3, 1fr) 1fr; gap: 26px; align-items: end; } /* XD: texto alineado abajo, no centrado */
.about-quote-photos__grid img { border-radius: 0; aspect-ratio: 3/4; object-fit: cover; }
.about-quote-photos__text { font-size: 2.25rem; font-weight: 400; color: var(--kaise-dark); line-height: 1.3; } /* XD: 36px Regular */
.about-quote-photos__text strong { font-weight: 700; }
.about-quote-photos__text em { font-style: italic; font-weight: 700; }
.about-quote-photos__text .accent { color: var(--kaise-primary); }

/* =====================================================================
   NUESTRO PROPÓSITO
   ===================================================================== */
.about-purpose { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.about-purpose__text { display: flex; flex-direction: column; justify-content: center; padding: 60px 60px 60px 0; }
.about-purpose__text h2 { font-size: 2.25rem; font-weight: 700; } /* XD: 36px */
.about-purpose__text h2 em { font-style: italic; color: var(--kaise-primary); }
.about-purpose__text p { color: #707070; font-size: 1.125rem; font-weight: 600; line-height: 1.7; max-width: 340px; } /* XD: 18px SemiBold, #707070 */
.about-purpose__text p strong { color: var(--kaise-dark); font-weight: 700; }
.about-purpose__media { min-height: 420px; background-size: cover; background-position: center 20%; }

/* =====================================================================
   NUESTROS VALORES
   ===================================================================== */
.values-v2-head { text-align: center; margin-bottom: 60px; }
.values-v2-head h2 { font-size: 2.25rem; font-weight: 700; color: var(--kaise-dark); } /* XD: 36px */
.values-v2-head h2 em { font-style: italic; color: var(--kaise-primary); }

.values-v2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.value-v2-card {
	background: #fff; border-radius: 0; padding: 48px 40px; /* XD: más altura */
	display: flex; align-items: flex-start; gap: 24px;
}
.value-v2-card__num {
	font-family: 'Inter', sans-serif; font-weight: 100; /* XD: Inter Thin, no Light */
	font-size: clamp(4rem, 9vw, 12.5rem); /* XD: 200px — con clamp para no romper el layout en pantallas chicas */
	line-height: .75; flex: none;
	width: auto; min-width: 70px;
}
.value-v2-card--orange .value-v2-card__num,
.value-v2-card--orange h4 { color: var(--kaise-accent); }
.value-v2-card--blue .value-v2-card__num,
.value-v2-card--blue h4 { color: var(--kaise-primary); }
.value-v2-card h4 { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; } /* XD: 24px Bold */
.value-v2-card p { color: #707070; font-size: 1.125rem; line-height: 1.6; margin: 0; } /* XD: 18px, #707070 */
.value-v2-card p strong { color: var(--kaise-dark); font-weight: 700; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 991px) {
	.about-intro__grid { grid-template-columns: 1fr; }
	.about-quote-photos__grid { grid-template-columns: repeat(3, 1fr); }
	.about-quote-photos__text { grid-column: 1 / -1; margin-top: 10px; }
	.about-purpose { grid-template-columns: 1fr; }
	.about-purpose__text { padding: 50px 0; }
	.about-purpose__media { min-height: 320px; }
	.values-v2-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.about-quote-photos__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
	.value-v2-card { flex-direction: column; gap: 10px; padding: 28px; }
	.value-v2-card__num { font-size: 3rem; }
	.about-hero { min-height: 460px; }
}