/* ==========================================================================
   components.css — botões, badge, header em pílula, nav, placeholder, form,
   accordion, footer, WhatsApp flutuante, barra de idioma
   ========================================================================== */

/* ---------- Botões (pílula) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-height);
  padding: var(--space-3) var(--btn-padding-x);
  font: var(--btn-font);
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  background: var(--white);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--btn-radius);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.btn:hover {
  color: var(--color-text);
  border-color: var(--navy-500);
}

.btn:active {
  transform: translateY(1px);
}

.btn__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

/* CTA primário: brand-600 + branco = 4.51:1. Nunca brand-500 aqui. */
.btn--primary {
  color: var(--color-cta-text);
  background: var(--color-cta);
  border-color: var(--color-cta);
  box-shadow: 0 8px 20px -8px rgb(196 85 26 / 0.6);
}

.btn--primary:hover {
  color: var(--color-cta-text);
  background: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
}

.btn--secondary {
  color: var(--navy-900);
  background: var(--white);
  border-color: var(--navy-900);
}

.btn--secondary:hover {
  color: var(--white);
  background: var(--navy-900);
}

/* Navy sólido — secundário nas secções claras e laranja, CTA no header */
.btn--navy {
  color: var(--white);
  background: var(--navy-900);
  border-color: var(--navy-900);
}

.btn--navy:hover {
  color: var(--white);
  background: var(--navy-700);
  border-color: var(--navy-700);
}

.header .btn--primary {
  color: var(--white);
  background: var(--navy-900);
  border-color: var(--white);
  box-shadow: none;
}

.header .btn--primary:hover {
  color: var(--navy-900);
  background: var(--white);
  border-color: var(--white);
}

/* Outline sobre navy (secundário nas secções escuras) */
.section--navy .btn--secondary {
  color: var(--white);
  background: transparent;
  border-color: rgb(255 255 255 / 0.7);
}

.section--navy .btn--secondary:hover {
  color: var(--navy-900);
  background: var(--white);
  border-color: var(--white);
}

/* Sobre fundo escuro (barra de idioma) */
.btn--ghost-light {
  color: var(--white);
  background: transparent;
  border-color: rgb(255 255 255 / 0.6);
}

.btn--ghost-light:hover {
  color: var(--navy-900);
  background: var(--white);
  border-color: var(--white);
}

.btn--sm {
  min-height: var(--touch-min);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
}

.btn--lg {
  min-height: var(--btn-height-lg);
  padding-inline: var(--space-8);
  font-size: var(--text-lg);
}

.section--navy .btn--primary:focus-visible,
.footer .btn:focus-visible {
  outline-color: var(--white);
}

/* ---------- Botão animado de fecho de secção ----------
   Adaptado de Uiverse.io (gharsh11032000, MIT): contorno em pílula; no hover a seta
   sai pela direita, outra entra pela esquerda e um círculo preenche o fundo. */

.btn-anim {
  --anim-color: var(--brand-700);
  --anim-fill: var(--brand-600);
  --anim-fill-text: var(--white);
  --anim-ease: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height-lg);
  padding: var(--space-3) var(--space-12) var(--space-3) var(--space-8);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  color: var(--anim-color);
  background: transparent;
  border: 2px solid var(--anim-color);
  border-radius: var(--radius-pill);
  overflow: hidden;
  cursor: pointer;
  transition: color 0.5s var(--anim-ease), border-radius 0.5s var(--anim-ease), border-color 0.5s var(--anim-ease), box-shadow 0.5s var(--anim-ease);
}

.btn-anim__arr {
  position: absolute;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  transition: inset 0.7s var(--anim-ease);
}

.btn-anim__arr--out {
  inset-inline-end: var(--space-4);
}

.btn-anim__arr--in {
  inset-inline-start: -25%;
}

.btn-anim__circle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 0;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--anim-fill);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: width 0.7s var(--anim-ease), height 0.7s var(--anim-ease), opacity 0.7s var(--anim-ease);
}

.btn-anim__text {
  position: relative;
  z-index: 1;
  transform: translateX(-0.5rem);
  transition: transform 0.7s var(--anim-ease);
}

