/* ============================================================================
   oficio.css — molde PÁGINA PROPIA POR OFICIO (MAGA-OFICIOS-001, estructura C).
   Se carga SOLO en páginas de oficio (documento(..., oficio=True)), ANTES de la
   piel gente. La ESTRUCTURA sale del mockup "Profesion - Moderno C - Ruta"
   (Claude Design); la IDENTIDAD es la nuestra: todos los colores/fuentes vía los
   tokens de despegue-gente.css (--teal color-oficio, --gap la-contra, --ac links,
   sellos --ver/--pro/--est, --sans/--mono). Cero color hardcodeado (regla L171).
   ============================================================================ */

/* ⭐ El mismo ancho que el resto del sitio (2026-09-18, ver `despegue-gente.css`). El texto de
   la ficha sigue topado por `.of-art` en 760px: lo que se ensancha son las tarjetas. */
.of-wrap { max-width: var(--w-page); margin: 0 auto; padding: 30px 22px 80px; }
.of-art  { max-width: 760px; margin: 0 auto; }

/* -- barra de progreso de lectura (fija arriba) -- */
.of-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; }
.of-prog-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--pro)); transition: width .08s linear; }

/* -- CTA sticky "sumate a la lista" -- */
.of-sticky { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 50; opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease;
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--teal); color: var(--card); border-radius:100px; padding: 11px 13px 11px 19px;
  box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--teal) 70%, transparent); }
.of-sticky.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.of-sticky b { font-size: 14px; font-weight: 700; }
.of-sticky span { font-size: 12.5px; font-weight: 800; background: var(--card); color: var(--teal);
  border-radius:100px; padding: 7px 14px; white-space: nowrap; }
@media (max-width: 560px) { .of-sticky b { display: none; } }

/* -- chips + H1 -- */
.of-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0 18px; }
.of-chip { font-family: var(--mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: .05em;
  color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent); border-radius:100px; padding: 5px 12px; }
