@charset "URF-8";
@keyframes fadeout {
  from {opacity: 1;}
  to {opacity: 0;}
}

:root {
  --dark-shadow-gray: #4d585a;
  --light-shadow-gray: #a2a7a8;
  --bland-wall: #bbb2a4;
  --old-white: #f5f1ee;
  --paper-white: #f6f6f6;

  --def-gap: 0.6rem;
  --doc-padding: 10vw;
  --doc-width: 80vw;
  --input-padding: 1em 1.2em;
  --section-padding: 5em;
}
* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
html, body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

a {
  color: inherit;
  text-decoration: none;
  border: 0px;
  outline: 0px;
  cursor: pointer;
  transition: opacity 0.2s;
}
a:hover {
  opacity: 0.7;
}
body {
  font-family: montserrat, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--dark-shadow-gray);
  text-align: center;
}
  body > section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: var(--section-padding) 0;
  }
button {
  background: none;
  border: 0px;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
}
fieldset {
  border: 0px;
  margin: 0px;
  padding: 0px;
}
footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: calc(var(--section-padding) / 2) var(--doc-padding);
}
  footer aside {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: var(--def-gap);
    justify-items: flex-start;
    align-items: flex-start;
    width: auto;
  }
    footer aside span {
      margin: 0 1em 1em 0;
    }
    footer .logo {
      height: 60px;
      margin-bottom: 3em;
    }
    footer .social-links img {
      height: 1.3em;
    }
h2, h3, h4 {
  color: inherit;
  font-family: source-serif-pro, serif;
  font-weight: 600;
  font-style: normal;
  line-height: 1em;
}
h2 {
  font-size: 2.5em;
}
:where(h3, h4):first-child {
  margin-top: 0px;
}
h3 {
  font-size: 1.8em;
}
h4 {
  margin: 0.2em 0;
  font-size: 1.4em;
}
header {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0px;
  left: 0px;
  width: 100%;
  padding: 1em var(--doc-padding);
  background-color: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 1000;
}
header.display {
  opacity: 1;
  pointer-events: auto;
}
  header .logo {
    height: 3em;
  }
img {
  max-width: 100%;
}
input, textarea {
  width: 100%;
  border: 0px;
  padding: var(--input-padding);
  background-color: white;
  resize: none;
  font-family: inherit;
  font-size: 1em;
  color: inherit;
  outline: 0px;
}
span {
  text-align: left;
}
span > * {
  display: block;
}

.bold {
  font-weight: 700;
}
.bland-wall {
  color: var(--bland-wall);
}
.color-btn {
  padding: var(--input-padding);
  background-color: var(--bland-wall);
  color: white;
}
.content {
  font-size: 1.3em;
}
.doc-width {
  width: var(--doc-width);
}
.feature {
  padding: 5rem;
  color: var(--light-shadow-gray);
  background-position: center;
  background-size: 100%;
  transition: background-size 2s ease-out;
}
.feature:nth-child(2) {
  border-right: solid 2px var(--old-white);
  border-left: solid 2px var(--old-white);
}
.feature:hover {
  background-size: 120%;
}
  .feature img {
    --ratio: 7em;
    height: var(--ratio);
    width: var(--ratio);
    object-fit: contain;
    padding-bottom: 1em;
  }
.full-width {
  width: 100%;
}
.ga-link {
  position: relative;
  display: block;
  width: 100%;
  height: 0px;
  padding-top: 100%;
  overflow: hidden;
}
.ga-link:hover {
  opacity: 1;
}
  .ga-link > img {
    --size: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size);
    height: var(--size);
    object-fit: cover;
    transform: translate(-50%, -50%);
    transition: height 0.3s ease, width 0.3s ease;
  }
  .ga-link:hover > img {
    --size: 110%;
  }  
