/* notarioschile.com — styles v0.18.0
 * Sistema de Diseño Notarial "Elite Legal / Bone, Ink & Champagne" (Basado en Santiago Abogados).
 * Elegante, editorial, cálido, prestigioso, sin neón.
 * Paleta: Bone (#FAF8F4), Ink (#0A0A0A), Champagne (#9A7B4A / #C4A878).
 * Mobile-first, 320px responsive, sin emojis, sin frameworks.
 * WCAG AA target, AAA en texto principal.
 */

/* ============================================================
 * 1. DESIGN TOKENS
 * ============================================================ */

:root {
  /* Palette: Bone, Ink, Champagne (Light Mode - Papel Notarial y Champán) */
  --c-bg: #FAF8F4;
  --c-bg-elev: #F2EEE5;
  --c-surface: #FFFFFF;
  --c-surface-hover: #FAF8F4;
  --c-text: #0A0A0A;
  --c-text-muted: #404040;
  --c-text-soft: #767676;
  --c-border: #DDD7C7;
  --c-border-strong: #B8B0A0;
  --c-border-faint: #E8E2D3;

  --c-primary: #0A0A0A;
  --c-primary-hover: #1F1F1F;
  --c-primary-soft: #F2EEE5;
  --c-primary-contrast: #FFFFFF;

  --c-accent: #9A7B4A;            /* Champagne Gold Notarial */
  --c-accent-hover: #6B5430;
  --c-accent-soft: rgba(154, 123, 74, 0.08);
  --c-accent-contrast: #FFFFFF;
  --c-accent-gold: #9A7B4A;
  --c-accent-gold-soft: rgba(154, 123, 74, 0.12);

  --c-success: #2E7D4F;
  --c-success-soft: #ECFDF5;
  --c-warn: #8B5A1A;
  --c-warn-soft: #FFFBEB;
  --c-error: #B91C1C;
  --c-error-soft: #FEF2F2;

  --c-grid: rgba(10, 10, 10, 0.04);
  --c-grid-strong: rgba(10, 10, 10, 0.08);

  /* Spacing scale */
  --s-1: 0.0625rem;
  --s-2: 0.125rem;
  --s-4: 0.25rem;
  --s-6: 0.375rem;
  --s-8: 0.5rem;
  --s-10: 0.625rem;
  --s-12: 0.75rem;
  --s-14: 0.875rem;
  --s-16: 1rem;
  --s-20: 1.25rem;
  --s-24: 1.5rem;
  --s-28: 1.75rem;
  --s-32: 2rem;
  --s-40: 2.5rem;
  --s-48: 3rem;
  --s-56: 3.5rem;
  --s-64: 4rem;
  --s-80: 5rem;
  --s-96: 6rem;
  --s-120: 7.5rem;

  /* Type scale */
  --f-sans: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --f-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --f-serif: "Times New Roman", Times, serif;

  /* Radius (elegancia editorial) */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-full: 9999px;

  /* Shadows (sobrias) */
  --sh-xs: 0 1px 2px rgba(10, 10, 10, 0.04);
  --sh-sm: 0 2px 6px rgba(10, 10, 10, 0.05);
  --sh-md: 0 4px 14px rgba(10, 10, 10, 0.06);
  --sh-lg: 0 10px 28px rgba(10, 10, 10, 0.08);
  --sh-glow: none;

  --sh-ring: 0 0 0 3px rgba(10, 10, 10, 0.12);
  --sh-ring-accent: 0 0 0 3px rgba(154, 123, 74, 0.20);

  /* Motion */
  --t-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-base: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-slow: 280ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-narrow: 780px;
  --container: 1240px;
  --container-wide: 1380px;
  --header-h: 72px;
}

/* Dark mode (Warm Dark Ebony & Champagne Gold) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #121210;
    --c-bg-elev: #1A1916;
    --c-surface: #1A1916;
    --c-surface-hover: #24221E;
    --c-text: #FAF8F4;
    --c-text-muted: #C4C0B6;
    --c-text-soft: #8C887E;
    --c-border: #2C2923;
    --c-border-strong: #444037;
    --c-border-faint: #201E1A;

    --c-primary: #FAF8F4;
    --c-primary-hover: #E8E4DA;
    --c-primary-soft: #24221E;
    --c-primary-contrast: #121210;

    --c-accent: #C4A878;
    --c-accent-hover: #D8BF92;
    --c-accent-soft: rgba(196, 168, 120, 0.12);
    --c-accent-contrast: #121210;
    --c-accent-gold: #C4A878;
    --c-accent-gold-soft: rgba(196, 168, 120, 0.14);

    --c-success: #4ADE80;
    --c-success-soft: rgba(74, 222, 128, 0.14);
    --c-warn: #FBBF24;
    --c-warn-soft: rgba(251, 191, 36, 0.14);
    --c-error: #F87171;
    --c-error-soft: rgba(248, 113, 113, 0.14);

    --c-grid: rgba(250, 248, 244, 0.03);
    --c-grid-strong: rgba(250, 248, 244, 0.06);

    --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --sh-sm: 0 2px 6px rgba(0, 0, 0, 0.5);
    --sh-md: 0 4px 14px rgba(0, 0, 0, 0.5);
    --sh-lg: 0 10px 28px rgba(0, 0, 0, 0.6);
    --sh-glow: none;

    --sh-ring: 0 0 0 3px rgba(250, 248, 244, 0.15);
    --sh-ring-accent: 0 0 0 3px rgba(196, 168, 120, 0.25);
  }
}

:root[data-theme="dark"] {
  --c-bg: #121210;
  --c-bg-elev: #1A1916;
  --c-surface: #1A1916;
  --c-surface-hover: #24221E;
  --c-text: #FAF8F4;
  --c-text-muted: #C4C0B6;
  --c-text-soft: #8C887E;
  --c-border: #2C2923;
  --c-border-strong: #444037;
  --c-border-faint: #201E1A;

  --c-primary: #FAF8F4;
  --c-primary-hover: #E8E4DA;
  --c-primary-soft: #24221E;
  --c-primary-contrast: #121210;

  --c-accent: #C4A878;
  --c-accent-hover: #D8BF92;
  --c-accent-soft: rgba(196, 168, 120, 0.12);
  --c-accent-contrast: #121210;
  --c-accent-gold: #C4A878;
  --c-accent-gold-soft: rgba(196, 168, 120, 0.14);

  --c-success: #4ADE80;
  --c-success-soft: rgba(74, 222, 128, 0.14);
  --c-warn: #FBBF24;
  --c-warn-soft: rgba(251, 191, 36, 0.14);
  --c-error: #F87171;
  --c-error-soft: rgba(248, 113, 113, 0.14);

  --c-grid: rgba(250, 248, 244, 0.03);
  --c-grid-strong: rgba(250, 248, 244, 0.06);

  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-sm: 0 2px 6px rgba(0, 0, 0, 0.5);
  --sh-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --sh-lg: 0 10px 28px rgba(0, 0, 0, 0.6);
  --sh-glow: none;

  --sh-ring: 0 0 0 3px rgba(250, 248, 244, 0.15);
  --sh-ring-accent: 0 0 0 3px rgba(196, 168, 120, 0.25);
}

/* ============================================================
 * 2. RESET & BASE TYPOGRAPHY
 * ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.011em;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "calt", "ss01";
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--c-text);
}
p { margin: 0; }
a {
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

::selection {
  background: var(--c-primary);
  color: var(--c-primary-contrast);
}

img, svg { display: block; max-width: 100%; }
input, select, textarea { font: inherit; color: inherit; }

*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-16);
  z-index: 100;
  padding: var(--s-12) var(--s-16);
  background: var(--c-primary);
  color: var(--c-primary-contrast);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: top var(--t-fast);
}
.skip-link:focus-visible {
  top: var(--s-16);
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.text-secondary { color: var(--c-text-muted); }
.small { font-size: 0.875rem; line-height: 1.5; }
.mono { font-family: var(--f-mono); font-feature-settings: "tnum"; }

/* ============================================================
 * 3. LAYOUT & SECTIONS
 * ============================================================ */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--s-24);
  padding-right: var(--s-24);
}
@media (min-width: 768px) {
  .container {
    padding-left: var(--s-48);
    padding-right: var(--s-48);
  }
}
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding-left: var(--s-24); padding-right: var(--s-24); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding-left: var(--s-24); padding-right: var(--s-24); }

