@charset "UTF-8";
/* =========================================================================
   Calculadora de tarimas y bloque de tipos.
   Solo se carga en la página de escenarios. Depende de los tokens de main.css.
   ========================================================================= */

/* ---------- Tipos ---------- */
.tipos{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media (min-width:620px){.tipos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.tipos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tipo{
  min-width:0;padding:var(--s-5);border:1px solid var(--line);border-radius:16px;
  background:var(--ink-850);transition:border-color .25s,transform .25s,box-shadow .25s;
}
.tipo:hover{border-color:rgba(0,232,255,.35);transform:translateY(-3px);
  box-shadow:0 18px 40px -28px var(--volt-glow)}
.tipo__i{
  display:grid;place-items:center;width:44px;height:44px;margin-bottom:var(--s-4);
  border-radius:13px;background:var(--ink-800);color:var(--volt);
}
.tipo__i svg{width:24px;height:24px;flex:none}
.tipo h3{margin:0 0 .5rem;font-size:var(--fs-md)}
.tipo p{margin:0;font-size:var(--fs-sm);color:var(--mist-300)}

/* ---------- Calculadora ---------- */
.calc{
  background:
    radial-gradient(80% 100% at 100% 0%,rgba(0,232,255,.10),transparent 60%),
    var(--ink-900);
  border-block:1px solid var(--line);
}
.calc__usos-t{margin:0 0 var(--s-3);font-size:var(--fs-sm);color:var(--text-dim)}
.usos{display:grid;gap:var(--s-3);grid-template-columns:1fr;margin-bottom:var(--s-6)}
@media (min-width:520px){.usos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.usos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.uso{
  display:flex;flex-direction:column;gap:.15rem;min-width:0;text-align:left;
  padding:.9rem 1rem;border:1px solid var(--line);border-radius:14px;
  background:var(--ink-850);color:var(--text);font:inherit;cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s;
}
.uso:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.uso:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.uso[data-on]{border-color:var(--volt);background:rgba(0,232,255,.07)}
.uso__i{display:grid;place-items:center;width:34px;height:34px;margin-bottom:.4rem;
  border-radius:10px;background:var(--ink-800);color:var(--volt);transition:background .2s,color .2s}
.uso__i svg{width:20px;height:20px;flex:none}
.uso[data-on] .uso__i{background:var(--volt);color:var(--ink-950)}
.uso__n{font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);color:var(--white)}
.uso__d{font-size:var(--fs-xs);color:var(--text-dim);line-height:1.4}
.uso__m{margin-top:.35rem;font-size:var(--fs-xs);font-weight:700;color:var(--volt)}

.calc__grid{display:grid;gap:var(--s-6);align-items:start}
.calc__grid > *{min-width:0}
@media (min-width:900px){.calc__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s-7)}}

.calc__campo{margin-bottom:var(--s-5);min-width:0}
.calc__campo label{
  display:block;margin-bottom:.6rem;font-family:var(--font-display);
  font-weight:600;font-size:var(--fs-base);color:var(--white);
}
.calc__campo output{color:var(--volt);font-variant-numeric:tabular-nums}
.calc__escala{display:flex;justify-content:space-between;margin-top:.3rem;
  font-size:var(--fs-xs);color:var(--text-dim)}

.calc input[type=range]{
  width:100%;max-width:100%;height:34px;margin:0;background:transparent;
  -webkit-appearance:none;appearance:none;cursor:pointer;
}
.calc input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;
  /* --pc lo actualiza el JS: así se ve cuánto llevas recorrido */
  background:linear-gradient(90deg,var(--volt) 0 var(--pc,50%),var(--ink-800) var(--pc,50%) 100%);
}
.calc input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--ink-800)}
.calc input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--volt)}
.calc input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9px;
  border-radius:50%;background:var(--volt);border:3px solid var(--ink-900);
  box-shadow:0 0 0 1px var(--volt),0 6px 16px -6px var(--volt-glow);
}
.calc input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--volt);
  border:3px solid var(--ink-900);box-shadow:0 0 0 1px var(--volt);
}
.calc input[type=range]:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:6px}

.calc select{
  width:100%;max-width:100%;box-sizing:border-box;padding:.8rem 1rem;
  border:1px solid var(--line-strong);border-radius:12px;
  background:var(--ink-850);color:var(--text);font:inherit;font-size:var(--fs-base);
}
.calc select:focus-visible{outline:none;border-color:var(--volt);box-shadow:0 0 0 3px var(--volt-glow)}
.calc__check{
  display:flex;align-items:flex-start;gap:.6rem;min-width:0;
  font-size:var(--fs-sm);color:var(--mist-300);cursor:pointer;
}
.calc__check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--volt)}

/* ---------- Plano ---------- */
.calc__plano{margin:0;min-width:0}
.calc__plano svg{
  display:block;width:100%;height:auto;border:1px solid var(--line);
  border-radius:16px;background:var(--ink-950);
}
.calc__plano figcaption{margin-top:.7rem;font-size:var(--fs-xs);color:var(--text-dim)}
.pl-mod{fill:rgba(0,232,255,.14);stroke:var(--volt);stroke-width:1}
.pinta .pl-mod{animation:plMod .4s ease both;animation-delay:calc(var(--n) * .045s)}
@keyframes plMod{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.pl-esc{fill:var(--ink-700);stroke:var(--mist-400);stroke-width:1}
.pl-pared{fill:var(--mist-400)}
.pl-cota{stroke:var(--mist-400);stroke-width:1;stroke-dasharray:3 3}
.pl-txt{fill:var(--mist-300);font-size:11px;font-family:var(--font-body)}

/* ---------- Resultados ---------- */
.calc__res{
  display:grid;gap:var(--s-3);grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:var(--s-6);
}
@media (min-width:760px){.calc__res{grid-template-columns:repeat(5,minmax(0,1fr))}}
.calc__dato{
  min-width:0;padding:1rem;border:1px solid var(--line);border-radius:14px;
  background:var(--ink-850);
}
.calc__k{display:block;margin-bottom:.3rem;font-size:var(--fs-xs);
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim)}
.calc__dato strong{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);
  color:var(--volt);font-variant-numeric:tabular-nums;overflow-wrap:break-word;
}
.calc__nota{
  margin:var(--s-4) 0 0;padding:.85rem 1rem;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--ink-850);
  font-size:var(--fs-sm);color:var(--mist-300);
}
.calc__nota[hidden]{display:none !important}
.calc__cta{margin-top:var(--s-6)}

@media (prefers-reduced-motion:reduce){
  .pinta .pl-mod{animation:none}
  .tipo:hover,.uso:hover{transform:none}
}