/* ==========================================================================
   Aplicación del participante.

   Traducción a código de las piezas de Laicos Carmelitas de Colombia:
   marfil cálido, capitales romanas, ornamentos vegetales, acentos
   manuscritos y el marrón del hábito en los botones.

   Diseñada primero para móvil: la mayoría entrará desde el celular.
   ========================================================================== */

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  background:
    radial-gradient(140% 55% at 50% 0%, #FFFDF8 0%, transparent 62%),
    var(--crema-200);
}

.app__contenido {
  width: 100%;
  max-width: var(--ancho-app);
  margin: 0 auto;
  padding: var(--e4) var(--e5) var(--e10);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.app__pie {
  text-align: center;
  padding: var(--e6) var(--e5) var(--e8);
  font-family: var(--fuente-ui);
  font-size: var(--texto-xs);
  color: var(--texto-tenue);
}
.app__pie p { margin: 0 0 var(--e2); }
.app__pie a { color: var(--texto-tenue); }

/* Botones del participante: capitales romanas, como en las piezas. */
.app .btn {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.9rem;
  /* Las etiquetas largas ("Ir al camino de oración") ocupan dos líneas en
     pantallas estrechas: que respiren en vez de apretarse. */
  line-height: 1.35;
  text-wrap: balance;
  padding: var(--e4) var(--e5);
  min-height: 54px;
}
.app .btn--lg { font-size: 1rem; min-height: 60px; }
.app .btn--sm { font-size: 0.76rem; min-height: 42px; letter-spacing: 0.08em; }

.app .btn--claro {
  --btn-fondo: transparent;
  --btn-texto: var(--marca-700);
  --btn-borde: var(--marca-400);
  box-shadow: none;
}
.app .btn--claro:hover { --btn-fondo: rgba(74, 47, 32, 0.05); }

/* Variante nocturna: comunidad y fondos fotográficos en sepia */
.app--noche {
  background:
    radial-gradient(95% 50% at 50% 30%, #4A3324 0%, transparent 72%),
    var(--noche-fondo);
  color: var(--noche-texto);
}
.app--noche h1, .app--noche h2, .app--noche h3, .app--noche .titular { color: var(--noche-texto); }
.app--noche .suave { color: var(--noche-suave); }
.app--noche .mano  { color: var(--dorado-300); }
.app--noche .tarjeta { background: var(--noche-vidrio); border-color: var(--noche-borde); box-shadow: none; }
.app--noche .btn--claro { --btn-texto: var(--noche-texto); --btn-borde: var(--noche-borde); }
.app--noche .app__pie { color: rgba(245, 237, 224, 0.42); }
.app--noche .app__pie a { color: rgba(245, 237, 224, 0.6); }

/* ------------------------------------------------------------- CABECERA -- */

.marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  padding: var(--e5) 0 var(--e6);
  text-align: center;
}
.marca__logo { height: 62px; width: auto; }
.marca__texto {
  font-family: var(--fuente-titulo);
  font-size: 1.1rem;
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--marca-700);
  line-height: 1.25;
}
.marca__texto small {
  display: block;
  font-size: 0.62rem;
  font-weight: var(--peso-normal);
  color: var(--marca-400);
  letter-spacing: var(--track-rotulo);
  margin-top: var(--e1);
}

/* Barra superior con volver y música */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e2) 0 var(--e4);
  min-height: 52px;
}
.barra__titulo {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--fuente-titulo);
  font-size: 0.92rem;
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--marca-700);
}
.barra__accion {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radio-full);
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--marca-600);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--trans-rapida);
  box-shadow: var(--sombra-sm);
}
.barra__accion:hover { color: var(--marca-800); border-color: var(--marca-300); }
.barra__accion[aria-pressed="true"] {
  background: var(--marca-700);
  border-color: var(--marca-700);
  color: var(--dorado-300);
}
.barra__hueco { width: 44px; flex: none; }

/* --------------------------------------------------------------- TARJETA -- */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: var(--e8) var(--e6);
  box-shadow: var(--sombra);
}
.tarjeta--aire { padding: var(--e10) var(--e6); }

/* ------------------------------------------------------------ ORNAMENTOS -- */

