/* ── Reset & Variables ───────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --white:   #ffffff;
      --cream:   #f7f4ee;
      --blue-lt: #eaf4f9;
      --teal:    #009eb3;
      --teal-dk: #007a8c;
      --slate:   #3d5a6a;
      --slate-dk:#243b47;
      --text:    #2c3e50;
      --muted:   #5c6f7d;
      --border:  rgba(0,158,179,.18);
      --shadow:  0 4px 32px rgba(0,100,130,.10);
      --radius:  14px;
      --font-head: 'DM Serif Display', Georgia, serif;
      --font-body: 'DM Sans', system-ui, sans-serif;
    }

    html { scroll-behavior: smooth; }
    body { font-family: var(--font-body); color: var(--text); line-height: 1.7; overflow-x: hidden; }

    /* ── Scrollbar ───────────────────────────────────── */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--cream); }
    ::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 3px; }

    /* ── Nav ─────────────────────────────────────────── */
    nav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
      padding: 0 2rem;
      display: flex; align-items: center; justify-content: space-between;
      height: 66px; gap: 1.5rem;
    }
    .nav-logo { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex-shrink: 0; }
    .nav-logo img { height: 46px; }
    .nav-logo span { font-family: var(--font-head); font-size: 1.4rem; color: var(--teal); letter-spacing: .04em; }

    /* ── Nav principal (izquierda) ── */
    .nav-main { display: flex; gap: 0; list-style: none; align-items: center; }
    .nav-main > li { position: relative; }
    .nav-main > li > a, .nav-main > li > button.nav-parent {
      font-size: .88rem; font-weight: 500; color: var(--slate);
      text-decoration: none; letter-spacing: .02em;
      transition: color .2s; padding: .5rem .9rem; display: block;
      background: none; border: none; cursor: pointer; font-family: var(--font-body);
      white-space: nowrap;
    }
    .nav-main > li > a:hover,
    .nav-main > li > button.nav-parent:hover { color: var(--teal); }
    .nav-parent::after {
      content: '';
      display: inline-block;
      width: 10px; height: 10px;
      margin-left: .3rem;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' stroke='%233d5a6a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      transition: transform .22s ease;
      vertical-align: middle;
    }
    .nav-main > li.dd-open > button.nav-parent::after,
    .nav-main > li:focus-within > button.nav-parent::after {
      transform: rotate(180deg);
    }

    /* ── Dropdown ── */
    .nav-dropdown {
      position: absolute; top: 100%; left: 0;
      /* padding-top crea espacio visual sin romper el área hover del <li> */
      padding: 8px 0 0 0;
      background: transparent;
      min-width: 210px; z-index: 200;
      opacity: 0; pointer-events: none;
      transform: translateY(-4px);
      transition: opacity .18s ease, transform .18s ease;
      visibility: hidden;
    }
    /* Fondo visual del panel */
    .nav-dropdown-inner {
      background: white;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,100,130,.13);
      padding: .4rem 0;
      overflow: hidden;
    }
    .nav-main > li.dd-open .nav-dropdown,
    .nav-main > li:focus-within .nav-dropdown {
      opacity: 1; pointer-events: auto;
      transform: translateY(0);
      visibility: visible;
    }
    .nav-dropdown a {
      display: flex; align-items: center; gap: .5rem;
      padding: .6rem 1.1rem;
      font-size: .85rem; font-weight: 500; color: var(--slate);
      text-decoration: none; transition: background .13s, color .13s;
      white-space: nowrap; border-radius: 0;
    }
    .nav-dropdown a:first-child { border-radius: 0; }
    .nav-dropdown a:last-child  { border-radius: 0; }
    .nav-dropdown a:hover { background: var(--blue-lt); color: var(--teal); }
    .nav-dropdown a:focus-visible {
      outline: 2px solid var(--teal); outline-offset: -2px;
      background: var(--blue-lt); color: var(--teal);
    }
    .nav-dropdown .dd-divider { border: none; border-top: 1px solid var(--border); margin: .3rem 0; }

    /* ── Nav secundario (derecha) ── */
    .nav-secondary { display: flex; gap: 0; list-style: none; align-items: center; margin-left: auto; }
    .nav-secondary a {
      font-size: .84rem; font-weight: 500; color: var(--muted);
      text-decoration: none; padding: .5rem .8rem; display: block;
      transition: color .2s; white-space: nowrap;
    }
    .nav-secondary a:hover { color: var(--teal); }
    .nav-secondary .nav-contact-btn {
      font-size: .82rem; font-weight: 600;
      padding: .38rem .95rem; border-radius: 50px;
      border: 1.5px solid var(--teal); color: var(--teal);
      text-decoration: none; transition: all .2s; white-space: nowrap;
    }
    .nav-secondary .nav-contact-btn:hover { background: var(--teal); color: white; }

    .nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-shrink: 0; }
    .nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--slate); margin: 5px 0; transition: all .3s; }

    @media (max-width: 900px) {
      .nav-main, .nav-secondary { display: none; flex-direction: column; gap: 0; }
      .nav-main.open, .nav-secondary.open { display: flex; }
      .nav-main {
        position: absolute; top: 66px; left: 0; right: 0;
        background: white; padding: .5rem 2rem 1rem;
        border-bottom: 1px solid var(--border); z-index: 100;
      }
      .nav-secondary {
        position: absolute; top: 66px; left: 0; right: 0;
        background: white; padding: 0 2rem 1rem;
        border-bottom: 1px solid var(--border); z-index: 99;
        margin-left: 0;
      }
      .nav-main > li > a, .nav-main > li > button.nav-parent,
      .nav-secondary a, .nav-secondary .nav-contact-btn {
        padding: .65rem 0; border-bottom: 1px solid var(--border);
        border-radius: 0; display: block; width: 100%;
      }
      .nav-main > li > button.nav-parent {
        display: flex; align-items: center; justify-content: space-between;
      }
      /* Dropdown móvil: oculto por defecto, abre con clase */
      .nav-dropdown {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        padding: 0;
        background: transparent;
        pointer-events: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height .28s ease;
      }
      .nav-dropdown-inner {
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        background: transparent;
      }
      .nav-main > li.dd-open .nav-dropdown {
        pointer-events: auto;
        max-height: 400px;
      }
      .nav-dropdown a {
        padding: .55rem 0 .55rem 1rem;
        border-bottom: 1px solid var(--border);
        font-size: .84rem; color: var(--slate);
        border-radius: 0;
      }
      .nav-dropdown a:hover { background: transparent; color: var(--teal); }
      .nav-dropdown .dd-divider { display: none; }
      .nav-parent::after { display: inline-block; }
      .nav-hamburger { display: block; }
      .dark-toggle { font-size: .78rem; padding: .25rem .6rem; }
    }

    body.dark .nav-dropdown-inner { background: #1e2d3a; border-color: var(--border); }
    body.dark .nav-dropdown a:hover { background: #1a3545; }
    body.dark .nav-parent::after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' stroke='%23a8c0cc' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    /* ── Section backgrounds (alternating) ───────────── */
    .bg-white  { background: var(--white); }
    .bg-cream  { background: var(--cream); }
    .bg-blue   { background: var(--blue-lt); }

    /* subtle texture overlay on cream */
    .bg-cream::before {
      content: '';
      position: absolute; inset: 0; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8b89a' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    .bg-cream { position: relative; }

    /* ── Section layout ──────────────────────────────── */
    section { padding: 5rem 0; }
    .container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
    .section-label {
      font-size: .75rem; font-weight: 600; letter-spacing: .15em;
      color: var(--teal); text-transform: uppercase; margin-bottom: .75rem;
    }
    .section-title {
      font-family: var(--font-head); font-size: clamp(2rem, 4vw, 3rem);
      color: var(--slate-dk); line-height: 1.2; margin-bottom: 1.25rem;
    }
    .section-lead { font-size: 1.05rem; color: var(--muted); max-width: 680px; line-height: 1.8; }

    /* ── Hero ────────────────────────────────────────── */
    #inicio {
      background: linear-gradient(150deg, #e8f7fb 0%, #f7f4ee 50%, #eaf4f9 100%);
      padding: 6rem 0 5rem;
      position: relative; overflow: hidden;
    }
    #inicio::after {
      content: '';
      position: absolute; right: -120px; top: -80px;
      width: 600px; height: 600px; border-radius: 50%;
      background: radial-gradient(circle, rgba(0,158,179,.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-inner { display: flex; align-items: center; gap: 4rem; }
    .hero-text { flex: 1; }
    .hero-logo-wrap { flex: 0 0 auto; }
    .hero-logo-wrap img { width: 220px; opacity: .92; }
    .hero-tagline {
      font-family: var(--font-head); font-size: clamp(2.4rem, 5vw, 3.6rem);
      color: var(--slate-dk); line-height: 1.15; margin-bottom: 1.5rem;
    }
    .hero-tagline em { font-style: italic; color: var(--teal); }
    .hero-lead { font-size: 1.1rem; color: var(--muted); max-width: 560px; margin-bottom: 2.5rem; }
    .btn-primary {
      display: inline-block; padding: .85rem 2rem; border-radius: 50px;
      background: var(--teal); color: white;
      font-weight: 600; font-size: .95rem; text-decoration: none;
      transition: background .2s, transform .15s, box-shadow .2s;
      box-shadow: 0 6px 20px rgba(0,158,179,.3);
    }
    .btn-primary:hover { background: var(--teal-dk); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,158,179,.35); }
    .btn-secondary {
      display: inline-block; padding: .85rem 2rem; border-radius: 50px;
      background: transparent; color: var(--teal);
      border: 2px solid var(--teal); font-weight: 600; font-size: .95rem;
      text-decoration: none; margin-left: 1rem;
      transition: all .2s;
    }
    .btn-secondary:hover { background: var(--teal); color: white; }
    .hero-stats {
      display: flex; gap: 2.5rem; margin-top: 3rem;
      padding-top: 2rem; border-top: 1px solid var(--border);
    }
    .stat-item { text-align: center; }
    .stat-num { font-family: var(--font-head); font-size: 2rem; color: var(--teal); }
    .stat-lab { font-size: .8rem; color: var(--muted); font-weight: 500; }

    @media (max-width: 768px) {
      .hero-inner { flex-direction: column-reverse; gap: 2rem; }
      .hero-logo-wrap img { width: 140px; }
      .hero-stats { gap: 1.5rem; }
    }

    /* ── Tabla de síndromes ──────────────────────────── */
    #sindromes { padding: 5rem 0; }
    .filter-bar {
      display: flex; gap: .6rem; flex-wrap: wrap; margin: 2rem 0;
    }
    .filter-chip {
      padding: .4rem 1rem; border-radius: 20px; font-size: .82rem; font-weight: 500;
      border: 1.5px solid var(--border); background: white;
      color: var(--muted); cursor: pointer; transition: all .2s;
    }
    .filter-chip.active, .filter-chip:hover {
      background: var(--teal); color: white; border-color: var(--teal);
    }
    .table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
    table { width: 100%; border-collapse: collapse; font-size: .9rem; }
    thead tr { background: var(--slate-dk); color: white; }
    thead th {
      padding: 1rem 1.1rem; text-align: left; font-weight: 500;
      font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
      white-space: nowrap;
    }
    tbody tr {
      border-bottom: 1px solid #e8edf0;
      cursor: pointer; transition: background .15s;
    }
    tbody tr:nth-child(even) { background: #f7fbfd; }
    tbody tr:hover { background: #d9f0f5; }
    tbody td { padding: .85rem 1.1rem; vertical-align: middle; }
    .td-num { font-weight: 700; color: var(--teal); font-size: .95rem; }
    .td-name { font-weight: 600; color: var(--slate-dk); }
    .td-alt  { font-size: .78rem; color: var(--muted); font-style: italic; }
    .td-karyo { font-family: monospace; font-size: .82rem; color: var(--slate); }
    .badge {
      display: inline-block; padding: .2rem .7rem; border-radius: 20px;
      font-size: .75rem; font-weight: 600;
    }
    .badge-male   { background: #dbeafe; color: #1e40af; }
    .badge-female { background: #fce7f3; color: #9d174d; }
    .badge-both   { background: #d1fae5; color: #065f46; }
    .badge-gene   { background: #ede9fe; color: #5b21b6; }
    .tr-arrow { color: var(--teal); font-size: 1.1rem; }

    /* ── Modal síndrome ──────────────────────────────── */
    .modal-overlay {
      display: none; position: fixed; inset: 0; z-index: 500;
      background: rgba(20,40,50,.55); backdrop-filter: blur(5px);
      align-items: center; justify-content: center; padding: 1rem;
    }
    .modal-overlay.open { display: flex; }
    .modal-box {
      background: white; border-radius: 20px; max-width: 780px; width: 100%;
      max-height: 90vh; overflow-y: auto;
      box-shadow: 0 20px 80px rgba(0,0,0,.25);
      animation: modalIn .25s ease;
    }
    @keyframes modalIn {
      from { opacity: 0; transform: translateY(20px) scale(.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .modal-header {
      background: linear-gradient(135deg, var(--teal-dk), var(--slate-dk));
      color: white; padding: 2rem 2.5rem 1.5rem;
      border-radius: 20px 20px 0 0;
      position: relative;
    }
    .modal-close {
      position: absolute; top: 1.25rem; right: 1.5rem;
      background: rgba(255,255,255,.2); border: none; color: white;
      width: 32px; height: 32px; border-radius: 50%; font-size: 1.1rem;
      cursor: pointer; transition: background .2s;
      display: flex; align-items: center; justify-content: center;
    }
    .modal-close:hover { background: rgba(255,255,255,.35); }
    .modal-num-row {
      display: flex; align-items: center; gap: .6rem; margin-bottom: .1rem;
    }
    .modal-nav-btn {
      background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
      color: white; width: 24px; height: 24px; border-radius: 50%;
      font-size: .85rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: background .18s, transform .15s; flex-shrink: 0; padding: 0; line-height: 1;
    }
    .modal-nav-btn:hover { background: rgba(255,255,255,.35); transform: scale(1.1); }
    .modal-nav-btn:disabled { opacity: .3; cursor: default; transform: none; }
    .modal-num { font-size: .8rem; opacity: .7; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
    .modal-name { font-family: var(--font-head); font-size: 1.7rem; margin: .3rem 0 .2rem; }
    .modal-alt { font-size: .9rem; opacity: .8; font-style: italic; }
    .modal-karyo { margin-top: .75rem; font-family: monospace; font-size: .88rem; background: rgba(255,255,255,.15); display: inline-block; padding: .25rem .75rem; border-radius: 20px; }
    .modal-body { padding: 2rem 2.5rem; }
    .modal-section-title {
      font-family: var(--font-head); font-size: 1.1rem; color: var(--teal-dk);
      margin: 1.5rem 0 .6rem; padding-bottom: .3rem;
      border-bottom: 2px solid #d9f0f5;
      display: flex; align-items: center; gap: .5rem;
    }
    .modal-section-title:first-child { margin-top: 0; }
    .modal-section-title .ico { font-size: 1rem; }
    .modal-body p, .modal-body li { font-size: .95rem; color: var(--text); line-height: 1.75; }
    .modal-body ul { padding-left: 1.4rem; }
    .modal-body li { margin-bottom: .35rem; }
    .tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
    .tag { background: var(--blue-lt); color: var(--teal-dk); padding: .25rem .75rem; border-radius: 20px; font-size: .8rem; font-weight: 500; }
    .modal-prevalence {
      display: flex; align-items: center; gap: .65rem;
      background: linear-gradient(135deg, rgba(0,158,179,.10), rgba(0,122,140,.07));
      border: 1px solid rgba(0,158,179,.22); border-radius: 10px;
      padding: .7rem 1rem; margin-bottom: 1.25rem;
    }
    .modal-prevalence-icon { font-size: 1.25rem; flex-shrink: 0; }
    .modal-prevalence-label { font-size: .72rem; font-weight: 600; color: var(--teal-dk); text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: .1rem; }
    .modal-prevalence-value { font-size: .95rem; font-weight: 600; color: var(--slate-dk); }
    .modal-prevalence-note { font-size: .78rem; color: var(--muted); margin-top: .1rem; }
    .modal-footer-note {
      margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 10px;
      background: #fff8e8; border-left: 4px solid #f5b944;
      font-size: .85rem; color: #7a5f20;
    }
    .modal-assoc-block {
      background: var(--blue-lt); border-radius: 10px; padding: 1rem 1.25rem;
      font-size: .88rem; color: var(--text); line-height: 1.75;
    }
    .modal-assoc-block + .modal-assoc-block { margin-top: .6rem; }
    .modal-assoc-label {
      display: inline-block; padding: .15rem .65rem; border-radius: 20px;
      font-size: .72rem; font-weight: 600; margin-bottom: .4rem;
    }
    .modal-assoc-es   { background: #d1fae5; color: #065f46; }
    .modal-assoc-mx   { background: #dcfce7; color: #166534; }
    .modal-assoc-int  { background: #dbeafe; color: #1e40af; }
    .modal-assoc-no   { background: #fee2e2; color: #991b1b; }
    .modal-assoc-fund { background: #fef3c7; color: #92400e; }
    .modal-assoc-block a { color: var(--teal-dk); }

    /* ── Sección Qué es / Sobre ──────────────────────── */
    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
    @media (max-width: 768px) { .two-col { grid-template-columns: 1fr; gap: 2rem; } }
    .info-card {
      background: white; border-radius: var(--radius); padding: 1.75rem;
      border: 1px solid var(--border); box-shadow: var(--shadow);
      margin-bottom: 1rem;
    }
    .info-card-icon { font-size: 1.6rem; margin-bottom: .75rem; }
    .info-card h3 { font-family: var(--font-head); font-size: 1.1rem; color: var(--slate-dk); margin-bottom: .5rem; }
    .info-card p { font-size: .9rem; color: var(--muted); }

    /* ── Galería de fotos ────────────────────────────── */
    #galeria { padding: 5rem 0; }
    .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 2rem; }
    .gallery-item {
      border-radius: var(--radius); overflow: hidden; cursor: pointer;
      aspect-ratio: 4/3; background: var(--blue-lt);
      display: flex; align-items: center; justify-content: center;
      position: relative; border: 2px solid var(--border);
      transition: transform .2s, box-shadow .2s;
    }
    .gallery-item:hover { transform: scale(1.03); box-shadow: 0 8px 32px rgba(0,100,130,.18); }
    .gallery-item img { width: 100%; height: 100%; object-fit: cover; }
    .gallery-placeholder {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: .5rem; color: var(--muted); font-size: .82rem; text-align: center; padding: 1rem;
    }
    .gallery-placeholder .ph-icon { font-size: 2.2rem; }

    /* Lightbox */
    .lightbox {
      display: none; position: fixed; inset: 0; z-index: 600;
      background: rgba(0,0,0,.88); align-items: center; justify-content: center;
    }
    .lightbox.open { display: flex; }
    .lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 0 80px rgba(0,0,0,.5); }
    .lightbox-close {
      position: absolute; top: 1.5rem; right: 2rem;
      background: rgba(255,255,255,.2); border: none; color: white;
      width: 40px; height: 40px; border-radius: 50%; font-size: 1.3rem;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
    }

    /* ── Contacto ────────────────────────────────────── */
    #contacto { padding: 5rem 0; }
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2.5rem; }
    @media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }
    .contact-info p { font-size: .95rem; color: var(--muted); margin-bottom: 1.5rem; }
    .contact-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
    .contact-item-icon { font-size: 1.3rem; margin-top: .1rem; }
    .contact-item-text strong { display: block; font-weight: 600; color: var(--slate-dk); font-size: .9rem; }
    .contact-item-text span { font-size: .88rem; color: var(--muted); }
    .contact-form { display: flex; flex-direction: column; gap: 1rem; }
    .form-group { display: flex; flex-direction: column; gap: .35rem; }
    .form-group label { font-size: .82rem; font-weight: 600; color: var(--slate); }
    .form-group input, .form-group textarea, .form-group select {
      padding: .75rem 1rem; border: 1.5px solid #d5e4ec; border-radius: 10px;
      font-family: var(--font-body); font-size: .92rem; color: var(--text);
      background: white; transition: border-color .2s;
      outline: none;
    }
    .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--teal); }
    .form-group textarea { resize: vertical; min-height: 120px; }
    .form-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .82rem; color: var(--muted); }
    .form-check input { margin-top: 3px; accent-color: var(--teal); }
    .form-check a { color: var(--teal); }
    .btn-submit {
      padding: .9rem 2rem; border-radius: 50px; background: var(--teal); color: white;
      font-weight: 600; font-size: .95rem; border: none; cursor: pointer;
      transition: background .2s, transform .15s;
    }
    .btn-submit:hover { background: var(--teal-dk); transform: translateY(-1px); }
    .btn-submit:disabled { opacity: .65; cursor: wait; transform: none; }
    .hp-field {
      position: absolute; left: -9999px; width: 1px; height: 1px;
      overflow: hidden; opacity: 0; pointer-events: none;
    }
    .turnstile-wrap { min-height: 68px; }

    /* ── LOPD Modal ──────────────────────────────────── */
    #lopd-modal { display: none; position: fixed; inset: 0; z-index: 700;
      background: rgba(0,0,0,.6); align-items: center; justify-content: center; padding: 1rem; }
    #lopd-modal.open { display: flex; }
    .lopd-box {
      background: white; border-radius: 16px; max-width: 700px; width: 100%;
      max-height: 85vh; overflow-y: auto; padding: 2.5rem;
    }
    .lopd-box h2 { font-family: var(--font-head); color: var(--slate-dk); margin-bottom: 1.25rem; }
    .lopd-box h3 { font-size: 1rem; color: var(--teal-dk); margin: 1.25rem 0 .5rem; }
    .lopd-box p, .lopd-box li { font-size: .88rem; color: var(--muted); line-height: 1.75; }
    .lopd-box ul { padding-left: 1.4rem; }
    .lopd-box a { color: var(--teal-dk); }
    .lopd-close { margin-top: 1.5rem; }

    /* ── Footer ──────────────────────────────────────── */
    footer {
      background: var(--slate-dk); color: rgba(255,255,255,.75);
      padding: 4rem 0 2rem;
    }
    .footer-grid {
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem;
      padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1);
    }
    @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 540px)  { .footer-grid { grid-template-columns: 1fr; } }
    .footer-brand > img { height: 54px; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: .8; }
    .footer-brand p { font-size: .85rem; line-height: 1.8; max-width: 280px; }
    .footer-congen {
      margin-top: 1.75rem; padding-top: 1.5rem;
      border-top: 1px solid rgba(255,255,255,.12);
    }
    .footer-congen-label {
      font-size: .78rem; color: rgba(255,255,255,.55); margin-bottom: .75rem;
      letter-spacing: .02em;
    }
    .footer-congen-label a {
      color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600;
      transition: color .2s;
    }
    .footer-congen-label a:hover { color: var(--teal); }
    .footer-congen-link { display: inline-block; line-height: 0; }
    .footer-congen-link img {
      height: 72px; width: auto; opacity: .92;
      transition: opacity .2s;
    }
    .footer-congen-link:hover img { opacity: 1; }
    .footer-col h4 {
      font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
      color: rgba(255,255,255,.5); margin-bottom: 1rem;
    }
    .footer-col ul { list-style: none; }
    .footer-col ul li { margin-bottom: .55rem; }
    .footer-col ul a { color: rgba(255,255,255,.7); text-decoration: none; font-size: .88rem; transition: color .2s; }
    .footer-col ul a:hover { color: var(--teal); }
    .footer-bottom {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 1.75rem; font-size: .8rem; color: rgba(255,255,255,.45);
      flex-wrap: wrap; gap: 1rem;
    }
    .footer-bottom a { color: rgba(255,255,255,.55); text-decoration: none; }
    .footer-bottom a:hover { color: var(--teal); }
    .footer-legal { display: flex; gap: 1.5rem; }

    /* ── Sección Asociaciones ────────────────────────── */
    #asociaciones { padding: 5rem 0; }
    .assoc-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 1.5rem; margin-top: 2rem;
    }
    .assoc-card {
      background: white; border-radius: var(--radius); padding: 1.5rem;
      border: 1px solid var(--border); box-shadow: var(--shadow);
      display: flex; flex-direction: column; gap: .5rem;
    }
    .assoc-card-head { display: flex; align-items: flex-start; gap: .75rem; }
    .assoc-num {
      flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
      background: var(--teal); color: white; font-size: .78rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .assoc-card h3 { font-family: var(--font-head); font-size: 1rem; color: var(--slate-dk); margin: 0; }
    .assoc-card .assoc-subtitle { font-size: .8rem; color: var(--muted); font-style: italic; }
    .assoc-body { font-size: .85rem; color: var(--muted); line-height: 1.75; }
    .assoc-body strong { color: var(--slate-dk); }
    .assoc-body a { color: var(--teal); word-break: break-all; }
    .assoc-badge {
      display: inline-block; padding: .15rem .6rem; border-radius: 20px;
      font-size: .72rem; font-weight: 600; margin-bottom: .25rem;
    }
    .assoc-badge-es { background: #d1fae5; color: #065f46; }
    .assoc-badge-mx { background: #dcfce7; color: #166534; }
    .assoc-badge-no { background: #fee2e2; color: #991b1b; }
    .assoc-badge-int { background: #dbeafe; color: #1e40af; }
    .assoc-badge-fund { background: #fef3c7; color: #92400e; }
    .assoc-divider { border: none; border-top: 1px solid var(--border); margin: .35rem 0; }

    /* ── Accessibility skip ──────────────────────────── */
    .skip-link {
      position: absolute; top: -40px; left: 0; background: var(--teal); color: white;
      padding: .5rem 1rem; z-index: 9999; border-radius: 0 0 8px 0;
      transition: top .15s;
    }
    .skip-link:focus { top: 0; }

    /* ── Cookie banner ───────────────────────────────── */
    #cookie-bar {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
      background: var(--slate-dk); color: white;
      padding: 1rem 2rem; display: flex; align-items: center;
      justify-content: space-between; gap: 1rem; flex-wrap: wrap;
      font-size: .85rem;
      transform: translateY(100%); transition: transform .4s ease;
    }
    #cookie-bar.show { transform: translateY(0); }
    #cookie-bar a { color: var(--teal); }
    .cookie-btns { display: flex; gap: .75rem; }
    .btn-cookie {
      padding: .5rem 1.25rem; border-radius: 50px; border: none; cursor: pointer;
      font-size: .82rem; font-weight: 600;
    }
    .btn-accept { background: var(--teal); color: white; }
    .btn-reject { background: rgba(255,255,255,.15); color: white; }


    /* ── Assoc grid dynamic ───────────────────────────── */
    .assoc-cat-tag {
      display: inline-flex; align-items: center; gap: .35rem;
      font-size: .7rem; font-weight: 600; padding: .12rem .55rem;
      border-radius: 20px; margin-bottom: .5rem;
    }
    .assoc-cat-sexual   { background: #e0f9fb; color: #007a8c; }
    .assoc-cat-autosomal { background: #ede9fe; color: #5b21b6; }
    .assoc-cat-monogenic { background: #d1fae5; color: #065f46; }
    .assoc-cat-rare      { background: #fee2e2; color: #991b1b; }

    /* ── Autocompletado ───────────────────────────────── */
    .autocomplete-box {
      position: absolute; top: calc(100% + 6px); left: 0; right: 0;
      background: white; border: 1.5px solid var(--border);
      border-radius: 12px; box-shadow: 0 8px 32px rgba(0,100,130,.13);
      z-index: 200; max-height: 320px; overflow-y: auto;
      display: none;
    }
    .autocomplete-box.open { display: block; }
    .ac-item {
      padding: .65rem 1rem; cursor: pointer; border-bottom: 1px solid #f0f4f6;
      display: flex; align-items: center; gap: .75rem; transition: background .15s;
    }
    .ac-item:last-child { border-bottom: none; }
    .ac-item:hover, .ac-item.selected { background: var(--blue-lt); }
    .ac-num {
      flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .68rem; font-weight: 700; color: white;
    }
    .ac-main { font-size: .88rem; font-weight: 600; color: var(--slate-dk); }
    .ac-sub  { font-size: .75rem; color: var(--muted); margin-top: .1rem; }
    .ac-match { background: #fff3cd; border-radius: 3px; padding: 0 2px; }
    .ac-section {
      padding: .4rem 1rem; font-size: .7rem; font-weight: 700;
      color: var(--teal); text-transform: uppercase; letter-spacing: .1em;
      background: var(--cream); border-bottom: 1px solid var(--border);
    }

    /* ── Filtro síntomas ──────────────────────────────── */
    .sintomas-bar {
      margin: .75rem 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem;
      align-items: center;
    }
    .sintomas-label { font-size: .78rem; font-weight: 600; color: var(--muted); margin-right: .25rem; }
    .sintoma-chip {
      padding: .32rem .85rem; border-radius: 20px; font-size: .78rem; font-weight: 500;
      border: 1.5px solid var(--border); background: white; color: var(--muted);
      cursor: pointer; transition: all .18s;
    }
    .sintoma-chip:hover { border-color: var(--teal); color: var(--teal); }
    .sintoma-chip.active { background: var(--teal); color: white; border-color: var(--teal); }
    .sintomas-disclaimer {
      font-size: .75rem; color: var(--muted); margin-top: .5rem;
      padding: .5rem .85rem; background: #fff8e8; border-left: 3px solid #f5b944;
      border-radius: 6px; display: none;
    }
    .sintomas-disclaimer.show { display: block; }

    /* ── Sección Recién diagnosticado ─────────────────── */
    #diagnosticado { padding: 5rem 0; }
    .diag-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1.25rem; margin-top: 2rem; }
    .diag-step {
      background: white; border-radius: var(--radius); padding: 1.5rem;
      border: 1.5px solid var(--border); box-shadow: var(--shadow);
      display: flex; flex-direction: column; gap: .6rem;
      transition: transform .18s, box-shadow .18s;
    }
    .diag-step:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,100,130,.13); }
    .diag-step-num {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--teal); color: white;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-head); font-size: 1.1rem; flex-shrink: 0;
    }
    .diag-step h3 { font-family: var(--font-head); font-size: 1rem; color: var(--slate-dk); margin: 0; }
    .diag-step p  { font-size: .88rem; color: var(--muted); line-height: 1.7; margin: 0; }
    .diag-step a  { color: var(--teal); font-weight: 500; }
    .diag-accordion { margin-top: 2.5rem; }
    .diag-acc-item {
      border: 1.5px solid var(--border); border-radius: var(--radius);
      margin-bottom: .6rem; overflow: hidden; background: white;
    }
    .diag-acc-head {
      padding: 1rem 1.25rem; cursor: pointer; display: flex;
      align-items: center; justify-content: space-between;
      font-weight: 600; color: var(--slate-dk); font-size: .95rem;
      user-select: none; transition: background .15s;
    }
    .diag-acc-head:hover { background: var(--blue-lt); }
    .diag-acc-arrow { font-size: .85rem; color: var(--teal); transition: transform .25s; }
    .diag-acc-item.open .diag-acc-arrow { transform: rotate(90deg); }
    .diag-acc-body {
      display: none; padding: 0 1.25rem 1.25rem;
      font-size: .9rem; color: var(--muted); line-height: 1.8;
    }
    .diag-acc-item.open .diag-acc-body { display: block; }
    .diag-acc-body ul { padding-left: 1.2rem; }
    .diag-acc-body li { margin-bottom: .35rem; }

    /* ── Botón imprimir en modal ──────────────────────── */
    .modal-print-btn {
      display: inline-flex; align-items: center; gap: .4rem;
      padding: .45rem 1rem; border-radius: 50px; border: 1.5px solid rgba(255,255,255,.4);
      background: rgba(255,255,255,.15); color: white; font-size: .78rem; font-weight: 600;
      cursor: pointer; transition: background .2s; margin-top: .75rem;
      text-decoration: none;
    }
    .modal-print-btn:hover { background: rgba(255,255,255,.28); }

    /* ── Print styles ─────────────────────────────────── */
    @media print {
      body > *:not(#print-area) { display: none !important; }
      #print-area {
        display: block !important;
        font-family: Georgia, serif; color: #000;
        max-width: 700px; margin: 0 auto; padding: 2rem;
      }
      #print-area h1 { font-size: 1.6rem; margin-bottom: .25rem; }
      #print-area .print-meta { font-size: .85rem; color: #555; margin-bottom: 1.5rem; }
      #print-area h2 { font-size: 1.1rem; border-bottom: 1px solid #ccc; padding-bottom: .3rem; margin: 1.2rem 0 .5rem; }
      #print-area p, #print-area li { font-size: .9rem; line-height: 1.7; }
      #print-area ul { padding-left: 1.2rem; }
      #print-area .print-footer { margin-top: 2rem; font-size: .75rem; color: #888; border-top: 1px solid #ccc; padding-top: .75rem; }
    }
    #print-area { display: none; }






    /* ── Comparador de síndromes ──────────────────────── */
    #comparador { padding: 5rem 0; }
    .comp-selectors {
      display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
      margin: 2rem 0 1.5rem;
    }
    @media (max-width: 600px) { .comp-selectors { grid-template-columns: 1fr; } }
    .comp-select-wrap { position: relative; }
    .comp-select-wrap label {
      display: block; font-size: .78rem; font-weight: 700;
      color: var(--teal-dk); text-transform: uppercase; letter-spacing: .08em;
      margin-bottom: .4rem;
    }
    .comp-select-wrap select {
      width: 100%; padding: .65rem 1rem; border-radius: 10px;
      border: 1.5px solid var(--border); font-family: var(--font-body);
      font-size: .9rem; color: var(--text); background: white;
      cursor: pointer; transition: border-color .2s;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23009eb3' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 1rem center;
    }
    .comp-select-wrap select:focus { outline: none; border-color: var(--teal); }
    .comp-table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); margin-top: 1rem; }
    .comp-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
    .comp-table th {
      padding: 1rem 1.25rem; text-align: left; font-size: .78rem;
      font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
      background: var(--slate-dk); color: white;
    }
    .comp-table th.comp-col-a { background: #007a8c; }
    .comp-table th.comp-col-b { background: #5b21b6; }
    .comp-table td { padding: .85rem 1.25rem; vertical-align: top; border-bottom: 1px solid #e8edf0; line-height: 1.65; }
    .comp-table tr:nth-child(even) td { background: #f7fbfd; }
    .comp-table td:first-child { font-weight: 600; color: var(--slate-dk); white-space: nowrap; font-size: .82rem; }
    .comp-table td.comp-col-a { border-left: 3px solid #009eb3; }
    .comp-table td.comp-col-b { border-left: 3px solid #7c3aed; }
    .comp-placeholder {
      text-align: center; padding: 3rem 1rem; color: var(--muted);
      font-size: .95rem; border-radius: var(--radius);
      border: 2px dashed var(--border); margin-top: 1rem;
    }
    .comp-placeholder .comp-ph-icon { font-size: 2.5rem; margin-bottom: .75rem; }
    .comp-badge-row { display: flex; gap: .4rem; flex-wrap: wrap; }

    /* ── Línea de tiempo ──────────────────────────────── */
    #timeline { padding: 5rem 0; }
    .tl-select-wrap {
      display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
      margin: 1.5rem 0 2.5rem;
    }
    .tl-select-wrap label { font-size: .88rem; font-weight: 600; color: var(--slate-dk); }
    .tl-select-wrap select {
      padding: .6rem 2.5rem .6rem 1rem; border-radius: 10px;
      border: 1.5px solid var(--border); font-family: var(--font-body);
      font-size: .9rem; color: var(--text); background: white;
      cursor: pointer; min-width: 280px;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23009eb3' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 1rem center;
    }
    .tl-select-wrap select:focus { outline: none; border-color: var(--teal); }
    .tl-container { position: relative; padding-left: 2rem; }
    .tl-container::before {
      content: ''; position: absolute; left: .75rem; top: 0; bottom: 0;
      width: 2px; background: linear-gradient(to bottom, var(--teal), #e0e0e0);
      border-radius: 2px;
    }
    .tl-item {
      position: relative; margin-bottom: 2rem; padding-left: 2rem;
    }
    .tl-item::before {
      content: ''; position: absolute; left: -1.35rem; top: .35rem;
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--teal); border: 3px solid white;
      box-shadow: 0 0 0 2px var(--teal); z-index: 1;
    }
    .tl-item.tl-warning::before { background: #f5b944; box-shadow: 0 0 0 2px #f5b944; }
    .tl-item.tl-danger::before  { background: #dc2626; box-shadow: 0 0 0 2px #dc2626; }
    .tl-item.tl-ok::before      { background: #059669; box-shadow: 0 0 0 2px #059669; }
    .tl-phase {
      font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .1em; color: var(--teal); margin-bottom: .2rem;
    }
    .tl-item.tl-warning .tl-phase { color: #c0870a; }
    .tl-item.tl-danger  .tl-phase { color: #dc2626; }
    .tl-item.tl-ok      .tl-phase { color: #059669; }
    .tl-title { font-family: var(--font-head); font-size: 1.05rem; color: var(--slate-dk); margin-bottom: .3rem; }
    .tl-body  { font-size: .88rem; color: var(--muted); line-height: 1.75; }
    .tl-body strong { color: var(--slate-dk); }
    .tl-body ul { padding-left: 1.2rem; margin-top: .35rem; }
    .tl-body li { margin-bottom: .2rem; }
    .tl-delay-badge {
      display: inline-block; margin-top: .5rem; padding: .2rem .75rem;
      border-radius: 20px; font-size: .75rem; font-weight: 600;
      background: #fff8e8; color: #92400e; border: 1px solid #f5b944;
    }
    .tl-placeholder {
      text-align: center; padding: 3rem; color: var(--muted);
      border: 2px dashed var(--border); border-radius: var(--radius);
    }
    body.dark .comp-select-wrap select,
    body.dark .tl-select-wrap select { background-color: #1e2d3a; color: var(--text); border-color: var(--border); }
    body.dark .comp-table tr:nth-child(even) td { background: #1e2d3a; }
    body.dark .comp-table td { border-bottom-color: #2a3a4a; }
    body.dark .comp-placeholder { border-color: var(--border); }

    /* ── Glosario ────────────────────────────────────── */
    #glosario { padding: 5rem 0; }
    .glosario-search-wrap { max-width: 420px; position: relative; margin-bottom: 1.5rem; }
    .glosario-search-wrap input {
      width: 100%; padding: .6rem 1rem .6rem 2.3rem;
      border: 1.5px solid var(--border); border-radius: 50px;
      font-size: .9rem; font-family: var(--font-body);
      background: white; color: var(--text); transition: border-color .2s;
    }
    .glosario-search-wrap input:focus { outline: none; border-color: var(--teal); }
    .glosario-search-wrap .glos-icon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); font-size: .9rem; }
    .glosario-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: .75rem; }
    .glosario-item {
      background: white; border-radius: var(--radius);
      border: 1.5px solid var(--border); overflow: hidden;
      transition: box-shadow .18s;
    }
    .glosario-item:hover { box-shadow: var(--shadow); }
    .glosario-head {
      padding: .85rem 1.1rem; cursor: pointer; display: flex;
      align-items: center; justify-content: space-between;
      user-select: none;
    }
    .glosario-term {
      font-weight: 700; color: var(--teal-dk); font-size: .92rem;
      display: flex; align-items: center; gap: .5rem;
    }
    .glosario-tag {
      font-size: .68rem; font-weight: 600; padding: .1rem .5rem;
      border-radius: 20px; background: var(--blue-lt); color: var(--teal-dk);
    }
    .glosario-arrow { font-size: .8rem; color: var(--muted); transition: transform .22s; }
    .glosario-item.open .glosario-arrow { transform: rotate(90deg); }
    .glosario-body {
      display: none; padding: 0 1.1rem 1rem;
      font-size: .88rem; color: var(--muted); line-height: 1.75;
      border-top: 1px solid var(--border);
    }
    .glosario-item.open .glosario-body { display: block; }
    .glosario-body strong { color: var(--slate-dk); }
    .glosario-body .ejemplo { margin-top: .5rem; font-style: italic; color: var(--teal-dk); font-size: .82rem; }
    .glosario-noresult { text-align: center; padding: 2rem; color: var(--muted); grid-column: 1/-1; }

    /* ── Lenguaje claro ───────────────────────────────── */
    body.easyread .modal-body, body.easyread .modal-body p, body.easyread .modal-body li {
      font-size: 1.15rem; line-height: 2.1; font-family: var(--font-body, inherit);
    }
    body.easyread .modal-body h3.modal-section-title { font-size: 1.25rem; margin-top: 1.6rem; }
    body.easyread .modal-body ul { padding-left: 1.6rem; }
    body.easyread .modal-body li { margin-bottom: .7rem; }
    body.easyread .syn-card-brief, body.easyread td:not(.td-num):not(.tr-arrow), body.easyread .syn-card-name, body.easyread .syn-card-karyo {
      font-size: 1.05rem; line-height: 1.85;
    }
    body.easyread .syn-card { padding: 1.4rem; }
    body.easyread table { font-size: 1.05rem; }
    body.easyread table th { font-size: .95rem; }
    .easyread-badge {
      display: inline-flex; align-items: center; gap: .35rem;
      background: var(--blue-lt); color: var(--teal-dk);
      padding: .35rem .9rem; border-radius: 20px;
      font-size: .85rem; font-weight: 600; margin-bottom: 1.2rem;
    }
    .easyread-note {
      background: var(--cream); border: 1px solid var(--border);
      border-radius: 12px; padding: 1rem 1.2rem; margin-top: 1.5rem;
      font-size: .85rem; color: var(--muted); line-height: 1.7;
    }
    .dark-toggle {
      background: none; border: 1.5px solid var(--border);
      border-radius: 50px; padding: .3rem .7rem;
      cursor: pointer; font-size: .85rem; color: var(--slate);
      transition: all .2s; display: flex; align-items: center; gap: .35rem;
      white-space: nowrap;
    }
    .dark-toggle:hover { border-color: var(--teal); color: var(--teal); }
    #easyread-toggle.active {
      background: var(--teal); border-color: var(--teal); color: #fff;
    }
    #easyread-toggle.active:hover { background: var(--teal-dk); border-color: var(--teal-dk); color: #fff; }

    body.dark {
      --white:   #1a2530;
      --cream:   #1e2d3a;
      --blue-lt: #1a2f3f;
      --teal:    #00c8e0;
      --teal-dk: #00a8be;
      --slate:   #a8c0cc;
      --slate-dk:#d0e4ee;
      --text:    #d8eaf2;
      --muted:   #7fa8bc;
      --border:  rgba(0,200,224,.18);
      --shadow:  0 4px 32px rgba(0,0,0,.35);
    }
    body.dark nav {
      background: rgba(20,35,48,.95);
      border-bottom-color: var(--border);
    }
    body.dark .modal-box { background: #1e2d3a; }
    body.dark .modal-header { background: linear-gradient(135deg, #005f70, #243b47); }
    body.dark .info-card, body.dark .assoc-card, body.dark .syn-card,
    body.dark .diag-step, body.dark .diag-acc-item { background: #1e2d3a; border-color: var(--border); }
    body.dark table { background: #1a2530; }
    body.dark thead tr { background: #0d1e28; }
    body.dark tbody tr:nth-child(even) { background: #1e2d3a; }
    body.dark tbody tr:hover { background: #1a3545; }
    body.dark .autocomplete-box { background: #1e2d3a; border-color: var(--border); }
    body.dark .ac-item:hover, body.dark .ac-item.selected { background: #1a3545; }
    body.dark .ac-section { background: #1a2530; }
    body.dark .sintoma-chip { background: #1e2d3a; }
    body.dark #syndrome-search { background: #1e2d3a; color: var(--text); border-color: var(--border); }
    body.dark .filter-chip { background: #1e2d3a; color: var(--muted); }
    body.dark .cat-tab { background: #1e2d3a; color: var(--muted); }
    body.dark .cat-tab.active { background: var(--slate-dk); color: #1a2530; border-color: var(--slate-dk); }
    body.dark .view-btn { background: #1e2d3a; }
    body.dark .modal-footer-note { background: #2a3a1a; border-left-color: #a08020; color: #d4c080; }
    body.dark .lopd-box { background: #1e2d3a; color: var(--text); }
    body.dark footer { background: #0d1e28; }
    body.dark .diag-acc-head { color: var(--slate-dk); }
    body.dark .glosario-item { background: #1e2d3a; border-color: var(--border); }
    body.dark #cookie-bar { background: #0d1e28; }
    body.dark .contact-form input, body.dark .contact-form select, body.dark .contact-form textarea {
      background: #1e2d3a; color: var(--text); border-color: var(--border);
    }

    /* ── Búsqueda ─────────────────────────────────────── */
    .search-filter-bar { margin: 1.75rem 0 .75rem; }
    .search-wrap { position: relative; display: flex; align-items: center; max-width: 520px; }
    .search-icon { position: absolute; left: .85rem; font-size: 1rem; pointer-events: none; }
    #syndrome-search {
      width: 100%; padding: .7rem 2.5rem .7rem 2.5rem;
      border: 1.5px solid var(--border); border-radius: 50px;
      font-size: .92rem; font-family: var(--font-body);
      background: white; color: var(--text);
      transition: border-color .2s, box-shadow .2s;
    }
    #syndrome-search:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,158,179,.12); }
    .search-clear { position: absolute; right: .85rem; background: none; border: none; color: var(--muted); cursor: pointer; font-size: .9rem; padding: 2px; }

    /* ── Tabs categoría ───────────────────────────────── */
    .cat-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.25rem 0 .5rem; }
    .cat-tab {
      display: flex; align-items: center; gap: .45rem;
      padding: .5rem 1.1rem; border-radius: 50px;
      border: 1.5px solid var(--border); background: white;
      font-size: .83rem; font-weight: 600; color: var(--slate);
      cursor: pointer; transition: all .2s;
    }
    .cat-tab:hover { border-color: var(--teal); color: var(--teal); }
    .cat-tab.active { background: var(--slate-dk); color: white; border-color: var(--slate-dk); }
    .cat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .cat-count { background: var(--blue-lt); color: var(--teal-dk); font-size: .72rem; padding: .1rem .45rem; border-radius: 20px; margin-left: .1rem; }
    .cat-tab.active .cat-count { background: rgba(255,255,255,.22); color: white; }

    /* ── View toggle ──────────────────────────────────── */
    .view-toggle { display: flex; gap: .4rem; justify-content: flex-end; margin-bottom: .75rem; }
    .view-btn { padding: .38rem .9rem; border-radius: 8px; font-size: .8rem; font-weight: 600; border: 1.5px solid var(--border); background: white; color: var(--muted); cursor: pointer; transition: all .2s; }
    .view-btn.active, .view-btn:hover { background: var(--teal); color: white; border-color: var(--teal); }

    /* ── Cards ────────────────────────────────────────── */
    .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-top: .5rem; }
    .syn-card {
      background: white; border-radius: var(--radius);
      border: 1.5px solid var(--border); padding: 1.25rem;
      cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s;
      display: flex; flex-direction: column; gap: .55rem;
      position: relative; overflow: hidden;
    }
    .syn-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,100,130,.13); border-color: var(--teal); }
    .syn-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
    .syn-card[data-cat="sexual"]::before    { background: #009eb3; }
    .syn-card[data-cat="autosomal"]::before { background: #7c3aed; }
    .syn-card[data-cat="monogenic"]::before { background: #059669; }
    .syn-card[data-cat="rare"]::before      { background: #dc2626; }
    .syn-card-head { display: flex; align-items: flex-start; gap: .6rem; }
    .syn-card-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: white; }
    .syn-card[data-cat="sexual"]    .syn-card-num { background: #009eb3; }
    .syn-card[data-cat="autosomal"] .syn-card-num { background: #7c3aed; }
    .syn-card[data-cat="monogenic"] .syn-card-num { background: #059669; }
    .syn-card[data-cat="rare"]      .syn-card-num { background: #dc2626; }
    .syn-card-name { font-family: var(--font-head); font-size: 1rem; color: var(--slate-dk); line-height: 1.3; flex: 1; }
    .syn-card-karyo { font-family: monospace; font-size: .76rem; color: var(--muted); }
    .syn-card-brief { font-size: .82rem; color: var(--muted); line-height: 1.6; }
    .syn-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .5rem; }
    .syn-card-assoc { font-size: .72rem; font-weight: 600; padding: .15rem .6rem; border-radius: 20px; }
    .assoc-yes { background: #d1fae5; color: #065f46; }
    .assoc-no  { background: #fff8e8; color: #92400e; }
    .syn-card-arrow { color: var(--teal); font-size: 1.1rem; }

    /* ── Cat badges en tabla ──────────────────────────── */
    .badge-cat-sexual    { background: #e0f9fb; color: #007a8c; }
    .badge-cat-autosomal { background: #ede9fe; color: #5b21b6; }
    .badge-cat-monogenic { background: #d1fae5; color: #065f46; }
    .badge-cat-rare      { background: #fee2e2; color: #991b1b; }

    /* ── Results info ─────────────────────────────────── */
    .results-info { font-size: .82rem; color: var(--muted); margin-top: 1rem; text-align: right; }