/* ==========================================================================
   TEMA: AVENTURA DE CUBOS — dirección de arte "SE ESCARBA"
   Creada el 7 de octubre de 2026, la tercera hecha con Blender. Abdiel pidió
   "uno tipo Minecraft, ya no Roblox… sorpréndeme". Mundo de cubos de DISEÑO
   PROPIO: sin nombre, logo, personajes ni texturas de ningún juego.

   LA IDEA: arriba está la isla flotante (foto de Blender) con su nombre en
   bloques de oro y él saludando. De ahí para abajo la página baja por las
   capas, como cuando uno escarba: tierra → piedra con pepitas → roca honda.
   Cada capa escurre unos pixeles sobre la siguiente. Los textos van en
   letreros de tabla y en placas claras; lo que se toca es un bloque de oro.
   Todo es cuadrado, con bisel de dos pixeles: nada redondo.

   Entrada: un bloque de pasto que flota. Primer piquetazo: se agrieta.
   Segundo: revienta en cubitos y aparece la isla.

   Texturas del fondo: herramientas/texturas-cubos.js (mosaicos de 16 × 16
   que aquí se agrandan a 48 px sin suavizar).

   TEORÍA DEL COLOR: tierra y piedra de base (60), placas crema y tabla (30),
   oro solo en lo que se toca y en las etiquetas (10). El cielo, el pasto y el
   rojo vienen de la foto. El café oscuro de las orillas amarra todo.

   CONTRASTE MEDIDO (fórmula WCAG, contra el pixel MÁS CLARO de cada mosaico):
     blanco sobre tierra 6.1 · sobre piedra 6.0 · sobre roca honda 12.5
     oro claro #FFE28A sobre tierra 4.8 · sobre piedra 4.7 · sobre roca honda 9.8
     letra suave #F4E9DA sobre tierra 5.1 · sobre piedra 5.0
     tinta #24160C sobre crema #FFF3D2 15.9 · sobre oro #FFC72E 11.3 · sobre la casilla #E9D9AE 12.6 · sobre el cielo #95CBFF 10.3
     tinta sobre la veta más oscura de la tabla #D2A864 8.0
     café #5A4636 sobre crema 8.0 · rojo hondo #9E1D14 sobre crema 7.2 · sobre tabla #E6C07E 4.6 (solo en letra grande: en la veta baja a 3.6)
   ========================================================================== */
