/* Design tokens and typography from sez-asia.eregistrations.dev.
   AZFA content, photography, full-height hero and scroll navigation are retained. */
:root {
  --bg: #fcfaf8;
  --fg: oklch(0.25 0.005 80);
  --muted: oklch(0.46 0.01 80);
  --brand-blue: #3b84b9;
  --accent: #3b84b9;
  --accent-deep: #28658f;
  --accent-soft: #cfe3f1;
  --border: #e3e8eb;
  --surface: #fff;
  --highlight: #edf5fa;
  --hero-ink: oklch(0.99 0.005 80);
  --collab-surface: #24495f;
}
body { background: var(--bg); color: var(--fg); font: 400 1.08rem/1.55 "Inter", system-ui, sans-serif; }
h1, h2, h3, h4 { font-family: "Montserrat", system-ui, sans-serif; }
h2, h3, h4 { font-weight: 600 !important; }
.ds-section { padding: clamp(3.25rem, 6vw, 5.25rem) 32px; border: 0; margin: 0; }
.ds-section.ds-warm { background: var(--bg); }
.ds-section.ds-white { background: var(--surface); }
.ds-section > .inner, .ds-section > .services-wrap { max-width: 1240px; padding: 0; }
.ds-section > .assessment-process__inner, .ds-section > .assessment-detail__inner { max-width: 1240px; }
.ds-section h2 { font-size: 48px; line-height: 1.1; color: var(--fg); text-align: left; margin: 0 0 1.5rem; text-wrap: balance; }
#salidas h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.ds-section .ds-eyebrow, .collab-band .ds-eyebrow {
  margin: 0 0 1rem; color: var(--brand-blue); font: 700 .88rem/1.4 "Montserrat", system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
}
.ds-section .assessment-process__intro, .ds-section .assessment-detail__intro,
.ds-section .ds-lead, .example .example-action p {
  font-size: 20px; line-height: 1.55; color: var(--muted); opacity: 1; max-width: 56rem;
}
.ds-section .ds-lead { margin: 1.35rem 0 3rem; max-width: 48rem; text-align: left; }
.ds-section .assessment-process__intro { margin-bottom: 3rem; max-width: 47rem; }
.ds-section .assessment-detail__intro { margin-bottom: 2.5rem !important; }
.ds-section h3 { color: var(--fg); font-size: 1.08rem; line-height: 1.35; }
.ds-section .assessment-process__step h3 { font-family: "Montserrat", system-ui, sans-serif; }
.assessment-process__step { border-color: var(--accent-soft); padding-top: 1.5rem; }
.ds-section .assessment-process__step p, .ds-section .assessment-detail__columns p,
.ds-section .assessment-detail__card p { font-size: 1rem; line-height: 1.55; color: var(--muted); }
.ds-section .assessment-process__note { color: var(--muted); font-size: .98rem; line-height: 1.6; margin-top: 3rem; }
.assessment-detail__card { border-color: var(--border); border-radius: 8px; padding: 1.75rem; box-shadow: none; }
.assessment-detail a { color: var(--accent-deep); font-size: 1rem; }
.hero h1 { font-size: clamp(2rem, 8vw, 3.6rem); font-weight: 700 !important; }
.hero-copy { gap: 1.3rem; }
.hero-copy > h1, .hero-copy > .hero-purpose, .hero-copy > .hero-cta { margin-top: 0; margin-bottom: 0; }
.hero-copy > .hero-cta { margin-top: .75rem; }
.hero .audience { background: none; padding: 0; border-radius: 0; color: var(--hero-ink); backdrop-filter: none; margin: 0; font: 700 .88rem/1.4 "Montserrat", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.hero-purpose { color: var(--hero-ink); }
.hero-second { border-left-color: var(--accent-soft); }
.hero-cta { background: var(--brand-blue); color: var(--highlight); }
.hero-cta:hover { background: #fff; color: var(--accent-deep); }
.hero-purpose strong, .hero-list strong { color: var(--accent-soft); }
.service { border: 1px solid var(--border); border-radius: 8px; box-shadow: none; }
.service::before { content: none; }
.service .service-head { position: static; }
.service .body { padding: 1.75rem; }
.ds-section .service h3 { font-size: 1.35rem; line-height: 1.25; color: var(--accent-deep); text-shadow: none; }
.service .lead, .service li { font-size: 1rem; line-height: 1.55; }
.service li { color: var(--muted); }
.assistance-note { background: var(--highlight); border-radius: 8px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.assistance-note strong { color: var(--fg); }
.example .example-intro { max-width: 62rem; margin: 0 0 2rem; }
.example .example-action { max-width: 56rem; margin: 1.35rem 0 0; }
.screen-tab { border-color: var(--border); background: var(--surface); }
.screen-tab[aria-selected="true"] { border-color: var(--brand-blue); background: var(--highlight); }
.screen-tab .screen-icon { color: var(--accent-deep); background: var(--highlight); }
.screen-tab .screen-copy > strong { color: var(--fg); font-weight: 600; }
.screen-tab .screen-copy > span { color: var(--muted); }
.sdot.is-on { background: var(--brand-blue); }
.site-brand { font-weight: 600; }
.site-nav a { font: 600 .74rem/1.5 "Montserrat", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.site-header.is-scrolled { color: var(--muted); background: rgb(255 255 255 / .94); border-bottom-color: var(--border); }
.site-header.is-scrolled #lang-switch button { color: var(--accent-deep); }
.site-header.is-scrolled #lang-switch button.is-on { background: var(--highlight); color: var(--accent-deep); }
.collab-band { background: var(--brand-blue); margin-top: 0; padding: 5rem 0; }
.collab-band > .inner, footer > .inner {
  width: calc(100% - 64px); max-width: 1240px; padding: 0;
  margin-left: auto; margin-right: auto; text-align: left;
}
.collab-band .ds-eyebrow { color: var(--accent-soft); }
.collab-band h2 { color: var(--hero-ink); font-size: clamp(1.65rem, 3vw, 2.5rem); line-height: 1.1; margin: 0 0 1.25rem; }
.collab-band .cta-txt { max-width: 46rem; }
.collab-band .cta-txt > span { font-size: 20px; line-height: 1.55; }
.cta-btn { background: var(--hero-ink); color: var(--accent-deep); }
#busto-card .go, #vl-send, #vl-talk.active { background: var(--brand-blue); }
#busto-card .name, #busto-card .alt { color: var(--accent-deep); }
#vl-talk { background: var(--highlight); color: var(--accent-deep); border-color: var(--accent-soft); }
@media (max-width: 760px) {
  .ds-section { padding: 3.25rem 24px; }
  .ds-section h2, #salidas h2 { font-size: clamp(1.65rem, 7.2vw, 2.3rem); overflow-wrap: anywhere; hyphens: manual; }
  .hero h1 { font-size: clamp(2rem, 9.5vw, 2.8rem); hyphens: manual; overflow-wrap: normal; }
  .site-nav a { font-size: .72rem; letter-spacing: .04em; }
  .service .body { padding: 1.25rem; }
  .assessment-detail__columns, .assessment-detail__cards, .assessment-process__steps { grid-template-columns: 1fr; }
}

/* Reference-style vertical tab rail and wide, uncropped screenshots. */
.example .screen-showcase {
  grid-template-columns: minmax(21rem, .38fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.example .screen-tabs { gap: 0; border-left: 3px solid #edf0f2; }
.example .screen-tab {
  display: block; margin-left: -3px; padding: 1rem 0 1.1rem 1.5rem;
  border: 0; border-left: 3px solid transparent; border-radius: 0;
  background: transparent; box-shadow: none;
  transition: border-color 180ms ease, color 180ms ease;
}
.example .screen-tab:hover { border-left-color: rgb(59 132 185 / .45); }
.example .screen-tab[aria-selected="true"] { border-left-color: var(--brand-blue); background: transparent; }
.example .screen-tab:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; }
.example .screen-tab .screen-icon { display: none; }
.example .screen-copy > strong { font-size: 1.08rem; line-height: 1.3; font-weight: 600; color: var(--fg); }
.example .screen-copy > span { margin-top: .4rem; font-size: .98rem; line-height: 1.45; color: var(--muted); }
.example .screen-frame {
  width: calc(100% + max(0px, 50vw - 620px));
  height: auto; border: 1px solid #e6e8ea; border-radius: 10px;
  background: #fff; box-shadow: 0 18px 46px rgb(30 40 50 / .13);
}
.example .slide > img {
  display: block; width: 100%; max-width: none; height: auto; max-height: none;
  object-fit: contain; object-position: top center;
}
@media (max-width: 1000px) {
  .example .screen-showcase { grid-template-columns: 1fr; gap: 2rem; }
  .example .screen-frame { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .example .screen-tab { transition: none; } }

/* Open, centered pillars matching the reference assessment section. */
.results-pillars .ds-eyebrow, .results-pillars h2 { text-align: center; }
.results-pillars .assessment-detail__cards {
  gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2rem, 4vw, 3rem);
}
.results-pillars .assessment-detail__card {
  display: flex; flex-direction: column; align-items: center;
  padding: 0; border: 0; border-radius: 0; background: transparent; text-align: center;
}
.results-icon {
  display: grid; place-items: center; flex-shrink: 0; width: 3.75rem; height: 3.75rem;
  margin-bottom: 1.5rem; border-radius: 50%; background: var(--highlight); color: var(--accent-deep);
}
.results-icon svg { width: 1.65rem; height: 1.65rem; }
.results-pillars .assessment-detail__card h3 { margin: 0; font-size: 1.08rem; line-height: 1.35; }
.results-pillars .assessment-detail__card p { max-width: 22rem; margin: .75rem 0 0; font-size: 1rem; line-height: 1.55; }

/* Process overview and supporting quote beside the three steps. */
.assessment-process .assessment-process__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: start;
}
.assessment-process__overview { min-width: 0; }
.assessment-process .assessment-process__intro { margin: 1.5rem 0 0; }
.regional-results-quote {
  margin: 1.6rem 0 0; padding: 0 0 0 1.1rem;
  border-left: 3px solid var(--brand-blue);
  font-size: 1rem; line-height: 1.55; color: var(--muted);
  text-align: left;
}
/* Methodological caveat: keeps the blue rule, but reads quieter than the body. */
.assessment-process .assessment-process__note {
  margin: 2.6rem 0 0; padding: .35rem 0 .35rem 1.15rem;
  border-left: 3px solid var(--brand-blue);
  font-size: .95rem; line-height: 1.55; color: var(--muted);
  text-align: left;
}
.assessment-process .assessment-process__steps {
  grid-template-columns: 1fr; gap: 2rem; padding-top: 2.4rem;
}
.assessment-process .assessment-process__step { border: 0; padding: 0; }
.assessment-process .assessment-process__step h3 { margin: 0 0 .75rem; font-size: 1.15rem; }
.assessment-process .assessment-process__step p { font-size: 20px; line-height: 1.55; }
@media (max-width: 760px) {
  .assessment-process .assessment-process__inner { grid-template-columns: 1fr; gap: 2rem; }
  .assessment-process .assessment-process__steps { padding-top: 0; }
}

.assessment-detail a.questionnaire-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1.25rem; border: 1px solid var(--brand-blue); border-radius: 999px;
  background: var(--brand-blue); color: #fff; text-decoration: none;
  font: 600 .95rem/1.4 "Montserrat", system-ui, sans-serif;
  transition: background-color 180ms ease, color 180ms ease;
}
.assessment-detail a.questionnaire-outline:hover { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.assessment-detail a.questionnaire-outline:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .assessment-detail a.questionnaire-outline { transition: none; } }

.assessment-stages .assessment-detail__columns { gap: 1.75rem; align-items: stretch; }
.assessment-stages .assessment-detail__columns > div {
  padding: 1.75rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; min-width: 0;
}
.assessment-stages .assessment-detail__columns h3 {
  color: var(--accent-deep); font-size: 1.35rem; line-height: 1.25; margin-bottom: 1.25rem;
}
@media (max-width: 760px) {
  .assessment-stages .assessment-detail__columns > div { padding: 1.25rem; }
}

.assessment-stages__action { margin-top: 1.75rem; }

/* Keep section headings at a readable measure instead of spanning the page. */
.ds-section h2, .collab-band h2 { max-width: 22ch; }
#nar-aporta-title { max-width: none; text-wrap: wrap; }
.results-pillars h2 { max-width: none; text-wrap: wrap; margin-left: auto; margin-right: auto; }

/* Card rows span their section container; only headings retain a narrow measure. */
.next-steps-cards, .assessment-detail__columns, .assessment-detail__cards, .services {
  width: 100%; max-width: none; margin-left: 0; margin-right: 0;
}
.next-steps-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem; margin-top: 1.5rem;
}
@media (max-width: 760px) { .next-steps-cards { grid-template-columns: 1fr; } }

/* Uniform section title size at every viewport width. */
.ds-section h2, #salidas h2, .collab-band h2 { font-size: 40px; }

.next-steps-card {
  padding: 1.75rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; min-width: 0;
}
.ds-section .next-steps-card h3 {
  color: var(--accent-deep); font-size: 1.35rem; line-height: 1.25; margin: 0 0 1.25rem;
}
.next-steps-card p { color: var(--muted); font-size: 1rem; line-height: 1.55; margin: 0; }
@media (max-width: 760px) { .next-steps-card { padding: 1.25rem; } }

.assessment-process .assessment-process__step h3 { color: var(--accent-deep); }

html { scroll-behavior: smooth; }
#nar-aporta, #como-funciona, #salidas {
  scroll-margin-top: calc(var(--nav-compact-height) + 24px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.collab-band .cta-band { display:grid; grid-template-columns:minmax(0, 1fr) minmax(18rem, 26rem); gap:3rem; align-items:center; }
.collab-band .cta-action { justify-self:end; width:100%; text-align:right; }
.collab-band .cta-participation-note { margin:1.4rem 0 0; font-size:.85rem; line-height:1.5; opacity:.8; }
@media(max-width:760px) {
  .collab-band .cta-band { grid-template-columns:1fr; gap:2rem; }
  .collab-band .cta-action { max-width:26rem; }
  .collab-band .cta-btn { max-width:100%; }
}

/* One shared card for the two types of procedures. */
#nar-aporta .assessment-detail__columns {
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}
#nar-aporta .assessment-detail__columns > div { padding: 1.75rem; }
#nar-aporta .assessment-detail__columns h3 { color: var(--accent-deep); }
#nar-aporta .assessment-detail__columns > div + div { border-left: 1px solid var(--border); }
@media (max-width: 760px) {
  #nar-aporta .assessment-detail__columns > div { padding: 1.25rem; }
  #nar-aporta .assessment-detail__columns > div + div { border-left: 0; border-top: 1px solid var(--border); }
}

/* AZFA artwork uses a transparent mask so its color follows the navigation. */
.site-brand { display:flex; align-items:center; gap:.65rem; }
.site-brand-logo { display:block; flex:none; width:76px; height:30px; background:currentColor; -webkit-mask:url('/assets/azfa-logo-mask.svg') center / contain no-repeat; mask:url('/assets/azfa-logo-mask.svg') center / contain no-repeat; }
.site-header.is-scrolled .site-brand-logo { width:62px; height:24px; }
@media(max-width:540px) { .site-brand-logo { width:58px; height:23px; } .site-header.is-scrolled .site-brand-logo { width:52px; height:21px; } }

.site-brand-logo + span { display:flex; align-items:center; gap:.65rem; }
.site-brand-logo + span::before { content:''; display:block; flex:none; width:1px; height:1.5em; background:currentColor; opacity:.35; }

/* Questionnaire action in the shared navigation. */
.site-header .site-nav a.nav-questionnaire {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.65rem 1.15rem .6rem; border-radius:999px; background:var(--brand-blue); color:#fff;
  text-decoration:none;
  justify-self:start;
}
.site-header .site-nav a.nav-questionnaire:hover { background:var(--accent-deep); color:#fff; text-decoration:none; }
.site-nav .nav-questionnaire svg { width:1em; height:1em; flex:none; }
.site-header:not(.is-scrolled) .site-nav a.nav-questionnaire {
  background:#fff; color:var(--accent-deep);
}

.hero-second a { color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; }
.hero-second a:hover { text-decoration-thickness:2px; }