.section { padding: var(--s-80) 0; }
.section-tight { padding: var(--s-56) 0; }
.section-lg { padding: var(--s-120) 0; }

.section-heading { margin-bottom: var(--s-56); max-width: 780px; }
.section-heading h2 {
  font-size: clamp(2rem, 4vw, 2.625rem);
  font-weight: 700;
  margin-bottom: var(--s-16);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--c-text);
}
.section-heading p {
  color: var(--c-text-muted);
  font-size: 1.1875rem;
  line-height: 1.65;
  letter-spacing: -0.01em;
}

.section-soft {
  background: var(--c-bg-elev);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  position: relative;
}

/* ============================================================
 * 4. HEADER (Navegación Notarial Editorial)
 * ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  transition: background var(--t-base), border-color var(--t-base);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-24);
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-12);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.03em;
  text-decoration: none;
  line-height: 1;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: var(--c-primary);
  color: var(--c-primary-contrast);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border-strong);
  flex-shrink: 0;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 280ms ease, border-color 280ms ease;
  box-shadow: var(--sh-xs);
}
.brand-mark svg {
  width: 26px; height: 26px;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand:hover .brand-mark {
  transform: scale(1.1) rotate(-6deg);
  border-color: var(--c-accent);
  box-shadow: 0 4px 14px rgba(154, 123, 74, 0.25);
}
.brand:hover .brand-mark svg {
  transform: rotate(10deg) scale(1.05);
}
.brand:active .brand-mark {
  transform: scale(0.95) rotate(0deg);
}
.brand-light { color: var(--c-text-soft); font-weight: 400; }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}
.main-nav a {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 var(--s-16);
  color: var(--c-text-muted);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--r-md);
  transition: color var(--t-fast), background var(--t-fast);
  text-decoration: none;
}
.main-nav a:hover {
  color: var(--c-text);
  background: var(--c-surface-hover);
  text-decoration: none;
}
.main-nav a[aria-current="page"] {
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--c-surface);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 0.875rem;
  font-weight: 600;
  transition: all var(--t-fast);
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--c-text);
  background: var(--c-surface-hover);
  border-color: var(--c-border-strong);
}
.theme-toggle:focus-visible { outline: none; box-shadow: var(--sh-ring); border-color: var(--c-accent); }
.theme-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
 * 5. HERO (Estilo Editorial Notarial)
 * ============================================================ */

.hero {
  position: relative;
  padding: var(--s-40) 0 var(--s-64);
  overflow: hidden;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--c-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 45%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 45%, transparent 90%);
  pointer-events: none;
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
  padding-left: var(--s-12);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
  border-left: 2px solid var(--c-accent);
  margin-bottom: var(--s-20);
}
.eyebrow .pulse-dot { display: none; }

.hero h1 {
  font-size: clamp(2.75rem, 6vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: var(--s-24);
  color: var(--c-text);
}
.hero h1 .accent {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-color: var(--c-border-strong);
  text-underline-offset: 6px;
}
.hero-sub {
  font-size: clamp(1.125rem, 2.2vw, 1.3125rem);
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: var(--c-text-muted);
  max-width: 740px;
  margin: 0 auto var(--s-40);
}
.hero-sub strong { color: var(--c-text); font-weight: 600; }

/* Buscador limpio en papel */
.search-form {
  display: flex;
  gap: var(--s-8);
  max-width: 700px;
  margin: 0 auto var(--s-20);
  padding: 6px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  transition: all var(--t-base);
}
.search-form:focus-within {
  border-color: var(--c-accent);
  box-shadow: var(--sh-lg), var(--sh-ring-accent);
}
.search-form input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 var(--s-20);
  font-size: 1.0625rem;
  background: transparent;
  border: none;
  color: var(--c-text);
  outline: none;
  font-weight: 500;
}
.search-form input::placeholder { color: var(--c-text-soft); }

.quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  justify-content: center;
  align-items: center;
  margin-top: var(--s-16);
}
.prompt-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--c-text-soft);
  margin-right: var(--s-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.prompt-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  height: auto;
  padding: var(--s-8) var(--s-16);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  background: var(--c-surface);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  transition: all var(--t-fast);
  cursor: pointer;
}
.prompt-chip:hover {
  color: var(--c-text);
  background: var(--c-surface-hover);
  border-color: var(--c-accent);
}

/* Stat Cards Bar */
.trust-bar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-20);
  margin-top: var(--s-48);
}
@media (min-width: 640px) {
  .trust-bar { grid-template-columns: repeat(3, 1fr); gap: var(--s-24); }
}
.trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-6);
  padding: var(--s-24);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-base), border-color var(--t-base);
}
.trust-stat:hover {
  transform: translateY(-2px);
  border-color: var(--c-border-strong);
}
.trust-stat-value {
  font-family: var(--f-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.03em;
  font-feature-settings: "tnum";
  line-height: 1.1;
}
.trust-stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-text-muted);
  font-weight: 700;
}

/* ============================================================
 * 6. BUTTONS
 * ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  height: 44px;
  padding: 0 var(--s-24);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--t-fast);
  user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--sh-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background: var(--c-primary);
  color: var(--c-primary-contrast);
  border-color: var(--c-primary);
  box-shadow: var(--sh-sm);
}
.btn-primary:hover {
  background: var(--c-primary-hover);
  border-color: var(--c-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
}

.btn-secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border);
  box-shadow: var(--sh-xs);
}
.btn-secondary:hover {
  background: var(--c-surface-hover);
  border-color: var(--c-border-strong);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--c-text-muted);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--c-surface-hover);
  color: var(--c-text);
}

.btn-accent {
  background: var(--c-accent);
  color: var(--c-accent-contrast);
  border-color: var(--c-accent);
}
.btn-accent:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  transform: translateY(-1px);
}

.btn-sm { min-height: 44px; height: 44px; padding: 0 var(--s-16); font-size: 0.8125rem; }
.btn-lg { height: 50px; padding: 0 var(--s-28); font-size: 1rem; }

.search-form .btn-primary {
  height: 50px;
  padding: 0 var(--s-24);
  border-radius: var(--r-lg);
  font-size: 1rem;
}

/* ============================================================
 * 7. CARDS EDITORIALES (Bone & Hairline Border)
 * ============================================================ */

.card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}

.card-interactive {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.card-interactive:hover {
  border-color: var(--c-border-strong);
  border-bottom-color: var(--c-accent);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.card-interactive:active { transform: translateY(0); }
.card-interactive:focus-visible { outline: none; box-shadow: var(--sh-md), var(--sh-ring); }

.card-body { padding: var(--s-32); }
.card-body-tight { padding: var(--s-20); }
.card-body-loose { padding: var(--s-40); }

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: var(--s-12);
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.card-desc {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-text-muted);
}

/* Feature card (grillas de características) */
.feature-card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--s-32);
  transition: all var(--t-base);
  overflow: hidden;
}
.feature-card:hover {
  border-color: var(--c-border-strong);
  border-bottom-color: var(--c-accent);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-20);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0;
}
.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--s-12);
  letter-spacing: -0.02em;
}
.feature-card p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-text-muted);
}

/* Coverage card (cobertura nacional) */
.coverage-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-20);
  text-align: center;
  transition: all var(--t-base);
}
.coverage-card:hover {
  border-color: var(--c-accent);
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}
.coverage-card strong {
  display: block;
  font-family: var(--f-mono);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: var(--s-4);
  font-feature-settings: "tnum";
}
.coverage-card span {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
  font-weight: 700;
}

/* ============================================================
 * 8. SEARCH RESULTS — 2 COLUMNAS EDITORIALES
 * ============================================================ */

.result-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-16);
}
@media (min-width: 640px) {
  .result-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-20);
  }
}

.result-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-16);
  padding: var(--s-24) var(--s-28);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 2px solid var(--c-border-strong);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  transition: background var(--t-fast);
}
.result-item:hover {
  background: var(--c-bg-elev);
  border-top-color: var(--c-accent);
  text-decoration: none;
}
.result-item:focus-visible { outline: none; background: var(--c-bg-elev); }

.result-action {
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--c-accent);
  margin-top: var(--s-8);
  transition: transform var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
}
.result-item:hover .result-action {
  transform: translateX(4px);
}

/* --- Transparencia institucional --- */
.transparency-main {
  padding-top: clamp(2.75rem, 6vw, 5rem);
}
.transparency-shell {
  max-width: 1120px;
}
.transparency-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  margin-top: var(--s-28);
}
.transparency-hero-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--s-8) var(--s-14);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  color: var(--c-text-muted);
  background: var(--c-surface);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.transparency-section-heading {
  max-width: 760px;
  margin-bottom: var(--s-32);
}
.transparency-section-heading.compact {
  margin-bottom: var(--s-28);
}
.transparency-section-heading .eyebrow,
.transparency-panel-heading .eyebrow,
.transparency-report .eyebrow {
  margin-bottom: var(--s-10);
}
.transparency-section-heading h2,
.transparency-panel-heading h2,
.transparency-report h2,
.transparency-scope h2 {
  color: var(--c-text);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.transparency-section-heading > p:last-child,
.transparency-panel-heading > p:last-child {
  max-width: 720px;
  margin-top: var(--s-14);
  color: var(--c-text-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.transparency-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-16);
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.transparency-principle,
.transparency-source-card,
.transparency-data-card {
  min-width: 0;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: var(--sh-xs);
}
.transparency-principle {
  padding: var(--s-24);
  border-top: 2px solid var(--c-border-strong);
}
.transparency-card-number {
  display: block;
  margin-bottom: var(--s-32);
  color: var(--c-accent);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-weight: 700;
}
.transparency-principle h3,
.transparency-source-card h3,
.transparency-steps h3 {
  color: var(--c-text);
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.transparency-principle p,
.transparency-source-card p,
.transparency-steps p {
  margin-top: var(--s-8);
  color: var(--c-text-muted);
  font-size: 0.96875rem;
  line-height: 1.65;
}
.transparency-source-panel {
  margin-inline: calc(var(--s-24) * -1);
  margin-bottom: clamp(3rem, 7vw, 5rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--c-border);
  background: var(--c-bg-elev);
}
.transparency-panel-heading {
  max-width: 760px;
  margin-bottom: var(--s-28);
}
.transparency-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-16);
}
.transparency-source-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.transparency-source-type,
.transparency-card-label {
  display: block;
  margin-bottom: var(--s-12);
  color: var(--c-accent);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.transparency-source-card a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  min-height: 44px;
  margin-top: auto;
  padding-top: var(--s-20);
  color: var(--c-accent-hover);
  font-size: 0.9375rem;
  font-weight: 750;
}
.transparency-process {
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.transparency-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-16);
  padding: 0;
  list-style: none;
}
.transparency-steps li {
  min-width: 0;
  padding: var(--s-24);
  border: 1px solid var(--c-border);
  border-top: 2px solid var(--c-border-strong);
  border-radius: 3px;
  background: var(--c-surface);
}
.transparency-steps li > span {
  display: grid;
  width: 36px;
  height: 36px;
  margin-bottom: var(--s-24);
  place-items: center;
  border: 1px solid var(--c-border-strong);
  border-radius: 50%;
  color: var(--c-accent);
  background: var(--c-surface);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-weight: 700;
}
.transparency-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-16);
  margin-bottom: var(--s-20);
}
.transparency-data-card {
  padding: clamp(1.4rem, 3vw, 2rem);
}
.transparency-data-card.privacy {
  background: var(--c-bg-elev);
}
.transparency-data-card h2 {
  margin-bottom: var(--s-20);
  color: var(--c-text);
  font-size: 1.4rem;
  letter-spacing: -0.025em;
}
.transparency-data-card ul {
  display: grid;
  gap: var(--s-12);
  padding: 0;
  color: var(--c-text-muted);
  font-size: 1rem;
  line-height: 1.6;
  list-style: none;
}
.transparency-data-card li {
  position: relative;
  padding-left: var(--s-24);
}
.transparency-data-card li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--c-accent);
  content: "";
}
.transparency-report {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-32);
  align-items: center;
  margin-block: var(--s-20);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--c-border-strong);
  border-left: 3px solid var(--c-accent);
  background: var(--c-surface);
  scroll-margin-top: calc(var(--header-h) + var(--s-24));
}
.transparency-report > div:first-child > p:not(.eyebrow) {
  max-width: 700px;
  margin-top: var(--s-14);
  color: var(--c-text-muted);
  font-size: 1rem;
  line-height: 1.65;
}
.transparency-privacy-note {
  padding: var(--s-12) var(--s-14);
  background: var(--c-accent-soft);
  color: var(--c-text) !important;
}
.transparency-report-action {
  display: flex;
  min-width: 220px;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-10);
  text-align: center;
}
.transparency-report-action .btn {
  min-height: 52px;
  white-space: nowrap;
}
.transparency-report-action span {
  color: var(--c-text-muted);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}
.transparency-scope {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: var(--s-32);
  align-items: start;
  margin-top: var(--s-20);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--c-border);
  background: var(--c-bg-elev);
}
.transparency-scope h2 {
  font-size: 1.4rem;
}
.transparency-scope > p {
  color: var(--c-text-muted);
  font-size: 1rem;
  line-height: 1.7;
}
@media (max-width: 900px) {
  .transparency-principles,
  .transparency-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .transparency-report {
    grid-template-columns: 1fr;
  }
  .transparency-report-action {
    min-width: 0;
    align-items: flex-start;
    text-align: left;
  }
}
@media (max-width: 640px) {
  .transparency-hero-meta {
    display: grid;
    grid-template-columns: 1fr;
  }
  .transparency-hero-meta span {
    justify-content: center;
  }
  .transparency-principles,
  .transparency-source-grid,
  .transparency-steps,
  .transparency-data-grid,
  .transparency-scope {
    grid-template-columns: 1fr;
  }
  .transparency-principle {
    padding: var(--s-20);
  }
  .transparency-card-number {
    margin-bottom: var(--s-20);
  }
  .transparency-source-panel {
    margin-inline: 0;
  }
  .transparency-steps li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--s-14);
    padding: var(--s-20);
  }
  .transparency-steps {
    gap: var(--s-12);
  }
  .transparency-steps li > span {
    margin-bottom: 0;
  }
  .transparency-report-action,
  .transparency-report-action .btn {
    width: 100%;
  }
  .transparency-report-action .btn {
    white-space: normal;
  }
}

.result-cargo {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-accent);
}
.result-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-10) var(--s-20);
  font-size: 0.9375rem;
  color: var(--c-text-muted);
  line-height: 1.55;
}
.result-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
}
.result-meta-icon {
  width: 16px; height: 16px;
  color: var(--c-accent);
  opacity: 0.9;
  flex-shrink: 0;
}

.result-empty {
  padding: var(--s-64) var(--s-32);
  text-align: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  color: var(--c-text-muted);
}
.result-empty strong { color: var(--c-text); display: block; font-size: 1.25rem; margin-bottom: var(--s-10); }
.suggestions {
  margin-top: var(--s-24);
  text-align: left;
  display: inline-block;
  padding-left: var(--s-28);
  list-style: disc;
  color: var(--c-text-muted);
  font-size: 1rem;
  line-height: 1.7;
}
.suggestions em { font-style: normal; color: var(--c-text); font-weight: 600; }

/* Mapas territoriales: reservar un espacio real antes de inicializar Leaflet. */
.map-container {
  width: 100%;
  min-height: clamp(280px, 38vw, 430px);
  overflow: hidden;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-border);
  border-radius: 3px;
  box-shadow: var(--sh-xs);
}

.map-fallback {
  display: grid;
  min-height: inherit;
  margin: 0;
  padding: var(--s-24);
  place-content: center;
  gap: var(--s-8);
  color: var(--c-text-muted);
  text-align: center;
}

.map-fallback strong {
  color: var(--c-text);
  font-size: 1.0625rem;
}

.map-fallback span { display: block; }

