/* =======================================================
   OUR PROJECTS — UI/UX
   Archivo: projects.css
   ======================================================= */

body.page-template-page-projects {
    overflow-x: hidden;
}

.custom-fiea-projects {
    --projects-blue: #0A3D6B;
    --projects-blue-dark: #062E52;
    --projects-green: #2E8B57;
    --projects-green-light: #EAF5EF;
    --projects-text: #3F4B59;
    --projects-muted: #6D7885;
    --projects-surface: #F8F9FA;
    --projects-line: rgba(10, 61, 107, 0.12);
    --projects-shadow:
        0 24px 58px rgba(10, 61, 107, 0.13);

    overflow: visible;

    color: var(--projects-text);
    background: #FFFFFF;

    font-family: "Inter", Arial, sans-serif;
}

.custom-fiea-projects *,
.custom-fiea-projects *::before,
.custom-fiea-projects *::after {
    box-sizing: border-box;
}

.custom-fiea-projects .container {
    width: min(100%, 1240px);
    max-width: 1240px;

    margin-right: auto;
    margin-left: auto;

    padding-right: 24px;
    padding-left: 24px;
}

/* =======================================================
   HERO
   ======================================================= */

.custom-fiea-projects .hero-projects {
    position: relative !important;
    left: 50% !important;

    display: grid;

    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 690px;

    margin-top: -140px !important;
    padding: 235px 0 150px !important;

    place-items: center;
    overflow: hidden;

    border: 0 !important;
    border-radius: 0 !important;

    text-align: center;

    transform: translateX(-50%) !important;
    animation: none !important;

    background-color: var(--projects-blue);
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.custom-fiea-projects .hero-projects::after {
    content: "";

    position: absolute;
    right: -100px;
    bottom: -150px;

    width: 430px;
    height: 430px;

    border:
        1px solid rgba(255, 255, 255, 0.13);

    border-radius: 50%;

    box-shadow:
        0 0 0 65px rgba(255, 255, 255, 0.035),
        0 0 0 130px rgba(255, 255, 255, 0.025);

    pointer-events: none;
}

.custom-fiea-projects .projects-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, 830px);

    text-align: center;
}

.custom-fiea-projects .projects-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    color: #BCE2CB;

    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.2em;

    text-transform: uppercase;
}

.custom-fiea-projects .projects-hero-content h1 {
    margin: 0 0 24px !important;

    color: #FFFFFF !important;

    font-family: inherit !important;

    font-size:
        clamp(3.25rem, 7vw, 6rem) !important;

    font-weight: 850 !important;

    letter-spacing: -0.055em;
    line-height: 0.96 !important;

    text-align: center !important;
    text-transform: none !important;

    text-shadow:
        0 5px 26px rgba(0, 0, 0, 0.24);
}

.custom-fiea-projects .projects-hero-content p {
    max-width: 690px;

    margin: 0 auto !important;

    color:
        rgba(255, 255, 255, 0.94) !important;

    font-size:
        clamp(1.05rem, 2vw, 1.3rem);

    line-height: 1.7;
    text-align: center;

    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.22);
}

/* =======================================================
   NAVEGACIÓN ENTRE PROYECTOS
   ======================================================= */

.custom-fiea-projects .projects-jump-nav {
    position: relative;
    z-index: 20;

    display: flex;

    width: min(calc(100% - 36px), 760px);

    margin: -38px auto 0;
    padding: 9px;

    gap: 8px;

    border:
        1px solid rgba(255, 255, 255, 0.72);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 18px 45px rgba(10, 61, 107, 0.16);
}

.custom-fiea-projects .projects-jump-nav a {
    display: inline-flex;

    min-height: 54px;
    flex: 1 1 0;

    align-items: center;
    justify-content: center;

    gap: 10px;
    padding: 12px 20px;

    border-radius: 999px;

    color: var(--projects-blue);

    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.3;

    text-align: center;
    text-decoration: none !important;

    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

.custom-fiea-projects .projects-jump-nav a:hover,
.custom-fiea-projects .projects-jump-nav a:focus-visible {
    color: #FFFFFF;
    background: var(--projects-green);

    outline: none;
}

/* =======================================================
   SECCIONES DE PROYECTOS
   ======================================================= */

.custom-fiea-projects .project-showcase {
    position: relative;
    left: 50%;

    width: 100vw;
    max-width: 100vw;

    padding:
        clamp(90px, 9vw, 135px) 0;

    scroll-margin-top: 100px;

    transform: translateX(-50%);

    background: #FFFFFF;
}

.custom-fiea-projects
.project-showcase--alausi {
    border-top:
        1px solid var(--projects-line);

    background: var(--projects-surface);
}

.custom-fiea-projects .project-story {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, 0.95fr);

    align-items: center;

    gap: clamp(54px, 7vw, 96px);
}

