:root { --bg: #f5f7fb; --surface: #ffffff; --ink: #111827; --muted: #526173; --line: rgba(17, 24, 39, 0.12); --navy: #0d1b2a; --blue: #1d4f7a; --sky: #0ea5e9; --green: #18745c; --red: #b42318; --amber: #b7791f; --shadow: 0 14px 36px rgba(17, 24, 39, 0.08); --max: 1120px; --space: clamp(1rem, 3vw, 1.75rem); --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
} *,
*::before,
*::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--ink); background: linear-gradient(180deg, #edf3f8 0%, var(--bg) 34rem); line-height: 1.6;
} img { max-width: 100%; height: auto; } a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px;
} a:hover { color: var(--sky); }.skip-link { position: absolute; left: -999px; top: 0; z-index: 100; padding: 0.65rem 1rem; background: var(--navy); color: #fff;
}.skip-link:focus { left: 1rem; top: 1rem; }.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(245, 247, 251, 0.94); backdrop-filter: blur(14px);
}.header-inner,.hero,.section,.notice,.footer-inner { width: min(100%, var(--max)); margin: 0 auto; padding-left: var(--space); padding-right: var(--space);
}.header-inner { min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}.logo { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--navy); font-weight: 800; text-decoration: none;
}.logo__mark { width: 2.4rem; height: 2.4rem; object-fit: contain;
}.logo__text { font-size: 1.02rem; line-height: 1.1;
}.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 1rem;
}.site-nav a,.footer-nav a { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent;
}.site-nav a:hover,.site-nav a:focus-visible,.footer-nav a:hover,.footer-nav a:focus-visible { color: var(--blue); border-bottom-color: var(--sky);
}.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.58fr); gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; padding-top: clamp(2.6rem, 7vw, 5rem); padding-bottom: clamp(2.3rem, 6vw, 4.25rem);
}.eyebrow { margin: 0 0 0.6rem; color: var(--green); font-size: 0.78rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase;
} h1,
h2,
h3,
p { overflow-wrap: anywhere; } h1 { max-width: 11ch; margin: 0 0 1rem; color: var(--navy); font-size: clamp(2.15rem, 6vw, 4.65rem); line-height: 1; letter-spacing: 0;
} h2 { margin: 0 0 0.7rem; color: var(--navy); font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.15; letter-spacing: 0;
} h3 { margin: 0 0 0.55rem; font-size: 1.15rem; line-height: 1.25;
}.hero__lead { max-width: 62ch; margin: 0 0 1.4rem; color: var(--muted); font-size: 1.12rem;
}.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem;
}.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.85rem; padding: 0.72rem 1.1rem; border: 1px solid var(--line); border-radius: 7px; font-weight: 800; text-decoration: none;
}.btn--primary { color: #fff; background: var(--blue); border-color: var(--blue);
}.btn--primary:hover { color: #fff; background: var(--navy); }.btn--secondary { color: var(--navy); background: var(--surface); }.hero__panel { display: grid; gap: 0.8rem;
}.metric { padding: 1.1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow);
}.metric__number,.metric__label { display: block; }.metric__number { color: var(--blue); font-size: 2rem; font-weight: 900; line-height: 1;
}.metric__label { margin-top: 0.35rem; color: var(--muted); font-weight: 700;
}.notice { display: grid; grid-template-columns: minmax(0, 0.65fr) minmax(0, 1fr); gap: 1.25rem; margin-bottom: 1rem; padding-top: 1.2rem; padding-bottom: 1.2rem; border-top: 1px solid rgba(180, 35, 24, 0.22); border-bottom: 1px solid rgba(180, 35, 24, 0.22); background: #fff7ed;
}.notice p:last-child { margin: 0; color: #5f3217; font-weight: 650;
}.section { padding-top: clamp(2.4rem, 6vw, 4rem); padding-bottom: clamp(2.4rem, 6vw, 4rem);
}.section--alt { max-width: none; width: 100%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #ffffff;
}.section--alt > * { width: min(100%, var(--max)); margin-left: auto; margin-right: auto; padding-left: var(--space); padding-right: var(--space);
}.section__head { max-width: 760px; margin-bottom: 1.35rem;
}.section__head p:last-child { margin: 0; color: var(--muted);
}.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}.article-card { min-height: 15rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04);
}.article-card--alert { border-color: rgba(180, 35, 24, 0.34); background: #fffafa;
}.article-card__meta { margin: 0 0 0.65rem; color: var(--amber); font-size: 0.78rem; font-weight: 900; text-transform: uppercase;
}.article-card h3 a { color: var(--navy); text-decoration: none;
}.article-card h3 a:hover { color: var(--blue); text-decoration: underline;
}.article-card p:last-child { margin-bottom: 0; color: var(--muted);
}.topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem;
}.topic-grid a,.guide__links a { display: flex; align-items: center; min-height: 3.2rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; color: var(--navy); font-weight: 800; text-decoration: none;
}.topic-grid a:hover,.guide__links a:hover { border-color: rgba(14, 165, 233, 0.55); color: var(--blue);
}.guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.35fr); gap: 1.25rem; align-items: start;
}.guide__main p { max-width: 72ch; color: var(--muted);
}.guide__links { display: grid; gap: 0.75rem;
}.faq { padding-top: 0; } details { border-top: 1px solid var(--line); background: transparent;
} details:last-child { border-bottom: 1px solid var(--line); } summary { cursor: pointer; padding: 1rem 0; color: var(--navy); font-weight: 850;
} details p { max-width: 72ch; margin: 0 0 1rem; color: var(--muted);
}.site-footer { border-top: 1px solid var(--line); background: var(--navy); color: #dbe7f3;
}.footer-inner { padding-top: 1.7rem; padding-bottom: 1.7rem;
}.site-footer.logo { color: #fff; }.logo--footer.logo__mark { width: 2rem; height: 2rem;
}.footer-inner p { max-width: 76ch; color: #c6d3df;
}.footer-nav { display: flex; flex-wrap: wrap; gap: 0.65rem 1rem;
}.footer-nav a { color: #e8f1f9; } @media (max-width: 860px) {.hero,.notice,.guide { grid-template-columns: 1fr; }.header-inner { align-items: flex-start; flex-direction: column; padding-top: 0.8rem; padding-bottom: 0.8rem; }.site-nav { justify-content: flex-start; }.article-grid,.topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } h1 { max-width: 13ch; }
} @media (max-width: 560px) {.site-nav { gap: 0.2rem 0.75rem; }.site-nav a { font-size: 0.94rem; }.article-grid,.topic-grid { grid-template-columns: 1fr; }.article-card { min-height: auto; }.btn { width: 100%; }
}.content-page { width: min(100%, var(--max)); margin: 0 auto; padding: 0 var(--space) clamp(2.6rem, 6vw, 4rem);
}.page-hero { padding: clamp(2.2rem, 6vw, 4rem) 0 clamp(1.2rem, 4vw, 2rem);
}.page-hero h1 { max-width: 14ch;
}.page-hero p:last-child { max-width: 68ch; margin: 0; color: var(--muted); font-size: 1.08rem;
}.compact-notice { display: block; width: 100%; margin: 0 0 1.4rem; padding: 1rem; border: 1px solid rgba(180, 35, 24, 0.22); border-radius: 8px; background: #fff7ed; color: #5f3217;
}.article-content { max-width: 820px; padding: clamp(1.2rem, 3vw, 1.6rem); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04);
}.article-content.article-meta { margin-bottom: 1rem; color: var(--muted); font-size: 0.92rem; font-weight: 700;
}.article-content p { color: #263241; font-size: 1.06rem;
}.article-content h2,.article-content h3,.article-content h4 { margin-top: 1.6rem;
}.article-content a { font-weight: 700;
}.related-panel { max-width: 820px; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}.related-panel h2 { font-size: 1.35rem;
}.topic-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr));
}.archive-list.article-card h2 { margin: 0 0 0.55rem; font-size: 1.15rem; line-height: 1.25;
}.archive-list.article-card h2 a { color: var(--navy); text-decoration: none;
}.archive-list.article-card h2 a:hover { color: var(--blue); text-decoration: underline;
} @media (max-width: 860px) {.topic-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
} @media (max-width: 560px) {.content-page { padding-left: var(--space); padding-right: var(--space); }.topic-grid--compact { grid-template-columns: 1fr; }
} 
.share-panel {
  max-width: 820px;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.share-panel h2 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
}

.share-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--navy);
  font-weight: 800;
  text-decoration: none;
}

.share-link:hover,
.share-link:focus-visible {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.share-link--x:hover,
.share-link--x:focus-visible { background: #111827; border-color: #111827; }
.share-link--facebook:hover,
.share-link--facebook:focus-visible { background: #1877f2; border-color: #1877f2; }
.share-link--linkedin:hover,
.share-link--linkedin:focus-visible { background: #0a66c2; border-color: #0a66c2; }
.share-link--whatsapp:hover,
.share-link--whatsapp:focus-visible { background: #128c7e; border-color: #128c7e; }
.share-link--email:hover,
.share-link--email:focus-visible { background: var(--green); border-color: var(--green); }

@media (max-width: 560px) {
  .share-link { width: 100%; }
}