/* ========================================
   PROYECTO SINGLE
======================================== */

.proyecto-single {
    width: 100%;
}

/* Hero */
.project-hero {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.project-hero-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.project-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    
    /* ⭐ Zoom out inicial */
    transform: scale(1.05);
    transition: transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center center;
}

.project-hero-image img.loaded {
    transform: scale(1);
}

/* Overlay gradiente abajo */
.project-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* Título encima de la imagen */
.project-hero-titulo {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 2;
    margin: 0;
    font-family: var(--font-serif);
    font-size: 104px;
    font-weight: 200;
    /* letter-spacing: -2px; */
    line-height: 1;
    color: var(--color-light);
    /* text-transform: uppercase; */
}


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

@media (max-width: 1024px) {
    .project-hero {
        height: 90vh;
        padding: 0;
        margin: 0;
    }
    
    .project-hero-image {
        height: 100%;
    }

    .project-hero-titulo {
        font-size: 52px;
        bottom: 30px;
        left: 30px;
    }
}


/* Responsive */
@media (max-width: 768px) {
    .project-hero {
        height: 100vh;
        padding: 0;
        margin: 0;
    }
    
    .project-hero-image {
        height: 100%;
    }

    .project-hero-titulo {
        font-size: 52px;
        bottom: 30px;
        left: 20px;
    }
}




/* Intro */
.project-intro {
    padding: 80px 20px;
    background-color: var(--color-background);
}

.intro-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-bottom: 160px;
    padding: 0px 10px;
}

.intro-left {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.intro-titulo {
    font-family: var(--font-serif);
    /* font-size: 56px; */
    font-size: 50px;

    letter-spacing: -1px;
    font-weight: 100;
    line-height: 0.9;
    margin: 0;
    color: var(--color-dark);
    width: 80%;
}

.intro-texto {
    font-family: var(--font-texts);
    font-size: 20px;
    line-height: 1.3;
    color: var(--color-dark);
    font-weight: 300;
    letter-spacing: -1px;
}

.intro-texto p {
    margin-bottom: 20px;
}

/* Quote */
.intro-quote-container {
    margin: 60px 0;
    padding: 0px 10px;
}

.intro-quote {
    font-family: var(--font-serif);
    font-size: 38px;
    letter-spacing: -0.5px;
    font-weight: 100;
    line-height: 1.1;
    margin: 0;
    color: var(--color-dark);
    border: none;
    padding: 0;
    width: 65%;
}

/* Imágenes */
.intro-images {
    padding-left: 0px;
    padding-right: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 80px;
    align-items: flex-end; /* Alineadas por abajo */
}

.intro-image-vertical img,
.intro-image-horizontal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Imagen vertical - proporción 4:5 */
.intro-image-vertical {
    width: 100%;
    aspect-ratio: 4 / 5;
}

/* Imagen horizontal - proporción 5:4 */
.intro-image-horizontal {
    width: 100%;
    aspect-ratio: 5 / 4;
}


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

@media (max-width: 1024px) {
    .project-intro {
        padding: 0vh 30px 70px;
    }
    
    .intro-container {
        display: flex;
        flex-direction: column;
        gap: 25px;
        margin-bottom: 80px;
        padding: 0;
    }
    
    .intro-left {
        gap: 25px;
    }
    
    .intro-titulo {
        display: flex;
        align-items: center;
        /* height: 10vh;  */
        font-size: 40px;
        line-height: 0.95;
    }
    
    .intro-texto {
        font-size: 19px;
        width: 80%;
        line-height: 1.3;
    }
    
    .intro-texto p {
        margin-bottom: 18px;
    }
    
    /* Quote */
    .intro-quote-container {
        margin: 50px 0;
        padding: 0;
    }
    
    .intro-quote {
        font-size: 32px; /* ⭐ Intermedio entre desktop (38px) y móvil (26px) */
        width: 85%; /* ⭐ Más estrecho que móvil (100%) */
        line-height: 1.1;
    }
    
    /* Imágenes */
    .intro-images {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 60px;
        padding: 0;
    }
    
    /* Mantener proporciones originales en tablet */
    .intro-image-vertical {
        width: 100%;
        aspect-ratio: 4/5;
    }

    .intro-image-horizontal {
        width: 100%;
        aspect-ratio: 5/4;
    }
}



@media (max-width: 768px) {
    .project-intro {
        padding: 0vh 20px 60px; /* ⭐ 20vh top para alinear con hero 80vh */
    }
    
    .intro-container {
        display: flex;
        flex-direction: column;
        gap: 0px;
        margin-bottom: 60px;
        padding: 0;
    }
    
    .intro-left {
        gap: 20px;
    }
    
    .intro-titulo {
        display: flex;
        /* justify-content: flex-start;
        align-self: center; */
        align-items: center; 
        /* height: 15vh; */
        font-size: 46px;
        line-height: 1;
        width:100%;
        padding: 40px 0px 20px 0px;

    }
    
    .intro-texto {
        font-size: 18px;
        width: 80%;
        line-height: 1.3;
    }
    
    .intro-texto p {
        margin-bottom: 15px;
    }
    
    /* Quote */
    .intro-quote-container {
        margin: 40px 0;
        padding: 0;
    }
    
    .intro-quote {
        font-size: 26px;
        width: 100%; /* ⭐ Ancho completo en móvil */
        line-height: 1.1;
    }
    
    /* Imágenes */
    .intro-images {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 40px;
        padding: 0;
    }
    
    /* ⭐ Todas las imágenes con ratio 4/5 en móvil */
    .intro-image-vertical {
        width: 100%;
        aspect-ratio: 4/5; /* ⭐ Todas verticales */
    }

    .intro-image-horizontal {
        width: 100%;
        aspect-ratio: 5/4; 
    }
}

@media (max-width: 480px) {
    .project-intro {
        padding: 0vh 20px 40px;
    }
    
    .intro-titulo {
        font-size: 40px;
        width:100%;
        padding: 40px 0px 20px 0px;

    }
    
    .intro-texto {
        font-size: 16px;
    }
    
    .intro-quote {
        font-size: 34px;
    }
}




/* Antes y Después */
.project-antes-despues {
    padding: 80px 20px;
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding-bottom: 160px;
}

.antes-despues-top {
    /* display: grid;
    grid-template-columns: 1fr 1fr; */
    display: flex;
    flex-direction: row;
    gap: 80px;
    padding: 0px 10px;
}

.antes-despues-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.antes-despues-titulo {
    font-family: var(--font-serif);
    font-size: 56px;
    letter-spacing: -1px;
    font-weight: 100;
    line-height: 0.9;
    margin: 0;
    color: var(--color-dark);
}

.antes-despues-texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-family: var(--font-texts);
    font-size: 20px;
    line-height: 1.3;
    color: var(--color-dark);
    font-weight: 300;
    letter-spacing: -1px;
}

