/* =========================================================
   Centinelas — Celebración del final del reto
   Pantalla completa que repasa los cinco días, enciende las
   estrellas ganadas y cierra con un mensaje. La mueve
   Assets/js/celebracion.js añadiendo clases por etapas:
     fiesta--visible  → aparece la capa
     fiesta--final    → insignia, título y confeti
     fiesta--mensaje  → mensaje, versículo y botón
   ========================================================= */

.fiesta {
  /* Un <dialog> modal: anula el tamaño y el marco que trae de fábrica */
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  border: 0;
  /* Sin esto el relleno se suma al 100 % y la capa mide 32 px más
     que la pantalla: en un móvil se cortaba la medalla del día 5. */
  box-sizing: border-box;
  padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));

  background:
    radial-gradient(ellipse 80% 55% at 50% 30%, rgba(107, 26, 247, .42), transparent 70%),
    #08080F;
  color: #FFFFFF;
  font-family: var(--font-body, 'Poppins', system-ui, sans-serif);

  overflow-y: auto;
  opacity: 0;
  transition: opacity .45s ease;
}

.fiesta[open] {
  display: flex;
  flex-direction: column;
}

.fiesta::backdrop { background: transparent; }

.fiesta--visible { opacity: 1; }

/* El confeti va por encima de todo pero no atrapa toques */
.fiesta__lienzo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* margin:auto y no align-items:center: si el contenido no cabe en
   un móvil bajito, un centrado normal cortaría la parte de arriba
   sin dejar desplazarse hasta ella. */
.fiesta__contenido {
  position: relative;
  z-index: 1;
  width: min(100%, 540px);
  margin: auto;
  text-align: center;
}


/* ---------- Etapa 1: el recorrido ---------- */

.fiesta__recorrido {
  transform: translateY(var(--bajar, 0px));
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}

.fiesta--final .fiesta__recorrido { transform: none; }

.fiesta__etiqueta {
  margin: 0 0 18px;
  font-family: var(--font-heading, 'Permanent Marker', cursive);
  font-size: clamp(1rem, 3.6vw, 1.2rem);
  color: var(--c-lima, #C8F800);
  letter-spacing: .02em;
}

.fiesta__camino { position: relative; }

/* La línea une los centros de la primera y la última medalla:
   cada columna mide 20 %, así que sus centros quedan al 10 % de
   cada borde. */
.fiesta__linea {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 30px;               /* mitad de la medalla */
  height: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .1);
}

.fiesta__linea span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #C8F800, #3AABF7, #F85030, #FAC903, #A855F7);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s ease;
}

.fiesta__pasos {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fiesta__paso {
  position: relative;
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.fiesta__medalla {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #2A2A38;
  background: #101018;
  color: #4A4E5E;
  transition:
    transform .4s cubic-bezier(.34, 1.56, .64, 1),
    background-color .3s ease,
    border-color .3s ease,
    color .3s ease,
    box-shadow .3s ease;
}

.fiesta__medalla svg {
  width: 24px;
  height: 24px;
}

.fiesta__paso--encendido .fiesta__medalla {
  background: var(--color);
  border-color: #0A0A05;
  color: #0A0A05;
  transform: scale(1.22);
  box-shadow: 0 0 30px var(--color);
}

/* Con la imagen del día: arranca apagada en gris y se enciende a
   color. El aro toma el color del día en vez del negro, que sobre
   una foto se perdería. */
.fiesta__medalla img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.4);
  transition: filter .45s ease;
}

.fiesta__paso--encendido .fiesta__medalla img { filter: none; }

.fiesta__paso--encendido .fiesta__medalla--foto { border-color: var(--color); }

.fiesta__paso--asentado .fiesta__medalla { transform: scale(1); }

.fiesta__paso--encendido.fiesta__paso--asentado .fiesta__medalla {
  box-shadow: 0 0 16px color-mix(in srgb, var(--color) 45%, transparent);
}

/* Un día que no hizo se queda a la vista, sin tacharlo: el recorrido
   es suyo tal como fue, pero no se le echa en cara. */
