/* Portal de clientes MOTOSFERA. Mismos tokens del boceto v4 (PANTALLAS_ETAPA_1.html). */
:root{
  --asfalto:#1b2228; --asfalto2:#26313a; --concreto:#e9ecea; --blanco:#fff;
  --acero:#5f6b74; --linea:#cfd5d2;
  --vigente:#2f8f5b; --vigente-f:#e3f2e9; --senal:#e8a317; --senal-f:#fdf3dc; --rojo:#a8201a;
  --re:#b0161e; --cf:#00a3b4;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif; --txt:"Barlow",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--concreto);color:var(--asfalto);font:400 16px/1.5 var(--txt)}
a{color:inherit}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--senal);outline-offset:2px}
.aviso-prueba{background:var(--senal);color:var(--asfalto);text-align:center;font:600 13px var(--txt);padding:5px 12px;position:relative;z-index:2}

.marca{font:700 22px/1 var(--cond);letter-spacing:.5px}
.marca small{display:block;font:500 13px/1.3 var(--txt);opacity:.8;letter-spacing:0;margin-top:4px}

/* Portada: foto de fondo, tarjeta de entrada */
.portada{color:var(--blanco);background:var(--asfalto)}
.portada-grid{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  background:linear-gradient(90deg,rgba(27,34,40,.93) 0%,rgba(27,34,40,.6) 55%,rgba(27,34,40,.25) 100%),
  url(/estatico/img/fondo-web.webp) center/cover no-repeat}
.portada-izq{padding:40px 48px;display:flex;flex-direction:column}
.portada-izq h1{font:700 clamp(40px,5.4vw,68px)/.95 var(--cond);margin:auto 0 14px;max-width:13ch;overflow-wrap:break-word}
.bajada{max-width:42ch;margin:0 0 24px;opacity:.92;font-size:18px}
.logos{display:flex;gap:10px;flex-wrap:wrap}
.logos span{border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:4px 14px;font:600 15px var(--cond)}
.portada-der{display:flex;align-items:center;justify-content:center;padding:32px}
.tarjeta{background:var(--blanco);color:var(--asfalto);border-radius:16px;padding:28px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px}
.tarjeta h2{font:700 28px/1.05 var(--cond);margin:0}
.tarjeta p{margin:0;color:var(--acero);font-size:15px}
.campo{width:100%;background:var(--blanco);border:1.5px solid var(--linea);border-radius:10px;padding:12px 13px;font:500 17px var(--txt);color:var(--asfalto)}
.campo:focus{border-color:var(--asfalto);outline:none;box-shadow:0 0 0 3px rgba(232,163,23,.45)}
.campo.codigo{font:700 30px var(--cond);letter-spacing:12px;text-align:center}
.boton{display:block;width:100%;border:0;cursor:pointer;text-align:center;border-radius:10px;padding:13px;font:600 17px var(--txt);background:var(--asfalto);color:var(--blanco)}
.boton:hover{background:var(--asfalto2)}
.error{color:var(--rojo)!important;font-weight:600}
.nota{font-size:13.5px;color:var(--acero);margin:0}
.nota a{font-weight:600}

/* Interior */
.interior{background:var(--concreto)}
.cabecera{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:var(--asfalto);color:var(--blanco)}
.enlace{background:none;border:0;color:inherit;font:600 15px var(--txt);text-decoration:underline;cursor:pointer;padding:6px}
.contenido{max-width:560px;margin:0 auto;padding:20px 16px 40px}
.sub{color:var(--acero);margin:0}
.titulo{font:700 34px/1 var(--cond);margin:2px 0 16px}
.unidad{background:var(--blanco);border-radius:14px;border-top:4px solid var(--asfalto);margin-bottom:14px;overflow:hidden}
.unidad.marca-royal-enfield{border-top-color:var(--re)}
.unidad.marca-cfmoto,.unidad.marca-goes{border-top-color:var(--cf)}
.unidad .datos{padding:12px 14px 14px}
.unidad h2{font:700 23px/1.05 var(--cond);margin:0 0 2px}
.unidad p{margin:0 0 4px;color:var(--acero);font-size:14.5px}
.unidad .vin{font-size:13px;letter-spacing:.3px}
.chip{display:inline-block;border-radius:999px;padding:2px 11px;font:600 13px var(--txt);margin-top:4px}
.chip.ok{background:var(--vigente-f);color:var(--vigente)}
.chip.av{background:var(--senal-f);color:#7a5200}
.vacio{background:var(--blanco);border-radius:14px;padding:20px}
.vacio h2{font:700 24px/1.1 var(--cond);margin:0 0 6px}
.vacio p{margin:0;color:var(--acero)}
.pie{margin-top:22px}

@media (max-width:820px){
  .portada-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;
    background:linear-gradient(180deg,rgba(27,34,40,.35) 0%,rgba(27,34,40,.85) 45%,rgba(27,34,40,.97) 100%),
    url(/estatico/img/fondo-cel.webp) center top/cover no-repeat}
  .portada-izq{padding:24px 20px 0}
  .portada-izq h1{margin-top:22vh;font-size:40px}
  .bajada{font-size:16px;margin-bottom:16px}
  .portada-der{padding:20px 16px 28px;align-items:flex-start}
  .tarjeta{max-width:none}
}