/* ONTOS — tokens de marca (fuente única; paleta definida en colores.md, 21-jul-2026).
 * Claro por defecto desde el remodelado v2 (19-ago-2026): el comprador B2B lee de día.
 * Oscuro via prefers-color-scheme. Las demos (caso-90s etc.) NO cargan este fichero:
 * son cine, siempre noche. */

@font-face {
  font-family: "Fraunces";
  src: url("fraunces.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --teja: #d4713b;          /* fija: la clave del logo y fondo de CTA */
  --bg: #faf8f5;            /* hueso */
  --panel: #ffffff;
  --borde: #e3ddd2;
  --texto: #1c1a17;         /* tinta */
  --sec: #6b6257;           /* granito */
  --acento: #b0532a;        /* teja-quemada: texto/enlace sobre claro (AA) */
  --realce: #b0532a;
  --piedra-logo: #4a443a;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0e0c;          /* noche */
    --panel: #171512;
    --borde: #2a261f;
    --texto: #ece7de;
    --sec: #a39a8c;         /* granito-claro */
    --acento: #d4713b;      /* teja sobre oscuro */
    --realce: #e8956a;      /* teja-clara */
    --piedra-logo: #3a352c;
  }
}

/* Barra de navegación compartida (index, bim, casos) */
.barra {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--borde);
}
/* La barra es pegajosa: sin esto, un salto a #casos/#escritos/#contacto deja el
   principio de la sección debajo de ella. */
:target, section[id] { scroll-margin-top: 4.5rem; }
.barra nav {
  max-width: 64rem; margin: 0 auto; padding: 0.7rem 1.5rem;
  display: flex; align-items: center; gap: 1.4rem;
}
/* Wordmark: Fraunces, decisión de Fernando 1-sep-2026 (draft data/_cache/estilo-wordmark).
   Antes: sans 650 + tracking 0.18em (aproximación de Avenir, que no es autoalojable). */
.barra .marca {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--serif); font-weight: 600; letter-spacing: 0.02em; text-decoration: none;
  color: var(--texto); font-size: 1.05rem; margin-right: auto;
}
.barra .marca svg { width: 22px; height: 22px; color: var(--piedra-logo); }
.barra a.item {
  color: var(--sec); text-decoration: none; font-size: 0.9rem;
  padding: 0.25rem 0; border-bottom: 2px solid transparent;
  white-space: nowrap;   /* "Oficina BIM" partía en dos líneas y descuadraba la fila */
}
.barra a.item:hover, .barra a.item[aria-current="page"] {
  color: var(--acento); border-bottom-color: var(--acento);
}
/* El conmutador de idioma no es una sección más: es un interruptor. Píldora corta,
   sin subrayado, y en móvil se aprieta para que no expulse a "Contacto" de la fila. */
.barra a.item.idioma {
  border: 1px solid var(--borde); border-radius: 999px;
  padding: 0.1rem 0.45rem; font-size: 0.78rem; letter-spacing: 0.06em;
}
.barra a.item.idioma:hover { color: var(--acento); border-color: var(--acento); }
/* Móvil: seis enlaces + idioma no caben en una fila legible; la barra se parte en dos
   (marca e idioma arriba, enlaces debajo). Hasta el 21-sep la fila se deslizaba a los lados. */
@media (max-width: 34rem) {
  /* 22-sep-2026: dos filas. Con seis ítems + EN la fila única desbordaba (medido en WebKit:
     411 px de contenido; 21 px de más a 390, 51 a 360) y «Contacto» quedaba escondido bajo
     la pastilla EN pegajosa, que se leía «Contac». En vez de encoger la letra por debajo
     de 11 px o esconder un ítem, la barra se parte: arriba logo + wordmark y el idioma;
     debajo los seis enlaces, que caben en 360 px a 11,2 px (355 px medidos). El salto lo
     fuerza el ::after de ancho completo (order 1, entre el idioma y los ítems). */
  .barra nav {
    flex-wrap: wrap; justify-content: space-between; gap: 0 0.45rem;
    padding: 0.45rem 0.7rem 0.3rem;
  }
  .barra nav::after { content: ''; order: 1; flex-basis: 100%; height: 0; }
  .barra .marca { order: 0; font-size: 1rem; gap: 0.5rem; margin-right: auto; }
  .barra .marca svg { width: 20px; height: 20px; }
  .barra a.item { order: 2; font-size: 0.7rem; }
  .barra a.item.idioma { order: 1; padding: 0.08rem 0.38rem; font-size: 0.7rem; }
  /* Área táctil de 44 px (25-ago-2026, medido en WebKit a 390/360/320: los enlaces de la
     barra caían en 22-29 px de alto y fallar el toque en una barra pegajosa es de las cosas
     que más barata parecen y más caro salen). Se agranda con un pseudo-elemento y NO con
     padding: el padding movería el subrayado del enlace activo y cambiaría el dibujo de la
     barra. Así crece lo que el dedo toca y no cambia nada de lo que el ojo ve. */
  .barra a.item, .barra .marca { position: relative; }
  .barra a.item::after, .barra .marca::after {
    content: ''; position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%); height: 44px;
  }
  /* El pie se quedaba en 12,8 px y ahí van los enlaces legales. En móvil, mínimo 13,6.
     Va con `body footer` a propósito: cada página redefine `footer` en su <style> propio,
     que se carga DESPUÉS de este fichero, así que a igual especificidad ganaba la página. */
  body footer { font-size: 0.85rem; }
}