/* Versión ilustrada de las páginas nuevas · extiende precios.css + servicio.css (+ guia.css en guías)
 * Todo propio: HTML, CSS y SVG inline. Colores y tipografías = tokens de tokens-paginas.css (verde tinta, dorado, crema; Fraunces y Manrope).
 * Los datos que se ven en las maquetas son de ejemplo y están marcados como tales; no hay clientes ni cifras reales.
 */

/* ---------- base: íconos y figuras ---------- */
.il-ic { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.il-badge { display: inline-grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-ink); color: var(--color-accent); border: 2px solid var(--color-ink); }
.il-badge .il-ic { width: 1.5rem; height: 1.5rem; }
.il-badge--gold { background: var(--color-accent); color: var(--color-ink); }
.il-fig { margin: 0; min-width: 0; }
.il-fig figcaption { margin-top: var(--space-md); font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); }
.sv-on-ink .il-fig figcaption, .il-on-ink figcaption { color: var(--color-on-ink-dim); }
.il-panel { position: relative; min-width: 0; border: 2px solid var(--color-ink); border-radius: var(--radius-lg); background: var(--color-paper-2); box-shadow: var(--shadow-hard); color: var(--color-ink); font-family: var(--font-body); overflow: hidden; }
.il-example { display: inline-block; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-ink); font: 800 0.6875rem/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.il-s { fill: none; stroke: var(--color-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.il-f-ink { fill: var(--color-ink); }
.il-f-acc { fill: var(--color-accent); }
.il-f-soft { fill: var(--color-accent-soft); }
.il-f-pap { fill: var(--color-paper-2); }
.il-f-tint { fill: var(--color-tint); }
.il-st-rule { stroke: var(--color-rule); }
.il-st-acc { stroke: var(--color-accent); }

/* ---------- dos columnas: texto + figura ---------- */
.il-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.il-duo > * { min-width: 0; }
.il-duo .sv-big { margin-bottom: var(--space-lg); }
@media (min-width: 60rem) {
  .il-duo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-3xl); }
  .il-duo--rev > :first-child { order: 2; }
}
.il-band-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.il-band-head p { margin-top: var(--space-md); font-size: var(--text-lg); line-height: 1.55; color: var(--color-body); max-width: 52ch; }