.custom-fiea-projects
.project-story--image-left {
    grid-template-columns:
        minmax(380px, 0.95fr)
        minmax(0, 1.05fr);
}

.custom-fiea-projects .project-copy,
.custom-fiea-projects .project-media {
    min-width: 0;
}

/* =======================================================
   ENCABEZADOS
   ======================================================= */

.custom-fiea-projects .project-header {
    margin: 0 0 32px;

    text-align: left;
}

.custom-fiea-projects .project-number {
    display: block;

    margin-bottom: 13px;

    color: var(--projects-green);

    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.custom-fiea-projects .project-header h2 {
    max-width: 720px;

    margin: 0 0 19px !important;

    color: var(--projects-blue) !important;

    font-family: inherit !important;

    font-size:
        clamp(2.45rem, 4.4vw, 4.15rem) !important;

    font-weight: 850 !important;

    letter-spacing: -0.045em;
    line-height: 1.02 !important;

    text-align: left !important;
    text-transform: none !important;
}

.custom-fiea-projects .location-tag {
    display: inline-flex;

    max-width: 100%;

    margin: 0;
    padding: 10px 17px;

    align-items: center;
    gap: 9px;

    border-radius: 999px;

    color: #FFFFFF !important;
    background: var(--projects-green);

    font-size: 0.83rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    line-height: 1.35;
}

.custom-fiea-projects .location-tag i {
    flex: 0 0 auto;
}

/* =======================================================
   MÉTRICAS
   ======================================================= */

.custom-fiea-projects .project-metrics {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin: 0 0 42px;
}

.custom-fiea-projects .project-metric {
    position: relative;

    display: flex;

    min-height: 126px;

    padding: 23px;

    align-items: center;
    gap: 16px;

    overflow: hidden;

    border:
        1px solid var(--projects-line);

    border-radius: 18px;

    background: #FFFFFF;

    box-shadow:
        0 13px 30px rgba(10, 61, 107, 0.09);

    transition:
        border-color 0.26s ease,
        box-shadow 0.26s ease,
        transform 0.26s ease;
}

.custom-fiea-projects .project-metric::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 4px;

    background: var(--projects-green);
}

.custom-fiea-projects .project-metric:hover {
    border-color:
        rgba(46, 139, 87, 0.32);

    box-shadow:
        0 18px 38px rgba(10, 61, 107, 0.13);

    transform: translateY(-4px);
}

.custom-fiea-projects .project-metric-icon {
    display: grid;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    place-items: center;

    border-radius: 14px;

    color: var(--projects-green);
    background: var(--projects-green-light);

    font-size: 1.25rem;
}

.custom-fiea-projects .project-counter {
    display: block;

    color: var(--projects-green);

    font-size:
        clamp(2.05rem, 4vw, 3.15rem);

    font-weight: 850;

    letter-spacing: -0.045em;
    line-height: 1;

    font-variant-numeric: tabular-nums;
}

.custom-fiea-projects .project-metric p {
    margin: 9px 0 0;

    color: var(--projects-blue);

    font-size: 0.73rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    line-height: 1.4;

    text-transform: uppercase;
}

/* Porcentajes */

.custom-fiea-projects
.project-metric--percent {
    display: block;

    min-height: 150px;

    padding: 24px 23px 22px;
}

.custom-fiea-projects
.project-metric--percent
.project-counter {
    font-size:
        clamp(2.7rem, 5vw, 3.85rem);
}

.custom-fiea-projects .project-progress {
    height: 8px;

    margin-top: 18px;

    overflow: hidden;

    border-radius: 999px;

    background: #E5EAEE;
}

