/* ========================================================================== TOKENS — derivados do design system (preto e dourado a partir do logotipo) ========================================================================== */ :root{ /* marca */ --gold: #C8A45D; /* ouro do logotipo */ --gold-deep: #8F6B2C; /* ouro escuro — texto dourado sobre branco (AA) */ --gold-light: #E6CF95; /* ouro claro — texto dourado sobre preto */ --gold-soft: #F7F0E1; /* superfície de ícone sobre branco */ --gold-overlay: rgba(200,164,93,.86); /* tinta */ --ink-900: #0D0D0F; --ink-800: #17181C; --ink-700: #23252B; --ink-600: #4C5058; /* neutros */ --white: #FFFFFF; --n-50: #FAF9F6; --n-100: #F3F1EC; --n-200: #E6E2D9; --n-300: #D3CEC3; --n-500: #8A8E96; /* texto */ --t-primary: #17181C; --t-secondary: #5B5F66; --t-inverse: #FFFFFF; --t-muted-inv: #C9CBD0; /* overlays */ --ov-hero: rgba(8,8,10,.70); --ov-dark: rgba(8,8,10,.84); /* tipografia */ --f-display: "Montserrat", "Segoe UI", Arial, sans-serif; --f-body: "Montserrat", "Segoe UI", Arial, sans-serif; /* escala */ --fs-eyebrow: .6875rem; /* 11px */ --fs-nav: .8125rem; /* 13px */ --fs-sm: .8125rem; --fs-body: 1rem; /* 16px */ --fs-card: 1.125rem; --fs-h4: 1.25rem; --fs-h3: 1.5rem; --fs-h2: 2.125rem; --fs-h1: 3.25rem; /* espaço */ --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s8:64px;--s10:80px;--s12:96px;--s15:120px; /* layout */ --container: 1180px; --pad-x: 32px; --gutter: 24px; --section-y: 96px; --r-sm: 2px; --r-md: 4px; --r-pill: 999px; --sh-card: 0 10px 30px rgba(13,13,15,.08); --sh-float: 0 18px 48px rgba(13,13,15,.16); --m-fast: 160ms ease; --m-base: 240ms ease; } /* ========================================================================== BASE ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--f-body);font-size:var(--fs-body);line-height:1.5;color:var(--t-primary);background:var(--white)} h1,h2,h3,h4{font-family:var(--f-display);margin:0;line-height:1.15;letter-spacing:-.01em} h1{font-size:var(--fs-h1);font-weight:800} h2{font-size:var(--fs-h2);font-weight:800} h3{font-size:var(--fs-h3);font-weight:700} h4{font-size:var(--fs-h4);font-weight:700} p{margin:0 0 var(--s2)} p:last-child{margin-bottom:0} a{color:inherit;text-decoration:none} ul{margin:0;padding:0;list-style:none} img,svg{display:block;max-width:100%} address{font-style:normal} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} .container{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)} .section{padding:var(--section-y) 0} .section--alt{background:var(--n-50)} .section--dark{background:var(--ink-900);color:var(--t-inverse)} .grid{display:grid;gap:var(--gutter)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} :focus-visible{outline:3px solid var(--gold);outline-offset:3px} .section--dark :focus-visible{outline-color:var(--gold-light)} /* ícones */ .icon{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none} .icon--lg{width:40px;height:40px} .icon-badge{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--r-pill);background:var(--gold-soft);color:var(--gold-deep)} /* cabeçalhos de seção */ .section-head{max-width:640px;margin:0 auto var(--s5);text-align:center} .section-head--left{margin-left:0;text-align:left} .eyebrow{display:block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:var(--s2)} .section--dark .eyebrow{color:var(--gold-light)} .section-head p{color:var(--t-secondary);margin-top:var(--s2)} .section--dark .section-head p{color:var(--t-muted-inv)} /* botões */ .btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;height:46px;padding:0 24px;border-radius:var(--r-sm);font-weight:600;font-size:var(--fs-nav);letter-spacing:.02em;text-transform:uppercase;transition:background var(--m-fast),color var(--m-fast),border-color var(--m-fast)} .btn--primary{background:var(--gold);color:var(--ink-900)} .btn--primary:hover{background:var(--gold-light)} .btn--dark{background:var(--ink-900);color:var(--t-inverse)} .btn--dark:hover{background:var(--ink-700)} .btn--outline{border:1px solid var(--white);color:var(--t-inverse)} .btn--outline:hover{background:var(--white);color:var(--ink-900)} .btn--outline-dark{border:1px solid var(--ink-900);color:var(--ink-900)} .btn--outline-dark:hover{background:var(--ink-900);color:var(--t-inverse)} .link-more{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--gold-deep);border-bottom:2px solid transparent} .link-more:hover{border-color:var(--gold-deep)} .section--dark .link-more{color:var(--gold-light)} /* placeholders de foto — substituir por com src, width, height e alt */ .media{position:relative;overflow:hidden;background:var(--ink-800);color:var(--t-muted-inv)} .media::before{content:"";position:absolute;inset:0;background: repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px), linear-gradient(180deg,#2B2D33 0%,#141518 100%)} .media__label{position:absolute;left:16px;bottom:14px;font-size:var(--fs-sm);font-weight:500;color:var(--gold-light);opacity:.9} .media--4x3{aspect-ratio:4/3} .media--3x4{aspect-ratio:3/4} .media--16x10{aspect-ratio:16/10} .media--tall{aspect-ratio:3/4} /* ========================================================================== BARRA DE UTILIDADE + HEADER ========================================================================== */ .header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--n-200);box-shadow:0 4px 16px rgba(13,13,15,.06)} .header .container{height:84px;display:flex;align-items:center;justify-content:space-between;gap:var(--s3)} .brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink-900)} .brand__mark{width:44px;height:44px} .nav{display:flex;align-items:center;gap:var(--s3)} .nav__list{display:flex;gap:6px} .nav__list a{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:9px 12px;border:2px solid transparent;border-radius:8px;transition:background var(--m-fast),border-color var(--m-fast),box-shadow var(--m-fast)} .nav__list .icon{width:16px;height:16px;color:var(--gold-deep)} .nav__list a:hover,.nav__list a[aria-current="page"]{background:var(--gold-soft);border-color:var(--gold)} .nav__toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--n-300);border-radius:var(--r-md)} .nav__toggle .icon--close{display:none} .nav__toggle[aria-expanded="true"] .icon--menu{display:none} .nav__toggle[aria-expanded="true"] .icon--close{display:block} /* ========================================================================== HERO ========================================================================== */ .hero{position:relative;min-height:600px;display:flex;align-items:center;color:var(--t-inverse);background:var(--ink-900);overflow:hidden;isolation:isolate} .hero__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:72% center} .hero__bg{position:absolute;inset:0;z-index:-3;background: radial-gradient(1200px 600px at 80% 40%,rgba(200,164,93,.12),transparent 60%), repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 16px), linear-gradient(180deg,#1E1F24 0%,#0D0D0F 100%)} .hero__overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,8,10,.86) 0%,rgba(8,8,10,.72) 42%,rgba(8,8,10,.38) 70%,rgba(8,8,10,.22) 100%)} .hero .container{position:relative;padding-top:var(--s12);padding-bottom:var(--s8);width:100%} .hero__content{max-width:720px;margin-left:clamp(0px,6vw,96px)} .hero__eyebrow{display:flex;align-items:center;gap:12px;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);margin-bottom:var(--s3)} .hero__eyebrow::before{content:"";width:22px;height:2px;background:var(--gold)} .hero__content h1{font-family:var(--f-display);font-weight:700;font-size:clamp(2rem,3.6vw,3rem);line-height:1.12;letter-spacing:-.02em;max-width:22ch;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35)} .hero__content p{font-size:1.0625rem;line-height:1.6;max-width:46ch;color:var(--t-muted-inv);margin:var(--s3) 0 var(--s5)} .hero__actions{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--s4)} .hero__actions .btn{flex:none;white-space:nowrap} .hero__wa{flex:1 1 auto;min-width:0} .btn--pill{border-radius:var(--r-pill);height:48px;padding:0 26px;text-transform:none;letter-spacing:0;font-size:.9375rem} .hero__wa{display:inline-flex;align-items:center;gap:14px;color:var(--t-inverse)} .hero__avatar{position:relative;flex:none;width:48px;height:48px} .hero__avatar img{width:100%;height:100%;border-radius:var(--r-pill);object-fit:cover;border:1px solid rgba(255,255,255,.55);box-shadow:0 4px 14px rgba(0,0,0,.45)} .hero__wa:hover .hero__avatar img{border-color:var(--gold-light)} .hero__wa strong{display:block;font-size:.9375rem;font-weight:600;line-height:1.2;white-space:nowrap} .hero__wa span{display:block;font-size:var(--fs-sm);color:var(--t-muted-inv);margin-top:2px;white-space:nowrap} .hero__facts{display:grid;grid-template-columns:repeat(2,max-content);gap:12px var(--s5);margin-top:var(--s5)} .hero__facts li{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--t-muted-inv)} .hero__facts .icon{color:var(--gold-light);width:16px;height:16px} @media (min-width:1600px){ .hero__content{max-width:880px} .hero__content h1{font-size:3.4rem;max-width:21ch} .hero__content p{max-width:54ch;font-size:1.125rem} } /* ========================================================================== DESTAQUES (cartões sobre a borda do hero) ========================================================================== */ .highlights{background:var(--white);padding:var(--s10) 0} .highlights__grid{grid-template-columns:repeat(4,1fr)} .card{background:var(--white);padding:30px 26px;box-shadow:var(--sh-card);border-radius:var(--r-md);display:flex;flex-direction:column;gap:var(--s2)} .card h3{font-size:var(--fs-card);font-family:var(--f-body);font-weight:700;line-height:1.3} .card p{font-size:var(--fs-sm);color:var(--t-secondary)} .card .link-more{margin-top:auto;font-size:var(--fs-sm)} .card--featured{background:var(--ink-900);color:var(--t-inverse)} .card--featured p{color:var(--t-muted-inv)} .card--featured .icon-badge{background:rgba(200,164,93,.18);color:var(--gold-light)} .card--featured .link-more{color:var(--gold-light)} /* ========================================================================== SOBRE (mídia 5 / conteúdo 7) ========================================================================== */ .about{grid-template-columns:4fr 8fr;align-items:start} .about__photo{margin:0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-card)} .about__photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top} /* o h2 global tem margin:0 e este bloco não repunha nenhuma: o título ficava colado no parágrafo, medido em 0px de folga */ .about__content h2{margin-bottom:var(--s3)} .about__content p{color:var(--t-secondary)} .about__cred{margin-top:14px;display:flex;flex-direction:column;gap:2px} .about__cred strong{font-family:var(--f-display);font-size:1.0625rem;font-weight:700} .about__cred span{font-size:var(--fs-sm);color:var(--t-secondary)} .feature-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:var(--s4) 0} .feature-list li{display:flex;gap:14px} .feature-list .icon{color:var(--gold-deep);width:26px;height:26px;margin-top:2px} .feature-list strong{display:block;font-family:var(--f-display);font-size:1.25rem;font-weight:700} .feature-list span{font-size:var(--fs-sm);color:var(--t-secondary)} /* ========================================================================== FAIXA DE NÚMEROS ========================================================================== */ .stats{background:var(--ink-900);color:var(--t-inverse);padding:0 0 var(--s4);position:relative;overflow:hidden;margin-top:-1px} .stats::before{display:none} .stats__grid{position:relative;grid-template-columns:repeat(4,1fr);gap:var(--s5)} .stat{background:transparent;border:0;border-top:2px solid var(--gold);padding:20px 0 0;border-radius:0;display:flex;gap:14px;align-items:center} .stat .icon-badge{width:40px;height:40px;background:rgba(200,164,93,.16);color:var(--gold-light);flex:none;border:0;box-shadow:none} .stat strong{display:block;font-family:var(--f-display);font-size:1.625rem;font-weight:800;line-height:1;color:var(--gold-light)} .stat span{font-size:var(--fs-sm);color:var(--t-muted-inv)} /* ========================================================================== PRODUTOS (cartões com imagem) ========================================================================== */ .products__grid{grid-template-columns:repeat(3,1fr)} .pcard{background:var(--white);box-shadow:var(--sh-card);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column} .pcard__body{padding:26px;display:flex;flex-direction:column;gap:12px;border-top:3px solid var(--gold)} .pcard__body h3{font-size:var(--fs-h4)} .pcard__body p{font-size:var(--fs-sm);color:var(--t-secondary)} .pcard__meta{display:flex;flex-wrap:wrap;gap:8px} .pcard__meta li{font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);background:var(--gold-soft);color:var(--gold-deep)} .pcard--wide{grid-column:span 1} .pcard .link-more{margin-top:auto;font-size:var(--fs-sm)} /* ========================================================================== CONFORMIDADE (imagem 6 / conteúdo 6) ========================================================================== */ /* alinhado pelo topo: centralizado, a imagem flutuava no meio de uma lista alta e abria um vão vazio acima dela. O h2 global tem margin:0 e este bloco não repunha nenhuma, então o título ficava colado no parágrafo. */ .compliance{grid-template-columns:1fr 1fr;align-items:start} .compliance__content h2{margin-bottom:var(--s3)} .compliance__content p{color:var(--t-secondary)} .check-list{margin:var(--s4) 0;display:grid;gap:14px} .check-list li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:var(--n-50);border-left:3px solid var(--gold);border-radius:0 var(--r-md) var(--r-md) 0} .check-list .icon{color:var(--gold-deep);margin-top:2px} .check-list strong{display:block} .check-list span{font-size:var(--fs-sm);color:var(--t-secondary)} .compliance__badge{display:inline-flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid var(--n-200);border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:600} .compliance__badge .icon{color:var(--gold-deep)} /* ========================================================================== FAIXA "EM CAMPO" ========================================================================== */ .field{position:relative;min-height:340px;display:flex;align-items:center;text-align:center;color:var(--t-inverse);background:var(--ink-800);overflow:hidden;isolation:isolate} .field__bg{position:absolute;inset:0;z-index:-2;background: radial-gradient(900px 400px at 50% 120%,rgba(200,164,93,.18),transparent 60%), repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 16px), linear-gradient(180deg,#1A1B1F,#0D0D0F)} .field__overlay{position:absolute;inset:0;z-index:-1;background:var(--ov-dark)} .field .container{padding-top:var(--s8);padding-bottom:var(--s8)} .field__play{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;border:2px solid var(--white);border-radius:var(--r-pill);margin-bottom:var(--s3);transition:background var(--m-fast),color var(--m-fast)} .field__play:hover{background:var(--gold);border-color:var(--gold);color:var(--ink-900)} .field h2{max-width:22ch;margin:0 auto} .field p{color:var(--t-muted-inv);margin-top:var(--s2)} /* ========================================================================== SEGMENTOS (intro 3 / cartões altos) ========================================================================== */ .segments{grid-template-columns:repeat(3,1fr);align-items:stretch} .scard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px;border-radius:var(--r-md);overflow:hidden;color:var(--t-inverse);background:var(--ink-800)} .scard .media{position:absolute;inset:0;aspect-ratio:auto} .scard__body{position:relative;padding:28px;background:linear-gradient(180deg,rgba(13,13,15,0) 0%,rgba(13,13,15,.92) 40%)} .scard__body h3{margin-bottom:8px} .scard__body p{font-size:var(--fs-sm);color:var(--t-muted-inv);max-width:40ch} .scard__body .link-more{margin-top:12px;font-size:var(--fs-sm);color:var(--gold-light)} .scard__tag{display:inline-block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);margin-bottom:10px} /* ========================================================================== DEPOIMENTOS ========================================================================== */ .testimonials{position:relative;background:var(--ink-900);color:var(--t-inverse);overflow:hidden;isolation:isolate} .testimonials::before{content:"";position:absolute;inset:0;z-index:-1;background: radial-gradient(800px 300px at 20% 0%,rgba(200,164,93,.12),transparent 60%), repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 18px)} .testimonials__grid{grid-template-columns:repeat(3,1fr)} .tcard{background:rgba(23,24,28,.92);border:1px solid rgba(255,255,255,.08);padding:28px;border-radius:var(--r-md);display:flex;flex-direction:column;gap:14px} .tcard__quote{font-size:2.5rem;line-height:1;color:var(--gold);opacity:.7;font-family:var(--f-display)} .tcard blockquote{margin:0} .tcard blockquote p{color:var(--t-muted-inv)} .tcard__rating{display:flex;gap:4px;color:var(--gold-light)} .tcard__rating .icon{width:16px;height:16px;fill:currentColor} .tcard footer{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)} .tcard footer strong{display:block;font-family:var(--f-display);font-size:1.125rem} .tcard footer span{font-size:var(--fs-sm);color:var(--t-muted-inv)} /* ========================================================================== GUIA (blog) ========================================================================== */ .guide__grid{grid-template-columns:repeat(3,1fr)} .bcard{background:var(--white);box-shadow:var(--sh-card);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column} .bcard__body{padding:22px 24px;display:flex;flex-direction:column;gap:10px} .bcard__cat{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)} .bcard h3{font-size:var(--fs-card);font-family:var(--f-body);font-weight:700;line-height:1.3} .bcard h3 a:hover{color:var(--gold-deep)} .bcard__meta{font-size:var(--fs-sm);color:var(--t-secondary)} /* ========================================================================== COBERTURA (estados) ========================================================================== */ .coverage{padding:var(--s8) 0;border-top:1px solid var(--n-200)} .coverage__list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s4)} .coverage__list li{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;font-size:1.25rem;color:var(--ink-600)} .coverage__list .icon{color:var(--gold-deep)} .coverage__list a:hover{color:var(--ink-900)} /* ========================================================================== CTA FINAL ========================================================================== */ .cta{background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 55%,var(--gold-deep) 100%);color:var(--ink-900)} .cta .container{display:grid;grid-template-columns:7fr 5fr;gap:var(--s5);align-items:center;padding-top:var(--s10);padding-bottom:var(--s10)} .cta h2{max-width:18ch} .cta p{margin-top:var(--s2);max-width:52ch;color:#2B2410} .cta__form{background:var(--white);padding:28px;border-radius:var(--r-md);box-shadow:var(--sh-float);display:grid;gap:14px} .cta__form h3{font-size:var(--fs-h4)} .field-group{display:grid;gap:6px} .field-group label{font-size:var(--fs-sm);font-weight:600} .field-group input,.field-group select{height:44px;padding:0 12px;border:1px solid var(--n-300);border-radius:var(--r-sm);font:inherit;color:var(--t-primary);background:var(--white)} .field-group input:focus,.field-group select:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--gold-deep)} .cta__form .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}.cta__form label,.cform label{display:block;line-height:1.25;min-height:2.5em}.cform .row{align-items:start}.cta__form .field-group{display:grid;gap:6px;min-width:0}.cta__form input,.cta__form select,.cta__form textarea{width:100%;min-width:0} .cta__form .btn{width:100%;justify-content:center;margin-top:6px} .cta__form small{font-size:.75rem;color:var(--t-secondary)} /* ========================================================================== RODAPÉ ========================================================================== */ /* ========================================================================== WHATSAPP FLUTUANTE ========================================================================== */ .wa{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 14px;border-radius:var(--r-pill);background:var(--gold);color:var(--ink-900);font-weight:700;font-size:var(--fs-nav);box-shadow:var(--sh-float)} .wa:hover{background:var(--gold-light)} /* ========================================================================== RESPONSIVO ========================================================================== */ @media (max-width:1023px){ :root{--pad-x:24px;--section-y:72px;--fs-h1:2.5rem;--fs-h2:2.125rem} .highlights__grid,.stats__grid,.products__grid,.testimonials__grid,.guide__grid{grid-template-columns:repeat(2,1fr)} .about,.compliance{grid-template-columns:1fr} /* empilhado, a foto tomava a largura inteira e virava um retrato de quase mil pixels de altura antes do texto aparecer */ .about__photo{max-width:360px} .segments{grid-template-columns:1fr} .cta .container{grid-template-columns:1fr} .hero__content{margin-left:0} } @media (max-width:767px){ :root{--pad-x:20px;--section-y:56px;--fs-h1:2.125rem;--fs-h2:1.875rem;--fs-h3:1.5rem} .nav__toggle{display:inline-flex} .nav__list{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--white);border-bottom:1px solid var(--n-200);padding:var(--s2) var(--pad-x) var(--s3)} .nav__list.is-open{display:flex} .nav__list a{display:flex;padding:12px 10px;border:2px solid transparent} .nav .btn{display:none} .hero{min-height:0} .hero .container{padding-top:var(--s8);padding-bottom:var(--s10)} .hero__content{width:100%} .hero__img{object-position:78% center} .hero__actions{align-items:flex-start;flex-direction:column;flex-wrap:wrap} .hero__wa strong,.hero__wa span{white-space:normal} .hero__avatar{width:42px;height:42px} .hero__facts{grid-template-columns:1fr;gap:10px} .hero__overlay{background:linear-gradient(180deg,rgba(8,8,10,.80) 0%,rgba(8,8,10,.86) 100%)} .highlights__grid{grid-template-columns:1fr} .stats__grid,.products__grid,.testimonials__grid,.guide__grid,.segments, .feature-list{grid-template-columns:1fr} .cta__form .row{grid-template-columns:1fr} .scard{min-height:320px} .wa span{display:none} .wa{padding:0 14px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition:none !important;animation:none !important} } .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1} .media img+.media__label{display:none} .scard__body{z-index:2} .scard .media{z-index:0} .scard .media{margin:0} /* ========================================================================== PÁGINA DE PRODUTO — componentes adicionais ========================================================================== */ .breadcrumb{padding:14px 0;font-size:var(--fs-sm)} .breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .breadcrumb li+li::before{content:"/";margin-right:8px;color:var(--n-500)} .breadcrumb a:hover{color:var(--gold-deep)} .breadcrumb [aria-current]{font-weight:600} /* hero com formulário */ .phero{position:relative;color:var(--t-inverse);background:var(--ink-900);overflow:hidden;isolation:isolate} .phero__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:72% center} .phero__overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,8,10,.88) 0%,rgba(8,8,10,.78) 50%,rgba(8,8,10,.55) 100%)} .phero .container{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:var(--s6);align-items:center;padding-top:var(--s10);padding-bottom:var(--s10)} .phero__content h1{font-size:clamp(1.875rem,3.2vw,2.75rem);font-weight:700;line-height:1.15;max-width:18ch} .phero__content>p{font-size:1.0625rem;line-height:1.6;max-width:50ch;color:var(--t-muted-inv);margin:var(--s3) 0 var(--s4)} .phero__proofs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px var(--s4);margin-top:var(--s5)} .phero__proofs li{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:start;gap:8px;font-size:var(--fs-sm);line-height:1.4;color:var(--t-muted-inv);min-width:0;overflow-wrap:anywhere} .phero__proofs .icon{color:var(--gold-light);width:16px;height:16px;flex:none;margin-top:3px}.phero__content{min-width:0} .lead-form{min-width:0;background:var(--white);color:var(--t-primary);padding:26px;border-radius:10px;display:grid;gap:12px;border:1px solid rgba(200,164,93,.45);box-shadow:var(--sh-card)} .lead-form h2{font-size:1.25rem;display:block;padding:0;border:0;box-shadow:none;background:none} .lead-form>p{font-size:var(--fs-sm);color:var(--t-secondary);margin:0} .lead-form .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start} .lead-form .field-group{display:grid;gap:6px} .lead-form label{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase} .lead-form input,.lead-form select{height:44px;padding:0 12px;border:1px solid var(--n-200);border-radius:8px;font:inherit;color:var(--t-primary);background:var(--white)} .lead-form input:focus,.lead-form select:focus{outline:3px solid var(--gold);outline-offset:1px} .lead-form .btn{width:100%;justify-content:center;margin-top:4px} .lead-form small{font-size:.75rem;color:var(--t-secondary);text-align:center} .lead-form__wa{display:flex;align-items:center;justify-content:center;gap:10px;font-size:var(--fs-sm);font-weight:600;padding-top:10px;border-top:1px solid var(--n-200)} .lead-form__wa img{width:32px;height:32px;border-radius:999px;border:1px solid rgba(200,164,93,.45)} .lead-form__wa:hover{color:var(--gold-deep)} /* faixa de confiança */ .trust{background:var(--n-50);border-bottom:1px solid var(--n-200)} .trust__list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);padding:var(--s4) 0} .trust__list li{display:flex;align-items:center;gap:12px;font-size:var(--fs-sm);font-weight:600} .trust__list .icon-badge{width:44px;height:44px} .trust__list .icon{width:20px;height:20px} /* modelos */ .models__grid{grid-template-columns:repeat(4,1fr)} .mcard{background:var(--white);display:flex;flex-direction:column} .mcard__head{padding:20px 22px;background:var(--ink-900);color:var(--t-inverse);border-bottom:2px solid var(--gold);display:grid;align-content:end;gap:4px;min-height:118px} .mcard__head span{display:block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;line-height:1.35;text-transform:uppercase;color:var(--gold-light)} .mcard__head strong{display:block;font-size:1.625rem;font-weight:800;line-height:1.1;margin:0} .mcard--featured .mcard__head{background:var(--gold);color:var(--ink-900)} .mcard--featured .mcard__head span{color:var(--ink-900)} .mcard__spec{padding:18px 22px;display:grid;gap:10px;flex:1} .mcard__spec div{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-sm);padding-bottom:8px;border-bottom:1px solid var(--n-200)} .mcard__spec div:last-child{border:0} .mcard__spec dt{color:var(--t-secondary)} .mcard__spec dd{margin:0;font-weight:700;text-align:right} .mcard__foot{padding:0 22px 22px} .mcard__foot .btn{width:100%;justify-content:center;font-size:.75rem;padding:0 12px} /* dossiê */ .dossier__grid{grid-template-columns:repeat(3,1fr)} .dcard{background:var(--white);padding:24px;display:flex;gap:16px;align-items:flex-start;border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-card)} .dcard .icon-badge{width:52px;height:52px;flex:none} .dcard .icon{width:24px;height:24px} .dcard h3{font-size:1rem;margin-bottom:6px} .dcard p{font-size:var(--fs-sm);color:var(--t-secondary)} /* tabela comparativa */ .compare{overflow-x:auto;border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-card);background:var(--white)} .compare table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:720px} .compare th,.compare td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--n-200);vertical-align:top} .compare thead th{background:var(--ink-900);color:var(--t-inverse);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase} .compare thead th.is-equipare{background:var(--gold);color:var(--ink-900)} .compare tbody th{font-weight:700;width:22%} .compare td.is-equipare{background:var(--gold-soft);font-weight:600} .compare tr:last-child td,.compare tr:last-child th{border-bottom:0} .compare .icon{width:16px;height:16px;vertical-align:-3px;margin-right:6px} .compare .ok{color:#1E7B3A} .compare .no{color:#B42318} /* passos */ .steps__grid{grid-template-columns:repeat(4,1fr)} .step{background:var(--white);padding:24px;border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-card);position:relative} .step__num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--ink-900);color:var(--gold-light);font-weight:800;border:1px solid rgba(200,164,93,.45);margin-bottom:14px} .step h3{font-size:1rem;margin-bottom:6px} .step p{font-size:var(--fs-sm);color:var(--t-secondary)} .step time{display:block;margin-top:12px;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep)} /* objeções */ .objections__grid{grid-template-columns:repeat(4,1fr)} .ocard{background:var(--ink-800);color:var(--t-inverse);padding:24px;border:1px solid rgba(200,164,93,.45);border-radius:10px;box-shadow:var(--sh-card);display:flex;flex-direction:column;gap:10px} .ocard__q{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light)} .ocard h3{font-size:1.0625rem} .ocard p{font-size:var(--fs-sm);color:var(--t-muted-inv);flex:1} .ocard .link-more{color:var(--gold-light);font-size:var(--fs-sm)} /* normas */ .norms__grid{grid-template-columns:repeat(3,1fr)} .ncard{background:var(--white);padding:24px;border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-card);display:flex;flex-direction:column;gap:10px} .ncard__tag{display:inline-block;align-self:flex-start;font-size:.75rem;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--gold);color:var(--ink-900)} .ncard h3{font-size:1.0625rem} .ncard p{font-size:var(--fs-sm);color:var(--t-secondary);flex:1} .ncard .link-more{font-size:var(--fs-sm)} /* faq */ .faq{max-width:860px;margin:0 auto;display:grid;gap:12px} .faq details{background:var(--white);border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-card)} .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;font-weight:700} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--gold-deep);flex:none} .faq details[open] summary::after{content:"–"} .faq details p{padding:0 20px 18px;font-size:var(--fs-sm);color:var(--t-secondary)} /* marcas */ .brands__grid{grid-template-columns:repeat(4,1fr)} .brcard{background:var(--white);padding:22px;border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-card);display:flex;flex-direction:column;gap:8px} .brcard span{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)} .brcard h3{font-size:1rem} .brcard p{font-size:var(--fs-sm);color:var(--t-secondary);flex:1} .brcard .link-more{font-size:var(--fs-sm)} /* cta final */ .cta--product .container{grid-template-columns:5fr 7fr} .cta__list{display:grid;gap:10px;margin-top:var(--s3)} .cta__list li{display:flex;align-items:center;gap:10px;font-weight:600;color:#2B2410} .cta__list .icon{width:18px;height:18px} /* barra fixa mobile */ .mbar{display:none} @media (max-width:1023px){ .phero .container{grid-template-columns:1fr} .trust__list,.models__grid,.steps__grid,.objections__grid,.brands__grid{grid-template-columns:repeat(2,1fr)} .dossier__grid,.norms__grid{grid-template-columns:repeat(2,1fr)} .cta--product .container{grid-template-columns:1fr} } @media (max-width:767px){ .trust__list,.models__grid,.steps__grid,.objections__grid,.brands__grid,.dossier__grid,.norms__grid{grid-template-columns:1fr} .lead-form .row{grid-template-columns:1fr} .phero__proofs{grid-template-columns:1fr} .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--white);border-top:1px solid var(--n-200)} .mbar .btn{justify-content:center;font-size:.7rem;padding:0 10px;height:44px} .wa{display:none} body{padding-bottom:76px} } /* ---- v2: hero com dois botões, chunks com imagem, componentes, custo da parada ---- */ .breadcrumb ol{list-style:none;padding:0;margin:0} .nav__list{gap:2px} .nav__list a{font-size:.7rem;padding:8px 9px;gap:6px} .phero__actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)} .phero__content{min-width:0} .btn--wa{background:var(--gold);color:var(--ink-900);border:1px solid var(--gold-deep)} .btn--wa:hover{background:var(--gold-deep);color:var(--white)} .btn--wa img{width:28px;height:28px;border-radius:999px;border:2px solid rgba(13,13,15,.18)}.mbar .btn--primary{background:var(--ink-900);color:var(--white);border-color:var(--ink-900)} .lead-form h2 small{display:block;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:6px} .chunk{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center} .chunk--flip>.chunk__media{order:2} .chunk__media{margin:0;border:1px solid var(--n-200);border-radius:10px;overflow:hidden;box-shadow:var(--sh-card);background:var(--ink-800)} .chunk__media img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover} .chunk__media figcaption{padding:10px 14px;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--ink-900);color:var(--gold-light)} .chunk__body .eyebrow{margin-bottom:12px} .chunk__body h2{margin-bottom:var(--s3)} .chunk__body p{color:var(--t-secondary)} .chunk__body p.lead{color:var(--t-primary);font-weight:500;font-size:1.0625rem} .spec{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin:var(--s3) 0} .spec div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--n-200);border-radius:8px;background:var(--white);box-shadow:var(--sh-card)} .spec dt{font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)} .spec dd{margin:0;font-weight:700;font-size:.9375rem} .parts__grid{grid-template-columns:repeat(3,1fr)} .part{background:var(--white);border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-card);padding:22px;display:flex;flex-direction:column;gap:8px} .part__k{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)} .part h3{font-size:1rem} .part p{font-size:var(--fs-sm);color:var(--t-secondary);flex:1} .part strong{font-size:var(--fs-sm)} .cost{grid-template-columns:1fr 1fr} .ccard{border:1px solid var(--n-200);border-radius:10px;overflow:hidden;background:var(--white);box-shadow:var(--sh-card);display:flex;flex-direction:column} .ccard__head{padding:20px 24px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--n-200)} .ccard--bad .ccard__head{background:var(--n-100)} .ccard--good .ccard__head{background:var(--gold)} .ccard__head h3{font-size:1.125rem} .ccard__head .icon{width:26px;height:26px;flex:none} .ccard ul{padding:16px 24px;display:grid;gap:10px;flex:1} .ccard li{display:flex;justify-content:space-between;gap:16px;font-size:var(--fs-sm);padding-bottom:10px;border-bottom:1px solid var(--n-200)} .ccard li:last-child{border:0} .ccard li strong{white-space:nowrap} .ccard--bad li strong{color:#B42318} .ccard--good li strong{color:#1E7B3A} .ccard__total{padding:18px 24px;border-top:1px solid var(--n-200);display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:700} .ccard__total strong{font-size:1.5rem} .ccard--bad .ccard__total{background:var(--n-100)} .ccard--good .ccard__total{background:var(--gold-soft)} .cost__note{max-width:860px;margin:var(--s4) auto 0;text-align:center;font-size:.8125rem;color:var(--t-secondary)} .field3{grid-template-columns:repeat(3,1fr)} .fcard{border:1px solid rgba(200,164,93,.45);border-radius:10px;overflow:hidden;background:var(--ink-800);color:var(--t-inverse);box-shadow:var(--sh-card)} .fcard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-bottom:2px solid var(--gold)} .fcard div{padding:16px 18px} .fcard h3{font-size:1rem;margin-bottom:4px} .fcard p{font-size:var(--fs-sm);color:var(--t-muted-inv)} .cta--product{background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 55%,var(--gold-deep) 100%)} .cta--product .container{grid-template-columns:6fr 6fr} .cta__panel{background:var(--white);padding:28px;border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-float);display:grid;gap:12px} .cta__panel h3{font-size:1.125rem} .cta__panel .btn{width:100%;justify-content:center} .cta__panel small{font-size:.75rem;color:var(--t-secondary);text-align:center} @media (max-width:1023px){.chunk{grid-template-columns:1fr}.chunk--flip>.chunk__media{order:0}.parts__grid,.cost,.field3{grid-template-columns:1fr 1fr}} @media (max-width:767px){.parts__grid,.cost,.field3,.spec{grid-template-columns:1fr}.phero__actions{flex-direction:column;flex-wrap:wrap}.phero__actions .btn{width:100%;justify-content:center}} .lead-form .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .lead-form input,.lead-form select{width:100%;min-width:0} .lead-form .field-group{min-width:0} .steps__grid{list-style:none;padding:0;margin:0} .fcard img{height:auto} .chunk__media img{height:auto} .scard .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85} .phero__actions .btn{flex:1 1 0;justify-content:center;font-size:.72rem;padding:0 14px;min-width:0} .lead-form label{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;display:block;min-height:2.5em}.lead-form .field-hint{font-size:.6875rem;line-height:1.35;color:var(--t-secondary);font-weight:500;text-transform:none;letter-spacing:0;margin-top:-2px}.lead-form .field-group{align-content:start} .lead-form .row{align-items:start} .lead-form h2{font-size:1.125rem} .header .container{gap:var(--s2)} .nav{gap:var(--s2);min-width:0} .nav .btn{font-size:.7rem;padding:0 14px;height:42px} @media (max-width:1279px){.brand{font-size:1.3rem}}@media (min-width:768px){.header .container{gap:var(--s2);max-width:1400px}.nav .btn{white-space:nowrap;flex:none}}@media (min-width:768px) and (max-width:1279px){.nav__toggle{display:inline-flex}.nav__list{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:2px;background:var(--white);border-bottom:1px solid var(--n-200);padding:var(--s2) var(--pad-x) var(--s3);z-index:70}.nav__list.is-open{display:flex}.nav__list a{display:flex;padding:12px 10px;font-size:.75rem;gap:10px}.nav__list .icon{width:16px;height:16px}.nav__home a>span{position:static;width:auto;height:auto;margin:0;clip-path:none;overflow:visible}}@media (min-width:1280px){.nav__list a{font-size:.78rem;padding:10px 11px;gap:7px}.nav .btn{font-size:.78rem;padding:0 20px;height:46px}.nav__list a .icon{display:none}}@media (min-width:1650px){.header .container{max-width:1560px}.nav__list a .icon{display:inline-block;width:16px;height:16px}} @media (min-width:768px){.wa{display:none}} .lead-form{padding:32px 34px;gap:14px} .lead-form .row{gap:16px} .lead-form input,.lead-form select{height:48px} .lead-form .btn{height:50px} .phero__content h1{max-width:16ch} .phero__proofs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px} .phero__proofs li{white-space:normal} @media (max-width:1280px){.phero__proofs{grid-template-columns:1fr}} /* hub do guia */ .ghero{background:var(--ink-900);color:var(--t-inverse);padding:var(--s10) 0} .ghero .container{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6);align-items:center} .ghero .eyebrow{color:var(--gold-light)} .ghero h1{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;line-height:1.15;max-width:22ch} .ghero p{color:var(--t-muted-inv);margin-top:var(--s3);max-width:56ch;line-height:1.6} .ghero__cats{display:grid;grid-template-columns:1fr 1fr;gap:12px} .ghero__cats a{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:var(--ink-800);transition:border-color var(--m-fast),background var(--m-fast)} .ghero__cats a:hover{border-color:var(--gold);background:var(--ink-700)} .ghero__cats .icon{color:var(--gold-light);width:22px;height:22px;flex:none;margin-top:2px} .ghero__cats strong{display:block;font-size:.9375rem} .ghero__cats small{display:block;font-size:.75rem;color:var(--t-muted-inv);margin-top:2px;line-height:1.35} .feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;background:var(--white);border:1px solid var(--n-200);border-radius:10px;overflow:hidden;box-shadow:var(--sh-card)} .feature__media img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;display:block} .feature__body{padding:36px;display:flex;flex-direction:column;gap:14px;justify-content:center} .feature__body h3{font-size:1.5rem;line-height:1.25} .feature__body h3 a:hover{color:var(--gold-deep)} .feature__body p{color:var(--t-secondary)} .feature__body .btn{align-self:flex-start} .bcard .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .bcard h3 a{display:block} @media (max-width:1023px){.ghero .container,.feature{grid-template-columns:1fr}} @media (max-width:767px){.ghero__cats{grid-template-columns:1fr}.feature__body{padding:24px}} /* artigo */ .post__head{padding:var(--s8) 0 0} .post__head .container{max-width:900px} .post__head h1{font-size:clamp(1.875rem,3.2vw,2.75rem);font-weight:700;line-height:1.15;letter-spacing:-.02em} .post__lead{font-size:1.1875rem;line-height:1.6;color:var(--t-secondary);margin:var(--s3) 0 var(--s3);max-width:60ch} .post__meta{display:flex;flex-wrap:wrap;gap:8px 24px;padding-bottom:var(--s5)} .post__meta li{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--t-secondary)} .post__meta .icon{color:var(--gold-deep)} .post__hero{margin:0 auto;max-width:1100px;padding:0 var(--pad-x)} .post__hero img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:10px;display:block} .post__hero figcaption{font-size:var(--fs-sm);color:var(--t-secondary);padding:12px 4px 0} .post__layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--s8);padding-top:var(--s8);padding-bottom:var(--s10)} .post__aside{position:sticky;top:104px;align-self:start;display:grid;gap:var(--s3)} .toc{border-left:2px solid var(--gold);padding-left:18px} .toc__title{font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:12px} .toc ol{list-style:none;padding:0;margin:0;display:grid;gap:10px;counter-reset:toc} .toc li{counter-increment:toc;display:flex;gap:10px;font-size:var(--fs-sm)} .toc li::before{content:counter(toc,decimal-leading-zero);color:var(--n-500);font-weight:600;flex:none} .toc a:hover{color:var(--gold-deep)} .toc__cta{background:var(--n-50);border:1px solid var(--n-200);border-radius:10px;padding:18px;display:grid;gap:12px} .toc__cta p{font-size:var(--fs-sm);font-weight:600} .toc__cta .btn{width:100%;justify-content:center} .post__body{max-width:72ch;font-size:1.0625rem;line-height:1.75} .post__body section{margin-bottom:var(--s8);scroll-margin-top:110px} .post__body h2{font-size:1.625rem;line-height:1.25;margin:0 0 var(--s3);padding-top:var(--s2);border-top:1px solid var(--n-200)} .post__body h3{font-size:1.125rem;margin:var(--s4) 0 var(--s2)} .post__body p{margin-bottom:var(--s3)} .post__body a:not(.btn):not(.link-more){color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px} .post__list{padding-left:0;margin:0 0 var(--s3);display:grid;gap:12px;counter-reset:pl} .post__list li{counter-increment:pl;display:flex;gap:12px;align-items:flex-start} .post__list li>span{flex:1} .post__list li::before{content:counter(pl);flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:var(--gold-soft);color:var(--gold-deep);font-weight:700;font-size:.875rem} .callout{border-radius:10px;padding:22px 24px;margin:var(--s4) 0;display:grid;gap:8px} .callout strong{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase} .callout p{margin:0;font-size:1rem} .callout--key{background:var(--gold-soft);border-left:4px solid var(--gold)} .callout--key strong{color:var(--gold-deep)} .callout--warn{background:#FBEFEA;border-left:4px solid #B42318} .callout--warn strong{color:#B42318} .callout--cta{background:var(--ink-900);color:var(--t-inverse)} .callout--cta strong{color:var(--gold-light)} .callout--cta p{color:var(--t-muted-inv)} .callout--cta .btn{justify-self:start;margin-top:6px;background:var(--gold);color:var(--ink-900)} .post__figure{margin:var(--s4) 0} .post__figure img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;display:block} .post__figure figcaption{font-size:var(--fs-sm);color:var(--t-secondary);padding:10px 2px 0} .post__table{margin:var(--s3) 0;overflow-x:auto} .post__table table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)} .post__table caption{text-align:left;font-weight:600;padding-bottom:10px} .post__table th,.post__table td{padding:12px 14px;border-bottom:1px solid var(--n-200);text-align:left} .post__table thead th{background:var(--n-50);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase} .post__table .is-hit{background:var(--gold-soft);font-weight:700;color:var(--gold-deep)} .post__tablenote{font-size:.8125rem;color:var(--t-secondary);margin-top:8px} .post__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:var(--s3) 0 var(--s4)} .post__steps div{background:var(--white);border:1px solid var(--n-200);border-radius:10px;padding:18px;display:grid;gap:6px;box-shadow:var(--sh-card)} .post__steps span{font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)} .post__steps strong{font-size:.9375rem;line-height:1.3} .post__steps p{font-size:.8125rem;color:var(--t-secondary);margin:0} .post__foot{border-top:1px solid var(--n-200);padding-top:var(--s4);display:grid;gap:14px;font-size:var(--fs-sm);color:var(--t-secondary)} .post .faq{max-width:none} @media (max-width:1023px){.post__layout{grid-template-columns:1fr}.post__aside{position:static}.post__steps{grid-template-columns:1fr}} .post__check{padding:0;margin:0 0 var(--s3);display:grid;gap:10px} .post__check li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:var(--n-50);border:1px solid var(--n-200);border-radius:8px} .post__check li>span:first-child{flex:none;font-size:.6875rem;font-weight:700;letter-spacing:.14em;color:var(--gold-deep);margin-top:4px} .post__check li>span:last-child{font-size:.9375rem;line-height:1.5} .entities{margin:0 0 var(--s8);padding:22px 24px;border:1px solid var(--n-200);border-radius:10px;background:var(--white);box-shadow:var(--sh-card)} .entities__title{font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px} .entities dl{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:0} .entities dt{font-weight:700;font-size:.9375rem} .entities dt a{color:var(--ink-900);text-decoration:none !important;border-bottom:2px solid var(--gold)} .entities dd{margin:4px 0 0;font-size:.8125rem;color:var(--t-secondary);line-height:1.45} @media (max-width:767px){.entities dl{grid-template-columns:1fr}} /* ---------------------------------------------------------------- rodapé */ .footer{background:var(--ink-900);color:var(--t-inverse);padding:var(--s10) 0 var(--s4)} .footer .container{max-width:1400px} /* :not(.btn) nas duas: o botão do rodapé tem cor própria, e a regra genérica de link pintava o rótulo de cinza claro sobre dourado */ .footer a:not(.btn){color:var(--t-muted-inv)} /* :not(.btn) porque o hover do botão primário pinta o fundo de gold-light; sem a exclusão, texto e fundo ficam na mesma cor e o rótulo some */ .footer a:not(.btn):hover{color:var(--gold-light)} .footer h2{font-family:var(--f-body);font-size:.875rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--gold-light);margin:0 0 var(--s3);padding-bottom:12px;position:relative} .footer h2::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;background:var(--gold)} .footer__top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8); padding-bottom:var(--s8);border-bottom:1px solid rgba(255,255,255,.12)} .footer__brand .brand{color:var(--t-inverse);margin-bottom:var(--s3)} .footer__slogan{font-size:1.0625rem;font-weight:600;color:var(--gold-light);margin:0 0 10px} .footer__resumo{font-size:.9375rem;line-height:1.65;color:var(--t-muted-inv);margin:0;max-width:46ch} .footer__cta{display:grid;gap:14px;margin-top:var(--s4);max-width:320px} .footer__cta .btn{justify-content:center;height:48px;font-size:.8125rem} .footer__wa{display:inline-flex;align-items:center;gap:10px;font-size:.9375rem;font-weight:600;color:var(--gold-light)} .footer__wa .icon{width:18px;height:18px;flex:none} .footer__nap{font-style:normal;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5)} .footer__nap>div{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start} .footer__nap .icon{width:18px;height:18px;color:var(--gold);margin-top:3px} .footer__nap span{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--n-500);margin-bottom:4px} .footer__nap div div{font-size:.9375rem;line-height:1.6;color:var(--t-muted-inv);overflow-wrap:break-word}.footer__nap a[href^="mailto"]{font-size:.875rem;letter-spacing:-.01em} .footer__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);padding:var(--s8) 0} .footer__links{list-style:none;margin:0;padding:0;display:grid;gap:12px} .footer__links a{font-size:.9375rem;line-height:1.45} .footer__bottom{padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.12);display:flex; flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3);font-size:.8125rem;color:var(--n-500)} .footer__bottom p{margin:0} .footer__bottom ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--s4)} .footer__bottom a{font-size:.8125rem} @media (max-width:1023px){ .footer__top{grid-template-columns:1fr;gap:var(--s6)} .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)} } @media (max-width:767px){ .footer{padding-top:var(--s8)} .footer__nap{grid-template-columns:1fr} .footer__cols{grid-template-columns:1fr} .footer__cta{max-width:none} .footer__bottom{flex-direction:column;align-items:flex-start} } .phero--single{grid-template-columns:1fr !important} .phero--single .phero__content{max-width:860px} .phero--single h1{max-width:30ch;font-size:clamp(1.75rem,2.9vw,2.5rem)} .entity{grid-template-columns:repeat(4,1fr);margin:0} .ecard{background:var(--white);border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-card);padding:20px 22px;display:flex;flex-direction:column;gap:6px} .ecard dt{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)} .ecard dd{margin:0;font-weight:600;font-size:.9375rem;line-height:1.4} .team{grid-template-columns:repeat(2,1fr)} .team-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s3);align-items:center;background:var(--white);border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-card);overflow:hidden} .team-card img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block} .team-card div{padding:22px 24px 22px 0} .team-card h3{font-size:1.25rem;margin-bottom:2px} .team-role{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px} .team-card p{font-size:var(--fs-sm);color:var(--t-secondary)} .cta address{display:grid;gap:12px;color:#2B2410} .cta address a:hover{text-decoration:underline} @media (max-width:1023px){.entity{grid-template-columns:repeat(2,1fr)}.team{grid-template-columns:1fr}} @media (max-width:767px){.entity{grid-template-columns:1fr}.team-card{grid-template-columns:1fr}.team-card div{padding:20px}} /* hub de serviços */ .hub{grid-template-columns:repeat(4,1fr)} .hcard{background:var(--white);border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-card);padding:24px;display:flex;flex-direction:column;gap:12px} .hcard__k{font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)} .hcard h3{font-size:1.0625rem;line-height:1.3} .hcard h3 a:hover{color:var(--gold-deep)} .hcard>p{font-size:var(--fs-sm);color:var(--t-secondary)} .hcard ul{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--n-200);flex:1} .hcard li a{display:flex;gap:8px;font-size:var(--fs-sm);font-weight:500;line-height:1.35} .hcard li a::before{content:"";flex:none;width:6px;height:6px;border-radius:999px;background:var(--gold);margin-top:7px} .hcard li a:hover{color:var(--gold-deep)} .hcard .link-more{font-size:var(--fs-sm)} @media (max-width:1023px){.hub{grid-template-columns:repeat(2,1fr)}} @media (max-width:767px){.hub{grid-template-columns:1fr}} /* FAQ */ .faq-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--s8);padding-top:var(--s8);padding-bottom:var(--s10)} .faq-body{display:grid;gap:var(--s8)} .faq-group{scroll-margin-top:110px} .faq-group h2{font-size:1.5rem;margin-bottom:var(--s3);padding-bottom:12px;border-bottom:2px solid var(--gold)} .faq-group .faq{max-width:none} .faq details p a{color:var(--gold-deep);font-weight:600} .ghero__cats--8{grid-template-columns:1fr 1fr} @media (max-width:1023px){.faq-layout{grid-template-columns:1fr}.post__aside{position:static}} /* Contato */ .contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:start} .contact__channels{display:grid;gap:14px} .ch{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;background:var(--white);border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-card)} .ch .icon-badge{width:46px;height:46px;flex:none} .ch .icon{width:22px;height:22px} .ch strong{display:block;font-size:1rem;margin-bottom:2px} .ch a{font-weight:600;color:var(--gold-deep)} .ch p{font-size:var(--fs-sm);color:var(--t-secondary)} .ch--wa{background:var(--ink-900);color:var(--t-inverse);border-color:var(--ink-900)} .ch--wa .icon-badge{background:rgba(200,164,93,.18);color:var(--gold-light)} .ch--wa p{color:var(--t-muted-inv)} .ch--wa a{color:var(--gold-light)} .ch--wa img{width:46px;height:46px;border-radius:999px;border:2px solid var(--gold);flex:none} .hours{display:grid;gap:8px;font-size:var(--fs-sm)} .hours div{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--n-200)} .hours div:last-child{border:0} .hours dt{color:var(--t-secondary)} .hours dd{margin:0;font-weight:600} .cform{background:var(--white);border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-float);padding:32px;display:grid;gap:14px} .cform h2{font-size:1.25rem} .cform>p{font-size:var(--fs-sm);color:var(--t-secondary)} .cform .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px} .cform .field-group{display:grid;gap:6px;min-width:0} .cform label{font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .cform input,.cform select,.cform textarea{width:100%;min-width:0;padding:0 12px;border:1px solid var(--n-300);border-radius:8px;font:inherit;color:var(--t-primary);background:var(--white)} .cform input,.cform select{height:46px} .cform textarea{padding:12px;min-height:120px;resize:vertical} .cform input:focus,.cform select:focus,.cform textarea:focus{outline:3px solid var(--gold);outline-offset:1px} .cform .btn{width:100%;justify-content:center;height:50px} .cform small{font-size:.75rem;color:var(--t-secondary);text-align:center} .map{border:1px solid var(--n-200);border-radius:10px;overflow:hidden;background:var(--n-50);box-shadow:var(--sh-card)} .map iframe{display:block;width:100%;height:380px;border:0} .map__foot{padding:16px 20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:var(--fs-sm)} .map__foot a{font-weight:600;color:var(--gold-deep)} .visit{grid-template-columns:repeat(3,1fr)} @media (max-width:1023px){.contact{grid-template-columns:1fr}.visit{grid-template-columns:1fr}} @media (max-width:767px){.cform .row{grid-template-columns:1fr}.cform{padding:22px}} .ghero__cats--4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .ghero__cats--4 a{min-width:0} .ghero__cats--4 small{overflow-wrap:anywhere} .cform input[type=file]{padding:10px 12px;height:auto;font-size:var(--fs-sm)} .cform input[type=file]::file-selector-button{font:inherit;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--ink-900);color:var(--gold-light);border:0;border-radius:6px;padding:8px 12px;margin-right:12px;cursor:pointer} .hours dd{text-align:right} .hours dt{flex:none} .ch a{overflow-wrap:anywhere} .vcard{display:flex;flex-direction:column;gap:12px;padding:28px;background:var(--white);border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-card)} .vcard .icon-badge{width:48px;height:48px} .vcard h3{font-size:1.0625rem} .vcard p{font-size:var(--fs-sm);color:var(--t-secondary);flex:1} .vcard .link-more{align-self:flex-start} /* ========================================================================== FICHA DA ENTIDADE (home) — a ficha ficava dentro da coluna de texto, com cards de ~260px espremidos, enquanto sobrava espaço vazio sob a imagem. Aqui ela ocupa a largura inteira, abaixo do texto e da foto. ========================================================================== */ .entidade__fatos{grid-template-columns:repeat(4,1fr);gap:14px;margin:var(--s5) 0 0} .entidade__fatos div{padding:14px 16px;gap:4px} .entidade__fatos dd{font-size:1rem;line-height:1.4} .entidade__fatos a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px} @media (max-width:1023px){.entidade__fatos{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.entidade__fatos{grid-template-columns:1fr}} /* ========================================================================== CONFORMIDADE (home) — a foto tinha proporção fixa 4/3 e flutuava ao lado de uma lista bem mais alta, deixando um vão vazio embaixo. Aqui ela acompanha a altura da coluna de texto; empilhada, volta à proporção normal. ========================================================================== */ @media (min-width:1024px){ .compliance{align-items:stretch} .compliance .media{aspect-ratio:auto;height:100%;border-radius:10px} .compliance .media img{width:100%;height:100%;object-fit:cover;object-position:center} } @media (max-width:1023px){ .compliance .media{width:100%;max-width:520px;margin-inline:auto;border-radius:10px} } /* Componentes criados para as páginas da fase 1 — seguem os tokens já aprovados. */ /* Hero sem foto: usado onde ainda não existe foto real do equipamento. Mantém a mesma altura, o mesmo overlay e o mesmo grid do .phero com imagem. */ .phero--plain{background:linear-gradient(140deg,var(--ink-900) 0%,var(--ink-800) 58%,#20222a 100%)} .phero--plain .phero__overlay{background: radial-gradient(120% 90% at 82% 15%,rgba(200,164,93,.16) 0%,rgba(200,164,93,0) 60%), linear-gradient(90deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,.12) 70%)} /* Chunk sem figura: o corpo ocupa a coluna inteira, com medida de leitura controlada. */ .chunk--solo{grid-template-columns:minmax(0,1fr)} .chunk--solo .chunk__body{max-width:78ch} /* Lista de confirmações dentro de card. */ .ticks{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:10px} .ticks li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:var(--fs-sm);color:var(--t-secondary)} .ticks li .icon{width:18px;height:18px;margin-top:2px;color:var(--gold-deep);flex:none} .section--dark .ticks li{color:var(--t-muted-inv)} .section--dark .ticks li .icon{color:var(--gold-light)} /* Grade de links internos descritivos (âncora + o que a página entrega). */ .linkgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)} .linkgrid li{border:1px solid var(--n-200);border-radius:10px;padding:var(--s3);background:var(--white);box-shadow:var(--sh-card);display:grid;gap:6px;align-content:start} .linkgrid a{font-weight:700;color:var(--t-primary);text-decoration:none;line-height:1.35} .linkgrid a:hover{color:var(--gold-deep);text-decoration:underline} .linkgrid span{font-size:var(--fs-sm);color:var(--t-secondary)} .section--alt .linkgrid li{background:var(--white)} @media (max-width:1023px){.linkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:767px){.linkgrid{grid-template-columns:1fr}} /* Tabela comparativa: rolagem horizontal só no telefone, sem quebrar o layout. */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--n-200);border-radius:10px;background:var(--white)} .table-wrap .post__table{margin:0;border:0;min-width:640px} .table-note{margin-top:var(--s2);font-size:var(--fs-sm);color:var(--t-secondary)} /* Ferramentas interativas (calculadora, configurador, estimador). Sem framework: formulário comum, cálculo em JS, resultado em região aria-live. */ .tool{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5);align-items:start} .tool__form{display:grid;gap:var(--s3);border:1px solid var(--n-200);border-radius:10px;padding:var(--s4);background:var(--white);box-shadow:var(--sh-card)} .tool__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)} .tool__field{display:grid;gap:6px;min-width:0} .tool__field label{font-size:var(--fs-sm);font-weight:600;color:var(--t-primary)} .tool__field input,.tool__field select{width:100%;min-width:0;padding:12px 14px;border:1px solid var(--n-300);border-radius:4px;font:inherit;font-size:var(--fs-sm);background:var(--white);color:var(--t-primary)} .tool__field input:focus,.tool__field select:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)} .tool__hint{font-size:.75rem;color:var(--t-secondary)} .tool__out{border:1px solid var(--ink-800);border-radius:10px;background:var(--ink-900);color:var(--t-inverse);padding:var(--s4);display:grid;gap:var(--s2);position:sticky;top:96px} .tool__out h3{color:var(--gold-light);font-size:var(--fs-h4);margin:0} .tool__figure{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .tool__figure strong{font-size:2.25rem;line-height:1.05;color:var(--white);font-weight:800} .tool__figure span{font-size:var(--fs-sm);color:var(--t-muted-inv)} .tool__lines{list-style:none;margin:0;padding:0;display:grid;gap:8px} .tool__lines li{display:flex;justify-content:space-between;gap:var(--s2);font-size:var(--fs-sm);color:var(--t-muted-inv);border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:8px} .tool__lines li b{color:var(--white);font-weight:700;text-align:right} .tool__out .btn{width:100%;justify-content:center} .tool__out small{color:var(--t-muted-inv);font-size:.75rem;line-height:1.5} @media (max-width:1023px){.tool{grid-template-columns:1fr}.tool__out{position:static}} @media (max-width:767px){.tool__row{grid-template-columns:1fr}} /* Grades com número fixo de colunas — a simetria é regra do projeto: nenhuma linha pode terminar com célula vazia em nenhum breakpoint. */ .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:1023px){.grid--3{grid-template-columns:1fr}.grid--4,.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:767px){.grid--3,.grid--4,.grid--2{grid-template-columns:1fr}} /* --------------------------------------------------------------- Legibilidade e vida no texto corrido Antes, o bloco de definição ocupava 78ch e deixava meia tela vazia à direita; o texto saía chapado, sem destaque e sem hierarquia. --------------------------------------------------------------- */ /* Definição com ficha lateral: a coluna direita deixa de ser vazio morto. */ .chunk--ficha{grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:start;gap:var(--s6)} .chunk--solo{grid-template-columns:minmax(0,1fr)} .chunk--solo .chunk__body{max-width:70ch} .chunk__body>p{font-size:1.0625rem;line-height:1.7;color:var(--t-secondary);margin-bottom:var(--s3);max-width:70ch} .chunk__body>p.lead{font-size:1.1875rem;line-height:1.6;color:var(--t-primary);font-weight:500} .chunk__body>p:last-child{margin-bottom:0} .chunk__body strong{color:var(--t-primary);font-weight:700} .chunk__body a,.post__table a,.ocard a,.linkgrid span a,.faq a,.destaque a{ color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:rgba(200,164,93,.55)} .chunk__body a:hover,.post__table a:hover,.ocard a:hover,.faq a:hover,.destaque a:hover{ color:var(--ink-900);text-decoration-color:var(--gold)} .section--dark .ocard a{color:var(--gold-light)} .section--dark .ocard a:hover{color:var(--white)} /* Entidade citada no texto: marcação leve, sem virar link falso. */ .ent{font-weight:600;color:var(--t-primary);box-shadow:inset 0 -.42em 0 var(--gold-soft)} .section--dark .ent{color:var(--white);box-shadow:inset 0 -.42em 0 rgba(200,164,93,.22)} /* A entidade nasce quase preta, com risco dourado claro por baixo. Sobre bloco escuro isso vira texto invisível: medido na /pecas/, "Camboriú" ficava em #17181C sobre #0D0D0F, contraste de 1,09:1. Todo container escuro que recebe texto rico precisa da variante clara, não só .section--dark. */ .phero .ent,.ghero .ent,.hero .ent,.ctabar .ent,.footer .ent, .callout--cta .ent,.card--featured .ent,.fcard .ent,.ocard .ent{ color:var(--white);box-shadow:inset 0 -.42em 0 rgba(200,164,93,.22)} /* Frase de fechamento do bloco, com marca de conferência. */ .chunk__nota{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start; margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--n-200); font-size:var(--fs-sm);color:var(--t-primary);font-weight:600} .chunk__nota .icon{width:18px;height:18px;color:var(--gold-deep);margin-top:2px} /* Ficha rápida ao lado da definição. */ .ficha{border:1px solid var(--n-200);border-radius:10px;background:var(--white); box-shadow:var(--sh-card);overflow:hidden;position:sticky;top:96px} .ficha h3{margin:0;padding:14px 18px;background:var(--ink-900);color:var(--gold-light); font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .ficha__lista{margin:0;padding:6px 18px 16px;display:grid} .ficha__lista div{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--n-200)} .ficha__lista div:last-child{border-bottom:0} .ficha__lista dt{font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)} .ficha__lista dd{margin:0;font-size:var(--fs-sm);font-weight:600;color:var(--t-primary);line-height:1.45} @media (max-width:1023px){.chunk--ficha{grid-template-columns:1fr}.ficha{position:static}} /* Caixa de information gain. */ .destaque{border:1px solid var(--n-200);border-left:4px solid var(--gold);border-radius:10px; background:var(--white);box-shadow:var(--sh-card);padding:var(--s5) var(--s5) var(--s4); display:grid;gap:var(--s2);max-width:90ch} .destaque__selo{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)} .destaque h2{font-size:1.5rem;line-height:1.25;margin:0} .destaque p{font-size:1.0625rem;line-height:1.7;color:var(--t-secondary);margin:0} .destaque .ticks{margin-top:4px} .destaque__fonte{font-size:var(--fs-sm)!important;color:var(--t-primary)!important;font-weight:600; padding-top:var(--s2);border-top:1px solid var(--n-200)} /* Faixa de números verificáveis. */ .numeros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)} .numeros div{border:1px solid var(--n-200);border-radius:10px;background:var(--white); padding:var(--s4);display:grid;gap:6px;box-shadow:var(--sh-card)} .numeros strong{font-size:2rem;line-height:1;font-weight:800;color:var(--ink-900)} .numeros span{font-size:var(--fs-sm);color:var(--t-secondary);line-height:1.45} @media (max-width:1023px){.numeros{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:767px){.numeros{grid-template-columns:1fr}} /* Ponto de conversão no meio da página. */ .ctabar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);align-items:center; background:var(--ink-900);border-radius:12px;padding:var(--s5); background-image:radial-gradient(120% 140% at 88% 10%,rgba(200,164,93,.18) 0%,rgba(200,164,93,0) 60%)} .ctabar h2{color:var(--white);font-size:1.375rem;line-height:1.3;margin:0 0 6px} .ctabar p{color:var(--t-muted-inv);font-size:var(--fs-sm);line-height:1.55;margin:0;max-width:62ch} .ctabar__acoes{display:grid;gap:10px;min-width:280px} .ctabar__acoes .btn{width:100%;justify-content:center} .ctabar__acoes .btn--dark{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.35)} .ctabar__acoes .btn--dark:hover{background:var(--white);color:var(--ink-900)} @media (max-width:1023px){.ctabar{grid-template-columns:1fr}.ctabar__acoes{min-width:0}} .ticks li>span{min-width:0} .cta__list li>span{min-width:0} .destaque{margin-inline:auto} /* --------------------------------------------------------------- Card de conteúdo (.mcard) sem cabeçalho preto O componente nasceu com estilo só para o formato "cabeçalho + tabela de especificação". Quando o card traz h3, parágrafo e lista, nada tinha respiro lateral, o rodapé não descia até a base e o rótulo longo do botão vazava para fora da coluna. --------------------------------------------------------------- */ .mcard{border:1px solid var(--n-200);border-radius:10px;overflow:hidden;box-shadow:var(--sh-card)} .mcard>h3{margin:20px 22px 10px;font-size:var(--fs-h4);line-height:1.3;color:var(--t-primary)} .mcard>p{margin:0 22px 14px;font-size:var(--fs-sm);line-height:1.65;color:var(--t-secondary)} .mcard>p:last-of-type{margin-bottom:16px} .mcard>.ticks{margin:0 22px 18px} .mcard__head+h3{margin-top:18px} /* rodapé sempre na base: alinha os botões entre cards de alturas diferentes */ .mcard__foot{margin-top:auto;padding:0 22px 22px} .mcard__foot .btn{width:100%;height:auto;min-height:44px;padding:11px 14px;white-space:normal; text-align:center;line-height:1.3;justify-content:center} /* mesma correção nos cards escuros de objeção */ .ocard{display:flex;flex-direction:column} .ocard>p:last-child{margin-bottom:0} .coverage__cities a{color:var(--gold-deep);font-weight:600} .coverage__cities{text-align:center;font-size:var(--fs-sm);color:var(--t-secondary);margin-top:var(--s3);max-width:70ch;margin-left:auto;margin-right:auto} .coverage__title{font-size:1.25rem;text-align:center;margin-bottom:var(--s3)} .cta address a:hover{text-decoration:underline} .cta address{display:grid;gap:12px;color:#2B2410} .ecard dd{margin:0;font-weight:600;font-size:.9375rem;line-height:1.4} .ecard dt{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)} .ecard{background:var(--white);border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-card);padding:20px 22px;display:flex;flex-direction:column;gap:6px} .entity{grid-template-columns:1fr} .entity{grid-template-columns:repeat(2,1fr)} .entity{grid-template-columns:repeat(4,1fr);margin:0} .footer{background:var(--ink-900);color:var(--t-inverse);padding:var(--s10) 0 var(--s4)} .hcard .link-more{font-size:var(--fs-sm)} .hcard h3 a:hover{color:var(--gold-deep)} .hcard h3{font-size:1.0625rem;line-height:1.3} .hcard li a::before{content:"";flex:none;width:6px;height:6px;border-radius:999px;background:var(--gold);margin-top:7px} .hcard li a:hover{color:var(--gold-deep)} .hcard li a{display:flex;gap:8px;font-size:var(--fs-sm);font-weight:500;line-height:1.35} .hcard ul{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--n-200);flex:1} .hcard>p{font-size:var(--fs-sm);color:var(--t-secondary)} .hcard__k{font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)} .hcard{background:var(--white);border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-card);padding:24px;display:flex;flex-direction:column;gap:12px} .hub{grid-template-columns:1fr} .hub{grid-template-columns:repeat(2,1fr)} .hub{grid-template-columns:repeat(4,1fr)} .phero--single .phero__content{max-width:860px} .phero--single h1{max-width:30ch;font-size:clamp(1.75rem,2.9vw,2.5rem)} .phero--single{grid-template-columns:1fr !important} .section-foot{margin-top:var(--s5);text-align:center} .team-card div{padding:20px} .team-card div{padding:22px 24px 22px 0} .team-card h3{font-size:1.25rem;margin-bottom:2px} .team-card img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block} .team-card p{font-size:var(--fs-sm);color:var(--t-secondary)} .team-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s3);align-items:center;background:var(--white);border:1px solid var(--n-200);border-radius:10px;box-shadow:var(--sh-card);overflow:hidden} .team-card{grid-template-columns:1fr} .team-role{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px} .team{grid-template-columns:1fr} .team{grid-template-columns:repeat(2,1fr)} :root{ --gold: #C8A45D; --gold-deep: #8F6B2C; --gold-light: #E6CF95; --gold-soft: #F7F0E1; --gold-overlay: rgba(200,164,93,.86); --ink-900: #0D0D0F; --ink-800: #17181C; --ink-700: #23252B; --ink-600: #4C5058; --white: #FFFFFF; --n-50: #FAF9F6; --n-100: #F3F1EC; --n-200: #E6E2D9; --n-300: #D3CEC3; --n-500: #8A8E96; --t-primary: #17181C; --t-secondary: #5B5F66; --t-inverse: #FFFFFF; --t-muted-inv: #C9CBD0; --ov-hero: rgba(8,8,10,.70); --ov-dark: rgba(8,8,10,.84); --f-display: "Montserrat", "Segoe UI", Arial, sans-serif; --f-body: "Montserrat", "Segoe UI", Arial, sans-serif; --fs-eyebrow: .6875rem; --fs-nav: .8125rem; --fs-sm: .8125rem; --fs-body: 1rem; --fs-card: 1.125rem; --fs-h4: 1.25rem; --fs-h3: 1.5rem; --fs-h2: 2.125rem; --fs-h1: 3.25rem; --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s8:64px;--s10:80px;--s12:96px;--s15:120px; --container: 1180px; --pad-x: 32px; --gutter: 24px; --section-y: 96px; --r-sm: 2px; --r-md: 4px; --r-pill: 999px; --sh-card: 0 10px 30px rgba(13,13,15,.08); --sh-float: 0 18px 48px rgba(13,13,15,.16); --m-fast: 160ms ease; --m-base: 240ms ease; } /* ========================================================================== CHAT — simulação do atendimento no WhatsApp (seção 't': 'chat') Celular pequeno ao lado do texto. Usa a paleta do site, não o verde do WhatsApp: a regra do projeto é uma única cor de destaque, e o botão de WhatsApp já é dourado em toda página. ========================================================================== */ /* Três blocos, para a ordem mudar no celular sem mexer no HTML: no desktop o aparelho ocupa a coluna da direita inteira; no celular a conversa sobe para logo depois do título, antes da lista e dos botões. */ .chatwrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--s4) var(--s8); grid-template-areas:"head fone" "lado fone";align-items:start} .chatwrap__head{grid-area:head;margin-bottom:0} .chatwrap__aside{grid-area:lado;max-width:620px} .phone{grid-area:fone;align-self:center} .chatwrap__lead{margin:0 0 var(--s2);font-size:var(--fs-sm);font-weight:700; color:var(--t-primary)} .chatwrap__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4)} /* o .btn do site é nowrap e de altura fixa; rótulo específico estoura a tela estreita, então aqui o botão cresce em altura em vez de vazar a lateral */ .chatwrap__acoes .btn{flex:1 1 230px;white-space:normal;height:auto;min-height:46px; padding-top:12px;padding-bottom:12px;text-align:center;line-height:1.25;justify-content:center} /* ---------------------------------------------------------------- aparelho */ .phone{margin:0;justify-self:center} .phone__frame{position:relative;width:280px;padding:8px;border-radius:36px; background:var(--ink-900);border:1px solid #2A2C33;box-shadow:var(--sh-float)} .phone__notch{position:absolute;top:15px;left:50%;transform:translateX(-50%); width:62px;height:5px;border-radius:999px;background:rgba(255,255,255,.28);z-index:2} /* proporção de iPhone travada: sem isto cada página geraria um aparelho de altura diferente, conforme o tamanho da conversa daquele serviço */ .phone__screen{position:relative;display:flex;flex-direction:column;aspect-ratio:393/852; border-radius:29px;overflow:hidden;background:var(--white)} /* a conversa continua inteira no DOM: ela rola dentro da tela, como no aparelho */ .phone__screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28px; pointer-events:none;background:linear-gradient(to bottom,rgba(243,241,236,0),var(--n-100))} .phone__cap{display:flex;align-items:center;justify-content:center;gap:8px; margin-top:var(--s2);font-size:var(--fs-eyebrow);font-weight:700; text-transform:uppercase;letter-spacing:.08em;color:var(--t-secondary);text-align:center} .phone__cap .icon{width:14px;height:14px;color:var(--gold-deep)} /* ------------------------------------------------------------ tela do chat */ .chat__top{display:flex;align-items:center;gap:9px;padding:24px 13px 10px;flex:none; background:var(--ink-900);color:var(--t-inverse)} .chat__top img{width:28px;height:28px;border-radius:999px;flex:none; border:2px solid rgba(200,164,93,.55)} .chat__quem{display:flex;flex-direction:column;min-width:0} .chat__quem strong{font-family:var(--f-display);font-size:.72rem;font-weight:700} .chat__quem span{font-size:.6rem;color:var(--t-muted-inv);line-height:1.35} /* o fundo da conversa é mais quente que o da seção, senão a tela some dentro da página e o aparelho deixa de parecer um aparelho */ .chat__log{display:flex;flex-direction:column;gap:5px;margin:0;padding:11px 9px 14px; background:var(--n-100);list-style:none;flex:1;overflow-y:auto;scrollbar-width:none} .chat__log::-webkit-scrollbar{display:none} .chat__msg{position:relative;max-width:88%;padding:8px 10px;border-radius:12px; font-size:.72rem;line-height:1.42} .chat__msg p{margin:0} .chat__msg .ent{font-weight:600;color:var(--gold-deep);background:none} /* pergunta do comprador — à direita, canto superior chanfrado como no aplicativo */ .chat__msg--eu{align-self:flex-end;background:var(--gold-soft); border:1px solid rgba(200,164,93,.45);border-top-right-radius:5px;padding-bottom:15px} .chat__msg--eu .ent{color:var(--ink-800)} /* resposta da Equipare — à esquerda */ .chat__msg--eq{align-self:flex-start;background:var(--white);border:1px solid var(--n-200); border-top-left-radius:5px} .chat__lida{position:absolute;right:10px;bottom:5px;display:inline-flex;color:var(--gold-deep)} .chat__lida .icon{width:12px;height:12px;stroke-width:2.5} .chat__nota{margin-top:var(--s3);font-size:var(--fs-sm);color:var(--t-secondary)} .chat__nota a{color:var(--gold-deep);font-weight:600;text-decoration:underline; text-underline-offset:3px} @media (max-width:1023px){ .chatwrap{grid-template-columns:1fr;grid-template-areas:"head" "fone" "lado"; gap:var(--s5);justify-items:center} .chatwrap__head,.chatwrap__aside{justify-self:start;max-width:none} } /* No celular a moldura sai: quem está no celular já está no celular, e um aparelho desenhado dentro do aparelho de verdade só encolhe a letra. Vira um cartão de conversa, largura inteira e texto em tamanho de leitura. */ @media (max-width:767px){ .chatwrap{gap:var(--s4)} .phone{width:100%} .phone__frame{width:100%;padding:0;border:0;border-radius:12px;background:none;box-shadow:none} .phone__notch{display:none} .phone__screen{aspect-ratio:auto;border-radius:12px;border:1px solid var(--n-200)} .phone__screen::after{display:none} .phone__cap{justify-content:flex-start} .chat__top{padding:13px 14px} .chat__top img{width:36px;height:36px} .chat__quem strong{font-size:.86rem} .chat__quem span{font-size:.72rem} .chat__log{overflow:visible;gap:8px;padding:14px 12px 16px} .chat__msg{max-width:90%;font-size:.88rem;line-height:1.5;padding:10px 13px;border-radius:14px} .chat__msg--eu{padding-bottom:17px} .chat__lida .icon{width:13px;height:13px} .chatwrap__acoes .btn{width:100%} } /* ========================================================================== RECIBO — página /obrigado/, destino de todos os formulários ========================================================================== */ /* isca de robô: fora da tela, nunca display:none, e escondida do leitor de tela */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .recibo__painel{max-width:760px;margin:0 auto;text-align:center} .recibo__selo{display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--s3); font-size:var(--fs-eyebrow);font-weight:700;text-transform:uppercase;letter-spacing:.1em; color:var(--gold-deep);border:1px solid var(--gold);border-radius:var(--r-pill);padding:7px 18px} .recibo__painel h1{font-size:2.5rem;margin-bottom:var(--s3)} .recibo__lead{font-size:1.125rem;color:var(--t-secondary);margin-bottom:var(--s4)} .recibo__nada{font-size:var(--fs-sm);color:var(--t-secondary);margin-bottom:var(--s4)} .recibo__nada a{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px} .recibo__wa{height:auto;min-height:60px;padding:14px 30px;font-size:var(--fs-card); white-space:normal;line-height:1.3;justify-content:center;text-align:center} .recibo__wa img{width:34px;height:34px} .recibo__wa-nota{margin-top:12px;font-size:var(--fs-sm);color:var(--t-secondary)} /* resumo do que a pessoa preencheu — injetado pelo index.php */ .recibo__resumo{margin-top:var(--s6);text-align:left;border:1px solid var(--n-200); border-radius:10px;background:var(--white);box-shadow:var(--sh-card);overflow:hidden} .recibo__resumo h2{font-size:var(--fs-h4);padding:16px var(--s3);margin:0; background:var(--ink-900);color:var(--t-inverse)} .recibo__lista{margin:0;padding:var(--s2) var(--s3) var(--s3)} .recibo__lista>div{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:var(--s2); padding:11px 0;border-bottom:1px solid var(--n-200)} .recibo__lista>div:last-child{border-bottom:0} .recibo__lista dt{font-size:var(--fs-sm);font-weight:700;color:var(--t-secondary)} .recibo__lista dd{margin:0;font-size:var(--fs-sm);color:var(--t-primary);word-break:break-word} .recibo__protocolo{margin:0;padding:14px var(--s3);background:var(--n-50); border-top:1px solid var(--n-200);font-size:var(--fs-sm);color:var(--t-secondary)} .recibo__protocolo strong{color:var(--t-primary);letter-spacing:.06em} .recibo__erro{max-width:760px;margin:0 auto var(--s4);padding:14px 18px;text-align:left; border:1px solid var(--n-300);border-left:4px solid var(--gold);border-radius:8px; background:var(--n-50);font-size:var(--fs-sm)} @media (max-width:767px){ .recibo__painel h1{font-size:1.85rem} .recibo__lead{font-size:1rem} .recibo__wa{width:100%} .recibo__lista>div{grid-template-columns:1fr;gap:4px} } /* ========================================================================== WHATSAPP FLUTUANTE — o botão existia no HTML de toda página, mas uma regra o escondia acima de 768px e a .mbar o escondia abaixo. Resultado: nunca aparecia. Aqui ele volta no desktop e no tablet. No celular continua escondido de propósito: ali a .mbar já ocupa o rodapé com o mesmo botão de WhatsApp, e dois flutuantes se sobrepõem. ========================================================================== */ @media (min-width:768px){ .wa{display:inline-flex} } /* O anel pulsa, o botão não. Botão que cresce e encolhe muda de lugar debaixo do cursor e erra o clique; o anel chama atenção sem mover o alvo. Ciclo longo de propósito: pisca rápido é desconforto e risco para quem tem fotossensibilidade — a WCAG limita a três flashes por segundo. */ .wa{position:fixed} .wa::after{ content:""; position:absolute; inset:0; border-radius:inherit; /* ouro escuro, não o ouro do botão: anel dourado sobre fundo dourado simplesmente não aparece — foi o primeiro jeito que tentei */ border:2px solid var(--gold-deep); opacity:0; pointer-events:none; animation:wa-pulso 2.6s cubic-bezier(.22,.61,.36,1) infinite; } @keyframes wa-pulso{ 0% {opacity:.85; transform:scale(1)} 70% {opacity:0; transform:scale(1.34)} 100% {opacity:0; transform:scale(1.34)} } /* halo de apoio, no próprio botão: é o que dá o "piscando" a três metros de distância, sem deslocar o alvo do clique */ .wa{animation:wa-halo 2.6s ease-out infinite} @keyframes wa-halo{ 0% {box-shadow:var(--sh-float), 0 0 0 0 rgba(143,107,44,.55)} 70% {box-shadow:var(--sh-float), 0 0 0 16px rgba(143,107,44,0)} 100% {box-shadow:var(--sh-float), 0 0 0 0 rgba(143,107,44,0)} } .wa:hover::after{animation-play-state:paused; opacity:0} /* Quem pediu menos movimento no sistema não recebe animação nenhuma. A regra global de base.css já zera, mas deixar explícito evita que uma mudança futura no arquivo reintroduza o efeito sem querer. */ @media (prefers-reduced-motion:reduce){ .wa::after{animation:none; opacity:0} .wa{animation:none} }