/* Estilos das secoes da onda 1b a 1d.
 * Mesma regra do components.css: so var() de tokens.css, nenhum px solto de
 * espacamento. */

/* =================================================================== lines
 * Sequencia de frases curtas. E o ritmo de voz da marca: nao vira card, nao
 * vira bullet. Fio dourado a esquerda amarra a sequencia sem encaixotar.
 */

.lines__inner { max-width: 62ch; }

.lines__eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--space-4);
}

.lines__heading {
  font-size: var(--step-4);
  text-wrap: balance;
}

.lines__body {
  margin-top: var(--space-5);
  color: var(--c-ink-muted);
}

.lines__list {
  margin-top: var(--space-7);
  padding-left: var(--space-6);
  border-left: 1px solid var(--c-border);
  list-style: none;
}

.lines__item {
  position: relative;
  padding-block: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--c-accent);
}

.lines__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-6) - 4px);
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  transform: translateY(-50%);
}

.lines__closing {
  max-width: var(--measure);
  margin-top: var(--space-7);
  color: var(--c-ink);
}

/* =========================================================== services grid
 * Grade de servicos. Fio separando, nao caixa: a caixa repetida em toda dobra
 * e justamente o que achata a pagina.
 */

.services-grid__heading {
  font-size: var(--step-4);
  text-wrap: balance;
  max-width: 24ch;
}

.services-grid__intro {
  max-width: 62ch;
  margin-top: var(--space-4);
  color: var(--c-ink-muted);
}

.services-grid__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-6) var(--space-7);
  margin-top: var(--space-8);
  list-style: none;
}

/* ⚠️ Os cartoes JA tem a mesma altura (a grade estica por padrao). O que ficava
 * torto era o ponto onde o texto comeca: um titulo de duas linhas empurrava o
 * corpo 30px abaixo do corpo dos vizinhos, e a fileira inteira parecia
 * desalinhada. Reservar duas linhas de titulo iguala esse ponto de partida
 * sem inventar altura fixa para o cartao. Medido: desvio de 30px -> 0. */
.services-grid__title { min-height: calc(2em * var(--leading-snug)); }

.services-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-border);
}

.services-grid__icon {
  display: block;
  width: var(--icon-md);
}

.services-grid__icon img { width: 100%; height: auto; }

.services-grid__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--c-ink-strong);
}

.services-grid__body {
  font-size: var(--step--1);
  color: var(--c-ink-muted);
}

/* Variante densa: so rotulo, sem descricao (a lista de tipos de imovel). */
.services-grid__list--dense {
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: var(--space-4) var(--space-6);
}

.services-grid__list--dense .services-grid__icon { width: var(--icon-sm); }

.services-grid__list--dense .services-grid__title { font-size: var(--step-0); }

/* ========================================================== split compare */

.split-compare__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-6), 5vw, var(--space-9));
}

.split-compare__side {
  padding-top: var(--space-5);
  border-top: 2px solid var(--c-accent);
}

.split-compare__title {
  font-size: var(--step-3);
  text-wrap: balance;
}

.split-compare__body {
  margin-top: var(--space-4);
  color: var(--c-ink-muted);
}

.split-compare__closing {
  max-width: 60ch;
  margin-top: var(--space-8);
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  color: var(--c-accent);
}

@media (max-width: 47.5em) {
  .split-compare__grid { grid-template-columns: 1fr; }
}

/* ================================================================ gallery
 * Slideshow por scroll-snap nativo. Sem JS continua sendo lista rolavel.
 *
 * ⛔ A barra de rolagem fica ESCONDIDA (era ela o "scroll branco" da
 * reclamacao), mas a rolagem continua inteira: dedo, trackpad, roda e
 * teclado. Por isso a lista mantem tabindex="0": sem a barra, o teclado e a
 * unica saida de quem nao usa mouse.
 * ⛔ Controle que nasce com hidden precisa de regra [hidden] EXPLICITA.
 * display:flex de autor GANHA do [hidden] do browser, e o controle aparece
 * para quem nao tem JS. Era o que ja acontecia com as setas.
 */

.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}

.gallery__heading { font-size: var(--step-4); }

.gallery__intro {
  max-width: 60ch;
  margin-top: var(--space-4);
  color: var(--c-ink-muted);
}

