/* JDServer-Webs v7.4 — modules/header/header.css
   - BrandTitle grande con estilo Apple-ish
   - Nav bajo el título, responsive sin romper
   - Subtítulo + estación del año en la misma fila
   - Fila de chips: Estación / Idioma / Tema
   - Logos unificados para todos los slugs:
     tarjeta blanca, padding, object-fit contain y sin zoom/recorte
   - Nav uniforme para todos los botones
   - Halo sutil SOLO para Tráfico
*/

#site-header {
  position: relative;
  z-index: 30;
  backdrop-filter: blur(10px);
  background:
    radial-gradient(1200px 200px at 50% -40%, var(--brand-50, color-mix(in oklab, var(--brand, #10b981) 12%, transparent)), transparent 70%),
    linear-gradient(180deg, var(--brand-100, color-mix(in oklab, var(--brand, #10b981) 20%, transparent)), transparent 40%);
  box-shadow: var(--shadow-2);
  border-bottom: 1px solid var(--border);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

/* =========================================================
   LOGOS UNIFICADOS
   Todos los slugs quedan con el formato tipo MeteoCerdanyola:
   - caja blanca
   - padding interior
   - logo completo visible
   - sin zoom
   ========================================================= */

.brand-logo-wrap{
  width: 74px;
  height: 74px;
  border-radius: 20px;
  background: #fff;
  padding: 6px;
  border: 1px solid color-mix(in oklab, var(--brand, #10b981) 25%, transparent);
  box-shadow:
    0 18px 44px rgba(0,0,0,.22),
    0 0 0 10px color-mix(in oklab, var(--brand, #10b981) 8%, transparent);
  overflow: hidden;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.brand-logo-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none !important;
  transform-origin: center;
  display: block;
}

/* ========================================================= */

.brand-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.brand-row.title-row {
  align-items: center;
}

.brand-row.sub-row {
  align-items: center;
  gap: 8px;
}

.brand-title strong {
  font-size: 1.74rem;
  line-height: 1.2;
  letter-spacing: .1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-title .brand-subtitle {
  color: var(--muted);
  font-size: 1.0rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-partners-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  max-width: 100%;
  margin-left: 14px;
  flex-wrap: nowrap;
}

.brand-partners-inline img {
  height: 34px;
  max-width: 150px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--card);
  padding: 2px 5px;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.season-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .26rem .60rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 80%, var(--brand, #10b981) 20%);
  font-size: .84rem;
  color: var(--fg, var(--text));
  white-space: nowrap;
}

.season-pill .season-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.season-pill .season-icon svg{
  width: 18px;
  height: 18px;
  display:block;
}

.season-pill .season-label {
  font-weight: 500;
}

.season-pill.season-winter { --season-accent: #60a5fa; }
.season-pill.season-spring { --season-accent: #4ade80; }
.season-pill.season-summer { --season-accent: #fbbf24; }
.season-pill.season-autumn { --season-accent: #fb7185; }

.season-pill .season-icon{
  color: color-mix(in oklab, var(--season-accent, var(--brand, #10b981)) 78%, var(--fg, #111) 22%);
  filter:
    drop-shadow(0 1px 4px rgba(0,0,0,.10))
    drop-shadow(0 0 8px color-mix(in oklab, var(--season-accent, #999) 35%, transparent));
}

@keyframes seasonSpinSoft {
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}

@keyframes seasonFloat {
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-1.5px); }
}

@keyframes seasonPulse {
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}

@keyframes seasonShimmer {
  0%,70%{ opacity:.25; }
  85%{ opacity:1; }
  100%{ opacity:.25; }
}

.season-pill .season-svg{
  transform-origin: 50% 50%;
}

.season-pill.season-summer .sun-rays{
  animation: seasonSpinSoft 10s linear infinite;
  transform-origin: 12px 12px;
}

.season-pill.season-winter .season-svg{
  animation: seasonFloat 2.6s ease-in-out infinite;
}

@keyframes springLeafFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-1px) rotate(-3deg); }
}

@keyframes springVeinGlow {
  0%,100% { opacity: .88; }
  50%     { opacity: 1; }
}

.season-pill.season-spring .season-svg{
  animation: springLeafFloat 3s ease-in-out infinite;
  transform-origin: 12px 12px;
}

.season-pill.season-spring .leaf-body{
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--season-accent, #4ade80) 24%, transparent));
}

.season-pill.season-spring .leaf-vein,
.season-pill.season-spring .leaf-vein-soft{
  animation: springVeinGlow 3s ease-in-out infinite;
}

.season-pill.season-spring .leaf-vein-soft{
  opacity: .82;
}

.season-pill.season-autumn .vein{
  animation: seasonShimmer 3.2s ease-in-out infinite;
}

.header-actions .btn.ghost,
.header-actions .dropdown > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .20rem .55rem;
}

.header-actions .chip-current {
  font-size: .80rem;
  color: var(--muted);
}

.dropdown {
  position: relative;
}

.dropdown > summary {
  list-style: none;
  cursor: pointer;
  outline: none;
}

.dropdown > summary::-webkit-details-marker {
  display: none;
}

.dropdown > summary:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand, #10b981) 30%, transparent);
  border-radius: 10px;
}

.dropdown .menu {
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100% + 8px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  padding: 6px;
  min-width: 180px;
  z-index: 60;
  max-width: 320px;
  overflow: auto;
  max-height: 60vh;
}

.menu a,
.menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--fg, var(--text));
  padding: .55rem .65rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .95rem;
  outline: none;
}

.menu a.active,
.menu button.active,
.menu a:hover,
.menu button:hover {
  background: rgba(0,0,0,.05);
}

.menu a:focus-visible,
.menu button:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand, #10b981) 30%, transparent);
}

@media (prefers-color-scheme: dark) {
  .menu a.active,
  .menu button.active,
  .menu a:hover,
  .menu button:hover {
    background: rgba(255,255,255,.06);
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .30rem;
  padding: .16rem .42rem;
  font-size: .76rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
}

.header-nav {
  border-top: 1px solid var(--border);
  padding: 10px 0 14px;
}

.nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.nav a {
  padding: .45rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg, var(--text));
  font-size: .92rem;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
  outline: none;
}

.nav a:hover {
  background: var(--brand-50, color-mix(in oklab, var(--brand, #10b981) 12%, transparent));
  border-color: var(--brand-200, color-mix(in oklab, var(--brand, #10b981) 30%, transparent));
}

.nav a:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand, #10b981) 30%, transparent);
}

.nav a.active {
  background: linear-gradient(180deg, var(--brand-accent, var(--brand, #10b981)), var(--brand, #10b981));
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* =========================================================
   RESPONSIVE
   Mantiene el mismo formato de logo en todos los slugs
   ========================================================= */

@media (max-width: 880px) {
  .brand-logo-wrap{
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: #fff;
    padding: 6px;
    box-shadow:
      0 16px 40px rgba(0,0,0,.22),
      0 0 0 9px color-mix(in oklab, var(--brand, #10b981) 8%, transparent);
  }

  .brand-logo-img{
    object-fit: contain;
    transform: none !important;
  }

  .brand-title strong {
    font-size: 1.34rem;
  }

  .brand-title .brand-subtitle {
    font-size: .94rem;
  }

  .header-bar{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .header-actions{
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
  }

  .season-pill {
    font-size: .80rem;
    padding: .24rem .52rem;
  }

  .brand-partners-inline {
    margin-left: 10px;
    gap: 6px;
  }

  .brand-partners-inline img {
    height: 28px;
    max-width: 130px;
  }

  .nav a {
    font-size: .9rem;
    padding: .42rem .62rem;
  }
}

@media (max-width: 520px) {
  .brand {
    gap: 12px;
  }

  .brand-logo-wrap {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    background: #fff;
    padding: 5px;
    box-shadow:
      0 14px 34px rgba(0,0,0,.22),
      0 0 0 8px color-mix(in oklab, var(--brand, #10b981) 8%, transparent);
  }

  .brand-logo-img {
    object-fit: contain;
    transform: none !important;
  }

  .brand-title strong {
    font-size: 1.70rem;
  }

  .brand-title .brand-subtitle {
    font-size: .90rem;
  }

  .dropdown .menu{
    left: 0;
    right: auto;
    width: min(320px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }

  :root[data-site="santvicenc_montalt"] .brand-row.sub-row{
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  :root[data-site="santvicenc_montalt"] .brand-partners-inline{
    margin-left: 0;
    gap: 8px;
    align-items: center;
  }

  :root[data-site="santvicenc_montalt"] .brand-partners-inline img{
    height: 26px;
    max-width: 140px;
    padding: 2px 6px;
    border-radius: 10px;
  }

  .nav a {
    font-size: .86rem;
  }
}

/* =========================================================
   MODO OSCURO / TEXTOS
   ========================================================= */

:root[data-theme="dark"] #site-header .brand-title .brand-subtitle,
html[data-theme="dark"]  #site-header .brand-title .brand-subtitle,
html.dark                #site-header .brand-title .brand-subtitle,
body.dark                #site-header .brand-title .brand-subtitle {
  color: rgba(255,255,255,.92);
}

:root[data-theme="light"] #site-header .brand-title .brand-subtitle,
html[data-theme="light"]  #site-header .brand-title .brand-subtitle {
  color: var(--muted);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) #site-header .brand-title .brand-subtitle,
  html:not([data-theme])  #site-header .brand-title .brand-subtitle {
    color: rgba(255,255,255,.92);
  }
}

#site-header .header-actions .chip-current{
  color: var(--muted);
}

:root[data-theme="dark"] #site-header .header-actions .chip-current,
html[data-theme="dark"]  #site-header .header-actions .chip-current,
html.dark                #site-header .header-actions .chip-current,
body.dark                #site-header .header-actions .chip-current{
  color: rgba(255,255,255,.92);
}

:root[data-theme="light"] #site-header .header-actions .chip-current,
html[data-theme="light"]  #site-header .header-actions .chip-current{
  color: var(--muted);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #site-header .header-actions .chip-current,
  html:not([data-theme])  #site-header .header-actions .chip-current{
    color: rgba(255,255,255,.92);
  }
}

#site-header .brand-title strong{
  color: var(--fg, var(--text));
}

:root[data-theme="dark"] #site-header .brand-title strong,
html[data-theme="dark"]  #site-header .brand-title strong,
html.dark                #site-header .brand-title strong,
body.dark                #site-header .brand-title strong {
  color: rgba(255,255,255,.92);
}

:root[data-theme="light"] #site-header .brand-title strong,
html[data-theme="light"]  #site-header .brand-title strong {
  color: var(--fg, var(--text));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) #site-header .brand-title strong,
  html:not([data-theme])  #site-header .brand-title strong {
    color: rgba(255,255,255,.92);
  }
}

/* =========================================================
   ICONOS DE ESTACIÓN
   ========================================================= */

#site-header .season-pill .season-icon{
  width: 22px;
  height: 22px;
}

#site-header .season-pill .season-icon svg{
  width: 22px;
  height: 22px;
}

@media (max-width: 520px){
  #site-header .season-pill .season-icon{
    width: 21px;
    height: 21px;
  }

  #site-header .season-pill .season-icon svg{
    width: 21px;
    height: 21px;
  }
}

#site-header .season-pill.season-winter{
  --season-accent: #53B4D1;
}

#site-header .season-pill.season-winter .season-icon{
  color: color-mix(in oklab, var(--season-accent) 88%, rgba(255,255,255,.92) 12%);
  filter:
    drop-shadow(0 1px 4px rgba(0,0,0,.08))
    drop-shadow(0 0 10px color-mix(in oklab, var(--season-accent) 48%, transparent));
}


/* =========================================================
   BRAND TITLE FINAL — degradado estable por slug
   Claro: negro -> color del slug
   Oscuro: blanco -> color del slug
   Sin bloques, sin stroke, sin artefactos raros.
   ========================================================= */

#site-header .brand-title strong{
  display: inline-block;
  width: auto;
  max-width: 100%;

  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;

  color: var(--fg, #0f172a);
  background: none !important;

  -webkit-text-fill-color: initial !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.30),
    0 3px 10px rgba(15,23,42,.10);

  filter: none !important;
}

/* Degradado solo si el navegador soporta background-clip:text */
@supports (-webkit-background-clip: text) {
  #site-header .brand-title strong{
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;

    background-image:
      linear-gradient(
        90deg,
        #0f172a 0%,
        #0f172a 34%,
        color-mix(in oklab, #0f172a 68%, var(--brand-500, var(--brand, #0ea5e9)) 32%) 58%,
        var(--brand-500, var(--brand, #0ea5e9)) 82%,
        var(--brand-400, var(--brand-accent, var(--brand, #38bdf8))) 100%
      ) !important;

    text-shadow: none !important;
    filter:
      drop-shadow(0 1px 0 rgba(15,23,42,.16))
      drop-shadow(0 3px 7px rgba(15,23,42,.08)) !important;
  }
}

/* Oscuro explícito */
:root[data-theme="dark"] #site-header .brand-title strong,
html[data-theme="dark"] #site-header .brand-title strong,
html.dark #site-header .brand-title strong,
body.dark #site-header .brand-title strong{
  color: rgba(255,255,255,.96);
  text-shadow:
    0 1px 0 rgba(2,6,23,.38),
    0 4px 14px rgba(2,6,23,.26);
}

@supports (-webkit-background-clip: text) {
  :root[data-theme="dark"] #site-header .brand-title strong,
  html[data-theme="dark"] #site-header .brand-title strong,
  html.dark #site-header .brand-title strong,
  body.dark #site-header .brand-title strong{
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    background-image:
      linear-gradient(
        90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.98) 34%,
        color-mix(in oklab, rgba(255,255,255,.96) 66%, var(--brand-400, var(--brand, #38bdf8)) 34%) 58%,
        color-mix(in oklab, var(--brand-400, var(--brand-accent, var(--brand, #38bdf8))) 88%, white 12%) 82%,
        color-mix(in oklab, var(--brand-500, var(--brand, #0ea5e9)) 84%, white 16%) 100%
      ) !important;

    filter:
      drop-shadow(0 1px 0 rgba(2,6,23,.36))
      drop-shadow(0 3px 8px rgba(2,6,23,.24))
      drop-shadow(0 8px 18px rgba(2,6,23,.14)) !important;
  }
}

/* Auto oscuro si no hay tema manual */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #site-header .brand-title strong,
  html:not([data-theme]) #site-header .brand-title strong{
    color: rgba(255,255,255,.96);
    text-shadow:
      0 1px 0 rgba(2,6,23,.38),
      0 4px 14px rgba(2,6,23,.26);
  }

  @supports (-webkit-background-clip: text) {
    :root:not([data-theme]) #site-header .brand-title strong,
    html:not([data-theme]) #site-header .brand-title strong{
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;

      background-image:
        linear-gradient(
          90deg,
          rgba(255,255,255,.98) 0%,
          rgba(255,255,255,.98) 34%,
          color-mix(in oklab, rgba(255,255,255,.96) 66%, var(--brand-400, var(--brand, #38bdf8)) 34%) 58%,
          color-mix(in oklab, var(--brand-400, var(--brand-accent, var(--brand, #38bdf8))) 88%, white 12%) 82%,
          color-mix(in oklab, var(--brand-500, var(--brand, #0ea5e9)) 84%, white 16%) 100%
        ) !important;

      filter:
        drop-shadow(0 1px 0 rgba(2,6,23,.36))
        drop-shadow(0 3px 8px rgba(2,6,23,.24))
        drop-shadow(0 8px 18px rgba(2,6,23,.14)) !important;
    }
  }
}

/* Subtítulo coherente */
:root[data-theme="light"] #site-header .brand-title .brand-subtitle,
html[data-theme="light"] #site-header .brand-title .brand-subtitle{
  color: rgba(15,23,42,.72) !important;
  text-shadow: 0 1px 3px rgba(15,23,42,.08) !important;
}

:root[data-theme="dark"] #site-header .brand-title .brand-subtitle,
html[data-theme="dark"] #site-header .brand-title .brand-subtitle,
html.dark #site-header .brand-title .brand-subtitle,
body.dark #site-header .brand-title .brand-subtitle{
  color: rgba(255,255,255,.94) !important;
  text-shadow: 0 1px 8px rgba(2,6,23,.24) !important;
}


/* =========================================================
   FIX móvil — desplegables compactos en cabecera
   Idioma/Tema no necesitan ocupar media pantalla.
   Estación conserva algo más de ancho si hay nombres largos.
   ========================================================= */

@media (max-width: 520px) {
  #site-header .dropdown .menu {
    width: auto !important;
    min-width: 132px !important;
    max-width: min(220px, calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;

    left: 0 !important;
    right: auto !important;

    padding: 5px !important;
    border-radius: 14px !important;
  }

  #site-header .dropdown .menu a,
  #site-header .dropdown .menu button {
    padding: .52rem .70rem !important;
    font-size: .94rem !important;
    white-space: nowrap !important;
  }

  /* Idioma: CA / VA / ES compacto */
  #site-header .header-actions .dropdown:has(.chip-current[data-role="lang"]) .menu {
    min-width: 112px !important;
    max-width: 132px !important;
  }

  #site-header .header-actions .dropdown:has(.chip-current[data-role="lang"]) .menu button {
    justify-content: flex-start !important;
  }

  /* Estación: un poco más ancho porque puede tener nombres largos */
  #site-header .header-actions .dropdown:has([data-i18n="lbl_station"]) .menu {
    min-width: 190px !important;
    max-width: min(260px, calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
  }
}

/* Fallback por si algún navegador antiguo no soporta :has().
   El dropdown de idioma es el segundo/único habitual tras estación. */
@supports not selector(:has(*)) {
  @media (max-width: 520px) {
    #site-header .header-actions .dropdown .menu {
      min-width: 132px !important;
      max-width: 180px !important;
    }
  }
}


/* =========================================================
   Nav destacado — Rànquings històrics como novedad
   ========================================================= */

#site-header .nav a.nav-new{
  position:relative;
  border-color: color-mix(in oklab, var(--brand, #10b981) 38%, var(--border));
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--brand, #10b981) 13%, var(--card)) 0%,
      color-mix(in oklab, var(--brand, #10b981) 7%, var(--card)) 100%
    );
  box-shadow:
    0 4px 14px rgba(2,6,23,.06),
    0 0 0 1px color-mix(in oklab, var(--brand, #10b981) 10%, transparent) inset;
}

#site-header .nav a.nav-new::after{
  content:"Nou";
  display:inline-flex;
  align-items:center;
  margin-left:.42rem;
  padding:.10rem .34rem;
  border-radius:999px;
  font-size:.66rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.01em;
  color:white;
  background:linear-gradient(180deg, var(--brand-accent, var(--brand, #10b981)), var(--brand, #10b981));
  box-shadow:0 2px 8px rgba(2,6,23,.18);
  vertical-align:middle;
}

html[lang^="es"] #site-header .nav a.nav-new::after{
  content:"Nuevo";
}

html[lang^="va"] #site-header .nav a.nav-new::after{
  content:"Nou";
}

#site-header .nav a.nav-new.active::after{
  background:rgba(255,255,255,.22);
  color:white;
  box-shadow:none;
  border:1px solid rgba(255,255,255,.28);
}

@media (max-width: 520px){
  #site-header .nav a.nav-new::after{
    font-size:.62rem;
    padding:.09rem .30rem;
    margin-left:.32rem;
  }
}

/* =========================================================
   FIX móvil nav — consistencia iOS/Android
   Evita que Rànquings + Nou rompa la estética del menú.
   ========================================================= */

@media (max-width: 520px) {
  #site-header .header-nav{
    padding-top: 10px;
    padding-bottom: 14px;
  }

  #site-header .nav{
    justify-content: center;
    gap: 8px 7px;
    width: 100%;
  }

  #site-header .nav a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .42rem .66rem;
    font-size: .86rem;
    line-height: 1.1;
    white-space: nowrap;
  }

  /* La etiqueta Nou/Nuevo no debe ensanchar demasiado el botón */
  #site-header .nav a.nav-new{
    padding-right: .52rem;
  }

  #site-header .nav a.nav-new::after{
    margin-left: .28rem;
    padding: .08rem .28rem;
    font-size: .58rem;
    transform: translateY(-1px);
  }
}

/* Android / móviles estrechos: modo todavía más compacto */
@media (max-width: 390px) {
  #site-header .nav{
    gap: 7px 6px;
  }

  #site-header .nav a{
    min-height: 36px;
    padding: .39rem .58rem;
    font-size: .82rem;
  }

  #site-header .nav a.nav-new::after{
    margin-left: .22rem;
    padding: .07rem .24rem;
    font-size: .55rem;
  }
}

/* Móviles muy estrechos: centrado y sin desbordes raros */
@media (max-width: 360px) {
  #site-header .nav a{
    padding-inline: .52rem;
    font-size: .80rem;
  }

  #site-header .nav a.nav-new::after{
    content: "Nou";
  }

  html[lang^="es"] #site-header .nav a.nav-new::after{
    content: "New";
  }
}

/* =========================================================
   FIX final nav móvil — alineado izquierda + Rànquings activo legible
   ========================================================= */

@media (max-width: 520px) {
  #site-header .nav{
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 8px 7px !important;
  }

  #site-header .nav a{
    text-align: left;
  }
}

/* Rànquings como novedad, pero sin perder legibilidad */
#site-header .nav a.nav-new{
  color: var(--fg, var(--text)) !important;
}

/* Cuando estamos dentro de rankings.html: activo pero legible en marcas amarillas */
#site-header .nav a.nav-new.active{
  color: #111827 !important;
  border-color: color-mix(in oklab, var(--brand, #f59e0b) 46%, rgba(15,23,42,.16)) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--brand-accent, var(--brand, #f59e0b)) 34%, white 66%) 0%,
      color-mix(in oklab, var(--brand, #f59e0b) 24%, white 76%) 100%
    ) !important;
  box-shadow:
    0 6px 18px color-mix(in oklab, var(--brand, #f59e0b) 22%, transparent),
    0 0 0 1px rgba(255,255,255,.58) inset !important;
}

/* Badge Nou/Nuevo dentro del botón activo */
#site-header .nav a.nav-new.active::after{
  color: #111827 !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--brand, #f59e0b) 58%, white 42%),
      color-mix(in oklab, var(--brand, #f59e0b) 72%, white 28%)
    ) !important;
  border: 1px solid color-mix(in oklab, var(--brand, #f59e0b) 42%, rgba(15,23,42,.18)) !important;
  box-shadow: 0 2px 8px rgba(2,6,23,.10) !important;
}

/* En modo oscuro, mantenemos contraste sin que parezca apagado */
:root[data-theme="dark"] #site-header .nav a.nav-new.active,
html[data-theme="dark"] #site-header .nav a.nav-new.active,
html.dark #site-header .nav a.nav-new.active,
body.dark #site-header .nav a.nav-new.active{
  color: rgba(255,255,255,.96) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--brand, #f59e0b) 54%, rgba(15,23,42,.92) 46%) 0%,
      color-mix(in oklab, var(--brand, #f59e0b) 36%, rgba(15,23,42,.96) 64%) 100%
    ) !important;
  border-color: color-mix(in oklab, var(--brand, #f59e0b) 48%, rgba(255,255,255,.18)) !important;
}

:root[data-theme="dark"] #site-header .nav a.nav-new.active::after,
html[data-theme="dark"] #site-header .nav a.nav-new.active::after,
html.dark #site-header .nav a.nav-new.active::after,
body.dark #site-header .nav a.nav-new.active::after{
  color: rgba(255,255,255,.96) !important;
  background: color-mix(in oklab, var(--brand, #f59e0b) 58%, rgba(15,23,42,.80)) !important;
  border-color: rgba(255,255,255,.20) !important;
}

/* =========================================================
   FIX definitivo — badge Nou/Nuevo siempre en blanco
   ========================================================= */

#site-header .nav a.nav-new::after,
#site-header .nav a.nav-new.active::after,
:root[data-theme="dark"] #site-header .nav a.nav-new::after,
html[data-theme="dark"] #site-header .nav a.nav-new::after,
html.dark #site-header .nav a.nav-new::after,
body.dark #site-header .nav a.nav-new::after,
:root[data-theme="dark"] #site-header .nav a.nav-new.active::after,
html[data-theme="dark"] #site-header .nav a.nav-new.active::after,
html.dark #site-header .nav a.nav-new.active::after,
body.dark #site-header .nav a.nav-new.active::after{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(2,6,23,.22) !important;
}


/* =========================================================
   FIX final — Rankings destacado, pero activo como el resto
   - En reposo conserva el resaltado "Nuevo/Nou"
   - En rankings.html se comporta igual que cualquier botón activo
   ========================================================= */

#site-header .nav a.nav-new.active{
  background: linear-gradient(180deg, var(--brand-accent, var(--brand, #10b981)), var(--brand, #10b981)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}

#site-header .nav a.nav-new.active::after{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(255,255,255,.22) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: none !important;
  text-shadow: 0 1px 2px rgba(2,6,23,.22) !important;
}

:root[data-theme="dark"] #site-header .nav a.nav-new.active,
html[data-theme="dark"] #site-header .nav a.nav-new.active,
html.dark #site-header .nav a.nav-new.active,
body.dark #site-header .nav a.nav-new.active{
  background: linear-gradient(180deg, var(--brand-accent, var(--brand, #10b981)), var(--brand, #10b981)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: transparent !important;
}

:root[data-theme="dark"] #site-header .nav a.nav-new.active::after,
html[data-theme="dark"] #site-header .nav a.nav-new.active::after,
html.dark #site-header .nav a.nav-new.active::after,
body.dark #site-header .nav a.nav-new.active::after{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(255,255,255,.22) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
}

/* =========================================================
   Header v2 beta — navegación agrupada en menú desplegable
   ========================================================= */

#site-header .nav.nav-v2{
  position: relative;
  align-items: center;
  gap: 8px;
}

#site-header .nav-menu-v2{
  position: relative;
  display: inline-flex;
}

#site-header .nav-menu-v2 > summary{
  list-style: none;
}

#site-header .nav-menu-v2 > summary::-webkit-details-marker{
  display: none;
}

#site-header .nav-menu-v2-summary{
  display: inline-flex;
  align-items: center;
  gap: .52rem;
  min-height: 38px;
  padding: .45rem .78rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--brand, #10b981) 26%, var(--border));
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--card) 86%, var(--brand, #10b981) 14%) 0%,
      color-mix(in oklab, var(--card) 94%, var(--brand, #10b981) 6%) 100%
    );
  color: var(--fg, var(--text));
  cursor: pointer;
  user-select: none;
  box-shadow:
    0 4px 16px rgba(2,6,23,.06),
    0 0 0 1px color-mix(in oklab, var(--brand, #10b981) 8%, transparent) inset;
  transition:
    transform .18s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

#site-header .nav-menu-v2-summary:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--brand, #10b981) 42%, var(--border));
  box-shadow:
    0 8px 24px rgba(2,6,23,.10),
    0 0 0 1px color-mix(in oklab, var(--brand, #10b981) 14%, transparent) inset;
}

#site-header .nav-menu-v2-summary.active{
  background: linear-gradient(180deg, var(--brand-accent, var(--brand, #10b981)), var(--brand, #10b981));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

#site-header .nav-menu-v2-icon{
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
}

#site-header .nav-menu-v2-icon span{
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: .92;
}

#site-header .nav-menu-v2-text{
  font-weight: 650;
}

#site-header .nav-menu-v2-chevron{
  font-size: .90rem;
  line-height: 1;
  opacity: .78;
  transform: translateY(-1px);
  transition: transform .2s ease;
}

#site-header .nav-menu-v2[open] .nav-menu-v2-chevron{
  transform: rotate(180deg) translateY(1px);
}

#site-header .nav-menu-v2-panel{
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 80;

  width: min(760px, calc(100vw - 32px));
  padding: 14px;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;

  border: 1px solid color-mix(in oklab, var(--brand, #10b981) 18%, var(--border));
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in oklab, var(--brand, #10b981) 13%, transparent), transparent 38%),
    color-mix(in oklab, var(--card) 94%, white 6%);
  box-shadow:
    0 24px 70px rgba(2,6,23,.18),
    0 0 0 1px rgba(255,255,255,.28) inset;
  backdrop-filter: blur(18px);

  transform-origin: 20px 0;
  animation: navMenuV2In .18s ease-out both;
}

@keyframes navMenuV2In{
  from{
    opacity: 0;
    transform: translateY(-6px) scale(.985);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#site-header .nav-menu-v2-group{
  min-width: 0;
  padding: 12px;
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--card) 92%, var(--brand, #10b981) 8%),
      color-mix(in oklab, var(--card) 98%, var(--brand, #10b981) 2%)
    );
  border: 1px solid color-mix(in oklab, var(--brand, #10b981) 12%, var(--border));
}

#site-header .nav-menu-v2-title{
  margin: 0 0 9px;
  padding: 0 .18rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--brand, #10b981) 58%, var(--muted));
}

#site-header .nav-menu-v2-links{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#site-header .nav-menu-v2-links a{
  font-size: .88rem;
  padding: .42rem .64rem;
}

#site-header .nav-menu-v2-links a.active{
  background: linear-gradient(180deg, var(--brand-accent, var(--brand, #10b981)), var(--brand, #10b981));
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: transparent;
}

/* Oscuro */
:root[data-theme="dark"] #site-header .nav-menu-v2-panel,
html[data-theme="dark"] #site-header .nav-menu-v2-panel,
html.dark #site-header .nav-menu-v2-panel,
body.dark #site-header .nav-menu-v2-panel{
  background:
    radial-gradient(circle at 0% 0%, color-mix(in oklab, var(--brand, #10b981) 20%, transparent), transparent 40%),
    color-mix(in oklab, var(--card) 88%, rgba(15,23,42,.92) 12%);
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

/* Móvil: menú a ancho completo, cómodo de tocar */
@media (max-width: 520px){
  #site-header .nav.nav-v2{
    justify-content: flex-start !important;
    width: 100%;
  }

  #site-header .nav-menu-v2{
    position: static;
  }

  #site-header .nav-menu-v2-summary{
    min-height: 46px;
    padding: .56rem .86rem;
    font-size: .96rem;
  }

  #site-header .nav-menu-v2-panel{
    left: 0;
    right: auto;
    width: calc(100vw - 32px);
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: 22px;
  }

  #site-header .nav-menu-v2-group{
    padding: 11px;
    border-radius: 17px;
  }

  #site-header .nav-menu-v2-links{
    gap: 8px;
  }

  #site-header .nav-menu-v2-links a{
    min-height: 38px;
    font-size: .88rem;
    padding: .42rem .62rem;
  }
}

@media (max-width: 390px){
  #site-header .nav-menu-v2-panel{
    width: calc(100vw - 24px);
    padding: 10px;
  }

  #site-header .nav-menu-v2-links a{
    font-size: .84rem;
    padding: .38rem .56rem;
  }
}


/* =========================================================
   Header v2 — botón visible de página actual
   Principal + página actual + Menú
   ========================================================= */

#site-header .nav.nav-v2 > a.nav-current-page-v2{
  position: relative;
  font-weight: 720;
  border-color: color-mix(in oklab, var(--brand, #10b981) 42%, var(--border));
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--brand-accent, var(--brand, #10b981)) 18%, var(--card) 82%),
      color-mix(in oklab, var(--brand, #10b981) 10%, var(--card) 90%)
    );
  box-shadow:
    0 5px 18px color-mix(in oklab, var(--brand, #10b981) 12%, transparent),
    0 0 0 1px color-mix(in oklab, var(--brand, #10b981) 10%, transparent) inset;
}

/* Como ya representa la página actual, lo dejamos activo real */
#site-header .nav.nav-v2 > a.nav-current-page-v2.active{
  background: linear-gradient(180deg, var(--brand-accent, var(--brand, #10b981)), var(--brand, #10b981)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: transparent !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,.15),
    0 10px 28px color-mix(in oklab, var(--brand, #10b981) 18%, transparent) !important;
}

/* Si la página actual también tiene Nou/Nuevo, el badge sigue elegante */
#site-header .nav.nav-v2 > a.nav-current-page-v2.nav-new::after{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Móvil: que Principal + actual + Menú respiren bien */
@media (max-width: 520px){
  #site-header .nav.nav-v2 > a.nav-current-page-v2{
    min-height: 46px;
    padding: .56rem .86rem;
    font-size: .96rem;
  }
}

@media (max-width: 390px){
  #site-header .nav.nav-v2 > a.nav-current-page-v2{
    min-height: 42px;
    padding: .48rem .70rem;
    font-size: .88rem;
  }
}


/* =========================================================
   Header v2.1 — alineación fina nav
   - Botón Menú con la misma altura que los demás
   - Botones de página a la izquierda
   - Menú a la derecha
   ========================================================= */

#site-header .nav.nav-v2{
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 8px !important;
}

/* El menú se empuja a la derecha */
#site-header .nav.nav-v2 .nav-menu-v2{
  margin-left: auto !important;
}

/* Altura común para botones normales y menú */
#site-header .nav.nav-v2 > a,
#site-header .nav-menu-v2-summary{
  box-sizing: border-box !important;
  min-height: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: .42rem .72rem !important;
  line-height: 1 !important;
}

/* El summary del menú hereda ahora el tamaño, sin irse de fiesta */
#site-header .nav-menu-v2-summary{
  gap: .50rem !important;
}

/* Icono hamburguesa centrado respecto al texto */
#site-header .nav-menu-v2-icon{
  justify-content: center !important;
}

/* Flecha sin descentrar verticalmente */
#site-header .nav-menu-v2-chevron{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 1em !important;
  transform: none !important;
}

#site-header .nav-menu-v2[open] .nav-menu-v2-chevron{
  transform: rotate(180deg) !important;
}

/* En móvil mantenemos el mismo criterio visual:
   izquierda = navegación actual
   derecha = menú */
@media (max-width: 520px){
  #site-header .nav.nav-v2{
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #site-header .nav.nav-v2 .nav-menu-v2{
    margin-left: auto !important;
  }

  #site-header .nav.nav-v2 > a,
  #site-header .nav-menu-v2-summary{
    min-height: 42px !important;
    height: 42px !important;
    padding: .48rem .72rem !important;
    font-size: .90rem !important;
    line-height: 1 !important;
  }

  #site-header .nav.nav-v2 > a.nav-current-page-v2{
    min-height: 42px !important;
    height: 42px !important;
    padding: .48rem .72rem !important;
    font-size: .90rem !important;
  }

  #site-header .nav-menu-v2-summary{
    min-height: 42px !important;
    height: 42px !important;
    padding: .48rem .72rem !important;
    font-size: .90rem !important;
  }
}

/* En móviles estrechos compactamos un pelín para que no rompa */
@media (max-width: 390px){
  #site-header .nav.nav-v2{
    gap: 6px !important;
  }

  #site-header .nav.nav-v2 > a,
  #site-header .nav-menu-v2-summary,
  #site-header .nav.nav-v2 > a.nav-current-page-v2{
    min-height: 40px !important;
    height: 40px !important;
    padding: .44rem .62rem !important;
    font-size: .84rem !important;
  }

  #site-header .nav-menu-v2-icon{
    width: 14px !important;
  }

  #site-header .nav-menu-v2-icon span{
    width: 14px !important;
  }
}

/* Si el ancho es muy justo, el Menú conserva su sitio a la derecha */
@media (max-width: 350px){
  #site-header .nav.nav-v2 > a,
  #site-header .nav-menu-v2-summary,
  #site-header .nav.nav-v2 > a.nav-current-page-v2{
    padding-inline: .52rem !important;
    font-size: .80rem !important;
  }
}


/* =========================================================
   Header v2.2 — ajuste fino compacto
   - Botones menos altos
   - Reborde menos redondo
   - Menú no se destaca aunque estemos en página secundaria
   - Apertura del menú con animación más suave
   ========================================================= */

/* Botones principales más compactos y menos "pill" */
#site-header .nav.nav-v2 > a,
#site-header .nav-menu-v2-summary{
  min-height: 34px !important;
  height: 34px !important;
  padding: .34rem .68rem !important;
  border-radius: 14px !important;
  line-height: 1 !important;
}

/* El botón de página actual conserva protagonismo, pero con la nueva forma */
#site-header .nav.nav-v2 > a.nav-current-page-v2,
#site-header .nav.nav-v2 > a.nav-current-page-v2.active{
  min-height: 34px !important;
  height: 34px !important;
  padding: .34rem .68rem !important;
  border-radius: 14px !important;
}

/* El botón Menú se queda neutro aunque estemos en una secundaria */
#site-header .nav-menu-v2-summary.active{
  color: var(--fg, var(--text)) !important;
  -webkit-text-fill-color: initial !important;
  border-color: color-mix(in oklab, var(--brand, #10b981) 26%, var(--border)) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--card) 86%, var(--brand, #10b981) 14%) 0%,
      color-mix(in oklab, var(--card) 94%, var(--brand, #10b981) 6%) 100%
    ) !important;
  box-shadow:
    0 4px 16px rgba(2,6,23,.06),
    0 0 0 1px color-mix(in oklab, var(--brand, #10b981) 8%, transparent) inset !important;
}

/* En oscuro, Menú también neutro y legible */
:root[data-theme="dark"] #site-header .nav-menu-v2-summary.active,
html[data-theme="dark"] #site-header .nav-menu-v2-summary.active,
html.dark #site-header .nav-menu-v2-summary.active,
body.dark #site-header .nav-menu-v2-summary.active{
  color: rgba(255,255,255,.94) !important;
  -webkit-text-fill-color: rgba(255,255,255,.94) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--card) 82%, var(--brand, #10b981) 18%) 0%,
      color-mix(in oklab, var(--card) 94%, var(--brand, #10b981) 6%) 100%
    ) !important;
  border-color: color-mix(in oklab, var(--brand, #10b981) 30%, var(--border)) !important;
}

/* Hover fino del menú, sin convertirse en botón activo */
#site-header .nav-menu-v2-summary:hover,
#site-header .nav-menu-v2-summary.active:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--brand, #10b981) 42%, var(--border)) !important;
  box-shadow:
    0 8px 24px rgba(2,6,23,.10),
    0 0 0 1px color-mix(in oklab, var(--brand, #10b981) 14%, transparent) inset !important;
}

/* Menú desplegable: esquinas un poco menos redondas */
#site-header .nav-menu-v2-panel{
  border-radius: 20px !important;
  animation: navMenuV2SoftIn .24s cubic-bezier(.2,.8,.2,1) both !important;
}

#site-header .nav-menu-v2-group{
  border-radius: 15px !important;
}

/* Links dentro del panel también menos redondeados */
#site-header .nav-menu-v2-links a{
  border-radius: 12px !important;
}

/* Animación más bonita: aparece, baja un pelín y se expande suave */
@keyframes navMenuV2SoftIn{
  0%{
    opacity: 0;
    transform: translateY(-8px) scale(.975);
    filter: blur(3px);
  }
  70%{
    opacity: 1;
    transform: translateY(1px) scale(1.004);
    filter: blur(0);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Flecha con giro más suave */
#site-header .nav-menu-v2-chevron{
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease !important;
}

#site-header .nav-menu-v2[open] .nav-menu-v2-chevron{
  transform: rotate(180deg) !important;
}

/* Hamburguesa con microanimación al abrir */
#site-header .nav-menu-v2-icon span{
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    opacity .18s ease,
    width .22s ease !important;
  transform-origin: center;
}

#site-header .nav-menu-v2[open] .nav-menu-v2-icon span:nth-child(1){
  transform: translateY(5px) rotate(45deg);
}

#site-header .nav-menu-v2[open] .nav-menu-v2-icon span:nth-child(2){
  opacity: 0;
  width: 8px;
}

#site-header .nav-menu-v2[open] .nav-menu-v2-icon span:nth-child(3){
  transform: translateY(-5px) rotate(-45deg);
}

/* Móvil: también compactamos, pero sin hacerlo incómodo de pulsar */
@media (max-width: 520px){
  #site-header .nav.nav-v2 > a,
  #site-header .nav-menu-v2-summary,
  #site-header .nav.nav-v2 > a.nav-current-page-v2{
    min-height: 38px !important;
    height: 38px !important;
    padding: .40rem .66rem !important;
    border-radius: 13px !important;
    font-size: .88rem !important;
  }

  #site-header .nav-menu-v2-panel{
    border-radius: 18px !important;
  }

  #site-header .nav-menu-v2-group{
    border-radius: 14px !important;
  }

  #site-header .nav-menu-v2-links a{
    min-height: 34px !important;
    border-radius: 11px !important;
  }
}

/* Móviles estrechos: aún más fino */
@media (max-width: 390px){
  #site-header .nav.nav-v2 > a,
  #site-header .nav-menu-v2-summary,
  #site-header .nav.nav-v2 > a.nav-current-page-v2{
    min-height: 36px !important;
    height: 36px !important;
    padding: .36rem .58rem !important;
    border-radius: 12px !important;
    font-size: .82rem !important;
  }
}


/* =========================================================
   Header v2.4 — panel del menú alineado a la derecha
   Evita que en escritorio se salga/corte por el lateral derecho.
   ========================================================= */

/* Como el botón Menú está a la derecha, el panel debe crecer hacia la izquierda */
#site-header .nav-menu-v2-panel{
  left: auto !important;
  right: 0 !important;
  width: min(760px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
}

/* Ajustamos el origen de la animación para que nazca desde el botón Menú */
#site-header .nav-menu-v2[open]:not(.is-closing) .nav-menu-v2-panel,
#site-header .nav-menu-v2.is-closing .nav-menu-v2-panel{
  transform-origin: calc(100% - 28px) 0 !important;
}

/* En escritorio medio/estrecho, bajamos un poco el ancho para no invadir demasiado */
@media (max-width: 980px){
  #site-header .nav-menu-v2-panel{
    width: min(680px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
  }
}

/* En móvil lo dejamos igual de seguro: alineado al borde derecho disponible */
@media (max-width: 520px){
  #site-header .nav-menu-v2-panel{
    left: auto !important;
    right: 0 !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* En pantallas muy estrechas, que respire un poquito más */
@media (max-width: 390px){
  #site-header .nav-menu-v2-panel{
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
  }
}


/* =========================================================
   Header v2.5 — botones con estética del tag de estación
   - Misma familia visual que .season-pill
   - Altura amable, redondeo suave y coherente
   - Quitamos la cuadratura excesiva de v2.2
   ========================================================= */

#site-header{
  --header-v2-btn-height: 32px;
  --header-v2-btn-radius: 999px;
  --header-v2-btn-pad-y: .26rem;
  --header-v2-btn-pad-x: .60rem;
}

/* Botones visibles: Principal / página actual / Menú */
#site-header .nav.nav-v2 > a,
#site-header .nav.nav-v2 > a.nav-current-page-v2,
#site-header .nav.nav-v2 > a.nav-current-page-v2.active,
#site-header .nav-menu-v2-summary{
  box-sizing: border-box !important;
  min-height: var(--header-v2-btn-height) !important;
  height: var(--header-v2-btn-height) !important;
  padding: var(--header-v2-btn-pad-y) var(--header-v2-btn-pad-x) !important;
  border-radius: var(--header-v2-btn-radius) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Tipografía y tacto similares al tag de estación */
#site-header .nav.nav-v2 > a,
#site-header .nav-menu-v2-summary{
  font-size: .84rem !important;
  font-weight: 560 !important;
}

/* Botón Menú neutro: misma estética que un chip/tag, no botón activo */
#site-header .nav-menu-v2-summary,
#site-header .nav-menu-v2-summary.active{
  color: var(--fg, var(--text)) !important;
  -webkit-text-fill-color: initial !important;
  border: 1px solid var(--border) !important;
  background: color-mix(in oklab, var(--card) 80%, var(--brand, #10b981) 20%) !important;
  box-shadow:
    0 3px 12px rgba(2,6,23,.05),
    0 0 0 1px color-mix(in oklab, var(--brand, #10b981) 7%, transparent) inset !important;
}

/* Principal en reposo también más chip, menos botón grande */
#site-header .nav.nav-v2 > a:not(.active):not(.nav-current-page-v2){
  background: color-mix(in oklab, var(--card) 86%, var(--brand, #10b981) 14%) !important;
  border-color: var(--border) !important;
}

/* Hover fino y coherente */
#site-header .nav.nav-v2 > a:hover,
#site-header .nav-menu-v2-summary:hover,
#site-header .nav-menu-v2-summary.active:hover{
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--card) 74%, var(--brand, #10b981) 26%) !important;
  border-color: color-mix(in oklab, var(--brand, #10b981) 34%, var(--border)) !important;
  box-shadow:
    0 7px 20px rgba(2,6,23,.08),
    0 0 0 1px color-mix(in oklab, var(--brand, #10b981) 10%, transparent) inset !important;
}

/* Activo real: página actual / principal cuando toca */
#site-header .nav.nav-v2 > a.active,
#site-header .nav.nav-v2 > a.nav-current-page-v2.active{
  background: linear-gradient(180deg, var(--brand-accent, var(--brand, #10b981)), var(--brand, #10b981)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: transparent !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,.14),
    0 8px 22px color-mix(in oklab, var(--brand, #10b981) 16%, transparent) !important;
}

/* Menú abierto: seguimos sin convertirlo en activo, solo un leve estado abierto */
#site-header .nav-menu-v2[open] .nav-menu-v2-summary{
  background: color-mix(in oklab, var(--card) 72%, var(--brand, #10b981) 28%) !important;
  border-color: color-mix(in oklab, var(--brand, #10b981) 38%, var(--border)) !important;
}

/* Ajustamos icono del menú a la nueva altura */
#site-header .nav-menu-v2-icon{
  width: 15px !important;
  gap: 3px !important;
}

#site-header .nav-menu-v2-icon span{
  width: 15px !important;
  height: 2px !important;
}

#site-header .nav-menu-v2-text{
  font-weight: 620 !important;
}

#site-header .nav-menu-v2-chevron{
  font-size: .82rem !important;
}

/* Botones dentro del panel: mismo lenguaje, un poco más amplios para lectura */
#site-header .nav-menu-v2-links a{
  min-height: 32px !important;
  height: auto !important;
  padding: .34rem .64rem !important;
  border-radius: 999px !important;
  font-size: .86rem !important;
  line-height: 1.1 !important;
}

/* Badge Nou/Nuevo acompasado con el nuevo tamaño */
#site-header .nav a.nav-new::after{
  border-radius: 999px !important;
  padding: .08rem .30rem !important;
  font-size: .58rem !important;
  transform: translateY(-1px);
}

/* Modo oscuro */
:root[data-theme="dark"] #site-header .nav-menu-v2-summary,
html[data-theme="dark"] #site-header .nav-menu-v2-summary,
html.dark #site-header .nav-menu-v2-summary,
body.dark #site-header .nav-menu-v2-summary{
  color: rgba(255,255,255,.94) !important;
  -webkit-text-fill-color: rgba(255,255,255,.94) !important;
  background: color-mix(in oklab, var(--card) 78%, var(--brand, #10b981) 22%) !important;
  border-color: color-mix(in oklab, var(--brand, #10b981) 28%, var(--border)) !important;
}

/* Móvil: igual que el tag, pero con un pelín más de área táctil */
@media (max-width: 520px){
  #site-header{
    --header-v2-btn-height: 36px;
    --header-v2-btn-pad-y: .30rem;
    --header-v2-btn-pad-x: .62rem;
  }

  #site-header .nav.nav-v2 > a,
  #site-header .nav.nav-v2 > a.nav-current-page-v2,
  #site-header .nav-menu-v2-summary{
    font-size: .86rem !important;
  }

  #site-header .nav-menu-v2-links a{
    min-height: 34px !important;
    padding: .36rem .62rem !important;
    font-size: .86rem !important;
  }
}

@media (max-width: 390px){
  #site-header{
    --header-v2-btn-height: 34px;
    --header-v2-btn-pad-x: .56rem;
  }

  #site-header .nav.nav-v2 > a,
  #site-header .nav.nav-v2 > a.nav-current-page-v2,
  #site-header .nav-menu-v2-summary{
    font-size: .82rem !important;
  }
}


/* =========================================================
   Header v2.9 — menú móvil sin scroll interno
   - Compacta el panel para que quepa entero bajo el header fijo
   - Evita cortar "Avisos Telegram"
   - Mantiene estilo Aurora-Apple
   ========================================================= */

@media (max-width: 700px){

  /* Panel del menú principal: más compacto y aprovechando pantalla real */
  #site-header .nav-menu-v2-panel{
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;

    width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;

    padding: 10px !important;
    gap: 8px !important;

    grid-template-columns: 1fr !important;

    border-radius: 20px !important;

    /*
      Importante:
      quitamos el scroll interno "por defecto" y lo dejamos solo como emergencia.
      Con la compactación debería caber entero.
    */
    max-height: none !important;
    overflow: visible !important;
  }

  /* Si el header está fixed por v2.8, el panel sigue siendo absolute dentro del header */
  #site-header .nav-menu-v2{
    position: relative !important;
  }

  #site-header .nav-menu-v2-group{
    padding: 9px 10px !important;
    border-radius: 16px !important;
  }

  #site-header .nav-menu-v2-title{
    margin: 0 0 7px !important;
    font-size: .70rem !important;
    line-height: 1 !important;
    letter-spacing: .055em !important;
  }

  #site-header .nav-menu-v2-links{
    gap: 6px !important;
  }

  #site-header .nav-menu-v2-links a{
    min-height: 29px !important;
    padding: .28rem .54rem !important;
    font-size: .80rem !important;
    line-height: 1.05 !important;
    border-radius: 999px !important;
  }

  #site-header .nav-menu-v2-links a.nav-new::after{
    margin-left: .24rem !important;
    padding: .06rem .24rem !important;
    font-size: .52rem !important;
    transform: translateY(-1px) !important;
  }

  /* Grupo Avisos: al ser solo un botón, lo dejamos más fino */
  #site-header .nav-menu-v2-group:last-child{
    padding-bottom: 9px !important;
  }
}

