/* ==========================================================================
   TEMPORADA DÍA DE MUERTOS — ARTE VISUAL, CALACAS, TELARAÑAS Y CEMPASÚCHIL
   Sin etiquetas de texto invasivas. Integra figuras SVG artesanales,
   calacas animadas, telarañas en esquinas con araña colgante, flores de
   cempasúchil, veladoras con flama viva y papel picado en todas las páginas
   y secciones, respetando 100% tipografía, logo y colores oficiales.
   ========================================================================== */

:root {
  --muertos-gold: #fde047;
  --muertos-cempasuchil: #f59e0b;
  --muertos-naranja: #ea580c;
  --muertos-rosa: #ec4899;
  --muertos-morado: #a855f7;

  /* Papel Picado Calado con Calacas y Flores de Cempasúchil */
  --papel-picado-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='42' viewBox='0 0 360 42'%3E%3Cdefs%3E%3ClinearGradient id='cuerda' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%2310b981'/%3E%3Cstop offset='25%25' stop-color='%23f59e0b'/%3E%3Cstop offset='50%25' stop-color='%23ec4899'/%3E%3Cstop offset='75%25' stop-color='%23a855f7'/%3E%3Cstop offset='100%25' stop-color='%2310b981'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='360' height='2.5' fill='url(%23cuerda)'/%3E%3Cg%3E%3C!-- Banderín 1: Calaca en Cempasúchil --%3E%3Cpath d='M5 2.5 H85 V26 L75 36 L65 28 L55 37 L45 28 L35 37 L25 28 L15 36 L5 26 Z' fill='%23291304' stroke='%23f59e0b' stroke-width='1.2'/%3E%3Ccircle cx='45' cy='14' r='6.5' fill='%23fef3c7'/%3E%3Crect x='41' y='18' width='8' height='4.5' rx='1' fill='%23fef3c7'/%3E%3Ccircle cx='42.6' cy='13.5' r='1.7' fill='%23291304'/%3E%3Ccircle cx='47.4' cy='13.5' r='1.7' fill='%23291304'/%3E%3Cpath d='M45 15.5 L43.8 17.5 H46.2 Z' fill='%23ec4899'/%3E%3Cline x1='43' y1='19.5' x2='43' y2='22' stroke='%23291304' stroke-width='1'/%3E%3Cline x1='45' y1='19.5' x2='45' y2='22' stroke='%23291304' stroke-width='1'/%3E%3Cline x1='47' y1='19.5' x2='47' y2='22' stroke='%23291304' stroke-width='1'/%3E%3Ccircle cx='20' cy='12' r='2.2' fill='%23fde047'/%3E%3Ccircle cx='70' cy='12' r='2.2' fill='%23fde047'/%3E%3Ccircle cx='20' cy='21' r='1.6' fill='%23fb923c'/%3E%3Ccircle cx='70' cy='21' r='1.6' fill='%23fb923c'/%3E%3C!-- Banderín 2: Flor de Cempasúchil en Verde Oficial --%3E%3Cpath d='M95 2.5 H175 V26 L165 36 L155 28 L145 37 L135 28 L125 37 L115 28 L105 36 L95 26 Z' fill='%2307261b' stroke='%2310b981' stroke-width='1.2'/%3E%3Ccircle cx='135' cy='16' r='4.2' fill='%23fde047'/%3E%3Ccircle cx='135' cy='8.8' r='2.4' fill='%23f59e0b'/%3E%3Ccircle cx='135' cy='23.2' r='2.4' fill='%23f59e0b'/%3E%3Ccircle cx='127.8' cy='16' r='2.4' fill='%23f59e0b'/%3E%3Ccircle cx='142.2' cy='16' r='2.4' fill='%23f59e0b'/%3E%3Ccircle cx='129.8' cy='10.8' r='2' fill='%23fb923c'/%3E%3Ccircle cx='140.2' cy='10.8' r='2' fill='%23fb923c'/%3E%3Ccircle cx='129.8' cy='21.2' r='2' fill='%23fb923c'/%3E%3Ccircle cx='140.2' cy='21.2' r='2' fill='%23fb923c'/%3E%3Ccircle cx='110' cy='14' r='2' fill='%2310b981'/%3E%3Ccircle cx='160' cy='14' r='2' fill='%2310b981'/%3E%3C!-- Banderín 3: Calaca en Morado Ofrenda --%3E%3Cpath d='M185 2.5 H265 V26 L255 36 L245 28 L235 37 L225 28 L215 37 L205 28 L195 36 L185 26 Z' fill='%231c0b2b' stroke='%23a855f7' stroke-width='1.2'/%3E%3Ccircle cx='225' cy='14' r='6.5' fill='%23f5d0fe'/%3E%3Crect x='221' y='18' width='8' height='4.5' rx='1' fill='%23f5d0fe'/%3E%3Ccircle cx='222.6' cy='13.5' r='1.7' fill='%231c0b2b'/%3E%3Ccircle cx='227.4' cy='13.5' r='1.7' fill='%231c0b2b'/%3E%3Cpath d='M225 15.5 L223.8 17.5 H226.2 Z' fill='%23f59e0b'/%3E%3Ccircle cx='200' cy='13' r='2.2' fill='%23c084fc'/%3E%3Ccircle cx='250' cy='13' r='2.2' fill='%23c084fc'/%3E%3C!-- Banderín 4: Rosa Mexicano Calado --%3E%3Cpath d='M275 2.5 H355 V26 L345 36 L335 28 L325 37 L315 28 L305 37 L295 28 L285 36 L275 26 Z' fill='%232b091c' stroke='%23ec4899' stroke-width='1.2'/%3E%3Ccircle cx='315' cy='16' r='4.2' fill='%23fde047'/%3E%3Ccircle cx='315' cy='8.8' r='2.4' fill='%23f472b6'/%3E%3Ccircle cx='315' cy='23.2' r='2.4' fill='%23f472b6'/%3E%3Ccircle cx='307.8' cy='16' r='2.4' fill='%23f472b6'/%3E%3Ccircle cx='322.2' cy='16' r='2.4' fill='%23f472b6'/%3E%3Ccircle cx='290' cy='14' r='2' fill='%23f472b6'/%3E%3Ccircle cx='340' cy='14' r='2' fill='%23f472b6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   1. GUIRNALDA SUPERIOR E INFERIOR DE PAPEL PICADO
   ========================================================================== */
.temporada-garland-top {
  position: relative;
  width: 100%;
  height: 36px;
  background-image: var(--papel-picado-svg);
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 340px 36px;
  pointer-events: none;
  z-index: 95;
  opacity: 0.96;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
  transform-origin: top center;
  animation: papelPicadoWave 6s ease-in-out infinite alternate;
}

@keyframes papelPicadoWave {
  0% {
    transform: translateY(0) scaleY(0.98);
  }
  100% {
    transform: translateY(1.5px) scaleY(1.04);
  }
}

.site-footer {
  position: relative;
}

.site-footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background-image: var(--papel-picado-svg);
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 320px 32px;
  opacity: 0.88;
  pointer-events: none;
}

