/* --- RESET Y VARIABLES --- */
@import url(../fonts/Cinzel-VariableFont_wght.ttf);
@import url(../fonts/Roboto-VariableFont_wdth,wght.ttf);
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-light: #f4f3f0; /* Fondo beige claro general */
    --text-dark: #333333;
    --text-grey: #666666;
    --accent-dark: #8c857d; /* Color gris/marrón (taupe) de los botones y Navbar inicial */
    --font-heading: 'Cinzel', serif;
    --font-body: 'Roboto', sans-serif;
}

body { font-family: var(--font-body); color: var(--text-dark); background-color: var(--bg-light); line-height: 1.6; }
.container { width: 1200px; max-width: 90%; margin: auto; }

h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; }

/* --- BOTONES --- */
.btn { padding: 12px 30px; font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; border: none; cursor: pointer; text-transform: uppercase; transition: all 0.3s ease; }
.btn-white { background-color: #ffffff; color: var(--text-dark); }
.btn-white:hover { background-color: #e0e0e0; }
.btn-dark { background-color: var(--accent-dark); color: #ffffff; }
.btn-dark:hover { background-color: #6a645e; }

/* =====================================
   AJUSTE DEL NAVBAR PARA ESTA PÁGINA
   ===================================== */
/* Aquí está la clave:
   No lo hacemos transparente, sino que le damos el color sólido (taupe) 
   desde el inicio para que se lea el texto blanco.
*/
.page-contacto header {
    background-color: var(--accent-dark); 
}

/* Al scrollear, mantenemos el comportamiento de fondo blanco 
   que definimos en el primer prompt.
*/
.page-contacto header.scrolled {
    background-color: #ffffff;
}

/* Para que no se rompa el diseño, damos un padding al main 
   para que el navbar no tape el formulario de contacto.
*/
main {
    padding-top: 120px; /* La altura de tu navbar */
}

/* =====================================
   1. CAJA DE CONTACTO Y FORMULARIO
   ===================================== */
.contacto-section {
    padding: 80px 0 100px;
}

.contacto-box {
    background-color: #e8e6e1; /* Gris clarito del diseño */
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Mitad de la imagen */
.contacto-img {
    flex: 1;
    background-image: url(../images/contacto/form-contacto.png); /* RUTA DE TU FOTO */
    background-color: #ccc;
    background-size: cover;
    background-position: center;
    min-height: 500px;
    margin: 40px 0 40px 40px; /* Margen para simular el borde del diseño */
}

/* Mitad del formulario */
.contacto-form-container {
    flex: 1.2;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contacto-form-container h2 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    line-height: 1.3;
    color: var(--text-grey);
}
.contacto-form-container h2 strong {
    color: var(--text-dark);
}

.form-contacto {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-contacto input,
.form-contacto textarea {
    width: 100%;
    padding: 15px;
    border: none;
    background-color: #ffffff;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-dark);
    outline: none;
}

/* Cambia sutilmente el color al hacer clic (foco) */
.form-contacto input:focus,
.form-contacto textarea:focus {
    box-shadow: inset 0 0 0 2px var(--accent-dark);
}

.form-contacto textarea {
    height: 150px;
    resize: none; /* Evita que el usuario deforme la caja */
}

.btn-submit-wrapper {
    display: flex;
    justify-content: flex-end; /* Alinea el botón a la derecha como en la foto */
    margin-top: 10px;
}

/* =====================================
   2. BOTTOM HERO
   ===================================== */
.bottom-hero { height: 400px; background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url('../images/index/image-hero.png'); background-color: #333; background-size: cover; background-position: center bottom; display: flex; align-items: center; }
.bottom-hero-container { display: flex; justify-content: flex-end; }
.bottom-hero .hero-content { text-align: right; color: #fff; max-width: 500px; }
.bottom-hero .hero-content h2 { font-size: 2.5rem; margin-bottom: 0.5rem; }

/* =====================================
   AJUSTE DEL NAVBAR PARA ESTA PÁGINA
   ===================================== */
/* Forzamos el fondo marrón siempre, incluso al scrollear */
.page-contacto header,
.page-contacto header.scrolled {
    background-color: var(--accent-dark) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Forzamos que el logo y los enlaces siempre sean blancos */

/* Efecto hover suave para los enlaces */
.page-contacto header.scrolled .nav-links a:hover { 
    color: #e0e0e0 !important; 
}

/* Mantenemos el botón de contacto blanco con texto marrón para que resalte */
.page-contacto header.scrolled .btn-contacto {
    background-color: #ffffff !important;
    color: var(--accent-dark) !important;
}

/* Mantenemos el botón menú hamburguesa blanco en celulares */
.page-contacto header.scrolled .menu-toggle span { 
    background-color: #ffffff !important; 
}

/* Separamos el main para que el navbar fijo no tape el formulario de contacto */
main {
    padding-top: 120px; 
}