@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular-.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

:root {
    --blanco: #ffffff;
    --negro: #3e434d;
    --gris1: #f5f8ff;
    --gris2: #eaf1ff;
    --marino1: #2f3444;
    --marino2: #252b3d;
    --marino2-rgb: 37, 43, 61;
    --rojo1: #cd133f;
    --morado1: #9047d8;
    --celeste1: #acd9ff;
    --verde1: #59cc89;
    --amarillo1: #f1d058;
    --azul1: #082f7e;
    --azul2: #011f5a;
    --fuente-principal: 'Montserrat', Arial, sans-serif;
    --site-header-height: 64px;
    --site-header-logo-height: 48px;
}

body {
    font-family: var(--fuente-principal);
    font-weight: 400;
}

h1,
h2 {
    font-family: var(--fuente-principal);
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 300;
    font-size: 40px;
}

:is(h3, h4, h5, h6, p, a, span, li, .h3, .h4, .h5, .h6) {
    font-family: var(--fuente-principal);
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 300;
}

a {
    color: var(--negro);
    text-decoration: none !important;
}

/* ==========================================================================
   UTILIDADES BASE
   ========================================================================== */

/* Colores de fondo */
.bg-color-blanco { background-color: var(--blanco); }
.bg-color-negro { background-color: var(--negro); }
.bg-color-gris1 { background-color: var(--gris1); }
.bg-color-gris2 { background-color: var(--gris2); }
.bg-color-marino1 { background-color: var(--marino1); }
.bg-color-marino2 { background-color: var(--marino2); }
.bg-color-azul-1 { background-color: var(--azul1); }
.bg-color-azul-2 { background-color: var(--azul2); }
.bg-color-rojo1 { background-color: var(--rojo1); }
.bg-color-morado1 { background-color: var(--morado1); }
.bg-color-celeste1 { background-color: var(--celeste1); }
.bg-gradient-pastel1 { background: linear-gradient(40deg, rgba(217, 202, 235, 1) 0%, rgba(235, 249, 255, 1) 27%, rgba(203, 229, 255, 1) 72%, rgba(255, 212, 241, 1) 100%); }

.bg-blanco{background-color: var(--blanco); transition: .2s;}
.bg-negro{background-color: var(--negro); transition: .2s;}
.bg-gris-1{background-color: var(--gris1); transition: .2s;}
.bg-gris-2{background-color: var(--gris2); transition: .2s;}
.bg-marino-1{background-color: var(--marino1); transition: .2s;}
.bg-marino-2{background-color: var(--marino2); transition: .2s;}
.bg-rojo-1{background-color: var(--rojo1); transition: .2s;}
.bg-morado-1{background-color: var(--morado1); transition: .2s;}
.bg-celeste-1{background-color: var(--celeste1); transition: .2s;}