/* ==========================================================================
   2. TELARAÑAS EN LAS ESQUINAS DE LA PANTALLA + ARAÑA ANIMADA EN HILO
   ========================================================================== */
.temporada-corner-web {
  position: fixed;
  top: 0;
  width: 170px;
  height: 170px;
  pointer-events: none;
  z-index: 88;
  opacity: 0.55;
  filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.22));
  transition: opacity 0.3s ease;
}

.temporada-corner-web--left {
  left: 0;
}

.temporada-corner-web--right {
  right: 0;
  transform: scaleX(-1);
}

.temporada-corner-web svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Araña colgando de su hilo con animación suave */
.temporada-hanging-spider {
  position: fixed;
  top: 0;
  left: 64px;
  width: 34px;
  height: 140px;
  pointer-events: none;
  z-index: 89;
  transform-origin: top center;
  animation: spiderDropBounce 7.5s ease-in-out infinite;
}

.temporada-hanging-spider--right {
  left: auto;
  right: 72px;
  animation-duration: 9s;
  animation-delay: -3.2s;
}

@keyframes spiderDropBounce {
  0%, 100% {
    transform: translateY(-18px) rotate(-2deg);
  }
  45% {
    transform: translateY(14px) rotate(2.5deg);
  }
  70% {
    transform: translateY(4px) rotate(-1deg);
  }
}

/* ==========================================================================
   3. DECORACIÓN VISUAL EN CADA SECCIÓN (TELARAÑAS, CALACAS, FLORES Y VELAS)
   ========================================================================== */
