/* [2026-10-06] :has(> …) — relación de hijo directo verificada; con :has(X) cada cambio del DOM costaba 20-60 ms de estilo */
/* ============================================================
   PLAN SELECTOR — piso de marca "Grafito Ámbar".
   Repintado 2026-09-02: la pantalla venía del skin viejo de la
   landing (Archivo Black / Barlow Condensed / Space Mono, glass
   translúcido sobre slate). Se llega acá desde la portada nueva
   (negro + ámbar, Unbounded / Inter Tight / JetBrains Mono) y el
   salto se sentía. Ahora usa el MISMO piso:

     Grafito   #15181E fondo · #1A1E26 superficie · #222731 elevado
               #101318 hundido
     Texto     #F1F5F9 ink · #94A0B4 muted · #7E8899 dim
     Acento    ÁMBAR ÚNICO #F2A33C (activo / CTA / dinero)
     Datos     teal #2dd4bf (checks de "incluido", unidades)
     Líneas    rgba(236,239,244,.11)

   CAMBIA SÓLO PRESENTACIÓN. Los nombres de clase e id son los que
   engancha plan-selector.js (.psel-*, .pc, .sv, #pselRange…): no se
   toca ninguno.

   DECISIONES DE CONTRASTE (medidas, no estimadas — AA pide 4,5:1
   para texto chico):
   - Las superficies dejaron de ser rgba() sobre rgba(): ahora son
     hex sólidos del ramp. Un glass encima de otro glass no se puede
     medir de memoria y era justo lo que enmascaraba los ratios.
   - El gris `dim` (#7E8899) del piso de marca aguanta sobre grafito
     plano (4,97:1 sobre #15181E) pero se cae a 3,74:1 en cuanto la
     superficie lleva tinte ámbar. Por eso ACÁ NO SE USA para texto
     chico: todo lo secundario va en `muted` (#94A0B4), que mide
     6,32:1 sobre superficie y 5,07:1 en el peor tinte de la pantalla.
   - Sin `opacity` en texto: apagar un color con opacity baja el
     ratio y no se ve en el hex. La jerarquía la dan tamaño, familia
     y color, no el desvanecido.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;900&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap");

.psel{
  /* ---- piso de marca (hex sólidos: medibles) ---- */
  --fondo:#15181E;
  --superficie:#1A1E26;
  --elevado:#222731;
  --hundido:#101318;

  --ink:#F1F5F9;            /* texto principal */
  --mut:#94A0B4;            /* texto secundario — el único gris chico que se usa */
  --dim:#7E8899;            /* reservado: sólo sobre grafito plano, nunca sobre tinte ámbar */
  --sobre-ambar:#101318;    /* texto que va ENCIMA del ámbar (8,93:1) */

  --am:#F2A33C;             /* acento único */
  --am-hot:#FFB85A;         /* hover del acento */
  --am-deep:#D98428;
  --am-soft:rgba(242,163,60,.16);
  --am-ghost:rgba(242,163,60,.07);
  --teal:#2dd4bf;           /* datos: checks de "incluido", unidades */

  --ln:rgba(236,239,244,.11);
  --ln-2:rgba(236,239,244,.20);
  --ease:cubic-bezier(.22,.68,0,1);

  --fdisplay:"Unbounded",system-ui,sans-serif;
  --ftexto:"Inter Tight",system-ui,sans-serif;
  --fmono:"JetBrains Mono",ui-monospace,monospace;

  /* Alto que hay que dejar libre abajo mientras el cartel de cookies
     está en pantalla — ver el bloque "CONSENTIMIENTO" al final. */
  --consent-h:172px;

  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:clamp(44px,6vw,84px) 0 clamp(56px,7vw,96px);
  color:var(--ink); position:relative; isolation:isolate;
  background:var(--fondo);
  font-family:var(--ftexto);
  -webkit-font-smoothing:antialiased;
}
/* Un solo lavado ámbar detrás del panel. El acento es ÚNICO: el halo teal
   que había acá decoraba con el color que en este piso significa "dato". */
.psel::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(1000px 460px at 50% 10%, rgba(242,163,60,.085), transparent 64%);
}

/* Ancho fluido IGUAL al de la seccion "ofrecemos": gutter de .boss-main
   (clamp 14-36) + gutter de .boss-wrap (clamp 24-72). NO 1100 centrado. */
.psel-inner{max-width:none;margin:0 auto;padding:0 calc(clamp(14px,1.8vw,36px) + clamp(24px,4vw,72px))}

