/* Hoja compartida por las paginas de aterrizaje de Plan Trazo */
:root{
  --bg:#E9EDEE; --surface:#FFFFFF; --surface-2:#F4F7F8; --surface-3:#EDF2F3;
  --ink:#0C1A1F; --ink-2:#3C555E; --muted:#6C838C;
  --line:#CCD8DC; --line-strong:#AEC0C6;
  --brand:#0B6E7F; --brand-ink:#085461; --brand-soft:#DCEEF1;
  --amber:#C86A12; --plum:#6B4E8C;
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A1216; --surface:#101B20; --surface-2:#16242A; --surface-3:#1B2C33;
    --ink:#E4EEF0; --ink-2:#B3C6CC; --muted:#7E959D;
    --line:#22343B; --line-strong:#334A52;
    --brand:#3FB3C4; --brand-ink:#7FD3DE; --brand-soft:#0E353D;
    --amber:#E39A4E; --plum:#A98BC9;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1216; --surface:#101B20; --surface-2:#16242A; --surface-3:#1B2C33;
  --ink:#E4EEF0; --ink-2:#B3C6CC; --muted:#7E959D;
  --line:#22343B; --line-strong:#334A52;
  --brand:#3FB3C4; --brand-ink:#7FD3DE; --brand-soft:#0E353D;
  --amber:#E39A4E; --plum:#A98BC9;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display); font-weight:700; line-height:1.15; margin:0; text-wrap:balance}
p,ul,ol{margin:0}
a{color:var(--brand-ink); text-underline-offset:2px}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
.wrap{max-width:760px; margin:0 auto; padding:0 22px}
.eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

header.top{border-bottom:1px solid var(--line); background:var(--surface)}
header.top .wrap{display:flex; align-items:center; gap:14px; padding-top:12px; padding-bottom:12px}
.logo{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:800;
  font-size:16px; letter-spacing:-.02em; color:var(--ink); text-decoration:none}
.logo svg{display:block; flex:none}
header.top nav{margin-left:auto; font-size:14.5px}
header.top nav a{color:var(--ink-2); text-decoration:none; margin-left:14px}
header.top nav a:hover{color:var(--ink); text-decoration:underline}

article{padding:40px 0 10px}
article h1{font-size:clamp(29px,5vw,44px); letter-spacing:-.028em; margin-top:10px}
article .lead{margin-top:16px; font-size:clamp(17px,2.1vw,19.5px); color:var(--ink-2)}
article h2{font-size:24px; letter-spacing:-.018em; margin-top:42px; padding-bottom:8px; border-bottom:1px solid var(--line)}
article h3{font-size:18px; margin-top:26px}
article p{margin-top:14px; color:var(--ink-2)}
article ul,article ol{margin-top:14px; padding-left:22px; color:var(--ink-2); display:flex; flex-direction:column; gap:9px}
article li strong{color:var(--ink)}

.cta{display:block; background:var(--surface); border:1px solid var(--line-strong); border-left:4px solid var(--brand);
  border-radius:12px; padding:22px 24px; margin-top:28px; text-decoration:none; color:inherit;
  transition:transform .18s ease, border-color .18s ease}
.cta:hover{transform:translateY(-2px); border-color:var(--brand)}
.cta .k{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-ink)}
.cta strong{display:block; font-family:var(--font-display); font-size:20px; letter-spacing:-.015em; margin-top:7px}
.cta span{display:block; color:var(--ink-2); font-size:15.5px; margin-top:6px}
.cta .go{display:inline-block; margin-top:14px; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--brand);
  padding:9px 16px; border-radius:8px}

.fases{margin-top:18px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface)}
.fase{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:baseline;
  padding:13px 16px; border-bottom:1px solid var(--line)}
.fase:last-child{border-bottom:0}
.fase .n{font-family:var(--font-mono); font-size:11px; color:var(--brand-ink); font-weight:500}
.fase .d{font-family:var(--font-mono); font-size:12px; color:var(--muted); white-space:nowrap}
.fase em{font-style:normal; color:var(--ink-2); font-size:15px; display:block; margin-top:3px}
.fase b{font-weight:600; font-size:16px}
@media(max-width:560px){.fase{grid-template-columns:auto 1fr} .fase .d{grid-column:2}}

.aviso{border-left:3px solid var(--amber); background:var(--surface); border-radius:0 10px 10px 0;
  padding:14px 18px; margin-top:20px; color:var(--ink-2); font-size:16px}
.aviso strong{color:var(--ink)}

.faq{margin-top:16px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; padding:15px 0; font-family:var(--font-display); font-weight:600; font-size:17px;
  list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--font-mono); color:var(--brand); font-size:18px}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding-bottom:16px; margin-top:0}

.otras{margin-top:46px; padding-top:26px; border-top:1px solid var(--line)}
.otras ul{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:14px}
.otras a{display:block; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:13px 15px; text-decoration:none; color:var(--ink); font-size:15.5px; font-weight:600}
.otras a:hover{border-color:var(--brand)}
.otras a span{display:block; font-weight:400; font-size:13.5px; color:var(--muted); margin-top:3px}

footer{margin-top:48px; padding:24px 0 44px; border-top:1px solid var(--line); color:var(--muted); font-size:14px}
footer .row{display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between}
footer a{color:var(--ink-2); text-decoration:none}
footer a:hover{text-decoration:underline}