/*
Theme Name: Wedinbo
Theme URI: https://wedinbo.es
Description: Plantilla personalizada la web de Wedinbo.
Author: Gustavo Iglesias
Author URI: Wedinbo
Version: 1.0
License: GNU General Public License
License URI: licence/GPL.txt

CSS changes can be made in files in the /css/ folder. This is a placeholder file required by WordPress, so do not delete it.

*/
@font-face {
  font-family: 'GreatVibes';
  src: url('fonts/GreatVibes-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: bolder;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins/Poppins-ExtraLight.ttf') format('truetype');
  font-weight: lighter;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Khand';
  src: url('assets/fonts/khand/Khand-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'AlexBrush-Regular';
  src: url('assets/fonts/AlexBrush-Regular.ttf') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'Allura-Regular';
  src: url('assets/fonts/Allura-Regular.otf') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'FeatherScript';
  src: url('assets/fonts/FeatherScript.otf') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'Miama';
  src: url('assets/fonts/Miama.otf') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'Penelope-Anne';
  src: url('assets/fonts/Penelope-Anne.ttf') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'Allura-Regular';
  src: url('assets/fonts/Allura/Allura-Regular.ttf') format('truetype');
  /*font-style: normal;*/
}
@font-face {
  font-family: 'Montserrat-Light';
  src: url('assets/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
  /*font-style: normal;*/
}
@font-face {
  font-family: 'LobsterTwo';
  src: url('assets/fonts/Lobster_Two/LobsterTwo-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Futura-Light';
  src: url('assets/fonts/futura/FuturaCyrillicLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Futura-Medium';
  src: url('assets/fonts/futura/FuturaCyrillicMedium.ttf') format('truetype');
}
@font-face {
  font-family: 'Futura-Bold';
  src: url('assets/fonts/futura/FuturaCyrillicBold.ttf') format('truetype');
}
:root {
  /* Propuesta 1 */
  --primary-color: #7e4a2f;
  --primary-color-shadow: #ae8c5d;
  --secondary-color: #7b755c;
  --primary-color-light: #ae8c5d;
  --secondary-color-shadow: #7b755c;
  --fondo-suave: #f0e2d3;
  --fondo-suave-transparente: rgba(240, 226, 211, 0.9);
  --terciary-color: /*#f0e2d3*/#f6e3d3;
  --color-suave: #fff8e0;
  --page-bg: #e6f7ff;
  --memebresia-gratis: #F7EDE5;
  --membresia-oro: #F8E8A8;
  --membresia-platinum: #E8E8E8;
  --membresia-diamante: #D9F0F5;
  --green: #16875d;
}

body {
  font-family: 'Poppins', sans-serif!important;
  font-weight: 300!important;
  color: #2d2d23;
  overflow-x: hidden;
  background-image: url('img/tubodafondo01.png')!important;
  background-position: top right!important;
  background-size: 85%!important;
  background-repeat: no-repeat!important;
}

.container {
  margin-right: auto !important;
  margin-left: auto !important;
}
.eltdf-container-inner {
  width: 100%!important;
}
b, strong {
  font-weight: 600!important;
}
.fw-bold {
  font-weight: 600!important;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.GreatVibes {
  font-family: 'GreatVibes'!important;
}
.fs-plus {
  font-size: 130%!important;
}
.fs-height {
  line-height: 2.2rem;
}
.khand {
  font-family: 'Khand'!important;
}
.AlexBrush {
  font-family: 'AlexBrush-Regular'!important;
}
.Allura {
  font-family: 'Allura-Regular'!important;
}
.FeatherScript {
  font-family: 'FeatherScript'!important;
}
.Miama {
  font-family: 'Miama'!important;
}
.Penelope-Anne {
  font-family: 'Penelope-Anne'!important;
  letter-spacing: 0.1em!important;
}
.Poppins {
  font-family: 'Poppins'!important;
  letter-spacing: 0.1em!important;
}
.Allura-Regular {
  font-family: 'Allura-Regular'!important;
}
.Montserrat-Light {
  font-family: 'Montserrat-Light'!important;
}
.LobsterTwo {
  font-family: 'LobsterTwo'!important;
}
.Futura-Light {
  font-family: 'Futura-Light'!important;
}
.Futura-Medium {
  font-family: 'Futura-Medium'!important;
}
.Futura-Bold {
  font-family: 'Futura-Bold'!important;
}

.bg-primary-color {
  background-color: var(--primary-color)!important;
}
.bg-primary-light {
  background-color: var(--fondo-suave)!important;
}
.bg-secondary-color {
  background-color: var(--secondary-color)!important;
}
.bg-secondary-color a {
  color: #f6e3d3!important;
}
.bg-secondary-color a:hover {
  color: white!important;
  text-decoration: underline!important;
}
.bg-terciary-color {
  background-color: var(--terciary-color)!important;
} 
.bg-color-suave {
  background-color: var(--fondo-suave)!important;
}
.btn {
  padding: 8px 16px!important;
  /*border-radius: 5px!important;*/
  text-decoration: none!important;
  /*font-size: 14px!important;
  font-weight: 600!important;*/
  transition: background-color 0.3s, color 0.3s!important;
}

.btn-primary {
  padding: 8px 16px!important;
  border: 1px solid var(--primary-color)!important;
  background-color: var(--primary-color)!important;
  color: #ffffff!important;
  /*border-radius: 5px!important;*/
  text-decoration: none!important;
  /*font-size: 14px!important;
  font-weight: 600!important;*/
  transition: background-color 0.3s, color 0.3s!important;
}

.btn-primary:hover {
  background-color: var(--secondary-color)!important;
  border: 1px solid var(--secondary-color)!important;
  color: #ffffff!important;
}

.btn-outline-primary {
  --bs-btn-color: var(--primary-color)!important;
  --bs-btn-border-color: var(--primary-color)!important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-color)!important;
  --bs-btn-hover-border-color: var(--primary-color)!important;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-color)!important;
  --bs-btn-active-border-color: var(--primary-color)!important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--primary-color)!important;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--primary-color)!important;
  --bs-gradient: none;
  border: 1px solid var(--primary-color)!important;
  /*color: var(--primary-color)!important;*/
}
.btn-outline-primary:hover {
  background-color: var(--secondary-color)!important;
  color: #ffffff!important;
}
.btn-sinborde {
  border: 0px!important;
}
.box-shadow {
  box-shadow: 0 0px 10px var(--primary-color-shadow); /* Aumenta la sombra */
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* Agrega un efecto adicional */
}
.box-shadow:hover {
  box-shadow: 0 0px 15px var(--primary-color-shadow); /* Resalta más al pasar el cursor */
}
.box-shadow-top {
  box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.1);
}
.box-shadow-left {
  box-shadow: -3px 0 5px rgba(0, 0, 0, 0.1);
}
.box-shadow-right {
  box-shadow: 3px 0 5px rgba(0, 0, 0, 0.1);
}
.pointer {
  cursor: pointer;
}
.move {
  cursor: move;
}
.background-dynamic {
  background-size: cover;
  background-position: center;
  height: auto;
  width: 100%;
  z-index: 0;
}
.background-right {
  background-position: right center!important;
}
.text-bodas {
  color: var(--primary-color)!important;
}
.text-bodas-secondary {
  color: var(--secondary-color)!important;
}
.text-secondary-suave {
  color: #cacac9!important;
}
.text-terciary {
  color: var(--terciary-color)!important;
}