/* El span destacado del título: ámbar plano, no degradé. El acento es uno solo
   y a este tamaño el color pleno pega más fuerte que tres paradas de naranja. */
.psel .g{color:var(--am)}

/* ============ ENCABEZADO ============ */
.psel-head{text-align:center;margin-bottom:6px}
.psel-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--fmono);font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--am);
  border:1px solid rgba(242,163,60,.34);
  background:var(--am-ghost);
  border-radius:999px;padding:7px 16px 7px 13px;margin-bottom:20px;
}
/* El ✦ que hacía de icono se fue: ahora entra un SVG dibujado (16px, stroke
   1.7, currentColor) que lo pinta plan-selector.js. */
.psel-eyebrow svg{flex:none;width:15px;height:15px;stroke-width:1.7}
/* !important NO es decorativo acá: themes.css trae
   `body h1, body h2, body h3 { font-family/font-weight/letter-spacing … !important }`
   y le ganaba a la tipografía de este panel (el título salía en Inter, no en la
   display de marca — pasaba también con el skin anterior, sólo que nadie lo miró).
   Con la misma bandera gana la regla más específica, que es ésta. */
.psel-head h2{
  font-family:var(--fdisplay)!important;font-weight:700!important;letter-spacing:-.03em!important;
  /* Unbounded es MUCHO más ancha que la display anterior: a 3,3rem el título
     desbordaba a dos líneas y la segunda quedaba con una palabra suelta.
     Se baja la escala y se reparte con `text-wrap:balance`, que corta en dos
     renglones parejos en vez de dejar una viuda. */
  font-size:clamp(1.65rem,3.3vw,2.5rem);margin:0 0 14px;line-height:1.12;
  text-wrap:balance;color:var(--ink);
}
.psel-head p{
  max-width:600px;margin:0 auto;color:var(--mut);
  font-size:clamp(15px,1.3vw,16.5px);line-height:1.6;font-weight:400;
}
.psel-head p strong{color:var(--ink);font-weight:600}

/* ============ READOUT GIGANTE ============ */
/* Los números son DATO: van en mono, con cifras tabulares, para que no bailen
   de ancho mientras se arrastra el slider. */
.psel-readout{text-align:center;margin:clamp(28px,4vw,46px) 0 6px}
.psel-readout #pselNum{
  font-family:var(--fmono);font-weight:700;letter-spacing:-.045em;
  font-size:clamp(3.2rem,10vw,6.6rem);line-height:.9;display:inline-block;
  color:var(--am);
  font-variant-numeric:tabular-nums;
}
.psel-readout small{
  display:block;font-family:var(--fmono);font-size:11.5px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mut);margin-top:16px;
}

/* ============ SLIDER ============ */
.psel-track{max-width:780px;margin:clamp(22px,3vw,34px) auto 6px;padding:0 4px}
.psel-range{
  -webkit-appearance:none;appearance:none;width:100%;height:12px;
  border-radius:99px;outline:none;cursor:grab;
  border:1px solid var(--ln);
  /* FILL controlado por var(--p) que setea el JS (lo pasa como %, ej 38%) */
  background:linear-gradient(90deg,
    var(--am) 0%, var(--am) var(--p,30%),
    var(--hundido) var(--p,30%));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
.psel-range:active{cursor:grabbing}
.psel-range:focus-visible{box-shadow:0 0 0 3px var(--am-soft),inset 0 1px 2px rgba(0,0,0,.45)}
.psel-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:28px;height:28px;border-radius:50%;
  background:var(--elevado);
  border:3px solid var(--am);
  box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 5px rgba(242,163,60,.12);
  cursor:grab;transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.psel-range::-webkit-slider-thumb:hover{transform:scale(1.12);background:var(--am);box-shadow:0 8px 22px rgba(0,0,0,.55),0 0 0 8px rgba(242,163,60,.16)}
.psel-range:active::-webkit-slider-thumb{transform:scale(1.04)}
.psel-range::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;
  background:var(--elevado);
  border:3px solid var(--am);cursor:grab;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}
/* Cada marca va POSICIONADA en el punto del riel donde de verdad cambia el plan (el JS le pone
   `left:` con el corte real). Antes era un flex con space-between, que las repartía parejo a
   0/25/50/75/100 mientras los cortes están en 25/55/82/100: la marca "14" caía ~40px antes del
   lugar donde terminaba Pro. Una escala mal ubicada engaña más que no tenerla. */
