/* --- CONFIGURACIÓN GLOBAL Y VARIABLES DE DISEÑO --- */
:root {
    --color-primario: #FFC107;
    --color-firma: #FFFFFF;
    /* Un dorado cinematográfico como acento */
    --color-fondo: #000000;
    --color-texto: #EAEAEA;
    --color-superficie: #1A1A1A;
    /* Para fondos de tarjetas y secciones */
    --font-titulos: 'Bebas Neue', sans-serif;
    --font-cuerpo: 'Roboto', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--font-cuerpo);
    overflow-x: hidden !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 1000;
    pointer-events: none;
}

/* ==================================================================== */
/* 1. VIDEO 16:9 (DE BORDE A BORDE)                                     */
/* ==================================================================== */

#videodefondo {
    /* Reseteamos los estilos de video de fondo fijo a pantalla completa */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    object-fit: contain;
    filter: none;
    /* ELIMINA EL OSCURECIMIENTO (OVERLAY) */
    min-width: unset;
    min-height: unset;
}

/* CONTENEDOR PARA FORZAR EL ASPECTO 16:9 (OPCIÓN B: BORDE A BORDE) */
.video-16-9-container {
    /* La fórmula clave para el Aspect Ratio 16:9: (9 / 16 * 100) = 56.25% */
    position: relative;
    width: 100%;
    /* OCUPAR EL 100% DEL ANCHO */
    height: 0;
    padding-bottom: 56.25vw;
    /* USAR 'vw' para escalado y proporción */
    overflow: hidden;

    /* ELIMINAMOS TODOS LOS MÁRGENES Y LÍMITES PARA QUE SEA DE BORDE A BORDE */
    max-width: none;
    margin: 0;
    /* Eliminamos el margen inferior para que se pegue al portafolio */
    margin-bottom: 0px;
    margin-top: 0px;
}

/* ==================================================================== */
/* 2. ENCABEZADO Y NAVEGACIÓN                                           */
/* ==================================================================== */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    padding: 1rem 0;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
    /* Se aplica un fondo a 0.8 en scripts.js cuando se hace scroll */
    background-color: transparent;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    width: 100%;
}

nav .logo {
    font-family: var(--font-titulos);
    font-size: 2rem;
    color: white;
    text-decoration: none;
    letter-spacing: 2px;
}

.nav-links {
    display: flex;
    flex-direction: row;
    transition: transform 0.3s ease-in-out;
}

.nav-links a {
    color: var(--color-texto);
    text-decoration: none;
    margin-left: 2rem;
    font-weight: 700;
    position: relative;
    padding-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primario);
    transition: width 0.3s ease;
}

.nav-links a:hover {
    color: var(--color-primario);
}

.nav-links a:hover::after {
    width: 100%;
}

/* --- BOTÓN DE MUTE --- */
#mute-button {
    position: absolute;
    bottom: 80px;
    right: 0px;
    background-color: transparent;
    border-radius: 50%;
    padding: 10px;
    border: none;
    cursor: pointer;
    z-index: 1002;
    opacity: 1;
    transition: transform 0.2s ease;
}

#mute-button:hover {

    transform: scale(1.1);
}

/* --- SECCIÓN "SOBRE MÍ" (QUIENES SOMOS) --- */
#quienes-somos {
    background-color: var(--color-fondo);
    padding: 3rem 0;
    position: relative;
    z-index: 5;
}

.about-section {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.about-image video {
    width: 500px;
    height: 500px;
    object-fit: cover;


}


.about-text h2 {
    font-family: var(--font-titulos);
    font-size: 3rem;
    color: white;
}

.about-text h3 {
    font-size: 1.2rem;
    color: var(--color-primario);
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #BDBDBD;
}

/* --- SECCIÓN PORTAFOLIO con REJILLA (GRID) --- */
#portafolio {
    /* Mantenemos padding arriba, pero quitamos el de los lados */
    padding: 6rem 0;
    background-color: var(--color-superficie);
    position: relative;
    z-index: 5;
}

#portafolio h5 {
    text-align: center;
    font-family: var(--font-titulos);
    font-size: 4rem;
    margin-bottom: 4rem;
    letter-spacing: 3px;
}

