/* ==========================================================
   La óptica embrujada · capa de Halloween
   Solo color y efectos. No cambia la distribución original.
   ========================================================== */
:root{
  --hw-pumpkin:#fb8b2c;
  --hw-pumpkin-hi:#ffb35c;
  --hw-ember:#d9561a;
  --hw-candle:#ffd36e;
  --hw-bone:#f1e7da;
  --hw-night:#15111c;
  --hw-soil:#0b0910;
  --hw-witch:#2a2040;
  --hw-witch-2:#1b1528;
  --hw-ease-out:cubic-bezier(.23,1,.32,1);
  --hw-ease-io:cubic-bezier(.77,0,.175,1);
  color-scheme:dark;
}
html,body{background:var(--hw-night)}
::selection{background:var(--hw-pumpkin);color:#1c0d03}
:focus-visible{outline-color:var(--hw-pumpkin)}

/* ---------- Logo: la calabaza óptica ---------- */
.brand-mark,.brand-icon{
  position:relative;overflow:visible;
  background:
    linear-gradient(90deg,transparent 21%,#a8400d40 23%,transparent 27%,transparent 73%,#a8400d40 77%,transparent 79%),
    radial-gradient(130% 100% at 50% 18%,var(--hw-pumpkin-hi) 0%,var(--hw-pumpkin) 46%,var(--hw-ember) 100%) !important;
  color:#2a1205 !important;
  border-color:#ff9f4d !important;
  box-shadow:inset 0 -4px 7px #8a300a66,inset 0 2px 2px #ffd3a055,0 6px 18px -8px #fb8b2ccc;
}
.brand-mark::after,.brand-icon::after{
  content:"";position:absolute;left:50%;top:-5px;width:5px;height:8px;
  border-radius:3px 3px 1px 1px;background:#6f8a2c;
  transform:translateX(-50%) rotate(14deg);transform-origin:bottom center;
  box-shadow:3px 2px 0 -1px #56701f;
}
.brand-icon::after{top:-6px;width:6px;height:9px}
.hw-logo{width:72%;height:72%;overflow:visible}
.brand-mark .hw-logo{width:25px;height:25px}
.hw-logo .lens{fill:var(--hw-candle);animation:hw-candle 3.6s steps(1,end) infinite}
.hw-logo .lens + .lens{animation-delay:-1.7s}
.hw-logo .frame{fill:none;stroke:#2a1205;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
@keyframes hw-candle{0%,100%{opacity:1}12%{opacity:.78}14%{opacity:1}47%{opacity:.86}49%{opacity:1}71%{opacity:.7}73%{opacity:.95}}
@media (hover:hover) and (pointer:fine){
  .brand:hover .brand-mark,.brand:hover .brand-icon{animation:hw-wobble .6s var(--hw-ease-out)}
}
@keyframes hw-wobble{0%{transform:rotate(0)}30%{transform:rotate(-7deg) scale(1.04)}60%{transform:rotate(4deg)}100%{transform:rotate(0)}}

/* ---------- Botones: brillo de vela ---------- */
.marketing-button:not(.outline):not(.light),.btn:not(.btn-ghost):not(.btn-cream),.primary-button,.act-new{
  transition:transform .16s var(--hw-ease-out),box-shadow .25s var(--hw-ease-out),background-color .2s ease,color .2s ease;
}
.marketing-button:active,.btn:active,.primary-button:active,.secondary-button:active,.logout-button:active,.act:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .marketing-button:not(.outline):not(.light):hover,.btn:not(.btn-ghost):not(.btn-cream):hover,.primary-button:hover{
    box-shadow:0 0 0 1px #ffb35c66,0 10px 28px -8px #fb8b2ccc;animation:hw-glow 1.6s ease-in-out infinite;
  }
  .marketing-button:hover svg,.btn:hover svg{transform:translateX(3px);transition:transform .2s var(--hw-ease-out)}
}
@keyframes hw-glow{50%{box-shadow:0 0 0 1px #ffd36e80,0 12px 34px -6px #fb8b2cee}}

/* ---------- Telarañas ---------- */
.hw-web{position:absolute;width:110px;height:110px;color:#e9dccb;opacity:.22;pointer-events:none;z-index:2}
.hw-web svg{width:100%;height:100%;display:block}
.hw-web.tr{transform:scaleX(-1)}
.hw-web.br{transform:scale(-1,-1)}

/* ---------- Murciélagos ---------- */
.hw-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;--w:1200px}
.hw-bat{position:absolute;left:-70px;top:0;width:56px;height:28px;color:#08060c;opacity:0;
  animation:hw-fly var(--dur,11s) linear var(--delay,0s) infinite;filter:drop-shadow(0 0 1px #d9c9ef66) drop-shadow(0 0 10px #fb8b2c40)}
.hw-bat svg{width:100%;height:100%;overflow:visible}
.hw-bat .w{transform-box:view-box;transform-origin:32px 15px;animation:hw-flap .2s ease-in-out infinite alternate}
.hw-bat .w2{animation-delay:-.2s}
@keyframes hw-flap{from{transform:scaleY(1)}to{transform:scaleY(.25)}}
@keyframes hw-fly{
  0%{opacity:0;transform:translate(0,var(--y0,120px)) scale(var(--s,1))}
  2%{opacity:1}
  10%{transform:translate(calc(var(--w) * .3),calc(var(--y0,120px) - 40px)) scale(var(--s,1))}
  20%{transform:translate(calc(var(--w) * .62),calc(var(--y0,120px) + 10px)) scale(var(--s,1))}
  30%{opacity:1;transform:translate(calc(var(--w) + 100px),calc(var(--y0,120px) - 70px)) scale(var(--s,1))}
  31%,100%{opacity:0;transform:translate(calc(var(--w) + 100px),calc(var(--y0,120px) - 70px)) scale(var(--s,1))}
}

/* ---------- Niebla y linterna ---------- */
.hw-fog{position:absolute;left:-10%;right:-10%;bottom:0;height:220px;pointer-events:none;
  -webkit-mask-image:radial-gradient(60% 50% at 50% 60%,#000 30%,transparent 100%);mask-image:radial-gradient(60% 50% at 50% 60%,#000 30%,transparent 100%);
  background:radial-gradient(40% 60% at 30% 70%,#e9dccb10,transparent 70%),radial-gradient(35% 55% at 70% 80%,#b9a6d812,transparent 70%);
  animation:hw-drift 22s ease-in-out infinite alternate;}
.hw-fog.f2{bottom:10px;opacity:.8;animation-duration:31s;animation-direction:alternate-reverse}
@keyframes hw-drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.hw-lamp{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(300px circle at var(--mx,70%) var(--my,40%),#ffd36e12,transparent 72%)}
.hw-lit .hw-lamp{opacity:1}

/* ---------- Araña ---------- */
.hw-spider{position:absolute;top:0;width:38px;pointer-events:none;z-index:3;
  transform:translateY(var(--drop,0px));transition:transform .9s var(--hw-ease-out)}
.hw-spider .thread{display:block;width:1px;height:var(--len,70px);margin:0 auto;background:linear-gradient(#e9dccb00,#e9dccb66)}
.hw-spider svg{display:block;width:38px;height:38px;filter:drop-shadow(0 0 6px #fb8b2c55);margin-top:-3px;animation:hw-bob 3.2s ease-in-out infinite alternate;transform-origin:50% 0}
.hw-spider .eye{fill:var(--hw-pumpkin);animation:hw-blink 5s steps(1,end) infinite}
@keyframes hw-bob{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(8px) rotate(4deg)}}
@keyframes hw-blink{0%,92%,100%{opacity:1}94%,96%{opacity:0}}

/* ---------- Fantasma ---------- */
.hw-ghost{position:absolute;width:62px;pointer-events:none;filter:drop-shadow(0 0 14px #f1e7da55)}
.hw-ghost svg{display:block;width:100%;height:auto}
.hw-ghost .body{fill:var(--hw-bone)}
.hw-ghost .face{fill:#1b1528}

/* ---------- Calabacitas con vela ---------- */
.hw-pumpkin{position:absolute;width:34px;pointer-events:none}
.hw-pumpkin svg{display:block;width:100%;height:auto;overflow:visible}
.hw-pumpkin .face{fill:var(--hw-candle);animation:hw-candle 2.9s steps(1,end) infinite}
.hw-pumpkin.p2 .face{animation-delay:-1.1s}
.hw-pumpkin.p3 .face{animation-delay:-2s}
.hw-pumpkin::after{content:"";position:absolute;inset:-60% -80%;border-radius:50%;
  background:radial-gradient(closest-side,#fb8b2c33,transparent);z-index:-1;animation:hw-halo 2.9s ease-in-out infinite}
@keyframes hw-halo{50%{opacity:.55;transform:scale(.92)}}

/* ---------- Luna ---------- */
.hw-moon{position:absolute;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 64% 38%,#d9c18c 0 6%,transparent 7%),
    radial-gradient(circle at 38% 64%,#d9c18c 0 9%,transparent 10%),
    radial-gradient(circle at 58% 72%,#dcc693 0 4%,transparent 5%),
    radial-gradient(circle at 34% 30%,#fff8e4,#f3dfae 58%,#d6b97e 100%);
  box-shadow:0 0 50px 12px #f5dca233,0 0 160px 50px #f5dca214;
  animation:hw-moon 9s ease-in-out infinite alternate}
@keyframes hw-moon{to{transform:translateY(-8px);box-shadow:0 0 60px 16px #f5dca240,0 0 180px 60px #f5dca218}}

/* ---------- Ráfaga de murciélagos (feedback) ---------- */
.hw-burst{position:fixed;width:30px;height:15px;pointer-events:none;z-index:9999;color:#120d19;filter:drop-shadow(0 0 4px #fb8b2c88)}
.hw-burst svg{width:100%;height:100%;overflow:visible}

/* ---------- Aparición al hacer scroll ---------- */
.hw-js [data-hw-r]:not(.hw-in){opacity:0}
.hw-in{animation:hw-rise .75s var(--hw-ease-out) var(--hw-d,0ms) backwards}
@keyframes hw-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes hw-fade{from{opacity:0}}

/* ================== PÁGINA WEB ================== */
.chosen-landing .marketing-hero{position:relative}
.chosen-landing .marketing-hero>*:not(.hw-sky){position:relative;z-index:1}
.chosen-landing .hero-copy h1 em{text-shadow:0 0 28px #fb8b2c40;animation:hw-ignite 1.6s var(--hw-ease-out) .3s backwards}
@keyframes hw-ignite{0%{opacity:.25;text-shadow:none}35%{opacity:1;text-shadow:0 0 40px #ffd36eaa}55%{opacity:.7}100%{text-shadow:0 0 28px #fb8b2c40}}
.chosen-landing .hero-product .hw-moon{width:118px;height:118px;right:7%;top:-26px;z-index:-1}

/* Superficies que eran oscuras: ahora calabaza o noche de bruja */
.chosen-landing .t-buscar,
.chosen-landing .plan-card.premium{
  background:radial-gradient(120% 90% at 100% 0%,#ffd36e55,transparent 55%),linear-gradient(150deg,#ffa24a,#e8661c) !important;
  border-color:#ffb35c !important;color:#241005 !important;
}
.chosen-landing .t-buscar p,.chosen-landing .plan-card.premium>p,.chosen-landing .plan-card.premium li,.chosen-landing .plan-card.premium small{color:#2a1205 !important}
.chosen-landing .t-buscar .tile-icon{color:#241005 !important}
.chosen-landing .plan-card.premium .plan-heading span{color:#2a1205 !important;border-color:#2a120555 !important}
.chosen-landing .plan-card.premium svg{color:#2a1205}
.chosen-landing .plan-card.premium hr,.chosen-landing .plan-card.premium .plan-limit{border-color:#2a120533 !important}
.chosen-landing .t-disp{
  background:radial-gradient(90% 120% at 85% 10%,#6a3fa033,transparent 60%),linear-gradient(150deg,#2c2142,#191326) !important;
  color:var(--hw-bone) !important;border-color:#3b2e57 !important;
}
.chosen-landing .t-disp p{color:#cfc3b4 !important}
.chosen-landing .t-disp .tile-icon{color:var(--hw-pumpkin) !important}
.chosen-landing .t-disp .btn-cream{background:var(--hw-pumpkin) !important;color:#241005 !important;border-color:var(--hw-pumpkin) !important}
.chosen-landing .stock-ink{
  background:radial-gradient(60% 90% at 78% 0%,#ffe2a6aa,transparent 60%),linear-gradient(160deg,#ff9f45,#dc5a17) !important;
  color:#241005 !important;--crease:#24100522 !important;
}
.chosen-landing .final .copy p{color:#2a1205 !important}
.chosen-landing .final .btn-cream{background:#1b1528 !important;color:var(--hw-bone) !important;border-color:#1b1528 !important}
.chosen-landing .pocket-stage .hw-ghost{left:12%;bottom:34%;width:70px;animation:hw-peek 7s var(--hw-ease-io) infinite}
@keyframes hw-peek{0%,100%{transform:translateY(46px) rotate(-6deg)}40%,60%{transform:translateY(-6px) rotate(4deg)}50%{transform:translateY(-12px) rotate(-2deg)}}

/* Imágenes de la app: se muestran tal cual (capturas originales en azul y blanco, sin filtro) */

/* Tarjetas: luz de vela al pasar */
@media (hover:hover) and (pointer:fine){
  .chosen-landing .tile,.chosen-landing .plan-card{transition:box-shadow .3s var(--hw-ease-out),transform .3s var(--hw-ease-out)}
  .chosen-landing .tile:hover,.chosen-landing .plan-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px #fb8b2c55,0 22px 50px -24px #fb8b2c88}
}
.chosen-landing .tile,.chosen-landing .plan-card{position:relative}
.chosen-landing .plan-card .hw-web{top:0;right:0;width:84px;height:84px;opacity:.26}
.chosen-landing .t-ficha .hw-web{top:0;right:0}

/* Pestañas */
.chosen-landing .feature-panel.hw-swap{animation:hw-fade .28s ease-out}
.chosen-landing .phone.scrolls .shot{animation:hw-scrollshot 12s var(--hw-ease-io) 1s infinite alternate}
@keyframes hw-scrollshot{from{transform:translateY(var(--from,0%))}to{transform:translateY(var(--to,0%))}}

/* Preguntas */
.chosen-landing .qa details[open] .ans{animation:hw-rise .35s var(--hw-ease-out)}
.chosen-landing .qa details[open] summary .pm{background:var(--hw-pumpkin) !important;border-color:var(--hw-pumpkin) !important;color:#241005 !important}

/* Pie de página: cementerio */
.chosen-landing .foot{position:relative;background:var(--hw-soil) !important}
.hw-graveyard{position:absolute;left:0;right:0;bottom:100%;height:64px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20480%2064%22%20width%3D%22480%22%20height%3D%2264%22%3E%3Cg%20fill%3D%22%230b0910%22%3E%3Cpath%20d%3D%22M0%2064V52Q60%2042%20120%2049T240%2047T360%2051T480%2049V64Z%22/%3E%3Cpath%20d%3D%22M38%2052V31a11%2011%200%200%201%2022%200v21Z%22/%3E%3Cpath%20d%3D%22M84%2052V38a7%207%200%200%201%2014%200v14Z%22/%3E%3Cpath%20transform%3D%22rotate%28-7%20158%2050%29%22%20d%3D%22M150%2051V33a9%209%200%200%201%2018%200v18Z%22/%3E%3Crect%20x%3D%22246%22%20y%3D%2220%22%20width%3D%225%22%20height%3D%2230%22%20rx%3D%221%22/%3E%3Crect%20x%3D%22238%22%20y%3D%2228%22%20width%3D%2221%22%20height%3D%225%22%20rx%3D%221%22/%3E%3Cpath%20d%3D%22M296%2050V36l3-5%203%205v14Zm12%200V36l3-5%203%205v14Zm12%200V36l3-5%203%205v14Zm12%200V36l3-5%203%205v14Zm12%200V36l3-5%203%205v14Z%22/%3E%3Crect%20x%3D%22294%22%20y%3D%2240%22%20width%3D%2258%22%20height%3D%223%22/%3E%3Cpath%20d%3D%22M416%2050c1-10%200-18-3-26%204%204%206%208%207%2012%201-7%204-13%209-17-3%206-5%2012-5%2018%203-3%207-5%2011-5-5%203-8%207-9%2012-1%203-1%205%200%206Z%22/%3E%3Cpath%20d%3D%22M412%2026c-4-3-9-4-13-3%204%200%208%202%2011%205Zm16-9c2-4%205-7%209-8-3%202-6%205-7%209Z%22/%3E%3C/g%3E%3C/svg%3E") repeat-x left bottom/480px 64px}
.hw-graveyard .hw-pumpkin{bottom:6px}

/* ================== APLICACIÓN ================== */
.app-header{position:relative}
.app-header .hw-web{top:0;right:0;width:96px;height:96px;opacity:.2}
.app-header .hw-sky{z-index:0}
.recipe-home .hello h1 span{text-shadow:0 0 26px #fb8b2c44}
.act-new{box-shadow:0 18px 40px -20px #fb8b2ccc,inset 0 1px #ffe1b555 !important}
@media (hover:hover) and (pointer:fine){
  .act-new:hover{animation:hw-glow-card 1.8s ease-in-out infinite}
}
@keyframes hw-glow-card{50%{box-shadow:0 22px 48px -18px #fb8b2cff,inset 0 1px #ffe1b588}}
.sync .ring svg .pr{filter:drop-shadow(0 0 3px #93e35d99)}

.login-page{position:relative;overflow:hidden;isolation:isolate}
.login-page>.hw-sky{z-index:-1}
.login-page .hw-moon{width:140px;height:140px;right:12%;top:70px}
.login-page .hw-pumpkin.p1{left:calc(50% - 300px);bottom:40px}
.login-page .hw-pumpkin.p2{left:calc(50% + 250px);bottom:60px;width:26px}
@media (max-width:700px){.login-page .hw-pumpkin,.app-header .hw-web{display:none}.login-page .hw-moon{width:84px;height:84px;right:-18px;top:-22px}}
img[alt="Visa"],img[alt="Mastercard"],img[alt="American Express"]{background:#f4ede3;border-radius:4px}

.hw-view-in{animation:hw-fade .18s ease-out}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .hw-bat,.hw-burst{display:none !important}
  .hw-fog,.hw-moon,.hw-spider svg,.hw-ghost,.hw-pumpkin .face,.hw-pumpkin::after,.hw-logo .lens,.phone.scrolls .shot,.hero-copy h1 em{animation:none !important}
  .hw-js [data-hw-r]:not(.hw-in){opacity:1}
  .hw-in,.hw-view-in{animation:none}
  .chosen-landing .pocket-stage .hw-ghost{transform:translateY(-6px)}
}