.ornamento {
  display: block;
  margin: var(--e5) auto;
  width: 118px;
  height: 16px;
  color: var(--dorado-500);
}
.ornamento--sm { width: 74px; height: 11px; margin: var(--e4) auto; }

/* ------------------------------------------------------ INGRESO DE CÓDIGO */

.codigo-entrada {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e5);
}

.codigo-entrada input {
  font-family: var(--fuente-codigo);
  font-size: clamp(1.9rem, 1.1rem + 4vw, 2.6rem);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.5em;
  text-align: center;
  text-transform: uppercase;
  text-indent: 0.5em;            /* compensa el espaciado del último carácter */
  padding: var(--e5) var(--e3);
  min-height: 84px;
  border-width: 2px;
  border-color: var(--marca-300);
  border-radius: var(--radio-md);
  background: var(--superficie-2);
  color: var(--marca-800);
}
.codigo-entrada input::placeholder { color: var(--crema-400); letter-spacing: 0.5em; }

.codigo-entrada__ayuda {
  font-family: var(--fuente-ui);
  font-size: var(--texto-sm);
  color: var(--texto-suave);
  text-align: center;
  max-width: 26rem;
  line-height: 1.5;
}

/* -------------------------------------------------------------- PORTADA -- */

.portada {
  position: relative;
  border-radius: var(--radio-md);
  overflow: hidden;
  margin-bottom: var(--e5);
  background: linear-gradient(155deg, var(--marca-500), var(--marca-800) 62%, var(--marca-900));
  min-height: 190px;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--sombra-md);
}
.portada img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(42, 26, 16, 0.82), rgba(42, 26, 16, 0.10) 62%);
}
.portada__texto {
  position: relative;
  z-index: 1;
  padding: var(--e5);
  color: var(--texto-claro);
  width: 100%;
}
.portada__texto .titular {
  color: var(--texto-claro);
  font-size: 1.05rem;
  margin-bottom: var(--e1);
}
.portada__texto p {
  margin: 0;
  font-family: var(--fuente-ui);
  font-size: var(--texto-sm);
  color: rgba(251, 246, 236, 0.86);
}

/* La música vive sobre la portada, arriba a la derecha. */
.portada .musica {
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  z-index: 2;
  width: 46px; height: 46px;
  padding: 0; min-height: 0;
  border-radius: var(--radio-full);
  background: rgba(253, 251, 246, 0.92);
  border: 1px solid rgba(74, 47, 32, 0.14);
  color: var(--marca-700);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--trans-rapida);
  box-shadow: var(--sombra-sm);
}
.portada .musica:hover { transform: scale(1.06); }
.portada .musica .icono { width: 21px; height: 21px; }
.portada .musica[aria-pressed="true"] {
  background: var(--marca-700);
  color: var(--dorado-300);
  border-color: var(--marca-700);
}

/* ------------------------------------------------- LA TIRA DEL DÍA ------- */

/*
   "Día 3 de 30" va sobre una tira de papel rasgado, como en la pieza.
   El borde irregular se dibuja con un clip-path, sin imágenes.
*/
.tira-dia {
  position: relative;
  margin: calc(var(--e8) * -1) var(--e2) var(--e5);
  padding: var(--e6) var(--e5) var(--e5);
  background: var(--crema-100);
  box-shadow: var(--sombra);
  clip-path: polygon(
    0% 12%, 6% 4%, 14% 9%, 23% 2%, 33% 7%, 44% 1%, 55% 6%, 66% 0%,
    77% 6%, 87% 2%, 95% 8%, 100% 3%,
    100% 100%, 0% 100%
  );
  text-align: center;
  z-index: 2;
}

.tira-dia__numero {
  font-family: var(--fuente-texto);
  font-size: clamp(1.7rem, 1.3rem + 1.9vw, 2.3rem);
  font-weight: var(--peso-semi);
  color: var(--marca-800);
  line-height: 1.1;
  margin: 0 0 var(--e2);
}
.tira-dia__numero b {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-fuerte);
  color: var(--dorado-500);
  font-size: 1.35em;
  line-height: 1;
  padding: 0 0.06em;
}

.tira-dia__rotulo {
  font-family: var(--fuente-ui);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: var(--track-rotulo);
  color: var(--texto-tenue);
  margin: 0;
}

