/* ==================================================
   HERO GALERÍA
================================================== */

.hero-galeria{

    position:relative;

    width:100%;

    min-height:450px;     /* ✔ Me gusta esta altura */

    background:url("../img/galeria/portada.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}


/* ==================================================
   CAPA OSCURA
================================================== */

.hero-overlay{

    position:absolute;                              /* Sobre la imagen */

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.45);                     /* Oscurece la imagen */

}


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

.hero-contenido{

    position:relative;                              /* Por encima de la capa */

    z-index:2;

    max-width:900px;

    text-align:center;

    padding:20px;

}


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

.hero-contenido h1{

    font-size:3rem;

    color:#ffffff;

    margin-bottom:20px;

    text-shadow:0 5px 20px rgba(0,0,0,.50);

}


/* ==================================================
   TEXTO
================================================== */

.hero-contenido p{

    font-size:1.25rem;

    color:#ffffff;

    line-height:1.8;

    text-shadow:0 3px 10px rgba(0,0,0,.40);

}




/* ==================================================
   GALERÍA DE TRABAJOS
================================================== */

.galeria{

    width:100%;                                 /* Ocupa todo el ancho */

    max-width:1300px;                           /* Ancho máximo de la galería */

    margin:40px auto;                           /* Centra la galería y deja espacio arriba */

    padding:0 20px;                             /* Separación lateral */

    display:grid;                               /* Activa CSS Grid */

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); /* Tarjetas adaptables */

    gap:35px;                                   /* Espacio entre tarjetas */

}


/* ==================================================
   TARJETAS
================================================== */

.card{

    background:#ffffff;                         /* Fondo blanco */

    border-radius:18px;                         /* Bordes redondeados */

    overflow:hidden;                            /* Oculta el sobrante de la imagen */

    box-shadow:0 10px 25px rgba(0,0,0,.08);     /* Sombra */

    transition:all .35s ease;                   /* Animación suave */

    cursor:pointer;                             /* Cursor de mano */

}


/* ==================================================
   EFECTO HOVER TARJETA
================================================== */

.card:hover{

    transform:translateY(-8px);                 /* Eleva la tarjeta */

    box-shadow:0 18px 40px rgba(0,0,0,.18);     /* Sombra más intensa */

}


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

.card img{

    width:100%;                                 /* Ocupa todo el ancho */

    height:240px;                               /* Altura fija */

    object-fit:cover;                           /* Recorta sin deformar */

    transition:transform .45s ease;             /* Animación */

}


/* ==================================================
   ZOOM DE LA IMAGEN
================================================== */

.card:hover img{

    transform:scale(1.08);                      /* Zoom suave */

}


/* ==================================================
   CONTENIDO DE LA TARJETA
================================================== */

.card-content{

    padding:25px;                               /* Espacio interior */

}


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

.card-content h3{

    color:#C62828;                              /* Rojo corporativo */

    font-size:1.25rem;                          /* Tamaño */

    font-weight:700;                            /* Negrita */

    margin-bottom:15px;                         /* Separación */

    line-height:1.4;                            /* Espaciado */

}


/* ==================================================
   TEXTO
================================================== */

.card-content p{

    color:#555555;                              /* Gris oscuro */

    font-size:.98rem;                           /* Tamaño */

    line-height:1.7;                            /* Espaciado */

    margin:0;                                   /* Elimina márgenes */

}


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

@media(max-width:768px){

    .galeria{

        grid-template-columns:1fr;              /* Una columna */

        gap:25px;                               /* Menor separación */

    }

}




/* ==================================================
   LLAMADA A LA ACCIÓN (CTA)
================================================== */

.cta{

    width:100%;                                     /* Ocupa todo el ancho */

    background:#C62828;                             /* Rojo corporativo */

    padding:90px 20px;                              /* Espacio superior e inferior */

    text-align:center;                              /* Centra el contenido */

}


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

.cta .contenedor{

    max-width:900px;                                /* Ancho máximo */

    margin:0 auto;                                  /* Centrado */

}


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

.cta h2{

    font-size:3rem;                                 /* Tamaño del título */

    font-weight:700;                                /* Negrita */

    color:#ffffff;                                  /* Texto blanco */

    margin-bottom:25px;                             /* Separación inferior */

}


/* ==================================================
   TEXTO
================================================== */

.cta p{

    max-width:750px;                                /* Limita el ancho */

    margin:0 auto 45px;                             /* Centrado y separación */

    font-size:1.2rem;                               /* Tamaño del texto */

    line-height:1.8;                                /* Altura entre líneas */

    color:#ffffff;                                  /* Texto blanco */

}


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

.btn-cta{

    display:inline-block;                           /* Permite padding */

    padding:18px 45px;                              /* Tamaño del botón */

    background:#ffffff;                             /* Fondo blanco */

    color:#C62828;                                  /* Texto rojo */

    text-decoration:none;                           /* Sin subrayado */

    font-size:1.1rem;                               /* Tamaño del texto */

    font-weight:700;                                /* Negrita */

    border-radius:10px;                             /* Bordes redondeados */

    transition:.35s ease;                           /* Animación */

    box-shadow:0 12px 25px rgba(0,0,0,.18);         /* Sombra */

}


/* ==================================================
   EFECTO HOVER BOTÓN
================================================== */

.btn-cta:hover{

    background:#111111;                             /* Fondo negro */

    color:#ffffff;                                 /* Texto blanco */

    transform:translateY(-5px);                    /* Se eleva ligeramente */

    box-shadow:0 18px 35px rgba(0,0,0,.35);        /* Sombra más intensa */

}