.bg-gradient-celeste{
  background: #EEF3F9;
  background: linear-gradient(24deg, rgba(238, 243, 249, 1) 0%, rgba(204, 221, 255, 1) 60%, rgba(226, 185, 209, 1) 89%);
}
.bg-gradient-rojo{
  background: var(--rojo1);
  background: linear-gradient(90deg, var(--rojo1) 0%, #ff0202 100%);
}
.bg-gradient-morado{
  background: var(--rojo1);
  background: linear-gradient(90deg, var(--morado1) 0%, #9812b1 100%);
}

.bg-rojo-1-hov:hover{
  background-color: var(--rojo1);
  transition: .2s;
}


/* Colores de texto */
.t-color-blanco { color: var(--blanco); }
.t-color-negro { color: var(--negro); }
.t-color-gris1 { color: var(--gris1); }
.t-color-gris2 { color: var(--gris2); }
.t-color-marino1 { color: var(--marino1); }
.t-color-marino2 { color: var(--marino2); }
.t-color-rojo1 { color: var(--rojo1); }
.t-color-morado1 { color: var(--morado1); }
.t-color-celeste1 { color: var(--celeste1); }

.t-blanco{color: var(--blanco) !important;}
.t-negro{color: var(--negro) !important;}
.t-gris-1{color: var(--gris1) !important;}
.t-rojo-1{color: var(--rojo1) !important;}
.t-morado-1{color: var(--morado1) !important;}
.t-celeste-1{color: var(--celeste1) !important;}

.table-check-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    background-color: var(--morado1);
    -webkit-mask: url("../icons/check.svg") center / contain no-repeat;
    mask: url("../icons/check.svg") center / contain no-repeat;
}

/* ==========================================================================
   FORMULARIOS Y BOTONES BASE
   ========================================================================== */

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus {
    border-color: var(--morado1);
    box-shadow: none;
}
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label {
    transform: scale(0.75) translateY(-0.5rem) translateX(0.15rem);
}

.btn {
    padding: 0.65rem 1.5rem;
    border: 0;
    border-radius: 999px;
    font-weight: 400;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    text-decoration: none;
}

.btn.btn-1 {
    color: var(--azul1);
    background: var(--celeste1);
}
.btn.btn-2 {
    color: var(--blanco);
    background: var(--morado1);
}
.btn.btn-3 {
    color: var(--blanco);
    background: var(--verde1);
}
.btn.btn-4 {
    color: var(--blanco);
    background: var(--azul1);
}
.btn.btn-5 {
    color: var(--azul1);
    background: var(--blanco);
}
.btn.btn-wizard {
    color: var(--wizard-accent-text-color, var(--blanco));
    background: var(--wizard-accent-color, var(--morado1));
}

/* Spacing extendido Bootstrap 6-8 */
.m-6, .mx-6, .my-6, .mt-6, .me-6, .mb-6, .ms-6, .p-6, .px-6, .py-6, .pt-6, .pe-6, .pb-6, .ps-6 { --space-size: 4rem; }
.m-7, .mx-7, .my-7, .mt-7, .me-7, .mb-7, .ms-7, .p-7, .px-7, .py-7, .pt-7, .pe-7, .pb-7, .ps-7 { --space-size: 5rem; }
.m-8, .mx-8, .my-8, .mt-8, .me-8, .mb-8, .ms-8, .p-8, .px-8, .py-8, .pt-8, .pe-8, .pb-8, .ps-8 { --space-size: 6rem; }

.m-6, .m-7, .m-8 { margin: var(--space-size) !important; }
.p-6, .p-7, .p-8 { padding: var(--space-size) !important; }

.mx-6, .mx-7, .mx-8 {
    margin-right: var(--space-size) !important;
    margin-left: var(--space-size) !important;
}

.my-6, .my-7, .my-8 {
    margin-top: var(--space-size) !important;
    margin-bottom: var(--space-size) !important;
}

.px-6, .px-7, .px-8 {
    padding-right: var(--space-size) !important;
    padding-left: var(--space-size) !important;
}

.py-6, .py-7, .py-8 {
    padding-top: var(--space-size) !important;
    padding-bottom: var(--space-size) !important;
}

.mt-6, .mt-7, .mt-8 { margin-top: var(--space-size) !important; }
.me-6, .me-7, .me-8 { margin-right: var(--space-size) !important; }
.mb-6, .mb-7, .mb-8 { margin-bottom: var(--space-size) !important; }
.ms-6, .ms-7, .ms-8 { margin-left: var(--space-size) !important; }
.pt-6, .pt-7, .pt-8 { padding-top: var(--space-size) !important; }
.pe-6, .pe-7, .pe-8 { padding-right: var(--space-size) !important; }
.pb-6, .pb-7, .pb-8 { padding-bottom: var(--space-size) !important; }
.ps-6, .ps-7, .ps-8 { padding-left: var(--space-size) !important; }

/* ==========================================================================
   UTILIDADES GENERALES
   ========================================================================== */
/*********************************** GENERALES ************************************************/
/******************** EXTRA PADDINGS *******************************/
.pt-1{padding-top: 5px !important; }
.pt-2{padding-top: 10px !important; }
.pt-3{padding-top: 15px !important; }
.pt-4{padding-top: 30px !important; }
.pt-5{padding-top: 40px !important; }
.pt-6{padding-top: 50px !important; }
.pt-7{padding-top: 70px !important; }
.pt-8{padding-top: 90px !important; }

.pb-1{padding-bottom: 5px !important; }
.pb-2{padding-bottom: 10px !important; }
.pb-3{padding-bottom: 15px !important; }
.pb-4{padding-bottom: 30px !important; }
.pb-5{padding-bottom: 40px !important; }
.pb-6{padding-bottom: 50px !important; }
.pb-7{padding-bottom: 70px !important; }
.pb-8{padding-bottom: 90px !important; }

.pl-1{padding-left: 5px !important; }
.pl-2{padding-left: 10px !important; }
.pl-3{padding-left: 15px !important; }
.pl-4{padding-left: 30px !important; }
.pl-5{padding-left: 40px !important; }
.pl-6{padding-left: 50px !important; }
.pl-7{padding-left: 70px !important; }
.pl-8{padding-left: 90px !important; }

.pr-1{padding-right: 5px !important; }
.pr-2{padding-right: 10px !important; }
.pr-3{padding-right: 15px !important; }
.pr-4{padding-right: 30px !important; }
.pr-5{padding-right: 40px !important; }
.pr-6{padding-right: 50px !important; }
.pr-7{padding-right: 70px !important; }
.pr-8{padding-right: 90px !important; }

/******************** EXTRA PADDINGS *******************************/
.py-1{padding-top: 5px !important; padding-bottom: 5px !important}
.py-2{padding-top: 10px !important; padding-bottom: 10px !important }
.py-3{padding-top: 15px !important; padding-bottom: 15px !important }
.py-4{padding-top: 30px !important; padding-bottom: 30px !important }
.py-5{padding-top: 40px !important;; padding-bottom: 40px !important;;}
.py-6{padding-top: 50px !important;; padding-bottom: 50px !important;;}
.py-7{padding-top: 70px !important;; padding-bottom: 70px !important;;}
.py-8{padding-top: 90px !important;; padding-bottom: 90px !important;;}

.my-1{margin-top: 5px !important; margin-bottom: 5px !important}
.my-2{margin-top: 10px !important; margin-bottom: 10px !important }
.my-3{margin-top: 15px !important; margin-bottom: 15px !important }
.my-4{margin-top: 30px !important; margin-bottom: 30px !important }
.my-5{margin-top: 40px !important;; margin-bottom: 40px !important;;}
.my-6{margin-top: 50px !important;; margin-bottom: 50px !important;;}
.my-7{margin-top: 70px !important;; margin-bottom: 70px !important;;}
.my-8{margin-top: 90px !important;; margin-bottom: 90px !important;;}

/******************** EXTRA PADDINGS X *******************************/
.px-0{padding-left: 0px; padding-right: 0px;}
.px-1{padding-left: 5px; padding-right: 5px;}
.px-2{padding-left: 10px; padding-right: 10px;}
.px-3{padding-left: 15px; padding-right: 15px;}
.px-4{padding-left: 25px; padding-right: 25px;}
.px-5{padding-left: 35px; padding-right: 35px;}

/******************** EXTRA MARGIN X *******************************/
.mx-0{margin-left: 0px; margin-right: 0px;}
.mx-1{margin-left: 5px; margin-right: 5px;}
.mx-2{margin-left: 10px; margin-right: 10px;}
.mx-3{margin-left: 15px; margin-right: 15px;}
.mx-4{margin-left: 25px; margin-right: 25px;}
.mx-5{margin-left: 35px; margin-right: 35px;}

/******************** EXTRA MARGINS *******************************/
.mt-1{margin-top: 5px !important; }
.mt-2{margin-top: 10px !important; }
.mt-3{margin-top: 15px !important; }
.mt-4{margin-top: 30px !important; }
.mt-5{margin-top: 40px !important; }
.mt-6{margin-top: 50px !important; }
.mt-7{margin-top: 70px !important; }
.mt-8{margin-top: 90px !important; }

.mb-1{margin-bottom: 5px !important; }
.mb-2{margin-bottom: 10px !important; }
.mb-3{margin-bottom: 15px !important; }
.mb-4{margin-bottom: 30px !important; }
.mb-5{margin-bottom: 40px !important; }
.mb-6{margin-bottom: 50px !important; }
.mb-7{margin-bottom: 70px !important; }
.mb-8{margin-bottom: 90px !important; }

/******************** QUITAR PADDINGS *******************************/
.ml-0{ margin-left: 0px; }
.mr-0{ margin-right: 0px; }
.pl-0{ padding-left: 0px; }
.pr-0{ padding-right: 0px; }
.pb-0{ padding-bottom: 0px; }
.pt-0{ padding-top: 0px; }
.mb-0{ margin-bottom: 0px; }
.mt-0{ margin-top: 0px; }

/******************* NEGATIVOS ********************/
.neg-top-200{ margin-top: -200px; }
.neg-top-150{ margin-top: -150px; }
.neg-top-125{ margin-top: -125px; }
.neg-top-100{ margin-top: -100px; }
.neg-top-80{ margin-top: -80px; }
.neg-top-70{ margin-top: -70px; }
.neg-top-60{ margin-top: -60px; }
.neg-top-50{ margin-top: -50px; }
.neg-top-40{ margin-top: -40px; }
.neg-top-30{ margin-top: -30px; }
.neg-top-25{ margin-top: -25px; }
.neg-top-20{ margin-top: -20px; }
.neg-top-15{ margin-top: -15px; }
.neg-top-10{ margin-top: -10px; }
.neg-top-5{ margin-top: -5px; }

.neg-bot-125{ margin-bottom: -125px !important; }
.neg-bot-80{ margin-bottom: -80px !important; }
.neg-bot-70{ margin-bottom: -70px !important; }
.neg-bot-60{ margin-bottom: -60px !important; }
.neg-bot-50{ margin-bottom: -50px !important; }
.neg-bot-40{ margin-bottom: -40px !important; }
.neg-bot-30{ margin-bottom: -30px !important; }
.neg-bot-27{ margin-bottom: -27px !important; }
.neg-bot-25{ margin-bottom: -25px !important; }
.neg-bot-20{ margin-bottom: -20px !important; }
.neg-bot-15{ margin-bottom: -15px !important; }
.neg-bot-10{ margin-bottom: -10px !important; }
.neg-bot-5{ margin-bottom: -5px !important; }

.neg-left-2{ margin-left: -2px;}
.neg-left-5{ margin-left: -5px;}
.neg-left-10{ margin-left: -10px;}
.neg-left-20{ margin-left: -20px;}
.neg-left-30{ margin-left: -30px;}
.neg-left-50{ margin-left: -50px;}
.neg-left-100{ margin-left: -100px;}

.neg-right-2{ margin-right: -2px;}
.neg-right-5{ margin-right: -5px;}
.neg-right-10{ margin-right: -10px;}
.neg-right-20{ margin-right: -20px;}
.neg-right-30{ margin-right: -30px;}

/******************* TOP BOT LEFT RIGHT 0 ********************/
.top-0 { top: 0px;}
.top-10 { top: 10px;}
.top-15 { top: 15px;}
.right-0 { right: 0px;}
.right-10 { right: 10px;}
.right-15 { right: 15px;}
.bottom-0 { bottom: 0px;}
.bottom-10 { bottom: 10px;}
.bottom-15 { bottom: 15px;}
.left-0 { left: 0px;}
.left-10 { left: 10px;}
.left-15 { left: 15px;}

/******************* Z INDEX ********************/
.z-1{ z-index: 1; }
.z-2{ z-index: 2; }
.z-3{ z-index: 3; }
.z-4{ z-index: 4; }
.z-5{ z-index: 5; }

/******************** TAMAÑOS TEXTOS *******************************/
.fs-10{ font-size: 10px; }
.fs-11{ font-size: 11px; }
.fs-12{ font-size: 12px; }
.fs-13{ font-size: 13px; }
.fs-14{ font-size: 14px; }
.fs-15{ font-size: 15px; }
.fs-16{ font-size: 16px; }
.fs-17{ font-size: 17px; }
.fs-18{ font-size: 18px; }
.fs-20{ font-size: 20px; }
.fs-22{ font-size: 22px; }
.fs-25{ font-size: 25px; }
.fs-30{ font-size: 30px; }
.fs-35{ font-size: 35px; }
.fs-40{ font-size: 40px; }
.fs-50{ font-size: 50px; }
.fs-60{ font-size: 60px; }

.clam-h1{font-size: clamp(1rem, 13vw, 4rem);}

/******************** ANCHOS TEXTOS *******************************/
.fw-300{ font-weight: 300; }
.fw-400{ font-weight: 400; }
.fw-500{ font-weight: 500; }
.fw-600{ font-weight: 600; }
.fw-700{ font-weight: 700; }
.fw-800{ font-weight: 800; }

.min-vh-100 { min-height: 100vh !important; }
.min-vh-90 { min-height: 90vh !important; }
.min-vh-80 { min-height: 80vh !important; }
.min-vh-75 { min-height: 75vh !important; }
.min-vh-70 { min-height: 70vh !important; }
.min-vh-60 { min-height: 60vh !important; }
.min-vh-50 { min-height: 50vh !important; }
.min-vh-40 { min-height: 40vh !important; }
.min-vh-30 { min-height: 30vh !important; }
.min-vh-20 { min-height: 30vh !important; }
.min-vh-10 { min-height: 30vh !important; }

.min-h-50{ min-height: 50px; }
.min-h-75{ min-height: 75px; }
.min-h-100{ min-height: 100px; }
.min-h-125{ min-height: 125px; }
.min-h-150{ min-height: 150px; }
.min-h-175{ min-height: 175px; }
.min-h-185{ min-height: 185px; }
.min-h-200{ min-height: 200px; }
.min-h-225{ min-height: 225px; }
.min-h-250{ min-height: 250px; }
.min-h-300{ min-height: 300px; }
.min-h-350{ min-height: 350px; }
.min-h-400{ min-height: 400px; }
.min-h-450{ min-height: 450px; }
.min-h-500{ min-height: 500px; }
.min-h-600{ min-height: 600px; }
.min-h-700{ min-height: 700px; }
.min-h-800{ min-height: 800px; }

.max-h-70{ max-height: 70px; }
.max-h-100{ max-height: 100px; }
.max-h-125{ max-height: 125px; }
.max-h-150{ max-height: 150px; }
.max-h-175{ max-height: 175px; }
.max-h-200{ max-height: 200px; }
.max-h-225{ max-height: 225px; }
.max-h-250{ max-height: 250px; }
.max-h-300{ max-height: 300px; }
.max-h-350{ max-height: 350px; }
.max-h-400{ max-height: 400px; }
.max-h-450{ max-height: 450px; }
.max-h-500{ max-height: 500px; }
.max-h-600{ max-height: 600px; }
.max-h-700{ max-height: 700px; }
.max-h-800{ max-height: 800px; }

.max-w-35{ max-width: 35px !important;}
.max-w-40{ max-width: 40px !important;}
.max-w-50{ max-width: 50px !important;}
.max-w-65{ max-width: 65px !important;}
.max-w-75{ max-width: 75px !important;}
.max-w-100{ max-width: 100px !important;}
.max-w-125{ max-width: 125px !important;}
.max-w-150{ max-width: 150px !important;}
.max-w-175{ max-width: 175px !important;}
.max-w-200{ max-width: 200px !important;}
.max-w-225{ max-width: 225px !important;}
.max-w-250{ max-width: 250px !important;}
.max-w-300{ max-width: 300px !important;}
.max-w-350{ max-width: 350px !important;}
.max-w-400{ max-width: 400px !important;}
.max-w-450{ max-width: 450px !important;}
.max-w-500{ max-width: 500px !important;}
.max-w-600{ max-width: 600px !important;}
.max-w-700{ max-width: 700px !important;}
.max-w-800{ max-width: 800px !important;}
.max-w-900{ max-width: 900px !important;}
.max-w-1000{ max-width: 1000px !important;}
.max-w-1100{ max-width: 1100px !important;}
.max-w-1200{ max-width: 1200px !important;}

.min-w-35{ min-width: 35px !important;}
.min-w-40{ min-width: 40px !important;}
.min-w-50{ min-width: 50px !important;}
.min-w-75{ min-width: 75px !important;}
.min-w-100{ min-width: 100px !important;}
.min-w-125{ min-width: 125px !important;}
.min-w-150{ min-width: 150px !important;}
.min-w-175{ min-width: 175px !important;}
.min-w-200{ min-width: 200px !important;}
.min-w-225{ min-width: 225px !important;}
.min-w-250{ min-width: 250px !important;}
.min-w-300{ min-width: 300px !important;}
.min-w-350{ min-width: 350px !important;}
.min-w-400{ min-width: 400px !important;}
.min-w-450{ min-width: 450px !important;}
.min-w-500{ min-width: 500px !important;}
.min-w-600{ min-width: 600px !important;}
.min-w-700{ min-width: 700px !important;}
.min-w-800{ min-width: 800px !important;}
.min-w-900{ min-width: 900px !important;}
.min-w-1000{ min-width: 1000px !important;}
.min-w-1200{ min-width: 1200px !important;}

.w-80{ max-width: 80%;}
.w-85{ max-width: 85%;}
.w-90{ max-width: 90%;}
.w-95{ max-width: 95%;}
.w-100{ max-width: 100%;}

.rounded-100{ border-radius: 100% !important; }
.rounded-30{ border-radius: 30px !important; }
.rounded-15{ border-radius: 15px !important; }
.rounded-10{ border-radius: 10px !important; }
.rounded-5{ border-radius: 5px !important; }
.rounded-3{ border-radius: 3px !important; }

.icono-5{ width: 5px !important; height: 5px !important; min-width: 5px !important; max-width: 5px !important; min-height: 5px !important; max-height: 5px !important; }
.icono-10{ width: 10px !important; height: 10px !important; min-width: 10px !important; max-width: 10px !important; min-height: 10px !important; max-height: 10px !important; }
.icono-15{ width: 15px !important; height: 15px !important; min-width: 15px !important; max-width: 15px !important; min-height: 15px !important; max-height: 15px !important; }
.icono-20{ width: 20px !important; height: 20px !important; min-width: 20px !important; max-width: 20px !important; min-height: 20px !important; max-height: 20px !important; }
.icono-25{ width: 25px !important; height: 25px !important; min-width: 25px !important; max-width: 25px !important; min-height: 25px !important; max-height: 25px !important;}
.icono-30{ width: 30px !important; height: 30px !important; min-width: 30px !important; max-width: 30px !important; min-height: 30px !important; max-height: 30px !important; }
.icono-35{ width: 35px !important; height: 35px !important; min-width: 35px !important; max-width: 35px !important; min-height: 35px !important; max-height: 35px !important; }
.icono-40{ width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important; min-height: 40px !important; max-height: 40px !important; }
.icono-45{ width: 45px !important; height: 45px !important; min-width: 45px !important; max-width: 45px !important; min-height: 45px !important; max-height: 45px !important; }
.icono-50{ width: 50px !important; height: 50px !important; min-width: 50px !important; max-width: 50px !important; min-height: 50px !important; max-height: 50px !important; }
.icono-55{ width: 55px !important; height: 55px !important; min-width: 55px !important; max-width: 55px !important; min-height: 55px !important; max-height: 55px !important; }
.icono-60{ width: 60px !important; height: 60px !important; min-width: 60px !important; max-width: 60px !important; min-height: 60px !important; max-height: 60px !important; }
.icono-65{ width: 65px !important; height: 65px !important; min-width: 65px !important; max-width: 65px !important; min-height: 65px !important; max-height: 65px !important; }
.icono-70{ width: 70px !important; height: 70px !important; min-width: 70px !important; max-width: 70px !important; min-height: 70px !important; max-height: 70px !important; }
.icono-75{ width: 75px !important; height: 75px !important; min-width: 75px !important; max-width: 75px !important; min-height: 75px !important; max-height: 75px !important; }
.icono-80{ width: 80px !important; height: 80px !important; min-width: 80px !important; max-width: 80px !important; min-height: 80px !important; max-height: 80px !important; }
.icono-85{ width: 85px !important; height: 85px !important; min-width: 85px !important; max-width: 85px !important; min-height: 85px !important; max-height: 85px !important; }
.icono-90{ width: 90px !important; height: 90px !important; min-width: 90px !important; max-width: 90px !important; min-height: 90px !important; max-height: 90px !important; }
.icono-95{ width: 95px !important; height: 95px !important; min-width: 95px !important; max-width: 95px !important; min-height: 95px !important; max-height: 95px !important; }
.icono-100{ width: 100px !important; height: 100px !important; min-width: 100px !important; max-width: 100px !important; min-height: 100px !important; max-height: 100px !important; }
.icono-125{ width: 125px !important; height: 125px !important; min-width: 125px !important; max-width: 125px !important; min-height: 125px !important; max-height: 125px !important; }
.icono-150{ width: 150px !important; height: 150px !important; min-width: 150px !important; max-width: 150px !important; min-height: 150px !important; max-height: 150px !important; }
.icono-175{ width: 175px !important; height: 175px !important; min-width: 175px !important; max-width: 175px !important; min-height: 175px !important; max-height: 175px !important; }
.icono-200{ width: 200px !important; height: 200px !important; min-width: 200px !important; max-width: 200px !important; min-height: 200px !important; max-height: 200px !important; }

.overflow{ overflow: hidden !important; }

.truncate-1{ width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.truncate-2{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.truncate-3{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.truncate-4{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.truncate-5{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }

.backdrop{ backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);}

.border-none{ border: 0px !important;}
.border-left{ border-left: 1px solid #dee2e6;}
.border-right{ border-right: 1px solid #dee2e6;}

.text-left{text-align: left;}
.text-right{text-align: right;}

/******************* position ********************/
.relative{ position: relative; }
.absolute{ position: absolute; }
.fixed{ position: fixed; }
.sticky{ position: sticky; }
.d-content{ display: contents; }
.d-inline-block { display: inline-block;}

.lh-10{line-height: 10px !important; }
.lh-11{line-height: 11px !important; }
.lh-12{line-height: 12px !important; }
.lh-13{line-height: 13px !important; }
.lh-14{line-height: 14px !important; }
.lh-15{line-height: 15px !important; }
.lh-16{line-height: 16px !important; }
.lh-17{line-height: 17px !important; }
.lh-18{line-height: 18px !important; }
.lh-19{line-height: 19px !important; }
.lh-20{line-height: 20px !important; }
.lh-21{line-height: 21px !important; }
.lh-22{line-height: 22px !important; }
.lh-23{line-height: 23px !important; }
.lh-24{line-height: 24px !important; }
.lh-25{line-height: 25px !important; }
.lh-30{line-height: 30px !important; }
.lh-35{line-height: 35px !important; }
.lh-40{line-height: 40px !important; }
.lh-100{line-height: 100px !important; }
.lh-140{line-height: 140px !important; }

.opacity-0{ opacity: 0 !important;}
.opacity-9{ opacity: .9 !important;}
.opacity-8{ opacity: .8 !important;}
.opacity-7{ opacity: .7 !important;}
.opacity-6{ opacity: .6 !important;}
.opacity-5{ opacity: .5 !important;}
.opacity-4{ opacity: .4 !important;}
.opacity-3{ opacity: .3 !important;}
.opacity-2{ opacity: .2 !important;}
.opacity-1{ opacity: 1 !important;}

.mayusculas{ text-transform: uppercase; }
.minusculas{ text-transform: lowercase; }
.capitalize{ text-transform: capitalize; }
.first-letter{ text-transform: lowercase;}
.first-letter::first-letter{ text-transform: uppercase !important;}
.grecaptcha-badge { opacity: 0 !important; }
.pointer { cursor: pointer !important}
.m-0auto{ margin: 0 auto;}
.m-0right{ margin: 0px 0px 0px auto;}
.m-0left{ margin: 0px auto 0px 0px;}
.img-bg{ height: 100%; width: 100%; object-fit: cover; object-position: center;}
img{max-width: 100%;}

.letter-spacing-2{ letter-spacing: 2px;}
.letter-spacing-3{ letter-spacing: 3px;}

.decoration-none{text-decoration: none;}

.bg-parallax{
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

*:focus {
  outline: none !important;
}


/* ============================================================ HOME ============================================================ */
/* ================= hero  ================= */
#hero {
    isolation: isolate;
    padding-top: clamp(2.5rem, 4vw, 4rem) !important;
    padding-bottom: clamp(4.5rem, 7vw, 6rem) !important;
    background-color: var(--morado1);
    background-image: url('../img/home-hero-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#hero .container {
    position: relative;
    z-index: 2;
}

.hero__media {
    margin: 0;
}

.hero__media-image {
    display: block;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding-top: 80px;
    margin-bottom: -70px;
}

.hero__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    width: fit-content;
    max-width: 100%;
    padding-left: 1.5rem;
    color: var(--blanco);
    font-size: .95rem;
    line-height: 1.45;
    text-align: left;
}

.hero__list::before {
    content: "";
    position: absolute;
    top: .45rem;
    bottom: .45rem;
    left: .35rem;
    width: 1px;
    background: rgba(255, 255, 255, .75);
}

.hero__list li {
    position: relative;
}

.hero__list li::before {
    content: "";
    position: absolute;
    top: .45em;
    left: -1.35rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--blanco);
}

.hero__wave {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 1;
    height: clamp(3.25rem, 8vw, 6rem);
    pointer-events: none;
}

.hero__wave-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__wave-parallax > use {
    animation: landingHeroWaveMove 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.hero__wave-parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 11s;
}

.hero__wave-parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 15s;
}

.hero__wave-parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 20s;
}

.hero__wave-parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 28s;
}

@keyframes landingHeroWaveMove {
    0% { transform: translate3d(-90px, 0, 0); }
    100% { transform: translate3d(85px, 0, 0); }
}

/* ================= Ejemplos  ================= */
.disenos-demo__tabs {
    position: absolute;
    top: -1.5rem;
    right: 1.5rem;
    width: fit-content;
    box-shadow: 0 0.25rem 2rem 0 rgb(76 106 201 / 16%);
    z-index: 2;
}

.disenos-demo__tabs .nav-link {
    color: var(--marino1);
    border-radius: 999px;
}

.disenos-demo__tabs .nav-link.active {
    color: var(--blanco);
    background: var(--morado1);
}

.disenos-demo__feature {
    min-height: 300px;
    background:
        linear-gradient(rgba(20, 83, 191, .82), rgba(20, 83, 191, .82)),
        url("../img/home-img-boda.webp") center/cover no-repeat;
}

.disenos-demo__diamond {
    width: 72px;
}

.disenos-demo__item + .disenos-demo__item {
    border-left: 2px solid rgba(47, 52, 68, .08);
}

.disenos-demo__item img {
    max-height: 230px;
}

/* ================= Pasos  ================= */
.proceso__panel {
    background: url("../img/bg-textura-morado.webp") center/cover no-repeat;
}

.proceso__step {
    color: var(--blanco);
}

.proceso__step img {
    width: 28px;
}

.proceso__step small {
    display: table;
    width: fit-content;
    padding: .05rem .45rem;
    border-radius: 999px;
    color: var(--marino1);
    background: var(--amarillo1);
    font-size: .65rem;
    line-height: 1.2;
}

.proceso__step span {
    line-height: 1.35;
}

.proceso__phone {
    max-height: 430px;
    margin-top: -70px;
    margin-bottom: -70px;
}

/* ================= Lista de invitados  ================= */
#lista {
    isolation: isolate;
    min-height: 620px;
    padding-top: clamp(9rem, 12vw, 12rem);
    padding-bottom: clamp(9rem, 12vw, 12rem);
    background: linear-gradient(100deg, #8f63c8 0%, #b69ac3 48%, #d8c98f 100%);
}

.lista__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    opacity: .38;
    pointer-events: none;
}

.lista__wave {
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    z-index: 0;
    height: clamp(3.25rem, 8vw, 6rem);
    transform: rotate(180deg);
    pointer-events: none;
}

.lista__wave--bottom {
    top: auto;
    bottom: -1px;
    transform: none;
}

.lista__card {
    position: relative;
    max-width: 600px;
    z-index: 2;
    box-shadow: 0 14px 35px rgba(62, 67, 77, .18);
}

.lista__content {
    min-height: 158px;
    padding: 25px 45px 25px 0px;
}

.lista__actions {
    max-width: 600px;
    position: relative;
    z-index: 2;
}

.lista__flower {
    pointer-events: none;
    margin-bottom: -80px;
    margin-left: -67px;
    margin-top: -30px;
}

.lista__flower--mobile {
    display: none;
}

.lista__flower--mobile-front {
    display: none;
}

.lista__flower--right {
    position: absolute;
    right: -20px;
    left: auto;
    width: 100px;
    pointer-events: none;
    z-index: 1;
    bottom: 66px;
}

.lista__icon {
    width: 62px;
    filter: invert(29%) sepia(15%) saturate(1299%) hue-rotate(246deg) brightness(89%) contrast(87%);
}

/* ================= Carousel información  ================= */
#informacion-carousel {
    position: relative;
    overflow: hidden;
    background: #fff;
    padding-bottom: 2.5rem !important;
}

