/* ============ P4 Castigliano + Euler — mobile-first, gold/violeta ============ */
:root{
  --bg:#0d0b1e; --bg2:#161233; --panel:#1d1840; --panel2:#251f52;
  --ink:#efeaff; --mut:#9d94c9; --gold:#ffcf5c; --gold2:#ffb020;
  --vio:#a78bfa; --ok:#4ade80; --bad:#f87171; --cyan:#67e8f9;
  --line:#37307a; --rad:14px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:40px;
}
#topbar{
  position:sticky; top:0; z-index:50; background:linear-gradient(180deg,#0d0b1e 70%,#0d0b1ee8);
  border-bottom:1px solid var(--line); padding:10px 12px 0;
}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.brand-badge{
  background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#241a00;
  font-weight:900; font-size:19px; border-radius:12px; padding:6px 11px;
  box-shadow:0 2px 14px #ffb02055;
}
.brand-txt b{font-size:15px; letter-spacing:.04em; display:block}
.brand-txt small{color:var(--mut); font-size:11.5px}
#tabs{display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none}
#tabs::-webkit-scrollbar{display:none}
#tabs button{
  flex:0 0 auto; background:var(--panel); color:var(--mut); border:1px solid var(--line);
  border-radius:10px; padding:7px 13px; font-size:13.5px; font-weight:600; cursor:pointer;
}
#tabs button.on{background:linear-gradient(135deg,#3b2f7d,#4c3a9e); color:#fff; border-color:var(--vio)}
main{max-width:980px; margin:0 auto; padding:14px 12px}
.tab{display:none}
.tab.on{display:block; animation:fadein .25s}
@keyframes fadein{from{opacity:0; transform:translateY(6px)} to{opacity:1}}
footer{max-width:980px; margin:26px auto 0; padding:0 14px; color:var(--mut); text-align:center}

/* ---------- tarjetas y layout ---------- */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--rad);
  padding:16px 16px 14px; margin-bottom:14px;
}
.card h2{font-size:18px; color:var(--gold); margin-bottom:8px}
.card h3{font-size:15.5px; color:var(--vio); margin:12px 0 6px}
.card p{margin:6px 0}
.mut{color:var(--mut)} .gold{color:var(--gold)} .vio{color:var(--vio)}
.ok{color:var(--ok)} .bad{color:var(--bad)} .cyan{color:var(--cyan)}
.chip{
  display:inline-block; background:var(--panel2); border:1px solid var(--line);
  border-radius:999px; padding:2px 11px; font-size:12.5px; color:var(--gold);
  margin:2px 4px 2px 0; font-weight:600;
}
.big-result{
  background:linear-gradient(135deg,#2a1f00,#3d2e00); border:1.5px solid var(--gold);
  border-radius:12px; padding:12px 14px; font-size:16px; margin:10px 0;
  overflow-x:auto;
}
.callout{
  background:#141a2e; border-left:4px solid var(--cyan); border-radius:8px;
  padding:9px 12px; margin:8px 0; font-size:13.8px;
}
.callout.why{border-left-color:var(--gold); background:#1d1830}
.callout.warn{border-left-color:var(--bad)}
.callout b:first-child{color:var(--cyan)}
.callout.why b:first-child{color:var(--gold)}

/* ---------- pasos ---------- */
.step{
  border:1px solid var(--line); border-radius:12px; margin:12px 0; overflow:hidden;
  background:var(--panel2);
}
.step > .step-head{
  display:flex; align-items:center; gap:10px; padding:10px 13px; cursor:pointer;
  background:linear-gradient(90deg,#241d55,#1d1840); user-select:none;
}
.step-num{
  background:var(--vio); color:#160f33; font-weight:900; border-radius:8px;
  min-width:30px; text-align:center; padding:3px 6px; font-size:14px;
}
.step-head b{font-size:14.5px; flex:1}
.step-head .arr{color:var(--mut); transition:transform .2s}
.step.open .arr{transform:rotate(90deg)}
.step-body{display:none; padding:12px 14px; border-top:1px solid var(--line)}
.step.open .step-body{display:block}

/* ---------- ecuaciones ---------- */
.eq{
  font-family:"Cambria Math","STIX Two Math",Georgia,serif; font-size:15.5px;
  background:#131028; border:1px solid #2c2760; border-radius:8px;
  padding:8px 12px; margin:6px 0; overflow-x:auto; white-space:nowrap;
}
.eq.center{text-align:center}
.frac{display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; margin:0 3px}
.frac>span{display:block; padding:0 4px}
.frac>span:first-child{border-bottom:1.2px solid currentColor}
sub,sup{font-size:11px}
.int{font-size:22px; vertical-align:middle}

/* ---------- tablas ---------- */
.tblwrap{overflow-x:auto; margin:8px 0}
table.cuadro{border-collapse:collapse; width:100%; font-size:13.5px; min-width:520px}
.cuadro th{
  background:#2c2467; color:var(--gold); padding:6px 9px; border:1px solid var(--line);
  font-size:12.5px; white-space:nowrap;
}
.cuadro td{padding:6px 9px; border:1px solid var(--line); text-align:center; white-space:nowrap}
.cuadro tr.zero td{color:var(--mut)}
.cuadro td.res{color:var(--gold); font-weight:700}

/* ---------- svg ---------- */
.svgbox{background:#0f0c24; border:1px solid var(--line); border-radius:10px; margin:8px 0; overflow-x:auto}
.svgbox svg{display:block; margin:0 auto; max-width:100%; height:auto}
.svg-cap{font-size:12px; color:var(--mut); text-align:center; padding:4px 8px 8px}

/* ---------- botones ---------- */
.btn{
  background:linear-gradient(135deg,#3b2f7d,#4c3a9e); color:#fff; border:1px solid var(--vio);
  border-radius:10px; padding:9px 16px; font-size:14px; font-weight:700; cursor:pointer; margin:4px 6px 4px 0;
}
.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#241a00; border-color:var(--gold2)}
.btn.small{padding:5px 11px; font-size:12.5px}
.btn:active{transform:scale(.97)}
select,input[type=number]{
  background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:7px 10px; font-size:14px;
}
input[type=number]{width:96px}
.lab-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:5px 0; font-size:13.5px}
.lab-row code{color:var(--cyan)}

/* ---------- test ---------- */
.test-line{display:flex; gap:8px; font-size:13px; padding:3px 6px; border-bottom:1px dashed #2c2760}
.test-line .name{flex:1}
.hero{
  background:radial-gradient(120% 140% at 20% 0%,#2d2168 0%,#161233 55%,#0d0b1e 100%);
  border:1px solid var(--line); border-radius:16px; padding:22px 18px; margin-bottom:14px;
}
.hero h1{font-size:22px; color:#fff; margin-bottom:6px}
.hero h1 .gold{color:var(--gold)}
.hero p{color:var(--mut); font-size:14px}
.grid2{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:760px){.grid2{grid-template-columns:1fr 1fr}}
.pill-steps{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
.pill-steps span{
  background:var(--panel2); border:1px solid var(--line); padding:4px 10px;
  border-radius:999px; font-size:12.5px;
}
.pill-steps b{color:var(--gold)}
ul.clean{list-style:none; padding-left:2px}
ul.clean li{padding:3px 0 3px 24px; position:relative}
ul.clean li::before{content:"◆"; color:var(--vio); position:absolute; left:4px; font-size:11px; top:6px}