.of-chip.gap { color: color-mix(in srgb, var(--gap) 78%, #000);   /* var(--gap) daba 3,92 */ background: var(--gap-soft); border-color: var(--gap-bd); }
.of-chip.zona { color: var(--dim); background: transparent; border: 0; padding: 5px 2px; }
.of-h1 { margin: 0 0 20px; font-family: var(--sans); font-size: 46px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.06; color: var(--ink); max-width: 860px; }

/* -- HERO grid: la puerta (durable) | la plata + la llave -- */
/* ⭐ 2026-09-02: la columna del SUELDO va primera (decision del usuario sobre el pedido del
   reporte externo: sueldo -> habilitacion -> distancia). Por eso el ancho grande pasa a la
   SEGUNDA columna: la que manda en orden de lectura es la angosta, y la tarjeta del ancla
   estructural -que lleva glosa larga y barra- necesita seguir siendo la ancha. */
.of-hero { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; align-items: stretch; margin-bottom: 20px; }
.of-card-h { background: var(--card); border: 1px solid var(--bd); border-radius:var(--r-12); overflow: hidden;
  box-shadow: 0 20px 44px -36px color-mix(in srgb, var(--ink) 45%, transparent); }
.of-puerta { display: flex; flex-direction: column; }
/* pad en columna + barra anclada abajo: la card izquierda estira a la altura de la columna
   derecha (align-items:stretch) y el vacio caia todo junto antes del pie (hallazgo 2026-07-03) */
.of-pad { padding: 22px 24px; flex: 1; display: flex; flex-direction: column; }
.of-k { font-family: var(--mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em;
  color: var(--teal); margin-bottom: 11px; }
.of-k.mut { color: var(--dim); }
.of-n { font-family: var(--sans); font-size: 60px; font-weight: 800; letter-spacing: -0.02em; line-height: .9; color: var(--teal); }
.of-nrow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* :not(.of-n): el selector ancho pisaba al numero-ancla (60px teal) y lo dejaba en 15px gris — bug de
   origen del molde, restaurado 2026-07-06 (piloto medico) */
.of-nrow span:not(.of-n) { font-size: 15px; line-height: 1.35; color: var(--sec); max-width: 260px; }
.of-bar { margin-top: auto; padding-top: 14px; }
.of-bar-lbls { display: flex; justify-content: space-between; gap: 14px; font-family: var(--mono); font-size:var(--fs-label); margin-bottom: 5px; }
/* flex-basis 0 + min-width 0: sin esto los dos rotulos son items sin base y se encogen hasta su
   palabra mas larga -> columna de una palabra por linea en cuanto la etiqueta es larga (defecto
   de MOLDE xN: cazado al construir el primer oficio de San Juan, y ya apretaba a Rio Negro). */
.of-bar-a, .of-bar-b { flex: 1 1 0; min-width: 0; white-space: normal; }
.of-bar-a { color: var(--teal); font-weight: 600; }
.of-bar-b { color: var(--dim); text-align: right; }
.of-bar-track { display: flex; height: 9px; border-radius:var(--r-4); overflow: hidden; background: color-mix(in srgb, var(--teal) 12%, var(--card)); }
.of-bar-track i { display: block; height: 100%; }
.of-bar-track .fa { background: var(--teal); }
.of-bar-track .fb { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.of-bar-note { font-size: var(--fs-micro); color: var(--dim); margin-top: 7px; }
/* etiquetas largas (ej. RN "Cupos de formacion (toda la prov.) · 225") no entran lado a lado en
   telefono: se apilan en columna para que el numero no quede cortado fuera de pantalla (L189). */
@media (max-width: 560px) { .of-bar-lbls { flex-direction: column; gap: 3px; }
  .of-bar-a, .of-bar-b { display: block; white-space: normal; text-align: left; } }
/* el rotulo del sello ("el piso" / "el techo") es un item de flex hermano del <a class="sello">, asi
   que .of-foot los envolvia por separado y el rotulo caia SOLO a la linea de abajo, huerfano de su
   badge. El par va pegado o no se entiende cual es cual (defecto de MOLDE xN). */
.of-par { display: inline-flex; align-items: center; white-space: nowrap; }
.of-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 24px;
  background: color-mix(in srgb, var(--ink) 3%, var(--card)); border-top: 1px solid var(--bd); }
.of-side { display: flex; flex-direction: column; gap: 18px; }
.of-plata-v { font-family: var(--mono); font-size: 29px; font-weight: 600; color: var(--ink); line-height: 1; }
.of-plata-v small { font-size: 15px; color: var(--dim); }
.of-plata-d { font-size: var(--fs-body-sm); line-height: 1.45; color: var(--dim); margin-top: 8px; }
.of-llave { background: var(--teal); border-radius:var(--r-12); padding: 20px 22px; color: var(--card);
  box-shadow: 0 20px 44px -36px color-mix(in srgb, var(--teal) 85%, transparent); }
.of-llave .of-k { color: color-mix(in srgb, var(--card) 72%, var(--teal)); }
.of-llave-v { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--card); }
.of-llave-d { font-size: var(--fs-body); line-height: 1.45; color: color-mix(in srgb, var(--card) 88%, var(--teal)); margin-top: 8px; }
.of-lead { margin: 0 0 8px; max-width: 760px; font-size: 17px; line-height: 1.6; color: var(--sec); }
@media (max-width: 720px) { .of-hero { grid-template-columns: 1fr; } .of-h1 { font-size: 34px; } .of-n { font-size: 48px; }
  /* numero y su frase apilados JUNTOS (la frase quedaba suelta al wrappear, hallazgo 2026-07-03) */
  .of-nrow { flex-direction: column; align-items: flex-start; gap: 5px; } .of-nrow span { max-width: 100%; } }

/* -- LA OTRA PUNTA (cross-link al nicho emprender relacionado, menu #6) -- */
.of-rel { margin-top: 14px; font-size: var(--fs-body-lg); line-height: 1.5; color: var(--sec);
  background: color-mix(in srgb, var(--teal) 6%, var(--card)); border: 1px solid var(--bd);
  border-radius:var(--r-12); padding: 11px 15px; }
.of-rel-k { font-family: var(--mono); font-size:var(--fs-label); letter-spacing: .08em; color: var(--teal);
  font-weight: 600; margin-right: 8px; }
.of-rel a { color: var(--teal); font-weight: 600; text-decoration: none; }
.of-rel a:hover { text-decoration: underline; }

/* -- LA RUTA (card BLANCA + acentos teal crispados + hover vivo, 5 pasos) -- */
.of-ruta { background: var(--card); border: 1px solid var(--bd); border-radius:var(--r-12); padding: 22px 24px 10px; margin: 16px 0 0;
  box-shadow: 0 20px 44px -34px color-mix(in srgb, var(--teal) 50%, transparent); }
.of-ruta-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.of-ruta-k { font-family: var(--mono); font-size:var(--fs-label); font-weight: 600; letter-spacing: .12em; color: var(--teal); margin-bottom: 8px; }
.of-ruta-t { margin: 0; font-family: var(--sans); font-size: 27px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.of-ruta-note { font-family: var(--mono); font-size: var(--fs-micro); line-height: 1.5; color: var(--dim); max-width: 250px; }
.of-step { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 15px; align-items: center;
  text-decoration: none; padding: 13px 12px; margin: 0 -12px; border-top: 1px solid var(--bd); border-radius:var(--r-12);
  transition: background .15s ease; }
.of-step:hover { background: color-mix(in srgb, var(--teal) 7%, var(--card)); }
.of-step-n { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--teal); background: var(--card);
  border: 2px solid color-mix(in srgb, var(--teal) 45%, transparent); transition: background .15s ease, border-color .15s ease; }
.of-step.key .of-step-n { background: var(--teal); color: var(--card); border-color: var(--teal); }
.of-step:hover .of-step-n { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, var(--card)); }
.of-step.key:hover .of-step-n { background: var(--teal); }
.of-step-t { font-size: 16px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  transition: color .15s ease; }
.of-step:hover .of-step-t { color: var(--teal); }
.of-step-d { font-size: var(--fs-body); color: var(--dim); margin-top: 2px; overflow-wrap: anywhere; } /* URLs largas (certificadommpp...) no entraban a 360px y se clipeaban (L189) */
.of-step-key { font-family: var(--mono); font-size:var(--fs-tag); font-weight: 600; letter-spacing: .05em;
  color: var(--card); background: var(--teal); border-radius:var(--r-4); padding: 2px 7px; }
.of-step-go { font-family: var(--mono); font-size: 16px; color: color-mix(in srgb, var(--teal) 55%, var(--dim));
  transition: transform .15s ease, color .15s ease; }
.of-step:hover .of-step-go { color: var(--teal); transform: translateX(3px); }

/* -- ¿Y mi vida? (tiles del régimen) -- */
.of-vtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.of-vtile { background: var(--card); border: 1px solid var(--bd); border-radius:var(--r-12); padding: 16px 18px; }
.of-vtile-t { font-size: 15.5px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.of-vtile-d { font-size: var(--fs-body); line-height: 1.5; color: var(--dim); }
@media (max-width: 560px) { .of-vtiles { grid-template-columns: 1fr; } }

/* -- secciones Q (artículo numerado) -- */
/* el aterrizaje de las anclas compensa la zona sticky COMPLETA (header + barra-indice);
   --stick lo fija el JS y vale hh+ph+14, asi que sin .pnav sigue dando el mismo salto. */
.of-q, #ruta { scroll-margin-top: var(--stick, 80px); }
.of-q { margin-top: 42px; }
.of-qhead { display: flex; align-items: baseline; gap: 16px; padding-bottom: 12px; margin-bottom: 18px;
  border-bottom: 2px solid color-mix(in srgb, var(--teal) 25%, transparent); }
.of-qhead.gap { border-bottom-color: color-mix(in srgb, var(--gap) 32%, transparent); }
.of-qn { font-family: var(--sans); font-size: 32px; font-weight: 800; color: var(--teal); line-height: 1; }
.of-qhead.gap .of-qn { color: var(--gap); }
.of-qt { margin: 0; font-family: var(--sans); font-size: 27px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.of-qlabel { font-family: var(--mono); font-size:var(--fs-label); font-weight: 600; letter-spacing: .08em; color: var(--teal); }
.of-qhead.gap .of-qlabel { color: var(--gap); }
.of-p { margin: 0 0 14px; font-size: 17px; line-height: 1.68; color: var(--ink); }
.of-p:last-child { margin-bottom: 0; }
.of-p .t { color: var(--teal); font-weight: 700; }
.of-sellos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* tarjetas de dato blancas dentro de una Q */
.of-dcard { background: var(--card); border: 1px solid var(--bd); border-radius:var(--r-12); padding: 20px 22px;
  box-shadow: 0 16px 38px -34px color-mix(in srgb, var(--ink) 45%, transparent); }
.of-dcard.mb { margin-bottom: 16px; }
.of-hueco { background: color-mix(in srgb, var(--teal) 6%, var(--card)); border-left: 3px solid var(--teal);
  border-radius:0 var(--r-12) var(--r-12) 0; padding: 14px 18px; }
.of-hueco p { margin: 0; font-size: var(--fs-body-lg); line-height: 1.6; color: var(--ink); }

/* salario: dos columnas + barra */

.of-salk { font-family: var(--mono); font-size: var(--fs-micro); color: var(--dim); margin-bottom: 3px; }
.of-salv { font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--ink); }
.of-salv.ac { color: var(--teal); }

.of-salfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--bd); }

