/* ============================================================
   AGÊNCIA REFERÊNCIA — GLOBAL
   Tokens + tipografia + componentes base. Carregado em todas as páginas.
   Ordem: 1) fonte  2) tokens  3) reset leve  4) tipografia  5) componentes
   ============================================================ */

/* ---------- 1. FONTE — Manrope, hospedada localmente ---------- */
@font-face{font-family:"Manrope";font-weight:200 800;font-style:normal;font-display:swap;src:url("../fonts/Manrope-Variable.woff2") format("woff2-variations"),url("../fonts/Manrope-Variable.woff2") format("woff2")}

/* ---------- 2. TOKENS ---------- */
:root{
/* Brand palette — the only chromatic family allowed. No blue, purple, pink. */
--ref-orange:#E27427;
--ref-green:#99B42A;
--ref-beige:#FAF8ED;
--ref-dark-gray:#303030;
--ref-black:#000000;
--ref-white:#FFFFFF;

/* Tints derived from the six brand values — for hover, rules and hairlines only.
   Never introduce a new hue: these are the same colours at other alphas/lightnesses. */
--ref-orange-deep:#C05F19;
--ref-orange-soft:#F2C09A;
--ref-green-deep:#7F9820;
--ref-green-soft:#D2DE9C;
--ref-beige-deep:#EFEBD8;
--ref-gray-500:#6E6E6E;
--ref-gray-300:#B3B3B3;

/* Semantic surfaces */
--surface-canvas:var(--ref-beige);
--surface-raised:var(--ref-white);
--surface-inverse:var(--ref-black);
--surface-inverse-soft:var(--ref-dark-gray);
--surface-accent:var(--ref-green);
--surface-accent-warm:var(--ref-orange);

/* Semantic text */
--text-primary:var(--ref-black);
--text-secondary:var(--ref-dark-gray);
--text-muted:var(--ref-gray-500);
--text-on-inverse:var(--ref-beige);
--text-on-inverse-muted:var(--ref-gray-300);
--text-accent:var(--ref-orange);
--text-accent-alt:var(--ref-green);

/* Lines — the editorial workhorse. Hairlines carry the grid, not shadows. */
--line-strong:var(--ref-black);
--line-hairline:rgba(48,48,48,.18);
--line-hairline-inverse:rgba(250,248,237,.22);

/* Interactive */
--action-fill:var(--ref-black);
--action-fill-hover:var(--ref-dark-gray);
--action-text:var(--ref-beige);
--action-accent-fill:var(--ref-green);
--action-accent-fill-hover:var(--ref-green-deep);
--action-warm-fill:var(--ref-orange);
--action-warm-fill-hover:var(--ref-orange-deep);
--focus-ring:var(--ref-orange);
}

:root{
--font-sans:"Manrope","Helvetica Neue",Arial,sans-serif;
--font-display:var(--font-sans);

--fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; /* Fluid display scale. Tight leading, negative tracking — type IS the graphic. */
--type-hero:clamp(3.25rem,8.2vw,7.5rem);        /* 52 → 120 */
--type-display:clamp(2.75rem,6vw,5.625rem);     /* 44 → 90  */
--type-h2:clamp(2.25rem,4.4vw,4rem);            /* 36 → 64  */
--type-h3:clamp(1.75rem,2.6vw,2.5rem);          /* 28 → 40  */
--type-h4:clamp(1.375rem,1.8vw,1.75rem);        /* 22 → 28  */
--type-lead:clamp(1.125rem,1.4vw,1.5rem);       /* 18 → 24  */
--type-body:clamp(1rem,1vw,1.125rem);           /* 16 → 18  */
--type-body-sm:0.9375rem;                       /* 15 */
--type-label:0.8125rem;                         /* 13 */
--type-label-sm:0.6875rem;                      /* 11 */
--type-counter:clamp(4rem,11vw,10rem);          /* big numerals: 15 ANOS, 01/ */

--lh-hero:0.90; --lh-display:0.94; --lh-tight:1.05; --lh-snug:1.2; --lh-body:1.55; --lh-loose:1.7; --ls-hero:-0.04em; --ls-display:-0.03em; --ls-heading:-0.02em; --ls-body:-0.005em; --ls-label:0.16em; /* all-caps labels and section markers */
--ls-label-wide:0.24em; }

:root{
/* 8px base, editorial extremes at the top of the scale */
--space-0:0;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
--space-6:32px;--space-7:40px;--space-8:56px;--space-9:72px;--space-10:96px;
--space-11:128px;--space-12:160px;--space-13:200px;

/* Section rhythm: generous, asymmetric-friendly */
--section-y:clamp(72px,10vw,160px); --section-y-tight:clamp(48px,6vw,96px); /* Grid */
--container-max:1400px; --container-pad:clamp(20px,4.5vw,72px); --grid-cols:12; --gutter:clamp(16px,2vw,32px); }

:root{
/* Squared by default — radius is the exception, never the theme. */
--radius-0:0px;
--radius-sm:2px;
--radius-md:6px;
--radius-lg:16px;
--radius-pill:999px;

--border-hair-width:1px; --border-rule-width:1px; --border-heavy-width:2px; /* Elevation is almost never physical here: contrast comes from colour + rules.
   One shadow exists, reserved for overlays (menu, dropdown). */
--shadow-none:none;
--shadow-overlay:0 1px 3px rgba(0,0,0,.15),0 18px 48px rgba(0,0,0,.12);
}

:root{
--ease-out:cubic-bezier(.22,.61,.36,1); --ease-in-out:cubic-bezier(.65,.05,.36,1); --ease-editorial:cubic-bezier(.16,1,.3,1); /* long, calm reveal — the house curve */

--dur-fast:160ms; --dur-base:280ms; --dur-slow:640ms; --dur-reveal:900ms; --marquee-dur:38s; --hover-scale:1.03; /* maximum image scale on hover — never more */
}
@media (prefers-reduced-motion:reduce){
:root{
--dur-fast:1ms; --dur-base:1ms; --dur-slow:1ms; --dur-reveal:1ms; --marquee-dur:0s; --hover-scale:1; }
}


/* ---------- 3. RESET LEVE (sobre o Hello Elementor) ---------- */
body{background:var(--surface-canvas);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--type-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-weight:var(--fw-regular);-webkit-font-smoothing:antialiased;overflow-x:hidden;text-wrap:pretty}
h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);font-weight:var(--fw-medium);letter-spacing:var(--ls-heading);line-height:var(--lh-tight);text-wrap:balance;margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--text-primary);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-accent)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
::selection{background:var(--ref-green);color:var(--ref-black)}
.ref-skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--ref-black);color:var(--ref-beige);padding:12px 18px}
.ref-skip:focus{left:12px}

/* ---------- 4. TIPOGRAFIA — classes para aplicar nos widgets ---------- */
.ref-hero-title{font-size:var(--type-hero);line-height:var(--lh-hero);letter-spacing:var(--ls-hero);font-weight:var(--fw-medium);max-width:17ch}
.ref-display{font-size:var(--type-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-medium)}
.ref-h2{font-size:var(--type-h2);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-medium)}
.ref-h3{font-size:var(--type-h3);line-height:var(--lh-tight);letter-spacing:var(--ls-heading);font-weight:var(--fw-medium)}
.ref-lead{font-size:var(--type-lead);font-weight:var(--fw-light);line-height:1.35;letter-spacing:var(--ls-heading)}
.ref-body{font-size:var(--type-body);line-height:var(--lh-body);color:var(--text-secondary)}
.ref-label{font-size:var(--type-label);text-transform:uppercase;letter-spacing:var(--ls-label);font-weight:var(--fw-medium);color:var(--text-secondary)}
.ref-label--accent{color:var(--ref-orange)}
.ref-label--green{color:var(--ref-green)}
.ref-label--inverse{color:var(--text-on-inverse-muted)}
.ref-counter{font-size:var(--type-counter);font-weight:var(--fw-bold);line-height:.85;letter-spacing:-.05em}
.ref-word{color:var(--ref-green);font-weight:var(--fw-bold)}          /* a palavra REFERÊNCIA */
.ref-word--orange{color:var(--ref-orange);font-weight:var(--fw-bold)}
.ref-measure{max-width:46ch}
.ref-measure-sm{max-width:34ch}

/* ---------- 5. COMPONENTES ---------- */

