:root {
--hurii-carbon: #121212;
--hurii-profundo: #1c1c1c;
--hurii-naranja: #f28c28;
--hurii-intenso: #ff7a1a;
--hurii-nieve: #f7f7f5;
--hurii-gris-claro: #e9e9e6;
--hurii-gris: #6b6b6b;
--blanco: #ffffff;
--gris-200: #d9d9d4;
--gris-400: #9c9c97;
--naranja-tinta: #a64b07;
--naranja-50: #fdeedd;
--color-primary: var(--hurii-naranja);
--color-on-primary: var(--hurii-carbon);
--color-accent: var(--hurii-intenso);
--color-background: var(--hurii-nieve);
--color-surface: var(--blanco);
--color-surface-dark: var(--hurii-carbon);
--color-surface-dark-2: var(--hurii-profundo);
--color-text: var(--hurii-carbon);
--color-text-2: #3f3f3c;
--color-text-muted: var(--hurii-gris);
--color-on-dark: var(--hurii-nieve);
--color-on-dark-muted: #c5c5c3;
--color-on-dark-faint: #a0a09f;
--color-line-dark: rgba(247, 247, 245, 0.14);
--color-border: var(--gris-200);
--color-border-strong: var(--gris-400);
--color-fill: var(--hurii-gris-claro);
--color-focus: var(--hurii-carbon);
--color-focus-on-dark: var(--hurii-naranja);
--estado-exito: #1a6e45;
--estado-exito-fondo: #e2f1e8;
--estado-advertencia: #8a5a00;
--estado-advertencia-fondo: #fbefd2;
--estado-error: #b42318;
--estado-error-fondo: #fce4e1;
--estado-pendiente: #375a86;
--estado-pendiente-fondo: #e5ecf5;
--estado-deshabilitado: #6b6b6b;
--estado-deshabilitado-fondo: #efefec;
--f-sans: "Archivo", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
--w-display: 112%;
--w-title: 108%;
--w-text: 100%;
--fs-display: clamp(2.25rem, 1.15rem + 4.1vw, 4.5rem);
--fs-title: clamp(1.875rem, 1.3rem + 2.3vw, 3.125rem);
--fs-subtitle: clamp(1.375rem, 1.15rem + 0.95vw, 1.875rem);
--fs-lede: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
--fs-body: clamp(1.0625rem, 1.03rem + 0.15vw, 1.1875rem);
--fs-ui: 1.0625rem;
--fs-small: 0.9375rem;
--r-stage: 24px;
--r-block: 16px;
--r-control: 12px;
--r-pill: 999px;
--gutter: clamp(1rem, 4vw, 2.5rem);
--maxw: 75rem;
--measure: 36rem;
--header-h: 4rem;
--section-y: clamp(4.5rem, 10vw, 8.5rem);
--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
--t-fast: 180ms;
--t-mid: 320ms;
--t-slow: 560ms;
--dw: min(72vw, 18.5rem);
--portrait-w: 27.875rem;
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 100 900;
font-stretch: 62% 125%;
font-display: swap;
src: url("/fonts/Archivo-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 100 900;
font-stretch: 62% 125%;
font-display: swap;
src: url("/fonts/Archivo-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 0.5rem);
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body {
margin: 0;
min-height: 100vh;
overflow-x: clip;
background: var(--color-background);
color: var(--color-text);
font-family: var(--f-sans);
font-size: 1rem;
font-stretch: var(--w-text);
line-height: 1.5;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
@supports not (overflow-x: clip) {
body {
overflow-x: hidden;
}
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
margin: 0;
}
ul,
ol {
padding: 0;
}
img,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: inherit;
text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
}
button {
font: inherit;
color: inherit;
cursor: pointer;
}
:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 3px;
border-radius: 4px;
}
main:focus {
outline: none;
}
.dark :focus-visible,
.on-dark :focus-visible,
.site-header :focus-visible {
outline-color: var(--color-focus-on-dark);
}
::selection {
background: var(--hurii-naranja);
color: var(--hurii-carbon);
}
.display {
font-size: var(--fs-display);
font-weight: 800;
font-stretch: var(--w-display);
line-height: 0.98;
letter-spacing: -0.022em;
text-wrap: balance;
}
.title {
font-size: var(--fs-title);
font-weight: 780;
font-stretch: var(--w-title);
line-height: 1.02;
letter-spacing: -0.018em;
text-wrap: balance;
}
.subtitle {
font-size: var(--fs-subtitle);
font-weight: 740;
font-stretch: 104%;
line-height: 1.1;
letter-spacing: -0.01em;
text-wrap: balance;
}
.lede {
font-size: var(--fs-lede);
font-weight: 420;
line-height: 1.45;
text-wrap: pretty;
}
.prose {
font-size: var(--fs-body);
line-height: 1.6;
color: var(--color-text-2);
text-wrap: pretty;
}
.eyebrow {
font-size: var(--fs-small);
font-weight: 600;
line-height: 1.35;
color: var(--color-text-2);
}
.concept {
font-size: var(--fs-small);
font-weight: 500;
line-height: 1.45;
}
@media (max-width: 26em) {
.display,
.title {
font-stretch: 102%;
}
}
.wrap {
width: 100%;
max-width: calc(var(--maxw) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
z-index: 100;
left: var(--gutter);
top: 0.5rem;
padding: 0.75rem 1rem;
border-radius: var(--r-control);
background: var(--color-primary);
color: var(--color-on-primary);
font-weight: 650;
text-decoration: none;
transform: translateY(-160%);
transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus {
transform: none;
}
.dark {
position: relative;
background: var(--color-surface-dark);
color: var(--color-on-dark);
}
.site-header {
position: sticky;
top: 0;
z-index: 40;
background: var(--color-surface-dark);
color: var(--color-on-dark);
border-bottom: 1px solid transparent;
transition: border-color var(--t-fast) linear;
}
html:not(.js) .site-header {
position: relative;
}
.site-header.is-scrolled {
border-bottom-color: var(--color-line-dark);
}
.header__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 0.75rem;
min-height: var(--header-h);
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.875rem;
min-height: 44px;
margin-right: auto;
color: inherit;
text-decoration: none;
}
.brand__logo {
width: auto;
height: 1.75rem;
}
.brand__sub {
display: none;
padding-left: 0.875rem;
border-left: 1px solid var(--color-line-dark);
color: var(--color-on-dark-muted);
font-size: var(--fs-small);
font-weight: 560;
line-height: 1.2;
}
@media (min-width: 40em) {
.brand__sub {
display: block;
}
}
@media (min-width: 75em) {
.header__bar:has(.sections) .brand__sub {
display: none;
}
}
.aud {
display: flex;
padding: 3px;
border-radius: var(--r-pill);
background: rgba(247, 247, 245, 0.08);
box-shadow: inset 0 0 0 1px var(--color-line-dark);
}
.aud a {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 0.875rem;
border-radius: var(--r-pill);
color: var(--color-on-dark-muted);
font-size: var(--fs-small);
font-weight: 620;
text-decoration: none;
white-space: nowrap;
transition:
background-color var(--t-fast) linear,
color var(--t-fast) linear,
transform var(--t-fast) var(--ease-out);
}
.aud a:hover {
color: var(--color-on-dark);
}
.aud a:active {
transform: scale(0.97);
}
.aud a[aria-current="page"] {
background: var(--color-on-dark);
color: var(--color-text);
}
.header__bar > .aud {
display: none;
}
.aud--hero {
margin-bottom: 1.75rem;
}
@media (min-width: 48em) {
.header__bar > .aud {
display: flex;
}
.aud--hero {
display: none;
}
}
.menu-btn {
display: none;
}
.js .menu-btn {
display: inline-flex;
align-items: center;
gap: 0.625rem;
min-height: 44px;
min-width: 44px;
padding: 0 1rem;
border: 1.5px solid rgba(247, 247, 245, 0.28);
border-radius: var(--r-pill);
background: none;
color: var(--color-on-dark);
font-size: var(--fs-small);
font-weight: 650;
transition:
border-color var(--t-fast) linear,
transform var(--t-fast) var(--ease-out);
}
.js .menu-btn:hover {
border-color: rgba(247, 247, 245, 0.6);
}
.js .menu-btn:active {
transform: scale(0.96);
}
.menu-btn__icon {
position: relative;
width: 16px;
height: 10px;
}
.menu-btn__icon::before,
.menu-btn__icon::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 2px;
border-radius: 2px;
background: currentColor;
transition:
transform var(--t-mid) var(--ease-out),
top var(--t-mid) var(--ease-out);
}
.menu-btn__icon::before {
top: 0;
}
.menu-btn__icon::after {
top: 8px;
}
.menu-btn[aria-expanded="true"] .menu-btn__icon::before {
top: 4px;
transform: rotate(45deg);
}
.menu-btn[aria-expanded="true"] .menu-btn__icon::after {
top: 4px;
transform: rotate(-45deg);
}
.sections {
flex-basis: 100%;
padding: 0.25rem 0 0.75rem;
border-top: 1px solid var(--color-line-dark);
}
.sections__list {
display: flex;
flex-wrap: wrap;
gap: 0 1.25rem;
list-style: none;
}
.sections__list a {
display: inline-flex;
align-items: center;
min-height: 44px;
min-width: 44px;
color: var(--color-on-dark-muted);
font-size: var(--fs-small);
font-weight: 600;
text-decoration: none;
transition: color var(--t-fast) linear;
}
.sections__list a:hover,
.sections__list a[aria-current="location"] {
color: var(--color-on-dark);
}
.sections__aud {
display: none;
}
.js .sections {
position: absolute;
left: 0;
right: 0;
top: 100%;
max-height: calc(100vh - var(--header-h));
max-height: calc(100dvh - var(--header-h));
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.25rem var(--gutter) 1.5rem;
border-top: 1px solid var(--color-line-dark);
background: var(--color-surface-dark);
box-shadow: 0 28px 40px -30px rgba(0, 0, 0, 0.7);
opacity: 0;
visibility: hidden;
transform: translate3d(0, -6px, 0);
transition:
opacity var(--t-fast) var(--ease-out),
transform var(--t-mid) var(--ease-out),
visibility 0s linear var(--t-mid);
}
.js .sections.is-open {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
.js .sections__list {
display: block;
max-width: var(--maxw);
margin-inline: auto;
}
.js .sections__list a {
display: flex;
justify-content: space-between;
min-height: 52px;
border-bottom: 1px solid var(--color-line-dark);
color: var(--color-on-dark);
font-size: 1.125rem;
font-weight: 620;
}
.js .sections__list a::after {
content: "";
width: 8px;
height: 8px;
border-right: 2px solid var(--color-on-dark-faint);
border-bottom: 2px solid var(--color-on-dark-faint);
transform: rotate(-45deg);
transition: transform var(--t-fast) var(--ease-out);
}
.js .sections__list a:active::after {
transform: translateX(3px) rotate(-45deg);
}
.js .sections__aud {
display: block;
max-width: var(--maxw);
margin: 1.5rem auto 0;
}
.sections__aud p {
margin-bottom: 0.5rem;
color: var(--color-on-dark-faint);
font-size: var(--fs-small);
font-weight: 600;
}
.sections__aud a {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-right: 1.25rem;
color: var(--color-on-dark);
font-weight: 650;
text-decoration-color: var(--color-primary);
}
@media (min-width: 75em) {
.header__bar {
flex-wrap: nowrap;
gap: 2rem;
}
.brand {
margin-right: 0;
}
.js .menu-btn {
display: none;
}
.sections,
.js .sections {
position: static;
flex-basis: auto;
margin-left: auto;
padding: 0;
max-height: none;
overflow: visible;
border: 0;
background: none;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
transition: none;
}
.sections__list,
.js .sections__list {
display: flex;
gap: 1.75rem;
}
.js .sections__list a {
position: relative;
display: inline-flex;
justify-content: center;
min-height: 44px;
min-width: 44px;
border: 0;
color: var(--color-on-dark-muted);
font-size: var(--fs-small);
font-weight: 600;
}
.js .sections__list a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 6px;
width: auto;
height: 2px;
border: 0;
border-radius: 2px;
background: var(--color-primary);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--t-mid) var(--ease-out);
}
.js .sections__list a:hover,
.js .sections__list a[aria-current="location"] {
color: var(--color-on-dark);
}
.js .sections__list a[aria-current="location"]::after {
transform: scaleX(1);
}
.sections__extra,
.js .sections__aud {
display: none;
}
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.btn {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
min-height: 52px;
padding: 0 1.5rem;
border: 0;
border-radius: var(--r-control);
font-size: var(--fs-ui);
font-weight: 700;
line-height: 1.2;
text-decoration: none;
transition:
background-color var(--t-fast) linear,
transform var(--t-fast) var(--ease-out);
}
@media (min-width: 30em) {
.btn {
flex: 0 0 auto;
}
}
.btn--primary {
background: var(--color-primary);
color: var(--color-on-primary);
}
.btn--primary:hover {
background: var(--color-accent);
}
.btn:active {
transform: scale(0.98);
}
.btn__icon {
width: 18px;
height: 18px;
transition: transform var(--t-mid) var(--ease-out);
}
.btn:hover .btn__icon,
.btn:focus-visible .btn__icon {
transform: translateY(2px);
}
.tag {
display: inline-flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0.875rem 0.5rem 0.75rem;
border: 1.5px solid color-mix(in srgb, currentColor 32%, transparent);
border-radius: 8px;
font-size: var(--fs-small);
font-weight: 620;
line-height: 1.3;
}
.tag::before {
content: "";
flex: none;
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--color-primary);
}
.hero {
--dw: min(42vw, 11rem);
--hang: calc(var(--dw) * 0.7);
--cols: minmax(0, 1.05fr) minmax(0, 0.95fr);
position: relative;
isolation: isolate;
}
.hero__main {
padding-top: clamp(1.75rem, 6vw, 5rem);
}
.hero__grid {
position: relative;
z-index: 2;
display: grid;
gap: 2.5rem;
}
.hero__copy {
max-width: 40rem;
}
.hero .eyebrow {
margin-bottom: 1.125rem;
color: var(--color-on-dark-muted);
}
.hero .display {
margin-bottom: 1.375rem;
}
.hero .lede {
max-width: 34rem;
margin-bottom: 1.625rem;
color: var(--color-on-dark-muted);
}
.hero .tag {
margin-bottom: 1.875rem;
}
.hero__visual {
position: relative;
z-index: 2;
display: grid;
grid-template-areas: "v";
align-items: start;
justify-items: end;
container-type: inline-size;
margin-bottom: calc(var(--hang) * -1);
}
.hero__visual > * {
grid-area: v;
}
.hero__visual .shot {
z-index: 2;
justify-self: start;
margin-top: calc(min(100cqw, var(--portrait-w)) * 1.02 * 0.5);
}
.hero--phone-end .hero__visual {
justify-items: start;
}
.hero--phone-end .hero__visual .shot {
justify-self: end;
}
.portrait {
--fade-x: linear-gradient(90deg, transparent, #000 26%, #000 86%, transparent);
--fade-y: linear-gradient(180deg, transparent, #000 12%, #000 70%, transparent);
position: relative;
width: min(100%, var(--portrait-w));
aspect-ratio: 446 / 455;
}
.portrait img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-mask-image: var(--fade-x), var(--fade-y);
-webkit-mask-composite: source-in;
mask-image: var(--fade-x), var(--fade-y);
mask-composite: intersect;
}
.portrait--left {
--fade-x: linear-gradient(90deg, transparent, #000 12%, #000 72%, transparent);
}
.hero__band {
z-index: 1;
padding-top: calc(var(--hang) + 1.5rem);
padding-bottom: clamp(2.75rem, 7vw, 4.5rem);
background: var(--color-surface-dark-2);
border-top: 1px solid var(--color-line-dark);
}
.hero__base {
display: grid;
gap: 2.25rem;
}
.hero__cap {
justify-self: center;
max-width: 22rem;
text-align: center;
}
.hero__facts {
display: grid;
gap: 1.75rem;
}
@media (min-width: 64em) {
.hero {
--dw: clamp(13rem, 17vw, 15rem);
--hang: calc(var(--dw) * 0.85);
}
.hero__grid,
.hero__base {
grid-template-columns: var(--cols);
column-gap: clamp(2rem, 5vw, 5rem);
}
.hero__grid {
align-items: end;
}
.hero__copy {
padding-bottom: clamp(5rem, 9vw, 8rem);
}
.hero__visual .shot {
margin-top: calc(min(100cqw, var(--portrait-w)) * 1.02 * 0.74);
}
.hero__band {
padding-top: 2.25rem;
}
.hero__cap {
grid-column: 2;
grid-row: 1;
justify-self: start;
width: var(--dw);
max-width: none;
margin-top: calc(var(--hang) - 1rem);
}
.hero--phone-end .hero__cap {
justify-self: end;
}
.hero__facts {
grid-column: 1;
grid-row: 1;
align-self: start;
}
}
.hours {
position: relative;
height: 2.75rem;
max-width: 34rem;
}
.hours__ticks {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 11px;
background: repeating-linear-gradient(90deg, rgba(247, 247, 245, 0.42) 0 1px, transparent 1px 10%);
background-size: calc(100% + 1px) 100%;
}
.hours__shift {
position: absolute;
top: -3px;
left: 30%;
width: 60%;
height: 7px;
border-radius: 4px;
background: var(--color-primary);
transform-origin: left center;
}
.hours__labels {
position: absolute;
left: 0;
right: 0;
top: 1.125rem;
color: var(--color-on-dark-faint);
font-size: var(--fs-small);
font-weight: 560;
font-variant-numeric: tabular-nums;
}
.hours__labels span {
position: absolute;
left: var(--p);
transform: translateX(-50%);
}
.hours__labels span:first-child {
transform: none;
}
.hours__labels span:last-child {
transform: translateX(-100%);
}
.hours__cap {
margin-top: 0.5rem;
color: var(--color-primary);
font-size: var(--fs-small);
font-weight: 650;
font-variant-numeric: tabular-nums;
}
.facts {
display: flex;
flex-wrap: wrap;
gap: 1.25rem 3rem;
}
.facts dt {
color: var(--color-on-dark-faint);
font-size: var(--fs-small);
font-weight: 560;
}
.facts dd {
margin-top: 0.125rem;
color: var(--color-on-dark);
font-size: 1.1875rem;
font-weight: 650;
}
.dark .concept {
color: var(--color-on-dark-muted);
}
.shot {
margin: 0;
}
.device {
--u: calc(var(--dw) / 414);
position: relative;
width: var(--dw);
aspect-ratio: 414 / 868;
padding: calc(12 * var(--u));
border-radius: calc(64 * var(--u));
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 3%, rgba(255, 255, 255, 0) 97%, rgba(255, 255, 255, 0.12)),
linear-gradient(160deg, #5c5c5a 0%, #2c2c2b 22%, #1d1d1c 55%, #2e2e2d 80%, #4d4d4b 100%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.08),
inset 0 0 0 calc(3 * var(--u)) #141414,
0 calc(60 * var(--u)) calc(90 * var(--u)) calc(-40 * var(--u)) rgba(0, 0, 0, 0.55),
0 calc(24 * var(--u)) calc(40 * var(--u)) calc(-18 * var(--u)) rgba(0, 0, 0, 0.4);
}
.device::before {
content: "";
position: absolute;
inset: calc(5 * var(--u));
border-radius: calc(59 * var(--u));
background: #050505;
}
.device__screen {
position: relative;
z-index: 1;
overflow: hidden;
aspect-ratio: 390 / 844;
border-radius: calc(52 * var(--u));
background: var(--color-background);
isolation: isolate;
}
.device__screen img {
width: 100%;
height: 100%;
}
.device__screen::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(118deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 30%);
pointer-events: none;
}
.device__cam {
position: absolute;
z-index: 2;
top: calc(25 * var(--u));
left: 50%;
width: calc(13 * var(--u));
height: calc(13 * var(--u));
border-radius: 50%;
transform: translateX(-50%);
background: radial-gradient(circle at 38% 36%, #3c4450 0 12%, #121416 20%, #040404 35%);
box-shadow: 0 0 0 calc(1.5 * var(--u)) #000;
}
.device__btn {
position: absolute;
width: calc(4 * var(--u));
border-radius: 2px;
background: linear-gradient(90deg, #1e1e1d, #4f4f4d 60%, #2d2d2c);
}
.device__btn--v1 {
left: calc(-3 * var(--u));
top: 20.3%;
height: 6.9%;
}
.device__btn--v2 {
left: calc(-3 * var(--u));
top: 28.6%;
height: 6.9%;
}
.device__btn--pw {
right: calc(-3 * var(--u));
top: 24.7%;
height: 11%;
}
.crop {
--cw: min(100%, 28rem);
position: relative;
width: var(--cw);
height: calc(var(--cwpx) * 2.1641 * var(--h));
overflow: hidden;
border-radius: var(--r-block);
background: var(--color-background);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 40px 60px -34px rgba(0, 0, 0, 0.55),
0 18px 30px -20px rgba(0, 0, 0, 0.3);
}
.crop img {
position: absolute;
left: 0;
top: 0;
width: 100%;
transform: translateY(calc(var(--y) * -100%));
}
.shot__cap {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
margin-top: 1.375rem;
text-align: center;
}
.shot__label {
color: var(--color-on-dark);
font-size: var(--fs-small);
font-weight: 650;
line-height: 1.35;
}
.shot__legend {
max-width: 21rem;
color: var(--color-on-dark-muted);
font-size: var(--fs-small);
line-height: 1.45;
}
.zoom {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 44px;
margin-top: 0.375rem;
padding: 0 1rem;
border-radius: var(--r-pill);
color: var(--color-on-dark);
font-size: var(--fs-small);
font-weight: 650;
text-decoration: none;
box-shadow: inset 0 0 0 1.5px rgba(247, 247, 245, 0.34);
transition:
background-color var(--t-fast) linear,
box-shadow var(--t-fast) linear,
transform var(--t-fast) var(--ease-out);
}
.zoom:hover {
background: rgba(247, 247, 245, 0.08);
box-shadow: inset 0 0 0 1.5px var(--color-primary);
}
.zoom:active {
transform: scale(0.97);
}
.zoom svg {
width: 18px;
height: 18px;
}
.zoom--ink {
color: var(--color-text);
box-shadow: inset 0 0 0 1.5px var(--color-border);
}
.zoom--ink:hover {
background: var(--color-surface);
box-shadow: inset 0 0 0 1.5px var(--color-text);
}
.stage,
.stage--duo > .shot {
--pad: clamp(2rem, 7vw, 3.25rem);
--hz: calc(var(--pad) + var(--dw) * 1.384);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: var(--pad) 1.25rem 1.5rem;
border-radius: var(--r-stage);
background:
linear-gradient(var(--color-primary), var(--color-primary)) 0 var(--hz) / 100% 2px no-repeat,
linear-gradient(180deg, var(--color-fill) var(--hz), var(--color-surface-dark) var(--hz));
}
.stage--crop {
--cwpx: min(calc(100vw - 2 * var(--gutter) - 2.5rem), 28rem);
--hz: calc(var(--pad) + var(--cwpx) * 2.1641 * var(--h) * 0.62);
}
@supports (width: 1cqw) {
.stage--crop {
--cwpx: min(calc(100cqw - 2.5rem), 28rem);
}
}
.stage--crop .crop {
--cw: var(--cwpx);
}
.stage--duo {
display: grid;
gap: 1rem;
}
@media (min-width: 48em) {
.stage--duo {
--dw: min(36vw, 17.5rem);
--pad: 3.25rem;
--hz: calc(var(--pad) + var(--dw) * 1.384);
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
gap: clamp(2rem, 6vw, 5rem);
padding: var(--pad) 1.5rem 1.75rem;
border-radius: var(--r-stage);
background:
linear-gradient(var(--color-primary), var(--color-primary)) 0 var(--hz) / 100% 2px no-repeat,
linear-gradient(180deg, var(--color-fill) var(--hz), var(--color-surface-dark) var(--hz));
}
.stage--duo > .shot {
padding: 0;
background: none;
border-radius: 0;
}
}
@media (min-width: 64em) {
.stage {
--dw: min(19rem, 26vw);
}
.stage--duo {
--dw: 18rem;
}
}
.feature {
padding-block: calc(var(--section-y) * 0.5);
}
.hero + .feature,
.venues + .feature {
padding-top: var(--section-y);
}
.feature:last-of-type {
padding-bottom: var(--section-y);
}
.feature__grid {
display: grid;
grid-template-areas: "head" "visual" "body";
row-gap: 2.25rem;
}
.feature--wide .feature__grid {
grid-template-areas: "head" "body" "visual";
}
.feature__copy {
display: contents;
}
.feature__head {
grid-area: head;
max-width: var(--measure);
}
.feature__body {
grid-area: body;
max-width: var(--measure);
}
.feature__visual {
grid-area: visual;
min-width: 0;
container-type: inline-size;
}
.feature__head .title {
margin-bottom: 1.125rem;
}
.feature__head .subtitle {
margin-bottom: 0.875rem;
}
@media (min-width: 48em) and (max-width: 63.99em) {
.feature__visual {
width: 100%;
max-width: 38rem;
}
}
@media (min-width: 64em) {
.feature__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "copy visual";
column-gap: clamp(3rem, 6vw, 6.5rem);
align-items: center;
}
.feature--flip .feature__grid,
.feature__grid--flip {
grid-template-areas: "visual copy";
}
.feature__copy {
display: block;
grid-area: copy;
}
.feature__body {
margin-top: 2rem;
}
.feature--wide .feature__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "head body" "visual visual";
align-items: start;
row-gap: 3.5rem;
}
.feature--wide .feature__copy {
display: contents;
}
.feature--wide .feature__body {
margin-top: 0;
padding-top: 2.75rem;
}
}
.kicker {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
color: var(--color-text-2);
font-size: var(--fs-small);
font-weight: 640;
}
.route {
display: inline-flex;
gap: 3px;
}
.route i {
width: 14px;
height: 5px;
border-radius: 2px;
background: var(--color-border);
}
.route i.in {
background: var(--color-text-muted);
}
.route i.now {
background: var(--color-primary);
transform-origin: left center;
}
.points {
list-style: none;
border-top: 1px solid var(--color-border);
}
.points > li {
padding: 1.125rem 0 1.25rem;
border-bottom: 1px solid var(--color-border);
}
.points__t {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem 0.625rem;
color: var(--color-text);
font-size: var(--fs-ui);
font-weight: 680;
line-height: 1.3;
}
.points__d {
margin-top: 0.375rem;
color: var(--color-text-2);
font-size: var(--fs-body);
line-height: 1.55;
text-wrap: pretty;
}
.pill {
display: inline-flex;
align-items: center;
min-height: 1.75rem;
padding: 0 0.625rem;
border-radius: var(--r-pill);
font-size: var(--fs-small);
font-weight: 650;
line-height: 1;
}
.pill--decl {
color: var(--color-text-2);
box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
}
.pill--rev {
background: var(--estado-exito-fondo);
color: var(--estado-exito);
}
.pill--reg {
background: var(--estado-pendiente-fondo);
color: var(--estado-pendiente);
}
.note {
margin-top: 1.75rem;
padding: 0.125rem 0 0.125rem 1rem;
border-left: 3px solid var(--color-text);
color: var(--color-text-2);
font-size: var(--fs-small);
line-height: 1.55;
}
.note b {
margin-right: 0.375rem;
color: var(--color-text);
font-weight: 720;
}
.chapter {
padding-top: clamp(3.5rem, 8vw, 6rem);
}
.chapter-intro {
max-width: 44rem;
}
.chapter-intro .title {
margin-bottom: 1.125rem;
}
.venues {
padding-top: var(--section-y);
}
.venues__head {
display: grid;
gap: 1rem;
max-width: 44rem;
margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.venues__list {
display: grid;
gap: 0.5rem;
list-style: none;
}
.venue {
position: relative;
overflow: hidden;
border-radius: var(--r-block);
background: var(--color-surface-dark);
aspect-ratio: 3 / 2;
}
.venue img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--pos, 50% 30%);
}
.venue figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
gap: 0.625rem;
padding: 2.5rem 1rem 0.875rem;
background: linear-gradient(180deg, rgba(18, 18, 18, 0), rgba(18, 18, 18, 0.82));
color: var(--color-on-dark);
font-size: var(--fs-ui);
font-weight: 700;
}
.venue .ic {
width: 22px;
height: 22px;
color: var(--color-primary);
}
.venues__note {
margin-top: 0.875rem;
color: var(--color-text-muted);
font-size: var(--fs-small);
}
@media (min-width: 40em) {
.venues__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.venue {
aspect-ratio: 4 / 5;
}
.venue img {
object-position: 50% 50%;
}
}
.states {
position: relative;
display: grid;
list-style: none;
}
.states > li {
--i: 0;
position: relative;
display: grid;
grid-template-columns: 2.25rem minmax(0, 1fr);
align-content: start;
column-gap: 0.875rem;
padding-bottom: 1.375rem;
}
.states > li:nth-child(2) {
--i: 1;
}
.states > li:nth-child(3) {
--i: 2;
}
.states > li:last-child {
padding-bottom: 0;
}
.states > li:not(:last-child)::before {
content: "";
position: absolute;
left: calc(1.125rem - 1px);
top: 2.25rem;
bottom: 0;
width: 2px;
background: var(--color-border);
transform-origin: center top;
}
.states__dot {
grid-row: span 2;
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: var(--color-surface-dark);
color: var(--color-on-dark);
font-size: var(--fs-small);
font-weight: 720;
font-variant-numeric: tabular-nums;
}
.states__t {
align-self: center;
color: var(--color-text);
font-size: 1.1875rem;
font-weight: 720;
line-height: 1.25;
}
.states__d {
color: var(--color-text-2);
font-size: var(--fs-body);
line-height: 1.45;
}
@media (min-width: 48em) {
.states {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.states > li {
grid-template-columns: minmax(0, 1fr);
row-gap: 0.375rem;
padding: 0 1rem 0 0;
}
.states__dot {
grid-row: auto;
margin-bottom: 0.5rem;
}
.states > li:not(:last-child)::before {
left: 2.75rem;
right: 0.5rem;
top: calc(1.125rem - 1px);
bottom: auto;
width: auto;
height: 2px;
transform-origin: left center;
}
}
.cupos {
list-style: none;
margin-top: 1.75rem;
border-top: 1px solid var(--color-border);
}
.cupos > li {
display: grid;
grid-template-columns: 2.75rem minmax(0, 1fr) auto;
align-items: center;
gap: 0.875rem;
padding: 0.875rem 0;
border-bottom: 1px solid var(--color-border);
}
.avatar {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
font-size: var(--fs-small);
font-weight: 720;
}
.avatar--ms {
background: var(--estado-exito-fondo);
color: var(--estado-exito);
}
.avatar--lg {
background: var(--estado-pendiente-fondo);
color: var(--estado-pendiente);
}
.avatar--tq {
background: var(--naranja-50);
color: var(--naranja-tinta);
}
.cupos__who {
display: flex;
flex-direction: column;
font-size: var(--fs-ui);
font-weight: 650;
line-height: 1.3;
}
.cupos__who small {
color: var(--color-text-2);
font-size: var(--fs-small);
font-weight: 540;
}
.state {
padding: 0.3125rem 0.75rem;
border-radius: var(--r-pill);
background: var(--estado-exito-fondo);
color: var(--estado-exito);
font-size: var(--fs-small);
font-weight: 680;
}
.cupos__cap {
margin-top: 0.75rem;
color: var(--color-text-muted);
font-size: var(--fs-small);
}
.roles {
list-style: none;
margin-top: 1.75rem;
border-top: 1px solid var(--color-border);
}
.roles > li {
display: grid;
grid-template-columns: 2.5rem minmax(0, 1fr);
column-gap: 0.875rem;
padding: 1rem 0;
border-bottom: 1px solid var(--color-border);
}
.roles .ic {
grid-row: span 3;
width: 2.5rem;
height: 2.5rem;
padding: 0.5rem;
border-radius: var(--r-control);
background: var(--color-surface-dark);
color: var(--color-primary);
}
.roles__h {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0 1rem;
font-size: var(--fs-ui);
font-weight: 700;
}
.roles__h span {
color: var(--color-text-2);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.roles__d {
color: var(--color-text-2);
font-size: var(--fs-body);
line-height: 1.45;
}
.roles__req {
margin-top: 0.25rem;
color: var(--color-text-muted);
font-size: var(--fs-small);
font-weight: 560;
}
.roles__all {
margin-top: 0.875rem;
color: var(--color-text-2);
font-size: var(--fs-small);
line-height: 1.5;
}
.situations {
display: grid;
gap: 0 2rem;
list-style: none;
margin-top: 2.5rem;
}
.situations > li {
padding: 1.25rem 0;
border-top: 2px solid var(--color-text);
}
.situations h3 {
margin-bottom: 0.375rem;
font-size: 1.1875rem;
font-weight: 720;
font-stretch: 104%;
}
.situations p {
color: var(--color-text-2);
font-size: var(--fs-body);
line-height: 1.5;
}
@media (min-width: 40em) {
.situations {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64em) {
.situations {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0 1.75rem;
}
}
.chart {
margin-top: 2.5rem;
}
.chart__frame {
overflow: hidden;
border-radius: var(--r-block);
background: var(--color-background);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.chart__frame img {
width: 100%;
aspect-ratio: 2208 / 1012;
}
.chart figcaption {
display: grid;
gap: 0.875rem;
margin-top: 1rem;
color: var(--color-text-2);
font-size: var(--fs-small);
line-height: 1.5;
}
.chart figcaption b {
color: var(--color-text);
font-weight: 700;
}
.legend {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
list-style: none;
}
.legend li {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.sw {
flex: none;
width: 1.5rem;
height: 0.75rem;
border-radius: 2px;
}
.sw--demanda {
height: 3px;
background: #d9650b;
}
.sw--dotacion {
height: 3px;
background: #2a78d6;
}
.sw--faltan {
background: var(--estado-error-fondo);
box-shadow: inset 0 0 0 1px #efb8b1;
}
.sw--ociosa {
background: var(--hurii-gris-claro);
box-shadow: inset 0 0 0 1px var(--gris-200);
}
.chart .zoom {
justify-self: start;
margin-top: 0;
}
.steps {
list-style: none;
counter-reset: paso;
margin-top: 1.25rem;
border-top: 1px solid var(--color-border);
}
.steps > li {
counter-increment: paso;
display: grid;
grid-template-columns: 2rem minmax(0, 1fr);
column-gap: 0.75rem;
padding: 0.875rem 0;
border-bottom: 1px solid var(--color-border);
}
.steps > li::before {
content: counter(paso);
grid-row: span 2;
color: var(--color-text);
font-size: 1.1875rem;
font-weight: 780;
font-stretch: 112%;
font-variant-numeric: tabular-nums;
}
.steps b {
font-size: var(--fs-ui);
font-weight: 700;
}
.steps span {
color: var(--color-text-2);
font-size: var(--fs-body);
line-height: 1.45;
}
.steps__h {
margin-top: 2rem;
font-size: var(--fs-ui);
font-weight: 700;
}
.closing {
padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3.5rem, 8vw, 6rem);
}
.closing__grid {
display: grid;
gap: 2.75rem;
}
.closing .title {
margin: 1.25rem 0 1rem;
color: var(--color-on-dark);
}
.closing .lede {
color: var(--color-on-dark-muted);
}
.closing h3 {
margin-bottom: 0.5rem;
color: var(--color-on-dark);
font-size: var(--fs-ui);
font-weight: 700;
}
.closing__list {
list-style: none;
}
.closing__list li {
padding: 0.75rem 0;
border-top: 1px solid var(--color-line-dark);
color: var(--color-on-dark-muted);
font-size: var(--fs-body);
line-height: 1.5;
}
.closing__group + .closing__group {
margin-top: 2rem;
}
@media (min-width: 64em) {
.closing__grid {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
column-gap: clamp(3rem, 7vw, 6.5rem);
}
}
.crosslink {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
margin-top: clamp(3rem, 7vw, 4.5rem);
padding: 1rem 1.25rem 1rem 1rem;
border-radius: var(--r-block);
background: var(--color-surface-dark-2);
box-shadow: inset 0 0 0 1px var(--color-line-dark);
color: var(--color-on-dark);
text-decoration: none;
transition:
box-shadow var(--t-mid) var(--ease-out),
transform var(--t-fast) var(--ease-out);
}
.crosslink:has(.crosslink__img) {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.crosslink:hover {
box-shadow: inset 0 0 0 1px rgba(247, 247, 245, 0.32);
}
.crosslink:active {
transform: scale(0.99);
}
.crosslink__img {
width: clamp(4rem, 12vw, 6rem);
height: clamp(4rem, 12vw, 6rem);
border-radius: var(--r-control);
object-fit: cover;
object-position: 50% 25%;
}
.crosslink small {
display: block;
margin-bottom: 0.25rem;
color: var(--color-on-dark-muted);
font-size: var(--fs-small);
font-weight: 560;
}
.crosslink strong {
display: block;
font-size: var(--fs-subtitle);
font-weight: 760;
font-stretch: 104%;
line-height: 1.1;
}
.arrow-dot {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-on-primary);
transition: transform var(--t-mid) var(--ease-out);
}
.arrow-dot svg {
width: 20px;
height: 20px;
}
.crosslink:hover .arrow-dot,
.crosslink:focus-visible .arrow-dot {
transform: translateX(4px);
}
.site-footer {
padding-block: 2.75rem 3rem;
border-top: 1px solid var(--color-line-dark);
}
.footer__grid {
display: grid;
gap: 1.75rem;
}
.site-footer .brand {
margin-bottom: 0.75rem;
}
.footer__nav ul {
display: flex;
flex-wrap: wrap;
gap: 0 1.5rem;
list-style: none;
}
.footer__nav a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
min-width: 44px;
color: var(--color-on-dark);
font-size: var(--fs-small);
font-weight: 600;
text-decoration-color: rgba(247, 247, 245, 0.35);
transition: text-decoration-color var(--t-fast) linear;
}
.footer__nav a:hover {
text-decoration-color: var(--color-primary);
}
.footer__legal {
max-width: 48rem;
color: var(--color-on-dark-faint);
font-size: var(--fs-small);
line-height: 1.6;
}
.footer__legal a {
color: var(--color-on-dark);
}
.site-footer .concept {
color: var(--color-on-dark-muted);
}
@media (min-width: 64em) {
.footer__grid {
grid-template-columns: auto 1fr;
column-gap: 4rem;
align-items: start;
}
.footer__nav {
justify-self: end;
}
.footer__legal {
grid-column: 1 / -1;
}
}
.viewer {
width: min(calc(100vw - 1rem), 32rem);
max-width: none;
max-height: calc(100vh - 1rem);
max-height: calc(100dvh - 1rem);
padding: 0;
border: 0;
border-radius: 20px;
background: var(--color-background);
color: var(--color-text);
box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
overflow: hidden;
}
.viewer[open] {
display: flex;
flex-direction: column;
}
.viewer--wide {
width: min(calc(100vw - 1rem), 75rem);
}
.viewer::backdrop {
background: rgba(18, 18, 18, 0.88);
}
.viewer__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.5rem 0.5rem 0.5rem 1.25rem;
border-bottom: 1px solid var(--color-border);
}
.viewer__title {
font-size: var(--fs-small);
font-weight: 650;
line-height: 1.3;
}
.viewer__close {
flex: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 44px;
padding: 0 1rem;
border: 1.5px solid var(--color-border);
border-radius: var(--r-pill);
background: var(--color-surface);
font-size: var(--fs-small);
font-weight: 650;
transition: border-color var(--t-fast) linear;
}
.viewer__close:hover {
border-color: var(--color-text);
}
.viewer__body {
overflow: auto;
overscroll-behavior: contain;
padding: 1rem;
}
.viewer__img {
width: 100%;
margin-inline: auto;
border-radius: 12px;
box-shadow: 0 0 0 1px var(--color-border);
}
html:has(.viewer[open]) {
overflow: hidden;
}
.entry .hero {
--dw: min(40vw, 11.5rem);
--hang: calc(var(--dw) * 0.7);
--cols: minmax(0, 1fr) auto;
}
.choices {
display: grid;
gap: 0.75rem;
max-width: 34rem;
}
.choices__label {
margin-bottom: 0.25rem;
color: var(--color-on-dark-muted);
font-size: var(--fs-small);
font-weight: 620;
}
.choice {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 1rem;
min-height: 4.75rem;
padding: 0.75rem 1rem 0.75rem 1.25rem;
border-radius: var(--r-block);
background: var(--color-surface-dark-2);
box-shadow: inset 0 0 0 1px var(--color-line-dark);
color: var(--color-on-dark);
text-decoration: none;
transition:
transform var(--t-fast) var(--ease-out),
box-shadow var(--t-mid) var(--ease-out);
}
.choice:has(.choice__img) {
grid-template-columns: auto minmax(0, 1fr) auto;
padding-left: 0.75rem;
}
.choice:hover {
box-shadow: inset 0 0 0 1px rgba(247, 247, 245, 0.32);
transform: translateY(-2px);
}
.choice:active {
transform: translateY(0) scale(0.99);
}
.choice__img {
width: 3.75rem;
height: 3.75rem;
border-radius: var(--r-control);
object-fit: cover;
object-position: 50% 22%;
}
.choice__k {
display: block;
color: var(--color-on-dark-muted);
font-size: var(--fs-small);
font-weight: 600;
}
.choice__t {
display: block;
margin-top: 0.125rem;
font-size: 1.25rem;
font-weight: 760;
font-stretch: 104%;
line-height: 1.15;
}
.choice .arrow-dot {
width: 2.75rem;
height: 2.75rem;
}
.choice:hover .arrow-dot,
.choice:focus-visible .arrow-dot {
transform: translateX(3px);
}
.pair {
display: flex;
align-items: flex-start;
gap: clamp(0.75rem, 4vw, 2rem);
}
.pair .shot:last-child {
margin-top: calc(var(--dw) * -0.16);
}
.pair-caps {
display: flex;
justify-content: center;
gap: clamp(0.75rem, 4vw, 2rem);
text-align: center;
}
.pair-caps span {
width: var(--dw);
color: var(--color-on-dark-muted);
font-size: var(--fs-small);
font-weight: 650;
}
.entry .hero__visual {
display: flex;
justify-self: center;
container-type: normal;
}
.entry .hero__visual .shot:first-child {
margin-top: 0;
}
.entry .hero__visual .shot:last-child {
margin-top: calc(var(--dw) * -0.16);
}
.entry .hero__cap {
max-width: none;
width: auto;
}
@media (min-width: 64em) {
.entry .hero {
--dw: clamp(15rem, 19vw, 18rem);
}
.entry .hero__copy {
padding-bottom: clamp(3.5rem, 6vw, 5rem);
}
.entry .hero__cap {
justify-self: center;
}
}
.hero--plain .hero__copy {
padding-bottom: clamp(5rem, 16vw, 11rem);
}
.hero--plain .hero__band {
padding: 0;
height: clamp(3rem, 8vw, 5rem);
}
@keyframes rise {
from {
opacity: 0;
transform: translate3d(0, 14px, 0);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes rise-soft {
from {
opacity: 0;
transform: translate3d(0, 12px, 0);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes draw {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes viewer-in {
from {
opacity: 0;
transform: translate3d(0, 10px, 0) scale(0.985);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes fade {
from {
opacity: 0;
}
}
@media (prefers-reduced-motion: no-preference) {
.hero__copy > * {
animation: rise 520ms var(--ease-out) both;
}
.hero__copy > :nth-child(2) {
animation-delay: 50ms;
}
.hero__copy > :nth-child(3) {
animation-delay: 100ms;
}
.hero__copy > :nth-child(4) {
animation-delay: 150ms;
}
.hero__copy > :nth-child(5) {
animation-delay: 200ms;
}
.hero__copy > :nth-child(n + 6) {
animation-delay: 250ms;
}
.hero__visual .portrait {
animation: fade 600ms linear 80ms both;
}
.hero__visual .shot {
animation: rise-soft 600ms var(--ease-out) 220ms both;
}
.hero__base {
animation: fade 500ms linear 260ms both;
}
.hours__shift {
animation: draw 600ms var(--ease-out) 420ms both;
}
.js [data-reveal] {
opacity: 0;
transform: translate3d(0, 16px, 0);
transition:
opacity 520ms var(--ease-out),
transform 520ms var(--ease-out);
transition-delay: var(--d, 0ms);
}
.js [data-reveal="device"] {
transform: translate3d(0, 12px, 0);
transition-duration: 600ms;
}
.js [data-reveal].is-in {
opacity: 1;
transform: none;
}
.js [data-reveal] .route i.now {
transform: scaleX(0.2);
transition: transform 500ms var(--ease-out) 200ms;
}
.js [data-reveal].is-in .route i.now {
transform: none;
}
.js .states[data-reveal] > li:not(:last-child)::before {
transform: scaleY(0);
transition: transform 520ms var(--ease-out);
transition-delay: calc(240ms + var(--i) * 160ms);
}
.js .states[data-reveal].is-in > li:not(:last-child)::before {
transform: none;
}
.viewer[open] {
animation: viewer-in 220ms var(--ease-out);
}
.viewer[open]::backdrop {
animation: fade 220ms linear;
}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 48em) {
.js .states[data-reveal] > li:not(:last-child)::before {
transform: scaleX(0);
}
}
@media print {
.site-header,
.menu-btn,
.zoom,
.viewer {
display: none !important;
}
[data-reveal] {
opacity: 1 !important;
transform: none !important;
}
}
.hero--landing {
--dw: min(44vw, 15rem);
--hang: calc(var(--dw) * 0.6);
--pw: min(74cqw, var(--portrait-w));
}
.hero--landing .hero__main {
padding-top: clamp(1rem, 3vw, 3rem);
}
.hero--landing .aud--hero {
margin-bottom: 1rem;
}
.hero--landing .eyebrow {
margin-bottom: 0.5rem;
}
.hero--landing .display {
margin-bottom: 0.875rem;
font-size: clamp(1.875rem, 1.25rem + 2.75vw, 3.625rem);
}
.hero--landing .lede {
max-width: 36rem;
margin-bottom: 1.25rem;
font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
line-height: 1.5;
}
.hero--landing .actions {
margin-bottom: 0.875rem;
}
.hero--landing .tag {
align-items: flex-start;
margin: 0;
padding: 0;
border: 0;
color: var(--color-on-dark-muted);
font-weight: 560;
}
.hero--landing .tag::before {
margin-top: 0.45em;
}
.hero--landing .hero__grid {
gap: 1.75rem;
}
.hero--landing .portrait {
width: var(--pw);
}
.hero--landing .hero__visual .shot {
margin-top: calc(var(--pw) * 1.02 * 0.4);
}
@media (min-width: 64em) {
.hero--landing {
--dw: clamp(15rem, 19vw, 18.5rem);
--hang: calc(var(--dw) * 0.5);
--pw: min(calc(100cqw - var(--dw) * 0.55), var(--portrait-w));
--cols: minmax(0, 1fr) minmax(0, 1.05fr);
}
.hero--landing .hero__grid {
align-items: center;
}
.hero--landing .hero__copy {
padding-bottom: 0;
}
.hero--landing .hero__visual .shot {
margin-top: calc(var(--pw) * 1.02 * 0.22);
}
.hero--landing .hero__cap {
margin-top: calc(var(--hang) - 1rem);
}
}
.menu-btn__largo {
display: none;
}
@media (min-width: 48em) {
.menu-btn__corto {
display: none;
}
.menu-btn__largo {
display: inline;
}
.js .sections__aud {
display: none;
}
}
@media (min-width: 48em) and (max-width: 74.99em) {
.header__bar:has(.sections) .brand__sub {
display: none;
}
}
.recorrido {
--recorrido-pie: calc(44px + 1rem);
--recorrido-reserva: calc(var(--header-h) + 1px + var(--recorrido-pie));
padding-bottom: clamp(1.25rem, 3vw, 2.25rem);
}
.recorrido__figura {
margin: 0;
}
.recorrido__medio {
display: block;
width: min(100%, max(20rem, calc((100vh - var(--recorrido-reserva)) * 4 / 5)));
width: min(100%, max(20rem, calc((100svh - var(--recorrido-reserva)) * 4 / 5)));
height: auto;
aspect-ratio: 4 / 5;
margin-inline: auto;
background: var(--color-surface-dark);
}
@media (min-width: 48em) {
.recorrido__medio {
width: min(100%, 120rem, max(30rem, calc((100vh - var(--recorrido-reserva)) * 16 / 9)));
width: min(100%, 120rem, max(30rem, calc((100svh - var(--recorrido-reserva)) * 16 / 9)));
aspect-ratio: 16 / 9;
}
}
html:not(.js) video.recorrido__medio {
display: none;
}
.recorrido__pie {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
min-height: var(--recorrido-pie);
padding-top: 1rem;
}
.recorrido__pausa {
flex: none;
display: inline-flex;
align-items: center;
gap: 0.625rem;
min-height: 44px;
padding-inline: 1rem;
border: 1px solid var(--color-on-dark-faint);
border-radius: var(--r-pill);
background: none;
color: var(--color-on-dark);
font: inherit;
font-size: var(--fs-small);
font-weight: 600;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease-out);
}
.recorrido__pausa[hidden] {
display: none;
}
.recorrido__pausa::before {
content: "";
width: 0.625rem;
height: 0.75rem;
border-inline: 0.1875rem solid var(--color-primary);
}
.recorrido__pausa:hover {
border-color: var(--color-primary);
}