/* ==========================================================================================================
   Sección nosotros: historia con un collage de fotos en capas (paralaje suave), un contador de años dentro de una
   lente de vidrio, una línea de tiempo 1998 → hoy que recorre una gota de luz, y misión, visión y valores en
   tarjetas de vidrio. Fondo blanco.
   ========================================================================================================== */

/* Revelado "enfoque" sin repintar: la pieza que está por enfocarse (servicios-comun.js le pone .enfoque-cerca) tiene
   capa propia mientras main.js le anima opacidad, desenfoque y posición; al quedar .enfocado la suelta. */
#nosotros .enfoque-cerca:not(.enfocado) { will-change: opacity, filter, transform; }

/* ---------- Historia --------------------------------------------------------------------------------------- */
.nosotros__historia {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
	gap: clamp(40px, 6vw, 96px);
}
.nosotros__texto { display: grid; gap: 18px; max-width: 54ch; }
.nosotros__texto > p { color: var(--texto-2); }
.nosotros__texto > .nosotros__entrada {
	font-size: var(--t-entrada);
	line-height: 1.55;
	color: var(--texto);
	font-weight: 500;
}
.nosotros__lema {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 10px;
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--texto) !important;
}
.nosotros__lema::before {
	content: "";
	flex: none;
	width: 36px;
	height: 3px;
	margin-top: 0.6em;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--cielo-500), var(--azul-marca));
}

/* Collage: cuatro fotos en capas; cada capa se desplaza a su ritmo (paralaje) */
.nosotros__fotos {
	position: relative;
	aspect-ratio: 1 / 1.08;
	width: 100%;
}
.nosotros__capa { position: absolute; will-change: transform; }
.nosotros__capa--tienda { left: 0; top: 2%; width: 74%; z-index: 1; }
.nosotros__capa--letrero { right: 0; top: 27%; width: 32%; z-index: 3; }
.nosotros__capa--examen { left: 7%; top: 47%; width: 57%; z-index: 2; }
.nosotros__capa--certificados { right: 3%; top: 71%; width: 43%; z-index: 4; }
.nosotros__foto {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radio-l);
	background: var(--fondo-3);
	box-shadow: var(--sombra-l);
}
.nosotros__foto img { width: 100%; height: auto; }
/* Canto de vidrio sobre cada foto */
.nosotros__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.9);
	pointer-events: none;
}
/* Sello de vidrio sobre la foto de la tienda */
.nosotros__sello {
	position: absolute;
	left: 16px;
	bottom: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 10px;
	border-radius: 999px;
	font-size: var(--t-mini);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--texto);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: var(--brillo-vidrio), 0 10px 24px -12px rgba(10, 30, 90, 0.5);
	-webkit-backdrop-filter: blur(14px) saturate(170%);
	backdrop-filter: blur(14px) saturate(170%);
}
.nosotros__sello::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff 0 18%, #8fd6ff 34%, var(--cielo-500) 72%, var(--azul-marca) 100%);
}
.nosotros__capa--letrero .nosotros__foto,
.nosotros__capa--certificados .nosotros__foto { border: 5px solid #fff; }
.nosotros__capa--letrero .nosotros__foto { border-radius: var(--radio); }
.nosotros__capa--certificados .nosotros__foto { border-radius: var(--radio); }

/* ---------- Tiempo: contador + línea 1998 → hoy ------------------------------------------------------------ */
.nosotros__tiempo {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: clamp(28px, 5vw, 80px);
	margin-top: clamp(72px, 9vw, 132px);
	padding: clamp(28px, 4vw, 56px) clamp(24px, 4.5vw, 64px);
	border-radius: var(--radio-xl);
	background:
		radial-gradient(60% 120% at 12% 50%, rgba(223, 236, 255, 0.9), rgba(255, 255, 255, 0) 70%),
		linear-gradient(180deg, #ffffff, var(--fondo-2));
	border: 1px solid var(--borde);
	box-shadow: var(--brillo-vidrio), var(--sombra-l);
	overflow: hidden;
	isolation: isolate;
}

/* El contador vive dentro de una lente de vidrio centrada en la cifra */
.nosotros__contador { position: relative; display: flex; align-items: center; min-height: 240px; }
.nosotros__cifra-bloque { position: relative; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); }
.nosotros__cifra {
	--lente: 232px;
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: var(--lente);
	height: var(--lente);
	font-size: clamp(5.2rem, 3rem + 6vw, 8.4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.06em;
	color: var(--azul-marca);
	text-indent: -0.06em;
	isolation: isolate;
}
.nosotros__cifra::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 120%, rgba(46, 155, 255, 0.24), rgba(46, 155, 255, 0) 60%),
		radial-gradient(circle at 34% 26%, #ffffff 0%, #f3f8ff 55%, #e2eefd 100%);
	border: 1px solid rgba(255, 255, 255, 0.95);
	box-shadow:
		0 0 0 1px rgba(20, 55, 230, 0.08),
		0 30px 60px -30px rgba(20, 60, 150, 0.5),
		inset 0 -18px 30px rgba(46, 155, 255, 0.14);
}
/* Reflejo aqua en la mitad superior de la lente, por encima de la cifra: se lee como vidrio */
.nosotros__cifra::after {
	content: "";
	position: absolute;
	left: 13%;
	right: 13%;
	top: 3.5%;
	height: 42%;
	border-radius: 999px 999px 50% 50% / 999px 999px 40% 40%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0));
	pointer-events: none;
}
.nosotros__cifra-etiqueta {
	font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--texto);
}