.territory-map-section { padding-bottom: var(--s-24); }
.territory-map-section + .territory-results-section { padding-top: var(--s-24); }

/* Información complementaria de los generadores. */
.content-narrow {
  max-width: 920px;
  margin-inline: auto;
}

.info-disclosure {
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 3px;
  box-shadow: var(--sh-xs);
}

.info-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  min-height: 58px;
  padding: var(--s-14) var(--s-20);
  color: var(--c-text);
  font-size: 1.0625rem;
  font-weight: 750;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.info-disclosure summary::-webkit-details-marker { display: none; }

.info-disclosure summary::after {
  content: "+";
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--c-accent);
  border: 1px solid var(--c-border-strong);
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
  flex: 0 0 auto;
  transition: transform var(--t-fast);
}

.info-disclosure[open] summary::after { transform: rotate(45deg); }

.info-disclosure summary:focus-visible {
  outline: none;
  box-shadow: inset var(--sh-ring);
}

.info-disclosure-body {
  padding: var(--s-20);
  color: var(--c-text-muted);
  border-top: 1px solid var(--c-border-faint);
  font-size: 1rem;
  line-height: 1.7;
}

.info-disclosure-body > * + * { margin-top: var(--s-16); }
.info-disclosure-body ul,
.info-disclosure-body ol { padding-left: var(--s-24); }
.info-disclosure-body li + li { margin-top: var(--s-8); }
.info-disclosure-body a { font-weight: 650; text-underline-offset: 3px; }

@media (max-width: 520px) {
  .result-item { padding: var(--s-20); }
  .map-container { min-height: 300px; }
  .info-disclosure summary { padding-inline: var(--s-16); font-size: 1rem; }
  .info-disclosure-body { padding: var(--s-16); }
}

/* ============================================================
 * 9. FEATURE & TRUST GRIDS
 * ============================================================ */

.coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--s-16);
}

.feature-grid {
  display: grid;
  gap: var(--s-28);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-32); }
}
@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-32); }
}

.trust-grid {
  display: grid;
  gap: var(--s-24);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-24); } }

.trust-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--s-28);
  transition: all var(--t-base);
}
.trust-card:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
.trust-card .check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--c-success-soft);
  color: var(--c-success);
  border-radius: var(--r-full);
  margin-bottom: var(--s-16);
  font-size: 0.875rem;
  font-weight: 700;
}
.trust-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: var(--s-8);
  letter-spacing: -0.015em;
}
.trust-card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

/* ============================================================
 * 10. FAQ ACCORDION
 * ============================================================ */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  max-width: 880px;
}
.faq-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: all var(--t-base);
}
.faq-item[open] {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-md);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-20);
  padding: var(--s-28) var(--s-32);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-text);
  cursor: pointer;
  list-style: none;
  transition: background var(--t-fast);
  line-height: 1.4;
  letter-spacing: -0.015em;
}
.faq-item summary:hover { background: var(--c-surface-hover); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--c-text-muted);
  transition: transform var(--t-base);
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item > p {
  padding: 0 var(--s-32) var(--s-32);
  color: var(--c-text-muted);
  font-size: 1.0625rem;
  line-height: 1.75;
  margin: 0;
}

/* ============================================================
 * 11. DETAIL HERO
 * ============================================================ */

.detail-hero {
  position: relative;
  padding: var(--s-16) 0 var(--s-28);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg);
  overflow: hidden;
}
.detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--c-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 20%, transparent 85%);
  pointer-events: none;
}
.detail-hero-inner { position: relative; }

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-6) var(--s-10);
  font-size: 0.875rem;
  color: var(--c-text-soft);
  margin: 0 0 var(--s-16) 0;
}
.breadcrumb a { color: var(--c-text-muted); font-weight: 500; }
.breadcrumb a:hover { color: var(--c-text); text-decoration: none; }
.breadcrumb [aria-current="page"] { color: var(--c-text); font-weight: 700; }
.breadcrumb-sep { color: var(--c-text-soft); user-select: none; }

.detail-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.125rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: var(--s-16);
  color: var(--c-text);
}
.detail-hero .hero-sub {
  margin: 0;
  text-align: left;
  max-width: 800px;
}
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-20);
  align-items: center;
  color: var(--c-text-muted);
  font-size: 0.96875rem;
  margin-top: var(--s-24);
}
.detail-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
}
.meta-icon {
  width: 16px; height: 16px;
  color: var(--c-accent);
  flex-shrink: 0;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  padding: 6px var(--s-16);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-success);
  background: var(--c-success-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
}
.badge-vacante { color: var(--c-warn); background: var(--c-warn-soft); }

/* ============================================================
 * 12. TWO-COLUMN LAYOUT & INFO CARDS
 * ============================================================ */

/* ============================================================
 * 12. UNIFIED PROFILE SHEET (Ficha Notarial Unificada)
 * ============================================================ */

.profile-sheet {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  padding: var(--s-36);
  max-width: 1040px;
  margin: 0 auto;
}
@media (max-width: 639px) {
  .profile-sheet { padding: var(--s-20); }
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-24);
  padding-bottom: var(--s-24);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--s-24);
}
.profile-name {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--c-text);
  margin-bottom: var(--s-8);
}
.profile-comuna {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  font-size: 0.96875rem;
  color: var(--c-text-muted);
  font-weight: 500;
}

.profile-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-16);
  margin-bottom: var(--s-32);
}
@media (min-width: 640px) {
  .profile-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.kpi-card {
  padding: var(--s-16) var(--s-20);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.kpi-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-soft);
}
.kpi-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
}

.profile-body-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-32);
}
@media (min-width: 768px) {
  .profile-body-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-40);
  }
}

.profile-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-20);
}
.profile-section-title {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  padding-bottom: var(--s-12);
  border-bottom: 1px solid var(--c-border);
}
.profile-section-title h2 {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.data-point-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  list-style: none;
  padding: 0; margin: 0;
}
.data-point {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.dp-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-accent);
}
.dp-value {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-text);
}
.dp-text {
  font-size: 0.96875rem;
  line-height: 1.65;
  color: var(--c-text-muted);
  margin: 0;
}
.profile-info-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ============================================================
 * 12. DETAIL CARDS (Tarjetas Notariales de Alto Calibre)
 * ============================================================ */

.detail-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--s-36);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (max-width: 639px) {
  .detail-card { padding: var(--s-20); }
}

.detail-card-header {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding-bottom: var(--s-20);
  margin-bottom: var(--s-24);
  border-bottom: 1px solid var(--c-border);
}
.detail-card-header h2 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--c-text);
  margin: 0;
}
.detail-card-icon {
  width: 24px; height: 24px;
  color: var(--c-accent);
  flex-shrink: 0;
}

/* Grilla de Datos Clave: Etiqueta Izquierda, Valor Derecha */
.data-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--s-20);
}
.data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-14) 0;
  border-bottom: 1px solid var(--c-border-faint);
  gap: var(--s-16);
  font-size: 0.96875rem;
  line-height: 1.5;
}
.data-row:last-child { border-bottom: none; }
.data-label {
  font-size: 0.78125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-soft);
  flex-shrink: 0;
}
.data-value {
  color: var(--c-text);
  text-align: right;
  word-break: break-word;
}

.data-notice {
  padding: var(--s-20);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  margin-top: auto;
}
.data-notice p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0;
}

/* Bloques Legales Generosos */
.legal-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--s-28);
}
.legal-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-bottom: var(--s-20);
  border-bottom: 1px solid var(--c-border-faint);
}
.legal-item:last-child { border-bottom: none; padding-bottom: 0; }
.legal-item h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-accent);
  margin: 0;
}
.contact-pending-note {
  margin-top: var(--s-20);
  padding-top: var(--s-16);
  border-top: 1px solid var(--c-border-faint);
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

/* --- Profile Data Grid (replaces old info-card boxes) --- */

.profile-grid {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 0;
  margin: 0;
}
.profile-grid dt,
.profile-grid dd {
  padding: var(--s-14) 0;
  border-bottom: 1px solid var(--c-border-faint);
  line-height: 1.6;
  margin: 0;
}
.profile-grid dt {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-soft);
  padding-right: var(--s-24);
  align-self: center;
}
.profile-grid dd {
  font-size: 1rem;
  color: var(--c-text);
  word-break: break-word;
}
.profile-grid dt:last-of-type,
.profile-grid dd:last-of-type {
  border-bottom: none;
}
@media (max-width: 480px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
  .profile-grid dt {
    padding-bottom: var(--s-4);
    border-bottom: none;
  }
  .profile-grid dd {
    padding-top: 0;
    padding-bottom: var(--s-16);
  }
}

