/* Portada de la red Compass — mismo sistema visual (crema / verde tinta / lima,
   display Georgia, cuerpo Geist). Los colores base, el botón de tema y el pie
   común están en kit/kit.css; aquí van solo los de la portada. */

:root{
  --card-orange:#ffddbf;--art-orange:#785126;
  --card-blue:#cad9f4;--art-blue:#3b5890;
  --card-violet:#ddd3f2;--art-violet:#5a4690;
  --card-green:#dbe8c4;--art-green:#4c6312;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --card-orange:#33261a;--art-orange:#e0a86a;
  --card-blue:#1c2638;--art-blue:#9bb7ef;
  --card-violet:#262035;--art-violet:#c0aef0;
  --card-green:#1f2b17;--art-green:#c3df4a;
}}
:root[data-theme="dark"]{
  --card-orange:#33261a;--art-orange:#e0a86a;
  --card-blue:#1c2638;--art-blue:#9bb7ef;
  --card-violet:#262035;--art-violet:#c0aef0;
  --card-green:#1f2b17;--art-green:#c3df4a;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.shell{width:min(1080px,calc(100% - 32px));margin-inline:auto}

.nav{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:750;letter-spacing:-.5px;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--deep);color:var(--lime);flex:none}
.brand-mark svg{width:20px;height:20px;display:block}
.nav-end{display:flex;align-items:center;gap:16px}
.nav-link{font-size:14px;color:var(--text-2);text-decoration:none}
.nav-link:hover{color:var(--olive-text)}
.nav-apoyar{font-weight:700;color:var(--text);border-bottom:1px solid;padding-bottom:2px;white-space:nowrap}

.hero{padding:96px 0 72px;text-align:center}
.kicker{color:var(--olive-text);font-size:11px;font-weight:850;letter-spacing:.16em;text-transform:uppercase}
h1{font:400 clamp(40px,7.2vw,88px)/.98 var(--font-display);letter-spacing:-.05em;margin:22px auto 26px;text-wrap:balance}
h1 em{color:var(--accent-em);display:block}
.intro{max-width:620px;margin:0 auto 34px;color:var(--text-2);font-size:18px;line-height:1.65}
.boton{display:inline-flex;gap:12px;align-items:center;background:var(--btn-bg);color:var(--btn-text);padding:15px 22px;border-radius:9px;font-weight:700;font-size:15px;text-decoration:none;transition:transform .16s}
.boton:hover{transform:translateY(-1px)}

.herramientas{padding:24px 0 40px;scroll-margin-top:16px}
h2{font:400 clamp(32px,4.4vw,48px)/1.05 var(--font-display);letter-spacing:-.04em;margin:0 0 10px}
.seccion-intro{color:var(--text-2);margin:0 0 30px;max-width:600px}

.tarjeta{display:flex;flex-direction:column;gap:8px;text-decoration:none;border-radius:18px;padding:26px;border:1px solid var(--line);transition:transform .16s,border-color .16s}
.tarjeta:hover{transform:translateY(-2px);border-color:var(--text)}
.etiqueta{font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.titulo{font:400 34px/1.05 var(--font-display);letter-spacing:-.03em}
.texto{font-size:15px;line-height:1.55;opacity:.85}
.abrir{margin-top:auto;padding-top:10px;font-weight:750;font-size:14px}
.insignia{display:inline-block;font:700 11px/1 var(--font-sans);letter-spacing:.04em;padding:6px 9px;border-radius:999px;background:var(--lime);color:var(--ink)}
.insignia:empty{display:none}

/* El simulador: tarjeta grande, oscura, con los tres activos que cubre. */
.destacada{flex-direction:row;align-items:center;gap:40px;background:var(--deep);color:#f2efe5;border-color:transparent;padding:40px}
.destacada:hover{border-color:var(--lime)}
.destacada .cuerpo{display:flex;flex-direction:column;gap:8px}
.destacada .etiqueta{color:var(--lime);opacity:1}
.destacada .titulo{font-size:44px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.destacada .abrir{color:var(--lime)}
.simbolos{display:flex;gap:10px;flex:none}
.simbolos i{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;font:700 22px var(--font-sans);font-style:normal;background:#ffffff14;color:var(--lime)}
.simbolos i:last-child{font-size:16px}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.simbolo{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#ffffff9c;font:700 20px var(--font-sans);margin-bottom:8px}
.naranja{background:var(--card-orange)}.naranja .simbolo{color:var(--art-orange)}
.azul{background:var(--card-blue)}.azul .simbolo{color:var(--art-blue)}
.violeta{background:var(--card-violet)}.violeta .simbolo{color:var(--art-violet)}
/* El mejor día de la semana: tarjeta ancha con las siete iniciales. */
.ancha{flex-direction:row;align-items:center;gap:32px;margin-top:16px}
.ancha .cuerpo{display:flex;flex-direction:column;gap:8px}
.verde{background:var(--card-green)}
.semana{display:grid;grid-template-columns:repeat(7,34px);gap:6px;flex:none}
.semana i{display:grid;place-items:center;height:34px;border-radius:50%;background:#ffffff9c;color:var(--art-green);font:700 14px var(--font-sans);font-style:normal}
.semana i:first-child{background:var(--art-green);color:var(--card-green)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.simbolo,.semana i:not(:first-child)){background:#ffffff14}}
:root[data-theme="dark"] :is(.simbolo,.semana i:not(:first-child)){background:#ffffff14}
/* En oscuro la tarjeta del simulador se separa del fondo con un borde. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .destacada{border-color:var(--line)}}
:root[data-theme="dark"] .destacada{border-color:var(--line)}

.apoyo{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px 32px}
.apoyo p{margin:0;color:var(--text-2)}
.apoyo .apoyo-titulo{font:400 26px/1.15 var(--font-display);letter-spacing:-.02em;color:var(--text);margin-bottom:4px}

.aviso{margin-top:28px;text-align:center;font-size:12px;color:var(--faint)}

footer{margin-top:40px;padding:22px 0 40px;border-top:1px solid var(--line);display:grid;gap:16px}
.pie-marca{font-size:13px;color:var(--muted)}
.pie-marca span{font-weight:750;color:var(--text)}

@media (max-width:820px){
  .trio{grid-template-columns:1fr}
  .ancha{flex-direction:column;align-items:flex-start;gap:18px}
  .semana{grid-template-columns:repeat(7,30px);gap:5px}
  .semana i{height:30px;font-size:13px}
  .destacada{flex-direction:column;align-items:flex-start;gap:22px;padding:28px}
  .simbolos i{width:50px;height:50px;font-size:18px}
  .destacada .titulo{font-size:36px}
  .hero{padding:64px 0 48px}
}
@media (max-width:560px){
  .ocultar-movil{display:none}
  .nav-end{gap:10px}
  .nav-apoyar{font-size:12px}
}
/* En celulares angostos, "Apoyar" queda en el recuadro de apoyo y en el pie. */
@media (max-width:420px){.nav-apoyar{display:none}}