/* qadRo Technologies — hoja compartida de las paginas de contenido.
   Paleta cian (PALETTES.cian del bundle). Tipografias en fonts.css.
   Rutas absolutas: estas paginas se sirven desde la raiz con cleanUrls. */

:root{
  --brand:#0b6d83; --ink:#101a1e; --tint:#eff6f8;
  --s50:#effafc; --s100:#d6f1f6; --s200:#a5e0ea; --s300:#63c7d8;
  --s400:#22a5bd; --s500:#0d87a0; --s600:#0b6d83; --s700:#0a5568; --s900:#062832;
  --font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-sans:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
  --muted:#5c6b70; --line:rgba(16,26,30,.10);
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);color:var(--ink);background:#fff;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  line-height:1.14;margin:0}
a{color:var(--s600)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;height:64px;z-index:100;
  background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line)}
.hd{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:64px;
  display:flex;align-items:center;gap:20px}
.hd img{height:22px;width:auto;display:block}
.hd nav{margin-left:auto;display:flex;align-items:center;gap:22px;
  font-size:14.5px;font-weight:600}
.hd nav a{color:var(--ink);text-decoration:none}
.hd nav a:hover{color:var(--s600)}
.back{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)!important}
.spacer{height:64px}

/* ---------- hero ---------- */
.hero{background:linear-gradient(160deg,#f2fbfd,#eaf7fa 45%,#eef4f7);
  border-bottom:1px solid var(--line);padding:76px 0 66px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--s600);background:#fff;
  border:1px solid var(--s200);border-radius:999px;padding:7px 15px;margin-bottom:26px}
