/* Galería en dos columnas siempre, imágenes centradas */ .gallery-grid { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 500px; margin: 0 auto; } .gallery-row { display: flex; width: 100%; justify-content: center; gap: 18px; } .gallery-row-vertical { flex-direction: row; } .gallery-row-horizontal { flex-direction: row; margin-top: 8px; } .gallery-img { display: block; border-radius: 14px; object-fit: cover; box-shadow: 0 2px 8px rgba(0,0,0,0.10); } .vertical-img { width: 32%; aspect-ratio: 3/4; min-width: 90px; max-width: 150px; height: auto; } .horizontal-img { width: 48%; aspect-ratio: 4/3; min-width: 120px; max-width: 220px; height: auto; } @media (max-width: 600px) { .gallery-grid { max-width: 98vw; gap: 10px; } .gallery-row { gap: 8px; } .gallery-img { border-radius: 10px; } .vertical-img { min-width: 60px; max-width: 90px; } .horizontal-img { min-width: 80px; max-width: 140px; } } /***** IMPORTAR LAS FUENTES *****/ @font-face { font-family: elegant; src: url(../fonts/ELEGANT\ DEMO.TTF) format("truetype"); } @font-face { font-family: cambria; src: url(../fonts/Cambria-Font.ttf) format("truetype"); } /***** VARIABLES *****/ :root { /* FONT-SIZES */ --font_size_modal_cuestionario: 1.5rem; --textos: 0.75rem; --textos0: 0.875rem; --textos1: 1.125rem; --textos2: 1rem; --textos3: 1.25rem; --textos4: 1.375rem; --textos5: 1.5rem; --textos5_1: 2rem; --textos5_2: 2.25rem; --textos5_3: 2.5rem; --textos5_4: 2.875rem; --textos6: 3.125rem; --textos7: 4rem; --textos8: 3.5rem; /* FONT FAMILY */ --font_family_titulos: elegant, sans-serif; --font_family_redaccion: cambria, sans-serif; /* COLORS */ --blanco: rgba(255, 255, 255, 1); /* rgba(255,255,255,1) */ --gris_oscuro: rgba(51, 51, 51, 1); /* rgba(51,51,51,1) */ --gris_claro: #e1e1e1; --negro: rgba(0, 0, 0, 1); /* rgba(0,0,0,1) */ --beige: #fcf7e4; --verde: #838367; --color_titulo: rgba(0, 0, 0, 1); --color_detalles: rgba(0, 0, 0, 1); --color_titulo2: rgba(0, 0, 0, 1); --color_botones: rgba(0, 0, 0, 1); --color_redaccion: rgba(252, 247, 228, 1); --color_redaccion2: rgba(0, 0, 0, 1); --blanco_transparente: rgba(43, 55, 74, 0.5); --negro_transparent: rgba(0, 0, 0, 0.8); --color_botones_transparent: rgba(0, 0, 0, 0.8); --color_botones_transparent05: rgba(0, 0, 0, 0.5); --color_botones_transparent03: rgba(0, 0, 0, 0.3); --color_titulo05: rgba(0, 0, 00.5); } /***** GENERAL *****/ .page-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: var(--beige); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; transform: translateZ(0); /* CLAVE para iOS */ } /* MÓVIL (iOS incluido) */ @media (max-width: 767px) { .page-bg { background-color: var(--beige); } } .back-portada { background: url(../images/fondos/Portada_monitor.png) no-repeat center center !important; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center top; margin: 0 !important; padding: 0 !important; min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; } @media (max-width: 767px) { .back-portada { background: url(../images/fondos/Portada_movil.png) no-repeat center center !important; background-size: cover !important; background-position: center top; height: auto; min-height: 100vh; } } .background-image-section { background: url(../images/save_the_date/galeria/IMG_1257.jpg) no-repeat center center; background-size: cover; min-height: 500px; display: flex; align-items: center; justify-content: center; } @media (max-width: 767px) { .background-image-section { zoom: 40%; } } /***** PARA LOS TITULOS *****/ h1, h2, h3, h4, h5, h6 { font-family: var(--font_family_titulos); color: var(--color_titulo); } /***** SELECTOR DE IDIOMA *****/ .idioma-selector { position: fixed; bottom: 100px; right: 20px; z-index: 997; display: flex; flex-direction: column; gap: 10px; background: rgba(255, 255, 255, 0.9); padding: 10px; border-radius: 25px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(0, 0, 00.2); } .btn-idioma { width: 45px; height: 45px; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); transition: all 0.3s ease; background: white; display: flex; align-items: center; justify-content: center; position: relative; } .btn-idioma:hover { transform: scale(1.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); } .btn-idioma:active { transform: scale(0.95); } .btn-idioma img { width: 80%; height: 80%; object-fit: contain; transition: transform 0.3s ease; } .btn-idioma:hover img { transform: scale(1.1); } .btn-idioma.active { border: 2px solid var(--color_botones); box-shadow: 0 0 0 3px rgba(0, 0, 00.25); } .btn-idioma.active::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; background: var(--color_botones); border-radius: 50%; } /* Efecto de tooltip */ .btn-idioma::before { content: attr(data-tooltip); position: absolute; right: 55px; top: 50%; transform: translateY(-50%); background: rgba(51, 51, 51, 0.9); color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; } .btn-idioma:hover::before { opacity: 1; visibility: visible; right: 50px; } /* Animación de aparición */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .idioma-selector { animation: fadeInDown 0.5s ease-out; } @media (max-width: 767px) { .idioma-selector { bottom: 100px; right: 15px; padding: 8px; } .btn-idioma { width: 38px; height: 38px; } .btn-idioma::before { font-size: 10px; padding: 4px 8px; } } /* Para dispositivos muy pequeños */ @media (max-width: 750px) { .idioma-selector { bottom: 100px; right: 10px; gap: 8px; border-radius: 20px; } .btn-idioma::before { bottom: auto; right: 50%; transform: translateX(50%); } .btn-idioma:hover::before { right: 50%; bottom: -25px; } } /***** PARA EL LOADER *****/ .preloader-background { display: flex; align-items: center; justify-content: center; background-color: var(--blanco); opacity: 0.8; position: fixed; z-index: 999999; top: 0; left: 0; right: 0; bottom: 0; } .lds-heart { display: inline-block; position: relative; width: 80px; height: 80px; transform: rotate(45deg); transform-origin: 40px 40px; } .lds-heart div { top: 32px; left: 32px; position: absolute; width: 32px; height: 32px; background: var(--color_titulo); animation: lds-heart 1.0s infinite cubic-bezier(0.215, 0.61, 0.355, 1); } .lds-heart div:after, .lds-heart div:before { content: " "; position: absolute; display: block; width: 32px; height: 32px; background: var(--color_titulo); } .lds-heart div:before { left: -24px; border-radius: 50% 0 0 50%; } .lds-heart div:after { top: -24px; border-radius: 50% 50% 0 0; } @keyframes lds-heart { 0% { transform: scale(0.95); } 5% { transform: scale(1.1); } 39% { transform: scale(0.85); } 45% { transform: scale(1); } 60% { transform: scale(0.95); } 100% { transform: scale(0.9); } } /***** PARA EL BUTTON TOP PAGE *****/ .btn-floating { background-color: var(--color_botones_transparent); } .btn-floating:hover { background-color: var(--color_botones); } .btn-floating i { font-size: var(--textos5); line-height: inherit!important; } /***** PARA EL BOTON FLOATING *****/ .audio-floating-btn { bottom: 100px; } .audio-floating-btn ul li .btn-floating i { width: var(--textos5); color: var(--blanco); } /***** PARA LOS MODALES GENERAL *****/ .modal { width: 80%!important; height: 100%!important; max-height: 75%!important; } .title_cards_modales { font-family: var(--font_family_titulos); padding: 15px; } .body_text_modal { color: var(--color_botones); } /***** PARA EL MODAL DE CONFIRMACIÓN CUESTIONARIO *****/ #modal_mensaje { width: 80%!important; font-size: var(--textos5); height: auto!important; } #modal_ceremonia, #modal_recepcion, #modal_ceremonia .modal-footer, #modal_recepcion .modal-footer { background: var(--blanco); } #modal_ceremonia .modal-footer { display: flex; justify-content: center; align-items: center; padding: 12px 0 20px 0; background: transparent; border-top: none; position: sticky; bottom: 0; z-index: 2; } #modal_ceremonia .modal-footer .btn { width: 90%; max-width: 300px; margin: 0 auto; } @media (max-width: 600px) { #modal_ceremonia .modal-content { padding-bottom: 80px; /* deja espacio para el footer fijo */ max-height: 70vh; overflow-y: auto; } #modal_ceremonia .modal-footer { position: fixed; left: 0; bottom: 0; width: 100vw; background: rgba(255,255,255,0.95); box-shadow: 0 -2px 8px rgba(0,0,0,0.07); z-index: 1002; padding: 10px 0 18px 0; } #modal_ceremonia .modal-footer .btn { width: 94vw; max-width: 400px; font-size: 1.1rem; } } .modal_text_texto { color: var(--color_redaccion)!important; } /***** PARA EL IFRAME DE MAPS *****/ .maps { width: 100%; height: 250px; } /***** PARA LOS BOTONES *****/ .bg-buttons, .bg-buttons:hover, .bg-buttons:focus { background-color: var(--color_botones); font-weight: bolder; color: var(--blanco); font-family: var(--font_family_redaccion); } .bg-buttons2, .bg-buttons2:hover, .bg-buttons2:focus { background-color: var(--color_titulo); font-weight: bolder; color: var(--blanco); font-family: var(--font_family_redaccion); } /***** PARA EL MENU *****/ #mobile-demo /***** Para el menu *****/ { background-color: var(--color_botones_transparent); width: 275px; } .sidenav li>a /***** Para las letras del menu *****/ { -webkit-transition: background-color .3s; transition: background-color .3s; font-size: var(--textos0); color: var(--blanco); font-weight: 600; display: block; padding: 0 10px; cursor: pointer; font-family: var(--font_family_redaccion); } @media (max-width: 767px) { .sidenav li>a { font-size: var(--textos0); } } .sidenav li>a:hover /***** Para el hover de las letras del menu *****/ { background-color: var(--color_botones_transparent03); } .li_inicio /***** Para los li del sidenav left *****/ { margin-top: 30%; } @media (min-width: 768px) and (max-width: 1199px) { .li_inicio { margin-top: 45%!important; } } @media (max-width: 767px) { .li_inicio { margin-top: 10%; } } .li_cont /* Para los elementos del menú */ { margin-top: 5%; } @media (max-width: 767px) { .li_cont { margin-top: 0; } } nav.hide-on-med-and-down { background: #fff !important; } nav.hide-on-med-and-down ul#nav-mobile > li > a { color: #b4505d !important; font-weight: 500; font-size: 1.1rem; letter-spacing: 1px; } #iconArrow /*Para el icono para abrir el menú*/ { height: 56px; line-height: 56px; position: absolute; z-index: 9; left: 20px; color: var(--blanco); top: 50%; background-color: var(--color_botones_transparent)!important; } #iconArrow i /* Para el icono de abrir el menu sidenavleft */ { font-size: var(--textos5); } .close_icon_sidenav /* Para cerrar el menu left sidenav */ { color: var(--blanco); font-size: var(--textos1); position: absolute; right: 10px; } #iconHamburguer /* Para el icono hamburguer abrir el menu */ { height: 56px; line-height: 56px; color: var(--verde_limon); position: absolute; z-index: 9; left: 20px; font-size: var(--textos1); } /***** PARA LOS TEXTOS *****/ .font5 { font-size: var(--textos5); } .font0 { font-size: var(--textos0); } .font1 { font-size: var(--textos1); } .font3 { font-size: var(--textos3); } /***** PARA LAS CARDS *****/ .title_cards /* Titulos de las tarjetas */ { font-family: var(--font_family_titulos); color: var(--color_titulo); } .mycard /* En caso de que se quiera poner algun adorno a las tarjetas de las mesas de regalo Habilitar */ { border: 10px double var(--color_botones); background-color: transparent; } /***** PARA LA INVITACIÓN EN VIDEO O IMAGEN *****/ #overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--negro_transparent); z-index: 99999; cursor: pointer; } #text_invitacion { position: absolute; font-size: var(--textos3); color: var(--blanco); right: 0; padding:20px!important; } #video { position: absolute; top: 52%; left: 50%; font-size: var(--textos6); color: var(--blanco); transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); outline: none; border: 0; } @media (max-width: 767px) { #video { width: 100%; } } #overlay .video_invitacion { width: 55%; /*55*/ max-width: 80%; /*80*/ max-height: 100%; } @media (max-width: 767px) { #overlay .video_invitacion { width: 80%; max-width: 80%; max-height: 90%; } } /***** PARA EL PARALLAX PRINCIPAL *****/ #parallax-container-principal /* Abarcamos el 100% del alto de la pantalla */ { height: 100vh; } .parallax-container #img_parallax_principal_movil img /* Para la imagen del fondo del celular */ { transform: translate3d(0, 0, 0); transform: scale(.6) translateY(50%) translateX(-75%)!important; /* Agregar este si la imagen es muy grande */ -webkit-transform: translate3d(0, 0, 0); } .parallax-container #img_parallax_principal img /* Para la imagen del fondo de portada principal */ { /* HABILITAR TODOS LOS BLOQUES Y JUGAR CON LOS PORCENTAJES SI LA PORTADA ES GRANDE */ /* -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); */ /* -webkit-transform: scale(0.8) translateY(40%) translateX(-60%)!important; Agregar este si la imagen es muy grande */ /* -webkit-transform: translateY(40%) translateX(-60%)!important; */ /* transform: translateY(40%) translateX(-60%)!important; */ transform: scale(1) translateY(10%) translateX(-50%)!important; /* Agregar este si la imagen es muy grande */ } @media (min-width: 1500px) { #img_parallax_principal { height: 100vh; } } @media (max-width: 1280px) { .parallax-container #img_parallax_principal img /* Para la imagen del fondo de portada principal */ { transform: scale(1) translateY(5%) translateX(-45%)!important; /* Agregar este si la imagen es muy grande */ } } @media (max-width: 1279px) { .parallax-container #img_parallax_principal img /* Para la imagen del fondo de portada principal */ { transform: scale(1) translateY(0) translateX(-45%)!important; /* Agregar este si la imagen es muy grande */ } } @media (min-width: 768px) and (max-width: 1199px) { .parallax-container #img_parallax_principal img { transform: scale(1) translateY(0) translateX(-45%)!important; /* Agregar este si la imagen es muy grande */ } } .seccionportada /* Contiene principal el emblema y el contador */ { width: 100%!important; position: absolute; height: 100%; } .seccionportada div.contenedor_emblema .logoemblema { width: 30%; margin-right: 5%; margin-left: auto; display: block; margin-top: 3%; } @media (max-width: 1280px) { .seccionportada div.contenedor_emblema .logoemblema { width: 300px; margin-right: 5%; margin-left: auto; margin-top: 25vh; display: block; margin-bottom: 0; } } @media (max-width: 1279px) { .seccionportada div.contenedor_emblema .logoemblema { width: 300px; margin-right: 5%; margin-left: auto; margin-top: 25vh; display: block; margin-bottom: 0; } } @media (min-width: 768px) and (max-width: 1199px) { .seccionportada div.contenedor_emblema .logoemblema { width: 300px; display: block; margin-left: auto; margin-right: 5%; margin-top: 25vh; margin-bottom: auto; } } @media (max-width: 767px) { .seccionportada div.contenedor_emblema .logoemblema { width: 60%; display: flex; margin-left: auto; margin-right: auto; margin-top: 5%; align-items: center; } } /* Estilos para el timer */ .back-timer { background-color: var(--color_botones); background-size: cover; background-position: center; width: 100vw; height: auto; min-height: 500px; display: flex; align-items: center; justify-content: center; padding: 20px; } #timerCont { display: flex; justify-content: space-between; align-items: center; text-align: center; font-size: 6rem; font-weight: bold; color: var(--blanco); width: 80%; } .timer-box { display: flex; flex-direction: column; align-items: center; font-size: 3rem; } @media (max-width: 767px) { .back-timer { background-color: var(--color_botones); background-size: cover; width: 100vw; height: auto; min-height: 100px; display: flex; align-items: center; justify-content: center; padding: 30px; } #timerCont { display: flex; justify-content: space-between; align-items: center; text-align: center; font-size: 2rem; font-weight: bold; color: white; width: 100%; font-family: var(--font_family_redaccion); } .timer-box { display: flex; flex-direction: column; align-items: center; font-size: 1.5rem; } } /* TIMER SECTION AJUSTES */ .timer-section { background-color: var(--verde); width: 90%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; margin: auto; border-radius: 30px; box-shadow: 0 4px 15px rgba(107, 107, 107, 0.89); } .timer-title-row { width: 100%; display: flex; justify-content: center; margin-bottom: 30px; color: var(--blanco); } .timer-title { text-align: center; width: 100%; margin: 0; color: var(--beige); font-family: var(--font_family_redaccion); } .timer-boxes-row { display: flex; justify-content: center; align-items: flex-end; width: 100%; gap: 30px; } .timer-box { border-radius: 18px; padding: 18px 24px; font-size: 3rem; color: var(--beige); min-width: 80px; text-align: center; font-family: var(--font_family_redaccion); } @media (max-width: 767px) { .timer-section { padding-top: 30px; padding-left: 20px; padding-right: 20px; width: 100%; margin: auto; border-radius: unset; } .timer-title-row { margin-bottom: 18px; } .timer-title { text-align: center; width: 100%; margin: 0; font-size: 2.5rem; font-family: var(--font_family_redaccion); } .timer-boxes-row { gap: 10px; } .timer-box { font-size: 1.3rem; min-width: 45px; padding: 10px 8px; } } /***** PARA AGREGAR SOMBRA AUN CONTENEDOR O IMAGEN *****/ .drop { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8)); } /***** PARA LOS TITULOS DE LAS SECCIONES *****/ .section_title { font-family: var(--font_family_titulos); font-size: var(--textos6); text-transform: capitalize; color: #9ca23d; } @media (max-width: 767px) { .section_title { font-size: var(--textos6); } } .section_titleG { font-family: var(--font_family_titulos); font-size: var(--textos6); text-transform: capitalize; color: var(--rosa_mex); } @media (max-width: 767px) { .section_titleG { font-size: var(--textos6); } } .section_titlede { font-family: var(--font_family_titulos); font-size: var(--textos6); text-transform: capitalize; color: var(--naranja); } @media (max-width: 767px) { .section_titlede { font-size: var(--textos6); } } .section_titleM { font-family: var(--font_family_titulos); font-size: var(--textos6); text-transform: capitalize; color: var(--color_titulo); } @media (max-width: 767px) { .section_titleM { font-size: var(--textos6); } } .section_titleS { font-family: var(--font_family_titulos); font-size: var(--textos6); text-transform: capitalize; color: var(--rosa); } @media (max-width: 767px) { .section_titleS { font-size: var(--textos6); } } .section_titleC { font-family: var(--font_family_titulos); font-size: var(--textos7); text-transform: capitalize; color: var(--beige); } @media (max-width: 767px) { .section_titleC { font-size: var(--textos6); } } .section_titleD { font-family: var(--font_family_titulos); font-size: var(--textos6); color: var(--negro); } @media (max-width: 767px) { .section_titleD { font-size: var(--textos6); } } .section_titleH { font-family: var(--font_family_titulos); font-size: var(--textos6); text-transform: capitalize; color: var(--beige); } @media (max-width: 767px) { .section_titleH { font-size: var(--textos6); } } .section_title_encabezado { font-family: var(--font_family_redaccion); font-size: var(--textos6); text-transform: uppercase; color: var(--color_titulo); letter-spacing: 10px; } @media (max-width: 1280px) { .section_title_encabezado { font-family: var(--font_family_redaccion); font-size: var(--textos5_1); text-transform: uppercase; color: var(--color_titulo); letter-spacing: 10px; } } /***** PARA LOS SUBTITULOS DE LAS SECCIONES *****/ .subtitle_section_title { font-family: var(--font_family_titulos); font-size: var(--textos5_3); color: var(--naranja); } @media (max-width: 767px) { .subtitle_section_title { font-size: var(--textos5_3); } } .subtitle_section_title2 { font-family: var(--font_family_redaccion); font-size: var(--textos5_1); color: var(--negro); } @media (max-width: 767px) { .subtitle_section_title2 { font-size: var(--textos5); } } .subtitle_section_titlede { font-family: var(--font_family_redaccion); font-size: var(--textos5_1); color: var(--blanco); } @media (max-width: 767px) { .subtitle_section_titlede { font-size: var(--textos5); } } .subtitle2_section_title { font-family: var(--font_family_redaccion); font-size: var(--textos5_3); color: var(--verde); } @media (max-width: 767px) { .subtitle2_section_title { font-size: var(--textos5); } } .subtitle2_section_titleC { font-family: var(--font_family_titulos); font-size: var(--textos5_3); color: var(--color_titulo); } @media (max-width: 767px) { .subtitle2_section_titleC { font-size: var(--textos5_2); } } .subtitle2_section_title2 { font-family: var(--font_family_redaccion); font-size: var(--textos5_3); color: var(--verde); } @media (max-width: 767px) { .subtitle2_section_title2 { font-size: var(--textos5); } } .subtitle2_section_title3 { font-family: var(--font_family_redaccion); font-size: var(--textos4); color: var(--verde); } @media (max-width: 767px) { .subtitle2_section_title3 { font-size: var(--textos3); } } .subtitle2_section_titleF { font-family: var(--font_family_redaccion); font-size: var(--textos5_4); color: var(--color_redaccion); } @media (max-width: 767px) { .subtitle2_section_titleF { font-size: var(--textos5_1); } } .subtitle3_section_title { font-family: var(--font_family_redaccion); font-size: var(--textos5_3); color: #F4F1E9; font-weight: 600; /* text-shadow: black 0.01em 0.01em 0.05em; */ } @media (max-width: 767px) { .subtitle3_section_title { font-size: var(--textos5_2); } } .redaccion_seccion { font-family: var(--font_family_redaccion); font-size: var(--textos4); color: var(--color_redaccion); } .redaccion_seccionH { font-family: var(--font_family_redaccion); font-size: var(--textos4); color: var(--color_redaccion); } @media (max-width: 767px) { .redaccion_seccionH { font-size: var(--textos3) } } .redaccion_seccionM { font-family: var(--font_family_redaccion); font-size: var(--textos5); color: var(--color_titulo); } @media (max-width: 767px) { .redaccion_seccionM { font-size: var(--textos4) } } .redaccion_seccion2 { font-family: var(--font_family_redaccion); font-size: var(--textos5_3); color: var(--verde); } @media (max-width: 767px) { .redaccion_seccion2 { font-size: var(--textos5); } } .redaccion_seccion3 { font-family: var(--font_family_redaccion); font-size: var(--textos5); color: var(--color_redaccion); } @media (max-width: 767px) { .redaccion_seccion3 { font-size: 1rem; } } /***** PARA LOS FONDOS DE LAS SECCIONES *****/ #section_ubication { background: url(../images/fondos/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 767px) { #section_ubication { background: url(../images/fondos/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } .sectiondetalles { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #section_cronograma { width: 100%; background-color: var(--verde); } #section_cronograma .titulo { color: #F4F1E9; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } #section_torna_boda { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #section_mesa_regalos { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .bbva { background-color: var(--verde); } #section_dresscode { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #section_dresscode .section_title { /* color: var(--color_titulo2); */ } #section_dresscode .img-icono-dresscode { width: 10%; } @media (max-width: 767px) { #section_dresscode .img-icono-dresscode { width: 30%; } } @media (min-width: 768px) and (max-width: 1199px) { #section_dresscode .img-icono-dresscode { width: 30%; } } .notarenta { font-family: var(--font_family_redaccion); } .nota_dresscode_redaccion{ font-family: var(--font_family_redaccion); font-size: var(--textos5_1); color: var(--color_redaccion); } #section_dresscode .nota_dresscode { font-family: var(--font_family_redaccion); color: var(--blanco); /* color: var(--color_redaccion); display: block; */ } @media (max-width: 767px) { #section_dresscode { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; /* color: var(--blanco)!important; background: #C6B0C2; */ } #section_dresscode .section_title { /* color: var(--color_titulo); */ } #section_dresscode .nota_dresscode { /* color: var(--color_redaccion); */ } } .codigo_vestimenta_img { width: 30%; } @media (min-width: 1500px) { .codigo_vestimenta_img { width: 30%; } } @media (max-width: 1280px) { .codigo_vestimenta_img /* Para la imagen del fondo de portada principal */ { width: 70%; } } #section_savedate .section_title { color: var(--color_titulo2); } .gallery-img { display: block; width: 100%; height: auto; margin-bottom: 20px; cursor: pointer; border-radius: 10px; object-fit: cover; } /* Evitar que imágenes hijas crezcan fuera de su columna */ .gallery-col .inner-row .col img { height: 100%; max-height: 100%; } /* Alineación consistente dentro de columnas (prevent gaps) */ .gallery-row { gap: 0; } /* Asegura que la imagen final no rompa el layout en móviles */ #gallery-final { width: 100%; height: auto; max-height: none; } /* Reglas específicas para vista monitor (pantallas grandes) */ @media (min-width: 992px) { /* Hacemos que las columnas tengan la misma altura visual si es necesario */ .gallery-col { display: flex; flex-direction: column; } /* Igualar el espacio entre imágenes dentro de la columna evitando huecos */ .gallery-col img { flex-shrink: 0; } /* La imagen final ocupa toda la fila al final y será más alta */ .gallery-final-col { margin-top: 10px; } /* Solo en monitor hacemos la última imagen más alta sin distorsionar */ #gallery-final { height: 520px; object-fit: cover; } /* Evitar que las imágenes de columnas se vuelvan demasiado grandes */ .gallery-col > img, .gallery-col .inner-row .col img { max-height: 240px; object-fit: cover; } /* Ajuste fino para las horizontales dentro de columna */ .gallery-col > img:first-child, .gallery-col > img:last-child { max-height: 240px; } } /* En pantallas muy anchas puedes aumentar la altura de la final */ @media (min-width: 1400px) { #gallery-final { height: 640px; } } #section_savedate { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden; } @media (max-width: 767px) { #section_savedate { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; margin: 0%; overflow: hidden; } } #section_hashtag { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden; } @media (max-width: 767px) { #section_hashtag { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden; } } #section_otros { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #section_otros .img-icono-banco{ width: 20%; } @media (max-width: 767px) { #section_otros .img-icono-banco { width: 70%; } } @media (min-width: 768px) and (max-width: 1199px) { #section_otros .img-icono-banco { width: 70%; } } #section_otros .section_title { /* color: var(--color_titulo) */ } #section_otros .nota_dresscode { /* color: var(--color_titulo) */ } @media (max-width: 767px) { #section_otros { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } #section_section_lluvia_sobres { background: url(../images/fondos/#!) no-repeat center center ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 767px) { #section_lluvia_sobres { background: url(../images/fondos/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } #section_comentarios { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 767px) { #section_comentarios { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } #section_salud { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 767px) { #section_salud { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } #section_agradecimientos { background-color: var(--beige); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 767px) { #section_agradecimientos { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } #primero{ background-color: var(--verde); } #section_hospedaje { background-color: var(--verde); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* @media (max-width: 767px) { #section_hospedaje { background: url(../images/fondos/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } */ /***** PARA LINEA VERTICAL *****/ .vl { border-left: 3px solid var(--color_titulo); height: 200px; width: 1px; position: relative; left: 50%; margin-left: -3px; } /***** PARA EL CRONOGRAMA DE IMAGEN *****/ .cronograma_img { width: 50%; } @media (max-width: 767px) { .cronograma_img { width: 100%; } } .cronograma-monitor { display: block; } .cronograma-movil { display: none; } /* En pantallas de 767px o menos (móvil), muestra solo la imagen móvil */ @media (max-width: 767px) { .cronograma-monitor { display: none !important; } .cronograma-movil { display: block !important; } } /***** PARA EL ICONO DE INSTAGRAM EN FORMATO TEXTO*****/ #section_hashtag i.icono_instagram { color: var(--color_titulo); } .IconoInsta { width: 15%; } @media (max-width: 767px ){ .IconoInsta { width: 50%; } } /***** PARA EL TEXTO DEL HASHTAG *****/ #section_hashtag p.texto_hashtag { color: var(--color_redaccion); text-transform: revert; } /***** PARA EL ENLACE DEL HASHTAG *****/ #section_hashtag a.enlace_hashtag { color: var(--color_botones); font-weight: bold; } #section_hashtag a.bg-button-ig, #section_hashtag a.bg-button-ig:hover, #section_hashtag a.bg-button-ig:focus { background-color: var(--color_botones)!important; font-weight: bolder; color: var(--blanco)!important; font-family: var(--font_family_redaccion)!important; } /***** PARA LA SECCIÓN DE MESA DE REGALOS *****/ .mi-container-mesa { /* width: 100%!important; */ } @media (max-width: 767px) { .mi-container-mesa { width: 100%!important; } } /***** CAROUSEL PARA LIBRO DE FIRMAS *****/ .carousel-libro-firmas .carousel-item { background-color: var(--color_botones_transparent); color: var(--blanco); opacity: 1; overflow-y: auto; padding: 80px 50px 80px 50px; } .carousel-libro-firmas .indicators .indicator-item.active { background-color: var(--color_redaccion);; } .carousel-libro-firmas .indicators .indicator-item { background-color: var(--color_redaccion);; } /***** PARA EL FORMULARIO *****/ [type="checkbox"].filled-in:checked+span:not(.lever):after /* Para los checkbox*/ { top: 0; width: 20px; height: 20px; border: 2px solid var(--color_redaccion2)!important; background-color: var(--color_redaccion2)!important; z-index: 0; } textarea.materialize-textarea:focus:not([readonly]) /* Para los text area que no son readonly*/ { border-bottom: 1px solid var(--color_redaccion2); -webkit-box-shadow: 0 1px 0 0 var(--color_redaccion2); box-shadow: 0 1px 0 0 var(--color_redaccion2); } input::placeholder{ color: var(--color_botones) !important; } .inpuColor /* Para inputs en especifico */ { color: var(--color_redaccion2); } .input-field-color label /* para los inputs en general */ { color: black; } .input-field-color input,.input-field-color textarea /* label input text underline focus color */ { border-bottom: 1px solid black!important; } .input-field-color input:focus + label, .input-field-color textarea:focus + label /* label titulo focus color */ { color: var(--color_redaccion2)!important; } .input-field-color input:focus, .input-field-color textarea:focus/* label input text underline focus color */ { border-bottom: 1px solid var(--color_redaccion2)!important; box-shadow: 0 1px 0 0 var(--color_redaccion2)!important; } .input-field-color input:focus,.input-field-color textarea:focus /* label input text underline focus color */ { border-bottom: 1px solid var(--color_redaccion2)!important; box-shadow: 0 1px 0 0 var(--color_redaccion2)!important; } [type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:after /* Para el radibutton */ { background-color: var(--color_redaccion2); border: 2px solid var(--color_redaccion2); } .input-field-colorFN label { color: var(--color_redaccion2); } .input-field-colorFNV{ font-family: var(--font_family_redaccion); color: var(--color_botones); } .input-field-colorFN input,.input-field-colorFN textarea /* label input text underline focus color */ { border-bottom: 1px solid var(--color_redaccion2)!important; } .input-field-colorFN input:focus + label, .input-field-colorFN textarea:focus + label /* label titulo focus color */ { color: var(--color_redaccion2)!important; } .input-field-colorFN input:focus, .input-field-colorFN textarea:focus/* label input text underline focus color */ { border-bottom: 1px solid var(--color_redaccion2)!important; box-shadow: 0 1px 0 0 var(--color_redaccion2)!important; } .input-field-colorFN input:focus,.input-field-colorFN textarea:focus /* label input text underline focus color */ { border-bottom: 1px solid var(--color_redaccion2)!important; box-shadow: 0 1px 0 0 var(--color_redaccion2)!important; } .dropdown-content li>a, .dropdown-content li>span { font-size: 16px; color: var(--color_redaccion2); display: block; line-height: 22px; padding: 14px 16px; } .select-wrapper .caret { fill: var(--color_redaccion2); } .select-wrapper input.select-dropdown { color: var(--color_redaccion2); } .input-field-colorFN p { color: var(--color_redaccion2); } .input-field-colorFN{ font-family: var(--font_family_redaccion); } #alert_questions /*´Para el alert del form */ { font-size:10px; padding: 8px; background-color: var(--color_titulo); } /***** PARA EL FOOTER *****/ .page-footer { background-color: rgba(255, 255, 255, 0.8); } @media (max-width: 767px) { .page-footer { background-color: rgba(255, 255, 255, 0.8); } } .page-footer .footer-copyright { background-color: rgba(255, 255, 255, 0.8); } @media (max-width: 767px) { .page-footer .footer-copyright { background-color: rgba(255, 255, 255, 0.8); } } /***** PARA QUE SE MUESTREN CORRECTAMENTE LAS IMAGENES DE LOS PARRALAX ******/ .parallax-container .mi_parallax { z-index: 1; } /***** PARA LAS SECCIONES DE LOS PARALLAX IMAGENES *****/ .parallaxlast2 { transform: translateX(0) translateY(-20%) scale(1)!important; /* filter: brightness(0.5); -webkit-filter: brightness(0.5); */ } @media (max-width: 1279px) { .parallaxlast2 { transform: translateX(-10%) translateY(-20%) scale(1)!important; } } @media (max-width: 767px) { .parallaxlast2 { transform: translateX(-10%) translateY(-20%) scale(0.8)!important; } } .parallaxlast3 { zoom:5%; transform: translateX(0) translateY(50%) scale(1)!important; /* filter: brightness(0.5); -webkit-filter: brightness(0.5); */ } @media (max-width: 767px) { .parallaxlast3 { zoom: 20%; transform: translateX(-20%) translateY(0) scale(1)!important; } } .parallaxlast4 { zoom: 15%; transform: translateX(0) translateY(-60%) scale(1)!important; /*filter: brightness(0.5); -webkit-filter: brightness(0.5);*/ } @media (max-width: 767px) { .parallaxlast4 { zoom:15%; transform: translateX(-5%) translateY(-30%) scale(1)!important; } } /* Para el contenedor especifico de la fecha, en caso de ser texto colocamos el color */ .seccionportada div#contenedor_fecha { color: var(--color_titulo); font-family: var(--font_family_redaccion); margin-top: -100px; /* Para que se encuentre un poco pegado al logo en caso de tener si no comentar */ } @media (max-width: 767px) { .seccionportada div#contenedor_fecha { color: var(--color_titulo); } } #section_agradecimientos div#contenedor_fecha, #section_ubication div#contenedor_fecha { color: var(--color_titulo2); font-family: var(--font_family_redaccion); font-size: var(--textos5_4); } @media (max-width: 767px) { #section_agradecimientos div#contenedor_fecha, #section_ubication div#contenedor_fecha { color: var(--color_titulo2); font-size: var(--textos5_1); } } /***** PARA EL CARUSEL DE VESTIMENTA *****/ .carousel-dress-code { height: 300px; /* Cambia esto al valor deseado */ } .carousel-dress-code .carousel-item img { height: 100%; /* Ajusta la imagen para que ocupe toda la altura del contenedor */ object-fit: contain; /* Ajusta esta propiedad según tus necesidades (cover, contain, etc.) */ } @media (max-width: 767px) { .carousel-dress-code { height: 250px; /* Cambia esto al valor deseado */ } } /* .carousel { overflow: hidden; position: relative; width: 100%; height: 400px; -webkit-perspective: 500px; perspective: 500px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; } */ /* .carousel .carousel-item>img { width: 100%; } */ /***** EN CASO DE HABER GALERIA REVUELTA GRID *****/ /* ---- isotope ---- */ /*.grid { background: #fffff9; } .grid:after { content: ''; display: block; clear: both; } .grid-sizer, .grid-item { width: 33.333%; } .grid-item { float: left; } .grid-item img { display: block; max-width: 100%; }*/ /***** PARA EL IDIOMA *****/ /*Habilitar en caso de haber textos para cambiar de idioma*/ /* .idiomas a { text-decoration: underline; color: #4c1c56; font-weight: 600; } */ /***** PARA EL TAB MENU DE GALERIAS EN CASO DE HABER MÁS DEL SAVE THE DATE *****/ /* #menu_galeria .tab a:hover, #menu_galeria .tab a.active { background-color: transparent; color: var(--color_botones); } #menu_galeria .indicator { position: absolute; bottom: 0; height: 2px; background-color: var(--color_botones); will-change: left, right; } .tabs .tab a { color: var(--color_botones_transparent05); display: block; width: 100%; height: 100%; padding: 0 24px; font-size: 14px; text-overflow: ellipsis; overflow: hidden; -webkit-transition: color .28s ease, background-color .28s ease; transition: color .28s ease, background-color .28s ease; } */ /***** PARA CUANDO SE HAGA EL SCROLL LAS IMAGENES DE FONDO TENGAN ESE EFECTO *****/ @supports ( -webkit-touch-callout : none) { @media (max-width: 767px) { #section_agradecimientos { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #section_hospedaje { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } } @supports not ( -webkit-touch-callout : none) { @media (max-width: 767px) { #section_agradecimientos { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #section_hospedaje { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } #section_ubication, #section_cronograma, #section_torna_boda, #section_dresscode, #section_savedate, #section_hashtag, #section_otros, #section_comentarios, #section_salud, #section_agradecimientos, #section_hospedaje, #section_lluvia_sobres, .back-portada { background-attachment: fixed; } } .text_texto_color_titulo { color: var(--color_titulo05)!important; } .morephotos { display: none; } .texto-imagenes { font-size: 2.56rem; } @media (max-width: 767px) { .texto-imagenes { font-size: 1.2rem; } } .texto-color1 { color: var(--color_botones); } .hide-content-movil { } @media (max-width: 767px) { .hide-content-movil { display: none; } .hide-content-desktop { display: block; } } .hide-content-desktop { } @media (min-width: 768px) { .hide-content-movil { display: block; } .hide-content-desktop { display: none; } } .img-galeria { width: 350px; height: 530px; } @media (max-width: 767px) { .img-galeria { width: 100px; height: 151px; } } @media (min-width: 768px) and (max-width: 1199px) { .img-galeria { width: 200px; height: 303px; } } .faq-item { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.2); } .faq-item:last-child { border-bottom: none; } .faq-pregunta { font-family: var(--font_family_redaccion); font-size: 1.2rem; color: var(--verde); margin-bottom: 10px; letter-spacing: 0.5px; } .faq-respuesta { font-family: var(--font_family_redaccion); font-size: 0.9rem; color: rgba(255,255,255,0.9); line-height: 1.7; margin-bottom: 6px; text-align: left; } .faq-taxi-principal { margin: 15px 0; padding: 15px; background: rgba(255,255,255,0.08); border-radius: 8px; } #separacion_frase{ width: 50%; } .img-separacion { width: 10%; } @media (max-width: 767px) { .img-separacion { width: 40%; object-fit: cover; height: auto; } } @media (min-width: 768px) and (max-width: 1199px) { .img-separacion { width: 100%; object-fit: cover; height: auto; } } .img-separacionF { width: 50%; } @media (max-width: 767px) { .img-separacionF { width: 100%; object-fit: cover; height: auto; } } .img-separacionlogo { width: 30%; } @media (max-width: 767px) { .img-separacionlogo { width: 50%; object-fit: cover; height: auto; } } @media (min-width: 768px) and (max-width: 1199px) { .img-separacionlogo { width: 50%; object-fit: cover; height: auto; } } .img-separacionC { width: 50%; } @media (max-width: 767px) { .img-separacionC { width: 100%; object-fit: cover; height: auto; } } @media (min-width: 768px) and (max-width: 1199px) { .img-separacionC { width: 100%; object-fit: cover; height: auto; } } .img-separacion1 { width: 15%; } @media (max-width: 767px){ .img-separacion1{ width: 30%; } } .img-separacion2 { width: 40%; } @media (max-width: 767px){ .img-separacion2{ width: 100%; } } .img-separacionD { width: 30%; } @media (max-width: 767px) { .img-separacionD { width: 50%; } } .img-separacionIn { width: 20%; } @media (max-width: 767px) { .img-separacionIn { width: 60%; } } @media (min-width: 768px) and (max-width: 1199px) { .img-separacionIn { width: 60%; } } .img-junto { width: 15%; margin-top: -130px; margin-bottom: -180px; position: relative; z-index: 10; } @media (max-width: 767px) { .img-junto { margin-top: -130px; margin-bottom: -150px; width: 60%; } } .img-separacionIg { width: 30%; } @media (max-width: 767px) { .img-separacionIg { width: 80%; } } @media (min-width: 768px) and (max-width: 1199px) { .img-separacionIg { width: 80%; } } .img-separacionAnillos { width: 10%; } @media (max-width: 767px) { .img-separacionAnillos { width: 35%; } } @media (min-width: 768px) and (max-width: 1199px) { .img-separacionAnillos { width: 35%; } } .regalo { width: 10%; } @media (max-width: 767px) { .regalo { width: 30%; } } .regalo2 { width: 15%; } @media (max-width: 767px) { .regalo2 { width: 50%; } } /***** PARA LA SECCIÒN DONDE SE MUESTRAN LAS INVITACIONES *****/ .login_invitaciones { background: url(../images/fondos/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100vh; color: var(--color_redaccion2); background-color: var(--gris_oscuro); } @media (max-width: 767px) { .login_invitaciones { background: url(../images/fondos/#!) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: var(--gris_oscuro); } } .container_card_login { display: flex; justify-content: center; align-items: center; height: 100vh; } #card_login { border: 2px solid white; padding: 20px; } .input-field-white label { color: #fff; } .input-field-white input[type=text],.input-field-white input[type=password],.input-field-white select /* label input text underline focus color */ { border-bottom: 1px solid #fff!important; color: #fff!important; } .input-field-white input[type=text]:focus + label /* label titulo focus color */ { color: #fff!important; } .input-field-white select:focus + label /* label titulo focus color */ { color: #fff!important; } .input-field-white input[type=text]:focus /* label input text underline focus color */ { border-bottom: 1px solid #fff!important; box-shadow: 0 1px 0 0 #fff!important; } .input-field-white input[type=password]:focus /* label input text underline focus color */ { border-bottom: 1px solid #fff!important; box-shadow: 0 1px 0 0 #fff!important; } .input-field-white select:focus /* label input text underline focus color */ { border-bottom: 1px solid #fff!important; box-shadow: 0 1px 0 0 #fff!important; } .input-field-white label.active { color: #fff!important; } .input-field-white .prefix.active /* icon prefix focus color */ { color: #fff!important; } .material-icons-white { color: #fff; } .btn_menu_invitaciones { position: relative; float: right; padding: 10px; margin: 20px; cursor: pointer; color: var(--blanco); border-radius: 8px; background-color: var(--gris_oscuro); } .btn_menu_invitaciones a{ color: var(--blanco); } /* Ajustar el ancho de la tabla */ .tabla-invitaciones { width: 100%; table-layout: fixed; } /* Alternar colores en las filas */ .tabla-invitaciones tr:nth-child(even) { background-color: #f2f2f2; } /* Estilos de confirmación de asistencia */ .asistencia-confirmada { background-color: #2ecc71 !important; /* Verde */ color: white; font-weight: bold; } .asistencia-rechazada { background-color: #e74c3c !important; /* Rojo */ color: white; font-weight: bold; } /***** PARA LA PÁGINA NOT FOUND *****/ .main404 { align-items: center; display: flex; flex-direction: column; height: 100vh; justify-content: center; text-align: center; } .title_404 { color: var(--color_titulo); font-size: 12.5rem; letter-spacing: .10em; margin: .025em 0; text-shadow: .05em .05em 0 rgba(0,0,0,.25); white-space: nowrap; @media(max-width: 30rem) { font-size: 8.5rem; } & > span { animation: spooky 2s alternate infinite linear; color: var(--color_redaccion); display: inline-block; } } .sub_404 { color: var(--color_titulo); margin-bottom: .40em; } .texto_404 { color: #ccc; margin-top: 0; } @keyframes spooky { from { transform: translatey(.15em) scaley(.95); } to { transform: translatey(-.15em); } } /***** PARA LOS MOTIVOS DE LOS PADRINOS Y NOMBRE DE LOS HOTELES*****/ .motivo-padrinos { color: var(--color_botones); font-family: var(--font_family_redaccion); text-shadow: 0em 0em 0 rgba(0,0,0,0); } .nombre-hotel { color: var(--color_titulo); font-family: var(--font_family_redaccion); text-shadow: 0em 0em 0 rgba(0,0,0,0); } .nombre-preguntas { color: var(--color_titulo)!important; font-weight: 600; } #viaja_extranjero_select { width: 100%; /* Asegura que el select ocupe todo el ancho disponible */ padding: 8px; /* Espaciado interno */ font-size: 16px; /* Tamaño del texto */ margin-top: 10px; /* Espaciado superior */ } .conf-radioN-boda { margin-right: 20px; } .resaltar-frase { font-weight: 600; color: var(--color_titulo); } .elemento_separacion { width: 30%; } @media (max-width: 767px) { .elemento_separacion { width: 50%; } } .section_title { color: var(--color_titulo2); } /* Ajuste del tamaño de las imágenes en la galería */ .gallery-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; max-width: 90%; margin: auto; justify-content: center; } .gallery-item { width: 100%; height: auto; object-fit: cover; border-radius: 10px; } /* Definir proporciones */ .gallery-item.horizontal { aspect-ratio: 16/9; } .gallery-item.vertical { aspect-ratio: 9/16; } /* Aplicar grid en PC */ @media (min-width: 1024px) { .gallery-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; justify-items: center; } .gallery-item { width: 100%; } /* Distribuir tamaños sin romper el diseño */ .horizontal { grid-column: span 2; } .vertical { grid-row: span 2; } } .center-align { display: flex; flex-direction: column; justify-content: center; } /* Modal centrado correctamente */ .modal { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 01); display: flex; align-items: center; justify-content: center; } .modala { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .modal-content { max-width: 100%; max-height: 100%; } .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 01); align-items: center; justify-content: center; } .modal-content img { max-width: 100%; max-height: 100%; object-fit: contain; } .detalles-card { background: #4b102e; border-radius: 400px 400px 0 0 / 220px 220px 0 0; max-width: 400px; margin: 40px auto 0 auto; padding: 40px 30px 30px 30px; color: #fff; text-align: center; box-shadow: 0 8px 32px rgba(75,16,46,0.12); position: relative; } .detalles-title { font-family: 'cambria', serif; font-size: 2.5rem; letter-spacing: 0.1em; color: #fff; margin-bottom: 10px; margin-top: 0; } .detalles-icon { width: 60px; margin: 10px 0 20px 0; filter: brightness(0) invert(1) opacity(0.7); } .detalles-info { margin-bottom: 30px; } .detalles-evento { margin-bottom: 10px; } .detalles-label { display: block; font-family: 'cambria', serif; font-size: 1.2rem; letter-spacing: 0.05em; color: #fff; } .detalles-hora { display: block; font-family: 'cambria', serif; font-size: 1.2rem; color: #fff; margin-top: 2px; } .detalles-divider { width: 40px; height: 2px; background: #a05a8c; margin: 12px auto 12px auto; border-radius: 2px; } .detalles-lugar { margin-top: 10px; } .detalles-lugar-nombre { display: block; font-family: 'cambria', serif; font-size: 1.1rem; font-weight: bold; letter-spacing: 0.04em; color: #fff; margin-bottom: 6px; } .detalles-lugar-direccion { display: block; font-family: 'cambria', serif; font-size: 0.95rem; color: #fff; opacity: 0.85; line-height: 1.2; } @media (max-width: 767px) { .detalles-card { max-width: 95vw; padding: 25px 10px 20px 10px; border-radius: 400px 400px 0 0 / 220px 220px 0 0; } .detalles-title { font-size: 1.5rem; } .detalles-icon { width: 40px; } } .video-modal-overlay { position: fixed; z-index: 99999; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; } .video-modal-content { position: relative; background: transparent; border-radius: 18px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); padding: 0; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: flex-end; } .video-modal-content video { max-width: 80vw; max-height: 70vh; border-radius: 16px; background: #000; } .video-modal-close { position: absolute; background: #fff; color: #4b102e; border: none; border-radius: 50%; font-size: 2.2rem; width: 40px; height: 40px; cursor: pointer; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .video-modal-close:hover { background: #4b102e; color: #fff; } .swiper-button-next{ color: var(--color_botones); } .swiper-button-prev{ color: var(--color_botones); } .hotel-swiper { width: 100%; max-width: 400px; margin: 0 auto 40px auto; } .hotel-card { background: #fff; border-radius: 24px; box-shadow: 0 4px 24px rgba(75,16,46,0.10); overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-bottom: 20px; } .hotel-img { width: 100%; height: 220px; object-fit: cover; border-radius: 24px 24px 0 0; } .hotel-img-air { width: 40%; height: 220px; object-fit: cover; border-radius: 24px 24px 0 0; } .hotel-info-carrusel { padding: 18px 16px 0 16px; text-align: center; } .hotel-nombre { font-family: 'cambria', serif; font-size: 1.2rem; color: var(--verde); margin-bottom: 10px; font-weight: bold; } .hotel-maps-btn { display: inline-block; background: var(--verde_limon); color: var(--blanco); padding: 8px 22px; border-radius: 20px; text-decoration: none; font-weight: 600; margin-top: 8px; transition: background 0.2s; } .hotel-maps-btn:hover { background: var(--color_botones); } .vermasfotos { display: inline-block; margin: 0 auto 24px auto; padding: 8px 24px; background: var(--color_botones); color: #fff; border-radius: 20px; cursor: pointer; font-weight: bold; border: none; transition: background 0.2s; } .vermasfotos:hover { background: var(--color_botones); } .responsive-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.tabla-invitaciones { width: 100%; table-layout: fixed; } table.tabla-invitaciones th, table.tabla-invitaciones td { white-space: normal; word-wrap: break-word; overflow-wrap: break-word; padding: 8px; font-size: 14px; } @media (max-width: 767px) { .tabla-invitaciones th:nth-child(3), .tabla-invitaciones td:nth-child(3), .tabla-invitaciones th:nth-child(4), .tabla-invitaciones td:nth-child(4) { display: none; } }