.psel-ticks{
  position:relative;height:15px;
  max-width:780px;margin:12px auto 0;padding:0 4px;
  font-family:var(--fmono);font-size:11px;letter-spacing:.04em;color:var(--mut);
}
.psel-ticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.psel-ticks span:first-child{transform:none}          /* el "0" se apoya en el borde izquierdo */

/* ============ DOS PERILLAS (puestos + crédito) ============ */
.psel-duo{
  max-width:1080px;margin:clamp(26px,3.6vw,40px) auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px);
}
.psel-knob{
  background:var(--superficie);border:1px solid var(--ln);border-radius:16px;
  padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;
}
.psel-kt{
  display:flex;align-items:center;gap:10px;
  font-family:var(--fmono);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mut);
}
.psel-kt .kn{
  flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-size:11px;letter-spacing:0;
  color:var(--sobre-ambar);background:var(--am);
}
/* El readout y el riel viven ADENTRO de la perilla: mismo lenguaje, escala contenida. */
.psel-knob .psel-readout{margin:clamp(14px,2vw,22px) 0 0}
.psel-knob .psel-readout #pselNum{font-size:clamp(2.5rem,5.6vw,4.1rem)}
.psel-knob .psel-readout small{margin-top:12px}
.psel-knob .psel-track{max-width:none;margin:clamp(16px,2vw,24px) 0 4px}
.psel-knob .psel-ticks{max-width:none;margin:10px 0 0}
.psel-kn-note{
  margin-top:14px;min-height:38px;font-size:13.5px;line-height:1.55;
  color:var(--mut);font-weight:400;
}
/* Perilla B: presets de crédito (los montos los manda el backend) */
.psel-cred{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(16px,2.2vw,24px)}
.psel-cchip{
  font-family:var(--fmono);font-size:12px;font-weight:700;letter-spacing:.03em;
  border-radius:999px;padding:10px 16px;cursor:pointer;
  background:var(--elevado);border:1px solid var(--ln);color:var(--ink);
  transition:border-color .3s,background .3s,color .3s,transform .3s var(--ease);
}
.psel-cchip:hover{border-color:var(--ln-2);background:var(--am-ghost);color:var(--am-hot);transform:translateY(-1px)}
.psel-cchip:focus-visible{outline:none;box-shadow:0 0 0 3px var(--am-soft)}
.psel-cchip[aria-pressed="true"]{
  background:var(--am);border-color:var(--am);color:var(--sobre-ambar);
}
.psel-cchip[aria-pressed="true"]:hover{background:var(--am-hot);border-color:var(--am-hot);color:var(--sobre-ambar)}

/* ============ PRESUPUESTO (la respuesta de las dos perillas) ============ */
/* Tinte ámbar al 7% sobre superficie → rgb(41,39,40). Sobre ese fondo el
   `muted` mide 5,62:1 y el ámbar 7,12:1. El `dim` mediría 4,15:1, por eso
   no aparece ni una vez en este bloque. */
.psel-quote{
  max-width:1080px;margin:clamp(18px,2.6vw,28px) auto 0;text-align:center;
  background:linear-gradient(165deg,rgba(242,163,60,.07),var(--superficie) 70%);
  border:1px solid rgba(242,163,60,.30);
  border-radius:18px;padding:clamp(20px,3vw,30px);
}
.psel-quote .q-plan{
  font-family:var(--fmono);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--am);
}
.psel-quote .q-price{
  font-family:var(--fmono);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2rem,4.6vw,3rem);color:var(--ink);margin-top:12px;line-height:1;
  font-variant-numeric:tabular-nums;
}
.psel-quote .q-price small{
  font-family:var(--fmono);font-weight:400;font-size:12px;
  color:var(--mut);letter-spacing:.05em;margin-left:6px;
}
.psel-quote .q-lines{
  margin-top:15px;display:flex;flex-direction:column;gap:7px;
  font-size:14px;line-height:1.55;color:var(--mut);font-weight:400;
}
/* Referencia en pesos: apagada y chica, pero SIN `opacity` — con .72 el contraste caía a 3,53:1,
   por debajo del 4,5:1 de WCAG AA. Con `muted` sobre el tinte ámbar del presupuesto mide 5,62:1
   y se sigue leyendo secundaria por tamaño y familia mono — la jerarquía la da eso, no el
   desvanecido. (Acá NO va `dim`: sobre este mismo fondo mide 4,15:1.) */