/* --------------------------------------------------- BARRA DE PROGRESO -- */

.semana { margin-bottom: var(--e6); }

.semana__titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--fuente-ui);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-tenue);
  font-weight: var(--peso-semi);
  margin-bottom: var(--e3);
}

.puntos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.puntos::before {
  content: "";
  position: absolute;
  left: 9px; right: 9px; top: 50%;
  height: 1.5px;
  background: var(--crema-400);
  transform: translateY(-50%);
  z-index: 0;
}

.punto {
  position: relative;
  z-index: 1;
  width: 18px; height: 18px;
  border-radius: var(--radio-full);
  background: var(--crema-100);
  border: 1.5px solid var(--borde-fuerte);
  display: grid;
  place-items: center;
  flex: none;
  transition: all var(--trans);
}
.punto span {
  font-family: var(--fuente-ui);
  font-size: 9px;
  font-weight: var(--peso-fuerte);
  color: var(--texto-tenue);
}

/* Completado: verde oliva de las hojas, como en la pieza. */
.punto--completado {
  background: var(--verde-500);
  border-color: var(--verde-500);
}
.punto--completado span { display: none; }
.punto--completado::after {
  content: "";
  position: absolute;
  width: 7px; height: 4px;
  border-left: 1.8px solid var(--crema-100);
  border-bottom: 1.8px solid var(--crema-100);
  transform: rotate(-45deg) translate(1px, -1px);
}

/* Hoy: dorado, más grande. */
.punto--hoy {
  width: 26px; height: 26px;
  background: var(--dorado-500);
  border-color: var(--dorado-600);
  box-shadow: 0 0 0 4px var(--dorado-200);
}
.punto--hoy span { color: var(--marca-900); font-size: 10px; display: block; }

/*
   En el día de hoy manda el número, no el visto: el visto encima del dígito
   los hacía ilegibles a los dos. El visto se reserva para los días pasados.
*/
.punto--hoy.punto--completado { background: var(--dorado-500); border-color: var(--dorado-600); }
.punto--hoy.punto--completado::after { content: none; }
.punto--hoy.punto--completado span { display: block; }

.punto--futuro { opacity: 0.5; }

/* ------------------------------------------------------------ EL DÍA ----- */

.oracion__bloque + .oracion__bloque {
  margin-top: var(--e6);
  padding-top: var(--e6);
  border-top: 1px solid var(--borde);
}

.oracion__rotulo {
  font-family: var(--fuente-titulo);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marca-600);
  font-weight: var(--peso-fuerte);
  margin-bottom: var(--e3);
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.oracion__rotulo .icono { width: 15px; height: 15px; color: var(--dorado-600); }

.cita {
  font-family: var(--fuente-texto);
  font-size: var(--texto-xl);
  line-height: 1.42;
  color: var(--marca-800);
  font-style: italic;
  margin: 0 0 var(--e3);
}
.cita__fuente {
  font-family: var(--fuente-ui);
  font-style: normal;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--dorado-700);
  letter-spacing: 0.03em;
}

.reflexion { line-height: var(--alto-suelto); color: var(--texto); }
.reflexion p + p { margin-top: var(--e4); }

.mision {
  background: var(--verde-100);
  border-radius: var(--radio-md);
  padding: var(--e5);
  border-left: 3px solid var(--verde-500);
}
.mision .oracion__rotulo { color: var(--verde-700); margin-bottom: var(--e2); }
.mision .oracion__rotulo .icono { color: var(--verde-500); }
.mision p { margin: 0; line-height: var(--alto-normal); }

/* Frase destacada tipo "Que Dios bendiga sus pasos" */
.bendicion {
  font-family: var(--fuente-texto);
  font-style: italic;
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.7rem);
  line-height: 1.3;
  color: var(--marca-800);
  text-align: center;
  margin: 0 0 var(--e4);
}

/* --------------------------------------------------------------- VELA ---- */

.vela-zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e5);
  padding: var(--e8) 0 var(--e4);
}

.vela {
  position: relative;
  width: 92px;
  height: 196px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.vela__cuerpo {
  width: 62px;
  height: 130px;
  border-radius: 7px 7px 5px 5px;
  background: linear-gradient(100deg, #FEFBF3 0%, #F6EDDC 46%, #E5D6BC 100%);
  box-shadow: inset -7px 0 13px rgba(120, 95, 66, 0.16),
              inset 7px 0 11px rgba(255, 255, 255, 0.6),
              var(--sombra-sm);
  position: relative;
}
.vela__cuerpo::before {
  content: "";
  position: absolute;
  top: -4px; left: 0; right: 0;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFFDF7, #EDE0C8);
}

/* El escapulario carmelita sobre la cera, como en las piezas. */
.vela__escapulario {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 32px;
  z-index: 2;
  color: var(--marca-600);
  opacity: 0.92;
}

.vela__mecha {
  position: absolute;
  bottom: 128px;
  width: 3px; height: 13px;
  background: var(--marca-800);
  border-radius: 2px;
}

.vela__llama {
  position: absolute;
  bottom: 138px;
  width: 26px; height: 46px;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 72%,
              var(--llama-nucleo) 0%, var(--llama-media) 42%, var(--llama-borde) 78%, rgba(238,139,34,0) 100%);
  opacity: 0;
  transform: scale(0.3) translateY(10px);
  transition: opacity var(--trans-lenta), transform var(--trans-lenta);
  filter: blur(0.4px);
  pointer-events: none;
}

.vela__halo {
  position: absolute;
  bottom: 96px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--llama-brillo) 0%, rgba(255,190,90,0.08) 46%, transparent 70%);
  opacity: 0;
  transition: opacity var(--trans-lenta);
  pointer-events: none;
}

.vela.encendida .vela__llama {
  opacity: 1;
  transform: scale(1) translateY(0);
  animation: parpadeo 2.6s ease-in-out infinite;
}
.vela.encendida .vela__halo { opacity: 1; animation: respirar 3.4s ease-in-out infinite; }

@keyframes parpadeo {
  0%, 100% { transform: scale(1) translateY(0) rotate(-1deg); }
  25%      { transform: scale(1.06, 0.96) translateY(-1px) rotate(1.5deg); }
  50%      { transform: scale(0.96, 1.05) translateY(1px) rotate(-1deg); }
  75%      { transform: scale(1.03, 0.98) translateY(-1px) rotate(1deg); }
}
@keyframes respirar {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

.vela--grande { width: 132px; height: 262px; }
.vela--grande .vela__cuerpo { width: 84px; height: 176px; }
.vela--grande .vela__escapulario { bottom: 40px; width: 34px; height: 42px; }
.vela--grande .vela__mecha  { bottom: 174px; height: 16px; }
.vela--grande .vela__llama  { bottom: 186px; width: 36px; height: 62px; }
.vela--grande .vela__halo   { bottom: 130px; width: 310px; height: 310px; }

.vela-leyenda {
  text-align: center;
  font-family: var(--fuente-ui);
  font-size: var(--texto-sm);
  color: var(--texto-suave);
  max-width: 24rem;
  line-height: 1.5;
}

/* Los dos gestos del día */
.acciones-dia {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  width: 100%;
}

.hecho {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  font-family: var(--fuente-ui);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--verde-700);
  background: var(--verde-100);
  border-radius: var(--radio-full);
  padding: var(--e3) var(--e5);
  min-height: 54px;
}
.hecho .icono { width: 18px; height: 18px; }

/* --------------------------------------------------------------- MODAL --- */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--e5);
  background: rgba(42, 26, 16, 0.55);
  backdrop-filter: blur(3px);
  animation: aparecer var(--trans) both;
}
.modal[hidden] { display: none !important; }

.modal__caja {
  position: relative;
  width: 100%;
  max-width: 23rem;
  max-height: 90dvh;
  overflow-y: auto;
  background: var(--crema-100);
  border-radius: var(--radio-lg);
  padding: var(--e8) var(--e6) var(--e6);
  text-align: center;
  box-shadow: var(--sombra-lg);
  animation: subir-modal var(--trans-lenta) both;
}

/*
   El modal recorta lo que se sale de su caja (necesita overflow para móviles
   bajos), así que dentro de él la vela usa un halo más contenido y deja aire
   arriba para que el resplandor no quede cortado en cuadrado.
*/
.modal .vela { margin-top: var(--e10); }
.modal .vela__halo { width: 160px; height: 160px; bottom: 102px; }

