/* INSS de Obra Fácil — estilos da landing (usa tokens.css + componentes.css + hero.css) */
html{scroll-behavior:smooth}
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.card__icon .ico{width:100%;height:100%}
.btn .ico{width:18px;height:18px}
.section{position:relative;padding-block:clamp(72px,10vw,140px);border-top:1px solid var(--border)}
.section__head{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-8);max-width:760px}
.section__head .label{color:var(--c-holo-400)}
.section__head p{margin:0;color:var(--text-muted);font-size:var(--fs-body-lg);max-width:60ch}
.grid{display:grid;gap:var(--grid-gap)}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid--4,.grid--2{grid-template-columns:1fr}}
.card h3{margin:0 0 var(--sp-3)}
.card p{margin:0;color:var(--text-muted)}
.card ul{margin:var(--sp-4) 0 0;padding:0;list-style:none;display:grid;gap:8px;color:var(--c-gray-300);font-size:var(--fs-small)}
.card li{display:flex;gap:8px;align-items:flex-start}
.card li .ico{width:16px;height:16px;color:var(--c-success);margin-top:3px}
.steps{counter-reset:s;display:grid;gap:0;list-style:none;margin:0;padding:0;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border)}
.steps li{position:relative;padding:var(--sp-6) var(--sp-5) var(--sp-6) 0;border-right:1px solid var(--border)}
.steps li+li{padding-left:var(--sp-5)}
.steps li:last-child{border-right:0}
.steps .num{font-family:var(--font-display);font-size:3.5rem;line-height:1;color:var(--accent);display:block;margin-bottom:var(--sp-4)}
.steps h3{margin:0 0 var(--sp-3)}
.steps p{margin:0;color:var(--text-muted)}
@media (max-width:900px){.steps{grid-template-columns:1fr}.steps li,.steps li+li{padding:var(--sp-5) 0;border-right:0;border-bottom:1px solid var(--border)}}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-8);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--sp-6)}}
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--sp-4);align-items:center;padding:var(--sp-5) 0;font-weight:var(--fw-semibold);font-size:var(--fs-h4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);font-size:2rem;line-height:1;color:var(--accent);transition:transform var(--dur-base)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 var(--sp-5);color:var(--text-muted);max-width:70ch}
.contact{display:grid;gap:var(--sp-5)}
.contact__actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
.contact__note{font-size:var(--fs-small);color:var(--text-subtle);margin:0}
.resp{display:flex;gap:var(--sp-4);align-items:flex-start}
.resp .ico{width:40px;height:40px;color:var(--accent)}
.resp strong{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.resp span{color:var(--text-muted);font-size:var(--fs-small)}
.footer{border-top:1px solid var(--border);padding-block:var(--sp-7);color:var(--text-subtle);font-size:var(--fs-small)}
.footer__row{display:flex;flex-wrap:wrap;gap:var(--sp-5);justify-content:space-between;align-items:center}
.footer img{height:24px;width:auto;display:block}
.footer p{margin:0}
.footer__legal{margin-top:var(--sp-5)!important;max-width:80ch}
.notice{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-5);border:1px solid rgba(255,178,26,.35);border-radius:var(--radius-2);background:rgba(255,178,26,.05);color:var(--c-gray-300);font-size:var(--fs-small)}
.notice .ico{color:var(--accent);margin-top:1px}
/* Menu mobile */
.mobile-menu{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(5,7,12,.96);backdrop-filter:blur(8px);display:none;flex-direction:column;padding:calc(var(--nav-h) + 16px) var(--gutter) var(--gutter);gap:var(--sp-2)}
.mobile-menu.is-open{display:flex}
.mobile-menu a{font-family:var(--font-display);font-size:2rem;text-transform:uppercase;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--border)}
.mobile-menu .close{position:absolute;top:18px;right:var(--gutter);background:none;border:0;color:var(--text);font-size:2.2rem;cursor:pointer;line-height:1}