/* ==========================================================================
   Nosotros — página completa

   No es una página de organigrama: responde a las dos preguntas de quien está
   decidiendo viajar —quién me atiende, qué pasa entre que aterrizo y que me
   voy—. El hero enseña al equipo con un revelado que sigue al cursor, el
   cuerpo presenta a los tres especialistas con credenciales reales, la
   experiencia 360 enumera el viaje completo, y la sede cierra con el vídeo
   real de la casa junto al mapa de ubicación.

   EL COLOR NO ESTÁ FIJADO POR SECCIÓN. El fondo se interpola con el scroll y
   la tinta voltea sola por luminancia — el mismo motor de la portada y del
   resto de subpáginas, que es el estándar de la casa. Aquí el arco es
   oscuro (hero) → claro (equipo) → oscuro (experiencia 360) → claro (sede).
   ========================================================================== */

@property --nos-iny { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* --------------------------------------------------------------------------
   EL HERO
   -------------------------------------------------------------------------- */
.nos-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(620px, 96vh, 1020px);
	display: flex;
	align-items: flex-end;
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	padding: clamp(90px, 12vh, 150px) clamp(24px, 6vw, 104px) clamp(70px, 9vh, 120px);
	background: #0A0A0B;
	color: #F7F5F0;
}

/* .nos-hero__capas / __base / __revelado ya no existen: el hero es un vídeo
   con un velo perforado encima, no dos copias de una fotografía. */

.nos-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 46%;
	/* El póster y el vídeo comparten encuadre y corrección, así que el paso
	   de uno a otro no se nota. */
	filter: saturate(0.94) contrast(1.04);
}

/* LA LINTERNA — un solo velo con un agujero, no dos copias del plano.
 *
 * Con una fotografía se apilaban dos <img> y se enmascaraba la de arriba. Con
 * vídeo eso significaría decodificar el mismo plano dos veces a la vez, que en
 * un teléfono es la diferencia entre reproducir y no reproducir. Aquí el orden
 * se invierte: el plano va limpio y encima cae un velo apagado al que se le
 * abre un círculo. El resultado en pantalla es el mismo.
 *
 * El apagado real lo hace backdrop-filter. El `background` no es un respaldo
 * decorativo: donde backdrop-filter no exista, sigue oscureciendo, así que el
 * texto conserva su contraste aunque el color no llegue a apagarse.
 */