a {
  color: var(--primary-color)!important;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  text-decoration: none!important;
}

a:hover {
  color: var(--secondary-color)!important;
  text-decoration: underline;
}
a:active {
  color: var(--primary-color)!important;
}

.a-dark {
  color: #333!important;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  text-decoration: none!important;
}

.a-dark:hover {
  color: var(--primary-color)!important;
  text-decoration: underline;
}
.a-dark:active {
  color: var(--primary-color)!important;
}

.a-white {
  color: white!important;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  text-decoration: none!important;
}

.a-white:hover {
  color: white!important;
  text-decoration: none!important;
}
.a-white:active {
  color: white!important;
}

.card {
  /*border-color: #ff6780!important;*/
  border: 0!important;;
}
.bg-transparent {
  background-color: transparent!important;
}

/* Estilos para navegadores basados en WebKit (Chrome, Safari) */
::-webkit-scrollbar {
	width: 5px; /* Ancho del scrollbar vertical */
  height: 0px; /* Altura del scrollbar horizontal */
	background-color: transparent!important; /*#f5f5f5*/
}
::-webkit-scrollbar-track {
  /*-webkit-box-shadow: inset 0 0 6px rgba(200,200,200,1);*/
  border-radius: 0px;
}
::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color:var(--secondary-color);
	/*-webkit-box-shadow: inset 0 0 6px rgba(90,90,90,0.7);*/
}

ng-select .ng-placeholder {
  color: grey;
}
/* Estilizar las opciones del dropdown */
ng-select .ng-dropdown-panel .ng-option {
  background-color: #f8f9fa; /* Fondo claro */
  color: #333; /* Texto oscuro */
  padding: 2px 15px;
}

/* Cambiar el color al pasar el ratón sobre una opción */
ng-select .ng-dropdown-panel .ng-option:hover {
  background-color: var(--secondary-color); /* Fondo dinámico */
  color: white; /* Texto blanco para contraste */
  cursor: pointer; /* Cambiar el cursor a mano */
}

/* Estilo para el borde del dropdown */
ng-select .ng-dropdown-panel {
  border: 1px solid #dee2e6; /* Color del borde */
  border-radius: 4px; /* Esquinas redondeadas */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra */
}

/* Cambiar el estilo del grupo */
ng-select .ng-dropdown-panel .ng-optgroup {
  background-color: #f8f9fa; /* Fondo claro */
  font-weight: bold; /* Texto destacado */
  padding: 2px; /* Espaciado interno */
  border-bottom: 1px solid #dee2e6; /* Línea separadora */
}

/* Estilo para las opciones seleccionadas */
ng-select .ng-option.selected {
  background-color: #d1e7dd; /* Verde claro para opciones seleccionadas */
  color: var(--primary-color);; /* Texto verde oscuro */
  font-weight: bold;
}