.btn-anim:hover,
.btn-anim:focus-visible {
  color: var(--anim-fill-text);
  border-color: var(--anim-fill);
  border-radius: var(--radius-sm);
}

.btn-anim:hover .btn-anim__arr--out,
.btn-anim:focus-visible .btn-anim__arr--out {
  inset-inline-end: -25%;
}

.btn-anim:hover .btn-anim__arr--in,
.btn-anim:focus-visible .btn-anim__arr--in {
  inset-inline-start: var(--space-4);
}

.btn-anim:hover .btn-anim__text,
.btn-anim:focus-visible .btn-anim__text {
  transform: translateX(0.5rem);
}

.btn-anim:hover .btn-anim__circle,
.btn-anim:focus-visible .btn-anim__circle {
  width: 22rem;
  height: 22rem;
  opacity: 1;
}

.btn-anim:active {
  transform: scale(0.97);
}

/* sobre navy */
.btn-anim--light {
  --anim-color: var(--white);
  --anim-fill: var(--brand-600);
}

/* sobre laranja: contorno branco, preenche a navy */
.btn-anim--navy {
  --anim-color: var(--white);
  --anim-fill: var(--navy-900);
}

@media (prefers-reduced-motion: reduce) {
  .btn-anim,
  .btn-anim__arr,
  .btn-anim__circle,
  .btn-anim__text {
    transition: none;
  }

  .btn-anim:hover,
  .btn-anim:focus-visible {
    background: var(--anim-fill);
  }
}

/* ---------- Cartão WhatsApp (verde) ----------
   Verde escuro #0E7A3C: branco em cima = 5.43:1 (o verde da marca #25D366 dá 1.98:1). */

.wa-card {
  --wa: #0E7A3C;
  --wa-hover: #0B6331;
  --wa-bright: #25D366;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
  padding: var(--space-5) var(--space-6);
  text-decoration: none;
  color: var(--white);
  background: var(--wa);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px -12px rgb(14 122 60 / 0.55);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.wa-card:hover {
  color: var(--white);
  background: var(--wa-hover);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgb(14 122 60 / 0.65);
}

.wa-card:focus-visible {
  outline: 2px solid var(--wa);
  outline-offset: 3px;
}

.wa-card__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  color: var(--wa);
  background: var(--white);
  border-radius: 50%;
}

.wa-card__icon svg {
  width: 1.875rem;
  height: 1.875rem;
}

.wa-card__body {
  display: grid;
  flex: 1;
  gap: 0.125rem;
  min-width: 0;
}

.wa-card__kicker {
  font-size: var(--text-sm);
  opacity: 0.9;
}

.wa-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.2;
}

.wa-card__number {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.wa-card__arrow {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  transition: transform var(--dur) var(--ease);
}

.wa-card:hover .wa-card__arrow {
  transform: translateX(4px);
}

/* ---------- Badge (pílula suave) ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--brand-700);
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
}

.badge::before {
  content: "";
  width: 1.25rem;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

/* ---------- Barra superior: redes, telefone, e-mail ---------- */

.topbar {
  --color-focus: var(--white);
  position: relative;
  z-index: 51;
  height: var(--topbar-height);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  height: 100%;
  padding-inline: var(--space-6);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--white);
  background: var(--color-cta); /* brand-600: branco em cima = 4.51:1 */
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.topbar__social,
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 100%;
  text-decoration: none;
  color: var(--white);
}

.topbar__social:hover,
.topbar__link:hover {
  color: var(--white);
  text-decoration: underline;
}

.topbar__social {
  margin-inline-end: auto;
}

.topbar__link--mail {
  margin-inline-start: auto;
}

@media (max-width: 39.99em) {
  .topbar__link--mail {
    display: none; /* no mobile, telefone + Instagram chegam; o e-mail está no rodapé */
  }
}

/* ---------- Header: transparente sobre o hero; ganha fundo navy ao fazer scroll ---------- */

.header {
  --color-focus: var(--white);
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  height: var(--nav-height);
  pointer-events: none; /* só a barra recebe cliques; o resto deixa passar */
  transition: inset-block-start var(--dur) var(--ease);
}

