/*!
 * CASULO arquitetura integrada — folha de estilos do site
 * Versão HTML/CSS/JS puro para a raiz da Hostinger (gerada a partir do site
 * Next.js aprovado em 28/09/2026; mesmo visual e mesmo comportamento).
 *
 * Ordem: 1) fontes self-hosted  2) reset base (preflight do Tailwind v4, em
 * @layer — perde para o CSS do projeto)  3) CSS do projeto (src/app/globals.css)
 * 4) movimento (substitui o framer-motion).
 */

/* ============================== 1. Fontes ============================== */
/* Manrope — latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope — latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope Fallback';
  src: local("Arial");
  ascent-override: 103.31%;
  descent-override: 29.07%;
  line-gap-override: 0.00%;
  size-adjust: 103.19%;
}
/* Cormorant Garamond — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond Fallback';
  src: local("Times New Roman");
  ascent-override: 95.27%;
  descent-override: 29.59%;
  line-gap-override: 0.00%;
  size-adjust: 96.98%;
}

body {
  --font-manrope: 'Manrope', 'Manrope Fallback';
  --font-cormorant: 'Cormorant Garamond', 'Cormorant Garamond Fallback';
}

/* ======================== 2. Reset base (Tailwind) ======================== */
@layer theme, base;
@layer theme {
  :root,:host {
    --font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacing:.25rem;
    --default-transition-duration:.15s;
    --default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);
    --default-font-family:var(--font-manrope);
    --default-mono-font-family:var(--font-mono);
  }
}
@layer base {
  *,:after,:before {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0;
  }
  ::backdrop {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0;
  }
  ::file-selector-button {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0;
  }
  html,:host {
    -webkit-text-size-adjust:100%;
    tab-size:4;
    line-height:1.5;
    font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings:var(--default-font-feature-settings,normal);
    font-variation-settings:var(--default-font-variation-settings,normal);
    -webkit-tap-highlight-color:transparent;
  }
  hr {
    height:0;
    color:inherit;
    border-top-width:1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration:underline dotted;
    text-decoration:underline dotted;
  }
  h1,h2,h3,h4,h5,h6 {
    font-size:inherit;
    font-weight:inherit;
  }
  a {
    color:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    text-decoration:inherit;
  }
  b,strong {
    font-weight:bolder;
  }
  code,kbd,samp,pre {
    font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings:var(--default-mono-font-feature-settings,normal);
    font-variation-settings:var(--default-mono-font-variation-settings,normal);
    font-size:1em;
  }
  small {
    font-size:80%;
  }
  sub,sup {
    vertical-align:baseline;
    font-size:75%;
    line-height:0;
    position:relative;
  }
  sub {
    bottom:-.25em;
  }
  sup {
    top:-.5em;
  }
  table {
    text-indent:0;
    border-color:inherit;
    border-collapse:collapse;
  }
  :-moz-focusring {
    outline:auto;
  }
  progress {
    vertical-align:baseline;
  }
  summary {
    display:list-item;
  }
  ol,ul,menu {
    list-style:none;
  }
  img,svg,video,canvas,audio,iframe,embed,object {
    vertical-align:middle;
    display:block;
  }
  img,video {
    max-width:100%;
    height:auto;
  }
  button,input,select,optgroup,textarea {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0;
  }
  ::file-selector-button {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0;
  }
  :where(select:is([multiple],[size])) optgroup {
    font-weight:bolder;
  }
  :where(select:is([multiple],[size])) optgroup option {
    padding-inline-start:20px;
  }
  ::file-selector-button {
    margin-inline-end:4px;
  }
  ::placeholder {
    opacity:1;
  }
  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
      color:currentColor;
    }
    @supports (color:color-mix(in lab, red, red)) {
      ::placeholder {
        color:color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize:vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance:none;
  }
  ::-webkit-date-and-time-value {
    min-height:1lh;
    text-align:inherit;
  }
  ::-webkit-datetime-edit {
    display:inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding:0;
  }
  ::-webkit-datetime-edit {
    padding-block:0;
  }
  ::-webkit-datetime-edit-year-field {
    padding-block:0;
  }
  ::-webkit-datetime-edit-month-field {
    padding-block:0;
  }
  ::-webkit-datetime-edit-day-field {
    padding-block:0;
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block:0;
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block:0;
  }
  ::-webkit-datetime-edit-second-field {
    padding-block:0;
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block:0;
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block:0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height:1;
  }
  :-moz-ui-invalid {
    box-shadow:none;
  }
  button,input:where([type=button],[type=reset],[type=submit]) {
    -webkit-appearance:button;
    appearance:button;
  }
  ::file-selector-button {
    -webkit-appearance:button;
    appearance:button;
  }
  ::-webkit-inner-spin-button {
    height:auto;
  }
  ::-webkit-outer-spin-button {
    height:auto;
  }
  [hidden]:where(:not([hidden=until-found])) {
    display:none!important;
  }
}

