/* 77 · Barra que se funde. Se carga después de tema.css y sobrescribe .cab.
   Estado por defecto = sólida (páginas sin portada y sin JS).
   Solo en la home (main.inicio, con JS) la cabecera nace transparente sobre la portada y cb77-solida
   la funde a sólida: la capa de fondo (.cab::before) anima solo opacity (220 ms). */

.cab {
  mix-blend-mode: normal;
  background: transparent; border-bottom: 0;
  color: var(--fg);
  transition: color 220ms ease;
}
.cab::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bg); border-bottom: 1px solid var(--line);
  opacity: 1; transition: opacity 220ms ease;
}
.cab .marca { color: inherit; }
.cab .marca img { filter: none; transition: filter 220ms ease; }
.cab :focus-visible { outline-color: var(--fg); }
.cab .menu-btn { border-color: var(--fg); color: var(--fg); background: none; transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease; }
.cab .menu-btn:hover, .cab .menu-btn[aria-expanded="true"] { background: var(--fg); color: #fff; }
/* «Solicitar propuesta»: relleno rojo cuando la barra es sólida */
.cab .btn-linea { background: var(--signal); border-color: var(--signal); color: #fff; transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease; }
.cab .btn-linea:hover { background: var(--fg); border-color: var(--fg); color: #fff; }

/* ---- estado transparente (solo home, sobre la portada) ---- */
html.cj body:has(main.inicio) .cab:not(.cb77-solida):not(:has(.nav.abierto)) { color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
html.cj body:has(main.inicio) .cab:not(.cb77-solida):not(:has(.nav.abierto))::before { opacity: 0; }
html.cj body:has(main.inicio) .cab:not(.cb77-solida):not(:has(.nav.abierto)) .marca img { filter: invert(1); }
html.cj body:has(main.inicio) .cab:not(.cb77-solida):not(:has(.nav.abierto)) :focus-visible { outline-color: #fff; }
html.cj body:has(main.inicio) .cab:not(.cb77-solida):not(:has(.nav.abierto)) .menu-btn { border-color: #fff; color: #fff; }
html.cj body:has(main.inicio) .cab:not(.cb77-solida):not(:has(.nav.abierto)) .menu-btn:hover { background: #fff; color: #000; }
html.cj body:has(main.inicio) .cab:not(.cb77-solida):not(:has(.nav.abierto)) .btn-linea { background: transparent; border-color: #fff; color: #fff; }
html.cj body:has(main.inicio) .cab:not(.cb77-solida):not(:has(.nav.abierto)) .btn-linea:hover { background: #fff; border-color: #fff; color: #000; text-shadow: none; }

/* ---- menú móvil: panel oscuro; la barra también, con texto claro ---- */
@media (max-width: 1179px) {
  .js .nav { background: #0a0a0a; color: #fff; border-bottom: 1px solid #3a3a3a; text-shadow: none; }
  .js .nav a { color: #fff; }
  .cab:has(.nav.abierto) { mix-blend-mode: normal; background: transparent; color: #fff; text-shadow: none; }
  .cab:has(.nav.abierto)::before { opacity: 1; background: #0a0a0a; border-bottom-color: #3a3a3a; }
  .cab:has(.nav.abierto) .marca img { filter: invert(1); }
  .cab:has(.nav.abierto) :focus-visible { outline-color: #fff; }
  .cab:has(.nav.abierto) .menu-btn { border-color: #fff; color: #fff; }
  .cab:has(.nav.abierto) .menu-btn:hover, .cab:has(.nav.abierto) .menu-btn[aria-expanded="true"] { background: #fff; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  .cab, .cab::before, .cab .marca img, .cab .menu-btn, .cab .btn-linea { transition: none; }
}

/* ---- selector de idioma (assets/idioma.js) ----
   Escritorio: botón mono 13 px «ES ▾» al final de la barra, con panel desplegable (flechas, Esc, clic fuera).
   Móvil: sin botón; los seis códigos van en una fila al final del menú. Sin JS: la lista queda siempre visible.
   El botón hereda el color de .cab (blanco sobre la portada, negro después); el panel es siempre blanco. */
.cab .idsel { position: relative; font-family: var(--mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); font-size: 0.8125rem; line-height: 1; letter-spacing: 0.04em; }
.cab .idsel-btn { display: none; }
.cab .idsel-lista { display: flex; flex-wrap: wrap; gap: 0 20px; padding-top: var(--s-2, 16px); }
.cab .idsel-lista a { display: inline-block; padding: 8px 0 6px; font-size: 0.8125rem; color: inherit; text-decoration: none; border-bottom: 2px solid transparent; }
.cab .idsel-lista a[aria-current] { font-weight: 500; border-bottom-color: currentColor; }
.cab .idsel-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (min-width: 1180px) {
  .nav li.idsel-li { margin-left: 0; }
  .nav li:has(> .btn) { margin-left: 8px; }
  .js .cab .idsel-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; font: inherit; letter-spacing: inherit;
    color: inherit; text-shadow: inherit; background: none; border: 1px solid transparent; cursor: pointer;
    transition: border-color 160ms ease;
  }
  .js .cab .idsel-btn::after {
    content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform 160ms ease;
  }
  .js .cab .idsel.abierto .idsel-btn::after { transform: translateY(1px) rotate(-135deg); }
  .js .cab .idsel-btn:hover, .js .cab .idsel.abierto .idsel-btn { border-color: currentColor; }
  .js .cab .idsel-lista {
    display: none; flex-direction: column; flex-wrap: nowrap; gap: 0; position: absolute; right: 0; top: calc(100% + 17px);
    min-width: 11.5rem; padding: 6px 0; background: var(--bg, #fff); color: var(--fg, #0a0a0a); text-shadow: none;
    border: 1px solid var(--line-strong, #0a0a0a); z-index: 30;
  }
  .js .cab .idsel.abierto .idsel-lista { display: flex; }
  .js .cab .idsel-lista a { display: flex; gap: 12px; align-items: baseline; padding: 10px 16px; font-size: 0.8125rem; text-decoration: none; border-bottom: 0; }
  .js .cab .idsel-lista a:hover { background: var(--grid, #f4f4f4); }
  .js .cab .idsel-lista a[aria-current] { font-weight: 500; box-shadow: inset 3px 0 var(--signal, #9a5a43); }
  .js .cab .idsel-lista :focus-visible { outline: 2px solid var(--fg, #0a0a0a) !important; outline-offset: -2px; }
  .js .cab .idsel-c { min-width: 1.6em; }
  .js .cab .idsel-n { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; font-family: var(--font, "Archivo", sans-serif); font-size: 0.875rem; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .cab .idsel-btn, .js .cab .idsel-btn::after { transition: none; }
}

/* zonas táctiles (puntero grueso): el selector de idioma de la barra (solo ≥ 1180 px) llega a 40 px; la barra no crece (align-items: center) */
@media (pointer: coarse) and (min-width: 1180px) {
  .js .cab .idsel-btn { min-height: 40px; }
}