/* --- Legal Footer Section --- */

.legal-footer {
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-elev);
}
.legal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-32);
}
@media (min-width: 768px) {
  .legal-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-40); }
}
.legal-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-accent);
  margin-bottom: var(--s-10);
}
.legal-grid p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--c-text-muted);
  margin: 0;
}

/* --- Legacy classes kept for other pages --- */

.two-col {
  display: grid;
  gap: var(--s-32);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .two-col { grid-template-columns: 1fr 1fr; gap: var(--s-40); }
}

.info-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--s-36);
  box-shadow: var(--sh-xs);
}
.info-card-header {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  margin-bottom: var(--s-20);
  padding-bottom: var(--s-16);
  border-bottom: 1px solid var(--c-border);
}
.info-card-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.info-card-icon {
  width: 22px; height: 22px;
  color: var(--c-accent);
  flex-shrink: 0;
}

.info-list {
  display: grid;
  grid-template-columns: minmax(110px, max-content) 1fr;
  gap: var(--s-14) var(--s-20);
  font-size: 0.96875rem;
  line-height: 1.6;
}
.info-list dt {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-soft);
  align-self: center;
}
.info-list dd {
  margin: 0;
  color: var(--c-text);
  word-break: break-word;
}
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { margin-bottom: var(--s-6); }
.contact-list li:last-child { margin-bottom: 0; }

.prose {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--c-text-muted);
}
.prose p { margin-bottom: var(--s-20); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--c-text); font-weight: 600; }

/* ============================================================
 * 13. CALCULATOR & INTERACTIVE TOOLS
 * ============================================================ */

.calc-card {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--s-32);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.calc-label {
  display: block;
  font-size: 0.9125rem;
  font-weight: 700;
  color: var(--c-text-muted);
  margin-bottom: var(--s-8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.calc-input {
  width: 100%;
  height: 46px;
  padding: 0 var(--s-16);
  font-size: 1rem;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text);
  margin-bottom: var(--s-20);
  transition: border-color var(--t-fast);
  font-feature-settings: "tnum";
}
.calc-input:focus {
  outline: none;
  border-color: var(--c-accent);
}
.calc-button {
  width: 100%;
  height: 46px;
  margin-top: var(--s-8);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--r-md);
}

.calc-result {
  max-width: 640px;
  margin: var(--s-32) auto 0;
  padding: var(--s-28);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: none;
}
.calc-result-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--s-10);
}
.calc-result-rango {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--c-accent);
  font-family: var(--f-mono);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-8);
  font-feature-settings: "tnum";
}

/* ============================================================
 * 14. FOOTER
 * ============================================================ */

.site-footer {
  margin-top: var(--s-120);
  padding: var(--s-80) 0 var(--s-48);
  background: var(--c-bg-elev);
  border-top: 1px solid var(--c-border);
}
.footer-grid {
  display: grid;
  gap: var(--s-48);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-56);
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }

.footer-brand p {
  color: var(--c-text-muted);
  font-size: 0.96875rem;
  line-height: 1.7;
  margin-top: var(--s-20);
  max-width: 400px;
}
.footer-col h4 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-text-muted);
  margin-bottom: var(--s-20);
}
.footer-col ul li { margin-bottom: var(--s-12); }
.footer-col a {
  font-size: 0.96875rem;
  color: var(--c-text);
  font-weight: 500;
}
.footer-col a:hover { color: var(--c-accent); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-24);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-40);
  border-top: 1px solid var(--c-border);
  font-size: 0.9375rem;
  color: var(--c-text-soft);
}
.footer-bottom a { color: var(--c-text-muted); }
.footer-bottom a:hover { color: var(--c-text); }

/* ============================================================
 * 15. PILLAR PAGES
 * ============================================================ */

.pillar-hero { padding: var(--s-80) 0 var(--s-56); }
.pillar-hero h1 {
  font-size: clamp(2.5rem, 5.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin-bottom: var(--s-24);
}

.pillar-layout {
  display: grid;
  gap: var(--s-40);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .pillar-layout {
    grid-template-columns: 280px 1fr;
    gap: var(--s-64);
  }
}

.pillar-toc { position: relative; }
@media (min-width: 1024px) {
  .pillar-toc {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 64px);
    overflow-y: auto;
  }
}
.pillar-toc-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-text-muted);
  margin-bottom: var(--s-20);
}
.pillar-toc-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--c-border);
}
.pillar-toc-list a {
  display: flex;
  gap: var(--s-12);
  align-items: baseline;
  padding: var(--s-10) var(--s-16);
  font-size: 0.9375rem;
  color: var(--c-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: all var(--t-fast);
  line-height: 1.45;
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.pillar-toc-list a:hover {
  color: var(--c-text);
  background: var(--c-surface-hover);
  border-left-color: var(--c-accent);
  text-decoration: none;
}
.pillar-toc-list .toc-num {
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  color: var(--c-text-soft);
  font-feature-settings: "tnum";
  flex-shrink: 0;
  min-width: 24px;
}

.pillar-content { max-width: 820px; }
.pillar-intro {
  font-size: 1.25rem;
  line-height: 1.75;
  color: var(--c-text);
  margin-bottom: var(--s-48);
  padding-bottom: var(--s-32);
  border-bottom: 1px solid var(--c-border);
}

.pillar-section {
  margin-bottom: var(--s-64);
  padding-top: var(--s-48);
  border-top: 1px solid var(--c-border);
}
.pillar-section:first-of-type { border-top: 0; padding-top: 0; }
.pillar-h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: var(--s-28);
  color: var(--c-text);
}

.pillar-prose {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--c-text-muted);
}
.pillar-prose p { margin-bottom: var(--s-24); }

/* Pillar Card Grid */
.pillar-related-grid {
  display: grid;
  gap: var(--s-28);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pillar-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillar-related-grid { grid-template-columns: repeat(3, 1fr); } }

.pillar-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-32);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  text-decoration: none;
  color: inherit;
  transition: all var(--t-base);
  position: relative;
  overflow: hidden;
}
.pillar-card:hover {
  border-color: var(--c-border-strong);
  border-bottom-color: var(--c-accent);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.pillar-card h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  margin-bottom: var(--s-12);
  letter-spacing: -0.02em;
  color: var(--c-text);
}
.pillar-card p {
  font-size: 0.96875rem;
  line-height: 1.65;
  color: var(--c-text-muted);
  flex: 1;
  margin-bottom: var(--s-20);
}
.pillar-card-cta {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  transition: gap var(--t-fast);
}
.pillar-card:hover .pillar-card-cta { gap: var(--s-12); }

/* ============================================================
 * 16. FORMS & GENERATOR PDF
 * ============================================================ */

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-20);
  margin-bottom: var(--s-20);
}
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
.form-field-full { grid-column: 1 / -1; }
.form-grid-full { grid-template-columns: 1fr !important; }

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.form-field > span {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-text);
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-width: 0;
  font-size: 0.9375rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text);
  -webkit-text-fill-color: var(--c-text);
  caret-color: var(--c-text);
  transition: border-color var(--t-fast);
}
.form-field input,
.form-field select {
  height: 46px;
  padding: 0 var(--s-14);
  text-overflow: ellipsis;
}
.form-field textarea {
  min-height: 104px;
  padding: var(--s-12) var(--s-14);
  line-height: 1.5;
  resize: vertical;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--c-text-soft);
  -webkit-text-fill-color: var(--c-text-soft);
  font-size: 0.875rem;
  opacity: 0.75;
}
.form-step-header {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  margin-top: var(--s-32);
  margin-bottom: var(--s-16);
  padding-bottom: var(--s-10);
  border-bottom: 1px solid var(--c-border-faint);
}
.form-step-header:first-child,
form > .form-step-header:first-of-type {
  margin-top: 0;
}
.form-step-header h2 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--c-text);
}
.form-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 var(--s-8);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--c-accent);
  background: var(--c-accent-soft);
  border-radius: var(--r-sm);
  flex-shrink: 0;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
}