.gallery__nav {
  display: flex;
  gap: var(--space-3);
  flex: none;
}

.gallery__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--c-accent);
  border-radius: 50%;
  color: var(--c-accent);
  font-size: var(--step-1);
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.gallery__btn:hover:not(:disabled) {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.gallery__btn:disabled { opacity: 0.35; cursor: default; }

/* Sem estas tres linhas o hidden do HTML nao vale nada. */
.gallery__nav[hidden],
.gallery__btn[hidden],
.gallery__zoom[hidden] { display: none; }

.gallery__glyph { display: block; }
.gallery__glyph svg { fill: currentColor; }

.gallery__btn--play .gallery__glyph-play { display: none; }
.gallery__btn--play.is-paused .gallery__glyph-play { display: block; }
.gallery__btn--play.is-paused .gallery__glyph-pause { display: none; }

.gallery__track {
  /* position: relative faz do track o offsetParent dos slides. E assim que o
   * JS acha a posicao exata de cada foto sem adivinhar gutter nem gap. */
  position: relative;
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-inline: var(--gutter);
  padding-bottom: var(--space-4);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Edge legado */
}

.gallery__track::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

.gallery__slide {
  flex: 0 0 auto;
  width: min(78vw, 320px);
  scroll-snap-align: center;
}

.gallery__figure { margin: 0; }

.gallery__frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.gallery__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.gallery__zoom {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--space-3);
  background: transparent;
  border: 0;
  color: var(--c-ink);
  cursor: zoom-in;
}

/* O anel de foco padrao fica DO LADO DE FORA e o frame corta com overflow.
 * Deslocado para dentro, ele volta a aparecer. */
.gallery__zoom:focus-visible { outline-offset: -6px; }

.gallery__zoom-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* Veu proprio: em foto clara um icone sem fundo simplesmente some. */
  background: var(--c-scrim);
  transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.gallery__zoom-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.gallery__zoom:hover .gallery__zoom-icon,
.gallery__zoom:focus-visible .gallery__zoom-icon {
  background: var(--c-scrim-strong);
  transform: scale(1.08);
}

.gallery__label {
  margin-top: var(--space-3);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-accent);
}

/* --------------------------------------------------------- zoom da galeria
 * <dialog> NATIVO com showModal(): foco preso, Esc para fechar e backdrop ja
 * vem prontos do browser. Nao ha gerente de foco escrito a mao, que e
 * exatamente onde esse tipo de componente costuma quebrar.
 */

.gallery-zoom {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: var(--space-6);
  border: 0;
  background: transparent;
  color: var(--c-ink);
  overflow: hidden;
}

/* ⛔ Valor cru de proposito: ::backdrop nao herda de :root em browser um
 * pouco mais velho, entao var() nao resolve aqui e o veu sairia transparente. */
.gallery-zoom::backdrop { background: rgba(19, 29, 24, 0.93); }

.gallery-zoom[open] {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--space-4);
}

.gallery-zoom__stage {
  display: grid;
  place-items: center;
  min-height: 0;   /* deixa a linha 1fr encolher a foto em vez de estourar */
}

/* display: contents tira o <picture> da conta: quem vira item da grade e o
 * proprio <img>, e so assim o max-height: 100% dele tem contra o que medir. */
.gallery-zoom__stage picture { display: contents; }

.gallery-zoom__image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.gallery-zoom__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  text-align: center;
}

.gallery-zoom__label {
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-accent);
}

.gallery-zoom__counter {
  font-size: var(--step--1);
  color: var(--c-ink-muted);
  font-variant-numeric: tabular-nums;
}

/* Os botoes do zoom flutuam sobre a foto, entao precisam de fundo proprio.
 * No hover o .gallery__btn:hover:not(:disabled) continua ganhando e enche
 * de dourado, que e o comportamento das setas da fila. */
.gallery-zoom .gallery__btn { background: var(--c-scrim); }

.gallery-zoom__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-size: var(--step-2);
}

.gallery-zoom__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.gallery-zoom__arrow--prev { left: var(--space-5); }
.gallery-zoom__arrow--next { right: var(--space-5); }

/* Trava a pagina atras do zoom. A classe so entra pelo JS que abriu o
 * dialog, entao quem nao tem JS nunca fica com a pagina travada. */
