/* =========================================================
   VAULT — design tokens (ver projects/vault/design.md)
   ========================================================= */
:root {
	--color-dark: #2E383A;
	--color-light-gray: #D9D9D9;
	--color-bg: #E7E7E7;
	--color-white: #FFFFFF;
	--accent-start: #8B6348;
	--accent-end: #EDBC84;
	--accent-gradient: linear-gradient(135deg, var(--accent-start), var(--accent-end));

	--font-heading: 'Julius Sans One', sans-serif;
	--font-body: 'Oxygen', sans-serif;

	--radius-btn: 10px;
	--radius-card: 16px;
	--radius-hero: 24px;
	--radius-dark-block: 50px;

	/* Ancho del contenido. En el lienzo de 1440 del Figma va de x=98 a x=1341:
	   1243px, el 86.3% del ancho. Se mantiene esa proporcion mientras la pantalla
	   es mas estrecha que el lienzo, y a partir de 1440 se congela en esos 1243px.
	   OJO: el tope tiene que ser 1243 de contenido, no 1440. 1440 es el ancho de la
	   VENTANA en el diseno, no del contenido. Con el tope en 1440 el texto dejaba de
	   crecer (los clamp se congelan en su valor de 1440) pero las columnas seguian
	   ensanchandose un 16%, y en monitores grandes se descuadraba la proporcion.
	   Los +48px son el padding-inline, que con box-sizing:border-box va por dentro. */
	--container-max: min(calc(86.3vw + 48px), 1291px);
	--gutter: 24px;
}

/* =========================================================
   Reset base
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
	color: var(--color-dark);
	background: var(--color-bg);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0;
	line-height: 1.1;
	margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.375rem); } /* 54px confirmado en Figma Inspect */
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h3 { font-size: 1.25rem; }

p {
	margin: 0 0 1em;
}

/* Sin esta regla <strong> se queda en el "bolder" por defecto del navegador, que
   NO es 700: es relativo al peso del padre, y la tabla del estandar dice que
   sobre un padre de 300 (nuestro body) da 400. Entre Oxygen 300 y 400 solo hay
   un 3% de diferencia de trazo, asi que las negritas no se distinguian. La 700
   ya se descarga en functions.php, solo faltaba pedirla. */
strong,
b {
	font-weight: 700;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 12px 20px;
	background: var(--color-dark);
	color: var(--color-white);
	z-index: 1000;
	border-radius: var(--radius-btn);
}

.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	padding-block: 64px;
}

/* En el Figma el titular arranca a 105px del hero y las tarjetas a 112px de el:
   el aire de arriba y el de abajo son practicamente iguales. */
.equipo-lista {
	padding-top: clamp(48px, 7.3vw, 105px);
}

/* Medido en la mesa de "Que es Vault": "NUESTRA VISION" ocupa 192px y sus
   mayusculas miden 11.9px de alto, lo que da 16px de cuerpo con 0.30em de
   espaciado. Estaba en 12.8px con 0.12em: mas pequeno y mucho menos abierto. */
.eyebrow {
	font-family: var(--font-body);
	text-transform: uppercase;
	font-size: 1rem;
	letter-spacing: 0.3em;
	font-weight: 400;
	color: var(--color-dark);
}

/* =========================================================
   Botones
   ========================================================= */
/* En el Figma todos los botones van en mayusculas y con 40px de aire a cada
   lado del texto (medido en "AREA PRIVADA": caja 213px, tinta 133px). */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 40px;
	border-radius: var(--radius-btn);
	font-family: var(--font-body);
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.btn .icon {
	width: 16px;
	height: 16px;
}

.btn--primary {
	background: var(--accent-gradient);
	color: var(--color-white);
}

.btn--secondary {
	background: transparent;
	border: 0.5px solid currentColor;
}

/* =========================================================
   Header + nav
   ========================================================= */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	padding-block: 24px;
	color: var(--color-white);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--container-max);
}

.site-logo img {
	width: 269px;  /* tamaño del logo medido en el Figma (269x79) */
	height: auto;
}

/* En el Figma la cabecera se alinea por la derecha con el contenido (x=1341) y
   solo el logo se sale por la izquierda: arranca en x=57 cuando el contenido
   empieza en 98, o sea 41px. Asi el menu y las redes quedan a plomo con lo que
   viene debajo, que es lo que importa visualmente. */
@media (min-width: 1100px) {
	.site-logo {
		margin-left: -41px;
	}
}

@media (max-width: 1100px) {
	.site-logo img {
		width: 200px;
	}
}

.primary-nav {
	display: flex;
	align-items: center;
	gap: clamp(18px, 3.06vw, 44px);
	flex: 1;
	justify-content: flex-end;
}

/* Menu principal. Del export de Figma: 14.7px de cuerpo y ~46px entre items
   ("SERVICIOS" 76.7px y "LONGEVIDAD" 96.0px cuadran con 0.034em de espaciado). */
.site-nav__list {
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	/* 46px en el lienzo de 1440 = 3.19vw. Fluido para que los huecos cedan antes
	   de que un item parta en dos lineas al estrechar. */
	gap: clamp(18px, 3.19vw, 46px);
	margin: 0;
	padding: 0;
	font-size: 0.92rem;
	letter-spacing: 0.034em;
	text-transform: uppercase;
}

/* Pagina activa: en el Figma se marca con "/" delante y en peso 400, no negrita.
   Solo en el primer nivel; en Equipo se ilumina VAULT, que es su padre. */
/* Ningun item del menu puede partirse: "EL METODO" se iba a dos lineas. */
.site-nav__list a {
	white-space: nowrap;
}

.site-nav__list > .current-menu-item > a,
.site-nav__list > .current-menu-ancestor > a,
.site-nav__list > .current-menu-parent > a,
.site-nav__list > .current_page_item > a,
.site-nav__list > .current_page_ancestor > a {
	font-weight: 400;
}

.site-nav__list > .current-menu-item > a::before,
.site-nav__list > .current-menu-ancestor > a::before,
.site-nav__list > .current-menu-parent > a::before,
.site-nav__list > .current_page_item > a::before,
.site-nav__list > .current_page_ancestor > a::before {
	content: "/ ";
}

.site-nav__list > li {
	position: relative;
}

.site-nav__list a {
	display: block;
	padding: 8px 0;
}

/* El último item del menú (Contacto) va como botón outline, igual que en el Figma.
   Se puede forzar en cualquier otro item añadiéndole la clase `nav-cta` en Apariencia > Menús. */
.site-nav__list > li:last-child > a,
.site-nav__list > li.nav-cta > a {
	border: 0.5px solid currentColor;
	border-radius: var(--radius-btn);
	padding: 8px 20px;
}

.site-nav__list li.menu-item-has-children > a::after {
	content: '';
}

.site-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 16px;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 180px;
	background: rgba(46, 56, 58, 0.92);
	border-radius: 12px;
	display: none;
	text-transform: none;
}

.site-nav__list .sub-menu li + li {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin-top: 8px;
	padding-top: 8px;
}

.site-nav__list li.menu-item-has-children:hover > .sub-menu,
.site-nav__list li.menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: clamp(14px, 3.13vw, 45px);
}

/* El boton de la cabecera es mas estrecho que el del pie: en el Figma mide 174px
   frente a 213, o sea 27px de aire por lado en vez de 40. Con los 40 no cabia
   todo el menu y "EL METODO" se partia. */
.site-header .btn {
	padding: 9px 27px;
}

.social-links {
	list-style: none;
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
}

.social-links a {
	display: block;
	width: 18px;
	height: 18px;
}

.social-links a svg {
	width: 100%;
	height: 100%;
	display: block;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
}

.nav-toggle__bar {
	width: 22px;
	height: 2px;
	background: currentColor;
}

/* Mobile nav */
/* 1023 y no 900: entre 901 y ~990 el menu de escritorio no cabe y la cabecera
   desbordaba la pantalla a lo ancho (65px a 901, 6px a 980), lo que sacaba una
   barra de scroll horizontal en TODAS las paginas. El resto del maquetado sigue
   cambiando a 900; solo la cabecera pasa a hamburguesa antes. */
@media (max-width: 1023px) {
	.nav-toggle {
		display: flex;
	}

	.primary-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		background: var(--color-dark);
		padding: 24px var(--gutter) 32px;
		display: none;
	}

	body.nav-open .primary-nav {
		display: flex;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		width: 100%;
	}

	.site-nav__list .sub-menu {
		position: static;
		display: none;
		background: transparent;
		padding: 4px 0 4px 16px;
	}

	.site-nav__list li.menu-item-has-children.is-open > .sub-menu {
		display: block;
	}

	.header-actions {
		margin-top: 16px;
		width: 100%;
		justify-content: space-between;
	}
}

/* =========================================================
   Hero slider (Home)
   ========================================================= */
/* El wrapper pinta el fondo oscuro que asoma por las esquinas redondeadas del hero:
   en el Figma el hero apoya sobre la banda #2E383A, no sobre el fondo claro. */
.hero-slider-wrap {
	background: var(--color-dark);
}

.hero-slider {
	position: relative;
	background: var(--color-dark);
	border-radius: 0 0 var(--radius-hero) var(--radius-hero);
	overflow: hidden; /* recorta el track; NO moverlo al track, que se desplaza con transform */
	color: var(--color-white);
}

.hero-slider__track {
	display: flex;
	transition: transform 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
	.hero-slider__track {
		transition: none;
	}
}

.hero-slide {
	position: relative;
	flex: 0 0 100%;
	/* 640 y no los 854 del diseno original: el cliente pidio bajar el alto
	   del slider (Cambios web Vault.pptx, diapositiva 2). Es este numero. */
	min-height: 640px;
	display: flex;
	align-items: center;
}

.hero-slide__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Overlay del hero (blend multiply).
   Los stops de Figma (#FCF7E8/#494432/#2E383A) oscurecían muchísimo más que el diseño
   renderizado, así que la curva real se obtuvo despejando el multiply: se dividió el
   render del diseño entre la foto original fila a fila. Resultado medido: arriba
   oscurece hasta ~42% de luz y abajo prácticamente no oscurece. */
.hero-slide::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		#6B7275 0%,
		#A3A6A4 20%,
		#BABEBC 45%,
		#C3C2BC 70%,
		#C9C6BF 80%,
		#E8DFD7 92%,
		#ECE4DA 100%);
	mix-blend-mode: multiply;
}

.hero-slide__inner {
	position: relative;
	z-index: 2;
	max-width: var(--container-max);
	width: 100%;
}

/* 490px reproduce el corte del Figma en cuatro lineas: "Tu salud futura / es un
   ejercicio / de liderazgo / personal." Con 12ch (unos 420) salian cinco. */
.hero-slide__title {
	max-width: 490px;
	margin-bottom: 0.35em;
}

.hero-slide__subtitle {
	font-size: 1.5rem;   /* 24px Oxygen Light, confirmado en Figma */
	font-weight: 300;
	margin-bottom: 1.6em;
}

.hero-slider__controls {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 40px;
	z-index: 3;
	max-width: var(--container-max);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Cuatro puntos ocupando 84px en total: 10 de diametro y 15 de separacion. */
.hero-slider__dots {
	display: flex;
	gap: 15px;
}

.hero-slider__dots button {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	padding: 0;
}

.hero-slider__dots button[aria-selected='true'] {
	background: var(--color-white);
}

/* Medido en la mesa del hero: cada flecha 55px de largo y 40px de separacion. */
.hero-slider__arrows {
	position: absolute;
	right: 0;
	display: flex;
	gap: 40px;
}

/* El lienzo del SVG es 55x24, o sea 1 unidad = 1px: el trazo de 1.2 sale tal
   cual y la punta mide 22px de alto. Para hacerlas mas o menos altas basta con
   cambiar height aqui y el alto del viewBox en front-page.php a la vez. */
.hero-slider__arrow svg {
	width: 55px;
	height: 24px;
	display: block;
}

@media (max-width: 700px) {
	.hero-slide {
		min-height: 560px;
	}
	.hero-slider__arrows {
		display: none;
	}
}

/* =========================================================
   Utilidades de sección
   ========================================================= */
.section--dark {
	background: var(--color-dark);
	color: var(--color-white);
}

/* Titular de seccion. Del export de Figma: a 43px las dos lineas ("LAS PERSONAS
   QUE" 429px y "CUIDAN TU TRAYECTORIA." 573px) cuadran SIN espaciado entre
   letras; 54.7px de paso entre lineas. El h2 generico se queda en 2rem. */
.section__title {
	font-size: clamp(1.75rem, 0.73rem + 2.12vw, 2.6875rem);
	letter-spacing: 0;
	line-height: 1.272;
	margin: 0 0 0.5em;
	/* Sin uppercase a proposito. En Julius Sans One las minusculas son
	   versalitas al 91% de la caja alta, y eso es lo que hace el Figma en los
	   titulares de seccion: medido 0.92 en "Las personas que cuidan...".
	   Los titulares de hero SI van en mayusculas (medido 1.02), y para esos
	   sigue valiendo el uppercase de la regla h1..h4. */
	text-transform: none;
}

.section__title--center {
	text-align: center;
	margin-bottom: 1.6em;
}

.section__cta {
	text-align: center;
	margin-top: 48px;
}

.eyebrow--light {
	color: var(--color-white);
}

/* Título a la izquierda + párrafo secundario a la derecha */
/* En el Figma el apunte de la derecha arranca a la misma altura que la primera
   linea del titular, no alineado por abajo. */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
	margin-bottom: 91px;
}

.split__aside {
	text-align: right;
	max-width: 46ch;
	justify-self: end;
	margin: 0;
	font-size: 1.22rem;
	line-height: 1.3;
}

/* El corte en dos lineas del titular de Equipo: "LAS PERSONAS QUE" mide 432px y
   "CUIDAN TU TRAYECTORIA." 578px, pero las dos juntas se irian a 630px. */
.equipo-lista .section__title {
	max-width: 600px;
}

@media (max-width: 900px) {
	.split__aside {
		font-size: 1.05rem;
	}

	.split {
		margin-bottom: 48px;
	}

	.equipo-lista .section__title {
		max-width: none;
	}
}

@media (max-width: 800px) {
	.split {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.split__aside {
		text-align: left;
		justify-self: start;
	}
}

/* =========================================================
   Cards
   ========================================================= */
.card {
	position: relative;
	background: transparent;
	border: 1px solid rgba(46, 56, 58, 0.25);
	border-radius: var(--radius-card);
	padding: 24px;
}

.card--dark {
	background: var(--color-dark);
	color: var(--color-white);
	border-color: transparent;
}

.card__arrow {
	position: absolute;
	top: 20px;
	right: 20px;
}

.card__arrow svg {
	width: 18px;
	height: 18px;
	display: block;
}

.link-more {
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-decoration: underline;
	text-underline-offset: 4px;
	color: rgba(46, 56, 58, 0.6);
}

/* =========================================================
   Intro (banda oscura bajo el hero)
   ========================================================= */
/* Medido en la mesa de Servicios, que usa esta misma seccion: el contenido va de
   x=98 a 1341 y la columna de texto arranca en 781, o sea 619 + 64 de hueco. */
.intro__inner {
	display: grid;
	grid-template-columns: 619fr 560fr;
	gap: 64px;
}

/* Titular: 47.1px medidos en Servicios ("Tres compromisos." 466px y "Una
   trayectoria." 419px dan 47.4 y 46.9 con espaciado cero). Sin uppercase: en el
   Figma son versalitas, como los demas titulares. El tope de 480px reproduce
   exactamente ese corte en dos lineas. Fluido para que encoja con la pantalla. */
.intro__title {
	font-size: clamp(1.75rem, 3.27vw, 2.95rem);
	text-transform: none;
	line-height: 1.2;
	margin: 0;
	max-width: 480px;
}

/* La frase larga de Servicios cabe con el mismo tope: se mantiene por claridad. */
.intro__title--ancho {
	max-width: 480px;
}

/* Cuerpo: 19.9px con 5 muestras y solo un 0.5% de dispersion; 29px entre lineas. */
.intro__body {
	font-size: clamp(1rem, 1.38vw, 1.24rem);
	line-height: 1.46;
	max-width: 560px;
}

/* ---------------------------------------------------------------
   Variante de "Que evaluamos". El .intro de arriba esta medido sobre
   Servicios y ahi es correcto; en esta pagina el Figma trae otra cosa:
     - titular de 40px (tres medidas independientes: ancho de tinta de tres
       lineas, altura de versalita y altura de mayuscula dan 40.3, 39.5 y 40.2)
       con 44px entre lineas, no 47.1/56.5
     - columnas 516/632 con 7.64% de hueco: el cuerpo arranca en x=708 y llega
       a 1341, no 781..1341
     - cuerpo de 20px con 25.3 de interlineado
     - las dos columnas cuadran por abajo, no por arriba: el cuerpo empieza
       66px mas abajo que el titular y los dos terminan a la misma altura.
   --------------------------------------------------------------- */
.intro--evaluamos {
	/* Caja de 507 a 903 en el Figma. Con las 5 lineas del titular (220px) eso
	   deja 83 arriba y 93 abajo. */
	padding-block: 83px 93px;
}

.intro--evaluamos .intro__inner {
	grid-template-columns: 516fr 632fr;
	gap: 7.64%;
	align-items: end;
}

.intro--evaluamos .intro__title,
.intro--evaluamos .intro__title--ancho {
	font-size: clamp(1.75rem, 2.78vw, 2.5rem);
	line-height: 1.1;
	max-width: none;
}

.intro--evaluamos .intro__body {
	font-size: clamp(1rem, 1.39vw, 1.25rem);
	line-height: 1.27;
	max-width: none;
}

.intro--evaluamos .intro__body p {
	margin: 0 0 1.25em;
}

.intro--evaluamos .intro__body p:last-child {
	margin-bottom: 0;
}

/* Saltos de linea que solo valen para el diseno de escritorio. */
@media (max-width: 800px) {
	br.br-esc {
		display: none;
	}
}

@media (max-width: 800px) {
	.intro__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	/* Con la especificidad de .intro--evaluamos .intro__inner (0,2,0) la regla de
	   arriba (0,1,0) no llegaba a aplicarse y la pagina seguia en dos columnas
	   en movil: el texto se salia de la pantalla. */
	.intro--evaluamos .intro__inner {
		grid-template-columns: 1fr;
		gap: 24px;
		align-items: start;
	}
	.intro--evaluamos {
		padding-block: 56px;
	}
}

/* =========================================================
   El Método
   ========================================================= */
/* Medidas tomadas del diseño: LEAP 611,5x474,5 · SAFE/DOME 295,5x276,5 · gap 20,5 */
/* Columnas en orden fijo (ENTRY, LEAP, SAFE, DOME). La activa va a todo el
   alto y las demas son cajas bajas (276.5/474.5) pegadas abajo, en la
   proporcion de anchos del Figma (611.5 frente a 295.5). Al cambiar de fase la
   columna se ensancha en su sitio (flex-grow) y la tarjeta crece hacia
   arriba (height), las dos cosas animadas. */
/* Con cuatro columnas la activa quedaba casi cuadrada (483x474 a 1440) y la
   foto apaisada de SAFE perdia a los medicos de los lados. Mas ancha (760) y
   algo mas baja (440) queda en ~546x440, proporcion en la que caben las tres
   caras; las bajas siguen en ~212px, suficiente para "ENTRY". */
.metodo__grid {
	display: flex;
	gap: 20px;
	aspect-ratio: 1243 / 440;
}

.metodo__col {
	position: relative;
	flex: 295.5 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	transition: flex-grow 0.7s var(--ease-vault, ease);
}

.metodo__col.is-activa {
	flex-grow: 760;
}

.metodo__item {
	--tinta: var(--color-dark);
	color: var(--tinta);
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-card);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 58.27%; /* 276.5 / 474.5 */
	transition:
		height 0.7s var(--ease-vault, ease),
		border-color 0.4s ease;
}

.metodo__col.is-activa .metodo__item {
	height: 100%;
	--tinta: var(--color-white);
	border-color: transparent;
}

/* El mensaje de la fase activa, arriba, sobre las columnas bajas. Con cuatro
   columnas una sola se queda estrecha (233px a 1440), asi que cuando hay dos
   bajas seguidas ocupa las dos (.is-doble: su ancho mas el hueco de 20). */
.metodo__lead {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	margin: 0;
	width: 100%;
	max-width: 420px;
	padding-top: clamp(12px, 3.75vw, 54px);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.metodo__lead.is-doble {
	width: calc(200% + 20px);
}

.metodo__lead.is-mostrado {
	opacity: 1;
	transition-delay: 0.3s;
}

/* La foto solo se ve en la activa; las bajas son la caja clara. */
.metodo__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--foco, center top);
	opacity: 0;
	transition: opacity 0.5s ease;
}

.metodo__col.is-activa .metodo__item img {
	opacity: 1;
}

/* Con foto detras, el texto necesita un velo para leerse. */
.metodo__item::after {
	content: "";
	position: absolute;
	inset: 20% 0 0;
	background: linear-gradient(to bottom, rgba(46, 56, 58, 0) 0%, rgba(46, 56, 58, 0.5) 52%, rgba(46, 56, 58, 0.88) 100%);
	opacity: 0;
	transition: opacity 0.5s ease;
}

.metodo__col.is-activa .metodo__item::after {
	opacity: 1;
}

.metodo__caption {
	position: relative;
	z-index: 1;
	display: block;
	padding: 40px;
	transition: padding 0.5s var(--ease-vault, ease);
}

/* El color del rotulo viaja por --tinta y no por herencia. */
.metodo__caption,
.metodo__num,
.metodo__name,
.metodo__desc {
	color: var(--tinta);
	transition: color 0.4s ease;
}

.metodo__desc {
	display: block;
	margin-top: 0.2em;
	font-size: 0.95rem;
}

