/* --- Reset Básico y Variables --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif; /* Cambia esto por tu tipografía elegida */
    color: #1a1a1a;
    background-color: #f9f9f9; /* Un tono casi blanco, como en tu captura */
    line-height: 1.6;
}

/* --- Sistema de Cuadrícula (12 Columnas) --- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    padding: 60px 120px; /* Margen superior/inferior y laterales amplios */
}

/* --- Navegación --- */
/* --- Modificación de la Navbar superior --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 120px;
    background-color: #ffffff;
    border-bottom: 1px solid #eaeaea;
    position: fixed; /* Se queda fija arriba */
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); /* Transición suave */
}

/* Esta clase la añadiremos con JS para esconder el menú hacia arriba */
.navbar.hidden {
    transform: translateY(-100%);
}

/* Como el menú ahora es fijo, damos un margen al vídeo para que no se solape */
.hero-video {
    margin-top: 95px; 
}

/* --- Botón Flotante Lateral (3 puntos) --- */
.floating-btn {
    position: fixed;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2001; /* Por encima de todo */
    cursor: pointer;
    opacity: 0; /* Oculto por defecto */
    pointer-events: none; /* No se puede hacer clic si está oculto */
    transition: opacity 0.5s ease;
}

.floating-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.floating-btn span {
    width: 6px;
    height: 6px;
    background-color: #888; /* Gris por defecto */
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Efecto hover: Crecen y se vuelven naranjas */
.floating-btn:hover span {
    background-color: #e65c00; 
    transform: scale(1.8);
}

/* --- Menú Overlay Pantalla Completa --- */
.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9); /* Gris muy oscuro con 90% opacidad */
    z-index: 2000; /* Justo debajo de los 3 puntos */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.overlay-menu.active {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(10px); /* Difumina un poco el fondo de la web */
}

.overlay-links {
    display: flex;
    flex-direction: row; /* Asegura que estén en una sola línea horizontal */
    gap: 40px; /* Separación entre las palabras */
    flex-wrap: wrap; /* Por si la pantalla es pequeña, que pasen a la línea de abajo */
    justify-content: center; /* Centra todo el menú */
}

.overlay-links a {
    font-family: 'Satoshi', sans-serif;
    color: #ffffff;
    font-size: 2.5rem; /* Tamaño de letra gigante */
    font-weight: 700; /* Negrita */
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Efecto hover: Cambio de color y pequeño movimiento */
.overlay-links a:hover {
    color: #e65c00;
    transform: translateY(-5px); /* Se eleva un poquito al pasar el ratón */
}

.logo h2 {
    font-weight: 400;
    letter-spacing: 1px;
    color: #e65c00; /* Color naranja aproximado de tu logo */
}

/* --- Aumentamos el Logo --- */
.logo-img {
    height: 48px; /* Antes estaba en 35px. Puedes subirlo a 55px si lo quieres aún más grande */
    width: auto;
    display: block;
}

/* --- Aumentamos los enlaces de la Navbar --- */
.nav-links {
    display: flex;
    align-items: center;
    gap: 32px; /* Separación horizontal entre los botones del menú */
}

/* Solo quitamos el margin-left viejo y subimos el font-size */
.nav-links a {
    text-decoration: none;
    color: #333;
    font-size: 17px; /* Letra más grande y legible (antes 14px) */
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #e65c00;
}

/* ========================================= */
/* --- Magia del Menú Desplegable --- */
/* ========================================= */

.dropdown {
    position: relative;
    display: inline-block;
    padding-bottom: 20px; /* Evita que el menú desaparezca si bajas el ratón un poco lento */
    margin-bottom: -20px; /* Compensa el padding superior */
}

/* Contenedor del submenú oculto por defecto */
.dropdown-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%; /* Justo debajo de la palabra "Producto" */
    left: 0;
    background-color: #ffffff;
    min-width: 240px; /* Ancho de la caja para que quepan títulos largos */
    box-shadow: 0px 10px 30px rgba(0,0,0,0.08); /* Sombra elegante */
    border-radius: 8px; /* Bordes redondeados */
    padding: 12px 0;
    z-index: 1001;
    transform: translateY(15px); /* Empieza un poco más abajo */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Animación súper fluida */
}

/* Muestra el submenú al hacer hover en el contenedor padre */
.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Estilo de los proyectos individuales dentro del desplegable */
.dropdown-content a {
    display: block;
    padding: 12px 24px;
    font-size: 15px; /* Un poco más pequeño que el menú principal */
    color: #555555;
    font-weight: 400;
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.3s ease;
}

