/* hecho por r3k1 */
@font-face { font-family: "Anton"; src: url(/fonts/anton.woff2) format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: "Geist"; src: url(/fonts/geist.woff2) format("woff2"); font-weight: 400 700; font-display: swap }
@font-face { font-family: "Caveat Brush"; src: url(/fonts/caveat-brush.woff2) format("woff2"); font-weight: 400; font-display: swap }

:root {
  --muelle: cubic-bezier(.34, 1.56, .64, 1);
  --suave: cubic-bezier(.32, .72, 0, 1);
  --lado: max(clamp(16px, 3vw, 40px), env(safe-area-inset-left), env(safe-area-inset-right));
  --ancho: 1600px;
  --anton: "Anton", "Impact", sans-serif;
  --geist: "Geist", system-ui, sans-serif;
  color-scheme: dark;
}
:root, :root[data-tema="oscuro"] { --fondo: #0b0b0d; --celda: #141416; --tinta: #f5f5f7; --gris: #8e8e93; --linea: #2c2c2e; --boton: #1f1f22; --brillo: color-mix(in srgb, var(--acento-2) 18%, transparent); --grano: .05; --velo: rgba(11, 11, 13, .72) }
:root[data-tema="claro"] { --fondo: #f2f2f0; --celda: #ffffff; --tinta: #111113; --gris: #626267; --linea: #e3e3e0; --boton: #e0e0dd; --brillo: color-mix(in srgb, var(--acento-2) 12%, transparent); --grano: .09; --velo: rgba(242, 242, 240, .78); color-scheme: light }

:root { --acento: #e5243b; --acento-hondo: #b8162b; --acento-txt: #ffffff; --acento-2: #e5243b; --acento-texto: #ff4a5f }
:root[data-tema="claro"] { --acento-2: #d41d33; --acento-texto: #c8162d }

@view-transition { navigation: auto }
::view-transition-old(root) { animation: 200ms cubic-bezier(.4, 0, 1, 1) both vt-sale }
::view-transition-new(root) { animation: 560ms cubic-bezier(.32, .72, 0, 1) both vt-entra }
@keyframes vt-sale { to { opacity: 0; transform: translateY(-12px) } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(16px) } }
html.vt-tema::view-transition-old(root), html.vt-tema::view-transition-new(root) { animation: none; mix-blend-mode: normal }
html.vt-tema .cabeza, html.vt-tema .fondo-vivo { view-transition-name: none }
.cabeza { view-transition-name: cabecera }
.fondo-vivo { view-transition-name: fondo }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gris) 45%, transparent) transparent }
h1, h2, h3 { text-wrap: balance }
p, li, small { text-wrap: pretty }
body { font-family: var(--geist); background: var(--fondo); color: var(--tinta); -webkit-font-smoothing: antialiased; overflow-x: clip; -webkit-tap-highlight-color: transparent }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
img { max-width: 100%; height: auto; display: block }
.rojo { fill: var(--acento); color: var(--acento) }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px }
.saltar { position: fixed; left: 16px; top: 12px; z-index: 90; padding: 12px 18px; border-radius: 999px; background: var(--tinta); color: var(--fondo); font-weight: 600; font-size: 15px; translate: 0 -160%; transition: translate .3s var(--suave) }
.saltar:focus { translate: 0 0 }
::selection { background: var(--acento); color: var(--acento-txt) }

body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: var(--grano);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")
}

main { overflow-x: clip }
.envoltura { position: relative; z-index: 1; width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lado) }

.cabeza { position: relative; z-index: 40; height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center }
.cabeza-fija { position: sticky; top: 0; z-index: 40 }
.cabeza-fija::before { content: ""; position: absolute; inset: 0; background: var(--velo); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--linea); opacity: 0; transition: opacity .3s }
.cabeza-fija.con-fondo::before { opacity: 1 }
.marca { justify-self: start; display: block; padding: 8px 0 }
.marca svg { width: 88px; height: auto; color: var(--tinta) }
.marca .rojo path { fill: var(--acento) }

