/* =========================================================================
   Mastercoip 2026 — página «Nuestra Filosofía».
   Referencia: artboard Adobe XD 13-nuestra-filosofia (1920 x 4917).
   Contenedor 1142 px (márgenes de 389 a 1920). Los comentarios indican la
   coordenada Y original de cada elemento en el XD.
   Los tokens de paleta, el contenedor y los breakpoints vienen de base.css.
   ========================================================================= */

.coip-filosofia {
	/* Tamaños propios: esta página no usa la escala habitual del tema. */
	--fil-fs-h1: 50px; /* «Nuestra Filosofía» */
	--fil-fs-h2: 40px; /* encabezados de los bloques de imagen + texto */
	--fil-fs-lead: 30px; /* entradilla del hero, título de la tarjeta, firma */
	--fil-fs-card: 24px; /* cuerpo de la tarjeta del propósito */
	--fil-fs-claim: 50px; /* «MENTALIDAD + CIENCIA» y «Pensamos en grande.» */
	--fil-fs-big: 38px; /* claim de la comunidad */
	--fil-fs-body: 20px;
	--fil-fs-md: 18px; /* cuerpo de los bloques de imagen + texto */

	/* Estructura */
	--fil-sec-gap: 100px; /* separación entre bloques */
	--fil-col-img: 485fr; /* 485 / 1142 */
	--fil-col-txt: 582fr; /* 582 / 1142 */
	--fil-col-gap: 6.5674%; /* 75 / 1142 */

	--fil-hero-top: 209px;
	--fil-hero-bottom: 239px;

	font-size: var(--fil-fs-body);
	line-height: var(--coip-lh);
	color: var(--coip-ink);
}

.coip-filosofia b {
	font-weight: 600; /* SemiBold: los resaltes del XD dentro del texto corrido */
}

/* -------------------------------------------------------------------------
   1. Hero  (y 120 → 720, alto 600)
   ---------------------------------------------------------------------- */

.coip-filosofia__hero {
	position: relative;
	background-color: var(--coip-charcoal);
	background-image: url("../img/filosofia-hero.webp");
	background-position: 50% 50%; /* encuadre "cover" centrado del XD */
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--coip-cream);
	isolation: isolate;
}

/* Velo #5A5895 al 50 % en modo multiplicar, tal cual lo define XD. */
.coip-filosofia__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--coip-hero-veil);
	opacity: 0.5;
	mix-blend-mode: multiply;
}

.coip-filosofia__hero-inner {
	position: relative;
	z-index: 1;
	padding-block: var(--fil-hero-top) var(--fil-hero-bottom);
	text-align: center;
}

.coip-filosofia__h1 {
	max-width: 784px;
	margin-inline: auto;
	font-size: var(--fil-fs-h1);
	font-weight: 700;
	line-height: var(--coip-lh);
}

.coip-filosofia__h1 span {
	color: var(--coip-coral);
	font-weight: 900;
}

.coip-filosofia__hero-lead {
	max-width: 514px;
	margin: 20px auto 0; /* y 389 → 409 */
	font-size: var(--fil-fs-lead);
	font-weight: 500;
	line-height: var(--coip-lh);
}

/* -------------------------------------------------------------------------
   2. La convicción  (banda negra y 715 → 1415, alto 700)
   ---------------------------------------------------------------------- */

.coip-filosofia__convic {
	background: var(--coip-ink);
	color: var(--coip-cream);
}

.coip-filosofia__convic-inner {
	padding-block: 100px 241px; /* el primer texto arranca en y 820 */
	text-align: center;
}

.coip-filosofia__convic-intro {
	max-width: 524px;
	margin-inline: auto;
	line-height: var(--coip-lh);
}

/* Línea de entrada, 30 px Bold dentro de un párrafo de 20 px (y 820). */
.coip-filosofia__xl {
	font-size: var(--fil-fs-lead);
	font-weight: 700;
	line-height: var(--coip-lh);
}

.coip-filosofia__convic-intro + .coip-filosofia__convic-intro {
	margin-top: 1.2em; /* la línea en blanco del XD */
}

/* Tres píldoras de 313 x 50 con 30 px de hueco (y 1026). */
.coip-filosofia__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
	margin-top: 50px; /* y 976 → 1026 */
}

