/* Relevo — tarifas (tarifas.html). Hoja propia de la página; ds.css es la hoja común.
   Fuente: marketing/web/traspaso-web-v4/tarifas/ (02-especificacion.md, 03-tokens.md, 06-desviaciones.md). */

/* ===== Presentación: cabecera clara, como Catálogo y FAQ (sin .hero; app.js pone la cabecera clara) ===== */
.tarifas-presentacion{padding:72px 0 48px}
.tarifas-intro{display:flex;flex-direction:column;gap:16px;max-width:900px}
.tarifas-h1{font-size:56px;line-height:1.04}
.tarifas-intro .lead{max-width:680px}

/* ===== Tramos de tarifa ===== */
.tarifas-tramos{padding:0 0 104px}
.tarifas-tramos .contenedor{display:flex;flex-direction:column;gap:28px}
.tarifas-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.tarifa{display:flex;flex-direction:column;gap:8px;padding:28px 22px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.tarifa-rango{margin:0;font-size:14px;line-height:20px;font-weight:700;color:var(--ink-muted);white-space:nowrap}
.tarifa-cifra{margin:0;font-size:clamp(36px,3.4vw,48px);line-height:1.1;color:var(--ink);white-space:nowrap}
.tarifa-nota{margin:0;font-size:14px;line-height:20px;font-weight:500;color:var(--ink-muted)}
/* El tramo activo lo marca app.js con .viva según el precio de la calculadora */
.tarifa.viva{padding:27px 21px;border:2px solid var(--action);box-shadow:0 18px 40px rgba(200,20,30,.14)}
.tarifas-nota{margin:0;text-align:center;font-size:15px;line-height:23px;font-weight:500;color:var(--ink-muted)}

/* ===== Qué incluye ===== */
.tarifas-incluye-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tarifas-incluye-grid .ncard{gap:12px}
.tarifas-incluye-grid h3{margin-top:8px;font-size:22px;line-height:28px;letter-spacing:-.03em}
.tarifas-incluye-lead{max-width:680px}

/* ===== Calculadora ===== */
.tarifas-calc-marco{display:flex;flex-direction:column;gap:28px;padding:40px 44px}
.tarifas-calc-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tarifas-calc-precio{font-size:56px;line-height:1;color:var(--ink)}

/* Deslizador: input real (activaCalc lo maneja por su id). El diseño dibuja un mando de 28 px;
   el sistema pide objetivos táctiles de 44, así que el input ocupa 44 de alto (zona de agarre)
   y el mando se pinta a 28 px centrado dentro de esa franja. */
.tarifas-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.tarifas-range::-webkit-slider-runnable-track{height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--action) 0%,var(--action) var(--pos,14.3%),var(--line) var(--pos,14.3%),var(--line) 100%)}
.tarifas-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-12px;border-radius:50%;
  background:var(--surface);border:2px solid var(--action);box-shadow:0 2px 6px rgba(21,23,28,.2);cursor:pointer}
.tarifas-range::-moz-range-track{height:4px;border-radius:999px;background:var(--line)}
.tarifas-range::-moz-range-progress{height:4px;border-radius:999px 0 0 999px;background:var(--action)}
.tarifas-range::-moz-range-thumb{width:28px;height:28px;border:2px solid var(--action);border-radius:50%;background:var(--surface);
  box-shadow:0 2px 6px rgba(21,23,28,.2);cursor:pointer}
.tarifas-range:hover::-webkit-slider-thumb{border-color:var(--action-hover)}
.tarifas-range:focus-visible{outline:none}
.tarifas-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ink);outline-offset:2px}
.tarifas-range:focus-visible::-moz-range-thumb{outline:2px solid var(--ink);outline-offset:2px}

.tarifas-barra{display:flex;height:48px;border-radius:10px;overflow:hidden}
.tarifas-barra .b1{display:block;height:100%;background:var(--ink)}
.tarifas-barra .b2{display:block;height:100%;background:var(--brand)}

