/* ==========================================================================
   ORIENTE — base
   Tokens, tipografías y piezas compartidas por todas las páginas.
   Todo sale del brandbook 2025. No inventar valores nuevos acá: si hace falta
   un color o un tamaño, agregarlo como variable y usarlo por nombre.
   ========================================================================== */

/* --- Tipografías -----------------------------------------------------------
   Avenir: variantes Book, Book Oblique, Black y Heavy, ya con licencia web.
   Atiba sigue viniendo de Behance: falta verificar los términos de uso
   comercial antes de darla por cerrada.                                     */

@font-face {
  font-family: 'Atiba';
  src: url('../fonts/atiba.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Book';
  src: url('../fonts/avenir-book.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Book Oblique';
  src: url('../fonts/avenir-book-oblique.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Heavy';
  src: url('../fonts/avenir-heavy.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Black';
  src: url('../fonts/avenir-black.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Paleta del brandbook. El blanco NUNCA es puro. */
  --negro:      #000000;
  --tinta:      #333333;   /* texto principal */
  --gris:       #646464;   /* texto secundario */
  --tenue:      #8A8A85;   /* rótulos */
  --blanco:     #F9F9F9;   /* el fondo de la marca */
  --amarillo:   #DDFD11;   /* acento, siempre en dosis chicas */
  --placa:      #E6E6E4;   /* fondo de las imágenes mientras cargan */

  --sans:  'Avenir Book', 'Avenir Next', Avenir, system-ui, sans-serif;
  --ital:  'Avenir Book Oblique', 'Avenir Book', sans-serif;
  --tit:   'Atiba', 'Avenir Next', sans-serif;

  --margen: 44px;          /* margen lateral en escritorio */
  --tira:   132px;         /* ancho del índice de miniaturas */
  --ficha:  218px;         /* ancho del panel de datos en Work */

  /* Opacidades del dibujo de fondo (la figura de construcción del isologo) */
  --linea-op: 0.15;
  --punto-op: 1;
}

@media (max-width: 759px) {
  :root { --margen: 20px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* --- Grano --------------------------------------------------------------- */
/* Capa de ruido sobre el fondo. En blanco va en multiply.
   Si se decide sacarlo, borrar este bloque y el <div class="grano"> de cada
   página; no hay nada más que dependa de él. */
.grano {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url('../img/grain.png');
  background-repeat: repeat;
  background-size: 96px 96px;
  mix-blend-mode: multiply;
  opacity: 0.46;
}
.grano--oscuro { mix-blend-mode: overlay; opacity: 0.34; }

/* --- El dibujo de fondo --------------------------------------------------- */
/* Fragmento ampliado de la figura de construcción del isologo (brandbook).
   El SVG lleva preserveAspectRatio="xMidYMid slice" para que el arco siga
   entrando por el mismo lado a cualquier tamaño de ventana.
   Geometría del brandbook: círculo exterior R, rectas a ±0,707·R (= R/√2,
   donde la diagonal corta el círculo) y puntos en esas intersecciones. */
.figura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.figura [stroke] { stroke: rgba(51, 51, 51, var(--linea-op)); }

/* --- Menú ---------------------------------------------------------------- */
.menu {
  position: absolute;
  left: var(--margen);
  right: var(--margen);
  top: 40px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu--linea { padding-bottom: 20px; border-bottom: 1px solid rgba(51, 51, 51, 0.18); }

/* El isologo se dibuja con máscara para poder recolorearlo por CSS. */
.marca {
  display: block;
  width: 150px;
  height: 39px;
  background: var(--tinta);
  -webkit-mask: url('../img/wordmark.png') no-repeat center / contain;
  mask: url('../img/wordmark.png') no-repeat center / contain;
}
.marca--claro { background: var(--blanco); }

.nav {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav a:hover { color: var(--tinta); }
.nav--claro { color: rgba(249, 249, 249, 0.72); }
.nav--claro a:hover { color: var(--amarillo); }

/* Pestaña activa: punto amarillo + tinta plena */
.nav .activa { display: flex; align-items: center; gap: 7px; color: var(--tinta); }
.nav--claro .activa { color: var(--blanco); }
.nav .activa::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amarillo);
  flex: 0 0 auto;
}

/* Desplegable de categorías: aparece al pasar el mouse */
.desplegable { position: relative; }
.desplegable > ul {
  position: absolute;
  top: 26px; left: 12px;
  margin: 0; padding: 0;
  list-style: none;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  line-height: 2.2;
  color: var(--tenue);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.desplegable:hover > ul,
.desplegable:focus-within > ul { opacity: 1; pointer-events: auto; }
.desplegable > ul li:first-child { color: var(--tinta); }

/* --- Rótulos y pie -------------------------------------------------------- */
.rotulo {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tenue);
}
.dato { font-size: 14px; line-height: 1.35; color: var(--tinta); margin-top: 6px; }

.pie {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

/* Enlace de acento: el punto amarillo lo usamos sólo acá y en la pestaña activa */
.acento {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amarillo);
  display: flex;
  align-items: center;
  gap: 8px;
}
.acento::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amarillo);
  flex: 0 0 auto;
}

/* --- Celular -------------------------------------------------------------- */
/* El menú pasa a dos líneas: el isologo arriba y las pestañas abajo.
   Nunca hay que scrollear para encontrarlas. */
@media (max-width: 759px) {
  .menu {
    top: 26px;
    display: block;
    border-bottom: 0;
    padding-bottom: 0;
  }
  .marca { width: 104px; height: 27px; }
  .nav {
    gap: 17px;
    margin-top: 20px;
    font-size: 10px;
    letter-spacing: 0.13em;
  }
  .nav .idioma { margin-left: auto; }
  .desplegable > ul { display: none; }   /* en celular el desplegable no va */
}

/* Accesibilidad: respetar a quien pidió menos movimiento */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}