main > section,
.section,
.legal-section,
.section-block,
.cta-band {
  position: relative;
}

/* Línea luminosa de ofrenda al inicio de cada sección */
main > section::before,
.legal-section::before,
.section-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16, 185, 129, 0.32) 15%,
    rgba(245, 158, 11, 0.72) 40%,
    rgba(253, 224, 71, 0.95) 50%,
    rgba(236, 72, 153, 0.65) 60%,
    rgba(168, 85, 247, 0.38) 85%,
    transparent 100%
  );
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.25);
  pointer-events: none;
}

/* Emblema central de Calaca y Cempasúchil en el divisor de cada sección */
.temporada-section-emblem {
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(28, 18, 8, 0.96), rgba(7, 22, 16, 0.96));
  border: 1px solid rgba(251, 191, 36, 0.45);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(245, 158, 11, 0.22);
  pointer-events: none;
  z-index: 6;
}

.temporada-section-emblem svg {
  width: 22px;
  height: 22px;
  display: block;
}

.temporada-section-emblem .emblem-flower {
  width: 17px;
  height: 17px;
  animation: cempasuchilSpinSlow 18s linear infinite;
}

.temporada-section-emblem .emblem-skull {
  width: 24px;
  height: 24px;
  animation: calacaNod 4.2s ease-in-out infinite;
}

/* Telarañas sutiles dentro de las esquinas de cada sección */
.temporada-section-web {
  position: absolute;
  top: 2px;
  width: 88px;
  height: 88px;
  pointer-events: none;
  opacity: 0.38;
  z-index: 2;
}

.temporada-section-web--left {
  left: 0;
}

.temporada-section-web--right {
  right: 0;
  transform: scaleX(-1);
}

.temporada-section-web svg {
  width: 100%;
  height: 100%;
}

/* Figuras flotantes de Calacas, Catrinas, Veladoras y Mariposas en las secciones */
.temporada-section-figure {
  position: absolute;
  width: 68px;
  height: 68px;
  pointer-events: none;
  z-index: 3;
  opacity: 0.86;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45))
          drop-shadow(0 0 14px rgba(245, 158, 11, 0.22));
  animation: figureFloat 5.5s ease-in-out infinite;
}

.temporada-section-figure--right {
  top: 26px;
  right: max(1.2rem, 3%);
}

.temporada-section-figure--left {
  top: 26px;
  left: max(1.2rem, 3%);
  animation-delay: -2.6s;
}

.temporada-section-figure svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Animaciones de las figuras */
@keyframes figureFloat {
  0%, 100% {
    transform: translateY(0) rotate(-3deg) scale(1);
  }
  50% {
    transform: translateY(-9px) rotate(3deg) scale(1.04);
  }
}

@keyframes calacaNod {
  0%, 100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-2.5px) rotate(4deg);
  }
}

@keyframes cempasuchilSpinSlow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes candleFlameFlicker {
  0%, 100% {
    transform: scale(1) rotate(-2deg);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.12, 0.92) rotate(2deg);
    opacity: 1;
  }
}

.temporada-flame {
  transform-origin: center bottom;
  animation: candleFlameFlicker 1.8s ease-in-out infinite;
}

/* ==========================================================================
   4. LLUVIA DE PÉTALOS DE CEMPASÚCHIL, MARIPOSAS Y LUCES DE OFRENDA
   ========================================================================== */
.temporada-petals-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 65;
  overflow: hidden;
}

body.temporada-effects-paused .temporada-petals-layer,
body.temporada-effects-paused .temporada-hanging-spider {
  display: none !important;
}

.temporada-petal {
  position: absolute;
  top: -40px;
  pointer-events: none;
  will-change: transform, opacity;
  animation: temporadaPetalFall linear infinite;
}

