/* ── Variables de color (Mismo estilo que Política de Privacidad) ── */
    :root {
      --color-primary:   #2C4A6E;   /* azul marino profundo */
      --color-secondary: #4A7FA5;   /* azul medio */
      --color-accent:    #C9A96E;   /* dorado cálido */
      --color-light:     #F5F7FA;   /* gris muy claro */
      --color-white:     #FFFFFF;
      --color-text:      #2D2D2D;
      --color-muted:     #6B7280;
      --color-border:    #D1D9E6;
      --font-heading:    'Playfair Display', Georgia, serif;
      --font-body:       'Source Sans 3', 'Helvetica Neue', sans-serif;
    }

    /* ── Reset & base ── */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.75;
      color: var(--color-text);
      background-color: var(--color-light);
    }
    h1, h2, h3, h4, h5 { font-family: var(--font-heading); color: var(--color-primary); font-weight: 700; }
    a { color: var(--color-secondary); text-decoration: none; transition: color .2s; }
    a:hover { color: var(--color-accent); text-decoration: underline; }

    /* ── Barra superior ── */
    .topbar {
      background-color: var(--color-primary);
      color: rgba(255,255,255,.75);
      font-size: .82rem;
      padding: .45rem 0;
    }

    /* ── Cabecera ── */
    .site-header {
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
      padding: 3.5rem 0 3rem;
      position: relative;
      overflow: hidden;
      color: #fff;
    }
    .site-header::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: var(--color-light);
      clip-path: ellipse(55% 100% at 50% 100%);
    }
    .header-icon {
      width: 72px;
      height: 72px;
      background-color: rgba(255,255,255,.12);
      border: 2px solid rgba(255,255,255,.25);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      color: var(--color-accent);
      margin-bottom: 1.5rem;
      margin-inline: auto;
    }
    .site-header h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); }
    .badge-date {
      display: inline-block;
      background-color: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.3);
      font-size: .78rem;
      padding: .3rem .85rem;
      border-radius: 50px;
      margin-bottom: 1.1rem;
    }
      .badge-date-2 {
      display: inline-block;
      background-color: #e6dfdf;
      border: 1px solid rgba(255,255,255,.3);
      font-size: .78rem;
      padding: .3rem .85rem;
      border-radius: 50px;
      margin-bottom: 1.4rem;
    }

    /* ── Navegación lateral ── */
    .toc-sidebar { position: sticky; top: 1.5rem; }
    .toc-card {
      background: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: 12px;
      padding: 1.5rem 1.25rem;
      box-shadow: 0 2px 12px rgba(44,74,110,.07);
    }
    .toc-card .nav-link {
      font-size: .88rem;
      color: var(--color-text);
      padding: .35rem .5rem;
      border-radius: 6px;
    }
    .toc-card .nav-link:hover, .toc-card .nav-link.active {
      background-color: rgba(44,74,110,.08);
      color: var(--color-primary);
      font-weight: 600;
    }

    /* ── Secciones ── */
    .section-card {
      background: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: 14px;
      padding: 2.25rem 2rem;
      margin-bottom: 2rem;
      box-shadow: 0 2px 14px rgba(44,74,110,.06);
    }
    .section-card h2 {
      font-size: 1.55rem;
      margin-bottom: 1.25rem;
      padding-bottom: .75rem;
      border-bottom: 2px solid var(--color-border);
    }
    .accent-line {
      display: inline-block;
      width: 36px;
      height: 3px;
      background-color: var(--color-accent);
      margin-right: .5rem;
      vertical-align: middle;
    }

    /* ── Listas y Tablas ── */
    .id-list { list-style: none; padding-left: 0; }
    .id-list li { margin-bottom: .5rem; display: flex; align-items: flex-start; gap: .75rem; }
    .id-list li i { color: var(--color-accent); margin-top: .3rem; }

    /* ── Pie de página ── */
    .site-footer {
      background-color: var(--color-primary);
      color: rgba(255,255,255,.7);
      padding: 2.5rem 0 1.5rem;
      margin-top: 3rem;
    }
    .site-footer h5 { color: #fff; margin-bottom: 1rem; }

    #backToTop {
      position: fixed; bottom: 2rem; right: 2rem;
      width: 44px; height: 44px;
      background-color: var(--color-primary);
      color: #fff; border: none; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity .3s; z-index: 1000;
    }
    #backToTop.visible { opacity: 1; }

    @media (max-width: 991.98px) { .toc-sidebar { display: none; } }