.coip-filosofia__pills li {
	display: flex;
	flex: 0 1 313px;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 12px 20px;
	border: 1px solid var(--coip-cream);
	border-radius: 25px;
	font-weight: 900;
	line-height: var(--coip-lh);
	text-align: center;
}

.coip-filosofia__convic-outro {
	max-width: 524px;
	margin: 50px auto 0; /* y 1076 → 1126 */
	line-height: var(--coip-lh);
}

/* -------------------------------------------------------------------------
   3. Tarjeta del propósito  (y 1274 → 1876)
   Monta 141 px sobre la banda negra, que termina en y 1415.
   ---------------------------------------------------------------------- */

.coip-filosofia__proposito {
	position: relative;
	z-index: 1;
	margin-top: -141px;
	padding-bottom: var(--fil-sec-gap); /* y 1876 → 1976 */
}

.coip-filosofia__card {
	position: relative;
	max-width: 798px;
	margin-inline: auto;
	overflow: hidden;
	background: var(--coip-charcoal);
	border-radius: var(--coip-radius);
	color: var(--coip-cream);
	isolation: isolate;
}

/* Mastercoip-0203-blurry (revisión 54 del XD): 2096x1398, escala 1,421875 ·
   offset (-0,180659, 0,135828) sobre el encaje "cover".

   La foto ya viene desenfocada del propio XD —el diseñador cambió el recurso
   por una versión con desenfoque para que el texto de encima se lea— así que
   aquí no hay ningún `filter: blur()`: desenfocar en el navegador costaría una
   capa de composición en cada repintado y además se comería los bordes de la
   tarjeta.

   Las tres cifras salen de `style.fill.pattern.meta.ux` del artboard. OJO CON
   LA FÓRMULA: el offset de XD es una fracción del ENCAJE «cover», no de la
   imagen ya ampliada por `scale`. Escribirlo contra la ampliada desplaza la
   foto casi 70 px y era el error que había aquí.

       cover = max(798/2096, 602/1398) = 0,430615
       cw    = 2096 * cover = 902,569      ch = 1398 * cover = 602
       rw    = cw * 1,421875 = 1283,341    rh = ch * 1,421875 = 855,969
       left  = -(1283,341 - 798)/2 + (-0,180659 * 902,569) = -405,73 px
       top   = -( 855,969 - 602)/2 + ( 0,135828 * 602    ) =  -45,22 px

   Verificado contra el render del artboard (`thumb.png` de la revisión 54):
   con estas cifras el error medio de los bordes de la tarjeta baja de 17,4 a
   5,4 sobre 255. La misma corrección hacía falta en faculty.css. */
.coip-filosofia__card-bg {
	position: absolute;
	top: -7.511%;
	left: -50.843%;
	width: 160.82%;
	height: auto;
	max-width: none;
}

/* Velo #292B32 al 85,4 % en modo multiplicar. */
.coip-filosofia__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--coip-charcoal);
	opacity: 0.8537;
	mix-blend-mode: multiply;
}

.coip-filosofia__card-inner {
	position: relative;
	z-index: 1;
	/* Título en y 1374 y columna de texto de 601 px. El pie son los 99 px del
	   XD más los 2 px que se pierden al usar el interlineado 1,2 del sistema
	   (28,8 px) en lugar de los 29 px redondeados de XD: así la tarjeta vuelve
	   a medir 602 px y los tres bloques siguientes caen en su «y» exacta. */
	padding: 100px 98.5px 101px;
	text-align: center;
}

.coip-filosofia__card-title {
	font-size: var(--fil-fs-lead);
	font-weight: 700;
	line-height: var(--coip-lh);
}

.coip-filosofia__card-text {
	font-size: var(--fil-fs-card);
	font-weight: 400;
	line-height: var(--coip-lh);
}

.coip-filosofia__card-text + .coip-filosofia__card-text {
	margin-top: 1.2em; /* la línea en blanco del XD */
}

.coip-filosofia__claim {
	margin-top: 15px; /* y 1642 → 1657 */
	font-size: var(--fil-fs-claim);
	font-weight: 900;
	line-height: var(--coip-lh);
}