.tarifas-leyenda{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.tarifas-leyenda-item{display:flex;gap:12px;align-items:flex-start;padding-right:24px}
.tarifas-punto{flex:none;width:14px;height:14px;margin-top:4px;border-radius:50%;background:var(--ink)}
.tarifas-punto--tarifa{background:var(--brand)}
.tarifas-punto--itp{width:10px;height:10px;background:var(--surface);border:2px solid var(--line-strong)}
.tarifas-leyenda-txt{display:flex;flex-direction:column;gap:4px}
.tarifas-leyenda-etq{font-size:15px;line-height:22px;font-weight:600;color:var(--ink-muted)}
.tarifas-leyenda-cifra{font-size:24px;line-height:30px;letter-spacing:-.03em;color:var(--ink)}
.tarifas-leyenda-nota{font-size:14px;line-height:20px;font-weight:500;color:var(--ink-muted)}

/* Casilla: checkbox real con apariencia propia (más robusto para foco/estado marcado que
   ocultar el input y pintar un span aparte, que es como lo dibuja el canvas). Zona de toque
   de 44 mediante min-height en el label. */
.tarifas-check{display:flex;align-items:center;gap:12px;min-height:44px;margin-top:24px;font:600 15px/22px var(--font-sans);color:var(--ink);cursor:pointer}
.tarifas-check input{-webkit-appearance:none;appearance:none;flex:none;display:grid;place-items:center;width:22px;height:22px;
  border:1.5px solid var(--line-strong);border-radius:6px;background:var(--surface);cursor:pointer}
.tarifas-check input:hover{border-color:var(--ink)}
.tarifas-check input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tarifas-check input:checked{background:var(--action);border-color:var(--action)}
.tarifas-check input:checked::after{content:"";width:13px;height:13px;background-color:#fff;
  -webkit-mask:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%223.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12.5 10 17l9-10%22/%3E%3C/svg%3E') center/contain no-repeat;
  mask:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%223.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12.5 10 17l9-10%22/%3E%3C/svg%3E') center/contain no-repeat}

.tarifas-calc-total{margin:0;padding-top:18px;border-top:1px solid var(--line);font-size:15px;line-height:23px;font-weight:500;color:var(--ink-muted)}
.tarifas-calc-total b{color:var(--ink)}

/* Cinco tramos en una fila: por debajo de 1280 la etiqueta del rango no cabe en una línea */
@media (max-width:1279px){
  .tarifa{padding:24px 18px}
  .tarifa.viva{padding:23px 17px}
  .tarifa-rango{white-space:normal}
}

/* ===== Tablet estrecho (rejillas de tres/cuatro columnas apiladas por debajo de 1024) ===== */
@media (max-width:1023px){
  .tarifas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tarifa:last-child{grid-column:1/-1}
  .tarifas-incluye-grid{grid-template-columns:1fr}
  .tarifas-leyenda{grid-template-columns:1fr;gap:18px}
  .tarifas-leyenda-item{padding-right:0}
}

/* ===== Móvil ===== */
@media (max-width:767px){
  .tarifas-presentacion{padding:40px 0 32px}
  .tarifas-h1{font-size:34px}
  .tarifas-intro .lead{font-size:17px;line-height:26px}

  .tarifas-tramos{padding:0 16px 56px}
  .tarifas-tramos .contenedor{gap:20px}
  .tarifas-grid{gap:12px}
  .tarifa{padding:20px 14px;gap:6px}
  .tarifa.viva{padding:19px 13px}
  .tarifa-rango{font-size:13px}
  .tarifa-cifra{font-size:30px;line-height:1.1}

  .tarifas-incluye-grid h3{font-size:20px;line-height:26px}

  .tarifas-calc-marco{padding:24px 18px;gap:22px}
  .tarifas-calc-precio{font-size:40px}
  .tarifas-barra{height:40px}

  .tarifas-check{align-items:flex-start}
}

/* Móviles muy estrechos (≤359): la cifra de 30 px no cabe en dos columnas con el hueco de 24 */
@media (max-width:359px){
  .tarifas-grid{gap:12px}
  .tarifa-cifra{font-size:26px}
}