/* Espaciado en el menú */
.crunch-item {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

/* El Contenedor del Botón */
.crunch-btn {
    /* 1. Definimos FLEX para que lo de adentro se centre y ocupe espacio real */
    display: flex;
    justify-content: center;
    align-items: center;

    /* 2. Tamaño FIJO del botón. Si no le das altura, desaparece. */
    width: 140px; 
    height: 45px;

    /* 3. Un pequeño padding para que el logo no toque los bordes (estético)
          Si quieres que toque los bordes, ponlo en 0px */
    padding: 5px; 
	margin-top: 5px;

    
    /* Transiciones */
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box; 
}

/* La Imagen */
.crunch-btn img {
    /* Forzamos a que la imagen sea un bloque */
    display: block; 
    
    /* Le decimos que ocupe TODO el espacio disponible dentro del padding */
    width: 100%;
 
    
    /* VITAL: 'contain' hace que la imagen se vea entera sin cortarse. 
       Ajusta el tamaño automáticamente para encajar en el rectángulo. */
    object-fit: contain; 
    
    
    
    transition: all 0.2s ease;
}

/* --- Efecto Hover --- */
.crunch-btn:hover {
    background-color: ; 
    border-color: #000000;
    
    /* Sombra Twitch */
    transform: translate(-3px); 
}









/* --- FORZAR ESTILO ACTIVO EN MENÚ --- */
header .desktop-nav-list a.active-parent,
header .desktop-nav-list a.active {
    color: var(--accent-red) !important; /* El rojo de tu marca */
    opacity: 1 !important;
    font-weight: 800;
    letter-spacing: -1px;
}

/* Si en móvil también lo quieres rojo */
.mobile-menu-list a.active-parent,
.mobile-menu-list a.active {
    color: var(--accent-red) !important;
}


/* CONFIGURACIÓN GENERAL */
:root {
    --bg-color: #0e0e0e;
    --text-color: #ffffff;
    --accent-red: #fc4400;
    --header-h: 80px; 
}

body {
    margin: 0; padding: 0;
    background-color: var(--bg-color); color: var(--text-color);
    font-family: 'Syne', sans-serif; 
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.loading { overflow: hidden; }

/* CORRECCIÓN SCROLL: Al abrir el menú, bloqueamos el body */
body.menu-open { overflow: hidden; }

a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }

/* --- PRELOADER --- */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #0e0e0e; z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.6s ease-out, visibility 0.6s;
}
#preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }

.popcorn-svg { width: 100px; height: 100px; overflow: visible; }
.bucket { fill: none; stroke: #fff; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.kernel { fill: #fff; opacity: 0; }
.k1 { animation: pop 1.2s ease-in-out infinite; transform-origin: center; }
.k2 { animation: pop 1.2s ease-in-out infinite 0.4s; transform-origin: center; }
.k3 { animation: pop 1.2s ease-in-out infinite 0.8s; transform-origin: center; }

@keyframes pop {
    0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
    30% { opacity: 1; }
    50% { transform: translate(0, -40px) scale(1.2); }
    100% { transform: translate(0, 0) scale(0.5); opacity: 0; }
}

/* --- HEADER PRINCIPAL --- */
header {
    position: fixed; top: 0; left: 0; width: 100%; 
    height: var(--header-h); 
    display: flex; align-items: center; justify-content: space-between; 
    background: rgba(14, 14, 14, 0.95);
    z-index: 1000; padding: 0 30px; box-sizing: border-box;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.logo { display: flex; align-items: center; height: 100%; z-index: 1002; margin-right: 40px; flex-shrink: 0; }
.logo img { height: 70px; width: auto; object-fit: contain; transition: opacity 0.3s; }
.logo:hover img { opacity: 0.7; }

.desktop-nav-container { flex-grow: 1; height: 100%; display: flex; justify-content: flex-end; align-items: center; }
.desktop-nav-list { display: flex; gap: 25px; flex-wrap: nowrap; align-items: center; height: 100%; }

/* --- MENU LINKS (DESKTOP) --- */
.desktop-nav-list > li { 
    height: 100%; 
    display: flex; 
    align-items: center; 
    position: relative; 
    cursor: pointer;
    z-index: 1005; 
}

/* PUENTE INVISIBLE SCOPED */
.has-submenu::after {
    content: '';
    position: absolute;
    bottom: -20px; 
    left: 0;
    width: 100%; 
    height: 20px;
    background: transparent;
    pointer-events: auto;
}

.desktop-nav-list > li > a {
    font-size: clamp(0.65rem, 0.85vw, 0.85rem); 
    text-transform: uppercase;
    letter-spacing: 0px; 
    font-weight: 600; 
    opacity: 0.9;
    white-space: nowrap;
    color: #fff;
    transition: all 0.2s ease;
    padding: 30px 10px; 
    position: relative;
    z-index: 1006; 
}

.desktop-nav-list > li:hover > a {
    color: var(--accent-red);
    font-weight: 800;
    letter-spacing: -1px;
    opacity: 1;
}

/* --- SUBMENU BARRA HORIZONTAL (ESCRITORIO) --- */
.has-submenu { position: relative; } 

.submenu {
    position: fixed; 
    top: var(--header-h);
    left: 0;
    width: 100%;
    height: var(--header-h); 
    background: rgba(14, 14, 14, 0.95); 
    border-bottom: 1px solid rgba(255,255,255,0.05);
    box-sizing: border-box;
    display: flex; justify-content: center; align-items: center;
    gap: 50px; 
    padding: 0;
    opacity: 0; visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.2s ease-out;
    z-index: 900; 
}

.has-submenu:hover .submenu,
.submenu:hover {
    opacity: 1; visibility: visible;
    transform: translateY(0);
}

/* Estilo idéntico al menú principal */
.submenu li a {
    font-size: clamp(0.65rem, 0.85vw, 0.85rem); 
    text-transform: uppercase;
    color: #fff; 
    font-weight: 600;
    letter-spacing: 0px; 
    opacity: 0.9;
    white-space: nowrap;
    transition: all 0.2s ease;
    padding: 15px; 
    display: block;
}

.submenu li a:hover {
    color: var(--accent-red); 
    font-weight: 800;
    letter-spacing: -1px;
    opacity: 1;
}

/* --- BURGER & MOBILE --- */
.burger-btn { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 20px; cursor: pointer; z-index: 1002; transition: opacity 0.3s; margin-left: 20px; flex-shrink: 0; }
.burger-btn span { display: block; width: 100%; height: 2px; background: white; }
body.menu-open .burger-btn { opacity: 0; pointer-events: none; }

.mobile-menu-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; 
    background: #000; z-index: 2000; 
    display: flex; flex-direction: column; justify-content: flex-start;
    align-items: center; /* CENTRADO */
    padding-top: 100px; padding-left: 20px; padding-right: 20px; 
    box-sizing: border-box; 
    opacity: 0; visibility: hidden; 
    transition: opacity 0.4s ease, visibility 0.4s; 
}

body.menu-open .mobile-menu-overlay { opacity: 1; visibility: visible; }
.close-menu-btn { position: absolute; top: 30px; right: 30px; font-size: 2.5rem; font-weight: 300; cursor: pointer; line-height: 1; color: #fff; transition: transform 0.3s; z-index: 2005; }

.mobile-menu-list { 
    text-align: center; width: 100%; 
    max-height: calc(100vh - 120px); overflow-y: auto; 
    padding-bottom: 60px;
}

.mobile-menu-list > li { 
    margin: 15px 0; overflow: visible; 
    display: flex; flex-direction: column; align-items: center; 
}

/* LINKS MÓVILES (Principal) */
.mobile-menu-list a { 
    font-size: clamp(1.2rem, 5vw, 1.8rem); 
    font-weight: 700; 
    text-transform: uppercase; 
    display: block; 
    letter-spacing: 0px; 
    color: #fff;
    cursor: pointer;
    padding: 5px 0;
    transition: color 0.3s ease, font-weight 0.2s ease;
}

.mobile-menu-list a:hover {
    color: var(--accent-red);
    font-weight: 800;
}

/* Lógica Submenú Móvil */
.mobile-menu-list .has-submenu {
    display: flex; flex-direction: column; align-items: center; 
}

/* Hover activado en el título padre */
.mobile-menu-list .has-submenu:hover > a {
    color: var(--accent-red);
    font-weight: 800;
}

.mobile-menu-list .submenu {
    position: static; width: auto; height: auto;
    background: transparent; border: none;
    display: block; max-height: 0; overflow: hidden;
    opacity: 0; padding: 0; margin-top: 0;
    visibility: visible; transform: none;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.3s;
    pointer-events: auto;
    margin-right: 0;
}

.mobile-menu-list .has-submenu:hover .submenu {
    max-height: 500px; opacity: 1;
    margin-top: 5px; padding: 0;
}

.mobile-menu-list .submenu li {
    text-align: center; margin: 10px 0;
}

/* Links del Submenú Móvil (IDÉNTICOS al padre) */
.mobile-menu-list .submenu li a {
    font-size: clamp(1.2rem, 5vw, 1.8rem) !important;
    color: #fff; font-weight: 700;
    text-transform: uppercase;
    padding: 5px 0; letter-spacing: 0px;
}

.mobile-menu-list .submenu li a:hover {
    color: var(--accent-red);
    font-weight: 800; letter-spacing: 0px;
}

/* --- HERO & GRID --- */
.hero-slider-container { position: relative; width: 100%; height: 100vh; overflow: hidden; background: #000; }
.hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease-in-out; z-index: 1; pointer-events: none; }
.hero-slide.active { opacity: 1; z-index: 2; pointer-events: auto; }
.hero-slide::before { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; transform: translate(-50%, -50%); z-index: 0; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.video-bg-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; pointer-events: none; background: #000; }
.video-bg-wrapper iframe { width: 100%; height: 100%; border: 0; }

.hero-text { position: absolute; bottom: 80px; left: 40px; z-index: 10; pointer-events: auto; cursor: pointer; transition: transform 0.4s ease; }
.hero-text:hover { transform: scale(1.05) translate(10px, 0); }
.hero-text h1 { font-size: 5rem; margin: 0; line-height: 0.9; text-transform: uppercase; font-weight: 700; letter-spacing: -1.5px; color: #fff; transition: color 0.3s, font-weight 0.3s; }
.hero-text:hover h1 { color: var(--accent-red); font-weight: 800; }
.hero-text p { font-size: 1.2rem; margin-top: 15px; opacity: 0.9; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; }

.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: white; font-size: 3rem; cursor: pointer; z-index: 20; padding: 20px; opacity: 0.5; transition: 0.3s; }
.slider-arrow:hover { opacity: 1; }
.arrow-left { left: 20px; }
.arrow-right { right: 20px; }

.grid-container { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--bg-color); position: relative; z-index: 10; }
.grid-item { 
    position: relative; 
    width: 100%; 
    padding-bottom: 56.25%; 
    overflow: hidden; 
    background: #000; 
    
    /* CAMBIO: Eliminamos "border" y la transición de color */
    border: none; 
    transition: transform 0.3s; 
}

.grid-item:hover { 
    /* CAMBIO: Eliminamos el cambio de "border-color" */
    z-index: 15; 
}
.grid-link-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; cursor: pointer; }
.grid-item iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; transform: scale(1.03); pointer-events: none; background: #000; transition: transform 0.6s ease; opacity: 0.7; }
.grid-item:hover iframe { transform: scale(1.1); opacity: 1; }

.item-info { position: absolute; bottom: 25px; left: 25px; z-index: 20; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,0.8); transition: transform 0.3s ease; }
.grid-item:hover .item-info { transform: translateX(10px); }
.item-category { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; margin-bottom: 5px; font-weight: 700; }
.item-title { display: block; font-size: 1.5rem; text-transform: uppercase; font-weight: 700; line-height: 1; letter-spacing: -0.5px; color: #fff; transition: color 0.3s, font-weight 0.3s; }
.grid-item:hover .item-title { color: var(--accent-red); font-weight: 800; }
.grid-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); pointer-events: none; }