/* «+ CIENCIA» va en el lila, no en el violeta oscuro: en el AGC del artboard
   el `rangedStyle` de ese tramo es 0xFF9D9AFF. El violeta de antes (#514F87)
   sobre una foto oscura se leía a duras penas. */
.coip-filosofia__claim span {
	color: var(--coip-lilac);
}

/* -------------------------------------------------------------------------
   4-6. Bloques de imagen + texto  (485 | 75 | 582)
   ---------------------------------------------------------------------- */

.coip-filosofia__split {
	margin-bottom: var(--fil-sec-gap);
}

.coip-filosofia__split-inner {
	display: grid;
	align-items: start;
	column-gap: var(--fil-col-gap);
}

.coip-filosofia__split--left .coip-filosofia__split-inner {
	grid-template-columns: var(--fil-col-img) var(--fil-col-txt);
}

.coip-filosofia__split--right .coip-filosofia__split-inner {
	grid-template-columns: var(--fil-col-txt) var(--fil-col-img);
}

.coip-filosofia__split--right .coip-filosofia__figure {
	order: 2;
}

/* El recorte lo hace la figura: así la foto puede ir ampliada y desplazada
   como en XD sin salirse de la caja. */
.coip-filosofia__figure {
	position: relative;
	overflow: hidden;
	aspect-ratio: 485 / 558;
	border-radius: var(--coip-radius);
}

.coip-filosofia__photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%; /* encaje "cover" centrado */
	transition: transform var(--coip-dur) var(--coip-ease-suave);
}

/* Encuadre literal del XD. En el AGC cada relleno de imagen trae una escala
   sobre el encaje "cover" y un desplazamiento normalizado; aquí se traducen a
   ancho + esquina superior izquierda en porcentaje de la caja, que es la única
   forma de conservar los dos a la vez y seguir siendo elástico.
   Mastercoip-0393: escala 1,0154 · offset (0,1686, -0,0077).

   El transform-origin no forma parte del encuadre: lo necesita el zoom del
   hover. Estas dos fotos van ampliadas y descentradas, así que el centro de
   la IMAGEN no cae en el centro de la CAJA y, escalando desde el origen por
   defecto, el acercamiento tiraría del encuadre hacia un lado. Se corrige
   con la misma cuenta que el encuadre —(50 % − left) / width, en unidades de
   la caja—, sin tocar ninguna de las cuatro propiedades de posición. */
.coip-filosofia__split--excelencia .coip-filosofia__photo {
	top: -1.5%;
	left: -8.073%;
	width: 175.21%;
	height: auto;
	transform-origin: 33.15% 50%; /* (50 + 8,073) / 175,21 */
}

/* mastercoip_brasil-584: escala 1,2541 · offset (0,0924, 0,0606). */
.coip-filosofia__split--aprender .coip-filosofia__photo {
	top: -5.102%;
	left: -38.223%;
	width: 216.426%;
	height: auto;
	transform-origin: 40.76% 50%; /* (50 + 38,223) / 216,426 */
}

/* Mastercoip-0170 no lleva escala ni offset: encaje "cover" centrado. */

/* Gesto 4 (acercar) del lenguaje de hover de base.css. Es el único gesto que
   cabe en esta página: es editorial de arriba abajo, no hay ni un enlace ni
   un botón, así que elevar tarjetas o rellenar píldoras anunciaría clics que
   no llevan a ninguna parte. Una foto que se acerca un 4 % no anuncia nada.
   La figura ya recorta (overflow: hidden), de modo que el zoom se queda
   dentro de su caja y no empuja a la columna de texto de al lado. */
@media (hover: hover) and (pointer: fine) {

	.coip-filosofia__figure:hover .coip-filosofia__photo {
		transform: scale(var(--coip-zoom));
	}
}

/* Desplazamiento del texto respecto al borde superior de la foto. */
.coip-filosofia__split--excelencia .coip-filosofia__text {
	padding-top: 78px; /* foto y 1976, h2 y 2054 */
}

.coip-filosofia__split--aprender .coip-filosofia__text {
	padding-top: 146px; /* foto y 2634, h2 y 2780 */
}

.coip-filosofia__split--impacto .coip-filosofia__text {
	padding-top: 89px; /* foto y 3292, h2 y 3381 */
}

.coip-filosofia__h2 {
	font-size: var(--fil-fs-h2);
	font-weight: 700;
	line-height: var(--coip-lh);
	color: var(--coip-charcoal);
}

