/* CimaTech · páginas informativas (asesor de WhatsApp, privacidad)
   Mismos colores y fuentes del sitio principal. Tema oscuro por defecto y claro según el dispositivo. */
:root {
  --abismo: #0B1A2E; --marino: #16243D; --marino2: #1E3A5F;
  --cima: #26E691; --verde: #4CD6A4; --claro: #E8EEF5; --tenue: #8FA3BC;
  --borde: rgba(255,255,255,0.10); --superficie: rgba(255,255,255,0.04);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --abismo: #F4F7FB; --marino: #FFFFFF; --marino2: #E3EBF4;
    --cima: #0F9D6B; --verde: #12B97E; --claro: #0B1A2E; --tenue: #5A6B82;
    --borde: rgba(11,26,46,0.12); --superficie: rgba(11,26,46,0.03);
    color-scheme: light;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--abismo); color: var(--claro); font: 16px/1.65 Inter, system-ui, sans-serif; }
a { color: var(--cima); }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }
header.top { border-bottom: 1px solid var(--borde); background: var(--marino); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--claro); font: 700 1.1rem "Space Grotesk", sans-serif; letter-spacing: -.01em; }
.marca img { height: 38px; width: auto; }
.marca span b { color: var(--cima); font-weight: 700; }
.volver { font-size: .9rem; color: var(--tenue); text-decoration: none; }
.volver:hover { color: var(--claro); }
main { padding: 44px 0 64px; }
.eyebrow { font: 600 .78rem "Space Grotesk", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cima); }
h1 { font: 700 clamp(1.9rem, 4.5vw, 2.7rem)/1.15 "Space Grotesk", sans-serif; letter-spacing: -.02em; margin: 8px 0 14px; text-wrap: balance; }
h2 { font: 700 1.35rem/1.25 "Space Grotesk", sans-serif; margin: 38px 0 10px; }
h3 { font: 600 1.05rem/1.3 "Space Grotesk", sans-serif; margin: 0 0 6px; }
p, li { color: var(--claro); }
.lead { font-size: 1.12rem; color: var(--tenue); max-width: 62ch; }
.muted { color: var(--tenue); }
ul { padding-left: 1.2em; }
li { margin: 4px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 16px; }
.card { background: var(--marino); border: 1px solid var(--borde); border-radius: 14px; padding: 18px; }
.card p { margin: 0; color: var(--tenue); font-size: .95rem; }
.pasos { counter-reset: paso; list-style: none; padding: 0; display: grid; gap: 10px; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 14px; margin: 0; }
.pasos li::before { content: counter(paso); width: 34px; height: 34px; border-radius: 50%; background: var(--cima); color: #0B1A2E; display: grid; place-items: center; font: 700 .95rem "Space Grotesk", sans-serif; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 10px; font-weight: 600; text-decoration: none; border: 1px solid var(--borde); color: var(--claro); background: var(--superficie); }
.btn.primary { background: var(--cima); color: #0B1A2E; border-color: transparent; }
.ficha { margin-top: 12px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; background: var(--marino); border: 1px solid var(--borde); border-radius: 14px; padding: 18px; }
.ficha dt { color: var(--tenue); }
.ficha dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.nota { border-left: 3px solid var(--cima); background: var(--superficie); padding: 12px 14px; border-radius: 0 10px 10px 0; color: var(--tenue); }
.indice { background: var(--marino); border: 1px solid var(--borde); border-radius: 14px; padding: 14px 18px; margin-top: 18px; }
.indice ol { margin: 6px 0 0; padding-left: 1.3em; }
footer.pie { border-top: 1px solid var(--borde); padding: 24px 0 40px; color: var(--tenue); font-size: .88rem; }
footer.pie .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
footer.pie a { color: var(--tenue); }
@media (max-width: 560px) {
  .ficha { grid-template-columns: 1fr; gap: 2px; }
  .ficha dd { margin-bottom: 8px; }
  .volver { display: none; }
}