/* =========================================================
   CasFi — Tema de Halloween (compartido)
   Se activa con la clase .halloween en <html> (js/tema.js).
   Para quitarlo del todo: borra este archivo de los <link>.
   ========================================================= */

.halloween { --candle: #FDBA74; --pumpkin: #F97316; }

/* ---------- Logo: el cuadro naranja se vuelve calabaza ---------- */
.pumpkin-face { display: none; fill: #2A1205; }
.halloween .pumpkin-face { display: inline; }
.halloween .sq-empresa-b { fill: var(--pumpkin); animation: candle 3.2s ease-in-out infinite; }
@keyframes candle {
  0%, 100% { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--candle) 70%, transparent)); }
  40%      { filter: drop-shadow(0 0 5px var(--candle)); }
  55%      { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--candle) 55%, transparent)); }
}

/* ---------- Logo: Casfi con sombrero de bruja ----------
   Va encima de la cabeza (.brand-mark, el primer hijo de .brand), un poco a la
   derecha del centro, y se mece despacio. --marca es el tamaño del logo. */
.brand { --marca: 32px; }
.footer .brand { --marca: 26px; }
.halloween .brand { position: relative; }
.halloween .brand::before {
  content: "";
  position: absolute;
  left: calc(var(--marca) * .22);
  top: calc(50% - var(--marca) * .8);
  width: calc(var(--marca) * .7);
  aspect-ratio: 100 / 80;
  background: url("../assets/casfi/sombrero-bruja.svg") no-repeat center / contain;
  transform-origin: 50% 85%;
  rotate: -9deg;
  animation: sombrero 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sombrero {
  0%, 100% { rotate: -9deg; }
  50% { rotate: -3deg; }
}

/* ---------- Luna y murciélagos ---------- */
.spooky { display: none; }
.halloween .spooky { display: block; position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.halloween .spooky-hero { position: absolute; z-index: 0; }

.moon {
  position: absolute; top: 7vh; right: 9vw; width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #FFF7E6, #F6E3BC 60%, #E7C98E);
  box-shadow: 0 0 60px 10px rgba(253, 230, 170, .18);
  opacity: .9;
}
.spooky-hero .moon { top: 24px; right: 4vw; }

.bat { position: absolute; left: -60px; width: 46px; fill: #07050D; }
.bat-1 { top: calc(7vh + 30px); animation: fly 26s linear infinite; }
.bat-2 { top: 26vh; width: 30px; animation: fly 34s linear infinite 9s; }
.bat-3 { top: calc(7vh + 58px); width: 22px; animation: fly 41s linear infinite 18s; }
.spooky-hero .bat-1 { top: 48px; }
.spooky-hero .bat-2 { top: 120px; }
.spooky-hero .bat-3 { top: 78px; }
@keyframes fly {
  0%   { transform: translate(0, 0) scaleY(1); }
  10%  { transform: translate(12vw, -14px) scaleY(.6); }
  20%  { transform: translate(24vw, 6px) scaleY(1); }
  30%  { transform: translate(36vw, -10px) scaleY(.6); }
  40%  { transform: translate(48vw, 8px) scaleY(1); }
  50%  { transform: translate(60vw, -12px) scaleY(.6); }
  60%  { transform: translate(72vw, 4px) scaleY(1); }
  70%  { transform: translate(84vw, -8px) scaleY(.6); }
  80%, 100% { transform: translate(calc(100vw + 120px), 0) scaleY(1); }
}

/* =========================================================
   Sitio (página principal y préstamos): noche morada
   ========================================================= */
.halloween .site {
  --bg: #130F22;
  --surface: #1D1733;
  --ink: #0C0918;
  --ink-2: #1A1430;
  --text: #F3EEF9;
  --muted: #A89FC2;
  --line: #3A3157;
  --pos: #4ADE80;
  --neg: #F87171;
  --warn: #FBBF24;
  color-scheme: dark;
}
.halloween .site .hero {
  background: radial-gradient(900px 500px at 85% 0%, rgba(124, 58, 237, .18), transparent 70%);
}

/* Navegación y botones */
.halloween .site .nav { background: rgba(19, 15, 34, .86); }
.halloween .site .btn-primary { background: var(--pumpkin); color: #1A0E05; }
.halloween .site .btn-primary:hover { background: #FB8A3C; }
.halloween .site .btn-dark { background: var(--pumpkin); color: #1A0E05; }
.halloween .site .btn-dark:hover { background: #FB8A3C; }
.halloween .site .btn-ghost { border-color: #5A4F80; color: var(--text); }
.halloween .site .btn-ghost:hover { border-color: var(--text); }
.halloween .site :focus-visible { outline-color: var(--pumpkin); }

/* Demo del inicio */
.halloween .site .app { box-shadow: 0 0 0 1px var(--line), 0 30px 60px -24px rgba(0, 0, 0, .7); }
.halloween .site .app-main { background: #17122A; }
.halloween .site .app { --spend-base: var(--line); }
.halloween .site .bar-b,
.halloween .site .sw-b { background: #4A4168; }
.halloween .site .alert-icon { background: color-mix(in srgb, var(--space) 25%, var(--surface)); color: var(--text); }

/* Espacios y transferencia */
.halloween .site .space-rule { color: color-mix(in srgb, var(--c) 65%, #fff); }
.halloween .site .mods li::before { background: color-mix(in srgb, var(--c) 30%, var(--surface)); }
.halloween .site .transfer { box-shadow: 0 0 0 1px var(--line); }

/* Préstamos */
.halloween .site .loan-input output { color: #C4B5FD; }
.halloween .site .parts tbody tr + tr td,
.halloween .site .parts tbody tr + tr th { border-top-color: var(--line); }
.halloween .site .check::before { background: var(--ico-check) center / 14px no-repeat, color-mix(in srgb, var(--pos) 20%, var(--surface)); }
.halloween .site .check.is-warn::before { background: color-mix(in srgb, var(--warn) 20%, var(--surface)); }
.halloween .site .access-tag { background: color-mix(in srgb, var(--prestamos) 30%, var(--surface)); color: #DDD6FE; }

/* Salud financiera */
.halloween .site .g-track { stroke: var(--line); }
.halloween .site .g-val { stroke: var(--pumpkin); }
.halloween .site .prio { background: color-mix(in srgb, var(--neg) 18%, var(--surface)); color: var(--neg); }
.halloween .site .soon-ok { color: var(--pos); }

/* Celular y pasos */
.halloween .site .phone { box-shadow: 0 0 0 1px var(--line), 0 30px 60px -24px rgba(0, 0, 0, .7); }
.halloween .site .phone-screen { background: #17122A; }
.halloween .site .ph-list li + li { border-top-color: var(--line); }
.halloween .site .ph-actions i { background: color-mix(in srgb, var(--c) 25%, var(--surface)); }
.halloween .site .steps li::before { background: var(--pumpkin); color: #1A0E05; }
.halloween .site .steps li.is-done::before { background: var(--ico-check-dark) center / 16px no-repeat, var(--pos); }

/* Fondo de emergencia */
.halloween .site .fund-card { box-shadow: 0 0 0 1px var(--line), 0 30px 60px -24px rgba(0, 0, 0, .7); }
.halloween .site .fund-input output { color: #5EEAD4; }
.halloween .site .goal-chip { background: var(--bg); }

/* Hoja de ruta: la etapa actual es una calabaza encendida */
.halloween .site .journey-fill { background: linear-gradient(90deg, var(--prestamos), var(--pumpkin) 70%, var(--candle)); }
.halloween .site .journey-pin { border-color: var(--pumpkin); box-shadow: 0 0 0 6px rgba(249, 115, 22, .22), 0 0 18px rgba(249, 115, 22, .6); animation: none; }
.halloween .site .journey-tip { background: var(--pumpkin); color: #3A1A05; }
.halloween .site .journey-tip::after { border-top-color: var(--pumpkin); }
.halloween .site .journey-tip strong { color: #1A0E05; }

/* Tablero de la hoja de ruta: lo que se construye es una calabaza encendida */
.halloween .site .board-now > div > li { box-shadow: 0 0 0 1px var(--pumpkin), 0 0 40px -10px rgba(249, 115, 22, .5); }
.halloween .site .board-now > div > li::after { background-image: repeating-linear-gradient(-45deg, var(--pumpkin) 0 10px, var(--candle) 10px 20px); }
.halloween .site .road-chip { background: var(--pumpkin); color: #1A0E05; animation: none; }
.halloween .site .board-now .road-bullets li::before { border-color: var(--candle); background: color-mix(in srgb, var(--pumpkin) 20%, transparent); }
.halloween .site .board-done > ul > li::before { background: var(--ico-check-dark) center / 14px no-repeat, var(--pos); }
.halloween .site .board-next > ol > li::before { background: var(--bg); }

/* Etiquetas «Pronto», preguntas y llamado final */
.halloween .site .soon-light { background: color-mix(in srgb, var(--candle) 22%, var(--surface)); color: var(--candle); }
.halloween .site .hero-trust li::before { background: var(--ico-check-dark) center / 14px no-repeat, var(--pos); }
.halloween .site .faq summary::after { background: var(--bg); }
.halloween .site .cta-inner { box-shadow: 0 0 0 1px var(--line); }
.halloween .site .cta-form { border-color: var(--line); }
.halloween .site .cta .btn-dark { background: var(--pumpkin); color: #1A0E05; }

/* Novedades */
.halloween .site .ed-board .board-now > div > li { box-shadow: 0 0 0 1px var(--line), 0 30px 60px -24px rgba(0, 0, 0, .7); }
.halloween .site .edition.is-latest { box-shadow: 0 0 0 1px var(--line), 0 30px 60px -24px rgba(0, 0, 0, .7); }
.halloween .site .edition.is-next { border-color: var(--line); }
.halloween .site .nt-kicker { color: var(--candle); }
.halloween .site .ed-more,
.halloween .site .nt-go { color: var(--candle); }
.halloween .site .hero-news:hover { box-shadow: inset 0 0 0 1.5px var(--pumpkin); }
.halloween .site .news-toast { box-shadow: 0 0 0 1px var(--line), 0 24px 50px -20px rgba(0, 0, 0, .8); }
.halloween .site .road li.is-done::before { color: #0B1A10; }
.halloween .site .road li.is-current {
  border-color: var(--pumpkin); background: color-mix(in srgb, var(--pumpkin) 10%, var(--surface));
  box-shadow: 0 0 28px -8px rgba(249, 115, 22, .45);
}
.halloween .site .road li.is-current::before { background: var(--pumpkin); color: #1A0E05; }

/* Acceso anticipado */
.halloween .site .cta-form input { background: var(--bg); border-color: var(--line); }
.halloween .site .cta-form input:focus-visible { border-color: var(--pumpkin); }

@media (max-width: 920px) {
  .spooky-hero .moon { width: 64px; height: 64px; top: 12px; }
}

/* En celular la luna taparía el título: quedan solo los murciélagos */
@media (max-width: 640px) {
  .spooky-hero .moon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .halloween .brand::before { animation: none; }
  .halloween .sq-empresa-b { animation: none; filter: drop-shadow(0 0 3px var(--candle)); }
  .bat { display: none; }
}

/* Novedades: la edición nueva lleva la franja de colores fija, no la de obra */
.halloween .site .ed-board .board-now > div > li::after {
  background: linear-gradient(90deg, var(--prestamos) 0 33%, var(--pumpkin) 33% 66%, var(--candle) 66%);
  animation: none;
}
.halloween .site .board-next.is-plain > ol > li::before { background: var(--bg); box-shadow: inset 0 0 0 2px var(--candle); }
.halloween .site .ed-board .board-now .road-bullets li::before { background: var(--ico-check-dark) center / 12px no-repeat, #4ADE80; border: 0; }

/* Pestañas de la hoja de ruta y de novedades */
.halloween .site .tabs button[aria-selected="true"] { background: var(--pumpkin); color: #1A0E05; }
.halloween .site .tabs button[aria-selected="true"] .tab-count { background: rgba(26, 14, 5, .18); color: #1A0E05; }
.halloween .site .tab-ind { background: var(--pumpkin); }
.halloween .site .tabs.has-ind button[aria-selected="true"] { background: transparent; }
.halloween .site .btn-primary { box-shadow: 0 10px 22px -12px rgba(249, 115, 22, .7); }