/* ================== BOTÓN MODO NOCTURNO ================== */
:root{
  --marfil: #fdfcf7;
}
/* Botón de modo nocturno (base oculto) */
.dark-mode-btn {
    position: fixed;
    rotate: 70deg;
    bottom: 20px;
    left: 20px;
    z-index: 40;
    background: #3f491149;
    /* border: 2px solid var(--verde-olivo); */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.6s ease,
        color 0.9s ease,
        transform 0.6s ease,
        opacity 0.9s ease;

    box-shadow: 0 4px 10px rgba(199, 190, 190, 0.349);

    /* Oculto de inicio */
    opacity: 0;
    transform: scale(0.8);
}

/* Hover romántico */
.dark-mode-btn:hover {
    background: var(--verde-olivo);
    color: var(-);
    transform: scale(1.1);
}

/* Cuando se activa después del preloader */
.dark-mode-btn.visible {
    opacity: 1;
    transform: scale(1);
}

/* ================== MODO NOCTURNO ================== */
body.dark-mode {
    background: #0d0d0d;
    color: var(--marfil);
    transition: all 0.5s ease;
}

body.dark-mode header {
    filter: brightness(0.7) contrast(1.1) saturate(1.1) sepia(0.1);
}

body.dark-mode .invitation h1,
body.dark-mode .invitation h2,
body.dark-mode .invitation .date {
    color: var(--marfil);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

body.dark-mode nav ul li a[href="#luis-liset"] {
    color: var(--marfil);
}

body.dark-mode nav ul li a[href="#luis-liset"]:hover {
    color: wheat;
    text-shadow: 0 0 8px rgba(107, 142, 35, 0.6);
}

body.dark-mode .desktop-menu a {
    color: var(--marfil);
}

body.dark-mode .desktop-menu a:hover::after {
    background-color: var(--dorado);
}

body.dark-mode .menu-container.scrolled {
    background-color: #1a1a1a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

body.dark-mode .mobile-menu,
body.dark-mode .nav-links {
    background-color: #1a1a1a;
}

body.dark-mode .mobile-menu a,
body.dark-mode .nav-links a {
    color: var(--marfil);
}

body.dark-mode .audio-player {
    background: rgba(50, 50, 50, 0.4);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode .audio-player button {
    border-color: var(--marfil);
    color: var(--marfil);
}

body.dark-mode .audio-player button:hover {
    box-shadow: 0 0 12px rgba(253, 252, 247, 0.5);
}

body.dark-mode .audio-player #progress-bar {
    background: var(--dorado);
}

body.dark-mode .divider {
    background: linear-gradient(to right,
            rgba(253, 252, 247, 0),
            rgba(253, 252, 247, 0.5),
            rgba(253, 252, 247, 0));
}

body.dark-mode .panel {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.95), rgba(50, 50, 50, 0.93));
    border: 1px solid rgba(211, 198, 22, 0.06);
}
/*  */
body.dark-mode #gallery h2 {
    color: var(--marfil);
}

/* ================== FRASES EN MODO NOCTURNO ================== */
body.dark-mode .frases h1 {
  color: var(--marfil);
  text-shadow: 0 1px 3px rgba(212, 175, 55, 0.2);
}

body.dark-mode .frases p {
  color: rgba(253, 252, 247, 0.9);
  text-shadow: none;
}
/* ================== TARJETA DE BODA EN MODO NOCTURNO ================== */
body.dark-mode .wedding-card {
    background: linear-gradient(135deg,
        rgba(20, 20, 20, 0.5) 0%,
        rgba(40, 40, 40, 0.3) 100%
    );
}

body.dark-mode .panel {
    background: linear-gradient(180deg, 
        rgba(30, 30, 30, 0.95), 
        rgba(50, 50, 50, 0.93)
    );
    border: 1px solid rgba(212, 175, 55, 0.15);
}

body.dark-mode .person-name {
    color: var(--dorado);
    text-shadow: 0 2px 4px rgba(212, 175, 55, 0.3);
}

body.dark-mode .person-desc {
    color: rgba(253, 252, 247, 0.8);
}

body.dark-mode .portrait {
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

body.dark-mode .bridge-left,
body.dark-mode .bridge-right {
    background: rgba(112, 130, 56, 0.3);
    border-color: rgba(212, 175, 55, 0.2);
}

/* ================== EVENTO/AGENDA EN MODO NOCTURNO ================== */
body.dark-mode #love-hero {
    background: rgba(10, 10, 10, 0.9);
}

body.dark-mode #hero-bg {
    filter: brightness(0.4) contrast(1.2);
}

body.dark-mode .evento p {
    color: rgba(253, 252, 247, 0.9);
}

