/***** BYmyCAR Barcelona — Portal YunoHost (solo hero) *****/

:root {
  /* Paleta corporativa (plano, sin degradado) */
  --brand-1: #111111;   /* negro */
  --brand-2: #f2c200;   /* acento amarillo */

  /* Colores de texto */
  --text-strong: #0d0f12;
  --text-soft:   #5c6270;

  /* Hero plano (puedes cambiar a amarillo si quieres) */
  --hero-bg: var(--brand-1); /* #f2c200 para hero amarillo */
  --hero-fg: #ffffff;        /* #111 si usas fondo claro/amarillo */

  /* Estética general */
  --radius-xl: 20px;
  --shadow-lg: 0 12px 30px rgba(0,0,0,.18);

  /* Ajuste de tamaño del logo del portal (opcional) */
  --portal-logo-max: 180px;
}

/* No tocamos la cuadrícula de apps nativa de YunoHost */

/* Logo (por si escala raro según tema) */
.portal-logo img, .sso-logo img, header .logo img {
  max-width: var(--portal-logo-max);
  height: auto;
}

/* ====== Hero / cabecera ====== */
.brand-landing { margin: 10px 0 24px; }

.brand-hero{
  position: relative;
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  color: var(--hero-fg);
  background: var(--hero-bg);       /* color plano */
  box-shadow: var(--shadow-lg);
  text-align:center;
  border-top: 4px solid var(--brand-2); /* línea de acento */
}

.brand-hero h1, .brand-hero h2 {
  margin: 0 0 6px;
  line-height: 1.15;
}

.brand-hero .lead {
  margin: .5rem auto .9rem;
  max-width: 60ch;
  opacity: .95;
}

.badges .chip{
  display:inline-block; padding:6px 10px; margin:4px 6px 0;
  border-radius:9999px;
  background: color-mix(in oklab, var(--hero-fg) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--hero-fg) 28%, transparent);
  color: var(--hero-fg);
  font-size:12px;
}

/* Modo oscuro */
@media (prefers-color-scheme: dark){
  :root{
    --text-strong:#e9edf3; --text-soft:#b7bfcc;
  }
}

/* Responsive */
@media (max-width:520px){
  .brand-hero .lead { max-width: 48ch; }
}