/* Importación de fuentes tipográficas */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@400;600;700&family=Playfair+Display:wght@400;700&display=swap');

:root {
    /* Paleta de colores exacta al flyer */
    --fondo-azul: #051024; /* Azul marino oscuro */
    --texto-blanco: #ffffff;
    --dorado-base: #C59B27; /* Oro profundo */
    --dorado-brillo: #FCEABB; /* Brillo de oro */
    --oro-titulos: #D4AF37; /* TONO ORO REAL PARA EL TÍTULO */
    
    /* Fuentes */
    --font-cursiva: 'Great Vibes', cursive;
    --font-titulos: 'Playfair Display', serif;
    --font-textos: 'Montserrat', sans-serif;
}

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

body {
    background-color: #02060f; 
    font-family: var(--font-textos);
    color: var(--texto-blanco);
    width:100%;
    overflow-x:hidden;   
    
}

/* Contenedor tipo Póster */
.flyer-container {
    width: 100%;
    max-width: 1400px;
    background-color: var(--fondo-azul);
    box-shadow:none ;
    overflow: hidden;
}


/* =========================================
   HERO / ENCABEZADO (CON DEGRADADO PERFECTO)
========================================= */
.hero {
    position: relative;
    width: 100%;
    height: 900px; 
    background-color: var(--fondo-azul); 
    display: flex;
    justify-content: flex-end; 
    
    /* CAMBIOS PARA SUBIR EL TEXTO */
    align-items: flex-start; /* Lleva todo el bloque de texto hacia la parte superior */
    padding-top: 30px;       /* Ajusta este valor: ponle menos para subirlo más, o más para bajarlo */
    padding-right: 60px;
}

/* El overlay con la foto destrabada */
.hero-overlay {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 65%; 
    height: 100%;
    background-image: url('/asset/portafolio.jpg'); 
    
    /* 1. EL TRUCO: Quitamos 'cover' y hacemos "zoom" al 120%. 
       Esto destraba la imagen dándote margen para moverla. */
    background-size: 120%; 
    
    /* 2. LA POSICIÓN: Como ya tiene zoom, ahora sí obedece. 
       Prueba con porcentajes: 
       'center 0%' pega la cabeza arriba del todo.
       'center 100%' muestra lo más abajo posible del saxofón. */
    background-position: center 60%; 
    
    /* Máscara de degradado hacia la derecha */
    -webkit-mask-image: linear-gradient(to right, black 60%, transparent 100%);
    mask-image: linear-gradient(to right, black 60%, transparent 100%);
    z-index: 1;
}
    
    

/* Contenedor del texto a la derecha */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: right; 
    max-width: 450px;
}

/* =========================================
   TEXTOS DEL HERO (MÁS ORO Y SOMBRAS)
========================================= */
.marca {
    font-family: var(--font-cursiva);
    font-size: 5.5rem;
    font-weight: normal;
    line-height: 1.1;
    margin-bottom: -5px;
    
    /* SOLUCIÓN: Agregamos espacio interno y externo para que la "C" y la "g" no se corten */
    padding: 0 20px;
    margin-left: -20px;

    /* Degradado oro */
    background: linear-gradient(90deg, var(--oro-titulos) 0%, var(--dorado-brillo) 50%, var(--oro-titulos) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* Sombra brillante */
    filter: drop-shadow(0px 0px 12px rgba(252, 234, 187, 0.4)) drop-shadow(2px 4px 6px rgba(0,0,0,0.8));
}

.subtitulo {
    font-family: var(--font-titulos);
    font-size: 2.2rem;
    color: var(--oro-titulos);
    letter-spacing: 6px;
    margin-bottom: 10px;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}

.lema-container {
    border-top: 1px solid rgba(212, 175, 55, 0.5);
    border-bottom: 1px solid rgba(212, 175, 55, 0.5);
    display: inline-block;
    padding: 8px 0;
    margin-bottom: 30px;
}

.lema {
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: var(--texto-blanco);
}

.titulo-portafolio {
    font-family: var(--font-titulos);
    font-size: 2.6rem;
    line-height: 1.1;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.descripcion-portafolio {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--texto-blanco);
}

/* =========================================
   BOTÓN DE COMPRA
========================================= */
.btn-comprar {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 35px;
    background: linear-gradient(90deg, var(--oro-titulos) 0%, var(--dorado-brillo) 50%, var(--oro-titulos) 100%);
    background-size: 200% auto;
    color: #02060f;
    font-family: var(--font-textos);
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 3px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

.btn-comprar:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.8);
    background-position: right center;
    color: #000;
}
/* =========================================
   SECCIÓN CENTRAL (SERVICIOS Y SLIDER EQUILIBRADOS)
========================================= */
.main-content {
    padding: 60px 80px;
}

.servicios-layout {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centra verticalmente ambos bloques para que no queden espacios vacíos arriba o abajo */
    gap: 60px;
    margin-bottom: 40px;
}

.col-servicios {
    flex: 1;
    max-width: 450px;
}

.titulo-cursiva {
    font-family: var(--font-cursiva);
    font-size: 5rem;
    color: var(--oro-titulos);
    font-weight: normal;
    line-height: 0.8;
    margin-bottom: 5px;
}

.subtitulo-blanco {
    font-family: var(--font-titulos);
    font-size: 1.3rem;
    letter-spacing: 1px;
    margin-bottom: 25px;
    color: var(--texto-blanco);
}

