/* Ferenge — Site R03 · componentes e seções.
   Só tokens do DS (css/tokens.css). Sem hex, rgb ou px (exceto 1px/2px e @media) — ver tests/lint-tokens.test.mjs. */

:root{
  --header-h:4.5rem;
  --tap:2.75rem;
  --hero-max:48rem;
  --mobile-bar-h:4.5rem;
}

[hidden]{display:none!important}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

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

.skip-link{position:absolute;left:1rem;top:-10rem;z-index:100;padding:0.75rem 1rem;background:var(--navy);color:var(--wire);font-family:var(--font-label);font-weight:var(--weight-black);font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase;text-decoration:none}
.skip-link:focus{top:1rem}

/* ── Botões (Button do DS) ─────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;min-height:var(--tap);padding:0.9rem 1.5rem;font-family:var(--font-label);font-weight:var(--weight-black);font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase;text-decoration:none;line-height:1.2;border:1px solid transparent;border-radius:var(--radius);background:transparent;cursor:pointer;transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease,transform var(--dur-press) var(--ease-out)}
.btn:active{transform:scale(0.97)}
.btn--primary{background:var(--orange);color:var(--navy)}
.btn--primary:hover{background:var(--orange-dim);color:var(--navy)}
.btn--ghost-navy{border-color:var(--wire-dim);color:var(--wire)}
.btn--ghost-navy:hover{border-color:var(--orange);color:var(--orange)}
.btn--ghost-ink{border-color:var(--ink);color:var(--ink)}
.btn--ghost-ink:hover{border-color:var(--orange);color:var(--orange-dim)}

/* ── Header (SiteHeader do DS) ─────────────────────────── */
.site-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--paper-line)}
.site-header__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.75rem 1.5rem;min-height:var(--header-h);padding-block:0.625rem}
.site-header__logo{display:block;flex-shrink:0;margin-right:auto}
/* Seletor de idioma (selo do SiteHeader do DS). A área de toque é ampliada pelo ::after. */
.lang-switch{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:0.3rem 0.45rem;font-family:var(--font-label);font-weight:var(--weight-black);font-size:0.7rem;letter-spacing:0.04em;line-height:1;text-decoration:none;color:var(--gray);border:1px solid var(--paper-line);border-radius:var(--radius);transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease}
.lang-switch::after{content:'';position:absolute;inset:-0.75rem -0.5rem}
.lang-switch:hover{color:var(--orange-dim);border-color:var(--orange)}
@media (min-width:900px){.lang-switch{order:2}}
.site-header__logo img{height:3.25rem;width:auto}
.site-header__toggle{display:none;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);padding:0;border:1px solid var(--paper-line);border-radius:var(--radius);background:transparent;color:var(--ink);cursor:pointer}
.site-header__burger,.site-header__burger::before,.site-header__burger::after{display:block;width:1.25rem;height:2px;background:currentColor;transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) ease}
.site-header__burger{position:relative}
.site-header__burger::before,.site-header__burger::after{content:'';position:absolute;left:0}
.site-header__burger::before{top:-0.4rem}
.site-header__burger::after{top:0.4rem}
.site-header__toggle[aria-expanded="true"] .site-header__burger{background:transparent}
.site-header__toggle[aria-expanded="true"] .site-header__burger::before{transform:translateY(0.4rem) rotate(45deg)}
.site-header__toggle[aria-expanded="true"] .site-header__burger::after{transform:translateY(-0.4rem) rotate(-45deg)}

.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 2rem}
.site-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 2rem}
.site-nav__link{display:inline-flex;align-items:center;min-height:var(--tap);font-family:var(--font-label);font-weight:var(--weight-black);font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:0.45em;text-decoration-color:transparent;transition:color var(--dur-fast) ease,text-decoration-color var(--dur-fast) ease}
.site-nav__link:hover{color:var(--orange-dim);text-decoration-color:var(--orange)}

@media (max-width:899.98px){
  .js .site-header__toggle{display:inline-flex}
  .js .site-nav{display:none;position:fixed;inset:var(--header-h) 0 0 0;z-index:39;flex-direction:column;align-items:stretch;gap:2rem;padding:1.5rem;overflow-y:auto;background:var(--paper)}
  .js .site-nav.is-open{display:flex}
  .js .site-nav__list{flex-direction:column;gap:0}
  .js .site-nav__link{width:100%;min-height:3.5rem;font-size:1.25rem;border-bottom:1px solid var(--paper-line)}
  .js .site-nav .site-header__cta{align-self:flex-start}
  body.menu-open{overflow:hidden}
}
@media (min-width:900px){
  .site-header__cta{transition:opacity var(--dur-fast) ease,visibility var(--dur-fast) ease,background-color var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease,transform var(--dur-press) var(--ease-out)}
  .site-header__cta.is-concealed{opacity:0;visibility:hidden}
}