/* iPhone estrecho: apretamos un pelín más */
@media (max-width: 390px){

  #site-header .nav-menu-v2-panel{
    width: calc(100vw - 18px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    max-width: calc(100vw - 18px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    padding: 8px !important;
    gap: 7px !important;
  }

  #site-header .nav-menu-v2-group{
    padding: 8px 9px !important;
  }

  #site-header .nav-menu-v2-links{
    gap: 5px !important;
  }

  #site-header .nav-menu-v2-links a{
    min-height: 27px !important;
    padding: .25rem .48rem !important;
    font-size: .76rem !important;
  }
}


/* =========================================================
   Header v2.10 — ajuste alineación textos menú escritorio
   - Centra verticalmente textos dentro de botones del desplegable
   - Mantiene móvil como está, que ya se ve bien
   ========================================================= */

@media (min-width: 701px){

  #site-header .nav-menu-v2-links a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    min-height: 34px !important;
    height: 34px !important;

    padding: 0 .72rem !important;
    line-height: 1 !important;

    vertical-align: middle !important;
    text-align: center !important;
  }

  #site-header .nav-menu-v2-links a.nav-new{
    gap: .34rem !important;
  }

  #site-header .nav-menu-v2-links a.nav-new::after{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 18px !important;
    min-height: 18px !important;
    padding: 0 .34rem !important;

    line-height: 1 !important;
    margin-left: .08rem !important;
    transform: none !important;
    vertical-align: middle !important;
  }

  #site-header .nav-menu-v2-title{
    line-height: 1.1 !important;
  }
}


/* =========================================================
   Header v2.12 — dropdowns seguros en móvil horizontal
   - El selector de estación no se corta por la izquierda
   - En horizontal los menús de chips abren hacia la derecha
   ========================================================= */

@media (max-width: 900px) and (orientation: landscape),
       (max-height: 520px) and (max-width: 900px){

  #site-header,
  #site-header .header-bar,
  #site-header .header-actions,
  #site-header .dropdown{
    overflow: visible !important;
  }

  #site-header .header-actions .dropdown .menu{
    left: 0 !important;
    right: auto !important;

    width: auto !important;
    min-width: 180px !important;
    max-width: min(280px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;

    z-index: 900 !important;
  }

  /* Estación: suele tener nombres más largos */
  #site-header .header-actions .dropdown:has([data-i18n="lbl_station"]) .menu{
    min-width: 210px !important;
    max-width: min(300px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
  }

  #site-header .header-actions .dropdown .menu a,
  #site-header .header-actions .dropdown .menu button{
    white-space: nowrap !important;
  }
}


/* =========================================================
   Header cielo FINAL limpio — alineado con LIVE
   - Fondo cielo a ancho completo
   - Contenido del header en la misma caja que main/live
   - Escritorio: marca/chips/nav alineados a 1200px
   - Móvil: conserva el ajuste que ya se ve bien
   - Base neutra: blanco en claro / oscuro en dark
   ========================================================= */

html,
body{
  margin-top: 0 !important;
  padding-top: 0 !important;
  max-width: 100% !important;
  overflow-x: clip !important;
  scroll-padding-top: 0 !important;
}

@supports not (overflow: clip){
  html,
  body{
    overflow-x: hidden !important;
  }
}

body{
  padding-top: 0 !important;
}

#site-header,
#site-header *,
#site-header *::before,
#site-header *::after{
  box-sizing: border-box !important;
}

#site-header{
  --jd-header-content-max: 1200px;
  --jd-header-content-gutter: 24px;

  --jd-header-bg-desktop: image-set(
    url("/2026/modules/header/assets/nubes-header-desktop.webp") type("image/webp"),
    url("/2026/modules/header/assets/nubes-header-desktop.jpg") type("image/jpeg")
  );

  --jd-header-bg-portrait: image-set(
    url("/2026/modules/header/assets/nubes-header-mobile-portrait.webp") type("image/webp"),
    url("/2026/modules/header/assets/nubes-header-mobile-portrait.jpg") type("image/jpeg")
  );

  --jd-header-bg-landscape: image-set(
    url("/2026/modules/header/assets/nubes-header-mobile-landscape.webp") type("image/webp"),
    url("/2026/modules/header/assets/nubes-header-mobile-landscape.jpg") type("image/jpeg")
  );

  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;

  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;

  z-index: 3000 !important;
  isolation: isolate !important;
  overflow: visible !important;

  background: #ffffff !important;
  background-color: #ffffff !important;

  border-top: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 12px 34px rgba(15,23,42,.10) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Cielo a ancho completo, ligeramente subido para matar la línea blanca superior */
#site-header::before{
  content: "";
  position: absolute !important;
  top: -54px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -2px !important;

  z-index: 0 !important;
  pointer-events: none !important;

  background-image: var(--jd-header-bg-desktop) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;

  opacity: .86 !important;
  filter: saturate(.96) brightness(1.04) !important;
  transform: none !important;
  mix-blend-mode: normal !important;
}

/* Velo neutro: blanco, sin contaminar con rojo/verde/amarillo de la estación */
#site-header::after{
  content: "";
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.13) 48%,
      rgba(255,255,255,.28) 100%
    ) !important;
}

/* Todo el contenido real por encima del cielo */
#site-header .header-bar,
#site-header .header-nav{
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Caja común: exactamente la misma lógica visual que LIVE/main */
#site-header .header-bar.container,
#site-header .header-nav.container{
  width: min(
    var(--jd-header-content-max),
    calc(100% - (var(--jd-header-content-gutter) * 2))
  ) !important;

  max-width: var(--jd-header-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Fila superior escritorio */
#site-header .header-bar{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;

  padding-top: 18px !important;
  padding-bottom: 14px !important;
}

/* Tarjeta marca */
#site-header .brand{
  position: relative !important;
  z-index: 2 !important;

  display: flex !important;
  align-items: center !important;

  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: min(760px, 72%) !important;

  margin: 0 !important;
  padding: 10px 14px 10px 12px !important;

  border-radius: 30px !important;
  isolation: isolate !important;
  overflow: visible !important;
}

#site-header .brand::before{
  content: "";
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: inherit !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.56),
      rgba(255,255,255,.30)
    ) !important;

  border: 1px solid rgba(255,255,255,.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 16px 38px rgba(15,23,42,.10) !important;

  backdrop-filter: blur(8px) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.03) !important;
}

#site-header .brand-logo-wrap{
  width: 86px !important;
  height: 86px !important;
  border-radius: 24px !important;
  padding: 7px !important;
  flex: 0 0 auto !important;
}

#site-header .brand-title{
  min-width: 0 !important;
}

#site-header .brand-title strong{
  font-size: clamp(2.05rem, 2.25vw, 2.72rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  font-weight: 860 !important;

  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
}

#site-header .brand-title .brand-subtitle{
  font-size: 1.08rem !important;
  font-weight: 560 !important;
  color: rgba(15,23,42,.70) !important;
  text-shadow: none !important;
}

/* Logos Ayuntamiento/Montalt */
#site-header .brand-partners-inline{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 14px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

#site-header .brand-partners-inline img{
  height: 34px !important;
  max-width: 150px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.94) !important;
  padding: 3px 8px !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.16) !important;
}

/* Chips superiores */
#site-header .header-actions{
  position: relative !important;
  z-index: 30000 !important;

  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;

  width: auto !important;
  max-width: min(560px, 46vw) !important;
  margin-left: auto !important;
  margin-right: 0 !important;

  padding: 8px 10px !important;
  border-radius: 22px !important;
  isolation: isolate !important;
}

#site-header .header-actions::before{
  content: "";
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: inherit !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.54),
      rgba(255,255,255,.28)
    ) !important;

  border: 1px solid rgba(255,255,255,.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    0 10px 26px rgba(15,23,42,.08) !important;

  backdrop-filter: blur(8px) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.03) !important;
}

#site-header .header-actions .btn.ghost,
#site-header .header-actions .dropdown > summary{
  min-height: 32px !important;
  height: 32px !important;
  padding: .22rem .56rem !important;
  border-radius: 14px !important;
  white-space: nowrap !important;
}

#site-header .header-actions .badge,
#site-header .header-actions .chip-current{
  white-space: nowrap !important;
}

/* Dropdowns */
#site-header .dropdown{
  position: relative !important;
  z-index: 31000 !important;
}

#site-header .dropdown[open]{
  z-index: 50000 !important;
}

#site-header .dropdown .menu{
  position: absolute !important;
  z-index: 51000 !important;
  overflow: visible !important;
  max-height: none !important;

  background: color-mix(in oklab, var(--card) 94%, white 6%) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 18px 44px rgba(2,6,23,.18),
    0 0 0 1px rgba(255,255,255,.35) inset !important;

  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

#site-header .dropdown-station .menu{
  left: 0 !important;
  right: auto !important;
  min-width: 210px !important;
  max-width: min(300px, calc(100vw - 28px)) !important;
}

#site-header .dropdown-lang .menu{
  left: 0 !important;
  right: auto !important;
  min-width: 112px !important;
  max-width: 140px !important;
}

/* Franja Principal / Menú */
#site-header .header-nav{
  z-index: 1000 !important;
  isolation: isolate !important;

  display: block !important;
  padding-top: 10px !important;
  padding-bottom: 8px !important;
  border-top: 1px solid rgba(255,255,255,.34) !important;
}

#site-header .header-nav::before{
  content: "";
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;

  top: 0 !important;
  bottom: -1px !important;
  left: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.40)
    ) !important;

  border-top: 1px solid rgba(255,255,255,.26) !important;
  border-bottom: 1px solid rgba(255,255,255,.24) !important;

  backdrop-filter: blur(5px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.02) !important;
}

#site-header .nav.nav-v2{
  display: flex !important;
  align-items: flex-end !important;
  width: 100% !important;
  min-height: 42px !important;
  gap: 8px !important;
}

#site-header .nav.nav-v2 > a{
  align-self: flex-end !important;
}

#site-header .nav.nav-v2 .nav-menu-v2{
  margin-left: auto !important;
  align-self: flex-end !important;
  position: relative !important;
  z-index: 8000 !important;
}

#site-header .nav-menu-v2[open]{
  z-index: 9000 !important;
}

#site-header .nav-menu-v2-panel{
  position: absolute !important;
  z-index: 9100 !important;
}

/* Tablet/móvil: conserva el layout centrado que ya se veía bien */
@media (max-width: 980px){
  #site-header{
    --jd-header-content-gutter: 14px;
  }

  #site-header .header-bar{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding-top: 14px !important;
    padding-bottom: 12px !important;
  }

  #site-header .brand,
  #site-header .header-actions{
    width: min(760px, 100%) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #site-header .brand{
    max-width: 100% !important;
  }

  #site-header .header-actions{
    justify-content: center !important;
    flex-wrap: nowrap !important;
  }

  #site-header::before{
    top: -54px !important;
  }
}

/* Móvil vertical */
@media (max-width: 700px) and (orientation: portrait){
  #site-header::before{
    background-image: var(--jd-header-bg-portrait) !important;
    background-position: center top !important;
    opacity: .88 !important;
  }

  #site-header::after{
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.06) 0%,
        rgba(255,255,255,.14) 52%,
        rgba(255,255,255,.30) 100%
      ) !important;
  }

  #site-header .brand{
    width: 100% !important;
    padding: 9px 12px !important;
    border-radius: 26px !important;
  }

  #site-header .brand-logo-wrap{
    width: 76px !important;
    height: 76px !important;
    border-radius: 22px !important;
  }

  #site-header .brand-title strong{
    font-size: clamp(1.82rem, 8.1vw, 2.36rem) !important;
    max-width: calc(100vw - 126px) !important;
  }

  #site-header .brand-title .brand-subtitle{
    font-size: 1.00rem !important;
  }

  #site-header .header-actions{
    width: 100% !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  #site-header .header-actions .btn.ghost,
  #site-header .header-actions .dropdown > summary{
    min-height: 34px !important;
    height: 34px !important;
    padding: .24rem .50rem !important;
    font-size: .88rem !important;
  }

  #site-header .dropdown-station .chip-current{
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: clamp(58px, 18vw, 92px) !important;
  }

  #site-header .header-nav{
    padding-top: 9px !important;
    padding-bottom: 6px !important;
  }
}

/* Móvil horizontal */
@media (max-width: 980px) and (orientation: landscape),
       (max-height: 520px) and (max-width: 980px){
  #site-header{
    --jd-header-content-gutter: 18px;
  }

  #site-header::before{
    background-image: var(--jd-header-bg-landscape) !important;
    background-position: center center !important;
    opacity: .86 !important;
  }

  #site-header .dropdown-station .chip-current{
    max-width: 130px !important;
  }
}

/* Muy estrechos */
@media (max-width: 390px){
  #site-header{
    --jd-header-content-gutter: 10px;
  }

  #site-header .header-actions{
    gap: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #site-header .header-actions .dropdown > summary,
  #site-header .header-actions .btn-theme{
    padding-left: .42rem !important;
    padding-right: .42rem !important;
  }

  #site-header .brand-logo-wrap{
    width: 70px !important;
    height: 70px !important;
    border-radius: 20px !important;
  }

  #site-header .brand-title strong{
    font-size: clamp(1.66rem, 7.8vw, 2.08rem) !important;
    max-width: calc(100vw - 114px) !important;
  }

  #site-header .dropdown-station .chip-current{
    max-width: 58px !important;
  }
}

/* MeteoMontalt móvil: logos bajo nav */
@media (max-width: 520px){
  :root[data-site="santvicenc_montalt"] #site-header .header-nav{
    display: block !important;
    padding-bottom: 14px !important;
  }

  :root[data-site="santvicenc_montalt"] #site-header .header-nav .brand-partners-mobile-under-nav{
    display: flex !important;
    width: 100% !important;

    margin: 12px 0 0 !important;
    padding: 12px 0 0 !important;

    justify-content: center !important;
    align-items: center !important;

    border-top: 1px solid rgba(255,255,255,.34) !important;
    box-sizing: border-box !important;
    clear: both !important;
  }

  :root[data-site="santvicenc_montalt"] #site-header .header-nav .brand-partners-mobile-logos{
    display: flex !important;
    width: auto !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    gap: 14px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  :root[data-site="santvicenc_montalt"] #site-header .header-nav .brand-partners-mobile-logos img{
    display: block !important;
    height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
    object-position: center !important;

    border-radius: 14px !important;
    background: rgba(255,255,255,.96) !important;
    padding: 5px 12px !important;

    border: 1px solid rgba(255,255,255,.58) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.80),
      0 8px 22px rgba(2,6,23,.18) !important;

    transform: none !important;
  }

  :root[data-site="santvicenc_montalt"] #site-header .header-nav .brand-partners-mobile-logos img:first-child{
    max-width: 172px !important;
  }

  :root[data-site="santvicenc_montalt"] #site-header .header-nav .brand-partners-mobile-logos img:last-child{
    max-width: 138px !important;
  }
}