/* Línea de tiempo: dos hitos (1998 y hoy) y una gota de luz que la recorre */
.nosotros__linea {
	--y: 62px;
	--avance: 1;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.nosotros__linea::before,
.nosotros__linea::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	top: calc(var(--y) - 1px);
	height: 2px;
	border-radius: 2px;
}
.nosotros__linea::before { background: #dde6f3; }
.nosotros__linea::after {
	background: linear-gradient(90deg, var(--cielo-500), var(--azul-marca));
	transform: scaleX(var(--avance));
	transform-origin: left center;
	box-shadow: 0 0 12px rgba(46, 155, 255, 0.45);
}
.nosotros__hito { position: relative; display: grid; align-content: start; gap: 0; padding-top: 0; }
.nosotros__hito--hoy { text-align: right; justify-items: end; }
.nosotros__anio {
	display: block;
	height: 44px;
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 44px;
	color: var(--texto);
}
.nosotros__hito--hoy .nosotros__anio { color: var(--azul-marca); }
/* Nodo de cada hito: una perla de vidrio sobre la línea */
.nosotros__hito::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--y) - 10px);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: radial-gradient(circle at 36% 30%, #fff 0 22%, #d9e8ff 60%, #b8d3fb 100%);
	border: 2px solid var(--azul-marca);
	box-shadow: 0 4px 10px rgba(20, 55, 230, 0.25);
	transition: box-shadow 0.6s var(--ease-out), background 0.6s;
}
.nosotros__hito--hoy::before {
	left: auto;
	right: 0;
	border-color: #b9c6dc;
	background: radial-gradient(circle at 36% 30%, #fff 0 22%, #eef3fa 70%);
	box-shadow: none;
}
.nosotros__linea.llego .nosotros__hito--hoy::before {
	border-color: var(--azul-marca);
	background: radial-gradient(circle at 36% 30%, #fff 0 22%, #9fd4ff 60%, var(--cielo-500) 100%);
	box-shadow: 0 0 0 6px rgba(46, 155, 255, 0.16), 0 0 24px rgba(46, 155, 255, 0.55);
}
.nosotros__hito-texto {
	display: block;
	max-width: 30ch;
	margin-top: 40px;
	color: var(--texto-2);
	font-size: 0.975rem;
	line-height: 1.55;
}
/* La gota de luz que viaja de 1998 a hoy (la crea nosotros.js). El elemento es un riel invisible del largo de la línea
   que se traslada con --avance (solo transform: el compositor la mueve sin reflujo ni repintado); la gota es su
   ::before, sobre el canto de inicio del riel. Queda en el mismo punto que antes: 10px + (100% - 20px) × avance. */
.nosotros__gota {
	position: absolute;
	left: 10px;
	right: 10px;
	top: var(--y);
	z-index: 2;
	height: 0;
	pointer-events: none;
	transform: translateX(calc(100% * var(--avance)));
	will-change: transform;
}
.nosotros__gota::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, #fff 0 20%, rgba(255, 255, 255, 0.5) 38%, rgba(127, 207, 255, 0.55) 70%, rgba(46, 155, 255, 0.8) 100%);
	border: 1px solid rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 0 5px rgba(46, 155, 255, 0.12), 0 0 22px rgba(46, 155, 255, 0.6), 0 6px 14px rgba(20, 55, 230, 0.3);
	opacity: var(--gota-o, 1);
}

/* ---------- Misión, visión y valores ----------------------------------------------------------------------- */
.nosotros__define { margin-top: clamp(72px, 9vw, 132px); }
.nosotros__define > h3 { margin-bottom: clamp(24px, 3vw, 40px); }
.nosotros__pilares {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}
.nosotros__pilar { display: flex; min-width: 0; }
.nosotros__tarjeta {
	--mx: -600px;
	--my: -600px;
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: clamp(24px, 2.6vw, 34px);
	border-radius: var(--radio-l);
	background:
		radial-gradient(480px circle at var(--mx) var(--my), rgba(46, 155, 255, 0.07), transparent 45%),
		linear-gradient(180deg, #ffffff 0%, rgba(244, 248, 254, 0.9) 100%);
	border: 1px solid var(--borde);
	box-shadow: var(--brillo-vidrio), var(--sombra);
	isolation: isolate;
	transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.nosotros__tarjeta::after {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(240px circle at var(--mx) var(--my), rgba(46, 155, 255, 0.7), rgba(46, 155, 255, 0) 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.4s;
}
@media (hover: hover) and (pointer: fine) {
	.nosotros__tarjeta:hover { transform: translateY(-4px); box-shadow: var(--brillo-vidrio), var(--sombra-l); }
	.nosotros__tarjeta:hover::after { opacity: 1; }
}
.nosotros__tarjeta h4 { margin-top: 6px; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); letter-spacing: -0.03em; }
.nosotros__tarjeta p { color: var(--texto-2); }

/* Burbuja de vidrio del ícono (mismo lenguaje que servicios) */
.nosotros__icono {
	position: relative;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	color: var(--azul-marca);
	background:
		radial-gradient(circle at 50% 118%, rgba(46, 155, 255, 0.28), rgba(46, 155, 255, 0) 62%),
		radial-gradient(circle at 36% 26%, #ffffff 0%, #f1f6ff 58%, #e3edfd 100%);
	border: 1px solid rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 0 1px rgba(20, 55, 230, 0.09), 0 12px 26px -14px rgba(20, 60, 150, 0.55), inset 0 -8px 14px rgba(46, 155, 255, 0.14);
}
.nosotros__icono::after {
	content: "";
	position: absolute;
	inset: 3px 8px 52%;
	z-index: 2;
	border-radius: 999px 999px 45% 45% / 999px 999px 30% 30%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.08));
}
.nosotros__icono svg {
	position: relative;
	z-index: 1;
	width: 36px;
	height: 36px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Valores: fichas de vidrio (informativas, no son botones) */
.nosotros__valores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.nosotros__valores li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 14px 0 12px;
	border-radius: 999px;
	border: 1px solid rgba(20, 55, 230, 0.14);
	background: linear-gradient(180deg, #ffffff, #eef4ff);
	box-shadow: var(--brillo-vidrio), 0 4px 10px -6px rgba(20, 60, 150, 0.35);
	color: var(--azul-hondo);
	font-size: var(--t-chico);
	font-weight: 650;
}
.nosotros__valores li::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff 0 18%, #8fd6ff 36%, var(--cielo-500) 72%, var(--azul-marca) 100%);
}

/* ---------- Tableta ---------------------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.nosotros__historia { grid-template-columns: 1fr; }
	.nosotros__texto { max-width: 64ch; }
	.nosotros__fotos { max-width: 640px; margin-inline: auto; }
	.nosotros__tiempo { grid-template-columns: 1fr; }
	.nosotros__contador { min-height: 0; }
	.nosotros__pilares { grid-template-columns: 1fr 1fr; }
	.nosotros__pilar[data-pilar="valores"] { grid-column: 1 / -1; }
}

/* ---------- Teléfono: línea de tiempo vertical ------------------------------------------------------------- */
@media (max-width: 640px) {
	.nosotros__pilares { grid-template-columns: 1fr; }
	.nosotros__fotos { aspect-ratio: 1 / 1.12; }
	.nosotros__capa--letrero .nosotros__foto,
	.nosotros__capa--certificados .nosotros__foto { border-width: 3px; }
	.nosotros__foto { border-radius: var(--radio); }
	.nosotros__contador { min-height: 0; }
	.nosotros__cifra { --lente: 168px; font-size: 5.4rem; }

	/* ol.… para ganarle a ol[class] { padding: 0 } de base.css */
	ol.nosotros__linea { grid-template-columns: 1fr; gap: 28px; padding-left: 40px; }
	.nosotros__linea::before,
	.nosotros__linea::after { left: 9px; right: auto; top: var(--ini, 22px); width: 2px; height: var(--largo, 100px); }
	.nosotros__linea::after { transform: scaleY(var(--avance)); transform-origin: center top; }
	.nosotros__hito,
	.nosotros__hito--hoy { text-align: left; justify-items: start; }
	.nosotros__hito::before,
	.nosotros__hito--hoy::before { left: -40px; right: auto; top: 12px; }
	.nosotros__anio { height: auto; line-height: 1.1; }
	.nosotros__hito-texto { margin-top: 6px; }
	/* Riel vertical: del primer nodo al segundo; la gota baja con translateY */
	.nosotros__gota {
		right: auto;
		width: 0;
		top: var(--ini, 22px);
		height: var(--largo, 100px);
		transform: translateY(calc(100% * var(--avance)));
	}
}