/* =========================================================
   VAULT — capa de movimiento
   =========================================================
   Dirección: la marca habla de "trayectorias, no episodios" y de custodia
   continua. El movimiento traduce eso literalmente:

   1. GESTO PROTAGONISTA — la línea del timeline se dibuja de izquierda a
      derecha y los puntos aterrizan en secuencia: la trayectoria trazándose.
      Es el único momento coreografiado de la página; el resto acompaña.
   2. REVELADOS — amplitud baja (14-18px) y duración larga (700-900ms) con
      easing expo-out. Nada rebota ni salta: todo se posa. Registro clínico.
   3. TITULARES JULIUS — se revelan con una cortina vertical (clip-path), no
      con un fade genérico: la voz tipográfica de la marca merece su gesto.
   4. FLECHA ↗ — el diseño la repite en cards, CTAs y "leer más". Que viaje
      en diagonal al hover es el mismo gesto en todo el sitio: vocabulario
      coherente en vez de efectos sueltos.

   Todo el sistema depende de la clase `.vault-motion` que añade un script
   inline en header.php. Sin JS (o con prefers-reduced-motion) nada se oculta
   y la web se ve exactamente como antes de esta capa.
   ========================================================= */

:root {
	/* Expo-out: arranca rápido y se posa muy despacio. Es lo que da la
	   sensación de "algo que se asienta" en vez de "algo que aparece". */
	--ease-vault: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-suave: cubic-bezier(0.33, 0.8, 0.35, 1);

	--dur-micro: 240ms;
	--dur-media: 520ms;
	--dur-larga: 820ms;
	--dur-cine: 1800ms;
}

/* =========================================================
   0. Contención horizontal
   =========================================================
   Las fotos a sangre completa entran con un punto de escala, así que durante
   ese instante sobresalen del viewport y asoma la barra de scroll horizontal.
   `clip` y no `hidden` a propósito: no crea contenedor de scroll, no afecta a
   la cabecera fija y deja el eje vertical intacto. */
main {
	overflow-x: clip;
}

/* =========================================================
   1. Revelado al hacer scroll
   ========================================================= */
.vault-motion [data-reveal] {
	opacity: 0;
	transform: translate3d(var(--reveal-x, 0), var(--reveal-y, 16px), 0) scale(var(--reveal-s, 1));
	transition:
		opacity var(--dur-larga) var(--ease-vault),
		transform var(--dur-larga) var(--ease-vault),
		clip-path var(--dur-larga) var(--ease-vault);
	transition-delay: var(--reveal-delay, 0ms);
}

.vault-motion [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* Variantes. Solo cambian las variables que consume la regla base. */
.vault-motion [data-reveal='izquierda'] {
	--reveal-x: -28px;
	--reveal-y: 0;
}

.vault-motion [data-reveal='derecha'] {
	--reveal-x: 28px;
	--reveal-y: 0;
}

/* Para fotografía: entra con un punto de escala, como una imagen que
   termina de enfocarse. Nunca al revés (encoger sugiere alejarse). */
.vault-motion [data-reveal='foto'] {
	--reveal-y: 20px;
	--reveal-s: 1.03;
}

/* Cortina vertical para los titulares en Julius Sans One. Los laterales van
   holgados para no cortar el tracking ancho de la fuente. */
.vault-motion [data-reveal='titular'] {
	--reveal-y: 10px;
	clip-path: inset(0 -4% 100% 0);
}

.vault-motion [data-reveal='titular'].is-visible {
	clip-path: inset(0 -4% -20% 0);
}

/* =========================================================
   2. El gesto protagonista: la trayectoria se traza
   ========================================================= */
/* La regla horizontal crece desde su origen y el punto aterriza después,
   ya con la línea puesta. El icono cierra la secuencia. */
.vault-motion .timeline__item .timeline__rule {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1100ms var(--ease-suave);
	transition-delay: calc(var(--reveal-delay, 0ms) + 120ms);
}

.vault-motion .timeline__item.is-visible .timeline__rule {
	transform: scaleX(1);
}

.vault-motion .timeline__item .timeline__rule::before {
	transform: translate(-50%, -50%) scale(0);
	transition: transform 480ms var(--ease-vault);
	transition-delay: calc(var(--reveal-delay, 0ms) + 620ms);
}

.vault-motion .timeline__item.is-visible .timeline__rule::before {
	transform: translate(-50%, -50%) scale(1);
}

/* OJO al animar `transform`: si el elemento ya usa transform para colocarse,
   terminar en `transform: none` le borra la posición. El número no lo usa, pero
   el icono va centrado bajo el punto con translateX(-50%) (main.css), así que
   su animación tiene que arrastrar ese -50% en los dos extremos. */
.vault-motion .timeline__item .timeline__num {
	opacity: 0;
	transform: translate3d(0, 12px, 0);
	transition:
		opacity var(--dur-media) var(--ease-vault),
		transform var(--dur-media) var(--ease-vault);
	transition-delay: calc(var(--reveal-delay, 0ms) + 780ms);
}

.vault-motion .timeline__item.is-visible .timeline__num {
	opacity: 1;
	transform: none;
}

.vault-motion .timeline__item .timeline__icon {
	opacity: 0;
	transform: translate3d(-50%, 12px, 0);
	transition:
		opacity var(--dur-media) var(--ease-vault),
		transform var(--dur-media) var(--ease-vault);
	transition-delay: calc(var(--reveal-delay, 0ms) + 780ms);
}

.vault-motion .timeline__item.is-visible .timeline__icon {
	opacity: 1;
	transform: translate3d(-50%, 0, 0);
}

/* El tick vertical que baja del título se dibuja antes que la línea. Se
   sustituye el borde por un degradado plano del mismo peso para poder
   animar su altura (los bordes no son animables por tramos). */
.vault-motion .timeline__item h3,
.vault-motion .timeline__item .timeline__texto {
	background-image: linear-gradient(rgba(46, 56, 58, 0.5), rgba(46, 56, 58, 0.5));
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 1px 0;
	border-left-color: transparent;
	transition: background-size 620ms var(--ease-suave);
	transition-delay: var(--reveal-delay, 0ms);
}

.vault-motion .timeline--claro .timeline__texto {
	background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
}

.vault-motion .timeline__item.is-visible h3,
.vault-motion .timeline__item.is-visible .timeline__texto {
	background-size: 1px 100%;
}

/* =========================================================
   3. Entrada de los heros (por encima del pliegue: sin observer)
   ========================================================= */
@keyframes vault-hero-texto {
	from {
		opacity: 0;
		transform: translate3d(0, 22px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* La foto termina de posarse: 1.06 → 1 muy despacio. La lentitud es la
   idea (largo plazo), no un adorno. */
@keyframes vault-hero-foto {
	from {
		transform: scale(1.06);
	}
	to {
		transform: scale(1);
	}
}

/* fill-mode `backwards` y no `both` a propósito: cubre el retardo inicial pero
   suelta la propiedad `transform` al terminar. Con `both` el estado final del
   keyframe se quedaría fijado y ganaría al hover del botón y al paralaje, que
   animan esa misma propiedad. Como el último keyframe coincide con el estado
   natural del elemento, soltarlo no produce ningún salto. */
.vault-motion .page-hero__bg,
.vault-motion .hero-slide__bg {
	animation: vault-hero-foto var(--dur-cine) var(--ease-suave) backwards;
}

.vault-motion .page-hero__title,
.vault-motion .hero-slide:first-child .hero-slide__title {
	animation: vault-hero-texto var(--dur-larga) var(--ease-vault) 120ms backwards;
}

.vault-motion .page-hero__subtitle,
.vault-motion .hero-slide:first-child .hero-slide__subtitle {
	animation: vault-hero-texto var(--dur-larga) var(--ease-vault) 260ms backwards;
}

.vault-motion .hero-slide:first-child .btn {
	animation: vault-hero-texto var(--dur-larga) var(--ease-vault) 380ms backwards;
}

/* Los controles del slider van centrados con translateX(-50%), así que no
   pueden usar el keyframe genérico (acaba en `transform: none` y los
   descoloca mientras dura la animación). */
@keyframes vault-hero-texto-centrado {
	from {
		opacity: 0;
		transform: translate3d(-50%, 22px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(-50%, 0, 0);
	}
}

.vault-motion .hero-slider__controls {
	animation: vault-hero-texto-centrado var(--dur-larga) var(--ease-vault) 520ms backwards;
}

/* Paralaje: la foto del hero es más alta que su marco y se desplaza a menos
   velocidad que el scroll. JS escribe --parallax. */
.vault-motion .page-hero__bg {
	height: 118%;
	top: -9%;
	transform: translate3d(0, var(--parallax, 0), 0);
}

.vault-motion .page-hero__bg.has-parallax {
	animation: none;
}

/* =========================================================
   4. Cabecera que se condensa al bajar
   ========================================================= */
/* Solo con JS activo: sin él la cabecera sigue siendo absolute sobre el hero
   y no hay riesgo de texto blanco sobre fondo claro. */
.vault-motion .site-header {
	position: fixed;
	transition:
		transform var(--dur-media) var(--ease-vault),
		background-color var(--dur-media) var(--ease-vault),
		padding var(--dur-media) var(--ease-vault),
		backdrop-filter var(--dur-media) var(--ease-vault);
}

.vault-motion .site-header.is-condensada {
	background-color: rgba(46, 56, 58, 0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding-block: 12px;
}

.vault-motion .site-header.is-oculta {
	transform: translate3d(0, -100%, 0);
}

.vault-motion .site-logo img {
	transition: width var(--dur-media) var(--ease-vault);
}

.vault-motion .site-header.is-condensada .site-logo img {
	width: 190px;
}

@media (max-width: 1100px) {
	.vault-motion .site-header.is-condensada .site-logo img {
		width: 160px;
	}
}

/* Con el menú móvil abierto la cabecera no se esconde nunca. */
.vault-motion body.nav-open .site-header.is-oculta {
	transform: none;
}

/* =========================================================
   5. Micro-interacciones
   ========================================================= */
/* --- La flecha ↗: el gesto que se repite en todo el sitio --- */
.btn .icon--arrow,
.link-more .icon--arrow,
.card__arrow svg,
.cta-banda .icon,
.recurso__descarga .icon,
.acceso__contenido .icon--arrow {
	transition: transform var(--dur-micro) var(--ease-vault);
}

.btn:hover .icon--arrow,
.link-more:hover .icon--arrow,
.cta-banda a:hover .icon,
.recurso__descarga:hover .icon,
.card:hover .card__arrow svg,
.medimos__card:hover .card__arrow svg,
.acceso:hover .icon--arrow,
.post-card .link-more:hover .icon--arrow,
.estudio .link-more:hover .icon--arrow,
.comunicado .link-more:hover .icon--arrow {
	transform: translate3d(3px, -3px, 0);
}

/* La flecha de descarga cae en vez de viajar en diagonal. */
.recurso__descarga:hover .icon--descarga {
	transform: translate3d(0, 3px, 0);
}

/* --- Botones --- */
.btn {
	transition:
		transform var(--dur-micro) var(--ease-vault),
		background-color var(--dur-micro) var(--ease-vault),
		border-color var(--dur-micro) var(--ease-vault),
		background-position var(--dur-media) var(--ease-vault);
}

.btn:hover {
	transform: translate3d(0, -2px, 0);
}

/* El degradado del acento se desliza en lugar de cambiar de color. */
.btn--primary {
	background-size: 220% 100%;
	background-position: 0% 50%;
}

.btn--primary:hover {
	background-position: 100% 50%;
}

.btn--secondary:hover {
	background-color: rgba(46, 56, 58, 0.06);
	border-color: currentColor;
}

.section--dark .btn--secondary:hover,
.hero-slide .btn--secondary:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

/* --- Navegación: subrayado que se traza --- */
.site-nav__list > li:not(:last-child):not(.nav-cta) > a {
	position: relative;
}

.site-nav__list > li:not(:last-child):not(.nav-cta) > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur-media) var(--ease-vault);
}

.site-nav__list > li:not(:last-child):not(.nav-cta) > a:hover::after,
.site-nav__list > li:not(:last-child):not(.nav-cta) > a:focus-visible::after,
.site-nav__list > li.current-menu-item > a::after {
	transform: scaleX(1);
}

.site-nav__list .sub-menu {
	transition: opacity var(--dur-micro) var(--ease-vault);
}

.social-links a {
	transition:
		transform var(--dur-micro) var(--ease-vault),
		opacity var(--dur-micro) var(--ease-vault);
	opacity: 0.85;
}

.social-links a:hover {
	transform: translate3d(0, -2px, 0);
	opacity: 1;
}

/* --- Tarjetas: se levantan y el borde se afirma --- */
.card,
.medimos__card,
.incluye__card,
.pilar,
.palanca,
.estudio,
.metodo-fila__card,
.recurso__card,
.comunicado__card,
.post-card__body,
.servicio__card {
	transition:
		transform var(--dur-media) var(--ease-vault),
		border-color var(--dur-media) var(--ease-vault),
		background-color var(--dur-media) var(--ease-vault);
}

a.card:hover,
a.medimos__card:hover,
.metodo__card:hover {
	transform: translate3d(0, -5px, 0);
	border-color: rgba(46, 56, 58, 0.55);
}

.estudio:hover,
.palanca:hover,
.incluye__card:hover,
.pilar:hover {
	transform: translate3d(0, -4px, 0);
	border-color: rgba(46, 56, 58, 0.5);
}

.post-card:hover .post-card__body,
.comunicado:hover .comunicado__card,
.recurso:hover .recurso__card {
	border-color: rgba(46, 56, 58, 0.55);
}

/* --- Fotografía: solo hace zoom donde hay un marco que la recorta --- */
.metodo__feature img,
.medimos__bg,
.acceso > img,
.post-card--oscuro .post-card__bg,
.persona img {
	transition: transform 900ms var(--ease-suave);
}

.metodo__feature:hover img,
.acceso:hover > img,
.post-card--oscuro:hover .post-card__bg,
.persona:hover img {
	transform: scale(1.05);
}

/* La ficha de persona necesita recortar para que el zoom no se salga. */
.persona {
	overflow: hidden;
}

.persona__plate {
	transition: background-color var(--dur-media) var(--ease-vault);
}

/* Las fotos sin marco propio no hacen zoom (se saldrían de su hueco):
   responden con luz, que es más sutil y no rompe la retícula. */
.longevidad__img,
.post-card__img,
.comunicado__foto,
.recurso__foto,
.metodo-fila__img,
.servicio__media img,
.conviccion__img,
.inst-intro__foto {
	transition: filter var(--dur-media) var(--ease-vault);
}

.longevidad__col:hover .longevidad__img,
.post-card:hover .post-card__img,
.comunicado:hover .comunicado__foto,
.recurso:hover .recurso__foto,
.metodo-fila:hover .metodo-fila__img {
	filter: brightness(1.05);
}

/* --- Enlaces "leer más" --- */
.link-more {
	transition: color var(--dur-micro) var(--ease-vault);
}

.link-more:hover {
	color: var(--color-dark);
}

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

/* --- Formulario de contacto --- */
.contacto__campo input,
.contacto__campo textarea {
	transition:
		border-color var(--dur-micro) var(--ease-vault),
		background-color var(--dur-micro) var(--ease-vault);
}

.contacto__campo input:hover,
.contacto__campo textarea:hover {
	border-color: rgba(46, 56, 58, 0.75);
}

.contacto__campo input:focus,
.contacto__campo textarea:focus {
	background-color: rgba(255, 255, 255, 0.55);
}

/* --- Slider del hero --- */
.hero-slider__dots button {
	transition:
		width var(--dur-media) var(--ease-vault),
		background-color var(--dur-media) var(--ease-vault);
}

/* El punto activo se estira: marca cuánto dura la slide sin añadir cronómetro. */
.hero-slider__dots button[aria-selected='true'] {
	width: 30px;
	border-radius: 5px;
}

.hero-slider__arrow svg {
	transition: transform var(--dur-micro) var(--ease-vault);
}

.hero-slider__arrow:hover svg {
	transform: translate3d(4px, 0, 0);
}

.hero-slider__arrow[data-slider-prev]:hover svg {
	transform: translate3d(-4px, 0, 0);
}

/* =========================================================
   6. FAQ: el signo gira en vez de cambiar de carácter
   ========================================================= */
.faq-item summary::after {
	content: '+';
	transition: transform var(--dur-media) var(--ease-vault);
}

.faq-item[open] summary::after {
	content: '+';
	transform: rotate(135deg);
}

.faq-item summary {
	transition: opacity var(--dur-micro) var(--ease-vault);
}

.faq-item summary:hover {
	opacity: 0.7;
}

@keyframes vault-faq-abrir {
	from {
		opacity: 0;
		transform: translate3d(0, -6px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.vault-motion .faq-item[open] .faq-item__body {
	animation: vault-faq-abrir var(--dur-media) var(--ease-vault) both;
}

/* =========================================================
   7. Foco visible (el movimiento no puede comerse la accesibilidad)
   ========================================================= */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* =========================================================
   8. prefers-reduced-motion
   =========================================================
   El script quita `.vault-motion` cuando el sistema pide menos movimiento,
   así que los revelados ni siquiera llegan a ocultarse. Esto es el cinturón
   de seguridad para lo que vive fuera de esa clase (hovers y transiciones). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.btn:hover,
	.estudio:hover,
	.palanca:hover,
	.incluye__card:hover,
	.pilar:hover,
	a.card:hover,
	a.medimos__card:hover,
	.metodo__card:hover,
	.social-links a:hover {
		transform: none;
	}

	.metodo__feature:hover img,
	.acceso:hover > img,
	.post-card--oscuro:hover .post-card__bg,
	.persona:hover img {
		transform: none;
	}
}