/* ============================================================
   VEKSAI — cabecera y pie ÚNICOS, compartidos por toda la web
   ============================================================
   Fuente de verdad: fabrica/plantillas/cabecera.html (ese fichero explica
   cómo tocar esto). NO se edita nav/footer copiando y pegando en cada
   página nunca más: se edita AQUÍ y en cabecera.html, y se corre
   `python3 fabrica/generar-cabecera.py` para llevarlo a todas las páginas.

   Se carga con <link> AL FINAL de <head>, después del <style> propio de
   cada página: así gana los empates de especificidad frente a reglas
   antiguas de nav/footer que aún queden sueltas en el <style> de la
   página (no hace falta ir a borrarlas una a una, y si alguna página
   vieja no tiene las variables --black/--white/--accent/etc. las trae
   este mismo archivo como último recurso).
   Creado 2026-08-29. */

:root {
  --nav-black: #0a0a0a;
  --nav-white: #f0ede8;
  --nav-accent: #b5ff6d;
  --nav-grey: #111;
  --nav-border: rgba(181,255,109,0.12);
  --nav-border-subtle: rgba(240,237,232,0.1);
  --nav-text-muted: #8e8e8a;
  --nav-w-soft: rgba(240,237,232,0.6);
  --nav-w-strong: rgba(240,237,232,0.85);
  --nav-bg: rgba(10,10,10,0.95);
  --nav-font-display: 'Syne', sans-serif;
  --nav-font-body: 'DM Sans', sans-serif;
}
[data-theme="light"] {
  --nav-black: #f7f6f1;
  --nav-white: #16160f;
  --nav-accent: #56711c;
  --nav-grey: #efede6;
  --nav-border: rgba(86,113,28,0.3);
  --nav-border-subtle: rgba(20,20,10,0.08);
  --nav-text-muted: #55554c;
  --nav-w-soft: rgba(20,20,10,0.6);
  --nav-w-strong: rgba(20,20,10,0.85);
  --nav-bg: rgba(247,246,241,0.95);
}
/* CORREGIDO 2026-08-29, dos veces: NO todas las páginas definen
   --black/--white/--accent/--grey/--border/--text-muted/--w-soft/--w-strong
   en su :root — contacto.html, por ejemplo, usa otro vocabulario entero
   (--bg/--surface/--text). Un primer intento asumió que sí las definían
   todas y confió en la herencia normal de CSS: en contacto.html eso dejaba
   var(--white)/var(--black) sin resolver, y la hamburguesa y el fondo del
   panel móvil salían transparentes (detectado por verificación real en
   móvil, no por lectura de código). Un intento ANTERIOR a ese había
   probado arreglarlo con `--black: var(--black, var(--nav-black))`
   redeclarado dentro de #nav/#mobileMenu — eso es una referencia cíclica,
   y por spec CSS invalida la propiedad ENTERA, fallback incluido: mismo
   síntoma, causa distinta. Ninguno de los dos se repite.

   El arreglo que se queda: CADA propiedad que usa --black/--white/etc. en
   este fichero lleva el fallback de dos argumentos escrito directamente,
   `var(--black, var(--nav-black))`, nunca redeclarando el custom property.
   Si añades una regla nueva con --black/--white/--accent/--grey/--border/
   --border-subtle/--text-muted/--w-soft/--w-strong/--font-display/
   --font-body, escribe el fallback ahí mismo o se rompe en cuanto la use
   una página que no traiga esa paleta. */

#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 22px 64px; border-bottom: 1px solid transparent; transition: border-color 0.3s, background 0.3s; box-sizing: border-box; }

/* Entre 1280 y 1399 px la cabecera va justa: con la entrada nueva del menu,
   el logo, el buscador, los tres idiomas y el CTA, en castellano el boton se
   salia 62 px. Los 64 px de margen a cada lado son lo que sobra ahi; en
   pantallas mas anchas se mantienen. */