.menu { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid var(--linea) }
.menu a { position: relative; z-index: 1; padding: 9px 18px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--gris); transition: color .25s }
.menu a.encima, .menu a[aria-current] { color: var(--tinta) }
.foco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none }
.foco rect { fill: var(--boton); opacity: 0 }

.lado-der { justify-self: end; display: flex; align-items: center; gap: 8px }
.tema { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--boton); color: var(--tinta); transition: scale .45s var(--muelle) }
.tema svg { width: 28px; height: 28px; overflow: visible }
.tema:active { scale: .9 }

.hamburguesa { display: none; position: relative; width: 48px; height: 48px; border-radius: 16px; background: var(--boton); transition: scale .3s var(--muelle) }
.hamburguesa:active { scale: .92 }
.hamburguesa span { position: absolute; left: 14px; width: 20px; height: 2.2px; border-radius: 2px; background: var(--tinta) }
.hamburguesa span:nth-child(1) { top: 17px }
.hamburguesa span:nth-child(2) { top: 23px }
.hamburguesa span:nth-child(3) { top: 29px }

.panel { position: fixed; inset: 0; z-index: 35; display: grid; align-content: center; padding: 96px var(--lado) 40px; background: var(--fondo); visibility: hidden; opacity: 0 }
.panel nav { display: grid; gap: 6px; counter-reset: enlace }
.panel a { display: block; overflow: clip; font-family: var(--anton); font-size: clamp(52px, 16vw, 96px); line-height: 1; text-transform: uppercase; padding-bottom: .06em }
.panel a span { display: flex; justify-content: space-between; align-items: flex-start; counter-increment: enlace }
.panel a span::after { content: "0" counter(enlace); font-family: var(--geist); font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--gris); margin-top: .6em }
.panel a[aria-current] { color: var(--acento) }
.panel .panel-pie { position: absolute; left: var(--lado); right: var(--lado); bottom: 28px; display: flex; justify-content: space-between; font-size: 13px; color: var(--gris) }

.boton { position: relative; display: inline-flex; align-items: center; gap: 16px; height: 56px; padding: 0 8px 0 26px; border-radius: 999px; background: var(--acento); color: var(--acento-txt); font-weight: 600; font-size: 16px; white-space: nowrap; transition: scale .16s ease-out, background-color .3s }
.boton:active { scale: .97 }
.boton-flecha, .ir { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none }
.boton-flecha { background: color-mix(in srgb, var(--acento-txt) 18%, transparent) }
.boton-flecha svg, .ir svg { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.boton-flecha svg + svg, .ir svg + svg { transform: translateX(-30px) }
.boton.hueco { background: transparent; color: var(--tinta); border: 1px solid var(--linea) }
.boton.hueco .boton-flecha { background: var(--boton) }

.etiqueta { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--gris) }
.etiqueta i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--acento-2) }
.etiqueta i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--acento-2); opacity: 0; pointer-events: none; animation: latido 2.4s var(--suave) infinite }
@keyframes latido { 0% { opacity: .45; scale: 1 } 70%, 100% { opacity: 0; scale: var(--latido, 3.25) } }

.gigante { font-family: var(--anton); font-weight: 400; text-transform: uppercase; line-height: .92; letter-spacing: .004em }
.linea { display: block; overflow: clip; padding: .14em 0 .1em; margin: -.14em 0 -.1em }
.linea > .dentro { display: block }
.linea.abierta { overflow: visible }
.rojo-txt { color: var(--acento-2) }

.hora { font-variant-numeric: tabular-nums; color: var(--tinta) }
.hora .d { position: relative; display: inline-block; overflow: clip; vertical-align: bottom }
.hora .d > span { display: inline-block }
.hora .d > span + span { position: absolute; left: 0; top: 0 }
.hora .d:nth-child(4) { animation: dos-puntos 2s steps(1) infinite }
@keyframes dos-puntos { 50% { opacity: .25 } }

