/* Shared styles for the public content pages (comparativa, nosotros and their English
   twins). Same palette, type and corner brackets as the brief's olive theme. */
:root{
  --font-display:'Michroma','Eurostile','Arial Black',sans-serif;
  --font-body:'Barlow','Segoe UI','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --maxw:1200px;
  --bg:#1E2418; --bg2:#232A1C; --panel:#29311F; --panel2:#2F3824;
  --line:rgba(237,235,227,.13); --line2:rgba(237,235,227,.22);
  --text:#EDEBE3; --muted:#B9BBA9; --dim:#8E927E;
  --accent:#C9A66B; --accent-ink:#1E2418; --olive:#9BB063; --alert:#E58A4E;
  --grid:rgba(201,166,107,.05);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
h1,h2,h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;margin:0}
/* Michroma's capital accents are tall; at the brief's 1.12 they touch the line above. */
h1{font-size:clamp(26px,4.4vw,48px);line-height:1.32}
h2{font-size:clamp(21px,2.8vw,32px);line-height:1.32}
h3{font-size:15px;line-height:1.35;letter-spacing:.04em}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
header.nav{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:68px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text)}
.brand:hover{text-decoration:none}
.wordmark{display:flex;align-items:center;font-family:var(--font-display);font-size:18px;line-height:1;color:var(--text);-webkit-text-stroke:.3px currentColor}
.wordmark i{width:4px;height:4px;border-radius:50%;background:var(--accent);margin:0 5px}
.nav nav{display:flex;gap:22px;margin-left:auto}
.nav nav a{color:var(--muted);font-size:15px;font-weight:500}
.nav nav a:hover{color:var(--text);text-decoration:none}
.nav nav a[aria-current="page"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
.lang{display:flex;border:1px solid var(--line2)}
.lang a{display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;padding:8px 10px;min-width:44px;min-height:36px}
.lang a:hover{text-decoration:none;color:var(--text)}
.lang a[aria-current="true"]{background:var(--accent);color:var(--accent-ink)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:13px 20px;min-height:44px;border:1px solid var(--accent);color:var(--accent);background:transparent}
.btn:hover{text-decoration:none;background:rgba(201,166,107,.1)}
.btn.solid{background:var(--accent);color:var(--accent-ink);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn.solid:hover{background:#D7B67D}
.nav .btn{padding:10px 14px}
/* Phones: the two page links drop to a second row instead of hiding in a menu. */
@media (max-width:760px){
  header.nav{position:static}
  .nav .wrap{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:0;gap:12px}
  .lang{margin-left:auto}
  .nav nav{order:3;width:100%;margin:0;gap:0;border-top:1px solid var(--line)}
  .nav nav a{flex:1;text-align:center;padding:12px 0}
}
@media (max-width:380px){.nav .btn{display:none}}
@media (max-width:440px){.brand{gap:8px}.wordmark{font-size:15px}.wordmark i{margin:0 3px}.lang a{min-width:38px;padding:8px 6px}.nav .btn{padding:8px 10px;font-size:12px}}

/* page head */
.page-head{padding:64px 0 48px;border-bottom:1px solid var(--line)}
.crumbs{color:var(--dim);margin-bottom:22px}
.crumbs a{color:var(--dim)}
.crumbs a:hover{color:var(--text)}
.eyebrow{color:var(--accent);display:flex;align-items:center;gap:10px;margin-bottom:20px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--accent)}
.lead{font-size:19px;color:var(--muted);margin-top:22px;max-width:900px}
.lead strong{color:var(--text);font-weight:600}
.updated{color:var(--dim);margin-top:22px}
@media (max-width:760px){.page-head{padding:40px 0 36px}}

/* sections */
section.block{padding:72px 0;border-bottom:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:220px 1fr;gap:32px;margin-bottom:36px}
.sec-head .mono{color:var(--accent);padding-top:6px}
.sec-head p{color:var(--muted);margin-top:16px}
@media (max-width:800px){.sec-head{grid-template-columns:1fr;gap:12px}section.block{padding:56px 0}}
.prose p{color:var(--muted)}
.prose p+p{margin-top:16px}
.prose strong{color:var(--text);font-weight:600}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:960px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards,.cards.two{grid-template-columns:1fr}}
.card{position:relative;background:var(--panel);border:1px solid var(--line);padding:26px 24px 28px}
.card::before,.card::after,.panel-box::before,.panel-box::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--accent);border-style:solid}
.card::before,.panel-box::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.card::after,.panel-box::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.card .num{color:var(--dim);margin-bottom:16px;display:block}
.card h3{margin-bottom:12px}
.card p{color:var(--muted);font-size:16px}
.card p+p{margin-top:10px}
.card .tag{display:inline-block;margin-top:14px;color:var(--olive)}
.card.lince{border-color:var(--accent);grid-column:1/-1}

