/* =========================================================
   PÉRGOLAS
   Estilos específicos de la página
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {
    --black: #111111;
    --white: #ffffff;
    --grey: #747878;
    --grey-dark: #444748;
    --green: #2F5D50;
    --bg: #F9F7F2;
    --bg-alt: #F9F7F2;
    --border: rgba(17, 17, 17, 0.18);
    --media-bg: #e2e2e2;
}


/* =========================================================
   ELEMENTOS GENERALES
========================================================= */

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    background-color: var(--bg-alt);
    overflow-x: hidden;
}


img,
video {
    max-width: 100%;
}


/* =========================================================
   LABELS
========================================================= */

.section-label {
    display: inline-block;

    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1.4;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--grey-dark);
}


/* =========================================================
   BOTÓN
========================================================= */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 16px 24px;

    background: var(--black);
    color: var(--white);

    border: 1px solid var(--black);

    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;

    letter-spacing: 0.06em;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.btn-primary:hover {
    background: var(--green);
    border-color: var(--green);

    transform: translateY(-2px);
}


.btn-primary .material-symbols-outlined {
    transition: transform 0.3s ease;
}


.btn-primary:hover .material-symbols-outlined {
    transform: translateY(3px);
}


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

.pergolas-hero {
    padding-top: 120px;
    padding-left: 64px;
    padding-right: 64px;
    padding-bottom: 120px;
}


.pergolas-hero-content {
    margin-bottom: 48px;
}


/* =========================================================
   HERO - BREADCRUMB
========================================================= */

.hero-breadcrumb {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 48px;

    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;

    text-transform: uppercase;
    letter-spacing: 0.05em;

    color: var(--grey);
}


.hero-breadcrumb a {
    color: var(--grey);

    text-decoration: none;

    transition: color 0.3s ease;
}


.hero-breadcrumb a:hover {
    color: var(--black);
}


.hero-breadcrumb .material-symbols-outlined {
    font-size: 16px;
}


/* =========================================================
   HERO - GRID
========================================================= */

.hero-grid {
    display: grid;

    grid-template-columns: 1.5fr 1fr;

    gap: 64px;

    align-items: end;
}


/* =========================================================
   HERO - TÍTULO
========================================================= */

.hero-title {
    overflow: hidden;
}


.hero-title h1 {
    margin-top: 16px;

    font-family: 'Hanken Grotesk', sans-serif;

    font-size: clamp(56px, 8vw, 120px);

    line-height: 0.9;

    letter-spacing: -0.04em;

    font-weight: 700;

    color: var(--black);
}


/* =========================================================
   HERO - DESCRIPCIÓN
========================================================= */

.hero-description {
    max-width: 520px;
}


.hero-description p {
    margin-bottom: 32px;

    font-family: 'Manrope', sans-serif;

    font-size: 18px;

    line-height: 1.6;

    color: var(--grey-dark);
}


/* =========================================================
   HERO - IMAGEN
========================================================= */

.hero-image-wrapper {
    position: relative;

    width: 100%;

    height: 70vh;

    min-height: 500px;

    overflow: hidden;

    border: 1px solid var(--black);

    background: var(--media-bg);
}


.hero-image-wrapper img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform: scale(1.04);

    will-change: transform;
}


/* Capa sutil */

.hero-image-wrapper::after {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.03),
            rgba(0, 0, 0, 0.10));

    pointer-events: none;
}


/* =========================================================
   HERO - CAPTION
========================================================= */

.hero-image-caption {
    position: absolute;

    bottom: 0;
    right: 0;

    padding: 14px 20px;

    background: var(--white);

    border-top: 1px solid var(--black);
    border-left: 1px solid var(--black);

    font-family: 'JetBrains Mono', monospace;

    font-size: 11px;

    letter-spacing: 0.05em;

    z-index: 5;
}


/* =========================================================
   INTRODUCCIÓN
========================================================= */

.pergolas-intro {
    position: relative;

    display: grid;

    grid-template-columns: 1fr 3fr;

    gap: 64px;

    padding: 120px 64px;

    background: #e7efe4;

    border-top: 1px solid rgba(17, 17, 17, 0.1);
    border-bottom: 1px solid rgba(17, 17, 17, 0.1);

    overflow: hidden;
}


/* Trama técnica de fondo */

.pergolas-intro::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image: repeating-linear-gradient(to right,
            rgba(17, 17, 17, 0.03) 0,
            rgba(17, 17, 17, 0.03) 1px,
            transparent 1px,
            transparent 80px),
        repeating-linear-gradient(to bottom,
            rgba(17, 17, 17, 0.03) 0,
            rgba(17, 17, 17, 0.03) 1px,
            transparent 1px,
            transparent 80px);

    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);

    pointer-events: none;
}


/* =========================================================
   INTRODUCCIÓN - RAÍL LATERAL
========================================================= */

.intro-rail {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 20px;
}


.intro-number {
    font-family: 'JetBrains Mono', monospace;

    font-size: 12px;

    color: var(--black);
}


.intro-rail-line {
    flex: 1;

    width: 1px;

    background: var(--border);
}


.intro-rail-label {
    writing-mode: vertical-rl;

    font-family: 'JetBrains Mono', monospace;

    font-size: 10px;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color: var(--grey);
}


/* =========================================================
   INTRODUCCIÓN - CONTENIDO
========================================================= */

.intro-content {
    position: relative;

    max-width: 900px;
}


.intro-content h2 {
    margin-top: 20px;
    margin-bottom: 28px;

    padding-top: 24px;

    font-family: 'Hanken Grotesk', sans-serif;

    font-size: clamp(42px, 5vw, 76px);

    line-height: 1;

    letter-spacing: -0.03em;

    font-weight: 600;

    color: var(--black);
}


.intro-content h2::before {
    content: "";

    display: block;

    width: 40px;
    height: 2px;

    margin-bottom: 24px;

    background: var(--black);
}


.intro-lead {
    max-width: 640px;

    margin-bottom: 64px;

    padding-left: 24px;

    border-left: 1px solid var(--border);

    font-family: 'Manrope', sans-serif;

    font-size: 20px;

    line-height: 1.7;

    color: var(--grey-dark);
}


/* =========================================================
   INTRODUCCIÓN - PASOS
========================================================= */

.intro-steps {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 0;

    align-items: stretch;
}


.intro-step {
    padding: 32px 28px;

    border-left: 1px solid var(--border);
}


/*
    El desplazamiento del hover vive en este wrapper interno,
    no en .intro-step.

    GSAP anima .intro-step para la entrada por scroll y le deja
    un transform inline al terminar. Un transform inline siempre
    gana contra la regla :hover de una hoja externa, así que el
    hover no se vería si viviera en el mismo elemento.
*/

.intro-step-content {
    transition: transform 0.3s ease;
}


.intro-step:hover .intro-step-content {
    transform: translateX(8px);
}


.intro-step-index {
    display: block;

    margin-bottom: 16px;

    font-family: 'JetBrains Mono', monospace;

    font-size: 12px;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--grey);

    transition: color 0.3s ease;
}


.intro-step:hover .intro-step-index {
    color: var(--black);
}


.intro-step h3 {
    margin-bottom: 12px;

    font-family: 'Hanken Grotesk', sans-serif;

    font-size: 20px;

    line-height: 1.2;

    letter-spacing: -0.01em;

    font-weight: 600;

    color: var(--black);
}


.intro-step p {
    font-family: 'Manrope', sans-serif;

    font-size: 15px;

    line-height: 1.6;

    color: var(--grey-dark);
}


/* =========================================================
   PROYECTOS
========================================================= */

.projects-section {
    padding: 140px 64px;
}


/* =========================================================
   ESCENARIO DE PROYECTOS

   Los 3 proyectos viven superpuestos dentro de .projects-stage
   (sticky, fijo en pantalla) y se alternan con un timeline de
   GSAP scrubbeado contra el alto de .projects-stage-wrapper.

   Ese alto (--stage-height) lo calcula js/pergolas.js sumando
   el cupo de scroll de cada proyecto más el de cada transición.
========================================================= */

.projects-stage-wrapper {
    position: relative;

    height: var(--stage-height, 100vh);
}


.projects-stage {
    position: sticky;

    top: 100px;

    height: calc(100vh - 140px);

    overflow: hidden;

    isolation: isolate;
}


/* =========================================================
   CABECERA PROYECTOS
========================================================= */

.projects-header {
    display: flex;

    justify-content: space-between;
    align-items: end;

    margin-bottom: 100px;

    padding-bottom: 24px;

    border-bottom: 1px solid rgba(17, 17, 17, 0.2);
}