.psel-quote .ars{
  font-family:var(--fmono);font-weight:400;font-size:11.5px;letter-spacing:.02em;
  color:var(--mut);margin-top:12px;
}

/* Región live para lectores de pantalla: invisible pero anunciable (nunca display:none). */
.psel-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ============ CTA ============ */
.psel-cta{margin-top:clamp(26px,3.4vw,36px);text-align:center;min-height:52px}
.psel-btn{
  font-family:var(--ftexto);font-weight:600;font-size:15.5px;letter-spacing:.01em;
  border:0;cursor:pointer;border-radius:999px;
  padding:15px 30px;display:inline-flex;align-items:center;gap:10px;
  color:var(--sobre-ambar);background:var(--am);
  box-shadow:0 10px 26px rgba(242,163,60,.22);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s;
}
.psel-btn svg{flex:none;width:17px;height:17px;stroke-width:1.7}
.psel-btn:hover{transform:translateY(-2px);background:var(--am-hot);box-shadow:0 16px 34px rgba(242,163,60,.32)}
.psel-btn:active{transform:scale(.97)}
.psel-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--fondo),0 0 0 6px var(--am)}
.psel-btn.soft{
  background:var(--elevado);border:1px solid var(--ln);color:var(--ink);
  box-shadow:none;font-weight:500;
}
.psel-btn.soft:hover{background:var(--am-ghost);border-color:rgba(242,163,60,.34);color:var(--am-hot)}
.psel-note{
  display:block;margin-top:15px;font-size:13.5px;line-height:1.55;color:var(--mut);
  max-width:640px;margin-left:auto;margin-right:auto;font-weight:400;
}

/* ============ SECCIONES SECUNDARIAS (nube + tecnicos) ============ */
.psel-sec{margin-top:clamp(52px,6vw,80px)}
.psel-sec-head{display:flex;align-items:baseline;gap:16px;margin:0 0 22px}
/* Mismo motivo que el h2 de arriba: themes.css pisa h3 con !important. */
.psel-sec-head h3{
  font-family:var(--fdisplay)!important;font-weight:700!important;letter-spacing:-.02em!important;
  font-size:clamp(18px,2.1vw,25px);margin:0;line-height:1.1;color:var(--ink);
}
.psel-sec-head .mu{
  font-family:var(--fmono);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--am);white-space:nowrap;
}
.psel-sec-head .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--ln-2),transparent)}

