/* Pinturas Ebenezer — estrutura transplantada de klindworthroofing.com
   Tokens medidos em design-system.md da captura (viewport 1920).
   Valores fluidos: o px medido em 1920 vira vw, com piso para telas pequenas. */

:root {
  --graphite: #24262b;      /* fundo — medido */
  --wash: #ede9e2;          /* tinta / superfície clara — medido, 12,51:1 */
  --amber: #ac9376;         /* acento — medido, 5,18:1 sobre grafite */
  --amber-ink: #7a6449;     /* âmbar escurecido p/ texto sobre creme: 4,63:1 (o medido dá 2,41:1) */
  --faded-dark: #9d9b99;    /* tinta a 60% sobre grafite: 5,47:1 */
  --faded-light: #5f5f63;   /* texto apagado sobre creme (60% daria 3,86:1) */

  --serif: "Gambetta", Georgia, "Times New Roman", serif;   /* substitui Larken (comercial) */
  --sans: "Satoshi", Arial, sans-serif;

  --pad: clamp(20px, 7.29vw, 140px);     /* margem lateral 140 */
  --gut: clamp(16px, 2.135vw, 41px);     /* calha 41 */
  --pv: clamp(64px, 6.25vw, 120px);      /* pv-large 120 */
  --mt-medium: clamp(48px, 4.17vw, 80px);
  --mt-small: clamp(36px, 3.125vw, 60px);

  --fs-body: clamp(16px, 1.146vw, 22px);   /* 22 */
  --fs-small: clamp(14px, 0.94vw, 18px);   /* 18 */
  --fs-large: clamp(20px, 1.667vw, 32px);  /* 32 */
  --fs-quote: clamp(24px, 2.19vw, 42px);   /* 42 */
  --fs-h5: clamp(30px, 3.23vw, 62px);      /* 62 */
  --fs-h1: clamp(40px, 4.27vw, 82px);      /* 82 */
  --fs-project: clamp(36px, 5.31vw, 102px);/* 102 */
  --fs-phone: clamp(40px, 6.875vw, 132px); /* 132 */
  --fs-huge: 25.1vw;                       /* 482 */

  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-img: cubic-bezier(0.165, 0.84, 0.44, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--graphite);
  color: var(--wash);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
figure, blockquote { margin: 0; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 12px 20px; background: var(--wash); color: var(--graphite); }
.skip:focus { left: 20px; top: 20px; }

/* ---------- utilitários ---------- */
.wrap { max-width: calc(1640px + 2 * var(--pad)); margin: 0 auto; padding-inline: var(--pad); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.bg-dark { background: var(--graphite); color: var(--wash); }
.bg-light { background: var(--wash); color: var(--graphite); }

.eyebrow { font-size: var(--fs-body); line-height: 1.45; text-transform: uppercase; color: var(--amber); }
.eyebrow--onlight, .bg-light .eyebrow { color: var(--amber-ink); }

.heading-huge {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-huge); line-height: 1;
  text-transform: uppercase; text-align: center;
  letter-spacing: -0.01em;
}

.btn {
  display: inline-block;
  padding: 0.82em 1.82em;
  border: 1px solid var(--amber);
  border-radius: 30px;
  font-size: var(--fs-body);
  line-height: 1;
  transition: background-color .3s, color .3s;
}
.btn:hover { background-color: var(--amber); color: var(--wash); }

.link-arrow { display: inline-block; font-size: var(--fs-body); line-height: 1.45; text-align: left; transition: color .3s; }
.link-arrow::after { content: " →"; color: var(--amber); }
.bg-light .link-arrow::after { color: var(--amber-ink); }
.link-arrow:hover { color: var(--amber); }
.bg-light .link-arrow:hover { color: var(--amber-ink); }

.footnote { font-size: var(--fs-body); line-height: 1.45; color: var(--faded-dark); }
.bg-light .footnote { color: var(--faded-light); }

.circle-btn {
  display: flex; align-items: center; justify-content: center;
  width: clamp(52px, 5.16vw, 99px); aspect-ratio: 1;
  border: 1px solid var(--amber); border-radius: 100%;
  font-size: var(--fs-body); line-height: 1;
  color: var(--graphite);
  transition: background-color .3s, color .3s, opacity .3s;
}
.circle-btn--ondark { color: var(--wash); }
.circle-btn:hover { background-color: var(--amber); color: var(--wash); }
.circle-btn:disabled { opacity: .35; cursor: default; }
.circle-btn:disabled:hover { background: none; color: inherit; }

/* ---------- 01 · cabeçalho e menu ---------- */
.site-header { position: absolute; inset: 0 0 auto; z-index: 20; color: var(--graphite); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: clamp(88px, 7.29vw, 140px); padding: 0 clamp(20px, 2.08vw, 40px); }
.wordmark { font-family: var(--serif); font-size: clamp(22px, 1.56vw, 30px); line-height: 1; letter-spacing: -0.005em; white-space: nowrap; }
.wordmark span { color: var(--amber-ink); }
.wordmark--light span { color: var(--amber); }
.site-header__phone { font-size: var(--fs-body); font-weight: 700; }
.site-header__phone .arrow { margin-left: .35em; color: var(--amber-ink); font-weight: 400; }

.toggle-menu {
  position: fixed; top: clamp(20px, 2.08vw, 40px); left: 50%; z-index: 801;
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  width: clamp(96px, 8.33vw, 160px); height: clamp(44px, 3.125vw, 60px);
  border-radius: 30px; background: #fff;
}
.toggle-menu__lines { position: relative; width: 30px; height: 10px; transition: transform .6s var(--ease-out); }
.toggle-menu__lines span { position: absolute; left: 0; width: 30px; height: 2px; background: var(--graphite); transition: transform .6s var(--ease-out), top .3s, bottom .3s; }
.toggle-menu__lines span:nth-child(1) { top: 0; }
.toggle-menu__lines span:nth-child(2) { bottom: 0; }
.toggle-menu:hover:not(.active) .toggle-menu__lines span:nth-child(2) { transform: rotate(-90deg) scale(1.01); }
.toggle-menu.active .toggle-menu__lines { transform: rotate(90deg); }
.toggle-menu.active .toggle-menu__lines span:nth-child(1) { top: 4px; transform: rotate(45deg) scale(1.01); }
.toggle-menu.active .toggle-menu__lines span:nth-child(2) { bottom: 4px; transform: rotate(-45deg) scale(1.01); }

.menu {
  position: fixed; inset: 0 0 auto; z-index: 800;
  height: 0; overflow: hidden;
  background: var(--graphite); color: var(--wash);
  transition: height .6s var(--ease-out);
}
.menu.active { height: 100dvh; overflow-y: auto; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: clamp(88px, 7.29vw, 140px); padding: 0 clamp(20px, 2.08vw, 40px); }
.menu__phone { color: var(--wash); }
.menu__content { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: calc(100dvh - clamp(88px, 7.29vw, 140px)); max-width: calc(1640px + 2 * var(--pad)); margin: 0 auto; padding: 40px var(--pad) clamp(40px, 4.17vw, 80px); }
.menu__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 40px; }
.menu__primary { grid-column: 1 / span 6; }
.menu__primary li { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h1); line-height: .88; text-transform: uppercase; }
.menu__primary li + li { margin-top: .1em; }
.menu__primary a:hover { color: var(--amber); }
.menu__col { grid-column: span 3; }
.menu__col .eyebrow { margin-bottom: 20px; }
.menu__col a:hover, .menu__contact a:hover { color: var(--amber); }
.menu__contact { grid-column: 1 / span 6; }
.menu__social { grid-column: span 3; }
.muted { color: var(--faded-dark); }