.informacion-carousel__header {
    max-width: 760px;
}

.informacion-carousel__subtitle {
    color: #4d4f60;
    line-height: 1.45;
}

.informacion-carousel__carousel {
    width: 100%;
    background: #fff;
    padding: 1.25rem 0 1rem;
}

.informacion-carousel__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.informacion-carousel__viewport::-webkit-scrollbar {
    display: none;
}

.informacion-carousel__track {
    display: flex;
}

.informacion-carousel__slideframe {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.informacion-carousel__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

.informacion-carousel__item {
    min-width: 0;
}

.informacion-carousel__slide {
    min-height: 220px;
    padding: clamp(1.5rem, 4vw, 3rem) 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.informacion-carousel__icon {
    width: 72px;
    height: auto;
    margin-bottom: 1rem;
}

.informacion-carousel__indicators {
    position: static;
    margin: 1rem 0 0;
    display: flex;
    justify-content: center;
    gap: 2px;
}

.informacion-carousel__indicators [data-informacion-carousel-dot] {
    width: 27px;
    height: 35px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .35;
    cursor: pointer;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.informacion-carousel__indicators [data-informacion-carousel-dot]::before {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background-color: #a86be8;
}

.informacion-carousel__indicators .is-active {
    opacity: 1;
}

.informacion-carousel__indicators .is-active::before {
    width: 30px;
}


/* ================= S4  ================= */
.informacion-general__block + .informacion-general__block {
    margin-top: 9rem !important;
}

.informacion-general__curve {
    line-height: 0;
}

.informacion-general__curve {
    position: relative;
    margin-top: -1px;
}

.informacion-general__curve-svg {
    display: block;
    width: 100%;
    height: 108px;
}
/* ============================================================ HOME FIN ============================================================ */

/* ============================================================ BODA / XV ============================================================ */
/* Este bloque queda reservado para estilos especificos de las vistas publicas de boda y xv. */
/* Todo lo que afecte solo a `body.boda`, `body.xv` o a secciones de esas vistas va aqui. */

body.boda .disenos-demo__tabs,
body.xv .disenos-demo__tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

body.boda .disenos-demo__control,
body.xv .disenos-demo__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.boda .disenos-demo__control-icon,
body.xv .disenos-demo__control-icon {
    display: block;
    width: 35px;
    height: 35px;
    background-color: var(--morado1);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

body.boda .disenos-demo__control[disabled],
body.xv .disenos-demo__control[disabled] {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

body.boda .disenos-demo-carousel,
body.xv .disenos-demo-carousel {
    width: 100%;
}

body.boda .disenos-demo-carousel__viewport,
body.xv .disenos-demo-carousel__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.boda .disenos-demo-carousel__viewport::-webkit-scrollbar,
body.xv .disenos-demo-carousel__viewport::-webkit-scrollbar {
    display: none;
}

body.boda .disenos-demo-carousel__track,
body.xv .disenos-demo-carousel__track {
    display: flex;
}

body.boda .disenos-demo-carousel__slideframe,
body.xv .disenos-demo-carousel__slideframe {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

body.boda .disenos-demo-carousel__grid,
body.xv .disenos-demo-carousel__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

body.boda .disenos-demo__item,
body.xv .disenos-demo__item {
    min-width: 0;
}

body.boda .disenos-demo__item img,
body.xv .disenos-demo__item img {
    display: block;
    width: auto;
    height: auto;
    max-height: 230px;
    max-width: 100%;
    margin: 0 auto;
}

/* ============================================================ BODA FIN ============================================================ */

/* ============================================================ LISTA INFORMACION CAROUSEL ============================================================ */
/* Oculta el indicador del carrusel en escritorio solo para la vista de lista de invitados. */
@media (min-width: 992px) {
    body.lista #informacion-carousel .informacion-carousel__indicators {
        display: none;
    }
}
/* ============================================================ LISTA INFORMACION CAROUSEL FIN ============================================================ */

/* ================= footer  ================= */
.site-footer__curve {
    position: absolute;
    top: -96px;
    right: 0;
    left: 0;
    z-index: 3;
    line-height: 0;
    pointer-events: none;
    background-color: inherit;
}

.site-footer__curve::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/home-lista-flor-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.10;
    pointer-events: none;
}

.site-footer {
    position: relative;
    overflow: visible;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/home-lista-flor-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.10;
    pointer-events: none;
}

.site-footer > .container {
    position: relative;
    z-index: 1;
}

.site-footer__curve-svg {
    display: block;
    width: 100%;
    height: 96px;
    position: relative;
    z-index: 1;
}

.site-footer__curve-path {
    fill: var(--gris2);
}

body.legal-page .site-footer__curve-path {
    fill: var(--blanco);
}


/* ========================================================================
   REVEAL ANIMATIONS PARA VISTAS PUBLICAS
   ======================================================================== */
.no-reveal.reveal-up,
.no-reveal.reveal-fade,
.no-reveal .reveal-up,
.no-reveal .reveal-fade,
.modal .reveal-up,
.modal .reveal-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.reveal-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}

.reveal-up.reveal-from-top {
    transform: translateY(-28px);
}

.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-fade {
    opacity: 0;
    transition: opacity 0.7s ease;
    will-change: opacity;
}

.reveal-fade.is-visible {
    opacity: 1;
}

.reveal-up.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-up.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-up.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-up.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-fade.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-fade.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-fade.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-fade.reveal-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    .reveal-up,
    .reveal-fade,
    .reveal-up.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .reveal-fade.is-visible {
        opacity: 1;
        transition: none;
    }
}

/* COMIENZA AUTH WIZARD */
/* ==========================================================================
   AUTH: LOGIN Y REGISTRO
   ========================================================================== */
.auth-wizard-card {
    width: min(100%, 500px);
    max-width: 500px;
    box-shadow: 0 1.5rem 3rem rgba(76, 106, 201, 0.16);
}

.auth-wizard-close {
    width: 40px;
    height: 40px;
}

.auth-wizard-close img {
    width: 20px;
    height: 20px;
}

.auth-wizard-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.auth-wizard-close--footer {
    position: static;
    flex: 0 0 auto;
}

.auth-wizard-shell {
    overflow: hidden;
}

.auth-wizard-section {
    display: flow-root;
}

.auth-wizard-title {
    box-shadow: 0 16px 18px -20px rgba(76, 106, 201, 0.8);
}

.auth-wizard-form .form-check-input:checked {
    background-color: var(--morado1);
    border-color: var(--morado1);
}

.auth-wizard-form {
    max-width: 400px;
}

.auth-icon-field .form-control {
    padding-left: 3rem;
}

.auth-icon-field label {
    left: 2rem;
}

.auth-field-icon {
    width: 2.75rem;
    height: 2.75rem;
    top: 0.4rem;
    z-index: 5;
    pointer-events: none;
}

.auth-field-icon img {
    width: 18px;
    height: 18px;
    opacity: 0.55;
}

.auth-field-icon img.auth-field-icon-email {
    width: 22px;
    height: 22px;
}

.auth-password-field .form-control {
    padding-right: 3rem;
}

.auth-password-toggle {
    width: 2.75rem;
    height: 2.75rem;
    top: 0.4rem;
    z-index: 5;
}

.auth-password-toggle img {
    width: 18px;
    height: 18px;
    opacity: 0.55;
}

.auth-form-toast {
    --bs-toast-max-width: 1000px;
    --bs-toast-bg: var(--marino1);
    --bs-toast-color: var(--blanco);
    width: fit-content;
    min-width: 200px;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    box-shadow: none;
}

.auth-form-toast .toast-body {
    line-height: 1.45;
}

.auth-form-toast-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    background: var(--amarillo1);
    mask: url("../icons/alerta-circle.svg") center / contain no-repeat;
    -webkit-mask: url("../icons/alerta-circle.svg") center / contain no-repeat;
}
/* ==========================================================================
   FIN AUTH: LOGIN Y REGISTRO
   ========================================================================== */

/* ==========================================================================
   LAYOUT PUBLICO: HEADER
   ========================================================================== */
#site-header {
    min-height: var(--site-header-height);
    box-shadow: 0 0.25rem 2rem 0px rgb(76 106 201 / 16%);
}