.form-field.form-radio {
  flex-direction: row;
  align-items: center;
  gap: var(--s-14);
  padding: var(--s-14) var(--s-18);
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.form-field.form-radio:has(input:checked) {
  border-color: var(--c-accent);
  background: var(--c-bg-elev);
}

.radio-text {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  font-size: 0.96875rem;
  font-weight: 600;
}

/* ============================================================
 * 18. REDISEÑO 2026 — papel, orden y velocidad
 * ============================================================ */

body {
  font-size: 16px;
  line-height: 1.62;
}

.site-header {
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  border-bottom-color: var(--c-border-faint);
  backdrop-filter: blur(12px);
}

.header-inner { min-height: 68px; }
.brand { letter-spacing: -0.025em; }
.brand-mark { border-radius: 3px; }

.main-nav a,
.theme-toggle {
  font-size: 0.9rem;
  font-weight: 650;
}

.hero {
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
}

.hero-inner { max-width: 850px; }
.hero h1 {
  max-width: 820px;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.01;
  text-wrap: balance;
}

.hero-sub {
  max-width: 760px;
  font-size: clamp(1rem, 2vw, 1.18rem);
  text-wrap: pretty;
}

.search-form {
  border-radius: 2px;
  box-shadow: 0 14px 38px rgba(10, 10, 10, 0.08);
}

.trust-bar,
.feature-card,
.trust-card,
.pillar-card,
.faq-item,
.result-empty {
  border-radius: 2px;
}

.section { padding-block: clamp(3rem, 6vw, 5rem); }
.section-heading { max-width: 760px; }
.section-heading h2 { text-wrap: balance; }
.section-heading .btn { margin-top: var(--s-20); }

.feature-card,
.trust-card,
.pillar-card {
  box-shadow: none;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}

.feature-card:hover,
.trust-card:hover,
.pillar-card:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

.pillar-card {
  position: relative;
  border-top: 2px solid var(--c-border-strong);
}

.pillar-card:hover { border-top-color: var(--c-accent); }

/* La portada orienta; el catálogo conserva los 50 modelos. */
#herramientas .pillar-related-grid > .pillar-card:nth-child(n + 7) {
  display: none;
}

.detail-card,
.office-card,
.comuna-card {
  border-radius: 2px;
}

@media (max-width: 720px) {
  .site-header { backdrop-filter: none; }
  .hero { padding-block: 3rem 2.5rem; }
  .hero h1 { font-size: clamp(2.35rem, 13vw, 3.5rem); }
  .hero h1 br { display: block; }
  .hero-sub { line-height: 1.55; }
  .trust-bar { grid-template-columns: 1fr 1fr 1fr; }
  .trust-stat { padding-inline: 0.45rem; }
  .trust-stat-value { font-size: 1.45rem; }
  .trust-stat-label { font-size: 0.62rem; letter-spacing: 0.04em; }
}

@media (max-width: 360px) {
  .container { padding-inline: 0.85rem; }
  .header-inner { min-height: 62px; }
  .brand { font-size: 1rem; }
  .brand-mark { width: 34px; height: 34px; }
  .hero h1 { font-size: 2.25rem; }
  .search-form { padding: 0.35rem; }
  .search-form input { min-width: 0; padding-inline: 0.65rem; }
  .search-form .btn { padding-inline: 0.85rem; }
}

/* Tooltip */
.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--c-border-strong);
  color: var(--c-bg);
  border-radius: var(--r-full);
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: help;
  position: relative;
  transition: background var(--t-fast);
}
.tooltip-icon:hover {
  background: var(--c-accent);
}
.tooltip-icon::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translate(-50%, 6px) scale(0.95);
  background: var(--c-primary);
  color: var(--c-primary-contrast);
  padding: var(--s-8) var(--s-12);
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  white-space: normal;
  width: 220px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: 10;
  box-shadow: var(--sh-md);
}
.tooltip-icon:hover::before {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.tooltip-icon:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

@media (max-width: 480px) {
  .tooltip-icon::before {
    left: auto;
    right: 0;
    width: min(220px, calc(100vw - 48px));
    transform: translateY(6px) scale(0.95);
  }
  .tooltip-icon:hover::before,
  .tooltip-icon:focus-visible::before {
    transform: translateY(0) scale(1);
  }
}

/* --- Alert Banner (Flat layout warn box) --- */
.alert-banner {
  padding: var(--s-20) var(--s-24);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  margin-bottom: var(--s-24);
}
.alert-warn {
  background: var(--c-warn-soft);
  border-color: var(--c-warn);
}
.alert-warn h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-warn);
  margin-bottom: var(--s-8);
  margin-top: 0;
}
.alert-warn p, .alert-warn ul {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--c-text);
  margin-bottom: var(--s-12);
}
.alert-warn p:last-child, .alert-warn ul:last-child {
  margin-bottom: 0;
}
.alert-warn ul {
  padding-left: var(--s-20);
}
details.accordion-legal {
  padding: 0;
  border-radius: var(--r-md);
  transition: all var(--t-fast);
}
details.accordion-legal summary {
  padding: var(--s-14) var(--s-20);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-warn);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
details.accordion-legal summary::-webkit-details-marker { display: none; }
details.accordion-legal summary .acc-arrow {
  font-size: 0.75rem;
  transition: transform var(--t-fast);
}
details.accordion-legal[open] summary .acc-arrow {
  transform: rotate(180deg);
}
details.accordion-legal .accordion-body {
  padding: var(--s-16) var(--s-20) var(--s-20);
  border-top: 1px solid rgba(139, 90, 26, 0.15);
}

@media (max-width: 639px) {
  .main-nav a:not(.btn) { display: none; }
  .hero { padding: var(--s-80) 0 var(--s-56); }
  .detail-hero { padding: var(--s-56) 0 var(--s-36); }
  .section { padding: var(--s-56) 0; }
  .section-lg { padding: var(--s-80) 0; }
  .container, .container-narrow, .container-wide { padding-left: var(--s-16); padding-right: var(--s-16); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
 * 19. SISTEMA ÚNICO 2026 — marca, navegación y accesibilidad
 * ============================================================ */

body {
  font-size: 17px;
  line-height: 1.65;
}

.site-header {
  height: auto;
  min-height: 76px;
  z-index: 100;
  background: color-mix(in srgb, var(--c-bg) 96%, transparent);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}

.header-inner { min-height: 76px; }

.brand {
  gap: 0.7rem;
  min-width: 0;
  border-radius: var(--r-md);
}

.brand:focus-visible { outline: none; box-shadow: var(--sh-ring); }

.brand-mark {
  width: 42px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: #172033;
  box-shadow: 0 5px 16px rgba(23, 32, 51, 0.18);
}

.brand-mark img,
.brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.brand:hover .brand-mark { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(23, 32, 51, 0.22); }
.brand:hover .brand-mark img,
.brand:hover .brand-mark svg { transform: none; }

.brand-copy { display: grid; gap: 0.16rem; min-width: 0; }
.brand-name { font-size: 1.22rem; font-weight: 760; letter-spacing: -0.035em; white-space: nowrap; }
.brand-copy small {
  color: var(--c-text-muted);
  font-size: 0.69rem;
  font-weight: 650;
  letter-spacing: 0.075em;
  line-height: 1;
  text-transform: uppercase;
}

.main-nav { gap: 0.35rem; }
.nav-links { display: flex; align-items: center; gap: 0.2rem; }
.main-nav a,
.theme-toggle {
  min-height: 44px;
  height: 44px;
  font-size: 0.92rem;
}
.main-nav a { padding-inline: 0.85rem; }
.main-nav a[aria-current="page"] { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border)); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 82px;
  min-height: 46px;
  padding: 0.65rem 0.8rem;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1;
}
.nav-toggle:focus-visible { outline: none; box-shadow: var(--sh-ring); }
.nav-toggle-icon { display: grid; gap: 4px; width: 19px; }
.nav-toggle-icon span { display: block; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--t-fast), opacity var(--t-fast); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-backdrop[hidden] { display: none; }

