.cm-camino-memoria{
  /* Paleta cálida (referencia: ficha "Elder Aponte Tumay") — papel envejecido,
     verde oliva oscuro para acentos sólidos, terracota como color de énfasis. */
  --paper:#F3EADD;
  --fondo-sec:#E8DAC2; /* fondo de las secciones de zonas y playlist (más oscuro que --paper) */
  --grey-1:#ECE0CC;
  --grey-2:#E3D5B8;
  --grey-3:#D9C7A3;
  --line:#DCC9A8;
  --line-2:#C7B48D;
  --ink:#2B2419;
  --ink-2:#5C5040;
  --ink-3:#8A7A61;
  --black:#3E4A2E;
  --black-2:#323B25;
  --dark:#241D15;
  --accent:#BE5B32;
  --note-line:#B7A47F;
  --focus:#BE5B32;
  --ph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48' fill='none' stroke='%23B7A47F' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='1' y='1' width='54' height='46' rx='4'/%3E%3Ccircle cx='17' cy='16' r='5'/%3E%3Cpath d='M6 41 L22 25 L33 36 L42 28 L50 36'/%3E%3C/svg%3E");
  --ph-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48' fill='none' stroke='%23FFFFFF' stroke-opacity='.45' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='1' y='1' width='54' height='46' rx='4'/%3E%3Ccircle cx='17' cy='16' r='5'/%3E%3Cpath d='M6 41 L22 25 L33 36 L42 28 L50 36'/%3E%3C/svg%3E");
}

.cm-camino-memoria *{ box-sizing:border-box; }
.cm-camino-memoria{
  --headh:119px; /* alto del header al cargar la página (empuja el microsito hacia abajo para no arrancar tapado) */
  --stickytop:var(--headh); /* dónde se pega el hero al hacer scroll (valor fijo: el alto del hero se congela una sola vez, no puede depender de algo que cambia en cada scroll) */
  margin:var(--headh) 0 0 0; background:var(--paper); color:var(--ink);
  font-family:"Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
/* En mobile el header de JEP NO queda fijo: se va con el scroll como
   cualquier otro contenido. Reservarle --headh de espacio permanente arriba
   (como si siguiera ahí) deja un hueco vacío una vez que ya se scrolleó más
   allá de él — por eso el hero pasa a pegarse en 0 en mobile, no 70px más
   abajo. (La barra de zonas no usa esta variable: la posiciona el JS.) */
@media (max-width:760px){ .cm-camino-memoria{ --stickytop:0px; } }
.cm-camino-memoria :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.cm-camino-memoria h1,
.cm-camino-memoria h2,
.cm-camino-memoria h3,
.cm-camino-memoria h4{ margin:0; color:var(--ink); font-weight:700; letter-spacing:-.01em; text-wrap:balance; }
/* Estilo propio de los h4 del micrositio: terracota y alineados a la
   izquierda. Con !important porque la plantilla de SharePoint le da a los
   h4 su propio color y alineación. */
.cm-camino-memoria h4{ color:var(--accent) !important; text-align:left !important; }
.cm-camino-memoria p{ margin:0; color:var(--ink-2); }
.cm-camino-memoria a{ color:inherit; }

/* ============================================================
   MICROSITIO
   ============================================================ */
.cm-sec{ padding:76px 28px; border-bottom:1px solid var(--line); }
.cm-sec:last-child{ border-bottom:0; }
.cm-sec.tight{ padding-top:44px; padding-bottom:44px; }
.cm-sec.grey{ background:var(--grey-1); }
@media (max-width:760px){ .cm-sec{ padding:46px 18px; } }

/* Ancho del contenido: el mismo máximo que el menú del sitio
   (.menuHeader .navbar-collapse mide 1196 px en jep.gov.co), para que
   todo el micrositio quede alineado con el header. */
.cm-camino-memoria{ --ancho:1196px; }
.cm-wrap{ max-width:var(--ancho); margin:0 auto; }
.cm-wrap.wide{ max-width:var(--ancho); }
.cm-wrap.full{ max-width:var(--ancho); }
.cm-center{ text-align:center; display:grid; gap:14px; justify-items:center; margin-bottom:40px; }
.cm-center h2{ font-size:29px; }
.cm-center p{ max-width:62ch; font-size:16px; }
.cm-zonas-intro{
  display:grid; gap:14px; max-width:1110px; margin:20px auto 0;
  text-align:center;
}
.cm-zonas-intro p{ font-size:16px; line-height:1.6; color:var(--ink-2); }
.cm-eyebrow{
  font-family:"Roboto",sans-serif; font-size:16px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3);
}

.ph{ background:var(--grey-2) var(--ph) no-repeat center; background-size:56px 48px; display:block; width:100%; }
.r169{ aspect-ratio:16/9; } .r43{ aspect-ratio:4/3; } .r11{ aspect-ratio:1/1; } .r34{ aspect-ratio:3/4; } .r23{ aspect-ratio:2/3; }

/* Fotos reales con pie de foto y crédito */
.cm-foto{ margin:0; display:grid; gap:8px; }
.cm-foto img{ display:block; width:100%; height:auto; }
.cm-foto figcaption{ display:grid; gap:4px; font-size:14px; line-height:1.2; color:var(--ink-3); }
.cm-foto figcaption b{ font-weight:700; }
/* Variante tarjeta: la foto llena el recuadro y el pie aparece encima al
   pasar el mouse (o al enfocar la tarjeta con teclado). */
.cm-foto.hover{ position:relative; overflow:hidden; display:block; background:var(--grey-2); }
.cm-foto.hover img{ height:100%; object-fit:cover; }
.cm-foto.hover figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  background:linear-gradient(to top, rgba(36,29,21,.92), rgba(36,29,21,.75) 70%, rgba(36,29,21,0));
  color:#fff; text-align:left;
  opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease;
}
.cm-foto.hover figcaption .cred{ color:rgba(255,255,255,.8); }
.cm-card:hover .cm-foto.hover figcaption,
.cm-card:focus-visible .cm-foto.hover figcaption{ opacity:1; transform:none; }
/* En pantallas táctiles no hay hover: el pie queda visible siempre */
@media (hover:none){ .cm-foto.hover figcaption{ opacity:1; transform:none; } }

.tx{ display:grid; gap:7px; }
.tx i{ display:block; height:8px; background:var(--grey-3); }
.tx i:nth-child(3n){ width:86%; } .tx i:nth-child(4n){ width:64%; }

.cm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--black); color:#fff; border:1px solid var(--black); text-decoration:none;
  font-family:"Roboto",sans-serif; font-size:16px; font-weight:600;
  padding:13px 26px; cursor:pointer; min-height:46px;
}
.cm-btn:hover{ background:var(--black-2); border-color:var(--black-2); }
.cm-btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.cm-btn.ghost:hover{ border-color:var(--ink); }
.cm-btn.small{ padding:9px 16px; min-height:38px; font-size:16px; }
.cm-btn .pdf{
  font-family:"Roboto",sans-serif; font-size:16px; letter-spacing:.04em;
  border:1px solid currentColor; padding:1px 5px; opacity:.8;
}
.link{
  display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  font-family:"Roboto",sans-serif; font-size:16px; font-weight:500; color:var(--ink);
  text-decoration:underline; text-underline-offset:3px; padding:6px 0; min-height:38px;
}
.cm-row{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.cm-row.between{ justify-content:space-between; }

/* ---------- HERO fijo: la sección de zonas sube por encima al hacer scroll ----------
   #heroReveal envuelve solo el hero y mide su alto real (--hero-h, por JS) para
   fijarlo (position:sticky). #cortina, con un margen negativo igual a ese alto,
   entra desde abajo y lo cubre por completo. El colchón extra (100svh) NO es
   arbitrario: para que la cortina arranque totalmente oculta y termine de cubrir
   la pantalla justo cuando el hero se suelta (sin cortes ni saltos), necesita
   ser de al menos una pantalla completa — acortarlo rompe esa cuenta. */
#heroReveal{
  position:relative; background:var(--dark);
  height:calc(var(--hero-h, 640px) + 100svh);
}
.cm-hero{
  /* Si el contenido es más alto que la pantalla, el top pasa a ser negativo:
     el hero se desplaza hasta que su borde inferior toca el de la pantalla y
     recién ahí se queda fijo (así nunca queda una parte sin poder verse). */
  /* --vista (JS): alto visible real del contenedor con scroll; 100svh de respaldo */
  position:sticky; top:min(var(--stickytop, 0px), calc(var(--vista, 100svh) - var(--hero-h, 640px))); z-index:1; width:100%;
  /* Como mínimo, la pantalla completa (con --stickytop descontado solo donde
     el header realmente queda fijo). Con el texto real puede ser más alto:
     crece con el contenido en vez de recortarlo. El fondo usa
     background-size:cover y el video mantiene su aspect-ratio: nada se estira. */
  /* Alto máximo del hero: 820px. En pantallas más altas ya no ocupa toda la
     pantalla, se queda en 820px. Va en el min-height (y no como max-height)
     para no recortar nunca el contenido: si en un celular angosto el texto
     mide más de 820px, el hero crece lo justo para mostrarlo completo.
     El JS mide el alto real, así que la cortina y el sticky se ajustan solos. */
  min-height:min(calc(100svh - var(--stickytop, 0px)), 820px);
  overflow:hidden; background:var(--dark);
  display:flex; flex-direction:column; justify-content:center;
}
/* Pantallas grandes: el hero mide lo que su contenido (nunca recorta nada)
   y no ocupa toda la pantalla, así la cortina de las zonas ya asoma en el
   primer pantallazo. Se reduce el aire arriba y abajo para que quede compacto. */
