/* ===== VARIABLES DE COLOR (Cámbialas por las que prefieras) ===== */
:root {
    --color-fondo: #FCFCF2;
    --color-titulo: #981914;
    --color-subtitulo: #333333;
    --color-nav: #1a1a1a;
}

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

body {
    background-color: var(--color-fondo);
    font-family: 'Arial Narrow', Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenedor-principal {
    display: flex;
    flex-direction: column; /* CAMBIO: Apila todo de arriba hacia abajo */
    width: 100%;
    max-width: 1400px;
    padding: 40px;
    align-items: center; /* Centra todo horizontalmente */
    justify-content: center; /* Centra todo verticalmente en la pantalla */
    gap: 60px; /* Espacio entre el logo, la puerta y el menú */
}

/* ===== TEXTO Y LOGO (ARRIBA) ===== */
.contenedor-texto {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el logo */
    gap: 10px;
    position: relative;
    z-index: 3;
}

.logo-img {
    max-width: 350px;
    height: auto;
    margin-bottom: 0;
}

.contenedor-texto h1 {
    color: var(--color-titulo);
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.5rem;
    line-height: 1;
    font-weight: 600;
}

.subtitulo {
    color: var(--color-subtitulo);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-style: normal;
    max-width: 500px;
    margin-left: 5px; 
}

/* ===== PUERTA (MEDIO) ===== */
/* ===== PUERTA (MEDIO) ===== */
.contenedor-puerta {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 70px;    /* ESPACIO ARRIBA DE LA PUERTA */
    margin-bottom: 60px; /* ESPACIO ABAJO DE LA PUERTA */
    position: relative;
    z-index: 2;
}
.puerta-img {
    max-width: 100%;
    height: auto;
    max-height: 30vh; /* Altura ajustada para que entre bien en la pantalla */
    object-fit: contain;
    position: relative;
    z-index: 2;
}

/* ===== NAVEGACIÓN (ABAJO) ===== */
.navegacion {
    flex: 0 0 auto;
    position: relative;
    z-index: 3;
}

.navegacion ul {
    list-style: none; 
    display: flex; 
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* Si se achica la pantalla, que bajen solos sin romperse */
    white-space: nowrap;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.navegacion li {
    list-style: none;
}

.navegacion a {
    text-decoration: none;
    color: var(--color-nav);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 500;
    font-style: italic;
    transition: opacity 0.3s ease;
}

.navegacion a b {
    font-weight: 700;
}

.navegacion a:hover {
    opacity: 0.7;
    color: #981914;
}

.separador {
    color: var(--color-nav);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-style: italic;
    cursor: default;
}

/* ===== RESPONSIVE DESIGN (Para móviles y tablets) ===== */
@media (max-width: 768px) {
    .contenedor-principal {
        padding: 20px;
        gap: 40px; /* Reducido para que se vea bien en celular */
    }

    .logo-img {
        max-width: 300px; /* Logo un poco más chico en celular */
    }

    .contenedor-texto h1 {
        font-size: 2.8rem;
    }
    
    .puerta-img {
        max-height: 40vh;
    }
}

/* ===== PÁRRAFO PÁGINA NOSOTROS ===== */
.texto-nosotros {
    color: var(--color-subtitulo);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.4;
    max-width: 600px;
    margin-top: 15px;
    text-align: justify;
}

/* ===== FORMULARIO DE CONTACTO ===== */
.formulario-contacto {
    width: 100%;
    max-width: 350px;
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.campo-form {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.campo-form label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-style: italic;
    color: var(--color-nav);
}

.campo-form input,
.campo-form textarea {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: var(--color-nav);
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-nav);
    padding: 5px 2px;
    outline: none;
    resize: none;
}

.campo-form input:focus,
.campo-form textarea:focus {
    border-bottom: 2px solid var(--color-titulo);
}

.btn-enviar {
    position: absolute;
    right: -120px;
    bottom: 0;
    background-color: transparent;
    border: 1px solid var(--color-nav);
    color: var(--color-nav);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 8px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-enviar:hover {
    background-color: #981914;
    color: var(--color-fondo);
}

.contenedor-comentario-btn {
    position: relative;
    width: 100%;
}

.contenedor-comentario-btn .campo-form {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    flex-grow: 1;
}