.has-zoom-open,
.has-zoom-open body { overflow: hidden; }

/* =========================================================== testimonials
 * O card continua sendo a forma CERTA: cada depoimento e uma unidade
 * independente, de autor diferente. O que muda e o eixo, que virou horizontal,
 * pela MESMA mecanica da galeria: scroll-snap nativo mais os atributos
 * [data-carousel-track] / [data-carousel-nav]. Zero JS novo.
 *
 * ⛔ SEM AUTOPLAY, ao contrario da galeria. Imagem se entende de relance;
 * depoimento e texto, e o tempo de leitura muda de pessoa para pessoa (aqui as
 * citacoes vao de 9 a 50 palavras). Mover o texto sozinho tira a frase do meio
 * da leitura e cai no WCAG 2.2.2. Se um dia entrar autoplay, ele tem que ser
 * opt-in por atributo no bloco que quer, nunca em todo [data-carousel-track].
 */

.testimonials__head { text-align: center; }

.testimonials__heading {
  font-size: var(--step-4);
  text-align: center;
  text-wrap: balance;
}

.testimonials__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ⛔ O atributo hidden sozinho NAO vence o display: flex de cima: declaracao de
 * autor ganha da folha de estilo do browser, que e quem traz
 * [hidden] { display: none }. Sem esta linha, quem esta sem JS (e todo mundo,
 * no instante entre o primeiro paint e o defer do carousel.js) ve duas setas
 * mortas. Quem tira o hidden e o assets/js/carousel.js. */
.testimonials__nav[hidden] { display: none; }

.testimonials__btn {
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--c-accent);
  border-radius: 50%;
  color: var(--c-accent);
  font-size: var(--step-1);
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.testimonials__btn:hover:not(:disabled) {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.testimonials__btn:disabled { opacity: 0.35; cursor: default; }

/* ⛔ position: relative NAO e enfeite: sem ancestral posicionado, todo
 * elemento `position: absolute` de dentro (os rotulos .visually-hidden de
 * leitor de tela, por exemplo) passa a ter o BLOCO INICIAL como referencia,
 * escapa do recorte deste scroller e vai parar na coordenada real do slide,
 * a 1800px da esquerda. Isso NAO aparece em body.scrollWidth, mas estica a
 * area rolavel do documento: a pagina inteira passava a rolar 1100px de lado
 * num celular de 390px. Medido, nao deduzido. */
.testimonials__track {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-inline: var(--gutter);
  padding-bottom: var(--space-4);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  /* a barra de rolagem clara que o cliente reclamou: fina e na cor da marca */
  scrollbar-width: thin;
  scrollbar-color: var(--c-border) transparent;
}

.testimonials__track::-webkit-scrollbar { height: 6px; }
.testimonials__track::-webkit-scrollbar-track { background: transparent; }

.testimonials__track::-webkit-scrollbar-thumb {
  background: var(--c-border);
  border-radius: var(--radius-pill);
}

.testimonials__item {
  display: flex;
  flex: 0 0 auto;
  width: min(86vw, 360px);
  scroll-snap-align: start;
}

.testimonials__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  margin: 0;
  padding: var(--space-6);
  background: var(--c-wash);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
}


.testimonials__stars {
  /* ⚠️ 24px e um piso, nao enfeite. O dourado sobre o cartao do depoimento da
   * 4.13:1: reprova como texto normal (pede 4.5) e passa como texto grande
   * (pede 3). O cartao e que rouba o contraste, porque o veu clareia o verde.
   * Estrela de avaliacao maior tambem se le melhor. */
  font-size: max(1.5rem, var(--step-0));
  letter-spacing: 0.18em;
  color: var(--c-accent);
}

.testimonials__quote { margin: 0; flex: 1; }

.testimonials__quote p {
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--c-ink);
}

.testimonials__author {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-border);
}

.testimonials__name {
  font-weight: 500;
  color: var(--c-ink-strong);
}

.testimonials__source {
  font-size: var(--step--1);
  color: var(--c-ink-muted);
}

/* ============================================================ plan detail */

.plan-detail__head { max-width: var(--measure); }

.plan-detail__name {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}

.plan-detail__heading {
  margin-top: var(--space-3);
  font-size: var(--step-4);
  text-wrap: balance;
}