.custom-fiea-projects
.project-progress-bar {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--projects-green),
            #52AE78
        );

    transition:
        width 1.45s
        cubic-bezier(0.22, 1, 0.36, 1);
}

.custom-fiea-projects
.project-progress-bar.is-animated {
    width: var(--progress-value, 0%);
}

/* =======================================================
   TEXTOS
   ======================================================= */

.custom-fiea-projects .project-narrative {
    max-width: 660px;
}

.custom-fiea-projects .project-kicker {
    display: block;

    margin-bottom: 10px;

    color: var(--projects-green);

    font-size: 0.8rem;
    font-weight: 850;
    letter-spacing: 0.16em;
    line-height: 1.4;

    text-transform: uppercase;
}

.custom-fiea-projects .project-narrative h3 {
    margin: 0 0 21px !important;

    color: var(--projects-blue) !important;

    font-family: inherit !important;

    font-size:
        clamp(1.65rem, 3vw, 2.35rem) !important;

    font-weight: 820 !important;

    letter-spacing: -0.025em;
    line-height: 1.18 !important;

    text-transform: none !important;
}

.custom-fiea-projects .project-narrative p {
    margin: 0 0 17px;

    color: var(--projects-text);

    font-size: 1.04rem;
    line-height: 1.8;
}

.custom-fiea-projects
.project-narrative strong {
    color: var(--projects-blue);
}

/* Lista de infraestructura */

.custom-fiea-projects .infrastructure-list {
    margin-top: 30px;
    padding: 25px 28px;

    border: 0;
    border-left:
        4px solid var(--projects-green);

    border-radius: 0 17px 17px 0;

    background: #F4F7F9;
}

.custom-fiea-projects
.infrastructure-list h4 {
    margin: 0 0 16px;

    color: var(--projects-blue);

    font-size: 1.18rem;
    font-weight: 820;
}

.custom-fiea-projects
.infrastructure-list ul {
    display: grid;

    margin: 0;
    padding: 0;

    gap: 10px;

    list-style: none;
}

.custom-fiea-projects
.infrastructure-list li {
    position: relative;

    padding-left: 28px;

    color: var(--projects-text);

    line-height: 1.55;
}

.custom-fiea-projects
.infrastructure-list li::before {
    content: "✓";

    position: absolute;
    top: 0;
    left: 0;

    color: var(--projects-green);

    font-weight: 900;
}

/* =======================================================
   IMÁGENES ESTÁTICAS
   ======================================================= */

.custom-fiea-projects .project-media {
    position: relative;
    isolation: isolate;

    margin: 0;

    overflow: visible;

    animation: none !important;
    transform: none !important;
}

.custom-fiea-projects .project-media img,
.custom-fiea-projects
.project-media-placeholder {
    display: block;

    width: 100%;
    aspect-ratio: 5 / 4;

    overflow: hidden;

    object-fit: cover;
    object-position: center;

    background:
        linear-gradient(
            145deg,
            #0A3D6B,
            #062E52
        );

    box-shadow: var(--projects-shadow);

    animation: none !important;
    transform: none !important;
    transition: none !important;
}

.custom-fiea-projects
.project-media--curingue img,
.custom-fiea-projects
.project-media--curingue
.project-media-placeholder {
    border-radius:
        86px 24px 86px 24px;
}

.custom-fiea-projects
.project-media--alausi img,
.custom-fiea-projects
.project-media--alausi
.project-media-placeholder {
    border-radius:
        24px 86px 24px 86px;
}

.custom-fiea-projects
.project-media-placeholder {
    display: grid;

    place-content: center;
    gap: 16px;

    color:
        rgba(255, 255, 255, 0.9);

    text-align: center;
}

.custom-fiea-projects
.project-media-placeholder i {
    color: #BCE2CB;

    font-size:
        clamp(3rem, 7vw, 5rem);
}

.custom-fiea-projects
.project-media-placeholder span {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.15em;

    text-transform: uppercase;
}

.custom-fiea-projects
.project-media-corner {
    position: absolute;
    z-index: -1;

    width: 105px;
    height: 105px;

    border-color: var(--projects-green);
    border-style: solid;

    pointer-events: none;
}