/* Seções: tons de fundo aplicados no container do Elementor */
.ref-section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.ref-section--tight{padding-top:var(--section-y-tight);padding-bottom:var(--section-y-tight)}
.ref-tone-beige{background:var(--ref-beige);color:var(--text-primary)}
.ref-tone-black{background:var(--ref-black);color:var(--text-on-inverse)}
.ref-tone-dark{background:var(--ref-dark-gray);color:var(--text-on-inverse)}
.ref-tone-green{background:var(--ref-green);color:var(--ref-black)}
.ref-tone-black h1,.ref-tone-black h2,.ref-tone-black h3,.ref-tone-dark h1,.ref-tone-dark h2,.ref-tone-dark h3{color:var(--text-on-inverse)}
.ref-tone-black .ref-body,.ref-tone-dark .ref-body{color:var(--text-on-inverse-muted)}

/* Marcador de seção: 01 / SERVIÇOS + hairline */
.ref-marker{border-top:1px solid var(--line-strong);padding-top:var(--space-4);font-size:var(--type-label);text-transform:uppercase;letter-spacing:var(--ls-label);font-weight:var(--fw-medium);color:var(--ref-orange)}
.ref-tone-black .ref-marker,.ref-tone-dark .ref-marker{border-top-color:var(--line-hairline-inverse);color:var(--text-on-inverse-muted)}

/* Divisores */
.ref-rule{height:1px;background:var(--line-hairline);border:0;margin:0}
.ref-rule--strong{height:2px;background:var(--line-strong)}
.ref-tone-black .ref-rule,.ref-tone-dark .ref-rule{background:var(--line-hairline-inverse)}

/* Botões — aplicar a classe no widget Botão do Elementor */
.ref-btn .elementor-button,a.ref-btn,button.ref-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:var(--type-body-sm);letter-spacing:-.005em;padding:15px 28px;border:1px solid transparent;border-radius:var(--radius-pill);background:var(--action-fill);color:var(--action-text);cursor:pointer;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);white-space:nowrap;box-shadow:none}
.ref-btn .elementor-button:hover,a.ref-btn:hover,button.ref-btn:hover{background:var(--action-fill-hover);color:var(--action-text)}
.ref-btn--lg .elementor-button,a.ref-btn--lg{font-size:var(--type-body);padding:20px 38px}
.ref-btn--sm .elementor-button,a.ref-btn--sm{font-size:var(--type-label);padding:10px 20px}
.ref-btn--accent .elementor-button,a.ref-btn--accent{background:var(--action-accent-fill);color:var(--ref-black)}
.ref-btn--accent .elementor-button:hover,a.ref-btn--accent:hover{background:var(--action-accent-fill-hover);color:var(--ref-black)}
.ref-btn--warm .elementor-button,a.ref-btn--warm{background:var(--action-warm-fill);color:var(--ref-white)}
.ref-btn--warm .elementor-button:hover,a.ref-btn--warm:hover{background:var(--action-warm-fill-hover)}
.ref-btn--ghost .elementor-button,a.ref-btn--ghost{background:transparent;color:var(--text-primary);border-color:var(--line-strong)}
.ref-btn--ghost .elementor-button:hover,a.ref-btn--ghost:hover{background:var(--ref-black);color:var(--ref-beige);border-color:var(--ref-black)}
.ref-btn--ghost-inverse .elementor-button,a.ref-btn--ghost-inverse{background:transparent;color:var(--text-on-inverse);border-color:var(--line-hairline-inverse)}
.ref-btn--ghost-inverse .elementor-button:hover,a.ref-btn--ghost-inverse:hover{background:var(--ref-beige);color:var(--ref-black);border-color:var(--ref-beige)}
.ref-btn--link .elementor-button,a.ref-btn--link{background:transparent;color:var(--text-primary);border-radius:0;padding:4px 0;border:0;border-bottom:1px solid var(--line-strong)}
.ref-btn--link .elementor-button:hover,a.ref-btn--link:hover{color:var(--text-accent);border-bottom-color:var(--ref-orange);background:transparent}

