/* G-CERTI inner pages: components shared by norma, diplomatura, pais, transicion and trust-center.
   Builds on gc.css (tokens, header, footer, buttons, cards). Single light look with ink scenes, like the home. */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light}
[hidden]{display:none!important}
body{background:var(--paper)}

/* ---------- page hero: ink scene, breadcrumb, title with the red node, lead, facts, one row of actions ---------- */
.ph{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:radial-gradient(70% 90% at 82% 30%,rgba(36,54,82,.5),transparent 66%),radial-gradient(40% 50% at 80% 40%,rgba(214,0,12,.1),transparent 72%),var(--ink);border-radius:0 0 var(--R) var(--R)}
.ph-in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4.4vw,80px);align-items:center;padding-block:clamp(22px,2.4vw,34px) clamp(48px,5.6vw,92px)}
.ph-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2vw,26px);min-width:0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 clamp(14px,2vw,30px);font-size:13px;line-height:1.3;color:var(--bone-66)}
.crumbs a{color:var(--bone-84);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li + li::before{content:"";width:5px;height:5px;border-right:1.4px solid var(--bone-66);border-top:1.4px solid var(--bone-66);transform:rotate(45deg)}
.crumbs [aria-current]{color:#fff}
.ph h1{font-size:clamp(46px,6.2vw,100px);font-weight:500;line-height:.9;letter-spacing:-.055em;color:#fff;text-wrap:balance}
.ph h1 small{display:block;margin-bottom:.32em;font-size:.3em;font-weight:500;letter-spacing:-.01em;line-height:1.1;color:var(--bone-84)}
.ph-lead{max-width:38ch;font-size:clamp(17px,1.4vw,21px);line-height:1.45;color:var(--bone-84)}
.ph-meta{display:flex;flex-wrap:wrap;gap:8px}
.tp{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:0 15px;border:1px solid rgba(245,241,234,.18);border-radius:999px;background:rgba(245,241,234,.05);font-size:13.5px;font-weight:500;line-height:1.2;color:#fff;white-space:nowrap}
.tp svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--red-lt);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tp .fl{--fs:24px;margin-left:-8px}
.tp--hot{border-color:rgba(240,48,59,.55);background:rgba(214,0,12,.16)}
.tp--hot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red-lt);box-shadow:0 0 0 3px rgba(240,48,59,.25)}
.ph-media{position:relative;margin:0;border-radius:var(--R);overflow:hidden;background:var(--sunk);aspect-ratio:4/3.1;box-shadow:0 40px 90px rgba(0,0,0,.45)}
.ph-media img{width:100%;height:100%;object-fit:cover}
.ph-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,16,28,0) 45%,rgba(7,16,28,.8))}
.ph-panel{position:relative;padding:clamp(20px,2.2vw,30px);border:1px solid rgba(245,241,234,.13);border-radius:var(--R);background:rgba(10,18,30,.62);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
/* a glass card that sits on the photo */
.ph-over{position:absolute;left:clamp(14px,1.8vw,22px);right:clamp(14px,1.8vw,22px);bottom:clamp(14px,1.8vw,22px);z-index:1;display:grid;gap:10px;padding:16px 18px;border:1px solid rgba(245,241,234,.2);border-radius:20px;background:rgba(9,16,27,.66);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);color:#fff}

/* switcher between records of the same kind (norms, diplomas, countries) */
.sw{display:flex;gap:8px;margin:0 calc(var(--gut) * -1);padding:2px var(--gut) 4px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut)}
.sw::-webkit-scrollbar{display:none}
.sw a{flex:none;display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 16px;border:1px solid rgba(245,241,234,.2);border-radius:999px;font-size:14px;font-weight:600;line-height:1;color:var(--bone-84);text-decoration:none;white-space:nowrap;scroll-snap-align:start;transition:background .2s,border-color .2s,color .2s}
.sw a:hover{border-color:rgba(245,241,234,.6);color:#fff}
.sw a[aria-current]{background:#fff;border-color:#fff;color:var(--ink)}
.sw .fl{--fs:26px;margin-left:-10px}
.sw small{font-weight:500;opacity:.7}

/* sticky sub-navigation under the header */
.snav{position:sticky;top:var(--hd,73px);z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.snav-in{display:flex;align-items:center;gap:6px;min-height:58px;overflow-x:auto;scrollbar-width:none}
.snav-in::-webkit-scrollbar{display:none}
.snav a:not(.btn){flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:999px;font-size:14px;font-weight:500;color:#25292f;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.snav a:not(.btn):hover{background:var(--mist)}
.snav a.on{background:var(--ink);color:#fff}
.snav a.on:hover{background:var(--ink)}
.snav .btn{flex:none;margin-left:auto;min-height:40px;padding:0 18px;font-size:14px}

/* sections */
.s--tight{padding-block:clamp(56px,6.4vw,104px)}
.s--mist{background:var(--mist)}
.lead{max-width:56ch;font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:var(--body)}
.s--ink .lead{color:var(--bone-84)}
.h3{font-size:clamp(22px,1.8vw,28px);font-weight:500;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.s--ink .h3{color:#fff}
.src{margin-top:16px;font-size:12.5px;line-height:1.45;color:var(--mute)}
.src a{color:inherit;text-underline-offset:3px}
.s--ink .src,.ph .src{color:var(--bone-66)}

/* key facts of a record, as label and value pairs */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));margin:0;border-top:1px solid var(--line)}
.facts > div{display:grid;align-content:start;gap:6px;padding:16px 18px 16px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:13px;font-weight:500;color:var(--mute)}
.facts dd{margin:0;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.ph .facts,.s--ink .facts{border-color:var(--hair)}
.ph .facts > div,.s--ink .facts > div{border-color:var(--hair)}
.ph .facts dt,.s--ink .facts dt{color:var(--bone-66)}
.ph .facts dd,.s--ink .facts dd{color:#fff}

/* figures with their source */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.kpi{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,1.8vw,24px);border:1px solid var(--line);border-radius:var(--r);background:#fff}
.kpi b{font-size:clamp(40px,4.2vw,64px);font-weight:300;line-height:.95;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi span{font-size:14.5px;line-height:1.4;color:var(--body)}
.kpi small{margin-top:auto;font-size:12px;line-height:1.35;color:var(--mute)}
.kpi--hi{border-color:var(--ink);background:radial-gradient(500px 260px at 100% 0%,rgba(214,0,12,.2),transparent 65%),var(--ink)}
.kpi--hi b{color:#fff}.kpi--hi span{color:var(--bone-84)}.kpi--hi small{color:var(--bone-66)}
.s--ink .kpi{border-color:var(--hair);background:rgba(245,241,234,.04)}
.s--ink .kpi b{color:#fff}.s--ink .kpi span{color:var(--bone-84)}.s--ink .kpi small{color:var(--bone-66)}

/* a sequence without numbers: the line carries the order */
.steps{--n:5;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0;margin:0;padding:0}
.step{position:relative;display:flex;flex-direction:column;gap:8px;padding:34px 22px 0 0}
.step::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line)}
.step:last-child::before{right:auto;width:24px}
.step::after{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.step:first-child::after{background:var(--red);box-shadow:0 0 0 4px rgba(214,0,12,.18)}
.step b{font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.step p{font-size:14.5px;line-height:1.5;color:var(--body)}
.s--ink .step::before{background:var(--hair)}
.s--ink .step::after{background:var(--ink);box-shadow:inset 0 0 0 2px rgba(245,241,234,.7)}
.s--ink .step:first-child::after{background:var(--red-lt);box-shadow:0 0 0 4px rgba(240,48,59,.25)}
.s--ink .step b{color:#fff}.s--ink .step p{color:var(--bone-84)}

/* questions and answers */
.faq{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:16px 0;font-size:clamp(17px,1.35vw,20px);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink);list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:linear-gradient(var(--ink),var(--ink)) center/12px 1.6px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.6px 12px no-repeat;transition:transform .35s var(--ease),background-color .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover::after{border-color:var(--ink)}
.faq .ans{max-width:70ch;padding:0 50px 22px 0;font-size:16px;line-height:1.6;color:var(--body)}
.faq .ans p + p{margin-top:10px}

/* surfaces */
.card{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2vw,28px);border:1px solid var(--line);border-radius:var(--r);background:#fff}
.card--ink{border-color:var(--ink);background:radial-gradient(600px 300px at 100% 0%,rgba(214,0,12,.2),transparent 65%),var(--ink);color:#fff}
.card--ink .h3{color:#fff}
.card--mist{border-color:transparent;background:var(--mist)}
.s--ink .card{border-color:var(--hair);background:rgba(245,241,234,.035);color:var(--bone-84)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center}

/* lists with the red node as marker */
.list{display:grid;gap:12px}
.list li{position:relative;padding-left:22px;font-size:16px;line-height:1.5;color:var(--body)}
.list li::before{content:"";position:absolute;left:2px;top:.58em;width:7px;height:7px;border-radius:50%;background:var(--red)}
.list b{color:var(--ink);font-weight:600}
.s--ink .list li,.card--ink .list li{color:var(--bone-84)}
.s--ink .list b,.card--ink .list b{color:#fff}
.chk{display:grid;gap:12px}
.chk li{display:flex;gap:12px;font-size:15.5px;line-height:1.45;color:var(--body)}
.chk li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:#e4f0ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%230e7a5f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.s--ink .chk li,.card--ink .chk li{color:var(--bone-84)}

/* tables */
.tbl-w{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.4;font-variant-numeric:tabular-nums}
.tbl th{padding:14px 16px;border-bottom:1px solid var(--line);font-size:13px;font-weight:500;text-align:left;color:var(--mute);white-space:nowrap}
.tbl td{padding:15px 16px;border-bottom:1px solid var(--line);color:var(--text);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:600;color:var(--ink)}
.tbl .num{text-align:right}

/* bars drawn from data (country or norm figures) */
.hbars{display:grid;gap:12px}
.hbar{display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr) auto;align-items:center;gap:14px;font-size:14.5px;color:var(--text)}
.hbar i{position:relative;height:12px;border-radius:6px;background:var(--mist)}
.hbar i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v)*100%);min-width:4px;border-radius:inherit;background:#9aa3ae;transform-origin:left;transition:transform 1.1s var(--ease) .1s}
.hbar--hi i::after{background:var(--red)}
.hbar b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.rv-pre .hbar i::after{transform:scaleX(0)}
.s--ink .hbar{color:var(--bone-84)}
.s--ink .hbar i{background:rgba(245,241,234,.08)}
.s--ink .hbar i::after{background:rgba(245,241,234,.55)}
.s--ink .hbar--hi i::after{background:var(--red-lt)}
.s--ink .hbar b{color:#fff}

/* forms (presentational; real submissions go to gcerti.org) */
.fm{display:grid;gap:16px}
.fm-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fld{display:grid;gap:8px;min-width:0}
.fld > span,.fld legend{font-size:13.5px;font-weight:600;color:var(--ink)}
.fld input,.fld select,.fld textarea{width:100%;min-height:52px;padding:0 16px;border:1px solid #b7bdc6;border-radius:14px;background:#fff;font:inherit;font-size:16px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.fld textarea{min-height:120px;padding:14px 16px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px rgba(7,16,28,.08)}
fieldset.fld{margin:0;padding:0;border:0}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative;display:inline-flex}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font-size:14.5px;font-weight:500;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.seg input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.seg input:focus-visible + span{outline:3px solid var(--red);outline-offset:3px}
.fm-note{font-size:12.5px;line-height:1.45;color:var(--mute)}

/* reveal on scroll (driven by gc.js; nothing hides when motion is reduced) */
.rv-pre{opacity:0;transform:translateY(20px)}
.rv-in{transition:opacity .8s ease,transform .9s var(--ease)}
[data-reveal="stagger"].rv-pre{opacity:1;transform:none}
[data-reveal="stagger"].rv-pre > *{opacity:0;transform:translateY(20px)}
[data-reveal="stagger"].rv-in > *{transition:opacity .7s ease calc(var(--k,0)*70ms),transform .8s var(--ease) calc(var(--k,0)*70ms)}

/* closing band reuses .fin from the home; this variant has no photo */
.fin--solo .fin-in{grid-template-columns:minmax(0,1fr)}
.fin--solo .fin-copy{order:0}
@media(max-width:820px){.fin--solo{padding-top:clamp(64px,14vw,96px)}}

/* every group of actions stays on one row; on phones the two buttons share the width */
.btns{flex-wrap:nowrap}
@media(max-width:560px){
  .btns .btn{flex:1 1 auto;justify-content:center;min-width:0;padding:0 14px;gap:8px;font-size:14.5px}
  .btn .bl{display:none}
  .btn .bs{display:inline}
}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .ph-in{grid-template-columns:minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .step{padding:0 0 26px 34px}
  .step::before{left:6px;right:auto;top:12px;bottom:0;width:2px;height:auto}
  .step:last-child::before{display:none}
  .step::after{top:3px}
}
@media(max-width:820px){
  .ph-in{padding-block:18px 56px}
  .ph-media{aspect-ratio:16/10}
  .grid2,.grid3{grid-template-columns:minmax(0,1fr)}
  .fm-row{grid-template-columns:minmax(0,1fr)}
  .snav .btn{display:none}
  .faq .ans{padding-right:0}
}
@media(max-width:460px){
  .tp{min-height:34px;padding:0 12px;font-size:13px}
  .hbar{grid-template-columns:minmax(78px,104px) minmax(0,1fr) auto;gap:10px;font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
  .rv-pre,[data-reveal="stagger"].rv-pre > *{opacity:1!important;transform:none!important}
}