.elementor-2538 .elementor-element.elementor-element-5d7ebf69{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:-109px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:150px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2538 .elementor-element.elementor-element-405e03f5{--spacer-size:50px;}.elementor-2538 .elementor-element.elementor-element-368fe508{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-2538 .elementor-element.elementor-element-1ca59a99 .elementor-heading-title{font-family:"Satoshi", Sans-serif;font-size:40px;font-weight:600;color:var( --e-global-color-495d27d );}@media(max-width:767px){.elementor-2538 .elementor-element.elementor-element-5d7ebf69{--margin-top:-95px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-2538 .elementor-element.elementor-element-368fe508{--width:100%;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-2538 .elementor-element.elementor-element-1ca59a99 .elementor-heading-title{font-size:20px;}}@media(min-width:768px){.elementor-2538 .elementor-element.elementor-element-5d7ebf69{--content-width:1600px;}.elementor-2538 .elementor-element.elementor-element-368fe508{--width:60%;}}/* Start custom CSS for tbk_widget, class: .elementor-element-0ab8e8f */.tbk-frontend[id^=tbk-frontend-] {
    max-width: 900px!important ;
    width: 100%!important ;
    padding: 2.0rem!important ;
    background: var(--background-color)!important ;
    border-radius: 24px!important ;
    border: 1px solid var(--border-light)!important ;
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px)!important ;
    -webkit-backdrop-filter: blur(12px) !important ; /* Para Safari */
}

tbk-calendar-header {
    margin-bottom: 2rem;
    align-items: center;
}

.header-center {
    text-align: center;
}

.tbk-month, .tbk-year {
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 2rem); /* Tamaño de fuente adaptable */
    color: #fff;
}

.tbk-month {
    text-transform: capitalize;
}
.tbk-frontend[id^=tbk-frontend-] .tbk-days .day .day-button-container .tbk-day-number{
        border-bottom: 1px solid rgb(255 255 255 / 22%);
        color:#c0c0c0;
        
}
.tbk-frontend[id^=tbk-frontend-] .tbk-weekdays{
    background-color: #001bff !important;
    border-radius: 20px
}
.tbk-frontend[id^=tbk-frontend-] .anticon{
    color:#fff;
}

.tbk-frontend[id^=tbk-frontend-] .tbk-list * {
    color:#ffffff !important;
}
.tbk-full-date{
   color:#ffffff !important; 
}
.tbk-frontend[id^=tbk-frontend-] .tbk-typography{
       color:#ffffff !important; 

}
.tbk-frontend[id^=tbk-frontend-] .tbk-list-item, .tbk-frontend[id^=tbk-frontend-] .tbk-form-item-label>label, .tbk-frontend[id^=tbk-frontend-] .tbk-btn-text{
    color:#ffffff !important;
}
.tbk-frontend[id^=tbk-frontend-] .tbk-input {
  /* Glassmorphism Effect */
  background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* For Safari compatibility */
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

  /* Text Color */
  color: white;
}

/* Optional: Style the placeholder text as well */
.tbk-frontend[id^=tbk-frontend-] .tbk-input::placeholder {
  color: rgba(255, 255, 255, 0.75) !important;
}
.elementor-kit-12 input:not([type="button"]):not([type="submit"]), .elementor-kit-12 textarea, .elementor-kit-12 .elementor-field-textual{
    color:#fff !important;
}
.tbk-frontend[id^=tbk-frontend-] .tbk-input[disabled]{
      /* Glassmorphism Effect */
  background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* For Safari compatibility */
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

  /* Text Color */
  color: white;

}
.tbk-frontend[id^=tbk-frontend-]{
    color:#ffffff !important;
}
/*
  Main Glass Container
  Applies the glassmorphism effect to the parent container of the table.
*/
.tbk-descriptions.tbk-descriptions-bordered {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important; /* For Safari */
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1) !important;
  padding: 1rem !important; /* Adds some space inside the glass */
  border-collapse: separate !important; /* Ensures borders and radius work well */
  overflow: hidden; /* Clips the child elements to the rounded corners */
}

/*
  Text Color
  Sets the text color for all table headers (th) and cells (td) to white.
*/
.tbk-descriptions th,
.tbk-descriptions td {
  color: white !important;
}

/*
  Internal Border Styling
  Changes the default borders between rows to a more fitting semi-transparent white.
*/
.tbk-descriptions .tbk-descriptions-row {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/*
  Remove default background from table elements
  Ensures only the main container has the glass background.
*/
.tbk-descriptions table,
.tbk-descriptions th,
.tbk-descriptions td,
.tbk-descriptions tr {
    background: transparent !important;
}
.tbk-frontend[id^=tbk-frontend-] .tbk-collapse > .tbk-collapse-item > .tbk-collapse-header{
    color:#ffffff !important;
}
/*
  Estilo de Glassmorphism para el grupo de Input
  Se aplica al contenedor del input y al botón por separado
  para que juntos parezcan una sola pieza.
*/

/* Parte del Input */
.tbk-input-group .tbk-input-affix-wrapper {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important; /* Compatibilidad con Safari */
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-right: none !important; /* Quitamos el borde derecho para unirlo al botón */
  box-shadow: none !important;

  /* Bordes redondeados solo a la izquierda */
  border-radius: 12px 0 0 12px !important;
}

/* Parte del Botón */
.tbk-input-group .tbk-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;

  /* Bordes redondeados solo a la derecha */
  border-radius: 0 12px 12px 0 !important;

  /* Color del texto del botón */
  color: white !important;
}

/*
  Ajustes para el texto, placeholder e íconos internos
*/

/* Hace el fondo del input transparente para ver el efecto de cristal del contenedor */
.tbk-input-group .tbk-input {
  background: transparent !important;
  color: white !important;
}

/* Color del texto del placeholder */
.tbk-input-group .tbk-input::placeholder {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Color de los íconos dentro del input */
.tbk-input-group .anticon {
  color: white !important;
}

.tbk-frontend[id^=tbk-frontend-] .tbk-statistic-content{
    color:#ffffff !important;
}
.tbk-frontend[id^=tbk-frontend-] .tbk-statistic-title{
        color: rgb(255 255 255 / 45%) !important;
}

/* --- Ajuste de padding para el contenedor principal en móviles --- */

@media (max-width: 767px) {
    /* Selector para el contenedor principal del plugin "The Booking" */
    /* id^=tbk-frontend- selecciona cualquier ID que empiece con "tbk-frontend-" */
    .tbk-frontend[id^="tbk-frontend-"] {
        padding-top: 20px !important;  /* 20px de padding arriba */
        padding-right: 0px !important; /* 0px de padding a la derecha */
        padding-bottom: 0px !important;/* 0px de padding abajo */
        padding-left: 0px !important;  /* 0px de padding a la izquierda */
    }

    /* Puedes usar la versión abreviada si lo prefieres, es equivalente a lo de arriba: */
    /* .tbk-frontend[id^="tbk-frontend-"] {
        padding: 20px 0px 0px 0px !important;
    } */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-368fe508 *//* --- Variables de Color (puedes personalizarlas) --- */
:root {
    --luz-dinamica: rgba(0, 27, 255, 0.35);
    --fondo-cristal: rgba(10, 15, 40, 0.4);
    --borde-cristal: rgba(0, 27, 255, 0.4);
    --sombra-cristal: rgba(0, 0, 0, 0.2);
    --brillo-interno: rgba(0, 27, 255, 0.15);
}

/* --- Estilos para el efecto de Cristal --- */
.glass-effect-elementor {
    /* Posicionamiento y contención */
    position: relative !important;
    overflow: hidden !important;
    z-index: 1;

    /* El efecto Glassmorphism */
    background: var(--fondo-cristal);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%); /* Para Safari */
    
    /* Estilos visuales */
    border: 1px solid var(--borde-cristal);
    box-shadow: 0 8px 32px 0 var(--sombra-cristal);
    
    /* Asegúrate de que el border-radius de Elementor se respete */
    /* Si no funciona, puedes forzarlo aquí con: border-radius: 24px !important; */
}

/* --- Pseudo-elementos para los detalles realistas --- */
.glass-effect-elementor::before,
.glass-effect-elementor::after {
    content: '';
    position: absolute;
    border-radius: inherit; /* Hereda el border-radius del contenedor */
    z-index: -1;
}

/* Efecto de luz dinámico que sigue al ratón */
.glass-effect-elementor::before {
    left: var(--mouse-x);
    top: var(--mouse-y);
    width: 250px;
    height: 250px;
    background-image: radial-gradient(circle, var(--luz-dinamica) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: all 0.2s ease-out;
    opacity: 0;
}

/* Brillo interno y textura de ruido */
.glass-effect-elementor::after {
    inset: 0;
    box-shadow: inset 0 2px 10px 0 var(--brillo-interno);
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%" height="100%" filter="url(%23noise)"/%3E%3C/svg%3E');
    background-size: 100px;
    opacity: 0.03;
    z-index: -2;
}

/* Muestra la luz cuando el ratón está sobre el elemento */
.glass-effect-elementor:hover::before {
    opacity: 1;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5d7ebf69 *//* Animated Gradient Background Properties */
@property --g1-1-x-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 20%;
}
@property --g1-1-y-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 80%;
}
@property --g1-2-x-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 80%;
}
@property --g1-2-y-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 20%;
}

