/* =====================================================================
   Fidem Abogados · Versión final con movimiento (29 sep 2026, versión 7: portada «Amanecer» sin horizonte y firma
   en Contacto)
   Referencias de motionsites.ai: «Quantum Lucid» (portada luminosa centrada, titular por renglones y tarjeta de
   áreas que sube y se inclina en 3D) y «Ancient Oath» (texto que se ilumina palabra por palabra). Tres momentos
   de marca intercambiables en Quiénes somos con ?momento=c|b|a (Filigrana por defecto, Trazo, Ensamble), en
   lacre traslúcido.
   Curva de llegada expo-out (0.16, 1, 0.3, 1) de «Rare Gallery»; amortiguación tipo Lenis en JS.
   Se carga después de fidem.css y solo actúa con <body class="concepto-final">.
   Mejora progresiva: todo el movimiento vive dentro de (prefers-reduced-motion: no-preference)
   y depende de clases que pone movimiento.js. Sin JS, o con «reducir movimiento», la página
   se ve completa y quieta. Se animan transform y opacity (y, puntualmente, filter, color y stroke-dashoffset).
   ===================================================================== */

body.concepto-final{
  --curva:cubic-bezier(.2,.7,.2,1);
  --curva-suave:cubic-bezier(.33,0,.15,1);
  --curva-expo:cubic-bezier(.16,1,.3,1);      /* llega sin frenazo (Rare Gallery) */
  --fin-margen:var(--margen);
  --fin-gap:clamp(20px,2.6vw,32px);
  --halo:245,136,52;          /* lacre en RGB, solo para el halo de la portada */
}
/* La tarjeta de áreas llega al margen derecho en todos los anchos, a plomo con CONTACTO y con las secciones. Ya no se le
   descuenta una reserva para el botón flotante de WhatsApp: en la primera pantalla (medido de 320 a 1920 px) el botón
   solo cae sobre el relleno inferior derecho de la tarjeta o sobre el lado vacío de sus filas, nunca sobre texto. */
@media (min-width:900px){
  body.concepto-final{--fin-margen:48px;--fin-gap:32px}
}

/* ---------- Símbolo en SVG ---------- */
.sello-defs{position:absolute;width:0;height:0;overflow:hidden}
.simbolo{display:block;overflow:visible;fill:var(--lacre);stroke:none;stroke-width:0;stroke-linejoin:round}
.compacta__simbolo .simbolo{width:41px;height:36px}

/* =====================================================================
   PORTADA «Amanecer» (aprobada por el socio el 29 sep 2026) · papel luminoso, eje central y tarjeta de áreas
   Rótulo, titular liviano en dos renglones, bajada y botones van en un eje central sobre papel blanco con tres halos
   cálidos muy tenues. Debajo, la tarjeta de áreas: blanca, con el filete de 1 px de siempre, entra subiendo y
   enfocándose. El 29 sep 2026 el socio pidió quitar el horizonte curvo de lacre y la banda de luz naranja («la media
   luna»): se retiraron por completo (reglas, animaciones, paralaje y assets/portada-horizonte.svg) y los halos volvieron
   a su intensidad normal. En la portada no hay otro símbolo que el del logo: la barra compacta lo firma la primera vez
   que aparece (técnica de la firma de Contacto; bloque 9 del movimiento).
   Sin JS o con «reducir movimiento» todo se ve completo y quieto.
   ===================================================================== */
/* Alto de la portada: la ventana, entre 620 y 960 px (en pantallas muy altas no se abre un vacío entre los botones y el
   índice). Los halos y la inclinación de la tarjeta no generan desplazamiento horizontal (overflow:clip) */
body.concepto-final .portada{z-index:auto;display:flex;flex-direction:column;min-height:max(620px,min(100svh,960px));background:var(--papel);overflow:hidden;overflow:clip}
body.concepto-final .cabecera{background:transparent}
/* El contenido va sobre el fondo luminoso (ambos posicionados, en orden) */
body.concepto-final .portada > .contenedor,
body.concepto-final .portada__cuerpo{position:relative}

/* Fondo: tres halos cálidos, muy tenues, que se desplazan despacio; se desvanece antes del final */
.portada__fondo{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 99%);mask-image:linear-gradient(to bottom,#000 62%,transparent 99%)}
.halo{position:absolute;display:block;width:var(--d);height:var(--d);
  background:radial-gradient(closest-side,rgba(var(--halo),var(--a1,.08)),rgba(var(--halo),var(--a2,.03)) 48%,rgba(var(--halo),0) 100%)}
/* Tono máximo ≈ #fef6ef (nunca crema); el centro del halo mayor queda fuera de la pantalla, lejos de la cabecera */
.halo--a{--d:max(760px,74vmax);right:calc(var(--d) * -.62);top:calc(var(--d) * -.62)}
.halo--b{--d:max(600px,58vmax);right:calc(var(--d) * -.10);bottom:calc(var(--d) * -.42);--a1:.07;--a2:.025}
.halo--c{--d:max(440px,44vmax);left:calc(var(--d) * -.30);top:34%;--a1:.05;--a2:.02}

/* Eje central en todos los anchos (la hoja, por dentro, sigue alineada a la izquierda). El texto se asienta sobre el
   índice: el espacio que sobra queda arriba, bajo la cabecera, y la distancia de los botones a la hoja no cambia con el
   alto de la pantalla. El cuerpo es contenedor: el titular crece con su ancho (cqi) */
body.concepto-final .portada__cuerpo{
  width:100%;max-width:1280px;margin:0 auto;
  padding:clamp(20px,4.5vh,72px) var(--fin-margen) 0;
  display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,4vh,40px);align-items:start;justify-items:center;
  text-align:center;container-type:inline-size;
  flex:1 0 auto;align-content:end;
}
body.concepto-final .portada__texto{grid-column:1 / -1;grid-row:auto;width:100%;max-width:none;margin:0;padding:0}
body.concepto-final .portada__texto > div{max-width:none}
/* Titular en dos renglones fijos, «Un aliado jurídico para / hacer crecer su negocio»: el primero mide 9,00 em y el
   segundo 9,46 em; con 9,6 em de medida el corte no puede caer en otro sitio. Crece con el ancho del cuerpo (cqi) y con
   el alto de la pantalla (svh): 72,5 px a 1000 × 580, 90 px a 1280 × 720, 99,5 px a 1440 × 900 y 1920 × 1080 */
body.concepto-final .portada h1{margin:18px auto 0;max-width:9.6em;font:300 clamp(52px,min(8.4cqi,12.5svh),100px)/1.03 var(--font-sans);letter-spacing:-.035em;text-wrap:balance}
body.concepto-final .portada__bajada{margin:clamp(16px,2.4vw,24px) auto 0;font:400 clamp(16px,1.3vw,19px)/1.55 var(--font-sans);max-width:34em;text-wrap:balance}
/* Una frase por renglón en todos los anchos (sin «no obstáculos.» sola en el segundo; a 320 px cada frase se parte en
   dos, sin mezclarse con la otra) */
.portada__frase{display:block}
body.concepto-final .portada__accion{margin-top:clamp(24px,3.2vw,40px);justify-content:center}
/* Celular: cuando los dos botones se apilan (por debajo de 566 px: 210 + 16 + 282 = 508 px no caben en el 90 % del
   ancho), van del mismo ancho (el del más largo), centrados en el eje */
@media (max-width:565.98px){
  body.concepto-final .portada__accion{display:grid;grid-template-columns:minmax(0,max-content);justify-content:center}
  body.concepto-final .portada__accion .boton{justify-content:center}
}
/* Celular: tres renglones centrados, 44 px («Un aliado jurídico / para hacer crecer / su negocio»); si el cuerpo mide
   menos de 7,2 em (360 px con barra de desplazamiento), baja con el ancho para no pasar a cuatro */
@media (max-width:599.98px){
  body.concepto-final .portada h1{font-size:min(44px,13.8cqi);max-width:7.2em}
}
/* Celular muy angosto (320 px): el titular baja a 34 px para ganar alto (los botones, apilados, ocupan todo el ancho) */
@media (max-width:359.98px){
  body.concepto-final .portada h1{font-size:34px;margin-top:14px}
  body.concepto-final .portada__cuerpo{padding-top:8px}
  body.concepto-final .portada__accion{margin-top:20px}
}
/* Celulares bajos (menos de 600 px de alto: iPhone SE con las barras de Safari, 375 × 548; Android de 360 × 568). El botón
   flotante de WhatsApp va siempre a la vista (decisión del socio) y, en la primera pantalla, caía sobre «Escribir por
   WhatsApp». Se recorta el aire vertical de la portada y el titular baja a 40 px (32 px bajo 360): el botón de WhatsApp
   termina al menos 8 px por encima del flotante (medido a 375 × 548, 360 × 568 y 320 × 568). El rótulo sigue a 28 px
   del botón «Menú» */
@media (max-width:599.98px) and (max-height:599.98px){
  body.concepto-final .portada__cuerpo{padding-top:8px}
  body.concepto-final .portada h1{font-size:40px;margin-top:12px}
  body.concepto-final .portada__bajada{margin-top:12px}
  body.concepto-final .portada__accion{margin-top:20px}
}
@media (max-width:359.98px) and (max-height:599.98px){
  body.concepto-final .portada h1{font-size:32px;margin-top:10px}
  body.concepto-final .portada__accion{margin-top:16px}
}
@media (min-width:600px){
  body.concepto-final .portada h1{margin-top:24px}
}
/* Centrado, el rótulo necesita aire bajo la cabecera (logo a un lado, menú al otro): al menos 28 px, también en
   pantallas bajas */
@media (min-width:900px){
  body.concepto-final .portada__cuerpo{padding-top:clamp(28px,5vh,72px)}
}

/* ---------- La tarjeta de áreas: entra subiendo y enfocándose, y se inclina levemente ----------
   De los botones a la tarjeta, 48 px (el mismo aire que hay de la cabecera al rótulo en la ventana del socio); en
   pantallas bajas, hasta 32 px */
