/* =========================================
   1. RESETEO UNIVERSAL
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* =========================================
   2. ESTILOS GENERALES Y UTILIDADES
   ========================================= */
html, body {
    overflow-x: hidden; /* Corta el espacio muerto a los lados */
    width: 100%;
    scroll-behavior: smooth; 
}

body {
    background-color: #303030; 
    font-family: 'Rubik', sans-serif; 
    font-weight: 300; 
    
    /* Cursor personalizado */
    cursor: url('img/microfono.png'), auto; 

    /* Cuadrícula de fondo decorativa */
    background-image:
      linear-gradient(90deg, rgba(255, 236, 194, 0.03) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255, 236, 194, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Estilo para elementos interactivos */
a, .btn, .foto-item, .video-item, .flecha, .lista-contacto a {
    cursor: url('img/microfono.png'), pointer; 
}

/* Aplicar cuadrícula en secciones oscuras */
.dark-bg, .darker-bg, .proyectos-section {
    background-image:
      linear-gradient(90deg, rgba(255, 236, 194, 0.04) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255, 236, 194, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
}

.dark-bg { background-color: #303030; }
.darker-bg { background-color: #303030; }

/* =========================================
   3. TIPOGRAFÍA Y COMPONENTES
   ========================================= */
.Titulo {
    color: #303030;
    font-size: 35px;
    font-family: 'Lexend', sans-serif;
    font-weight: 400; 
    margin: 0;
    text-align: center;
}

.texto-centrado {
    max-width: 600px;        /* Limita el ancho para que sea cómodo de leer */
    text-align: center;      /* Alinea las letras al centro */
    margin: 40px auto;       /* ¡CORREGIDO! Con 'auto' se centra el bloque de izquierda a derecha */
    color: #ccc;             /* Un color gris claro para que haga juego con el resto de textos */
    line-height: 1.6;        /* Mejora el espacio entre líneas de lectura */
    font-style: italic;
}

.btn {
    text-decoration: none;
    color: white;
    border: 1px solid white;
    padding: 10px 25px;
    border-radius: 4px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400; 
    transition: all 0.3s ease; 
}

.btn:hover {
    background-color: white;
    color: #111;
}

.btn-servicios {
    display: inline-block;
    margin-top: 25px; 
}

/* =========================================
   4. ANIMACIONES (KEYFRAMES)
   ========================================= */
@keyframes aparecerYCrecer {
    0% { opacity: 0; transform: scale(0.7); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes aparecerBotones {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes flotarYParpadear {
    0%, 100% { opacity: 0.2; transform: translate(-50%, 0); }
    50% { opacity: 1; transform: translate(-50%, 15px); }
}

/* =========================================
   5. SECCIÓN 1: PORTADA (HERO)
   ========================================= */
.hero-section {
    height: 100vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: 
        linear-gradient(90deg, rgba(255, 236, 194, 0.04) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 236, 194, 0.04) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
        url('img/fondo.jpg');
    background-size: 60px 60px, 60px 60px, cover, cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative; 
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; 
}

.text-container {
    text-align: center;
    animation: aparecerBotones 1.5s ease-out forwards;
    animation-delay: 1s;
    opacity: 0;
}

.logo-animado {
    width: 350px;
    height: auto;
    animation: aparecerYCrecer 1.5s ease-out forwards;
}

.botones-container {
    display: flex;
    gap: 15px; 
    animation: aparecerBotones 1.5s ease-out forwards;
    animation-delay: 1s; 
    opacity: 0; 
}

.contenedor-flecha {
    position: absolute;
    bottom: 50px; 
    left: 50%;
    transform: translateX(-50%);
    animation: flotarYParpadear 2.5s infinite ease-in-out;
}

.flecha {
    width: 20px;
    height: 20px;
    border-right: 2px solid #FFECC2; 
    border-bottom: 2px solid #FFECC2;
    transform: rotate(45deg); 
    cursor: pointer;
}

/* =========================================
   6. SECCIÓN 2: INFORMACIÓN Y ZIGZAG
   ========================================= */
.info-section {
    background-color: #303030; 
    color: #FFECC2;            
    padding: 100px 20px;        
    display: flex;
    justify-content: center;
}

.contenido-info {
    max-width: 800px;          
    text-align: center;
}

.contenido-info h2 {
    font-size: 36px;
    margin-bottom: 20px;
    font-family: 'Lexend', sans-serif;
    font-weight: 400; 
}

.contenido-info p {
    font-size: 18px;
    line-height: 1.6;        
    color: #ccc;             
}

.seccion-zigzag {
    padding: 100px 20px; 
    display: flex;
    justify-content: center;
}

.contenedor-zigzag {
    max-width: 1100px; 
    width: 100%;
    display: flex;
    align-items: center; 
    gap: 60px; 
}

.contenedor-zigzag.reversa {
    flex-direction: row-reverse; 
}

.bloque-texto { flex: 1; }

.bloque-imagen {
    flex: 1; 
    display: flex;
    justify-content: center;
}

.bloque-texto h2 {
    color: #FFECC2;
    font-size: 40px;
    margin-bottom: 25px;
    font-family: 'Lexend', sans-serif;
    font-weight: 400; 
}

.bloque-texto p, .bloque-texto ul {
    color: #ccc;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.bloque-texto ul { padding-left: 20px; }
.bloque-texto li { margin-bottom: 10px; }
.bloque-texto strong {
    color: white; 
    font-weight: 400; 
}

.bloque-imagen img {
    width: 100%;
    max-width: 500px;
    border-radius: 12px; 
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.6); 
    object-fit: cover; 
}

/* =========================================
   7. SECCIÓN 3: PROYECTOS (SPOTIFY Y YOUTUBE)
   ========================================= */
.proyectos-section {
    background-color: #111111; 
    padding: 80px 20px;
    display: flex;
    justify-content: center;
}

.contenido-proyectos {
    max-width: 1000px; 
    width: 100%;
    text-align: center;
}

.contenido-proyectos h2 {
    color: #FFECC2;
    font-size: 36px;
    font-family: 'Lexend', sans-serif;
    font-weight: 400; 
    margin-bottom: 10px;
}

.contenido-proyectos h3 {
    color: #FFECC2;
    font-size: 28px;
    font-family: 'Lexend', sans-serif;
    font-weight: 400; 
    margin-top: 50px;
    margin-bottom: 25px;
}

.contenido-proyectos p {
    color: #ccc;
    font-size: 18px;
    margin-bottom: 40px;
}

.galeria-spotify {
    display: flex;
    flex-wrap: wrap; 
    gap: 30px; 
    justify-content: center;
}

.galeria-spotify iframe {
    width: 100%;
    max-width: 300px; 
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5); 
    transition: transform 0.3s ease; 
}

.galeria-spotify iframe:hover { transform: translateY(-5px); }

.playlist-container {
    margin-top: 60px; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.playlist-container h3 {
    color: #FFECC2;
    font-size: 24px;
    font-family: 'Lexend', sans-serif;
    font-weight: 400; 
    margin-bottom: 25px;
}

.playlist-container iframe {
    width: 100%;
    max-width: 660px; 
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.6); 
    border: none;
}

.galeria-youtube {
    display: flex;
    flex-wrap: wrap; 
    gap: 30px; 
    justify-content: center;
    margin-bottom: 60px; 
}

.video-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 300px; 
    transition: transform 0.3s ease;
}

.video-item:hover { transform: translateY(-5px); }

.video-item iframe {
    width: 100%;
    aspect-ratio: 16 / 9; 
    border-radius: 12px; 
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5); 
    border: none;
}

.video-item p {
    color: #ccc; 
    font-size: 14px; 
    margin-top: 12px; 
    margin-bottom: 0;
    font-family: 'Rubik', sans-serif;
    font-weight: 300; 
    line-height: 1.4;
    text-align: center;
}

/* =========================================
   8. GALERÍA DE FOTOS
   ========================================= */
.galeria-fotos-section {
    padding: 80px 20px;
    display: flex;
    justify-content: center;
}

.galeria-imagenes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 1000px; 
}

.foto-item {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    transition: transform 0.3s ease; 
    text-decoration: none;
}

.foto-item:hover { transform: translateY(-5px); }

.foto-item.foto-vertical {
    width: 100%;
    max-width: 220px; 
}

.foto-item.foto-horizontal {
    width: 100%; 
    margin-top: 20px; 
}

.foto-item img {
    width: 100%;
    object-fit: cover; 
    border-radius: 12px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
}

.foto-item.foto-vertical img { aspect-ratio: 4 / 5; }
.foto-item.foto-horizontal img { aspect-ratio: 16 / 9; }

.foto-item p {
    color: #ccc; 
    font-size: 14px; 
    margin-top: 12px; 
    margin-bottom: 0;
    font-family: 'Rubik', sans-serif;
    font-weight: 300; 
    line-height: 1.4;
}

/* =========================================
   9. SECCIÓN DE EQUIPO (GEARLIST)
   ========================================= */
.equipo-section {
    padding: 80px 20px;
    display: flex;
    justify-content: center;
}

.contenido-equipo {
    max-width: 1000px;
    width: 100%;
    text-align: center;
}

.contenido-equipo h2 {
    color: #FFECC2;
    font-size: 36px;
    font-family: 'Lexend', sans-serif; 
    font-weight: 400;
    margin-bottom: 10px;
}

.contenido-equipo p {
    color: #ccc;
    font-size: 18px;
    margin-bottom: 50px;
}

.equipo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    text-align: left; 
}

.equipo-categoria {
    background-color: #252525; 
    padding: 30px;
    border-radius: 12px;
    width: 100%;
    max-width: 280px; 
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
    border-left: 3px solid #8A9A7B;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.equipo-categoria:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 20px rgba(138, 154, 123, 0.25);
}

.equipo-categoria h3 {
    color: #FFECC2;
    font-size: 22px;
    font-family: 'Lexend', sans-serif; 
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(138, 154, 123, 0.35); 
    padding-bottom: 10px;
}

.equipo-categoria ul {
    list-style-type: none; 
    padding: 0;
    margin: 0;
}

.equipo-categoria li {
    color: #ccc;
    font-size: 15px;
    margin-bottom: 12px;
    font-family: 'Rubik', sans-serif;
    font-weight: 300;
    position: relative;
    padding-left: 20px;
    line-height: 1.4;
}

.equipo-categoria li::before {
    content: '▹'; 
    position: absolute;
    left: 0;
    color: #8A9A7B; 
    font-size: 18px;
    top: -2px;
}

/* =========================================
   10. MAPA Y CONTACTO
   ========================================= */
.lista-contacto {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

.lista-contacto li {
    margin-bottom: 18px;
    font-size: 18px;
}

.lista-contacto a {
    color: #FFECC2; 
    text-decoration: none;
    font-weight: 400;
    border-bottom: 1px dashed transparent; 
    transition: all 0.3s ease;
    padding-bottom: 2px;
}

.lista-contacto a:hover {
    color: white;
    border-bottom: 1px dashed white; 
}

.bloque-mapa {
    flex: 1;
    display: flex;
    justify-content: center;
    width: 100%;
}

.bloque-mapa iframe {
    width: 100%;
    max-width: 500px;
    height: 350px;
    border: none;
    border-radius: 12px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.6);
}

/* =========================================
   12. MENÚ FLOTANTE DERECHO (LLAMATIVO Y RETRÁCTIL)
   ========================================= */
.side-menu-right {
    position: fixed;
    top: 50%;
    right: -180px; /* Escondido por defecto hacia la derecha (un poco más ancho para visibilidad) */
    transform: translateY(-50%);
    width: 180px;
    background-color: #B83227; /* Color rojo carmesí muy llamativo */
    border: 1px solid #B83227; /* Borde un poco más oscuro */
    border-right: none;
    border-radius: 12px 0 0 12px; /* Redondeado hacia la izquierda */
    box-shadow: -5px 0px 25px rgba(0, 0, 0, 0.7); /* Sombra hacia la izquierda */
    z-index: 2000;
    
    /* Animación suave para aparecer y retraerse */
    transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

/* Clase que añade JS cuando pasas la hero section */
.side-menu-right.side-menu-visible {
    opacity: 1;
    visibility: visible;
}

/* Clase que añade JS cuando abres el menú (Muestra el cuerpo completo) */
.side-menu-right.side-menu-open {
    right: 0;
}

/* Contenedor de links actualizados */
.menu-links-right {
    list-style: none;
    padding: 30px 25px; /* Un poco más de padding para mejor visibilidad */
    margin: 0;
}

.menu-links-right li {
    margin-bottom: 25px;
}

.menu-links-right li:last-child {
    margin-bottom: 0;
}

.menu-links-right a {
    color: white; /* Texto blanco para máximo contraste sobre el rojo */
    text-decoration: none;
    font-size: 16px; /* Ligeramente más grande */
    font-family: 'Lexend', sans-serif;
    font-weight: 500; /* Un poco más de peso */
    transition: color 0.3s ease, transform 0.2s ease;
    display: inline-block;
    cursor: url('img/microfono.png'), pointer; /* Mantenemos tu cursor personalizado */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Sombra de texto para legibilidad */
}

.menu-links-right a:hover {
    color: #FFECC2; /* Color crema al pasar el mouse para interactividad */
    transform: translateX(-5px); /* Pequeño desplazamiento hacia la izquierda */
}

/* Botón de la pestaña retráctil a la derecha (Muy Llamativo) */
.menu-toggle-right {
    position: absolute;
    left: -50px; /* Sobresale a la izquierda del menú */
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 55px;
    background-color: #B83227; /* Mismo rojo llamativo */
    color: white;
    border: 1px solid #B83227;
    border-right: none;
    border-radius: 10px 0 0 10px; /* Redondeado hacia la izquierda */
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: url('img/microfono.png'), pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    box-shadow: -3px 0px 15px rgba(0, 0, 0, 0.4);
}

.menu-toggle-right:hover {
    background-color: #B71C1C; /* Rojo más oscuro al hover */
    transform: translateY(-50%) scale(1.05); /* Pequeño efecto de zoom */
}

/* =========================================
   11. DISEÑO RESPONSIVO (SIEMPRE AL FINAL)
   ========================================= */
@media (max-width: 800px) {
    .contenedor-zigzag, 
    .contenedor-zigzag.reversa {
        flex-direction: column; 
        text-align: center;
        gap: 40px;
    }

    .bloque-texto ul {
        list-style-position: inside;
        padding-left: 0;
    }
    
    .bloque-mapa iframe {
        height: 250px; 
    }

    .botones-container {
        display: grid; 
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; 
        width: 100%;
        max-width: 400px; 
        margin: 0 auto; 
    }

    .btn {
        width: 100%; 
        text-align: center; 
        padding: 10px 5px; 
        box-sizing: border-box; 
    }
}

@media (max-width: 800px) {
    /* ... Tus estilos responsivos actuales ... */

    .side-menu-right {
        display: none !important; /* Oculta el nuevo menú flotante derecho en pantallas pequeñas */
    }
}

/* =========================================
   13. ESTILOS EXTRAS PARA LA PÁGINA DE TARIFAS
   ========================================= */
.equipo-categoria h3 {
    display: flex;
    justify-content: space-between; /* Envía el nombre a la izquierda y el precio a la derecha */
    align-items: center;
    gap: 10px;
}

.tarifa-precio {
    font-size: 13px;
    background-color: #B83227; /* Rojo llamativo */
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 400;
    font-family: 'Rubik', sans-serif;
    text-shadow: none;
    white-space: nowrap; /* Evita que el precio se rompa en dos líneas */
}
/* =========================================
   14. DINAMISMO: ANIMACIONES AL HACER SCROLL
   ========================================= */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Efecto escalonado dentro de las galerías */
.galeria-youtube .video-item.reveal:nth-child(2) { transition-delay: 0.1s; }
.galeria-youtube .video-item.reveal:nth-child(3) { transition-delay: 0.2s; }

.galeria-imagenes-grid .foto-item.reveal:nth-child(2n) { transition-delay: 0.1s; }
.galeria-imagenes-grid .foto-item.reveal:nth-child(3n) { transition-delay: 0.2s; }

.equipo-grid .equipo-categoria.reveal:nth-child(2) { transition-delay: 0.1s; }
.equipo-grid .equipo-categoria.reveal:nth-child(3) { transition-delay: 0.2s; }
.equipo-grid .equipo-categoria.reveal:nth-child(4) { transition-delay: 0.3s; }

/* =========================================
   15. FILTROS DE PROYECTOS
   ========================================= */
.filtro-proyectos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 40px;
}

.filtro-btn {
    background: transparent;
    border: 1px solid #555;
    color: #ccc;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: url('img/microfono.png'), pointer;
    transition: all 0.3s ease;
}

.filtro-btn:hover {
    border-color: #8A9A7B;
    color: #8A9A7B;
}

.filtro-btn.activo {
    background-color: #B83227;
    border-color: #B83227;
    color: white;
}

.grupo-proyectos {
    transition: opacity 0.3s ease;
}

.grupo-proyectos.oculto {
    display: none;
}

/* =========================================
   16. MICRO-INTERACCIONES MÁS VIVAS
   ========================================= */
.video-item:hover,
.foto-item:hover {
    transform: translateY(-8px) scale(1.02);
}

.video-item,
.foto-item {
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.foto-item img {
    transition: filter 0.35s ease;
}

.foto-item:hover img {
    filter: brightness(1.1);
}

.bloque-imagen img {
    transition: transform 0.4s ease;
}

.bloque-imagen:hover img {
    transform: scale(1.03);
}

/* =========================================
   17. ACENTO SECUNDARIO: VERDE SALVIA
   ========================================= */
.bloque-texto h2,
.contenido-proyectos h2,
.contenido-equipo h2 {
    position: relative;
    padding-bottom: 14px;
}

.bloque-texto h2::after,
.contenido-proyectos h2::after,
.contenido-equipo h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: #8A9A7B;
    border-radius: 2px;
}

.bloque-texto h2::after {
    left: 0;
}

.contenido-proyectos h2::after,
.contenido-equipo h2::after {
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 800px) {
    .bloque-texto h2::after {
        left: 50%;
        transform: translateX(-50%);
    }
}