/* ============================================
   FUENTES PERSONALIZADAS
   ============================================ */

@font-face {
    font-family: 'Faith';
    src: url('../../../assets/fonts/faith.otf') format('opentype'),
         url('../../../assets/fonts/faith.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aston Script';
    src: url('../../../assets/fonts/Aston Script.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   VARIABLES DE COLORES
   ============================================ */

:root {
    /* Rutas de imágenes del sobre */
    --imagen-sobre-desktop: url('../../../assets/images/sobre-desktop.jpg');
    --imagen-sobre-movil: url('../../../assets/images/sobre-movil.jpg');
    
    /* Tipografías */
    --letra-cursiva-1: 'Faith', 'Dancing Script', cursive;        /* Faith - Para nombres de novios */
    --letra-cursiva-2: 'Aston Script', 'Dancing Script', cursive; /* Aston Script */
    --letra-sans-1: 'Montserrat', sans-serif;                     /* Montserrat - Para fecha y clic para abrir */
    --letra-sans-2: 'Creato Display', sans-serif;                 /* Creato Display */
    --letra-sans-3: 'Poppins', sans-serif;                        /* Poppins */
    
    /* Colores Generales */
    --color-principal: #715E32;     /* Color principal del diseño */
    --color-secundario: #A78B49;   /* Color secundario del diseño */
    --color-terciario: #C5AF7C;     /* Color terciario */
    --color-cuarto: #DED2B5;       /* Color cuarto */
    --color-quinto: #F6F2FA;       /* Color quinto */
    --color-texto-principal: #715E32; /* Color de texto principal */
    --color-texto-secundario: #A78B49; /* Color de texto secundario */
    --color-botones: #A78B49;      /* Color de botones */
    --color-botones-hover: #715E32; /* Color hover de botones */
    --color-personalizado-1: #FFFFFF; /* Color personalizado 1 */
    --color-personalizado-2: #F5F1E8; /* Color personalizado 2 */
    --color-personalizado-3: #DED2B5; /* Color personalizado 3 */
    --color-personalizado-4: #C5AF7C; /* Color personalizado 4 */
    --color-fondo: #F5F1E8;          /* Color de fondo */
    
    
    /* Sección 3 - Datos del Evento - Variables modificables */
    --section-3-bg-overlay: rgba(0, 0, 0, 0.4); /* Overlay del fondo */
    --section-3-initial-scale: 0.8;            /* Escala inicial (zoom out) */
    --section-3-initial-opacity: 0;            /* Opacidad inicial */
    --section-3-final-opacity: 1;              /* Opacidad final */
    --section-3-parallax-speed: 0.5;           /* Velocidad del parallax (0-1) */
    --section-3-text-color: #FFFFFF;           /* Color del texto */
    --section-3-fecha-font-size-dia: clamp(60px, 12vw, 120px); /* Tamaño del día */
    --section-3-fecha-font-size-texto: clamp(18px, 3vw, 32px); /* Tamaño texto fecha */
    --section-3-direccion-font-size: clamp(16px, 2.5vw, 24px); /* Tamaño dirección */
    --section-3-padding-vertical: 80px;        /* Padding vertical (px) */
    --section-3-padding-horizontal: 40px;    /* Padding horizontal (px) */
    
    /* Sección 4 - Itinerario - Variables modificables */
    --section-4-bg-color: #7B846D;           /* Color de fondo de la sección */
    --section-4-text-color: #FFFFFF;         /* Color del texto principal */
    --section-4-text-color-secondary: rgba(255, 255, 255, 0.7); /* Color del texto secundario */
    --section-4-divider-color: #A78B49;       /* Color del divisor vertical */
    --section-4-divider-opacity: 0.8;         /* Opacidad del divisor (0-1) */
    
    /* Fuentes */
    --section-4-date-font-family: var(--letra-sans-1); /* Familia de fuente de la fecha */
    --section-4-time-font-family: var(--letra-sans-1); /* Familia de fuente de la hora */
    --section-4-title-font-family: var(--letra-sans-1); /* Familia de fuente del título */
    --section-4-subtitle-font-family: var(--letra-cursiva-2); /* Familia de fuente del subtítulo */
    
    /* Tamaños de fuente */
    --section-4-date-size: clamp(14px, 1.5vw, 18px); /* Tamaño de la fecha */
    --section-4-time-size: clamp(32px, 4vw, 48px); /* Tamaño de la hora */
    --section-4-title-size: clamp(24px, 3vw, 36px); /* Tamaño del título */
    --section-4-subtitle-size: clamp(16px, 2vw, 22px); /* Tamaño del subtítulo */
    
    /* Pesos de fuente */
    --section-4-date-weight: 300;            /* Peso de la fuente de la fecha (100-900) */
    --section-4-time-weight: 400;            /* Peso de la fuente de la hora (100-900) */
    --section-4-title-weight: 600;           /* Peso de la fuente del título (100-900) */
    --section-4-subtitle-weight: 400;         /* Peso de la fuente del subtítulo (100-900) */
    
    /* Espaciado y separaciones */
    --section-4-padding-vertical: 80px;       /* Padding vertical (px) */
    --section-4-padding-horizontal: 60px;     /* Padding horizontal (px) */
    --section-4-item-gap: 60px;              /* Espacio entre items (px) */
    --section-4-item-gap-horizontal: 40px;    /* Espacio horizontal entre elementos del item (px) */
    --section-4-left-gap: 10px;              /* Espacio entre fecha y hora (px) */
    --section-4-right-gap: 8px;               /* Espacio entre título y subtítulo (px) */
    
    /* Layout y dimensiones */
    --section-4-container-max-width: 1200px;  /* Ancho máximo del contenedor (px) */
    --section-4-left-width: 200px;            /* Ancho del contenedor izquierdo (px) */
    --section-4-right-width: 300px;          /* Ancho del contenedor derecho (px) */
    
    /* Divisor */
    --section-4-divider-width: 1px;          /* Ancho del divisor (px) */
    --section-4-divider-height: 80px;         /* Altura del divisor (px) */
    
    /* Alineaciones */
    --section-4-item-justify: center;        /* Justificación de items (flex-start, center, flex-end) */
    --section-4-item-align: center;           /* Alineación vertical de items (flex-start, center, flex-end) */
    --section-4-left-text-align: right;      /* Alineación de texto izquierdo (left, center, right) */
    --section-4-right-text-align: left;      /* Alineación de texto derecho (left, center, right) */
    --section-4-left-align: flex-end;        /* Alineación del contenedor izquierdo (flex-start, center, flex-end) */
    --section-4-right-align: flex-start;      /* Alineación del contenedor derecho (flex-start, center, flex-end) */
    
    /* Line-height */
    --section-4-date-line-height: 1.2;       /* Altura de línea de la fecha */
    --section-4-time-line-height: 1;          /* Altura de línea de la hora */
    --section-4-title-line-height: 1.3;      /* Altura de línea del título */
    --section-4-subtitle-line-height: 1.4;   /* Altura de línea del subtítulo */
    
    /* Letter-spacing */
    --section-4-date-letter-spacing: 0px;    /* Espaciado entre letras de la fecha */
    --section-4-time-letter-spacing: 0px;    /* Espaciado entre letras de la hora */
    --section-4-title-letter-spacing: 0px;   /* Espaciado entre letras del título */
    --section-4-subtitle-letter-spacing: 0px; /* Espaciado entre letras del subtítulo */
    
    /* Variables responsive móvil */
    --section-4-padding-vertical-mobile: 60px; /* Padding vertical en móvil (px) */
    --section-4-padding-horizontal-mobile: 20px; /* Padding horizontal en móvil (px) */
    --section-4-item-gap-mobile: 40px;       /* Espacio entre items en móvil (px) */
    --section-4-item-gap-horizontal-mobile: 20px; /* Espacio horizontal entre elementos en móvil (px) */
    --section-4-left-width-mobile: auto;     /* Ancho del contenedor izquierdo en móvil */
    --section-4-divider-width-mobile: 100%;   /* Ancho del divisor en móvil */
    --section-4-divider-height-mobile: 1px;   /* Altura del divisor en móvil */
    
    /* Botón Google Calendar - Variables modificables */
    --section-4-calendar-button-bg: #FFFFFF;      /* Color de fondo del botón */
    --section-4-calendar-button-color: #7B846D;   /* Color del texto del botón */
    --section-4-calendar-button-hover-bg: #F5F1E8; /* Color de fondo al hover */
    --section-4-calendar-button-padding: 12px 24px; /* Padding del botón */
    --section-4-calendar-button-font-size: clamp(14px, 1.5vw, 16px); /* Tamaño de fuente */
    --section-4-calendar-button-gap: 40px;         /* Espacio superior del botón */
    --section-4-calendar-button-border-radius: 4px; /* Radio de borde */
    --section-4-calendar-button-icon-size: 20px;   /* Tamaño del icono */
    --section-4-calendar-button-gap-icon: 8px;      /* Espacio entre icono y texto */
    
    /* Sección 5 - Imagen 16:9 - Variables modificables */
    --section-5-bg-color: transparent;        /* Color de fondo de la sección */
    --section-5-padding-vertical: 0px;        /* Padding vertical (px) */
    --section-5-padding-horizontal: 0px;       /* Padding horizontal (px) */
    --section-5-container-max-width: 100%;     /* Ancho máximo del contenedor */
    --section-5-aspect-ratio: 16 / 9;          /* Relación de aspecto (16:9) */
    --section-5-object-fit: cover;              /* Ajuste de la imagen (cover, contain, fill) */
    --section-5-object-position: center;       /* Posición de la imagen (center, top, bottom, etc.) */
    /* Variables responsive móvil */
    --section-5-padding-vertical-mobile: 0px;  /* Padding vertical en móvil (px) */
    --section-5-padding-horizontal-mobile: 0px; /* Padding horizontal en móvil (px) */
    
    /* Sección 6 - Dress Code - Variables modificables */
    --section-6-bg-color: #F5F1E8;             /* Color de fondo de la sección */
    --section-6-text-color: #715E32;           /* Color del texto principal */
    --section-6-text-color-secondary: #A78B49; /* Color del texto secundario */
    --section-6-padding-vertical: 80px;       /* Padding vertical (px) */
    --section-6-padding-horizontal: 60px;     /* Padding horizontal (px) */
    --section-6-container-max-width: 1200px;   /* Ancho máximo del contenedor (px) */
    
    /* Título y subtítulo */
    --section-6-title-font-family: var(--letra-sans-1); /* Familia de fuente del título */
    --section-6-title-size: clamp(36px, 5vw, 48px);     /* Tamaño del título */
    --section-6-title-weight: 600;                     /* Peso del título */
    --section-6-subtitle-font-family: var(--letra-cursiva-2); /* Familia de fuente del subtítulo */
    --section-6-subtitle-size: clamp(18px, 2.5vw, 24px); /* Tamaño del subtítulo */
    --section-6-subtitle-weight: 400;                   /* Peso del subtítulo */
    --section-6-title-gap: 20px;                       /* Espacio entre título y subtítulo */
    --section-6-subtitle-gap: 40px;                     /* Espacio entre subtítulo y aviso */
    
    /* Aviso de colores */
    --section-6-warning-font-family: var(--letra-sans-1); /* Familia de fuente del aviso */
    --section-6-warning-size: clamp(14px, 1.8vw, 16px);   /* Tamaño del texto del aviso */
    --section-6-warning-weight: 400;                      /* Peso del texto del aviso */
    --section-6-warning-gap: 20px;                       /* Espacio entre texto y círculos */
    --section-6-colors-gap: 50px;                        /* Espacio entre aviso y galería */
    
    /* Círculos de colores */
    --section-6-color-circle-size: 50px;                /* Tamaño de los círculos (px) */
    --section-6-color-circle-gap: 15px;                  /* Espacio entre círculos (px) */
    --section-6-color-circle-border: 2px solid #FFFFFF;   /* Borde de los círculos */
    --section-6-color-circle-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra de los círculos */
    
    /* Galería */
    --section-6-gallery-gap: 15px;                       /* Espacio entre imágenes (px) */
    --section-6-gallery-item-min-height: 250px;          /* Altura mínima de las tarjetas (px) */
    --section-6-gallery-animation-delay: 0.1s;          /* Delay entre animaciones (s) */
    --section-6-gallery-animation-duration: 0.6s;         /* Duración de la animación (s) */
    
    /* Variables responsive móvil */
    --section-6-padding-vertical-mobile: 60px;           /* Padding vertical en móvil (px) */
    --section-6-padding-horizontal-mobile: 20px;          /* Padding horizontal en móvil (px) */
    --section-6-gallery-gap-mobile: 10px;                 /* Espacio entre imágenes en móvil (px) */
    --section-6-color-circle-size-mobile: 40px;           /* Tamaño de círculos en móvil (px) */
    
    /* Sección 7 - Ubicación - Variables modificables */
    --section-7-bg-color: #FFFFFF;                      /* Color de fondo de la sección */
    --section-7-text-color: #715E32;                     /* Color del texto principal */
    --section-7-text-color-secondary: #A78B49;          /* Color del texto secundario */
    --section-7-padding-vertical: 80px;                 /* Padding vertical (px) */
    --section-7-padding-horizontal: 60px;               /* Padding horizontal (px) */
    --section-7-container-max-width: 1200px;            /* Ancho máximo del contenedor (px) */
    
    /* Título y subtítulo */
    --section-7-title-font-family: var(--letra-cursiva-2); /* Familia de fuente del título */
    --section-7-title-size: clamp(36px, 5vw, 48px);     /* Tamaño del título */
    --section-7-title-weight: 400;                      /* Peso del título */
    --section-7-subtitle-font-family: var(--letra-sans-1); /* Familia de fuente del subtítulo */
    --section-7-subtitle-size: clamp(18px, 2.5vw, 24px); /* Tamaño del subtítulo */
    --section-7-subtitle-weight: 400;                     /* Peso del subtítulo */
    --section-7-title-gap: 20px;                        /* Espacio entre título y subtítulo */
    --section-7-subtitle-gap: 40px;                     /* Espacio entre subtítulo y botón */
    
    /* Botón Google Maps */
    --section-7-button-bg: #715E32;                     /* Color de fondo del botón */
    --section-7-button-color: #FFFFFF;                  /* Color del texto del botón */
    --section-7-button-hover-bg: #A78B49;               /* Color de fondo al hover */
    --section-7-button-padding: 14px 28px;               /* Padding del botón */
    --section-7-button-font-size: clamp(16px, 2vw, 18px); /* Tamaño de fuente */
    --section-7-button-border-radius: 8px;               /* Radio de borde */
    --section-7-button-icon-size: 20px;                  /* Tamaño del icono */
    --section-7-button-gap-icon: 10px;                   /* Espacio entre icono y texto */
    --section-7-button-pulse-scale: 1.05;                /* Escala del efecto pulse */
    --section-7-button-pulse-duration: 2s;               /* Duración del efecto pulse */
    
    /* Variables responsive móvil */
    --section-7-padding-vertical-mobile: 60px;          /* Padding vertical en móvil (px) */
    --section-7-padding-horizontal-mobile: 20px;        /* Padding horizontal en móvil (px) */
    
    /* Sección 8 - Confirmación de Asistencia - Variables modificables */
    --section-8-bg-color: #F5F1E8;                      /* Color de fondo de la sección */
    --section-8-text-color: #715E32;                     /* Color del texto principal */
    --section-8-text-color-secondary: #A78B49;          /* Color del texto secundario */
    --section-8-padding-vertical: 80px;                 /* Padding vertical (px) */
    --section-8-padding-horizontal: 60px;               /* Padding horizontal (px) */
    --section-8-container-max-width: 1200px;            /* Ancho máximo del contenedor (px) */
    --section-8-gap-columns: 60px;                      /* Espacio entre columnas (px) */
    
    /* Columna izquierda - Slider */
    --section-8-slider-width: 50%;                      /* Ancho de la columna izquierda */
    --section-8-slider-height: 500px;                    /* Altura del slider (px) */
    --section-8-slider-border-radius: 8px;              /* Radio de borde del slider */
    --section-8-slide-transition: 1s ease-in-out;       /* Transición del slide */
    
    /* Columna derecha - Formulario */
    --section-8-form-width: 50%;                        /* Ancho de la columna derecha */
    --section-8-guest-name-font-family: var(--letra-sans-1); /* Familia de fuente del nombre */
    --section-8-guest-name-size: clamp(24px, 3vw, 32px); /* Tamaño del nombre */
    --section-8-guest-name-weight: 600;                  /* Peso del nombre */
    --section-8-confirm-text-font-family: var(--letra-sans-1); /* Familia de fuente del texto */
    --section-8-confirm-text-size: clamp(18px, 2.5vw, 22px); /* Tamaño del texto */
    --section-8-confirm-text-weight: 400;                /* Peso del texto */
    --section-8-admissions-font-family: var(--letra-sans-1); /* Familia de fuente de admisiones */
    --section-8-admissions-size: clamp(16px, 2vw, 18px); /* Tamaño de admisiones */
    --section-8-form-gap: 30px;                          /* Espacio entre elementos del formulario */
    
    /* Botones */
    --section-8-button-padding: 14px 28px;              /* Padding de los botones */
    --section-8-button-font-size: clamp(16px, 2vw, 18px); /* Tamaño de fuente de los botones */
    --section-8-button-border-radius: 8px;               /* Radio de borde de los botones */
    --section-8-button-gap: 15px;                       /* Espacio entre botones */
    --section-8-button-yes-bg: #715E32;                 /* Color de fondo botón "Si asistiré" */
    --section-8-button-yes-color: #FFFFFF;               /* Color del texto botón "Si asistiré" */
    --section-8-button-yes-hover-bg: #A78B49;           /* Color hover botón "Si asistiré" */
    --section-8-button-no-bg: #FFFFFF;                  /* Color de fondo botón "No asistiré" */
    --section-8-button-no-color: #715E32;                /* Color del texto botón "No asistiré" */
    --section-8-button-no-border: 2px solid #715E32;     /* Borde botón "No asistiré" */
    --section-8-button-no-hover-bg: #F5F1E8;           /* Color hover botón "No asistiré" */
    
    /* Modales */
    --section-8-modal-bg: rgba(0, 0, 0, 0.7);           /* Fondo del modal */
    --section-8-modal-content-bg: #FFFFFF;              /* Fondo del contenido del modal */
    --section-8-modal-content-max-width: 500px;         /* Ancho máximo del contenido */
    --section-8-modal-content-padding: 40px;             /* Padding del contenido */
    --section-8-modal-content-border-radius: 12px;      /* Radio de borde del contenido */
    --section-8-modal-title-size: clamp(24px, 3vw, 28px); /* Tamaño del título del modal */
    --section-8-modal-text-size: clamp(16px, 2vw, 18px); /* Tamaño del texto del modal */
    --section-8-modal-textarea-height: 100px;           /* Altura del textarea */
    --section-8-modal-textarea-padding: 12px;           /* Padding del textarea */
    --section-8-modal-textarea-border: 1px solid #DED2B5; /* Borde del textarea */
    --section-8-modal-textarea-border-radius: 6px;       /* Radio de borde del textarea */
    --section-8-modal-buttons-gap: 15px;                /* Espacio entre botones del modal */
    
    /* Variables responsive móvil */
    --section-8-padding-vertical-mobile: 60px;           /* Padding vertical en móvil (px) */
    --section-8-padding-horizontal-mobile: 20px;         /* Padding horizontal en móvil (px) */
    --section-8-gap-columns-mobile: 30px;                /* Espacio entre columnas en móvil (px) */
    --section-8-slider-height-mobile: 300px;             /* Altura del slider en móvil (px) */
    
    /* Sección 9 - Obsequio - Variables modificables */
    --section-9-bg-color: #7B846D;                      /* Color de fondo de la sección (mismo que sección 4) */
    --section-9-text-color: #FFFFFF;                    /* Color del texto principal */
    --section-9-text-color-secondary: rgba(255, 255, 255, 0.8); /* Color del texto secundario */
    --section-9-padding-vertical: 80px;                  /* Padding vertical (px) */
    --section-9-padding-horizontal: 60px;                /* Padding horizontal (px) */
    --section-9-container-max-width: 1200px;            /* Ancho máximo del contenedor (px) */
    
    /* Título */
    --section-9-title-font-family: var(--letra-cursiva-2); /* Familia de fuente del título */
    --section-9-title-size: clamp(36px, 5vw, 48px);     /* Tamaño del título */
    --section-9-title-weight: 400;                       /* Peso del título */
    --section-9-title-gap: 50px;                        /* Espacio entre título y opciones */
    
    /* Tarjetas de opciones */
    --section-9-options-gap: 40px;                       /* Espacio entre tarjetas (px) */
    --section-9-card-bg: rgba(255, 255, 255, 0.1);      /* Fondo de las tarjetas */
    --section-9-card-border: 1px solid rgba(255, 255, 255, 0.2); /* Borde de las tarjetas */
    --section-9-card-border-radius: 12px;                /* Radio de borde de las tarjetas */
    --section-9-card-padding: 30px;                     /* Padding de las tarjetas */
    --section-9-card-gap: 20px;                          /* Espacio interno de las tarjetas */
    
    /* Iconos */
    --section-9-icon-color: #FFFFFF;                     /* Color de los iconos */
    --section-9-icon-size: 48px;                        /* Tamaño de los iconos (px) */
    --section-9-icon-gap: 20px;                          /* Espacio entre icono y título */
    
    /* Títulos de opciones */
    --section-9-option-title-font-family: var(--letra-sans-1); /* Familia de fuente del título de opción */
    --section-9-option-title-size: clamp(20px, 2.5vw, 24px); /* Tamaño del título de opción */
    --section-9-option-title-weight: 600;                /* Peso del título de opción */
    
    /* Información bancaria */
    --section-9-info-font-family: var(--letra-sans-1);   /* Familia de fuente de la información */
    --section-9-info-size: clamp(14px, 1.8vw, 16px);    /* Tamaño de la información */
    --section-9-info-weight: 400;                        /* Peso de la información */
    --section-9-info-gap: 12px;                          /* Espacio entre líneas de información */
    --section-9-label-weight: 500;                      /* Peso de las etiquetas */
    
    /* Variables responsive móvil */
    --section-9-padding-vertical-mobile: 60px;           /* Padding vertical en móvil (px) */
    --section-9-padding-horizontal-mobile: 20px;         /* Padding horizontal en móvil (px) */
    --section-9-options-gap-mobile: 30px;                /* Espacio entre tarjetas en móvil (px) */
    --section-9-card-padding-mobile: 25px;                /* Padding de tarjetas en móvil (px) */
    
    /* Sección 10 - Playlist Musical - Variables modificables */
    --section-10-bg-color: #FFFFFF;                      /* Color de fondo de la sección */
    --section-10-text-color: #715E32;                    /* Color del texto principal */
    --section-10-text-color-secondary: #A78B49;          /* Color del texto secundario */
    --section-10-padding-vertical: 80px;                 /* Padding vertical (px) */
    --section-10-padding-horizontal: 60px;               /* Padding horizontal (px) */
    --section-10-container-max-width: 1000px;            /* Ancho máximo del contenedor (px) */
    
    /* Título y subtítulo */
    --section-10-title-font-family: var(--letra-cursiva-2); /* Familia de fuente del título */
    --section-10-title-size: clamp(36px, 5vw, 48px);    /* Tamaño del título */
    --section-10-title-weight: 400;                      /* Peso del título */
    --section-10-subtitle-font-family: var(--letra-sans-1); /* Familia de fuente del subtítulo */
    --section-10-subtitle-size: clamp(18px, 2.5vw, 24px); /* Tamaño del subtítulo */
    --section-10-subtitle-weight: 400;                   /* Peso del subtítulo */
    --section-10-title-gap: 20px;                        /* Espacio entre título y subtítulo */
    --section-10-subtitle-gap: 40px;                      /* Espacio entre subtítulo y formulario */
    
    /* Formulario */
    --section-10-form-gap: 20px;                         /* Espacio entre filas del formulario */
    --section-10-input-gap: 20px;                        /* Espacio entre inputs */
    --section-10-label-font-family: var(--letra-sans-1);  /* Familia de fuente de las etiquetas */
    --section-10-label-size: clamp(14px, 1.8vw, 16px);   /* Tamaño de las etiquetas */
    --section-10-label-weight: 500;                       /* Peso de las etiquetas */
    --section-10-input-font-family: var(--letra-sans-1);  /* Familia de fuente de los inputs */
    --section-10-input-size: clamp(16px, 2vw, 18px);     /* Tamaño de los inputs */
    --section-10-input-padding: 12px 16px;               /* Padding de los inputs */
    --section-10-input-border: 1px solid #DED2B5;        /* Borde de los inputs */
    --section-10-input-border-radius: 8px;                /* Radio de borde de los inputs */
    --section-10-input-focus-border: 2px solid #A78B49;  /* Borde de los inputs al focus */
    
    /* Botón agregar */
    --section-10-button-bg: #715E32;                     /* Color de fondo del botón */
    --section-10-button-color: #FFFFFF;                  /* Color del texto del botón */
    --section-10-button-hover-bg: #A78B49;              /* Color de fondo al hover */
    --section-10-button-padding: 14px 28px;              /* Padding del botón */
    --section-10-button-font-size: clamp(16px, 2vw, 18px); /* Tamaño de fuente del botón */
    --section-10-button-border-radius: 8px;              /* Radio de borde del botón */
    --section-10-button-gap: 10px;                       /* Espacio entre icono y texto */
    
    /* Playlist */
    --section-10-playlist-gap: 40px;                     /* Espacio entre formulario y playlist */
    --section-10-playlist-bg: #F5F1E8;                   /* Fondo de la playlist */
    --section-10-playlist-border-radius: 12px;           /* Radio de borde de la playlist */
    --section-10-playlist-padding: 30px;                 /* Padding de la playlist */
    --section-10-playlist-header-gap: 10px;              /* Espacio en el header de la playlist */
    --section-10-playlist-title-size: clamp(20px, 2.5vw, 24px); /* Tamaño del título de la playlist */
    --section-10-playlist-subtitle-size: clamp(14px, 1.8vw, 16px); /* Tamaño del subtítulo de la playlist */
    --section-10-playlist-items-gap: 12px;               /* Espacio entre items de la playlist */
    --section-10-playlist-item-padding: 16px;            /* Padding de cada item */
    --section-10-playlist-item-bg: #FFFFFF;              /* Fondo de cada item */
    --section-10-playlist-item-border-radius: 8px;       /* Radio de borde de cada item */
    --section-10-playlist-item-title-size: clamp(16px, 2vw, 18px); /* Tamaño del título de la canción */
    --section-10-playlist-item-artist-size: clamp(14px, 1.8vw, 16px); /* Tamaño del artista */
    --section-10-playlist-item-number-size: clamp(18px, 2.2vw, 20px); /* Tamaño del número */
    
    /* Variables responsive móvil */
    --section-10-padding-vertical-mobile: 60px;          /* Padding vertical en móvil (px) */
    --section-10-padding-horizontal-mobile: 20px;        /* Padding horizontal en móvil (px) */
    --section-10-input-gap-mobile: 15px;                 /* Espacio entre inputs en móvil (px) */
    --section-10-playlist-padding-mobile: 20px;          /* Padding de playlist en móvil (px) */
    
    /* Sección 11 - Información Adicional (Tabs) - Variables modificables */
    --section-11-bg-color: #F5F1E8;                      /* Color de fondo de la sección */
    --section-11-text-color: #715E32;                     /* Color del texto principal */
    --section-11-text-color-secondary: #A78B49;          /* Color del texto secundario */
    --section-11-padding-vertical: 80px;                 /* Padding vertical (px) */
    --section-11-padding-horizontal: 60px;               /* Padding horizontal (px) */
    --section-11-container-max-width: 1000px;            /* Ancho máximo del contenedor (px) */
    
    /* Título */
    --section-11-title-font-family: var(--letra-cursiva-2); /* Familia de fuente del título */
    --section-11-title-size: clamp(36px, 5vw, 48px);     /* Tamaño del título */
    --section-11-title-weight: 400;                      /* Peso del título */
    --section-11-title-gap: 40px;                        /* Espacio entre título y tabs */
    
    /* Tabs */
    --section-11-tabs-bg: #FFFFFF;                        /* Fondo de las tabs */
    --section-11-tabs-border-radius: 12px;               /* Radio de borde de las tabs */
    --section-11-tabs-padding: 30px;                     /* Padding de las tabs */
    --section-11-tab-button-padding: 12px 24px;         /* Padding de los botones de tab */
    --section-11-tab-button-font-size: clamp(16px, 2vw, 18px); /* Tamaño de fuente de los botones */
    --section-11-tab-button-weight: 500;                  /* Peso de fuente de los botones */
    --section-11-tab-button-active-bg: #715E32;          /* Fondo del botón activo */
    --section-11-tab-button-active-color: #FFFFFF;        /* Color del texto del botón activo */
    --section-11-tab-button-inactive-bg: transparent;    /* Fondo del botón inactivo */
    --section-11-tab-button-inactive-color: #A78B49;     /* Color del texto del botón inactivo */
    --section-11-tab-button-hover-bg: rgba(113, 94, 50, 0.1); /* Fondo al hover */
    --section-11-tab-button-border-bottom: 3px solid transparent; /* Borde inferior de los botones */
    --section-11-tab-button-active-border: 3px solid #715E32; /* Borde del botón activo */
    --section-11-tabs-header-gap: 0;                      /* Espacio entre botones */
    --section-11-tabs-header-border: 1px solid rgba(113, 94, 50, 0.1); /* Borde del header */
    
    /* Paneles de contenido */
    --section-11-panel-padding: 30px 0;                  /* Padding de los paneles */
    --section-11-panel-title-size: clamp(24px, 3vw, 28px); /* Tamaño del título del panel */
    --section-11-panel-title-weight: 600;                 /* Peso del título del panel */
    --section-11-panel-text-size: clamp(16px, 2vw, 18px); /* Tamaño del texto del panel */
    --section-11-panel-text-weight: 400;                   /* Peso del texto del panel */
    --section-11-panel-content-gap: 20px;                 /* Espacio entre título y texto */
    
    /* Variables responsive móvil */
    --section-11-padding-vertical-mobile: 60px;          /* Padding vertical en móvil (px) */
    --section-11-padding-horizontal-mobile: 20px;        /* Padding horizontal en móvil (px) */
    --section-11-tabs-padding-mobile: 20px;               /* Padding de tabs en móvil (px) */
    --section-11-tab-button-padding-mobile: 10px 16px;   /* Padding de botones en móvil (px) */
    
    /* Footer - Variables modificables */
    --footer-bg-color: #715E32;                          /* Color de fondo del footer */
    --footer-text-color: #FFFFFF;                        /* Color del texto principal */
    --footer-text-color-secondary: rgba(255, 255, 255, 0.8); /* Color del texto secundario */
    --footer-padding-vertical: 40px;                     /* Padding vertical (px) */
    --footer-padding-horizontal: 60px;                   /* Padding horizontal (px) */
    --footer-container-max-width: 1200px;                /* Ancho máximo del contenedor (px) */
    
    /* Nombres de novios */
    --footer-names-font-family: var(--letra-cursiva-2);   /* Familia de fuente de los nombres */
    --footer-names-size: clamp(28px, 4vw, 36px);         /* Tamaño de los nombres */
    --footer-names-weight: 400;                           /* Peso de los nombres */
    --footer-names-gap: 15px;                             /* Espacio entre nombres y copyright */
    
    /* Copyright */
    --footer-copyright-font-family: var(--letra-sans-1); /* Familia de fuente del copyright */
    --footer-copyright-size: clamp(12px, 1.5vw, 14px);  /* Tamaño del copyright */
    --footer-copyright-weight: 400;                      /* Peso del copyright */
    --footer-link-color: #FFFFFF;                         /* Color del enlace */
    --footer-link-hover-color: #C5AF7C;                  /* Color del enlace al hover */
    --footer-link-decoration: underline;                 /* Decoración del enlace */
    
    /* Variables responsive móvil */
    --footer-padding-vertical-mobile: 30px;               /* Padding vertical en móvil (px) */
    --footer-padding-horizontal-mobile: 20px;            /* Padding horizontal en móvil (px) */
}

/* ============================================
   RESET Y BASE
   ============================================ */

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

html {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    font-family: 'Georgia', 'Times New Roman', serif;
    background: #F5F1E8; /* Beige elegante para toda la página */
    color: var(--color-texto-principal);
    line-height: 1.6;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
}

/* ============================================
   SOBRE (ENVELOPE) - ANIMACIÓN
   ============================================ */

.envelope-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-fondo, #F8F9FA);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    cursor: pointer;
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s ease-out;
}

.envelope-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Wrapper para las imágenes del sobre */
.envelope-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Imagen para desktop - visible solo en pantallas grandes */
.envelope-desktop {
    display: block;
    background-image: var(--imagen-sobre-desktop);
}

.envelope-mobile {
    display: none;
}

/* Nombres de los novios (arriba de la imagen) */
.envelope-names {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--letra-cursiva-2);
    font-size: clamp(36px, 7vw, 70px);
    color: var(--color-personalizado-1, #FFFFFF);
    text-align: center;
    font-weight: 400;
    opacity: 0.95;
    letter-spacing: 0px;
    text-shadow: 
        2px 2px 6px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(0, 0, 0, 0.3);
    z-index: 10;
    white-space: nowrap;
    width: 100%;
    pointer-events: none;
}

/* Fecha del evento (abajo de la imagen) */
.envelope-date {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--letra-sans-1);
    font-size: clamp(16px, 3vw, 24px);
    color: var(--color-personalizado-1, #FFFFFF);
    text-align: center;
    font-weight: 400;
    opacity: 0.95;
    letter-spacing: 3px;
    text-shadow: 
        2px 2px 6px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(0, 0, 0, 0.3);
    z-index: 10;
    white-space: nowrap;
    width: 100%;
    pointer-events: none;
}



/* Instrucción para abrir */
.envelope-instruction {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--letra-sans-1);
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(14px, 2vw, 18px);
    font-style: italic;
    animation: pulse 2s infinite;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    z-index: 10;
    font-weight: 300;
    letter-spacing: 1px;
    pointer-events: none;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* ============================================
   CONTENIDO DE LA INVITACIÓN (oculto inicialmente)
   ============================================ */

.template-container {
    display: none;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: transparent; /* Hereda el fondo beige del body */
    min-height: 100vh;
    box-sizing: border-box;
}

.template-container.show {
    display: block;
    animation: fadeIn 0.8s ease;
}

/* ============================================
   SECCIÓN 1: Encabezado con imagen de fondo
   ============================================ */

.section-1 {
    position: relative;
    width: 100%;
    min-height: 120vh;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}

/* Imagen de fondo */
.section-1-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../design-1/assets/section-1/img-1.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    z-index: 1;
    transition: opacity 0.5s ease;
}

/* Overlay beige/sepia para mezclar con el fondo */
.section-1-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(245, 241, 232, 0.3);
    z-index: 0;
    transition: opacity 1s ease;
}


