/* 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[data-weather-variant^="noche"]::before,
html[data-theme="dark"] #site-header[data-weather-variant^="noche"]::before,
html.dark #site-header[data-weather-variant^="noche"]::before,
body.dark #site-header[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[data-weather-variant^="noche"]::before,
  html:not([data-theme]) #site-header[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[data-weather-variant^="noche"]::after,
html[data-theme="dark"] #site-header[data-weather-variant^="noche"]::after,
html.dark #site-header[data-weather-variant^="noche"]::after,
body.dark #site-header[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[data-weather-variant^="noche"]::after,
  html:not([data-theme]) #site-header[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[data-weather-variant^="noche"]::before,
  html[data-theme="auto"] #site-header[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[data-weather-variant^="noche"]::after,
  html[data-theme="auto"] #site-header[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[data-weather-variant="viento_claro"]::before{
  background-position: center center !important;
}

/* Viento claro de noche */
#site-header[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[data-weather-variant="viento_claro"]::before{
    background-position: center 44% !important;
    background-size: cover !important;
  }

  #site-header[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[data-weather-variant="viento_claro"]::before{
    background-position: center center !important;
  }

  #site-header[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[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[data-weather-variant="noche"]::before,
  #site-header[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[data-weather-variant="noche"]::before,
  :root[data-site="santvicenc_montalt"] #site-header[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[data-weather-variant="soleado"]::before,
  #site-header[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[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[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[data-weather-variant="nublado"]::before,
  #site-header[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[data-weather-variant="niebla_bruma"]::before,
  #site-header[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[data-weather-variant="viento_fuerte"]::before,
  #site-header[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[data-weather-variant="lluvia"]::before,
  #site-header[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[data-weather-variant="tormenta"]::before,
  #site-header[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[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[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[data-weather-variant^="noche"]{
  color-scheme: dark;
}

/* Título principal: claro sobre fondo nocturno, incluso si la web está en modo claro */
#site-header[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[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[data-weather-variant^="noche"] .brand-title .brand-subtitle,
#site-header[data-weather-variant^="noche"] .season-pill,
#site-header[data-weather-variant^="noche"] .season-label,
#site-header[data-weather-variant^="noche"] .header-actions .chip-current,
#site-header[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[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[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[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header[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[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[data-weather-variant^="noche"] .nav.nav-v2 > a:not(.active),
#site-header[data-weather-variant^="noche"] .nav-menu-v2-summary,
#site-header[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[data-weather-variant^="noche"] .nav.nav-v2 > a:not(.active):hover,
#site-header[data-weather-variant^="noche"] .nav-menu-v2-summary:hover,
#site-header[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[data-weather-variant^="noche"] .nav.nav-v2 > a.active,
#site-header[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[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[data-weather-variant^="noche"] .dropdown .menu a,
#site-header[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[data-weather-variant^="noche"] .dropdown .menu a.active,
#site-header[data-weather-variant^="noche"] .dropdown .menu button.active,
#site-header[data-weather-variant^="noche"] .dropdown .menu a:hover,
#site-header[data-weather-variant^="noche"] .dropdown .menu button:hover{
  background: rgba(255,255,255,.08) !important;
}

/* Panel grande del Menú */
#site-header[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[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[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[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[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[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[data-weather-variant^="noche"] .nav a.nav-new::after,
#site-header[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[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[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[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[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[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[data-weather-variant="lluvia"]::after,
#site-header[data-weather-variant="noche_lluvia"]::after,
#site-header[data-weather-variant="nublado"]::after,
#site-header[data-weather-variant="noche_nublada"]::after,
#site-header[data-weather-variant="tormenta"]::after,
#site-header[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[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[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[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header[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[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[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[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[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header[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[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[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[data-weather-variant^="noche"] .brand::after,
#site-header[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[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header[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[data-weather-variant^="noche"] .nav.nav-v2 > a:not(.active),
#site-header[data-weather-variant^="noche"] .nav-menu-v2-summary,
#site-header[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[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[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[data-weather-variant^="noche"] .nav-menu-v2-summary,
#site-header[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[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[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[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header[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[data-weather-variant^="noche"] .nav-menu-v2-summary,
#site-header[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[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[data-weather-variant^="noche"] .header-actions,
#site-header[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header[data-weather-variant^="noche"] .header-actions .dropdown > summary,
#site-header[data-weather-variant^="noche"] .header-actions .badge,
#site-header[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[data-weather-variant^="noche"]{
  color-scheme: dark !important;
}

/* Textos generales del header nocturno */
#site-header[data-weather-variant^="noche"] .brand-title strong,
#site-header[data-weather-variant^="noche"] .brand-title .brand-subtitle,
#site-header[data-weather-variant^="noche"] .season-pill,
#site-header[data-weather-variant^="noche"] .season-label,
#site-header[data-weather-variant^="noche"] .header-actions,
#site-header[data-weather-variant^="noche"] .header-actions .badge,
#site-header[data-weather-variant^="noche"] .header-actions .chip-current,
#site-header[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header[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[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[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header[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[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[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[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[data-weather-variant^="noche"] .dropdown .menu a,
#site-header[data-weather-variant^="noche"] .dropdown .menu button{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#site-header[data-weather-variant^="noche"] .dropdown .menu a.active,
#site-header[data-weather-variant^="noche"] .dropdown .menu button.active,
#site-header[data-weather-variant^="noche"] .dropdown .menu a:hover,
#site-header[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[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[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[data-weather-variant^="noche"]::after{
  background: transparent !important;
}

/* El fondo del header debe seguir viéndose */
#site-header[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[data-weather-variant^="noche"] .brand-title .brand-subtitle,
#site-header[data-weather-variant^="noche"] .season-label,
#site-header[data-weather-variant^="noche"] .header-actions .chip-current,
#site-header[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header[data-weather-variant^="noche"] .header-actions .badge,
#site-header[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[data-weather-variant^="noche"]::after{
  background: transparent !important;
}

#site-header[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[data-weather-variant^="noche"] .brand::before,
#site-header[data-weather-variant^="noche"] .header-actions::before,
#site-header[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[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[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header[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[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[data-weather-variant^="noche"] .nav-menu-v2-summary,
#site-header[data-weather-variant^="noche"] .nav-menu-v2-summary.active,
#site-header[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[data-weather-variant^="noche"] .brand-title .brand-subtitle,
#site-header[data-weather-variant^="noche"] .season-label,
#site-header[data-weather-variant^="noche"] .header-actions .chip-current,
#site-header[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header[data-weather-variant^="noche"] .nav-menu-v2-summary,
#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,.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[data-weather-variant^="noche"] .brand::before,
#site-header[data-weather-variant^="noche"] .header-actions::before,
#site-header[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[data-weather-variant^="noche"] .brand::before{
  border-radius: inherit !important;
}

#site-header .header-actions::before,
#site-header[data-weather-variant^="noche"] .header-actions::before{
  border-radius: inherit !important;
}

#site-header .header-nav::before,
#site-header[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[data-weather-variant^="noche"]::after{
  background: transparent !important;
}

/* La imagen nocturna debe verse, no apagarse */
#site-header[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[data-weather-variant^="noche"] .brand::before,
  html[data-theme="auto"] #site-header[data-weather-variant^="noche"] .brand::before,
  :root[data-theme="auto"] #site-header[data-weather-variant^="noche"] .header-actions::before,
  html[data-theme="auto"] #site-header[data-weather-variant^="noche"] .header-actions::before,
  :root[data-theme="auto"] #site-header[data-weather-variant^="noche"] .header-nav::before,
  html[data-theme="auto"] #site-header[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[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header[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[data-weather-variant^="noche"] .nav-menu-v2-summary,
#site-header[data-weather-variant^="noche"] .nav-menu-v2-summary.active,
#site-header[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[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[data-weather-variant^="noche"]::after{
  background: transparent !important;
}

#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: mismo tratamiento real */
#site-header .brand::before,
#site-header .header-actions::before,
#site-header .header-nav::before,
#site-header[data-weather-variant^="noche"] .brand::before,
#site-header[data-weather-variant^="noche"] .header-actions::before,
#site-header[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[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[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header[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[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[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[data-weather-variant^="noche"] .nav-menu-v2-summary,
#site-header[data-weather-variant^="noche"] .nav-menu-v2-summary.active,
#site-header[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[data-weather-variant^="noche"] .brand-title .brand-subtitle,
#site-header[data-weather-variant^="noche"] .season-label,
#site-header[data-weather-variant^="noche"] .header-actions .chip-current,
#site-header[data-weather-variant^="noche"] .header-actions .btn.ghost,
#site-header[data-weather-variant^="noche"] .header-actions .dropdown > summary,
#site-header[data-weather-variant^="noche"] .nav-menu-v2-summary,
#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,.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[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[data-weather-variant*="noche"]::after{
  background: transparent !important;
}