.header__wrap {
  position: relative;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--nav-height);
  padding: 0;
  color: var(--white);
  border-radius: var(--radius-pill);
  pointer-events: auto;
  transition: background-color var(--dur) var(--ease), padding var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.header.is-scrolled {
  inset-block-start: var(--space-3);
}

.header.is-scrolled .header__inner {
  height: calc(var(--nav-height) - var(--space-4));
  padding-inline: var(--space-5) var(--space-3);
  background: var(--navy-900);
  box-shadow: var(--shadow-lg);
}

.header.is-scrolled .brand__logo {
  height: 2.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  border-radius: var(--radius-sm);
}

/* logo branco do cliente (fundo transparente) sobre o hero/navy */
.brand__logo {
  display: block;
  width: auto;
  height: 3rem;
  transition: height var(--dur) var(--ease);
}

@media (min-width: 64em) {
  .brand__logo {
    height: 3.5rem;
  }
}

.nav-toggle {
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  margin-inline-start: auto;
  color: var(--white);
  border-radius: 50%;
}

.nav-toggle__icon--close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
  display: block;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0;
  list-style: none;
}

.nav__link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--white);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast) var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="true"] {
  color: var(--white);
  background: rgb(255 255 255 / 0.12);
}

.nav__aside {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Mobile com JS: menu colapsado num cartão branco sob a pílula. Sem JS, fica visível. */
@media (max-width: 63.99em) {
  .js .nav-toggle:not([hidden]) {
    display: inline-flex;
  }

  .js .nav {
    --color-focus: var(--brand-600);
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + var(--space-2));
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-4);
    color: var(--navy-900);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
  }

  .js .nav.is-open {
    display: flex;
  }

  .js .nav__list {
    flex-direction: column;
    gap: 0;
  }

  .js .nav__link {
    display: block;
    padding: var(--space-3) var(--space-2);
    font-size: var(--text-base);
    color: var(--navy-900);
    border-radius: 0;
    border-block-end: 1px solid var(--color-border);
  }

  .js .nav__link:hover {
    color: var(--brand-700);
    background: none;
  }

  .js .nav__aside {
    justify-content: space-between;
    padding-block-start: var(--space-3);
  }

  .js .nav .lang__link {
    color: var(--navy-900);
  }

  .js .nav .lang__current {
    color: var(--brand-700);
  }

  .js .nav .lang__sep {
    color: var(--color-border-strong);
  }

  /* Sem JS o menu inteiro empilha dentro da pílula */
  .header__inner {
    flex-wrap: wrap;
    border-radius: var(--radius-lg);
  }
}

@media (min-width: 64em) {
  .nav-toggle {
    display: none;
  }

  /* logo | menu centrado | idioma + CTA */
  .header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .nav {
    display: contents;
  }

  .nav__list {
    justify-content: center;
    gap: var(--space-2);
  }

  .nav__aside {
    justify-self: end;
    gap: var(--space-4);
  }
}

/* ---------- Switcher de idioma (dentro da pílula laranja) ---------- */

.lang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
}

.lang__current {
  color: var(--brand-400);
}

.lang__sep {
  color: rgb(255 255 255 / 0.6);
}

.lang__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding-inline: var(--space-1);
  text-decoration: none;
  color: var(--white);
}

.lang__link:hover {
  color: var(--white);
  text-decoration: underline;
}

/* ---------- Barra de idioma (JS) ---------- */

.langbar {
  --color-focus: var(--color-focus-on-dark);
}

.langbar:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--gutter);
  color: var(--white);
  background: var(--navy-900);
}

.langbar__text {
  font-size: var(--text-sm);
  max-width: none;
}

.langbar__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  color: var(--white);
  border-radius: var(--radius-sm);
}

.langbar__close:focus-visible,
.langbar .btn:focus-visible {
  outline-color: var(--white);
}

/* ---------- Placeholder honesto (onde falta foto real) ---------- */

.placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0; /* nunca alarga a coluna da grelha */
  padding: var(--space-6);
  text-align: center;
  color: var(--ink-soft);
  background: var(--surface);
  border: 2px dashed var(--steel);
  border-radius: var(--radius-lg);
  list-style: none;
}

.placeholder__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--navy-500);
}

.placeholder__text {
  font-size: var(--text-sm);
  max-width: 32ch;
  margin-inline: auto;
  overflow-wrap: anywhere;
}

.placeholder--portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
}

.placeholder--hero {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  border-radius: var(--radius-xl);
}

.placeholder--photo {
  aspect-ratio: 4 / 3;
  width: 100%;
  padding: var(--space-4);
}

.placeholder--tall {
  width: 100%;
  min-height: 18rem;
}

.placeholder--map {
  width: 100%;
  min-height: 14rem;
}

.placeholder--wide {
  min-height: 10rem;
}

.placeholder--badge {
  flex: none;
  gap: 0;
  min-height: 3.25rem;
  padding: var(--space-2) var(--space-3);
  background: var(--white);
  border-width: 1.5px;
  border-radius: var(--radius-sm);
}

.placeholder--badge .placeholder__label {
  font-size: 0.75rem;
}

.placeholder--badge .placeholder__text {
  font-size: 0.75rem;
  max-width: 26ch;
}

/* ---------- Lista de tags (cauda longa SEO) ---------- */

.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.taglist li {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--navy-900);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  max-width: none;
}

/* ---------- Accordion (FAQ) — nativo com <details> ---------- */

.accordion {
  border-block-start: 1px solid var(--color-border);
}

.accordion__item {
  border-block-end: 1px solid var(--color-border);
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  min-height: var(--touch-min);
}

.accordion__summary:focus-visible {
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.accordion__q {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--navy-900);
  margin: 0;
}

.accordion__summary:hover .accordion__q {
  color: var(--brand-700);
}

.accordion__chevron {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-accent);
  transition: transform var(--dur) var(--ease);
}

.accordion__item[open] .accordion__chevron {
  transform: rotate(180deg);
}

.accordion__body {
  padding-block-end: var(--space-5);
  color: var(--color-text-soft);
}

/* ---------- Formulário ---------- */

.form {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 40em) {
  .form {
    padding: var(--space-8);
  }
}

.form__field {
  display: grid;
  gap: var(--space-2);
}

.form__label {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy-900);
}

.form__optional {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text-soft);
}

.form__input {
  width: 100%;
  min-height: var(--input-height);
  padding-inline: var(--input-padding-x);
  background: var(--surface);
  border: var(--input-border);
  border-radius: var(--input-radius);
  transition: border-color var(--dur-fast) var(--ease);
}

.form__input::placeholder {
  color: var(--steel);
}

.form__input:hover {
  border-color: var(--navy-500);
}

.form__input:focus-visible {
  outline-offset: 0;
  border-color: var(--navy-500);
}

.form__input--area {
  padding-block: var(--space-3);
  resize: vertical;
  min-height: 7rem;
}

.form__input[aria-invalid="true"] {
  border-color: var(--error);
}

.form__file {
  padding-block: var(--space-2);
  font-size: var(--text-sm);
}

.form__hint {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

.form__error {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--error);
}

.form__error:empty {
  display: none;
}

.form__status {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy-500);
}

.form__status:empty {
  display: none;
}

.form__fallback {
  margin-block: var(--space-2);
  padding: var(--space-3);
  font: inherit;
  white-space: pre-wrap;
  color: var(--color-text);
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.form__submit {
  width: 100%;
}

/* ---------- Formulário em passos (wizard) ---------- */

.wizard {
  padding: var(--space-6);
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.wizard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  margin-block-end: var(--space-6);
}

.wizard__progress {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--brand-700);
}

.wizard__meta {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

.wizard__bar {
  flex-basis: 100%;
  height: 6px;
  margin-block-start: var(--space-2);
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius-pill);
}

.wizard__bar-fill {
  display: block;
  width: 25%;
  height: 100%;
  background: var(--brand-600);
  border-radius: inherit;
  transition: width var(--dur) var(--ease);
}

