/* css/styles.css */

/* --- Variables CSS - Paleta "Romance Atemporal con Toques Dorados" --- */
:root {
    --color-primary: #4A403D;       /* Marrón chocolate profundo */
    --color-secondary: #EAE0D5;     /* Beige almendra muy pálido */
    --color-background: #FDFBF8;    /* Blanco Hueso con textura sutil */
    --color-background-pattern: #F9F6F2; /* Un tono ligeramente más oscuro para el patrón */
    --color-text: #5D534F;          /* Marrón grisáceo */
    --color-accent: #B08D57;        /* Dorado antiguo / Bronce claro */
    --color-gold: #CFAA7D;          /* Dorado champán */
    --color-highlight: #FFFFFF;     /* Blanco puro para las "tarjetas" */
    --color-dark-accent: #3E3532;   /* Marrón oscuro casi negro */
    --color-error: #c0392b;         /* Rojo más apagado para errores */
    --color-success: #27ae60;       /* Verde para éxito */
    --color-countdown-text: #FFFFFF; /* Blanco para el countdown */
    
    --font-script: 'Alex Brush', cursive;
    --font-heading: 'EB Garamond', serif; /* Principal para H2, H3 */
    --font-alt-heading: 'Montserrat', sans-serif; /* Para elementos como labels, botones */
    --font-body: 'Montserrat', sans-serif;
    --font-parents: 'Italianno', cursive; 
    
    --border-radius: 12px;
    --box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    --box-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.12);
    --transition-speed: 0.35s;
    --section-padding-desktop: 70px 30px;
    --section-padding-mobile: 40px 20px;

    /* Variables para títulos específicos (ejemplo, se pueden añadir más) */
    --font-titulo-padrinos: var(--font-script);
    --font-titulo-detalles: var(--font-script);
    --font-titulo-itinerario: var(--font-script);
    --font-titulo-vestimenta: var(--font-script);
    --font-titulo-formal-vestimenta: var(--font-script);
    --font-titulo-invitados: var(--font-script);
    --font-titulo-regalos: var(--font-script);
    --font-titulo-social: var(--font-script);
    --font-titulo-galeria: var(--font-script);
    --font-titulo-recomendaciones: var(--font-script);
}

/* --- Estilos Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { 
    scroll-behavior: smooth; 
    font-size: 100%; 
}
body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-background-pattern);
    background-image: url('../img/subtle_floral_pattern.png'); 
    background-repeat: repeat;
    background-attachment: fixed;
    line-height: 1.75;
    margin: 0; padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { 
    font-weight: normal; margin-top: 0;
    margin-bottom: 1.2rem; line-height: 1.3;
}
h1 { 
    font-size: clamp(3rem, 7vw, 5rem); font-family: var(--font-script); 
    color: var(--color-gold); font-weight: 400;
}
h2 { /* Estilo base para H2, se sobreescribe por ID donde sea necesario */
    font-family: var(--font-heading); letter-spacing: 1px;
    color: var(--color-primary); 
    font-size: clamp(1.8rem, 4.5vw, 2.8rem); 
    font-weight: 600; line-height: 1.3;
    margin-bottom: 2.8rem; text-align: center;
}
h3 { 
    font-size: clamp(1.4rem, 3.2vw, 1.9rem); 
    font-family: var(--font-heading); color: var(--color-accent); 
    font-weight: 600;
}
h4 { 
    font-size: clamp(1.1rem, 2.5vw, 1.3rem); 
    font-family: var(--font-alt-heading); color: var(--color-primary); 
    font-weight: 600; 
}
p { margin-bottom: 1.1rem; font-size: clamp(0.95rem, 2.1vw, 1.05rem); }

.content-card {
    background-color: var(--color-highlight);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid rgba(0,0,0,0.05);
    margin-top: 40px; margin-bottom: 40px;
    padding: var(--section-padding-desktop);
    max-width: 1100px; margin-left: auto; margin-right: auto;
}
.hero-section, .countdown-section {
    padding: var(--section-padding-desktop);
}

img { max-width: 100%; height: auto; display: block; border-radius: calc(var(--border-radius) / 2); }
a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-speed); }
a:hover, a:focus { color: var(--color-dark-accent); text-decoration: underline; }

*:focus-visible {
    outline: 3px solid var(--color-accent); outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-gold);
    border-radius: 3px;
}
button:focus, input:focus, textarea:focus, select:focus { outline: none; }

input, textarea, button, select { font-family: inherit; font-size: inherit; color: var(--color-text); }
select { 
    appearance: none; 
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23B08D57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); 
    background-position: right 15px center; background-repeat: no-repeat;
    background-size: 12px; padding-right: 40px !important; 
}

.section-subtitle { 
    text-align: center; margin-top: -2rem; margin-bottom: 2.8rem; 
    color: var(--color-text); font-style: italic; 
    font-family: var(--font-heading);
    font-size: clamp(1rem, 2.2vw, 1.2rem);
}

.cta-button {
    display: inline-block; background-color: var(--color-accent);
    color: white !important; padding: 15px 35px; border: none;
    border-radius: var(--border-radius); font-family: var(--font-alt-heading);
    font-size: clamp(0.95rem, 2.2vw, 1.1rem); font-weight: 600; 
    text-transform: uppercase; letter-spacing: 1px; cursor: pointer;
    transition: background-color var(--transition-speed) ease, 
                transform var(--transition-speed) ease, 
                box-shadow var(--transition-speed) ease;
    text-align: center; box-shadow: var(--box-shadow);
}
.cta-button:hover, .cta-button:focus {
    background-color: var(--color-dark-accent); text-decoration: none;
    transform: translateY(-4px); box-shadow: var(--box-shadow-hover);
}
.cta-button:active { transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.cta-button i { margin-right: 12px; }

/* --- SECCIÓN HERO --- */
.hero-section {
    position: relative; min-height: 100vh; width: 100%;
    margin: 0; padding: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    text-align: center; background-color: var(--color-background);
}
.hero-background-pattern {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../img/pattern-background.png');
    background-size: cover; background-position: center;
    filter: brightness(0.9) saturate(0.7); opacity: 0.15; z-index: 1;
}
.hero-content {
    position: relative; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    padding: 10vh 20px 20vh; z-index: 2; width: 100%; height: 100%;
}
.monogram-container { margin-bottom: clamp(2vh, 4vh, 4vh); }
.monogram {
    width: clamp(100px, 20vw, 160px); 
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1)); border-radius: 0;
}
#titulo-bienvenida { 
    font-family: var(--font-heading); 
    font-size: clamp(1.6rem, 4.2vw, 2.4rem); letter-spacing: 2px;
    color: var(--color-primary); font-weight: 400; text-transform: none;
    margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.hero-message { margin-bottom: clamp(2vh, 3vh, 4vh); }
