/**

 * =========================================

 * MALOMAR MUSIC - CSS STYLES (Mobile First)

 * =========================================

 * Especialista: PROGRAMADORMM

 * Tareas cubiertas: Estética, Layout Desktop (Servicios/Bio), Corrección Colores, LAYOUT HEADER

 */



/* =========================================

    1. VARIABLES Y RESET BÁSICO

    ========================================= */



:root {

    /* -- COLORES (Inspirados en el Screenshot) -- */

    --color-primary: #2D3949;       /* Azul oscuro sofisticado */

    --color-secondary: #1D262B;     /* Negro/Gris para fondo */

    --color-accent: #A68A36;        /* Dorado/Mostaza (Botones, Títulos) */

    --color-text-light: #F0F0F0;    /* Texto principal claro */

    --color-text-dark: #212121;     /* Texto principal oscuro */

    --color-green-bg: #E8F6F4;      /* Fondo sección Servicios (Verde agua suave) */

    

/* -- TIPOGRAFÍA (Fuentes de Google) -- */

    --font-heading: 'Patua One', cursive;      /* Para h1, h2, h3 */

    --font-body: 'Merriweather', serif;        /* Para p, texto principal */

    --font-ui: 'Montserrat', sans-serif;       /* Para UI, botones, navegación */

    --font-badge: 'Amatic SC', cursive;        /* Para acentos y tags */



    --font-size-base: 16px;



    /* -- LAYOUT & TRANSICIONES -- */

    --padding-section: 40px 15px;

    --transition-speed: 0.3s ease-in-out;

    --spacing-unit-md: 1rem; /* Nueva variable per spacing */

    --spacing-unit-lg: 1.5rem; /* Nueva variable per spacing */

    --layout-max-width: 1200px; /* Nuova variabile per max-width */



    /* Propiedad JS para escalado tipográfico por idioma */

    --font-multiplier: 1;

}



/* Reset básico */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    font-size: var(--font-size-base);

    scroll-behavior: smooth;

    /* Evita el flash de I18n Manager */

    visibility: initial !important; 

}



body {

    font-family: var(--font-body); /* Cuerpo principal usa Merriweather */

    line-height: 1.6;

    color: var(--color-text-dark);

}



/* Clase para evitar scroll cuando el menú está abierto */

body.menu-open {

    overflow: hidden;

}



/* Elemento oculto para accesibilidad */

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    border: 0;

}



/* Tipografía general */

h1, h2, h3, h4 {

    font-family: var(--font-heading); /* Títulos usan Patua One */

    line-height: 1.2;

    margin-bottom: 0.5em;

    color: var(--color-text-dark); /* Por defecto */

}



/* =========================================

    2. ESTILOS DE ELEMENTOS BASE (MOBILE)

    ========================================= */



/* -- ENLACES y BOTONES -- */

a {

    color: var(--color-accent);

    text-decoration: none;

    transition: color var(--transition-speed);

}



a:hover {

    color: var(--color-accent);

    opacity: 0.8;

}



.btn {

    display: inline-block;

    padding: 12px 25px;

    margin-top: 15px;

    border: 2px solid var(--color-accent);

    background-color: transparent;

    color: var(--color-accent);

    font-weight: bold;

    text-transform: uppercase;

    transition: background-color var(--transition-speed), color var(--transition-speed);

    cursor: pointer;

    font-family: var(--font-ui); /* Aseguramos la fuente UI */

}



.btn-primary {

    background-color: var(--color-accent);

    color: var(--color-secondary); 

    border-color: var(--color-accent);

}



.btn:hover, .btn-primary:hover {

    background-color: var(--color-secondary);

    color: var(--color-accent);

    border-color: var(--color-accent);

}



/* -- HEADER Y NAVEGACIÓN (Correzione Layout) -- */

header {

    width: 100%;

    background-color: var(--color-primary);

    color: var(--color-text-light);

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    padding: 1rem 0; /* Ajustamos padding vertical */

}



/* ✅ Contenedor Flexbox para el Header (Alineación Horizontal) */

