/* =======================================================
   TEMPORADA: DÍA DE MUERTOS
   Para quitarla: borra la línea <link> de este archivo en index.html
   y el bloque <p class="aviso-temporada">. No toca nada más.
   ======================================================= */

:root {
  --noche: #1d1033;
  --cempasuchil: #ffa81f;
  --violeta: #5b2a9e;
  --violeta-suave: #f1e8fb;

  --color-accent: var(--violeta);
  --color-border-dashed: #d8b4fe;
  --color-icon-blue: #fde7c2;
  --color-icon-purple: #ead9fb;
  --color-icon-green: #fbd5e3;
}

/* Barra de aviso */
.aviso-temporada {
  background: var(--cempasuchil);
  color: var(--noche);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 9px 16px;
}

.aviso-temporada a {
  color: var(--noche);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hero nocturno con papel picado */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 50% 108%, rgba(255, 168, 31, 0.42), transparent 70%),
    radial-gradient(40% 50% at 8% 20%, rgba(214, 36, 110, 0.22), transparent 70%),
    var(--noche);
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: -4%;
  right: -4%;
  height: 72px;
  background: url("../img/papel-picado.svg") repeat-x top center / auto 72px;
  transform-origin: top center;
  animation: balanceo 5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes balanceo {
  from { transform: rotate(-0.5deg); }
  to   { transform: rotate(0.5deg); }
}

.hero__container {
  position: relative;
  padding-top: 132px;
}

.hero__title { color: #ffffff; }
.hero__title-accent { color: var(--cempasuchil); }
.hero__subtitle { color: #e4d7f5; }

.hero .button--primary {
  background-color: var(--cempasuchil);
  color: var(--noche);
}

.hero .button--primary:hover {
  background-color: #ffc15a;
}

.hero .button--secondary {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
}

.hero .button--secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}

/* Resto de secciones */
.proceso { background: #f3edfb; }
.subtitulo { color: var(--violeta); }
.planes { background: #fffaf0; }

.section-label,
.plan-features li::before { color: var(--violeta); }

.badge {
  background: var(--violeta-suave);
  color: var(--violeta);
}

.plan-card:hover { border-color: #e3d1f7; }

.plan-card--featured {
  border-color: #e3d1f7;
  box-shadow: 0 12px 32px rgba(91, 42, 158, 0.12);
}

.plan-btn--primary {
  background: var(--violeta);
  border-color: var(--violeta);
}

/* Proceso y ejemplos: los azules restantes pasan a la paleta */
.number { color: var(--violeta); }
.dot { background: var(--cempasuchil); }
.circle img { filter: hue-rotate(55deg); }

.industry-card:hover { border-color: var(--violeta); }
.industry-card span { color: var(--violeta); }
.industry-icon { background: #fdeccd; }

@media (max-width: 480px) {
  .hero::before { height: 56px; background-size: auto 56px; }
  .hero__container { padding-top: 96px; }
}


/* =======================================================
   ANIMACIÓN DE ENTRADA: mariposa monarca hacia el cempasúchil
   (≈3 s, una vez por visita, se salta con clic o Esc)
   ======================================================= */

.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  background:
    radial-gradient(60% 50% at 75% 62%, rgba(255, 168, 31, 0.35), transparent 70%),
    var(--noche);
  animation: intro-salir 0.5s ease 2.8s forwards;
}

.intro svg { width: min(90vw, 520px); height: auto; overflow: visible; }

.intro__marca {
  color: #fff;
  font: 700 1.6rem/1 "Bitstream Charter", "Caladea", Georgia, serif;
  letter-spacing: 0.02em;
  opacity: 0;
  animation: intro-in 0.6s ease 1.5s forwards;
}

.flor__in {
  transform-box: fill-box;
  transform-origin: center;
  animation: brotar 1.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.1s both, latido 0.5s ease-in-out 2s;
}

.ala { transform-box: fill-box; animation: aleteo 0.2s ease-in-out infinite alternate; }
.ala--izq { transform-origin: left center; }
.ala--der { transform-origin: left center; }

@keyframes brotar { from { transform: scale(0.15); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes latido { 50% { transform: scale(1.1); } }
@keyframes aleteo { from { transform: scaleX(1); } to { transform: scaleX(0.25); } }
@keyframes intro-in { to { opacity: 1; } }
@keyframes intro-salir { to { opacity: 0; visibility: hidden; } }

.intro--fuera { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; }
.sin-intro .intro { display: none; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}