@charset "UTF-8";

.fp-is-overflow .fp-overflow.fp-auto-height,
.fp-is-overflow .fp-overflow.fp-auto-height-responsive,
.fp-is-overflow > .fp-overflow {
overflow: hidden;
}
.fp-watermark {
display: none;
}
@media only screen and (max-width: 600px) {
.fp-table {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
}
}  .bouncing-loader {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 8px;
}
.bouncing-loader div {
width: 13px;
height: 13px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
-webkit-animation: bounce 0.6s infinite alternate;
animation: bounce 0.6s infinite alternate;
}
.bouncing-loader div:nth-child(2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
background: rgba(255, 255, 255, 0.7);
}
.bouncing-loader div:nth-child(3) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
background: rgba(255, 255, 255, 0.5);
}
@-webkit-keyframes bounce {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
}
@keyframes bounce {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
} #video-scroll-container {
position: relative;
height: 400dvh; -webkit-transition: opacity 0.8s ease;
transition: opacity 0.8s ease;
}
.sticky-wrapper {
position: fixed;
top: 0;
width: 100%;
height: 100dvh;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#hero-video,
#hero-canvas,
.hero-poster {
position: absolute;
inset: 0;
width: 100%;
height: 100dvh;
-o-object-fit: cover;
object-fit: cover;
}
.hero-poster {
z-index: 1;
opacity: 1;
pointer-events: none;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.hero-poster img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
height: 100%;
}
.hero-poster.hidden {
opacity: 0;
}
#hero-video,
#hero-canvas {
z-index: 2;
}
#hero-canvas {
display: none;
}
@media only screen and (max-width: 768px) {
#hero-video {
display: none;
}
}
#hero-canvas {
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
transition-behavior: allow-discrete;
}
#hero-canvas.visible {
opacity: 1;
display: block;
}
@starting-style {
#hero-canvas.visible {
opacity: 0;
}
} #seccion2 {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
pointer-events: none;
-webkit-transition: ease all 0.6s;
transition: ease all 0.6s;
z-index: 3;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
#seccion2.active {
pointer-events: auto;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.section-content {
place-items: center;
display: grid;
grid-template-columns: 40% 1fr;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
gap: 15px;
overflow: hidden;
width: 90vw;
margin-left: 10vw;
}
@media only screen and (min-width: 1200px) {
.section-content {
padding-inline: 70px;
}
}
@media only screen and (max-width: 990px) {
.section-content {
grid-template-columns: 1fr;
margin-left: 0;
width: 100vw;
}
}
@media only screen and (max-width: 600px) {
.section-content {
gap: 0;
}
}
.section-content .scroll-indicator-inner {
-ms-flex-item-align: center;
align-self: center;
will-change: opacity, transform, filter;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: fixed;
left: 5vw;
}
@media only screen and (max-width: 1200px) {
.section-content .scroll-indicator-inner {
display: none;
}
}
.section-content .col-text {
text-align: left;
-ms-flex-item-align: center;
align-self: center;
}
@media only screen and (max-width: 600px) {
.section-content .col-text {
-ms-flex-item-align: start;
align-self: flex-start;
padding-right: 40px;
}
}
.section-content .col-text h2 {
font-size: clamp(3.75rem, 1.25rem + 3.125vw, 5rem);
font-weight: 300;
margin-bottom: 40px;
letter-spacing: -3px;
line-height: 1;
opacity: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
will-change: opacity, transform, filter;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
@media only screen and (max-width: 990px) {
.section-content .col-text h2 {
font-size: 43px;
margin-bottom: 20px;
}
}
.section-content .col-text p {
font-size: clamp(1.313rem, 0.438rem + 1.094vw, 1.75rem);
font-weight: 300;
opacity: 0;
-webkit-transform: translateY(350px);
transform: translateY(350px);
will-change: opacity, transform, filter;
line-height: 1.3;
}
@media only screen and (max-width: 990px) {
.section-content .col-text p {
font-size: 18px;
margin-bottom: 0;
}
}
.section-content .col-image {
height: 100%;
overflow: hidden;
will-change: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.section-content .col-image img,
.section-content .col-image video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
display: block;
opacity: 0;
will-change: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.section {
background-size: cover;
background-position: center;
}
.visible {
opacity: 1 !important;
}
.hide {
opacity: 0 !important;
} body.home::-webkit-scrollbar {
display: none;
} body.home {
-ms-overflow-style: none; scrollbar-width: none; } html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
-ms-scroll-chaining: none;
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-scrolling iframe {
pointer-events: none;
} .scroll-indicator {
position: fixed;
left: 5vw;
z-index: 4;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: clamp(2.5rem, 0rem + 3.125vw, 3.75rem);
}
@media only screen and (max-width: 1200px) {
.scroll-indicator {
left: 40px;
width: 50px;
}
}
@media only screen and (max-width: 600px) {
.scroll-indicator {
left: 20px;
width: 40px;
}
}
.play-button {
position: absolute;
z-index: 3;
margin: 0 auto;
bottom: clamp(7.5rem, 1.25rem + 7.813vw, 13.75rem);
left: 0;
gap: 15px;
right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
}
@media only screen and (max-width: 1025px) {
.play-button {
gap: 10px;
bottom: 150px;
}
}
.play-button svg {
width: clamp(1.563rem, 1.292rem + 0.903vw, 2.375rem);
}
@media only screen and (max-width: 1025px) {
.play-button svg {
width: 28px;
}
} .video-dialog {
padding: 0;
border: none;
background: transparent;
max-width: 80vw;
max-height: 80vh;
width: 100%;
height: auto;
overflow: visible;
left: 0;
right: 0;
margin: auto; opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}
.video-dialog::-ms-backdrop {
background: rgba(0, 0, 0, 0.8);
opacity: 0;
-ms-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.video-dialog::backdrop {
background: rgba(0, 0, 0, 0.8);
opacity: 0;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.video-dialog.is-visible {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.video-dialog.is-visible::-ms-backdrop {
opacity: 1;
}
.video-dialog.is-visible::backdrop {
opacity: 1;
}
.video-dialog .close-dialog {
position: absolute;
top: -40px;
right: 0;
background: none;
border: none;
color: white;
cursor: pointer;
padding: 5px;
z-index: 10;
}
.video-dialog .video-wrapper {
width: 100%;
height: 100%;
aspect-ratio: 16/9;
background: black;
}
.video-dialog video {
width: 100%;
height: 100%;
display: block;
}
html:has(dialog[open]:modal) {
overflow: hidden;
scrollbar-gutter: stable;
}