/* SOLVEXA · telefonía */
/* ---------- telefonía: cabecera ---------- */
.nav__enlaces a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: calc(12 * var(--u)); }
.tel-hero { padding: 0 var(--gutter); }
.tel-hero__titular {
  margin: calc(40 * var(--u)) 0 0;
  font: 700 calc(66 * var(--u))/1.08 var(--f-display);
  letter-spacing: -.012em; color: var(--marca);
  text-wrap: balance;
}
.tel-hero__entradilla { margin: calc(26 * var(--u)) 0 0; font: 500 calc(26 * var(--u))/1.3 var(--f-texto); color: var(--tinta); letter-spacing: -.005em; }

/* ---------- dos instrumentos ---------- */
.instrumentos {
  display: grid; grid-template-columns: 707fr 586fr; gap: calc(3 * var(--u));
  margin: calc(22 * var(--u)) calc(var(--gutter) * -1 + 24 * var(--u)) 0;
}
.panel { position: relative; container-type: inline-size; }
.panel--o2 { aspect-ratio: 707 / 440; overflow: hidden; border-radius: 6px; }
.panel--o2 .panel__placa { height: 104%; }
.panel--cmp { aspect-ratio: 586 / 440; }
.panel--cmp .panel__placa { inset: 1.2% 1%; width: 98%; height: 97.6%; }
.panel__placa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; border-radius: 6px; }
.panel__titulo {
  position: absolute; margin: 0; display: grid; place-items: center;
  font: 700 4cqw/1 var(--f-display); letter-spacing: -.005em; color: var(--marca);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.panel--o2 .panel__titulo { left: 27.75%; width: 44.4%; top: 6.7%; height: 15.2%; font: 700 4.3cqw/1 var(--f-texto); letter-spacing: -.02em; color: #0F2A45; white-space: nowrap; }
.panel--cmp .panel__titulo { left: 5%; width: 89.9%; top: 5.5%; height: 15.4%; font-size: 7cqw; justify-items: start; padding-left: 5cqw; }
.panel__o2 { position: absolute; left: 5.2%; top: 6.9%; width: 19.8%; height: 15.8%; object-fit: contain; }

/* diales */
.dial { position: absolute; top: 0; bottom: 0; width: 31%; min-width: 0; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.dial--fibra { left: calc(18.8% - 15.5%); }
.dial--datos { left: calc(49.95% - 15.5%); }
.dial--tv { left: calc(81.25% - 15.5%); }
.dial legend { position: absolute; left: 0; right: 0; top: 67.1%; transform: translateY(-50%); text-align: center; padding: 0;
  font: 700 2.6cqw/1 var(--f-texto); letter-spacing: .02em; color: #1B2735; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.dial__perilla {
  position: absolute; left: 50%; top: 54.3%; width: 59.4%; height: auto; aspect-ratio: 1; translate: -50% -50%;
  rotate: var(--giro, 0deg);
  transition: rotate .45s cubic-bezier(.34, 1.4, .64, 1);
  pointer-events: none;
}
.dial__valor { display: none; }
.dial__opcion { position: absolute; left: 50%; top: 54.3%; width: 0; height: 0; }
.dial__opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dial__opcion label {
  position: absolute; white-space: nowrap; transform: translate(-50%, -50%);
  padding: .5cqw .7cqw; border-radius: 3px; cursor: pointer;
  font: 600 1.6cqw/1 var(--f-texto); color: #3D4A56; font-variant-numeric: tabular-nums;
}
.dial__opcion label:hover { color: var(--acento); }
.dial__opcion input:checked + label { color: var(--o2); font-weight: 700; }
.dial__opcion input:disabled + label { color: #9AA3AC; cursor: not-allowed; text-decoration: line-through; }
.dial__opcion input:focus-visible + label { outline: 2px solid var(--acento); outline-offset: 1px; }

.lectura-lcd {
  position: absolute; left: 25.9%; width: 48.15%; top: 79.7%; height: 10.9%;
  display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding-inline: 2.4cqw;
  font: 500 3.7cqw/1 var(--f-dato); color: #16283A; font-variant-numeric: tabular-nums; letter-spacing: 0;
  text-shadow: 0 0 1px rgba(19, 36, 28, .35);
}
.lectura-lcd output { font-size: 4.9cqw; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* escala del comparador */
.escala-op { position: absolute; left: 9.9%; width: 78.5%; top: 29%; height: 38%; }
.escala-op__num { position: absolute; top: 0; translate: -50% 0; font: 600 1.8cqw/1 var(--f-texto); color: #1B2735; font-variant-numeric: tabular-nums; }
.escala-op__num--u { translate: 0 0; }
.escala-op__reglas { position: absolute; left: 0; right: 0; top: 16%; height: 22%;
  background:
    linear-gradient(var(--tinta), var(--tinta)) 0 0 / 1.5px 100% no-repeat,
    repeating-linear-gradient(90deg, var(--tinta) 0 1.5px, transparent 1.5px 16.667%) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, #4A5663 0 1px, transparent 1px 1.6667%) 0 100% / 100% 55% no-repeat;
  border-bottom: 1.5px solid var(--tinta);
}
.marca-op { position: absolute; top: 38%; translate: -50% 0; display: grid; justify-items: center; gap: .5cqw; text-align: center;
  font: 600 1.75cqw/1.15 var(--f-texto); color: #1B2735; white-space: nowrap; }
.marca-op::before { content: ""; width: 1.5px; height: var(--alto, 3cqw); background: var(--tinta); }
.marca-op b { font: 500 1.55cqw/1 var(--f-dato); font-variant-numeric: tabular-nums; }
.marca-op__chapa { width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--marca); box-shadow: inset 0 0 0 .35cqw #fff, 0 1px 1px rgba(15, 27, 39, .3); }
.marca-op--o2 .marca-op__chapa { background: var(--o2); box-shadow: 0 1px 1px rgba(15, 27, 39, .3); display: grid; place-items: center; }
.marca-op__chapa img { width: 100%; height: 100%; object-fit: contain; }
.marca-op--o2 { color: var(--o2); }
.marca-op--o2::before { background: var(--o2); width: 2.5px; }
.marca-op--tu { color: var(--marca); }
.marca-op--tu::before { width: 3px; background: var(--marca); }
.escala-op__pie { position: absolute; left: 5.1%; right: 5%; top: 67%; margin: 0; text-align: center; font: 500 1.5cqw/1.3 var(--f-dato); color: #4A5663; }
.paga { position: absolute; left: 10.5%; right: 5%; top: 78.6%; height: 10.35%; display: grid; grid-template-columns: 40.8% 26.6% 1fr; column-gap: 0; align-items: center; column-gap: 1.6%; }
.paga label { justify-self: start; white-space: nowrap; font: 600 3.1cqw/1 var(--f-texto); color: #0F2A45; }
.paga input { width: 100%; height: 100%; border: 0; background: transparent; text-align: center;
  font: 500 3.4cqw/1 var(--f-dato); color: var(--tinta); font-variant-numeric: tabular-nums; }
.paga input:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; border-radius: 4px; }
.paga span { margin-left: .6cqw; font: 500 3.3cqw/1 var(--f-dato); color: #0F2A45; font-weight: 600; }

/* ---------- telefonía: debajo de los instrumentos ---------- */
/* selector claro: tres pasos con el precio de cada opción a la vista */
.mandos-movil { display: grid; grid-template-columns: 1fr 1.25fr 1.35fr; gap: clamp(16px, 2.4vw, 36px); margin-top: 28px; padding: 22px 0 4px; border-top: 1.5px solid var(--marca); }
.mandos-movil__g { min-width: 0; }
.mandos-movil__t { margin: 0 0 10px; font: 600 16px/1.3 var(--f-texto); color: var(--tinta); }
.mandos-movil__t b { font: 700 20px/1 var(--f-display); color: var(--marca); margin-right: 6px; }
.botonera { display: grid; gap: 8px; }
.botonera button {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px; text-align: left;
  border: 1.5px solid #AEBBCA; border-radius: 4px; background: var(--superficie); color: var(--marca); font: 600 15.5px/1.25 var(--f-texto); cursor: pointer;
}
.botonera button:hover:not(:disabled) { border-color: var(--marca); }
.botonera button small { font: 500 13px/1 var(--f-dato); letter-spacing: .02em; color: var(--tinta-2); white-space: nowrap; }
.botonera button[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #fff; }
.botonera button[aria-pressed="true"] small { color: #D5E4F2; }
.botonera button:disabled { opacity: .45; cursor: not-allowed; }
.botonera button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.mandos-movil__nota { margin: 8px 0 0; font-size: 13.5px; color: var(--tinta-3); }
.elegido {
  display: grid; grid-template-columns: 1fr auto; gap: 14px 32px; align-items: center;
  margin-top: 28px; padding: 22px 0; border-top: 1.5px solid var(--marca); border-bottom: 1px solid var(--linea);
}
.elegido__txt { margin: 0; font-size: 18px; color: var(--tinta-2); }
.elegido__et { font: 500 12px/1 var(--f-dato); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); margin-right: 8px; }
.elegido__txt > b { color: var(--tinta); font-weight: 600; }
.elegido__precio { white-space: nowrap; margin-left: 10px; font: 600 26px/1 var(--f-display); color: var(--o2); }
.elegido__precio b { font-size: 34px; }
.elegido__acc { display: flex; align-items: center; gap: 20px; }
.elegido__link { color: var(--marca); font-weight: 500; }
.elegido__nota { grid-column: 1 / -1; margin: 0; font: 500 12px/1.6 var(--f-dato); color: var(--tinta-3); letter-spacing: .02em; }


.amplia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); border-top: 1.5px solid var(--marca); }
.amplia__bloque { margin: 0; padding: 22px 0 0; border: 0; min-width: 0; }
.amplia__bloque:disabled { opacity: .55; }
.amplia__bloque legend { float: left; width: 100%; margin-bottom: 16px; padding: 0; font: 600 19px/1.3 var(--f-texto); color: var(--tinta); }
.amplia__bloque:disabled legend::after { content: " · solo con fibra y móvil"; font: 500 12px/1 var(--f-dato); color: var(--tinta-3); letter-spacing: .04em; }
.amplia__botones { clear: both; display: flex; flex-wrap: wrap; gap: 10px; }
.amplia__lista { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--linea); }
.amplia__lista li { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.amplia__lista li span { flex: 1; }
.amplia__lista b { font: 500 15px/1 var(--f-dato); font-variant-numeric: tabular-nums; }
.amplia__lista .vacio { color: var(--tinta-3); font-size: 15px; }
.quitar { border: 0; background: none; color: var(--acento); font: 500 14px/1 var(--f-texto); text-decoration: underline; text-underline-offset: .22em; cursor: pointer; padding: 6px; }
.amplia__radios { clear: both; display: grid; gap: 4px; }
.amplia__radios label { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; border-bottom: 1px solid var(--linea); cursor: pointer; }
.amplia__radios input { width: 18px; height: 18px; accent-color: var(--marca); margin: 0; }
.amplia__radios span { font-variant-numeric: tabular-nums; }

.tabla-envoltura { overflow-x: auto; border-top: 1.5px solid var(--marca); }
.tabla { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15.5px; }
.tabla th, .tabla td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla thead th { font: 500 11.5px/1.3 var(--f-dato); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.tabla .num { text-align: right; padding-right: 0; font-family: var(--f-dato); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tbody td.num { font-weight: 500; color: var(--tinta); }
.tabla .grupo th { padding-top: 22px; font: 700 21px/1.1 var(--f-display); color: var(--marca); letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--marca); }

.filtros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 20px 0; border-top: 1.5px solid var(--marca); border-bottom: 1px solid var(--linea); }
.filtros label { display: grid; gap: 6px; font: 500 11.5px/1.3 var(--f-dato); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.filtros select, .filtros input, .formulario select {
  width: 100%; height: 46px; padding: 0 12px; border: 1px solid #AEBBCA; border-radius: 4px; background: var(--superficie);
  font: 400 16px/1 var(--f-texto); color: var(--tinta); text-transform: none; letter-spacing: 0;
}
.formulario select { height: 50px; font-size: 17px; }
.resumen { margin: 18px 0 8px; font: 500 13px/1.5 var(--f-dato); color: var(--tinta-2); letter-spacing: .02em; }
.resultados { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.oferta {
  display: grid; grid-template-columns: 120px minmax(0, 2.2fr) minmax(0, 1.3fr) 150px 110px; gap: 8px 24px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--linea);
}
.oferta__cia { font: 600 21px/1.1 var(--f-display); color: var(--marca); }
.oferta__cia--o2 { color: var(--o2); }
.oferta__t { margin: 0; font-weight: 600; color: var(--tinta); }
.oferta__t small { display: block; margin-top: 4px; font: 500 12px/1.4 var(--f-dato); color: var(--tinta-3); letter-spacing: .02em; }
.oferta__det { margin: 0; font: 500 12.5px/1.5 var(--f-dato); color: var(--tinta-2); }
.oferta__precio { text-align: right; font: 500 20px/1 var(--f-dato); font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; }
.oferta__precio small { display: block; margin-top: 6px; font-size: 12px; color: #2E7D53; }
.oferta .boton-sec { min-height: 40px; font-size: 14px; }
.mas { margin-top: 20px; }
.horario { font: 500 14px/1.6 var(--f-texto) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--tinta) !important; }

@media (max-width: 1100px) {
  .filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oferta { grid-template-columns: 110px minmax(0, 2fr) 140px; }
  .oferta__det { grid-column: 2 / 3; }
  .oferta .boton-sec { grid-column: 3; }
}
@media (max-width: 860px) {
  .tel-hero__titular { margin-top: 28px; font-size: clamp(40px, 10.6vw, 66px); line-height: 1.02; }
  .tel-hero__entradilla { font-size: 18px; }
  .instrumentos { grid-template-columns: 1fr; gap: 12px; margin-inline: calc(var(--gutter) * -1 + 8px); }
  .dial__opcion { display: none; }
  .dial__valor { display: inline; color: var(--o2); }
  .dial__valor::before { content: " · "; color: #1B2735; }
  .dial legend { font-size: max(2.6cqw, 10px); }
  .panel--cmp .marca-op { font-size: max(1.75cqw, 10px); }
  .panel--cmp .marca-op b, .escala-op__pie { font-size: max(1.55cqw, 9.5px); }
  .escala-op__num { font-size: max(1.8cqw, 10px); }
  .mandos-movil { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
  .elegido { grid-template-columns: 1fr; }
  .elegido__acc { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; }
  .amplia { grid-template-columns: 1fr; }
  .filtros { grid-template-columns: 1fr 1fr; }
  .oferta { grid-template-columns: 1fr auto; }
  .oferta__cia { grid-column: 1 / -1; }
  .oferta__det { grid-column: 1 / 2; }
  .oferta .boton-sec { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .filtros { grid-template-columns: 1fr; }
}
@media (prefers-color-scheme: dark) {
  .elegido__precio { color: #5AB4F0; }
  .oferta__cia--o2 { color: #5AB4F0; }
  .boton-sec:hover { color: #0C141D; background: var(--marca); }
  .botonera button { border-color: #3A4B5E; }
  .botonera button[aria-pressed="true"] { color: #0C141D; }
  .botonera button[aria-pressed="true"] small { color: #0C141D; }
  .filtros select, .filtros input, .formulario select { border-color: #3A4B5E; }
}
@media (prefers-reduced-motion: reduce) {
  .dial__perilla, .boton-sec { transition: none; }
}