/* Paleta de Colores: */
/* Fondo de Página (Celeste): #f0f7f8 (Azul muy claro) */
/* Fondo de Tarjeta (Beige/Crema): #faf6f0 */
/* Dorado (Texto Principal): #a7873b */
/* Texto Secundario (Gris/Marrón): #555555 */

/* Registro de la fuente personalizada */
@font-face {
    font-family: 'MoonTypeCustom'; /* El nombre que tú elijas */
    src: url('fuentes/Moon Light.otf') format('truetype'); /* Ruta al archivo */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ParisineTypeCustom'; /* El nombre que tú elijas */
    src: url('fuentes/ParisineTry-Bold.otf') format('truetype'); /* Ruta al archivo */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Intertcc'; /* El nombre que tú elijas */
    src: url('fuentes/Inter.ttc') format('truetype'); /* Ruta al archivo */
    font-weight: normal;
    font-style: normal;
}


:root {
    --color-page-bg: #f0f7f8; /* Celeste muy pálido para el fondo exterior */
    --color-card-bg: #faf6f0; /* Beige/Crema para el fondo de la invitación */
    --color-blue: #007BC2; /* Dorado para títulos, ilustraciones, y énfasis */
    --color-text: #67BBDE; /* Gris-marrón para el cuerpo del texto */
    --color-detail: #F49739; /* Gris-marrón para el cuerpo del texto */
    --color-light-border: #e0d9cd;
}

/* Reset Básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Intertcc', sans-serif;
    color: var(--color-text);
    background-color: #67BBDE;
    line-height: 1.5;
    /* Centrar la invitación en la página */
    display: flex;
    justify-content: center;
    padding: 20px 0;
    min-height: 100vh; /* Asegura que cubra al menos toda la altura de la vista */
}

/* --------------------------------- */
/* CONTENEDOR PRINCIPAL (MÓVIL-FIRST) */
/* --------------------------------- */
.invitation-wrapper {
    width: 100%;
    /* Mínima separación a los lados en móvil */
    padding: 0 10px; 
}

.content-card {
    background-color: white;
    /* Ancho máximo para pantallas grandes */
    max-width: 500px; 
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
}

/* --------------------------------- */
/* BARRA DE NAVEGACIÓN */
/* --------------------------------- */
.navbar {
    padding: 1px 0;
    border-bottom: 1px solid var(--color-light-border);
    margin-bottom: 20px;
}

.navbar nav a {
    text-decoration: none;
    color: var(--color-text);
    margin: 0 8px;
    font-size: 0.6rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}


@media (max-width: 600px) {
.navbar nav a {
    text-decoration: none;
    color: var(--color-text);
    margin: 0 1px;
    font-size: 0.6rem;
    letter-spacing: 0px;
    text-transform: uppercase;
}
}

/* --------------------------------- */
/* SECCIÓN PRINCIPAL (HERO) */
/* --------------------------------- */
.hero-section {
    margin-bottom: 20px;
}

.heading-we-are-married {
    font-family: 'MoonTypeCustom'; /* Fuente manuscrita para el "We're getting married" */
    color: var(--color-blue);
    font-size: 0.5rem; /* Ajuste para móvil */
    margin-bottom: 5px;
}

.names {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: var(--color-blue);
    font-size: 2.5rem; /* Ajuste para móvil */
    line-height: 1.1;
}

/* --------------------------------- */
/* ILUSTRACIÓN DE LA MESA (Placeholder) */
/* --------------------------------- */
.illustration-top {
    padding: 0px 0;
}

.table-art-placeholder {
    height: auto; 
    padding: 0;
    background-color: white; 
   
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blue);
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    opacity: 0.7;
    
    margin: 0 -20px; /* Extender un poco hacia los bordes de la tarjeta */
}




/* Regla CSS a añadir */
.illustration-image {
    /* 1. Asegura que la imagen nunca será más ancha que su contenedor */
    max-width: 100%; 
    /* 2. Permite que la altura se ajuste automáticamente para mantener la proporción */
    height: auto; 
    /* Opcional: Para centrar si el contenedor es más grande */
    display: block; 
    margin: 0 auto;
}

.illustration-image-middle {
    /* 1. Asegura que la imagen nunca será más ancha que su contenedor */
    max-width: 60%; 
    /* 2. Permite que la altura se ajuste automáticamente para mantener la proporción */
    height: auto; 
    /* Opcional: Para centrar si el contenedor es más grande */
    display: block; 
    margin: 0 auto;
}


/* --------------------------------- */
/* LEMA Y CUERPO DE TEXTO */
/* --------------------------------- */
.catchphrase-section {
    padding: 50px 0 0 0;
}

.catchphrase {
    font-family: 'MoonTypeCustom';
    font-size: 1.8rem;
    color: var(--color-blue);
    line-height: 1.2;
    text-transform: none;
}

.info-body-section {
    padding: 0 10px;
    margin-bottom: 20px;
}

.cake-icon-placeholder {
    width: 80px;
    height: 80px;
    margin: 10px auto;
    /* Simulación de un ícono de pastel/corazón en dorado */
   /*border: 2px solid var(--color-blue);*/
    border-radius: 5px;
    position: relative;
    opacity: 0.8;
}

.description-text, .details-text {
    font-size: 0.9rem;
    margin: 15px auto;
    max-width: 90%;
    line-height: 1.7;
    font-weight: 300;
}

.description-text{
    color: var(--color-text) !important;
}

.details-text {
    margin: 0px !important;
    justify-content: left !important;
    color: var(--color-detail);
}

a {
    text-decoration: none; /* Quita el subrayado */
    color: inherit;        /* Hace que el link use el color del texto que lo rodea */
}