#site-header .site-header__logo {
    max-height: var(--site-header-logo-height);
    width: auto;
    height: auto;
}

#site-header .site-header__nav-link {
    gap: 0.5rem;
    font-weight: 600;
}

#site-header .site-header__nav-link img {
    flex: 0 0 auto;
}

#site-header .site-header__popover-summary {
    gap: 0.5rem;
    cursor: pointer;
}

#site-header .site-header__status-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    margin-right: 0.5rem;
    flex: 0 0 auto;
}

#site-header .site-header__status-dot--published {
    background-color: var(--verde1);
}

#site-header .site-header__status-dot--draft {
    background-color: var(--rojo1);
}

#site-header .site-header__account {
    width: 2.75rem;
    height: 2.75rem;
}

#site-header .site-header__menu-toggle {
    width: 2.75rem;
    height: 2.75rem;
}

#site-header .site-header__account img {
    filter: brightness(0) invert(1);
}

#site-header .site-header__popover summary {
    cursor: pointer;
    list-style: none;
}

#site-header .site-header__popover summary::-webkit-details-marker {
    display: none;
}

#site-header .site-header__popover-submenu summary::-webkit-details-marker {
    display: none;
}

#site-header .site-header__popover-menu {
    min-width: 14.5rem;
    margin-top: 1rem;
    padding: 0.9rem !important;
    border-radius: 15px !important;
    box-shadow: 0 0.75rem 2rem rgb(76 106 201 / 16%);
    z-index: 1031;
    transform-origin: top right;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
}

