:root {
    --color-wood: #5D4037;
    --color-gold: #D4AF37;
    --color-paper: #FDF5E6; /* Old Lace */
    --color-dark: #2c1a16;
    --color-light: #ffffff;
    --font-title: 'Rye', serif;
    --font-body: 'Montserrat', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--color-dark);
    background-color: var(--color-paper);
    overflow-x: hidden;
}

/* LOADER */
#loader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--color-wood);
    color: var(--color-gold);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}
.horseshoe-spinner { font-size: 3rem; animation: spin 1s infinite linear; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* MUSIC CONTROL */
.music-control {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: var(--color-wood);
    color: var(--color-gold);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 1000;
    border: 2px solid var(--color-gold);
    transition: transform 0.3s;
}
.music-control.playing { animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); } }

/* HERO SECTION */
.hero {
    height: 100vh;
    /* Imagen de fondo de alta calidad (madera oscura o paisaje) */
    background-image: url('https://images.unsplash.com/photo-1699541639604-93be7c26f6d7?q=80'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(44, 26, 22, 0.6); /* Oscurecer fondo */
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    border: 3px solid var(--color-gold);
    padding: 3rem 2rem;
    margin: 20px;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(2px);
}

.pre-title { letter-spacing: 3px; font-size: 0.9rem; text-transform: uppercase; }
.main-title { font-family: var(--font-title); font-size: 3.5rem; color: var(--color-gold); line-height: 1.1; margin: 15px 0; text-shadow: 3px 3px 0 #000; }
.sub-title { font-size: 1.5rem; letter-spacing: 5px; font-weight: 600; }
.separator { font-size: 2rem; color: var(--color-gold); margin: 10px 0; }
.scroll-down { background: none; border: none; color: white; font-size: 2rem; margin-top: 30px; animation: bounce 2s infinite; cursor: pointer; }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);} }

/* SECTIONS GENERAL */
.container { max-width: 800px; margin: 0 auto; padding: 0 20px; text-align: center; }
section { padding: 4rem 0; }
h2 { font-family: var(--font-title); font-size: 2.5rem; color: var(--color-wood); margin-bottom: 2rem; }

.section-paper { background-color: var(--color-paper); background-image: url('https://www.transparenttextures.com/patterns/cream-paper.png'); }
.section-wood { background-color: var(--color-wood); color: white; background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png'); }
.section-wood h2 { color: var(--color-gold); }

/* COUNTDOWN */
.countdown-grid { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.time-box { background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; min-width: 80px; border: 1px solid var(--color-gold); }
.time-box span { display: block; font-size: 2rem; font-weight: bold; font-family: var(--font-title); }
.time-box small { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }

/* DETAILS */
.detail-item { margin-bottom: 2.5rem; }
.icon-circle { font-size: 2rem; color: var(--color-wood); margin-bottom: 10px; }
.btn-map { display: inline-block; margin-top: 10px; padding: 10px 20px; border: 2px solid var(--color-wood); color: var(--color-wood); text-decoration: none; border-radius: 30px; font-weight: bold; transition: 0.3s; }
.btn-map:hover { background: var(--color-wood); color: white; }

/* CARDS GRID */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
.card { background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-bottom: 5px solid var(--color-wood); }
.icon-card { font-size: 2.5rem; color: var(--color-gold); margin-bottom: 15px; }


/* =========================================
   GALERÍA ESTILO "SE BUSCA" (PREMIUM)
   ========================================= */

/* 1. Contenedor Principal: Asegura el centrado del cartel */
.gallery-section {
    text-align: center;     /* Centra elementos inline-block */
    display: flex;          /* Flexbox para mayor control */
    flex-direction: column;
    align-items: center;    /* Centrado horizontal flex */
    justify-content: center;
    width: 100%;
    padding: 4rem 20px;     /* Espacio para que no toque los bordes en móvil */
}

/* 2. El Marco de Papel "Quemado" */
.photo-frame {
    /* Color base crema en lugar de blanco puro */
    background-color: #f4e4bc;
    /* Textura sutil de papel viejo (opcional, si tienes una imagen de textura mejor) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23d4b483' stroke-width='1' opacity='0.3'%3E%3Cpath d='M0 0l100 100M100 0L0 100'/%3E%3C/g%3E%3C/svg%3E");
    
    padding: 25px 25px 50px 25px; /* Un poco más de padding para el efecto */
    display: inline-block; 
    transform: rotate(-2deg); /* La inclinación original */
    position: relative;
    margin: 20px auto;
    
    /* Bordes ligeramente irregulares para que no se vea perfecto */
    border-radius: 3% 2% 5% 4% / 4% 3% 5% 2%;
    
    /* EFECTO QUEMADO: Sombras internas múltiples */
    box-shadow: 
        inset 0 0 30px rgba(93, 64, 55, 0.8), /* Chamuscado marrón interno */
        inset 0 0 10px rgba(0,0,0,0.6),      /* Borde negro quemado */
        0 15px 30px rgba(0,0,0,0.5);         /* Sombra externa profunda */
    
    transition: all 0.3s ease;
}

/* Efecto interactivo: al pasar el mouse se endereza un poco */
.photo-frame:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 
        inset 0 0 40px rgba(93, 64, 55, 0.9),
        0 20px 40px rgba(0,0,0,0.6);
}

/* 3. La Imagen (Tu código integrado) */
.photo-frame img {
    width: 100%;
    max-width: 300px; /* Tamaño máximo controlado */
    height: auto;
    display: block; /* Evita espacios fantasma debajo de la imagen */
    filter: sepia(0.4) contrast(1.1) brightness(0.9); /* Ajusté un poco el brillo para el look antiguo */
    border: 3px solid #4a3b3b; /* Borde oscuro tipo marco de madera delgado */
    box-sizing: border-box;
}

/* 4. El Texto de "Recompensa" */
.wanted-label {
    position: absolute; 
    bottom: 15px; 
    left: 0; 
    width: 100%; 
    text-align: center;
    font-family: var(--font-title); /* Usa la fuente vaquera */
    font-size: 1.3rem; 
    color: #3e2723; /* Color marrón oscuro */
    text-shadow: 1px 1px 0px rgba(255,255,255,0.5); /* Pequeño brillo para leerse mejor sobre lo quemado */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* RSVP FOOTER */
.rsvp-section { background: #1a100e; color: white; padding: 4rem 0; text-align: center; }
.rsvp-section h2 { color: white; }
.btn-whatsapp {
    display: inline-block; background-color: #25D366; color: white; padding: 15px 35px;
    border-radius: 50px; text-decoration: none; font-weight: bold; font-size: 1.1rem;
    margin-top: 20px; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); transition: transform 0.3s;
}
.btn-whatsapp:hover { transform: translateY(-3px); }
.footer-credit { margin-top: 3rem; font-size: 0.8rem; opacity: 0.5; }

/* MEDIA QUERIES */
@media (min-width: 768px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .main-title { font-size: 5rem; }
}