@media (max-width: 1024px) {
    .desktop-nav-container { display: none; }
    .burger-btn { display: flex; margin-left: auto; }
    header { padding: 0 20px; }
    .hero-text h1 { font-size: 3.5rem; } 
    .grid-container { grid-template-columns: 1fr; }
    .slider-arrow { display: block; font-size: 2rem; padding: 10px; }
    .arrow-left { left: 5px; }
    .arrow-right { right: 5px; }
}








/* --- ESTADOS ACTIVOS DEL MENÚ (Para saber en qué página estás) --- */

/* Escritorio: Padre Activo (Nuestros Proyectos) */
.desktop-nav-list > li.active-parent > a {
    color: var(--accent-red);
    font-weight: 800;
    letter-spacing: -1px;
    opacity: 1;
}

/* Escritorio: Hijo Activo (Comerciales) */
.submenu li a.active-child {
    color: var(--accent-red);
    font-weight: 800;
    letter-spacing: -0.5px;
    opacity: 1;
}

/* Móvil: Estados Activos */
.mobile-menu-list .active-parent > a,
.mobile-menu-list .submenu li a.active-child {
    color: var(--accent-red);
    font-weight: 800;
}

/* --- TÍTULO DE CATEGORÍA --- */
.category-header {
    padding-top: calc(var(--header-h) + 60px); /* Espacio para que no lo tape el header */
    padding-bottom: 40px;
    padding-left: 5%;
    padding-right: 5%;
    background-color: var(--bg-color);
}

