/* ============================================================================
   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).
   ============================================================================ */

.of-wrap { max-width: 940px; 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: #fff; 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: #fff; 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: 10.5px; 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: var(--gap); 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 -- */
.of-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: stretch; margin-bottom: 20px; }
.of-card-h { background: var(--card); border: 1px solid var(--bd); border-radius: 16px; 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: 10.5px; 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; font-family: var(--mono); font-size: 11px; margin-bottom: 5px; }
.of-bar-lbls .a { color: var(--teal); font-weight: 600; }
.of-bar-lbls .b { color: var(--dim); }
.of-bar-track { display: flex; height: 9px; border-radius: 5px; 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; }
.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: 16px; padding: 20px 22px; color: #fff;
  box-shadow: 0 20px 44px -36px color-mix(in srgb, var(--teal) 85%, transparent); }
.of-llave .of-k { color: color-mix(in srgb, #fff 72%, var(--teal)); }
.of-llave-v { font-family: var(--mono); font-size: 22px; font-weight: 600; color: #fff; }
.of-llave-d { font-size: var(--fs-body); line-height: 1.45; color: color-mix(in srgb, #fff 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: 10px; padding: 11px 15px; }
.of-rel-k { font-family: var(--mono); font-size: 10px; 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: 18px; 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: 11px; 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: 11px;
  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: #fff; 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: 9px; font-weight: 600; letter-spacing: .05em;
  color: #fff; background: var(--teal); border-radius: 5px; 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: 12px; 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) -- */
.of-q { scroll-margin-top: 80px; 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: 10.5px; 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: 14px; 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 10px 10px 0; padding: 14px 18px; }
.of-hueco p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); }

/* salario: dos columnas + barra */
.of-salrow { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.of-salk { font-family: var(--mono); font-size: 10px; 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-salbar { position: relative; height: 10px; background: color-mix(in srgb, var(--teal) 12%, var(--card));
  border-radius: 5px; margin: 14px 0 6px; }
.of-salbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--teal) 70%, var(--card)), 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: 13px; 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 { font-family: var(--mono); font-size: 11px; font-weight: 600; border-radius: 7px; padding: 5px 12px; white-space: nowrap; }
.of-mod.gratis { color: var(--ver); background: color-mix(in srgb, var(--ver) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ver) 30%, transparent); }
.of-mod.arancel { color: var(--pro); background: color-mix(in srgb, var(--pro) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pro) 30%, transparent); }
.of-mod.mixto { color: var(--ac); background: var(--ac-soft); border: 1px solid color-mix(in srgb, var(--ac) 30%, transparent); }

/* gancho ① curso afiliado (dashed ámbar) */
.of-hook { border: 1px dashed color-mix(in srgb, var(--pro) 55%, transparent);
  background: color-mix(in srgb, var(--pro) 6%, var(--card)); border-radius: 13px; padding: 17px 19px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.of-hook-ic { width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-size: 23px; background: color-mix(in srgb, var(--pro) 15%, transparent); }
.of-hook-k { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .09em; color: var(--pro); margin-bottom: 4px; }
.of-hook-t { font-size: 16.5px; font-weight: 800; color: var(--ink); }
.of-hook-d { font-size: var(--fs-body-sm); color: var(--dim); margin-top: 2px; }
.of-hook-cta { font-size: 14px; font-weight: 700; color: var(--on-ac); background: var(--pro);
  border-radius: 9px; padding: 11px 20px; text-decoration: none; white-space: nowrap; }

/* gancho ② cargá tu perfil (teal) */
.of-hook2 { margin-top: 16px; border-radius: 16px; 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: 9.5px; font-weight: 600; letter-spacing: .09em; color: color-mix(in srgb, #fff 72%, var(--teal)); margin-bottom: 6px; }
.of-hook2-t { font-size: 22px; font-weight: 800; color: #fff; 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, #fff 86%, var(--teal)); margin-top: 6px; max-width: 470px; }
.of-hook2-d b { color: #fff; }
.of-hook2-cta { font-size: 14.5px; font-weight: 800; color: var(--teal); background: #fff;
  border-radius: 10px; padding: 13px 24px; text-decoration: none; white-space: nowrap; }
@media (max-width: 560px) { .of-hook { grid-template-columns: auto 1fr; } .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: 10px; padding: 14px 17px; margin-bottom: 16px; }
.of-paso p { margin: 0; font-size: 15.5px; 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. */
.of-srcs { display: grid; grid-template-columns: 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); }

/* FAQ por zona */
.of-faqs { display: flex; flex-direction: column; gap: 10px; }
.of-faq { background: var(--card); border: 1px solid var(--bd); border-radius: 12px; padding: 16px 18px; }
.of-faq-tag { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .06em; color: var(--teal);
  background: color-mix(in srgb, var(--teal) 10%, transparent); border-radius: 5px; 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); }