@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.5));
--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;
}
.marca {
margin: 0;
display: flex;
align-items: center;
gap: 0.55rem;
font: 400 2.05rem/1 var(--titular);
text-transform: uppercase;
letter-spacing: 0.01em;
}
.marca__logo img {
display: block;
width: 2.5rem;
height: auto;
}
.marca__sub {
margin-left: auto;
font: 400 0.72rem/1 var(--texto);
letter-spacing: 0.32em;
color: var(--tinta-suave);
}
.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.4em;
min-height: 2.75rem;
padding: 0.3rem 0.55em;
border-radius: 999px;
font: 400 clamp(0.76rem, 3.5vw, 0.95rem) / 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: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: 18.7cqi;
--pad-x: 9.5cqi;
--pad-arriba: 7.5cqi;
--eje: 4.3cqi;
--radio: 2.4cqi;
--giro-solo: 106deg;
--giro-arriba: 113deg;
--giro-medio: 102deg;
position: relative;
width: 100%;
display: grid;
grid-template-columns: 75% 12.5% 12.5%;
grid-template-rows: auto var(--banda) var(--banda) var(--banda);
touch-action: pan-y;
}
@media (min-width: 60rem) {
.pila {
--giro-solo: 97deg;
--giro-arriba: 101deg;
--giro-medio: 94deg;
}
}
.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: transform 0.95s var(--curva-giro);
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.2s;
grid-column: 1 / 2;
grid-row: 1 / 3;
z-index: 3;
}
.tarjeta--2 {
--fondo: var(--rojo);
--letra: var(--crema);
--cuadro: var(--crema);
--destello: var(--crema);
--punto: var(--negro);
--tam-banda: 8.8cqi;
--intro-giro: 66deg;
--intro-dur: 1.05s;
--intro-retraso: 0.12s;
--transicion-retraso: 0.06s;
grid-column: 1 / 3;
grid-row: 1 / 4;
z-index: 2;
}
.tarjeta--3 {
--fondo: var(--negro);
--letra: var(--crema);
--cuadro: var(--crema);
--destello: var(--rojo);
--punto: var(--rojo);
--tam-banda: 10cqi;
--intro-giro: 32deg;
--intro-dur: 0.95s;
--intro-retraso: 0.05s;
grid-column: 1 / 4;
grid-row: 1 / 5;
z-index: 1;
-webkit-font-smoothing: antialiased;
}
.tarjeta--2 {
-webkit-font-smoothing: antialiased;
transition-delay: var(--transicion-retraso);
}
@keyframes cerrar-abanico {
from {
transform: 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 {
display: none;
}
:root:has(#ver-2:checked) .tarjeta--1 {
transform: rotate(var(--giro-solo));
}
:root:has(#ver-3:checked) .tarjeta--1 {
transform: rotate(var(--giro-arriba));
}
:root:has(#ver-3:checked) .tarjeta--2 {
transform: rotate(var(--giro-medio));
}
@media (hover: hover) and (pointer: fine) {
:root:has(#ver-1:checked) .pila:has(.tarjeta--2 .tirador:hover) .tarjeta--1,
:root:has(#ver-1:checked) .pila:has(.tarjeta--3 .tirador:hover) .tarjeta--1,
:root:has(#ver-2:checked) .pila:has(.tarjeta--3 .tirador:hover) .tarjeta--2 {
transform: rotate(5deg);
}
:root:has(#ver-1:checked) .pila:has(.tarjeta--3 .tirador:hover) .tarjeta--2 {
transform: rotate(3deg);
}
:root:has(#ver-2:checked) .pila:has(.tarjeta--1 .tirador:hover) .tarjeta--1 {
transform: rotate(calc(var(--giro-solo) - 8deg));
}
:root:has(#ver-3:checked) .pila:has(.tarjeta--1 .tirador:hover) .tarjeta--1 {
transform: rotate(calc(var(--giro-arriba) - 8deg));
}
:root:has(#ver-3:checked) .pila:has(.tarjeta--2 .tirador:hover) .tarjeta--2 {
transform: rotate(calc(var(--giro-medio) - 8deg));
}
}
.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: 10.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 {
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: 36cqi;
}
.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: 75cqi;
}
.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: 6.4cqi;
--ancho-fantasma: 40cqi;
}
.tarjeta--3 .fantasma {
animation-duration: 4.2s;
animation-delay: -1.2s;
}
.tarjeta--2 .fantasma {
animation-duration: 2.6s;
}
.pista {
margin: 1.1rem 0 0;
font: 400 1.2rem/1 var(--mano);
text-transform: uppercase;
color: var(--tinta-suave);
rotate: -2deg;
}
.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;
}
.indice__opcion {
transition: none;
}
.fantasma,
.destello,
.pensamiento circle,
.punto::after {
animation: none !important;
}
}