/* Components. Mobile-first; breakpoints with min-width only. */

/* ---------- Icons ---------- */
.icon { flex: none; vertical-align: -0.2em; }
.icon-ext { margin-left: 0.25em; width: 0.9em; height: 0.9em; opacity: 0.75; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-16));
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-2); }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--color-brand-strong);
  color: var(--color-on-brand-muted);
  font-size: var(--text-sm);
  padding-top: env(safe-area-inset-top, 0px);
}
.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-6);
  justify-content: space-between;
  padding-block: var(--space-2);
}
.topbar-item { display: flex; align-items: center; gap: var(--space-2); margin: 0; flex-wrap: wrap; }
.topbar-item .icon { color: var(--color-accent); }
.topbar a { color: var(--color-on-brand); text-decoration: none; font-variant-numeric: tabular-nums; }
.topbar a:hover { text-decoration: underline; }
/* 12px keeps both numbers on one 375px row (16+132+169 + gaps = 341px) */
.topbar-phones { gap: var(--space-2) var(--space-3); }
.topbar-phones span { white-space: nowrap; }
/* phones: hours live in the hero and footer, so the bar stays two short rows */
.topbar-hours { display: none; }
@media (min-width: 768px) {
  .topbar-hours { display: flex; }
  .topbar-phones { column-gap: var(--space-4); }
}

/* ---------- Header + nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
.brand { display: block; border-radius: var(--radius-sm); }
.brand img { width: 9.5rem; height: auto; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font: 600 var(--text-sm) / 1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.nav-toggle:hover { border-color: var(--color-brand); }
.nav-toggle:active { transform: scale(0.97); }
.nav-toggle-close { display: none; }
.has-js .nav-toggle { display: inline-flex; }
.is-open .nav-toggle-open { display: none; }
.is-open .nav-toggle-close { display: inline; }

.site-nav { flex-basis: 100%; }
.has-js .site-nav { display: none; }
.has-js.is-open .site-nav { display: block; }

.nav-list {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0 var(--space-4);
  display: grid;
  gap: 0;
}
.nav-list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
}
.nav-list a:hover { color: var(--color-link); }
.nav-list a[aria-current='page'] { color: var(--color-text); font-weight: 700; box-shadow: inset 3px 0 0 var(--color-accent); padding-left: var(--space-4); }

@media (min-width: 640px) {
  .brand img { width: 11rem; }
}

@media (min-width: 1180px) {
  .has-js .nav-toggle { display: none; }
  .site-nav, .has-js .site-nav { display: block; flex-basis: auto; }
  .nav-list { display: flex; padding: 0; gap: var(--space-1); }
  .nav-list a {
    min-height: 44px;
    border-bottom: 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    position: relative;
  }
  .nav-list a::after {
    content: '';
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: 4px;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-base) var(--ease-out);
  }
  .nav-list a:hover::after, .nav-list a[aria-current='page']::after { transform: scaleX(1); }
  .nav-list a[aria-current='page'] { box-shadow: none; padding-left: var(--space-3); }
}

/* ---------- Services dropdowns ---------- */
.nav-parent { display: flex; align-items: stretch; }
.nav-parent > a { flex: 1; }
.subnav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.subnav-toggle .icon { transition: transform var(--duration-base) var(--ease-io); }
.has-sub.is-open > .nav-parent .subnav-toggle .icon { transform: rotate(180deg); }
.subnav-toggle:hover { color: var(--color-heading); }
.subnav { list-style: none; margin: 0; padding: 0 0 var(--space-2) var(--space-4); }
.subnav a { min-height: 44px; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); }
.subnav a .icon-ext { display: none; }
/* without JS every shortcut stays visible; with JS they open on demand */
.has-js .has-sub > .subnav { display: none; }
.has-js .has-sub.is-open > .subnav { display: block; }

@media (min-width: 1180px) {
  .has-sub { position: relative; }
  .subnav-toggle { min-width: 28px; border-bottom: 0; border-radius: var(--radius-sm); }
  .subnav,
  .has-js .has-sub > .subnav {
    display: block;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: var(--z-drawer);
    min-width: 17rem;
    padding: var(--space-2);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
  }
  .has-sub.is-open > .subnav,
  .site-header:not(.has-js) .has-sub:hover > .subnav,
  .site-header:not(.has-js) .has-sub:focus-within > .subnav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .subnav a { min-height: 40px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); }
  .subnav a::after { content: none; }
  .subnav a:hover, .subnav a:focus-visible { background: var(--color-bg-sunken); color: var(--color-heading); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: 600 var(--text-base) / 1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--color-brand); color: var(--color-on-brand); }
