/* CONFIGURACIÓN BÁSICA Y VARIABLES */
:root {
    --color-dorado: #c59845;
    --color-oscuro: #1a1a1a; 
    --color-texto: #333333;
    --fuente-titulos: 'Playfair Display', serif;
    --fuente-textos: 'Montserrat', sans-serif;
    --fuente-cursiva: 'Great Vibes', cursive;
    --ancho-maximo: 1200px;
}

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

body {
    font-family: var(--fuente-textos);
    color: var(--color-texto);
    background-color: #ffffff;
    overflow-x: hidden;
}

/* CAJA MAESTRA (1200px centrada) */
.contenedor-caja {
    max-width: var(--ancho-maximo);
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* SECCIONES FULL WIDTH */
.full-width {
    width: 100%;
    position: relative;
    padding: 100px 0;
}

/* =========================================
   CABECERA Y MENÚ
========================================= */
.cabecera {
    background-color: #ffffff;
    border-bottom: 5px solid var(--color-dorado); 
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.contenedor-cabecera {
    max-width: var(--ancho-maximo);
    width: 100%;
    margin: 0 auto; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px; 
}

/* Construcción del nuevo logo */
.logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ¡Isotipo más grande! Cambié de 55px a 75px */
.logo img {
    width: 75px; 
    height: auto;
    object-fit: contain;
}

.logo-texto {
    font-family: var(--fuente-cursiva);
    color: var(--color-dorado);
    font-size: 38px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(5px);
}

/* Links del menú */
.navegacion ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

.navegacion a {
    color: var(--color-texto);
    text-decoration: none;
    font-family: var(--fuente-textos);
    font-weight: 500;
    font-size: 15px;
    padding-bottom: 5px;
    transition: color 0.3s ease, border-color 0.3s ease;
    border-bottom: 2px solid transparent; 
}

.navegacion a:hover {
    color: var(--color-dorado);
}

.navegacion a.activo {
    color: var(--color-texto);
    border-bottom: 2px solid var(--color-dorado);
}

.menu-hamburguesa, .cerrar-menu {
    display: none;
    color: var(--color-oscuro);
    font-size: 25px;
    cursor: pointer;
}

/* =========================================
   TIPOGRAFÍAS Y EFECTOS
========================================= */
.titulo-seccion {
    font-family: var(--fuente-titulos);
    font-weight: 600;
    font-size: 76px;
    margin-bottom: 20px;
}

.titulo-blanco-solido { color: #ffffff; }
.titulo-dorado-solido { color: var(--color-dorado); }

.subtitulo-seccion {
    font-family: var(--fuente-titulos);
    font-weight: 600;
    font-size: 30px;
    margin-bottom: 10px;
}

.subtitulo-dorado {
    font-family: var(--fuente-titulos);
    font-weight: 400;
    font-size: 30px;
    color: var(--color-dorado);
    margin-bottom: 50px;
}

.subtitulo-blanco {
    font-family: var(--fuente-titulos);
    font-weight: 400;
    font-size: 30px;
    color: #ffffff;
    margin-bottom: 50px;
}

.text-center { text-align: center; }
.cabecera-seccion { text-align: center; }
.mt-40 { margin-top: 40px; }
.relativo { position: relative; }

/* =========================================
   EFECTO DE ANIMACIÓN FADE IN UP
========================================= */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   SECCIÓN 1: INICIO (HERO NUEVO)
========================================= */
.seccion-inicio {
    height: 100vh;
    padding: 0;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    position: relative;
    margin-top: 0;
}

.overlay-gradiente {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

.overlay-oscuro {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    z-index: 1;
}

.contenido-inicio {
    color: #ffffff;
    padding-top: 100px; 
    max-width: 600px;
}

/* ¡Aquí está el cambio de tipografía! Usamos Book Antiqua */
.titulo-hero {
    font-family: 'Book Antiqua', Palatino, 'Palatino Linotype', 'Palatino LT STD', Georgia, serif;
    font-weight: 400;
    font-size: 80px;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 20px;
}

.texto-dorado {
    color: var(--color-dorado);
}

.linea-separadora {
    width: 70px;
    height: 3px;
    background-color: var(--color-dorado);
    margin-bottom: 25px;
}

.subtitulo-hero {
    font-family: var(--fuente-titulos);
    font-weight: 400;
    font-size: 26px;
    margin-bottom: 25px;
}

.texto-hero {
    font-family: var(--fuente-textos);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 40px;
}

.btn-hero-outline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 35px;
    border: 1px solid var(--color-dorado);
    border-radius: 30px;
    color: #ffffff;
    font-family: var(--fuente-textos);
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-hero-outline i { color: var(--color-dorado); font-size: 22px; transition: color 0.3s ease; }
.btn-hero-outline:hover { background-color: var(--color-dorado); color: #ffffff; }
.btn-hero-outline:hover i { color: #ffffff; }

/* =========================================
   SECCIÓN 2: NOSOTROS
========================================= */
.fondo-back-1::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('img/Back-1.png');
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; 
    opacity: 0.15;
    z-index: 1;
}

.layout-2-columnas {
    display: flex;
    align-items: center;
    gap: 60px;
}

.texto-seccion { flex: 1; }
.texto-seccion p { font-weight: 500; font-size: 16px; margin-bottom: 20px; line-height: 1.6; }

/* El truco de la imagen apaisada: la forzamos a ser vertical (aspect-ratio 3/4) recortando el centro */
.imagen-seccion { flex: 1; }
.imagen-seccion img { 
    width: 100%; 
    aspect-ratio: 3 / 4; /* Fuerza el formato retrato */
    object-fit: cover;   /* Recorta lo que sobra sin deformar */
    border-radius: 5px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
}

/* =========================================
   SECCIÓN 3: ENTREVISTAS
========================================= */
.seccion-entrevistas {
    min-height: 100vh;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    color: white;
}

.seccion-entrevistas p {
    font-family: var(--fuente-textos);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.8;
}

/* =========================================
   SECCIÓN 4: QUIÉNES SOMOS
========================================= */
.fondo-back-2::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('img/Back-2.png');
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.1;
    z-index: 1;
}

.grilla-equipo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 50px;
    margin-top: 50px;
}

.tarjeta-miembro h3 {
    font-family: var(--fuente-titulos);
    font-weight: 600;
    font-size: 24px;
    color: var(--color-dorado);
    margin-bottom: 15px;
}

.tarjeta-miembro ul {
    list-style-position: inside;
    font-family: var(--fuente-textos);
    font-weight: 500;
    font-size: 16px;
    color: var(--color-texto);
    line-height: 1.8;
    margin-bottom: 15px;
}

.redes-miembro a {
    color: var(--color-oscuro); 
    font-size: 32px; 
    margin-right: 20px;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.redes-miembro a:hover { color: var(--color-dorado); transform: scale(1.1); }

/* =========================================
   SECCIÓN 5: ESPECIALIDADES
========================================= */
.seccion-especialidades {
    background-color: var(--color-oscuro);
    color: white;
}

.grilla-2-columnas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.tarjeta-especialidad h3 {
    font-family: var(--fuente-titulos);
    font-weight: 600;
    font-size: 26px;
    color: var(--color-dorado); 
    margin-bottom: 20px;
}

.tarjeta-especialidad ul {
    list-style-position: inside;
    font-family: var(--fuente-textos);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.8;
}

/* =========================================
   SECCIÓN 6: CONTACTO
========================================= */
.seccion-contacto {
    background-image: url('img/contacto.webp');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    position: relative;
}

.seccion-contacto::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    z-index: 1;
}

/* Estilos para el nuevo email destacado */
.contacto-email-destacado {
    margin-bottom: 40px;
}

.contacto-email-destacado a {
    font-family: var(--fuente-textos);
    font-weight: 600;
    font-size: 20px;
    color: var(--color-oscuro);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contacto-email-destacado a:hover {
    color: var(--color-dorado);
}

.contacto-email-destacado i {
    color: var(--color-dorado);
    margin-right: 8px;
    font-size: 22px;
}

.formulario {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.formulario input, .formulario textarea {
    width: 100%;
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid #999;
    background: transparent;
    font-family: var(--fuente-textos);
    font-weight: 500;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s;
}

.formulario input:focus, .formulario textarea:focus { border-bottom: 2px solid var(--color-dorado); }
.formulario textarea { height: 80px; resize: none; }

.formulario button {
    background-color: var(--color-dorado);
    color: white;
    border: none;
    padding: 15px 40px;
    font-family: var(--fuente-textos);
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    align-self: center;
    transition: background-color 0.3s;
}

.formulario button:hover { background-color: var(--color-oscuro); }
.formulario button:disabled { background-color: #cccccc; cursor: not-allowed; }

.mensaje-estado {
    text-align: center;
    font-family: var(--fuente-textos);
    font-weight: 600;
    font-size: 16px;
    margin-top: 15px;
    display: none; 
}

.mensaje-exito { color: #25D366; display: block; }
.mensaje-error { color: #d9534f; display: block; }

/* =========================================
   FOOTER Y BOTONES FLOTANTES
========================================= */
.pie-pagina {
    background-color: #111111;
    color: #aaaaaa;
    text-align: center;
    padding: 20px;
    font-size: 13px;
    font-family: var(--fuente-textos);
}

.pie-pagina a { color: #ffffff; text-decoration: none; font-weight: 600; }

.btn-whatsapp {
    position: fixed; bottom: 30px; left: 30px; background-color: #25D366; color: white;
    width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center;
    align-items: center; font-size: 35px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 9999;
    text-decoration: none; transition: transform 0.3s;
}

.btn-whatsapp:hover { transform: scale(1.1); }

.btn-subir {
    position: fixed; bottom: 30px; right: 30px; background-color: var(--color-oscuro);
    color: white; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--color-dorado); font-size: 20px;
    cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 9999; display: none;
    transition: background-color 0.3s;
}

.btn-subir:hover { background-color: var(--color-dorado); border-color: var(--color-dorado); }

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 992px) {
    .fondo-back-1::before, 
    .fondo-back-2::before { display: none !important; }

    .titulo-hero { font-size: 55px; }
    .subtitulo-hero { font-size: 22px; }
    .titulo-seccion { font-size: 50px; }
    .subtitulo-seccion, .subtitulo-dorado, .subtitulo-blanco { font-size: 24px; }
    
    .layout-2-columnas { flex-direction: column; }
    .grilla-2-columnas { grid-template-columns: 1fr; }
    
    .menu-hamburguesa { display: block; }
    
    .navegacion {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100vw;
        height: 100vh;
        background-color: rgba(26, 26, 26, 0.98); 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.4s ease-in-out;
    }

    .navegacion.activa { right: 0; }
    .cerrar-menu { display: block; position: absolute; top: 30px; right: 40px; color: white;}
    .navegacion ul { flex-direction: column; text-align: center; gap: 40px; }
    .navegacion a { font-size: 24px; font-weight: 500; color: #ffffff; }
}

@media (max-width: 768px) {
    .overlay-gradiente { background: rgba(0, 0, 0, 0.6); }
    .contenido-inicio { text-align: center; padding-top: 120px; }
    .linea-separadora { margin: 0 auto 25px auto; }
}

@media (max-width: 480px) {
    .titulo-hero { font-size: 45px; }
    .cabecera { padding: 10px 15px; }
    .logo img { width: 55px; } /* Ajuste proporcional para móvil */
    .logo-texto { font-size: 26px; } 
    .contacto-email-destacado a { font-size: 16px; } /* Achicamos email para que entre bien */
}