/* ============================================================
   ACADEMY.CSS — RF CDE Academy: accesos, calculadoras y landing
   "cuanto cuesta montar una radio" (academy.js)
   ============================================================ */

.academy-links { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.8rem; }
.academy-link-card { display:flex; align-items:center; gap:.9rem; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.1rem 1.3rem; transition:.2s; }
.academy-link-card:hover { border-color:var(--primary); background:#fff; box-shadow:var(--shadow); }
.academy-link-card > i:first-child { font-size:1.3rem; color:var(--primary); flex-shrink:0; }
.academy-link-card strong { display:block; font-size:.88rem; color:var(--text); }
.academy-link-card span { font-size:.75rem; color:var(--text-2); }
.academy-link-card > i:last-child { margin-left:auto; color:var(--text-2); font-size:.75rem; }

/* ============================================================
   CAJA DE HERRAMIENTAS — grilla de selección (clara, como el resto
   del sitio) + panel "instrumento" oscuro por herramienta. El oscuro
   queda contenido a esta tarjeta puntual (mismo criterio que el hero
   o #empresas: bandas oscuras aisladas, no dark mode del sitio) y usa
   la MISMA textura de puntos tipo osciloscopio que ya existe en el
   fondo del hero — es el mismo guiño "RF/tecnico", no un estilo nuevo.
   Fuente monoespaciada solo para lecturas numericas (no se carga una
   tipografia nueva, se usa la stack del sistema). Colores: azul/naranja
   de marca unicamente — sin neon ni paleta "gamer". */
/* El encabezado de esta seccion ahora es .section-banner (style.css,
   tarjeta compacta con icono) en vez de .section-header — ver el
   pedido de "aprolijar" los titulos de seccion, aplicado en index.html. */

/* Mosaico compacto de seleccion (antes: tarjetas con descripcion + link
   propio, ocupaban demasiado lugar en 12 unidades — feedback directo).
   Solo icono + titulo + categoria/nivel; alta densidad (6 columnas en
   desktop), la descripcion completa vive en el panel al abrir la
   herramienta (y como tooltip nativo del mosaico). */
.tools-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:.5rem; margin-bottom:1rem; }
/* [hidden] es un atributo nativo del HTML (lo usa filterToolsGrid()
   para ocultar mosaicos que no matchean el filtro/busqueda) pero su
   regla de UA (display:none) tiene MENOS prioridad que cualquier CSS
   propio, sin importar la especificidad — "display:flex" de aca abajo
   le ganaba y el filtro nunca se veia (bug real reportado: los botones
   de categoria "no hacian nada"). Esta regla se declara ANTES para
   dejar en claro la intencion, pero lo que la hace efectiva es el
   selector [hidden] de abajo. */
.tool-tile {
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem;
  background:#fff; border:1px solid var(--border); border-radius:10px;
  padding:.8rem .4rem .65rem; position:relative; transition:border-color .2s, background .2s, transform .2s;
}
.tool-tile[hidden] { display:none; }
.tool-tile:hover { border-color:#c2d1de; transform:translateY(-1px); }
.tool-tile.active { border-color:var(--primary); background:linear-gradient(180deg,rgba(0,136,204,.06),rgba(0,136,204,0) 70%); }
.tool-tile-code {
  position:absolute; top:.4rem; right:.5rem; font-family:var(--font-mono);
  font-size:.5rem; letter-spacing:.02em; color:var(--text-2); opacity:.4; transition:.2s;
}
.tool-tile.active .tool-tile-code { color:var(--primary); opacity:.9; }
.tool-tile-icon { width:24px; height:24px; color:#94a3b8; transition:color .2s; }
.tool-tile-icon svg { width:100%; height:100%; display:block; }
.tool-tile:hover .tool-tile-icon, .tool-tile.active .tool-tile-icon { color:var(--primary); }
.tool-tile-title { font-size:.73rem; font-weight:700; color:var(--text); line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tool-tile-meta { font-size:.58rem; color:var(--text-2); opacity:.8; }
.tool-tile.cat-streaming.active .tool-tile-code { color:var(--orange); }
.tool-tile.cat-streaming:hover .tool-tile-icon, .tool-tile.cat-streaming.active .tool-tile-icon { color:var(--orange); }
.tool-tile.cat-streaming.active { background:linear-gradient(180deg,rgba(255,102,0,.06),rgba(255,102,0,0) 70%); border-color:var(--orange); }
.tool-tile.cat-instalacion.active .tool-tile-code { color:var(--success); }
.tool-tile.cat-instalacion:hover .tool-tile-icon, .tool-tile.cat-instalacion.active .tool-tile-icon { color:var(--success); }
.tool-tile.cat-instalacion.active { background:linear-gradient(180deg,rgba(22,163,74,.06),rgba(22,163,74,0) 70%); border-color:var(--success); }
@media(max-width:900px) { .tools-grid { grid-template-columns:repeat(4,1fr); } }
@media(max-width:600px) {
  .tools-grid { grid-template-columns:repeat(3,1fr); gap:.4rem; }
  .tool-tile { padding:.65rem .3rem .5rem; }
  .tool-tile-title { font-size:.66rem; }
  .tool-tile-meta { font-size:.55rem; }
}

/* Panel "instrumento" de la herramienta activa — regla de calibracion
   arriba y 4 tornillos en las esquinas, como una unidad de rack real. */
.tool-instrument {
  max-width:680px; margin:0 auto; position:relative; isolation:isolate;
  background:linear-gradient(180deg,#0d1b3e 0%,#0a0a1a 100%);
  border:1px solid rgba(127,208,255,.25);
  border-radius:var(--radius-lg);
  padding:1.65rem 1.5rem 1.5rem;
  color:#e6edf5;
  overflow:hidden;
}
.tool-instrument::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0/26px 26px;
}
.tool-instrument::after {
  content:''; position:absolute; inset:9px; z-index:-1; pointer-events:none;
  border:1px solid rgba(127,208,255,.15); border-radius:8px;
}
.tool-instrument-ruler {
  position:absolute; top:0; left:16px; right:16px; height:13px;
  background-image:repeating-linear-gradient(90deg, rgba(127,208,255,.4) 0 1px, transparent 1px 22px);
  opacity:.55; pointer-events:none;
}
.tool-instrument-screw { position:absolute; width:5px; height:5px; border-radius:50%; background:rgba(127,208,255,.4); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); pointer-events:none; }
.tool-instrument-screw.tl { top:9px; left:9px; } .tool-instrument-screw.tr { top:9px; right:9px; }
.tool-instrument-screw.bl { bottom:9px; left:9px; } .tool-instrument-screw.br { bottom:9px; right:9px; }
.tool-instrument-head { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:1rem; flex-wrap:wrap; padding-right:2.2rem; }

/* Cerrar arriba del panel (visible apenas se abre) + boton flotante
   fijo en pantalla (visible aunque el usuario haya bajado leyendo) —
   ninguno de los dos obliga a desplazarse hacia arriba para cerrar. */
.tool-instrument-close {
  position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#9fb3c8;
  background:rgba(255,255,255,.06); border:1px solid rgba(127,208,255,.2); transition:.2s; z-index:2;
}
.tool-instrument-close:hover { color:#fff; background:rgba(248,113,113,.18); border-color:#f87171; }
/* bottom:6rem en vez de al ras del piso — el sitio ya tiene un boton
   fijo "volver arriba" en left:2rem/bottom:2rem (style.css .back-to-top,
   48px de alto) que aparece al scrollear; con un offset chico este
   flotante quedaba encimado con ese (mismo bug de "todo apilado" que
   ya se corrigio antes para .wa-float/.back-to-top en mobile — no
   repetirlo aca). 6rem lo deja apilado arriba, sin tocarlo. */
.tool-floating-close {
  position:fixed; left:1.1rem; bottom:6rem; z-index:500;
  display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.1rem;
  background:#16202B; color:#fff; border:none; border-radius:50px; font-size:.82rem; font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,.25); transition:.2s;
}
.tool-floating-close[hidden] { display:none; }
.tool-floating-close:hover { background:#0a0a1a; transform:translateY(-1px); }
.tool-floating-close i { color:#f87171; }
@media(max-width:768px) {
  /* En mobile hay ADEMAS una bottom-nav fija (style.css) que .wa-float
     y .back-to-top esquivan subiendo a 5.5rem + safe-area; ese
     "volver arriba" mobile mide 42px de alto — apilamos este boton
     todavia mas arriba (9.25rem) para no superponer ninguno de los
     dos flotantes que ya conviven ahi. */
  .tool-floating-close { left:.8rem; bottom:calc(9.25rem + env(safe-area-inset-bottom)); padding:.65rem .9rem; font-size:.78rem; }
}
.tool-instrument-title { font-size:1rem; font-weight:700; display:flex; align-items:center; gap:.65rem; color:#fff; }
.tool-instrument-icon { width:24px; height:24px; color:#7fd0ff; flex-shrink:0; }
.tool-instrument-icon svg { width:100%; height:100%; display:block; }
.tool-instrument-code { font-family:var(--font-mono); font-size:.62rem; color:#5f7286; letter-spacing:.03em; font-weight:400; margin-left:.2rem; }
.tool-instrument-formula { font-family:var(--font-mono); font-size:.72rem; color:#7fd0ff; background:rgba(127,208,255,.08); border:1px solid rgba(127,208,255,.2); border-radius:6px; padding:.3rem .6rem; white-space:nowrap; }
.tool-instrument-page-link { display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:600; color:#7fd0ff; margin:-.4rem 0 1rem; }
.tool-instrument-page-link:hover { color:#fff; }
.tool-instrument-page-link i { font-size:.6rem; }

/* Sub-pestañas dentro de una herramienta (ej. ROE: por potencia / por impedancia) */
.tool-subtabs { display:flex; gap:.5rem; margin-bottom:.85rem; }
.tool-subtab { flex:1; padding:.55rem .7rem; border:1px solid rgba(127,208,255,.25); border-radius:8px; background:transparent; color:#9fb3c8; font-size:.78rem; font-weight:600; transition:.2s; }
.tool-subtab.active { background:rgba(127,208,255,.14); color:#fff; border-color:#7fd0ff; }

/* Calculadoras (formulario, resultados, disclaimer) — clases compartidas
   por las 9 herramientas, restyleadas para el panel oscuro */
.calc-form { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:.5rem; }
.calc-field { display:flex; flex-direction:column; gap:.3rem; }
.calc-field label { font-size:.7rem; font-weight:600; color:#9fb3c8; text-transform:uppercase; letter-spacing:.04em; font-family:var(--font-mono); }
.calc-field input, .calc-field select { padding:.65rem .8rem; border:1.5px solid rgba(127,208,255,.22); border-radius:var(--radius); font-size:.9rem; outline:none; background:rgba(255,255,255,.05); color:#fff; font-family:var(--font-mono); transition:.2s; }
.calc-field input::placeholder { color:#5f7286; }
.calc-field input:focus, .calc-field select:focus { border-color:#7fd0ff; box-shadow:0 0 0 3px rgba(127,208,255,.15); }
.calc-field select option { background:#0d1b3e; color:#fff; font-family:var(--font-body); }
.calc-form .btn-primary { grid-column:1/-1; justify-content:center; background:var(--orange); }
.calc-form .btn-primary:hover { background:var(--orange-dark); }
.calc-note { font-size:.74rem; color:#9fb3c8; margin-bottom:.7rem; line-height:1.45; }
.calc-error { color:#ff9b9b; font-size:.85rem; padding:.6rem 0; }
.calc-result { background:rgba(127,208,255,.07); border:1px solid rgba(127,208,255,.25); border-radius:var(--radius-lg); padding:1.05rem; margin:.7rem 0; text-align:center; }
.calc-result-main { display:flex; flex-direction:column; gap:.15rem; }
.calc-result-main span { font-size:.72rem; color:#9fb3c8; text-transform:uppercase; letter-spacing:.05em; }
.calc-result-main strong { font-size:1.75rem; font-weight:800; color:#7fd0ff; font-family:var(--font-mono); text-shadow:0 0 18px rgba(127,208,255,.35); }
.calc-result-sub { font-size:.78rem; color:#9fb3c8; margin-top:.4rem; line-height:1.45; }
.calc-disclaimer { display:flex; align-items:flex-start; gap:.5rem; font-size:.74rem; color:#ffcfa3; background:rgba(255,102,0,.1); border:1px solid rgba(255,102,0,.28); border-radius:var(--radius); padding:.55rem .75rem; margin-top:.3rem; }
.calc-disclaimer i { color:var(--orange); margin-top:.1rem; flex-shrink:0; }

/* Conversor dBm: grilla de 4 resultados equivalentes */
.calc-result-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin:.7rem 0; }
.calc-result-row { background:rgba(127,208,255,.07); border:1px solid rgba(127,208,255,.22); border-radius:10px; padding:.8rem; text-align:center; }
.calc-result-row span { display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:#9fb3c8; margin-bottom:.3rem; }
.calc-result-row strong { font-size:1.1rem; color:#7fd0ff; font-family:var(--font-mono); }

/* Veredicto tipo semaforo (ROE, zona de Fresnel) */
.roe-verdict { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700; padding:.35rem .8rem; border-radius:50px; margin-top:.5rem; }
.roe-verdict i { font-size:.45rem; }
.roe-verdict.good { background:rgba(74,222,128,.15); color:#4ade80; }
.roe-verdict.ok { background:rgba(250,204,21,.15); color:#facc15; }
.roe-verdict.bad { background:rgba(248,113,113,.15); color:#f87171; }

/* ============================================================
   CENTRO DE HERRAMIENTAS — secciones nuevas del panel (contexto,
   modo estudiante/tecnico, formula detallada, procedimiento paso a
   paso, interpretacion, consideraciones, errores, FAQ, glosario,
   relacionadas, equipamiento relacionado, acciones de resultado).
   Mismo lenguaje visual del panel "instrumento" ya existente (azul
   #7fd0ff sobre fondo oscuro, monoespaciada solo en lecturas
   numericas) — no se introduce paleta nueva. ============================================================ */

.tool-instrument-level { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#0a0a1a; background:#7fd0ff; border-radius:50px; padding:.2rem .55rem; }

.tool-mode-toggle { margin-bottom:1rem; }
.tool-mode-toggle .tool-subtab { flex:none; padding:.45rem .9rem; }

.tool-context { margin-bottom:1.1rem; display:flex; flex-direction:column; gap:.7rem; }
.tool-context-block strong { display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#7fd0ff; margin-bottom:.3rem; }
.tool-context-block p { font-size:.85rem; color:#c9d6e3; line-height:1.55; margin:0; }
.tool-context-block ul { margin:0; padding-left:1.1rem; }
.tool-context-block li { font-size:.82rem; color:#c9d6e3; line-height:1.5; padding:.15rem 0; }

.tool-formula-detail { margin-bottom:1.1rem; border:1px solid rgba(127,208,255,.2); border-radius:var(--radius); padding:.7rem .9rem; background:rgba(127,208,255,.04); }
.tool-formula-detail summary { cursor:pointer; font-size:.78rem; font-weight:700; color:#7fd0ff; display:flex; align-items:center; gap:.45rem; list-style:none; }
.tool-formula-detail summary::-webkit-details-marker { display:none; }
.tool-formula-display { font-family:var(--font-mono); font-size:.85rem; color:#fff; margin:.6rem 0 .5rem; }
.tool-formula-vars { display:flex; flex-direction:column; gap:.3rem; }
.tool-formula-var { display:grid; grid-template-columns:2.4rem 1fr auto; gap:.6rem; align-items:baseline; font-size:.78rem; }
.tool-formula-var-symbol { font-family:var(--font-mono); color:#7fd0ff; font-weight:700; }
.tool-formula-var-name { color:#e6edf5; }
.tool-formula-var-unit { color:#5f7286; font-size:.72rem; white-space:nowrap; }

/* Bloques colapsables genericos (procedimiento, errores, FAQ, glosario,
   ejemplo, consideraciones, relacionadas) — TODO cerrado por defecto:
   el usuario abre solo lo que le interesa en vez de recibir el panel
   entero de una vez (queja real: el panel se hacia interminable tanto
   en mobile como en desktop). Mismo trato visual, un solo patron
   reutilizado para las 7 secciones. */
.tool-steps, .tool-errors, .tool-faq, .tool-glossary, .tool-example,
.tool-considerations, .tool-related-tools, .tool-related-products {
  margin:.85rem 0; border:1px solid rgba(127,208,255,.18); border-radius:var(--radius); padding:.7rem .9rem; background:rgba(255,255,255,.02);
}
.tool-steps summary, .tool-errors summary, .tool-faq summary, .tool-glossary summary, .tool-example summary,
.tool-considerations summary, .tool-related-tools summary, .tool-related-products summary {
  cursor:pointer; font-size:.8rem; font-weight:700; color:#e6edf5; display:flex; align-items:center; gap:.5rem; list-style:none;
}
.tool-steps summary::-webkit-details-marker, .tool-errors summary::-webkit-details-marker,
.tool-faq summary::-webkit-details-marker, .tool-glossary summary::-webkit-details-marker,
.tool-example summary::-webkit-details-marker, .tool-considerations summary::-webkit-details-marker,
.tool-related-tools summary::-webkit-details-marker, .tool-related-products summary::-webkit-details-marker { display:none; }
.tool-steps summary i, .tool-errors summary i, .tool-faq summary i, .tool-glossary summary i, .tool-example summary i,
.tool-considerations summary i, .tool-related-tools summary i, .tool-related-products summary i { color:#7fd0ff; }
.tool-steps[open] summary, .tool-errors[open] summary, .tool-faq[open] summary, .tool-glossary[open] summary, .tool-example[open] summary,
.tool-considerations[open] summary, .tool-related-tools[open] summary, .tool-related-products[open] summary { margin-bottom:.6rem; }
.tool-considerations summary i { color:var(--orange); }

.tool-steps ol { margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.45rem; }
.tool-steps li { font-size:.82rem; color:#c9d6e3; font-family:var(--font-mono); line-height:1.5; }

.tool-errors ul { margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.4rem; }
.tool-errors li { font-size:.82rem; color:#c9d6e3; line-height:1.5; }

.tool-faq-item { padding:.5rem 0; border-top:1px solid rgba(127,208,255,.12); }
.tool-faq-item:first-child { border-top:none; padding-top:0; }
.tool-faq-item strong { display:block; font-size:.82rem; color:#e6edf5; margin-bottom:.25rem; }
.tool-faq-item p { font-size:.8rem; color:#9fb3c8; line-height:1.5; margin:0; }

.tool-glossary-item { display:flex; gap:.5rem; padding:.35rem 0; font-size:.8rem; }
.tool-glossary-item strong { flex:0 0 auto; color:#7fd0ff; }
.tool-glossary-item span { color:#9fb3c8; line-height:1.45; }

.tool-example p { font-size:.82rem; color:#c9d6e3; line-height:1.5; margin:0; }

.tool-interpret { margin:.85rem 0; }
.tool-interpret strong { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:#e6edf5; margin-bottom:.3rem; }
.tool-interpret strong i { color:#facc15; }
.tool-interpret p { font-size:.82rem; color:#c9d6e3; line-height:1.55; margin:0; }

.tool-considerations { border-color:rgba(255,102,0,.25); background:rgba(255,102,0,.06); }
.tool-considerations summary { color:#ffcfa3; }
.tool-considerations ul { margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.4rem; }
.tool-considerations li { font-size:.8rem; color:#e6cdb3; line-height:1.5; }

.tool-result-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.85rem; }
.btn-tool-action { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .8rem; font-size:.75rem; font-weight:600; color:#9fb3c8; background:rgba(255,255,255,.04); border:1px solid rgba(127,208,255,.22); border-radius:50px; transition:.2s; }
.btn-tool-action:hover { color:#fff; border-color:#7fd0ff; background:rgba(127,208,255,.1); }
.btn-tool-action-primary { color:#0a0a1a; background:var(--orange); border-color:var(--orange); }
.btn-tool-action-primary:hover { background:var(--orange-dark); border-color:var(--orange-dark); color:#fff; }

.tool-related-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }
.tool-related-chip { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; font-size:.76rem; font-weight:600; color:#c9d6e3; background:rgba(127,208,255,.06); border:1px solid rgba(127,208,255,.2); border-radius:50px; transition:.2s; }
.tool-related-chip svg { width:14px; height:14px; }
.tool-related-chip:hover { border-color:#7fd0ff; color:#fff; background:rgba(127,208,255,.14); }

.tool-related-products .dm-cs-row { margin-top:.2rem; }
.tool-product-out { font-size:.62rem; font-weight:700; color:#f87171; text-transform:uppercase; }

.tools-empty { text-align:center; color:var(--text-2); font-size:.85rem; padding:2rem 1rem; }

@media(max-width:768px) {
  .calc-form { grid-template-columns:1fr; }
  .tool-instrument { padding:1.5rem 1.1rem 1.1rem; }
  .tool-instrument-formula { font-size:.68rem; }
  .tool-mode-toggle .tool-subtabs, .tool-mode-toggle { display:flex; flex-wrap:wrap; }
  .tool-formula-var { grid-template-columns:2.2rem 1fr; }
  .tool-formula-var-unit { grid-column:2; }
  .tool-result-actions { flex-direction:column; }
  .btn-tool-action { justify-content:center; }
}

/* Impresion / "Descargar PDF" visual (boton Imprimir del navegador):
   solo el instrumento de la herramienta activa, sin comercio ni nav. */
@media print {
  body * { visibility:hidden; }
  .tool-instrument, .tool-instrument * { visibility:visible; }
  .tool-instrument { position:absolute; left:0; top:0; width:100%; max-width:100%; background:#fff !important; color:#111 !important; border:none; box-shadow:none; }
  .tool-instrument::before, .tool-instrument::after, .tool-instrument-ruler, .tool-instrument-screw,
  .tool-instrument-close, .tool-floating-close, .tool-instrument-page-link,
  .tool-mode-toggle, .tool-result-actions, .calc-form button, .tool-related-products, .tool-related-tools { display:none !important; }
  /* Las secciones estan colapsadas por defecto en pantalla — al
     imprimir se fuerza a mostrar todo el contenido (sin el toggle,
     que no tiene sentido en papel). */
  .tool-instrument details summary { display:none !important; }
  .tool-instrument details { display:block !important; }
  .tool-instrument details:not([open]) > *:not(summary) { display:block !important; }
  .tool-instrument-title, .tool-instrument-formula, .tool-formula-display,
  .calc-field label, .calc-result-main strong, .tool-context-block p, .tool-context-block li,
  .tool-steps li, .tool-interpret p, .tool-considerations li, .tool-faq-item p, .tool-glossary-item span { color:#111 !important; }
  .calc-result, .calc-result-row, .tool-formula-detail, .tool-steps, .tool-errors, .tool-faq, .tool-glossary, .tool-considerations, .tool-example {
    background:#f5f7fa !important; border-color:#ccc !important;
  }
}

/* Cuanto cuesta montar una radio */
.cost-scenarios { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; margin-bottom:1.8rem; }
.cost-scenario-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; }
.cost-scenario-card h4 { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:.5rem; }
.cost-scenario-price { font-size:1.5rem; font-weight:800; color:var(--orange); margin-bottom:1rem; }
.cost-scenario-includes-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-2); margin-bottom:.4rem; }
.cost-scenario-card ul { list-style:none; margin-bottom:1.2rem; }
.cost-scenario-card li { font-size:.82rem; color:var(--text-2); padding:.2rem 0; }
.cost-scenario-card li i { color:var(--success); margin-right:.4rem; }
.cost-cta { text-align:center; }
.cost-cta p { font-size:.9rem; color:var(--text-2); margin-bottom:1rem; }

@media(max-width:768px) {
  .academy-links { grid-template-columns:1fr; }
}

/* Area empresas */
.biz-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.biz-item { display:flex; flex-direction:column; align-items:center; gap:.6rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); padding:1.3rem .8rem; transition:.2s; }
.biz-item:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); }
.biz-item i { font-size:1.3rem; color:#7fd0ff; }
.biz-item span { font-size:.78rem; font-weight:600; color:#fff; text-align:center; }
@media(max-width:768px) { .biz-grid { grid-template-columns:repeat(2,1fr); } }