/* ==================================================
   LIGHTBOX
================================================== */

#lightbox{

    display:none;                               /* Oculto inicialmente */

    position:fixed;                             /* Fijo en pantalla */

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.90);                 /* Fondo oscuro */

    justify-content:center;                     /* Centrado horizontal */

    align-items:center;                         /* Centrado vertical */

    z-index:9999;                               /* Siempre por encima */

}


/* ==================================================
   IMAGEN AMPLIADA
================================================== */

#img-grande{

    max-width:90%;

    max-height:90%;

    border-radius:10px;

    box-shadow:0 15px 40px rgba(0,0,0,.45);

}


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

#cerrar{

    position:absolute;

    top:20px;

    right:35px;

    font-size:45px;

    color:#ffffff;

    cursor:pointer;

    transition:.30s ease;

}


#cerrar:hover{

    color:#C62828;

}


/* ==================================================
   CURSOR EN LAS IMÁGENES
================================================== */

.galeria-img{

    cursor:pointer;

}



/* ==================================================
   FLECHAS DEL LIGHTBOX
================================================== */

#anterior,
#siguiente{

    position:absolute;                          /* Posición absoluta */

    top:50%;                                    /* Centro vertical */

    transform:translateY(-50%);                 /* Centrado */

    font-size:65px;                             /* Tamaño */

    font-weight:bold;                           /* Grosor */

    color:#ffffff;                              /* Blanco */

    cursor:pointer;                             /* Mano */

    user-select:none;                           /* No seleccionable */

    z-index:10000;                              /* Por encima de la imagen */

    transition:color .30s ease,
               transform .30s ease;             /* Animación */

}

/* ==================================================
   FLECHA IZQUIERDA
================================================== */

#anterior{

    left:30px;

}


/* ==================================================
   FLECHA DERECHA
================================================== */

#siguiente{

    right:30px;

}


/* ==================================================
   EFECTO HOVER
================================================== */

#anterior:hover,
#siguiente:hover{

    color:#C62828;                              /* Rojo corporativo */

    transform:translateY(-50%) scale(1.15);     /* Aumenta ligeramente */

}

/* ==================================================
   FLECHA IZQUIERDA
================================================== */

#anterior{

    left:35px;                                  /* Separación izquierda */

}


/* ==================================================
   FLECHA DERECHA
================================================== */

#siguiente{

    right:35px;                                 /* Separación derecha */

}


/* ==================================================
   EFECTO HOVER
================================================== */

#anterior:hover,
#siguiente:hover{

    color:#C62828;                              /* Rojo corporativo */

    transform:translateY(-50%) scale(1.15);     /* Ligero aumento */

}

/* ==================================================
   AJUSTES DEL LIGHTBOX ACCESIBLE
================================================== */

body.lightbox-abierto {
    overflow: hidden;
}

#lightbox.activo {
    display: flex;
}

#cerrar:focus-visible,
#anterior:focus-visible,
#siguiente:focus-visible,
.galeria-img:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 5px;
}

.galeria-img:focus-visible {
    outline-color: #c62828;
}

#cerrar,
#anterior,
#siguiente {
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    .card,
    .card img,
    #cerrar,
    #anterior,
    #siguiente,
    .btn-cta {
        transition: none !important;
    }

    .card:hover,
    .card:hover img,
    .btn-cta:hover {
        transform: none !important;
    }
}

/* ==================================================
   VISTA PREVIA EMERGENTE - AJUSTES FINALES
================================================== */

#lightbox {
    padding: 30px 90px;
}

.lightbox-contenido {
    width: min(1100px, 100%);
    max-height: calc(100vh - 60px);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

#img-grande {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 120px);
    width: auto;
    height: auto;
    object-fit: contain;
}

#lightbox-descripcion {
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
}

#cerrar,
#anterior,
#siguiente {
    border: 0;
    padding: 0;
    background: transparent;
    font-family: inherit;
}

#cerrar {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#anterior,
#siguiente {
    width: 64px;
    height: 84px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    #lightbox {
        padding: 70px 16px 30px;
    }

    #img-grande {
        max-height: calc(100vh - 150px);
    }

    #anterior,
    #siguiente {
        top: auto;
        bottom: 18px;
        width: 52px;
        height: 52px;
        font-size: 42px;
        transform: none;
    }

    #anterior {
        left: calc(50% - 70px);
    }

    #siguiente {
        right: calc(50% - 70px);
    }

    #anterior:hover,
    #siguiente:hover {
        transform: scale(1.08);
    }

    #cerrar {
        top: 12px;
        right: 14px;
    }
}

/* ==================================================
   LIGHTBOX AUTÓNOMO - PRIORIDAD FINAL
================================================== */

#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2147483647;
    background: rgba(0, 0, 0, 0.94);
    align-items: center;
    justify-content: center;
}

#lightbox.activo {
    display: flex !important;
}

#lightbox .lightbox-contenido {
    position: relative;
    z-index: 2;
}

#lightbox #img-grande {
    max-width: min(1100px, 88vw);
    max-height: 82vh;
}

#lightbox #cerrar,
#lightbox #anterior,
#lightbox #siguiente {
    position: absolute;
    z-index: 3;
    color: #ffffff;
    cursor: pointer;
}

#lightbox #cerrar {
    top: 18px;
    right: 24px;
}

#lightbox #anterior {
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
}

#lightbox #siguiente {
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
}

.galeria-img {
    cursor: zoom-in;
}