/* Cambiar color de texto al pasar sobre una opción seleccionada */
ng-select .ng-option.selected:hover {
  background-color: var(--secondary-color); /* Color dinámico */
  color: white; /* Texto blanco */
}

/* Opcional: personalizar scrollbar del dropdown */
ng-select .ng-dropdown-panel::-webkit-scrollbar {
  width: 8px;
}
ng-select .ng-dropdown-panel::-webkit-scrollbar-thumb {
  background-color: #adb5bd; /* Color de la barra */
  border-radius: 4px;
}
ng-select .ng-dropdown-panel::-webkit-scrollbar-thumb:hover {
  background-color: #6c757d; /* Cambio de color al pasar el ratón */
}
/* Cambiar el color de la opción seleccionada */
.ng-select .ng-option-selected {
  background-color: var(--primary-color) !important;  /* Azul Bootstrap */
  color: white !important;
}
/* Cambiar el color de la opción sobre la que pasas con las teclas */
.ng-select .ng-option-marked {
  background-color: var(--primary-color) !important; /* Azul más claro */
  color: white !important;
}

.search-container {
  position: relative;
  width: 300px;
  margin: 0 auto;
}
.search-input {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.results-dropdown {
  position: absolute;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
}
.result-item {
  padding: 8px;
  cursor: pointer;
}
.result-item:hover {
  background-color: #f0f0f0;
}

.titulo-modulo {
  display: flex;
  align-items: center;
  /*font-family: 'Khand'!important;*/
  font-size: 1.5em;
}
.titulo-modulo::after {
  content: ""; /* Genera un elemento vacío */
  flex: 1; /* Ocupa todo el espacio disponible */
  height: 2px; /* Grosor de la línea */
  background-color: var(--secondary-color); /* Color de la línea */
  margin-left: 10px; /* Espacio entre el texto y la línea */
}

.titulo-modulo-center {
  display: flex;
  align-items: center;
  /*font-family: 'Khand' !important;*/
  /*font-size: 1.5em;*/
}

.titulo-modulo-center::before,
.titulo-modulo-center::after {
  content: ""; /* Genera un elemento vacío */
  flex: 1; /* Ocupa todo el espacio disponible */
  height: 2px; /* Grosor de la línea */
  background-color: var(--secondary-color); /* Color de la línea */
}

.titulo-modulo-center::before {
  margin-right: 10px; /* Espacio entre la línea izquierda y el texto */
}

.titulo-modulo-center::after {
  margin-left: 10px; /* Espacio entre el texto y la línea derecha */
}

.modulo-fondo-1 {
  background-color: var(--secondary-color)!important;
}
.modulo-fondo-2 {
  background-color: var(--primary-color-light)!important;
}
.modulo-fondo-3 {
  background-color: var(--fondo-suave)!important;
}

.container-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden; /* Asegura que todo lo fuera del contenedor quede cortado */
}

.circle {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: circle(60% at 0% 50%);
  transition: transform 0.3s ease;
  background-size: cover;
  background-position: right center;
}

.circle:hover {
  transform: scale(1.1); /* Agranda el círculo ligeramente al pasar el ratón */
}

.circle img {
  width: 150%; /* Haz la imagen más grande para asegurarte de cubrir el círculo */
  height: auto;
  object-fit: cover;
  object-position: center;
}
.pts {
  padding-top: 3%;
}
.pbs {
  padding-bottom: 5%;
}
.fondo-semi-transparente {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px); /* Aplica el desenfoque */
  -webkit-backdrop-filter: blur(2px); /* Para compatibilidad con Safari */
  padding: 3%;
}
.img-service {
  width: 100%;
  border-radius: 5px;
}
.borde-bottom-primary {
  border-bottom: 1px solid var(--primary-color)!important;
}
.borde-top-primary-shadow {
  border-top: 1px solid var(--primary-color-shadow)!important;
}
.borde-bottom-primary-shadow {
  border-bottom: 1px solid var(--primary-color-shadow)!important;
}
.borde-top-secondary {
  border-top: 1px solid var(--secondary-color)!important;
}
.borde-top-terciary {
  border-top: 1px solid var(--terciary-color)!important;
}
.hide {
  display: none!important;
}

.main-container {
  display: flex;
  height: 100vh;
}
.main-content {
  flex: 1; /* Toma el espacio disponible */
  overflow-y: auto; /* Scroll vertical independiente */
  padding: 20px;
}
.sidebar {
  width: 25%; /* Ancho fijo para la barra lateral */
  overflow-y: auto; /* Scroll vertical independiente */
  overflow-x: hidden;
  padding: 20px;
}
/* Estilo para cambiar el color del placeholder */
input::placeholder {
  color: #aaaaaa!important; /* Cambia a tu color preferido */
}
.page-link {
  color: var(--primary-color)!important;
}
.pagination {
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--primary-color)!important;
  --bs-pagination-active-border-color: var(--primary-color)!important;
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  list-style: none;
}
/*.pagination.active {
  background-color: var(--primary-color)!important;
  color: white!important;
}*/