.projects-header h2 {
    margin-top: 12px;

    font-family: 'Hanken Grotesk', sans-serif;

    font-size: clamp(40px, 5vw, 64px);

    line-height: 1;

    letter-spacing: -0.03em;

    font-weight: 600;

    color: var(--black);
}


.projects-count {
    font-family: 'JetBrains Mono', monospace;

    font-size: 12px;

    color: var(--grey);
}


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

/*
    IMPORTANTE

    .project es un panel superpuesto dentro de .projects-stage
    (ver ESCENARIO DE PROYECTOS más arriba) — llena siempre el
    escenario entero, no reserva su propio alto.

    El alto de scroll de cada proyecto (según su nº de fotos)
    y el de cada transición entre proyectos se calculan por JS
    y se suman en --stage-height, en .projects-stage-wrapper.
*/

.project {
    position: absolute;
    inset: 0;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.5fr) minmax(480px, 1.5fr);

    gap: 50px;

    align-items: start;
}


/*
    DEGRADACIÓN SIN JS

    js/pergolas.js es quien decide qué panel se ve con
    gsap.set(project, { visibility: ... }). Si por lo que sea
    no llega a correr (GSAP no carga, o se entra en móvil y
    se agranda la ventana sin recargar), sin esto los 3
    proyectos quedarían superpuestos y visibles a la vez.

    Con esto, en el peor caso se ve sólo el proyecto 1 —
    degradado, pero no roto. Debe ser visibility (no
    display:none): es la misma propiedad que toca el JS, así
    que su gsap.set la pisa en cuanto arranca.
*/

.project:nth-child(n + 2) {
    visibility: hidden;
}


/*
    visibility no es absoluto: .project-media-item:first-child
    (más abajo) fija su propio visibility:visible para
    mostrarse antes de que cargue JS, y eso lo escapa del
    hidden de este ancestro (CSS 2.2 §11.2). Sin esta regla,
    la primera foto de los proyectos 2 y 3 se seguiría viendo
    superpuesta a la del proyecto 1.
*/

.project:nth-child(n + 2) .project-media-item:first-child {
    visibility: hidden;
}


/* =========================================================
   INFORMACIÓN DEL PROYECTO
========================================================= */

.project-info {
    height: calc(100vh - 140px);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 24px 0;

    z-index: 10;
}


.project-info-top {
    display: flex;

    align-items: center;

    gap: 20px;
}


.project-number {
    display: flex;

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

    width: 42px;
    height: 42px;

    border: 1px solid var(--black);

    font-family: 'JetBrains Mono', monospace;

    font-size: 12px;

    background: var(--bg);
}


.project-info-main {
    max-width: 500px;
}


.project-info-main h3 {
    margin-bottom: 24px;

    font-family: 'Hanken Grotesk', sans-serif;

    font-size: clamp(32px, 3.2vw, 52px);

    line-height: 1;

    letter-spacing: -0.03em;

    font-weight: 600;

    color: var(--black);
}


.project-info-main p {
    max-width: 450px;

    font-family: 'Manrope', sans-serif;

    font-size: 16px;

    line-height: 1.7;

    color: var(--grey-dark);
}


.project-info-details {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;

    padding-top: 24px;

    border-top: 1px solid rgba(17, 17, 17, 0.2);
}