.names-preview h1 {
    font-size: clamp(4rem, 12vw, 7rem); margin-bottom: 0.8rem;
    color: var(--color-gold); text-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.wedding-date-preview {
    font-family: var(--font-alt-heading); 
    font-size: clamp(1.1rem, 3.2vw, 1.6rem);
    color: var(--color-accent); letter-spacing: 3.5px; text-transform: uppercase;
}
.wax-seal-wrapper {
    position: absolute; bottom: clamp(5vh, 8vh, 10vh); left: 50%;
    transform: translateX(-50%); z-index: 10; opacity: 0;
    transition: opacity 0.8s ease-out 0.5s, transform 0.3s ease;
}
.wax-seal-wrapper.visible { opacity: 1; }
.wax-seal-container {
    background-color: transparent; 
    width: clamp(100px, 20vw, 130px); 
    height: clamp(100px, 20vw, 130px); 
    border-radius: 50%;
    box-shadow: none; 
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; border: none; padding: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wax-seal-container:hover, .wax-seal-container:focus { transform: scale(1.1) rotate(5deg); }
.seal-image {
    width: 100%; 
    height: 100%; 
    object-fit: contain;
    filter: brightness(0.95) contrast(1.1); border-radius: 0;
}
.hidden-scroll-link {
    position: absolute; opacity: 0; width: 1px; height: 1px;
    overflow: hidden; left: -9999px;
}

/* --- CUENTA REGRESIVA --- */
.countdown-section {
    position: relative; min-height: 70vh; width: 100%;
    display: flex; flex-direction: column;
    justify-content: flex-start; align-items: center;
    padding-top: 50px; padding-bottom: 20px;
    overflow: hidden; margin: 0;
    background-color: var(--color-background); 
}
.countdown-content-upper {
    position: relative; z-index: 2; width: 100%;
    max-width: 700px; margin: 0 auto 20px auto; padding: 20px;
}
.countdown-full-bg-image {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../img/novios_countdown_bg_bw.jpg');
    background-size: cover; 
    background-position: center center; 
    z-index: 1;
    filter: grayscale(100%) brightness(0.7); 
}
.boxed-countdown {
    display: flex; justify-content: center; align-items: baseline;
    flex-wrap: wrap; gap: clamp(15px, 3vw, 25px);
}
.countdown-group { display: flex; flex-direction: column; align-items: center; }
.countdown-box { display: flex; align-items: center; justify-content: center; }
.countdown-box span {
    font-family: var(--font-heading); 
    font-size: clamp(3rem, 9vw, 5rem); font-weight: 400;
    line-height: 1; padding: 0 8px; min-width: 2ch;
    color: var(--color-countdown-text); 
    text-shadow: 0 1px 3px rgba(0,0,0,0.5); 
}
.countdown-label {
    font-family: var(--font-alt-heading); 
    font-size: clamp(0.75rem, 2.2vw, 1rem); letter-spacing: 2px;
    margin-top: 10px; font-weight: 400; text-transform: uppercase;
    color: var(--color-countdown-text); 
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.countdown-divider {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 400;
    line-height: 1; opacity: 0.9; align-self: center;
    margin-top: -0.4em; 
    color: var(--color-countdown-text); 
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.event-started, .event-error {
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    font-family: var(--font-heading);
    color: var(--color-countdown-text); 
    text-align: center; width: 100%;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* --- INVITACIÓN CON PADRES --- */
.invitation-container {
    max-width: 800px; width: 95%;
    padding: clamp(35px, 5vw, 70px) clamp(25px, 4vw, 50px);
    display: flex; flex-direction: column; align-items: center;
    text-align: center; margin: 0 auto;
}
.invitation-text p {
    font-family: var(--font-alt-heading); text-transform: uppercase;
    letter-spacing: 2.5px; color: var(--color-text);
    font-size: clamp(0.85rem, 2vw, 1rem); font-weight: 400;
    line-height: 1.9; margin: 0 0 1.2rem 0;
}
.invitation-text-main { margin: 2.5rem 0 2rem 0; }
.invitation-text-main p {
    font-size: clamp(1.1rem, 2.6vw, 1.3rem); font-weight: 600;
    color: var(--color-primary);
}
.parents-section {
    margin: 2.5rem 0; display: flex; flex-direction: column;
    align-items: center; gap: 1.8rem; width: 100%;
}
.parents-group { display: flex; flex-direction: column; align-items: center; text-align: center; }
.parent-icon-container {
    width: clamp(55px, 11vw, 75px); height: clamp(55px, 11vw, 75px);
    margin-bottom: 1rem; display: flex; align-items: center; justify-content: center;
}
.parent-icon-image { width: 100%; height: auto; object-fit: contain; border-radius: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.08)); }
.parent-names { text-align: center; }
.parent-couple {
    font-size: clamp(1.3rem, 3.2vw, 1.7rem); color: var(--color-text);
    margin-bottom: 0.4rem; font-family: var(--font-parents); 
    font-weight: 400; line-height: 1.4;
}
.parents-separator { margin: 0.8rem 0; }
.parent-connector {
    font-family: var(--font-script); 
    font-size: clamp(2rem, 4.5vw, 2.8rem); color: var(--color-gold);
}
.couple-names { margin: 1.2rem 0 2.5rem 0; }
.couple-names h1 { 
    font-size: clamp(3.8rem, 11vw, 5.5rem); 
    line-height: 1.1; margin: 0; 
}
.date-container {
    display: flex; flex-direction: column; align-items: center;
    margin-bottom: 2.8rem; width: 100%; max-width: 350px;
}
.date-item { margin: 0.5rem 0; text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; }
.date-label { 
    font-family: var(--font-alt-heading); 
    font-size: clamp(0.8rem, 1.9vw, 0.95rem); letter-spacing: 3px; 
    color: var(--color-text); text-transform: uppercase; font-weight: 600;
}
.date-divider { width: 70px; height: 1.5px; background-color: var(--color-accent); margin-top: 7px; }
.date-number { 
    font-family: var(--font-heading); font-size: clamp(3.8rem, 11vw, 5.5rem); 
    color: var(--color-gold); font-weight: 400; line-height: 1; margin: 0.8rem 0; 
}
.date-year { 
    font-family: var(--font-heading); font-size: clamp(2rem, 5.5vw, 2.8rem); 
    color: var(--color-gold); font-weight: 400; margin: 0.8rem 0; 
}
.time { 
    font-family: var(--font-alt-heading); font-size: clamp(1.3rem, 3.2vw, 1.6rem); 
    color: var(--color-primary); margin-top: 1.2rem; font-weight: 600;
}
.play-button-container { margin-top: 2.5rem; text-align: center; }
.play-button {
    width: clamp(60px, 13vw, 70px); height: clamp(60px, 13vw, 70px); 
    border-radius: 50%; background-color: transparent;
    border: 2.5px solid var(--color-gold); cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; transition: all 0.3s ease;
    color: var(--color-gold);
}
.play-button i { font-size: clamp(1.3rem, 3.2vw, 1.7rem); transition: color 0.3s ease; }
.play-button:hover, .play-button:focus { background-color: rgba(191, 170, 125, 0.1); color: var(--color-dark-accent); }
.song-info {
    font-size: clamp(0.85rem, 1.9vw, 1rem); color: var(--color-text);
    margin-top: 14px; font-style: italic; font-family: var(--font-body);
}
.music-notification {
    position: fixed; bottom: 25px; left: 50%;
    transform: translateX(-50%); background: var(--color-primary); color: white;
    padding: 14px 25px; border-radius: var(--border-radius);
    z-index: 2000; font-size: 0.95rem; box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
}
.music-notification.visible { opacity: 1; visibility: visible; }

/* --- PADRINOS --- */
#wedding-party-heading {
    font-family: var(--font-titulo-padrinos);
    font-size: clamp(2.8rem, 6vw, 3.8rem); 
    font-weight: normal; 
}
.wedding-party-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(25px, 3.5vw, 35px); margin-top: 2.5rem;
}
.person-card {
    text-align: center; background-color: var(--color-background);
    padding: clamp(25px, 4.5vw, 35px); border-radius: var(--border-radius);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid var(--color-secondary);
}
.person-card:hover, .person-card:focus-within { 
    transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); 
}
.person-card h3 { 
    font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--color-primary); 
    margin-bottom: 0.4rem; font-family: var(--font-parents); 
    font-weight: 400; line-height: 1.5; 
}
.person-card .and-separator {
    font-family: var(--font-script);
    font-size: clamp(1.8rem, 3.8vw, 2.4rem); color: var(--color-gold);
    margin: 0.6rem 0; display: block;
}

/* --- SECCIÓN FOTO ÚNICA --- */
.single-photo-container {
    width: 100%;
    max-width: 900px; 
    margin: 0 auto;
    border-radius: var(--border-radius);
    overflow: hidden; 
    box-shadow: var(--box-shadow);
}
.single-photo-container img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0; 
}


