:root {
    --Almost-dark: #726F7A;
    --Almost-light: #F2EFFF;
    --Dark: #1F1740;
    --Error: #CD2F2F;
    --Gray: #D9DBE1;
    --Info: #2F9ECD;
    --Light: #FFFDFC;
   --Primary: #172A46; /* #2b4b7c;  #0d213a*/
    --Secondary: #23E4CD;
    --Success: #32CD2F;
    --Warnig: #CACD2F;
    --mr-container: 25px;
    --ml-container: 26px;
    --Silver:#C0C5CC; 
}

/* Reserva la proporción intrínseca sin alterar las reglas de cada sección. */
:where(img[width][height]) {
    height: auto;
}

@font-face {
    font-family: GreatVibes;
    src: url('../fonts/GreatVibes-Regular.woff2?v=3') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Great Vibes';
    src: url('../fonts/GreatVibes-Regular.woff2?v=3') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: Lora;
    src: url('../fonts/Lora-VariableFont_wght.woff?v=1') format('woff');
    font-display: swap;
}

html {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    color: var(--Primary);
}
h1 {
    font-size: 48px !important;
    line-height: 54px !important;
}
h2 {
    font-size: 38px !important;
    line-height: 50px !important;
}
h3 {
    font-size: 25px !important;
    line-height: 42px !important;
}
h4 {
    font-size: 24px !important;
    line-height: 34px !important;
}
h5 {
    font-size: 20px !important;
    line-height: 28px !important;
}
h6 {
    font-size: 16px !important;
    line-height: 18px !important;
}

h1{
    font-family: GreatVibes !important;
    letter-spacing: 0.01em;
}

h2,
h3,
h4,
h5,
h6,
button
{
    font-family: Lora !important;
}
a{
    font-family: Lora !important;
    color: var(--Primary);
    text-decoration: underline;
}
span,
p,
li,
label,
input,
input::placeholder {
    font-family: Lora !important;
}
/* ----------------------------Textos--------------------------------- */
.text-large {
    font-size: 22px !important;
    line-height: 32px !important;
    font-weight: 500 !important;
}

.text-big{
    font-family: NotoSans-Regular;
    font-style: normal;
    font-size: 20px;
    line-height: 28px;
}

.text-medium {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 500 !important;
}

.text-small {
    font-size: 13px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
}
.text-small-bold {
    font-size: 14px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
}
.text-extra-small {
    font-size: 10px !important;
    line-height: 14px !important;
    font-weight: 500 !important;
}

.text-fl{
    position: absolute;
    width: max-content;
    z-index: 1;
}
/* --------------------------- Background-colors ----------------------------- */

.bgd-primary {
    background-color: var(--Primary) !important;
}





/* --------------------------- General ------------------------------ */
.txt-silver{
 color:var(--Silver);
}
.txt-primary{
    color: var(--Primary);
}

.txt-light{
    color: var(--Light);
}

#img-recepcion{
    max-width: 100%;
}

#top-container{
    width: 100%;
}

/*top*/
#main-text-container{
    z-index: 1;
    margin-top: 60%;
}

#background-fifth-section {
    background-color: var(--Almost-light) !important;
    overflow: hidden;
}

#liverpool-img{
    width: 140px;
}

.txt-citizen{
    font-family: NotoSans-Regular !important;
}

.scene-border{
    border: solid white 17px;
}

#mainImage,
#heroImage{
    max-width: 70%; 
    max-height: 70%; 
    object-fit: contain;
}

#main-text{
    font-size: 60px;
}

.envelop-border{
    /* border: solid #c4c4c4 2px; */

    border: 2px solid transparent;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
  border-image: linear-gradient( 135deg, #e0e0e0 0%, #fff 25%, #999 50%, #fff 75%, #b0b0b0 100% ) 1;
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.4), 0 10px 25px rgba(0, 0, 0, 0.15);
}

.other-border{
        border: 2px solid transparent;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-image: linear-gradient( 135deg, #e0e0e0 0%, #fff 25%, #999 50%, #fff 75%, #b0b0b0 100% ) 1;
    box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.4), 0 10px 25px rgba(0, 0, 0, 0.15);
}

.full-border{
    /* border: solid #c4c4c4 2px; */

    border: 2px solid transparent;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
  border-image: linear-gradient( 135deg, #e0e0e0 0%, #fff 25%, #999 50%, #fff 75%, #b0b0b0 100% ) 1;
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.4), 0 10px 25px rgba(0, 0, 0, 0.15);
}


#carousel{
    width: 100%;
}

html::-webkit-scrollbar {
    display: none;
}




