@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;
--ancho: min(100% - 2 * var(--margen), 32rem, max(26rem, (100svh - 10rem) * 0.47));
--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;
}
.escenario {
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: clip;
padding: max(0.9rem, env(safe-area-inset-top)) 0 max(1.25rem, env(safe-area-inset-bottom));
}
.cabecera {
width: var(--ancho);
display: grid;
gap: 0.85rem;
margin-bottom: 1.1rem;
}
.cabecera__fila {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.marca {
margin: 0;
display: flex;
align-items: center;
gap: 0.55rem;
font: 400 clamp(1.5rem, 7.4vw, 2.05rem) / 1 var(--titular);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.01em;
}
.marca__logo img {
display: block;
width: 2.5rem;
height: auto;
}
@media (max-width: 25rem) {
.marca__logo {
display: none;
}
}
.transferir {
flex: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2.75rem;
padding: 0.35rem 0.9rem 0.35rem 0.7rem;
border: 0;
border-radius: 999px;
background: var(--tinta);
color: var(--crema);
cursor: pointer;
text-align: left;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.25s var(--curva), scale 0.25s var(--curva);
}
.transferir .icono {
width: 1.3rem;
height: 1.3rem;
flex: none;
}
.transferir__texto {
display: grid;
gap: 0.12rem;
}
.transferir__texto > span:first-child {
font: 400 0.98rem/1 var(--titular);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.transferir__texto > span:last-child {
font: 400 0.6rem/1 var(--texto);
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.85;
}
.transferir:active,
.copiar:active,
.copiar-todo:active {
scale: 0.96;
}
.transferir,
.copiar,
.copiar-todo {
visibility: hidden;
}
.con-js .transferir,
.con-js .copiar,
.con-js .copiar-todo {
visibility: visible;
}
.transferir:focus-visible,
.copiar:focus-visible,
.copiar-todo:focus-visible {
outline: 3px solid var(--rojo);
outline-offset: 2px;
}
@media (hover: hover) {
.transferir:hover,
.copiar-todo:hover {
background: var(--rojo);
}
}
.indice {
display: flex;
gap: 0.2rem;
padding: 0.22rem;
border-radius: 999px;
background: rgb(23 23 23 / 0.07);
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08);
}
.indice__opcion {
position: relative;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 0.35em;
min-height: 2.75rem;
padding: 0.3rem 0.42em;
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: var(--tinta-suave);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
background-color 0.35s var(--curva),
color 0.35s var(--curva),
box-shadow 0.35s var(--curva);
}
.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--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);
box-shadow:
0 1px 2px rgb(0 0 0 / 0.14),
0 4px 14px rgb(0 0 0 / 0.08);
}
.indice__opcion:has(:focus-visible) {
outline: 3px solid var(--rojo);
outline-offset: 2px;
}
@media (hover: hover) {
.indice__opcion:not(:has(:checked)):hover {
background: rgb(255 255 248 / 0.55);
color: var(--tinta);
}
}
.marco {
width: var(--ancho);
container-type: inline-size;
display: flex;
flex-direction: column;
align-items: center;
}
.pila {
--franja: 3.4cqi;
--banda: 16.5cqi;
--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: 10cqi;
--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: 5.2cqi;
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 2.3cqi;
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.37;
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: 17cqi;
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: 19.5cqi;
aspect-ratio: 120 / 150;
margin: 0 0 13cqi 8cqi;
display: grid;
place-items: center;
font-size: 4.7cqi;
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: 40cqi;
}
.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;
}
.tarjeta--4 .contenido {
justify-content: space-between;
padding-right: 11.5cqi;
}
.datos {
margin: 0;
padding: 1cqi 3.2cqi;
border: 0.4cqi dashed rgb(23 23 23 / 0.45);
border-radius: 2.4cqi;
background: #f7f2e1;
}
.dato {
padding: 2cqi 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.6cqi 0 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2cqi;
min-height: max(2.5rem, 9cqi);
}
.dato__valor {
font-size: max(14px, 4.4cqi);
overflow-wrap: anywhere;
user-select: all;
}
.copiar {
flex: none;
display: grid;
place-items: center;
width: max(2.5rem, 9cqi);
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: 24cqi;
}
.tarjeta--4 .nota {
font-size: 6cqi;
color: var(--tinta);
rotate: -5deg;
}
.aviso {
position: fixed;
z-index: 20;
left: 50%;
bottom: max(1rem, calc(env(safe-area-inset-bottom) + 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: 1.1rem 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;
}
.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: 1.6rem;
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,
.aviso,
.transferir,
.copiar,
.copiar-todo {
transition: none;
}
.fantasma,
.destello,
.pensamiento circle,
.punto::after,
.pista__flecha {
animation: none !important;
}
}