@media (max-width: 390px){
  :root[data-site="santvicenc_montalt"] #site-header .header-nav .brand-partners-mobile-logos{
    gap: 10px !important;
  }

  :root[data-site="santvicenc_montalt"] #site-header .header-nav .brand-partners-mobile-logos img{
    height: 37px !important;
    padding: 5px 10px !important;
  }

  :root[data-site="santvicenc_montalt"] #site-header .header-nav .brand-partners-mobile-logos img:first-child{
    max-width: 156px !important;
  }

  :root[data-site="santvicenc_montalt"] #site-header .header-nav .brand-partners-mobile-logos img:last-child{
    max-width: 126px !important;
  }
}

/* Oscuro */
:root[data-theme="dark"] #site-header,
html[data-theme="dark"] #site-header,
html.dark #site-header,
body.dark #site-header{
  background: #020617 !important;
  background-color: #020617 !important;
  border-bottom-color: rgba(255,255,255,.10) !important;
}

:root[data-theme="dark"] #site-header::before,
html[data-theme="dark"] #site-header::before,
html.dark #site-header::before,
body.dark #site-header::before{
  opacity: .48 !important;
  filter: brightness(.72) saturate(.90) !important;
}

:root[data-theme="dark"] #site-header::after,
html[data-theme="dark"] #site-header::after,
html.dark #site-header::after,
body.dark #site-header::after{
  background:
    linear-gradient(
      180deg,
      rgba(2,6,23,.32) 0%,
      rgba(2,6,23,.46) 52%,
      rgba(2,6,23,.70) 100%
    ) !important;
}

:root[data-theme="dark"] #site-header .brand::before,
html[data-theme="dark"] #site-header .brand::before,
html.dark #site-header .brand::before,
body.dark #site-header .brand::before,
:root[data-theme="dark"] #site-header .header-actions::before,
html[data-theme="dark"] #site-header .header-actions::before,
html.dark #site-header .header-actions::before,
body.dark #site-header .header-actions::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.58),
      rgba(15,23,42,.34)
    ) !important;

  border-color: rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 16px 36px rgba(0,0,0,.26) !important;
}

:root[data-theme="dark"] #site-header .brand-title .brand-subtitle,
html[data-theme="dark"] #site-header .brand-title .brand-subtitle,
html.dark #site-header .brand-title .brand-subtitle,
body.dark #site-header .brand-title .brand-subtitle{
  color: rgba(255,255,255,.88) !important;
}

:root[data-theme="dark"] #site-header .header-nav::before,
html[data-theme="dark"] #site-header .header-nav::before,
html.dark #site-header .header-nav::before,
body.dark #site-header .header-nav::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.18),
      rgba(15,23,42,.46)
    ) !important;

  border-top-color: rgba(255,255,255,.10) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}

/* Auto oscuro si no hay tema manual */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #site-header,
  html:not([data-theme]) #site-header{
    background: #020617 !important;
    background-color: #020617 !important;
    border-bottom-color: rgba(255,255,255,.10) !important;
  }

  :root:not([data-theme]) #site-header::before,
  html:not([data-theme]) #site-header::before{
    opacity: .48 !important;
    filter: brightness(.72) saturate(.90) !important;
  }

  :root:not([data-theme]) #site-header::after,
  html:not([data-theme]) #site-header::after{
    background:
      linear-gradient(
        180deg,
        rgba(2,6,23,.32) 0%,
        rgba(2,6,23,.46) 52%,
        rgba(2,6,23,.70) 100%
      ) !important;
  }

  :root:not([data-theme]) #site-header .brand::before,
  html:not([data-theme]) #site-header .brand::before,
  :root:not([data-theme]) #site-header .header-actions::before,
  html:not([data-theme]) #site-header .header-actions::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.58),
        rgba(15,23,42,.34)
      ) !important;

    border-color: rgba(255,255,255,.16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 16px 36px rgba(0,0,0,.26) !important;
  }

  :root:not([data-theme]) #site-header .header-nav::before,
  html:not([data-theme]) #site-header .header-nav::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.18),
        rgba(15,23,42,.46)
      ) !important;

    border-top-color: rgba(255,255,255,.10) !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
  }
}


/* =========================================================
   Header dropdown z-fix
   - Los menús de Estació / Llengua / Tema quedan por encima
   - No toca alineación ni fondo
   - Evita que la franja Principal/Menú tape el desplegable
   ========================================================= */

#site-header{
  z-index: 3000 !important;
}

/* Las capas de cielo nunca deben competir con menús */
#site-header::before,
#site-header::after{
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Barra superior por encima de la franja nav */
#site-header .header-bar{
  position: relative !important;
  z-index: 6000 !important;
}

/* La zona de chips todavía más arriba */
#site-header .header-actions{
  position: relative !important;
  z-index: 7000 !important;
  overflow: visible !important;
}

/* Cada dropdown crea su propia capa alta */
#site-header .header-actions .dropdown{
  position: relative !important;
  z-index: 7100 !important;
  overflow: visible !important;
}

#site-header .header-actions .dropdown[open]{
  z-index: 9000 !important;
}

/* El menú desplegable por encima de todo el header */
#site-header .header-actions .dropdown .menu{
  position: absolute !important;
  z-index: 9500 !important;
  top: calc(100% + 8px) !important;

  overflow: visible !important;
  max-height: none !important;
}

/* La franja Principal/Menú queda por debajo de los desplegables superiores */
#site-header .header-nav{
  position: relative !important;
  z-index: 3000 !important;
}

/* El menú principal sigue por encima cuando se abre */
#site-header .nav-menu-v2{
  position: relative !important;
  z-index: 4000 !important;
}

#site-header .nav-menu-v2[open]{
  z-index: 9800 !important;
}

#site-header .nav-menu-v2-panel{
  z-index: 9900 !important;
}

/* Móvil: que el dropdown no quede escondido ni cortado */
@media (max-width: 700px){
  #site-header,
  #site-header .header-bar,
  #site-header .header-actions,
  #site-header .header-actions .dropdown{
    overflow: visible !important;
  }

  #site-header .header-actions .dropdown .menu{
    top: calc(100% + 8px) !important;
  }
}


/* =========================================================
   Header nav compact center FINAL
   - Franja Principal/Menú más bajita
   - Botones centrados verticalmente
   - No toca colores, fondo, marca ni chips superiores
   ========================================================= */

#site-header .header-nav{
  display: flex !important;
  align-items: center !important;

  min-height: 48px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;

  border-top: 1px solid rgba(255,255,255,.34) !important;
}

#site-header .header-nav::before{
  top: 0 !important;
  bottom: 0 !important;
}

#site-header .header-nav .nav.nav-v2{
  display: flex !important;
  align-items: center !important;

  width: 100% !important;
  min-height: 38px !important;
  gap: 8px !important;
}

#site-header .header-nav .nav.nav-v2 > a,
#site-header .header-nav .nav.nav-v2 .nav-menu-v2{
  align-self: center !important;
}

#site-header .nav.nav-v2 > a,
#site-header .nav-menu-v2-summary{
  transform: none !important;
}

/* Móvil/tablet: un pelín más de aire táctil, pero sin franja gigante */
@media (max-width: 980px){
  #site-header .header-nav{
    min-height: 58px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  #site-header .header-nav .nav.nav-v2{
    min-height: 42px !important;
    align-items: center !important;
  }
}

/* Móvil vertical: compacto y centrado */
@media (max-width: 700px) and (orientation: portrait){
  #site-header .header-nav{
    min-height: 54px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  #site-header .header-nav .nav.nav-v2{
    min-height: 40px !important;
    align-items: center !important;
  }
}

/* Móvil horizontal: aún más fino */
@media (max-width: 980px) and (orientation: landscape),
       (max-height: 520px) and (max-width: 980px){
  #site-header .header-nav{
    min-height: 46px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  #site-header .header-nav .nav.nav-v2{
    min-height: 38px !important;
  }
}


/* =========================================================
   Header dinámico v1.1 — ajuste visual modo oscuro/auto
   - Corrige subtítulo negro en auto oscuro
   - Fondo menos oscurecido
   - Las escenas nocturnas NO se apagan artificialmente
   - Tarjetas un poco más transparentes para ver más cielo
   ========================================================= */

/* 1) Subtítulo siempre claro en oscuro explícito */
:root[data-theme="dark"] #site-header .brand-title .brand-subtitle,
html[data-theme="dark"] #site-header .brand-title .brand-subtitle,
html.dark #site-header .brand-title .brand-subtitle,
body.dark #site-header .brand-title .brand-subtitle{
  color: rgba(255,255,255,.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.32),
    0 3px 10px rgba(0,0,0,.18) !important;
}

/* 2) Subtítulo claro también en modo AUTO cuando el sistema está en oscuro */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #site-header .brand-title .brand-subtitle,
  html:not([data-theme]) #site-header .brand-title .brand-subtitle{
    color: rgba(255,255,255,.92) !important;
    -webkit-text-fill-color: rgba(255,255,255,.92) !important;
    text-shadow:
      0 1px 2px rgba(0,0,0,.32),
      0 3px 10px rgba(0,0,0,.18) !important;
  }
}

/* 3) Oscuro explícito: no matar tanto la imagen */
:root[data-theme="dark"] #site-header::before,
html[data-theme="dark"] #site-header::before,
html.dark #site-header::before,
body.dark #site-header::before{
  opacity: .76 !important;
  filter: brightness(.95) saturate(.98) contrast(1.02) !important;
}

/* 4) Auto oscuro: mismo criterio, fondo visible */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #site-header::before,
  html:not([data-theme]) #site-header::before{
    opacity: .76 !important;
    filter: brightness(.95) saturate(.98) contrast(1.02) !important;
  }
}

/* 5) Escenas nocturnas: la imagen ya es de noche, no la apagamos más */
:root[data-theme="dark"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::before,
html[data-theme="dark"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::before,
html.dark #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::before,
body.dark #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::before{
  opacity: .88 !important;
  filter: brightness(1.04) saturate(1.02) contrast(1.03) !important;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::before,
  html:not([data-theme]) #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::before{
    opacity: .88 !important;
    filter: brightness(1.04) saturate(1.02) contrast(1.03) !important;
  }
}

/* 6) Velo oscuro más suave */
:root[data-theme="dark"] #site-header::after,
html[data-theme="dark"] #site-header::after,
html.dark #site-header::after,
body.dark #site-header::after{
  background:
    linear-gradient(
      180deg,
      rgba(2,6,23,.16) 0%,
      rgba(2,6,23,.24) 52%,
      rgba(2,6,23,.36) 100%
    ) !important;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #site-header::after,
  html:not([data-theme]) #site-header::after{
    background:
      linear-gradient(
        180deg,
        rgba(2,6,23,.16) 0%,
        rgba(2,6,23,.24) 52%,
        rgba(2,6,23,.36) 100%
      ) !important;
  }
}

/* 7) En escenas nocturnas, velo todavía más ligero */
:root[data-theme="dark"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::after,
html[data-theme="dark"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::after,
html.dark #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::after,
body.dark #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::after{
  background:
    linear-gradient(
      180deg,
      rgba(2,6,23,.08) 0%,
      rgba(2,6,23,.14) 52%,
      rgba(2,6,23,.24) 100%
    ) !important;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::after,
  html:not([data-theme]) #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::after{
    background:
      linear-gradient(
        180deg,
        rgba(2,6,23,.08) 0%,
        rgba(2,6,23,.14) 52%,
        rgba(2,6,23,.24) 100%
      ) !important;
  }
}

/* 8) Tarjeta marca y chips: un poco menos opacos para dejar ver más fondo */
:root[data-theme="dark"] #site-header .brand::before,
html[data-theme="dark"] #site-header .brand::before,
html.dark #site-header .brand::before,
body.dark #site-header .brand::before,
:root[data-theme="dark"] #site-header .header-actions::before,
html[data-theme="dark"] #site-header .header-actions::before,
html.dark #site-header .header-actions::before,
body.dark #site-header .header-actions::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.46),
      rgba(15,23,42,.24)
    ) !important;
  border-color: rgba(255,255,255,.18) !important;
  backdrop-filter: blur(7px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.06) !important;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #site-header .brand::before,
  html:not([data-theme]) #site-header .brand::before,
  :root:not([data-theme]) #site-header .header-actions::before,
  html:not([data-theme]) #site-header .header-actions::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.46),
        rgba(15,23,42,.24)
      ) !important;
    border-color: rgba(255,255,255,.18) !important;
    backdrop-filter: blur(7px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(7px) saturate(1.06) !important;
  }
}

/* 9) Franja Principal/Menú menos tapada */
:root[data-theme="dark"] #site-header .header-nav::before,
html[data-theme="dark"] #site-header .header-nav::before,
html.dark #site-header .header-nav::before,
body.dark #site-header .header-nav::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.10),
      rgba(15,23,42,.28)
    ) !important;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #site-header .header-nav::before,
  html:not([data-theme]) #site-header .header-nav::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.10),
        rgba(15,23,42,.28)
      ) !important;
  }
}


/* =========================================================
   Header dinámico v1.2 — más transparencia en título y chips
   - Tarjeta del título más ligera
   - Selector estación/idioma/tema más transparente
   - Mantiene contraste suficiente en modo oscuro/auto
   ========================================================= */

/* Modo claro: dejamos ver más cielo detrás del título */
#site-header .brand::before{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.42),
      rgba(255,255,255,.18)
    ) !important;

  border-color: rgba(255,255,255,.40) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    0 14px 32px rgba(15,23,42,.08) !important;

  backdrop-filter: blur(6px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.04) !important;
}

/* Modo claro: chips superiores más transparentes */
#site-header .header-actions::before{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.38),
      rgba(255,255,255,.16)
    ) !important;

  border-color: rgba(255,255,255,.36) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 9px 24px rgba(15,23,42,.07) !important;

  backdrop-filter: blur(6px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.04) !important;
}

/* Modo oscuro explícito: menos bloque oscuro sobre el cielo */
:root[data-theme="dark"] #site-header .brand::before,
html[data-theme="dark"] #site-header .brand::before,
html.dark #site-header .brand::before,
body.dark #site-header .brand::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.34),
      rgba(15,23,42,.16)
    ) !important;

  border-color: rgba(255,255,255,.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 14px 32px rgba(0,0,0,.22) !important;

  backdrop-filter: blur(6px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.06) !important;
}

:root[data-theme="dark"] #site-header .header-actions::before,
html[data-theme="dark"] #site-header .header-actions::before,
html.dark #site-header .header-actions::before,
body.dark #site-header .header-actions::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.30),
      rgba(15,23,42,.14)
    ) !important;

  border-color: rgba(255,255,255,.15) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 9px 24px rgba(0,0,0,.20) !important;

  backdrop-filter: blur(6px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.06) !important;
}

/* Modo auto oscuro: mismo ajuste que dark manual */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #site-header .brand::before,
  html:not([data-theme]) #site-header .brand::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.34),
        rgba(15,23,42,.16)
      ) !important;

    border-color: rgba(255,255,255,.16) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 14px 32px rgba(0,0,0,.22) !important;

    backdrop-filter: blur(6px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(6px) saturate(1.06) !important;
  }

  :root:not([data-theme]) #site-header .header-actions::before,
  html:not([data-theme]) #site-header .header-actions::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.30),
        rgba(15,23,42,.14)
      ) !important;

    border-color: rgba(255,255,255,.15) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 9px 24px rgba(0,0,0,.20) !important;

    backdrop-filter: blur(6px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(6px) saturate(1.06) !important;
  }
}

/* Chips internos: un pelín más cristal también */
#site-header .header-actions .btn.ghost,
#site-header .header-actions .dropdown > summary{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.16) !important;
}

:root[data-theme="dark"] #site-header .header-actions .btn.ghost,
html[data-theme="dark"] #site-header .header-actions .btn.ghost,
html.dark #site-header .header-actions .btn.ghost,
body.dark #site-header .header-actions .btn.ghost,
:root[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html.dark #site-header .header-actions .dropdown > summary,
body.dark #site-header .header-actions .dropdown > summary{
  background: rgba(15,23,42,.18) !important;
  border-color: rgba(255,255,255,.14) !important;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #site-header .header-actions .btn.ghost,
  html:not([data-theme]) #site-header .header-actions .btn.ghost,
  :root:not([data-theme]) #site-header .header-actions .dropdown > summary,
  html:not([data-theme]) #site-header .header-actions .dropdown > summary{
    background: rgba(15,23,42,.18) !important;
    border-color: rgba(255,255,255,.14) !important;
  }
}


/* =========================================================
   Header dinámico v1.4 — solo capas traslúcidas
   - NO toca colores del título
   - NO toca textos
   - NO toca botones Principal/Menú ni activos
   - Solo reduce opacidad de los vidrios de fondo
   ========================================================= */

/* Tarjeta del título / marca: más cristal, sin alterar el texto */
#site-header .brand::before{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.30),
      rgba(255,255,255,.10)
    ) !important;

  border-color: rgba(255,255,255,.34) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 12px 30px rgba(15,23,42,.07) !important;

  backdrop-filter: blur(9px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(9px) saturate(1.10) !important;
}

/* Caja exterior de selectores Estació / Idioma / Tema */
#site-header .header-actions::before{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.26),
      rgba(255,255,255,.08)
    ) !important;

  border-color: rgba(255,255,255,.30) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 8px 22px rgba(15,23,42,.055) !important;

  backdrop-filter: blur(9px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(9px) saturate(1.10) !important;
}

/* Franja translúcida Principal / Menú: solo el vidrio de fondo */
#site-header .header-nav::before{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.22)
    ) !important;

  border-top-color: rgba(255,255,255,.22) !important;
  border-bottom-color: rgba(255,255,255,.18) !important;

  backdrop-filter: blur(8px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.08) !important;
}

/* Oscuro manual: cristal oscuro más ligero, sin tocar texto */
:root[data-theme="dark"] #site-header .brand::before,
html[data-theme="dark"] #site-header .brand::before,
html.dark #site-header .brand::before,
body.dark #site-header .brand::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.24),
      rgba(15,23,42,.08)
    ) !important;

  border-color: rgba(255,255,255,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 14px 32px rgba(0,0,0,.18) !important;
}

:root[data-theme="dark"] #site-header .header-actions::before,
html[data-theme="dark"] #site-header .header-actions::before,
html.dark #site-header .header-actions::before,
body.dark #site-header .header-actions::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.22),
      rgba(15,23,42,.07)
    ) !important;

  border-color: rgba(255,255,255,.13) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 9px 24px rgba(0,0,0,.16) !important;
}

:root[data-theme="dark"] #site-header .header-nav::before,
html[data-theme="dark"] #site-header .header-nav::before,
html.dark #site-header .header-nav::before,
body.dark #site-header .header-nav::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.06),
      rgba(15,23,42,.18)
    ) !important;
}

/* Auto oscuro: mismo ajuste, solo vidrios */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #site-header .brand::before,
  html:not([data-theme]) #site-header .brand::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.24),
        rgba(15,23,42,.08)
      ) !important;

    border-color: rgba(255,255,255,.14) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -1px 0 rgba(255,255,255,.04),
      0 14px 32px rgba(0,0,0,.18) !important;
  }

  :root:not([data-theme]) #site-header .header-actions::before,
  html:not([data-theme]) #site-header .header-actions::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.22),
        rgba(15,23,42,.07)
      ) !important;

    border-color: rgba(255,255,255,.13) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.11),
      0 9px 24px rgba(0,0,0,.16) !important;
  }

  :root:not([data-theme]) #site-header .header-nav::before,
  html:not([data-theme]) #site-header .header-nav::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.06),
        rgba(15,23,42,.18)
      ) !important;
  }
}


/* =========================================================
   Header dinámico v1.5 — sin flash de imagen provisional
   - Hasta que JS decide variante, no mostramos el fondo por defecto
   - Si hay cache reciente, aparece casi al instante
   - Si no hay cache, aparece cuando llegan latest/risk-summary
   ========================================================= */

#site-header::before{
  transition:
    opacity .22s ease,
    filter .22s ease !important;
}

#site-header:not([data-weather-variant])::before{
  opacity: 0 !important;
}


/* =========================================================
   Header dinámico v1.6 — cristal más fino
   - Solo recuadros/fondos translúcidos
   - NO toca colores del título
   - NO toca textos
   - NO toca botones activos Principal/Menú
   ========================================================= */

/* Título / marca: más cristal, menos bloque blanco */
#site-header .brand::before{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.055)
    ) !important;

  border-color: rgba(255,255,255,.28) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.045),
    0 10px 26px rgba(15,23,42,.055) !important;

  backdrop-filter: blur(12px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.16) !important;
}

/* Caja de selectores Estació / Idioma / Tema */
#site-header .header-actions::before{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.20),
      rgba(255,255,255,.045)
    ) !important;

  border-color: rgba(255,255,255,.25) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 7px 20px rgba(15,23,42,.045) !important;

  backdrop-filter: blur(12px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.16) !important;
}

/* Franja Principal / Menú: más transparente */
#site-header .header-nav::before{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.145)
    ) !important;

  border-top-color: rgba(255,255,255,.18) !important;
  border-bottom-color: rgba(255,255,255,.13) !important;

  backdrop-filter: blur(10px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.12) !important;
}

/* Botones internos de selección: más vidrio, sin tocar texto */
#site-header .header-actions .btn.ghost,
#site-header .header-actions .dropdown > summary{
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 2px 8px rgba(15,23,42,.04) !important;
}

/* Oscuro manual: cristal más limpio, menos bloque negro */
:root[data-theme="dark"] #site-header .brand::before,
html[data-theme="dark"] #site-header .brand::before,
html.dark #site-header .brand::before,
body.dark #site-header .brand::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.18),
      rgba(15,23,42,.045)
    ) !important;

  border-color: rgba(255,255,255,.12) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 12px 28px rgba(0,0,0,.14) !important;

  backdrop-filter: blur(12px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.16) !important;
}

:root[data-theme="dark"] #site-header .header-actions::before,
html[data-theme="dark"] #site-header .header-actions::before,
html.dark #site-header .header-actions::before,
body.dark #site-header .header-actions::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.16),
      rgba(15,23,42,.04)
    ) !important;

  border-color: rgba(255,255,255,.11) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.095),
    0 8px 22px rgba(0,0,0,.13) !important;

  backdrop-filter: blur(12px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.16) !important;
}

:root[data-theme="dark"] #site-header .header-nav::before,
html[data-theme="dark"] #site-header .header-nav::before,
html.dark #site-header .header-nav::before,
body.dark #site-header .header-nav::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.035),
      rgba(15,23,42,.125)
    ) !important;

  border-top-color: rgba(255,255,255,.075) !important;
  border-bottom-color: rgba(255,255,255,.055) !important;
}

:root[data-theme="dark"] #site-header .header-actions .btn.ghost,
html[data-theme="dark"] #site-header .header-actions .btn.ghost,
html.dark #site-header .header-actions .btn.ghost,
body.dark #site-header .header-actions .btn.ghost,
:root[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html.dark #site-header .header-actions .dropdown > summary,
body.dark #site-header .header-actions .dropdown > summary{
  background: rgba(15,23,42,.105) !important;
  border-color: rgba(255,255,255,.105) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    0 2px 8px rgba(0,0,0,.10) !important;
}

/* Auto oscuro: mismo ajuste que oscuro manual */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #site-header .brand::before,
  html:not([data-theme]) #site-header .brand::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.18),
        rgba(15,23,42,.045)
      ) !important;

    border-color: rgba(255,255,255,.12) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(255,255,255,.025),
      0 12px 28px rgba(0,0,0,.14) !important;

    backdrop-filter: blur(12px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.16) !important;
  }

  :root:not([data-theme]) #site-header .header-actions::before,
  html:not([data-theme]) #site-header .header-actions::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.16),
        rgba(15,23,42,.04)
      ) !important;

    border-color: rgba(255,255,255,.11) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.095),
      0 8px 22px rgba(0,0,0,.13) !important;

    backdrop-filter: blur(12px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.16) !important;
  }

  :root:not([data-theme]) #site-header .header-nav::before,
  html:not([data-theme]) #site-header .header-nav::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.035),
        rgba(15,23,42,.125)
      ) !important;

    border-top-color: rgba(255,255,255,.075) !important;
    border-bottom-color: rgba(255,255,255,.055) !important;
  }

  :root:not([data-theme]) #site-header .header-actions .btn.ghost,
  html:not([data-theme]) #site-header .header-actions .btn.ghost,
  :root:not([data-theme]) #site-header .header-actions .dropdown > summary,
  html:not([data-theme]) #site-header .header-actions .dropdown > summary{
    background: rgba(15,23,42,.105) !important;
    border-color: rgba(255,255,255,.105) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.085),
      0 2px 8px rgba(0,0,0,.10) !important;
  }
}

/* =========================================================
   Header dinámico v1.7 — auto real + cristal coherente
   - Soporta data-theme="auto" cuando el sistema está en oscuro
   - Mantiene el cristal fino de v1.6
   - No toca colores del título ni botones activos
   ========================================================= */

@media (prefers-color-scheme: dark){

  :root[data-theme="auto"] #site-header,
  html[data-theme="auto"] #site-header{
    background: #020617 !important;
    background-color: #020617 !important;
    border-bottom-color: rgba(255,255,255,.10) !important;
  }

  :root[data-theme="auto"] #site-header::before,
  html[data-theme="auto"] #site-header::before{
    opacity: .76 !important;
    filter: brightness(.95) saturate(.98) contrast(1.02) !important;
  }

  :root[data-theme="auto"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::before,
  html[data-theme="auto"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::before{
    opacity: .88 !important;
    filter: brightness(1.04) saturate(1.02) contrast(1.03) !important;
  }

  :root[data-theme="auto"] #site-header::after,
  html[data-theme="auto"] #site-header::after{
    background:
      linear-gradient(
        180deg,
        rgba(2,6,23,.16) 0%,
        rgba(2,6,23,.24) 52%,
        rgba(2,6,23,.36) 100%
      ) !important;
  }

  :root[data-theme="auto"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::after,
  html[data-theme="auto"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::after{
    background:
      linear-gradient(
        180deg,
        rgba(2,6,23,.08) 0%,
        rgba(2,6,23,.14) 52%,
        rgba(2,6,23,.24) 100%
      ) !important;
  }

  :root[data-theme="auto"] #site-header .brand::before,
  html[data-theme="auto"] #site-header .brand::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.18),
        rgba(15,23,42,.045)
      ) !important;

    border-color: rgba(255,255,255,.12) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(255,255,255,.025),
      0 12px 28px rgba(0,0,0,.14) !important;

    backdrop-filter: blur(12px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.16) !important;
  }

  :root[data-theme="auto"] #site-header .header-actions::before,
  html[data-theme="auto"] #site-header .header-actions::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.16),
        rgba(15,23,42,.04)
      ) !important;

    border-color: rgba(255,255,255,.11) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.095),
      0 8px 22px rgba(0,0,0,.13) !important;

    backdrop-filter: blur(12px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.16) !important;
  }

  :root[data-theme="auto"] #site-header .header-nav::before,
  html[data-theme="auto"] #site-header .header-nav::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.035),
        rgba(15,23,42,.125)
      ) !important;

    border-top-color: rgba(255,255,255,.075) !important;
    border-bottom-color: rgba(255,255,255,.055) !important;
  }

  :root[data-theme="auto"] #site-header .header-actions .btn.ghost,
  html[data-theme="auto"] #site-header .header-actions .btn.ghost,
  :root[data-theme="auto"] #site-header .header-actions .dropdown > summary,
  html[data-theme="auto"] #site-header .header-actions .dropdown > summary{
    background: rgba(15,23,42,.105) !important;
    border-color: rgba(255,255,255,.105) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.085),
      0 2px 8px rgba(0,0,0,.10) !important;
  }

  :root[data-theme="auto"] #site-header .brand-title .brand-subtitle,
  html[data-theme="auto"] #site-header .brand-title .brand-subtitle,
  :root[data-theme="auto"] #site-header .header-actions .chip-current,
  html[data-theme="auto"] #site-header .header-actions .chip-current{
    color: rgba(255,255,255,.92) !important;
    -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  }
}

/* =========================================================
   Header dinámico v1.8 — viento claro móvil + anti-flash final
   - Ajusta encuadre de viento claro en móvil
   - Evita que modo oscuro/auto muestre imagen provisional
   - No toca textos, colores ni botones activos
   ========================================================= */

/* Anti-flash DEFINITIVO:
   si todavía no hay variante elegida por JS, no se muestra ningún cielo,
   aunque bloques dark/auto posteriores intenten darle opacidad. */
#site-header:not([data-weather-variant])::before,
:root[data-theme="dark"] #site-header:not([data-weather-variant])::before,
html[data-theme="dark"] #site-header:not([data-weather-variant])::before,
html.dark #site-header:not([data-weather-variant])::before,
body.dark #site-header:not([data-weather-variant])::before,
:root[data-theme="auto"] #site-header:not([data-weather-variant])::before,
html[data-theme="auto"] #site-header:not([data-weather-variant])::before{
  opacity: 0 !important;
}

/* Mientras no hay variante, tampoco queremos velo oscuro/blanco raro encima */
#site-header:not([data-weather-variant])::after{
  background: transparent !important;
}

/* Viento claro de día:
   estas imágenes tienen más lectura si no las clavamos arriba del todo. */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="viento_claro"]::before{
  background-position: center center !important;
}

/* Viento claro de noche */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche_viento_claro"]::before{
  background-position: center center !important;
}

/* Móvil vertical: bajamos un pelín el encuadre para que se vea más escena */
@media (max-width: 700px) and (orientation: portrait){
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="viento_claro"]::before{
    background-position: center 44% !important;
    background-size: cover !important;
  }

  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche_viento_claro"]::before{
    background-position: center 46% !important;
    background-size: cover !important;
  }
}

/* Móvil horizontal: centrado más natural */
@media (max-width: 980px) and (orientation: landscape),
       (max-height: 520px) and (max-width: 980px){
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="viento_claro"]::before{
    background-position: center center !important;
  }

  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche_viento_claro"]::before{
    background-position: center center !important;
  }
}

/* Pequeño extra: si el fondo es viento claro, dejamos el velo algo más limpio
   para que no parezca nublado artificialmente. */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="viento_claro"]::after{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045) 0%,
      rgba(255,255,255,.09) 52%,
      rgba(255,255,255,.18) 100%
    ) !important;
}


/* =========================================================
   Header dinámico v1.9 — cristales más transparentes
   - Solo fondos/recuadros translúcidos
   - NO toca fuentes
   - NO toca textos
   - NO toca colores de letras
   - NO toca botones activos Principal/Menú
   ========================================================= */

/* Tarjeta del título: más fondo visible */
#site-header .brand::before{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.16),
      rgba(255,255,255,.035)
    ) !important;

  border-color: rgba(255,255,255,.22) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(255,255,255,.035),
    0 8px 22px rgba(15,23,42,.045) !important;

  backdrop-filter: blur(13px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.18) !important;
}

/* Caja grande de Estació / Idioma / Tema */
#site-header .header-actions::before{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.145),
      rgba(255,255,255,.030)
    ) !important;

  border-color: rgba(255,255,255,.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(255,255,255,.03),
    0 6px 18px rgba(15,23,42,.035) !important;

  backdrop-filter: blur(13px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.18) !important;
}

/* Botones internos de selección: menos “pastilla blanca” */
#site-header .header-actions .btn.ghost,
#site-header .header-actions .dropdown > summary{
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 2px 7px rgba(15,23,42,.03) !important;
}

/* Menús desplegables de Estació / Idioma / Tema */
#site-header .dropdown .menu{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.62),
      rgba(255,255,255,.38)
    ) !important;

  border-color: rgba(255,255,255,.30) !important;

  box-shadow:
    0 18px 44px rgba(2,6,23,.14),
    inset 0 1px 0 rgba(255,255,255,.42) !important;

  backdrop-filter: blur(20px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
}

/* Panel grande del Menú principal */
#site-header .nav-menu-v2-panel{
  background:
    radial-gradient(circle at 0% 0%, color-mix(in oklab, var(--brand, #10b981) 10%, transparent), transparent 42%),
    rgba(255,255,255,.58) !important;

  border-color: rgba(255,255,255,.30) !important;

  box-shadow:
    0 24px 70px rgba(2,6,23,.14),
    inset 0 1px 0 rgba(255,255,255,.40) !important;

  backdrop-filter: blur(22px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.14) !important;
}

/* Grupos dentro del menú principal */
#site-header .nav-menu-v2-group{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.34),
      rgba(255,255,255,.15)
    ) !important;

  border-color: rgba(255,255,255,.22) !important;
}

