/* Concepto: visor 3D fijo (arriba en el celu, a la izquierda en escritorio) y tablero de control al lado. Estética de taller de impresión: cama con grilla, números en mono. */
:root{
  --bg:#EDF0F0; --panel:#FAFBFB; --ink:#18201E; --muted:#5B6866; --line:#D3DBDA;
  --accent:#0B6E7F; --accent-ink:#FFFFFF; --accent-soft:#D6EBEE;
  --stage:#CFD7D8; --grid:#B3BFC1; --bed:#C2CCCE; --warn:#A8500A; --ok:#1E7448;
  --f-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1415; --panel:#171E1F; --ink:#E4EAE9; --muted:#93A09E; --line:#2A3436;
    --accent:#4FC3D6; --accent-ink:#06222A; --accent-soft:#17353B;
    --stage:#1A2225; --grid:#2E3A3D; --bed:#222C2F; --warn:#F0A25B; --ok:#6CCB95;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1415; --panel:#171E1F; --ink:#E4EAE9; --muted:#93A09E; --line:#2A3436;
  --accent:#4FC3D6; --accent-ink:#06222A; --accent-soft:#17353B;
  --stage:#1A2225; --grid:#2E3A3D; --bed:#222C2F; --warn:#F0A25B; --ok:#6CCB95;
  color-scheme:dark;
}

/* Hub: portada con el catálogo de herramientas. La imagen principal es una maceta dibujada con las mismas curvas que usa el generador. */
:root{--nav-w:1120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.55; margin:0;
  padding-block:14px 40px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); background:var(--bg); z-index:40}
h1,h2,h3{font-family:var(--f-display); margin:0; text-wrap:balance; line-height:1.1}
p{margin:0}
.wrap{max-width:1120px; margin-inline:auto}
section.wrap{padding-top:64px}
.eyebrow{font-family:var(--f-mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin-bottom:14px}
.hero{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:36px; align-items:center; padding-top:34px}
.hero h1{font-size:clamp(34px,5.2vw,58px); letter-spacing:-.025em; margin-bottom:18px}
.lead{color:var(--muted); font-size:18px; max-width:54ch; margin-bottom:26px}
.cta-row{display:flex; gap:10px; flex-wrap:wrap}
.plate{
  position:relative; background-color:var(--stage); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  aspect-ratio:6/7; max-width:100%; width:100%;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:36px 36px; background-position:center;
}
.plate svg{position:absolute; inset:0; width:100%; height:100%}
.plate .tag{position:absolute; left:12px; bottom:10px; font-family:var(--f-mono); font-size:11.5px; color:var(--muted)}
section h2{font-size:clamp(26px,3.4vw,36px); letter-spacing:-.015em; margin-bottom:8px}
.sec-lead{color:var(--muted); margin-bottom:22px; max-width:60ch}
.tools{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
.tool{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0}
.tool h3{font-size:21px}
.tool p{color:var(--muted); font-size:15px}
.tool .meta{font-family:var(--f-mono); font-size:12px; color:var(--muted)}
.tool.soon{border-style:dashed; background:transparent}
.tool .cta{margin-top:auto}
.badge{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:2px 9px}
.badge.on{color:var(--ok); border-color:var(--ok)}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.steps li{border-top:2px solid var(--accent); padding-top:14px; min-width:0}
.steps .n{font-family:var(--f-mono); color:var(--accent); font-size:13px; display:block; margin-bottom:6px}
.steps h3{font-size:20px; margin-bottom:6px}
.steps p{color:var(--muted); font-size:15px}
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; max-width:780px}
.plan{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px; display:flex; flex-direction:column; gap:12px; min-width:0}
.plan.pro{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.plan h3{font-size:20px}
.price{font-family:var(--f-display); font-size:40px; letter-spacing:-.02em; line-height:1}
.price .per{font-family:var(--f-body); font-size:15px; color:var(--muted); letter-spacing:0; margin-left:4px}
.plan ul{margin:0; padding-left:18px; color:var(--muted); display:flex; flex-direction:column; gap:6px; font-size:15px}
.plan .cta-row{margin-top:auto}
.note{color:var(--muted); font-size:14px}
.faq{max-width:760px}
details{border-bottom:1px solid var(--line); padding-block:14px}
summary{cursor:pointer; font-weight:600; font-size:17px; list-style-position:inside}
details p{color:var(--muted); margin-top:8px}
footer.wrap{margin-top:64px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--muted); font-size:14px}
footer a{color:var(--muted)}
@media (max-width:780px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .plate{aspect-ratio:1/1; max-width:420px}
  section.wrap{padding-top:48px}
}