/* ── Seções ────────────────────────────────────────────── */
.section{padding-block:var(--section-y-sm)}
.section--paper{background:var(--paper);color:var(--ink)}
.section--model{background:var(--navy);color:var(--wire)}
.section--deep{background:var(--navy-deep);color:var(--wire)}
.section__head{margin-bottom:2.5rem}
.section__title{font-size:var(--fs-h2);text-wrap:balance}
.section__lede{margin-top:0.75rem;max-width:60ch;font-size:var(--fs-lede);color:var(--gray)}
.section--model .section__lede,.section--deep .section__lede{color:var(--wire-muted)}
@media (min-width:640px){.section{padding-block:var(--section-y)}}

/* ── Footer (SiteFooter do DS) ─────────────────────────── */
.site-footer{padding:4rem 0 1.5rem;background:var(--navy);color:var(--wire)}
.site-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr));gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid var(--wire-dim)}
.site-footer__brand{font-family:var(--font-display);font-weight:var(--weight-black);font-size:1.9rem;line-height:var(--lh-tight);color:var(--orange)}
.site-footer__tagline{margin-top:0.5rem;max-width:20ch;font-size:0.95rem;color:var(--wire-muted)}
.site-footer__title{margin-bottom:0.75rem;font-family:var(--font-label);font-weight:var(--weight-black);font-size:var(--fs-label-sm);letter-spacing:0.12em;text-transform:uppercase;color:var(--orange)}
.site-footer__text{margin-bottom:0.6rem;font-size:0.9rem;line-height:1.5}
.site-footer__text a{color:var(--wire);text-decoration:none}
.site-footer__text a:hover{color:var(--orange)}
.site-footer__small{margin-bottom:0.6rem;font-family:var(--font-mono);font-size:0.78rem;color:var(--wire-muted)}
.site-footer__legal{padding-top:1.5rem}
.site-footer__legal .site-footer__small{margin-bottom:0}

/* ── Barra fixa no mobile ──────────────────────────────── */
.mobile-cta{position:fixed;inset:auto 0 0 0;z-index:30;display:flex;gap:0.5rem;padding:0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));background:var(--navy);border-top:1px solid var(--wire-dim);animation:mobile-cta-in var(--dur-enter) var(--ease-out)}
.mobile-cta .btn{flex:1;padding-inline:0.75rem}
.mobile-cta .btn--primary{flex:2}
@keyframes mobile-cta-in{from{transform:translateY(100%)}to{transform:none}}
@media (max-width:639.98px){.site-footer{padding-bottom:calc(1.5rem + var(--mobile-bar-h))}}
@media (min-width:640px){.mobile-cta{display:none}}

/* ── Hero ──────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));overflow:hidden;background:var(--navy-deep);color:var(--wire)}
.hero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% center}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--scrim-hero)}
/* Vídeo do hero (só celular em pé, via JS): entra por cima da foto quando começa a tocar. */
.hero__video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--dur-enter) ease}
.hero__video.is-playing{opacity:1}
.hero__video-toggle{position:absolute;top:1rem;right:1rem;min-height:var(--tap);padding:0.5rem 0.9rem;font-family:var(--font-label);font-weight:var(--weight-black);font-size:var(--fs-label-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--wire);background:var(--scrim-chip);border:1px solid var(--wire-dim);border-radius:var(--radius);cursor:pointer;transition:border-color var(--dur-fast) ease,color var(--dur-fast) ease}
.hero__video-toggle:hover{border-color:var(--orange);color:var(--orange)}
.hero__inner{flex:1;display:grid;grid-template-columns:minmax(0,1fr);align-content:end;gap:2rem;padding-block:4rem 2rem}
.hero__content{max-width:44rem}
.hero__title{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--tracking-head);color:var(--wire);text-wrap:balance}
.hero__lede{margin-top:1.25rem;max-width:60ch;font-size:var(--fs-lede);color:var(--wire)}
.hero__actions{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:2rem}
.hero__rail{list-style:none;margin-block:0;padding:1rem 0 1.25rem;display:flex;flex-wrap:wrap;row-gap:0.35rem;border-top:1px solid var(--wire-dim);font-family:var(--font-mono);font-size:var(--fs-body);color:var(--wire-muted)}
.hero__rail li{white-space:nowrap}
.hero__rail li+li::before{content:'·';margin-inline:0.6rem}

