/***** GENERAL *****/

html {

    scroll-padding-top: calc(var(--editor-top, 0px) + var(--nav-h, 0px));

}

a { text-decoration: none; }

a:hover { opacity: 0.9; }

a:not([href]) { cursor: pointer; }

img { width: 100% }

li { margin-bottom: 10pt; }



/***** PAGE *****/

.admin-icon {

    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(248,248,250);
    border-color: rgb(222,222,230);
    border-style: solid;
    border-width: 1px;
    border-radius: 18px;
    margin-bottom: 8px;

}

.admin-icon:hover {

    background-color: #D3E1FC;
    border-color: blue;
    
}


/* BUTTONS */

.btn:hover { opacity: 0.9 !important; }

.btn:active { opacity: 0.85 !important; }

.btn-primary { border: none; }

.btn-apertur, .btn-apertur:hover {
    
    color: white !important;
    background-color: #2B3B90 !important;
    border: none;
    
}

.btn-editor, .btn-editor:hover { border-radius: 8px !important; background-color: #1084cb !important; color: white !important; padding: 4pt 8pt !important; }
.btn-cancel, .btn-cancel:hover { border-radius: 8px !important; background-color: #787878 !important; color: white !important; padding: 4pt 8pt !important; }
.btn-delete, .btn-delete:hover { border-radius: 8px !important; background-color: #dc3545 !important; color: white !important; padding: 4pt 8pt !important; }

.btn-section {

    cursor: pointer;
    color: white;
    background-color: rgb(110,110,120);
    border-radius: 8px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 0.85rem;

}



.carousel-inner>a { opacity: 1 }

.dropdown-triangle::before {
    
    border-bottom: 9px solid rgba(0, 0, 0, 0.2);
    border-left: 9px solid rgba(0, 0, 0, 0);
    border-right: 9px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    left: 23px;
    position: absolute;
    top: -8px;
    
}

.dropdown-triangle::after {
    
    border-bottom: 8px solid #FFFFFF;
    border-left: 9px solid rgba(0, 0, 0, 0);
    border-right: 9px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    left: 23px;
    position: absolute;
    top: -7px;
    
}


/* * * WHATSAPP * * * */

.floatwapp {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    border-radius: 18px;
    background: linear-gradient(145deg, #2BE07A, #1DAA57);
    box-shadow: 0 8px 24px rgba(29, 170, 87, .35), 0 2px 6px rgba(0, 0, 0, .15);
    z-index: 100;
    transition: transform .2s ease, box-shadow .2s ease;
}

.floatwapp:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 28px rgba(29, 170, 87, .45), 0 3px 8px rgba(0, 0, 0, .18);
}

.floatwapp::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid #25d366;
    animation: wapp-pulse 2.4s ease-out infinite;
}

@keyframes wapp-pulse {
    0%   { transform: scale(1);   opacity: .6; }
    100% { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .floatwapp::after { animation: none; }
}


/* * * * */

.form-control, .form-select, .input-group {
    
    background-color: rgb(249,249,250);
    border-radius: 9px;
    
}

.form-label {
    
    opacity: 0.8;
    font-size: .875em;
    margin-left: .25rem;
    margin-bottom: .5rem;
    display: block;
    
}

.gallery_item {
    display: inline-block;
    overflow: hidden;
    line-height: 0;
}

.gallery_item img {
    transition: transform 200ms ease-in-out;
    display: block;
}

.gallery_item:hover img {
    transform: scale(1.05);
}

.nemo-icon {
    
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    margin-bottom: 8px;

}

.nemo-icon i { font-size: 24px }

.navbar-logo{ opacity: 100%; }

.nav-link-active { opacity: 0.6; }

.nav-link-active:hover { opacity: 0.7; }

.page-image-bg {
    
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    
}

.bg-apertur { background-color: #3B51C2; color: white; }

.text-apertur { color: #3B51C2; }


.parallax-bg {
    
    position:absolute;
    top:-60px;
    left:0;
    width:100%;
    height:calc(100% + 120px);
    object-fit:cover;
    z-index:0;
    pointer-events:none;
    will-change:transform
    
}

.tns-nav { 

    text-align: center; 

    margin-bottom: .75rem;

}

.tns-nav button {

    width: 10px; 
    height: 10px; 
    margin: 0 4px; 
    padding: 0; 
    border: 0; 
    border-radius: 50%; 
    background-color: currentColor; 
    opacity: .25; 

}


/***** MODALS *****/

.modal {
    
    color: black;
    text-align: left;
    font-family: var(--bs-font-sans-serif);
    
}

.modal-content { border-radius: 16px; }

.modal-body { padding: 1.8rem !important; }

.modal-header {
    
    background-color: rgb(246,246,247);
    padding-top: 11px;
    padding-bottom: 11px;
    font-weight: 600;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    
}

.modal-footer {
    
    background-color: rgb(246,246,247);
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    
}





/***** UNIVERSO *****/
@property --nm-t { syntax: '<number>'; inherits: true; initial-value: 0; }

@property --nm-hx { syntax: '<length>'; inherits: true; initial-value: 0px; }

@property --nm-hy { syntax: '<length>'; inherits: true; initial-value: 0px; }

#community-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image:
    radial-gradient(0.6px 0.6px at 7px 5px, rgba(255,255,255,.9), transparent),
    radial-gradient(0.6px 0.6px at 19px 15px, rgba(200,215,255,.9), transparent),
    radial-gradient(0.6px 0.6px at 31px 9px, rgba(255,255,255,.9), transparent),
    radial-gradient(0.7px 0.7px at 43px 20px, rgba(170,195,255,.9), transparent),
    radial-gradient(0.6px 0.6px at 11px 17px, rgba(255,255,255,.9), transparent),
    radial-gradient(0.7px 0.7px at 26px 3px, rgba(255,240,225,.9), transparent),
    radial-gradient(0.8px 0.8px at 38px 12px, rgba(190,210,255,.9), transparent),
    radial-gradient(0.8px 0.8px at 15px 8px, rgba(255,255,255,.9), transparent),
    radial-gradient(ellipse 25% 160% at 22% 50%, rgba(60,50,130,.25), transparent 70%),
    radial-gradient(ellipse 25% 160% at 76% 40%, rgba(30,70,120,.25), transparent 70%);
  background-size:
    23px 23px, 29px 19px, 37px 26px, 47px 21px, 53px 28px,
    61px 17px, 71px 25px, 97px 27px, 100% 100%, 100% 100%;
  background-position:
    calc(var(--nm-hx) - 23px * var(--nm-t)) var(--nm-hy),
    calc(var(--nm-hx) - 29px * var(--nm-t)) var(--nm-hy),
    calc(var(--nm-hx) - 37px * var(--nm-t)) var(--nm-hy),
    calc(var(--nm-hx) - 47px * var(--nm-t)) var(--nm-hy),
    calc(var(--nm-hx) - 53px * var(--nm-t)) var(--nm-hy),
    calc(var(--nm-hx) - 61px * var(--nm-t)) var(--nm-hy),
    calc(var(--nm-hx) - 71px * var(--nm-t)) var(--nm-hy),
    calc(var(--nm-hx) - 97px * var(--nm-t)) var(--nm-hy),
    var(--nm-hx) var(--nm-hy),
    var(--nm-hx) var(--nm-hy);
  animation: nm-drift 120s linear infinite;
  transition:
    --nm-hx 1.8s cubic-bezier(.2,.7,.2,1),
    --nm-hy 1.8s cubic-bezier(.2,.7,.2,1);
}

@media (hover: hover) {
  #community-section:hover { --nm-hx: 36px; --nm-hy: 5px; }
}

#community-section::before,
#community-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

#community-section::before {
  inset: -8px -60px;
  translate: var(--nm-hx) var(--nm-hy);
  background-image:
    radial-gradient(0.8px 0.8px at 4% 20%, rgba(255,255,255,.6), transparent),
    radial-gradient(0.8px 0.8px at 9% 78%, rgba(200,215,255,.55), transparent),
    radial-gradient(0.9px 0.9px at 17% 50%, rgba(255,255,255,.6), transparent),
    radial-gradient(0.8px 0.8px at 22% 12%, rgba(255,240,225,.5), transparent),
    radial-gradient(0.8px 0.8px at 31% 85%, rgba(200,215,255,.55), transparent),
    radial-gradient(0.9px 0.9px at 34% 25%, rgba(255,255,255,.6), transparent),
    radial-gradient(0.8px 0.8px at 43% 40%, rgba(255,255,255,.5), transparent),
    radial-gradient(0.8px 0.8px at 46% 90%, rgba(200,215,255,.55), transparent),
    radial-gradient(0.9px 0.9px at 55% 15%, rgba(255,255,255,.6), transparent),
    radial-gradient(0.8px 0.8px at 58% 60%, rgba(255,240,225,.5), transparent),
    radial-gradient(0.8px 0.8px at 67% 42%, rgba(200,215,255,.55), transparent),
    radial-gradient(0.9px 0.9px at 76% 18%, rgba(255,255,255,.6), transparent),
    radial-gradient(0.8px 0.8px at 80% 80%, rgba(255,255,255,.55), transparent),
    radial-gradient(0.8px 0.8px at 84% 50%, rgba(200,215,255,.55), transparent),
    radial-gradient(0.9px 0.9px at 91% 10%, rgba(255,255,255,.6), transparent),
    radial-gradient(0.8px 0.8px at 96% 70%, rgba(255,240,225,.5), transparent),
    radial-gradient(1px 1px at 12% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 37% 72%, rgba(200,215,255,.7), transparent),
    radial-gradient(1px 1px at 63% 28%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 88% 62%, rgba(200,215,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 26% 45%, rgba(150,200,255,.95), transparent),
    radial-gradient(1.4px 1.4px at 71% 68%, rgba(255,215,170,.9), transparent),
    radial-gradient(1.6px 1.6px at 93% 35%, rgba(190,170,255,.9), transparent),
    radial-gradient(1.4px 1.4px at 5% 62%, rgba(255,255,255,.95), transparent);
  animation:
    nm-fly 50s linear infinite,
    nm-twinkle 4s ease-in-out infinite alternate;
}

#community-section::after {
  top: 2px;
  left: 0;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190,210,255,.8));
  opacity: 0;
  animation: nm-shoot 90s ease-in infinite;
}

@keyframes nm-drift {
  to { --nm-t: 1; }
}

@keyframes nm-twinkle {
  from { filter: brightness(.8); }
  to   { filter: brightness(2.2); }
}

@keyframes nm-fly {
  0%   { opacity: 0; scale: 1; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; scale: 3.2; }
}

@keyframes nm-shoot {
  0%     { opacity: 0; }
  17%    { opacity: 0; transform: translate(5vw,0) rotate(3deg); }
  17.5%  { opacity: 1; }
  20%    { opacity: 0; transform: translate(40vw,16px) rotate(3deg); }
  37%    { opacity: 0; transform: translate(90vw,2px) rotate(183deg); }
  37.5%  { opacity: 1; }
  40%    { opacity: 0; transform: translate(55vw,16px) rotate(183deg); }
  57%    { opacity: 0; transform: translate(20vw,-4px) rotate(35deg); }
  57.5%  { opacity: 1; }
  60%    { opacity: 0; transform: translate(30vw,20px) rotate(35deg); }
  77%    { opacity: 0; transform: translate(80vw,-4px) rotate(145deg); }
  77.5%  { opacity: 1; }
  80%    { opacity: 0; transform: translate(68vw,20px) rotate(145deg); }
  97%    { opacity: 0; transform: translate(20vw,18px) rotate(-8deg); }
  97.5%  { opacity: 1; }
  100%   { opacity: 0; transform: translate(65vw,0) rotate(-8deg); }
}

@media (prefers-reduced-motion: reduce) {
  #community-section,
  #community-section::before,
  #community-section::after {
    animation: none;
    transition: none;
  }
}