.category-title {
    font-size: clamp(2.5rem, 8vw, 6rem); /* Grande y responsivo */
    text-transform: uppercase;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 0.9;
    letter-spacing: -2px;
}





/* --- FOOTER STYLES (VERTICAL, CENTRADO Y COMPACTO) --- */
footer {
    background-color: #050505;
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    /* Reduje el padding superior de 80px a 50px */
    padding: 50px 20px 0 20px; 
    position: relative;
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
}

.footer-content {
    width: 100%;
    max-width: 600px; /* Ancho máximo más angosto para compactar */
    margin: 0 auto;   
}

.footer-grid {
    display: flex;           
    flex-direction: column;  
    align-items: center;     
    gap: 35px;               /* REDUCIDO: Antes 60px, ahora 35px */
    margin-bottom: 50px;     /* REDUCIDO: Espacio antes de la firma */
}

/* --- REORDENAMIENTO (Mantenemos tu orden preferido) --- */
/* 1. Contacto */
.footer-group:nth-child(2) { order: 1; }

/* 2. Ubicación */
.footer-group:nth-child(1) { order: 2; }

/* 3. Social */
.footer-group:nth-child(3) { order: 3; }


.footer-group {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    gap: 5px; /* REDUCIDO: Espacio entre título y contenido (antes 12px) */
}

/* Etiquetas */
.label {
    font-size: 0.7rem; /* Un pelín más pequeño */
    text-transform: uppercase;
    color: #555; 
    font-weight: 700;
    margin-bottom: 2px; /* Pegado al contenido */
    letter-spacing: 1px;
}

/* Texto general */
.footer-group p, 
.footer-group a {
    font-size: 1.1rem; 
    color: #fff;
    font-weight: 500;
    margin: 0;
    text-decoration: none;
    line-height: 1.4; /* Altura de línea más ajustada */
    transition: color 0.3s ease;
}

/* Copyright (dentro del grupo ubicación) */
.mini-copyright {
    font-size: 0.7rem;
    color: #444;
    margin-top: 5px; /* Más pegado al texto de la ciudad */
}

/* Redes Sociales */
.social-row {
    display: flex;
    justify-content: center;
    gap: 20px; /* Un poco más juntas */
    margin-top: 5px;
}

.social-row a {
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    font-weight: 700;
}

/* Hover General */
.hover-link:hover {
    color: var(--accent-red);
}

/* --- CRÉDITOS BZIER GROUP --- */
.footer-credits {
    width: 100%;
    text-align: center;
    border-top: 0.5px solid rgba(255, 255, 255, 0.05); 
    padding-top: 15px; /* Menos aire */
    padding-bottom: 15px;
}

.footer-credits p {
    font-size: 0.65rem; 
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #333; 
    margin: 0;
    font-weight: 600;
}

.footer-credits a {
    color: #666; 
    text-decoration: none;
    font-weight: 800;
    transition: color 0.3s ease;
}

.footer-credits a:hover {
    color: var(--accent-red);
}



/* --- RESPONSIVE CELULAR --- */
@media (max-width: 768px) {
    footer {
        padding: 40px 20px 0 20px; /* Aún más compacto en celular */
    }

    .footer-grid {
        gap: 40px; /* Espacio justo para separar los bloques visualmente */
        margin-bottom: 40px;
    }
	
	.footer-container { grid-template-columns: 1fr; text-align: center; gap: 50px; }
    .social-links a { display: block; margin: 15px 0; }
    footer { padding: 50px 20px; padding-bottom: 100px; }
	
}