.antes-despues-texto p {
    margin-bottom: 20px;
}

/* Comparador de imágenes */
.image-compare {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    cursor: ew-resize;
}

.image-after {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.image-before-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.image-before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-slider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background-color: var(--color-light);
    transform: translateX(-50%);
    cursor: ew-resize;
    z-index: 10;
}

.slider-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: var(--color-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.slider-button svg {
    width: 20px;
    height: 20px;
    color: var(--color-dark);
}




/* Responsive */
/* ========================================
   RESPONSIVE TABLET
======================================== */

@media (max-width: 1024px) {
    .project-antes-despues {
        padding: 70px 0;
        gap: 50px;
        padding-bottom: 120px;
    }
    
    .antes-despues-top {
        flex-direction: column;
        gap: 50px;
        padding: 0 30px;
    }
    
    .antes-despues-left {
        gap: 25px;
    }
    
    .antes-despues-titulo {
        font-size: 50px;
        line-height: 0.95;
    }
    
    .antes-despues-texto {
        font-size: 19px;
        line-height: 1.3;
    }
    
    .antes-despues-texto p {
        margin-bottom: 18px;
    }
    
    /* ⭐ Comparador a sangre con ratio 5/4 */
    .image-compare {
        width: 100vw;
        aspect-ratio: 5/4; /* ⭐ Horizontal en tablet */
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Ajustar slider para tablet */
    .slider-button {
        width: 55px;
        height: 55px;
    }
    
    .slider-button svg {
        width: 18px;
        height: 18px;
    }
}


@media (max-width: 768px) {
    .project-antes-despues {
        padding: 60px 0; /* ⭐ Sin padding lateral para que el comparador vaya a sangre */
        gap: 40px;
        padding-bottom: 80px;
    }
    
    .antes-despues-top {
        flex-direction: column;
        gap: 40px;
        padding: 0 20px; /* ⭐ Solo el texto tiene padding */
    }
    
    .antes-despues-left {
        gap: 20px;
    }
    
    .antes-despues-titulo {
        font-size: 46px;
        line-height: 1;
    }
    
    .antes-despues-texto {
        font-size: 18px;
        line-height: 1.3;
    }
    
    .antes-despues-texto p {
        margin-bottom: 15px;
    }
    
    /* ⭐ Comparador a sangre con ratio 5/4 */
    .image-compare {
        width: 100vw; /* ⭐ Ancho completo de viewport (a sangre) */
        aspect-ratio: 5/4; /* ⭐ Proporción horizontal */
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Ajustar slider para móvil */
    .slider-button {
        width: 50px;
        height: 50px;
    }
    
    .slider-button svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .project-antes-despues {
        padding: 40px 0 60px;
    }
    
    .antes-despues-top {
        gap: 30px;
    }
    
    .antes-despues-titulo {
        font-size: 40px;
    }
    
    .antes-despues-texto {
        font-size: 16px;
    }
    
    .slider-button {
        width: 45px;
        height: 45px;
    }
    
    .slider-button svg {
        width: 14px;
        height: 14px;
    }
}






/* Galería */
.project-galeria {
    height: 100vh;
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    padding: 0;
}

.galeria-titulo {
    font-family: var(--font-serif);
    font-size: 56px;
    letter-spacing: -1px;
    font-weight: 100;
    line-height: 0.9;
    margin: 0;
    padding: 20px 30px 0 30px;
    color: var(--color-dark);
    height: 20vh;
    display: flex;
    align-items: flex-start;
}

.galeria-carousel-wrapper {
    height: 80vh;
    position: relative;
    overflow: hidden;
}

.galeria-carousel {
    display: flex;
    gap: 15px;
    height: 100%;
    padding: 0 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.galeria-carousel::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.galeria-slide {
    flex-shrink: 0;
    height: 100%;
}

.galeria-slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}

/* Imágenes verticales: proporción 4/5 */
.galeria-slide.vertical {
    width: calc(80vh * 4 / 5);
}

/* Imágenes horizontales: proporción 5/4 */
.galeria-slide.horizontal {
    width: calc(80vh * 5 / 4);
}

/* Flechas de navegación */
.galeria-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.galeria-carousel-wrapper:hover .galeria-arrow {
    opacity: 1;
}

.galeria-arrow-left {
    left: 20px;
}

.galeria-arrow-right {
    right: 20px;
}

.galeria-arrow svg {
    width: 24px;
    height: 24px;
    color: var(--color-dark);
}

.galeria-arrow:hover {
    background-color: var(--color-light);
}

/* Responsive */

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

@media (max-width: 1024px) {
    .project-galeria {
        height: auto;
        padding-bottom: 70px;
    }
    
    .galeria-titulo {
        font-size: 50px;
        height: auto;
        padding: 50px 30px 30px 30px;
        align-items: center;
        line-height: 0.95;
    }
    
    .galeria-carousel-wrapper {
        height: auto;
        min-height: 70vh; /* ⭐ Intermedio entre desktop (80vh) y móvil (60vh) */
    }
    
    .galeria-carousel {
        height: auto;
        min-height: 70vh;
        padding: 0 30px 40px 30px;
        gap: 15px;
    }
    
    .galeria-slide {
        height: auto;
    }
    
    .galeria-slide img {
        height: auto;
        width: 100%;
    }
    
    /* ⭐ Mantener proporciones originales en tablet */
    .galeria-slide.vertical,
    .galeria-slide.horizontal {
        width: 55vw; /* ⭐ Más pequeñas que móvil (70vw) */
        height: auto;
    }
    
    .galeria-slide.vertical img {
        aspect-ratio: 4/5; /* ⭐ Verticales mantienen 4/5 */
        width: 100%;
        height: auto;
    }
    
    .galeria-slide.horizontal img {
        aspect-ratio: 5/4; /* ⭐ Horizontales mantienen 5/4 */
        width: 100%;
        height: auto;
    }
    
    /* ⭐ Mantener flechas en tablet (útil si hay mouse/trackpad) */
    .galeria-arrow {
        width: 45px;
        height: 45px;
    }
    
    .galeria-arrow svg {
        width: 20px;
        height: 20px;
    }
}


@media (max-width: 768px) {
    .project-galeria {
        height: auto; /* ⭐ Sin limitación de altura */
        padding-bottom: 60px;
    }
    
    .galeria-titulo {
        font-size: 46px;
        height: auto;
        padding: 40px 20px 20px 20px;
        align-items: center;
    }
    
    .galeria-carousel-wrapper {
        height: auto;
        min-height: 60vh; /* ⭐ Altura mínima para las imágenes */
    }
    
    .galeria-carousel {
        height: auto;
        min-height: 60vh;
        padding: 0 20px 40px 20px;
        gap: 10px;
    }
    
    .galeria-slide {
        height: auto;
    }
    
    .galeria-slide img {
        height: auto;
        width: 100%;
    }
    
    /* ⭐ Todas las imágenes con ratio 4/5 en móvil */
    .galeria-slide.vertical,
    .galeria-slide.horizontal {
        width: 70vw; /* ⭐ Ancho basado en viewport */
        height: auto;
    }
    
    .galeria-slide.vertical img,
    .galeria-slide.horizontal img {
        aspect-ratio: 4/5; /* ⭐ Todas verticales */
        width: 100%;
        height: auto;
    }
    
    /* ⭐ Ocultar flechas en móvil */
    .galeria-arrow {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .galeria-titulo {
        font-size: 40px;
        padding: 30px 20px 40px 20px;
    }
    
    .galeria-carousel-wrapper {
        min-height: 50vh;
    }
    
    .galeria-carousel {
        min-height: 50vh;
    }
    
    .galeria-slide.vertical,
    .galeria-slide.horizontal {
        width: 75vw; /* ⭐ Más ancho en móviles pequeños */
    }
}