#site-header .site-header__popover--opening > .site-header__popover-menu,
#site-header .site-header__popover--open > .site-header__popover-menu,
#site-header .site-header__popover--closing > .site-header__popover-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#site-header .site-header__popover--opening > .site-header__popover-menu {
    animation: site-header-popover-in 0.2s ease-out both;
}

#site-header .site-header__popover--closing > .site-header__popover-menu {
    animation: site-header-popover-out 0.18s ease-in both;
}

#site-header .site-header__popover-menu a,
#site-header .site-header__popover-action {
    white-space: nowrap;
}

#site-header .site-header__popover-form {
    margin: 0;
}

#site-header .site-header__popover-action {
    border: 0;
    background: transparent;
    text-align: left;
}

#site-header .site-header__invitation-link {
    width: 100%;
    max-width: 230px;
    min-width: 0;
}

#site-header .site-header__invitation-link-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#site-header .site-header__popover-menu a:not(.btn):hover,
#site-header .site-header__popover-menu a:not(.btn):focus,
#site-header .site-header__popover-action:hover,
#site-header .site-header__popover-action:focus {
    background-color: var(--gris1);
}

#site-header .site-header__mobile-cta,
#site-header .site-header__mobile-cta:hover,
#site-header .site-header__mobile-cta:focus {
    background: var(--morado1);
    color: var(--blanco) !important;
    box-shadow: none;
    transform: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