/* --- SLIDESHOW (Para la galería si se reactiva) --- */
#gallery-title {
    font-family: var(--font-titulo-galeria); 
    font-size: clamp(2.8rem, 6vw, 3.8rem);
    font-weight: normal;
    text-align: center;
    margin-bottom: 1rem;
}

/* --- DETALLES DEL EVENTO --- */
#details-heading {
    font-family: var(--font-titulo-detalles);
    font-size: clamp(2.8rem, 6vw, 3.8rem);
    font-weight: normal;
}
.event-details { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
    gap: clamp(25px, 3.5vw, 35px); margin-bottom: 0; 
}
.event-item {
    background-color: var(--color-background); 
    padding: clamp(30px, 4.5vw, 40px); border-radius: var(--border-radius);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); text-align: center; 
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex; flex-direction: column;
    border: 1px solid var(--color-secondary);
}
.event-item:hover, .event-item:focus-within { 
    transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); 
}
.event-item .event-title-brush { 
    font-family: var(--font-script); 
    font-size: clamp(2rem, 5vw, 2.8rem); 
    color: var(--color-accent);
    margin-bottom: 1.5rem;
    display: flex; align-items: center; justify-content: center; gap: 14px;
}
.event-item .event-title-brush i { font-size: 0.8em; }
.event-venue { 
    font-weight: bold; color: var(--color-primary); 
    font-size: clamp(1.05rem, 2.3vw, 1.2rem); margin-bottom: 0.6rem; 
    font-family: var(--font-alt-heading); 
}
.event-time, .event-address { 
    margin-bottom: 0.6rem; line-height: 1.7; 
    font-size: clamp(0.95rem, 2.1vw, 1.05rem);
}
.event-time-hour { 
    font-size: clamp(1.05rem, 2.3vw, 1.2rem); font-weight: 600; 
    margin-bottom: 1rem; font-family: var(--font-alt-heading);
}
.map-buttons { 
    margin-top: auto; padding-top: 1.2rem; 
    display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; 
}
.map-link-button {
    background-color: var(--color-secondary); color: var(--color-text);
    padding: 12px 20px; border-radius: calc(var(--border-radius) / 1.5); 
    font-size: clamp(0.85rem, 1.9vw, 0.95rem);
    border: 1px solid var(--color-accent); 
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-alt-heading); font-weight: 500;
}
.map-link-button:hover, .map-link-button:focus { 
    background-color: var(--color-primary); color: white; text-decoration: none; 
    border-color: var(--color-primary); transform: scale(1.03);
}
.map-link-button .fab { font-size: 1.15em; }

/* --- ITINERARIO DEL DÍA --- */
#itinerary-heading {
    font-family: var(--font-titulo-itinerario); 
    font-size: clamp(2.8rem, 6vw, 3.8rem);
    font-weight: normal;
}
.timeline {
    position: relative; max-width: 800px; 
    margin: 35px auto; padding: 22px 0;
}
.timeline::after {
    content: ''; position: absolute; width: 2.5px; 
    background-color: var(--color-secondary); top: 0; bottom: 0;
    left: calc(clamp(45px, 8.5vw, 55px) / 2); 
    margin-left: -1.25px; z-index: 1; 
}
.timeline-item {
    padding: 12px 0 12px calc(clamp(45px, 8.5vw, 55px) + 25px); 
    position: relative;
    background-color: inherit; 
    width: 100%; 
    z-index: 2;
    margin-bottom: 20px; 
    text-align: left;
}
.timeline-icon {
    position: absolute; width: clamp(45px, 8.5vw, 55px); 
    height: clamp(45px, 8.5vw, 55px);
    background-color: var(--color-highlight);
    border: 2.5px solid var(--color-accent);
    top: 15px; 
    left: 0; 
    border-radius: 50%; z-index: 3;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 0 0 5px var(--color-background);
}
.timeline-icon i { font-size: clamp(1.3rem, 3.2vw, 1.6rem); color: var(--color-accent); }
.timeline-icon .timeline-custom-icon {
    width: 60%;
    height: 60%;
    object-fit: contain;
    border-radius: 0;
    filter: brightness(0) saturate(100%) invert(64%) sepia(13%) saturate(1917%) hue-rotate(358deg) brightness(90%) contrast(86%);
}
.timeline-content {
    padding: clamp(18px, 3.2vw, 28px);
    background-color: var(--color-background); 
    position: relative; border-radius: var(--border-radius);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid var(--color-secondary);
    margin-left: 0; 
}
.timeline-item:hover .timeline-content,
.timeline-item:focus-within .timeline-content { 
    transform: scale(1.025); box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}
