:root { --navy: #1E2B3C; --prata: #A8B8CC; --prata2: #5A7A9A; --amb: #A8521C; --amb2: #8F4516; --grn: #2E7D5A; --cream: #F7F3ED; --white: #FFFFFF; --txt: #1E2B3C; --muted: #566170; --border: #D8DDE5; --wrap: 1120px; --gut: clamp(1.1rem, 4vw, 2rem); --sec: clamp(3rem, 7vw, 5.5rem); --raio: 16px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --navy: #121925; --cream: #171e2c; --white: #1e2a3c; --txt: #e8ecf2; --muted: #b9c4d2; --border: #3d4f63; } } :root[data-theme="dark"] { --navy: #121925; --cream: #171e2c; --white: #1e2a3c; --txt: #e8ecf2; --muted: #b9c4d2; --border: #3d4f63; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; font-size: 18px; } /* 29/10: corpo mínimo 18 px (público 60+); A−/A+ mudam esta base */ body { font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; background: var(--cream); color: var(--txt); line-height: 1.5; -webkit-font-smoothing: antialiased; } img { max-width: 100%; } a { color: inherit; } :focus-visible { outline: 2px solid var(--amb); outline-offset: 2px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); } /* ---------- navegação ---------- */ .nav { background: var(--navy); position: sticky; top: 0; z-index: 99; border-bottom: 1px solid rgba(168,184,204,.12); } .nav-in { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; min-height: 3.6rem; padding-block: .3rem; } .nl { font-size: 1.5rem; font-weight: 900; color: var(--prata); line-height: 1; } .nb { font-size: 0.89rem; letter-spacing: .06em; color: #D3DCE8; margin-right: auto; } .nav a { color: #D3DCE8; text-decoration: none; font-size: 0.95rem; display: inline-flex; align-items: center; min-height: 48px; padding: 0 .4rem; } .nav a:hover { color: #fff; text-decoration: underline; } .nav .nc { background: var(--amb); padding: .6rem 1rem; min-height: 48px; border-radius: 8px; font-weight: 700; color: #fff; opacity: 1; } .nav .nc:hover { background: var(--amb2); } @media (max-width: 600px) { .nav .nlink { display: none; } .nav-in { gap: .5rem .6rem; } .nb { font-size: .89rem; letter-spacing: .02em; } .nav .nc { padding: .6rem .8rem; } } @media (max-width: 400px) { .nb { display: none; } } /* ---------- circuito de apoio (animado) ---------- */ #circuito .eyebrow-circ { font-size: 0.89rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); } #circuito .circ { background: #14181d; border-radius: 22px; padding: clamp(.8rem, 2.5vw, 1.4rem); } #circuito h2 { margin: .6rem 0 0; } #circuito .circ-intro { margin: .8rem 0 1.5rem; max-width: 52rem; } /* ---------- hero ---------- */ .hero { background: radial-gradient(60% 90% at 80% 45%, rgba(90,122,154,.30), transparent 70%), var(--navy); overflow: hidden; } /* 16/10 [M Renato, com o modelo do Pode Atender: «reduzir a linguagem, aumentar a imagem e simplificar o enunciado»]: linha pequena, título curto em letra condensada, foto grande por baixo (o topo esmaece sob o título), só o botão e o link. */ .hero-in { display: grid; grid-template-columns: 1fr; grid-template-areas: "head" "media" "txt"; row-gap: clamp(.4rem, 1.4vw, 1rem); align-items: start; padding-block: clamp(1.6rem, 4vw, 3rem) clamp(2rem, 5vw, 3.2rem); } .hero-head { grid-area: head; } .hero-txt { grid-area: txt; } .hero-media { grid-area: media; } .hero-pill { display: block; background: none; color: var(--prata); font-size: 0.89rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 0; margin: 0 0 .1rem; } .hero h1 { position: relative; z-index: 2; font-family: "Anton", Impact, "Arial Narrow", sans-serif; font-size: clamp(64px, 11vw, 128px); font-weight: 400; color: var(--prata); line-height: 1; letter-spacing: .005em; margin: 0 0 -.1em; /* 16/10 [M Renato: «cor de fonte PRATA?»]: prata metálico (degradê do claro ao prata), com a cor lisa como reserva */ background: linear-gradient(180deg, #F4F7FB 0%, #D3DCE8 38%, #A8B8CC 72%, #8497AE 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero h1 span { color: var(--prata); } .hero-sub { font-size: 1.05rem; color: var(--prata); line-height: 1.6; margin-bottom: 1.7rem; max-width: 34rem; } .btn-pri { display: inline-block; background: var(--amb); color: #fff; font-weight: 800; font-size: 0.92rem; line-height: 1.3; padding: .95rem 1.4rem; min-height: 48px; border-radius: 10px; text-decoration: none; text-wrap: balance; transition: background .2s, transform .2s; box-shadow: 0 10px 28px rgba(200,106,46,.32); } .btn-pri:hover { background: var(--amb2); transform: translateY(-1px); } .hero-menu { display: inline-block; margin-top: 1rem; color: var(--prata); font-size: 0.95rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } .hero-menu:hover { color: #fff; } .hero-def { margin-top: 1.1rem; max-width: 34rem; font-size: 0.89rem; line-height: 1.55; color: #D3DCE8; } .hero-def strong { color: #fff; } .hero-note { margin-top: .8rem; font-size: 0.89rem; color: #D3DCE8; } .hero-note2 { margin-top: .45rem; max-width: 34rem; line-height: 1.5; } .hero-media { position: relative; } .hero-txt { margin-top: clamp(1.4rem, 4vw, 2.6rem); } /* o cartão flutuante desce até aqui: deixa espaço para ele não cobrir o botão */ .hero-frame { position: relative; } .hero-photo { border-radius: 22px; overflow: hidden; height: clamp(300px, 50vh, 600px); -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.55) 12%, #000 30%); mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.55) 12%, #000 30%); border: 1px solid rgba(168,184,204,.2); box-shadow: 0 34px 80px rgba(0,0,0,.5); background: #0d1520; } .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; } /* 01/11 [M Renato: «vídeos com autoplay assim que os websites carregam» · «mesma coisa do anterior» (Pode Atender, §3.3.698)]: a foto da hero vira o vídeo «Como o bairro me encontra» (arquivo do próprio site, 40 s, quadro 16:9, legendas gravadas). O QUADRO aparece inteiro (16:9, as legendas ficam no pé), limitado à altura que a foto tinha; botão de pausa redondo e discreto (48 px, só o ícone, rótulo em aria-label) no canto superior direito; com «reduzir movimento» nasce parado. */ .hero-photo.video { --alt: clamp(300px, 50vh, 600px); height: auto; overflow: visible; border: 0; box-shadow: none; background: none; -webkit-mask-image: none; mask-image: none; border-radius: 0; text-align: center; line-height: 0; } .hero-photo.video .tela { position: relative; display: inline-block; width: min(100%, calc(var(--alt) * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; border: 1px solid rgba(168,184,204,.2); box-shadow: 0 34px 80px rgba(0,0,0,.5); background: #0d1520; -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.75) 2.5%, #000 5%); mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.75) 2.5%, #000 5%); } .hero-photo.video .tela[data-formato="alto"] { width: min(100%, calc(min(72vh, 680px) * 9 / 16)); aspect-ratio: 9 / 16; } .hero-photo.video .tela img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; transition: opacity .4s; } .hero-photo.video .tela iframe, .hero-photo.video .tela video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; } /* 01/11 [M Renato, com print: «O botão silenciar está cobrindo o rosto»]: os botões ficam FORA do quadro, numa linha logo abaixo, grandes e rotulados («Ouvir a narração» / «Silenciar», «Pausar» / «Continuar»); nada cobre rosto, texto nem legenda. */ .hero-photo.video .controles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; line-height: normal; } .hero-photo.video .controles button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 14px; border: 1.5px solid rgba(128,128,128,.35); border-radius: 999px; background: var(--card, #fff); color: var(--ink, #1d1d1f); font: 700 16px/1 inherit; font-family: inherit; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.12); } .hero-photo.video .controles button:hover { border-color: var(--green, #1E9E5A); } .hero-photo.video .controles button:focus-visible { outline: 3px solid var(--green, #1E9E5A); outline-offset: 2px; } .hero-photo.video .controles svg { width: 24px; height: 24px; } .hero-photo.video .pausa .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .hero-photo.video .pausa .i-toca { display: none; } .hero-photo.video .pausa[aria-pressed="true"] .i-toca { display: block; } .hero-photo.video .pausa[aria-pressed="true"] .i-pausa { display: none; } .hero-photo.video .ouvir .i-mudo { display: none; } .hero-photo.video .ouvir[aria-pressed="true"] .i-mudo { display: block; } .hero-photo.video .ouvir[aria-pressed="true"] .i-som { display: none; } /* com o vídeo, o cartão flutuante sobe ao canto superior esquerdo do quadro: embaixo ele cobria a barra de legendas */ .hero-frame.com-video .hero-card { left: -3%; top: 6%; bottom: auto; width: 24%; } .hero-card { position: absolute; z-index: 2; left: -6%; bottom: -9%; width: 32%; height: auto; filter: drop-shadow(0 26px 30px rgba(0,0,0,.6)) drop-shadow(0 0 28px rgba(80,200,200,.18)); } @media (prefers-reduced-motion: no-preference) { .hero-card { animation: flutua 6s ease-in-out infinite; } } @keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @media (max-width: 880px) { .hero-in { row-gap: .5rem; } /* [Renato 08/10: «suba a imagem da senhora para a HERO»] no celular a foto vinha DEPOIS de todo o texto (começava a ~930 px, fora da primeira tela); agora abre a hero, com o cartão sobre o canto de baixo à esquerda da foto (longe do rosto e do celular da senhora, que ficam à direita). */ .hero-media { max-width: none; width: auto; margin: 0 calc(-1 * var(--gut)) 1.2rem; padding-left: 0; } .hero-photo { height: auto; aspect-ratio: 1 / 1.05; border-radius: 0; border-inline: 0; } /* celular: o vídeo 16:9 na largura do telefone, sem esticar */ .hero-photo.video { aspect-ratio: auto; } .hero-photo.video .tela { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; } .hero-frame.com-video .hero-card { left: 2%; top: 3%; bottom: auto; width: clamp(5rem, 22vw, 7rem); } .hero-card { position: absolute; left: 2%; top: auto; bottom: -1.5rem; z-index: 2; width: clamp(6rem, 27vw, 9rem); margin: 0; } .btn-pri { display: block; text-align: center; } } /* ---------- seções: ritmo e cabeçalhos ---------- */ .sec { padding-block: var(--sec); } .bg-w { background: var(--white); } .bg-c { background: var(--cream); } .slbl { font-size: 0.89rem; font-weight: 800; letter-spacing: .12em; color: var(--prata2); text-transform: uppercase; margin-bottom: .6rem; } .sec h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; margin-bottom: 1rem; text-wrap: balance; } .lead { color: var(--muted); line-height: 1.65; font-size: 1.02rem; max-width: 38rem; text-wrap: pretty; } .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .split.meio { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } @media (max-width: 900px) { .split, .split.meio { grid-template-columns: 1fr; gap: 1.8rem; } } /* ---------- números ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; } .stat-card { background: var(--cream); border: 1px solid var(--border); border-radius: var(--raio); padding: 1.4rem 1.1rem; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; gap: .35rem; } .stat-card .num { font-size: clamp(1.45rem, 2.6vw, 1.85rem); font-weight: 800; line-height: 1.1; } .stat-card p { font-size: 0.89rem; color: var(--muted); line-height: 1.4; } @media (max-width: 560px) { .stat-grid { grid-template-columns: 1fr; } } /* células de ECONOMIA: etiqueta do grupo, etiqueta de cada célula e um gráfico ilustrativo. Os gráficos só usam os números que já estão no texto da célula (nenhuma série, nenhum ponto intermediário). */ .eco-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; margin-bottom: .9rem; } .eco-tag { background: var(--amb2); color: #fff; font-size: 0.89rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; } .eco-head .t { font-size: 0.89rem; color: var(--muted); } .stat-card .cat { font-size: 0.89rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .graf { width: 100%; max-width: 12rem; height: 5.8rem; margin: .5rem auto .25rem; display: flex; align-items: center; justify-content: center; } .graf em { font-style: normal; font-size: 0.89rem; color: var(--muted); line-height: 1; white-space: nowrap; } /* duas barras: antes × agora, na proporção exata do crescimento do texto */ .graf.barras { align-items: flex-end; gap: .8rem; } .graf .b { flex: 1 1 0; min-width: 0; max-width: 4.4rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .3rem; } .graf .b i { display: block; width: 100%; height: calc(var(--h) * 3.3rem); background: var(--prata2); border-radius: 6px 6px 3px 3px; } .graf .b.dest i { background: var(--amb); } .graf .b .v { background: var(--amb2); color: #fff; font-size: 0.89rem; font-weight: 800; line-height: 1; padding: .22rem .5rem; border-radius: 999px; } /* rosca: 20% do consumo nacional */ .graf.rosca { gap: .7rem; } .rosca-fig { position: relative; width: 4.5rem; height: 4.5rem; flex: none; } .rosca-fig svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; } .rosca-fig circle { fill: none; stroke-width: 4.4; } .rosca-fig .trilho { stroke: var(--border); } .rosca-fig .fatia { stroke: var(--amb); } .rosca-fig b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.92rem; font-weight: 800; color: var(--txt); } .graf.rosca em { text-align: left; white-space: normal; line-height: 1.25; max-width: 4.2rem; } /* duas barras horizontais sobre 100% da população */ .graf.hbar { flex-direction: column; align-items: stretch; justify-content: center; gap: .75rem; } .graf .lin { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: .3rem; } .graf .lin em { text-align: left; } .graf .lin b { font-size: 0.89rem; font-weight: 800; color: var(--txt); line-height: 1; } .graf .lin .tr { grid-column: 1 / -1; height: .55rem; border-radius: 999px; background: var(--border); overflow: hidden; } .graf .lin .tr i { display: block; height: 100%; width: var(--w); background: var(--prata2); border-radius: 999px; } .graf .lin.dest .tr i { background: var(--amb); } .destaque { margin-top: 1.4rem; padding-left: 1rem; border-left: 3px solid var(--amb); font-weight: 700; line-height: 1.45; max-width: 38rem; } .fontes { margin-top: .9rem; font-size: 0.89rem; color: var(--muted); font-style: italic; } /* ---------- conceito ---------- */ .lead + .lead { margin-top: .9rem; } .lead strong { color: var(--txt); } .triad-fig { display: flex; justify-content: center; } /* §3.3.681: a tríade viva (SVG animado + três cartões) */ .tri-cards { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: .7rem; } .tri-card { display: grid; gap: .25rem; padding: .9rem 1rem; background: var(--white); border: 1px solid var(--border); border-left: 5px solid var(--grn); border-radius: 14px; animation: triEntra .7s ease-out both; } .tri-card strong { color: var(--txt); font-size: 1.05rem; } .tri-card > span:not(.tri-tag) { color: var(--muted); font-size: 0.95rem; line-height: 1.5; } .tri-tag { font-size: 0.89rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--grn); } .tri-fam { border-left-color: var(--amb); animation-delay: .15s; } .tri-fam .tri-tag { color: var(--amb); } .tri-com { border-left-color: var(--prata2); animation-delay: .3s; } .tri-com .tri-tag { color: var(--prata2); } .tri-link { margin-top: .2rem; color: var(--amb); font-weight: 700; text-decoration: none; } .tri-link:hover { text-decoration: underline; } .tri-fig { display: flex; flex-direction: column; align-items: center; gap: .6rem; } /* 28/10 [M Renato: «Gere versão nova sem texto e coloque ao lado da tríade»]: a casa aberta (sem texto queimado) ao lado do triângulo */ .tri-dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 1.2rem; align-items: center; } .tri-casa { margin: 0; } @media (min-width: 901px) { #conceito .split.meio { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 2.4rem; } } .tri-casa img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.45); animation: triEntra .8s ease-out .4s both; } @media (max-width: 600px) { .tri-dupla { grid-template-columns: 1fr; } .tri-casa { max-width: 22rem; margin-inline: auto; } } @media (prefers-reduced-motion: reduce) { .tri-casa img { animation: none; } } .tri-svg { width: 100%; max-width: 30rem; height: auto; overflow: visible; } .tri-linha { stroke: var(--txt); stroke-width: 5; stroke-linecap: round; opacity: .85; fill: none; stroke-dasharray: 220; stroke-dashoffset: 220; animation: triDesenha 1.2s ease-out .3s forwards; } .tri-rota { fill: none; stroke: none; } .tri-pulso { fill: var(--amb); filter: drop-shadow(0 0 6px rgba(200,106,46,.9)); } .tri-no .tri-anel { stroke: var(--txt); stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: triAparece .6s cubic-bezier(.3,1.6,.5,1) var(--d) both, triPulsa 3s ease-in-out calc(var(--d) + 1s) infinite; } .tri-foto { transform-box: fill-box; transform-origin: center; animation: triAparece .6s cubic-bezier(.3,1.6,.5,1) calc(var(--d) + .15s) both; } .tri-no text { fill: var(--txt); font: 800 17px Inter, system-ui, sans-serif; text-anchor: middle; letter-spacing: .04em; animation: triEntra .6s ease-out var(--d) both; } .tri-leg { color: var(--muted); font-size: 0.89rem; text-align: center; max-width: 26rem; } @keyframes triDesenha { to { stroke-dashoffset: 0; } } @keyframes triAparece { from { transform: scale(0); } to { transform: scale(1); } } @keyframes triPulsa { 0%, 100% { filter: drop-shadow(0 0 0 rgba(124,255,158,0)); } 50% { filter: drop-shadow(0 0 12px rgba(124,255,158,.85)); } } @keyframes triEntra { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .tri-card, .tri-no .tri-anel, .tri-foto, .tri-no text { animation: none; } .tri-linha { animation: none; stroke-dashoffset: 0; } .tri-pulso { display: none; } } .triad-fig img { width: 100%; max-width: 30rem; height: auto; border-radius: 14px; } .triad-img-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .triad-img-light { display: none; } :root:not([data-theme="light"]) .triad-img-dark { display: block; } } :root[data-theme="dark"] .triad-img-light { display: none; } :root[data-theme="dark"] .triad-img-dark { display: block; } /* ---------- a vila ---------- */ .sec-cab { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); } .vila-link { display: block; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(10,20,35,.22); } .vila-link img { display: block; width: 100%; height: auto; } .vila-leg { text-align: center; font-size: 0.89rem; color: var(--muted); margin-top: .9rem; } /* ---------- para quem é ---------- */ .qgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; } @media (max-width: 560px) { .qgrid { grid-template-columns: repeat(2, 1fr); } } .qcard { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem .7rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 6.6rem; } .qcard .ico { font-size: 1.7rem; line-height: 1; } .qcard p { font-size: 0.89rem; font-weight: 600; line-height: 1.3; } /* ---------- o que você recebe ---------- */ .ofertas-box { background: var(--navy); border-radius: 20px; padding: clamp(1.4rem, 3vw, 2.2rem); margin-top: 1.4rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; border: 1px solid rgba(168,184,204,.14); } @media (max-width: 760px) { .ofertas-box { grid-template-columns: 1fr; } } .ofertas-box h3 { font-size: 1.2rem; font-weight: 800; color: var(--prata); margin-bottom: .7rem; } .ofertas-box p { font-size: 0.92rem; color: #D3DCE8; line-height: 1.6; } .oferta-demo { display: flex; flex-direction: column; gap: .65rem; } .oferta-demo .tit { font-size: 0.89rem; color: var(--prata); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .1rem; } .oferta-card { background: rgba(255,255,255,.07); border: 1px solid rgba(168,184,204,.2); border-radius: 12px; padding: .8rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: .8rem; } .oferta-card .kname { font-size: 0.9rem; font-weight: 700; color: #fff; } .oferta-card .kprice { font-size: 0.89rem; color: var(--prata); } .oferta-card .kbtn { background: var(--amb); color: #fff; border: none; border-radius: 8px; padding: .4rem .85rem; font-size: 0.89rem; font-weight: 700; flex-shrink: 0; } /* ---------- formulário ---------- */ #formulario { background: var(--navy); padding-block: var(--sec); } .form-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 960px) { .form-grid { grid-template-columns: 1fr; } } .form-side { position: sticky; top: 5.5rem; color: var(--prata); } @media (max-width: 960px) { .form-side { position: static; } } .form-side .slbl { color: #D3DCE8; } .form-side h2 { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; line-height: 1.15; margin-bottom: 1.4rem; text-wrap: balance; } .passos { list-style: none; counter-reset: p; display: flex; flex-direction: column; gap: 1.1rem; } .passos li { counter-increment: p; position: relative; padding-left: 2.8rem; line-height: 1.45; } .passos li::before { content: counter(p); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(168,184,204,.14); border: 1px solid rgba(168,184,204,.35); color: #fff; font-weight: 800; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; } .passos b { display: block; color: #fff; font-size: 0.98rem; font-weight: 700; } .passos span { font-size: 0.89rem; } .side-taxa { margin-top: 1.8rem; padding: .95rem 1.1rem; border-radius: 12px; background: rgba(200,106,46,.14); border: 1px solid rgba(200,106,46,.5); color: #fff; font-size: 0.92rem; } .side-contato { margin-top: 1.4rem; font-size: 0.89rem; line-height: 1.7; } .side-contato a { color: #fff; } .fw { background: var(--white); border-radius: 22px; padding: clamp(1.4rem, 3.4vw, 2.6rem); box-shadow: rgba(0,0,0,.35) 0 24px 70px; border: 1px solid rgba(168,184,204,.18); } .fw h2 { font-size: clamp(1.45rem, 2.6vw, 1.8rem); font-weight: 800; color: var(--txt); margin-bottom: .45rem; } /* 10/10 [M Renato: «acima do título Ative seu negócio insira uma imagem do cartão»]: o mesmo cartão da hero, flutuando, abre o formulário. */ .form-card { display: block; width: clamp(8rem, 24%, 12rem); height: auto; margin: 0 0 1rem; filter: drop-shadow(0 18px 26px rgba(0,0,0,.35)) drop-shadow(0 0 22px rgba(80,200,200,.22)); } @media (prefers-reduced-motion: no-preference) { .form-card { animation: flutua 6s ease-in-out infinite; } } .fw .sub { font-size: 0.9rem; color: var(--muted); margin-bottom: .6rem; line-height: 1.55; } .fst { font-size: 0.89rem; font-weight: 800; letter-spacing: .1em; color: var(--prata2); text-transform: uppercase; margin: 2rem 0 .85rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); } .fg { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 560px) { .fg { grid-template-columns: 1fr; } } .ff { display: flex; flex-direction: column; gap: .35rem; min-width: 0; } .ff.full { grid-column: 1 / -1; } label { font-size: 0.89rem; font-weight: 700; color: var(--txt); } label span { font-weight: 400; color: var(--muted); } input, select, textarea { border: 1.5px solid var(--border); border-radius: 10px; padding: .65rem .8rem; font-size: 1rem; min-height: 3rem; color: var(--txt); background: var(--cream); outline: none; transition: border-color .2s, box-shadow .2s; width: 100%; font-family: inherit; min-height: 2.8rem; } input:focus, select:focus, textarea:focus { border-color: var(--amb); box-shadow: 0 0 0 3px rgba(200,106,46,.2); } input.erro, select.erro { border-color: #c0392b; } input[type="checkbox"] { min-height: 0; } textarea { resize: vertical; min-height: 5.5rem; } .hint { font-size: 0.89rem; color: var(--muted); line-height: 1.4; } .rrow { display: grid; grid-template-columns: 1fr 1fr 3rem; gap: .6rem; align-items: center; margin-bottom: .55rem; } @media (max-width: 460px) { .rrow { grid-template-columns: 1fr 3rem; } .rrow input:nth-child(2) { grid-column: 1; } .rrow .brem { grid-row: 1 / span 2; grid-column: 2; } } .badd { min-height: 48px; background: none; border: 1.5px dashed var(--prata2); color: var(--prata2); border-radius: 10px; padding: .5rem 1rem; font-size: 0.89rem; font-weight: 700; cursor: pointer; margin-top: .15rem; font-family: inherit; } .badd:hover { background: var(--cream); } .brem { background: none; border: 1.5px solid var(--border); color: #c0392b; cursor: pointer; font-size: 1.2rem; line-height: 1; height: 3rem; min-width: 3rem; border-radius: 10px; } .brem:hover { background: var(--cream); } .tg { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .35rem; } .tb { min-height: 48px; border: 1.5px solid var(--border); background: var(--cream); border-radius: 10px; padding: .5rem .95rem; font-size: 0.89rem; font-weight: 600; cursor: pointer; color: var(--txt); transition: .15s; font-family: inherit; } .tb.active { border-color: var(--amb); background: var(--amb); color: #fff; } .aceite { display: flex; align-items: flex-start; gap: .7rem; font-size: 0.89rem; font-weight: 400; color: var(--txt); cursor: pointer; padding: .95rem 1.05rem; border: 1.5px solid var(--border); border-radius: 12px; background: var(--cream); margin-bottom: .6rem; line-height: 1.45; } .aceite input { margin-top: .1rem; width: 1.5rem; height: 1.5rem; flex-shrink: 0; accent-color: var(--amb); } .bsub { background: var(--amb); color: #fff; border: none; font-size: 1.02rem; font-weight: 800; padding: 1rem; border-radius: 12px; cursor: pointer; width: 100%; transition: background .2s; margin-top: 1.5rem; font-family: inherit; letter-spacing: .02em; } .bsub:hover { background: var(--amb2); } .bsub:disabled { opacity: .6; cursor: wait; } .falha { display: none; margin-top: .9rem; font-size: 0.89rem; color: #c0392b; line-height: 1.45; } .flegal { font-size: 0.89rem; color: var(--muted); margin-top: .9rem; line-height: 1.55; } #success { display: none; text-align: center; padding: 2.4rem .8rem; } #success .ck { font-size: 3.2rem; margin-bottom: .8rem; } #success h3 { font-size: 1.35rem; font-weight: 800; color: var(--txt); margin-bottom: .5rem; } #success p { color: var(--muted); font-size: 0.92rem; line-height: 1.55; } /* ---------- rodapé ---------- */ footer { background: #0f1722; color: var(--prata); font-size: 0.89rem; padding-block: 2.2rem; } .foot { display: flex; flex-wrap: wrap; gap: 1.2rem 3rem; justify-content: space-between; align-items: flex-start; } .foot a { color: var(--prata); } .foot .marca { font-size: 1rem; color: #fff; } .foot .marca a { text-decoration: none; } .foot .legal { margin-top: .4rem; font-size: 0.89rem; color: #D3DCE8; } .foot .links { display: flex; flex-direction: column; gap: .45rem; } @media (min-width: 700px) { .foot .links { align-items: flex-end; text-align: right; } } /* 10/10 [M Renato]: o botão dourado do fim, que leva ao domínio principal www.ushow.com.br. */ .rodape-ushow{text-align:center;padding:10px 20px 44px;margin:0} /* 01/11: o bloco «Ecossistema üShow» do rodapé (o mesmo dos três sites): letra ≥ 18 px, alvos de 48 px, sublinhado e foco visíveis. */ .eco { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(168,184,204,.28); } .eco-titulo { margin: 0 0 .2rem; font-size: 0.89rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--prata); } .eco-lista { display: flex; flex-wrap: wrap; gap: 0 1.4rem; margin: 0; padding: 0; list-style: none; } .eco-lista li { display: flex; } .eco-lista a, .eco-atual { display: inline-flex; align-items: center; gap: .3rem; min-height: 48px; padding: 0 .2rem; font-size: 1.125rem; line-height: 1.3; } .eco-lista a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 2px; } .eco-lista a:hover { color: #37D39A; } .eco-lista a:focus-visible { outline: 3px solid #37D39A; outline-offset: 3px; } .eco-atual { color: var(--prata); font-weight: 800; } /* 02/11: as pontes para www.ushow.com.br/sistema/onda-prateada (no #conceito e ao lado do formulário) e o item do menu para jaiapassarla.com.br; links de menu com 18 px (público 60+). O âmbar não passa de 3:1 sobre o fundo escuro, por isso o link do #conceito usa a cor do texto. */ .nav .nlink { font-size: 1rem; } .eco-conceito { margin-top: 1rem; } .eco-conceito a, .side-eco a { display: inline-flex; align-items: center; gap: .3em; min-height: 48px; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; } .eco-conceito a { color: var(--txt); } .side-eco { margin-top: 1rem; font-size: 1rem; } .side-eco a { color: #fff; } .eco-conceito a:focus-visible, .side-eco a:focus-visible, .nav a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .botao-landing{display:inline-flex;align-items:center;justify-content:center;gap:.4em;border-radius:9999px;padding:.75rem 1.6rem;font-weight:700;font-size:1rem;line-height:1.25;color:#3b2a05;text-decoration:none;text-shadow:0 1px 0 rgba(255,244,200,.6);background:linear-gradient(180deg,#fbe9a6 0%,#e9c45a 38%,#c9952a 72%,#a8761a 100%);border:1px solid #8f6414;box-shadow:inset 0 1px 0 rgba(255,250,225,.85),inset 0 -2px 0 rgba(110,72,10,.45),0 3px 0 #7a5410,0 6px 14px rgba(0,0,0,.28);transition:transform .08s ease,box-shadow .08s ease,filter .15s ease;text-align:center} .botao-landing:hover{filter:brightness(1.06)} .botao-landing:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,250,225,.6),inset 0 -1px 0 rgba(110,72,10,.4),0 0 0 #7a5410,0 2px 6px rgba(0,0,0,.25)} .botao-landing:focus-visible{outline:2px solid #e9c45a;outline-offset:3px} /* ---------- mapa do bairro (19/10/2026) [M Renato: «depois da HERO»]: Leaflet + OpenStreetMap, como no üWork e no pediramperto.com.br ---------- */ #mapa .mapa-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; margin: 1.4rem 0 .9rem; } #mapa .camadas { display: flex; flex-wrap: wrap; gap: .5rem; } #mapa .cam { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1rem; border: 1.5px solid var(--border); border-radius: 999px; background: var(--white); color: var(--txt); font: 700 0.89rem Inter, system-ui, sans-serif; cursor: pointer; } #mapa .cam i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 2px solid var(--c); } #mapa .cam[aria-pressed="false"] { opacity: .55; } #mapa .cam[aria-pressed="false"] i { background: transparent; } #mapa .mapa-dica { font-size: 0.89rem; color: var(--muted); } #mapa .mapa-frame { border-radius: 22px; overflow: hidden; border: 1.5px solid var(--border); height: clamp(320px, 62vh, 540px); height: clamp(320px, 62svh, 540px); } #mapa-ob { width: 100%; height: 100%; background: #e8e4dc; font-family: inherit; } #mapa-ob:focus-visible { outline: 3px solid var(--amb); } #mapa .leaflet-control-attribution { font-size: 16px; } #mapa .leaflet-control-zoom a { width: 48px; height: 48px; line-height: 48px; color: #1E2B3C; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #mapa .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.88) contrast(.92); } :root:not([data-theme="light"]) #mapa-ob { background: #1b2420; } } :root[data-theme="dark"] #mapa .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.88) contrast(.92); } :root[data-theme="dark"] #mapa-ob { background: #1b2420; } #mapa .pino-wrap { background: none; border: 0; } #mapa .pino { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; border: 3px solid #fff; background: var(--c); box-shadow: 0 1px 5px rgba(0,0,0,.45); cursor: pointer; } #mapa .pino i { width: 9px; height: 9px; border-radius: 50%; background: #fff; display: block; } #mapa .rot { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 9px; border-radius: 999px; background: #fff; color: #1E2B3C; border: 1.5px solid var(--c); font: 700 16px/1.45 Inter, system-ui, sans-serif; pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,.25); } #mapa .rot.c { bottom: 34px; } #mapa .rot.b { top: 34px; } #mapa .leaflet-popup-content { margin: 12px 14px; font-family: Inter, system-ui, sans-serif; color: #1E2B3C; } #mapa .pp-ex { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #b45309; } #mapa .pp-nome { margin: 4px 0 0; font-size: 16px; font-weight: 800; } #mapa .pp-tipo { margin: 1px 0 0; font-size: 16px; color: #566170; } #mapa .pp-of { margin: 8px 0 0; padding: 0; list-style: none; font-size: 16px; } #mapa .pp-of li { padding: 3px 0; border-top: 1px solid #e3e7ee; } #mapa .mapa-leg { margin-top: .7rem; font-size: 0.89rem; color: var(--muted); max-width: 52rem; } #mapa .como { margin-top: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; } #mapa .como .c { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1.5px solid var(--border); border-radius: var(--raio); background: var(--white); } #mapa .como svg { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgba(90,122,154,.16); color: var(--prata2); } #mapa .como small { display: block; font-size: 0.89rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--prata2); } #mapa .como strong { display: block; font-size: 1.1rem; line-height: 1.3; } #mapa .como-txt { grid-column: 1 / -1; color: var(--muted); font-size: 0.95rem; } @media (max-width: 640px) { #mapa .como { grid-template-columns: 1fr; } #mapa .rot { font-size: 16px; padding: 1px 7px; } } /* a disputa pela demanda, dita ao local (19/10/2026) [M Renato: «DESTACAR QUE enquanto o pedido nao for fechado, haverá uma DISPUTA pela demanda… INVERSO do modelo de anúncios para todos (CPM)»] */ #mapa .disputa { margin-top: 1.6rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1rem, 3vw, 1.8rem); align-items: center; padding: 1.3rem 1.4rem; border: 2px solid var(--amb); border-radius: var(--raio); background: var(--white); } #mapa .disputa figure { margin: 0; } #mapa .disputa figure img { display: block; width: 100%; height: auto; aspect-ratio: 1344 / 752; object-fit: cover; border-radius: 12px; } #mapa .disputa .cab { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; } #mapa .disputa svg { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgba(200,106,46,.14); color: var(--amb2); } #mapa .disputa small { display: block; font-size: 0.89rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amb2); } #mapa .disputa h3 { margin: .15rem 0 0; font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.25; } #mapa .disputa ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; } #mapa .disputa .inverso { margin-top: .9rem; padding: .7rem 1rem; border-radius: 10px; background: rgba(200,106,46,.12); font-weight: 700; } @media (max-width: 760px) { #mapa .disputa { grid-template-columns: minmax(0, 1fr); } } /* a posição do morador no mapa (20/10/2026) [M Renato: «Os mapas não abrem na região exata onde o morador está»] */ #mapa .mapa-frame { position: relative; } #mapa .pino.perto { box-shadow: 0 0 0 5px rgba(46,125,90,.55), 0 1px 5px rgba(0,0,0,.45); } #mapa .pino.longe { opacity: .6; } #mapa .rot.longe { opacity: .8; } #mapa .rot.perto { border-width: 2px; } #mapa .voce { display: block; width: 18px; height: 18px; border-radius: 50%; background: #3b82f6; border: 3px solid #fff; box-shadow: 0 0 0 8px rgba(59,130,246,.3); } #mapa .rot.voce-r { background: #1d4ed8; color: #fff; border-color: #93c5fd; } #mapa .pp-dist { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: #2E7D5A; } #mapa .loc { position: absolute; top: 12px; right: 12px; z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: min(300px, calc(100% - 76px)); } #mapa .loc-botao { min-height: 48px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--white); color: var(--txt); font: 700 0.89rem Inter, system-ui, sans-serif; box-shadow: 0 4px 14px rgba(0,0,0,.3); cursor: pointer; } #mapa .loc-botao:disabled { opacity: .7; cursor: progress; } #mapa .loc-msg { margin: 0; padding: 6px 10px; border-radius: 10px; background: rgba(30,43,60,.88); color: #fff; font: 500 0.89rem/1.35 Inter, system-ui, sans-serif; text-align: right; } @media (max-width: 640px) { #mapa .loc-botao .longo { display: none; } } @media (min-width: 641px) { #mapa .loc-botao .curto { display: none; } } /* ---------- 29/10 (§3.3.696): letra maior/menor, honeypot e Turnstile ---------- */ .fs { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 .6rem; border: 1.5px solid rgba(211,220,232,.45); border-radius: 10px; background: transparent; color: #fff; font: 800 1rem/1 Inter, system-ui, sans-serif; cursor: pointer; } .fs:hover { background: rgba(255,255,255,.08); } .fs-grupo { display: inline-flex; gap: .35rem; align-items: center; } .fs-rotulo { font-size: .89rem; color: #D3DCE8; margin-right: .2rem; } @media (max-width: 600px) { .fs-rotulo { display: none; } } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .hero-sub-nova { font-size: 1.1rem; color: #F4F7FB; line-height: 1.55; margin: .6rem 0 1.2rem; max-width: 36rem; } .hero-acoes { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; } .btn-sec { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .8rem 1.3rem; border: 2px solid #D3DCE8; border-radius: 10px; color: #fff; font-weight: 700; text-decoration: none; } .btn-sec:hover { background: rgba(255,255,255,.08); } .turnstile { margin-top: 1rem; min-height: 0; } /* 29/10: links em linha com alvo de 48 px; âmbar escurecido (#A8521C) para contraste AA com texto branco */ .side-contato a, .foot a, .flegal a, .hint a, #success p a, .hero-menu, .tri-link, .foot .marca a { display: inline-flex; align-items: center; min-height: 48px; } .foot .marca a { min-width: 48px; justify-content: center; } /* ---------- proteção da família (12/11/2026), versão COMPACTA: menos altura, mais colunas; no celular os cartões viram faixa de deslizar ---------- */ .prot-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 1rem 2rem; align-items: end; } .prot-top .sec-cab { margin-bottom: 0; } .prot-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-top: 1.2rem; } .prot-card { background: var(--cream); border: 1px solid var(--border); border-top: 6px solid var(--grn); border-radius: var(--raio); padding: 1rem 1rem .9rem; display: flex; flex-direction: column; gap: .4rem; } .prot-card.pa { border-top-color: var(--amb); } .prot-card.vz { border-top-color: var(--prata2); } .prot-card.vl { border-top-color: #8A6D1F; } .prot-tag { font-size: 0.89rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--txt); display: inline-flex; align-items: center; gap: .5rem; } .prot-tag::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--grn); flex: none; } .prot-card.pa .prot-tag::before { background: var(--amb); } .prot-card.vz .prot-tag::before { background: var(--prata2); } .prot-card.vl .prot-tag::before { background: #8A6D1F; } .prot-card h3 { font-size: 1.2rem; font-weight: 800; line-height: 1.2; } .prot-card .prot-sub { font-weight: 700; color: var(--txt); line-height: 1.35; font-size: .95rem; } .prot-card p { color: var(--muted); font-size: .89rem; line-height: 1.5; } .prot-card .prot-link { margin-top: auto; padding-top: .3rem; display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; font-size: .95rem; color: var(--txt); text-underline-offset: 4px; } .prot-mid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-top: .9rem; align-items: stretch; } .prot-ind { padding: 1rem 1.2rem; border: 1px solid var(--border); border-left: 6px solid #8A6D1F; border-radius: var(--raio); background: var(--cream); } .prot-ind h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: .3rem; } .prot-ind p { color: var(--muted); line-height: 1.5; font-size: .92rem; } .prot-preco { display: flex; flex-direction: column; justify-content: center; gap: .8rem; padding: 1rem 1.2rem; background: var(--navy); color: #fff; border-radius: var(--raio); } .prot-preco p { color: #E6ECF4; font-size: .95rem; line-height: 1.5; } .prot-preco .btn-pri { text-align: center; align-self: flex-start; } .prot-obra { padding: .8rem 1rem; border: 2px dashed var(--prata2); border-radius: var(--raio); background: var(--cream); line-height: 1.45; font-size: .92rem; } .prot-obra strong { display: block; font-size: 1rem; } .prot-obra a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--txt); text-underline-offset: 4px; margin-right: 1rem; } .prot-aviso { margin-top: .7rem; color: var(--muted); font-size: .89rem; line-height: 1.5; max-width: 60rem; } .prot-form { margin-top: 1.2rem; background: var(--cream); border: 1px solid var(--border); border-radius: var(--raio); padding: clamp(1rem, 2.5vw, 1.4rem); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "t c" "s c" "n c" ". b"; gap: .3rem 2rem; align-items: start; } .prot-form h3 { grid-area: t; font-size: 1.25rem; font-weight: 800; } .prot-form .sub { grid-area: s; color: var(--muted); font-size: .92rem; line-height: 1.5; } .prot-form .nota { grid-area: n; color: var(--muted); font-size: .89rem; line-height: 1.5; align-self: end; } .prot-form .prot-campos { grid-area: c; } .prot-form .bsub-prot { grid-area: b; margin-top: .6rem; justify-self: start; } .prot-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .9rem; } .prot-campos .cheio { grid-column: 1 / -1; } .prot-campos label.rot { display: block; font-weight: 700; font-size: .92rem; margin-bottom: .2rem; } .prot-campos input[type="text"], .prot-campos input[type="tel"] { width: 100%; min-height: 48px; padding: .5rem .8rem; border: 1.5px solid var(--border); border-radius: 10px; background: var(--white); color: var(--txt); font: inherit; } .prot-campos fieldset { border: 0; padding: 0; margin: 0; } .prot-campos legend { font-weight: 700; font-size: .92rem; margin-bottom: .2rem; padding: 0; } .prot-escolhas { display: flex; flex-wrap: wrap; gap: .5rem; } .prot-escolhas label { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .3rem .8rem; border: 1.5px solid var(--border); border-radius: 10px; background: var(--white); cursor: pointer; font-size: .92rem; } .prot-escolhas input { width: 22px; height: 22px; accent-color: var(--grn); flex: none; } .deslize { display: none; font-size: .89rem; color: var(--muted); margin-top: .5rem; } /* ---------- fotos em «Tudo isto entra junto» ---------- */ .ggrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; } .ganho { margin: 0; background: var(--cream); border: 1px solid var(--border); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; } .ganho img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .ganho figcaption { padding: .7rem .9rem .9rem; } .ganho h3 { font-size: .95rem; font-weight: 700; line-height: 1.35; } .ganhos-cred { font-size: .89rem; color: var(--muted); margin-top: .6rem; } @media (max-width: 1000px) and (min-width: 881px) { .ggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- formulário mais baixo no computador (12/11 [M Renato: «No final a página ficou muito verticalizada»]): passos em linha no alto e campos em duas colunas; só CSS, nenhum campo muda ---------- */ @media (min-width: 961px) { .form-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .form-side { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 5vw, 4rem); align-items: start; } .form-side > .slbl, .form-side > h2, .form-side > .side-contato, .form-side > .side-eco { grid-column: 1; } .form-side > .passos { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; } .form-side > .side-taxa { grid-column: 2; } #cred-form { column-count: 2; column-gap: clamp(2rem, 4vw, 3.2rem); } #cred-form > .fst { break-after: avoid; break-inside: avoid; margin-top: 1.4rem; } #cred-form > .fg, #cred-form > .ff, #cred-form > .tg, #cred-form > .hint, #cred-form > div { break-inside: avoid; } #cred-form > .aceite, #cred-form > #aviso-privacidade, #cred-form > .bsub, #cred-form > .falha, #cred-form > .hp, #cred-form > .flegal, #cred-form > .turnstile { column-span: all; } } @media (max-width: 1000px) { .prot-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 880px) { .prot-top, .prot-mid { grid-template-columns: 1fr; } .prot-form { grid-template-columns: 1fr; grid-template-areas: "t" "s" "c" "b" "n"; } .prot-campos { grid-template-columns: 1fr; } /* faixa de deslizar: uma linha de cartões em vez de uma coluna enorme */ .prot-cards, .ggrid { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .8rem; padding-bottom: .6rem; -webkit-overflow-scrolling: touch; } .prot-card, .ganho { flex: 0 0 82%; scroll-snap-align: start; } .deslize { display: block; } } /* ---------- bloco opcional do formulário, recolhido ---------- */ .opc { border: 1.5px solid var(--border); border-radius: 12px; background: var(--cream); margin-top: 1.4rem; padding: 0 1rem .2rem; } .opc > summary { min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .8rem; padding: .5rem 0; font-weight: 800; cursor: pointer; list-style: none; color: var(--txt); } .opc > summary::-webkit-details-marker { display: none; } .opc > summary::after { content: "+"; margin-left: auto; font-size: 1.5rem; line-height: 1; } .opc[open] > summary::after { content: "\2212"; } .opc .opc-dica { font-weight: 400; font-size: .89rem; color: var(--muted); } @media (min-width: 961px) { #cred-form > .opc { column-span: all; } .opc-in { column-count: 2; column-gap: clamp(2rem, 4vw, 3.2rem); } .opc-in > .fst { break-after: avoid; break-inside: avoid; margin-top: 1.2rem; } .opc-in > .fg, .opc-in > .ff, .opc-in > .tg, .opc-in > .hint, .opc-in > div { break-inside: avoid; } } /* ---------- faixa de vídeos da proteção ---------- */ .prot-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-top: .9rem; } .pv { margin: 0; background: var(--cream); border: 1px solid var(--border); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; } .pv video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0b1220; } .pv-btn { min-height: 48px; width: 100%; border: 0; border-top: 1px solid var(--border); background: var(--navy); color: #fff; font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; padding: .5rem 1rem; } .pv-btn:hover, .pv-btn:focus-visible { background: #2a3a52; } .pv figcaption { padding: .7rem .9rem .9rem; } .pv h3 { font-size: 1.05rem; font-weight: 800; line-height: 1.25; margin-bottom: .3rem; } .pv-fala { color: var(--muted); font-size: .89rem; line-height: 1.45; } .pv-rot { display: block; font-weight: 700; color: var(--txt); } .pv-linha { display: block; } .pv-cred { font-size: .89rem; color: var(--muted); margin-top: .5rem; } @media (max-width: 880px) { .prot-videos { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .8rem; padding-bottom: .6rem; -webkit-overflow-scrolling: touch; } .pv { flex: 0 0 82%; scroll-snap-align: start; } } /* ---------- circuito e vale-presente (estavam num