/* --- PÁGINA DE PROYECTO INDIVIDUAL --- */

/* Contenedor de Video Fijo (Sin slider) */
.project-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
}

/* Sección de Información (Debajo del video) */
.project-info-section {
    padding: 100px 20px; /* Buen espacio vertical */
    max-width: 800px;    /* Ancho controlado para lectura cómoda */
    margin: 0 auto;      /* Centrado */
    text-align: center;  /* Todo centrado estilo editorial */
}

.project-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 30px;
    color: #fff;
    letter-spacing: -2px;
}

.project-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #ccc;
    margin-bottom: 60px; /* Separación con los créditos */
    font-weight: 400;
}

/* Lista de Créditos */
.credits-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 40px;
}

.credit-item {
    display: flex;
    justify-content: space-between; /* Separa Rol y Nombre a los extremos */
    align-items: flex-end;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05); /* Línea sutil entre items */
    padding-bottom: 5px;
}

.credit-role {
    color: #666; /* Rol en gris */
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.credit-name {
    color: #fff; /* Nombre en blanco */
    font-weight: 600;
    text-transform: uppercase;
}

/* Responsive para créditos */
@media (max-width: 768px) {
    .project-info-section {
        padding: 60px 20px;
    }
    
    .credit-item {
        flex-direction: column; /* En celular, uno arriba del otro */
        align-items: center;
        gap: 5px;
        padding-bottom: 15px;
    }
}





/* --- PÁGINA DE PROYECTO (CUSTOM PLAYER CLEAN) --- */

.project-hero {
    height: calc(100vh - 80px); 
    width: 100%;
    margin-top: 80px; 
    background: #000;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-interactive-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* El video va al fondo */
.video-interactive-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
    /* Bloqueamos el mouse al iframe para que Vimeo no muestre nada */
    pointer-events: none; 
    z-index: 0; 
}

/* EL ESCUDO: Capa invisible encima del video */
.click-shield {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: transparent; /* Invisible */
    z-index: 10; /* Encima del video */
    cursor: pointer; /* Manito para indicar clic */
}

/* Controles personalizados (Encima del escudo) */
.custom-controls-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    /* Degradado sutil para que se vean los iconos */
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    opacity: 0; 
    transition: opacity 0.3s ease;
    z-index: 20; /* Encima del escudo */
    pointer-events: none; /* Dejamos pasar el mouse... */
}

/* ...pero activamos los botones individuales */
.custom-btn {
    pointer-events: auto;
}

/* Mostrar controles al pasar el mouse por el contenedor principal */
.project-hero:hover .custom-controls-bar {
    opacity: 1;
}

/* Botones SVG */
.custom-btn {
    background: none; border: none; cursor: pointer; padding: 0;
    color: #fff; transition: transform 0.2s ease, color 0.2s ease;
    display: flex; align-items: center; justify-content: center;
}
.custom-btn svg { width: 24px; height: 24px; fill: currentColor; }
.custom-btn:hover { color: var(--accent-red); transform: scale(1.1); }

@media (max-width: 768px) {
    .project-hero { height: auto; aspect-ratio: 16/9; min-height: 300px; }
    .custom-controls-bar { opacity: 1; padding: 15px 20px; }
}







/* --- CUSTOM VIDEO PLAYER STYLES --- */

/* El contenedor principal debe ser relativo para posicionar los botones */
.project-hero {
    position: relative;
    width: 100%;
    height: calc(100vh - 80px); 
    margin-top: 80px; 
    background: #000;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Importante para que no se salgan los controles */
}

.video-interactive-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Busca esta sección y asegúrate que quede EXACTAMENTE así: */

.video-interactive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    
    /* EL TRUCO MAESTRO: */
    /* Esto impide que el mouse interactúe con el iframe de Vimeo */
    /* Al no detectar el mouse, Vimeo no muestra su barra */
    pointer-events: none !important; 
    
    z-index: 0; /* Al fondo */
}

