@charset "UTF-8";
#mainNavbar { background-color: transparent; transition: all 0.3s ease; backdrop-filter: blur(0px); }

#mainNavbar .navbar-brand .brand-sector { color: #ffffff; }

#mainNavbar .navbar-brand .brand-once { color: #f0f0f0; }

#mainNavbar .nav-link, #mainNavbar .navbar-toggler-icon { color: rgba(255, 255, 255, 0.9) !important; }

#mainNavbar .btn-outline-light { border-color: rgba(255, 255, 255, 0.7); color: white; }

#mainNavbar .btn-outline-light:hover { background-color: white; color: #1570ef; }

#mainNavbar.scrolled { background-color: black; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding-top: 0.6rem; padding-bottom: 0.6rem; }

#mainNavbar.scrolled .navbar-brand .brand-sector { color: #1570ef; }

#mainNavbar.scrolled .navbar-brand .brand-once { color: #333; }

#mainNavbar.scrolled .nav-link, #mainNavbar.scrolled .navbar-toggler-icon { color: rgba(255, 255, 255, 0.75) !important; }

#mainNavbar.scrolled .btn-outline-light { border-color: #1570ef; color: #1570ef; }

#mainNavbar.scrolled .btn-outline-light:hover { background-color: #1570ef; color: white; }