/* Efecto hover dentro del submenú */
.dropdown-content a:hover {
    background-color: #fafafa;
    color: #e65c00;
    padding-left: 30px; /* Efecto profesional: el texto se desplaza ligeramente a la derecha */
}

/* --- Hero Video --- */
.hero-video {
    width: 100%;
    /* 100vh es el 100% de la pantalla. Le restamos unos 95px, que es lo que suele medir tu navbar */
    height: calc(100vh - 95px); 
    position: relative; 
    overflow: hidden;
}
.bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Truco de oro: recorta el vídeo para que llene todo el hueco sin deformarse */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Manda el vídeo al fondo */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* El 0.4 es la cantidad de negro. Prueba a subirlo a 0.6 o bajarlo a 0.2 */
    z-index: 2; /* Pone la capa negra por encima del vídeo */
}
.video-placeholder h1 {
    font-size: 4rem;
    letter-spacing: 2px;
}

/* --- Sección Introducción --- */
.intro-text {
    grid-column: 1 / 8; /* Ocupa 7 columnas de las 12 */
    padding-right: 40px;
}

.intro-text h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 30px;
    font-weight: 700;
}

.intro-text p {
    font-size: 1rem;
    margin-bottom: 20px;
    color: #444;
}

.intro-visual {
    grid-column: 8 / 13; /* Ocupa las 5 columnas restantes */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.profile-img {
    width: 100%;
    height: auto;
        aspect-ratio: 4 / 3; /* Formato fotográfico súper editorial */
    object-fit: cover;
    margin-bottom: 15px;
}

.explore-link {
    text-decoration: none;
    color: #1a1a1a;
    font-weight: bold;
    font-size: 1.1rem;
}

.explore-link:hover {
    text-decoration: underline;
}

/* --- Título Proyectos Destacados --- */
.destacados-header {
    padding: 40px 120px;
    text-align: right; /* Alineado a la derecha como en tu diseño */
}

.destacados-header h2 {
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 800;
}

.logo-img {
    height: 35px; /* Ajusta la altura a tu gusto */
    width: auto;
    display: block;
}

/* Estilo base para todo el texto */
body {
    font-family: 'Satoshi', sans-serif;
    font-weight: 400; /* Texto normal */
    color: #1a1a1a;
    background-color: #f9f9f9;
    line-height: 1.6;
}

/* Estilo para todos los Títulos */
h1, h2, h3, h4 {
    font-family: 'Satoshi', sans-serif;
    font-weight: 700; /* Títulos en negrita */
    letter-spacing: -0.02em; /* Mantiene ese toque editorial y compacto */
    color: #111;
}

/* Ajuste específico para el texto gigante del vídeo */
.video-placeholder h1 {
    font-size: 4.5rem;
    font-weight: 900; /* Extra negro/grueso para máximo impacto */
    letter-spacing: 0;
}

/* --- Cuadrícula de Proyectos Destacados --- */
.proyectos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas idénticas */
    gap: 80px 40px; /* 80px de separación vertical, 40px horizontal */
    padding: 0 120px 100px 120px; /* Alineado con el resto de la web */
}

.proyecto-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.proyecto-imagen img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3; /* Formato fotográfico súper editorial */
    object-fit: cover;
    filter: grayscale(100%); /* Pone la imagen en Blanco y Negro por defecto */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease; /* Transición súper suave */
}

/* Efecto hover: Pasa a color y hace un Zoom un poco más pronunciado */
.proyecto-card:hover .proyecto-imagen img {
    transform: scale(1.08); /* Escala la imagen */
    filter: grayscale(0%); /* Devuelve el color 100% original */
}

.proyecto-categoria {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #e65c00; /* Color corporativo */
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
}

.proyecto-info h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 0;
}

/* --- Clases para la animación de Scroll (Fade Up) --- */
.reveal {
    opacity: 0;
    transform: translateY(40px); /* Empieza 40 píxeles más abajo */
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); /* Curva de animación profesional */
}

.reveal.active {
    opacity: 1;
    transform: translateY(0); /* Vuelve a su posición original */
}

/* --- Footer / Sección de Contacto --- */
.site-footer {
    background-color: #111111; /* Rectángulo negro intenso */
    color: #ffffff;
    padding: 100px 120px 40px 120px; /* Mantiene los márgenes laterales de tu web */
    margin-top: 100px;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* La primera columna es más ancha */
    gap: 40px;
    border-bottom: 1px solid #333333; /* Una línea sutil para separar el copyright */
    padding-bottom: 60px;
    margin-bottom: 40px;
}