/* 🔑 NUEVO CONTENEDOR DE REJILLA (GRID) - Sustituye al carrusel */
.portafolio-grid {
    /* Usamos CSS Grid */
    display: grid;
    /* La clave para el diseño de rejilla flexible: 
       Repetir automáticamente columnas del ancho mínimo de 300px, 
       ajustando el número de columnas para llenar el espacio. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Eliminamos el espacio entre las celdas (gutter/gap) */
    gap: 0;
    /* Para que ocupe todo el ancho de la ventana, de borde a borde */
    width: 100%;
}

.portafolio-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    /* Eliminamos los bordes redondeados y la sombra para que se "peguen" */
    border-radius: 0;
    box-shadow: none;
    /* Hacemos que ocupe todo el ancho de su celda y forzamos un AR 16:9 */
    width: 100%;
    /* Usamos padding-bottom para forzar la relación de aspecto 16:9 */
    height: 0;
    padding-bottom: 56.25%;
    /* 9/16 * 100% = 56.25% */

    /* 🔑 CLAVE 1: Configuración 3D y transición para el GLOW/SHINE */
    transform-style: preserve-3d;

    /* 🔑 CAMBIO: Añadimos 'transform' a la transición para el efecto de móvil */
    transition: box-shadow 0.3s ease-in-out, transform 0.4s ease-in-out;
}

/* ❌ ELIMINAR O COMENTAR EL ANTIGUO ZOOM SIMPLE */
.portafolio-item:hover {
    /* transform: scale(1.01); <-- ¡ELIMINADO! Vanilla-Tilt lo maneja ahora */
    /* Puedes añadir un sutil box-shadow aquí para un efecto "glow" si lo deseas */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    /* Sombra suave dorada */
}

.portafolio-item img {
    /* La imagen debe ser absoluta para llenar el contenedor con padding-bottom */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease-in-out;
}

.item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 🔑 CLAVE: Añadido z-index para apilar el overlay sobre la imagen */
    z-index: 2;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent 70%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.portafolio-item:hover .item-overlay {
    opacity: 1;
}

.item-overlay h3 {
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.view-project {
    color: var(--color-primario);
    font-weight: 700;
    transform: translateY(20px);
    transition: transform 0.4s ease;
    transition-delay: 0.1s;
}

.portafolio-item:hover .item-overlay h3,
.portafolio-item:hover .item-overlay .view-project {
    transform: translateY(0);
}

/* --- FOOTER --- */
#footer {
    background-color: #000;
    color: #888;
    padding: 4rem 0 2rem;
    position: relative;
    z-index: 5;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid #333;
    padding-bottom: 2rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-logo img {
    width: 50px;
}

.footer-logo span {
    font-family: var(--font-titulos);
    font-size: 1.5rem;
    color: #ccc;
}

.footer-links a {
    color: #ccc;
    text-decoration: none;
    margin-left: 2rem;
    font-weight: 700;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--color-primario);
}

.footer-copyright {
    text-align: center;
    font-size: 0.9rem;
}

/* --- LIGHTBOX --- */
.lightbox {
    display: none;
    opacity: 0;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    transition: opacity 0.3s ease;
    justify-content: center;
    align-items: center;
}

.lightbox.visible {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    position: relative;
    width: 90%;
    max-width: 960px;
    background-color: #000;
    border: 4px solid var(--color-primario);
    box-shadow: 0 0 50px rgba(255, 193, 7, 0.3);
}

#videoContainer {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

#videoContainer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* --- MODAL DE CONTACTO --- */
.contact-modal {
    display: flex;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    transition: opacity 0.4s ease;
    justify-content: center;
    align-items: center;
}

.contact-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 600px;
    background-color: var(--color-superficie);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.4s ease;
    max-height: 95vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.contact-modal.visible .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.close-button {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    color: var(--color-primario);
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover {
    color: #fff;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form h2 {
    font-family: var(--font-titulos);
    font-size: 2.5rem;
    text-align: center;
    color: var(--color-primario);
    margin-bottom: 1rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 1rem;
    background-color: #2b2b2b;
    border: 1px solid #444;
    color: var(--color-texto);
    border-radius: 4px;
    font-family: var(--font-cuerpo);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--color-primario);
    outline: none;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
}

.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

/* Estilos para el reCAPTCHA */
.contact-form .g-recaptcha {
    margin: 1rem auto;
}

