/* bigger Control · Guías del SAR (/guias) · diseño 16 oct 2026 (diseñador)
   Jossué: «súper vistosas, súper profesionales, intuitivas, fáciles de leer».
   Va sobre landing.css (barra, botones, pie, colores, letra). Sin JavaScript: el filtro del índice es :target.
   - Cabecera negra con grano y luz roja, como el héroe: tema con su ícono, título, y tres datos en placas
     (minutos, pasos, fecha). Un ícono grande del tema, a línea, firma la esquina.
   - Cuerpo en dos columnas desde 1100 px: «En esta guía» pegada a la izquierda y la lectura a 68 caracteres.
   - Pasos numerados grandes (placa negra con labio rojo) unidos por un hilo: se lee como un recorrido.
   - «Tenga a la mano» e «Importante» son recuadros con su placa; el resto del texto va suelto.
   - El recuadro de bigger Control es una tarjeta negra baja con el logo, al final: no corta la lectura. */

/* ── cabecera ── */
.guia-portada{position:relative;overflow:hidden;padding:44px 0 64px;background-image:var(--grano),radial-gradient(55% 80% at 90% 10%,rgba(232,59,63,.32),transparent 65%);background-color:var(--negro);color:var(--crema)}
.guia-portada .caja{position:relative}
.guia-portada .migas{margin:0 0 34px;font:700 14px/1.4 var(--ui);color:var(--sobre-noche-3)}
.guia-portada .migas a{display:inline-flex;align-items:center;min-height:44px;color:var(--sobre-noche-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(246,233,213,.3)}
.guia-portada .migas a:hover{color:var(--crema);text-decoration-color:var(--rojo)}
.guia-portada .rotulo{gap:10px}
.guia-portada h1{max-width:18em;margin:6px 0 0;font-size:clamp(34px,4.6vw,60px);line-height:1;color:var(--crema)}
.guia-portada h1 em{white-space:nowrap}
.guia-intro{max-width:40em;margin:26px 0 0;font:500 20px/1.55 var(--ui);color:var(--sobre-noche-2)}
.guia-datos{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.guia-datos li{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #6F665D;border-radius:var(--radio);font:800 12px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--crema)}
.guia-datos .icono{color:var(--rojo)}
.guia-sello{position:absolute;right:28px;bottom:-30px;width:220px;height:220px;color:rgba(246,233,213,.07);pointer-events:none}

/* ── cuerpo de una guía ── */
section.papel.guia{padding:64px 0 96px}
.guia-cuerpo{display:grid;grid-template-columns:240px minmax(0,68ch);justify-content:space-between;gap:64px;align-items:start}
.en-esta{position:sticky;top:104px;padding-top:6px}
.en-esta .rotulo{margin-bottom:14px;color:var(--acento)}
.en-esta ol{margin:0;padding:0;list-style:none;counter-reset:indice;border-left:2px solid var(--tinta)}
.en-esta li{counter-increment:indice}
.guia .en-esta a{display:flex;gap:10px;padding:9px 0 9px 16px;margin-left:-2px;border-left:2px solid transparent;font:700 15px/1.35 var(--ui);color:var(--tinta-2);text-decoration:none}
.en-esta a::before{content:counter(indice,decimal-leading-zero);flex:none;font:900 12px/1.6 var(--titulo);color:var(--acento)}
.en-esta li:last-child a::before{content:"·"}
.guia .en-esta a:hover{color:var(--tinta);border-left-color:var(--rojo)}
.guia article{min-width:0}
.guia article > section{scroll-margin-top:96px}
.guia article > section + section{margin-top:56px}
.guia h2{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0 0 18px;padding-top:22px;border-top:2px solid var(--tinta);font-size:clamp(24px,2.6vw,32px);line-height:1.08;color:var(--tinta)}
.guia h3{margin:30px 0 8px;font-size:19px;line-height:1.25;color:var(--tinta)}
.guia p,.guia li{font-size:18px;line-height:1.7;color:var(--tinta)}
.guia p{margin:0 0 16px}
.guia strong{font-weight:800}
.guia a{color:var(--acento);text-underline-offset:3px;text-decoration-thickness:2px}
.guia a:hover{color:var(--negro)}
.guia .btn{text-decoration:none}
.guia .btn.p,.guia .btn.p:hover{color:var(--negro)}
/* viñetas: un cuadrito rojo, no el punto del navegador */
.guia ul{margin:0 0 20px;padding:0;list-style:none}
.guia ul > li{position:relative;margin:0 0 10px;padding-left:24px}
.guia ul > li::before{content:"";position:absolute;left:2px;top:.68em;width:8px;height:8px;background:var(--rojo)}
/* pasos: placa negra con labio rojo, unidos por un hilo */
.guia article ol{margin:6px 0 24px;padding:0;list-style:none;counter-reset:paso}
.guia article ol > li{position:relative;counter-increment:paso;margin:0;padding:4px 0 22px 64px;min-height:44px}
.guia article ol > li::before{content:counter(paso);position:absolute;left:0;top:0;width:42px;height:42px;display:grid;place-items:center;background:var(--negro);color:var(--crema);border-radius:var(--radio);box-shadow:-4px 4px 0 var(--rojo);font:900 19px/1 var(--titulo);font-stretch:105%}
.guia article ol > li::after{content:"";position:absolute;left:20px;top:50px;bottom:4px;width:2px;background:var(--linea)}
.guia article ol > li:last-child{padding-bottom:4px}
.guia article ol > li:last-child::after{content:none}
/* «Tenga a la mano» e «Importante»: recuadro con su placa */
.guia h2 .placa{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--radio);font:900 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.a-la-mano,.importante{padding:0 28px 12px;background:var(--papel);border:2px solid var(--tinta);border-radius:var(--radio)}
.a-la-mano{box-shadow:var(--sombra) var(--tinta)}
.importante{border-color:var(--rojo);box-shadow:var(--sombra) var(--rojo)}
.a-la-mano > h2,.importante > h2{margin:0 -28px 18px;padding:22px 28px 0;border-top:0}
.a-la-mano h2 .placa{background:var(--negro);color:var(--crema)}
.a-la-mano h2 .placa .icono{color:var(--rojo)}
.importante h2 .placa{background:var(--rojo);color:var(--negro)}
/* el recuadro de bigger Control, al final y bajo */
.recuadro{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px 26px;margin:64px 0 0;padding:22px 26px;background-image:var(--grano),radial-gradient(60% 140% at 100% 0%,rgba(232,59,63,.28),transparent 62%);background-color:var(--negro);color:var(--crema);border-radius:var(--radio);box-shadow:var(--sombra) var(--rojo)}
.recuadro .placas{font-size:20px}
.guia .recuadro p{margin:0;font-size:16px;line-height:1.5;color:var(--sobre-noche-2)}
.guia .recuadro strong{color:var(--crema)}
/* siga leyendo y fuentes */
.relacionadas .tarjetas{grid-template-columns:1fr}
.fuentes ol{margin:0 0 20px;padding-left:1.4em;list-style:decimal;counter-reset:none}
.fuentes ol > li{padding:0 0 8px;min-height:0;font-size:15px;line-height:1.5;color:var(--tinta-2)}
.fuentes ol > li::before,.fuentes ol > li::after{content:none}
.fuentes li a{font-size:15px;overflow-wrap:anywhere}
.cierre{margin-top:28px;padding:18px 20px;background:var(--crema-2);border:1px solid var(--linea);border-radius:var(--radio);font-size:15px!important;line-height:1.55!important}

/* ── índice ── */
.guia-portada.indice{padding-bottom:40px}
.filtro{display:flex;flex-wrap:wrap;gap:10px;margin:36px 0 0}
.filtro a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:11px 16px;background:#1C1915;border:1px solid #6F665D;border-radius:var(--radio);box-shadow:-3px 3px 0 #3A332B;font:800 12px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--crema);text-decoration:none;transition:transform 120ms,box-shadow 120ms,border-color 120ms}
.filtro a b{padding:3px 6px;background:rgba(246,233,213,.12);border-radius:var(--radio);font-weight:900;letter-spacing:0}
.filtro a .icono{color:var(--rojo)}
.filtro a:hover{border-color:var(--crema);box-shadow:-3px 3px 0 var(--rojo)}
.filtro a:active{transform:translate(-3px,3px);box-shadow:none}
/* el tema elegido (:target) es el único que se ve; «Todas» o sin elegir, se ven todos */
main:has(.tema:target) .tema:not(:target){display:none}
main:has(#facturacion:target) .filtro a[href="#facturacion"],main:has(#impuestos:target) .filtro a[href="#impuestos"],main:has(#tramites:target) .filtro a[href="#tramites"],main:has(#finanzas:target) .filtro a[href="#finanzas"],
main:not(:has(.tema:target)) .filtro a[href="#todas"]{background:var(--crema);color:var(--negro);border-color:var(--crema);box-shadow:-4px 4px 0 var(--rojo)}
.filtro a[href]:is(:focus-visible){outline:2px solid var(--crema);outline-offset:3px}
.guia-lista{max-width:var(--ancho,1200px)}
.tema{scroll-margin-top:90px}
.tema + .tema{margin-top:64px}
.tema h2{flex-direction:row;align-items:center;gap:14px}
.tema h2 .icono{width:30px;height:30px;color:var(--acento)}
.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.guia .tarjetas > li{margin:0;padding:0;min-height:0}
.guia .tarjetas > li::before{content:none}
.tarjetas a{display:flex;flex-direction:column;gap:12px;height:100%;padding:24px 24px 22px;background:var(--papel);border:2px solid var(--tinta);border-radius:var(--radio);color:var(--tinta);text-decoration:none;box-shadow:var(--sombra) var(--tinta);transition:transform 150ms,box-shadow 150ms}
.tarjetas a:hover{transform:translate(-3px,3px);box-shadow:-3px 3px 0 var(--rojo);color:var(--tinta)}
.tarjeta-cab{display:flex;align-items:center;gap:12px}
.tarjetas .placa-icono{display:grid;place-items:center;width:40px;height:40px;flex:none;background:var(--negro);color:var(--crema);border-radius:var(--radio);box-shadow:-3px 3px 0 var(--rojo)}
.tarjeta-tema{font:800 12px/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2)}
.tarjetas h3{margin:4px 0 0;font-size:20px;line-height:1.2}
.guia .tarjetas p{margin:0;font-size:15px;line-height:1.5;color:var(--tinta-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tarjetas .mas{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;font:900 12px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--acento)}
.tarjetas a:hover .mas .icono{transform:translateX(4px)}
.tarjetas .mas .icono{transition:transform 150ms}
.guia-lista .cierre{margin-top:56px}

@media (max-width:1099px){
  .guia-cuerpo{grid-template-columns:minmax(0,68ch);justify-content:center;gap:0}
  .en-esta{position:static;margin:0 0 44px;padding:18px 20px;background:var(--papel);border:2px solid var(--tinta);border-radius:var(--radio)}
  .en-esta ol{border-left:0}
  .en-esta a{padding:8px 0;border-left:0;margin:0}
  .tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guia-sello{width:160px;height:160px}
}
@media (max-width:760px){
  .guia-portada{padding:28px 0 44px}
  .guia-portada .migas{margin-bottom:20px}
  .guia-intro{font-size:17px}
  .guia-sello{display:none}
  section.papel.guia{padding:36px 0 72px}
  .guia p,.guia li{font-size:17px}
  .guia article ol > li{padding-left:56px}
  .a-la-mano,.importante{padding:0 18px 8px}
  .a-la-mano > h2,.importante > h2{margin:0 -18px 16px;padding:18px 18px 0}
  .recuadro{grid-template-columns:1fr;padding:22px 20px}
  .recuadro .btn{justify-self:start}
  .tarjetas{grid-template-columns:1fr}
  .filtro{gap:8px}
  .filtro a{padding:10px 12px;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){.tarjetas a,.filtro a,.tarjetas .mas .icono{transition:none}.tarjetas a:hover{transform:none}}

/* ── tema Finanzas: ejemplos marcados y tabla de presupuesto ── */
.guia article .nota{margin:0 0 10px;font-size:14px;color:var(--gris,#5c544b)}
.guia article .tabla{width:100%;margin:12px 0 4px;border-collapse:collapse;font-size:15px}
.guia article .tabla th,.guia article .tabla td{padding:10px 12px;border-bottom:1px solid var(--linea);text-align:left}
.guia article .tabla th:last-child,.guia article .tabla td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.guia article .tabla thead th{background:var(--crema-2);font:800 12px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase}