:root{
  --paper:#FAF8F4; --card:#FFFFFF; --ink:#15181A; --body:#3A4247; --mut:#6B7479; --faint:#9AA2A7;
  --rule:#E4DFD6; --rule2:#EFEBE4; --deep:#12161A; --deep2:#1B2126;
  --blue:#1B3A6B; --gold:#B8891A; --grn:#2E7D5B; --amb:#B5751A; --red:#B3261E;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:840px;margin:0 auto;padding:0 30px}
.wrap.wide{max-width:1040px}
a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(27,58,107,.28)}
a:hover{border-bottom-color:var(--blue)}
strong{color:var(--ink);font-weight:640}
img,video{max-width:100%}

body[data-lang="es"] [data-l="en"]{display:none!important}
body[data-lang="en"] [data-l="es"]{display:none!important}

/* lang toggle */
.toggle{position:relative;z-index:100;display:flex;
  background:rgba(12,16,20,.82);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);
  border-radius:22px;padding:3px;box-shadow:0 3px 14px rgba(0,0,0,.28)}
.toggle button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:6px 14px;
  border:0;border-radius:20px;background:transparent;color:#98A2A8;cursor:pointer;font-weight:600}
.toggle button.on{background:#fff;color:#12161A}

/* hero — animated mosaic: black → faces → flag → Colombia.
   Default (no JS) is the final state; JS adds .anim (initial state) then .go (play) once the first image has loaded. */
.hero{position:relative;background:#000;color:#fff;min-height:min(92vh,900px);display:flex;align-items:flex-end;overflow:hidden}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:150px}
.mosaic{position:absolute;inset:0;transform-origin:50% 50%}
.layer{position:absolute;inset:0;background:#000 center/cover no-repeat}
.layer.mono{background-image:url(hero-mono.jpg)}
.layer.flag{background-image:url(hero-flag.jpg)}
.layer.map{background-image:url(hero-map.jpg)}
.cells{position:absolute;inset:0;display:none;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(9,1fr)}
.cells i{display:block;background:#000}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.45) 62%,rgba(0,0,0,.9) 100%)}
.hero h1{font-size:clamp(38px,7.2vw,88px);text-shadow:0 2px 18px rgba(0,0,0,.55)}
.hero h1 em{text-shadow:none;filter:drop-shadow(0 2px 14px rgba(0,0,0,.7))}
/* initial state */
.hero.anim .layer.flag{clip-path:inset(0 0 100% 0)}
.hero.anim .layer.map{opacity:0}
.hero.anim .cells{display:grid}
.hero.anim .pre,.hero.anim h1,.hero.anim .kicker,.hero.anim .hmeta,.hero.anim .flagline{opacity:0;transform:translateY(16px)}
/* play */
.hero.go .mosaic{animation:kb 14s ease-out forwards}
.hero.go .layer.flag{animation:wipe 1.4s cubic-bezier(.65,0,.2,1) 2.1s forwards}
.hero.go .layer.map{animation:fadein 1.3s ease 3.9s forwards}
.hero.go .cells i{animation:cellout .7s ease forwards;animation-delay:var(--d)}
.hero.go .pre,.hero.go h1,.hero.go .kicker,.hero.go .hmeta,.hero.go .flagline{animation:rise .9s ease forwards}
.hero.go .flagline{animation-delay:4.2s}.hero.go .pre{animation-delay:4.3s}.hero.go h1{animation-delay:4.5s}.hero.go .kicker{animation-delay:4.8s}.hero.go .hmeta{animation-delay:5.1s}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes fadein{to{opacity:1}}
@keyframes cellout{to{opacity:0}}
@keyframes rise{to{opacity:1;transform:none}}
@media(max-width:740px){
  .layer.mono{background-image:url(hero-mono-1280.jpg)}
  .layer.flag{background-image:url(hero-flag-1280.jpg)}
  .layer.map{background-image:url(hero-map-1280.jpg)}
  .cells{grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(12,1fr)}
  .shade{background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.3) 30%,rgba(0,0,0,.82) 58%,rgba(0,0,0,.96) 100%)}
  .hero .kicker{font-size:17px}
  .hero{min-height:100svh}
}
.flagline{display:flex;height:5px;width:112px;border-radius:3px;overflow:hidden;margin-bottom:22px}
.flagline i{display:block;height:100%}
.flagline i:nth-child(1){background:#FCD116;flex:2}
.flagline i:nth-child(2){background:#123C8F;flex:1}
.flagline i:nth-child(3){background:#CE1126;flex:1}
.pre{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#E2B65C;margin:0 0 14px;font-weight:600}
h1{font-size:clamp(35px,6.4vw,60px);line-height:1.08;margin:0 0 18px;letter-spacing:-.03em;
  font-weight:800;text-transform:uppercase;color:#fff}
h1 em{font-style:normal;display:inline-block;padding-bottom:.09em;
  background:linear-gradient(180deg,#FCD116 0 40%,#3A6FCC 40% 70%,#E03A48 70% 100%);
  background-size:100% calc(100% - .09em);background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.kicker{font-size:19px;color:#B9C2C8;max-width:56ch;margin:0 0 28px;line-height:1.5}
.hmeta{display:flex;gap:12px 28px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:#7C868C;padding-bottom:36px}
.hmeta b{color:#C3CBD0;font-weight:600}
.hmeta .ok{color:#7FD1A6}

/* video stage */
.stage{background:var(--deep2);padding:0 0 40px;border-bottom:1px solid #262D33}
.stage .wrap{max-width:1000px}
.stage video{width:100%;display:block;border-radius:11px;background:#000;border:1px solid #2A3238}
.vcap{font-size:13px;color:#7C868C;margin-top:11px;line-height:1.5;display:flex;
  gap:8px 24px;flex-wrap:wrap;justify-content:space-between}
.vcap b{color:#A8B1B6;font-weight:600}

/* ribbon */
.ribbon{background:#FFF1DC;border-bottom:1px solid #EBD3A8;border-top:1px solid #EBD3A8}
.ribbon .wrap{padding:15px 30px;display:flex;gap:12px;align-items:flex-start}
.ribbon .dot{width:8px;height:8px;border-radius:50%;background:var(--amb);flex-shrink:0;margin-top:8px}
.ribbon p{margin:0;font-size:14.5px;color:#6B5518;line-height:1.5}
.ribbon b{color:#4A3A0E}

/* aviso permanente: el movimiento no recibe donaciones */
.nodon{background:var(--deep);color:#CBD3D8;border-top:3px solid #FCD116;
  border-bottom:1px solid rgba(255,255,255,.10)}
.nodon .wrap{padding:16px 30px;display:flex;gap:15px;align-items:flex-start;flex-wrap:wrap}
.nodon .tag{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:#12161A;background:#FCD116;padding:4px 8px;border-radius:4px;
  flex-shrink:0;margin-top:2px}
.nodon p{margin:0;font-size:14.5px;line-height:1.55;flex:1 1 320px;max-width:86ch}
.nodon b{color:#fff;font-weight:700}
.nodon a{color:#FCD116;text-decoration:none;border-bottom:1px solid rgba(252,209,22,.45)}
.nodon a:hover{border-bottom-color:#FCD116}
@media(max-width:740px){.nodon .wrap{padding:14px 20px;gap:10px}.nodon p{font-size:13.5px}}

/* sections */
section{padding:52px 0;border-bottom:1px solid var(--rule)}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin:0 0 12px;display:flex;align-items:center;gap:11px}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--rule)}
h2{font-size:clamp(26px,3.8vw,35px);line-height:1.16;margin:0 0 16px;letter-spacing:-.024em;
  font-weight:740;color:var(--ink)}
h3{font-size:18px;margin:32px 0 9px;letter-spacing:-.012em;font-weight:700;color:var(--ink)}
p{margin:0 0 16px}
.lead{font-size:19px;line-height:1.55;color:var(--ink);max-width:60ch}

/* figures */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:24px 0 0;
  background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.fig{background:var(--card);padding:18px 16px}
.fig .n{font-size:clamp(24px,3.6vw,31px);font-weight:750;color:var(--ink);letter-spacing:-.035em;
  line-height:1.05;margin-bottom:6px;font-variant-numeric:tabular-nums}
.fig .n small{font-size:.5em;font-weight:600;color:var(--mut)}
.fig .l{font-size:12.5px;color:var(--mut);line-height:1.4}
.story p{max-width:66ch}

/* format cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0 0;align-items:start}
.card{background:var(--card);border:1px solid var(--rule);border-radius:13px;overflow:hidden}
.card.feature{grid-column:1/-1}
.card.feature .ttl{font-size:21px}
.card .media{background:#0E1114;position:relative}
.card .media video,.card .media img{display:block;width:100%;height:auto}
.card .media.empty{aspect-ratio:16/9;display:grid;place-items:center;background:
  repeating-linear-gradient(135deg,#F1EDE6 0 10px,#EAE5DC 10px 20px);color:var(--mut);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:20px}
.card .body{padding:18px 20px 20px}
.card .ttl{font-size:18px;font-weight:720;color:var(--ink);letter-spacing:-.014em;line-height:1.25;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.card .sub{font-size:14px;color:var(--mut);margin:4px 0 12px}
.specs{display:flex;flex-wrap:wrap;gap:6px}
.specs span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--body);
  background:#F3F0EA;border:1px solid var(--rule);border-radius:6px;padding:4px 8px;white-space:nowrap}
.card .cap{font-size:12.5px;color:var(--faint);margin:12px 0 0;line-height:1.45}
.badge{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;padding:4px 8px;border-radius:5px;line-height:1}
.badge.amb{background:#FFF1DC;color:#7A5A16;border:1px solid #EBD3A8}
.badge.grn{background:#E6F3EC;color:#22624A;border:1px solid #C6E2D3}

/* spec table */
.tbl{margin:26px 0 0;border:1px solid var(--rule);border-radius:11px;background:var(--card);overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:13.5px}
th,td{padding:11px 14px;text-align:left;border-top:1px solid var(--rule2);vertical-align:top}
th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  border-top:0;font-weight:600;background:#FBF9F5}
td.mono{font-family:var(--mono);font-size:12px;color:var(--body);white-space:nowrap}
td.city{color:var(--ink);font-weight:600}
tr.pend td{color:var(--mut)}
.tnote{font-size:13.5px;color:var(--mut);margin:14px 0 0;line-height:1.5}

/* locations: one block per city — map (Leaflet, vendored in assets/leaflet) + address list */
.legend{display:flex;gap:8px 22px;flex-wrap:wrap;margin:18px 0 0;font-size:13px;color:var(--mut)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:12px;height:12px;border-radius:50%;background:var(--ink);border:2px solid #fff;box-shadow:0 0 0 1px var(--rule)}
.legend i.big{background:var(--blue)}
.cityblock{margin:22px 0 0;border:1px solid var(--rule);border-radius:13px;background:var(--card);overflow:hidden}
.cityhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap;
  padding:16px 20px 13px;border-bottom:1px solid var(--rule2)}
.cityhead h3{margin:0;font-size:20px}
.cityhead .cnt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.cityhead .cnt button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--blue);background:none;
  border:0;border-bottom:1px solid rgba(27,58,107,.28);padding:0;margin-left:14px;cursor:pointer}
.citygrid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.cmap{min-height:460px;background:#EDEAE3;position:relative;z-index:0;font-family:var(--sans)}
.locs{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule2)}
.loc{display:flex;gap:13px;padding:13px 18px;border-top:1px solid var(--rule2);cursor:pointer;transition:background .15s}
.loc:first-child{border-top:0}
.loc:hover{background:#FBF9F5}
.loc.on{background:#F3F0EA}
.loc .pn{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;margin-top:1px;
  font-family:var(--mono);font-size:11.5px;font-weight:700;display:grid;place-items:center}
.loc.big .pn{background:var(--blue)}
.loc .nm{font-size:15px;font-weight:650;color:var(--ink);line-height:1.3;letter-spacing:-.008em}
.loc .ad{font-size:13.5px;color:var(--body);line-height:1.45;margin-top:2px}
.loc .ty{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.loc .gm{display:inline-block;margin-top:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}
.mapnote{font-size:13px;color:var(--faint);margin:12px 0 0;line-height:1.5}
/* pins */
.pinwrap{background:transparent;border:0}
.pin{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;
  border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35);font-family:var(--mono);font-size:12px;font-weight:700;
  line-height:1;transition:transform .15s,box-shadow .15s}
.pin.big{background:var(--blue)}
.pin.on{transform:scale(1.18);box-shadow:0 0 0 5px rgba(27,58,107,.22),0 2px 8px rgba(0,0,0,.35)}
.leaflet-container{font-family:var(--sans)}
.leaflet-tile{filter:saturate(.62) contrast(.97)}
.leaflet-popup-content-wrapper{border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.leaflet-popup-content{margin:13px 16px;font-size:13.5px;line-height:1.45;color:var(--body)}
.leaflet-popup-content b{display:block;color:var(--ink);font-weight:650;margin-bottom:2px}
.leaflet-popup-content a{font-family:var(--mono);font-size:11.5px;display:inline-block;margin-top:6px}
.leaflet-bar a{color:var(--ink)}
.leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.78);color:var(--mut)}
.leaflet-control-attribution a{border-bottom:0}

/* people */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:24px 0 0}
.person{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:20px;
  border-top:3px solid var(--ink)}
.person .nm{font-size:17.5px;font-weight:700;color:var(--ink);letter-spacing:-.012em;margin-bottom:3px}
.person .rl{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px}
.person p{font-size:14px;margin:0;line-height:1.5;color:var(--mut)}
.support{margin-top:14px}
.support .person{border-top-color:var(--rule);background:#F5F2ED}
.support .person .rl{color:var(--mut)}

/* beat strip */
.strip{display:flex;flex-wrap:wrap;gap:0;margin:22px 0 0;border:1px solid var(--rule);
  border-radius:11px;overflow:hidden;background:var(--card)}
.bt{flex:1;min-width:132px;padding:14px 13px;border-left:1px solid var(--rule)}
.bt:first-child{border-left:0}
.bt .t{font-family:var(--mono);font-size:10px;color:var(--gold);letter-spacing:.1em;margin-bottom:5px}
.bt p{font-size:13px;margin:0;line-height:1.42;color:var(--mut)}

/* flow */
.flow{display:flex;margin:24px 0 0;flex-wrap:wrap;border:1px solid var(--rule);border-radius:11px;
  overflow:hidden;background:var(--card)}
.node{flex:1;min-width:124px;padding:16px 12px;text-align:center;border-left:1px solid var(--rule)}
.node:first-child{border-left:0}
.node .n{font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.12em;margin-bottom:5px}
.node .v{font-size:13.5px;font-weight:650;color:var(--ink);line-height:1.32}
.node.hi{background:#F0F5FB}
.node.hi .v{color:var(--blue)}

/* note */
.note{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--blue);
  border-radius:10px;padding:20px;margin:24px 0}
.note .tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:9px;font-weight:700}
.note p{font-size:15.5px;margin:0}

/* steps */
.steps{margin-top:24px}
.step{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--rule)}
.step:first-child{border-top:0;padding-top:0}
.step .i{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--rule);
  display:grid;place-items:center;font-family:var(--mono);font-size:11.5px;color:var(--mut);
  background:var(--card);font-weight:600}
.step h4{margin:1px 0 4px;font-size:16px;color:var(--ink);font-weight:680}
.step p{margin:0;font-size:14.5px;color:var(--mut);line-height:1.5}

/* cta */
.cta{display:flex;gap:14px 22px;align-items:center;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-block;background:var(--ink);color:#fff;border:0;border-radius:10px;padding:14px 22px;
  font-weight:700;font-size:15.5px;letter-spacing:-.005em}
.btn:hover{background:#000;border:0}
.cta p{margin:0;font-size:14px;color:var(--mut);max-width:44ch;line-height:1.45}

/* status */
.status{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:24px 0 0;
  background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.st{background:var(--card);padding:16px 18px}
.st .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.st .v{font-size:15px;font-weight:650;color:var(--ink);line-height:1.35}
.st .v.ok::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--grn);margin-right:8px;vertical-align:1px}
.st .v.wait::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--amb);margin-right:8px;vertical-align:1px}

.contact{background:var(--deep);color:#C3CBD0;border-radius:14px;padding:30px;margin-top:28px}
.contact h3{color:#fff;margin:0 0 9px;font-size:21px}
.contact p{color:#9AA4AA;font-size:15.5px;margin-bottom:12px}
.contact p:last-child{margin-bottom:0}
.contact a{color:#7FA9E8;border-bottom-color:rgba(127,169,232,.3)}

footer{padding:46px 0 70px;color:var(--mut);font-size:13px;background:#F3F0EA;border-top:1px solid var(--rule)}
footer h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 18px;display:flex;align-items:center;gap:11px}
footer h4::before{content:"";width:20px;height:1px;background:var(--rule)}
.legal{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.legal div{font-size:12.5px;line-height:1.55;color:var(--mut)}
.legal b{display:block;color:var(--ink);font-weight:650;margin-bottom:3px;font-size:13px}
footer .fine{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);font-size:12px;color:var(--faint);line-height:1.55}
footer .fine p{margin:0 0 6px}
.person .nm a{color:inherit;border-bottom:1px solid var(--rule)}
.creative-video{margin:22px 0 0}
.creative-video video{width:100%;display:block;border-radius:11px;background:#000;border:1px solid var(--rule)}

@media(max-width:740px){
  .wrap{padding:0 20px}
  .figs{grid-template-columns:1fr 1fr}
  .status{grid-template-columns:1fr 1fr}
  .legal{grid-template-columns:1fr}
  section{padding:40px 0}
  .cards{grid-template-columns:1fr}
  .citygrid{grid-template-columns:1fr}
  .cmap{min-height:0;height:min(92vw,460px)}
  .locs{border-left:0;border-top:1px solid var(--rule2)}
  .cityhead .cnt button{margin-left:10px}
  .node,.bt{min-width:calc(50% - .5px)}
  .ribbon .wrap{padding:12px 20px}
  .hero{padding-top:62px}
  .vcap{flex-direction:column;gap:3px}
}
@media print{
  .toggle,.cmap,.cityhead .cnt button{display:none}
  .hero{background:#fff;color:#000;padding-top:16px}
  h1,.kicker{color:#000}
  .stage{background:#fff}
  section{page-break-inside:avoid;padding:22px 0}
  body{font-size:11pt}
}

/* ---- hub: navigation ---- */
.top{position:absolute;top:0;left:0;right:0;z-index:60;color:#fff}
.top .wrap{max-width:1180px;display:flex;align-items:center;justify-content:space-between;gap:14px 20px;padding:18px 30px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;border:0;font-weight:800;letter-spacing:-.01em;font-size:15px;text-transform:uppercase}
.brand .fl{display:flex;height:4px;width:44px;border-radius:2px;overflow:hidden}
.brand .fl i{display:block;height:100%}.brand .fl i:nth-child(1){background:#FCD116;flex:2}.brand .fl i:nth-child(2){background:#123C8F;flex:1}.brand .fl i:nth-child(3){background:#CE1126;flex:1}
.menu{display:flex;gap:4px 6px;flex-wrap:wrap;align-items:center}
.menu a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#E6EBEE;border:1px solid transparent;border-radius:20px;padding:7px 12px;text-decoration:none}
.menu a:hover,.menu a.on{border-color:rgba(255,255,255,.35);color:#fff}
.menu a.on{background:rgba(255,255,255,.12)}
.top .toggle{margin-left:6px}
@media(max-width:740px){
  .top .wrap{padding:14px 18px}
  .brand span:not(.fl){display:none}
  /* the wordmark is hidden here, so the flag stripe alone is the home link —
     give it a real touch target instead of a 4px-tall sliver */
  .brand{min-height:40px;align-items:center;padding-right:6px}
  .menu a{padding:10px 10px;font-size:10.5px}
  .menu{gap:2px}
}
/* page hero (inner pages) */
.phero{position:relative;background:#000;color:#fff;min-height:420px;display:flex;align-items:flex-end;overflow:hidden}
.phero .bgimg{position:absolute;inset:0;background:#000 center/cover no-repeat;filter:brightness(.42) saturate(.85)}
.phero .shade{background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.85) 100%)}
.phero .wrap{position:relative;z-index:2;width:100%;padding-top:130px;padding-bottom:40px}
.phero h1{font-size:clamp(32px,5.4vw,58px);text-transform:none;letter-spacing:-.025em;margin-bottom:12px}
.phero .kicker{margin-bottom:8px}
/* live strip */
.live{background:#0F3A2A;border-top:1px solid #1E5A42;border-bottom:1px solid #1E5A42;color:#DDEFE6}
.live .wrap{padding:16px 30px;display:flex;gap:14px 22px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.live p{margin:0;font-size:14.5px;line-height:1.5}
.live b{color:#fff}
.live .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#5FD39B;margin-right:9px;box-shadow:0 0 0 4px rgba(95,211,155,.2)}
.live nav{display:flex;gap:8px;flex-wrap:wrap}
.live nav a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:20px;padding:7px 13px;text-decoration:none}
.live nav a:hover{background:rgba(255,255,255,.1);border-color:#fff}
/* photos & placeholders */
.ph{position:relative;margin:0;border-radius:12px;overflow:hidden;background:#EAE5DC;border:1px solid var(--rule);aspect-ratio:16/9}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;font-size:12.5px;line-height:1.4;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))}
.ph.missing{display:grid;place-items:center;text-align:center;padding:20px;background:repeating-linear-gradient(135deg,#F1EDE6 0 10px,#EAE5DC 10px 20px)}
.ph.missing img{display:none}
.ph.missing figcaption{position:static;padding:0;background:none;color:var(--mut);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.6}
.ph.missing figcaption::before{content:"FOTO · PHOTO";display:block;font-weight:700;color:var(--ink);margin-bottom:6px}
.ph.missing figcaption::after{content:attr(data-file);display:block;margin-top:6px;color:var(--faint);letter-spacing:.04em;text-transform:none}
.band{position:relative;background:#000;overflow:hidden}
.band .ph{border-radius:0;border:0;aspect-ratio:21/9;background:#111}
.band .ph.missing{background:repeating-linear-gradient(135deg,#1A1D20 0 12px,#111 12px 24px);color:#8A949A}
.band .ph.missing figcaption{color:#98A2A8}.band .ph.missing figcaption::before{color:#fff}
.strip3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0 0}
.strip3 .ph{aspect-ratio:4/5}
.twocol{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start;margin-top:26px}
.twocol .ph{aspect-ratio:4/5}
/* cards used across pages */
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:26px 0 0}
.pr{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:18px;border-top:3px solid var(--ink)}
.pr .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--gold);margin-bottom:8px;font-weight:700}
.pr h4{margin:0 0 6px;font-size:16px;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.pr p{margin:0;font-size:13.5px;color:var(--mut);line-height:1.5}
.frames{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0 0}
.frames figure{margin:0;border-radius:11px;overflow:hidden;border:1px solid var(--rule);background:#000}
.frames img{display:block;width:100%;height:auto}
.frames figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);padding:9px 12px;background:var(--card)}
.actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:26px 0 0}
.act{background:var(--card);border:1px solid var(--rule);border-radius:13px;padding:20px 20px 18px}
.act .i{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;margin-bottom:12px}
.act.hi{border-color:#C9D8EC;background:#F4F8FC}
.act.hi .i{background:var(--blue)}
.act h4{margin:0 0 6px;font-size:16.5px;color:var(--ink);font-weight:700;letter-spacing:-.012em}
.act p{margin:0;font-size:14px;color:var(--mut);line-height:1.5}
.act a.more{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.formats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0 0}
.fmt{background:var(--card);border:1px solid var(--rule);border-radius:13px;overflow:hidden}
.fmt .ph{border-radius:0;border:0;border-bottom:1px solid var(--rule)}
.fmt .body{padding:18px 20px 20px}
.fmt .city{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;font-weight:700}
.fmt h4{margin:0 0 6px;font-size:17px;color:var(--ink);font-weight:720;letter-spacing:-.012em}
.fmt p{margin:0;font-size:14px;color:var(--mut);line-height:1.5}
.timeline{margin:26px 0 0;border-left:2px solid var(--rule);padding-left:22px}
.tl{position:relative;padding:0 0 22px}
.tl::before{content:"";position:absolute;left:-29px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--card);border:2px solid var(--ink)}
.tl .d{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;font-weight:700}
.tl p{margin:0;font-size:15.5px;line-height:1.55}
.cta{background:var(--deep);color:#fff;position:relative;overflow:hidden}
.cta .bgimg{position:absolute;inset:0;background:center/cover no-repeat;opacity:.62;filter:grayscale(1) brightness(1.12)}
/* the flag's own 2:1:1 bands, so amarillo · azul · rojo always show whatever the height */
.cta .wash{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.66;
  background:linear-gradient(180deg,#FCD116 0 50%,#123C8F 50% 75%,#CE1126 75% 100%)}
.cta .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.44),rgba(0,0,0,.3) 45%,rgba(0,0,0,.48))}
.cta .wrap{position:relative;z-index:2;padding:64px 30px;text-align:center}
.cta h2{color:#fff;margin-bottom:12px}
.cta p{color:#B9C2C8;max-width:56ch;margin:0 auto 24px;font-size:17px}
.cta .btn{background:#fff;color:#000}
.cta .btn:hover{background:#FCD116;color:#000}
/* form */
.form{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:28px;margin-top:26px}
.form .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:6px;font-weight:600}
.form input[type=text],.form input[type=email],.form textarea{width:100%;font:inherit;font-size:15.5px;color:var(--ink);background:#FBF9F5;border:1px solid var(--rule);border-radius:9px;padding:12px 13px}
.form input:focus,.form textarea:focus{outline:2px solid rgba(27,58,107,.35);border-color:var(--blue)}
.form textarea{min-height:110px;resize:vertical}
.form .full{grid-column:1/-1}
.form .checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:4px}
.form .checks label{display:flex;gap:10px;align-items:flex-start;font-family:var(--sans);font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--body);margin:0;font-weight:500;line-height:1.35}
.form .checks input{margin-top:3px;flex-shrink:0}
.form .row{display:flex;gap:14px 22px;align-items:center;flex-wrap:wrap;margin-top:20px}
.form button{background:var(--ink);color:#fff;border:0;border-radius:10px;padding:14px 24px;font-weight:700;font-size:15.5px;cursor:pointer;font-family:var(--sans)}
.form button:hover{background:#000}
.form .fine{font-size:12.5px;color:var(--faint);line-height:1.5;margin:0}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.next{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 0}
.nx{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:20px}
.nx .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.nx h4{margin:0 0 6px;font-size:16.5px;color:var(--ink);font-weight:700}
.nx p{margin:0;font-size:14px;color:var(--mut);line-height:1.5}
.agents{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:22px 0 0}
.agent{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:14px 16px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--ink);font-weight:600}
.agent small{display:block;font-family:var(--sans);font-weight:500;letter-spacing:0;color:var(--mut);font-size:12.5px;margin-top:4px}
/* hashtag band */
.tagband{background:var(--deep);color:#fff;overflow:hidden;border-top:1px solid #232A30;border-bottom:1px solid #232A30}
.tagband .wrap{max-width:1180px;padding:36px 30px;display:flex;align-items:center;justify-content:space-between;gap:16px 30px;flex-wrap:wrap}
.tagband .htag{font-size:clamp(26px,4.6vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1;margin:0;
  background:linear-gradient(180deg,#FCD116 0 40%,#3A6FCC 40% 70%,#E03A48 70% 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tagband p{margin:0;color:#B9C2C8;font-size:15px;max-width:44ch;line-height:1.5}
.tagband .handles{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#8A949A;margin-top:8px}
.tagband .handles a{color:#C3CBD0;border-bottom-color:rgba(255,255,255,.2)}
/* logo wall */
.logowall{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin:24px 0 0}
.lg{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:18px 16px;text-decoration:none;border-bottom:1px solid var(--rule);min-height:112px}
.lg:hover{border-color:var(--ink)}
.lg .box{height:38px;display:flex;align-items:center}
.lg .box img{max-height:38px;max-width:100%;object-fit:contain;display:block}
.lg.nologo .box{display:none}
.lg{font-family:var(--sans)}
.lg .nm{display:block;font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.012em;line-height:1.2}
.lg .rl{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);line-height:1.5;margin-top:auto}
.lg .rl b{color:var(--gold);font-weight:700;display:block}
.wallnote{font-size:13px;color:var(--faint);margin:14px 0 0;line-height:1.5}
/* agents */
.agents{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px;margin:24px 0 0}
.agent{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:18px;display:flex;gap:14px;
  text-decoration:none;border-bottom:1px solid var(--rule);font-family:var(--sans);align-items:flex-start}
.agent:hover{border-color:var(--ink)}
.agent .ic{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:#12161A;color:#E2B65C;display:grid;place-items:center}
.agent .ic svg{width:22px;height:22px;display:block}
.agent .nm{display:block;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.01em;line-height:1.3}
.agent .rl{display:block;font-family:var(--sans);font-size:13.5px;color:var(--mut);line-height:1.45;margin-top:6px;letter-spacing:0;text-transform:none}
.agent .rl em{font-style:normal;color:var(--faint);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:5px}
.stackline{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:22px 0 0;line-height:1.9}
.stackline b{color:var(--body);font-weight:600}
/* footer */
footer .links{display:flex;gap:6px 18px;flex-wrap:wrap;margin:0 0 18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
footer .links a{color:var(--body);border-bottom-color:var(--rule)}
footer .cols{display:grid;grid-template-columns:1.2fr 1fr;gap:18px 28px;font-size:13px;line-height:1.6}
footer .cols b{display:block;color:var(--ink);font-weight:650;margin-bottom:3px}
footer .behind{margin-top:22px;font-size:12px;color:var(--faint)}
footer .behind a{color:var(--faint);border-bottom-color:transparent}
footer .behind a:hover{color:var(--ink)}
@media(max-width:740px){
  .actions,.formats,.form .grid,.form .checks,.next,.twocol,footer .cols{grid-template-columns:1fr}
  .agents{grid-template-columns:1fr}
  .logowall{grid-template-columns:1fr 1fr}
  .tagband .wrap{padding:28px 20px}
  .frames,.strip3{grid-template-columns:1fr}
  .strip3 .ph,.twocol .ph{aspect-ratio:16/10}
  .live .wrap{padding:14px 20px}
  .phero .wrap{padding-top:110px}
  .band .ph{aspect-ratio:4/3}
}
@media(min-width:741px) and (max-width:1000px){.actions{grid-template-columns:1fr 1fr}}

/* ── faces wall ─────────────────────────────────────────────────────
   84 composite portraits. Grey by default; on hover each tile blooms
   into its flag band (yellow top half, then blue, then red), so moving
   across the wall paints the Colombian flag out of the faces.
   Band classes y/b/r are set geometrically in site.js; the values baked
   into the HTML are the 12-column fallback for no-JS. */
.rostros{background:var(--deep);border-bottom:1px solid #262D33;padding:52px 0 0;overflow:hidden}
.rostros .wrap{position:relative;z-index:2}
.rostros .eyebrow{color:#7C868C}
.rostros .eyebrow::before{background:#39424A}
.rostros h2{color:#fff}
.rostros .lead{color:#B9C2C8}
.rostros .lead b{color:#fff}
.facewall{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:2px;
  margin-top:32px;background:#0A0D10;border-top:1px solid #222930}
.face{position:relative;display:block;overflow:hidden;aspect-ratio:1;background:#0A0D10;
  isolation:isolate;border:0;padding:0;cursor:default}
.face img{width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.78) contrast(1.05);
  transition:filter .55s ease,transform .55s ease}
.face::after{content:"";position:absolute;inset:0;background:var(--fc,#FCD116);
  mix-blend-mode:color;opacity:0;transition:opacity .5s ease;pointer-events:none}
.face.y{--fc:#FCD116}
.face.b{--fc:#2E62CC}
.face.r{--fc:#E23744}
@media(hover:hover){
  .face:hover{z-index:3}
  .face:hover img{filter:brightness(1.08) contrast(1.02);transform:scale(1.07)}
  .face:hover::after{opacity:.95}
}
/* touch: no cursor, so the flag sits softly on the wall already */
@media(hover:none){
  .face img{filter:brightness(.92) contrast(1.02)}
  .face::after{opacity:.62}
}
.face:focus-visible{outline:2px solid #fff;outline-offset:-2px;z-index:4}
.face:focus-visible img{filter:brightness(1.08);transform:scale(1.07)}
.face:focus-visible::after{opacity:.95}
.facenote{font-size:13px;line-height:1.6;color:var(--mut);margin:18px 0 0;max-width:70ch}
.facenote b{color:var(--ink);font-weight:650}
.rostros .facenote{color:#8B949A;margin:0;padding:16px 0 26px}
.rostros .facenote b{color:#C3CBD0}
@media(min-width:1101px){.facewall{grid-template-columns:repeat(12,1fr)}}
@media(max-width:1100px){
  .facewall{grid-template-columns:repeat(7,1fr)}
  .facewall .face:nth-child(n+50){display:none}   /* 49 tiles = 7 rows */
}
@media(max-width:740px){
  .facewall{grid-template-columns:repeat(6,1fr);gap:1.5px}
  .face:nth-child(n+43){display:none}   /* 42 tiles = 7 rows on phones */
}
@media(prefers-reduced-motion:reduce){
  .face img{transition:filter .2s linear}
  .face:hover img,.face:focus-visible img{transform:none}
}
/* single-row strip (start-point) */
.facestrip{position:relative;display:grid;grid-template-columns:repeat(14,1fr);gap:2px;
  margin:26px 0 0;background:#0A0D10;border-radius:10px;overflow:hidden}
.facestrip .face{aspect-ratio:1}
.stripcap{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:10px 0 0}
@media(hover:none){.stripcap{font-size:10px}}
@media(max-width:1100px){.facestrip{grid-template-columns:repeat(8,1fr)}}
@media(max-width:740px){
  .facestrip{grid-template-columns:repeat(6,1fr)}
  .facestrip .face:nth-child(n+25){display:none}
}

.facehint{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:#E2B65C;margin:14px 0 0;display:flex;align-items:center;gap:9px}
.facehint::before{content:"";width:18px;height:1px;background:#5A4C2A}
@media(hover:none){.facehint{display:none}}

/* ── colour band ────────────────────────────────────────────────────
   The counterpoint to the faces wall: everyday Colombia, washed in the
   flag. Row heights carry the flag's own proportions — the yellow row is
   twice the height of the blue and red rows below it (50/25/25), which
   falls out of using half as many columns. The tint is baked into each
   file, so every row keeps its colour at any width. */
.colorband{background:var(--paper);border-bottom:1px solid var(--rule);padding:52px 0 0;overflow:hidden}
.cbands{margin-top:30px;background:#0A0D10;line-height:0}
.cb{display:grid;gap:0}
.cb-y{grid-template-columns:repeat(10,1fr)}
.cb-b,.cb-r{grid-template-columns:repeat(20,1fr)}
.cb span{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#0A0D10}
.cb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s ease,filter .55s ease}
@media(hover:hover){
  .cb span:hover{z-index:3}
  .cb span:hover img{transform:scale(1.09);filter:brightness(1.14) saturate(1.08)}
}
@media(max-width:1100px){
  .cb-y{grid-template-columns:repeat(8,1fr)}
  .cb-b,.cb-r{grid-template-columns:repeat(16,1fr)}
  .cb-y span:nth-child(n+9){display:none}
  .cb-b span:nth-child(n+17),.cb-r span:nth-child(n+17){display:none}
}
@media(max-width:740px){
  .cb-y{grid-template-columns:repeat(4,1fr)}
  .cb-b,.cb-r{grid-template-columns:repeat(8,1fr)}
  .cb-y span:nth-child(n+5){display:none}
  .cb-b span:nth-child(n+9),.cb-r span:nth-child(n+9){display:none}
}
@media(prefers-reduced-motion:reduce){.cb span:hover img{transform:none}}
.colorband .facenote{margin:0;padding:16px 0 26px}

/* ── screen mockups ─────────────────────────────────────────────────
   Simulations of the piece on the real screens, trimmed to the opening
   beats (portraits → flag → map). The closing frame is not shown. */
.pantallas-sim{background:var(--paper);border-bottom:1px solid var(--rule);padding:52px 0}
.simlead{display:block}
.simgrid{margin:28px 0 0}
.simgrid figure{margin:0 0 14px}
.simgrid video,.simgrid img{width:100%;display:block;background:#0A0D10;
  border:1px solid var(--rule);border-radius:12px}
.simgrid figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:9px 2px 0}
.simgrid figcaption b{color:var(--body);font-weight:600}
.simpair{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media(max-width:740px){.simpair{grid-template-columns:1fr}}

/* ── minimal (14 sep) ───────────────────────────────────────────────
   Empty photo slots stay in the HTML so that saving a JPG into
   assets/fotos/ with the right name still fills them — but until a
   photo exists they are hidden instead of showing a striped box. */
.ph.missing{display:none!important}
.band:has(.ph.missing){display:none}
.strip3:has(.ph.missing){gap:0}
.twocol:has(.ph.missing){grid-template-columns:1fr}

/* ── drop a message ─────────────────────────────────────────────────
   Deliberately not a form: one box, one optional handle, one button. */
.drop{margin-top:26px;max-width:620px}
.drop .hp{position:absolute;left:-9999px}
.drop textarea{width:100%;font:inherit;font-size:19px;line-height:1.5;color:var(--ink);
  background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:18px 18px;resize:vertical;
  min-height:104px}
.drop textarea::placeholder{color:var(--faint)}
.drop textarea:focus{outline:2px solid rgba(27,58,107,.3);border-color:var(--blue)}
.droprow{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.droprow input{flex:1 1 220px;font:inherit;font-size:15px;color:var(--ink);background:var(--card);
  border:1px solid var(--rule);border-radius:10px;padding:12px 14px}
.droprow input::placeholder{color:var(--faint)}
.droprow input:focus{outline:2px solid rgba(27,58,107,.3);border-color:var(--blue)}
.droprow button{flex:0 0 auto;font:inherit;font-weight:700;font-size:15.5px;letter-spacing:-.005em;
  background:var(--ink);color:#fff;border:0;border-radius:10px;padding:13px 26px;cursor:pointer}
.droprow button:hover{background:#000}
.dropnote{font-size:12.5px;line-height:1.55;color:var(--mut);margin:12px 0 0;max-width:58ch}

/* faces banner (mid-page CTA to rostros.html) — same shape as the closing
   CTA but without the flag wash, so the two don't read as the same block. */
.ctafaces .bgimg{opacity:.5;filter:grayscale(1) brightness(.95)}
.ctafaces .scrim{background:linear-gradient(180deg,rgba(10,13,16,.78),rgba(10,13,16,.62) 45%,rgba(10,13,16,.82))}
.ctafaces .flagline{margin:0 auto 18px}
.ctafaces .pre{color:#E2B65C}
.ctafaces .btn{background:#FCD116;color:#12161A}
.ctafaces .btn:hover{background:#fff;color:#000}

/* fine print — one quiet legal line under the colour band */
.legalnote{font-size:11px;line-height:1.5;color:var(--faint);margin:10px 0 0;
  letter-spacing:.005em;max-width:none}
.colorband .legalnote{padding:12px 0 24px;margin:0}

/* ── lightbox (rostros) ─────────────────────────────────────────────
   Tiles on the faces wall are buttons; clicking one opens the portrait
   large. The tiles are 320px, so the lightbox loads from rostros/lg/. */
.face{cursor:zoom-in;font:inherit;color:inherit}
.lbx[hidden]{display:none}
.lbx{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  gap:clamp(6px,2vw,26px);padding:clamp(12px,4vw,44px);
  background:rgba(8,10,12,.94);backdrop-filter:blur(6px)}
.lbx-fig{margin:0;max-width:min(760px,100%);display:flex;flex-direction:column;align-items:center}
.lbx-fig img{display:block;width:auto;max-width:100%;max-height:76vh;border-radius:12px;
  background:#0A0D10;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.lbx-fig figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:#8A949A;margin-top:14px;text-align:center;line-height:1.7;max-width:46ch}
.lbx-fig figcaption b{color:#C3CBD0;font-weight:600}
.lbx-fig figcaption .nt{display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:0;
  text-transform:none;color:#7C868C;margin-top:7px;line-height:1.5}
.lbx-x,.lbx-nav{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;
  border-radius:50%;cursor:pointer;display:grid;place-items:center;flex-shrink:0;padding:0;line-height:1}
.lbx-x:hover,.lbx-nav:hover{background:rgba(255,255,255,.18);border-color:#fff}
.lbx-x{position:absolute;top:16px;right:16px;width:42px;height:42px;font-size:26px}
.lbx-nav{width:48px;height:48px;font-size:30px}
.lbx-x:focus-visible,.lbx-nav:focus-visible{outline:2px solid #FCD116;outline-offset:3px}
@media(max-width:740px){
  .lbx{padding:14px;gap:4px}
  .lbx-nav{width:40px;height:40px;font-size:25px}
  .lbx-fig img{max-height:66vh}
}
@media(prefers-reduced-motion:no-preference){
  .lbx-fig img{animation:lbxin .22s ease}
  @keyframes lbxin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
}

/* the format table scrolls sideways on narrow screens — say so */
.tbl{position:relative}
@media(max-width:740px){
  .tbl::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none;
    border-radius:0 11px 11px 0;
    background:linear-gradient(90deg,rgba(255,255,255,0),var(--card))}
  .tblhint{display:block}
}
.tblhint{display:none;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:8px 0 0}

/* ── touch targets on phones ────────────────────────────────────────
   Audited at 360/390/414: nothing overflows sideways, but a few real
   controls were 15–25px tall. Inline links inside paragraphs are left
   at text height on purpose. */
@media(max-width:740px){
  .toggle button{padding:9px 16px;font-size:11px}
  .fit{padding:9px 12px;min-height:36px;display:inline-flex;align-items:center}
  footer .links{gap:2px 14px}
  footer .links a{display:inline-block;padding:8px 0}
  .lbx-x{width:46px;height:46px}
  .lbx-nav{width:46px;height:46px}
}

/* inline warning on the message box (no third-party captcha: honeypot +
   a couple of local checks, so nothing is loaded from anyone else) */
.droperr[hidden]{display:none}
.droperr{margin:12px 0 0;padding:11px 14px;border-radius:10px;font-size:13.5px;line-height:1.5;
  background:#FFF1DC;border:1px solid #EBD3A8;color:#6B5518;max-width:58ch}

/* ── organisations directory ────────────────────────────────────────
   A directory, not an endorsement: verified and unverified are shown
   with equal weight, marked. Data is inline in the page (no fetch), so
   it works from a file:// preview and there is no CORS to get wrong. */
.ofilters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 26px}
.ofilters input[type=search]{flex:1 1 320px;font:inherit;font-size:15.5px;color:var(--ink);
  background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:12px 14px}
.ofilters input[type=search]:focus{outline:2px solid rgba(27,58,107,.3);border-color:var(--blue)}
.ocheck{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--body);
  background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:11px 14px;cursor:pointer}
.ocheck input{accent-color:var(--blue);width:16px;height:16px}
.ocount{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:0}
.ocat{padding:0;border:0;margin:0 0 34px}
.ocat h2{margin:0 0 14px;font-size:15px;font-family:var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut);font-weight:700;display:flex;align-items:baseline;gap:10px}
.ocat h2 b{font-size:11px;color:var(--faint);font-weight:600}
.ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.org{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:17px 18px;
  border-top:3px solid var(--ink);display:flex;flex-direction:column}
.org[hidden]{display:none!important}
.org.unver{border-top-color:var(--amb);background:#FDFBF6}
.ohead{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;margin-bottom:7px}
.ohead h3{margin:0;font-size:16px;line-height:1.25;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.obadge{flex-shrink:0;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 7px;border-radius:20px;font-weight:700;white-space:nowrap;margin-top:2px}
.obadge.ok{background:#E7F3EC;color:#1F6B45;border:1px solid #BFE0CD}
.obadge.no{background:#FFF1DC;color:#8A6512;border:1px solid #EBD3A8}
.ometa{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin:0 0 9px}
.odesc{font-size:13.5px;line-height:1.55;color:var(--mut);margin:0 0 12px;flex:1}
.ositio{font-family:var(--mono);font-size:11.5px;color:var(--blue);border-bottom-color:rgba(27,58,107,.25);
  word-break:break-word}
.ointer{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.onone{text-align:center;color:var(--mut);padding:30px 0;font-size:15px}
.onone[hidden]{display:none}
@media(max-width:740px){
  .ogrid{grid-template-columns:1fr}
  .ofilters input[type=search]{flex:1 1 100%}
}

/* ── six nav items on a phone ───────────────────────────────────────
   With Organisations added the menu wraps to two rows and the bar grew
   tall enough to sit on top of the page headings. Tighten it, and give
   the headers enough room to clear whatever height it ends up at. */
@media(max-width:740px){
  .top .wrap{padding:12px 16px;gap:8px 10px}
  .menu{gap:3px 4px;justify-content:flex-end}
  .menu a{padding:8px 9px;font-size:10px}
  .top .toggle{margin-left:4px}
  .toggle button{padding:7px 13px;font-size:10.5px}
  .phero .wrap{padding-top:168px}
  .hero .wrap{padding-top:168px}
  .rostros[style]{padding-top:168px!important}
}


/* ── inline confirmation after a message is sent ─────────────────────── */
.dropok[hidden]{display:none}
.dropok{margin-top:26px;max-width:620px;padding:22px 24px;border-radius:14px;
  background:var(--card);border:1px solid rgba(27,58,107,.28)}
.dropok-h{margin:0 0 8px;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.dropok-p{margin:0;font-size:14.5px;line-height:1.6;color:var(--mut);max-width:58ch}
.dropok-again{margin-top:16px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  color:var(--ink);background:transparent;border:1px solid rgba(0,0,0,.22);
  border-radius:9px;padding:9px 16px}
.dropok-again:hover{background:rgba(0,0,0,.05)}