.active > .page-link, .page-link.active {
  color: white!important;
  background-color: var(--primary-color)!important;
  border-color: var(--primary-color)!important;
}
.carousel-caption-title {
  background-color: rgba(255, 255, 255, 0.7); /* Blanco con 80% de opacidad */
  padding: 2px 10px; /* Espaciado interno */
  border-radius: 5px; /* Bordes redondeados */
  text-align: center; /* Centrar el texto */
  display: inline-block; /* Ajustar al tamaño del contenido */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  color: #333; /* Color del texto */
  font-size: 80%;
}

.border-left-bodas {
  border-left: 1px solid var(--primary-color); /* Borde izquierdo de 5px con color #ff6b6b */
  padding-left: 10px; /* Espaciado interno para separar el contenido del borde */
}
.border-bodas {
  border: 1px solid var(--primary-color); /* Borde de 5px con color #ff6b6b */
}
.alert-bodas {
  padding: 15px 20px; /* Espaciado interno */
  margin: 20px 0; /* Espaciado externo */
  border: 1px solid var(--primary-color);; /* Borde con el color personalizado */
  border-radius: 5px; /* Bordes redondeados */
  background-color: rgba(255, 107, 107, 0.2); /* Fondo con transparencia */
  color: var(--primary-color); /* Texto del color personalizado */
  font-size: 16px; /* Tamaño de fuente */
  line-height: 1.5; /* Altura de línea */
  position: relative; /* Necesario para posicionar el botón de cierre */
}
.alert-bodas strong {
  font-weight: bold; /* Énfasis en el texto en negrita */
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  color: var(--primary-color);;
  cursor: pointer;
  border: none;
  background: none;
  font-weight: bold;
}
.close-btn:hover {
  color: var(--primary-color);; /* Color más oscuro al pasar el mouse */
}
.active-href {
  color: var(--primary-color)!important;
  font-weight: bold;
}

.navbar-nav {
  --bs-nav-link-padding-x: 0!important;
  --bs-nav-link-padding-y: 0!important;
}
.bg-height {
  min-height: 150px!important;
  max-height: 150px!important;
}
.bg-height-md {
  min-height: 100px!important;
  max-height: 100px!important;
}
.bg-height-sm {
  min-height: 80px!important;
  max-height: 80px!important;
}
.bg-bodas {
  background-color: var(--primary-color)!important;
  color: white!important;
}
.bg-success-bodas {
  background-color: #7a9471!important;
  color: white!important;
}
.btn-check:checked + .btn {
  background-color: var(--primary-color)!important;
  color: white!important;
  border-color: var(--primary-color)!important;
}
.profile-picture {
  width: 40px; /* Ajusta el tamaño según lo necesites */
  height: 40px; /* Igual que el ancho para mantener proporciones */
  border-radius: 50%; /* Hace que el contenedor sea redondo */
  object-fit: cover; /* Asegura que la imagen se ajuste sin deformarse */
  box-shadow: 0 2px 5px var(--primary-color-shadow);/* rgba(0, 0, 0, 0.1);*/
  transition: box-shadow 0.3s ease;
}
.profile-picture-md {
  width: 60px!important; /* Ajusta el tamaño según lo necesites */
  height: 60px!important; /* Igual que el ancho para mantener proporciones */
}
.profile-picture-lg {
  width: 80px!important; /* Ajusta el tamaño según lo necesites */
  height: 80px!important; /* Igual que el ancho para mantener proporciones */
}
.profile-picture-xl {
  width: 120px!important; /* Ajusta el tamaño según lo necesites */
  height: 120px!important; /* Igual que el ancho para mantener proporciones */
}

.nav2 .nav-link {
  background: transparent!important;
  color: #333!important;
  padding: 10px!important;
  /*padding-bottom: 10px!important;*/
  text-align: left!important;
}
/*.nav2 .active {
  color: #ffffff!important;
}*/
.nav2 .tab-pane {
  font-weight:normal!important;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #ffffff!important;
  background-color: var(--primary-color)!important;
  border: 0!important;
}
.bg-confirmado {
  background-color: #198754!important;
  color: white!important;
}
.div-hover {
  transition: background-color 0.3s ease;
  border-radius: 5px;
}
.div-hover-active {
  /*background-color: var(--fondo-suave);*/
  background-color: var(--secondary-color);
  color: white!important;
}
.div-hover:hover {
  /*background-color: var(--fondo-suave);*/
  background-color: var(--secondary-color);
  color: white!important;
}
.div-hover-terciary {
  transition: background-color 0.3s ease;
  border-radius: 5px;
}
.div-hover-terciary:hover {
  /*background-color: var(--fondo-suave);*/
  background-color: var(--terciary-color);
}

/* Cambiar el color del fondo del checkbox cuando no está marcado */
.form-check-input {
  /*width: 1.5rem;
  height: 1.5rem;*/
  /*transform: scale(1.25); */
  background-color: var(--fondo-suave)!important; /* Color de fondo */
  border-color: var(--primary-color)!important; /* Color del borde */
  cursor: pointer;
}

/* Cambiar el color del checkbox cuando está marcado */
.form-check-input:checked {
  background-color: var(--primary-color)!important; /* Color del fondo marcado */
  border-color: var(--primary-color)!important; /* Color del borde marcado */
}

/* Cambiar el color del ícono (checkmark) */
.form-check-input:checked::before {
  color: white!important; /* Cambia el color del checkmark */
}