/* Fondo nocturno vivo */
#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 EXACTAMENTE iguales */
#site-header[data-weather-variant*="noche"] .brand::before,
#site-header[data-weather-variant*="noche"] .header-actions::before,
#site-header[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[data-weather-variant*="noche"] .header-nav::before{
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Fuera brillos fantasmas */
#site-header[data-weather-variant*="noche"] .brand::after,
#site-header[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[data-weather-variant*="noche"] .header-actions .btn.ghost,
#site-header[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[data-weather-variant*="noche"] .nav-menu-v2-summary,
#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary.active,
#site-header[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#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#site-header[data-weather-variant*="noche"]::after{
  background: transparent !important;
}

#site-header#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#site-header[data-weather-variant*="noche"] .brand::before,
#site-header#site-header[data-weather-variant*="noche"] .header-actions::before,
#site-header#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#site-header[data-weather-variant*="noche"] .header-nav::before{
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Fuera brillos/líneas fantasma */
#site-header#site-header[data-weather-variant*="noche"] .brand::after,
#site-header#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#site-header[data-weather-variant*="noche"] .header-actions .btn.ghost,
#site-header#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#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#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary,
#site-header#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary.active,
#site-header#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#site-header[data-weather-variant*="noche"] .brand-title .brand-subtitle,
#site-header#site-header[data-weather-variant*="noche"] .season-label,
#site-header#site-header[data-weather-variant*="noche"] .header-actions .chip-current,
#site-header#site-header[data-weather-variant*="noche"] .header-actions .btn.ghost,
#site-header#site-header[data-weather-variant*="noche"] .header-actions .dropdown > summary,
#site-header#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary,
#site-header#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[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#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#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#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#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#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2-summary,
#site-header#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2-summary.active,
#site-header#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2[open] .nav-menu-v2-summary,
#site-header#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2-summary:hover,
#site-header#site-header[data-weather-variant]:not([data-weather-variant*="noche"]) .nav-menu-v2-summary:focus,
#site-header#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#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary,
#site-header#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary.active,
#site-header#site-header[data-weather-variant*="noche"] .nav-menu-v2[open] .nav-menu-v2-summary,
#site-header#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary:hover,
#site-header#site-header[data-weather-variant*="noche"] .nav-menu-v2-summary:focus,
#site-header#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[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#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#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 desplegables son superficies opacas deliberadamente.
   En Android, combinar fondos alpha con backdrop-filter sobre el cielo
   dinámico crea capas translúcidas e inconsistentes entre temas.
*/
#site-header#site-header{
  --jd-menu-surface: #ffffff;
  --jd-menu-surface-soft: #f3f6fa;
  --jd-menu-control: #fffdf8;
  --jd-menu-text: #172033;
  --jd-menu-muted: #526174;
  --jd-menu-border: rgba(15,23,42,.18);
  --jd-menu-shadow: 0 18px 44px rgba(15,23,42,.24), 0 2px 8px rgba(15,23,42,.12);
}

: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: #101827;
  --jd-menu-surface-soft: #192437;
  --jd-menu-control: #172235;
  --jd-menu-text: #f8fafc;
  --jd-menu-muted: #d7e0eb;
  --jd-menu-border: rgba(255,255,255,.20);
  --jd-menu-shadow: 0 20px 48px rgba(0,0,0,.52), 0 2px 10px rgba(0,0,0,.34);
}

@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: #101827;
    --jd-menu-surface-soft: #192437;
    --jd-menu-control: #172235;
    --jd-menu-text: #f8fafc;
    --jd-menu-muted: #d7e0eb;
    --jd-menu-border: rgba(255,255,255,.20);
    --jd-menu-shadow: 0 20px 48px rgba(0,0,0,.52), 0 2px 10px rgba(0,0,0,.34);
  }
}

#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 .dropdown .menu a,
#site-header#site-header .dropdown .menu button,
#site-header#site-header .nav-menu-v2-title,
#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;
  text-shadow: none !important;
}

#site-header#site-header .dropdown .menu a.active,
#site-header#site-header .dropdown .menu button.active,
#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-surface-soft) 82%, var(--brand, #10b981) 18%) !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;
}

/* === END Header menu surfaces + exclusivity fix 2026-07-22 === */