/* Serviços — lista editorial (usar o widget Sanfona/Accordion com esta classe no wrapper) */
.ref-service .elementor-accordion-item,.ref-service .e-n-accordion-item{border:0;border-top:1px solid var(--line-hairline);background:transparent}
.ref-service .elementor-tab-title,.ref-service summary{padding:clamp(20px,2.6vw,34px) 0;background:transparent;border:0;font-size:var(--type-h3);font-weight:var(--fw-medium);letter-spacing:var(--ls-heading);line-height:var(--lh-tight);transition:transform var(--dur-base) var(--ease-editorial)}
.ref-service .elementor-tab-title:hover,.ref-service summary:hover{transform:translateX(8px);color:var(--text-primary)}
.ref-service .elementor-tab-title .elementor-accordion-icon,.ref-service summary::marker{color:var(--text-secondary)}
.ref-service .elementor-tab-content{border:0;padding:0 0 clamp(24px,3vw,48px);font-size:var(--type-body);line-height:var(--lh-body);color:var(--text-secondary)}
.ref-service-num{font-size:var(--type-label);letter-spacing:var(--ls-label);color:var(--text-muted);margin-right:clamp(16px,3vw,48px);transition:color var(--dur-base) var(--ease-out)}
.ref-service .elementor-tab-title:hover .ref-service-num,.ref-service .elementor-active .ref-service-num{color:var(--ref-orange)}

/* Projetos */
.ref-project{display:block}
.ref-project__media{overflow:hidden}
.ref-project__media img{width:100%;transition:transform var(--dur-slow) var(--ease-editorial)}
.ref-project:hover .ref-project__media img{transform:scale(var(--hover-scale))}
.ref-project__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);border-top:1px solid var(--line-hairline);margin-top:var(--space-4);padding-top:var(--space-4)}
.ref-project__cat{font-size:var(--type-label-sm);text-transform:uppercase;letter-spacing:var(--ls-label-wide);color:var(--text-muted);transition:color var(--dur-base) var(--ease-out)}
.ref-project:hover .ref-project__cat{color:var(--ref-orange)}
.ref-project__title{font-size:var(--type-h4);font-weight:var(--fw-medium);letter-spacing:var(--ls-heading);margin-top:6px}
.ref-project__arrow{font-size:var(--type-h4);transition:transform var(--dur-base) var(--ease-out)}
.ref-project:hover .ref-project__arrow{transform:translate(4px,-4px)}

/* Processo — timeline vertical */
.ref-process{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,48px)}
.ref-process__rail{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.ref-process__num{font-size:var(--type-label);letter-spacing:var(--ls-label);color:var(--ref-orange)}
.ref-process__line{flex:1;width:1px;background:var(--line-hairline);min-height:48px}
.ref-process__body{padding-bottom:clamp(32px,4vw,72px)}
.ref-process:last-child .ref-process__body{padding-bottom:0}

/* Depoimentos — a única superfície elevada do sistema */
.ref-testimonial{background:var(--ref-white);border:1px solid var(--line-hairline);padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-7);min-height:320px;border-radius:0;box-shadow:none}
.ref-testimonial blockquote{margin:0;font-size:var(--type-h4);font-weight:var(--fw-light);line-height:1.35;letter-spacing:var(--ls-heading)}
.ref-testimonial__note{font-size:var(--type-label-sm);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ref-orange);margin-top:var(--space-4)}

/* FAQ — widget Sanfona com esta classe */
.ref-faq .elementor-accordion-item,.ref-faq .e-n-accordion-item{border:0;border-top:1px solid var(--line-hairline);background:transparent}
.ref-faq .elementor-tab-title,.ref-faq summary{padding:clamp(18px,2.2vw,28px) 0;background:transparent;border:0;font-size:var(--type-h4);font-weight:var(--fw-medium);letter-spacing:var(--ls-heading);line-height:var(--lh-snug)}
.ref-faq .elementor-tab-content{border:0;padding:0 0 clamp(18px,2.4vw,32px);font-size:var(--type-body);line-height:var(--lh-body);color:var(--text-secondary);max-width:68ch}