/* formación: opciones con badge modalidad */
.of-forms { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.of-form { background: var(--card); border: 1px solid var(--bd); border-radius:var(--r-12); padding: 17px 19px;
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.of-form.free { border-color: color-mix(in srgb, var(--ver) 35%, transparent); }
.of-form-tx { flex: 1; min-width: 220px; }
.of-form-t { font-size: 16.5px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.of-form-d { font-size: var(--fs-body); line-height: 1.5; color: var(--dim); }
/* `.of-mod*` SE FUE A `despegue-gente.css` (2026-08-18) — no se movio el estilo, se borro el que
   nunca se aplicaba. Medido: era la UNICA colision con una PROPIEDAD EN DISPUTA de todo el sitio.
   De los 16 selectores que aparecen en dos hojas de una misma familia, 14 son la arquitectura en
   capas funcionando (`tokens.css` la estructura + la piel el color, cero propiedades compartidas);
   los 2 que si se pisaban eran `.of-mod` y `.of-mod.gratis`, y se pisaban en cinco propiedades
   (font-size 11 vs 10, padding, border-radius, background, border).
   ⛔ Y las que ganaban eran las de la skin: el orden de <link> es fonts → tokens → **oficio** →
   **despegue-gente** → cierre, o sea que la skin carga DESPUES. Estas tres reglas nunca llegaron a
   pantalla. Es lo mismo que [[L847]]: una decision de diseno escrita que no llega al pixel.
   ⚠️ Lo que SI cambio de aspecto son las 14 pildoras «arancelado» de las paginas de oficio: la
   pagina emitia `of-mod arancel` (regla de aca, ambar por `color-mix`) y el hub emitia
   `of-mod aran` (regla de la skin, `#FBF2DC`) — el MISMO estado con dos nombres y dos aspectos.
   Ahora las dos superficies emiten `arancel` y comparten la regla de la skin. Es la regla del
   usuario: «elemento compartido = una sola forma; lo unico que difiere por piel es la paleta».
   ⚠️ Cola declarada: los valores que quedaron son hex duros (`#FBF2DC`, `#E7F4EC`, `#BFE0CC`).
   Tokenizarlos es U7-bis, y su criterio esta escrito alla. */

/* gancho ① curso afiliado (dashed ámbar) */

/* gancho ② cargá tu perfil (teal) */
.of-hook2 { margin-top: 16px; border-radius:var(--r-12); background: linear-gradient(135deg, var(--teal), color-mix(in srgb, var(--teal) 80%, #000));
  padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px;
  box-shadow: 0 22px 42px -28px color-mix(in srgb, var(--teal) 85%, transparent); }
.of-hook2-k { font-family: var(--mono); font-size:var(--fs-label); font-weight: 600; letter-spacing: .09em; color: color-mix(in srgb, var(--card) 72%, var(--teal)); margin-bottom: 6px; }
.of-hook2-t { font-size: 22px; font-weight: 800; color: var(--card); letter-spacing: -0.01em; line-height: 1.12; }
.of-hook2-d { font-size: var(--fs-body); line-height: 1.5; color: color-mix(in srgb, var(--card) 86%, var(--teal)); margin-top: 6px; max-width: 470px; }
.of-hook2-d b { color: var(--card); }
.of-hook2-cta { font-size: 14.5px; font-weight: 800; color: var(--teal); background: var(--card);
  border-radius:var(--r-12); padding: 13px 24px; text-decoration: none; white-space: nowrap; }
@media (max-width: 560px) {  .of-hook2 { grid-template-columns: 1fr; } }

/* primer paso (Q6, callout teal soft) */
.of-paso { background: color-mix(in srgb, var(--teal) 6%, var(--card)); border-radius:var(--r-12); padding: 14px 17px; margin-bottom: 16px; }
.of-paso p { margin: 0; font-size: var(--fs-body-lg); line-height: 1.6; color: var(--ink); }
.of-paso .t { color: var(--teal); font-weight: 700; }

/* la contra (línea de cierre en italic) */
.of-contra { font-family: var(--sans); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--dim);
  border-left: 3px solid color-mix(in srgb, var(--gap) 40%, transparent); padding-left: 15px; }

/* Q8 fuentes: filas sobre UNA grilla compartida (subgrid): el ancho de la columna del sello lo fija
   la fila más ancha y los textos arrancan todos en la misma X aunque la fecha del sello varíe
   (verif·2026 vs verif·04-2026 — hallazgo de la lectura del usuario, FASE 8d construcción). Una
   grilla POR fila con columna auto no alinea entre filas. */
/* Q8 método: el bloque que el sello «Cálculo propio — ver el método» promete. Va ARRIBA de las
   fuentes y usa la tarjeta blanca de la página (.of-dcard.mb), así que sólo agrega el rótulo y la
   prosa. El pie da la vigencia en texto plano: re-emitir el sello acá sería anclar a #q8 desde
   dentro de #q8 (link muerto). */
.of-mtd-k { font-family: var(--mono); font-size:var(--fs-label); font-weight: 600; letter-spacing: .08em;
  color: var(--teal); margin-bottom: 9px; }
.of-mtd-p { margin: 0; font-size: var(--fs-body-lg); line-height: 1.65; color: var(--ink); }
.of-mtd-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 11px; border-top: 1px solid var(--bd);
  font-family: var(--mono); font-size:var(--fs-label); color: var(--dim); }

/* ⛔ `max-content` NO CEDE — 2026-08-16, defecto medido y publicado.
   La columna del sello era `max-content` pelado, asi que a 320 px la fila pedia 302 px dentro de
   un contenedor de 230 y **corria la PAGINA ENTERA** (`scrollWidth 347 > 320`, 12 mediciones del
   arnes en 2 paginas). `minmax(0, max-content)` conserva la alineacion —que es lo que el
   comentario de arriba defiende— y ademas la deja CEDER cuando no entra, en vez de desbordar. */
.of-srcs { display: grid; grid-template-columns: minmax(0, max-content) 1fr; }
.of-src { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 14px; align-items: center; padding: 15px 0; }
.of-src + .of-src { border-top: 1px solid var(--bd); }
.of-src-tx { font-size: 15px; color: var(--ink); }
/* Y en movil la fila APILA. No es cosmetico: con las dos columnas puestas, el texto de la fuente
   caia en 135 px y se partia en **16 lineas a 320 px** (medido en `perforista-salar-catamarca`,
   que ni siquiera desbordaba — el desborde era el sintoma ruidoso de las 2, esto pasaba en las
   40). Apilado son 5. Se usa el breakpoint que ya usan las otras 5 media queries de esta hoja. */
@media (max-width: 560px) {
  .of-srcs { grid-template-columns: 1fr; }
  .of-src { grid-template-columns: 1fr; gap: 6px; }
}

/* FAQ por zona */
.of-faqs { display: flex; flex-direction: column; gap: 10px; }
.of-faq { background: var(--card); border: 1px solid var(--bd); border-radius:var(--r-12); padding: 16px 18px; }
.of-faq-tag { font-family: var(--mono); font-size:var(--fs-tag); font-weight: 600; letter-spacing: .06em; color: var(--teal);
  background: color-mix(in srgb, var(--teal) 10%, transparent); border-radius:var(--r-4); padding: 2px 8px; }
.of-faq-q { font-size: 16px; font-weight: 800; color: var(--ink); margin: 8px 0 5px; }
.of-faq-a { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--sec); }