.project-info-details div {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.project-info-details span {
    font-family: 'JetBrains Mono', monospace;

    font-size: 10px;

    letter-spacing: 0.08em;

    color: var(--grey);
}


.project-info-details strong {
    font-family: 'Manrope', sans-serif;

    font-size: 14px;

    font-weight: 600;

    color: var(--black);
}


/* =========================================================
   MEDIA DEL PROYECTO
========================================================= */

/*
    ESTE ES EL CAMBIO PRINCIPAL.

    Todas las imágenes viven en el mismo espacio visual.

    JS controla cuál está visible.
*/

.project-media {
    /*
        No es sólo estético: .project-media-item es
        position:absolute; inset:0, así que necesita que
        ESTE elemento (no .project, que ahora es el panel
        completo con las dos columnas) sea su bloque
        contenedor. Sin position aquí, las fotos se
        estirarían sobre todo el panel y el overflow:hidden
        de abajo dejaría de recortarlas.
    */
    position: relative;

    width: 100%;

    height: calc(100vh - 140px);

    min-height: 620px;

    overflow: hidden;

    border: 1px solid var(--black);

    background: var(--media-bg);

    isolation: isolate;
}


/* =========================================================
   CADA IMAGEN
========================================================= */

.project-media-item {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    /* Holgura del parallax — ver nota sobre la regla de img/video */
    --media-overflow: 12%;

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    z-index: 1;
}


/*
    La primera imagen se muestra inmediatamente
    incluso antes de cargar JS.
*/

.project-media-item:first-child {
    opacity: 1;

    visibility: visible;

    z-index: 2;
}


/*
    HOLGURA DEL PARALLAX

    La imagen se hace más alta que su contenedor para que el
    desplazamiento del parallax nunca descubra el fondo gris
    (--media-bg) por el borde inferior del recuadro.

    O = --media-overflow, declarada en .project-media-item
    P = PARALLAX_SHIFT, en js/pergolas.js

    Debe cumplirse siempre:

        O / 2  >  P × (1 + O)

    porque el yPercent de GSAP es relativo a la altura de la
    propia imagen, ya ampliada, no a la del contenedor.

    Valores actuales:  O = 12%, P = 3%
    Margen resultante: 6% − 3.36% = 2.64% (~16px)

    Si se cambia PARALLAX_SHIFT en el JS, hay que recalcular
    este valor.
*/

.project-media-item img,
.project-media-item video {
    position: absolute;
    top: calc(var(--media-overflow) / -2);
    left: 0;

    display: block;

    width: 100%;
    height: calc(100% + var(--media-overflow));

    object-fit: cover;

    will-change: transform;
}


/* =========================================================
   EFECTO SOBRE LAS IMÁGENES
========================================================= */

.project-media-item img,
.project-media-item video {
    transform: scale(1.06);
}


/* =========================================================
   INDEX DE MEDIA
========================================================= */

.media-index {
    position: absolute;

    bottom: 0;
    right: 0;

    padding: 12px 16px;

    background: var(--white);

    border-top: 1px solid var(--black);
    border-left: 1px solid var(--black);

    font-family: 'JetBrains Mono', monospace;

    font-size: 11px;

    letter-spacing: 0.05em;

    z-index: 10;
}


/* =========================================================
   EFECTO VISUAL AL CAMBIAR DE FOTO
========================================================= */

.project-media-item::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.04),
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.08));

    pointer-events: none;
}


/* =========================================================
   VÍDEOS
========================================================= */

.project-video {
    background: var(--black);
}


.project-video video {
    object-fit: cover;
}


.media-video-label {
    position: absolute;

    top: 20px;
    left: 20px;

    padding: 10px 14px;

    background: var(--white);

    border: 1px solid var(--black);

    font-family: 'JetBrains Mono', monospace;

    font-size: 10px;

    letter-spacing: 0.05em;

    z-index: 10;
}


/* =========================================================
   CTA
========================================================= */

.project-cta {
    margin: 0 64px 120px;

    padding: 100px 80px;

    background: var(--green);

    color: var(--white);

    border: 1px solid var(--black);

    overflow: hidden;
}


.cta-grid {
    display: grid;

    grid-template-columns: 1.5fr 1fr;

    gap: 80px;

    align-items: end;
}


.project-cta .section-label {
    color: rgba(255, 255, 255, 0.7);
}


.project-cta h2 {
    margin-top: 20px;

    font-family: 'Hanken Grotesk', sans-serif;

    font-size: clamp(48px, 6vw, 88px);

    line-height: 0.95;

    letter-spacing: -0.04em;

    font-weight: 600;
}


.cta-action p {
    margin-bottom: 32px;

    font-family: 'Manrope', sans-serif;

    font-size: 17px;

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.8);
}