.contact-form button {
    background-color: var(--color-primario);
    color: var(--color-fondo);
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-form button:hover {
    background-color: #FFD54F;
    transform: translateY(-2px);
}
/* --- BOTÓN WHATSAPP --- */
.whatsapp-button {
    background-color: #25D366 !important; /* Verde WhatsApp */
    color: #fff !important;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    width: 100%; /* Que ocupe todo el ancho */
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.whatsapp-button:hover {
    background-color: #128C7E !important; /* Verde más oscuro al pasar el mouse */
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.4);
}

/* --- DISEÑO RESPONSIVO --- */
@media (max-width: 768px) {
    header {
        /* Damos al header el fondo oscuro en móvil */
        background-color: var(--color-superficie);
        /* Eliminamos el padding global para controlar mejor la altura */
        padding: 0;
    }

    .video-16-9-container {
        /* El header en móvil (logo + links) es más alto que en escritorio */
        /* Necesitamos un margen superior MÁS GRANDE */

        /* ===>>> ESTE ES EL NÚMERO QUE DEBES MOVER <<<=== */
        margin-top: 130px;
    }


    .contact-modal .close-button {
        /* 🔑 Modifica estos valores para el móvil: */
        top: 1rem;
        /* Aumenta para bajarla más */
        right: 1rem;
        /* Aumenta para moverla a la izquierda */
        font-size: 2rem;
    }

    #mute-button {
        bottom: 10px;
        /* Lo pegamos más al borde inferior */
        right: 10px;
        /* Lo pegamos más al borde derecho */
    }

    #mute-button img {
        width: 24px;
        /* Reducimos un poco el icono (de 30px a 24px) */
        height: auto;
    }

    nav {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 1rem;
    }

    .nav-links {
        position: relative;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin-top: 0;
        padding: 1.5rem 0;


    }

    .nav-links.hidden {
        transform: translateY(-100%);
    }

    .nav-links a {
        margin: 0 0.5rem;   /* Reducimos el espacio entre palabras (antes era 1rem) */
        font-size: 0.85rem; /* Letra más pequeña y fina (antes era 1.1rem) */
        letter-spacing: 1px; /* Le damos aire entre letras para que se lea "premium" */
        font-weight: 400;   /* Un poco menos gruesa para que no se vea tosca */
    }

    .about-section {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        padding: 4rem 1rem;
    }

    .about-image video {  /* <--- CORRECCIÓN: Cambiamos 'img' por 'video' */
        width: 100%;      /* Usamos % para que se adapte a cualquier pantalla */
        max-width: 250px; /* Le ponemos un límite para que no sea gigante */
        height: auto;     /* Altura automática para mantener proporción */
        border-radius: 50%; /* (Opcional) Si quieres que siga siendo redondo */
    }

    #portafolio h5 {
        font-size: 2.5rem;
        margin-bottom: 2rem;
    }

    /* 🔑 3. ASÍ SE AJUSTA A MÓVILES */
    .portafolio-grid {
        /* Le decimos a la rejilla que solo tenga UNA columna en pantallas < 768px */
        grid-template-columns: 1fr;
    }

    .portafolio-item {
        /* Los items simplemente ocupan esa única columna */
        width: 100%;
        padding-bottom: 56.25%;
    }

    /* ==================================================================== */
    /* 🔑 ¡¡AQUÍ ESTÁ LA CORRECCIÓN RESPONSIVE!! 🔑 */
    /* ==================================================================== */

    /* 🔑 EFECTO DE ZOOM EN MÓVIL AL HACER SCROLL 🔑 */
    /* Esta clase la añade scripts.js (Sección 7) */
    .portafolio-item.vfx-active {
        /* 1. Aplicamos un zoom (1.05 es un buen valor, 1.5 era demasiado) */
        transform: scale(1.10);
        /* 2. Aplicamos la sombra (glow) */
        box-shadow: 0 0 35px rgba(0, 0, 0, 0.5);
        /* 3. El z-index es crucial para que se ponga por encima de sus vecinos */
        z-index: 10;
    }

    /* 🔑 CLAVE PARA VER LAS LETRAS EN RESPONSIVE 🔑 */
    /* 4. Cuando el item está activo, mostramos el overlay */
    .portafolio-item.vfx-active .item-overlay {
        opacity: 1;
    }

    /* 5. Y también activamos la animación de subida del texto */
    .portafolio-item.vfx-active .item-overlay h3,
    .portafolio-item.vfx-active .item-overlay .view-project {
        transform: translateY(0);
    }

    /* ==================================================================== */
    /* 🔑 FIN DE LA CORRECCIÓN 🔑 */
    /* ==================================================================== */

    .footer-content {
        flex-direction: column;
        gap: 2rem;
    }

    /* Nueva regla para el botón de cerrar en el modal de contacto */
    .contact-modal .close-button {
        top: 0.5rem;
        right: 1rem;
        font-size: 2rem;
    }

    /* Nueva regla para el botón de cerrar en el lightbox */
    .lightbox-content .close-button {
        top: 0.5rem;
        right: 1rem;
        font-size: 2rem;
    }

    /* 👇 AGREGA ESTO PARA CENTRAR LOS TÍTULOS EN MÓVIL 👇 */
    .item-overlay {
        align-items: center !important;
        /* Centra la caja del título horizontalmente */
        text-align: center !important;
        /* Centra las letras del texto */

        padding: 10px !important;
        /* Reduce el relleno para que quepa mejor */
    }

    .item-overlay h3 {
        font-size: 1.1rem;
        /* Ajusta el tamaño para que no sea gigante con el zoom */
        width: 100%;
        /* Asegura que use todo el ancho para centrarse */
        margin-bottom: 5px;
    }
    .nav-links a:nth-child(2) {
        display: none;
    }
}