body.concepto-final .areas{position:relative;flex:0 0 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(32px,5.8vh,48px) 0 clamp(24px,4vh,48px)}
body.concepto-final .hoja{position:relative;z-index:1;top:auto;right:auto;width:100%;max-width:1280px;margin:0 auto;padding:0 var(--fin-margen)}
/* La tarjeta blanca con el filete de 1 px de siempre (sin la luz del horizonte detrás, el vidrio ya no se notaba: sobre
   papel se lee mejor como papel). Relleno parejo por los cuatro lados (32 px en escritorio), como las tarjetas de
   Gestión legal */
body.concepto-final .hoja__tarjeta{background:var(--papel);border:1px solid var(--filete);padding:clamp(20px,2.4vw,32px);transform-origin:50% 60%}
body.concepto-final .hoja__lista{margin-top:16px;border-bottom:0}
body.concepto-final .hoja__lista--indice li{padding:11px 0;grid-template-columns:36px minmax(0,1fr);gap:12px}
body.concepto-final .hoja__lista--indice .cifra{font:300 32px/36px var(--font-sans)}
body.concepto-final .hoja__lista--indice .hoja__area{font:500 17px/23px var(--font-sans);text-wrap:balance}
body.concepto-final .hoja__ver{margin-top:16px}
@media (min-width:900px){
  body.concepto-final .hoja{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--fin-gap)}
  /* Hasta 1099 px, todo el contenedor: en las columnas 2 a 11 la columna del nombre mediría 167 px a 1000 y «Laboral y
     seguridad social» (189 px a 16 px) bajaría a dos renglones */
  body.concepto-final .hoja__flota{grid-column:1 / -1}
}
/* Desde 1100 px, columnas 2 a 11: centrada en el eje y libre del botón flotante de WhatsApp */
@media (min-width:1100px){
  body.concepto-final .hoja__flota{grid-column:2 / 12}
}
/* Desde 900 px (con la cabecera de escritorio), el índice de 3 × 2: en una columna, entre 900 y 999 px la tarjeta medía
   unos 474 px de alto y quedaba casi entera bajo el pliegue (a 900 la columna del nombre mide 196 px y «Laboral y
   seguridad social», 189 a 16 px) */
@media (min-width:900px){
  body.concepto-final .hoja__tarjeta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:32px}
  body.concepto-final .hoja__cabeza{justify-content:flex-start;gap:8px 28px}
  body.concepto-final .hoja__ver{grid-column:2;grid-row:1;margin:0}
  /* Seis áreas: índice de 3 × 2 con el numeral junto al nombre (como en celular) y un filete sobre cada entrada, igual
     que la rejilla de sectores. Columnas iguales: los numerales caen a plomo en las dos filas. Seis en una sola fila no
     caben con dignidad: con columnas iguales «Laboral y seguridad social» baja a tres renglones y el índice sale de la
     primera pantalla de 1280 × 720; con columnas a la medida, los numerales quedan a intervalos desiguales. */
  body.concepto-final .hoja__lista--indice{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
  body.concepto-final .hoja__lista--indice li{grid-template-columns:28px minmax(0,1fr);gap:12px;padding:10px 0}
  body.concepto-final .hoja__lista--indice .cifra{font-size:34px;line-height:38px}
  body.concepto-final .hoja__lista--indice .hoja__area{font-size:16px;line-height:22px}
}
/* 17 px cuando «Laboral y seguridad social» cabe en un renglón (columna de nombre ≥ 200 px) */
@media (min-width:1400px){ body.concepto-final .hoja__lista--indice .hoja__area{font-size:17px;line-height:24px} }
/* Entre 900 y 999 px, el relleno lateral de 1000 px (24 px): el botón flotante no toca la flecha de «Ver áreas de práctica» */
@media (min-width:900px) and (max-width:999.98px){
  body.concepto-final .hoja__tarjeta{padding-left:24px;padding-right:24px}
}
/* Celular: el botón flotante de WhatsApp (56 px, abajo a la derecha) cae sobre la hoja en la primera pantalla. Para que
   nunca tape texto, en la cabeza «Áreas de práctica» va bajo «Fidem Abogados» (nada alineado a la derecha) y, por debajo
   de 372 px, los nombres bajan a 16 px («Laboral y seguridad social» termina antes del botón) */
@media (max-width:599.98px){
  body.concepto-final .hoja__cabeza{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (max-width:371.98px){
  body.concepto-final .hoja__lista--indice .hoja__area{font-size:16px;line-height:22px}
}
/* Celular y tableta: al bajar, la tarjeta se recuesta (hasta 7°) desde su borde inferior, que queda fijo: los lados no
   salen del margen y siguen a plomo con el rótulo y el texto de Áreas de práctica. En escritorio la inclinación con el
   cursor no cambia */
@media (max-width:899.98px){
  body.concepto-final .hoja__tarjeta{transform-origin:50% 100%}
}
/* 320 px: se gana aire adentro de la hoja y la flecha de «Ver áreas de práctica» sigue a la última palabra si el
   enlace pasa a dos renglones */
@media (max-width:359.98px){
  body.concepto-final .hoja__tarjeta{padding-left:16px;padding-right:16px}
  body.concepto-final .hoja__lista--indice li{grid-template-columns:28px minmax(0,1fr);gap:10px}
  body.concepto-final .hoja__ver .terciario{display:inline}
  body.concepto-final .hoja__ver .terciario svg{display:inline-block;vertical-align:-3px;margin-left:8px}
}
/* Portátiles bajos (1456 × 830, la ventana del socio; 1536 × 864, 1366 × 768, 1280 × 720): índice compacto. A 1456 × 830,
   1512 × 860 y 1536 × 864 la hoja entra entera en la primera pantalla, con 26 a 35 px de aire sobre el pliegue (sin la
   segunda fila cortada al ras). En pantallas más bajas (1280 × 720, 1000 × 700) la hoja asoma por el pie, como el panel
   de la plantilla, y se termina de ver al bajar */
@media (min-width:900px) and (max-height:880px){
  body.concepto-final .portada__accion{margin-top:28px}
  body.concepto-final .hoja__tarjeta{padding-top:18px;padding-bottom:14px}
  body.concepto-final .hoja__lista--indice li{padding:8px 0}
  body.concepto-final .hoja__lista--indice .cifra{font-size:30px;line-height:32px}
}
/* Celular y tableta pequeña en horizontal (844 × 390, 812 × 375, 667 × 375, 740 × 360, 932 × 430): con el titular de
   52 px como mínimo, los botones quedaban bajo el pliegue. El titular baja con el alto (36 a 52 px, siempre en dos
   renglones) y se recorta el aire: los botones quedan en la primera pantalla. No toca el celular en vertical (exige 600 px
   de ancho) ni el escritorio */
@media (min-width:600px) and (max-width:999.98px) and (max-height:500px){
  body.concepto-final .portada h1{font-size:clamp(36px,10svh,52px);margin-top:12px}
  body.concepto-final .portada__bajada{margin-top:12px}
  body.concepto-final .portada__accion{margin-top:20px}
}
@media (min-width:600px) and (max-width:899.98px) and (max-height:500px){
  body.concepto-final .portada__cuerpo{padding-top:8px}
}

/* =====================================================================
   SECCIONES · escala tipográfica contenida (revisión 4: titulares y cifras más pequeños)
   ===================================================================== */
body.concepto-final .seccion::before,
body.concepto-final .contacto::before{content:none}
.folio{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);margin:0 0 clamp(32px,3.4vw,48px)}
.folio .clave{flex:none;margin:0}
.folio__linea{flex:1 1 auto;min-width:24px;height:1px;background:var(--filete);transform-origin:0 50%}
/* Contacto: rótulo → título a la misma distancia que en las demás secciones (sin el hueco de fila de la rejilla) */
body.concepto-final .contacto{row-gap:0}
body.concepto-final .contacto > .folio{flex:0 0 100%;grid-column:1 / -1}
/* En una columna (< 900 px), la introducción, los datos y los campos llegan a los dos márgenes, a plomo con el rótulo y con
   las secciones (en tableta terminaban a 460 y 640 px). La nota, la autorización y el aviso conservan su medida de lectura */
@media (max-width:899.98px){
  body.concepto-final .contacto__formulario{margin-top:48px;max-width:none}
  body.concepto-final .contacto__intro{max-width:none}
  body.concepto-final .formulario .campo__nota,body.concepto-final .autoriza,body.concepto-final .aviso-datos{max-width:640px}
}
/* Titulares de sección: a este cuerpo (hasta 47 px) «Respaldo / en las decisiones / que definen su negocio» cabe en tres
   renglones en las cinco columnas de la cabeza fija (los &nbsp; del HTML evitan renglones que terminen en artículo,
   preposición o «que») */
body.concepto-final .seccion__cabeza h2,
body.concepto-final .contacto__intro h2{margin-top:0;font:300 clamp(32px,3.4vw,47px)/1.08 var(--font-sans);letter-spacing:-.025em}
/* Celulares (< 400 px): el cuerpo baja con el ancho (30,4 px a 390, 29,3 a 375, 25 a 320) para que ningún título deje una
   palabra sola («necesita») ni parta «menos carga, / más control» (medido de 320 a 399 px) */
@media (max-width:399.98px){
  body.concepto-final .seccion__cabeza h2,
  body.concepto-final .contacto__intro h2{font-size:7.8vw}
}
body.concepto-final .seccion__intro{font:400 clamp(16px,1.2vw,18px)/1.6 var(--font-sans)}

/* ---------- Áreas de práctica: índice; la cabeza acompaña la lista ---------- */
body.concepto-final .practica li{position:relative;border-top:0;padding:clamp(24px,2.4vw,32px) 0}
body.concepto-final .practica li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--filete);transform-origin:0 50%}
body.concepto-final .practica .cifra{font:300 clamp(44px,4.6vw,72px)/.88 var(--font-sans);letter-spacing:-.04em}
/* Mismo cuerpo que los títulos de los principios */
body.concepto-final .practica h3{font:300 clamp(22px,1.9vw,28px)/1.18 var(--font-sans);letter-spacing:-.012em;text-wrap:balance}
/* De la tarjeta de la portada al rótulo, la misma distancia que entre las demás secciones */
body.concepto-final #practica{padding-top:calc(var(--limpio-ritmo) - clamp(24px,4vh,48px))}
@media (min-width:1000px){
  body.concepto-final #practica{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:start}
  body.concepto-final #practica > .folio{grid-column:1 / -1}
  body.concepto-final #practica > .seccion__cabeza{grid-column:1 / 6;position:sticky;top:clamp(104px,20vh,200px);padding-right:0}
  body.concepto-final #practica > .practica{grid-column:6 / 13;margin-top:0}
  /* La lista ocupa las columnas 6 a 12 y repite su retícula: el numeral en la 6 y el título y el texto desde la 7,
     a plomo con el texto de Cómo trabajamos */
  body.concepto-final #practica .practica li{grid-template-columns:repeat(7,minmax(0,1fr));column-gap:32px;row-gap:12px}
  body.concepto-final #practica .practica .cifra{grid-column:1;grid-row:1 / span 2}
  body.concepto-final #practica .practica h3,
  body.concepto-final #practica .practica p{grid-column:2 / -1}
}