body.dark-mode .evento h2 {
    color: var(--marfil);
    text-shadow: 0 3px 6px rgba(212, 175, 55, 0.4);
}

body.dark-mode .hero-card {
    background: rgba(30, 30, 30, 0.8);
    border-color: rgba(212, 175, 55, 0.3);
    backdrop-filter: blur(15px);
}

body.dark-mode .hero-card h3 {
    color: var(--dorado);
    border-bottom-color: rgba(212, 175, 55, 0.3);
}

body.dark-mode .hero-card p {
    color: rgba(253, 252, 247, 0.85);
}

body.dark-mode .hero-card span {
    color: var(--marfil);
}

body.dark-mode .hero-card .material-icons {
    color: var(--dorado);
}

/* Botón RSVP en hero */
body.dark-mode #love-hero a {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--dorado);
    color: var(--marfil);
}

body.dark-mode #love-hero a:hover {
    background: var(--dorado);
    color: #1a1a1a;
}

/* ================== NOSOTROS/TIMELINE EN MODO NOCTURNO ================== */
body.dark-mode .nosotros {
    background-color: rgba(20, 20, 20, 0.95);
}

body.dark-mode .nosotros h5 {
    color: var(--dorado);
}

body.dark-mode .nosotros h2 {
    color: var(--marfil);
    text-shadow: 0 2px 6px rgba(212, 175, 55, 0.3);
}

body.dark-mode .nosotros p {
    color: rgba(253, 252, 247, 0.8);
}

body.dark-mode .timeline::before {
    background-color: rgba(212, 175, 55, 0.4);
}

body.dark-mode .timeline-panel {
    background-color: rgba(30, 30, 30, 0.9);
    border-color: rgba(212, 175, 55, 0.4);
    backdrop-filter: blur(10px);
}

body.dark-mode .timeline-panel h3 {
    color: var(--dorado);
}

body.dark-mode .timeline-panel span {
    color: rgba(212, 175, 55, 0.7);
}

body.dark-mode .timeline-panel p {
    color: rgba(253, 252, 247, 0.85);
}

body.dark-mode .timeline-badge {
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

body.dark-mode .triangle-left,
body.dark-mode .triangle-right {
    background-color: rgba(85, 107, 47, 0.8);
}

/* ================== GALERÍA EN MODO NOCTURNO ================== */
body.dark-mode #gallery h2 {
    color: var(--marfil);
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);
}

body.dark-mode #gallery h5 {
    color: var(--dorado);
}

body.dark-mode #gallery .absolute.inset-0 {
    background: rgba(0, 0, 0, 0.85);
}

body.dark-mode .carrusel-nuevo img {
    border: 2px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

body.dark-mode .carrusel-nuevo img:hover {
    border-color: var(--dorado);
}

body.dark-mode #prevBtn,
body.dark-mode #nextBtn {
    background: rgba(212, 175, 55, 0.2);
    border: 2px solid var(--dorado);
    color: var(--marfil);
}

body.dark-mode #prevBtn:hover,
body.dark-mode #nextBtn:hover {
    background: var(--dorado);
    color: #1a1a1a;
}

/* Modal de galería */

body.dark-mode #imageModalBoda {
    background: rgba(0, 0, 0, 0.95);
}

body.dark-mode #imageModalBoda > div {
    background: rgba(30, 30, 30, 0.95);
    border: 2px solid rgba(212, 175, 55, 0.3);
}

body.dark-mode #modalTitleBoda {
    color: var(--dorado);
}

body.dark-mode #modalDescriptionBoda {
    color: rgba(253, 252, 247, 0.8);
}

body.dark-mode #closeModalBoda {
    background: var(--dorado);
    color: #1a1a1a;
}

body.dark-mode #closeModalBoda:hover {
    background: var(--marfil);
}
/* ================== CARTAS DE AMOR EN MODO NOCTURNO ================== */
body.dark-mode #love-letters {
    background-color: rgba(20, 20, 20, 0.95);
}

body.dark-mode .carta::before {
    background: linear-gradient(135deg,
        rgba(65, 62, 62, 0.92),
        rgba(50, 50, 50, 0.88)
    );
 
}

body.dark-mode .carta {
background-color: #b4c195a2;
    border-color: rgba(177, 158, 95, 0.459);
    
}

body.dark-mode .carta h3 {
    color: var(--dorado);
    text-shadow: 0 2px 6px rgba(1, 1, 1, 0.7);
}

body.dark-mode .carta p {
    color: rgba(61, 61, 50, 0.9);

}

body.dark-mode .carta .firma {
    color: var(--marfil);
    text-shadow: 0 2px 4px rgba(163, 137, 52, 0.702);
}

