/* ============================================================
   TOOL-PAGE.CSS — layout de las paginas dedicadas /herramientas/<slug>
   (Fase 4 del Centro de Herramientas). Cabecera/pie livianos propios
   (no el mega-menu completo de index.html, ver decision de arquitectura
   del plan) + tipografia de articulo para el contenido estatico + el
   mismo panel "instrumento" oscuro que ya usa #herramientas en la home
   (estilos en academy.css, reutilizados sin cambios). Mismos tokens de
   color/tipografia que el resto del sitio (style.css), nada nuevo.
   ============================================================ */

.tp-masthead { border-bottom:1px solid var(--border); padding:.9rem 0; }
.tp-masthead-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.tp-logo img { height:34px; display:block; }
.tp-masthead-nav { display:flex; align-items:center; gap:1.2rem; }
.tp-masthead-nav > a:not(.btn-primary) { font-size:.88rem; font-weight:600; color:var(--text-2); }
.tp-masthead-nav > a:not(.btn-primary):hover { color:var(--primary); }
.tp-shop-btn { padding:.55rem 1.1rem; font-size:.85rem; }

.tp-breadcrumb { background:var(--bg-2); border-bottom:1px solid var(--border); padding:.6rem 0; }
.tp-breadcrumb .container { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; font-size:.78rem; color:var(--text-2); }
.tp-breadcrumb a { color:var(--text-2); }
.tp-breadcrumb a:hover { color:var(--primary); }
.tp-breadcrumb span[aria-current] { color:var(--text); font-weight:600; }

.tp-hero { padding:3rem 0 2rem; }
.tp-hero h1 { font-size:2rem; font-weight:800; color:var(--text); letter-spacing:-.02em; margin:.6rem 0 .8rem; line-height:1.2; }
.tp-hero-lead { font-size:1.05rem; color:var(--text-2); line-height:1.6; max-width:60ch; }

.tp-content { padding-top:0; padding-bottom:4rem; }
.tp-layout { display:grid; grid-template-columns:1fr 300px; gap:2.5rem; align-items:start; }

.tp-main article { max-width:66ch; }
.tp-main article h2 { font-size:1.25rem; font-weight:800; color:var(--text); margin:2.2rem 0 .8rem; letter-spacing:-.01em; }
.tp-main article h2:first-child { margin-top:0; }
.tp-main article p { font-size:.95rem; color:var(--text-2); line-height:1.65; margin-bottom:.8rem; }
.tp-main article ul { padding-left:1.2rem; margin-bottom:.8rem; }
.tp-main article li { font-size:.92rem; color:var(--text-2); line-height:1.6; padding:.2rem 0; }
.tp-main article li::marker { color:var(--primary); }

.tp-formula-box { font-family:var(--font-mono); font-size:1rem; color:var(--primary-dark); background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem 1.1rem; margin:.8rem 0 1rem; }
.tp-vars-list { list-style:none; padding-left:0; margin-bottom:1.2rem; }
.tp-vars-list li { display:flex; gap:.6rem; align-items:baseline; font-size:.88rem; padding:.3rem 0; border-bottom:1px solid var(--border); }
.tp-vars-list li:last-child { border-bottom:none; }
.tp-var-symbol { font-family:var(--font-mono); font-weight:700; color:var(--primary); flex:0 0 2.4rem; }
.tp-var-name { color:var(--text); flex:1; }
.tp-var-unit { color:var(--text-2); font-size:.8rem; white-space:nowrap; }

.tp-example-box { background:var(--bg-2); border-left:3px solid var(--orange); border-radius:0 var(--radius) var(--radius) 0; padding:.9rem 1.1rem; margin-bottom:1.2rem; }
.tp-example-box strong { display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--orange-dark); margin-bottom:.4rem; }
.tp-example-box p { margin:0; font-size:.9rem; color:var(--text-2); }

.tp-considerations { background:rgba(255,102,0,.06); border:1px solid rgba(255,102,0,.2); border-radius:var(--radius); padding:1rem 1.1rem; margin-bottom:1.2rem; }
.tp-considerations li { color:#8a4a12; }

.tp-faq-item, .tp-glossary-item { border-bottom:1px solid var(--border); padding:.7rem 0; }
.tp-faq-item:last-child, .tp-glossary-item:last-child { border-bottom:none; }
.tp-faq-item dt, .tp-glossary-item dt { font-weight:700; color:var(--text); font-size:.92rem; margin-bottom:.25rem; }
.tp-faq-item dd, .tp-glossary-item dd { color:var(--text-2); font-size:.88rem; line-height:1.55; margin:0; }

.tp-calculator { margin-top:2.5rem; }

.tp-sidebar { position:sticky; top:1.5rem; display:flex; flex-direction:column; gap:1.5rem; }
.tp-sidebar-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.2rem; }
.tp-sidebar-card h3 { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-2); margin-bottom:.8rem; }
.tp-sidebar-card ul { padding-left:0; }
.tp-sidebar-card li { list-style:none; padding:0; }
.tp-sidebar-card a { display:block; padding:.5rem 0; font-size:.87rem; color:var(--text); border-bottom:1px solid var(--border); }
.tp-sidebar-card li:last-child a { border-bottom:none; }
.tp-sidebar-card a:hover { color:var(--primary); }

.tp-footer { background:var(--dark); color:rgba(255,255,255,.6); padding:2.2rem 0; margin-top:2rem; }
.tp-footer .container { display:flex; flex-direction:column; gap:.5rem; align-items:center; text-align:center; }
.tp-footer p { font-size:.82rem; }
.tp-footer a { color:#fff; font-weight:600; }
.tp-footer a:hover { color:var(--blue-bright); }

@media(max-width:900px) {
  .tp-layout { grid-template-columns:1fr; }
  .tp-sidebar { position:static; }
}
@media(max-width:600px) {
  .tp-masthead-nav > a:not(.btn-primary) { display:none; }
  .tp-hero h1 { font-size:1.5rem; }
}