/* ================================================================
   ATUAL ACRÍLICOS — Folha de estilos principal
   ================================================================ */

:root{
  --navy:#08064f;
  --navy-2:#0f0b72;
  --orange:#fa6909;
  --orange-soft:#ff8a3c;
  --ink:#0a0b17;
  --paper:#f4f3ef;
  --white:#fff;
  --muted:#6d7184;
  --line:#dcdde5;
  --radius:28px;
  --shadow:0 28px 80px rgba(8,6,79,.14);
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:110px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{color:inherit}
img{display:block;max-width:100%}
svg{display:block;max-width:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Bug fix: SVGs de "chip" (logo, ícones do WhatsApp) usam fill próprio - não force stroke */
svg[data-solid]{stroke:none;fill:currentColor}

.container{width:min(1240px,calc(100% - 48px));margin-inline:auto}
.section{padding:132px 0;position:relative}
.section-title{font-family:Sora,sans-serif;font-size:clamp(44px,5vw,76px);line-height:.98;letter-spacing:-.065em;margin:16px 0 0;max-width:900px}
.kicker{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.kicker>span{width:30px;height:2px;background:currentColor;flex:0 0 auto}
.kicker.light{color:#ff9a58}
.heading-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:80px;align-items:end;margin-bottom:62px}
.heading-row>p{margin:0;color:var(--muted);font-size:17px;line-height:1.75;max-width:480px}
.dark-heading{color:#fff}
.dark-heading>p{color:rgba(255,255,255,.62)}

.button{height:54px;padding:0 22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:13px;font-weight:800;font-size:14px;border:1px solid transparent;transition:.35s var(--ease);will-change:transform;cursor:pointer}
.button svg{width:19px;height:19px;transition:transform .35s var(--ease)}
.button:hover svg{transform:translate(3px,-3px)}
.button-orange{background:var(--orange);color:#fff;box-shadow:0 15px 36px rgba(250,105,9,.22)}
.button-orange:hover{background:#ff7b23;box-shadow:0 18px 44px rgba(250,105,9,.35)}
.button-navy{background:var(--navy);color:#fff}
.button-navy:hover{background:var(--navy-2)}
.reveal-card{will-change:transform,opacity}

/* ===== Header ===== */
.site-header{position:fixed;z-index:80;top:14px;left:0;width:100%;transition:transform .45s var(--ease)}
.site-header.is-hidden{transform:translateY(-120%)}
.nav-shell{width:min(1240px,calc(100% - 48px));height:72px;margin:auto;padding:0 12px 0 18px;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.68);border-radius:22px;display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:26px;box-shadow:0 18px 55px rgba(8,6,79,.14)}
.brand{width:138px;height:52px;display:flex;align-items:center;overflow:hidden}
.brand img{width:138px;height:auto;max-height:48px;object-fit:contain}
.desktop-nav{display:flex;align-items:center;justify-content:center;gap:34px}
.desktop-nav a{font-size:13px;font-weight:800;color:#3f4253;position:relative;padding:12px 0}
.desktop-nav a:after{content:"";position:absolute;left:0;bottom:6px;width:100%;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.desktop-nav a:hover:after{transform:scaleX(1);transform-origin:left}
.nav-shell .button{height:50px;padding-inline:21px}
.menu-toggle{display:none;border:0;background:transparent;width:44px;height:44px;position:relative;cursor:pointer}
.menu-toggle span{position:absolute;width:23px;height:2px;background:var(--navy);left:10px;transition:.3s}
.menu-toggle span:first-child{top:17px}
.menu-toggle span:last-child{top:25px}
.menu-toggle.is-open span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle.is-open span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobile-panel{display:none}

/* ===== Cursor + progress ===== */
.scroll-progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:120;background:transparent}
.scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),#ffb06e)}
.cursor-dot,.cursor-ring{position:fixed;z-index:999;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%)}
.cursor-dot{width:8px;height:8px;background:var(--orange);box-shadow:0 0 12px rgba(250,105,9,.65)}
.cursor-ring{width:36px;height:36px;border:1.5px solid var(--orange);transition:width .25s,height .25s,opacity .25s,background .25s}
.cursor-ring.is-active{width:62px;height:62px;background:rgba(250,105,9,.12)}

/* Esconde o ponteiro nativo SÓ onde a bolinha customizada aparece.
   Abaixo de 901px a bolinha é desligada (ver media query mais adiante),
   então o cursor do sistema precisa voltar — senão fica tudo invisível. */
@media (pointer:fine) and (min-width:901px){
  html.has-custom-cursor,
  html.has-custom-cursor body,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor .tilt-card,
  html.has-custom-cursor .magnetic,
  html.has-custom-cursor label,
  html.has-custom-cursor *:not(input):not(textarea){cursor:none}
  html.has-custom-cursor input,
  html.has-custom-cursor textarea{cursor:text}
}

/* ===== Hero ===== */
.hero{min-height:100vh;padding:150px 0 0;background:radial-gradient(circle at 70% 40%,rgba(82,46,165,.42),transparent 28%),linear-gradient(125deg,#050430 0%,#090458 52%,#14047a 100%);color:#fff;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 88%)}
.hero-glow{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55}
.glow-one{width:640px;height:640px;border:1px solid rgba(255,255,255,.09);right:-280px;top:40px;box-shadow:inset 0 0 0 90px rgba(255,255,255,.025),inset 0 0 0 180px rgba(255,255,255,.02)}
.glow-two{width:250px;height:250px;background:radial-gradient(circle,rgba(250,105,9,.16),transparent 68%);left:46%;top:25%}
.hero-layout{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center;min-height:690px}
.hero-title{font-family:Sora,sans-serif;font-size:clamp(70px,7.1vw,116px);line-height:.88;letter-spacing:-.075em;margin:22px 0 26px;max-width:630px}
.hero-title em,.contact-copy h2 em{color:var(--orange);font-style:normal}
.hero-text{font-size:18px;line-height:1.72;color:rgba(255,255,255,.68);max-width:600px;margin:0}
.hero-actions{display:flex;align-items:center;gap:24px;margin-top:34px;flex-wrap:wrap}
.text-link{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#fff}
.text-link svg{width:19px;transition:.3s}
.text-link:hover svg{transform:translateX(5px)}
.hero-proof{display:flex;gap:40px;margin-top:58px;padding-top:28px;border-top:1px solid rgba(255,255,255,.15);flex-wrap:wrap}
.hero-proof div{display:grid;gap:3px}
.hero-proof strong{font:800 21px Sora}
.hero-proof span{font-size:12px;color:rgba(255,255,255,.52)}

.hero-showcase{position:relative;height:640px;perspective:1200px}
.showcase-frame{position:absolute;inset:0}
.showcase-card{position:absolute;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.28);transform-style:preserve-3d;border:1px solid rgba(255,255,255,.24);will-change:transform;background:#dfdde5}
.showcase-main{left:40px;right:72px;top:72px;height:470px;z-index:2}
.showcase-top{width:230px;height:194px;right:0;top:6px;z-index:3;transform:rotate(4deg)}
.showcase-bottom{width:245px;height:204px;left:0;bottom:12px;z-index:4;transform:rotate(-4deg)}
.card-label{position:absolute;z-index:2;top:18px;left:18px;padding:8px 11px;border-radius:999px;background:rgba(7,6,42,.82);backdrop-filter:blur(12px);font-size:9px;font-weight:800;letter-spacing:.12em;color:#fff}
/* Suporte a <img> nas cards do hero */
.showcase-card img{width:100%;height:100%;object-fit:cover;display:block}
.showcase-caption{position:absolute;right:18px;bottom:36px;font-size:10px;color:rgba(255,255,255,.43);display:flex;align-items:center;gap:8px;letter-spacing:.06em}
.showcase-caption span{width:22px;height:1px;background:var(--orange)}

.hero-marquee{position:relative;z-index:3;height:84px;border-top:1px solid rgba(255,255,255,.12);overflow:hidden;background:rgba(0,0,0,.1)}
.marquee-track{height:100%;display:flex;align-items:center;width:max-content;animation:marquee var(--marquee-tempo,26s) linear infinite}
.marquee-group{display:flex;align-items:center;flex:none}
.marquee-track span{font:700 14px Sora;letter-spacing:.14em;color:rgba(255,255,255,.6);margin:0 34px}
.marquee-track i{width:6px;height:6px;border-radius:50%;background:var(--orange)}
/* desloca exatamente a largura de UM grupo: quando termina, o grupo
   seguinte está no lugar do anterior e a emenda é invisível */
@keyframes marquee{to{transform:translateX(calc(-1 * var(--marquee-largura,50%)))}}

/* ===== Credibility (Sobre) ===== */
.credibility{background:var(--paper)}
.cred-bento{display:grid;grid-template-columns:1.1fr .62fr .82fr;grid-template-rows:240px 270px;gap:18px}
.bento-card{border-radius:var(--radius);padding:32px;background:#fff;border:1px solid rgba(8,6,79,.08);position:relative;overflow:hidden}
.bento-tag{font-size:10px;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.6)}
.bento-number{grid-row:1/3;background:linear-gradient(145deg,#08064f,#151187);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:42px}
.bento-number .stat-number{font:800 clamp(92px,11vw,168px) Sora;letter-spacing:-.08em;color:var(--orange);line-height:.85;margin-top:28px;white-space:nowrap}
.bento-number .stat-number:after{content:"+";font-size:.42em;vertical-align:top;margin-left:2px}
.bento-number p{font-size:16px;line-height:1.65;color:rgba(255,255,255,.65);max-width:330px;margin:0}
.line-pattern{position:absolute;width:280px;height:280px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-100px;bottom:-100px;box-shadow:inset 0 0 0 50px rgba(255,255,255,.02),inset 0 0 0 100px rgba(255,255,255,.02)}
.bento-years{display:flex;flex-direction:column;justify-content:flex-end;background:#fff}
.icon-box,.sector-icon,.step-icon{width:54px;height:54px;border-radius:16px;background:rgba(250,105,9,.1);color:var(--orange);display:grid;place-items:center}
.icon-box svg,.sector-icon svg,.step-icon svg{width:25px;height:25px}
.bento-years strong{font:800 30px Sora;margin:25px 0 6px}
.bento-years p,.bento-quality p{color:var(--muted);line-height:1.55;margin:0;font-size:13px}
.bento-quality{background:linear-gradient(145deg,#f8d7bf,#ff8b3b);display:flex;align-items:center;gap:24px}
.quality-ring{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;border:10px solid rgba(255,255,255,.45);box-shadow:inset 0 0 0 3px rgba(8,6,79,.14)}
.quality-ring span{font:800 21px Sora;color:var(--navy)}
.bento-quality strong{font:800 19px Sora;display:block;margin-bottom:7px}
.bento-wide{grid-column:2/4;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:38px}
.bento-wide .bento-tag{color:var(--orange)}
.bento-wide h3{font:800 30px Sora;letter-spacing:-.04em;margin:14px 0 12px}
.bento-wide p{margin:0;color:var(--muted);line-height:1.7;font-size:14px}
.mini-flow{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.mini-flow>div{width:98px;height:98px;border-radius:22px;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center}
.mini-flow span{font:800 22px Sora;color:var(--orange)}
.mini-flow b{font-size:11px}
.mini-flow svg{width:34px;color:#9a9baa}

/* ===== Produtos ===== */
.products-section{background:#070817;color:#fff;overflow:hidden}
.product-nav{display:flex;gap:10px}
.product-nav button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:.3s}
.product-nav button:hover{background:var(--orange);border-color:var(--orange)}
.product-nav svg{width:21px}
.product-swiper{overflow:visible}
.product-card{height:auto;border-radius:28px;background:#141622;border:1px solid rgba(255,255,255,.1);overflow:hidden;transition:.45s var(--ease)}
.product-card:hover{transform:translateY(-9px);border-color:rgba(250,105,9,.55)}
.product-visual{height:310px;position:relative;overflow:hidden;display:grid;place-items:center}
.product-visual:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.09);filter:blur(2px);right:-40px;top:-40px;pointer-events:none}
.product-visual img{width:100%;height:100%;object-fit:cover;display:block}
.product-info{padding:28px 28px 31px}
.product-info>span{font-size:10px;font-weight:800;letter-spacing:.14em;color:#ff9a58}
.product-info h3{font:700 24px Sora;letter-spacing:-.035em;margin:10px 0}
.product-info p{color:rgba(255,255,255,.58);font-size:14px;line-height:1.65;min-height:68px}
.product-info a{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:#fff;margin-top:10px}
.product-info a svg{width:16px;transition:.3s}
.product-info a:hover svg{transform:translateX(5px)}
.product-scrollbar{position:relative!important;margin-top:42px!important;background:rgba(255,255,255,.1)!important;height:2px!important}
.product-scrollbar .swiper-scrollbar-drag{background:var(--orange)!important}

/* ===== Statement ===== */
.statement-section{padding-top:120px;padding-bottom:120px}
.statement-card{min-height:600px;border-radius:38px;background:linear-gradient(120deg,#07063f,#120a78);color:#fff;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;position:relative;box-shadow:var(--shadow)}
.statement-card:before{content:"";position:absolute;inset:22px;border:1px solid rgba(255,255,255,.14);border-radius:27px;pointer-events:none}
.statement-copy{padding:86px 0 86px 72px;position:relative;z-index:3;align-self:center}
.statement-copy h2{font:700 clamp(48px,5.3vw,82px) Sora;letter-spacing:-.065em;line-height:.96;margin:20px 0 24px;max-width:720px}
.statement-copy p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.65);max-width:560px;margin-bottom:30px}
.statement-visual{position:relative;overflow:hidden;min-height:600px}
.statement-visual:before{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(255,255,255,.1);border-radius:50%;right:-120px;top:24px;box-shadow:inset 0 0 0 70px rgba(255,255,255,.025),inset 0 0 0 140px rgba(255,255,255,.02)}
.floating-sign{position:absolute;border:1px solid rgba(255,255,255,.55);background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,.08));box-shadow:0 38px 80px rgba(0,0,0,.2);backdrop-filter:blur(7px);display:grid;place-items:center;color:var(--navy);font:800 36px Sora}
.sign-one{width:190px;height:260px;border-radius:28px;left:70px;top:104px;transform:rotate(-12deg)}
.sign-two{width:250px;height:180px;border-radius:28px;right:60px;top:210px;transform:rotate(8deg);color:#fff;font-size:26px}
.sign-three{width:220px;height:140px;border-radius:28px;left:165px;bottom:58px;transform:rotate(3deg);background:linear-gradient(145deg,rgba(250,105,9,.9),rgba(250,105,9,.2))}
.statement-orbit{position:absolute;width:18px;height:18px;background:var(--orange);border-radius:50%;left:55%;top:16%;box-shadow:0 0 30px rgba(250,105,9,.8)}

/* ===== Sectors ===== */
.sector-bento{display:grid;grid-template-columns:1.3fr .7fr .7fr;grid-template-rows:310px 250px;gap:18px}
.sector-card{background:#fff;border:1px solid rgba(8,6,79,.08);border-radius:28px;padding:30px;position:relative;overflow:hidden}
.sector-card>span,.sector-card>div>span{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--orange)}
.sector-card h3{font:700 26px Sora;letter-spacing:-.04em;margin:14px 0 10px}
.sector-card p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}
.sector-card.dark{background:var(--navy);color:#fff}
.sector-card.dark p{color:rgba(255,255,255,.58)}
.sector-card .sector-icon{margin-bottom:28px}
.sector-large{grid-row:1/3;padding:40px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,#fff,#edeef5)}
.sector-large h3{font-size:38px;max-width:420px}
.sector-large p{max-width:420px}
.sector-art{position:absolute;right:-35px;bottom:-45px;width:330px;height:300px;transform:rotate(-5deg)}
.sector-art i{position:absolute;border:1px solid rgba(255,255,255,.8);background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(99,98,180,.15));box-shadow:0 26px 55px rgba(8,6,79,.14);border-radius:24px}
.sector-art i:nth-child(1){width:140px;height:225px;right:40px;bottom:50px}
.sector-art i:nth-child(2){width:120px;height:160px;right:145px;bottom:40px}
.sector-art i:nth-child(3){width:100px;height:120px;right:75px;bottom:0;background:linear-gradient(145deg,rgba(250,105,9,.8),rgba(250,105,9,.2))}
.sector-wide{grid-column:2/4;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
.sector-wide .sector-icon{margin:0}
.sector-wide h3{margin:8px 0 5px}
.round-link{width:56px;height:56px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center}
.round-link svg{width:21px}

/* ===== Portfolio ===== */
.portfolio-section{background:#080914;color:#fff;overflow:hidden}
.portfolio-grid{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:370px 370px;gap:18px}
.portfolio-card{position:relative;border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#151623}
.pc-one{grid-row:1/3}
.portfolio-mock{position:absolute;inset:0;overflow:hidden}
/* Suporte a imagens reais no portfólio */
.portfolio-mock img{width:100%;height:100%;object-fit:cover;display:block}
.portfolio-meta{position:absolute;inset:auto 0 0;padding:44px 34px 30px;background:linear-gradient(transparent,rgba(5,6,18,.94));z-index:2}
.portfolio-meta span{font-size:10px;letter-spacing:.14em;color:#ff9b5d;font-weight:800}
.portfolio-meta h3{font:700 26px Sora;letter-spacing:-.03em;margin:8px 0 0}

/* ===== Process ===== */
.process-section{background:#fff;position:relative}

/* ===== Needs ===== */
.need-section{background:linear-gradient(135deg,#07063e,#10097b);color:#fff;overflow:hidden}
.need-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:85px;align-items:center}
.need-copy .section-title{margin-bottom:22px}
.need-copy>p{color:rgba(255,255,255,.62);line-height:1.75;font-size:16px;max-width:520px}
.need-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-top:32px}
.need-tab{border:1px solid rgba(255,255,255,.18);background:transparent;color:rgba(255,255,255,.72);border-radius:999px;padding:12px 18px;font-weight:800;font-size:12px;cursor:pointer;transition:.3s}
.need-tab.active,.need-tab:hover{background:#fff;color:var(--navy);border-color:#fff}
.need-panel{background:#fff;color:var(--ink);border-radius:32px;padding:42px;position:relative;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.22)}
.need-panel-head{display:flex;align-items:center;gap:22px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.need-panel-head>span{width:64px;height:64px;border-radius:20px;background:var(--orange);color:#fff;display:grid;place-items:center;font:800 22px Sora}
.need-panel-head small{font-size:9px;letter-spacing:.14em;color:var(--orange);font-weight:800}
.need-panel-head h3{font:700 26px Sora;letter-spacing:-.035em;margin:4px 0 0}
.need-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}
.need-options>div{padding:20px 15px;border-radius:18px;background:var(--paper);min-height:130px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;position:relative;z-index:1}
.need-options svg{width:26px;color:var(--navy)}
.need-options span{font-size:12px;font-weight:800}
.need-panel .button{position:relative;z-index:1}
.need-watermark{position:absolute;right:-14px;bottom:-25px;font:800 110px Sora;letter-spacing:-.08em;color:rgba(8,6,79,.035);pointer-events:none}

/* ===== Testimonials ===== */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testimonial{min-height:370px;border-radius:28px;background:#fff;border:1px solid rgba(8,6,79,.08);padding:34px;display:flex;flex-direction:column;justify-content:space-between;transition:.35s}
.testimonial:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.testimonial.featured{background:var(--navy);color:#fff;transform:translateY(-18px)}
.testimonial.featured:hover{transform:translateY(-26px)}
.quote-mark{font:800 72px Sora;line-height:.7;color:var(--orange)}
.testimonial>p{font-size:17px;line-height:1.72;color:var(--muted);margin:25px 0}
.featured>p{color:rgba(255,255,255,.72)}
.testimonial-author{display:flex;align-items:center;gap:14px}
.testimonial-author>span{width:42px;height:42px;border-radius:50%;background:linear-gradient(145deg,var(--orange),#ffb27a);display:grid;place-items:center;color:#fff;font:800 11px Sora}
.testimonial-author strong,.testimonial-author small{display:block}
.testimonial-author strong{font-size:13px}
.testimonial-author small{font-size:11px;color:var(--muted);margin-top:3px}
.featured .testimonial-author small{color:rgba(255,255,255,.45)}

/* ===== FAQ ===== */
.faq-section{background:#eeede9}
.faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:110px}
.faq-intro p{color:var(--muted);font-size:17px;line-height:1.7;max-width:400px}
.faq-item{border-bottom:1px solid #cfd0d8}
.faq-question{width:100%;padding:24px 0;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:17px;font-weight:800;text-align:left;cursor:pointer}
.faq-question svg{width:21px;flex:0 0 auto;transition:.3s}
.faq-item.open .faq-question svg{transform:rotate(45deg);color:var(--orange)}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-answer>p{overflow:hidden;margin:0;color:var(--muted);line-height:1.7;font-size:14px}
.faq-item.open .faq-answer{grid-template-rows:1fr}
.faq-item.open .faq-answer>p{padding:0 0 24px}

/* ===== Contact ===== */
.contact-section{padding:128px 0;background:radial-gradient(circle at 15% 20%,rgba(66,53,173,.4),transparent 26%),linear-gradient(135deg,#07053f,#0d086b);color:#fff;position:relative;overflow:hidden}
.contact-layout{display:grid;grid-template-columns:1fr .85fr;gap:90px;align-items:center}
.contact-copy h2{font:700 clamp(54px,6vw,88px) Sora;letter-spacing:-.07em;line-height:.94;margin:22px 0 26px}
.contact-copy>p{color:rgba(255,255,255,.65);font-size:17px;line-height:1.75;max-width:610px}
.contact-mini{display:flex;flex-direction:column;gap:12px;margin-top:35px}
.contact-mini div{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.58);font-size:13px}
.contact-mini svg{width:21px;color:#ff9a58}
.contact-form{background:#fff;color:var(--ink);padding:36px;border-radius:32px;box-shadow:0 35px 100px rgba(0,0,0,.24)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.contact-form label{display:grid;gap:8px;margin-bottom:14px}
.contact-form label>span{font-size:11px;font-weight:800;color:#474a5a}
.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--line);background:#f8f8fa;border-radius:14px;padding:15px 16px;outline:none;transition:.3s}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px rgba(250,105,9,.08)}
.contact-form textarea{height:132px;resize:none}
.contact-form .button{width:100%;border:0;cursor:pointer;margin-top:4px}
.contact-form>small{display:block;text-align:center;color:#8a8d9a;font-size:10px;margin-top:13px}

/* ===== Footer ===== */
.site-footer{background:#04050e;color:#fff;padding:82px 0 30px}
.footer-top{display:grid;grid-template-columns:1.25fr .55fr .7fr 1fr;gap:70px;padding-bottom:60px}
.footer-brand img{width:170px;max-height:74px;margin-bottom:22px}
.footer-brand p,.footer-col p{color:rgba(255,255,255,.48);font-size:13px;line-height:1.7;margin:0;max-width:330px}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col strong{font:700 13px Sora;margin-bottom:8px}
.footer-col a{font-size:13px;color:rgba(255,255,255,.5);transition:.25s}
.footer-col a:hover{color:#fff;transform:translateX(4px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding-top:26px;display:flex;justify-content:space-between;color:rgba(255,255,255,.3);font-size:11px;flex-wrap:wrap;gap:10px}

/* ===== WhatsApp float ===== */
.whatsapp-float{position:fixed;z-index:70;right:24px;bottom:24px;height:58px;border-radius:999px;background:#20c866;color:#fff;display:flex;align-items:center;gap:10px;padding:0 18px 0 14px;box-shadow:0 16px 40px rgba(32,200,102,.32);font-size:12px;font-weight:800;transition:.35s var(--ease)}
.whatsapp-float svg{width:30px;height:30px;fill:#fff;stroke:none}
.whatsapp-float:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(32,200,102,.45)}

/* ================================================================
   RESPONSIVO
   ================================================================ */

@media (max-width:1100px){
  .desktop-nav{gap:20px}
  .nav-shell{grid-template-columns:150px 1fr auto}
  .brand,.brand img{width:124px}
  .hero-layout{grid-template-columns:1fr 1fr;gap:30px}
  .hero-showcase{height:560px}
  .showcase-main{left:30px;right:40px}
  .showcase-top{width:190px}
  .showcase-bottom{width:205px}
  .cred-bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .bento-number{grid-row:1/3}
  .bento-wide{grid-column:1/3}
  .sector-bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .sector-large{grid-row:1/3}
  .sector-wide{grid-column:1/3}
  .statement-copy{padding-left:52px}
  .need-options{grid-template-columns:1fr}
}

@media (max-width:900px){
  .cursor-dot,.cursor-ring{display:none}
  .container,.nav-shell{width:min(100% - 30px,1240px)}
  .section{padding:96px 0}
  .heading-row{grid-template-columns:1fr;gap:24px;margin-bottom:44px}
  .heading-row>p{max-width:650px}
  .section-title{font-size:clamp(42px,8vw,64px)}
  .nav-shell{grid-template-columns:1fr auto;height:66px}
  .brand,.brand img{width:116px}
  .desktop-nav,.nav-shell>.button{display:none}
  .menu-toggle{display:block}
  .mobile-panel{position:absolute;left:15px;right:15px;top:78px;background:#fff;border-radius:20px;padding:20px;box-shadow:var(--shadow);display:grid;gap:8px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.3s}
  .mobile-panel.is-open{opacity:1;visibility:visible;transform:none}
  .mobile-panel a{padding:12px 10px;font-weight:800;font-size:14px}
  .hero{padding-top:120px}
  .hero-layout{grid-template-columns:1fr;min-height:auto}
  .hero-copy{padding-top:40px}
  .hero-title{font-size:clamp(64px,14vw,100px);max-width:760px}
  .hero-showcase{height:600px;margin-top:10px}
  .showcase-main{left:12%;right:8%}
  .showcase-top{right:1%}
  .showcase-bottom{left:2%}
  .cred-bento{grid-template-columns:1fr 1fr}
  .bento-number{grid-row:auto;grid-column:1/3;min-height:390px}
  .bento-wide{grid-template-columns:1fr}
  .mini-flow{justify-content:flex-start}
  .statement-card{grid-template-columns:1fr}
  .statement-copy{padding:70px 50px 10px}
  .statement-visual{min-height:430px}
  .sector-bento{grid-template-columns:1fr 1fr}
  .sector-large{grid-column:1/3;grid-row:auto;min-height:520px}
  .portfolio-grid{grid-template-columns:1fr;grid-template-rows:520px 360px 360px 360px}
  .pc-one{grid-row:auto}
  .need-layout,.contact-layout,.faq-layout{grid-template-columns:1fr;gap:55px}
  .need-panel{max-width:720px}
  .need-options{grid-template-columns:repeat(3,1fr)}
  .testimonials-grid{grid-template-columns:1fr}
  .testimonial.featured{transform:none}
  .testimonial.featured:hover{transform:translateY(-8px)}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/3}
}

@media (max-width:620px){
  .container{width:min(100% - 24px,1240px)}
  .site-header{top:8px}
  .nav-shell{width:calc(100% - 16px);border-radius:18px}
  .section{padding:76px 0}
  .section-title{font-size:42px}
  .kicker{font-size:10px}
  .hero{padding-top:96px}
  .hero-copy{padding-top:42px}
  .hero-title{font-size:58px}
  .hero-text{font-size:16px}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:17px}
  .hero-proof{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .hero-showcase{height:460px}
  .showcase-main{left:7%;right:4%;top:45px;height:340px}
  .showcase-top{width:145px;height:125px}
  .showcase-bottom{width:155px;height:132px;bottom:4px}
  .showcase-caption{display:none}
  .hero-marquee{height:66px}
  .marquee-track span{font-size:11px;margin-inline:20px}
  .cred-bento{grid-template-columns:1fr}
  .bento-number,.bento-wide{grid-column:auto}
  .bento-number{min-height:380px;padding:32px}
  .bento-number .stat-number{font-size:95px}
  .bento-quality{min-height:210px}
  .bento-wide{padding:28px}
  .mini-flow{overflow-x:auto;padding-bottom:5px}
  .mini-flow svg{flex:0 0 auto}
  .product-visual{height:270px}
  .statement-card{border-radius:28px}
  .statement-copy{padding:58px 30px 0}
  .statement-copy h2{font-size:44px}
  .statement-visual{min-height:370px}
  .sign-one{left:24px;top:75px;width:150px;height:210px}
  .sign-two{right:20px;top:160px;width:180px;height:130px}
  .sign-three{left:95px;width:165px;height:105px}
  .sector-bento{grid-template-columns:1fr}
  .sector-large,.sector-wide{grid-column:auto}
  .sector-large{min-height:530px;padding:30px}
  .sector-large h3{font-size:32px}
  .sector-art{width:280px}
  .sector-wide{grid-template-columns:auto 1fr}
  .sector-wide .round-link{grid-column:2}
  .portfolio-grid{grid-template-rows:460px 330px 330px 330px}
  .portfolio-meta{padding:40px 24px 24px}
  .need-panel{padding:28px}
  .need-panel-head{align-items:flex-start}
  .need-panel-head h3{font-size:21px}
  .need-options{grid-template-columns:1fr}
  .testimonial{min-height:330px}
  .faq-layout{gap:34px}
  .contact-section{padding:84px 0}
  .contact-copy h2{font-size:50px}
  .form-grid{grid-template-columns:1fr}
  .contact-form{padding:24px}
  .footer-top{grid-template-columns:1fr;gap:35px}
  .footer-brand{grid-column:auto}
  .footer-bottom{flex-direction:column;gap:10px}
  .whatsapp-float{width:56px;padding:0;justify-content:center}
  .whatsapp-float span{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* ================================================================
   AJUSTES DA REVISÃO 03 — espaçamentos, paleta e process pinado
   ================================================================ */

.hero{min-height:auto;padding-top:138px}
.hero-layout{min-height:640px;padding-bottom:54px}
.hero-title{font-size:clamp(62px,5.7vw,92px);line-height:.91;max-width:560px;margin-top:18px}
.hero-text{max-width:560px}
.hero-proof{margin-top:42px}
.hero-marquee{margin-top:46px}

.credibility .section-title{font-size:clamp(46px,4.4vw,68px);max-width:780px}
.cred-bento{grid-template-columns:minmax(390px,1.05fr) minmax(250px,.62fr) minmax(320px,.83fr);grid-template-rows:250px 286px;gap:20px}
.bento-card{min-width:0}
.bento-number{padding:48px 46px;gap:28px}
.bento-number .stat-number{display:flex;align-items:flex-start;max-width:100%;font:800 clamp(78px,7.4vw,126px) Sora;letter-spacing:-.065em;line-height:.82;margin:18px 0 0;white-space:nowrap}
.bento-number .stat-number small{font-size:.38em;line-height:1;margin:4px 0 0 5px;color:var(--orange)}
.bento-number .stat-number:after{display:none}
.bento-number p{padding-right:26px}
.bento-years,.bento-quality{padding:36px}
.bento-wide{padding:40px 42px;gap:34px}

.products-section{background:linear-gradient(135deg,var(--navy) 0%,#0d0967 100%)}
.product-card{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.14)}
.product-card:hover{background:rgba(255,255,255,.105)}

.process-section{background:#fff;position:relative}
.process-pin{min-height:100vh;display:flex;align-items:center;padding:110px 0;overflow:hidden}
.process-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:88px;align-items:center}
.process-intro h2{font:700 clamp(48px,5vw,74px) Sora;line-height:.96;letter-spacing:-.065em;margin:20px 0 24px;max-width:540px}
.process-intro>p{font-size:16px;line-height:1.75;color:var(--muted);max-width:500px;margin:0}
.process-counter{display:flex;align-items:flex-end;gap:8px;margin-top:48px;color:var(--navy)}
.process-counter span{font:800 72px/1 Sora;letter-spacing:-.07em}
.process-counter small{font:700 16px Sora;color:#a0a2ae;padding-bottom:8px}
.process-stage{position:relative;min-height:540px;border-radius:36px;background:linear-gradient(145deg,#f4f3ef,#ececf4);border:1px solid rgba(8,6,79,.09);padding:54px 56px 46px;box-shadow:0 32px 90px rgba(8,6,79,.12);overflow:hidden}
.process-stage:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-170px;top:-190px;border:1px solid rgba(8,6,79,.08);box-shadow:inset 0 0 0 70px rgba(8,6,79,.025),inset 0 0 0 140px rgba(8,6,79,.018)}
.process-rail{height:4px;background:#d7d8e2;border-radius:99px;position:relative;z-index:4;overflow:hidden}
.process-progress{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--navy),var(--orange));transform:scaleX(0);transform-origin:left center}
.process-marks{position:absolute;z-index:5;left:56px;right:56px;top:47px;display:flex;justify-content:space-between;pointer-events:none}
.process-marks i{width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid #d7d8e2;transition:.35s}
.process-marks i.active{border-color:var(--orange);box-shadow:0 0 0 6px rgba(250,105,9,.12)}
.process-cards{position:relative;height:410px;margin-top:34px}
.process-card{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:30px 32px;border-radius:28px;background:#fff;border:1px solid rgba(8,6,79,.08);box-shadow:0 20px 55px rgba(8,6,79,.09);opacity:0;transform:translateY(70px) scale(.96);pointer-events:none}
.process-card.active{opacity:1;transform:none;pointer-events:auto}
.process-card-top{display:flex;align-items:center;justify-content:space-between}
.process-card-top>span{font:800 14px Sora;color:var(--orange);letter-spacing:.12em}
.process-symbol{width:64px;height:64px;border-radius:20px;background:var(--navy);color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px rgba(8,6,79,.18)}
.process-symbol svg{width:32px;height:32px;stroke-width:1.7}
.process-card small{display:block;font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--orange);margin:24px 0 11px}
.process-card h3{font:800 clamp(36px,3.4vw,54px) Sora;letter-spacing:-.055em;line-height:1;margin:0 0 16px}
.process-card p{font-size:15px;line-height:1.72;color:var(--muted);max-width:620px;margin:0}
.process-card ul{display:flex;gap:9px;flex-wrap:wrap;list-style:none;padding:0;margin:26px 0 0}
.process-card li{padding:9px 13px;border-radius:999px;background:var(--paper);font-size:11px;font-weight:800;color:#484b5b}

.whatsapp-float{width:62px;height:62px;padding:0;border-radius:50%;display:grid;place-items:center;background:#25d366;box-shadow:0 16px 42px rgba(37,211,102,.34)}
.whatsapp-float svg{width:31px;height:35px;fill:#fff;stroke:none}
.whatsapp-float:hover{transform:translateY(-5px) scale(1.04);background:#20bd5a}

@media (max-width:1100px){
  .hero-title{font-size:clamp(58px,6.8vw,82px)}
  .cred-bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .bento-number{grid-column:1/3;grid-row:auto;min-height:400px}
  .bento-wide{grid-column:1/3}
  .process-layout{gap:46px}
  .process-stage{padding-inline:38px}
  .process-marks{left:38px;right:38px}
}
@media (max-width:900px){
  .hero-layout{padding-bottom:80px}
  .hero-marquee{margin-top:20px}
  .hero-title{font-size:clamp(58px,10.5vw,82px)}
  .process-pin{padding:100px 0}
  .process-layout{grid-template-columns:1fr;gap:42px}
  .process-intro h2{max-width:720px}
  .process-intro>p{max-width:680px}
  .process-counter{margin-top:28px}
}
@media (max-width:620px){
  .hero{padding-top:104px}
  .hero-layout{padding-bottom:66px}
  .hero-title{font-size:clamp(60px,15vw,80px);line-height:.9;max-width:100%}
  .hero-proof{margin-top:34px;padding-top:24px}
  .hero-marquee{margin-top:10px}
  .bento-number{min-height:350px;padding:34px 30px}
  .bento-number .stat-number{font-size:82px}
  .bento-number p{padding-right:0}
  .bento-years,.bento-quality,.bento-wide{padding:28px}
  .process-pin{min-height:auto;padding:82px 0}
  .process-counter{display:none}
  .process-stage{min-height:auto;padding:34px 22px 24px;border-radius:28px}
  .process-rail,.process-marks{display:none}
  .process-cards{height:auto;margin-top:0;display:grid;gap:16px}
  .process-card{position:relative;inset:auto;opacity:1!important;transform:none!important;min-height:360px;padding:26px 24px}
  .process-card:not(.active){display:grid}
  .process-card h3{font-size:38px}
  .process-card ul{gap:7px}
  .process-card li{font-size:10px}
  .whatsapp-float{width:58px;height:58px;right:18px;bottom:18px}
  .whatsapp-float svg{width:28px;height:31px}
}

/* ================================================================
   AJUSTES DA REVISÃO 04 — card "Produção personalizada",
   camadas do card de varejo e fotos reais de produto
   ================================================================ */

/* --- Card 100% / Produção personalizada: layout em coluna --- */
.bento-quality{
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:20px;
  padding:34px 32px;
  text-align:left;
}
.quality-ring{
  flex:none;
  width:96px;height:96px;
  border-width:8px;
  box-shadow:inset 0 0 0 3px rgba(8,6,79,.14);
}
.quality-ring span{
  display:block;
  font:800 20px/1 Sora;
  letter-spacing:-.02em;
  color:var(--navy);
}
.quality-copy{min-width:0;max-width:100%}
.bento-quality strong{
  font:800 19px/1.2 Sora;
  letter-spacing:-.02em;
  display:block;
  margin:0 0 8px;
  text-wrap:balance;
}
.bento-quality p{
  font-size:13.5px;
  line-height:1.6;
  max-width:30ch;
}

/* --- Card VAREJO: foto atrás, texto sempre na frente --- */
.sector-large{position:relative;overflow:hidden}
.sector-large>.sector-icon,
.sector-large>.sector-text{position:relative;z-index:3}
.sector-large .sector-art{
  z-index:1;
  right:-26px;bottom:-26px;
  width:340px;height:290px;
  transform:rotate(-4deg);
  border-radius:26px;
  overflow:hidden;
  border:6px solid rgba(255,255,255,.9);
  box-shadow:0 32px 66px rgba(8,6,79,.24);
}
.sector-large .sector-art img{width:100%;height:100%;object-fit:cover;display:block}
.sector-large:after{
  content:"";
  position:absolute;inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(112deg,
    rgba(255,255,255,.97) 34%,
    rgba(255,255,255,.72) 55%,
    rgba(255,255,255,0) 74%);
}

/* --- Dobra 04: foto real ao fundo do bloco de destaque --- */
.statement-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.statement-photo img{width:100%;height:100%;object-fit:cover;display:block;opacity:.45}
.statement-photo:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(100deg,#07063f 10%,rgba(7,6,63,.74) 44%,rgba(18,10,120,.3) 100%);
}
.statement-visual:before,
.floating-sign,
.statement-orbit{z-index:1}

@media (max-width:900px){
  .sector-large .sector-art{width:300px;height:260px}
}
@media (max-width:620px){
  .bento-quality{gap:16px;padding:28px}
  .quality-ring{width:84px;height:84px;border-width:7px}
  .sector-large .sector-art{width:250px;height:220px;right:-18px;bottom:-18px}
  .sector-large:after{
    background:linear-gradient(180deg,
      rgba(255,255,255,.97) 44%,
      rgba(255,255,255,.62) 68%,
      rgba(255,255,255,0) 88%);
  }
}

/* ================================================================
   AJUSTES DA REVISÃO 05 — foto do produto sem corte + galeria "Ver mais"
   ================================================================ */

/* --- Foto do card: nada é cortado, tudo centralizado --- */
.product-visual{background:#0c0b34}
.product-visual:before{
  content:"";
  position:absolute;inset:0;
  z-index:0;
  background-image:var(--shot);
  background-size:cover;
  background-position:center;
  transform:scale(1.3);
  filter:blur(30px) saturate(1.15) brightness(.5);
}
.product-visual img{
  position:relative;
  z-index:1;
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
  padding:16px;
}
.product-visual:after{z-index:2}

/* --- Ações do card (link + Ver mais) --- */
.product-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;flex-wrap:wrap}
.product-info a{margin-top:0}
.product-more{
  border:1px solid rgba(255,255,255,.24);
  background:transparent;
  color:#fff;
  font:800 11px/1 Manrope;
  letter-spacing:.06em;
  padding:11px 16px;
  border-radius:999px;
  cursor:pointer;
  transition:.3s var(--ease);
  white-space:nowrap;
}
.product-more:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-2px)}

/* --- Modal de galeria --- */
body.no-scroll{overflow:hidden}

.gallery-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.gallery-modal[hidden]{display:none}
.gallery-backdrop{position:absolute;inset:0;background:rgba(4,4,24,.82);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}
.gallery-modal.is-open .gallery-backdrop{opacity:1}

.gallery-dialog{
  position:relative;
  width:min(1080px,100%);
  max-height:88vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:#101128;
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 40px 110px rgba(0,0,0,.55);
  opacity:0;
  transform:translateY(26px) scale(.97);
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.gallery-modal.is-open .gallery-dialog{opacity:1;transform:none}

.gallery-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:26px 28px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.gallery-head small{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;color:#ff9a58}
.gallery-head h3{font:700 26px Sora;letter-spacing:-.035em;color:#fff;margin:9px 0 0}
.gallery-close{
  flex:none;
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  background:transparent;
  color:#fff;
  display:grid;place-items:center;
  cursor:pointer;
  transition:.3s;
}
.gallery-close svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.gallery-close:hover{background:var(--orange);border-color:var(--orange);transform:rotate(90deg)}

.gallery-grid{
  overflow-y:auto;
  padding:24px 28px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px;
  align-content:start;
}
.gallery-item{
  padding:0;border:1px solid rgba(255,255,255,.1);
  border-radius:18px;overflow:hidden;
  background:#080920;
  aspect-ratio:4/5;
  cursor:pointer;
  transition:.35s var(--ease);
}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:.5s var(--ease)}
.gallery-item:hover{border-color:rgba(250,105,9,.6);transform:translateY(-4px)}
.gallery-item:hover img{transform:scale(1.06)}

.gallery-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 28px;border-top:1px solid rgba(255,255,255,.1)}
.gallery-foot span{font-size:12px;font-weight:800;color:rgba(255,255,255,.5);letter-spacing:.06em}
.gallery-foot .button{height:46px;font-size:12px}

/* --- Zoom de uma foto --- */
.gallery-zoom{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:40px;background:rgba(3,3,18,.94);opacity:0;transition:opacity .26s}
.gallery-zoom[hidden]{display:none}
.gallery-zoom.is-open{opacity:1}
.gallery-zoom img{max-width:100%;max-height:100%;object-fit:contain;border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.gallery-zoom .gallery-close{position:absolute;top:24px;right:24px;background:rgba(255,255,255,.08)}

@media (max-width:900px){
  .gallery-dialog{max-height:90vh;border-radius:22px}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));padding:20px}
  .gallery-head{padding:22px 20px 16px}
  .gallery-head h3{font-size:22px}
  .gallery-foot{padding:16px 20px}
}
@media (max-width:620px){
  .gallery-modal{padding:14px}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;padding:16px}
  .gallery-foot{flex-direction:column;align-items:stretch;gap:12px}
  .gallery-foot span{text-align:center}
  .gallery-zoom{padding:20px}
  .product-actions{gap:10px}
  .product-more{padding:10px 14px}
}

/* ================================================================
   AJUSTES DA REVISÃO 06 — altura das capas, respiro na galeria
   e zoom que nunca estoura a tela
   ================================================================ */

/* --- Capa do card: quadro mais alto para as fotos verticais --- */
.product-visual{height:360px}
.product-visual img{padding:12px}

/* --- Galeria: mais respiro entre as miniaturas --- */
.gallery-grid{gap:18px;padding:26px 28px}
/* 3/4 é a proporção da maioria das fotos, então quase nada é cortado */
.gallery-item{aspect-ratio:3/4}

/* --- Zoom: limites em unidades absolutas, sem depender de % --- */
.gallery-zoom img{
  max-width:calc(100vw - 80px);
  max-height:calc(100vh - 80px);
  width:auto;height:auto;
  object-fit:contain;
}

@media (max-width:900px){
  .gallery-grid{gap:14px;padding:20px}
}
@media (max-width:620px){
  .product-visual{height:320px}
  .gallery-grid{gap:12px;padding:16px}
  .gallery-zoom img{max-width:calc(100vw - 40px);max-height:calc(100vh - 40px)}
}

/* ================================================================
   AJUSTES DA REVISÃO 07 — capas 1:1 e correção do modal
   ================================================================ */

/* --- Capa do card: as artes em img/capas/ são 1:1, então o quadro
       vira quadrado e a foto preenche sem sobrar nem cortar nada. --- */
.product-visual{height:auto;aspect-ratio:1/1;background:#0c0b34}
.product-visual:before{content:none}          /* fundo desfocado não é mais necessário */
.product-visual img{object-fit:cover;padding:0}

/* --- BUG: sem min-height:0 a linha 1fr do dialog estoura o max-height,
       o overflow-y nunca ativa e a grade sai espremida/cortada. --- */
.gallery-grid{
  min-height:0;
  gap:18px;
  padding:26px 28px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}
/* nenhuma miniatura é cortada: a foto inteira aparece dentro do quadro */
.gallery-item{aspect-ratio:3/4;background:#080920;padding:6px}
.gallery-item img{object-fit:contain;border-radius:12px}
.gallery-item:hover img{transform:scale(1.03)}

/* --- Zoom: flex simples, a imagem sempre cabe inteira --- */
.gallery-zoom{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:72px 40px 40px;
}
.gallery-zoom img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

@media (max-width:900px){
  .gallery-grid{gap:14px;padding:20px;grid-template-columns:repeat(auto-fill,minmax(155px,1fr))}
}
@media (max-width:620px){
  .gallery-grid{gap:12px;padding:16px;grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .gallery-zoom{padding:64px 16px 16px}
}

/* ================================================================
   AJUSTES DA REVISÃO 08 — miniaturas da galeria (correção definitiva)
   ----------------------------------------------------------------
   Bug: <button> não resolve height:100% de um <img> filho como uma div.
   A imagem assumia a altura natural (foto 9:16 = ~355px numa célula de
   267px), vazava da célula e cobria a de baixo. Ancorar a imagem por
   posicionamento absoluto elimina a dependência de altura percentual.
   ================================================================ */
.gallery-item{
  position:relative;
  display:block;
  padding:0;
  overflow:hidden;
  background:#080920;
}
.gallery-item img{
  position:absolute;
  top:6px;left:6px;
  width:calc(100% - 12px);
  height:calc(100% - 12px);
  object-fit:contain;
  border-radius:12px;
}

/* ================================================================
   REVISÃO 09 — altura de linha explícita na galeria
   ----------------------------------------------------------------
   aspect-ratio em grid item não alimenta o cálculo da linha auto:
   a linha ficava em 123px enquanto o item media 323px, e as fotos
   se sobrepunham. Com grid-auto-rows a linha tem tamanho definido
   e o item nunca ultrapassa a célula. object-fit:contain garante
   que nenhuma foto seja cortada, qualquer que seja a proporção.
   ================================================================ */
.gallery-grid{grid-auto-rows:300px}
.gallery-item{height:100%}

@media (max-width:900px){ .gallery-grid{grid-auto-rows:250px} }
@media (max-width:620px){ .gallery-grid{grid-auto-rows:200px} }

/* ================================================================
   REVISÃO 10 — DOBRA 01 com as artes de img/hero/
   ----------------------------------------------------------------
   Desktop (1920x900): a arte já traz a área navy à esquerda para o
   texto e a foto à direita, então a composição antiga de cards
   (.hero-showcase) sai de cena.
   Mobile (700x1200): foto no topo, navy sólido embaixo. O conteúdo
   recebe recuo superior para nunca cair sobre a foto.
   As duas artes usam o mesmo navy (#080161) como cor de fundo, então
   não existe emenda visível onde a imagem termina.
   ================================================================ */

.hero{background-color:#080161}
.hero:before{content:none}            /* a grade de linhas sujava a arte */
.hero-glow{display:none}

/* ---------- DESKTOP ---------- */
@media (min-width:901px){
  .hero{
    height:900px;
    min-height:900px;
    padding:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .hero-showcase{display:none}
  .hero-layout{
    grid-template-columns:1fr;
    min-height:auto;
    padding-bottom:0;
    align-content:center;
  }
  /* mantém o texto dentro da faixa navy da arte, longe da foto */
  .hero-copy{max-width:560px}
  .hero-marquee{position:absolute;left:0;bottom:0;width:100%;margin:0}
}

/* ---------- MOBILE ---------- */
@media (max-width:900px){
  .hero{
    min-height:auto;
    /* a foto ocupa os 43% superiores da arte (1200px de altura sobre
       700px de largura), ou seja 0,43 x 171,4vw ≈ 74vw. O recuo abaixo
       deixa o conteúdo começar depois disso, com folga. */
    padding-top:80vw;
  }
  .hero-showcase{display:none}
  .hero-copy{padding-top:0}
  .hero-layout{padding-bottom:56px}
}

/* Desktop estreito: com o corte lateral do cover, a faixa navy livre
   antes das pessoas fica menor. Reduz o bloco de texto para não invadir. */
@media (min-width:901px) and (max-width:1300px){
  .hero-copy{max-width:370px}
  .hero-title{font-size:clamp(44px,4.6vw,62px)}
  .hero-text{font-size:16px}
  .hero-proof{gap:26px}
}

/* ================================================================
   REVISÃO 11 — rodízio das 3 artes da dobra 01
   ----------------------------------------------------------------
   Três camadas empilhadas em crossfade. O enquadramento é o mesmo já
   definido na revisão 10: desktop cover/centro, mobile 100% no topo.
   As artes de mobile só são baixadas no mobile e vice-versa, porque
   cada url() vive dentro da sua media query.
   ================================================================ */
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.1s ease-in-out;
  background-repeat:no-repeat;
  background-color:#080161;
}
.hero-slide.is-active{opacity:1}

@media (min-width:901px){
  .hero-slide{background-position:center center;background-size:cover}
  .hero-slide[data-hero-slide="1"]{background-image:url('../img/hero/dobra-01-desktop.webp')}
  .hero-slide[data-hero-slide="2"]{background-image:url('../img/hero/dobra-02-desktop.webp')}
  .hero-slide[data-hero-slide="3"]{background-image:url('../img/hero/dobra-03-desktop.webp')}
}
@media (max-width:900px){
  .hero-slide{background-position:center top;background-size:100% auto}
  .hero-slide[data-hero-slide="1"]{background-image:url('../img/hero/dobra-01-mobile.webp')}
  .hero-slide[data-hero-slide="2"]{background-image:url('../img/hero/dobra-02-mobile.webp')}
  .hero-slide[data-hero-slide="3"]{background-image:url('../img/hero/dobra-03-mobile.webp')}
}
@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:none}
}

/* ================================================================
   REVISÃO 12 — cabeçalho no mobile como faixa acima da dobra 01
   ----------------------------------------------------------------
   No mobile o header deixa de flutuar sobre a arte: vira uma barra
   branca em fluxo normal, ocupando toda a largura, logo acima do
   hero. Assim a foto da dobra 01 aparece inteira, sem nada por cima.
   ================================================================ */
@media (max-width:900px){
  .site-header{
    position:relative;
    top:0;
    background:#fff;
    box-shadow:0 6px 24px rgba(8,6,79,.10);
  }
  /* o header é estático aqui, então esconder no scroll deixaria um buraco */
  .site-header.is-hidden{transform:none}

  .nav-shell{
    width:min(100% - 30px,1240px);
    height:64px;
    margin-inline:auto;
    padding:0 4px 0 6px;
    background:transparent;
    backdrop-filter:none;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .mobile-panel{top:70px;left:15px;right:15px}

  /* sem header sobreposto, o hero começa colado no topo */
  .hero{padding-top:80vw}
  html{scroll-padding-top:16px}
}
@media (max-width:620px){
  .site-header{top:0}
  .nav-shell{width:calc(100% - 24px);border-radius:0}
}

/* sorteio inicial da dobra 01 entra sem crossfade */
.hero-sem-transicao .hero-slide{transition:none}

/* ================================================================
   REVISÃO 13 — logo branco no topo do conteúdo (só mobile)
   ================================================================ */
.hero-logo{display:none}

@media (max-width:900px){
  .hero-logo{
    display:block;
    width:118px;
    height:auto;
    margin:0 0 22px;
  }
}
@media (max-width:620px){
  .hero-logo{width:104px;margin-bottom:18px}
}

/* ================================================================
   REVISÃO 14 — vídeo institucional, contatos dos diretores
   ================================================================ */

/* ---------- Vídeo no lugar das ilustrações (dobra "Sua marca...") ---------- */
.statement-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:38px;
  min-height:auto;
  overflow:visible;
}
.statement-visual:before{content:none}          /* o círculo decorativo saiu com as ilustrações */

.video-player,
.statement-visual iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.video-player{
  position:relative;
  padding:0;
  background:#0a0a2a;
  cursor:pointer;
}
.video-player img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.video-player:hover img{transform:scale(1.04)}

.video-play{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:78px;height:78px;
  border-radius:50%;
  background:var(--orange);
  color:#fff;
  display:grid;place-items:center;
  box-shadow:0 16px 40px rgba(250,105,9,.5);
  transition:.35s var(--ease);
}
.video-play svg{width:32px;height:32px;margin-left:4px}
.video-player:hover .video-play{transform:translate(-50%,-50%) scale(1.09);background:#ff7b23}

.video-legenda{
  position:absolute;
  left:18px;right:18px;bottom:16px;
  font-size:12px;font-weight:800;
  letter-spacing:.04em;
  color:rgba(255,255,255,.9);
  text-align:left;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}


/* ---------- Diretores no rodapé ---------- */
.footer-person{margin-top:16px}
.footer-person b{display:block;font:800 14px Sora;color:#fff}
.footer-person em{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);margin:3px 0 8px}
.footer-person a{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0;word-break:break-word}
.footer-person a svg{width:15px;height:15px;flex:none;fill:#25d366;stroke:none}

@media (max-width:900px){
  .statement-visual{padding:0 24px 30px}
  .video-play{width:64px;height:64px}
  .video-play svg{width:26px;height:26px}
}
@media (max-width:620px){
  .statement-visual{padding:0 18px 24px}
  .video-player,.statement-visual iframe{border-radius:16px}
  .video-play{width:56px;height:56px}
  .video-legenda{font-size:11px;left:14px;right:14px;bottom:12px}
}

/* e-mail cabe em uma linha no card do diretor */

/* Os cards só ficam lado a lado quando há largura real para o e-mail
   completo caber numa linha; abaixo disso eles empilham sozinhos. */
/* Cards empilhados: a coluna de texto tem ~600px, então o e-mail
   completo cabe numa linha em qualquer tela, sem raspar tamanho de fonte. */
.footer-person a[href^=mailto]{font-size:11.5px}

/* ================================================================
   REVISÃO 15 — dobra de endereço + mapa, dados legais no rodapé
   ================================================================ */
.address-section{background:var(--paper);padding:120px 0}
.address-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.address-copy .section-title{font-size:clamp(40px,4vw,60px)}
.address-copy>p{color:var(--muted);font-size:16px;line-height:1.75;max-width:460px;margin:20px 0 0}

.address-box{margin:32px 0 30px}
.address-item{display:flex;gap:16px;align-items:flex-start}
.address-icon{
  flex:none;width:50px;height:50px;border-radius:15px;
  background:rgba(250,105,9,.1);color:var(--orange);
  display:grid;place-items:center;
}
.address-icon svg{width:23px;height:23px}
.address-item small{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:6px}
.address-item strong{display:block;font:800 19px Sora;letter-spacing:-.02em}
.address-item p{margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.6}

.address-map{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(8,6,79,.1);
  box-shadow:var(--shadow);
  background:#e8e8ef;
  aspect-ratio:16/11;
}
.address-map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.92)}

/* ---------- Endereço e CNPJ no rodapé ---------- */
.footer-endereco{margin-top:26px}
.footer-endereco strong{display:block;font:800 13px Sora;color:#fff;margin-bottom:8px}
.footer-endereco a{display:block;font-size:13px;line-height:1.65;color:rgba(255,255,255,.62);transition:color .25s}
.footer-endereco a:hover{color:#fff}
.footer-cnpj{display:block;margin-top:12px;font-size:12px;font-weight:700;color:rgba(255,255,255,.45);letter-spacing:.02em}

@media (max-width:900px){
  .address-section{padding:84px 0}
  .address-layout{grid-template-columns:1fr;gap:34px}
  .address-map{aspect-ratio:16/12}
}
@media (max-width:620px){
  .address-section{padding:70px 0}
  .address-map{aspect-ratio:4/5}
  .address-item strong{font-size:17px}
}

/* ================================================================
   REVISÃO 16 — o bloco pinado nunca pode ser mais alto que a tela
   ----------------------------------------------------------------
   Medido: em telas baixas o .process-pin passava da altura da janela
   (+20px num MacBook Air, +120px numa janela pequena). O ScrollTrigger
   fixa o topo, então a sobra ficava cortada embaixo — era a copy sendo
   comida pela dobra seguinte. Aqui o conteúdo encolhe conforme a
   ALTURA da janela, não a largura.
   ================================================================ */
@media (min-width:901px) and (max-height:860px){
  .process-pin{padding:66px 0}
  .process-stage{padding:38px 42px 32px;min-height:auto}
  .process-cards{height:340px;margin-top:26px}
  .process-marks{top:39px}
  .process-intro h2{font-size:clamp(38px,3.6vw,54px);margin:16px 0 18px}
  .process-intro>p{font-size:15px}
  .process-counter{margin-top:26px}
  .process-counter span{font-size:56px}
  .process-card{padding:24px 26px}
  .process-card h3{font-size:clamp(30px,2.8vw,44px)}
  .process-card small{margin:16px 0 9px}
  .process-card ul{margin-top:18px}
}
@media (min-width:901px) and (max-height:720px){
  .process-pin{padding:46px 0}
  .process-stage{padding:30px 34px 26px}
  .process-cards{height:288px;margin-top:20px}
  .process-marks{top:31px}
  .process-intro h2{font-size:clamp(32px,3vw,44px);margin:12px 0 14px}
  .process-intro>p{font-size:14px;line-height:1.65}
  .process-counter{margin-top:18px}
  .process-counter span{font-size:44px}
  .process-card{padding:20px 22px}
  .process-card h3{font-size:32px;margin-bottom:10px}
  .process-card p{font-size:14px;line-height:1.6}
  .process-card ul{margin-top:14px}
  .process-symbol{width:52px;height:52px}
  .process-symbol svg{width:26px;height:26px}
}

/* ================================================================
   REVISÃO 18 — LINHA DO TEMPO DO PROCESSO REFEITA
   ----------------------------------------------------------------
   position:sticky no lugar do pin de biblioteca. O bloco fica preso
   sozinho, sem espaçador e sem disputar o scroll com o Lenis.
   A troca de card é feita por classe + transição de CSS, então nunca
   fica um estado intermediário travado.
   ================================================================ */
.process-section{background:#fff;position:relative;overflow:clip}

/* a trilha é o que dá o comprimento da rolagem: uma tela por etapa */
.process-track{position:relative;height:400vh}

.process-pin{
  position:sticky;
  top:0;
  height:100vh;
  min-height:0;
  display:flex;
  align-items:center;
  padding:0;
  overflow:hidden;
}
.process-layout{width:min(1240px,calc(100% - 48px));margin-inline:auto}

/* cards trocam por classe, com transição própria */
.process-cards{position:relative}
.process-card{
  position:absolute;inset:0;
  opacity:0;
  transform:translateY(38px) scale(.975);
  pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  will-change:opacity,transform;
}
.process-card.active{opacity:1;transform:none;pointer-events:auto}

.process-progress{transform-origin:left center;transition:transform .25s linear}
.process-marks i{transition:border-color .35s,box-shadow .35s}

/* ---------- MOBILE: sem sticky, os 4 cards empilhados ---------- */
@media (max-width:900px){
  .process-track{height:auto}
  .process-pin{position:static;height:auto;padding:84px 0;display:block}
  .process-cards{position:static;height:auto;display:grid;gap:16px;margin-top:26px}
  .process-card{
    position:static;inset:auto;
    opacity:1;transform:none;pointer-events:auto;
    min-height:0;
  }
  .process-rail,.process-marks,.process-counter{display:none}
  .process-stage{min-height:0;padding:26px 22px}
}

/* ================================================================
   REVISÃO 19 — acertos apontados nos prints
   ================================================================ */

/* 1) Logo do mobile um pouco maior */
@media (max-width:900px){ .hero-logo{width:138px;margin-bottom:24px} }
@media (max-width:620px){ .hero-logo{width:124px;margin-bottom:20px} }

/* 2) Galeria: overflow-y:auto faz o eixo X virar "auto" também, e qualquer
      sobra de 1px cria a barra horizontal. Trava o eixo X. */
.gallery-grid{overflow-x:hidden}
.gallery-dialog{max-width:100%}

/* 3) Respiro entre o botão e a capa do vídeo no mobile */
@media (max-width:900px){ .statement-visual{padding:40px 24px 34px} }
@media (max-width:620px){ .statement-visual{padding:34px 18px 28px} }

/* 4) Números da dobra 01 organizados em 3 colunas com divisórias */
.hero-proof{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:44px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16);
  flex-wrap:nowrap;
}
.hero-proof div{position:relative;display:block;padding-right:16px}
.hero-proof div + div{padding-left:20px}
.hero-proof div + div:before{
  content:"";
  position:absolute;left:0;top:1px;bottom:1px;
  width:1px;background:rgba(255,255,255,.16);
}
.hero-proof strong{display:block;font:800 22px/1 Sora;letter-spacing:-.03em;white-space:nowrap}
.hero-proof span{display:block;margin-top:6px;font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.55)}

@media (min-width:901px) and (max-width:1300px){
  .hero-proof strong{font-size:18px}
  .hero-proof span{font-size:10.5px}
  .hero-proof div{padding-right:10px}
  .hero-proof div + div{padding-left:13px}
}
@media (max-width:620px){
  .hero-proof{grid-template-columns:repeat(3,1fr);margin-top:32px;padding-top:22px}
  .hero-proof strong{font-size:17px}
  .hero-proof span{font-size:10px;margin-top:5px}
  .hero-proof div{padding-right:8px}
  .hero-proof div + div{padding-left:11px}
}

/* 5) O card com botão passa a ter o mesmo layout dos outros no mobile:
      ícone em cima, texto abaixo, botão por último. */
@media (max-width:900px){
  .sector-wide{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }
  .sector-wide .sector-icon{margin:0 0 28px}
  .sector-wide > div:not(.sector-icon){width:100%}
  .sector-wide .round-link{margin-top:20px;grid-column:auto}
}

/* ================================================================
   REVISÃO 20 — dobra do formulário redesenhada
   ================================================================ */
.contact-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:start}

/* ---------- lado esquerdo ---------- */
.contact-beneficios{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:12px}
.contact-beneficios li{
  display:flex;align-items:center;gap:11px;
  font-size:14px;font-weight:700;
  color:rgba(255,255,255,.78);
}
.contact-beneficios svg{width:17px;height:17px;flex:none;color:var(--orange)}

/* ---------- formulário ---------- */
.contact-form{
  background:#fff;
  border-radius:30px;
  padding:36px 34px 30px;
  box-shadow:0 40px 90px rgba(0,0,0,.28);
  display:grid;
  gap:16px;
}
.form-head{margin-bottom:4px}
.form-selo{
  display:inline-block;
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);
  background:rgba(250,105,9,.1);
  padding:6px 12px;border-radius:999px;
}
.form-head h3{font:800 25px Sora;letter-spacing:-.04em;margin:14px 0 0;color:var(--navy)}

.campo{display:grid;gap:7px}
.campo>span{font-size:12px;font-weight:800;color:#5b5f72;letter-spacing:.01em}
.campo input,.campo textarea{
  width:100%;
  border:1.5px solid #e4e5ee;
  background:#fafafc;
  border-radius:14px;
  padding:14px 16px;
  font-size:14px;
  color:var(--ink);
  transition:border-color .28s,background .28s,box-shadow .28s;
}
.campo textarea{min-height:118px;resize:vertical;line-height:1.6}
.campo input::placeholder,.campo textarea::placeholder{color:#a3a6b6}
.campo input:focus,.campo textarea:focus{
  outline:none;
  border-color:var(--orange);
  background:#fff;
  box-shadow:0 0 0 4px rgba(250,105,9,.13);
}
.form-nota{font-size:11.5px;line-height:1.55;color:#8b8e9e;text-align:center;margin-top:2px}

/* ---------- botão pulsante com gradiente em movimento ---------- */
@keyframes gradienteAndando{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}
@keyframes pulsoLuz{
  0%,100%{box-shadow:0 14px 34px rgba(250,105,9,.32),0 0 0 0 rgba(250,105,9,.42)}
  55%{box-shadow:0 20px 46px rgba(250,105,9,.46),0 0 0 15px rgba(250,105,9,0)}
}
.botao-pulsante{
  width:100%;
  height:58px;
  border:0;
  color:#fff;
  cursor:pointer;
  background:linear-gradient(90deg,#fa6909,#ff9f60,#ff7b23,#ffb173,#fa6909);
  background-size:300% 100%;
  animation:gradienteAndando 5s linear infinite, pulsoLuz 2.8s ease-in-out infinite;
  margin-top:6px;
}
.botao-pulsante:hover{animation-duration:2.2s,2.8s;transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
  .botao-pulsante{animation:none;background-position:0 50%}
}

/* ---------- faixa da diretoria ---------- */
.contact-diretoria{margin-top:56px;padding-top:38px;border-top:1px solid rgba(255,255,255,.16)}
.diretoria-titulo{
  display:block;
  font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:20px;
}
.diretoria-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.diretor{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:16px;
  padding:20px 22px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  transition:.4s var(--ease);
}
.diretor:hover{background:rgba(255,255,255,.09);border-color:rgba(250,105,9,.45);transform:translateY(-3px)}

.diretor-foto{
  width:50px;height:50px;border-radius:16px;
  background:linear-gradient(145deg,var(--orange),#ff9f60);
  display:grid;place-items:center;
  font:800 15px Sora;color:#fff;letter-spacing:.02em;
  box-shadow:0 10px 24px rgba(250,105,9,.32);
}
.diretor-id strong{display:block;font:800 16px Sora;letter-spacing:-.02em;color:#fff}
.diretor-id small{display:block;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#ff9a58;margin-top:4px}

.diretor-acoes{grid-column:1/3;display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.acao{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;
  font:800 12px Manrope;
  border:1px solid transparent;
  transition:.3s var(--ease);
  min-width:0;
}
.acao svg{width:15px;height:15px;flex:none}
.acao span{white-space:nowrap}
.acao-zap{background:rgba(37,211,102,.13);border-color:rgba(37,211,102,.35);color:#fff}
.acao-zap svg{fill:#25d366;stroke:none;transition:fill .3s}
.acao-zap:hover{background:#25d366;border-color:#25d366}
.acao-zap:hover svg{fill:#fff}
.acao-mail{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.72);font-weight:700}
.acao-mail svg{color:#ff9a58}
.acao-mail:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---------- rodapé: assinatura centralizada ---------- */
.footer-bottom{justify-content:center;text-align:center}

@media (max-width:1100px){
  .contact-layout{gap:44px}
}
@media (max-width:900px){
  .contact-layout{grid-template-columns:1fr;gap:36px}
  .diretoria-grid{grid-template-columns:1fr}
  .contact-diretoria{margin-top:40px;padding-top:30px}
}
@media (max-width:620px){
  .contact-form{padding:26px 22px 24px;border-radius:24px}
  .form-head h3{font-size:21px}
  .acao span{white-space:normal;word-break:break-word}
  .acao-mail{font-size:11.5px}
  .diretor{padding:18px}
}

/* ================================================================
   REVISÃO 21 — card de redes sociais + faixa do outdoor
   ================================================================ */

/* ---------- Card do Instagram (lugar do antigo "Expor melhor") ---------- */
.sector-social{
  position:relative;
  overflow:hidden;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  background:#0a0930;
  border-color:rgba(255,255,255,.12);
}
/* anula o véu branco e a arte que serviam ao layout antigo */
.sector-social:after{content:none}

.social-fundo{position:absolute;inset:0;z-index:0}
.social-fundo img{width:100%;height:100%;object-fit:cover;display:block}
/* escurece topo e base para o texto branco e o botão terem contraste */
.social-fundo:after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,5,40,.92) 0%,rgba(6,5,40,.55) 32%,rgba(6,5,40,.15) 50%,rgba(6,5,40,.75) 82%,rgba(6,5,40,.94) 100%);
}

.social-topo,
.social-botao{position:relative;z-index:2}

.social-arroba{
  display:inline-block;
  font-size:11px;font-weight:800;letter-spacing:.14em;
  color:#ff9a58;
  margin-bottom:14px;
}
.sector-social h3{
  font:700 clamp(28px,2.6vw,38px) Sora;
  letter-spacing:-.04em;
  line-height:1.04;
  color:#fff;
  margin:0 0 12px;
  max-width:15ch;
}
.sector-social p{
  color:rgba(255,255,255,.78);
  font-size:14px;
  line-height:1.65;
  margin:0;
  max-width:34ch;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}

.social-botao{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:11px;
  height:52px;
  padding:0 22px;
  border-radius:999px;
  font:800 13px Manrope;
  color:#fff;
  background:linear-gradient(95deg,#fa6909,#e1306c 55%,#8134af);
  box-shadow:0 14px 34px rgba(225,48,108,.4);
  transition:.35s var(--ease);
}
.social-botao svg[data-solid]{width:19px;height:19px;fill:#fff;stroke:none;flex:none}
.social-botao .social-seta{width:17px;height:17px;transition:transform .35s var(--ease)}
.social-botao:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(225,48,108,.52)}
.social-botao:hover .social-seta{transform:translate(3px,-3px)}

/* ---------- Faixa do outdoor ---------- */
.outdoor-section{background:var(--paper);padding:0 0 96px}
.outdoor-wrap{
  width:min(1280px,calc(100% - 48px));
  margin-inline:auto;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  line-height:0;
}
.outdoor-wrap img{width:100%;height:auto;display:block}

@media (max-width:900px){
  .sector-social{padding:28px}
  .sector-social h3{max-width:none}
  .outdoor-section{padding-bottom:70px}
  .outdoor-wrap{width:calc(100% - 30px);border-radius:20px}
}
@media (max-width:620px){
  .sector-social{padding:24px;gap:20px;min-height:520px}
  .sector-social p{max-width:none}
  .social-botao{height:48px;padding:0 18px;font-size:12px}
  .outdoor-section{padding-bottom:56px}
  .outdoor-wrap{width:calc(100% - 24px);border-radius:16px}
}

/* ================================================================
   REVISÃO 22 — card do Instagram em 3:4 sem véu, outdoor com respiro
   ================================================================ */

/* A arte do mockup é 1086x1448, ou seja 3:4 exato. Com o card na mesma
   proporção, o object-fit:cover não corta um pixel — e a faixa escura
   que a própria arte já tem no topo vira o espaço do texto. */
@media (min-width:901px){
  .sector-bento{grid-template-rows:auto auto}
}
.sector-social{aspect-ratio:3/4;padding:38px 34px 32px}

/* sem camada preta por cima: o contraste vem da própria arte */
.social-fundo:after{content:none}

/* o texto ganha um leve realce só para não depender do fundo */
.social-topo{max-width:none}
.social-arroba{
  margin-bottom:12px;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.sector-social h3{
  font-size:clamp(30px,2.9vw,42px);
  line-height:1;
  margin:0 0 14px;
  max-width:13ch;
  text-shadow:0 3px 18px rgba(0,0,0,.55);
}
.sector-social p{
  font-size:15px;
  line-height:1.6;
  max-width:28ch;
  color:rgba(255,255,255,.86);
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}

/* ---------- Outdoor: fundo branco e respiro em cima ---------- */
.outdoor-section{background:#fff;padding:96px 0}

@media (max-width:900px){
  .sector-social{aspect-ratio:3/4;padding:30px 26px 28px}
  .sector-social h3{max-width:14ch}
  .outdoor-section{padding:70px 0}
}
@media (max-width:620px){
  .sector-social{aspect-ratio:3/4;min-height:0;padding:26px 22px 24px}
  .sector-social h3{font-size:29px;max-width:12ch}
  .sector-social p{font-size:14px;max-width:30ch}
  .outdoor-section{padding:52px 0}
}

/* ================================================================
   REVISÃO 23 — texto do card social, cards vizinhos e PORTFÓLIO
   ================================================================ */

/* ---------- card do Instagram: descrição em no máximo 2 linhas ---------- */
.sector-social p{max-width:44ch}
.sector-social h3{max-width:none}

/* ---------- cards vizinhos: fonte maior e conteúdo distribuído ---------- */
@media (min-width:901px){
  .sector-card:not(.sector-large):not(.sector-wide){
    display:flex;
    flex-direction:column;
  }
  /* conteúdo centralizado: sem vão no meio do card */
  .sector-card:not(.sector-large):not(.sector-wide){justify-content:center}
  .sector-card:not(.sector-large) h3{font-size:31px;line-height:1.02;margin:15px 0 12px}
  .sector-card:not(.sector-large) p{font-size:15.5px;line-height:1.6}
  .sector-wide h3{font-size:31px}
  .sector-wide p{font-size:15.5px}
  .sector-wide{padding:34px 36px}
}

/* ================================================================
   PORTFÓLIO — layout novo
   ----------------------------------------------------------------
   Quatro cartões verticais escalonados (os pares descem), cada um com
   numeral fantasma, etiqueta, título e um traço laranja que cresce no
   hover junto com o zoom da foto. As fotos são retrato, então o
   cartão em 3:4 corta muito menos que a caixa fixa anterior.
   ================================================================ */
.portfolio-section{background:#080914;color:#fff;overflow:hidden}

.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:none;
  gap:20px;
  align-items:start;
}
.portfolio-card{
  position:relative;
  aspect-ratio:3/4;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:#12131f;
  transition:transform .6s var(--ease),border-color .45s,box-shadow .5s;
}
.portfolio-card:nth-child(even){margin-top:56px}
.portfolio-card:hover{
  transform:translateY(-10px);
  border-color:rgba(250,105,9,.55);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}

.portfolio-mock{position:absolute;inset:0;overflow:hidden}
.portfolio-mock img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .9s var(--ease);
}
.portfolio-card:hover .portfolio-mock img{transform:scale(1.08)}
.portfolio-mock:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,20,.62) 0%,rgba(8,9,20,.10) 26%,rgba(8,9,20,.58) 62%,rgba(8,9,20,.95) 100%);
  transition:opacity .5s;
}
.portfolio-card:hover .portfolio-mock:after{opacity:.88}

.portfolio-num{
  position:absolute;top:16px;right:20px;z-index:3;
  font:800 42px/1 Sora;
  letter-spacing:-.06em;
  color:rgba(255,255,255,.34);
  text-shadow:0 2px 14px rgba(0,0,0,.6);
  transition:color .5s var(--ease),transform .5s var(--ease);
}
.portfolio-card:hover .portfolio-num{color:rgba(250,105,9,.9);transform:translateY(-3px)}

.portfolio-meta{
  position:absolute;inset:auto 0 0;
  z-index:3;
  padding:0 22px 22px;
  background:none;
}
.portfolio-tag{display:block;font-size:10px;font-weight:800;letter-spacing:.15em;color:#ff9b5d;margin-bottom:9px}
.portfolio-meta h3{font:700 20px Sora;letter-spacing:-.03em;line-height:1.18;margin:0}
.portfolio-linha{
  display:block;height:2px;width:26px;
  background:var(--orange);
  border-radius:2px;
  margin-top:14px;
  transition:width .55s var(--ease);
}
.portfolio-card:hover .portfolio-linha{width:66px}

@media (max-width:1100px){
  .portfolio-grid{grid-template-columns:1fr 1fr;gap:18px}
  .portfolio-card:nth-child(even){margin-top:0}
  .portfolio-card:nth-child(2),
  .portfolio-card:nth-child(4){margin-top:44px}
}
@media (max-width:620px){
  .portfolio-grid{grid-template-columns:1fr;gap:16px}
  .portfolio-card{aspect-ratio:4/5;margin-top:0 !important}
  .portfolio-num{font-size:34px;top:14px;right:16px}
  .portfolio-meta{padding:0 18px 18px}
  .portfolio-meta h3{font-size:19px}
}