.plan-detail__body {
  margin-top: var(--space-4);
  color: var(--c-ink-muted);
}

.plan-detail__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-7);
  margin-top: var(--space-8);
}

.plan-detail__group-title {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--c-accent);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-border);
}

.plan-detail__list {
  margin-top: var(--space-4);
  list-style: none;
}

/* Plano com UM grupo so (o Standard Care): a lista abre em duas colunas em vez
 * de virar uma tira de 10 linhas com dois tercos da dobra vazios a direita.
 *
 * ⚠️ 380px e escolhido, nao chutado: com o gap de 48px, a faixa util de 1184px
 * cabe duas trilhas de 380 (808px) e NAO cabe tres (1236px). Com 300px cabiam
 * tres, e cada item quebrava em quatro linhas numa coluna magra.
 * ⚠️ O min(380px, 100%) e o que impede o estouro: sem ele a trilha continua
 * 380px numa faixa util de 288px (viewport de 320px) e a pagina inteira ganha
 * barra horizontal. auto-fit devolve uma coluna sozinho abaixo de ~808px.
 */
.plan-detail__group:only-child .plan-detail__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 0 var(--space-7);
}

.plan-detail__item {
  position: relative;
  padding-left: var(--space-6);
  padding-block: var(--space-2);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  color: var(--c-ink);
}

.plan-detail__item::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--c-accent);
  font-weight: 600;
}

.plan-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* =========================================================== plan compare */

.plan-compare__heading {
  font-size: var(--step-4);
  text-align: center;
  text-wrap: balance;
}

/* ⛔ position: relative NAO e enfeite: sem ancestral posicionado, todo
 * elemento `position: absolute` de dentro (os rotulos .visually-hidden de
 * leitor de tela, por exemplo) passa a ter o BLOCO INICIAL como referencia,
 * escapa do recorte deste scroller e vai parar na coordenada real do slide,
 * a 1800px da esquerda. Isso NAO aparece em body.scrollWidth, mas estica a
 * area rolavel do documento: a pagina inteira passava a rolar 1100px de lado
 * num celular de 390px. Medido, nao deduzido. */
.plan-compare__scroll {
  position: relative;
  margin-top: var(--space-8);
  overflow-x: auto;
  scrollbar-width: thin;
}

.plan-compare__table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  text-align: left;
}

.plan-compare__table th,
.plan-compare__table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--c-border);
}

.plan-compare__table thead th {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--c-accent);
  border-bottom-width: 2px;
}

.plan-compare__table tbody th {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--c-ink);
}

.plan-compare__cell {
  width: 22%;
  font-size: var(--step-1);
  text-align: center;
}

.plan-compare__cell--yes { color: var(--c-accent); }
.plan-compare__cell--no  { color: var(--c-ink-muted); }

/* Duas notas lado a lado embaixo da tabela. Eram duas dobras separadas, cada
 * uma com padding cheio para tres paragrafos de texto. */
.plan-compare__notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  /* ⛔ Sem align-items: start. Sao dois cartoes COM borda e fundo lado a lado:
   * com "start" cada um fica na altura do proprio texto e a dupla fica torta.
   * O padrao da grade (stretch) iguala os dois. */
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.plan-compare__note {
  padding: var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-wash);
}

.plan-compare__note-title {
  font-size: var(--step-2);
  margin-bottom: var(--space-4);
}

.plan-compare__note p { color: var(--c-ink-muted); }

/* ⛔ Num celular esta tabela mostrava UM plano so.
 *
 * min-width de 480px contra 288px de caixa util num aparelho de 320px: a
 * coluna "Signature Care" ficava inteira fora da tela e o cabecalho cortava
 * no meio da palavra. A rolagem lateral existia, mas em celular a barra e
 * invisivel ate alguem arrastar, entao a tabela parecia completa e mentia.
 * Uma comparacao que esconde metade da comparacao nao compara nada.
 *
 * Abaixo de 560px a tabela deixa de ter piso e encolhe: rotulo menor, vao
 * menor e coluna de marca mais estreita fazem os DOIS planos caberem lado a
 * lado ja em 320px. Medido: caixa 288, tabela 288. */