.timeline-content .timeline-title-montserrat { 
    margin-top: 0; color: var(--color-primary); 
    font-size: clamp(1.1rem, 2.5vw, 1.3rem); 
    font-family: var(--font-alt-heading); 
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.timeline-content .timeline-time-place { 
    font-size: clamp(0.9rem, 1.9vw, 1rem); 
    color: var(--color-text); 
    margin-bottom: 0.3rem;
    font-weight: 500;
}
.timeline-content .timeline-details-mobile-hidden { 
    margin-bottom: 0; font-size: clamp(0.85rem, 1.8vw, 0.95rem); 
    color: #555; line-height: 1.6;
}

/* --- CÓDIGO DE VESTIMENTA --- */
#dress-code-heading {
    font-family: var(--font-titulo-vestimenta);
    font-size: clamp(2.8rem, 6vw, 3.8rem);
    font-weight: normal;
}
.dress-code-content { max-width: 850px; margin: 0 auto; }
.dress-code-icon-custom {
    margin-bottom: 1.8rem; display: flex; justify-content: center;
}
.dress-code-symbol-image {
    width: clamp(80px, 15vw, 110px); 
    height: auto; border-radius: 0;
}
#dress-code-main-title.dress-code-main-title { 
    font-family: var(--font-titulo-formal-vestimenta); 
    font-weight: normal; 
    font-size: clamp(2.5rem, 5.5vw, 3.5rem); 
    color: var(--color-primary); margin-bottom: 1.2rem;
    text-align: center; 
    text-transform: none; 
}
#dress-code-intro-text {
    text-align: center;
    color: var(--color-text); line-height: 1.85; 
    font-size: clamp(0.95rem, 2.1vw, 1.1rem);
    max-width: 650px; 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
}
.dress-code-details {
    display: flex; justify-content: space-between; 
    margin: 2.8rem 0; flex-wrap: nowrap; 
    gap: clamp(15px, 2.5vw, 25px); 
}
.dress-code-column {
    flex: 1 1 0; min-width: 0; 
    background-color: var(--color-background);
    padding: clamp(22px, 3.2vw, 32px);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid var(--color-secondary);
    text-align: center;
    display: flex; 
    flex-direction: column;
}
.dress-code-column .dress-code-subtitle-brush { 
    font-family: var(--font-script); 
    font-size: clamp(1.8rem, 4vw, 2.4rem); 
    color: var(--color-accent);
    margin-bottom: 1rem;
    font-weight: normal;
}
.dress-code-column p {
    margin-bottom: 1rem; 
    flex-grow: 1; 
}
.inspiration-button {
    font-family: var(--font-alt-heading); 
    font-style: italic;
    padding: 10px 20px; 
    font-size: clamp(0.85rem, 1.8vw, 0.95rem);
    margin-top: auto; 
    background-color: var(--color-secondary);
    color: var(--color-primary);
    border: 1px solid var(--color-accent);
}
.inspiration-button:hover {
    background-color: var(--color-accent);
    color: white;
}
.color-palette, .dress-code-note { display: none; } 

/* --- SECCIÓN QUERIDOS INVITADOS --- */
#children-policy-heading {
    font-family: var(--font-titulo-invitados);
    font-size: clamp(2.5rem, 6vw, 3.5rem); 
    font-weight: normal;
}
.children-policy-content {
    max-width: 750px; margin: 0 auto; padding: 10px 0;
    text-align: center;
}
.children-policy-content p {
    font-size: clamp(1rem, 2.2vw, 1.15rem); line-height: 1.9;
    color: var(--color-text); margin-bottom: 1.2rem; 
    font-family: var(--font-body);
}
.children-policy-content p:last-child { margin-bottom: 0; }
.children-policy-content i.fa-heart {
    animation: heartBeat 1.5s infinite ease-in-out; 
}

/* --- SUGERENCIA DE REGALOS --- */
#registry-heading { 
    font-family: var(--font-titulo-regalos);
    font-size: clamp(2.8rem, 6vw, 3.8rem);
    font-weight: normal;
}
.registry-section > p.registry-intro-text {
    max-width: 750px; margin-left: auto; margin-right: auto; 
    font-size: clamp(0.95rem, 2.1vw, 1.1rem);
    text-align: center;
}
.registry-links { display: flex; justify-content: center; margin-top: 2.8rem; }
.registry-item { 
    display: flex; flex-direction: column; align-items: center; 
    gap: 15px; 
    width: 100%; max-width: 480px;
    background-color: var(--color-background); 
    padding: clamp(25px, 3.5vw, 35px); 
    border-radius: var(--border-radius);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid var(--color-secondary);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}
.registry-item:hover, .registry-item:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.registry-envelope-image { 
    width: clamp(80px, 15vw, 120px); 
    height: auto; 
    object-fit: contain;
    border-radius: 8px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    margin-bottom: 5px;
}
.registry-item .registry-title-montserrat { 
    font-family: var(--font-alt-heading); 
    font-style: italic;
    font-weight: 700; 
    font-size: clamp(1.3rem, 2.8vw, 1.6rem);
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    margin-top: 0;
}

/* --- SOCIAL MEDIA --- */
#social-heading { 
    font-family: var(--font-titulo-social);
    font-size: clamp(2.8rem, 6vw, 3.8rem);
    font-weight: normal;
}
.social-content-inner {
    max-width: 750px; margin: 0 auto;
    padding: clamp(10px, 2vw, 20px) 0;
}
.hashtag-container {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; margin-bottom: 1.8rem; position: relative;
}
.hashtag-container > i.fa-hashtag {
    font-size: clamp(2.2rem, 5.5vw, 3rem); color: var(--color-gold);
}
.hashtag {
    font-family: var(--font-heading); 
    font-size: clamp(1.6rem, 4.2vw, 2.4rem);
    color: var(--color-primary); margin: 0; font-weight: 600; 
}
.social-section p.social-text { 
    font-size: clamp(0.95rem, 2.1vw, 1.1rem); line-height: 1.8;
    text-align: center;
}
.social-icons {
    display: flex; justify-content: center;
    gap: clamp(18px, 3.2vw, 28px);
    margin-top: 2.5rem; flex-wrap: wrap;
}
.social-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: clamp(50px, 10.5vw, 65px); height: clamp(50px, 10.5vw, 65px);
    border-radius: 50%; color: white; background-color: var(--color-accent);
    font-size: clamp(1.6rem, 3.8vw, 2.2rem);
    transition: transform 0.3s, background-color 0.3s;
}
.social-icon:hover, .social-icon:focus {
    transform: scale(1.18); background-color: var(--color-dark-accent);
    color: white; text-decoration: none;
}

