/* ===== VeyronICA glass + autolayout + efectitos ===== */
*{box-sizing:border-box}
:root{
  --marron:#C19A6B; --cielo:#8ECAE6; --lila:#b892e8;
  --fondo:#eef1f6; --tarjeta:rgba(255,255,255,.62); --borde:rgba(255,255,255,.7);
  --texto:#23202b; --muted:#6d6a7a; --sombra:0 12px 40px rgba(80,70,120,.16);
}
html[data-tema="oscuro"]{
  --fondo:#12101a; --tarjeta:rgba(30,26,44,.62); --borde:rgba(255,255,255,.12);
  --texto:#f1ecff; --muted:#b6aec9; --sombra:0 12px 40px rgba(0,0,0,.5);
}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",system-ui,Arial,sans-serif;color:var(--texto);
  background:var(--fondo);line-height:1.55;overflow-x:hidden}
code{background:rgba(127,127,160,.18);padding:1px 7px;border-radius:8px;font-size:.86em}

/* fondo animado */
.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden}
.blobs span{position:absolute;width:44vmax;height:44vmax;border-radius:50%;filter:blur(90px);opacity:.5;animation:flota 14s ease-in-out infinite alternate}
.b1{background:radial-gradient(circle,#C19A6B,transparent 70%);top:-12vmax;left:-10vmax}
.b2{background:radial-gradient(circle,#8ECAE6,transparent 70%);top:20vh;right:-14vmax;animation-delay:-5s}
.b3{background:radial-gradient(circle,#b892e8,transparent 70%);bottom:-16vmax;left:30vw;animation-delay:-9s}
@keyframes flota{to{transform:translate(6vmax,4vmax) scale(1.15)}}

/* glass */
.glass{background:var(--tarjeta);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--borde);box-shadow:var(--sombra)}
.glass-soft{background:rgba(127,127,160,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--borde);border-radius:14px}

.wrap{max-width:1060px;margin:0 auto;padding:0 18px}
.progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:50;
  background:linear-gradient(90deg,var(--marron),var(--cielo),var(--lila));box-shadow:0 0 12px var(--cielo)}

/* topbar */
.topbar{position:sticky;top:12px;z-index:20;margin:12px auto;border-radius:18px;max-width:1060px}
.topbar-inner{display:flex;align-items:center;gap:12px;padding:10px 14px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand small{display:block;color:var(--muted);font-size:.72rem}
.logo-img{width:68px;height:68px;object-fit:contain;background:transparent;padding:0;margin:-11px 0;flex-shrink:0;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.95)) drop-shadow(0 0 14px rgba(255,255,255,.55)) drop-shadow(0 3px 8px rgba(0,0,0,.3));
  filter:drop-shadow(0 0 5px rgba(255,255,255,.95)) drop-shadow(0 0 14px rgba(255,255,255,.55)) drop-shadow(0 3px 8px rgba(0,0,0,.3));
  animation:logoSpin 8s ease-in-out infinite}
@keyframes logoSpin{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(4deg) scale(1.08)}}
.nav{display:flex;flex-wrap:wrap;gap:6px}
.nav a{font-size:.78rem;text-decoration:none;color:var(--texto);padding:7px 11px;border-radius:999px;
  background:rgba(127,127,160,.12);border:1px solid transparent;transition:.25s}
.nav a:hover,.nav a.active{background:linear-gradient(135deg,var(--marron),var(--cielo));color:#fff;transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(142,202,230,.5)}
.btn{padding:9px 15px;border-radius:12px;border:1px solid var(--borde);background:rgba(127,127,160,.14);
  color:var(--texto);cursor:pointer;transition:.25s;font-weight:600}
.btn.ghost{border-radius:50%;width:40px;height:40px;padding:0}
.btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 20px rgba(193,154,107,.4)}

/* hero */
.hero{border-radius:26px;padding:34px 28px;margin:18px 0;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.hero-logo img{width:min(230px,40vw);filter:drop-shadow(0 14px 28px rgba(140,90,90,.35));
  animation:heroFloat 5s ease-in-out infinite;transition:transform .3s}
.hero-logo img:hover{transform:scale(1.06) rotate(-1.5deg)}
@keyframes heroFloat{50%{transform:translateY(-10px)}}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 62%);
  transform:translateX(-100%);animation:brillo 6s ease-in-out infinite}
@keyframes brillo{55%,100%{transform:translateX(100%)}}
.kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;margin:0}
.hero h1{font-size:clamp(1.7rem,4vw,2.6rem);margin:.25em 0;line-height:1.12;
  background:linear-gradient(90deg,var(--texto),var(--marron),var(--cielo));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 span{display:block;font-size:.55em;font-weight:400}
.lead{font-size:1.02rem;opacity:.9}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chips span{padding:5px 12px;border-radius:999px;font-size:.78rem;background:rgba(127,127,160,.14);
  border:1px solid var(--borde);transition:.25s;cursor:default}
.chips span:hover{transform:translateY(-3px) scale(1.05);background:linear-gradient(135deg,rgba(193,154,107,.4),rgba(142,202,230,.4))}
.chips .sel{background:linear-gradient(135deg,var(--marron),var(--cielo));color:#fff;font-weight:700;border:none;
  box-shadow:0 4px 14px rgba(142,202,230,.5)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:14px}
.stat{padding:12px;text-align:center;transition:.3s}
.stat:hover{transform:translateY(-4px) scale(1.03)}
.stat b{font-size:1.6rem;display:block;background:linear-gradient(135deg,var(--marron),var(--lila));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat small{color:var(--muted)}

/* cards áreas */
.card{border-radius:24px;padding:24px;margin:20px 0;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--marron),var(--cielo),var(--lila),var(--marron));background-size:300% 100%;animation:borde 7s linear infinite}
@keyframes borde{to{background-position:300% 0}}
.card:hover{box-shadow:0 20px 55px rgba(140,120,200,.3)}
.area-head{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.num{font-size:1.9rem;font-weight:900;min-width:64px;height:64px;border-radius:20px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--marron),var(--lila),var(--cielo));box-shadow:0 8px 20px rgba(184,146,232,.45);animation:flotaNum 4s ease-in-out infinite}
@keyframes flotaNum{50%{transform:translateY(-5px) rotate(3deg)}}
.card h2{margin:0;font-size:1.3rem}
.demo-badge{font-size:.75rem;background:rgba(142,202,230,.25);border:1px solid var(--cielo);padding:3px 10px;border-radius:999px}
.card h3{margin:1.1em 0 .4em;font-size:1rem;opacity:.95}
.card p,.card li{font-size:.93rem}
.mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.mini{padding:12px;transition:.28s}
.mini:hover{transform:translateY(-5px) rotate(-.5deg) scale(1.02);box-shadow:0 12px 26px rgba(140,120,200,.28)}
.mini b{font-size:.95rem}
.mini p{margin:.2em 0;color:var(--muted);font-size:.84rem}
.pro,.con{display:block;font-size:.8rem;font-style:normal}
.pro{color:#2e9e62}.con{color:#d15b5b}
.app{margin:.3em 0;padding-left:1.15em}
.app li{margin:.3em 0}
.app li::marker{content:"✨ "}
.steps{margin:.3em 0;padding:10px 10px 10px 30px;border-radius:14px;list-style:none;counter-reset:paso;
  background:linear-gradient(135deg,rgba(193,154,107,.16),rgba(142,202,230,.16));border:1px solid var(--borde)}
.steps li{counter-increment:paso;margin:.45em 0;position:relative;font-size:.9rem;animation:pasoIn .5s both}
.steps li:nth-child(2){animation-delay:.08s}.steps li:nth-child(3){animation-delay:.16s}
.steps li::before{content:counter(paso);position:absolute;left:-24px;top:0;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,var(--marron),var(--cielo));color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center}
@keyframes pasoIn{from{opacity:0;transform:translateX(14px)}}
.fuentes{color:var(--muted);font-size:.8rem;background:rgba(127,127,160,.1);padding:6px 12px;border-radius:10px;display:inline-block}
.foot{text-align:center;border-radius:18px;padding:14px;margin:18px 0 30px;color:var(--muted);font-size:.8rem}

/* reveal + top */
.reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .6s,transform .6s}
.reveal.visible{opacity:1;transform:none}
.topbtn{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  color:#fff;font-size:1.2rem;background:linear-gradient(135deg,var(--marron),var(--cielo));box-shadow:0 10px 24px rgba(142,202,230,.55);
  opacity:0;pointer-events:none;transition:.3s;z-index:30}
.topbtn.show{opacity:1;pointer-events:auto}
.topbtn:hover{transform:translateY(-4px) scale(1.08)}

@media(max-width:720px){.nav{display:none}.hero{padding:24px 18px}.hero-grid{grid-template-columns:1fr}.hero-logo{text-align:center}.hero-logo img{width:min(180px,60vw)}.card{padding:18px 15px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}