/* 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'). */
@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-etiqueta b, .zona-sig h2, .ficha h3, .ficha-t span,
.indice-cabeza h4, .indice-grupo h5, .indice-fila b, .clientes b,
.detalle h2, .detalle-archivo b, .detalle-sig b,
.ar-fondo b, .ar-portada h2, .ar-info b, .ar-foco-info h3,
.es-titulo, .estudio .es-siguiente,
.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-flujo-pasos b, .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 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); }
.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:hover b, .indice-fila:focus-visible b { font-palette: --carbon; font-variation-settings: 'EDPT' 200; }
.detalle-sig b { transition: font-variation-settings .6s var(--suave); }
.detalle-sig:hover b { font-palette: --brasa; font-variation-settings: 'EDPT' 200; }
.v-servicio b { transition: transform .6s var(--suave), font-variation-settings .6s var(--suave); }
.v-servicio:hover b { font-palette: --brasa; font-variation-settings: 'EDPT' 200; }
.v-banda b:nth-of-type(even) { font-palette: --carbon; }
.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); }
.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 crece hacia abajo con la profundidad: 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; }