:root {
    --azul: #af8b4f;          /* dorado institucional CAMARCO */
    --azul-oscuro: #7c5f30;   /* dorado oscuro para hover/bordes/legibilidad */
    --azul-tinta: #241d10;    /* marrón casi negro para hero/footer */
    --tinta: #1e1a15;
    --tinta-suave: #57514a;
    --linea: #e7e2d9;
    --papel: #ffffff;
    --papel-2: #f8f6f1;
    --niebla: #efeae0;
    --acento: #8a5a2a;        /* bronce, para destacados sobre el dorado */
    --sobre-relleno: #241d10; /* texto sobre relleno dorado */
    --sombra: 0 1px 2px rgba(36,29,16,0.06), 0 8px 24px rgba(36,29,16,0.07);
    --sombra-fuerte: 0 12px 40px rgba(36,29,16,0.18);
    --radio: 10px;
    --ancho: 1120px;
    --fuente: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  :root[data-theme="dark"] {
    --azul: #d9b877;
    --azul-oscuro: #e3c88a;
    --azul-tinta: #efe2c4;
    --tinta: #f2ede4;
    --tinta-suave: #b6ac9c;
    --linea: #38312440;
    --linea: #362f24;
    --papel: #16130d;
    --papel-2: #1e1a12;
    --niebla: #262016;
    --acento: #d6a562;
    --sobre-relleno: #241d10;
    --sombra: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
    --sombra-fuerte: 0 12px 40px rgba(0,0,0,0.5);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --azul: #d9b877;
      --azul-oscuro: #e3c88a;
      --azul-tinta: #efe2c4;
      --tinta: #f2ede4;
      --tinta-suave: #b6ac9c;
      --linea: #362f24;
      --papel: #16130d;
      --papel-2: #1e1a12;
      --niebla: #262016;
      --acento: #d6a562;
      --sobre-relleno: #241d10;
      --sombra: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
      --sombra-fuerte: 0 12px 40px rgba(0,0,0,0.5);
    }
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--fuente);
    color: var(--tinta);
    background: var(--papel-2);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }

  .contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem; }

  /* ===== barra prototipo ===== */
  .aviso-proto {
    background: repeating-linear-gradient(45deg, var(--azul), var(--azul) 12px, var(--azul-oscuro) 12px, var(--azul-oscuro) 24px);
    color: #fff;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.4rem 1rem;
    font-weight: 600;
  }

  /* ===== header sitio ===== */
  .site-bar {
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .site-bar .contenedor {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
  }
  .marca { display: flex; align-items: center; }
  .marca img.logo { height: 44px; width: auto; display: block; }
  /* el logo trae fondo blanco: en modo oscuro le damos un chip claro para que no corte */
  :root[data-theme="dark"] .marca img.logo { background: #fff; border-radius: 6px; padding: 4px 8px; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marca img.logo { background: #fff; border-radius: 6px; padding: 4px 8px; } }
  .nav-mini { display: flex; gap: 1.4rem; font-size: 0.82rem; font-weight: 600; }
  .nav-mini a { text-decoration: none; color: var(--tinta-suave); transition: color .15s; }
  .nav-mini a:hover { color: var(--azul); }
  @media (max-width: 720px) { .nav-mini { display: none; } }

  /* ===== hero slider ===== */
  .hero { position: relative; background: #000; color: #fff; overflow: hidden; }
  /* la transición entre slides es por scroll horizontal (scroll-snap) */
  .hero-slider {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .hero-slider::-webkit-scrollbar { display: none; }
  .hero-slide {
    position: relative; flex: 0 0 100%; min-height: 720px; scroll-snap-align: start;
    display: flex; align-items: center; background-size: cover; background-position: center;
  }
  @media (max-width: 720px) { .hero-slide { min-height: 90vh; align-items: flex-end; } }
  /* overlay de legibilidad; cuando haya imagen real va por encima de ella */
  .hero-slide::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.14) 75%, transparent 100%);
  }
  @media (max-width: 720px) {
    .hero-slide::before { background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0.6) 100%); }
  }
  .hero-slide .contenedor { position: relative; z-index: 1; width: 100%; padding-top: 5.5rem; padding-bottom: 5.5rem; }
  .hero .kicker {
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--sobre-relleno); font-weight: 700; margin-bottom: 1.2rem;
    display: inline-block; background: var(--azul); padding: 0.4rem 0.9rem; border-radius: 3px;
  }
  .hero h1 {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    line-height: 1.08; margin: 0 0 1.1rem; font-weight: 800;
    letter-spacing: -0.02em; text-wrap: balance; max-width: 20ch;
  }
  .hero p.lead { font-size: 1.15rem; max-width: 52ch; color: rgba(255,255,255,0.85); margin: 0 0 1.2rem; }
  .hero .hero-pilares { font-size: 0.82rem; letter-spacing: 0.02em; color: var(--azul); font-weight: 700; margin: 0 0 1.8rem; max-width: 52ch; }
  .hero .acciones { display: flex; gap: 0.8rem; flex-wrap: wrap; }
  /* controles del slider */
  .hero-flecha {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35);
    background: rgba(36,29,16,0.35); color: #fff; cursor: pointer; font-size: 1.4rem; line-height: 1;
    display: grid; place-items: center; backdrop-filter: blur(2px); transition: background .15s;
  }
  .hero-flecha:hover { background: rgba(36,29,16,0.6); }
  .hero-flecha.prev { left: 1.1rem; }
  .hero-flecha.next { right: 1.1rem; }
  .hero-flecha:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .hero-flecha[disabled] { opacity: 0; pointer-events: none; }
  @media (max-width: 560px) { .hero-flecha { width: 38px; height: 38px; top: auto; bottom: 3.2rem; transform: none; } }
  .hero-dots {
    position: absolute; bottom: 1.2rem; left: 0; right: 0; z-index: 4;
    display: flex; gap: 0.5rem; justify-content: center;
  }
  .hero-dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,0.45); transition: width .2s, background .2s; }
  .hero-dot.activa { background: #fff; width: 26px; border-radius: 5px; }
  .hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  .btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-weight: 700; font-size: 0.9rem; text-decoration: none;
    padding: 0.8rem 1.4rem; border-radius: 8px; border: 1px solid transparent;
    cursor: pointer; transition: transform .12s, background .15s, border-color .15s;
  }
  .btn:active { transform: translateY(1px); }
  .btn-primario { background: var(--azul); color: var(--sobre-relleno); }
  .btn-primario:hover { background: #c0a066; }
  .btn-fantasma { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.3); }
  .btn-fantasma:hover { background: rgba(255,255,255,0.16); }

  /* ===== secciones generales ===== */
  section { padding: 5rem 0; }
  .encabezado-seccion { margin-bottom: 2.6rem; }
  .encabezado-seccion .num {
    font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--azul); font-weight: 800; display: inline-flex; align-items:center; gap: .5rem;
  }
  .encabezado-seccion .num::before { content:""; width: 22px; height: 2px; background: var(--azul); }
  .encabezado-seccion h2 {
    font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin: 0.7rem 0 0.5rem;
    letter-spacing: -0.02em; font-weight: 800; text-wrap: balance;
  }
  .encabezado-seccion p { color: var(--tinta-suave); font-size: 1.05rem; margin: 0; }

  /* ===== 01 presidente ===== */
  #presidente { background: var(--papel); border-top: 1px solid var(--linea); }
  .presidente-grid { display: grid; grid-template-columns: 320px 1fr; gap: 3rem; align-items: start; }
  @media (max-width: 780px) { .presidente-grid { grid-template-columns: 1fr; gap: 2rem; } }
  .retrato {
    position: relative; border-radius: var(--radio); overflow: hidden;
    box-shadow: var(--sombra-fuerte); aspect-ratio: 4/5; background: var(--niebla);
  }
  .retrato .ph {
    position:absolute; inset:0; display:grid; place-items:center;
    background: linear-gradient(160deg, var(--niebla), var(--linea));
    color: var(--tinta-suave); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  }
  .retrato .foto-presi { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: center top; }
  .retrato .credito {
    position: absolute; left:0; right:0; bottom:0; z-index:2;
    background: linear-gradient(transparent, rgba(16,26,77,0.85));
    color:#fff; padding: 1.2rem 1rem 0.9rem; font-size: 0.82rem;
  }
  .retrato .credito b { display:block; font-size: 1rem; }
  .cita-presi {
    font-size: 1.5rem; line-height: 1.4; font-weight: 500;
    letter-spacing: -0.01em; margin: 0 0 1.6rem; position: relative; padding-left: 1.4rem;
    border-left: 3px solid #bfad7b; color: var(--tinta);
  }
  .cuerpo-presi p { color: var(--tinta-suave); margin: 0 0 1rem; max-width: none; text-align: justify; }
  .firma { margin-top: 1.6rem; font-weight: 700; }
  .firma small { display:block; font-weight: 500; color: var(--tinta-suave); }

  /* ===== 02 galería episodios ===== */
  #episodios { background: var(--papel-2); }
  .grid-eps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
  @media (max-width: 1040px) { .grid-eps { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 760px) { .grid-eps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 460px) { .grid-eps { grid-template-columns: 1fr; } }
  .ep-badge.trailer { background: var(--acento); color: #fff; }
  .ep-card.es-trailer { border-color: var(--acento); }
  .ep-card.es-trailer .play { background: rgba(176,138,79,0.95); }

  .ep-card {
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
    overflow: hidden; cursor: pointer; box-shadow: var(--sombra);
    transition: transform .18s, box-shadow .18s, border-color .18s;
    text-align: left; padding: 0; font: inherit; color: inherit; width: 100%;
  }
  .ep-card:hover, .ep-card:focus-visible { transform: translateY(-4px); box-shadow: var(--sombra-fuerte); border-color: var(--azul); outline: none; }
  .ep-card:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
  .ep-thumb { position: relative; aspect-ratio: 16/9; background: var(--niebla); overflow:hidden; }
  .ep-thumb img { width:100%; height:100%; object-fit: cover; transition: transform .3s; }
  .ep-card:hover .ep-thumb img { transform: scale(1.05); }
  .ep-thumb .play {
    position: absolute; inset: 0; margin: auto; width: 58px; height: 58px;
    display: grid; place-items: center; border-radius: 50%;
    background: rgba(175,139,79,0.96); color:#241d10; box-shadow: 0 6px 20px rgba(36,29,16,0.45);
    transition: transform .18s, background .18s;
  }
  .ep-card:hover .ep-thumb .play { transform: scale(1.1); background: var(--azul); }
  .ep-thumb .play svg { width: 22px; height: 22px; margin-left: 3px; }
  .ep-badge {
    position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2;
    background: rgba(36,29,16,0.82); color:#fff; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 5px;
  }
  .ep-dur {
    position: absolute; bottom: 0.7rem; right: 0.7rem; z-index: 2;
    background: rgba(0,0,0,0.75); color:#fff; font-size: 0.72rem; font-weight:600;
    padding: 0.15rem 0.45rem; border-radius: 4px; font-variant-numeric: tabular-nums;
  }
  .ep-body { padding: 1rem 1.1rem 1.2rem; }
  .ep-body h3 { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
  .ep-body p { margin: 0; font-size: 0.88rem; color: var(--tinta-suave); }

  /* ===== modal ===== */
  .modal-fondo {
    position: fixed; inset: 0; z-index: 100; display: none;
    background: rgba(8,12,35,0.82); backdrop-filter: blur(4px);
    align-items: center; justify-content: center; padding: 1.5rem;
  }
  .modal-fondo.abierto { display: flex; }
  .modal-caja {
    background: #000; border-radius: 12px; overflow: hidden;
    width: min(960px, 100%); box-shadow: var(--sombra-fuerte); position: relative;
  }
  .modal-video { aspect-ratio: 16/9; }
  .modal-video iframe { width:100%; height:100%; border:0; display:block; }
  .modal-meta { background: var(--papel); padding: 1rem 1.3rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
  .modal-meta h4 { margin:0; font-size: 1.05rem; }
  .modal-meta small { color: var(--tinta-suave); }
  .modal-cerrar {
    position: absolute; top: -0.6rem; right: -0.6rem; z-index: 3;
    width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: #fff; color: #16192a; font-size: 1.3rem; line-height: 1;
    box-shadow: var(--sombra-fuerte); display:grid; place-items:center;
  }
  @media (max-width: 560px) { .modal-cerrar { top: 0.5rem; right: 0.5rem; } }

  /* ===== flechas de scroll (timeline y galería) ===== */
  .scroller-wrap { position: relative; }
  .scroll-flecha {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 7;
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linea);
    background: var(--papel); color: var(--azul); cursor: pointer; box-shadow: var(--sombra);
    display: grid; place-items: center; transition: border-color .15s, opacity .15s, background .15s;
  }
  .scroll-flecha:hover { border-color: var(--azul); background: var(--niebla); }
  .scroll-flecha svg { width: 18px; height: 18px; }
  .scroll-flecha.prev { left: -8px; }
  .scroll-flecha.next { right: -8px; }
  .scroll-flecha[disabled] { opacity: 0; pointer-events: none; }
  .scroll-flecha:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
  @media (max-width: 640px) { .scroll-flecha { display: none; } } /* en mobile: scroll táctil */

  /* ===== 03 timeline (horizontal en desktop, vertical en mobile) ===== */
  #timeline { background: var(--papel); border-top: 1px solid var(--linea); }
  .tl {
    display: flex; align-items: flex-start; gap: 1.1rem; margin-top: 1.5rem;
    overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; padding: 0 0 0.6rem; scrollbar-width: thin;
  }
  .tl-item { position: relative; flex: 0 0 clamp(230px, 26vw, 280px); scroll-snap-align: start; display: flex; flex-direction: column; }
  /* riel horizontal con nodo */
  .tl-rail { position: relative; height: 26px; margin-bottom: 0.9rem; }
  .tl-rail::before { content:""; position: absolute; left: 0; right: -1.1rem; top: 11px; height: 2px; background: var(--linea); }
  .tl-item:first-child .tl-rail::before { left: 7px; }
  .tl-item:last-child .tl-rail::before { right: 50%; }
  .tl-nodo { position: absolute; left: 0; top: 4px; width: 15px; height: 15px; background: var(--papel); border: 3px solid var(--azul); border-radius: 50%; z-index: 1; }
  .tl-hora { font-weight: 800; color: var(--azul); font-size: 1.15rem; font-variant-numeric: tabular-nums; margin-bottom: 0.5rem; }
  /* separadores (etapas sin año puntual) */
  .tl-item.es-sep .tl-hora { color: var(--acento); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
  .tl-item.es-sep .tl-card { background: var(--niebla); border-color: var(--acento); border-left: 3px solid var(--acento); }
  .tl-item.es-sep .tl-nodo { border-color: var(--acento); background: var(--acento); }
  .tl-card {
    position: relative;
    background: var(--papel-2); border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 1.1rem 1.2rem; box-shadow: var(--sombra); flex: 1; display: flex; flex-direction: column;
    transition: box-shadow .15s, border-color .15s;
  }
  .tl-card:hover { box-shadow: var(--sombra-fuerte); border-color: var(--azul-oscuro); }
  .tl-item.abierto .tl-card { border-color: var(--azul); box-shadow: var(--sombra-fuerte); }
  .tl-card h3 { margin: 0.35rem 0 0; font-size: 1.05rem; letter-spacing: -0.01em; }
  .leer-mas {
    margin-top: 0.8rem; align-self: flex-start; background: none; border: none; cursor: pointer;
    color: var(--azul); font: inherit; font-weight: 700; font-size: 0.82rem; padding: 0.2rem 0;
    display: inline-flex; align-items: center; gap: 0.35rem;
  }
  .leer-mas:hover { color: var(--azul-oscuro); }
  .leer-mas .chev { transition: transform .18s; }
  .leer-mas[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .leer-mas:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 3px; }
  .tl-hint { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--tinta-suave); font-style: italic; }
  @media (max-width: 640px) { .tl-hint { display: none; } }

  /* popover compartido del detalle (flota por encima, uno a la vez) */
  .tl-pop {
    position: fixed; z-index: 90; width: min(360px, 92vw);
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
    box-shadow: var(--sombra-fuerte); padding: 1.1rem 1.3rem 1.2rem;
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s;
  }
  .tl-pop.abierto { opacity: 1; visibility: visible; transform: none; }
  .tl-pop .periodo { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--azul-oscuro); margin-bottom: 0.25rem; }
  .tl-pop h4 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--tinta); letter-spacing: -0.01em; padding-right: 1.5rem; }
  .tl-pop p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--tinta-suave); }
  .tl-pop .cerrar { position: absolute; top: 0.5rem; right: 0.5rem; width: 28px; height: 28px; border: none; background: none; cursor: pointer; color: var(--tinta-suave); font-size: 1.2rem; line-height: 1; border-radius: 50%; }
  .tl-pop .cerrar:hover { background: var(--niebla); color: var(--tinta); }

  @media (max-width: 640px) {
    .tl { display: block; overflow: visible; margin-top: 1rem; padding-bottom: 0; }
    .tl-item { flex: none; position: relative; padding: 0 0 1.1rem 1.6rem; }
    .tl-item::before { content:""; position: absolute; left: 5px; top: 6px; bottom: -0.2rem; width: 2px; background: var(--linea); }
    .tl-item:last-child::before { display: none; }
    .tl-rail { position: absolute; left: 0; top: 4px; height: auto; margin: 0; width: 15px; }
    .tl-rail::before { display: none; }
    .tl-nodo { position: static; }
    .tl-hora { margin-bottom: 0.3rem; font-size: 1rem; }
  }

  /* banda decorativa full-bleed entre timeline y galería */
  /* banda decorativa: transparente y por encima; la galería sube por debajo y se solapa */
  .banda-fondo { line-height: 0; position: relative; z-index: 3; pointer-events: none; margin-top: 3rem; margin-bottom: -11vw; }
  .banda-fondo img { width: 100%; height: auto; display: block; }

  /* ===== 04 galería de fotos (scroll horizontal) ===== */
  #galeria { background: var(--papel-2); position: relative; z-index: 1; padding-top: 2rem; }
  /* nota IA: mismo estilo que la cita del presidente, en negrita, debajo del slider */
  .nota-ia-cita { font-weight: 700; margin: 2rem 0 0; max-width: 80ch; }
  .galeria-scroll {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x proximity;
    padding-bottom: 1.2rem; scrollbar-width: thin;
  }
  .foto-item {
    flex: 0 0 clamp(240px, 30vw, 340px); scroll-snap-align: start;
    aspect-ratio: 4/3; border-radius: var(--radio); overflow: hidden; position: relative;
    border: 1px solid var(--linea); cursor: pointer; box-shadow: var(--sombra);
    padding: 0; font: inherit; color: #fff; display: block; transition: transform .18s, box-shadow .18s;
  }
  .foto-item:hover, .foto-item:focus-visible { transform: translateY(-4px); box-shadow: var(--sombra-fuerte); outline: none; }
  .foto-item:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
  .foto-item .lienzo { position: absolute; inset: 0; display: block; background: var(--niebla); }
  .foto-item .lienzo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
  .foto-item:hover .lienzo img { transform: scale(1.05); }
  .foto-item .rotulo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.4rem 1rem 0.85rem; font-size: 0.86rem; font-weight: 600; background: linear-gradient(transparent, rgba(20,16,17,0.8)); }
  .foto-item .lupa { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: rgba(20,16,17,0.55); display: grid; place-items: center; opacity: 0; transition: opacity .18s; }
  .foto-item:hover .lupa { opacity: 1; }
  .foto-item .lupa svg { width: 15px; height: 15px; }
  .galeria-hint { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--tinta-suave); font-style: italic; }
  /* lightbox de imagen */
  .lightbox { position: fixed; inset: 0; z-index: 110; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(8,6,7,0.85); backdrop-filter: blur(4px); }
  .lightbox.abierto { display: flex; }
  .lightbox-caja { position: relative; width: min(720px, 100%); }
  .lightbox-lienzo { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #241d10; color: #fff; box-shadow: var(--sombra-fuerte); }
  .lightbox-lienzo img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .lightbox-pie { text-align: center; color: #fff; margin-top: 0.9rem; font-size: 0.95rem; }
  .lightbox-cerrar { position: absolute; top: -0.6rem; right: -0.6rem; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; background: #fff; color: #16192a; font-size: 1.3rem; box-shadow: var(--sombra-fuerte); display: grid; place-items: center; }
  @media (max-width: 560px) { .lightbox-cerrar { top: 0.4rem; right: 0.4rem; } }

  /* ===== 05 comentarios ===== */
  #comentarios { background: var(--papel); border-top: 1px solid var(--linea); }
  /* columna izquierda del foro: una sola caja con fondo */
  .foro-col {
    background: var(--niebla); border: 1px solid var(--linea); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: 1.6rem;
  }
  .foro-pregunta {
    display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 1.4rem;
    background: var(--niebla); border: 1px solid var(--linea); border-left: 3px solid #bfad7b;
    border-radius: var(--radio); padding: 1.2rem 1.3rem;
  }
  .foro-pregunta .foro-q { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--azul); color: var(--sobre-relleno); display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; }
  .foro-pregunta .q { margin: 0.1rem 0 0.4rem; font-size: 0.8rem; font-weight: 700; color: var(--tinta); letter-spacing: -0.01em; }
  .foro-pregunta .a { margin: 0; color: var(--tinta-suave); font-size: 0.7rem; }
  /* CTA Biblioteca Digital (banner imagen enlazado) */
  .cta-biblio-banner {
    display: block; margin-top: 3rem; border-radius: var(--radio); overflow: hidden; background: #fff;
  }
  .cta-biblio-banner img { width: 100%; height: auto; display: block; }
  .cta-biblio-banner:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
  .foro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
  @media (max-width: 860px) { .foro-grid { grid-template-columns: 1fr; gap: 2rem; } }

  /* el formulario ya no es una caja aparte: vive dentro de .foro-col */
  .form-aporte { background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; }
  .form-aporte h3 { margin: 0 0 0.3rem; font-size: 1.2rem; }
  .form-aporte .sub { color: var(--tinta-suave); font-size: 0.88rem; margin: 0 0 1.3rem; }
  .campo { margin-bottom: 1rem; }
  .campo label { display:block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); margin-bottom: 0.4rem; }
  .campo input, .campo textarea {
    width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--linea); border-radius: 8px;
    font: inherit; background: var(--papel); color: var(--tinta); resize: vertical;
    transition: border-color .15s, box-shadow .15s;
  }
  .campo input:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(175,139,79,0.25); }
  .honeypot { position: absolute; left: -9999px; }
  .form-aporte .btn-primario { width: 100%; justify-content: center; background: #bfad7b; color: #fff; }
  .form-aporte .btn-primario:hover { background: #ad9a68; }
  .nota-mod { font-size: 0.76rem; color: var(--tinta-suave); margin: 0.9rem 0 0; text-align:center; }
  /* placeholder del captcha (en producción: widget de Cloudflare Turnstile) */
  .captcha-ph {
    display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem;
    border: 1px dashed var(--linea); border-radius: 8px; padding: 0.7rem 0.9rem;
    background: var(--papel-2); color: var(--tinta-suave); font-size: 0.82rem;
  }
  .captcha-ph .box { width: 22px; height: 22px; border: 2px solid var(--azul); border-radius: 4px; flex-shrink: 0; }
  .captcha-ph b { color: var(--tinta); font-weight: 700; }

  .lista-aportes { display: flex; flex-direction: column; gap: 1rem; }
  .barra-lista { display:flex; justify-content: space-between; align-items:center; margin-bottom: 0.3rem; }
  .barra-lista .cuenta { font-weight: 700; }
  .barra-lista .switch-mod {
    display:inline-flex; align-items:center; gap:0.5rem; font-size:0.78rem; color:var(--tinta-suave); cursor:pointer; user-select:none;
  }
  .switch-mod input { accent-color: var(--azul); }
  .aporte {
    background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 1.1rem 1.3rem; box-shadow: var(--sombra);
  }
  .aporte-top { display:flex; align-items:center; gap:0.7rem; margin-bottom: 0.5rem; }
  .avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink:0;
    display:grid; place-items:center; font-weight:800; color:#fff; font-size:0.9rem;
  }
  .aporte-quien { font-weight: 700; }
  .aporte-quien small { display:block; font-weight: 500; color: var(--tinta-suave); font-size: 0.76rem; }
  .aporte p { margin: 0; color: var(--tinta); }
  .badge-pend {
    margin-left: auto; align-self: flex-start;
    background: #fff7e6; color: #a86a00; border: 1px solid #f2d999;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 0.2rem 0.55rem; border-radius: 20px; white-space: nowrap;
  }
  :root[data-theme="dark"] .badge-pend { background: #3a2e12; color: #f0c766; border-color: #5c4a1e; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-pend { background:#3a2e12; color:#f0c766; border-color:#5c4a1e; } }
  .aporte.pendiente { border-style: dashed; border-color: #f2d999; opacity: 0.92; }
  .aporte.pendiente[hidden] { display: none; }

  /* ===== footer ===== */
  footer.pie { background: #000; color: rgba(255,255,255,0.75); padding: 2.5rem 0; text-align:center; font-size: 0.85rem; }
  footer.pie strong { color:#fff; }

  /* ===== responsive / mobile ===== */
  @media (max-width: 900px) {
    section { padding: 4rem 0; }
    .encabezado-seccion { margin-bottom: 2rem; }
  }
  @media (max-width: 600px) {
    .contenedor { padding: 0 1.1rem; }
    section { padding: 3.2rem 0; }
    .site-bar .contenedor { height: 58px; }
    .marca img.logo { height: 38px; }
    .hero .contenedor { padding-top: 3.4rem; padding-bottom: 3.4rem; }
    .hero p.lead { font-size: 1.02rem; }
    .hero .acciones { width: 100%; flex-direction: column; }
    .hero .acciones .btn { width: 100%; justify-content: center; }
    .encabezado-seccion p { font-size: 0.98rem; }
    .retrato { max-width: 280px; margin: 0 auto; }
    .cita-presi { font-size: 1.25rem; }
    .grid-eps { gap: 1rem; }
    .modal-fondo { padding: 0.8rem; }
    .modal-meta { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  }

  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto; } }

/* ===== pantalla de contraseña (página protegida) ===== */
.doc-pass { min-height: 70vh; display: grid; place-items: center; background: var(--papel); padding: 4rem 1.5rem; }
.doc-pass .contenedor { max-width: 460px; text-align: center; }
.doc-pass h1 { font-size: 1.6rem; margin: 0 0 0.4rem; color: var(--tinta); }
.doc-pass p { color: var(--tinta-suave); margin: 0 0 1.4rem; }
.doc-pass .post-password-form { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.doc-pass .post-password-form label { display: flex; gap: 0.5rem; align-items: center; width: 100%; justify-content: center; }
.doc-pass .post-password-form input[type="password"] { padding: 0.7rem 0.9rem; border: 1px solid var(--linea); border-radius: 8px; font: inherit; min-width: 240px; }
.doc-pass .post-password-form input[type="submit"] { background: #bfad7b; color: #fff; border: none; border-radius: 8px; padding: 0.7rem 1.4rem; font-weight: 700; cursor: pointer; }

/* checkbox del formulario del foro */
.campo-cookies { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem; color: var(--tinta-suave); margin: 0 0 1rem; }
.campo-cookies input { margin-top: 0.15rem; accent-color: var(--azul); }