/* ===== Transferencia · page prefix tf- ===== */
main section[id]{scroll-margin-top:calc(var(--hd,73px) + 66px)}
.nb{white-space:nowrap}

/* hero: the photo carries a glass card with the change of body */
.tf-ph .ph-lead{max-width:40ch}
.tf-over p{font-size:14.5px;line-height:1.4;color:var(--bone-84)}
.tf-fl{display:flex;align-items:center;gap:10px}
.tf-fl span{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border:1px solid rgba(245,241,234,.28);border-radius:999px;font-size:13.5px;font-weight:600;color:#fff;white-space:nowrap}
.tf-fl span.on{border-color:#fff;background:#fff;color:var(--ink)}
.tf-fl i{position:relative;flex:1 1 auto;min-width:22px;max-width:120px;height:1.5px;background:rgba(245,241,234,.45)}
.tf-fl i::after{content:"";position:absolute;right:0;top:50%;width:8px;height:8px;margin-top:-4px;border-top:1.5px solid rgba(245,241,234,.6);border-right:1.5px solid rgba(245,241,234,.6);transform:rotate(45deg)}

/* qué se revisa: five cards, one per datum */
.tf-cks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.tf-cks > li{display:flex;min-width:0}
.tf-ck{display:flex;flex-direction:column;gap:10px;width:100%;padding:clamp(20px,2vw,26px);border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:border-color .25s,box-shadow .35s var(--ease),transform .35s var(--ease)}
.tf-ck:hover{border-color:var(--ink);box-shadow:0 18px 44px rgba(7,16,28,.08);transform:translateY(-2px)}
.tf-ck-ic{display:grid;place-items:center;width:48px;height:48px;margin-bottom:clamp(10px,1.6vw,22px);border:1px solid var(--line);border-radius:15px;background:var(--mist)}
.tf-ck-ic svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tf-ck h3{font-size:clamp(21px,1.7vw,25px);font-weight:500;line-height:1.08;letter-spacing:-.025em;color:var(--ink)}
.tf-ck b{font-size:15.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.tf-ck p{font-size:14.5px;line-height:1.5;color:var(--body)}

/* cómo avanza: the three-year cycle, drawn; the transfer joins the line and the cycle goes on */
.tf-av{border-radius:var(--R)}
.tf-cy-f{margin:0 0 clamp(40px,4.4vw,64px)}
.tf-cy{position:relative;width:100%;aspect-ratio:1200/250}
.tf-cy svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tf-cy-v{display:none}
.tf-cy path{fill:none;stroke-linecap:butt;stroke-linejoin:round}
.tf-cy .seg-a{stroke:#b4bcc6;stroke-width:3}
.tf-cy .seg-b,.tf-cy .br{stroke:var(--ink);stroke-width:4}
.tf-cy .nd{fill:#fff;stroke:var(--ink);stroke-width:2.5}
.tf-cy .nd--m{stroke:#9aa3ae}
.tf-cy .nd--s{fill:var(--ink);stroke:none}
.tf-cy .halo{fill:rgba(214,0,12,.14)}
.tf-cy .nd--tr{fill:var(--red);stroke:#fff;stroke-width:3}
.tf-cy-ls{margin:0;padding:0;list-style:none}
.tf-l{--tx:-50%;--ty:-100%;position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);transform:translate(var(--tx),var(--ty));font-size:15px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink);text-align:center;white-space:nowrap}
.tf-l small{display:block;margin-top:4px;font-size:13px;font-weight:500;color:var(--mute)}
.tf-l--m{color:var(--mute)}
.tf-l--tr{color:var(--red-act)}
.tf-l--c0{--x:0;--y:.304;--tx:0;text-align:left}
.tf-l--v1{--x:.3361;--y:.304}
.tf-l--tr{--x:.5;--y:.304}
.tf-l--v2{--x:.6572;--y:.304;--tx:0;text-align:left}
.tf-l--rn{--x:1;--y:.304;--tx:-100%;text-align:right}
.tf-l--ot{--x:0;--y:.488;--tx:0;--ty:0;text-align:left}
.tf-l--gc{--x:.265;--y:.848;--tx:-100%;--ty:-50%;text-align:right}
.tf-l--go{--x:.53;--y:.488;--tx:0;--ty:0;text-align:left}
.tf-cy-f figcaption{max-width:60ch;margin:clamp(14px,1.6vw,22px) 0 0;font-size:14.5px;line-height:1.5;color:var(--mute)}
/* the signature moment: the line draws in, the transfer node arrives, the cycle continues (static under reduced motion) */
.tf-cy.pre .seg-a,.tf-cy.pre .br,.tf-cy.pre .seg-b{stroke-dasharray:1 1.1;stroke-dashoffset:1.02}
.tf-cy.pre .nd,.tf-cy.pre .halo,.tf-cy.pre .tf-l{opacity:0}
.tf-cy.go .seg-a{stroke-dashoffset:0;transition:stroke-dashoffset .8s cubic-bezier(.45,0,.55,1) .1s}
.tf-cy.go .br{stroke-dashoffset:0;transition:stroke-dashoffset .7s cubic-bezier(.45,0,.55,1) .75s}
.tf-cy.go .seg-b{stroke-dashoffset:0;transition:stroke-dashoffset .8s cubic-bezier(.45,0,.55,1) 1.4s}
.tf-cy.go .nd,.tf-cy.go .halo{opacity:1;transition:opacity .3s ease var(--d,0s)}
.tf-cy.go .tf-l{opacity:1;transition:opacity .5s ease var(--d,0s)}

.tf-wr{display:flex;align-items:flex-start;gap:8px;margin-top:4px;font-size:13.5px;line-height:1.4;color:var(--mute)}
.tf-wr svg{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:var(--red);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tf-wr b{color:var(--ink);font-weight:600}
.tf-av-ft{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 40px;margin-top:clamp(30px,3.4vw,48px);padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--line)}
.tf-note{max-width:42ch;font-size:clamp(17px,1.3vw,19px);font-weight:500;line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
.tf-av-ft .src{max-width:50ch;margin:0}

/* ISO 9001:2026: three lines, dates first */
.tf-ed-c{display:grid;gap:22px;justify-items:start}
.tf-ed-c .lead{max-width:34ch}
.tf-ed{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.tf-ed li{display:grid;grid-template-columns:minmax(150px,.44fr) minmax(0,1fr);gap:8px clamp(18px,2.6vw,40px);align-items:start;padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--hair)}
.tf-ed b{font-size:clamp(28px,2.6vw,40px);font-weight:400;line-height:1;letter-spacing:-.035em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.tf-ed li.hot b{color:var(--red-lt)}
.tf-ed p{font-size:16px;line-height:1.5;color:var(--bone-84)}
.tf-ed-w .src{margin-top:18px}

/* ya certificado: the assigned executive and what is coordinated with them */
.tf-cl{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:16px;align-items:stretch}
.tf-ex{gap:16px;padding:clamp(24px,2.8vw,40px)}
.tf-ex .h3{font-size:clamp(24px,2.1vw,32px)}
.tf-ex p{max-width:44ch;font-size:16.5px;line-height:1.55;color:var(--bone-84)}
.tf-ex-n{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.4;color:var(--bone-66)}
.tf-ex-n svg{flex:none;width:16px;height:16px;margin-top:1px;fill:none;stroke:var(--red-lt);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tf-ex .btns{margin-top:auto;padding-top:12px}
.tf-rows{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.tf-row{display:flex;align-items:center;gap:16px;padding:clamp(18px,1.8vw,24px);border:1px solid var(--line);border-radius:var(--r);background:#fff}
.tf-row > div{display:grid;gap:5px;min-width:0}
.tf-row-ic{display:grid;place-items:center;flex:none;width:48px;height:48px;border:1px solid var(--line);border-radius:15px;background:var(--mist)}
.tf-row-ic svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tf-row b{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.tf-row p{font-size:15px;line-height:1.5;color:var(--body)}

/* preguntas */
.tf-qa{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(28px,4vw,72px);align-items:start}
.tf-qa-h{position:sticky;top:calc(var(--hd,73px) + 86px);display:grid;gap:20px;justify-items:start}
.tf-qa .ans .tl{margin-top:6px;min-height:36px;font-size:15px}

@media(max-width:1180px){
  .tf-cks{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tf-cks > li{grid-column:span 2}
  .tf-cks > li:nth-child(n+4){grid-column:span 3}
}
@media(max-width:900px){
  .tf-l{font-size:14px}
  .tf-cl,.tf-qa{grid-template-columns:minmax(0,1fr)}
  .tf-qa-h{position:static}
  .tf-ed li{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  .tf-cks{grid-template-columns:minmax(0,1fr);gap:12px}
  .tf-cks > li,.tf-cks > li:nth-child(n+4){grid-column:auto}
  .tf-ck{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:6px;padding:18px}
  .tf-ck-ic{grid-row:1/4;width:44px;height:44px;margin:0;border-radius:14px}
  .tf-ck h3,.tf-ck b,.tf-ck p{grid-column:2}
  .tf-ck h3{font-size:21px}
  .tf-ck p{font-size:14.5px}
  /* the cycle turns vertical: the line runs down the left, the labels sit to its right */
  .tf-cy{max-width:420px;margin:0;aspect-ratio:360/620}
  .tf-cy-h{display:none}
  .tf-cy-v{display:block}
  .tf-l{--tx:0;--ty:-50%;font-size:15px;text-align:left}
  .tf-l--c0{--x:.228;--y:.0645}
  .tf-l--v1{--x:.228;--y:.3548}
  .tf-l--tr{--x:.228;--y:.5}
  .tf-l--v2{--x:.228;--y:.6452}
  .tf-l--rn{--x:.228;--y:.9355;--tx:0;text-align:left}
  .tf-l--ot{--x:.228;--y:.17;--ty:-50%}
  .tf-l--gc{--x:.7778;--y:.255;--tx:-50%;--ty:-100%;text-align:center}
  .tf-l--go{--x:.228;--y:.79;--ty:-50%}
  .tf-row{padding:16px}
  .tf-row-ic{width:44px;height:44px;border-radius:14px}
}