.modal__cerrar {
  position: absolute;
  top: var(--e3); right: var(--e3);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0;
  background: none;
  color: var(--texto-tenue);
  border-radius: var(--radio-full);
  cursor: pointer;
}
.modal__cerrar:hover { background: var(--crema-300); color: var(--marca-700); }

.modal__titulo {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--marca-800);
  margin: var(--e4) 0 var(--e2);
}

.modal__frase {
  font-family: var(--fuente-texto);
  font-style: italic;
  font-size: var(--texto-lg);
  line-height: 1.4;
  color: var(--marca-700);
  margin: 0 0 var(--e5);
}

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir-modal {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- RULETA -- */

.ruleta-zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e6);
  padding: var(--e4) 0;
}

.ruleta {
  position: relative;
  width: min(330px, 84vw);
  aspect-ratio: 1;
}

/* Los rayos dorados detrás de la rueda, como en la pieza. */
.ruleta::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    var(--dorado-300) 0deg 0.7deg,
    transparent 0.7deg 7.5deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 52%, #000 60%, transparent 86%);
          mask-image: radial-gradient(circle, transparent 52%, #000 60%, transparent 86%);
  opacity: 0.75;
  pointer-events: none;
}

.ruleta__aguja {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 28px solid var(--dorado-500);
  z-index: 3;
  filter: drop-shadow(0 2px 3px rgba(42, 26, 16, 0.35));
}

.ruleta__disco {
  width: 100%; height: 100%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 11px solid var(--marca-700);
  box-shadow: var(--sombra-lg), inset 0 0 0 2px var(--marca-500);
  transition: transform 5s cubic-bezier(0.15, 0.85, 0.2, 1);
  will-change: transform;
  background: var(--crema-300);
}

.ruleta__centro {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 27%; height: 27%;
  border-radius: 50%;
  background: var(--marca-700);
  border: 3px solid var(--marca-600);
  display: grid;
  place-items: center;
  z-index: 2;
  color: var(--dorado-300);
  box-shadow: var(--sombra-md), inset 0 2px 6px rgba(0,0,0,.3);
  overflow: hidden;
}
.ruleta__centro img { width: 78%; height: auto; }
.ruleta__centro .icono { width: 44%; height: 44%; }

/* Los símbolos de cada casilla */
.ruleta__simbolo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  color: var(--marca-500);
  opacity: 0.75;
  pointer-events: none;
}
.ruleta__simbolo .icono { width: 22px; height: 22px; }

.ruleta-resultado {
  text-align: center;
  min-height: 2.6rem;
  font-family: var(--fuente-ui);
  font-size: var(--texto-sm);
  color: var(--texto-suave);
}

/* --------------------------------------------------------- ASIGNACIÓN ---- */

.asignacion { text-align: center; padding: var(--e4) 0; }

.asignacion__invitacion {
  font-family: var(--fuente-texto);
  font-size: var(--texto-lg);
  color: var(--texto);
  max-width: 24rem;
  margin: 0 auto var(--e5);
  line-height: 1.45;
}