.lista-check {
    list-style: none;
}

.lista-check li {
    font-size: 1rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.lista-check i {
    color: var(--oro-titulos);
    margin-right: 12px;
    font-size: 1.1rem;
}

.col-galeria {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el slider en su columna */
}

.header-galeria {
    text-align: center;
    margin-bottom: 25px;
}

.etiqueta-dorada {
    font-size: 0.95rem;
    color: var(--oro-titulos);
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.generos-musicales {
    font-family: var(--font-titulos);
    font-size: 1.8rem;
    color: var(--dorado-brillo);
    line-height: 1.4;
}

/* =========================================
   VENTAJAS COMPETITIVAS
========================================= */
.seccion-ventajas {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.frase-cursiva {
    font-family: var(--font-cursiva);
    font-size: 3.5rem;
    color: var(--oro-titulos);
    font-weight: normal;
    margin-bottom: 30px;
}

.ventajas-iconos {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.item-ventaja {
    flex: 1;
    border-right: 1px solid rgba(212, 175, 55, 0.5);
    padding: 0 10px;
}

.item-ventaja.ultimo {
    border-right: none;
}

.item-ventaja i {
    font-size: 2.5rem;
    color: var(--oro-titulos);
    margin-bottom: 15px;
}

.item-ventaja p {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.4;
}

/* =========================================
   FOOTER / CONTACTO
========================================= */
/* =========================================
   FOOTER / CONTACTO (CORREGIDO Y AJUSTADO)
========================================= */
footer {
    width: 100%;
}

.franja-oro {
    background: linear-gradient(90deg, #b48a28 0%, #fceabb 40%, #fceabb 60%, #b48a28 100%);
    padding: 15px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.contacto-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contacto-item > i {
    font-size: 2.5rem;
    color: #02060f;
}

.texto-contacto {
    display: flex;
    flex-direction: column;
}

.texto-contacto span {
    font-size: 0.75rem; /* Letra pequeña superior más estilizada */
    color: #02060f;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.texto-contacto a {
    font-family: var(--font-textos);
    font-size: 1.25rem; /* Letras reducidas para que encajen perfecto en el div dorado */
    font-weight: 700;
    color: #02060f;
    text-decoration: none;
}

/* Estilos para los íconos de redes sociales */
.iconos-redes {
    display: flex;
    gap: 15px;
    margin-top: 2px;
}

.iconos-redes a {
    font-size: 2rem;
    color: #02060f;
    transition: transform 0.2s ease;
}

.iconos-redes a:hover {
    transform: scale(1.20);
}

.divisor-vertical {
    width: 2px;
    height: 40px;
    background-color: #02060f;
    opacity: 0.25;
}

.cierre-final {
    background-color: #02060f;
    text-align: center;
    padding: 20px;
}

.cierre-final p {
    font-family: var(--font-cursiva);
    font-size: 2.5rem;
    color: var(--oro-titulos);
}

/* Ajuste responsive para celulares en el footer */
@media (max-width: 850px) {
    .franja-oro {
        flex-direction: column;
        gap: 15px;
        padding: 20px;
    }
    .divisor-vertical {
        display: none;
    }
    .contacto-item {
        justify-content: center;
        text-align: center;
    }
    .texto-contacto {
        align-items: center;
    }
}


/* =========================================
   RESPONSIVE (Para Celulares y Pantallas Estrechas)
========================================= */
@media (max-width: 850px) {
    .hero {
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 40px 20px;
        height: auto; /* Mantiene la altura fluida original para que no se suba el texto */
        min-height: 700px;
    }
    
    /* =========================================================================
       CONTROL DE OSCURIDAD PARA LA FOTO EN MÓVIL
       - Modifica el valor decimal (ej. 0.4, 0.5, 0.6) en ambos rgba según prefieras.
       - Cuanto más alto sea el número (máx 1.0), más oscura se verá la foto.
       - Cuanto más bajo sea el número (mín 0.0), más clara se verá la foto.
       ========================================================================= */
    .hero-overlay {
        width: 100% !important; 
        height: 100% !important;
        
        /* [ZONA DE CONTROL DE OSCURIDAD] */
        background: linear-gradient(rgba(5, 16, 36, 0.55), rgba(5, 16, 36, 0.68)), url('/asset/portafolio.jpg') !important;
        
        background-size: cover !important;
        background-position: center top !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    
    .hero-content {
        text-align: center;
        padding-top: 40px; /* Restaura el espacio perfecto para que el texto baje y luzca bien */
        max-width: 100%;
        z-index: 2;
    }

    /* TEXTO UNIFORME DE HAPPY HOURS EN MÓVIL */
    .header-galeria {
        padding: 0 15px;
    }

    .generos-musicales {
        font-size: 1.15rem !important; 
        letter-spacing: 1px;         
        line-height: 1.6;            
    }

    .servicios-layout {
        flex-direction: column;
    }
    
    .col-servicios {
        max-width: 100%;
        text-align: center;
    }
    
    .lista-check li {
        justify-content: center;
    }
    
    .ventajas-iconos {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .item-ventaja {
        border-right: none;
        flex: 1 1 45%;
    }
    
    .franja-oro {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
    
    .divisor-vertical {
        display: none;
    }

    .contacto-item {
        justify-content: center;
        text-align: center;
    }
    
    .texto-contacto {
        align-items: center;
    }
}