.grid-2-cols, .grid-3-cols, .grid-4-cols, .grid-5-cols {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-gap: var(--def-gap);
}
.grid-2-cols { --cols: 2; }
.grid-3-cols { --cols: 3; }
.grid-4-cols { --cols: 4; }
.grid-5-cols { --cols: 5; }
.no-margin-top {
  margin-top: 0px;
}
.nowrap,
.nowrap > * {
  white-space: nowrap;
  hyphens: none;
}
.partner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
  .partner img {
    height: 95px;
    width: 180px;
    object-fit: contain;
    margin-top: 2em;
    margin-bottom: 1.2em;
    mix-blend-mode: multiply;
    filter: grayscale();
  }

  .partner .small {
    max-width: 25em;
  }
.protected-email span {
  margin: 0px !important;
}
.small {
  font-size: 0.8em;
}
.social-links {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  grid-gap: var(--def-gap);
  width: auto;
}
.testimonial {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-rows: 350px auto; */
}
  .testimonial img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    display: none;
  }
.quote {
  padding: 1.5em;
  background-color: white;
}
  .quote > h3 {
    color: var(--bland-wall);
    margin-bottom: 0px;
  }
  .quote > img {
    height: 1.2em;
  }
  .quote > p {
    font-family: source-serif-pro, serif;
    font-size: 1.3em;
    padding-bottom: 0px;
  }

#about {
  background-color: var(--dark-shadow-gray);
  color: white;
}
#contact {
  grid-gap: 0px;
  align-items: stretch;
  padding: 0px;
}
  #contact > * {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--section-padding) var(--doc-padding);
  }
#contact-form {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  grid-gap: var(--def-gap);
  justify-items: flex-start;
  background-color: var(--old-white);
}
#corporative {
  background-color: var(--dark-shadow-gray);
  color: white;
}
  #corporative items {
    --cols: 2;
    padding-bottom: 4em;
    padding-top: 2em;
    cursor: w-resize;
  }
  #corporative item {
    height: 0px;
    width: 100%;
    padding-bottom: 70%;
  }
    #corporative item img {
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;
      width: 100%;
      object-fit: cover;
      pointer-events: none;
      outline: none;
      user-select: none;
    }
  #corporative carousel:hover :where(button[type="prev"], button[type="next"]) {
    animation: none;
    opacity: 1;
  }  
#corporative-logos {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
  #corporative-logos img {
    filter: grayscale(1) contrast(1.2) invert();
    mix-blend-mode: lighten;
    max-height: 3.2em;
    max-width: 7em;
    object-fit: contain;
    object-position: center;
    margin: 1em;
  }
#features {
  color: white;
}
#gallery {
  padding: 0px;
}
  #gallery > article {
    margin-top: -15vh;
    margin-bottom: var(--section-padding);
  }
#gallery-close {
  top: 0px;
  right: 0px;
}
#gallery-next, #gallery-prev {
  top: 50vh;
  transform: translateY(-50%);
}
  #gallery-next {
    right: 0px;
  }
  #gallery-prev {
    left: 0px;
  }
#gallery-popup {
  --shadow-cast: max(10vw, 10vh);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
  background-color: #000A;
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
#gallery-popup * { pointer-events: none; }
#gallery-popup.display {
  opacity: 1;
  pointer-events: all;
}
#gallery-popup.display * { pointer-events: all; }
  #gallery-popup slideshow {
    height: 80vh;
    width: 80vw;
    border-radius: 0.6em;
  }
  #gallery-popup slide {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  #gallery-popup button {
    position: absolute;
    margin: 1em;
  }
  #gallery-popup svg {
    --size: 3.2em;
    opacity: 0.9;
    stroke: var(--old-white);
    stroke-width: 1.6;
  }
