/* ==========================================================================
   Guía «¿Cómo importar productos a Colombia?» (/como-importar-productos-colombia/)
   Solo complementa sitio.css: no reduce tamaños de letra.
   ========================================================================== */

/* Encabezado: el título de la guía es largo, le damos un poco más de ancho */
.pagina-guia .page-hero h1{max-width:28ch}
.pagina-guia .meta-art span + span::before{content:"·";margin-right:18px;opacity:.6}
.pagina-guia .meta-art{gap:6px 18px}

/* Cuerpo: índice primero en el código (se lee antes en lectores de pantalla y en móvil);
   en escritorio pasa a la columna derecha y queda fijo al desplazarse */
.guia-cuerpo{padding-top:72px}
@media (min-width:981px){
  .guia-layout > .prose{grid-column:1;grid-row:1}
  .guia-layout > .toc{grid-column:2;grid-row:1;max-height:calc(100vh - 124px);overflow-y:auto;overscroll-behavior:contain}
}
@media (max-width:980px){
  .guia-layout{gap:40px}
}

/* Índice */
.guia-layout .toc ul{list-style:none;margin:0;padding:0;display:grid;font-size:.9rem}
.guia-layout .toc li a{display:flex;align-items:baseline;gap:10px;padding:9px 0;min-height:44px;line-height:1.35;box-sizing:border-box}
.guia-layout .toc li a:hover{color:var(--red-700);text-decoration:underline;text-underline-offset:3px}
.guia-layout .toc .toc-n{flex:none;display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--red-soft);color:var(--red-700);font-weight:800;line-height:1}
.guia-layout .toc .toc-sep{height:1px;background:var(--line);margin:6px 0}
.toc-cta{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.toc-cta p{margin:0 0 12px;color:var(--slate);font-size:.9rem;line-height:1.45}
.toc-cta .btn{width:100%}
@media (max-width:980px){
  /* En móvil y tableta el índice va en dos columnas cuando cabe */
  .guia-layout .toc ul{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));column-gap:24px}
  .guia-layout .toc .toc-sep{grid-column:1/-1}
  .toc-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
  .toc-cta p{margin:0;flex:1 1 260px}
  .toc-cta .btn{width:auto;flex:0 1 auto}
}
@media (max-width:480px){
  .toc-cta .btn{width:100%;flex:1 1 100%}
}

/* Pasos: etiqueta «Paso n» sobre el título */
.guia-layout .prose h2 .paso{display:block;width:max-content;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--red);border-radius:999px;padding:.35em .9em;margin-bottom:.7em}
.guia-layout .prose > h2:first-of-type{margin-top:1.4em}

/* Quién interviene */
.prose ul.actores{list-style:none;padding:0;margin:0 0 1.2em;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.prose ul.actores li{margin:0;border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:#fff;display:flex;flex-direction:column;gap:4px}
.actores b{color:var(--slate-900);line-height:1.35}
.actores span{color:var(--muted);line-height:1.55}
@media (max-width:640px){.prose ul.actores{grid-template-columns:1fr}}

/* Apoyo: consultoría u outsourcing */
.guia-apoyo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:1.2em 0 1.4em}
.guia-apoyo article{border:1px solid var(--line);border-radius:16px;padding:22px 22px 12px;background:var(--bg-alt);display:flex;flex-direction:column;gap:8px}
.prose .guia-apoyo h3{margin:0;font-size:1.15rem;color:var(--slate-900)}
.guia-apoyo p{margin:0;color:var(--slate)}
.prose .guia-apoyo a{margin-top:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;text-decoration:none}
.prose .guia-apoyo a:hover{text-decoration:underline}
.guia-apoyo a svg{width:16px;height:16px;flex:none}
@media (max-width:700px){.guia-apoyo{grid-template-columns:1fr}}

/* Preguntas frecuentes dentro del texto */
.guia-layout .prose .faq{margin:0 0 1.4em}
.guia-layout .prose .faq summary{line-height:1.4}

/* Fuentes oficiales */
.prose ul.fuentes{list-style:none;padding:0;margin:0 0 1.2em;border-top:1px solid var(--line)}
.prose ul.fuentes li{margin:0;padding:12px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.fuentes a{overflow-wrap:anywhere}
.fuentes span{color:var(--muted)}
.fuentes-fecha{color:var(--muted)}

/* Cierre */
section.block.guia-cierre{padding-top:24px}
@media (max-width:480px){
  .guia-cierre .cta-band .actions .btn{flex:1 1 100%}
}

/* El índice pinta sus enlaces en pizarra: el botón conserva el texto blanco (contraste AA) */
.toc .toc-cta .btn-primary,.toc .toc-cta .btn-primary:hover{color:#fff}

/* Escala de escritorio (2026-10-01): etiquetas ≥ 18 px y textos auxiliares ≥ 20 px; en móvil no cambia */
@media (min-width:981px){
  .guia-layout .prose h2 .paso{font-size:.9rem}
  .guia-layout .toc ul,.toc-cta p{font-size:1rem}
}