.wizard__step {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* sem JS: passos seguidos, separados; com JS: só o ativo */
.wizard__step + .wizard__step {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-8);
  border-block-start: 1px solid var(--color-border);
}

.wizard.is-enhanced .wizard__step {
  margin: 0;
  padding: 0;
  border: 0;
}

.wizard.is-enhanced .wizard__step:not(.is-active) {
  display: none;
}

.wizard.is-enhanced .wizard__step.is-active {
  animation: wizard-in var(--dur) var(--ease);
}

@keyframes wizard-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}

.wizard.is-done .wizard__head {
  display: none;
}

.wizard__q {
  float: left; /* legend: permite margens normais */
  width: 100%;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--navy-900);
}

.wizard__q:focus {
  outline: none;
}

.wizard__q + * {
  clear: both;
}

.wizard__help {
  margin-block-start: calc(-1 * var(--space-3));
  color: var(--color-text-soft);
}

.wizard__row {
  display: grid;
  gap: var(--space-4);
  align-items: start; /* campos alinhados pelo topo mesmo com ajuda só num deles */
}

@media (min-width: 40em) {
  .wizard {
    padding: var(--space-8) var(--space-10);
  }

  .wizard__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* cartões de escolha (serviços) */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 40em) {
  .choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.choice {
  position: relative;
  display: block;
  cursor: pointer;
}

.choice__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice__box {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  align-content: center;
  height: 100%;
  min-height: 6.5rem;
  padding: var(--space-4) var(--space-3);
  text-align: center;
  background: var(--surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.choice:hover .choice__box {
  border-color: var(--brand-500);
  transform: translateY(-2px);
}

.choice__input:checked + .choice__box {
  background: var(--brand-50);
  border-color: var(--brand-600);
  box-shadow: inset 0 0 0 1px var(--brand-600);
}

.choice__input:focus-visible + .choice__box {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.choice__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--brand-600);
}

.choice__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.25;
  color: var(--navy-900);
}

/* escolha múltipla: visto no canto do cartão escolhido */
.choice__box {
  position: relative;
}

.choice__input:checked + .choice__box::after {
  content: "";
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
  width: 1.25rem;
  height: 1.25rem;
  background: var(--brand-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
  border-radius: 50%;
}

/* pílulas (quando dá mais jeito) */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pill {
  position: relative;
  cursor: pointer;
}

.pill__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill__box {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding-inline: var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--navy-900);
  background: var(--surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.pill:hover .pill__box {
  border-color: var(--brand-500);
}

.pill__input:checked + .pill__box {
  color: var(--white);
  background: var(--brand-600);
  border-color: var(--brand-600);
}

.pill__input:focus-visible + .pill__box {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* caixas de verificação (urgente, já fui cliente) */
.check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  cursor: pointer;
}

.check__input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-block-start: 0.1em;
  accent-color: var(--brand-600);
  cursor: pointer;
}

.check__label {
  color: var(--navy-900);
}

.wizard__note {
  max-width: none;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--navy-900);
  background: #E7F6EC;
  border-radius: var(--radius-sm);
}

/* navegação */
.wizard__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-2);
}

.wizard__nav > :only-child {
  margin-inline-start: auto;
}

.wizard__next,
.wizard__submit {
  gap: var(--space-2);
}

.wizard__btn-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.wizard__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-min);
  padding-inline: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text-soft);
  border-radius: var(--radius-sm);
}

.wizard__back:hover {
  color: var(--navy-900);
}

/* sem JS o botão de submit fica sozinho e alinhado à direita */
.wizard:not(.is-enhanced) .wizard__nav {
  justify-content: flex-end;
}

/* obrigado */
.wizard__done {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  padding-block: var(--space-6);
  text-align: center;
}

.wizard__done-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  color: var(--white);
  background: #0E7A3C;
  border-radius: 50%;
}

.wizard__done-icon {
  width: 2rem;
  height: 2rem;
  stroke-width: 3;
}

.wizard__done-title {
  font-size: var(--text-2xl);
  color: var(--navy-900);
}

.wizard__done-title:focus {
  outline: none;
}

.wizard__done-text {
  max-width: 40ch;
  color: var(--color-text-soft);
}

