/* dia-de-muertos.css — Banner temático de Día de Muertos (SWH-63)
   Contenido temporal: se apaga solo por fechas (dia-de-muertos-2026.json).
   Retiro: borrar este archivo, dia-de-muertos.js y el JSON. */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');

/* Reserva la altura desde el primer render (CLS); el JS colapsa el
   contenedor si el banner no va a mostrarse. */
#dia-de-muertos-banner { min-height: 84px; }

@media (max-width: 1100px) { #dia-de-muertos-banner { min-height: 110px; } }
@media (max-width: 640px)  { #dia-de-muertos-banner { min-height: 132px; } }

.dm26 {
  position: relative;
  background: #140a14;
  color: #fff;
  font-family: inherit;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Papel picado: tira de banderines de colores con borde en picos */
.dm26__papel {
  height: 14px;
  background: repeating-linear-gradient(90deg,
    #ff8a00 0 36px, #d6006e 36px 72px, #2ADD90 72px 108px,
    #720272 108px 144px, #ffd23f 144px 180px);
  background-size: 180px 100%;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
  animation: dm26-papel 12s linear infinite;
}

@keyframes dm26-papel {
  to { background-position: 180px 0; }
}

.dm26__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 18px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
}

.dm26__headline {
  font-size: 19px;
  font-weight: 800;
  margin: 0;
  white-space: nowrap;
  color: #ffb000;
}

/* Flor de cempasúchil hecha con gradientes (sin imágenes) */
.dm26__flor {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -2px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd23f 0 28%, #ff8a00 30% 62%, #ff6a00 64% 100%);
  box-shadow: 0 0 10px rgba(255,138,0,0.7);
}

.dm26__ctx {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.dm26__hoy { color: #ffb000; font-weight: 800; }

.dm26__count {
  font-family: Consolas, 'Cascadia Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  color: #ff9d3c;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin: 0;
}

.dm26__count span {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  font-weight: 400;
}

.dm26__vela-btn {
  background: #720272;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 9px 22px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: transform 0.12s, background 0.15s;
}

.dm26__vela-btn:hover { background: #9b03b0; }
.dm26__vela-btn:active { transform: scale(0.94); }
.dm26__vela-btn:focus-visible { outline: 2px solid #ffb000; outline-offset: 2px; }

/* Ofrenda: velas encendidas, una por clic */
.dm26__ofrenda {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  min-height: 34px;
}

.dm26__vela {
  position: relative;
  display: block;
  width: 9px;
  height: 26px;
}

.dm26__cuerpo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f4ead2, #fff6df 50%, #e9dcb8);
}

.dm26__llama {
  position: absolute;
  left: 50%; bottom: 15px;
  width: 7px;
  height: 11px;
  margin-left: -3.5px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 70%, #fff6a8 0 25%, #ffb000 55%, #ff6a00 100%);
  box-shadow: 0 0 10px 3px rgba(255,176,0,0.55);
  animation: dm26-llama 1.4s ease-in-out infinite alternate;
}

.dm26__vela:nth-child(2n) .dm26__llama { animation-delay: -0.5s; }
.dm26__vela:nth-child(3n) .dm26__llama { animation-delay: -0.9s; }

@keyframes dm26-llama {
  from { transform: scale(1) rotate(-3deg); }
  to   { transform: scale(1.12, 0.94) rotate(3deg); }
}

.dm26__frase {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  font-weight: 700;
  color: #ffb000;
  text-shadow: 0 0 14px rgba(255,138,0,0.45);
  margin: 0;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .dm26__frase {
    flex-basis: 100%;
    max-width: none;
    text-align: center;
    white-space: normal;
    font-size: 19px;
    line-height: 1.25;
  }
}

@media (max-width: 640px) {
  .dm26__inner { gap: 8px 14px; padding: 10px 14px 10px; }
  .dm26__headline { font-size: 16px; }
  .dm26__ctx { font-size: 13px; }
  .dm26__count { font-size: 14.5px; }
  .dm26__vela-btn { font-size: 11.5px; padding: 7px 16px; }
  .dm26__frase { font-size: 17px; }
}

/* Canvas de pétalos (creado por JS al encender una vela) */
#dm26-fx {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .dm26__papel, .dm26__llama { animation: none; }
  #dm26-fx { display: none; }
}