/* ---------- Quiénes somos: momento de marca, párrafo editorial, sectores y perfiles ---------- */
/* El recorte horizontal va en <main> (a sangre completa): las filigranas pueden salir por los bordes de la ventana
   sin desplazamiento lateral. overflow:clip no crea contenedor de desplazamiento: las columnas fijas siguen funcionando. */
body.concepto-final main{overflow-x:clip}
/* Contexto de apilado propio en las dos secciones con filigrana: la filigrana (z-index −1) queda detrás de todo lo de la
   sección y delante del papel. La sección no recorta nada (el recorte va en la capa de la filigrana) */
body.concepto-final #equipo,
body.concepto-final #gestion-legal{position:relative;isolation:isolate}
.equipo__apertura{display:block}
body.concepto-final #equipo .seccion__intro{max-width:none;margin-top:24px;font:300 clamp(20px,1.75vw,25px)/1.48 var(--font-sans);letter-spacing:-.01em;color:var(--tinta);text-wrap:pretty}

/* Emblema (a · Ensamble, b · Trazo): el símbolo en sus cuatro piezas. Sin JS o con «reducir movimiento» se ve armado y quieto.
   --u es un píxel de pantalla expresado en unidades del viewBox (1000 de ancho).
   Silueta sin costuras: las mismas piezas van dos veces. Debajo, la línea de lacre de 2 px; encima, el relleno en tono opaco
   (lacre diluido sobre papel), que tapa la mitad interior del trazo y todos los contornos internos y solapes. Queda la silueta
   exacta del símbolo con un filete de 1 px. El script mueve cada pareja (mismo data-pieza) con la misma transformación. */
.emblema{--u:calc(1000px / 132);width:132px;aspect-ratio:1000/875.6;margin:0 0 clamp(32px,5vw,48px)}
.emblema__svg{display:block;width:100%;height:100%;overflow:visible}
.pieza{transform-box:view-box}
.emblema__linea .pieza{fill:none;stroke:var(--lacre);stroke-width:calc(var(--u) * 2);stroke-linejoin:round;stroke-dasharray:none}
.emblema__tinte .pieza{fill:#fcdec6;stroke:none}   /* lacre al 28 % sobre papel, en color opaco */
/* Orígenes medidos de la caja de cada trazado (unidades del viewBox) */
.pieza[data-pieza="mi"]{transform-origin:272px 438px}
.pieza[data-pieza="md"]{transform-origin:728px 438px}
.pieza[data-pieza="na"]{transform-origin:465px 462px}
.pieza[data-pieza="nb"]{transform-origin:567px 456px}
/* b · Trazo: contorno de lacre y un tinte muy leve */
html[data-momento="b"] .emblema__tinte .pieza{fill:#feeee3}   /* 14 % */
/* c · Filigrana: el emblema no se usa; la cabeza ocupa el ancho que deja libre */
html[data-momento="c"] .emblema{display:none}

@media (min-width:1000px){
  .equipo__apertura{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:start}
  /* Fijo (sticky) dentro de la apertura: no puede montarse sobre los sectores ni sobre la sección siguiente */
  .emblema{--u:calc(1000px / 280);grid-column:1 / 5;width:min(100%,280px);margin:8px 0 0;position:sticky;top:calc(50vh - 123px)}
  body.concepto-final #equipo .equipo__apertura > .seccion__cabeza{grid-column:5 / 13;max-width:none}
  html[data-momento="c"] body.concepto-final #equipo .equipo__apertura > .seccion__cabeza{grid-column:1 / 10}
}

/* c · Filigrana: capa a sangre detrás de la sección, recortada por la propia sección y desvanecida en sus bordes. Va en
   secciones alternas y alternando lados (29 sep 2026, pedido del socio): en Quiénes somos entra por el borde derecho y en
   Gestión legal (.filigrana--izq), en espejo, por el izquierdo; Áreas, Cómo trabajamos y Contacto van sin ella. Misma
   opacidad y mismo paralaje (movimiento.js) */
.filigrana{display:none}
html[data-momento="c"] .filigrana{display:block;position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);overflow:hidden;overflow:clip;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 min(16%,220px),#000 calc(100% - min(16%,220px)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 min(16%,220px),#000 calc(100% - min(16%,220px)),transparent 100%)}
/* La opacidad va en el contenedor común: marco y nudo se componen como una sola figura, sin manchas donde se tocan */
.filigrana__deriva{--w:120vw;position:absolute;top:clamp(160px,18vw,240px);right:-40vw;width:var(--w);aspect-ratio:1000/875.6;transform-origin:50% 50%;opacity:.07}
.filigrana__capa{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;fill:var(--lacre)}
/* En espejo (.filigrana--izq): el mismo corte, en el borde izquierdo */
.filigrana--izq .filigrana__deriva{right:auto;left:-40vw}
@media (min-width:1000px){
  .filigrana__deriva{--w:min(76vw,1000px);right:calc(var(--w) * -.2);top:clamp(120px,10vw,180px);opacity:.075}
  .filigrana--izq .filigrana__deriva{left:calc(var(--w) * -.2)}
}
/* Gestión legal: la filigrana no compite con el núcleo «IA» ni con las tarjetas. La capa termina donde empiezan las
   tarjetas (desde 1000 px) o, en tableta y celular, donde empieza el núcleo, que ahí va en el eje central: por CSS con
   anclas (sin JS y con «reducir movimiento»; donde no hay anclas, la capa cubre la sección) y, con movimiento, también
   por movimiento.js, que lee el bloque en --filigrana-hasta, fija el alto de la capa (--filigrana-alto) y centra la
   figura en el tramo que va de la cabeza a ese borde. Fundidos: arriba, el de Quiénes somos (≈ 195 px a 1456; la marca no
   asoma nítida en el aire bajo Cómo trabajamos, que va sin ella); abajo, 96 px como máximo (la capa es más baja que la sección).
   La opacidad y el paralaje son los de Quiénes somos. */
#gestion-legal .gl-sistema{anchor-name:--gl-sistema}
#gestion-legal .gl-rejilla{anchor-name:--gl-rejilla}
html[data-momento="c"] #gestion-legal > .filigrana{--filigrana-hasta:".gl-sistema";bottom:anchor(--gl-sistema top,0px);height:var(--filigrana-alto,auto);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 min(32%,200px),#000 calc(100% - min(16%,96px)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 min(32%,200px),#000 calc(100% - min(16%,96px)),transparent 100%)}
/* Tableta y celular: detrás de la cabeza. 400 px como máximo (350 de alto, lo que mide la cabeza en tableta); se ve lo
   mismo que en Quiénes somos (80 vw) sin pasar del 80 % de la figura. Sin JS queda centrada en la cabeza (≈ 250–300 px) */
#gestion-legal > .filigrana .filigrana__deriva{--w:min(120vw,400px);left:calc(min(80vw, var(--w) * .8) - var(--w));top:calc(clamp(248px, 360px - 22vw, 300px) - var(--w) * .4378)}
@media (min-width:1000px){
  html[data-momento="c"] #gestion-legal > .filigrana{--filigrana-hasta:".gl-rejilla";bottom:anchor(--gl-rejilla top,0px)}
  /* Detrás de la cabeza y de la columna de los pedidos 1 y 3, con el corte de Quiénes somos (un 20 % fuera de la ventana):
     la figura termina en el borde derecho de la columna 5 (el de la tarjeta 3), lejos del anillo del sello (75 px a 1000,
     108 a 1456) y fuera de su halo visible. 50 vw − contenedor ÷ 12 − 10,67 px es ese borde (márgenes de 48 px y canales de 32 px; la
     capa mide 100 vw) y es el 80 % visible: ancho × 1,25 (653 px a 1280, 763 a 1456), con tope de 800 px desde 1600
     (700 de alto: el tramo mide unos 610–640). Sin JS queda centrada en ese tramo (≈ 345–420 px) */
  #gestion-legal > .filigrana .filigrana__deriva{--w:min((50vw - min(100vw, 1280px) / 12 - 10.67px) * 1.25, 800px);left:calc(var(--w) * -.2);top:calc(clamp(345px, 14vw + 205px, 420px) - var(--w) * .4378)}
}

/* ---------- Sectores: rejilla de 4 × 4 en escritorio y 2 columnas en tableta y celular; letra mediana ---------- */
.sectores__cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.sectores__cabeza .clave{margin:0}
body.concepto-final .sectores__lista{margin-top:16px}
body.concepto-final .sectores__lista li{position:relative;border-top:0;padding:clamp(12px,1.2vw,16px) 0;font:300 clamp(17px,1.35vw,20px)/1.35 var(--font-sans);letter-spacing:-.005em}
body.concepto-final .sectores__lista li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--filete);transform-origin:0 50%}
.sector{display:block}

body.concepto-final .perfil{border-top:0;padding-top:0}
/* El filete bajo cada nombre llega al borde de su columna: los dos perfiles terminan en el mismo lugar */
body.concepto-final .perfil h3{width:auto;max-width:100%;font:300 clamp(28px,2.6vw,38px)/1.12 var(--font-sans);letter-spacing:-.018em;text-wrap:balance}
body.concepto-final .perfil h3::after{content:"";display:block;width:100%;height:1px;margin-top:16px;background:var(--travesano);transform-origin:0 50%}
body.concepto-final .perfil__linea{margin-top:16px;text-wrap:balance}