.wizard__done-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .wizard.is-enhanced .wizard__step.is-active {
    animation: none;
  }
}

/* ---------- Linha "só a ver?" por baixo do formulário do hero ---------- */

.hero__light {
  display: flex;
  text-wrap: balance;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
  margin-block-start: var(--space-5);
  max-width: none;
  font-size: var(--text-sm);
  text-align: center;
  color: var(--color-text-on-dark-soft);
}

.hero__save {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-min);
  padding-inline: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  border-radius: var(--radius-sm);
}

.hero__save:hover {
  color: var(--brand-100);
}

.hero__save-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.hero__light-sep {
  opacity: 0.6;
}

.contact__save {
  font: inherit;
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.contact__save:hover {
  color: var(--color-link-hover);
}

/* ---------- Rodapé: 3 colunas + linha inferior ---------- */

.footer {
  --color-focus: var(--brand-400);
  padding-block: var(--space-16) var(--space-8);
  color: var(--color-text-on-dark-soft);
  background: var(--navy-900);
}

.footer p {
  max-width: none;
}

.footer a {
  color: var(--color-text-on-dark-soft);
  text-decoration: none;
}

.footer a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer__grid {
  display: grid;
  gap: var(--space-10);
}

.footer__brand {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.footer__logo {
  width: auto;
  height: 3.5rem;
}

.footer__tagline {
  font-size: var(--text-base);
  color: var(--white);
}

.footer__services {
  font-size: var(--text-sm);
}

.footer__contact {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--white);
}

.footer__contact a {
  color: var(--white);
}

.footer__title {
  margin-block-end: var(--space-3);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--white);
}

.footer__list {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  font-size: var(--text-sm);
  list-style: none;
}

.footer__list a {
  display: inline-block;
  padding-block: 0.125rem;
}

.footer__legal {
  padding-block-start: var(--space-2);
  font-size: var(--text-xs);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid rgb(255 255 255 / 0.15);
}

.footer__copy {
  font-size: var(--text-sm);
}

.footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.footer__social li {
  max-width: none;
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  color: var(--brand-400);
  border-radius: var(--radius-sm);
}

.footer__social a:hover {
  color: var(--white);
  text-decoration: none;
}

.footer__social-icon {
  width: 1.375rem;
  height: 1.375rem;
}

.footer__lang {
  padding-inline: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
}

@media (min-width: 40em) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64em) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--space-12);
  }

  .footer__brand {
    grid-column: auto;
    max-width: 24rem;
  }
}

/* ---------- WhatsApp flutuante (mobile) ---------- */

.fab {
  position: fixed;
  inset-inline-end: var(--space-4);
  inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fab-size);
  height: var(--fab-size);
  color: var(--white);
  background: var(--color-cta);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.fab:hover {
  color: var(--white);
  background: var(--color-cta-hover);
}

.fab:active {
  transform: scale(0.96);
}

.fab:focus-visible {
  outline-color: var(--navy-900);
}

/* botão Ligar, por cima do WhatsApp */
.fab--call {
  inset-block-end: calc(var(--space-4) + var(--fab-size) + var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--navy-900);
}

.fab--call:hover {
  background: var(--navy-700);
}

.fab__icon {
  width: 1.625rem;
  height: 1.625rem;
}

/* Reserva espaço no fim da página para o FAB não tapar o rodapé */
body {
  padding-block-end: calc(2 * var(--fab-size) + var(--space-8));
}

@media (min-width: 64em) {
  .fab {
    display: none;
  }

  body {
    padding-block-end: 0;
  }
}

/* ---------- Fotos reais (ou de pré-visualização) nos slots dos placeholders ---------- */

.photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.photo.service__photo {
  aspect-ratio: 4 / 3;
}

.photo.step__photo {
  aspect-ratio: 4 / 3;
}

.photo.al__photo {
  min-height: 16rem;
}

.works__item--photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

@media (min-width: 64em) {
  .photo.service__photo {
    aspect-ratio: 4 / 5;
  }

  .photo.al__photo {
    min-height: 100%;
  }
}