.custom-fiea-projects
.project-media--curingue
.project-media-corner {
    top: -14px;
    right: -14px;

    border-width: 7px 7px 0 0;
    border-radius: 0 34px 0 0;
}

.custom-fiea-projects
.project-media--alausi
.project-media-corner {
    bottom: -14px;
    left: -14px;

    border-width: 0 0 7px 7px;
    border-radius: 0 0 0 34px;
}

@media (min-width: 1280px) {
    .custom-fiea-projects
    .project-story--image-right
    .project-media {
        margin-right: -28px;
    }

    .custom-fiea-projects
    .project-story--image-left
    .project-media {
        margin-left: -28px;
    }
}

/* =======================================================
   ANIMACIONES
   Las imágenes no utilizan esta clase.
   ======================================================= */

.custom-fiea-projects .projects-reveal {
    opacity: 0;

    transform: translateY(24px);

    transition:
        opacity 0.72s ease,
        transform 0.72s ease;
}

.custom-fiea-projects
.projects-reveal.is-visible {
    opacity: 1;

    transform: translateY(0);
}

/* =======================================================
   TABLETS
   ======================================================= */

@media (max-width: 980px) {
    .custom-fiea-projects .project-story,
    .custom-fiea-projects
    .project-story--image-left {
        grid-template-columns: 1fr;

        gap: 52px;
    }

    .custom-fiea-projects
    .project-story--image-left
    .project-media {
        grid-row: 2;
    }

    .custom-fiea-projects .project-copy,
    .custom-fiea-projects
    .project-narrative {
        max-width: 780px;
    }

    .custom-fiea-projects
    .project-media {
        width: min(100%, 760px);

        margin: 0 auto;
    }

    .custom-fiea-projects
    .project-media img,
    .custom-fiea-projects
    .project-media-placeholder {
        aspect-ratio: 16 / 10;
    }
}

/* =======================================================
   MÓVILES
   ======================================================= */

@media (max-width: 680px) {
    .custom-fiea-projects .container {
        padding-right: 18px;
        padding-left: 18px;
    }

    .custom-fiea-projects
    .hero-projects {
        min-height: 610px;

        padding:
            205px 0 120px !important;
    }

    .custom-fiea-projects
    .projects-hero-content h1 {
        font-size:
            clamp(
                2.85rem,
                15vw,
                4.2rem
            ) !important;
    }

    .custom-fiea-projects
    .projects-jump-nav {
        width: calc(100% - 28px);

        margin-top: -32px;

        border-radius: 24px;
    }

    .custom-fiea-projects
    .projects-jump-nav a {
        min-height: 60px;

        padding: 11px 10px;

        border-radius: 17px;

        font-size: 0.76rem;
    }

    .custom-fiea-projects
    .projects-jump-nav a i {
        display: none;
    }

    .custom-fiea-projects
    .project-showcase {
        padding: 78px 0;
    }

    .custom-fiea-projects
    .project-header h2 {
        font-size:
            clamp(
                2.25rem,
                11vw,
                3.2rem
            ) !important;
    }

    .custom-fiea-projects
    .location-tag {
        align-items: flex-start;

        border-radius: 16px;
    }

    .custom-fiea-projects
    .project-metrics {
        grid-template-columns: 1fr;
    }

    .custom-fiea-projects
    .project-metric {
        min-height: 112px;
    }

    .custom-fiea-projects
    .project-media img,
    .custom-fiea-projects
    .project-media-placeholder {
        aspect-ratio: 4 / 3;
    }

    .custom-fiea-projects
    .project-media--curingue img,
    .custom-fiea-projects
    .project-media--curingue
    .project-media-placeholder {
        border-radius:
            55px 18px 55px 18px;
    }

    .custom-fiea-projects
    .project-media--alausi img,
    .custom-fiea-projects
    .project-media--alausi
    .project-media-placeholder {
        border-radius:
            18px 55px 18px 55px;
    }

    .custom-fiea-projects
    .project-media-corner {
        width: 72px;
        height: 72px;
    }

    .custom-fiea-projects
    .infrastructure-list {
        padding: 23px 21px;
    }
}

/* Accesibilidad */

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

    .custom-fiea-projects
    .projects-reveal {
        opacity: 1;

        transform: none;
    }
}