@media (max-width: 480px) {

    /* --- CAMBIOS ADICIONALES PARA MÓVILES MUY PEQUEÑOS --- */
    #footer .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .footer-links a {
        margin: 0 0.5rem;
    }
}

/* --- PRELOADER CON ANIMACIÓN DE FIRMA (Trazo) --- */

/* Evita el scroll mientras el preloader está activo */
body.loading {
    overflow: hidden !important;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-fondo);
    /* Fondo negro */
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
    /* Transición de desvanecimiento */
}

#preloader {
    /* Mantenemos el fondo negro y la ocupación de toda la pantalla */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-fondo, #000000);
    z-index: 9999;

    /* 🔑 CLAVE: Usamos Flexbox para centrar el contenido */
    display: flex;
    justify-content: center;
    /* Centrado horizontal */
    align-items: center;
    /* Centrado vertical */

    /* Aseguramos que el contenido pueda moverse sin que el preloader tiemble */
    overflow: hidden;
}

.preloader.fade-out {
    opacity: 0;
    pointer-events: none;
    /* Desactiva interacción cuando se oculta */
}

.signature-svg {
    /* CAMBIO CLAVE: Usar VW para hacerlo responsivo */
    width: 45vw;
    /* El ancho será el 45% del ancho de la ventana visible */
    height: auto;

    /* 🔑 AÑADIDO: Limitar el tamaño máximo (desktop) */
    max-width: 150px;
    /* La firma nunca será más grande de 350px */

    /* 🔑 AÑADIDO: Limitar el tamaño mínimo (móviles muy pequeños) */
    min-width: 150px;
    /* La firma nunca será más pequeña de 200px */

    /* 🔑 CLAVE: Usa transform: translate para moverlo */
    /* Mueve 50px hacia la izquierda y 30px hacia arriba */
    /* Mantenemos el ajuste de posición (si lo aplicaste) */
    transform: translate(25px, 0px);
}

/* ... otros estilos del preloader ... */

/* Estilos iniciales del PATH para GSAP (STROKE DRAW) */
#signature-path {
    fill: none !important;
    /* Aseguramos que no haya relleno */
    stroke: var(--color-firma);
    /* El color de la firma (Dorado) */
    stroke-width: 10;
    /* Usamos el stroke-width de 10 del logo original */
    stroke-linecap: round;
    /* Puntas redondeadas, más parecido a una firma */

    /* 3. Propiedades iniciales para GSAP */
    opacity: 0;
    /* Lo ocultamos hasta que GSAP lo inicialice */

    /* Evita cualquier animación CSS conflictiva */
    animation: none !important;
}

/* NUEVOS ESTILOS para el path de detalle/relleno */
#detail-path {
    /* CLAVE: Lo definimos como trazo (stroke) */
    fill: none !important;
    stroke: var(--color-firma);
    stroke-width: 10;
    /* Usamos el stroke-width d e 10 del logo original */
    /* Puedes dejar esta línea o quitarla. Si la quitas, toma el valor del HTML (3). Si la dejas, anulará el valor del HTML. */
    /* stroke-width: 3; */
    stroke-linecap: round;
    /* Mantiene la consistencia con la firma principal */

    /* Lo ocultamos hasta que GSAP lo inicialice */
    opacity: 0;

    /* Evita cualquier animación CSS conflictiva */
    animation: none !important;
}