@media (max-width: 35em) {
  .plan-compare__table { min-width: 0; }

  .plan-compare__table th,
  .plan-compare__table td { padding: var(--space-3) var(--space-2); }

  .plan-compare__table thead th { font-size: var(--step-0); }
  .plan-compare__table tbody th { font-size: var(--step--1); }

  .plan-compare__cell { width: 18%; font-size: var(--step-0); }
}

/* ========================================================= service detail */

.service-detail__heading {
  font-size: var(--step-4);
  text-wrap: balance;
  max-width: 24ch;
}

.service-detail__lead {
  max-width: 70ch;
  margin-top: var(--space-4);
  color: var(--c-ink-muted);
}

.service-detail__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  margin-top: var(--space-8);
}

.service-detail__item {
  display: grid;
  grid-template-columns: var(--icon-lg) 1fr;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--c-border);
}

.service-detail__icon { display: block; width: var(--icon-lg); }
.service-detail__icon img { width: 100%; height: auto; }

.service-detail__title { font-size: var(--step-2); }

.service-detail__tagline {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--c-accent);
}

.service-detail__body {
  max-width: 70ch;
  margin-top: var(--space-4);
  color: var(--c-ink-muted);
}

.service-detail__includes-label {
  margin-top: var(--space-5);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}

.service-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  list-style: none;
}

.service-detail__tags li {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  color: var(--c-ink);
}

@media (max-width: 37.5em) {
  .service-detail__item { grid-template-columns: 1fr; }
}

/* ========================================================== estimate form */

.estimate__head { max-width: var(--measure); }

.estimate__heading { font-size: var(--step-4); text-wrap: balance; }

.estimate__body {
  margin-top: var(--space-4);
  color: var(--c-ink-muted);
}

.estimate__badge {
  margin-top: var(--space-4);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-accent);
}

.estimate__layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  align-items: start;
  gap: clamp(var(--space-6), 4vw, var(--space-8));
  margin-top: var(--space-8);
}

/* ⛔ Item de grid ou flex nasce com min-width: auto: ele se RECUSA a ficar
 * menor que o proprio conteudo. overflow-wrap nao resolve, porque ele deixa
 * quebrar a palavra mas nao muda a largura minima intrinseca da caixa. Com a
 * fonte do navegador em 200%, o <input> pedia 399px de largura intrinseca
 * (a largura padrao de 20 caracteres) e empurrava o formulario para 408px.
 * min-width: 0 e o que autoriza o item a encolher. Medido, nao deduzido. */
.estimate__layout > * { min-width: 0; }

.estimate__section {
  margin: 0 0 var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-inset);
}

/* Agora so os ramos usam esta classe, e ramo nao tem mais borda para a legend
 * sentar em cima. Sem borda, o recuo lateral fica solto no meio do nada. */
.estimate__legend {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--c-accent);
}

.estimate__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--space-5);
}

.field { display: flex; flex-direction: column; gap: var(--space-2); }

/* Pergunta com opcoes ocupa a linha inteira: quebrar uma lista de radio em
 * coluna estreita empilha texto e vira ilegivel. */
.field--radio, .field--checkbox, .field--textarea { grid-column: 1 / -1; }

.field__set { margin: 0; padding: 0; border: 0; }

.field__label {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--c-ink-strong);
}

.field__req { color: var(--c-accent); }

.field__input {
  width: 100%;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  background: var(--c-field);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-ink-strong);
  font-size: var(--step-0);
}

.field__input:focus {
  border-color: var(--c-accent);
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}

.field__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.field__options--service { gap: var(--space-3); }

.option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}

.option:hover { border-color: var(--c-accent); }

.option input { accent-color: var(--c-accent); flex: none; }

.option:has(input:checked) {
  background: color-mix(in srgb, var(--c-accent) 16%, transparent);
  border-color: var(--c-accent);
  color: var(--c-ink-strong);
}

/* Armadilha de robo. Fora da tela, nao apenas display:none: alguns robos
 * ignoram campo com display none e caem em campo so deslocado. */
.estimate__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.estimate__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.estimate__pending {
  /* Saiu de dentro de .estimate__actions, que tinha o gap do flex. */
  margin-top: var(--space-4);
  font-size: var(--step--1);
  color: var(--c-ink-muted);
}

.estimate__pending a { color: var(--c-accent); }

.estimate__aside {
  position: sticky;
  top: var(--space-9);
  padding: var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-wash);
}

