@font-face {
    font-family: "Obliqua Sans";
    src: url(assets/fuentes/fonnts.com-Obliqua_Sans.otf);
    font-weight: normal;
}

@font-face {
    font-family: "Obliqua Sans";
    src: url(assets/fuentes/fonnts.com-Obliqua_Sans_Bold.otf);
    font-weight: bold;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

body{
    font-family: 'Obliqua Sans', normal;
    background: #f5f5f5;
    color: #333;
    background-image: url("assets/paleta_1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow-x: hidden;
}

.bg-blur {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    z-index: -1; 
}

/* ===================================================
   COMPONENTE: PANTALLA DE INTRODUCCIÓN
   =================================================== */

.pantalla-intro {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: circle(100% at 50% 50%);
    transition: clip-path 1.2s cubic-bezier(0.76, 0, 0.24, 1);
    will-change: clip-path;
}

.pantalla-intro.transicion-activa {
    clip-path: circle(0% at 50% 50%);
}

.intro-ventana-oculta {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.intro-bloque-imagenes {
    display: flex;
    gap: 1em; /* 16px */
}

.intro-img {
    width: 12em; /* Mantenido en em según tu última versión */
    height: 12em;
    object-fit: contain;
    transform: translateY(100%);
    animation: emergerImagenes 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.intro-img.img-1 { animation-delay: 0.1s; }
.intro-img.img-2 { animation-delay: 0.3s; }
.intro-img.img-3 { animation-delay: 0.5s; }
.intro-img.img-4 { animation-delay: 0.7s; }

@keyframes emergerImagenes {
    to { transform: translateY(0); }
}

body.bloquear-scroll {
    overflow: hidden;
}

/* =========================================
   HERO & ANCLAJE GEOMÉTRICO
   ========================================= */

.hero-scroll-wrapper {
    height: 140vh; /* Reducido de 200vh para que la transición sea más rápida */
    position: relative;
    z-index: 10;
}

.hero {
    height: 100vh;
    display: flex;
    justify-content: center; 
    align-items: center;     
    text-align: center;
    color: black;
    background-size: cover;
    background-position: center;
    position: sticky;
    top: 0;
    overflow: visible; 
}

.hero-content {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    pointer-events: none; /* Deja pasar el ratón hacia las piezas de atrás */
}

.logo-interactivo {
    opacity: 0;
    transform: translateY(1.25em); /* 20px / 16 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625em; /* 10px / 16 */
    position: relative;
    pointer-events: auto; /* Reactiva interacción para el logo */
    perspective: 62.5em; /* 1000px / 16 */
    width: max-content;
    margin: 0 auto;
    overflow: visible;
}

.fila {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0em;
    transform-style: preserve-3d;
    width: max-content;
    overflow: visible;
}

.fila img {
    height: 8em; /* Mantener la altura idéntica a las letras previas */
    width: auto;
    display: block;
    cursor: default;
    position: relative;
    will-change: transform;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    transform-origin: center center; 
}

/* =========================================
   SUBTÍTULO INTERACTIVO
   ========================================= */

.hero h1{
    font-family: "Obliqua Sans";
    font-size: 2rem; /* Respetando rem para escalado de fuentes globales */
    margin-top: 0.3em; /* 45px / 16 */
    margin-bottom: 0.625em; /* 10px / 16 */
    color: rgb(68, 52, 34);
}

.titulo-interactivo{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9375em; /* 15px / 16 */
    font-size: 1.5rem;
}

.titulo-interactivo.fijo {
    position: fixed;
    top: 1.25em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(245, 245, 245, 0.85);
    padding: 0.5em 1.5em;
    border-radius: 2em;
    backdrop-filter: blur(0.5em); /* 8px / 16 */
    box-shadow: 0 0.625em 1.875em rgba(68, 52, 34, 0.08); /* 10px y 30px */
    width: max-content;
    margin-top: 0;
}

.titulo-interactivo.fijo .subt {
    opacity: 1;
    transform: translateY(0);
}

.subt{
    text-decoration: none;
    color: #443422;
    display: inline-block;
    opacity: 0;
    transform: translateY(0.9375em); /* 15px / 16 */
    transition: transform 0.5s ease, opacity 0.5s ease, color 0.2s ease;
    will-change: transform, opacity;
}

.subt.aparecer {
    opacity: 1;
    transform: translateY(0);
}

.subt.aparecer:hover{
    transform: scale(1.2);
    color: #9c4e2a;
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Botón Experiencia CSS */
.boton-experiencia {
    margin: 3.5em auto 3em auto; /* Centrado horizontal automático */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    pointer-events: auto; /* Para que funcione el click y hover */
    width: 14em; /* Tamaño predeterminado */
    padding: 0.8em 0;
    background-color: #913028;
    color: white;
    border-color: white;
    font-family: "Obliqua Sans", sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 2em; /* Bordes redondeados clásicos de botón */
    border: 2px solid transparent; /* Transparente para evitar saltos al hacer hover */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    will-change: transform;
    opacity: 0;
    transform: translateY(0.9375em);
    animation: fadeInBtn 0.5s ease forwards;
    animation-delay: 0.5s; /* Aparece después del título */
}

.boton-fundamento {
    border: 2px solid white;
}

.boton-wiki {
    background-color: #101e33;
    width: max-content;
    padding: 0.8em 2em;
    margin: 5em auto 5em auto;
}

.boton-experiencia:hover {
    background-color: white;
    color: black;
    border-color: black;
    transform: scale(1.05);
}

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

/* =========================================
   SECCIÓN INTRO
   ========================================= */

.intro{
    padding: 4rem 11rem; /* Mantenidos en rem por consistencia de layouts de sección */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.momentos {
    padding: 4rem 11rem; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background-color: transparent; /* Misma integración fluida que el intro */
}

/* =========================================
   GRILLA MOMENTOS (REFERENCIA)
   ========================================= */
.momentos-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 2.5rem;
    margin-top: 4rem;
    padding-bottom: 2rem;
}

.mom-col {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    justify-content: space-between;
}

.col-bottom-align {
    justify-content: flex-end; /* Alinea los elementos al fondo */
}

.forma-momento {
    display: block;
    height: auto;
    object-fit: contain;
    transition: transform 0.1s ease-out; /* Importante para el JS hover */
    will-change: transform;
    cursor: pointer;
}

/* Tamaños proporcionales (Escala grande) según la imagen de referencia */
/* PREFIJO AÑADIDO (.momentos-grid) PARA VENCER LA ESPECIFICIDAD DE .forma */
.momentos-grid .f-verde-alta { width: 5rem; } 
.momentos-grid .f-verde-curva { width: 5rem; }
.momentos-grid .f-verde-corta { width: 6rem; margin-left: 2rem; } 
.momentos-grid .f-azul-cuad { width: 12rem; }
.momentos-grid .f-azul-alta { width: 10rem; margin-left: 3.5rem; } 
.momentos-grid .f-amar-media { width: 10rem; margin-bottom: 1rem; }
.momentos-grid .f-amar-entera { width: 10rem; margin-left: -0.5rem; }
.momentos-grid .f-rojo-recta { width: 9rem; margin-bottom: 2rem; margin-left: 1rem; } 
.momentos-grid .f-rojo-eq { width: 9rem; }

.intro-bg-gif {
    position: fixed;
    top: -5vh;
    left: -5vw;
    width: 110vw;
    height: 110vh;
    background-image: url("assets/secuencia.gif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(6px); /* Difuminado para legibilidad */
    opacity: 0; /* Controlado dinámicamente por JS */
    z-index: -1;
    transition: opacity 0.1s; /* Transición rápida para que JS lo maneje suave */
    pointer-events: none; /* Evitar bloqueos de clics */
}

.intro-contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 45em; /* Reducido a 45em como se pidió */
    margin: 0 auto;
    padding: 4rem 2rem;
    gap: 4.375em; /* 70px / 16 */
}

.intro-texto {
    flex: 1;
    max-width: 55em; /* Doble seguro, ampliado desde 45em */
    margin: 0 auto;
    position: relative;
    z-index: 1; /* Asegura que el texto esté por encima del gif */
}

.intro h1{
    font-family: "Obliqua Sans";
    font-weight: bold;
    text-align: center;
    font-size: 3rem;
    color: rgb(68, 52, 34);
    margin-top: 3em;
    margin-bottom: 1.5rem;
}   

.intro p{
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.6;
    color: rgb(68, 52, 34);
    flex: 1;
    font-weight: 500;
}

/* =========================================
   ANIMACIÓN: APARICIÓN SUAVE
   ========================================= */

.contenedor-aparicion-suave {
    overflow: hidden;
    padding-bottom: 0.1em; /* Previene recortes menores en fuentes oblicuas */
}

.aparicion-suave {
    display: inline-block;
    transform: translateY(105%); /* Ligeramente más de 100% para asegurar que esté oculto */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.aparicion-suave.activa {
    transform: translateY(0);
}

.momentos h1{
    font-family: "Obliqua Sans";
    font-weight: bold;
    text-align: center;
    font-size: 3rem;
    color: rgb(68, 52, 34);
    margin-top: 3em;
    margin-bottom: 1.5rem;
}   

.momentos p{
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.6;
    color: rgb(68, 52, 34);
    flex: 1;
    font-weight: 500;
}


/* =========================================
   SECCIÓN CONSTRUYE
   ========================================= */

.construye{
    overflow: hidden;
    padding-bottom: 2rem;
}

.construye-contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 75em; /* 1200px / 16 */
    margin: 0 auto;
    padding: 2rem 2rem;
    gap: 4.375em; /* 70px / 16 */
}

.construye-texto {
    flex: 1;
}

.construye h1 {
    text-align: right;
    font-size: 3rem;
    color: rgb(68, 52, 34);
    margin-bottom: 1.5rem;
}   

.construye p {
    text-align: right;
    font-size: 1.2rem;
    line-height: 1.6;
    color: rgb(68, 52, 34);
    flex: 1;
    font-weight: 500;
}

.gana h1 {
    text-align: center;
    font-size: 3rem;
    color: rgb(68, 52, 34);
    margin-bottom: 1.5rem;
}

.gana p {
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.6;
    color: rgb(68, 52, 34);
    flex: 1;
    font-weight: 500;
}

.gana .construye-contenedor {
    justify-content: center;
}

.construye-gif {
    flex: 1;
    max-width: 43.75em; /* 700px / 16 */
    display: flex;
    justify-content: center;
}

.construye-gif img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* =========================================
   TRACK DE FORMAS EN MOVIMIENTO
   ========================================= */

.formas-track{
    display: flex;
    align-items: center;
    gap: 0.625em; /* 10px / 16 */
    width: max-content; 
    animation: moverFormas 15s linear infinite; 
    margin-bottom: 2rem;
}

.formas-track:hover{
    animation-play-state: paused;
}

.forma{
    width: 7.5em; /* 120px / 16 */
    height: auto;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease; 
}

.forma:hover{
    transform: scale(1.5) rotate(10deg);
}

/* =========================================
   SECCIÓN JUNTA
   ========================================= */

.junta{
    overflow: hidden;
    padding-bottom: 5em;
}

.junta-contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 75em; /* 1200px / 16 */
    margin: 0 auto;
    padding: 1rem 1rem;
    gap: 1em; /* 70px / 16 */
}

.junta-texto {
    flex: 1;
    margin-left: 3em;
}

.vocero h1, .junta h1 {
    text-align: left; /* Alineación a la izquierda por su posición en la pantalla */
    font-size: 3rem;
    color: rgb(68, 52, 34);
    margin-bottom: 1.5rem;
}   

.vocero p, .junta p {
    text-align: left;
    font-size: 1.2rem;
    line-height: 1.6;
    color: rgb(68, 52, 34);
    flex: 1;
    font-weight: 500;
}

.junta-gif {
    flex: 1;
    max-width: 43.75em; /* 700px / 16 */
    display: flex;
    justify-content: center;
}

.junta-gif img {
    width: 100%;
    height: auto;
    border-radius: 0.9375em; /* 15px / 16 */
    object-fit: cover;
    box-shadow: 0 0.625em 1.875em rgba(68, 52, 34, 0.15);
}

/* =========================================
   MÓDULO: CARTAS INTERACTIVAS
   ========================================= */

.fila-cartas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4.375em; /* 70px / 16 */
    flex-wrap: wrap; 
    margin-top: 3.75em; /* 60px / 16 */
    margin-bottom: 3.75em; /* 60px / 16 */
}

.contenedor-carta-interactiva {
    width: 11em;  /* 176px / 16 */
    height: 17.5em; /* 280px / 16 */
    perspective: 62.5em; /* 1000px / 16 */
    cursor: default;
}

.carta-flipper {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d; 
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
    will-change: transform;
}

.contenedor-carta-interactiva:hover .carta-flipper {
    transform: rotateY(180deg) scale(1.1);
}

.carta-cara {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 0.625em; /* 10px / 16 */
    top: 0;
    left: 0;
    overflow: hidden;
    backface-visibility: hidden; 
    box-shadow: 0 0.625em 1.5625em rgba(68, 52, 34, 0.2); /* 10px y 25px */
}

.carta-cara img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    will-change: transform; /* Optimización GPU para prevenir lag */
    transform: translateZ(0); /* Pre-renderizar imágenes pesadas */
}

.carta-frente {
    z-index: 2; 
    transform: rotateY(0deg);
}

.carta-reverso {
    background-color: #f5f5f5; 
    transform: rotateY(180deg); 
}

/* =========================================
   SECCIÓN GANA & VISTAS AUXILIARES
   ========================================= */

.gana {
    overflow: hidden;
    padding-bottom: 2rem;
}

.fundamento {
    height: auto;
}

.fundamento p, .pix p {
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.6;
    color: white;
    font-weight: 500;
}

.fundamento h1.titulo-galeria, .pix h1.titulo-galeria {
    color: white;
}

.bg-fundamento {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #913028;
    opacity: 0; /* Controlado por JS */
    pointer-events: none;
    z-index: -3; /* Debajo de las piezas flotantes que tienen -2 */
    transition: opacity 0.5s ease;
}

/* =========================================
   MEDIA QUERIES (RESPONSIVE IN EM)
   ========================================= */

@media(max-width: 48em){ /* 768px / 16 */
    .fila img {
        width: 4.375em; /* 70px / 16 */
    }

    .hero h1, .titulo-interactivo{
        font-size: 2.2rem; 
    }

    .construye-contenedor, .junta-contenedor {
        flex-direction: column;
        text-align: center;
        padding: 1rem 1rem;
    }

    .construye h1, .construye p, .junta h1, .junta p {
        text-align: center;
    }
    
    .construye-gif, .junta-gif {
        max-width: 100%;       
    }

    .fila-cartas {
        gap: 1.25em; /* 20px / 16 */
        margin-top: 1.875em; /* 30px / 16 */
        margin-bottom: 1.875em;
    }
    
    .contenedor-carta-interactiva {
        width: 10em; /* 160px / 16 */
        height: 15.875em; /* 254px / 16 */
    }
}

/* =========================================
   KEYFRAMES DINÁMICOS
   ========================================= */

@keyframes moverFormas{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-65em); /* 1040px / 16 */
    }
}