/* --- FORMULARIO DE RSVP --- */
.rsvp-title-multiline { 
    text-align: center;
    margin-bottom: 1.5rem; 
}
.rsvp-title-line1, .rsvp-title-line3 {
    display: block;
    font-family: var(--font-script); 
    font-size: clamp(2.2rem, 5vw, 3rem);
    color: var(--color-primary);
    line-height: 1.2;
    font-weight: normal;
}
.rsvp-title-line2 {
    display: block;
    font-family: var(--font-alt-heading); 
    font-size: clamp(2rem, 5.5vw, 3.2rem); 
    color: var(--color-accent);
    text-transform: uppercase;
    font-weight: 700; 
    margin: 0.3rem 0;
    line-height: 1.1;
}
.rsvp-deadline {
    text-align: center; margin-bottom: 2.8rem;
    font-size: clamp(1.05rem, 2.3vw, 1.2rem);
    color: var(--color-text); font-family: var(--font-alt-heading);
}
.rsvp-deadline strong { color: var(--color-primary); font-weight: 600; }
.rsvp-button { 
    display: block; 
    width: fit-content; 
    max-width: 300px; 
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.2rem; padding: 16px 30px; 
    font-family: var(--font-alt-heading); 
}

/* --- RECOMENDACIONES LOCALES --- */
#recommendations-heading {
    font-family: var(--font-titulo-recomendaciones);
    font-size: clamp(2.8rem, 6vw, 3.8rem);
    font-weight: normal;
    margin-bottom: 2.5rem;
}
.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(22px, 3.2vw, 32px);
}
.recommendation-item { 
    text-align: center; padding: clamp(25px, 3.5vw, 35px);
    background: var(--color-background);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-secondary);
    display: flex; flex-direction: column;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    width: 100%; 
}
.recommendation-item i.fas { 
    font-size: clamp(2rem, 4.2vw, 2.8rem); 
    color: var(--color-accent); margin-bottom: 1.2rem; display: block; 
}
.recommendation-item h3 { 
    font-size: clamp(1.2rem, 2.6vw, 1.4rem); 
    color: var(--color-primary); margin-bottom: 1rem; 
    font-family: var(--font-heading); 
}
.recommendation-item p { 
    font-size: clamp(0.9rem, 1.9vw, 1rem); 
    color: var(--color-text); margin-bottom: 0.9rem; 
    line-height: 1.7; flex-grow: 1; 
}
.recommendation-item a { word-break: break-word; color: var(--color-accent); }
.recommendation-item a:hover { color: var(--color-dark-accent); }
.recommendation-item p b {
    color: var(--color-primary);
}


/* --- Footer --- */
footer {
    text-align: center; padding: clamp(35px, 5.5vh, 55px) 20px; 
    background-color: var(--color-primary);
    color: var(--color-highlight); margin-top: 50px;
    border-top: 5px solid var(--color-gold); 
}
footer p { 
    margin-bottom: 0.7rem; 
    font-size: clamp(0.95rem, 2.1vw, 1.05rem);
    font-family: var(--font-body);
}
.footer-names { 
    font-family: var(--font-script); 
    font-size: clamp(2rem, 4.5vw, 2.8rem); 
    line-height: 1.15; margin: 0.6rem 0 1rem; 
    color: var(--color-gold);
}
.wedding-date { 
    font-family: var(--font-alt-heading);
    font-size: clamp(1.1rem, 2.6vw, 1.4rem);
    letter-spacing: 2.5px; margin-bottom: 1.8rem;
    opacity: 0.95;
}
footer i.fa-heart.beat { 
    color: #e74c3c; 
    animation: heartBeat 1.5s infinite ease-in-out; 
    display: inline-block; margin: 0 3px; 
}

/* --- Botón Copiar Hashtag --- */
.copy-hashtag-btn {
    background: transparent; border: none;
    color: var(--color-accent); cursor: pointer;
    font-size: clamp(1.1rem, 2.2vw, 1.3rem); 
    padding: 6px 9px; transition: color 0.2s, transform 0.2s;
    line-height: 1;
}
.copy-hashtag-btn:hover, .copy-hashtag-btn:focus {
    color: var(--color-dark-accent); transform: scale(1.12);
}
.copy-hashtag-btn .fa-check { color: var(--color-success); }
.copy-hashtag-btn .fa-times { color: var(--color-error); }
.copy-tooltip {
    position: absolute; bottom: 130%; left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-dark-accent); color: white;
    padding: 7px 14px; border-radius: 6px;
    font-size: 0.85rem; white-space: nowrap;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    z-index: 10; box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.copy-tooltip.visible {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(-6px);
}

/* --- Animaciones --- */
@keyframes heartBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.28); } }
.play-button.animated { animation: pulseButton 1.8s infinite ease-in-out; }
@keyframes pulseButton { 
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(191, 170, 125, 0.6); } 
    70% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(191, 170, 125, 0); } 
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(191, 170, 125, 0); } 
}