/* ---------- Cómo trabajamos: el título queda fijo mientras pasan los principios ----------
   El título fijo (sticky) vive en .metodo__principios, junto a los cuatro principios y nada más: se suelta al terminar
   el cuarto principio y nunca alcanza «Actualización», que va después, fuera de ese contenedor. */
body.concepto-final .metodo{background:var(--papel)}
/* Sin la banda de fondo, su relleno inferior sobraba: Gestión legal entra con el mismo ritmo que Contacto */
body.concepto-final #metodo .seccion--sin-borde{padding-bottom:0}
body.concepto-final .numeral{position:relative;border-bottom:0;padding-bottom:16px;font:300 clamp(56px,5.8vw,92px)/.86 var(--font-sans);letter-spacing:-.045em}
body.concepto-final .numeral::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--travesano);transform-origin:0 50%}
body.concepto-final .etapas h3{font:300 clamp(22px,1.9vw,28px)/1.22 var(--font-sans);letter-spacing:-.01em}
/* Párrafos cortos (dos o tres renglones), equilibrados: cortan por frase y sin un último renglón corto («en conflictos.») */
body.concepto-final .etapas p{font:var(--type-documento);max-width:var(--medida);text-wrap:balance}
@media (min-width:1000px){
  body.concepto-final #metodo .metodo__principios{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:start}
  body.concepto-final #metodo .seccion__cabeza{grid-column:1 / 6;position:sticky;top:clamp(104px,20vh,200px);padding-right:0}
  /* Entre principios, 64 px: menos que entre secciones (112) y lo mismo que entre las áreas */
  body.concepto-final #metodo .etapas{grid-column:6 / 13;margin-top:0;grid-template-columns:minmax(0,1fr);row-gap:clamp(40px,5vw,64px)}
  /* Misma retícula que Áreas de práctica: el numeral en la columna 6 y el título y el texto desde la 7 */
  body.concepto-final #metodo .etapas li{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:32px;align-items:end}
  body.concepto-final #metodo .etapas .numeral{grid-column:1;grid-row:1 / span 2}
  body.concepto-final #metodo .etapas h3,
  body.concepto-final #metodo .etapas p{grid-column:2 / -1}
  body.concepto-final #metodo .etapas h3{margin-top:0;align-self:end}
  /* Filete de avance: 1 px en tinta sobre un riel de filete, en el canal entre el título fijo y los numerales (a 16 px
     de la columna 6), a todo el alto de los principios. Fuera del contenedor fijo: el título no cambia. Quieto (sin JS,
     con «reducir movimiento» o al imprimir) se ve completo; con movimiento acompaña la lectura (movimiento, bloque 4c) */
  body.concepto-final #metodo .etapas{position:relative}
  body.concepto-final #metodo .etapas::before,
  body.concepto-final #metodo .etapas::after{content:"";position:absolute;top:0;bottom:0;left:-16px;width:1px;pointer-events:none}
  body.concepto-final #metodo .etapas::before{background:var(--filete)}
  body.concepto-final #metodo .etapas::after{background:var(--tinta);transform-origin:50% 0}
  /* «Actualización» cierra la sección de margen a margen (29 sep 2026, a pedido del socio: no dejar la izquierda
     vacía): los filetes van a todo el ancho, el rótulo en el margen izquierdo (a plomo con el título) y el texto en la
     columna de texto de los principios (columna 7), en la misma línea base */
  body.concepto-final #metodo .metodo__datos{grid-template-columns:repeat(12,minmax(0,1fr))}
  body.concepto-final #metodo .metodo__datos > div{grid-column:1 / 13;margin-left:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:baseline;row-gap:0;padding:20px 0}
  body.concepto-final #metodo .metodo__datos dt{grid-column:1 / 6}
  body.concepto-final #metodo .metodo__datos dd{grid-column:7 / 13}
}

/* ---------- Gestión legal: las cuatro tarjetas (estructura y estado final en fidem.css) ----------
   Misma voz tipográfica que los principios, un punto menor. La segunda frase del título va en humo: el mismo texto, en
   dos tonos, como las secciones de producto de las referencias (Ramp, Nexora). */
body.concepto-final .gl-tarjeta > h3{font:300 clamp(21px,1.7vw,25px)/1.22 var(--font-sans);letter-spacing:-.01em}

/* ---------- Contacto: el logo completo firma la solicitud ----------
   Antes iba en el pie; el 29 sep 2026 el socio pidió pasarlo al blanco que sobraba en Contacto, bajo «Escribir por
   WhatsApp» y a la izquierda de la autorización de datos. El símbolo vectorial se traza en naranja exactamente sobre el
   símbolo del logo oficial (35,7 % a 63,8 % del ancho y 60,3 % del alto) y luego el logo completo, con «FIDEM ABOGADOS»,
   se abre desde el centro (bloque 8 del movimiento). Decorativo (aria-hidden, alt vacío): el nombre ya lo lee el logo de
   la cabecera. Centrado en el blanco que le toca (6 oct 2026, a pedido del socio: «como un cuadradito y que el logo quede
   centrado en ese espacio»). */
.firma__logo{position:relative;width:clamp(220px,22vw,340px);aspect-ratio:3232/1318}
.firma__img{position:absolute;inset:0;width:100%;height:100%;display:block}
.firma__simbolo{position:absolute;left:35.705%;top:0;width:28.125%;height:60.32%;fill:var(--lacre);opacity:0}
/* En una columna (< 900 px) cierra la sección, después de «Enviar solicitud», a la misma distancia que hay de los datos
   al formulario, centrada a lo ancho */
body.concepto-final .contacto__firma{flex:0 0 100%;min-width:0;margin-top:48px;display:flex;justify-content:center}
/* Desde 900 px ocupa su propia fila (la 3) en las columnas 1 a 5, y el formulario abarca las filas 2 y 3: la fila 3 es el
   blanco que va de «Escribir por WhatsApp» al final de «Enviar solicitud», con el ancho de la tabla de datos. La firma
   llena ese recuadro y el logo queda en su centro exacto, a lo ancho y a lo alto, con al menos 48 px de aire arriba y
   abajo: si el formulario se acorta (confirmación de envío), el recuadro se reduce y el logo nunca se monta */
@media (min-width:900px){
  /* La fila 2 mide lo que los datos (hasta «Escribir por WhatsApp») y la 3 se queda con el resto del formulario: así el
     recuadro de la firma empieza justo bajo el botón y termina con «Enviar solicitud» */
  body.concepto-final .contacto{grid-template-rows:auto auto 1fr}
  body.concepto-final .contacto__intro{grid-row:2}
  body.concepto-final .contacto__formulario{grid-row:2 / span 2}
  body.concepto-final .contacto__firma{grid-column:1 / 6;grid-row:3;align-self:stretch;display:flex;align-items:center;justify-content:center;margin:0;padding:48px 0}
}
/* Sin la firma, el pie empieza en su filete, al ritmo de sección bajo Contacto (112 px) */
body.concepto-final .pie__sup{padding-top:24px}

/* ---------- Contacto: el valor de cada dato empieza en la columna 2 de la retícula ----------
   La introducción ocupa 5 columnas (5 c + 4 × 32): la del rótulo mide una columna más su canal */
@media (min-width:1000px){
  body.concepto-final #contacto .datos-clave div{grid-template-columns:calc((100% - 128px) / 5 + 32px) minmax(0,1fr)}
}
/* Por debajo de 360 px, la columna del rótulo baja a 96 px («WHATSAPP» mide 67): el correo cabe en un renglón */
@media (max-width:359.98px){
  body.concepto-final #contacto .datos-clave div{grid-template-columns:96px minmax(0,1fr)}
}

