/*
Theme Name: Erosac Modern
Description: Tema institucional enxuto para a Erosac.
Version: 1.0.0
Text Domain: erosac-modern
*/

:root { --ink:#171b1e; --steel:#647078; --paper:#f4f7f8; --line:#dce3e6; --orange:#ed6a23; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Segoe UI", Arial, sans-serif; line-height:1.55; }
a { color:inherit; }
.wrap { width:min(1120px, calc(100% - 40px)); margin-inline:auto; }
.site-header { position:absolute; inset:0 0 auto; z-index:2; color:#fff; }
.header-row { min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:28px; border-bottom:1px solid rgba(255,255,255,.24); }
.brand { color:#fff; font-size:1.24rem; font-weight:800; letter-spacing:.16em; text-decoration:none; }
.brand small { display:block; margin-top:2px; color:#d7dee1; font-size:.62rem; font-weight:600; letter-spacing:.11em; }
.menu { display:flex; gap:24px; font-size:.83rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.menu a { text-decoration:none; }
.menu a:hover, .menu a:focus-visible { color:#ff9b60; }
.hero { position:relative; min-height:690px; display:flex; align-items:center; color:#fff; overflow:hidden; background:#20272b url('assets/erosac-maquina-hero.png') center / cover no-repeat; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(12,17,20,.90) 0%, rgba(18,23,26,.70) 36%, rgba(18,23,26,.08) 66%, rgba(18,23,26,.12) 100%); }
.hero-content { position:relative; padding:144px 0 96px; max-width:585px; }
.eyebrow { display:flex; align-items:center; gap:10px; color:#ffaf7e; font-size:.75rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow::before { content:""; width:28px; height:2px; background:var(--orange); }
h1, h2, h3 { margin:0; line-height:1.06; }
h1 { margin-top:18px; font-size:clamp(2.75rem, 6vw, 5.8rem); letter-spacing:-.05em; }
.hero p { max-width:500px; margin:24px 0 32px; color:#e2e7e9; font-size:1.13rem; }
.button { display:inline-flex; align-items:center; min-height:49px; padding:0 23px; background:var(--orange); color:#fff; font-size:.82rem; font-weight:800; letter-spacing:.07em; text-decoration:none; text-transform:uppercase; transition:background .2s, transform .2s; }
.button:hover, .button:focus-visible { background:#c95114; transform:translateY(-2px); }
.intro { padding:96px 0; display:grid; grid-template-columns:1fr 1.25fr; gap:80px; border-bottom:1px solid var(--line); }
.section-label { color:var(--orange); font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h2 { font-size:clamp(2rem, 4vw, 3.7rem); letter-spacing:-.04em; }
.intro h2 { margin-top:16px; }
.intro-copy { font-size:1.08rem; color:#3f494f; }
.services { padding:84px 0 96px; }
.services-head { max-width:620px; }
.services-head h2 { margin-top:16px; }
.cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:44px; }
.card { min-height:214px; padding:28px; background:#fff; border:1px solid var(--line); }
.card-number { color:var(--orange); font-size:.8rem; font-weight:800; letter-spacing:.1em; }
.card h3 { margin-top:42px; font-size:1.23rem; }
.card p { margin:12px 0 0; color:#58636a; font-size:.96rem; }
.process { padding:0 0 96px; }
.process-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; max-width:560px; margin:0 auto; }
.process-item { margin:0; overflow:hidden; border:1px solid var(--line); background:#fff; }
.process-item img { display:block; width:100%; height:120px; padding:8px; object-fit:contain; background:#e9edef; }
.process-caption { padding:12px 14px 14px; background:#fff; }
.process-caption span { color:var(--orange); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.process-caption h3 { margin-top:5px; font-size:.95rem; }
.contact { padding:78px 0; color:#fff; background:var(--ink); }
.contact-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:58px; align-items:end; }
.contact .section-label { color:#ffaf7e; }
.contact h2 { margin-top:15px; }
.contact p { color:#d0d8dc; }
.details { border-left:2px solid var(--orange); padding-left:24px; }
.details a { display:block; color:#fff; font-size:1.35rem; font-weight:700; text-decoration:none; }
.details p { margin:18px 0 0; }
.site-footer { padding:24px 0; color:#58636a; font-size:.83rem; }
.footer-row { display:flex; justify-content:space-between; gap:18px; }
:focus-visible { outline:3px solid #ffaf7e; outline-offset:4px; }
@media (max-width:760px) { .wrap { width:min(100% - 32px, 1120px); } .header-row { min-height:70px; } .menu { display:none; } .hero { min-height:690px; background-position:61% center; } .hero::before { background:linear-gradient(90deg, rgba(12,17,20,.92), rgba(12,17,20,.72) 64%, rgba(12,17,20,.30)); } .hero-content { padding:128px 0 62px; max-width:430px; } h1 { font-size:clamp(2.8rem, 15vw, 4.5rem); } .intro, .contact-grid { grid-template-columns:1fr; gap:30px; } .process-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } .intro, .services, .process { padding:66px 0; } .process { padding-top:0; } .process-item img { height:102px; padding:6px; } .process-caption { padding:10px; } .cards { grid-template-columns:1fr; margin-top:32px; } .card { min-height:auto; } .card h3 { margin-top:27px; } .contact { padding:62px 0; } .footer-row { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }