/* Animación de entrada compartida por los heroes de las páginas internas. */
.trees-interna > section:first-child > div:first-child {
    opacity: 0;
}

.trees-interna > section:first-child > div:first-child > [aria-hidden="true"] {
    opacity: 0;
    transform: translateY(18px);
}

.trees-interna > section:first-child > div:first-child > h1 {
    opacity: 0;
    transform: translateY(-16px);
}

.trees-interna > section:first-child > p:first-of-type {
    opacity: 0;
    transform: translateY(16px);
}

/* La franja y el título entran siguiendo el sentido visual de cada inclinación. */
.trees-interna > .repositorio-investigacion__repositorio-descripcion:first-child,
.trees-interna > .repositorio-publicaciones__repositorio-descripcion:first-child,
.trees-interna > .banco-recursos__repositorio-descripcion:first-child,
.trees-interna > .especiales:first-child,
.trees-interna > .eventos-oportunidades:first-child,
.trees-interna > .medios:first-child {
    --interna-hero-desplazamiento-x: -18px;
}

.trees-interna > .blog:first-child,
.trees-interna > .cursos:first-child {
    --interna-hero-desplazamiento-x: 18px;
}

.trees-interna > section:first-child > div:first-child > [aria-hidden="true"],
.trees-interna > section:first-child > div:first-child > h1 {
    transform: translateX(var(--interna-hero-desplazamiento-x));
}

.trees-interna > section:first-child.is-hero-ready > div:first-child {
    opacity: 1;
    transition: opacity 400ms var(--hero-ease);
}

.trees-interna > section:first-child.is-hero-ready > div:first-child > [aria-hidden="true"] {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--hero-dur) var(--hero-ease),
        transform var(--hero-dur) var(--hero-ease);
    transition-delay: 120ms;
}

.trees-interna > section:first-child.is-hero-ready > div:first-child > h1 {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--hero-dur) var(--hero-ease),
        transform var(--hero-dur) var(--hero-ease);
    transition-delay: 220ms;
}

.trees-interna > section:first-child.is-hero-ready > p:first-of-type {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--hero-dur) var(--hero-ease),
        transform var(--hero-dur) var(--hero-ease);
    transition-delay: 320ms;
}

@media (prefers-reduced-motion: reduce) {
    .trees-interna > section:first-child > div:first-child,
    .trees-interna > section:first-child > div:first-child > [aria-hidden="true"],
    .trees-interna > section:first-child > div:first-child > h1,
    .trees-interna > section:first-child > p:first-of-type {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}