/* Portal del Cliente SUMA · acceso (landing, activar, equipo, instalar).
   Claro y fresco: fondo marfil con luces suaves; ilustración en tarjeta; acceso a la derecha.
   Todo cabe en el 100 % de la pantalla del escritorio (1366×607, 1366×768, 1920×969). */
.l-fondo{min-height:100vh;background:var(--fondo);
  background-image:radial-gradient(circle at 0% 100%,rgba(34,181,115,.11),transparent 42%),radial-gradient(circle at 100% 0%,rgba(59,130,182,.10),transparent 46%)}
.l-oficial{display:flex;justify-content:center;align-items:center;gap:8px;padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));
  background:var(--tinta);color:#C9D4E0;font-size:12px;letter-spacing:.2px;text-align:center}
.l-oficial svg{width:14px;height:14px;flex:none;stroke:var(--marca);fill:none;stroke-width:2}
.l-oficial b{color:#fff;font-weight:700}
.l-acceso{height:calc(100vh - 34px);height:calc(100dvh - 34px);min-height:520px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(400px,.88fr);max-width:1320px;margin:0 auto}
.l-presenta{min-width:0;padding:clamp(20px,3.6vh,40px) clamp(24px,4vw,56px) clamp(20px,3vh,32px);display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:clamp(14px,2.8vh,30px)}
.l-cab{display:flex;align-items:center;gap:16px}
.l-cab img{height:66px;width:auto;display:block}
.l-nombre{padding-left:16px;border-left:1px solid var(--borde-2)}
.l-nombre b{display:block;font-size:17px;font-weight:900;letter-spacing:-.2px}
.l-nombre span{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--pri)}
.l-nombre span i{width:6px;height:6px;border-radius:50%;background:var(--marca)}
.l-saludo{margin:0 0 10px;color:var(--pri);font-weight:700;font-size:15px}
.l-msg h1{max-width:16ch;font-weight:900;font-size:clamp(30px,min(3.5vw,6.4vh),50px);line-height:1.05;letter-spacing:-1px}
.l-msg h1 em{font-style:normal;color:var(--pri)}
.l-bajada{margin:clamp(10px,1.8vh,16px) 0 0;max-width:48ch;font-size:clamp(14.5px,2.2vh,17px);line-height:1.6;color:var(--suave)}
.l-benef{display:flex;flex-wrap:wrap;gap:10px 22px;margin:clamp(14px,2.4vh,22px) 0 0;padding:0;list-style:none}
.l-benef li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--tinta-2)}
.l-benef li i{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:var(--papel);border:1px solid var(--borde);box-shadow:var(--sombra-s)}
.l-benef svg{width:16px;height:16px;fill:none;stroke:var(--pri);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.l-escena{position:relative;margin:0;min-height:0;height:100%;max-width:560px;padding-bottom:30px}
.l-marco{width:88%;height:100%;min-height:150px;max-height:300px;border-radius:20px;overflow:hidden;box-shadow:var(--sombra);background:linear-gradient(160deg,#E4F1EA 0%,#DCE9F4 100%)}
.l-marco svg{display:block;width:100%;height:100%}
.l-flot{position:absolute;right:0;bottom:0;width:min(300px,66%);padding:14px 18px;background:var(--papel);border:1px solid var(--borde);border-radius:18px;box-shadow:var(--sombra);font-size:13.5px;animation:sube .6s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes sube{from{transform:translateY(10px);opacity:.01}to{transform:none;opacity:1}}
.l-flot .f{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0}
.l-flot .f + .f{border-top:1px solid var(--borde)}
.l-flot .f > span:first-child{color:var(--suave)}
.l-flot strong{font-weight:700;text-align:right}
.punto{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--pri)}
.punto i{width:8px;height:8px;border-radius:50%;background:#3DBE6E;box-shadow:0 0 0 4px rgba(61,190,110,.18)}
.l-lado{min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(20px,3.5vw,48px)}
.l-tarjeta{width:100%;max-width:410px;background:var(--papel);border:1px solid var(--borde);border-radius:22px;padding:clamp(22px,3.8vh,34px) clamp(22px,3vw,32px);box-shadow:var(--sombra)}
.l-tarjeta h2{font-size:25px;font-weight:900;letter-spacing:-.3px}
.l-ayuda{margin:6px 0 clamp(14px,2.4vh,22px);color:var(--suave);font-size:14px;line-height:1.5}
.l-tarjeta .campo{margin-bottom:clamp(11px,2vh,16px)}
.l-tarjeta .campo input{padding:12px 14px;font-size:15px;border-radius:12px}
.bajo{display:flex;justify-content:space-between;align-items:center;margin-top:8px;min-height:20px;gap:8px}
.l-primera{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:var(--fondo);border:1px dashed var(--borde-2);font-size:13px;line-height:1.5;color:var(--suave)}
.l-primera b{color:var(--tinta)}
.l-seguro{display:flex;align-items:flex-start;gap:9px;margin:14px 2px 0;font-size:12.5px;line-height:1.45;color:var(--suave)}
.l-seguro svg{width:16px;height:16px;flex:none;margin-top:1px;fill:none;stroke:var(--pri);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.l-ayuda-sac{width:100%;max-width:410px;margin-top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.7);border:1px solid var(--borde);font-size:13px}
.l-ayuda-sac span{color:var(--suave);font-size:12px}
.l-pie{margin:14px 0 0;font-size:11.5px;color:var(--tenue);text-align:center;line-height:1.6;max-width:440px}
.l-pie a{color:var(--tenue)}
@media (max-height:700px) and (min-width:981px){.l-primera{display:none}}
@media (max-height:640px) and (min-width:981px){.l-escena{display:none}.l-presenta{grid-template-rows:auto auto;align-content:center}}
@media (max-width:980px){
  .l-acceso{grid-template-columns:1fr;min-height:0;height:auto;overflow:visible}
  .l-presenta{grid-template-rows:auto auto;padding-bottom:0}
  .l-escena{display:none}
  .l-lado{padding-top:20px;padding-bottom:32px}
}
@media (max-width:520px){
  .l-cab img{height:52px}
  .l-nombre b{font-size:15px}
  .l-benef{gap:8px 16px}
  .l-oficial{font-size:11px}
}

/* Páginas de una sola tarjeta: activar, equipo, instalar */
.act{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
.act .l-tarjeta{max-width:460px}
.act-logo{height:56px;width:auto;margin-bottom:18px}
.act-pasos{display:flex;gap:6px;margin:0 0 18px}
.act-pasos span{flex:1;height:4px;border-radius:4px;background:var(--borde)}
.act-pasos span.on{background:var(--marca)}
@media (prefers-reduced-motion:reduce){.l-flot{animation:none}}

/* Acceso del equipo SUMA, abajo a la derecha del formulario */
.l-equipo{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--borde);display:flex;justify-content:flex-end}
.l-equipo a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--pri);background:#EAF6EF;border:1px solid #BFE3CC;border-radius:999px;padding:9px 16px;text-decoration:none;transition:background .15s,border-color .15s,transform .15s}
.l-equipo a:hover,.l-equipo a:focus-visible{background:#DCF0E4;border-color:var(--pri);transform:translateY(-1px)}
.l-equipo svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.l-equipo .flecha{font-size:16px;line-height:1}