.temporada-petal--marigold {
  width: 14px;
  height: 18px;
  border-radius: 85% 15% 85% 15%;
  background: radial-gradient(circle at 30% 30%, #fef08a 0%, #f59e0b 60%, #ea580c 100%);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
  opacity: 0.78;
}

.temporada-petal--amber {
  width: 11px;
  height: 15px;
  border-radius: 80% 20% 80% 20%;
  background: radial-gradient(circle at 30% 30%, #fde047 0%, #fb923c 70%, #d97706 100%);
  box-shadow: 0 0 8px rgba(251, 146, 60, 0.38);
  opacity: 0.68;
}

.temporada-petal--rosa {
  width: 10px;
  height: 14px;
  border-radius: 80% 20% 80% 20%;
  background: radial-gradient(circle at 35% 35%, #fbcfe8 0%, #ec4899 75%, #be185d 100%);
  box-shadow: 0 0 9px rgba(236, 72, 153, 0.38);
  opacity: 0.58;
}

.temporada-petal--calaca-mini {
  width: 20px;
  height: 20px;
  opacity: 0.72;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.45));
}

.temporada-petal--veladora {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fef9c3 0%, #fbbf24 65%, transparent 100%);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.8);
  opacity: 0.65;
}

@keyframes temporadaPetalFall {
  0% {
    transform: translate3d(0, -36px, 0) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 0.82;
  }
  50% {
    transform: translate3d(34px, 48vh, 0) rotate(185deg);
  }
  88% {
    opacity: 0.68;
  }
  100% {
    transform: translate3d(-24px, 104vh, 0) rotate(360deg);
    opacity: 0;
  }
}

/* ==========================================================================
   5. BOTÓN FLOTANTE COMPACTO DE CONTROL DE ANIMACIÓN (ESQUINA INFERIOR)
   ========================================================================== */
.temporada-toggle-btn {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.78rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(11, 31, 23, 0.94), rgba(24, 15, 32, 0.92));
  border: 1px solid rgba(251, 191, 36, 0.48);
  color: #fef08a;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.45),
    0 0 16px rgba(245, 158, 11, 0.18);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.temporada-toggle-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.temporada-toggle-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(253, 224, 71, 0.9);
}

.temporada-toggle-btn[aria-pressed="false"] {
  opacity: 0.72;
  border-color: rgba(16, 185, 129, 0.35);
  color: #a7f3d0;
}

/* ==========================================================================
   6. BANNER DE COOKIES GLOBAL (PARA PÁGINAS SECUNDARIAS)
   ========================================================================== */
.cookie-banner-fallback {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1.1rem;
  z-index: 999;
  max-width: 920px;
  margin: 0 auto;
  padding: 1rem 1.2rem;
  border-radius: 18px;
  background: rgba(9, 25, 20, 0.96);
  border: 1px solid rgba(16, 185, 129, 0.38);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  color: #f3f7f4;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.cookie-banner-fallback[hidden] {
  display: none !important;
}

.cookie-banner-fallback .cookie-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cookie-banner-fallback .cookie-banner-copy {
  flex: 1 1 420px;
}

.cookie-banner-fallback .cookie-banner-title {
  margin: 0 0 0.25rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #10b981;
}

.cookie-banner-fallback .cookie-banner-text {
  margin: 0;
  font-size: 0.82rem;
  color: #d1fae5;
  line-height: 1.45;
}

.cookie-banner-fallback .cookie-banner-text a {
  color: #fbbf24;
  text-decoration: underline;
}

.cookie-banner-fallback .cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cookie-banner-fallback .cookie-btn-accept {
  padding: 0.52rem 1rem;
  border-radius: 999px;
  border: 1px solid #10b981;
  background: #10b981;
  color: #051b14;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

.cookie-banner-fallback .cookie-btn-link {
  padding: 0.48rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
  text-decoration: none;
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  /* En móviles y tablets: CERO estorbos visuales. Nada de telarañas ni arañas sobre el menú o logo */
  .temporada-corner-web,
  .temporada-hanging-spider,
  .temporada-section-figure,
  .temporada-section-web,
  .temporada-section-emblem {
    display: none !important;
  }

  .temporada-garland-top {
    height: 18px;
    background-size: 220px 18px;
    opacity: 0.9;
  }

  .site-footer::after {
    height: 20px;
    background-size: 220px 20px;
  }

  .temporada-toggle-btn {
    left: 0.75rem;
    bottom: 5rem;
    padding: 0.32rem 0.65rem;
    font-size: 0.68rem;
  }
}

@media (max-width: 600px) {
  .temporada-garland-top {
    height: 16px;
    background-size: 190px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .temporada-petals-layer,
  .temporada-hanging-spider {
    display: none !important;
  }
  .temporada-garland-top,
  .temporada-section-figure,
  .temporada-section-emblem .emblem-flower,
  .temporada-section-emblem .emblem-skull {
    animation: none !important;
  }
}