.estimate__aside-title { font-size: var(--step-2); }

.estimate__aside-body {
  margin-top: var(--space-3);
  margin-bottom: var(--space-5);
  font-size: var(--step--1);
  color: var(--c-ink-muted);
}

.estimate__contact {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-border);
  font-size: var(--step--1);
}

.estimate__contact dt {
  font-weight: 500;
  color: var(--c-accent);
}

.estimate__contact dd {
  margin: 0 0 var(--space-4);
  color: var(--c-ink);
}

.estimate__contact a { color: inherit; }

/* Com JS, o passo fechado e os ramos nao escolhidos saem da tela. Sem JS a
 * classe nunca entra no <html> e o formulario aparece inteiro, preenchivel.
 * .estimate__actions precisa estar aqui porque tem display:flex proprio, e
 * display no CSS vence o atributo hidden. */
.js-form .estimate__branch[hidden],
.js-form .estimate__step[hidden],
.js-form .estimate__actions[hidden] { display: none; }

/* ---------------------------------------------------------- passos do form */

/* Nasce com hidden no HTML. O :not([hidden]) e o que impede display:flex de
 * vencer o atributo: sem isso o indicador apareceria mesmo sem JS, apontando
 * um "passo atual" que nao existe. */
.stepper:not([hidden]) {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.stepper__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  color: var(--c-ink-muted);
}

.stepper__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-weight: 600;
}

/* O estado nao e so cor: o passo feito e o atual enchem o circulo, o atual
 * ainda ganha anel e peso, e cada item carrega a palavra do estado escondida
 * para leitor de tela. */
.stepper__item[data-state="done"] .stepper__num,
.stepper__item[data-state="current"] .stepper__num {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}

.stepper__item[data-state="current"] {
  color: var(--c-ink-strong);
  font-weight: 600;
}

.stepper__item[data-state="current"] .stepper__num {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 28%, transparent);
}

.estimate__step-title { margin-bottom: var(--space-5); }

.estimate__step-count {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}

/* O passo recebe foco quando abre, para quem navega por teclado nao continuar
 * la em cima. O anel so aparece no foco por teclado. */
.estimate__step:focus { outline: none; }
.estimate__step:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

/* Ramo escolhido: filete separando do seletor, nao um cartao dentro do outro. */
.estimate__branch {
  margin: var(--space-6) 0 0;
  padding: var(--space-5) 0 0;
  border: 0;
  border-top: 1px solid var(--c-border);
}

.estimate__nav:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.estimate__nav [data-step-next] { margin-left: auto; }
.estimate__nav .btn[hidden] { display: none; }

@media (max-width: 56.25em) {
  .estimate__layout { grid-template-columns: 1fr; }
  .estimate__aside { position: static; }
}

/* ============================================================ brand family
 * Selo do grupo, em faixa. Fio em cima e embaixo no lugar de fundo proprio:
 * a dobra anterior ja e um bloco escuro cheio, e mais um fundo aqui empilharia
 * dois blocos de cor seguidos. A faixa e leitura de 10 segundos, nao dobra.
 */

.brand-family__band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  padding-block: var(--section-y-tight);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

/* O disco e o que contem o fundo creme do arquivo. O anel dourado amarra o
 * recorte ao resto da paleta e impede o corte seco creme/verde. */
.brand-family__seal {
  width: clamp(96px, 12vw, 132px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

.brand-family__emblem {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-family__heading {
  margin-top: var(--space-2);
  font-size: var(--step-2);
  text-wrap: balance;
}

/* Sem font-size: herda --step-0, igual .prose-block__body, que e o bloco que
 * esta faixa substitui. ⛔ Nao baixar para --step--1: e o tamanho de
 * .services-grid__body, exatamente o que o cliente apontou como pequeno demais. */
.brand-family__body {
  max-width: 62ch;
  margin-top: var(--space-3);
  color: var(--c-ink-muted);
}

.brand-family__brands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-5);
  list-style: none;
}

.brand-family__brand {
  padding-left: var(--space-4);
  border-left: 1px solid var(--c-border);
}

.brand-family__brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--c-accent);
}

.brand-family__brand-role {
  display: block;
  margin-top: var(--space-1);
  color: var(--c-ink-muted);
}

