/* ============================= */
/* PROYECTOS - SM RACING */
/* DESKTOP */
/* ============================= */

.projects-section {
    position: relative;
    width: 100%;
    min-height: auto;

    padding: 62px 0 52px;

    background: #1a1a1a;
    overflow: hidden;

    border-bottom: 3px solid var(--sm-red);
}

/* ============================= */
/* LÍNEAS BLANCAS DE FONDO */
/* ============================= */

.projects-section .sm-white-lines.section-lines {
    z-index: 1;
    opacity: 0.55;
}

/* ============================= */
/* TÍTULO */
/* ============================= */

.projects-title-wrapper {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    margin-bottom: 36px;

    opacity: 0;
    transform: translateY(-24px);
}

.reveal-projects-section.projects-visible .projects-title-wrapper {
    animation: projectsTitleReveal 0.75s ease-out forwards;
}

.projects-title {
    margin: 0;

    font-family: var(--font-title);
    font-style: italic;

    color: var(--sm-white);

    font-size: clamp(2.6rem, 3.5vw, 4rem);
    line-height: 1;

    letter-spacing: 1px;

    transform: skewX(-10deg);
}

.projects-title-lines {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.projects-title-lines span {
    width: 32px;
    height: 16px;

    background: var(--sm-red);
    transform: skewX(-25deg);
}

/* ============================= */
/* LAYOUT DESKTOP */
/* ============================= */

.projects-layout {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 1480px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    column-gap: clamp(22px, 3.2vw, 56px);

    padding: 0 clamp(28px, 5vw, 76px);
}

.project-item {
    position: relative;

    opacity: 0;

    color: var(--sm-white);
}

/* Posiciones alternadas estilo racing */
.project-01 {
    grid-column: auto;
    margin-top: clamp(28px, 3vw, 42px);
}

.project-02 {
    grid-column: auto;
    margin-top: clamp(58px, 5.5vw, 86px);
    margin-left: 0;
}

.project-03 {
    grid-column: auto;
    margin-top: 0;
    margin-left: 0;
}

.project-04 {
    grid-column: auto;
    margin-top: clamp(42px, 4.5vw, 64px);
    margin-left: 0;
}

/* ============================= */
/* ANIMACIÓN DESKTOP */
/* ============================= */

.reveal-projects-section.projects-visible .project-01 {
    animation: projectFromBottom 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards;
}

.reveal-projects-section.projects-visible .project-02 {
    animation: projectFromTop 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.32s forwards;
}

.reveal-projects-section.projects-visible .project-03 {
    animation: projectFromBottom 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.52s forwards;
}

.reveal-projects-section.projects-visible .project-04 {
    animation: projectFromTop 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.72s forwards;
}

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

.project-image {
    position: relative;

    width: 112%;
    height: clamp(290px, 24vw, 390px);

    overflow: hidden;

    background: #111;

    clip-path: polygon(
            20% 0,
            100% 0,
            80% 100%,
            0 100%
    );

}

.project-01 .project-image,
.project-02 .project-image,
.project-03 .project-image,
.project-04 .project-image {
    margin-left: -6%;
}
.project-image img {
    width: 100%;
    height: 100%;

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

    display: block;

    transform: scale(1.04);
    transition: transform 0.55s ease;
}

.project-item:hover .project-image img {
    transform: scale(1.12);
}

.project-red-gradient,
.project-dark-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.project-red-gradient {
    background:
            linear-gradient(
                    to top,
                    rgba(224, 0, 24, 0.82) 0%,
                    rgba(224, 0, 24, 0.58) 26%,
                    rgba(0, 0, 0, 0.16) 62%,
                    rgba(0, 0, 0, 0.08) 100%
            );
}

.project-dark-gradient {
    background:
            linear-gradient(
                    to top,
                    rgba(0, 0, 0, 0.88) 0%,
                    rgba(0, 0, 0, 0.5) 28%,
                    rgba(0, 0, 0, 0.14) 65%,
                    rgba(0, 0, 0, 0.06) 100%
            );
}

/* ============================= */
/* CONTENIDO */
/* ============================= */

.project-content {
    position: absolute;
    left: 8px;
    right: 16px;
    bottom: 16px;

    z-index: 2;
}


.project-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 9px;
}

