/* Fondo elegido por Joan (2026-11-04): banda de marca arriba, en el petróleo de Massana con la M en negativo; las tarjetas flotan encima. */
.principal { position: relative; isolation: isolate; }
.principal::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 300px; pointer-events: none;
  background: linear-gradient(180deg, var(--petroleo) 0%, #0b5571 62%, var(--fondo) 100%);
}
.principal::after {
  content: ""; position: absolute; z-index: -1; right: 2vw; top: 10px; width: 360px; aspect-ratio: 520 / 456; pointer-events: none;
  background: url("../img/logo-negativo.svg") no-repeat center / contain; opacity: .09;
}
#barra { background: transparent; }
.buscador-global { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .78); box-shadow: none; }
.buscador-global:hover { border-color: rgba(255, 255, 255, .4); }
.buscador-global kbd { background: rgba(255, 255, 255, .14); border-color: transparent; color: #fff; }
#vista > .cabecera h1, #vista > .volver { color: #fff; }
#vista > .cabecera .sobre, #vista > .cabecera .sub { color: rgba(255, 255, 255, .8); }
#vista > .cabecera .sub a { color: #bfe9f6; }
#vista > .cabecera .ayuda { color: rgba(255, 255, 255, .8); }
.lateral { background: var(--petroleo-2); }
#vista > .pasos-flujo { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 8px 12px; box-shadow: var(--sombra); }

@media (max-width: 820px) {
  .principal::before { height: 250px; }
  .principal::after { width: 200px; right: -30px; top: 40px; }
  .cinta-demo { background: var(--petroleo); }
  .barra-logo img { content: url("../img/logo-negativo.svg"); }
}
@media print { .principal::before, .principal::after { display: none; } #vista > .cabecera h1 { color: var(--tinta); } }