.header-content {

    display: flex;

    justify-content: space-between; /* Logo a un lado, botones al otro */

    align-items: center;

    max-width: var(--layout-max-width);

    margin: 0 auto;

    padding: 0 var(--spacing-unit-lg); /* Padding lateral */

}



/* Títulos y texto que necesitan UI/sans-serif (Navegación, Botones, etc.) */

header, .btn, .lang-btn, .nav-menu a {

    font-family: var(--font-ui);

}



/* Logo */

.logo-link h1 {

    font-size: 1.5rem;

    color: var(--color-text-light);

    margin: 0;

}



/* Selector de Idioma (Tarea I.4) */

.lang-selector {

    display: flex;

    gap: 5px;

    margin-left: auto; /* Empuja a la derecha si no hay desktop-nav */

}



.lang-btn {

    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.4);

    color: var(--color-text-light);

    padding: 5px 8px;

    font-size: 0.8rem;

    cursor: pointer;

    transition: var(--transition-speed);

    margin-left: 0.5rem; /* Separación de otros elementos */

}



.lang-btn.active, .lang-btn:hover {

    background-color: var(--color-accent);

    color: var(--color-secondary);

    border-color: var(--color-accent);

}



/* Ocultar menú de escritorio en móvil por defecto */

.desktop-nav {

    display: none; 

}



/* -- MENÚ HAMBURGUESA (Móvil/Tablet) -- */

#menu-toggle {

    display: block; /* Mostramos en mobile */

    background: none;

    border: none;

    color: var(--color-primary); /* Lo forzamos a color primario para que resalte sobre dark-bg */

    color: var(--color-text-light);

    font-size: 1.8rem; /* Tamaño más grande para visibilidad */

    cursor: pointer;

    margin-left: var(--spacing-unit-md); /* Separación del lang-selector */

    padding: 0;

    line-height: 1;

    z-index: 1010;

}



#menu-toggle::before {

    content: '☰'; /* Ícono de menú */

}



#menu-toggle[aria-expanded="true"]::before {

    content: '✕'; /* Ícono de cierre */

}



/* -- NAVEGACIÓN MÓVIL -- */

.mobile-nav {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: var(--color-secondary);

    z-index: 999;

    /* Usamos transform para transicionar, no display: flex */

    transition: transform 0.4s ease-in-out;

    transform: translateX(100%); /* Oculto por defecto */

}



.mobile-nav[aria-hidden="false"] {

    transform: translateX(0); /* Mostrar cuando esté activo */

}



.mobile-nav-list {

    list-style: none;

    text-align: center;

    padding: 5rem 2rem 0; /* Padding superior para dejar espacio al header */

}



.mobile-nav-list li {

    margin: 30px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.mobile-nav-list a {

    color: var(--color-text-light);

    font-size: 1.8rem;

    font-weight: 600;

    padding: 10px 20px;

    display: block;

    font-family: var(--font-ui);

}



.mobile-nav-list a:hover {

    color: var(--color-accent);

}





/* -- MAIN Y SECCIONES -- */

main section {

    padding: var(--padding-section);

    text-align: center;

}



/* CLASSE UNIFORME: Hero Section (Home, Bio, Services, Contact) */

.page-hero-bg {

     /* Implementazione del fondo: mare.jpg con un overlay oscuro */

    background: linear-gradient(

        rgba(45, 57, 73, 0.7), /* Overlay oscuro, usando il color-primary */

        rgba(45, 57, 73, 0.7)

    ), 

    url('../assets/mare.jpg') no-repeat center center/cover;

    

    color: var(--color-text-light);

    padding: 100px 15px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



/* Stili specifici per l'Hero di INDEX */

#hero-intro { 

    min-height: 80vh; 

}



#hero-intro h2 {

    /* STILE: "Turín – La Habana – Buenos Aires" (Amatic SC, Giallo) */

    font-family: var(--font-badge); 

    color: var(--color-accent); 

    font-weight: 700; 

    font-size: 3rem; 

    text-transform: none; 

    letter-spacing: 2px;

}



