/* Guías (/guias/…) · extiende precios.css (clases pr-*) y servicio.css
 * lectura larga sobre crema: índice lateral fijo en escritorio, columna de texto de ~66ch
 * ilustraciones: pantallas esquemáticas armadas en HTML/CSS, sin datos reales ni capturas
 * honest: los ejemplos son "situación típica"; nada de cifras ni promesas
 */

/* ---------- hero ---------- */
.gu-meta { font-size: var(--text-sm); letter-spacing: 0.04em; color: var(--color-on-ink-soft); }

/* ---------- cuerpo ---------- */
.gu-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.gu-toc { display: none; }
@media (min-width: 64rem) {
  .gu-layout { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-3xl); align-items: start; }
  .gu-toc { display: block; position: sticky; top: 6rem; border-top: 2px solid var(--color-ink); padding-top: var(--space-md); }
  .gu-toc p { font: 700 0.75rem/1.4 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); }
  .gu-toc ol { margin-top: var(--space-sm); display: grid; gap: var(--space-2xs); }
  .gu-toc a { display: block; padding-block: var(--space-xs); font-size: var(--text-sm); line-height: 1.35; color: var(--color-body); }
  .gu-toc a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
}

.gu-art { max-width: 44rem; color: var(--color-body); }
.gu-art > * + * { margin-top: var(--space-lg); }
.gu-art h2 { margin-top: clamp(3rem, 6vw, 4.5rem); font-weight: 900; font-size: var(--text-2xl); line-height: 1.08; letter-spacing: -0.015em; color: var(--color-ink); scroll-margin-top: 6rem; }
.gu-art h2:first-child { margin-top: 0; }
.gu-art h3 { margin-top: var(--space-2xl); font-weight: 900; font-size: var(--text-xl); line-height: 1.15; color: var(--color-ink); scroll-margin-top: 6rem; }
.gu-art h2 + *, .gu-art h3 + * { margin-top: var(--space-md); }
.gu-art > p, .gu-art > ul > li, .gu-art > ol > li, .gu-cta > p { font-size: var(--text-lg); line-height: 1.65; }
.gu-art strong { color: var(--color-ink); }
.gu-art 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; }
.gu-art > ul, .gu-art > ol { display: grid; gap: var(--space-sm); padding-left: 1.4em; }
.gu-art > ul { list-style: disc; }
.gu-art > ol { list-style: decimal; }
.gu-art > ul > li::marker, .gu-art > ol > li::marker { color: var(--color-ink); font-weight: 700; }
.gu-art em { font-style: italic; }
.gu-tipica { margin-inline: 0; padding: var(--space-lg) var(--space-lg) var(--space-lg) clamp(1rem, 3vw, 1.75rem); border-left: 4px solid var(--color-accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--color-tint); }
.gu-tipica p { font-size: var(--text-base); font-style: italic; line-height: 1.6; }
.gu-tipica b { font-style: normal; color: var(--color-ink); }

/* llamado a la auditoría dentro del texto */
.gu-cta { margin-top: var(--space-xl); padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius-lg); background: var(--color-ink); color: var(--color-on-ink); box-shadow: var(--shadow-hard); }
.gu-cta p { color: var(--color-on-ink-body); }
.gu-cta strong { color: var(--color-on-ink); }
.gu-cta ul { display: grid; list-style: none; padding: 0; gap: 0; border-top: 1px solid var(--color-ink-hair); margin-top: var(--space-lg); }
.gu-cta li { border-bottom: 1px solid var(--color-ink-hair); font-size: var(--text-base); }
.gu-cta li a { display: block; padding-block: var(--space-sm); color: var(--color-on-ink); }
.gu-cta .pr-btn { margin-top: var(--space-xl); color: var(--color-night); text-decoration: none; }

/* ---------- ilustraciones esquemáticas ---------- */
.gu-fig { margin: var(--space-xl) 0 0; }
.gu-fig figcaption { margin-top: var(--space-md); font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); }
.gu-screen { position: relative; overflow: hidden; border: 2px solid var(--color-ink); border-radius: var(--radius-lg); background: var(--color-paper-2); box-shadow: var(--shadow-hard); font-family: var(--font-body); color: var(--color-ink); }
.gu-screen__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; border-bottom: 2px solid var(--color-ink); background: var(--color-tint); }
.gu-screen__bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1.5px solid var(--color-ink); }
.gu-screen__bar span { margin-left: 0.5rem; padding: 0.2rem 0.75rem; border-radius: var(--radius-pill); background: var(--color-paper-2); border: 1px solid var(--color-rule); font-size: 0.75rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gu-screen__body { padding: clamp(1rem, 3.5vw, 1.75rem); display: grid; gap: var(--space-md); }
.gu-screen__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.125rem, 2.4vw, 1.375rem); line-height: 1.15; }
.gu-mark { display: inline-grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-accent); border: 1.5px solid var(--color-ink); font: 800 0.75rem/1 var(--font-body); color: var(--color-ink); }