/* Formulário — inputs grandes de borda inferior (Elementor Form ou CF7) */
.ref-form label,.ref-form .elementor-field-label{font-size:var(--type-label);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--text-secondary);font-weight:var(--fw-medium);margin-bottom:var(--space-3)}
.ref-form input[type=text],.ref-form input[type=email],.ref-form input[type=tel],.ref-form input[type=url],.ref-form textarea,.ref-form .elementor-field-textual{border:0;border-bottom:1px solid var(--line-hairline);background:transparent;border-radius:0;padding:12px 0;font-family:var(--font-sans);font-size:var(--type-lead);font-weight:var(--fw-light);letter-spacing:var(--ls-heading);box-shadow:none;transition:border-color var(--dur-base) var(--ease-out);width:100%}
.ref-form input:focus,.ref-form textarea:focus,.ref-form .elementor-field-textual:focus{border-bottom-color:var(--ref-orange);outline:none;box-shadow:none}
.ref-form ::placeholder{color:var(--text-muted);opacity:1}
.ref-form .elementor-field-group{margin-bottom:clamp(24px,3vw,40px)}
.ref-form .required-mark,.ref-form .elementor-mark-required .elementor-field-label:after{color:var(--ref-orange)}

/* Clientes / logos — cada logo é uma imagem separada e substituível */
.ref-logo-tile{display:grid;place-items:center;min-width:180px;height:96px;padding:var(--space-5) var(--space-6);opacity:.72;transition:opacity var(--dur-base) var(--ease-out)}
.ref-logo-tile:hover{opacity:1}
.ref-logo-tile img{max-height:44px;width:auto;object-fit:contain}

/* Instagram */
.ref-instagram__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(12px,1.4vw,20px)}
.ref-instagram__tile{position:relative;display:block;overflow:hidden;aspect-ratio:1/1}
.ref-instagram__tile img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-editorial)}
.ref-instagram__tile:hover img{transform:scale(var(--hover-scale))}
.ref-instagram__tile::after{content:"↗";position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);color:var(--ref-beige);font-size:var(--type-h4);opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.ref-instagram__tile:hover::after{opacity:1}
.ref-instagram__fallback{border:1px solid var(--line-hairline);padding:clamp(32px,5vw,72px);text-align:center;color:var(--text-muted);font-size:var(--type-label);text-transform:uppercase;letter-spacing:var(--ls-label)}

/* Header — integrado ao hero, sólido no scroll */
.ref-header{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.ref-header.is-scrolled{background:rgba(250,248,237,.92);backdrop-filter:blur(10px);border-bottom-color:var(--line-hairline)}
.ref-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-5) 0}
.ref-nav{display:flex;gap:clamp(16px,2vw,32px)}
.ref-nav a{font-size:var(--type-body-sm);font-weight:var(--fw-medium)}
.ref-burger{display:none;background:none;border:0;padding:10px 0;font-size:var(--type-label);text-transform:uppercase;letter-spacing:var(--ls-label);cursor:pointer;font-family:var(--font-sans)}
.ref-menu{position:fixed;inset:0;background:var(--ref-black);color:var(--text-on-inverse);z-index:60;display:none;flex-direction:column;justify-content:center;padding:var(--container-pad);box-shadow:var(--shadow-overlay)}
.ref-menu.is-open{display:flex}
.ref-menu a{color:var(--text-on-inverse);font-size:clamp(32px,9vw,64px);font-weight:var(--fw-medium);letter-spacing:var(--ls-display);line-height:1.05}
.ref-menu a:hover{color:var(--ref-green)}
.ref-menu__close{position:absolute;top:28px;right:var(--container-pad);background:none;border:0;color:inherit;font-size:var(--type-label);text-transform:uppercase;letter-spacing:var(--ls-label);cursor:pointer;font-family:var(--font-sans)}

/* Footer */
.ref-footer{background:var(--ref-black);color:var(--text-on-inverse);padding-top:var(--section-y);padding-bottom:var(--space-7)}
.ref-footer a{color:var(--text-on-inverse-muted);font-size:var(--type-body-sm)}
.ref-footer a:hover{color:var(--ref-green)}
.ref-footer__title{font-size:var(--type-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-bold);text-transform:uppercase;color:var(--text-on-inverse)}

/* Utilitários de grid — para quando o container do Elementor não basta */
.ref-grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.4vw,40px) clamp(20px,2vw,32px)}
.ref-col-4{grid-column:span 4}.ref-col-5{grid-column:span 5}.ref-col-6{grid-column:span 6}.ref-col-7{grid-column:span 7}.ref-col-8{grid-column:span 8}.ref-col-12{grid-column:span 12}
.ref-sticky{position:sticky;top:clamp(90px,12vh,140px)}