#hero-intro h3 {

    /* STILE: "Tres mundos, una sola alma" (Patua One, Bianco) */

    font-family: var(--font-heading);

    color: var(--color-text-light);

    font-size: 2.8rem; 

    margin-bottom: 20px;

    font-weight: 700;

}



/* STILI SPECIFICI PAGINE SECONDARIE (BIO, SERVICES, CONTACT) */

#page-hero {

    min-height: 80vh; /* Uniforme con index.html */

}



#page-hero h2 {

    /* Stile per il titolo principale (Patua One, Bianco) */

    font-family: var(--font-heading);

    color: var(--color-text-light);

    font-size: 2.8rem;

    margin-bottom: 20px;

    font-weight: 700;

}



/* Allineamento del Sottotitolo in p (Amatic SC, Giallo) */

#page-hero p[data-i18n] {

    font-family: var(--font-badge); 

    color: var(--color-accent);

    font-weight: 700;

    font-size: 3rem;

    text-transform: none;

    letter-spacing: 2px;

    margin-bottom: 20px; 

}

/* ---------------------------------------------------- */





#hero-intro p {

    /* Mantiene Merriweather (var(--font-body)) por herencia, perfecto para lectura */

    font-size: 1.1rem;

    margin: 15px auto;

    max-width: 600px;

}



/* Estilo para secciones de fondo oscuro */

.dark-section {

    background-color: var(--color-secondary);

    color: var(--color-text-light);

    padding: 60px 15px; /* Más padding */

}



.dark-section h3, .dark-section h4 {

    color: var(--color-text-light);

}



.highlight-text {

    /* Estilo para títulos destacados */

    font-size: 2.2rem;

    line-height: 1.1;

    margin-bottom: 0.2em;

    font-weight: 700;

}



/* Contenedores de las dos secciones destacadas (columnas en desktop) */

.featured-content-container {

    display: flex;

    flex-direction: column;

    gap: 40px;

    max-width: 1000px;

    margin: 0 auto;

    text-align: center;

}



.featured-box {

    padding: 30px 10px;

}



/* Estilo específico para las imágenes de la historia */

.story-images {

    position: relative;

    min-height: 250px;

    /* Corrección: Añadir más espacio entre el título y las fotos en mobile */

    margin-top: 20px; 

}

.story-images img {

    position: absolute;

    width: 60%;

    max-width: 250px;

    height: auto;

    object-fit: cover;

    /* Corrección: Borde fino y redondeado */

    border: 3px solid var(--color-accent); 

    border-radius: 10px; 

}

.story-image-1 {

    top: 0;

    left: 10%;

    z-index: 2;

}

.story-image-2 {

    bottom: 0;

    right: 10%;

    z-index: 1;

}



/* Estilo específico para la caja del video (Amamos experimentar) */

.video-box {

    border: 3px solid var(--color-accent); /* Borde de acento como en el screenshot */

    padding: 10px;

    background-color: #283038; /* Ligeramente más claro que el fondo secundario */

}



/* Estilo para la sección de Servicios (Fondo verde suave del screenshot) */

#cta {

    background-color: var(--color-green-bg);

}



/* -- FOOTER -- */

footer {

    background-color: var(--color-primary);

    color: var(--color-text-light);

    padding: 20px 15px;

    text-align: center;

    font-size: 0.9rem;

    

    /* Flexbox para el footer (gestito da footer.html) */

    display: block; /* Default block, grid in desktop */

}



footer a {

    color: var(--color-text-light);

    margin: 0 5px;

}



/* =========================================

    3. MEDIA QUERIES (TABLET & DESKTOP)

    ========================================= */



@media (min-width: 768px) {

    

    /* ---------------------------------------------------- */

    /* ✅ AJUSTE HEADER DESKTOP */

    /* ---------------------------------------------------- */

    

    /* Ocultar el menú hamburguesa y la navegación mobile en desktop */

    #menu-toggle, .mobile-nav {

        display: none !important;

    }

    

    /* Mostrar navegación de escritorio */

    .desktop-nav {

        display: block; 

        margin-left: auto; /* Empuja la nav a la derecha */

    }



    .desktop-nav ul {

        display: flex; /* Menú en línea */

        list-style: none;

        gap: 25px;

        padding: 0;

        margin: 0;

    }

    

    .desktop-nav a {

        color: var(--color-text-light);

        font-weight: 600;

        transition: color var(--transition-speed);

        padding-bottom: 5px; /* Spazio per l'underline hover */

    }

    

    .desktop-nav a:hover, .desktop-nav a.active {

        color: var(--color-accent);

        border-bottom: 2px solid var(--color-accent);

    }

    

    /* Reajuste del header-content para alinear elementos */

    .header-content {

        /* Se mantiene: Logo | Desktop Nav | Lang Selector */

        padding: 0 40px; /* Más padding lateral */

    }

    

    .lang-selector {

        /* Lo spostiamo per stare dopo la navigazione desktop nel flusso flex */

        margin-left: var(--spacing-unit-lg);

    }

    /* ---------------------------------------------------- */

    

    

    /* Adaptación del Hero (INDEX & PAGINE SECONDARIE) */

    #hero-intro, #page-hero {

        padding: 150px 40px;

        min-height: 80vh;

    }



    /* Columnas para las secciones destacadas en desktop */

    .featured-content-container {

        flex-direction: row;

        align-items: center;

        text-align: left;

    }

    .featured-box {

        flex: 1;

    }

    

    /* Invertir el orden de la segunda caja para un look más dinámico */

    #experience-section .featured-content-container {

        flex-direction: row-reverse;

    }

    

    /* Ajuste de imágenes (Desktop) */

    .story-images {

        min-height: 400px;

        /* Corrección: Forzar un margen superior para separar del título */

        margin-top: 50px; 

    }

    .story-images img {

        width: 70%;

        max-width: 300px;

    }

    .story-image-1 {

        top: 20px;

        left: 0;

        /* Corrección: Asegurar que Foto A no cubra demasiado Foto B */

        transform: rotate(-3deg); 

    }

    .story-image-2 {

        bottom: 20px;

        right: 0;

        transform: rotate(3deg);

    }



    /* Adaptación de la Bio (General) */

    #bio-detail {

        padding: 60px 40px;

        max-width: 1200px;

        margin: 0 auto;

        text-align: left; /* Títulos alineados a la izquierda en desktop */

    }

    

    /* Corrección: Más espacio para el texto de la Card en Bio */

    #members-grid {

        max-width: 1000px;

    }

    

    /* Footer Grid */

    footer {

        padding: 40px 40px;

        text-align: left;

    }

    

    .footer-grid {

        display: grid;

        grid-template-columns: 2fr 1fr 1fr; /* Logo, Nav, Contact */

        max-width: var(--layout-max-width);

        margin: 0 auto;

        gap: 40px;

    }

    .footer-nav ul, .footer-contact {

        text-align: left;

        padding: 0;

    }

}





/* =========================================

    4. LAYOUT ESPECÍFICO BIO (Tarea III.2)

    ========================================= */



/* Corrección: Estilo para la sección intro de bio.html */

#bio-detail .detail-content {

    max-width: 800px;

    margin: 20px auto;

    padding: 30px;

    border: 1px solid var(--color-primary);

    border-radius: 10px;

    text-align: center;

}

#bio-detail h3 {

    text-align: center;

}





/* Estilo Mobile-First (Stack vertical) */

.members-container {

    padding: 40px 0;

    max-width: 800px;

    margin: 0 auto;

}



.members-title {

    text-align: center;

    color: var(--color-accent);

    margin-bottom: 2.5em; /* Espaciado antes del grid */

}



/* Card del Miembro */

.member-card {

    display: flex; /* Usa Flexbox para alinear imagen y texto en Mobile */

    flex-direction: column;

    align-items: center;

    text-align: center;

    margin-bottom: 50px;

    padding: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil en sección oscura */

}