.container {
    max-width: 720px;
}
/* --------------------------- Mediaquery ----------------------------- */
/*mobile*/
@media (max-width: 1024px) {
    h1 {
        font-size: 40px !important;
        line-height: 51px !important;
    }
    h2 {
        font-size: 33px !important;
        line-height: 41px !important;
    }
    h3 {
        font-size: 20px !important;
        line-height: 32px !important;
    }
    h4 {
        font-size: 23px !important;
        line-height: 26px !important;
    }
    h5 {
        font-size: 16px !important;
        line-height: 19px !important;
    }
    h6 {
        font-size: 16px !important;
        line-height: 18px !important;
    }
    .container {
        padding-right: var(--mr-container)!important;
        padding-left: var(--ml-container)!important;
    }
}
/* tablet */
@media (max-width: 768px){
    .other-border{
        border: none;
    }
}

@media (max-width: 992px){
    .full-border{
    /* border: solid #c4c4c4 2px; */

    border: 0px solid transparent;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 0;
    border-image: linear-gradient( 135deg, #e0e0e0 0%, #fff 25%, #999 50%, #fff 75%, #b0b0b0 100% ) 1;
    box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.4), 0 10px 25px rgba(0, 0, 0, 0.15);
    }
}


/*desktop*/
@media (min-width: 992px){
    .container {
        max-width: 1224px;
    }

    #mainImage,
    #heroImage{
        max-width: 40%; 
        max-height: 40%; 
        object-fit: contain;
    }

    #carousel{
        width: 35%;
    }
}

/* Hide scrollbar for IE, Edge and Firefox */

#conten-scroll::-webkit-scrollbar{
    width: 10px;
    background-color: transparent;
}
#conten-scroll::-webkit-scrollbar-track{
    border-radius: 10px;
    background-color: rgba(35, 228, 205, 0.4);
}
#conten-scroll::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: var(--Secondary);
}
::-webkit-scrollbar {
    width: 0;
    /* Remove scrollbar space */
    background: transparent;
    /* Optional: just make scrollbar invisible */
}






.btn-filled-primary {
    color: var(--Light);
    background-color: var(--Primary);
    border-radius: 4px;
}



.btn-filled-secondary {
    color: var(--Primary);
    background-color: var(--Light);
    border-radius: 4px;
}

.btn-ghost-primary {
    background-color: transparent;
    background-image: none;
    border: var(--Primary) solid 1px !important;
    color: var(--Primary);
    border-radius: 4px;
}

.btn-ghost-secondary {
    background-color: var(--Light);
    background-image: none;
    border: var(--Light) solid 1px !important;
    color: var(--Primary);
    border-radius: 4px;
}

.btn-button-menu-mobile {
    padding: .25rem 1rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.btn-large {
    font-size: 24px !important;
    line-height: 24px !important;
    padding: 16px 24px !important;
    border-radius: 8px !important;
    width: min-content;
    font-family: NotoSans-Bold !important;
}

.btn-medium {
    font-size: 16px !important;
    line-height: 20px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    width: min-content;
}

.btn-small {
    font-size: 12px !important;
    line-height: 15px !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    width: min-content;
}

.btn-hover:hover {
    opacity: 0.2;
}
.btn-off {
    opacity: 0.2;
}

.btn-off:disabled,
.btn-off[disabled]{
    opacity: 0.2;
}






.font-family-sentient-bold {
    font-family: Sentient-Bold !important;
}



.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}



.text-Gray {
    color: var(--Gray)
}

.text-Primary {
    color: var(--Primary) !important;
}




/* Estado inicial oculto */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  will-change: opacity, transform;
}

/* Estado visible al hacer scroll */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0.01ms !important;
    will-change: auto !important;
  }
}



/*bottom*/
/* Contenedor divisor decorativo */
.section-divider-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 10px;
}

/* Control de tamaño y color con CSS */
.divider-svg {
  width: 180px; /* Tamaño ajustable */
  max-width: 80%;
  /* Color plateado/dorado claro que contrasta sobre el fondo #172A46 */
  color: rgba(255, 255, 255, 0.65); 
  transition: color 0.3s ease;
}

.divider-svg:hover {
  color: #d4af37; /* Cambia a dorado tenue al pasar el cursor si lo deseas */
}
/*fin bottom*/





/*mobile*/
@media (max-width: 540px) {
    .text-small {
        font-size: 10px !important;
        line-height: 14px !important;
    }
}


/*desktop*/




@media (min-width: 768px) {
    

    #img-recepcion{
        max-width: 863px;
    }

    /* #top-container{
        width: 60%;
    } */

    #mainImage,
    #heroImage{
        width: 60%;
    }

    #main-text-container{
        margin-top: 38%;
    }

    .full-border{

     border: none;
    }
    
}