@media (min-width:861px){
  /* La cortina arranca justo debajo del hero (visible desde el primer
     pantallazo) y lo cubre a medida que se baja: el colchón es el propio alto
     del hero, no una pantalla completa como en celular. */
  /* La cortina arranca 80px más abajo de los logos: ese espacio lo ocupa el
     propio hero (padding-bottom), así se sigue viendo la foto con su filtro y
     no aparece una franja oscura entre el hero y la cortina. */
  #heroReveal{ height:calc(var(--hero-h, 640px) * 2); }
  .cm-hero{ min-height:0; padding-bottom:80px; }
  .cm-herowrap{ padding-top:28px; padding-bottom:28px; }
}
/* Foto de fondo a pantalla completa, con acercamiento tipo dron (zoom + leve
   desplazamiento diagonal, más marcado que un simple zoom estático). */
.cm-hero::before{
  content:""; position:absolute; inset:-8%; z-index:0;
  background:url("https://www.jep.gov.co/caminomemoria/images/BG-casanare@3x.webp") center/cover no-repeat;
  animation:cm-dron 16s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes cm-dron{
  from{ transform:scale(1) translate(0,0); }
  to{ transform:scale(1.25) translate(-1.5%,-1%); }
}
@media (prefers-reduced-motion: reduce){ .cm-hero::before{ animation:none; } }
/* Filtro con la paleta del sitio (terracota + verde oliva, en transparencia)
   sobre la foto — misma idea de "manchas de luz" de delucks.com/en, ahora
   además atenuando la imagen para que el texto siga legible encima. */
/* Sin filtro de color sobre la foto del hero (la imagen ya trae su tono) */
.cm-herowrap{
  position:relative; z-index:3; width:100%; max-width:calc(var(--ancho) + 56px); margin:0 auto;
  padding:48px 28px; display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:center;
}
@media (max-width:860px){ .cm-herowrap{ grid-template-columns:1fr; padding:56px 18px 40px; gap:32px; } }
/* En móvil el hero debe caber justo en la pantalla (100svh - headh): se
   recortan al mínimo el padding y los espacios entre bloques para que nada
   quede cortado por el overflow:hidden del contenedor. */
@media (max-width:760px){
  .cm-herowrap{ padding:18px 16px 6px; gap:14px; }
  .cm-cue{ margin-top:0; }
}
.cm-herotxt{
  text-align:left; display:grid; gap:20px; justify-items:start;
}
.cm-hero h1{ color:#fff; font-size:clamp(34px, 4.2vw, 60px); line-height:1.04; max-width:15ch; text-align:left; }
.cm-hero p{ color:rgba(255,255,255,.78); max-width:54ch; font-size:16px; }
.cm-hero .cm-hero-sub{ color:#F0B58F; font-size:clamp(20px, 2vw, 26px); font-weight:500; line-height:1.25; max-width:none; }
.cm-hero-texto{ display:grid; gap:12px; }
.cm-hero-texto p{ line-height:1.3; max-width:62ch; }
@media (min-width:861px){ .cm-hero-texto p{ max-width:650px; } }
.cm-hero .cm-hero-texto .cierre{ color:#fff; font-weight:500; }
.cm-hero .cm-btn.ghost{ color:#fff; border-color:rgba(255,255,255,.44); }
.cm-hero .cm-btn.ghost:hover{ border-color:#fff; }
.cm-hero .cm-btn:not(.ghost){ background:#fff; color:var(--dark); border-color:#fff; }
.cm-hero .cm-btn:not(.ghost):hover{ background:rgba(255,255,255,.88); }

/* Tooltip del botón "Punto de partida": aparece con hover o con foco de
   teclado (accesible sin JS), como una tarjeta flotando sobre el botón. */
.cm-tooltip-wrap{ position:relative; display:inline-block; outline:none; }
.cm-tooltip{
  position:absolute; left:0; bottom:calc(100% + 14px); z-index:10;
  /* Ancla siempre a la izquierda del botón (nunca centrado): el botón está
     pegado al borde izquierdo de la columna de texto, así que centrar el
     tooltip lo sacaría por fuera de la pantalla en mobile. El ancho se
     limita al espacio real disponible para que no se corte. */
  width:min(420px, calc(100vw - 64px)); padding:16px 18px; background:var(--paper); color:var(--ink-2);
  border:1px solid var(--line-2); box-shadow:0 12px 30px rgba(0,0,0,.3);
  font-size:16px; line-height:1.55; text-align:left; font-weight:400;
  text-transform:none; letter-spacing:normal;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events:none;
}
.cm-tooltip::after{
  content:""; position:absolute; top:100%; left:24px;
  border:9px solid transparent; border-top-color:var(--paper);
}
.cm-tooltip-wrap:hover .cm-tooltip,
.cm-tooltip-wrap:focus .cm-tooltip,
.cm-tooltip-wrap:focus-within .cm-tooltip{
  opacity:1; visibility:visible; transform:translateY(0);
}

.cm-cue{
  display:flex; align-items:center; gap:12px; margin-top:4px;
  font-family:"Roboto",sans-serif; font-size:16px; letter-spacing:.04em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
.cm-cue i{ display:block; width:1px; height:34px; background:rgba(255,255,255,.32); position:relative; overflow:hidden; }
@media (prefers-reduced-motion: no-preference){
  .cm-cue i::after{ content:""; position:absolute; left:0; top:-34px; width:1px; height:34px;
    background:#fff; animation:drop 2.2s ease-in-out infinite; }
}
@keyframes drop{ 0%{ transform:translateY(0); } 60%,100%{ transform:translateY(68px); } }

/* Video embebido (YouTube/Spreaker), reutilizado en el hero y en los bloques de zona */
.cm-videoembed{ position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; }
.cm-videoembed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.cm-videoportada > img{ position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover; display:block; }
/* Velo oscuro sobre la vista previa: ayuda a disimular el título/canal y los
   subtítulos forzados de YouTube, y da el look de fondo atenuado del hero. */
.cm-videovelo{ position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.9); pointer-events:none; }
/* Vista previa en cámara lenta: acercamiento suave y algo más de contraste */
.cm-previa-lenta iframe{
  transform-origin:50% 45%; filter:contrast(1.12) saturate(.82);
  animation:cm-previa-zoom 24s ease-in-out infinite alternate;
}
@keyframes cm-previa-zoom{ from{ transform:scale(1); } to{ transform:scale(1.1); } }
@media (prefers-reduced-motion:reduce){ .cm-previa-lenta iframe{ animation:none; } }
.cm-videoplay{
  position:absolute; inset:0; margin:auto; z-index:2;
  background:rgba(36,29,21,.82); border:2px solid rgba(255,255,255,.75); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  /* Igual que con .perfiltab: algo de la plantilla del sitio le pisa el
     ancho/alto a los <button>, y como no es cuadrado, el border-radius:50%
     lo deforma a óvalo. Se fuerza para que siempre sea un círculo. */
  width:76px !important; height:86px !important; max-width:none !important;
  border-radius:50% !important; flex:none !important;
}
.cm-videoplay::after{
  content:""; border-left:20px solid #fff; border-top:13px solid transparent;
  border-bottom:13px solid transparent; margin-left:6px;
}
.cm-videoplay:hover{ background:rgba(36,29,21,.95); border-color:#fff; }

/* Tira de logos, en negativo, al pie del hero */
.cm-herofoot{
  position:relative; z-index:3; width:100%; max-width:calc(var(--ancho) + 56px); margin:0 auto;
  padding:20px 28px 26px; border-top:1px solid rgba(255,255,255,.16);
  display:flex; gap:26px; align-items:center; flex-wrap:wrap;
}
@media (max-width:760px){ .cm-herofoot{ padding:8px 16px 10px; gap:10px; } }
.cm-herologos{
  display:flex; width:100%; gap:32px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.cm-herologos img{
  display:block; height:46px; width:auto; max-width:200px;
  object-fit:contain; opacity:.94;
}
@media (max-width:760px){
  .cm-herologos{ justify-content:center; gap:16px; }
  .cm-herologos img{ height:26px; max-width:120px; }
}

.subt{ font-family:"Roboto",sans-serif; font-size:16px; font-weight: 600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3); }

/* Cortina: arranca a la altura del hero y lo tapa al subir (ver #heroReveal arriba) */
#cortina{
  position:relative; z-index:2; background:var(--fondo-sec);
  margin-top:calc(-1 * var(--hero-h, 640px));
}
/* Textura de tierra (la genera el JS): se repite y se mueve con el scroll.
   El color de fondo (--fondo-sec) queda debajo de las capas de partículas. */
.cm-tierra{ background-color:var(--fondo-sec); background-repeat:repeat; }
/* El contenido de cada zona conserva el crema claro: así se distinguen las
   tres secciones (intro de zonas · contenido de la zona · playlist) */
.cm-panel.cm-tierra, .cm-panel{ background-color:var(--paper); }

/* ---------- Botonera de zonas, fija durante toda la sección ---------- */
#centinela{ height:1px; }
.cm-zonesticky{
  position:relative; z-index:60; background:var(--fondo-sec);
  border-bottom:1px solid var(--line); padding:16px 28px;
  transition:padding .2s ease;
}
@media (max-width:760px){ .cm-zonesticky{ padding:12px 18px; } }
/* Estado compacto: al quedar pegada arriba, las pestañas se achican */
.cm-zonesticky.fija{ padding:10px 28px; box-shadow:0 1px 0 var(--line), 0 8px 20px rgba(17,17,19,.06); }
@media (max-width:760px){ .cm-zonesticky.fija{ padding:8px 18px; } }
.cm-zonesticky.fija .cm-tab{ padding:9px 12px; min-height:44px; }
.cm-zonesticky.fija .cm-tab svg{ display:none; }
.cm-zonesticky.fija .cm-tab small{ display:none; }
.cm-zonesticky.fija .cm-arrow{ height:44px; }
/* Alternativa con JS: algunas plantillas de SharePoint anidan la página en un
   contenedor propio con overflow:auto (#s4-workspace), lo que rompe
   position:sticky (dos scrolls independientes). Cuando eso pasa, el mismo
   IntersectionObserver que activa .fija fuerza position:fixed y reserva el
   espacio con #zonestickySpacer para que el contenido no salte. */
.cm-zonesticky.fija-fixed{ position:fixed; left:0; right:0; top:0; }
#zonestickySpacer{ display:none; }

.cm-zonebar{ display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; }
@media (max-width:760px){ .cm-zonebar{ grid-template-columns:1fr; } }
.cm-tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:760px){ .cm-tabs{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Menú de zonas tipo hamburguesa (solo móvil) ----------
   En pantallas angostas las flechas prev/next se ocultan y las 4 pestañas
   quedan colapsadas dentro de un botón único; se despliegan al tocarlo. */
.cm-zonastoggle{ display:none; }
@media (max-width:760px){
  .cm-arrow{ display:none; }
  .cm-zonastoggle{
    display:flex; align-items:center; gap:12px; width:100%;
    border:1px solid var(--line-2); background:var(--paper); color:var(--ink);
    padding:12px 16px; cursor:pointer; font-family:"Roboto",sans-serif;
    font-size:16px; font-weight:600;
  }
  .cm-zonastoggle .ico{ width:20px; flex:none; display:grid; gap:5px; }
  .cm-zonastoggle .ico i{ display:block; height:2px; background:currentColor; transition:transform .2s ease, opacity .2s ease; }
  .cm-zonastoggle[aria-expanded="true"] .ico i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .cm-zonastoggle[aria-expanded="true"] .ico i:nth-child(2){ opacity:0; }
  .cm-zonastoggle[aria-expanded="true"] .ico i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .cm-tabs{ display:none; margin-top:12px; }
  .cm-zonebar.abierto .cm-tabs{ display:grid; }
}
.cm-tab{
  display:grid; gap:10px; justify-items:center; cursor:pointer; background:var(--paper);
  border:1px solid var(--line); padding:20px 12px; min-height:46px;
  font-family:"Roboto",sans-serif; font-size:16px; font-weight:600; color:var(--ink-2);
}
.cm-tab:hover{ border-color:var(--ink-3); color:var(--ink); }
.cm-tab[aria-selected="true"]{ background:var(--black); border-color:var(--black); color:#fff; }
.cm-tab svg{ width:64px; height:40px; display:block; }
.cm-tab .base{ fill:none; stroke:currentColor; stroke-width:2; opacity:.35; }
.cm-tab .on{ fill:currentColor; opacity:.85; }
.cm-tab small{ font-family:"Roboto",sans-serif; font-size:16px; font-weight:400;
  letter-spacing:.04em; text-transform:uppercase; opacity:.6; }
.cm-arrow{
  width:46px; height:46px; border:1px solid var(--line-2); background:var(--paper);
  color:var(--ink-2); cursor:pointer; font-size:17px; line-height:1;
}
.cm-arrow:hover{ border-color:var(--ink); color:var(--ink); }

/* ---------- Panel dinámico ---------- */
.cm-panel{ position:relative; scroll-margin-top:0; }
/* El contenido de cada zona usa todo el ancho de la pantalla (las tarjetas
   de las placas ya no quedan angostas); el texto del encabezado conserva
   un ancho de lectura cómodo. */
.cm-panel > .cm-wrap{ max-width:var(--ancho); }
.cm-panel > .cm-wrap > header p{ max-width:1110px; }

@media (prefers-reduced-motion: no-preference){
  .cm-panel .fade{ animation:fade .3s ease both; }
}
@keyframes fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.cm-zonehead{ display:grid; grid-template-columns:1.35fr 1fr; gap:48px; align-items:center; margin-bottom:56px; }
@media (max-width:860px){ .cm-zonehead{ grid-template-columns:1fr; gap:26px; } }
.cm-zonehead h2{ font-size:33px; }
.cm-map > svg, .cm-map > img{ width:100%; height:auto; display:block; }
/* Convención bajo el mapa de la zona: mapa pequeño de Colombia con Casanare
   resaltado + leyenda, separada por una línea fina como una nota de mapa */
.cm-convencion{
  display:flex; align-items:center; gap:16px; margin:4px 0 0; padding-top:10px;
  border-top:1px solid var(--line);
}
.cm-convencion img{ width:84px; height:auto; flex:none; display:block; mix-blend-mode:multiply; }
.cm-convencion figcaption{ display:grid; gap:2px; font-size:14px; line-height:1.3; color:var(--ink-2); }
.cm-convencion b{ font-weight:700; color:var(--ink); }

.cm-block{ margin-bottom:60px; }
.cm-block:last-child{ margin-bottom:0; }
.cm-blockhead{ display:flex; gap:16px; align-items:baseline; margin-bottom:24px; flex-wrap:wrap; }
/* Una sola línea bajo el título: la verde (la que pone la plantilla de
   jep.gov.co en los h3), más gruesa. Se fija aquí para que no dependa de la
   plantilla y no se sume a otra línea. */
.cm-blockhead h3{
  font-size:20px; width:100%; margin:0; padding-bottom:10px;
  border-bottom:3px solid #98AE32 !important;
}
.cm-blockhead .meta{ margin-left:auto; font-family:"Roboto",sans-serif;
  font-size:16px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }

.grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.split{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:28px; align-items:start; }
@media (max-width:860px){ .grid3,.grid2,.split{ grid-template-columns:1fr; } }

.cm-card{
  display:grid; border:1px solid var(--line); background:var(--paper);
  text-align:left; padding:0; cursor:pointer; width:100%; font-family:inherit;
}
/* Hover de las tarjetas: sombra cálida, leve elevación, zoom suave de la foto
   y "Ver ficha" en terracota (sin el verde oliva, que no armonizaba).
   El fondo y el color se fijan con !important porque la plantilla de
   SharePoint aplica sus propios estilos de hover a los <button>. */
.cm-card{ transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.cm-card:hover, .cm-card:focus-visible, .cm-card:active{
  background:var(--paper) !important; color:inherit !important;
  border-color:var(--line-2); box-shadow:0 12px 28px rgba(36,29,21,.14);
}
.cm-card:hover{ transform:translateY(-3px); }
.cm-card .cm-foto.hover img{ transition:transform .5s ease; }
.cm-card:hover .cm-foto.hover img{ transform:scale(1.04); }
.cm-card:hover .body .link, .cm-card:focus-visible .body .link{ color:var(--accent); }
.cm-card[aria-pressed="true"]{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
@media (prefers-reduced-motion: reduce){
  .cm-card:hover{ transform:none; }
  .cm-card:hover .cm-foto.hover img{ transform:none; }
}
.cm-card .body{ padding:16px 18px 18px; display:grid; gap:8px; }
.cm-card .body h4{ font-size:16px; font-weight:600; }
.cm-card .body small{ font-family:"Roboto",sans-serif; font-size:16px; color:var(--ink-3); }
.cm-card .body .link{ font-size:16px; min-height:auto; padding:0; }

/* ---------- Popup genérico (ficha de placa) ---------- */
.cm-modal-backdrop{
  /* z-index muy alto a propósito: la plantilla de SharePoint (cinta de edición,
     avisos, traductor, etc.) usa z-index propios que pueden tapar el popup. */
  position:fixed; inset:0; z-index:2147483000; background:rgba(36,29,21,.72);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.cm-modal{
  position:relative; background:var(--paper); max-width:1040px; width:100%;
  max-height:88svh; overflow-y:auto; padding:32px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
@media (max-width:640px){ .cm-modal{ padding:22px; } }
.cm-modal-cerrar{
  position:absolute; top:14px; right:14px; width:36px; height:36px;
  border:1px solid var(--line-2); background:var(--paper); color:var(--ink);
  cursor:pointer; font-size:16px; line-height:1;
}
.cm-modal-cerrar:hover{ border-color:var(--ink); }
/* Dentro del popup, la ficha ya tiene el marco del propio modal */
.cm-modal > .detail{ border:0; background:transparent; padding:0; }

.detail{ border:1px solid var(--line); background:var(--grey-1); padding:24px; display:grid; gap:16px; }
.detail h4{ font-size:24px; font-weight:700; line-height:1.2; margin-top:-8px; }
/* "Ficha de placa · 01 de 6": dato de contexto pequeño, no un título */
.cm-ficha-num{ font-size:14px; color:var(--ink-3); }
/* Títulos de sección dentro de la ficha (Contexto, etc.) en negrita */
.detail .subt{ font-weight:700; }
/* Datos de la ficha: etiqueta arriba y valor debajo (en vez de dos columnas).
   Con dos columnas, etiquetas largas en mayúsculas como "GEORREFERENCIACIÓN"
   no cabían, la tabla se ensanchaba más que el popup y se comía el margen
   derecho. Así cada fila usa todo el ancho y nunca se desborda. */
.detail table, .detail tbody{ display:block; width:100%; font-size:16px; }
.detail tr{ display:block; padding:10px 0; border-bottom:1px solid var(--line); }
.detail th, .detail td{ display:block; text-align:left; padding:0; vertical-align:top; overflow-wrap:anywhere; }
.detail th{ font-family:"Roboto",sans-serif; font-size:16px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:2px; }
.detail td{ color:var(--ink-2); }
.detail .split > *{ min-width:0; }
.empty{ border:1px dashed var(--line-2); padding:34px 20px; text-align:center; color:var(--ink-3);
  font-family:"Roboto",sans-serif; font-size:16px; line-height:1.8; }
.cm-cap{ font-family:"Roboto",sans-serif; font-size:16px; color:var(--ink-3); }

.player{ border:1px solid var(--line); background:var(--paper); padding:18px; display:grid; gap:14px; }
.wave{ display:flex; align-items:center; gap:3px; height:56px; overflow:hidden; }
.wave i{ display:block; width:3px; background:var(--grey-3); flex:none; }
.player.playing .wave i{ background:var(--ink-3); }
@media (prefers-reduced-motion: no-preference){
  .player.playing .wave i{ animation:pulse .9s ease-in-out infinite alternate; }
}
@keyframes pulse{ from{ transform:scaleY(.5); } to{ transform:scaleY(1); } }
.progress{ height:3px; background:var(--grey-3); }
.progress b{ display:block; height:100%; width:0; background:var(--black); }
.time{ font-family:"Roboto",sans-serif; font-size:16px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.transcript[hidden]{ display:none; }
.transcript{ border-top:1px solid var(--line); padding-top:14px; display:grid; gap:10px; }

/* Propuesta B · galería por tabs con rotación — pestañas grandes, como el wireframe */
.galtabs{ display:grid; }
/* El padding extra (compensado con margen negativo) deja ver la sombra y la
   elevación del hover: con overflow-x:auto, lo que sobresale se recortaría. */
.tabstrip{
  display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; padding:6px 8px 26px; margin:-6px -8px -16px;
  position:relative; min-width:0;
  /* desplazamiento horizontal fluido en todos los dispositivos */
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x pan-y;
  scroll-snap-type:x proximity; scroll-padding:0 8px;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.tabstrip > .perfiltab{ scroll-snap-align:start; }
.tabstrip::-webkit-scrollbar{ height:6px; }
.tabstrip::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:3px; }
.tabstrip::-webkit-scrollbar-track{ background:transparent; }
.tabstrip.arrastrando{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.tabstrip.arrastrando .perfiltab{ pointer-events:none; }

/* Flechas a los lados de las pestañas: solo si no caben (clase .desborda) */
.tabnav{ display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:10px; }
.tabnav-btn{ display:none !important; }
.tabnav.desborda{ grid-template-columns:auto minmax(0,1fr) auto; }
.tabnav.desborda .tabnav-btn{
  display:flex !important; align-items:center; justify-content:center;
  width:40px !important; height:72px !important; min-width:0 !important; margin:0 !important; padding:0 !important;
  border:1px solid var(--line-2); background:var(--paper) !important; color:var(--ink) !important;
  font-size:24px; line-height:1; cursor:pointer;
}
.tabnav.desborda .tabnav-btn:hover:not(:disabled){ border-color:var(--ink); color:var(--accent) !important; }
.tabnav.desborda .tabnav-btn:disabled{ opacity:.35; cursor:default; }
@media (max-width:560px){
  .tabnav.desborda .tabnav-btn{ width:32px !important; }
}
.perfiltab{
  display:flex; gap:16px; align-items:center; cursor:pointer; text-align:left;
  border:1px solid var(--line); background:var(--paper); padding:14px 24px;
  min-height:72px; font-family:inherit;
  /* Algo de la plantilla del sitio le pone width:100% a los <button> (con
     role="tab" quedan con la misma especificidad que un selector de clase,
     y puede ganar el empate); se fuerza a que no crezca ni intente ocupar
     el ancho del contenedor. */
  flex:0 0 auto !important; width:auto !important; max-width:none !important;
}
.perfiltab:hover{ border-color:var(--ink-3); }
.perfiltab b{ font-size:20px; font-weight:700; color:var(--ink); white-space:nowrap; display:block; }
.perfiltab small{
  font-family:"Roboto",sans-serif; font-size:16px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3);
}
.perfiltab[aria-selected="true"]{ background:var(--black); border-color:var(--black); }
.perfiltab[aria-selected="true"] b{ color:#fff; }
.perfiltab[aria-selected="true"] small{ color:rgba(255,255,255,.6); }
.tabprog{ height:2px; background:var(--grey-3); }
.tabprog b{ display:block; height:100%; width:0; background:var(--black); }
.tabpanel{ border:1px solid var(--line); border-top:0; padding:28px; display:grid; gap:26px; }
@media (max-width:760px){ .tabpanel{ padding:20px; } }

/* Todo el contenido del perfil en una sola fila: foto · narrativa · piezas.
   Ningún texto de este bloque baja de 14px (se pisa el tamaño reducido que
   traían .subt/.cm-cap/small, y se recorta el letter-spacing para que no se
   vea forzado a ese tamaño más grande). */
.perfilgrid{ display:grid; grid-template-columns:minmax(0,.65fr) minmax(0,1fr) minmax(0,1.35fr); gap:24px; align-items:stretch; }
.perfilgrid > .ph{ aspect-ratio:auto; height:100%; min-height:200px; }
@media (max-width:1000px){ .perfilgrid{ grid-template-columns:1fr; } .perfilgrid > .ph{ height:auto; aspect-ratio:3/4; min-height:0; } }
.perfilgrid > *{ min-width:0; }

.narrativa-compacta{ display:grid; gap:12px; align-content:start; }
.narrativa-compacta h4{ font-size:16px; }
.narrativa-compacta > div{ display:grid; gap:4px; }

.piezas-compacta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-content:start; }
.pieza-mini{ display:grid; gap:6px; min-width:0; }
@media (max-width:480px){ .piezas-compacta{ grid-template-columns:1fr; } }

.tabpanel .audiofila{ min-height:36px; padding:7px 10px; }

/* Perfil real de la Galería Interactiva: izquierda foto + perfil escrito,
   derecha video (audiograma) + carta del compareciente */
/* Escritorio: tres columnas compactas (foto · perfil escrito · video y carta) */
.cm-perfil{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.3fr) minmax(0,1.1fr); gap:26px; align-items:start; }
.cm-perfil > *{ min-width:0; }
.cm-perfil-fotos{ display:grid; gap:16px; align-content:start; }
/* Perfil con dos víctimas: arriba las dos fotos (pequeñas: son fotos de
   documento) junto al texto; abajo audiogramas y carta en una sola fila */
.cm-perfil.multi .cm-perfil-fotos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
/* Con dos videos o más (.fila): fotos y texto arriba; abajo una fila con los
   videos y la carta, repartida según cuántas piezas haya (--piezas). El ancho
   de la columna de fotos depende de la foto: vertical, dos fotos u horizontal. */
.cm-perfil.fila{ grid-template-columns:minmax(0,240px) minmax(0,1fr); row-gap:24px; }
.cm-perfil.fila.multi{ grid-template-columns:minmax(0,340px) minmax(0,1fr); }
.cm-perfil.fila.horiz{ grid-template-columns:minmax(0,400px) minmax(0,1fr); }
.cm-perfil.fila .cm-perfil-der{ grid-column:1 / -1; width:100%; max-width:none; grid-template-columns:repeat(var(--piezas, 3),minmax(0,1fr)); align-items:stretch; }
/* .abajo: el texto arriba a todo el ancho y abajo foto · video · video */
@media (min-width:761px){
  .cm-perfil.fila.abajo{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cm-perfil.fila.abajo .cm-perfil-txt{ grid-row:1; grid-column:1 / -1; }
  .cm-perfil.fila.abajo .cm-perfil-fotos{ grid-row:2; grid-column:1; }
  .cm-perfil.fila.abajo .cm-perfil-der{ grid-row:2; grid-column:2 / -1; align-self:start; }
}
/* Foto horizontal con un solo video: tres columnas más parejas */
.cm-perfil.horiz:not(.fila){ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr); }
/* auto 3/2: proporción real de la foto; mientras carga, reserva 3:2 */
.cm-perfil.horiz .cm-perfil-foto img{ aspect-ratio:auto 3/2; }
.cm-perfil.horiz .cm-perfil-foto.sin-foto::before{ aspect-ratio:3/2; }
/* Perfil sin texto: foto a la izquierda; al lado, el nombre arriba y la
   fila de videos y carta debajo (sin dejar el hueco del texto) */
@media (min-width:761px){
  .cm-perfil.fila.sintexto{ grid-template-columns:minmax(0,240px) minmax(0,1fr); align-content:start; }
  .cm-perfil.fila.sintexto .cm-perfil-fotos{ grid-row:1 / span 2; grid-column:1; }
  .cm-perfil.fila.sintexto .cm-perfil-txt{ grid-row:1; grid-column:2; }
  .cm-perfil.fila.sintexto .cm-perfil-der{ grid-row:2; grid-column:2; }
}
/* Perfil solo con texto (aún sin foto, videos ni carta): a todo el ancho,
   y en escritorio el texto va en dos columnas para no quedar en líneas larguísimas */
.cm-perfil.solo{ grid-template-columns:minmax(0,1fr); }
@media (min-width:861px){
  .cm-perfil.solo .cm-perfil-cuerpo{ display:block; columns:2; column-gap:32px; }
  .cm-perfil.solo .cm-perfil-cuerpo p{ margin:0 0 8px; break-inside:avoid; }
}
/* Texto del perfil: párrafos separados; si es extenso, en dos columnas */
.cm-perfil-cuerpo{ display:grid; gap:8px; }
@media (min-width:1001px){
  .cm-perfil.largo.fila .cm-perfil-cuerpo{ display:block; columns:2; column-gap:28px; }
  .cm-perfil.largo.fila .cm-perfil-cuerpo p{ margin:0 0 8px; }
}
/* Llamado a la acción de la carta (PDF): carta manuscrita de fondo, velo
   oscuro cálido y texto en blanco. Hover como las tarjetas de las placas
   (sube y gana sombra) más un zoom suave de la imagen. */
.cm-carta-cta{
  position:relative; display:flex; align-items:flex-end; width:100%; aspect-ratio:16/7;
  overflow:hidden; background:var(--dark); color:#fff !important; text-decoration:none !important;
  border:1px solid var(--line-2);
}
/* En la fila de los videos: mismo alto que ellos y alineado abajo (los
   videos llevan su título encima; la carta lo lleva adentro) */
.cm-perfil.fila .cm-carta-cta{ aspect-ratio:16/9; align-self:end; }
.cm-carta-fondo{
  position:absolute; inset:0; background:center/cover no-repeat;
  transition:transform .6s ease;
}
.cm-carta-cta::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(36,29,21,.15) 0%, rgba(36,29,21,.55) 45%, rgba(36,29,21,.92) 100%);
}
.cm-carta-txt{ position:relative; z-index:2; display:grid; gap:6px; padding:18px 20px; justify-items:start; }
.cm-carta-eyebrow{ font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:#F0B58F; }
.cm-carta-txt strong{ font-size:20px; line-height:1.2; font-weight:700; color:#fff; }
/* Botón "Abrir carta PDF →" siempre en una sola línea y del ancho de su
   contenido. Con !important porque en jep.gov.co la plantilla estira los
   <span> y la clase .pdf, y partía "Abrir carta" en dos líneas. */
.cm-carta-accion{
  display:inline-flex !important; align-items:center; gap:18px; margin-top:6px; padding:8px 14px;
  width:auto !important; max-width:100%; justify-self:start; flex-wrap:nowrap !important;
  white-space:nowrap !important; line-height:1.2 !important;
  background:var(--accent); color:#fff; font-size:15px; font-weight:600;
  transition:background-color .2s ease;
}
.cm-carta-accion > span{
  display:inline-block !important; flex:none !important; width:auto !important;
  min-width:0 !important; white-space:nowrap !important; float:none !important;
}
.cm-carta-accion .cm-carta-pdf{ font-size:13px; letter-spacing:.06em; border:1px solid currentColor; padding:0 5px !important; opacity:.9; background:none !important; }
.cm-carta-accion .flecha{ transition:transform .2s ease; }
.cm-carta-cta:hover .cm-carta-fondo, .cm-carta-cta:focus-visible .cm-carta-fondo{ transform:scale(1.05); }
.cm-carta-cta:hover .cm-carta-accion, .cm-carta-cta:focus-visible .cm-carta-accion{ background:#A84C27; }
.cm-carta-cta:hover .flecha, .cm-carta-cta:focus-visible .flecha{ transform:translateX(4px); }
.cm-perfil-foto{ margin:0; }
.cm-perfil-foto img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:var(--grey-3); }
.cm-perfil-foto.sin-foto img{ display:none; }
.cm-perfil-foto.sin-foto::before{ content:""; display:block; aspect-ratio:3/4; background:var(--grey-3); }
.cm-perfil-foto figcaption{ display:grid; gap:2px; margin-top:8px; font-size:14px; line-height:1.2; color:var(--ink-2); }
.cm-perfil-foto figcaption span:first-child{ font-weight:700; color:var(--ink); }
.cm-perfil-txt{ display:grid; gap:8px; align-content:start; }
.cm-perfil-txt h4{ font-size:22px; margin:-4px 0 4px; }
.cm-perfil-txt p{ font-size:15px; line-height:1.55; color:var(--ink-2); margin:0; }
.cm-perfil-txt .cm-perfil-voz{ font-style:italic; color:var(--ink); }
.cm-perfil-der{ display:grid; gap:16px; align-content:start; justify-items:start; }
.cm-perfil-vid{ display:grid; gap:6px; width:100%; }
.cm-perfil-video{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.cm-perfil-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.cm-perfil .cm-btn, .cm-perfil .cm-btn:visited{ color:#fff !important; text-decoration:none !important; }
/* Tableta: foto + perfil arriba, video y carta debajo */
@media (max-width:1000px){
  .cm-perfil{ grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:22px; }
  .cm-perfil-der{ grid-column:1 / -1; width:100%; max-width:640px; }
  .cm-perfil.fila, .cm-perfil.fila.multi, .cm-perfil.fila.horiz{ grid-template-columns:minmax(0,300px) minmax(0,1fr); }
  .cm-perfil.fila .cm-perfil-der{ max-width:none; }
  .cm-perfil.horiz:not(.fila){ grid-template-columns:minmax(0,300px) minmax(0,1fr); }
}
@media (max-width:760px){
  .cm-perfil.fila, .cm-perfil.fila.multi, .cm-perfil.fila.horiz{ grid-template-columns:1fr; }
  .cm-perfil.multi .cm-perfil-fotos{ grid-template-columns:repeat(2,minmax(0,170px)); }
  .cm-perfil.fila .cm-perfil-der{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cm-perfil.horiz .cm-perfil-fotos{ max-width:480px; }
}
/* Móvil: todo en una columna */
@media (max-width:560px){
  .cm-perfil{ grid-template-columns:1fr; }
  .cm-perfil-foto{ max-width:280px; }
  .cm-perfil.multi .cm-perfil-fotos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cm-perfil.fila .cm-perfil-der{ grid-template-columns:1fr; }
  .cm-perfil.horiz .cm-perfil-foto{ max-width:none; }
  .cm-perfil.horiz:not(.fila){ grid-template-columns:1fr; }
  /* En celular la proporción fija podría cortar el texto: crece con él */
  .cm-carta-cta, .cm-perfil.fila .cm-carta-cta{ aspect-ratio:auto; min-height:170px; }
}
.grid3 > *, .grid2 > *, .split > *, .track > *{ min-width:0; }
/* Los placeholders con aspect-ratio inflan la pista automática de su rejilla:
   se fija la pista para que nunca desborden la celda. */
.cm-panel div[style*="display:grid"]{ grid-template-columns:minmax(0,1fr); }
.ph{ max-width:100%; }

.perfil{ border:1px solid var(--line); display:grid; }
.perfil .cuerpo{ padding:18px; display:grid; gap:16px; }
.perfil h4{ font-size:16px; }
.narrativa{ display:grid; gap:14px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.narrativa > div{ display:grid; gap:6px; }
.pieza{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; min-width:0; }
.audios{ display:grid; gap:6px; }
.audiofila{
  display:flex; gap:10px; align-items:center; width:100%; text-align:left;
  border:1px solid var(--line); background:var(--paper); padding:9px 11px; cursor:pointer;
  font-family:"Roboto",sans-serif; font-size:16px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2); min-height:40px;
}
.audiofila:hover{ border-color:var(--ink-3); color:var(--ink); }
.audiofila span:last-child{ margin-left:auto; color:var(--ink-3); }
.podcast-ctrl{ display:flex; gap:10px; align-items:center; justify-content:center; }
.podcast-ctrl button{
  border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2);
  min-width:46px; min-height:44px; cursor:pointer; font-size:16px;
}
.podcast-ctrl button.mid{ background:var(--black); color:#fff; border-color:var(--black); min-width:58px; }
.podcast-ctrl button:hover{ border-color:var(--ink); }
.carousel{ display:grid; gap:22px; }
.track{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
@media (max-width:860px){ .track{ grid-template-columns:1fr; } }
.dots{ display:flex; gap:8px; justify-content:center; }
.dots button{ width:26px; height:26px; padding:0; border:0; background:none; cursor:pointer; position:relative; }
.dots button::after{ content:""; position:absolute; inset:9px; border-radius:50%; background:var(--grey-3); }
.dots button[aria-current="true"]::after{ background:var(--black); }

/* ---------- Galería de reconocimiento ---------- */
/* Grilla de retratos a la izquierda y semblanza a la derecha. El panel
   derecho se estira al alto de la grilla y hace scroll por dentro, así la
   semblanza larga no alarga la sección. En celular va debajo, completo. */
.cm-galeria-split{ align-items:stretch; }
.cm-galeria-der{ position:relative; min-height:420px; }
/* Con una sola fila de tarjetas, el panel sería tan bajo como ellas y los
   textos largos quedarían en una caja diminuta con scroll: se le da más alto. */
.cm-galeria-split.pocos .cm-galeria-der{ min-height:min(680px, 80vh); }
.cm-galeria-detalle{ position:absolute; inset:0; overflow-y:auto; align-content:start; }
@media (max-width:860px){
  .cm-galeria-der, .cm-galeria-split.pocos .cm-galeria-der{ min-height:0; }
  .cm-galeria-der:empty{ display:none; }
  .cm-galeria-detalle{ position:static; overflow:visible; }
  /* en celular el panel va dentro de la grilla, debajo de la tarjeta tocada */
  .grid3 > .cm-galeria-detalle{ grid-column:1 / -1; }
  .cm-galeria-split .cm-card{ scroll-margin-top:80px; }  /* que la barra de zonas no tape la tarjeta */
}
/* En el panel lateral el retrato va más chico al lado de los datos */
.cm-galeria-detalle .cm-victima-top{ grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:20px; }
.cm-galeria-detalle .cm-victima-txt{ max-width:none; }
@media (max-width:480px){ .cm-galeria-detalle .cm-victima-top{ grid-template-columns:minmax(0,1fr); } }
/* Popup de la semblanza: retrato + datos arriba, textos debajo */
.cm-victima-top{ display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:28px; align-items:start; }
@media (max-width:640px){ .cm-victima-top{ grid-template-columns:1fr; } .cm-victima-foto{ max-width:260px; } }
.cm-victima-foto{ display:block; width:100%; height:auto; }
/* Avatares ilustrados (sin foto real): se ven completos, sin recorte, y el
   fondo blanco de la imagen se funde con el crema del sitio (multiply). */
.cm-foto.hover.avatar{ background:var(--paper); }
.cm-foto.hover.avatar img{ object-fit:contain; padding:14px; mix-blend-mode:multiply; }
.cm-victima-foto.avatar{ mix-blend-mode:multiply; }
.cm-victima-txt{ display:grid; gap:12px; max-width:78ch; }
.cm-victima-txt + .cm-victima-txt{ border-top:1px solid var(--line); padding-top:20px; margin-top:4px; }
.cm-victima-txt p{ line-height:1.6; color:var(--ink-2); }
.cm-victima .cm-victima-comp{ font-weight:700; color:var(--ink); }
/* Nombres de los comparecientes al cierre de su texto (en lugar de la firma) */
.cm-victima-firmas{
  display:grid; gap:2px; margin-top:6px; padding-top:10px; width:max-content; max-width:100%;
  border-top:1px solid var(--line-2); font-weight:500; color:var(--ink);
}


/* ---------- Playlist del final (reproductor + lista de videos) ---------- */
.cm-pl-head{ display:grid; gap:10px; margin-bottom:28px; }
.cm-pl-head h2{ font-size:29px; }
.cm-playlist{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:24px; align-items:stretch; }
@media (max-width:860px){ .cm-playlist{ grid-template-columns:1fr; } }
.cm-pl-player{ display:grid; gap:10px; }
.cm-pl-ratio{ position:relative; aspect-ratio:16/9; background:#000; }
.cm-pl-ratio iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.cm-pl-nota{ font-size:14px; color:var(--ink-3); }
.cm-pl-lista{ border:1px solid var(--line); background:var(--paper); display:flex; flex-direction:column; min-height:0; }
.cm-pl-lista-head{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:14px 16px; border-bottom:1px solid var(--line); font-weight:700; color:var(--ink);
}
.cm-pl-lista-head .count{ font-weight:400; font-size:14px; color:var(--ink-3); }
/* En escritorio la lista toma el alto del reproductor (height:0 + flex:1:
   no empuja la fila) y hace scroll; en celular se muestra completa. */
.cm-pl-items{ flex:1 1 auto; height:0; overflow-y:auto; }
@media (max-width:860px){ .cm-pl-items{ height:auto; } }
.cm-pl-item{
  display:grid !important; grid-template-columns:128px minmax(0,1fr); gap:14px; align-items:start;
  width:100% !important; max-width:none !important; margin:0; padding:12px 16px;
  background:transparent !important; color:var(--ink-2) !important;
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  text-align:left; cursor:pointer; font-family:inherit; font-size:16px; line-height:1.35;
  transition:background-color .15s ease;
}
.cm-pl-item:last-child{ border-bottom:0; }
.cm-pl-item:hover, .cm-pl-item:focus-visible{ background:var(--grey-1) !important; color:var(--ink) !important; }
.cm-pl-item[aria-current="true"]{
  background:var(--grey-1) !important; color:var(--ink) !important; font-weight:500;
  box-shadow:inset 3px 0 0 var(--accent);
}
.cm-pl-item .thumb{ position:relative; display:block; aspect-ratio:16/9; background:#000; overflow:hidden; }
.cm-pl-item .thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.cm-pl-item .num{
  position:absolute; left:6px; bottom:6px; min-width:22px; padding:1px 6px;
  background:rgba(36,29,21,.85); color:#fff; font-size:14px; text-align:center;
}
.cm-pl-item[aria-current="true"] .num{ background:var(--accent); }
@media (max-width:480px){ .cm-pl-item{ grid-template-columns:104px minmax(0,1fr); gap:12px; } }

/* ---------- Full-bleed: usa el ancho real de la plantilla SharePoint ----------
   La página de la JEP mete el artículo dentro de .article-content, una caja
   de la plantilla con un max-width propio que angosta todo lo que va adentro
   (con eso alcanza para que el bloque no llegue al 100%; no hace falta pelear
   con vw/márgenes negativos). En caminodelamemoria.aspx esa misma caja se
   libera así, y con eso el resto del contenido con width:100% ya llena la
   pantalla sin trucos adicionales. */
.article-content{
  width:100% !important; max-width:100% !important;
  margin:-108px auto -40px !important; padding:0 !important;
}
.cm-camino-memoria{ width:100%; }

/* ---------- Elementos de la plantilla SharePoint que no se usan en esta página ----------
   No están en nuestro fragmento: son parte del layout de la página en jep.gov.co,
   así que se ocultan desde aquí en vez de editarse en el propio SharePoint. */
.wrap-highlightedNews{ display:none !important; }
.ms-rtestate-read.ms-rte-wpbox + p{ display:none !important; }

/* ==========================================================================
   Hover unificado: el mismo de las tarjetas de las placas (sombra cálida,
   leve elevación y acento terracota) para pestañas, botones, flechas, la
   carta del perfil y la playlist. Los colores van con !important porque la
   plantilla de SharePoint aplica su propio hover a los <button> y <a>.
   ========================================================================== */
.cm-camino-memoria .cm-tab,
.cm-camino-memoria .perfiltab,
.cm-camino-memoria .cm-btn,
.cm-camino-memoria .cm-arrow,
.cm-camino-memoria .cm-carta-cta{
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease, color .2s ease;
}
/* Elementos claros (pestañas sin seleccionar, flechas, botones ghost):
   borde un tono más oscuro, sombra, elevación y texto en terracota */
.cm-camino-memoria .cm-tab:not([aria-selected="true"]):hover,
.cm-camino-memoria .perfiltab:not([aria-selected="true"]):hover,
.cm-camino-memoria .cm-arrow:hover,
.cm-camino-memoria .cm-btn.ghost:hover{
  background:var(--paper) !important; border-color:var(--line-2) !important;
  box-shadow:0 12px 28px rgba(36,29,21,.14); transform:translateY(-3px);
  color:var(--accent) !important;
}
.cm-camino-memoria .perfiltab:not([aria-selected="true"]):hover b,
.cm-camino-memoria .perfiltab:not([aria-selected="true"]):hover small{ color:var(--accent) !important; }
/* Elementos oscuros (botones y la carta): mantienen su color y ganan la
   misma sombra y elevación */
.cm-camino-memoria .cm-btn:not(.ghost):hover,
.cm-camino-memoria .cm-carta-cta:hover{
  box-shadow:0 12px 28px rgba(36,29,21,.22); transform:translateY(-3px);
}
.cm-camino-memoria .cm-hero .cm-btn:hover{ box-shadow:0 12px 28px rgba(0,0,0,.35); }
.cm-camino-memoria .cm-hero .cm-btn.ghost:hover{ background:transparent !important; color:#fff !important; border-color:#fff !important; }
/* Pestaña seleccionada: no se mueve */
.cm-camino-memoria .cm-tab[aria-selected="true"]:hover,
.cm-camino-memoria .perfiltab[aria-selected="true"]:hover{ transform:none; box-shadow:none; }
/* Playlist: va dentro de una lista con scroll, así que en vez de elevarse
   hace el zoom suave de la miniatura y el título en terracota, como la foto
   y el "Ver ficha" de las tarjetas. */
.cm-pl-item .thumb img{ transition:transform .5s ease; }
.cm-pl-item:hover .thumb img, .cm-pl-item:focus-visible .thumb img{ transform:scale(1.04); }
.cm-pl-item:hover .tit, .cm-pl-item:focus-visible .tit{ color:var(--accent); }
.cm-pl-item:hover, .cm-pl-item:focus-visible{ background:var(--paper) !important; }
@media (prefers-reduced-motion: reduce){
  .cm-camino-memoria .cm-tab:hover, .cm-camino-memoria .perfiltab:hover,
  .cm-camino-memoria .cm-btn:hover, .cm-camino-memoria .cm-arrow:hover,
  .cm-camino-memoria .cm-carta-cta:hover{ transform:none !important; }
  .cm-carta-cta:hover .cm-carta-fondo{ transform:none; }
  .cm-pl-item:hover .thumb img{ transform:none; }
}

/* ---------- Hero compacto en pantallas tipo portátil (≈1440 px de ancho) ----------
   Ahí el alto visible es poco (barras de SharePoint + menú del sitio) y el hero
   completo no cabía: para mostrar los logos se desplazaba hacia arriba y su parte
   superior quedaba oculta detrás del menú. Se compactan los espacios para que
   quepa entero. Solo aplica en ese rango de ancho y en pantallas no muy altas;
   los demás tamaños no cambian. */
@media (min-width:1367px) and (max-width:1600px) and (max-height:1000px){
  .cm-herowrap{ padding-top:18px; padding-bottom:32px; }
  .cm-herotxt{ gap:12px; }
  .cm-hero h1{ font-size:52px; }
  .cm-hero-texto{ gap:8px; }
  .cm-hero-texto p{ line-height:1.3; }
  .cm-cue{ margin-top:0; }
  .cm-cue i{ height:22px; }
  .cm-herofoot{ padding-top:12px; padding-bottom:14px; }
  .cm-herologos img{ height:40px; }
}

/* ---------- Sección de la playlist en verde oliva ----------
   Fondo var(--black) (la textura de tierra queda encima, más sutil) y textos
   claros para que contrasten. La lista de videos conserva su recuadro crema. */
.cm-camino-memoria .cm-sec.cm-sec-playlist,
.cm-camino-memoria .cm-sec.cm-sec-playlist.cm-tierra,
.cm-camino-memoria section.cm-sec:has(#playlist){ background-color:var(--black) !important; border-bottom-color:transparent; }
.cm-sec-playlist .cm-eyebrow{ color:#E3C49F; }
.cm-sec-playlist .cm-pl-head h2{ color:#FFFFFF; }
.cm-sec-playlist .cm-pl-nota{ color:rgba(255,255,255,.78); }
.cm-sec-playlist .cm-pl-lista{ border-color:transparent; }

/* ---------- Hero con el logo de "El Camino de la Memoria" ----------
   Izquierda: logo (incluye "Un camino que deja huella") y el texto.
   Derecha: video y, debajo, el botón "Punto de partida" alineado a la derecha.
   Botón en Salvia #8A8F6E (verde claro de la paleta) con texto Tierra noche
   #1E1A14 para que contraste; al pasar el cursor, Oliva llanero #3F4532 con
   texto blanco. */
/* Escritorio: dos columnas del mismo alto. Arriba se alinean el logo y el
   video; abajo, el final del texto y el botón "Punto de partida". */
@media (min-width:861px){
  .cm-herowrap{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:stretch; }
  .cm-hero .cm-herotxt{ align-content:space-between; }
  .cm-hero .cm-hero-media{ align-content:space-between; }
}
.cm-hero h1.cm-hero-logo{ margin:0; max-width:none; line-height:0; font-size:0; }
.cm-hero-logo img{ display:block; width:min(580px, 100%); height:auto; margin-left:-6px; }
.cm-herotxt{ gap:28px; }
.cm-hero .cm-hero-texto{ gap:18px; }
.cm-hero .cm-hero-texto p{ color:rgba(255,255,255,.92); font-weight:400; line-height:1.3; }
.cm-hero .cm-hero-texto .cierre{ font-weight:700; }
.cm-hero-media{ display:grid; gap:40px; justify-items:end; align-content:start; min-width:0; }
.cm-hero-media > *{ width:100%; }
.cm-hero-media > .cm-hero-cta{ width:auto; }
.cm-hero .cm-hero-cta .cm-btn{
  background:#8A8F6E !important; border-color:#8A8F6E !important; color:#1E1A14 !important;
}
.cm-hero .cm-hero-cta .cm-btn:hover, .cm-hero .cm-hero-cta .cm-btn:focus-visible{
  background:#3F4532 !important; border-color:#3F4532 !important; color:#fff !important;
}
/* El botón quedó a la derecha: el tooltip se ancla a su borde derecho */
.cm-hero-cta .cm-tooltip{ left:auto; right:0; }
.cm-hero-cta .cm-tooltip::after{ left:auto; right:24px; }
@media (max-width:860px){
  .cm-hero-logo img{ width:min(420px, 100%); }
  .cm-hero-media{ justify-items:start; gap:24px; }
  .cm-hero-cta .cm-tooltip{ left:0; right:auto; }
  .cm-hero-cta .cm-tooltip::after{ left:24px; right:auto; }
}
@media (min-width:1367px) and (max-width:1600px) and (max-height:1000px){
  .cm-hero{ padding-bottom:56px; }
  .cm-hero-logo img{ width:460px; }
  .cm-herotxt{ gap:18px; }
  .cm-hero .cm-hero-texto{ gap:10px; }
  .cm-hero-media{ gap:24px; }
}

/* ---------- Decoración del recorrido ----------
   Dibujos de línea (rastro punteado, flores, ramitas, arbustos) detrás del
   contenido (z-index:-1 dentro de cada sección, que aísla su apilamiento):
   el contenido pasa por encima. Cada dibujo trae sus variables desde el JS:
   --deco-w (ancho), --rot (giro), --flip (espejo), --top (altura), --sep
   (distancia al contenido; negativa = se mete por debajo). Aparecen al entrar
   en pantalla: el rastro se "dibuja" y las flores y ramitas brotan. */
#zonas, .cm-panel, .cm-sec-playlist, .cm-block{ position:relative; isolation:isolate; }
#zonas, .cm-panel, .cm-sec-playlist{ overflow-x:clip; }
.cm-deco{
  position:absolute; z-index:-1; pointer-events:none; display:block; overflow:visible;
  color:var(--ink-2); --deco-relleno:var(--paper);
  width:var(--deco-w, 240px); height:auto; opacity:0;
  transform:rotate(var(--rot, 0deg)) scaleX(var(--flip, 1));
}
#zonas .cm-deco{ --deco-relleno:var(--fondo-sec); }
.cm-deco-rastro{ aspect-ratio:301/320; }
.cm-deco-flor, .cm-deco-ramita{ aspect-ratio:1/1; }
.cm-deco-arbusto-izq, .cm-deco-arbusto-der{ aspect-ratio:1/1; }

/* En los márgenes de cada bloque */
.cm-deco.lado-izq{ right:calc(100% + var(--sep, 32px)); top:var(--top, 0); }
.cm-deco.lado-der{ left:calc(100% + var(--sep, 32px)); top:var(--top, 0); }

/* Intro de zonas: alrededor del bloque de texto centrado */
#zonas .cm-deco.intro.lado-izq{ top:24px; right:auto; left:max(16px, calc(50% - var(--ancho) / 2 - 320px)); }
/* La flor de la intro va anclada arriba (junto al título), siempre dentro de
   la sección: así nunca asoma sobre el hero ni tapa los logos. */
#zonas .cm-deco.intro.lado-der{ top:28px; bottom:auto; left:auto; right:max(12px, calc(50% - var(--ancho) / 2 - 230px)); }

/* Arbustos al pie de cada zona, en las esquinas inferiores */
.cm-panel{ padding-bottom:calc(76px + 90px); }
.cm-deco.suelo{ bottom:0; --deco-w:clamp(160px, 17vw, 300px); color:var(--line-2); }
.cm-deco.suelo-izq{ left:0; }
.cm-deco.suelo-der{ right:0; }

/* Playlist (fondo verde): trazo claro */
.cm-sec-playlist .cm-deco.claro{ color:rgba(255,255,255,.38); --deco-relleno:var(--black); }
.cm-sec-playlist .cm-deco.lado-der{ left:auto; right:max(8px, calc(50% - var(--ancho) / 2 - 330px)); top:40px; }
.cm-sec-playlist .cm-deco.lado-izq{ right:auto; left:max(24px, calc(50% - var(--ancho) / 2 - 120px)); top:auto; bottom:70px; }

/* Aparición ligada al scroll: --p (0 a 1) lo actualiza el JS en cada cuadro.
   Una transición corta suaviza los saltos entre cuadros. */
.cm-deco{
  opacity:calc(min(1, var(--p, 0) * 2.5) * .75);
  transition:opacity .15s linear, clip-path .15s linear, transform .15s linear;
}
.cm-deco.suelo{ opacity:min(1, var(--p, 0) * 2); transform:translateY(calc((1 - var(--p, 0)) * 50px)); }
.cm-deco-rastro{ clip-path:inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }
.cm-deco-flor, .cm-deco-ramita{
  transform:rotate(calc(var(--rot, 0deg) - (1 - var(--p, 0)) * 45deg)) scale(calc(.4 + var(--p, 0) * .6)) scaleX(var(--flip, 1));
}

/* Pantallas medianas: solo los rastros grandes (que se meten bajo el
   contenido) y los arbustos; las piezas pequeñas necesitan margen libre. */
@media (max-width:1399px){
  .cm-deco.lado-izq:not(.cm-deco-rastro), .cm-deco.lado-der:not(.cm-deco-rastro){ display:none; }
}
@media (max-width:1199px){ .cm-deco.lado-izq, .cm-deco.lado-der{ display:none; } }
@media (max-width:860px){ .cm-deco.suelo{ display:none; } .cm-panel{ padding-bottom:46px; } }
@media (prefers-reduced-motion: reduce){
  .cm-deco, .cm-deco-rastro, .cm-deco.suelo, .cm-deco-flor, .cm-deco-ramita{ transition:none; }
}