/* ==================================
   RESET BÁSICO Y VARIABLES
   ================================== */
:root{
--bg: #121212;
--primary: #81b8b2; /* Color principal (Verde Azulado) */
--accent: #9ee2d9; /* Color de acento */
--card: #171717; /* Fondo de tarjetas */
--dark-grey: #242424; /* Gris oscuro para bordes y detalles */
}

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

body {
margin: 0;
font-family: 'Nunito', sans-serif; 
background-color: var(--bg);
color: #fff;
scroll-behavior: smooth;
text-align: center;
}

a {
text-decoration: none;
color: white;
}

/* ----------------------------------
   ESTILOS DEL NAVBAR (CORREGIDO Y FINAL)
   ---------------------------------- */
header.navbar {
position: fixed; top: 0; left: 0; width: 100%; 
background: rgba(18,18,18,0.95);
display: flex; justify-content: space-between; align-items: center;
height: 85px; padding: 5px 5%; 
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
box-sizing: border-box;
z-index: 1000;
}
.navbar .logo { 
font-weight: bold; font-size: 1.4em; color: var(--primary); cursor: pointer;
}
/* Estilos para el enlace del logo (para quitar el subrayado) */
.navbar .logo a {
color: inherit; 
text-decoration: none; 
transition: opacity 0.3s;
}
.navbar .logo a:hover {
color: inherit; 
opacity: 0.8;
}
.navbar nav { 
display: flex; justify-content: flex-end; align-items: center;
}
.navbar nav ul { 
display: flex; list-style: none; margin: 0; padding: 0; gap: 15px; 
justify-content: flex-end; align-items: center;
}
.navbar nav ul li a { 
display: inline-block; color: white; font-weight: 500; padding: 8px 12px; 
transition: color 0.3s, transform 0.3s; cursor: pointer;
}
.navbar nav ul li a:hover { 
color: var(--primary); transform: scale(1.05); 
}
.navbar nav ul li a.active { 
color: var(--primary); font-weight: 700; border-bottom: 2px solid var(--primary); 
}

/* Hamburger icon */
.hamburger { 
display: none; flex-direction: column; cursor: pointer; z-index: 1001; gap: 4px;
}
.hamburger div { 
width: 28px; height: 3px; background-color: white; margin: 4px 0; transition: 0.4s; 
}


/* ----------------------------------
   CONTENIDO PRINCIPAL Y TÍTULO DE LA PÁGINA
   ---------------------------------- */
.main-content {
padding-top: 110px; /* Separación del navbar */
padding-bottom: 50px;
padding-left: 5%;
padding-right: 5%;
max-width: 1400px;
margin: 0 auto;
text-align: center;
}

.video-page-title {
font-family: 'Nunito', sans-serif;
font-size: 2.5em;
color: var(--accent);
text-align: center;
margin-bottom: 10px;
margin-top: 0;
}

/* ----------------------------------
   ESTILOS DE CONTENIDO (MODIFICADOS PARA VIDEO/TÍTULO)
   ---------------------------------- */
.main-content h2 {
color: var(--primary);
margin: 40px 0 20px 0;
font-size: 1.8em;
text-align: center;
width: 100%;
}

.video-grid-3, .reels-grid, .renders-grid {
display: grid;
gap: 20px;
}

/* --- ESTILOS CLAVE: Proporciones para IFRAMES de YouTube --- */

/* Contenedor Base para videos horizontales (16:9) */
.video-card {
 background-color: var(--card);
 border-radius: 6px;
 display: flex; 
 flex-direction: column; 
 overflow: hidden;
 padding: 0;
}
.iframe-container {
 position: relative;
 width: 100%;
 padding-top: 56.25%; /* Proporción 16:9 */
 flex-grow: 1;
}

/* Contenedor Base para videos verticales (9:16) - Usado en .reel-card y .animation-video */
.reel-card, .animation-video {
 background-color: var(--card);
 border-radius: 6px;
 display: flex;
 flex-direction: column; 
 overflow: hidden;
 padding: 0;
}
.iframe-container-vertical {
 position: relative;
 width: 100%;
 padding-top: 177.77%; /* Proporción 9:16 */
 flex-grow: 1;
}

/* Estilo para todos los IFRAMES incrustados */
.iframe-container iframe, .iframe-container-vertical iframe, .iframe-container-vertical-flex iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: none;
 display: block;
}

/* --- Estilos de Grids y Contenedores --- */

/* Grid para 3 Videos Corporativos (Wide) */
.video-grid-3 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* Eliminamos los estilos para .video-card video y .reel-card video */
/* El aspecto-ratio en .video-card y .reel-card ahora es manejado por el padding-top en el iframe-container */


