@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Texturina:ital,opsz,wght@0,12..72,100..900;1,12..72,100..900&display=swap');

/* ==========================================
   ESTILOS FUSIONADOS - DIANA VALERIA
   ========================================== */

:root {
    --rojo: #d31245;
    /* Ajusta este valor al rojo exacto de tu marca */
    --fuente-texto: 'Nunito Sans', sans-serif;
    --fuente-titulos: 'Texturina', serif;
    --verde-salud: #2e7d32;
}

body {
    background-color: #f1f5f1;
}

h1 {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    color: var(--verde-salud);
}

h2 {
    font-family: var(--fuente-titulos);
    font-weight: 500;
    color: var(--rojo);
}

h3 {
    font-family: var(--fuente-titulos);
    font-weight: 500;
    color: #000000;
}

p {
    font-family: var(--fuente-texto);
    font-weight: 400;
    font-size: 17px;
    color: #000000;
}

/* 1. EL LOGO (Compacto para ahorrar espacio) */
.logo {
    max-width: 130px; /* Reducido de 180px */
    height: auto;
    display: block;
    margin: 10px auto;
}

/* 2. CABECERA Y NAVEGACIÓN (Integrada en la caja blanca) */
.header-nav {
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    padding: 15px 0 10px 0;
    background: #ffffff; /* Fondo blanco para que no se vea el fondo gris al hacer scroll */
    position: sticky;
    top: -15px; /* Compensa el padding superior del main-wrapper para quedar arriba del todo */
    z-index: 1000;
}

/* Utilidad para centrado total */
.text-center {
    text-align: center;
}

.centered-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.btn-rojo {
    background-color: var(--rojo);
    color: white !important;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-family: var(--fuente-texto);
    transition: transform 0.2s;
    border: none;
    cursor: pointer;
}

.btn-rojo:hover {
    transform: scale(1.05);
    background-color: #b01036;
}

/* 3. EL REPRODUCTOR DE SPOTIFY (Para que se vea sí o sí) */
.podcast-container {
    width: 100%;
    max-width: 800px;
    margin: 30px auto;
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0f0;
    /* Fondo gris pálido por si tarda en cargar */
    min-height: 352px;
}

/* 4. EL PIE Y EL FORMULARIO (Fusión de ambos) */
footer {
    margin-top: 50px;
    padding: 40px;
    background-color: #f4f4f4;
    border-top: 4px solid var(--rojo);
    text-align: center;
}

.newsletter-form {
    max-width: 500px;
    margin: 20px auto;
}

/* Tuning anti-tablas de Mailrelay */
.newsletter-form form table,
.newsletter-form form tr,
.newsletter-form form td {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.newsletter-form input {
    padding: 12px;
    width: 90%;
    /* Ajustado para móviles */
    max-width: 350px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
    font-family: var(--fuente-texto);
}

/* Reutilizamos tu btn-rojo para el botón del formulario de Mailrelay */
.newsletter-form button,
.newsletter-form input[type="submit"] {
    display: block;
    margin: 0 auto;
    /* Aquí heredará los estilos de .btn-rojo si le pones la clase */
}

/* 5. EL PODCAST (Para Vida en Salud) */
.podcast-title {
    font-family: var(--fuente-texto);
    text-align: center;
    margin-top: 40px;
    color: #333;
}