@media (max-width: 45em) {
  .brand-family__band {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: var(--space-5);
  }
}

/* ============================================================= page hero
 *
 * Abertura das paginas internas. Nao repete o hero da home: la a foto e
 * metade da dobra, aqui o texto e o unico elemento e por isso ele fica
 * centrado numa medida de leitura, e nao esticado de ponta a ponta.
 */

.page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.page-hero__ornament {
  /* ⚠️ Sem largura propria: quem dimensiona e o .ornament-img, que ja e
   * clamp(180px, 26vw, 280px). Travar o pai em --icon-lg reduzia o friso da
   * marca a um tracinho de 64px. */
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.page-hero__heading {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--c-ink-strong);
  text-wrap: balance;
  max-width: 20ch;
}

.page-hero__lead {
  max-width: 54ch;
  font-size: var(--step-1);
  font-weight: 300;
  line-height: var(--leading-snug);
  color: var(--c-ink-muted);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

/* ============================================================ price cards */

.price-cards__heading {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--c-ink-strong);
  text-wrap: balance;
  max-width: 26ch;
}

.price-cards__intro {
  max-width: 62ch;
  margin-top: var(--space-4);
  color: var(--c-ink-muted);
}

.price-cards__list {
  display: grid;
  /* min() e obrigatorio: piso fixo em px dentro do minmax faz a PAGINA inteira
   * rolar de lado em tela de 320px, porque a faixa util e a largura menos dois
   * gutters. Ja reincidiu duas vezes neste projeto. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
  list-style: none;
}

.price-cards__list--single {
  grid-template-columns: minmax(0, 32rem);
  justify-content: center;
}

.price-cards__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-wash);
}

.price-cards__icon {
  display: block;
  width: var(--icon-md);
}

.price-cards__icon img { width: 100%; height: auto; }

/* ⛔ Icone e selo dividem a MESMA linha. Com o selo empilhado, o cartao que
 * tem selo comeca o titulo ~40px abaixo dos vizinhos e a fileira inteira sai
 * torta: e o mesmo defeito do titulo de duas linhas, com outra peca. */
.price-cards__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--icon-md);
}

.price-cards__badge {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.price-cards__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--c-ink-strong);
  /* Duas linhas reservadas: sem isso um titulo que quebra empurra a lista do
   * cartao para baixo e a fileira inteira desalinha, com os cartoes tendo a
   * mesma altura. Mesmo remedio ja usado na services-grid. */
  min-height: calc(2em * var(--leading-snug));
}

.price-cards__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--step--1);
  color: var(--c-ink-muted);
  list-style: none;
}

.price-cards__bullets li {
  position: relative;
  padding-left: var(--space-4);
}

.price-cards__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: var(--space-2);
  height: 1px;
  background: var(--c-accent);
}

/* ⚡ O preco e ancorado no PE do cartao. Cartao com 3 itens e cartao com 5
 * passam a mostrar o valor na MESMA linha da fileira. */
.price-cards__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-border);
}

.price-cards__value {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--c-accent);
  /* Faixa de preco tem um traco no meio; sem isto ela pede a largura inteira
   * do texto como largura minima e estoura o cartao no celular. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.price-cards__unit {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.price-cards__note,
.price-cards__footnote {
  font-size: var(--step--1);
  color: var(--c-ink-muted);
}

.price-cards__footnote {
  max-width: 62ch;
  margin-top: var(--space-6);
}

/* ================================================================== legal
 *
 * Documento para ser LIDO, nao uma dobra de marketing: uma coluna so, medida
 * de leitura curta e cada artigo com ancora propria.
 */

.legal__inner {
  max-width: 68ch;
  margin-inline: auto;
}

.legal__updated {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}

.legal__intro {
  margin-top: var(--space-5);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: var(--leading-snug);
  color: var(--c-ink-muted);
}

.legal__article { margin-top: var(--space-7); }

.legal__heading {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--c-ink-strong);
  /* ⚠️ O header e grudento: sem isto a ancora para com o titulo escondido
   * atras dele. O valor e o mesmo --header-h usado no scroll-padding. */
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

.legal__article p { margin-top: var(--space-4); }

.legal__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-left: var(--space-5);
  list-style: disc;
}

.legal__list li { padding-left: var(--space-1); }