/* Franja Principal / Menú: más limpia */
#site-header .header-nav::before{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.105)
    ) !important;

  border-top-color: rgba(255,255,255,.14) !important;
  border-bottom-color: rgba(255,255,255,.10) !important;

  backdrop-filter: blur(11px) saturate(1.13) !important;
  -webkit-backdrop-filter: blur(11px) saturate(1.13) !important;
}

/* Oscuro manual: cristal más transparente, sin cambiar textos */
:root[data-theme="dark"] #site-header .brand::before,
html[data-theme="dark"] #site-header .brand::before,
html.dark #site-header .brand::before,
body.dark #site-header .brand::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.13),
      rgba(15,23,42,.025)
    ) !important;

  border-color: rgba(255,255,255,.095) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.018),
    0 10px 24px rgba(0,0,0,.11) !important;
}

:root[data-theme="dark"] #site-header .header-actions::before,
html[data-theme="dark"] #site-header .header-actions::before,
html.dark #site-header .header-actions::before,
body.dark #site-header .header-actions::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.115),
      rgba(15,23,42,.022)
    ) !important;

  border-color: rgba(255,255,255,.085) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 7px 18px rgba(0,0,0,.10) !important;
}

:root[data-theme="dark"] #site-header .header-actions .btn.ghost,
html[data-theme="dark"] #site-header .header-actions .btn.ghost,
html.dark #site-header .header-actions .btn.ghost,
body.dark #site-header .header-actions .btn.ghost,
:root[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html.dark #site-header .header-actions .dropdown > summary,
body.dark #site-header .header-actions .dropdown > summary{
  background: rgba(15,23,42,.075) !important;
  border-color: rgba(255,255,255,.085) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.065),
    0 2px 7px rgba(0,0,0,.08) !important;
}

:root[data-theme="dark"] #site-header .dropdown .menu,
html[data-theme="dark"] #site-header .dropdown .menu,
html.dark #site-header .dropdown .menu,
body.dark #site-header .dropdown .menu{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.58),
      rgba(15,23,42,.36)
    ) !important;

  border-color: rgba(255,255,255,.13) !important;

  box-shadow:
    0 18px 44px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

:root[data-theme="dark"] #site-header .nav-menu-v2-panel,
html[data-theme="dark"] #site-header .nav-menu-v2-panel,
html.dark #site-header .nav-menu-v2-panel,
body.dark #site-header .nav-menu-v2-panel{
  background:
    radial-gradient(circle at 0% 0%, color-mix(in oklab, var(--brand, #10b981) 14%, transparent), transparent 42%),
    rgba(15,23,42,.52) !important;

  border-color: rgba(255,255,255,.12) !important;

  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.09) !important;
}

:root[data-theme="dark"] #site-header .nav-menu-v2-group,
html[data-theme="dark"] #site-header .nav-menu-v2-group,
html.dark #site-header .nav-menu-v2-group,
body.dark #site-header .nav-menu-v2-group{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.28),
      rgba(15,23,42,.13)
    ) !important;

  border-color: rgba(255,255,255,.095) !important;
}

:root[data-theme="dark"] #site-header .header-nav::before,
html[data-theme="dark"] #site-header .header-nav::before,
html.dark #site-header .header-nav::before,
body.dark #site-header .header-nav::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.025),
      rgba(15,23,42,.095)
    ) !important;

  border-top-color: rgba(255,255,255,.055) !important;
  border-bottom-color: rgba(255,255,255,.040) !important;
}

/* Auto oscuro real */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header .brand::before,
  html[data-theme="auto"] #site-header .brand::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.13),
        rgba(15,23,42,.025)
      ) !important;
    border-color: rgba(255,255,255,.095) !important;
  }

  :root[data-theme="auto"] #site-header .header-actions::before,
  html[data-theme="auto"] #site-header .header-actions::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.115),
        rgba(15,23,42,.022)
      ) !important;
    border-color: rgba(255,255,255,.085) !important;
  }

  :root[data-theme="auto"] #site-header .header-actions .btn.ghost,
  html[data-theme="auto"] #site-header .header-actions .btn.ghost,
  :root[data-theme="auto"] #site-header .header-actions .dropdown > summary,
  html[data-theme="auto"] #site-header .header-actions .dropdown > summary{
    background: rgba(15,23,42,.075) !important;
    border-color: rgba(255,255,255,.085) !important;
  }

  :root[data-theme="auto"] #site-header .dropdown .menu,
  html[data-theme="auto"] #site-header .dropdown .menu{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.58),
        rgba(15,23,42,.36)
      ) !important;
    border-color: rgba(255,255,255,.13) !important;
  }

  :root[data-theme="auto"] #site-header .nav-menu-v2-panel,
  html[data-theme="auto"] #site-header .nav-menu-v2-panel{
    background:
      radial-gradient(circle at 0% 0%, color-mix(in oklab, var(--brand, #10b981) 14%, transparent), transparent 42%),
      rgba(15,23,42,.52) !important;
    border-color: rgba(255,255,255,.12) !important;
  }

  :root[data-theme="auto"] #site-header .nav-menu-v2-group,
  html[data-theme="auto"] #site-header .nav-menu-v2-group{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.28),
        rgba(15,23,42,.13)
      ) !important;
    border-color: rgba(255,255,255,.095) !important;
  }

  :root[data-theme="auto"] #site-header .header-nav::before,
  html[data-theme="auto"] #site-header .header-nav::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.025),
        rgba(15,23,42,.095)
      ) !important;
    border-top-color: rgba(255,255,255,.055) !important;
    border-bottom-color: rgba(255,255,255,.040) !important;
  }
}


/* =========================================================
   Header dinámico v2.0 — cristal realmente transparente
   - Solo fondos/recuadros/menús translúcidos
   - NO toca fuentes
   - NO toca textos
   - NO toca colores de letras
   - NO toca botones activos Principal/Menú
   ========================================================= */

/* Tarjeta principal del título */
#site-header .brand::before{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.135),
      rgba(255,255,255,.025)
    ) !important;

  border-color: rgba(255,255,255,.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 8px 22px rgba(15,23,42,.035) !important;

  backdrop-filter: blur(14px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.18) !important;
}

/* Caja exterior de Estació / Idioma / Tema */
#site-header .header-actions::before{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.115),
      rgba(255,255,255,.022)
    ) !important;

  border-color: rgba(255,255,255,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.02),
    0 6px 18px rgba(15,23,42,.030) !important;

  backdrop-filter: blur(14px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.18) !important;
}

/* Botones internos de selección: Estació / Idioma / Tema */
#site-header .header-actions .btn.ghost,
#site-header .header-actions .dropdown > summary{
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.095) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 2px 7px rgba(15,23,42,.025) !important;

  backdrop-filter: blur(10px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.12) !important;
}

/* Franja Principal / Menú */
#site-header .header-nav::before{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.080)
    ) !important;

  border-top-color: rgba(255,255,255,.13) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;

  backdrop-filter: blur(11px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(11px) saturate(1.14) !important;
}

/* Panel desplegable del Menú */
#site-header .nav-menu-v2-panel{
  background:
    radial-gradient(
      circle at 0% 0%,
      color-mix(in oklab, var(--brand, #10b981) 8%, transparent),
      transparent 42%
    ),
    rgba(255,255,255,.42) !important;

  border-color: rgba(255,255,255,.24) !important;

  box-shadow:
    0 22px 60px rgba(2,6,23,.13),
    inset 0 1px 0 rgba(255,255,255,.38) !important;

  backdrop-filter: blur(20px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.16) !important;
}

/* Grupos dentro del menú */
#site-header .nav-menu-v2-group{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.24),
      rgba(255,255,255,.08)
    ) !important;

  border-color: rgba(255,255,255,.18) !important;
}

/* Menús pequeños de Estació / Idioma */
#site-header .dropdown .menu{
  background: rgba(255,255,255,.46) !important;
  border-color: rgba(255,255,255,.24) !important;

  box-shadow:
    0 18px 44px rgba(2,6,23,.12),
    inset 0 1px 0 rgba(255,255,255,.34) !important;

  backdrop-filter: blur(20px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.16) !important;
}

/* Oscuro manual: mismo concepto, menos bloque negro */
:root[data-theme="dark"] #site-header .brand::before,
html[data-theme="dark"] #site-header .brand::before,
html.dark #site-header .brand::before,
body.dark #site-header .brand::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.105),
      rgba(15,23,42,.025)
    ) !important;

  border-color: rgba(255,255,255,.095) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(255,255,255,.018),
    0 10px 24px rgba(0,0,0,.10) !important;
}

:root[data-theme="dark"] #site-header .header-actions::before,
html[data-theme="dark"] #site-header .header-actions::before,
html.dark #site-header .header-actions::before,
body.dark #site-header .header-actions::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.095),
      rgba(15,23,42,.022)
    ) !important;

  border-color: rgba(255,255,255,.085) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.065),
    0 7px 18px rgba(0,0,0,.09) !important;
}

:root[data-theme="dark"] #site-header .header-actions .btn.ghost,
html[data-theme="dark"] #site-header .header-actions .btn.ghost,
html.dark #site-header .header-actions .btn.ghost,
body.dark #site-header .header-actions .btn.ghost,
:root[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html.dark #site-header .header-actions .dropdown > summary,
body.dark #site-header .header-actions .dropdown > summary{
  background: rgba(15,23,42,.065) !important;
  border-color: rgba(255,255,255,.080) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 2px 7px rgba(0,0,0,.08) !important;
}

:root[data-theme="dark"] #site-header .header-nav::before,
html[data-theme="dark"] #site-header .header-nav::before,
html.dark #site-header .header-nav::before,
body.dark #site-header .header-nav::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.018),
      rgba(15,23,42,.075)
    ) !important;

  border-top-color: rgba(255,255,255,.055) !important;
  border-bottom-color: rgba(255,255,255,.040) !important;
}

:root[data-theme="dark"] #site-header .nav-menu-v2-panel,
html[data-theme="dark"] #site-header .nav-menu-v2-panel,
html.dark #site-header .nav-menu-v2-panel,
body.dark #site-header .nav-menu-v2-panel{
  background:
    radial-gradient(
      circle at 0% 0%,
      color-mix(in oklab, var(--brand, #10b981) 10%, transparent),
      transparent 42%
    ),
    rgba(15,23,42,.34) !important;

  border-color: rgba(255,255,255,.12) !important;

  box-shadow:
    0 22px 60px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

:root[data-theme="dark"] #site-header .nav-menu-v2-group,
html[data-theme="dark"] #site-header .nav-menu-v2-group,
html.dark #site-header .nav-menu-v2-group,
body.dark #site-header .nav-menu-v2-group{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.22),
      rgba(15,23,42,.07)
    ) !important;

  border-color: rgba(255,255,255,.10) !important;
}

:root[data-theme="dark"] #site-header .dropdown .menu,
html[data-theme="dark"] #site-header .dropdown .menu,
html.dark #site-header .dropdown .menu,
body.dark #site-header .dropdown .menu{
  background: rgba(15,23,42,.38) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Auto oscuro real */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header .brand::before,
  html[data-theme="auto"] #site-header .brand::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.105),
        rgba(15,23,42,.025)
      ) !important;
    border-color: rgba(255,255,255,.095) !important;
  }

  :root[data-theme="auto"] #site-header .header-actions::before,
  html[data-theme="auto"] #site-header .header-actions::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.095),
        rgba(15,23,42,.022)
      ) !important;
    border-color: rgba(255,255,255,.085) !important;
  }

  :root[data-theme="auto"] #site-header .header-actions .btn.ghost,
  html[data-theme="auto"] #site-header .header-actions .btn.ghost,
  :root[data-theme="auto"] #site-header .header-actions .dropdown > summary,
  html[data-theme="auto"] #site-header .header-actions .dropdown > summary{
    background: rgba(15,23,42,.065) !important;
    border-color: rgba(255,255,255,.080) !important;
  }

  :root[data-theme="auto"] #site-header .header-nav::before,
  html[data-theme="auto"] #site-header .header-nav::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.018),
        rgba(15,23,42,.075)
      ) !important;
  }

  :root[data-theme="auto"] #site-header .nav-menu-v2-panel,
  html[data-theme="auto"] #site-header .nav-menu-v2-panel{
    background:
      radial-gradient(
        circle at 0% 0%,
        color-mix(in oklab, var(--brand, #10b981) 10%, transparent),
        transparent 42%
      ),
      rgba(15,23,42,.34) !important;
  }

  :root[data-theme="auto"] #site-header .dropdown .menu,
  html[data-theme="auto"] #site-header .dropdown .menu{
    background: rgba(15,23,42,.38) !important;
  }
}


/* =========================================================
   TEST — Header fondo alineado a la derecha en móvil vertical
   - Solo móvil vertical
   - Solo cuando ya hay variante meteorológica aplicada
   - No toca lógica JS ni day/night
   ========================================================= */

@media (max-width: 700px) and (orientation: portrait){
  #site-header[data-weather-variant]::before{
    background-position: right top !important;
  }
}

/* =========================================================
   TEST — luna visible en móvil vertical
   - Solo móvil vertical
   - Solo noches claras
   - Usa el asset landscape porque ahí sí aparece la luna
   - No toca lógica JS ni servidor
   ========================================================= */

@media (max-width: 700px) and (orientation: portrait){
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche"]::before,
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche_viento_claro"]::before{
    background-image: var(--jd-header-bg-landscape) !important;
    background-position: right top !important;
    background-size: cover !important;
  }
}

/* =========================================================
   FIX — Sant Vicenç Montalt: luna visible en móvil vertical
   - Solo santvicenc_montalt
   - Solo móvil vertical
   - Solo variantes nocturnas claras
   - Mueve la luna fuera del cristal principal
   ========================================================= */

@media (max-width: 700px) and (orientation: portrait){
  :root[data-site="santvicenc_montalt"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche"]::before,
  :root[data-site="santvicenc_montalt"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche_viento_claro"]::before{
    background-image: var(--jd-header-bg-landscape) !important;
    background-position: 78% -22px !important;
    background-size: cover !important;
  }
}

/* =========================================================
   Header dinámico v2.4 — encuadre final móvil vertical
   Decisiones visuales J+A♾️ desde auditoría real de header
   - Solo móvil vertical
   - No toca escritorio
   - No toca móvil horizontal
   - No toca lógica JS ni servidor
   ========================================================= */

@media (max-width: 700px) and (orientation: portrait){

  /* Soleado / noche clara → Portrait · center top */
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="soleado"]::before,
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche"]::before{
    background-image: var(--jd-header-bg-portrait) !important;
    background-position: center top !important;
    background-size: cover !important;
  }

  /* Calor → Landscape · right top */
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="calor"]::before{
    background-image: var(--jd-header-bg-landscape) !important;
    background-position: right top !important;
    background-size: cover !important;
  }

  /* Nubes → Portrait · right top */
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="nubes"]::before{
    background-image: var(--jd-header-bg-portrait) !important;
    background-position: right top !important;
    background-size: cover !important;
  }

  /* Nublado / noche nublada → Landscape · right top */
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="nublado"]::before,
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche_nublada"]::before{
    background-image: var(--jd-header-bg-landscape) !important;
    background-position: right top !important;
    background-size: cover !important;
  }

  /* Niebla / bruma día y noche → Landscape · right top */
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="niebla_bruma"]::before,
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche_niebla_bruma"]::before{
    background-image: var(--jd-header-bg-landscape) !important;
    background-position: right top !important;
    background-size: cover !important;
  }

  /* Viento fuerte día y noche → Landscape · center top */
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="viento_fuerte"]::before,
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche_viento_fuerte"]::before{
    background-image: var(--jd-header-bg-landscape) !important;
    background-position: center top !important;
    background-size: cover !important;
  }

  /* Lluvia día y noche → Landscape · right top */
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="lluvia"]::before,
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche_lluvia"]::before{
    background-image: var(--jd-header-bg-landscape) !important;
    background-position: right top !important;
    background-size: cover !important;
  }

  /* Tormenta día y noche → Landscape · right top */
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="tormenta"]::before,
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche_tormenta"]::before{
    background-image: var(--jd-header-bg-landscape) !important;
    background-position: right top !important;
    background-size: cover !important;
  }

  /* Viento claro día → Portrait · right top */
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="viento_claro"]::before{
    background-image: var(--jd-header-bg-portrait) !important;
    background-position: right top !important;
    background-size: cover !important;
  }

  /* Viento claro noche → Landscape · center center */
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche_viento_claro"]::before{
    background-image: var(--jd-header-bg-landscape) !important;
    background-position: center center !important;
    background-size: cover !important;
  }
}

/* =========================================================
   Header dinámico v2.5 — noche fuerza modo oscuro visual
   - Cuando la imagen de fondo es nocturna, el header usa textos claros
   - No cambia el tema global de la web
   - Al volver a variantes de día, todo vuelve al comportamiento normal
   ========================================================= */

/* Base: cualquier variante nocturna activa modo oscuro SOLO dentro del header */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]{
  color-scheme: dark;
}

/* Título principal: claro sobre fondo nocturno, incluso si la web está en modo claro */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand-title strong{
  color: rgba(255,255,255,.97) !important;
  -webkit-text-fill-color: rgba(255,255,255,.97) !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.42),
    0 4px 14px rgba(0,0,0,.28) !important;
  filter: none !important;
}

/* Si hay degradado con background-clip:text, lo cambiamos a degradado nocturno */
@supports (-webkit-background-clip: text) {
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand-title strong{
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;

    background-image:
      linear-gradient(
        90deg,
        rgba(255,255,255,.99) 0%,
        rgba(255,255,255,.99) 38%,
        color-mix(in oklab, rgba(255,255,255,.96) 72%, var(--brand-400, var(--brand, #38bdf8)) 28%) 62%,
        color-mix(in oklab, var(--brand-400, var(--brand-accent, var(--brand, #38bdf8))) 82%, white 18%) 100%
      ) !important;

    text-shadow: none !important;
    filter:
      drop-shadow(0 1px 2px rgba(0,0,0,.34))
      drop-shadow(0 4px 12px rgba(0,0,0,.22)) !important;
  }
}

/* Subtítulo, estación y textos auxiliares */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand-title .brand-subtitle,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .season-pill,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .season-label,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .chip-current,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .badge{
  color: rgba(255,255,255,.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.36),
    0 3px 10px rgba(0,0,0,.18) !important;
}

/* Cristales superiores en noche, aunque el tema global sea claro */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.24),
      rgba(15,23,42,.075)
    ) !important;

  border-color: rgba(255,255,255,.15) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.035),
    0 14px 32px rgba(0,0,0,.20) !important;

  backdrop-filter: blur(13px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.15) !important;
}

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.22),
      rgba(15,23,42,.065)
    ) !important;

  border-color: rgba(255,255,255,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 9px 24px rgba(0,0,0,.18) !important;

  backdrop-filter: blur(13px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.15) !important;
}

/* Botones internos: Estación / Idioma / Tema */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .dropdown > summary{
  color: rgba(255,255,255,.94) !important;
  -webkit-text-fill-color: rgba(255,255,255,.94) !important;
  background: rgba(15,23,42,.16) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 8px rgba(0,0,0,.12) !important;
}

/* Franja Principal / Menú */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-nav::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.045),
      rgba(15,23,42,.16)
    ) !important;

  border-top-color: rgba(255,255,255,.075) !important;
  border-bottom-color: rgba(255,255,255,.055) !important;
}

/* Botones visibles del nav cuando NO están activos */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav.nav-v2 > a:not(.active),
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary.active{
  color: rgba(255,255,255,.94) !important;
  -webkit-text-fill-color: rgba(255,255,255,.94) !important;

  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.26),
      rgba(15,23,42,.12)
    ) !important;

  border-color: rgba(255,255,255,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 4px 14px rgba(0,0,0,.14) !important;
}

/* Hover nocturno */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav.nav-v2 > a:not(.active):hover,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary:hover,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary.active:hover{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.34),
      rgba(15,23,42,.18)
    ) !important;

  border-color: rgba(255,255,255,.20) !important;
}

/* El activo sigue siendo el color de marca, pero siempre con texto blanco */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav.nav-v2 > a.active,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav.nav-v2 > a.nav-current-page-v2.active{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Menús desplegables pequeños */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .dropdown .menu{
  background: rgba(15,23,42,.54) !important;
  border-color: rgba(255,255,255,.13) !important;

  box-shadow:
    0 18px 44px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.10) !important;

  backdrop-filter: blur(20px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.16) !important;
}

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .dropdown .menu a,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .dropdown .menu button{
  color: rgba(255,255,255,.94) !important;
  -webkit-text-fill-color: rgba(255,255,255,.94) !important;
}

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .dropdown .menu a.active,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .dropdown .menu button.active,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .dropdown .menu a:hover,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .dropdown .menu button:hover{
  background: rgba(255,255,255,.08) !important;
}

/* Panel grande del Menú */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-panel{
  background:
    radial-gradient(
      circle at 0% 0%,
      color-mix(in oklab, var(--brand, #10b981) 14%, transparent),
      transparent 42%
    ),
    rgba(15,23,42,.46) !important;

  border-color: rgba(255,255,255,.12) !important;

  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.09) !important;

  backdrop-filter: blur(22px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
}

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-group{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.28),
      rgba(15,23,42,.11)
    ) !important;

  border-color: rgba(255,255,255,.10) !important;
}

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-title{
  color: color-mix(in oklab, var(--brand-accent, var(--brand, #38bdf8)) 58%, rgba(255,255,255,.86)) !important;
}

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-links a{
  color: rgba(255,255,255,.94) !important;
  -webkit-text-fill-color: rgba(255,255,255,.94) !important;
  background: rgba(15,23,42,.18) !important;
  border-color: rgba(255,255,255,.10) !important;
}

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-links a:hover{
  background: rgba(255,255,255,.08) !important;
}

/* Activos dentro del panel: marca + blanco */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-links a.active{
  background: linear-gradient(180deg, var(--brand-accent, var(--brand, #10b981)), var(--brand, #10b981)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: transparent !important;
}

/* Etiqueta Nou/Nuevo siempre legible en noche */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav a.nav-new::after,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav a.nav-new.active::after{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* =========================================================
   Header dinámico v2.6 — sin línea divisoria superior del nav
   - La franja Principal/Menú ya tiene su propio cristal
   - Quitamos la línea entre chips superiores y menú principal
   - No toca alturas, botones, textos ni fondos meteorológicos
   ========================================================= */

#site-header .header-nav{
  border-top: 0 !important;
}

#site-header .header-nav::before{
  border-top: 0 !important;
}

/* En modo oscuro/auto también queda limpio */
:root[data-theme="dark"] #site-header .header-nav::before,
html[data-theme="dark"] #site-header .header-nav::before,
html.dark #site-header .header-nav::before,
body.dark #site-header .header-nav::before{
  border-top: 0 !important;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #site-header .header-nav::before,
  html:not([data-theme]) #site-header .header-nav::before,
  :root[data-theme="auto"] #site-header .header-nav::before,
  html[data-theme="auto"] #site-header .header-nav::before{
    border-top: 0 !important;
  }
}

/* =========================================================
   Header dinámico v2.8 — título principal un poco más fino
   - Solo tamaño del título principal
   - No toca colores, degradado, subtítulo, logos ni lógica JS
   - Ajuste suave para que respire mejor en móvil
   ========================================================= */

/* Escritorio / tablet */
#site-header .brand-title strong{
  font-size: clamp(1.92rem, 2.08vw, 2.52rem) !important;
}

/* Móvil vertical */
@media (max-width: 700px) and (orientation: portrait){
  #site-header .brand-title strong{
    font-size: clamp(1.62rem, 7.35vw, 2.12rem) !important;
    max-width: calc(100vw - 126px) !important;
  }
}

/* Móviles estrechos */
@media (max-width: 390px){
  #site-header .brand-title strong{
    font-size: clamp(1.52rem, 7.05vw, 1.92rem) !important;
    max-width: calc(100vw - 114px) !important;
  }
}

/* =========================================================
   Header dinámico v2.9 — título algo más pequeño solo ordenador
   - Solo pantallas escritorio
   - No toca móvil vertical
   - No toca móvil horizontal/tablet
   - No toca colores, degradado, subtítulo, logos ni JS
   ========================================================= */

@media (min-width: 981px){
  #site-header .brand-title strong{
    font-size: clamp(1.78rem, 1.90vw, 2.30rem) !important;
  }
}

/* =========================================================
   Header dinámico v3.0 — Liquid Glass J+A♾️
   - Más transparencia tipo cristal Apple
   - Solo toca fondos/recuadros señalados
   - NO cambia textos
   - NO cambia colores de textos
   - NO cambia botones activos Principal/Menú
   - Funciona móvil/tablet/desktop + claro/oscuro/auto/noche
   ========================================================= */

#site-header{
  --jd-lg-blur: 22px;
  --jd-lg-saturate: 1.34;
  --jd-lg-border-light: rgba(255,255,255,.34);
  --jd-lg-border-dark: rgba(255,255,255,.13);
  --jd-lg-shine-light: rgba(255,255,255,.34);
  --jd-lg-shine-dark: rgba(255,255,255,.10);
}

/* Cristal principal: tarjeta del título/logo */
#site-header .brand::before{
  background:
    radial-gradient(
      circle at 16% 0%,
      rgba(255,255,255,.32),
      rgba(255,255,255,.08) 34%,
      transparent 66%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.155) 0%,
      rgba(255,255,255,.050) 45%,
      rgba(255,255,255,.018) 100%
    ) !important;

  border-color: var(--jd-lg-border-light) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.44),
    inset 0 -1px 0 rgba(255,255,255,.08),
    inset 1px 0 0 rgba(255,255,255,.10),
    0 10px 30px rgba(15,23,42,.045) !important;

  backdrop-filter: blur(var(--jd-lg-blur)) saturate(var(--jd-lg-saturate)) contrast(1.03) !important;
  -webkit-backdrop-filter: blur(var(--jd-lg-blur)) saturate(var(--jd-lg-saturate)) contrast(1.03) !important;
}

/* Cristal de selectores: Estació / Idioma / Tema */
#site-header .header-actions::before{
  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(255,255,255,.26),
      rgba(255,255,255,.065) 38%,
      transparent 70%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.125) 0%,
      rgba(255,255,255,.040) 48%,
      rgba(255,255,255,.014) 100%
    ) !important;

  border-color: rgba(255,255,255,.30) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 8px 24px rgba(15,23,42,.035) !important;

  backdrop-filter: blur(var(--jd-lg-blur)) saturate(var(--jd-lg-saturate)) contrast(1.03) !important;
  -webkit-backdrop-filter: blur(var(--jd-lg-blur)) saturate(var(--jd-lg-saturate)) contrast(1.03) !important;
}

/* Chips internos de Estació / Idioma / Tema: cristal, pero sin tocar texto */
#site-header .header-actions .btn.ghost,
#site-header .header-actions .dropdown > summary{
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.105),
      rgba(255,255,255,.030)
    ) !important;

  border-color: rgba(255,255,255,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(255,255,255,.045),
    0 2px 8px rgba(15,23,42,.025) !important;

  backdrop-filter: blur(16px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.22) !important;
}

/* Franja Principal / Menú: más cristal y menos “velo blanco” */
#site-header .header-nav::before{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.030),
      rgba(255,255,255,.072)
    ) !important;

  border-top-color: transparent !important;
  border-bottom-color: rgba(255,255,255,.12) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10) !important;

  backdrop-filter: blur(16px) saturate(1.22) contrast(1.02) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.22) contrast(1.02) !important;
}

/* Menú desplegable grande */
#site-header .nav-menu-v2-panel{
  background:
    radial-gradient(
      circle at 10% 0%,
      color-mix(in oklab, var(--brand, #10b981) 10%, rgba(255,255,255,.18)),
      transparent 46%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.34),
      rgba(255,255,255,.18)
    ) !important;

  border-color: rgba(255,255,255,.30) !important;

  box-shadow:
    0 24px 70px rgba(2,6,23,.13),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(255,255,255,.08) !important;

  backdrop-filter: blur(26px) saturate(1.24) contrast(1.03) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.24) contrast(1.03) !important;
}

/* Grupos dentro del menú */
#site-header .nav-menu-v2-group{
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.065)
    ) !important;

  border-color: rgba(255,255,255,.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20) !important;

  backdrop-filter: blur(14px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.14) !important;
}

/* Menús pequeños de Estació / Idioma */
#site-header .dropdown .menu{
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.42),
      rgba(255,255,255,.22)
    ) !important;

  border-color: rgba(255,255,255,.30) !important;

  box-shadow:
    0 18px 44px rgba(2,6,23,.12),
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(255,255,255,.08) !important;

  backdrop-filter: blur(24px) saturate(1.22) contrast(1.03) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.22) contrast(1.03) !important;
}

/* Oscuro manual: cristal oscuro, no bloque negro */
:root[data-theme="dark"] #site-header .brand::before,
html[data-theme="dark"] #site-header .brand::before,
html.dark #site-header .brand::before,
body.dark #site-header .brand::before{
  background:
    radial-gradient(
      circle at 16% 0%,
      rgba(255,255,255,.115),
      rgba(15,23,42,.055) 36%,
      transparent 68%
    ),
    linear-gradient(
      135deg,
      rgba(15,23,42,.145),
      rgba(15,23,42,.035)
    ) !important;

  border-color: var(--jd-lg-border-dark) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 12px 30px rgba(0,0,0,.13) !important;
}

:root[data-theme="dark"] #site-header .header-actions::before,
html[data-theme="dark"] #site-header .header-actions::before,
html.dark #site-header .header-actions::before,
body.dark #site-header .header-actions::before{
  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(255,255,255,.095),
      rgba(15,23,42,.045) 38%,
      transparent 70%
    ),
    linear-gradient(
      135deg,
      rgba(15,23,42,.130),
      rgba(15,23,42,.030)
    ) !important;

  border-color: rgba(255,255,255,.115) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 9px 24px rgba(0,0,0,.12) !important;
}

:root[data-theme="dark"] #site-header .header-actions .btn.ghost,
html[data-theme="dark"] #site-header .header-actions .btn.ghost,
html.dark #site-header .header-actions .btn.ghost,
body.dark #site-header .header-actions .btn.ghost,
:root[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html.dark #site-header .header-actions .dropdown > summary,
body.dark #site-header .header-actions .dropdown > summary{
  background:
    linear-gradient(
      135deg,
      rgba(15,23,42,.115),
      rgba(15,23,42,.035)
    ) !important;

  border-color: rgba(255,255,255,.105) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 2px 8px rgba(0,0,0,.09) !important;
}

:root[data-theme="dark"] #site-header .header-nav::before,
html[data-theme="dark"] #site-header .header-nav::before,
html.dark #site-header .header-nav::before,
body.dark #site-header .header-nav::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.020),
      rgba(15,23,42,.070)
    ) !important;

  border-bottom-color: rgba(255,255,255,.050) !important;
}

:root[data-theme="dark"] #site-header .nav-menu-v2-panel,
html[data-theme="dark"] #site-header .nav-menu-v2-panel,
html.dark #site-header .nav-menu-v2-panel,
body.dark #site-header .nav-menu-v2-panel{
  background:
    radial-gradient(
      circle at 10% 0%,
      color-mix(in oklab, var(--brand, #10b981) 12%, rgba(255,255,255,.08)),
      transparent 46%
    ),
    linear-gradient(
      135deg,
      rgba(15,23,42,.40),
      rgba(15,23,42,.24)
    ) !important;

  border-color: rgba(255,255,255,.13) !important;

  box-shadow:
    0 24px 70px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

:root[data-theme="dark"] #site-header .nav-menu-v2-group,
html[data-theme="dark"] #site-header .nav-menu-v2-group,
html.dark #site-header .nav-menu-v2-group,
body.dark #site-header .nav-menu-v2-group{
  background:
    linear-gradient(
      135deg,
      rgba(15,23,42,.24),
      rgba(15,23,42,.075)
    ) !important;

  border-color: rgba(255,255,255,.10) !important;
}

:root[data-theme="dark"] #site-header .dropdown .menu,
html[data-theme="dark"] #site-header .dropdown .menu,
html.dark #site-header .dropdown .menu,
body.dark #site-header .dropdown .menu{
  background:
    linear-gradient(
      135deg,
      rgba(15,23,42,.48),
      rgba(15,23,42,.30)
    ) !important;

  border-color: rgba(255,255,255,.13) !important;
}

