/* =============================================================================
   Calculadora de Ahorros — Denali Energy Partners
   Sistema visual portado del HTML de referencia v3 de Denali.

   Las FUENTES se sirven desde este mismo origen (/fuentes/), no desde Google
   Fonts. Es lo que permite mantener la CSP sin 'unsafe-inline' ni hosts de
   terceros, y elimina la dependencia de una CDN durante el webinar.
     Poppins  — SIL Open Font License 1.1
     Roboto   — Apache License 2.0
   Ambas licencias permiten el auto-hospedaje.

   Aqui NO hay ni una tarifa, coeficiente ni rango de ahorro: los colores de
   las palancas son presentacion, y los numeros los pone la API.
   ========================================================================== */

@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fuentes/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fuentes/poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fuentes/poppins-700.woff2') format('woff2')}
/* Roboto v51 es fuente variable: un archivo cubre 400-700. */
@font-face{font-family:'Roboto';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fuentes/roboto-var.woff2') format('woff2')}

:root{
  --navy:#004AAD; --green:#42925C; --deep:#000B5D; --teal:#043539;
  --gray:#E6E6E6; --pale:#F0F0F0; --white:#fff;
  --mem:#E9EEF6;                 /* gris azulado del universo Calificado (v5.2) */
  --ink:#16203a; --muted:#5b6472; --line:#dce1ea;
  --ok:#1f7a45; --warn:#9a6a00; --bad:#a3343d;
  --shadow:0 10px 30px rgba(0,11,93,.08), 0 2px 8px rgba(0,11,93,.05);
  --radius:16px;
  --font-d:'Poppins',Arial,sans-serif; --font-b:'Roboto',Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#f6f8fc 0%,#eef2f8 100%);
  color:var(--ink);font-family:var(--font-b);line-height:1.5;-webkit-font-smoothing:antialiased;
  min-height:100vh}
.wrap{max-width:880px;margin:0 auto;padding:28px 20px 64px;position:relative}

/* ---------- Marca ---------- */
header.dep{display:flex;align-items:center;gap:14px;margin-bottom:6px}
/* Logo oficial. Alturas del v5.2 (lineas 79-80). El `width:auto` con las
   dimensiones intrinsecas en el <img> evita que el encabezado salte mientras
   carga la imagen. */
.brand-logo{height:54px;width:auto;display:block}
@media(max-width:560px){.brand-logo{height:44px}}
/* .brand-name y .brand-tag se conservan: las usa privacidad.html, que sigue
   con la marca en texto. */
.brand-name{font-family:var(--font-d);font-weight:700;letter-spacing:.5px;color:var(--deep);font-size:20px;line-height:1}
.brand-tag{font-size:11px;color:var(--muted);letter-spacing:2.5px;text-transform:uppercase;margin-top:3px}
.bg-hex{position:absolute;top:-10px;right:-30px;opacity:.5;pointer-events:none;z-index:0}
@media(max-width:560px){.bg-hex{display:none}}

.lede{margin:18px 0 26px}
.lede h1{font-family:var(--font-d);font-weight:600;font-size:clamp(28px,5vw,42px);
  color:var(--deep);margin:0 0 8px;line-height:1.15}
.lede h1 b{color:var(--navy)}
.lede p{margin:0;color:var(--muted);max-width:62ch;font-size:15px}

/* ---------- Pasos ---------- */
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 22px 24px;margin-bottom:18px;position:relative}
.step.hide{display:none}
.step-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
/* v5.2: el hexagono venia 'muy alto, muy flaco'. 32x28 lo deja mas ancho
   y simetrico. El SVG de index.html usa el mismo viewBox. */
.step-num{flex:0 0 auto;width:32px;height:28px;position:relative}
.step-num span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:700;color:#fff;font-size:14px}
.step-title{font-family:var(--font-d);font-weight:600;font-size:17px;color:var(--deep)}
.step-sub{font-size:13px;color:var(--muted);margin-top:1px}

/* ---------- Campos ---------- */
label.field{display:block;margin:0 0 14px}
label.field > .lab{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:6px}
label.field .hint{color:var(--muted);font-weight:400}