.nos-hero__linterna {
	--nos-mx: 72%;
	--nos-my: 46%;
	--nos-r: 0px;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: rgba(9, 9, 11, 0.46);
	backdrop-filter: grayscale(0.88) brightness(0.5) contrast(1.04);
	-webkit-backdrop-filter: grayscale(0.88) brightness(0.5) contrast(1.04);
	/* El agujero: transparente en el centro, opaco fuera. Los 90 px de más en
	   el borde son el desvanecido — un canto duro delataría que es una máscara
	   circular y no una luz. */
	-webkit-mask-image: radial-gradient(circle at var(--nos-mx) var(--nos-my), transparent 0, transparent var(--nos-r), #000 calc(var(--nos-r) + 90px));
	        mask-image: radial-gradient(circle at var(--nos-mx) var(--nos-my), transparent 0, transparent var(--nos-r), #000 calc(var(--nos-r) + 90px));
	transition: --nos-r 260ms ease-out;
}

/* Sin puntero no hay linterna que gobernar, y un velo fijo en gris al 50 %
   dejaría la llegada apagada justo donde más tiene que verse. En táctil se
   retira: el contraste del texto lo sostiene .nos-hero__velo, que ya está. */
@media (hover: none), (pointer: coarse) {
	.nos-hero__linterna { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.nos-hero__linterna { display: none; }
}

.nos-hero__velo {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(0deg, rgba(10, 10, 11, 0.88) 0%, rgba(10, 10, 11, 0.32) 46%, rgba(10, 10, 11, 0.12) 68%, rgba(10, 10, 11, 0.5) 100%),
		linear-gradient(180deg, rgba(10, 10, 11, 0.58) 0%, rgba(10, 10, 11, 0) 30%);
}

.nos-hero__isotipo {
	position: absolute;
	z-index: 3;
	top: clamp(24px, 4vh, 44px);
	right: clamp(24px, 6vw, 104px);
	width: clamp(56px, 5.4vw, 92px);
	height: auto;
	opacity: 0.86;
}

.nos-hero__contenido {
	position: relative;
	z-index: 3;
	max-width: 760px;
}

.nos-hero__eyebrow {
	margin: 0 0 clamp(16px, 2.4vh, 26px);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #C9B98F;
}

.nos-hero__titulo {
	margin: 0;
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	font-size: clamp(3.4rem, 8vw, 6.8rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: #F7F5F0;
}

.nos-hero__sub {
	margin: clamp(18px, 2.6vh, 30px) 0 0;
	max-width: 42ch;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(1.06rem, 1.5vw, 1.34rem);
	line-height: 1.55;
	color: rgba(247, 245, 240, 0.86);
}

.nos-hero__pista {
	position: absolute;
	z-index: 3;
	left: clamp(24px, 6vw, 104px);
	bottom: clamp(24px, 3.4vh, 40px);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.66rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(201, 185, 143, 0.82);
	transition: opacity 620ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nos-hero__pista.es-ido { opacity: 0; transform: translateY(8px); }

@media (hover: none), (pointer: coarse) { .nos-hero__pista { display: none; } }

.nos-hero__pie {
	position: absolute;
	z-index: 3;
	right: clamp(24px, 6vw, 104px);
	bottom: clamp(24px, 3.4vh, 40px);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(247, 245, 240, 0.6);
}

@media (max-width: 860px) {
	.nos-hero { align-items: flex-end; min-height: 82vh; }
	.nos-hero__video { object-position: 56% 42%; }
}

/* --------------------------------------------------------------------------
   EL CUERPO — el arco de color
   -------------------------------------------------------------------------- */
.nos {
	--nos-fondo: #FFFFFF;
	--nos-tinta-rgb: 10, 10, 11;
	--nos-acento-rgb: 124, 107, 78;   /* #7C6B4E — 4,98:1 sobre #FBFBFA/blanco */
	--nos-e: cubic-bezier(0.16, 1, 0.3, 1);

	position: relative;
	background: var(--nos-fondo);
	color: rgb(var(--nos-tinta-rgb));
}

.nos.es-oscuro {
	--nos-tinta-rgb: 243, 238, 227;
	--nos-acento-rgb: 181, 165, 142;  /* #B5A58E — sobre obsidiana, 7,1:1 */
}

.nos__bleed {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.nos__seccion { padding: clamp(84px, 12vh, 168px) clamp(24px, 6vw, 104px); }
.nos__seccion--rabo { padding-top: 0; padding-bottom: clamp(56px, 8vh, 96px); }

.nos__inner { max-width: 1180px; margin-inline: auto; }

.nos__eyebrow {
	margin: 0 0 clamp(22px, 3.4vh, 36px);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgb(var(--nos-acento-rgb));
}

.nos__titulo {
	margin: 0 0 clamp(28px, 4.2vh, 50px);
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	font-size: clamp(2.1rem, 4.4vw, 3.9rem);
	line-height: 1.08;
	letter-spacing: -0.024em;
	color: rgb(var(--nos-tinta-rgb));
}

.nos__lead {
	margin: 0 0 1.1em;
	max-width: 66ch;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(1.02rem, 1.3vw, 1.22rem);
	line-height: 1.68;
	color: rgba(var(--nos-tinta-rgb), 0.82);
}

.nos__lead:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   01 · QUIÉNES SOMOS
   -------------------------------------------------------------------------- */
.nos-que__cuerpo { max-width: 68ch; }

/* --------------------------------------------------------------------------
   02 · NUESTRO EQUIPO — las tarjetas

   Cada tarjeta es una ficha completa, no una miniatura: la foto ocupa un
   marco alto (4:5), y debajo va el nombre, el rol, un resumen y la lista de
   credenciales — sin ellas, "más de 15 años de experiencia" es una frase que
   cualquiera podría poner. Se inclinan con el cursor y llevan un brillo que
   lo sigue, la misma mecánica que las tarjetas de Terapias de Optimización y
   Medicina Regenerativa, para que las tres familias se lean como el mismo
   material en todo el sitio.
   -------------------------------------------------------------------------- */
.nos-equipo__pista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(22px, 2.6vw, 38px);
	perspective: 1600px;
	perspective-origin: 50% 30%;
}

.nos-doc {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(var(--nos-tinta-rgb), 0.14);
	background: rgba(var(--nos-tinta-rgb), 0.022);
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transform-style: preserve-3d;
	--mx: 50%; --my: 50%;
	transition: transform 260ms var(--nos-e), border-color 380ms ease, box-shadow 380ms ease;
}

.nos-doc:hover,
.nos-doc:focus-within {
	border-color: rgba(var(--nos-acento-rgb), 0.5);
	box-shadow: 0 40px 90px -48px rgba(var(--nos-tinta-rgb), 0.4);
}

.nos-doc__brillo {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(360px circle at var(--mx) var(--my), rgba(var(--nos-acento-rgb), 0.2), rgba(var(--nos-acento-rgb), 0.05) 42%, transparent 68%);
	transition: opacity 340ms ease;
}

.nos-doc:hover .nos-doc__brillo { opacity: 1; }

.nos-doc__foto {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #0A0A0B;
}

.nos-doc__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 18%;
}

.nos-doc__foto img:first-child {
	transition: opacity 700ms ease, transform 1200ms var(--nos-e);
}

/* La segunda foto —Jhonatan en el gimnasio, su especialidad— sólo aparece al
   pasar el cursor: es un segundo dato sobre la persona, no un carrusel. */
.nos-doc__foto-alt {
	opacity: 0;
	transition: opacity 600ms ease;
}

.nos-doc:hover .nos-doc__foto-alt { opacity: 1; }
.nos-doc:hover .nos-doc__foto img:first-child { transform: scale(1.03); }

.nos-doc__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(10, 10, 11, 0.7) 0%, rgba(10, 10, 11, 0) 46%);
	pointer-events: none;
}

.nos-doc__cuerpo {
	position: relative;
	z-index: 2;
	padding: clamp(24px, 2.8vw, 34px);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.nos-doc__nombre {
	margin: 0;
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.1vw, 1.9rem);
	line-height: 1.12;
	letter-spacing: -0.018em;
	color: rgb(var(--nos-tinta-rgb));
}

.nos-doc__rol {
	margin: 8px 0 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	color: rgb(var(--nos-acento-rgb));
}

.nos-doc__resumen {
	margin: clamp(14px, 1.8vh, 20px) 0 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.94rem;
	line-height: 1.62;
	color: rgba(var(--nos-tinta-rgb), 0.8);
}

.nos-doc__credenciales {
	list-style: none;
	margin: clamp(16px, 2vh, 22px) 0 0;
	padding: clamp(14px, 1.8vh, 18px) 0 0;
	border-top: 1px solid rgba(var(--nos-tinta-rgb), 0.12);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nos-doc__credenciales li {
	position: relative;
	padding-left: 16px;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.82rem;
	line-height: 1.5;
	color: rgba(var(--nos-tinta-rgb), 0.7);
}

.nos-doc__credenciales li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 1px;
	background: rgb(var(--nos-acento-rgb));
}

/* La biografía larga —sólo Alejandro la trae— se despliega debajo de las
   credenciales, siempre visible: no hace falta un "leer más" para tres
   tarjetas, y ocultarla penalizaría justo al perfil con más trayectoria
   documentada. */
.nos-doc__bio {
	margin: clamp(14px, 1.8vh, 18px) 0 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.86rem;
	line-height: 1.66;
	color: rgba(var(--nos-tinta-rgb), 0.66);
}

.nos-doc__cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: clamp(20px, 2.6vh, 28px);
	padding-top: 14px;
	border-top: 1px solid rgba(var(--nos-tinta-rgb), 0.16);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.82rem;
	font-weight: 500;
	color: rgb(var(--nos-tinta-rgb));
	text-decoration: none;
	transition: color 300ms ease, border-color 300ms ease;
}

.nos-doc__cta svg { width: 17px; height: 17px; flex: none; transition: transform 300ms var(--nos-e); }

.nos-doc__cta:hover,
.nos-doc__cta:focus-visible {
	color: rgb(var(--nos-acento-rgb));
	border-color: rgba(var(--nos-acento-rgb), 0.7);
}

.nos-doc__cta:hover svg { transform: translateX(4px); }

.nos-equipo__pie {
	margin: clamp(30px, 4vh, 46px) 0 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(var(--nos-tinta-rgb), 0.62);
}

/* --------------------------------------------------------------------------
   03 · EXPERIENCIA 360

   Seis pasos en el orden real del viaje: aeropuerto, transporte, sede,
   clínica, tratamientos, ciudad. Van sobre fondo oscuro —la sección donde el
   arco de color cierra en obsidiana— y cada paso lleva un ordinal grande de
   fondo, un glifo de línea y un filete de oro que se traza al pasar el
   cursor, la misma firma visual de Medicina Regenerativa.
   -------------------------------------------------------------------------- */
.nos-pasos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 1px;
	background: rgba(var(--nos-tinta-rgb), 0.14);
	max-width: 1180px;
	margin: 0 auto;
}

