/* =====================================================================
   fesouza.css — Design system do novo fesouza.com.br (2026)
   Fonte de verdade visual: fesouza-artes-principais-v1 (artes 01–12 +
   protótipo HTML/CSS da Home). Bloco 1 = CSS do protótipo, preservado.
   Bloco 2 = extensões para componentes que só existem nas artes internas
   (breadcrumb, hero interno, lista numerada, CTA band, tabela de case,
   timeline, citação, dropdown do menu). Sem sombras, sem gradientes
   decorativos, sem animações além das transições do protótipo.
   ===================================================================== */

/* ---------- 1. BASE (protótipo) ---------- */
:root{--ink:#171b18;--muted:#606860;--paper:#fff;--soft:#f3f5f0;--line:#dce1d8;--lime:#c6f36b;--olive:#6b764e;--radius:8px;--max:1220px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:95px}
body{margin:0;background:var(--paper);font-family:Arial,Helvetica,sans-serif;color:var(--ink);font-size:16px;line-height:1.6}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #678d24;outline-offset:5px}
a,button{transition:background .18s,color .18s,transform .18s}
button{cursor:pointer}
img{max-width:100%;height:auto}
.wrap{width:min(var(--max),calc(100% - 112px));margin:auto}
.skip{position:fixed;left:10px;top:-100px;background:var(--lime);padding:12px;z-index:100}
.skip:focus{top:10px}
header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.header-inner{height:88px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.logo{font-size:34px;letter-spacing:-2px;line-height:1;font-weight:800;white-space:nowrap}
.logo span{font-weight:400}
.logo i{color:#709e25;font-style:normal}
.header-inner nav{display:flex;align-items:center;gap:27px;font-size:14px;font-weight:600}
.header-inner nav a:hover{color:#5a7b26}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;border:1px solid transparent;border-radius:5px;background:var(--lime);color:var(--ink);padding:17px 22px;font-weight:700;font-size:15px;line-height:1.4}
.btn:hover{background:#b6e456;transform:translateY(-2px)}
.btn span{font-size:22px;line-height:1}
.btn.small{padding:13px 17px;gap:20px;font-size:14px;background:var(--ink);color:white}
.btn.small:hover{background:#364330}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:#364330}
.menu{display:none}
#mobile-nav{padding:12px 24px;border-top:1px solid var(--line)}
#mobile-nav a{display:block;padding:10px}
.hero{padding:62px 0 58px}
.hero-grid{display:grid;grid-template-columns:1.22fr 1fr;gap:66px;align-items:center}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.7px;line-height:1.5;margin:0 0 28px;text-transform:uppercase}
.rule{display:inline-block;width:28px;height:2px;background:currentColor;vertical-align:middle;margin-right:10px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(54px,5.35vw,76px);letter-spacing:-4px;line-height:1.025;margin-bottom:28px;font-weight:600}
em{font-style:normal;color:var(--olive)}
h1 em{position:relative;white-space:nowrap;color:var(--ink);background:linear-gradient(transparent 67%,var(--lime) 67%,var(--lime) 94%,transparent 94%)}
.lead{max-width:525px;font-size:17px;line-height:1.7;color:#536052;margin-bottom:28px}
.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.text-link{font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:18px;text-decoration:underline;text-underline-offset:5px}
.text-link:hover{color:#688834}
.hero-note{font-size:12px;color:#687166;margin:20px 0 0}
.portrait{align-self:stretch;min-height:570px;position:relative;border-radius:8px;overflow:hidden;background:#252925}
.portrait img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:grayscale(1);transform:scale(1.04)}
.portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,15,7,.55),transparent 25%,transparent 65%,rgba(8,15,7,.7))}
.portrait-top{position:absolute;top:28px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:start;color:white;z-index:2;font-size:12px;letter-spacing:1.4px;line-height:1.5}
.corner{color:var(--lime);font-size:46px;line-height:1}
.portrait-caption{position:absolute;bottom:0;left:0;right:0;background:var(--ink);min-height:133px;z-index:3;padding:26px 28px;display:flex;align-items:center;justify-content:space-between;color:white}
.portrait-caption strong{font-size:23px;letter-spacing:-.6px;display:block}
.portrait-caption div>span{font-size:13px;color:#b8c0b4}
.portrait-year{border-left:1px solid #5b6654;padding-left:25px;font-size:11px;letter-spacing:1px;line-height:1.5;color:var(--lime)}
.portrait-year b{font-size:25px;letter-spacing:-1px}
.experience{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.experience-inner{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:27px 0}
.experience p{font-size:12px;line-height:1.6;color:#66705f;margin:0}
.brands{display:flex;align-items:center;gap:60px}
.brands>span{font-weight:800;font-size:27px;letter-spacing:-1px}
.samsung{font-size:23px!important;letter-spacing:1px!important;line-height:1}
.samsung small{font-size:9px;letter-spacing:4px;display:block;text-align:right;margin-top:5px}
.nivea{letter-spacing:-1.4px!important}
.eucerin{font-family:Georgia,serif;font-weight:400!important}
.context{font-size:11px!important}
.results{background:var(--ink);color:#fff;padding:65px 0 38px}
.section-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}
.section-top .eyebrow{margin:0}
.mono{font:11px/1.5 'Courier New',monospace;letter-spacing:.7px;color:#5f6b5a}
.results .mono{color:#b0b9a9}
.results .eyebrow{color:var(--lime)}
h2{font-size:clamp(35px,3.7vw,50px);letter-spacing:-2px;line-height:1.12;font-weight:500;margin-bottom:28px}
.results h2 em{color:var(--lime)}
.result-heading{display:flex;justify-content:space-between;align-items:end;gap:50px}
.result-heading h2{margin-bottom:30px}
.result-heading>p{font-size:15px;color:#b4beaf;max-width:300px;margin-bottom:35px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}
.stats article{border-top:1px solid #4b5446;padding:22px 0 24px}
.stats article>p{font-size:14px;color:#c3cbbb;margin-bottom:10px}
.stats strong{display:block;font-size:clamp(36px,4.8vw,65px);line-height:1.2;letter-spacing:-3px;font-weight:400;margin-bottom:18px}
.stats article>div{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:#b0b9a9}
.stats b{border:1px solid #566e36;border-radius:4px;color:var(--lime);padding:3px 8px;font-size:12px;font-weight:400}
.result-bottom{border-top:1px solid #394234;padding-top:24px;display:flex;justify-content:space-between;gap:30px;align-items:center}
.result-bottom p{font-size:12px;color:#c1c9bb;margin:0;line-height:1.7}
.result-bottom small{font-size:11px;color:#a8b2a2}
.result-bottom .text-link{font-size:13px;color:var(--lime);white-space:nowrap}
.section{padding:90px 0}
.section-intro{display:flex;justify-content:space-between;gap:65px;align-items:start;margin-bottom:12px}
.section-intro>p{max-width:335px;color:var(--muted);font-size:16px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.service{background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:28px 27px 24px;display:flex;flex-direction:column;min-height:350px}
.service:hover{transform:translateY(-4px);border-color:#8eaa6a}
.service.featured{background:var(--lime);border-color:var(--lime)}
.service-number{display:flex;justify-content:space-between;font-family:'Courier New',monospace;font-size:13px;margin-bottom:38px}
.service-number>span{font:28px Arial}
.service h3{font-size:25px;line-height:1.25;font-weight:500;letter-spacing:-.8px;margin-bottom:18px}
.service p{font-size:15px;color:#5e6859;line-height:1.7;flex:1}
.featured p{color:#384c27}
.service-label{display:block;border-top:1px solid #cdd5c5;padding-top:18px;margin-top:15px;font-size:12px;font-weight:600}
.featured .service-label{border-color:#9cc54f}
.service-foot{display:flex;justify-content:space-between;gap:30px;padding-top:24px;font-size:13px;color:#646d5e}
.service-foot a{text-decoration:underline;text-underline-offset:4px}
.about{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:100px}
.about h2{font-size:43px}
.since{border-top:1px solid var(--line);margin-top:50px;padding-top:25px;display:flex;align-items:center;gap:22px}
.since strong{font-size:52px;letter-spacing:-3px;font-weight:400}
.since span{font-size:13px;color:var(--muted)}
.about-copy p{font-size:16px;color:#5a6554}
.about-copy .large-copy{font-size:24px;letter-spacing:-.5px;line-height:1.45;color:var(--ink);margin-bottom:28px}
.about-copy .text-link{margin-top:10px}
.about-copy .actions{margin-top:10px}
.steps{list-style:none;padding:0;margin:45px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:35px}
.steps li{border-top:1px solid #afb9a5;padding-top:22px}
.steps li>span{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:var(--soft);font-size:12px;margin-bottom:26px}
.steps h3{font-size:25px;font-weight:500;letter-spacing:-.7px;margin-bottom:12px}
.steps p{font-size:15px;color:var(--muted)}
.steps small{font-size:12px;color:#5c7540}
.journal{background:var(--soft)}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:38px;border-top:1px solid #b9c2b1}
.article-grid>a{display:flex;flex-direction:column;padding:28px 30px 0 0;margin-right:30px;border-right:1px solid var(--line)}
.article-grid>a:last-child{border:none;margin:0;padding-right:0}
.article-grid .eyebrow{font-size:11px;color:#5f6b5a;margin-bottom:24px}
.article-grid h3{font-weight:400;font-size:24px;line-height:1.35;letter-spacing:-.6px;flex:1}
.read{display:flex;justify-content:space-between;font-size:13px;margin-top:15px}
.read span{font-size:24px}
.article-grid>a:hover h3{text-decoration:underline;text-underline-offset:5px}
.faq-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:100px}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;font-size:16px;font-weight:500;padding:22px 35px 22px 0;position:relative}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';position:absolute;right:0;font-size:24px;top:16px;color:#64764c}
details[open] summary:after{content:'−'}
details p{font-size:15px;color:var(--muted);padding-right:20px;margin-bottom:23px}
.contact{padding:80px 0;background:var(--lime)}
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:100px}
.contact h2{font-size:52px;letter-spacing:-2.7px}
.contact h2 em{color:#526c32}
.contact p{font-size:16px;color:#435831}
.contact .eyebrow{font-size:12px;color:var(--ink)}
.email{font-size:16px;display:inline-flex;gap:35px;margin-top:12px;text-decoration:underline;text-underline-offset:6px}
.contact form{background:#fff;border-radius:8px;padding:35px;align-self:center}
.contact h3{font-size:25px;font-weight:500;letter-spacing:-.7px;margin-bottom:24px}
.contact label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.contact label span{font-weight:400;color:#72786d}
input,select,textarea{width:100%;border:1px solid #cbd2c4;background:white;color:var(--ink);border-radius:4px;padding:12px;font-size:15px;min-height:48px;margin-bottom:18px}
textarea{min-height:96px;resize:vertical}
input::placeholder,textarea::placeholder{color:#7c8276}
.contact button{width:100%;margin-top:5px;background:var(--ink);color:var(--lime)}
.contact button:hover{background:#34432d}
.contact .form-note{font-size:12px;color:#66705f;line-height:1.6;margin:16px 0 0}
#form-status{font-size:13px;margin:12px 0 0}
footer{background:var(--ink);color:#fff;padding:40px 0 20px}
.footer-top{display:flex;align-items:center;gap:40px;padding-bottom:32px}
.footer-top .logo{margin-right:20px}
.footer-top .logo i{color:var(--lime)}
.footer-top p{font-size:13px;color:#aeb8a6;margin:0 auto 0 0}
.footer-top>a:not(.logo){font-size:13px}
.footer-bottom{display:flex;justify-content:space-between;gap:30px;border-top:1px solid #3a4333;padding-top:22px;font-size:11px;color:#aeb8a6}
.footer-bottom a{text-decoration:underline;text-underline-offset:4px}

/* ---------- 2. EXTENSÕES (artes internas 02–09 + menu do doc 16) ---------- */

/* Footer: linha de links canônicos (artes 02–09) */
.footer-links{display:flex;flex-wrap:wrap;gap:8px 26px;padding:0 0 26px;font-size:13px;color:#d6dccf;list-style:none;margin:0}
.footer-links a:hover{color:var(--lime)}

/* Header: dropdown "Como posso ajudar" (doc 16) */
.header-inner nav{position:relative}
.has-menu{position:relative}
.has-menu>button{background:none;border:0;padding:0;color:inherit;font:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.has-menu>button:after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.has-menu>button:hover{color:#5a7b26}
.submenu{position:absolute;top:calc(100% + 22px);left:-18px;min-width:290px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px;display:none;z-index:30;list-style:none;margin:0}
.submenu:before{content:"";position:absolute;top:-23px;left:0;right:0;height:23px}
.has-menu[data-open="true"]>.submenu,.has-menu:hover>.submenu,.has-menu:focus-within>.submenu{display:block}
.submenu a{display:block;padding:11px 14px;border-radius:4px;font-weight:600;font-size:14px}
.submenu a:hover,.submenu a:focus-visible{background:var(--soft);color:#5a7b26}
.header-inner nav a[aria-current="page"],.submenu a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-color:#9cc54f;text-decoration-thickness:2px}
#mobile-nav .group{padding:10px 10px 4px;font-size:11px;letter-spacing:1.5px;font-weight:700;color:#66705f;text-transform:uppercase}
#mobile-nav .sub{padding-left:22px;font-size:15px}

/* Breadcrumb (artes 02–09) */
.breadcrumb{padding:26px 0 0;font-size:12px;color:#66705f}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.breadcrumb li+li:before{content:"/";margin-right:10px;color:#66705f}
.breadcrumb a{text-decoration:underline;text-underline-offset:4px}
.breadcrumb [aria-current]{color:var(--ink)}

/* Hero interno (artes 02–09): H1 menor, segunda linha em oliva, card lateral opcional */
.hero.inner{padding:46px 0 62px;border-bottom:1px solid var(--line)}
.hero.inner .hero-grid{grid-template-columns:1.35fr .95fr;gap:70px;align-items:start}
.hero.inner .hero-grid.single{grid-template-columns:minmax(0,860px)}
.hero.inner h1{font-size:clamp(42px,4.5vw,60px);letter-spacing:-2.6px;line-height:1.08}
.hero.inner h1 em{color:var(--olive);background:none;white-space:normal}
.hero.inner .lead{max-width:600px}
.hero.inner .hero-note{font-size:12px;color:#687166;margin-top:22px}
.aside-card{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:30px 32px 26px;margin-top:38px}
.aside-card .eyebrow{font-size:11px;color:#66705f;margin-bottom:16px}
.aside-card h2,.aside-card h3{font-size:24px;letter-spacing:-.7px;line-height:1.25;font-weight:500;margin-bottom:18px}
.aside-card ul{margin:0;padding-left:20px;font-size:14px;line-height:1.8;color:#3d463b}
.aside-card ul li{margin-bottom:4px}
.hero.inner .portrait{min-height:520px;margin-top:0}

/* Cabeçalho de seção em 2 colunas + lista numerada (artes 02–06, 09) */
.section.alt{background:var(--soft)}
.section.line{border-top:1px solid var(--line)}
.feature-grid{display:grid;grid-template-columns:.85fr 1.35fr;gap:100px;align-items:start}
.feature-grid .eyebrow{color:#66705f}
.feature-grid h2{font-size:clamp(34px,3.4vw,46px)}
.feature-grid>div>p{color:var(--muted);font-size:15px;max-width:360px}
.feature-list{list-style:none;margin:0;padding:0;border-top:1px solid #c9d1c2}
.feature-list li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:24px 0 22px;border-bottom:1px solid var(--line)}
.feature-list li>span{font:12px/1.6 'Courier New',monospace;color:#5a6554;padding-top:6px}
.feature-list h3{font-size:22px;font-weight:500;letter-spacing:-.6px;margin-bottom:10px}
.feature-list p{font-size:15px;color:var(--muted);margin:0;line-height:1.7}
.feature-list.compact li{padding:18px 0}
.feature-list.compact h3{font-size:18px;margin-bottom:6px}
.feature-list ul{margin:8px 0 0;padding-left:18px;font-size:15px;color:var(--muted)}

/* Lista simples de tópicos (quando o MD traz só bullets) */
.topic-list{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.topic-list li{break-inside:avoid;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;color:#3d463b}

/* CTA band (artes 02–06) */
.cta-band{background:var(--lime);padding:52px 0}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px}
.cta-band h2{font-size:clamp(26px,2.6vw,34px);letter-spacing:-1.2px;margin-bottom:10px;font-weight:500}
.cta-band p{margin:0;color:#435831;font-size:15px}
.cta-band .btn{white-space:nowrap}

/* Tabela de case (arte 06) */
.case-table{width:100%;border-collapse:collapse;font-size:15px}
.case-table th{font-weight:400;font-size:12px;color:#5f6b5a;text-align:left;padding:0 12px 14px 0;border-bottom:1px solid #c9d1c2;letter-spacing:.3px}
.case-table td{padding:18px 12px 18px 0;border-bottom:1px solid var(--line);vertical-align:top}
.case-table th:last-child,.case-table td:last-child{text-align:right;padding-right:0}
.case-table td.delta{color:#4d6a24;font-weight:700}
.case-table caption{text-align:left;font-size:12px;color:#66705f;caption-side:bottom;padding-top:14px}

/* Timeline em colunas (arte 02) e vertical (doc 05) */
.timeline{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.timeline li{border-top:1px solid #b9c2b1;padding-top:26px}
.timeline strong{display:block;font-size:34px;font-weight:400;letter-spacing:-1.5px;margin-bottom:14px}
.timeline h3{font-size:20px;font-weight:500;letter-spacing:-.5px;margin-bottom:12px}
.timeline p{font-size:15px;color:var(--muted);margin:0}
.timeline.vertical{grid-template-columns:1fr;gap:0;margin-top:0;border-top:1px solid #c9d1c2}
.timeline.vertical li{display:grid;grid-template-columns:150px 1fr;gap:20px;border-top:0;border-bottom:1px solid var(--line);padding:20px 0}
.timeline.vertical strong{font:13px/1.6 'Courier New',monospace;letter-spacing:.5px;color:#5a6554;margin:0;padding-top:3px}
.timeline.vertical h3{font-size:19px;margin-bottom:4px}

/* Citação com barra lime (arte 02) */
.quote{margin:34px 0 0;padding:4px 0 4px 22px;border-left:3px solid var(--lime);font-size:15px;color:#3d463b;line-height:1.7}

/* Duo: dois blocos lado a lado (Home: Consultor SEO + Laboratório) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.duo>div{border:1px solid var(--line);border-radius:6px;padding:34px 32px 30px;display:flex;flex-direction:column;background:#fff}
.duo .eyebrow{color:#66705f;margin-bottom:20px}
.duo h2{font-size:clamp(28px,2.7vw,36px);letter-spacing:-1.3px;margin-bottom:14px}
.duo p{font-size:15px;color:var(--muted);flex:1;margin-bottom:24px}

/* Contato como página (arte 09): formulário em fundo claro */
.contact.light{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact.light h2{font-size:44px;letter-spacing:-2px}
.contact.light p{color:var(--muted)}
.contact.light form{border:1px solid var(--line)}
.contact-lines{list-style:none;margin:30px 0 0;padding:0}
.contact-lines li{border-top:1px solid var(--line);padding:18px 0}
.contact-lines small{display:block;font-size:12px;color:#66705f;margin-bottom:6px}
.contact-lines a{font-size:16px;text-decoration:underline;text-underline-offset:5px}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Prose (blocos de texto corrido nas páginas internas) */
.prose p{font-size:16px;color:#3d463b;line-height:1.75;max-width:720px}
.prose p.large{font-size:21px;letter-spacing:-.4px;line-height:1.45;color:var(--ink)}
.prose ul{padding-left:20px;color:#3d463b;max-width:720px}
.prose ul li{margin-bottom:8px}

/* Related links (interlinking) */
.related-section{padding:48px 0}
.related{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.related a{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:6px;padding:16px 18px;font-size:14px;font-weight:600;background:#fff}
.related a:hover{border-color:#8eaa6a;color:#5a7b26}
.related a span{font-size:20px;color:#64764c}
.steps.cols-3{grid-template-columns:repeat(3,1fr)}
.feature-list h3 a{text-decoration:underline;text-underline-offset:5px;text-decoration-color:#b9c2b1}
.feature-list h3 a:hover{color:#5a7b26}

/* Blog — índice (arte 07) */
.blog-list{padding-top:70px}
.blog-list>.wrap>.eyebrow{color:#66705f}
.blog-list>.wrap>.eyebrow a{text-decoration:underline;text-underline-offset:4px}
.featured-post{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:center;background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:46px 48px;margin-bottom:48px}
.featured-post .eyebrow{color:#66705f;margin-bottom:22px}
.featured-post h2{font-size:clamp(28px,2.9vw,38px);letter-spacing:-1.3px;margin-bottom:16px}
.featured-post h2 a:hover{text-decoration:underline;text-underline-offset:6px}
.featured-post>div>p{color:var(--muted);font-size:16px;margin-bottom:22px}
.featured-card{background:var(--ink);color:#fff;border-radius:8px;padding:40px 40px 36px;min-height:290px;display:flex;flex-direction:column;justify-content:center}
.featured-card .eyebrow{color:var(--lime);margin-bottom:14px}
.featured-card strong{display:block;font-size:clamp(40px,4vw,54px);line-height:1.08;letter-spacing:-2px;font-weight:400;color:var(--lime);margin-bottom:14px}
.featured-card .mono{color:#b0b9a9}
.post-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
.post-card{border-top:1px solid #b9c2b1;padding:30px 0 34px;display:flex;flex-direction:column}
.post-card .eyebrow{color:#66705f;margin-bottom:20px}
.post-card h2{font-size:26px;letter-spacing:-.8px;line-height:1.25;margin-bottom:14px;font-weight:400}
.post-card h2 a:hover{text-decoration:underline;text-underline-offset:6px}
.post-card>p{color:var(--muted);font-size:15px;margin-bottom:18px;flex:1}

/* Blog — artigo (arte 08) */
.post-hero .hero-copy{max-width:860px}
.post-hero h1{font-size:clamp(38px,4.4vw,58px)}
.post-hero .lead{max-width:720px}
.author-line{display:flex;align-items:center;gap:14px;margin:26px 0 0;font-size:13px;color:#66705f}
.author-line img{width:40px;height:40px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.author-line strong{color:var(--ink);font-size:14px}
.post-section{padding-top:70px}
.post-grid-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:90px;align-items:start}
.toc{position:sticky;top:110px;border-top:1px solid var(--line);padding-top:22px}
.toc .eyebrow{font-size:11px;margin-bottom:14px}
.toc ol{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.5}
.toc li{margin-bottom:12px}
.toc a{color:#5a6554}
.toc a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.post-body{max-width:760px}
.post-body h2{font-size:clamp(26px,2.6vw,32px);letter-spacing:-1px;margin:46px 0 16px;font-weight:500}
.post-body h2:first-child{margin-top:0}
.post-body h3{font-size:21px;letter-spacing:-.5px;margin:34px 0 12px;font-weight:500}
.post-body p,.post-body li{font-size:17px;line-height:1.75;color:#2f3a2e}
.post-body p{margin-bottom:20px}
.post-body ul,.post-body ol{padding-left:22px;margin-bottom:22px}
.post-body li{margin-bottom:8px}
.post-body a{text-decoration:underline;text-underline-offset:4px;color:#4d6a24}
.post-body a:hover{color:var(--ink)}
.post-body img{border-radius:6px;margin:10px 0 24px}
.post-body blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--lime);color:#3d463b}
.post-body table{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:24px}
.post-body th,.post-body td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.post-body th{font-size:12px;color:#6c775f;font-weight:600}
.post-body code{font-family:'Courier New',monospace;font-size:.92em;background:var(--soft);padding:2px 6px;border-radius:3px}
.post-body pre{background:var(--ink);color:#e6ebe0;padding:20px;border-radius:6px;overflow:auto;font-size:14px;margin-bottom:24px}
.post-body pre code{background:none;color:inherit;padding:0}
.author-box{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:30px 32px;margin-top:52px}
.author-box h2{font-size:22px;margin:0 0 10px;letter-spacing:-.6px}
.author-box p{font-size:15px;color:#3d463b;margin-bottom:16px}

/* Metric cards — camada visual dos indicadores do case (HTML + CSS, referência aprovada) */
.metric-cards{list-style:none;margin:56px 0 0;padding:34px 36px 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--soft);border:1px solid var(--line);border-radius:8px}
.metric{min-width:0;padding:0 36px;display:grid;grid-template-rows:auto 1fr}
.metric:first-child{padding-left:0}
.metric:last-child{padding-right:0}
.metric+.metric{border-left:1px solid #cdd5c5}
.metric-head{margin-bottom:6px}
.metric-head h3{font-size:17px;font-weight:400;letter-spacing:-.2px;margin:0 0 10px;color:var(--ink)}
.metric-delta{display:block;font-size:34px;font-weight:700;letter-spacing:-1.4px;color:#4d6a24;line-height:1}
.metric-chart{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:6px;height:190px;margin-top:-36px}
.metric-bar{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;height:100%}
.metric-bar b{display:block;font-weight:400;font-size:17px;letter-spacing:-.4px;color:var(--ink);margin-bottom:8px;text-align:center;white-space:nowrap}
.metric-bar i{display:block;height:calc(var(--h) * .78);min-height:16px;border-radius:5px 5px 2px 2px;background:#c9d1bf}
.metric-bar small{display:block;font-size:13px;color:#66705f;text-align:center;margin-top:10px}
.metric-bar.after b{font-size:19px}
.metric-bar.after i{background:var(--olive)}
.metric-rise{position:relative;height:100%;display:block;margin-bottom:33px}
.metric-rise span{position:absolute;left:-10px;right:-2px;bottom:calc(var(--rise) * .78 + 10px);top:40%;border-bottom:2px solid #b4beaf;border-right:2px solid #b4beaf;border-radius:0 0 85% 0}
.metric-rise span:after{content:"";position:absolute;top:-6px;right:-7px;width:9px;height:9px;border-left:2px solid #b4beaf;border-top:2px solid #b4beaf;transform:rotate(45deg)}
.metric-data{display:none}

/* Gallery — prova visual (portfólio editorial, sem mockup) */
.gallery-section .section-intro{margin-bottom:40px;align-items:end}
.gallery-section .section-intro>div:last-child{max-width:460px}
.gallery-sub{font-size:19px;letter-spacing:-.3px;line-height:1.45;color:var(--ink);margin-bottom:14px}
.gallery-section .section-intro p:not(.gallery-sub):not(.eyebrow){color:var(--muted);font-size:15px;margin:0}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:44px 36px}
.gallery-item{margin:0;min-width:0}
.gallery-open{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--soft);overflow:hidden;cursor:zoom-in;transition:border-color .18s}
.gallery-open:hover{border-color:#8eaa6a}
.gallery-open img{display:block;width:100%;height:auto;aspect-ratio:1200/900}
.gallery-item figcaption{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:16px 4px 0;font-size:14px;color:var(--muted);line-height:1.55}
.gallery-item figcaption strong{font-weight:600;color:var(--ink)}
.lightbox{border:0;padding:0;background:transparent;max-width:min(1363px,calc(100vw - 32px));max-height:calc(100vh - 32px);width:auto}
.lightbox::backdrop{background:rgba(23,27,24,.88)}
.lightbox-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;color:#fff;padding:0 0 12px}
.lightbox-bar p{margin:0;font-size:14px;color:#d6dccf}
.lightbox-bar button{background:transparent;border:1px solid #5b6654;color:#fff;border-radius:4px;padding:8px 12px;font-size:13px;margin-left:8px}
.lightbox-bar button:hover{background:#364330}
.lightbox img{display:block;max-width:100%;max-height:calc(100vh - 90px);width:auto;height:auto;border-radius:6px;background:#fff}

/* Utilidades */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mt-0{margin-top:0!important}
.mb-0{margin-bottom:0!important}

/* ---------- 3. RESPONSIVO (protótipo + extensões) ---------- */
@media(min-width:1500px){.hero{padding:76px 0}.hero-grid{gap:90px}.hero.inner{padding:56px 0 70px}}
@media(max-width:1100px){
.wrap{width:calc(100% - 64px)}
.header-inner nav{gap:17px;font-size:12px}
.hero-grid{gap:38px}
.hero .actions{gap:17px}
.portrait{min-height:550px}
.brands{gap:35px}
.context{display:none}
.about-grid,.contact-grid{gap:60px}
.faq-grid{gap:55px}
.service{padding:23px 20px}
.service h3{font-size:23px}
.result-bottom{align-items:start}
.result-bottom .text-link{white-space:normal}
h1{letter-spacing:-3px}
.about h2{font-size:37px}
.feature-grid{gap:50px}
.hero.inner .hero-grid{gap:40px}
.service-grid.cols-4{grid-template-columns:repeat(2,1fr)}
.steps.cols-3{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:800px){
.wrap{width:calc(100% - 40px)}
.header-inner{height:73px;gap:15px}
.header-inner nav{display:none}
.header-inner>.btn{margin-left:auto}
.logo{font-size:30px}
.menu{display:block;border:1px solid var(--line);background:white;font-size:13px;padding:10px;border-radius:4px}
.hero{padding:38px 0 40px}
.hero-grid{gap:30px;grid-template-columns:1fr 0.85fr}
.eyebrow{font-size:10px;letter-spacing:1px}
.hero .eyebrow{font-size:9px}
.rule{width:15px}
h1{font-size:48px;letter-spacing:-2.7px}
.lead{font-size:15px}
.portrait{min-height:530px}
.portrait-caption{padding:20px;min-height:132px}
.portrait-caption strong{font-size:19px}
.portrait-caption div>span{font-size:11px}
.portrait-year{display:none}
.portrait-top{top:20px;left:20px;right:20px;font-size:10px}
.hero .btn{padding:15px;font-size:13px;gap:15px}
.hero-note{font-size:11px}
.experience-inner{gap:24px}
.brands{gap:30px}
.experience p{font-size:11px}
.section{padding:65px 0}
h2{font-size:36px;letter-spacing:-1.6px}
.section-intro{gap:30px}
.section-intro>p{max-width:270px;font-size:14px}
.stats{gap:25px}
.stats strong{font-size:43px;letter-spacing:-2px}
.stats article>div{flex-wrap:wrap}
.service-grid{gap:10px}
.service{padding:18px 15px}
.service h3{font-size:20px}
.service p{font-size:14px}
.service-label{font-size:11px}
.service-foot{font-size:12px}
.about-grid{gap:35px}
.about h2{font-size:32px}
.since{gap:13px}
.since strong{font-size:42px}
.since span{font-size:11px}
.about-copy .large-copy{font-size:20px}
.steps{gap:22px}
.steps h3{font-size:22px}
.steps p{font-size:14px}
.steps small{font-size:11px}
.article-grid h3{font-size:21px}
.article-grid>a{padding-right:18px;margin-right:18px}
.faq-grid{gap:35px;grid-template-columns:.9fr 1.2fr}
.contact-grid{gap:40px}
.contact h2{font-size:40px;letter-spacing:-1.8px}
.contact form{padding:25px}
.contact h3{font-size:22px}
.footer-top{gap:24px}
.footer-top .logo{margin:0}
.hero.inner .hero-grid{grid-template-columns:1fr}
.hero.inner h1{font-size:clamp(38px,7vw,52px);letter-spacing:-2px}
.aside-card{margin-top:10px}
.feature-grid{grid-template-columns:1fr;gap:30px}
.gallery{grid-template-columns:1fr;gap:34px}
.gallery-section .section-intro>div:last-child{max-width:none}
.metric-cards{grid-template-columns:1fr;margin-top:40px;padding:8px 22px}
.metric{padding:24px 0}
.metric+.metric{border-left:0;border-top:1px solid #cdd5c5}
.metric-chart{height:170px}
.feature-grid>div>p{max-width:none}
.timeline{grid-template-columns:1fr;gap:26px}
.timeline.vertical li{grid-template-columns:110px 1fr}
.duo{grid-template-columns:1fr}
.featured-post{grid-template-columns:1fr;gap:28px;padding:30px}
.post-grid-layout{grid-template-columns:1fr;gap:30px}
.toc{position:static}
.cta-band .wrap{flex-direction:column;align-items:flex-start}
.topic-list{columns:1}
}
@media(max-width:600px){
html{scroll-padding-top:90px}
.header-inner>.btn{font-size:12px;padding:11px 12px;gap:12px}
.header-inner>.btn span{font-size:17px}
.menu{font-size:12px;padding:10px 8px}
.logo{font-size:27px;letter-spacing:-1.5px}
.hero-grid{grid-template-columns:1fr}
.hero .eyebrow{font-size:10px;margin-bottom:24px}
h1{font-size:clamp(48px,12.9vw,72px);letter-spacing:-2.8px;line-height:1.04}
.hero.inner h1{font-size:clamp(36px,9.5vw,46px);letter-spacing:-1.8px}
.lead{font-size:16px}
.actions{gap:18px!important}
.hero .btn{font-size:14px;padding:16px 18px}
.hero-note{font-size:11px;max-width:300px;line-height:1.8}
.portrait{min-height:420px;margin-top:9px}
.portrait img{object-position:center 20%;height:125%;top:-5%}
.portrait-caption{min-height:110px;padding:19px 24px}
.portrait-caption strong{font-size:22px}
.portrait-caption div>span{font-size:12px}
.portrait-year{display:block}
.portrait-top{font-size:11px;top:24px;left:24px}
.experience-inner{display:block;padding:25px 0}
.experience p br{display:none}
.experience p{font-size:12px;margin-bottom:20px}
.brands{justify-content:flex-start;flex-wrap:wrap;gap:12px 28px}
.brands>span{font-size:24px}
.samsung{font-size:19px!important}
.results{padding:42px 0 32px}
.section-top{display:block;margin-bottom:26px}
.section-top .eyebrow{margin-bottom:12px}
.mono{font-size:10px}
.result-heading{display:block}
.result-heading>p{max-width:none;margin-bottom:28px;font-size:15px}
.result-heading h2{margin-bottom:18px}
h2{font-size:36px;letter-spacing:-1.6px}
.stats{grid-template-columns:1fr;gap:0}
.stats article{display:grid;grid-template-columns:1fr auto;gap:0 15px;align-items:center;padding:20px 0}
.stats article>p{grid-column:1/-1;font-size:13px;margin-bottom:12px}
.stats strong{font-size:48px;margin:0}
.stats article>div{display:flex;flex-direction:column;align-items:end;font-size:12px;gap:7px}
.result-bottom{display:block}
.result-bottom p{font-size:11px;margin-bottom:20px}
.result-bottom small{font-size:11px}
.section{padding:54px 0}
.section-intro{display:block;margin-bottom:25px}
.section-intro>p{max-width:none;font-size:15px}
.service-grid,.service-grid.cols-4{grid-template-columns:1fr;gap:15px}
.service{padding:25px;min-height:300px}
.service-number{margin-bottom:24px}
.service h3{font-size:26px}
.service h3 br{display:none}
.service p{font-size:15px}
.service-label{font-size:12px}
.service-foot{display:block;font-size:12px}
.service-foot>a{display:block;margin-top:12px}
.about-grid{grid-template-columns:1fr;gap:32px}
.about h2{font-size:35px}
.since{margin-top:32px;padding-top:15px}
.since strong{font-size:49px}
.since span{font-size:13px}
.about-copy .large-copy{font-size:22px}
.steps,.steps.cols-3{grid-template-columns:1fr 1fr;gap:28px 22px;margin-top:35px}
.steps li>span{margin-bottom:20px}
.steps h3{font-size:24px}
.steps p{font-size:15px}
.steps small{font-size:11px}
.journal .section-top{display:flex;align-items:start;gap:15px}
.journal .section-top .text-link{font-size:12px;gap:8px;white-space:nowrap}
.journal .section-top .eyebrow{font-size:9px;max-width:150px}
.article-grid{grid-template-columns:1fr;margin-top:28px}
.article-grid>a{padding:25px 0;border-right:none;border-bottom:1px solid #b9c2b1;margin:0}
.article-grid>a:last-child{padding-top:25px}
.article-grid h3{font-size:25px;max-width:330px}
.article-grid .eyebrow{margin-bottom:16px}
.read{margin-top:0}
.faq-grid{grid-template-columns:1fr;gap:15px}
summary{font-size:15px;padding:20px 30px 20px 0}
.contact{padding:52px 0}
.contact-grid{grid-template-columns:1fr;gap:35px}
.contact h2{font-size:43px;letter-spacing:-2px}
.contact form{padding:27px 24px}
.footer-top{flex-wrap:wrap;gap:25px}
.footer-top p{width:calc(100% - 135px);margin:0;font-size:12px}
.footer-bottom{display:block;font-size:11px}
.footer-bottom a{display:block;margin-top:13px}
.feature-list li{grid-template-columns:36px 1fr;gap:12px}
.feature-list h3{font-size:20px}
.cta-band{padding:40px 0}
.cta-band .btn{white-space:normal}
.case-table{font-size:14px}
.gallery-item figcaption{grid-template-columns:1fr;gap:4px;padding-top:12px}
.gallery-sub{font-size:17px}
.lightbox-bar{flex-wrap:wrap}
.metric-cards{padding:6px 18px}
.metric-delta{font-size:30px}
.metric-bar b{font-size:16px}
.metric-bar.after b{font-size:18px}
.metric-chart{height:160px;gap:4px}
.case-table th,.case-table td{padding-right:8px}
.timeline.vertical li{grid-template-columns:1fr;gap:4px}
.duo>div{padding:26px 22px}
.post-grid{grid-template-columns:1fr}
.post-card h2{font-size:24px}
.featured-post{padding:24px 20px}
.featured-card{padding:28px 24px;min-height:0}
.post-body p,.post-body li{font-size:16px}
.breadcrumb{padding-top:18px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}a,button{transition:none}.btn:hover,.service:hover{transform:none}}