/* Nabla: la letra de los titulares de MUTANTE. Es una letra en 3D a color con un eje de profundidad (EDPT 0–200).
   Las paletas son propias: hueso con extrusión naranja sobre negro, brasa (naranja) donde antes iba el color de mutación,
   carbón sobre fondos naranjas y fuego para las letras que están mutando. El cuerpo de texto sigue en Archivo.
   Donde los títulos animaban el ancho de Archivo ('wdth'), ahora también animan la profundidad ('EDPT'). */
/* Nabla se sirve desde la web y no desde Google Fonts: Google le manda a Safari (iPhone y Mac) una versión en SVG
   que pinta los títulos en negro y cuesta mucho dibujar. Esta es la versión a color (COLRv1, solo letras latinas):
   donde el navegador no la pinta a color, la letra sale plana en el color del texto (ver .nabla-plana más abajo). */
@font-face {
  font-family: 'Nabla'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(nabla-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-palette-values --hueso {
  font-family: Nabla; base-palette: 0;
  override-colors: 0 #f8f5f0, 1 #a8300f, 2 #f24a1f, 3 #e0441c, 4 #f8f5f0, 5 #ffffff, 6 #f8f5f0, 7 #ffffff, 8 #ffffff, 9 #ffffff;
}
@font-palette-values --brasa {
  font-family: Nabla; base-palette: 0;
  override-colors: 0 #ff7a3d, 1 #7a1a05, 2 #c9330f, 3 #d93d14, 4 #f24a1f, 5 #ff8a5c, 6 #f24a1f, 7 #ff8a5c, 8 #ffc3a8, 9 #ffffff;
}
@font-palette-values --carbon {
  font-family: Nabla; base-palette: 0;
  override-colors: 0 #2a2420, 1 #000000, 2 #3a1408, 3 #2a0f06, 4 #070606, 5 #3a322d, 6 #070606, 7 #3a322d, 8 #5a4d45, 9 #8a7a70;
}
@font-palette-values --choise-blanco {
  font-family: Nabla; base-palette: 0;
  override-colors: 0 #ffffff, 1 #04185c, 2 #0b2b8d, 3 #123aa8, 4 #ffffff, 5 #ffffff, 6 #ffffff, 7 #ffffff, 8 #ffffff, 9 #ffffff;
}
@font-palette-values --fuego {
  font-family: Nabla; base-palette: 0;
  override-colors: 0 #ffb000, 1 #c22a0c, 2 #f24a1f, 3 #f05a1c, 4 #ffb000, 5 #ffd35c, 6 #ffb000, 7 #ffd35c, 8 #fff1c4, 9 #ffffff;
}
:root { --nabla: 'Nabla', 'Archivo', sans-serif; }

/* ---------- los titulares pasan a Nabla ---------- */
/* Solo nombres, números y titulares cortos: las frases y los textos largos (el lema de la portada, el manifiesto,
   "Las marcas ya no viven en un solo formato…", los actos, las cabezas de sección y las tarjetas de la vitrina)
   se quedan en Archivo para que se lean bien. */
.zona-titulo b, .zona-sig h2, .ficha h3, .ficha-t span, .dc-nombre,
.indice-cabeza h4, .indice-grupo h5, .indice-fila b, .clientes b,
.detalle h2, .detalle-sig b,
.ar-fondo b, .ar-portada h2,
.es-titulo,
.verso h2:not(.v-portada h2), .verso h3:not(.v-acto h3):not([data-subir]), .v-lab-num, .v-banda b, .v-cifra b, .v-acto i, .v-servicio b,
.verso .vb-elastico, .vb-fila-cab b, .vb-lab-pct, .vb-paso i, .vb-paso h4, .vb-cifra b, .vb-cinta b,
.vt h2, .vt-gigante, .vt-paso-num, .vt-cifras b, .vt-sig b {
  font-family: var(--nabla) !important;
  font-weight: 400 !important;
  font-synthesis: none;
  font-palette: --hueso;
  letter-spacing: 0 !important;
  -webkit-text-stroke: 0 !important;
}
/* las etiquetas chicas (menos de 24 px en el teléfono) van en Nabla solo en pantallas grandes; en el teléfono se quedan
   en Archivo 900 ancho, como el menú "Qué hacemos". El corte es el del teléfono en todo el sitio (760 px), también en la
   hoja del Lab: de 761 a 820 px su hoja ya es la del teléfono, pero "Siguiente zona" sigue en Nabla como hoy */
@media (min-width: 761px) {
  .zona-etiqueta b, .detalle-archivo b, .ar-info b, .ar-foco-info h3, .vt-flujo-pasos b, .estudio .es-siguiente {
    font-family: var(--nabla) !important;
    font-weight: 400 !important;
    font-synthesis: none;
    font-palette: --hueso;
    letter-spacing: 0 !important;
    -webkit-text-stroke: 0 !important;
  }
}
/* las cifras de Nabla no son tabulares: se quitan para que no salten */
.v-lab-num, .v-cifra b, .vb-lab-pct, .vb-cifra b, .vt-cifras b { font-variant-numeric: normal !important; }

/* letras que giran en el tablero (letras.js): mientras mutan arden, al caer quedan en hueso */
.letras x-l.gira, .indice-fila:hover b x-l.gira, .v-servicio b x-l.gira, .vb-paso.activo x-l.gira { font-palette: --fuego; color: inherit; }

/* ---------- donde antes había color de mutación ---------- */
.v-lab-num small, .vt-paso-num, .vt-cifras b, .ficha-t.acento span { font-palette: --brasa; }

/* ---------- títulos que antes iban en contorno (color: transparent) ----------
   En Chrome el alfa de 'color' multiplica la letra de color de Nabla: con color transparente no se pinta nada
   (así se perdían Films, Lab y Digital en los portales, los grupos del índice y el siguiente proyecto).
   Se les da un color opaco y la transparencia, donde se quiere, va en 'opacity'. */
.zona-titulo b, .zona-titulo:hover b, .zona-sig h2, .indice-grupo h5, .clientes b, .detalle-sig b, .detalle-sig:hover b,
.ar-fondo b, .vb-paso i, .vb-cinta-b b, .v-banda b, .v-acto i, .vt-gigante { color: var(--hueso) !important; }
.indice-grupo h5 { font-variation-settings: 'EDPT' 90; }
/* la letra de Nabla sube más que la de Archivo: más interlineado para que el número y la bajada no la toquen */
.zona-titulo b, .zona-sig h2 { line-height: 1.04 !important; }
.vb-cinta-b b { opacity: .6; }
.vt-gigante { opacity: .14; }
.ar-fondo b { opacity: .7; font-palette: --brasa; }

/* ---------- Films, Lab y Digital: opacos y con volumen para que destaquen sobre las fotos; al pasar el cursor arden ---------- */
.zona-titulo b, .zona-sig h2 { font-variation-settings: 'EDPT' 150; opacity: 1; transition: font-variation-settings .7s var(--suave); }
/* en el teléfono un toque deja :hover pegado y la palabra saltaría a EDPT 200 brasa: los hover van solo donde hay cursor */
@media (hover: hover) {
  .zona-titulo:hover b { font-variation-settings: 'EDPT' 200; font-palette: --brasa; }
}
.clientes b { font-variation-settings: 'EDPT' 30; opacity: .55; }
.clientes b:nth-child(3n+1) { font-variation-settings: 'EDPT' 120; opacity: 1; }
.v-acto i { font-palette: --brasa; font-variation-settings: 'EDPT' 30; opacity: .5; }
.vb-paso i { font-variation-settings: 'wdth' 62, 'EDPT' 0; opacity: .4; }
.vb-paso.activo i { font-palette: --carbon; opacity: 1; }
.ar-fondo b { font-variation-settings: 'EDPT' 40; }

/* ---------- estados: crecer en profundidad y encenderse ---------- */
.ficha-t.gira span { opacity: .55; }
.indice-fila b { transition: transform .45s var(--suave), font-variation-settings .6s var(--suave); }
.indice-fila:focus-visible b { font-palette: --carbon; font-variation-settings: 'EDPT' 200; }
.detalle-sig b { transition: font-variation-settings .6s var(--suave); }
.v-servicio b { transition: transform .6s var(--suave), font-variation-settings .6s var(--suave); }
.v-banda b:nth-of-type(even) { font-palette: --carbon; }
@media (hover: hover) {
  .indice-fila:hover b { font-palette: --carbon; font-variation-settings: 'EDPT' 200; }
  .detalle-sig:hover b { font-palette: --brasa; font-variation-settings: 'EDPT' 200; }
  .v-servicio:hover b { font-palette: --brasa; font-variation-settings: 'EDPT' 200; }
  .vb-subir.dentro .vb-l:hover, .vb-cinta b:hover { font-palette: --brasa; }
}
.vb-fila-cab b { opacity: .45; transition: font-variation-settings 1s var(--salida), opacity .5s; }
.vb-fila.abierta .vb-fila-cab b { opacity: 1; }
.vt-sig b { transition: font-variation-settings .6s var(--suave); }
@media (hover: hover) {
  .vt-sig:hover b { font-palette: --brasa; font-variation-settings: 'EDPT' 200; }
  .estudio .es-siguiente:hover { font-palette: --brasa; }
}

/* ---------- la entrada: los titulares nacen planos y se extruyen ---------- */
@keyframes extruir { from { font-variation-settings: 'EDPT' 0; } }
.ficha h3, .detalle h2, .indice-cabeza h4, .vt-gigante, .ar-portada h2 { animation: extruir 1.4s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .ficha h3, .detalle h2, .indice-cabeza h4, .vt-gigante, .ar-portada h2 { animation: none; }
}

/* Nabla extruye hacia arriba a la izquierda y la cara ya sube casi un cuadratín: los títulos de varias líneas necesitan más interlineado */
.verso h2:not(.v-portada h2), .verso h3:not(.v-acto h3):not([data-subir]), .v-servicios h2, .ficha h3, .detalle h2, .vb-paso h4, .vt h2 { line-height: 1.02 !important; }

/* ---------- navegadores que no pintan Nabla a color: la letra sale plana ----------
   colores.js pone .nabla-plana en <html> cuando ni la letra de siempre ni la COLRv0 (nabla-v0.js) salen a color
   (iOS antes de 15.4, o si la v0 falla). Plana, la letra es la silueta de la cara MÁS la extrusión en un solo color:
   a profundidad 0 queda solo la cara, limpia. La lista va completa y explícita (con las etiquetas que en el teléfono
   pasan a Archivo), y sin :is() porque justo los Safari viejos son los que la ven. */
.nabla-plana .zona-titulo b, .nabla-plana .zona-sig h2, .nabla-plana .ficha h3, .nabla-plana .ficha-t span, .nabla-plana .dc-nombre,
.nabla-plana .indice-cabeza h4, .nabla-plana .indice-grupo h5, .nabla-plana .indice-fila b, .nabla-plana .clientes b,
.nabla-plana .detalle h2, .nabla-plana .detalle-sig b,
.nabla-plana .ar-fondo b, .nabla-plana .ar-portada h2,
.nabla-plana .es-titulo, .nabla-plana .es-titulo x-l,
.nabla-plana .verso h2:not(.v-portada h2), .nabla-plana .verso h3:not(.v-acto h3):not([data-subir]), .nabla-plana .v-lab-num,
.nabla-plana .v-banda b, .nabla-plana .v-cifra b, .nabla-plana .v-acto i, .nabla-plana .v-servicio b,
.nabla-plana .verso .vb-elastico, .nabla-plana .vb-e, .nabla-plana .vb-fila-cab b, .nabla-plana .vb-lab-pct,
.nabla-plana .vb-paso i, .nabla-plana .vb-paso h4, .nabla-plana .vb-cifra b, .nabla-plana .vb-cinta b,
.nabla-plana .vt h2, .nabla-plana .vt-gigante, .nabla-plana .vt-paso-num, .nabla-plana .vt-cifras b, .nabla-plana .vt-sig b {
  font-variation-settings: 'EDPT' 0 !important;   /* con !important también les gana a 'extruir' y a los estilos que pone el JS */
}
/* las etiquetas: Nabla en pantallas grandes, Archivo ancho en el teléfono (Nabla no tiene 'wdth' y Archivo no tiene 'EDPT') */
.nabla-plana .zona-etiqueta b, .nabla-plana .detalle-archivo b, .nabla-plana .ar-info b, .nabla-plana .ar-foco-info h3,
.nabla-plana .vt-flujo-pasos b, .nabla-plana .estudio .es-siguiente {
  font-variation-settings: 'wdth' 125, 'EDPT' 0 !important;
}
/* el volumen se dibuja hacia donde Nabla extruye (arriba a la izquierda), en tres escalones con los tonos de la extrusión
   del proyecto (--pp-1/2/3 de colores.js; sin proyecto, los de hueso). Solo en los títulos de 40 px o más */
.nabla-plana .zona-titulo b, .nabla-plana .zona-sig h2, .nabla-plana .detalle h2, .nabla-plana .detalle-sig b, .nabla-plana .es-titulo, .nabla-plana .dc-nombre,
.nabla-plana .ar-portada h2, .nabla-plana .vt-sig b, .nabla-plana .indice-cabeza h4, .nabla-plana .indice-grupo h5,
.nabla-plana .verso .vb-elastico, .nabla-plana .vb-fila-cab b, .nabla-plana .verso h2:not(.v-portada h2) {
  text-shadow: -.017em -.01em 0 var(--pp-3, #e0441c), -.035em -.02em 0 var(--pp-2, #c43a15), -.052em -.03em 0 var(--pp-1, #a8300f);
}
.nabla-plana .indice-grupo h5 small { text-shadow: none; }   /* el número de zona (01, 02, 03) es JetBrains Mono de 11 px: con la sombra no se lee */

/* el nombre del proyecto en el cartel de Digital (solo existe en el teléfono, también si se gira): profundidad de nombre de proyecto */
.dc-nombre { font-variation-settings: 'EDPT' 60; }

/* ---------- el teléfono: menos profundidad, sin inclinar y sin la animación de extruir ----------
   A tamaños de teléfono la extrusión honda se come el hueco entre letras. Profundidad por papel: palabras de zona 90,
   cabezas 80, nombres de proyecto 60, piezas chicas 40. El prefijo html les gana a las reglas de cada hoja;
   el estado oculto de la hoja del Lab (.es-info:not(.entra) .es-titulo x-l) sigue ganando. */
@media (max-width: 760px) {
  html .zona-titulo b, html .zona-sig h2 { font-variation-settings: 'EDPT' 90; transform: none; }   /* Nabla ya es isométrica: sin el skewY que venía de Archivo */
  html .indice-cabeza h4, html .indice-grupo h5, html .ar-portada h2, html .vt-paso-num, html .vt-cifras b,
  html .vb-fila.abierta .vb-fila-cab b, html .vb-paso.activo i { font-variation-settings: 'EDPT' 80; }
  html .es-titulo x-l, html .detalle h2, html .detalle-sig b, html .vt-sig b, html .indice-fila b, html .vb-paso h4,
  html .clientes b:nth-child(3n+1) { font-variation-settings: 'EDPT' 60; }
  html .vt h2, html .ficha-t span, html .clientes b, html .vb-cinta b { font-variation-settings: 'EDPT' 40; }
  .detalle h2, .indice-cabeza h4, .vt-gigante, .ar-portada h2 { animation: none; }   /* 'extruir' repinta el texto en cada cuadro */
  /* las etiquetas en Archivo 900 ancho; las que llevan color de proyecto lo toman con color (Archivo no usa font-palette) */
  .zona-etiqueta b, .detalle-archivo b, .ar-info b, .ar-foco-info h3, .vt-flujo-pasos b { font-variation-settings: 'wdth' 125; }
  /* el enlace al Archivo: TURBOMÁQUINAS (la palabra más larga) no se parte, así que va a ancho normal y la letra se ajusta
     a la pantalla (24 px desde 386 px de ancho) para caber entre "ARCHIVO" y la flecha; la flecha nunca se encoge */
  html .detalle-archivo { gap: 12px; }
  html .detalle-archivo b, html.nabla-plana .detalle-archivo b { font-variation-settings: 'wdth' 100 !important; }
  html .detalle-archivo b { font-size: min(24px, calc((100vw - 146px) / 10)); min-width: 0; overflow-wrap: anywhere; }
  html .detalle-archivo span { flex: none; }
  .ar-info b.pp, .ar-foco-info h3.pp { color: var(--pp-0); }
  /* ARCHIVO: con interlineado .8 y overflow:hidden se cortaba la parte de arriba de la cara */
  .ar-portada h2 { line-height: 1.04 !important; padding-top: .06em !important; }
}