:root{
    --bg:#F5F4F1; --bg-2:#FBFBF8; --ink:#2B3539;
    --line:#E0DED7; --line-soft:#EAE8E2;
    --text:#2B3539; --text-2:#5C6063; --text-3:#999B98;
    --serif:'Newsreader',Georgia,'Times New Roman',serif;
    --sans:'Hanken Grotesk',system-ui,sans-serif;
    --maxw:1080px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--text-2);font-family:var(--serif);
    font-size:18px;line-height:1.64;-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
  ::selection{background:#E6E3DA}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 52px}
  @media(max-width:640px){.wrap{padding:0 26px}}
  .label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3)}
  .rule{width:34px;height:1px;background:var(--ink);display:inline-block;vertical-align:middle}

  header{position:sticky;top:0;z-index:30;background:rgba(245,244,240,.84);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  nav{display:flex;align-items:center;justify-content:space-between;height:76px}
  .brand{font-family:var(--sans);font-weight:600;letter-spacing:.42em;font-size:14px;color:var(--ink)}
  .navright{display:flex;gap:32px;align-items:center}
  .navlinks{display:flex;gap:30px}
  .navlinks a{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--text-2);text-transform:uppercase;transition:color .2s}
  .navlinks a:hover{color:var(--ink)}
  .lang{font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--text-3)}
  .lang b{color:var(--ink);font-weight:600}
  .navcta{background:var(--ink);color:#F5F4F1!important;padding:11px 20px;font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:opacity .2s}
  .navcta:hover{opacity:.82}
  @media(max-width:880px){.navlinks,.lang{display:none}}

  .btn{display:inline-block;font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
    background:var(--ink);color:#F5F4F1;padding:18px 40px;transition:opacity .2s,transform .15s}
  .btn:hover{opacity:.86;transform:translateY(-1px)}

  .hero{padding:128px 0 70px}
  .hero .label{display:block;margin-bottom:34px}
  h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.7rem,6vw,5rem);line-height:1.04;letter-spacing:-.018em;margin:0;max-width:16ch;color:var(--ink)}
  h1 em{font-style:italic;color:var(--text-2)}
  .lede{margin:38px 0 0;max-width:56ch;color:var(--text-2);font-size:clamp(1.16rem,1.6vw,1.34rem);line-height:1.56}
  .lede b{color:var(--ink);font-weight:500}
  .heroact{margin-top:46px}

  /* exhibit del dato — claro, monocromo, contraste por tono */
  .exhibit{padding:30px 0 116px}
  .frame{border-top:1px solid var(--ink);padding-top:14px}
  .frame .head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-bottom:30px}
  .frame .head .em{color:var(--ink)}
  svg{display:block;width:100%;height:auto}
  .frame .cap{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--sans);font-size:13px;line-height:1.7;color:var(--text-3);max-width:84ch}
  .frame .cap b{color:var(--text-2);font-weight:500}.frame .cap .em{color:var(--ink);font-weight:600}

  section{padding:104px 0;border-top:1px solid var(--line)}
  .eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:36px}
  h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.8vw,2.9rem);letter-spacing:-.015em;line-height:1.12;margin:0;max-width:24ch;color:var(--ink)}
  h2 em{font-style:italic;color:var(--text-2)}
  .sub{color:var(--text-2);margin:20px 0 0;max-width:56ch;font-size:1.16rem;line-height:1.5}

  .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;margin-top:62px}
  .col .n{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
  .col h3{font-family:var(--serif);font-weight:600;font-size:1.4rem;letter-spacing:-.01em;margin:16px 0 13px;color:var(--ink);line-height:1.18}
  .col p{margin:0;color:var(--text-2);font-size:1.02rem;line-height:1.6}
  @media(max-width:760px){.cols{grid-template-columns:1fr;gap:46px}}

  .diff .col .src{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
  .diff .col .q{font-family:var(--serif);font-weight:600;font-size:1.32rem;margin:15px 0 12px;letter-spacing:-.01em;color:var(--text-3);line-height:1.2}
  .diff .col.mine .q{color:var(--ink)}
  .diff .col.mine{border-top:1px solid var(--ink);margin-top:-17px;padding-top:17px}
  .diffnote{font-family:var(--sans);font-size:12px;letter-spacing:.02em;color:var(--text-3);margin-top:50px}

  .method{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;margin-top:60px;align-items:start}
  @media(max-width:820px){.method{grid-template-columns:1fr;gap:48px}}
  .mlist{list-style:none;margin:0;padding:0}
  .mlist li{padding:24px 0;border-bottom:1px solid var(--line-soft)}
  .mlist li:first-child{padding-top:0}.mlist li:last-child{border-bottom:0}
  .mlist .lbl{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:block;margin-bottom:9px}
  .mlist p{margin:0;color:var(--text-2);font-size:1.02rem;line-height:1.55}
  .boundary{border-left:1px solid var(--ink);padding:8px 0 8px 30px}
  .boundary .label{display:block;margin-bottom:16px}
  .boundary p{margin:0;color:var(--text-2);font-size:1.08rem;line-height:1.6}
  .boundary p b{color:var(--ink);font-weight:500}

  .flow{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:44px}
  .flow .step{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--text-3)}
  .flow .ft{font-family:var(--serif);font-weight:600;font-size:1.24rem;margin:14px 0 8px;color:var(--ink)}
  .flow .fd{margin:0;color:var(--text-2);font-size:.96rem;line-height:1.5}
  @media(max-width:680px){.flow{grid-template-columns:1fr 1fr;gap:36px}}

  .who{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;margin-top:54px}
  .whomark{width:78px;height:78px;border:1px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:400;font-size:34px;color:var(--ink)}
  .who p{margin:0;color:var(--text-2);font-size:1.16rem;line-height:1.52;max-width:58ch}
  .who b{color:var(--ink);font-weight:500}
  .ph{font-family:var(--sans);font-size:.78em;font-weight:500;color:var(--text-3);background:#EAE8E2;padding:1px 6px}
  @media(max-width:560px){.who{grid-template-columns:1fr}}

  .cta-sec{text-align:center;padding:124px 0}
  .cta-sec .label{display:block;margin-bottom:30px}
  .cta-sec h2{margin:0 auto;max-width:20ch}
  .cta-sec p{color:var(--text-2);max-width:50ch;margin:24px auto 42px;font-size:1.16rem;line-height:1.5}

  footer{border-top:1px solid var(--line);padding:36px 0 54px}
  .foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}

  a:focus-visible,.btn:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

/* — bloque de cierre oscuro (patrón de marca: último bloque en tinta) — */
.cta-sec.dark{background:var(--ink)}
.cta-sec.dark .label{color:#9DA3A6}
.cta-sec.dark h2{color:#F5F4F1}
.cta-sec.dark h2 em{color:#C3C7C9}
.cta-sec.dark p{color:#C3C7C9}
.cta-sec.dark .btn{background:#F5F4F1;color:var(--ink)}
.cta-sec.dark .btn:hover{opacity:.9}
.cta-sec.dark .rule{background:#F5F4F1}

/* — multipágina: logo en nav + enlace activo — */
.brand{display:flex;align-items:center}
.brand img{display:block}
.navright{gap:40px}
.navlinks a{white-space:nowrap}
.navlinks a.active,.navlinks a[aria-current=page]{color:var(--ink)}


/* — artículos de Perspectivas — */
.artbody{padding:18px 0 0}
.artbody p{font-family:var(--serif);font-size:1.22rem;line-height:1.66;color:var(--text-2);margin:0 0 26px}
.artbody p:first-child{margin-top:34px}
.artbody p:last-child{color:var(--ink);font-weight:500}
.artcta{margin-top:30px;padding:42px 0 0;border-top:1px solid var(--line)}
.cta-sec.dark .artcta{border-color:rgba(255,255,255,.16)}

/* — índice de Perspectivas — */
.plist{list-style:none;margin:56px 0 0;padding:0;border-top:1px solid var(--ink)}
.plist li{border-bottom:1px solid var(--line)}
.plist a{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:baseline;padding:30px 0;transition:padding-left .18s,color .18s}
.plist a:hover{padding-left:10px}
.plist .pn{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--text-3)}
.plist .pt{display:block;font-family:var(--serif);font-weight:500;font-size:1.5rem;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.plist .pd{display:block;font-family:var(--sans);font-size:.96rem;color:var(--text-2);line-height:1.5;margin-top:7px;max-width:64ch}
@media(max-width:600px){.plist a{grid-template-columns:1fr;gap:8px}}

/* — home v2: línea de público + dos lecturas a peso igual — */
.audience{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--text-3);margin-top:30px;line-height:1.65;max-width:62ch}
.audience b{color:var(--text-2);font-weight:600}
.cols.duo{grid-template-columns:1fr 1fr;gap:56px}
.cols.duo .col .n{display:block;margin-bottom:13px}
.duonote{font-family:var(--sans);font-size:12px;letter-spacing:.02em;color:var(--text-3);margin-top:46px;max-width:74ch;line-height:1.7}
@media(max-width:760px){.cols.duo{grid-template-columns:1fr;gap:44px}}

/* — footer con navegación (aloja FAQ) — */
.footnav{display:flex;flex-wrap:wrap;gap:14px 28px;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.footnav a{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);transition:color .2s}
.footnav a:hover{color:var(--ink)}

/* — Antes de decidir: preguntas en dos niveles — */
.qa{padding:30px 0;border-bottom:1px solid var(--line)}
.qa:first-of-type{border-top:1px solid var(--ink)}
.qa h3{font-family:var(--serif);font-weight:600;font-size:1.34rem;letter-spacing:-.01em;color:var(--ink);margin:0 0 12px;line-height:1.25}
.qa p{font-family:var(--serif);font-size:1.08rem;line-height:1.62;color:var(--text-2);margin:0}
.qa-compact{padding:22px 0;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:minmax(210px,1fr) 1.7fr;gap:28px;align-items:baseline}
.qa-compact:first-of-type{border-top:1px solid var(--line)}
.qa-compact h4{font-family:var(--serif);font-weight:500;font-size:1.1rem;color:var(--ink);margin:0;line-height:1.3}
.qa-compact p{font-family:var(--sans);font-size:.97rem;line-height:1.58;color:var(--text-2);margin:0}
@media(max-width:680px){.qa-compact{grid-template-columns:1fr;gap:7px}}

/* — correcciones header — */
.brand{margin-right:54px}
.lang{white-space:nowrap}
.navlinks a{text-align:center;line-height:1.18}
.navcta{white-space:nowrap;text-align:center;display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;line-height:1.1}

/* — formulario de contacto — */
.form{margin-top:14px;max-width:560px}
.field{margin-bottom:22px}
.field label{display:block;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);margin-bottom:8px}
.field label .opt{color:var(--text-3);font-weight:500}
.field input,.field textarea{width:100%;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line);border-radius:0;padding:13px 14px;font-family:var(--serif);font-size:1.02rem;color:var(--ink);transition:border-color .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.formnote{font-family:var(--sans);font-size:.86rem;color:var(--text-3);line-height:1.55;margin:6px 0 22px}
button.btn{border:0;cursor:pointer}

/* — footer minimalista (modelo Siglaris/Sighture) — */
.footlinks{display:flex;gap:24px}
.footlinks a{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);transition:color .2s}
.footlinks a:hover{color:var(--ink)}
.footcopy{margin-top:18px;font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:var(--text-3)}

/* — páginas legales — */
.legal{max-width:70ch}
.legal h2{font-family:var(--serif);font-weight:600;font-size:1.32rem;color:var(--ink);margin:40px 0 12px;letter-spacing:-.01em}
.legal p{font-family:var(--serif);font-size:1.05rem;line-height:1.66;color:var(--text-2);margin:0 0 16px}
.legal .upd{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;color:var(--text-3);text-transform:uppercase}

/* — selector de idioma / multilingüe — */
[data-lang]{display:none}
body.lang-es [data-lang="es"],
body.lang-en [data-lang="en"],
body.lang-de [data-lang="de"]{display:revert}
.lang a{color:var(--text-3);cursor:pointer}
.lang a.on{color:var(--ink);font-weight:600}
.lang a:hover{color:var(--ink)}