@media (min-width:900px){
  .hero{min-height:min(calc(100vh - var(--header-h)),var(--hero-max));min-height:min(calc(100svh - var(--header-h)),var(--hero-max))}
  .hero__inner{padding-block:3rem 2.5rem}
  /* Teste (2026-09-23): no desktop (versão com foto) o texto fica à direita, longe do monumento. */
  .hero__content{margin-left:auto;text-align:right}
  .hero__lede{margin-left:auto}
  .hero__actions{justify-content:flex-end}
  .hero__rail{justify-content:flex-end;font-size:var(--fs-lede)}
}

/* ── Obras em destaque ─────────────────────────────────── */
/* 20rem (não os 280px do DS) para dar exatamente 3 colunas no container de 1240px, como pede o spec. */
.obras__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:var(--grid-gap)}
/* Teste (2026-09-23): cards brancos sobre a seção navy, com contorno laranja de 2px.
   Foge da regra do DS "laranja = estado"; para voltar, use 1px var(--navy) ou var(--paper-line). */
.obra-card{display:flex;flex-direction:column;color:var(--ink);background:var(--white);border:2px solid var(--orange)}
.obra-card__media{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--navy)}
.obra-card__media img{width:100%;height:100%;object-fit:cover}
/* Cota do card: a medida principal desenhada sobre a base da foto. */
.obra-card__cota{position:absolute;inset:auto 0 0 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:0.75rem;padding:2.5rem 1rem 0.85rem;background:var(--scrim-cover);color:var(--wire)}
/* Cota só com a linha (sem traços nas pontas); o destaque é o valor. */
.obra-card__cota-line{height:1px;background:currentColor;opacity:0.7}
.obra-card__cota-value{font-family:var(--font-mono);font-size:clamp(1.35rem,2.4vw,1.6rem);font-weight:600;line-height:1;white-space:nowrap}
.obra-card__cota-label{grid-column:1/-1;justify-self:center;margin-top:0.35rem;font-family:var(--font-label);font-weight:var(--weight-black);font-size:var(--fs-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--wire-muted)}
.obra-card__body{flex:1;display:flex;flex-direction:column;gap:0.4rem;padding:var(--card-pad)}
.obra-card__title{font-size:var(--fs-title)}
.obra-card__meta{font-size:var(--fs-small);color:var(--gray)}
.obra-card__cat{color:var(--orange-dim);font-weight:var(--weight-black);letter-spacing:0.03em;text-transform:uppercase}
.obra-card__fact{margin-top:auto;padding-top:0.75rem;border-top:1px solid var(--paper-line);font-size:var(--fs-small);color:var(--gray)}
.obra-card__fact .mono{margin-right:0.35rem;font-size:0.95rem;font-weight:600;color:var(--ink)}
.obras__more{margin-top:2.5rem}

/* ── Como trabalhamos ──────────────────────────────────── */
.perfil{margin-bottom:2.5rem}
.perfil__question{margin-bottom:0.9rem;font-family:var(--font-label);font-weight:var(--weight-black);font-size:var(--fs-label-sm);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--gray)}
.perfil__chips{display:flex;flex-wrap:wrap;gap:0.5rem}
.chip{min-height:var(--tap);padding:0.5rem 1rem;font-family:var(--font-label);font-weight:var(--weight-black);font-size:0.78rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink);background:var(--white);border:1px solid var(--paper-line);border-radius:0;cursor:pointer;transition:border-color var(--dur-fast) ease,background-color var(--dur-fast) ease,color var(--dur-fast) ease,transform var(--dur-press) var(--ease-out)}
.chip:hover{border-color:var(--orange)}
.chip:active{transform:scale(0.96)}
.chip[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:var(--white)}