/* Animated Gradient Background Keyframes */
@keyframes g-1 {
    25% {
        --g1-1-x-position: 15%;
        --g1-1-y-position: 15%;
        --g1-2-x-position: 85%;
        --g1-2-y-position: 80%;
    }
    50% {
        --g1-1-x-position: 80%;
        --g1-1-y-position: 15%;
        --g1-2-x-position: 15%;
        --g1-2-y-position: 85%;
    }
    75% {
        --g1-1-x-position: 85%;
        --g1-1-y-position: 80%;
        --g1-2-x-position: 15%;
        --g1-2-y-position: 15%;
    }
    100% {
        --g1-1-x-position: 20%;
        --g1-1-y-position: 80%;
        --g1-2-x-position: 80%;
        --g1-2-y-position: 20%;
    }
}

/* The Class for the Elementor Container */
.animated-background {
    /* Set initial variables for the animation */
    --g1-1-x-position: 20%;
    --g1-1-y-position: 80%;
    --g1-2-x-position: 80%;
    --g1-2-y-position: 20%;
    
    /* The background itself */
    background: 
        radial-gradient(circle at var(--g1-1-x-position) var(--g1-1-y-position), #001bff 0%, transparent 25%),
        radial-gradient(circle at var(--g1-2-x-position) var(--g1-2-y-position), #001bff 0%, transparent 25%),
        #000000;
    
    /* Animation properties */
    animation-name: g-1;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Satoshi';
	font-display: auto;
	src: url('https://kodex.global/wp-content/uploads/2025/07/Satoshi-Variable1.ttf') format('truetype');
}
/* End Custom Fonts CSS */