/* ==================== CERTIFICADO GUIADO de /estudio-de-titulos/ (28-sep-2026) ====================
   Código corto [ej_certificado_guiado] (inc/certificado-guiado.php). Prototipo:
   diseno/prototipos/estudio-de-titulos/certificado-guiado.src.html.
   Héctor: «un mapa que señale diferentes puntos del certificado… herramienta didáctica»; «envejecido o con
   detalles realistas del papel y la tinta»; «líneas alrededor del certificado… desplegable en cada punto…
   flotantes… efecto 3d contemporáneo».
   Todo va bajo .guia: dentro de .articulo, las reglas de p, ol li y a pisarían el formato del certificado
   (17,5 px en cada línea, contadores «01», subrayados). */

.guia{--hoja:#F4EEDD;margin-top:26px}
.guia .instruccion{margin:0 0 26px;font-family:'Public Sans',sans-serif;font-size:14.5px;line-height:1.5;color:var(--gris);text-align:left}
.guia .solo-mapa{display:none}
.guia.mapa-activo .solo-mapa{display:inline}
.guia.mapa-activo .solo-lista{display:none}

/* ---------- el documento envejecido ---------- */
.guia .escena{position:relative;margin:0 0 8px}
.guia .plano{position:relative}
.guia .hoja{position:relative;background:var(--hoja);padding:26px 26px 30px 46px;transform:rotate(.6deg);
  box-shadow:0 1px 0 rgba(20,28,44,.08),0 20px 40px -14px rgba(20,28,44,.22),0 46px 70px -32px rgba(20,28,44,.22);
  border:1px solid rgba(20,28,44,.14);isolation:isolate}
/* grano de papel y manchas de humedad: generados, sin imágenes */
.guia .hoja::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.68;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.guia .hoja::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(150px 110px at 94% 6%,rgba(138,106,52,.16),transparent 68%),
    radial-gradient(190px 140px at 4% 98%,rgba(138,106,52,.15),transparent 70%),
    radial-gradient(100px 80px at 80% 90%,rgba(110,68,21,.10),transparent 68%),
    radial-gradient(60px 50px at 18% 14%,rgba(138,106,52,.09),transparent 72%),
    linear-gradient(105deg,rgba(20,28,44,.07),transparent 24%),
    linear-gradient(to bottom,rgba(20,28,44,0) 0%,rgba(20,28,44,.05) 100%),
    linear-gradient(to right,rgba(20,28,44,.05),transparent 3%,transparent 97%,rgba(20,28,44,.05))}
/* la esquina doblada, como si alguien la hubiera cargado leyéndola */
.guia .pico{position:absolute;right:0;bottom:0;width:34px;height:34px;z-index:2;pointer-events:none;
  background:linear-gradient(135deg,transparent 50%,#E4D9BC 50.5%,#D8C9A4 100%);
  box-shadow:-3px -3px 6px -3px rgba(20,28,44,.35) inset}
/* el doblez: el JS lo pone en el hueco entre el encabezado y la primera anotación, para que no cruce ningún dato */
.guia .pliegue{position:absolute;left:0;right:0;top:112px;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(20,28,44,.20) 14%,rgba(20,28,44,.28) 50%,rgba(20,28,44,.20) 86%,transparent);
  box-shadow:0 1.5px 0 rgba(255,255,255,.4)}
/* la marca de agua, en su propia capa recortada: girada, no desborda en el celular */
.guia .agua{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.guia .agua span{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%) rotate(-18deg);
  font:700 100px/1 Helvetica,Arial,sans-serif;letter-spacing:.08em;color:rgba(20,28,44,.05);white-space:nowrap}
.guia .ejemplo-tag{position:absolute;right:14px;top:-11px;z-index:2;background:var(--papel);padding:2px 8px;
  font-family:'Public Sans',sans-serif;font-size:10.5px;color:var(--p-tenue);letter-spacing:.05em}