/* ---- Nube (cards del ramp, jerarquia por elevacion) ---- */
.psel-cloud{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.psel-cloud .pc{
  display:flex;flex-direction:column;background:var(--superficie);
  border:1px solid var(--ln);border-radius:16px;padding:26px 24px;position:relative;
  transition:transform .5s var(--ease),border-color .35s,background .35s,box-shadow .4s;
}
.psel-cloud .pc:hover{transform:translateY(-4px);border-color:var(--ln-2);background:var(--elevado);box-shadow:0 18px 42px rgba(0,0,0,.4)}
/* El destacado se marca con el ÁMBAR — nunca con un segundo color. */
.psel-cloud .pc.pop{
  border-color:rgba(242,163,60,.42);
  background:linear-gradient(165deg,rgba(242,163,60,.10),var(--superficie) 68%);
  box-shadow:0 18px 44px rgba(0,0,0,.34);
}
.psel-cloud .pc.pop:hover{border-color:var(--am);box-shadow:0 24px 52px rgba(242,163,60,.18)}
.psel-cloud .pc .bpop{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--fmono);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sobre-ambar);
  background:var(--am);
  border-radius:999px;padding:5px 12px 5px 9px;margin-bottom:14px;
}
/* La ★ que hacía de icono se fue: SVG dibujado, 14px, currentColor. */
.psel-cloud .pc .bpop svg{flex:none;width:13px;height:13px;stroke-width:1.7}
.psel-cloud .pc .nm{font-family:var(--fdisplay);font-weight:700;font-size:17px;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.psel-cloud .pc .sub{font-family:var(--fmono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-top:7px}
.psel-cloud .pc .pp{font-family:var(--fmono);font-weight:700;font-size:26px;margin:16px 0 4px;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.psel-cloud .pc.pop .pp{color:var(--am)}
.psel-cloud .pc .pp .per{font-family:var(--fmono);font-size:12px;color:var(--mut);font-weight:400;letter-spacing:.04em}
.psel-cloud .pc ul{list-style:none;margin:16px 0 18px;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
/* El check era un glifo "\2713" inyectado por CSS `content`. Ahora es un SVG que
   pinta el JS dentro del <li>: se escala con el texto y hereda currentColor. */
.psel-cloud .pc li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--mut);font-weight:400}
.psel-cloud .pc li svg{flex:none;width:16px;height:16px;margin-top:1px;stroke-width:1.7;color:var(--teal)}

/* ---- Tecnicos (cards del ramp, precio en mono) ---- */
.psel-tech{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.psel-tech .sv{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--superficie);border:1px solid var(--ln);border-radius:13px;
  padding:17px 18px;cursor:pointer;position:relative;overflow:hidden;
  transition:border-color .3s,background .3s,transform .4s var(--ease);
}
.psel-tech .sv::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--am);transform:scaleY(0);transform-origin:bottom;
  transition:transform .35s var(--ease);
}
.psel-tech .sv:hover{border-color:var(--ln-2);background:var(--elevado);transform:translateX(2px)}
.psel-tech .sv:hover::after{transform:scaleY(1)}
.psel-tech .sv .nm{font-family:var(--ftexto);font-weight:600;font-size:14.5px;letter-spacing:0;color:var(--ink)}
.psel-tech .sv .d{font-size:12.5px;color:var(--mut);margin-top:4px;line-height:1.4;font-weight:400}
.psel-tech .sv .pr{font-family:var(--fmono);font-weight:700;font-size:15px;white-space:nowrap;text-align:right;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.psel-tech .sv:hover .pr{color:var(--am)}
.psel-tech .sv .pr small{display:block;font-family:var(--fmono);font-weight:400;font-size:10px;color:var(--teal);letter-spacing:.05em;margin-top:3px}

/* ============ CONSENTIMIENTO (el cartel de cookies) ============ */
/* El banner (#crmCookieBanner, lo monta dashboard.js) es position:fixed,
   bottom:16px, z-index:99999 — se apoya en el borde inferior del viewport y
   tapaba el botón que lleva al pago.
   SE ELIGIÓ RESERVAR ESPACIO, NO SUBIR EL z-index. Ganarle en z-index dejaría
   al botón dibujado ENCIMA del cartel: se vería el CTA pisando el texto del
   consentimiento y el usuario tendría que leer dos cosas superpuestas. Con
   espacio reservado el cartel queda sobre fondo vacío y el CTA siempre se
   puede scrollear por encima de él.
   El `:has()` hace que la reserva EXISTA SÓLO mientras el cartel existe:
   apenas el usuario acepta o rechaza, dashboard.js hace bar.remove() y el
   padding se va solo. Sin JS y sin dejar un hueco muerto para siempre.
   Si el navegador no soporta :has(), no reserva nada — o sea, se comporta
   exactamente como hasta hoy: degrada, no rompe. */
body:has(> #crmCookieBanner) .psel{padding-bottom:calc(clamp(56px,7vw,96px) + var(--consent-h))}
/* Y si alguien llega al CTA por ancla o por foco, que no aterrice debajo del cartel.
   Va también en el botón: un scrollIntoView() sobre el botón NO lee el
   scroll-margin del contenedor, sólo el suyo. */
.psel-cta,.psel-cta .psel-btn{scroll-margin-bottom:var(--consent-h)}

/* ============ RESPONSIVE ============ */
@media (max-width:780px){
  .psel-duo{grid-template-columns:1fr}
  /* UNA columna, no dos: a 360px las dos perillas lado a lado dejarían ~160px útiles por perilla
     y los presets de crédito wrapearian en 3 filas desparejas. Apiladas entra todo y se alinea. */
  .psel-cloud,.psel-tech{grid-template-columns:1fr}
  .psel-sec-head{flex-wrap:wrap;gap:8px 14px}
  .psel-knob .psel-readout #pselNum{font-size:clamp(2.4rem,14vw,3.8rem)}
  /* En móvil el cartel de cookies wrapea a dos filas y come más alto. */
  .psel{--consent-h:212px}
}

@media (prefers-reduced-motion:reduce){
  .psel *,.psel *::before,.psel *::after{
    animation-duration:.001ms!important;transition-duration:.001ms!important;
  }
  .psel-cchip:hover,.psel-cloud .pc:hover,.psel-tech .sv:hover,.psel-btn:hover{transform:none}
}