/* Ajustar el enfoque (focus) para el checkbox */
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 107, 0.25)!important; /* Sombra al enfocar */
}
ul li::marker {
  color: var(--primary-color)!important;
}
.container-gradient {
  background: linear-gradient(rgba(255, 255, 255, 0), white);
  position: absolute;
  bottom: 0px;
  height: 6rem;
  width: 100%;
}
.custom-swal-confirm {
  background-color: var(--primary-color)!important;
  color: #fff !important;
  border-radius: 10px !important;
}
.custom-swal-cancel {
  background-color: var(--primary-color) !important;
  color: #fff !important;
  border-radius: 10px !important;
}
.rounded-mas {
  border-radius: 10%!important;
}
.image-container {
  position: relative;
  display: inline-block;
}
.image-container img {
  display: block;
  width: 100%; /* Ajusta según tus necesidades */
  height: auto;
}
.text-overlay {
  position: absolute;
  bottom: 10px; /* Para que se coloque en la parte inferior */
  left: 10px; /* Para alinearlo a la derecha */
  background-color: rgba(255, 255, 255, 0.7); /* Fondo blanco semitransparente */
  color: black; /* Texto en color negro */
  padding: 3px;
  padding-left: 15px; /* Espaciado interno */
  padding-right: 15px; /* Espaciado interno */  
  border-radius: 4px; /* Opcional: bordes redondeados */
}
.fade-left {
  /*width: 100%;*/
  position: relative;
}
.fade-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* Controla el área del difuminado */
  height: 100%;
  background: linear-gradient(to right, white, transparent);
}
.padding-bottom {
  padding-bottom: 100px!important;
}
.search-container {
  display: flex;
  align-items: center;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  padding: 3px 15px;
}
.search-input {
  background-color: transparent;
  padding: 8px 10px;
  border: 0;
  outline: none;
  font-size: 16px;
  flex: 1; /* Hace que el input ocupe el espacio disponible */
}
.search-icon {
  font-size: 18px;
  color: #999;
  margin-left: 10px; /* Espacio entre el input y el icono */
}

#print-section {
  display: none;
}

@media print {
  body * {
    visibility: hidden;
  }

  #print-section, #print-section * {
    visibility: visible;
  }

  #print-section {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  .no-imprimir, 
  button, 
  nav {
    display: none !important;
  }

  /*html, body {
		width: 100%!important;
    margin-top: 0mm !important;
    margin-bottom: 0mm !important;
    background-image: none !important;
  }*/
  html, body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-sizing: border-box;
    -webkit-print-color-adjust: exact; /* Asegura que los colores se impriman correctamente */
    page-break-inside: avoid;
    print-color-adjust: exact;
  }

  * {
    box-sizing: border-box;
  }
  body > *:first-child {
    margin-top: -20mm !important;
    padding-top: 0 !important;
  }

  @page {
    margin-top: 10mm;
    margin-right: 10mm;
    margin-bottom: 10mm;
    margin-left: 10mm;
  }
  .table {
    margin-bottom: 0rem !important;
  }
  .table-sm td, .table-sm th {
    padding: .0rem !important;
  }
  .container {
    --bs-gutter-x: 0!important;
    --bs-gutter-y: 0!important;
    width: 100%!important;
    max-width: 100%!important;
    min-width: 100%!important;
    padding-right: 0!important;
    padding-left: 0!important;
    margin-right: 0!important;
    margin-left: 0!important;
  }
}
.sticky-top {
  top: 95px!important;
}
.margin-0 {
  padding: 0!important;
  margin: 0!important;
}
.padding-modulo {
  padding: 10%!important;
}
.bg-servicios {
  background-size:contain!important;
  background-repeat: no-repeat!important;
}
/*.bg-left {
  background-image: url('img/logo_wedinbo_marcaagua_left.png')!important;
  background-position: left!important;
}
.bg-rigth {
  background-image: url('img/logo_wedinbo_marcaagua_rigth.png')!important;
  background-position: right!important;
}*/
.bg-marcaagua-rigth {
  background-image: url('img/logo_wedinbo_marcaagua_blanco.png')!important;
  background-position: right!important;
  background-size: contain!important;
  background-repeat: no-repeat!important;
}
.bg-marcaagua-left {
  background-image: url('img/logo_wedinbo_marcaagua_blanco.png')!important;
  background-position: left!important;
  background-size: contain!important;
  background-repeat: no-repeat!important;
}

/* Estilos del input range */
.custom-range {
  accent-color: var(--primary-color)!important;
}

.custom-range::-webkit-slider-runnable-track {
  background: var(--fondo-suave)!important;
  height: 6px;
  border-radius: 5px;
}

.custom-range::-webkit-slider-thumb {
  background: var(--primary-color)!important;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px;
}
.g-0 {
  gap:0;
}
.g-1 {
  gap:1;
}
.g-2 {
  gap: 20px!important;;
}
.text-woman {
  color: #ef22ab!important;
}
.text-men {
  color: #3452f6!important;
}

