/* --- Estilos Base (Mobile-First: para pantallas pequeñas <= 600px) --- */

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

html {
     /* Ayuda a que el 100vh funcione mejor en móviles */
    height: 100%;
}

body {
    font-family: 'EB Garamond', serif;
    /* En mobile, el fondo del body es el mismo que el del container */
    background-color: #fff;
    color: #333;
    line-height: 1.6; /* Ligeramente ajustado para mejor lectura en móvil */
    min-height: 100vh;
    width: 100%; /* Asegura que ocupe todo el ancho */
}

.title-container {
    display: inline-flex; /* Usa inline-flex para que se comporte como un bloque en línea y respete el text-align: center del header */
    align-items: center; /* Alinea verticalmente el logo y el texto en el centro */
    gap: 10px; /* Espacio entre el logo y el texto (ajusta el valor según necesites) */
    /* Mueve el borde inferior que antes estaba en .main-title aquí para que subraye ambos */
    border-bottom: 2px solid #4a3c31;
    padding-bottom: 10px; /* Mantiene el espaciado del borde inferior */
    margin-bottom: 10px; /* Espacio antes del tagline */
}

.header-logo {
    height: 40px; /* Ajusta la altura del logo según tu diseño. 'width: auto' mantendrá la proporción */
    width: auto; /* Mantiene la proporción de la imagen */
    /* vertical-align: middle; */ /* align-items funciona mejor con flex, pero esto puede ser un fallback */
}

header {
    text-align: center; /* Esto centrará el .title-container (que es inline-flex) */
}

.container {
    width: 100%; /* Ocupa todo el ancho disponible */
    max-width: 100%; /* Anula cualquier max-width previo */
    background-color: #fff; /* Fondo blanco */
    padding: 30px 20px; /* Padding ajustado para móvil */
    text-align: center;
    /* Quitamos borde y sombra para móvil */
    border: none;
    box-shadow: none;
    min-height: 100vh; /* Asegura que el contenedor llene la altura en móvil */
    display: flex; /* Ayuda a centrar contenido si es necesario */
    flex-direction: column;
    justify-content: center; /* Centra verticalmente el contenido */
}

/* Typography (Mobile Sizes) */
.main-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.8em; /* Tamaño ajustado para móvil */
    font-weight: 900;
    color: #4a3c31;
    line-height: 1.1;
    border-bottom: none;
    display: inline-block;
    padding-bottom: 0;
    margin-bottom: 0;
}

.tagline {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: 1em; /* Tamaño base para móvil */
    color: #665a4d;
    margin-bottom: 30px; /* Espaciado ajustado */
}

h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6em; /* Tamaño ajustado para móvil */
    font-weight: 700;
    color: #4a3c31;
    margin-bottom: 15px;
}

h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3em; /* Tamaño ajustado para móvil */
    font-weight: 700;
    color: #4a3c31;
    margin-bottom: 10px;
}

p {
    font-size: 1em; /* Tamaño base para móvil */
    margin-bottom: 15px;
    color: #444;
    line-height: 1.65; /* Mejorar legibilidad en párrafos */
}

strong {
    font-weight: 700; /* Garamond Bold */
}

/* Sections */
.announcement {
    margin-bottom: 30px; /* Espaciado ajustado */
    padding-bottom: 25px;
    border-bottom: 1px dashed #D3CBB8;
}

/* Form (Mobile Styles) */
.subscribe {
    margin-top: 25px;
}

#subscribe-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px; /* Espacio entre input y botón */
    margin-top: 15px;
    width: 100%; /* Ocupa el ancho del contenedor */
    max-width: 400px; /* Limita el ancho máximo del formulario */
    margin-left: auto; /* Centra el formulario si es más estrecho que el contenedor */
    margin-right: auto;
}

#subscribe-form input[type="email"] {
    font-family: 'EB Garamond', serif;
    padding: 12px 15px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 1em;
    width: 100%; /* Ocupa todo el ancho del formulario */
    transition: border-color 0.3s ease;
}

#subscribe-form input[type="email"]:focus {
    outline: none;
    border-color: #4a3c31;
}

#subscribe-form button[type="submit"] {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.1em;
    padding: 12px 20px; /* Padding ajustado */
    background-color: #584a3c;
    color: #FAF8F0;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%; /* Ocupa todo el ancho del formulario */
}

#subscribe-form button[type="submit"]:hover {
    background-color: #4a3c31;
    transform: translateY(-2px); /* Efecto hover se mantiene */
}

#subscribe-form button[type="submit"]:disabled {
    background-color: #999;
    cursor: not-allowed;
    transform: none; /* No hay efecto hover cuando está desactivado */
}

/* Feedback Message (Mobile Styles are fine) */
.feedback {
    margin-top: 15px; /* Espaciado ajustado */
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 0.9em; /* Tamaño ajustado */
    display: none;
    width: 100%; /* Ocupa el ancho del formulario */
    max-width: 400px; /* Mismo ancho que el formulario */
    margin-left: auto;
    margin-right: auto;
}

.feedback.success {
    background-color: #e9f5e9;
    color: #3c763d;
    border: 1px solid #c8e6c9;
    display: block;
}

.feedback.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
}

/* Footer (Mobile Styles) */
footer {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid #D3CBB8;
    font-size: 0.85em; /* Tamaño ajustado */
    color: #777;
}


/* --- Estilos para pantallas más grandes (Desktop - A partir de 601px) --- */
@media (min-width: 601px) {

    body {
        /* Reintroducimos el fondo de papel viejo y el padding */
        background-color: #FAF8F0;
        padding: 40px 20px; /* Padding vertical mayor, horizontal menor */
        display: flex; /* Centra el .container */
        justify-content: center;
        align-items: center;
    }

    .container {
        width: auto; /* El ancho lo define max-width */
        max-width: 700px; /* Limitamos el ancho máximo */
        padding: 40px 50px; /* Padding original para desktop */
        /* Reintroducimos borde y sombra */
        border: 1px solid #D3CBB8;
        box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
        min-height: auto; /* Ya no necesita llenar la pantalla */
        justify-content: flex-start; /* Alinea contenido arriba por defecto */
    }

    /* Typography (Desktop Sizes) */
    .main-title {
        font-size: 4em; /* Tamaño original */
        padding-bottom: 10px;
    }

    .tagline {
        font-size: 1.2em; /* Tamaño original */
        margin-bottom: 40px;
    }

    h2 {
        font-size: 2.2em; /* Tamaño original */
        margin-bottom: 20px;
    }

    h3 {
        font-size: 1.8em; /* Tamaño original */
        margin-bottom: 15px;
    }

    p {
        font-size: 1.1em; /* Tamaño original */
        line-height: 1.7; /* Line-height original */
    }

    /* Sections */
    .announcement {
        margin-bottom: 40px;
        padding-bottom: 30px;
    }

    /* Form */
    .subscribe {
        margin-top: 30px;
    }

    #subscribe-form {
        gap: 15px;
        margin-top: 20px;
        /* No necesita width 100% aquí, se centra por defecto */
    }

     /* Input mantiene su max-width, que funciona bien */

    #subscribe-form button[type="submit"] {
        width: auto; /* El botón toma el ancho de su contenido + padding */
        padding: 12px 30px; /* Padding original */
    }

    /* Feedback Message */
    .feedback {
        margin-top: 20px;
        font-size: 0.95em; /* Tamaño original */
    }

    /* Footer */
    footer {
        margin-top: 40px;
        padding-top: 20px;
        font-size: 0.9em; /* Tamaño original */
    }
}

/* --- Opcional: Ajustes para pantallas muy pequeñas (ej. < 360px) --- */
@media (max-width: 359px) {
    .container {
        padding: 25px 15px; /* Menos padding horizontal */
    }
    .main-title {
        font-size: 2.5em; /* Aún más pequeño */
    }
    h2 {
       font-size: 1.5em;
    }
     h3 {
       font-size: 1.2em;
    }
    p {
        font-size: 0.95em;
    }
    #subscribe-form input[type="email"],
    #subscribe-form button[type="submit"] {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .title-container {
        gap: 8px; /* Espacio ligeramente menor en móvil */
        padding-bottom: 8px;
    }
    .header-logo {
        height: 30px; /* Logo ligeramente más pequeño en móvil */
    }
}