/* RESET BÁSICO */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* ESTILOS DEL ENCABEZADO Y NAVEGACIÓN */
header {
    background: #0d1a26; /* Azul Oscuro Elegante */
    color: #fff;
    padding: 1rem 0;
    position: sticky; /* Fija la barra de navegación al hacer scroll */
    top: 0;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    font-size: 1.8rem;
    color: #e9c46a; /* Tono Dorado para el Saxofón */
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    display: block;
    transition: background 0.3s;
}

nav ul li a:hover {
    background: #e9c46a;
    color: #0d1a26;
}

/* ESTILOS DE SECCIONES GENERALES */
.content-section {
    padding: 4rem 0;
}

.bg-light {
    background-color: #f8f8f8;
}

.bg-dark {
    background-color: #0d1a26;
    color: #fff;
}

.bg-dark a {
    color: #e9c46a;
}

/* ESTILOS DE LA SECCIÓN HERO (Principal) */
.hero {
    /* AQUÍ ESTÁ EL CAMBIO: El #555 es el color gris de respaldo */
    background: url('img/placeholder-sax.jpeg') no-repeat center center/cover;
    
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center; /* Alinea el contenido al centro exacto */
    text-align: center;
    color: #fff; /* Texto blanco */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para leer mejor */
}

.hero h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.btn {
    display: inline-block;
    background: #e9c46a;
    color: #0d1a26;
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 1rem;
    font-weight: bold;
    transition: background 0.3s;
}

.btn:hover {
    background: #f4a261;
}

/* ESTILOS DEL PIE DE PÁGINA */
footer {
    background: #264653;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    font-size: 0.9rem;
}

/* ======================================= */
/* 3. MEDIA QUERIES (RESPONSIVIDAD MÓVIL)  */
/* ======================================= */

/* Reglas aplicadas a pantallas de 768px o menos (tablets y móviles) */
@media (max-width: 768px) {
    
    /* CABECERA Y NAVEGACIÓN */
    header .container {
        /* Cambia el layout a columna para que los elementos no se amontonen */
        flex-direction: column;
        text-align: center;
    }

    header h1 {
        margin-bottom: 0.5rem; /* Espacio debajo del título */
    }
    
    nav ul {
        /* Convierte la lista de navegación en una columna completa */
        flex-direction: column;
        width: 100%;
    }

    nav ul li a {
        padding: 0.5rem;
        /* Asegura que los enlaces ocupen todo el ancho */
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* SECCIÓN PRINCIPAL (HERO) */
    .hero {
        height: 50vh; /* Reduce la altura del banner principal en móviles */
    }

    .hero h2 {
        font-size: 2rem; /* Reduce el tamaño del título principal */
    }
    
    /* SECCIONES DE CONTENIDO */
    .content-section {
        padding: 3rem 0; /* Reduce el relleno vertical para ahorrar espacio */
    }
    
    /* BOTONES */
    .btn {
        width: 90%; /* Hace que los botones sean más anchos */
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}/* ========================================= */
/* ESTILOS EXTRA PARA CONTACTO RÁPIDO        */
/* ========================================= */

/* Estilo especial para el botón de WhatsApp (Verde) */
.whatsapp-btn {
    background-color: #25D366 !important; /* Color oficial de WhatsApp */
    color: white !important;
    font-size: 1.2rem;
    padding: 1rem 2rem;
    border: none;
    /* Una pequeña animación para que llame la atención */
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.4); 
}

.whatsapp-btn:hover {
    background-color: #1ec858 !important; /* Un poco más oscuro al pasar el mouse */
    transform: translateY(-2px); /* Se mueve un poquito hacia arriba */
}

/* Estilos para los enlaces de texto (Llamar, Correo, Instagram) */
.contact-link {
    display: block; /* Hace que cada uno ocupe su propia línea */
    color: #fff;    /* Texto blanco */
    text-decoration: none; /* Quita el subrayado feo de los enlaces */
    font-size: 1.1rem;
    margin: 15px 0; /* Espacio entre cada enlace */
    padding: 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Borde invisible para que no salte al hacer hover */
}

/* Qué pasa cuando pasas el mouse por encima de los enlaces */
.contact-link:hover {
    color: #e9c46a; /* Se vuelve dorado */
    background-color: rgba(255, 255, 255, 0.1); /* Fondo gris muy sutil */
    border-color: #e9c46a; /* Borde dorado */
    cursor: pointer;
}

.contact-link strong {
    color: #e9c46a; /* Las palabras "Llamar:", "Correo:" en dorado */
    margin-right: 10px;
}

/* FOTO DE PERFIL OPTIMIZADA (MODELO CONTENT-BOX) */
.profile-photo {
    /* 1. TAMAÑO DE LA IMAGEN (Aumentado un 20%) */
    /* Definimos el tamaño REAL de la foto visible, no del borde */
    width: clamp(400px, 25vw, 550px); 
    aspect-ratio: 1.5 / 2; 
    
    /* 2. LA CORRECCIÓN TÉCNICA (Box Sizing) */
    /* Cambiamos a 'content-box'. Ahora el padding se AGREGA hacia afuera.
       Esto agranda el círculo total sin aplastar la foto. */
    box-sizing: content-box;
    
    /* 3. ESPACIO "AIRE" (Zoom Out) */
    /* Esto aleja el borde dorado de la foto */
    padding: 0px; 
    background-color: #fff; /* Fondo blanco para el espacio extra */

    /* 4. VISUALIZACIÓN DE LA FOTO */
    object-fit: cover; /* Llena el espacio asignado */
    /* Truco extra: Si se te corta la frente, cambia 'center' por 'top' */
    object-position: center top; 
    
    /* 5. DISEÑO EXTERIOR */
    border-radius: 50%; /* Círculo perfecto */
    border: 5px solid #e9c46a; /* Borde dorado */
    box-shadow: 0 15px 35px rgba(0,0,0,0.4); /* Sombra más grande acorde al nuevo tamaño */
    
    /* 6. POSICIÓN */
    display: block;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
	
}