.menu .menu__primary li, .menu .menu__col, .menu .menu__cols--bottom { opacity: 0; }
.menu .menu__primary li { transform: translateY(100%); }
.menu.active .menu__primary li { transform: none; opacity: 1; transition: transform .6s var(--ease-out), opacity .6s; }
.menu.active .menu__primary li:nth-child(1) { transition-delay: .1s; }
.menu.active .menu__primary li:nth-child(2) { transition-delay: .2s; }
.menu.active .menu__primary li:nth-child(3) { transition-delay: .3s; }
.menu.active .menu__primary li:nth-child(4) { transition-delay: .4s; }
.menu.active .menu__primary li:nth-child(5) { transition-delay: .5s; }
.menu.active .menu__col, .menu.active .menu__cols--bottom { opacity: 1; transition: opacity .6s cubic-bezier(0.12, 0, 0.39, 0) .6s; }

/* ---------- 02 · hero ---------- */
.hero { position: relative; overflow: hidden; height: 100svh; min-height: 640px; max-height: 1200px; background: var(--wash); color: var(--graphite); }
.hero__inner { display: flex; align-items: center; height: 100%; max-width: calc(1640px + 2 * var(--pad)); margin: 0 auto; padding-inline: var(--pad); }
.hero__content { position: relative; z-index: 2; width: calc((100% - 11 * var(--gut)) / 12 * 6 + 5 * var(--gut)); padding: clamp(100px, 6.25vw, 120px) 0; }
.hero__title { margin-top: 20px; font-family: var(--serif); font-weight: 500; font-size: var(--fs-h1); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; }
.hero__txt { margin-top: 20px; max-width: 37em; }
.hero .btn { margin-top: 30px; }
.hero__img { position: absolute; top: 0; right: 0; bottom: 0; width: 48.93vw; }
.hero__img-inner { position: absolute; inset: 0; overflow: hidden; }
.hero__img img { position: absolute; left: 0; top: -5%; width: 100%; height: 110%; object-fit: cover; }
.hero__graphic { position: absolute; top: 0; left: -2px; width: calc(100% + 4px); height: 100%; fill: var(--wash); }

/* ---------- 03 · o que fazemos ---------- */
.intro { padding: var(--pv) 0; }
.intro__label { grid-column: 3 / span 2; justify-self: end; align-self: start; writing-mode: vertical-rl; transform: rotate(180deg); padding-left: 8px; }
.intro__txt { grid-column: 5 / span 8; font-size: var(--fs-large); line-height: 1.31; }

/* ---------- 04 · segmentos ---------- */
.segments { padding-bottom: var(--pv); }
.segments__item--large { grid-column: 1 / span 7; }
.segments__item--small { grid-column: 9 / span 4; }
.segments__item figure { aspect-ratio: 940 / 639; }
.segments__item--small figure { aspect-ratio: 519 / 353; }
.segments__item img { width: 100%; height: 100%; object-fit: cover; }
.segments__item .link-arrow { margin-top: 30px; }

.reveal-img { position: relative; overflow: hidden; }
.reveal-img::after { content: ""; position: absolute; inset: -1px; z-index: 2; background: var(--graphite); transform: scaleY(0); transform-origin: top; }
.bg-light .reveal-img::after { background: var(--wash); }

/* ---------- 05 · obras ---------- */
.works { padding-bottom: var(--pv); }
.works__title { position: sticky; top: clamp(60px, 6.25vw, 120px); padding-bottom: 60px; }
.works__item { position: sticky; top: 0; height: 100svh; padding: clamp(12px, 2.08vw, 40px); }
.works__item:first-of-type { margin-top: -40px; }
.works__card { position: relative; height: 100%; overflow: hidden; }
.works__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.works__card::before { content: ""; position: absolute; inset: 0 0 auto; height: 40%; z-index: 1; background: linear-gradient(rgba(36, 38, 43, .45), rgba(36, 38, 43, 0)); }
.works__name { position: relative; z-index: 2; padding: clamp(24px, 4.17vw, 80px); font-family: var(--serif); font-weight: 500; font-size: var(--fs-project); line-height: 1.1; text-transform: uppercase; color: var(--wash); }
.works__btn { margin-top: var(--mt-medium); text-align: center; }

/* ---------- 06 · serviços ---------- */
.services { padding: var(--pv) 0; overflow: hidden; }
.services__intro { max-width: calc((min(100vw, 1640px + 2 * var(--pad)) - 2 * var(--pad) - 11 * var(--gut)) / 12 * 6 + 5 * var(--gut)); margin: 0 auto var(--mt-small); text-align: center; }
.services__title { margin-top: 20px; font-family: var(--serif); font-weight: 400; font-size: var(--fs-h5); line-height: 1.16; }
.services__btn { margin-top: var(--mt-medium); text-align: center; }

.carousel { position: relative; --gap: 12.07%; }
.carousel__viewport { width: 91.46%; touch-action: pan-y; }
.carousel__track { display: flex; gap: 0; transition: transform .8s var(--ease-out); will-change: transform; }
.carousel__item { flex: 0 0 43.96%; margin-right: 12.07%; }
.carousel__item figure { aspect-ratio: 659 / 382; }
.carousel__item img { width: 100%; height: 100%; object-fit: cover; }
.carousel__item .link-arrow { margin-top: 30px; }
.carousel__item .footnote { max-width: 32em; }
.carousel__controls { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; gap: 10px; }
.carousel__progress { position: relative; height: 1px; margin-top: var(--mt-medium); overflow: hidden; background: rgba(36, 38, 43, .1); }
.carousel__progress span { position: absolute; inset: 0 auto 0 0; width: calc(100% / 3); background: var(--graphite); transition: transform .8s var(--ease-out); }

/* ---------- 07 · tela cheia ---------- */
.fullscreen { position: relative; height: 100svh; min-height: 420px; overflow: hidden; }
.fullscreen__img { position: absolute; inset: 0; }
.fullscreen__img img { position: absolute; left: 0; top: -5%; width: 100%; height: 110%; object-fit: cover; }
.fullscreen__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(36, 38, 43, 0) 55%, rgba(36, 38, 43, .85)); }

/* ---------- 08 · depoimentos ---------- */
.testimonials { padding: var(--pv) 0; overflow: hidden; }
.tcarousel { position: relative; }
.tcarousel__items { display: grid; width: 91.46%; }
.tcarousel__item { grid-area: 1 / 1; display: grid; grid-template-columns: 43.96% 1fr 43.96%; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease-std), visibility 0s .6s; }
.tcarousel__item.is-active { opacity: 1; visibility: visible; transition: opacity .6s var(--ease-std) .2s, visibility 0s; }
.tcarousel__txt { grid-column: 1; }
.tcarousel__txt blockquote p { font-family: var(--serif); font-size: var(--fs-quote); line-height: 1.24; }
.tcarousel__txt figcaption { margin-top: 40px; color: var(--faded-dark); }
.tcarousel__img { grid-column: 3; aspect-ratio: 659 / 760; overflow: hidden; }
.tcarousel__img img { width: 100%; height: 100%; object-fit: cover; }
.tcarousel__controls { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; gap: 10px; }
.testimonials__title { position: relative; z-index: 0; margin-top: -0.02em; }

/* ---------- 09 · clientes ---------- */
.clients { padding: var(--pv) 0; overflow: hidden; }
.clients__row { display: flex; justify-content: center; }
.clients__row li {
  flex: 0 0 16.667vw; height: clamp(90px, 7.29vw, 140px); padding: 0 20px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--serif); font-size: clamp(18px, 1.46vw, 28px); line-height: 1.1;
  text-transform: uppercase; letter-spacing: .04em; color: var(--wash);
}

/* ---------- 10 · cta ---------- */
.cta { padding: var(--pv) 0; text-align: center; }
.cta__phone { margin-top: 20px; font-family: var(--serif); font-weight: 500; font-size: var(--fs-phone); line-height: 1.08; white-space: nowrap; }
.cta__phone a:hover { color: var(--amber); }
.cta .btn { margin-top: 30px; }

