/*
 * Paginas de bancos de ensayo (/bancos-de-ensayo/ y una por fabricante).
 * Usan el tema de la web (tipografias, naranja, botones, page-section) y solo
 * cambian lo justo para distinguirse de la portada: cabecera en gris oscuro
 * en vez de marron, texto alineado a la izquierda y columnas de lectura.
 *
 * Todo cuelga de body.bancos (bloque body_clase de base.html), asi que no
 * afecta al resto del sitio. Se carga DESPUES de styles.css; tests_css.py
 * comprueba estas plantillas contra la suma de las dos hojas.
 */

/* Cabecera: misma foto que la portada, con velo gris oscuro y mas baja.
   Se repite la regla entera (y no solo el background) porque background es
   un atajo que resetea position y size; ver CLAUDE.md, seccion CSS. */
.bancos header.masthead {
  background: linear-gradient(to bottom, rgba(33, 37, 41, .9) 0%, rgba(33, 37, 41, .82) 100%), url("../assets/img/bg-masthead.jpg");
  background: linear-gradient(to bottom, rgba(33, 37, 41, .9) 0%, rgba(33, 37, 41, .82) 100%), -webkit-image-set(url("../assets/img/bg-masthead.webp") type("image/webp"), url("../assets/img/bg-masthead.jpg") type("image/jpeg"));
  background: linear-gradient(to bottom, rgba(33, 37, 41, .9) 0%, rgba(33, 37, 41, .82) 100%), image-set(url("../assets/img/bg-masthead.webp") type("image/webp"), url("../assets/img/bg-masthead.jpg") type("image/jpeg"));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (min-width: 992px) {
  .bancos header.masthead {
    height: auto;
    min-height: 0;
    padding-top: 11rem;
    padding-bottom: 6rem;
  }
}

/* Bloques alineados a la izquierda: el divider del tema va centrado. */
.bancos-izq {
  text-align: left;
}
.bancos-izq hr.divider {
  margin-left: 0;
}

.bancos-volver {
  display: inline-block;
  color: rgba(255, 255, 255, .7);
  font-size: .9rem;
  text-decoration: none;
  margin-bottom: 1rem;
}
.bancos-volver:hover {
  color: #fff;
}

.bancos-lectura {
  font-size: 1.05rem;
  line-height: 1.75;
}
.bancos-lectura p {
  margin-bottom: 1.25rem;
}
.bancos-lectura ul {
  padding-left: 1.2rem;
}
.bancos-lectura li {
  margin-bottom: .6rem;
}

/* Lista de fabricantes: filas sencillas, no tarjetas. */
.bancos-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #dee2e6;
}
.bancos-lista li {
  border-bottom: 1px solid #dee2e6;
}
.bancos-lista a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding: 1rem 0;
  color: #212529;
  text-decoration: none;
}
.bancos-lista a:hover .bancos-lista-marca {
  color: #f4623a;
}
.bancos-lista-marca {
  font-family: "Merriweather Sans", sans-serif;
  font-weight: 700;
  transition: color .15s ease;
}
.bancos-lista-modelos {
  color: #6c757d;
}

/* Recuadro lateral de las paginas de fabricante. */
.bancos-recuadro {
  border-left: 3px solid #f4623a;
  background: #f8f9fa;
  padding: 1.5rem 1.75rem;
}
.bancos-recuadro h2 {
  font-size: 1.1rem;
  margin-bottom: .75rem;
}
.bancos-recuadro p {
  margin-bottom: 1rem;
}
.bancos-recuadro p:last-child {
  margin-bottom: 0;
}

.bancos-aviso {
  font-size: .8rem;
  color: #6c757d;
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
  padding: 2rem 0;
}

.bancos-lectura > :last-child {
  margin-bottom: 0;
}