.fiesta__paso--perdido .fiesta__medalla { border-style: dashed; }

.fiesta__dia {
  font-size: .78rem;
  font-weight: 600;
  color: #A8ACB8;
  transition: color .3s ease;
}

.fiesta__paso--encendido .fiesta__dia { color: #FFFFFF; }

/* El "+1" que sale volando de cada medalla al encenderse */
.fiesta__mas {
  position: absolute;
  top: -8px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  font-size: .85rem;
  color: #FAC903;
  opacity: 0;
  pointer-events: none;
}

.fiesta__mas svg { width: 13px; height: 13px; }

.fiesta__paso--encendido .fiesta__mas {
  animation: fiesta-sube 1.1s ease-out both;
}

.fiesta__contador {
  margin: 22px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  color: #A8ACB8;
}

.fiesta__contador svg {
  width: 20px;
  height: 20px;
  color: #FAC903;
}

.fiesta__contador strong {
  display: inline-block;
  min-width: 1ch;
  font-size: 1.25rem;
  color: #FFFFFF;
}

.fiesta__contador strong.fiesta__salto { animation: fiesta-salto .35s ease-out; }


/* ---------- Etapas 2 y 3: lo que aparece después ----------
   Todo está en el documento desde el principio, invisible: así
   ocupa su sitio y nada salta de lugar al aparecer. */

.fiesta__final > *,
.fiesta__mensaje > * {
  opacity: 0;
  visibility: hidden;
}

.fiesta--final .fiesta__final > *,
.fiesta--mensaje .fiesta__mensaje > * {
  visibility: visible;
  animation: fiesta-aparecer .65s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 140ms);
}

.fiesta__final { margin-top: clamp(22px, 4vh, 36px); }

.fiesta__insignia {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 auto 6px;
  display: grid;
  place-items: center;
}

.fiesta--final .fiesta__final > .fiesta__insignia {
  animation: fiesta-insignia .85s cubic-bezier(.34, 1.56, .64, 1) both;
}

.fiesta__rayos {
  position: absolute;
  inset: -46px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(250, 201, 3, .3) 0 9deg, transparent 9deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%);
          mask: radial-gradient(circle, #000 25%, transparent 70%);
  animation: fiesta-girar 16s linear infinite;
}

.fiesta__insignia svg {
  position: relative;
  width: 100%;
  height: 100%;
  color: #FAC903;
  filter: drop-shadow(0 8px 26px rgba(250, 201, 3, .55));
}

.fiesta__insignia-num {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display, 'Permanent Marker', cursive);
  font-size: 2.1rem;
  line-height: 1;
  color: #0A0A05;
}

.fiesta__titulo {
  margin: 0;
  font-family: var(--font-display, 'Permanent Marker', cursive);
  font-weight: 400;
  font-size: clamp(2rem, 8.5vw, 3.1rem);
  line-height: 1.08;
  text-wrap: balance;
}

.fiesta__titulo .subrayado {
  display: block;
  width: min(62%, 260px);
  height: 16px;
  margin: 6px auto 0;
  color: #C8F800;
  clip-path: inset(0 100% 0 0);
}

.fiesta--final .fiesta__titulo .subrayado {
  animation: fiesta-trazo .7s .55s ease-out forwards;
}

.fiesta__rango {
  margin: 14px 0 0;
  font-size: clamp(1rem, 3.8vw, 1.12rem);
  line-height: 1.5;
  color: #D6D8E0;
  text-wrap: balance;
}