body.dark-mode .carta:hover {
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);
    border-color: var(--dorado);
}
/* ================== CÍRCULO EN MODO NOCTURNO ================== */
.dark-mode #circle {
  background: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('fondos/fondo4.webp') center/cover no-repeat;
}
.dark-mode #circulo {
  filter: brightness(0.6);
}

body.dark-mode #circle h5 {
    color: var(--dorado);
}

body.dark-mode #circle h2 {
    color: var(--marfil);
    text-shadow: 0 2px 6px rgba(212, 175, 55, 0.4);
}

body.dark-mode #circle h3 {
    color: var(--dorado);
    text-shadow: 0 2px 4px rgba(212, 175, 55, 0.3);
}

body.dark-mode #circle p,
body.dark-mode #circle span {
    color: rgba(241, 240, 234, 0.9);
}
/* tarjetas de amistades */
/* Fondo de tarjetas de amistades en modo oscuro */
/* Fondo de tarjetas de amistades en modo oscuro */
body.dark-mode .amistades > div > div {
  background-color: #2C2C2C !important;
}
/* TIP: puedes añadir más cambios de color de elementos según necesites */
/* ================== RSVP EN MODO NOCTURNO ================== */
body.dark-mode .rsvp-section {
    background: linear-gradient(135deg, 
        rgba(20, 20, 20, 0.95) 0%, 
        rgba(40, 40, 40, 0.9) 50%,
        rgba(20, 20, 20, 0.95) 100%
    );
}

body.dark-mode .rsvp-section::before {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(112, 130, 56, 0.08) 0%, transparent 50%);
}

body.dark-mode .rsvp-subtitle {
    color: var(--dorado);
}

body.dark-mode .rsvp-title {
    color: var(--marfil);
    text-shadow: 0 2px 6px rgba(212, 175, 55, 0.3);
}

body.dark-mode .rsvp-description {
    color: rgba(253, 252, 247, 0.85);
}

body.dark-mode .rsvp-button {
    background: var(--dorado);
    border-color: var(--dorado);
    color: #1a1a1a;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

body.dark-mode .rsvp-button:hover {
    background: var(--marfil);
    border-color: var(--marfil);
    box-shadow: 0 8px 25px rgba(253, 252, 247, 0.4);
}
/* formulario */
/* Modo oscuro */
body.dark-mode .rsvp-input {
  background-color: #2C2C2C;
  color: var(--marfil);
  border-color: var(--verde-olivo);
}
body.dark-mode .rsvp-input:focus{
  border-color: var(--marfil);
}
body.dark-mode .mensaje-gracias {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(112, 130, 56, 0.15));
}
/* CONTACTO  */
/* ================== CONTACTO EN MODO NOCTURNO ================== */
body.dark-mode .contacto-section {
    background: linear-gradient(135deg,
        rgba(40, 40, 40, 0.9) 0%,
        rgba(20, 20, 20, 0.95) 50%,
        rgba(30, 30, 30, 0.95) 100%
    );
}

body.dark-mode .contacto-section::before {
    background-image: 
        radial-gradient(circle at 30% 20%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(112, 130, 56, 0.08) 0%, transparent 50%);
}

body.dark-mode .contacto-subtitle {
    color: var(--dorado);
}

body.dark-mode .contacto-title {
    color: var(--marfil);
    text-shadow: 0 2px 6px rgba(212, 175, 55, 0.3);
}

body.dark-mode .contacto-description {
    color: rgba(253, 252, 247, 0.85);
}

body.dark-mode .contacto-link {
    color: var(--dorado);
}

body.dark-mode .contacto-link:hover {
    color: var(--marfil);
    border-bottom-color: var(--marfil);
}

/* ================== FOOTER EN MODO NOCTURNO ================== */
body.dark-mode .footer-section {
    background: linear-gradient(135deg,
        #2a3a1a 0%,
        var(--verde-olivo) 50%,
        #2a3a1a 100%
    );
}

body.dark-mode .footer-names {
    color: var(--marfil);
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

body.dark-mode .footer-date {
    color: var(--dorado);
}

body.dark-mode .footer-copyright,
body.dark-mode .footer-credit {
    color: rgba(253, 252, 247, 0.75);
}
/* ================== BOTÓN VOLVER ARRIBA (FIJO, INDEPENDIENTE DEL MODO) ================== */
#btnTop {
    background-color: var(--verde-olivo) !important;
    color: var(--marfil) !important;
}
body.dark-mode .timeline-panel {
    background-color: rgba(30, 30, 30, 0.8);
    border-color: rgba(212, 175, 55, 0.3);
}

body.dark-mode .timeline-badge {
    border-color: rgba(253, 252, 247, 0.5);
}

body.dark-mode #gallery h2 {
    color: var(--marfil);
}