/* Contenido de la sección 1 */
.section-1-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

/* Nombres de los novios */
.section-1-nombres {
    font-family: var(--letra-cursiva-2);
    font-size: clamp(48px, 8vw, 75px);
    color: #A78B49;
    font-weight: 400;
    margin: 0;
    padding: 0;
    letter-spacing: 0px;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5);
}

/* Fecha del evento */
.section-1-fecha {
    font-family: var(--letra-sans-1);
    font-size: clamp(18px, 3vw, 28px);
    color: #808080;
    font-weight: 300;
    margin: 0;
    padding: 0;
    letter-spacing: 1px;
    text-align: center;
 
}

/* Contenedor del conteo regresivo */
.section-1-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

/* Item del conteo regresivo */
.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Número del conteo */
.countdown-number {
    font-family: var(--letra-sans-1);
    font-size: clamp(32px, 5vw, 56px);
    color: #C5AF7C;
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.5);
    letter-spacing: 0;
}

/* Etiqueta del conteo (D, H, M, S) */
.countdown-label {
    font-family: var(--letra-sans-1);
    font-size: clamp(12px, 1.5vw, 16px);
    color: #C5AF7C;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Separador del conteo */
.countdown-separator {
    font-family: var(--letra-sans-1);
    font-size: clamp(32px, 5vw, 56px);
    color: #C5AF7C;
    font-weight: 300;
    margin: 0 5px;
}

/* Modo portrait (imagen vertical) - Desktop */
.section-1.portrait .section-1-background {
    background-size: cover;
    background-position: center;
    opacity: 0.7;
}

.section-1.portrait .section-1-overlay {
    background: rgba(245, 241, 232, 0.4);
}

/* Modo landscape (imagen horizontal) - Desktop */
.section-1.landscape .section-1-background {
    background-size: cover;
    background-position: center;
    opacity: 0.8;
}

.section-1.landscape .section-1-overlay {
    background: rgba(245, 241, 232, 0.3);
}

/* Espaciador después de la sección 1 para visualizar el efecto de acuarela */
.section-1-spacer {
    width: 100%;
    height: 40px;
    background: #F5F1E8;
    margin: 0;
    padding: 0;
}

/* ============================================
   SECCIÓN 2: Invitación
   ============================================ */

.section-2 {
    position: relative;
    width: 100%;
    min-height: auto;
    padding: 50px 40px 200px 40px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: var(--color-fondo, #F5F1E8);
    box-sizing: border-box;
}

.section-2-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 50px;
    padding-top: 20px;
}

/* Contenedor de texto principal */
.section-2-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
    width: 100%;
}