@media (min-width: 1280px) and (max-width: 1399px) {
  #nav { padding-left: 28px; padding-right: 28px; }
}
#nav.scrolled { background: var(--nav-bg); border-bottom-color: var(--border, var(--nav-border)); backdrop-filter: blur(12px); }
#nav, #nav *, #mobileMenu, #mobileMenu *, footer.veksai-footer, footer.veksai-footer * { box-sizing: border-box; }
/* El logo NO se encoge. Con flex-shrink:1 y una entrada mas en el menu, a
   1200 px la caja del logo pasaba de 142 a 60 px y VEKSAI se leia "VEK".
   Si algun dia no cabe todo, lo que sobra es una entrada de menu, no la marca. */
.logo-wrap { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; white-space: nowrap; }
.logo-main { font-family: var(--font-display, var(--nav-font-display)); font-weight: 800; font-size: 20px; letter-spacing: 0.16em; color: var(--white, var(--nav-white)); }
.logo-main span { color: var(--accent, var(--nav-accent)); }
.logo-tag { font-family: var(--font-display, var(--nav-font-display)); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent, var(--nav-accent)); border: 1px solid var(--border, var(--nav-border)); padding: 3px 8px; white-space: nowrap; }
.nav-right { display: flex; align-items: center; gap: 20px; min-width: 0; flex-shrink: 0; }
.nav-cta { background: var(--accent, var(--nav-accent)); color: var(--black, var(--nav-black)); padding: 11px 24px; font-family: var(--font-display, var(--nav-font-display)); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: all 0.2s; white-space: nowrap; }
.nav-cta:hover { background: var(--white, var(--nav-white)); }

.nav-links { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); list-style: none; margin: 0; padding: 0; min-width: 0; }
.nav-links a { color: var(--white, var(--nav-white)); text-decoration: none; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; white-space: nowrap; transition: opacity 0.2s; }
.nav-links a:hover, .nav-links a:focus-visible { opacity: 1; }

.nav-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: none; border: 1px solid var(--border-subtle, var(--nav-border-subtle)); color: var(--white, var(--nav-white)); cursor: pointer; padding: 0; flex-shrink: 0; transition: border-color .2s, color .2s; }
.nav-search-btn:hover, .nav-search-btn:focus-visible { border-color: var(--accent, var(--nav-accent)); color: var(--accent, var(--nav-accent)); }

.lang-switcher { display: flex; align-items: center; gap: 2px; }
.lang-switcher button { background: none; border: none; color: var(--text-muted, var(--nav-text-muted)); cursor: pointer; padding: 4px 5px; font-size: 10px; letter-spacing: 0.1em; font-family: var(--font-display, var(--nav-font-display)); font-weight: 700; text-transform: uppercase; transition: color 0.2s; line-height: 1; }
.lang-switcher button.active { color: var(--accent, var(--nav-accent)); }
.lang-switcher button:hover:not(.active) { color: var(--white, var(--nav-white)); }
.lang-sep { color: var(--border-subtle, var(--nav-border-subtle)); font-size: 9px; user-select: none; }