/* 1 · pasos para crear el perfil */
.gu-steps { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.gu-steps li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem 0.3rem 0.35rem; border-radius: var(--radius-pill); border: 1.5px solid var(--color-rule); font-size: 0.8125rem; font-weight: 700; color: var(--color-muted); }
.gu-steps li b { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--color-tint); font-size: 0.6875rem; color: var(--color-ink); }
.gu-steps li.is-done { color: var(--color-ink); border-color: var(--color-ink); }
.gu-steps li.is-done b { background: var(--color-ink); color: var(--color-paper); }
.gu-steps li.is-now { color: var(--color-ink); border-color: var(--color-ink); background: var(--color-accent-soft); }
.gu-steps li.is-now b { background: var(--color-accent); border: 1.5px solid var(--color-ink); }
.gu-field { display: grid; gap: 0.35rem; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.gu-field__label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.gu-field__box { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.55rem 0.85rem; border: 1.5px solid var(--color-ink); border-radius: 0.6rem; background: var(--color-paper-2); font-size: 0.9375rem; }
.gu-field__box--ghost { border-style: dashed; border-color: var(--color-rule); color: var(--color-muted); }
.gu-field__hint { font-size: 0.8125rem; color: var(--color-muted); }
.gu-caret { display: inline-block; width: 2px; height: 1.1em; background: var(--color-ink); vertical-align: middle; }
.gu-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.gu-btnmock { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.55rem 1.1rem; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: 0.875rem; font-weight: 800; }
.gu-btnmock--soft { background: transparent; color: var(--color-ink); border: 1.5px solid var(--color-ink); }

/* 2 · categoría principal */
.gu-drop { border: 1.5px solid var(--color-ink); border-radius: 0.6rem; overflow: hidden; background: var(--color-paper-2); }
.gu-drop li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--color-rule); font-size: 0.9375rem; }
.gu-drop li:last-child { border-bottom: 0; }
.gu-drop li.is-pick { background: var(--color-accent-soft); font-weight: 800; }
.gu-drop li small { font-size: 0.75rem; font-weight: 700; color: var(--color-muted); text-align: right; }
.gu-drop li.is-pick small { color: var(--color-ink); }
.gu-add { font-size: 0.875rem; font-weight: 800; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }

/* 3 · enlace para pedir reseñas */
.gu-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 40rem) { .gu-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; } }
.gu-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.8125rem; font-weight: 800; }
.gu-crumbs span { padding: 0.25rem 0.65rem; border-radius: var(--radius-pill); border: 1.5px solid var(--color-ink); }
.gu-crumbs span:last-child { background: var(--color-accent); }
.gu-link { display: flex; align-items: center; gap: 0.5rem; }
.gu-link .gu-field__box { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; line-height: 1.6; }
.gu-qr { position: relative; flex: none; width: 5.5rem; height: 5.5rem; border: 1.5px solid var(--color-ink); border-radius: 0.4rem; background: repeating-conic-gradient(var(--color-ink) 0 25%, var(--color-paper-2) 0 50%) 0.25rem 0.25rem / 0.75rem 0.75rem; }
.gu-qr i { position: absolute; width: 1.6rem; height: 1.6rem; border: 0.3rem solid var(--color-ink); background: var(--color-paper-2); box-shadow: inset 0 0 0 0.25rem var(--color-paper-2), inset 0 0 0 1rem var(--color-ink); }
.gu-qr i:nth-child(1) { top: 0.3rem; left: 0.3rem; }
.gu-qr i:nth-child(2) { top: 0.3rem; right: 0.3rem; }
.gu-qr i:nth-child(3) { bottom: 0.3rem; left: 0.3rem; }
.gu-chat { display: grid; gap: 0.6rem; padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-tint); }
.gu-chat__who { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.gu-bubble { justify-self: end; max-width: 95%; padding: 0.65rem 0.85rem; border-radius: 0.9rem 0.9rem 0.25rem 0.9rem; background: var(--color-accent-soft); border: 1.5px solid var(--color-ink); font-size: 0.875rem; line-height: 1.45; }
.gu-bubble u { text-decoration-color: var(--color-ink); white-space: nowrap; }
.gu-bubble--in { justify-self: start; border-radius: 0.9rem 0.9rem 0.9rem 0.25rem; background: var(--color-paper-2); }

/* ---------- índice /guias/ ---------- */
.gu-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 48rem) { .gu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gu-card { display: grid; gap: var(--space-md); align-content: start; padding: clamp(1.5rem, 3vw, 2.25rem); border: 2px solid var(--color-ink); border-radius: var(--radius-lg); background: var(--color-paper-2); box-shadow: var(--shadow-hard); transition: transform var(--dur-short) var(--ease-out); }
.gu-card:hover { transform: translate(2px, -2px); }
.gu-card__tag { justify-self: start; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent); border: 1.5px solid var(--color-ink); font: 800 0.6875rem/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.gu-card h2 { font-weight: 900; font-size: var(--text-xl); line-height: 1.12; color: var(--color-ink); }
.gu-card p { font-size: var(--text-base); line-height: 1.6; color: var(--color-body); }
.gu-card__go { font: 800 0.875rem/1.3 var(--font-body); letter-spacing: 0.04em; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
@media (prefers-reduced-motion: reduce) { .gu-card { transition: none; } }
.gu-stack { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); min-width: 0; }
.gu-link .gu-btnmock { flex: none; }