@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&display=swap');

/* ==========================================
   🎨 CONFIGURACIÓN GLOBAL (TODAS LAS PÁGINAS)
   ========================================== */
html, body {
    background-color: #D8E9E2; /* Verde clarito de fondo para toda la web */
    font-family: 'Alegreya', serif;
    padding: 0;
    width: 100%;
   
    margin-top: 30px;
    margin-bottom: 10%; /*Ajustes para los enlaces y columnas */
    
}


/* Color del texto general */
p, li, h1, h2, h3, h4 {
    color: #364043;
}

/* Enlaces (Verde más oscuro) */
a:link, a:visited { 
    color: #1C4B59; /* Verde oscuro unificado */
    text-decoration: none;
}

a:hover {
    color: #517064; /* Un verde todavía un poco más oscuro al pasar el ratón */
    text-decoration: underline;
}

/* ==========================================
   ⚡ NAVEGACIÓN Y MENÚS
   ========================================== */
nav ul {
    list-style: none; 
    text-align: center;
    font-size: large;
}

nav li {
    display: inline; 
}

/* Menú especial para la portada/index */
nav.menu-portada ul {
    display: flex;          
    padding: 0;             
    margin: 0;              
    list-style: none;       
    font-size: 180%;        
    width: 100%;            
    min-height: 70vh;       /* Ocupa el 70% del alto de la pantalla */
    align-items: center;    /* Centra verticalmente */
}

nav.menu-portada li {
    flex: 1;                
    text-align: center;     
}

/* ==========================================
   🧩 COMPONENTES Y BLOQUES
   ========================================== */
.contenedor-widget-spotify { 
    max-width: 500px; 
    margin: 0 auto;   
}

#foto-portada {
    width: 100%;
    height: 100vh;      
    object-fit: cover;  
    display: block;     
}

.contenido {
    max-width: 900px;           
    width: 90%;                 
    margin: 0 auto;             
    padding: 50px 20px;
    text-align: center;
    font-family: Arial, sans-serif;
}


/* Hacemos que los enlaces se comporten como bloques para que el contador caiga abajo */
.enlace-boda-portada {
    display: block;
    margin-bottom: 25px; /* Espacio entre el texto y el contador */
    
}

/* Ajuste a tu menú elástico para que alinee todo arriba */
nav.menu-portada ul {
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top: 10vh;       /* Un poco de aire arriba */
}

/** nav.menu-portada ul {
/**    align-items: flex-start; /* Alinea los dos bloques perfectamente por el borde superior */
/**    padding-top: 10vh;       /* Un poco de aire arriba */
/**    flex-wrap: wrap;         /* Permite que salte de línea en pantallas pequeñas */
/**}

nav.menu-portada li {
    padding: 20px;
    box-sizing: border-box;
    min-width: 320px;        /* Evita que las columnas se aplasten demasiado */


/* ==========================================
   ⏳ WIDGET CUENTA ATRÁS (REDISEÑADO)
   ========================================== */