.rodar { position: relative; display: inline-block; overflow: clip; vertical-align: top; line-height: 1.25; padding-bottom: 1px }
.rodar .r-b { position: absolute; left: 0; top: 0 }
.rodar .r-a, .rodar .r-b { display: block; white-space: nowrap }
.rodar .c { display: inline-block; white-space: pre }

.pie-grande { position: relative; z-index: 1; margin-top: clamp(80px, 14vh, 160px); border-top: 1px solid var(--linea) }
.pie-grande .envoltura { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-top: clamp(40px, 7vh, 72px); padding-bottom: 28px }
.pie-grande .pie-lema { font-family: var(--anton); text-transform: uppercase; font-size: clamp(40px, 5vw, 72px); line-height: .92 }
.pie-grande .pie-lema span { color: var(--acento) }
.pie-grande h2 { font-size: 13px; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px }
.pie-grande ul { list-style: none; display: grid; gap: 0; font-size: 16px; font-weight: 500 }
.pie-grande ul a { padding: 9px 0 }
.pie-grande ul a { display: inline-flex; align-items: center; gap: 8px; transition: color .25s }
.pie-grande ul a::after { content: "→"; content: "→" / ""; opacity: 0; translate: -6px 0; transition: opacity .25s, translate .35s var(--suave) }
.pie-grande .pie-fin { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 28px; margin-top: 12px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--gris) }

.aparece { opacity: 0; translate: 0 28px }
.aparece.visto { opacity: 1; translate: 0 0; transition: opacity .8s var(--suave), translate 1s var(--suave); transition-delay: calc(var(--d, 0) * 80ms) }

@media (hover: hover) and (pointer: fine) {
  .menu a:hover { color: var(--tinta) }
  .boton.hueco:hover { border-color: var(--gris) }
  .pie-grande ul a:hover { color: var(--acento-texto) }
  .pie-grande ul a:hover::after { opacity: 1; translate: 0 0 }
}

@media (max-width: 860px) {
  .cabeza { grid-template-columns: 1fr auto; height: 68px }
  .menu { display: none }
  .hamburguesa { display: block }
  .pie-grande .envoltura { grid-template-columns: 1fr 1fr }
  .pie-grande .pie-lema { grid-column: 1 / -1 }
  .pie-grande .pie-fin { flex-direction: column; gap: 4px }
}

@media (max-width: 420px) {
  .boton { width: 100%; justify-content: space-between }
}

@media (prefers-reduced-motion: reduce) {
  .etiqueta i::after, .hora .d:nth-child(4) { animation: none }
  .aparece { opacity: 1; translate: none }
}

.entrando :is(.cabeza > *) { opacity: 0; animation: aparecer 0s 2.5s forwards }
.vt-llega.entrando .cabeza > * { opacity: 1 }
@keyframes aparecer { to { opacity: 1 } }
.entrando :is([data-entra], [data-entra-titulo], [data-revela], [data-vista] [data-capa]) { opacity: 0; animation: aparecer 0s 2.5s forwards }
.entrando:not([data-tema="claro"]) .tema .rayos { opacity: 0 }
.entrando:not([data-tema="claro"]) .tema .astro { r: 9.5px }
.entrando:not([data-tema="claro"]) .tema .boca { cx: 16px; cy: 7.5px }
.entrando[data-tema="claro"] .tema .estrellas { opacity: 0 }
.vt-llega.entrando .menu a[aria-current] { background: var(--boton) }

.fondo-vivo { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none }


.arriba { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linea); color: var(--tinta); font-size: 13px; font-weight: 600; transition: border-color .3s, scale .16s ease-out }
.arriba svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.arriba:active { scale: .96 }
@media (hover: hover) and (pointer: fine) { .arriba:hover { border-color: var(--gris) } }

html.lenis, html.lenis body { height: auto }
.lenis.lenis-smooth { scroll-behavior: auto !important }
.lenis.lenis-stopped { overflow: hidden }
.lenis.lenis-scrolling iframe { pointer-events: none }