/*=================================================================*/
/*============================ LIBRARY ============================*/
/*=================================================================*/

/*==================== fonts ====================*/
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500&display=swap');

@font-face {
    font-family: 'Ford Antenna'; /* Thin Font */
    src: url('fonts/FordAntenna-Thin.eot');
    src: url('fonts/FordAntenna-Thin.eot?#iefix') format('embedded-opentype'),
         url('fonts/FordAntenna-Thin.woff2') format('woff2'),
         url('fonts/FordAntenna-Thin.woff') format('woff'),
         url('fonts/FordAntenna-Thin.ttf') format('truetype'),
         url('fonts/FordAntenna-Thin.svg#FordAntenna-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ford Antenna'; /* Extra Light Font */
    src: url('fonts/FordAntenna-ExtraLight.eot');
    src: url('fonts/FordAntenna-ExtraLight.eot?#iefix') format('embedded-opentype'),
         url('fonts/FordAntenna-ExtraLight.woff2') format('woff2'),
         url('fonts/FordAntenna-ExtraLight.woff') format('woff'),
         url('fonts/FordAntenna-ExtraLight.ttf') format('truetype'),
         url('fonts/FordAntenna-ExtraLight.svg#FordAntenna-ExtraLight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ford Antenna'; /* Regular Font */
    src: url('fonts/FordAntenna-Regular.eot');
    src: url('fonts/FordAntenna-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/FordAntenna-Regular.woff2') format('woff2'),
         url('fonts/FordAntenna-Regular.woff') format('woff'),
         url('fonts/FordAntenna-Regular.ttf') format('truetype'),
         url('fonts/FordAntenna-Regular.svg#FordAntenna-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ford Antenna'; /* Medium Font */
    src: url('fonts/FordAntenna-Medium.eot');
    src: url('fonts/FordAntenna-Medium.eot?#iefix') format('embedded-opentype'),
         url('fonts/FordAntenna-Medium.woff2') format('woff2'),
         url('fonts/FordAntenna-Medium.woff') format('woff'),
         url('fonts/FordAntenna-Medium.ttf') format('truetype'),
         url('fonts/FordAntenna-Medium.svg#FordAntenna-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ford Antenna';
    src: url('fonts/FordAntenna-Semibold.eot');
    src: url('fonts/FordAntenna-Semibold.eot?#iefix') format('embedded-opentype'),
         url('fonts/FordAntenna-Semibold.woff2') format('woff2'),
         url('fonts/FordAntenna-Semibold.woff') format('woff'),
         url('fonts/FordAntenna-Semibold.ttf') format('truetype'),
         url('fonts/FordAntenna-Semibold.svg#FordAntenna-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot?j6dwaq');
  src: url('fonts/icomoon.eot?j6dwaq#iefix') format('embedded-opentype'),
       url('fonts/icomoon.ttf?j6dwaq') format('truetype'),
       url('fonts/icomoon.woff?j6dwaq') format('woff'),
       url('fonts/icomoon.svg?j6dwaq#icomoon') format('svg');
  font-style: normal;
  font-display: swap;
  font-weight: normal;
}

[class^="icon-"], [class*=" icon-"] {
  speak: never;
  line-height: 1;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;

  /* Better Font Rendering ========= */
  -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.icon-instagram:before {content: "\e900"}
.icon-whatsapp:before  {content: "\e901"}
.icon-envelope:before  {content: "\e902"}
.icon-walk:before      {content: "\e903"}
.icon-car:before       {content: "\e904"}

/*==================== variables ====================*/
:root {
    --color-red: #BF2D2D;
    --color-soft: #E6E6E6;
    --color-gray: #706F6F;
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-light: #FCFCFC;
    --color-green: #36A2A6;
    --color-orange: #E38D24;

    --font-ford-antenna: 'Ford Antenna';
    --font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
}


/*==================== reset ====================*/
* {
    border: 0;
    margin: 0;
    padding: 0;
    resize: none;
    outline: none;
    font-style: normal;
    box-sizing: border-box;
    background: transparent;
}

html,
body {
    font-size: 10px;
    line-height: 10px;
    overflow-x: hidden;
    position: relative;
    background: var(--color-light);
    font-family: var(--font-ford-antenna);
}

img {
    width: auto;
    height: auto;
    display: block;
    max-width: 100%;
}

strong {
    font-weight: 700;
}

a, 
button {
    color: inherit;
    cursor: pointer;
    transition: 0.4s ease;
}

a,
a:focus,
a:active {
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

[ps] {
    cursor: pointer;
}


/*==================== shared ====================*/
.color-soft   {
    color: var(--color-soft);
}

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

.color-green  {
    color: var(--color-green);
}

.color-orange {
    color: var(--color-orange);
}

.bg-soft   {
    background: var(--color-soft);
}

.bg-green  {
    background: var(--color-green);
}

.bg-orange {
    background: var(--color-orange);
}

.for-reader {
    width: 0rem;
    height: 0rem;
    display: block;
    font-size: 0rem;
    overflow: hidden;
    line-height: 0rem;
}

.pos-relative {position: relative}
.pos-absolute {position: absolute}

[class^="container-"],
[class*=" container-"] {
    width: 100%;
    flex-basis: 100%;
    margin-left: auto;
    margin-right: auto;
}

.container-xs {max-width:  38.6rem}
.container-sm {max-width:  46.0rem}
.container-md {max-width:  49.0rem}
.container-lg {max-width: 122.0rem}
.container-xl {max-width: 192.0rem}

.v-padding {
    padding-top: 13.5rem;
    padding-bottom: 13.5rem;
}

.h-img-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.index-high {
    z-index: 3;
    position: relative;
}

.circle {
    top: 50%;
    left: 15%;
    width: 55.8rem;
    height: 55.8rem;

    position: absolute;
    pointer-events: none;
    transform: translateY(-50%);

    border-radius: 100%;
    border: 1.0rem solid #F2F2F2;
}

.circle.unique {
    top: -18%;
    left: calc(50% + 10.0rem);
    border: none;
    width: 47.0rem;
    transform: none;
    border-radius: 0rem;
}

.circle.unique svg {
    height: 100%;
    display: block;
    transform: translateX(-13.0rem);
}

.circle:after {
    content: '';
    display: block;
    position: absolute;

    top: 50%;
    right: 0rem;
    width: 9.0rem;
    height: 32.0rem;
    background: var(--color-soft);
    transform: translate3d(1.5rem, -50%, 0px);
}

.circle.light:after {
    background: var(--color-light);
}

.circle.orange:after {
    background: var(--color-orange);
}

.circle.reverse:after {
    left: 0rem;
    right: auto;
    transform: translate3d(-1.5rem, -50%, 0px);
}

.flow-hidden {
    overflow: hidden
}

.circle.unique:after {
    display: none
}

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}


/*** flexbox ***/
.flex {
    display: flex
}

.flex.wrap {
    flex-wrap: wrap
}

.flex.nowrap {
    flex-wrap: nowrap
}

.flex.wrap-reverse {
    flex-wrap: wrap-reverse
}

.flex.row {
    flex-direction: row
}

.flex.row-reverse {
    flex-direction: row-reverse
}

.flex.column {
    flex-direction: column
}

.flex.column-reverse {
    flex-direction: column-reverse
}

.flex.align-start {
    align-items: flex-start
}

.flex.align-end {
    align-items: flex-end
}

.flex.align-stretch {
    align-items: stretch
}

.flex.align-center {
    align-items: center
}

.flex.align-baseline {
    align-items: baseline
}

.flex.justify-start {
    justify-content: flex-start;
}

.flex.justify-end {
    justify-content: flex-end;
}

.flex.justify-center {
    justify-content: center;
}

.flex.justify-space-around {
    justify-content: space-around;
}

.flex.justify-space-between {
    justify-content: space-between;
}

.flex.justify-space-evenly {
    justify-content: space-evenly;
}

.flex > * {
    flex-grow: 0;
    flex-shrink: 0;
}

.flex > .child {
    max-width: 50%;
    flex-basis: 50%;
}

.flex > .child.max {
    max-width: 60%;
    flex-basis: 60%;
}

.flex > .child.min {
    max-width: 40%;
    flex-basis: 40%;
}

.child-xs {
    max-width: 10%;
    flex-basis: 10%;
}

/*** editor ***/
.txt-left {
    text-align: left;
}

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

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

.editor h2 {
    font-weight: 100;
    font-size: 6.0rem;
    line-height: 6.5rem;
    margin-bottom: 4.0rem;
    color: var(--color-gray);
}

.editor h2 strong {
    font-weight: 400;
}

.editor h3 {
    font-weight: 200;
    font-size: 2.6rem;
    line-height: 3.6rem;
    margin-bottom: 4.6rem;
    color: var(--color-green);
}

.editor p,
.editor li {
    font-weight: 200;
    font-size: 2.0rem;
    line-height: 2.4rem;
    margin-bottom: 2.6rem;
    color: var(--color-gray);
}

.editor special {
    display: block;
    font-size: 6.4rem;
    line-height: 7.6rem;
    text-transform: uppercase;
    color: var(--color-white);
    font-family: var(--font-bai-jamjuree);
}


/*** call to action ***/
.cta {
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.9rem;
    letter-spacing: 0.063em;
    text-transform: uppercase;
    color: var(--color-green);
    font-family: var(--font-ford-antenna);

    gap: 2.0rem;
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.cta .btn {
    padding-bottom: 4px;
    border-radius: 100%;
    transition: 0.4s ease;

    width: 7.6rem;
    height: 7.6rem;
    position: relative;

    flex-grow: 0;
    flex-shrink: 0;

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

.cta .btn:after {
    content: '';
    display: block;
    position: relative;
    transition: 0.4s ease;
    transform: rotate(45deg);

    width: 1.0rem;
    height: 1.0rem;
    
    border-right: 2px solid var(--color-green);
    border-bottom: 2px solid var(--color-green);
}

.cta .btn .box {
    top: 0rem;
    width: 3.8rem;
    height: 7.6rem;
    display: block;
    overflow: hidden;
    position: absolute;
}

.cta .btn .box.left {left: 0rem}
.cta .btn .box.right {right: 0rem}

.cta .btn .box:after {
    top: 1px;

    width: 7.0rem;
    height: 7.0rem;

    content: '';
    display: block;
    position: absolute;

    transition: animation 0.4s ease;

    border-radius: 100%;
    transform: rotate(-135deg);
    border: 2px solid transparent;
}

.cta .btn .box.left:after {
    left: 1px;

    border-left-color: var(--color-orange);
    border-bottom-color: var(--color-orange);

    border-top-color: var(--color-green);
    border-right-color: var(--color-green);
}

.cta .btn .box.right:after {
    right: 1px;

    border-left-color: var(--color-green);
    border-bottom-color: var(--color-green);

    border-top-color: var(--color-orange);
    border-right-color: var(--color-orange);
}


/*===================================================================*/
/*=========================== TRANSITIONS ===========================*/
/*===================================================================*/

.animate-fade-in,
.animate-slide-up,
.animate-slide-left,
.animate-slide-right {
    opacity: 0;
    transition: 0.5s ease;
    transform: translate3d(0, 10%, 0);
}

.animate-fade-in {
    transform: translate3d(0, 0, 0);
}

.animate-slide-left {
    transform: translate3d(-10%, 0, 0);
}

.animate-slide-right {
    transform: translate3d(10%, 0, 0);
}

.animate-fade-in.visible,
.animate-slide-up.visible,
.animate-slide-left.visible,
.animate-slide-right.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.animate-delay-1.visible {
    transition-delay: 0.1s;
}

.animate-delay-2.visible {
    transition-delay: 0.2s;
}

.animate-delay-3.visible {
    transition-delay: 0.3s;
}

.animate-delay-4.visible {
    transition-delay: 0.4s;
}

.animate-delay-5.visible {
    transition-delay: 0.5s;
}

.animate-delay-6.visible {
    transition-delay: 0.6s;
}

@keyframes draw-circle-left {
    0%, 50% {
        transform: rotate(-135deg);
    }

    100% {
        transform: rotate(45deg);
    }
}

@keyframes draw-circle-right {
    0% {
        transform: rotate(-135deg);
    }

    50%, 100% {
        transform: rotate(45deg);
    }
}

@media (min-width: 992px) {
    a:hover {
        color: inherit;
        text-decoration: none;
    }

    .cta:hover {
        color: var(--color-orange);
    }

    .cta:hover .btn:after {
        border-right-color: var(--color-orange);
        border-bottom-color: var(--color-orange);
    }

    .cta:hover .btn .box.left:after {
        animation: 0.4s draw-circle-left forwards linear;
    }

    .cta:hover .btn .box.right:after {
        animation: 0.4s draw-circle-right forwards linear;
    }
}


/*===================================================================*/
/*========================== FIRST CONTENT ==========================*/
/*===================================================================*/

/*==================== header ====================*/
.site-header {
    left: 0rem;
    right: 0rem;
    top: -12.4rem;
    height: 9.6rem;

    z-index: 250;
    position: fixed;
    transition: 0.6s ease;
}

.site-header.shrink {
    top: 0rem;
}

.site-header .brand {
    width: 26.6rem;
}

.site-header .brand img {
    width: 100%;
}

.site-header .navbar {
    padding: 0rem 5.0rem;
    transform: translateY(-2.8rem);
}

.site-header .navbar .menu ul {
    gap: 3.5rem;
}

.site-header .navbar .menu a {
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.9rem;
    letter-spacing: 0.142em;
    color: var(--color-white);
    text-transform: uppercase;
    font-family: var(--font-ford-antenna);

    display: block;
    position: relative;
}

.site-header .navbar .menu a:after {
    content: '';
    display: block;
    position: absolute;

    left: 0rem;
    right: 0rem;
    bottom: -0.6rem;

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    border-bottom: 2px solid var(--color-green);
}

.site-header .navbar .menu a.active:after {
    transform: scaleX(1);
}

.site-header .navbar .menu li:last-child a {
    padding: 1rem 2rem;
    background: var(--color-green);
}

.site-header .navbar .menu li:last-child a:after { display: none }

.shadow,
.site-header .toggle {
    display: none;
}



.wpp-cta {
    z-index: 240;
    right: 15px;
    bottom: 15px;
    width: 8rem;
    height: 8rem;
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    background: #67cc49;
    border-radius: 50%;
    transition: transform 0.3s ease-out;
    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
}

.wpp-cta svg {
    width: 4rem;
    height: 100%;
}

.wpp-cta svg path {
    fill: white;
}

@media (any-hover: hover) {
    .wpp-cta:hover {
        transform: scale(1.1);
    }
}

@media (min-width: 992px) {
    .site-header .navbar .menu a:hover:after {
        transform: scaleX(1);
    }
}

@media (min-width: 1920px) {
    .flex > .child .limit {
        height: 100%;
        max-width: 96.0rem;
    }
}

/*==================== section #inicio ====================*/
#inicio .content {
    height: 100vh;
    min-height: 98.0rem;
}

#inicio .content .brand {
    width: 32.7rem;
    margin-bottom: 11.0rem;
}

#inicio .content .brand img {
    width: 100%
}

#inicio .fachada img {
    width: 100%;
    min-height: 100vh;
    object-fit: cover;
    object-position: center;
}

/*==================================================================*/
/*=========================== RESPONSIVE ===========================*/
/*==================================================================*/
@media (max-width: 1399px) {
    .container-lg {
        padding-left: 3.0rem;
        padding-right: 3.0rem;
    }

    .site-header .navbar .toggle {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;

        z-index: 3;
        gap: 0.5rem;
        width: 4.0rem;
        height: 4.0rem;
        position: relative;
    }

    .site-header .navbar .toggle span {
        width: 3.6rem;
        display: block;
        border-radius: 2px;
        transition: 0.4s ease;
        border-bottom: 3px solid var(--color-light);
    }

    .site-header .navbar .toggle.active span:nth-child(1) {
        transform: rotate(45deg)  translate3d(0.5rem, 0, 0);
    }

    .site-header .navbar .toggle.active span:nth-child(2) {
        transform: rotate(-45deg) translate3d(0.5rem, 0, 0);
    }

    .site-header .navbar .toggle.active span:nth-child(3) {
        opacity: 0;
    }

    .site-header .navbar .menu {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-orange);

        top: 2.8rem;
        right: 0rem;
        bottom: 0rem;
        height: 100vh;
        width: 32.0rem;
        position: fixed;

        transform: translateX(32.0rem);
        transition: transform 0.4s ease;
    }

    .site-header .navbar .menu.active {
        transform: translateX(0rem);
    }

    .site-header .navbar .menu ul {
        gap: 6.5rem;
        flex-direction: column;
    }

    .shadow {
        top: 0rem;
        opacity: 0;
        left: 0rem;
        right: 0rem;
        z-index: 200;
        bottom: 0rem;
        display: block;
        position: fixed;

        pointer-events: none;
        transition: opacity 0.4s ease;
        background: var(--color-black);
    }

    .shadow.active {
        opacity: 0.3;
    }

    #inicio .content {
        padding: 0rem 3.0rem;
    }
}

@media (max-width: 1199px) {
    html,
    body {
        font-size: 8px;
        line-height: 8px;
        overflow-x: hidden;
    }

    .circle.unique {
        top: -14%;
        width: 51.0rem;
        left: calc(45% + 10.0rem);
    }

    .circle.unique svg {
        transform: translateX(-21.0rem);
    }

    .container-md,
    .container-xs {
        padding-left: 3.0rem;
        padding-right: 3.0rem;
    }

    .site-header .navbar {
        padding: 0rem 3.0rem;
    }
}

@media (max-width: 991px) {
    .editor h2 {
        font-size: 5.5rem;
        line-height: 6.0rem;
    }

    .flex > .child.max,
    .flex > .child.min {
        max-width: 100%;
        flex-basis: 100%;
    }

    .cta .btn {
        width: 6.8rem;
        height: 6.8rem;
    }

    .cta .btn .box {
        width: 3.4rem;
        height: 6.8rem;
    }

    .cta .btn .box:after {
        width: 6.1rem;
        height: 6.1rem;
    }

    .circle {
        width: 48.0rem;
        height: 48.0rem;
    }

    .circle:after {
        height: 25.0rem;
    }

    .site-header {
        height: 7.2rem;
    }

    .site-header .navbar {
        transform: translateY(-1.5rem);
    }

    .site-header .brand {
        width: 18.5rem;
    }

    #inicio .child {
        max-width: 50%;
        flex-basis: 50%;
    }
}

@media (max-width: 767px) {
    .h-img-full img {
        width: 100%;
        height: auto;
    }

    .flex > .child {
        max-width: 100% !important;
        flex-basis: 100% !important;
    }

    .container-md {
        max-width: 100%;
    }

    .v-padding {
        padding-top: 6.5rem;
        padding-bottom: 6.5rem;
    }

    .circle.unique {
        top: 50%;
        left: 35%;
        transform: translateY(-50%);
    }

    #inicio .content .brand {
        margin-bottom: 8.0rem;
    }

    .child-xs,
    #inicio .fachada {
        display: none;
    }

    #inicio .content {
        height: auto;
        min-height: 75.0rem;
    }
}

@media (max-width: 575px) {
    .editor h2 {
        font-size: 4.6rem;
        line-height: 5.6rem;
    }

    .editor p, .editor li {
        font-size: 1.9rem;
        line-height: 2.3rem;
    }

    .circle {
        display: none;
    }
}