:root {
  --bg: #0b0e14;
  --bg-soft: #121725;
  --text: #e6edf3;
  --muted: #9fb1c1;
  --primary: #7c5cff;
  --primary-2: #a694ff;
  --card: #0f1422;
  --line: #1e263b;
  --ok: #46d39a;
  --warn: #ffc861;
}
html[data-theme="udl"] { color-scheme: dark; }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
a{color:var(--primary);text-decoration:none} a:hover{color:var(--primary-2)}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.udl-header{display:flex;align-items:center;gap:.75rem;padding:1rem 0}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700}
.udl-nav{margin-left:auto;display:flex;gap:1rem;align-items:center}
.udl-nav a{padding:.35rem .5rem;border-radius:.5rem}
.udl-nav a.active{background:var(--bg-soft)}
.nav-toggle{display:none;margin-left:.5rem;background:transparent;border:1px solid var(--line);color:var(--text);padding:.4rem .6rem;border-radius:.5rem}
@media (max-width:860px){
  .udl-nav{display:none;position:absolute;right:1rem;top:64px;background:var(--bg-soft);padding:1rem;border:1px solid var(--line);border-radius:.75rem;flex-direction:column}
  .udl-nav.open{display:flex}
  .nav-toggle{display:block}
}
.btn{display:inline-block;padding:.7rem 1rem;border-radius:.6rem;border:1px solid var(--line);background:transparent;color:var(--text)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#0b0b0b;font-weight:600}
.btn-secondary{background:var(--bg-soft)}
.btn-outline{border-color:var(--primary);color:var(--primary);background:transparent}
.section{padding:2.5rem 0}
.page-hero{padding:2rem 0 1rem}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:2rem 0}
.hero-text h1{font-size:2rem;margin:.25rem 0 0}
.subtitle{color:var(--primary-2);margin:.25rem 0 1rem}
.intro{color:var(--muted)}
.hero-art{position:relative}
.hero-art .blob{position:absolute;inset:auto 0 0 0;height:260px;background:radial-gradient(60% 60% at 50% 50%,#7c5cff40,transparent);filter:blur(30px)}
.hero-art img{width:100%;border-radius:1rem;border:1px solid var(--line);background:var(--card)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (max-width:860px){ .hero{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1rem}
.case{background:var(--bg-soft);border:1px dashed var(--line);border-radius:1rem;padding:1rem}
.price ul{padding-left:1.1rem;margin:.5rem 0}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.facts{margin:1rem 0}
.footer-grid{display:grid;grid-template-columns:2fr 1.2fr 1fr;gap:1rem;align-items:flex-start;padding:2rem 0}
.udl-footer{border-top:1px solid var(--line);margin-top:2rem}
.tiny{font-size:.9rem;color:var(--muted)}
.center{text-align:center}
/* Forms */
.form label{display:block}
.form input,.form select,.form textarea{width:100%;margin-top:.35rem;background:#0c1220;border:1px solid var(--line);border-radius:.5rem;padding:.7rem;color:var(--text)}
.form input:focus,.form textarea:focus,.form select:focus{outline:1px solid var(--primary)}
.form .form-msg{margin-top:1rem;color:var(--ok)}
/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(10px);transition:all .6s ease}
.reveal.visible{opacity:1;transform:none}


/* ===== Halloween Theme ===== */
html[data-theme="udl-halloween"]{
  --bg: #0b0a0e;
  --bg-soft:#16131f;
  --text:#f6efe6;
  --muted:#d7cfd0;
  --primary:#f28c18;
  --primary-2:#ffc861;
  --card:#12101a;
  --line:#2a2038;
  --ok:#7cffb2;
  --warn:#ffd089;
}
html[data-theme="udl-halloween"] body{
  background:
    radial-gradient(1200px 600px at -20% -10%, #f28c1815 0%, transparent 60%),
    radial-gradient(800px 400px at 120% -10%, #7c5cff18 0%, transparent 60%),
    var(--bg);
}
.hero .floating, .page-hero .floating{position:absolute; pointer-events:none; opacity:.2; animation: float 6s ease-in-out infinite alternate}
.floating.bat{top:-10px; right: -10px; width:160px}
.floating.web{top:-20px; left:-10px; width:180px; opacity:.25}
@keyframes float{ from{ transform: translateY(0)} to{ transform: translateY(10px)} }

.season-banner{
  background: linear-gradient(90deg, #f28c18 0%, #a46dff 100%);
  color:#1b1b1b; padding:.5rem 1rem; text-align:center; font-weight:700;
}
.season-banner small{display:block; font-weight:500; opacity:.9}
.theme-toggle{margin-left:.25rem}


/* Nieve */
.snow{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.snowflake{position:absolute;top:-10px;width:8px;height:8px;border-radius:50%;
  background: rgba(255,255,255,.95);box-shadow:0 0 8px rgba(255,255,255,.6);
  animation: fall linear var(--dur) infinite;left: var(--x);animation-delay: var(--delay);
  filter: blur(calc(var(--blur, 0) * 1px));}
@keyframes fall{to{transform: translateY(110vh) translateX(var(--drift, 0px)); opacity:.95}}