.member-photo {

    width: 100%;

    max-width: 250px; /* Limite el tamaño de la imagen en mobile */

    margin-bottom: 20px;

    position: relative;

    padding: 10px;

    border: 1px solid var(--color-secondary);

}



.member-photo img {

    width: 100%;

    height: auto;

    object-fit: cover;

    display: block;

    border-radius: 50%; /* Imágenes de perfil circulares para un look moderno */

    border: 3px solid var(--color-accent);

    transition: transform var(--transition-speed);

}

.member-photo img:hover {

    transform: scale(1.03);

}



.member-info h4 {

    /* Corrección: Colore d'accento per il nome in sezione scura */

    color: var(--color-accent);

    font-size: 1.8rem;

    margin-bottom: 0.2em;

}



.member-photo .role {

    font-family: var(--font-ui);

    font-weight: 600;

    /* Corrección: Colore chiaro per il ruolo in sezione scura */

    color: var(--color-text-light); 

    display: block;

    margin-top: 10px;

}





/* -- MEDIA QUERY PARA LAYOUT GRID (Tablet/Desktop) -- */

@media (min-width: 768px) {



    /* Tarea III.2: CSS GRID para Miembros */

    #members-grid {

        display: grid;

        grid-template-columns: 1fr 1fr; /* 2 columnas */

        gap: 60px;

        align-items: start;

        text-align: left;

    }



    .member-card {

        flex-direction: row; /* Cambiamos a layout fila */

        align-items: flex-start;

        margin-bottom: 0;

        border-bottom: none;

    }



    .member-photo {

        max-width: 150px; /* Imagen más pequeña en la versión de escritorio de la card */

        flex-shrink: 0; /* Evita que la imagen se comprima */

        margin-right: 25px;

        margin-bottom: 0;

    }

    

    .member-info {

        text-align: left;

    }

    

    .member-info h4 {

        margin-top: 0; /* Elimina el margen superior de h4 */

    }

}



/* =========================================

    5. LAYOUT ESPECÍFICO SERVICES

    ========================================= */



/* Corrección: Estilo para la sección intro de services.html */

#intro-servicios {

    padding-bottom: 10px; /* Ridurre lo spazio per la intro */

}

#intro-servicios .intro-content {

    max-width: 850px;

    margin: 20px auto;

    padding: 30px;

    /* Bordo sottile e arrotondato per evidenziare il testo */

    border: 1px solid rgba(0, 0, 0, 0.1); 

    border-radius: 8px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

}





/* Nuova Sezione: Processo Creativo (Sfondo scuro per contrasto) */

#proceso-creativo {

    background-color: var(--color-secondary);

    color: var(--color-text-light);

    padding: 60px 15px;

}



#proceso-creativo h3 {

    color: var(--color-accent);

    margin-bottom: 30px;

    font-size: 2.5rem;

}



#proceso-creativo .proceso-step {

    padding: 20px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    margin: 20px auto;

    max-width: 600px;

    border-radius: 8px;

    text-align: left;

}





/* Stile per la lista de servicios adicionales (dark-section) */

.additional-services-list {

    list-style: none;

    text-align: left;

    max-width: 800px;

    margin: 30px auto;

    padding: 0;

}



.additional-services-list li {

    background-color: var(--color-primary); /* Fondo scuro per risaltare */

    padding: 15px;

    margin-bottom: 10px;

    border-radius: 5px;

}



.additional-services-list strong {

    color: var(--color-accent); /* Título en color acento */

    font-size: 1.1rem;

    display: block;

    margin-bottom: 5px;

}



/* Layout Grid para Servicios Personalizados (Mobile-First: Columna Única) */

#services-grid {

    display: flex; /* En móvil, mantén el flujo vertical */

    flex-direction: column;

    gap: 30px;

    margin-top: 40px;

    max-width: 1100px;

    margin-left: auto;

    margin-right: auto;

}



.service-card {

    background-color: var(--color-text-light); /* Fondo blanco */

    border: 1px solid rgba(0, 0, 0, 0.1);

    padding: 30px 20px;

    border-radius: 8px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

    transition: box-shadow 0.3s;

}