#site-header .site-header__popover-submenu {
    list-style: none;
}

#site-header .site-header__submenu-links a:hover,
#site-header .site-header__submenu-links a:focus {
    background-color: var(--gris1);
}

#site-header .site-header__mobile-divider {
    height: 1px;
    background-color: rgba(76, 106, 201, 0.18);
}

#site-header .site-header__mobile-section-label {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(30, 47, 92, 0.72);
}

#site-header .site-header__mobile-cta {
    display: flex !important;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

#site-header-spacer {
    height: var(--site-header-height);
}

@keyframes site-header-popover-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes site-header-popover-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
}
/* ==========================================================================
   FIN LAYOUT PUBLICO: HEADER
   ========================================================================== */

/* ==========================================================================
   MODALES PUBLICOS
   ========================================================================== */
.modal-backdrop {
    background-color: rgba(76, 106, 201, 0.38) !important;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    opacity: 1;
}

.modal-backdrop.show {
    opacity: 1;
}

.modal-content {
    border: none;
    border-radius: 30px !important;
    box-shadow: none;
    outline: none;
    overflow: hidden;
    padding: 15px 20px 0px 20px;
}

/* ==========================================================================
   FIN MODALES PUBLICOS
   ========================================================================== */


/* ==========================================================================
   FOOTER Y ELEMENTOS PUBLICOS
   ========================================================================== */