/* =====================================================================
   MOVIMIENTO · solo sin «reducir movimiento»
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){

  /* 1. Fondo luminoso: deriva lenta (se pausa cuando la portada sale de la pantalla) */
  .halo{will-change:transform}
  .halo--a{animation:halo-a 30s ease-in-out infinite alternate}
  .halo--b{animation:halo-b 36s ease-in-out -6s infinite alternate}
  .halo--c{animation:halo-c 42s ease-in-out -12s infinite alternate}
  html.portada-fuera .halo{animation-play-state:paused}

  /* 2. Entrada de la portada (movimiento.js añade .fin-entra al cargar) */
  html.fin-entra .portada .portada__texto .clave{animation:sube-suave .9s var(--curva) .05s both}
  /* El titular espera a partirse en renglones; si el script fallara, aparece solo a los 2,4 s */
  html.fin-entra .portada h1{animation:titular-espera 2.4s steps(1,end) both}
  html.fin-entra .portada h1.titular-listo{animation:none}
  /* flex: los márgenes negativos de cada renglón no se colapsan, así el titular partido mide lo mismo que el texto normal */
  .renglones{display:flex;flex-direction:column}
  .renglon{display:block;overflow:hidden;white-space:nowrap;padding:.16em 0 .22em;margin:-.16em 0 -.22em}
  .renglon__txt{display:block;animation:renglon-sube 1.15s var(--curva) both;animation-delay:calc(.18s + var(--i) * .14s)}
  /* Los renglones del titular, en el eje central */
  .portada h1 .renglones{align-items:center}
  /* Títulos de sección (h2): suben por renglones desde su ranura con la misma curva, la misma duración y el mismo
     escalonado que el titular de la portada y que el encabezado de Gestión legal, una sola vez, al entrar su cabecera en
     pantalla. movimiento.js los parte en renglones solo mientras suben y luego devuelve el texto tal cual */
  .titulo-renglones .renglon__txt{animation-delay:calc(var(--retardo,0s) + var(--i) * .14s)}
  html.fin-entra .portada__bajada{animation:sube-suave 1s var(--curva) .62s both}
  html.fin-entra .portada__accion{animation:sube-suave 1s var(--curva) .76s both}
  /* La tarjeta de áreas entra después de los botones: sube 48 px y pasa de 8 px de desenfoque a nítida, en 1,3 s desde
     1,05 s; todo queda quieto hacia los 2,4 s. El desplazamiento va en el marco (.hoja__flota) y la opacidad y el
     desenfoque en la tarjeta, que lleva la inclinación que pone movimiento.js (así la animación no la pisa). Después
     queda quieta (solo se inclina con el cursor y al desplazarse) */
  html.fin-entra .hoja__flota{animation:hoja-sube 1.3s var(--curva-expo) 1.05s both}
  html.fin-entra .hoja__tarjeta{animation:hoja-aclara 1.3s var(--curva-expo) 1.05s both}
  html.fin-mov .hoja__tarjeta{will-change:transform}
  /* Todo el resto de la entrada espera a que el titular esté partido (.fin-titular): el orden no depende de cuándo
     llega la letra. En pausa, cada pieza se queda en su primer fotograma (opacidad 0) y su retardo no corre. */
  html.fin-entra:not(.fin-titular) .portada__texto .clave,
  html.fin-entra:not(.fin-titular) .portada__bajada,
  html.fin-entra:not(.fin-titular) .portada__accion,
  html.fin-entra:not(.fin-titular) .hoja__flota,
  html.fin-entra:not(.fin-titular) .hoja__tarjeta{animation-play-state:paused}

  /* 3. Bloques que entran con un fundido suave hacia arriba (movimiento.js añade .revela y luego .en-vista) */
  html.fin-mov .revela{transition:opacity 1s var(--curva-suave),transform 1.2s var(--curva-expo);transition-delay:var(--retardo,0s)}
  html.fin-mov .revela:not(.en-vista){opacity:0;transform:translate3d(0,32px,0)}
  html.fin-mov .revela:focus-within{opacity:1;transform:none}

  /* 4. Líneas que se dibujan al entrar en pantalla */
  html.fin-mov .folio__linea,
  html.fin-mov .practica li::before,
  html.fin-mov .perfil h3::after,
  html.fin-mov .numeral::after{transition:transform 1.2s var(--curva-expo) .15s}
  html.fin-mov .folio:not(.en-vista) .folio__linea,
  html.fin-mov .practica li:not(.en-vista)::before,
  html.fin-mov .perfil:not(.en-vista) h3::after,
  html.fin-mov .etapas li:not(.en-vista) .numeral::after{transform:scaleX(0)}
  /* 4b. Equipo: el nombre de cada perfil pasa de ligeramente desenfocado a nítido, una sola vez al entrar (0,9 s), y
         después se traza su filete (el filete espera a que el nombre esté nítido) */
  html.fin-mov .perfil h3{transition:filter .9s var(--curva-suave) var(--retardo,0s)}
  html.fin-mov .perfil.revela:not(.en-vista) h3{filter:blur(6px)}
  html.fin-mov .perfil h3::after{transition-delay:calc(var(--retardo,0s) + .9s)}

  /* 5. Párrafo de Quiénes somos: se ilumina palabra por palabra al leerlo. Apagada, cada palabra queda en ≈ #726f70:
        4,9:1 sobre papel y 4,8:1 sobre la filigrana, AA a cualquier tamaño */
  html.fin-mov .palabras .palabra{opacity:.64;transition:opacity .5s var(--curva-suave)}
  html.fin-mov .palabras .palabra.encendida{opacity:1}

  /* 6. Momento de marca. El script fija, con amortiguación, la posición de cada pieza (a), el avance del trazo (b)
        o la deriva de la filigrana (c); aquí solo quedan los estados de reposo y los cambios de tinte. */
  /* a · Ensamble: las piezas llegan más claras y, al encajar, el relleno sube de 16 % a 28 % (tonos opacos equivalentes) */
  html.fin-mov[data-momento="a"] .emblema__tinte .pieza{transition:fill 1.1s var(--curva-suave)}
  html.fin-mov[data-momento="a"] .emblema:not(.asentado) .emblema__tinte .pieza{fill:#fdecdf}   /* 16 % */
  /* b · Trazo: la línea se dibuja (stroke-dashoffset de 1 a 0 sobre pathLength = 1). Mientras se traza, el relleno es papel
        y oculta los cruces internos: solo se ve el contorno exterior. Al cerrarse, el papel absorbe el tinte (14 %) */
  html.fin-mov[data-momento="b"] .emblema__linea .pieza{stroke-dasharray:1 1;stroke-dashoffset:1}
  html.fin-mov[data-momento="b"] .emblema__tinte .pieza{transition:fill .9s var(--curva-suave)}
  html.fin-mov[data-momento="b"] .emblema:not(.lleno) .emblema__tinte .pieza{fill:var(--papel)}
  /* c · Filigrana: dos capas (marco y nudo) que se desplazan a distinta profundidad */
  html.fin-mov[data-momento="c"] .filigrana__deriva,
  html.fin-mov[data-momento="c"] .filigrana__nudo{will-change:transform}

  /* 7. Sectores: los filetes se dibujan y los nombres suben en diagonal, uno tras otro (una sola vez) */
  html.fin-mov .sectores__lista li::before{transition:transform 1.3s var(--curva-expo);transition-delay:var(--retardo,0s)}
  html.fin-mov .sector{transition:opacity 1s var(--curva-suave),transform 1.2s var(--curva-expo);transition-delay:calc(var(--retardo,0s) + .1s)}
  html.fin-mov .sectores:not(.en-vista) .sectores__lista li::before{transform:scaleX(0)}
  html.fin-mov .sectores:not(.en-vista) .sector{opacity:0;transform:translate3d(0,16px,0)}

  /* 8. Firma de Contacto: el símbolo se traza en naranja, se ata, se llena y el logo completo se abre desde el centro */
  html.fin-mov .firma__simbolo{stroke:var(--lacre);stroke-width:0;fill:var(--lacre);opacity:0;transition:fill .8s var(--curva) 1.15s,stroke-width .8s var(--curva) 1.15s,opacity .6s var(--curva-suave) 2.6s}
  /* El trazo avanza parejo (entrada y salida suaves) y termina a 1,2 s, cuando empieza el relleno */
  html.fin-mov .firma__simbolo use{stroke-dasharray:1 1;transition:stroke-dashoffset 1.2s cubic-bezier(.45,0,.55,1),transform .9s var(--curva) .45s}
  /* clip-path necesita un valor final explícito: de inset() a «none» no se interpola y el cambio sería de golpe */
  html.fin-mov .firma__img{clip-path:inset(0 0 0 0);transition:clip-path 1.5s var(--curva-suave) 1.8s,opacity .4s var(--curva-suave) 1.8s}
  html.fin-mov .contacto__firma:not(.en-vista) .firma__img{opacity:0;clip-path:inset(0 50% 0 50%)}
  /* Repetición de la firma cada 12 s mientras al menos la mitad del logo se ve (decisión expresa del socio): se
     desvanece, vuelve al punto de partida sin animar y se traza de nuevo. Si el logo sale por completo de la pantalla,
     también vuelve al inicio */
  html.fin-mov .contacto__firma.firma-sale .firma__img,
  html.fin-mov .contacto__firma.firma-sale .firma__simbolo{opacity:0!important;transition:opacity .6s var(--curva-suave) 0s!important}
  html.fin-mov .contacto__firma.firma-sin-transicion .firma__img,
  html.fin-mov .contacto__firma.firma-sin-transicion .firma__simbolo,
  html.fin-mov .contacto__firma.firma-sin-transicion .firma__simbolo use{transition:none!important}
  /* 16 unidades del viewBox (1000) ≈ 1 a 1,5 px en pantalla con el logo de 220 a 340 px */
  html.fin-mov .contacto__firma:not(.en-vista) .firma__simbolo{fill:var(--papel);stroke-width:16px;opacity:1}
  html.fin-mov .contacto__firma:not(.en-vista) .firma__simbolo use{stroke-dashoffset:1}
  html.fin-mov .contacto__firma:not(.en-vista) .firma__simbolo .u-nudo-a{transform:translateX(-150px)}
  html.fin-mov .contacto__firma:not(.en-vista) .firma__simbolo .u-nudo-b{transform:translateX(150px)}

  /* 8b. Gestión legal: cada maqueta cuenta su servicio una vez (menos de 5 s) cuando su hilo llega a la tarjeta (bloque 8c)
         y queda en su estado final; vuelve a contarlo solo si la tarjeta sale por completo y regresa. movimiento.js solo pone clases
         en la tarjeta: .gl-anima (modo animado), .p0 … .p4 (pasos acumulados, en su momento), .gl-reinicia (vuelta al
         principio sin transición) y .gl-pausa (pestaña oculta o fuera de pantalla a mitad de camino). Aquí cada
         pieza queda oculta mientras su paso no ha llegado y, al llegar, transiciona a su estado final, el de fidem.css.
         Solo transform y opacity, y stroke-dashoffset en dos SVG diminutos (los checks y el anillo). */
  html.fin-mov .gl-anima .gl-ventana{transition:opacity .7s var(--curva-suave),transform 1.1s var(--curva-expo)}
  html.fin-mov .gl-anima:not(.p0) .gl-ventana{opacity:0;transform:translate3d(0,12px,0)}
  html.fin-mov .gl-reinicia *,html.fin-mov .gl-reinicia *::before,html.fin-mov .gl-reinicia *::after{transition:none!important;animation:none!important}
  html.fin-mov .gl-pausa *,html.fin-mov .gl-pausa *::before,html.fin-mov .gl-pausa *::after{animation-play-state:paused!important}
  html.fin-mov .gl-anima .gl-check path{stroke-dasharray:1 1;transition:stroke-dashoffset .6s var(--curva) .3s}

  /* 1 · Documentos (4,1 s): los renglones se escriben uno tras otro, llegan dos cláusulas y el sello se estampa */
  html.fin-mov .gl-anima .gl-linea{transition:transform .9s var(--curva-expo) var(--d,0s)}
  html.fin-mov .gl-linea:nth-child(2){--d:.15s}
  html.fin-mov .gl-linea:nth-child(3){--d:.3s}
  html.fin-mov .gl-linea:nth-child(4){--d:.45s}
  html.fin-mov .gl-linea:nth-child(5){--d:.6s}
  html.fin-mov .gl-anima:not(.p1) .gl-linea{transform:scaleX(0)}
  html.fin-mov .gl-anima .gl-doc__clausulas .gl-ficha{transition:opacity .7s var(--curva-suave),transform 1s var(--curva-expo)}
  html.fin-mov .gl-anima:not(.p2) .gl-doc__clausulas .gl-ficha:nth-child(1),
  html.fin-mov .gl-anima:not(.p3) .gl-doc__clausulas .gl-ficha:nth-child(2){opacity:0;transform:translate3d(0,8px,0)}
  html.fin-mov .gl-anima:not(.p2) .gl-doc__clausulas .gl-ficha:nth-child(1) path,
  html.fin-mov .gl-anima:not(.p3) .gl-doc__clausulas .gl-ficha:nth-child(2) path{stroke-dashoffset:1}
  html.fin-mov .gl-anima .gl-sello{transition:opacity .5s var(--curva-suave),transform .9s var(--curva-expo)}
  html.fin-mov .gl-anima:not(.p4) .gl-sello{opacity:0;transform:rotate(-3deg) scale(1.08)}

  /* 2 · Alertas (4,2 s): entran las tres alertas, la más próxima se enciende con dos pulsos y sale el aviso */
  html.fin-mov .gl-anima .gl-alerta{transition:opacity .8s var(--curva-suave),transform 1s var(--curva-expo);transition-delay:var(--d,0s)}
  html.fin-mov .gl-alerta:nth-child(2){--d:.18s}
  html.fin-mov .gl-alerta:nth-child(3){--d:.36s}
  html.fin-mov .gl-anima:not(.p1) .gl-alerta{opacity:0;transform:translate3d(0,8px,0)}
  html.fin-mov .gl-anima:not(.p2) .gl-alerta--urgente .gl-punto{border-color:var(--travesano)}
  html.fin-mov .gl-anima .gl-alerta--urgente .gl-punto::before{transition:opacity .6s var(--curva-suave),transform .8s var(--curva-expo)}
  html.fin-mov .gl-anima:not(.p2) .gl-alerta--urgente .gl-punto::before{opacity:0;transform:scale(.4)}
  html.fin-mov .gl-anima.p2 .gl-alerta--urgente .gl-punto::after{animation:gl-halo 1.4s var(--curva-suave) .2s 2 both}
  html.fin-mov .gl-anima .gl-alerta--urgente .gl-ficha--plazo::before{transition:opacity .8s var(--curva-suave) .15s}
  html.fin-mov .gl-anima:not(.p2) .gl-alerta--urgente .gl-ficha--plazo::before{opacity:0}
  html.fin-mov .gl-anima .gl-aviso{transition:opacity .7s var(--curva-suave),transform 1s var(--curva-expo)}
  html.fin-mov .gl-anima:not(.p3) .gl-aviso{opacity:0;transform:translate3d(0,8px,0)}
  html.fin-mov .gl-anima:not(.p3) .gl-aviso path{stroke-dashoffset:1}

  /* 3 · Tableros (3 s): la pestaña se subraya, entran las piezas mientras la cifra cuenta (JS), el anillo se llena y
        las doce barras crecen desde la base, una tras otra */
  html.fin-mov .gl-anima .gl-pestana--activa::after{transition:transform 1s var(--curva-expo) .1s}
  html.fin-mov .gl-anima:not(.p1) .gl-pestana--activa::after{transform:scaleX(0)}
  html.fin-mov .gl-anima .gl-mosaico{transition:opacity .8s var(--curva-suave),transform 1s var(--curva-expo);transition-delay:var(--d,0s)}
  html.fin-mov .gl-mosaico:nth-child(2){--d:.12s}
  html.fin-mov .gl-mosaico:nth-child(3){--d:.24s}
  html.fin-mov .gl-anima:not(.p1) .gl-mosaico{opacity:0;transform:translate3d(0,8px,0)}
  html.fin-mov .gl-anima .gl-anillo__valor{transition:stroke-dashoffset 1.3s var(--curva-expo) .15s}
  html.fin-mov .gl-anima:not(.p2) .gl-anillo__valor{stroke-dashoffset:87.96}
  html.fin-mov .gl-anima .gl-barras span{transition:transform 1.2s var(--curva-expo);transition-delay:calc(.3s + var(--b,0) * .05s)}
  html.fin-mov .gl-barras span:nth-child(2){--b:1}
  html.fin-mov .gl-barras span:nth-child(3){--b:2}
  html.fin-mov .gl-barras span:nth-child(4){--b:3}
  html.fin-mov .gl-barras span:nth-child(5){--b:4}
  html.fin-mov .gl-barras span:nth-child(6){--b:5}
  html.fin-mov .gl-barras span:nth-child(7){--b:6}
  html.fin-mov .gl-barras span:nth-child(8){--b:7}
  html.fin-mov .gl-barras span:nth-child(9){--b:8}
  html.fin-mov .gl-barras span:nth-child(10){--b:9}
  html.fin-mov .gl-barras span:nth-child(11){--b:10}
  html.fin-mov .gl-barras span:nth-child(12){--b:11}
  html.fin-mov .gl-anima:not(.p2) .gl-barras span{transform:scaleY(0)}

  /* 4 · Flujos (4,1 s): el estado cambia en su lugar (Recibida → En revisión → Aprobada), se llenan los tres segmentos
        de avance y el registro anota cada paso. La etiqueta anterior sale antes de que entre la nueva: nunca se
        superponen dos palabras */
  html.fin-mov .gl-anima .gl-estado__txt{transition:opacity .3s var(--curva-suave)}
  html.fin-mov .gl-anima .gl-estado__txt[data-e="1"]{opacity:1}
  html.fin-mov .gl-anima .gl-estado__txt[data-e="3"]{opacity:0}
  html.fin-mov .gl-anima.p2 .gl-estado__txt[data-e="1"]{opacity:0}
  html.fin-mov .gl-anima.p2:not(.p3) .gl-estado__txt[data-e="2"]{opacity:1}
  html.fin-mov .gl-anima.p3 .gl-estado__txt[data-e="3"]{opacity:1}
  html.fin-mov .gl-anima.p2:not(.p3) .gl-estado__txt[data-e="2"],html.fin-mov .gl-anima.p3 .gl-estado__txt[data-e="3"]{transition-delay:.28s}
  html.fin-mov .gl-anima .gl-ficha--estado::before{transition:opacity .6s var(--curva-suave)}
  html.fin-mov .gl-anima:not(.p3) .gl-ficha--estado::before{opacity:0}
  html.fin-mov .gl-anima:not(.p3) .gl-ficha--estado path{stroke-dashoffset:1}
  html.fin-mov .gl-anima .gl-puntos i::before{transition:transform .8s var(--curva-expo)}
  html.fin-mov .gl-anima:not(.p1) .gl-puntos i:nth-child(1)::before,
  html.fin-mov .gl-anima:not(.p2) .gl-puntos i:nth-child(2)::before,
  html.fin-mov .gl-anima:not(.p3) .gl-puntos i:nth-child(3)::before{transform:scaleX(0)}
  html.fin-mov .gl-anima .gl-registro li{transition:opacity .7s var(--curva-suave),transform .9s var(--curva-expo)}
  html.fin-mov .gl-anima:not(.p1) .gl-registro li:nth-child(1),
  html.fin-mov .gl-anima:not(.p2) .gl-registro li:nth-child(2),
  html.fin-mov .gl-anima:not(.p3) .gl-registro li:nth-child(3){opacity:0;transform:translate3d(0,6px,0)}

  /* 8c. Gestión legal · núcleo (híbrido del 29 sep 2026; estructura y estado final en fidem.css): los cuatro pedidos llegan
         por sus hilos al sello «IA», el sello se traza como el cartucho del título, y de él sale un hilo a cada tarjeta.
         Una sola vez. movimiento.js (sección 6d) pone en .gl-sistema: .gl-prepara (armado: cada pieza queda en su primer
         fotograma y, sin .gl-corre, en pausa), .gl-corre (en marcha; al ocultarse la pestaña se quita y todo se detiene
         donde iba) y .gl-nucleo-listo (el núcleo terminó o pasó directo a su final, sin animar). Por tarjeta, en ella y en
         su hilo de salida: .gl-llega (el último tramo se traza con la chispa en la punta; al llegar se encienden el nodo y
         el filete superior, y la maqueta arranca en ese instante: sección 6b) y .gl-listo (trazado y encendido, quieto);
         en la chispa, .gl-repite (vuelve una tarjeta que había salido de la pantalla: el hilo ya está, solo corre la
         chispa, 0,6 s). Los trazos llevan pathLength = 1 y el guion les pone --gl-pq (largo de la chispa: 40 px, 24 en
         celular, sobre el largo del trazo), --gl-f (fracción del tronco sobre el trazo) y sus derivados --gl-a = pq,
         --gl-b = pq − f, --gl-c = pq − 1 y --gl-r = 1 − f: la chispa viaja en la punta del trazo, con su misma duración y
         su misma curva. Cada animación termina en el estado de fidem.css: al quitar las clases no hay salto. Solo se
         animan transform, opacity, filter, color, border-color y stroke-dashoffset (sin CLS).
         Tiempos (s): fichas 0 · 0,07 · 0,14 · 0,21 (0,8); sello 0,2 (0,6), con «IA» en humo; hilos de entrada
         0,45 + 0,06 · i (0,9); marco, «IA» a tinta, anillo y halo 1,1; tronco 1,7 (0,8). Llegadas desde 1,7 (fila 1) y
         2,5 (fila 2): tramo de 0,7 + maqueta (≤ 4,2). Celular: hilos del canal 0,35 (0,8), marco 0,95 y tramos de la
         espina de 0,6. */
  .gl-sistema{--gl-t-sello:.2s;--gl-t-hilo:.45s;--gl-d-hilo:.9s;--gl-t-marco:1.1s;--gl-t-tronco:1.7s;--gl-d-llega:.7s}
  @media (max-width:719.98px){
    .gl-sistema{--gl-t-hilo:.35s;--gl-d-hilo:.8s;--gl-t-marco:.95s;--gl-d-llega:.6s}
  }
  .gl-sistema [data-k="1"]{--gl-i:0}
  .gl-sistema [data-k="2"]{--gl-i:1}
  .gl-sistema [data-k="3"]{--gl-i:2}
  .gl-sistema [data-k="4"]{--gl-i:3}
  html.fin-mov .gl-prepara:not(.gl-corre) *,
  html.fin-mov .gl-prepara:not(.gl-corre) *::before,
  html.fin-mov .gl-prepara:not(.gl-corre) *::after{animation-play-state:paused!important}
  /* A. Núcleo: fichas, sello, hilos de entrada con su chispa (que se apaga al entrar al sello) y el marco grande */
  html.fin-mov .gl-prepara:not(.gl-nucleo-listo) .gl-pedido{animation:gl-ia-aparece .8s var(--curva-expo) calc(var(--gl-i) * .07s) both}
  html.fin-mov .gl-prepara:not(.gl-nucleo-listo) .gl-ia__sello{animation:gl-ia-sube .6s var(--curva-suave) var(--gl-t-sello) both}
  html.fin-mov .gl-prepara:not(.gl-nucleo-listo) .gl-ia__letras{animation:gl-ia-tono .6s var(--curva-suave) var(--gl-t-marco) both}
  html.fin-mov .gl-prepara:not(.gl-nucleo-listo) .gl-ia__marco rect{stroke-dasharray:1 1;animation:gl-ia-traza 1s cubic-bezier(.45,0,.55,1) var(--gl-t-marco) both}
  html.fin-mov .gl-prepara:not(.gl-nucleo-listo) .gl-ia__anillo{animation:gl-ia-anillo .8s var(--curva-suave) var(--gl-t-marco) both}
  html.fin-mov .gl-prepara:not(.gl-nucleo-listo) .gl-ia::before{animation:gl-ia-halo 1.2s var(--curva-suave) var(--gl-t-marco) both}
  html.fin-mov .gl-prepara .gl-hilo{stroke-dasharray:1 1}
  html.fin-mov .gl-prepara:not(.gl-nucleo-listo) .gl-hilo--in{animation:gl-hilo-traza var(--gl-d-hilo) var(--curva-expo) calc(var(--gl-t-hilo) + var(--gl-i) * .06s) both}
  html.fin-mov .gl-prepara:not(.gl-nucleo-listo) .gl-chispa--in{--gl-c0:var(--gl-a);--gl-c1:var(--gl-c);
    animation:gl-hilo-chispa var(--gl-d-hilo) var(--curva-expo) calc(var(--gl-t-hilo) + var(--gl-i) * .06s) both,
              gl-hilo-apaga .35s var(--curva-suave) calc(var(--gl-t-hilo) + var(--gl-i) * .06s + var(--gl-d-hilo) - .3s) both}
  /* Salidas: sin trazar hasta su llegada; las de la fila 2 comparten el tronco, que se dibuja con el núcleo (1,7 s) hasta
     la bifurcación (1 − f) */
  html.fin-mov .gl-prepara .gl-hilo--out{stroke-dashoffset:1}
  html.fin-mov .gl-prepara.gl-nucleo-listo .gl-hilo--out:not(.gl-llega,.gl-listo){stroke-dashoffset:var(--gl-r,1)}
  html.fin-mov .gl-prepara:not(.gl-nucleo-listo) .gl-hilo--out:is([data-k="3"],[data-k="4"]):not(.gl-llega,.gl-listo){animation:gl-hilo-tronco .8s var(--curva-expo) var(--gl-t-tronco) both}
  html.fin-mov .gl-prepara:not(.gl-nucleo-listo) .gl-chispa--out:is([data-k="3"],[data-k="4"]):not(.gl-llega,.gl-repite){--gl-c0:var(--gl-a);--gl-c1:var(--gl-b);
    animation:gl-hilo-chispa .8s var(--curva-expo) var(--gl-t-tronco) both,gl-hilo-apaga .3s var(--curva-suave) calc(var(--gl-t-tronco) + .5s) both}
  /* B. Llegada a la tarjeta: el último tramo (0,7 s; 0,6 en celular) con la chispa en la punta; al llegar, el punto del
     nodo crece con un solo anillo que se desvanece, y el filete superior se enciende del centro a las esquinas y vuelve a
     filete. --gl-espera (en la tarjeta) es lo que tarda el hilo en llegar */
  html.fin-mov .gl-prepara .gl-hilo--out.gl-llega{animation:gl-hilo-llega var(--gl-d-llega) var(--curva-expo) both}
  html.fin-mov .gl-prepara .gl-hilo--out.gl-listo{stroke-dasharray:none;stroke-dashoffset:0}
  html.fin-mov .gl-prepara .gl-chispa--out.gl-llega{--gl-c0:var(--gl-b);--gl-c1:var(--gl-c);
    animation:gl-hilo-chispa var(--gl-d-llega) var(--curva-expo) both,gl-hilo-apaga .3s var(--curva-suave) calc(var(--gl-d-llega) - .15s) both}
  html.fin-mov .gl-prepara .gl-chispa--out.gl-repite{--gl-c0:var(--gl-b);--gl-c1:var(--gl-c);
    animation:gl-hilo-chispa .6s var(--curva-expo) both,gl-hilo-apaga .3s var(--curva-suave) .45s both}
  html.fin-mov .gl-prepara .gl-nodo{border-color:var(--filete)}
  html.fin-mov .gl-prepara .gl-nodo::before{transform:scale(0)}
  html.fin-mov .gl-prepara .gl-tarjeta.gl-listo .gl-nodo{border-color:rgba(var(--lacre-rgb),.85)}
  html.fin-mov .gl-prepara .gl-tarjeta.gl-listo .gl-nodo::before{transform:none}
  html.fin-mov .gl-prepara .gl-tarjeta.gl-llega .gl-nodo{animation:gl-hilo-nodo .45s var(--curva-expo) var(--gl-espera,0s) both}
  html.fin-mov .gl-prepara .gl-tarjeta.gl-llega .gl-nodo::before{animation:gl-hilo-punto .45s var(--curva-expo) var(--gl-espera,0s) both}
  html.fin-mov .gl-prepara .gl-tarjeta.gl-llega .gl-nodo::after{animation:gl-hilo-onda .9s var(--curva-suave) var(--gl-espera,0s) forwards}
  html.fin-mov .gl-prepara .gl-tarjeta.gl-llega::before{animation:gl-hilo-filete 1.4s linear var(--gl-espera,0s) both}
  /* Resalte del tronco (fidem.css) mientras la tarjeta 4 espera su llegada: su trazo, que solo muestra el tronco, se aparta */
  @media (hover:hover){
    html.fin-mov .gl-prepara[data-foco="3"] .gl-hilo--out[data-k="4"]:not(.gl-llega,.gl-listo){visibility:hidden}
  }

  /* 9. Barra compacta: la primera vez que aparece, firma su símbolo: se traza con un filete de lacre en 0,9 s y se
        rellena en 0,6 s (la técnica de la firma de Contacto). movimiento.js pone .barra-firma al arrancar y .barra-firmada
        1,5 s después de la primera aparición: la firma no se repite. La barra pasa de display:none a block, por eso es
        una animación y no una transición. Con el símbolo de 41 px, 24 unidades del viewBox (1000) ≈ 1 px; los trazados
        ya tienen pathLength=1. Al aparecer, el menú entra y el filete se traza de izquierda a derecha */
  html.barra-firma:not(.barra-firmada) body.concepto-final.es-compacta .compacta .compacta__simbolo .simbolo,
  html.barra-firma:not(.barra-firmada) body.concepto-final.es-compacta .compacta-movil .compacta__simbolo .simbolo{stroke:var(--lacre);animation:simbolo-relleno .6s var(--curva-suave) .8s both}
  html.barra-firma:not(.barra-firmada) body.concepto-final.es-compacta .compacta .compacta__simbolo .simbolo use,
  html.barra-firma:not(.barra-firmada) body.concepto-final.es-compacta .compacta-movil .compacta__simbolo .simbolo use{stroke-dasharray:1 1;animation:simbolo-traza .9s cubic-bezier(.45,0,.55,1) .1s both}
  body.concepto-final .compacta__acciones{transition:opacity .7s var(--curva-suave),transform .9s var(--curva-expo)}
  body.concepto-final .compacta .filete-inf{transform-origin:0 50%;transition:transform 1.1s var(--curva-expo)}
  @starting-style{
    body.concepto-final.es-compacta .compacta__acciones{opacity:0;transform:translate3d(0,-6px,0)}
    body.concepto-final.es-compacta .compacta .filete-inf{transform:scaleX(0)}
  }
}
/* 4c. Cómo trabajamos: el filete de avance acompaña la lectura por los cuatro principios y el numeral de cada uno pasa de
       humo a tinta cuando la lectura lo alcanza (una línea al 55 % del alto de la ventana: el frente del filete va
       siempre en esa línea). Atado al desplazamiento con animation-timeline: view(), sin script; donde no existe,
       movimiento.js hace lo mismo con IntersectionObserver (html.etapas-io: el filete llega hasta el principio
       alcanzado). Humo sobre papel: 6,9:1 (AA). El título fijo no cambia. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html.fin-mov:not(.etapas-io) body.concepto-final #metodo .etapas{view-timeline-name:--etapas;view-timeline-axis:block;view-timeline-inset:54% 45%}
    html.fin-mov:not(.etapas-io) body.concepto-final #metodo .etapas::after{animation:etapas-avance linear both;animation-timeline:--etapas;animation-range:cover 0% cover 100%}
    html.fin-mov:not(.etapas-io) body.concepto-final .etapas .numeral{animation:numeral-alcanza linear both;animation-timeline:view(block 54% 45%);animation-range:cover 0% cover 100%}
  }
}
@media (prefers-reduced-motion:no-preference){
  html.fin-mov.etapas-io body.concepto-final .etapas .numeral{transition:color .8s var(--curva-suave)}
  html.fin-mov.etapas-io body.concepto-final .etapas li:not(.alcanzada) .numeral{color:var(--humo)}
  html.fin-mov.etapas-io body.concepto-final #metodo .etapas::after{transform:scaleY(var(--etapas-avance,0));transition:transform 1.2s var(--curva-expo)}
}

@keyframes halo-a{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-8vw,6vh,0) scale(1.1)}100%{transform:translate3d(-3vw,12vh,0) scale(.95)}}
@keyframes halo-b{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-10vw,-5vh,0) scale(1.08)}100%{transform:translate3d(-18vw,2vh,0) scale(.96)}}
@keyframes halo-c{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(12vw,-8vh,0) scale(1.12)}}
@keyframes sube-suave{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes titular-espera{0%{opacity:0}100%{opacity:1}}
@keyframes renglon-sube{from{opacity:0;transform:translate3d(0,108%,0)}to{opacity:1;transform:none}}
@keyframes hoja-sube{from{transform:translate3d(0,48px,0)}to{transform:none}}
@keyframes hoja-aclara{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}
@keyframes simbolo-relleno{from{fill:rgba(245,136,52,0);stroke-width:24px}to{fill:#f58834;stroke-width:0}}
@keyframes simbolo-traza{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes etapas-avance{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes numeral-alcanza{from{color:var(--humo)}to{color:var(--tinta)}}
@keyframes gl-halo{from{opacity:.35;transform:scale(1)}to{opacity:0;transform:scale(2.4)}}
@keyframes gl-ia-aparece{from{opacity:0;filter:blur(6px);transform:translate3d(0,12px,0)}to{opacity:1;filter:none;transform:none}}
@keyframes gl-ia-sube{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes gl-ia-tono{from{color:var(--humo)}to{color:var(--tinta)}}
@keyframes gl-ia-traza{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes gl-ia-anillo{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes gl-ia-halo{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes gl-hilo-traza{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes gl-hilo-tronco{from{stroke-dashoffset:1}to{stroke-dashoffset:var(--gl-r,1)}}
@keyframes gl-hilo-llega{from{stroke-dashoffset:var(--gl-r,1)}to{stroke-dashoffset:0}}
@keyframes gl-hilo-chispa{from{stroke-dashoffset:var(--gl-c0,0)}to{stroke-dashoffset:var(--gl-c1,0)}}
@keyframes gl-hilo-apaga{from{opacity:1}to{opacity:0}}
@keyframes gl-hilo-nodo{from{border-color:var(--filete)}to{border-color:rgba(var(--lacre-rgb),.85)}}
@keyframes gl-hilo-punto{from{transform:scale(0)}to{transform:none}}
@keyframes gl-hilo-onda{from{opacity:.35;transform:scale(1)}to{opacity:0;transform:scale(2.667)}}
@keyframes gl-hilo-filete{0%{opacity:1;transform:scaleX(0);animation-timing-function:cubic-bezier(.16,1,.3,1)}42.857%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.33,0,.15,1)}100%{opacity:0;transform:none}}

/* ---------- Impresión: la hoja completa, sin navegación ni movimiento ---------- */
@media print{
  .compacta,.compacta-movil,.menu,.whatsapp-fijo,.cabecera__acciones,.cabecera-movil .boton,.portada__accion,.contacto__formulario,.contacto__whatsapp,.portada__fondo,.filigrana{display:none!important}
  .revela{opacity:1!important;transform:none!important}
  .palabra{opacity:1!important}
  .hoja__tarjeta,.hoja__flota{transform:none!important;animation:none!important}
  .folio__linea,.practica li::before,.perfil h3::after,.numeral::after,.sectores__lista li::before{transform:none!important}
  .perfil h3{filter:none!important}
  .etapas .numeral{animation:none!important;color:var(--tinta)!important}
  #metodo .etapas::after{animation:none!important;transform:none!important}
  .sector{opacity:1!important;transform:none!important}
  .gl-escena *,.gl-escena *::before,.gl-escena *::after{transition:none!important;animation:none!important}
  .gl-sistema *,.gl-sistema *::before,.gl-sistema *::after{animation:none!important}
  .gl-chispa,.gl-ia::before{display:none!important}
  .gl-ia__marco rect{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  /* Los hilos se calculan para la pantalla y la hoja se maqueta a otro ancho: se imprime la composición sin JS */
  .gl-trazos,.gl-nodo{display:none!important}
  .gestion__renglon{clip-path:none!important;animation:none!important}
  .gestion__texto{opacity:1!important;transform:none!important;animation:none!important}
  .gestion__marco{visibility:visible!important}
  .gestion__marco rect{animation:none!important;stroke-dashoffset:0!important}
  .emblema{position:static!important}
  .pieza{transform:none!important;opacity:1!important;stroke-dashoffset:0!important}
  .simbolo use{transform:none!important;animation:none!important;stroke-dashoffset:0!important}
  .firma__simbolo{opacity:0!important}
  .firma__img{opacity:1!important;clip-path:none!important}
  body.concepto-final .portada{min-height:0}
}

/* =====================================================================
   Gestión legal · encabezado (opción B, aprobada por el socio el 28 sep 2026)
   «IA para su área legal: / menos carga, más control». «IA» en tinta y peso 500 dentro de un cartucho de filete fino
   (1 px de lacre al 70 %, esquinas de 2 px, sin tinte); el segundo renglón, en humo (.gestion__tono, en fidem.css).
   Fuera de @media va el estado final y quieto: es lo que se ve sin JS, con «reducir movimiento» y al imprimir.
   El movimiento no tiene script propio: lo arranca el observador de revelar() (movimiento.js, sección 7), que pone
   .revela en la cabecera de la sección y, al entrar en pantalla, .en-vista, una sola vez. Cada renglón sube desde su
   ranura, como el titular de la portada (el segundo 0,14 s después), y el cartucho se traza con el filete; todo
   termina a los 1,6 s (WCAG 2.2.2). Las animaciones solo rellenan hacia atrás (backwards): al terminar, el h2 vuelve a
   sus estilos de reposo, que son el estado final. Solo se animan transform, opacity y stroke-dashoffset, y la ranura
   solo recorta: nada salta ni cambia de medida (sin CLS).
   En reposo ninguna letra va en naranja: #f58834 sobre papel da 2,5:1; «IA» queda en tinta (16,1:1) y el naranja va en el filete.
   Medidas de Nunito Sans (interlínea 1,08): la línea base queda a .865em del borde superior de la caja del renglón,
   la altura de las mayúsculas es .705em y la de la x, .485em.
   ===================================================================== */
.gestion__encabezado{--lacre-rgb:245,136,52}
.gestion__encabezado abbr{text-decoration:none;border:0}
/* Dos renglones, siempre en bloque; «su área» no se separa (espacio no separable en el HTML) */
.gestion__renglon,.gestion__texto{display:block}
/* El cartucho: su filete queda a plomo con el rótulo, el segundo renglón y las tarjetas; la «I» va .14em adentro y a la
   derecha hay .025em más, lo que el espaciado negativo del titular le quita a la «A» */
.gestion__sello{position:relative;display:inline-block;padding:0 .165em 0 .14em;font-weight:500;color:var(--tinta)}
.gestion__marco{position:absolute;left:0;top:.03em;width:100%;height:.965em;overflow:visible;pointer-events:none}
.gestion__marco rect{x:.5px;y:.5px;width:calc(100% - 1px);height:calc(100% - 1px);rx:2px;ry:2px;fill:none;stroke:rgba(var(--lacre-rgb),.7);stroke-width:1px}
@media (forced-colors:active){ .gestion__marco rect{stroke:CanvasText} }

@media (prefers-reduced-motion:no-preference){
  /* Antes de entrar: los renglones esperan ocultos en su ranura y el cartucho, sin trazar. El recorte deja aire arriba
     (tildes), abajo (descendentes) y a los lados (el filete del cartucho) */
  html.fin-mov #gestion-legal .revela:not(.en-vista) .gestion__renglon{clip-path:inset(-.3em -.6em -.24em -.6em)}
  html.fin-mov #gestion-legal .revela:not(.en-vista) .gestion__texto{opacity:0}
  html.fin-mov #gestion-legal .revela:not(.en-vista) .gestion__marco{visibility:hidden}
  /* Al entrar (con el mismo retardo escalonado que la cabecera): la ranura recorta solo mientras el renglón sube */
  html.fin-mov #gestion-legal .revela.en-vista .gestion__renglon{animation:gestion-ranura 1.3s linear var(--retardo,0s) backwards}
  html.fin-mov #gestion-legal .revela.en-vista .gestion__texto{animation:renglon-sube 1.15s var(--curva) var(--retardo,0s) backwards}
  html.fin-mov #gestion-legal .revela.en-vista .gestion__renglon + .gestion__renglon .gestion__texto{animation-delay:calc(var(--retardo,0s) + .14s)}
  /* El cartucho se traza cuando el renglón ya está quieto (0,6 s), en 1 s, con la curva del trazo de la firma de Contacto */
  html.fin-mov #gestion-legal .revela.en-vista .gestion__marco rect{animation:gestion-marco 1s cubic-bezier(.45,0,.55,1) calc(var(--retardo,0s) + .6s) backwards}
}
@keyframes gestion-ranura{from,to{clip-path:inset(-.3em -.6em -.24em -.6em)}}
@keyframes gestion-marco{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}


/* ---------- Números con menos protagonismo (6 de octubre de 2026, opción C) ----------
   Las áreas no son una secuencia: sin cifras en la tarjeta de la portada ni en la lista de áreas.
   Cómo trabajamos conserva sus numerales, porque sí hay un orden, a 32 px y a la altura del título. */
body.concepto-final .hoja__lista .cifra,
body.concepto-final .practica .cifra{display:none}
body.concepto-final .hoja__lista li{grid-template-columns:minmax(0,1fr)}
body.concepto-final #practica .practica h3,
body.concepto-final #practica .practica p{grid-column:1 / -1}
body.concepto-final .numeral{font:300 32px/1 var(--font-sans);letter-spacing:-.02em;padding-bottom:12px}
@media (min-width:1000px){
  body.concepto-final #metodo .etapas .numeral{grid-row:1}
  body.concepto-final #metodo .etapas .numeral,
  body.concepto-final #metodo .etapas h3{align-self:baseline}
}