/* ==================== TEXTO PRINCIPAL CON PRESENTACIÓN ==================== */

.landing-title,
.landing-title-two {
    color: var(--color-text-tertiary);
    font-family: var(--font-cabinet);
    font-size: var(--font-size-1400);
    font-weight: 700;
    line-height: 1.2;
}

.landing-title-three {
    color: var(--color-text-tertiary);
    font-family: var(--font-cabinet);
    font-size: var(--font-size-300);
    margin-top: 1.5rem;
}

@media (min-width: 700px) {

    .landing-title,
    .landing-title-two {
        font-size: var(--font-size-1600);
    }

    .landing-title-three {
        font-size: var(--font-size-500);
    }
}

/* ==================== ENCABEZADO ANIMADO ==================== */

/* Contenedor principal */
.heading-landing-title {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    --hero-bg: url("/static/img/claudio_working_far.webp");
    background-image: none;
}

/* Overlay negro opaco tras animación */
.heading-landing-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--degraded-bg-color);
    z-index: 1;
}

/* Imagen animada inicial */
.heading-landing-title::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    animation: heroBgReveal 0.5s ease-out forwards;
}

/* Contenido siempre encima */
.heading-landing-title>* {
    position: relative;
    z-index: 2;
}

/* Keyframes */
@keyframes heroBgReveal {
    0% {
        opacity: 0;
        filter: brightness(0.25) saturate(0.85);
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        filter: brightness(1) saturate(1);
        transform: scale(1);
    }
}

/* Retraso del texto después del fondo */
.heading-landing-title .landing-title,
.heading-landing-title .landing-title-two,
.heading-landing-title .landing-title-three {
    opacity: 0;
    transform: translateY(25px);
    animation: heroTextIn 0.85s ease-out forwards;
    animation-delay: 0.5s;
}

/* Retraso */
.heading-landing-title .landing-title-two {
    animation-delay: 1.15s;
}

/* Retraso */
.heading-landing-title .landing-title-three {
    animation-delay: 1.80s;
}

/* Keyframes */
@keyframes heroTextIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== FLECHA SCROLL ==================== */

.heading-landing-title .scroll-arrow-wrap {
    display: flex;
    justify-content: flex-start;
    opacity: 0;
    transform: translateY(25px);
    animation: heroTextIn 0.85s ease-out forwards;
    animation-delay: 1.80s;
}

.scroll-arrow {
    font-size: 2.5rem;
    color: var(--color-accent-aqua-secondary);
    animation: arrow-float 2.5s ease-in-out infinite;
    animation-delay: 2.25s;
    animation-fill-mode: both;
    /* Evita brinco al iniciar */
}

@keyframes arrow-float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(35px);
    }

    100% {
        transform: translateY(0);
    }
}











/* Texto del bloque */
.stack-title {
    font-size: 2.3rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 20px;
}

.landing-stack-row-item {
    display: flex;
    /* padding-top: 25px; */
    justify-content: center;
    text-align: center;
}

.landing-stack-group-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 35px;
    gap: 40px;
    flex-wrap: wrap;
}


/* Íconos SVG */
.landing-landing-stack-icon-img {
    width: 75px;
    height: 75px;
    object-fit: contain;
    transition: transform 0.35s ease, filter 0.35s ease;
    cursor: pointer;
}

.landing-landing-stack-icon-img:hover {
    transform: scale(1.12);
    filter: var(--animation-icon);
}


/* ==================== IMÁGENES ==================== */

.landing-about-me {
    text-align: center;
    margin-bottom: 2.5rem;
}

@media (min-width: 1000px) {
    .landing-about-me {
        margin-bottom: 0;
    }
}

/* Imagen del bloque */
.landing-img-main {
    height: auto;
    max-width: clamp(300px, 50vw, 450px);
}

/* Imagen del CV con fondo blanco de origen */
.landing-img-cv {
    height: auto;
    max-width: clamp(300px, 50vw, 450px);
    box-shadow: var(--degraded-box_shadow-card);
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* ==================== CONTACT CARD ==================== */

/* Configuración de la card */
.landing-contact-card {
    width: 90%;
    height: 125%;
    border-radius: var(--card-radius);
    padding: 25px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.landing-contact-card-name-role {
    margin-bottom: 25px;
}

/* Nombre dentro de la card */
.landing-contact-card-name {
    font-size: var(--font-size-400);
    color: var(--color-text-tertiary);
    font-weight: 700;
    /* margin-bottom: 15px; */
}

/* Rol o profesión */
.landing-contact-card-role {
    font-size: var(--font-size-150);
    color: var(--color-accent-aqua-primary);
    margin-bottom: 25px;
}

@media (min-width: 1050px) {
    .landing-contact-card {
        height: 100%;
    }

}

@media (min-width: 750px) {
    .landing-contact-card {
        /* height: 100%; */
        width: 95%;
        max-width: 650px;
        flex-direction: row;
        align-items: center;
    }

    .landing-contact-card-name-role {
        margin-bottom: 0;
    }

    .landing-contact-card-name {
        font-size: var(--font-size-500);
    }

    .landing-contact-card-role {
        font-size: var(--font-size-200);
        margin-bottom: 0;
    }
}

/* Contenedor vertical que garantiza un dato de contacto debajo del otro */
.landing-contact-card-info {
    font-size: var(--font-size-150);
    display: flex;
    flex-direction: column;
    padding-left: 25px;
    gap: 15px;
    /* margin-bottom: 15px; */
}

/* Cada item: icono + texto en una fila */
.landing-contact-card-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Iconos */
.landing-contact-card-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* Iconos hover */
.landing-contact-card-item:hover .landing-contact-card-icon {
    transform: scale(1.35);
    /* filter: var(--animation-icon); */
}

/* Links */
.landing-contact-card-item a {
    text-decoration: none;
    color: var(--color-text-tertiary);
    font-weight: 500;
}

/* Links hover */
.landing-contact-card-item a:hover {
    text-decoration: underline;
}

/* ==================== CAROUSEL ==================== */

.slide-carousel-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
}

.carousel-item {
    position: relative;
}

.slide-carousel-img {
    display: block;
    width: 100%;
    height: clamp(400px, 60vh, 1000px);
    object-fit: cover;
    object-position: center;
}

.slide-carousel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.55) 50%,
            rgba(0, 0, 0, 0.00) 100%);
}

/* Ajustes del texto */
.carousel-scope .carousel-caption {
    position: absolute;
    inset: 0;
    /* ocupa todo el alto/ancho del slide */
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: flex-start; */
    padding-left: clamp(1rem, 6vw, 4rem);
    padding-right: clamp(1rem, 6vw, 4rem);
}

/* Limitación de ancho del texto en pantallas grandes */
@media (min-width: 992px) {
    .carousel-scope .carousel-caption {
        max-width: 720px;
    }
}

.slide-carousel-title {
    font-family: var(--font-cabinet);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-800);
    font-weight: 700;
    text-align: start;
    max-width: 500px;
    margin-bottom: 35px;
}

/* Indicadores */
.carousel-scope .carousel-indicators {
    margin-bottom: 1.25rem;
    gap: 10px;
}

.carousel-scope .carousel-indicators [data-bs-target] {
    width: 46px;
    height: 6px;
    opacity: 0.50;
    background-color: var(--color-accent-aqua-primary);
}

.carousel-scope .carousel-indicators .active {
    opacity: 1;
}