/* Nota bajo un campo. Valores tomados del v5.2 (linea 108), sin inventar:
   es texto de apoyo, no un aviso, por eso va en el gris silencioso. El margen
   negativo la pega al campo de arriba en vez de dejarla flotando. */
/* Campo que lleva una .fieldnote debajo: se le acorta el margen para que la
   nota quede pegada a el y no flotando entre dos campos.

   Va como CLASE y no como style="", que es lo que traia copiado del v5.2: con
   `style-src 'self'` y sin 'unsafe-inline', el navegador IGNORA los atributos
   style, asi que ese margen nunca se estaba aplicando. Silencioso: ni error de
   consola ni violacion reportada, solo un espaciado que no era el que se
   habia escrito. */
.field.con-nota{margin-bottom:5px}
.fieldnote{font-size:11.5px;margin:-9px 0 14px;color:var(--muted);line-height:1.35}
.fieldnote.ok{color:#1f5a37}
.fieldnote.warn{color:#7a5500}
select,input[type=text],input[type=number],input[type=email],input[type=tel]{
  width:100%;padding:12px 13px;font-size:15px;font-family:var(--font-b);color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:11px;outline:none;
  transition:border-color .15s, box-shadow .15s;-webkit-appearance:none;appearance:none}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:38px}
select:focus,input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,74,173,.12)}
/* 16px EXACTOS en movil, y no es capricho tipografico: Safari en iPhone hace
   zoom automatico a la pagina cuando enfocas un campo con font-size < 16px.
   Con los 15px de arriba, cada uno de los 13 campos de captura hacia saltar la
   pagina y el usuario tenia que salirse del zoom con los dedos. */
@media(max-width:560px){
  select,input[type=text],input[type=number],input[type=email],input[type=tel]{font-size:16px}
}
.grid{display:grid;gap:0 16px;grid-template-columns:1fr 1fr}
.grid-3{display:grid;gap:0 16px;grid-template-columns:1fr 1fr 1fr}
@media(max-width:560px){.grid,.grid-3{grid-template-columns:1fr}}

/* Cifras con separador de miles (v5.2). `tabular-nums` alinea los digitos
   para que la cifra no baile al teclear. */
.num{font-variant-numeric:tabular-nums}

/* ---------- Division detectada del recibo (paso 2) ---------- */
.detect{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-radius:12px;
  font-size:13.5px;margin:0 0 14px;background:rgba(0,74,173,.06);
  border:1px solid rgba(0,74,173,.22);color:#123a72}
.detect b{font-family:var(--font-d)}
.detect.warn{background:rgba(154,106,0,.09);border-color:rgba(154,106,0,.28);color:#7a5500}
.detect svg{flex:0 0 auto;margin-top:1px}
.detect.hide{display:none}

/* ---------- Confirmacion de la division (paso 1) ---------- */
.teaser{margin-top:4px;padding:13px 15px;border-radius:12px;font-size:14px;
  background:rgba(66,146,92,.10);border:1px solid rgba(66,146,92,.28);color:#1f5a37}
.teaser.na{background:rgba(154,106,0,.10);border-color:rgba(154,106,0,.30);color:#7a5500}
.teaser b{font-family:var(--font-d)}

/* ---------- Rutas de captura (paso 2) ---------- */
.routes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.routes{grid-template-columns:1fr}}
.route{cursor:pointer;border:1.5px solid var(--line);border-radius:14px;padding:18px;background:#fff;
  transition:.15s;display:flex;gap:13px;align-items:flex-start;text-align:left;font-family:inherit}
.route:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow)}
.route.sel{border-color:var(--navy);background:rgba(0,74,173,.04);box-shadow:0 0 0 3px rgba(0,74,173,.10)}
.route .ico{flex:0 0 auto;width:40px;height:40px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;background:var(--pale)}
.route.sel .ico{background:rgba(0,74,173,.12)}
.route h4{margin:0 0 3px;font-family:var(--font-d);font-weight:600;font-size:15px;color:var(--deep)}
.route p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--green);background:rgba(66,146,92,.13);padding:2px 7px;border-radius:6px;
  margin-left:6px;vertical-align:middle}
.panel-captura{margin-top:18px}