.banner { background: #000000; background: radial-gradient(circle, black 0%, #131313 53%, black 100%); }

.card-qr { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }

.bg-gradient-indigo { background: #444CF7; background: radial-gradient(circle, #444cf7 0%, #0000a8 100%); }

.cinzel { font-family: "Cinzel", serif; font-optical-sizing: auto; font-style: normal; }

/* Ocultar secciones inactivas */
.tab-content { display: none; padding: 20px; max-width: 600px; margin: 0 auto; }

/* Mostrar solo la activa */
.tab-content.active { display: block; }

/* Estilos del navbar (igual que antes, solo ajuste de z-index si es necesario) */
.main-content { padding-bottom: 100px; /* Espacio para la barra fija */ }

.navbar-fixed-bottom { position: fixed; bottom: 0; left: 0; right: 0; background: white; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); z-index: 1050; }

/* Menú de categorías */
.category-tabs { align-items: flex-end; max-width: 500px; margin: 6px auto auto 0; padding: 0 16px; }

/* Niveles del arco (usamos margin-bottom para empujar hacia arriba) */
.arc-level-0 { margin-bottom: 0; }

.arc-level-1 { margin-bottom: 12px; }

.arc-level-2 { margin-bottom: 24px; }

/* Estilo de los enlaces */
.category-tabs .nav-link { background: #f3f3f300; border-radius: 30px; padding: 12px 8px; font-size: 12px; color: #555; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 60px; transition: all 0.25s ease; transform: translateY(0); }

.category-tabs .nav-link i { font-size: 20px; }

.category-tabs .nav-link:hover { background: #e9e9e9; }

.category-tabs .nav-link.active { background: #d18700; color: #ffffff; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.08); border-radius: 32px; transform: translateY(-6px); }

.btn-contacto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; background: #76db03; color: #ffffff; padding: 14px 18px; border-radius: 16px; font-weight: 600; text-decoration: none; width: 100%; margin: auto; transition: .3s; }

.btn-contacto small { font-size: 12px; opacity: 0.85; }

.btn-contacto:hover { background: #e73535; }

.header-menu { background: white; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); overflow: hidden; margin-bottom: 2rem; }

.header-menu img.logo { max-height: 200px; object-fit: contain; }

.hero-img { height: 180px; object-fit: cover; width: 100%; }

.seccion-title { background: linear-gradient(to right, var(--color-primary), var(--color-secondary)); color: white; padding: 12px 20px; border-radius: 10px; margin: 1.5rem 0 1.2rem; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }

.seccion { margin: 30px 0; }

.seccion-titulo { background: #000; color: #fff; padding: 5px; border-radius: 8px; }

.producto { background: white; padding: 14px; margin: 10px 0; border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); transition: transform 0.2s; }

.producto:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); }

.producto-precio { display: flex; justify-content: space-between; align-items: center; }

.precio { font-weight: bold; color: #e07a5f; float: right; font-size: 1.1em; }

.clear { clear: both; }

.nombre { font-weight: bold; font-size: 1.1em; }

.descripcion { font-size: 12px; }

.badge-domicilio { background: #4caf50; color: white; font-size: 0.85rem; padding: 4px 10px; border-radius: 20px; }

.contacto-bar { background: white; border-radius: 16px; padding: 16px; margin-top: 1.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }

.btn-whatsapp { background: #25D366; color: white; font-weight: 600; }

.btn-whatsapp:hover { background: #128C7E; color: white; }

footer { text-align: center; margin-top: 2rem; color: #777; font-size: 0.85rem; }

/* Wrapper: fijo en ancho, con scroll */
.menu-pagination-wrapper { width: 100%; overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding: 0 16px 8px; scrollbar-width: none; /* Ocultar scrollbar en Firefox */ -ms-overflow-style: none; /* Ocultar en IE/Edge */ }

/* Ocultar scrollbar en WebKit (Chrome, Safari) */
.menu-pagination-wrapper::-webkit-scrollbar { display: none; }

/* Contenedor interno: inline-flex para botones en fila */
.menu-pagination { display: inline-flex; gap: 10px; padding: 8px 0; }

/* Botones de paginación */
.pagination-btn { background: #f3f3f3; border: none; border-radius: 30px; padding: 8px 16px; font-size: 13px; color: #555; cursor: pointer; transition: all 0.25s ease; flex-shrink: 0; /* ¡Importante! Evita que se compriman */ white-space: nowrap; }

.pagination-btn.active { background: #d18700; color: white; transform: translateY(-3px); box-shadow: 0 4px 8px rgba(13, 110, 253, 0.25); }

.pagination-btn:hover:not(.active) { background: #e9e9e9; }

.text-orange { color: #d18700; }

.table-comparison th, .table-comparison td { vertical-align: middle !important; }

.table .text-success { font-weight: 500; }

.invitacion-demo { width: 100%; max-width: 360px; height: 600px; display: flex; align-items: center; justify-content: center; background-image: url("/assets/invitaciones/bodas/boda-ejemplo.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 15px; border: 5px solid #5f5f5fd8; box-shadow: 10px 10px 58px 0px rgba(0, 0, 0, 0.38); -webkit-box-shadow: 10px 10px 58px 0px rgba(0, 0, 0, 0.38); -moz-box-shadow: 10px 10px 58px 0px rgba(0, 0, 0, 0.38); }

.invitacion-demo .invitacion-layer { display: flex; flex-direction: column; align-items: center; justify-content: space-around; text-align: center; background: #00000067; width: 100%; height: 100%; border-radius: 15px; color: #fff; }

.invitacion-web { position: relative; width: 100%; height: 100vh; background: linear-gradient(to top, rgba(0, 0, 0, 0.575), rgba(0, 0, 0, 0.315)); color: white; font-family: "Cormorant Garamond", serif; overflow: hidden; }

.overlay { position: absolute; inset: 0; background-image: url("/assets/invitaciones/bodas/fondo-boda-2.webp"); background-size: cover; background-position: center; filter: brightness(0.4); z-index: 0; }

.contenedor { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; height: 100%; width: 100%; align-items: center; padding: 0 5%; }

/* Columna Izquierda */
.columna.texto { text-align: left; }

.nombres { font-size: 2.8rem; font-weight: 500; margin-bottom: 10px; }

.texto-principal { font-size: 3.5rem; font-weight: 400; margin: 30px 0; transition: opacity 1s ease; }

.iconos { display: flex; gap: 25px; font-size: 1.8rem; margin: 40px 0; }

.iconos i { cursor: pointer; transition: transform 0.3s, color 0.3s; }

.iconos i:hover { transform: scale(1.3); color: #ffebcd; }

.fecha { font-size: 1rem; opacity: 0.9; }

/* Columna Derecha */
.columna { position: relative; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.data { display: flex; flex-direction: column; justify-content: center; align-items: center; }

.data .day { font-size: 3.5rem; border-bottom: 2px solid #ffffff; }

.data .number { font-size: 4.5rem; }

.data .month { border-top: 2px solid #ffffff; font-size: 3.5rem; }

.data .time { font-size: 1.5rem; }

.data .location { font-size: 1.5rem; }

.data .title { font-size: 3.5rem; border-bottom: 2px solid #ffffff; }

.data .hour { font-size: 4.5rem; }

.espectro { position: relative; width: 100%; max-width: 360px; margin: 25px auto; cursor: pointer; border-radius: 8px; overflow: hidden; padding: 12px 0; }

#waveform-canvas { width: 100%; height: 60px; display: block; }

.estado-texto { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.95); background: rgba(0, 0, 0, 0.3); padding: 3px 10px; border-radius: 10px; pointer-events: none; user-select: none; }

/* Responsive para móviles */
@media (max-width: 768px) { .contenedor { grid-template-columns: 1fr; text-align: center; } .nombres { font-size: 2rem; } .texto-principal { font-size: 2.5rem; } }

.invitacion { width: 100%; max-width: 360px; height: 600px; display: flex; align-items: center; justify-content: center; background-image: url("/assets/invitaciones/bodas/boda-ejemplo.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 15px; border: 5px solid #ffffff7a; box-shadow: 10px 10px 58px 0px rgba(0, 0, 0, 0.38); -webkit-box-shadow: 10px 10px 58px 0px rgba(0, 0, 0, 0.38); -moz-box-shadow: 10px 10px 58px 0px rgba(0, 0, 0, 0.38); }

.invitacion .invitacion-layer { display: flex; flex-direction: column; align-items: center; justify-content: space-around; text-align: center; background: #00000010; width: 100%; height: 100%; border-radius: 15px; color: #fff; }

.pantalla { height: 100vh; overflow: hidden; }

.invitacionSeccion { display: none; /* Todas ocultas por defecto */ }

.invitacionSeccion.active { display: block; /* Solo la activa se muestra */ }

/* Opcional: animación suave al cambiar */
.invitacionSeccion { opacity: 0; transition: opacity 0.3s ease; }

.invitacionSeccion.active { opacity: 1; }

.itinerario-title { font-size: 3.5rem; font-weight: 400; margin: 30px 0; transition: opacity 1s ease; }

.selector-itinerario { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 20px; }

.selector-itinerario i { font-size: 1.8rem; color: #fff; cursor: pointer; transition: opacity 0.2s; }

.selector-itinerario i:hover { color: #ffdddd; }

/*# sourceMappingURL=main.css.map */