.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; z-index: 200; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--white, var(--nav-white)); transition: transform 0.3s ease, opacity 0.3s ease; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1280px) {
  #nav .nav-pill { display: flex; align-items: center; margin: 0 auto; padding: 4px; background: var(--grey, var(--nav-grey)); border: 1px solid var(--border-subtle, var(--nav-border-subtle)); border-radius: 999px; list-style: none; max-width: calc(100vw - 460px); overflow: hidden; position: relative; transition: padding .3s ease, box-shadow .3s ease; }
  #nav .nav-links { display: none; }
  .pill-indicator { position: absolute; top: 4px; left: 0; bottom: 4px; width: 0; opacity: 0; background: var(--white, var(--nav-white)); border-radius: 999px; box-shadow: 0 2px 14px rgba(0,0,0,.22); transition: transform .32s cubic-bezier(.16,1,.3,1), width .32s cubic-bezier(.16,1,.3,1), opacity .2s ease; will-change: transform, width; pointer-events: none; z-index: 0; }
  .pill-item { position: relative; z-index: 1; display: flex; align-items: center; }
  .pill-item > a { display: block; white-space: nowrap; padding: 9px 15px; border-radius: 999px; font-size: 13px; letter-spacing: 0.01em; color: var(--w-soft, var(--nav-w-soft)); text-decoration: none; transition: color .25s, background .25s; }
  .pill-item > a:hover { color: var(--w-strong, var(--nav-w-strong)); }
  /* El fondo claro y el texto oscuro van JUNTOS, en la misma regla. Antes el
   texto se ponia oscuro aqui y el fondo lo pintaba .pill-indicator, que nace
   con width:0 y opacity:0 y solo lo dimensiona el JS al medir la pagina. Si
   ese calculo no llegaba a correr —paginas que acababan de heredar el menu—,
   quedaba texto casi negro sobre fondo negro y SIN fondo propio: el apartado
   de la pagina en la que estas era el unico ilegible del menu. Con el fondo
   aqui, es imposible que se aplique uno sin el otro. */
.pill-item.marcado > a, .pill-item.activo > a { background: var(--white, var(--nav-white)); color: var(--black, var(--nav-black)); font-weight: 700; }
  #nav.scrolled .nav-pill { padding: 3px; box-shadow: 0 8px 28px -14px rgba(0,0,0,.4); }
  [data-theme="light"] #nav.scrolled .nav-pill { box-shadow: 0 8px 22px -14px rgba(20,20,10,.28); }
}
@media (max-width: 1279px) { #nav .nav-pill { display: none; } }
@media (prefers-reduced-motion: reduce) { .pill-indicator { transition: none !important; } }

.nav-mobile.open ~ .kaip, body:has(.nav-mobile.open) .kaip { opacity: 0; pointer-events: none; transform: scale(.85); }

.nav-mobile { display: none; position: fixed; inset: 0; height: 100dvh; width: 100%; max-width: 100%; background: var(--black, var(--nav-black)); z-index: 150; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; counter-reset: navi; padding: max(80px, env(safe-area-inset-top)) 24px max(48px, env(safe-area-inset-bottom)); }
.nav-mobile.open { display: flex; }
.nav-mobile-brand { position: fixed; top: max(22px, env(safe-area-inset-top)); left: 22px; z-index: 160; font-family: var(--font-display, var(--nav-font-display)); font-weight: 800; font-size: 19px; letter-spacing: 0.02em; color: var(--white, var(--nav-white)); }
.nav-mobile-brand span { color: var(--accent, var(--nav-accent)); }
.nav-mobile-close { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: var(--grey, var(--nav-grey)); border: 1px solid var(--border-subtle, var(--nav-border-subtle)); border-radius: 50%; color: var(--white, var(--nav-white)); cursor: pointer; z-index: 160; }
.nav-mobile-close:active { transform: scale(0.94); }
.nav-mobile a { position: relative; display: flex; align-items: baseline; gap: 16px; width: min(100%, 320px); padding: 10px 0; font-family: var(--font-display, var(--nav-font-display)); font-size: clamp(22px, 6vw, 30px); font-weight: 800; letter-spacing: -0.02em; color: var(--white, var(--nav-white)); text-decoration: none; opacity: 0.62; counter-increment: navi; transition: opacity 0.2s, color 0.2s; }
.nav-mobile a::before { content: counter(navi, decimal-leading-zero); font-family: var(--font-body, var(--nav-font-body)); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; line-height: 1; color: var(--accent, var(--nav-accent)); opacity: 0.65; min-width: 2.4em; font-variant-numeric: tabular-nums; }
.nav-mobile a:hover, .nav-mobile a:focus-visible { opacity: 1; color: var(--accent, var(--nav-accent)); }
/* Buscar: era la palabra suelta, centrada, sin icono y sin el tipo de letra
   del menu. Parecia un despiste entre el ultimo apartado y el boton. Ahora es
   una fila mas del menu, con la MISMA lupa que en escritorio a la izquierda,
   alineada con los demas y numerada como ellos. */
.nav-mobile .nav-mobile-search { border: none; background: none; cursor: pointer;
  text-align: left; font: inherit; align-items: center; }
.nav-mobile .nav-mobile-search svg { flex: 0 0 auto; opacity: .75; }

/* --- Jerarquia del bloque de abajo ---
   Se estaban acumulando cuatro cosas distintas sin orden: Buscar, Pide
   presupuesto, Acceso clientes y el idioma. Manda el boton; los otros tres son
   secundarios y tienen que verse asi. */
.nav-mobile .nav-mobile-cta { margin-top: 26px; }
.nav-mobile-foot { margin-top: 22px; }
.nav-mobile .nav-mobile-cta { justify-content: center; margin-top: 18px; background: var(--accent, var(--nav-accent)); color: var(--black, var(--nav-black)); opacity: 1; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; padding: 16px 28px; border-radius: 4px; counter-increment: none; text-align: center; }
.nav-mobile .nav-mobile-cta::before { content: none; }
.nav-mobile .nav-mobile-cta:hover { color: var(--black, var(--nav-black)); opacity: 0.85; }
.nav-mobile-foot { margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px 20px; border: 1px solid var(--border-subtle, var(--nav-border-subtle)); border-radius: 999px; }
.lang-switcher-mobile { display: flex; gap: 16px; }
.lang-switcher-mobile button { background: none; border: none; color: var(--text-muted, var(--nav-text-muted)); cursor: pointer; font-family: var(--font-display, var(--nav-font-display)); font-size: 20px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.2s; }
.lang-switcher-mobile button.active { color: var(--accent, var(--nav-accent)); }
.lang-switcher-mobile button:hover:not(.active) { color: var(--white, var(--nav-white)); }

@media (max-width: 1180px) {
  #nav { padding: 20px 30px; }
  #nav.scrolled { padding: 16px 30px; }
  .logo-tag { display: none; }
  .nav-right { gap: 16px; }
  .nav-links { gap: 16px; }
  .nav-cta { padding: 10px 16px; }
}
@media (max-width: 960px) {
  .nav-links, .lang-switcher, #nav .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .nav-right { gap: 10px; }
  .logo-tag { display: inline-block; }
  #nav { padding: 16px 22px; background: var(--nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border, var(--nav-border)); }
}
@media (max-width: 560px) { .logo-tag { display: none; } }
@media (max-width: 480px) {
  #nav { padding: 14px 16px; }
  .nav-cta { padding: 10px 16px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .nav-hamburger span, .nav-mobile a { transition: none; } }

/* ---- Pie único ---- */
footer.veksai-footer { background: var(--black, var(--nav-black)); border-top: 1px solid var(--border, var(--nav-border)); padding: 48px 64px 32px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
footer.veksai-footer .footer-copy { color: var(--text-muted, var(--nav-text-muted)); font-size: 12px; margin: 0; }
footer.veksai-footer .footer-nav { display: flex; gap: 26px; flex-wrap: wrap; }
footer.veksai-footer .footer-nav a { font-size: 12px; color: var(--text-muted, var(--nav-text-muted)); text-decoration: none; transition: color 0.2s; }
footer.veksai-footer .footer-nav a:hover { color: var(--white, var(--nav-white)); }
@media (max-width: 960px) {
  footer.veksai-footer { flex-direction: column; text-align: center; padding: 40px 22px 26px; }
  footer.veksai-footer .footer-nav { justify-content: center; }
}

/* ---- Buscador del sitio (Pagefind, se monta al vuelo) ---- */
.veksai-search-overlay { position: fixed; inset: 0; z-index: 300; display: none; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); padding: 10vh 20px 20px; overflow-y: auto; }
.veksai-search-overlay.open { display: block; }
.veksai-search-panel { max-width: 640px; margin: 0 auto; background: var(--black, #0a0a0a); border: 1px solid var(--border-subtle, rgba(240,237,232,.1)); border-radius: 16px; padding: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.veksai-search-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle, rgba(240,237,232,.1)); }
.veksai-search-row svg { flex-shrink: 0; color: var(--text-muted, #8e8e8a); }
.veksai-search-input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--white, #f0ede8); font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 16px; padding: 8px 0; }
.veksai-search-close { flex-shrink: 0; background: none; border: none; color: var(--text-muted, #8e8e8a); cursor: pointer; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; }
.veksai-search-close:hover { color: var(--white, #f0ede8); }
.veksai-search-results { max-height: 55vh; overflow-y: auto; padding: 6px; }
.veksai-search-hit { display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none; color: inherit; }
.veksai-search-hit:hover, .veksai-search-hit:focus-visible { background: var(--grey, #111); }
.veksai-search-hit-title { font-family: var(--font-display, 'Syne', sans-serif); font-weight: 700; font-size: 14.5px; color: var(--white, #f0ede8); margin: 0 0 4px; }
.veksai-search-hit-excerpt { font-size: 12.5px; line-height: 1.5; color: var(--text-muted, #8e8e8a); margin: 0; }
.veksai-search-hit-excerpt mark { background: none; color: var(--accent, #b5ff6d); font-weight: 600; }
.veksai-search-empty, .veksai-search-hint { padding: 22px 14px; text-align: center; font-size: 13px; color: var(--text-muted, #8e8e8a); }
@media (max-width: 640px) {
  .veksai-search-overlay { padding: 0; }
  .veksai-search-panel { max-width: 100%; height: 100dvh; border-radius: 0; display: flex; flex-direction: column; }
  .veksai-search-results { max-height: none; flex: 1; }
}

/* «Acceso clientes»: enlace discreto, NO un boton. No compite con «Pide
   presupuesto», que es la accion que queremos. Va al panel de Clara, el unico
   acceso de cliente que existe y responde hoy; el hub de /clientes/ NO se
   enlaza hasta que pase la auditoria de seguridad y la revision legal que su
   propia documentacion exige. (2026-08-30) */
.nav-clientes { font-size: 12.5px; color: var(--w-soft, var(--nav-w-soft));
  text-decoration: none; white-space: nowrap; padding: 6px 10px; border-radius: 999px;
  transition: color .2s, background .2s; }
.nav-clientes:hover { color: var(--white, var(--nav-white));
  background: rgba(240,237,232,.07); }
/* «Acceso clientes» NO es navegacion principal: es la puerta de los pocos que
   ya son clientes. Entro heredando el estilo de los enlaces del menu -tipografia
   grande, numerado 08- y metido en la misma pildora que ES/CA/EN. Se ve mal y
   compite con «Pide presupuesto», que es la accion que queremos. Ahora va
   ultimo, pequeno, gris y en una sola linea. */
.nav-mobile .nav-mobile-clientes { display: block; width: auto; margin: 18px auto 0;
  padding: 4px 0; font-family: var(--font-body, var(--nav-font-body));
  font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.3;
  white-space: nowrap; text-align: center; opacity: 1;
  color: var(--text-muted, var(--nav-text-muted)); text-decoration: none; }
.nav-mobile .nav-mobile-clientes::before { content: none; }
.nav-mobile .nav-mobile-clientes:hover { color: var(--white, var(--nav-white)); }
/* "Acceso clientes" es el enlace mas prescindible de la cabecera y el que
   deja sitio: sin el, en el tramo 1280-1399 cabe el menu entero con la
   entrada nueva y el CTA no se sale. Sigue en la hoja del movil. */
@media (max-width: 1399px) { .nav-clientes { display: none; } }