/* Título debajo del video */
.video-title-overlay, .reel-title-overlay {
position: relative; 
width: 100%;
background: var(--dark-grey);
color: white;
padding: 10px 5px;
font-size: 0.9em;
text-align: center;
pointer-events: auto;
border-radius: 0 0 6px 6px; 
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Grid para Reels (Vertical) */
.reels-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* El .reel-card ahora usa .iframe-container-vertical para videos */


/* Animación 3D y Renders (Unidad) */
.animation-unit {
display: flex;
gap: 20px;
margin-bottom: 50px;
flex-wrap: wrap; 
}
/* Contenedor Flex para el video vertical dentro de animation-unit (para que se ajuste con el título abajo) */
.animation-video {
 background-color: var(--card);
 border-radius: 6px;
 flex: 1 1 250px; /* Ocupa un tercio del espacio total, pero con min-width de 250px */
 display: flex; 
 flex-direction: column; 
 overflow: hidden;
 min-height: 400px; /* Mantener la altura mínima en desktop */
}

/* Contenedor de proporción dentro de .animation-video */
.iframe-container-vertical-flex {
 position: relative;
 width: 100%;
 padding-top: 177.77%; /* Proporción 9:16 */
 flex-grow: 1; /* Permite que el contenedor de video se estire */
}

/* Eliminamos .animation-video video */

.renders-grid {
flex: 2 1 550px; /* Ocupa dos tercios del espacio restante, con min-width de 550px */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
}
/* CORRECCIÓN RENDER: Contenedor Flex y ajustes de imagen */
.render-card {
background-color: var(--card);
/* APLICADA CORRECCIÓN: Aspect-ratio 9/16 para formato vertical */
aspect-ratio: 9/16; 
border-radius: 6px;
display: flex; 
overflow: hidden;
padding: 0;
}
.render-card img {
width: 100%;
height: 100%;
object-fit: cover; 
border-radius: 6px;
display: block;
}


/* ----------------------------------
   ESTILOS RESPONSIVE (Móvil) - FINAL CORREGIDO
   ---------------------------------- */
@media (max-width: 768px) { 
/* Muestra el botón hamburguesa */
.hamburger { display: flex; }

.navbar nav ul {
flex-direction: column;
/* 💡 CLAVE: Devolvemos el centrado de los ítems */
align-items: center; 
max-height: 0;
overflow: hidden;
background-color: #1c1c1c; 
width: 100%;
position: absolute;
top: 85px; 
left: 0;
padding: 0;
margin: 0;
transition: max-height 0.5s ease-out;
z-index: 999;
gap: 0; 
}

/* Estado Abierto (Añadido por JavaScript) */
.navbar nav ul.show {
max-height: 600px; 
padding-top: 10px; 
padding-bottom: 10px; 
}

.navbar nav ul li {
/* 💡 CLAVE: Aseguramos que el texto esté centrado */
width: 100%; 
text-align: center; 
padding: 0; /* Limpiamos el padding lateral aquí */
}

.navbar nav ul li a {
display: block;
width: 100%;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
/* Añadimos padding lateral para que los separadores no se peguen al borde */
padding-left: 5%;
padding-right: 5%;
}

.navbar nav ul li:last-child a {
border-bottom: none; 
}

/* Contenido General */
.main-content { padding-top: 90px; }
.video-page-title { font-size: 1.8em; margin-bottom: 20px;}
/* Aseguramos que la barra de hamburguesa no tenga un fondo extraño */
.hamburger {
display: flex;
background: transparent;
padding: 10px 0; 
}

/* Ajuste de grids en móvil */
.video-grid-3 { grid-template-columns: 1fr; } /* Un video por fila */
.reels-grid { grid-template-columns: repeat(2, 1fr); } /* Dos reels por fila */

/* CORRECCIÓN: Animación 3D y Renders (FLEXBOX) */
.animation-unit { 
flex-direction: column; /* Apila el video y los renders */
gap: 20px;
}

/* CORRECCIÓN CLAVE 1: Eliminamos la altura fija del video vertical */
.animation-video {
min-height: auto; /* Quitamos la altura mínima forzada para que se ajuste a 9:16 */
flex: 1 1 100%; /* Ocupa el 100% del ancho del contenedor */
width: 100%;
aspect-ratio: 9/16;
}
/* Aseguramos que el contenedor de proporción no interfiera con el flexbox en móvil */
.iframe-container-vertical-flex {
 padding-top: 177.77%; 
 flex-grow: 0; /* Desactivar flex-grow en móvil */
 height: 100%;
}

/* CORRECCIÓN CLAVE 2: Aseguramos que los renders ocupen el espacio debajo del video */
.renders-grid { 
grid-template-columns: repeat(3, 1fr); /* 3 renders pequeños en fila */
flex: 1 1 100%; /* Ocupa el 100% del ancho */
}
}

/* Animación de zoom simple */
@keyframes zoom {
from {transform: scale(0.1)} 
to {transform: scale(1)}
}

/* Estilo extra para indicar que las imágenes son clickeables */
.reel-card img, .render-card img {
cursor: pointer;
transition: opacity 0.3s;
}
.reel-card img:hover, .render-card img:hover {
opacity: 0.8;
}