/* =========================================
   PIEZAS FLOTANTES HERO
   ========================================= */

.piezas-flotantes-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden; 
}

.pieza-scroll-wrapper {
    position: absolute;
    translate: var(--scroll-dx, 0px) var(--scroll-dy, 0px);
    pointer-events: none; 
}

.pieza-float-wrapper {
    animation: floatingPiece var(--float-dur, 5s) ease-in-out infinite alternate;
    translate: var(--hover-dx, 0px) var(--hover-dy, 0px);
    transition: translate 0.1s ease-out;
}

@keyframes floatingPiece {
    0% { transform: translate(0, 0); }
    33% { transform: translate(var(--fx1, 10px), var(--fy1, -15px)); }
    66% { transform: translate(var(--fx2, -15px), var(--fy2, 10px)); }
    100% { transform: translate(0, 0); }
}

.pieza-flotante {
    display: block;
    pointer-events: auto; 
    cursor: pointer;
    transition: transform 0.1s ease-out; /* Mismo transition que el logo */
    will-change: transform;
}

/* =========================================
   MORPHING NAVBAR
   ========================================= */
.nav-botones-wrapper {
    margin-top: 3.5em;
    width: 100%;
    height: 3em; /* Placeholder height */
    display: flex;
    justify-content: center;
}

