/* ==========================================================================
   salvoconducto.cl — Ultra Clean Editorial LegalTech Design System (2026)
   Diseño de Alta Reputación Cívica · Sin Cajas Anidadas · WCAG 2.1 AAA
   ========================================================================== */

:root {
  /* Paleta Base Luminosa y Autoritaria */
  --bg: #F8FAFC;
  --bg-elev: #FFFFFF;
  --bg-soft: #F1F5F9;
  --bg-well: #E2E8F0;
  --bg-glass: rgba(248, 250, 252, 0.88);

  /* Tipografía y Contraste */
  --ink: #0A0F1D;
  --ink-muted: #334155;
  --muted: #64748B;
  --line: #E2E8F0;
  --line-light: #F1F5F9;
  --line-strong: #CBD5E1;

  /* Identidad Notarial Chilena */
  --brand: #0F2756;           /* Azul Notarial Noche */
  --brand-2: #1D4ED8;         /* Azul Zafiro Primario */
  --brand-gradient: linear-gradient(135deg, #0F2756 0%, #1D4ED8 100%);
  --brand-soft: rgba(29, 78, 216, 0.07);
  --accent: #10B981;          /* Esmeralda Verificación (#10B981 requerido por check) */
  --accent-2: #059669;
  --accent-soft: rgba(16, 185, 129, 0.09);
  --accent-ring: rgba(29, 78, 216, 0.16);
  --chile-red: #E11D48;

  /* Estados */
  --danger: #DC2626;
  --danger-soft: rgba(220, 38, 38, 0.08);
  --req: #DC2626;
  --info-bg: #EFF6FF;
  --info-ink: #1E40AF;
  --info-line: #BFDBFE;
  --info-bar: #2563EB;

  /* Sombras y Elevaciones Finas */
  --shadow-xs: 0 1px 2px rgba(10, 15, 29, 0.04);
  --shadow-sm: 0 2px 5px rgba(10, 15, 29, 0.04);
  --shadow: 0 4px 12px -2px rgba(10, 15, 29, 0.05);
  --shadow-md: 0 12px 24px -4px rgba(10, 15, 29, 0.06);
  --shadow-lg: 0 20px 36px -6px rgba(10, 15, 29, 0.08);
  --shadow-paper: 0 16px 36px -8px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.05);

  /* Dimensiones y Curvaturas */
  --font: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", "Times New Roman", Georgia, serif;
  --max: 1200px;
  --ease: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --font-scale: 1rem;
}

/* Modo Oscuro Obsidian Slate (Lujoso, Limpio y Sin Ruidos) */
html[data-theme="dark"] {


  --brand: #3B82F6;
  --brand-2: #60A5FA;
  --brand-gradient: linear-gradient(135deg, #2563EB 0%, #60A5FA 100%);
  --brand-soft: rgba(59, 130, 246, 0.12);
  --accent-2: #34D399;

  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --req: #F87171;
  --info-bg: #0C1A30;
  --info-ink: #93C5FD;
  --info-line: #1E3A8A;
  --info-bar: #3B82F6;

  --shadow-paper: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Modo Alto Contraste Accesible (WCAG AAA) */
html.accessible-contrast {
  --bg: #000000 !important;
  --bg-elev: #0B0B0B !important;
  --bg-soft: #1A1A1A !important;
  --bg-well: #2B2B2B !important;
  --ink: #FFFFFF !important;
  --ink-muted: #F5F5F5 !important;
  --muted: #E5E5E5 !important;
  --line: #FFFFFF !important;
  --line-strong: #FFFFFF !important;
  --brand-2: #FFFF00 !important;
  --accent: #00FF66 !important;
  --danger: #FF4444 !important;
  --shadow: none !important;
  --shadow-paper: 0 0 0 2px #FFFFFF !important;
}

/* Escalado de Fuente Accesible */
html.font-sm { --font-scale: 0.875rem; }
html.font-base { --font-scale: 1rem; }
html.font-lg { --font-scale: 1.125rem; }
html.font-xl { --font-scale: 1.25rem; }

/* Reset & Configuración Global */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: var(--font-scale);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  /* Fondo plano, limpio y moderno: CERO mallas ni círculos retro */
  line-height: 1.6;
  min-width: 320px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--brand-2); text-underline-offset: 3px; text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--brand); text-decoration: underline; }
.wrap { width: min(var(--max), calc(100% - 3rem)); margin: 0 auto; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Enlace de Salto Accesible */
.skip-link {
  position: absolute;
  top: -120px;
  left: 1.5rem;
  background: var(--brand-2);
  color: #FFFFFF !important;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  z-index: 1000;
  transition: top var(--ease);
  box-shadow: var(--shadow-md);
}
.skip-link:focus {
  top: 1.5rem;
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
}

/* ==========================================================================
   Top Announcement Bar (SaaS High-Tech)
   ========================================================================== */
.top-gov-bar {
  background: #0B1E48;
  color: #FFFFFF;
  font-size: max(0.8rem,12px);
  font-weight: 550;
  padding: 0.45rem 0;
}
.top-gov-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.top-gov-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.top-gov-chile-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--chile-red);
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* ==========================================================================
   Header & Sticky Glass Navbar
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  transition: background var(--ease), border-color var(--ease);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.25rem;
}

/* Brand Identity & Logo */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 1.15rem;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  transition: transform var(--ease);
}
.brand:hover .brand-mark {
  transform: translateY(-1px);
}
.brand-title-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-text {
  font-size: 1.15rem;
  font-weight: 850;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.brand-text span {
  color: var(--brand-2);
}
.brand-sub {
  font-size: max(0.685rem,12px);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Navegación Desktop */
.nav-desktop {
  display: flex;
  align-items: center;
}
.nav-desktop a {
  color: var(--ink-muted);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: all var(--ease);
}
.nav-desktop a:hover {
  color: var(--ink);
  background: var(--bg-soft);
  text-decoration: none;
}
.nav-desktop a[aria-current="page"] {
  color: var(--brand-2);
  background: var(--brand-soft);
  font-weight: 700;
}

/* Acciones en Header */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Buscador Rápido (Ctrl + K) */
.btn-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: max(0.85rem,12px);
  font-weight: 550;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: all var(--ease);
}
.btn-search-trigger:hover {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--bg-elev);
}
.kbd-shortcut {
  font-family: monospace;
  font-size: max(0.7rem,12px);
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  padding: 0.15rem 0.35rem;
  color: var(--ink-muted);
}

/* Botones de Iconos */
.icon-btn {
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--ease);
  font-weight: 700;
  font-size: 0.9rem;
}
.icon-btn:hover {
  border-color: var(--line-strong);
  color: var(--brand-2);
}
.icon-btn:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
}
.nav-toggle { display: none; }

