/* ─────────────────────────────────────────────────────────────
   BULCLICK · PÁGINA DE HERRAMIENTA
   Encabezado compacto, banco de trabajo (la app real) y
   contenido de apoyo. Idéntico en las cinco herramientas;
   solo cambia el texto.
   ───────────────────────────────────────────────────────────── */
:root{
  --accent:#F97316; --accent-strong:#EA580C;
  --accent-soft:rgba(249,115,22,.10); --accent-line:rgba(249,115,22,.30);
  --ink:#0D1526; --text:#1E293B; --text-2:#475569; --text-3:#64748B;
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F8FAFC; --surface-3:#F1F5F9;
  --line:#E2E8F0; --line-2:#CBD5E0;
  --ok:#15803D; --ok-bg:rgba(21,128,61,.10);
  --bar:#0D1526; --bar-text:#FFF; --bar-mute:rgba(255,255,255,.60); --bar-line:rgba(255,255,255,.13);
  --r-btn:6px; --r-box:10px;
  --sans:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --ui:"Work Sans","Inter","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --text:#E2E8F0; --text-2:#B4C0CE; --text-3:#8899AC;
    --bg:#0A1120; --surface:#111C2F; --surface-2:#0E1728; --surface-3:#16233A;
    --line:#223046; --line-2:#2D3E58;
    --accent-soft:rgba(249,115,22,.15); --accent-line:rgba(249,115,22,.40);
    --ok:#4ADE80; --ok-bg:rgba(74,222,128,.13);
    --bar:#060C17;
  }
}
:root[data-theme="dark"]{
  --text:#E2E8F0; --text-2:#B4C0CE; --text-3:#8899AC;
  --bg:#0A1120; --surface:#111C2F; --surface-2:#0E1728; --surface-3:#16233A;
  --line:#223046; --line-2:#2D3E58;
  --accent-soft:rgba(249,115,22,.15); --accent-line:rgba(249,115,22,.40);
  --ok:#4ADE80; --ok-bg:rgba(74,222,128,.13);
  --bar:#060C17;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
svg{max-width:100%}
.shell{max-width:1180px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── Barra ──────────────────────────────────────────────────── */
.topbar{background:var(--bar);color:var(--bar-text);position:sticky;top:0;z-index:50}
.topbar__in{max-width:1180px;margin:0 auto;padding:0 24px;height:56px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--ui);font-weight:600;font-size:21.5px;letter-spacing:-.022em}
/* el simbolo lleva el cursor calado: el hueco muestra el fondo del soporte */
.brand__mark{width:35px;height:35px;color:var(--accent);display:block}
.brand__mark svg{width:100%;height:100%;display:block}
.topnav{display:flex;gap:2px;margin-left:10px}
.topnav a{font-family:var(--ui);font-size:13.5px;font-weight:500;color:var(--bar-mute);text-decoration:none;padding:7px 11px;border-radius:var(--r-btn);transition:.15s}
.topnav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.topnav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.10);box-shadow:inset 0 -2px 0 var(--accent)}
.topbar__end{margin-left:auto;display:flex;align-items:center;gap:8px}
.lang{font-family:var(--mono);font-size:12px;color:var(--bar-mute);text-decoration:none;border:1px solid var(--bar-line);border-radius:var(--r-btn);padding:4px 9px;transition:.15s}
.lang:hover{color:#fff;border-color:rgba(255,255,255,.34)}
.icon-btn{background:transparent;border:1px solid var(--bar-line);color:var(--bar-mute);width:29px;height:29px;border-radius:var(--r-btn);display:grid;place-items:center;cursor:pointer;transition:.15s}
.icon-btn:hover{color:#fff;border-color:rgba(255,255,255,.34)}
.icon-btn svg{width:15px;height:15px}

/* ── Encabezado de la herramienta (compacto) ────────────────── */
.head{padding:30px 0 20px}
.crumbs{font-size:12.5px;color:var(--text-3);margin:0 0 12px}
.crumbs a{text-decoration:none;color:var(--text-3)}
.crumbs a:hover{color:var(--accent-strong)}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 9px}
h1{font-size:clamp(27px,3.2vw,38px);line-height:1.12;font-weight:700;letter-spacing:-1px;margin:0;text-wrap:balance}
.head p{margin:12px 0 0;color:var(--text-2);font-size:16.5px;max-width:68ch}

/* ── Banco de trabajo: aquí vive la herramienta ─────────────── */
.bench{border:1px solid var(--line);border-radius:var(--r-box);background:var(--surface);overflow:hidden;scroll-margin-top:70px}
.bench__frame{display:block;width:100%;height:calc(100vh - 104px);min-height:660px;border:0;background:var(--bg)}
@media (max-width:1040px){
  .bench__frame{height:auto;min-height:1180px}
}
.bench__note{margin:10px 0 0;font-size:12.5px;color:var(--text-3);display:flex;align-items:center;gap:7px}
.bench__note svg{width:14px;height:14px;flex:none;color:var(--ok)}

/* ── Contenido de apoyo ─────────────────────────────────────── */
.section{padding:54px 0 0}
.section h2{font-size:23px;font-weight:700;letter-spacing:-.6px;margin:0 0 18px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.step{padding:20px 22px 20px 0;border-right:1px solid var(--line)}
.step:not(:first-child){padding-left:22px}
.step:last-child{border-right:0;padding-right:0}
.step__n{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--accent);margin-bottom:8px}
.step p{margin:0;color:var(--text-2);font-size:14.5px}
.step b{color:var(--text)}

.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px 30px;border-top:1px solid var(--line);padding-top:18px}
.feats div{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;font-size:14.5px;color:var(--text-2)}
.feats svg{width:15px;height:15px;color:var(--ok);margin-top:4px}
.feats b{color:var(--text)}

.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:16px 34px 16px 0;position:relative;font-size:15.5px;font-weight:600;letter-spacing:-.2px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before,.qa summary::after{content:"";position:absolute;background:var(--accent);transition:transform .18s}
.qa summary::before{right:6px;top:50%;width:11px;height:1.5px;margin-top:-.75px}
.qa summary::after{right:10.75px;top:50%;width:1.5px;height:11px;margin-top:-5.5px}
.qa details[open] summary::after{transform:scaleY(0)}
.qa p{margin:0 0 18px;color:var(--text-2);font-size:15px;max-width:70ch}

.more{display:flex;gap:9px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
.more a{
  font-family:var(--ui);font-size:14px;text-decoration:none;color:var(--text-2);
  border:1px solid var(--line-2);border-radius:var(--r-btn);padding:8px 14px;transition:.15s;
}
.more a:hover{border-color:var(--accent);color:var(--accent-strong)}

/* ── Pie ────────────────────────────────────────────────────── */
.foot{background:var(--bar);color:var(--bar-mute);font-size:13.5px;margin-top:60px}
.foot__in{padding:26px 0;display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.foot a{text-decoration:none}
.foot a:hover{color:#fff}
.foot__end{margin-left:auto;color:rgba(255,255,255,.42);font-size:12.5px}
.foot__end a{color:rgba(255,255,255,.72);border-bottom:1px solid var(--bar-line);padding-bottom:1px}
.foot__end a:hover{color:#fff;border-color:var(--accent)}

@media (max-width:960px){
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line);padding:18px 0 !important}
  .step:last-child{border-bottom:0}
}
@media (max-width:720px){
  .topnav{display:none}
  .foot__end{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}