/* ---------- tarjetas con ícono ---------- */
.il-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-top: clamp(2rem, 4vw, 3rem); list-style: none; padding: 0; }
.il-cards > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md) var(--space-lg); align-items: start; padding: var(--space-lg); border: 1.5px solid var(--color-ink); border-radius: var(--radius-lg); background: var(--color-paper-2); box-shadow: -4px 5px 0 var(--color-ink); border-bottom: 1.5px solid var(--color-ink); }
.il-cards > li h3 { margin: 0 0 var(--space-xs); font-weight: 900; font-size: var(--text-lg); line-height: 1.15; color: var(--color-ink); }
.il-cards > li p { margin: 0; max-width: none; font-size: var(--text-base); line-height: 1.55; color: var(--color-body); }
.il-cards > li a { color: var(--color-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
@media (min-width: 40rem) { .il-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .il-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .il-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.il-cards--stack > li { grid-template-columns: minmax(0, 1fr); }
.il-cards--tiles > li { grid-template-columns: minmax(0, 1fr); justify-items: start; text-align: left; }

/* íconos por oficio / rubro (tiras) */
.il-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); list-style: none; padding: 0; margin: 0; }
.il-tiles li { display: grid; justify-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-sm); border: 1.5px solid var(--color-ink); border-radius: var(--radius-lg); background: var(--color-paper-2); font: 800 0.8125rem/1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); text-align: center; }
@media (min-width: 40rem) { .il-tiles { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }

/* ---------- recorrido / línea de tiempo con pasos ---------- */
.il-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3rem) 0 0; counter-reset: il; }
.il-flow > li { counter-increment: il; position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.il-flow__dot { position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-ink); color: var(--color-accent); border: 2px solid var(--color-ink); box-shadow: 3px 4px 0 var(--color-accent); z-index: 1; }
.il-flow__dot::after { content: counter(il); position: absolute; top: -0.35rem; right: -0.45rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--color-accent); color: var(--color-ink); border: 1.5px solid var(--color-ink); font: 800 0.6875rem/1 var(--font-body); }
.il-flow > li:not(:last-child)::before { content: ""; position: absolute; left: 1.7rem; top: 3.5rem; bottom: calc(-1 * var(--space-xl)); width: 0; border-left: 2px dashed var(--color-ink); opacity: 0.55; }
.il-flow h3 { margin: 0; font-weight: 900; font-size: var(--text-lg); line-height: 1.15; color: var(--color-ink); }
.il-flow p { margin: var(--space-xs) 0 0; max-width: 40ch; font-size: var(--text-base); line-height: 1.5; color: var(--color-body); }
.il-flow .pr-steps__tag { margin-top: var(--space-sm); display: inline-block; }
@media (min-width: 52rem) {
  .il-flow { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--space-lg); }
  .il-flow > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .il-flow > li:not(:last-child)::before { left: 4.25rem; right: calc(-1 * var(--space-lg)); top: 1.7rem; bottom: auto; width: auto; height: 0; border-left: 0; border-top: 2px dashed var(--color-ink); }
}
.il-flow--sm > li { grid-template-columns: 3rem minmax(0, 1fr); }
.il-flow--sm .il-flow__dot { width: 3rem; height: 3rem; }
.il-flow--sm > li:not(:last-child)::before { left: 1.45rem; top: 3rem; }
@media (min-width: 52rem) { .il-flow--sm > li { grid-template-columns: minmax(0, 1fr); } .il-flow--sm > li:not(:last-child)::before { left: 3.75rem; top: 1.45rem; } }
/* variante vertical (columna angosta o artículo de guía): siempre en columna */
.il-flow.il-flow--col { grid-template-columns: minmax(0, 1fr); }
.il-flow.il-flow--col > li { grid-template-columns: 3.5rem minmax(0, 1fr); }
.il-flow.il-flow--col > li:not(:last-child)::before { left: 1.7rem; right: auto; top: 3.5rem; bottom: calc(-1 * var(--space-xl)); width: 0; height: auto; border-top: 0; border-left: 2px dashed var(--color-ink); }
.gu-art .il-flow p { font-size: var(--text-base); line-height: 1.5; }

/* ---------- antes → después (hub) ---------- */
.il-ba { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding: clamp(1.25rem, 3vw, 2rem); align-items: center; }
.il-ba__col { display: grid; gap: var(--space-md); min-width: 0; }
.il-ba__head { display: flex; align-items: center; gap: var(--space-sm); font: 800 0.75rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); }
.il-ba__head--after { color: var(--color-ink); }
.il-ba__arrow { display: grid; place-items: center; width: 3rem; height: 3rem; margin-inline: auto; border-radius: 50%; background: var(--color-accent); border: 2px solid var(--color-ink); color: var(--color-ink); transform: rotate(90deg); }
.il-mess { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-content: flex-start; }
.il-mess span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.8rem; border: 1.5px dashed var(--color-muted); border-radius: var(--radius-md); background: var(--color-paper); font-size: 0.8125rem; font-weight: 700; color: var(--color-body); transform: rotate(var(--r, 0deg)); }
.il-mess span .il-ic { width: 1.1rem; height: 1.1rem; }
.il-mess span:nth-child(1) { --r: -3deg; }
.il-mess span:nth-child(2) { --r: 2deg; }
.il-mess span:nth-child(3) { --r: -1.5deg; }
.il-mess span:nth-child(4) { --r: 3deg; }
.il-mess span:nth-child(5) { --r: -2deg; }
.il-mess__q { font: 800 1.5rem/1 var(--font-display); color: var(--color-muted); align-self: center; }
.il-hub { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 5.25rem; gap: 0.5rem; }
.il-hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.il-hub__lines line { stroke: var(--color-ink); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: 0.6; }
.il-hub__n { position: relative; z-index: 1; display: grid; place-items: center; align-content: center; gap: 0.25rem; padding: 0.35rem; border: 1.5px solid var(--color-ink); border-radius: var(--radius-md); background: var(--color-paper-2); font: 800 0.6875rem/1.15 var(--font-body); letter-spacing: 0.04em; text-align: center; text-transform: uppercase; color: var(--color-ink); }
.il-hub__n .il-ic { width: 1.4rem; height: 1.4rem; }
.il-hub__n--core { grid-column: 2; grid-row: 2; border-radius: 50%; background: var(--color-accent); border-width: 2px; box-shadow: 3px 4px 0 var(--color-ink); font-size: 0.75rem; letter-spacing: 0.08em; }
.il-hub__n--a { grid-column: 1; grid-row: 1; }
.il-hub__n--b { grid-column: 3; grid-row: 1; }
.il-hub__n--c { grid-column: 1; grid-row: 2; }
.il-hub__n--d { grid-column: 3; grid-row: 2; }
.il-hub__n--e { grid-column: 2; grid-row: 3; }
@media (min-width: 48rem) {
  .il-ba:not(.il-ba--stack) { grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1.2fr); gap: var(--space-lg); }
  .il-ba:not(.il-ba--stack) .il-ba__arrow { transform: none; }
}