.service-card:hover {

    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);

}



.service-card h4 {

    color: var(--color-primary);

    font-family: var(--font-ui); /* Montserrat para los títulos de servicio */

    font-size: 1.4rem;

    font-weight: 700;

    min-height: 4.5em; /* Asegura altura mínima para títulos largos */

}



/* Stile per la CTA finale di services.html (CTA forte) */

#cta-services-final {

    background-color: var(--color-green-bg); /* Fondo chiaro (come la CTA di index) */

    color: var(--color-text-dark);

    padding: 60px 15px;

}



#cta-services-final a {

    border-color: var(--color-secondary); /* Bordo scuro sul fondo chiaro */

}





/* MEDIA QUERY: CSS GRID para Tablets y Escritorio (Corregido el layout 2-2-1) */

@media (min-width: 768px) {

    #services-grid {

        display: grid;

        /* Layout Grid: 3 colonne (temporaneo) */

        grid-template-columns: repeat(3, 1fr); 

        gap: 30px;

    }

    

    /* Il quinto elemento (Asesoría integral) */

    #services-grid article:nth-child(5) {

        /* Correzione: Usiamo 2 colonne e lo centreremo nella riga successiva */

        grid-column: 2 / span 2; 

        max-width: 100%;

        margin: 0;

    }



    /* Riorganizzazione forzata per layout 2-2-1 pulito: */

    @media (min-width: 992px) {

        #services-grid {

            /* 2 colonne per le prime 4 (2 righe) */

            grid-template-columns: repeat(2, 1fr);

        }

        

        /* Reimpostiamo l'ultima card */

        #services-grid article:nth-child(5) {

             /* Solo una colonna al centro della terza riga */

            grid-column: 1 / span 2; 

            max-width: 50%; /* Limita la larghezza */

            margin: 0 auto; /* Centra orizzontalmente */

        }

    }

    

    .service-card {

        text-align: left;

    }



    .service-card h4 {

        min-height: 0; 

    }

}





/* =========================================

    6. LAYOUT ESPECÍFICO CONTACT (Tarea III.3)

    ========================================= */



/* Lista de Compromisos (mobile-first) */

.commitments-list {

    list-style: none;

    text-align: left;

    max-width: 800px;

    margin: 30px auto;

    padding: 0;

}



.commitments-list li {

    background-color: var(--color-green-bg); /* Fondo verde suave */

    color: var(--color-text-dark);

    padding: 15px;

    margin-bottom: 10px;

    border-left: 5px solid var(--color-accent); /* Borde de acento */

    font-family: var(--font-body);

}



/* Estilo del Formulario */

.contact-form {

    max-width: 600px;

    margin: 40px auto 0;

    padding: 20px;

    text-align: left;

    background-color: var(--color-secondary); /* Fondo oscuro (heredado de dark-section) */

}



.form-group {

    margin-bottom: 20px;

}



.contact-form label {

    display: block;

    margin-bottom: 8px;

    font-family: var(--font-ui);

    font-weight: 600;

    color: var(--color-text-light); /* Testo chiaro sul fondo scuro */

}



.contact-form input[type="text"],

.contact-form input[type="email"],

.contact-form textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid var(--color-primary);

    background-color: #3f4a59; /* Sfondo leggermente più scuro per i campi */

    color: var(--color-text-light);

    font-size: 1rem;

    font-family: var(--font-body);

    resize: vertical;

    transition: border-color var(--transition-speed);

}



.contact-form input:focus,

.contact-form textarea:focus {

    border-color: var(--color-accent);

    outline: none;

}



.contact-form button[type="submit"] {

    width: 100%;

    margin-top: 30px;

    padding: 15px;

    font-size: 1.2rem;

}



/* Stilo per Ubicazione */

#ubicacion .location-text {

    font-family: var(--font-badge);

    font-size: 2.5rem;

    color: var(--color-accent);

    margin-top: 15px;

}