/* index.css — landing (registro brand): nameplate industrial + a própria máquina como imagem */

/* escala do registro brand: degraus largos (≥1.25), não o platô de 1.1 */
:root{ --i-label:.75rem; --i-body:1rem; --i-lead:1.25rem; --i-h2:1.75rem; }

/* A paleta do desenho da máquina vive em base.css — a landing e o configurador desenham a mesma máquina. */

body{margin:0;min-height:100vh}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* topo */
.masthead{display:flex;align-items:center;gap:14px;padding:20px 0 8px}
.logo{font-family:var(--font-head);font-weight:700;font-size:var(--i-lead);font-stretch:108%;
  letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.logo .tag{font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.06em;color:var(--accent);
  border:1px solid var(--accent);border-radius:5px;padding:2px 6px;text-transform:uppercase}
.masthead .spacer{flex:1}

/* hero — composição assimétrica: a tese à esquerda, o objeto à direita */
/* overflow:hidden contém o ::before, que sangra 6% para fora e criava rolagem horizontal no celular */
.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(24px,4vw,44px) 0 clamp(28px,4vw,44px)}
.hero::before{content:"";position:absolute;inset:-10% -6% -10% -6%;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(closest-side at 74% 50%,#000 30%,transparent 82%);
  mask-image:radial-gradient(closest-side at 74% 50%,#000 30%,transparent 82%)}
.hero>*{position:relative;z-index:1}
.hero h1{font-size:clamp(2.4rem,4.8vw,3.9rem);line-height:1.02;font-weight:700;font-stretch:104%;
  letter-spacing:-.025em;margin:0;max-width:15ch}
.hero .hazard{width:104px;margin:20px 0 20px}
.hero .lead{color:var(--muted);font-size:var(--i-lead);line-height:1.5;max-width:48ch;margin:0;text-wrap:pretty}
.hero .lead strong{color:var(--ink);font-weight:600}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

.hero-fig{display:flex;justify-content:center}
.maquina{width:100%;height:auto;max-height:min(52vh,440px);display:block;
  filter:drop-shadow(0 20px 36px rgba(15,25,45,.18))}
@media (prefers-color-scheme: dark){.maquina{filter:drop-shadow(0 20px 36px rgba(0,0,0,.55))}}
@media(max-width:880px){
  .hero{grid-template-columns:1fr;gap:26px}
  .hero h1{max-width:18ch}
  .maquina{max-height:36vh}
}

/* o que você escolhe — o leque real de opções, não a ficha de uma máquina */
.opcoes{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin-bottom:20px}
.specs{display:flex;flex-wrap:wrap;gap:18px clamp(22px,4vw,52px);margin:16px 0 0;padding:0}
.specs div{display:flex;flex-direction:column;gap:3px}
.specs dt{font-size:var(--i-label);color:var(--muted)}
.specs dd{margin:0;font-family:var(--font-mono);font-size:var(--i-body);font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* painéis de caminho */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:0 0 20px}
.panel{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px;
  display:flex;flex-direction:column;color:var(--ink);text-decoration:none;box-shadow:var(--shadow);
  transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .18s ease,box-shadow .18s ease}
.panel:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 12px 30px rgba(20,30,50,.14);text-decoration:none}
.panel:active{transform:translateY(-1px)}
.panel .idx{font-family:var(--font-mono);font-size:var(--i-label);letter-spacing:.02em;color:var(--muted);margin-bottom:14px}
.panel h2{font-size:var(--i-h2);margin:0 0 10px;font-weight:600;letter-spacing:-.02em}
.panel p{color:var(--muted);font-size:var(--i-body);line-height:1.5;margin:0 0 20px;flex:1;text-wrap:pretty}
.panel .go{color:var(--accent);font-weight:600;font-size:var(--i-body)}
.panel .go::after{content:" →";font-family:var(--font-mono);display:inline-block;transition:transform .18s cubic-bezier(.22,1,.36,1)}
.panel:hover .go::after{transform:translateX(4px)}

/* faixa de processo — sequência real de etapas */
.section-label{font-family:var(--font-head);font-size:var(--i-h2);font-weight:600;letter-spacing:-.02em;margin:0}
.process{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin-bottom:20px}
.process ol{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.process li{display:flex;gap:12px;align-items:flex-start;font-size:var(--i-body);line-height:1.5}
.process .n{flex:none;width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-mono);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:.85rem}

/* barra de contato */
.contact{display:flex;flex-wrap:wrap;align-items:center;gap:18px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:24px 26px;box-shadow:var(--shadow)}
.contact .txt{flex:1;min-width:220px}
.contact h3{margin:0 0 4px;font-size:var(--i-h2);font-weight:600;letter-spacing:-.02em}
.contact p{margin:0;color:var(--muted);font-size:var(--i-body);line-height:1.5}
.contact .btns{display:flex;gap:10px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:9px;border-radius:10px;padding:12px 20px;font-weight:600;
  font-size:var(--i-body);text-decoration:none;border:1px solid var(--line);cursor:pointer;color:var(--ink);
  background:var(--card);transition:filter .15s ease,transform .12s ease,border-color .15s ease}
.btn:hover{text-decoration:none;filter:brightness(1.04)}
.btn:active{transform:translateY(1px)}
.btn .ico{width:19px;height:19px;flex:none;display:block}
/* verde vivo com texto escuro: branco sobre verde reprovava no contraste AA */
.btn.wa{background:#25d366;color:#0a2e19;border-color:#25d366}
.btn.mail{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ghost{background:transparent}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.foot{color:var(--muted);font-size:var(--i-label);margin:22px 0 40px}

/* toque: sem mouse não há hover, então o estado de repouso tem que se bastar */
@media (hover: none){
  .panel:hover{transform:none;border-color:var(--line);box-shadow:var(--shadow)}
  .panel:hover .go::after{transform:none}
  .btn:hover{filter:none}
  .btn.ghost:hover{border-color:var(--line);color:var(--ink)}
}
@media (max-width: 760px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .hero{padding-top:18px}
  .hero-cta .btn{flex:1;justify-content:center;min-width:150px}
  .contact .btns{width:100%}
  .contact .btns .btn{flex:1;justify-content:center}
  .foot{margin-bottom:max(40px,env(safe-area-inset-bottom))}
}