.footer-info h2 {
    color: #ffffff;
    font-size: 3rem;
    margin-bottom: 20px;
}

.footer-info p {
    color: #999999;
    margin-bottom: 30px;
    max-width: 450px; /* Evita que el texto se estire demasiado */
}

.footer-email {
    display: block;
    font-size: 1.8rem;
    color: #e65c00; /* Tu color naranja */
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.footer-email:hover {
    color: #ffffff; /* Se vuelve blanco al pasar el ratón */
}

.footer-phone {
    font-size: 1.2rem;
    color: #cccccc;
}

.footer-links h3, .footer-location h3 {
    color: #ffffff;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.footer-links a {
    display: block;
    color: #999999;
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-links a:hover {
    color: #e65c00;
    transform: translateX(5px); /* Se mueve un poquito a la derecha al hacer hover */
}

.footer-location p {
    color: #999999;
    margin-bottom: 8px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666666;
    font-size: 0.9rem;
}

.back-to-top {
    color: #999999;
    text-decoration: none;
    transition: color 0.3s ease;
}

.back-to-top:hover {
    color: #ffffff;
}

/* ========================================= */
/* --- PÁGINAS DE PROYECTO INDIVIDUAL --- */
/* ========================================= */

/* Cabecera del proyecto */
/* Cabecera del proyecto (Hero) */
.project-hero {
    margin-top: 95px; /* Espacio para la navbar */
    padding: 0; /* CERO padding para que la foto llegue de borde a borde de la pantalla */
}

.project-hero-image {
    width: 100%;
    height: 70vh; /* Altura panorámica/alargada */
    background-color: transparent; 
    border-radius: 0; /* Quitamos bordes redondeados */
    
    /* MAGIA: Difuminado hacia abajo (de opaco a transparente) */
    -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
}

.project-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-hero-title {
    text-align: center;
    padding: 60px 0;
}

.project-hero-title h1 {
    font-size: 4.5rem;
    margin-bottom: 15px;
}

.project-tag {
    font-size: 1.1rem;
    color: #e65c00;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Textos explicativos */
.project-details {
    padding-top: 40px;
    padding-bottom: 80px;
}

.project-text-block {
    grid-column: span 6; /* Cada texto ocupa media pantalla en la cuadrícula de 12 */
    padding-right: 40px;
}

.project-text-block h2 {
    font-size: 2.2rem;
    margin-bottom: 24px;
}

.project-text-block p {
    font-size: 1.1rem;
    color: #555;
}

/* Galería del proyecto */
.project-gallery {
    padding: 0 120px 80px 120px;
    display: flex;
    flex-direction: column;
    gap: 40px; /* Separación vertical entre las fotos de la galería */
}

.gallery-item {
    width: 100%;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Navegación al siguiente proyecto */
.next-project {
    text-align: center;
    padding: 80px 0;
    border-top: 1px solid #eaeaea;
    margin: 0 120px;
}

.next-project p {
    font-size: 1rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.next-project a {
    font-size: 3rem;
    font-weight: 700;
    color: #111;
    text-decoration: none;
    font-family: 'Satoshi', sans-serif;
    transition: color 0.3s ease;
}

.next-project a:hover {
    color: #e65c00;
}

/* ========================================= */
/* --- SECCIÓN TÉCNICA INTERCALADA --- */
/* ========================================= */

.technical-section {
    padding-bottom: 80px;
}

.tech-row {
    grid-column: 1 / 13; /* Ocupa las 12 columnas del contenedor padre */
    display: flex;
    align-items: center;
    gap: 80px; /* Separación entre el texto y la foto */
    margin-bottom: 120px; /* Separación vertical entre bloques */
}

/* La clase reverse invierte el orden (Imagen a la izq, texto a la der) */
.tech-row.reverse {
    flex-direction: row-reverse;
}

.tech-text, .tech-image {
    flex: 1; /* Ambos ocupan exactamente el 50% del espacio */
}

.tech-text h3 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.tech-text p {
    font-size: 1.1rem;
    color: #555;
}

/* Estilo base de las fotos técnicas */
.tech-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0; /* Quitamos los bordes redondeados */
    box-shadow: none; /* Quitamos la sombra para que parezca que flota en el fondo */
}

/* 
  Fila Normal (Texto Izq, Imagen Der): 
  Difuminamos la parte IZQUIERDA de la foto, hacia el texto.
*/
.tech-row .tech-image img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
    mask-image: linear-gradient(to right, transparent 0%, black 30%);
}

/* 
  Fila Invertida con clase .reverse (Imagen Izq, Texto Der): 
  Difuminamos la parte DERECHA de la foto, hacia el texto.
*/
.tech-row.reverse .tech-image img {
    -webkit-mask-image: linear-gradient(to left, transparent 0%, black 30%);
    mask-image: linear-gradient(to left, transparent 0%, black 30%);
}
/* ========================================= */
/* --- GALERÍA CARRUSEL CONTINUO INFINITO --- */
/* ========================================= */

.slider-section {
    width: 100%;
    padding-bottom: 120px;
}

.slider-header {
    padding: 0 120px;
    margin-bottom: 30px;
}

.slider-header h3 {
    font-size: 2rem;
}

.galeria-contenedor {
    width: 100%;
    overflow: hidden; 
}

.galeria-track {
    display: flex;
    width: max-content; /* Permite que el contenedor crezca a lo ancho todo lo necesario */
    /* 20s es la velocidad. 'linear' hace que el movimiento sea constante, sin frenar */
    animation: scroll-continuo 20s linear infinite; 
}

/* Detalle súper pro: Si el usuario pasa el ratón, la galería se pausa para que pueda ver la foto */
.galeria-track:hover {
    animation-play-state: paused;
}

.galeria-item {
    /* Aquí lo hacemos más pequeño: cada foto ocupa el 40% de la pantalla */
    width: 40vw; 
    min-width: 800px; /* Tamaño mínimo para que no se rompa en móviles */
    padding: 0; 
    box-sizing: border-box;
}

.galeria-item img {
    width: 100%;
    aspect-ratio: 16 / 9; 
    object-fit: cover;
    border-radius: 0; 
    display: block; 
}

/* El motor de la animación continua */
@keyframes scroll-continuo {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Se desplaza exactamente la mitad (el grupo 1 entero) antes de volver a empezar imperceptiblemente */
        transform: translateX(-50%); 
    }
}

/* ========================================= */
/* --- LIGHTBOX (VISOR DE IMÁGENES) --- */
/* ========================================= */

/* Cambiamos el cursor en la galería para que invite a hacer clic */
.galeria-item img {
    cursor: zoom-in;
}

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85); /* Fondo negro al 85% de opacidad */
    backdrop-filter: blur(10px); /* Difuminado elegante de la web de fondo */
    z-index: 9999; /* Por encima de absolutamente todo (incluso la navbar) */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none; /* Inactivo mientras está invisible */
    transition: opacity 0.4s ease;
}