.cta-action .btn-primary {
    background: var(--white);

    color: var(--green);

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


.cta-action .btn-primary:hover {
    background: var(--black);

    color: var(--white);

    border-color: var(--black);
}


/* =========================================================
   ESTADOS DE ANIMACIÓN
========================================================= */

.js-ready .project-media-item {
    transition: none;
}


.js-ready .hero-breadcrumb,
.js-ready .hero-title h1,
.js-ready .hero-description,
.js-ready .hero-image-wrapper {
    will-change: transform, opacity;
}


.js-ready .intro-content,
.js-ready .intro-number,
.js-ready .intro-step,
.js-ready .projects-header,
.js-ready .project-cta {
    will-change: transform, opacity;
}


/* =========================================================
   CURSOR / SELECCIÓN
========================================================= */

::selection {
    background: var(--green);
    color: var(--white);
}


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

@media (max-width: 1100px) {

    .project {
        grid-template-columns:
            minmax(260px, 0.5fr) minmax(380px, 1.5fr);

        gap: 36px;
    }

    .project-info-main h3 {
        font-size: clamp(28px, 3.5vw, 44px);
    }

}


/* =========================================================
   MÓVIL / TABLET
========================================================= */

@media (max-width: 900px) {

    .pergolas-hero {
        padding: 100px 20px 80px;
    }


    .hero-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .hero-title h1 {
        font-size: clamp(52px, 14vw, 90px);
    }


    .hero-image-wrapper {
        height: 55vh;

        min-height: 400px;
    }


    .pergolas-intro {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 80px 20px;
    }


    .intro-rail-line,
    .intro-rail-label {
        display: none;
    }


    .intro-steps {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .intro-step {
        padding: 24px 0;

        border-left: none;
        border-top: 1px solid var(--border);
    }


    .projects-section {
        padding: 80px 20px;
    }


    .projects-header {
        margin-bottom: 60px;
    }


    /*
        En móvil eliminamos la composición sticky.
        Las fotos vuelven a mostrarse verticalmente.
    */

    .projects-stage-wrapper,
    .projects-stage {
        position: static;

        height: auto;

        overflow: visible;

        isolation: auto;
    }


    .project {
        position: relative;
        inset: auto;

        display: grid;

        grid-template-columns: 1fr;

        gap: 40px;

        margin-bottom: 120px;
    }


    /*
        En móvil no corre initProjectAnimations(), así que
        nada pisa el visibility:hidden del fallback de
        escritorio — hay que revertirlo a mano para que los
        3 proyectos se vean apilados.

        No hace falta revertir también el hidden de
        .project-media-item:first-child de esa misma regla:
        .project-media-item ya fuerza
        "visibility: visible !important" un poco más abajo,
        y !important gana siempre, sin importar
        especificidad.
    */

    .project:nth-child(n + 2) {
        visibility: visible;
    }


    .project-info {
        position: relative;

        height: auto;

        padding: 0;

        z-index: auto;
    }


    .project-media {
        position: relative;

        height: auto;

        min-height: 0;

        overflow: visible;

        display: flex;

        flex-direction: column;

        gap: 30px;

        border: none;

        background: transparent;

        isolation: auto;
    }


    .project-media-item {
        position: relative;

        inset: auto;

        width: 100%;

        height: 60vh;

        min-height: 400px;

        opacity: 1 !important;

        visibility: visible !important;

        border: 1px solid var(--black);

        background: var(--media-bg);

        z-index: auto !important;
    }


    .project-media-item img,
    .project-media-item video {
        position: relative;
        top: auto;
        left: auto;

        transform: none !important;

        height: 100%;

        min-height: 0;
    }


    .project-info-main h3 {
        font-size: 46px;
    }


    .project-cta {
        margin: 0 20px 80px;

        padding: 60px 30px;
    }


    .cta-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

}


/* =========================================================
   MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 600px) {

    .hero-breadcrumb {
        margin-bottom: 30px;
    }


    .hero-image-wrapper {
        height: 50vh;

        min-height: 350px;
    }


    .hero-image-caption {
        font-size: 9px;

        padding: 10px 12px;
    }


    .projects-header {
        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }


    .project-info-details {
        grid-template-columns: 1fr 1fr;
    }


    .project-info-main h3 {
        font-size: 40px;
    }


    .project-media-item {
        height: 50vh;

        min-height: 350px;
    }


    .project-cta h2 {
        font-size: 52px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}


/* =========================================================
   CARRUSEL DE IMÁGENES — CSS
   Sección con fotos grandes de ancho completo y
   desplazamiento continuo sincronizado por JS.
   ========================================================= */


/* ---------------------------------------------------------
   SECCIÓN — A todo lo ancho de pantalla
   --------------------------------------------------------- */

.pergolas-carousel {
    position: relative;

    width: 100%;

    padding: 120px 0 140px;

    overflow: hidden;

    border-top: 1px solid rgba(17, 17, 17, 0.12);
}


/* ---------------------------------------------------------
   CABECERA — Mantiene los márgenes de página
   --------------------------------------------------------- */

.carousel-header {
    margin-bottom: 56px;

    padding: 0 64px;
}


.carousel-header .section-label {
    display: block;

    margin-bottom: 12px;
}


.carousel-header h2 {
    font-family: 'Hanken Grotesk', sans-serif;

    font-size: clamp(40px, 5vw, 64px);

    line-height: 1;

    letter-spacing: -0.03em;

    font-weight: 600;

    color: var(--black);
}


/* ---------------------------------------------------------
   VIEWPORT — zona visible del carrusel (ocupa el 100% de la pantalla)
   --------------------------------------------------------- */

.carousel-viewport {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 36px 0;

    cursor: pointer;

    user-select: none;
    -webkit-user-select: none;

    /* Escala sutil sobre todo el carrusel en hover */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* Hover general: todo el carrusel se agranda ligeramente */

.carousel-viewport:hover {
    transform: scale(1.025);
}


/* ---------------------------------------------------------
   TRACK — cinta continua controlada por JS
   --------------------------------------------------------- */

.carousel-track {
    display: flex;

    align-items: center;

    gap: 28px;

    width: max-content;

    will-change: transform;
}


/* ---------------------------------------------------------
   CADA SLIDE — FOTOS EN FORMATO GRANDE
   --------------------------------------------------------- */

.carousel-slide {
    position: relative;

    flex-shrink: 0;

    /* Dimensiones grandes y cinematográficas */
    width: clamp(520px, 58vw, 840px);
    height: clamp(380px, 52vh, 560px);

    overflow: hidden;

    border: 1px solid var(--black);

    background: var(--media-bg);

    cursor: pointer;

    /* Transición suave para zoom y sombras */
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.45s ease,
                outline 0.3s ease;
}


/* Hover individual: la imagen específica se agranda más */

.carousel-slide:hover {
    transform: scale(1.07);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);

    z-index: 20;
}


/* Slide activa (pausada y centrada tras click) */

.carousel-slide.is-active {
    transform: scale(1.05);

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);

    outline: 2px solid var(--black);
    outline-offset: -2px;

    z-index: 25;
}


/* ---------------------------------------------------------
   IMÁGENES DENTRO DE CADA SLIDE
   --------------------------------------------------------- */

.carousel-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    pointer-events: none;

    transform: scale(1.05);

    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


.carousel-slide:hover img,
.carousel-slide.is-active img {
    transform: scale(1);
}


/* ---------------------------------------------------------
   OVERLAY SUTIL
   --------------------------------------------------------- */

.carousel-slide::after {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.02),
            rgba(0, 0, 0, 0.08));

    pointer-events: none;

    opacity: 1;

    transition: opacity 0.4s ease;
}