.btn-primary:hover { background: var(--color-brand-strong); color: var(--color-on-brand); }
.btn-accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn-accent:hover { background: var(--color-accent-strong); color: var(--color-on-accent); }
.btn-ghost { border-color: currentColor; color: var(--color-heading); background: transparent; }
.btn-ghost:hover { background: var(--color-brand-soft); color: var(--color-heading); }

/* ---------- Page header (inner pages) ---------- */
.page-header {
  background: var(--color-bg-sunken);
  border-bottom: 4px solid var(--color-accent);
  padding-block: var(--space-6) var(--space-8);
}
.page-header h1 { color: var(--color-heading); margin-bottom: var(--space-3); }
.lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: var(--measure); margin: 0; }
.breadcrumb { margin-bottom: var(--space-4); font-size: var(--text-sm); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumb li + li::before { content: '›'; margin-right: var(--space-2); color: var(--color-text-muted); }
.breadcrumb a { color: var(--color-link); }
.breadcrumb [aria-current] { color: var(--color-text-muted); }
@media (min-width: 768px) {
  .page-header { padding-block: var(--space-8) var(--space-12); }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--space-16); }
.section + .section { border-top: 1px solid var(--color-border); }
.section-sunken { background: var(--color-bg-sunken); }
@media (min-width: 768px) {
  .section { padding-block: var(--space-24); }
}
.section-heading { display: grid; gap: var(--space-2); margin-bottom: var(--space-8); max-width: 48rem; }
.section-heading h2 { margin: 0; }
.section-heading h2::after {
  content: '';
  display: block;
  width: 3rem;
  height: 4px;
  margin-top: var(--space-3);
  background: var(--color-accent);
  border-radius: var(--radius-sm);
}
.section-intro { color: var(--color-text-muted); margin: 0; font-size: var(--text-lg); }

/* ---------- Hero (institutional navy band) ---------- */
.hero { background: var(--color-bg-sunken); color: var(--color-text); padding-block: var(--space-12); border-bottom: 4px solid var(--color-accent); }
.hero-inner { max-width: 52rem; }
.hero-kicker { font-weight: 600; color: var(--color-link); margin-bottom: var(--space-3); }
.hero-title { color: var(--color-heading); font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); margin-bottom: var(--space-4); }
.hero-lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); margin-top: var(--space-8); color: var(--color-text-muted); font-size: var(--text-sm); }
.hero-meta p { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; }
.hero-meta .icon { color: var(--color-heading); }
/* outside the hero (e.g. fees page) the action row sits on a light surface */
.prose .hero-actions { margin-top: 0; }

@media (min-width: 1024px) {
  .hero { padding-block: var(--space-16); }
}

/* Hero background photo (only when the registry provides one) */
.hero.has-photo { position: relative; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
/* the photo stays vivid (river and city in full colour): only a faint veil over it, and the
   text sits on its own translucent panel, which is what keeps the title above 4.5:1 */
.hero-veil { position: absolute; inset: 0; z-index: -1; background: var(--color-hero-veil); }
.hero.has-photo { padding-block: var(--space-12); }
.has-photo .hero-inner {
  padding: var(--space-6);
  background: var(--color-hero-panel);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(4px);
}
@media (min-width: 768px) {
  .has-photo .hero-inner { max-width: 44rem; padding: var(--space-8); }
}
@media (min-width: 1024px) {
  .hero.has-photo { padding-block: var(--space-24); }
}
.hero-credit { position: absolute; right: var(--space-4); bottom: var(--space-2); margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------- Cards (reference-site pattern) ---------- */
.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--space-6);
}
.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-brand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-title { font-size: var(--text-lg); color: var(--color-heading); margin: 0; }
.card-desc { color: var(--color-text-muted); margin: 0; }
.card-note {
  margin: 0;
  padding: var(--space-3);
  border-left: 3px solid var(--color-accent);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--text-sm);
}
.card-source { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.card-action { margin-top: auto; }
.card .attr-tag { min-width: 0; }
.more { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: none; }
}