/* Cada tarjeta lleva dentro su mensaje, pero en escritorio el que se ve es el
   de arriba a la derecha (.metodo__lead), que es donde lo pone el Figma. */
.metodo__mensaje {
	display: none;
}

.metodo__item .card__arrow {
	z-index: 1;
}

/* Medido sobre la mesa de Figma de la home: "LEAP" 113px de ancho, "SAFE" 114 y
   "DOME" 160, que dan 48.7, 49.6 y 50.4px de cuerpo. 49.6 en el lienzo de 1440
   son 3.44vw: fluido, para que el texto encoja con la tarjeta. */
.metodo__num {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 3.44vw, 3.1rem);
	display: block;
	line-height: 1;
}

.metodo__name {
	font-size: clamp(1.75rem, 3.44vw, 3.1rem);
	line-height: 1.05;
	margin: 0 0 0.3em;
	display: block;
	font-family: var(--font-heading);
}

/* Las fases llevan la clase .card, que les pone 24px de padding; sumado a los
   28 del rotulo quedaban 52px por lado y en las cajas bajas (~212px a 1440)
   "ENTRY" y "DOME" tocaban el borde. El aire lo da solo el rotulo, y en las
   bajas el titular va algo mas pequeño; al abrirse crece a su tamaño. */
.metodo__item {
	padding: 0;
}

@media (min-width: 901px) {
	.metodo__num,
	.metodo__name {
		transition: font-size 0.5s var(--ease-vault, ease), color 0.4s ease;
	}
	.metodo__col:not(.is-activa) .metodo__caption {
		padding: 22px;
	}
	.metodo__col:not(.is-activa) .metodo__num,
	.metodo__col:not(.is-activa) .metodo__name {
		font-size: clamp(1.5rem, 2.8vw, 2.5rem);
	}
	/* La frase de debajo ocupa una linea o dos segun la fase y el ancho
	   ("Conoce tu punto de partida" parte, "Decide con rigor" no), y como el
	   rotulo va pegado abajo, los titulares quedaban a alturas distintas.
	   Reservando siempre dos lineas quedan todos en la misma. */
	.metodo__desc {
		line-height: 1.5;
		min-height: 3em;
	}
}

/* Apilado no hay activa: las tres se ven igual y con su foto. */
@media (max-width: 900px) {
	.metodo__grid {
		flex-direction: column;
		aspect-ratio: auto;
	}
	.metodo__col,
	.metodo__col.is-activa {
		flex: none;
	}
	.metodo__item,
	.metodo__col.is-activa .metodo__item {
		height: auto;
		--tinta: var(--color-white);
		border-color: transparent;
	}
	.metodo__item img {
		opacity: 1;
	}
	/* Apilada, la tarjeta lleva ademas el mensaje, asi que el texto ocupa mas
	   de la mitad y cae sobre las caras de las fotos. El velo tiene que cubrir
	   toda la tarjeta, no solo el pie. */
	.metodo__item::after,
	.metodo__col.is-activa .metodo__item::after {
		inset: 0;
		opacity: 1;
		background: linear-gradient(to bottom, rgba(46, 56, 58, 0.25) 0%, rgba(46, 56, 58, 0.62) 45%, rgba(46, 56, 58, 0.9) 100%);
	}
	/* Y el alto lo marca el texto. */
	.metodo__item {
		min-height: min(62vw, 300px);
	}
	/* Apilado no hay hover, asi que no hay nada que desplegar: cada tarjeta
	   ensena su mensaje y el de arriba sobra. */
	.metodo__lead {
		display: none;
	}
	.metodo__mensaje {
		display: block;
		margin-top: 0.9em;
		font-size: 0.95rem;
		max-width: 34ch;
	}
}

/* =========================================================
   Qué medimos
   ========================================================= */
.medimos__band {
	position: relative;
	border-radius: var(--radius-card);
	overflow: hidden;
	min-height: 809px; /* medido en el diseño: y 2176 → 2985 */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* Las tarjetas van a ras de los bordes de la banda; solo el titular lleva sangrado. */
	padding: 56px 0 0;
	color: var(--color-white);
	isolation: isolate;
}

.medimos__head {
	padding-inline: 70px;
}

.medimos__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* Dos capas, medidas leyendo píxeles del diseño:
   1) fundido blanco vertical — a y≈2880 el pixel ya es exactamente #E7E7E7 (≈87% del alto),
      así las tarjetas caen sobre claro y su texto va en oscuro;
   2) velo oscuro en diagonal desde arriba-izquierda (allí el diseño mide ~100 de luz frente
      a ~190 arriba-derecha), que es lo que permite leer el titular en blanco. */
.medimos__band::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg,
			rgba(231, 231, 231, 0) 0%,
			rgba(231, 231, 231, 0.30) 40%,
			rgba(231, 231, 231, 0.85) 70%,
			#E7E7E7 87%,
			#E7E7E7 100%),
		linear-gradient(105deg,
			rgba(46, 56, 58, 0.72) 0%,
			rgba(46, 56, 58, 0.38) 28%,
			rgba(46, 56, 58, 0.10) 52%,
			rgba(46, 56, 58, 0) 72%);
	z-index: -1;
}

.medimos__title {
	max-width: 15ch; /* en el diseño parte en 3 líneas: "DATOS REALES / SOBRE TU SALUD / FUTURA" */
	margin: 0;
}

.medimos__cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* Las tarjetas caen sobre la zona ya aclarada del degradado → texto y borde en oscuro. */
.medimos__card {
	position: relative;
	border: 1px solid rgba(46, 56, 58, 0.35);
	border-radius: var(--radius-card);
	padding: 24px;
	aspect-ratio: 298 / 293;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: var(--color-dark);
	background: transparent;
}

.medimos__card h3 {
	margin: 0 0 0.5em;
	font-size: 1.25rem;
}

/* "Capacidad funcional" parte en dos lineas y los otros titulos no; con el
   contenido pegado abajo, ese titulo subia respecto a los demas. Con hueco
   para dos lineas y el texto abajo, la ultima linea de los cuatro casa. */
@media (min-width: 601px) {
	.medimos__card h3 {
		display: flex;
		align-items: flex-end;
		line-height: 1.15;
		min-height: 2.3em;
	}
}

.medimos__card p {
	margin: 0;
	font-size: 0.9rem;
}

@media (max-width: 900px) {
	.medimos__cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.medimos__band {
		min-height: 0;
		gap: 48px;
		padding: 40px 0 0;
	}
	.medimos__head {
		padding-inline: 24px;
	}
}

@media (max-width: 560px) {
	.medimos__cards {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Equipo
   ========================================================= */
.equipo__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.persona {
	position: relative;
	margin: 0;
	background: var(--color-white);
	border-radius: var(--radius-card);
	padding: 10px;
	aspect-ratio: 774 / 792; /* proporción de la tarjeta medida en el Figma */
}

.persona img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: 12px;
}

.persona__plate {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 22px;
	background: var(--color-dark);
	color: var(--color-white);
	border-radius: 10px;
	padding: 12px 16px;
	text-align: center;
}

.persona__name {
	display: block;
	font-family: var(--font-heading);
	text-transform: uppercase;
	font-size: 1.05rem;
}

.persona__role {
	display: block;
	font-size: 0.85rem;
}

/* Concierges: un segundo bloque debajo de los especialistas. Son una o dos
   personas, asi que la rejilla se estrecha a dos columnas de las tres; asi
   las tarjetas conservan el ancho de las de arriba en vez de estirarse. */
.equipo__subtitulo {
	margin: 64px 0 24px;
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.5rem;
	font-weight: 400;
}

.equipo__grid--duo {
	grid-template-columns: repeat(2, 1fr);
	max-width: calc((100% - 48px) / 3 * 2 + 24px);
}

@media (max-width: 800px) {
	.equipo__grid {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin-inline: auto;
	}
	.equipo__subtitulo {
		margin-top: 48px;
		text-align: center;
	}
}

/* =========================================================
   Longevidad (mosaico alternado imagen / tarjeta)
   ========================================================= */
/* Medidas del diseño: foto 401x401 (cuadrada), tarjeta 401x200,5, hueco vertical 8,5 */
/* Las tarjetas llevan ahora el titulo real de los ultimos articulos, y los
   largos ocupan una linea mas en pantallas medianas: la tarjeta crece y su
   columna dejaba de acabar a la altura de las otras. Con stretch las tres
   columnas miden lo mismo y la tarjeta (flex-grow en .longevidad__card) se
   estira hasta cuadrar; cuando todo cabe, como a 1440, no cambia nada. */
.longevidad__mosaic {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: stretch;
}

.longevidad__col {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.longevidad__img {
	width: 100%;
	height: auto; /* imprescindible: sin esto manda el atributo height del <img> y la imagen se dispara */
	border-radius: var(--radius-card);
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

.longevidad__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	aspect-ratio: 401 / 200.5;
	flex-grow: 1;
}

.longevidad__card h3 {
	font-family: var(--font-body);
	text-transform: none;
	font-weight: 700;
	font-size: 1.15rem;
	margin: 0;
	line-height: 1.35;
}

.longevidad__card .link-more {
	align-self: flex-end;
}

@media (max-width: 900px) {
	.longevidad__mosaic {
		grid-template-columns: 1fr 1fr;
	}
	.longevidad__card {
		aspect-ratio: auto;
		min-height: 170px;
	}
}

@media (max-width: 600px) {
	.longevidad__mosaic {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   FAQ
   ========================================================= */
/* El diseno alterna dos grises: #E7E7E7 de pagina y #D9D9D9 en las secciones
   tenidas. Medidos en la mesa de Servicios: (231,231,231) y (217,217,217), que
   son exactamente --color-bg y --color-light-gray. El FAQ va tenido. */
.faq {
	background: var(--color-light-gray);
}

/* El FAQ es la ultima seccion de la home y va tenido.
   Dos cosas que arreglar aqui:
   1. El pie separa con margin-top, asi que entre ambos asomaba una franja del
      fondo de pagina, mas clara. El pie sube hasta tocarlo y esos 99px de
      separacion se los queda el propio FAQ, en su color.
   2. Las esquinas redondeadas del pie no dejan ver la seccion de arriba, sino
      lo que hay DETRAS del pie, que es el fondo del body. Por eso los picos
      seguian claros. Con el margen negativo, el gris del FAQ se prolonga 50px
      por debajo del borde del pie (justo el radio), y el pie se pinta encima:
      en los picos asoma el gris del FAQ y no el de pagina. */
.home .faq {
	padding-bottom: 149px;
	margin-bottom: -50px;
}

.home .site-footer {
	margin-top: 0;
}


/* Figma: columna izquierda 383px, hueco 40px y columna de preguntas 820px,
   sobre los 1243px de contenido. */
.faq__inner {
	display: grid;
	grid-template-columns: 383fr 820fr;
	gap: 40px;
	align-items: start;
}

.faq__aside img {
	margin-top: 40px;
	border-radius: var(--radius-card);
	width: 100%;
	height: auto;
	object-fit: cover;
}

@media (max-width: 900px) {
	.faq__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* =========================================================
   Footer
   ========================================================= */
/* Pie. Medidas tomadas del export de Figma: alto 591px, contenido de 99 a
   1341px, filete a 399px del borde superior. */
.site-footer {
	background: var(--color-dark);
	color: var(--color-white);
	border-radius: var(--radius-dark-block) var(--radius-dark-block) 0 0;
	/* 35px + los 64px de padding-bottom de la ultima seccion = los 99px que hay
	   en el Figma entre el final del contenido y el borde superior del pie.
	   Las esquinas redondeadas apoyan siempre sobre el fondo de pagina. */
	margin-top: 35px;
	padding-top: 70px;
}

/* Figma: las columnas arrancan en x=99, 731 y 1047 sobre 1240 de contenido. */
.site-footer__top {
	display: grid;
	grid-template-columns: 600fr 284fr 296fr;
	gap: 32px;
}

.site-footer__logo {
	height: 78px;
	width: auto;
	margin-bottom: 64px;
}

/* El claim ocupa tres lineas en el Figma (x 99..547, interlinea 42px). */
.site-footer__claim {
	font-family: var(--font-heading);
	text-transform: uppercase;
	font-size: 1.91rem;      /* 30.6px: ancho y caja alta del Figma coinciden */
	line-height: 1.307;      /* 40px entre líneas */
	margin: 0;
	max-width: 460px;        /* fuerza el mismo corte en 3 líneas */
}

/* Figma: primer item a 143px del borde del pie, siguientes cada 55px. */
.site-footer__nav {
	padding-top: 67px;
}

.site-footer__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 34px;
	text-transform: uppercase;
	font-size: 0.97rem;
	line-height: 1.355;
	letter-spacing: 0.02em;
}

/* Figma: direccion a 124px del borde del pie; direccion y horario a dos lineas. */
.site-footer__contact {
	padding-top: 48px;
}

.site-footer__contact p {
	margin: 0 0 19px;
	font-size: 0.95rem;
	line-height: 1.4;
}

.site-footer__legal {
	padding-block: 67px 70px;
}

.site-footer__legal hr {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	margin: 0 0 57px;
}

/* Los separadores "|" son <span> en footer.php, no un gap. */
.legal-links {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-size: 0.8rem;
	line-height: 1.4;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	justify-content: center;
}

.legal-links__sep {
	opacity: 0.55;
}

.copyright {
	text-align: center;
	font-size: 0.8rem;
	letter-spacing: 0.58em;   /* muy abierto, como en el Figma */
	text-transform: uppercase;
	opacity: 0.8;
	margin: 28px 0 0;
}

@media (max-width: 900px) {
	.site-footer__top {
		grid-template-columns: 1fr;
	}

	/* Apiladas no tiene sentido mantener los desfases ni el claim a 36px. */
	.site-footer__nav,
	.site-footer__contact {
		padding-top: 0;
	}

	.site-footer__logo {
		margin-bottom: 28px;
	}

	.site-footer__claim {
		font-size: 1.45rem;
		max-width: none;
	}

	.site-footer__legal {
		padding-block: 40px 48px;
	}

	.copyright {
		letter-spacing: 0.3em;
	}

	.site-footer__nav-list {
		gap: 18px;
	}
}

/* =========================================================
   FAQ (details/summary nativo — sin JS)
   ========================================================= */
.faq-item {
	border-bottom: 1px solid rgba(46, 56, 58, 0.15);
	padding-block: 16px;
}

.faq-item summary {
	cursor: pointer;
	font-weight: 400;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

/* La columna mide 820px pero en el Figma la pregunta corta en ~646 y el icono se
   va al borde derecho. Sin este tope, el texto llegaba casi hasta el icono. La
   respuesta si ocupa el ancho completo de la columna. */
.faq-item__pregunta {
	max-width: 646px;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

/* El icono es geometrico, no tipografico: en el Figma es un signo de ~26px con
   el trazo muy fino, y la raya del estado abierto es igual de larga que el brazo
   del "+". Con los caracteres "+" y "-" salia mucho mas pequeno y la raya, corta.
   Se dibuja con dos degradados planos: uno horizontal y otro vertical. */
.faq-item summary::after {
	content: '';
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	background:
		linear-gradient(currentColor, currentColor) center / 26px 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 26px no-repeat;
}

/* Abierto: se queda solo el trazo horizontal. */
.faq-item[open] summary::after {
	background:
		linear-gradient(currentColor, currentColor) center / 26px 1.5px no-repeat;
}

.faq-item .faq-item__body {
	margin-top: 12px;
	color: rgba(46, 56, 58, 0.85);
}

/* Hay respuestas de dos y tres parrafos. */
.faq-item__body p {
	margin: 0;
}

.faq-item__body p + p {
	margin-top: 0.85em;
}

/* =========================================================
   Hero de página interior (patrón común a las 9 interiores)
   ========================================================= */
/* Igual que el hero de Home: el wrap pinta el oscuro que asoma por las esquinas. */
/* Por el hueco de las esquinas redondeadas del hero se ve este fondo, asi que
   tiene que ser el de la seccion que viene debajo. En el Figma, Equipo e
   Instalaciones lo tienen claro; El metodo y Servicios, oscuro. */
.page-hero-wrap {
	background: var(--color-bg);
}

.page-hero-wrap--oscuro {
	background: var(--color-dark);
}

/* Cuando lo siguiente al hero es una seccion gris (Servicios: ENTRY). */
.page-hero-wrap--gris {
	background: var(--color-light-gray);
}

.page-hero {
	position: relative;
	/* Proporción 1440x507 confirmada en Figma Inspect: el alto sigue al ancho para que
	   se vea la banda completa de la foto (mismo encuadre que el diseño) en cualquier
	   viewport; el tope evita un hero desmedido en ultrapanorámicos. El width explícito
	   es imprescindible: sin él, cuando min-height gana, aspect-ratio transfiere el alto
	   al ancho y la sección desborda el viewport (1079px en uno de 1021). */
	width: 100%;
	aspect-ratio: 1440 / 507;
	min-height: 380px;
	max-height: 700px;
	display: flex;
	align-items: center;
	/* Radio inferior 50px confirmado en Figma Inspect (Rectangle 1/3 del frame VAULT),
	   no 24 como se estimó de las capturas — coincide con --radius-dark-block. */
	border-radius: 0 0 var(--radius-dark-block) var(--radius-dark-block);
	overflow: hidden;
	color: var(--color-white);
}

/* En escritorio el banner nunca baja de los 507px del diseno. Con solo la
   proporcion, a 1280 de ventana salian 451: 56px menos que en el Figma, que es
   lo que se veia corto en portatiles. Por encima de 1440 sigue creciendo con la
   pantalla; si se quisiera congelar tambien ahi, bastaria con fijar el alto. */
@media (min-width: 1024px) {
	.page-hero {
		min-height: 507px;
	}
}

.page-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Anclado arriba: los webp de hero vienen ya recortados a la banda exacta del
	   diseño (1440x507), así el borde superior conserva el encuadre del Figma y en
	   viewports más anchos solo se recorta por abajo. */
	object-position: center top;
}

/* Overlay del hero interior (blend multiply), como el de la Home pero más denso:
   curva medida despejando el multiply (diseño ÷ foto registrada por correlación,
   mediana por fila y canal). El diseño vela toda la foto: 41% de luz arriba,
   ~65% del centro hacia abajo — no aplicar los stops literales de Figma. */
.page-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		#676E6E 0%,
		#727572 10%,
		#7D7F79 20%,
		#888780 30%,
		#939188 40%,
		#A2A097 50%,
		#ADACA5 60%,
		#ADABA2 75%,
		#A7A9A0 90%,
		#A1A59E 100%);
	mix-blend-mode: multiply;
}

.page-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: 70px; /* despeja el header absoluto */
}

/* 57px, no los 54 que heredaba de h1. Medido por la altura de las mayusculas en
   los cuatro Figma que hay (el metodo, servicios, equipo, instalaciones): las
   cuatro dan 42px de mayuscula, que con el ratio de Julius Sans One (0.740) son
   56.8px de cuerpo. La web daba 40px de mayuscula = 54.1, que es justo lo que
   pedia el CSS: el metodo se valida solo.
   La parte fluida de la formula ya era correcta (1.4rem + 2.4vw da 56.96 a 1440);
   lo que estaba mal era el tope, puesto en 3.375rem.
   No se toca el h1 general porque lo comparte el titular del slider de la home,
   que tiene su propio tamano ya revisado.
   Interlineado 1.16: en el Figma las dos lineas van cada 66px, no cada 60. */
.page-hero__title {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5625rem);
	line-height: 1.16;
	/* Con el cuerpo ya correcto los titulares seguian saliendo un 3.5% mas
	   estrechos que en el Figma. Ajustando por minimos cuadrados el ancho de los
	   cuatro ("El metodo" 343, "Servicios" 294, "Equipo" 224, "Instalaciones"
	   451) sale 1.23px de espaciado por hueco, o sea 0.022em. */
	letter-spacing: 0.022em;
	max-width: 11ch;
	margin: 0;
}

@media (max-width: 700px) {
	.page-hero {
		min-height: 380px;
	}
}

/* =========================================================
   El Método — banda oscura, banda clara y "Qué medimos"
   Reescrito segun el Figma (paginas_VAULT/el metodo.jpg, export 1.5x).
   Todas las medidas comentadas estan ya en el lienzo de 1440.
   ========================================================= */

/* Banda oscura: foto a la izquierda, texto a la derecha.
   Foto 98→709 (611), hueco 54, texto 763→1341 (578). 54/1243 = 4.34%. */
.metodo-intro {
	background: var(--color-dark);
	color: var(--color-white);
	/* 43 abajo y no 68: medido, del final de la ultima linea al borde de la banda
	   hay 61px en el Figma y me salian 86. */
	padding-block: 51px 43px;
}

.metodo-intro__grid {
	display: grid;
	grid-template-columns: 611fr 578fr;
	gap: 4.34%;
	align-items: start;
}

/* La foto arranca 113px por debajo del texto y se desborda 157px por debajo de
   la caja de contenido, de forma que asoma 89px sobre el gris de la seccion
   siguiente. Los margenes van en % (del ancho de su propia columna) para que
   ese desbordamiento escale igual que todo lo demas. */
.metodo-intro__foto {
	margin-top: 18.5%;
	margin-bottom: -25.7%;
	position: relative;
	z-index: 1;
}

.metodo-intro__foto img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}

/* 16px medidos sobre tres lineas (15.88 / 15.96 / 15.92), interlineado 27px. */
.metodo-intro__texto p {
	font-size: clamp(0.875rem, 1.111vw, 1rem);
	line-height: 1.7;
	margin: 0 0 1.6em;
}

.metodo-intro__texto p:last-child {
	margin-bottom: 0;
}

/* Banda clara: una sola foto a todo el ancho del contenido con el texto encima,
   sobre la pared clara de la izquierda. 1243 x 318 = proporcion 3.908. */
/* 162px de aire antes de la banda: es lo que hay en el Figma entre el final de
   la banda oscura y el borde superior de esta foto. Parte de ese hueco lo ocupa
   la foto de la banda oscura, que se desborda 89px sobre el gris. */
.metodo-plan {
	padding-block: 162px 0;
}

.metodo-plan__banda {
	position: relative;
	border-radius: var(--radius-card);
	overflow: hidden;
}

.metodo-plan__bg {
	width: 100%;
	height: auto;
	display: block;
}

.metodo-plan__texto {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-inline: 4.42% 0;   /* 55px sobre 1243 */
}

/* Mismo cuerpo que la banda oscura (16px) pero mas apretado: 20.5px de
   interlineado frente a 27. */
.metodo-plan__texto p {
	font-size: clamp(0.8rem, 1.111vw, 1rem);
	line-height: 1.3;
	margin: 0 0 1.2em;
	max-width: 32em;
}

.metodo-plan__texto p:last-child {
	margin-bottom: 0;
}

/* "Qué medimos": centrado, 47px como el resto de titulares de seccion.
   70px de aire por encima y 88 por debajo. */
/* 36 abajo y no 71: el Figma deja 71px entre la ultima tarjeta y el pie, pero
   .site-footer ya aporta 35px de margen superior propio. 36 + 35 = 71. */
.medimos-lista {
	padding-block: 70px 36px;
}

.medimos-lista__title {
	font-size: clamp(1.75rem, 3.3vw, 2.97rem);
	text-transform: none;
	text-align: center;
	line-height: 1.1;
	margin: 0 0 67px;
}

/* 3 columnas de 401 con hueco de 20: 401*3 + 20*2 = 1243. */
.medimos-lista__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* El contenido va pegado al fondo de la tarjeta, con mucho aire por arriba:
   en el Figma el titulo empieza 154px por debajo del borde superior. */
.medimos-ficha {
	border: 1px solid var(--color-line, rgba(46, 56, 58, 0.3));
	border-radius: 30px;
	padding: 37px;
	/* 404px: medido por la distancia entre los bordes superiores de dos filas
	   consecutivas en el Figma (1591 y 2015) menos los 20 de hueco. */
	min-height: 404px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.medimos-ficha h3 {
	font-family: var(--font-heading);
	font-weight: 400;
	text-transform: none;
	font-size: clamp(1.4rem, 2.15vw, 1.94rem);   /* 31px en el lienzo de 1440 */
	line-height: 1.16;
	letter-spacing: 0;
	margin: 0 0 30px;
}

.medimos-ficha p {
	font-size: clamp(0.85rem, 1.111vw, 1rem);
	line-height: 1.25;
	margin: 0;
}

/* La foto ocupa las dos ultimas columnas de la fila final: 401+20+401 = 822,
   y su proporcion (822x402) es la que da el alto de esa fila. */
.medimos-lista__foto {
	grid-column: span 2;
	border-radius: 30px;
	overflow: hidden;
}

.medimos-lista__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 900px) {
	.metodo-intro__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.metodo-intro__foto {
		margin-top: 0;
		margin-bottom: 0;
		order: 2;
	}
	/* Apilada, la foto deja de hacer de fondo y el texto va debajo, sobre el
	   gris de la pagina: superpuesto no cabria. */
	.metodo-plan__banda {
		display: flex;
		flex-direction: column;
		gap: 24px;
		border-radius: 0;
		overflow: visible;
	}
	.metodo-plan__bg {
		border-radius: var(--radius-card);
	}
	.metodo-plan__texto {
		position: static;
		padding-inline: 0;
	}
	.medimos-lista__grid {
		grid-template-columns: 1fr;
	}
	.medimos-ficha {
		min-height: 0;
		padding: 28px;
	}
	.medimos-ficha h3 {
		margin-bottom: 18px;
	}
	.medimos-lista__foto {
		grid-column: auto;
		aspect-ratio: 822 / 402;
	}
}

@media (min-width: 901px) and (max-width: 1100px) {
	/* Entre 900 y 1100 los <br> del Figma siguen activos pero la banda clara se
	   queda justa; se compensa acercando el texto al borde. */
	.metodo-plan__texto {
		padding-inline: 3% 0;
	}
}

/* =========================================================
   Instalaciones — tecnologia, planificacion y cierre
   Medido sobre paginas_VAULT/instalaciones.jpg (export 1.5x).
   Todas las cifras de los comentarios van en el lienzo de 1440.
   ========================================================= */

/* Foto a sangre por la izquierda (x 0..709, 520 de alto) y texto a la derecha
   (x 739..1341). El padding derecho reproduce el margen de la pagina: 6.85vw
   mientras el contenido escala, y (100%-1243)/2 cuando ya esta congelado. */
.inst-tec {
	padding-block: 115px 0;
}

.inst-tec__grid {
	display: grid;
	grid-template-columns: min(49.24vw, 709px) 1fr;
	gap: 30px;
	align-items: start;
	padding-right: max(6.85%, calc((100% - 1243px) / 2));
}

.inst-tec__foto {
	width: 100%;
	height: min(36.1vw, 520px);
	object-fit: cover;
	border-radius: 0 30px 30px 0;
	display: block;
}

.inst-tec__texto {
	padding-top: 2.4em;
}

.inst-tec__texto h2 {
	font-size: clamp(1.75rem, 3.26vw, 2.94rem);   /* 47px */
	text-transform: none;
	line-height: 1.17;
	letter-spacing: 0;
	margin: 0 0 0.7em;
}

.inst-tec__texto p {
	font-size: clamp(0.875rem, 1.111vw, 1rem);    /* 16px */
	line-height: 1.25;
	margin: 0 0 1.25em;
}

.inst-tec__texto p:last-child {
	margin-bottom: 0;
}

/* Planificacion: titular a la izquierda y entradilla alineada a la derecha. */
.inst-plan {
	padding-block: 84px 0;
}

.inst-plan__cabecera {
	display: grid;
	grid-template-columns: 1fr minmax(0, 480px);
	gap: 40px;
	align-items: end;
	margin-bottom: 48px;
}

.inst-plan__cabecera h2 {
	font-size: clamp(1.75rem, 3.26vw, 2.94rem);   /* 47px, el mismo que el resto */
	text-transform: none;
	line-height: 1.17;
	letter-spacing: 0;
	max-width: 9em;    /* corta en "Planificacion y / seguimiento del / entrenamiento" */
	margin: 0;
}

.inst-plan__intro {
	font-size: clamp(0.875rem, 1.111vw, 1rem);
	line-height: 1.25;
	text-align: right;
	margin: 0;
}

/* Tres tarjetas de 401 x 258 con hueco de 20, igual que el resto de rejillas. */
.inst-plan__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.inst-plan__card {
	border: 1px solid var(--color-line, rgba(46, 56, 58, 0.3));
	border-radius: 30px;
	padding: 36px;
	min-height: 258px;
}

.inst-plan__card h3 {
	font-family: var(--font-heading);
	font-weight: 400;
	text-transform: none;
	font-size: clamp(1.1rem, 1.62vw, 1.46rem);    /* 23.3px */
	line-height: 1.2;
	letter-spacing: 0;
	margin: 0 0 42px;
}

.inst-plan__card p {
	font-size: clamp(0.875rem, 1.111vw, 1rem);
	line-height: 1.25;
	margin: 0;
}

.inst-plan__cierre {
	font-size: clamp(0.875rem, 1.111vw, 1rem);
	line-height: 1.25;
	text-align: center;
	max-width: 880px;
	margin: 60px auto 0;
}

/* Cierre: 32px, centrado, con la segunda parte en negrita. */
.inst-lema {
	padding-block: 66px 71px;
}

.inst-lema p {
	font-size: clamp(1.4rem, 2.22vw, 2rem);       /* 32px */
	line-height: 1.25;
	text-align: center;
	max-width: 23em;
	margin-inline: auto;
}

@media (max-width: 900px) {
	.inst-tec {
		padding-block: 48px 0;
	}
	.inst-tec__grid {
		grid-template-columns: 1fr;
		gap: 24px;
		padding-right: 0;
	}
	.inst-tec__foto {
		height: auto;
		aspect-ratio: 709 / 520;
		border-radius: 0 30px 30px 0;
	}
	.inst-tec__texto {
		padding: 0 var(--gutter);
	}
	.inst-plan {
		padding-block: 48px 0;
	}
	.inst-plan__cabecera {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-bottom: 28px;
	}
	.inst-plan__cabecera h2 {
		max-width: none;
	}
	.inst-plan__intro {
		text-align: left;
	}
	.inst-plan__grid {
		grid-template-columns: 1fr;
	}
	.inst-plan__card {
		min-height: 0;
		padding: 28px;
	}
	.inst-plan__card h3 {
		margin-bottom: 20px;
	}
	.inst-lema {
		padding-block: 48px 48px;
	}
}

/* =========================================================
   Qué es Vault — Nuestra visión
   ========================================================= */
.vision {
	padding-block: 96px 32px;
}

/* Medido sobre la captura del Figma que envio el cliente (lienzo 1440 escalado a
   1264, factor 0.878): la columna de texto va de x=709 a x=1341, o sea 633px de
   ancho, y el titular acaba en x=596. El hueco entre columnas son 113px.
   La medicion anterior (columna de 730, hueco 14) estaba mal y era la causa de
   que la seccion se viera apretada: el hueco real es ocho veces mayor.
   El hueco va en % para que escale con el contenido igual que las columnas:
   95/1243 = 7.64%. Las dos fr se reparten los 1148px restantes. */
.vision__grid {
	display: grid;
	grid-template-columns: 516fr 632fr;
	gap: 7.64%;
	/* baseline y no start: "Nuestra vision" (16px, interlineado 1.5) y "Durante
	   decadas..." (20px, interlineado 1.6) arrancan en la misma altura de caja
	   pero sus lineas base caian a 620 y 625. Con baseline el navegador cuadra
	   las dos bases el solo, sea cual sea el ancho de pantalla. */
	align-items: baseline;
}

.vision .eyebrow {
	font-weight: 700;
	margin: 0 0 64px;
}

/* Medido en la mesa de Figma de esta pagina: 47px ("custodia proactiva" 494px y
   "Un modelo de" 363px dan 47.2 y 46.8). Sin uppercase: en el diseno son
   versalitas, se ve en la "U" de "Un", mas alta que el resto.
   Vuelve a los 47px medidos. Se habia bajado a 44.2 para ganar aire, pero el
   problema no era el cuerpo de letra sino el hueco entre columnas, que estaba en
   24px cuando el Figma tiene 113. Con el hueco corregido sobran 113px de aire. */
.vision__title {
	font-size: clamp(1.75rem, 3.3vw, 2.97rem);
	text-transform: none;
	line-height: 1.22;
	margin: 0;
	/* Holgado a proposito: los cuatro cortes van forzados con <br> en la plantilla.
	   Antes los hacia este tope y la ventana que funcionaba era de 0.03em (10.454
	   a 10.483): "custodia proactiva y" cabia por 0.7px, asi que el corte correcto
	   dependia del redondeo del navegador. */
	max-width: 11em;
}

/* El Figma corta el titular tras "para", y para eso el tope tendria que estar
   entre 491 y 493px: un margen de 1px que ningun navegador respeta igual. Se
   fuerza el salto y se desactiva en pantallas pequenas, donde estorba. */
.corte-figma {
	display: none;
}

@media (min-width: 900px) {
	.corte-figma {
		display: inline;
	}
}

/* 20px. Resuelto por los cortes de linea: en la columna de 633px del Figma, el
   unico cuerpo que produce los cuatro cortes de la captura es 20.01-20.06px.
   Los 23.3px anteriores salian de medir suponiendo una columna de 730, que era
   el error de partida. 20px coincide con el cuerpo de .intro, que es lo logico:
   es el mismo componente de texto del sistema, no dos distintos.
   Interlineado 1.6: en la captura las lineas van cada 32px. */
.vision__body {
	font-size: clamp(1rem, 1.39vw, 1.25rem);
	line-height: 1.6;
	max-width: none;
	/* En flex y no en margenes: asi la separacion entre parrafos es un valor
	   unico y explicito, sin el colapso de margenes que hacia que el hueco antes
	   del claim fuese el mayor de los dos (64px) en vez del que yo creia. */
	display: flex;
	flex-direction: column;
	/* 10px entre parrafos. De la primera linea base a la ultima, la columna
	   derecha recorria 297px y la izquierda 285: 12px de mas que hacian que
	   "esa pregunta." cayera por debajo de "tu salud futura.". Esos 12px se
	   recortan aqui (4) y en el margen del claim (8). */
	gap: 0.5em;
}

/* :not(.vision__claim) no es cosmetico: ".vision__body p" (0,1,1) tiene mas
   especificidad que ".vision__claim" (0,1,0), asi que sin excluirlo le anulaba
   al claim tanto el margen superior como el margin-inline-start:auto que lo
   pega al borde derecho. */
.vision__body p:not(.vision__claim) {
	margin: 0;
}

/* 32px medidos ("Vault nace para responder" = 466px). Versalitas igual que el
   titular; el tope de 480 reproduce el corte del Figma en dos lineas.
   Interlineado 1.15: en el Figma las dos lineas del claim van cada 36.5px, no
   cada 41.6 como daba el 1.3 anterior. */
.vision__claim {
	font-family: var(--font-heading);
	text-transform: none;
	font-size: clamp(1.4rem, 2.22vw, 2rem);
	line-height: 1.15;
	text-align: right;
	/* En em, no en px: el cuerpo de letra es fluido y con un tope fijo el corte
	   de linea cambiaba segun el ancho de pantalla. 15em = los 480px del diseno
	   cuando la letra esta a su tamano maximo. */
	max-width: 15em;
	margin-inline-start: auto;
	/* Suma al gap de .vision__body: 10 + 2.6 = 12.6px antes del claim, algo mas
	   que entre parrafos. Los 2em que habia aqui antes descolgaban toda la
	   columna derecha 72px por debajo del titular. */
	margin-block: 0.08em 0;
}

@media (max-width: 800px) {
	.vision {
		padding-block: 64px 24px;
	}
	.vision__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.vision .eyebrow {
		margin-bottom: 24px;
	}
}

/* =========================================================
   Qué es Vault — pilares + bloque de convicción
   ========================================================= */
.pilares {
	padding-block: 32px 64px;
}

.pilares__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.pilar {
	padding: 32px 28px;
}

.pilar h3 {
	font-size: 1.35rem;
	margin: 0 0 1em;
	max-width: 12ch;
}

.pilar p {
	margin: 0;
	font-size: 0.9rem;
}

/* Bloque oscuro + foto: en el diseño van pegados a las tarjetas (mismo clúster, hueco 20px).
   Anchos medidos sobre la captura del Figma: la tarjeta oscura 544px y la foto
   674px dentro de los 1243 de contenido. Antes estaban en 407/444, que daba 585
   y 638: la tarjeta salia 40px mas ancha y la foto 40px mas estrecha. */
.conviccion__grid {
	display: grid;
	grid-template-columns: 544fr 674fr;
	gap: 20px;
	align-items: stretch;
	margin-top: 20px;
}

/* 18px de cuerpo, resuelto por los cortes de linea del Figma: con la columna de
   texto de 473px el unico tamano que da los ocho cortes es 18.10-18.79px. Estaba
   heredando el 1rem del body, un 11% mas pequeno.
   El padding va en em para que escale con la letra: si fuera fijo, los cortes de
   linea cambiarian al estrecharse la pantalla. 2em = los 36px del diseno. */
.conviccion__text {
	background: var(--color-dark);
	color: var(--color-white);
	border-radius: var(--radius-card);
	font-size: clamp(1rem, 1.25vw, 1.125rem);
	/* 3em arriba y abajo (54px), no 4.17 (75). Con 75 quedaban 79px de aire sobre
	   la primera linea y 77 bajo la ultima, demasiado. El lateral se queda en 2em
	   = los 36px del diseno, que son los que fijan el corte de linea. */
	padding: 3em 2em;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.conviccion__text p:last-child {
	margin-bottom: 0;
}

/* La foto va en absoluto dentro de .conviccion__foto para que NO cuente al
   calcular el alto de la fila. El archivo mide 639x521; a los 677px de ancho de
   su columna su alto natural son 552px, y era eso lo que estiraba el bloque a
   545 cuando el diseno pide 492. Asi manda el texto, que es lo correcto, y la
   foto se recorta para llenar el hueco igual que en el Figma. */
.conviccion__foto {
	position: relative;
	border-radius: var(--radius-card);
	overflow: hidden;
}

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

@media (max-width: 800px) {
	.pilares__grid {
		grid-template-columns: 1fr;
	}
	.conviccion__grid {
		grid-template-columns: 1fr;
	}
	/* Apilado, la foto ya no tiene una fila que le de alto: se lo da su propia
	   proporcion, la misma del diseno (674x492). */
	.conviccion__foto {
		aspect-ratio: 674 / 492;
	}
}

/* =========================================================
   Timeline Intervenir / Cambiar / Proteger (Qué es Vault, El Método)
   ========================================================= */
.timeline-section {
	padding-block: 64px 96px;
}

.timeline {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Sin gap: las reglas horizontales de cada item se tocan y forman una línea continua. */
	gap: 0;
}

.timeline__item {
	display: flex;
	flex-direction: column;
	padding-right: 32px;
}

/* Tick vertical que baja del título hasta el punto sobre la línea. */
.timeline__item h3 {
	flex: 1; /* alinea las reglas entre columnas aunque un título parta en menos líneas */
	font-size: 1.6rem;
	margin: 0 0 0 60px;
	padding: 0 0 24px 16px;
	border-left: 1px solid rgba(46, 56, 58, 0.5);
	max-width: 12ch;
}

.timeline__rule {
	position: relative;
	height: 1px;
	background: rgba(46, 56, 58, 0.5);
	margin-right: -32px; /* compensa el padding del item para que la línea sea continua */
}

.timeline__item:last-child .timeline__rule {
	margin-right: 0;
}

.timeline__rule::before {
	content: '';
	position: absolute;
	left: 60px;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--color-dark);
}

/* Centrado bajo el punto de la regla (que está en left: 60px).
   `align-self: flex-start` es imprescindible: el item es un flex en columna y
   sin esto estira el <img> a todo el ancho de la columna (232px medidos), con
   lo que `width: auto` deja de calcular el ancho real del SVG y el -50% se
   apoya en una caja mucho más grande que el dibujo. */
.timeline__icon {
	height: 56px;
	width: auto;
	align-self: flex-start;
	margin: 28px 0 0 60px;
	transform: translateX(-50%);
}

/* 950 y no 800: cada columna necesita 60 de sangrado + 16 de separacion + 12ch
   de titular + 32 de aire = 264px, o sea 792 de contenido, que se alcanzan
   sobre los 918 de pantalla. A 820 las tres columnas seguian puestas y el
   titular se salia 23px. */
@media (max-width: 950px) {
	.timeline {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.timeline__item {
		padding-right: 0;
	}
	.timeline__rule {
		margin-right: 0;
	}
}

/* =========================================================
   El Método — timeline claro sobre banda oscura + filas
   ========================================================= */
/* Variante del timeline: texto arriba, número grande bajo la línea, colores claros. */
.timeline--claro .timeline__texto {
	flex: 1;
	margin: 0 0 0 60px;
	padding: 0 0 28px 16px;
	border-left: 1px solid rgba(255, 255, 255, 0.6);
	max-width: 22ch;
	font-size: 1.05rem;
}

.timeline--claro .timeline__rule {
	background: rgba(255, 255, 255, 0.6);
}

.timeline--claro .timeline__rule::before {
	background: var(--color-white);
}

.timeline__num {
	font-family: var(--font-heading);
	font-size: 2rem;
	line-height: 1;
	margin: 24px 0 0 46px;
}

.metodo-fases__cierre {
	text-align: center;
	max-width: 62ch;
	margin: 64px auto 0;
}

/* Filas ficha + foto (823x402, radio 30px medidos en Figma) */
.metodo-fila {
	display: grid;
	grid-template-columns: 397fr 823fr;
	gap: 22px;
	align-items: stretch;
	min-height: 402px;
}

.metodo-fila + .metodo-fila {
	margin-top: 22px;
}

.metodo-fila--invertida {
	grid-template-columns: 823fr 397fr;
}

.metodo-fila--invertida .metodo-fila__card {
	order: 2;
}

.metodo-fila--invertida .metodo-fila__img {
	order: 1;
}

.metodo-fila__card {
	border: 1px solid rgba(46, 56, 58, 0.3);
	border-radius: 30px;
	padding: 40px 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.metodo-fila__card h2 {
	font-size: 2rem;
	margin: 0 0 0.7em;
}

.metodo-fila__card p {
	margin: 0;
	font-size: 0.85rem;
	max-width: 36ch;
}

.metodo-fila__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 30px;
}

.metodo-detalle .cta-banda {
	margin-top: 56px;
}

@media (max-width: 800px) {
	.metodo-fila,
	.metodo-fila--invertida {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.metodo-fila--invertida .metodo-fila__card {
		order: 0;
	}
	.metodo-fila--invertida .metodo-fila__img {
		order: 0;
	}
	.metodo-fila__img {
		aspect-ratio: 823 / 402;
		height: auto;
	}
}

/* =========================================================
   Equipo (página) — tarjeta de cita destacada
   ========================================================= */
/* El grid y las tarjetas de persona reutilizan .equipo__grid / .persona de la Home.
   En la página el título del split va sobre fondo claro (la Home lo usa en oscuro). */
/* Panel de detalle: es el estado HOVER de la tarjeta, no un estado fijo.
   Cubre la foto al pasar el raton y tambien al entrar con el teclado. */
.persona__detalle {
	position: absolute;
	inset: 10px;
	background: var(--color-dark);
	color: var(--color-white);
	border-radius: 12px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s;
}

/* El :hover va aparte porque en tactil se queda pegado: al tocar la tarjeta
   el movil la deja "con el raton encima" y el panel ya no se cerraba. */
@media (hover: hover) {
	.persona--con-detalle:hover .persona__detalle {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

/* Con el teclado (foco en "Saber mas") y en tactil, donde main.js pone
   .is-abierta al tocar la tarjeta y la quita al volver a tocarla. */
.persona--con-detalle:focus-within .persona__detalle,
.persona--con-detalle.is-abierta .persona__detalle {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* La placa se aparta para no transparentarse bajo el panel.
   Selector con dos clases a proposito: animations.css se carga despues y
   redefine "transition" en .persona__plate; con una sola clase ganaria el suyo. */
.persona--con-detalle .persona__plate {
	transition: opacity 0.25s ease;
}

@media (hover: hover) {
	.persona--con-detalle:hover .persona__plate {
		opacity: 0;
	}
}

.persona--con-detalle:focus-within .persona__plate,
.persona--con-detalle.is-abierta .persona__plate {
	opacity: 0;
}

.persona__detalle-nombre {
	font-family: var(--font-heading);
	text-transform: uppercase;
	font-size: 1.05rem;
	text-align: center;
	margin: 0 0 0.5em;
}

.persona__detalle-cargo {
	font-size: 0.78rem;
	text-align: center;
	margin: 0 0 12px;
}

.persona__detalle-sep {
	width: 58%;
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	margin: 0 auto 14px;
	flex: none;
}

/* Las versiones cortas del docx son largas y desiguales entre si: el bloque
   cede altura antes que el resto y, si aun asi no cabe, se desplaza. Nunca
   se recorta el texto ni empuja al boton fuera de la tarjeta. */
.persona__detalle-texto {
	margin: 0 0 18px;
	font-size: 0.86rem;
	line-height: 1.45;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.persona__detalle-destacado {
	font-size: 0.78rem;
	line-height: 1.55;
	margin: 0;
}

.persona__detalle-destacado p {
	margin: 0;
}

/* "Saber mas": el marco inferior del Figma. Pendiente de abrir el pop-up. */
.persona__detalle-mas {
	display: flex;
	width: 100%;
	background: none;
	color: inherit;
	font-family: inherit;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: auto;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 9px;
	padding: 10px 14px;
	font-size: 0.8rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* El SVG de vault_get_icon() no trae width/height: los pone cada contexto
   (ver ".btn .icon"). Sin esta regla se estira hasta llenar la tarjeta. */
.persona__detalle-mas .icon {
	width: 16px;
	height: 16px;
	flex: none;
}

/* Sin raton la tarjeta se ve como en el Figma (foto y placa) y el panel
   sale al tocarla; la zona de toque es la tarjeta entera.

   El cursor no es decorativo: Safari de iOS solo convierte el toque en un
   evento "click" sobre elementos que considera pulsables, y un <figure>
   suelto no lo es. Con cursor: pointer pasa a serlo. Sin esto el panel no
   se abria en iPhone ni en iPad, aunque en Android si. */
@media (hover: none) {
	.persona--con-detalle,
	.persona--con-detalle .persona__detalle {
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
}

/* En una columna la tarjeta es mucho mas baja que en escritorio: con la
   proporcion del Figma solo caben dos lineas de bio y el resto quedaba
   cortado. Abierta se suelta la proporcion y crece lo que pida el texto.
   Solo en una columna: en tablet apaisada estirar una tarjeta descuadraria
   las otras dos de su fila. */
@media (hover: none) and (max-width: 800px) {
	.persona--con-detalle.is-abierta {
		aspect-ratio: auto;
	}

	.persona--con-detalle.is-abierta img {
		height: 0;
		visibility: hidden;
	}

	.persona--con-detalle.is-abierta .persona__plate {
		display: none;
	}

	.persona--con-detalle.is-abierta .persona__detalle {
		position: static;
	}
}

/* =========================================================
   Contacto
   ---------------------------------------------------------
   Todo lo de aqui esta medido sobre paginas_VAULT/contacto.png (export del
   Figma 1:1 del lienzo de 1440; el contenido va de x=98 a x=1341 = 1243px).

   Metodo: los cuerpos se han sacado ajustando la anchura de cada linea real
   con la fuente real (PIL.ImageFont) y quedandose con el tamano cuyo
   espaciado entre letras resuelve a ~0. Los cinco roles de texto de la
   pagina caen en numeros redondos con tracking 0, que es la mejor senal de
   que el ajuste es el bueno:
     titulo de seccion   Julius 48px      (la "E" de "Empieza" mide 35px de
                                           alto: 35 / 0.72 de caja alta = 48.6)
     cuerpo              Oxygen 300 20px, paso entre lineas 25px
     titulo de tarjeta   Julius 36px,     paso 39px
     cuerpo de tarjeta   Oxygen 300 16px, paso 20px
     etiquetas del form  Oxygen 300 14px, caja de linea 18px
   OJO: el cuerpo del Figma son 20px, no 16. Sale lo mismo en el export de
   Servicios (que esta a 1,5x: 2160 de ancho) al dividir entre 1,5.

   Escalado: se sigue la convencion del resto del archivo,
   clamp(minimo, Xvw, tamano_de_1440) con Xvw = px / 14.40.
   ========================================================= */

/* El hero acaba en y=507 y la caja de linea del titulo arranca en y=632:
   125px de aire. Abajo, del final del boton (y=1200.7) a las tarjetas
   (y=1325) hay 124.3px, repartidos 63 + 62 entre las dos secciones. */
.contacto {
	padding-block: min(8.68vw, 125px) min(4.375vw, 63px);
}

/* Columnas medidas: izquierda 98->612 (514), hueco 117, formulario 730->1342
   (612). 514 + 117 + 612 = 1243. El hueco va en %, no en vw, porque el vw
   incluye la barra de scroll y separaria estas dos columnas del resto de
   rejillas de la web (ver trampas del CONTEXTO). */
.contacto__grid {
	display: grid;
	grid-template-columns: 514fr 612fr;
	column-gap: 9.413%;
	align-items: start;
}

/* El titular de Contacto es mas grande que el .section__title generico (43px):
   aqui son 48px con 52px de paso (line-height 1.0833, que es lo que da Julius
   Sans One con interlineado automatico: 1.091 segun sus metricas hhea).
   De la base de la segunda linea al inicio de la caja del primer parrafo hay
   46.6px. */
.contacto .section__title {
	font-size: clamp(2rem, 3.333vw, 3rem);
	line-height: 1.0833;
	letter-spacing: 0;
	margin: 0 0 min(3.24vw, 47px);
}

/* Cuerpo: 20px con 25px de paso. Cada parrafo deja 25px por debajo, es decir
   exactamente una linea. Sin max-width: el ancho lo da la columna (514px) y
   con ese ancho los cortes de linea salen donde el Figma. */
.contacto__texto p {
	font-size: clamp(1rem, 1.389vw, 1.25rem);
	line-height: 1.25;
	margin: 0 0 min(1.74vw, 25px);
	max-width: none;
}

/* Filete: 1px del ancho completo de la columna (x 98->611, 514px) en y=961.
   El color medido es (138,143,144), que sobre el fondo #E7E7E7 es
   exactamente #2E383A al 50%. Arriba 53px (el margen de 25 del parrafo
   colapsa contra este) y abajo 52px. */
.contacto__sep {
	border: none;
	border-top: 1px solid rgba(46, 56, 58, 0.5);
	margin: min(3.68vw, 53px) 0 min(3.61vw, 52px);
}

/* Rejilla del formulario: dos subcolumnas de 296 con 20 de hueco
   (296 + 20 + 296 = 612). El hueco en % de la propia columna: 20/612. */
.contacto__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 3.268%;
	row-gap: min(1.11vw, 16px);
}

.contacto__campo {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.contacto__campo--full {
	grid-column: 1 / -1;
}

/* Cadena vertical completa del formulario, medida sobre el export:
     etiqueta   632.7 ->  650.7   (14px de cuerpo en caja de linea de 18)
     hueco        8
     campo      658.7 ->  708.7   (50 de alto)
     hueco       16
     etiqueta   724.7 ->  742.7
     campo      750.7 ->  800.7   (medido 751-800)
     etiqueta   816.7 ->  834.7
     area       842.7 -> 1131.7   (medido 843-1131, 289 de alto)
     boton     1147.7 -> 1200.7   (medido 1147-1199, 53 de alto)
   El paso de fila sale 92.0px exactos: 18 + 8 + 50 + 16. */
.contacto__campo label {
	font-size: clamp(0.75rem, 0.972vw, 0.875rem);
	line-height: 18px;
	color: #8C8C8C;
	margin-bottom: min(0.56vw, 8px);
}

.contacto__campo input,
.contacto__campo textarea {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: clamp(0.75rem, 0.972vw, 0.875rem);
	line-height: 1.25;
	color: var(--color-dark);
	background: transparent;
	border: 1px solid rgba(46, 56, 58, 0.5);
	/* Radio por ajuste circular del perfil de la esquina: 7.0px (rms 0.9).
	   Es el mismo en los campos, el area y el boton. */
	border-radius: 7px;
	padding: 0 min(0.83vw, 12px);
	width: 100%;
}

.contacto__campo input {
	height: min(3.472vw, 50px);
	min-height: 44px;
}

.contacto__campo textarea {
	height: min(20.07vw, 289px);
	min-height: 200px;
	padding-block: min(0.83vw, 12px);
	resize: vertical;
}

.contacto__campo input::placeholder,
.contacto__campo textarea::placeholder {
	color: #8C8C8C;
	opacity: 1;
}

.contacto__campo input:focus,
.contacto__campo textarea:focus {
	outline: 1.5px solid var(--color-dark);
	outline-offset: 0;
}

/* El boton ocupa la subcolumna derecha entera: 296px, los mismos que un
   campo. No es el boton de degradado: en el Figma lleva el mismo filete gris
   que los campos y el fondo transparente. */
.contacto__enviar {
	grid-column: 2;
	margin: 0;
	display: block;
}

.contacto__enviar .btn {
	width: 100%;
	height: min(3.681vw, 53px);
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: min(1.32vw, 19px);
	padding: 0;
	background: none;
	color: var(--color-dark);
	border: 1px solid rgba(46, 56, 58, 0.5);
	border-radius: 7px;
	font-family: var(--font-body);
	font-weight: 300;
	/* La tinta de "SOLICITAR INFORMACION" mide 189px: son 16px con espaciado
	   0 (a 18px haria falta -0.06em y aun sobrarian 4px). */
	font-size: clamp(0.8125rem, 1.111vw, 1rem);
	letter-spacing: 0;
	text-transform: uppercase;
	cursor: pointer;
}

/* La flecha del boton mide 18x17 de tinta en el Figma. */
.contacto__enviar .btn .icon {
	width: min(1.25vw, 18px);
	height: min(1.25vw, 18px);
	flex: none;
	stroke-width: 1.9;
}

/* =========================================================
   Contacto - accesos rapidos
   ========================================================= */

/* De las tarjetas (acaban en y=1726) al footer (empieza en y=1852) hay 126px,
   pero .site-footer ya trae 35px de margin-top propios (regla global), asi que
   aqui solo van los 90 que faltan: 90 + 35 = 125.
   Arriba, los 62 que completan el hueco de 125 con el formulario. */
.contacto-accesos {
	padding-block: min(4.31vw, 62px) min(6.25vw, 90px);
}

/* Tres tarjetas de 401 con huecos de 20 (401*3 + 20*2 = 1243): es la rejilla
   de tarjetas generica del sistema. El hueco en % del contenido: 20/1243. */
.contacto-accesos__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.609%;
}

.acceso {
	position: relative;
	/* Radio por ajuste circular del perfil de la esquina: 27.0px (rms 0.7). */
	border-radius: min(1.875vw, 27px);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: flex-end;
	color: var(--color-white);
	isolation: isolate;
}

.acceso > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* Velo. Medido despejando la mezcla, no a ojo. Para cada franja de filas se
   regresa el compuesto del Figma contra la foto sin velo:
       G = (1-a)*P + a*V
   La pendiente da 1-a y la ordenada da a*V, o sea el alfa Y el color del velo
   en la misma pasada. Se usa la tercera tarjeta, que es la que mejor registra
   con su foto (correlacion de luminancia 0.91, R2 de la regresion 0.86-0.96).

   El metodo se autovalida: aplicado a nuestro propio render devuelve
   (46,56,58) en todas las filas fiables, que es exactamente lo que pedia el
   CSS, y el mismo perfil de alfa. Y los numeros no cambian al repetir la
   regresion a 401, 200, 100 y 50 px de resolucion, asi que no son sesgo de
   remuestreo.

   Lo que sale NO es un degradado de transparente a oscuro:
       altura    alfa    color
         0%      0.66    219,219,218   <- lavado CLARO y muy opaco arriba
        20%      0.58    157,155,150
        40%      0.50     97, 93, 84
        58%      0.38     57, 50, 33   <- el alfa hace minimo aqui
        70%      0.48     57, 51, 36
       100%      0.62     63, 58, 43
   Dos cosas que conviene no "corregir" por parecer raras:
   1. Arriba hay un velo CLARO al 66%, no transparencia. Se ve en que el
      contraste de la foto queda comprimido al 34% en esa zona.
   2. El oscuro de abajo es CALIDO (B mas bajo que R), no el #2E383A de marca,
      que es frio. El control sobre nuestro render descarta que sea un tinte
      de la tubería de color.
   El alfa baja hasta el 58% y vuelve a subir: por eso hacen falta los puntos
   intermedios y no vale un degradado de dos paradas.
   Los alfa escritos abajo llevan +0.013 arriba y hasta +0.048 abajo sobre lo
   medido: es la correccion que cerro el bucle. Al renderizar estas paradas y
   volver a regresar el render, Chrome devolvia un alfa sistematicamente por
   debajo del pedido (interpola en espacio premultiplicado), asi que se
   compensa aqui. Verificado: con estos valores el render reproduce el perfil
   del Figma con 0.011 de error medio de alfa y 1.2 de color. */
.acceso::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(219, 219, 218, 0.678) 0%,
		rgba(192, 191, 188, 0.653) 10%,
		rgba(157, 155, 150, 0.597) 20%,
		rgba(123, 122, 115, 0.546) 30%,
		rgba(97, 93, 84, 0.526) 40%,
		rgba(70, 64, 50, 0.462) 50%,
		rgba(57, 50, 33, 0.427) 58%,
		rgba(57, 51, 36, 0.513) 70%,
		rgba(66, 62, 50, 0.600) 85%,
		rgba(63, 58, 43, 0.663) 100%);
	z-index: -1;
}

/* Contenido pegado abajo. Medido: el texto arranca a 36px del borde
   izquierdo y la caja de la ultima linea acaba a 39px del borde inferior. */
.acceso__contenido {
	position: relative;
	padding: 0 min(2.5vw, 36px) min(2.71vw, 39px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Flecha: 23x23 de tinta, y del borde inferior de la flecha al inicio de la
   caja del titulo hay 37.6px (medido igual en la tarjeta 1 y en la 3). */
.acceso__contenido .icon {
	width: min(1.597vw, 23px);
	height: min(1.597vw, 23px);
	flex: none;
	margin-bottom: min(2.64vw, 38px);
}

/* Titulo: Julius 36px con 39px de paso. Sin uppercase: en el Figma la primera
   letra es mas alta que el resto (la "P" de "Privada" mide 26 y las
   siguientes 23), que es lo que hace Julius Sans One al renderizar las
   minusculas como versalitas. Con text-transform: uppercase se perdia.
   El max-width fuerza los cortes del Figma ("Area / Privada",
   "Como / llegar", "Descubre / nuestros / programas"): tiene que estar entre
   203px (lo que ocupa "programas") y 231 (lo que ocuparia "Area Privada"
   entera). El 65.3% de los 329px de caja de contenido de la tarjeta
   (401 - 36 - 36) son 215px, el centro de ese margen. */
.acceso__titulo {
	font-family: var(--font-heading);
	text-transform: none;
	font-weight: 400;
	font-size: clamp(1.375rem, 2.5vw, 2.25rem);
	line-height: 1.0833;
	letter-spacing: 0;
	max-width: 65.3%;
	margin-bottom: min(1.32vw, 19px);
}

/* Cuerpo de tarjeta: 16px con 20px de paso; las tres lineas caen en y 1632,
   1652 y 1672 en las tres tarjetas. */
.acceso__texto {
	font-size: clamp(0.8125rem, 1.111vw, 1rem);
	line-height: 1.25;
	max-width: none;
}

/* ---------------------------------------------------------
   Contacto - responsive
   --------------------------------------------------------- */

/* 900px: el maquetado apila, igual que en el resto de la web. */
@media (max-width: 900px) {
	.contacto {
		padding-block: 56px 40px;
	}
	.contacto__grid {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 48px;
	}
	.contacto .section__title {
		margin-bottom: 28px;
	}
	.contacto__campo input {
		height: 48px;
	}
	.contacto__campo textarea {
		height: 220px;
	}
	.contacto__enviar .btn {
		height: 50px;
	}
	.contacto-accesos {
		padding-block: 40px 64px;
	}
	.contacto-accesos__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	/* Apiladas, las tarjetas dejan de ser cuadradas: si no, en movil son
	   torres de 400px de alto con el texto pegado abajo del todo. */
	.acceso {
		aspect-ratio: 16 / 13;
		border-radius: 27px;
	}
	.acceso__contenido {
		padding: 0 28px 32px;
	}
	.acceso__contenido .icon {
		width: 23px;
		height: 23px;
		margin-bottom: 24px;
	}
	.acceso__titulo {
		font-size: 1.75rem;
		max-width: 12ch;
		margin-bottom: 14px;
	}
}

@media (max-width: 560px) {
	.contacto__form {
		grid-template-columns: 1fr;
	}
	/* Con una sola columna el boton ya no puede ir en la segunda. */
	.contacto__enviar {
		grid-column: 1;
	}
	.acceso {
		aspect-ratio: auto;
	}
	.acceso__contenido {
		padding: 150px 24px 28px;
	}
	.acceso__titulo {
		max-width: 10ch;
	}
}

/* =========================================================
   Sala de Prensa
   ========================================================= */
/* ---------------------------------------------------------------
   Sala de Prensa: titulares y hero.
   Los tres titulares de seccion de esta pagina van a 44px de paso entre
   lineas, no a los 53.7 del titular generico: medido sobre las tres parejas
   de lineas del Figma (624->668, 1746->1790 y 2648->2692), las tres dan 44.
   El cuerpo no cambia: la mayuscula inicial mide 30px tanto en el Figma como
   en la web, o sea los 42.2px que ya pedia el CSS.
   --------------------------------------------------------------- */
.prensa-guias .section__title,
.prensa-comunicados__title,
.prensa-evidencia__title {
	line-height: 1.0425;
	/* El titular generico va sin espaciado (medido en Equipo), pero en esta
	   pagina el Figma lo aprieta: los glifos sueltos miden lo mismo en los dos
	   ("C" 25px de tinta, "E" 15), asi que el cuerpo es el mismo y lo que
	   cambia es el espaciado. Por minimos cuadrados sobre los seis renglones
	   (huecos 10/16/17/7/19/14 y diferencias de 14/18/20/9/20/16 px) sale
	   1.147px por hueco, o sea -0.027em. */
	letter-spacing: -0.027em;
}

/* Los dos titulares centrados llevan el corte a mano (ver la plantilla), asi
   que no necesitan tope de ancho; con el de 24ch la segunda linea se partia
   donde no toca. */
.prensa-comunicados__title,
.prensa-evidencia__title {
	max-width: none;
}

/* Hero de esta pagina: "Sala de Prensa" va en UNA linea (484px de tinta en el
   Figma, x=101..584), no en dos. El tope de 11ch del hero generico esta
   medido sobre los titulares cortos de las otras paginas y se mantiene. */
.page-hero--prensa .page-hero__title {
	max-width: none;
}

/* 24px: las dos lineas del subtitulo miden 587 y 484 de tinta en el Figma y
   411 y 339 en la web a 16.8px; las dos dan el mismo factor (1.428), o sea
   que cortan igual y el cuerpo es 16.8 x 1.428 = 24.0.
   Paso entre lineas de 31px (333 -> 364). */
.page-hero--prensa .page-hero__subtitle {
	font-size: 1.5rem;
	line-height: 1.3;
	max-width: none;
}
/* ---------------------------------------------------------------
   Aire de las tres bandas. El .section generico va a 64px arriba y abajo y
   aqui el Figma pide bastante mas. Las cotas salen de restar posiciones de
   tinta en el export (la caja de linea del titular se deduce de la mayuscula
   inicial, que cae 2-3px por debajo del borde de la caja):

     guias         banda 507..1634   titular en 592   fichas en 759    fin 1540
     comunicados   banda 1634..2535  titular en 1715  fotos en 1876    fin 2442
     evidencia     banda 2535..3552  titular en 2619  tarjetas en 2778 fin 3466

   Comprobacion: 85 + 109 + 58 + 781 + 94 = 1127 (guias), 81 + 88 + 73 + 566 +
   93 = 901 (comunicados) y 84 + 88 + 71 + 688 + 86 = 1017 (evidencia), que son
   los tres altos de banda del Figma.
   --------------------------------------------------------------- */
.prensa-guias {
	padding-block: 85px 94px;
}

/* El .split de esta pagina cierra en 58, no en los 91 del generico. Ojo: al
   alto del split se le suma el margin-bottom de 0.5em del propio h2 (21px),
   que va por dentro de la rejilla. */
.prensa-guias .split {
	margin-bottom: 58px;
}

.prensa-comunicados {
	padding-block: 81px 93px;
}

.prensa-comunicados__title {
	margin-bottom: 73px;
}

.prensa-evidencia {
	/* Abajo van 51 y no 86 porque .site-footer ya suma 35px de margin-top:
	   51 + 35 = los 86 que hay en el Figma de las tarjetas al pie. */
	padding-block: 84px 51px;
}

.prensa-evidencia__title {
	margin-bottom: 71px;
}

/* La tarjeta tiene que dar 324 clavados para que las dos filas sumen 688.
   Con .estudio a secas perdia contra la regla de mas abajo. */
.prensa-evidencia .estudio {
	padding-bottom: 37px;
}

/* El subtitulo del hero va en DOS lineas: "...guias practicas" (587px de tinta)
   y "fundamentadas en la ciencia de la longevidad." (484). Sin tope se va a una
   sola; con 620 corta donde el Figma. */
.page-hero--prensa .page-hero__subtitle {
	max-width: 620px;
}


.page-hero__subtitle {
	margin: 14px 0 0;
	font-size: 1.05rem;
	font-weight: 300;
	max-width: 46ch;
}

.recurso {
	display: grid;
	grid-template-columns: 294fr 928fr;
	gap: 20px;
	align-items: stretch;
}

.recurso + .recurso {
	/* Paso de 200px entre fichas con la caja en 181: el hueco es de 19. */
	margin-top: 19px;
}

.recurso--invertido {
	grid-template-columns: 928fr 294fr;
}

.recurso--invertido .recurso__foto,
.recurso--invertido .recurso__logo {
	order: 2;
}

.recurso--invertido .recurso__card {
	order: 1;
}

.recurso__foto {
	width: 100%;
	height: 100%;
	/* El <img> trae width/height de la base de datos (294x186) y con eso la
	   fila de la rejilla se iba a 186. La ficha mide 181 en el Figma. */
	aspect-ratio: 295 / 181;
	min-height: 181px;
	object-fit: cover;
	border-radius: var(--radius-card);
}

.recurso__logo {
	background: var(--color-dark);
	border-radius: var(--radius-card);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 181px;
	padding: 24px;
}

.recurso__logo img {
	width: 70%;
	max-width: 190px;
	height: auto;
}

.recurso__card {
	border: 1px solid rgba(46, 56, 58, 0.3);
	border-radius: var(--radius-card);
	padding: 24px 36px;
	display: flex;
	flex-direction: column;
}

.recurso__card h3 {
	font-family: var(--font-body);
	font-weight: 700;
	text-transform: none;
	/* 24px: el ancho de tinta de "Guia de Biomarcadores de Longevidad" es 433px
	   en el Figma y 317 a 17.6px, y 17.6 * 433/317 = 24.0. */
	font-size: 1.5rem;
	line-height: 1.25;
	margin: 0 0 0.5em;
}

.recurso__desc {
	/* Cuerpo del sistema. Las dos lineas cortan igual en Figma y web: 838/670 y
	   97/77 de tinta, y 12.8 * 1.2555 = 16.1. */
	font-size: 1rem;
	line-height: 1.25;
}

.recurso__desc p {
	margin: 0;
	max-width: 90ch;
}

.recurso__meta {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: auto 0 0;
	padding-top: 14px;
	/* Mismo cuerpo de 16px que el resto de la ficha. */
	font-size: 1rem;
}

.recurso__descarga {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
}

.recurso__descarga .icon {
	/* Escala con el cuerpo: 14px lo eran para 12, 18 para 16. */
	width: 18px;
	height: 18px;
}

/* Comunicados (banda gris) */
.prensa-comunicados {
	background: var(--color-light-gray);
}

.prensa-comunicados__title,
.prensa-evidencia__title {
	max-width: 24ch;
	margin-inline: auto;
}

/* Carrusel de comunicados.
   En el Figma hay una flecha a cada lado de la fila: la izquierda ocupa
   x=49..78 y la derecha x=1361..1390, o sea 30px de ancho y 20 de separacion
   hasta el contenido (que empieza en 98 y acaba en 1341). Las dos van a
   y=2130..2154, centradas a 12px por encima del centro de la fila. */
.carrusel {
	position: relative;
}

.carrusel__flecha {
	position: absolute;
	top: 50%;
	/* El centro de la flecha cae en y=2142 y el del carrusel (foto + hueco +
	   tarjeta, de 1875.6 a 2443.1) en 2159.4: 17px por encima. */
	transform: translateY(calc(-50% - 17px));
	width: 30px;
	height: 25px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-dark);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}

/* 20px de separacion hasta el contenido mas los 30 de la propia flecha: en el
   Figma la izquierda acaba en x=78 y el contenido arranca en 98, y la derecha
   arranca en 1361 con el contenido acabando en 1341. */
.carrusel__flecha--prev {
	left: -50px;
}

.carrusel__flecha--next {
	right: -50px;
}

.carrusel__flecha .icon--carrusel {
	width: 30px;
	height: 25px;
	display: block;
}

/* Sin sitio a donde ir. El Figma solo dibuja el estado activo; se atenuan para
   no dejar un boton que no hace nada sin ninguna senal. */
.carrusel__flecha[disabled] {
	opacity: 0.3;
	cursor: default;
}

/* Por debajo de 1200 el margen de pagina ya no da los 79px que necesitan las
   flechas (a 1100 quedan 75), asi que se ocultan y la fila se arrastra. */
@media (max-width: 1199px) {
	.carrusel__flecha {
		display: none;
	}
}

/* La pista: tres tarjetas a la vista de 401 con 20 de hueco (401x3 + 20x2 =
   1243) y las demas fuera, alcanzables con las flechas o arrastrando. */
.prensa-comunicados__grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 40px) / 3);
	gap: 20px;
	align-items: stretch;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* La barra no esta en el diseno y con las flechas no hace falta. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.prensa-comunicados__grid::-webkit-scrollbar {
	display: none;
}

.prensa-comunicados__grid:focus-visible {
	outline: 2px solid var(--color-dark);
	outline-offset: 4px;
}

.comunicado {
	scroll-snap-align: start;
}

/* Cuantas tarjetas caben a la vista. El Figma solo define el escritorio
   (tres); por debajo se reducen para que no queden ilegibles. */
@media (max-width: 1199px) {
	.prensa-comunicados__grid {
		grid-auto-columns: calc((100% - 20px) / 2);
	}
}

@media (max-width: 800px) {
	.prensa-comunicados__grid {
		grid-auto-columns: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.prensa-comunicados__grid {
		scroll-behavior: auto;
	}
}

.comunicado {
	display: flex;
	flex-direction: column;
	/* La foto acaba en y=2030 y la tarjeta arranca en 2051. */
	gap: 20px;
}

.comunicado__foto {
	width: 100%;
	height: auto;
	aspect-ratio: 401 / 156;
	object-fit: cover;
	border-radius: var(--radius-card);
}

.comunicado__card {
	border: 1px solid rgba(46, 56, 58, 0.3);
	border-radius: var(--radius-card);
	padding: 38px 35px 37px;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.comunicado__card h3 {
	font-family: var(--font-body);
	font-weight: 700;
	text-transform: none;
	/* 24px con 30 de paso: en el Figma el titular ocupa 4 lineas que arrancan en
	   2094, 2123, 2153 y 2183, y la altura de tinta da 16.8 * 23/16 = 24.2. */
	font-size: 1.5rem;
	line-height: 1.25;
	margin: 0 0 6px;
}

.comunicado__meta {
	/* Mismo texto en los dos: "15 de Mayo, 2026 - Comunicado Oficial" mide 271px
	   de tinta en el Figma y 190 a 11.2px, y 11.2 * 271/190 = 16.0. */
	font-size: 1rem;
	margin: 0 0 30px;
}

.comunicado__extracto {
	/* Cuerpo del sistema: las 4 lineas del Figma van cada 20px, que es 16 x 1.25. */
	font-size: 1rem;
	line-height: 1.25;
	margin: 0 0 32px;
}

.comunicado .link-more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	/* 19px hasta la flecha: el rotulo acaba en x=206 y la flecha arranca en 226. */
	gap: 19px;
	/* 15px. Descontando el hueco (19) y la flecha (17), que no escalan con el
	   cuerpo, el rotulo del Figma mide 72px de tinta en el comunicado y 266 en
	   el estudio, y el de la web 64 y 244: los factores son 1.125 y 1.090. */
	font-size: 0.9375rem;
	text-decoration: none;
}

.comunicado .link-more .icon {
	width: 17px;
	height: 17px;
}

/* Evidencia científica */
.prensa-evidencia__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* 20px entre columnas (612 + 20 + 612 = 1244) y 40 entre filas: la primera
	   acaba en y=3101 y la segunda arranca en 3142. */
	gap: 40px 20px;
	/* Las dos filas miden 324 en el Figma aunque la de abajo lleva titulares de
	   dos lineas en vez de tres: la rejilla las iguala. */
	grid-auto-rows: 1fr;
}

.estudio {
	border: 1px solid rgba(46, 56, 58, 0.3);
	border-radius: var(--radius-card);
	padding: 30px 36px 40px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.estudio .icon--estudio {
	/* Tinta de 40x41 en el Figma (x 134-173, y 2808-2848). */
	width: 40px;
	height: 41px;
	margin-bottom: 16px;
}

.estudio h3 {
	font-family: var(--font-body);
	font-weight: 700;
	text-transform: none;
	/* 24px con 30 de paso: las 3 lineas del Figma arrancan en 2871, 2902 y 2932,
	   y la altura de tinta da 16 * 24/16 = 24. */
	font-size: 1.5rem;
	line-height: 1.25;
	margin: 0 0 21px;
	max-width: none;
}

.estudio p {
	/* Cuerpo del sistema: las dos lineas del Figma van cada 20px (16 x 1.25). */
	font-size: 1rem;
	line-height: 1.25;
	margin: 0 0 24px;
	max-width: none;
}

.estudio .link-more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 19px;
	font-size: 0.9375rem;
	text-decoration: none;
}

.estudio .link-more .icon {
	width: 17px;
	height: 17px;
}

@media (max-width: 800px) {
	.recurso,
	.recurso--invertido {
		grid-template-columns: 1fr;
	}
	.recurso--invertido .recurso__foto,
	.recurso--invertido .recurso__logo {
		order: 0;
	}
	.recurso__foto {
		height: auto;
		aspect-ratio: 294 / 150;
	}
	.prensa-evidencia__grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Entrada (detalle de artículo y de comunicado)
   =========================================================
   Pantalla no incluida en el Figma: diseñada sobre el sistema existente.
   Ver design.md §5.c para el criterio. */

/* --- Barra de progreso de lectura ---
   El mismo gesto que la línea del timeline: una trayectoria que se traza.
   Es el único punto de color vivo de una página larga de texto, y por eso se
   permite aquí el degradado del acento pese a la regla de "un acento por
   vista": son 3px, no compite con ningún CTA. */
.entrada__progreso {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 40;
	background: rgba(46, 56, 58, 0.12);
	opacity: 0;
	transition: opacity 300ms ease;
}

.entrada__progreso.is-activa {
	opacity: 1;
}

.entrada__progreso span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--accent-gradient);
	transform-origin: left center;
}

/* --- Cabecera ---
   30/09/2026: un poco mas alta a peticion del cliente (+~45px). La altura la
   marcan el padding y el titular, no el min-height, asi que suben los tres. */
.entrada__hero {
	position: relative;
	width: 100%;
	min-height: 480px;
	display: flex;
	align-items: flex-end;
	border-radius: 0 0 var(--radius-dark-block) var(--radius-dark-block);
	overflow: hidden;
	background: var(--color-dark);
	color: var(--color-white);
	padding-block: 150px 72px;
	isolation: isolate;
}

.entrada__hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* Velo más denso abajo que en los heros de página: aquí hay tres niveles de
   texto encima (píldora, titular y fecha), no solo un rótulo. */
.entrada__hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(46, 56, 58, 0.55) 0%,
		rgba(46, 56, 58, 0.45) 35%,
		rgba(46, 56, 58, 0.82) 100%);
	z-index: -1;
}

.entrada__hero--plano::after {
	background: none;
}

.entrada__hero-inner {
	position: relative;
	width: 100%;
}

/* `flex` y no `inline-flex`: si es inline, la píldora se le engancha en la
   misma línea en vez de caer debajo. */
.entrada__volver {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 9px;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 26px;
	opacity: 0.85;
	transition: opacity 240ms ease;
}

.entrada__volver:hover {
	opacity: 1;
}

.entrada__volver .icon--atras {
	transition: transform 240ms var(--ease-vault, ease);
}

.entrada__volver:hover .icon--atras {
	transform: translate3d(-3px, 0, 0);
}

.entrada__volver .icon {
	width: 15px;
	height: 15px;
}

.entrada__pildora {
	border-color: rgba(255, 255, 255, 0.55);
	display: inline-block;
}

/* Oxygen bold y no Julius: es la voz del contenido, no la institucional.
   El índice ya trata así los títulos de artículo (.post-card__titulo). */
.entrada__titulo {
	font-family: var(--font-body);
	font-weight: 700;
	text-transform: none;
	font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3rem);
	line-height: 1.18;
	max-width: 20ch;
	margin: 20px 0 14px;
}

.entrada__fecha {
	font-size: 0.85rem;
	opacity: 0.85;
	margin: 0;
}

/* --- Cuerpo --- */
/* Ancho de lectura en px y no en `ch`: `ch` se calcula sobre el tamaño de
   fuente de cada elemento, así que la entradilla (1.2rem) y el cuerpo (1rem)
   arrancaban en columnas distintas. Todo lo que forma la columna de lectura
   comparte esta medida.
   30/09/2026: 640 -> 760 -> 920px a peticion del cliente (se seguia viendo
   estrecho en pantallas grandes). */
:root {
	--ancho-lectura: 920px;
}

.entrada__entradilla,
.entrada__cuerpo {
	max-width: var(--ancho-lectura);
	margin-inline: auto;
}

.entrada__entradilla {
	font-size: 1.2rem;
	font-weight: 300;
	line-height: 1.55;
	padding-top: 64px;
	margin-bottom: 0;
}

.entrada__cuerpo {
	padding-block: 64px;
	font-size: 1rem;
	line-height: 1.75;
}

.entrada--comunicado .entrada__cuerpo {
	padding-top: 32px;
}

/* Entradilla del artículo: el primer párrafo entra un punto más grande y
   ligero, que es como abre una pieza editorial. */
.entrada__cuerpo > p:first-of-type {
	font-size: 1.15rem;
	font-weight: 300;
	line-height: 1.6;
}

.entrada__cuerpo p {
	margin: 0 0 1.5em;
}

/* Los H2 recuperan Julius: dentro del artículo son la voz de la marca
   ordenando el contenido, y el filete superior repite el lenguaje de líneas
   finas del resto del sitio. */
.entrada__cuerpo h2 {
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
	margin: 2.4em 0 0.8em;
	padding-top: 28px;
	border-top: 1px solid rgba(46, 56, 58, 0.25);
}

.entrada__cuerpo h3 {
	font-family: var(--font-body);
	font-weight: 700;
	text-transform: none;
	font-size: 1.1rem;
	margin: 2em 0 0.6em;
}

.entrada__cuerpo ul,
.entrada__cuerpo ol {
	margin: 0 0 1.6em;
	padding-left: 0;
	list-style: none;
}

.entrada__cuerpo ol {
	counter-reset: pasos;
}

.entrada__cuerpo li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 0.7em;
}

/* Viñeta como punto de trayectoria, igual que los del timeline. */
.entrada__cuerpo ul li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-dark);
}

.entrada__cuerpo ol li::before {
	counter-increment: pasos;
	content: counter(pasos, decimal-leading-zero) '.';
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--font-heading);
	font-size: 0.85rem;
}

.entrada__cuerpo blockquote {
	margin: 2.4em 0;
	padding: 34px 32px;
	background: var(--color-dark);
	color: var(--color-white);
	border-radius: 30px;
	font-size: 1.15rem;
	line-height: 1.5;
}

.entrada__cuerpo blockquote p {
	margin: 0;
	max-width: 40ch;
}

/* Recuadros de cierre de los articulos del blog ("Vault_Blog.pdf"):
   - .entrada__evidencia: "Lo que sabemos / Lo que aun se investiga". Caja gris
     clara como la de Contacto de prensa, etiquetas en el tono de acento.
   - .entrada__accion: "Una accion para esta semana". Misma banda oscura que
     el blockquote, con la etiqueta en el acento claro. */
.entrada__evidencia,
.entrada__accion {
	margin: 2.4em 0;
	padding: 30px 32px;
	border-radius: 30px;
}

.entrada__evidencia {
	background: var(--color-light-gray);
}

.entrada__evidencia p {
	margin: 0;
}

.entrada__evidencia p + p {
	margin-top: 0.9em;
}

.entrada__evidencia strong {
	color: var(--accent-start);
}

.entrada__accion {
	background: var(--color-dark);
	color: var(--color-white);
	font-size: 1.05rem;
	line-height: 1.6;
}

.entrada__accion p {
	margin: 0;
}

.entrada__accion strong {
	color: var(--accent-end);
}

/* Las imágenes se salen de la columna de lectura: da respiro editorial sin
   romper la retícula (el tope es el ancho del container). */
.entrada__cuerpo img,
.entrada__cuerpo figure {
	width: min(100vw - var(--gutter) * 2, 900px);
	max-width: none;
	margin-inline: calc(50% - min(50vw - var(--gutter), 450px));
	margin-block: 2.6em;
	border-radius: 30px;
}

.entrada__cuerpo figure img {
	width: 100%;
	margin: 0;
	border-radius: 30px;
}

.entrada__cuerpo figcaption {
	font-size: 0.8rem;
	opacity: 0.75;
	margin-top: 12px;
	text-align: center;
}

.entrada__cuerpo a:not(.btn) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Pie de la entrada --- */
.entrada__categorias {
	max-width: var(--ancho-lectura);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.entrada__categorias a {
	border: 1px solid rgba(46, 56, 58, 0.35);
	border-radius: 999px;
	padding: 5px 16px;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: background-color 240ms ease, color 240ms ease;
}

.entrada__categorias a:hover {
	background: var(--color-dark);
	color: var(--color-white);
}

.entrada__cta {
	margin-top: 56px;
}

/* Bloque de contacto de prensa (solo comunicados) */
.entrada__prensa {
	max-width: var(--ancho-lectura);
	margin: 8px auto 0;
	padding: 36px 34px;
	background: var(--color-light-gray);
	border-radius: 30px;
}

/* Mismo aire bajo la caja que sobre el texto: del hero a la entradilla se ven
   91px (64 de padding + el interlineado) y de la caja a "Otros comunicados"
   solo quedaban 44 (los 24 de margen de la seccion + 20). 47 + 44 = 91. */
.entrada--comunicado .entrada__prensa {
	margin-bottom: 47px;
}

.entrada__prensa h2 {
	font-size: 1.3rem;
	margin: 0 0 0.7em;
}

.entrada__prensa p {
	font-size: 0.9rem;
	margin: 0 0 1em;
}

.entrada__prensa-datos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	font-size: 0.9rem;
	margin-bottom: 1.6em !important;
}

.entrada__prensa-datos a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entrada__relacionados {
	margin-top: 24px;
}

/* En el detalle de comunicado "Otros comunicados" es la ultima seccion y va en
   gris. Con los 35px de margen del pie asomaba una tira del fondo de pagina y
   las esquinas del pie apoyaban sobre ese fondo claro. Aqui el gris baja por
   debajo del pie (margen negativo del radio) y el pie se pinta encima, asi las
   esquinas apoyan sobre el gris. Entre tarjetas y pie quedan los 99px del Figma. */
.single-comunicado .entrada__relacionados {
	padding-bottom: calc(99px + var(--radius-dark-block));
	margin-bottom: calc(-1 * var(--radius-dark-block));
}

.single-comunicado .site-footer {
	position: relative;
	margin-top: 0;
}

@media (max-width: 700px) {
	.entrada__hero {
		min-height: 410px;
		padding-block: 126px 48px;
	}
	.entrada__cuerpo blockquote,
	.entrada__evidencia,
	.entrada__accion {
		padding: 26px 24px;
	}
}

/* =========================================================
   Longevidad — indice del blog (home.php)
   Reescrito sobre el Figma (paginas_VAULT/longevidad.png, lienzo 1440).
   Todas las medidas de los comentarios estan en ese lienzo.

   Rejilla de la pagina, medida: contenido de x=98 a x=1341 (1243).
     - destacados: 2 columnas de 611,5 con hueco de 20
     - rejilla:    3 columnas de 401 con hueco de 20 (401*3 + 20*2 = 1243)
   Las dos ya cuadraban; lo que estaba mal era la tipografia y las alturas.

   Cuerpos de texto, despejados por ancho de tinta contra la fuente real
   renderizada a 100px (ese mismo metodo da 0,740 de ratio de mayusculas para
   Julius Sans One, que es el valor ya documentado: se valida solo):
     intro     20px  (tinta 582 / 2909 a 100px)
     titulo destacado 32px  (tinta 366 / 1146; mayuscula 'F' 23px / 0,72)
     titulo rejilla   24px  (tinta 252 / 1052; mayuscula 'N' 17px / 0,72)
     fecha     16px  (tinta 110 / 690)
     extracto  16px  (tinta 451 / 2813 y 311 / 1942)
     pastilla  14px  (tinta 116 / 830; mayuscula 10px / 0,73)
     LEER MAS  16px  (mayuscula 'LEER' 12px / 0,73; sin espaciado: la tinta
                      medida, 72px, es la del texto pelado a 16px)
   ========================================================= */

/* 82px arriba y no los 64 del .section generico: la primera linea del intro va
   en y=594 y con 64 caia en 576.
   Abajo 31 y no 66: del boton (acaba en 2364) al pie (empieza en 2430) hay 66,
   pero 35 de esos ya los pone el propio pie con su margin-top, que es global y
   no se toca porque lo comparten paginas ya verificadas. 66 - 35 = 31.
   Va como section.blog y NO como .blog: en el indice del blog body_class() le
   pone la clase "blog" tambien al <body>, y la regla suelta le metia el relleno
   a la pagina entera. */
section.blog {
	padding-block: 82px 31px;
}

/* 20px y no 16: el interlineado medido son 26px (lineas en y=594, 620 y 645).
   El ancho de corte va entre 617 (linea 2, la mas larga) y 647 (por encima de
   ese valor "actual." subiria a la linea 1 y el corte dejaria de coincidir). */
.blog__intro {
	text-align: center;
	font-size: 1.25rem;
	line-height: 1.3;
	max-width: 630px;
	margin: 0 auto 81px;
}

.blog__destacados {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}

.blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* 51px entre las dos filas del indice, no 20: la fila de destacados acaba en
   y=1503,5 y las fotos de la rejilla empiezan en 1555. Va con el selector de
   adyacencia y no suelto en .blog__grid porque single.php usa esa misma rejilla
   para los articulos relacionados, y alli este hueco no pinta nada. */
.blog__destacados + .blog__grid {
	margin-top: 51px;
}

/* Hueco foto -> cuerpo: 21px (foto hasta 1134,5 y borde del cuerpo en 1155,5
   en la destacada; 1870,5 y 1892,5 en la rejilla). */
.post-card {
	display: flex;
	flex-direction: column;
	gap: 21px;
}

/* Proporciones medidas: destacada 612x387, rejilla 402x316. Radio 30px
   (ajuste por minimos cuadrados sobre la esquina: 29,1 con el sesgo del
   metodo, que el boton calibra en -0,7). */
.post-card__img {
	width: 100%;
	height: auto;
	aspect-ratio: 612 / 387;
	object-fit: cover;
	border-radius: 30px;
}

.blog__grid .post-card__img {
	aspect-ratio: 402 / 316;
}

/* Borde de 1px al 50%, no al 30%: el pixel del borde mide (138,143,144), que
   despejado sobre el fondo da alfa 0,503 en los tres canales. Se pone en rgba y
   no como 0.5px de color solido: Chrome no reparte medio pixel, lo pinta entero
   y el borde salia al doble de oscuro que en el Figma. El boton de "cargar mas"
   mide lo mismo y usa la misma construccion.
   Radio 24px (ajuste 23,6 en dos tarjetas distintas, mas el sesgo de -0,7).
   Sangrado 30px arriba y abajo y 37 a los lados: el texto arranca en x=135 con
   la tarjeta en x=98. */
.post-card__body {
	border: 1px solid rgba(46, 56, 58, 0.5);
	border-radius: 24px;
	padding: 30px 37px 36px;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* OJO: .post-card__pill no es solo del indice. El hero de entrada la reutiliza
   (template-parts/entrada-hero.php, con .entrada__pildora encima, que le
   recolorea el trazo). Por eso la regla suelta se deja EXACTAMENTE como estaba
   y todo lo medido en el Figma de Longevidad va acotado a .post-card. */
.post-card__pill {
	border: 1px solid rgba(46, 56, 58, 0.35);
	border-radius: 999px;
	padding: 4px 14px;
	font-size: 0.68rem;
}

/* Caja de 155x27 con el texto centrado: las cuatro pastillas claras miden lo
   mismo (x 134->288, 555->709, 976->1130) con textos de 99 a 127 de tinta, o
   sea que el ancho es fijo. Se pone como min-width y no como width porque la
   oscura del Figma ya se sale a 180 con "4 min - Biomarcadores": una categoria
   larga tiene que poder crecer en vez de recortarse.
   Sin borde: la fila de arriba de la pastilla mide (217,217,217) clavado, que
   es el relleno; si llevara trazo saldria mas oscura. */
.post-card .post-card__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 155px;
	border: 0;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 0.875rem;
	/* 27px de alto: 15 de linea mas 6+6 de sangrado. */
	line-height: 15px;
	background: var(--color-light-gray);
}

/* 32px en las destacadas. Interlineado 1,25: las dos lineas del titulo van de
   descendente a descendente 40px (1270 -> 1310). */
.post-card__titulo {
	font-family: var(--font-body);
	font-weight: 700;
	text-transform: none;
	font-size: 2rem;
	line-height: 1.25;
	margin: 20px 0 0;
}

/* 24px en la rejilla (mayuscula 'N' de 17px). */
.blog__grid .post-card__titulo {
	font-size: 1.5rem;
	margin-top: 28px;
}
.post-card__titulo a {
	color: inherit;
	text-decoration: none;
}

/* 16px, como el resto del sistema. Antes iba a 0,75rem (12px). */
.post-card__fecha {
	font-size: 1rem;
	line-height: 1.25;
	margin: 4px 0 0;
}

/* 16px con interlineado 1,25: las lineas van cada 20px (1365, 1385, 1405). */
.post-card__extracto {
	font-size: 1rem;
	line-height: 1.25;
	margin: 23px 0 0;
}

/* En el Figma no va subrayado y no lleva espaciado entre letras; la flecha mide
   18px y queda a 20px del texto. Va acotado a .post-card para no tocar el
   .link-more general, que lo comparten paginas ya verificadas. */
.post-card .link-more {
	margin-top: auto;
	padding-top: 26px;
	display: inline-flex;
	align-items: center;
	gap: 20px;
	font-size: 1rem;
	line-height: 1.25;
	letter-spacing: 0;
	text-decoration: none;
	color: var(--color-dark);
}

.post-card .link-more .icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

/* En el Figma las tarjetas de la rejilla llevan los huecos internos un poco mas
   abiertos que la destacada, aunque el tipo sea mas pequeno. Medido de tinta a
   tinta sobre el lienzo: de la fecha al extracto van 36px (28 en la destacada) y
   del extracto a "LEER MAS" 35 (32). Por eso la rejilla tiene sus propios
   valores en vez de heredar los de arriba. */
.blog__grid .post-card__fecha {
	margin-top: 5px;
}

.blog__grid .post-card__extracto {
	margin-top: 31px;
}

.blog__grid .post-card .link-more {
	padding-top: 33px;
}

.blog__grid .post-card__body {
	padding-bottom: 37px;
}

/* Destacado oscuro: la foto ocupa toda la tarjeta y el texto va encima, abajo.
   Sin min-height: la fila es 'stretch' y quien manda en la altura (757px) es la
   columna de al lado (387 de foto + 20 de hueco + 348 de cuerpo = 755). */
.post-card--oscuro {
	position: relative;
	border-radius: 30px;
	overflow: hidden;
	color: var(--color-white);
	justify-content: flex-end;
	isolation: isolate;
	gap: 0;
}

.post-card--oscuro .post-card__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.post-card--oscuro::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(46, 56, 58, 0.05) 30%,
		rgba(46, 56, 58, 0.55) 70%,
		rgba(46, 56, 58, 0.78) 100%);
	z-index: -1;
}

.post-card--oscuro .post-card__body {
	border: 0;
	flex: 0 0 auto;
	/* 42 abajo: "LEER MAS" acaba en 1456 y la tarjeta en 1504. */
	padding-bottom: 42px;
}

/* Doble clase para ganarle a .post-card .post-card__pill de arriba. */
.post-card.post-card--oscuro .post-card__pill {
	background: rgba(255, 255, 255, 0.18);
	/* 180 y no 155: la pastilla de la oscura es mas ancha en el Figma (va de
	   x=766 a 945). Sigue siendo un minimo, asi que una categoria larga crece. */
	min-width: 180px;
}

/* La destacada oscura tampoco comparte los huecos de la clara: medidos de tinta
   a tinta, de la pastilla al titulo van 35px (29 en la clara), del titulo a la
   fecha 19 (12), de la fecha al extracto 36 (28), del extracto a "LEER MAS" 41
   (32) y de ahi al borde de la tarjeta 48 (41,5). En el Figma las tres variantes
   estan espaciadas distinto; esto reproduce la oscura. */
.post-card--oscuro .post-card__titulo {
	margin-top: 28px;
}

.post-card--oscuro .post-card__fecha {
	margin-top: 5px;
}

.post-card--oscuro .post-card__extracto {
	margin-top: 31px;
}

.post-card--oscuro .link-more {
	padding-top: 35px;
}

.post-card--oscuro .link-more {
	color: var(--color-white);
}

/* El boton de "cargar mas". OJO CON LA ESPECIFICIDAD: home.php le pone las dos
   clases, "cta-banda blog__cargar", y .cta-banda es un componente compartido
   (Servicios, Que evaluamos, single) que esta MAS ABAJO en este archivo, o sea
   que con la misma especificidad ganaria el. Por eso estas reglas van acotadas
   con section.blog delante: no basta con .blog__cargar.
   El de Longevidad no es igual que el de Servicios: aqui no lleva espaciado
   entre letras, el hueco al icono es 17 y el icono 22 (alli 0,08em, 5 y 14).

   Ocupa exactamente la columna central de la rejilla (x 519->920, 402 de ancho)
   y va centrado. Se monta sobre la misma rejilla que .blog__grid en vez de con
   un ancho propio: dos construcciones distintas para alinear lo mismo acaban
   separandose. */
section.blog .blog__cargar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 67px 0 0;
}

/* 53px de alto, medido. Sin espaciado entre letras: la tinta del texto son
   186px, que es "CARGAR MAS ARTICULOS" a 16px sin tracking (lo que sobraba en
   la primera medida era el icono, que se habia colado en la ventana). */
section.blog .blog__cargar a {
	grid-column: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 17px;
	min-height: 53px;
	border: 1px solid rgba(46, 56, 58, 0.5);
	border-radius: var(--radius-btn);
	padding: 8px 20px;
	font-size: 1rem;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-dark);
}

/* 25 y no 22: la tinta del icono mide 22x25 en el Figma, pero el trazado no
   llena su viewBox de 24. A 25px de caja salen 10,38 de radio y 1,46 de trazo,
   que es justo lo medido. */
section.blog .blog__cargar .icon {
	width: 25px;
	height: 25px;
	flex: 0 0 auto;
}

/* Mientras no haya una segunda pagina el boton se pinta igual (es lo que manda
   el Figma) pero sin enlace. Se deja con el mismo aspecto a proposito; lo unico
   que cambia es que no hace de puntero, para no prometer un clic que no hay.
   Se activa solo en cuanto haya mas articulos de los que caben en una pagina. */
section.blog .blog__cargar .blog__cargar--inactivo {
	cursor: default;
}

@media (max-width: 900px) {
	.blog__destacados {
		grid-template-columns: 1fr;
	}
	.blog__grid {
		grid-template-columns: 1fr;
		margin-top: 20px;
	}
	.post-card--oscuro {
		min-height: 420px;
	}
	section.blog .blog__cargar {
		grid-template-columns: 1fr;
	}
	section.blog .blog__cargar a {
		grid-column: 1;
	}
}

/* =========================================================
   Instalaciones
   ========================================================= */
/* 77px por arriba y no los 64 de .section: en el Figma la rejilla arranca en 584
   y el hero acaba en 507. */
.inst-intro {
	padding-block: 77px 64px;
}

.inst-intro__grid {
	display: grid;
	grid-template-columns: 345fr 550fr 345fr;
	gap: 48px;
	align-items: start;
}

.inst-intro__foto {
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}

/* La segunda foto va descolgada respecto a la primera, como en el diseño. */
/* 185px medidos en el Figma (la foto derecha arranca en 769 y la rejilla en 584). */
.inst-intro__foto--baja {
	margin-top: 185px;
}

/* 111px, no 56. Medido tomando como referencia el borde superior de la foto de
   la izquierda, que es donde arranca la rejilla: en el Figma la primera linea del
   titular cae 118px por debajo de ese borde y aqui caia a 63. */
.inst-intro__centro {
	text-align: center;
	padding-top: 111px;
}

/* Titular nuevo del cliente (30/09/2026): "Un espacio unico, concebido para
   ofrecerte la mejor experiencia". Duplica en largo al del Figma ("Un espacio
   construido para lo que viene", 46px y tope 10em) y con aquellas medidas caia
   en 6 lineas de una o dos palabras. Baja a 35px (2.43vw a 1440), ocupa toda la
   columna y se equilibra con text-wrap: balance: 4 lineas parejas de 1024 a 1920.
   El hueco hasta el parrafo baja de 1.4em a 1em para que el bloque quede
   centrado entre las dos fotos. */
.inst-intro__centro h2 {
	font-size: clamp(1.5rem, 2.43vw, 2.1875rem);
	line-height: 1.17;
	text-wrap: balance;
	margin: 0 auto 1em;
}

/* 16px, no 13.6. Es el mismo cuerpo que el resto de la web; aqui estaba puesto
   en 0.85rem. Columna 25.4em = 406px, centro de la ventana 400-411 que da los
   cortes del Figma. Interlineado 1.25 (20px medidos). */
.inst-intro__centro p {
	font-size: clamp(0.875rem, 1.111vw, 1rem);
	line-height: 1.25;
	max-width: 25.4em;
	margin-inline: auto;
}

/* Foto a sangre con tarjeta blanca superpuesta */
.inst-espacio__bleed {
	position: relative;
}

/* El Figma recorta la foto a 1440x676 (proporcion 2.13). El archivo es 2880x1478,
   o sea 1.95, y sin recorte la franja salia 62px mas alta. */
.inst-espacio__bleed > img {
	width: 100%;
	/* 709 y no 676: la foto no acaba en un canto duro, se desvanece.
	   Medido por el CONTRASTE de cada fila (que es proporcional a la opacidad y
	   no depende del brillo de la foto, al contrario que mi primer intento):
	   opaca hasta y=1640 y transparente en y=1960, con la foto empezando en 1251.
	   Ajuste por minimos cuadrados, error medio del 5%. */
	/* Alto congelado a partir de 1440, igual que ya se hizo con el ancho del
	   contenido. 709/1440 = 49.24vw. Con solo la proporcion, en una pantalla de
	   1920 la foto crecia a 945px mientras la tarjeta blanca se quedaba en 401
	   (su letra topa en 16px), y el hueco entre ambas pasaba de 25px a 169. */
	height: min(49.24vw, 709px);
	object-fit: cover;
	/* El difuminado inferior: 320px de rampa, que sobre los 709 de alto arrancan
	   al 54.9%. Arriba el canto es nitido, solo redondeado. */
	-webkit-mask-image: linear-gradient(to bottom, #000 54.9%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 54.9%, transparent 100%);
	/* 33px: ajustado sobre la curva de las dos esquinas superiores del Figma
	   (error medio 1.2px; con 50 el error sube a 7 y con 16 a 8.8). La franja va
	   a sangre y aun asi lleva las esquinas redondeadas, igual que el hero. */
	border-radius: 33px;
	display: block;
}

.inst-espacio__bleed .container {
	position: absolute;
	inset: 0;
}

/* Cuadrada de 401x401, como en el Figma, con el texto centrado en vertical y
   37px de margen lateral. El cuerpo es 16px, medido sobre las 11 lineas de la
   tarjeta del Figma (15.8-15.9 en todas); estaba en 0.8rem = 12.8.
   Arranca al 30.3% de la franja de foto, no al 18%. */
.inst-espacio__card {
	position: absolute;
	/* 28.8% del alto de la foto (1456 sobre 1251..1964). */
	top: 28.8%;
	left: var(--gutter);
	/* 25.06em = los 401px del diseno cuando la letra esta a su maximo. En em y no
	   en px: el padding tambien va en em, y con el ancho fijo la columna de texto
	   cambiaba al estrecharse la pantalla y se movian los cortes de linea. */
	width: min(25.06em, 80%);
	background: var(--color-white);
	border-radius: var(--radius-card);
	/* El alto sale del padding y no de aspect-ratio (que el navegador no aplica
	   en esta combinacion): 13 lineas a 20px mas 16 de separacion entre parrafos
	   son 276px, y con 3.9em (62.5px) arriba y abajo da los 401 del Figma.
	   En em para que escale con la letra. 2.31em = los 37px laterales. */
	padding: 3.9em 2.31em;
	font-size: clamp(0.875rem, 1.111vw, 1rem);
	line-height: 1.25;
}

.inst-espacio__card p:last-child {
	margin-bottom: 0;
}

/* Fila camilla + tarjeta oscura, superpuesta al borde inferior de la foto grande */
.inst-gym {
	position: relative;
	display: grid;
	/* 822 + 401 = 1223, que son los 1243 de contenido menos los 20 de hueco. La
	   tarjeta oscura mide 401 en el Figma, igual que la blanca. */
	grid-template-columns: 822fr 401fr;
	gap: 20px;
	align-items: stretch;
	/* La fila se monta 83px sobre la caja de la foto (que acaba en 1964; esta fila
	   arranca en 1882). Escala con la pantalla igual que el alto de la foto y se
	   congela con ella a partir de 1440: 78/1440 = 5.42vw. */
	margin-top: calc(-1 * min(5.42vw, 78px));
}

.inst-gym > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 30px;
}

.inst-gym__card {
	background: var(--color-dark);
	color: var(--color-white);
	border-radius: 30px;
	/* Mismo patron que la tarjeta blanca: 37px de margen interior (2.31em) y
	   cuerpo de 16px. Estaba en 0.8rem = 12.8, y por eso el texto entraba en 10
	   lineas donde el Figma tiene 13. Interlineado 1.25 (20px medidos). */
	padding: 2.31em;
	font-size: clamp(0.875rem, 1.111vw, 1rem);
	line-height: 1.25;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.inst-gym__card p:last-child {
	margin-bottom: 0;
}

/* Mosaico final */
/* En el Figma el mosaico arranca 25px despues de la fila del gimnasio, no los
   64 del padding generico de .section. */
/* Sin padding inferior: la separacion con la seccion siguiente la pone ella
   (.inst-tec, 115px medidos en el Figma). Con los 64 de .section se sumaban y
   daban 180. */
.inst-mosaico {
	padding-block: 25px 0;
}

.inst-mosaico__fila {
	display: grid;
	gap: 20px;
	align-items: stretch;
}

/* 25 en vertical y 20 en horizontal: son distintos en el diseno. Las filas del
   Figma miden 401 de alto y van separadas 25. */
.inst-mosaico__fila + .inst-mosaico__fila {
	margin-top: 25px;
}

.inst-mosaico__fila--tres {
	grid-template-columns: 402fr 398fr 402fr;
}

.inst-mosaico__fila--dos {
	grid-template-columns: 402fr 820fr;
}

.inst-mosaico__fila img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	border-radius: 30px;
}

.inst-mosaico__texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 24px;
	font-size: 0.9rem;
}

.inst-mosaico__texto p {
	max-width: 34ch;
}

@media (max-width: 900px) {
	.inst-intro__grid {
		grid-template-columns: 1fr 1fr;
	}
	.inst-intro__centro {
		grid-column: 1 / -1;
		grid-row: 1;
		padding-top: 0;
	}
	.inst-intro__foto--baja {
		margin-top: 0;
	}
}

/* En el movil las dos fotos verticales una al lado de otra se quedan en 170px
   de ancho: miniaturas. Apiladas ocupan los 342 completos. */
@media (max-width: 600px) {
	.inst-intro__grid {
		grid-template-columns: 1fr;
	}
	.inst-espacio__card {
		position: static;
		width: auto;
		/* apilada deja de ser cuadrada: el alto lo marca el texto */
		aspect-ratio: auto;
		margin: -60px var(--gutter) 0;
	}
	.inst-espacio__bleed .container {
		position: static;
	}
	.inst-gym,
	.inst-mosaico__fila--tres,
	.inst-mosaico__fila--dos {
		grid-template-columns: 1fr;
	}
	.inst-gym {
		margin-top: 32px;
	}
	.inst-mosaico__fila img {
		height: auto;
		aspect-ratio: 4 / 3;
	}
	.inst-mosaico__texto {
		padding: 24px 0;
	}
}

/* =========================================================
   Qué evaluamos
   ========================================================= */
/* Medido en el Figma: la banda va de y=903 a 1525, la columna izquierda de
   x=98 a 710 (612) y la derecha de 763 a 1341 (578), con 53 de hueco. */
.riesgos {
	/* Sin relleno abajo: la foto sobresale de la banda y es su margen negativo
	   el que cierra la seccion en el 1525 del diseno. */
	padding-block: 77px 0;
}

.riesgos__grid {
	display: grid;
	grid-template-columns: 612fr 578fr;
	gap: 4.26%;
	align-items: start;
}

/* 47px, el tamano de titular del sistema. Estaba en 2rem (32).
   Sin uppercase: comparando glifo a glifo con el Figma, la "R" mide igual en
   los dos (28 y 27 px) pero las demas letras son un 13% mas estrechas en el
   diseno. O sea que el resto son versalitas, no mayusculas. Con el uppercase
   heredado de h2 la linea se iba de 497 a 526px. */
.riesgos__grid h2 {
	font-size: clamp(1.75rem, 3.36vw, 3.025rem);
	text-transform: none;
	line-height: 1.1;
	margin: 0 0 54px;
}

/* 45px, no 1.35rem (21.6). Va en mayusculas de verdad (el titular de al lado
   deja ver la "R" mas alta que el resto, este no), asi que el cuerpo sale de
   medir la tinta de las tres lineas ya transformadas: 43.2, 43.6 y 43.6, mas
   la correccion del calibrado.
   Sin max-width: con 45px la columna de 612 ya da el corte del Figma
   (LO QUE NO SE VE / TAMBIEN CONDICIONA / TU FUTURO.); con las 18ch de antes
   partia en cuatro lineas cortas. */
.riesgos__sub {
	font-family: var(--font-heading);
	text-transform: uppercase;
	font-size: clamp(1.4rem, 3.13vw, 2.81rem);
	line-height: 1.18;
	max-width: none;
	margin: 0 0 24px;
}

/* La foto (x 98..710, y 1269..1610) se sale 85px por debajo de la banda. */
.riesgos__grid img {
	width: 100%;
	height: auto;
	border-radius: 30px;
	margin-bottom: calc(-1 * min(5.9vw, 85px));
}

/* 16px con 27 de interlineado, medido sobre los cortes de linea del primer
   parrafo: las cuatro lineas dan 15.92, 15.85, 15.95 y 15.76. Estaba en 0.9rem. */
/* La columna de la derecha arranca 11px por debajo de la izquierda. */
.riesgos__texto {
	font-size: 1rem;
	line-height: 1.7;
	max-width: none;
	padding-top: 11px;
	/* La caja del Figma se pasa 7px del borde de contenido. Con los 578 justos
	   de la columna el navegador parte "...esperar a que" una palabra antes;
	   resolviendo por los cortes de los dos parrafos largos, la ventana que
	   reproduce el diseno es 580..590. */
	margin-right: -7px;
}

.riesgos__texto p {
	margin: 0 0 1.67em;
}

.riesgos__texto p:last-child {
	margin-bottom: 0;
}

/* CTA suelta entre secciones (la de riesgos vive sobre fondo claro).
   Tiene que salvar los 85px que sobresale la foto y dejar los 69 que hay en el
   Figma entre el pie de la foto (1610) y la caja del boton (1679). */
.riesgos + .container > .cta-banda {
	margin: calc(min(5.9vw, 85px) + 69px) 0 0;
}

/* El boton de esta pagina NO lleva el 0.08em de espaciado entre letras que si
   lleva el de Servicios: midiendo la tinta del texto del Figma salen 866px y
   la misma cadena a 16px con espaciado cero mide 867.8 (381.6 la parte en
   negrita mas 486.2 la fina). Con el 0.08em la caja se iba de 970 a 1053.
   Alto 53 en el diseno: 13.5 de relleno arriba y abajo, 24 de caja de linea y
   1 de borde por lado. Va acotado a esta pagina para no mover Servicios. */
.riesgos + .container > .cta-banda a,
.metricas .cta-banda a,
.palancas .cta-banda a {
	letter-spacing: 0;
	padding-block: 13.5px;
	/* 20px entre el final del texto (x=1131) y la flecha (1151), medidos en el
	   Figma. Los 5px de Servicios son de esa otra pagina. */
	gap: 20px;
}

/* Los botones de las metricas y el del final no se ajustan al texto: ocupan
   toda la columna (612 y 1243 en el Figma), con el texto alineado a la
   izquierda y el conjunto texto+flecha centrado en la caja. */
.metricas .cta-banda a,
.palancas .cta-banda a {
	width: 100%;
	justify-content: center;
	text-align: left;
}

/* Caja de 90px de alto: dos lineas de 24 mas 20 de relleno por lado. */
.metricas .cta-banda a {
	padding-block: 20px;
}

/* El del final mide 74 de alto: una linea de 24 y 24 de relleno por lado. */
.palancas .cta-banda a {
	padding-block: 24px;
}

/* .cta-banda--bloque ya pide margen 0, pero esta declarado antes que la regla
   generica .cta-banda { margin: 44px 0 0 } y con la misma especificidad, asi
   que perdia. Esos 44px colados hacian que la fila midiera 726 en vez de 682. */
.metrica__lado .cta-banda--bloque {
	margin: 0;
}

.riesgos + .container > .cta-banda .icon,
.metricas .cta-banda .icon,
.palancas .cta-banda .icon {
	/* La flecha del Figma ocupa 16x17, no 14x14. */
	width: 17px;
	height: 17px;
}

/* Las Dos Grandes Métricas.
   Medido en el Figma: la tarjeta va de x=98 a 709 y la foto de 730 a 1341, o
   sea dos columnas iguales con 20 de hueco (estaba en 596/612, que dejaba la
   tarjeta en 603 y la foto en 619). */
.metricas__title {
	/* 48px: "Las Dos Grandes" mide 423 de tinta y "Metricas" 214, que dan 48.4
	   y 47.9. Estaba en 42.2. */
	font-size: clamp(1.75rem, 3.36vw, 3.025rem);
	line-height: 1.1;
	/* En em para que acompane al cuerpo: a 48px son 508, que dejan pasar
	   "Las Dos Grandes" (433) y parten antes de "Metricas", como el Figma.
	   Con las 16ch de antes la caja caia en 430 y salian tres lineas. */
	max-width: 10.5em;
	/* En el Figma la primera metrica arranca en y=1991 y la segunda linea del
	   titulo acaba en 1902. */
	margin-bottom: 75px;
	margin-inline: auto;
}

/* Titulo en 1815 y cierre de la seccion 80px por debajo de la segunda metrica
   (que acaba en 3401, y la banda gris arranca en 3481). */
.metricas {
	padding-block: 75px 80px;
}

.metrica {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}

/* En el Figma la primera metrica acaba en 2673 y la segunda empieza en 2718. */
.metrica + .metrica {
	margin-top: 45px;
}

.metrica--invertida {
	grid-template-columns: 1fr 1fr;
}

.metrica--invertida .metrica__card {
	order: 2;
}

.metrica--invertida .metrica__lado {
	order: 1;
}

/* Margen interior de 37 (el texto arranca en x=135 y la tarjeta en 98) y
   contenido centrado en vertical: en las dos tarjetas del Figma sobra
   practicamente lo mismo arriba que abajo (91/91 en la primera, 95/93 en la
   segunda), porque el alto lo manda la columna de la foto. */
.metrica__card {
	border: 1px solid rgba(46, 56, 58, 0.3);
	border-radius: 30px;
	padding: 40px 37px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* 40.5px, no 1.6rem (25.6). "Capacidad funcional" mide 455 de tinta.
   Sin uppercase: en el Figma solo la primera letra es mayuscula y el resto
   versalitas, como en los demas titulares de la pagina. */
.metrica__card h3 {
	font-size: clamp(1.5rem, 2.81vw, 2.53rem);
	text-transform: none;
	line-height: 1.1;
	margin: 0 0 21px;
}

/* 22px, no 0.95rem (15.2), y 26 entre lineas. */
.metrica__sub {
	font-family: var(--font-heading);
	text-transform: uppercase;
	font-size: clamp(1rem, 1.53vw, 1.375rem);
	line-height: 1.18;
	/* Sin tope: los 537 de hueco util de la tarjeta dan el corte del Figma en la
	   primera ("...DE COMO ESTAS" mide 484.1). La segunda no sale de ningun
	   ancho (necesitaria menos de 467 y mas de 484 a la vez), asi que su corte
	   va a mano en la plantilla, detras del punto. */
	max-width: none;
	margin: 0 0 40px;
}

/* 16px con 20 de interlineado, el cuerpo del sistema. Estaba en 0.82rem (13.1),
   y las 52ch dejaban la caja en 405 cuando el hueco util de la tarjeta es 537. */
.metrica__card > p:not(.metrica__sub) {
	font-size: 1rem;
	line-height: 1.25;
	max-width: none;
	margin: 0 0 1.25em;
}

.metrica__card > p:not(.metrica__sub):last-child {
	margin-bottom: 0;
}

/* Del pie de la foto al boton hay 32px en el Figma. */
.metrica__lado {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.metrica__lado img {
	width: 100%;
	/* Proporcion del Figma (612x561). Con flex:1 no crecia (el navegador
	   respetaba la proporcion del archivo, 1224x1142) y la fila se iba a 742
	   en vez de los 682 del diseno. Fijando la proporcion, la columna mide
	   561+32+90 = 683 y la tarjeta se estira a eso. */
	flex: none;
	aspect-ratio: 612 / 561;
	height: auto;
	object-fit: cover;
	border-radius: 30px;
}

.cta-banda--bloque {
	margin: 0;
}

.cta-banda--bloque a {
	width: 100%;
	justify-content: center;
	padding-block: 11px;
}

/* Hábitos y palancas (banda gris).
   Medido en el Figma: la banda va de 3481 a 5742, las dos columnas de la
   cabecera son 98..710 y 730..1341, y el mosaico es una rejilla de cuatro
   columnas de 295 con huecos de 21 (295*4 + 21*3 = 1243). */
.palancas {
	background: var(--color-light-gray);
	padding-block: 76px 87px;
}

.palancas__head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
	/* El mosaico arranca en 3815 y la columna derecha acaba en 3742. */
	margin-bottom: 73px;
}

/* 40px: "Habitos y palancas." mide 401 de tinta. */
.palancas__head h2 {
	font-size: clamp(1.75rem, 2.78vw, 2.5rem);
	line-height: 1.1;
	margin: 0 0 44px;
}

/* 36px, no 1.3rem (20.8), con 46 entre lineas. Sin max-width: con 36px la
   columna de 612 ya parte donde el Figma (LAS CINCO VARIABLES / QUE MAS
   IMPORTAN.). */
.palancas__sub {
	font-family: var(--font-heading);
	text-transform: uppercase;
	font-size: clamp(1.25rem, 2.5vw, 2.25rem);
	line-height: 1.28;
	/* 13.4em = 482px a 36px: el corte del Figma (LAS CINCO VARIABLES / QUE MAS
	   IMPORTAN.) necesita que no quepa "QUE" en la primera linea. */
	max-width: 13.4em;
	margin: 0;
}

/* 20px con 25 de interlineado (cinco lineas medidas dan 19.82 a 19.90).
   Arranca 34px por debajo del titular de la izquierda. */
.palancas__intro {
	font-size: clamp(1rem, 1.39vw, 1.25rem);
	line-height: 1.25;
	max-width: none;
	padding-top: 34px;
}

.palancas__intro p {
	margin: 0 0 26px;
}

.palancas__intro p:last-child {
	margin-bottom: 0;
}

/* Las tres filas miden 450 de alto en el diseno, con las fotos recortadas:
   no hay proporcion comun (612x450 en las dos primeras, 295x450 en la
   tercera), asi que el alto lo fija la fila. */
.palancas__fila {
	display: grid;
	gap: 21px;
	align-items: stretch;
	min-height: min(31.25vw, 450px);
}

.palancas__fila + .palancas__fila {
	margin-top: 21px;
}

.palancas__fila--a {
	grid-template-columns: 1fr 1fr;
}

.palancas__fila--b {
	grid-template-columns: 612fr 295fr 295fr;
}

.palancas__fila img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	border-radius: 30px;
}

/* Margen interior de 27 y contenido centrado en vertical: en la tarjeta 01 del
   Figma sobran 121px arriba y 114 abajo. */
.palanca {
	background: var(--color-bg);
	border: 1px solid rgba(46, 56, 58, 0.3);
	border-radius: 30px;
	padding: 27px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* 20px, no 0.85rem (13.6). */
.palanca__num {
	font-size: clamp(0.875rem, 1.39vw, 1.25rem);
	line-height: 1.25;
	margin-bottom: 0;
}

/* 24px, no 1.05rem (16.8). Tampoco lleva uppercase. */
.palanca h3 {
	font-size: clamp(1.125rem, 1.67vw, 1.5rem);
	text-transform: none;
	line-height: 1.1;
	margin: 0 0 42px;
	max-width: none;
}

/* 16px con 20 de interlineado: cuatro lineas medidas dan 15.89 a 15.94.
   Estaba en 0.76rem (12.2). */
.palanca p {
	font-size: 1rem;
	line-height: 1.25;
	margin: 0;
	max-width: none;
}

/* Las lineas del cierre llegan a 1117px de ancho en el Figma, asi que ocupa
   todo el contenido; con las 74ch de antes la caja se quedaba en 703 y partia
   las frases donde no toca. El mosaico acaba en 5206 y la primera linea del
   cierre esta en 5314. */
.palancas__cierre {
	text-align: center;
	max-width: none;
	margin: 104px auto 0;
}

/* 20px, no 0.9rem (14.4). Dos medidas independientes dan 19.8 y 19.9. */
.palancas__cierre p {
	font-size: clamp(1rem, 1.39vw, 1.25rem);
	line-height: 1.25;
	margin-bottom: 14px;
}

/* 32px, no 1.15rem (18.4), con 41 entre lineas. */
.palancas__cierre-destacado {
	font-size: clamp(1.25rem, 2.22vw, 2rem) !important;
	line-height: 1.28;
	margin-top: 46px;
	margin-bottom: 0;
}

/* Del pie del destacado (5501) a la caja del boton (5582). */
.palancas .cta-banda {
	margin-top: 81px;
}

/* En el Figma el bloque oscuro del pie arranca en 5719, o sea 64px por debajo
   del boton, y monta sobre la banda gris (que acaba en 5742): el gris asoma por
   sus esquinas redondeadas. Aqui quedaban 122px (87 de relleno mas 35 de margen
   propio del pie) y una franja clara entre los dos.
   El margen negativo va en la seccion y no en el pie porque no son hermanos:
   la seccion esta dentro de <main> y el pie va detras. */
.palancas {
	margin-bottom: -58px;
}

@media (max-width: 900px) {
	.riesgos__grid,
	.metrica,
	.metrica--invertida,
	.palancas__head,
	.palancas__fila--a,
	.palancas__fila--b {
		grid-template-columns: 1fr;
	}
	.metrica--invertida .metrica__card {
		order: 0;
	}
	.metrica--invertida .metrica__lado {
		order: 0;
	}
	.palancas__fila img {
		height: auto;
		aspect-ratio: 612 / 400;
	}
	/* Apilado, cada tarjeta y cada foto son su propia fila: el alto minimo de
	   450 del diseno de escritorio no pinta nada. */
	.palancas__fila {
		min-height: 0;
	}
	/* La foto de riesgos sobresale de la banda en escritorio; apilada, ese
	   margen negativo se comia el final del texto y el boton. */
	.riesgos {
		padding-bottom: 56px;
	}
	.riesgos__grid img {
		margin-bottom: 0;
	}
	.riesgos + .container > .cta-banda {
		margin-top: 40px;
	}
	.riesgos__texto {
		padding-top: 0;
		margin-right: 0;
	}
	/* Los botones a todo el ancho vuelven a centrar su texto. */
	.metricas .cta-banda a,
	.palancas .cta-banda a {
		text-align: center;
	}
}

/* =========================================================
   Servicios — bloques LEAP / SAFE / DOME
   ========================================================= */
.servicio {
	padding-top: 72px;
}

.servicio--gris {
	background: var(--color-light-gray);
}

/* Sin bloque "Que incluye" (ENTRY desde el 30/09/2026) el texto y la foto
   llegaban hasta el borde de la seccion: mismo aire abajo que arriba. */
.servicio--sin-incluye {
	padding-bottom: 72px;
}

/* Grid de sangrado completo: la foto llega hasta el borde del viewport (como en el
   diseño) y el resto del contenido queda alineado con el ancho del container.
   Columnas: [1] gutter flexible izq · [2] y [3] contenido · [4] gutter flexible dcha. */
.servicio__grid {
	display: grid;
	/* Medido en el Figma sobre el bloque de SAFE: el trazo de la tarjeta va de
	   x=98 a x=709,5 y la foto arranca en x=730. O sea columnas de 612 con 20 de
	   separacion, no 596 con 40. Con las de 596 la tarjeta caia en 104..700 y la
	   foto en 740: diez pixeles descuadrada respecto al bloque ampliado de abajo,
	   que si usa el ancho de contenido real (98..1341).
	   Las cuatro pistas y los tres huecos de 20 dan 1fr = 50% - 54px, que a 1440
	   deja la pista exterior en 78 y el contenido empezando en 98. */
	/* El margen de pagina es el mismo que usa el bloque ampliado (6.85vw mientras
	   escala, congelado en (100%-1243)/2 a partir de 1440), menos el hueco de 20
	   que ya aporta la propia rejilla. Con las pistas exteriores en 1fr el margen
	   se derrumbaba al gutter de 24 en cuanto la pantalla bajaba de 1440 y las
	   tarjetas se descuadraban del bloque de abajo (a 1280: 44 contra 87,7). */
	/* En % y no en vw: 100vw cuenta la barra de desplazamiento y el ancho del
	   elemento no. Con vw, en un navegador con barra la rejilla y el bloque
	   ampliado de abajo se descuadraban unos 8px entre si. */
	--margen-serv: max(6.85%, calc((100% - 1243px) / 2));
	grid-template-columns:
		minmax(var(--gutter), calc(var(--margen-serv) - 20px))
		minmax(0, 1fr)
		minmax(0, 1fr)
		minmax(var(--gutter), calc(var(--margen-serv) - 20px));
	column-gap: 20px;
	/* stretch, no start: en el Figma la foto llega exactamente hasta donde acaba
	   el texto de la derecha, y como cada servicio tiene un texto de distinta
	   longitud las tres fotos miden distinto (622, 609 y 600px). O sea que la
	   altura la manda el texto, no una proporcion fija. */
	align-items: stretch;
}

/* La foto va en absoluto dentro de la figure para que su alto natural no cuente
   al calcular la fila: asi la fila la define el texto y la foto la rellena. */
.servicio__media {
	grid-column: 1 / 3;
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

.servicio__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Los 20 del Figma entre foto y tarjeta se veian pegados: se suman 40 por el
   lado de la foto (izquierda normal, derecha en las invertidas). */
.servicio__info {
	grid-column: 3;
	margin-left: 40px;
}

.servicio--invertido .servicio__media {
	grid-column: 3 / 5;
	grid-row: 1;
}

.servicio--invertido .servicio__media {
	border-radius: var(--radius-card) 0 0 var(--radius-card);
}

.servicio--invertido .servicio__info {
	grid-column: 2;
	grid-row: 1;
	margin-left: 0;
	margin-right: 40px;
}

/* 35px de margen interior y radio 30, medidos en el Figma. */
.servicio__card {
	border: 1px solid rgba(46, 56, 58, 0.35);
	border-radius: 30px;
	padding: 35px;
}

/* 46px medidos ("01. LEAP" ocupa 174px). Estaba en 2.1rem = 33.6. */
.servicio__nombre {
	font-size: clamp(1.75rem, 3.19vw, 2.875rem);
	line-height: 1.1;
	margin: 0 0 0.15em;
}

/* Subtitulo en negrita bajo el nombre: no existia en la plantilla. 24px. */
.servicio__sub {
	font-size: clamp(1rem, 1.67vw, 1.5rem);
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 1.1em;
}

/* 24px, no 0.95rem (15.2). */
.servicio__fase {
	font-weight: 700;
	font-size: clamp(1rem, 1.67vw, 1.5rem);
	line-height: 1.3;
	margin: 0 0 0.9em;
}

/* 24px, no 1.3rem (20.8). Interlineado 30px medidos. */
.servicio__claim {
	font-size: clamp(1rem, 1.67vw, 1.5rem);
	font-weight: 300;
	line-height: 1.25;
	margin: 0;
}

/* 30/09/2026: tarjeta de los cuatro servicios ~20% mas pequena a peticion del
   cliente (nombre 46 -> 37px, textos 24 -> 19px, margen 35 -> 28px). */
.servicio__card {
	padding: 28px 30px;
}

.servicio__nombre {
	font-size: clamp(1.5rem, 2.56vw, 2.3rem);
}

.servicio__sub,
.servicio__fase,
.servicio__claim {
	font-size: clamp(0.95rem, 1.33vw, 1.2rem);
}

.servicio__card > :last-child {
	margin-bottom: 0;
}

/* 16px e interlineado 1.25, como el resto del sistema. Estaba en 0.95rem. */
.servicio__texto {
	/* La tarjeta mide 612 pero el parrafo de debajo no llega tan lejos en el
	   Figma: resolviendo por los cortes de linea de LEAP y SAFE la caja cae en
	   585..600. Chrome mide algo mas estrecho que mi simulacion, asi que me quedo
	   en la parte baja de esa ventana: 585, el 95,6% de la columna. Con 612 (y aun
	   con 596) la segunda linea de SAFE se llevaba un "el" de la siguiente. */
	max-width: 95.6%;
	margin-top: 40px;
	font-size: clamp(0.875rem, 1.111vw, 1rem);
	line-height: 1.25;
}

.servicio__texto p {
	margin: 0 0 1.25em;
}

.servicio__texto p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Servicios — segundo bloque de cada servicio (texto + foto a sangre)
   En el Figma LEAP lo lleva con la foto a la derecha (x 730..1440) y
   SAFE con la foto a la izquierda (x 0..709). DOME no lo tiene.
   El padding lateral reproduce el margen de pagina, igual que en
   .inst-tec: 6.85vw mientras escala y (100%-1243)/2 ya congelado.
   --------------------------------------------------------------- */
/* Exactamente la misma rejilla de cuatro pistas que .servicio__grid, en vez de
   una propia de tres columnas con anchos congelados. Mientras fueron dos
   construcciones distintas se separaban la una de la otra en cuanto cambiaba
   algo: la ultima vez, por la barra de desplazamiento. Compartiendo rejilla la
   foto y la tarjeta caen en la misma vertical por construccion, a cualquier
   ancho.
   La foto ocupa las dos pistas del lado que sangra y el texto la pista de
   contenido del otro lado. */
.servicio-amp {
	display: grid;
	--margen-serv: max(6.85%, calc((100% - 1243px) / 2));
	grid-template-columns:
		minmax(var(--gutter), calc(var(--margen-serv) - 20px))
		minmax(0, 1fr)
		minmax(0, 1fr)
		minmax(var(--gutter), calc(var(--margen-serv) - 20px));
	column-gap: 20px;
	align-items: start;
	margin-top: 56px;
}

/* 28px de desfase superior: en el Figma el texto arranca por debajo del borde
   de la foto (foto en 1655, primera linea en 1683). */
.servicio-amp__texto {
	grid-column: 2;
	grid-row: 1;
	/* La pista mide 612 pero en el Figma el texto de LEAP corta en 580 (la
	   ventana que reproduce su reparto de lineas es 575..585). SAFE si usa la
	   pista entera, y lo devuelve al 100% mas abajo.
	   95,5 y no 94,8: con 94,8 la caja se quedaba en 573 a 1440 con barra de
	   desplazamiento, justo por debajo de la ventana buena. */
	/* 60px de separacion con la foto, como entre tarjeta y foto arriba. */
	max-width: calc(100% - 40px);
	padding-top: 28px;
	font-size: clamp(0.875rem, 1.111vw, 1rem);
	line-height: 1.25;
}

.servicio-amp__texto p {
	margin: 0 0 1.25em;
}

.servicio-amp__texto p:last-child {
	margin-bottom: 0;
}

.servicio-amp__foto {
	grid-column: 3 / -1;
	grid-row: 1;
	width: 100%;
	height: min(35.97vw, 518px);
	object-position: center;
	object-fit: cover;
	border-radius: 30px 0 0 30px;
	display: block;
}

/* Espejo del anterior: la foto sangra por la izquierda y ocupa lo que sobre. */
/* Espejo: la foto ocupa las dos pistas de la izquierda y el texto la tercera.
   SAFE usa la pista entera (en el Figma su caja mide 613 frente a los 580 de
   LEAP): la linea 2 necesita ese ancho y la 3 corta antes de "cada". */
.servicio-amp--foto-izq {
	grid-template-columns:
		minmax(var(--gutter), calc(var(--margen-serv) - 20px))
		minmax(0, 1fr)
		minmax(0, 1fr)
		minmax(var(--gutter), calc(var(--margen-serv) - 20px));
}

.servicio-amp--foto-izq .servicio-amp__texto {
	grid-column: 3;
	max-width: 100%;
	margin-left: 40px;
	padding-top: 21px;
}

.servicio-amp--foto-izq .servicio-amp__foto {
	grid-column: 1 / 3;
	height: min(26.74vw, 385px);
	border-radius: 0 30px 30px 0;
}

/* Parrafo introductorio sobre las tarjetas (solo DOME) y parrafos de
   cierre bajo ellas (solo LEAP). Los dos centrados, a 16px, pero con anchos
   distintos en el Figma: la introduccion corta en 857px de linea maxima y el
   cierre en 1082. Resolviendo por los cortes, el cierre necesita una columna
   de 1085 a 1144; estaba en 880 y por eso partia las lineas donde no debia. */
.incluye__intro,
.incluye__cierre {
	font-size: clamp(0.875rem, 1.111vw, 1rem);
	line-height: 1.25;
	text-align: center;
	margin-inline: auto;
}

.incluye__intro {
	max-width: 880px;
}

.incluye__cierre {
	max-width: 1114px;
}

.incluye__intro {
	margin-block: 0 40px;
}

.incluye__cierre {
	margin-block: 48px 0;
}

.incluye__cierre p {
	margin: 0 0 1.25em;
}

.incluye__cierre p:last-child {
	margin-bottom: 0;
}

/* 30/09/2026: el texto del bloque de SAFE arrancaba arriba y bajaba por debajo
   de la foto. Ahora va centrado en vertical, y si es mas alto que la foto, la
   foto crece hasta su altura para que los dos bordes coincidan. */
@media (min-width: 901px) {
	/* Igual en el bloque principal de los cuatro servicios: la foto toma su
	   proporcion (tope 560) y tarjeta + texto van centrados a su lado. Antes la
	   foto median exactamente lo que el texto y quedaba todo pegado arriba. */
	.servicio__grid {
		align-items: center;
	}
	.servicio__media {
		align-self: stretch;
		min-height: min(36vw, 560px);
	}
	.servicio__info {
		align-self: center;
	}
	/* Mismo redondeo (30px) que la foto del bloque ampliado; antes 16px. */
	.servicio__media {
		border-radius: 0 30px 30px 0;
	}
	.servicio--invertido .servicio__media {
		border-radius: 30px 0 0 30px;
	}
	.servicio-amp--foto-izq {
		align-items: center;
	}
	.servicio-amp--foto-izq .servicio-amp__texto {
		padding-top: 0;
	}
	.servicio-amp--foto-izq .servicio-amp__foto {
		align-self: stretch;
		height: auto;
		min-height: min(26.74vw, 385px);
	}
}

@media (max-width: 900px) {
	.servicio-amp,
	.servicio-amp--foto-izq {
		grid-template-columns: 1fr;
		padding-left: 0;
		padding-right: 0;
		row-gap: 24px;
	}
	/* Apilado, la foto va DELANTE del texto. En el Figma (que es un diseno de
	   escritorio) el texto va primero, pero en movil eso encadenaba el texto de
	   la tarjeta con el de este bloque y quedaban dos muros de texto seguidos.
	   Con la foto delante la secuencia es foto - tarjeta - texto - foto - texto. */
	.servicio-amp__texto,
	.servicio-amp--foto-izq .servicio-amp__texto {
		grid-column: 1;
		grid-row: auto;
		max-width: none;
		margin-left: 0;
		order: 2;
		padding-inline: var(--gutter);
		padding-top: 0;
	}
	.servicio-amp__foto,
	.servicio-amp--foto-izq .servicio-amp__foto {
		grid-column: 1;
		grid-row: auto;
		order: 1;
		height: auto;
		aspect-ratio: 710 / 518;
	}
	.servicio-amp--foto-izq .servicio-amp__foto {
		aspect-ratio: 710 / 385;
	}
}

/* Qué incluye */
.incluye {
	padding-block: 56px 72px;
}

/* 35.2px medidos ("Que incluye LEAP" ocupa 325px). Estaba en 1.7rem = 27.2. */
.incluye__title {
	text-align: center;
	font-size: clamp(1.4rem, 2.44vw, 2.2rem);
	margin: 0 0 44px;
}

/* 5 tarjetas de 235 con hueco de 17: 235*5 + 17*4 = 1243, que es el reparto del
   Figma. Las columnas no van fijas: caben las que quepan con un minimo de 190px
   por tarjeta, asi que a 1440 salen las seis de LEAP en una fila y las cinco de
   SAFE y DOME tambien, y segun encoge la pantalla van bajando solas a cinco,
   cuatro, tres, dos y una. El min() evita que se desborden en pantallas muy
   estrechas. */
.incluye__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--min-tarjeta, 190px), 100%), 1fr));
	gap: 17px;
}

/* 16px e interlineado 1.25, medidos en las cinco lineas de la primera tarjeta
   del Figma (15.6-15.7 en todas). Estaba en 0.8rem = 12.8. Margen interior 27px,
   en em para que acompane al cuerpo.
   Alto 231 (16.04vw hasta 1440) con el texto centrado en vertical: en el Figma la
   tarjeta de 5 lineas deja 70px arriba y 69 abajo, y la de 9 lineas 30 y 29.
   Radio 24, no 16: ajustado sobre la curva de la esquina con 0.5px de error. */
.incluye__card {
	border: 1px solid rgba(46, 56, 58, 0.3);
	border-radius: 24px;
	padding: 1.69em;
	min-height: min(16.04vw, 231px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: clamp(0.875rem, 1.111vw, 1rem);
	line-height: 1.25;
}

.incluye__card p {
	margin: 0;
}

/* Tarjeta que resume el servicio (primera de LEAP): fondo gris para que
   resalte y doble ancho, porque lleva mucho mas texto que las demas.
   Con auto-fit la ultima tarjeta se quedaba sola en otra fila a 1024 y 800, asi
   que esta rejilla lleva columnas fijas: 5 (2+1+1+1) en escritorio, 3 con la
   destacada a lo ancho en pantallas medias y una sola en movil. */
.incluye__card--destacada {
	background: var(--color-light-gray);
	border-color: var(--color-light-gray);
	grid-column: span 2;
}

/* Las cuatro en una fila (peticion del cliente) con la destacada un poco mas
   ancha. Por debajo de 900px no caben: dos por fila, y una en movil. */
/* Anchos segun la cantidad de texto (la primera y la ultima son largas, la de
   evaluacion fisica corta) y texto arriba: centrado en vertical cada tarjeta
   arrancaba a una altura distinta. */
.incluye__grid--con-destacada {
	grid-template-columns: 1.3fr 0.85fr 1.1fr 1.05fr;
}

/* Cuadro de cierre (Consulta de Revisión de Resultados): debajo de los cuatro
   y ocupando todo el ancho de la fila. */
.incluye__grid--con-destacada .incluye__card--ancha {
	grid-column: 1 / -1;
}

.incluye__grid--con-destacada .incluye__card {
	justify-content: flex-start;
	min-height: 0;
}

.incluye__grid--con-destacada .incluye__card--destacada {
	grid-column: auto;
}

@media (max-width: 900px) {
	.incluye__grid--con-destacada {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.incluye__grid--con-destacada {
		grid-template-columns: 1fr;
	}
}

/* Barra CTA "SI QUIERES SABER MÁS SOBRE..." */
.cta-banda {
	display: flex;
	justify-content: center;
	margin: 44px 0 0;
}

.cta-banda a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 0.5px solid currentColor;
	border-radius: var(--radius-btn);
	/* 16px, no 0.75rem (12). Medido en el Figma: la altura de mayusculas del
	   texto del boton es 12px, que con el ratio de Oxygen da 16.7 de cuerpo; y
	   a 16px con el 0.08em de espaciado que ya habia, el texto ocupa los 866px
	   que mide en el diseno. El boton pasa a 53px de alto, el del Figma. */
	padding: 16px 28px;
	font-size: clamp(0.8rem, 1.111vw, 1rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}

.cta-banda .icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

@media (max-width: 900px) {
	.servicio__grid {
		grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 1192px) minmax(var(--gutter), 1fr);
		/* Sin hueco entre columnas: apilado, los 40px de escritorio se sumaban al
		   margen lateral y la tarjeta arrancaba en x=64 en vez de en 24. */
		column-gap: 0;
	}
	.servicio__media,
	.servicio--invertido .servicio__media {
		grid-column: 1 / 4;
		grid-row: auto;
	}
	/* Apilada, la foto recupera su proporcion: ya no hay fila que le de alto. */
	.servicio__media,
	.servicio--invertido .servicio__media {
		position: static;
		border-radius: 0;
		aspect-ratio: auto;
	}
	.servicio__media img,
	.servicio--invertido .servicio__media img {
		position: static;
		height: auto;
		aspect-ratio: 710 / 519;
		border-radius: 0;
	}
	.servicio__info,
	.servicio--invertido .servicio__info {
		grid-column: 2;
		grid-row: auto;
		margin-top: 32px;
		margin-left: 0;
		margin-right: 0;
	}
	/* Apilado no hay tarjeta al lado con la que cuadrar: el parrafo usa todo el
	   ancho en vez de dejar un 4% muerto a la derecha. */
	.servicio__texto {
		max-width: none;
	}
	.cta-banda a {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
}

/* Rejilla de seis: para que las tarjetas salgan cuadradas y no como columnas,
   el texto mas largo ("Todo culmina...", 1328px de linea a 16px) tiene que
   caber en los 193px de ancho que deja la fila de seis. Con 14.4px de cuerpo y
   1.25em de margen interior entra en nueve lineas, que es justo el alto de la
   tarjeta. El aspect-ratio deja cuadradas tambien a las cortas.
   30/09/2026: la primera de LEAP ("Un chequeo completo que incluye...") pasa a
   ser la mas larga y a 14.4px daba diez lineas pegadas al borde. Con 13.4px y
   1.05em a los lados entra en nueve y deja ~20px arriba y abajo. */
.incluye__grid--compacta .incluye__card {
	min-height: 0;
	aspect-ratio: 1;
	padding: 1.25em 1.05em;
	font-size: clamp(0.75rem, 0.95vw, 0.84rem);
}

/* Apiladas o casi, el alto lo marca el texto y el cuadrado deja de tener
   sentido: a 390px una tarjeta de 337x337 con una sola linea dentro es un
   hueco vacio. */
@media (max-width: 700px) {
	.incluye__card,
	.incluye__grid--compacta .incluye__card {
		min-height: 0;
		aspect-ratio: auto;
	}
}

/* =========================================================
   Pop-up de ficha del profesional (Equipo)
   Formato del Figma: caja blanca centrada, aspa fuera de la caja
   arriba a la derecha y el fondo de la pagina velado en blanco.
   ========================================================= */
.ficha-modal[hidden] {
	display: none !important;
}

.ficha-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 88px var(--gutter) 40px;
}

.ficha-modal__fondo {
	position: absolute;
	inset: 0;
	background: rgba(46, 56, 58, 0.82);
	border: 0;
	padding: 0;
	cursor: pointer;
}

.ficha-modal__caja {
	position: relative;
	width: 100%;
	max-width: 1243px;   /* ancho de la caja medido en el Figma */
	max-height: min(639px, 82vh);
	background: var(--color-white);
	border-radius: 18px;
	box-shadow: 0 24px 70px rgba(46, 56, 58, 0.28);
	padding: 65px 84px;
	display: flex;
}

/* El scroll va dentro, para que el aspa no se mueva con el texto. */
.ficha-modal__scroll {
	width: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 8px;
	scrollbar-width: thin;
	scrollbar-color: rgba(46, 56, 58, 0.35) transparent;
}

.ficha-modal__scroll::-webkit-scrollbar {
	width: 6px;
}

.ficha-modal__scroll::-webkit-scrollbar-thumb {
	background: rgba(46, 56, 58, 0.35);
	border-radius: 3px;
}

/* Aspa: fuera de la caja, como en el Figma. */
.ficha-modal__cerrar {
	position: absolute;
	top: -62px;
	right: 0;
	width: 39px;
	height: 37px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--color-white);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.ficha-modal__cerrar:hover,
.ficha-modal__cerrar:focus-visible {
	opacity: 0.6;
}

.ficha-modal__cerrar svg {
	width: 39px;
	height: 37px;
	display: block;
}

.ficha-modal__nombre {
	font-family: var(--font-heading);
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1.5rem;
	letter-spacing: 0.04em;
	line-height: 1.2;
	margin: 0 0 6px;
}

.ficha-modal__cargo {
	font-size: 1.05rem;
	font-weight: 300;
	margin: 0 0 38px;
}

.ficha-modal__sep {
	border: none;
	border-top: 1px solid rgba(46, 56, 58, 0.28);
	margin: 0 0 41px;
}

.ficha-modal__cuerpo p {
	font-size: 1rem;
	line-height: 1.25;
	margin: 0 0 20px;
}

.ficha-modal__cuerpo p:last-child {
	margin-bottom: 0;
}

.ficha-modal__cuerpo strong {
	font-weight: 700;
}

/* Mientras el pop-up esta abierto la pagina de detras no se desplaza. */
body.ficha-abierta {
	overflow: hidden;
}

@media (max-width: 700px) {
	.ficha-modal {
		padding: 64px 16px 24px;
	}

	.ficha-modal__caja {
		padding: 30px 20px;
		max-height: 84vh;
		border-radius: 14px;
	}

	.ficha-modal__scroll {
		padding-right: 10px;
	}

	.ficha-modal__cerrar {
		top: -46px;
	}

	.ficha-modal__nombre {
		font-size: 1.25rem;
	}

	.ficha-modal__cargo {
		font-size: 0.95rem;
	}
}

/* =========================================================
   Responsive: tarjetas de texto en una columna
   En escritorio estas tarjetas llevan una proporcion fija medida en el Figma,
   porque comparten fila y tienen que casar de alto. Al apilarse a una columna
   esa proporcion deja de tener sentido: la tarjeta se estira a todo el ancho y
   queda medio vacia con el texto pegado abajo. Aqui se ajustan al contenido.
   Las tarjetas que son FOTO (.persona, .metodo__feature, .comunicado__foto)
   conservan su proporcion a proposito: ahi el recorte si importa.
   ========================================================= */
@media (max-width: 700px) {
	.metodo__card,
	.medimos__card,
	.longevidad__card {
		aspect-ratio: auto;
		min-height: 168px;
	}
}

/* =========================================================
   Responsive: banda "Que medimos"
   En escritorio la foto ocupa toda la banda y el degradado la funde con el
   fondo antes de llegar a las tarjetas. Apilada, la banda mide el triple: ese
   degradado se estira, la foto sigue viendose detras de las cuatro tarjetas y
   el texto pierde contraste. En movil la foto pasa a ser una cabecera: cubre
   solo la zona del titular y las tarjetas quedan sobre el fondo de pagina.
   ========================================================= */
@media (max-width: 700px) {
	.medimos__band {
		padding-top: 40px;
	}

	.medimos__bg {
		height: 300px;
		object-position: center top;
	}

	.medimos__band::after {
		inset: 0 0 auto;
		height: 300px;
		background: linear-gradient(180deg,
			rgba(46, 56, 58, 0.62) 0%,
			rgba(46, 56, 58, 0.45) 40%,
			rgba(231, 231, 231, 0.75) 78%,
			#E7E7E7 100%);
	}

	/* El titular va sobre la foto y necesita el contraste del degradado. */
	.medimos__head {
		min-height: 200px;
	}
}


/* ---------------------------------------------------------------
   Video de portada (Vimeo en modo fondo), entre la intro y "Como
   trabajamos". Mismo ancho de contenido y mismo radio que las tarjetas
   de abajo. Sin relleno inferior: el aire lo pone .metodo.
   --------------------------------------------------------------- */
.video-portada {
	padding-bottom: 0;
}

/* Panoramico (21:9) tambien en movil: el video es un 16:9 con bandas negras
   de cine grabadas (imagen real solo en las filas 131-948 de 1080, ~2.35:1).
   Recortado a 21:9 justo asomaba una linea negra arriba y abajo, asi que el
   iframe va un 3% mas grande y centrado para dejarlas fuera con margen. */
.video-portada__marco {
	position: relative;
	aspect-ratio: 21 / 9;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--color-dark);
	/* Safari no recorta el iframe con el radio sin esto. */
	isolation: isolate;
	transform: translateZ(0);
}

.video-portada__marco iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 103%;
	height: auto;
	aspect-ratio: 16 / 9;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

/* Tapa el reproductor: ni hover ni clic llegan a Vimeo. Pulsarlo pausa. */
.video-portada__velo {
	position: absolute;
	inset: 0;
	cursor: pointer;
}

/* Controles propios: dos botones redondos abajo a la derecha. */
.video-portada__controles {
	position: absolute;
	right: clamp(12px, 1.6vw, 22px);
	bottom: clamp(12px, 1.6vw, 22px);
	display: flex;
	gap: 10px;
	z-index: 1;
}

.video-portada__btn {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(46, 56, 58, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--color-white);
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.video-portada__btn:hover {
	background: rgba(46, 56, 58, 0.8);
	transform: scale(1.05);
}

.video-portada__btn:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 3px;
}

.video-portada__ico {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Un icono visible por boton segun el estado. */
.video-portada__ico--play,
.video-portada__ico--sonido,
.video-portada__marco.is-pausado .video-portada__ico--pausa,
.video-portada__marco.is-sonido .video-portada__ico--mudo {
	display: none;
}

.video-portada__marco.is-pausado .video-portada__ico--play,
.video-portada__marco.is-sonido .video-portada__ico--sonido {
	display: block;
}

/* ---------------------------------------------------------------
   WhatsApp Business (cliente, 02/10/2026): boton en Contacto y enlace
   en el pie, debajo del telefono.
   --------------------------------------------------------------- */
.contacto__whatsapp {
	margin-top: 28px;
}

.site-footer__whatsapp a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
}

.site-footer__whatsapp .icon {
	width: 16px;
	height: 16px;
	flex: none;
}

/* El menu del pie pasa de 3 a 7 secciones (cliente, 02/10/2026): con los
   34px del Figma la columna quedaba muy larga. 18px, como ya tenia en movil. */
.site-footer__nav-list {
	gap: 18px;
}

/* ---------------------------------------------------------------
   Cabecera en dos bloques (cliente, 02/10/2026). Con seis secciones, el
   boton y cuatro redes en una sola fila no cabia todo y el logo se encogia
   (img lleva max-width: 100%). En escritorio:
     - el logo ocupa las dos alturas a la izquierda y no se encoge;
     - arriba a la derecha, Area Privada y redes (.header-actions);
     - debajo, el menu.
   .primary-nav pasa a display: contents para que sus dos hijos se coloquen
   en la rejilla de la cabecera. En movil (<1024) no cambia nada: todo sigue
   dentro del menu hamburguesa.
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
	.site-header__inner {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		column-gap: 32px;
		row-gap: 6px;
		align-items: center;
	}

	.site-logo {
		grid-column: 1;
		grid-row: 1 / span 2;
		flex-shrink: 0;
	}

	.site-logo img {
		max-width: none;
	}

	.primary-nav {
		display: contents;
	}

	.header-actions {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		gap: 28px;
	}

	.site-nav {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
	}

	/* En la franja de arriba el boton va algo mas compacto. */
	.site-header .header-actions .btn {
		padding: 7px 22px;
		font-size: 0.85em;
	}
}

@media (min-width: 1024px) and (max-width: 1100px) {
	.site-logo img {
		width: 220px;
	}
}

/* ---------------------------------------------------------------
   Casilla de privacidad del formulario de Contacto. Hereda de
   .contacto__campo input el alto de los campos (50px, min. 44) y el
   cuadro se pintaba centrado en esa caja, por debajo del texto. Aqui se
   devuelve a su tamano y se alinea con la primera linea del texto.
   --------------------------------------------------------------- */
.contacto__privacidad label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 0;
	cursor: pointer;
}

.contacto__campo.contacto__privacidad input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border-radius: 3px;
	accent-color: var(--color-dark);
	cursor: pointer;
}

.contacto__privacidad label span {
	flex: 1;
	min-width: 0;
}