/* ============================================================ Vasisque Novus — Folha de estilo global Recriação fiel do site vasisque.com em HTML/CSS/JS puros ============================================================ */ /* ---------- Fontes locais (sem dependências externas) ---------- */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/montserrat-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/montserrat-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/montserrat-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Variáveis ---------- */ :root { --vermelho: #FA0101; --preto: #000000; --cinza-escuro: #1A1A1A; --cinza-card: #1A1A1A; --cinza-claro: #E8ECED; --texto: #3A3A3A; --texto-suave: #54595F; --branco: #FFFFFF; --fonte-titulo: 'Montserrat', sans-serif; --fonte-texto: 'Inter', sans-serif; /* Papel utilitário: números de ficha técnica. Pilha do sistema, sem download. */ --fonte-dados: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --container: 1140px; /* Medida máxima do texto corrido — sem isto a linha passa de 140 caracteres */ --medida: 68ch; /* Camadas do esmalte sobre o metal, usadas no divisor "corte" */ --aco: #9AA3AA; --camada-base: #2B2B2B; /* Sombra preta aplicada por igual sobre a imagem de todos os heroes. Aumente para escurecer, diminua para clarear. */ --hero-sombra: rgba(0, 0, 0, .55); /* Escala de fonte do controle de acessibilidade (0.85 a 1.4) */ --escala: 1; /* Mantém scrollbars e controles nativos claros mesmo com o SO em modo escuro */ color-scheme: light; /* Tokens de superfície — trocados no tema escuro */ --fundo: #FFFFFF; --fundo-alt: #EFEFEF; --fundo-card: #FFFFFF; --fundo-form: #F7F7F7; --fundo-inverso: #000000; /* seções propositalmente pretas */ --card-inverso: #1A1A1A; --cor-texto: #3A3A3A; --cor-texto-forte: #0A0A0A; --cor-texto-suave: #4A4A4A; --cor-titulo: #1A1A1A; --borda: #E4E4E4; --borda-forte: #D5D5D5; --cabecalho-fundo: #FFFFFF; --sombra-suave: 0 12px 24px rgba(0, 0, 0, .12); } /* Tema escuro: só quando o visitante escolhe no botão. O tema claro é o padrão e não segue a preferência do sistema. */ :root[data-tema="escuro"] { color-scheme: dark; --aco: #6E767D; --camada-base: #4A4A4A; --fundo: #121212; --fundo-alt: #1B1B1B; --fundo-card: #1C1C1C; --fundo-form: #1B1B1B; --fundo-inverso: #0A0A0A; --card-inverso: #232323; --cor-texto: #C9C9C9; --cor-texto-forte: #F2F2F2; --cor-texto-suave: #A8A8A8; --cor-titulo: #F2F2F2; --borda: #2E2E2E; --borda-forte: #3A3A3A; --cabecalho-fundo: #161616; --sombra-suave: 0 12px 24px rgba(0, 0, 0, .5); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: calc(16px * var(--escala)); } body { font-family: var(--fonte-texto); font-size: 1rem; color: var(--cor-texto); background: var(--fundo); line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background-color .25s, color .25s; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style-position: outside; } h1, h2, h3, h4 { font-family: var(--fonte-titulo); color: var(--cor-titulo); line-height: 1.25; } .container { max-width: var(--container); margin: 0 auto; padding: 0 20px; } /* ---------- Cabeçalho ---------- */ .cabecalho { background: var(--cabecalho-fundo); position: relative; z-index: 100; } .cabecalho__inner { max-width: 1240px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .cabecalho__logo img { width: 190px; height: auto; } /* A logo em JPEG tem fundo branco: no tema escuro usamos a versão em PNG */ .cabecalho__logo .logo-escuro { display: none; } :root[data-tema="escuro"] .cabecalho__logo .logo-claro { display: none; } :root[data-tema="escuro"] .cabecalho__logo .logo-escuro { display: block; } .menu { display: flex; align-items: center; gap: 26px; list-style: none; } .menu a { font-family: var(--fonte-titulo); font-size: 0.9375rem; font-weight: 600; color: var(--cor-texto-forte); transition: color .2s; } .menu a:hover, .menu a.ativo { color: var(--vermelho); } .cabecalho__acoes { display: flex; align-items: center; gap: 18px; } .botao-fale { font-family: var(--fonte-titulo); font-size: 0.875rem; font-weight: 600; background: var(--preto); color: var(--branco); padding: 12px 26px; border-radius: 50px; transition: background .2s; white-space: nowrap; } .botao-fale:hover { background: var(--vermelho); } .idiomas { display: flex; align-items: center; gap: 4px; } .idiomas a { line-height: 0; } .idiomas a:hover img { opacity: .75; } .idiomas img { width: 24px; height: 24px; border-radius: 2px; cursor: pointer; } .menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; position: relative; z-index: 1002; } .menu-toggle span { display: block; width: 24px; height: 3px; background: var(--cor-texto-forte); margin: 4px 0; border-radius: 2px; transition: transform .3s, opacity .2s; } /* Hambúrguer vira "X" quando o menu está aberto */ .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Ferramentas: tema escuro e tamanho da fonte ---------- */ .ferramentas { display: flex; align-items: center; gap: 6px; } .ferramentas button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; font-family: var(--fonte-titulo); font-weight: 700; font-size: 0.8125rem; color: var(--cor-texto-forte); background: transparent; border: 1px solid var(--borda-forte); border-radius: 8px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .ferramentas button:hover { background: var(--vermelho); border-color: var(--vermelho); color: #FFF; } .ferramentas button:hover svg { fill: #FFF; } .ferramentas button:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; } .ferramentas button[disabled] { opacity: .4; cursor: not-allowed; } .ferramentas button[disabled]:hover { background: transparent; border-color: var(--borda-forte); color: var(--cor-texto-forte); } .ferramentas svg { width: 17px; height: 17px; fill: var(--cor-texto-forte); transition: fill .2s; } .ferramentas .icone-escuro { display: none; } :root[data-tema="escuro"] .ferramentas .icone-escuro { display: block; } :root[data-tema="escuro"] .ferramentas .icone-claro { display: none; } /* Fundo escurecido do menu deslizante. O overlay é filho do , mas o menu vive dentro de .cabecalho, que abre um contexto de empilhamento (z-index: 100). Sem elevar o cabeçalho enquanto o menu está aberto, o overlay (1000) cobriria o próprio menu. */ .menu-fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 1000; } .menu-fundo.ativo { opacity: 1; visibility: visible; } body.menu-travado .cabecalho { z-index: 1001; } /* ---------- Hero (padrão de todas as páginas) ---------- Mesma altura, mesmo sombreamento preto uniforme sobre a imagem. */ .hero-pagina, .hero-home { position: relative; min-height: 480px; display: flex; align-items: center; background-size: cover; background-position: center; } .hero-pagina::before, .hero-home::before { content: ''; position: absolute; inset: 0; background: var(--hero-sombra); } .hero-pagina .container, .hero-home .container { position: relative; width: 100%; } /* ---------- Hero (interno) ---------- */ /* Os silos e a prateleira de pigmentos ficam no terço superior da foto: ancorar no topo mantém os dois no enquadramento. */ .hero-pagina.hero-sobre { background-position: center top; } .hero-pagina h1 { color: var(--branco); font-size: 3.125rem; font-weight: 700; } .hero-pagina h1 .destaque { color: var(--vermelho); } /* ---------- Hero (home) ---------- */ .hero-home h1 { color: var(--branco); font-size: 3.125rem; font-weight: 700; max-width: 600px; margin-bottom: 22px; } .hero-home h1 .destaque { color: var(--vermelho); } .hero-home p { color: #E9E9E9; font-size: 0.9375rem; max-width: 580px; margin-bottom: 30px; } .hero-home__botoes { display: flex; gap: 18px; flex-wrap: wrap; } /* ---------- Botões ---------- */ .botao { display: inline-block; font-family: var(--fonte-titulo); font-size: 0.875rem; font-weight: 600; line-height: 1.3; padding: 10px 26px; border-radius: 4px; transition: all .25s; cursor: pointer; border: 1px solid transparent; } .botao--vermelho { background: var(--vermelho); color: var(--branco); border-color: var(--vermelho); } .botao--vermelho:hover { background: #C90101; border-color: #C90101; } .botao--contorno { background: var(--branco); color: #111; border-color: var(--branco); } .botao--contorno:hover { background: transparent; color: var(--branco); } /* ---------- Faixa de estatísticas ---------- */ .estatisticas { background: var(--fundo-alt); padding: 26px 0; } .estatisticas__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .estatisticas__item { text-align: center; padding: 4px 12px; border-right: 1px solid var(--borda-forte); } .estatisticas__item:last-child { border-right: 0; } .estatisticas__item strong { display: block; font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 700; color: var(--cor-texto-forte); } .estatisticas__item span { font-size: 0.8125rem; color: var(--cor-texto); } /* ---------- Seções genéricas ---------- */ .secao { padding: 70px 0; } /* Mesmo cabeçalho de seção das páginas internas: rótulo com o corte e título alinhado à esquerda. Antes a home usava um par centrado próprio. */ .secao__rotulo { display: flex; align-items: center; gap: 13px; font-family: var(--fonte-titulo); font-size: 0.75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cor-texto-suave); margin-bottom: 15px; } .secao__rotulo::before { content: ''; width: 44px; height: 9px; flex-shrink: 0; background: linear-gradient(to bottom, var(--aco) 0 3px, var(--camada-base) 3px 6px, var(--vermelho) 6px 9px); } .secao__titulo { font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin-bottom: 38px; max-width: 26ch; } /* ---------- Cards de segmentos (home) ---------- */ .segmentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .segmento { border: 1px solid var(--borda); background: var(--fundo-card); border-radius: 6px; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; } .segmento:hover { transform: translateY(-4px); border-color: var(--vermelho); box-shadow: var(--sombra-suave); } .segmento img { width: 100%; height: 190px; object-fit: cover; } .segmento__corpo { padding: 20px 20px 24px; } .segmento__titulo { display: flex; align-items: center; gap: 9px; font-family: var(--fonte-titulo); font-size: 1.0625rem; font-weight: 700; color: var(--cor-texto-forte); margin-bottom: 10px; } .segmento__titulo svg { width: 22px; height: 22px; fill: var(--vermelho); flex-shrink: 0; } .segmento p { font-size: 0.875rem; line-height: 1.6; color: var(--cor-texto-suave); } .centralizado { text-align: center; margin-top: 38px; } /* ---------- Quem somos (home) ---------- */ .quem-somos__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; } .quem-somos__grid h2 { font-size: 2.125rem; font-weight: 700; margin-bottom: 22px; } .quem-somos__grid p { font-size: 0.9375rem; margin-bottom: 16px; } .quem-somos__grid .botao { margin-top: 10px; } .img-acento { position: relative; } .img-acento::before { content: ''; position: absolute; top: -14px; right: -14px; width: 88%; height: 88%; background: var(--vermelho); } .img-acento img { position: relative; width: 100%; object-fit: cover; } /* ---------- Porque escolher (fundo preto) ---------- */ .porque { background: var(--fundo-inverso); padding: 80px 0; } /* A coluna do título era de 250px: o texto quebrava em três linhas e sobrava um vazio ao lado da primeira fileira de cards. */ .porque__grid { display: grid; grid-template-columns: 330px 1fr; gap: 56px; align-items: start; } .porque__titulo h2 { color: var(--branco); font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; padding-bottom: 18px; position: relative; } .porque__titulo h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 44px; height: 9px; background: linear-gradient(to bottom, var(--aco) 0 3px, #6A6A6A 3px 6px, var(--vermelho) 6px 9px); } .porque__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card-escuro { background: var(--card-inverso); border-radius: 8px; padding: 28px 24px; } .card-escuro svg { width: 30px; height: 30px; fill: var(--vermelho); margin: 0 0 16px; display: block; } .card-escuro h3 { color: var(--branco); font-size: 0.9375rem; font-weight: 700; margin-bottom: 12px; } .card-escuro p { color: #A8A8A8; font-size: 0.7812rem; line-height: 1.6; } /* ---------- Infraestrutura ---------- */ .infra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .infra__item img { width: 100%; height: 175px; object-fit: cover; border-radius: 4px; margin-bottom: 16px; } .infra__item h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; } .infra__item p { font-size: 0.8125rem; color: var(--cor-texto-suave); } /* ---------- CTA faixa preta ---------- */ .cta-faixa { background: var(--fundo-inverso); padding: 46px 0; } .cta-faixa__grid { display: flex; align-items: center; gap: 40px; } .cta-faixa__chamada { display: flex; align-items: center; gap: 16px; max-width: 320px; } .cta-faixa__chamada svg { width: 34px; height: 34px; fill: var(--branco); flex-shrink: 0; } .cta-faixa__chamada p { color: var(--branco); font-family: var(--fonte-titulo); font-size: 0.9375rem; font-weight: 600; line-height: 1.5; } .cta-faixa__texto { flex: 1; color: #CFCFCF; font-size: 0.8438rem; } .cta-faixa .botao { flex-shrink: 0; } /* ---------- Qualidade / ISO ---------- */ /* Selo + checklist centralizados como grupo (o título fica à esquerda). justify-content centra as duas colunas dentro do container. */ .qualidade__grid { display: grid; grid-template-columns: 300px minmax(auto, 480px); gap: 64px; align-items: center; justify-content: center; } /* O selo tem fundo branco cravado no arquivo: sem uma moldura própria ele vira um retângulo branco solto — invisível no tema claro, gritante no escuro. */ .qualidade__grid > img { width: 100%; background: #FFF; padding: 20px; border-radius: 10px; border: 1px solid var(--borda); box-sizing: border-box; } .checklist { list-style: none; } .checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.9375rem; color: var(--cor-texto); margin-bottom: 16px; } .checklist svg { width: 21px; height: 21px; fill: var(--vermelho); flex-shrink: 0; margin-top: 2px; } /* ---------- Conteúdo interno (páginas) ---------- */ .conteudo { padding: 65px 0; } .conteudo h2 { font-size: 2.125rem; font-weight: 700; margin: 42px 0 22px; } .conteudo h2:first-child { margin-top: 0; } .conteudo h3 { font-size: 1.3125rem; font-weight: 700; margin: 28px 0 14px; } .conteudo p { font-size: 0.9375rem; margin-bottom: 15px; color: var(--cor-texto); } .conteudo ul { margin: 0 0 18px 22px; } .conteudo ul li { font-size: 0.9375rem; margin-bottom: 8px; } .conteudo a { color: var(--vermelho); } .texto-vermelho { color: var(--vermelho); } /* ---------- Mercado ---------- */ .secao-mercado { padding: 62px 0; } .secao-mercado h2 { font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin-bottom: 24px; } .secao-mercado h3 { font-size: 1.25rem; font-weight: 700; margin: 30px 0 14px; } .secao-mercado p { font-size: 1.0625rem; line-height: 1.72; margin-bottom: 1.05em; color: var(--cor-texto); } .secao-mercado strong { color: var(--cor-texto-forte); font-weight: 600; } .secao-mercado ul { margin: 0 0 1.1em 1.1em; } .secao-mercado ul li { font-size: 1.0625rem; line-height: 1.68; margin-bottom: .5em; } /* Texto que ocupa a largura toda da seção precisa da mesma medida do resto do site */ .secao-mercado > .container > p, .secao-mercado > .container > ul { max-width: var(--medida); } /* Índice de portfólio: lista longa em colunas, para varrer em vez de rolar */ .secao-mercado ul.lista-colunas { columns: 3 168px; column-gap: 34px; max-width: none; margin-left: 1.1em; } .lista-colunas li { break-inside: avoid; } .mercado-duas-colunas { display: grid; grid-template-columns: 1.15fr 1fr; gap: 50px; align-items: start; } .mercado-duas-colunas--centro { align-items: center; } /* Tabela de especificações: leitura de datasheet, não de planilha */ .tabela-rolagem { overflow-x: auto; margin: 30px 0 36px; } .tabela-especificacoes { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 0.9375rem; } .tabela-especificacoes th, .tabela-especificacoes td { padding: 14px 6px; text-align: left; border: 0; border-bottom: 1px solid var(--borda); } .tabela-especificacoes thead th { font-family: var(--fonte-titulo); font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-texto-suave); background: transparent; border-bottom: 2px solid var(--cor-texto-forte); padding-bottom: 11px; } .tabela-especificacoes tbody tr:last-child td { border-bottom: 0; } .tabela-especificacoes td:last-child { font-family: var(--fonte-dados); font-variant-numeric: tabular-nums; text-align: right; color: var(--cor-texto-forte); white-space: nowrap; } .galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; margin-top: 30px; } .galeria a { display: block; overflow: hidden; background: var(--fundo-alt); } .galeria img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; cursor: pointer; transition: transform .45s, opacity .2s; } .galeria a:hover img { transform: scale(1.045); } .galeria--grade { grid-template-columns: repeat(2, 1fr); } .galeria img:hover { opacity: .85; } .galeria--grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 0; } .galeria--grade a { max-width: none; } .galeria--grade img { height: 105px; } .img-moldura { position: relative; } .img-moldura::before { content: ''; position: absolute; top: -14px; left: -14px; width: 70%; height: 55%; background: var(--vermelho); } .img-moldura img { position: relative; width: 100%; } .img-centro { max-width: 480px; margin: 20px auto 0; } /* ---------- Trabalhe conosco ---------- */ .trabalhe h3 { font-size: 1.5625rem; font-weight: 700; max-width: 480px; margin-bottom: 26px; } .trabalhe p { font-size: 0.9375rem; color: var(--cor-texto); margin-bottom: 14px; } /* ---------- Fale conosco ---------- */ .contato__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; } .contato__info h2 { font-size: 1.875rem; margin-bottom: 20px; } .contato__item { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; } /* Mesma chapa circular de 42px dos ícones sociais — uma só linguagem de ícone */ .contato__item > svg { width: 42px; height: 42px; box-sizing: border-box; padding: 11px; border: 1px solid var(--borda); border-radius: 50%; background: var(--fundo-alt); fill: var(--vermelho); flex-shrink: 0; } .contato__item strong { display: block; font-family: var(--fonte-titulo); font-size: 0.9375rem; color: var(--cor-texto-forte); margin-bottom: 2px; } .contato__item span, .contato__item a { font-size: 0.9062rem; color: var(--cor-texto); } .contato__item a:hover { color: var(--vermelho); } .formulario { background: var(--fundo-form); border: 1px solid var(--borda); border-radius: 8px; padding: 34px; } .formulario label { display: block; font-family: var(--fonte-titulo); font-size: 0.8438rem; font-weight: 600; color: var(--cor-texto-forte); margin: 16px 0 6px; } .formulario label:first-child { margin-top: 0; } .formulario input, .formulario textarea { width: 100%; border: 1px solid var(--borda-forte); border-radius: 5px; background: var(--fundo); padding: 12px 14px; font-family: var(--fonte-texto); font-size: 0.9062rem; color: var(--cor-texto-forte); } .formulario input:focus, .formulario textarea:focus { outline: 2px solid rgba(250,1,1,.35); border-color: var(--vermelho); } .formulario textarea { min-height: 130px; resize: vertical; } .formulario input[type="file"] { padding: 10px 12px; font-size: 0.8438rem; cursor: pointer; } .formulario input[type="file"]::file-selector-button { font-family: var(--fonte-titulo); font-size: 0.8125rem; font-weight: 600; color: var(--cor-texto-forte); background: var(--fundo-alt); border: 0; border-radius: 4px; padding: 8px 16px; margin-right: 12px; cursor: pointer; transition: background .2s; } .formulario input[type="file"]::file-selector-button:hover { background: var(--vermelho); color: var(--branco); } .formulario__ajuda { font-size: 0.7812rem; color: var(--cor-texto-suave); margin-top: 6px; } /* Telefone com seletor de país: DDI à esquerda, número à direita. O compartilham a mesma linha e a mesma altura. */ .tel-grupo { display: flex; gap: 8px; } .tel-grupo .tel-pais { flex: 0 0 auto; width: auto; max-width: 42%; border: 1px solid var(--borda-forte); border-radius: 5px; background: var(--fundo); padding: 12px 10px; font-family: var(--fonte-texto); font-size: 0.9062rem; color: var(--cor-texto-forte); cursor: pointer; } .tel-grupo .tel-pais:focus { outline: 2px solid rgba(250,1,1,.35); border-color: var(--vermelho); } .tel-grupo input[type="tel"] { flex: 1 1 auto; min-width: 0; } /* Mensagem de erro de um campo específico (e-mail, telefone) */ .campo-erro { display: none; margin-top: 6px; font-size: 0.8125rem; color: #B00000; } .campo-erro.ativo { display: block; } .formulario input.invalido { border-color: #B00000; } .formulario input.invalido:focus { outline-color: rgba(176,0,0,.35); } /* Mapa da localização (embed de terceiro, único do site) */ .mapa { margin-top: 46px; } .mapa h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; } .mapa__end { font-size: 0.9062rem; color: var(--cor-texto-suave); margin-bottom: 18px; } .mapa__moldura { position: relative; width: 100%; aspect-ratio: 16 / 7; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; background: var(--fundo-alt); } .mapa__moldura iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .mapa__link { display: inline-block; margin-top: 12px; font-size: 0.8438rem; color: var(--vermelho); } /* Campo-armadilha do antispam: invisível para pessoas, preenchido por robôs */ .campo-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .formulario .botao { margin-top: 22px; width: 100%; } .formulario .botao[disabled] { opacity: .6; cursor: wait; } .form-msg { margin-top: 16px; font-size: 0.875rem; display: none; padding: 12px 14px; border-radius: 5px; } .form-msg--ok { display: block; background: #E7F6EC; color: #1B7B3A; } .form-msg--erro { display: block; background: #FDECEC; color: #B00000; } /* ---------- Rodapé ---------- */ .rodape { background: var(--preto); color: var(--branco); padding: 60px 0 0; } .rodape__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 40px; } .rodape__logo img { width: 210px; } .rodape h4 { color: var(--branco); font-size: 1.0625rem; font-weight: 700; margin-bottom: 18px; } .rodape ul { list-style: none; } .rodape ul li { margin-bottom: 9px; } .rodape a { color: #EDEDED; font-size: 0.875rem; transition: color .2s; } .rodape a:hover, .rodape a.ativo { color: var(--vermelho); } .rodape__base { text-align: center; font-size: 0.8438rem; color: #EDEDED; padding: 26px 20px; margin-top: 50px; } .rodape__base a { font-size: 0.8438rem; } /* ---------- Lightbox ---------- */ .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; z-index: 999; padding: 30px; } .lightbox.aberto { display: flex; } .lightbox img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; box-shadow: 0 10px 60px rgba(0,0,0,.6); } .lightbox__fechar { position: absolute; top: 18px; right: 26px; background: none; border: 0; color: #FFF; font-size: 2.375rem; line-height: 1; cursor: pointer; } /* ============================================================ Páginas internas — sistema de conteúdo técnico O divisor "corte" repete a estrutura real do produto: chapa de aço, camada base e camada de cobertura vistas de perfil. ============================================================ */ .bloco { padding: 62px 0; } .bloco--escuro { background: var(--fundo-alt); } /* Visível só para leitores de tela */ .sr-apenas { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Rótulo de seção com o corte estratificado — assinatura das páginas. O seletor de elemento é necessário para vencer `.secao-mercado p`. */ .rotulo, p.rotulo { display: flex; align-items: center; gap: 13px; font-family: var(--fonte-titulo); font-size: 0.75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cor-texto-suave); margin-bottom: 15px; } .rotulo::before { content: ''; width: 44px; height: 9px; flex-shrink: 0; background: linear-gradient(to bottom, var(--aco) 0 3px, var(--camada-base) 3px 6px, var(--vermelho) 6px 9px); } .titulo { font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin-bottom: 24px; } .titulo--menor { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem); margin-bottom: 16px; } /* Texto corrido com medida controlada */ .prosa { max-width: var(--medida); } .prosa p { font-size: 1.0625rem; line-height: 1.72; margin-bottom: 1.1em; color: var(--cor-texto); } .prosa p:last-child { margin-bottom: 0; } .prosa strong { color: var(--cor-texto-forte); font-weight: 600; } .prosa a { color: var(--vermelho); text-decoration: underline; text-underline-offset: 3px; } .prosa ul { margin: 0 0 1.1em 1.1em; } .prosa li { font-size: 1.0625rem; line-height: 1.68; margin-bottom: .5em; } .prosa .lead { font-size: clamp(1.125rem, 1rem + .55vw, 1.3125rem); line-height: 1.55; color: var(--cor-texto-forte); } /* Ficha técnica: números em destaque com fonte de dados */ .dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; margin: 36px 0; padding: 28px 0; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); } .dados__valor { display: block; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.375rem; letter-spacing: -.01em; line-height: 1.25; color: var(--cor-texto-forte); } /* A fonte de dados fica reservada ao que é medida de verdade */ .dados__valor--num { font-family: var(--fonte-dados); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .dados__rotulo { display: block; font-size: 0.8125rem; line-height: 1.5; color: var(--cor-texto-suave); margin-top: 8px; } /* Lista de definições — termo curto + explicação */ /* Índice, não cartões: sem caixas, as células vazias simplesmente não existem */ .definicoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); column-gap: 36px; margin: 34px 0; border-top: 2px solid var(--cor-texto-forte); } .definicoes > div { padding: 22px 0 26px; border-bottom: 1px solid var(--borda); } .definicoes dt { font-family: var(--fonte-titulo); font-size: 0.8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vermelho); margin-bottom: 11px; } .definicoes dd { font-size: 0.9375rem; line-height: 1.62; color: var(--cor-texto); } /* Documentos formais (políticas) — tratamento de anexo, não de marketing */ .politica { border: 1px solid var(--borda); border-left: 3px solid var(--vermelho); background: var(--fundo-alt); padding: 34px 36px; margin-bottom: 26px; } .politica:last-child { margin-bottom: 0; } .politica .titulo { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.5rem); margin-bottom: 18px; } .politica .prosa { max-width: 72ch; } .politica .prosa p, .politica .prosa li { font-size: 0.9688rem; } /* Âncoras do rodapé não podem parar colada no topo */ [id] { scroll-margin-top: 28px; } /* ---------- Página de erro ---------- */ .erro { padding: 86px 0 96px; } .erro__codigo { font-family: var(--fonte-dados); font-variant-numeric: tabular-nums; font-size: clamp(4.5rem, 2.6rem + 9vw, 9rem); line-height: .88; letter-spacing: -.045em; color: var(--cor-texto-forte); } /* O corte em tamanho grande: aqui ele é o próprio elemento gráfico da página */ .erro__corte { width: min(340px, 100%); height: 12px; margin: 26px 0 32px; background: linear-gradient(to bottom, var(--aco) 0 4px, var(--camada-base) 4px 8px, var(--vermelho) 8px 12px); } .erro__destinos { display: grid; grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); column-gap: 36px; margin-top: 48px; border-top: 2px solid var(--cor-texto-forte); } .erro__destinos a { display: block; padding: 17px 0; border-bottom: 1px solid var(--borda); font-family: var(--fonte-titulo); font-size: 0.9375rem; font-weight: 600; color: var(--cor-texto-forte); transition: color .2s; } .erro__destinos a:hover { color: var(--vermelho); } /* ---------- Ícones sociais (padrão único do site) ---------- Chip sólido, não um anel vazio: o ícone ocupa proporção maior e o fundo dá o corpo do botão. Usado no rodapé (fundo preto). */ .social { display: flex; flex-wrap: wrap; gap: 12px; } .social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--branco); transition: background .2s, color .2s, transform .2s; } .social svg { width: 21px; height: 21px; fill: currentColor; display: block; } .social a:hover { background: var(--vermelho); color: #FFF; transform: translateY(-2px); } .social a:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 3px; } /* ---------- Responsivo ---------- */ @media (max-width: 1024px) { .segmentos { grid-template-columns: repeat(2, 1fr); } .porque__grid { grid-template-columns: 1fr; } .infra { grid-template-columns: repeat(2, 1fr); } .rodape__grid { grid-template-columns: 1fr 1fr; } .cta-faixa__grid { flex-direction: column; text-align: center; } .cta-faixa__chamada { max-width: none; } } @media (max-width: 860px) { /* Menu deslizante (drawer) entrando pela direita */ .menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 84vw); background: var(--cabecalho-fundo); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 88px 26px 32px; box-shadow: -8px 0 32px rgba(0, 0, 0, .28); transform: translateX(100%); transition: transform .32s cubic-bezier(.4, 0, .2, 1); overflow-y: auto; overscroll-behavior: contain; z-index: 1001; } .menu.aberto { transform: translateX(0); } .menu li { opacity: 0; transform: translateX(18px); transition: opacity .3s, transform .3s; } .menu.aberto li { opacity: 1; transform: translateX(0); } /* Entrada em cascata dos itens */ .menu.aberto li:nth-child(1) { transition-delay: .10s; } .menu.aberto li:nth-child(2) { transition-delay: .15s; } .menu.aberto li:nth-child(3) { transition-delay: .20s; } .menu.aberto li:nth-child(4) { transition-delay: .25s; } .menu.aberto li:nth-child(5) { transition-delay: .30s; } .menu a { display: block; padding: 15px 4px; font-size: 1.0625rem; border-bottom: 1px solid var(--borda); } /* Hambúrguer encostado na borda direita, do mesmo lado de onde o menu entra. As ações descem para uma segunda linha. */ .cabecalho__inner { flex-wrap: wrap; gap: 14px 16px; } .cabecalho__logo { order: 1; } .menu-toggle { display: block; order: 2; margin-left: auto; } /* O menu vira gaveta fixa: tirar o