/* ============================================================
   MAS DE 20 AÑOS DE GRANADAINMO (2026)
   Banner de portada (index.asp), distintivo junto al logo (cabecera2026.asp)
   y sello en el acceso de empresas (usuarios/user-login.asp).
   El panel (appcontrolpanel/dassboard.asp) lleva sus estilos dentro.
   Para cambiar los años: buscar "20" en esas paginas.
   ============================================================ */
:root { --v20-azul: #163563; --v20-oro: #F2B544; }

/* ---------- banner de portada ---------- */
.v20-banner { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 48px;
  background: var(--v20-azul); color: #fff; border-radius: 20px; padding: 44px 56px; margin: 28px 0 8px; }
.v20-banner::before, .v20-banner::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.v20-banner::before { right: -120px; top: -170px; width: 500px; height: 500px; border: 2px solid rgba(255,255,255,.08); }
.v20-banner::after { right: -40px; top: -90px; width: 340px; height: 340px; border: 2px solid rgba(255,255,255,.06); }
.v20-num { position: relative; display: flex; align-items: flex-end; gap: 12px; }
.v20-num b { font-size: 170px; line-height: .8; font-weight: 800; letter-spacing: -.06em; color: var(--v20-oro); }
.v20-num span { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; font-size: 30px; font-weight: 800; line-height: 1; }
.v20-num span i { font-style: normal; color: var(--v20-oro); }
.v20-txt { position: relative; display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.v20-etq { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 6px 14px; border-radius: 30px; border: 1px solid rgba(255,255,255,.35); }
.v20-banner h2 { margin: 0; color: #fff; font-size: 36px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
.v20-banner p { margin: 0; color: rgba(255,255,255,.86); font-size: 17px; line-height: 1.55; }
.v20-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.v20-btns a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; }
.v20-btns a.v20-prin { background: var(--v20-oro); color: var(--v20-azul); }
.v20-btns a.v20-prin:hover { background: #ffc85c; color: var(--v20-azul); }
.v20-btns a.v20-sec { border: 2px solid rgba(255,255,255,.6); color: #fff; }
.v20-btns a.v20-sec:hover { background: rgba(255,255,255,.1); color: #fff; }
@media (max-width: 900px) {
  .v20-banner { grid-template-columns: 1fr; gap: 22px; padding: 30px 22px; border-radius: 16px; }
  .v20-num b { font-size: 120px; }
  .v20-num span { font-size: 24px; }
  .v20-banner h2 { font-size: 27px; }
  .v20-banner p { font-size: 16px; }
}

/* ---------- distintivo junto al logo ---------- */
.v20-pin { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 46px; height: 46px; margin-left: 10px; border-radius: 50%; background: var(--v20-azul); color: #fff;
  box-shadow: 0 0 0 2px var(--v20-oro); text-decoration: none; line-height: 1; font-family: inherit; }
.v20-pin small { font-size: 7px; font-weight: 700; letter-spacing: .1em; color: var(--v20-oro); }
.v20-pin b { font-size: 18px; font-weight: 800; letter-spacing: -.04em; color: var(--v20-oro); }
.v20-pin i { font-style: normal; font-size: 7px; font-weight: 700; letter-spacing: .1em; }
@media (max-width: 600px) { .v20-pin { display: none; } }

/* ---------- sello en el acceso de empresas ---------- */
.v20-login { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 14px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.18); }
.v20-login-sello { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; background: var(--v20-azul); box-shadow: 0 0 0 3px var(--v20-oro);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; color: #fff; }
.v20-login-sello small { font-size: 8px; font-weight: 700; letter-spacing: .12em; color: var(--v20-oro); }
.v20-login-sello b { font-size: 24px; font-weight: 800; letter-spacing: -.04em; color: var(--v20-oro); }
.v20-login-sello i { font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.v20-login p { margin: 0; font-size: 15px; line-height: 1.45; color: #fff; }
.v20-login p strong { color: var(--v20-oro); }
@media (max-width: 760px) { .v20-login { padding: 10px 12px; } .v20-login-sello { flex-basis: 52px; width: 52px; height: 52px; } .v20-login-sello b { font-size: 20px; } .v20-login p { font-size: 14px; } }