/* Auto oscuro real: mismo tratamiento que dark */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header .brand::before,
  html[data-theme="auto"] #site-header .brand::before{
    background:
      radial-gradient(
        circle at 16% 0%,
        rgba(255,255,255,.115),
        rgba(15,23,42,.055) 36%,
        transparent 68%
      ),
      linear-gradient(
        135deg,
        rgba(15,23,42,.145),
        rgba(15,23,42,.035)
      ) !important;
    border-color: var(--jd-lg-border-dark) !important;
  }

  :root[data-theme="auto"] #site-header .header-actions::before,
  html[data-theme="auto"] #site-header .header-actions::before{
    background:
      radial-gradient(
        circle at 18% 0%,
        rgba(255,255,255,.095),
        rgba(15,23,42,.045) 38%,
        transparent 70%
      ),
      linear-gradient(
        135deg,
        rgba(15,23,42,.130),
        rgba(15,23,42,.030)
      ) !important;
    border-color: rgba(255,255,255,.115) !important;
  }

  :root[data-theme="auto"] #site-header .header-actions .btn.ghost,
  html[data-theme="auto"] #site-header .header-actions .btn.ghost,
  :root[data-theme="auto"] #site-header .header-actions .dropdown > summary,
  html[data-theme="auto"] #site-header .header-actions .dropdown > summary{
    background:
      linear-gradient(
        135deg,
        rgba(15,23,42,.115),
        rgba(15,23,42,.035)
      ) !important;
    border-color: rgba(255,255,255,.105) !important;
  }

  :root[data-theme="auto"] #site-header .header-nav::before,
  html[data-theme="auto"] #site-header .header-nav::before{
    background:
      linear-gradient(
        180deg,
        rgba(15,23,42,.020),
        rgba(15,23,42,.070)
      ) !important;
    border-bottom-color: rgba(255,255,255,.050) !important;
  }

  :root[data-theme="auto"] #site-header .nav-menu-v2-panel,
  html[data-theme="auto"] #site-header .nav-menu-v2-panel{
    background:
      radial-gradient(
        circle at 10% 0%,
        color-mix(in oklab, var(--brand, #10b981) 12%, rgba(255,255,255,.08)),
        transparent 46%
      ),
      linear-gradient(
        135deg,
        rgba(15,23,42,.40),
        rgba(15,23,42,.24)
      ) !important;
    border-color: rgba(255,255,255,.13) !important;
  }

  :root[data-theme="auto"] #site-header .dropdown .menu,
  html[data-theme="auto"] #site-header .dropdown .menu{
    background:
      linear-gradient(
        135deg,
        rgba(15,23,42,.48),
        rgba(15,23,42,.30)
      ) !important;
    border-color: rgba(255,255,255,.13) !important;
  }
}

/* Variante nocturna: cristal nocturno aunque la web esté en modo claro */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand::before{
  background:
    radial-gradient(
      circle at 16% 0%,
      rgba(255,255,255,.125),
      rgba(15,23,42,.060) 36%,
      transparent 68%
    ),
    linear-gradient(
      135deg,
      rgba(15,23,42,.165),
      rgba(15,23,42,.045)
    ) !important;

  border-color: rgba(255,255,255,.14) !important;
}

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions::before{
  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(255,255,255,.105),
      rgba(15,23,42,.052) 38%,
      transparent 70%
    ),
    linear-gradient(
      135deg,
      rgba(15,23,42,.145),
      rgba(15,23,42,.040)
    ) !important;

  border-color: rgba(255,255,255,.13) !important;
}

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-nav::before{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.025),
      rgba(15,23,42,.090)
    ) !important;

  border-bottom-color: rgba(255,255,255,.055) !important;
}

/* Móvil: un pelín menos blur para evitar pesadez en iPhone/Android */
@media (max-width: 700px){
  #site-header{
    --jd-lg-blur: 18px;
    --jd-lg-saturate: 1.28;
  }

  #site-header .brand::before,
  #site-header .header-actions::before{
    backdrop-filter: blur(var(--jd-lg-blur)) saturate(var(--jd-lg-saturate)) contrast(1.02) !important;
    -webkit-backdrop-filter: blur(var(--jd-lg-blur)) saturate(var(--jd-lg-saturate)) contrast(1.02) !important;
  }

  #site-header .header-nav::before{
    backdrop-filter: blur(14px) saturate(1.18) contrast(1.02) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.18) contrast(1.02) !important;
  }
}

/* Fallback si backdrop-filter no existe: subimos un poco opacidad para legibilidad */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #site-header .brand::before{
    background: rgba(255,255,255,.34) !important;
  }

  #site-header .header-actions::before{
    background: rgba(255,255,255,.30) !important;
  }

  #site-header .header-nav::before{
    background: rgba(255,255,255,.18) !important;
  }

  :root[data-theme="dark"] #site-header .brand::before,
  html[data-theme="dark"] #site-header .brand::before,
  html.dark #site-header .brand::before,
  body.dark #site-header .brand::before,
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand::before{
    background: rgba(15,23,42,.34) !important;
  }

  :root[data-theme="dark"] #site-header .header-actions::before,
  html[data-theme="dark"] #site-header .header-actions::before,
  html.dark #site-header .header-actions::before,
  body.dark #site-header .header-actions::before,
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions::before{
    background: rgba(15,23,42,.30) !important;
  }
}


/* =========================================================
   Header dinámico v3.1 — Liquid Glass más transparente real
   - Corrige efecto “cristal lechoso” en lluvia/nublado
   - Reduce velo general del header
   - Reduce relleno blanco de tarjetas
   - Reduce blur para que no se vuelva opaco en Safari/iOS
   - NO toca textos ni colores de textos
   ========================================================= */

#site-header{
  --jd-lg-blur: 12px;
  --jd-lg-saturate: 1.16;
}

/* El velo global era parte del problema: lo dejamos casi invisible */
#site-header::after{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018) 0%,
      rgba(255,255,255,.035) 52%,
      rgba(255,255,255,.070) 100%
    ) !important;
}

/* Tarjeta título/logo: menos blanco, más cristal */
#site-header .brand::before{
  background:
    radial-gradient(
      circle at 14% 0%,
      rgba(255,255,255,.16),
      rgba(255,255,255,.035) 34%,
      transparent 68%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.070) 0%,
      rgba(255,255,255,.020) 48%,
      rgba(255,255,255,.006) 100%
    ) !important;

  border-color: rgba(255,255,255,.22) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(255,255,255,.035),
    0 8px 24px rgba(15,23,42,.030) !important;

  backdrop-filter: blur(var(--jd-lg-blur)) saturate(var(--jd-lg-saturate)) contrast(1.01) !important;
  -webkit-backdrop-filter: blur(var(--jd-lg-blur)) saturate(var(--jd-lg-saturate)) contrast(1.01) !important;
}

/* Caja selectores: menos bloque blanco */
#site-header .header-actions::before{
  background:
    radial-gradient(
      circle at 16% 0%,
      rgba(255,255,255,.13),
      rgba(255,255,255,.030) 38%,
      transparent 70%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.060) 0%,
      rgba(255,255,255,.018) 48%,
      rgba(255,255,255,.005) 100%
    ) !important;

  border-color: rgba(255,255,255,.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.030),
    0 7px 20px rgba(15,23,42,.025) !important;

  backdrop-filter: blur(var(--jd-lg-blur)) saturate(var(--jd-lg-saturate)) contrast(1.01) !important;
  -webkit-backdrop-filter: blur(var(--jd-lg-blur)) saturate(var(--jd-lg-saturate)) contrast(1.01) !important;
}

/* Chips internos: casi transparentes */
#site-header .header-actions .btn.ghost,
#site-header .header-actions .dropdown > summary{
  background: rgba(255,255,255,.030) !important;
  border-color: rgba(255,255,255,.105) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 2px 7px rgba(15,23,42,.018) !important;

  backdrop-filter: blur(8px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.10) !important;
}

/* Franja Principal / Menú: quitamos el velo lechoso */
#site-header .header-nav::before{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.010),
      rgba(255,255,255,.040)
    ) !important;

  border-bottom-color: rgba(255,255,255,.075) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055) !important;

  backdrop-filter: blur(8px) saturate(1.10) contrast(1.01) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.10) contrast(1.01) !important;
}

/* En lluvia/nublado, todavía menos velo porque la imagen ya es clara */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="lluvia"]::after,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche_lluvia"]::after,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="nublado"]::after,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche_nublada"]::after,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="tormenta"]::after,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant="noche_tormenta"]::after{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.006) 0%,
      rgba(255,255,255,.018) 52%,
      rgba(255,255,255,.045) 100%
    ) !important;
}

/* Oscuro manual: también más vidrio, menos bloque */
:root[data-theme="dark"] #site-header::after,
html[data-theme="dark"] #site-header::after,
html.dark #site-header::after,
body.dark #site-header::after{
  background:
    linear-gradient(
      180deg,
      rgba(2,6,23,.045) 0%,
      rgba(2,6,23,.075) 52%,
      rgba(2,6,23,.125) 100%
    ) !important;
}

:root[data-theme="dark"] #site-header .brand::before,
html[data-theme="dark"] #site-header .brand::before,
html.dark #site-header .brand::before,
body.dark #site-header .brand::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand::before{
  background:
    radial-gradient(
      circle at 14% 0%,
      rgba(255,255,255,.075),
      rgba(15,23,42,.025) 36%,
      transparent 68%
    ),
    linear-gradient(
      135deg,
      rgba(15,23,42,.080),
      rgba(15,23,42,.020)
    ) !important;

  border-color: rgba(255,255,255,.105) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(255,255,255,.018),
    0 10px 24px rgba(0,0,0,.10) !important;
}

:root[data-theme="dark"] #site-header .header-actions::before,
html[data-theme="dark"] #site-header .header-actions::before,
html.dark #site-header .header-actions::before,
body.dark #site-header .header-actions::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions::before{
  background:
    radial-gradient(
      circle at 16% 0%,
      rgba(255,255,255,.060),
      rgba(15,23,42,.022) 38%,
      transparent 70%
    ),
    linear-gradient(
      135deg,
      rgba(15,23,42,.070),
      rgba(15,23,42,.018)
    ) !important;

  border-color: rgba(255,255,255,.095) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.065),
    0 8px 22px rgba(0,0,0,.09) !important;
}

:root[data-theme="dark"] #site-header .header-actions .btn.ghost,
html[data-theme="dark"] #site-header .header-actions .btn.ghost,
html.dark #site-header .header-actions .btn.ghost,
body.dark #site-header .header-actions .btn.ghost,
:root[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html.dark #site-header .header-actions .dropdown > summary,
body.dark #site-header .header-actions .dropdown > summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .dropdown > summary{
  background: rgba(15,23,42,.050) !important;
  border-color: rgba(255,255,255,.080) !important;
}

/* Auto oscuro real */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header::after,
  html[data-theme="auto"] #site-header::after{
    background:
      linear-gradient(
        180deg,
        rgba(2,6,23,.045) 0%,
        rgba(2,6,23,.075) 52%,
        rgba(2,6,23,.125) 100%
      ) !important;
  }

  :root[data-theme="auto"] #site-header .brand::before,
  html[data-theme="auto"] #site-header .brand::before{
    background:
      radial-gradient(
        circle at 14% 0%,
        rgba(255,255,255,.075),
        rgba(15,23,42,.025) 36%,
        transparent 68%
      ),
      linear-gradient(
        135deg,
        rgba(15,23,42,.080),
        rgba(15,23,42,.020)
      ) !important;
    border-color: rgba(255,255,255,.105) !important;
  }

  :root[data-theme="auto"] #site-header .header-actions::before,
  html[data-theme="auto"] #site-header .header-actions::before{
    background:
      radial-gradient(
        circle at 16% 0%,
        rgba(255,255,255,.060),
        rgba(15,23,42,.022) 38%,
        transparent 70%
      ),
      linear-gradient(
        135deg,
        rgba(15,23,42,.070),
        rgba(15,23,42,.018)
      ) !important;
    border-color: rgba(255,255,255,.095) !important;
  }
}


/* =========================================================
   Header dinámico v3.2 — diagnóstico cristal REAL
   - Casi sin relleno
   - Blur muy bajo para evitar efecto “mancha lechosa” en Safari
   - Solo fondos/recuadros
   - NO toca textos ni colores
   ========================================================= */

#site-header{
  --jd-lg-blur: 3px !important;
  --jd-lg-saturate: 1.02 !important;
}

/* Velo global fuera: que no pinte nada encima del fondo */
#site-header::after{
  background: transparent !important;
}

/* Tarjeta título/logo: cristal casi invisible */
#site-header .brand::before{
  background: rgba(255,255,255,.018) !important;
  border-color: rgba(255,255,255,.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 18px rgba(15,23,42,.018) !important;

  backdrop-filter: blur(var(--jd-lg-blur)) saturate(var(--jd-lg-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--jd-lg-blur)) saturate(var(--jd-lg-saturate)) !important;
}

/* Caja selectores: cristal casi invisible */
#site-header .header-actions::before{
  background: rgba(255,255,255,.014) !important;
  border-color: rgba(255,255,255,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 5px 14px rgba(15,23,42,.014) !important;

  backdrop-filter: blur(var(--jd-lg-blur)) saturate(var(--jd-lg-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--jd-lg-blur)) saturate(var(--jd-lg-saturate)) !important;
}

/* Chips internos: fuera relleno blanco casi por completo */
#site-header .header-actions .btn.ghost,
#site-header .header-actions .dropdown > summary{
  background: rgba(255,255,255,.020) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Franja Principal / Menú: sin velo */
#site-header .header-nav::before{
  background: rgba(255,255,255,.008) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
  box-shadow: none !important;

  backdrop-filter: blur(2px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(2px) saturate(1.02) !important;
}

/* Menú desplegable grande y grupos: también más cristal */
#site-header .nav-menu-v2-panel{
  background: rgba(255,255,255,.24) !important;
  border-color: rgba(255,255,255,.22) !important;

  box-shadow:
    0 18px 44px rgba(2,6,23,.10),
    inset 0 1px 0 rgba(255,255,255,.24) !important;

  backdrop-filter: blur(14px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.10) !important;
}

#site-header .nav-menu-v2-group{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* Oscuro/noche: mismo concepto, nada de bloque negro */
:root[data-theme="dark"] #site-header::after,
html[data-theme="dark"] #site-header::after,
html.dark #site-header::after,
body.dark #site-header::after,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::after{
  background: transparent !important;
}

:root[data-theme="dark"] #site-header .brand::before,
html[data-theme="dark"] #site-header .brand::before,
html.dark #site-header .brand::before,
body.dark #site-header .brand::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand::before{
  background: rgba(15,23,42,.035) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 18px rgba(0,0,0,.08) !important;
}

:root[data-theme="dark"] #site-header .header-actions::before,
html[data-theme="dark"] #site-header .header-actions::before,
html.dark #site-header .header-actions::before,
body.dark #site-header .header-actions::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions::before{
  background: rgba(15,23,42,.030) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 5px 14px rgba(0,0,0,.07) !important;
}

:root[data-theme="dark"] #site-header .header-actions .btn.ghost,
html[data-theme="dark"] #site-header .header-actions .btn.ghost,
html.dark #site-header .header-actions .btn.ghost,
body.dark #site-header .header-actions .btn.ghost,
:root[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html.dark #site-header .header-actions .dropdown > summary,
body.dark #site-header .header-actions .dropdown > summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .dropdown > summary{
  background: rgba(15,23,42,.035) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Auto oscuro */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header::after,
  html[data-theme="auto"] #site-header::after{
    background: transparent !important;
  }

  :root[data-theme="auto"] #site-header .brand::before,
  html[data-theme="auto"] #site-header .brand::before{
    background: rgba(15,23,42,.035) !important;
    border-color: rgba(255,255,255,.10) !important;
  }

  :root[data-theme="auto"] #site-header .header-actions::before,
  html[data-theme="auto"] #site-header .header-actions::before{
    background: rgba(15,23,42,.030) !important;
    border-color: rgba(255,255,255,.09) !important;
  }
}


/* =========================================================
   Header dinámico v3.3 — reborde cristalino 3D
   - Mantiene fondos transparentes de v3.2
   - Añade visibilidad mediante borde/relieve
   - NO cambia textos
   - NO cambia colores de textos
   - NO rellena más los cuadros
   ========================================================= */

/* Tarjeta principal: borde cristal 3D */
#site-header .brand::before{
  border-color: rgba(255,255,255,.44) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(15,23,42,.08),
    inset 1px 0 0 rgba(255,255,255,.20),
    inset -1px 0 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(255,255,255,.10),
    0 10px 26px rgba(15,23,42,.055) !important;
}

/* Brillo superior tipo cristal biselado */
#site-header .brand::after{
  content: "";
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: 8px !important;
  height: 1px !important;
  z-index: -1 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.70),
      transparent
    ) !important;

  opacity: .72 !important;
}

/* Caja selectores: borde más visible, sin rellenar */
#site-header .header-actions::before{
  border-color: rgba(255,255,255,.40) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.54),
    inset 0 -1px 0 rgba(15,23,42,.07),
    inset 1px 0 0 rgba(255,255,255,.16),
    inset -1px 0 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(255,255,255,.08),
    0 8px 22px rgba(15,23,42,.045) !important;
}

/* Brillo superior de la caja de selectores */
#site-header .header-actions::after{
  content: "";
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: 7px !important;
  height: 1px !important;
  z-index: -1 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.58),
      transparent
    ) !important;

  opacity: .66 !important;
}

/* Chips internos: borde cristal más definido */
#site-header .header-actions .btn.ghost,
#site-header .header-actions .dropdown > summary{
  border-color: rgba(255,255,255,.30) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(15,23,42,.055),
    0 0 0 1px rgba(255,255,255,.055),
    0 2px 8px rgba(15,23,42,.025) !important;
}

/* Franja nav: borde inferior cristalino, sin sumar fondo */
#site-header .header-nav::before{
  border-bottom-color: rgba(255,255,255,.22) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 8px 24px rgba(15,23,42,.035) !important;
}

/* Botón Menú neutro: más cristal en el contorno */
#site-header .nav-menu-v2-summary,
#site-header .nav-menu-v2-summary.active{
  border-color: rgba(255,255,255,.36) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(15,23,42,.070),
    0 0 0 1px rgba(255,255,255,.070),
    0 4px 14px rgba(15,23,42,.055) !important;
}

/* Botones no activos: borde un poco más presente */
#site-header .nav.nav-v2 > a:not(.active){
  border-color: rgba(255,255,255,.34) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(15,23,42,.055),
    0 0 0 1px rgba(255,255,255,.06),
    0 4px 14px rgba(15,23,42,.050) !important;
}

/* Oscuro y noches: borde cristal visible sin aclarar el fondo */
:root[data-theme="dark"] #site-header .brand::before,
html[data-theme="dark"] #site-header .brand::before,
html.dark #site-header .brand::before,
body.dark #site-header .brand::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand::before{
  border-color: rgba(255,255,255,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.20),
    inset 1px 0 0 rgba(255,255,255,.07),
    inset -1px 0 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(255,255,255,.035),
    0 10px 26px rgba(0,0,0,.16) !important;
}

:root[data-theme="dark"] #site-header .header-actions::before,
html[data-theme="dark"] #site-header .header-actions::before,
html.dark #site-header .header-actions::before,
body.dark #site-header .header-actions::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions::before{
  border-color: rgba(255,255,255,.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.030),
    0 8px 22px rgba(0,0,0,.14) !important;
}

:root[data-theme="dark"] #site-header .header-actions::after,
html[data-theme="dark"] #site-header .header-actions::after,
html.dark #site-header .header-actions::after,
body.dark #site-header .header-actions::after,
:root[data-theme="dark"] #site-header .brand::after,
html[data-theme="dark"] #site-header .brand::after,
html.dark #site-header .brand::after,
body.dark #site-header .brand::after,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand::after,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions::after{
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.28),
      transparent
    ) !important;

  opacity: .55 !important;
}

:root[data-theme="dark"] #site-header .header-actions .btn.ghost,
html[data-theme="dark"] #site-header .header-actions .btn.ghost,
html.dark #site-header .header-actions .btn.ghost,
body.dark #site-header .header-actions .btn.ghost,
:root[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html.dark #site-header .header-actions .dropdown > summary,
body.dark #site-header .header-actions .dropdown > summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .dropdown > summary{
  border-color: rgba(255,255,255,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 2px 8px rgba(0,0,0,.10) !important;
}

:root[data-theme="dark"] #site-header .nav.nav-v2 > a:not(.active),
html[data-theme="dark"] #site-header .nav.nav-v2 > a:not(.active),
html.dark #site-header .nav.nav-v2 > a:not(.active),
body.dark #site-header .nav.nav-v2 > a:not(.active),
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav.nav-v2 > a:not(.active),
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary.active{
  border-color: rgba(255,255,255,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 4px 14px rgba(0,0,0,.12) !important;
}

/* Auto oscuro real */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header .brand::before,
  html[data-theme="auto"] #site-header .brand::before{
    border-color: rgba(255,255,255,.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -1px 0 rgba(0,0,0,.20),
      0 0 0 1px rgba(255,255,255,.035),
      0 10px 26px rgba(0,0,0,.16) !important;
  }

  :root[data-theme="auto"] #site-header .header-actions::before,
  html[data-theme="auto"] #site-header .header-actions::before{
    border-color: rgba(255,255,255,.16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      inset 0 -1px 0 rgba(0,0,0,.18),
      0 8px 22px rgba(0,0,0,.14) !important;
  }
}


/* =========================================================
   Header dinámico v3.4 — limpieza línea + sombra inferior derecha
   - Quita la línea/brillo superior del título
   - Añade sombra sutil abajo/derecha al reborde exterior
   - NO cambia fondos interiores
   - NO cambia textos ni colores
   ========================================================= */

/* Quitamos la línea superior que se veía encima del título */
#site-header .brand::after{
  display: none !important;
  content: none !important;
}

/* Tarjeta principal: reborde con sombra inferior derecha sutil */
#site-header .brand::before{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.56),
    inset 0 -1px 0 rgba(15,23,42,.075),
    inset 1px 0 0 rgba(255,255,255,.18),
    inset -1px 0 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(255,255,255,.10),
    6px 9px 18px rgba(15,23,42,.070),
    0 10px 26px rgba(15,23,42,.040) !important;
}

/* Caja selectores: misma sombra, un poco más discreta */
#site-header .header-actions::before{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -1px 0 rgba(15,23,42,.065),
    inset 1px 0 0 rgba(255,255,255,.14),
    inset -1px 0 0 rgba(255,255,255,.07),
    0 0 0 1px rgba(255,255,255,.075),
    5px 7px 16px rgba(15,23,42,.055),
    0 8px 22px rgba(15,23,42,.030) !important;
}

/* Franja nav: sombra inferior/derecha casi imperceptible */
#site-header .header-nav::before{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.16),
    0 7px 18px rgba(15,23,42,.040) !important;
}

/* Botón Menú y botones neutros: pequeño relieve inferior derecho */
#site-header .nav-menu-v2-summary,
#site-header .nav-menu-v2-summary.active,
#site-header .nav.nav-v2 > a:not(.active){
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(15,23,42,.055),
    0 0 0 1px rgba(255,255,255,.055),
    3px 4px 10px rgba(15,23,42,.055) !important;
}

/* Oscuro/noche: sombra más profunda pero suave */
:root[data-theme="dark"] #site-header .brand::before,
html[data-theme="dark"] #site-header .brand::before,
html.dark #site-header .brand::before,
body.dark #site-header .brand::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand::before{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.20),
    inset 1px 0 0 rgba(255,255,255,.06),
    inset -1px 0 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(255,255,255,.030),
    7px 10px 20px rgba(0,0,0,.18),
    0 10px 26px rgba(0,0,0,.10) !important;
}

:root[data-theme="dark"] #site-header .header-actions::before,
html[data-theme="dark"] #site-header .header-actions::before,
html.dark #site-header .header-actions::before,
body.dark #site-header .header-actions::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions::before{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.025),
    5px 8px 18px rgba(0,0,0,.16),
    0 8px 22px rgba(0,0,0,.09) !important;
}

:root[data-theme="dark"] #site-header .nav-menu-v2-summary,
html[data-theme="dark"] #site-header .nav-menu-v2-summary,
html.dark #site-header .nav-menu-v2-summary,
body.dark #site-header .nav-menu-v2-summary,
:root[data-theme="dark"] #site-header .nav.nav-v2 > a:not(.active),
html[data-theme="dark"] #site-header .nav.nav-v2 > a:not(.active),
html.dark #site-header .nav.nav-v2 > a:not(.active),
body.dark #site-header .nav.nav-v2 > a:not(.active),
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav.nav-v2 > a:not(.active){
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.16),
    3px 4px 11px rgba(0,0,0,.13) !important;
}

/* Auto oscuro */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header .brand::before,
  html[data-theme="auto"] #site-header .brand::before{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      inset 0 -1px 0 rgba(0,0,0,.20),
      0 0 0 1px rgba(255,255,255,.030),
      7px 10px 20px rgba(0,0,0,.18),
      0 10px 26px rgba(0,0,0,.10) !important;
  }

  :root[data-theme="auto"] #site-header .header-actions::before,
  html[data-theme="auto"] #site-header .header-actions::before{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -1px 0 rgba(0,0,0,.18),
      0 0 0 1px rgba(255,255,255,.025),
      5px 8px 18px rgba(0,0,0,.16),
      0 8px 22px rgba(0,0,0,.09) !important;
  }
}


/* =========================================================
   Header dinámico v3.5 — sin líneas superiores + sombra fina
   - Elimina brillos lineales superiores en título y selectores
   - Sombra más nítida y fina abajo/derecha
   - NO cambia fondos interiores
   - NO cambia textos ni colores
   ========================================================= */

/* Fuera líneas/brillos horizontales que molestan */
#site-header .brand::after,
#site-header .header-actions::after{
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* Tarjeta principal: sombra más fina y definida */
#site-header .brand::before{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -1px 0 rgba(15,23,42,.060),
    inset 1px 0 0 rgba(255,255,255,.16),
    inset -1px 0 0 rgba(255,255,255,.07),
    0 0 0 1px rgba(255,255,255,.10),
    4px 5px 9px rgba(15,23,42,.085),
    9px 12px 20px rgba(15,23,42,.040) !important;
}

/* Caja selectores: mismo criterio, algo más suave */
#site-header .header-actions::before{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.44),
    inset 0 -1px 0 rgba(15,23,42,.055),
    inset 1px 0 0 rgba(255,255,255,.13),
    inset -1px 0 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(255,255,255,.075),
    3px 4px 8px rgba(15,23,42,.070),
    7px 9px 16px rgba(15,23,42,.032) !important;
}

/* Chips internos: relieve fino sin engordar */
#site-header .header-actions .btn.ghost,
#site-header .header-actions .dropdown > summary{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(15,23,42,.045),
    0 0 0 1px rgba(255,255,255,.050),
    2px 3px 6px rgba(15,23,42,.040) !important;
}

/* Principal / Menú neutros: sombra fina tipo objeto flotante */
#site-header .nav-menu-v2-summary,
#site-header .nav-menu-v2-summary.active,
#site-header .nav.nav-v2 > a:not(.active){
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(15,23,42,.050),
    0 0 0 1px rgba(255,255,255,.050),
    2px 3px 7px rgba(15,23,42,.070) !important;
}

/* Franja nav: quitamos cualquier línea superior residual */
#site-header .header-nav,
#site-header .header-nav::before{
  border-top: 0 !important;
}

#site-header .header-nav::before{
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.13),
    0 5px 12px rgba(15,23,42,.030) !important;
}

/* Oscuro/noche: sombra fina pero con profundidad */
:root[data-theme="dark"] #site-header .brand::before,
html[data-theme="dark"] #site-header .brand::before,
html.dark #site-header .brand::before,
body.dark #site-header .brand::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand::before{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.20),
    inset 1px 0 0 rgba(255,255,255,.055),
    inset -1px 0 0 rgba(255,255,255,.030),
    0 0 0 1px rgba(255,255,255,.028),
    4px 5px 10px rgba(0,0,0,.22),
    8px 11px 18px rgba(0,0,0,.12) !important;
}

:root[data-theme="dark"] #site-header .header-actions::before,
html[data-theme="dark"] #site-header .header-actions::before,
html.dark #site-header .header-actions::before,
body.dark #site-header .header-actions::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions::before{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.024),
    3px 4px 9px rgba(0,0,0,.18),
    7px 9px 16px rgba(0,0,0,.10) !important;
}

:root[data-theme="dark"] #site-header .header-actions .btn.ghost,
html[data-theme="dark"] #site-header .header-actions .btn.ghost,
html.dark #site-header .header-actions .btn.ghost,
body.dark #site-header .header-actions .btn.ghost,
:root[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html.dark #site-header .header-actions .dropdown > summary,
body.dark #site-header .header-actions .dropdown > summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .dropdown > summary{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.095),
    inset 0 -1px 0 rgba(0,0,0,.14),
    2px 3px 7px rgba(0,0,0,.12) !important;
}

:root[data-theme="dark"] #site-header .nav-menu-v2-summary,
html[data-theme="dark"] #site-header .nav-menu-v2-summary,
html.dark #site-header .nav-menu-v2-summary,
body.dark #site-header .nav-menu-v2-summary,
:root[data-theme="dark"] #site-header .nav.nav-v2 > a:not(.active),
html[data-theme="dark"] #site-header .nav.nav-v2 > a:not(.active),
html.dark #site-header .nav.nav-v2 > a:not(.active),
body.dark #site-header .nav.nav-v2 > a:not(.active),
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav.nav-v2 > a:not(.active){
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -1px 0 rgba(0,0,0,.14),
    2px 3px 8px rgba(0,0,0,.15) !important;
}

/* Auto oscuro */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header .brand::after,
  html[data-theme="auto"] #site-header .brand::after,
  :root[data-theme="auto"] #site-header .header-actions::after,
  html[data-theme="auto"] #site-header .header-actions::after{
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    background: transparent !important;
  }

  :root[data-theme="auto"] #site-header .brand::before,
  html[data-theme="auto"] #site-header .brand::before{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -1px 0 rgba(0,0,0,.20),
      0 0 0 1px rgba(255,255,255,.028),
      4px 5px 10px rgba(0,0,0,.22),
      8px 11px 18px rgba(0,0,0,.12) !important;
  }

  :root[data-theme="auto"] #site-header .header-actions::before,
  html[data-theme="auto"] #site-header .header-actions::before{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.105),
      inset 0 -1px 0 rgba(0,0,0,.18),
      0 0 0 1px rgba(255,255,255,.024),
      3px 4px 9px rgba(0,0,0,.18),
      7px 9px 16px rgba(0,0,0,.10) !important;
  }
}


/* =========================================================
   Header dinámico v3.6 — reborde solo en franja Principal/Menú
   - Recupera el contorno del recuadro inferior
   - Solo afecta a #site-header .header-nav::before
   - NO toca título
   - NO toca selectores
   - NO toca textos ni colores
   ========================================================= */

#site-header .header-nav::before{
  border-top: 1px solid rgba(255,255,255,.16) !important;
  border-bottom: 1px solid rgba(255,255,255,.24) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.22),
    0 1px 0 rgba(255,255,255,.10),
    0 5px 12px rgba(15,23,42,.030),
    3px 5px 11px rgba(15,23,42,.040) !important;
}

/* Un pelín más visible en móvil, donde el fondo es más claro */
@media (max-width: 700px){
  #site-header .header-nav::before{
    border-top-color: rgba(255,255,255,.20) !important;
    border-bottom-color: rgba(255,255,255,.30) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(255,255,255,.28),
      0 1px 0 rgba(255,255,255,.12),
      0 5px 12px rgba(15,23,42,.035),
      3px 5px 11px rgba(15,23,42,.045) !important;
  }
}

/* Oscuro/noche: contorno propio, sin aclarar el fondo */
:root[data-theme="dark"] #site-header .header-nav::before,
html[data-theme="dark"] #site-header .header-nav::before,
html.dark #site-header .header-nav::before,
body.dark #site-header .header-nav::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-nav::before{
  border-top: 1px solid rgba(255,255,255,.070) !important;
  border-bottom: 1px solid rgba(255,255,255,.105) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(255,255,255,.080),
    0 5px 12px rgba(0,0,0,.10),
    3px 5px 11px rgba(0,0,0,.12) !important;
}