/* Texto superior */
.section-2-text-top {
    font-family: var(--letra-sans-1);
    font-size: clamp(12px, 1.5vw, 16px);
    color: var(--color-principal, #715E32);
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 -20px 0;
    padding: 0;
}

/* Texto inferior */
.section-2-text-bottom {
    font-family: var(--letra-cursiva-2);
    font-size: clamp(18px, 2.5vw, 36px);
    color: var(--color-principal, #715E32);
    font-weight: 400;
    letter-spacing: 0px;
    margin: 0;
    padding: 0;
}

/* Contenedor de padres dividido en dos columnas */
.section-2-parents-container {
    display: flex;
    width: 100%;
    max-width: 900px;
    gap: 40px;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}

/* Columna de padres */
.section-2-parents-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 20px;
}

/* Etiqueta de padres */
.section-2-parents-label {
    font-family: var(--letra-sans-1);
    font-size: clamp(10px, 1.2vw, 14px);
    color: var(--color-principal, #715E32);
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

/* Nombres de padres */
.section-2-parents-names {
    font-family: var(--letra-cursiva-2);
    font-size: clamp(18px, 2.5vw, 28px);
    color: var(--color-principal, #715E32);
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Divisor vertical */
.section-2-divider {
    width: 1px;
    height: 100%;
    min-height: 150px;
    background: var(--color-principal, #715E32);
    opacity: 0.3;
    flex-shrink: 0;
}

/* ============================================
   SECCIÓN 3: Video Personalizado
   ============================================ */

/* Variables CSS para control total */
:root {
    /* Sección 3 - Video - Variables modificables */
    --section-3-width: 1920px;              /* Ancho de la sección (px) */
    --section-3-height: 600px;             /* Altura de la sección (px) */
    --section-3-overlay-color: rgba(122, 92, 23, 0.648); /* Color del overlay (rgba) */
    --section-3-overlay-opacity: 0.4;       /* Opacidad del overlay (0-1) */
    --section-3-cover-bg: rgba(0, 0, 0, 0.2); /* Fondo del cover (rgba) */
    --section-3-text-color: #FFFFFF;         /* Color del texto */
    --section-3-text-size: clamp(24px, 3vw, 36px); /* Tamaño del texto */
    --section-3-play-button-size: 80px;     /* Tamaño del botón de play (px) */
    --section-3-focus-overlay-bg: rgba(0, 0, 0, 0.9); /* Fondo del overlay de enfoque */
}

.section-3 {
    position: relative;
    width: 100%;
    min-height: var(--section-3-height, 1200px);
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-fondo, #F5F1E8);
    overflow: hidden;
    z-index: 1;
}

.section-3-container {
    position: relative;
    width: 100%;
    max-width: var(--section-3-width, 1920px);
    height: var(--section-3-height, 1200px);
    min-height: var(--section-3-height, 1200px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0 auto;
    overflow: hidden;
}

/* Video principal - Se muestra pequeño centrado pero rellena el contenedor */
.section-3-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    display: block;
    transition: all 0.5s ease;
}

/* Overlay de color (en vez de blur) */
.section-3-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--section-3-overlay-color, rgba(113, 94, 50, 0.4));
    z-index: 2;
    pointer-events: none;
}

/* Cover con texto y botón de play */
.section-3-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--section-3-cover-bg, rgba(0, 0, 0, 0.2));
    z-index: 3;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.section-3-cover.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Texto del cover */
.section-3-cover-texto {
    font-family: var(--letra-sans-1);
    font-size: var(--section-3-text-size, clamp(24px, 3vw, 36px));
    color: var(--section-3-text-color, #FFFFFF);
    font-weight: 400;
    text-align: center;
    margin: 0 0 40px 0;
    padding: 0 20px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    line-height: 1.4;
}

/* Botón de play */
.section-3-play-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 4;
    width: var(--section-3-play-button-size, 80px);
    height: var(--section-3-play-button-size, 80px);
}

.section-3-play-button:hover {
    transform: scale(1.1);
}

.section-3-play-button:active {
    transform: scale(0.95);
}

.section-3-play-button svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Overlay de enfoque al reproducir */
.section-3-focus-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--section-3-focus-overlay-bg, rgba(0, 0, 0, 0.9));
    z-index: 9998;
    pointer-events: none;
    transition: background 0.5s ease;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
}

.section-3-focus-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Botón de cerrar en modo enfoque */
.section-3-close-button {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10000;
    margin-top: 20px;
    margin-right: 20px;
}

.section-3-focus-overlay.active .section-3-close-button {
    opacity: 1;
    transform: scale(1);
}

.section-3-close-button:hover {
    transform: scale(1.1);
}

.section-3-close-button:active {
    transform: scale(0.95);
}

.section-3-close-button svg {
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Video en modo focus (cuando se reproduce) */
.section-3-video.playing {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90vw !important;
    height: auto !important;
    max-height: 90vh !important;
    max-width: 90vw !important;
    z-index: 9999 !important;
    object-fit: contain !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    transition: all 0.5s ease;
    margin: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
}

.template-container.show {
    display: block;
    animation: fadeIn 0.8s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    /* Mostrar imagen móvil y ocultar desktop */
    .envelope-desktop {
        display: none;
    }
    
    .envelope-mobile {
        display: block;
        background-image: var(--imagen-sobre-movil);
    }
    
    /* Ajustes para nombres de novios en móvil */
    .envelope-names {
        font-size: clamp(28px, 8vw, 50px);
        top: 30%;
        letter-spacing: 0px;
        font-weight: 400;
    }
    
    /* Ajustes para fecha en móvil */
    .envelope-date {
        font-size: clamp(14px, 3.5vw, 20px);
        bottom: 45%;
        letter-spacing: 2px;
    }
    
    /* Ajustes para instrucción en móvil */
    .envelope-instruction {
        bottom: 12%;
        font-size: clamp(12px, 2.5vw, 16px);
        letter-spacing: 0.5px;
    }
    
    /* Ajustes del contenedor en móvil */
    .envelope-container {
        width: 100%;
        height: 100%;
    }
    
    /* Ajustes del overlay en móvil */
    .envelope-overlay {
        width: 100vw;
        height: 100vh;
    }
    
    /* Ajustes de la sección 1 en móvil */
    .section-1 {
        padding: 0;
        min-height: 120vh;
    }
    
    .section-1-content {
        padding: 40px 20px;
        gap: 30px;
    }
    
    .section-1-nombres {
        font-size: clamp(36px, 10vw, 70px);
        white-space: normal;
        line-height: 1.3;
        max-width: 90%;
    }
    
    .section-1-fecha {
        font-size: clamp(16px, 2.5vw, 24px);
    }
    
    .section-1-countdown {
        gap: 10px;
    }
    
    .countdown-number {
        font-size: clamp(28px, 6vw, 48px);
    }
    
    .countdown-label {
        font-size: clamp(10px, 1.2vw, 14px);
    }
    
    .countdown-separator {
        font-size: clamp(28px, 6vw, 48px);
        margin: 0 2px;
    }
    
    /* En móvil, siempre tratar como vertical */
    .section-1 .section-1-background {
        background-image: url('../design-1/assets/section-1/img-1-responsive.png');
        background-size: cover;
        background-position: center bottom;
        opacity: 1;
    }
    
    .section-1 .section-1-overlay {
        background: rgba(245, 241, 232, 0.3);
    }
    
    /* Ajustar altura del espaciador en móvil */
    .section-1-spacer {
        height: 60px;
    }
    
    /* Ajustes de la sección 2 en móvil */
    .section-2 {
        min-height: auto;
        padding: 60px 20px;
    }
    
    .section-2-container {
        gap: 50px;
    }
    
    .section-2-parents-container {
        flex-direction: column;
        gap: 40px;
    }
    
    .section-2-divider {
        width: 100%;
        height: 1px;
        min-height: 1px;
    }
    
    .section-2-parents-names {
        font-size: clamp(16px, 4vw, 24px);
    }
    
    /* Ajustes de la sección 3 en móvil */
    .section-3 {
        min-height: 100vh;
    }
    
    .section-3-container {
        max-width: 100%;
        height: 100vh;
        min-height: 100vh;
    }
    
    .section-3-cover-texto {
        font-size: clamp(20px, 5vw, 32px);
        margin-bottom: 30px;
    }
    
    .section-3-play-button {
        width: 60px;
        height: 60px;
    }
    
    .section-3-video.playing {
        width: 95vw;
        max-height: 85vh;
    }
}

/* ============================================
   SECCIÓN 4: Itinerario
   ============================================ */

.section-4 {
    position: relative;
    width: 100%;
    min-height: auto;
    padding: var(--section-4-padding-vertical, 20px) var(--section-4-padding-horizontal, 60px);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--section-4-bg-color, #7B846D);
    box-sizing: border-box;
}

.section-4-container {
    position: relative;
    width: 100%;
    max-width: var(--section-4-container-max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--section-4-item-gap, 60px);
    box-sizing: border-box;
}

/* Item del itinerario */
.section-4-item {
    display: flex;
    align-items: var(--section-4-item-align, center);
    justify-content: center;
    gap: var(--section-4-item-gap-horizontal, 40px);
    width: auto;
    position: relative;
    margin: 0 auto;
}

/* Contenedor izquierdo: Fecha y Hora */
.section-4-left {
    display: flex;
    flex-direction: column;
    align-items: var(--section-4-left-align, flex-end);
    justify-content: flex-start;
    gap: var(--section-4-left-gap, 10px);
    width: var(--section-4-left-width, 200px);
    flex-shrink: 0;
    text-align: var(--section-4-left-text-align, right);
}

/* Fecha */
.section-4-date {
    font-family: var(--section-4-date-font-family, var(--letra-sans-1));
    font-size: 18px;
    color: var(--section-4-text-color-secondary, rgba(255, 255, 255, 0.7));
    font-weight: var(--section-4-date-weight, 300);
    font-style: normal;
    margin: 0;
    padding: 0px;
    line-height: 0.3;
    letter-spacing: 1px;
}

/* Hora */
.section-4-time {
    font-family: var(--section-4-time-font-family, var(--letra-sans-1));
    font-size: 40px;
    color: var(--section-4-text-color, #FFFFFF);
    font-weight: 650;
    margin: 0;
    padding: 0;
    line-height: var(--section-4-time-line-height, 1);
    letter-spacing: var(--section-4-time-letter-spacing, 0px);
}

/* Divisor vertical - Centrado */
.section-4-divider {
    width: var(--section-4-divider-width, 1px);
    height: var(--section-4-divider-height, 80px);
    background: var(--section-4-divider-color, #A78B49);
    flex-shrink: 0;
    opacity: var(--section-4-divider-opacity, 0.8);
    margin: 0;
}

/* Contenedor derecho: Título y Subtítulo */
.section-4-right {
    display: flex;
    flex-direction: column;
    align-items: var(--section-4-right-align, flex-start);
    justify-content: flex-start;
    gap: var(--section-4-right-gap, 8px);
    flex-shrink: 0;
    text-align: var(--section-4-right-text-align, left);
    width: var(--section-4-right-width, 300px);
}

/* Título */
.section-4-title {
    font-family: var(--section-4-title-font-family, var(--letra-sans-1));
    font-size: 32px;
    color: var(--section-4-text-color, #FFFFFF);
    font-weight: var(--section-4-title-weight, 600);
    margin-top: -18px;
    padding: 0;
    line-height: 1.2;
    letter-spacing: var(--section-4-title-letter-spacing, 0px);
}

/* Subtítulo */
.section-4-subtitle {
    font-family: var(--letra-sans-1);
    font-size: 18px;
    color: var(--section-4-text-color-secondary, rgba(255, 255, 255, 0.7));
    font-weight: var(--section-4-subtitle-weight, 400);
    font-style: italic;
    margin: 0;
    padding: 0;
    line-height: 0.5;
    letter-spacing: var(--section-4-subtitle-letter-spacing, 0px);
}

/* Contenedor del botón Google Calendar */
.section-4-calendar-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: var(--section-4-calendar-button-gap, 40px);
}

/* Botón Google Calendar */
.section-4-calendar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--section-4-calendar-button-gap-icon, 8px);
    padding: var(--section-4-calendar-button-padding, 12px 24px);
    background: var(--section-4-calendar-button-bg, #FFFFFF);
    color: var(--section-4-calendar-button-color, #7B846D);
    font-family: var(--letra-sans-1);
    font-size: var(--section-4-calendar-button-font-size, clamp(14px, 1.5vw, 16px));
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--section-4-calendar-button-border-radius, 4px);
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-4-calendar-button:hover {
    background: var(--section-4-calendar-button-hover-bg, #F5F1E8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.section-4-calendar-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.section-4-calendar-icon {
    width: var(--section-4-calendar-button-icon-size, 20px);
    height: var(--section-4-calendar-button-icon-size, 20px);
    flex-shrink: 0;
}

.section-4-calendar-button span {
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 768px) {
    .section-4 {
        padding: var(--section-4-padding-vertical-mobile, 60px) var(--section-4-padding-horizontal-mobile, 20px);
    }
    
    .section-4-container {
        gap: var(--section-4-item-gap-mobile, 40px);
    }
    
    .section-4-item {
        flex-direction: row;
        align-items: var(--section-4-item-align, center);
        justify-content: center;
        gap: var(--section-4-item-gap-horizontal-mobile, 15px);
        width: auto;
        margin: 0 auto;
    }
    
    .section-4-left {
        width: 140px;
        min-width: 140px;
        align-items: var(--section-4-left-align, flex-end);
        text-align: var(--section-4-left-text-align, right);
        flex-shrink: 0;
    }
    
    /* Fecha en móvil - manteniendo estilos pero ajustando tamaño */
    .section-4-date {
        font-size: 14px;
        font-style: normal;
        line-height: 0.3;
        letter-spacing: 1px;
    }
    
    /* Hora en móvil - manteniendo estilos pero ajustando tamaño */
    .section-4-time {
        font-size: 28px;
        font-weight: 650;
    }
    
    .section-4-divider {
        width: var(--section-4-divider-width, 1px);
        height: var(--section-4-divider-height, 80px);
        flex-shrink: 0;
    }
    
    .section-4-right {
        width: 200px;
        min-width: 200px;
        align-items: var(--section-4-right-align, flex-start);
        text-align: var(--section-4-right-text-align, left);
        flex-shrink: 0;
    }
    
    /* Título en móvil - manteniendo estilos pero ajustando tamaño */
    .section-4-title {
        font-size: 20px;
        margin-top: -18px;
        line-height: 1.2;
    }
    
    /* Subtítulo en móvil - manteniendo estilos pero ajustando tamaño */
    .section-4-subtitle {
        font-family: var(--letra-sans-1);
        font-size: 14px;
        line-height: 0.5;
    }
    
    /* Botón Google Calendar en móvil */
    .section-4-calendar-button-container {
        margin-top: 30px;
    }
    
    .section-4-calendar-button {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .section-4-calendar-button span {
        font-size: 14px;
    }
}

/* ============================================
   SECCIÓN 5: Imagen 16:9
   ============================================ */

.section-5 {
    position: relative;
    width: 100%;
    padding: var(--section-5-padding-vertical, 0px) var(--section-5-padding-horizontal, 0px);
    margin: 0;
    background: var(--section-5-bg-color, transparent);
    box-sizing: border-box;
    overflow: hidden;
}

.section-5-container {
    position: relative;
    width: 100%;
    max-width: var(--section-5-container-max-width, 100%);
    margin: 0 auto;
    aspect-ratio: var(--section-5-aspect-ratio, 16 / 9);
    overflow: hidden;
    box-sizing: border-box;
}

.section-5-image {
    width: 100%;
    height: 100%;
    object-fit: var(--section-5-object-fit, cover);
    object-position: var(--section-5-object-position, center);
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .section-5 {
        padding: var(--section-5-padding-vertical-mobile, 0px) var(--section-5-padding-horizontal-mobile, 0px);
    }
    
    .section-5-container {
        aspect-ratio: var(--section-5-aspect-ratio, 16 / 9);
    }
}

/* ============================================
   SECCIÓN 6: Dress Code
   ============================================ */

.section-6 {
    position: relative;
    width: 100%;
    padding: var(--section-6-padding-vertical, 80px) var(--section-6-padding-horizontal, 60px);
    margin: 0;
    background: var(--section-6-bg-color, #F5F1E8);
    box-sizing: border-box;
}

.section-6-container {
    position: relative;
    width: 100%;
    max-width: var(--section-6-container-max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Título */
.section-6-title {
    font-family: var(--letra-cursiva-2);
    font-size: var(--section-6-title-size, clamp(36px, 5vw, 48px));
    color: var(--section-6-text-color, #715E32);
    font-weight: var(--section-6-title-weight, 600);
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 0.5;
    margin-bottom: var(--section-6-title-gap, 20px);
}

/* Subtítulo */
.section-6-subtitle {
    font-family: var(--letra-sans-1);
    font-size: var(--section-6-subtitle-size, clamp(18px, 2.5vw, 24px));
    color: var(--section-6-text-color-secondary, #A78B49);
    font-weight: var(--section-6-subtitle-weight, 400);
    margin: 0;
    padding: 0;
    text-align: center;
    margin-bottom: var(--section-6-subtitle-gap, 40px);
    font-style: italic;
}

/* Contenedor del aviso de colores */
.section-6-colors-warning {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--section-6-warning-gap, 20px);
    margin-bottom: var(--section-6-colors-gap, 50px);
}

/* Texto del aviso */
.section-6-warning-text {
    font-family: var(--section-6-warning-font-family, var(--letra-sans-1));
    font-size: var(--section-6-warning-size, clamp(14px, 1.8vw, 16px));
    color: var(--section-6-text-color, #715E32);
    font-weight: var(--section-6-warning-weight, 400);
    margin: 0;
    padding: 0;
    text-align: center;
}

/* Contenedor de círculos de colores */
.section-6-colors-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--section-6-color-circle-gap, 15px);
}

/* Círculos de colores */
.section-6-color-circle {
    width: var(--section-6-color-circle-size, 50px);
    height: var(--section-6-color-circle-size, 50px);
    border-radius: 50%;
    border: var(--section-6-color-circle-border, 2px solid #FFFFFF);
    box-shadow: var(--section-6-color-circle-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
    flex-shrink: 0;
}

/* Galería */
.section-6-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--section-6-gallery-gap, 15px);
    width: 100%;
    box-sizing: border-box;
}

/* Items de la galería */
.section-6-gallery-item {
    position: relative;
    width: 100%;
    min-height: var(--section-6-gallery-item-min-height, 250px);
    overflow: hidden;
    border-radius: 8px;
    opacity: 0;
    transform: translateY(30px);
    animation: section6FadeInUp var(--section-6-gallery-animation-duration, 0.6s) ease-out forwards;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-6-gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Animación secuencial para cada item */
.section-6-gallery-item:nth-child(1) { animation-delay: calc(var(--section-6-gallery-animation-delay, 0.1s) * 1); }
.section-6-gallery-item:nth-child(2) { animation-delay: calc(var(--section-6-gallery-animation-delay, 0.1s) * 2); }
.section-6-gallery-item:nth-child(3) { animation-delay: calc(var(--section-6-gallery-animation-delay, 0.1s) * 3); }
.section-6-gallery-item:nth-child(4) { animation-delay: calc(var(--section-6-gallery-animation-delay, 0.1s) * 4); }
.section-6-gallery-item:nth-child(5) { animation-delay: calc(var(--section-6-gallery-animation-delay, 0.1s) * 5); }
.section-6-gallery-item:nth-child(6) { animation-delay: calc(var(--section-6-gallery-animation-delay, 0.1s) * 6); }
.section-6-gallery-item:nth-child(7) { animation-delay: calc(var(--section-6-gallery-animation-delay, 0.1s) * 7); }
.section-6-gallery-item:nth-child(8) { animation-delay: calc(var(--section-6-gallery-animation-delay, 0.1s) * 8); }
.section-6-gallery-item:nth-child(9) { animation-delay: calc(var(--section-6-gallery-animation-delay, 0.1s) * 9); }
.section-6-gallery-item:nth-child(10) { animation-delay: calc(var(--section-6-gallery-animation-delay, 0.1s) * 10); }
.section-6-gallery-item:nth-child(11) { animation-delay: calc(var(--section-6-gallery-animation-delay, 0.1s) * 11); }
.section-6-gallery-item:nth-child(12) { animation-delay: calc(var(--section-6-gallery-animation-delay, 0.1s) * 12); }

/* Imágenes de la galería */
.section-6-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    min-height: var(--section-6-gallery-item-min-height, 250px);
}

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

/* Responsive */
@media (max-width: 768px) {
    .section-6 {
        padding: var(--section-6-padding-vertical-mobile, 60px) var(--section-6-padding-horizontal-mobile, 20px);
    }
    
    .section-6-gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--section-6-gallery-gap-mobile, 10px);
    }
    
    .section-6-color-circle {
        width: var(--section-6-color-circle-size-mobile, 40px);
        height: var(--section-6-color-circle-size-mobile, 40px);
    }
    
    .section-6-gallery-item {
        min-height: 200px;
    }
    
    .section-6-gallery-image {
        min-height: 200px;
    }
}

/* ============================================
   SECCIÓN 7: Ubicación
   ============================================ */

.section-7 {
    position: relative;
    width: 100%;
    padding: var(--section-7-padding-vertical, 80px) var(--section-7-padding-horizontal, 60px);
    margin: 0;
    background: var(--section-7-bg-color, #FFFFFF);
    box-sizing: border-box;
}

.section-7-container {
    position: relative;
    width: 100%;
    max-width: var(--section-7-container-max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Título */
.section-7-title {
    font-family: var(--section-7-title-font-family, var(--letra-cursiva-2));
    font-size: var(--section-7-title-size, clamp(36px, 5vw, 48px));
    color: var(--section-7-text-color, #715E32);
    font-weight: var(--section-7-title-weight, 400);
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 1.2;
}

/* Subtítulo */
.section-7-subtitle {
    font-family: var(--section-7-subtitle-font-family, var(--letra-sans-1));
    font-size: var(--section-7-subtitle-size, clamp(18px, 2.5vw, 24px));
    color: var(--section-7-text-color-secondary, #A78B49);
    font-weight: var(--section-7-subtitle-weight, 400);
    margin: 0;
    padding: 0;
    text-align: center;
    margin-bottom: var(--section-7-subtitle-gap, 40px);
}

/* Contenedor del botón */
.section-7-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Botón Google Maps */
.section-7-maps-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--section-7-button-gap-icon, 10px);
    padding: var(--section-7-button-padding, 14px 28px);
    background: var(--section-7-button-bg, #715E32);
    color: var(--section-7-button-color, #FFFFFF);
    font-family: var(--letra-sans-1);
    font-size: var(--section-7-button-font-size, clamp(16px, 2vw, 18px));
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--section-7-button-border-radius, 8px);
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 12px rgba(113, 94, 50, 0.3);
    position: relative;
    animation: section7Pulse var(--section-7-button-pulse-duration, 2s) ease-in-out infinite;
}

.section-7-maps-button:hover {
    background: var(--section-7-button-hover-bg, #A78B49);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(113, 94, 50, 0.4);
    animation: none;
}

.section-7-maps-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(113, 94, 50, 0.3);
}

.section-7-maps-icon {
    width: var(--section-7-button-icon-size, 20px);
    height: var(--section-7-button-icon-size, 20px);
    flex-shrink: 0;
}

.section-7-maps-button span {
    white-space: nowrap;
}

/* Animación pulse */
@keyframes section7Pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(113, 94, 50, 0.3);
    }
    50% {
        transform: scale(var(--section-7-button-pulse-scale, 1.05));
        box-shadow: 0 6px 20px rgba(113, 94, 50, 0.5);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .section-7 {
        padding: var(--section-7-padding-vertical-mobile, 60px) var(--section-7-padding-horizontal-mobile, 20px);
    }
    
    .section-7-maps-button {
        padding: 12px 24px;
        font-size: 16px;
    }
    
    .section-7-maps-button span {
        font-size: 16px;
    }
}

/* ============================================
   SECCIÓN 8: Confirmación de Asistencia
   ============================================ */

.section-8 {
    position: relative;
    width: 100%;
    padding: var(--section-8-padding-vertical, 80px) var(--section-8-padding-horizontal, 60px);
    margin: 0;
    background: var(--section-8-bg-color, #F5F1E8);
    box-sizing: border-box;
}

.section-8-container {
    position: relative;
    width: 100%;
    max-width: var(--section-8-container-max-width, 1200px);
    margin: 0 auto;
    display: flex;
    gap: var(--section-8-gap-columns, 60px);
    align-items: stretch;
    box-sizing: border-box;
}

/* Columna izquierda - Slider */
.section-8-left {
    width: var(--section-8-slider-width, 50%);
    flex-shrink: 0;
}

.section-8-slider {
    position: relative;
    width: 100%;
    height: var(--section-8-slider-height, 500px);
    border-radius: var(--section-8-slider-border-radius, 8px);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.section-8-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity var(--section-8-slide-transition, 1s ease-in-out);
}

.section-8-slide.active {
    opacity: 1;
    z-index: 1;
}

.section-8-slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Columna derecha - Formulario */
.section-8-right {
    width: var(--section-8-form-width, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-8-form-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--section-8-form-gap, 30px);
}

.section-8-guest-name {
    font-family: var(--section-8-guest-name-font-family, var(--letra-sans-1));
    font-size: var(--section-8-guest-name-size, clamp(24px, 3vw, 32px));
    color: var(--section-8-text-color, #715E32);
    font-weight: var(--section-8-guest-name-weight, 600);
    margin: 0;
    line-height: 0;
    padding: 0;
}

.section-8-confirm-text {
    font-family: var(--section-8-confirm-text-font-family, var(--letra-sans-1));
    font-size: var(--section-8-confirm-text-size, clamp(18px, 2.5vw, 22px));
    color: var(--section-8-text-color-secondary, #A78B49);
    font-weight: var(--section-8-confirm-text-weight, 400);
    margin: 0;
    padding: 0;
}

.section-8-admissions {
    font-family: var(--section-8-admissions-font-family, var(--letra-sans-1));
    font-size: var(--section-8-admissions-size, clamp(16px, 2vw, 18px));
    color: var(--section-8-text-color, #715E32);
    margin: 0;
    padding: 0;
}

.section-8-buttons {
    display: flex;
    gap: var(--section-8-button-gap, 15px);
    flex-wrap: wrap;
}

.section-8-button {
    flex: 1;
    min-width: 150px;
    padding: var(--section-8-button-padding, 14px 28px);
    font-family: var(--letra-sans-1);
    font-size: var(--section-8-button-font-size, clamp(16px, 2vw, 18px));
    font-weight: 500;
    border-radius: var(--section-8-button-border-radius, 8px);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.section-8-button-yes {
    background: var(--section-8-button-yes-bg, #715E32);
    color: var(--section-8-button-yes-color, #FFFFFF);
}

.section-8-button-yes:hover {
    background: var(--section-8-button-yes-hover-bg, #A78B49);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(113, 94, 50, 0.3);
}

.section-8-button-no {
    background: var(--section-8-button-no-bg, #FFFFFF);
    color: var(--section-8-button-no-color, #715E32);
    border: var(--section-8-button-no-border, 2px solid #715E32);
}

.section-8-button-no:hover {
    background: var(--section-8-button-no-hover-bg, #F5F1E8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(113, 94, 50, 0.2);
}

/* Modales */
.section-8-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.section-8-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.section-8-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--section-8-modal-bg, rgba(0, 0, 0, 0.7));
    cursor: pointer;
}

.section-8-modal-content {
    position: relative;
    width: 90%;
    max-width: var(--section-8-modal-content-max-width, 500px);
    background: var(--section-8-modal-content-bg, #FFFFFF);
    padding: var(--section-8-modal-content-padding, 40px);
    border-radius: var(--section-8-modal-content-border-radius, 12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-8-modal-title {
    font-family: var(--letra-sans-1);
    font-size: var(--section-8-modal-title-size, clamp(24px, 3vw, 28px));
    color: var(--section-8-text-color, #715E32);
    font-weight: 600;
    margin: 0;
    padding: 0;
    text-align: center;
}

.section-8-modal-text {
    font-family: var(--letra-sans-1);
    font-size: var(--section-8-modal-text-size, clamp(16px, 2vw, 18px));
    color: var(--section-8-text-color-secondary, #A78B49);
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 1.6;
}

.section-8-modal-textarea {
    width: 100%;
    height: var(--section-8-modal-textarea-height, 100px);
    padding: var(--section-8-modal-textarea-padding, 12px);
    font-family: var(--letra-sans-1);
    font-size: clamp(14px, 1.8vw, 16px);
    color: var(--section-8-text-color, #715E32);
    border: var(--section-8-modal-textarea-border, 1px solid #DED2B5);
    border-radius: var(--section-8-modal-textarea-border-radius, 6px);
    resize: vertical;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease;
}

.section-8-modal-textarea:focus {
    border-color: var(--section-8-text-color-secondary, #A78B49);
}

.section-8-modal-textarea::placeholder {
    color: rgba(113, 94, 50, 0.5);
}

.section-8-modal-buttons {
    display: flex;
    gap: var(--section-8-modal-buttons-gap, 15px);
    margin-top: 10px;
}

.section-8-modal-button {
    flex: 1;
    padding: var(--section-8-button-padding, 14px 28px);
    font-family: var(--letra-sans-1);
    font-size: var(--section-8-button-font-size, clamp(16px, 2vw, 18px));
    font-weight: 500;
    border-radius: var(--section-8-button-border-radius, 8px);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.section-8-modal-button-confirm {
    background: var(--section-8-button-yes-bg, #715E32);
    color: var(--section-8-button-yes-color, #FFFFFF);
}

.section-8-modal-button-confirm:hover {
    background: var(--section-8-button-yes-hover-bg, #A78B49);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(113, 94, 50, 0.3);
}

.section-8-modal-button-cancel {
    background: #FFFFFF;
    color: var(--section-8-text-color, #715E32);
    border: var(--section-8-button-no-border, 2px solid #715E32);
}

.section-8-modal-button-cancel:hover {
    background: var(--section-8-button-no-hover-bg, #F5F1E8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(113, 94, 50, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .section-8 {
        padding: var(--section-8-padding-vertical-mobile, 60px) var(--section-8-padding-horizontal-mobile, 20px);
    }
    
    .section-8-container {
        flex-direction: column;
        gap: var(--section-8-gap-columns-mobile, 30px);
    }
    
    .section-8-left {
        width: 100%;
    }
    
    .section-8-slider {
        height: var(--section-8-slider-height-mobile, 300px);
    }
    
    .section-8-right {
        width: 100%;
    }
    
    .section-8-buttons {
        flex-direction: column;
    }
    
    .section-8-button {
        width: 100%;
    }
    
    .section-8-modal-content {
        padding: 30px 20px;
    }
    
    .section-8-modal-buttons {
        flex-direction: column;
    }
}

/* ============================================
   SECCIÓN 9: Obsequio
   ============================================ */

.section-9 {
    position: relative;
    width: 100%;
    padding: var(--section-9-padding-vertical, 80px) var(--section-9-padding-horizontal, 60px);
    margin: 0;
    background: var(--section-9-bg-color, #7B846D);
    box-sizing: border-box;
}

.section-9-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Título */
.section-9-title {
    font-family: var(--section-9-title-font-family, var(--letra-cursiva-2));
    font-size: var(--section-9-title-size, clamp(36px, 5vw, 48px));
    color: var(--section-9-text-color, #FFFFFF);
    font-weight: var(--section-9-title-weight, 400);
    margin: 0;
    padding: 0;
    text-align: center;
    margin-bottom: var(--section-9-title-gap, 50px);
}

/* Contenedor de opciones */
.section-9-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--section-9-options-gap, 40px);
    width: 100%;
    box-sizing: border-box;
}

/* Tarjetas de opciones */
.section-9-option-card {
    background: var(--section-9-card-bg, rgba(255, 255, 255, 0.1));
    border: var(--section-9-card-border, 1px solid rgba(255, 255, 255, 0.2));
    border-radius: var(--section-9-card-border-radius, 12px);
    padding: var(--section-9-card-padding, 30px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--section-9-card-gap, 20px);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.section-9-option-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.15);
}

/* Contenedor de iconos */
.section-9-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--section-9-icon-gap, 20px);
}

.section-9-icon {
    width: var(--section-9-icon-size, 48px);
    height: var(--section-9-icon-size, 48px);
    color: var(--section-9-icon-color, #FFFFFF);
    flex-shrink: 0;
}

/* Título de opción */
.section-9-option-title {
    font-family: var(--section-9-option-title-font-family, var(--letra-sans-1));
    font-size: var(--section-9-option-title-size, clamp(20px, 2.5vw, 24px));
    color: var(--section-9-text-color, #FFFFFF);
    font-weight: var(--section-9-option-title-weight, 600);
    margin: 0;
    padding: 0;
}

/* Contenido de opción */
.section-9-option-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--section-9-info-gap, 12px);
}

/* Información bancaria */
.section-9-bank-info {
    font-family: var(--section-9-info-font-family, var(--letra-sans-1));
    font-size: var(--section-9-info-size, clamp(14px, 1.8vw, 16px));
    color: var(--section-9-text-color-secondary, rgba(255, 255, 255, 0.8));
    font-weight: var(--section-9-info-weight, 400);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

.section-9-label {
    font-weight: var(--section-9-label-weight, 500);
    color: var(--section-9-text-color, #FFFFFF);
    margin-right: 10px;
}

.section-9-value {
    color: var(--section-9-text-color-secondary, rgba(255, 255, 255, 0.8));
    text-align: right;
    word-break: break-word;
}

/* Texto del sobre */
.section-9-envelope-text {
    font-family: var(--section-9-info-font-family, var(--letra-sans-1));
    font-size: var(--section-9-info-size, clamp(14px, 1.8vw, 16px));
    color: var(--section-9-text-color-secondary, rgba(255, 255, 255, 0.8));
    font-weight: var(--section-9-info-weight, 400);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .section-9 {
        padding: var(--section-9-padding-vertical-mobile, 60px) var(--section-9-padding-horizontal-mobile, 20px);
    }
    
    .section-9-options {
        grid-template-columns: 1fr;
        gap: var(--section-9-options-gap-mobile, 30px);
    }
    
    .section-9-option-card {
        padding: var(--section-9-card-padding-mobile, 25px);
    }
    
    .section-9-bank-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .section-9-value {
        text-align: left;
    }
}

/* ============================================
   SECCIÓN 10: Playlist Musical
   ============================================ */

.section-10 {
    position: relative;
    width: 100%;
    padding: var(--section-10-padding-vertical, 80px) var(--section-10-padding-horizontal, 60px);
    margin: 0;
    background: var(--section-10-bg-color, #FFFFFF);
    box-sizing: border-box;
}

.section-10-container {
    position: relative;
    width: 100%;
    max-width: var(--section-10-container-max-width, 1000px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Título */
.section-10-title {
    font-family: var(--section-10-title-font-family, var(--letra-cursiva-2));
    font-size: var(--section-10-title-size, clamp(36px, 5vw, 48px));
    color: var(--section-10-text-color, #715E32);
    font-weight: var(--section-10-title-weight, 400);
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 0.5;
    margin-bottom: var(--section-10-title-gap, 20px);
}

/* Subtítulo */
.section-10-subtitle {
    font-family: var(--section-10-subtitle-font-family, var(--letra-sans-1));
    font-size: var(--section-10-subtitle-size, clamp(18px, 2.5vw, 24px));
    color: var(--section-10-text-color-secondary, #A78B49);
    font-weight: var(--section-10-subtitle-weight, 400);
    margin: 0;
    padding: 0;
    text-align: center;
    margin-bottom: var(--section-10-subtitle-gap, 40px);
}

/* Formulario */
.section-10-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--section-10-form-gap, 20px);
    margin-bottom: var(--section-10-playlist-gap, 40px);
}

.section-10-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--section-10-input-gap, 20px);
    width: 100%;
}

.section-10-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-10-label {
    font-family: var(--section-10-label-font-family, var(--letra-sans-1));
    font-size: var(--section-10-label-size, clamp(14px, 1.8vw, 16px));
    color: var(--section-10-text-color, #715E32);
    font-weight: var(--section-10-label-weight, 500);
}

.section-10-input {
    width: 100%;
    padding: var(--section-10-input-padding, 12px 16px);
    font-family: var(--section-10-input-font-family, var(--letra-sans-1));
    font-size: var(--section-10-input-size, clamp(16px, 2vw, 18px));
    color: var(--section-10-text-color, #715E32);
    border: var(--section-10-input-border, 1px solid #DED2B5);
    border-radius: var(--section-10-input-border-radius, 8px);
    outline: none;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.section-10-input:focus {
    border: var(--section-10-input-focus-border, 2px solid #A78B49);
}

.section-10-input::placeholder {
    color: rgba(113, 94, 50, 0.5);
}

/* Botón agregar */
.section-10-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--section-10-button-gap, 10px);
    padding: var(--section-10-button-padding, 14px 28px);
    background: var(--section-10-button-bg, #715E32);
    color: var(--section-10-button-color, #FFFFFF);
    font-family: var(--letra-sans-1);
    font-size: var(--section-10-button-font-size, clamp(16px, 2vw, 18px));
    font-weight: 500;
    border: none;
    border-radius: var(--section-10-button-border-radius, 8px);
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: center;
    box-shadow: 0 4px 12px rgba(113, 94, 50, 0.2);
}

.section-10-add-button:hover {
    background: var(--section-10-button-hover-bg, #A78B49);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(113, 94, 50, 0.3);
}

.section-10-add-button:active {
    transform: translateY(0);
}

.section-10-add-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Playlist */
.section-10-playlist {
    width: 100%;
    background: var(--section-10-playlist-bg, #F5F1E8);
    border-radius: var(--section-10-playlist-border-radius, 12px);
    padding: var(--section-10-playlist-padding, 30px);
    box-sizing: border-box;
}

.section-10-playlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--section-10-playlist-header-gap, 10px);
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(113, 94, 50, 0.1);
}

.section-10-playlist-title {
    font-family: var(--letra-sans-1);
    font-size: var(--section-10-playlist-title-size, clamp(20px, 2.5vw, 24px));
    color: var(--section-10-text-color, #715E32);
    font-weight: 600;
    margin: 0;
    padding: 0;
}

.section-10-playlist-subtitle {
    font-family: var(--letra-sans-1);
    font-size: var(--section-10-playlist-subtitle-size, clamp(14px, 1.8vw, 16px));
    color: var(--section-10-text-color-secondary, #A78B49);
    font-weight: 400;
    margin: 0;
    padding: 0;
}

.section-10-playlist-items {
    display: flex;
    flex-direction: column;
    gap: var(--section-10-playlist-items-gap, 12px);
}

.section-10-playlist-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--section-10-text-color-secondary, #A78B49);
    text-align: center;
}

.section-10-empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.section-10-playlist-empty p {
    font-family: var(--letra-sans-1);
    font-size: clamp(16px, 2vw, 18px);
    margin: 0;
    padding: 0;
}

.section-10-playlist-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: var(--section-10-playlist-item-padding, 16px);
    background: var(--section-10-playlist-item-bg, #FFFFFF);
    border-radius: var(--section-10-playlist-item-border-radius, 8px);
    transition: all 0.3s ease;
    animation: section10FadeIn 0.3s ease;
}

.section-10-playlist-item:hover {
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-10-playlist-item-number {
    font-family: var(--letra-sans-1);
    font-size: var(--section-10-playlist-item-number-size, clamp(18px, 2.2vw, 20px));
    color: var(--section-10-text-color-secondary, #A78B49);
    font-weight: 600;
    min-width: 30px;
    flex-shrink: 0;
}

.section-10-playlist-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.section-10-playlist-item-title {
    font-family: var(--letra-sans-1);
    font-size: var(--section-10-playlist-item-title-size, clamp(16px, 2vw, 18px));
    color: var(--section-10-text-color, #715E32);
    font-weight: 500;
}

.section-10-playlist-item-artist {
    font-family: var(--letra-sans-1);
    font-size: var(--section-10-playlist-item-artist-size, clamp(14px, 1.8vw, 16px));
    color: var(--section-10-text-color-secondary, #A78B49);
    font-weight: 400;
}

.section-10-playlist-item-remove {
    background: none;
    border: none;
    color: var(--section-10-text-color-secondary, #A78B49);
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    opacity: 0.6;
}

.section-10-playlist-item-remove:hover {
    opacity: 1;
    background: rgba(167, 139, 73, 0.1);
    transform: rotate(90deg);
}

.section-10-playlist-item-remove svg {
    width: 20px;
    height: 20px;
}

/* Animación de entrada */
@keyframes section10FadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .section-10 {
        padding: var(--section-10-padding-vertical-mobile, 60px) var(--section-10-padding-horizontal-mobile, 20px);
    }
    
    .section-10-form-row {
        grid-template-columns: 1fr;
        gap: var(--section-10-input-gap-mobile, 15px);
    }
    
    .section-10-playlist {
        padding: var(--section-10-playlist-padding-mobile, 20px);
    }
    
    .section-10-playlist-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* ============================================
   SECCIÓN 11: Información Adicional (Tabs)
   ============================================ */

.section-11 {
    position: relative;
    width: 100%;
    padding: var(--section-11-padding-vertical, 80px) var(--section-11-padding-horizontal, 60px);
    margin: 0;
    background: var(--section-11-bg-color, #F5F1E8);
    box-sizing: border-box;
}

.section-11-container {
    position: relative;
    width: 100%;
    max-width: var(--section-11-container-max-width, 1000px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Título */
.section-11-title {
    font-family: var(--section-11-title-font-family, var(--letra-cursiva-2));
    font-size: var(--section-11-title-size, clamp(36px, 5vw, 48px));
    color: var(--section-11-text-color, #715E32);
    font-weight: var(--section-11-title-weight, 400);
    margin: 0;
    padding: 0;
    text-align: center;
    margin-bottom: var(--section-11-title-gap, 40px);
}

/* Contenedor de tabs */
.section-11-tabs {
    width: 100%;
    background: var(--section-11-tabs-bg, #FFFFFF);
    border-radius: var(--section-11-tabs-border-radius, 12px);
    padding: var(--section-11-tabs-padding, 30px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* Header de tabs */
.section-11-tabs-header {
    display: flex;
    gap: var(--section-11-tabs-header-gap, 0);
    border-bottom: var(--section-11-tabs-header-border, 1px solid rgba(113, 94, 50, 0.1));
    margin-bottom: var(--section-11-panel-padding, 30px);
    flex-wrap: wrap;
}

/* Botones de tabs */
.section-11-tab-button {
    padding: var(--section-11-tab-button-padding, 12px 24px);
    font-family: var(--letra-sans-1);
    font-size: var(--section-11-tab-button-font-size, clamp(16px, 2vw, 18px));
    font-weight: var(--section-11-tab-button-weight, 500);
    color: var(--section-11-tab-button-inactive-color, #A78B49);
    background: var(--section-11-tab-button-inactive-bg, transparent);
    border: none;
    border-bottom: var(--section-11-tab-button-border-bottom, 3px solid transparent);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    outline: none;
}

.section-11-tab-button:hover {
    background: var(--section-11-tab-button-hover-bg, rgba(113, 94, 50, 0.1));
    color: var(--section-11-text-color, #715E32);
}

.section-11-tab-button.active {
    color: var(--section-11-tab-button-active-color, #FFFFFF);
    background: var(--section-11-tab-button-active-bg, #715E32);
    border-bottom: var(--section-11-tab-button-active-border, 3px solid #715E32);
}

.section-11-tab-button.active:hover {
    background: var(--section-11-tab-button-active-bg, #715E32);
    color: var(--section-11-tab-button-active-color, #FFFFFF);
}

/* Contenedor de paneles */
.section-11-tabs-content {
    position: relative;
    min-height: 200px;
}

/* Paneles de contenido */
.section-11-tab-panel {
    display: none;
    opacity: 0;
    animation: section11FadeIn 0.3s ease forwards;
}

.section-11-tab-panel.active {
    display: block;
    opacity: 1;
}

.section-11-tab-content {
    display: flex;
    flex-direction: column;
    gap: var(--section-11-panel-content-gap, 20px);
}

.section-11-panel-title {
    font-family: var(--letra-sans-1);
    font-size: var(--section-11-panel-title-size, clamp(24px, 3vw, 28px));
    color: var(--section-11-text-color, #715E32);
    font-weight: var(--section-11-panel-title-weight, 600);
    margin: 0;
    padding: 0;
}

.section-11-panel-text {
    font-family: var(--letra-sans-1);
    font-size: var(--section-11-panel-text-size, clamp(16px, 2vw, 18px));
    color: var(--section-11-text-color-secondary, #A78B49);
    font-weight: var(--section-11-panel-text-weight, 400);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Animación de entrada */
@keyframes section11FadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .section-11 {
        padding: var(--section-11-padding-vertical-mobile, 60px) var(--section-11-padding-horizontal-mobile, 20px);
    }
    
    .section-11-tabs {
        padding: var(--section-11-tabs-padding-mobile, 20px);
    }
    
    .section-11-tabs-header {
        flex-direction: column;
        border-bottom: none;
    }
    
    .section-11-tab-button {
        width: 100%;
        padding: var(--section-11-tab-button-padding-mobile, 10px 16px);
        border-bottom: none;
        border-left: 3px solid transparent;
        text-align: left;
    }
    
    .section-11-tab-button.active {
        border-left: var(--section-11-tab-button-active-border, 3px solid #715E32);
        border-bottom: none;
    }
}

/* ============================================
   FOOTER
   ============================================ */

.section-footer {
    position: relative;
    width: 100%;
    padding: var(--footer-padding-vertical, 40px) var(--footer-padding-horizontal, 60px);
    margin: 0;
    background: var(--footer-bg-color, #715E32);
    box-sizing: border-box;
}

.section-footer-container {
    position: relative;
    width: 100%;
    max-width: var(--footer-container-max-width, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

/* Nombres de novios */
.section-footer-names {
    font-family: var(--footer-names-font-family, var(--letra-cursiva-2));
    font-size: var(--footer-names-size, clamp(28px, 4vw, 36px));
    color: var(--footer-text-color, #FFFFFF);
    font-weight: var(--footer-names-weight, 400);
    margin: 0;
    padding: 0;
    margin-bottom: var(--footer-names-gap, 15px);
}

/* Copyright */
.section-footer-copyright {
    font-family: var(--footer-copyright-font-family, var(--letra-sans-1));
    font-size: var(--footer-copyright-size, clamp(12px, 1.5vw, 14px));
    color: var(--footer-text-color-secondary, rgba(255, 255, 255, 0.8));
    font-weight: var(--footer-copyright-weight, 400);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.section-footer-link {
    color: var(--footer-link-color, #FFFFFF);
    text-decoration: var(--footer-link-decoration, underline);
    transition: color 0.3s ease;
}

.section-footer-link:hover {
    color: var(--footer-link-hover-color, #C5AF7C);
}

/* Responsive */
@media (max-width: 768px) {
    .section-footer {
        padding: var(--footer-padding-vertical-mobile, 30px) var(--footer-padding-horizontal-mobile, 20px);
    }
    
    .section-footer-copyright {
        font-size: clamp(11px, 1.3vw, 13px);
        line-height: 1.8;
    }
}