.contenedor-scroll-pantalla-75 {
  height: 75vh; /* 100% de la altura del viewport (ventana del navegador) */
  overflow-y: auto; /* Muestra scroll vertical SÓLO si es necesario */
  overflow-x: auto; /* Opcional: Oculta el scroll horizontal si no lo quieres */
  box-sizing: border-box; /* Incluye padding y border en el alto total */
  /* Opcional: añade padding si quieres espacio interno */
  /* padding: 20px; */
  /* Opcional: añade un borde para visualizarlo */
  /* border: 2px solid red; */
}

.contenedor-scroll-pantalla-55 {
  height: 55vh; /* 100% de la altura del viewport (ventana del navegador) */
  overflow-y: auto; /* Muestra scroll vertical SÓLO si es necesario */
  overflow-x: auto; /* Opcional: Oculta el scroll horizontal si no lo quieres */
  box-sizing: border-box; /* Incluye padding y border en el alto total */
  /* Opcional: añade padding si quieres espacio interno */
  /* padding: 20px; */
  /* Opcional: añade un borde para visualizarlo */
  /* border: 2px solid red; */
}
i.fa-star {
  cursor: pointer; /* Hace que el cursor sea interactivo */
}

i.fa-star.text-muted:hover {
  color: #f0ad4e; /* Cambia el color de la estrella vacía al pasar el mouse */
}
.btn-xs {
    padding: 4px 8px !important;
}

#eltdf-back-to-top>span {
  position: relative;
  display: block;
  width: 39px;
  height: 39px;
  line-height: 40px;
  font-size: 15px;
  text-align: center;
  border-radius: 50%;
  color: var(--primary-color);
  background-color: var(--fondo-suave);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--fondo-suave);
  overflow: hidden;
  -webkit-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
  -moz-transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
  transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
}
#eltdf-back-to-top>span:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.disabled-div {
  pointer-events: none;
  opacity: 0.5;
}

.eltdf-btn {
  font-family: inherit!important;
  font-size: inherit!important;
  line-height: inherit!important;
  letter-spacing: inherit!important;
  font-weight: inherit!important;
  border-radius: 5px!important;
  padding-top: 0!important;
  padding-bottom: 0!important;
}
.offcanvas-backdrop.show {
  opacity: .3!important;
}
.parent-container {
  overflow: visible;
}
.gallery-container {
  width: 100%;
  min-height: 200px; /* Altura personalizada */
  background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita la repetición de la imagen */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wpb_content_element {
  margin-bottom: 0!important;
}
#scrollToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: none;
  background-color: var(--primary-color);
  color: white!important;
  font-size: 16px;
  text-align: center;
  padding: 8px 12px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease;
  z-index: 9999;
}

#scrollToTop:hover {
  background-color: var(--secondary-color);
}

.input-underline {
  border: none;
  border-bottom: 1px solid transparent;
  outline: none;
  background-color: transparent;
  width: 100%;
  padding: 6px 4px;
  transition: border-color 0.3s;
}

/* Mostrar solo la línea inferior al enfocar */
.input-underline:focus {
  border-bottom: 2px solid #a56b3f; /* Cambia el color si quieres */
}

.z-top {
  z-index: 9999!important;
  position: absolute; /* o fixed/sticky según el caso */
}
.div-agua {
  background: rgba(255, 255, 255, 0.15); /* fondo semitransparente */
  backdrop-filter: blur(20px) saturate(180%); /* desenfoque + saturación estilo iOS */
  -webkit-backdrop-filter: blur(20px) saturate(180%); /* soporte Safari/iOS */
  border: 1px solid rgba(255, 255, 255, 0.25); /* borde suave */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); /* sombra ligera */
}
.div-agua a {
  color: #f6e3d3!important;
}
.div-agua a:hover {
  color: white!important;
  text-decoration: underline!important;
}
.div-agua-verde {
  background: rgba(123, 117, 92, 0.35); /* #7b755c con transparencia */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  color: #fff; /* texto en blanco para contraste */
  border-radius: 12px;
  padding: 1rem;
}
.div-agua-verde a {
  color: #f6e3d3!important;
}
.div-agua-verde a:hover {
  color: white!important;
  text-decoration: underline!important;
}
.div-center {
  text-align: -webkit-center;
}
.icon-input {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--secondary-color);
}
.toggle-eye {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--secondary-color);
  cursor: pointer;
}

.height-div {
  min-height: 500px!important;
}
.font-1 { 
  font-size: clamp(0.8rem, 1vw, 1em); 
  line-height: 1.3em; 
}

.font-1-5 { 
  font-size: clamp(1rem, 1.5vw, 1.5em); 
  line-height: 1.35em; 
}

.font-2 { 
  font-size: clamp(1.2rem, 2vw, 2em); 
  line-height: 1.4em; 
}

.font-3 { 
  font-size: clamp(1.5rem, 3vw, 3em); 
  line-height: 1.45em; 
}

.font-4 { 
  font-size: clamp(2rem, 4vw, 4em); 
  line-height: 1.5em; 
}

.font-5 { 
  font-size: clamp(2.5rem, 5vw, 5em); 
  line-height: 1.55em; 
}

.font-6 { 
  font-size: clamp(3rem, 6vw, 6em); 
  line-height: 1.6em; 
}

.font-7 {
  font-size: clamp(2rem, 6vw, 7em);
  line-height: 1.65em;
}