/* Auto oscuro */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header .header-nav::before,
  html[data-theme="auto"] #site-header .header-nav::before{
    border-top: 1px solid rgba(255,255,255,.070) !important;
    border-bottom: 1px solid rgba(255,255,255,.105) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.075),
      inset 0 -1px 0 rgba(255,255,255,.080),
      0 5px 12px rgba(0,0,0,.10),
      3px 5px 11px rgba(0,0,0,.12) !important;
  }
}


/* =========================================================
   Header dinámico v3.7 — textos chips blanco/negro puro
   - Claro / auto claro: negro puro
   - Oscuro / auto oscuro: blanco puro
   - Solo afecta a Estació / Llengua / Tema y sus valores
   ========================================================= */

/* Claro explícito + auto claro + sin tema manual */
#site-header .header-actions,
#site-header .header-actions .btn.ghost,
#site-header .header-actions .dropdown > summary,
#site-header .header-actions .badge,
#site-header .header-actions .chip-current,
#site-header .header-actions button,
#site-header .header-actions summary{
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}

:root[data-theme="light"] #site-header .header-actions,
html[data-theme="light"] #site-header .header-actions,
:root[data-theme="auto"] #site-header .header-actions,
html[data-theme="auto"] #site-header .header-actions{
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* Oscuro explícito */
:root[data-theme="dark"] #site-header .header-actions,
html[data-theme="dark"] #site-header .header-actions,
html.dark #site-header .header-actions,
body.dark #site-header .header-actions,
:root[data-theme="dark"] #site-header .header-actions .btn.ghost,
html[data-theme="dark"] #site-header .header-actions .btn.ghost,
html.dark #site-header .header-actions .btn.ghost,
body.dark #site-header .header-actions .btn.ghost,
:root[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html[data-theme="dark"] #site-header .header-actions .dropdown > summary,
html.dark #site-header .header-actions .dropdown > summary,
body.dark #site-header .header-actions .dropdown > summary,
:root[data-theme="dark"] #site-header .header-actions .badge,
html[data-theme="dark"] #site-header .header-actions .badge,
html.dark #site-header .header-actions .badge,
body.dark #site-header .header-actions .badge,
:root[data-theme="dark"] #site-header .header-actions .chip-current,
html[data-theme="dark"] #site-header .header-actions .chip-current,
html.dark #site-header .header-actions .chip-current,
body.dark #site-header .header-actions .chip-current{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

/* Auto oscuro real según sistema */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header .header-actions,
  html[data-theme="auto"] #site-header .header-actions,
  :root[data-theme="auto"] #site-header .header-actions .btn.ghost,
  html[data-theme="auto"] #site-header .header-actions .btn.ghost,
  :root[data-theme="auto"] #site-header .header-actions .dropdown > summary,
  html[data-theme="auto"] #site-header .header-actions .dropdown > summary,
  :root[data-theme="auto"] #site-header .header-actions .badge,
  html[data-theme="auto"] #site-header .header-actions .badge,
  :root[data-theme="auto"] #site-header .header-actions .chip-current,
  html[data-theme="auto"] #site-header .header-actions .chip-current,
  :root:not([data-theme]) #site-header .header-actions,
  html:not([data-theme]) #site-header .header-actions,
  :root:not([data-theme]) #site-header .header-actions .btn.ghost,
  html:not([data-theme]) #site-header .header-actions .btn.ghost,
  :root:not([data-theme]) #site-header .header-actions .dropdown > summary,
  html:not([data-theme]) #site-header .header-actions .dropdown > summary,
  :root:not([data-theme]) #site-header .header-actions .badge,
  html:not([data-theme]) #site-header .header-actions .badge,
  :root:not([data-theme]) #site-header .header-actions .chip-current,
  html:not([data-theme]) #site-header .header-actions .chip-current{
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
  }
}

/* Si el header fuerza noche visual, mantenemos blanco para legibilidad */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .dropdown > summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .badge,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .chip-current{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}


/* =========================================================
   Header dinámico v3.8 — modo noche manda sobre tema claro
   - Si la variante meteorológica es nocturna, el header se pinta como oscuro
   - Corrige badges blancos con texto blanco en modo Claro + noche
   - No cambia el tema global de la web
   ========================================================= */

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]{
  color-scheme: dark !important;
}

/* Textos generales del header nocturno */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand-title strong,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand-title .brand-subtitle,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .season-pill,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .season-label,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .badge,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .chip-current,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .dropdown > summary{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.38),
    0 3px 10px rgba(0,0,0,.18) !important;
}

/* Badge interno: Estació / Llengua / Tema.
   Esta era la pieza puñetera: en modo claro seguía quedando blanco. */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .badge{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.78),
      rgba(15,23,42,.56)
    ) !important;

  border-color: rgba(255,255,255,.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 2px 7px rgba(0,0,0,.14) !important;
}

/* Botones completos: Estació Centre / Llengua CA / Tema Clar */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .dropdown > summary{
  background:
    linear-gradient(
      135deg,
      rgba(15,23,42,.34),
      rgba(15,23,42,.14)
    ) !important;

  border-color: rgba(255,255,255,.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.18),
    2px 3px 8px rgba(0,0,0,.14) !important;
}

/* Caja exterior de los selectores */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions::before{
  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(255,255,255,.09),
      rgba(15,23,42,.05) 38%,
      transparent 70%
    ),
    linear-gradient(
      135deg,
      rgba(15,23,42,.18),
      rgba(15,23,42,.055)
    ) !important;

  border-color: rgba(255,255,255,.15) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.18),
    3px 4px 9px rgba(0,0,0,.18),
    7px 9px 16px rgba(0,0,0,.10) !important;
}

/* Primavera / Verano / etc. en noche: también estilo oscuro */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .season-pill{
  background:
    linear-gradient(
      135deg,
      rgba(15,23,42,.38),
      rgba(15,23,42,.18)
    ) !important;

  border-color: rgba(255,255,255,.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.18),
    2px 3px 8px rgba(0,0,0,.14) !important;
}

/* Menús desplegables pequeños en noche aunque el tema sea Claro */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .dropdown .menu{
  background:
    linear-gradient(
      135deg,
      rgba(15,23,42,.72),
      rgba(15,23,42,.48)
    ) !important;

  border-color: rgba(255,255,255,.14) !important;

  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.10) !important;

  backdrop-filter: blur(22px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
}

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .dropdown .menu a,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .dropdown .menu button{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .dropdown .menu a.active,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .dropdown .menu button.active,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .dropdown .menu a:hover,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .dropdown .menu button:hover{
  background: rgba(255,255,255,.09) !important;
}


/* =========================================================
   Header dinámico v3.9 — recuperar degradado título en modo noche
   - Corrige el blanco plano provocado por v3.8
   - En variantes nocturnas: blanco -> color de paleta
   - No toca chips, badges, menús ni tema global
   ========================================================= */

/* Fallback si no hay background-clip:text */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand-title strong{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;

  text-shadow:
    0 1px 2px rgba(0,0,0,.42),
    0 4px 14px rgba(0,0,0,.26) !important;

  filter: none !important;
}

/* Navegadores modernos: degradado nocturno igual que siempre */
@supports (-webkit-background-clip: text) {
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand-title strong{
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    background-image:
      linear-gradient(
        90deg,
        rgba(255,255,255,.99) 0%,
        rgba(255,255,255,.99) 34%,
        color-mix(
          in oklab,
          rgba(255,255,255,.96) 66%,
          var(--brand-400, var(--brand-accent, var(--brand, #38bdf8))) 34%
        ) 58%,
        color-mix(
          in oklab,
          var(--brand-400, var(--brand-accent, var(--brand, #38bdf8))) 88%,
          white 12%
        ) 82%,
        color-mix(
          in oklab,
          var(--brand-500, var(--brand, #0ea5e9)) 86%,
          white 14%
        ) 100%
      ) !important;

    text-shadow: none !important;

    filter:
      drop-shadow(0 1px 2px rgba(0,0,0,.34))
      drop-shadow(0 4px 12px rgba(0,0,0,.22)) !important;
  }
}

/* =========================================================
   Header dinámico v4.5 — normalización glass nocturna
   - Mantener color del título (v3.9)
   - Unificar los 3 recuadros
   - Nada de azul opaco encima del fondo
   ========================================================= */

/* Variables únicas para los 3 paneles */
#site-header{
  --jd-panel-fill-1: rgba(255,255,255,.12);
  --jd-panel-fill-2: rgba(255,255,255,.055);
  --jd-panel-border: rgba(255,255,255,.26);
  --jd-panel-border-soft: rgba(255,255,255,.14);
  --jd-panel-shadow: rgba(0,0,0,.10);
  --jd-panel-blur: 6px;
}

/* En noche NO añadimos velo extra oscuro/azul */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::after{
  background: transparent !important;
}

/* El fondo del header debe seguir viéndose */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::before{
  opacity: .96 !important;
  filter: brightness(1.03) saturate(1.02) contrast(1.01) !important;
}

/* MISMO estilo base para los 3 recuadros */
#site-header .brand::before,
#site-header .header-actions::before,
#site-header .header-nav::before{
  background:
    linear-gradient(
      135deg,
      var(--jd-panel-fill-1),
      var(--jd-panel-fill-2)
    ) !important;

  border: 1px solid var(--jd-panel-border) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.05),
    0 0 0 1px var(--jd-panel-border-soft),
    0 6px 18px var(--jd-panel-shadow) !important;

  backdrop-filter: blur(var(--jd-panel-blur)) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(var(--jd-panel-blur)) saturate(1.08) !important;
}

/* Nada de líneas/brillos raros arriba */
#site-header .brand::after,
#site-header .header-actions::after{
  display: none !important;
  content: none !important;
}

/* Chips y botones internos: mismo lenguaje visual */
#site-header .header-actions .btn.ghost,
#site-header .header-actions .dropdown > summary,
#site-header .nav-menu-v2-summary,
#site-header .nav.nav-v2 > a:not(.active){
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.045)
    ) !important;

  border: 1px solid rgba(255,255,255,.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 2px 8px rgba(0,0,0,.08) !important;
}

/* Badges tipo “Estació / Llengua / Tema” */
#site-header .header-actions .badge{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.28),
      rgba(15,23,42,.16)
    ) !important;

  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 1px 4px rgba(0,0,0,.06) !important;
}

/* Textos blancos auxiliares */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand-title .brand-subtitle,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .season-label,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .chip-current,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .badge,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}


/* =========================================================
   Header dinámico v4.6 — cristal fino real J+A♾️
   - Corrige opacidad azul/leche en modo noche
   - Los 3 recuadros usan el mismo estilo
   - Mantiene título degradado v3.9
   - No toca layout ni botones activos
   ========================================================= */

#site-header{
  --jd-panel-fill: rgba(255,255,255,.018);
  --jd-panel-fill-soft: rgba(255,255,255,.006);
  --jd-panel-border: rgba(255,255,255,.24);
  --jd-panel-border-inner: rgba(255,255,255,.12);
  --jd-panel-shadow: rgba(0,0,0,.10);
  --jd-panel-blur: 2px;
}

/* En noche, el fondo debe verse vivo, no apagado por velos */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::after{
  background: transparent !important;
}

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::before{
  opacity: .98 !important;
  filter: brightness(1.04) saturate(1.04) contrast(1.02) !important;
}

/* Los 3 recuadros: título, chips y menú inferior */
#site-header .brand::before,
#site-header .header-actions::before,
#site-header .header-nav::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-nav::before{
  background:
    linear-gradient(
      135deg,
      var(--jd-panel-fill),
      var(--jd-panel-fill-soft)
    ) !important;

  border: 1px solid var(--jd-panel-border) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 0 0 1px var(--jd-panel-border-inner),
    3px 5px 12px var(--jd-panel-shadow) !important;

  backdrop-filter: blur(var(--jd-panel-blur)) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(var(--jd-panel-blur)) saturate(1.03) !important;
}

/* La franja inferior ocupa todo el ancho: aún menos relleno para que no parezca una banda azul */
#site-header .header-nav::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-nav::before{
  background: rgba(255,255,255,.006) !important;

  border-top: 1px solid rgba(255,255,255,.16) !important;
  border-bottom: 1px solid rgba(255,255,255,.24) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(255,255,255,.16),
    0 4px 10px rgba(0,0,0,.08) !important;

  backdrop-filter: blur(1.5px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(1.5px) saturate(1.02) !important;
}

/* Fuera brillos lineales superiores */
#site-header .brand::after,
#site-header .header-actions::after{
  display: none !important;
  content: none !important;
}

/* Chips internos: que no sean cápsulas opacas */
#site-header .header-actions .btn.ghost,
#site-header .header-actions .dropdown > summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .dropdown > summary{
  background: rgba(255,255,255,.018) !important;
  border: 1px solid rgba(255,255,255,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    2px 3px 7px rgba(0,0,0,.08) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Etiqueta interior Estació / Llengua / Tema: un poco más marcada para leer */
#site-header .header-actions .badge,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .badge{
  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,.42),
      rgba(15,23,42,.24)
    ) !important;

  border: 1px solid rgba(255,255,255,.16) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 2px 6px rgba(0,0,0,.10) !important;
}

/* Botón Menú y botones no activos: mismo cristal fino */
#site-header .nav-menu-v2-summary,
#site-header .nav-menu-v2-summary.active,
#site-header .nav.nav-v2 > a:not(.active),
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary.active,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav.nav-v2 > a:not(.active){
  background: rgba(255,255,255,.018) !important;
  border: 1px solid rgba(255,255,255,.22) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    2px 3px 8px rgba(0,0,0,.10) !important;
}

/* Textos del header nocturno */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand-title .brand-subtitle,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .season-label,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .chip-current,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav.nav-v2 > a:not(.active){
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.30) !important;
}


/* =========================================================
   Header dinámico v4.7 — mismo cristal en los 3 recuadros
   - Título, selectores y nav usan EXACTAMENTE la misma translucidez
   - Corrige que arriba quedara más opaco que abajo
   - Mantiene degradado del título y textos nocturnos
   ========================================================= */

#site-header{
  --jd-glass-bg-final: rgba(255,255,255,.006);
  --jd-glass-border-top-final: rgba(255,255,255,.16);
  --jd-glass-border-bottom-final: rgba(255,255,255,.24);
  --jd-glass-inset-top-final: rgba(255,255,255,.13);
  --jd-glass-inset-bottom-final: rgba(255,255,255,.16);
  --jd-glass-shadow-final: rgba(0,0,0,.08);
  --jd-glass-blur-final: 1.5px;
}

/* Mismo cristal exacto para los 3 fondos principales */
#site-header .brand::before,
#site-header .header-actions::before,
#site-header .header-nav::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-nav::before{
  background: var(--jd-glass-bg-final) !important;

  border-top: 1px solid var(--jd-glass-border-top-final) !important;
  border-right: 1px solid rgba(255,255,255,.20) !important;
  border-bottom: 1px solid var(--jd-glass-border-bottom-final) !important;
  border-left: 1px solid rgba(255,255,255,.20) !important;

  box-shadow:
    inset 0 1px 0 var(--jd-glass-inset-top-final),
    inset 0 -1px 0 var(--jd-glass-inset-bottom-final),
    0 4px 10px var(--jd-glass-shadow-final) !important;

  backdrop-filter: blur(var(--jd-glass-blur-final)) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(var(--jd-glass-blur-final)) saturate(1.02) !important;
}

/* Respetamos formas propias */
#site-header .brand::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand::before{
  border-radius: inherit !important;
}

#site-header .header-actions::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions::before{
  border-radius: inherit !important;
}

#site-header .header-nav::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-nav::before{
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Quitamos brillos/líneas fantasma de arriba */
#site-header .brand::after,
#site-header .header-actions::after{
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* En variantes nocturnas, nada de velo oscuro global */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::after{
  background: transparent !important;
}

/* La imagen nocturna debe verse, no apagarse */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::before{
  opacity: .98 !important;
  filter: brightness(1.04) saturate(1.04) contrast(1.02) !important;
}

/* Auto oscuro: misma lógica si el header está en noche */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand::before,
  html[data-theme="auto"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand::before,
  :root[data-theme="auto"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions::before,
  html[data-theme="auto"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions::before,
  :root[data-theme="auto"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-nav::before,
  html[data-theme="auto"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-nav::before{
    background: var(--jd-glass-bg-final) !important;

    border-top-color: var(--jd-glass-border-top-final) !important;
    border-bottom-color: var(--jd-glass-border-bottom-final) !important;

    box-shadow:
      inset 0 1px 0 var(--jd-glass-inset-top-final),
      inset 0 -1px 0 var(--jd-glass-inset-bottom-final),
      0 4px 10px var(--jd-glass-shadow-final) !important;

    backdrop-filter: blur(var(--jd-glass-blur-final)) saturate(1.02) !important;
    -webkit-backdrop-filter: blur(var(--jd-glass-blur-final)) saturate(1.02) !important;
  }
}

/* Los chips internos no deben rellenar más que su caja */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .dropdown > summary,
#site-header .header-actions .btn.ghost,
#site-header .header-actions .dropdown > summary{
  background: rgba(255,255,255,.010) !important;
  border-color: rgba(255,255,255,.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    1px 2px 5px rgba(0,0,0,.07) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Botón Menú y botones neutros: mismo nivel de cristal */
#site-header .nav-menu-v2-summary,
#site-header .nav-menu-v2-summary.active,
#site-header .nav.nav-v2 > a:not(.active),
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary.active,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav.nav-v2 > a:not(.active){
  background: rgba(255,255,255,.010) !important;
  border-color: rgba(255,255,255,.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    1px 2px 6px rgba(0,0,0,.08) !important;
}


/* =========================================================
   Header dinámico v5.0 — GLASS MASTER CLEAN
   - Mata el efecto lechoso de Safari/iOS quitando blur en paneles grandes
   - Unifica título, selectores y franja Principal/Menú
   - Neutraliza fondos internos heredados de v3/v4
   - Mantiene colores/degradado del título
   ========================================================= */

#site-header{
  --jd-master-panel-bg: rgba(255,255,255,.16);
  --jd-master-panel-border: rgba(255,255,255,.30);
  --jd-master-panel-border-strong: rgba(255,255,255,.38);
  --jd-master-panel-shadow: rgba(15,23,42,.10);

  --jd-master-chip-bg: rgba(255,255,255,.10);
  --jd-master-chip-border: rgba(255,255,255,.24);
  --jd-master-chip-shadow: rgba(15,23,42,.08);
}

/* Si la escena es nocturna, el cristal usa tinte oscuro suave.
   No usamos blur: el blur era el que convertía la luna/nube en mancha opaca. */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]{
  --jd-master-panel-bg: rgba(3,10,24,.18);
  --jd-master-panel-border: rgba(255,255,255,.18);
  --jd-master-panel-border-strong: rgba(255,255,255,.25);
  --jd-master-panel-shadow: rgba(0,0,0,.22);

  --jd-master-chip-bg: rgba(3,10,24,.20);
  --jd-master-chip-border: rgba(255,255,255,.17);
  --jd-master-chip-shadow: rgba(0,0,0,.18);
}

/* El velo global nocturno fuera: queremos ver la imagen */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::after{
  background: transparent !important;
}

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"]::before{
  opacity: .98 !important;
  filter: brightness(1.04) saturate(1.04) contrast(1.02) !important;
}

/* Los 3 recuadros principales: mismo tratamiento real */
#site-header .brand::before,
#site-header .header-actions::before,
#site-header .header-nav::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-nav::before{
  background: var(--jd-master-panel-bg) !important;

  border: 1px solid var(--jd-master-panel-border) !important;

  box-shadow:
    inset 0 1px 0 var(--jd-master-panel-border-strong),
    inset 0 -1px 0 rgba(0,0,0,.10),
    3px 5px 12px var(--jd-master-panel-shadow) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* La franja inferior es full-width: sin laterales para que no dibuje una caja rara */
#site-header .header-nav::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-nav::before{
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Fuera brillos/líneas fantasma superiores */
#site-header .brand::after,
#site-header .header-actions::after{
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* Chips internos de Estació / Idioma / Tema */
#site-header .header-actions .btn.ghost,
#site-header .header-actions .dropdown > summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .dropdown > summary{
  background: var(--jd-master-chip-bg) !important;
  border: 1px solid var(--jd-master-chip-border) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    2px 3px 7px var(--jd-master-chip-shadow) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Mini badge interior: Estació / Llengua / Tema */
#site-header .header-actions .badge,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .badge{
  background: rgba(3,10,24,.28) !important;
  border: 1px solid rgba(255,255,255,.18) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 2px 6px rgba(0,0,0,.12) !important;
}

/* Primavera / estación del año: que no cree otra cápsula opaca encima del título */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .season-pill{
  background: rgba(3,10,24,.20) !important;
  border: 1px solid rgba(255,255,255,.17) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    2px 3px 7px rgba(0,0,0,.16) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Botón Menú y botones neutros de navegación */
#site-header .nav-menu-v2-summary,
#site-header .nav-menu-v2-summary.active,
#site-header .nav.nav-v2 > a:not(.active),
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary.active,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav.nav-v2 > a:not(.active){
  background: var(--jd-master-chip-bg) !important;
  border: 1px solid var(--jd-master-chip-border) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    2px 3px 7px var(--jd-master-chip-shadow) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Textos nocturnos auxiliares blancos */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .brand-title .brand-subtitle,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .season-label,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .chip-current,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .header-actions .dropdown > summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant^="noche"] .nav.nav-v2 > a:not(.active){
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.32) !important;
}

/* Auto oscuro real: si el sistema está oscuro y el tema está en Auto, usamos el mismo vidrio nocturno */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header,
  html[data-theme="auto"] #site-header{
    --jd-master-panel-bg: rgba(3,10,24,.18);
    --jd-master-panel-border: rgba(255,255,255,.18);
    --jd-master-panel-border-strong: rgba(255,255,255,.25);
    --jd-master-panel-shadow: rgba(0,0,0,.22);

    --jd-master-chip-bg: rgba(3,10,24,.20);
    --jd-master-chip-border: rgba(255,255,255,.17);
    --jd-master-chip-shadow: rgba(0,0,0,.18);
  }
}


/* =========================================================
   Header dinámico v4.8 — noche sin cristal lechoso
   - Elimina el blur en los 3 recuadros nocturnos
   - Mantiene fondo visible
   - Mismo estilo en título, chips y franja menú
   - No toca colores del título ni layout
   ========================================================= */

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant*="noche"]{
  --jd-night-glass-bg: rgba(255,255,255,.018);
  --jd-night-glass-border: rgba(255,255,255,.26);
  --jd-night-glass-border-soft: rgba(255,255,255,.12);
  --jd-night-glass-shadow: rgba(0,0,0,.16);
}

/* Sin velo global nocturno */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant*="noche"]::after{
  background: transparent !important;
}

/* Fondo nocturno vivo */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant*="noche"]::before{
  opacity: .98 !important;
  filter: brightness(1.04) saturate(1.04) contrast(1.02) !important;
}

/* Los 3 recuadros principales EXACTAMENTE iguales */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant*="noche"] .brand::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant*="noche"] .header-actions::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant*="noche"] .header-nav::before{
  background: var(--jd-night-glass-bg) !important;

  border: 1px solid var(--jd-night-glass-border) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px var(--jd-night-glass-border-soft),
    3px 5px 12px var(--jd-night-glass-shadow) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* La franja inferior no necesita laterales porque ocupa todo el ancho */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant*="noche"] .header-nav::before{
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Fuera brillos fantasmas */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant*="noche"] .brand::after,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant*="noche"] .header-actions::after{
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* Chips internos: cristal fino sin volverse cápsulas opacas */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant*="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant*="noche"] .header-actions .dropdown > summary{
  background: rgba(255,255,255,.018) !important;
  border: 1px solid rgba(255,255,255,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    1px 2px 6px rgba(0,0,0,.12) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Botón Menú y botones no activos */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant*="noche"] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant*="noche"] .nav-menu-v2-summary.active,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant*="noche"] .nav.nav-v2 > a:not(.active){
  background: rgba(255,255,255,.018) !important;
  border: 1px solid rgba(255,255,255,.22) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    1px 2px 7px rgba(0,0,0,.14) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* === J+A NIGHT VIP CLEAN START === */
/*
   Header noche VIP J+A
   - Sustituye las últimas correcciones nocturnas conflictivas
   - Usa especificidad alta para ganar a reglas antiguas
   - Recuadros un poco más opacos, sin efecto lechoso
   - Mismo lenguaje visual para título, selectores y franja Principal/Menú
   - No toca layout ni degradado del título
*/

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"]{
  --jd-night-vip-panel-bg: rgba(6,16,36,.28);
  --jd-night-vip-chip-bg: rgba(6,16,36,.34);

  --jd-night-vip-border-top: rgba(255,255,255,.30);
  --jd-night-vip-border-side: rgba(255,255,255,.30);
  --jd-night-vip-border-bottom: rgba(255,255,255,.40);

  --jd-night-vip-shadow: rgba(0,0,0,.24);
}

/* Sin velo global: la imagen nocturna sigue viva */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"]::after{
  background: transparent !important;
}

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"]::before{
  opacity: .98 !important;
  filter: brightness(1.04) saturate(1.04) contrast(1.02) !important;
}