/* Panel de Accesibilidad */
.a11y-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--bg-elev);
  padding: 1rem;
  width: 250px;
  z-index: 100;
  display: none;
  animation: slideDown 150ms ease-out;
}
.a11y-panel.open { display: block; }
.a11y-label {
  font-size: max(0.725rem,12px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.a11y-btn-group {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.a11y-btn-group button {
  flex: 1;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink);
  font-size: max(0.85rem,12px);
  cursor: pointer;
  font-weight: 700;
  transition: all var(--ease);
}
.a11y-btn-group button.active {
  background: var(--brand-2);
  color: #fff;
  border-color: var(--brand-2);
}

/* Mobile Nav Drawer */
.nav-drawer {
  display: none;
  border-top: 1px solid var(--line);
  padding: 0.75rem 0 1.5rem;
  animation: slideDown 180ms ease-out;
}
.nav-drawer.open { display: block; }
.nav-drawer a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  font-weight: 650;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.nav-drawer a:hover { color: var(--brand-2); text-decoration: none; }

@media (max-width: 1180px) {
  .nav-desktop { display: none; }
  .btn-search-trigger .search-label { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ==========================================================================
   Hero Section (Limpia, Espaciosa y Confiable)
   ========================================================================== */
.hero {
  padding: 3rem 0 1.75rem;
}
.hero-content {
  max-width: 52rem;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: 0.85rem;
}
.kicker-bar {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
h1 {
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  margin: 0 0 1rem;
  color: var(--ink);
}
.hero-lead {
  font-size: clamp(1.025rem, 1.3vw, 1.15rem);
  color: var(--ink-muted);
  max-width: 48rem;
  line-height: 1.65;
  margin: 0;
}

/* Trust Line Items (Sin cajas flotantes) */
.trust-badges {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: max(0.85rem,12px);
  font-weight: 600;
  color: var(--ink-muted);
}
.trust-item svg { width: 16px; height: 16px; color: var(--accent-2); flex-shrink: 0; }

/* Aviso Informativo Obligatorio (Llamada Editorial sin cajas gruesas) */
.official-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1.25rem;
  border-left: 3px solid var(--info-bar);
  background: var(--info-bg);
  color: var(--info-ink);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 1.5rem 0 2rem;
}
.official-notice p { margin: 0; }
.notice-badge {
  font-size: max(0.725rem,12px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--info-bar);
  color: #FFFFFF;
  padding: 0.15rem 0.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Barra de Progreso del Documento */
.progress-bar-wrap {
  margin-bottom: 2rem;
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(0.85rem,12px);
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.progress-hint {
  font-size: max(0.8rem,12px);
  font-weight: 500;
  color: var(--muted);
}
.progress-track {
  height: 6px;
  background: var(--bg-well);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #1D4ED8, #10B981);
  transition: width 240ms cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: var(--radius-pill);
}

/* Mobile Tabs Toggle */
.mobile-only-tabs {
  display: none;
  background: var(--bg-soft);
  padding: 3px;
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
  gap: 3px;
}
.mobile-only-tabs .seg {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--muted);
  border-radius: 5px;
  cursor: pointer;
  transition: all var(--ease);
}
.mobile-only-tabs .seg[aria-pressed="true"] {
  background: var(--bg-elev);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
@media (max-width: 900px) {
  .mobile-only-tabs { display: flex; }
}

/* ==========================================================================
   Layout Principal: Formulario + Vista Previa (Split Screen)
   CERO CAJAS ANIDADAS: El espacio fluye libre sobre el lienzo
   ========================================================================== */
.layout {
  display: grid;
  align-items: start;
  margin-bottom: 4rem;
}

@media (max-width: 900px) {
  .layout {  gap: 2rem; }
  .preview-pane { display: none; }
  .preview-pane.active-mobile { display: block; }
  .form-pane.hidden-mobile { display: none; }
}

/* Panel Izquierdo: Formulario Abierto (Sin borde ni contenedor de tarjeta) */
.form-pane {
}

.form-pane-head {
}
.form-pane-head h2 {
  font-size: 1.35rem;
  font-weight: 850;
  letter-spacing: -0.025em;
  margin: 0 0 1.25rem;
  color: var(--ink);
}

/* Step Tabs: Línea de Pasos Conectada (Sin cajas de botones) */
.step-tabs {
  display: flex;
}
.step-tab {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-align: left;
  position: relative;
}
.step-tab:hover {
  background: var(--bg-soft);
}
.step-tab[aria-selected="true"] {
  background: transparent;
}
.step-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: -0.75rem;
  left: 0;
  right: 0;
  height: 2px;
}
.step-num {
  width: 22px;
  height: 22px;
  background: var(--bg-well);
  color: var(--ink-muted);
  font-size: max(0.75rem,12px);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: all var(--ease);
}
.step-tab[aria-selected="true"] .step-num {
}
.step-tab.completed .step-num {
  background: var(--accent);
  color: #FFFFFF;
}
.step-label {
  font-size: max(0.825rem,12px);
  font-weight: 650;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--ease);
}
.step-tab[aria-selected="true"] .step-label {
  color: var(--ink);
  font-weight: 750;
}
.step-tab.completed .step-label {
  color: var(--ink);
}

@media (max-width: 500px) {
  .step-label { display: none; }
  .step-tab { justify-content: center; }
}

/* Contenido de Cada Paso */
.step-panel {
  animation: fadeIn 180ms ease-out;
}
.step-panel[hidden] { display: none; }

.step-panel-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.step-badge {
  font-size: max(0.725rem,12px);
  font-weight: 800;
  background: var(--brand-soft);
  color: var(--brand-2);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

/* Agrupaciones y Campos */
.form-group {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.form-group legend {
  font-size: max(0.75rem,12px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.75rem;
  padding: 0;
}

/* Selector de Rol: Control Segmentado Limpio */
.roles {
  display: inline-flex;
  width: 100%;
  background: var(--bg-soft);
  padding: 4px;
  border-radius: var(--radius);
  gap: 4px;
}
.role {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.85rem;
  border-radius: 7px;
  cursor: pointer;
  font-size: max(0.85rem,12px);
  font-weight: 600;
  color: var(--muted);
  transition: all var(--ease);
  user-select: none;
  text-align: center;
}
.role input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.role:hover {
  color: var(--ink);
}
.role:has(input:checked) {
  background: var(--bg-elev);
  color: var(--brand-2);
  font-weight: 750;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
html[data-theme="dark"] .role:has(input:checked) {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

@media (max-width: 540px) {
  .roles { flex-direction: column; }
}

.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 580px) {
  .row-2 { grid-template-columns: 1fr; }
}

.field-wrap {
  margin-bottom: 1rem;
}
.field {
  display: block;
  font-size: max(0.85rem,12px);
  font-weight: 700;
  color: var(--ink);
}
.req-badge {
  color: var(--req);
  font-weight: 600;
  font-size: max(0.775rem,12px);
}
.field-hint {
  font-size: max(0.8rem,12px);
  color: var(--muted);
  margin: 0.4rem 0 0;
  line-height: 1.5;
}

/* Inputs & Controles de Formulario */
input[type="text"],
input[type="date"],
textarea,
select {
  width: 100%;
  font-family: inherit;
  font-weight: 500;
  box-shadow: var(--shadow-xs);
}
input[type="text"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px var(--accent-ring);
  background: var(--bg-elev);
}
input.valid-rut {
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310B981'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 18px 18px;
  padding-right: 2.5rem;
}
textarea {
  resize: vertical;
  line-height: 1.5;
}

.field-error {
  color: var(--danger);
  font-size: max(0.785rem,12px);
  font-weight: 650;
  margin: 0.35rem 0 0;
}
.field-error[hidden] { display: none; }
input.has-error, textarea.has-error {
  border-color: var(--danger);
  background-color: var(--danger-soft);
}

/* Sección de Autorización del Propietario (Línea de acento sin caja anidada) */
.owner-authorization-section {
  border-left: 2px solid var(--brand-2);
  padding-left: 1.25rem;
  margin: 1.25rem 0;
}
.owner-payments-confirm {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 1rem;
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.owner-payments-confirm input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
}

/* Wizard Action Buttons */
.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: 0.925rem;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}
.btn:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--brand-2);
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
}
.btn-primary:hover {
  background: #1E40AF;
  text-decoration: none;
}
.btn-secondary {
  border-color: var(--line);
}
.btn-secondary:hover {
  color: var(--ink);
  text-decoration: none;
}
.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-muted);
}
.btn-ghost:hover {
  background: var(--bg-soft);
  color: var(--ink);
  text-decoration: none;
}
.btn-block {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Paso 4: Revisión */
.review-box {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.review-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
  color: var(--ink);
}
.review-list {
  margin: 0 0 1.5rem;
  padding-left: 1.35rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.65;
}
.review-list li { margin-bottom: 0.5rem; }
.actions-review {
  flex-wrap: wrap;
}

/* ==========================================================================
   Panel Derecho: Hoja Notarial Oficial
   Flota libre en el escritorio con elevación de documento físico auténtico
   ========================================================================== */
.preview-pane {
  position: sticky;
  top: 5.5rem;
}
.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  padding: 0 0.25rem;
}
.preview-doc-title {
  font-size: max(0.775rem,12px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.preview-tag-format {
  font-size: max(0.725rem,12px);
  font-weight: 700;
  color: var(--ink-muted);
  background: var(--bg-soft);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.preview-toolbar-sub {
  margin-top: 1.75rem;
}

/* Hoja Legal A4 Realista */
.letter-paper {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1;
  box-shadow: var(--shadow-paper);
  font-family: var(--serif);
  font-size: 0.975rem;
  line-height: 1.7;
  min-height: 540px;
  position: relative;
  overflow: hidden;
}

/* Encabezado y Cuerpo del Documento */
.letter-head {
  text-align: center;
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 2px solid #0F172A;
  padding-bottom: 0.65rem;
  margin-bottom: 1.35rem;
  color: #0F172A !important;
}
.letter-meta {
  text-align: right;
  font-style: italic;
  font-size: 0.875rem;
  margin-bottom: 1.35rem;
  color: #334155 !important;
}
.letter-body p {
  margin: 0 0 1rem;
  /* Sin justificar. Con la medida de esta caja y los nombres y direcciones en
     negrita, el justificado abria huecos enormes entre palabras y el documento
     se leia con «rios» blancos atravesandolo. El guionado automatico no lo
     arregla: el navegador no parte palabras en español, asi que la version con
     hyphens:auto salia identica. Alineado a la izquierda, el espaciado queda
     parejo. */
  text-align: left;
  color: #0F172A !important;
}
.letter-body strong {
  font-weight: 750;
}
.letter-signatures {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  text-align: center;
  font-family: var(--font);
  font-size: max(0.8rem,12px);
  color: #0F172A !important;
}
.sig-line {
  border-top: 1px solid #0F172A;
  padding-top: 0.5rem;
}
.sig-box-notary {
  min-height: 4.5rem;
}

/* ==========================================================================
   Simulador de Viabilidad Notarial Anti-Rechazo (Estructura Editorial Limpia)
   CERO CAJAS DENTRO DE CAJAS
   ========================================================================== */
.checklist-section {
  margin: 4.5rem 0 3rem;
  border-top: 1px solid var(--line);
  padding-top: 3.5rem;
}

.simulador-inner {
  width: 100%;
}

.simulador-head {
  margin-bottom: 2rem;
}
.kicker-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: max(0.725rem,12px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: 0.75rem;
}
.live-pulse {
  width: 7px;
  height: 7px;
  background: #10B981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
  animation: pulseGlow 2s infinite;
}
@keyframes pulseGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

.simulador-head h2 {
  font-size: clamp(1.5rem, 2.8vw, 1.85rem);
  font-weight: 850;
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.simulador-subhead {
  font-size: 0.975rem;
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 720px;
  margin: 0;
}

/* Barra de Perfiles: Segmentado Minimalista */
.simulador-profile-row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.profile-switch-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.switch-label {
  font-size: max(0.8rem,12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.switch-segmented {
  display: inline-flex;
  background: var(--bg-soft);
  border-radius: 8px;
}
.switch-btn {
  border: none;
  background: transparent;
  font-size: max(0.85rem,12px);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.switch-btn:hover {
  color: var(--ink);
}
.switch-btn.active {
  background: var(--bg-elev);
  color: var(--ink);
  font-weight: 750;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
html[data-theme="dark"] .switch-btn.active {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Cuadrícula: Filas Editoriales vs Cockpit de Diagnóstico */
.simulador-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 880px) {
  .simulador-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.list-col-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: max(0.825rem,12px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
.list-col-sub {
  font-size: max(0.775rem,12px);
  font-weight: 500;
  color: var(--muted);
  text-transform: none;
}

/* Filas Editoriales de Requisitos (Separadas SOLO por línea de cabello) */
.editorial-checklist {
  display: flex;
  flex-direction: column;
}
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 0.25rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--ease);
  user-select: none;
}
.check-row:hover {
  background: rgba(0, 0, 0, 0.015);
}
html[data-theme="dark"] .check-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.check-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  background: var(--bg-elev);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition: all var(--ease);
}
.check-row input[type="checkbox"]:checked {
  background: #10B981;
  border-color: #10B981;
}
.check-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.check-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.check-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.check-name {
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--ink);
}
.check-desc {
  font-size: max(0.825rem,12px);
  color: var(--ink-muted);
  line-height: 1.5;
}

/* Badges de Severidad */
.check-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: max(0.675rem,12px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.tag-req {
  background: var(--brand-soft);
  color: var(--brand-2);
}
.tag-crit {
  background: rgba(220, 38, 38, 0.08);
  color: #DC2626;
}
.tag-warn {
  background: rgba(217, 119, 6, 0.08);
  color: #D97706;
}

/* Cockpit de Diagnóstico Ejecutivo */
.diagnostic-cockpit {
  background: var(--bg-elev);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  position: sticky;
  top: 5.5rem;
}
.cockpit-kicker {
  font-size: max(0.75rem,12px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  display: block;
  margin-bottom: 0.5rem;
}
.cockpit-score-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.cockpit-number {
  font-size: 1.85rem;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.cockpit-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: max(0.8rem,12px);
  font-weight: 750;
}
.cockpit-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.cockpit-bar-track {
  width: 100%;
  height: 8px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.cockpit-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1), background-color 320ms ease;
}

.cockpit-desc {
  font-size: max(0.85rem,12px);
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0;
}

.cockpit-alerts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  background: var(--bg-soft);
  border-radius: 6px;
  font-size: max(0.8rem,12px);
  line-height: 1.45;
  color: var(--ink);
  border-left: 3px solid #DC2626;
}
.alert-item.alert-warning {
  border-left-color: #D97706;
}
.alert-item.alert-success {
  border-left-color: #10B981;
}
.alert-item strong {
  font-weight: 700;
}

/* Estados Dinámicos del Cockpit */
.diagnostic-cockpit.status-danger {
  border-left: 3px solid #DC2626;
}
.diagnostic-cockpit.status-danger .cockpit-bar-fill { background: #DC2626; }
.diagnostic-cockpit.status-danger .cockpit-status-pill {
  background: rgba(220, 38, 38, 0.08);
  color: #B91C1C;
}
html[data-theme="dark"] .diagnostic-cockpit.status-danger .cockpit-status-pill {
  background: rgba(220, 38, 38, 0.18);
  color: #FCA5A5;
}
.diagnostic-cockpit.status-danger .cockpit-dot { background: #DC2626; }

.diagnostic-cockpit.status-warning {
  border-left: 3px solid #D97706;
}
.diagnostic-cockpit.status-warning .cockpit-bar-fill { background: #D97706; }
.diagnostic-cockpit.status-warning .cockpit-status-pill {
  background: rgba(217, 119, 6, 0.08);
  color: #B45309;
}
html[data-theme="dark"] .diagnostic-cockpit.status-warning .cockpit-status-pill {
  background: rgba(217, 119, 6, 0.18);
  color: #FCD34D;
}
.diagnostic-cockpit.status-warning .cockpit-dot { background: #D97706; }

.diagnostic-cockpit.status-success {
  border-left: 3px solid #10B981;
}
.diagnostic-cockpit.status-success .cockpit-bar-fill { background: #10B981; }
.diagnostic-cockpit.status-success .cockpit-status-pill {
  background: rgba(16, 185, 129, 0.08);
  color: #047857;
}
html[data-theme="dark"] .diagnostic-cockpit.status-success .cockpit-status-pill {
  background: rgba(16, 185, 129, 0.18);
  color: #6EE7B7;
}
.diagnostic-cockpit.status-success .cockpit-dot { background: #10B981; }

/* Compatibilidad para páginas internas existentes (Checklist / Guía) */
.simulador-card {
  background: transparent;
}
.simulador-controls {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.toggle-segmented {
  display: inline-flex;
  background: var(--bg-soft);
  border-radius: 8px;
}
.toggle-pill {
  border: none;
  background: transparent;
  font-size: max(0.85rem,12px);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.toggle-pill.active {
  background: var(--bg-elev);
  color: var(--ink);
  font-weight: 750;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.simulador-body-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 880px) {
  .simulador-body-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.checklist-items-stack {
  display: flex;
  flex-direction: column;
}
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 0.25rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--ease);
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
}
.check-item:hover { background: rgba(0, 0, 0, 0.015); }
.check-text { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.check-title-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.result-card {
  background: var(--bg-elev);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  position: sticky;
  top: 5.5rem;
}
.result-card.status-danger { border-left: 3px solid #DC2626; }
.result-card.status-danger .meter-bar-fill { background: #DC2626; }
.result-card.status-danger .result-status-badge { background: rgba(220, 38, 38, 0.08); color: #B91C1C; }
.result-card.status-warning { border-left: 3px solid #D97706; }
.result-card.status-warning .meter-bar-fill { background: #D97706; }
.result-card.status-warning .result-status-badge { background: rgba(217, 119, 6, 0.08); color: #B45309; }
.result-card.status-success { border-left: 3px solid #10B981; }
.result-card.status-success .meter-bar-fill { background: #10B981; }
.result-card.status-success .result-status-badge { background: rgba(16, 185, 129, 0.08); color: #047857; }
.result-meter-label { display: flex; align-items: center; justify-content: space-between; font-size: max(0.75rem,12px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.score-number { font-size: 1.85rem; font-weight: 850; letter-spacing: -0.03em; color: var(--ink); }
.meter-bar-track { width: 100%; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.meter-bar-fill { height: 100%; border-radius: 999px; transition: width 320ms ease; }
.result-status-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; border-radius: 6px; font-size: max(0.8rem,12px); font-weight: 750; }
.status-indicator { width: 8px; height: 8px; border-radius: 50%; }
.result-card.status-danger .status-indicator { background: #DC2626; }
.result-card.status-warning .status-indicator { background: #D97706; }
.result-card.status-success .status-indicator { background: #10B981; }
.result-desc { font-size: max(0.85rem,12px); color: var(--ink-muted); line-height: 1.5; margin: 0; }
.result-alerts-list { display: flex; flex-direction: column; gap: 0.6rem; }

/* ==========================================================================
   Secciones Editoriales Inferiores (Below-the-fold)
   CERO CAJAS: Tipografía editorial, líneas divisorias limpias
   ========================================================================== */
.editorial-section {
  margin: 4.5rem 0;
}
#guias-mudanza { scroll-margin-top: 7rem; }
/* Al cambiar de paso, el título no queda bajo la cabecera fija. */
#formTitle { scroll-margin-top: 6rem; }
/* «Siguiente» queda al mismo lado en todos los pasos, aunque no haya «Atrás». */
#btnNext { margin-left: auto; }
.section-title {
  font-size: 1.5rem;
  font-weight: 850;
  letter-spacing: -0.025em;
  margin: 0 0 1.5rem;
  color: var(--ink);
}

/* Acceso temprano a las guías: visible sin competir con el asistente. */
.guide-shortcuts {
  margin: 1.35rem 0 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.guide-shortcuts-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}
.guide-shortcuts-head strong { color: var(--ink); font-size: .95rem; }
.guide-shortcuts-head a { color: var(--brand-2); font-size: max(.82rem,12px); font-weight: 750; }
.guide-shortcuts-list { display: flex; flex-wrap: wrap; gap: .55rem; }
.guide-shortcuts-list a {
  padding: .48rem .72rem;
  border: 1px solid var(--line);
  color: var(--ink-muted);
  background: var(--bg-elev);
  font-size: max(.8rem,12px);
  font-weight: 650;
  text-decoration: none;
}
.guide-shortcuts-list a:hover,
.guide-shortcuts-list a:focus-visible {
  color: var(--brand-2);
  border-color: var(--brand-2);
  text-decoration: none;
}
@media (max-width: 620px) {
  .guide-shortcuts-head { align-items: flex-start; }
  .guide-shortcuts-list { display: grid; grid-template-columns: 1fr 1fr; }
  .guide-shortcuts-list a { border-radius: var(--radius-sm); }
}
@media (max-width: 360px) {
  .guide-shortcuts-list { grid-template-columns: 1fr; }
}

/* Aviso Importante Editorial */
.importante-editorial {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.importante-editorial summary {
  padding: 1.15rem 1.4rem;
  font-weight: 800;
  font-size: 1.025rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  color: var(--ink);
}
.importante-editorial summary::-webkit-details-marker { display: none; }
.importante-editorial summary::after {
  content: "↓";
  font-size: 1.15rem;
  transition: transform var(--ease);
}
.importante-editorial[open] summary::after { transform: rotate(180deg); }
.acc-body {
  padding: 0 1.4rem 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink-muted);
  line-height: 1.65;
}
.acc-body ul { padding-left: 1.35rem; margin: 1rem 0; }
.acc-body li { margin-bottom: 0.5rem; }

/* Próximos Pasos (Timeline Editorial sin contenedor de tarjeta) */
.pasos-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-top: 1rem;
}
@media (max-width: 768px) {
  .pasos-timeline { grid-template-columns: 1fr; gap: 1.25rem; }
}
.paso-item {
  border-top: 2px solid var(--line-strong);
  padding-top: 1.25rem;
}
.paso-num {
  font-size: 1.85rem;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: var(--brand-2);
  display: block;
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.paso-text {
  font-size: 0.925rem;
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 0;
}

/* Columnas Editoriales (Marco Legal / Declaración / Fiscalización) */
.editorial-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem;
}
@media (max-width: 800px) {
  .editorial-columns { grid-template-columns: 1fr; gap: 1.5rem; }
}
.editorial-col {
  border-top: 2px solid var(--line-strong);
  padding-top: 1.25rem;
}
.editorial-col h3 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.editorial-col p {
  margin: 0;
  font-size: 0.925rem;
  color: var(--ink-muted);
  line-height: 1.65;
}

/* Preguntas Frecuentes (Filas Limpias con Línea de Cabello) */
.faq {
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-bottom: 1px solid var(--line);
  border-top: none;
  border-left: none;
  border-right: none;
  box-shadow: none;
}
.faq-item summary {
  font-weight: 750;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  transition: color var(--ease);
}
.faq-item summary:hover {
  color: var(--brand-2);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--muted);
  transition: transform var(--ease);
}
.faq-item[open] summary::after {
  content: "−";
  color: var(--brand-2);
}
.faq-a {
  font-size: 0.95rem;
  color: var(--ink-muted);
  line-height: 1.65;
}
.faq-a p { margin: 0; }

/* Enlaces Temáticos (Silos Editoriales) */
.silo-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
@media (max-width: 768px) {
  .silo-links { grid-template-columns: 1fr; gap: 1rem; }
}
.silo-link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--ease);
}
.silo-link:hover {
  border-top-color: var(--brand-2);
  text-decoration: none;
}
.silo-link strong {
  font-size: 1rem;
  font-weight: 750;
  color: var(--brand-2);
}
.silo-link span {
  font-size: max(0.85rem,12px);
  color: var(--muted);
  line-height: 1.5;
}

/* Card General (Para contenido de texto en páginas internas como Guía) */
.card {
  background: var(--bg-elev);
}

/* ==========================================================================
   Footer Institucional Limpio
   ========================================================================== */
.site-footer {
}
.footer-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (max-width: 860px) {
  .footer-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer-row { grid-template-columns: 1fr; }
}

.footer-col h4 {
  font-size: max(0.825rem,12px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0 0 1.25rem;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-links a {
  font-size: 0.9rem;
}
.footer-links a:hover {  }

.footer-bottom {
  padding-top: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: max(0.85rem,12px);
  color: var(--muted);
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-nav {
  display: flex;
  gap: 1.25rem;
}
.footer-nav a {
}
.footer-nav a:hover {  }

/* ==========================================================================
   Search Modal (Ctrl + K)
   ========================================================================== */
.search-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 29, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 5rem 1rem 1rem;
}
.search-modal-backdrop.open { display: flex; }
.search-dialog {
  background: var(--bg-elev);
  width: min(600px, 100%);
  overflow: hidden;
  animation: modalScale 160ms ease-out;
}
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid var(--line);
}
.search-input-wrap svg { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; }
.search-input-wrap input {
  border: none !important;
  box-shadow: none !important;
  font-size: 1.05rem;
  padding: 0;
  background: transparent;
}
.search-results-list {
  max-height: 380px;
  overflow-y: auto;
  list-style: none;
  padding: 0.5rem;
  margin: 0;
}
.search-result-item a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.search-result-item a:hover,
.search-result-item a.focused {
  background: var(--brand-soft);
  color: var(--brand-2);
  text-decoration: none;
}
.search-result-title { font-weight: 750; font-size: 0.925rem; }
.search-result-desc { font-size: max(0.8rem,12px); color: var(--muted); }
.search-footer {
  padding: 0.75rem 1.4rem;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-size: max(0.775rem,12px);
  color: var(--muted);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 650;
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  opacity: 0;
  transform: translateY(12px);
  transition: all 180ms ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* Keyframes */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modalScale { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

/* ==========================================================================
   Print Engine (Carta Notarial Limpia Oficial)
   ========================================================================== */
@media print {
  @page {
    size: letter portrait;
    /* Cero a proposito: la banda que deja este margen es donde el navegador
       escribe su fecha, su titulo y la URL del archivo. Sin banda no los
       dibuja, y el usuario no tiene que desactivar nada en el dialogo. El
       margen real del documento lo pone el padding de cada hoja. */
    margin: 0;
  }
  *, *::before, *::after {
    color: #000000 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  html, body {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .no-print,
  .site-header,
  .top-gov-bar,
  .hero,
  .portada-titulo,
  .official-notice,
  .progress-bar-wrap,
  .mobile-only-tabs,
  .form-pane,
  .checklist-section,
  .editorial-section,
  .site-footer,
  .search-modal-backdrop,
  .analytics-consent,
  .toast,
  .preview-toolbar,
  .auth-wrap:not(.print-active) {
    display: none !important;
  }

  .layout {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .preview-pane {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
  }
  .letter-paper {
    /* El margen del documento vive aqui, no en @page: ver la nota de arriba. */
    padding: 1.5cm !important;
    page-break-after: avoid;
  }
  .letter-head {
    font-size: 14pt !important;
    border-bottom: 0 !important;
    margin-bottom: 1.2cm !important;
  }
  .letter-meta {
    font-size: 10pt !important;
    text-align: left !important;
    font-style: normal !important;
    margin-bottom: 1.2cm !important;
  }
  .letter-body p {
    font-size: 11pt !important;
    line-height: 1.6 !important;
    margin-bottom: 0.8cm !important;
  }
  .letter-signatures {
    margin-top: 3cm !important;
    display: grid !important;
    grid-template-columns: 45% 45% !important;
    justify-content: space-between !important;
    gap: 10% !important;
    text-align: center !important;
  }
  .sig-box {
    width: auto !important;
  }
  .sig-box-notary {
    min-height: 1.5cm !important;
  }
  .sig-line {
    border-top: 1pt solid #000 !important;
    padding-top: 0.2cm !important;
    font-size: 9pt !important;
  }
}

/* Visual direction: a calm documentation workspace with a distinctive route motif.
   This layer only changes presentation; the form, copy and printable document stay intact. */
@media screen {
  :root {
    --bg: #f5f3ed;
    --bg-elev: #fffefa;
    --bg-soft: #eceee8;
    --bg-well: #dce3dc;
    --bg-glass: rgba(255, 254, 250, .95);
    --ink: #152d36;
    --ink-muted: #40565c;
    --muted: #62757a;
    --line: #d9e1da;
    --line-light: #e8ede6;
    --line-strong: #b7c9bd;
    --brand: #153d43;
    --brand-2: #235d5e;
    --brand-gradient: linear-gradient(135deg, #153d43, #235d5e);
    --brand-soft: rgba(35, 93, 94, .1);
    --accent: #2b8067;
    --accent-2: #287a63;
    --accent-soft: rgba(43, 128, 103, .12);
    --accent-ring: rgba(35, 93, 94, .2);
    --info-bg: #e9f0eb;
    --info-ink: #245451;
    --info-line: #cbded4;
    --info-bar: #2a6a62;
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --serif: "Source Serif 4", Georgia, serif;
    --max: 1320px;
    --radius-sm: 9px;
    --radius: 16px;
    --radius-lg: 24px;
    --copper: #b65d42;
    --shadow-paper: 0 26px 55px -21px rgba(17, 48, 50, .24), 0 2px 8px rgba(17, 48, 50, .07);
  }
  html[data-theme="dark"] {
    --bg: #0e1d22;
    --bg-elev: #172a30;
    --bg-soft: #21343a;
    --bg-well: #30494a;
    --bg-glass: rgba(23, 42, 48, .96);
    --ink: #f4f5ed;
    --ink-muted: #d4ded7;
    --muted: #b0c2ba;
    --line: #3b5652;
    --line-light: #304742;
    --line-strong: #638074;
    --brand: #8dd1bd;
    --brand-2: #a0dec9;
    --brand-soft: rgba(141, 209, 189, .13);
    --accent: #73c3a0;
    --accent-2: #83d0ac;
    --accent-soft: rgba(115, 195, 160, .17);
    --accent-ring: rgba(160, 222, 201, .27);
    --info-bg: #1c3a39;
    --info-ink: #d6ece0;
    --info-line: #41665b;
    --info-bar: #82c6ad;
    --copper: #e29b7d;
  }
  html.accessible-contrast body { background-color: #000 !important; color: #fff !important; }
  html.accessible-contrast .official-notice { background: #0b0b0b; color: #fff; border-color: #fff; }
  html.accessible-contrast .notice-badge { color: #fff; }

  body { background-color: var(--bg); }
  .wrap { width: min(var(--max), calc(100% - 5rem)); }
  a:focus-visible, button:focus-visible, summary:focus-visible, .role:focus-within {
    outline: 3px solid var(--copper);
    outline-offset: 3px;
  }
  .top-gov-bar {
    background: #153d43;
    border: 0;
    padding: .55rem 0;
    font-size: max(.73rem,12px);
    letter-spacing: .015em;
  }
  .top-gov-chile-star { background: var(--copper); }
  .top-gov-row > div:last-child { opacity: .83; }
  .site-header {
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 26px -22px rgba(21, 61, 67, .38);
  }
  .header-row { min-height: 5.15rem; gap: 1.4rem; }
  .brand { gap: .75rem; font-size: 1.08rem; min-width: 0; }
  .brand-mark { width: 40px; height: 40px; border-radius: 12px; }
  .brand-text { letter-spacing: -.055em; }
  .brand-sub { letter-spacing: .085em; }
  .nav-desktop { gap: .18rem; }
  .nav-desktop a { border-radius: 9px; font-size: max(.84rem,12px); font-weight: 620; }
  .nav-desktop a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-2); }
  .btn-search-trigger { border-radius: 9px; background: transparent; }
  .icon-btn { width: 2.55rem; height: 2.55rem; border-radius: 9px; background: transparent; }
  .nav-drawer a { min-height: 3.4rem; }
  .nav-drawer a > span:first-child { display: inline-flex; align-items: center; gap: .8rem; }
  .nav-drawer a > span:first-child::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--copper); flex: 0 0 auto; }

  .hero-tool {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5.5rem);
    padding: clamp(2.5rem, 4vw, 3.5rem) 0 2.5rem;
  }
  .hero-copy { min-width: 0; }
  .kicker, .kicker-pill {
    color: var(--brand-2);
    letter-spacing: .13em;
    font-size: max(.7rem,12px);
    line-height: 1.4;
  }
  .kicker-bar { width: 13px; height: 3px; border-radius: 2px; background: var(--copper); }
  h1 {
    font-family: var(--serif);
    font-size: clamp(2.5rem, 4.2vw, 4.25rem);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -.046em;
    text-wrap: balance;
  }
  .hero-tool h1 { max-width: 10ch; margin: .25rem 0 1.45rem; }
  .hero-tool h1 span { color: var(--brand-2); }
  .hero-lead { line-height: 1.72; font-size: clamp(1rem, 1.22vw, 1.08rem); }
  .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.35rem; }
  .hero-art { position: relative; width: 100%; min-width: 0; max-width: 540px; justify-self: end; }
  .hero-art svg {
    width: 100%; height: auto; display: block;
    border-radius: 28px;
    box-shadow: 0 32px 62px -36px rgba(26, 60, 58, .32);
  }
  html[data-theme="dark"] .hero-art svg { filter: brightness(.86) saturate(.85); }
  .trust-badges { border-top-color: var(--line-strong); gap: .9rem 1.4rem; margin-top: 1.75rem; }
  .trust-item { font-size: max(.75rem,12px); line-height: 1.35; }
  .trust-item svg { width: 14px; height: 14px; color: var(--accent); }

  .official-notice {
    border: 1px solid var(--info-line);
    border-left: 4px solid var(--info-bar);
    padding: 1.1rem 1.35rem;
    border-radius: 0 11px 11px 0;
    margin: .1rem 0 3rem;
    font-size: .88rem;
  }
  .notice-badge { background: transparent; color: var(--info-ink); padding: 0; margin-top: .13rem; }
  .progress-bar-wrap { margin-bottom: 2.4rem; }
  .progress-meta { font-size: max(.78rem,12px); }
  .progress-track { height: 4px; background: var(--bg-well); }
  .progress-fill { background: var(--brand-2); }
  .layout { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2.3rem, 5vw, 5rem); }
  .form-pane-head h2, .simulador-head h2, .section-title {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -.032em;
  }
  .form-pane-head h2 { font-size: clamp(1.65rem, 2.3vw, 2.3rem); }
  .step-tabs { border-bottom-color: var(--line-strong); padding-bottom: .7rem; }
  .step-tab { padding: .6rem .45rem; }
  .step-tab[aria-selected="true"]::after { background: var(--copper); height: 3px; }
  .step-num { width: 27px; height: 27px; background: var(--bg-soft); }
  .step-tab[aria-selected="true"] .step-num { background: var(--brand); }
  .step-panel-title { margin: 2rem 0 1.7rem; font-size: 1.03rem; }
  .step-badge { background: transparent; color: var(--copper); padding: 0; font-size: max(.76rem,12px); }
  .form-group legend { color: var(--brand-2); }
  .roles, .switch-segmented, .toggle-segmented { border: 1px solid var(--line); background: var(--bg-soft); }
  .role:has(input:checked), .switch-btn.active, .toggle-pill.active { box-shadow: 0 2px 6px rgba(20, 59, 54, .1); color: var(--brand-2); }
  .switch-btn span { display: inline-flex; align-items: center; gap: .45rem; }
  .switch-btn span::before { content: ""; width: 6px; height: 6px; border: 1.5px solid currentColor; border-radius: 50%; flex: 0 0 auto; }
  .switch-btn.active span::before { background: var(--copper); border-color: var(--copper); }
  input[type="text"], input[type="date"], textarea, select {
    min-height: 3.05rem;
    border-color: var(--line-strong);
    box-shadow: none;
    border-radius: 9px;
  }
  input[type="text"]:focus, input[type="date"]:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px var(--accent-ring); }
  .btn { min-height: 2.9rem; border-radius: 9px; box-shadow: none; }
  .btn-primary { background: var(--brand); box-shadow: none; }
  .btn-primary:hover { background: #0d3035; }
  .btn-secondary, .btn-ghost { background: var(--bg-elev); }
  .preview-doc-title, .preview-tag-format { letter-spacing: .11em; }
  .preview-tag-format { background: var(--brand-soft); color: var(--brand-2); border: none; padding: .4rem .6rem; }
  .letter-paper { border-color: #e2e4dc; border-radius: 3px; box-shadow: var(--shadow-paper); }
  .checklist-section { margin-top: 5.5rem; padding-top: 4rem; border-top-color: var(--line-strong); }
  .simulador-head h2 { font-size: clamp(2rem, 3vw, 3rem); }
  .simulador-grid, .simulador-body-grid { gap: 4rem; }
  .check-row, .check-item { border-bottom-color: var(--line-strong); }
  .check-row:hover, .check-item:hover { background: var(--brand-soft); }
  .diagnostic-cockpit, .result-card {
    background: var(--bg-elev);
    border-radius: 17px;
    padding: 2rem;
    box-shadow: 0 17px 36px -31px rgba(13, 47, 49, .45);
  }
  .cockpit-number, .score-number { font-family: var(--serif); font-size: 2.8rem; font-weight: 600; }
  .editorial-section { margin: 6rem 0; }
  .section-title { font-size: clamp(1.9rem, 2.6vw, 2.7rem); }
  .paso-item, .editorial-col { border-top-color: var(--copper); }
  .paso-num { color: var(--copper); font-family: var(--serif); font-weight: 600; }
  .silo-link:hover { border-top-color: var(--copper); }
  .faq-item summary { font-weight: 650; }
  .card { box-shadow: none; border-color: var(--line); }
  .site-footer { background: #173c41; border: none; color: #eaf1e8; }
  .site-footer h4, .site-footer .brand, .site-footer .footer-bottom { color: #eaf1e8; }
  .site-footer a, .site-footer .footer-links a, .site-footer .footer-nav a { color: #d5e4da; }
  .site-footer a:hover { color: #fff; }
  .site-footer .footer-bottom { border-top-color: rgba(255,255,255,.18); }
  .footer-nav { flex-wrap: wrap; }

  @media (max-width: 1080px) {
    .wrap { width: min(var(--max), calc(100% - 3rem)); }
    .hero-tool { gap: 2rem; }
    .layout { gap: 2rem; }
  }
  @media (max-width: 900px) {
    .hero-tool { grid-template-columns: 1fr; padding: 3rem 0 2.7rem; }
    .hero-tool h1 { max-width: 14ch; }
    .hero-art { max-width: 640px; }
    .layout, .simulador-grid, .simulador-body-grid { grid-template-columns: minmax(0, 1fr); }
    .preview-pane, .letter-paper { min-width: 0; max-width: 100%; }
  }
  @media (max-width: 600px) {
    .wrap { width: calc(100% - 2.5rem); }
    .top-gov-bar { padding: .35rem 0; font-size: max(.65rem,12px); }
    .top-gov-row { flex-wrap: nowrap; }
    .top-gov-row > div:last-child { display: none; }
    .top-gov-chile-star { display: none; }
    .top-gov-badge { min-width: 0; line-height: 1.45; }
    .header-row { min-height: 4.2rem; gap: .5rem; }
    .brand { gap: .45rem; flex: 1 1 auto; }
    .brand-title-wrap { min-width: 0; }
    .brand-text { display: block; max-width: 100%; overflow-wrap: anywhere; line-height: 1.08; }
    .brand-mark { width: 32px; height: 32px; }
    .brand-text { font-size: .93rem; }
    .brand-sub { display: none; }
    .header-actions { gap: .25rem; flex: 0 0 auto; }
    .btn-search-trigger { padding: 0; width: 2.15rem; height: 2.15rem; justify-content: center; }
    .kbd-shortcut { display: none; }
    .icon-btn { width: 2.15rem; height: 2.15rem; border: 0; }
    #themeToggle { display: inline-flex; }
    .a11y-panel { right: -3rem; max-width: calc(100vw - 2.5rem); }
    .hero-tool { padding: 2.55rem 0 2rem; gap: 2rem; }
    h1 { font-size: clamp(2.55rem, 11vw, 3.5rem); }
    .hero-tool h1 { max-width: none; }
    .hero-lead { font-size: .98rem; line-height: 1.65; }
    .hero-actions .btn { flex: 1 1 100%; }
    .hero-art svg { border-radius: 18px; }
    .trust-badges { gap: .75rem 1rem; }
    .simulador-profile-row { gap: 1rem; }
    .profile-switch-wrap { width: 100%; min-width: 0; flex-direction: column; align-items: stretch; gap: .5rem; }
    .switch-segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-width: 0; }
    .switch-btn { min-width: 0; white-space: normal; justify-content: center; text-align: center; padding: .55rem .4rem; }
    .switch-btn span { min-width: 0; overflow-wrap: anywhere; }
    .official-notice { flex-direction: column; gap: .35rem; padding: .85rem 1rem; margin-bottom: 2.2rem; }
    .progress-meta { align-items: flex-start; gap: .5rem; }
    .progress-hint { text-align: right; }
    .step-tabs { gap: 0; }
    .step-tab { justify-content: center; padding: .5rem .15rem; }
    .step-label { display: none; }
    .letter-paper { padding: 1.55rem 1rem; }
    .diagnostic-cockpit, .result-card { padding: 1.3rem; }
    .editorial-section { margin: 4.5rem 0; }
    .site-footer { padding: 3rem 0 2rem; }
  }
  @media (max-width: 360px) {
    .wrap { width: calc(100% - 2rem); }
    .brand-text { font-size: max(.8rem,12px); }
    .brand-mark { width: 29px; height: 29px; }
    .header-actions { gap: 0; }
    .btn-search-trigger, .icon-btn { width: 1.85rem; height: 1.85rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-art *, .live-pulse { animation: none !important; }
  }
}
/* Rehabilitated WordPress URLs share the site's editorial design. */
.legacy-article { max-width: 860px; padding: 1.1rem 0 4rem; }
.legacy-article .breadcrumb-nav { margin-bottom: 1.5rem; font-size: max(.85rem,12px); color: var(--muted); overflow-wrap: anywhere; }
.legacy-article h1 { max-width: 18ch; }
.legacy-article-body { margin: 2rem 0; padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--line, #d7ddd8); border-radius: 18px; background: var(--bg-elev, #fff); }
.legacy-article-body h2 { margin: 2.25rem 0 .8rem; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.25; }
.legacy-article-body h2:first-child { margin-top: 0; }
.legacy-article-body p, .legacy-article-body li { line-height: 1.75; }
.legacy-article-body li + li { margin-top: .65rem; }
.legacy-article-body a { overflow-wrap: anywhere; }
.article-table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.article-table-wrap table { width: 100%; min-width: 480px; border-collapse: collapse; text-align: left; }
.article-table-wrap th, .article-table-wrap td {  border-bottom: 1px solid var(--line, #d7ddd8); vertical-align: top; }
.article-table-wrap thead { background: rgba(20, 74, 78, .08); }
.article-sources { margin-top: 2.5rem; padding: 1.4rem; border-left: 3px solid var(--accent, #10B981); background: rgba(20, 74, 78, .06); }
.article-sources h2 { margin-top: 0; }
.article-related { display: flex; flex-wrap: wrap; gap: .75rem; }
.article-related a { display: inline-block; padding: .7rem 1rem; border: 1px solid var(--line, #d7ddd8);  }
@media (max-width: 480px) { .legacy-article { padding-top: 1.5rem; } .legacy-article-body { border-radius: 12px; } }
.analytics-consent { position: fixed; z-index: 1000; inset: auto 0 0 0; max-width: none; margin: 0;  display: flex; align-items: center;  background: var(--bg-elev); color: var(--ink);   box-shadow: 0 -6px 18px rgba(15, 23, 42, .1); }
.analytics-consent p { display: inline; margin: 0; font-size: max(.8rem, 12px); line-height: 1.4; }
.analytics-consent-actions { display: flex; flex-wrap: nowrap;  margin-left: auto; }
.analytics-consent-actions button { white-space: nowrap;      font: inherit; cursor: pointer; }
.analytics-consent-actions button[data-consent="yes"] {    }
.analytics-consent-actions button:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 3px; }
@media (max-width: 620px) { .analytics-consent { display: block; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px)); } .analytics-consent-actions { margin-top: .4rem; } }

/* ==========================================================================
   Consistencia tipográfica y táctil (auditoría 320 px, 17-09-2026)
   Cuatro reglas globales, no parches por página.
   ========================================================================== */

/* 1. Títulos equilibrados: evita el corte en columna ("Declaración / Jurada /
      de Mudanza") repartiendo las líneas de forma pareja. */
h1, h2, h3, h4,
.hero-lead,
.faq-item summary,
.step-panel-title,
.section-title {
  text-wrap: balance;
}

/* 2. Párrafos sin líneas huérfanas colgando solas al final. */
p, li, dd, .paso-text, .check-desc, .faq-a p {
  text-wrap: pretty;
}

/* 3. Ninguna palabra larga desborda su caja en pantallas angostas
      (Investigaciones, Subsecretaría, documentodeviaje.mppre.gob.ve). */
h1, h2, h3, h4, p, li, td, th, summary, dd, dt, figcaption, .paso-text, .check-name {
  overflow-wrap: break-word;
}
a, code {
  overflow-wrap: anywhere;
}

/* 4. Objetivos táctiles cómodos en móvil: la auditoría encontró entre 16 y 33
      enlaces bajo 40 px de alto por página. */
@media (max-width: 640px) {
  .nav-drawer a,
  .footer-nav a,
  .guide-shortcuts-list a,
  .article-related a,
  .silo-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }
  .switch-btn {
    min-height: 44px;
  }
  /* La cabecera de columna del checklist quedaba en 95-193 px y partía el texto
     en jirones: a esta altura va en una sola columna. */
  .list-col-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
  .list-col-sub {
    width: 100%;
  }
}

/* 5. La barra superior normativa respira en pantallas muy angostas. */
@media (max-width: 400px) {
  .top-gov-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
  .top-gov-bar {
    line-height: 1.45;
  }
}

/* ==========================================================================
   Menú principal: un ítem nunca se parte en dos líneas
   El nav se mostraba desde 960 px sin `nowrap`, así que entre 960 y ~1400 px
   etiquetas como "Guía Ley 20.227" o "Aviso Legal" caían en dos renglones, y
   el resultado cambiaba de página en página según cuántos ítems tuviera.
   Ahora: o el ítem cabe completo, o se usa el menú de hamburguesa.
   ========================================================================== */
.nav-desktop a,
.brand-text,
.brand-sub {
  white-space: nowrap;
}
.nav-desktop {
  flex-wrap: nowrap;
}
.header-row .brand {
  flex: 0 0 auto;
}

/* ==========================================================================
   Navegación en tres silos (Mudanza · Salir de Chile · Ayuda)
   El menú plano crecía con cada trámite nuevo; agrupar mantiene la barra
   estable y refleja la estructura real del sitio.
   ========================================================================== */
.nav-group { position: relative; }
.nav-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-muted);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--ease);
}
.nav-group-btn:hover { color: var(--ink); background: var(--bg-soft); }
.nav-group-btn[aria-expanded="true"] { color: var(--brand-2); background: var(--bg-soft); }
.nav-group.is-current > .nav-group-btn { color: var(--brand-2); }
.nav-group-btn:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 2px; }
.nav-caret { font-size: 0.65em; opacity: 0.75; transition: transform var(--ease); }
.nav-group-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-menu {
  display: none;
  position: absolute;
  left: 0;
  background: var(--bg-elev);
  z-index: 120;
}
.nav-menu.open { display: block; }
.nav-menu a {
  display: block;
  color: var(--ink-muted);
  font-weight: 600;
  white-space: nowrap;
}
.nav-menu a:hover { color: var(--ink); background: var(--bg-soft); text-decoration: none; }
.nav-menu a[aria-current="page"] { color: var(--brand-2); background: var(--brand-soft, var(--bg-soft)); }
.nav-menu a:focus-visible { outline: 3px solid var(--brand-2); outline-offset: -2px; }

/* Grupos dentro del menú móvil: mismos silos, sin desplegables */
.drawer-group-title {
  display: block;
  margin: 1rem 0 0.15rem;
  padding: 0 0.15rem;
  font-size: max(0.68rem,12px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}
.nav-drawer .drawer-group-title:first-child { margin-top: 0.35rem; }

/* ==========================================================================
   Legibilidad de las guías
   Texto más grande y aireado: son páginas que se leen con prisa, muchas veces
   desde el teléfono y en una situación de apuro.
   ========================================================================== */
.guia-legible {
  font-size: 1.06rem;
  line-height: 1.72;
}
.guia-legible p,
.guia-legible li {
  font-size: 1.06rem;
  line-height: 1.72;
  max-width: 68ch;
}
.guia-legible li { margin-bottom: 0.55rem; }
.guia-legible h2 {
  font-size: 1.6rem;
  margin-top: 2.6rem;
  margin-bottom: 0.9rem;
}
.guia-legible h3 {
  font-size: 1.22rem;
  margin-top: 1.9rem;
  margin-bottom: 0.6rem;
}
.guia-legible .hero-lead { font-size: 1.16rem; line-height: 1.68; }
.guia-legible .faq-item summary { font-size: 1.02rem; }
.guia-legible .faq-a p { font-size: 1.02rem; }
.guia-legible table { font-size: 1rem; }
@media (max-width: 480px) {
  .guia-legible,
  .guia-legible p,
  .guia-legible li { font-size: 1.02rem; line-height: 1.7; }
  .guia-legible h2 { font-size: 1.38rem; margin-top: 2.1rem; }
  .guia-legible h3 { font-size: 1.14rem; }
  .guia-legible .hero-lead { font-size: 1.08rem; }
}

/* Resumen de apertura: lo esencial antes de entrar en detalle */
.resumen-clave {
  margin: 1.75rem 0 2.25rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand-2);
}
.resumen-clave h2 {
  margin: 0 0 0.85rem !important;
  font-size: 1.12rem !important;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.resumen-clave ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}
.resumen-clave li {
  margin: 0 !important;
  padding-left: 1.6rem;
  position: relative;
  font-size: 1.02rem !important;
  line-height: 1.6 !important;
}
.resumen-clave li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-2);
}
@media (max-width: 480px) {
  .resumen-clave { padding: 1.15rem 1.2rem; }
}

/* ==========================================================================
   Accesibilidad: texto agrandado (A+ / A++)
   Con el texto grande el menú de escritorio ya no cabe y terminaba montándose
   sobre el logotipo. El colapso dependía solo del ancho de pantalla; ahora
   también depende del tamaño de letra elegido.
   ========================================================================== */
html.font-lg .nav-desktop,
html.font-xl .nav-desktop {
  display: none;
}
html.font-lg .nav-toggle,
html.font-xl .nav-toggle {
  display: inline-flex;
}
html.font-lg .btn-search-trigger .search-label,
html.font-xl .btn-search-trigger .search-label,
html.font-lg .kbd-shortcut,
html.font-xl .kbd-shortcut {
  display: none;
}

/* El logotipo nunca se deja pisar ni se encoge por debajo de su contenido. */
.header-row {
  gap: 1rem;
}
.header-row .brand {
  min-width: 0;
  flex-shrink: 0;
}
.header-row .nav-desktop {
  min-width: 0;
}
.header-actions {
  flex-shrink: 0;
  margin-left: auto;
}

/* Con letra grande, la barra normativa y el pie se apilan en vez de apretarse. */
html.font-lg .top-gov-row,
html.font-xl .top-gov-row,
html.font-lg .footer-bottom,
html.font-xl .footer-bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

/* ==========================================================================
   Módulo de contingencia (home)
   No es una caja de aviso: es una pieza editorial con jerarquía propia.
   Titular en la serif del sitio, indicador de vigencia en vivo, y una columna
   de acción separada. Colores definidos por tema para garantizar contraste.
   ========================================================================== */
:root {
  --alerta-fondo: linear-gradient(180deg, #FFFFFF 0%, #F6FBF8 100%);
  --alerta-borde: #CFE9DC;
  --alerta-acento: #047857;
  --alerta-titulo: #062E23;
  --alerta-texto: #2F5648;
  --alerta-cta-fondo: #0B3D2E;
  --alerta-cta-tinta: #FFFFFF;
  --alerta-cta-hover: #06281E;
  --alerta-sello-fondo: #0B3D2E;
  --alerta-sello-tinta: #E6F7EF;
}
html[data-theme="dark"] {
  --alerta-fondo: linear-gradient(180deg, #11241F 0%, #0C1A18 100%);
  --alerta-borde: #1F4438;
  --alerta-acento: #34D399;
  --alerta-titulo: #EAFBF3;
  --alerta-texto: #A7C6B9;
  --alerta-cta-fondo: #34D399;
  --alerta-cta-tinta: #04241A;
  --alerta-cta-hover: #6EE7B7;
  --alerta-sello-fondo: rgba(52, 211, 153, 0.14);
  --alerta-sello-tinta: #6EE7B7;
}

.alerta-vigente {
  position: relative;
  margin: 1.75rem 0 0.5rem;
  background: var(--alerta-fondo);
  border: 1px solid var(--alerta-borde);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* Filete superior: el detalle que distingue una pieza diseñada de una caja */
.alerta-vigente::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  background: linear-gradient(90deg, var(--alerta-acento) 0%, var(--alerta-acento) 32%, transparent 100%);
}

.alerta-vigente-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.alerta-vigente-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  font-size: max(0.72rem,12px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--alerta-acento);
}
.alerta-vigente-dot {
  position: relative;
  width: 7px;
  height: 7px;
  background: var(--alerta-acento);
  flex: 0 0 auto;
}
.alerta-vigente-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1.5px solid var(--alerta-acento);
  opacity: 0.55;
  animation: alertaLatido 2.6s ease-out infinite;
}
@keyframes alertaLatido {
  0%   { transform: scale(0.72); opacity: 0.6; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .alerta-vigente-dot::after { animation: none; opacity: 0.35; }
}

.alerta-vigente-title {
  margin: 0 0 0.6rem;
  font-family: var(--serif);
  font-size: 1.62rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--alerta-titulo);
  text-wrap: balance;
}
.alerta-vigente-text {
  margin: 0;
  max-width: 62ch;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--alerta-texto);
}
.alerta-vigente-text strong { color: var(--alerta-titulo); font-weight: 700; }

.alerta-vigente-action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  min-width: 232px;
}
.alerta-vigente-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  min-height: 48px;
  padding: 0.85rem 1.3rem;
  background: var(--alerta-cta-fondo);
  color: var(--alerta-cta-tinta);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-sm);
  transition: background var(--ease), transform var(--ease);
}
.alerta-vigente-cta:hover {
  background: var(--alerta-cta-hover);
  color: var(--alerta-cta-tinta);
  text-decoration: none;
  transform: translateY(-1px);
}
.alerta-vigente-cta:focus-visible {
  outline: 3px solid var(--alerta-acento);
  outline-offset: 3px;
}
.alerta-vigente-cta svg { flex: 0 0 auto; transition: transform var(--ease); }
.alerta-vigente-cta:hover svg { transform: translateX(3px); }

.alerta-vigente-meta {
  font-size: max(0.79rem,12px);
  line-height: 1.45;
  color: var(--alerta-texto);
  text-align: center;
}

/* Tablet: la acción pasa debajo, a lo ancho */
@media (max-width: 900px) {
  .alerta-vigente-inner {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    padding: 1.5rem 1.55rem;
  }
  .alerta-vigente-action { min-width: 0; }
  .alerta-vigente-title { font-size: 1.42rem; }
}

/* Teléfono */
@media (max-width: 480px) {
  .alerta-vigente-inner { padding: 1.3rem 1.2rem; gap: 1.25rem; }
  .alerta-vigente-title { font-size: 1.24rem; }
  .alerta-vigente-text { font-size: 0.94rem; }
  .alerta-vigente-cta { justify-content: center; font-size: 0.92rem; }
  .alerta-vigente-meta { text-align: left; }
}

/* Con el texto agrandado, la pieza se apila siempre */
html.font-lg .alerta-vigente-inner,
html.font-xl .alerta-vigente-inner {
  grid-template-columns: 1fr;
}
html.font-lg .alerta-vigente-action,
html.font-xl .alerta-vigente-action {
  min-width: 0;
}

/* ==========================================================================
   Contraste del botón primario en modo oscuro
   En oscuro --brand-2 pasa a #60A5FA (azul claro) y el botón forzaba texto
   blanco: alrededor de 2:1, muy por debajo del mínimo AA de 4,5:1.
   Sobre un fondo claro, la tinta va oscura.
   ========================================================================== */
html[data-theme="dark"] .btn-primary {
}
html[data-theme="dark"] .btn-primary:hover {
}

/* ==========================================================================
   ==========================================================================
   SISTEMA VISUAL v0.6 — "SaaS oscuro premium"
   Capa de producto sobre el sistema base. Redefine superficies, tipografía,
   profundidad y estados. El modo oscuro es el protagonista; el claro mantiene
   la misma gramática con tinta invertida.
   ==========================================================================
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
html[data-theme="dark"] {
  --bg: #07090C;
  --bg-elev: #0E1116;
  --bg-soft: #141920;
  --bg-well: #0A0D11;
  --bg-glass: rgba(7, 9, 12, 0.72);

  --ink: #F3F6F8;
  --ink-muted: #AEB9C4;
  --muted: #7C8896;

  --line: rgba(255, 255, 255, 0.075);
  --line-light: rgba(255, 255, 255, 0.045);
  --line-strong: rgba(255, 255, 255, 0.14);

  --accent: #10B981;
  --accent-2: #34D399;
  --accent-soft: rgba(16, 185, 129, 0.12);
  --accent-ring: rgba(16, 185, 129, 0.34);
  --brand-2: #34D399;

  --sombra-borde: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 18px 40px -12px rgba(0, 0, 0, 0.72);
  --shadow-lg: 0 32px 64px -18px rgba(0, 0, 0, 0.8);
  --halo: 0 0 0 1px rgba(16, 185, 129, 0.28), 0 8px 32px -8px rgba(16, 185, 129, 0.28);

  --superficie: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0) 58%);
}
html:not([data-theme="dark"]) {
  --bg: #FBFCFD;
  --bg-elev: #FFFFFF;
  --bg-soft: #F4F6F8;
  --line: rgba(9, 18, 26, 0.09);
  --line-strong: rgba(9, 18, 26, 0.16);
  --sombra-borde: 0 0 0 1px rgba(9, 18, 26, 0.05);
  --shadow-sm: 0 2px 8px rgba(9, 18, 26, 0.05);
  --shadow: 0 10px 26px -10px rgba(9, 18, 26, 0.12);
  --shadow-md: 0 20px 44px -16px rgba(9, 18, 26, 0.16);
  --shadow-lg: 0 34px 66px -22px rgba(9, 18, 26, 0.2);
  --halo: 0 0 0 1px rgba(16, 185, 129, 0.3), 0 10px 30px -10px rgba(16, 185, 129, 0.24);
  --superficie: linear-gradient(180deg, rgba(9,18,26,0.018) 0%, rgba(9,18,26,0) 60%);
}

/* --- 2. Lienzo: malla de luz detrás del contenido ----------------------- */
body {
  background-color: var(--bg);
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 78% -12%, rgba(16, 185, 129, 0.10), transparent 62%),
    radial-gradient(48rem 34rem at 6% 4%, rgba(52, 211, 153, 0.06), transparent 58%);
}
html:not([data-theme="dark"]) body::before { opacity: 0.55; }
body > * { position: relative; z-index: 1; }

/* --- 3. Tipografía de producto ----------------------------------------- */
h1, .hero h1 {
  letter-spacing: -0.032em;
  line-height: 1.04;
  font-weight: 800;
}
h2 { letter-spacing: -0.022em; font-weight: 750; }
h3 { letter-spacing: -0.015em; }
.hero h1 {  }
.kicker {
  font-size: max(0.7rem,12px);
  letter-spacing: 0.16em;
  font-weight: 800;
}

/* --- 4. Superficies: tarjetas con borde luminoso y profundidad ---------- */
.card,
.simulador-card,
.result-card,
.form-pane,
.preview-pane,
.diagnostic-cockpit,
.editorial-section,
.checklist-section,
.a11y-panel,
.search-dialog,
.nav-menu {
  background-color: var(--bg-elev);
  background-image: var(--superficie);
  border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--sombra-borde);
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.card:hover,
.simulador-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md), var(--sombra-borde);
}

/* --- 5. Cabecera: vidrio real ------------------------------------------ */
.site-header {
  background: var(--bg-glass);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.top-gov-bar {
  border-bottom: 1px solid var(--line);
}

/* --- 6. Botones -------------------------------------------------------- */
.btn {
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .alerta-vigente-cta {
  background: linear-gradient(180deg, #34D399 0%, #10B981 100%);
  color: #032218 !important;
  box-shadow: var(--halo);
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .alerta-vigente-cta:hover {
  background: linear-gradient(180deg, #6EE7B7 0%, #34D399 100%);
  color: #032218 !important;
}
html:not([data-theme="dark"]) .btn-primary {
  background: linear-gradient(180deg, #0B3D2E 0%, #072A20 100%);
  color: #FFFFFF !important;
  box-shadow: var(--shadow-sm);
}
html:not([data-theme="dark"]) .btn-primary:hover {
  background: linear-gradient(180deg, #11543F 0%, #0B3D2E 100%);
}
.btn-secondary {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.btn-secondary:hover {
  background: var(--bg-soft);
  border-color: var(--accent);
}

/* --- 7. Campos de formulario ------------------------------------------- */
input[type="text"], input[type="tel"], input[type="email"], input[type="date"],
select, textarea {
  background: var(--bg-well, var(--bg-soft));
  border: 1px solid var(--line-strong);
  color: var(--ink);
  transition: border-color var(--ease), box-shadow var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* --- 8. Pasos del asistente -------------------------------------------- */
.step-tab {
  transition: all var(--ease);
}
.step-tab[aria-selected="true"],
.step-tab.active {
  box-shadow: var(--halo);
}

/* --- 9. Preguntas frecuentes ------------------------------------------- */
.faq-item {
  border: 1px solid var(--line);
  background: var(--bg-elev);
  transition: border-color var(--ease);
}
.faq-item:hover { border-color: var(--line-strong); }
.faq-item[open] {
  border-color: var(--accent-ring);
  box-shadow: var(--shadow-sm);
}
.faq-item summary {  }
.faq-a {  }

/* --- 10. Pie ------------------------------------------------------------ */
.site-footer {
}

/* --- 11. Foco visible coherente en todo el sitio ------------------------ */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- 12. Aparición al entrar en pantalla -------------------------------- */
.revelar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1), transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.revelar.visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* La hoja impresa no hereda nada de esta capa */
@media print {
  body::before { display: none; }
  .revelar { opacity: 1 !important; transform: none !important; }
  .card, .faq-item, .site-footer { box-shadow: none !important; background-image: none !important; }
}

/* ==========================================================================
   SISTEMA VISUAL v0.6.1 — Geometría recta y más aire
   Las esquinas redondeadas suavizaban la pieza y la acercaban a una plantilla
   genérica. Geometría recta: más técnica, más seria, y deja que el orden y el
   espacio hagan el trabajo. Además, todo respira más.
   ========================================================================== */

/* --- 1. Radios a cero (lo circular sigue circular) ---------------------- */
:root,
html[data-theme="dark"],
html:not([data-theme="dark"]) {
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
}
.card, .simulador-card, .result-card, .form-pane, .preview-pane,
.diagnostic-cockpit, .editorial-section, .checklist-section, .a11y-panel,
.search-dialog, .nav-menu, .faq-item, .btn, .btn-primary, .btn-secondary,
.alerta-vigente, .alerta-vigente-cta, .notice-badge, .step-tab, .switch-btn,
.toggle-pill, .check-item, .letter-paper, .article-table-wrap, .kbd-shortcut,
.icon-btn, .btn-search-trigger, .req-badge, .search-result-item, .resumen-clave,
.official-notice, .article-sources, .article-related a, .silo-link, .top-gov-badge,
input[type="text"], input[type="tel"], input[type="email"], input[type="date"],
select, textarea {
  border-radius: 0 !important;
}
/* Lo que sí es circular por naturaleza */
.alerta-vigente-dot, .alerta-vigente-dot::after, .cockpit-dot,
.step-num, .paso-num, .live-pulse, .brand-mark {
  border-radius: 50% !important;
}
.brand-mark { border-radius: 0 !important; }
.step-num { border-radius: 50% !important; }

/* --- 2. Aire: los componentes dejan de ir apretados --------------------- */
.card,
.simulador-card,
.editorial-section,
.checklist-section {
  padding: 2.4rem 2.2rem;
}
.form-pane,
.preview-pane {
}
.resumen-clave { padding: 1.9rem 2rem; }
.alerta-vigente-inner { padding: 2.1rem 2.2rem; gap: 2.5rem; }

/* Campos más altos y con más respiro interno */
input[type="text"], input[type="tel"], input[type="email"], input[type="date"],
select, textarea {
  min-height: 52px;
  padding: 0.85rem 1rem;
  font-size: 1rem;
}
.field, .form-group { margin-bottom: 1.6rem; }
.field-hint { margin-top: 0.5rem; }

/* Botones con más cuerpo */
.btn {
  min-height: 50px;
  padding: 0.85rem 1.6rem;
}

/* Pasos del asistente: separados, no amontonados */
.step-tabs {  }
.step-tab {  }
.step-panel {  }
.step-panel-title {  }

/* Selector de perfil con aire */
.switch-segmented, .toggle-segmented { gap: 0.3rem; padding: 0.3rem; }
.switch-btn, .toggle-pill { padding: 0.8rem 1.1rem; }

/* Ritmo vertical entre secciones */
main > section,
main > .card,
main > .editorial-section,
main > .checklist-section {
}
main > section:first-child,
main > .card:first-child { margin-top: 0; }
.section-title { margin-bottom: 1.9rem; }

/* Preguntas frecuentes menos comprimidas */
.faq-item { margin-bottom: 0.5rem; }
.faq-item summary { padding: 1.3rem 1.4rem; }
.faq-a { padding: 0 1.4rem 1.35rem; }

/* Tablas con celdas cómodas */
.article-table-wrap th,
.article-table-wrap td {
  padding: 1rem 1.15rem;
}

/* --- 3. En pantallas chicas, el aire se ajusta sin apretar -------------- */
@media (max-width: 640px) {
  .card, .simulador-card, .editorial-section, .checklist-section {
    padding: 1.7rem 1.35rem;
  }
  .form-pane, .preview-pane { padding: 1.6rem 1.25rem; }
  .resumen-clave { padding: 1.5rem 1.35rem; }
  .alerta-vigente-inner { padding: 1.6rem 1.35rem; gap: 1.5rem; }
  main > section, main > .card,
  main > .editorial-section, main > .checklist-section {  }
  .article-table-wrap th, .article-table-wrap td { padding: 0.85rem 0.9rem; }
}

/* --- 4. El filete de acento se mantiene recto --------------------------- */
.alerta-vigente::before { height: 4px; }

/* --- 5. Menú: también recto, y con más aire ----------------------------- */
.nav-group-btn,
.nav-menu,
.nav-menu a,
.nav-drawer,
.nav-drawer a,
.footer-nav a,
.guide-shortcuts-list a,
.a11y-btn-group button,
.search-input-wrap,
.search-results-list li,
.search-result-item {
  border-radius: 0 !important;
}
.nav-menu {
  padding: 0.35rem;
  min-width: 268px;
  top: calc(100% + 0.5rem);
}
.nav-menu a {
  padding: 0.8rem 0.95rem;
  font-size: 0.9rem;
}
.nav-group-btn {
  padding: 0.6rem 1rem;
}
.nav-desktop { gap: 0.15rem; }
.nav-drawer a { padding: 0.95rem 0.15rem; }
.icon-btn, .btn-search-trigger { border-radius: 0 !important; }

/* ==========================================================================
   La minuta no vive dentro de una caja
   El sistema base ya dejaba .preview-pane transparente; la capa v0.6 lo metió
   entre las superficies y le puso borde, fondo y relleno. Resultado: una caja
   alrededor del documento que le robaba ancho a la hoja. Se revierte, y la
   columna del documento gana espacio.
   ========================================================================== */
.preview-pane {
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}
.preview-pane:hover {
  border: none !important;
  box-shadow: none !important;
}

/* La hoja usa el ancho completo de su columna */
.letter-paper {
  width: 100%;
  padding: 3rem 2.6rem;
}

/* Reparto de la rejilla: el documento deja de ser la columna angosta */
.layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 2.6rem;
}
@media (max-width: 1200px) {
  .layout { gap: 2rem; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .letter-paper { padding: 2.2rem 1.5rem; }
}
@media (max-width: 480px) {
  .letter-paper { padding: 1.8rem 1.15rem; }
}

/* ==========================================================================
   Desambiguador de trámites (home)
   "Salvoconducto" es una consulta ambigua: cuatro trámites distintos comparten
   el nombre. Esta rejilla reparte al visitante al que le corresponde.
   ========================================================================== */
.selector-tramite {  }
.selector-tramite h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}
.selector-tramite-intro {
  margin: 0 0 2rem;
  max-width: 62ch;
  color: var(--ink-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}
.selector-tramite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.15rem;
}
.selector-tramite-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.7rem 1.55rem;
  background-color: var(--bg-elev);
  background-image: var(--superficie);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-sm);
  color: inherit;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
a.selector-tramite-item:hover {
  border-color: var(--line-strong);
  border-top-color: var(--accent-2);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}
a.selector-tramite-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.selector-tramite-item--nota {
  border-top-color: var(--line-strong);
  opacity: 0.86;
}
.selector-tramite-quien {
  font-size: max(0.68rem,12px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.selector-tramite-item--nota .selector-tramite-quien { color: var(--muted); }
.selector-tramite-titulo {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.22;
  color: var(--ink);
  text-wrap: balance;
}
.selector-tramite-desc {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.selector-tramite-ir {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--accent);
}

/* Presentación del asistente */
.asistente-intro {  }
.asistente-intro h2 { margin: 0 0 0.7rem; font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.asistente-intro p { margin: 0; max-width: 72ch; color: var(--ink-muted); line-height: 1.65; }

@media (max-width: 640px) {
  .selector-tramite { margin-top: 3rem; }
  .selector-tramite-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .selector-tramite-item { padding: 1.4rem 1.25rem; }
  .selector-tramite-titulo { font-size: 1.16rem; }
  .asistente-intro {  }
}

/* ==========================================================================
   Pasos del asistente: sin desborde y con tinta legible
   1) Los tabs tenían flex:1 pero sin min-width:0, así que no bajaban del ancho
      de su contenido y el cuarto paso se salía de la caja.
   2) El paso activo pintaba el número en blanco sobre --brand-2, que en modo
      oscuro es verde claro: alrededor de 1,7:1. Ilegible.
   ========================================================================== */
.step-tabs {
  flex-wrap: wrap;
  gap: 0.2rem 0.35rem;
}
.step-tab {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.8rem 0.75rem;
  box-shadow: none !important;
}
.step-label {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Tinta oscura sobre el verde: contraste alto en ambos temas */
.step-tab[aria-selected="true"] .step-num,
.step-tab.active .step-num {
  background: var(--accent-2);
  color: #04241A !important;
}
html:not([data-theme="dark"]) .step-tab[aria-selected="true"] .step-num,
html:not([data-theme="dark"]) .step-tab.active .step-num {
  background: #0B3D2E;
  color: #FFFFFF !important;
}
.step-tab[aria-selected="true"]::after { background: var(--accent); }

/* En pantallas angostas, dos pasos por fila antes que apretarlos */
@media (max-width: 720px) {
  .step-tab { flex: 1 1 44%; padding: 0.75rem 0.5rem; }
  .step-label { font-size: 0.86rem; }
}
@media (max-width: 380px) {
  .step-tab { flex: 1 1 100%; }
}

/* ==========================================================================
   Titulares: nunca partir una palabra por la mitad
   "overflow-wrap: break-word" en h1 cortaba "Salvoconduc / to". En un titular
   eso es inaceptable: primero se ajusta el tamaño, y la palabra se respeta.
   ========================================================================== */
h1, h2, h3, .selector-tramite-titulo, .alerta-vigente-title {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.hero h1 { font-size: clamp(2.05rem, 4vw, 3.3rem); }
@media (max-width: 400px) {
  .hero h1 { font-size: 1.85rem; }
}

/* ==========================================================================
   El asistente tampoco vive dentro de una caja
   Igual que la minuta: el panel del formulario era transparente en el sistema
   base y la capa v0.6 le puso fondo, borde y relleno. Sin la caja, el
   formulario respira y se lee como una herramienta, no como un widget.
   ========================================================================== */
.form-pane {
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}
.form-pane:hover { border: none !important; box-shadow: none !important; }

.form-pane-head { margin-bottom: 1.6rem; }

/* Los pasos pasan a ser una barra de proceso con peso propio */
.step-tabs {
  border-bottom: 1px solid var(--line-strong);
}

/* Las secciones del formulario se separan con línea, no con cajas anidadas */
.step-panel-title {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

/* Etiquetas más presentes y campos con más aire entre sí */
.field > label,
.form-group > label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.row-2 { gap: 1.25rem; }

/* La navegación del asistente se separa del contenido */
.wizard-nav {
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   Verificador de caso y checklist de recaudos (guía para venezolanos)
   El texto explica; estas dos piezas responden. Geometría recta, coherente
   con el resto del sistema.
   ========================================================================== */
.verificador {
  margin: 2.5rem 0;
  padding: 2rem 1.9rem;
  background-color: var(--bg-elev);
  background-image: var(--superficie);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-sm);
}
.verificador h2 { margin: 0 0 0.5rem !important; font-size: 1.45rem !important; }
.verificador-intro { margin: 0 0 1.6rem !important; color: var(--ink-muted); font-size: 0.97rem !important; }

.verif-progreso { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.8rem; }
.verif-progreso-texto, .recaudos-progreso-texto {
  font-size: max(0.76rem,12px); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--accent);
}
.verif-progreso-pista, .recaudos-progreso-pista {
  display: block; height: 3px; background: var(--line-strong); overflow: hidden;
}
.verif-progreso-barra, .recaudos-progreso-barra {
  display: block; height: 100%; width: 0%;
  background: var(--accent); transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.verif-pregunta { margin-bottom: 1.6rem; }
.verif-enunciado {
  display: flex; align-items: baseline; gap: 0.6rem;
  margin: 0 0 0.8rem !important; font-size: 1.02rem !important; font-weight: 700; color: var(--ink);
}
.verif-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; border-radius: 50% !important;
  background: var(--bg-soft); color: var(--ink-muted);
  font-size: max(0.74rem,12px); font-weight: 800; flex: 0 0 auto;
}
.verif-pregunta.respondida .verif-num { background: var(--accent); color: #04241A; }
.verif-opciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.verif-opcion {
  min-height: 46px; padding: 0.7rem 1.1rem;
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink);
  font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  transition: all var(--ease);
}
.verif-opcion:hover { border-color: var(--accent); background: var(--bg-soft); }
.verif-opcion:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.verif-opcion.elegida {
  background: var(--accent); border-color: var(--accent);
  color: #04241A; font-weight: 700;
}
html:not([data-theme="dark"]) .verif-opcion.elegida { background: #0B3D2E; border-color: #0B3D2E; color: #FFFFFF; }

.verif-resultado { display: grid; gap: 0.8rem; margin-top: 1.9rem; }
.verif-bloque { padding: 1.15rem 1.3rem; border-left: 4px solid var(--line-strong); background: var(--bg-soft); }
.verif-bloque--bueno { border-left-color: var(--accent); }
.verif-bloque--alerta { border-left-color: #F59E0B; }
.verif-bloque--neutro { border-left-color: var(--line-strong); }
.verif-bloque-titulo { margin: 0 0 0.35rem !important; font-size: 1rem !important; font-weight: 800; color: var(--ink); }
.verif-bloque-texto { margin: 0 !important; font-size: 0.94rem !important; line-height: 1.6 !important; color: var(--ink-muted); }

.verif-reiniciar {
  margin-top: 1.4rem; padding: 0.6rem 0; background: none; border: none;
  color: var(--accent); font: inherit; font-size: 0.88rem; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}
.verificador-nota { margin: 0.9rem 0 0 !important; font-size: max(0.82rem,12px) !important; color: var(--muted); }

/* Checklist de recaudos */
.recaudos { margin: 1.5rem 0 2rem; }
.recaudos-progreso { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.2rem; }
.recaudo {
  display: flex; align-items: flex-start; gap: 0.85rem;
  padding: 1rem 1.1rem; margin-bottom: 0.4rem;
  border: 1px solid var(--line); background: var(--bg-elev);
  cursor: pointer; transition: border-color var(--ease), background var(--ease);
}
.recaudo:hover { border-color: var(--line-strong); }
.recaudo input[type="checkbox"] {
  width: 21px; height: 21px; margin: 0.15rem 0 0; flex: 0 0 auto;
  accent-color: var(--accent); cursor: pointer;
}
.recaudo:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.recaudo:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.recaudo-texto { font-size: 0.97rem; line-height: 1.55; color: var(--ink-muted); }
.recaudo:has(input:checked) .recaudo-texto { color: var(--ink); }
.recaudos-nota { margin: 0.9rem 0 0 !important; font-size: max(0.82rem,12px) !important; color: var(--muted); }

@media (max-width: 480px) {
  .verificador { padding: 1.5rem 1.25rem; }
  .verif-opciones { flex-direction: column; }
  .verif-opcion { width: 100%; text-align: left; }
  .recaudo { padding: 0.9rem 0.95rem; }
}
@media print {
  .verificador, .verif-reiniciar { display: none !important; }
}

/* ==========================================================================
   Ruta guiada de 5 pasos
   Aprender el trámite por partes, con comprobación y avance visible.
   ========================================================================== */
.ruta { margin: 2.5rem 0 3rem; }
.ruta-cabecera { margin-bottom: 1.5rem; }
.ruta h2 { margin: 0 0 0.5rem !important; font-size: 1.55rem !important; }
.ruta-intro { margin: 0 0 1.4rem !important; color: var(--ink-muted); font-size: 0.97rem !important; }

.ruta-progreso { display: flex; flex-direction: column; gap: 0.5rem; }
.ruta-progreso-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ruta-progreso-texto {
  font-size: max(0.78rem,12px); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--accent);
}
.ruta-reiniciar {
  padding: 0; background: none; border: none; color: var(--muted);
  font: inherit; font-size: max(0.8rem,12px); text-decoration: underline; cursor: pointer;
}
.ruta-reiniciar:hover { color: var(--ink); }
.ruta-progreso-pista { display: block; height: 4px; background: var(--line-strong); overflow: hidden; }
.ruta-progreso-barra {
  display: block; height: 100%; width: 0%; background: var(--accent);
  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ruta-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; counter-reset: none; }
.ruta-paso { margin: 0 !important; }
.ruta-paso > details {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  background: var(--bg-elev);
  transition: border-color var(--ease);
}
.ruta-paso > details[open] { border-left-color: var(--accent); }
.ruta-paso.completado > details { border-left-color: var(--accent); }
.ruta-paso > details > summary {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1.15rem 1.3rem; cursor: pointer; list-style: none;
  font-weight: 700;
}
.ruta-paso > details > summary::-webkit-details-marker { display: none; }
.ruta-paso-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  border: 1px solid var(--line-strong); background: var(--bg-soft);
  color: var(--ink-muted); font-size: max(0.85rem,12px); font-weight: 800;
  border-radius: 50% !important;
}
.ruta-paso.completado .ruta-paso-num {
  background: var(--accent); border-color: var(--accent); color: #04241A;
}
.ruta-paso.completado .ruta-paso-num::after { content: ""; }
.ruta-paso-titulo { flex: 1; min-width: 0; font-size: 1.02rem; color: var(--ink); }
.ruta-paso-estado {
  flex: 0 0 auto; font-size: max(0.7rem,12px); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
}
.ruta-paso.completado .ruta-paso-estado { color: var(--accent); }

.ruta-paso-cuerpo { padding: 0 1.3rem 1.4rem 1.3rem; }
.ruta-paso-cuerpo p { font-size: 0.97rem !important; line-height: 1.65 !important; color: var(--ink-muted); }

.ruta-quiz {
  margin-top: 1.2rem; padding: 1.2rem 1.25rem;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.ruta-quiz-pregunta { margin: 0 0 0.9rem !important; font-weight: 700; color: var(--ink); font-size: 0.97rem !important; }
.ruta-quiz-opcion {
  display: block; width: 100%; text-align: left;
  min-height: 46px; padding: 0.7rem 0.95rem; margin-bottom: 0.4rem;
  background: var(--bg-elev); border: 1px solid var(--line-strong); color: var(--ink);
  font: inherit; font-size: 0.93rem; cursor: pointer; transition: all var(--ease);
}
.ruta-quiz-opcion:hover { border-color: var(--accent); }
.ruta-quiz-opcion:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ruta-quiz-opcion.elegida { background: var(--accent); border-color: var(--accent); color: #04241A; font-weight: 700; }
.ruta-quiz-opcion.mala { border-color: #F59E0B; }
html:not([data-theme="dark"]) .ruta-quiz-opcion.elegida { background: #0B3D2E; border-color: #0B3D2E; color: #FFFFFF; }
.ruta-quiz-feedback { margin: 0.7rem 0 0 !important; font-size: 0.89rem !important; font-weight: 600; }
.ruta-quiz-feedback.bien { color: var(--accent); }
.ruta-quiz-feedback.mal { color: #F59E0B; }

.ruta-final {
  margin-top: 1.5rem; padding: 1.5rem 1.6rem;
  background: var(--accent-soft); border: 1px solid var(--accent);
}
.ruta-final-titulo { margin: 0 0 0.35rem !important; font-family: var(--serif); font-size: 1.3rem !important; font-weight: 700; color: var(--ink); }
.ruta-final-texto { margin: 0 0 1rem !important; color: var(--ink-muted); font-size: 0.95rem !important; }
.ruta-final-cta {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0.7rem 1.3rem;
  background: var(--accent); color: #04241A; font-weight: 700;
}
.ruta-final-cta:hover { background: var(--accent-2); color: #04241A; text-decoration: none; }
html:not([data-theme="dark"]) .ruta-final-cta { background: #0B3D2E; color: #FFFFFF; }

@media (max-width: 480px) {
  .ruta-paso > details > summary { padding: 1rem 1rem; gap: 0.7rem; }
  .ruta-paso-titulo { font-size: 0.95rem; }
  .ruta-paso-estado { display: none; }
  .ruta-paso-cuerpo { padding: 0 1rem 1.2rem; }
  .ruta-quiz { padding: 1rem; }
}
@media print { .ruta-quiz, .ruta-progreso, .ruta-reiniciar, .ruta-final { display: none !important; } }

/* ==========================================================================
   Datos clave, mitos e invitación a la herramienta (guía para venezolanos)
   ========================================================================== */
.datos-clave { margin: 2.5rem 0; }
.datos-clave h2 { margin: 0 0 1.2rem !important; font-size: 1.45rem !important; }
.datos-clave-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.9rem; }
.dato {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 1.35rem 1.25rem;
  background-color: var(--bg-elev); background-image: var(--superficie);
  border: 1px solid var(--line); border-top: 3px solid var(--accent);
}
.dato-cifra { font-family: var(--serif); font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.dato-label { font-size: max(0.72rem,12px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent); }
.dato-detalle { font-size: 0.86rem; line-height: 1.5; color: var(--ink-muted); }

.mitos { margin: 3rem 0; }
.mitos h2 { margin: 0 0 0.5rem !important; font-size: 1.45rem !important; }
.mitos-intro { margin: 0 0 1.4rem !important; color: var(--ink-muted); font-size: 0.97rem !important; }
.mitos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.mitos-lista li { margin: 0 !important; }
.mito {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: 54px; padding: 0.95rem 1.15rem;
  background: var(--bg-elev); border: 1px solid var(--line); color: var(--ink);
  font: inherit; font-size: 0.97rem; text-align: left; cursor: pointer;
  transition: border-color var(--ease);
}
.mito:hover { border-color: var(--accent); }
.mito:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mito[aria-expanded="true"] { border-color: var(--accent); border-bottom-color: transparent; }
.mito-frase { flex: 1; min-width: 0; font-style: italic; color: var(--ink-muted); }
.mito-marca { flex: 0 0 auto; font-size: max(0.72rem,12px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.mito-respuesta { display: none; padding: 1.1rem 1.15rem 1.25rem; border: 1px solid var(--accent); border-top: none; background: var(--bg-soft); }
.mito-respuesta.abierta { display: block; }
.mito-respuesta.lista:not(.abierta) { display: none; }
.mito-veredicto { display: inline-block; margin-bottom: 0.55rem; padding: 0.2rem 0.6rem; font-size: max(0.7rem,12px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; }
.mito-veredicto--falso { background: #F59E0B; color: #2A1A00; }
.mito-veredicto--matiz { background: var(--accent); color: #04241A; }
.mito-respuesta p { margin: 0 !important; font-size: 0.95rem !important; line-height: 1.6 !important; color: var(--ink-muted); }

.invitacion {
  margin: 2rem 0 2.5rem; padding: 1.8rem 1.9rem;
  background-color: var(--bg-elev); background-image: var(--superficie);
  border: 1px solid var(--accent); border-left: 4px solid var(--accent);
}
.invitacion-flag { display: inline-block; margin-bottom: 0.7rem; padding: 0.2rem 0.6rem; background: var(--accent); color: #04241A; font-size: max(0.68rem,12px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; }
.invitacion-titulo { margin: 0 0 0.5rem !important; font-family: var(--serif); font-size: 1.4rem !important; font-weight: 700; line-height: 1.25; color: var(--ink); }
.invitacion-texto { margin: 0 0 1.2rem !important; font-size: 0.97rem !important; line-height: 1.6 !important; color: var(--ink-muted); }
.invitacion-cta {
  display: inline-flex; align-items: center; gap: 0.7rem; min-height: 50px;
  padding: 0.8rem 1.5rem; background: var(--accent); color: #04241A; font-weight: 700;
  transition: background var(--ease), transform var(--ease);
}
.invitacion-cta:hover { background: var(--accent-2); color: #04241A; text-decoration: none; transform: translateY(-1px); }
html:not([data-theme="dark"]) .invitacion-cta { background: #0B3D2E; color: #FFFFFF; }
.invitacion-cta svg { transition: transform var(--ease); }
.invitacion-cta:hover svg { transform: translateX(3px); }

@media (max-width: 480px) {
  .invitacion { padding: 1.4rem 1.25rem; }
  .invitacion-titulo { font-size: 1.2rem !important; }
  .invitacion-cta { width: 100%; justify-content: center; }
  .dato { padding: 1.15rem 1.1rem; }
}
@media print { .invitacion, .mito-marca { display: none !important; } .mito-respuesta { display: block !important; } }

/* ==========================================================================
   Ritmo vertical: una escala, no valores sueltos
   Medido en la home, el espaciado entre bloques iba 2, 32, 38, 48, 64, 72 y
   96 px. El desambiguador quedaba pegado a la nota (2 px) y entre los pasos
   del asistente y su título había 90 px de vacío.
   Escala: 56 px entre secciones, 32 px entre bloques relacionados.
   ========================================================================== */
main > section,
main > .card,
main > .editorial-section,
main > .checklist-section {
  margin-top: 3.5rem;
}
.editorial-section + .editorial-section {  }

/* El desambiguador necesita su propio aire por abajo */
.selector-tramite { margin: 3.5rem 0 3.5rem; }

/* Bloques que acompañan a otro: separación corta y pareja */
main > .official-notice,
main > .guide-shortcuts,
main > .progress-bar-wrap,
main > .layout,
main > .mobile-only-tabs {
  margin-top: 2rem;
}
.alerta-vigente { margin-bottom: 0; }
main > .hero { margin-top: 3rem; }
.asistente-intro { margin: 3.5rem 0 1.5rem; }

/* Asistente: el título del paso deja de flotar lejos de las pestañas */
.step-tabs { margin-bottom: 0; padding-bottom: 0.8rem; }
.step-panel { padding-top: 1.5rem; }
.step-panel-title { margin-top: 0; margin-bottom: 1.35rem; }

@media (max-width: 640px) {
  main > section,
  main > .card,
  main > .editorial-section,
  main > .checklist-section,
  .editorial-section + .editorial-section { margin-top: 2.5rem; }
  .selector-tramite { margin: 2.5rem 0; }
  .asistente-intro { margin: 2.5rem 0 1.25rem; }
  main > .hero { margin-top: 2rem; }
}

/* El margen inferior de las secciones editoriales (4,5rem) se sumaba al
   margen superior de la siguiente: 96 px de vacío entre bloques hermanos.
   Manda solo el margen superior. */
.editorial-section { margin-bottom: 0; }
.editorial-section + .editorial-section,
main > .editorial-section { margin-top: 3.5rem; }
@media (max-width: 640px) {
  .editorial-section + .editorial-section,
  main > .editorial-section { margin-top: 2.5rem; }
}

/* ==========================================================================
   Hoja de preparación descargable
   ========================================================================== */
.descarga {
  margin: 3rem 0 2rem; padding: 1.9rem 1.9rem;
  background-color: var(--bg-elev); background-image: var(--superficie);
  border: 1px solid var(--line); border-top: 3px solid var(--accent);
}
.descarga h2 { margin: 0 0 0.6rem !important; font-size: 1.4rem !important; }
.descarga > p { margin: 0 0 1.3rem !important; color: var(--ink-muted); font-size: 0.97rem !important; }
.descarga-btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  min-height: 52px; padding: 0.85rem 1.6rem;
  background: var(--accent); color: #04241A; border: none;
  font: inherit; font-size: 0.97rem; font-weight: 700; cursor: pointer;
  transition: background var(--ease), transform var(--ease);
}
.descarga-btn:hover { background: var(--accent-2); transform: translateY(-1px); }
.descarga-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
html:not([data-theme="dark"]) .descarga-btn { background: #0B3D2E; color: #FFFFFF; }
.descarga-nota { margin: 1.1rem 0 0 !important; font-size: max(0.85rem,12px) !important; color: var(--muted); }
.hoja-prep { display: none; }

@media (max-width: 480px) {
  .descarga { padding: 1.5rem 1.25rem; }
  .descarga-btn { width: 100%; justify-content: center; }
}

/* --- La hoja impresa: papel blanco, tinta negra, nada del sitio ---------- */
@media print {
  body.imprimiendo-hoja .top-gov-bar,
  body.imprimiendo-hoja .site-header,
  body.imprimiendo-hoja .site-footer,
  body.imprimiendo-hoja .search-modal-backdrop,
  body.imprimiendo-hoja main > *:not(.hoja-prep) { display: none !important; }
  body.imprimiendo-hoja::before { display: none !important; }
  body.imprimiendo-hoja .hoja-prep {
    display: block !important;
    /* Su margen, igual que el de la minuta, va en el padding y no en @page:
       un segundo @page pisaba el margen de todos los documentos del sitio. */
    padding: 1.6cm !important;
    color: #000; background: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11.5pt; line-height: 1.5;
  }
  .hoja-alerta {
    border: 2px solid #000; padding: 8pt 10pt; margin-bottom: 14pt;
    font-family: Arial, sans-serif; font-size: 9pt; font-weight: bold;
    text-transform: uppercase; letter-spacing: 0.02em; text-align: center;
  }
  .hoja-titulo { font-size: 18pt !important; margin: 0 0 3pt !important; color: #000 !important; }
  .hoja-fecha { font-size: 9.5pt !important; color: #444 !important; margin: 0 0 14pt !important; font-family: Arial, sans-serif; }
  .hoja-prep h2 {
    font-family: Arial, sans-serif; font-size: 11pt !important; text-transform: uppercase;
    letter-spacing: 0.04em; margin: 14pt 0 6pt !important; padding-bottom: 3pt;
    border-bottom: 1px solid #000; color: #000 !important;
  }
  .hoja-lista { margin: 0 0 8pt; padding-left: 14pt; }
  .hoja-lista li { margin-bottom: 5pt; font-size: 11pt; }
  .hoja-checklist { list-style: none; padding-left: 0; }
  .hoja-casilla { font-family: "Courier New", monospace; font-weight: bold; margin-right: 5pt; }
  .hoja-aviso { border-left: 3px solid #000; padding: 4pt 0 4pt 9pt; margin-bottom: 8pt; }
  .hoja-aviso-titulo { font-weight: bold; margin: 0 0 2pt !important; font-size: 11pt !important; }
  .hoja-aviso p { margin: 0 !important; font-size: 10.5pt !important; }
  .hoja-vacio { font-style: italic; color: #444 !important; font-size: 10.5pt !important; }
  .hoja-pie {
    margin-top: 16pt !important; padding-top: 7pt; border-top: 1px solid #999;
    font-family: Arial, sans-serif; font-size: 8.5pt !important; color: #444 !important; line-height: 1.4 !important;
  }
}

/* Los bloques del resultado son grid items: sin min-width:0 no bajan del
   ancho de su contenido y empujaban el documento 1 px a 320 px. */
.verif-resultado { grid-template-columns: minmax(0, 1fr); }
.verif-bloque,
.verif-bloque-titulo,
.verif-bloque-texto { min-width: 0; overflow-wrap: break-word; }
.recaudo, .recaudo-texto, .ruta-paso, .ruta-paso-cuerpo { min-width: 0; }
.hoja-prep { max-width: 100%; }

/* ==========================================================================
   ALTO CONTRASTE (AAA) — manda sobre todo lo demás
   Este modo está diseñado en negro con tinta blanca, amarillo y verde neón.
   Dos cosas lo rompían: el bloque anti-flicker del <head> le imponía fondo
   claro con !important, y la capa visual v0.6 le pisaba los colores. Quedaba
   amarillo sobre blanco, ilegible. Va al final del archivo, a propósito.
   ========================================================================== */
html.accessible-contrast,
html.accessible-contrast body {
  background: #000000 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  color-scheme: dark !important;
}
html.accessible-contrast body::before { display: none !important; }

/* Superficies: negro con borde blanco, sin degradados ni sombras */
html.accessible-contrast .site-header,
html.accessible-contrast .top-gov-bar,
html.accessible-contrast .site-footer,
html.accessible-contrast .card,
html.accessible-contrast .simulador-card,
html.accessible-contrast .form-pane,
html.accessible-contrast .preview-pane,
html.accessible-contrast .editorial-section,
html.accessible-contrast .checklist-section,
html.accessible-contrast .faq-item,
html.accessible-contrast .nav-menu,
html.accessible-contrast .a11y-panel,
html.accessible-contrast .search-dialog,
html.accessible-contrast .alerta-vigente,
html.accessible-contrast .selector-tramite-item,
html.accessible-contrast .verificador,
html.accessible-contrast .ruta-paso > details,
html.accessible-contrast .ruta-quiz,
html.accessible-contrast .mito,
html.accessible-contrast .mito-respuesta,
html.accessible-contrast .recaudo,
html.accessible-contrast .invitacion,
html.accessible-contrast .descarga,
html.accessible-contrast .dato,
html.accessible-contrast .comuna-ficha,
html.accessible-contrast .resumen-clave,
html.accessible-contrast .official-notice,
html.accessible-contrast .article-sources,
html.accessible-contrast .verif-bloque {
  background: #000000 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Tinta: todo blanco salvo los enlaces, en amarillo */
html.accessible-contrast h1,
html.accessible-contrast h2,
html.accessible-contrast h3,
html.accessible-contrast h4,
html.accessible-contrast p,
html.accessible-contrast li,
html.accessible-contrast span,
html.accessible-contrast td,
html.accessible-contrast th,
html.accessible-contrast summary,
html.accessible-contrast label,
html.accessible-contrast strong,
html.accessible-contrast .brand-text,
html.accessible-contrast .brand-text span,
html.accessible-contrast .brand-sub,
html.accessible-contrast .hero-lead,
html.accessible-contrast .selector-tramite-titulo,
html.accessible-contrast .selector-tramite-desc,
html.accessible-contrast .alerta-vigente-title,
html.accessible-contrast .alerta-vigente-text,
html.accessible-contrast .dato-cifra,
html.accessible-contrast .dato-detalle,
html.accessible-contrast .ruta-paso-titulo,
html.accessible-contrast .mito-frase,
html.accessible-contrast .recaudo-texto {
  color: #FFFFFF !important;
}

html.accessible-contrast a,
html.accessible-contrast .nav-menu a,
html.accessible-contrast .footer-nav a,
html.accessible-contrast .nav-drawer a {
  color: #FFFF00 !important;
  text-decoration: underline !important;
}

/* Rótulos y acentos: verde neón, que sí contrasta sobre negro */
html.accessible-contrast .kicker,
html.accessible-contrast .selector-tramite-quien,
html.accessible-contrast .selector-tramite-ir,
html.accessible-contrast .alerta-vigente-eyebrow,
html.accessible-contrast .dato-label,
html.accessible-contrast .verif-progreso-texto,
html.accessible-contrast .ruta-progreso-texto,
html.accessible-contrast .recaudos-progreso-texto,
html.accessible-contrast .mito-marca,
html.accessible-contrast .drawer-group-title,
html.accessible-contrast .top-gov-badge span {
  color: #00FF66 !important;
}

/* Controles: fondo negro, borde y tinta blancos; los activos se invierten */
html.accessible-contrast .nav-group-btn,
html.accessible-contrast .icon-btn,
html.accessible-contrast .btn-search-trigger,
html.accessible-contrast .verif-opcion,
html.accessible-contrast .ruta-quiz-opcion,
html.accessible-contrast .switch-btn,
html.accessible-contrast .step-tab,
html.accessible-contrast input,
html.accessible-contrast select,
html.accessible-contrast textarea {
  background: #000000 !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}
html.accessible-contrast .btn-primary,
html.accessible-contrast .alerta-vigente-cta,
html.accessible-contrast .invitacion-cta,
html.accessible-contrast .descarga-btn,
html.accessible-contrast .ruta-final-cta,
html.accessible-contrast .verif-opcion.elegida,
html.accessible-contrast .ruta-quiz-opcion.elegida,
html.accessible-contrast .switch-btn.active,
html.accessible-contrast .step-tab[aria-selected="true"] .step-num,
html.accessible-contrast .notice-badge,
html.accessible-contrast .alerta-vigente-flag,
html.accessible-contrast .invitacion-flag,
html.accessible-contrast .mito-veredicto {
  background: #FFFF00 !important;
  border-color: #FFFF00 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
html.accessible-contrast .verif-progreso-barra,
html.accessible-contrast .ruta-progreso-barra,
html.accessible-contrast .recaudos-progreso-barra,
html.accessible-contrast .progress-fill,
html.accessible-contrast .alerta-vigente-dot,
html.accessible-contrast .kicker-bar {
  background: #00FF66 !important;
}
html.accessible-contrast .alerta-vigente::before,
html.accessible-contrast .selector-tramite-item,
html.accessible-contrast .dato,
html.accessible-contrast .verificador,
html.accessible-contrast .descarga {
  border-top-color: #00FF66 !important;
}
html.accessible-contrast *:focus-visible {
  outline: 3px solid #FFFF00 !important;
  outline-offset: 2px !important;
}

/* El silo activo pintaba su botón con el color de marca, que en alto contraste
   quedaba en 2,8:1. En este modo, el estado activo se marca en amarillo. */
html.accessible-contrast .nav-group.is-current > .nav-group-btn,
html.accessible-contrast .nav-group-btn[aria-expanded="true"],
html.accessible-contrast .nav-desktop a[aria-current="page"],
html.accessible-contrast .nav-menu a[aria-current="page"],
html.accessible-contrast .nav-drawer a[aria-current="page"],
html.accessible-contrast .step-tab[aria-selected="true"],
html.accessible-contrast .step-label,
html.accessible-contrast .search-label,
html.accessible-contrast .nav-caret {
  color: #FFFF00 !important;
  background: #000000 !important;
}
html.accessible-contrast .step-tab[aria-selected="true"] .step-num {
  background: #FFFF00 !important;
}

/* Alto contraste, segunda pasada: se atacan las causas, no los síntomas.
   1) Variables de superficie y marca que seguían claras.
   2) Todo enlace o botón: o es amarillo sobre negro, o negro sobre amarillo. */
html.accessible-contrast {
  --bg-glass: #000000 !important;
  --brand: #FFFF00 !important;
  --brand-2: #FFFF00 !important;
  --accent-2: #00FF66 !important;
  --accent-soft: #000000 !important;
  --brand-soft: #000000 !important;
  --info-bg: #000000 !important;
  --info-ink: #FFFF00 !important;
  --superficie: none !important;
}
html.accessible-contrast header,
html.accessible-contrast .header-row,
html.accessible-contrast .top-gov-row,
html.accessible-contrast .footer-bottom,
html.accessible-contrast main,
html.accessible-contrast section,
html.accessible-contrast aside,
html.accessible-contrast nav,
html.accessible-contrast .wrap,
html.accessible-contrast .layout,
html.accessible-contrast .hero {
  background: #000000 !important;
  background-image: none !important;
}
/* Cualquier enlace de texto: amarillo subrayado sobre negro */
html.accessible-contrast a:not([class*="btn"]):not([class*="cta"]):not(.skip-link) {
  color: #FFFF00 !important;
  background: transparent !important;
}
/* Cualquier cosa que actúe como botón: negro sobre amarillo */
html.accessible-contrast .skip-link,
html.accessible-contrast a.btn,
html.accessible-contrast a[class*="cta"],
html.accessible-contrast .btn,
html.accessible-contrast .btn-primary,
html.accessible-contrast .btn-secondary {
  background: #FFFF00 !important;
  background-image: none !important;
  color: #000000 !important;
  border-color: #FFFF00 !important;
  text-decoration: none !important;
}
html.accessible-contrast .btn-secondary {
  background: #000000 !important;
  color: #FFFF00 !important;
  border: 2px solid #FFFF00 !important;
}
/* Los atajos de guías usaban el color de marca sobre negro */
html.accessible-contrast .guide-shortcuts a,
html.accessible-contrast .guide-shortcuts-list a,
html.accessible-contrast .guide-shortcuts-head a,
html.accessible-contrast .silo-link,
html.accessible-contrast .article-related a,
html.accessible-contrast .footer-nav a,
html.accessible-contrast .breadcrumb-nav a {
  color: #FFFF00 !important;
  background: #000000 !important;
}
html.accessible-contrast .hero-art,
html.accessible-contrast .hero-art svg {  }

/* Alto contraste, tercera pasada: dos efectos colaterales propios.
   1) El selector [class*="btn"] capturaba .nav-group-btn, .btn-search-trigger
      y .icon-btn, que son controles de la cabecera, no botones de acción:
      salían con fondo amarillo como si fueran llamadas a la acción.
   2) La ilustración del hero quedaba blanca y brillante sobre el negro. */
html.accessible-contrast .nav-group-btn,
html.accessible-contrast .btn-search-trigger,
html.accessible-contrast .icon-btn,
html.accessible-contrast .nav-group-btn *,
html.accessible-contrast .btn-search-trigger * {
  background: #000000 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}
html.accessible-contrast .nav-group.is-current > .nav-group-btn,
html.accessible-contrast .nav-group-btn[aria-expanded="true"] {
  color: #FFFF00 !important;
  border-color: #FFFF00 !important;
}
html.accessible-contrast .kbd-shortcut {
  background: #000000 !important;
  color: #FFFF00 !important;
  border: 1px solid #FFFF00 !important;
}
html.accessible-contrast .hero-art,
html.accessible-contrast .hero-art svg {
  filter: none !important;
  opacity: 0.32 !important;
}

/* ==========================================================================
   Banner de consentimiento
   Se quedó fuera del sistema: esquinas redondeadas y, sobre todo, el botón de
   aceptar iba blanco sobre verde claro (cerca de 1,6:1). Geometría recta y
   tinta oscura sobre el verde, como el resto de las llamadas a la acción.
   ========================================================================== */
.analytics-consent {
  border-radius: 0 !important;
  padding: .55rem max(1rem, calc((100vw - 1128px) / 2));
  gap: 1.25rem;
  border-top: 2px solid var(--accent);
}
.analytics-consent-actions { gap: 0.6rem; }
.analytics-consent-actions button {
  border-radius: 0 !important;
  min-height: 46px;
  padding: 0.7rem 1.25rem;
  font-weight: 700;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  transition: background var(--ease), border-color var(--ease);
}
.analytics-consent-actions button:hover { border-color: var(--accent); background: var(--bg-soft); }
.analytics-consent-actions button[data-consent="yes"] {
  background: var(--accent-2) !important;
  color: #04241A !important;
  border-color: var(--accent-2) !important;
}
.analytics-consent-actions button[data-consent="yes"]:hover {
  background: var(--accent) !important;
  color: #04241A !important;
}
html:not([data-theme="dark"]) .analytics-consent-actions button[data-consent="yes"] {
  background: #0B3D2E !important;
  color: #FFFFFF !important;
  border-color: #0B3D2E !important;
}
html:not([data-theme="dark"]) .analytics-consent-actions button[data-consent="yes"]:hover {
  background: #11543F !important;
}
html.accessible-contrast .analytics-consent {
  background: #000000 !important;
  border-color: #FFFFFF !important;
  border-top-color: #00FF66 !important;
}
html.accessible-contrast .analytics-consent-actions button {
  background: #000000 !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}
html.accessible-contrast .analytics-consent-actions button[data-consent="yes"] {
  background: #FFFF00 !important;
  border-color: #FFFF00 !important;
}
@media (max-width: 620px) {
  .analytics-consent-actions button { flex: 1 1 auto; justify-content: center; padding-left: .6rem; padding-right: .6rem; }
}

/* ==========================================================================
   La minuta es papel, no interfaz: nunca hereda el tema
   En alto contraste, las reglas que pintan el texto de blanco alcanzaban al
   contenido de la hoja, que tiene fondo blanco: el documento quedaba escrito
   en blanco sobre blanco. Se veía vacío, pero el texto estaba ahí.
   La hoja se imprime y se firma ante notario: siempre negro sobre blanco.
   ========================================================================== */
html.accessible-contrast .letter-paper,
html.accessible-contrast .letter-paper *,
html.accessible-contrast .letter,
html.accessible-contrast .letter *,
html[data-theme="dark"] .letter-paper,
html[data-theme="dark"] .letter-paper * {
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #0F172A !important;
}
html.accessible-contrast .letter-paper strong,
html.accessible-contrast .letter-paper b,
html[data-theme="dark"] .letter-paper strong {
  color: #000000 !important;
}
html.accessible-contrast .letter-paper hr,
html.accessible-contrast .letter-paper .sig-line,
html.accessible-contrast .letter-paper .sig-box-notary {
  border-color: #0F172A !important;
  background-color: #FFFFFF !important;
}
/* El rótulo de formato que acompaña a la hoja sí es interfaz */
html.accessible-contrast .preview-tag-format {
  background: #FFFF00 !important;
  color: #000000 !important;
}

/* ==========================================================================
   Pie: uno solo, igual en todas las páginas y en los dos temas
   Una capa anterior le daba tinta clara (#eaf1e8) y la capa v0.6 le cambió el
   fondo a blanco sin tocar el texto: en modo día quedaba casi blanco sobre
   blanco. El pie va oscuro siempre, que además lo separa del contenido.
   ========================================================================== */
.site-footer {
  background: #0A1116 !important;
  background-image: none !important;
  color: #DCE6EC !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
  margin-top: 4rem;
  padding: 3.25rem 0 2.25rem;
}
.site-footer p,
.site-footer span,
.site-footer strong,
.site-footer li,
.site-footer .footer-bottom > span {
  color: #DCE6EC !important;
}
.site-footer h2,
.site-footer h3,
.site-footer .footer-col strong,
.site-footer .list-col-header {
  color: #FFFFFF !important;
}
.site-footer a,
.footer-nav a,
.footer-links a {
  color: #A9BCC7 !important;
  text-decoration: none;
}
.site-footer a:hover,
.footer-nav a:hover,
.footer-links a:hover {
  color: #FFFFFF !important;
  text-decoration: underline;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.site-footer .brand-text,
.site-footer .brand-text span,
.site-footer .brand-sub {
  color: #FFFFFF !important;
}

/* En alto contraste, el pie sigue la misma gramática que el resto */
html.accessible-contrast .site-footer {
  background: #000000 !important;
  color: #FFFFFF !important;
  border-top-color: #FFFFFF !important;
}
html.accessible-contrast .site-footer a,
html.accessible-contrast .footer-nav a {
  color: #FFFF00 !important;
  text-decoration: underline !important;
}
html.accessible-contrast .site-footer p,
html.accessible-contrast .site-footer span {
  color: #FFFFFF !important;
}
@media print { .site-footer { display: none !important; } }

/* El lema del pie, ahora que es el mismo en todas las páginas */
.footer-lema {
  font-size: 0.87rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
  max-width: 34ch;
  color: #A9BCC7 !important;
}
.site-footer .footer-col h4 {
  color: #FFFFFF !important;
  font-size: max(0.74rem,12px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 1rem;
}
.site-footer .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer .footer-links li { margin: 0; }
.site-footer .trust-pill {
  align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.16); font-size: max(0.76rem,12px); color: #DCE6EC !important;
}
@media (max-width: 900px) {
  .site-footer .footer-row { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
}
@media (max-width: 560px) {
  .site-footer .footer-row { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-lema { max-width: none; }
}

/* ==========================================================================
   Alto contraste: toda superficie amarilla lleva tinta negra, también dentro
   Las reglas que pintan los textos de blanco alcanzaban a los <span> que van
   dentro de los botones amarillos: "Ver la guía completa", "Propietario" o
   "Edificio / Condominio" quedaban en blanco sobre amarillo.
   El descendiente manda sobre el contenedor, así que hay que cubrir ambos.
   ========================================================================== */
html.accessible-contrast .btn-primary,
html.accessible-contrast .btn-primary *,
html.accessible-contrast .alerta-vigente-cta,
html.accessible-contrast .alerta-vigente-cta *,
html.accessible-contrast .invitacion-cta,
html.accessible-contrast .invitacion-cta *,
html.accessible-contrast .descarga-btn,
html.accessible-contrast .descarga-btn *,
html.accessible-contrast .ruta-final-cta,
html.accessible-contrast .ruta-final-cta *,
html.accessible-contrast .verif-opcion.elegida,
html.accessible-contrast .verif-opcion.elegida *,
html.accessible-contrast .ruta-quiz-opcion.elegida,
html.accessible-contrast .ruta-quiz-opcion.elegida *,
html.accessible-contrast .switch-btn.active,
html.accessible-contrast .switch-btn.active *,
html.accessible-contrast .switch-btn[aria-pressed="true"],
html.accessible-contrast .switch-btn[aria-pressed="true"] *,
html.accessible-contrast .toggle-pill.active,
html.accessible-contrast .toggle-pill.active *,
html.accessible-contrast .toggle-pill[aria-pressed="true"],
html.accessible-contrast .toggle-pill[aria-pressed="true"] *,
html.accessible-contrast .seg.active,
html.accessible-contrast .seg.active *,
html.accessible-contrast .notice-badge,
html.accessible-contrast .notice-badge *,
html.accessible-contrast .invitacion-flag,
html.accessible-contrast .alerta-vigente-flag,
html.accessible-contrast .mito-veredicto,
html.accessible-contrast .req-badge,
html.accessible-contrast .tag-req,
html.accessible-contrast .tag-crit,
html.accessible-contrast .tag-warn,
html.accessible-contrast .check-tag,
html.accessible-contrast .step-tab[aria-selected="true"] .step-num,
html.accessible-contrast .ruta-paso.completado .ruta-paso-num,
html.accessible-contrast .verif-pregunta.respondida .verif-num,
html.accessible-contrast .analytics-consent-actions button[data-consent="yes"],
html.accessible-contrast .analytics-consent-actions button[data-consent="yes"] *,
html.accessible-contrast .kbd-shortcut.activo,
html.accessible-contrast .cockpit-status-pill,
html.accessible-contrast .result-status-badge,
html.accessible-contrast .dato-label.destacado {
  color: #000000 !important;
  fill: #000000 !important;
  stroke: #000000 !important;
}
html.accessible-contrast .btn-primary svg,
html.accessible-contrast .alerta-vigente-cta svg,
html.accessible-contrast .invitacion-cta svg,
html.accessible-contrast .descarga-btn svg {
  stroke: #000000 !important;
  fill: none !important;
}

/* El botón activo del selector de tamaño de texto también va sobre amarillo */
html.accessible-contrast .a11y-btn-group button.active,
html.accessible-contrast .a11y-btn-group button.active *,
html.accessible-contrast .a11y-btn-group button[aria-pressed="true"],
html.accessible-contrast .switch-btn.active,
html.accessible-contrast .mobile-only-tabs .seg[aria-pressed="true"],
html.accessible-contrast .mobile-only-tabs .seg[aria-pressed="true"] * {
  color: #000000 !important;
  background: #FFFF00 !important;
}

/* ==========================================================================
   Impresión: en el papel va el documento, nada más
   El bloque de impresión original era una lista negra, así que cada sección
   nueva entraba al papel por omisión: el desambiguador, la presentación del
   asistente y el enlace de saltar contenido se colaban en la minuta.
   Aquí se cierra por lista blanca en la página del asistente, de modo que lo
   que se agregue mañana quede fuera sin tener que acordarse.
   ========================================================================== */
@media print {
  /* Página del asistente: solo la hoja */
  body:not(.imprimiendo-hoja) .skip-link,
  body:not(.imprimiendo-hoja) .selector-tramite,
  body:not(.imprimiendo-hoja) .asistente-intro,
  body:not(.imprimiendo-hoja) .alerta-vigente,
  body:not(.imprimiendo-hoja) .guide-shortcuts,
  body:not(.imprimiendo-hoja) .faq,
  body:not(.imprimiendo-hoja) .datos-clave,
  body:not(.imprimiendo-hoja) .mitos,
  body:not(.imprimiendo-hoja) .verificador,
  body:not(.imprimiendo-hoja) .ruta,
  body:not(.imprimiendo-hoja) .recaudos,
  body:not(.imprimiendo-hoja) .descarga,
  body:not(.imprimiendo-hoja) .invitacion,
  body:not(.imprimiendo-hoja) .article-related,
  body:not(.imprimiendo-hoja) .breadcrumb-nav,
  body:not(.imprimiendo-hoja) .nav-drawer,
  body:not(.imprimiendo-hoja) .a11y-panel,
  body:not(.imprimiendo-hoja) .trust-badges,
  body:not(.imprimiendo-hoja) .wizard-nav,
  body:not(.imprimiendo-hoja) .step-tabs {
    display: none !important;
  }

  /* Lista blanca donde existe el asistente: fuera todo lo que no sea la hoja */
  body:not(.imprimiendo-hoja) .layout > *:not(.preview-pane) { display: none !important; }
  body:not(.imprimiendo-hoja) .preview-pane > *:not(.letter):not(.auth-wrap) { display: none !important; }

  /* La hoja ocupa la página completa, sin marcos.
     OJO: aquí NO se toca el padding. Esta regla es la segunda .letter-paper del
     archivo y, con la misma especificidad y ambas con !important, gana la que
     va después: cuando declaraba padding:0 anulaba el margen del documento y la
     minuta salía impresa a 0,78 cm del filo en vez de 1,5 cm. El padding vive
     en un solo lugar, junto al resto de los estilos de impresión de la hoja. */
  .letter-paper {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
  }
  .preview-pane { position: static !important; }
}

/* El enlace de salto es ayuda de navegación: nunca va al papel, en ningún flujo */
@media print {
  .skip-link { display: none !important; }
}

/* ==========================================================================
   Marcador del checklist a 320px
   El marcador es un flex sin envoltura: a 320px el número (1,85rem ≈ 45px de
   caja) y la píldora «Faltan antecedentes» suman 205px dentro de 197px y se
   salían 8px. No producía scroll de página, por eso el control de desborde
   horizontal no lo veía. Envolver sólo actúa cuando ya no cabe, así que en
   pantallas grandes el marcador no cambia.
   ========================================================================== */
.cockpit-score-display { flex-wrap: wrap; }
@media (max-width: 400px) {
  .cockpit-score-display { gap: 0.4rem; justify-content: flex-start; }
  .cockpit-status-pill { min-width: 0; }
}

/* ==========================================================================
   Papel blanco, pase lo que pase en pantalla
   Cada página lleva un <style> anti-parpadeo en el <head> que fija el fondo
   con `html[data-theme="dark"] { background-color: #07090C !important }`. Esa
   regla tiene más especificidad (0,1,1) que el `html, body` del bloque de
   impresión (0,0,1), así que le ganaba: quien tuviera el sitio en modo oscuro
   y marcara «Gráficos de fondo» imprimía el documento sobre una hoja negra.
   Aquí se iguala la especificidad; como esta hoja se carga después del <style>
   del <head>, con la misma especificidad gana la que va al final.
   ========================================================================== */
@media print {
  html[data-theme="dark"], html[data-theme="dark"] body,
  html:not([data-theme="dark"]), html:not([data-theme="dark"]) body {
    background-color: #FFFFFF !important;
    background-image: none !important;
    color: #000000 !important;
    color-scheme: light !important;
  }
}

/* ==========================================================================
   Acciones del documento, agrupadas por documento
   Antes eran cuatro botones sueltos en una fila: la minuta y la autorización
   del propietario —que son documentos distintos— quedaban mezcladas, y no se
   entendía cuál botón actuaba sobre cuál. Ahora cada documento tiene su rótulo
   y su par de acciones, imprimir y descargar, siempre en el mismo orden.
   ========================================================================== */
.actions-review {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  align-items: stretch;
}
.accion-grupo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.accion-rotulo {
  font-size: max(0.72rem,12px);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.accion-fila {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  min-width: 0;
}
/* Las dos acciones de un documento pesan lo mismo y comparten el ancho, para
   que se lean como un par y no como un botón principal y un sobrante. */
.accion-fila .btn {
  flex: 1 1 11rem;
  min-width: 0;
  justify-content: center;
}
.accion-extra {
  padding-top: 0.15rem;
  border-top: 1px solid var(--line);
  margin-top: 0.15rem;
}
.accion-extra .btn { flex: 0 1 auto; }

@media (max-width: 380px) {
  /* A 320 px los dos botones de un documento no caben juntos: uno bajo el otro
     antes de que el texto se parta. */
  .accion-fila .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   `hidden` tiene que ocultar de verdad
   El atributo `hidden` equivale a `display: none`, pero con la especificidad
   más baja que existe: cualquier regla propia que declare `display` le gana.
   Los botones son `inline-flex`, así que el botón «Siguiente» del asistente
   seguía en pantalla en el último paso aunque el código lo diera por oculto,
   y quedaban dos botones haciendo lo mismo.
   ========================================================================== */
[hidden] { display: none !important; }

/* ==========================================================================
   El simulador de antecedentes necesita más ancho que el texto
   /checklist/ es una página de lectura: su <main> mide 820 px, que es la medida
   correcta para leer. Pero dentro vive una herramienta de dos columnas, y a ese
   ancho la columna de avisos quedaba en 224 px: el texto salía a dos palabras y
   media por línea, ilegible. Aquí la herramienta —y sólo ella— se sale del
   ancho de lectura en pantallas anchas; el resto de la página no se mueve.
   ========================================================================== */
@media (min-width: 1080px) {
  .checklist-section .simulador-inner {
    --ancho-simulador: min(1160px, calc(100vw - 5rem));
    width: var(--ancho-simulador);
    margin-left: calc((100% - var(--ancho-simulador)) / 2);
  }
  /* Con más ancho disponible, la columna de avisos deja de ser una tira: se le
     fija un mínimo para que el texto respire. */
  .checklist-section .simulador-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(330px, 1fr);
  }
}

/* ==========================================================================
   El aviso de medición, visible desde el primer pintado
   Antes lo creaba el JavaScript al terminar de armarse el documento: aparecía
   369 ms tarde, sobre una página ya dibujada, y si la persona ya había pulsado
   un enlace alcanzaba a asomar y desaparecer con el cambio de página. Ahora
   viene en el HTML y el script del <head> marca la página cuando falta la
   elección, así que se pinta junto con el resto o no se pinta nunca.
   La animación mueve el aviso pero NO toca su opacidad, y ese es el punto:
   mientras una animación está en curso el navegador aplica el fotograma en que
   va, y en una pestaña que no está a la vista no avanza del primero. Si ese
   fotograma pusiera opacity: 0, el aviso quedaría invisible y nadie podría
   responderlo.
   ========================================================================== */
html:not(.pedir-medicion) .analytics-consent { display: none; }
html.pedir-medicion .analytics-consent { animation: aviso-medicion-entra .28s ease; }
@keyframes aviso-medicion-entra {
  from { transform: translateY(12px); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .analytics-consent { animation: none; }
}

/* ==========================================================================
   Los dos selectores del checklist, alineados en rejilla
   Iban en una fila flexible, así que cada uno se acomodaba al largo de su
   propio texto: las etiquetas medían 184 y 209 px, sus cajas de opciones 324 y
   381, y los cuatro botones cuatro anchos distintos. Nada coincidía con nada y
   el bloque se leía desordenado. Aquí la etiqueta ocupa una columna fija, las
   opciones empiezan a la misma altura en los dos, y los botones de cada par se
   reparten el ancho por igual. Bajo 900 px siguen apilándose como antes.
   ========================================================================== */
@media (min-width: 900px) {
  .checklist-section .simulador-profile-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 2rem 2.5rem;
  }
  .checklist-section .profile-switch-wrap {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    align-items: center;
    min-width: 0;
  }
  .checklist-section .switch-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
  .checklist-section .switch-segmented .switch-btn {
    text-align: center;
    justify-content: center;
    min-width: 0;
  }
}

/* Formulario de sugerencias con Turnstile (11-10-2026). */
.suggest-form{display:grid;gap:10px;max-width:640px;margin:0 0 18px}
.suggest-form label{color:var(--ink);font-weight:600}
.suggest-optional{color:var(--muted);font-weight:400}
.suggest-form textarea,.suggest-form input[type="email"]{width:100%;min-width:0;padding:11px 13px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg-elev);color:var(--ink);font:inherit}
.suggest-form textarea{min-height:140px;resize:vertical}
.suggest-form textarea:focus-visible,.suggest-form input[type="email"]:focus-visible{border-color:var(--accent);outline:2px solid var(--accent-ring);outline-offset:2px}
.suggest-trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.suggest-form .suggest-send{justify-self:start;margin-top:4px}
.suggest-form .suggest-send:disabled{opacity:.7;cursor:progress}
.suggest-status{--suggest-error:var(--danger);min-height:1.4em;margin:0}
.suggest-done{max-width:640px;margin:0 0 18px;padding:12px 14px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--ink);font-weight:600}
.suggest-or a{overflow-wrap:anywhere}

/* Responsable del sitio (autoría discreta, 23-10-2026): una línea chica al
   final del pie, en el color secundario del pie; sin tarjeta, borde ni negrita. */
.site-footer p.pie-responsable { margin: 1rem 0 0; font-size: max(0.8rem,12px); line-height: 1.5; font-weight: 400; color: rgba(220, 230, 236, 0.72) !important; }
.site-footer p.pie-responsable a { color: rgba(220, 230, 236, 0.86) !important; text-decoration: underline; text-underline-offset: 2px; }
html.accessible-contrast .site-footer p.pie-responsable, html.accessible-contrast .site-footer p.pie-responsable a { color: #fff !important; }
@media print { .pie-responsable { display: none; } }
/* Fecha de verificación visible bajo la respuesta (= dateModified). */
.verificado-el { margin: .6rem 0 0; font-size: max(.88rem,12px); color: var(--muted); }
/* La nota del consulado no es un enlace: con cinco casos ocupa una fila
   completa y más baja, en vez de quedar sola bajo cuatro tarjetas. */
.selector-tramite-item--nota { grid-column: 1 / -1; padding-top: 1.1rem; padding-bottom: 1.1rem; }
/* Tablas cortas (2-3 columnas de texto): caben a 320 px sin desplazarse de lado. */
.article-table-wrap table.cabe { min-width: 0; }
/* Cuatro casos (página 404): 1 columna en el celular, 2×2 en tablet, 4 en escritorio. */
.selector-tramite-grid--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .selector-tramite-grid--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .selector-tramite-grid--cuatro { grid-template-columns: 1fr; } }
/* Permiso municipal de mudanza (24-10-2026): una ficha por comuna. Seis datos
   por comuna no caben en una tabla a 320 px; en escritorio van de a dos. */
.comunas-mudanza { display: grid; grid-template-columns: 1fr; gap: 0.9rem; margin: 1.5rem 0; }
@media (min-width: 760px) {
  .comunas-mudanza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Con un número impar de comunas, la última ocupa la fila entera. */
  .comunas-mudanza > .comuna-ficha:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.comuna-ficha {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.2rem 1.2rem 1.1rem;
  background-color: var(--bg-elev); background-image: var(--superficie);
  border: 1px solid var(--line); border-top: 3px solid var(--accent);
}
.comuna-ficha h3 { margin: 0; font-size: 1.15rem; }
.comuna-ficha dl { margin: 0; display: grid; gap: 0.15rem; }
.comuna-ficha dt { margin-top: 0.45rem; font-size: max(0.72rem,12px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.comuna-ficha dt:first-child { margin-top: 0; }
.comuna-ficha dd { margin: 0; font-size: 0.94rem; line-height: 1.5; color: var(--ink); }
.comuna-ficha dd ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.comuna-ficha dd li { margin: 0.15rem 0; font-size: inherit; line-height: inherit; }
.comuna-ficha .comuna-fuente { margin: auto 0 0; padding-top: 0.5rem; border-top: 1px solid var(--line); font-size: max(0.8rem,12px); line-height: 1.45; color: var(--muted); }
/* Tabla de tres columnas que a 320 px no cabe: bajo 560 px cada fila se apila
   y cada celda muestra a qué columna pertenece. */
@media (max-width: 560px) {
  .tabla-apilada thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-apilada, .tabla-apilada tbody, .tabla-apilada tr, .tabla-apilada th, .tabla-apilada td { display: block; width: 100%; }
  .article-table-wrap .tabla-apilada tr { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
  .article-table-wrap .tabla-apilada th, .article-table-wrap .tabla-apilada td { border: 0; padding: 0.2rem 0.9rem; }
  .tabla-apilada td::before { content: attr(data-label); display: block; font-size: max(0.72rem,12px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
}

/* ==========================================================================
   Más fácil para el público (orden 06-11-2026)
   Se reordena y se aprieta; las palabras y los títulos no cambian.
   ========================================================================== */

/* Portada: título y selector en la primera pantalla. */
.portada-titulo { padding: 1.1rem 0 0; }
.portada-titulo h1 { margin: .15rem 0 0; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.1; }
.portada-titulo h1 span { color: var(--brand-2); }
.portada-titulo + .selector-tramite { margin: .7rem 0 2.5rem; }
.portada-titulo + .selector-tramite h2 { margin-bottom: .2rem; font-size: clamp(1.2rem, 1.9vw, 1.45rem); }
.portada-titulo + .selector-tramite .selector-tramite-intro { max-width: none; margin-bottom: .8rem; font-size: .95rem; }
.portada-titulo + .selector-tramite .selector-tramite-grid { gap: .8rem; }
.portada-titulo + .selector-tramite .selector-tramite-item { gap: .3rem; padding: .95rem 1.05rem; }
.portada-titulo + .selector-tramite .selector-tramite-titulo { font-size: 1.14rem; }
.portada-titulo + .selector-tramite .selector-tramite-desc { font-size: .86rem; line-height: 1.45; }
.portada-titulo ~ .hero-tool { padding-top: 1rem; }

/* Páginas de lectura: el título no empuja la respuesta fuera de la pantalla. */
main h1 { font-size: clamp(2rem, 3.2vw, 2.45rem); line-height: 1.14; }
main.guia-legible { padding-top: 1.1rem !important; }
.breadcrumb-nav { margin-bottom: .7rem !important; }
main.guia-legible .hero-actions { margin: .2rem 0 1rem; }

/* La vista de la hoja solo hace falta donde va en otra pestaña. */
.solo-celular { display: none; }
@media (max-width: 900px) {
  .solo-celular { display: inline-flex; width: 100%; margin: .4rem 0 1rem; }
  /* Adorno: en celular empujaba el contenido; en escritorio sigue al lado del texto. */
  .hero-art { display: none; }
}

@media (max-width: 640px) {
  /* Barra superior en una línea. */
  .top-gov-resto { display: none; }

  /* Títulos de celular: 42,9 px ocupaban cuatro líneas. */
  main h1 { font-size: clamp(1.55rem, 7.2vw, 1.85rem); line-height: 1.16; margin-bottom: .6rem; }
  .portada-titulo .kicker { display: none; }

  /* Selector: cinco casos sin recorrer cinco pantallas. */
  .portada-titulo { padding-top: .75rem; }
  .portada-titulo + .selector-tramite .selector-tramite-intro { font-size: .9rem; line-height: 1.45; }
  .portada-titulo + .selector-tramite .selector-tramite-grid { gap: .55rem; }
  .portada-titulo + .selector-tramite .selector-tramite-item { gap: .15rem; padding: .7rem .85rem; }
  .portada-titulo + .selector-tramite .selector-tramite-ir { display: none; }
  .portada-titulo + .selector-tramite a.selector-tramite-item .selector-tramite-titulo::after { content: " →"; color: var(--accent); }

  /* Pasos de la minuta: los cuatro en una fila, con su nombre. */
  .step-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .step-tab { flex-direction: column; gap: .2rem; padding: .35rem .1rem; min-height: 56px; min-width: 0; }
  .step-label { display: block; font-size: max(.72rem, 12px); line-height: 1.15; text-align: center; }

  /* El botón principal, a todo el ancho y a mano. */
  #btnNext { flex: 1 1 auto; }
  #btnPrev { flex: 0 0 auto; }
}

/* Aviso de medición: franja baja al borde (reglas en su bloque original).
   Mismos textos, botones y lógica; aquí solo lo que no existía. */
.analytics-consent > div:first-child { min-width: 0; line-height: 1.4; }
.analytics-consent strong { font-size: .86rem; }
.analytics-consent strong::after { content: " "; }
html.pedir-medicion body { padding-bottom: 4.5rem; }
@media (max-width: 620px) {
  html.pedir-medicion body { padding-bottom: 8.5rem; }
}