/* key facts: a row of short answers */
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line2)}
.facts li{padding:22px 20px 0 0}
.facts li+li{padding-left:20px;border-left:1px solid var(--line)}
.facts b{display:block;font-family:var(--font-display);font-weight:400;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.facts span{color:var(--muted);font-size:16px}
@media (max-width:900px){.facts{grid-template-columns:1fr 1fr;row-gap:28px}.facts li:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:560px){.facts{grid-template-columns:1fr}.facts li+li{border-left:0;padding-left:0;border-top:1px solid var(--line)}}

/* comparison table: the systems across the top, each with its badge and some of the
   companies that offer it; six short rows below; LINCE's column in gold. Below 1100px
   the top row becomes a list of the systems and each row a card with one line per system. */
.cmp-box{position:relative;border:1px solid var(--line2);background:var(--panel)}
table.cmp{width:100%;table-layout:fixed;border-collapse:collapse;font-size:15px;line-height:1.45}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:15px 12px;border-bottom:1px solid var(--line)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{width:auto;background:var(--panel2);vertical-align:top;font-weight:400;padding-top:18px;padding-bottom:16px;border-bottom:1px solid var(--line2)}
.cmp thead th:first-child{width:12%}
.cmp .sys{display:block;font-family:var(--font-display);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--text);line-height:1.35}
.cmp .tag{display:inline-block;margin-top:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border:1px solid currentColor}
.cmp .tag.pas{color:var(--olive)}
.cmp .tag.act{color:var(--alert)}
.cmp .who{display:block;margin-top:8px;font-size:12.5px;line-height:1.4;color:var(--dim)}
.cmp tbody th{font-family:var(--font-mono);font-weight:400;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.cmp td{color:var(--muted)}
.cmp .lince{background:rgba(201,166,107,.09);color:var(--text)}
.cmp thead th.lince{background:rgba(201,166,107,.16);box-shadow:inset 0 3px 0 var(--accent)}
.cmp thead th.lince .sys{color:var(--accent)}
.cmp .ok,.cmp .bad,.cmp .mid{font-weight:600;white-space:nowrap}
.cmp .ok{color:var(--olive)}
.cmp .bad{color:var(--alert)}
.cmp .mid{color:var(--accent)}
.cmp .price{font-family:var(--font-mono);font-size:13px;color:var(--text);white-space:nowrap}
.cmp small{display:block;color:var(--dim);font-size:13px;margin-top:2px}
@media (max-width:1099px){
  table.cmp,.cmp thead,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp thead th:first-child{display:none}
  .cmp thead tr{padding:8px 0}
  .cmp thead th{width:auto;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:10px 18px;border-bottom:1px solid var(--line)}
  .cmp thead th:last-child{border-bottom:0}
  .cmp .sys,.cmp .tag,.cmp .who{margin-top:0}
  .cmp .who{flex-basis:100%}
  .cmp thead th.lince{box-shadow:inset 3px 0 0 var(--accent)}
  .cmp tbody tr{border-top:1px solid var(--line2);padding:4px 0 12px}
  .cmp tbody th,.cmp tbody tr:last-child th{padding:18px 18px 8px;border-bottom:0;color:var(--accent)}
  .cmp td,.cmp tbody tr:last-child td{display:grid;grid-template-columns:140px 1fr;column-gap:12px;padding:7px 18px;border-bottom:0}
  .cmp td::before{content:attr(data-label);font-family:var(--font-display);font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--text);padding-top:3px}
  .cmp td.lince{box-shadow:inset 3px 0 0 var(--accent)}
  .cmp td.lince::before{color:var(--accent)}
  .cmp td small{grid-column:2}
}
@media (max-width:400px){.cmp td,.cmp tbody tr:last-child td{grid-template-columns:118px 1fr;padding-left:16px;padding-right:16px}}
.cmp-src{color:var(--dim);font-size:13.5px;margin-top:14px;line-height:1.7}
.cmp-src b{font-weight:600;color:var(--muted)}
.note{color:var(--dim);font-size:14px;margin-top:14px}

/* FAQ */
.faq{border-top:1px solid var(--line2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-weight:600;font-size:18px;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-family:var(--font-mono);font-size:22px;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 22px;color:var(--muted);max-width:900px}
.faq .ans p+p{margin-top:12px}

/* sources */
.sources{margin:0;padding-left:22px;color:var(--dim);font-size:14.5px}
.sources li{margin:0 0 8px;padding-left:4px}
.sources li::marker{font-family:var(--font-mono);font-size:12px;color:var(--accent)}
.sources a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;overflow-wrap:anywhere}
.sources a:hover{color:var(--text)}

/* a boxed statement, used for the mission */
.panel-box{position:relative;border:1px solid var(--line2);background:var(--panel);padding:44px 48px}
.panel-box .mono{color:var(--accent)}
.panel-box blockquote{margin:16px 0 0;font-family:var(--font-display);text-transform:uppercase;font-size:clamp(19px,2.4vw,28px);line-height:1.35;letter-spacing:.02em;color:var(--text)}
.panel-box p{color:var(--muted);margin-top:18px;max-width:860px}
@media (max-width:760px){.panel-box{padding:30px 22px}}

/* two flags joined: Colombia and the United States */
.joint{display:flex;align-items:center;gap:18px;margin-top:30px;flex-wrap:wrap}
.joint .pill{display:flex;align-items:center;gap:10px;border:1px solid var(--line2);background:var(--panel);padding:10px 14px;color:var(--text)}
.joint .pill svg{width:30px;height:20px;border:1px solid var(--line2)}
.joint .plus{font-family:var(--font-mono);color:var(--accent)}

/* contact */
.contact{padding:80px 0}
.contact .box{border:1px solid var(--line2);background:var(--panel);padding:44px 48px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;position:relative}
.contact .box::before,.contact .box::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--accent);border-style:solid}
.contact .box::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.contact .box::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.contact .box p{color:var(--muted);margin-top:16px}
.contact .actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.contact .mail{font-family:var(--font-mono);font-size:15px;color:var(--text)}
@media (max-width:860px){.contact .box{grid-template-columns:1fr;padding:30px 22px}}

footer{border-top:1px solid var(--line);padding:36px 0 48px;color:var(--dim);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer .links{display:flex;gap:18px;flex-wrap:wrap}
footer .links a{color:var(--dim)}
footer .links a:hover{color:var(--text)}
@media (max-width:600px){.wrap{padding:0 16px}}