.cuenta-atras-contenedor {
    font-size: 1rem; /* ⚠️ CLAVE: Resetea el 280% de tamaño heredado del menú para que el reloj se vea normal */
    max-width: 380px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff; 
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.contador-reloj {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.tiempo-bloque {
    background-color: #F4FBF4; 
    border: 1px solid #C8E6C9; 
    padding: 10px;
    border-radius: 8px;
    flex: 1; /* Hace que los 4 bloques midan exactamente lo mismo de ancho */
    display: flex;
    flex-direction: column;
    text-align: center;
}

.tiempo-bloque strong {
    font-size: 1.8rem;
    color: #1B5E20; 
    line-height: 1.1;
}

.tiempo-bloque span {
    font-size: 0.75rem;
    color: #758A77; 
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tiempo-terminado {
    font-size: 1.2rem;
    font-weight: bold;
    color: #2E7D32;
}

/* 📱 OPTIMIZACIÓN PARA MÓVILES */
@media (max-width: 768px) {
    nav.menu-portada ul {
        flex-direction: column; /* En móviles, una boda se pone debajo de la otra */
        align-items: center;
        min-height: auto;
    }
    nav.menu-portada li {
        width: 100%;
        margin-bottom: 40px; /* Separación entre el primer bloque y el segundo */
    }
    
}

/* Contenedor general de los datos */
#datos-ceremonia {
    padding: 10px;
    /* Si quieres cambiar la tipografía de todo el bloque, puedes añadirla aquí, por ejemplo:
    font-family: 'Georgia', serif; */
}

/* Estilo para todo el texto (el texto normal) */
#datos-ceremonia p {
    font-size: 24px;      /* Ajusta el tamaño a tu gusto */
    margin: 10px;  /* Espacio de separación entre cada línea */
    text-align: left;
}

/* Estilo exclusivo para la parte destacada (la negrita) */
/*#datos-ceremonia p strong {
/*    font-weight: bold;    /* Aplica la negrita */
/*}


/* 2. Aplicamos el centrado y los márgenes grandes a los lados */
.contenido-boda-madrid {
    max-width: 600px;          /* Limita el ancho del texto para que no se esparza en pantallas grandes */
    width: 85%;                /* En pantallas medianas o móviles, deja un 15% de margen libre */
    margin: 40px auto;         /* El 'auto' a los lados es lo que centra todo el bloque mágicamente */
    padding: 0 20px;           /* Un pequeño espacio extra de seguridad interna */
    box-sizing: border-box;
}

/* 3. Hacemos que los textos se alineen de forma elegante (puedes usar 'justify' o 'left') */
.contenido-boda-madrid p {
    text-align: justify;
    line-height: 1.6;          /* Le da espacio entre líneas para que sea más legible, como en WordPress */
    font-size: 1.15rem;        /* Tamaño de letra cómodo para lectura */
}

/* 4. ¡MUY IMPORTANTE! Forzamos a que las imágenes se ajusten al ancho de este bloque centrado */
.contenido-boda-madrid img {
    width: 100%;               /* Ocupará exactamente el mismo ancho que el texto (los 750px máximos) */
    height: auto;              /* Mantiene la proporción de la foto para que no se deforme */
    display: block;
    margin: 20px auto;         /* Añade separación arriba y abajo de las imágenes */
    border-radius: 20px;        /* Opcional: le da un toque suave a las esquinas de las fotos */
}

/* Alinea el menú exactamente donde empieza el texto centrado */
nav.menu-boda-madrid {
    max-width: 750px;
    width: 85%;
    margin: 20px auto; /* Centra el bloque del menú, pero mantiene su contenido a la izquierda */
    padding: 0 20px;
}

/* Fuerza el centrado total del título principal */
#titulo-ceremonia-madrid h1,
.contenido-boda-madrid h1 {
    font-size: 3.15rem;
    text-align: center;      /* Centra el texto exactamente en medio */
    margin-top: 10px;        /* Espacio de separación con el menú de arriba */
    margin-bottom: 30px;     /* Espacio de separación con la primera foto de abajo */
    width: 100%;             /* Asegura que ocupe todo el ancho disponible para centrarse bien */
}

/* Alinea el menú "Inicio" perfectamente con el borde izquierdo del texto */
nav.menu-boda-madrid ul {
    text-align: left !important; /* Fuerza la alineación a la izquierda */
    padding-left: 0;             /* Quita el espacio que los navegadores ponen por defecto a las listas */
    margin-left: 0;              /* Asegura que empiece en el pixel 0 del contenedor */
    list-style: none;            /* Por si acaso, quita cualquier viñeta */
}

.contenido-el-lugar {
    max-width: 600px;
    width: 85%;
    margin: 20px auto 90px auto;
    text-align: justify;
    font-size: large;
}

.contenido-el-lugar h1 {
    font-size: 3rem;
    text-align: left;
    margin-bottom: 40px;
}

.contenido-el-lugar h2 {
    font-size: 2rem;
    text-align: left;
    margin-top: 60px;
    margin-bottom: 30px;
}

.contenido-el-lugar li {
    margin-bottom: 25px;
}

#proximamente {
    text-align: center;
    font-size: 330%;
    padding-top: 15%;
    font-style: italic;
    display: flex;
    flex-direction: column;
    justify-content: center; /* centro vertical */
    align-items: center;     /* centro horizontal */
    min-height: 100vh;
}