/* ==========================================================================
   Macarena Olávarri · easter eggs (lo que arma easter-eggs.js)
   Va después de main.css y paginas.css. Sin este archivo y su JS, el sitio
   queda igual.
   ========================================================================== */

/* Lo que se puede picar */
html.js .maca__foto, html.js .a-portada__sticker, html.js .disco-grande,
html.js .polaroid--tel, html.js .egg-seguidores, html.js .frase__fun { cursor: pointer; }
html.js .editor__maca { pointer-events: auto; cursor: pointer; }
.disco-grande:focus-visible { outline: 2px dashed var(--tinta); outline-offset: 10px; }
/* En Mis cursos el título, el sello y las estrellas quedan encima del disco (sus renglones
   son de ancho completo): el clic les pasa de largo y llega al disco. Los botones, no */
html.js .c-portada > :is(.etiqueta, .titular, .c-portada__sub, .c-portada__acciones, .sello) { pointer-events: none; }
html.js .c-portada__acciones a { pointer-events: auto; }

/* ---------- El álbum, en el pie de cada página ---------- */
.egg-album { display: flex; align-items: center; gap: 10px; margin-inline: auto; }
.egg-album__huecos { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.egg-album__huecos li {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px dashed rgba(0, 0, 0, .45);
}
.egg-album__huecos span { font-size: 12px; line-height: 1; opacity: 0; scale: .3; transition: opacity .3s ease, scale .5s var(--muelle); }
.egg-album__huecos li.is-hallado { border-style: solid; border-color: var(--tinta); background: #FFFBF3; }
.egg-album__huecos li.is-hallado span { opacity: 1; scale: 1; }
.egg-album__huecos li.is-nuevo { animation: egg-pop .6s var(--muelle); }
@keyframes egg-pop { 40% { scale: 1.35; rotate: 12deg; } }
.egg-album__txt { white-space: nowrap; }
.egg-album__otra { font-size: 15px; line-height: 1; opacity: .55; transition: opacity .2s ease, rotate .5s var(--muelle); }
.egg-album__otra:hover { opacity: 1; rotate: -180deg; }

/* El aviso de arriba */
.egg-aviso {
  position: fixed; left: 50%; top: calc(var(--alto-barra) + 6px); z-index: 90;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 2 * var(--margen));
  padding: 9px 18px 9px 10px; border-radius: 999px;
  background: var(--tinta); color: #fff;
  font-size: 14px; line-height: 1.2;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
  translate: -50% -16px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, translate .5s var(--muelle), visibility .3s;
}
.egg-aviso.is-visible { opacity: 1; translate: -50% 0; visibility: visible; }
.egg-aviso b { color: #fff; margin-right: .25em; }
.egg-aviso__emoji {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #FFFBF3; font-size: 15px;
}

/* ---------- Lluvia de estrellas y chispas ---------- */
.egg-lluvia { position: fixed; inset: 0; z-index: 98; overflow: hidden; pointer-events: none; }
.egg-lluvia img { position: absolute; top: 0; height: auto; }
.egg-chispa { position: fixed; z-index: 87; width: 26px; height: auto; pointer-events: none; }

/* ---------- 1 · Maca sale volando: la copia que vuela ---------- */
.egg-vuela { position: fixed; z-index: 86; margin: 0; max-width: none; pointer-events: none; will-change: transform; }
/* la del editor: lo que tapa la ventana (los codos) tampoco se ve al volar */
.egg-vuela--asomada {
  -webkit-mask-image: linear-gradient(#000 70%, transparent 76%);
          mask-image: linear-gradient(#000 70%, transparent 76%);
}

/* ---------- 2 · El disco suena ---------- */
.egg-reproductor {
  position: fixed; left: var(--margen); bottom: 20px; z-index: 72;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 2 * var(--margen));
  padding: 10px 10px 10px 16px; border-radius: 999px; overflow: hidden;
  background: var(--tinta); color: #fff;
  font-size: 14px; line-height: 1.15;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
  opacity: 0; translate: 0 24px; visibility: hidden;
  transition: opacity .35s ease, translate .6s var(--muelle), visibility .35s;
}
.egg-reproductor.is-visible { opacity: 1; translate: 0 0; visibility: visible; }
.egg-reproductor__txt b { font-weight: 900; margin-right: .3em; color: #fff; }
.egg-reproductor__eq { flex: none; display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.egg-reproductor__eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--acento); transform-origin: 50% 100%; animation: egg-eq .8s ease-in-out infinite alternate; }
.egg-reproductor__eq i:nth-child(2) { animation-delay: -.3s; }
.egg-reproductor__eq i:nth-child(3) { animation-delay: -.55s; }
.egg-reproductor__eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes egg-eq { from { scale: 1 .25; } to { scale: 1 1; } }
.egg-reproductor__parar { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; }
.egg-reproductor__parar::before { content: ""; position: absolute; left: 10px; top: 10px; width: 10px; height: 10px; border-radius: 2px; background: var(--tinta); }
/* lo que dura el pedazo de canción */
.egg-reproductor::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px;
  background: var(--acento); transform-origin: 0 50%; scale: 0 1;
}
.egg-reproductor.is-visible::after { animation: egg-avance var(--dura, 21s) linear forwards; }
@keyframes egg-avance { to { scale: 1 1; } }

/* ---------- 3 · "fun" de verdad: la frase se menea ---------- */
.frase.egg-fun .frase__l > span { animation: egg-meneo .45s ease-in-out 5; }
.frase.egg-fun .frase__l--2 > span { animation-delay: .08s; }
@keyframes egg-meneo { 25% { rotate: -3deg; } 75% { rotate: 3deg; } }

/* ---------- 4 · Atajos de editor: el corte de tijeras ---------- */
.egg-corte {
  position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px;
  background: #F7EDDD; pointer-events: none;
  animation: egg-corta .35s var(--salida) both;
}
.egg-corte i {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--tinta); color: #fff;
  font-style: normal; font-size: 13px; line-height: 1;
  animation: egg-tijera 1.1s var(--salida) both;
}
@keyframes egg-corta { from { scale: 1 0; } }
@keyframes egg-tijera {
  0%   { scale: 0; rotate: -90deg; }
  30%  { scale: 1.15; rotate: 0deg; }
  75%  { scale: 1; opacity: 1; }
  100% { scale: .6; opacity: 0; }
}
.egg-corte.is-deshecho { animation: egg-une .3s ease-in both; }
@keyframes egg-une { to { scale: 1 0; opacity: 0; } }

/* ---------- 5 · La llamada ---------- */
.k-foto.egg-en-llamada { z-index: 2; }
/* mientras llama, la foto tiembla al ritmo del timbre: rrrring (1.7 s) y pausa, en vueltas de 3 s */
.polaroid--tel.egg-sonando { animation: egg-rrring 3s linear infinite; }
@keyframes egg-rrring {
  0%, 56.7%, 100% { transform: rotate(0deg); }
  2%, 6%, 10%, 14%, 18%, 22%, 26%, 30%, 34%, 38%, 42%, 46%, 50%, 54% { transform: rotate(2.2deg); }
  4%, 8%, 12%, 16%, 20%, 24%, 28%, 32%, 36%, 40%, 44%, 48%, 52% { transform: rotate(-2.2deg); }
}
.polaroid--tel.egg-callado { animation: none; }
.egg-llamada {
  position: absolute; left: 50%; bottom: 7%; z-index: 5;
  width: min(94%, 330px); translate: -50% 0;
  padding: 16px 16px 14px; border-radius: 26px;
  background: rgba(0, 0, 0, .94); color: #fff;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8);
  text-align: center;
  animation: egg-entra .5s var(--muelle) both;
}
.egg-llamada[hidden] { display: none; }
@keyframes egg-entra { from { opacity: 0; translate: -50% 18px; scale: .92; } }
.egg-llamada__quien { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font-weight: 700; font-size: 17px; }
.egg-llamada__quien img { flex: none; width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: var(--acento); }
.egg-llamada[data-modo="entrante"] .egg-llamada__quien img { animation: egg-pulso 1.2s ease-out infinite; }
@keyframes egg-pulso { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 75%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }
/* los subtítulos en letra normal; solo "Hermana" va en negritas */
.egg-llamada__sub { margin: 12px 0 0; font-weight: 400; font-size: 22px; line-height: 1.1; letter-spacing: -.015em; color: #fff; }
.egg-llamada__sub b { font-weight: 900; }
.egg-llamada__sub:empty { display: none; }
.egg-llamada__sub.is-cambio { animation: egg-sub .35s var(--muelle) both; }
@keyframes egg-sub { from { opacity: 0; scale: .8; } }
.egg-llamada__botones { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.egg-llamada__boton { padding: 11px 18px 12px; border-radius: 999px; font-weight: 700; font-size: 15px; line-height: 1; color: #fff; }
.egg-llamada__boton--colgar { background: #E5484D; }
.egg-llamada__boton--contestar { background: #2FB67C; animation: egg-late 1.2s ease-in-out infinite; }
@keyframes egg-late { 50% { scale: 1.07; } }
.egg-llamada__boton[hidden], .egg-llamada__curso[hidden] { display: none; }
.egg-llamada__curso { padding: 12px 20px 13px; font-size: 16px; background: #fff; color: var(--tinta); border-color: #fff; box-shadow: none; }
.egg-llamada__curso:hover { background: var(--hover); border-color: var(--hover); color: var(--hover-tinta); }

/* ---------- 6 · ¿Me sigues? ---------- */
.egg-seguidores { position: relative; }
.egg-seguidores b.egg-sube { animation: egg-sube .6s var(--muelle); }
@keyframes egg-sube { 40% { scale: 1.12; rotate: -3deg; } }
.egg-burbuja {
  position: absolute; left: 0; bottom: calc(100% + 12px); z-index: 3;
  padding: 9px 14px 10px; border-radius: 16px 16px 16px 4px;
  background: var(--tinta); color: #fff; text-decoration: none; white-space: nowrap;
  font-weight: 700; font-size: 15px; line-height: 1;
  opacity: 0; translate: 0 8px; scale: .9; pointer-events: none;
  transition: opacity .25s ease, translate .45s var(--muelle), scale .45s var(--muelle);
}
.egg-burbuja.is-visible { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; }
.egg-burbuja:hover { background: var(--hover); color: var(--hover-tinta); }

/* ---------- El premio: los seis ---------- */
.egg-premio {
  position: fixed; inset: 0; z-index: 97;
  display: grid; place-items: center; padding: var(--margen);
  background: rgba(0, 0, 0, .55);
  opacity: 0; transition: opacity .35s ease;
}
.egg-premio.is-visible { opacity: 1; }
.egg-premio__tarjeta {
  position: relative; width: min(100%, 460px);
  padding: 34px 30px 26px; border-radius: 28px; text-align: center;
  background: url("../img/grano.png") 0 0 / 180px 180px, linear-gradient(160deg, #FFE6B0, #F8D5E6 60%, #DFD0EC);
  color: var(--tinta);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8);
  translate: 0 30px; scale: .94;
  transition: translate .6s var(--muelle), scale .6s var(--muelle);
}
.egg-premio.is-visible .egg-premio__tarjeta { translate: 0 0; scale: 1; }
.egg-premio__arriba { margin: 0; font-family: var(--f-pixel); font-size: 11px; }
.egg-premio__titulo { margin: .35em 0 .3em; font-weight: 900; font-size: clamp(34px, 6vw, 52px); line-height: .92; letter-spacing: -.04em; }
.egg-premio__txt { margin: 0; font-weight: 300; font-size: 19px; }
.egg-premio__codigo {
  display: inline-block; margin: 18px 0 22px; padding: 12px 20px 11px;
  border: 2px dashed var(--tinta); border-radius: 14px; background: #FFFBF3;
  font-family: var(--f-pixel); font-size: 20px; letter-spacing: .12em;
}
.egg-premio__cerrar { display: block; margin: 16px auto 0; font-family: var(--f-pixel); font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Teléfono ---------- */
@media (max-width: 760px) {
  .despedida__pie .egg-album, .pie .egg-album { flex-basis: 100%; justify-content: center; }
  .egg-reproductor { left: 12px; right: 12px; bottom: 12px; }
  .egg-reproductor__txt { font-size: 13px; }
  .egg-aviso { font-size: 13px; }
}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .egg-reproductor__eq i, .egg-llamada__boton--contestar, .egg-album__huecos li.is-nuevo,
  .egg-llamada[data-modo="entrante"] .egg-llamada__quien img, .egg-seguidores b.egg-sube,
  .polaroid--tel.egg-sonando { animation: none; }
}