@font-face {
font-family: "Anton";
src: url("/assets/anton-mayus.65e453de93.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Arimo";
src: url("/assets/arimo-latin-400.c1f056f51c.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Caveat Brush";
src: url("/assets/caveat-brush-mayus.e823aaf123.woff2") format("woff2");
font-display: swap;
}
:root {
--crema: #fffff0;
--rojo: #e30613;
--negro: #000;
--tinta: #171717;
--tinta-suave: #4a463f;
--mesa: #e8e1d2;
--margen: 1rem;
--dock-abajo: max(0.75rem, env(safe-area-inset-bottom) + 0.5rem);
--alto-opcion: 2.6rem;
--alto-dock: calc(var(--alto-opcion) + 0.9rem + 2px);
--techo-dock: calc(var(--dock-abajo) + var(--alto-dock) * 0.9);
--arriba: max(0.75rem, env(safe-area-inset-top));
--proporcion: 1.95;
--banda-fraccion: 0.15;
--montado: calc((100svh - var(--arriba) - var(--techo-dock) + 0.375rem) / (var(--proporcion) - var(--banda-fraccion)));
--tope-montado: min(100% - 2 * var(--margen), 32rem, var(--alto-dock) * 0.9 / var(--banda-fraccion));
--pista-y-pie: 3.5rem;
--bajo-escenario: calc(var(--dock-abajo) + var(--alto-dock) + 0.25rem);
--encima: calc((100svh - var(--arriba) - var(--pista-y-pie) - var(--bajo-escenario)) / var(--proporcion));
--ancho: min(
100% - 2 * var(--margen),
32rem,
max(18rem, var(--encima), min(var(--montado), 41 * var(--tope-montado) - 40 * var(--montado)))
);
--curva: cubic-bezier(0.22, 1, 0.36, 1);
--curva-giro: cubic-bezier(0.34, 1.22, 0.5, 1);
--titular: "Anton", Impact, "Arial Narrow", sans-serif;
--texto: "Arimo", Arial, "Helvetica Neue", Helvetica, sans-serif;
--mano: "Caveat Brush", "Comic Sans MS", cursive;
color-scheme: light;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: radial-gradient(120% 70% at 50% 22%, #f5f0e6 0%, var(--mesa) 58%, #dcd4c2 100%) var(--mesa);
color: var(--tinta);
font-family: var(--texto);
}
::selection {
background: var(--rojo);
color: var(--crema);
}
.sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.solo-lectores {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.escenario {
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: clip;
padding: var(--arriba) 0 var(--bajo-escenario);
}
.copiar:active,
.copiar-todo:active {
scale: 0.96;
}
.copiar,
.copiar-todo {
visibility: hidden;
}
.con-js .copiar,
.con-js .copiar-todo {
visibility: visible;
}
:root:not(:has(#ver-4:checked)) .tarjeta--4 :is(.copiar, .copiar-todo) {
visibility: hidden;
}
.copiar:focus-visible,
.copiar-todo:focus-visible {
outline: 3px solid var(--rojo);
outline-offset: 2px;
}
@media (hover: hover) {
.copiar-todo:hover {
background: var(--rojo);
}
}
@media (hover: hover) and (pointer: fine) {
.pista,
.pie {
transition: opacity 0.25s var(--curva);
}
body:has(.dock--activo) :is(.pista, .pie) {
opacity: 0;
}
}
.dock {
--activo: 0;
--lupa-escala: 0.45;
position: fixed;
z-index: 10;
left: 0;
right: 0;
bottom: var(--dock-abajo);
width: fit-content;
max-width: calc(100% - 1rem);
margin-inline: auto;
padding: 0.28rem 0.4rem 0.62rem;
border: 1px solid transparent;
border-radius: 1.3rem;
scale: calc(0.9 + var(--activo) * 0.1);
transform-origin: 50% 100%;
touch-action: none;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
transition: scale 0.35s var(--curva);
}
.dock::before {
content: "";
position: absolute;
z-index: -1;
inset: -1px calc(-1px - var(--crece-der, 0px)) -1px calc(-1px - var(--crece-izq, 0px));
border: 1px solid rgb(255 255 255 / calc(0.4 + var(--activo) * 0.3));
border-radius: inherit;
background: rgb(255 255 240 / calc(0.64 + var(--activo) * 0.21));
-webkit-backdrop-filter: blur(calc(10px + var(--activo) * 10px)) saturate(calc(1.5 + var(--activo) * 0.4));
backdrop-filter: blur(calc(10px + var(--activo) * 10px)) saturate(calc(1.5 + var(--activo) * 0.4));
box-shadow:
0 calc(4px + var(--activo) * 6px) calc(18px + var(--activo) * 16px) rgb(0 0 0 / calc(0.1 + var(--activo) * 0.08)),
inset 0 1px 0 rgb(255 255 255 / 0.5);
pointer-events: none;
transition:
left 0.18s var(--curva),
right 0.18s var(--curva),
background-color 0.35s var(--curva),
border-color 0.35s var(--curva),
box-shadow 0.35s var(--curva),
-webkit-backdrop-filter 0.35s var(--curva),
backdrop-filter 0.35s var(--curva);
}
.dock.dock--activo::after {
content: "";
position: absolute;
z-index: -2;
inset: -1rem -5rem -0.75rem;
}
.dock.dock--activo,
.dock:has(:focus-visible) {
--activo: 1;
}
@media (hover: hover) {
.dock:hover {
--activo: 1;
}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.dock::before {
background: rgb(255 255 240 / calc(0.9 + var(--activo) * 0.08));
}
}
.indice {
display: flex;
gap: 0.18rem;
}
.indice__opcion {
--aumento: max(var(--lupa, 0), var(--foco, 0));
position: relative;
z-index: calc(1 + var(--aumento) * 100);
flex: none;
display: flex;
align-items: center;
justify-content: center;
gap: 0.35em;
min-height: var(--alto-opcion);
padding: 0.3rem 0.54em;
border-radius: 999px;
font: 400 clamp(0.72rem, 3.3vw, 0.92rem) / 1 var(--titular);
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
color: #2f2c27;
background: rgb(255 255 248 / calc(var(--aumento) * 0.55));
box-shadow: 0 calc(var(--aumento) * 5px) calc(var(--aumento) * 16px) rgb(0 0 0 / calc(var(--aumento) * 0.18));
opacity: calc(0.92 + var(--activo) * 0.08);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
scale: calc(1 + var(--aumento) * var(--lupa-escala));
translate: var(--corrida, 0px) calc(var(--aumento) * -0.4rem);
transform-origin: 50% 100%;
transition:
scale 0.18s var(--curva),
translate 0.18s var(--curva),
background-color 0.25s var(--curva),
box-shadow 0.25s var(--curva),
color 0.35s var(--curva),
opacity 0.35s var(--curva);
}
@media (pointer: coarse), (max-width: 36rem) {
.dock {
--lupa-escala: 0.15;
}
.indice__opcion {
--aumento: max(0, (max(var(--lupa, 0), var(--foco, 0)) - 0.65) / 0.35);
background: rgb(255 255 248 / calc(var(--aumento) * 0.97));
translate: 0 calc(var(--aumento) * -1rem);
}
}
.indice__opcion input {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
pointer-events: none;
}
.indice__opcion::before {
content: "";
flex: none;
width: 0.72em;
height: 0.72em;
border-radius: 50%;
background: var(--muestra);
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.35);
}
.indice__opcion::after {
content: "";
position: absolute;
left: 50%;
bottom: -0.44rem;
width: 0.32rem;
aspect-ratio: 1;
margin-left: -0.16rem;
border-radius: 50%;
background: var(--tinta);
opacity: 0;
transition: opacity 0.35s var(--curva);
}
.indice__opcion--1 {
--muestra: var(--crema);
}
.indice__opcion--2 {
--muestra: var(--rojo);
}
.indice__opcion--3 {
--muestra: var(--negro);
}
.indice__opcion--4 {
--muestra: radial-gradient(circle, var(--rojo) 0 34%, var(--crema) 38%);
}
@media (max-width: 23rem) {
.indice__opcion::before {
display: none;
}
}
.indice__opcion:has(:checked) {
background: #fffff8;
color: var(--tinta);
opacity: 1;
box-shadow:
0 0 0 1.5px var(--tinta),
0 calc(4px + var(--aumento) * 3px) calc(14px + var(--aumento) * 6px) rgb(0 0 0 / calc(0.1 + var(--aumento) * 0.08));
}
.indice__opcion:has(:checked)::after {
opacity: 1;
}
.indice__opcion:has(:focus-visible) {
--foco: 0.3;
outline: 3px solid var(--rojo);
outline-offset: 2px;
}
@media (hover: hover) {
.indice__opcion:hover {
color: var(--tinta);
}
html:not(.con-js) .indice__opcion:hover {
--lupa: 1;
}
html:not(.con-js) .indice__opcion:has(+ .indice__opcion:hover),
html:not(.con-js) .indice__opcion:hover + .indice__opcion {
--lupa: 0.35;
}
}
.marco {
width: var(--ancho);
container-type: inline-size;
display: flex;
flex-direction: column;
align-items: center;
}
.pila {
--franja: 3.4cqi;
--banda: calc(var(--banda-fraccion) * 100cqi);
--pad-x: 9.5cqi;
--pad-arriba: 7.5cqi;
--eje: 4.3cqi;
--radio: 2.4cqi;
--giro-1a: 106deg;
--giro-1b: 113deg;
--giro-2b: 102deg;
--giro-1c: 118deg;
--giro-2c: 109deg;
--giro-3c: 100deg;
position: relative;
width: 100%;
display: grid;
grid-template-columns: 73% 9% 9% 9%;
grid-template-rows: auto var(--banda) var(--banda) var(--banda) var(--banda);
touch-action: pan-y;
}
@media (min-width: 60rem) {
.pila {
--giro-1a: 97deg;
--giro-1b: 101deg;
--giro-2b: 94deg;
--giro-1c: 104deg;
--giro-2c: 98deg;
--giro-3c: 93deg;
}
}
.tarjeta {
position: relative;
display: grid;
grid-template-rows: subgrid;
grid-template-columns: minmax(0, 1fr);
overflow: hidden;
border-radius: var(--radio);
background: var(--fondo);
color: var(--letra);
transform-origin: var(--eje) var(--eje);
transition:
rotate 0.95s var(--curva-giro),
scale 0.45s var(--curva);
box-shadow:
0.3cqi 0.4cqi 0.6cqi rgb(0 0 0 / 0.12),
1.2cqi 1.8cqi 4cqi rgb(0 0 0 / 0.26);
animation: cerrar-abanico var(--intro-dur) var(--curva) var(--intro-retraso) backwards;
}
.tarjeta::after {
content: "";
position: absolute;
inset: 0 0 0 auto;
width: var(--franja);
background: repeating-conic-gradient(var(--cuadro) 0 25%, var(--fondo) 0 50%) 0 0 / var(--franja) var(--franja);
pointer-events: none;
}
.tarjeta--1 {
--fondo: var(--crema);
--letra: var(--tinta);
--cuadro: var(--negro);
--destello: var(--rojo);
--punto: var(--rojo);
--tam-banda: 11cqi;
--intro-giro: 100deg;
--intro-dur: 1.15s;
--intro-retraso: 0.22s;
grid-column: 1 / 2;
grid-row: 1 / 3;
z-index: 4;
}
.tarjeta--2 {
--fondo: var(--rojo);
--letra: var(--crema);
--cuadro: var(--crema);
--destello: var(--crema);
--punto: var(--negro);
--tam-banda: 8.4cqi;
--intro-giro: 74deg;
--intro-dur: 1.05s;
--intro-retraso: 0.14s;
--transicion-retraso: 0.06s;
grid-column: 1 / 3;
grid-row: 1 / 4;
z-index: 3;
}
.tarjeta--3 {
--fondo: var(--negro);
--letra: var(--crema);
--cuadro: var(--crema);
--destello: var(--rojo);
--punto: var(--rojo);
--tam-banda: 8.8cqi;
--intro-giro: 48deg;
--intro-dur: 0.98s;
--intro-retraso: 0.08s;
--transicion-retraso: 0.12s;
grid-column: 1 / 4;
grid-row: 1 / 5;
z-index: 2;
-webkit-font-smoothing: antialiased;
}
.tarjeta--4 {
--fondo: var(--crema);
--letra: var(--tinta);
--cuadro: var(--negro);
--destello: var(--rojo);
--punto: var(--rojo);
--tam-banda: 9.2cqi;
--intro-giro: 22deg;
--intro-dur: 0.9s;
--intro-retraso: 0.03s;
grid-column: 1 / 5;
grid-row: 1 / 6;
z-index: 1;
}
.tarjeta--2 {
-webkit-font-smoothing: antialiased;
}
.tarjeta--2,
.tarjeta--3 {
transition-delay: var(--transicion-retraso);
}
@keyframes cerrar-abanico {
from {
rotate: var(--intro-giro);
}
}
.directo .tarjeta {
animation: none;
}
.remache {
position: absolute;
z-index: 5;
left: var(--eje);
top: var(--eje);
width: 3.3cqi;
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background: radial-gradient(circle at 36% 32%, #fffef8 0 10%, #d4cfc3 28%, #938e82 62%, #4f4b44 100%);
box-shadow:
0 0.25cqi 0.45cqi rgb(0 0 0 / 0.45),
inset 0 0 0 0.28cqi rgb(0 0 0 / 0.16);
pointer-events: none;
}
.tirador {
position: absolute;
inset: 0;
z-index: 4;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
:root:has(#ver-1:checked) .tarjeta--1 .tirador,
:root:has(#ver-2:checked) .tarjeta--2 .tirador,
:root:has(#ver-3:checked) .tarjeta--3 .tirador,
:root:has(#ver-4:checked) .tarjeta--4 .tirador {
display: none;
}
:root:has(#ver-2:checked) .tarjeta--1 {
rotate: var(--giro-1a);
}
:root:has(#ver-3:checked) .tarjeta--1 {
rotate: var(--giro-1b);
}
:root:has(#ver-3:checked) .tarjeta--2 {
rotate: var(--giro-2b);
}
:root:has(#ver-4:checked) .tarjeta--1 {
rotate: var(--giro-1c);
}
:root:has(#ver-4:checked) .tarjeta--2 {
rotate: var(--giro-2c);
}
:root:has(#ver-4:checked) .tarjeta--3 {
rotate: var(--giro-3c);
}
@media (hover: hover) and (pointer: fine) {
:root:has(#ver-1:checked) .pila:has(:is(.tarjeta--2, .tarjeta--3, .tarjeta--4) .tirador:hover) .tarjeta--1,
:root:has(#ver-2:checked) .pila:has(:is(.tarjeta--3, .tarjeta--4) .tirador:hover) .tarjeta--2,
:root:has(#ver-3:checked) .pila:has(.tarjeta--4 .tirador:hover) .tarjeta--3 {
rotate: 5deg;
}
:root:has(#ver-1:checked) .pila:has(:is(.tarjeta--3, .tarjeta--4) .tirador:hover) .tarjeta--2,
:root:has(#ver-2:checked) .pila:has(.tarjeta--4 .tirador:hover) .tarjeta--3 {
rotate: 3deg;
}
:root:has(#ver-1:checked) .pila:has(.tarjeta--4 .tirador:hover) .tarjeta--3 {
rotate: 2deg;
}
:root:has(#ver-2:checked) .pila:has(.tarjeta--1 .tirador:hover) .tarjeta--1 {
rotate: calc(var(--giro-1a) - 8deg);
}
:root:has(#ver-3:checked) .pila:has(.tarjeta--1 .tirador:hover) .tarjeta--1 {
rotate: calc(var(--giro-1b) - 8deg);
}
:root:has(#ver-3:checked) .pila:has(.tarjeta--2 .tirador:hover) .tarjeta--2 {
rotate: calc(var(--giro-2b) - 8deg);
}
:root:has(#ver-4:checked) .pila:has(.tarjeta--1 .tirador:hover) .tarjeta--1 {
rotate: calc(var(--giro-1c) - 8deg);
}
:root:has(#ver-4:checked) .pila:has(.tarjeta--2 .tirador:hover) .tarjeta--2 {
rotate: calc(var(--giro-2c) - 8deg);
}
:root:has(#ver-4:checked) .pila:has(.tarjeta--3 .tirador:hover) .tarjeta--3 {
rotate: calc(var(--giro-3c) - 8deg);
}
}
.tarjeta::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background: linear-gradient(
112deg,
transparent 34%,
rgb(0 0 0 / 0.07) 43%,
rgb(255 255 255 / 0.38) 50%,
rgb(0 0 0 / 0.04) 56%,
transparent 64%
)
no-repeat;
background-size: 300% 100%;
background-position: 0% 0;
opacity: 0;
transition: opacity 0.4s var(--curva);
}
.tarjeta.alzada {
scale: 1.022;
}
.tarjeta.en-vuelo::before {
animation: brillo 0.95s var(--curva);
}
@keyframes brillo {
0% {
background-position: 0% 0;
opacity: 0;
}
25% {
opacity: 1;
}
100% {
background-position: 100% 0;
opacity: 0;
}
}
.pila.asomando .tarjeta--1 {
rotate: 9deg;
}
.pila.arrastrando {
cursor: grabbing;
user-select: none;
}
.pila.arrastrando .tarjeta {
rotate: var(--arrastre, 0deg) !important;
scale: calc(1 + var(--alza, 0) * 0.022);
transition: none !important;
}
.pila.arrastrando .tarjeta::before {
opacity: calc(var(--alza, 0) * 0.9);
background-position: calc(var(--avance, 0) * 100%) 0;
transition: none;
}
.pila.soltando .tarjeta {
transition-delay: 0s !important;
}
.pila img {
-webkit-user-drag: none;
user-select: none;
}
@media (hover: hover) and (pointer: fine) {
.pila {
cursor: grab;
}
}
.contenido {
grid-row: 1 / -2;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4.8cqi;
padding: var(--pad-arriba) calc(var(--franja) + 4cqi) 3cqi var(--pad-x);
}
.banda {
grid-row: -2 / -1;
margin: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 2.8cqi;
padding: 0 calc(var(--franja) + 2.6cqi) 0.4cqi var(--pad-x);
font: 400 var(--tam-banda) / 1 var(--titular);
text-transform: uppercase;
letter-spacing: 0.005em;
white-space: nowrap;
}
.punto {
position: relative;
flex: none;
width: 9.6cqi;
aspect-ratio: 1;
border-radius: 50%;
background: var(--punto);
}
.punto::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 0.55cqi solid var(--punto);
opacity: 0;
}
:root:has(#ver-1:checked) .tarjeta--2 .punto::after,
:root:has(#ver-2:checked) .tarjeta--3 .punto::after,
:root:has(#ver-3:checked) .tarjeta--4 .punto::after {
animation: latido 2.6s var(--curva) 1.8s infinite;
}
@keyframes latido {
0% {
transform: scale(1);
opacity: 0.85;
}
70%,
100% {
transform: scale(1.6);
opacity: 0;
}
}
.seccion__titulo {
margin: 0 0 2cqi;
display: flex;
align-items: center;
gap: 5cqi;
font: 400 7.2cqi/1.05 var(--titular);
text-transform: uppercase;
letter-spacing: 0.005em;
}
.destello {
flex: none;
width: 6.6cqi;
height: 6.6cqi;
fill: var(--destello);
animation: destellar 6s var(--curva) infinite;
}
.seccion--2 .destello {
animation-delay: 2s;
}
.seccion--3 .destello {
animation-delay: 4s;
}
@keyframes destellar {
0%,
78%,
100% {
transform: scale(1) rotate(0deg);
}
86% {
transform: scale(1.25) rotate(45deg);
}
94% {
transform: scale(0.94) rotate(90deg);
}
}
.lista {
max-width: var(--ancho-lista, 100%);
margin: 0;
padding: 0;
list-style: none;
font-size: max(12px, 3.9cqi);
line-height: 1.32;
letter-spacing: 0.012em;
text-transform: uppercase;
}
.lista__fila {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 3cqi;
}
.lista__precio {
flex: none;
text-align: right;
font-variant-numeric: tabular-nums;
}
.escena {
position: relative;
display: flex;
align-items: flex-end;
}
.fantasma {
flex: none;
display: block;
width: var(--ancho-fantasma);
transform-origin: 50% 92%;
animation: patinar 3.4s ease-in-out infinite;
}
.fantasma img {
display: block;
width: 100%;
height: auto;
}
@keyframes patinar {
0%,
100% {
transform: translateX(0) rotate(0deg);
}
50% {
transform: translateX(1.4cqi) rotate(-1.8deg);
}
}
.nota {
margin: 0;
font-family: var(--mano);
line-height: 0.98;
text-transform: uppercase;
text-align: center;
}
.nota__texto span {
display: block;
}
.tarjeta--1 .lista {
--ancho-lista: 50cqi;
}
.tarjeta--1 .escena {
margin-top: auto;
--ancho-fantasma: 27cqi;
}
.pensamiento {
position: absolute;
left: 26cqi;
bottom: 14.5cqi;
width: 8cqi;
fill: var(--crema);
stroke: var(--tinta);
stroke-width: 1.6;
overflow: visible;
}
.pensamiento circle {
animation: pensar 2.4s ease-in-out infinite;
}
.pensamiento circle:nth-child(2) {
animation-delay: 0.25s;
}
.pensamiento circle:nth-child(3) {
animation-delay: 0.5s;
}
@keyframes pensar {
0%,
65%,
100% {
opacity: 0.35;
}
20%,
45% {
opacity: 1;
}
}
.nota--burbuja {
position: relative;
width: 18cqi;
aspect-ratio: 120 / 150;
margin: 0 0 10cqi 8cqi;
display: grid;
place-items: center;
font-size: 4.4cqi;
color: var(--tinta);
}
.burbuja {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
fill: var(--crema);
stroke: var(--tinta);
stroke-width: 3.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.burbuja__trazo {
fill: none;
stroke-width: 1.8;
}
.nota--burbuja .nota__texto {
position: relative;
rotate: -5deg;
}
.tarjeta--2 .lista {
--ancho-lista: 61cqi;
}
.tarjeta--2 .contenido {
justify-content: space-between;
}
.tarjeta--2 .seccion--1 {
order: 1;
}
.tarjeta--2 .escena {
order: 2;
gap: 6cqi;
--ancho-fantasma: 34cqi;
}
.tarjeta--2 .seccion--2 {
order: 3;
}
.tarjeta--2 .nota {
margin-bottom: 9cqi;
font-size: 6.3cqi;
color: var(--crema);
rotate: 6deg;
}
.tarjeta--3 .contenido {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"salados salados"
"dulces dulces"
"extras fantasma";
align-content: space-between;
column-gap: 2cqi;
}
.tarjeta--3 .seccion--1 {
grid-area: salados;
--ancho-lista: 72cqi;
}
.tarjeta--3 .seccion--2 {
grid-area: dulces;
--ancho-lista: 54cqi;
}
.tarjeta--3 .seccion--3 {
grid-area: extras;
align-self: end;
--ancho-lista: 38cqi;
}
.tarjeta--3 .seccion--3 .lista__fila + .lista__fila {
margin-top: 0.45em;
}
.tarjeta--3 .escena {
grid-area: fantasma;
align-self: end;
margin-right: 4.6cqi;
--ancho-fantasma: 32cqi;
}
.tarjeta--3 .fantasma {
animation-duration: 4.2s;
animation-delay: -1.2s;
}
.tarjeta--2 .fantasma {
animation-duration: 2.6s;
}
.banda--doble .banda__texto {
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 0.94;
}
.banda__arriba {
font-size: 0.62em;
letter-spacing: 0.04em;
}
.bajo-dock .tarjeta--4 > .banda {
color: transparent;
}
.bajo-dock .tarjeta--4 > .banda > .punto {
visibility: hidden;
}
.tarjeta--4 .contenido {
justify-content: space-between;
padding-right: 11.5cqi;
}
.datos {
--boton-dato: max(2.5rem, 9cqi);
margin: 0;
padding: 1cqi 3.2cqi;
border: 0.4cqi dashed rgb(23 23 23 / 0.45);
border-radius: 2.4cqi;
background: #f7f2e1;
}
.dato {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(var(--boton-dato) + 2.4cqi);
padding: 2.5cqi calc(var(--boton-dato) + 2.4cqi) 2.5cqi 0;
}
.dato + .dato {
border-top: 0.3cqi dashed rgb(23 23 23 / 0.25);
}
.dato dt {
font-size: max(11px, 2.8cqi);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tinta-suave);
}
.dato dd {
margin: 0.7cqi 0 0;
}
.dato__valor {
font-size: max(14px, 4.4cqi);
overflow-wrap: anywhere;
user-select: all;
}
.copiar {
position: absolute;
top: 50%;
right: 0;
translate: 0 -50%;
display: grid;
place-items: center;
width: var(--boton-dato);
aspect-ratio: 1;
padding: 0;
border: 0.45cqi solid var(--tinta);
border-radius: 2cqi;
background: transparent;
color: var(--tinta);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
background-color 0.2s var(--curva),
color 0.2s var(--curva),
scale 0.2s var(--curva);
}
.copiar .icono {
width: 52%;
height: 52%;
}
@media (hover: hover) {
.copiar:hover {
background: var(--tinta);
color: var(--crema);
}
}
.copiar.copiado,
.copiar-todo.copiado {
background: var(--rojo);
border-color: var(--rojo);
color: var(--crema);
}
.copiar-todo {
margin-top: 4cqi;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 2.4cqi;
min-height: max(3rem, 12cqi);
padding: 0 4cqi;
border: 0;
border-radius: 999px;
background: var(--tinta);
color: var(--crema);
font: 400 max(15px, 4.8cqi) / 1 var(--titular);
text-transform: uppercase;
letter-spacing: 0.03em;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
background-color 0.25s var(--curva),
scale 0.25s var(--curva);
}
.copiar-todo .icono {
width: 1.15em;
height: 1.15em;
flex: none;
}
.tarjeta--4 .escena {
align-items: center;
gap: 4cqi;
--ancho-fantasma: 28cqi;
}
.tarjeta--4 .nota {
font-size: 6.6cqi;
color: var(--tinta);
rotate: -5deg;
}
.aviso {
position: fixed;
z-index: 20;
left: 50%;
bottom: calc(var(--dock-abajo) + var(--alto-dock) + 0.75rem);
max-width: calc(100% - 2rem);
margin: 0;
padding: 0.75rem 1.15rem;
border-radius: 999px;
background: var(--tinta);
color: var(--crema);
font-size: 0.92rem;
line-height: 1.3;
text-align: center;
box-shadow: 0 10px 30px rgb(0 0 0 / 0.28);
opacity: 0;
translate: -50% 1rem;
pointer-events: none;
transition:
opacity 0.3s var(--curva),
translate 0.3s var(--curva);
}
.aviso:empty {
display: none;
}
.aviso--visible {
opacity: 1;
translate: -50% 0;
}
.pista {
margin: 0.75rem 0 0;
display: flex;
align-items: center;
gap: 0.5rem;
font: 400 1.2rem/1 var(--mano);
text-transform: uppercase;
color: var(--tinta-suave);
rotate: -2deg;
}
.bajo-dock + .pista {
margin-top: 2rem;
}
.pista__flecha {
width: 2rem;
height: 1.25rem;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
animation: deslizar 2.2s var(--curva) 2s infinite;
}
@keyframes deslizar {
0%,
55%,
100% {
translate: 0 0;
}
25% {
translate: -0.45rem 0;
}
}
.pie {
margin-top: auto;
padding-top: 0.5rem;
width: var(--ancho);
text-align: center;
font-size: 0.78rem;
letter-spacing: 0.02em;
color: var(--tinta-suave);
}
.pie p {
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
.tarjeta {
animation: none;
transition: none;
}
.tarjeta.alzada {
scale: none;
}
.tarjeta::before {
display: none;
}
.indice__opcion {
scale: none;
translate: none;
}
.dock::before {
inset: -1px;
}
.dock,
.dock::before,
.indice__opcion,
.indice__opcion::after,
.aviso,
.copiar,
.copiar-todo {
transition: none;
}
.fantasma,
.destello,
.pensamiento circle,
.punto::after,
.pista__flecha {
animation: none !important;
}
}