/* --- BARRA DE CONTROLES PERSONALIZADA (EN UNA SOLA FILA) --- */
.custom-controls-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px; /* Altura fija para controlar la zona activa */
    padding: 0 25px; /* Espacio a los lados */
    box-sizing: border-box;
    
    display: flex;
    flex-direction: row; /* Todo en una línea horizontal */
    align-items: center; /* Centrado verticalmente */
    gap: 20px; /* Espacio entre botones y barra */
    
    /* Degradado sutil solo abajo */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
    opacity: 0; 
    transition: opacity 0.3s ease;
    z-index: 20;
    pointer-events: none; /* Dejamos pasar el mouse en las zonas vacías */
}

/* Permitir clicks solo en los elementos funcionales */
.control-group, .progress-container {
    pointer-events: auto;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre iconitos del mismo grupo */
    flex-shrink: 0; /* Evita que los botones se aplasten */
}

/* --- LÍNEA DE TIEMPO (PROGRESS BAR) --- */
.progress-container {
    flex-grow: 1; /* EL TRUCO: Ocupa todo el espacio disponible en el centro */
    height: 4px; /* Línea fina y elegante */
    background: rgba(0, 0, 0, 0.30);
    cursor: pointer;
    position: relative;
    border-radius: 2px;
    transition: height 0.2s ease;
    display: flex; /* Para alinear verticalmente el fill */
    align-items: center;
}

/* Zona de interacción más grande invisible para facilitar el clic */
.progress-container::before {
    content: '';
    position: absolute;
    top: -10px; bottom: -10px; left: 0; right: 0;
    z-index: 1;
}

.progress-container:hover {
    height: 6px; /* Se engrosa ligeramente al hover */
}

.progress-fill {
    height: 100%;
    background-color: var(--accent-red); /* TU ROJO */
    width: 0%;
    border-radius: 2px;
    position: relative;
}

/* Bolita al final */
.progress-fill::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.progress-container:hover .progress-fill::after {
    transform: translateY(-50%) scale(1);
}

/* Mostrar controles al hover */
.project-hero:hover .custom-controls-bar {
    opacity: 1;
}

/* --- BOTONES DE LA BARRA INFERIOR (SIEMPRE ROJOS) --- */
.custom-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    
    /* CAMBIO: Color base ROJO */
    color: var(--accent-red); 
    
    transition: transform 0.2s ease, color 0.2s ease, filter 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    /* Drop shadow sutil para que el rojo se lea bien sobre fondo negro/video */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}

/* Hover: Se ponen blancos para indicar interacción (o brillan más) */
.custom-btn:hover {
    color: #fff; /* Al pasar el mouse se vuelven blancos para feedback */
    transform: scale(1.15);
}

@media (max-width: 768px) {
    .project-hero { height: auto; aspect-ratio: 16/9; min-height: 300px; }
    .custom-controls-bar { opacity: 1; padding: 0 15px; height: 60px;}
}




/* --- BOTÓN PLAY CENTRAL GIGANTE (ESTILO LINEAL) --- */
.big-center-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 90px;
    height: 90px;
    border-radius: 50%;
    
    /* Fondo oscuro semitransparente para que contraste con el video */
    background: rgba(0, 0, 0, 0.4); 
    
    /* Borde blanco inicial */
    border: 3px solid #fff; 
    color: #fff;
    cursor: pointer;
    z-index: 30;
    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: auto; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.big-center-play-btn svg {
    width: 40px;
    height: 40px;
    fill: currentColor;
    
    /* TRUCO DE CENTRADO ÓPTICO: */
    /* El triángulo de play pesa más a la izquierda, así que lo empujamos */
    /* un poquito a la derecha para que el ojo lo vea centrado */
    margin-left: 6px; 
    display: block;
}

/* --- HOVER LINEAL (SOLO BORDE E ICONO) --- */
.big-center-play-btn:hover {
    background: rgba(0, 0, 0, 0.6); /* Oscurecemos un poco el fondo para contraste */
    border-color: var(--accent-red); /* El borde se hace ROJO */
    color: var(--accent-red);        /* El icono se hace ROJO */
    transform: translate(-50%, -50%) scale(1.1);
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .big-center-play-btn {
        width: 70px;
        height: 70px;
        border-width: 2px;
    }
    .big-center-play-btn svg {
        width: 30px;
        height: 30px;
        margin-left: 4px;
    }
}