:root{
  --cielo:#95CBFF; --pasto:#58A53C; --tierra:#6E4B2C; --piedra:#505362; --honda:#252632;
  --oro:#FFC72E; --oro-claro:#FFE28A; --rojo:#9E1D14; --crema:#FFF3D2; --cafe:#24160C;
  --papel:#6E4B2C;  --papel-hondo:#505362;
  --tinta:#FFFFFF;  --tinta-suave:#F4E9DA;
  --marca:#FFFFFF;  --marca-claro:#FFE28A;
  --acento:#FFE28A; --acento-hondo:#B9860B;
  --f-display:"Pixelify Sans", "Courier New", monospace;
  --f-texto:"Rubik", system-ui, sans-serif;
  --f-numero:"Silkscreen", "Courier New", monospace;            /* horas, fecha y cuenta: en la letra de pixel el 2, el 5 y el 8 se confunden */
  --radio:0px;
  --orilla:0 0 0 4px #24160C;                                   /* el contorno de toda pieza */
  --sombra:0 0 0 4px #24160C, 0 10px 0 0 rgba(0,0,0,.32);
  --sombra-alta:0 0 0 4px #24160C, 0 14px 0 0 rgba(0,0,0,.34);
  --bisel:inset -4px -4px 0 rgba(120,84,30,.28), inset 4px 4px 0 rgba(255,255,255,.75);
  --letra-dura:3px 3px 0 #24160C;
  font-synthesis:none;
}
body{ background:#6E4B2C url(tierra.png) 0 0 / 48px 48px; image-rendering:pixelated; color:var(--tinta); font-variant-ligatures:none; }
img, iframe, svg, video, canvas{ image-rendering:auto; }
h1, h2, .titulo, .portada__nombre, .entrada__nombre, .saludo__nombre, .pie__nombre, .dedicatoria__firma, .linea__hora, .cuenta__caja .n, .portada__fecha .fnum{ font-weight:700; }

/* adentro de las placas claras la letra vuelve a ser oscura */
:is(.cuenta__caja, .tarjeta, .formulario, .notas__lista li, .faq__item, .buscar, .portada__tarjeta){ --tinta:#24160C; --tinta-suave:#5A4636; --marca:#24160C; --acento:#9E1D14; color:var(--tinta); }

.etiqueta{
  display:inline-block; padding:.26rem .7rem .2rem; background:var(--oro); color:#24160C; box-shadow:var(--orilla), inset -3px -3px 0 #C98F0E, inset 3px 3px 0 #FFE88F;
  font-family:var(--f-display); font-weight:700; font-size:.84rem; letter-spacing:.1em; line-height:1.2;
}
.titulo{ font-family:var(--f-display); line-height:1.08; font-size:clamp(1.95rem,8.8vw,2.6rem); margin:.9rem 0 1.5rem; color:#FFFFFF; text-shadow:var(--letra-dura); }
.titulo::after{ content:""; display:block; width:12px; height:12px; margin:.75rem auto 0; background:var(--oro); box-shadow:-22px 0 0 #FFFFFF, 22px 0 0 #4FC3FF, 0 3px 0 #24160C, -22px 3px 0 #24160C, 22px 3px 0 #24160C; }
.parrafo{ font-weight:500; }
.parrafo b{ color:var(--acento); font-weight:700; }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — pícale al bloque. Uno: se agrieta. Dos: revienta.
   (El motor quita la entrada 1.6 s después del último toque: todo cabe ahí.)
   ══════════════════════════════════════════════════════════════════════ */
.entrada{ overflow:hidden; background:linear-gradient(180deg, #95CBFF 0%, #B9DDFF 62%, #DDEFFF 100%); transition:opacity .4s ease .78s, visibility 0s linear 1.18s; }
.entrada::before, .entrada::after{ content:""; position:absolute; left:0; width:72px; height:24px; background:#FFFFFF; box-shadow:24px -24px 0 #FFFFFF, 48px 0 0 #FFFFFF; animation:nube-va 44s linear infinite; }
.entrada::before{ top:11%; animation-delay:-12s; }
.entrada::after{ top:78%; width:48px; height:16px; box-shadow:16px -16px 0 #FFFFFF, 32px 0 0 #FFFFFF; opacity:.85; animation-duration:60s; animation-delay:-40s; }
@keyframes nube-va{ from{ transform:translateX(-140px); } to{ transform:translateX(100vw); } }
.entrada > *{ position:relative; z-index:1; }
.entrada__para{ font-family:var(--f-texto); font-weight:700; letter-spacing:.24em; font-size:.74rem; color:#24160C; }
.entrada__nombre{ font-family:var(--f-display); font-size:clamp(1.6rem,7.6vw,2.2rem); line-height:1.12; margin:.15rem 0 .2rem; color:#24160C; }
.gancho.cubo{ position:relative; width:250px; height:268px; }
.gancho.cubo.golpe, .gancho.cubo.abre{ animation:none; }
.pica{ position:absolute; inset:0; display:block; }
.pica__sombra{ position:absolute; left:50%; bottom:2px; width:132px; height:18px; margin-left:-66px; background:rgba(36,22,12,.2); box-shadow:-12px 6px 0 -6px rgba(36,22,12,.2), 12px 6px 0 -6px rgba(36,22,12,.2); animation:sombra-flota 2.8s ease-in-out infinite; }
.pica__cubo{ position:absolute; left:50%; bottom:30px; width:206px; height:206px; margin-left:-103px; animation:cubo-flota 2.8s ease-in-out infinite; }
@keyframes cubo-flota{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes sombra-flota{ 0%,100%{ transform:scaleX(1); opacity:1; } 50%{ transform:scaleX(.86); opacity:.7; } }
.gancho.cubo .pica__bloque{ position:absolute; inset:0; width:100%; height:100%; }
.gancho.cubo .pica__bloque--roto{ opacity:0; }
/* el pico descansa arriba a la izquierda; gira desde el mango (12 % · 92 % de su foto) */
.gancho.cubo .pica__pico{ position:absolute; z-index:3; left:14px; top:46px; width:108px; height:auto; transform-origin:12% 92%; transform:rotate(-24deg); animation:pico-espera 2.8s ease-in-out infinite; filter:drop-shadow(0 4px 0 rgba(36,22,12,.25)); }
@keyframes pico-espera{ 0%,100%{ transform:rotate(-24deg); } 50%{ transform:rotate(-16deg); } }
@keyframes pico-pega{ 0%{ transform:rotate(-30deg); } 46%{ transform:rotate(20deg); } 62%{ transform:rotate(8deg); } 100%{ transform:rotate(-24deg); } }
@keyframes pico-pega-2{ 0%{ transform:rotate(-30deg); } 46%{ transform:rotate(20deg); } 62%{ transform:rotate(8deg); } 100%{ transform:rotate(-24deg); } }   /* el mismo golpe con otro nombre: si se llamara igual, el segundo no volvería a correr */
/* primer piquetazo: tiembla y queda agrietado */
.gancho.cubo.golpe .pica__pico{ animation:pico-pega .46s cubic-bezier(.5,0,.6,1); }
.gancho.cubo.golpe .pica__cubo{ animation:cubo-flota 2.8s ease-in-out infinite, cubo-tiembla .36s ease .2s; }
@keyframes cubo-tiembla{ 0%,100%{ transform:translate(0,0) rotate(0); } 20%{ transform:translate(5px,4px) rotate(1.5deg); } 45%{ transform:translate(-4px,2px) rotate(-1.5deg); } 70%{ transform:translate(3px,-1px) rotate(1deg); } }
.gancho.cubo.golpe .pica__bloque--roto, .gancho.cubo.abre .pica__bloque--roto{ opacity:1; transition:opacity 0s linear .2s; }
.gancho.cubo.abre .pica__bloque--roto{ transition:none; }
/* segundo: revienta en cubitos */
.gancho.cubo.abre .pica__cubo{ animation:cubo-revienta .16s ease-in .2s forwards; }
@keyframes cubo-revienta{ 0%{ transform:scale(1); opacity:1; } 70%{ transform:scale(1.1); opacity:1; } 100%{ transform:scale(1.1); opacity:0; } }
.gancho.cubo.abre .pica__sombra{ animation:none; opacity:0; transition:opacity .2s ease .25s; }
.gancho.cubo.abre .pica__pico{ animation:pico-pega-2 .46s cubic-bezier(.5,0,.6,1), pico-se-va .4s ease-in .46s forwards; }
@keyframes pico-se-va{ to{ transform:rotate(-24deg) translate(-40px,60px); opacity:0; } }
.pica__trozos{ position:absolute; left:50%; bottom:133px; width:0; height:0; }
.trozo{ position:absolute; left:calc(var(--x0) - 29px); top:calc(var(--y0) - 29px); width:58px; height:58px; opacity:0; background:url(trozo-1.webp) center / contain no-repeat; }
.trozo:nth-child(odd){ background-image:url(trozo-2.webp); }
.gancho.cubo.abre .trozo{ animation:trozo-vuela .82s cubic-bezier(.2,.7,.5,1) .3s both; }
@keyframes trozo-vuela{
  0%{ opacity:0; transform:translate(0,0) rotate(0) scale(1); }
  4%{ opacity:1; }
  55%{ opacity:1; transform:translate(calc(var(--dx) * .72), calc(var(--dy) * .72 - 46px)) rotate(calc(var(--r) * .6)) scale(.9); }
  100%{ opacity:0; transform:translate(var(--dx), calc(var(--dy) + 70px)) rotate(var(--r)) scale(.6); }
}
.trozo--1{ --x0:-42px; --y0:-44px; --dx:-150px; --dy:-150px; --r:-200deg; }
.trozo--2{ --x0:0px;   --y0:-58px; --dx:-10px;  --dy:-210px; --r:160deg; }
.trozo--3{ --x0:42px;  --y0:-44px; --dx:150px;  --dy:-140px; --r:220deg; }
.trozo--4{ --x0:-56px; --y0:0px;   --dx:-190px; --dy:-30px;  --r:-140deg; }
.trozo--5{ --x0:0px;   --y0:0px;   --dx:30px;   --dy:-110px; --r:120deg; }
.trozo--6{ --x0:56px;  --y0:0px;   --dx:190px;  --dy:-40px;  --r:180deg; }
.trozo--7{ --x0:-40px; --y0:46px;  --dx:-130px; --dy:60px;   --r:-240deg; }
.trozo--8{ --x0:0px;   --y0:56px;  --dx:10px;   --dy:90px;   --r:90deg; }
.trozo--9{ --x0:40px;  --y0:46px;  --dx:130px;  --dy:70px;   --r:260deg; }
.entrada__pista{
  margin-top:1rem; padding:.62rem 1.3rem .5rem; background:var(--oro); color:#24160C; box-shadow:var(--orilla), inset -4px -4px 0 #C98F0E, inset 4px 4px 0 #FFE88F, 0 8px 0 4px rgba(36,22,12,.28);
  font-family:var(--f-display); font-weight:700; font-size:1.22rem; letter-spacing:.02em;
  animation:pista-late 1.5s steps(2, jump-none) infinite;
}
@keyframes pista-late{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.entrada__marcador{ margin-top:1rem; color:#24160C; font-weight:700; letter-spacing:.16em; }


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — la isla (foto de Blender) y, clavado en el pasto, el letrero
   El brazo que saluda es un recorte de la segunda foto, puesto encima
   (47.78 % · 53.67 % · 19.26 % de ancho: medido al comparar las dos fotos).
   ══════════════════════════════════════════════════════════════════════ */
/* en pantalla ancha el cielo sigue a los lados de la foto, hasta donde empieza la tierra (99 % del ancho de la foto) */
.portada{ overflow:hidden; gap:0; justify-content:flex-start; padding:0 1.25rem 3.4rem; background:linear-gradient(180deg, #95CBFF 0, #95CBFF calc(min(100vw, 560px) * .99), transparent calc(min(100vw, 560px) * .99)); }
.isla{ position:relative; flex:none; width:100vw; max-width:560px; aspect-ratio:1080/1200; margin:0 -1.25rem; overflow:hidden; background:var(--cielo); }
.isla__foto{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.isla__saludo{ position:absolute; left:47.78%; top:53.67%; width:19.26%; height:auto; opacity:0; animation:saluda 1s steps(1) infinite; }
@keyframes saluda{ 0%{ opacity:0; } 50%{ opacity:1; } }
.isla__nube{ position:absolute; left:0; width:60px; height:20px; background:#FFFFFF; box-shadow:20px -20px 0 #FFFFFF, 40px 0 0 #FFFFFF; animation:nube-va 50s linear infinite; }
.isla__nube--1{ top:5.5%; animation-delay:-20s; }
.isla__nube--2{ top:11%; width:36px; height:12px; box-shadow:12px -12px 0 #FFFFFF, 24px 0 0 #FFFFFF; opacity:.9; animation-duration:72s; animation-delay:-50s; }
.portada > :not(.isla){ position:relative; z-index:2; }
/* el letrero de tabla, con su poste */
.portada__tarjeta{ width:min(100%, 340px); margin-top:-11%; margin-bottom:2.2rem; padding:1rem 1rem 1.2rem; background:#E6C07E url(tabla.png) 0 0 / 64px 64px; box-shadow:var(--sombra-alta), inset -4px -4px 0 rgba(120,84,30,.4), inset 4px 4px 0 rgba(255,255,255,.5); }
.portada__tarjeta::after{ content:""; position:absolute; left:50%; top:100%; width:24px; height:2.2rem; margin:4px 0 0 -12px; background:#B98A4A; box-shadow:var(--orilla), inset -6px 0 0 rgba(0,0,0,.18); z-index:-1; }
.portada__arriba{ font-family:var(--f-display); font-weight:700; font-size:1rem; letter-spacing:.06em; color:#24160C; }
.portada__nombre{ font-family:var(--f-display); line-height:.95; font-size:clamp(3rem,15vw,3.8rem); margin:.2rem 0 .9rem; color:#24160C; }
.portada__nombre .amp{ display:block; margin-top:.3rem; font-size:.44em; line-height:1.1; color:var(--rojo); }
.portada__fecha{ border:0; padding:.55rem .9rem .45rem; gap:.9rem; background:var(--crema); box-shadow:var(--orilla), var(--bisel); }
.portada__fecha .fcol{ color:#24160C; font-weight:700; letter-spacing:.1em; font-size:.74rem; }
.portada__fecha .fnum{ font-family:var(--f-numero); font-size:2.2rem; color:var(--rojo); }
.portada__lugar{ margin-top:.9rem; color:#24160C; font-weight:700; font-size:.95rem; }
.portada__flecha{ display:none; }
body.revelado .portada__tarjeta{ animation:letrero-cae .5s cubic-bezier(.3,1.4,.5,1) 1.15s backwards; }
@keyframes letrero-cae{ from{ opacity:0; transform:translateY(-46px); } to{ opacity:1; transform:translateY(0); } }


/* ══════════════════════════════════════════════════════════════════════
   LAS CAPAS — tierra (fondo de la página), piedra con pepitas (bloques
   alternos) y roca honda (el pie). Cada una escurre sobre la siguiente.
   ══════════════════════════════════════════════════════════════════════ */
.seccion{ position:relative; }
.seccion.alterna{ padding-top:4.4rem; background:url(pepitas.png) 0 0 / 192px 192px, #505362 url(piedra.png) 0 0 / 48px 48px; }      /* las pepitas: 64 pixeles a 3 px, igual que la piedra */
.seccion.alterna::before, .seccion.alterna + .seccion:not(.alterna)::before, .seccion.alterna + .momento::before, .pie::before{ content:""; position:absolute; top:0; left:calc(50% - 50vw); width:100vw; height:48px; background:url(orilla-tierra.png) 0 0 / 48px 48px repeat-x; pointer-events:none; }
.seccion.alterna + .seccion:not(.alterna)::before, .seccion.alterna + .momento::before{ background-image:url(orilla-piedra.png); }
.seccion.alterna + .seccion:not(.alterna){ padding-top:4.4rem; }
.seccion.alterna + .seccion.alterna::before{ display:none; }
.seccion.alterna + .seccion.alterna{ padding-top:1.2rem; }

.saludo__nombre{ font-family:var(--f-display); font-size:clamp(1.7rem,7.6vw,2.3rem); line-height:1.12; color:#FFFFFF; text-shadow:var(--letra-dura); }
.saludo__pases{ background:var(--oro); color:#24160C; border-radius:0; box-shadow:var(--orilla), inset -3px -3px 0 #C98F0E, inset 3px 3px 0 #FFE88F; font-weight:700; }

.momento{ padding-top:1.6rem; padding-bottom:3.4rem; }
.momento__foto{ border:6px solid var(--crema); border-radius:0; box-shadow:var(--sombra-alta); transform:rotate(-1.6deg); background:var(--cielo); }
.flotantes{ display:none; }

/* las placas claras, con su bisel */
.tarjeta, .notas__lista li, .formulario, .faq__item, .buscar{ background:var(--crema); border:0; border-radius:0; box-shadow:var(--sombra), var(--bisel); }
/* la cuenta: cuatro bloques de oro */
.cuenta__grid{ gap:.9rem; }
.cuenta__caja{ background:var(--oro); border:0; border-radius:0; box-shadow:var(--sombra), inset -4px -4px 0 #C98F0E, inset 4px 4px 0 #FFE88F; }
.cuenta__caja .n{ font-family:var(--f-numero); font-size:clamp(1.15rem,5.6vw,1.6rem); color:#24160C; }
.cuenta__caja .l{ color:#24160C; font-weight:700; }
/* el inventario: cada cosa en su casilla hundida */
.tarjeta__icono{ box-sizing:content-box; padding:9px; margin-bottom:.35rem; color:#24160C; background:#E9D9AE; box-shadow:inset 3px 3px 0 rgba(90,60,20,.38), inset -3px -3px 0 rgba(255,255,255,.85); }
.tarjeta b{ font-family:var(--f-display); font-weight:700; font-size:1.22rem; line-height:1.1; color:var(--rojo); }
.tarjeta small{ font-weight:500; }

.dedicatoria__texto{ font-family:var(--f-texto); font-weight:500; font-size:1.16rem; line-height:1.58; color:#FFFFFF; }
.dedicatoria__firma{ font-family:var(--f-display); font-size:1.7rem; color:var(--oro-claro); text-shadow:var(--letra-dura); }

.galeria__grid{ gap:1.1rem; }
.foto img{ box-sizing:border-box; border:4px solid var(--crema); border-radius:0; box-shadow:var(--sombra); background:var(--cielo); }
.foto--ancha img{ aspect-ratio:1100/620; }
.foto__hueco{ border:4px dashed var(--crema); border-radius:0; }

/* las misiones: un camino de pixeles con un cubito en cada parada */
.linea::before{ width:6px; left:2px; border-radius:0; background:repeating-linear-gradient(180deg, #FFE28A 0 6px, transparent 6px 14px); }
.linea__paso::before{ left:-13px; top:.8rem; width:26px; height:26px; border:0; border-radius:0; background:url(trozo-2.webp) center / contain no-repeat; }
.linea__paso.destaca::before{ left:-11px; top:.9rem; width:22px; height:22px; background:var(--oro); box-shadow:var(--orilla), inset -3px -3px 0 #C98F0E, inset 3px 3px 0 #FFE88F; }
.linea__hora{ font-family:var(--f-numero); font-size:1.02rem; color:var(--oro-claro); text-shadow:2px 2px 0 #24160C; min-width:3.9rem; }
.linea__que b{ font-family:var(--f-texto); font-weight:700; font-size:1.1rem; color:#FFFFFF; }
.linea__que small{ font-size:.92rem; font-weight:500; color:var(--tinta-suave); }

.lugares__dir{ font-weight:500; }
.lugares__hora{ font-weight:700; color:var(--oro-claro); }
.mapa{ border:4px solid var(--crema); border-radius:0; box-shadow:var(--sombra); }

.notas__lista{ margin-top:1.3rem; }
.notas__lista li{ border-left:0; font-weight:500; }
.faq__item summary{ font-family:var(--f-texto); font-weight:700; font-size:1.04rem; color:#24160C; }

/* lo que se toca: un bloque de oro */
.boton{
  background:var(--oro); color:#24160C; border:0; border-radius:0; box-shadow:var(--orilla), inset -4px -4px 0 #C98F0E, inset 4px 4px 0 #FFE88F, 0 8px 0 4px rgba(0,0,0,.32);
  font-family:var(--f-display); font-weight:700; font-size:1.16rem; letter-spacing:.01em;
}
.boton:active{ transform:translateY(5px); box-shadow:var(--orilla), inset -4px -4px 0 #C98F0E, inset 4px 4px 0 #FFE88F, 0 3px 0 4px rgba(0,0,0,.32); }
.boton--linea{ background:var(--crema); color:#24160C; border:0; box-shadow:var(--orilla), var(--bisel), 0 8px 0 4px rgba(0,0,0,.32); font-family:var(--f-texto); font-weight:700; font-size:1rem; }
.boton--linea:active{ transform:translateY(5px); box-shadow:var(--orilla), var(--bisel), 0 3px 0 4px rgba(0,0,0,.32); }

.formulario{ padding:1.5rem 1.1rem 1.7rem; }
.formulario .boton{ font-size:1.02rem; padding-left:.6rem; padding-right:.6rem; }
.campo input, .campo select, .campo textarea, .buscar__entrada{ border:3px solid #24160C; border-radius:0; background:#FFFFFF; color:#24160C; font-size:1rem; }
.rsvp__intro{ font-weight:500; }

.pie{ padding-top:5rem; background:url(pepitas.png) 24px 12px / 192px 192px, #252632 url(honda.png) 0 0 / 48px 48px; color:#FFFFFF; }
.pie::before{ background-image:url(orilla-piedra.png); }
.pie__nombre{ font-family:var(--f-display); font-size:3rem; line-height:1.05; color:var(--oro); text-shadow:var(--letra-dura); }

.volver{ border-radius:0; background:var(--crema); color:#24160C; box-shadow:var(--orilla), 0 5px 0 4px rgba(0,0,0,.3); -webkit-backdrop-filter:none; backdrop-filter:none; }
.volver svg{ stroke:#24160C; }

@media (prefers-reduced-motion:reduce){
  .entrada::before, .entrada::after, .pica__cubo, .pica__sombra, .gancho.cubo .pica__pico, .entrada__pista, .isla__saludo, .isla__nube{ animation:none; }
  body.revelado .portada__tarjeta{ animation:none; }
}