.box-shadow{
  box-shadow: 0px 0px 20px 0px #b1bed7;
    transition: .2s;
}
footer .footer-terminos{
  border-radius: 20px 20px 0px 0px;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  max-width: 360px;
}

.site-footer__logo {
  margin: 0 auto;
}

.site-footer__title {
  max-width: 100%;
  line-height: 1.35;
}

.site-footer__socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0;
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .2s ease, opacity .2s ease;
}

.site-footer__social-link:hover {
  transform: translateY(-2px);
  opacity: .9;
}


#messenger,
#guest-footer-scanner {
  position: fixed;
    z-index: 1000;
    right: 15px;
    height: 60px;
    width: 60px;
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 24px rgba(1, 31, 90, 0.28);
    text-decoration: none;
}

#messenger{
    bottom: 15px;
    background-color: #0c4cff;
    display: flex;
}

#guest-footer-scanner {
    bottom: 88px;
    border: 0;
    background-color: var(--azul1);
    color: var(--blanco);
    cursor: pointer;
}

.messenger__icon{
  width: 28px;
  height: 28px;
  display: block;
  background-color: var(--blanco);
  -webkit-mask: url("../img/icon-messenger.svg") center / contain no-repeat;
  mask: url("../img/icon-messenger.svg") center / contain no-repeat;
}