/* Los 3 recuadros principales: título, selectores y franja inferior */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .brand::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .header-actions::before,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .header-nav::before{
  background: var(--jd-night-vip-panel-bg) !important;

  border-top: 1px solid var(--jd-night-vip-border-top) !important;
  border-right: 1px solid var(--jd-night-vip-border-side) !important;
  border-bottom: 1px solid var(--jd-night-vip-border-bottom) !important;
  border-left: 1px solid var(--jd-night-vip-border-side) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.08),
    4px 6px 14px var(--jd-night-vip-shadow) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* La franja inferior es de ancho completo: sin laterales */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .header-nav::before{
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Fuera brillos/líneas fantasma */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .brand::after,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .header-actions::after{
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* Chips internos: Idioma / Tema / Estació */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .header-actions .dropdown > summary{
  background: var(--jd-night-vip-chip-bg) !important;

  border: 1px solid rgba(255,255,255,.28) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.18),
    2px 3px 7px rgba(0,0,0,.16) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Badge interior: Idioma / Tema / Estació */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .header-actions .badge{
  background: rgba(3,10,24,.50) !important;
  border: 1px solid rgba(255,255,255,.18) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 2px 6px rgba(0,0,0,.16) !important;
}

/* Botón Menú y botones no activos */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary.active,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .nav.nav-v2 > a:not(.active){
  background: var(--jd-night-vip-chip-bg) !important;

  border: 1px solid rgba(255,255,255,.30) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.18),
    2px 3px 8px rgba(0,0,0,.18) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Textos nocturnos auxiliares */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .brand-title .brand-subtitle,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .season-label,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .header-actions .chip-current,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .header-actions .btn.ghost,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .header-actions .dropdown > summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .nav.nav-v2 > a:not(.active){
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.34) !important;
}

/* === J+A NIGHT VIP CLEAN END === */

/* =========================================================
   Header dinámico CLEAN v6.1 — título dark/nocturno más claro
   - Solo aclara el tramo de color de la paleta en el título
   - No toca recuadros, fondos, nav, chips ni modo día
   ========================================================= */

@supports (-webkit-background-clip: text) {

  :root[data-theme="dark"] #site-header .brand-title strong,
  html[data-theme="dark"] #site-header .brand-title strong,
  html.dark #site-header .brand-title strong,
  body.dark #site-header .brand-title strong,
  #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant*="noche"] .brand-title strong{
    background-image:
      linear-gradient(
        90deg,
        rgba(255,255,255,.99) 0%,
        rgba(255,255,255,.99) 34%,
        color-mix(
          in oklab,
          rgba(255,255,255,.96) 62%,
          var(--brand-400, var(--brand-accent, var(--brand, #38bdf8))) 38%
        ) 58%,
        color-mix(
          in oklab,
          var(--brand-400, var(--brand-accent, var(--brand, #38bdf8))) 74%,
          white 26%
        ) 82%,
        color-mix(
          in oklab,
          var(--brand-500, var(--brand, #0ea5e9)) 70%,
          white 30%
        ) 100%
      ) !important;
  }

  @media (prefers-color-scheme: dark){
    :root[data-theme="auto"] #site-header .brand-title strong,
    html[data-theme="auto"] #site-header .brand-title strong,
    :root:not([data-theme]) #site-header .brand-title strong,
    html:not([data-theme]) #site-header .brand-title strong{
      background-image:
        linear-gradient(
          90deg,
          rgba(255,255,255,.99) 0%,
          rgba(255,255,255,.99) 34%,
          color-mix(
            in oklab,
            rgba(255,255,255,.96) 62%,
            var(--brand-400, var(--brand-accent, var(--brand, #38bdf8))) 38%
          ) 58%,
          color-mix(
            in oklab,
            var(--brand-400, var(--brand-accent, var(--brand, #38bdf8))) 74%,
            white 26%
          ) 82%,
          color-mix(
            in oklab,
            var(--brand-500, var(--brand, #0ea5e9)) 70%,
            white 30%
          ) 100%
        ) !important;
    }
  }
}

/* =========================================================
   Header dinámico CLEAN v6.2 — chip del título más traslúcido
   - Solo afecta al recuadro del título/logo en variantes nocturnas
   - No toca selectores, nav, fondo, letras ni modo día
   ========================================================= */

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .brand::before{
  background: rgba(255,255,255,.07) !important;

  border-top-color: rgba(255,255,255,.28) !important;
  border-right-color: rgba(255,255,255,.27) !important;
  border-bottom-color: rgba(255,255,255,.36) !important;
  border-left-color: rgba(255,255,255,.27) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 0 0 1px rgba(255,255,255,.07),
    4px 6px 13px rgba(0,0,0,.20) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================================================
   Header dinámico CLEAN v6.3 — menú principal negro translúcido
   - Solo afecta a la franja inferior Principal/Menú en variantes nocturnas
   - Fondo blanco translúcido .25
   - No toca título, selectores, botones activos ni modo día
   ========================================================= */

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .header-nav::before{
  background: rgba(0,0,0,.35) !important;

  border-top: 1px solid rgba(255,255,255,.26) !important;
  border-bottom: 1px solid rgba(255,255,255,.34) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 0 0 1px rgba(255,255,255,.06),
    4px 6px 14px rgba(0,0,0,.16) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* === END Header dinámico CLEAN v6.3 === */

/* =========================================================
   Header dinámico CLEAN v6.6 — anti-flash final día/noche
   - Evita que se vea la imagen por defecto antes de cargar la variante real
   - Corrige especialmente modo noche / auto oscuro
   - No toca el header una vez existe data-weather-variant
   ========================================================= */

/* Mientras JS aún no ha aplicado variante, no mostramos ningún fondo provisional */
#site-header#site-header:not([data-weather-variant])::before,
:root[data-theme="light"] #site-header#site-header:not([data-weather-variant])::before,
html[data-theme="light"] #site-header#site-header:not([data-weather-variant])::before,
:root[data-theme="dark"] #site-header#site-header:not([data-weather-variant])::before,
html[data-theme="dark"] #site-header#site-header:not([data-weather-variant])::before,
html.dark #site-header#site-header:not([data-weather-variant])::before,
body.dark #site-header#site-header:not([data-weather-variant])::before,
:root[data-theme="auto"] #site-header#site-header:not([data-weather-variant])::before,
html[data-theme="auto"] #site-header#site-header:not([data-weather-variant])::before{
  opacity: 0 !important;
  background-image: none !important;
  filter: none !important;
  transition: none !important;
}

/* En auto oscuro del sistema, misma protección */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header#site-header:not([data-weather-variant])::before,
  html[data-theme="auto"] #site-header#site-header:not([data-weather-variant])::before,
  :root:not([data-theme]) #site-header#site-header:not([data-weather-variant])::before,
  html:not([data-theme]) #site-header#site-header:not([data-weather-variant])::before{
    opacity: 0 !important;
    background-image: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Mientras no hay variante, tampoco velo blanco/oscuro encima */
#site-header#site-header:not([data-weather-variant])::after,
:root[data-theme="dark"] #site-header#site-header:not([data-weather-variant])::after,
html[data-theme="dark"] #site-header#site-header:not([data-weather-variant])::after,
html.dark #site-header#site-header:not([data-weather-variant])::after,
body.dark #site-header#site-header:not([data-weather-variant])::after,
:root[data-theme="auto"] #site-header#site-header:not([data-weather-variant])::after,
html[data-theme="auto"] #site-header#site-header:not([data-weather-variant])::after{
  background: transparent !important;
  opacity: 0 !important;
  transition: none !important;
}

/* === END Header dinámico CLEAN v6.6 === */

/* =========================================================
   Header dinámico CLEAN v6.7 — fondos día igual que noche
   - Solo variantes meteorológicas de día
   - Solo cambia background del chip/tarjeta del título y franja Principal/Menú
   - NO toca bordes, sombras, textos, blur, botones activos ni JS
   ========================================================= */

/* Chip/tarjeta del título en modo día: mismo fondo que noche v6.2 */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .brand::before{
  background: rgba(255,255,255,.10) !important;
}

/* Barra/franja Principal/Menú en modo día: mismo fondo que noche v6.3 */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .header-nav::before{
  background: rgba(0,0,0,.08) !important;
}

/* === END Header dinámico CLEAN v6.7 === */

/* =========================================================
   Header dinámico CLEAN v6.7 — botón Menú color estable
   - Evita que al cargar salga transparente y tras pulsar cambie
   - Mismo aspecto cerrado / abierto / active / focus / hover
   - Solo afecta al botón visible "Menú", no al panel desplegable
   ========================================================= */

/* Modo día: el botón Menú siempre con el color suave visible */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2-summary.active,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2[open] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2-summary:hover,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2-summary:focus,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2-summary:focus-visible{
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--brand-accent, var(--brand, #10b981)) 18%, rgba(255,255,255,.82) 82%),
      color-mix(in oklab, var(--brand, #10b981) 12%, rgba(255,255,255,.72) 88%)
    ) !important;

  border-color: color-mix(in oklab, var(--brand, #10b981) 34%, rgba(255,255,255,.62)) !important;

  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.54),
    inset 0 -1px 0 rgba(15,23,42,.055),
    2px 3px 8px rgba(15,23,42,.10) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Noche: mantenemos el lenguaje nocturno, pero también estable */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary.active,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .nav-menu-v2[open] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary:hover,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary:focus,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary:focus-visible{
  background: rgba(6,16,36,.34) !important;

  border-color: rgba(255,255,255,.30) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.18),
    2px 3px 8px rgba(0,0,0,.18) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* === END Header dinámico CLEAN v6.7 === */

/* PATCH J+A — season sun icon unified tone */
:root,
html[data-theme="light"],
html[data-theme="dark"],
html[data-theme="auto"],
body[data-theme="light"],
body[data-theme="dark"],
body[data-theme="auto"]{
  --jd-season-sun-color: #f6c94d;
}

/* Icono de estación: mismo tono en claro/oscuro/auto y un pelín más alto */
.jd-season-chip .season-icon,
.jd-season-chip .jd-season-icon,
.season-chip .season-icon,
.season-chip .jd-season-icon,
.header-season .season-icon,
.header-season .jd-season-icon,
.jd-header-season .season-icon,
.jd-header-season .jd-season-icon,
.brand-season .season-icon,
.brand-season .jd-season-icon,
.season-badge .season-icon,
.season-badge .jd-season-icon,
[class*="season"] svg,
[class*="Season"] svg{
  color: var(--jd-season-sun-color) !important;
  stroke: var(--jd-season-sun-color) !important;
  transform: translateY(-1px);
}

/* Si el sol es emoji/texto, también lo subimos suavemente */
.jd-season-chip .season-icon,
.jd-season-chip .jd-season-icon,
.season-chip .season-icon,
.season-chip .jd-season-icon,
.header-season .season-icon,
.header-season .jd-season-icon,
.jd-header-season .season-icon,
.jd-header-season .jd-season-icon,
.brand-season .season-icon,
.brand-season .jd-season-icon,
.season-badge .season-icon,
.season-badge .jd-season-icon{
  display: inline-flex;
  align-items: center;
  line-height: 1;
  filter: saturate(1.08) brightness(1.03);
}
/* END PATCH J+A — season sun icon unified tone */

/* =========================================================
   Header · acceso directo dinámico a Incendis
   - Solo aparece si header.js detecta forestales/agrícolas no extinguidos
   - Se coloca junto al botón Menú
   ========================================================= */

#site-header .nav-fires-hot-v2{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .42rem !important;

  min-height: var(--header-v2-btn-height, 32px) !important;
  height: var(--header-v2-btn-height, 32px) !important;
  padding: .26rem .62rem !important;
  border-radius: 999px !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  line-height: 1 !important;
  font-size: .84rem !important;
  font-weight: 760 !important;

  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.34), transparent 42%),
    linear-gradient(180deg, #ef4444, #b91c1c) !important;

  border: 1px solid rgba(255,255,255,.36) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 6px 18px rgba(185,28,28,.26),
    0 0 0 1px rgba(239,68,68,.18) !important;

  overflow: hidden !important;
  isolation: isolate !important;
}

#site-header .nav-fires-hot-v2::after{
  content: "" !important;
  position: absolute !important;
  inset: -30% !important;
  z-index: -1 !important;
  pointer-events: none !important;

  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.30), transparent 28%),
    radial-gradient(circle at 76% 84%, rgba(251,191,36,.20), transparent 34%) !important;

  opacity: .95 !important;
}

#site-header .nav-fires-hot-v2:hover{
  transform: translateY(-1px) !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.38), transparent 42%),
    linear-gradient(180deg, #f97316, #dc2626) !important;
  border-color: rgba(255,255,255,.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 8px 24px rgba(220,38,38,.30),
    0 0 0 1px rgba(249,115,22,.20) !important;
}

#site-header .nav-fires-hot-v2:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(239,68,68,.28),
    inset 0 1px 0 rgba(255,255,255,.32),
    0 8px 24px rgba(220,38,38,.30) !important;
}

#site-header .nav-fires-hot-icon{
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

#site-header .nav-fires-hot-icon svg{
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

#site-header .nav-fires-hot-icon .hot-flame{
  fill: #ffffff !important;
  opacity: .96 !important;
}

#site-header .nav-fires-hot-icon .hot-tree{
  fill: none !important;
  stroke: #7f1d1d !important;
  stroke-width: 1.45 !important;
  stroke-linejoin: round !important;
}

#site-header .nav-fires-hot-count{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 1.35rem !important;
  height: 1.35rem !important;
  padding: 0 .32rem !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.22) !important;
  border: 1px solid rgba(255,255,255,.28) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* En modo nocturno conserva presencia, sin volverse opaco de más */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))[data-weather-variant*="noche"] .nav-fires-hot-v2{
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.26), transparent 42%),
    linear-gradient(180deg, rgba(239,68,68,.94), rgba(127,29,29,.92)) !important;

  border-color: rgba(255,255,255,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 7px 20px rgba(0,0,0,.20),
    0 0 0 1px rgba(239,68,68,.16) !important;
}

/* Móvil: dejamos solo icono + contador si el ancho va justo */
@media (max-width: 520px){
  #site-header .nav-fires-hot-v2{
    min-height: 36px !important;
    height: 36px !important;
    padding: .30rem .58rem !important;
    font-size: .82rem !important;
    gap: .34rem !important;
  }

  #site-header .nav-fires-hot-text{
    display: none !important;
  }

  #site-header .nav-fires-hot-icon,
  #site-header .nav-fires-hot-icon svg{
    width: 19px !important;
    height: 19px !important;
  }
}

@media (max-width: 390px){
  #site-header .nav-fires-hot-v2{
    min-height: 34px !important;
    height: 34px !important;
    padding: .26rem .50rem !important;
  }

  #site-header .nav-fires-hot-count{
    min-width: 1.22rem !important;
    height: 1.22rem !important;
    font-size: .68rem !important;
  }
}

/* =========================================================
   Header · Incendis hot v2
   - Gana a las reglas genéricas del nav en modo claro
   - Botón rojo visible día/noche
   - Halo suave/pulsante
   - Posición: JS lo inserta antes de Menú
   ========================================================= */

@keyframes jdFiresHotHaloPulse {
  0%, 100% {
    opacity: .34;
    transform: scale(.98);
  }
  50% {
    opacity: .82;
    transform: scale(1.10);
  }
}

@keyframes jdFiresHotInnerGlow {
  0%, 100% {
    opacity: .72;
  }
  50% {
    opacity: 1;
  }
}

/* Selector muy específico para ganar a:
   #site-header .nav.nav-v2 > a:not(.active)
*/
#site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"],
#site-header#site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"]:not(.active),
#site-header#site-header[data-weather-variant] .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"]:not(.active),
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"]:not(.active),
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"] .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"]:not(.active){
  position: relative !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,.40), transparent 42%),
    linear-gradient(180deg, #ff5a3d 0%, #ef4444 48%, #b91c1c 100%) !important;

  border: 1px solid rgba(255,255,255,.46) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 7px 20px rgba(220,38,38,.30),
    0 0 0 1px rgba(239,68,68,.20) !important;

  text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
  overflow: visible !important;
  isolation: isolate !important;
}

/* Halo exterior suave */
#site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"]::before{
  content: "" !important;
  position: absolute !important;
  inset: -7px !important;
  z-index: -2 !important;
  pointer-events: none !important;

  border-radius: inherit !important;

  background:
    radial-gradient(circle, rgba(239,68,68,.56), rgba(249,115,22,.24) 42%, transparent 70%) !important;

  filter: blur(5px) !important;
  animation: jdFiresHotHaloPulse 2.4s ease-in-out infinite !important;
}

/* Brillo interior, sin interferir con el SVG */
#site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"]::after{
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -1 !important;
  pointer-events: none !important;

  border-radius: inherit !important;

  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.36), transparent 34%),
    radial-gradient(circle at 78% 86%, rgba(251,191,36,.24), transparent 38%) !important;

  animation: jdFiresHotInnerGlow 2.8s ease-in-out infinite !important;
}

/* Hover */
#site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"]:hover{
  transform: translateY(-1px) !important;

  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,.45), transparent 42%),
    linear-gradient(180deg, #fb923c 0%, #ef4444 48%, #991b1b 100%) !important;

  border-color: rgba(255,255,255,.58) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 9px 26px rgba(220,38,38,.36),
    0 0 0 1px rgba(249,115,22,.24) !important;
}

/* Icono y contador siempre legibles */
#site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"] .nav-fires-hot-icon,
#site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"] .nav-fires-hot-text,
#site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"] .nav-fires-hot-count{
  position: relative !important;
  z-index: 2 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"] .nav-fires-hot-count{
  background: rgba(255,255,255,.24) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 1px 5px rgba(0,0,0,.14) !important;
}

#site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"] .hot-flame{
  fill: #ffffff !important;
}

#site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"] .hot-tree{
  stroke: #7f1d1d !important;
}

/* En móvil, que no robe demasiado espacio */
@media (max-width: 520px){
  #site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"]{
    order: 20 !important;
  }

  #site-header .nav.nav-v2 .nav-menu-v2{
    order: 30 !important;
  }

  #site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"]::before{
    inset: -6px !important;
    filter: blur(4px) !important;
  }
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  #site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"]::before,
  #site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"]::after{
    animation: none !important;
  }
}

/* END Header · Incendis hot v2 */

/* =========================================================
   Header · Incendis hot v3
   - Pegado al lado izquierdo del botón Menú
   - Menú deja de empujarse solo cuando existe aviso de incendios
   - Icono simplificado: llama limpia
   ========================================================= */

#site-header .nav.nav-v2.has-fires-hot-v2 > a.nav-fires-hot-v2[data-fires-hot="1"]{
  margin-left: auto !important;
  margin-right: 0 !important;
  order: 900 !important;
}

#site-header .nav.nav-v2.has-fires-hot-v2 .nav-menu-v2{
  margin-left: 0 !important;
  order: 901 !important;
}

/* Sin aviso, el Menú mantiene su comportamiento normal */
#site-header .nav.nav-v2:not(.has-fires-hot-v2) .nav-menu-v2{
  margin-left: auto !important;
}

/* Llama más clara y centrada */
#site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"] .nav-fires-hot-icon{
  width: 17px !important;
  height: 17px !important;
  transform: translateY(-.5px) !important;
}

#site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"] .nav-fires-hot-icon svg{
  width: 17px !important;
  height: 17px !important;
  overflow: visible !important;
}

#site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"] .hot-flame{
  fill: #ffffff !important;
  opacity: .98 !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.22)) !important;
}

#site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"] .hot-flame-inner{
  fill: #fed7aa !important;
  opacity: .92 !important;
}

/* Por si queda CSS antiguo del árbol */
#site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"] .hot-tree{
  display: none !important;
}

/* En móvil también va pegado al Menú, pero compacto */
@media (max-width: 520px){
  #site-header .nav.nav-v2.has-fires-hot-v2 > a.nav-fires-hot-v2[data-fires-hot="1"]{
    margin-left: auto !important;
    order: 900 !important;
  }

  #site-header .nav.nav-v2.has-fires-hot-v2 .nav-menu-v2{
    margin-left: 0 !important;
    order: 901 !important;
  }

  #site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"]{
    min-width: 72px !important;
  }

  #site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"] .nav-fires-hot-icon,
  #site-header .nav.nav-v2 > a.nav-fires-hot-v2[data-fires-hot="1"] .nav-fires-hot-icon svg{
    width: 18px !important;
    height: 18px !important;
  }
}

/* END Header · Incendis hot v3 */