.site-footer {
  margin-top: 0;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
  background: var(--c-bg-elev);
}
.footer-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(250px, 0.8fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--c-border);
}
.footer-brand p { max-width: 620px; margin-top: 1rem; font-size: 1rem; }
.footer-help {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 1rem 1.1rem;
  color: var(--c-text-muted);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: 2px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.footer-help strong { color: var(--c-text); }
.footer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 7vw, 6rem);
  margin: 0;
  padding: 2.5rem 0;
}
.footer-col h2 {
  margin-bottom: 1rem;
  color: var(--c-text-muted);
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-col li { margin-bottom: 0.55rem; }
.footer-col a { display: inline-flex; min-height: 44px; align-items: center; font-size: 0.98rem; }
.footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 1rem 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.footer-trust span {
  padding: 0.32rem 0.7rem;
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
}
.footer-bottom { padding-top: 1.4rem; border: 0; font-size: 0.84rem; }

button,
input,
select,
textarea { scroll-margin-top: 7rem; }

@media (max-width: 859px) {
  .site-header { min-height: 68px; backdrop-filter: none; }
  .header-inner { min-height: 68px; }
  .brand-copy small { display: none; }
  .nav-toggle { display: inline-flex; position: relative; z-index: 4; }
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(88vw, 370px);
    padding: 6.3rem 1.25rem 1.5rem;
    background: var(--c-bg);
    border-left: 1px solid var(--c-border);
    box-shadow: -18px 0 50px rgba(10, 10, 10, 0.18);
    transform: translateX(104%);
    visibility: hidden;
    transition: transform 220ms ease, visibility 220ms ease;
  }
  .nav-open .main-nav { transform: translateX(0); visibility: visible; }
  .nav-links { display: grid; gap: 0.4rem; }
  .main-nav a:not(.btn) {
    display: flex;
    justify-content: flex-start;
    min-height: 52px;
    padding-inline: 1rem;
    border: 1px solid transparent;
    font-size: 1.06rem;
  }
  .main-nav a[aria-current="page"] { border-color: var(--c-border); }
  .theme-toggle { width: 52px; min-height: 52px; margin-top: 0.8rem; padding: 0; }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgba(6, 10, 18, 0.54);
    border: 0;
  }
  body.nav-open { overflow: hidden; }
  .footer-intro { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 639px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.3rem; }
  .footer-col { padding-bottom: 0.8rem; border-bottom: 1px solid var(--c-border-faint); }
}

@media (max-width: 360px) {
  .brand { gap: 0.5rem; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-name { font-size: 1rem; }
  .nav-toggle { min-width: 76px; padding-inline: 0.65rem; }
}

@media print {
  .nav-toggle,
  .nav-backdrop { display: none !important; }
}

/* Calculadora 2026 */
.calc-section { background: linear-gradient(180deg, var(--c-bg), var(--c-bg-elev)); }
.calc-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  max-width: 1060px;
  margin-inline: auto;
}
.calc-main { min-width: 0; }
.calc-card,
.calc-result { max-width: none; margin-inline: 0; }
.calc-card { padding: clamp(1.35rem, 4vw, 2.5rem); border-radius: 3px; box-shadow: 0 16px 44px rgba(10, 10, 10, 0.06); }
.calc-card h2 { margin-bottom: 0.45rem; font-size: clamp(1.45rem, 3vw, 1.85rem); }
.calc-step,
.calc-guide-kicker {
  margin-bottom: 0.45rem;
  color: var(--c-accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.calc-intro { margin-bottom: 1.65rem; color: var(--c-text-muted); max-width: 54ch; }
.calc-label { margin-top: 0.35rem; color: var(--c-text); font-size: 0.88rem; letter-spacing: 0.035em; }
.calc-input {
  min-height: 52px;
  height: 52px;
  margin-bottom: 0.55rem;
  padding-inline: 0.95rem;
  background: var(--c-bg);
  border-color: var(--c-border-strong);
  font-size: 1.04rem;
}
.calc-input:focus { border-color: var(--c-accent); box-shadow: var(--sh-ring); }
.calc-hint { margin: 0 0 1.2rem; color: var(--c-text-muted); font-size: 0.88rem; line-height: 1.5; }
.calc-group { margin-top: 1.25rem; }
.calc-money-field { position: relative; }
.calc-money-field > span {
  position: absolute;
  top: 50%;
  left: 1rem;
  z-index: 1;
  color: var(--c-text-muted);
  font-weight: 750;
  transform: translateY(-57%);
}
.calc-money-field .calc-input { padding-left: 2.1rem; }
.calc-status { min-height: 1.6rem; margin: 0.4rem 0; color: var(--c-danger, #b42318); font-size: 0.92rem; font-weight: 700; }
.calc-button { min-height: 52px; height: 52px; margin-top: 0.35rem; font-size: 1.02rem; }
.calc-button:disabled { cursor: not-allowed; opacity: 0.58; }
.calc-guide {
  position: sticky;
  top: 6.4rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-accent);
  border-radius: 3px;
}
.calc-guide h2 { margin-bottom: 1.2rem; font-size: 1.45rem; }
.calc-guide ol { display: grid; gap: 1.15rem; padding: 0; margin: 0; list-style: none; counter-reset: guide; }
.calc-guide li { position: relative; display: grid; gap: 0.18rem; padding-left: 2.35rem; counter-increment: guide; }
.calc-guide li::before {
  content: counter(guide);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  color: var(--c-primary-contrast);
  background: var(--c-primary);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
}
.calc-guide li strong { color: var(--c-text); font-size: 0.98rem; }
.calc-guide li span { color: var(--c-text-muted); font-size: 0.89rem; line-height: 1.5; }
.calc-guide-note { margin: 1.4rem 0 0; padding-top: 1.1rem; color: var(--c-text-muted); border-top: 1px solid var(--c-border); font-size: 0.86rem; }
.calc-result { padding: clamp(1.35rem, 4vw, 2.2rem); border-radius: 3px; box-shadow: 0 16px 44px rgba(10, 10, 10, 0.06); }
.calc-result:focus { outline: none; }
.calc-result-title { margin-bottom: 1rem; color: var(--c-text); font-size: 1.35rem; letter-spacing: -0.015em; text-transform: none; }
.calc-result-ranges { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 1.2rem; }
.calc-result-ranges > div { display: grid; gap: 0.25rem; padding: 1rem; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 2px; }
.calc-result-ranges span { color: var(--c-text-muted); font-size: 0.78rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; }
.calc-result-ranges strong { color: var(--c-accent); font-family: var(--f-mono); font-size: clamp(1.25rem, 4vw, 1.9rem); line-height: 1.2; }
.calc-result-sub { color: var(--c-text-muted); }
.calc-desglose { margin-top: 1.2rem; border: 1px solid var(--c-border); border-radius: 2px; }
.calc-desglose summary { min-height: 50px; padding: 0.8rem 1rem; color: var(--c-text); font-weight: 750; cursor: pointer; }
.calc-desglose-list { padding: 0 1rem 1rem; }
.calc-desglose-list li { display: flex; gap: 1rem; justify-content: space-between; padding: 0.75rem 0; border-top: 1px solid var(--c-border-faint); }
.calc-desglose-list li span:last-child { text-align: right; white-space: nowrap; }
.calc-next-step { display: grid; gap: 0.5rem; margin-top: 1.2rem; padding: 1rem; background: color-mix(in srgb, var(--c-accent) 9%, var(--c-bg)); border-left: 3px solid var(--c-accent); }
.calc-next-step span { color: var(--c-text-muted); font-size: 0.92rem; }
.calc-next-step .btn { width: fit-content; margin-top: 0.3rem; }
.calc-disclaimer { margin-top: 1.2rem; color: var(--c-text-muted); font-size: 0.86rem; line-height: 1.55; }
.legal-sources { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; color: var(--c-text-muted); font-size: 0.86rem; }

@media (max-width: 880px) {
  .calc-workspace { grid-template-columns: 1fr; }
  .calc-guide { position: static; }
}

@media (max-width: 520px) {
  .calc-result-ranges { grid-template-columns: 1fr; }
  .calc-desglose-list li { display: grid; gap: 0.25rem; }
  .calc-desglose-list li span:last-child { text-align: left; white-space: normal; }
  .calc-next-step .btn { width: 100%; }
}

/* ============================================================
 * 20. FICHA NOTARIAL ACCESIBLE v0.54.0
 * Tipografía amplia, tarjetas legibles y acciones para adultos mayores.
 * ============================================================ */

.detail-hero .breadcrumb {
  font-size: 1rem;
  line-height: 1.5;
}

.detail-hero .eyebrow {
  font-size: 0.9rem;
}

.detail-hero h1 {
  max-width: 21ch;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.detail-meta {
  font-size: 1.08rem;
  line-height: 1.5;
}

.detail-meta .badge {
  min-height: 40px;
  padding-inline: 1.05rem;
  font-size: 0.84rem;
}

.detail-meta-item {
  gap: 0.55rem;
}

.detail-meta-item .meta-icon {
  width: 21px;
  height: 21px;
}

.notary-profile-section {
  padding: clamp(2.75rem, 6vw, 5.25rem) 0;
}

.notary-profile-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: end;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.notary-section-kicker {
  margin: 0 0 0.55rem;
  color: var(--c-accent);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}

.notary-profile-heading h2,
.notary-context-heading h2 {
  margin: 0;
  color: var(--c-text);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-wrap: balance;
}

.notary-profile-heading > div > p:last-child,
.notary-context-heading > p:last-child {
  max-width: 62ch;
  margin: 0.9rem 0 0;
  color: var(--c-text-muted);
  font-size: 1.125rem;
  line-height: 1.65;
}

.notary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.notary-action {
  min-width: 0;
  min-height: 56px;
  height: auto;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
}

.notary-action svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
}

.notary-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.notary-info-card {
  min-width: 0;
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-border-strong);
  border-radius: 3px;
  box-shadow: 0 14px 36px rgba(10, 10, 10, 0.045);
}

.notary-info-card:hover {
  border-top-color: var(--c-accent);
}

.notary-card-heading {
  display: flex;
  gap: 1rem;
  align-items: center;
  min-height: 64px;
  padding-bottom: 1.2rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid var(--c-border);
}

.notary-card-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 10%, var(--c-bg));
  border: 1px solid color-mix(in srgb, var(--c-accent) 30%, var(--c-border));
  border-radius: 50%;
  flex: 0 0 auto;
}