/* ---------- Zona de carga ---------- */
.drop{margin-top:4px;border:2px dashed var(--line);border-radius:14px;padding:26px 18px;
  text-align:center;transition:.15s;background:#fafbfe;cursor:pointer}
.drop:hover{border-color:var(--navy);background:rgba(0,74,173,.03)}
.drop.over{border-color:var(--navy);background:rgba(0,74,173,.04)}
.drop p{margin:8px 0 0;font-size:13px;color:var(--muted)}
.drop .sm{font-size:11.5px}
.filechip{display:none;margin-top:14px;align-items:center;gap:10px;justify-content:center;
  font-size:13px;color:var(--ink)}
.filechip.show{display:flex}
.filechip .x{cursor:pointer;color:var(--muted);font-weight:700;padding:2px 6px;border-radius:6px}
.filechip .x:hover{background:var(--pale)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-d);
  font-weight:600;font-size:15px;cursor:pointer;border:none;border-radius:12px;padding:13px 22px;
  transition:.15s;line-height:1;text-decoration:none}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:#003d91}
.btn-primary:disabled{background:#a9b6cc;cursor:not-allowed}
.btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--navy)}
.btn-ghost:hover{border-color:var(--navy)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.spin{width:16px;height:16px;border:2.4px solid rgba(255,255,255,.45);border-top-color:#fff;
  border-radius:50%;animation:sp .7s linear infinite;display:none}
@keyframes sp{to{transform:rotate(360deg)}}
.btn.loading .spin{display:inline-block}
.note{font-size:12.5px;color:var(--muted);margin-top:12px;padding:11px 13px;background:var(--pale);
  border-radius:10px;border-left:3px solid var(--green)}

/* ---------- Avisos ---------- */
.err{margin-top:14px;font-size:13px;color:var(--bad);background:rgba(163,52,61,.07);
  border:1px solid rgba(163,52,61,.25);border-radius:10px;padding:11px 13px}
.warn{margin-top:12px;font-size:13px;color:#7a5500;background:rgba(154,106,0,.08);
  border:1px solid rgba(154,106,0,.28);border-radius:10px;padding:11px 13px}
.okbox{margin-top:12px;font-size:13px;color:#1f5a37;background:rgba(31,122,69,.08);
  border:1px solid rgba(31,122,69,.25);border-radius:10px;padding:11px 13px}
.cargando{color:var(--muted);font-size:13px;margin-top:10px}

/* ---------- Detalle del recibo ---------- */
.result-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.big{font-family:var(--font-d);font-weight:700;font-size:30px;color:var(--navy);line-height:1}
.result-sub{font-size:13px;color:var(--muted);margin-bottom:18px}
table.bk{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 4px}
table.bk th,table.bk td{padding:9px 6px;text-align:left;border-bottom:1px solid var(--line)}
table.bk th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600}
table.bk td.r,table.bk th.r{text-align:right;font-variant-numeric:tabular-nums}
table.bk tr.tot td{border-top:2px solid var(--deep);border-bottom:none;font-weight:700;
  font-family:var(--font-d);color:var(--deep);padding-top:11px}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.pill{font-size:12.5px;background:var(--pale);border-radius:20px;padding:6px 13px;color:var(--ink)}
