@font-face { font-family: "DM Sans"; src: url(texto.woff2) format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(serif.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(serif-i.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Syne"; src: url(display.woff2) format("woff2"); font-weight: 700 800; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(mono.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; font-family: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 22px; line-height: 26px; font-weight: 470; color: #000; background: #000; }
a { color: #fff; text-decoration: none; }
a:hover { color: grey; }
a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }
img { display: block; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }


.Info { position: fixed; top: 0; left: 0; width: 100%; padding: 20px; color: #fff; letter-spacing: .02em; mix-blend-mode: difference; transition: opacity .5s ease; z-index: 1000; pointer-events: auto; }
.Info a { display: inline-block; }
.Container { width: 100%; background: #000; opacity: 1; transition: opacity .5s ease; }
.secu { height: 50vh; background: #000; }


.aviso { position: fixed; right: 20px; bottom: 16px; z-index: 1001; margin: 0; font-size: 12px; line-height: 16px; letter-spacing: .02em; color: #fff; mix-blend-mode: difference; opacity: .85; }
.aviso a { color: #fff; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.aviso a:hover { color: #fff; opacity: .7; }


.placa { position: relative; display: block; width: 100%; margin: 0; overflow: hidden; background: #000; container-type: inline-size; content-visibility: auto; }
.r169 { aspect-ratio: 16 / 9; contain-intrinsic-size: auto 56.25vw; }
.r43 { aspect-ratio: 4 / 3; contain-intrinsic-size: auto 75vw; }
.r32 { aspect-ratio: 3 / 2; contain-intrinsic-size: auto 66.67vw; }
.r21 { aspect-ratio: 2 / 1; contain-intrinsic-size: auto 50vw; }
.r54 { aspect-ratio: 5 / 4; contain-intrinsic-size: auto 80vw; }
.r1610 { aspect-ratio: 16 / 10; contain-intrinsic-size: auto 62.5vw; }

.fo { position: absolute; inset: -6%; background-size: cover; background-position: center; filter: blur(14px) saturate(1.2); }
.fo.abajo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(120, 120, 118, .6) 100%); }


.c { position: absolute; overflow: hidden; border-radius: .55cqw; container-type: inline-size; background: var(--bg, #fff); color: var(--fg, #111); }
.c.b { outline: 1px solid rgba(255, 255, 255, .18); outline-offset: -1px; }
.c > img, .c .pg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) contrast(1.03); }
.f { background: #111; }
.mono { font-family: "DM Mono", ui-monospace, Menlo, monospace; font-style: normal; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; }
.ser { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: -.01em; }
.dis { font-family: "Syne", "DM Sans", sans-serif; font-weight: 800; letter-spacing: -.045em; line-height: .84; }
.c i, .c b { font-style: normal; font-weight: inherit; }
.mk { display: block; }


.ov { position: absolute; left: 50%; top: 50%; width: var(--t, 22cqw); height: var(--t, 22cqw); transform: translate(-50%, -50%); color: var(--fg, #fff); }
.ov .mk { width: 100%; height: 100%; }
.ov2, .ov3 { position: absolute; left: 2.2cqw; bottom: 2.2cqw; font-size: 1.1cqw; color: var(--fg, #fff); }
.ov3 { bottom: auto; top: 2.2cqw; }


.k-palabra .a, .k-palabra .b { position: absolute; left: 5cqw; right: 5cqw; font-size: 3.1cqw; color: var(--fg); }
.k-palabra .a { top: 5cqw; }
.k-palabra .b { bottom: 5cqw; }
.k-palabra .w { position: absolute; white-space: nowrap; color: var(--fg); }
.k-palabra .w.v { writing-mode: vertical-rl; transform: rotate(180deg); transform-origin: center; white-space: nowrap; }

.k-palabra .rg { position: absolute; left: 5cqw; right: 5cqw; height: 0; border-top: .45cqw solid currentColor; color: var(--fg); }


.k-forma .sv { position: absolute; inset: 0; width: 100%; height: 100%; }
.k-forma .a, .k-forma .b { position: absolute; left: 5cqw; right: 5cqw; font-size: 3cqw; color: var(--fg); }
.k-forma .a { top: 5cqw; }
.k-forma .b { bottom: 5cqw; }
.k-forma .ti { position: absolute; left: 5cqw; right: 5cqw; bottom: 12cqw; font-size: 11cqw; line-height: .95; color: var(--fg); }


.k-portada { background: var(--bg); color: var(--fg); }
.k-portada .lom { position: absolute; left: 0; top: 0; bottom: 0; width: 5cqw; background: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .06) 55%, rgba(255, 255, 255, .06)); }
.k-portada.mc::after { content: ""; position: absolute; inset: 6cqw 6cqw 6cqw 9cqw; border: .35cqw solid currentColor; opacity: .55; pointer-events: none; }
.k-portada .s { position: absolute; left: 11.5cqw; right: 8cqw; top: 9cqw; font-size: 3cqw; }
.k-portada .t { position: absolute; left: 11.5cqw; right: 8cqw; top: 17cqw; line-height: .95; }
.k-portada .m { position: absolute; left: 11.5cqw; bottom: 18cqw; width: 20cqw; height: 20cqw; }
.k-portada .pie { position: absolute; left: 11.5cqw; right: 8cqw; bottom: 9cqw; font-size: 2.8cqw; }

.k-portada.vb .bl { position: absolute; left: 5cqw; right: 0; top: 0; height: 55%; background: var(--ac); }
.k-portada.vb .bl .m { position: absolute; left: 50%; top: 50%; width: 46%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }
.k-portada.vb .s { top: 59%; }
.k-portada.vb .t { top: 64%; }
.k-portada.vb .pie { bottom: 6cqw; }
.k-portada.vc .ini { position: absolute; left: 6cqw; bottom: -24cqw; font-size: 135cqw; line-height: 1; color: var(--ac); letter-spacing: -.04em; }
.k-portada.vc .s { top: 7cqw; }
.k-portada.vc .t { top: 14cqw; }
.k-portada.vc .pie { left: auto; right: 6cqw; bottom: 6cqw; text-align: right; z-index: 2; }


.k-ft { background: #111; color: var(--fg); }
.k-ft .vel { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .5)); }
.k-ft .a { position: absolute; left: 5cqw; top: 5cqw; right: 5cqw; font-size: 3cqw; }
.k-ft .t { position: absolute; left: 5cqw; right: 5cqw; bottom: 5cqw; font-size: 12cqw; line-height: .95; }


.k-pliego { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); color: var(--fg); }
.k-pliego .pg { position: relative; overflow: hidden; }
.k-pliego .pg .mono { position: absolute; left: 4cqw; bottom: 3.4cqw; font-size: 1.7cqw; color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, .35); }
.k-pliego .tx { padding: 5cqw 5cqw 4cqw 6cqw; }
.k-pliego .t { display: block; font-size: 5.6cqw; line-height: 1; margin-bottom: 3cqw; }
.k-pliego .co { columns: 2; column-gap: 2.4cqw; font-size: 1.5cqw; line-height: 1.42; text-align: left; hyphens: auto; }
.k-pliego .co p { margin: 0 0 1.2em; break-inside: avoid-column; }
.k-pliego .gu { position: absolute; left: 50%; top: 0; bottom: 0; width: 6cqw; transform: translateX(-50%); background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .22) 50%, rgba(0, 0, 0, 0)); pointer-events: none; }


.k-texto { background: var(--bg); color: var(--fg); padding: 4.5cqw 5cqw; }
.k-texto .nv { display: flex; gap: 3cqw; font-size: 2.4cqw; margin-bottom: 9cqw; color: color-mix(in srgb, var(--fg) 65%, transparent); }
.k-texto .nv i:first-child { color: var(--ac, var(--fg)); }
.k-texto .t { display: block; font-size: 10.5cqw; line-height: .95; margin-bottom: 5cqw; }
.k-texto .co { columns: 2; column-gap: 3cqw; font-size: 2.35cqw; line-height: 1.4; }
.k-texto .co p { margin: 0 0 1em; break-inside: avoid-column; }


.k-etiq { display: grid; place-items: center; background: var(--bg); color: var(--fg); }
.k-etiq .et { position: relative; width: 78%; display: grid; justify-items: center; align-content: center; text-align: center; gap: 4cqw; border: .5cqw solid currentColor; padding: 8cqw 4cqw; }
.k-etiq .et.circulo { aspect-ratio: 1; border-radius: 50%; padding: 0 8cqw; width: 84%; }
.k-etiq .et.rect { aspect-ratio: auto; border-radius: 1.6cqw; box-shadow: inset 0 0 0 1.4cqw var(--bg), inset 0 0 0 1.9cqw currentColor; }
.k-etiq .m { width: 14cqw; height: 14cqw; }
.k-etiq .t { font-size: 10cqw; line-height: .95; }
.k-etiq .s { font-size: 2.7cqw; }


.k-bolsa { background: var(--bg); color: var(--fg); background-image: radial-gradient(rgba(0, 0, 0, .05) 1px, transparent 1.4px); background-size: 6px 6px; }
.k-bolsa .pl { position: absolute; left: 0; right: 0; top: 0; height: 15%; background: linear-gradient(to bottom, rgba(0, 0, 0, .13), rgba(0, 0, 0, .04)); border-bottom: .3cqw solid rgba(0, 0, 0, .25); }
.k-bolsa .m { position: absolute; left: 50%; top: 52%; width: 40%; aspect-ratio: 1; transform: translate(-50%, -50%); height: auto; }
.k-bolsa .s { position: absolute; left: 0; right: 0; bottom: 9cqw; text-align: center; font-size: 3.4cqw; }


.k-marca { display: grid; place-items: center; background: var(--bg); color: var(--fg); }
.k-marca .m { width: 46%; height: auto; aspect-ratio: 1; }
.k-marca .s { position: absolute; bottom: 5cqw; left: 0; right: 0; text-align: center; font-size: 3cqw; }


.k-espec { background: var(--bg); color: var(--fg); padding: 5cqw; }
.k-espec .a { font-size: 3cqw; opacity: .8; }
.k-espec .aa { position: absolute; left: 3cqw; top: 6cqw; font-size: 78cqw; line-height: 1; color: var(--ac, var(--fg)); }
.k-espec .al { position: absolute; left: 5cqw; right: 5cqw; bottom: 5cqw; display: grid; gap: 1.6cqw; font-size: 2.7cqw; text-transform: none; letter-spacing: .01em; }
.k-espec .al i { font-style: normal; }


.k-paleta { display: grid; grid-auto-flow: row; grid-auto-rows: 1fr; background: var(--bg); }
.k-paleta > div { display: flex; align-items: flex-end; padding: 2.6cqw 4cqw; }
.k-paleta .mono { font-size: 3cqw; }

@media (orientation: portrait) {
  .Info { padding: 10px; font-size: 15px; line-height: 17px; }
  .aviso { right: 10px; bottom: 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .Info, .Container { transition: none; }
}