#hamburguer {
  padding: 0px;
}
  #hamburguer svg {
    height: 2.1em;
    width: 2.1em;
    stroke: currentColor;
    stroke-width: 8;
  }
  #hamburguer line {
    transition: transform 0.3s 0.1s, opacity 0.3s;
  }
  #hamburguer line:nth-child(1) {
    transform-origin: 50% 10%;
  }
  #hamburguer line:nth-child(2) {
    transform-origin: 0% 50%;
  }
  #hamburguer line:nth-child(3) {
    transform-origin: 50% 90%;
  }
  #hamburguer.times line:nth-child(1) {
    transform: translateY(40%) rotate(-45deg);
  }
  #hamburguer.times line:nth-child(2) {
    transform: scaleX(0);
    opacity: 0;
  }
  #hamburguer.times line:nth-child(3) {
    transform: translateY(-40%) rotate(45deg);
  }
#hero-overlay {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  height: 100%;
  width: var(--doc-width);
  max-width: 100%;
  z-index: 5;
}
#index {
  height: 100vh;
  background-color: black;
  color: white;
}
  #index slideshow {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
  }
  #index .logo {
    width: 640px;
    max-width: 100%;
    margin-bottom: 3em;
    filter: brightness(10) drop-shadow(0px 0px 20px #000);
  }
  #index .social-links {
    grid-gap: 1em;
  }
    #index .social-links img {
      height: 1.8em;
      filter: brightness(10) drop-shadow(0px 0px 20px #000);
    }
#index-menu, #main-menu {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 2em;
}
#mobile-menu {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 1.25em;
}
  #mobile-menu a {
    margin-bottom: 1rem;
  }
#partners {
  background-color: var(--old-white);
}
#quotes-carousel items {
  --cols: 3;
  --gap: var(--def-gap);
  filter: drop-shadow(0px 0px 10px #0000001A)
}
#sidebar {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  top: 0px;
  right: 0px;
  height: 100vh;
  width: auto;
  background-color: var(--light-shadow-gray);
  color: white;
  padding: 150px var(--doc-padding) var(--section-padding) var(--section-padding);
  transform: translateX(100%);
  transition: transform 0.3s ease, box-shadow 0.3s linear;
  box-shadow: 0px 0px 0px 100vw #0000;
  pointer-events: none;
  z-index: 999;
}
#sidebar.display {
  transform: translateX(0%);
  box-shadow: 0px 0px 0px 100vw #000A;
  pointer-events: auto;
}
  #sidebar .social-links {
    grid-gap: 1em;
  }
    #sidebar .social-links img {
      height: 1.8em;
      filter: brightness(10);
    }
#testimonials {
  background:
    url('../src/quoteopen.png') 8% -6% no-repeat,
    url('../src/quoteclose.png') 92% 106% no-repeat,
    var(--old-white);
}
#video-holder {
  position: relative;
  display: block;
  width: 100%;
  height: 65vh;
}
  #video-holder::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 15vh;
    width: 100%;
    background-image: linear-gradient(to bottom, transparent, white);
  }
  #video-holder video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
#whatsapp-bubble {
  position: fixed;
  display: block;
  right: calc(var(--section-padding) / 2);
  bottom: calc(var(--section-padding) / 2);
  filter: grayscale(1) drop-shadow(0 0 1em #0006);
  opacity: 0.5;
  z-index: 2;
  transition: opacity 0.2s;
}
#whatsapp-bubble:hover {
  opacity: 0.9;
}
#whatsapp-bubble img {
  height: 80px;
}

/* OG Styles */
slide {
  background-position: center;
  background-size: cover;
}
.__og-dialog {
  background-color: white;
  color: var(--dark-shadow-gray);
}
.__og-dialog-btns button {
  padding: var(--input-padding);
  background-color: var(--bland-wall);
  color: white;
  margin-top: 1em;
}

/* Estilos adicionales para el video en móviles */
#gallery-video {
  /* Asegurar que el video cubra todo el contenedor */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  
  /* Eliminar controles nativos */
  outline: none;
  border: none;
}

/* Fallback para navegadores que no soportan object-fit */
@supports not (object-fit: cover) {
  #gallery-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
  }
}