.project-heading span {
    font-family: var(--font-title);
    font-style: italic;

    font-size: clamp(2.25rem, 3.1vw, 3.35rem);

    line-height: 0.75;

    color: var(--sm-white);

    transform: skewX(-10deg);
}

.project-heading h3 {
    margin: 0 0 0 4px;

    font-family: var(--font-body);
    font-size: clamp(0.78rem, 1vw, 1.05rem);
    line-height: 1.02;
    font-weight: 500;

    color: var(--sm-white);

    transform: skewX(-10deg);
}


.project-content p {
    margin: 0;

    max-width: 96%;

    color: var(--sm-white);

    font-size: clamp(0.72rem, 0.86vw, 0.88rem);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0.35px;
}

.project-text-top {
    margin: 0 0 14px 10px;

    max-width: 280px;

    color: var(--sm-white);

    font-size: clamp(0.8rem, 0.95vw, 1rem);
    line-height: 1.12;
    font-weight: 400;
    letter-spacing: 0.3px;
}

/* ============================= */
/* TEXTO 1 Y 3 DEBAJO DE LA IMAGEN */
/* ============================= */

/* ============================= */
/* PROYECTOS 1 Y 3 */
/* SPAN + H3 DENTRO / P DEBAJO */
/* ============================= */

.project-01 .project-content,
.project-03 .project-content {
    position: static;

    left: auto;
    right: auto;
    bottom: auto;

    margin-top: -74px;

    padding-left: 6px;
    padding-right: 16px;

    z-index: 3;
}

.project-01 .project-heading,
.project-03 .project-heading {
    position: relative;
    z-index: 4;
    margin-left: 0;

    margin-bottom: 0;
}

.project-01 .project-content p,
.project-03 .project-content p {
    position: relative;
    z-index: 4;

    max-width: 96%;

    margin-top: 62px;
    padding-right: 18px;


    margin-left: -4px;

}

/* Mantiene el degradado rojo dentro de la imagen */
.project-01 .project-image .project-red-gradient,
.project-03 .project-image .project-red-gradient {
    background:
            linear-gradient(
                    to top,
                    rgba(224, 0, 24, 0.78) 0%,
                    rgba(224, 0, 24, 0.52) 26%,
                    rgba(0, 0, 0, 0.16) 62%,
                    rgba(0, 0, 0, 0.08) 100%
            );
}
/* ============================= */
/* PROYECTOS 2 Y 4 */
/* PÁRRAFOS SUPERIORES MÁS A LA DERECHA */
/* ============================= */

.project-02 .project-text-top,
.project-04 .project-text-top {
    margin-left: 52px;
    max-width: 285px;
}

/* ============================= */
/* PROYECTOS 2 Y 4 */
/* NÚMERO Y H3 MÁS PEGADOS AL INICIO DE LA IMAGEN */
/* ============================= */

.project-02 .project-content,
.project-04 .project-content {
    left: 8px;
    bottom: 18px;
}

/* ============================= */
/* KEYFRAMES */
/* ============================= */