.etapas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--paper-line)}
.etapa{padding-block:1.75rem;border-bottom:1px solid var(--paper-line)}
.etapa__num{font-family:var(--font-mono);font-size:var(--fs-small);color:var(--gray)}
.etapa__title{margin-top:0.5rem;font-size:1.5rem;color:var(--ink)}
.etapa__sub{margin-top:0.25rem;font-size:var(--fs-small);color:var(--gray)}
.etapa__valores{margin:1.25rem 0 0}
.etapa__valores > div{padding-block:0.75rem;border-top:1px solid var(--paper-line)}
.etapa__valores dt{font-family:var(--font-label);font-weight:var(--weight-black);font-size:var(--fs-label-sm);letter-spacing:0.05em;text-transform:uppercase;color:var(--gray)}
.etapa__valores dd{margin:0.3rem 0 0;color:var(--ink)}
/* Com JS: só o perfil escolhido aparece; o rótulo do perfil fica só para leitores de tela. */
.etapas.is-filtered .etapa__valores > div{padding-block:0;border-top:0}
.etapas.is-filtered .etapa__valores dt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.etapas.is-filtered .etapa__valores dd{margin:0;font-size:var(--fs-lede);animation:perfil-in var(--dur-fast) ease both}
@keyframes perfil-in{from{opacity:0}to{opacity:1}}
@media (min-width:900px){
  .etapas{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);border-top:0}
  .etapa{padding-block:1.5rem 0;border-top:1px solid var(--paper-line);border-bottom:0}
}

/* ── Contato ───────────────────────────────────────────── */
.contato{display:grid;grid-template-columns:minmax(0,1fr);gap:3rem}
.contato .section__head{margin-bottom:0}
@media (min-width:900px){
  .contato{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:4rem;align-items:start}
  .contato__head{grid-column:1/-1}
}

.form{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}
@media (min-width:640px){
  .form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field--full,.form__actions,.form__fallback{grid-column:1/-1}
}
.field{display:flex;flex-direction:column;gap:0.4rem}
.field__label{font-family:var(--font-label);font-weight:var(--weight-black);font-size:var(--fs-label-sm);letter-spacing:0.05em;text-transform:uppercase;color:var(--wire-muted)}
.field__input{width:100%;min-height:var(--tap);padding:0.7rem 0.85rem;font:inherit;color:var(--wire);background:var(--navy);border:1px solid var(--wire-dim);border-radius:0;transition:border-color var(--dur-fast) ease}
.field__input:hover{border-color:var(--wire-muted)}
.field__input::placeholder{color:var(--wire-muted);opacity:1}
.field__input[aria-invalid="true"]{border-color:var(--orange)}
textarea.field__input{min-height:8rem;resize:vertical}
.field__select{position:relative}
.field__select::after{content:'';position:absolute;right:1rem;top:50%;width:0.5rem;height:0.5rem;border-right:2px solid var(--wire-muted);border-bottom:2px solid var(--wire-muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
select.field__input{appearance:none;padding-right:2.5rem;cursor:pointer}
select.field__input option{color:var(--ink);background:var(--white)}
.field__error{font-size:var(--fs-small);color:var(--orange)}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1.25rem}
.form__note{font-size:var(--fs-small);color:var(--wire-muted)}
.form__fallback{display:grid;gap:0.9rem;padding:1.25rem;border:1px solid var(--wire-dim)}
.form__fallback-actions{display:flex;flex-wrap:wrap;gap:0.75rem}
.form__copy-source{width:100%;min-height:8rem;padding:0.75rem;font-family:var(--font-body);font-size:var(--fs-small);color:var(--wire);background:var(--navy);border:1px solid var(--wire-dim)}
.form__copy-status{font-size:var(--fs-small);color:var(--wire-muted)}
.form__copy-status:empty{display:none}

/* ── Ficha "Contato direto" (SpecSheet do DS) ──────────── */
.spec-sheet{padding:var(--sheet-pad);background:var(--navy);color:var(--wire);border:1px solid var(--wire-faint)}
/* Título em wire-muted (não laranja): a tela já tem o botão de envio laranja. */
.spec-sheet__title{margin-bottom:1.1rem;font-family:var(--font-label);font-weight:var(--weight-black);font-size:var(--fs-label-sm);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--wire-muted)}
.spec-sheet__list{margin:0}
.spec-sheet__row{padding-block:0.85rem;border-top:1px solid var(--wire-dim)}
.spec-sheet__label{margin-bottom:0.3rem;font-family:var(--font-label);font-weight:var(--weight-black);font-size:0.7rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--wire-muted)}
.spec-sheet__value{margin:0;font-size:0.95rem;line-height:1.5;color:var(--wire)}
.spec-sheet__value a:not(.btn){color:var(--wire);text-underline-offset:0.2em}
.spec-sheet__value a:not(.btn):hover{color:var(--orange)}
.spec-sheet__btn{display:flex;width:fit-content;margin-top:0.75rem}