/* ========================= 3. CSS do projeto ========================= */
:root { --graphite: #171717; --charcoal: #2b2b2a; --soft-white: #fafaf8; --stone: #76736f; --mist: #e9e7e3; --line: rgba(23, 23, 23, 0.14); }

* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--soft-white); color: var(--graphite); font-family: var(--font-manrope), Arial, sans-serif; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button, a { -webkit-tap-highlight-color: transparent; } .site-shell { min-height: 100dvh; overflow: hidden; } .site-header { align-items: center; display: flex; justify-content: space-between; margin: 0 auto; max-width: 1440px; padding: 28px clamp(20px, 5vw, 76px); position: relative; z-index: 2; } .brand { align-items: center; display: inline-flex; gap: 12px; } .brand-mark { align-items: center; border: 1px solid currentColor; display: inline-flex; height: 28px; justify-content: center; transform: rotate(45deg); width: 28px; } .brand-mark span { border: 1px solid currentColor; display: block; height: 14px; width: 14px; } .brand-lockup { display: grid; gap: 1px; } .brand-lockup strong { font-size: 15px; font-weight: 700; letter-spacing: .18em; line-height: 1; } .brand-lockup small { color: var(--stone); font-size: 8px; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; } .main-nav { align-items: center; display: flex; gap: clamp(18px, 3vw, 46px); } .main-nav > a { color: var(--stone); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; transition: color .25s ease; } .main-nav > a:hover { color: var(--graphite); } .nav-cta { border-bottom: 1px solid currentColor; color: var(--graphite) !important; padding-bottom: 5px; } .nav-cta span { font-size: 15px; margin-left: 8px; } .menu-toggle { background: transparent; border: 0; color: var(--graphite); display: none; font: inherit; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .hero { display: grid; gap: clamp(30px, 6vw, 100px); grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); margin: 0 auto; max-width: 1440px; min-height: min(760px, calc(100dvh - 100px)); padding: clamp(42px, 8vw, 118px) clamp(20px, 5vw, 76px) clamp(78px, 9vw, 128px); } .hero-copy { align-self: center; max-width: 480px; padding-bottom: 7vh; } .eyebrow, .section-label { color: var(--stone); font-size: 10px; letter-spacing: .18em; margin: 0 0 22px; text-transform: uppercase; } h1, h2, p { margin-top: 0; } h1 { font-size: clamp(3.1rem, 6.4vw, 6.75rem); font-weight: 600; letter-spacing: -.075em; line-height: .92; margin-bottom: 28px; max-width: 680px; } .hero-lede { color: var(--stone); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; margin-bottom: 36px; max-width: 420px; } .button { align-items: center; display: inline-flex; font-size: 11px; gap: 28px; justify-content: space-between; letter-spacing: .08em; padding: 17px 19px; text-transform: uppercase; transition: transform .25s ease, background .25s ease; } .button:hover { transform: translateY(-2px); } .button-dark { background: var(--graphite); color: var(--soft-white); } .button-dark:hover { background: var(--charcoal); } .hero-media { align-self: center; margin-right: clamp(-76px, -5vw, -20px); position: relative; } .hero-media img { aspect-ratio: 1.25 / 1; display: block; height: auto; object-fit: cover; width: 100%; } .media-note { bottom: -30px; color: var(--stone); font-size: 9px; letter-spacing: .08em; position: absolute; right: 0; text-transform: uppercase; } .intro-section { border-top: 1px solid var(--line); display: grid; gap: 30px; grid-template-columns: 1fr 2fr; margin: 0 auto; max-width: 1290px; padding: clamp(70px, 11vw, 168px) clamp(20px, 5vw, 76px); } .intro-section h2 { font-size: clamp(2rem, 4vw, 4rem); font-weight: 500; letter-spacing: -.06em; line-height: 1; margin-bottom: 28px; max-width: 700px; } .intro-section p { color: var(--stone); font-size: 16px; line-height: 1.7; max-width: 550px; } @media (max-width: 720px) { .site-header { padding-top: 22px; } .menu-toggle { display: block; } .main-nav { background: var(--soft-white); border-bottom: 1px solid var(--line); display: none; flex-direction: column; left: 0; padding: 28px 20px; position: absolute; right: 0; top: 76px; } .main-nav.is-open { display: flex; } .hero { display: flex; flex-direction: column; padding-top: 54px; } .hero-copy { padding-bottom: 0; } h1 { font-size: clamp(3.4rem, 16vw, 5.2rem); } .hero-media { margin-right: 0; } .hero-media img { aspect-ratio: 1 / 1.15; } .intro-section { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
.reveal-up { animation: reveal-up .8s cubic-bezier(.16, 1, .3, 1) both; }
.reveal-image { animation: reveal-image 1s cubic-bezier(.16, 1, .3, 1) .12s both; }
@keyframes reveal-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal-image { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
.dark-section { background: var(--graphite); color: var(--soft-white); }
.section-label-light { color: rgba(250, 250, 248, .58); }
.method-section { display: grid; gap: 40px 8vw; grid-template-columns: minmax(160px, 1fr) minmax(300px, 1.7fr); margin: 0 auto; max-width: 1440px; padding: clamp(78px, 11vw, 170px) clamp(20px, 5vw, 76px); }
.method-content h2, .section-intro h2, .section-heading h2, .process-copy h2, .contact-copy h2 { font-size: clamp(2.6rem, 5vw, 5.6rem); font-weight: 500; letter-spacing: -.075em; line-height: .96; margin: 0 0 26px; max-width: 760px; }
.method-content > p { color: rgba(250, 250, 248, .68); font-size: 16px; line-height: 1.7; margin-bottom: 38px; max-width: 500px; }
.button-light { border: 1px solid rgba(250, 250, 248, .5); color: var(--soft-white); }
.button-light:hover { background: var(--soft-white); color: var(--graphite); }
.method-list { border-top: 1px solid rgba(250, 250, 248, .24); grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); }
.method-list article { border-right: 1px solid rgba(250, 250, 248, .24); padding: 26px 24px 0 0; }
.method-list article + article { padding-left: 24px; }
.method-list article:last-child { border-right: 0; }
.method-list strong { font-size: 15px; font-weight: 500; }
.method-list p { color: rgba(250, 250, 248, .56); font-size: 13px; line-height: 1.6; margin: 12px 0 0; }
.services-section { display: grid; gap: 50px; grid-template-columns: 1fr 2fr; margin: 0 auto; max-width: 1290px; padding: clamp(84px, 12vw, 180px) clamp(20px, 5vw, 76px); }
.section-intro h2 { font-size: clamp(2rem, 3.4vw, 3.8rem); }
.service-grid { border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.3fr 1fr 1fr; }
.service-grid article { border-right: 1px solid var(--line); min-height: 330px; padding: 28px 28px 28px 0; }
.service-grid article + article { padding-left: 28px; }
.service-grid article:last-child { border-right: 0; }
.service-feature { background: var(--mist); padding-right: 30px !important; }
.service-index { color: var(--stone); display: block; font-size: 10px; letter-spacing: .16em; margin-bottom: 72px; }
.service-grid h3 { font-size: 25px; font-weight: 500; letter-spacing: -.04em; margin: 0 0 16px; }
.service-grid p { color: var(--stone); font-size: 14px; line-height: 1.65; margin-bottom: 26px; max-width: 240px; }
.service-grid a { border-bottom: 1px solid currentColor; font-size: 10px; letter-spacing: .12em; padding-bottom: 4px; text-transform: uppercase; }
.service-grid a span { font-size: 14px; margin-left: 10px; }
.projects-section { background: #f2f1ee; padding: clamp(84px, 12vw, 170px) clamp(20px, 5vw, 76px); }
.section-heading { align-items: end; display: grid; gap: 50px; grid-template-columns: 1.2fr .8fr; margin: 0 auto 70px; max-width: 1290px; }
.section-heading p { color: var(--stone); font-size: 14px; line-height: 1.7; margin: 0 0 8px; max-width: 330px; }
.project-grid { display: grid; gap: clamp(18px, 3vw, 42px); grid-template-columns: 1.25fr .75fr; margin: 0 auto; max-width: 1290px; }
.project-card { margin: 0; }
.project-card img { display: block; filter: saturate(.72); height: 100%; object-fit: cover; transition: filter .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1); width: 100%; }
.project-card:hover img { filter: saturate(1); transform: scale(1.025); }
.project-card-large { grid-row: span 2; }
.project-card-large img { aspect-ratio: 1 / 1.2; }
.project-card-tall img { aspect-ratio: 1.12 / 1; }
.project-card-wide { display: grid; gap: 18px; grid-template-columns: 1fr 180px; margin-top: auto; }
.project-card-wide img { aspect-ratio: 1.4 / 1; }
.project-card div { padding-top: 16px; }
.project-card h3 { font-size: 17px; font-weight: 500; margin: 0 0 6px; }
.project-card p { color: var(--stone); font-size: 10px; letter-spacing: .1em; margin: 0; text-transform: uppercase; }
.process-section { display: grid; gap: 8vw; grid-template-columns: 1fr 1.3fr; margin: 0 auto; max-width: 1290px; padding: clamp(84px, 12vw, 180px) clamp(20px, 5vw, 76px); }
.process-quote { align-self: start; border-top: 1px solid var(--line); padding-top: 22px; }
.process-quote p { font-family: var(--font-cormorant), Georgia, serif; font-size: clamp(2rem, 3.5vw, 4rem); line-height: .98; margin-bottom: 28px; max-width: 430px; }
.process-quote span { color: var(--stone); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.process-copy > h2 { font-size: clamp(2.3rem, 4vw, 4.3rem); }
.process-steps { border-top: 1px solid var(--line); margin-top: 46px; }
.process-steps > div { border-bottom: 1px solid var(--line); display: grid; gap: 30px; grid-template-columns: 1fr 1.5fr; padding: 19px 0; }
.process-steps strong { font-size: 14px; font-weight: 500; }
.process-steps p { color: var(--stone); font-size: 13px; line-height: 1.5; margin: 0; }
.contact-section { background: var(--mist); display: grid; gap: 10vw; grid-template-columns: 1fr 1fr; padding: clamp(84px, 12vw, 170px) max(20px, calc((100vw - 1290px) / 2)); }
.contact-copy h2 { font-size: clamp(2.8rem, 5vw, 5.5rem); }
.contact-copy > p { color: var(--stone); font-size: 15px; line-height: 1.7; max-width: 420px; }
.contact-form { align-self: end; display: grid; gap: 20px; }
.contact-form label { color: var(--stone); display: grid; font-size: 10px; gap: 9px; letter-spacing: .1em; text-transform: uppercase; }
.contact-form input, .contact-form select { -webkit-appearance: none; appearance: none; background: transparent; border: 0; border-bottom: 1px solid rgba(23, 23, 23, .28); border-radius: 0; color: var(--graphite); font: inherit; font-size: 14px; letter-spacing: 0; outline: 0; padding: 12px 0; text-transform: none; transition: border-color .2s ease; }
.contact-form input::placeholder { color: rgba(118, 115, 111, .7); }
.contact-form input:focus, .contact-form select:focus { border-color: var(--graphite); }
.contact-form .button { border: 0; cursor: pointer; justify-self: start; margin-top: 16px; }
.form-success { color: var(--stone); font-size: 12px; line-height: 1.5; margin: 0; }
.site-footer { align-items: end; background: var(--graphite); color: var(--soft-white); display: grid; gap: 28px; grid-template-columns: 1fr 1fr auto; padding: 58px clamp(20px, 5vw, 76px); }
.site-footer .brand-lockup small { color: rgba(250, 250, 248, .5); }
.site-footer p { color: rgba(250, 250, 248, .58); font-size: 12px; line-height: 1.6; margin: 0; max-width: 310px; }
.footer-note { color: rgba(250, 250, 248, .5); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 900px) { .services-section, .process-section, .contact-section { grid-template-columns: 1fr; } .method-section { grid-template-columns: 1fr; } .method-list { grid-column: 1; } .section-heading { grid-template-columns: 1fr; gap: 20px; } .site-footer { grid-template-columns: 1fr 1fr; } .footer-note { grid-column: 2; grid-row: 1; justify-self: end; } }
@media (max-width: 620px) { .method-list, .service-grid, .project-grid { display: flex; flex-direction: column; } .method-list article, .method-list article + article { border-bottom: 1px solid rgba(250, 250, 248, .24); border-right: 0; padding: 24px 0; } .method-list article:last-child { border-bottom: 0; } .service-grid article, .service-grid article + article { border-bottom: 1px solid var(--line); border-right: 0; min-height: 0; padding: 28px 0 !important; } .service-grid article:last-child { border-bottom: 0; } .service-index { margin-bottom: 36px; } .project-card-large img, .project-card-tall img, .project-card-wide img { aspect-ratio: 1.12 / 1; } .project-card-wide { display: block; margin-top: 0; } .process-steps > div { gap: 8px; grid-template-columns: 1fr; } .site-footer { align-items: start; display: flex; flex-direction: column; } .footer-note { margin-left: 0; } }

.button-featured { border: 0; isolation: isolate; min-height: 56px; min-width: 220px; overflow: hidden; position: relative; }
.brand-logo { display: block; height: 54px; object-fit: contain; width: 150px; }
.site-footer .brand-logo { filter: invert(1); }
.button-featured .cta-label, .button-featured .cta-arrow { position: relative; z-index: 1; }
.button-featured .cta-arrow { display: inline-block; font-size: 18px; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.button-featured:hover .cta-arrow { transform: translate(4px, -4px); }
.cta-sheen { background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .24) 45%, transparent 70%); inset: 0; position: absolute; transform: translateX(-120%); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.button-featured:hover .cta-sheen { transform: translateX(120%); }
.button-light.button-featured { background: transparent; border: 1px solid rgba(250, 250, 248, .5); }
.button-light.button-featured:hover { background: var(--soft-white); color: var(--graphite); }
.spotlight-card { isolation: isolate; overflow: hidden; position: relative; }
.spotlight-card::before { background: radial-gradient(260px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgba(255, 255, 255, .24), transparent 58%); content: ''; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity .35s ease; z-index: 2; }
.spotlight-card:hover::before { opacity: 1; }
.spotlight-card > div { height: 100%; }
.project-card > div { padding-top: 0; }
.project-card > div > div { padding-top: 16px; }
.service-grid article, .process-steps > div { transition: background .35s ease, transform .35s ease; }
.service-grid article:hover { background: rgba(233, 231, 227, .44); }
.service-feature:hover { background: #dfddd8 !important; }
.process-steps > div:hover { transform: translateX(6px); }
.main-nav > a, .service-grid a { transition: color .25s ease, transform .25s ease; }
.main-nav > a:hover, .service-grid a:hover { transform: translateX(3px); }
@media (max-width: 720px) { .button-featured { width: 100%; } .hero-copy .button-featured { width: auto; } .brand-logo { height: 48px; width: 132px; } }
@media (prefers-reduced-motion: reduce) { .spotlight-card::before, .cta-sheen { display: none; } .service-grid article:hover, .process-steps > div:hover, .main-nav > a:hover, .service-grid a:hover { transform: none; } }

.parallax-frame { height: 100%; overflow: hidden; position: relative; width: 100%; }
.parallax-image { display: block; height: calc(100% + 72px); margin-top: -36px; object-fit: cover; width: 100%; will-change: transform; }
.hero-media .parallax-frame { aspect-ratio: 1.25 / 1; }
.project-card .parallax-frame { height: 100%; }
.project-card-large .parallax-frame { aspect-ratio: 1 / 1.2; }
.project-card-tall .parallax-frame { aspect-ratio: 1.12 / 1; }
.project-card-wide .parallax-frame { aspect-ratio: 1.4 / 1; }
.project-card .parallax-image { filter: saturate(.72); transition: filter .5s ease; }
.project-card:hover .parallax-image { filter: saturate(1); }
@media (max-width: 720px) { .hero-media .parallax-frame { aspect-ratio: 1 / 1.15; } }
@media (max-width: 620px) { .project-card-large .parallax-frame, .project-card-tall .parallax-frame, .project-card-wide .parallax-frame { aspect-ratio: 1.12 / 1; } }
.site-shell { padding-top: 82px; }
.site-header { left: 0; max-width: none; position: fixed; right: 0; top: 0; width: 100%; }
/* fundo+blur no ::before para NÃO criar bloco de contenção (senão prende o menu fixed) */
.site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(250, 250, 248, .92); border-bottom: 1px solid rgba(23, 23, 23, .1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.site-header .brand, .site-header .main-nav, .site-header .menu-toggle { position: relative; z-index: 1; }
.button, .menu-toggle, .main-nav a, .service-grid a, .brand { cursor: pointer; }
.button:active, .menu-toggle:active { transform: translateY(1px) scale(.99); }
.button:focus-visible, .menu-toggle:focus-visible, .main-nav a:focus-visible, .service-grid a:focus-visible, .brand:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
@media (max-width: 720px) { .site-shell { padding-top: 76px; } .site-header { padding-bottom: 22px; padding-top: 22px; } .main-nav { top: 76px; } }
@media (prefers-reduced-transparency: reduce) { .site-header { background: var(--soft-white); } }

/* Manual de marca CASULO, v1.3 */
:root { --brand-line: rgba(23, 23, 23, .16); }
body { font-family: var(--font-manrope), Arial, sans-serif; }
.site-shell { padding-top: 138px; }
.site-header { align-items: center; height: 138px; padding: 0 clamp(20px, 5vw, 76px); }
.brand { gap: 0; }
.brand-logo { height: 138px; object-fit: contain; width: 120px; }
.site-footer { align-items: center; }
.site-footer .brand-logo { filter: invert(1); }
h1 { font-size: clamp(3rem, 5vw, 4rem); letter-spacing: -.06em; line-height: .98; }
.method-content h2, .section-intro h2, .section-heading h2, .process-copy h2, .contact-copy h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.06em; line-height: 1.02; }
.intro-section h2 { font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.04; }
.service-grid h3 { font-size: 18px; letter-spacing: -.02em; }
.method-list { grid-template-columns: repeat(4, 1fr); }
.method-list article { border-right: 1px solid var(--brand-line); padding-top: 20px; }
.method-list article + article { padding-left: 20px; }
.method-index { color: var(--stone); display: block; font-size: 10px; letter-spacing: .16em; margin-bottom: 22px; }
.method-list strong { display: block; font-size: 14px; font-weight: 500; }
.projects-section { background: var(--soft-white); }
.project-card { border-top: 1px solid var(--brand-line); padding-top: 18px; }
.project-card h3 { font-size: 16px; }
.section-label, .eyebrow, .service-index, .footer-note { letter-spacing: .14em; }
.button-featured { border-radius: 0; }
.contact-section { background: var(--mist); }
@media (max-width: 900px) {
  .method-list { grid-template-columns: repeat(2, 1fr); }
  .method-list article:nth-child(2) { border-right: 0; }
  .method-list article:nth-child(n + 3) { border-top: 1px solid var(--brand-line); padding-top: 20px; }
}
@media (max-width: 720px) {
  .site-shell { padding-top: 108px; }
  .site-header { height: 108px; }
  .brand-logo { height: 108px; width: 94px; }
  .main-nav { top: 108px; }
}
@media (max-width: 620px) {
  .method-list { display: flex; }
  .method-list article:nth-child(n + 3) { border-top: 0; padding-top: 24px; }
}

/* ===== Refino front-end + animação (boas práticas BuildV) ===== */
:root { --container: 1290px; --header-h: 88px; }

/* Alinhamento consistente: header e todas as seções no mesmo eixo (largura do container) */
.site-header { z-index: 40; height: var(--header-h); padding-left: max(clamp(20px, 5vw, 76px), calc((100vw - var(--container)) / 2)); padding-right: max(clamp(20px, 5vw, 76px), calc((100vw - var(--container)) / 2)); }
.site-shell { padding-top: var(--header-h); }
.method-section { max-width: var(--container); }

/* Logo em tamanho normal e sem caixa (fundo do SVG removido) */
.brand-logo { height: 52px; width: auto; }
/* Footer: usa logo-white.svg (já recolorido: traço claro, corpo funde no fundo escuro) */
.site-footer .brand-logo { height: 60px; width: auto; filter: none; }

/* Card destaque de serviço tem fundo, então precisa de padding em TODOS os lados
   (o padrão do grid deixava a esquerda em 0 e o texto encostava na caixa mist) */
.service-feature { padding: clamp(28px, 3vw, 34px) !important; }

/* Palavra-chave com sublinhado que desenha */
.draw-underline { position: relative; display: inline-block; white-space: nowrap; }
.draw-underline-ink { position: absolute; left: 0; right: 0; bottom: .04em; display: block; height: 4px; transform-origin: left; transform: scaleX(0); background: var(--graphite); }

/* Timeline "O processo" — linha que desenha + marcadores */
.process-steps { position: relative; margin-top: 44px; border-top: 0; padding-left: 30px; }
.process-line { position: absolute; left: 4px; top: 10px; bottom: 10px; width: 2px; transform-origin: top; background: var(--graphite); }
.process-step { position: relative; }
.process-dot { position: absolute; left: -30px; top: 24px; height: 9px; width: 9px; border-radius: 50%; background: var(--soft-white); border: 2px solid var(--graphite); }

@media (max-width: 720px) {
  :root { --header-h: 68px; }
  .brand-logo { height: 42px; }

  /* Menu mobile fullscreen: ver bloco no fim do arquivo */
}
@media (prefers-reduced-motion: reduce) {
  .draw-underline-ink { transform: scaleX(1); }
  .process-line { transform: scaleY(1); }
  .compare-filete { transform: scaleX(1); }
}

/* ===== Seções novas (reestruturação por mindmap) ===== */

/* Comparativa — dois cards, mercado negativado */
.compare-section { margin: 0 auto; max-width: var(--container); padding: clamp(84px, 12vw, 170px) clamp(20px, 5vw, 76px); }
.compare-section .section-intro { margin-bottom: clamp(40px, 5vw, 64px); }
.compare-grid { align-items: center; display: grid; gap: clamp(16px, 3vw, 40px); grid-template-columns: 1fr 1fr; }
.compare-card { padding: clamp(28px, 4vw, 48px); }
.compare-tag { color: var(--stone); display: block; font-size: 10px; letter-spacing: .14em; margin-bottom: 26px; text-transform: uppercase; }
.compare-card ul { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.compare-card li { font-size: 15px; line-height: 1.5; padding-left: 30px; position: relative; }
.compare-card li::before { left: 0; position: absolute; top: 0; }
.compare-card-market { background: #edece9; border: 1px dashed rgba(23, 23, 23, .26); opacity: .9; padding-bottom: clamp(22px, 3vw, 36px); padding-top: clamp(22px, 3vw, 36px); }
.compare-card-market li { color: var(--stone); font-size: 14px; -webkit-text-decoration: line-through rgba(118, 115, 111, .5); text-decoration: line-through; text-decoration-color: rgba(118, 115, 111, .5); }
.compare-card-market li::before { color: rgba(118, 115, 111, .85); content: '\2715'; font-size: 13px; }
.compare-card-brand { background: var(--graphite); box-shadow: 0 34px 64px -42px rgba(23, 23, 23, .6); color: var(--soft-white); overflow: hidden; position: relative; }
.compare-card-brand .compare-tag { color: rgba(250, 250, 248, .6); }
.compare-card-brand li { color: rgba(250, 250, 248, .92); }
.compare-card-brand li::before { color: var(--soft-white); content: '\2713'; font-weight: 600; }
.compare-filete { background: var(--soft-white); height: 3px; left: 0; position: absolute; right: 0; top: 0; transform: scaleX(0); transform-origin: left; }
@media (max-width: 780px) { .compare-grid { grid-template-columns: 1fr; } .compare-card-market { order: -1; } }

/* Sobre — sócios sem foto + atuação */
.about-section { align-items: center; display: grid; gap: clamp(40px, 10vw, 120px); grid-template-columns: 1.1fr .9fr; margin: 0 auto; max-width: var(--container); padding: clamp(84px, 12vw, 170px) clamp(20px, 5vw, 76px); }
.about-copy h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.06em; line-height: 1.02; margin: 0 0 26px; }
.about-copy p { color: var(--stone); font-size: 16px; line-height: 1.7; margin: 0 0 18px; max-width: 480px; }
.about-region { border-left: 2px solid var(--graphite); color: var(--graphite); font-size: 14px; padding-left: 16px; }
.partner-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.partner-card { border: 1px solid var(--line); padding: 28px 24px; }
.partner-mark { align-items: center; border: 1px solid var(--graphite); display: inline-flex; font-size: 18px; font-weight: 600; height: 46px; justify-content: center; margin-bottom: clamp(30px, 6vw, 48px); width: 46px; }
.partner-card strong { display: block; font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.partner-card p { color: var(--stone); font-size: 13px; margin: 6px 0 0; }
@media (max-width: 900px) { .about-section { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 520px) { .partner-grid { grid-template-columns: 1fr; } }

/* FAQ — accordion nativo */
.faq-section { display: grid; gap: clamp(30px, 5vw, 70px); grid-template-columns: .8fr 1.2fr; margin: 0 auto; max-width: var(--container); padding: clamp(84px, 12vw, 170px) clamp(20px, 5vw, 76px); }
.faq-head { align-self: start; position: sticky; top: calc(var(--header-h) + 24px); }
.faq-head h2 { font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -.05em; line-height: 1.04; margin: 0; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { align-items: center; cursor: pointer; display: flex; font-size: 17px; font-weight: 500; gap: 20px; justify-content: space-between; letter-spacing: -.01em; list-style: none; padding: 24px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { color: var(--stone); content: '+'; flex: none; font-size: 22px; line-height: 1; }
.faq-item[open] summary::after { content: '\00d7'; }
.faq-item p { color: var(--stone); font-size: 15px; line-height: 1.7; margin: 0 0 24px; max-width: 560px; }
@media (max-width: 900px) { .faq-section { grid-template-columns: 1fr; } .faq-head { position: static; } }

/* Menos quebras de linha órfãs em títulos e parágrafos */
h1, h2, h3 { text-wrap: balance; }
.hero-lede, .service-grid p, .about-copy p, .method-content > p, .faq-item p, .contact-copy > p, .compare-card li { text-wrap: pretty; }

/* Telas médias: seções "intro + conteúdo" 2-col empilham para não espremer */
@media (max-width: 1150px) {
  .method-section { grid-template-columns: 1fr; }
  .method-list { grid-column: 1; }
  .about-section { grid-template-columns: 1fr; gap: clamp(36px, 5vw, 56px); }
  .process-section { grid-template-columns: 1fr; gap: clamp(30px, 4vw, 50px); }
}

/* ===== Serviços: cards com imagem UNIFORMES (intro em cima, sem divisórias) ===== */
.services-section { display: block; }
.services-section .section-intro { margin: 0 0 clamp(34px, 4vw, 58px); max-width: 760px; }
.service-grid { border-top: 0; display: grid; gap: clamp(22px, 2.4vw, 36px); grid-template-columns: repeat(3, 1fr); }
.service-grid article, .service-grid article + article { border: 0; min-height: 0; padding: 0; }
.service-grid article { display: flex; flex-direction: column; }
.service-feature { background: transparent; padding: 0 !important; }
.service-media { aspect-ratio: 4 / 3; margin-bottom: 20px; overflow: hidden; }
.service-media img { display: block; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16, 1, .3, 1); width: 100%; }
.service-grid .service-index { margin-bottom: 12px; }
.service-grid h3 { margin-bottom: 12px; }
.service-grid p { margin-bottom: 20px; max-width: none; }
.service-grid a { align-self: flex-start; margin-top: auto; }
.service-grid article:hover .service-media img { transform: scale(1.045); }
@media (max-width: 760px) { .service-grid { grid-template-columns: 1fr; gap: 30px; } .service-media { aspect-ratio: 16 / 10; } }

/* ===== Processo: citação sobreposta na imagem (um bloco só, não solto) ===== */
.process-quote { position: relative; display: flex; overflow: hidden; align-self: stretch; min-height: clamp(360px, 40vw, 520px); border-top: 0; padding-top: 0; }
.process-quote-img { position: absolute; inset: 0; display: block; height: 100%; width: 100%; object-fit: cover; }
.process-quote::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 23, 23, .12) 0%, rgba(23, 23, 23, .35) 46%, rgba(23, 23, 23, .8) 100%); }
.process-quote-inner { position: relative; z-index: 1; margin-top: auto; padding: clamp(26px, 3vw, 40px); }
.process-quote-inner p { color: var(--soft-white); font-family: var(--font-cormorant), Georgia, serif; font-size: clamp(1.7rem, 2.6vw, 2.8rem); line-height: 1.04; margin: 0 0 14px; max-width: 460px; }
.process-quote-inner span { color: rgba(250, 250, 248, .72); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 1150px) { .process-quote { min-height: 300px; } }

/* ===== Sobre: imagem ao lado da copy ===== */
.about-side { align-content: start; display: grid; }
.about-media { aspect-ratio: 4 / 3; overflow: hidden; }
.about-media img { display: block; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16, 1, .3, 1); width: 100%; }
.about-section:hover .about-media img { transform: scale(1.04); }
@media (max-width: 1150px) { .about-media { aspect-ratio: auto; height: clamp(260px, 40vw, 420px); } }

/* ===== Diferenciais: imagem como coluna cheia à esquerda ===== */
.method-media { grid-column: 1; grid-row: 1 / 3; align-self: stretch; overflow: hidden; min-height: 340px; }
.method-media img { display: block; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16, 1, .3, 1); width: 100%; }
.method-section:hover .method-media img { transform: scale(1.04); }
@media (max-width: 1150px) { .method-media { grid-column: 1; grid-row: auto; aspect-ratio: 16 / 9; min-height: 0; } }

/* ===== LARGURA PADRÃO ÚNICA: todas as seções no mesmo container =====
   Seções full-bleed (fundo de ponta a ponta) com o CONTEÚDO centralizado no
   mesmo container. Usa 100% (largura do documento, sem a barra de rolagem) em
   vez de 100vw, então não gera overflow. */
:root { --content-max: 1200px; --gutter: clamp(20px, 5vw, 76px); }

.hero,
.services-section,
.method-section,
.compare-section,
.process-section,
.projects-section,
.about-section,
.faq-section,
.contact-section,
.site-footer {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: max(var(--gutter), calc((100% - var(--content-max)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--content-max)) / 2));
}

/* Containers internos já não precisam limitar largura (a seção já centraliza) */
.section-heading, .project-grid, .service-grid, .process-steps { max-width: none; }

/* Header: barra full-width, conteúdo no mesmo container das seções */
.site-header { padding-left: 0; padding-right: 0; }
.header-inner {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: var(--header-h);
  justify-content: space-between;
  margin: 0 auto;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  padding: 0 var(--gutter);
  width: 100%;
}
.site-header .brand, .site-header .main-nav, .site-header .menu-toggle { z-index: 1; }
@media (max-width: 720px) { .header-inner { position: static; } }

/* ===== Menu mobile FULLSCREEN ===== */
@media (max-width: 720px) {
  /* logo e botão de fechar acima do overlay */
  .site-header .brand, .site-header .menu-toggle { z-index: 2; }
  .site-header .main-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(4px, 2vh, 20px);
    margin: 0;
    border: 0;
    box-shadow: none;
    background: var(--soft-white);
    padding: var(--header-h) clamp(24px, 8vw, 48px) 44px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .site-header .main-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  .site-header .main-nav > a {
    color: var(--graphite);
    font-size: clamp(30px, 9vw, 42px);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.12;
    padding: 6px 0;
    text-transform: none;
  }
  .site-header .main-nav .nav-cta { border-bottom: 0; padding-bottom: 0; }
  .site-header .main-nav .nav-cta span { font-size: .6em; margin-left: 10px; }
}

/* ===== Ritmo vertical único (estava sobrando ~240px entre seções) ===== */
:root { --section-y: clamp(48px, 6vw, 88px); }
.services-section,
.method-section,
.compare-section,
.process-section,
.projects-section,
.about-section,
.faq-section,
.contact-section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
/* margens internas grandes que somavam ao respiro */
.section-heading { margin-bottom: clamp(32px, 4vw, 48px); }
.compare-section .section-intro, .services-section .section-intro { margin-bottom: clamp(28px, 3.5vw, 44px); }

/* CTAs adicionais por seção (todos abrem o WhatsApp) */
.section-cta { display: flex; justify-content: center; margin-top: clamp(38px, 5vw, 58px); }
.about-cta { margin-top: clamp(26px, 3vw, 34px); }
.faq-cta { margin-top: clamp(22px, 2.5vw, 30px); }

/* Número no rodapé */
.footer-text p { margin: 0 0 12px; }
.footer-phone { border-bottom: 1px solid rgba(250, 250, 248, .4); color: var(--soft-white); display: inline-block; font-size: 13px; letter-spacing: .01em; padding-bottom: 3px; transition: opacity .25s ease; }
.footer-phone:hover { opacity: .65; }

/* Fechamento: botão do WhatsApp + número visível */
.contact-action { align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.contact-phone { border-bottom: 1px solid currentColor; font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; letter-spacing: -.01em; padding-bottom: 4px; transition: opacity .25s ease; }
.contact-phone:hover { opacity: .65; }

/* ===== Ajustes Revisão 02 (BuildV) ===== */

/* Logo horizontal no cabeçalho e rodapé */
.brand-logo { height: 38px; width: auto; }
.site-footer .brand-logo { height: 46px; width: auto; filter: invert(1); }
@media (max-width: 720px) { .brand-logo { height: 32px; } }

/* Hero: micro-copy de posicionamento + duplo CTA */
.hero-micro { color: var(--stone); font-size: 13px; letter-spacing: .01em; line-height: 1.6; margin: -18px 0 28px; max-width: 430px; }
.hero-ctas { align-items: center; display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 30px); }
.hero-cta-secondary { color: var(--stone); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; transition: color .25s ease, transform .25s ease; }
.hero-cta-secondary:hover { color: var(--graphite); transform: translateY(2px); }
.hero-cta-secondary span { font-size: 14px; margin-left: 7px; }

/* Texto de apoio sob os títulos de seção (Hub, Comparativo) */
.section-support { color: var(--stone); font-size: 15px; line-height: 1.7; margin: 18px 0 0; max-width: 620px; }
.dark-section .section-support { color: rgba(250, 250, 248, .68); }

/* CTA empilhado com linha de apoio (Comparativo) */
.section-cta-stack { flex-direction: column; gap: 12px; }
.section-cta-note { color: var(--stone); font-size: 12px; letter-spacing: .02em; }

/* Sobre: números de autoridade + assinatura dos sócios */
.about-stats { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); margin: 26px 0 28px; padding-top: 24px; }
.about-stat { display: grid; gap: 4px; }
.about-stat strong { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.about-stat span { color: var(--stone); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.about-signature { margin-bottom: 26px; }
.about-signature strong { display: block; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.about-signature span { color: var(--stone); font-size: 12px; letter-spacing: .04em; }

/* Nona dobra: formulário de diagnóstico pré-footer */
.diag-section { background: var(--mist); display: grid; gap: clamp(36px, 6vw, 90px); grid-template-columns: 1fr 1fr; align-items: start; padding: var(--section-y) max(var(--gutter), calc((100% - var(--content-max)) / 2)); }
.diag-copy h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.06em; line-height: 1.02; margin: 0 0 22px; }
.diag-copy > p { color: var(--stone); font-size: 15px; line-height: 1.7; margin: 0 0 18px; max-width: 460px; }
.diag-direct { font-size: 14px; }
.diag-direct a { border-bottom: 1px solid currentColor; color: var(--graphite); padding-bottom: 1px; }
.diag-form { align-self: stretch; }
.diag-form select { cursor: pointer; }
/* Envio por e-mail (Ajustes 05/10): armadilha anti-spam, botão enviando e retorno */
.diag-honey { display: none !important; }
.diag-form .button[disabled] { cursor: progress; opacity: .7; transform: none; }
.diag-status { border-left: 2px solid var(--graphite); color: var(--graphite); font-size: 14px; letter-spacing: 0; line-height: 1.6; margin: 4px 0 0; max-width: 460px; padding: 4px 0 4px 14px; text-transform: none; }
.diag-status[hidden] { display: none; }
.diag-status.is-error { border-left-color: #a3402c; }
.diag-status a { border-bottom: 1px solid currentColor; font-weight: 600; }
@media (max-width: 900px) { .diag-section { grid-template-columns: 1fr; } }

/* Décima dobra: rodapé institucional completo */
.site-footer { align-items: start; column-gap: clamp(32px, 4vw, 56px); grid-template-columns: 1.7fr 1fr 1.3fr; row-gap: clamp(30px, 4vw, 44px); }
.footer-brand { grid-column: 1; }
.footer-brand .brand { margin-bottom: 18px; }
.footer-nav { display: grid; gap: 10px; grid-column: 2; }
.footer-contact { display: grid; gap: 10px; grid-column: 3; }
.footer-nav-title { color: rgba(250, 250, 248, .5); font-size: 9px; letter-spacing: .14em; margin-bottom: 4px; text-transform: uppercase; }
.footer-nav a, .footer-contact a { color: rgba(250, 250, 248, .82); font-size: 13px; transition: color .25s ease; width: fit-content; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--soft-white); }
.footer-region { color: rgba(250, 250, 248, .5); font-size: 11px; letter-spacing: .04em; margin-top: 6px; }
.footer-copy { border-top: 1px solid rgba(250, 250, 248, .16); color: rgba(250, 250, 248, .5); font-size: 11px; grid-column: 1 / -1; letter-spacing: .04em; padding-top: 24px; }
/* Nota legal em microtipografia após o copyright (baixa hierarquia).
   Cor adaptada ao footer escuro (--graphite): o #76736F do manual pressupõe barra clara. */
.footer-legal { color: rgba(250, 250, 248, .5); font-size: 9px; font-weight: 400; letter-spacing: .04em; }
@media (max-width: 900px) {
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-nav { grid-column: 1; }
  .footer-contact { grid-column: 2; }
}
@media (max-width: 560px) {
  .site-footer { grid-template-columns: 1fr; }
  .footer-nav, .footer-contact { grid-column: 1; }
}

/* Fotos reais (Hero e sócios) — hero em paisagem (Ajustes 28/09), ajusta enquadramento dos frames */
.hero-media .parallax-frame { aspect-ratio: 4 / 3; }
.about-media { aspect-ratio: 4 / 5; }
.about-media img { object-position: center; }
@media (max-width: 1150px) { .about-media { aspect-ratio: 4 / 5; height: auto; } }

/* Sócios: dois retratos lado a lado (Ajustes 28/09) */
.about-duo { gap: clamp(8px, 1vw, 12px); grid-template-columns: 1fr 1fr; }
.about-duo .about-media { aspect-ratio: 1 / 2; height: auto; }
.about-duo .about-media:last-child img { object-position: 80% 50%; }
@media (max-width: 900px) { .about-duo .about-media { aspect-ratio: 3 / 5; } }

/* ===== Portfólio: manifesto (título forte + 2 colunas) + galeria em grade ===== */
.projects-manifesto { margin: 0 0 clamp(40px, 5vw, 68px); max-width: 1000px; }
.projects-manifesto h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; letter-spacing: -.06em; line-height: 1.02; margin: 10px 0 clamp(26px, 3vw, 38px); } /* mesmo tamanho dos demais títulos de seção (Ajustes 05/10) */
.projects-support { display: grid; gap: clamp(20px, 3vw, 44px); grid-template-columns: 1fr 1fr; max-width: 780px; }
.projects-support p { color: var(--stone); font-size: 15px; line-height: 1.7; margin: 0; }
.projects-support p + p { border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 44px); }
@media (max-width: 640px) { .projects-support { grid-template-columns: 1fr; gap: 18px; } .projects-support p + p { border-left: 0; padding-left: 0; } }

/* Galeria uniforme: 3 colunas, cartões clicáveis que abrem o lightbox */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 34px); }
.project-card { -webkit-appearance: none; appearance: none; background: transparent; border: 0; color: inherit; cursor: pointer; display: flex; flex-direction: column; font: inherit; margin: 0; padding: 0; text-align: left; }
.project-cover { aspect-ratio: 4 / 5; display: block; overflow: hidden; position: relative; }
.project-cover img { display: block; filter: saturate(.85); height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16, 1, .3, 1), filter .5s ease; width: 100%; }
.project-card:hover .project-cover img, .project-card:focus-visible .project-cover img { filter: saturate(1); transform: scale(1.045); }
.project-count { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); background: rgba(23, 23, 23, .72); bottom: 12px; color: var(--soft-white); font-size: 10px; letter-spacing: .1em; padding: 6px 10px; position: absolute; right: 12px; text-transform: uppercase; }
.project-meta { display: block; padding-top: 14px; }
.project-name { display: block; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.project-loc { color: var(--stone); display: block; font-size: 10px; letter-spacing: .12em; margin-top: 4px; text-transform: uppercase; }
.project-card:focus-visible { outline: 2px solid var(--graphite); outline-offset: 4px; }
@media (max-width: 860px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .project-grid { grid-template-columns: 1fr; } .project-cover { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .project-card:hover .project-cover img, .project-card:focus-visible .project-cover img { transform: none; } }

/* ===== Lightbox da galeria ===== */
.lightbox { background: rgba(15, 15, 14, .94); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: flex; flex-direction: column; inset: 0; padding: clamp(16px, 4vw, 48px); position: fixed; z-index: 100; }
.lightbox-close { align-items: center; background: transparent; border: 0; color: rgba(250, 250, 248, .8); cursor: pointer; display: inline-flex; font-size: 34px; height: 46px; justify-content: center; line-height: 1; margin: 12px; position: absolute; right: calc(env(safe-area-inset-right, 0px) + 4px); top: calc(env(safe-area-inset-top, 0px) + 4px); transition: color .2s ease; width: 46px; z-index: 2; }
.lightbox-close:hover { color: var(--soft-white); }
.lightbox-stage { align-items: center; display: flex; flex: 1; justify-content: center; min-height: 0; position: relative; }
.lightbox-img { box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8); max-height: 100%; max-width: 100%; object-fit: contain; }
.lightbox-nav { align-items: center; background: rgba(250, 250, 248, .1); border: 1px solid rgba(250, 250, 248, .24); color: var(--soft-white); cursor: pointer; display: inline-flex; font-size: 28px; height: 54px; justify-content: center; line-height: 1; position: absolute; top: 50%; transform: translateY(-50%); transition: background .2s ease; width: 54px; }
.lightbox-nav:hover { background: rgba(250, 250, 248, .22); }
.lightbox-prev { left: 0; }
.lightbox-next { right: 0; }
.lightbox-bar { align-items: center; color: rgba(250, 250, 248, .72); display: flex; gap: 16px; justify-content: space-between; padding-top: 16px; }
.lightbox-caption { font-size: 12px; letter-spacing: .04em; }
.lightbox-counter { font-size: 11px; flex: none; letter-spacing: .12em; }
.lightbox button:focus-visible { outline: 2px solid var(--soft-white); outline-offset: 3px; }
@media (max-width: 640px) { .lightbox-nav { font-size: 24px; height: 44px; width: 44px; } }

/* ===== Diferenciais: 5 cards lado a lado, em colunas iguais (Ajustes 28/09 e 05/10) =====
   minmax(0, 1fr) impede que uma palavra longa alargue a própria coluna; a
   divisória é clara porque a seção é escura (a --brand-line some no grafite). */
.method-list.method-list-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.method-list.method-list-5 article { border-right: 1px solid rgba(250, 250, 248, .14); border-top: 0; margin-top: 0; min-width: 0; padding: 20px 16px 0; }
.method-list.method-list-5 article:first-child { padding-left: 0; }
.method-list.method-list-5 article:last-child { border-right: 0; padding-right: 0; }
.method-list-5 strong, .method-list-5 p { overflow-wrap: break-word; }
/* Desktop: foto um pouco mais estreita e respiro menor, para as 5 colunas caberem ao lado dela */
@media (min-width: 1151px) {
  .method-section { column-gap: clamp(40px, 4vw, 72px); grid-template-columns: minmax(200px, .75fr) minmax(0, 2fr); }
}
/* Tablet: 3 + 2 */
@media (max-width: 860px) {
  .method-list.method-list-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .method-list.method-list-5 article:nth-child(3) { border-right: 0; padding-right: 0; }
  .method-list.method-list-5 article:nth-child(4) { padding-left: 0; }
  .method-list.method-list-5 article:nth-child(n + 4) { border-top: 1px solid rgba(250, 250, 248, .14); margin-top: 28px; }
}
/* Celular: um embaixo do outro */
@media (max-width: 620px) {
  .method-list.method-list-5 { display: flex; flex-direction: column; }
  .method-list.method-list-5 article:nth-child(n) { border-bottom: 1px solid rgba(250, 250, 248, .14); border-right: 0; border-top: 0; margin-top: 0; padding: 24px 0; }
  .method-list.method-list-5 article:last-child { border-bottom: 0; }
}

/* ============================ 4. Movimento ============================ */
/* Substitui o framer-motion da versão em React.
   - Os estados iniciais só valem com JS ativo (classe .js no <html>): sem JS,
     todo o conteúdo aparece normalmente.
   - O script.js anima com a Web Animations API e grava o estado final inline,
     como o framer-motion fazia. Por isso os transforms de :hover do CSS não
     atuam nesses blocos (ex.: .process-step), exatamente como no original.
   Marcadores no HTML:
     data-anim="fade"   header — aparece no carregamento (0,7s)
     data-anim="reveal" bloco sobe 24px e aparece ao entrar na tela (0,65s)
     data-anim="item"   filho de [data-stagger]: sobe 18px, em sequência de 80ms (0,55s)
     data-anim="line"   linha do processo: desenha de cima para baixo (1,2s)
     data-anim="draw"   sublinhado da palavra-chave (0,75s, atraso de 0,4s)
     data-anim="filete" filete do card CASULO no comparativo (0,8s)
     data-stagger=".2"  container que dispara a sequência quando 20% dele aparece
     data-parallax="36" moldura do hero: a foto desloca ±36px com a rolagem */
.js [data-anim="fade"] { opacity: 0; }
.js [data-anim="reveal"] { opacity: 0; transform: translateY(24px); }
.js [data-anim="item"] { opacity: 0; transform: translateY(18px); }
.js [data-anim="line"] { transform: scaleY(0); }
/* draw e filete já nascem com scaleX(0) pelo CSS do projeto */

/* CTA principal: sobe 3px no hover (mouse) e "aperta" ao clicar — aproxima o
   spring do framer (stiffness 420, damping 26). No toque não há elevação. */
.button-featured { transition: transform .4s cubic-bezier(.3, 1.4, .55, 1), background .25s ease; }
.button-featured:hover { transform: none; }
.button-featured:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .button-featured:hover { transform: translateY(-3px); }
  .button-featured:hover:active { transform: translateY(-3px) scale(.98); }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-anim="fade"], .js [data-anim="reveal"] { opacity: 1; transform: none; }
  .js [data-anim="item"] { transform: none; }
  .js [data-anim="line"] { transform: scaleY(1); }
}