@keyframes projectsTitleReveal {
    from {
        opacity: 0;
        transform: translateY(-24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes projectFromBottom {
    from {
        opacity: 0;
        transform: translateY(90px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes projectFromTop {
    from {
        opacity: 0;
        transform: translateY(-90px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes projectFromLeft {
    from {
        opacity: 0;
        transform: translateX(-90px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes projectFromRight {
    from {
        opacity: 0;
        transform: translateX(90px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================= */
/* TABLET */
/* ============================= */
/* ============================= */
/* TABLET */
/* ============================= */

@media (max-width: 1024px) {
    .projects-section {
        padding: 74px 0 70px;
    }

    .projects-layout {
        max-width: 920px;

        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 42px;
        row-gap: 58px;

        padding: 0 56px;
    }

    .project-01,
    .project-02,
    .project-03,
    .project-04 {
        grid-column: auto;
        margin: 0;
    }

    /* Imágenes más delgadas en tablet */
    .project-image {
        width: 100%;
        height: clamp(260px, 30vw, 330px);

        clip-path: polygon(
                18% 0,
                100% 0,
                82% 100%,
                0 100%
        );
    }

    .project-01 .project-image,
    .project-02 .project-image,
    .project-03 .project-image,
    .project-04 .project-image {
        margin-left: 0;
    }

    /* Textos superiores proyecto 2 y 4 */
    .project-02 .project-text-top,
    .project-04 .project-text-top {
        margin-left: 74px;
        margin-bottom: 16px;
        max-width: 330px;

        font-size: 1rem;
        line-height: 1.12;
    }

    /* Párrafos debajo de proyecto 1 y 3 más grandes */
    .project-01 .project-content p,
    .project-03 .project-content p {
        font-size: 0.95rem;
        line-height: 1.15;
        max-width: 94%;

        margin-top: 34px;
        margin-left: 0;
        padding-right: 10px;
    }

    /* Baja el 01/03 + h3, porque ahora están demasiado arriba */
    .project-01 .project-content,
    .project-03 .project-content {
        margin-top: -48px;
        padding-left: 10px;
        padding-right: 12px;
    }

    .project-01 .project-heading,
    .project-03 .project-heading {
        margin-bottom: 0;
    }

    .project-heading {
        gap: 10px;
    }

    .project-heading span {
        margin-left: 10px;
        font-size: 3rem;
    }

    .project-heading h3 {
        font-size: 0.95rem;
        line-height: 1.02;
        margin-left: 20px;
    }

    .projects-title-wrapper {
        margin-bottom: 44px;
    }

    .projects-title-lines span {
        width: 26px;
        height: 14px;
    }
}
/* ============================= */
/* MOBILE */
/* ============================= */
/* ============================= */
/* MOBILE GRANDE */
/* ============================= */

@media (max-width: 768px) {
    .projects-section {
        min-height: auto;
        padding: 54px 0 54px;
    }

    .projects-section .sm-white-lines.section-lines {
        z-index: 1;
        opacity: 0.35;
    }

    .projects-title-wrapper {
        gap: 10px;
        margin-bottom: 34px;
    }

    .projects-title {
        font-size: 2.15rem;
    }

    .projects-title-lines {
        gap: 5px;
    }

    .projects-title-lines span {
        width: 18px;
        height: 10px;
    }

    .projects-layout {
        position: relative;
        z-index: 3;

        display: flex;
        flex-direction: column;
        gap: 28px;

        width: 100%;
        max-width: 430px;

        margin: 0 auto;
        padding: 0 22px;
    }

    .project-item {
        width: 100%;

        display: grid;
        grid-template-columns: 48% 52%;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 12px;
        row-gap: 8px;

        margin: 0;
    }

    /* Quita márgenes raros heredados de desktop/tablet */
    .project-01,
    .project-02,
    .project-03,
    .project-04 {
        margin: 0;
        direction: ltr;
    }

    .project-02 > *,
    .project-04 > * {
        direction: ltr;
    }

    /* ============================= */
    /* IMÁGENES CUADRADAS EN MOBILE */
    /* ============================= */

    .project-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;

        margin-left: 0 !important;

        overflow: hidden;
        background: #111;

        clip-path: polygon(
                12% 0,
                100% 0,
                88% 100%,
                0 100%
        );
    }

    .project-image img {
        width: 100%;
        height: 100%;

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

        transform: scale(1.04);
    }

    /* ============================= */
    /* PROYECTOS 1 Y 3 */
    /* IMAGEN IZQUIERDA / TEXTO DERECHA */
    /* ============================= */

    .project-01 .project-image,
    .project-03 .project-image {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }

    .project-01 .project-content,
    .project-03 .project-content {
        grid-column: 2 / 3;
        grid-row: 1 / 3;

        position: static;

        margin: 0;
        padding: 0;

        align-self: center;
    }

    /* ============================= */
    /* PROYECTOS 2 Y 4 */
    /* TEXTO IZQUIERDA / IMAGEN DERECHA */
    /* ============================= */

    .project-02,
    .project-04 {
        grid-template-columns: 52% 48%;
    }

    .project-02 .project-image,
    .project-04 .project-image {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }

    .project-02 .project-content,
    .project-04 .project-content {
        grid-column: 1 / 2;
        grid-row: 1 / 2;

        position: static;

        margin: 0;
        padding: 0;

        align-self: end;
    }

    .project-02 .project-text-top,
    .project-04 .project-text-top {
        grid-column: 1 / 2;
        grid-row: 2 / 3;

        margin: 0;
        padding: 0;

        align-self: start;
    }

    /* ============================= */
    /* HEADING MOBILE */
    /* ============================= */

    .project-heading {
        display: flex;
        align-items: flex-start;
        gap: 10px;

        margin: 0 0 12px 0;
    }

    .project-heading span {
        position: relative;
        display: inline-block;

        font-family: var(--font-title);
        font-style: italic;

        font-size: 2.45rem;
        line-height: 0.8;

        color: var(--sm-white);

        transform: skewX(-10deg);
    }

    /* Línea roja debajo del número */
    .project-heading span::after {
        content: "";

        position: absolute;
        left: 1px;
        bottom: -8px;

        width: 36px;
        height: 2px;

        background: var(--sm-red);
        transform: skewX(-18deg);
    }

    .project-heading h3 {
        margin: 0;

        font-family: var(--font-body);
        font-size: 0.88rem;
        line-height: 1.05;
        font-weight: 600;

        color: var(--sm-white);

        transform: skewX(-10deg);
    }

    /* ============================= */
    /* TEXTOS MOBILE */
    /* ============================= */
    /* Ajuste vertical solo para proyecto 1 y 3 */
    .project-01 .project-heading,
    .project-03 .project-heading {
        transform: translateY(-12px);
        margin-bottom: 6px;
    }
    .project-content p,
    .project-text-top {
        max-width: 100%;

        color: var(--sm-white);

        font-size: 0.82rem;
        line-height: 1.16;
        font-weight: 300;
        letter-spacing: 0.25px;
    }

    .project-01 .project-content p,
    .project-03 .project-content p {
        margin: 0;
        padding: 0;
        max-width: 100%;
    }

    .project-02 .project-text-top,
    .project-04 .project-text-top {
        max-width: 100%;
    }

    /* ============================= */
    /* GRADIENTES MOBILE */
    /* ============================= */

    .project-red-gradient {
        background:
                linear-gradient(
                        to top,
                        rgba(224, 0, 24, 0.72) 0%,
                        rgba(224, 0, 24, 0.42) 34%,
                        rgba(0, 0, 0, 0.12) 70%,
                        rgba(0, 0, 0, 0.04) 100%
                );
    }

    .project-dark-gradient {
        background:
                linear-gradient(
                        to top,
                        rgba(0, 0, 0, 0.65) 0%,
                        rgba(0, 0, 0, 0.34) 36%,
                        rgba(0, 0, 0, 0.08) 72%,
                        rgba(0, 0, 0, 0.03) 100%
                );
    }

    /* ============================= */
    /* ANIMACIÓN MOBILE MÁS SUAVE */
    /* ============================= */

    .reveal-projects-section.projects-visible .project-01 {
        animation: projectFromLeft 1.45s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards;
    }

    .reveal-projects-section.projects-visible .project-02 {
        animation: projectFromRight 1.45s cubic-bezier(0.16, 1, 0.3, 1) 0.38s forwards;
    }

    .reveal-projects-section.projects-visible .project-03 {
        animation: projectFromLeft 1.45s cubic-bezier(0.16, 1, 0.3, 1) 0.64s forwards;
    }

    .reveal-projects-section.projects-visible .project-04 {
        animation: projectFromRight 1.45s cubic-bezier(0.16, 1, 0.3, 1) 0.90s forwards;
    }
}

/* ============================= */
/* MOBILE SMALL */
/* ============================= */

@media (max-width: 480px) {
    .projects-section {
        padding: 58px 0 58px;
    }

    .projects-title {
        font-size: 1.85rem;
    }

    .projects-title-wrapper {
        gap: 8px;
        margin-bottom: 34px;
    }

    .projects-title-lines span {
        width: 14px;
        height: 9px;
    }

    .projects-layout {
        gap: 28px;
        padding: 0 10px;
    }

    .project-item {
        grid-template-columns: 49% 51%;
        gap: 8px;
    }

    .project-02,
    .project-04 {
        grid-template-columns: 51% 49%;
    }

    .project-heading span {
        font-size: 2.25rem;
    }

    .project-heading h3 {
        font-size: 0.82rem;
    }

    .project-content p,
    .project-text-top {
        font-size: 0.68rem;
        line-height: 1.13;
    }
}

/* ============================= */
/* MOBILE EXTRA SMALL */
/* ============================= */

@media (max-width: 360px) {
    .projects-title {
        font-size: 1.65rem;
    }

    .projects-layout {
        padding: 0 8px;
    }

    .project-heading span {
        font-size: 2rem;
    }

    .project-heading h3 {
        font-size: 0.76rem;
    }

    .project-content p,
    .project-text-top {
        font-size: 0.62rem;
    }
}