.guest-footer-scanner__icon {
  width: 30px;
  height: 30px;
  display: block;
  background-color: currentColor;
  -webkit-mask: url("../icons/qr.svg") center / contain no-repeat;
  mask: url("../icons/qr.svg") center / contain no-repeat;
}
.container-ejemplos{
  background-color: var(--gris2);
    border-radius: 15px;
    padding: 10px;
    text-align: center;
}
.container-ejemplos img{
    border-radius: 15px;
    max-width: 300px;
    width: 100%;
}
.container-ejemplos a{
color: var(--marino1) !important;
    font-weight: 400;
    margin-top: 10px;
    display: inline-block;
    padding: 5px 20px;
    font-size: 15px;
    transition: .2s;
}
.container-ejemplos a:hover{
    letter-spacing: 1px;
    transition: .2s;
}
.container-ejemplos.ver-mas{
  background-color: var(--celeste1);
}
.container-ejemplos.ver-mas a{
color: var(--marino1) !important;
}
.container-ejemplos.ver-mas img{
    border: none !important;
}

#demos-perfil .container-ejemplos{
  background-color: #fff !important;
}
.home-modal-copy > div {
  padding: 15px;
  border-bottom: 1px solid #e7e7e7;
}
.home-modal-copy > div:last-of-type {
  border-bottom: none;
}
.home-modal-copy h4 {
  margin-bottom: 7px;
  font-size: 19px;
  font-weight: 300;
}
.home-modal-copy p {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
}
.home-modal-copy a {
  color: var(--rojo1) !important;
  font-weight: 500 !important;
}
.home-modal-copy span {
  font-weight: 500 !important;
}

.accordion-button{
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   DEMO SIN CUENTA
   ========================================================================== */
.demo-wizard-page.bg-gradient-pastel1 {
  background-image: linear-gradient(40deg, rgba(217, 202, 235, 1) 0%, rgba(235, 249, 255, 1) 27%, rgba(203, 229, 255, 1) 72%, rgba(255, 212, 241, 1) 100%) !important;
}

.btn .wizard-prev-icon {
    display: block;
    width: 1rem;
    height: 1rem;
}
/* ==========================================================================
   FIN DEMO SIN CUENTA
   ========================================================================== */