/* El nombre va sobre una tira de pergamino, en caligrafía. */
.pergamino {
  position: relative;
  margin: 0 auto var(--e2);
  padding: var(--e5) var(--e4);
  max-width: 22rem;
  background: linear-gradient(175deg, #F6EAD2 0%, #EFDFC0 48%, #F3E6CD 100%);
  box-shadow: var(--sombra), inset 0 0 30px rgba(154, 120, 68, 0.18);
  clip-path: polygon(
    0% 8%, 8% 2%, 20% 7%, 34% 1%, 50% 6%, 66% 0%, 80% 6%, 92% 1%, 100% 7%,
    100% 92%, 92% 99%, 80% 93%, 66% 100%, 50% 94%, 34% 100%, 20% 93%, 8% 98%, 0% 92%
  );
}
.pergamino__nombre {
  font-family: var(--fuente-mano);
  font-size: clamp(2rem, 1.4rem + 2.8vw, 2.9rem);
  line-height: 1.15;
  color: var(--marca-700);
  margin: 0;
  overflow-wrap: break-word;
}

.asignacion__comunidad {
  font-family: var(--fuente-ui);
  font-size: var(--texto-sm);
  color: var(--dorado-700);
  font-weight: var(--peso-semi);
  letter-spacing: 0.04em;
  margin-bottom: var(--e5);
}

.asignacion__nota {
  background: var(--crema-300);
  border-radius: var(--radio-md);
  padding: var(--e5);
  font-family: var(--fuente-ui);
  font-size: var(--texto-sm);
  line-height: 1.55;
  color: var(--texto-suave);
  margin-bottom: var(--e6);
}

/* ----------------------------------------------------------- MÉTRICAS ---- */

.metricas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e3);
  margin: var(--e6) 0;
}
.metrica {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  padding: var(--e5) var(--e4);
  text-align: center;
}
.metrica__icono {
  width: 28px; height: 28px;
  color: var(--marca-500);
  margin-bottom: var(--e2);
}
.metrica__numero {
  font-family: var(--fuente-texto);
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem);
  font-weight: var(--peso-semi);
  color: var(--marca-800);
  line-height: 1;
  display: block;
  margin-bottom: var(--e2);
  font-variant-numeric: tabular-nums;
}
.metrica__rotulo {
  font-family: var(--fuente-ui);
  font-size: var(--texto-xs);
  color: var(--texto-suave);
  line-height: 1.3;
}

/* En la variante nocturna las métricas son vidrio sobre la fotografía. */
.app--noche .metrica {
  background: var(--noche-vidrio);
  border-color: var(--noche-borde);
  backdrop-filter: blur(6px);
}
.app--noche .metrica__icono  { color: var(--crema-300); }
.app--noche .metrica__numero { color: var(--noche-texto); }
.app--noche .metrica__rotulo { color: var(--noche-suave); }

.cierre { text-align: center; margin-top: var(--e6); position: relative; z-index: 1; }

/*
   La fotografía de cierre ocupa toda la pantalla detrás de las métricas,
   virada a sepia, como en la pieza. Va fija al fondo para que el contenido
   flote sobre ella al desplazarse.
*/
/*
   z-index negativo, no 0: con 0 el fondo se pinta por ENCIMA de los hermanos
   sin posicionar (las tarjetas de métricas) y la pantalla queda en blanco.
*/
.fondo-foto {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.fondo-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.45) saturate(0.75) brightness(0.62);
}
.fondo-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(44, 29, 18, 0.88) 0%,
    rgba(44, 29, 18, 0.55) 42%,
    rgba(44, 29, 18, 0.92) 100%);
}
.app--noche .app__contenido { position: relative; z-index: 1; }
.cierre__frase {
  font-family: var(--fuente-texto);
  font-size: var(--texto-xl);
  font-style: italic;
  color: var(--marca-700);
  line-height: 1.45;
}
.app--noche .cierre__frase { color: var(--noche-texto); }

/* --------------------------------------------------------------- MENÚ ---- */

.menu-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e2);
}
.menu-lista a {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e4) var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  text-decoration: none;
  color: var(--texto);
  font-family: var(--fuente-ui);
  font-size: var(--texto-base);
  transition: all var(--trans-rapida);
}
.menu-lista a:hover { border-color: var(--marca-300); background: var(--crema-100); }
.menu-lista .icono { width: 20px; height: 20px; color: var(--marca-500); flex: none; }
.menu-lista .crece { flex: 1 1 auto; }
.menu-lista .flecha { width: 16px; height: 16px; color: var(--texto-tenue); flex: none; }

/* ------------------------------------------------------------- ENTRADA --- */

.entra { animation: entrar var(--trans-lenta) both; }
.entra--2 { animation-delay: 90ms; }
.entra--3 { animation-delay: 180ms; }
.entra--4 { animation-delay: 270ms; }