/* ---------- 11 · rodapé ---------- */
.footer { border-top: 1px solid #000; padding: clamp(40px, 3.125vw, 60px) 0; }
.footer__contact { grid-column: 1 / span 6; }
.footer__contact a:hover { color: var(--amber-ink); }
.footer__social--1 { grid-column: 9 / span 2; }
.footer__social--2 { grid-column: 11 / span 2; }
.footer__mid { align-items: start; margin-top: clamp(64px, 6.25vw, 120px); }
.footer__mid .wordmark { grid-column: 1 / span 6; padding-top: 10px; }
.footer__form { grid-column: 7 / span 6; }
.footer__form input {
  display: block; width: 100%; padding: 0 0 15px; border: 0; border-bottom: 1px solid rgba(36, 38, 43, .3);
  background: none; color: var(--graphite); border-radius: 0;
  font-family: var(--serif); font-size: var(--fs-quote); line-height: 1.24;
}
.footer__form input::placeholder { color: #8f8e8b; }
.footer__form input:focus { outline: none; border-bottom-color: var(--graphite); }
.footer__form button { margin-top: 30px; }
.footer__form.is-sent button::after { content: " ✓"; }
.footer__bottom { margin-top: clamp(64px, 6.25vw, 120px); font-size: var(--fs-small); color: var(--faded-light); }
.footer__bottom address { grid-column: 1 / span 6; }
.footer__bottom p { grid-column: 9 / span 4; }

/* ---------- movimento (estado inicial só com JS ativo) ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.w > span { display: inline-block; transition: transform .6s var(--ease-std), opacity .6s var(--ease-std); }
html.motion [data-animate="words"]:not(.is-split) { visibility: hidden; }
html.motion [data-animate="words"] .w > span { transform: translateY(115%); }
html.motion [data-animate="words"].is-in .w > span { transform: none; }
html.motion [data-animate="img"]::after { transform: scaleY(1); }
html.motion [data-animate="img"].is-in::after { transform: scaleY(0); transition: transform .6s var(--ease-img) var(--d, 0s); }
html.motion .tcarousel__item:not(.is-active) .w > span { transform: translateY(115%); }

/* paralaxe ligada ao scroll pelo próprio navegador (Scroll-driven Animations);
   sem suporte, a imagem fica parada — nada quebra */
@supports (animation-timeline: view()) {
  [data-parallax] img { animation: parallax linear both; animation-timeline: view(); }
  [data-scroll-x] { animation: scroll-x linear both; animation-timeline: view(); }
}
@keyframes parallax { from { transform: translateY(-4.5%); } to { transform: translateY(4.5%); } }
@keyframes scroll-x { from { transform: translateX(100px); } to { transform: translateX(-100px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  html.motion [data-animate] .w > span { transform: none !important; }
  html.motion [data-animate="img"]::after { transform: scaleY(0) !important; }
}

/* ---------- responsivo (a captura só existe em 1920; abaixo é decisão nossa) ---------- */
@media (max-width: 1100px) {
  .site-header__phone .arrow { display: none; }
}

@media (max-width: 900px) {
  .grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }

  .site-header__phone { display: none; }
  .toggle-menu { left: auto; right: 20px; transform: none; top: 22px; }

  .menu__cols { grid-template-columns: minmax(0, 1fr); }
  .menu__primary, .menu__col, .menu__contact, .menu__social { grid-column: 1; }
  .menu__primary li { font-size: clamp(40px, 11vw, 64px); }

  .hero { height: auto; max-height: none; min-height: 0; }
  .hero__inner { flex-direction: column; align-items: stretch; padding-inline: 0; }
  .hero__content { width: auto; padding: 120px var(--pad) 48px; }
  .hero__img { position: relative; width: 100%; height: 72vw; min-height: 300px; }

  .intro__label { grid-column: 1; justify-self: start; writing-mode: horizontal-tb; transform: none; padding-left: 0; }
  .intro__txt { grid-column: 1; }

  .segments__item--large, .segments__item--small { grid-column: 1; }

  .works__title { top: 72px; padding-bottom: 32px; }
  .works__item { height: 80svh; }

  .services__intro { max-width: none; }
  .carousel__viewport { width: 100%; }
  .carousel__item { flex-basis: 84%; margin-right: 6%; }
  .carousel__controls { display: none; }

  .tcarousel__items { width: 100%; }
  .tcarousel__item { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .tcarousel__img { grid-column: 1; grid-row: 2; }
  .tcarousel__controls { position: static; flex-direction: row-reverse; justify-content: flex-end; margin-top: 32px; }

  .clients__row { flex-wrap: wrap; animation: none !important; }
  .clients__row li { flex-basis: 50%; }

  .cta__phone { white-space: normal; }

  .footer__contact, .footer__social--1, .footer__social--2, .footer__mid .wordmark, .footer__form, .footer__bottom address, .footer__bottom p { grid-column: 1; }
}