/* ══════════════════════════════════════════════════════════════
   LA CALCULADORA DE LOS PRODUCTOS QUE VAN POR TABLA
   ══════════════════════════════════════════════════════════════
   El aspecto de calc-tabla.js. Es el mismo lenguaje que las
   calculadoras de gran formato y de Adorná: recuadro negro con la
   franja CMYK arriba y el número en amarillo. Las variables de color
   las define cada página.
   ══════════════════════════════════════════════════════════════ */

.calc-tabla{background:var(--gris-claro);padding:64px 5%;
  border-top:1.5px solid var(--gris-medio);border-bottom:1.5px solid var(--gris-medio)}
.calc-bajada{color:var(--gris-texto);font-size:1rem;max-width:640px;margin:-1.6rem 0 2.2rem}
.paso-rot{font-family:'Barlow Condensed',sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gris-suave);margin-bottom:.35rem}
.paso-ayuda{font-size:.82rem;color:var(--gris-suave);margin-bottom:.7rem}

/* Las opciones del primer eje van TODAS a la vista y sin deslizar: lo
   que queda fuera de pantalla no existe, y el que entra elegiría entre
   las dos que ve. `auto-fit` las acomoda solo, sin una sola media query
   de columnas: seis en una fila en la compu, tres en la tablet, dos por
   fila en el celular. */
.medidas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:.6rem;margin-bottom:1.7rem}
.cant-fila{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.7rem}
.cant-fila .opcion-btn{min-width:132px;text-align:left}

.opcion-btn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.05rem;
  letter-spacing:.04em;padding:.85rem .7rem;border:1.5px solid var(--gris-medio);
  background:var(--blanco);color:var(--gris-texto);cursor:pointer;border-radius:3px;
  transition:all .15s;line-height:1.15;text-align:center;position:relative;
  display:flex;flex-direction:column;justify-content:center;min-width:0}
.opcion-btn small{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris-suave);font-weight:600;margin-top:.25rem}
.opcion-btn:hover{border-color:var(--negro);color:var(--negro)}
.opcion-btn[aria-pressed="true"]{background:var(--negro);border-color:var(--negro);color:var(--blanco)}
.opcion-btn[aria-pressed="true"] small{color:rgba(255,255,255,.6)}

/* La más pedida: la única con color. Al que no sabe qué pedir le saca la
   duda antes de mirar un precio. Cuando está elegida se pone negra como
   las demás, pero la cinta se queda: sigue siendo la más pedida. */
.opcion-btn.top{border-color:var(--amarillo);border-width:2.5px;background:#fffdf0;padding-top:1.75rem}
.opcion-btn.top:hover{border-color:#e6cf00}
.opcion-btn.top[aria-pressed="true"]{background:var(--negro);border-color:var(--amarillo)}
.btn-cinta{position:absolute;top:0;left:0;right:0;background:var(--amarillo);color:var(--negro);
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 0;text-align:center;border-radius:1px 1px 0 0}

/* ── El recuadro del total ── */
.panel{background:var(--negro);border-radius:3px;padding:2rem 1.9rem;position:relative;
  overflow:hidden;margin-top:.4rem}
.panel::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--cian),var(--magenta),var(--amarillo))}
.panel-que{font-family:'Barlow Condensed',sans-serif;font-size:.8rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.panel-gigante{font-family:'Barlow Condensed',sans-serif;font-weight:900;
  font-size:clamp(3.4rem,11vw,5.6rem);line-height:.92;color:var(--amarillo);letter-spacing:-.01em}
.panel-unidad{font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:.2rem}
.panel-total{color:var(--blanco);font-size:1.05rem;margin-top:1.1rem}
.panel-total b{font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;font-weight:900}
.panel-ahorro{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;
  background:rgba(26,156,78,.16);border:1px solid rgba(26,156,78,.5);border-radius:999px;
  padding:.35rem .85rem;font-size:.85rem;color:#5ee08d;font-weight:600;line-height:1.35}
.panel-pie{color:rgba(255,255,255,.4);font-size:.8rem;margin-top:1.1rem;line-height:1.5}
.panel-pie strong{color:rgba(255,255,255,.75)}
/* El "a cotizar" NO va en amarillo: el amarillo es el color del precio y
   acá justamente no hay precio. */
.panel-cotizar{font-family:'Barlow Condensed',sans-serif;font-weight:900;
  font-size:clamp(2rem,6vw,3rem);line-height:1;color:var(--blanco);margin-top:.3rem}

a.btn-primary.btn-wsp{background:#25D366;color:#fff;margin-top:1.4rem}
a.btn-primary.btn-wsp:hover{background:#1eb955}
.mas100{display:block;margin-top:1rem;font-size:.85rem;color:rgba(255,255,255,.55);text-decoration:underline}
.mas100:hover{color:var(--blanco)}

@media(max-width:700px){
  .calc-tabla{padding:44px 5%}
  /* En el celular manda que entren DOS por fila siempre: con 118 px un
     iPhone SE (240 px útiles) caía a UNA columna y las opciones se iban
     a un renglón cada una. */
  .medidas-grid{gap:.45rem;grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
  .cant-fila{gap:.45rem}
  .cant-fila .opcion-btn{min-width:0;flex:1;text-align:center}
  .opcion-btn{font-size:.95rem;padding:.7rem .4rem}
  .opcion-btn small{font-size:.62rem;letter-spacing:.06em}
  .opcion-btn.top{padding-top:1.55rem}
  .btn-cinta{font-size:.55rem;letter-spacing:.06em}
  .panel{padding:1.5rem 1.3rem}
}