.lightbox.active {
    opacity: 1;
    pointer-events: auto; /* Se vuelve clicable */
}

.lightbox img {
    max-width: 90vw; /* Ocupa como máximo el 90% del ancho de la pantalla */
    max-height: 90vh; /* Ocupa como máximo el 90% del alto de la pantalla */
    object-fit: contain; /* Para que nunca se deforme ni se recorte */
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Pequeño efecto de zoom al aparecer la imagen */
.lightbox.active img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #ffffff;
    font-size: 4rem;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.3s ease;
}

.lightbox-close:hover {
    color: #e65c00;
}

/* Estilos para la sección de la zona 3D */
#zona-interactiva {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  background-color: #f9f9f9; /* Ajusta el color según el diseño de tu web */
  margin-top: 50px;
}

#zona-interactiva h2 {
  font-family: sans-serif;
  color: #333;
  margin-bottom: 20px;
}

/* Estilos específicos para el visor 3D */
model-viewer {
  width: 100%;
  max-width: 800px;
  height: 500px;
  background-color: transparent; /* Hace que el fondo desaparezca */
  outline: none; /* Evita que salga un borde azul al hacer clic */
  
  /* HEMOS BORRADO EL border-radius Y EL box-shadow */
}

/* Y si el fondo de la sección entera también era de un color distinto, asegúrate de ponerlo transparente: */
#zona-interactiva {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  background-color: transparent; 
  margin-top: 50px;
}


/* ========================================== */
        /* LAYOUT EDITORIAL (Para Diseño Gráfico) */
        /* ========================================== */
        
        /* 1. Introducción centrada y ancha */
        .editorial-intro {
            text-align: center;
            max-width: 900px;
            margin: 100px auto;
            padding: 0 20px;
        }
        .editorial-intro h2 {
            font-size: 3rem;
            margin-bottom: 25px;
            line-height: 1.2;
        }
        .editorial-intro p {
            font-size: 1.2rem;
            color: #555;
        }

        /* 2. Imagen a pantalla completa (Sin recortes, ideal para planos de etiquetas) */
        .editorial-full-width {
            width: 100%;
            margin: 100px 0;
            background-color: #f9f9f9; /* Fondo suave por si la imagen tiene transparencias */
            padding: 60px 0;
        }
        .editorial-full-width img {
            width: 90%;
            max-width: 1400px;
            height: auto; /* NO forzamos altura para no deformar/recortar el diseño gráfico */
            margin: 0 auto;
            display: block;
            box-shadow: 0 20px 50px rgba(0,0,0,0.05);
        }

        /* 3. Bloque asimétrico (Muchísima imagen, poco texto) */
        .editorial-split {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 5vw;
            padding: 0 5vw;
            margin: 120px 0;
        }
        .editorial-split .text {
            flex: 1; /* El texto ocupa solo 1 parte */
        }
        .editorial-split .image {
            flex: 2.5; /* La imagen es MASIVA (2.5 veces más grande que el texto) */
        }
        .editorial-split img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* Alternar lado de la imagen */
        .editorial-split.reverse {
            flex-direction: row-reverse;
        }


        /* ========================================== */
/* SHOWCASE INTERACTIVO VOSTRE (AURA DE COLOR) */
/* ========================================== */
.vostre-showcase {
    position: relative;
    width: 100%;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f7; /* Gris muy clarito de fondo base */
    overflow: hidden;
    margin: 60px 0;
}

/* El aura de color difuminado detrás de las botellas */
.vostre-glow {
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    /* El color cambiará dinámicamente con JS */
    background: radial-gradient(circle, var(--color-activo, rgba(200,200,200,0.3)) 0%, rgba(245,245,247,0) 70%);
    filter: blur(60px);
    z-index: 0;
    transition: background 0.8s ease; /* Transición súper suave */
}

/* Contenedor dividido (Texto izq, Botellas der) */
.showcase-container {
    position: relative;
    z-index: 1;
    display: flex;
    width: 95%;
    max-width: 2400px; /* ANTES: 1200px. Ahora le damos más aire */
    align-items: center;
    gap: 150px; /* Un poco más de hueco entre texto y foto */
}

.showcase-text {
    flex: 1;
}

.showcase-text h2 {
    font-size: 3.5rem;
    margin-bottom: 15px;
    transition: opacity 0.4s ease;
}

.showcase-text p {
    font-size: 1.2rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 40px;
    transition: opacity 0.4s ease;
}

/* Controles (Botones Siguiente/Anterior) */
.showcase-controls {
    display: flex;
    gap: 15px;
}

