/* ============================================================ RAMOS & MINERVA — Identidade visual / Folha de estilo Paleta extraída do Kit de Marca (navy + acento terracota). ============================================================ */ /* ---------- Fontes ---------- */ /* As fontes são carregadas via no de cada página (mais rápido que @import). Pesos usados: Archivo 400/500/600/700 · Spectral 400/500 + itálico 400 · IBM Plex Mono 400/500/600. */ /* ---------- Tokens ---------- */ :root{ /* Marca */ --navy: #1f3160; --navy-deep: #16244c; --navy-900: #0e1936; --navy-700: #25386b; /* Acento — padrão terracota (sobrescrito por [data-accent]) */ --accent: #d9662b; --accent-700: #b9531f; --accent-soft: #f0c8ac; /* Neutros quentes */ --paper: #f7f4ee; --paper-2: #efe9dd; --paper-3: #e7ddcc; --ink: #19223a; --ink-2: #3b4663; --muted: #5e6884; --muted-2: #8b93a6; --line: rgba(31,49,96,.14); --line-2: rgba(31,49,96,.08); --white: #ffffff; /* Tipografia */ --f-sans: 'Archivo', system-ui, -apple-system, sans-serif; --f-serif: 'Spectral', Georgia, serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; /* Layout */ --maxw: 1240px; --gutter: clamp(20px, 5vw, 64px); --radius: 5px; --shadow: 0 1px 2px rgba(16,25,54,.06), 0 8px 30px rgba(16,25,54,.07); --shadow-lg: 0 24px 60px rgba(16,25,54,.16); --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- Paletas (somente o acento muda) ---------- */ :root[data-accent="terracota"]{ --accent:#d9662b; --accent-700:#b9531f; --accent-soft:#f0c8ac; } :root[data-accent="ambar"] { --accent:#c0892e; --accent-700:#9c6c1f; --accent-soft:#ecd6a6; } :root[data-accent="bordo"] { --accent:#9b2f3f; --accent-700:#7c2531; --accent-soft:#e3bcc1; } :root[data-accent="teal"] { --accent:#2c7d75; --accent-700:#1f5f59; --accent-soft:#aed4cf; } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; font-family:var(--f-sans); font-size:17px; line-height:1.65; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; } h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.06; letter-spacing:-.015em; } p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } ::selection{ background:var(--accent); color:#fff; } /* ---------- Layout helpers ---------- */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .section{ padding-block:clamp(64px,9vw,124px); } .section--tight{ padding-block:clamp(48px,6vw,84px); } /* Eyebrow / kicker (mono) */ .kicker{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.7em; font-weight:500; } .kicker::before{ content:""; width:26px; height:1px; background:var(--accent); display:inline-block; } .kicker--center{ justify-content:center; } .kicker--light{ color:var(--accent-soft); } .kicker--light::before{ background:var(--accent-soft); } .eyebrow-num{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.2em; color:var(--muted-2); } /* Headings scale */ .display{ font-size:clamp(2.4rem,5.2vw,4.4rem); letter-spacing:-.03em; line-height:1; } .h-xl{ font-size:clamp(2rem,4.4vw,3.3rem); } .h-lg{ font-size:clamp(1.7rem,3.2vw,2.5rem); } .h-md{ font-size:clamp(1.3rem,2.2vw,1.68rem); letter-spacing:-.01em; } .lead{ font-size:clamp(1.06rem,1.5vw,1.3rem); line-height:1.6; color:var(--muted); font-weight:400; } .serif{ font-family:var(--f-serif); font-weight:400; letter-spacing:-.01em; } .muted{ color:var(--muted); } /* ---------- Buttons ---------- */ .btn{ --bg:var(--navy); --fg:#fff; display:inline-flex; align-items:center; gap:.6em; padding:.95em 1.55em; background:var(--bg); color:var(--fg); font-weight:600; font-size:.96rem; letter-spacing:.01em; border:1px solid var(--bg); border-radius:var(--radius); cursor:pointer; position:relative; transition:transform .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease); } .btn .arrow{ transition:transform .3s var(--ease); } .btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(16,25,54,.18); } .btn:hover .arrow{ transform:translateX(4px); } .btn--accent{ --bg:var(--accent); border-color:var(--accent); } .btn--accent:hover{ background-color:var(--accent-700); border-color:var(--accent-700); } .btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line); } .btn--ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); } .btn--light{ --bg:#fff; --fg:var(--navy); border-color:#fff; } .btn--outline-light{ --bg:transparent; --fg:#fff; border-color:rgba(255,255,255,.4); } .btn--outline-light:hover{ background:#fff; color:var(--navy); border-color:#fff; } .btn--lg{ padding:1.1em 1.9em; font-size:1rem; } .linkarrow{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; color:var(--navy); border-bottom:1px solid transparent; transition:.25s var(--ease); } .linkarrow .arrow{ transition:transform .3s var(--ease); } .linkarrow:hover{ color:var(--accent); } .linkarrow:hover .arrow{ transform:translateX(4px); } /* ============================================================ HEADER / NAV ============================================================ */ .site-header{ position:sticky; top:0; z-index:80; background:rgba(247,244,238,.82); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s, background .3s, box-shadow .3s; } .site-header.is-scrolled{ border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(16,25,54,.05); } .nav{ display:flex; align-items:center; justify-content:space-between; height:78px; gap:24px; } .brand{ display:flex; align-items:center; gap:13px; flex-shrink:0; } .brand-logo{ height:46px; width:auto; flex-shrink:0; } .brand .brand-txt{ display:flex; flex-direction:column; line-height:1; } .brand .brand-name{ font-weight:700; font-size:1.02rem; letter-spacing:.04em; color:var(--navy); } .brand .brand-name .amp{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:inherit; padding:0 .05em; } .brand .brand-sub{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-top:5px; } .nav-links{ display:flex; align-items:center; gap:4px; } .nav-links a{ padding:.55em .85em; font-size:.92rem; font-weight:500; color:var(--ink); border-radius:var(--radius); position:relative; transition:color .2s; white-space:nowrap; } .nav-links a::after{ content:""; position:absolute; left:.85em; right:.85em; bottom:.3em; height:1.5px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); } .nav-links a:hover{ color:var(--navy); } .nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); } .nav-links a.active{ color:var(--navy); } .nav-right{ display:flex; align-items:center; gap:14px; } .lang-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; font-family:var(--f-mono); font-size:.72rem; font-weight:500; } .lang-toggle button{ background:transparent; border:0; padding:.45em .7em; cursor:pointer; color:var(--muted); letter-spacing:.05em; transition:.2s; } .lang-toggle button.active{ background:var(--navy); color:#fff; } .menu-btn{ display:none; background:transparent; border:0; cursor:pointer; padding:8px; } .menu-btn span{ display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; transition:.3s var(--ease); } .menu-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .menu-btn.open span:nth-child(2){ opacity:0; } .menu-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } @media (max-width:940px){ .nav-links{ position:fixed; inset:78px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:12px var(--gutter) 26px; transform:translateY(-120%); transition:transform .4s var(--ease); box-shadow:var(--shadow-lg); } .nav-links.open{ transform:translateY(0); } .nav-links a{ padding:.95em .2em; font-size:1.05rem; border-bottom:1px solid var(--line-2); } .nav-links a::after{ display:none; } .menu-btn{ display:block; } } /* ============================================================ Padrão de circuito (decoração sutil — substitui a logo desbotada) ============================================================ */ .circuit-bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; } .circuit-bg svg{ position:absolute; inset:0; width:100%; height:100%; } .circuit-bg .trace{ fill:none; stroke:var(--accent-soft); stroke-width:1.3; stroke-linecap:round; opacity:.22; } .circuit-bg .node{ fill:var(--accent); opacity:.5; } html.rm-anim .circuit-bg .trace.dash{ stroke-dasharray:240; stroke-dashoffset:240; animation:trace 3.4s var(--ease) forwards; } html.rm-anim .circuit-bg .node.pulse{ animation:pulse 2.8s ease-in-out infinite; } @keyframes trace{ to{ stroke-dashoffset:0; } } @keyframes pulse{ 0%,100%{ opacity:.35; r:3; } 50%{ opacity:.9; r:5; } } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; background:var(--navy-900); color:#fff; overflow:hidden; } .hero::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 88% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(31,49,96,.55), transparent 60%); } .hero .wrap{ position:relative; z-index:2; } .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,4vw,52px); align-items:center; min-height:calc(100svh - 78px); padding-block:clamp(28px,3.5vw,52px); } .hero h1{ color:#fff; margin:.4em 0 .5em; max-width:20ch; font-size:clamp(1.95rem,3.6vw,3.25rem); } .hero h1 em{ font-family:inherit; font-style:normal; font-weight:inherit; color:inherit; } .hero .lead{ color:rgba(255,255,255,.74); max-width:42ch; font-size:clamp(1rem,1.3vw,1.15rem); } .hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(22px,2.6vw,32px); } .hero-trust{ display:flex; flex-wrap:wrap; gap:22px 40px; margin-top:clamp(30px,3.4vw,44px); padding-top:clamp(22px,2.4vw,28px); border-top:1px solid rgba(255,255,255,.13); } .hero-trust .item .n{ font-size:1.9rem; font-weight:700; letter-spacing:-.02em; } .hero-trust .item .l{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:3px; } /* Placa de marca — o "grande momento" da logo, nítido e emoldurado */ .brand-plate{ position:relative; background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.14); border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08); padding:clamp(36px,4.6vw,56px); overflow:hidden; } .brand-plate::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.7; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:32px 32px; mask-image:radial-gradient(110% 90% at 90% 100%, #000, transparent 72%); } .brand-plate .plate-logo{ position:relative; width:100%; max-width:340px; margin-inline:auto; display:block; } .brand-plate .plate-foot{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62); } .brand-plate .plate-foot .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 26%, transparent); } .brand-plate .plate-corner{ position:absolute; top:16px; right:18px; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; color:rgba(255,255,255,.4); } @media (max-width:880px){ .hero-grid{ grid-template-columns:1fr; gap:34px; min-height:auto; padding-block:clamp(36px,8vw,56px); } .brand-plate{ max-width:440px; } } /* ============================================================ MARQUEE de credibilidade ============================================================ */ .marquee{ border-block:1px solid var(--line); background:var(--paper-2); overflow:hidden; } .marquee .track{ display:flex; gap:60px; padding:18px 0; white-space:nowrap; width:max-content; animation:scrollx 36s linear infinite; } .marquee:hover .track{ animation-play-state:paused; } .marquee .item{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:60px; } .marquee .item::after{ content:"·"; color:var(--accent); } @keyframes scrollx{ to{ transform:translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .marquee .track{ animation:none; } } /* ============================================================ Section header ============================================================ */ .sec-head{ display:grid; grid-template-columns:1fr; gap:18px; max-width:760px; margin-bottom:clamp(40px,5vw,64px); } .sec-head.center{ margin-inline:auto; text-align:center; justify-items:center; } .sec-head .lead{ margin-top:2px; } .split-head{ display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; margin-bottom:clamp(40px,5vw,60px); } @media (max-width:760px){ .split-head{ grid-template-columns:1fr; align-items:start; } } /* ============================================================ Cards / serviços ============================================================ */ .grid{ display:grid; gap:24px; } .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } @media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } } .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 30px; position:relative; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; } .card::before{ content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--accent); transition:width .4s var(--ease); } .card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; } .card:hover::before{ width:100%; } .card .idx{ font-family:var(--f-mono); font-size:.74rem; color:var(--muted-2); letter-spacing:.2em; } .card .card-ico{ width:46px; height:46px; margin:6px 0 20px; color:var(--navy); } .card h3{ font-size:1.22rem; margin-bottom:10px; } .card p{ color:var(--muted); font-size:.97rem; } .card .card-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; } .tag{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); background:var(--paper-2); border:1px solid var(--line); padding:.32em .6em; border-radius:3px; } /* dark card */ .card--navy{ background:var(--navy); color:#fff; border-color:var(--navy); } .card--navy .card-ico{ color:var(--accent-soft); } .card--navy p{ color:rgba(255,255,255,.72); } .card--navy .idx{ color:rgba(255,255,255,.45); } .card--navy .tag{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#fff; } /* ============================================================ Feature split (imagem + texto) ============================================================ */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:center; } .split.rev .split-media{ order:2; } @media (max-width:840px){ .split{ grid-template-columns:1fr; gap:34px; } .split.rev .split-media{ order:0; } } .split-body .h-lg{ margin:14px 0 18px; } .feature-list{ display:grid; gap:2px; margin-top:26px; } .feature-list li{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; padding:16px 0; border-top:1px solid var(--line); } .feature-list li:last-child{ border-bottom:1px solid var(--line); } .feature-list .fi-num{ font-family:var(--f-mono); font-size:.78rem; color:var(--accent); padding-top:3px; } .feature-list .fi h4{ font-size:1.05rem; margin-bottom:3px; } .feature-list .fi p{ color:var(--muted); font-size:.92rem; } /* ============================================================ Image placeholders (foto a inserir) ============================================================ */ .ph{ position:relative; border-radius:var(--radius); overflow:hidden; background: linear-gradient(135deg, var(--navy-900), var(--navy) 70%); color:#fff; aspect-ratio:4/3; isolation:isolate; } .ph::before{ /* circuit hairlines */ content:""; position:absolute; inset:0; opacity:.6; background-image: linear-gradient(rgba(240,200,170,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(240,200,170,.16) 1px, transparent 1px); background-size:38px 38px; mask-image:radial-gradient(120% 100% at 70% 0%, #000, transparent 75%); } .ph .ph-label{ position:absolute; left:18px; bottom:16px; z-index:2; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.82); display:flex; align-items:center; gap:8px; } .ph .ph-label::before{ content:""; width:8px; height:8px; background:var(--accent); border-radius:50%; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent); } .ph .ph-svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; } .ph .ph-svg .trace{ fill:none; stroke:var(--accent-soft); stroke-width:1.2; stroke-linecap:round; opacity:.5; } .ph .ph-svg .node{ fill:var(--accent); } .ph.tall{ aspect-ratio:3/4; } .ph.wide{ aspect-ratio:16/10; } .ph.square{ aspect-ratio:1; } /* ============================================================ Stats band ============================================================ */ .band{ background:var(--navy); color:#fff; position:relative; overflow:hidden; } .stat-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); } .stat-grid .st{ background:var(--navy); padding:40px 28px; } .stat-grid .st .n{ font-size:clamp(2.4rem,4vw,3.4rem); font-weight:700; letter-spacing:-.03em; } .stat-grid .st .n em{ color:var(--accent-soft); font-style:normal; } .stat-grid .st .l{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:8px; } @media (max-width:760px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } } /* ============================================================ CTA block ============================================================ */ .cta{ position:relative; background:var(--navy-900); color:#fff; overflow:hidden; } .cta::after{ content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%); } .cta .wrap{ position:relative; z-index:2; text-align:center; max-width:780px; } .cta h2{ color:#fff; margin:18px 0 16px; } .cta p{ color:rgba(255,255,255,.72); max-width:54ch; margin-inline:auto; } .cta .cta-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; } /* ============================================================ FOOTER ============================================================ */ .site-footer{ background:var(--navy-900); color:rgba(255,255,255,.7); position:relative; overflow:hidden; } .footer-top{ position:relative; z-index:2; display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; padding-block:clamp(56px,7vw,84px); } .footer-brand .footer-logo{ height:60px; width:auto; margin-bottom:20px; } .footer-brand p{ font-size:.92rem; max-width:34ch; } .footer-col h4{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:18px; font-weight:500; } .footer-col a, .footer-col li{ display:block; font-size:.94rem; padding:6px 0; color:rgba(255,255,255,.72); transition:color .2s; } .footer-col a:hover{ color:var(--accent-soft); } .footer-bottom{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; padding:22px 0; border-top:1px solid rgba(255,255,255,.1); font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; color:rgba(255,255,255,.5); } .footer-bottom a:hover{ color:#fff; } @media (max-width:840px){ .footer-top{ grid-template-columns:1fr 1fr; gap:34px; } } @media (max-width:480px){ .footer-top{ grid-template-columns:1fr; } } /* ============================================================ PAGE HEADER (interna) ============================================================ */ .page-head{ background:var(--navy-900); color:#fff; position:relative; overflow:hidden; } .page-head::after{ content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 90% 0%, rgba(217,102,43,.18), transparent 55%); } .page-head .wrap{ position:relative; z-index:2; padding-block:clamp(56px,8vw,104px); } .page-head h1{ color:#fff; margin:18px 0 16px; max-width:18ch; } .page-head .lead{ color:rgba(255,255,255,.74); max-width:56ch; } .breadcrumb{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; color:rgba(255,255,255,.55); display:flex; gap:10px; align-items:center; } .breadcrumb a:hover{ color:var(--accent-soft); } .breadcrumb .sep{ color:var(--accent); } /* ============================================================ Equipment list (locação) ============================================================ */ .equip{ display:grid; grid-template-columns:1.1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; } .equip + .equip{ margin-top:22px; } .equip.rev .equip-media{ order:2; } .equip-media{ position:relative; min-height:280px; } .equip-media .ph{ height:100%; border-radius:0; aspect-ratio:auto; } .equip-body{ padding:clamp(28px,4vw,46px); display:flex; flex-direction:column; justify-content:center; } .equip-body .idx{ font-family:var(--f-mono); font-size:.76rem; color:var(--accent); letter-spacing:.16em; } .equip-body h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin:10px 0 12px; } .equip-body p{ color:var(--muted); } .spec-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; } @media (max-width:760px){ .equip{ grid-template-columns:1fr; } .equip.rev .equip-media{ order:0; } .equip-media{ min-height:220px; } } /* ============================================================ Process / steps ============================================================ */ .steps{ counter-reset:step; display:grid; gap:0; } .steps .step{ display:grid; grid-template-columns:auto 1fr; gap:26px; padding:30px 0; border-top:1px solid var(--line); align-items:start; } .steps .step:last-child{ border-bottom:1px solid var(--line); } .steps .step .sn{ font-family:var(--f-mono); font-size:.9rem; color:#fff; background:var(--navy); width:42px; height:42px; display:grid; place-items:center; border-radius:50%; } .steps .step h4{ font-size:1.2rem; margin-bottom:6px; } .steps .step p{ color:var(--muted); } /* ============================================================ Galeria ============================================================ */ .gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; } .gallery .g-item{ position:relative; } .gallery .g-item .ph{ height:100%; aspect-ratio:auto; } .g-span-6{ grid-column:span 6; } .g-span-4{ grid-column:span 4; } .g-span-8{ grid-column:span 8; } .g-span-12{ grid-column:span 12; } .g-tall{ min-height:420px; } .g-mid{ min-height:300px; } @media (max-width:760px){ .gallery{ grid-template-columns:repeat(2,1fr); } .gallery .g-item{ grid-column:span 1 !important; } .g-tall,.g-mid{ min-height:220px; } } /* ============================================================ Contato / formulário ============================================================ */ .contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(36px,5vw,68px); align-items:start; } @media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } } .contact-info .ci{ display:grid; grid-template-columns:auto 1fr; gap:16px; padding:22px 0; border-top:1px solid var(--line); } .contact-info .ci:last-child{ border-bottom:1px solid var(--line); } .contact-info .ci .ico{ width:24px; height:24px; color:var(--accent); margin-top:3px; } .contact-info .ci .lbl{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); } .contact-info .ci .val{ font-size:1.05rem; font-weight:500; color:var(--ink); margin-top:3px; } .contact-info .ci .val a:hover{ color:var(--accent); } .form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,4vw,40px); box-shadow:var(--shadow); } .field{ margin-bottom:18px; } .field label{ display:block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; } .field label .req{ color:var(--accent); } .field input, .field select, .field textarea{ width:100%; font-family:var(--f-sans); font-size:1rem; color:var(--ink); padding:.85em .95em; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); transition:border-color .2s, box-shadow .2s, background .2s; } .field input:focus, .field select:focus, .field textarea:focus{ outline:0; border-color:var(--navy); background:#fff; box-shadow:0 0 0 3px rgba(31,49,96,.1); } .field textarea{ resize:vertical; min-height:130px; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } @media (max-width:520px){ .form-row{ grid-template-columns:1fr; } } .hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; } .form-note{ font-size:.82rem; color:var(--muted-2); margin-top:6px; } .form-status{ margin-top:14px; padding:14px 16px; border-radius:var(--radius); font-size:.92rem; display:none; } .form-status.ok{ display:block; background:#e7f3ec; color:#1d6a3c; border:1px solid #b9ddc7; } .form-status.err{ display:block; background:#fbeceb; color:#a23029; border:1px solid #f0c4c0; } /* WhatsApp float */ .wa-float{ position:fixed; right:20px; bottom:20px; z-index:70; width:58px; height:58px; border-radius:50%; background:#25d366; display:grid; place-items:center; box-shadow:0 10px 28px rgba(0,0,0,.22); transition:transform .25s var(--ease); } .wa-float:hover{ transform:scale(1.08); } .wa-float svg{ width:30px; height:30px; fill:#fff; } /* ============================================================ Reveal animation — robusto: conteúdo é visível por padrão; só esconde/anima quando o navegador confirma que executa animações (classe .rm-anim). ============================================================ */ .reveal{ transition:opacity .7s var(--ease), transform .7s var(--ease); } html.rm-anim .reveal{ opacity:0; transform:translateY(22px); } html.rm-anim .reveal.in{ opacity:1; transform:none; } .reveal[data-d="1"]{ transition-delay:.07s; } .reveal[data-d="2"]{ transition-delay:.14s; } .reveal[data-d="3"]{ transition-delay:.21s; } .reveal[data-d="4"]{ transition-delay:.28s; } @media (prefers-reduced-motion: reduce){ html.rm-anim .reveal{ opacity:1; transform:none; transition:none; } } /* divider with node */ .rule{ height:1px; background:var(--line); position:relative; } .rule::after{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:var(--accent); } /* utility */ .center{ text-align:center; } .mt-s{ margin-top:14px; } .mt-m{ margin-top:26px; } .mt-l{ margin-top:44px; } .maxw-prose{ max-width:62ch; } .bg-paper2{ background:var(--paper-2); } .bg-paper3{ background:var(--paper-3); } /* As paletas alternativas (âmbar / bordô / verde-azulado) continuam definidas em :root[data-accent="…"] no topo. Para trocar a cor padrão do site, altere data-accent="terracota" no de cada página. */ /* ============================================================ MOBILE — Otimizações para dispositivos móveis Todos os breakpoints usam max-width para não afetar desktop. ============================================================ */ /* Bloco de extras exclusivos do menu hambúrguer (CTA + idioma). Inserido no HTML dentro de .nav-links; oculto em desktop. */ .nav-mobile-extras{ display:none; } /* ── 940 px: hambúrguer ativo ── */ @media (max-width:940px){ .nav-mobile-extras{ display:flex; flex-direction:column; align-items:stretch; gap:14px; padding:18px 0 10px; border-top:1px solid var(--line-2); margin-top:8px; } .nav-mobile-extras .btn{ width:100%; justify-content:center; } .nav-mobile-extras .lang-toggle{ align-self:flex-start; } } /* ── 768 px: smartphones landscape + portrait ── */ @media (max-width:768px){ /* Header compacto — evita overflow horizontal */ .nav{ height:64px; gap:8px; } /* Ajusta o overlay do menu para a nova altura do header */ .nav-links{ inset:64px 0 auto 0; } .brand-logo{ height:36px; } /* Subtítulo da marca some — economiza espaço */ .brand-sub{ display:none; } /* Nome da marca nunca quebra linha */ .brand-name{ white-space:nowrap; font-size:.92rem; letter-spacing:.03em; } /* CTA e lang-toggle do header bar somem — estão no menu hambúrguer */ .nav-right .btn, .nav-right .lang-toggle{ display:none; } /* WhatsApp float: posição segura abaixo do chrome do browser */ .wa-float{ right:16px; bottom:20px; width:52px; height:52px; } .wa-float svg{ width:26px; height:26px; } } /* ── 380 px: iPhones SE e smartphones muito pequenos ── */ @media (max-width:380px){ /* Esconde o texto da marca, mostra só o logo */ .brand-txt{ display:none; } } /* ── 640 px: smartphones portrait ── */ @media (max-width:640px){ /* Hero: retira placa decorativa, foca no copy */ .hero-art{ display:none; } .hero-grid{ min-height:0; padding-block:clamp(52px,14vw,80px); } /* Botões do hero em coluna, largura total */ .hero-cta{ flex-direction:column; gap:12px; } .hero-cta .btn{ width:100%; justify-content:center; } /* Trust metrics mais compactos */ .hero-trust{ gap:14px 24px; } .hero-trust .item .n{ font-size:1.55rem; } .hero-trust .item .l{ font-size:.62rem; } /* Grid de 2 colunas vira 1 em mobile pequeno */ .grid-2{ grid-template-columns:1fr; } /* Cards: padding reduzido */ .card{ padding:24px 20px; } /* Stats band: padding menor */ .stat-grid .st{ padding:26px 20px; } /* CTA section: botões em coluna */ .cta-btns{ flex-direction:column; align-items:center; } .cta-btns .btn{ width:100%; max-width:300px; justify-content:center; } /* Formulário: font-size 16px previne zoom automático no iOS */ .field input, .field select, .field textarea{ font-size:16px; min-height:48px; padding:.9em .95em; } /* Contact grid: gap menor */ .contact-grid{ gap:32px; } /* Equipamentos */ .equip-media{ min-height:190px; } .equip-body{ padding:24px 20px; } /* Page header interno */ .page-head .wrap{ padding-block:clamp(40px,12vw,72px); } } /* ── 480 px: smartphones pequenos ── */ @media (max-width:480px){ /* Footer bottom em coluna */ .footer-bottom{ flex-direction:column; align-items:flex-start; gap:4px; padding:18px 0; } /* Seções: menos padding vertical */ .section{ padding-block:clamp(44px,12vw,72px); } .section--tight{ padding-block:clamp(32px,8vw,56px); } /* Steps compactos */ .steps .step{ gap:16px; padding:22px 0; } .steps .step .sn{ width:36px; height:36px; font-size:.8rem; } /* Tags menores */ .tag{ font-size:.64rem; } /* Feature list */ .feature-list li{ gap:12px; padding:14px 0; } /* Galeria: altura menor */ .g-tall,.g-mid{ min-height:180px; } /* Brand plate: padding menor se aparecer */ .brand-plate{ padding:clamp(22px,7vw,36px); } }