@font-face { font-family: "Arimo"; src: url("texto-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Arimo"; src: url("texto-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --text: #111;
  --background: #fff;
  --secondary: #aaa;
  --button: hsla(0, 0%, 94%, .8);
  --border: #eee;
  --background-media: hsla(0, 0%, 100%, .8);
  --placeholder: #f5f5f5;
  --azul: #00f;
  
  --p2io: cubic-bezier(.65, 0, .35, 1);
  --p4io: cubic-bezier(.83, 0, .17, 1);
  --p2o: cubic-bezier(.33, 1, .68, 1);
  --p4o: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 10px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #fff; }
body {
  margin: 0; background: #fff; color: var(--text);
  font-family: "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10px;
  position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none;
}
h1, h2, h3, h4, h5, h6 { font-size: 12px; font-weight: 400; margin: 0; text-transform: uppercase; line-height: 1.25; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; }
ul li { list-style: none; }
button { border: none; background: none; color: inherit; font: inherit; margin: 0; padding: 0; cursor: pointer; text-align: inherit; }
img, video { display: block; max-width: 100%; user-select: none; -webkit-user-select: none; }
::-webkit-scrollbar { display: none; }
html, .main { scrollbar-width: none; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }


.preloader {
  position: fixed; inset: 0; z-index: 9999; background: var(--background);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  will-change: transform;
}
.preloader-percentage { color: var(--text); font-size: 18px; font-weight: 700; letter-spacing: 0; font-variant-numeric: normal; }
.preloader-percentage span { font-weight: 400; }
@media (max-width: 768px) { .preloader-percentage { font-size: 12px; } }
.preloader.listo { display: none; }


.layout { position: fixed; inset: 0; width: 100%; height: 100%; }
.vistas { position: absolute; inset: 0; }
.vista { position: absolute; inset: 0; background: var(--background); }
.vista[hidden] { display: none; }
.main {
  position: absolute; inset: 0; width: 100%; height: 100%; background-color: inherit;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: none;
}
.main.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.layout.en-transicion .main { overflow: hidden; }
.header.ocupado .header-inner { pointer-events: none; }
.overlay { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 1; }


.header { position: absolute; top: 0; left: 0; display: flex; padding: 2rem; pointer-events: none; z-index: 5; transition: opacity .4s; }
.header-inner {
  display: flex; align-items: center; gap: 1rem; padding: 1rem; pointer-events: auto;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  background-color: var(--background-media); border: 1px solid var(--border);
}
.logo { display: flex; flex-shrink: 0; margin: 0 1rem; overflow: visible; width: auto; color: var(--text); }
.logo h1 { font-size: 18px; line-height: 1.278; }
.logo span { font-weight: 700; }
.menu { display: flex; gap: 1rem; z-index: 4; }
.menu-item {
  position: relative; display: flex; justify-content: center; overflow: hidden; cursor: pointer;
  background-color: var(--button); border-radius: .2rem; padding: .5rem 1rem;
  transition: color .4s ease, background-color .4s ease;
}
.menu-item.active, .menu-item:hover { background-color: var(--text); color: var(--background); }
.menu-text { font-size: 12px; text-transform: uppercase; white-space: nowrap; }
.link { position: relative; display: inline-flex; align-items: center; gap: .25rem; transition: color .4s ease; }
.link:hover { color: var(--azul); }


.page { position: relative; display: flex; flex-direction: column; gap: 2rem; min-height: 100vh; min-height: 100svh; padding: 4rem; background-color: var(--background); }
.page-home { align-items: center; justify-content: center; }
.page-index, .page-about { padding-top: 12rem; }
.bottom { position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%); width: 100%; display: flex; align-items: center; justify-content: center; }
.sello { width: auto; height: 16px; }
.eyebrow { color: var(--secondary); font-size: 12px; line-height: 1.25; letter-spacing: 0; text-transform: uppercase; }


.index-content { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2rem; }
.index-grid { display: grid; grid-template-columns: repeat(8, 6.66667%); grid-column-gap: 6.66667%; grid-row-gap: 10rem; width: 100%; }
.index-item { position: relative; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; }
.index-no { width: 100%; }
.index-media-wrapper { display: block; width: 100%; height: fit-content; cursor: zoom-in; }
.index-media { position: relative; display: block; width: 100%; aspect-ratio: var(--ratio, initial); border-radius: .2rem; overflow: hidden; }
.placeholder { position: absolute; inset: 0; display: block; background-color: var(--placeholder); transition: opacity 1.44s var(--p2io) .24s; }
.index-media img, .index-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  backface-visibility: hidden; transform: translateZ(0); will-change: opacity;
  opacity: 0; transition: opacity 1.2s var(--p2o);
}
.index-media.listo img { opacity: 1; }
.index-media.listo .placeholder { opacity: 0; }
.index-media video { transition: opacity .6s ease; }
.index-media video.suena { opacity: 1; }


.media-background {
  position: fixed; inset: 0; z-index: 9; background-color: var(--background-media);
  opacity: 0; visibility: hidden;
}
.media-background.active { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); visibility: visible; }
.media-close-wrapper {
  position: fixed; right: 2rem; top: 2rem; align-items: center; gap: 1rem; padding: 1rem;
  background-color: var(--background-media); border: 1px solid var(--border);
}
.media-close { display: block; background-color: var(--button); border-radius: .2rem; font-size: 12px; padding: .5rem 1rem; text-transform: uppercase; transition: .4s ease; }
.media-close:hover { background-color: var(--text); color: var(--background); }
.media-fullscreen { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.media-fullscreen .index-media.is-full {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: auto; cursor: zoom-out;
  height: min(80vh, 900px, calc(900px / var(--ratio)), calc((100vw - 4rem) / var(--ratio))); width: auto; aspect-ratio: var(--ratio);
  background: var(--placeholder) center / cover no-repeat;
}
.media-fullscreen .index-media.is-full img, .media-fullscreen .index-media.is-full video { opacity: 1; transition: opacity .4s ease; }
.media-fullscreen .index-media.is-full img.espera { opacity: 0; }


.about-content { position: relative; display: grid; grid-row-gap: 10rem; height: fit-content; width: 100%; }
.about-section { display: flex; flex-direction: column; gap: 1rem; max-width: 560px; width: 100%; position: relative; }
.text { font-size: 18px; font-weight: 700; line-height: 120%; transition: color .2s; text-wrap: pretty; }


.aviso {
  position: fixed; right: 2rem; bottom: 2rem; z-index: 6; margin: 0;
  padding: .7rem 1rem; font-size: 11px; line-height: 1.2; color: var(--text); text-transform: none;
  background-color: var(--background-media); border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.aviso a { text-decoration: underline; text-underline-offset: 2px; transition: color .4s ease; }
.aviso a:hover { color: var(--azul); }


@media screen and (max-width: 1535px) {
  .index-grid { grid-template-columns: repeat(6, 9.09091%); grid-column-gap: 9.09091%; }
}
@media screen and (max-width: 1023px) {
  .index-grid { grid-template-columns: repeat(4, 14.28571%); grid-column-gap: 14.28571%; }
}
@media screen and (max-width: 767px) {
  h1, h2, h3, h4, h5, h6 { font-size: 10px; }
  .header-inner, .menu, .menu-item { width: 100%; }
  .index-grid { grid-template-columns: repeat(2, 33.33333%); grid-column-gap: 33.33333%; }
  .page { padding: 2rem; }
  .page-index, .page-about { padding-top: 8rem; }
  .header { font-size: 12px; padding: 1rem; width: 100%; }
  .menu-text { font-size: 10px; }
  .eyebrow { font-size: 10px; line-height: 12px; }
  .text { font-size: 15px; }
  .links { display: none; }
  .logo h1 { font-size: 15px; }
  .media-close-wrapper { right: 1rem; top: 1rem; }
  .media-close { font-size: 10px; }
  .aviso { right: 1rem; bottom: 1rem; font-size: 10px; padding: .6rem .8rem; }
}
@media screen and (max-width: 479px) {
  .index-grid { grid-template-columns: repeat(2, 1fr); }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-delay: 0s !important; transition-duration: .01ms !important; }
  .index-media img, .index-media video { opacity: 1; }
  .placeholder { opacity: 0; }
}