.coip-filosofia__h2 span {
	font-weight: 900;
}

.coip-filosofia__body {
	margin-top: 20px; /* h2 → cuerpo, constante en los tres bloques */
	font-size: var(--fil-fs-md);
	font-weight: 400;
	line-height: var(--coip-lh);
	color: var(--coip-ink);
}

.coip-filosofia__body p + p {
	margin-top: 1.2em; /* la línea en blanco del XD */
}

/* -------------------------------------------------------------------------
   7. Pensamos en grande  (banda a sangre y 3950 → 4702,5)
   ---------------------------------------------------------------------- */

.coip-filosofia__grande {
	position: relative;
	background-color: var(--coip-charcoal);
	background-image: none;
	background-position: 50% 50%; /* encuadre "cover" centrado del XD */
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--coip-cream);
	isolation: isolate;
}

.coip-filosofia__grande.is-coip-bg-loaded {
	background-image: url("../img/filosofia-comunidad.webp");
}

/* Velo negro al 50,1 % en modo multiplicar. */
.coip-filosofia__grande::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--coip-ink);
	opacity: 0.5014;
	mix-blend-mode: multiply;
}

.coip-filosofia__grande-inner {
	position: relative;
	z-index: 1;
	padding-block: 100.5px; /* asterisco en y 4050,5 */
	text-align: center;
}

.coip-filosofia__star {
	display: block;
	width: 35px;
	margin-inline: auto;
	color: var(--coip-cream);
}

.coip-filosofia__star svg {
	width: 35px;
	height: 33.47px;
}

.coip-filosofia__grande-title {
	font-size: var(--fil-fs-claim);
	font-weight: 400;
	line-height: var(--coip-lh);
}

.coip-filosofia__grande-title span {
	font-weight: 900;
}

.coip-filosofia__grande-lead {
	max-width: 640px;
	margin-inline: auto;
	font-size: var(--fil-fs-body);
	font-weight: 400;
	line-height: var(--coip-lh);
}

.coip-filosofia__grande-title + .coip-filosofia__grande-lead {
	margin-top: 20.3px; /* y 4144 → 4164,3 */
}

.coip-filosofia__grande-claim {
	max-width: 640px;
	margin: 20.3px auto 0; /* y 4212,3 → 4232,6 */
	font-size: var(--fil-fs-big);
	font-weight: 500;
	line-height: var(--coip-lh);
}

.coip-filosofia__grande-claim + .coip-filosofia__grande-lead {
	margin-top: 30.7px; /* y 4324,6 → 4355,3 */
}

.coip-filosofia__grande-end {
	max-width: 438px;
	margin: 30.7px auto 0; /* y 4427,3 → 4458 */
	font-size: var(--fil-fs-body);
	line-height: var(--coip-lh);
}

.coip-filosofia__grande-sign {
	/* La línea en blanco del XD vale una línea del párrafo de 20 px. */
	margin-top: calc(var(--fil-fs-body) * 1.2);
	font-size: var(--fil-fs-lead);
	font-weight: 700;
	line-height: var(--coip-lh);
}

/* -------------------------------------------------------------------------
   Responsive — el XD sólo trae 1920; los cortes son los del tema
   ---------------------------------------------------------------------- */

@media (max-width: 1279px) {
	/* Por debajo de 1920 el contenedor ya no da los 999 px que necesitan tres
	   píldoras de 313: se encogen a partes iguales para no romper la fila. */
	.coip-filosofia__pills li {
		flex: 1 1 190px;
		max-width: 313px;
	}

	.coip-filosofia {
		--fil-fs-h1: 44px;
		--fil-fs-h2: 36px;
		--fil-fs-lead: 28px;
		--fil-fs-card: 22px;
		--fil-fs-claim: 44px;
		--fil-fs-big: 34px;
		--fil-fs-body: 19px;
		--fil-fs-md: 17px;
		--fil-sec-gap: 80px;
		--fil-hero-top: 150px;
		--fil-hero-bottom: 150px;
	}

	.coip-filosofia__convic-inner {
		padding-block: 80px 200px;
	}

	.coip-filosofia__proposito {
		margin-top: -120px;
	}

	.coip-filosofia__card-inner {
		padding: 70px 60px;
	}

	.coip-filosofia__split--excelencia .coip-filosofia__text,
	.coip-filosofia__split--impacto .coip-filosofia__text {
		padding-top: 40px;
	}

	.coip-filosofia__split--aprender .coip-filosofia__text {
		padding-top: 80px;
	}

	.coip-filosofia__grande-inner {
		padding-block: 80px;
	}
}

@media (max-width: 1023px) {
	.coip-filosofia {
		--fil-fs-h1: 38px;
		--fil-fs-h2: 32px;
		--fil-fs-lead: 26px;
		--fil-fs-card: 21px;
		--fil-fs-claim: 38px;
		--fil-fs-big: 30px;
		--fil-fs-body: 18px;
		--fil-fs-md: 17px;
		--fil-sec-gap: 64px;
		--fil-hero-top: 120px;
		--fil-hero-bottom: 120px;
	}

	.coip-filosofia__convic-inner {
		padding-block: 64px 160px;
	}

	.coip-filosofia__proposito {
		margin-top: -100px;
	}

	.coip-filosofia__card-inner {
		padding: 56px 44px;
	}

	/* Las dos columnas pasan a una sola: foto arriba, texto debajo. */
	.coip-filosofia__split--left .coip-filosofia__split-inner,
	.coip-filosofia__split--right .coip-filosofia__split-inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}

	.coip-filosofia__split--right .coip-filosofia__figure {
		order: 0;
	}

	.coip-filosofia__figure {
		aspect-ratio: 16 / 10;
	}

	/* A una columna la tarjeta crece mucho a lo alto: el encuadre ampliado del
	   XD dejaría de cubrirla, así que vuelve al encaje "cover" conservando el
	   punto de interés. */
	.coip-filosofia__card-bg {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 95.8% 13.2%;
	}

	.coip-filosofia__split--excelencia .coip-filosofia__text,
	.coip-filosofia__split--aprender .coip-filosofia__text,
	.coip-filosofia__split--impacto .coip-filosofia__text {
		padding-top: 0;
	}

	.coip-filosofia__grande-inner {
		padding-block: 64px;
	}
}

@media (max-width: 767px) {
	.coip-filosofia {
		--fil-fs-h1: 30px;
		--fil-fs-h2: 28px;
		--fil-fs-lead: 22px;
		--fil-fs-card: 19px;
		--fil-fs-claim: 30px;
		--fil-fs-big: 24px;
		--fil-fs-body: 17px;
		--fil-fs-md: 16px;
		--fil-sec-gap: 48px;
		--fil-hero-top: 80px;
		--fil-hero-bottom: 80px;
	}

	.coip-filosofia__convic-inner {
		padding-block: 48px 120px;
	}

	.coip-filosofia__proposito {
		margin-top: -80px;
	}

	.coip-filosofia__card-inner {
		padding: 40px 24px;
	}

	/* Los saltos de línea del XD sólo tienen sentido a 1920: a un ancho de
	   móvil dejan líneas huérfanas. Se mantienen los que separan frases. */
	.coip-filosofia__convic-intro br:nth-of-type(2),
	.coip-filosofia__grande-lead br {
		display: none;
	}

	.coip-filosofia__pills {
		gap: 16px;
	}

	.coip-filosofia__pills li {
		flex: 1 1 100%;
		max-width: none;
	}

	.coip-filosofia__grande-inner {
		padding-block: 48px;
	}

	.coip-filosofia__grande-title + .coip-filosofia__grande-lead,
	.coip-filosofia__grande-claim,
	.coip-filosofia__grande-claim + .coip-filosofia__grande-lead,
	.coip-filosofia__grande-end {
		margin-top: 20px;
	}

	.coip-filosofia__star {
		width: 28px;
	}

	.coip-filosofia__star svg {
		width: 28px;
		height: 26.78px;
	}
}

@media (max-width: 479px) {
	.coip-filosofia {
		--fil-fs-h1: 26px;
		--fil-fs-h2: 25px;
		--fil-fs-lead: 20px;
		--fil-fs-card: 18px;
		--fil-fs-claim: 26px;
		--fil-fs-big: 22px;
		--fil-fs-body: 16px;
		--fil-fs-md: 15px;
	}
}