.pill b{font-family:var(--font-d);color:var(--deep)}
.crosscheck{margin-top:8px;padding:12px 14px;border-radius:11px;font-size:13.5px}
.crosscheck.ok{background:rgba(31,122,69,.08);border:1px solid rgba(31,122,69,.25);color:#1f5a37}
.crosscheck.off{background:rgba(154,106,0,.08);border:1px solid rgba(154,106,0,.28);color:#7a5500}
.assume{margin-top:16px}
.assume h5{margin:0 0 6px;font-family:var(--font-d);font-weight:600;font-size:13px;color:var(--deep)}
.assume ul{margin:0;padding-left:18px;font-size:12.5px;color:var(--muted)}
.assume li{margin-bottom:3px}

details.more{margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
details.more>summary{cursor:pointer;list-style:none;padding:12px 15px;font-size:13px;font-weight:500;
  color:var(--navy);background:#fafbfe;display:flex;align-items:center;justify-content:space-between}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"▾";color:var(--muted);transition:.2s}
details.more[open]>summary::after{transform:rotate(180deg)}
details.more .inner{padding:14px 15px 4px}

/* ---------- Resumen de ahorros ---------- */
.save{margin-top:8px;border:1px solid rgba(0,74,173,.18);border-radius:16px;overflow:hidden;background:#fff}
.save-hero{background:linear-gradient(135deg,var(--deep) 0%,var(--navy) 55%,#0a63c4 100%);
  color:#fff;padding:22px 22px 20px}
.save-hero .eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.7);font-weight:600}
.save-hero .amt{font-family:var(--font-d);font-weight:700;font-size:clamp(26px,5.2vw,38px);
  line-height:1.05;margin:6px 0 2px}
.save-hero .amt small{font-weight:500;font-size:.42em;color:rgba(255,255,255,.8);letter-spacing:.5px}
.save-hero .row2{display:flex;flex-wrap:wrap;gap:18px;margin-top:12px}
.save-hero .kpi{font-size:12.5px;color:rgba(255,255,255,.82)}
.save-hero .kpi b{display:block;font-family:var(--font-d);font-weight:600;font-size:17px;
  color:#fff;margin-top:1px}
/* Sin estimacion confiable el hero se apaga: gris, sin cifras. */
.save-hero.mudo{background:linear-gradient(135deg,#4a5468 0%,#5b6472 100%)}

.save-body{padding:20px 22px 22px}
.donut-wrap{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.donut-box{position:relative;flex:0 0 auto;width:172px;height:172px;margin:0 auto}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;pointer-events:none}
.donut-center .pct{font-family:var(--font-d);font-weight:700;font-size:26px;color:var(--deep);line-height:1}
.donut-center .lab{font-size:10.5px;color:var(--muted);letter-spacing:.5px;margin-top:2px;max-width:96px}
.legend{flex:1 1 280px;min-width:240px}
/* En movil la leyenda ya ocupa el ancho completo (el donut envuelve arriba),
   asi que el min-width solo puede hacer dano. Entre .wrap, .step, .save y
   .save-body se pierden 132px, de modo que por debajo de 372px de viewport
   los 240px no caben y el panel de resultados desbordaba con scroll
   horizontal: 12px en un Android de 360, 52px en un iPhone SE de 320. */
@media(max-width:560px){.legend{min-width:0}}
.lever{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);
  user-select:none}
.lever:last-child{border-bottom:none}
.lever[role=button]{cursor:pointer}
.lever[role=button]:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:6px}
/* El atenuado se reserva a las soluciones que NO APLICAN. Antes tambien se
   atenuaba la apagada (.off), y eso mezclaba dos cosas distintas: "no existe
   para tu caso" y "la apagaste tu". La segunda es reversible con un clic y no
   deberia verse como si el sitio la hubiera descartado. Es el punto 8 del
   propio changelog del v5.2. El estado apagado ya se lee en el interruptor,
   que ahora dice Off, y en la linea de abajo. */
.lever.dis{opacity:.5;cursor:default}
.lever .dot{flex:0 0 auto;width:12px;height:12px;border-radius:3px}
.lever .lv-main{flex:1 1 auto;min-width:0}
.lever .lv-name{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.25;display:block}
.lever .lv-meta{font-size:11.5px;color:var(--muted);display:block}
.lever .lv-amt{flex:0 0 auto;text-align:right;font-size:12.5px;font-variant-numeric:tabular-nums;
  color:var(--deep);font-family:var(--font-d);font-weight:600}
.lever .lv-amt.na{color:var(--muted);font-weight:400;font-family:var(--font-b)}
/* Interruptor de cada solucion. Valores del v5.2 (lineas 199-206), no
   aproximados: 62x24 con la etiqueta On/Off dentro, en vez del 34x20 mudo que
   traiamos. Es la diferencia visual mas notoria entre lo desplegado y la
   referencia, y la etiqueta importa: sin ella el estado se adivina por color,
   que es justo lo que no funciona para quien no distingue verde de gris. */
.toggle{flex:0 0 auto;width:62px;height:24px;border-radius:20px;background:var(--gray);
  position:relative;transition:.15s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:.15s}
.toggle i{position:absolute;top:0;right:9px;height:24px;display:flex;align-items:center;
  font-style:normal;font-family:var(--font-d);font-weight:600;font-size:10.5px;
  letter-spacing:.4px;color:#78849a;transition:.15s}
.lever.on .toggle{background:var(--green)}
.lever.on .toggle::after{left:41px}
.lever.on .toggle i{right:auto;left:10px;color:#fff}
.lever.dis .toggle{background:var(--gray)}
.toggle-hueco{width:62px;flex:0 0 auto}
.tag{font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:1px 6px;
  border-radius:5px;margin-left:6px;vertical-align:middle}
.tag.na{color:#7a5500;background:rgba(154,106,0,.13)}
/* Verde de logro: marca lo que el prospecto YA hizo —alta tension en
   DIST/DIT—, no algo que le falte. */
.tag.done{color:#1f5a37;background:rgba(31,122,69,.13)}
.tag.main{color:var(--navy);background:rgba(0,74,173,.12)}

.ba{margin-top:22px}
.ba .ba-row{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.ba .ba-lab{flex:0 0 96px;font-size:12px;color:var(--muted)}
.ba .ba-bar{flex:1 1 auto;height:30px;border-radius:8px;position:relative;overflow:hidden;
  background:var(--pale)}
.ba .ba-fill{height:100%;border-radius:8px;display:flex;align-items:center;justify-content:flex-end;
  padding-right:10px;color:#fff;font-family:var(--font-d);font-weight:600;font-size:12.5px;
  white-space:nowrap}
/* La barra "hoy pagas" es siempre el 100%: ancho estatico, sin style="". El de
   la barra optimizada es dinamico y lo pone index.js por CSSOM. */
.ba .now{background:#9aa6bd;width:100%}
.ba .opt{background:linear-gradient(90deg,var(--navy),var(--green))}
.save-foot{font-size:11.5px;color:var(--muted);margin-top:14px}

/* ---------- Cierre ---------- */
.cta{margin-top:22px;padding:18px;border-radius:14px;
  background:linear-gradient(135deg,var(--deep),var(--navy));color:#fff}
.cta h4{margin:0 0 5px;font-family:var(--font-d);font-weight:600;font-size:16px}
.cta p{margin:0 0 12px;font-size:13px;color:rgba(255,255,255,.85)}
.cta .btn-primary{background:var(--green)}
.cta .btn-primary:hover{background:#37794c}
/* El deshabilitado TIENE que ir aqui y despues.
   `.btn-primary:disabled` (arriba) y `.cta .btn-primary` tienen la misma
   especificidad (0,2,0), y como el segundo va despues le gana: el boton de
   enviar el lead se pintaba verde, con toda la pinta de estar activo, aunque
   estuviera deshabilitado de verdad. Un boton que se ve pulsable y no
   responde se lee como un sitio roto, no como un requisito pendiente.
   (0,3,0) le gana a los dos. */
.cta .btn-primary:disabled,
.cta .btn-primary:disabled:hover{
  background:rgba(255,255,255,.16);color:rgba(255,255,255,.55);
  cursor:not-allowed;box-shadow:none}

.consent-row{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink);
  margin-top:6px;cursor:pointer}
.consent-row input{width:auto;flex:0 0 auto;margin-top:2px}

.disc{font-size:11.5px;color:var(--muted);margin-top:26px;line-height:1.5;
  border-top:1px solid var(--line);padding-top:16px}
footer.dep{margin-top:22px;font-size:12px;color:var(--muted);text-align:center}
footer.dep a{color:var(--navy);text-decoration:none}
footer.dep a:hover{text-decoration:underline}

.hide{display:none}

/* Columna del medio del desglose (v5.2): la base sobre la que se cobra
   cada linea. Mas tenue que el importe — es contexto, no la cifra. */
.bk td.bc{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}

/* ---------- Botones de contacto y formulario del reporte (v5.2) ----------
   Tres canales: Calendly, WhatsApp y el reporte. Los dos primeros salen del
   sitio; el tercero abre el formulario, que es el unico que deja lead. */
.btn-wa{background:transparent;border:1.5px solid rgba(255,255,255,.75);color:#fff;
  display:inline-flex;align-items:center;gap:7px}
.btn-wa:hover{border-color:#fff;background:rgba(255,255,255,.10)}
.btn-terciario{background:transparent;border:1.5px solid rgba(255,255,255,.32);
  color:rgba(255,255,255,.88)}
.btn-terciario:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}

.leadform{margin-top:16px;padding:16px;border-radius:12px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22)}
.leadform[hidden]{display:none}
.leadform h5{margin:0 0 3px;font-family:var(--font-d);font-weight:600;font-size:14px;color:#fff}
.leadform .sub{margin:0 0 12px;font-size:12px;color:rgba(255,255,255,.8)}
/* Las etiquetas del formulario de lead van sobre el azul marino de la tarjeta,
   asi que tienen que ser claras. Se repite `label.field` en el selector a
   proposito, para GANARLE a la regla base:

     label.field > .lab   (0,2,1)  color:var(--ink)    #16203a  casi negro
     .leadform .lab       (0,2,0)  <- perdia por un elemento

   Escritas como `.leadform .lab` las dos reglas de abajo eran letra muerta y
   los labels salian en negro sobre azul, ilegibles. Misma colision que la del
   boton deshabilitado en `.cta` (ver la nota de arriba): el override se
   escribio, se dio por aplicado, y la cascada lo descartaba en silencio. */
.leadform label.field > .lab{color:rgba(255,255,255,.9)}
.leadform label.field .hint{color:rgba(255,255,255,.6)}
.leadform input{background:rgba(255,255,255,.95);border-color:transparent}
.leadform .consent-row{color:rgba(255,255,255,.85);font-size:12px}
.leadform .consent-row a{color:#fff;text-decoration:underline}
/* Pista de por que el boton de enviar esta apagado. Se oculta sola al marcar
   la casilla. Sin esto, un boton gris sin explicacion se lee como una falla
   del sitio y no como un requisito. */
.leadform .lead-pista{margin:6px 0 0;font-size:12px;color:rgba(255,255,255,.72)}
.leadform .lf-ok{display:none;font-size:13px;color:#fff;background:rgba(66,146,92,.35);
  border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:11px 13px}
.leadform.done .lf-ok{display:block}
.leadform.done .lf-body{display:none}

/* Banner de regimen sobre la lista de soluciones (v5.2). El cambio de color
   al pasar de Basico a Calificado es intencional: avisa que TODAS las
   soluciones se estan valuando contra otra linea base. */
/* Bloque de soluciones: cambia de fondo al activar Suministro Calificado.
   Valores del v5.2 (lineas 183-184). No es adorno: avisa de un golpe que TODAS
   las soluciones de adentro se estan valuando contra otra linea base, que es
   el efecto del MEM y lo mas facil de pasar por alto. */
/* Aviso ambar del paso 1 cuando el MEM no aplica en la division elegida.
   Valores del v5.2 (linea 112). Sale ANTES de calcular: sin el, el prospecto
   de Peninsular llega al resultado, ve el MEM en "NA" y no sabe por que. */
.teaser{margin:-4px 0 16px;padding:13px 15px;border-radius:12px;font-size:13.5px;
  line-height:1.45;background:rgba(154,106,0,.09);
  border:1px solid rgba(154,106,0,.28);color:#7a5500}
.teaser.hide{display:none}
.teaser b{font-family:var(--font-d)}

/* Nota de regimen sobre la dona. Explica que cambia al prender o apagar el
   Suministro Calificado, que es lo mas dificil de intuir de toda la pantalla:
   no es "una solucion mas", cambia la linea base de TODAS. v5.2 linea 212. */
.rg-note{font-size:11.5px;color:var(--muted);line-height:1.4;margin:0 0 14px;
  padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#fafbfe}

.proyectos{border-radius:14px;padding:6px 14px;background:transparent;
  transition:background .18s, box-shadow .18s}
.proyectos.mem{background:var(--mem);box-shadow:inset 0 0 0 1px rgba(0,74,173,.10)}
.univ{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  font-family:var(--font-d);font-weight:700;padding:8px 0 6px;color:var(--muted)}
.univ.cal{color:var(--navy)}