:root{
  --fg:#111; --fg-dim:#444; --bg:#fff; --muted:#f6f7f8; --border:#e7e7e7;
  --brand:#1a73e8; --brand-2:#34a853; --link:#0b57d0;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
img{max-width:100%;height:auto}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1080px;margin:0 auto;padding:0 1rem}
.navbar{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:10}
.navbar .inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.6rem}
.brand img{height:36px;width:auto}
.brand-title{font-weight:700;font-size:1.1rem;color:#111}
.nav-links{display:flex;gap:1rem;align-items:center}
.nav-links a{padding:.3rem .5rem;border-radius:.5rem}
.nav-links a:hover{background:var(--muted)}
.btn{display:inline-block;padding:.65rem 1rem;border:1px solid var(--border);border-radius:.8rem;background:#fff;color:#111}
.btn.primary{border-color:transparent;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}
.btn.primary:hover{opacity:.95}
.hero{background:var(--muted);padding:1.2rem;border-radius:1rem}
.section{padding:1.6rem 0}
.card{border:1px solid var(--border);border-radius:1rem;padding:1rem;background:#fff}
footer{margin-top:3rem;border-top:1px solid var(--border);padding:1rem 0;color:#333}
@media (max-width:720px){ .nav-links{display:none} }


/* --- Unificación estética extendida --- */
:root{
  --fg:#101418; --muted:#f6f8fb; --border:#e6ebf2;
  --brand:#1a73e8; --brand-2:#34a853; --link:#0b57d0;
}
html,body{background:#ffffff}
main{display:block}
.container{max-width:1100px;margin:0 auto;padding:0 1.2rem}
.section{padding:2.2rem 0}
h1{font-size:2rem;line-height:1.25;margin:0 0 1rem 0;font-weight:800;color:#0f172a}
h2{font-size:1.4rem;line-height:1.3;margin:1.6rem 0 .8rem;font-weight:700;color:#111827}
h3{font-size:1.05rem;margin:1rem 0 .5rem;color:#1f2937}
p,li{color:#334155}
.hero{background:var(--muted);border:1px solid var(--border);}
.card{border:1px solid var(--border);border-radius:14px;padding:1rem;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.btn{cursor:pointer;transition:.2s transform}
.btn:hover{transform:translateY(-1px)}
.site-footer{background:#fff;border-top:1px solid var(--border)}
.site-footer a{color:#0b57d0}
figure img{border-radius:12px;border:1px solid var(--border)}
/* tablas y listas coherentes */
table{width:100%;border-collapse:collapse;margin:1rem 0;border:1px solid var(--border)}
th,td{padding:.6rem .7rem;border-bottom:1px solid var(--border);text-align:left}
ul{padding-left:1.2rem}
/* contenidos centrados */
.center {text-align:center}
/* ocultar contenedores vacíos tras limpieza */
section:empty,div:empty,article:empty{display:none}


/* ===== Refinamiento visual global ===== */
:root{
  --fg:#0f172a; --fg-dim:#475569; --bg:#fafbff;
  --muted:#f6f7fb; --border:#e8ecf3;
  --brand:#1a73e8; --brand-2:#34a853; --link:#1555c0;
}

html,body{background:var(--bg); color:var(--fg)}
/* Fondo sutil tipo grid */
body{}

.container{max-width:1080px;margin:0 auto;padding:0 1.2rem}
.section{padding:2.2rem 0}
.hero{
  background:#fff; border:1px solid var(--border);
  border-radius:20px; padding:1.4rem 1.6rem;
  box-shadow:0 8px 24px rgba(17,24,39,.06);
}

/* Tipografía de encabezados refinada */
h1{font-weight:800;font-size:2.05rem;line-height:1.25;color:#0b1220;margin:0 0 1rem}
h2{font-weight:700;font-size:1.35rem;line-height:1.3;color:#111827;margin:1.6rem 0 .8rem}
h3{font-weight:600;font-size:1.05rem;color:#1f2937;margin:1rem 0 .5rem}

/* Navegación */
.navbar{background:#fff;border-bottom:1px solid var(--border)}
.nav-links a{
  color:#364152; font-weight:600; letter-spacing:.1px;
  padding:.4rem .7rem; border-radius:10px;
}
.nav-links a:hover{background:var(--muted); text-decoration:none}
/* "Geoportal" como CTA al final */
.nav-links a.cta-geoportal{
  border:1px solid var(--border); background:#fff; color:#0b57d0;
}
.nav-links a.cta-geoportal:hover{
  border-color:#c9d4e5; transform:translateY(-1px);
}

/* Cards y contenido legible */
.card{border:1px solid var(--border);border-radius:16px;padding:1rem;background:#fff;box-shadow:0 6px 16px rgba(17,24,39,.05)}
.prose{max-width:860px;margin:0 auto}
.prose p{color:var(--fg-dim)}
.prose ul{padding-left:1.2rem}

/* Footer */
.site-footer{background:#fff;border-top:1px solid var(--border)}
.site-footer a{color:#0b57d0}


/* ===== Tipografía y estética global ===== */
:root{
  --fg:#0f172a; --fg-dim:#475569; --bg:#fafbff;
  --muted:#f6f7fb; --border:#e8ecf3;
  --brand:#1a73e8; --brand-2:#34a853; --link:#1555c0;
}
html,body{font-family:'Roboto', system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--fg)}
/* Fondo ligero */
body{}
/* Encabezados */
h1{font-weight:900;font-size:2.1rem;line-height:1.25;color:#0b1220;margin:0 0 1rem}
h2{font-weight:800;font-size:1.4rem;line-height:1.3;color:#111827;margin:1.6rem 0 .9rem}
h3{font-weight:700;font-size:1.06rem;color:#1f2937;margin:1rem 0 .5rem}

/* Párrafo destacado (negrilla útil) */
.lead{font-weight:500}
.prose{max-width:860px;margin:0 auto}
.prose p{color:var(--fg-dim)}

/* Botones */
.btn{display:inline-block;padding:.7rem 1.05rem;border-radius:12px;border:1px solid var(--border);background:#fff;color:#0b1220;font-weight:600;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(17,24,39,.10);border-color:#d7ddea;text-decoration:none}
.btn:focus{outline:none;box-shadow:0 0 0 3px rgba(26,115,232,.25)}
.btn.primary{border-color:transparent;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(26,115,232,.35)}

/* Nav con Geoportal al final estilo CTA */
.navbar{background:#fff;border-bottom:1px solid var(--border)}
.nav-links a{color:#364152;font-weight:600;letter-spacing:.1px;padding:.45rem .75rem;border-radius:10px}
.nav-links a:hover{background:var(--muted)}
.nav-links a.cta-geoportal{border:1px solid var(--border);background:#fff;color:#0b57d0}
.nav-links a.cta-geoportal:hover{border-color:#c9d4e5;transform:translateY(-1px)}

/* Hero y cards */
.hero{background:#fff;border:1px solid var(--border);border-radius:20px;padding:1.4rem 1.6rem;box-shadow:0 8px 24px rgba(17,24,39,.06)}
.card{border:1px solid var(--border);border-radius:16px;padding:1rem;background:#fff;box-shadow:0 6px 16px rgba(17,24,39,.05)}


/* === Fondo topográfico sutil en todo el sitio === */

/* Ajustes de Portafolio */
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.portfolio-section{background:#fff;border:1px solid var(--border);border-radius:16px;padding:1rem;box-shadow:0 6px 16px rgba(17,24,39,.05)}
.portfolio-section h3{margin-top:.2rem}
.portfolio-section ul{padding-left:1.1rem;margin:.6rem 0}
/* Nav: Geoportal último como CTA */
.nav-links a.cta-geoportal{border:1px solid var(--border);background:#fff;color:#0b57d0}
.nav-links a.cta-geoportal:hover{border-color:#c9d4e5;transform:translateY(-1px)}


/* === Fondo topográfico global (sin punticos) === */
body{ background:#fafbff; }



/* === Portafolio maquetado === */
.toc{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.toc a{display:inline-block;padding:.5rem .7rem;border:1px solid var(--border);border-radius:10px;background:#fff}
.toc a:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 16px rgba(17,24,39,.08)}
.prose{max-width:900px;margin:0 auto}
.prose h2{margin-top:2rem}
.prose h3{margin-top:1rem}
.prose ul{padding-left:1.2rem}
.section.flat{padding-top:0}


/* ===== Header organizado ===== */
.navbar{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:50}
.navbar .inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:68px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand-mark{height:28px;width:auto;display:block}
.brand-title{font-weight:800;font-size:1.06rem;color:#0f172a}
.nav-links{display:flex;gap:1.1rem;align-items:center}
.nav-links a{color:#364152;font-weight:600;letter-spacing:.1px;padding:.45rem .75rem;border-radius:10px}
.nav-links a:hover{background:var(--muted);text-decoration:none}
.nav-links a.cta-geoportal{border:1px solid var(--border);background:#fff;color:#0b57d0}
.nav-links a.cta-geoportal:hover{border-color:#c9d4e5;transform:translateY(-1px)}
/* Responsive: menú hamburguesa */
.menu-toggle{display:none;border:1px solid var(--border);background:#fff;border-radius:10px;padding:.45rem .6rem;cursor:pointer}
@media (max-width:820px){
  .menu-toggle{display:block}
  .nav-links{position:fixed;top:68px;right:0;left:0;display:none;flex-direction:column;gap:.2rem;background:#fff;border-bottom:1px solid var(--border);padding:.6rem;box-shadow:0 10px 20px rgba(17,24,39,.06)}
  body[data-menu="open"] .nav-links{display:flex}
}


:root{
  --fg:#0b1220; --fg-dim:#223046; --bg:#ffffff;
  --muted:#f6f7fb; --border:#e5e9f3;
  --brand:#1a73e8; --brand-2:#34a853; --link:#0b57d0;
}
html,body{color:var(--fg); background:var(--bg)}
p,li{color:var(--fg)} /* subir contraste */
a{color:var(--link)}


/* === Solo curvas topográficas, visibles en todas las páginas === */



.hero{background:#fff;border:1px solid var(--border);border-radius:20px;padding:1.4rem 1.6rem;box-shadow:0 8px 24px rgba(17,24,39,.06)}
.section{padding:2.0rem 0}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:1rem;box-shadow:0 6px 16px rgba(17,24,39,.05)}
/* Evitar fondos planos en wrappers genéricos */
.page, main, .content, .wrapper{background:transparent !important}
/* Contraste de headings */
h1{font-weight:900;color:#0a1326}
h2{font-weight:800;color:#0b172f}
h3{font-weight:700;color:#132036}


/* Animaciones de entrada (Portafolio) */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}
.toc a{display:inline-block;padding:.5rem .75rem;border:1px solid var(--border);border-radius:12px;background:#fff}
.toc a:hover{text-decoration:none;box-shadow:0 6px 16px rgba(17,24,39,.08);transform:translateY(-1px)}


/* === Fondo topográfico global en <html> (siempre visible) === */
html{
  background-color:#ffffff;
  background-image:url('/assets/images/bg-topo-ultra.png');
  background-repeat:repeat;
  background-position:center;
  background-size:720px auto;
  background-attachment:fixed;
}
body{ background-color:transparent; }


/* Contraste reforzado y scroll suave */
html{ scroll-behavior:smooth; }
p, li, a, small, .muted, .text-muted{ color:#111827 !important; }

/* CONTRASTE_PORTAFOLIO */
p,li,small{color:#101828 !important}
h1,h2,h3{color:#0b1220}


/* === TOC con íconos + scrollspy === */
.toc{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.toc .pill{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(17,24,39,.04)}
.toc .pill:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 8px 18px rgba(17,24,39,.08)}
.toc .pill.active{border-color:#0b57d0; box-shadow:0 8px 20px rgba(11,87,208,.16)}
.toc .ico{width:18px;height:18px;display:inline-block}
.hicon{width:22px;height:22px;vertical-align:-4px;margin-right:.35rem;opacity:.9}
/* Anclaje con offset por header sticky */
.prose h2{scroll-margin-top:88px}