@keyframes entrar {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------- VELA FOTOGRÁFICA ---------- */

/*
   Cuando el proyecto sube sus propias fotos de la vela, se usan en lugar del
   dibujo. El resplandor se mantiene porque es lo que da la sensación de que
   la llama está viva.
*/
/*
   Nada de grid aquí: el centrado del grid se sumaría al del halo absoluto
   y el resplandor quedaría corrido respecto de la llama.
*/
.vela-foto {
  position: relative;
  width: 200px;
  margin: 0 auto;
}
.vela-foto img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
}
/*
   El centrado NO puede depender de transform: la animación "respirar"
   redefine transform con su scale y se llevaría por delante el translate.
   Con left/right en 0 y margen automático, el centrado sobrevive.
*/
.vela-foto__halo {
  position: absolute;
  top: 6%;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--llama-brillo) 0%, rgba(255,190,90,0.08) 46%, transparent 70%);
  opacity: 0;
  transition: opacity var(--trans-lenta);
  pointer-events: none;
}
.vela-foto.encendida .vela-foto__halo { opacity: 1; animation: respirar 3.4s ease-in-out infinite; }

.vela-foto.vela--grande { width: 250px; }
.vela-foto.vela--grande .vela-foto__halo { width: 290px; height: 290px; }

.modal .vela-foto { margin-top: var(--e4); width: 170px; }
.modal .vela-foto__halo { width: 170px; height: 170px; }

/* ---------------------------------------------- RULETA FOTOGRÁFICA -------- */

.ruleta__foto {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 5s cubic-bezier(0.15, 0.85, 0.2, 1);
  will-change: transform;
}
/* Con imagen propia, el disco dibujado y sus símbolos sobran. */
.ruleta--foto .ruleta__disco { display: none; }
.ruleta--foto::before { opacity: 0.5; }

/* Logo suelto sobre la rueda fotográfica: sin disco, sin borde, sin sombra. */
.ruleta__centro--desnudo {
  background: none;
  border: 0;
  box-shadow: none;
  width: 22%;
  height: 22%;
  overflow: visible;
}
.ruleta__centro--desnudo img { width: 100%; }

/* ------------------------------------------------ VARIANTE NOCTURNA: TEXTO */

/*
   Con fotografía de cierre el fondo se vuelve sepia oscuro. Todo lo que
   hereda el color de texto normal quedaría ilegible, así que aquí se
   redefine pieza por pieza. Es la contraparte del bloque .app--noche
   de más arriba, que solo cubría los titulares.
*/
.app--noche .reflexion,
.app--noche .tarjeta p,
.app--noche .tarjeta li { color: var(--noche-texto); }

.app--noche .cita          { color: var(--noche-texto); }
.app--noche .cita__fuente  { color: var(--dorado-300); }
.app--noche .oracion__rotulo { color: var(--dorado-300); }
.app--noche .oracion__rotulo .icono { color: var(--dorado-400); }
.app--noche .oracion__bloque + .oracion__bloque { border-top-color: var(--noche-borde); }

.app--noche .vela-leyenda      { color: var(--noche-suave); }
.app--noche .asignacion__nota  { background: var(--noche-vidrio); color: var(--noche-suave); }
.app--noche .asignacion__invitacion { color: var(--noche-texto); }
.app--noche .asignacion__comunidad  { color: var(--dorado-300); }
.app--noche .bendicion         { color: var(--noche-texto); }

.app--noche .mision {
  background: rgba(168, 192, 136, 0.12);
  border-left-color: var(--verde-300);
}
.app--noche .mision .oracion__rotulo,
.app--noche .mision .oracion__rotulo .icono { color: var(--verde-300); }

.app--noche .hecho { background: var(--noche-vidrio); color: var(--verde-300); }
.app--noche .ornamento { color: var(--dorado-400); }
.app--noche .barra__titulo { color: var(--noche-texto); }
.app--noche .barra__accion {
  background: var(--noche-vidrio);
  border-color: var(--noche-borde);
  color: var(--noche-texto);
}
.app--noche .marca__texto { color: var(--noche-texto); }
.app--noche .marca__texto small { color: var(--noche-suave); }

.app--noche .menu-lista a {
  background: var(--noche-vidrio);
  border-color: var(--noche-borde);
  color: var(--noche-texto);
}
.app--noche .menu-lista .icono { color: var(--dorado-300); }

/* Símbolo del modal de la oración, donde la vela tiene su llama. */
.modal__simbolo {
  width: 46px;
  height: 46px;
  color: var(--dorado-600);
  margin: var(--e4) auto 0;
  display: block;
}