.carousel-slide:hover::after,
.carousel-slide.is-active::after {
    opacity: 0;
}


/* ---------------------------------------------------------
   RESPONSIVE — TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .pergolas-carousel {
        padding: 90px 0 110px;
    }

    .carousel-header {
        padding: 0 40px;
        margin-bottom: 40px;
    }

    .carousel-slide {
        width: clamp(440px, 68vw, 650px);
        height: clamp(320px, 46vh, 460px);
    }

    .carousel-track {
        gap: 22px;
    }

}


/* ---------------------------------------------------------
   RESPONSIVE — MÓVIL
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .pergolas-carousel {
        padding: 70px 0 90px;
    }

    .carousel-header {
        padding: 0 20px;
        margin-bottom: 30px;
    }

    .carousel-viewport {
        padding: 20px 0;
    }

    .carousel-slide {
        width: clamp(300px, 84vw, 500px);
        height: clamp(240px, 42vh, 360px);
    }

    .carousel-track {
        gap: 16px;
    }

    /* En móvil, no agrandar el viewport entero */
    .carousel-viewport:hover {
        transform: none;
    }

}


/* ---------------------------------------------------------
   RESPONSIVE — MÓVIL PEQUEÑO
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .carousel-slide {
        width: 86vw;
        height: clamp(220px, 38vh, 320px);
    }

}