/* === Fuentes personalizadas === */
@font-face {
    font-family: 'Darleston';
    src: url('./resources/fonts/Darleston.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BogueSlabLight';
    src: url('./resources/fonts/BogueSlab-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'BogueSlabLightItalic';
    src: url('./resources/fonts/BogueSlab-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

/* ESTILOS GLOBALES Y VARIABLES */
:root {
    --color-eucalyptus-green: #82a893; /* Verde Salvia/Eucalipto */
    --color-soft-green: #e9f2ee; /* Verde muy claro para fondos */
    --color-gold: #c29f62; /* Dorado ocre para acentos */
    --color-dark: #333;
    --color-light: #fff;
    --font-heading: 'Playfair Display', serif;
    /* --font-body: 'Lora', serif; */
    --color-gold-accent: #B8A682; 
    /* --font-heading: 'Darleston', serif; */
    --font-body: 'BogueSlabLight', serif;
    --font-accent: 'BogueSlabLightItalic', serif; 
}

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

/* Establecer el alto del HTML y Body al 100% del viewport */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden; /* Evita el scroll general en desktop */
    font-family: var(--font-body);
    line-height: 1.7;
    color: var(--color-dark);
    background-color: var(--color-light);
}
/* ========================================================
   ESTRUCTURA PRINCIPAL (DESKTOP)
   ======================================================== */
#app-container {
    display: flex;
    height: 100vh; /* Ocupa el 100% de la altura visible de la pantalla */
    width: 100%;
}

/* PANEL IZQUIERDO: IMAGEN Y CARRUSEL */
.side-image-container {
    width: 85%;
    height: 100vh; /* Ocupa toda la altura y es fijo */
    position: relative; /* Cambiado de sticky a relative para que sea un panel estático */
    overflow: hidden;
    color: white;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
    z-index: 50; 
}

.image-carousel {
    position: absolute;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 1.5s ease-in-out;
    opacity: 0;
}

.carousel-slide.active {
    opacity: 1;
}

.hero-text {
    position: absolute;
    bottom: 5%;
    left: 10%;
    z-index: 10;
    text-align: left;
}

.hero-text h1 {
    font-family: var(--font-heading);
    font-size: 4em;
    margin-bottom: 5px;
    line-height: 1;
}

.hero-text p {
    font-size: 1.1em;
    max-width: 80%;
}

/* PANEL DERECHO: CONTENIDO SCROLLABLE */
.content-panel {
    width: 50%;
    height: 100vh; /* Ocupa toda la altura */
    overflow-y: auto; /* PERMITE EL SCROLL SOLO EN ESTA SECCIÓN */
    padding-top: 0; /* Ya no es necesario el padding top */
    z-index: 10;
    /* FIX: Habilita la animación suave en el contenedor de scroll */
    scroll-behavior: smooth; 
}

/* ========================================================
   NAVEGACIÓN / MENU HAMBURGUESA
   ======================================================== */
.menu-toggle {
    display: none; /* Ocultar por defecto en desktop */
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1001; 
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

/* ... otros estilos de menú ... */
.bar {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 4px 0;
    transition: 0.4s;
}

.mobile-menu {
    display: none; /* Se mostrará solo en móvil por JS */
    position: fixed;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    padding-top: 100px;
    z-index: 900;
    transform: translateX(-100%);
    transition: transform 0.3s ease-out;
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu a {
    display: block;
    padding: 15px 30px;
    text-decoration: none;
    color: var(--color-dark);
    font-size: 1.2em;
    border-bottom: 1px solid #eee;
    font-family: var(--font-heading);
}

/* ========================================================
   ESTILOS DE SECCIÓN
   ======================================================== */
.content-section {
    padding: 60px 10%;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}
/* Asegurar que la primera sección del panel derecho sea visible */
.hero-content-right {
    min-height: 100vh; /* Asegura que la sección inicial ocupa al menos 100% de la altura */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0; /* Quitar padding para centrar mejor el contenido */


    /* --- CAMBIOS CLAVE PARA EL FONDO --- */
    background-image: url('img/features/fondo1.jpg'); /* Tu imagen del eucalipto */
    background-size: 140%; /* Usa un porcentaje para que sea grande pero deje espacio */
    background-repeat: no-repeat;
    background-position: center center;
    /* ----------------------------------- */
}

.content-section h2 {
    font-family: var(--font-heading);
    font-size: 2.5em;
    margin-bottom: 30px;
    color: var(--color-eucalyptus-green);
}

.light-bg {
    background-color: var(--color-soft-green);
}

.text-invitacion {
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.1em;
}

/* Estilo de Wreath (Corona de Eucalipto) */
.eucalyptus-wreath {
    max-width: 600px;
    margin: 0 auto 40px;
    padding: 0; /* Ya no necesita el padding extra */
    font-style: italic;
    color: var(--color-dark);
    text-align: center; /* Asegurar que el texto esté centrado */
    z-index: 2; /* Opcional: para asegurar que el texto esté sobre el fondo */
}

.date-large {
    font-family: var(--font-heading);
    font-size: 1.6em;
    line-height: 1.2;
}

.place-large {
    font-size: 1.1em;
    margin-top: 10px;
}

/* ========================================================
   ENLACE "VER DETALLES" CON FLECHA Y REBOTE
   ======================================================== */
/* Contenedor del enlace que maneja el espacio y el color */
.view-details-container {
    display: flex; /* Permite alinear el texto y la flecha */
    flex-direction: column; /* Apila el texto y la flecha verticalmente */
    align-items: center;
    text-decoration: none; /* Asegura que no haya subrayado */
    color: #666; /* Color gris suave */
    font-size: 0.9em;

    margin-top: 15px; /* Separación del texto de la fecha */
    cursor: pointer;
    transition: color 0.3s;

    transition: border-bottom-color 0.3s;
}

.view-details-text {
     transition: color 0.3s
}

.view-details-container:hover .view-details-text {
    /* Al hacer hover, el texto puede cambiar de color y el borde también */
    color: var(--color-eucalyptus-green);
}

/* Dibuja la flecha (V) separada y controlamos el rebote */
.view-details-arrow-icon {
    display: inline-block;
    width: 20px; /* Tamaño más grande que el anterior */
    height: 20px;
    border: solid #666; /* Color gris oscuro */
    border-width: 0 3px 3px 0; /* Un poco más gruesa */
    transform: rotate(45deg); /* Rota para formar la V */
    margin-top: 10px; /* Espacio entre el texto y la flecha */

    /* CLAVE: Aplicar la animación */
    animation: bounce 1.5s infinite ease-in-out; /* Nombre, duración, repetir, función */

    /* CLAVE: Añadir transición para que el rebote sea suave */
    transition: transform 0.4s ease-in-out, border-color 0.3s; 
}

.view-details-container:hover .view-details-arrow-icon {
    /* CLAVE: Transforma y rebota hacia abajo 4px */
    transform: rotate(45deg) translateY(6px) translateX(6px); 
    border-color: var(--color-eucalyptus-green); /* Opcional: cambia de color al rebotar */
    animation-play-state: paused; 
}


/* ========================================================
   UBICACIÓN (Diseño de Tarjeta)
   ======================================================== */
.location-card.clean-design {
    max-width: 500px;
    margin: 0 auto;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
    text-align: left;
    margin-top: 30px;
}

.location-photo {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #eee;
}

.location-details {
    padding: 20px;
}

.location-name {
    font-family: var(--font-heading);
    font-size: 1.6em;
    color: var(--color-eucalyptus-green);
    margin-bottom: 10px;
}

.location-address, .location-time {
    font-size: 0.95em;
    margin-bottom: 8px;
}
.location-address i, .location-time i {
    color: var(--color-gold);
    margin-right: 8px;
}

.map-buttons {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

/* Base de los botones de mapa */
.btn-map {
    flex-grow: 1;
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: bold;
    color: white;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Transiciones mejoradas */
    border: 1px solid; /* Añadir borde base */
}

/* Los íconos en los botones (si no quieres que sean blancos) */
.btn-map i {
    color: white; /* Por defecto blanco en el fondo oscuro */
    margin-right: 5px;
}

/* Estilos ELEGANTES para Waze y Google Maps */
.waze, .gmaps { 
    background-color: var(--color-eucalyptus-green); 
    border-color: var(--color-eucalyptus-green);
}

/* Efecto Hover: Usar el color secundario (gold) */
.waze:hover, .gmaps:hover { 
    background-color: var(--color-gold);
    color: white;
    border-color: var(--color-gold);
}

.waze:hover i, .gmaps:hover i {
    color: white;
}

/* Mejorando el botón "Explorar en Mapa" */
.btn-map-explore {
    width: 100%;
    padding: 10px;
    margin-top: 15px;
    
    /* CAMBIO CLAVE: Darle un fondo sólido para mayor presencia */
    background-color: var(--color-soft-green); 
    
    /* El texto debe tener buen contraste con el fondo suave */
    color: var(--color-eucalyptus-green); 
    
    /* Borde más firme, usando el color principal */
    border: 1px solid var(--color-eucalyptus-green); 
    
    cursor: pointer;
    font-weight: bold;
    border-radius: 0 0 8px 8px;
    font-family: var(--font-body);
    transition: background-color 0.3s, color 0.3s;
}

/* Efecto Hover: Invertir los colores para un contraste elegante */
.btn-map-explore:hover {
    /* Fondo se vuelve el color principal fuerte */
    background-color: var(--color-eucalyptus-green); 
    
    /* El texto se vuelve blanco para un contraste máximo */
    color: white; 
    
    /* Puedes añadir una sombra sutil para un efecto "elevado" */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.map-preview iframe {
    /* Estilo para que el mapa se vea más limpio */
    border-radius: 0 0 8px 8px !important; 
    border-top: 1px solid #eee !important;
}

/* ========================================================
   FORMULARIOS (RSVP y Deseos) - AJUSTADO PARA BOTONES ELEGANTES
   ======================================================== */
.section-description {
    max-width: 600px;
    margin: -20px auto 30px auto;
    font-style: italic;
    color: #666;
}

.form-container {
    max-width: 450px;
    margin: 0 auto;
    padding: 30px;
    text-align: left;
    border-radius: 8px;
    border: 1px solid #eee;
}

.form-guest-name {
    font-size: 1.2em;
    color: var(--color-eucalyptus-green);
    font-weight: bold;
    margin-bottom: 0;
}

.form-guest-name.marginTop{
    margin-top: 20px;
}
.marginTop50{
    margin-top: 45px !important;
}

.guest-name-highlight {
    font-family: var(--font-heading);
    font-size: 1.05em;
    color: var(--color-eucalyptus-green);
    font-weight: bold;
}

.form-container label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--color-dark);
}

.form-container input[type="text"], 
.form-container select, 
.form-container textarea {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 1em;
    font-family: var(--font-body);
}

.form-guest-block {
    margin-bottom: 25px; /* Separación entre invitados */
    padding: 15px;
    background-color: #f9f9f9; /* Fondo suave para resaltar */
    border-radius: 8px;
    border: 1px solid #eee;
}

.guest-dedication {
    font-style: italic;
    font-size: 0.95em;
    color: var(--color-gold);
    margin-bottom: 10px;
    display: block;
}


/* *** CLASES DE BOTONES DE FORMULARIO RE-ESTILIZADAS *** */
.btn-submit {
    display: block;
    width: 100%;
    padding: 12px 25px;
    margin-top: 30px;
    border: 1px solid var(--color-eucalyptus-green); /* Se añade un borde */
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    font-family: var(--font-body);
    font-size: 1.1em;

    /* Estilo Primario: Fondo Eucalipto, Texto Blanco */
    background-color: var(--color-eucalyptus-green);
    color: white;
    position: relative;
    height: 50px;
    transition: all 0.4s ease;
}
.btn-submit:not(.active) {
	cursor: pointer;
}
.btn-submit .btn {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	line-height: 50px;
	text-align: center;
	z-index: 10;
	opacity: 1;
}

.btn-submit:hover {
    /* Efecto Hover Unificado: Fondo Dorado, Borde Dorado, Texto Eucalipto */
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* === NUEVO: estado de carga === */
.btn-submit.loading {
  background-color: var(--color-gold); /* igual al hover */
  border-color: var(--color-gold);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.30);
  cursor: wait; /* cambia cursor */
}

/* Barra de progreso */
.btn-submit .progress {
  /*Estilos para barra fina en el top*/
  /* position: absolute;
  top: 0;
  left: 0;
  height: 5px; */

  /*Estilos para barra tamaño completo de izquierda a derecha*/
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0; /* cubre todo el botón */

  /*Estilos generales*/
  width: 0%;
  opacity: 0;
  background: var(--color-eucalyptus-green); /* color normal (rojo/verde si lo cambias) */
  transition: width 0.2s ease, background-color 0.3s ease, opacity 0.3s ease;
}

.btn-submit.active .progress {
  opacity: 1;
}

/* cuando está cargando, la barra cambia de color */
.btn-submit.loading .progress {
  background: #b68900; /* dorado más oscuro */
}

/* El botón secundario (Enviar Deseos) usa el color dorado como fondo base */
.btn-submit.secondary {
    background-color: var(--color-gold);
    color: white;
    border-color: var(--color-gold); 
}

.btn-submit.secondary:hover {
    /* Invertir el hover para el secundario */
    background-color: var(--color-eucalyptus-green);
    border-color: var(--color-eucalyptus-green);
}

/* === ESTADO DE CARGA para el SECUNDARIO === */
.btn-submit.secondary.loading {
  background-color: var(--color-eucalyptus-green);
  border-color: var(--color-eucalyptus-green);
}

.btn-submit.secondary.loading .progress {
  background-color: #247e53; /* verde más oscuro para distinguir la carga */
}
/*END: Progress Bar del boton*/

.mensaje-confirmacion {
    width: 100%;
    padding: 15px;
    margin-top: 30px;
    border-radius: 5px;
    background-color: var(--color-soft-green); /* Fondo suave */
    color: var(--color-eucalyptus-green);     /* Texto principal */
    font-weight: bold;
    text-align: center;
    font-size: 1.1em;
    border: 1px solid var(--color-eucalyptus-green);
}


/* ========================================================
   PREGUNTAS Y RESPUESTAS (Q&A) - Diseño Limpio
   ======================================================== */
.section-title-qa {
    font-family: var(--font-heading);
    font-size: 3em;
    letter-spacing: 5px;
    color: var(--color-dark); /* Color más oscuro para destacar */
}

.section-description-qa {
    max-width: 700px;
    margin: -20px auto 40px auto;
    font-size: 0.95em;
}

/* CONTENEDOR FAQ */
.faq-container.clean-design {
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
    border-radius: 10px; /* suaviza bordes del acordeón */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* resalta el acordeón */
}

/* PREGUNTA */
.faq-question {
    width: 100%;
    background-color: white;   /* Fondo por defecto */
    color: var(--color-dark);
    padding: 18px 25px;
    border: none;
    border-bottom: 1px solid #cfcfcf;
    text-align: left;
    font-size: 1.15em;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    font-weight: 600;
    position: relative;
}


/* Indicador + / - */
.faq-question::after {
  content: '+';
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3em;
  transition: transform 0.3s;
}

.faq-question.active::after {
  content: '-';
  transform: translateY(-50%) rotate(180deg);
}

.faq-item:first-child .faq-question {
    border-top: 1px solid #ddd;
}

/* RESPUESTA */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 25px;
    opacity: 0;
    transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.5s ease;
    background-color: var(--color-light);
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px; /* separación visual entre respuestas */
    border-radius: 0 0 10px 10px;
}

/* Cuando la respuesta está abierta */
.faq-answer.open {
    max-height: 1000px; /* suficiente para la mayoría de contenido */
    padding: 15px 25px;
    opacity: 1;
    background-color: #f9f9f9; /* ligera diferenciación de fondo */
}

/* ========================================================
   DESEOS - seccion
   ======================================================== */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* ========================================================
   COUNTDOWN - Diseño Bohemio con Tarjetas
   ======================================================== */

.countdown-section {
    background-color: var(--color-soft-green); 
    padding: 60px 10%; 
    text-align: center;
}

.countdown-section h2 {
    font-family: var(--font-heading);
    font-size: 2.5em;
    margin-bottom: 40px; 
    color: var(--color-eucalyptus-green); 
}

.countdown-timer {
    display: flex;
    justify-content: center;
    gap: 15px; /* Reducimos el espacio un poco */
    max-width: 800px;
    margin: 0 auto;
    flex-wrap: wrap; /* Importante para que salten a la siguiente línea si no caben */
}

/* Estilo de la "Tarjeta" Individual (Responsive) */
.countdown-timer span {
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    
    /* CLAVE: Usamos flex-basis para que cada caja ocupe el 25% menos el espacio entre ellas */
    /* Calcula: (100% - 3*gap) / 4 */
    flex-basis: calc(25% - 11.25px); 
    
    /* Hacemos la altura flexible para que se adapte al contenido */
    height: 120px; 
    padding: 15px 5px; 
    
    background-color: var(--color-light); 
    border: 1px solid rgba(130, 168, 147, 0.3); 
    border-radius: 8px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); 
    
    font-size: 0; 
    overflow: hidden; 
}

/* Estilo del NÚMERO (El valor del tiempo) */
.countdown-timer span::before {
    content: attr(data-time-value); 
    font-family: var(--font-heading);
    font-size: 3em; 
    color: var(--color-gold-accent); 
    line-height: 1;
    margin-bottom: 5px;
    
    /* CLAVE: Transición de Opacidad */
    transition: opacity 0.5s ease-in-out; /* 0.5 segundos es un buen valor suave */
    
    /* Agregamos una posición relativa para evitar que el cambio mueva el layout */
    position: relative; 
}

/* Estilo de la ETIQUETA (Días, Hrs, etc.) */
.countdown-timer span {
    font-family: var(--font-body);
    font-size: 0.8em; /* Letra pequeña */
    color: #888; /* Gris suave */
    text-transform: uppercase;
}

/* ========================================================
   COMPARTIR FOTOS (Galería)
   ======================================================== */
.btn-gallery {
    /* Estilos base: Similares a .btn-map */
    display: inline-block;
    padding: 12px 25px;
    margin-top: 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    
    /* Estilo Primario (Eucalipto) */
    background-color: var(--color-eucalyptus-green);
    color: white;
    border: 1px solid var(--color-eucalyptus-green);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.btn-gallery i {
    margin-right: 8px; /* Espacio para el ícono de la cámara */
    color: white;
}

.btn-gallery:hover {
    /* Efecto Hover Unificado (Dorado) */
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ========================================================
   BOTÓN GALERÍA BLOQUEADO
   ======================================================== */
.estilobloqueado {
    background-color: #ccc !important; /* Fondo gris claro */
    color: #666 !important;            /* Texto gris oscuro */
    border-color: #999 !important;     /* Borde gris */
    cursor: not-allowed !important;    /* Cursor prohibido */
    pointer-events: none;              /* Impide clicks */
    opacity: 0.7;                      /* Un poco transparente para indicar bloqueo */
}

.estilobloqueado i {
    color: #888 !important;            /* Ícono también gris */
}
/* ========================================================
   MENSAJE DE BOTÓN BLOQUEADO
   ======================================================== */
.btn-message {
    font-size: 0.95em;
    color: var(--color-gold); /* Dorado elegante */
    margin-top: 10px;
    text-align: center;
    font-style: italic;
    font-weight: bold;
}

/* ========================================================
   FOOTER
   ======================================================== */
footer {
    padding: 20px 10%; /* Mantener el padding de las secciones */
    text-align: center; /* CLAVE: Centra el texto */
    font-size: 0.9em;
    color: #888;
    background-color: var(--color-light); /* Fondo blanco */
    border-top: 1px solid #f0f0f0;
}

/* ========================================================
   Musica
   ======================================================== */

/* Overlay estilo elegante */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 9999;
  transition: opacity 0.6s ease;
  font-family: "Georgia", serif;
  padding: 1.5rem;
}

.overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.overlay-content {
  width: 100%;
  max-width: 400px; /* controla el ancho máximo del bloque */
  margin: 0 auto;
  animation: fadeInUp 1.5s ease;
}

.overlay-text {
  font-size: 1.3rem;
  line-height: 1.6;
  word-break: break-word;
}


/* Animación suave */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* === Botón de música refinado === */
.music-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px; /* Web: botón a la izquierda */
    font-size: 1.8rem;
    color: white; /* Web: color blanco */
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5; /* Opacidad inicial fija */
    transition: opacity 0.4s ease, transform 0.3s ease;
    z-index: 1000;
}

.music-toggle:hover,
.music-toggle:focus {
    opacity: 1; /* Hover en web: 100% */
    transform: scale(1.05);
}

.music-toggle i {
    pointer-events: none;
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Efecto de salida y entrada cuando cambia */
.music-toggle i.switching {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}

/* Cuando la música está sonando */
.music-toggle.playing {
    animation: pulseMusic 2s infinite ease-in-out;
}

/* Animación de pulso */
@keyframes pulseMusic {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* =====================
   Versión móvil (pantallas pequeñas)
   ===================== */
@media (max-width: 768px) {
    .music-toggle {
        left: auto;
        right: 20px; /* En móvil: botón a la derecha */
        color: #c6a866; /* Dorado suave */
        opacity: 0.5; /* Inicialmente 50% */
    }

    .music-toggle:active {
        opacity: 1; /* Al tocar: 100% */
        transform: scale(1.05); /* Pequeña animación */
    }
}

/* Ajuste de texto del overlay en móvil (por si lo usas) */
@media (max-width: 600px) {
    .overlay-text {
        font-size: 1.1rem;
        line-height: 1.5;
        padding: 0 1rem;
    }
}



@keyframes bounce {
    0%, 100% {
        /* Posición inicial y final: la que has descubierto */
        transform: rotate(45deg) translateY(6px) translateX(6px);
    }
    50% {
        /* Posición intermedia: baja un poco más */
        transform: rotate(45deg) translateY(12px) translateX(12px);
    border-color: var(--color-eucalyptus-green); /* Opcional: cambia de color al rebotar */

    }
}

/* ========================================================
   MEDIA QUERIES (VISTA MÓVIL)
   ======================================================== */
@media (max-width: 900px) {

    html, body {
        overflow-y: visible; /* Permite el scroll general en móvil */
    }

    #app-container {
        flex-direction: column; /* Apilar las secciones */
        height: auto; /* Altura automática para el scroll infinito */
    }

    /* PANEL IZQUIERDO: SE MANTIENE ARRIBA */
    .side-image-container {
        width: 100%;
        position: relative; /* Ya no es sticky */
        height: 100vh; /* Altura fija en móvil para la imagen principal */
    }

    .hero-text {
        bottom: 20px;
        left: 5%;
    }

    .hero-text h1 {
        font-size: 3em;
    }

    /* PANEL DERECHO: CONTENIDO SE DESPLAZA NORMALMENTE */
    .content-panel {
        width: 100%;
        overflow-y: visible; /* Scroll normal */
        padding-top: 0;
    }

    /* Navegación (Hamburguesa) */
    .menu-toggle {
        display: block; /* Mostrar el botón de menú */
        background-color: rgba(0, 0, 0, 0.4);
        padding: 8px;
        border-radius: 5px;
    }
    
    .mobile-menu {
        padding-top: 20px;
        height: 100%;
        position: fixed;
    }

    /* Estilos de Contenido */
    .content-section {
        padding: 40px 8%;
    }
    
    .content-section h2 {
        font-size: 2em;
    }

    .location-card.clean-design {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
  .form-guest-name {
    display: flex;
    flex-direction: column; /* Coloca “Estimado(a)” arriba y el nombre debajo */
    align-items: flex-start; /* Alinea a la izquierda (o usa center si prefieres centrado) */
  }

  .form-guest-name .guest-name-highlight {
    display: block;
    margin-top: 5px; /* Espacio entre Estimado(a) y el nombre */
  }
}

/*Forza los estilos para el dark mode de los navegadores*/
@media (prefers-color-scheme: dark) {
    html, body {
        background-color: var(--color-light) !important;
        color: var(--color-dark) !important;
    }

    footer {
        background-color: var(--color-light) !important;
        color: #888 !important; /* tu color actual de footer */
    }

    .location-card.clean-design,
    .faq-question,
    .faq-answer.open,
    .form-container {
        background-color: var(--color-light) !important;
        color: var(--color-dark) !important;
        border-color: #ddd !important; /* igual que tu borde actual */
    }
}