.notary-card-icon svg {
  width: 24px;
  height: 24px;
}

.notary-card-heading p {
  margin: 0 0 0.2rem;
  color: var(--c-text-soft);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.065em;
  line-height: 1.35;
  text-transform: uppercase;
}

.notary-card-heading h3 {
  margin: 0;
  color: var(--c-text);
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.notary-data-list {
  margin: 0;
}

.notary-data-item {
  display: grid;
  grid-template-columns: minmax(132px, 0.38fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--c-border-faint);
}

.notary-data-item:last-child {
  border-bottom: 0;
}

.notary-data-item dt {
  color: var(--c-text-soft);
  font-size: 0.87rem;
  font-weight: 780;
  letter-spacing: 0.045em;
  line-height: 1.45;
  text-transform: uppercase;
}

.notary-data-item dd {
  min-width: 0;
  margin: 0;
  color: var(--c-text);
  font-size: 1.125rem;
  line-height: 1.58;
  overflow-wrap: anywhere;
}

.notary-data-item dd .badge {
  min-height: 38px;
  padding-inline: 0.95rem;
  font-size: 0.82rem;
}

.notary-contact-list,
.notary-coverage-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.notary-contact-list {
  display: grid;
  gap: 0.5rem;
}

.notary-contact-list a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.notary-empty-value {
  color: var(--c-text-muted);
  font-size: 0.98rem;
}

.notary-contact-note {
  margin: 1rem 0 0;
  padding: 1rem 1.05rem;
  color: var(--c-text-muted);
  background: var(--c-bg-elev);
  border-left: 3px solid var(--c-accent);
  font-size: 1.05rem;
  line-height: 1.6;
}

.notary-coverage-card {
  grid-column: 1 / -1;
}

.notary-coverage-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  padding-top: 1.15rem;
}

.notary-coverage-list li {
  padding: 0.75rem 1rem;
  color: var(--c-text);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 1.06rem;
  font-weight: 650;
  line-height: 1.35;
}

.notary-data-help {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 1.75rem);
  background: color-mix(in srgb, var(--c-accent) 7%, var(--c-bg));
  border: 1px solid color-mix(in srgb, var(--c-accent) 26%, var(--c-border));
  border-radius: 3px;
}

.notary-data-help p {
  margin: 0;
  color: var(--c-text-muted);
  font-size: 1.02rem;
  line-height: 1.55;
}

.notary-data-help strong {
  color: var(--c-text);
}

.notary-data-help .btn {
  min-height: 50px;
  height: auto;
  flex: 0 0 auto;
}

.notary-context-section {
  padding: clamp(2.75rem, 6vw, 4.5rem) 0;
  background: var(--c-bg-elev);
  border-block: 1px solid var(--c-border);
}

.notary-context-heading {
  max-width: 780px;
  margin-bottom: 1.75rem;
}

.notary-disclosures {
  display: grid;
  gap: 0.8rem;
  max-width: 980px;
}

.notary-disclosure {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 3px;
}

.notary-disclosure summary {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 1rem 1.25rem;
  color: var(--c-text);
  font-size: 1.1rem;
  font-weight: 750;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.notary-disclosure summary::-webkit-details-marker {
  display: none;
}

.notary-disclosure summary:focus-visible {
  outline: none;
  box-shadow: inset var(--sh-ring);
}

.notary-disclosure-mark {
  position: relative;
  width: 24px;
  height: 24px;
  color: var(--c-accent);
  flex: 0 0 auto;
}

.notary-disclosure-mark::before,
.notary-disclosure-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.notary-disclosure-mark::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform var(--t-fast);
}

.notary-disclosure[open] .notary-disclosure-mark::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.notary-disclosure > div {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--c-border-faint);
}

.notary-disclosure p {
  max-width: 76ch;
  margin: 1rem 0 0;
  color: var(--c-text-muted);
  font-size: 1.08rem;
  line-height: 1.75;
}

.notary-disclosure p strong {
  color: var(--c-text);
}

@media (hover: hover) {
  .notary-info-card {
    transition: border-color var(--t-fast), transform var(--t-fast);
  }
  .notary-info-card:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 900px) {
  .notary-profile-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 720px) {
  .notary-card-grid {
    grid-template-columns: 1fr;
  }
  .notary-coverage-card {
    grid-column: auto;
  }
  .notary-data-help {
    align-items: stretch;
    flex-direction: column;
  }
  .notary-data-help .btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .detail-hero {
    padding: 2.25rem 0 2rem;
  }
  .detail-hero h1 {
    max-width: none;
    font-size: clamp(2rem, 11vw, 2.7rem);
    line-height: 1.08;
  }
  .detail-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.85rem;
    font-size: 1.02rem;
  }
  .notary-actions {
    grid-template-columns: 1fr;
  }
  .notary-action {
    justify-content: flex-start;
    text-align: left;
  }
  .notary-info-card {
    padding: 1.1rem;
  }
  .notary-card-heading {
    align-items: flex-start;
  }
  .notary-card-icon {
    width: 44px;
    height: 44px;
  }
  .notary-data-item {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding: 0.95rem 0;
  }
  .notary-data-item dd {
    font-size: 1.1rem;
  }
  .notary-coverage-list {
    display: grid;
  }
  .notary-coverage-list li {
    border-radius: 3px;
  }
  .notary-disclosure summary {
    min-height: 58px;
    padding-inline: 1rem;
    font-size: 1.04rem;
  }
  .notary-disclosure > div {
    padding-inline: 1rem;
  }
  .notary-disclosure p {
    font-size: 1rem;
  }
}

@media (forced-colors: active) {
  .notary-card-icon,
  .notary-info-card,
  .notary-data-help,
  .notary-disclosure {
    border: 1px solid CanvasText;
  }
}