/* --- Clase de utilidad para ocultar visualmente --- */
.visually-hidden {
    position: absolute !important; height: 1px; width: 1px;
    overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* --- Optimización Impresión --- */
@media print {
    body { 
        background-image: none !important; background-color: white !important; 
        color: black !important; font-size: 11pt;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    h1, h2, h3, h4, p, span, div { 
        color: black !important; background-color: transparent !important;
        text-shadow: none !important; box-shadow: none !important;
    }
    .content-card, section { 
        padding: 15px 0; animation: none !important; opacity: 1 !important; 
        transform: none !important; box-shadow: none !important;
        border: 1px solid #ccc !important; margin-bottom: 15px;
        background-color: white !important;
    }
    .hero-section, .countdown-section .countdown-full-bg-image, 
    .social-section .social-icons, 
    .rsvp-section .rsvp-button, 
    .play-button-container, .wax-seal-wrapper,
    .copy-hashtag-btn, .copy-tooltip,
    .map-buttons, .inspiration-button,
    .dress-code-symbol-image,
    .registry-envelope-image,
    [data-aos] { display: none !important; }
    
    .invitation-section, .details-section, .itinerary-section, 
    .dress-code-section, .registry-section, .children-policy-section, 
    .recommendations-section,
    .single-photo-container,
    footer,
    .social-section .social-content-inner, 
    .rsvp-section .rsvp-deadline, .rsvp-section .rsvp-title-multiline, 
    #gallery-title,
    .countdown-section .countdown-content-upper
     { 
        display: block !important; page-break-inside: avoid; 
    }
    .event-details { grid-template-columns: 1fr; }
    .timeline::after, .timeline-icon { display: none !important; }
    .timeline-item { width: 100%; padding: 10px 0 !important; left: 0 !important; text-align: left !important; }
    .timeline-content { box-shadow: none; border: 1px solid #ccc; padding: 15px; }
    .timeline-details-mobile-hidden { display: block !important; } 
    .recommendations-grid, .recommendation-item { display: block !important; page-break-inside: avoid; } 
    a { text-decoration: none; color: black !important; }
    a[href^="http"]::after, a[href^="tel"]::after { content: " (" attr(href) ")"; font-size: 0.9em; }
    .parents-section { flex-direction: column; }
    .parent-icon-image { filter: grayscale(100%); }
    .cta-button { 
        border: 1px solid #999 !important; background: #eee !important; 
        color: black !important; padding: 5px 10px !important; 
        box-shadow: none !important; text-decoration: none !important;
    }
    footer { background: none !important; color: black !important; margin-top: 20px; padding: 15px 0; border-top: 2px solid black !important;}
    .footer-names { color: black !important; }
    footer i.fa-heart { color: black !important; animation: none; }
}


/* --- Responsividad --- */
@media (max-width: 992px) {
    .content-card, section:not(.hero-section):not(.countdown-section) { padding: var(--section-padding-mobile); }
    .names-preview h1 { font-size: clamp(3.5rem, 10vw, 5.5rem); }
    .wax-seal-container { 
        width: clamp(90px, 18vw, 115px); height: clamp(90px, 18vw, 115px); 
    }
    .monogram { width: clamp(90px, 18vw, 140px); }
    .countdown-box span { font-size: clamp(2.5rem, 8vw, 4rem); }
    .countdown-divider { font-size: clamp(2.2rem, 7vw, 3.5rem); }
    .parents-section { flex-direction: column; gap: 1.6rem; }
    .parents-group { width: 100%; max-width: 320px; }
    .dress-code-details { flex-wrap: wrap; } 
    .dress-code-column { flex-basis: 48%; min-width: 200px; }
}

@media (max-width: 768px) {
    h1 { font-size: clamp(2.8rem, 9vw, 4rem); }
    h2 { font-size: clamp(1.6rem, 5.5vw, 2.2rem); margin-bottom: 2.2rem; }
    h3 { font-size: clamp(1.3rem, 4.2vw, 1.7rem); }

    #wedding-party-heading, #details-heading, #itinerary-heading, #dress-code-heading, 
    #gallery-title, #children-policy-heading, #registry-heading, 
    #social-heading, #recommendations-heading {
        font-size: clamp(2.2rem, 7vw, 3rem);
    }
    #dress-code-main-title.dress-code-main-title { 
        font-size: clamp(2rem, 6vw, 2.8rem);
    }

    .couple-names h1 { font-size: clamp(3rem, 10vw, 4.5rem); }
    .date-number { font-size: clamp(3rem, 10vw, 4.5rem); }
    .event-details { grid-template-columns: 1fr; gap: 28px; }
    .event-item { padding: 28px; }
    .wedding-party-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
    .registry-links { flex-direction: column; gap: 28px; align-items: center; }
    .registry-item { flex-basis: auto; width: 90%; max-width: 400px; }
    
    .recommendations-grid { grid-template-columns: 1fr; } 
    
    .timeline::after { left: calc(clamp(40px, 7vw, 45px) / 2); } 
    .timeline-item { 
        padding-left: calc(clamp(40px, 7vw, 45px) + 20px); 
        margin-bottom: 15px; 
    }
    .timeline-icon { 
        width: clamp(40px, 7vw, 45px); 
        height: clamp(40px, 7vw, 45px); 
        top: 15px; 
    }
    .timeline-icon i { font-size: clamp(1.1rem, 2.8vw, 1.4rem); }
    .timeline-content { padding: 15px 20px; }
    .timeline-content .timeline-title-montserrat {
        font-size: clamp(1rem, 2.2vw, 1.2rem); 
    }
    .timeline-content .timeline-time-place {
        font-size: clamp(0.85rem, 1.8vw, 0.95rem);
    }
    .timeline-details-mobile-hidden { display: none; } 
    
    .hero-message h2, #titulo-bienvenida { font-size: clamp(1.4rem, 4.8vw, 2rem); }
    .names-preview h1 { font-size: clamp(3rem, 11vw, 4.5rem); }
    .wedding-date-preview { font-size: clamp(1rem, 3.2vw, 1.3rem); }
    .wax-seal-container { 
        width: clamp(75px, 16vw, 95px); height: clamp(75px, 16vw, 95px); 
    }
    .monogram { width: clamp(80px, 16vw, 120px); }
    .boxed-countdown { flex-wrap: wrap; gap: 12px; }
    .countdown-box span { font-size: clamp(2rem, 7vw, 3.2rem); }
    .countdown-label { font-size: clamp(0.65rem, 2vw, 0.85rem); }
    .countdown-divider { font-size: clamp(1.8rem, 6vw, 2.8rem); margin-top: -0.35em; }
    
    .dress-code-details { flex-direction: column; gap: 20px;} 
    .dress-code-column { flex: 1; min-width: 100%; padding: 15px; }
    .dress-code-column .dress-code-subtitle-brush { font-size: clamp(1.6rem, 4vw, 2.2rem); }
    .dress-code-column p { font-size: clamp(0.9rem, 2vw, 1rem); }
    .inspiration-button { font-size: 0.9rem; padding: 10px 18px; }
}

@media (max-width: 480px) {
    h1 { font-size: clamp(2.2rem, 8vw, 3.2rem); }
    h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); }
    h3 { font-size: clamp(1.2rem, 4vw, 1.5rem); }
    
    #wedding-party-heading, #details-heading, #itinerary-heading, #dress-code-heading, 
    #gallery-title, #children-policy-heading, #registry-heading, 
    #social-heading, #recommendations-heading {
        font-size: clamp(2rem, 6.5vw, 2.5rem); 
    }
     #dress-code-main-title.dress-code-main-title {
        font-size: clamp(1.8rem, 5.5vw, 2.3rem);
    }

    .content-card, section:not(.hero-section):not(.countdown-section) { padding: 35px 15px; }
    .couple-names h1 { font-size: clamp(2.5rem, 9vw, 3.5rem); }
    .date-number { font-size: clamp(2.8rem, 9vw, 4rem); }
    .date-year { font-size: clamp(1.5rem, 4.5vw, 2rem); }
    .time { font-size: clamp(1.1rem, 3.8vw, 1.4rem); }

    .cta-button, .rsvp-button { padding: 14px 25px; font-size: 0.95rem; }
    .map-link-button { font-size: 0.8rem; padding: 9px 15px; }
    .wedding-party-grid { grid-template-columns: 1fr; }
    .footer-names { font-size: clamp(1.8rem, 5.5vw, 2.2rem); }
    
    .parent-couple { font-size: clamp(1.2rem, 3.8vw, 1.5rem); }
    .invitation-text p { font-size: clamp(0.8rem, 2.8vw, 0.95rem); }
    .social-content-inner { padding: 1rem 0; }
    .hashtag { font-size: clamp(1.4rem, 4.5vw, 1.8rem); }
    .social-icons { gap: 14px; }
    .social-icon { 
        width: clamp(45px, 9.5vw, 55px); height: clamp(45px, 9.5vw, 55px); 
        font-size: clamp(1.3rem, 3.2vw, 1.6rem); 
    }
    .hero-message h2, #titulo-bienvenida { font-size: clamp(1.3rem, 4.2vw, 1.7rem); }
    .names-preview h1 { font-size: clamp(2.8rem, 10vw, 4rem); }
    .wedding-date-preview { font-size: clamp(0.9rem, 3vw, 1.2rem); }
    .wax-seal-container { 
        width: clamp(65px, 15vw, 85px); height: clamp(65px, 15vw, 85px); 
    }
    .monogram { width: clamp(70px, 15vw, 100px); }
    .countdown-section { min-height: 60vh; padding: 35px 10px; } 
    .boxed-countdown { gap: 8px; }
    .countdown-box span { font-size: clamp(1.8rem, 6vw, 2.8rem); padding: 0 3px; } 
    .countdown-label { font-size: 0.7rem; margin-top: 4px; letter-spacing: 1.2px; }
    .countdown-divider { font-size: clamp(1.6rem, 5.5vw, 2.5rem); margin: 0; }
    .countdown-group { margin: 0 2px; }
    .parent-connector { font-size: clamp(1.6rem, 3.8vw, 2.2rem); }

    .rsvp-title-line1, .rsvp-title-line3 { font-size: clamp(1.8rem, 4.5vw, 2.5rem); }
    .rsvp-title-line2 { font-size: clamp(1.6rem, 5vw, 2.8rem); }
    .rsvp-button { width: 90%; }
}