/* === Header menu surfaces + exclusivity fix 2026-07-22 === */
/*
   Los paneles usan una transparencia corta y controlada.
   Se mantiene backdrop-filter desactivado: el alpha es normal y estable
   en Android, sin crear la capa de composición que provocaba artefactos.
*/
#site-header#site-header{
  /*
     Menú claro tipo original: base neutral y casi opaca. La marca queda en
     títulos, bordes y estados, sin convertir todo el panel en una mancha.
  */
  --jd-menu-surface: color-mix(in oklab, rgba(255,255,255,.95) 98%, var(--brand-500, var(--brand, #10b981)) 2%);
  --jd-menu-surface-soft: color-mix(in oklab, rgba(255,255,255,.72) 98%, var(--brand-500, var(--brand, #10b981)) 2%);
  --jd-menu-control: color-mix(in oklab, rgba(255,255,255,.90) 94%, var(--brand-500, var(--brand, #10b981)) 6%);
  --jd-menu-link: color-mix(in oklab, rgba(244,247,250,.88) 97%, var(--brand-500, var(--brand, #10b981)) 3%);
  --jd-menu-text: #172033;
  --jd-menu-muted: #526174;
  --jd-menu-title: color-mix(in oklab, var(--brand-500, var(--brand, #10b981)) 52%, #64748b 48%);
  --jd-menu-border: color-mix(in oklab, var(--brand-500, var(--brand, #10b981)) 20%, rgba(15,23,42,.18) 80%);
  --jd-menu-link-border: color-mix(in oklab, var(--brand-500, var(--brand, #10b981)) 12%, rgba(15,23,42,.16) 88%);
  --jd-menu-shadow: 0 18px 44px rgba(15,23,42,.18), 0 2px 8px rgba(15,23,42,.10);

  /* La barra superior vive sobre una foto: cristal oscuro en ambos temas. */
  --jd-toolbar-surface: color-mix(in oklab, rgba(3,16,43,.56) 94%, var(--brand-400, var(--brand, #38bdf8)) 6%);
  --jd-toolbar-control: color-mix(in oklab, rgba(3,16,43,.36) 92%, var(--brand-400, var(--brand, #38bdf8)) 8%);
  --jd-toolbar-badge: color-mix(in oklab, rgba(3,12,33,.42) 90%, var(--brand-400, var(--brand, #38bdf8)) 10%);
  --jd-toolbar-border: color-mix(in oklab, var(--brand-400, var(--brand, #38bdf8)) 22%, rgba(255,255,255,.34) 78%);
  --jd-toolbar-text: #ffffff;

  /* Los logos con fondo integrado necesitan un soporte blanco continuo. */
  --jd-logo-surface: #ffffff;
  --jd-logo-border: color-mix(in oklab, var(--brand-400, var(--brand, #10b981)) 24%, rgba(255,255,255,.90) 76%);
  --jd-logo-image-opacity: 1;
  --jd-logo-shadow:
    0 20px 40px rgba(15,23,42,.32),
    0 6px 14px rgba(15,23,42,.22);
}

:root[data-theme="dark"] #site-header#site-header,
html[data-theme="dark"] #site-header#site-header,
html.dark #site-header#site-header,
body.dark #site-header#site-header{
  --jd-menu-surface: color-mix(in oklab, rgba(8,15,28,.94) 98%, var(--brand-400, var(--brand, #38bdf8)) 2%);
  --jd-menu-surface-soft: color-mix(in oklab, rgba(16,25,40,.76) 97%, var(--brand-400, var(--brand, #38bdf8)) 3%);
  --jd-menu-control: color-mix(in oklab, rgba(14,24,40,.88) 94%, var(--brand-400, var(--brand, #38bdf8)) 6%);
  --jd-menu-link: color-mix(in oklab, rgba(31,41,55,.82) 97%, var(--brand-400, var(--brand, #38bdf8)) 3%);
  --jd-menu-text: #f8fafc;
  --jd-menu-muted: #d7e0eb;
  --jd-menu-title: color-mix(in oklab, var(--brand-400, var(--brand, #38bdf8)) 58%, #f8fafc 42%);
  --jd-menu-border: color-mix(in oklab, var(--brand-400, var(--brand, #38bdf8)) 24%, rgba(255,255,255,.28) 76%);
  --jd-menu-link-border: color-mix(in oklab, var(--brand-400, var(--brand, #38bdf8)) 20%, rgba(255,255,255,.22) 80%);
  --jd-menu-shadow: 0 20px 48px rgba(0,0,0,.47), 0 2px 10px rgba(0,0,0,.30);
  --jd-logo-surface: #ffffff;
  --jd-logo-border: color-mix(in oklab, var(--brand-400, var(--brand, #38bdf8)) 22%, rgba(255,255,255,.76) 78%);
  --jd-logo-image-opacity: 1;
  --jd-logo-shadow:
    0 22px 44px rgba(0,0,0,.62),
    0 7px 16px rgba(0,0,0,.40);
}

@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header#site-header,
  html[data-theme="auto"] #site-header#site-header,
  :root:not([data-theme]) #site-header#site-header,
  html:not([data-theme]) #site-header#site-header{
    --jd-menu-surface: color-mix(in oklab, rgba(8,15,28,.94) 98%, var(--brand-400, var(--brand, #38bdf8)) 2%);
    --jd-menu-surface-soft: color-mix(in oklab, rgba(16,25,40,.76) 97%, var(--brand-400, var(--brand, #38bdf8)) 3%);
    --jd-menu-control: color-mix(in oklab, rgba(14,24,40,.88) 94%, var(--brand-400, var(--brand, #38bdf8)) 6%);
    --jd-menu-link: color-mix(in oklab, rgba(31,41,55,.82) 97%, var(--brand-400, var(--brand, #38bdf8)) 3%);
    --jd-menu-text: #f8fafc;
    --jd-menu-muted: #d7e0eb;
    --jd-menu-title: color-mix(in oklab, var(--brand-400, var(--brand, #38bdf8)) 58%, #f8fafc 42%);
    --jd-menu-border: color-mix(in oklab, var(--brand-400, var(--brand, #38bdf8)) 24%, rgba(255,255,255,.28) 76%);
    --jd-menu-link-border: color-mix(in oklab, var(--brand-400, var(--brand, #38bdf8)) 20%, rgba(255,255,255,.22) 80%);
    --jd-menu-shadow: 0 20px 48px rgba(0,0,0,.47), 0 2px 10px rgba(0,0,0,.30);
    --jd-logo-surface: #ffffff;
    --jd-logo-border: color-mix(in oklab, var(--brand-400, var(--brand, #38bdf8)) 22%, rgba(255,255,255,.76) 78%);
    --jd-logo-image-opacity: 1;
    --jd-logo-shadow:
      0 22px 44px rgba(0,0,0,.62),
      0 7px 16px rgba(0,0,0,.40);
  }
}

/* La escena nocturna necesita más profundidad aunque el tema manual sea claro. */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header[data-weather-variant*="noche"]{
  --jd-logo-shadow:
    0 22px 46px rgba(0,0,0,.66),
    0 8px 18px rgba(0,0,0,.44);
}

/*
   Cerdanyola usa un símbolo sin fondo blanco integrado: conserva el acabado
   translúcido que ya funcionaba bien. El resto evita el efecto doble recuadro.
*/
:root[data-site="cerdanyola_centre"] #site-header#site-header,
:root[data-site="cerdanyola_montflorit"] #site-header#site-header{
  --jd-logo-surface: rgba(255,255,255,.72);
  --jd-logo-border: rgba(255,255,255,.70);
  --jd-logo-image-opacity: .94;
}

:root[data-site="cerdanyola_centre"][data-theme="dark"] #site-header#site-header,
:root[data-site="cerdanyola_montflorit"][data-theme="dark"] #site-header#site-header,
:root[data-site="cerdanyola_centre"].dark #site-header#site-header,
:root[data-site="cerdanyola_montflorit"].dark #site-header#site-header{
  --jd-logo-surface: rgba(255,255,255,.66);
  --jd-logo-border: rgba(255,255,255,.56);
  --jd-logo-image-opacity: .94;
}

@media (prefers-color-scheme: dark){
  :root[data-site="cerdanyola_centre"][data-theme="auto"] #site-header#site-header,
  :root[data-site="cerdanyola_montflorit"][data-theme="auto"] #site-header#site-header,
  :root[data-site="cerdanyola_centre"]:not([data-theme]) #site-header#site-header,
  :root[data-site="cerdanyola_montflorit"]:not([data-theme]) #site-header#site-header{
    --jd-logo-surface: rgba(255,255,255,.66);
    --jd-logo-border: rgba(255,255,255,.56);
    --jd-logo-image-opacity: .94;
  }
}

/* Barra superior: cristal oscuro estable sobre cualquier foto o tema. */
#site-header#site-header#site-header .header-actions{
  background: var(--jd-toolbar-surface) !important;
  background-color: var(--jd-toolbar-surface) !important;
  background-image: none !important;
  border-color: var(--jd-toolbar-border) !important;
  box-shadow: 0 12px 30px rgba(2,6,23,.20), inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#site-header#site-header#site-header .header-actions::before{
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#site-header#site-header#site-header .header-actions .btn.ghost,
#site-header#site-header#site-header .header-actions .dropdown > summary{
  color: var(--jd-toolbar-text) !important;
  -webkit-text-fill-color: var(--jd-toolbar-text) !important;
  background: var(--jd-toolbar-control) !important;
  background-color: var(--jd-toolbar-control) !important;
  background-image: none !important;
  border-color: var(--jd-toolbar-border) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.28) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#site-header#site-header#site-header .header-actions .chip-current{
  color: var(--jd-toolbar-text) !important;
  -webkit-text-fill-color: var(--jd-toolbar-text) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.28) !important;
}

#site-header#site-header#site-header .header-actions .badge{
  color: var(--jd-toolbar-text) !important;
  -webkit-text-fill-color: var(--jd-toolbar-text) !important;
  background: var(--jd-toolbar-badge) !important;
  border-color: var(--jd-toolbar-border) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.28) !important;
}

#site-header#site-header .dropdown .menu,
#site-header#site-header .nav-menu-v2-panel{
  opacity: 1 !important;
  color: var(--jd-menu-text) !important;
  background: var(--jd-menu-surface) !important;
  background-color: var(--jd-menu-surface) !important;
  background-image: none !important;
  border-color: var(--jd-menu-border) !important;
  box-shadow: var(--jd-menu-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

#site-header#site-header .nav-menu-v2-group{
  color: var(--jd-menu-text) !important;
  background: var(--jd-menu-surface-soft) !important;
  background-color: var(--jd-menu-surface-soft) !important;
  background-image: none !important;
  border-color: var(--jd-menu-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#site-header#site-header .nav-menu-v2-title{
  color: var(--jd-menu-title) !important;
  -webkit-text-fill-color: var(--jd-menu-title) !important;
  text-shadow: none !important;
}

#site-header#site-header .dropdown .menu a,
#site-header#site-header .dropdown .menu button,
#site-header#site-header .nav-menu-v2-links a:not(.active){
  color: var(--jd-menu-text) !important;
  -webkit-text-fill-color: var(--jd-menu-text) !important;
  background: var(--jd-menu-link) !important;
  background-color: var(--jd-menu-link) !important;
  background-image: none !important;
  border-color: var(--jd-menu-link-border) !important;
  text-shadow: none !important;
}

#site-header#site-header .dropdown .menu a.active,
#site-header#site-header .dropdown .menu button.active,
#site-header#site-header .nav-menu-v2-links a.active{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(180deg, var(--brand-400, var(--brand, #10b981)), var(--brand-500, var(--brand, #10b981))) !important;
  border-color: transparent !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.24) !important;
}

#site-header#site-header .dropdown .menu a:hover,
#site-header#site-header .dropdown .menu button:hover,
#site-header#site-header .nav-menu-v2-links a:not(.active):hover{
  background: color-mix(in oklab, var(--jd-menu-link) 86%, var(--brand-400, var(--brand, #10b981)) 14%) !important;
}

/* El botón Menú sigue la paleta elegida, no la transparencia del fondo meteorológico. */
#site-header#site-header#site-header .nav-menu-v2-summary,
#site-header#site-header#site-header .nav-menu-v2-summary.active,
#site-header#site-header#site-header .nav-menu-v2[open] .nav-menu-v2-summary,
#site-header#site-header#site-header .nav-menu-v2-summary:hover,
#site-header#site-header#site-header .nav-menu-v2-summary:focus,
#site-header#site-header#site-header .nav-menu-v2-summary:focus-visible{
  color: var(--jd-menu-text) !important;
  -webkit-text-fill-color: var(--jd-menu-text) !important;
  background: var(--jd-menu-control) !important;
  background-color: var(--jd-menu-control) !important;
  background-image: none !important;
  border-color: var(--jd-menu-border) !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* Tarjeta blanca flotante: sin borde ni halo cromático. */
#site-header#site-header .brand-logo-wrap{
  background: var(--jd-logo-surface) !important;
  background-color: var(--jd-logo-surface) !important;
  border: 0 !important;
  box-shadow: var(--jd-logo-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#site-header#site-header .brand-logo-img{
  opacity: var(--jd-logo-image-opacity) !important;
}

/* === END Header menu surfaces + exclusivity fix 2026-07-22 === */

/* === Header neutral 3D pills refinement 2026-07-22 === */
/*
   El color de marca queda reservado a títulos y estados activos.
   Superficies, bordes y volumen vuelven a ser blancos/neutros como en
   el diseño original. Sin backdrop-filter para mantener Android estable.
*/
#site-header#site-header{
  --jd-menu-surface-soft: rgba(255,255,255,.58);
  --jd-menu-link: rgba(255,255,255,.92);
  --jd-menu-border: rgba(255,255,255,.90);
  --jd-menu-link-border: rgba(255,255,255,.98);
  --jd-toolbar-border: rgba(255,255,255,.34);
  --jd-menu-group-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 8px 24px rgba(15,23,42,.055);
  --jd-menu-pill-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(148,163,184,.13),
    0 1px 2px rgba(15,23,42,.11),
    0 0 0 1px rgba(148,163,184,.10);
}

:root[data-theme="dark"] #site-header#site-header,
html[data-theme="dark"] #site-header#site-header,
html.dark #site-header#site-header,
body.dark #site-header#site-header{
  --jd-menu-surface-soft: rgba(16,25,40,.78);
  --jd-menu-link: rgba(30,41,59,.88);
  --jd-menu-border: rgba(255,255,255,.20);
  --jd-menu-link-border: rgba(255,255,255,.26);
  --jd-menu-group-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 9px 26px rgba(0,0,0,.22);
  --jd-menu-pill-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 1px 3px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.05);
}

@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header#site-header,
  html[data-theme="auto"] #site-header#site-header,
  :root:not([data-theme]) #site-header#site-header,
  html:not([data-theme]) #site-header#site-header{
    --jd-menu-surface-soft: rgba(16,25,40,.78);
    --jd-menu-link: rgba(30,41,59,.88);
    --jd-menu-border: rgba(255,255,255,.20);
    --jd-menu-link-border: rgba(255,255,255,.26);
    --jd-menu-group-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 9px 26px rgba(0,0,0,.22);
    --jd-menu-pill-shadow:
      inset 0 1px 0 rgba(255,255,255,.15),
      inset 0 -1px 0 rgba(0,0,0,.28),
      0 1px 3px rgba(0,0,0,.28),
      0 0 0 1px rgba(255,255,255,.05);
  }
}

#site-header#site-header .nav-menu-v2-group{
  border-color: var(--jd-menu-border) !important;
  box-shadow: var(--jd-menu-group-shadow) !important;
}

#site-header#site-header .dropdown .menu a,
#site-header#site-header .dropdown .menu button,
#site-header#site-header .nav-menu-v2-links a:not(.active){
  background: var(--jd-menu-link) !important;
  background-color: var(--jd-menu-link) !important;
  background-image: none !important;
  border-color: var(--jd-menu-link-border) !important;
  box-shadow: var(--jd-menu-pill-shadow) !important;
}

#site-header#site-header .dropdown .menu a.active,
#site-header#site-header .dropdown .menu button.active,
#site-header#site-header .nav-menu-v2-links a.active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 2px 5px rgba(15,23,42,.18) !important;
}

#site-header#site-header#site-header .nav-menu-v2-summary,
#site-header#site-header#site-header .nav-menu-v2-summary.active,
#site-header#site-header#site-header .nav-menu-v2[open] .nav-menu-v2-summary,
#site-header#site-header#site-header .nav-menu-v2-summary:hover,
#site-header#site-header#site-header .nav-menu-v2-summary:focus,
#site-header#site-header#site-header .nav-menu-v2-summary:focus-visible{
  border-color: var(--jd-menu-border) !important;
  box-shadow: var(--jd-menu-pill-shadow) !important;
}

#site-header#site-header#site-header .header-actions .btn.ghost,
#site-header#site-header#site-header .header-actions .dropdown > summary{
  border-color: var(--jd-toolbar-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 2px 4px rgba(0,0,0,.16) !important;
}

#site-header#site-header#site-header .header-actions .badge{
  border-color: var(--jd-toolbar-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 1px 3px rgba(0,0,0,.14) !important;
}

/* === END Header neutral 3D pills refinement 2026-07-22 === */

/* === J+A · paleta histórica de menús recuperada de header.old2 === */
/*
   Esta capa sólo repone colores, bordes y sombras de los menús.
   No altera geometría, posicionamiento, z-index ni lógica JS.
   backdrop-filter continúa gobernado por la capa estable actual.
*/

#site-header#site-header#site-header{
  --jd-old2-actions-bg: rgba(255,255,255,.16);
  --jd-old2-actions-border-top: rgba(255,255,255,.30);
  --jd-old2-actions-border-side: rgba(255,255,255,.30);
  --jd-old2-actions-border-bottom: rgba(255,255,255,.30);
  --jd-old2-actions-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.10),
    3px 5px 12px rgba(15,23,42,.10);

  --jd-old2-control-bg: rgba(255,255,255,.10);
  --jd-old2-control-border: rgba(255,255,255,.24);
  --jd-old2-control-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    2px 3px 7px rgba(15,23,42,.08);
  --jd-old2-control-text: #000000;

  --jd-old2-badge-bg: rgba(3,10,24,.28);
  --jd-old2-badge-border: rgba(255,255,255,.18);
  --jd-old2-badge-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 2px 6px rgba(0,0,0,.12);

  --jd-old2-small-bg:
    linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.22));
  --jd-old2-small-border: rgba(255,255,255,.30);
  --jd-old2-small-shadow:
    0 18px 44px rgba(2,6,23,.12),
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(255,255,255,.08);
  --jd-old2-small-text: var(--fg, var(--text, #121417));
  --jd-old2-small-active: rgba(0,0,0,.05);

  --jd-old2-panel-bg: rgba(255,255,255,.24);
  --jd-old2-panel-border: rgba(255,255,255,.22);
  --jd-old2-panel-shadow:
    0 18px 44px rgba(2,6,23,.10),
    inset 0 1px 0 rgba(255,255,255,.24);
  --jd-old2-group-bg: rgba(255,255,255,.10);
  --jd-old2-group-border: rgba(255,255,255,.14);
  --jd-old2-group-shadow: inset 0 1px 0 rgba(255,255,255,.20);
  --jd-old2-panel-text: var(--fg, var(--text, #121417));
  --jd-old2-title-text:
    color-mix(in oklab, var(--brand, #10b981) 58%, var(--muted, #64748b));
  --jd-old2-link-bg: var(--card, #f8fafc);
  --jd-old2-link-border: var(--border, #e5e7eb);
  --jd-old2-link-text: var(--fg, var(--text, #121417));
}

/* Oscuro manual: mismos valores resueltos que tenía header.old2. */
:root[data-theme="dark"] #site-header#site-header#site-header,
html[data-theme="dark"] #site-header#site-header#site-header,
html.dark #site-header#site-header#site-header,
body.dark #site-header#site-header#site-header{
  --jd-old2-actions-bg: rgba(15,23,42,.03);
  --jd-old2-actions-border-top: rgba(255,255,255,.16);
  --jd-old2-actions-border-side: rgba(255,255,255,.16);
  --jd-old2-actions-border-bottom: rgba(255,255,255,.16);
  --jd-old2-actions-shadow:
    inset 0 1px 0 rgba(255,255,255,.106),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.024),
    3px 4px 9px rgba(0,0,0,.18),
    7px 9px 16px rgba(0,0,0,.10);

  --jd-old2-control-bg: rgba(15,23,42,.035);
  --jd-old2-control-border: rgba(255,255,255,.14);
  --jd-old2-control-shadow:
    inset 0 1px 0 rgba(255,255,255,.094),
    inset 0 -1px 0 rgba(0,0,0,.14),
    2px 3px 7px rgba(0,0,0,.12);
  --jd-old2-control-text: #ffffff;

  --jd-old2-small-bg:
    linear-gradient(135deg, rgba(15,23,42,.48), rgba(15,23,42,.30));
  --jd-old2-small-border: rgba(255,255,255,.13);
  --jd-old2-small-shadow:
    0 18px 44px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10);
  --jd-old2-small-text: var(--fg, var(--text, #e5eaf0));

  --jd-old2-panel-bg:
    radial-gradient(
      circle at 10% 0%,
      color-mix(in oklab, var(--brand, #10b981) 12%, rgba(255,255,255,.08)),
      transparent 46%
    ),
    linear-gradient(135deg, rgba(15,23,42,.40), rgba(15,23,42,.24));
  --jd-old2-panel-border: rgba(255,255,255,.13);
  --jd-old2-panel-shadow:
    0 24px 70px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10);
  --jd-old2-group-bg:
    linear-gradient(135deg, rgba(15,23,42,.24), rgba(15,23,42,.075));
  --jd-old2-group-border: rgba(255,255,255,.10);
  --jd-old2-panel-text: var(--fg, var(--text, #e5eaf0));
  --jd-old2-link-bg: var(--card, #0f1216);
  --jd-old2-link-border: var(--border, #1f2937);
  --jd-old2-link-text: var(--fg, var(--text, #e5eaf0));
}

/* Auto con preferencia oscura: equivalente al oscuro manual histórico. */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header#site-header#site-header,
  html[data-theme="auto"] #site-header#site-header#site-header,
  :root:not([data-theme]) #site-header#site-header#site-header,
  html:not([data-theme]) #site-header#site-header#site-header{
    --jd-old2-actions-bg: rgba(15,23,42,.03);
    --jd-old2-actions-border-top: rgba(255,255,255,.16);
    --jd-old2-actions-border-side: rgba(255,255,255,.16);
    --jd-old2-actions-border-bottom: rgba(255,255,255,.16);
    --jd-old2-actions-shadow:
      inset 0 1px 0 rgba(255,255,255,.106),
      inset 0 -1px 0 rgba(0,0,0,.18),
      0 0 0 1px rgba(255,255,255,.024),
      3px 4px 9px rgba(0,0,0,.18),
      7px 9px 16px rgba(0,0,0,.10);

    --jd-old2-control-bg: rgba(15,23,42,.035);
    --jd-old2-control-border: rgba(255,255,255,.14);
    --jd-old2-control-shadow:
      inset 0 1px 0 rgba(255,255,255,.094),
      inset 0 -1px 0 rgba(0,0,0,.14),
      2px 3px 7px rgba(0,0,0,.12);
    --jd-old2-control-text: #ffffff;

    --jd-old2-small-bg:
      linear-gradient(135deg, rgba(15,23,42,.48), rgba(15,23,42,.30));
    --jd-old2-small-border: rgba(255,255,255,.13);
    --jd-old2-small-shadow:
      0 18px 44px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.10);
    --jd-old2-small-text: var(--fg, var(--text, #e5eaf0));

    --jd-old2-panel-bg:
      radial-gradient(
        circle at 10% 0%,
        color-mix(in oklab, var(--brand, #10b981) 12%, rgba(255,255,255,.08)),
        transparent 46%
      ),
      linear-gradient(135deg, rgba(15,23,42,.40), rgba(15,23,42,.24));
    --jd-old2-panel-border: rgba(255,255,255,.13);
    --jd-old2-panel-shadow:
      0 24px 70px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.10);
    --jd-old2-group-bg:
      linear-gradient(135deg, rgba(15,23,42,.24), rgba(15,23,42,.075));
    --jd-old2-group-border: rgba(255,255,255,.10);
    --jd-old2-panel-text: var(--fg, var(--text, #e5eaf0));
    --jd-old2-link-bg: var(--card, #0f1216);
    --jd-old2-link-border: var(--border, #1f2937);
    --jd-old2-link-text: var(--fg, var(--text, #e5eaf0));
  }
}

/* La superficie real vuelve a ser el pseudo-elemento histórico. */
#site-header#site-header#site-header .header-actions{
  color: var(--jd-old2-control-text) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#site-header#site-header#site-header .header-actions::before{
  background: var(--jd-old2-actions-bg) !important;
  border-top-color: var(--jd-old2-actions-border-top) !important;
  border-right-color: var(--jd-old2-actions-border-side) !important;
  border-bottom-color: var(--jd-old2-actions-border-bottom) !important;
  border-left-color: var(--jd-old2-actions-border-side) !important;
  box-shadow: var(--jd-old2-actions-shadow) !important;
}

#site-header#site-header#site-header .header-actions .btn.ghost,
#site-header#site-header#site-header .header-actions .dropdown > summary{
  color: var(--jd-old2-control-text) !important;
  -webkit-text-fill-color: var(--jd-old2-control-text) !important;
  background: var(--jd-old2-control-bg) !important;
  border-color: var(--jd-old2-control-border) !important;
  box-shadow: var(--jd-old2-control-shadow) !important;
}

#site-header#site-header#site-header .header-actions .chip-current{
  color: var(--jd-old2-control-text) !important;
  -webkit-text-fill-color: var(--jd-old2-control-text) !important;
}

#site-header#site-header#site-header .header-actions .badge{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: var(--jd-old2-badge-bg) !important;
  border-color: var(--jd-old2-badge-border) !important;
  box-shadow: var(--jd-old2-badge-shadow) !important;
}

/* Desplegables pequeños: Estació e Idioma. */
#site-header#site-header#site-header .dropdown .menu{
  color: var(--jd-old2-small-text) !important;
  background: var(--jd-old2-small-bg) !important;
  border-color: var(--jd-old2-small-border) !important;
  box-shadow: var(--jd-old2-small-shadow) !important;
}

#site-header#site-header#site-header .dropdown .menu a,
#site-header#site-header#site-header .dropdown .menu button{
  color: var(--jd-old2-small-text) !important;
  -webkit-text-fill-color: var(--jd-old2-small-text) !important;
  background: transparent !important;
  border-color: currentColor !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

#site-header#site-header#site-header .dropdown .menu a.active,
#site-header#site-header#site-header .dropdown .menu button.active,
#site-header#site-header#site-header .dropdown .menu a:hover,
#site-header#site-header#site-header .dropdown .menu button:hover{
  color: var(--jd-old2-small-text) !important;
  -webkit-text-fill-color: var(--jd-old2-small-text) !important;
  background: var(--jd-old2-small-active) !important;
  border-color: currentColor !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Panel del Menú principal y sus pastillas. */
#site-header#site-header#site-header .nav-menu-v2-panel{
  color: var(--jd-old2-panel-text) !important;
  background: var(--jd-old2-panel-bg) !important;
  border-color: var(--jd-old2-panel-border) !important;
  box-shadow: var(--jd-old2-panel-shadow) !important;
}

#site-header#site-header#site-header .nav-menu-v2-group{
  color: var(--jd-old2-panel-text) !important;
  background: var(--jd-old2-group-bg) !important;
  border-color: var(--jd-old2-group-border) !important;
  box-shadow: var(--jd-old2-group-shadow) !important;
}

#site-header#site-header#site-header .nav-menu-v2-title{
  color: var(--jd-old2-title-text) !important;
  -webkit-text-fill-color: var(--jd-old2-title-text) !important;
  text-shadow: none !important;
}

#site-header#site-header#site-header .nav-menu-v2-links a:not(.active){
  color: var(--jd-old2-link-text) !important;
  -webkit-text-fill-color: var(--jd-old2-link-text) !important;
  background: var(--jd-old2-link-bg) !important;
  border-color: var(--jd-old2-link-border) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

#site-header#site-header#site-header .nav-menu-v2-links a:not(.active):hover{
  background: color-mix(
    in oklab,
    var(--jd-old2-link-bg) 92%,
    var(--brand, #10b981) 8%
  ) !important;
}

#site-header#site-header#site-header .nav-menu-v2-links a.active{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:
    linear-gradient(
      180deg,
      var(--brand-accent, var(--brand, #10b981)),
      var(--brand, #10b981)
    ) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Botón visible Menú: fórmula histórica y paleta propia de cada slug. */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2-summary.active,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2[open] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2-summary:hover,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2-summary:focus,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2-summary:focus-visible{
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background:
    linear-gradient(
      180deg,
      color-mix(
        in oklab,
        var(--brand-accent, var(--brand, #10b981)) 18%,
        rgba(255,255,255,.82) 82%
      ),
      color-mix(
        in oklab,
        var(--brand, #10b981) 12%,
        rgba(255,255,255,.72) 88%
      )
    ) !important;
  border-color:
    color-mix(
      in oklab,
      var(--brand, #10b981) 34%,
      rgba(255,255,255,.62)
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.54),
    inset 0 -1px 0 rgba(15,23,42,.055),
    2px 3px 8px rgba(15,23,42,.10) !important;
  text-shadow: none !important;
}

/* Noche: manda sobre el tema global, igual que en header.old2. */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"]{
  --jd-old2-actions-bg: rgba(6,16,36,.28);
  --jd-old2-actions-border-top: rgba(255,255,255,.30);
  --jd-old2-actions-border-side: rgba(255,255,255,.30);
  --jd-old2-actions-border-bottom: rgba(255,255,255,.40);
  --jd-old2-actions-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.08),
    4px 6px 14px rgba(0,0,0,.24);

  --jd-old2-control-bg: rgba(6,16,36,.34);
  --jd-old2-control-border: rgba(255,255,255,.28);
  --jd-old2-control-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.18),
    2px 3px 7px rgba(0,0,0,.16);
  --jd-old2-control-text: #ffffff;

  --jd-old2-badge-bg: rgba(3,10,24,.50);
  --jd-old2-badge-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 2px 6px rgba(0,0,0,.16);

  --jd-old2-small-bg:
    linear-gradient(135deg, rgba(15,23,42,.72), rgba(15,23,42,.48));
  --jd-old2-small-border: rgba(255,255,255,.14);
  --jd-old2-small-shadow:
    0 18px 44px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.10);
  --jd-old2-small-text: #ffffff;
  --jd-old2-small-active: rgba(255,255,255,.09);

  --jd-old2-panel-bg:
    radial-gradient(
      circle at 0% 0%,
      color-mix(in oklab, var(--brand, #10b981) 14%, transparent),
      transparent 42%
    ),
    rgba(15,23,42,.46);
  --jd-old2-panel-border: rgba(255,255,255,.12);
  --jd-old2-panel-shadow:
    0 24px 70px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.09);
  --jd-old2-group-bg:
    linear-gradient(180deg, rgba(15,23,42,.28), rgba(15,23,42,.11));
  --jd-old2-group-border: rgba(255,255,255,.10);
  --jd-old2-title-text:
    color-mix(
      in oklab,
      var(--brand-accent, var(--brand, #38bdf8)) 58%,
      rgba(255,255,255,.86)
    );
  --jd-old2-link-bg: rgba(15,23,42,.18);
  --jd-old2-link-border: rgba(255,255,255,.10);
  --jd-old2-link-text: rgba(255,255,255,.94);
}

/* Oscuro + noche conservaba las variantes oscuras de panel y dropdown. */
:root[data-theme="dark"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"],
html[data-theme="dark"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"],
html.dark #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"],
body.dark #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"]{
  --jd-old2-small-bg:
    linear-gradient(135deg, rgba(15,23,42,.48), rgba(15,23,42,.30));
  --jd-old2-small-border: rgba(255,255,255,.13);
  --jd-old2-small-shadow:
    0 18px 44px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10);

  --jd-old2-panel-bg:
    radial-gradient(
      circle at 10% 0%,
      color-mix(in oklab, var(--brand, #10b981) 12%, rgba(255,255,255,.08)),
      transparent 46%
    ),
    linear-gradient(135deg, rgba(15,23,42,.40), rgba(15,23,42,.24));
  --jd-old2-panel-border: rgba(255,255,255,.13);
  --jd-old2-panel-shadow:
    0 24px 70px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10);
  --jd-old2-group-bg:
    linear-gradient(135deg, rgba(15,23,42,.24), rgba(15,23,42,.075));
}

@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"],
  html[data-theme="auto"] #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"],
  :root:not([data-theme]) #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"],
  html:not([data-theme]) #site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"]{
    --jd-old2-small-bg:
      linear-gradient(135deg, rgba(15,23,42,.48), rgba(15,23,42,.30));
    --jd-old2-small-border: rgba(255,255,255,.13);
    --jd-old2-small-shadow:
      0 18px 44px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.10);

    --jd-old2-panel-bg:
      radial-gradient(
        circle at 10% 0%,
        color-mix(in oklab, var(--brand, #10b981) 12%, rgba(255,255,255,.08)),
        transparent 46%
      ),
      linear-gradient(135deg, rgba(15,23,42,.40), rgba(15,23,42,.24));
    --jd-old2-panel-border: rgba(255,255,255,.13);
    --jd-old2-panel-shadow:
      0 24px 70px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.10);
    --jd-old2-group-bg:
      linear-gradient(135deg, rgba(15,23,42,.24), rgba(15,23,42,.075));
  }
}

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary.active,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"] .nav-menu-v2[open] .nav-menu-v2-summary,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary:hover,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary:focus,
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary:focus-visible{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(6,16,36,.34) !important;
  border-color: rgba(255,255,255,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.18),
    2px 3px 8px rgba(0,0,0,.18) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.34) !important;
}

/* === END J+A · paleta histórica de menús === */

/* === J+A · fondos traslúcidos de paneles desplegables 2026-07-23 === */
/*
   Sólo cambia el relleno de los paneles abiertos.
   No toca pastillas, bordes, sombras, textos, layout, z-index ni JS.
*/

/* Día + tema claro */
#site-header#site-header#site-header .dropdown .menu{
  background:
    linear-gradient(
      135deg,
      color-mix(
        in oklab,
        rgba(255,255,255,.92) 98%,
        var(--brand-400, var(--brand, #10b981)) 2%
      ),
      color-mix(
        in oklab,
        rgba(255,255,255,.84) 98%,
        var(--brand-500, var(--brand, #10b981)) 2%
      )
    ) !important;
}

#site-header#site-header#site-header .nav-menu-v2-panel{
  background:
    color-mix(
      in oklab,
      rgba(255,255,255,.90) 98%,
      var(--brand-500, var(--brand, #10b981)) 2%
    ) !important;
}

/* Día + tema oscuro */
:root[data-theme="dark"] #site-header#site-header#site-header .dropdown .menu,
html[data-theme="dark"] #site-header#site-header#site-header .dropdown .menu,
html.dark #site-header#site-header#site-header .dropdown .menu,
body.dark #site-header#site-header#site-header .dropdown .menu{
  background:
    linear-gradient(
      135deg,
      color-mix(
        in oklab,
        rgba(8,15,28,.92) 98%,
        var(--brand-400, var(--brand, #38bdf8)) 2%
      ),
      color-mix(
        in oklab,
        rgba(15,23,42,.84) 98%,
        var(--brand-500, var(--brand, #38bdf8)) 2%
      )
    ) !important;
}

:root[data-theme="dark"] #site-header#site-header#site-header .nav-menu-v2-panel,
html[data-theme="dark"] #site-header#site-header#site-header .nav-menu-v2-panel,
html.dark #site-header#site-header#site-header .nav-menu-v2-panel,
body.dark #site-header#site-header#site-header .nav-menu-v2-panel{
  background:
    color-mix(
      in oklab,
      rgba(8,15,28,.90) 98%,
      var(--brand-400, var(--brand, #38bdf8)) 2%
    ) !important;
}

/* Auto cuando el sistema está en oscuro */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header#site-header#site-header .dropdown .menu,
  html[data-theme="auto"] #site-header#site-header#site-header .dropdown .menu,
  :root:not([data-theme]) #site-header#site-header#site-header .dropdown .menu,
  html:not([data-theme]) #site-header#site-header#site-header .dropdown .menu{
    background:
      linear-gradient(
        135deg,
        color-mix(
          in oklab,
          rgba(8,15,28,.92) 98%,
          var(--brand-400, var(--brand, #38bdf8)) 2%
        ),
        color-mix(
          in oklab,
          rgba(15,23,42,.84) 98%,
          var(--brand-500, var(--brand, #38bdf8)) 2%
        )
      ) !important;
  }

  :root[data-theme="auto"] #site-header#site-header#site-header .nav-menu-v2-panel,
  html[data-theme="auto"] #site-header#site-header#site-header .nav-menu-v2-panel,
  :root:not([data-theme]) #site-header#site-header#site-header .nav-menu-v2-panel,
  html:not([data-theme]) #site-header#site-header#site-header .nav-menu-v2-panel{
    background:
      color-mix(
        in oklab,
        rgba(8,15,28,.90) 98%,
        var(--brand-400, var(--brand, #38bdf8)) 2%
      ) !important;
  }
}

/* Noche: panel oscuro traslúcido, independientemente del tema global */
#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"] .dropdown .menu{
  background:
    linear-gradient(
      135deg,
      color-mix(
        in oklab,
        rgba(8,15,28,.92) 98%,
        var(--brand-400, var(--brand, #38bdf8)) 2%
      ),
      color-mix(
        in oklab,
        rgba(15,23,42,.84) 98%,
        var(--brand-500, var(--brand, #38bdf8)) 2%
      )
    ) !important;
}

#site-header:where(:not(:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])))#site-header#site-header#site-header[data-weather-variant*="noche"] .nav-menu-v2-panel{
  background:
    color-mix(
      in oklab,
      rgba(8,15,28,.90) 98%,
      var(--brand-400, var(--brand, #38bdf8)) 2%
    ) !important;
}

/* === END J+A · fondos traslúcidos de paneles desplegables === */

/* === J+A · desenfoque suave sólo para el menú principal 2026-07-23 === */
/*
   Conserva el fondo traslúcido p10 y difumina ligeramente el contenido
   situado detrás. No afecta a los desplegables superiores ni al layout.
*/
#site-header#site-header#site-header .nav-menu-v2-panel{
  backdrop-filter: blur(6px) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.03) !important;
}
/* === END J+A · desenfoque suave del menú principal === */

/* === J+A · restaurar logotipos principales opacos 2026-07-23 === */
/*
   Recupera únicamente el fondo blanco y la opacidad completa del logotipo.
   No modifica bordes, sombras, tamaños, colores, menús ni desplegables.
*/
#site-header#site-header#site-header .brand-logo-wrap{
  background: #ffffff !important;
  background-color: #ffffff !important;
}

#site-header#site-header#site-header .brand-logo-img{
  opacity: 1 !important;
}
/* === END J+A · restaurar logotipos principales opacos === */

/* === J+A · cristal de marca equilibrado + sombra de título 2026-08-21 === */
/*
   El chip completo de marca conserva el color de vidrio propio de cada tema,
   pero usa la misma opacidad en claro, oscuro y auto. Sólo se modifica su
   fondo; el borde, el desenfoque, el layout y los controles quedan intactos.
*/
#site-header#site-header{
  --jd-brand-chip-surface-top: rgba(255,255,255,.105);
  --jd-brand-chip-surface-bottom: rgba(255,255,255,.025);
  --jd-brand-title-shadow-filter:
    drop-shadow(0 1px 1px rgba(15,23,42,.14));
}

:root[data-theme="dark"] #site-header#site-header,
html[data-theme="dark"] #site-header#site-header,
html.dark #site-header#site-header,
body.dark #site-header#site-header{
  --jd-brand-chip-surface-top: rgba(15,23,42,.105);
  --jd-brand-chip-surface-bottom: rgba(15,23,42,.025);
  --jd-brand-title-shadow-filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.22));
}

@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] #site-header#site-header,
  html[data-theme="auto"] #site-header#site-header,
  :root:not([data-theme]) #site-header#site-header,
  html:not([data-theme]) #site-header#site-header{
    --jd-brand-chip-surface-top: rgba(15,23,42,.105);
    --jd-brand-chip-surface-bottom: rgba(15,23,42,.025);
    --jd-brand-title-shadow-filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.22));
  }
}

#site-header#site-header .brand::before{
  background:
    linear-gradient(
      180deg,
      var(--jd-brand-chip-surface-top),
      var(--jd-brand-chip-surface-bottom)
    ) !important;
}

#site-header#site-header .brand-title strong{
  /* Safari deforma text-shadow cuando el título usa background-clip:text. */
  text-shadow: none !important;
  filter: var(--jd-brand-title-shadow-filter) !important;
}
/* === END J+A · cristal de marca equilibrado + sombra de título === */

/* === R1-A.1 · completar anti-flash en Safari === */
#site-header[data-weather-variant]::before{
  opacity: .86 !important;
  transition: none !important;
}
/* === END R1-A.1 · completar anti-flash en Safari === */

/* HD-07: only the opted-in art pack changes background framing. */
#site-header:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"]) {
  --jd-art-image: var(--jd-header-bg-desktop);
  min-height: calc(100vw * 420 / 2560) !important;
}
/* The legacy sheet has selectors with repeated IDs: match that specificity. */
#site-header#site-header#site-header:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])::before {
  top: 0 !important;
  bottom: 0 !important;
  background-image: var(--jd-art-image) !important;
  background-position: center center !important;
  background-size: cover !important;
}
@media (max-width: 1100px) {
  #site-header:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"]) {
    --jd-art-image: var(--jd-header-bg-landscape);
    min-height: calc(100vw * 520 / 1920) !important;
  }
}
@media (max-width: 700px) and (orientation: portrait) {
  #site-header:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"]) {
    --jd-art-image: var(--jd-header-bg-portrait);
    min-height: calc(100vw * 620 / 1080) !important;
  }
}

/* HD-07 framing: the navigation closes the image; preserve proportional artwork. */
#site-header:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"]) { display: flex; flex-direction: column; }
#site-header:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"]) > .header-bar { flex: 0 0 auto; }
#site-header:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"]) > .header-nav { margin-top: auto !important; }

/* HD-07 artwork carries its own light and color; themes must not retint it. */
#site-header#site-header#site-header:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])::before {
  opacity: 1 !important;
  filter: none !important;
}
#site-header#site-header#site-header:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"])::after {
  background: transparent !important;
}
/* Desktop: a centered crop removes 40 of the original 420 units at each edge. */
@media (min-width: 1101px) {
  #site-header:is([data-header-art-pack="hd05-common-v2"],[data-header-art-pack="hd05-cardedeu-v1"]) {
    min-height: calc(100vw * 340 / 2560) !important;
  }
}

/* HD-07 solar contrast: fresh server daylight=false, removed at sunrise/expiry.
   Scoped to header interface colors. User theme, artwork and geometry are preserved.
   Values below reuse this sheet's manual dark palette. */
#site-header#site-header#site-header#site-header[data-header-solar-night="true"] {
  --fg: #e5eaf0;
  --text: #e5eaf0;
  --muted: #94a3b8;
  --card: #0f1216;
  --border: #1f2937;
  --jd-menu-surface: color-mix(in oklab, rgba(8,15,28,.94) 98%, var(--brand-400, var(--brand, #38bdf8)) 2%);
  --jd-menu-surface-soft: color-mix(in oklab, rgba(16,25,40,.76) 97%, var(--brand-400, var(--brand, #38bdf8)) 3%);
  --jd-menu-control: color-mix(in oklab, rgba(14,24,40,.88) 94%, var(--brand-400, var(--brand, #38bdf8)) 6%);
  --jd-menu-link: color-mix(in oklab, rgba(31,41,55,.82) 97%, var(--brand-400, var(--brand, #38bdf8)) 3%);
  --jd-menu-text: #f8fafc;
  --jd-menu-muted: #d7e0eb;
  --jd-menu-title: color-mix(in oklab, var(--brand-400, var(--brand, #38bdf8)) 58%, #f8fafc 42%);
  --jd-menu-border: color-mix(in oklab, var(--brand-400, var(--brand, #38bdf8)) 24%, rgba(255,255,255,.28) 76%);
  --jd-menu-link-border: color-mix(in oklab, var(--brand-400, var(--brand, #38bdf8)) 20%, rgba(255,255,255,.22) 80%);
  --jd-menu-shadow: 0 20px 48px rgba(0,0,0,.47), 0 2px 10px rgba(0,0,0,.30);
  --jd-menu-surface-soft: rgba(16,25,40,.78);
  --jd-menu-link: rgba(30,41,59,.88);
  --jd-menu-border: rgba(255,255,255,.20);
  --jd-menu-link-border: rgba(255,255,255,.26);
  --jd-menu-group-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 9px 26px rgba(0,0,0,.22);
  --jd-menu-pill-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 1px 3px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.05);

  --jd-old2-actions-bg: rgba(15,23,42,.03);
  --jd-old2-actions-border-top: rgba(255,255,255,.16);
  --jd-old2-actions-border-side: rgba(255,255,255,.16);
  --jd-old2-actions-border-bottom: rgba(255,255,255,.16);
  --jd-old2-actions-shadow:
    inset 0 1px 0 rgba(255,255,255,.106),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.024),
    3px 4px 9px rgba(0,0,0,.18),
    7px 9px 16px rgba(0,0,0,.10);

  --jd-old2-control-bg: rgba(15,23,42,.035);
  --jd-old2-control-border: rgba(255,255,255,.14);
  --jd-old2-control-shadow:
    inset 0 1px 0 rgba(255,255,255,.094),
    inset 0 -1px 0 rgba(0,0,0,.14),
    2px 3px 7px rgba(0,0,0,.12);
  --jd-old2-control-text: #ffffff;

  --jd-old2-small-bg:
    linear-gradient(135deg, rgba(15,23,42,.48), rgba(15,23,42,.30));
  --jd-old2-small-border: rgba(255,255,255,.13);
  --jd-old2-small-shadow:
    0 18px 44px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10);
  --jd-old2-small-text: var(--fg, var(--text, #e5eaf0));

  --jd-old2-panel-bg:
    radial-gradient(
      circle at 10% 0%,
      color-mix(in oklab, var(--brand, #10b981) 12%, rgba(255,255,255,.08)),
      transparent 46%
    ),
    linear-gradient(135deg, rgba(15,23,42,.40), rgba(15,23,42,.24));
  --jd-old2-panel-border: rgba(255,255,255,.13);
  --jd-old2-panel-shadow:
    0 24px 70px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10);
  --jd-old2-group-bg:
    linear-gradient(135deg, rgba(15,23,42,.24), rgba(15,23,42,.075));
  --jd-old2-group-border: rgba(255,255,255,.10);
  --jd-old2-panel-text: var(--fg, var(--text, #e5eaf0));
  --jd-old2-link-bg: var(--card, #0f1216);
  --jd-old2-link-border: var(--border, #1f2937);
  --jd-old2-link-text: var(--fg, var(--text, #e5eaf0));

  --jd-brand-chip-surface-top: rgba(15,23,42,.105);
  --jd-brand-chip-surface-bottom: rgba(15,23,42,.025);
  --jd-brand-title-shadow-filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.22));

}
#site-header#site-header#site-header#site-header[data-header-solar-night="true"] .brand-title strong {
  color: rgba(255,255,255,.96) !important;
  -webkit-text-fill-color: rgba(255,255,255,.96) !important;
}
@supports (-webkit-background-clip: text) {
#site-header#site-header#site-header#site-header[data-header-solar-night="true"] .brand-title strong {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

    background-image:
      linear-gradient(
        90deg,
        rgba(255,255,255,.99) 0%,
        rgba(255,255,255,.99) 34%,
        color-mix(
          in oklab,
          rgba(255,255,255,.96) 62%,
          var(--brand-400, var(--brand-accent, var(--brand, #38bdf8))) 38%
        ) 58%,
        color-mix(
          in oklab,
          var(--brand-400, var(--brand-accent, var(--brand, #38bdf8))) 74%,
          white 26%
        ) 82%,
        color-mix(
          in oklab,
          var(--brand-500, var(--brand, #0ea5e9)) 70%,
          white 30%
        ) 100%
      ) !important;
  }
}
#site-header#site-header#site-header#site-header[data-header-solar-night="true"] .brand-title .brand-subtitle,
#site-header#site-header#site-header#site-header[data-header-solar-night="true"] .season-label {
  color: rgba(255,255,255,.94) !important;
  -webkit-text-fill-color: rgba(255,255,255,.94) !important;
  text-shadow: 0 1px 8px rgba(2,6,23,.24) !important;
}
#site-header#site-header#site-header#site-header[data-header-solar-night="true"] .header-actions {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
#site-header#site-header#site-header#site-header[data-header-solar-night="true"] .nav-menu-v2-summary {
  color: var(--jd-menu-text) !important;
  -webkit-text-fill-color: var(--jd-menu-text) !important;
  background: var(--jd-menu-control) !important;
}
#site-header#site-header#site-header#site-header[data-header-solar-night="true"] .dropdown .menu {
  background:
    linear-gradient(
      135deg,
      color-mix(
        in oklab,
        rgba(8,15,28,.92) 98%,
        var(--brand-400, var(--brand, #38bdf8)) 2%
      ),
      color-mix(
        in oklab,
        rgba(15,23,42,.84) 98%,
        var(--brand-500, var(--brand, #38bdf8)) 2%
      )
    ) !important;
}
#site-header#site-header#site-header#site-header[data-header-solar-night="true"] .nav-menu-v2-panel {
  background:
    color-mix(
      in oklab,
      rgba(8,15,28,.90) 98%,
      var(--brand-400, var(--brand, #38bdf8)) 2%
    ) !important;
}

/* HD-07: match the clear theme's unblurred title glass in dark/auto too.
   Legacy dark rules still applied blur(12px) saturate(1.16) to this layer.
   Keep its existing tint/alpha, border, shadow, text and panorama untouched. */
#site-header#site-header .brand::before {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* El nombre completo de bienestar ocupa dos líneas en la pestaña móvil. */
@media(max-width:700px){
  #site-header .header-nav .nav.nav-v2 > a.nav-current-page-v2[data-i18n="nav_indices"]{
    min-width:0!important;
    max-width:calc(100% - 185px)!important;
    flex:1 1 0!important;
    height:auto!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    text-align:center!important;
    line-height:1.18!important;
    padding:8px 10px!important;
  }
}
@media(max-width:360px){
  #site-header .header-nav .nav.nav-v2 > a.nav-current-page-v2[data-i18n="nav_indices"]{
    font-size:.76rem!important;
    padding:6px!important;
  }
}

/* JD desktop crop 2026-09-22: approved desktop-only refinement. */
/* Desktop only: reduce the panorama from 340 to 300 nominal units.
   Keep the lower landscape visible and take the extra crop from the sky.
   The content may grow naturally at narrow widths or increased text size. */
@media (min-width: 1101px) {
  #site-header[data-header-art-pack^="hd05-"] {
    min-height: calc(100vw * 300 / 2560) !important;
  }
  #site-header#site-header#site-header[data-header-art-pack^="hd05-"]::before {
    background-position: center 66.6667% !important;
  }
  #site-header[data-header-art-pack^="hd05-"] > .header-bar {
    padding-top: 12px !important;
    padding-bottom: 8px !important;
  }
  /* Montalt's tower reaches high into the sky: retain its existing top margin. */
  #site-header#site-header#site-header[data-header-art-pack="hd05-montalt-v1"]::before {
    background-position: center 33.3333% !important;
  }
}