.showcase-btn {
    background: #111;
    color: #fff;
    border: none;
    padding: 15px 25px;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 30px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.showcase-btn:hover {
    transform: scale(1.05);
    background: #333;
}

/* La imagen de las botellas */
.showcase-visual {
    flex: 5; /* ANTES: 1.2. Ahora la imagen puede ocupar el doble que el texto */
    display: flex;
    justify-content: flex-end; /* Alineamos la foto a la derecha */
    align-items: center;
}

.showcase-visual img {
    width: 100%;
    max-width: 1800px; /* ANTES: 500px. Aquí estaba el tapón que te la hacía pequeña */
    height: auto;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

/* Clases para la animación por JS */
.fade-out {
    opacity: 0;
    transform: translateX(30px) scale(0.95);
}
.text-fade-out {
    opacity: 0;
    transform: translateY(-10px);
}

        /* ========================================== */
        /* LAYOUT EDITORIAL PREMIUM (Libros) */
        /* ========================================== */
        
        /* Fondo color papel muy sutil para dar calidez */
        .book-presentation {
            background-color: #fcfbf8; 
            color: #222;
            padding-bottom: 100px;
        }

        /* Frase destacada gigante estilo revista */
        .editorial-quote {
            text-align: center;
            max-width: 1000px;
            margin: 120px auto 100px auto;
            padding: 0 5vw;
        }
        
        .editorial-quote h2 {
            font-family: 'Satoshi', sans-serif;
            font-weight: 300;
            font-size: 3.5rem;
            line-height: 1.3;
            color: #111;
        }
        
        .editorial-quote h2 span {
            font-style: italic;
            color: #555;
        }

        /* Cuadrícula asimétrica para los detalles del libro */
        .book-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 100px 50px;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 5vw;
            align-items: center;
        }

        .book-detail-text h3 {
            font-size: 2rem;
            margin-bottom: 20px;
            font-weight: 500;
        }

        .book-detail-text p {
            font-size: 1.1rem;
            line-height: 1.8;
            color: #555;
        }

        .book-detail-img img {
            width: 100%;
            height: auto;
            box-shadow: 15px 20px 40px rgba(0,0,0,0.08); /* Sombra suave de libro físico */
            transition: transform 0.5s ease;
        }
        
        .book-detail-img img:hover {
            transform: translateY(-10px);
        }

        /* Bloque a pantalla completa para el diseño plano (2D) */
        .book-flat-design {
            margin: 150px 0;
            padding: 100px 5vw;
            background-color: #eef1f6; /* Un tono azul grisáceo muy suave que pegue con tu libro */
            text-align: center;
        }

        .book-flat-design img {
            max-width: 1000px;
            width: 100%;
            box-shadow: 0 30px 60px rgba(0,0,0,0.1);
        }
    

        .project-hero-image video {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Esto es clave para que el vídeo escale y llene el contenedor sin deformarse */
            opacity: 0.8; /* Si querías mantener la opacidad que tenía la imagen */
            pointer-events: none; /* Evita que el usuario interactúe accidentalmente con el vídeo */
        }


        /* ========================================== */
        /* LAYOUT 4:5 ESPECÍFICO PARA MARCHITA        */
        /* ========================================== */
        
        .marchita-layout.technical-section {
            max-width: 1200px !important; 
            margin: 0 auto;
            padding: 0 40px !important; 
            overflow: visible;
        }

        .marchita-layout .tech-row {
            gap: 80px !important; 
            margin-bottom: 120px !important;
        }

        .marchita-layout .tech-row.reverse {
            flex-direction: row-reverse;
        }

        .marchita-layout .tech-text {
            width: 50% !important; 
            padding: 0 !important; 
        }
        
        .marchita-layout .tech-image {
            width: 50% !important; 
        }

        .marchita-layout .tech-image img {
            width: 100% !important;
            aspect-ratio: 4 / 5 !important; 
            object-fit: cover !important;
            border-radius: 12px !important; 
            box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important; 
            
            /* Eliminamos los difuminados panorámicos */
            -webkit-mask-image: none !important;
            mask-image: none !important;
        }


        /* Sección de Documento / PDF */
        .pdf-section {
            max-width: 1000px;
            margin: 0 auto 120px auto;
            padding: 60px;
            background: #111; /* Fondo oscuro premium */
            color: #fff;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        .pdf-text h3 {
            font-size: 2.2rem;
            margin-bottom: 15px;
            color: #fff;
        }

        .pdf-text p {
            font-size: 1.1rem;
            color: #aaa;
            margin-bottom: 30px;
            max-width: 500px;
        }

        .btn-pdf {
            display: inline-block;
            padding: 16px 32px;
            background: #fff;
            color: #111;
            text-decoration: none;
            font-weight: 700;
            border-radius: 50px;
            transition: transform 0.3s ease, background 0.3s ease;
        }

        .btn-pdf:hover {
            transform: translateY(-3px);
            background: #f0f0f0;
        }

        .pdf-image {
            width: 250px;
            flex-shrink: 0;
        }

        .pdf-image img {
            width: 100%;
            border-radius: 4px;
            box-shadow: -10px 10px 30px rgba(0,0,0,0.5);
            transition: transform 0.5s ease;
        }

        .pdf-section:hover .pdf-image img {
            transform: rotate(-5deg) scale(1.05); /* Efecto de que el libro "flota" al pasar el ratón */
        }

        @media (max-width: 800px) {
            .pdf-section {
                flex-direction: column;
                text-align: center;
                padding: 40px 20px;
            }
            .pdf-image {
                width: 200px;
                order: -1; /* Pone la imagen del libro arriba en móviles */
            }
        }


    /* ========================================== */
/* IMAGEN LARGA FINAL                         */
/* ========================================== */
.long-image-section {
    width: 100%;
    background-color: #111; /* Cambia a #fff si tu imagen tiene fondo blanco y quieres integrarla */
    padding: 100px 40px;
    box-sizing: border-box;
    border-top: 1px solid #222;
}

.long-image-container {
    max-width: 1400px; /* Mantiene la proporción en pantallas ultra anchas */
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

.long-image-container img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1100px) {
    .long-image-section {
        padding: 80px 20px;
    }
    .long-image-container {
        border-radius: 12px;
    }
}