/* ---------- Mission / values ---------- */
.mvv { display: grid; gap: var(--space-8); }
.mvv-block { padding: var(--space-6); background: var(--color-bg-elevated); border-left: 4px solid var(--color-brand); }
.mvv-block h3 { font-size: var(--text-lg); color: var(--color-heading); margin-bottom: var(--space-2); }
.mvv-block p { font-size: var(--text-base); line-height: 1.6; margin: 0; }
.mvv-values { background: transparent; border-left: 0; padding-inline: 0; }
.values { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.values li {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  font-weight: 600;
  font-size: var(--text-sm);
}
@media (min-width: 1024px) {
  .mvv { grid-template-columns: 1fr 1fr; gap: var(--space-12) var(--space-16); }
  .mvv-values { grid-column: 1 / -1; }
}

/* ---------- Info grid (hours, address, phones) ---------- */
.info-grid { display: grid; gap: var(--space-6); }
.info-item { padding-top: var(--space-4); border-top: 2px solid var(--color-rule); }
.info-item h3 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); }
.info-item h3 .icon { color: var(--color-accent-strong); }
.info-item p { margin-bottom: var(--space-2); }
@media (min-width: 768px) {
  .info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .info-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }
}

/* ---------- Deadlines ---------- */
.deadlines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.deadlines li { padding-top: var(--space-4); border-top: 2px solid var(--color-rule); }
.deadlines .deadline-value { font-size: var(--text-xl); font-weight: 700; line-height: 1.1; color: var(--color-heading); margin-bottom: var(--space-2); }
.deadlines h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.deadlines p { color: var(--color-text-muted); margin-bottom: var(--space-2); }
.deadline-source { font-size: var(--text-sm); font-style: italic; }
@media (min-width: 768px) {
  .deadlines { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-12); }
}

/* ---------- Prose ---------- */
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-12); }
.prose h3 { margin-top: var(--space-8); }
.prose li + li { margin-top: var(--space-2); }

/* ---------- Titular ---------- */
.titular { display: grid; gap: var(--space-8); align-items: start; }
.titular figure { margin: 0; position: relative; max-width: 22rem; }
.titular img { border-radius: var(--radius-md); width: 100%; height: auto; border-bottom: 4px solid var(--color-accent); }
.titular figcaption { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.titular-name { font-size: var(--text-xl); font-weight: 700; color: var(--color-heading); margin-bottom: var(--space-1); }
.titular-role { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-6); }
@media (min-width: 768px) {
  .titular { grid-template-columns: 18rem 1fr; gap: var(--space-12); }
}

/* Attribution list (O Cartório) */
.attr-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6); }
.attr-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; padding: var(--space-6); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.attr-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.attr-step { min-width: 2rem; height: 2rem; border-radius: var(--radius-full); font-size: var(--text-sm); }
.attr-list h3 { margin-bottom: var(--space-2); }
.attr-list p { color: var(--color-text-muted); margin: 0; }
@media (min-width: 1024px) {
  .attr-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge-pending { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid color-mix(in srgb, var(--color-warning) 40%, transparent); }
.badge-ok { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }

/* ---------- Callout ---------- */
.callout {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-elevated);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-block: var(--space-6);
  max-width: var(--measure);
}
.callout p { margin: 0; }
.callout .icon { color: var(--color-accent-strong); margin-top: 0.15em; }

/* ---------- Tabs-like jump nav (Documentos) ---------- */
.jump-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.jump-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
}
.jump-nav a:hover { border-color: var(--color-brand); color: var(--color-heading); }
.jump-nav a:active { transform: scale(0.97); }

/* ---------- Checklist accordion ---------- */
.checklists-group { margin-top: var(--space-12); }
.checklists-group + .checklists-group { margin-top: var(--space-16); }
.checklists { display: grid; gap: 0; border-top: 2px solid var(--color-rule); }
.checklist { border-bottom: 1px solid var(--color-border); }
.checklist > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  min-height: 56px;
  padding: var(--space-4) var(--space-2);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.checklist > summary::-webkit-details-marker { display: none; }
.checklist > summary:hover { background: var(--color-bg-elevated); }
.checklist-title { font-size: var(--text-base); font-weight: 600; color: var(--color-heading); }
.checklist-title::before {
  content: '+';
  display: inline-block;
  width: 1.25em;
  font-weight: 700;
  color: var(--color-heading);
  transition: transform var(--duration-base) var(--ease-io);
}
.checklist[open] .checklist-title::before { content: '−'; }
.checklist-body { padding: 0 var(--space-2) var(--space-8) calc(1.25em + var(--space-2)); max-width: calc(var(--measure) + 4rem); }
.checklist-body ol { padding-left: var(--space-6); }
.checklist-body li + li { margin-top: var(--space-2); }
.checklist-legal { font-size: var(--text-sm); color: var(--color-text-muted); }
.checklist-empty { padding: var(--space-4); background: var(--color-bg-elevated); border: 1px dashed var(--color-border); border-radius: var(--radius-md); }
.checklist-empty p:last-child { margin: 0; }
.checklist-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
@media (min-width: 640px) {
  .checklist > summary { padding-inline: var(--space-4); }
}

/* ---------- Downloads ---------- */
.downloads { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--color-rule); }
.downloads li { border-bottom: 1px solid var(--color-border); }
.downloads a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding: var(--space-6) var(--space-2);
  color: var(--color-text);
  text-decoration: none;
}
.downloads a:hover { background: var(--color-bg-elevated); }
.downloads a:hover strong { text-decoration: underline; }
.downloads .icon { color: var(--color-heading); }
.downloads strong { font-size: var(--text-base); color: var(--color-heading); }
.downloads small { grid-column: 2; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- Contact cards ---------- */
.contact-grid { display: grid; gap: var(--space-6); }
.contact-card {
  padding: var(--space-6);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-brand);
  border-radius: var(--radius-md);
}
.contact-card h2 { font-size: var(--text-xl); }
.contact-card .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
@media (min-width: 768px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-brand-strong); color: var(--color-on-brand-muted); padding-top: var(--space-16); font-size: var(--text-sm); }
.site-footer a { color: var(--color-on-brand); }
.site-footer a:hover { color: var(--color-accent); }
.footer-grid { display: grid; gap: var(--space-8); padding-bottom: var(--space-12); }
.footer-brand img { width: 11rem; height: auto; margin-bottom: var(--space-4); }
.footer-name { color: var(--color-on-brand); max-width: 22rem; }
.footer-meta { font-size: var(--text-xs); }
.footer-title { display: inline-block; font-size: var(--text-base); font-weight: 700; color: var(--color-on-brand); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-accent); }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.footer-bottom { border-top: 1px solid var(--color-on-brand-rule); padding-block: var(--space-6) calc(var(--space-24) + env(safe-area-inset-bottom, 0px)); }
.footer-bottom p { margin: 0; font-size: var(--text-xs); }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-12); }
  .footer-bottom { padding-bottom: var(--space-6); }
}

/* ---------- Floating WhatsApp chooser ---------- */
.wa-float {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-drawer);
}
.wa-float > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-whatsapp);
  color: var(--color-on-brand);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  list-style: none;
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.wa-float > summary::-webkit-details-marker { display: none; }
.wa-float > summary:hover { background: var(--color-whatsapp-hover); }
.wa-float > summary:active { transform: scale(0.97); }
.wa-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-3));
  width: min(20rem, calc(100vw - 2rem));
  padding: var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.wa-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-2); }