.details-text a:hover {
    text-decoration: underline;
    color: var(--color-detail); /* Cambia a naranja al pasar el mouse */
    font-weight: bold;
}

/* --------------------------------- */
/* ÁREA DE FECHA Y RSVP */
/* --------------------------------- */
.rsvp-area {
    padding: 10px 0 40px;
}

.date-highlight {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--color-detail);
    margin: 20px 0;
    letter-spacing: 3px;
    font-weight: 700;
}

.rsvp-btn {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--color-blue);
    color: var(--color-blue);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 1px;
    margin: 6px 0 5px;
    transition: background-color 0.3s, color 0.3s;
}

.rsvp-btn:hover {
    background-color: var(--color-blue);
    color: var(--color-card-bg);
}

.rsvp-deadline {
    font-size: 0.8rem;
    color: var(--color-text);
    line-height: 1.4;
}

/* --------------------------------- */
/* FOOTER DECORATIVO (Placeholder) */
/* --------------------------------- */
.illustration-footer {
    padding: 40px 0 30px 0;
}

.footer-art-placeholder {
    height: 120px; /* Altura de la ilustración */
    background-color: var(--color-card-bg);
    border-top: 2px solid var(--color-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blue);
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0 -20px; /* Extender un poco hacia los bordes de la tarjeta */
}

/* --------------------------------- */
/* ADAPTACIÓN A PANTALLAS GRANDES (Responsive) */
/* --------------------------------- */
@media (min-width: 600px) {
    .content-card {
        padding: 40px 60px; /* Más padding en escritorio */
    }

    .heading-we-are-married {
        font-size: 1.0rem;
    }

    .names {
        font-size: 3.5rem;
    }

    .catchphrase {
        font-size: 2.2rem;
    }

    .table-art-placeholder, .footer-art-placeholder {
        margin: 0 -60px; /* Extender más en escritorio */
    }

    .description-text, .details-text {
        font-size: 1rem;
    }
}

/* --- Estilos para la Cuenta Regresiva --- */
.countdown-container {
    padding: 10px 0;
    margin-bottom: 20px;
}

#countdown-timer {
    display: flex;
    justify-content: center;
    gap: 15px; /* Espacio entre Días, Horas, Minutos, Segundos */
    align-items: center;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px; /* Asegura que no se colapsen en móvil */
}

.countdown-item span:first-child {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--color-detail); /* Números en Dorado */
    font-weight: 700;
    line-height: 1.1;
}

.countdown-item .label {
    font-size: 0.75rem;
    color: var(--color-detail);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

.countdown-separator {
    font-size: 2.2rem;
    color: var(--color-blue);
}

/* Ajuste para pantallas más pequeñas si es necesario */
@media (max-width: 450px) {
    #countdown-timer {
        gap: 10px;
    }
    .countdown-item span:first-child {
        font-size: 1.8rem;
    }
    .countdown-separator {
        font-size: 1.8rem;
    }
}


/* Contenedor principal de los detalles */
.details-container {
    display: flex;
    flex-direction: column; /* Apila los elementos */
    align-items: center;    /* Centra los bloques en la tarjeta */
    gap: 2px;              /* Espacio vertical entre cada fila */
    margin: 20px 0;
}

/* Estilo para cada fila (Icono + Texto) */
.detail-item {
    display: flex;
    align-items: center;    /* Alineación vertical perfecta icono-texto */
    justify-content: flex-start;
    width: 180px;           /* Ancho fijo para que los iconos queden alineados a la izquierda entre sí */
}

/* Control total de los iconos */
.detail-item img {
    width: 35px;            /* Tamaño uniforme para todos */
    height: 35px;           /* Altura fija para evitar saltos */
    object-fit: contain;    /* Evita que se deformen */
    margin-right: 15px;     /* Separación del texto */
}

/* Estilo de los textos y el link */
.detail-item span, 
.detail-item a {
    font-family: 'Intertcc', sans-serif;
    color: var(--color-detail);
    font-size: 1.1rem;
    text-decoration: none;  /* Quita subrayado del link */
}

.detail-item a {
    color: var(--color-detail); /* El link en azul para resaltar */
    font-weight: bold;
}

.detail-item a:hover {
    text-decoration: underline;
}



/* Estilo para los bloques del formulario */
:root {
    --color-fondo: #67BBDE; /* Celeste */
    --color-tarjeta: #FFFFFF; /* Blanco */
    --color-texto-azul: #007BC2; /* Azul */
    --color-naranja: #F49739;
}

fieldset {
    border: 1px solid var(--color-tarjeta);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 25px;
}

legend {
    font-family: 'Intertcc';
    color: var(--color-gold);
    padding: 0 10px;
    font-weight: bold;
}

.form-group {
    margin-bottom: 15px;
    text-align: left;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    color: var(--color-gold);
    margin-bottom: 5px;
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Intertcc', sans-serif;
}

/* Grilla para las bebidas */
.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: left;
    margin-top: 10px;
    font-size: 0.85rem;
}

.label-checkbox-group {
    display: block;
    text-align: left;
    font-weight: bold;
    color: var(--color-gold);
    margin-top: 10px;
}

.highlight-select {
    border: 2px solid var(--color-text) !important;
    background-color: #fffaf5;
}




/*Boton musica */
.music-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000; /* Asegura que quede encima de todo */
    background-color: #EA9833; /* Tu color naranja exacto */
    color: white;
    border: none;
    border-radius: 60px;
    padding: 7px 20px;
    margin-bottom: 20px;
    font-family: sans-serif; /* O la fuente de tu invitación */
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s, background-color 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.music-float:hover {
    background-color: #cf7f4c; /* Un tono un poco más oscuro al pasar el mouse */
    transform: scale(1.05);
}

.music-float:active {
    transform: scale(0.95);
}