.border-top-dotted {
  border-top: 2px dotted #333; /* Cambia el color y grosor según tus necesidades */
}
.bg-white-transparente {
  background-color: rgba(255, 255, 255, 0.5)!important;
}

.hover-div {
  position: relative; /* Para posicionar el icono dentro del div */
  padding: 20px;
  background-color: transparent;
  transition: border 0.3s ease;
  border: 2px solid transparent;
}

.hover-div:hover {
  border: 2px solid var(--primary-color); /* Agregar un borde al hacer hover */
}

.hover-div .icon {
  position: absolute;
  top: 10px; /* Ajusta según tu diseño */
  right: 10px; /* Ajusta según tu diseño */
  font-size: 1.2rem;
  color: var(--primary-color);
  opacity: 0; /* Ocultar el icono inicialmente */
  transition: opacity 0.3s ease; /* Suavizar la aparición del icono */
}

.hover-div:hover .icon {
  opacity: 1; /* Mostrar el icono al pasar el ratón */
}

.offcanvas-custom {
  width: 50%!important; /* Ajusta el ancho según tu necesidad */
}

.fondo-transparente {
  background-color: rgba(255, 255, 255, 0.7);
  /*border-radius: 10px;*/
  padding-left: 3%;
  padding-right: 3%;
}
/* aplica al preview flotante (está en el body) y al elemento original */
.cdk-drag-preview,
.cdk-drag-dragging,
.cdk-drag-placeholder,
.div-hover-terciary.cdk-drag-dragging {
  background-color: rgba(255, 255, 255, 0.8) !important;
}
.img-fade {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* hace el "cover" tipo background */
  display: block;
  
  /* Aplica un degradado como máscara */
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 40%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  
  mask-image: linear-gradient(to bottom, transparent, black 40%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
.bg-fade {
  width: 100%;
  height: 300px;  /* ajusta según necesites */

  /* Difuminado superior con máscara */
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;

  mask-image: linear-gradient(to bottom, transparent, black 30%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
/* Membresía Básica */
.text-bg-gratis {
  color: #000 !important;
  background-color: var(--memebresia-gratis) !important;
}
/* Membresía Oro */
.text-bg-oro {
  color: #000 !important;
  background-color: var(--membresia-oro) !important;
}
/* Membresía Platinum */
.text-bg-platinum {
  color: #000 !important;
  background-color: var(--membresia-platinum) !important;
}
/* Membresía Diamante */
.text-bg-diamante {
  color: #000 !important;
  background-color: var(--membresia-diamante) !important;
}
/* Estilos base para el texto de membresía */
.membresia {
  /*font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;*/
}

/* Gratis - gris neutro */
.membresia--gratis {
  color: var(--memebresia-gratis);
}

/* Oro */
.membresia--oro {
  color: var(--memebresia-oro);
}

/* Platinum */
.membresia--platinum {
  color: var(--memebresia-platinum);
}

/* Diamante */
.membresia--diamante {
  color: var(--memebresia-diamante);
  /*text-shadow: 0 0 4px rgba(79, 195, 247, 0.4);*/
}
.membresia-bg-gratis {
  background-color: var(--memebresia-gratis)!important;
}
.membresia-bg-oro {
  background-color: var(--membresia-oro)!important;
}
.membresia-bg-platinum {
  background-color: var(var(--membresia-platinum))!important;
}
.membresia-bg-diamante {
  background-color: var(--membresia-diamante)!important;
}
.disabled-overlay {
  position: relative;
  pointer-events: none; /* Desactiva clics, hovers, etc. */
  opacity: 0.5; /* Lo hace ver desactivado */
  filter: grayscale(50%);
}
.disabled-overlay::after {
  /*content: "";*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  /*padding: 10px 20px;
  border-radius: 8px;
  font-size: 1rem;
  text-align: center;
  z-index: 10;
  animation: blink 1.5s infinite;*/
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
.form-select-bottom {
  border: none!important;
  /*border-bottom: 2px solid var(--primary-color);
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  transition: border-color 0.3s ease;*/
}
.custom-tabs {
  border-bottom: 2px solid var(--primary-color)!important;
  gap: 2px!important;
}
.custom-tabs-border {
  border-bottom: 1px solid var(--primary-color)!important;
  gap: 2px!important;
}
.custom-tabs .nav-link {
  /*color: #6c757d!important;*/
  border: 1px solid transparent!important;
  border-radius: 0!important;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease!important;
  border-top-left-radius: 5px!important;
  border-top-right-radius: 5px!important;
  background-color: transparent!important;
}
.custom-tabs .nav-link:hover {
  color: #ffffff!important;
  background-color: var(--primary-color)!important;
  border-color: var(--primary-color) var(--primary-color) transparent!important;
  border-top-left-radius: 5px!important;
  border-top-right-radius: 5px!important;
}
.custom-tabs .nav-link.active {
  color: #ffffff!important;
  background-color: var(--primary-color)!important;
  border-color: var(--primary-color) var(--primary-color) transparent!important;
  border-top-left-radius: 5px!important;
  border-top-right-radius: 5px!important;
}
.custom-tabs .nav-link.disabled {
  color: #6c757d!important;
  background-color: transparent!important;
  border-color: transparent!important;
  cursor: not-allowed!important;
}
.font-bold { font-weight: bold;	}
.font-normal { font-size: 1em; }
.font-titulo { font-size: 1.5em; }
.font-nombres { font-size: 2em; }
.font-fecha { font-size: 1.2em; }
.font-lugar { font-size: 1.1em; }

.custom-tabs.scrolled {
  background-color: white !important; /* Fondo cuando hace scroll */
}
/* Agrega esta clase a tu CSS */
.table-transparent {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-bg-state: transparent;
  --bs-table-bg-type: transparent;
  background-color: transparent !important;
}

/* Para asegurarte de que todas las celdas hereden la transparencia */
.table-transparent > :not(caption) > * > * {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Bordes individuales por lado */
.border-top-membresia {
  border-top: 8px solid var(--color-membresia, #ccc)!important;
}

.border-right-membresia {
  border-right: 8px solid var(--color-membresia, #ccc)!important;
}

.border-bottom-membresia {
  border-bottom: 8px solid var(--color-membresia, #ccc)!important;
}

.border-left-membresia {
  border-left: 8px solid var(--color-membresia, #ccc)!important;
}

/* Colores por tipo de membresía */
.membresia-gratis {
  --color-membresia: #198754;
}

.membresia-oro {
  --color-membresia: #198754;
}

.membresia-platinum {
  --color-membresia: #198754;
}

.membresia-diamante {
  --color-membresia: #198754;
}
.wpb-price {
  font-size: 42px!important;
}
.wedinbo-single-content blockquote {
  color: #ffffff!important;
}

	/* New CSS invitación */
/* =========================================
   INVITACIÓN
   ========================================= */

.invitacion {
		align-content: center;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;

    padding: 18px 16px 14px;

    background: #faf7f2;

    border: 1px solid #d8cfc4;
    border-radius: 18px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);

    color: #292521;

    font-family: Arial, sans-serif;
}


/* =========================================
   CORAZÓN SUPERIOR
   ========================================= */

.invitacion-corazon {
    width: 22px;
    height: 22px;

    margin: 0 auto 5px;

    color: #70402e;
}

.invitacion-corazon svg {
    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================
   "¡NOS CASAMOS!"
   ========================================= */

.invitacion-titulo {
    text-align: center;

    font-size: 12px;
    font-weight: 500;

    margin-bottom: 5px;

    color: #292521;
}


/* =========================================
   NOMBRES
   ========================================= */

.invitacion-nombres {
    text-align: center;

    font-family: "Brush Script MT", "Segoe Script", cursive;

    font-size: 28px;
    line-height: 1;

    color: #1f1d1b;

    margin-bottom: 10px;
}

.invitacion-nombres span {
    font-size: 22px;
    margin: 0 3px;
}


/* =========================================
   FECHA CORTA
   ========================================= */

.invitacion-fecha-corta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    font-size: 14px;
    font-weight: 600;

    color: #8b4933;
}

.invitacion-fecha-corta b {
    font-weight: 400;
    color: #b38a79;
}

/* =========================================
   SEPARADOR
   ========================================= */

.invitacion-separador {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    height: 24px;

    margin: 2px 0 4px;
}

.invitacion-separador::before {
    content: "";

    position: absolute;

    left: 20%;
    right: 20%;

    top: 50%;

    height: 1px;

    background: #dfd5cd;
}

.invitacion-separador span {
    position: relative;
    z-index: 1;

    padding: 0 7px;

    background: #faf7f2;

    font-size: 15px;

    color: #8b4933;
}

.invitacion-elementos {
	background-color: #ffffff;
	border-radius: 1rem;
}

/* =========================================
   CADA ELEMENTO
   ========================================= */

.invitacion-item {
    display: flex;
    align-items: center;

    min-height: 55px;

    padding: 8px 4px;

    border-bottom: 1px solid #e5ddd6;
}


/* =========================================
   ICONOS
   ========================================= */

.invitacion-icono {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #222;
}

.invitacion-icono svg {
    width: 29px;
    height: 29px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.35;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================
   CONTENIDO
   ========================================= */

.invitacion-contenido {
    flex: 1;
    padding-left: 7px;
    min-width: 0;
}


/* =========================================
   ETIQUETA
   ========================================= */

.invitacion-etiqueta {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.2px;

    color: #292521;

    margin-bottom: 2px;
}


/* =========================================
   VALOR
   ========================================= */

.invitacion-valor {
    font-size: 14px;
    line-height: 1.25;

    font-weight: 600;

    color: #292521;
}


/* =========================================
   VALORES DESTACADOS
   ========================================= */

.invitacion-destacado {
    color: #914d35;
}


/* =========================================
   BOTÓN
   ========================================= */

.invitacion-boton {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    box-sizing: border-box;

    margin-top: 12px;

    padding: 9px 15px;

    background: #ad512d;

    border-radius: 7px;

    color: white;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition: all 0.2s ease;
}

.invitacion-boton:hover {
    background: #913f22;

    color: white;

    transform: translateY(-1px);
}


/* =========================================
   FLECHA DEL BOTÓN
   ========================================= */

.invitacion-boton svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}