/* Reto flash · la carátula sobre morado y su intro con las 3 bolitas, la misma del curso completo (R-190). Los colores
   salen de base.css, o son blanco, negro y el morado oscuro #1C0E36, para que una copia con otra paleta los cambie solos. */
:root{--fondo-bolitas:radial-gradient(circle at 22px 18px,var(--lila) 8px,transparent 8.5px),radial-gradient(circle at 50px 18px,var(--lila) 8px,transparent 8.5px),radial-gradient(circle at 36px 44px,var(--verde) 8px,transparent 8.5px)}

/* la carátula. El fondo de bolitas se mueve entero (no se repinta), un poco más grande que la pantalla para no dejar bordes */
.portada{background:radial-gradient(circle at 50% 22%,var(--morado) 0,var(--hondo) 45%,#1C0E36 100%);color:var(--blanco)}
.portada::before{content:"";position:absolute;top:-66px;left:-72px;right:0;bottom:0;opacity:.12;background-image:var(--fondo-bolitas);background-size:72px 66px;animation:correr 6s linear infinite;will-change:transform;pointer-events:none}
.portada>main,.portada>footer,.portada>header{position:relative}
/* arriba a la derecha, el botón para silenciar, en lila claro sobre el morado */
.portada-cabecera{justify-content:flex-end;padding-bottom:0}
.portada .ico.silencio{color:#D9CCF5}
.portada-centro{justify-content:center;gap:14px}
.portada-centro .iso{margin-bottom:10px}
.portada-antetitulo{padding:4px 12px;border-radius:999px;background:var(--verde);color:var(--sobre-verde);font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.portada-titulo{font-size:52px;line-height:1;font-weight:800;letter-spacing:-.03em}
.portada-titulo em{font-style:normal;color:var(--verde)}
.portada-frase{max-width:24ch;font-size:19px;line-height:1.35;color:#D9CCF5;text-wrap:balance}
.btn.claro{background:transparent;border:2px solid rgba(255,255,255,.45);color:var(--blanco);font-size:17px}
.ver-intro{min-height:44px;border:none;background:none;color:#D9CCF5;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.portada button:focus-visible{outline-color:var(--verde)}

/* las 3 bolitas de Tidú: dos lilas arriba y una verde abajo; giran y laten */
.iso{position:relative;display:block;width:96px;height:88px;animation:girar 7s linear infinite}
.iso i{position:absolute;width:36px;height:36px;border-radius:50%;background:var(--lila);animation:latir 1.3s ease-in-out infinite}
.iso i:nth-child(1){left:6px;top:3px}
.iso i:nth-child(2){right:6px;top:3px;animation-delay:.22s}
.iso i:nth-child(3){left:30px;bottom:3px;background:var(--verde);animation-delay:.44s}
.iso.grande{width:170px;height:156px;animation-duration:2.4s;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.iso.grande i{width:64px;height:64px}
.iso.grande i:nth-child(3){left:53px}

/* la intro: tres capas que se abren en círculo, como en el curso completo. Se toca para saltarla */
.intro{position:fixed;inset:0;z-index:70;overflow:hidden;cursor:pointer}
.intro .capa{position:absolute;inset:0;display:grid;place-items:center}
.intro .c1{background-color:var(--hondo);background-image:var(--fondo-bolitas);background-size:72px 66px;animation:deriva 5s linear infinite}
.intro .c2{background:var(--verde);color:var(--sobre-verde);clip-path:circle(0% at 50% 50%);animation:abrir .85s cubic-bezier(.7,0,.25,1) 1.15s forwards}
.marca-intro{padding:0 16px;font-size:clamp(40px,11vw,84px);font-weight:800;letter-spacing:-.03em;line-height:1;text-align:center}
.intro .c3{background:#1C0E36;clip-path:circle(0% at 50% 50%);animation:abrir .85s cubic-bezier(.7,0,.25,1) 2.05s forwards}
.intro.sale{animation:desvanecer .45s ease forwards}
/* «Saltar intro» va sobre un fondo oscuro, para leerse igual sobre el morado y sobre el verde */
.saltar-intro{position:absolute;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));min-height:44px;padding:8px 16px;border:none;border-radius:999px;background:rgba(28,14,54,.72);color:var(--blanco);font-size:15px;font-weight:800}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes latir{0%,100%{transform:scale(.8);opacity:.75}50%{transform:scale(1.2);opacity:1}}
@keyframes correr{to{transform:translate(72px,66px)}}
@keyframes deriva{to{background-position:72px 66px}}
@keyframes abrir{to{clip-path:circle(150% at 50% 50%)}}
@keyframes desvanecer{to{opacity:0;visibility:hidden}}