.fiesta__rango strong { color: #C8F800; }

.fiesta__mensaje { margin-top: clamp(20px, 3.5vh, 30px); }

.fiesta__texto {
  margin: 0 auto;
  max-width: 40ch;
  font-size: clamp(.95rem, 3.6vw, 1.05rem);
  line-height: 1.65;
  color: #D6D8E0;
  text-wrap: pretty;
}

.fiesta__texto strong { color: #FFFFFF; }

.fiesta__cita {
  margin: 18px auto 0;
  max-width: 42ch;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: .92rem;
  line-height: 1.6;
  font-style: italic;
  color: #FFFFFF;
}

.fiesta__cita cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-weight: 600;
  font-size: .8rem;
  color: #A855F7;
}

/* La invitación al encuentro: el objetivo de todo el reto, así que
   es lo que más resalta después del título. */
.fiesta__invitacion {
  margin: 22px auto 0;
  max-width: 44ch;
  padding: 20px 18px;
  border-radius: 20px;
  border: 2px solid #C8F800;
  background: linear-gradient(160deg, rgba(200, 248, 0, .12), rgba(107, 26, 247, .2));
  box-shadow: 0 0 36px rgba(200, 248, 0, .18);
}

.fiesta__invitacion h3 {
  margin: 0;
  font-family: var(--font-display, 'Permanent Marker', cursive);
  font-weight: 400;
  font-size: clamp(1.3rem, 5.4vw, 1.6rem);
  line-height: 1.15;
  color: #C8F800;
  text-wrap: balance;
}

.fiesta__invitacion p {
  margin: 10px 0 0;
  font-size: .95rem;
  line-height: 1.6;
  color: #FFFFFF;
  text-wrap: pretty;
}

.fiesta__invitacion strong { white-space: nowrap; }

.fiesta__datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.fiesta__datos li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: #0A0A05;
  font-size: .88rem;
  font-weight: 600;
  color: #FFFFFF;
}

.fiesta__datos svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: #C8F800;
}

.fiesta__boton {
  margin-top: 24px;
  padding: 15px 40px;
  border-radius: 999px;
  border: 2px solid #0A0A05;
  background: #C8F800;
  color: #0A0A05;             /* lima de fondo exige texto negro */
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  transition: transform .25s ease, box-shadow .25s ease;
}

.fiesta__boton:hover,
.fiesta__boton:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55);
}

.fiesta__boton:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
}

.fiesta__saltar {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  margin: 0;
  z-index: 1;
  font-size: .8rem;
  color: #6E7282;
  transition: opacity .3s ease;
}

.fiesta--mensaje .fiesta__saltar { opacity: 0; }

.fiesta__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ---------- Animaciones ---------- */

@keyframes fiesta-aparecer {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes fiesta-insignia {
  0%   { opacity: 0; transform: scale(0) rotate(-45deg); }
  60%  { opacity: 1; transform: scale(1.15) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes fiesta-sube {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.6); }
  25%  { opacity: 1; transform: translate(-50%, -16px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -40px) scale(1); }
}

@keyframes fiesta-salto {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.5); color: #FAC903; }
  100% { transform: scale(1); }
}

@keyframes fiesta-trazo { to { clip-path: inset(0 0 0 0); } }

@keyframes fiesta-girar { to { transform: rotate(1turn); } }


/* ---------- Móvil estrecho ---------- */

@media (max-width: 380px) {
  .fiesta__medalla { width: 50px; height: 50px; }
  .fiesta__medalla svg { width: 20px; height: 20px; }
  .fiesta__linea { top: 25px; }
}


/* ---------- Movimiento reducido ----------
   El guion en JS ya salta directo al final; aquí se quitan los
   giros y rebotes para que aparezca todo quieto. */

@media (prefers-reduced-motion: reduce) {
  .fiesta,
  .fiesta__recorrido,
  .fiesta__linea span,
  .fiesta__medalla,
  .fiesta__medalla img { transition: none; }

  .fiesta__rayos,
  .fiesta__paso--encendido .fiesta__mas,
  .fiesta__contador strong.fiesta__salto { animation: none; }

  .fiesta--final .fiesta__final > *,
  .fiesta--mensaje .fiesta__mensaje > *,
  .fiesta--final .fiesta__final > .fiesta__insignia {
    animation: none;
    opacity: 1;
  }

  .fiesta--final .fiesta__titulo .subrayado {
    animation: none;
    clip-path: none;
  }
}