.eyebrow b{width:6px;height:6px;border-radius:50%;background:var(--s400)}
.hero h1{font-size:clamp(33px,5vw,55px);max-width:18ch}
.hero .lede{font-size:clamp(17px,2vw,20px);color:#33474d;margin-top:24px;max-width:64ch}

/* ---------- migas ---------- */
.crumbs{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.crumbs a{color:var(--s600);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{margin:0 8px;opacity:.5}

/* ---------- indice ---------- */
.toc{border-bottom:1px solid var(--line);background:#fff}
.toc ol{max-width:var(--maxw);margin:0 auto;padding:16px 24px;list-style:none;
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center}
.toc li{font-family:var(--font-mono);font-size:12px;letter-spacing:.03em}
.toc li:first-child{color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.toc a{color:var(--s700);text-decoration:none}
.toc a:hover{color:var(--s400);text-decoration:underline}
:target{scroll-margin-top:78px}

/* ---------- secciones ---------- */
section{padding:76px 0;border-bottom:1px solid var(--line)}
.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--s500);margin-bottom:14px}
h2{font-size:clamp(26px,3.4vw,38px);max-width:21ch}
.sub{color:var(--muted);margin-top:16px;max-width:64ch}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:34px}
.two p{max-width:56ch}
.prosa p{max-width:70ch;color:#3c4f55;margin:0 0 16px}
.prosa p:last-child{margin-bottom:0}

/* ---------- citas del estandar ---------- */
.quote{margin:0 0 22px;padding:22px 26px;background:var(--s50);
  border-left:3px solid var(--s400);border-radius:0 12px 12px 0;max-width:62ch}
.quote p{margin:0;font-family:var(--font-display);font-size:18.5px;line-height:1.45}
.quote cite{display:block;margin-top:12px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-style:normal}

/* ---------- tarjetas ---------- */
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.card{border:1px solid var(--line);border-radius:14px;padding:26px;background:#fff}
.card h3{font-size:19px;margin-bottom:11px}
.card p{margin:0;font-size:15.5px;color:#3c4f55;line-height:1.62}
.card .src{margin-top:15px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.04em;color:var(--s500);line-height:1.6}
.card .n{font-family:var(--font-mono);font-size:12px;color:var(--s400);
  letter-spacing:.06em;margin-bottom:9px}

/* ---------- bloques numerados (huecos, compuertas) ---------- */
.blocks{margin-top:42px}
.block{display:grid;grid-template-columns:52px 1fr;gap:24px;padding:32px 0;
  border-top:1px solid var(--line)}
.block .num{font-family:var(--font-mono);font-size:13px;color:var(--s300);padding-top:4px}
.block h3{font-size:21px;margin-bottom:13px;max-width:32ch}
.block p{margin:0 0 12px;color:#3c4f55;font-size:16px;max-width:70ch}
.ask{margin-top:16px;padding:15px 19px;background:var(--s50);border-radius:10px;
  font-size:15px;color:var(--s700);max-width:70ch}
.ask b{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px;font-weight:500}
.src2{margin-top:13px;font-family:var(--font-mono);font-size:11px;color:var(--s500);
  letter-spacing:.04em}

/* ---------- tablas ---------- */
table.t{width:100%;border-collapse:collapse;margin-top:38px;font-size:15.5px}
table.t th,table.t td{text-align:left;padding:17px 18px;
  border-bottom:1px solid var(--line);vertical-align:top}
table.t th{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:500}
table.t td:first-child{color:var(--ink);font-weight:600}
table.t td.ref{font-family:var(--font-mono);font-size:12.5px;color:var(--s600);
  line-height:1.6;font-weight:400}

/* ---------- glosario ---------- */
.glos{margin-top:36px}
.letra{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  color:var(--s300);border-top:1px solid var(--line);padding-top:26px;margin-top:30px}
.term{padding:22px 0;border-bottom:1px solid var(--line)}
.term h3{font-size:20px;margin-bottom:4px}
.term .en{font-family:var(--font-mono);font-size:12px;color:var(--s500);
  letter-spacing:.03em;margin-bottom:11px}
.term p{margin:0 0 10px;color:#3c4f55;font-size:16px;max-width:74ch}
.term .nota{font-size:15px;color:var(--muted);max-width:74ch}
.term .fuente{margin-top:10px;font-family:var(--font-mono);font-size:11px;
  color:var(--s500);letter-spacing:.04em}
.abc{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:26px;
  font-family:var(--font-mono);font-size:13px}
.abc a{color:var(--s600);text-decoration:none;padding:3px 8px;
  border:1px solid var(--line);border-radius:6px}
.abc a:hover{border-color:var(--s400);color:var(--s400)}

/* ---------- hub ---------- */
.hub{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.hub a{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:14px;padding:28px;background:#fff;text-decoration:none;color:inherit;
  transition:border-color 160ms,transform 160ms}
.hub a:hover{border-color:var(--s400);transform:translateY(-2px)}
.hub .kind{font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand);margin-bottom:13px}
.hub h3{font-size:21px;margin-bottom:10px}
.hub p{margin:0;font-size:15.5px;color:#3c4f55;line-height:1.6}
.hub .go{margin-top:auto;padding-top:18px;color:var(--s600);font-size:15px;
  font-weight:500}
.hub .pronto{opacity:.55;pointer-events:none}
.hub .pronto .go{color:var(--muted)}

/* ---------- cierre y pie ---------- */
.close{background:var(--tint);border-bottom:none}
.close p{font-family:var(--font-display);font-size:clamp(20px,2.6vw,26px);
  line-height:1.4;max-width:33ch;margin:0}
footer{padding:44px 0 60px;font-size:14px;color:var(--muted)}
footer a{color:var(--s600)}
footer ul{padding-left:18px;margin:10px 0 0}
footer li{margin-bottom:5px}
.vermas{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);
  font-size:15px}
.vermas b{display:block;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  margin-bottom:10px;font-weight:500}
.vermas a{margin-right:20px;line-height:2}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .two{grid-template-columns:1fr;gap:28px}
  .cards2,.cards3,.hub{grid-template-columns:1fr}
  section{padding:56px 0}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap,.hd{padding:0 18px}
  .hd nav{gap:14px;font-size:13.5px}
  .hd .hide-s{display:none}
  .hero{padding:52px 0 46px}
  .block{grid-template-columns:1fr;gap:6px}
  .block .num{padding-top:0}
  table.t thead{display:none}
  table.t,table.t tbody,table.t tr,table.t td{display:block;width:auto}
  table.t tr{padding:18px 0;border-bottom:1px solid var(--line)}
  table.t td{border:0;padding:0 0 10px}
  table.t td:first-child{font-size:18px;padding-bottom:12px}
  table.t td:last-child{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hub a:hover{transform:none}
}

/* ---------- matriz (mapa del estandar) ---------- */
.map{margin-top:40px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.map table{width:100%;border-collapse:collapse;margin:0;font-size:15px}
.map th,.map td{padding:18px;border-bottom:1px solid var(--line);text-align:left;
  vertical-align:top}
.map thead th{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:500;background:#fbfdfe}
.map td:first-child,.map thead th:first-child{width:190px}
.map td:first-child{font-weight:700;font-family:var(--font-display);
  font-size:17px;color:var(--ink)}
.map tr:last-child td{border-bottom:0}
.map .bl{display:block;color:var(--s700);font-weight:600}
.map .cap{display:block;font-family:var(--font-mono);font-size:11px;color:var(--muted);
  letter-spacing:.04em;margin-bottom:10px}
.map .cap:last-child{margin-bottom:0}
.cross{margin-top:16px;padding:22px 26px;background:var(--s900);color:#cfe7ee;
  border-radius:14px;font-size:15px}
.cross b{color:#fff;display:block;margin-bottom:9px;font-family:var(--font-display);
  font-size:17px}
.cross span{font-family:var(--font-mono);font-size:12.5px;color:var(--s200);line-height:1.9}

/* ---------- anillo del ciclo ---------- */
.ring{display:grid;grid-template-columns:400px 1fr;gap:52px;align-items:center;margin-top:42px}
.ring svg{width:100%;height:auto}

@media (max-width:900px){
  .ring{grid-template-columns:1fr;gap:30px}
  .ring svg{max-width:350px;margin:0 auto}
}
@media (max-width:640px){
  .map thead{display:none}
  .map table,.map tbody,.map tr,.map td{display:block;width:auto}
  .map tr{padding:18px 0;border-bottom:1px solid var(--line)}
  .map td{border:0;padding:0 0 10px}
  .map td:first-child{width:auto;font-size:19px;padding-bottom:12px}
  .map td:last-child{padding-bottom:0}
  /* al apilarse se pierde que columna era cual: se rotula */
  .map td[data-l]::before{content:attr(data-l);display:block;
    font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted);margin:6px 0}
  .map td[data-l="hace"]::before{content:'Lo que hace'}
  .map td[data-l="es"]::before{content:'Lo que es'}
}