.wa-option {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  min-height: 48px;
}
.wa-option + .wa-option { border-top: 1px solid var(--color-border); }
.wa-option:hover { background: var(--color-brand-soft); color: var(--color-text); }
.wa-option .mono { font-size: var(--text-sm); color: var(--color-text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .wa-float[open] .wa-menu { animation: wa-in var(--duration-base) var(--ease-out); }
}
@keyframes wa-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Privacy notice ---------- */
.privacy-notice {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-drawer);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  max-width: 44rem;
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
}
.privacy-notice p { margin: 0; flex: 1 1 18rem; color: var(--color-text); }
.privacy-notice .btn { min-height: 44px; padding-block: var(--space-2); }
/* keep the WhatsApp button clear of the notice while it is visible */
.has-notice .wa-float { bottom: calc(var(--space-4) + 9.5rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) {
  .privacy-notice { right: auto; }
  .has-notice .wa-float { bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .privacy-notice { max-width: calc(100vw - 14rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .privacy-notice:not([hidden]) { animation: rise var(--duration-slow) var(--ease-out) both; }
}

/* ---------- 404 ---------- */
.notfound { padding-block: var(--space-24); }
.notfound .code { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 700; }

/* ---------- Motion (progressive: only after JS adds .js-motion) ---------- */
.js-motion .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-motion .reveal.is-visible { opacity: 1; transform: none; }

/* hero copy rises in once on load */
.js-motion .hero-inner > * { animation: rise 600ms var(--ease-out) both; }
.js-motion .hero-inner > :nth-child(2) { animation-delay: 80ms; }
.js-motion .hero-inner > :nth-child(3) { animation-delay: 160ms; }
.js-motion .hero-inner > :nth-child(4) { animation-delay: 240ms; }
.js-motion .hero-inner > :nth-child(5) { animation-delay: 320ms; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* header lifts once the page scrolls */
.site-header { transition: box-shadow var(--duration-base) var(--ease-out); }
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.brand img { transform-origin: left center; transition: transform var(--duration-base) var(--ease-out); }
@media (min-width: 1024px) {
  .site-header.is-scrolled .brand img { transform: scale(0.88); }
}

/* action arrows nudge forward */
.card-action .icon, .btn .icon { transition: transform var(--duration-fast) var(--ease-out); }
.card-action:hover .icon, .btn:hover .icon { transform: translateX(3px); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .js-motion .reveal { opacity: 1; transform: none; transition: none; }
  .js-motion .hero-inner > * { animation: none; }
  .site-header.is-scrolled .brand img, .card-action:hover .icon, .btn:hover .icon { transform: none; }
}

/* the hidden attribute must beat component display values */
.btn[hidden],
.privacy-notice[hidden],
.a11y-bar[hidden] { display: none; }

/* ---------- Accessibility bar (top bar) ---------- */
.a11y-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.a11y-bar button,
.a11y-bar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-on-brand-outline);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-on-brand);
  font: 600 var(--text-sm) / 1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.a11y-bar button:hover,
.a11y-bar a:hover { background: var(--color-on-brand-rule); }
.a11y-bar button:active { transform: scale(0.97); }
.a11y-bar button[aria-pressed='true'] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
/* phones show the contrast icon only (the label still names the button); text from 640px */
.a11y-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 640px) {
  .a11y-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* ---------- Touch targets (44px, Apple HIG / WCAG 2.5.5) ---------- */
@media (pointer: coarse) {
  .a11y-bar button,
  .a11y-bar a { min-width: 44px; min-height: 44px; }
  /* standalone links */
  .topbar a,
  .breadcrumb a,
  .footer-list a,
  .info-item a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  .footer-list { gap: 0; }
  /* links inside running text: grow the hit area without moving the lines */
  .prose a:not(.btn),
  .privacy-notice a { padding-block: 0.875rem; }
}

/* ---------- Text size steps (rem-based layout scales with the root size) ---------- */
html[data-font="-1"] { font-size: 87.5%; }
html[data-font="1"] { font-size: 112.5%; }
html[data-font="2"] { font-size: 125%; }
html[data-font="3"] { font-size: 150%; }

/* ---------- High contrast (black background, white text, yellow links) ---------- */
html[data-contrast="alto"] {
  --color-brand: #000;
  --color-brand-strong: #000;
  --color-brand-soft: #1a1a1a;
  --color-heading: #fff;
  --color-accent: #ff0;
  --color-accent-strong: #ff0;
  --color-link: #ff0;
  --color-link-hover: #fff;
  --color-bg: #000;
  --color-bg-elevated: #000;
  --color-bg-sunken: #000;
  --color-text: #fff;
  --color-text-muted: #fff;
  --color-on-brand: #fff;
  --color-on-brand-muted: #fff;
  --color-on-accent: #000;
  --color-whatsapp: #000;
  --color-whatsapp-hover: #1a1a1a;
  --color-border: #fff;
  --color-rule: #fff;
  --color-focus: #0ff;
  --color-warning-bg: #000;
  --color-warning-text: #ff0;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}
html[data-contrast="alto"] a { text-decoration: underline; }
html[data-contrast="alto"] .btn,
html[data-contrast="alto"] .wa-float > summary,
html[data-contrast="alto"] .card,
html[data-contrast="alto"] .task-panel { border: 2px solid #fff; }
html[data-contrast="alto"] .btn-accent { background: #ff0; color: #000; }
html[data-contrast="alto"] .hero-bg,
html[data-contrast="alto"] .hero-veil { display: none; }
html[data-contrast="alto"] .has-photo .hero-inner { background: #000; backdrop-filter: none; border: 2px solid #fff; }
html[data-contrast="alto"] .site-header { background: #000; backdrop-filter: none; }
/* the logo has navy lettering: keep it on a white plate so it stays readable */
html[data-contrast="alto"] .brand { background: #fff; padding: var(--space-1); border-radius: var(--radius-sm); }