/* marca.css · PROIMCA v3. Brújula: meter.com (lienzo gris frío, un solo acento, titulares de peso medio en dos tonos,
   botones en píldora con flecha, equipos en isométrico, listas técnicas con icono en cuadro, software como imagen y marcas
   rayadas en los bordes). Con las demás referencias ISP del kit: Cloudflare (bento de cifras y flujo de datos), Thundernet
   (velocidad monumental y cobertura en el primer pantallazo), Airtek (3 acciones y «mide por cable»), Fibex (Hogar/Empresas
   y sedes). La marca encima: el verde de PROIMCA como acento único y el magenta solo en detalles. Geist + Geist Mono. */
:root[data-nicho] {
  --lienzo: #eceef1; --superficie: #ffffff; --superficie-2: #f4f5f7; --tinta: #23272f; --suave: #555b69; --tenue: #636978; --linea: #dde0e6;
  --acento: #029348; --acento-texto: #01773a; --acento-2: #dc1282; --exito: #017a3b; --sobre-acento: #fff;
  --panel-checkout: #1d2330; --sobre-checkout: #eef1f6;
  --boton-fondo: #01773a; --boton-texto: #fff; --boton-hover: #016530;
  --verde: #029348; --verde-texto: #01773a; --magenta: #dc1282; --red: #12b76a; --tinte: color-mix(in oklab, #029348 11%, transparent);
  --f-display: "Geist", ui-sans-serif, system-ui, sans-serif; --f-texto: "Geist", ui-sans-serif, system-ui, sans-serif; --f-mono: "Geist Mono", ui-monospace, monospace;
  --peso-display: 500; --track-display: -.038em; --alto-display: 1.04; --radio: 14px; --radio-boton: 999px; --radio-foto: 12px;
  --sombra-1: 0 1px 2px rgb(24 32 48 / .05), 0 0 0 1px rgb(24 32 48 / .04);
  --sombra-2: 0 1px 2px rgb(24 32 48 / .05), 0 10px 24px -12px rgb(24 32 48 / .2);
  --sombra-3: 0 2px 4px rgb(24 32 48 / .05), 0 22px 40px -20px rgb(24 32 48 / .32);
  --iso-arriba: #ffffff; --iso-frente: #eef0f4; --iso-lado: #dde0e8; --iso-borde: #c8ccd6; --iso-fibra: #b9c0cc;
}
:root[data-nicho][data-tema="oscuro"] {
  --lienzo: #14171d; --superficie: #1c2028; --superficie-2: #181b22; --tinta: #e9ecf2; --suave: #a3a9b7; --tenue: #8d94a4; --linea: rgb(255 255 255 / .09);
  --acento: #34c47c; --acento-texto: #5fd897; --exito: #4ade80; --panel-checkout: #1d2330; --verde-texto: #5fd897;
  --boton-fondo: #5fd897; --boton-texto: #0b1712; --boton-hover: #7ee2ad; --tinte: color-mix(in oklab, #34c47c 16%, transparent);
  --sombra-1: 0 0 0 1px rgb(255 255 255 / .06); --sombra-2: 0 0 0 1px rgb(255 255 255 / .06), 0 16px 36px -16px rgb(0 0 0 / .7);
  --iso-arriba: #2a2f39; --iso-frente: #232731; --iso-lado: #1c2028; --iso-borde: #3a404c; --iso-fibra: #4a5160; color-scheme: dark;
}
body { font-size: 16px; letter-spacing: -.005em; }
h1 { font-size: clamp(2.6rem, 5.6vw, 4.9rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
h1 .tenue, h2 .tenue, h3 .tenue { color: var(--tenue); }
.antetitulo { display: inline-flex; align-items: center; gap: 8px; font: 500 .74rem/1.2 var(--f-mono); letter-spacing: .02em; text-transform: none; color: var(--suave); }
.antetitulo::before { width: 7px; height: 7px; border-radius: 2px; background: var(--verde); }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.pildora { display: inline-block; padding: .02em .26em .06em; border-radius: .18em; color: #fff; line-height: 1.02; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pildora-verde { background: #01773a; }
.pildora-magenta { background: #c2106f; }
.nota, .nota-demo { font-size: .8rem; color: var(--suave); }
.nota-demo { margin-top: 14px; }
.suave { color: var(--suave); }
.lead { color: var(--suave); }
.chip-mono { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linea); font: 500 .72rem/1.2 var(--f-mono); color: var(--suave); }
.ico-cuadro { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--tinta); color: var(--superficie); }
.ico-cuadro .icono { width: 17px; height: 17px; }
.velocidad { font-weight: 500; letter-spacing: -.055em; }

/* Botones en píldora (meter.com): el principal en el verde de la marca, el secundario teñido con flecha */
.btn { border-radius: 999px; min-height: 46px; padding: 0 20px; font-weight: 550; }
.btn .icono { width: 16px; height: 16px; }
.btn-principal { box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 1px 2px rgb(0 0 0 / .14); }
.btn-sec { background: var(--tinte); border-color: transparent; color: var(--verde-boton, #015a2b); box-shadow: none; }
:root[data-tema="oscuro"] .btn-sec { --verde-boton: #7ee2ad; }
.btn-sec:hover { background: color-mix(in oklab, var(--verde) 18%, transparent); border-color: transparent; }
.btn-sec::after { content: "→"; font-weight: 500; }

/* Marcas rayadas en los bordes de cada sección (meter.com) */
.seccion::before { content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0; width: min(100%, var(--ancho)); height: 5px; pointer-events: none;
  background: repeating-linear-gradient(135deg, var(--iso-borde) 0 1.5px, transparent 1.5px 4px) left 24px top / 28px 5px no-repeat,
              repeating-linear-gradient(135deg, var(--iso-borde) 0 1.5px, transparent 1.5px 4px) right 24px top / 28px 5px no-repeat; }
.seccion.oscura::before, .tv-sec::before { opacity: .35; }

/* Barra */
.barra { background: color-mix(in oklab, var(--lienzo) 82%, transparent); }
.barra nav a { min-width: 44px; text-align: center; color: var(--suave); font-size: .92rem; }
.barra nav a:hover { color: var(--tinta); }
.barra .btn-peq { min-height: 44px; }
.marca-pro { gap: 10px; }
.marca-pro img { height: 32px; width: auto; }
.marca.marca-pro > span:not(.marca-simbolo) { display: grid; gap: 3px; line-height: 1; }
.marca-pro b { font: 600 1.06rem/1 var(--f-display); letter-spacing: -.01em; color: var(--tinta); }
.marca-pro small { font: 500 .6rem/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }

/* ───────── Hero: la red en isométrico flotando, el titular abajo a la izquierda ───────── */
.hero-meter { position: relative; padding: clamp(12px, 3vw, 36px) 0 clamp(36px, 5vw, 64px); overflow: hidden; }
.hero-meter__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "h1 escena" "fila fila"; gap: clamp(20px, 3vw, 36px) 24px; align-items: end; }
.hero-meter h1 { grid-area: h1; padding-bottom: 10%; }
.red-escena { grid-area: escena; position: relative; margin-right: -48px; }
.iso-escena { position: relative; width: 100%; aspect-ratio: 760 / 540; }
.iso-capa { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.iso-capa.flota { inset: auto; }
.flota { will-change: transform; }
.c-arriba { fill: var(--iso-arriba); } .c-frente { fill: var(--iso-frente); } .c-lado { fill: var(--iso-lado); }
.c-arriba, .c-frente, .c-lado { stroke: var(--iso-borde); stroke-width: .6; stroke-linejoin: round; }
.c-sombra { fill: url(#g-sombra); }
.c-puerto { fill: #2b3038; } .c-ventila { fill: var(--iso-borde); } .c-conector { fill: #2f6f4f; } .c-tapa { fill: var(--iso-lado); }
.c-led { fill: #b9bec9; } .c-led.on, .c-bat { fill: #12b76a; }
.c-anillo { fill: none; stroke: #8fe0b8; stroke-width: 2; }
.c-verde { fill: #029348; } .c-magenta { fill: #dc1282; }
.c-fibra { fill: none; stroke: var(--iso-fibra); stroke-width: 2; }
.c-dato { fill: none; stroke: #029348; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 7; opacity: .55; }
.c-pulso { fill: #029348; stroke: #fff; stroke-width: 1.5; }
.c-etq { font: 500 10.5px var(--f-mono); fill: var(--suave); }
@media (prefers-reduced-motion: no-preference) {
  .red-escena.vivo .flota { animation: pr-flota 7s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
  .red-escena.vivo .c-led.on { animation: pr-led 2.4s steps(1) infinite; animation-delay: calc(var(--i, 0) * -.6s); }
  .red-escena.fuera .flota, .red-escena.fuera .c-led { animation-play-state: paused; }
}
@keyframes pr-flota { to { transform: translateY(-9px); } }
@keyframes pr-led { 50% { opacity: .35; } }

/* Paneles flotantes como software (meter.com) */
.widget { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linea);
  box-shadow: var(--sombra-3); }
.widget__cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.medidor { position: absolute; right: 7%; bottom: -4%; width: 260px; will-change: transform; contain: layout paint; }
.medidor .velocidad { font-size: 3.4rem; }
.medidor .spec { display: block; }
.medidor .widget__cab .chip-mono { white-space: nowrap; }
.medidor__barra { height: 5px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.medidor__barra i { display: block; height: 100%; background: linear-gradient(90deg, #12b76a, #029348); transform-origin: left; transform: scaleX(.75); will-change: transform; }
.ticks { display: flex; gap: 2px; height: 16px; }
.ticks i { flex: 1; border-radius: 2px; background: #12b76a; opacity: .85; }
.ticks i.aviso { background: #f59e0b; } .ticks i.azul { background: #4f7bf0; } .ticks i.vacio { background: var(--linea); }
.casa__usos { position: absolute; left: -2%; top: 4%; will-change: transform; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; width: 220px; }
.casa__usos li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 7px 12px 7px 7px; border-radius: 999px;
  background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-2);
  opacity: .5; transform: translateX(-6px); transition: opacity .5s var(--curva), transform .5s var(--curva), border-color .5s; }
.casa__usos img { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.casa__usos b { font-size: .84rem; font-weight: 600; line-height: 1.2; }
.casa__usos span { font: 500 .7rem/1.3 var(--f-mono); color: var(--suave); }
.casa__usos li.on { opacity: 1; transform: none; border-color: color-mix(in oklab, var(--verde) 45%, var(--linea)); }
.casa__usos li.on span { color: var(--verde-texto); }
.hero-meter h1 { max-width: 14ch; font-size: clamp(2.5rem, 5vw, 4.4rem); }
.hero-meter__fila { grid-area: fila; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 28px; align-items: end; }
.hero-meter .lead { max-width: 40ch; }
.verificador { display: grid; gap: 10px; padding: 12px; border-radius: 20px; background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-2); }
.verificador__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.verificador .entrada { border-radius: 999px; }
.ciudades { display: flex; flex-wrap: wrap; gap: 4px; }
.ciudades label { position: relative; }
.ciudades input { position: absolute; opacity: 0; }
.ciudades span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: .88rem; font-weight: 500; color: var(--suave); cursor: pointer; }
.ciudades input:checked + span { background: var(--tinta); color: var(--superficie); }
.ciudades input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: 2px; }
.entrada-icono { position: relative; display: block; }
.entrada-icono .icono { position: absolute; left: 15px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--suave); pointer-events: none; }
.entrada-icono .entrada { padding-left: 42px; width: 100%; }
.sugeridos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-sector { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px dashed var(--linea); background: transparent; color: var(--suave); font: 500 .78rem/1 var(--f-mono); cursor: pointer; }
.chip-sector:hover { color: var(--tinta); border-color: var(--verde); }
.cob-res { display: grid; gap: 10px; padding: 14px; border-radius: 14px; }
.cob-res > b { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; }
.cob-res .icono { width: 20px; height: 20px; }
.cob-si { background: var(--tinte); }
.cob-si > b { color: var(--verde-texto); }
.cob-pronto { background: color-mix(in oklab, #f59e0b 12%, var(--superficie)); }
.cob-no { background: var(--superficie-2); }
.cob-specs { display: flex; flex-wrap: wrap; gap: 6px; }
.cob-specs .spec { padding: 5px 9px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--linea); }
.cob-acciones { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.cob-aviso { color: var(--aviso); font-size: .9rem; }

/* ───────── Cifras (Cloudflare): bento asimétrico de datos reales ───────── */
.cifras { padding-block: clamp(40px, 5vw, 64px); }
.bento-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cifra { position: relative; display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra-1); overflow: hidden; }
.cifra .chip-mono { justify-self: start; }
.cifra .velocidad { font-size: clamp(2.2rem, 3.4vw, 2.9rem); }
.cifra p:not(.velocidad) { color: var(--suave); font-size: .9rem; }
.cifra--grande { grid-column: span 2; grid-row: span 2; align-content: space-between; }
.cifra--grande .velocidad { font-size: clamp(4rem, 8vw, 7rem); }
.spark { width: 100%; height: 70px; }
.spark__area { fill: color-mix(in oklab, var(--verde) 10%, transparent); }
.spark__linea { fill: none; stroke: var(--verde); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark__pie { justify-self: start; }

/* ───────── La red de punta a punta (meter.com: lista técnica) ───────── */
.red-punta__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.red-punta__foto { position: relative; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--sombra-3); }
.red-punta__foto .foto { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 0; }
.red-punta__foto figcaption { position: absolute; left: 14px; bottom: 14px; background: rgb(255 255 255 / .9); color: #23272f; border: 0; }
.red-punta .lead { margin-top: 16px; max-width: 46ch; }
.lista-spec { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1.5px solid var(--tinta); max-width: 520px; }
.lista-spec li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.lista-spec .ico-cuadro { grid-row: span 2; }
.lista-spec b { font-size: .95rem; font-weight: 600; }
.lista-spec span:not(.ico-cuadro) { color: var(--suave); font-size: .86rem; }

/* ───────── Planes (Fibex + Thundernet con tarjetas de meter.com) ───────── */
.planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 4px; }
.plan { position: relative; display: grid; gap: 12px; align-content: start; padding: 10px 10px 18px; border: 0; border-radius: 18px; background: var(--superficie); box-shadow: var(--sombra-1); }
.plan > :not(.plan__foto):not(.plan__sello) { margin-inline: 10px; }
.plan.destacado { box-shadow: 0 0 0 1.5px var(--verde), var(--sombra-2); }
.plan__foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; height: auto; }
.plan__sello { position: absolute; z-index: 1; top: 20px; left: 20px; padding: 5px 10px; border-radius: 999px; background: rgb(255 255 255 / .92); color: #23272f; font: 500 .72rem/1 var(--f-mono); }
.plan-nombre { font: 500 .8rem/1 var(--f-mono); letter-spacing: 0; text-transform: none; color: var(--verde-texto); margin-top: 6px; }
.plan .velocidad { font-size: clamp(3rem, 4.6vw, 4rem); }
.plan__para { color: var(--suave); font-size: .92rem; }
.plan__ficha { display: grid; margin: 0; border-top: 1px solid var(--linea); }
.plan__ficha div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: .86rem; }
.plan__ficha dt { color: var(--suave); font-family: var(--f-mono); font-size: .76rem; }
.plan__ficha dd { margin: 0; text-align: end; font-weight: 500; }
.plan__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.plan__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.plan__precio b { font: 600 1.55rem/1 var(--f-display); letter-spacing: -.03em; }
.plan__precio span { color: var(--suave); font-size: .88rem; }
.plan__precio small { flex-basis: 100%; margin-top: 4px; font: 500 .72rem/1.3 var(--f-mono); color: var(--suave); }

/* Mide por cable (Airtek) */
.medir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: clamp(32px, 4vw, 48px); padding: 26px; border-radius: 18px; background: var(--superficie); box-shadow: var(--sombra-1); }
.medir h3 { font: 500 1.4rem/1.2 var(--f-display); letter-spacing: -.025em; }
.medir__item { display: grid; gap: 8px; align-content: start; }
.medir__item p { color: var(--suave); font-size: .9rem; }

/* ───────── Respaldo: acordeón con icono en cuadro sobre el oscuro de meter.com ───────── */
.seccion.respaldo { background: #1d2330; color: #eef1f6; --tinta: #eef1f6; --suave: #aab2c2; --tenue: #8a93a6; --linea: rgb(255 255 255 / .1); --superficie: #262d3c; --superficie-2: #222837; }
.respaldo__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.respaldo .lead { margin-top: 16px; max-width: 48ch; }
.acordeon { margin-top: 26px; border-top: 1px solid var(--linea); max-width: 560px; }
.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon summary { display: flex; align-items: center; gap: 14px; min-height: 58px; font-weight: 600; cursor: pointer; list-style: none; color: var(--tenue); transition: color .25s; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon details[open] summary { color: var(--tinta); }
.acordeon .ico-cuadro { background: rgb(255 255 255 / .08); color: #8fe0b8; }
.acordeon details[open] .ico-cuadro { background: #029348; color: #fff; }
.acordeon p { padding: 0 0 16px 44px; color: var(--suave); font-size: .94rem; }
.respaldo__foto { position: relative; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .7); }
.respaldo__foto .foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; }
.widget--mini { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 12px; background: rgb(20 24 33 / .86); }
.widget--mini .chip-mono { background: transparent; }

/* ───────── Estatus + panel NOC (meter.com: el software como imagen) ───────── */
.estatus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.estatus .lead { margin-top: 14px; }
.panel-noc { margin-top: 24px; border-radius: 16px; background: var(--superficie); box-shadow: var(--sombra-2); overflow: hidden; }
.panel-noc__barra { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--linea); font-size: .86rem; }
.panel-noc__barra .chip-mono { margin-left: auto; }
.puntos { display: flex; gap: 5px; } .puntos i { width: 9px; height: 9px; border-radius: 50%; background: var(--linea); }
.panel-noc__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--linea); }
.panel-noc__cifras div { display: grid; gap: 6px; padding: 12px 14px; }
.panel-noc__cifras div + div { border-left: 1px solid var(--linea); }
.panel-noc__cifras span { font: 500 .72rem/1 var(--f-mono); color: var(--suave); }
.chip-ok, .chip-azul, .chip-aviso { justify-self: start; padding: 4px 8px; border-radius: 6px; font: 600 .78rem/1 var(--f-mono); }
.chip-ok { background: color-mix(in oklab, #12b76a 16%, transparent); color: #047a48; }
.chip-azul { background: color-mix(in oklab, #4f7bf0 16%, transparent); color: #2d4fb3; }
.chip-aviso { background: color-mix(in oklab, #f59e0b 18%, transparent); color: #8a5300; }
:root[data-tema="oscuro"] .chip-ok { color: #6ee7b7; } :root[data-tema="oscuro"] .chip-azul { color: #a5b8ff; } :root[data-tema="oscuro"] .chip-aviso { color: #fcd34d; }
#zonas { display: grid; margin: 0; padding: 4px 14px; list-style: none; }
.zona { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.zona:last-child { border-bottom: 0; }
.zona__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zona__cab b { font-size: .92rem; margin-right: auto; }
.zona__cab .ms { font: 500 .72rem/1 var(--f-mono); color: var(--suave); }
.zona__nota { color: var(--suave); font-size: .8rem; }
.panel-noc .nota { padding: 0 14px 12px; }

/* ───────── Calculadora de ancho de banda ───────── */
.calculadora { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1px; margin-bottom: clamp(28px, 4vw, 44px); border-radius: var(--radio); overflow: hidden; background: var(--linea); border: 1px solid var(--linea); }
.calculadora > div { padding: clamp(18px, 2.4vw, 28px); background: var(--superficie); }
.calculadora__lista { display: grid; gap: 4px; }
.contador { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.contador > .icono { width: 24px; height: 24px; color: var(--verde-texto); }
.contador b { display: block; font-size: .95rem; }
.contador small { color: var(--suave); font-size: .8rem; }
.contador__ctl { display: flex; align-items: center; gap: 4px; }
.contador__ctl button { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--linea); background: var(--superficie-2); color: var(--tinta); font: 600 1.2rem/1 var(--f-mono); cursor: pointer; }
.contador__ctl button:hover { border-color: var(--verde); }
.contador__ctl output { min-width: 2ch; text-align: center; font: 700 1.1rem/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.casilla { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: .92rem; cursor: pointer; }
.casilla input { width: 20px; height: 20px; accent-color: var(--verde-texto); }
.calculadora__res { display: grid; gap: 12px; align-content: start; background: var(--panel-checkout) !important; color: var(--sobre-checkout); }
.calculadora__res .spec, .calculadora__res .nota { color: #b9d3c5; }
.calculadora__res .velocidad { color: #fff; }
.calculadora__res .velocidad small { color: #b9d3c5; }
.calc-escala { position: relative; height: 26px; }
.calc-escala::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 99px; background: rgb(255 255 255 / .14); }
.calc-escala i { position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #22c06e, #7ee2ad); transform-origin: left; transition: transform .5s var(--curva); }
.calc-escala span { position: absolute; top: 10px; left: var(--x); translate: -100% 0; font: 500 .7rem/1 var(--f-mono); color: #b9d3c5; }
.calc-plan { font-size: 1rem; }
.calc-plan b { color: #7ee2ad; }
.calc-extras { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.calc-extras li { display: flex; gap: 8px; align-items: center; }
.calc-extras .icono { width: 18px; height: 18px; color: #7ee2ad; flex: none; }
.calculadora__res .btn { justify-self: start; }

/* ───────── TV (de la v2: muro de canales en perspectiva + televisor que hace zapping) ───────── */
.tv-sec { position: relative; background: radial-gradient(90% 90% at 80% 20%, #12382a, #071811 70%); color: #effaf3; overflow: hidden; --tinta: #effaf3; --suave: #b9d3c5; --acento-texto: #ff7cc1; --linea: rgb(255 255 255 / .1); --superficie: rgb(255 255 255 / .04); }
.tv-sec .antetitulo { color: #7ee2ad; }
.tv-pro { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.tv-cifras { margin-top: 24px; }
.tv-cifras .velocidad { color: #fff; font-size: clamp(2rem, 3.4vw, 2.8rem); }
.tv-cifras .spec { display: block; color: #b9d3c5; } .tv-cifras .spec b { color: #fff; }
.tv-nota { margin-top: 12px; color: #b9d3c5; font-size: .9rem; }
.muro { position: absolute; inset: -10% -25% -10% 25%; perspective: 900px; pointer-events: none; opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 80%, transparent 100%); }
.muro-plano { display: grid; gap: 16px; transform: rotateX(28deg) rotateZ(-8deg) translateY(10%); transform-origin: center; }
.muro-fila { overflow: hidden; }
.muro-pista { display: flex; gap: 16px; width: max-content; will-change: transform; }
.muro-pista span { display: grid; place-items: center; width: 150px; height: 84px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -10px rgb(0 0 0 / .6); }
.muro-pista img { max-width: 110px; max-height: 50px; width: auto; height: auto; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) {
  .muro-fila .muro-pista { animation: pr-muro 60s linear infinite; }
  .muro-fila:nth-child(2) .muro-pista { animation-direction: reverse; animation-duration: 70s; }
  .muro-fila:nth-child(3) .muro-pista { animation-duration: 55s; }
  .tv-sec.fuera .muro-pista { animation-play-state: paused; }
}
@keyframes pr-muro { to { transform: translateX(-50%); } }
.tele-wrap { position: relative; display: grid; justify-items: center; gap: 18px; }
.tele { width: 100%; max-width: 560px; padding: 12px 12px 26px; border-radius: 22px; background: linear-gradient(180deg, #1c1f22, #0c0e10); box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .1); position: relative; }
.tele-pie { position: absolute; left: 50%; bottom: -26px; translate: -50% 0; width: 34%; height: 26px; background: linear-gradient(180deg, #16191c, #0a0b0c); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.pantalla-tv { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: radial-gradient(80% 80% at 50% 40%, #fff, #e7eef0); }
.canal-tv { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .12s; }
.canal-tv.activo { opacity: 1; }
.canal-tv img { max-width: 52%; max-height: 46%; width: auto; height: auto; object-fit: contain; }
.tercio { position: absolute; left: 4%; right: 4%; bottom: 6%; display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgb(11 42 28 / .9); color: #fff; font-size: .82rem; }
.tercio b { padding: 3px 8px; border-radius: 6px; background: #c2106f; font-size: .7rem; letter-spacing: .06em; }
.ruido { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgb(255 255 255 / .55) 0 1px, rgb(0 0 0 / .55) 1px 3px), repeating-linear-gradient(90deg, rgb(0 0 0 / .25) 0 2px, rgb(255 255 255 / .2) 2px 3px); }
.pantalla-tv.zap .ruido { opacity: .9; transition: opacity .08s; }
.pantalla-tv.zap .canal-tv.activo { transform: scaleY(.96); }
.control { position: absolute; right: -6px; bottom: 54px; display: grid; justify-items: center; gap: 4px; width: 62px; padding: 10px 0 12px; border-radius: 30px; background: linear-gradient(180deg, #2a2e31, #141618); color: #cfd8d4; box-shadow: 0 18px 30px -12px rgb(0 0 0 / .7); rotate: 8deg; }
.control span { font: 700 .62rem/1 var(--f-mono); letter-spacing: .1em; }
.control b { font: 800 1.15rem/1 var(--f-mono); color: #7ee2ad; font-variant-numeric: tabular-nums; }
.btn-ch { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #c2106f; color: #fff; font: 700 1rem/1 var(--f-mono); font-style: normal; transition: transform .12s; }
.btn-ch.pulsado { transform: scale(.86); }
.cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.cats li { padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #b9d3c5; background: rgb(255 255 255 / .06); transition: background-color .25s, color .25s; }
.cats li.activa { background: #01773a; color: #fff; }

/* ───────── Empresas ───────── */
.empresas-bento { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(16px, 2.4vw, 24px); align-items: stretch; }
.empresas-foto { position: relative; margin: 0; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-2); min-height: 320px; }
.empresas-foto .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.empresas-foto figcaption { position: absolute; left: 12px; bottom: 12px; padding: 8px 12px; border-radius: 8px; background: rgb(10 18 14 / .78); color: #e6f4ec; }
.empresas-specs > div { display: grid; gap: 8px; align-content: start; }
.empresas-specs h3 { font: 700 1.08rem/1.25 var(--f-display); }
.empresas-specs p { color: var(--suave); font-size: .92rem; }
.empresas-specs .spec { color: var(--verde-texto); }
#empresas .acciones { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 24px; }

/* ───────── Taquilla express ───────── */
.taquilla { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.taquilla__consulta, .pago-caja, .hero-red__texto, .calculadora__lista, .calculadora__res { grid-template-columns: minmax(0, 1fr); }
.taquilla__consulta { display: grid; gap: 16px; }
.consulta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 16px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-1); }
.consulta .campo { display: grid; gap: 6px; font-size: .88rem; font-weight: 600; }
.consulta .sugeridos { grid-column: 1 / -1; }
.cuenta:empty { display: none; }
.cuenta__tarjeta { display: grid; gap: 10px; padding: 16px; border-radius: var(--radio); background: var(--superficie); border: 1px solid color-mix(in oklab, var(--verde) 45%, var(--linea)); }
.cuenta__tarjeta.suspendida { border-color: color-mix(in oklab, #c2410c 55%, var(--linea)); }
.cuenta__tarjeta.suspendida .red-vivo::before { background: #ea580c; }
.cuenta__cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.cuenta dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: .92rem; }
.cuenta dt { color: var(--suave); }
.cuenta dd { margin: 0; }
.cuenta dd small { color: var(--suave); font: 500 .72rem/1 var(--f-mono); }
.pago-caja { display: grid; gap: 10px; padding: 16px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--linea); }
.pago-caja .pestanas-lista { margin-bottom: 12px; }
.pago-datos { display: grid; gap: 6px; }
.pago-datos[hidden] { display: none; }
.dato { display: grid; grid-template-columns: 5.2em minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 4px 4px 12px; border-radius: 8px; background: var(--superficie-2); }
.dato span { color: var(--suave); font-size: .82rem; }
.dato b { font: 600 .95rem/1.2 var(--f-mono); overflow-wrap: anywhere; }
.copiar { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--verde-texto); cursor: pointer; }
.copiar:hover { background: color-mix(in oklab, var(--verde) 12%, transparent); }
.copiar .icono { width: 20px; height: 20px; transition: opacity .2s, transform .2s; }
.copiar .ok { position: absolute; opacity: 0; transform: scale(.6); }
.copiar.copiado .icono:not(.ok) { opacity: 0; }
.copiar.copiado .ok { opacity: 1; transform: none; }

/* ───────── Confianza ───────── */
.confianza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 24px); }
.iso, .telemed { display: grid; border-radius: var(--radio); overflow: hidden; background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-1); }
.iso { grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 24px; }
.iso img { width: 110px; height: auto; }
.telemed { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.telemed .foto { width: 100%; height: 100%; min-height: 200px; object-fit: cover; border-radius: 0; }
.iso > div, .telemed > div { display: grid; gap: 8px; align-content: center; }
.telemed > div { padding: 20px; }
.iso h3, .telemed h3 { font: 700 1.15rem/1.25 var(--f-display); }
.iso p, .telemed p { color: var(--suave); font-size: .92rem; }

/* ───────── Sedes + mapa ───────── */
.contacto-pro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: stretch; }
.sedes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.sede { display: grid; gap: 8px; align-content: start; padding: 18px; background: var(--superficie); }
.sede__cab { display: grid; gap: 6px; }
.sede h3 { font: 700 1.02rem/1.2 var(--f-display); }
.sede p { color: var(--suave); font-size: .9rem; }
.sede .enlace { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.sede .enlace .icono { width: 18px; height: 18px; }
.estado-sede { display: inline-flex; align-items: center; gap: 6px; font: 500 .74rem/1 var(--f-mono); color: var(--suave); }
.estado-sede .punto { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.estado-sede.abierta { color: var(--verde-texto); }
.estado-sede.abierta .punto { background: var(--red); }
.contacto-pro .mapa-caja { min-height: 320px; }

/* pestañas del kit con toque de 44 px; la elegida en tinta, como el conmutador de meter.com */
.pestanas-lista { border-radius: 999px; background: var(--superficie); box-shadow: var(--sombra-1); border: 0; }
.pestana { min-height: 44px; border-radius: 999px; }
.pestana[aria-selected="true"] { color: var(--superficie); background: var(--tinta); box-shadow: none; }

/* ───────── Responsive ───────── */
@media (max-width: 1080px) {
  .red-escena { width: min(70vw, 820px); }
  .casa__usos { width: 200px; }
}
@media (max-width: 900px) {
  .hero-meter__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h1" "fila" "escena"; }
  .hero-meter h1 { padding-bottom: 0; }
  .red-escena { margin: 0 -12px; width: calc(100% + 24px); display: block; justify-self: stretch; }
  .medidor { position: relative; right: auto; bottom: auto; width: auto; margin: -6% 12px 0; }
  .casa__usos { position: relative; left: auto; top: auto; width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 12px 0; }
  .casa__usos span { display: none; }
  .casa__usos img { grid-row: auto; width: 28px; height: 28px; }
  .casa__usos li { grid-template-columns: 28px minmax(0, 1fr); }
  .casa__usos b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
  .hero-meter__fila, .red-punta__grid, .respaldo__grid, .estatus, .medir { grid-template-columns: minmax(0, 1fr); }
  .bento-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planes { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
@media (max-width: 980px) {
  .tv-pro, .empresas-bento, .taquilla, .contacto-pro, .calculadora, .confianza { grid-template-columns: minmax(0, 1fr); }
  .muro { inset: 52% -30% -6% -30%; opacity: .3; }
}
@media (max-width: 720px) {
  .c-etq { display: none; }
  .verificador__fila, .consulta { grid-template-columns: minmax(0, 1fr); }
  .cifra--grande { grid-column: 1 / -1; grid-row: auto; }
  .sedes, .telemed, .iso { grid-template-columns: minmax(0, 1fr); }
  .iso img { width: 84px; }
  .control { right: 4px; bottom: 40px; width: 52px; }
  .panel-noc__cifras { grid-template-columns: minmax(0, 1fr); }
  .panel-noc__cifras div + div { border-left: 0; border-top: 1px solid var(--linea); }
}
@media (prefers-reduced-motion: reduce) { .casa__usos li, .calc-escala i, .btn-ch, .copiar .icono { transition: none; } }