.nos-paso {
	position: relative;
	padding: clamp(30px, 3vw, 42px) clamp(26px, 2.6vw, 36px);
	background: var(--nos-fondo);
	overflow: hidden;
	transition: background-color 400ms ease;
}

.nos-paso::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 2px;
	width: 100%;
	background: rgb(var(--nos-acento-rgb));
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 640ms var(--nos-e);
}

.nos-paso:hover::before { transform: scaleX(1); }
.nos-paso:hover { background: rgba(var(--nos-acento-rgb), 0.06); }

.nos-paso__n {
	display: block;
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	font-size: clamp(2.4rem, 3.4vw, 3.2rem);
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: rgba(var(--nos-acento-rgb), 0.74);
	margin-bottom: clamp(12px, 1.6vh, 18px);
}

.nos-paso__glifo {
	display: block;
	width: 30px;
	height: 30px;
	color: rgb(var(--nos-acento-rgb));
	margin-bottom: clamp(16px, 2vh, 22px);
}

.nos-paso__t {
	margin: 0;
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	font-size: 1.28rem;
	line-height: 1.2;
	color: rgb(var(--nos-tinta-rgb));
}

.nos-paso__d {
	margin: 10px 0 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba(var(--nos-tinta-rgb), 0.72);
}

/* --------------------------------------------------------------------------
   04 · LA SEDE — vídeo real + mapa
   -------------------------------------------------------------------------- */