/* el certificado imita el FORMATO real (Helvetica, mayúsculas, separadores) con datos ficticios; no se justifica */
.guia .cert{position:relative;z-index:1;font-family:Helvetica,Arial,sans-serif;font-size:11px;line-height:1.5;
  color:#26241c;filter:contrast(.94) brightness(.98);border:0}
/* style.css trae .cert::before, la marca de agua de 110 px del certificado de la portada: aquí sobra (la marca
   vive en .agua, recortada) y, girada, desbordaba 16 px en el celular. */
.guia .cert::before{content:none}
.guia .cert p{position:relative;margin:0;font-size:inherit;line-height:inherit;text-align:left;hyphens:manual}
.guia .cert .cert-cab{text-align:center;font-weight:700;font-size:13.5px;line-height:1.45}
.guia .cert .cert-meta{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:11px}
.guia .cert .cert-meta b{font-size:12px}
.guia .cert .cert-leyenda{margin-top:10px;text-align:center;font-weight:700;font-size:11px;line-height:1.45}
.guia .cert .cert-regla{margin-top:8px;white-space:nowrap;overflow:hidden;color:#5c5848;letter-spacing:.02em;font-size:10.5px}
.guia .cert .anot{position:relative;padding:10px 0 12px;border-bottom:1px dotted #9a9584}
.guia .cert .anot p + p{margin-top:3px}
.guia .cert .doble{display:flex;justify-content:space-between;gap:16px}
.guia .cert .doble > :last-child{flex:none}
.guia .cert .anot.alerta{margin-inline:-12px;padding-inline:12px;background:rgba(180,120,64,.12);
  box-shadow:inset 0 0 0 1.5px var(--cobre);border-bottom-color:transparent}
.guia .cert .anot.alerta .espec{font-weight:700;color:#6E4415}
/* la zona señalada se ilumina en el propio documento */
.guia .cert [data-zona]{transition:background-color .2s ease,box-shadow .2s ease}
.guia .cert [data-zona].resalta{background-color:rgba(180,120,64,.17);box-shadow:0 0 0 4px rgba(180,120,64,.17)}
.guia .cert .anot.alerta.resalta{background-color:rgba(180,120,64,.22);
  box-shadow:inset 0 0 0 2px var(--cobre),0 12px 26px -12px rgba(110,68,21,.5)}

/* ---------- celular y tableta: números sobre el documento y lista ---------- */
/* sin JavaScript no hay quien los ubique: se ven solo con .con-js, y sin él queda la lista */
.guia .pin{display:none}
.guia.con-js .pin{position:absolute;left:8px;top:0;width:22px;height:22px;border-radius:50%;z-index:3;
  background:var(--marino);color:var(--marfil);font-family:'Public Sans',sans-serif;font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;padding:0;
  box-shadow:0 4px 10px -3px rgba(20,28,44,.5);transition:transform .16s var(--ease-out),background-color .2s ease}
.guia .pin:active{transform:scale(.94)}
.guia .pin.activo{background:var(--cobre)}
.guia .pin:focus-visible{outline:2px solid var(--cobre);outline-offset:2px}

.guia .leyenda{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--p-filete)}
.guia .leyenda li{display:flex;gap:14px;margin:0;padding:16px 0;border-bottom:1px solid var(--p-filete);cursor:pointer;
  counter-increment:none;font-size:inherit;transition:background-color .2s ease}
.guia .leyenda li::before{content:none}
.guia .leyenda li.activo{background:rgba(180,120,64,.08)}
.guia .leyenda .num{flex:none;width:24px;height:24px;border-radius:50%;background:var(--marino);color:var(--marfil);
  font-family:'Public Sans',sans-serif;font-size:11.5px;font-weight:600;display:flex;align-items:center;
  justify-content:center;transition:background-color .2s ease}
.guia .leyenda li.activo .num{background:var(--cobre)}
.guia .leyenda .txt{flex:1;min-width:0}
.guia .leyenda .txt b{display:block;font-family:'Public Sans',sans-serif;font-size:14.5px;font-weight:600;
  color:var(--p-tinta);margin-bottom:3px}
.guia .leyenda .txt p{margin:0;font-size:15.5px;line-height:1.55;color:var(--gris)}

.guia .leyenda .mas{display:inline-block;margin-top:6px;font:600 13px/1.4 'Public Sans',sans-serif;color:var(--cobre-osc)}
.guia .leyenda .mas::after{content:" ↓" / ""}

/* «Las partes del certificado»: cada subtítulo lleva el mismo número que su punto en el mapa */
.articulo :is(#matricula,#radicacion,#documento,#especificacion,#titular,#alerta){display:flex;gap:12px;align-items:baseline}
.articulo :is(#matricula,#radicacion,#documento,#especificacion,#titular,#alerta)::before{flex:none;align-self:flex-start;margin-top:1px;
  width:26px;height:26px;border-radius:50%;background:var(--marino);color:var(--marfil);
  font:600 12px/26px 'Public Sans',sans-serif;text-align:center}
.articulo #matricula::before{content:"1"}
.articulo #radicacion::before{content:"2"}
.articulo #documento::before{content:"3"}
.articulo #especificacion::before{content:"4"}
.articulo #titular::before{content:"5"}
.articulo #alerta::before{content:"6";background:var(--cobre)}
/* 29-sep-2026: las explicaciones van plegadas (<details>); el número sale del flujo y se sienta junto a la pregunta */
.articulo details:is(#matricula,#radicacion,#documento,#especificacion,#titular,#alerta){display:block;position:relative;scroll-margin-top:96px}
.articulo details:is(#matricula,#radicacion,#documento,#especificacion,#titular,#alerta)::before{position:absolute;left:0;top:19px;margin:0}
.articulo details:is(#matricula,#radicacion,#documento,#especificacion,#titular,#alerta) > summary{padding-left:38px}
.articulo details:is(#matricula,#radicacion,#documento,#especificacion,#titular,#alerta):focus{outline:none}

/* al llegar desde un número, el subtítulo de su explicación se ilumina un momento */
@keyframes ej-llegada{0%,35%{background-color:rgba(180,120,64,.18)}100%{background-color:transparent}}
.articulo h3.llegada{animation:ej-llegada 1.8s ease-out;border-radius:2px}

/* ---------- computador: el mapa alrededor del documento ---------- */
.guia .lineas,.guia .marca{display:none}
.guia.mapa-activo .escena{--w:min(1120px,calc(100vw - 80px));width:var(--w);left:50%;margin-left:calc(var(--w) / -2);
  perspective:1700px;perspective-origin:50% 35%;margin-top:6px;margin-bottom:34px}
/* El plano se inclina en 3D entero; sus hijos quedan planos y se ordenan con z-index. La tarjeta activa sube con
   .guia.mapa-activo .marca.activa: con solo .marca.activa perdía por especificidad y el vecino se pintaba encima. */
.guia.mapa-activo .plano{display:grid;grid-template-columns:200px minmax(0,1fr) 200px;column-gap:36px;
  transform:rotateX(3deg);will-change:transform}
.guia.mapa-activo .doc-envoltura{grid-column:2;position:relative;z-index:0}
.guia.mapa-activo .hoja{padding-left:30px}
.guia.mapa-activo .pin,.guia.con-js.mapa-activo .pin,.guia.mapa-activo .leyenda{display:none}
.guia.mapa-activo .cert [data-zona]{cursor:help}
.guia .plano.midiendo{transform:none!important;transition:none!important}

.guia.mapa-activo .lineas{display:block;position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:1}
.guia .lineas .base{fill:none;stroke:var(--p-tinta);stroke-opacity:.34;stroke-width:1}
.guia .lineas .viva{fill:none;stroke:var(--cobre);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset .16s ease-out}
.guia .lineas .viva.activa{stroke-dashoffset:0;transition:stroke-dashoffset .34s var(--ease-out)}
.guia .lineas .ancla{fill:var(--marino);stroke:var(--hoja);stroke-width:1.5;transform-box:fill-box;transform-origin:center;
  transition:transform .2s var(--ease-out),fill .2s ease}
.guia .lineas .ancla.activa{fill:var(--cobre);transform:scale(1.55)}

.guia.mapa-activo .marca{display:flex;position:absolute;top:0;width:200px;align-items:center;gap:10px;z-index:2;
  background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.guia.mapa-activo .marca.activa{z-index:10}
.guia .marca[data-lado="izq"]{left:0;flex-direction:row-reverse;text-align:right}
.guia .marca[data-lado="der"]{right:0}
.guia .marca .num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--marino);color:var(--marfil);
  font:600 12px/1 'Public Sans',sans-serif;display:grid;place-items:center;
  box-shadow:0 0 0 3px var(--papel),0 6px 14px -4px rgba(20,28,44,.45);
  transition:background-color .2s ease,transform .2s var(--ease-out)}
.guia .marca .etq{font:600 10.5px/1.35 'Public Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);transition:color .2s ease}
.guia .marca.activa .num{background:var(--cobre);transform:scale(1.1)}
.guia .marca:active .num{transform:scale(.95)}
.guia .marca.activa .etq{color:var(--p-tinta)}
.guia .marca:focus{outline:none}
.guia .marca:focus-visible .num{box-shadow:0 0 0 3px var(--papel),0 0 0 5px var(--cobre)}

/* La tarjeta se abre HACIA AFUERA, al lado de su número, con la bisagra junto a él (Héctor, 28-sep: «ampliar
   mejor hacia los lados y no sobre los demás puntos»). Tapa solo el rótulo de su propio número, que ella repite.
   El JS le da el ancho que cabe hasta el borde de la pantalla y la altura entre los números vecinos. */
.guia .pop{position:absolute;top:0;width:260px;padding:16px 18px 16px;background:#FBF8F1;
  border:1px solid rgba(20,28,44,.12);text-align:left;display:block;
  opacity:0;pointer-events:none;
  transition:opacity .12s ease-out,transform .14s ease-out;
  box-shadow:0 1px 0 rgba(20,28,44,.05),0 22px 40px -16px rgba(20,28,44,.38),0 54px 80px -40px rgba(20,28,44,.4)}
.guia .pop::before{content:"";position:absolute;top:18px;width:2px;height:28px;background:var(--cobre)}
.guia .marca[data-lado="izq"] .pop{right:36px;transform-origin:100% 50%;transform:perspective(800px) rotateY(-20deg) scale(.96)}
.guia .marca[data-lado="izq"] .pop::before{right:-1px}
.guia .marca[data-lado="der"] .pop{left:36px;transform-origin:0 50%;transform:perspective(800px) rotateY(20deg) scale(.96)}
.guia .marca[data-lado="der"] .pop::before{left:-1px}
.guia .marca.activa .pop{opacity:1;pointer-events:auto;transform:perspective(800px) rotateY(0) scale(1);
  transition:opacity .18s ease-out,transform .26s var(--ease-out)}
.guia .pop .ir{display:block;margin-top:10px;font:600 11px/1.3 'Public Sans',sans-serif;letter-spacing:.06em;color:var(--cobre-osc)}
.guia .pop .de{display:block;font:600 10px/1 'Public Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--p-tenue);margin-bottom:9px}
.guia .pop .t{display:block;font:600 14.5px/1.3 'Public Sans',sans-serif;color:var(--p-tinta);margin-bottom:6px}
.guia .pop .x{display:block;font-family:'Aleo',Georgia,serif;font-size:14px;line-height:1.5;color:var(--gris);
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:7 3 3}

/* primera vez que se ve: las líneas se trazan y los números llegan, escalonados */
@keyframes ej-traza{from{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}to{stroke-dasharray:var(--len);stroke-dashoffset:0}}
@keyframes ej-llega{from{opacity:0;translate:0 6px}}
.guia .plano.entra .lineas .base{animation:ej-traza .7s var(--ease-out) both;animation-delay:calc(260ms + var(--i) * 60ms)}
.guia .plano.entra .lineas .ancla{animation:ej-llega .3s var(--ease-out) both;animation-delay:calc(200ms + var(--i) * 60ms)}
.guia .plano.entra .marca{animation:ej-llega .4s var(--ease-out) both;animation-delay:calc(560ms + var(--i) * 60ms)}

@media (max-width:520px){
  .guia .hoja{padding:22px 16px 26px 40px}
  .guia .cert{font-size:10.2px}
  .guia .agua span{font-size:70px;top:52%}
  .guia.con-js .pin{left:5px;width:19px;height:19px;font-size:10px}
}

@media (prefers-reduced-motion:reduce){
  .guia.mapa-activo .plano{transform:none}
  .guia .marca .num,.guia .marca.activa .num{transform:none}
  .guia .marca[data-lado] .pop,.guia .marca.activa .pop{transform:none;transition:opacity .2s ease}
  .articulo h3.llegada{animation:none}
  .guia .lineas .viva,.guia .lineas .viva.activa{transition:none}
  .guia .plano.entra .lineas .base,.guia .plano.entra .lineas .ancla,.guia .plano.entra .marca{animation:none}
  .guia .pin,.guia .leyenda li,.guia .leyenda .num{transition:none}
}