/* ── Variables de color ── */
    :root {
      --color-primary:   #a9a309;   /* 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;
      font-weight: 400;
      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;
      letter-spacing: .03em;
      padding: .45rem 0;
    }
    .topbar a { color: rgba(255,255,255,.85); }
    .topbar a:hover { color: var(--color-accent); text-decoration: none; }

    /* ── Cabecera principal ── */
    .site-header {
      /*background-color:#a9a309;*/
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
      padding: 3.5rem 0 3rem;
      position: relative;
      overflow: hidden;
    }
    .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%);
    }
    .site-header .badge-date {
      display: inline-block;
      background-color: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.3);
      color: #fff;
      font-size: .78rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: .3rem .85rem;
      border-radius: 50px;
      margin-bottom: 1.1rem;
    }
    .site-header .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;
    }
    .site-header h1 {
      color: #fff;
      font-size: clamp(1.9rem, 4vw, 2.8rem);
      line-height: 1.2;
      margin-bottom: .6rem;
    }
    .site-header .subtitle {
      color: rgba(255,255,255,.8);
      font-size: 1.05rem;
      font-weight: 300;
    }
    .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;
    }

    /* ── Navegación lateral (sticky) ── */
    .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 h6 {
      font-family: var(--font-body);
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--color-muted);
      margin-bottom: 1rem;
    }
    .toc-card .nav-link {
      font-size: .88rem;
      color: var(--color-text);
      padding: .35rem .5rem;
      border-radius: 6px;
      transition: background .15s, color .15s;
    }
    .toc-card .nav-link:hover,
    .toc-card .nav-link.active {
      background-color: rgba(44,74,110,.08);
      color: var(--color-primary);
      font-weight: 600;
    }
    .toc-card .nav-link i {
      font-size: .75rem;
      margin-right: .4rem;
      color: var(--color-accent);
    }

    /* ── Contenido principal ── */
    .main-content { padding: 2.5rem 0 4rem; }

    /* ── Tarjetas de sección ── */
    .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);
      transition: box-shadow .25s;
    }
    .section-card:hover { box-shadow: 0 6px 24px rgba(44,74,110,.12); }

    .section-card .section-tag {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      background-color: rgba(44,74,110,.08);
      color: var(--color-primary);
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .07em;
      text-transform: uppercase;
      padding: .3rem .8rem;
      border-radius: 50px;
      margin-bottom: 1rem;
    }
    .section-card .section-tag i { color: var(--color-accent); }

    .section-card h2 {
      font-size: 1.55rem;
      margin-bottom: 1.25rem;
      padding-bottom: .75rem;
      border-bottom: 2px solid var(--color-border);
    }
    .section-card h2 .accent-line {
      display: inline-block;
      width: 36px;
      height: 3px;
      background-color: var(--color-accent);
      border-radius: 2px;
      vertical-align: middle;
      margin-right: .5rem;
    }

    /* ── Tabla de información básica ── */
    .info-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid var(--color-border);
      margin-bottom: 1.75rem;
      font-size: .93rem;
    }
    .info-table thead th {
      background-color: var(--color-primary);
      color: #fff;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: .8rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: .75rem 1rem;
    }
    .info-table tbody tr:nth-child(even) td { background-color: rgba(44,74,110,.03); }
    .info-table tbody td {
      padding: .7rem 1rem;
      border-top: 1px solid var(--color-border);
      vertical-align: top;
    }
    .info-table tbody td:first-child {
      font-weight: 600;
      color: var(--color-primary);
      white-space: nowrap;
      width: 160px;
    }

    /* ── Preguntas (acordeón) ── */
    .accordion-item {
      border: 1px solid var(--color-border) !important;
      border-radius: 10px !important;
      margin-bottom: .6rem;
      overflow: hidden;
    }
    .accordion-button {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: .97rem;
      color: var(--color-primary) !important;
      background-color: var(--color-white) !important;
      padding: 1rem 1.25rem;
    }
    .accordion-button:not(.collapsed) {
      background-color: rgba(44,74,110,.05) !important;
      box-shadow: none !important;
    }
    .accordion-button::after {
      filter: invert(25%) sepia(60%) saturate(500%) hue-rotate(190deg);
    }
    .accordion-body {
      font-size: .95rem;
      line-height: 1.75;
      color: var(--color-text);
      padding: 1rem 1.5rem 1.25rem;
      background-color: var(--color-white);
    }
    .accordion-body ul {
      padding-left: 1.25rem;
      margin-bottom: 0;
    }
    .accordion-body ul li { margin-bottom: .4rem; }
    .accordion-body ul li::marker { color: var(--color-accent); }

    /* ── Número de pregunta ── */
    .q-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      background-color: var(--color-accent);
      color: #fff;
      font-size: .75rem;
      font-weight: 700;
      border-radius: 50%;
      margin-right: .6rem;
      flex-shrink: 0;
    }

    /* ── Pie de página ── */
    .site-footer {
      background-color: var(--color-primary);
      color: rgba(255,255,255,.7);
      font-size: .88rem;
      padding: 2.5rem 0 1.5rem;
    }
    .site-footer h5 {
      color: #fff;
      font-size: 1rem;
      margin-bottom: .75rem;
    }
    .site-footer a { color: rgba(255,255,255,.75); }
    .site-footer a:hover { color: var(--color-accent); }
    .site-footer .divider {
      border-color: rgba(255,255,255,.15);
      margin: 1.5rem 0 1rem;
    }
    .site-footer .footer-bottom {
      font-size: .8rem;
      color: rgba(255,255,255,.45);
    }
    .footer-badge {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      background-color: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.15);
      color: rgba(255,255,255,.7);
      font-size: .78rem;
      padding: .3rem .75rem;
      border-radius: 50px;
    }
    .footer-badge i { color: var(--color-accent); }

    /* ── Botón volver arriba ── */
    #backToTop {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: 44px;
      height: 44px;
      background-color: var(--color-primary);
      color: #fff;
      border: none;
      border-radius: 50%;
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 14px rgba(44,74,110,.35);
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s, transform .3s;
      z-index: 999;
    }
    #backToTop.visible { opacity: 1; pointer-events: auto; }
    #backToTop:hover { background-color: var(--color-secondary); transform: translateY(-2px); }

    /* ── Responsive ── */
    @media (max-width: 991.98px) {
      .toc-sidebar { display: none; }
      .section-card { padding: 1.5rem 1.25rem; }
    }
    @media (max-width: 575.98px) {
      .site-header { padding: 2.5rem 0 2.5rem; }
      .info-table tbody td:first-child { width: auto; white-space: normal; }
    }