.nos-sede__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(24px, 3vw, 44px);
	max-width: 1180px;
	margin: 0 auto;
	align-items: stretch;
}

.nos-sede__video {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #0A0A0B;
	box-shadow: 0 40px 100px -50px rgba(var(--nos-tinta-rgb), 0.4);
}

.nos-sede__video-el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nos-sede__pie {
	position: absolute;
	left: 18px;
	bottom: 16px;
	z-index: 1;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(247, 245, 240, 0.86);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.nos-sede__mapa-caja {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2vh, 22px);
}

.nos-sede__mapa {
	position: relative;
	flex: 1;
	min-height: 260px;
	overflow: hidden;
	background: #12161b;
	box-shadow: 0 40px 100px -50px rgba(var(--nos-tinta-rgb), 0.4);
}

/* El pin propio: un aro con un punto de oro pulsante, no el marcador azul por
   defecto de MapLibre. El pulso lo dibuja el propio CSS con una animación en
   ::after; el JS sólo posiciona el elemento en el mapa. */
.nos-mapa__pin {
	position: relative;
	width: 22px;
	height: 22px;
}

.nos-mapa__pin::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #B5A58E;
	border: 2px solid #0A0A0B;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.nos-mapa__pin::after {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 1.5px solid rgba(181, 165, 142, 0.6);
	animation: nos-pulso 2400ms ease-out infinite;
}

@keyframes nos-pulso {
	0%   { transform: scale(0.6); opacity: 0.9; }
	100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.nos-mapa__pin::after { animation: none; }
}

.nos-sede__direccion {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: clamp(18px, 2.2vw, 26px);
	border: 1px solid rgba(var(--nos-tinta-rgb), 0.14);
	background: rgba(var(--nos-tinta-rgb), 0.03);
}

.nos-sede__pin {
	flex: none;
	display: inline-flex;
	color: rgb(var(--nos-acento-rgb));
}

.nos-sede__pin svg { width: 22px; height: 22px; }

.nos-sede__lugar {
	margin: 0;
	font-family: var(--font-display, Butler, serif);
	font-weight: 400;
	font-size: 1.1rem;
	color: rgb(var(--nos-tinta-rgb));
}

.nos-sede__nota {
	margin: 6px 0 0;
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.86rem;
	line-height: 1.55;
	color: rgba(var(--nos-tinta-rgb), 0.68);
}

.nos-sede__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 28px;
	background: rgb(var(--nos-tinta-rgb));
	color: var(--nos-fondo);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: background-color 320ms ease, color 320ms ease, transform 320ms var(--nos-e);
}

.nos-sede__cta svg { width: 18px; height: 18px; }

.nos-sede__cta:hover,
.nos-sede__cta:focus-visible {
	background: rgb(var(--nos-acento-rgb));
	color: #0A0A0B;
	transform: translateY(-2px);
}

@media (max-width: 980px) {
	.nos-sede__grid { grid-template-columns: 1fr; }
	.nos-sede__video { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   LAS APARICIONES

   El estado oculto vive bajo .nos--anim, que pone el JS al arrancar. Sin
   script no falta nada: el contenido se ve tal cual sale del servidor.
   Se aceptan las dos convenciones del sitio —atributo o clase— porque el
   formulario reutilizable (profit7_render_agenda) recibe su gancho de
   aparición como una clase ("nos-in") mientras el resto de esta página usa
   el atributo data-nos-in.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.nos--anim [data-nos-in],
	.nos--anim .nos-in {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 760ms ease, transform 760ms var(--nos-e);
	}
	.nos--anim [data-nos-in].es-dentro,
	.nos--anim .nos-in.es-dentro { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.nos-doc, .nos-paso { transition: none; transform: none !important; }
	.nos-doc__brillo { display: none; }
}