/* ---------- maqueta de tablero ---------- */
.il-dash__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; border-bottom: 2px solid var(--color-ink); background: var(--color-tint); }
.il-dash__bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1.5px solid var(--color-ink); }
.il-dash__bar span { margin-left: 0.5rem; font: 700 0.75rem/1 var(--font-body); color: var(--color-muted); }
.il-dash__bar .il-example { margin-left: auto; }
.il-dash__body { display: grid; gap: var(--space-md); padding: clamp(1rem, 3vw, 1.5rem); }
.il-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.il-kpi { padding: var(--space-sm) var(--space-md); border: 1.5px solid var(--color-ink); border-radius: var(--radius-md); background: var(--color-paper); }
.il-kpi small { display: block; font: 700 0.6875rem/1.25 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.il-kpi b { display: block; margin-top: 0.3rem; font: 900 1.375rem/1 var(--font-display); color: var(--color-ink); }
.il-kpi--gold { background: var(--color-accent); }
.il-kpi--gold small { color: var(--color-ink); }
.il-chart { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-md); }
.il-chart__box { padding: var(--space-md); border: 1.5px solid var(--color-ink); border-radius: var(--radius-md); background: var(--color-paper); }
.il-chart__box > small { display: block; margin-bottom: var(--space-sm); font: 700 0.6875rem/1.25 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.il-bars { display: flex; align-items: flex-end; gap: 0.4rem; height: 6rem; }
.il-bars i { flex: 1; height: var(--h); border-radius: 0.25rem 0.25rem 0 0; background: var(--color-ink); }
.il-bars i.is-gold { background: var(--color-accent); border: 1.5px solid var(--color-ink); }
.il-stock { display: grid; gap: 0.45rem; list-style: none; padding: 0; margin: 0; font-size: 0.75rem; font-weight: 700; color: var(--color-ink); }
.il-stock li { display: grid; gap: 0.2rem; }
.il-stock li span { display: flex; justify-content: space-between; gap: 0.5rem; }
.il-stock em { display: block; height: 0.4rem; border-radius: 99px; background: var(--color-tint); font-style: normal; overflow: hidden; }
.il-stock em::before { content: ""; display: block; height: 100%; width: var(--w); background: var(--color-ink); border-radius: 99px; }
.il-stock li.is-low em::before { background: #B3261E; }
.il-stock li.is-low > span::after { content: "Reponer"; font-weight: 800; color: #B3261E; }
@media (max-width: 30rem) { .il-chart { grid-template-columns: minmax(0, 1fr); } .il-kpi b { font-size: 1.125rem; } }

/* ---------- chat de WhatsApp (maqueta) ---------- */
.il-phone { max-width: 23rem; margin-inline: auto; padding: 0.55rem; border: 3px solid var(--color-ink); border-radius: 2.25rem; background: var(--color-ink); box-shadow: var(--shadow-hard); }
.il-phone__screen { border-radius: 1.7rem; background: var(--color-paper); overflow: hidden; font-family: var(--font-body); }
.il-phone__top { display: flex; align-items: center; gap: var(--space-sm); padding: 0.8rem 1rem; background: var(--color-ink); color: var(--color-on-ink); }
.il-phone__top .il-badge { width: 2.25rem; height: 2.25rem; background: var(--color-accent); color: var(--color-ink); border-color: var(--color-accent); }
.il-phone__top .il-ic { width: 1.1rem; height: 1.1rem; }
.il-phone__top b { display: block; font-size: 0.875rem; line-height: 1.2; }
.il-phone__top small { display: block; font-size: 0.6875rem; color: var(--color-on-ink-dim); }
.il-chat { display: grid; gap: 0.55rem; padding: 1rem 0.85rem 1.1rem; background: var(--color-tint); }
.il-chat__day { justify-self: center; padding: 0.2rem 0.7rem; border-radius: 99px; background: var(--color-paper-2); font-size: 0.6875rem; font-weight: 700; color: var(--color-muted); }
.il-msg { max-width: 82%; padding: 0.55rem 0.75rem 0.4rem; border-radius: 1rem; font-size: 0.875rem; line-height: 1.4; color: var(--color-ink); }
.il-msg time { display: block; margin-top: 0.15rem; text-align: right; font-size: 0.625rem; color: var(--color-muted); }
.il-msg--in { justify-self: start; background: var(--color-paper-2); border-top-left-radius: 0.25rem; border: 1px solid var(--color-rule); }
.il-msg--out { justify-self: end; background: var(--color-accent-soft); border-top-right-radius: 0.25rem; }
.il-msg b { color: var(--color-ink); }
.il-chat__foot { justify-self: center; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 99px; border: 1.5px dashed var(--color-ink); }
.il-chat__foot .il-ic { width: 0.95rem; height: 0.95rem; }

/* ---------- tarjeta de mapa ---------- */
.il-mapcard__map { display: block; width: 100%; height: auto; }
.il-search { display: flex; align-items: center; gap: var(--space-sm); padding: 0.75rem 1rem; border-bottom: 2px solid var(--color-ink); background: var(--color-paper); font-size: 0.9375rem; font-weight: 700; color: var(--color-ink); }
.il-search .il-ic { width: 1.1rem; height: 1.1rem; color: var(--color-muted); }
.il-search .il-example { margin-left: auto; }
.il-result { display: grid; gap: var(--space-sm); padding: var(--space-md) var(--space-lg) var(--space-lg); border-top: 2px solid var(--color-ink); background: var(--color-paper); }
.il-result b { font: 900 1.125rem/1.15 var(--font-display); color: var(--color-ink); }
.il-result small { font-size: 0.8125rem; color: var(--color-muted); }
.il-stars { display: flex; gap: 0.15rem; color: var(--color-accent); }
.il-stars .il-ic { width: 1rem; height: 1rem; fill: currentColor; stroke: var(--color-ink); stroke-width: 1.25; }
.il-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.il-actions span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border: 1.5px solid var(--color-ink); border-radius: 99px; background: var(--color-paper-2); font-size: 0.75rem; font-weight: 800; color: var(--color-ink); }
.il-actions span:first-child { background: var(--color-accent); }
.il-actions .il-ic { width: 0.95rem; height: 0.95rem; }
.il-legend { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); padding: var(--space-md) var(--space-lg); border-top: 2px solid var(--color-ink); background: var(--color-paper); font-size: 0.8125rem; font-weight: 700; color: var(--color-ink); }
.il-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.il-legend i { width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--color-ink); border: 1.5px solid var(--color-ink); }
.il-legend i.is-zone { background: var(--color-accent-soft); border-style: dashed; }
.il-legend i.is-out { background: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .il-pin { animation: il-bob 2.6s ease-in-out infinite; }
}
@keyframes il-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------- agenda de visitas (maqueta) ---------- */
.il-agenda { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.il-agenda li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-md); align-items: center; padding: var(--space-sm) var(--space-lg); border-top: 1.5px solid var(--color-rule); font-size: 0.875rem; color: var(--color-ink); }
.il-agenda li:first-child { border-top: 0; }
.il-agenda time { font: 900 1rem/1 var(--font-display); }
.il-agenda b { display: block; line-height: 1.25; }
.il-agenda small { color: var(--color-muted); font-size: 0.75rem; }
.il-agenda li.is-new { background: var(--color-accent-soft); }
.il-panel__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 0.8rem var(--space-lg); border-bottom: 2px solid var(--color-ink); background: var(--color-tint); font: 800 0.75rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- agente de IA: diagrama ---------- */
.il-agent { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding: clamp(1rem, 3vw, 1.75rem); }
.il-agent__node { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: center; padding: var(--space-md); border: 1.5px solid var(--color-ink); border-radius: var(--radius-md); background: var(--color-paper); font-size: 0.9375rem; line-height: 1.35; color: var(--color-body); }
.il-agent__node b { display: block; font: 900 1.0625rem/1.2 var(--font-display); color: var(--color-ink); }
.il-agent__node--core { background: var(--color-ink); color: var(--color-on-ink-body); }
.il-agent__node--core b { color: var(--color-on-ink); }
.il-agent__node--core .il-badge { background: var(--color-accent); color: var(--color-ink); border-color: var(--color-accent); }
.il-agent__node--human { border-style: dashed; background: var(--color-accent-soft); }
.il-agent__arrow { justify-self: center; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-accent); border: 1.5px solid var(--color-ink); color: var(--color-ink); transform: rotate(90deg); }
.il-agent__arrow .il-ic { width: 1rem; height: 1rem; }
.il-agent__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.il-agent__label { justify-self: center; font: 800 0.6875rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
@media (min-width: 40rem) { .il-agent__split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- comparación ---------- */
.il-compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.il-compare__card { display: grid; gap: var(--space-md); align-content: start; padding: var(--space-lg); border: 1.5px solid var(--color-ink); border-radius: var(--radius-lg); background: var(--color-paper-2); }
.il-compare__card--star { background: var(--color-ink); color: var(--color-on-ink-body); box-shadow: var(--shadow-hard); }
.il-compare__card h3 { margin: 0; display: flex; align-items: center; gap: var(--space-sm); font: 900 1.125rem/1.15 var(--font-display); color: var(--color-ink); }
.il-compare__card--star h3 { color: var(--color-on-ink); }
.il-compare__card ul { display: grid; gap: var(--space-sm); list-style: none; padding: 0; margin: 0; }
.il-compare__card li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: var(--space-sm); align-items: start; font-size: 0.875rem; line-height: 1.4; }
.il-compare__card li small { display: block; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.il-compare__card--star li small { color: var(--color-on-ink-dim); }
.il-yes, .il-no { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1.5px solid var(--color-ink); }
.il-yes { background: var(--color-accent); color: var(--color-ink); }
.il-no { background: transparent; color: var(--color-muted); border-color: var(--color-muted); }
.il-yes .il-ic, .il-no .il-ic { width: 0.8rem; height: 0.8rem; stroke-width: 2.5; }
@media (min-width: 40rem) { .il-compare { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- ícono al lado de un h3 de guía ---------- */
.gu-art h3.il-h3 { display: flex; align-items: center; gap: var(--space-md); }
.gu-art h3.il-h3 .il-badge { width: 2.75rem; height: 2.75rem; }
.gu-art h3.il-h3 .il-badge .il-ic { width: 1.35rem; height: 1.35rem; }

/* ---------- señales (tarjetas) ---------- */
.il-signs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.il-sign { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) var(--space-lg); border: 1.5px solid var(--color-ink); border-radius: var(--radius-lg); background: var(--color-paper-2); box-shadow: -4px 5px 0 var(--color-ink); }
.il-sign h3, .gu-art .il-sign h3 { margin: 0 0 var(--space-xs); font-weight: 900; font-size: var(--text-lg); line-height: 1.15; color: var(--color-ink); }
.il-sign p { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--color-body); }
@media (min-width: 40rem) { .il-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- árbol de decisión ---------- */
.il-decide { display: grid; gap: var(--space-md); padding: clamp(1rem, 3vw, 1.75rem); }
.il-decide__start { justify-self: start; padding: 0.55rem 1rem; border-radius: 99px; background: var(--color-ink); color: var(--color-accent); font: 800 0.75rem/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.il-decide__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.il-decide__q { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); border: 1.5px solid var(--color-ink); border-radius: var(--radius-md); background: var(--color-paper); font: 700 0.9375rem/1.3 var(--font-body); color: var(--color-ink); }
.il-decide__q .il-badge { width: 2.25rem; height: 2.25rem; }
.il-decide__q .il-badge .il-ic { width: 1.1rem; height: 1.1rem; }
.il-decide__a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: center; padding: var(--space-md); border: 1.5px solid var(--color-ink); border-radius: var(--radius-md); background: var(--color-accent-soft); }
.il-decide__a em { font: 800 0.6875rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; font-style: normal; color: var(--color-ink); }
.il-decide__a b { display: block; font: 900 1rem/1.2 var(--font-display); color: var(--color-ink); }
.il-decide__a small { display: block; margin-top: 0.15rem; font-size: 0.75rem; line-height: 1.35; color: var(--color-body); }
.il-decide__a--final { background: var(--color-ink); }
.il-decide__a--final em, .il-decide__a--final b { color: var(--color-on-ink); }
.il-decide__a--final small { color: var(--color-on-ink-dim); }
.il-decide__no { justify-self: start; padding-left: 1.5rem; font: 800 0.6875rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
@media (min-width: 40rem) { .il-decide__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }

/* ---------- línea de tiempo vertical de la guía ---------- */
.gu-art > ol.il-tl { list-style: none; padding: 0; gap: 0; counter-reset: tl; position: relative; }
.gu-art > ol.il-tl > li { counter-increment: tl; position: relative; padding: 0 0 var(--space-lg) 3.5rem; font-size: var(--text-lg); line-height: 1.55; }
.gu-art > ol.il-tl > li::before { content: counter(tl); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-ink); color: var(--color-accent); border: 2px solid var(--color-ink); box-shadow: 2px 3px 0 var(--color-accent); font: 900 1rem/1 var(--font-display); }
.gu-art > ol.il-tl > li::after { content: ""; position: absolute; left: 1.2rem; top: 2.75rem; bottom: 0.25rem; border-left: 2px dashed var(--color-ink); opacity: 0.5; }
.gu-art > ol.il-tl > li:last-child::after { display: none; }
.gu-art > ol.il-tl > li:last-child { padding-bottom: 0; }

/* ---------- cierre protagonista ---------- */
.il-close__art { position: relative; justify-self: center; width: 100%; max-width: 21rem; }
.il-close__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.il-close__steps { display: flex; flex-wrap: wrap; gap: var(--space-sm); list-style: none; padding: 0; margin: 0; }
.il-close__steps li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.9rem; border-radius: 99px; border: 1.5px solid var(--color-night); background: color-mix(in oklch, var(--color-paper-2) 55%, var(--color-accent)); font: 800 0.75rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-night); }
.il-close__steps .il-ic { width: 1rem; height: 1rem; }
.il-close .pr-close__inner { align-items: center; }
.il-close h2 { max-width: 16ch; }
@media (min-width: 60rem) { .il-close .pr-close__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }