/* ==========================================================================
   plantilla.css — header y footer de React en las páginas ESTÁTICAS. 29-sep-2026.
   El marcado lo pone plantilla-estatica.py (raíz del repo) con las MISMAS clases
   Tailwind que React; esas clases ya vienen en /assets/index-*.css, que estas
   páginas cargan. Aquí solo va lo que en React hace su JS (Radix): mostrar y
   ocultar el menú móvil y el selector de idioma, y el hueco del header fijo.
   ========================================================================== */

/* El preflight de Tailwind pone [hidden]{display:none} sin !important: una clase
   .flex del mismo elemento lo ganaría. */
[data-bc-plantilla][hidden],
[data-bc-plantilla] [hidden] { display: none !important; }

/* Hueco bajo el header fijo (mide lo mismo que el de React: 16+48+16+1 en móvil,
   24+64+24+1 desde 768 px, 8+48+8+1 en móvil apaisado). */
.bc-hueco { height: 81px; }
@media (max-width: 767px) and (orientation: landscape) { .bc-hueco { height: 65px; } }
@media (min-width: 768px) {
  .bc-hueco { height: 113px; }
  #bc-menu-movil { display: none !important; }
}
/* Los saltos a anclas (#contacto-bcontent…) no quedan debajo del header. */
html { scroll-padding-top: 96px; }
@media (min-width: 768px) { html { scroll-padding-top: 128px; } }

/* Selector de idioma: el menú cuelga del botón, alineado a la derecha (como Radix). */
.bc-idioma { position: relative; }
.bc-idioma [role="menu"] { position: absolute; right: 0; top: calc(100% + 8px); }
.bc-idioma [role="menuitem"] { cursor: pointer; }

/* Con el menú móvil abierto no se desplaza la página de fondo. */
html.bc-menu-abierto, html.bc-menu-abierto body { overflow: hidden; }

/* Lo que queda del pie viejo dentro de la página (enlaces a ciudades, racimos…):
   los enlaces seguidos iban pegados («InicioServiciosTrabajos…»). */
.bc-legado { margin-top: 2rem; }
.bc-legado [data-bc-enlaces] { display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 4px; }

/* EN/ES del menú móvil: aquí son enlaces (en React, botones); mismo tamaño táctil
   que movil.css da a los botones de React (44 × 44, texto centrado). */
@media (max-width: 767px) {
  #bc-menu-movil nav[aria-label="Mobile navigation"] + div > a {
    min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
}