.nav-morfosis {
    display: flex;
    gap: 2em;
    justify-content: center;
    align-items: center;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    background-color: #dcdccb; /* Mismo color que el contenedor fixed */
    padding: 2.5em 1.5em; /* Aumentado 1em en Y, reducido 1em en X para alterar 2em el total */
    border-radius: 4em; /* Borde redondeado estilo píldora */
    border: 3px solid #737160; /* Mismo borde que el contenedor fixed */
}

.nav-btn {
    width: 12em;
    height: 4em;
    border-radius: 3em;
    border: 2px solid transparent; /* Para transición de hover sin layout shift */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
}

.nav-rojo { --btn-color: #d12539; background-color: var(--btn-color); }
.nav-azul { --btn-color: #87cde8; background-color: var(--btn-color); }
.nav-verde { --btn-color: #0b8e36; background-color: var(--btn-color); }
.nav-amarillo { --btn-color: #f5a02d; background-color: var(--btn-color); }

/* Efecto hover: invertimos colores */
.nav-morfosis:not(.is-fixed) .nav-btn:hover {
    background-color: white;
    border-color: var(--btn-color);
}

.nav-morfosis:not(.is-fixed) .nav-btn:hover .btn-texto {
    color: black;
}

.btn-texto {
    color: white;
    font-family: "Obliqua Sans", sans-serif;
    font-size: 1.1rem;
    white-space: nowrap;
    opacity: 1;
    transition: all 0.3s ease; /* Transiciona la opacidad y el color */
}

/* --- ESTADO FIJO (STICKY) --- */
.nav-morfosis.is-fixed {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background-color: #dcdccb; /* Color inspirado en la referencia */
    padding: 0.8em 1.5em;
    border-radius: 3em;
    border: 3px solid #737160;
    gap: 1.5em;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.nav-morfosis.is-fixed .nav-btn {
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    padding: 0;
}

.nav-morfosis.is-fixed .nav-btn.activo {
    width: 6em;
    height: 1.5em;
    border-radius: 1em;
}

.nav-morfosis.is-fixed .btn-texto {
    opacity: 0;
    width: 0;
    display: none;
}

/* =========================================
   FONDOS FLOTANTES
   ========================================= */
#bg-piezas-flotantes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.pieza-bg-fall {
    position: absolute;
    top: -30vh;
    animation: bgFall var(--fall-dur) linear infinite;
    animation-delay: var(--fall-delay);
}

.pieza-bg-float {
    animation: bgFloat var(--float-dur) infinite ease-in-out alternate, bgRotate var(--rot-dur) infinite linear;
    filter: blur(6px);
    opacity: 0.4;
}

@keyframes bgFall {
    0% { top: -30vh; }
    100% { top: 120vh; }
}

@keyframes bgFloat {
    0% { transform: translate(0, 0); }
    100% { transform: translate(var(--fx), var(--fy)); }
}

@keyframes bgRotate {
    0% { rotate: 0deg; }
    100% { rotate: var(--rot-end); }
}

/* =========================================
   GALERÍA DE FOTOS
   ========================================= */

.galeria {
    padding: 4rem 8em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.titulo-galeria {
    font-family: "Obliqua Sans";
    font-weight: bold;
    text-align: center;
    font-size: 3rem;
    color: rgb(68, 52, 34);
    margin-bottom: 3rem;
    margin-top: 2rem;
}

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
}

.galeria-item {
    position: relative;
    width: 100%;
    height: 28em;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 0.9375em;
    cursor: pointer;
    box-shadow: 0 0.625em 1.875em rgba(68, 52, 34, 0.15);
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.galeria-item:hover img {
    transform: scale(1.05);
}

.galeria-texto {
    position: absolute;
    bottom: -3em;
    left: 0;
    width: 100%;
    height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    transition: bottom 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.galeria-item:hover .galeria-texto {
    bottom: 0;
}

/* =========================================
   VISUALIZADOR (LIGHTBOX)
   ========================================= */

.visualizador {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: transparent; 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.visualizador.oculto {
    opacity: 0;
    pointer-events: none;
}

.visualizador img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 0.9375em;
    box-shadow: 0 1em 3em rgba(0,0,0,0.3);
}

.visualizador-cerrar {
    position: absolute;
    top: 2rem;
    right: 3rem;
    font-size: 4rem;
    color: rgb(68, 52, 34);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-weight: bold;
    user-select: none;
    transition: transform 0.2s ease;
    z-index: 10000;
}

.visualizador-cerrar:hover {
    transform: scale(1.2);
}

body.desenfoque-activo > *:not(#visualizador):not(script) {
    filter: blur(10px);
    pointer-events: none;
    transition: filter 0.3s ease;
}

/* =========================================
   PIE DE PÁGINA
   ========================================= */

.pie-pagina {
    background-color: #3b352b; /* Tono oscuro extraído de la referencia */
    padding: 6rem 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
}

.footer-textos {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 55em; /* Contenedor para centrar el bloque de textos alineados a la izquierda */
}

.footer-fila {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.footer-icono {
    width: 1.5rem; /* Tamaño proporcional a los iconos */
    height: auto;
    object-fit: contain;
}

.footer-fila p {
    color: rgba(255, 255, 255, 0.5); /* Blanco con 50% de opacidad */
    font-family: "Obliqua Sans", sans-serif;
    font-size: 1.1rem;
    font-weight: normal;
    margin: 0;
    text-align: left;
}

.footer-linea {
    width: 100%;
    max-width: 55em;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.5); /* Línea blanca al 50% */
    margin: 3.5rem 0;
}

.footer-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    width: 100%;
}

.footer-logo {
    height: 4rem; /* Tamaño proporcional de los logotipos */
    width: auto;
    object-fit: contain;
}

body > *:not(#visualizador):not(script) {
    transition: filter 0.3s ease;
}