/* /assets/css/feitaz.css */ /* Feitaz — núcleo visual. Direção "Brasa". Contrato: trabalho/site/DIRECAO.md */ /* ---------- Fontes (OFL, auto-hospedadas) ---------- */ @font-face { font-family: "Mona Sans"; src: url("/assets/fonts/mona-sans-latin.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "Mona Sans"; src: url("/assets/fonts/mona-sans-italic-latin.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-style: italic; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-italic-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } /* ---------- Tokens ---------- */ :root { --carvao: #0B0A09; --carvao-2: #121110; --carvao-3: #1A1816; --carvao-4: #24211E; --linha: rgba(244, 239, 230, .10); --linha-2: rgba(244, 239, 230, .18); --osso: #F4EFE6; --osso-2: #E8E1D5; --cinza: #A59C90; --cinza-2: #665E54; /* um passo abaixo de #6E665C: AA (≥ 4,5:1) também sobre --osso-2 */ --tinta: #0B0A09; --brasa: #FF5A1F; --brasa-2: #FF7A45; --brasa-escura: #B0360A; /* 4,78:1 sobre --osso-2 (era #B8390A, 4,46) */ --ouro: #FFB547; --chama: #FF3D6E; --vivo: #3DDC84; --fogo: linear-gradient(100deg, #FFB547 0%, #FF5A1F 45%, #FF3D6E 100%); --fogo-radial: radial-gradient(60% 60% at 50% 50%, rgba(255, 90, 31, .55) 0%, rgba(255, 61, 110, .18) 45%, transparent 72%); --f-display: "Mona Sans", "Helvetica Neue", Arial, system-ui, sans-serif; --f-serifa: "Instrument Serif", Georgia, "Times New Roman", serif; --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --r-xs: 6px; --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-xl: 36px; --ease: cubic-bezier(.16, 1, .3, 1); --ease-2: cubic-bezier(.65, 0, .35, 1); --max: 1320px; --gut: clamp(20px, 4.2vw, 56px); --sec: clamp(88px, 11vw, 168px); --topo-h: 76px; --t-hero: clamp(3.4rem, 10.4vw, 11.4rem); --t-1: clamp(2.6rem, 6.6vw, 6.9rem); --t-2: clamp(2.05rem, 4.2vw, 4.2rem); --t-3: clamp(1.45rem, 2.2vw, 2.1rem); --t-lead: clamp(1.1875rem, 1.35vw, 1.34rem); --t-corpo: 1.125rem; /* 18 px: leitura confortável para quem tem mais idade */ color-scheme: dark; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topo-h) + 24px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; min-height: 100vh; background: var(--carvao); color: var(--osso); font-family: var(--f-display); font-size: var(--t-corpo); line-height: 1.6; font-weight: 420; font-stretch: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } img, video, svg, canvas { display: block; max-width: 100%; } img, video { height: auto; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } ::selection { background: var(--brasa); color: var(--carvao); } :focus-visible { outline: 2px solid var(--brasa); outline-offset: 3px; border-radius: 4px; } [hidden] { display: none !important; } .sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Grão de filme sobre tudo (textura, sem custo de CPU) */ body::after { content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; background-image: url("/assets/img/grao.png"); background-size: 180px 180px; opacity: .035; /* sem mix-blend-mode: 'overlay' sobre o canvas WebGL do herói lavava a tela de branco (visto no Chromium, 29/09) */ } /* ---------- Layout ---------- */ .wrap { width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; } .wrap--largo { width: min(100% - 2 * var(--gut), 1560px); margin-inline: auto; } .wrap--estreito { width: min(100% - 2 * var(--gut), 880px); margin-inline: auto; } .sec { position: relative; padding-block: var(--sec); } .sec--compacta { padding-block: calc(var(--sec) * .6); } .sec--claro { background: var(--osso); color: var(--tinta); color-scheme: light; } .sec--claro .lead, .sec--claro .texto-2 { color: var(--cinza-2); } .sec--claro .olho, .ca-marca .olho, .ca-proximo .olho { color: var(--brasa-escura); } .sec--claro .olho::before, .ca-marca .olho::before, .ca-proximo .olho::before { background: var(--brasa-escura); } .sec--carvao2 { background: var(--carvao-2); } .sec + .sec--claro, .sec--claro + .sec { border-top: 0; } /* ---------- Tipografia ---------- */ .titulo, .t-hero, .t-1, .t-2, .t-3 { font-family: var(--f-display); font-weight: 820; font-stretch: 118%; letter-spacing: -.04em; line-height: .9; text-wrap: balance; } .t-hero { font-size: var(--t-hero); font-weight: 860; font-stretch: 122%; letter-spacing: -.048em; line-height: .84; } .t-1 { font-size: var(--t-1); } .t-2 { font-size: var(--t-2); font-stretch: 114%; letter-spacing: -.035em; line-height: .95; } .t-3 { font-size: var(--t-3); font-weight: 760; font-stretch: 110%; letter-spacing: -.025em; line-height: 1.05; } .serifa { font-family: var(--f-serifa); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: -.01em; } .titulo .serifa, .t-hero .serifa, .t-1 .serifa, .t-2 .serifa, .t-3 .serifa { font-size: 1.08em; line-height: .8; padding-right: .04em; } .fogo { background: var(--fogo); -webkit-background-clip: text; background-clip: text; color: transparent; } /* O gradiente só pinta a caixa do elemento. Em título com line-height < 1, as hastes de p, g, j e f saem da caixa e ficavam sem tinta quando o trecho em serifa vira bloco (/precos/, pacotes, landing page). A folga vertical aumenta a área pintada; a margem negativa devolve o espaço, sem mudar o layout. */ .fogo { padding-block: .16em .22em; margin-block: -.16em -.22em; } .sec--claro .fogo { background: linear-gradient(100deg, #C9530C 0%, var(--brasa-escura) 50%, #B01E4C 100%); -webkit-background-clip: text; background-clip: text; } .brasa-txt { color: var(--brasa); } .sec--claro .brasa-txt { color: var(--brasa-escura); } .lead { font-size: var(--t-lead); line-height: 1.5; color: var(--cinza); max-width: 62ch; text-wrap: pretty; } .texto { max-width: 64ch; text-wrap: pretty; } .texto-2 { color: var(--cinza); } .texto p + p { margin-top: 1em; } .olho { display: inline-flex; align-items: center; gap: .8em; font-family: var(--f-mono); font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--brasa); } .olho::before { content: ""; width: 26px; height: 1px; background: var(--brasa); } .olho--sem::before { display: none; } .mono { font-family: var(--f-mono); } .cabeca { display: grid; gap: clamp(18px, 2vw, 28px); margin-bottom: clamp(44px, 6vw, 88px); } .cabeca--centro { justify-items: center; text-align: center; } .cabeca--centro .lead { margin-inline: auto; } .cabeca--duo { grid-template-columns: 1fr; align-items: end; } @media (min-width: 960px) { .cabeca--duo { grid-template-columns: 1.15fr .85fr; gap: 48px; } } /* ---------- Botões ---------- */ .btn { --btn-bg: var(--carvao-4); --btn-fg: var(--osso); --btn-bd: var(--linha-2); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg); font-weight: 650; font-stretch: 108%; font-size: 1rem; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; isolation: isolate; overflow: hidden; transition: transform .5s var(--ease), background-color .3s, border-color .3s, color .3s, box-shadow .4s; } .btn::before { /* brilho que atravessa */ content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%) skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transition: transform .8s var(--ease); } .btn:hover::before { transform: translateX(120%) skewX(-20deg); } .btn:active { transform: scale(.97); } .btn svg { width: 1.1em; height: 1.1em; flex: none; transition: transform .45s var(--ease); } .btn:hover svg.seta { transform: translateX(4px); } .btn--brasa { --btn-bg: var(--brasa); --btn-fg: var(--carvao); --btn-bd: var(--brasa); box-shadow: 0 10px 40px -12px rgba(255, 90, 31, .7), inset 0 1px 0 rgba(255, 255, 255, .35); } .btn--brasa:hover { --btn-bg: var(--brasa-2); box-shadow: 0 16px 60px -10px rgba(255, 90, 31, .9), inset 0 1px 0 rgba(255, 255, 255, .45); } .btn--vidro { --btn-bg: rgba(244, 239, 230, .06); --btn-bd: var(--linha-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btn--vidro:hover { --btn-bg: rgba(244, 239, 230, .12); --btn-bd: rgba(244, 239, 230, .35); } .btn--claro { --btn-bg: var(--osso); --btn-fg: var(--tinta); --btn-bd: var(--osso); } .btn--tinta { --btn-bg: var(--tinta); --btn-fg: var(--osso); --btn-bd: var(--tinta); } .btn--linha-escura { --btn-bg: transparent; --btn-fg: var(--tinta); --btn-bd: rgba(11, 10, 9, .25); } .btn--linha-escura:hover { --btn-bd: var(--tinta); } .btn--g { min-height: 62px; padding: 0 34px; font-size: 1.08rem; } .btn--p { min-height: 44px; padding: 0 18px; font-size: .92rem; } .acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .link-seta { display: inline-flex; align-items: center; gap: .5em; font-weight: 620; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .link-seta:hover { color: var(--brasa); } .sec--claro .link-seta:hover { color: var(--brasa-escura); } /* ---------- Pílulas de estado ---------- */ .pilula { display: inline-flex; align-items: center; gap: .5em; height: 26px; padding: 0 11px; border-radius: 999px; font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: rgba(11, 10, 9, .6); color: var(--osso); border: 1px solid var(--linha-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pilula::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pilula--vivo::before { background: var(--vivo); box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: pulso 2.2s infinite; } .pilula--previa::before { background: var(--ouro); } .pilula--proposta::before { background: transparent; border: 1.5px solid var(--osso); } .pilula--demo::before { background: var(--brasa); } .sec--claro .pilula { background: rgba(255, 255, 255, .7); color: var(--tinta); border-color: rgba(11, 10, 9, .14); } @keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); } 70% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } } /* ---------- Cartões com luz de cursor ---------- */ .cartao { --mx: 50%; --my: 50%; position: relative; border-radius: var(--r-l); background: var(--carvao-3); border: 1px solid var(--linha); overflow: hidden; isolation: isolate; transition: border-color .4s, transform .6s var(--ease), background-color .4s; } .cartao::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 90, 31, .16), transparent 60%); } .cartao:hover { border-color: rgba(255, 90, 31, .35); } .cartao:hover::before { opacity: 1; } .sec--claro .cartao { background: #FFFFFF; border-color: rgba(11, 10, 9, .08); box-shadow: 0 1px 0 rgba(11, 10, 9, .03), 0 24px 60px -34px rgba(11, 10, 9, .25); } .sec--claro .cartao::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 90, 31, .10), transparent 60%); } /* ---------- Molduras de dispositivo ---------- */ .nav-frame { border-radius: 14px; background: #1b1917; border: 1px solid var(--linha-2); overflow: hidden; box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .8); } .nav-frame__barra { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #221f1c; border-bottom: 1px solid var(--linha); } .nav-frame__barra i { width: 10px; height: 10px; border-radius: 50%; background: #3a3632; } .nav-frame__barra i:first-child { background: #ff5f57; } .nav-frame__barra i:nth-child(2) { background: #febc2e; } .nav-frame__barra i:nth-child(3) { background: #28c840; } .nav-frame__url { margin-left: 12px; flex: 1; max-width: 360px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .06); font-family: var(--f-mono); font-size: 11px; line-height: 22px; padding: 0 10px; color: var(--cinza); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .nav-frame__tela { position: relative; aspect-ratio: 16 / 10; background: #0f0e0d; } .nav-frame__tela > img, .nav-frame__tela > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .cel-frame { position: relative; width: 100%; aspect-ratio: 390 / 844; border-radius: 16% / 7.4%; padding: 3.2%; background: linear-gradient(145deg, #2b2825, #121110 60%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12), 0 50px 100px -30px rgba(0, 0, 0, .85); } .cel-frame__tela { position: relative; width: 100%; height: 100%; border-radius: 13% / 6%; overflow: hidden; background: #000; } .cel-frame__tela > img, .cel-frame__tela > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .cel-frame::after { content: ""; position: absolute; top: 4.6%; left: 50%; width: 28%; height: 3.4%; transform: translateX(-50%); border-radius: 999px; background: #000; } /* ---------- Letreiro (marquee) ---------- */ .letreiro { --dur: 42s; display: flex; overflow: hidden; user-select: none; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .letreiro__trilho { display: flex; flex: none; gap: clamp(28px, 4vw, 64px); padding-right: clamp(28px, 4vw, 64px); animation: letreiro var(--dur) linear infinite; } .letreiro:hover .letreiro__trilho { animation-play-state: paused; } @keyframes letreiro { to { transform: translateX(-100%); } } /* ---------- Números ---------- */ .numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--r-l); overflow: hidden; } .numero { background: var(--carvao-2); padding: clamp(22px, 2.6vw, 34px); display: grid; gap: 8px; align-content: start; } .numero__valor { font-size: clamp(2.4rem, 4.4vw, 4rem); font-weight: 840; font-stretch: 120%; letter-spacing: -.045em; line-height: .9; } .numero__rotulo { color: var(--cinza); font-size: .95rem; line-height: 1.4; } .numero__fonte { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza-2); } .sec--claro .numeros { background: rgba(11, 10, 9, .1); border-color: rgba(11, 10, 9, .1); } .sec--claro .numero { background: var(--osso); } .sec--claro .numero__rotulo { color: var(--cinza-2); } /* ---------- Perguntas (FAQ) ---------- */ .faq { border-top: 1px solid var(--linha-2); } .faq details { border-bottom: 1px solid var(--linha-2); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font-size: clamp(1.08rem, 1.5vw, 1.3rem); font-weight: 650; font-stretch: 106%; letter-spacing: -.015em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linha-2); background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23FF5A1F' stroke-width='1.6'/%3E%3C/svg%3E"); transition: transform .5s var(--ease), background-color .3s; } .faq details[open] summary::after { transform: rotate(45deg); background-color: rgba(255, 90, 31, .12); } .faq .faq__r { padding: 0 0 28px; max-width: 70ch; color: var(--cinza); } .sec--claro .faq, .sec--claro .faq details { border-color: rgba(11, 10, 9, .14); } .sec--claro .faq .faq__r { color: var(--cinza-2); } /* ---------- Topo (cabeçalho) ---------- */ .pular { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--brasa); color: var(--carvao); border-radius: 8px; font-weight: 700; text-decoration: none; transition: top .2s; } .pular:focus { top: 12px; } .topo { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 14px var(--gut) 0; pointer-events: none; } .topo__barra { position: relative; pointer-events: auto; margin: 0 auto; max-width: 1400px; height: 62px; display: flex; align-items: center; gap: 18px; padding: 0 10px 0 22px; border-radius: 999px; border: 1px solid transparent; transition: background-color .5s var(--ease), border-color .5s, box-shadow .5s, backdrop-filter .5s; } .topo[data-rolou="1"] .topo__barra, .topo:focus-within .topo__barra { background: rgba(18, 17, 16, .72); border-color: var(--linha); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); } .topo__marca { position: relative; display: inline-flex; color: var(--osso); flex: none; } .topo__marca svg { width: 118px; height: auto; } .topo__nav { margin-left: auto; } .topo__lista { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; } .topo__link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 999px; font-size: .95rem; font-weight: 560; text-decoration: none; color: rgba(244, 239, 230, .86); transition: color .25s, background-color .25s; } .topo__link:hover, .topo__link[aria-current] { color: var(--osso); background: rgba(244, 239, 230, .07); } .topo__link[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--brasa); } .topo__link svg { width: 10px; height: 10px; transition: transform .35s var(--ease); } .topo__etq { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 6px; border-radius: 5px; background: rgba(255, 90, 31, .16); color: var(--brasa); } .topo__cta { margin-left: 6px; } .topo__mega-item { position: static; } .mega { position: absolute; top: calc(100% + 14px); left: 50%; width: min(1120px, 100vw - 2 * var(--gut)); transform: translate(-50%, 8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s .3s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 6px; padding: 10px; border-radius: 26px; background: rgba(18, 17, 16, .94); border: 1px solid var(--linha-2); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); } .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } .topo__mega-item:hover .mega, .topo__mega-item:focus-within .mega, .topo__mega-item[data-aberto="1"] .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s; } .topo__mega-item:hover > .topo__link svg, .topo__mega-item:focus-within > .topo__link svg { transform: rotate(180deg); } .mega__col { padding: 16px 14px; } .mega__tit { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza); margin: 2px 8px 12px; } .mega__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .mega__lista a { display: grid; gap: 2px; padding: 10px 10px; border-radius: 12px; text-decoration: none; transition: background-color .25s; } .mega__lista a:hover, .mega__lista a:focus-visible { background: rgba(244, 239, 230, .06); } .mega__lista strong { font-weight: 640; font-size: .98rem; letter-spacing: -.01em; } .mega__lista span { font-size: .82rem; color: var(--cinza); line-height: 1.35; } .mega__destaque { position: relative; display: grid; align-content: end; gap: 8px; min-height: 100%; padding: 22px; border-radius: 18px; overflow: hidden; text-decoration: none; background: radial-gradient(120% 90% at 80% 0%, rgba(255, 90, 31, .55), transparent 60%), linear-gradient(160deg, #2a1a12, #140f0c); border: 1px solid rgba(255, 90, 31, .3); } .mega__destaque strong { font-size: 1.25rem; font-weight: 780; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.05; } .mega__destaque span { font-size: .85rem; color: rgba(244, 239, 230, .78); } /* Menu da vitrine (gerado de trabalho/catalogo/vitrine.json pelo sync.py): família → páginas de serviço */ .mega__col .mega__tit { margin: 14px 8px 6px; } .mega__col .mega__tit:first-child { margin-top: 2px; } .mega__tit a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; } .mega__tit a:hover, .mega__tit a:focus-visible, .mega__tit a[aria-current] { color: var(--brasa); border-color: currentColor; } .mega__col .mega__lista a { display: block; padding: 7px 10px; font-size: .92rem; font-weight: 560; line-height: 1.3; color: rgba(244, 239, 230, .88); } .mega__col .mega__lista a[aria-current="page"] { color: var(--brasa); background: rgba(255, 90, 31, .08); } .mega__todos { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px; padding: 14px 18px; border-radius: 16px; text-decoration: none; font-weight: 640; background: radial-gradient(120% 140% at 100% 0%, rgba(255, 90, 31, .28), transparent 60%), rgba(244, 239, 230, .04); border: 1px solid rgba(255, 90, 31, .22); transition: background-color .25s, border-color .25s; } .mega__todos::after { content: "→"; color: var(--brasa); font-weight: 700; } .mega__todos:hover, .mega__todos:focus-visible { border-color: rgba(255, 90, 31, .5); } .topo__burger { display: none; } /* Menu móvel (details: funciona sem JS) */ .menu-movel { display: none; } @media (max-width: 1080px) { :root { --topo-h: 64px; } .topo { padding-top: 10px; } .topo__barra { height: 56px; padding: 0 6px 0 18px; } .topo__nav, .topo__cta { display: none; } .topo__marca svg { width: 104px; } .menu-movel { display: block; margin-left: auto; } /* O blur do ancestral cria um containing block para o painel fixed. Enquanto aberto, o menu precisa ocupar a viewport inteira. */ .topo:has(.menu-movel[open]) .topo__barra { backdrop-filter: none; -webkit-backdrop-filter: none; transition: none; background: var(--carvao); border-color: var(--linha); box-shadow: none; } .menu-movel > summary { list-style: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(244, 239, 230, .08); border: 1px solid var(--linha-2); cursor: pointer; } .menu-movel > summary::-webkit-details-marker { display: none; } .menu-movel > summary span { position: relative; width: 18px; height: 2px; background: var(--osso); border-radius: 2px; transition: transform .4s var(--ease), background-color .2s; } .menu-movel > summary span::before, .menu-movel > summary span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--osso); border-radius: 2px; transition: transform .4s var(--ease); } .menu-movel > summary span::before { transform: translateY(-6px); } .menu-movel > summary span::after { transform: translateY(6px); } .menu-movel[open] > summary span { background: transparent; } .menu-movel[open] > summary span::before { transform: rotate(45deg); } .menu-movel[open] > summary span::after { transform: rotate(-45deg); } .menu-movel__painel { position: fixed; inset: 0; z-index: -1; overflow-y: auto; padding: calc(var(--topo-h) + 36px) var(--gut) 40px; background: radial-gradient(90% 60% at 100% 0%, rgba(255, 90, 31, .22), transparent 60%), var(--carvao); display: grid; align-content: start; gap: 30px; } .menu-movel__principal { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .menu-movel__principal a { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 0; font-size: clamp(2rem, 9vw, 3rem); font-weight: 820; font-stretch: 118%; letter-spacing: -.04em; line-height: 1.05; text-decoration: none; } .menu-movel__principal a[aria-current] { color: var(--brasa); } .menu-movel__grupo { display: grid; gap: 10px; } .menu-movel__grupo p { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza); } .menu-movel__grupo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .menu-movel__grupo a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linha-2); text-decoration: none; font-weight: 560; } .menu-movel__painel .btn { width: 100%; } } /* ---------- Barra fixa de conversa no celular ---------- */ .fixo-cel { display: none; } @media (max-width: 760px) { .fixo-cel { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 95; gap: 10px; align-items: center; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(18, 17, 16, .88); border: 1px solid var(--linha-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .7); transform: translateY(140%); visibility: hidden; transition: transform .6s var(--ease), visibility 0s .6s; } .fixo-cel[data-visivel="1"] { transform: none; visibility: visible; transition: transform .6s var(--ease), visibility 0s 0s; } .fixo-cel p { flex: 1; font-size: .86rem; line-height: 1.25; color: var(--cinza); } .fixo-cel p strong { display: block; color: var(--osso); font-weight: 650; } .fixo-cel .btn { min-height: 46px; padding: 0 18px; } } /* ---------- Rodapé ---------- */ .rodape { position: relative; background: var(--carvao); border-top: 1px solid var(--linha); overflow: hidden; padding-top: clamp(72px, 9vw, 130px); } .rodape::before { content: ""; position: absolute; left: 50%; bottom: -30%; width: 120vw; height: 70%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(255, 90, 31, .22), transparent 70%); pointer-events: none; } .rodape__topo { position: relative; display: grid; gap: 56px; } @media (min-width: 1000px) { .rodape__topo { grid-template-columns: 1.1fr 1.4fr; gap: 80px; } } .rodape__frase { font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 820; font-stretch: 116%; letter-spacing: -.04em; line-height: .95; margin: 18px 0 30px; text-wrap: balance; } .rodape__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 24px; } @media (min-width: 700px) { .rodape__cols { grid-template-columns: repeat(4, 1fr); } } .rodape__cols .rodape__tit + ul + .rodape__tit { margin-top: 26px; } /* Com as 33 páginas de serviço, as 5 colunas não cabem na metade direita: o rodapé de serviços desce para a largura inteira, abaixo da frase, e as colunas ganham espaço (menos quebra de linha e menos altura). */ @media (min-width: 1000px) { .rodape__topo:has(.rodape__cols--servicos) { grid-template-columns: 1fr; gap: 56px; } .rodape__cols--servicos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 34px 32px; } } .rodape__cols .rodape__tit { font-family: var(--f-mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza); margin-bottom: 16px; } .rodape__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .rodape__cols a { text-decoration: none; color: rgba(244, 239, 230, .86); font-size: .96rem; } .rodape__cols a:hover { color: var(--brasa); } /* Sanfona do celular: os mesmos links das colunas, por família (tools/vitrine.py); fora do celular não aparece. */ .rodape__sanfona { display: none; } /* Página que já fecha com o próprio convite (.cta-final ou WhatsApp na última seção do main): o convite do rodapé sai, para não haver dois CTAs seguidos (revisão de 11/10/2026, M5). Sem :has(), o rodapé fica inteiro. */ /* Página que já fecha com convite (.cta-final ou WhatsApp na última seção) não repete o convite do rodapé. Valia só para body[data-vitrine="v2"]; /trabalhos/, os casos, /como-funciona/, /servicos/ e a 404 repetiam. */ body:has(main .cta-final, main > section:last-of-type [data-wa]) .rodape__chamada { display: none; } .rodape__marca { position: relative; margin-top: clamp(64px, 8vw, 120px); padding-inline: var(--gut); color: var(--osso); } .rodape__marca svg { width: 100%; height: auto; opacity: .95; } .rodape__base { position: relative; display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; padding-block: 26px 34px; font-size: .84rem; color: var(--cinza); border-top: 1px solid var(--linha); margin-top: clamp(24px, 3vw, 40px); } .rodape__base a { color: var(--cinza); } .rodape__base a:hover { color: var(--osso); } @media (max-width: 760px) { .rodape__base { padding-bottom: 96px; } } /* ---------- CTA final ---------- */ .cta-final { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(48px, 7vw, 110px) clamp(24px, 6vw, 96px); background: radial-gradient(80% 120% at 85% 10%, rgba(255, 90, 31, .45), transparent 55%), radial-gradient(60% 90% at 0% 100%, rgba(255, 61, 110, .22), transparent 60%), var(--carvao-2); border: 1px solid rgba(255, 90, 31, .22); display: grid; gap: 26px; } .cta-final .t-1 { max-width: 14ch; } .cta-final > * { min-width: 0; } .cta-final .btn { max-width: 100%; white-space: normal; text-align: center; } @media (max-width: 520px) { .cta-final { padding: 40px 22px; } .cta-final .t-1 { font-size: clamp(2rem,8vw,2.6rem); overflow-wrap: anywhere; } .cta-final .acoes .btn { flex: 1 1 100%; padding-inline: 18px; } } /* ---------- Revelar ao rolar (o texto some só com JS ligado, sem piscar) ---------- */ @media (scripting: enabled) and (prefers-reduced-motion: no-preference) { /* Só esconda para animar depois que o script comum iniciou. Se o download falhar, o HTML continua visível mesmo com JavaScript habilitado. */ .js .revela { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); } .js .revela.visto { opacity: 1; transform: none; } .js .revela-mascara { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); } .js .revela-mascara.visto { clip-path: inset(0 0 0 0); } } /* ---------- Transição entre páginas (View Transitions entre documentos; quem não suporta navega normal) ---------- O cabeçalho fica parado (nome próprio) enquanto a página sai e a nova entra; o título da página nova sobe por máscara. Só com movimento liberado: com prefers-reduced-motion a navegação é instantânea. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } .topo__barra { view-transition-name: fz-topo; } main h1 { view-transition-name: fz-titulo; } ::view-transition-old(root) { animation: fz-vt-sai .26s var(--ease-2) both; } ::view-transition-new(root) { animation: fz-vt-entra .6s var(--ease) both; } ::view-transition-group(fz-titulo) { animation-duration: 0s; } ::view-transition-old(fz-titulo) { animation: fz-vt-sai .2s ease both; } ::view-transition-new(fz-titulo) { animation: fz-vt-titulo .78s var(--ease) .06s both; } } @keyframes fz-vt-sai { to { opacity: 0; transform: translateY(-12px); } } @keyframes fz-vt-entra { from { opacity: 0; transform: translateY(18px); } } @keyframes fz-vt-titulo { from { opacity: 0; transform: translateY(.35em); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); } } /* ---------- Revelar ao rolar só com CSS (linha do tempo de visão), quando o navegador suporta ---------- Substitui o observador do feitaz.js nesses navegadores (o script marca .visto na hora); nos demais, continua valendo a revelação por classe acima. Sem JS o conteúdo também revela, sem ficar invisível. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .js .revela, .js .revela.visto, .js .revela-mascara, .js .revela-mascara.visto { opacity: 1; transform: none; clip-path: none; transition: none; } .revela { animation: fz-revela linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; } .revela-mascara { animation: fz-revela-mascara linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; } } } @keyframes fz-revela { from { opacity: 0; transform: translateY(34px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes fz-revela-mascara { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } /* Quebra de linha refinada: títulos equilibrados, parágrafos sem viúva (navegador sem suporte ignora). */ h1, h2, h3, h4, summary { text-wrap: balance; } p, li, dd, figcaption { text-wrap: pretty; } html.menu-aberto { overflow: hidden; } /* ---------- Marca gigante do rodapé ---------- */ .marca-gigante { width: 100%; aspect-ratio: 3236 / 754; background: linear-gradient(180deg, rgba(244, 239, 230, .92) 0%, rgba(244, 239, 230, .22) 62%, rgba(255, 90, 31, .08) 100%); -webkit-mask: url("/assets/img/feitaz-logo.svg") center / contain no-repeat; mask: url("/assets/img/feitaz-logo.svg") center / contain no-repeat; } .topo__marca img { width: 118px; height: auto; } @media (max-width: 1080px) { .topo__marca img { width: 104px; } } /* ---------- Captura longa que rola no hover ---------- */ [data-rola] { overflow: hidden; } [data-rola] img { transition: transform var(--rola-dur, 6s) cubic-bezier(.45, 0, .2, 1); will-change: transform; } [data-rola]:hover img, [data-rola]:focus-within img { transform: translateY(var(--rola, 0)); } /* ---------- Utilitários ---------- */ .grade-2 { display: grid; gap: clamp(20px, 3vw, 40px); } @media (min-width: 900px) { .grade-2 { grid-template-columns: 1fr 1fr; } } .grade-3 { display: grid; gap: clamp(16px, 2vw, 24px); } @media (min-width: 760px) { .grade-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .grade-3 { grid-template-columns: repeat(3, 1fr); } } .fio { height: 1px; background: var(--linha); border: 0; margin: 0; } .centro { text-align: center; } .aviso-demo { display: inline-flex; align-items: center; gap: .55em; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); } .aviso-demo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brasa); box-shadow: 0 0 10px var(--brasa); } /* ---------- Movimento reduzido ---------- */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js .revela, .js .revela-mascara { opacity: 1; transform: none; clip-path: none; } .letreiro__trilho { animation: none; } } /* ---------- Aviso de privacidade (medicao.js; só aparece com medição configurada) ---------- */ .aviso-priv { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 120; width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - var(--topo-h) - 32px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 14px; padding: 18px 20px; border-radius: 22px; background: rgba(18, 17, 16, .96); border: 1px solid var(--linha-2); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .aviso-priv__txt { font-size: .92rem; line-height: 1.5; color: rgba(244, 239, 230, .86); } .aviso-priv__txt a { color: var(--brasa); } .aviso-priv__curto { display: none; } .aviso-priv__acoes { display: flex; gap: 10px; } .aviso-priv__acoes .btn { flex: 1; min-width: 0; padding-inline: 12px; } body:has(.menu-movel[open]) .aviso-priv { visibility: hidden; } .rodape__priv { background: none; border: 0; padding: 0; color: var(--cinza); text-decoration: underline; text-underline-offset: .2em; font-size: inherit; } .rodape__priv:hover { color: var(--osso); } /* ---------- Capa de vídeo para quem navega sem JS (tools/otimizar.py) ---------- */ .video-sem-js { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* (11/10/2026) Sem content-visibility:auto nas seções: com a reserva de 1000 px, o link de âncora (linha de preço do herói → #onde, itens dos pacotes → /pagina/#secao) pousava até 2.000 px fora do destino, porque as seções ainda não desenhadas assumiam a altura real depois do salto (medido em 8 de 10 páginas, provas/qa-final/qa-ia-a.md). A âncora certa vale mais que o ganho de desenho na largada. */ /* Esc fecha o mega menu mesmo com o ponteiro sobre ele (feitaz.js marca data-fechado até o ponteiro sair). */ .topo__mega-item[data-fechado="1"] .mega { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px); } .aviso-priv__ops { display: grid; gap: 10px; } .aviso-priv__ops[hidden] { display: none; } .aviso-priv__op { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.45; color: rgba(244, 239, 230, .86); cursor: pointer; } .aviso-priv__op input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--brasa); flex: none; } /* ---------- Barras de rolagem dos painéis de demonstração (A-433) ---------- WebKit/Safari ignora scrollbar-color: o par -webkit-scrollbar abaixo (só onde scrollbar-color não existe — Chromium/Firefox seguem o de cada demo) aplica a mesma cor discreta. Só o polegar é pintado. */ .dm-wa__log, .dm-rag__msgs-wrap, .dm-tarefa__linha-wrap, .dm-tarefa__reg, .dm-voz__tr-wrap { --barra-polegar: var(--linha-2); } .dm-painel__pan, .dm-painel__cal, .dm-doc__json pre, body[data-pagina="sistemas"] .dm-painel--js .dm-painel__lista { --barra-polegar: rgba(244, 239, 230, .15); } .dm-rag__doc { --barra-polegar: rgba(11, 10, 9, .25); } @supports not (scrollbar-color: auto) { .dm-wa__log::-webkit-scrollbar, .dm-rag__msgs-wrap::-webkit-scrollbar, .dm-rag__doc::-webkit-scrollbar, .dm-doc__json pre::-webkit-scrollbar, .dm-painel__pan::-webkit-scrollbar, .dm-painel__cal::-webkit-scrollbar, .dm-tarefa__linha-wrap::-webkit-scrollbar, .dm-tarefa__reg::-webkit-scrollbar, .dm-voz__tr-wrap::-webkit-scrollbar, body[data-pagina="sistemas"] .dm-painel--js .dm-painel__lista::-webkit-scrollbar { width: 8px; height: 8px; } .dm-wa__log::-webkit-scrollbar-thumb, .dm-rag__msgs-wrap::-webkit-scrollbar-thumb, .dm-rag__doc::-webkit-scrollbar-thumb, .dm-doc__json pre::-webkit-scrollbar-thumb, .dm-painel__pan::-webkit-scrollbar-thumb, .dm-painel__cal::-webkit-scrollbar-thumb, .dm-tarefa__linha-wrap::-webkit-scrollbar-thumb, .dm-tarefa__reg::-webkit-scrollbar-thumb, .dm-voz__tr-wrap::-webkit-scrollbar-thumb, body[data-pagina="sistemas"] .dm-painel--js .dm-painel__lista::-webkit-scrollbar-thumb { background: var(--barra-polegar); border-radius: 8px; } .dm-wa__log::-webkit-scrollbar-track, .dm-rag__msgs-wrap::-webkit-scrollbar-track, .dm-rag__doc::-webkit-scrollbar-track, .dm-doc__json pre::-webkit-scrollbar-track, .dm-painel__pan::-webkit-scrollbar-track, .dm-painel__cal::-webkit-scrollbar-track, .dm-tarefa__linha-wrap::-webkit-scrollbar-track, .dm-tarefa__reg::-webkit-scrollbar-track, .dm-voz__tr-wrap::-webkit-scrollbar-track, body[data-pagina="sistemas"] .dm-painel--js .dm-painel__lista::-webkit-scrollbar-track { background: transparent; } } /* ---------- Direção móvel: leitura confortável e ação evidente ---------- */ @media (max-width: 760px) { :root { --gut: 22px; --sec: 76px; --t-corpo: 1.125rem; --t-lead: 1.1875rem; } body::after { opacity: .022; } .cabeca { gap: 20px; margin-bottom: 34px; } .cabeca > div > .olho { margin-bottom: 18px; } .olho { font-size: .75rem; letter-spacing: .06em; line-height: 1.6; } .pilula { font-size: .75rem; } :is(.mono, .au-mono, .pb-mono, .lp-label, .dmf-l__op):not(.palco *, [data-exemplo] *, [data-papel="cena"] *) { font-size: .75rem; } .olho::before { width: 18px; flex: none; } /* Rótulo do herói (o .olho logo antes do h1): leva o nome do serviço quando o título é metáfora, então não desce de 13 px no celular, nem quando a página reduz os próprios olhos (revisão de 11/10/2026, M2). */ #conteudo .olho:has(+ h1) { font-size: .8125rem; letter-spacing: .06em; line-height: 1.45; gap: .7em; } .t-1 { font-size: clamp(2.5rem, 10.7vw, 4.2rem); line-height: .98; } .t-2 { line-height: 1; } .lead, .texto { line-height: 1.6; } .btn { min-height: 54px; padding-inline: 22px; } .btn--g { min-height: 58px; font-size: 1rem; } .btn--brasa { box-shadow: 0 8px 28px -16px rgba(255,90,31,.6), inset 0 1px 0 rgba(255,255,255,.32); } .btn--vidro { backdrop-filter: none; -webkit-backdrop-filter: none; } .topo { padding: 8px 12px 0; } /* faixa acima e em volta da cápsula: o texto que rola não aparece por cima do menu (jornada premium C3, 14/10/2026) */ .topo::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--topo-h) + 6px); pointer-events: none; opacity: 0; background: linear-gradient(to bottom, rgba(11,10,9,.95) 0%, rgba(11,10,9,.88) 62%, rgba(11,10,9,0) 100%); transition: opacity .4s var(--ease); } .topo[data-rolou="1"]::before { opacity: 1; } .topo:has(.menu-movel[open])::before { opacity: 0; } .topo__barra { padding: 0 5px 0 12px; height: 56px; border-color: rgba(244,239,230,.09); background: rgba(11,10,9,.82); } .topo__marca { min-height: 44px; align-items: center; } .topo__marca img { width: 104px; } .menu-movel > summary { width: 92px; height: 44px; display: flex; justify-content: center; align-items: center; gap: 12px; background: rgba(244,239,230,.05); border-radius: 30px; } .menu-movel > summary::after { content: "Menu"; font-size: .8rem; font-weight: 650; } .menu-movel[open] > summary::after { content: "Fechar"; } .menu-movel > summary span, .menu-movel > summary span::before, .menu-movel > summary span::after { width: 16px; } .menu-movel__painel { padding: 90px var(--gut) max(30px, env(safe-area-inset-bottom)); gap: 24px; } .menu-movel__principal { counter-reset: navegacao; } .menu-movel__principal li { counter-increment: navegacao; border-bottom: 1px solid var(--linha); } .menu-movel__principal a { align-items: center; justify-content: flex-start; gap: 15px; padding-block: 14px; font-size: clamp(1.55rem, 6.6vw, 2.4rem); line-height: 1.12; } .menu-movel__principal a::before { content: counter(navegacao, decimal-leading-zero); color: var(--cinza); font: .65rem var(--f-mono); letter-spacing: 0; } .menu-movel__grupo a { min-height: 44px; display: inline-flex; align-items: center; } .fixo-cel { bottom: max(12px, env(safe-area-inset-bottom)); padding: 7px 7px 7px 17px; border-radius: 22px; } .fixo-cel .btn { font-size: .92rem; min-height: 48px; } .fixo-cel p { font-size: .8rem; } /* Aviso de privacidade compacto: faixa presa embaixo, texto curto e os três botões com o mesmo peso. Fica abaixo do título, do preço e do botão principal do topo; a barra "Conversar" espera a escolha. */ body:has(.aviso-priv:not([hidden])) .fixo-cel { visibility: hidden; pointer-events: none; transform: translateY(140%); } body:has(.aviso-priv:not([hidden])) { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } .aviso-priv { left: 0; right: 0; bottom: 0; width: auto; max-height: calc(100dvh - var(--topo-h) - 16px); gap: 8px; padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border-width: 1px 0 0; border-radius: 16px 16px 0 0; box-shadow: 0 -16px 40px -18px rgba(0, 0, 0, .85); } .aviso-priv__txt { font-size: .8rem; line-height: 1.35; } .aviso-priv__extra { display: none; } .aviso-priv__curto { display: inline; } .aviso-priv__acoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .aviso-priv__acoes .btn { min-height: 44px; font-size: .82rem; font-stretch: 100%; line-height: 1.2; padding: 6px 4px; white-space: normal; } .faq summary { padding-block: 22px; gap: 18px; font-size: 1.0625rem; line-height: 1.35; } .faq .faq__r { font-size: 1rem; } .cta-final { margin-inline: -8px; padding: 38px 25px; border-radius: 24px; gap: 22px; background: radial-gradient(120% 100% at 110% 0%, rgba(255,90,31,.32), transparent 65%), var(--carvao-2); } .cta-final .t-1 { font-size: clamp(2.25rem,9.8vw,3.8rem); line-height: 1; overflow-wrap: normal; } .cta-final .acoes .btn { min-height: 56px; } .rodape { padding-top: 60px; } .rodape__topo { gap: 42px; } .rodape__frase { font-size: clamp(2.2rem,10vw,3.8rem); max-width: 14ch; } .rodape__cols { gap: 30px 16px; } .rodape__cols .rodape__tit { margin-bottom: 9px; color: var(--brasa); } .rodape__cols ul { gap: 0; } .rodape__cols a { display: flex; align-items: center; min-height: 44px; line-height: 1.35; font-size: .94rem; } /* Rodapé compacto: colunas viram sanfona por família, links da Feitaz em duas colunas, logotipo menor (M5). */ .rodape__cols--servicos > .rodape__col { display: none; } .rodape__sanfona { display: block; grid-column: 1 / -1; border-top: 1px solid var(--linha); } .rodape__grupo { border-bottom: 1px solid var(--linha); } .rodape__grupo > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding-block: 6px; cursor: pointer; font-size: 1rem; font-weight: 640; line-height: 1.3; } .rodape__grupo > summary::-webkit-details-marker { display: none; } .rodape__grupo > summary::after { content: "+"; flex: none; color: var(--brasa); font-size: 1.35rem; line-height: 1; transition: transform .3s var(--ease); } .rodape__grupo[open] > summary::after { transform: rotate(45deg); } .rodape__grupo ul { padding: 0 0 12px 2px; } .rodape__feitaz { grid-column: 1 / -1; } .rodape__feitaz ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } .rodape__feitaz a { overflow-wrap: anywhere; } .rodape__marca { margin-top: 36px; } .rodape__marca .marca-gigante { width: 58%; } .rodape__base { margin-top: 26px; padding-bottom: max(32px, env(safe-area-inset-bottom)); gap: 10px; } .rodape__priv { min-height: 44px; } } @media (max-width: 359px) { :root { --gut: 20px; } .fixo-cel { gap: 5px; padding-left: 12px; } .fixo-cel .btn { padding-inline: 13px; } .aviso-priv__acoes { gap: 6px; } .aviso-priv__acoes .btn { padding-inline: 3px; font-size: .76rem; } } @media (max-width: 760px) and (prefers-reduced-motion: no-preference) { .js .revela { transform: translateY(18px); transition-duration: .65s; transition-delay: 0s; } .js .revela.visto { transform: none; } } /* ---------- Conferência final (11/10): alvos de toque ≥ 44 px sem mexer no layout ---------- A área clicável cresce por um pseudo-elemento transparente; o desenho e o espaçamento ficam iguais. */ .topo__marca::after { content: ""; position: absolute; inset: -9px -6px; } .rodape__base a, .rodape__priv { position: relative; } .rodape__base a::after, .rodape__priv::after { content: ""; position: absolute; inset: -12px -4px; } /* O aviso de privacidade fica fixo no canto: enquanto ele está aberto, o foco por teclado não para escondido atrás dele. */ html:has(.aviso-priv:not([hidden])) { scroll-padding-bottom: var(--aviso-priv-alt, 220px); } html:has(.aviso-priv:not([hidden])) body { padding-bottom: var(--aviso-priv-alt, 172px); } video:focus-visible, audio:focus-visible { outline: 3px solid var(--brasa); outline-offset: 3px; border-radius: 10px; } .heroi__visual[data-hero-failure] + .heroi__painel [data-idx] { display: none; } @media (max-width: 760px) { #conteudo .heroi .olho:has(+ h1) { white-space: nowrap; letter-spacing: .08em; } } /* /assets/css/paginas/caso.css */ /* Feitaz — casos. Acento do cliente aplicado por classe no body, sem esconder a marca Feitaz. */ .caso-pagina { --cliente:#ca582b; --cliente-halo:rgba(202,88,43,.26); } .caso-pagina--maria { --cliente:#769c82; --cliente-halo:rgba(85,149,114,.28); } .caso-pagina--paraiso { --cliente:#af925b; --cliente-halo:rgba(175,146,91,.25); } .caso-pagina--vicmar { --cliente:#f56832; --cliente-halo:rgba(245,104,50,.28); } .caso-pagina--vet { --cliente:#62a69a; --cliente-halo:rgba(98,166,154,.25); } .caso-pagina--cocada { --cliente:#d87949; --cliente-halo:rgba(216,121,73,.27); } .caso-pagina--testarudo { --cliente:#e4c435; --cliente-halo:rgba(228,196,53,.24); } .caso-pagina--turismo { --cliente:#92b4a0; --cliente-halo:rgba(146,180,160,.25); } .ca-hero { padding:125px 0 0; overflow:hidden; background:radial-gradient(ellipse 68% 80% at 72% 36%,var(--cliente-halo),transparent 69%),var(--carvao); } .ca-hero__top { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,.48fr); align-items:end; gap:clamp(25px,4vw,65px); padding-bottom:clamp(36px,5vw,70px); } .ca-hero h1 { font-size:clamp(3.3rem,7vw,8rem); margin:22px 0 20px; max-width:13ch; overflow-wrap:normal; } .ca-hero__claim { display:block; font:italic 400 .56em/.95 var(--f-serifa); letter-spacing:0; color:var(--cliente); margin-top:.1em; } .ca-hero__lado .lead { margin-bottom:24px; } .ca-hero__status { display:flex; gap:12px; align-items:center; font:.72rem var(--f-mono); color:var(--cinza); letter-spacing:.08em; text-transform:uppercase; margin-bottom:20px; } .ca-palco { position:relative; width:min(100% - 2*var(--gut),1560px); margin-inline:auto; padding:0 6% 60px 0; } .ca-palco::after { content:''; position:absolute; z-index:0; width:58%; aspect-ratio:1; right:3%; top:-24%; background:radial-gradient(circle,var(--cliente-halo),transparent 63%); filter:blur(35px); pointer-events:none; } .ca-palco__desktop { position:relative; z-index:1; width:88%; border:11px solid #252321; border-bottom-width:15px; border-radius:22px 22px 12px 12px; box-shadow:0 60px 110px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.17); background:#181616; } .ca-palco__desktop .nav-frame { box-shadow:none; border:0; border-radius:10px 10px 0 0; } .ca-palco__desktop::after { content:''; position:absolute; bottom:-27px; left:-4%; width:108%; height:11px; border-radius:0 0 70% 70%; background:linear-gradient(#898783,#33312f); box-shadow:0 7px 10px #0008; } .ca-palco__cel { position:absolute; z-index:2; width:19%; min-width:140px; max-width:260px; right:0; bottom:0; transform:rotate(7deg); } /* o canto inferior direito é do botão fixo da IA: o celular do mockup fica um pouco para dentro (visual-a VA-07) */ @media (min-width:761px) { .ca-palco__cel { right:clamp(150px,12vw,230px); } } .ca-palco video { object-fit:cover; } .ca-palco .nav-frame__tela picture,.ca-palco .cel-frame__tela picture { position:absolute; inset:0; width:100%; height:100%; } .ca-palco picture img { width:100%; height:100%; object-fit:cover; object-position:top center; } .ca-palco__pe { position:absolute; z-index:3; bottom:10px; left:5%; display:flex; align-items:center; gap:10px; flex-wrap:wrap; max-width:92%; } .ca-palco__hint { padding:7px 12px; background:#141210d9; border:1px solid var(--linha-2); border-radius:5px; color:var(--osso); font:.67rem var(--f-mono); } /* E9-08: o palco rola sozinho em laço; o visitante precisa poder pausar (WCAG 2.2.2). */ .ca-palco__pausa { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:9px 13px; background:#141210d9; border:1px solid var(--linha-2); border-radius:5px; color:var(--osso); font:.67rem var(--f-mono); letter-spacing:.04em; cursor:pointer; } .ca-palco__pausa:hover { border-color:var(--cliente); color:#fff; } .ca-palco__pausa:focus-visible { outline:2px solid var(--brasa); outline-offset:3px; } .ca-palco__pausa svg { flex:none; } .ca-palco__pausa-toca { display:none; } .ca-palco__pausa[aria-pressed="true"] .ca-palco__pausa-par { display:none; } .ca-palco__pausa[aria-pressed="true"] .ca-palco__pausa-toca { display:block; } .ca-ficha { display:grid; grid-template-columns:1fr 1fr 1.4fr 1fr; gap:25px; align-items:start; padding:32px 0; border-top:1px solid var(--linha-2); border-bottom:1px solid var(--linha-2); margin-top:75px; } .ca-ficha div { display:grid; gap:6px; } .ca-ficha dt { font:.75rem var(--f-mono); color:var(--cinza); text-transform:uppercase; letter-spacing:.1em; } .ca-ficha dd { font-size:.97rem; line-height:1.4; font-weight:640; } .ca-ficha a { color:var(--cliente); text-decoration:none; border-bottom:1px solid currentColor; } .ca-ficha a:hover { color:var(--osso); } .ca-narrativa { background:var(--osso); color:var(--tinta); color-scheme:light; } .ca-narrativa__intro { display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(30px,8vw,130px); align-items:start; } .ca-narrativa .olho { color:var(--brasa-escura); } .ca-narrativa .olho::before { background:var(--brasa-escura); } .ca-marca .olho,.ca-proximo .olho { color:var(--brasa-escura); } .ca-marca .olho::before,.ca-proximo .olho::before { background:var(--brasa-escura); } .ca-narrativa h2 { margin:17px 0 0; } .ca-narrativa__duo { display:grid; grid-template-columns:1fr 1fr; gap:30px; border-top:1px solid #ccc5bb; padding:28px 0; } .ca-narrativa__duo:first-child { border-top:0; padding-top:0; } .ca-narrativa__duo h3 { font-size:1.15rem; font-weight:800; letter-spacing:-.02em; } .ca-narrativa__duo p { line-height:1.55; color:var(--cinza-2); } .ca-numeros { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #cfc9bf; margin-top:65px; } .ca-numeros--4 { grid-template-columns:repeat(4,minmax(0,1fr)); } .ca-numeros div { display:flex; flex-direction:column-reverse; align-items:flex-start; justify-content:flex-end; padding:24px 20px 0 0; } .ca-numeros dd { font:850 clamp(2.5rem,5vw,5.8rem)/.98 var(--f-display); font-stretch:120%; letter-spacing:-.05em; color:var(--brasa-escura); } .ca-numeros dt { max-width:23ch; margin-top:10px; font-size:.85rem; color:var(--cinza-2); line-height:1.4; } .ca-galeria { padding:var(--sec) 0; background:var(--carvao-2); } .ca-galeria .cabeca { margin-bottom:48px; } .ca-galeria h2 { margin-top:18px; } .ca-galeria__grade { display:grid; grid-template-columns:1.4fr .6fr; align-items:start; gap:clamp(20px,3vw,45px); } .ca-galeria figure { min-width:0; } .ca-galeria__grade figure:first-child { grid-row:auto; } .ca-galeria img { width:100%; border-radius:12px; border:1px solid var(--linha-2); } .ca-galeria figcaption,.ca-marca figcaption { color:var(--cinza); font:.72rem/1.5 var(--f-mono); margin-top:12px; } .ca-galeria__grade figure:nth-child(2) { width:85%; justify-self:center; } .ca-galeria__grade figure:nth-child(2) img { box-shadow:0 28px 60px #0008; } .ca-galeria__rolagem { max-height:520px; overflow-y:auto; overscroll-behavior:contain; border:8px solid #2d2a27; border-radius:22px; scrollbar-color:var(--cliente) #24211e; } .ca-galeria__rolagem img { max-height:none; border:0; border-radius:0; } .ca-galeria__rolagem:focus-visible { outline:2px solid var(--brasa); outline-offset:4px; } .ca-sistema { background:var(--carvao); padding:var(--sec) 0; border-top:1px solid var(--linha); } .ca-sistema__head { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:38px; } .ca-sistema h2 { margin-top:18px; max-width:13ch; } .ca-sistema .lead { color:var(--cinza); } .ca-sistema__visual { display:grid; grid-template-columns:1fr .6fr; gap:clamp(18px,3vw,40px); align-items:center; } .ca-sistema__telas { display:grid; gap:18px; } .ca-sistema__visual img { width:100%; border-radius:12px; border:1px solid var(--linha-2); } .ca-sistema__visual figure { position:relative; background:var(--carvao-3); border:1px solid var(--linha); padding:12px; border-radius:18px; } .ca-sistema__selo { position:absolute; z-index:2; top:20px; right:20px; padding:8px 10px; background:#141210; color:var(--osso); border:1px solid var(--linha-2); border-radius:6px; font:.6rem/1.3 var(--f-mono); letter-spacing:.05em; } .ca-sistema__visual figcaption { padding:8px 3px 2px; font:.7rem var(--f-mono); color:var(--cinza); } .ca-sistema__esquema { padding:clamp(20px,3vw,44px); border:1px solid var(--linha-2); background:radial-gradient(circle at 100% 0,var(--cliente-halo),transparent 58%),var(--carvao-3); border-radius:20px; } .ca-sistema__esquema .mono { color:var(--cliente); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; } .ca-sistema__esquema ol { padding:0; margin:24px 0 0; list-style:none; display:grid; gap:15px; } .ca-sistema__esquema li { display:flex; gap:12px; align-items:center; border-top:1px solid var(--linha-2); padding-top:15px; font-size:1rem; line-height:1.35; } .ca-sistema__esquema li::before { content:'↗'; color:var(--cliente); font-size:1.3rem; } .ca-sistema__nota { color:var(--cinza); font-size:.8rem; margin-top:20px; } .ca-marca { background:var(--osso-2); color:var(--tinta); padding:var(--sec) 0; } .ca-marca h2 { margin:18px 0 32px; } .ca-marca__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } .ca-marca__grid--solo { grid-template-columns:minmax(0,680px); } .ca-marca figure { min-width:0; padding:clamp(12px,2vw,24px); background:#fffdfa; border:1px solid #d8d1c5; border-radius:14px; display:grid; align-content:center; } .ca-marca img { width:100%; max-height:430px; object-fit:contain; } .ca-marca figcaption { color:var(--cinza-2); } /* Peças-assinatura: a prova singular de cada caso sem dado de cliente inventado. */ .ca-assinatura { padding:clamp(85px,10vw,145px) 0; background:var(--osso-2); color:var(--tinta); } .ca-assinatura .olho { color:var(--brasa-escura); } .ca-assinatura .olho::before { background:var(--brasa-escura); } .ca-assinatura h2 { max-width:20ch; margin:20px 0 45px; font-size:clamp(2.45rem,4.5vw,4.8rem); } .ca-assinatura__nota { margin-top:20px; color:var(--cinza-2); font:.73rem/1.5 var(--f-mono); max-width:72ch; } .ca-assinatura__fluxo { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:16px; align-items:center; } .ca-assinatura__fluxo > div { min-height:210px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:26px; border:1px solid rgba(11,10,9,.16); background:#fffdf8; border-radius:12px; } .ca-assinatura__fluxo b,.ca-assinatura__idiomas b { color:var(--brasa-escura); font:.67rem var(--f-mono); text-transform:uppercase; letter-spacing:.08em; } .ca-assinatura__fluxo strong,.ca-assinatura__idiomas strong { font-size:clamp(1.35rem,2vw,2.1rem); line-height:1.08; letter-spacing:-.03em; } .ca-assinatura__fluxo p { color:var(--cinza-2); font-size:.97rem; line-height:1.4; } .ca-assinatura__fluxo > span { color:var(--brasa-escura); font-size:2rem; } .ca-assinatura--forno-e-pronto { background:radial-gradient(circle at 80% 5%,#f5dcbd,transparent 45%),var(--osso-2); } .ca-assinatura--residencial-maria-rita { background:#173d34; color:var(--osso); } .ca-assinatura--residencial-maria-rita .olho,.ca-assinatura--residencial-maria-rita .ca-assinatura__nota { color:#d2d9c7; } .ca-assinatura--residencial-maria-rita .olho::before { background:#d2d9c7; } .ca-assinatura__calendario { max-width:1050px; padding:clamp(18px,3vw,35px); border:1px solid #b2c6b377; background:#faf8ef; color:#153e32; border-radius:16px; box-shadow:0 35px 85px #0b281eaa; } .ca-assinatura__calendario > .mono { color:#506c5b; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; } .ca-assinatura__calendario > div { display:grid; grid-template-columns:140px 1fr 140px; align-items:center; gap:18px; padding:11px 0; border-bottom:1px solid #cfd8ca; } .ca-assinatura__calendario b { font-size:.9rem; } .ca-assinatura__calendario em { font:500 .72rem var(--f-mono); color:#426753; font-style:normal; } .ca-assinatura__calendario .ca-assinatura__calendario-topo { font:.65rem var(--f-mono); text-transform:uppercase; color:#5b715e; } .ca-assinatura__barra { display:block; height:20px; border-radius:4px; background:linear-gradient(90deg,transparent 10%,#64889b 10%,#64889b 47%,transparent 47%); } .ca-assinatura__barra--manual { background:linear-gradient(90deg,transparent 42%,#139059 42%,#139059 76%,transparent 76%); } .ca-assinatura__bloqueio { margin-top:22px; color:#852a17; font-weight:800; } .ca-assinatura--casa-paraiso { background:#213b30; color:var(--osso); } .ca-assinatura--casa-paraiso .olho,.ca-assinatura--casa-paraiso .ca-assinatura__nota { color:#dbd7c6; } .ca-assinatura--casa-paraiso .olho::before { background:#dbd7c6; } .ca-assinatura__idiomas { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .ca-assinatura__idiomas > div { min-height:230px; padding:26px; display:flex; flex-direction:column; gap:18px; border:1px solid #c4d3ae66; background:#f5f2e7; color:#1d352b; } .ca-assinatura__idiomas span { margin-top:auto; color:#526c55; font:.72rem var(--f-mono); } .ca-assinatura__faixa { margin-top:18px; padding:22px; border-top:1px solid #c4d3ae66; color:#f4f0df; font:.74rem/1.6 var(--f-mono); } .ca-assinatura__faixa span { margin:0 13px; color:#bfa675; } .ca-assinatura--vicmar { background:#122934; color:var(--osso); } .ca-assinatura--vicmar .olho,.ca-assinatura--vicmar .ca-assinatura__nota { color:#d0b5a7; } .ca-assinatura--vicmar .olho::before { background:#d0b5a7; } .ca-assinatura--vicmar .ca-assinatura__fluxo > div { background:#1b3845; color:var(--osso); border-color:#667e7e; } .ca-assinatura--vicmar .ca-assinatura__fluxo p { color:#d0dadd; } .ca-assinatura--vicmar .ca-assinatura__fluxo b,.ca-assinatura--vicmar .ca-assinatura__fluxo > span { color:#ff936b; } .ca-assinatura__codigo { display:block; margin-top:22px; padding:16px 22px; color:#ffe7cc; background:#0d2029; border:1px solid #637d7d; font:.78rem var(--f-mono); overflow-wrap:anywhere; } .ca-assinatura--vet-do-pet { background:#dde8dc; } .ca-assinatura__marca { display:flex; align-items:center; gap:20px; flex-wrap:wrap; } .ca-assinatura__marca > div { display:grid; justify-items:center; align-content:center; gap:18px; min-width:170px; min-height:175px; padding:22px; background:#fffdf8; border:1px solid #a9c2ac; border-radius:12px; text-align:center; } .ca-assinatura__marca > div:last-child { min-width:280px; text-align:left; justify-items:start; } .ca-assinatura__marca img { object-fit:contain; } .ca-assinatura__marca strong { font-size:1.8rem; line-height:1.05; } .ca-assinatura__marca span { color:#486256; font-size:.9rem; } .ca-assinatura--cocada-da-maria { background:#f2d6b0; } .ca-assinatura--cocada-da-maria .olho { color:#8F2C08; } .ca-assinatura--cocada-da-maria .olho::before { background:#8F2C08; } .ca-assinatura__sabores { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .ca-assinatura__sabores > div { min-height:260px; display:flex; flex-direction:column; justify-content:space-between; gap:20px; padding:28px; background:#603521; color:#fff7e7; border-radius:50% 50% 14px 14px / 20% 20% 14px 14px; } .ca-assinatura__sabores > div:nth-child(2) { background:#874724; }.ca-assinatura__sabores > div:nth-child(3) { background:#8A5A2C; color:#FFFFFF; } .ca-assinatura__sabores b { font:.75rem var(--f-mono); }.ca-assinatura__sabores strong { font:italic 400 clamp(2rem,3vw,3.7rem)/.9 var(--f-serifa); } .ca-assinatura__sabores span { font:.78rem var(--f-mono); } .ca-assinatura--testarudo { background:#e6dfbd; } .ca-assinatura__papel { max-width:1050px; display:grid; gap:24px; padding:clamp(25px,5vw,65px); color:#163b45; background:#faf6e7; border:2px solid #163b45; box-shadow:12px 12px 0 #b6a447; transform:rotate(-1deg); } .ca-assinatura__papel .mono { color:#994576; font-size:.7rem; letter-spacing:.12em; } .ca-assinatura__papel strong { max-width:17ch; font-size:clamp(2rem,4vw,4.4rem); line-height:.98; letter-spacing:-.04em; } .ca-assinatura__papel > div { display:flex; flex-wrap:wrap; gap:9px; } .ca-assinatura__papel span { border:1px solid #163b45; padding:9px 12px; font:.78rem var(--f-mono); } .ca-servicos { padding:var(--sec) 0; } .ca-servicos h2 { max-width:13ch; margin:18px 0 48px; } .ca-servicos__lista { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:start; } .ca-servicos__lista:has(> a:nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,1fr)); } .ca-servicos__lista a { display:grid; align-content:start; gap:15px; min-width:0; padding:clamp(20px,2.3vw,32px); background:var(--carvao-3); border:1px solid var(--linha); border-radius:14px; text-decoration:none; transition:transform .35s,border .35s,background-color .35s; } .ca-servicos__lista a:hover { border-color:var(--brasa); background:var(--carvao-4); transform:translateY(-5px); } .ca-servicos__top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:5px; } .ca-servicos__top svg { width:48px; height:48px; flex:none; padding:11px; border-radius:14px; color:var(--cliente); background:rgba(244,239,230,.06); border:1px solid var(--linha-2); } .ca-servicos__top span { color:var(--cinza); font:.75rem var(--f-mono); letter-spacing:.04em; text-transform:uppercase; text-align:right; } .ca-servicos__lista strong { font-size:clamp(1.25rem,1.6vw,1.55rem); line-height:1.12; letter-spacing:-.025em; } .ca-servicos__lista p { max-width:32ch; color:var(--cinza); font-size:.96rem; line-height:1.45; text-wrap:pretty; } .ca-proximo { background:var(--osso); color:var(--tinta); padding:65px 0; } .ca-proximo a { display:flex; justify-content:space-between; align-items:center; gap:20px; text-decoration:none; font-size:clamp(2rem,5vw,5.3rem); font-weight:820; font-stretch:115%; letter-spacing:-.045em; line-height:1; } .ca-proximo a span:last-child { color:var(--brasa-escura); } .ca-proximo a:hover span:last-child { transform:translateX(10px); } .ca-fecho { padding:var(--sec) 0; text-align:center; background:radial-gradient(circle at 50% 100%,var(--cliente-halo),transparent 55%),var(--carvao); } .ca-fecho h2 { max-width:15ch; margin:15px auto 25px; } .ca-fecho .lead { margin:auto; } .ca-fecho .acoes { justify-content:center; margin-top:27px; } @media(max-width:760px) { .ca-hero { padding-top:115px; } .ca-hero__top,.ca-narrativa__intro,.ca-sistema__head,.ca-sistema__visual { grid-template-columns:1fr; } .ca-hero h1 { font-size:clamp(3.05rem,12vw,5.5rem); } .ca-palco { padding-right:0; padding-bottom:45px; } .ca-palco__desktop { width:95%; border-width:6px; } .ca-palco__cel { min-width:100px; width:27%; right:-1%; bottom:-5px; } .ca-palco__pe { bottom:-11px; left:1%; gap:8px; } .ca-ficha { grid-template-columns:repeat(2,1fr); gap:22px; margin-top:55px; } .ca-narrativa__duo { grid-template-columns:1fr; gap:8px; } .ca-numeros { grid-template-columns:repeat(3,minmax(0,1fr)); } .ca-numeros dd { font-size:clamp(2rem,7vw,3.5rem); } .ca-galeria__grade { grid-template-columns:1fr 1fr; } .ca-galeria__grade figure:first-child { grid-column:span 2; grid-row:auto; } .ca-galeria__grade figure:nth-child(2) { width:100%; } .ca-servicos__lista { grid-template-columns:1fr; } .ca-servicos__lista a { padding:22px; gap:11px; } } @media(max-width:410px) { .ca-ficha { grid-template-columns:1fr 1fr; } .ca-ficha dd { overflow-wrap:anywhere; font-size:.87rem; } .ca-numeros { grid-template-columns:1fr; } .ca-numeros div { border-top:1px solid #ccc; padding:18px 0; } .ca-galeria__grade { grid-template-columns:1fr; } .ca-galeria__grade figure:first-child { grid-column:auto; } .ca-galeria__grade figure:nth-child(2) { width:65%; } } @media(max-width:760px) { .ca-assinatura__fluxo,.ca-assinatura__idiomas,.ca-assinatura__sabores { grid-template-columns:1fr; } .ca-assinatura__fluxo > span { transform:rotate(90deg); justify-self:center; line-height:1; } .ca-assinatura__fluxo > div,.ca-assinatura__idiomas > div,.ca-assinatura__sabores > div { min-height:0; } .ca-assinatura__sabores > div { border-radius:28px; } .ca-assinatura__calendario > div { grid-template-columns:85px 1fr; gap:10px; } .ca-assinatura__calendario > div em,.ca-assinatura__calendario-topo span:last-child { display:none; } .ca-assinatura__papel { transform:none; box-shadow:6px 6px 0 #b6a447; } .ca-servicos__lista:has(> a:nth-child(2):last-child) { grid-template-columns:1fr; } .ca-galeria__rolagem { max-height:450px; } } @media(prefers-reduced-motion:reduce) { .ca-palco video { display:none; } } /* Mobile — título, imagem e conversa numa leitura própria para o celular. */ @media(max-width:760px) { .ca-hero { display:flex; flex-direction:column; padding:120px 0 0; background:radial-gradient(ellipse 95% 48% at 100% 28%,var(--cliente-halo),transparent 80%),var(--carvao); } .ca-hero__top { display:contents; } .ca-hero__top > div:first-child { width:calc(100% - 2*var(--gut)); margin-inline:auto; order:0; } .ca-hero .olho { font-size:.61rem; line-height:1.65; letter-spacing:.105em; max-width:45ch; } .ca-hero h1 { margin:23px 0 30px; font-size:clamp(3.6rem,15.3vw,7.2rem); line-height:.88; text-wrap:balance; } .ca-hero__claim { font-size:.52em; line-height:1.03; margin-top:.35em; letter-spacing:-.025em; } .caso-pagina--maria .ca-hero h1 { font-size:clamp(3.2rem,13.6vw,6.2rem); } .caso-pagina--vicmar .ca-hero h1,.caso-pagina--testarudo .ca-hero h1 { font-size:clamp(4rem,18vw,8.5rem); } .ca-palco { order:1; width:100%; padding:12px var(--gut) 50px; min-height:clamp(295px,84vw,530px); margin-top:7px; margin-bottom:0; } .ca-palco::before { content:''; position:absolute; left:0; right:0; top:0; height:85%; background:linear-gradient(120deg,var(--cliente-halo),transparent 80%); border-block:1px solid rgba(244,239,230,.05); } .ca-palco::after { filter:none; top:-20%; right:0; } .ca-palco__desktop { width:91%; margin-top:18px; border-width:5px; border-radius:12px; transform:rotate(-3deg); box-shadow:0 25px 38px -10px #000a,0 0 0 1px #ffffff25; } .ca-palco__desktop::after { height:5px; bottom:-11px; } .ca-palco__desktop .nav-frame { border-radius:5px 5px 0 0; } .ca-palco .nav-frame__barra { padding:0 8px; height:24px; gap:4px; } .ca-palco .nav-frame__barra i { width:5px; height:5px; } .ca-palco .nav-frame__url { font-size:6px; margin-left:5px; } .ca-palco__cel { width:34%; min-width:0; max-width:210px; right:calc(var(--gut) + 6px); bottom:36px; transform:rotate(5deg); } .ca-palco__pe { bottom:5px; left:var(--gut); right:var(--gut); gap:8px; } .ca-palco__hint { background:#141210e6; padding:4px 8px; border:1px solid var(--linha-2); border-radius:5px; color:var(--osso); font-size:.6rem; letter-spacing:.04em; } .ca-hero__lado { order:2; width:calc(100% - 2*var(--gut)); margin:28px auto 0; } .ca-hero__status { margin-bottom:15px; font-size:.59rem; gap:9px; line-height:1.5; } .ca-hero__lado .lead { font-size:1.0625rem; margin-bottom:22px; line-height:1.5; color:var(--osso-2); } .ca-hero__lado .acoes { display:grid; grid-template-columns:1fr; gap:6px; } .ca-hero__lado .btn { width:100%; justify-content:space-between; } .ca-hero__lado .link-seta { justify-self:start; min-height:44px; display:inline-flex; align-items:center; font-size:.9rem; } .ca-hero > .wrap:last-child { order:3; } .ca-ficha { margin-top:24px; padding:22px 0; gap:20px 16px; border-bottom:0; } .ca-ficha dt { font-size:.75rem; } .ca-ficha dd { font-size:.84rem; line-height:1.5; overflow-wrap:anywhere; } .ca-ficha a { display:inline-flex; min-height:44px; align-items:center; border:0; } .ca-narrativa__intro { gap:30px; } .ca-narrativa h2,.ca-galeria h2,.ca-sistema h2,.ca-marca h2,.ca-servicos h2 { font-size:clamp(2.5rem,10.8vw,4.9rem); line-height:.98; } .ca-narrativa__duo { gap:10px; padding:22px 0; } .ca-narrativa__duo h3 { font-size:1.1rem; } .ca-narrativa__duo p { font-size:1rem; line-height:1.6; } .ca-numeros { margin-top:33px; grid-template-columns:1fr; border-top:0; } .ca-numeros div { display:grid; grid-template-columns:100px minmax(0,1fr); align-items:center; gap:15px; border-top:1px solid #ccc5bb; padding:20px 0; } .ca-numeros dd { grid-column:1; grid-row:1; font-size:clamp(2.5rem,11vw,4.8rem); } .ca-numeros dt { grid-column:2; grid-row:1; margin:0; font-size:.86rem; max-width:27ch; } /* Bloco de quatro números: o valor "95–97" não pode quebrar na barra. */ .ca-numeros.ca-numeros--4 div { grid-template-columns:minmax(0,36vw) minmax(0,1fr); } .ca-numeros.ca-numeros--4 dd { font-size:clamp(2rem,9.5vw,3.4rem); white-space:nowrap; } .ca-galeria__grade { grid-template-columns:1fr; gap:30px; } .ca-galeria__grade figure:first-child { grid-column:auto; } .ca-galeria__grade figure:nth-child(2) { width:78%; max-width:350px; justify-self:center; } .ca-galeria .cabeca { margin-bottom:30px; } .ca-galeria img { border-radius:5px; } .ca-galeria__rolagem { max-height:480px; border-width:6px; border-radius:22px; } .ca-galeria figcaption { font-size:.67rem; line-height:1.6; } .ca-sistema__head { gap:24px; margin-bottom:28px; } .ca-sistema__visual { gap:24px; } .ca-sistema__visual figure { padding:7px; border-radius:10px; } .ca-sistema__visual img { border-radius:5px; } .ca-sistema__selo { top:15px; right:13px; font-size:.51rem; } .ca-sistema__esquema { padding:27px 23px; border-radius:3px 24px 3px 3px; } .ca-marca__grid { grid-template-columns:1fr; gap:16px; } .ca-marca figure { padding:22px; border-radius:3px; } .ca-assinatura { padding:64px 0; } .ca-assinatura h2 { font-size:clamp(2.5rem,10.8vw,4.8rem); line-height:.98; margin:22px 0 32px; } .ca-assinatura__fluxo { gap:9px; } .ca-assinatura__fluxo > div { padding:24px; gap:13px; border-radius:3px 19px 3px 3px; } .ca-assinatura__fluxo strong,.ca-assinatura__idiomas strong { font-size:1.65rem; } .ca-assinatura__fluxo > span { font-size:1.4rem; } .ca-assinatura__calendario { border-radius:3px 22px 3px 3px; padding:20px 16px; } .ca-assinatura__calendario > div { grid-template-columns:74px 1fr; gap:8px; padding:15px 0; } .ca-assinatura__calendario b { font-size:.79rem; } .ca-assinatura__calendario > .mono { font-size:.57rem; line-height:1.5; } .ca-assinatura__idiomas { gap:1px; background:#c4d3ae66; } .ca-assinatura__idiomas > div { display:grid; grid-template-columns:42px 1fr; padding:24px 20px; border:0; gap:13px; } .ca-assinatura__idiomas b { align-self:start; font-size:.61rem; margin-top:5px; } .ca-assinatura__idiomas strong { font-size:1.6rem; } .ca-assinatura__idiomas span { grid-column:2; margin:0; } .ca-assinatura__faixa { padding:22px 0; line-height:1.9; } .ca-assinatura__marca { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .ca-assinatura__marca > div { min-width:0; min-height:165px; padding:16px; border-radius:3px; } .ca-assinatura__marca > div:last-child { min-width:0; grid-column:1/-1; min-height:140px; padding:23px; } .ca-assinatura__sabores { gap:12px; } .ca-assinatura__sabores > div { display:grid; grid-template-columns:1fr auto; align-items:center; padding:25px; border-radius:42px 4px 4px 4px; gap:16px; min-height:160px; } .ca-assinatura__sabores strong { grid-column:1/-1; grid-row:2; font-size:3.4rem; } .ca-assinatura__sabores span { grid-column:2; grid-row:1; font-size:.62rem; } .ca-assinatura__papel { padding:26px 22px; box-shadow:5px 5px 0 #b6a447; width:calc(100% - 5px); } .ca-assinatura__papel strong { font-size:2.3rem; } .ca-assinatura__papel span { font-size:.67rem; } .ca-servicos h2 { margin-bottom:30px; } .ca-servicos__lista { gap:0; border-top:1px solid var(--linha-2); } .ca-servicos__lista a { position:relative; display:block; border:0; border-bottom:1px solid var(--linha-2); padding:26px 0 25px 66px; background:none; border-radius:0; } .ca-servicos__top { margin:0 0 10px; } .ca-servicos__top svg { position:absolute; left:0; top:25px; width:46px; height:46px; border-radius:50%; } .ca-servicos__top span { font-size:.75rem; text-align:left; } .ca-servicos__lista strong { display:block; font-size:1.38rem; } .ca-servicos__lista p { margin-top:10px; font-size:.96rem; line-height:1.5; } .ca-proximo { padding:35px 0; } .ca-proximo a { font-size:clamp(2.1rem,9.6vw,4.2rem); padding-top:20px; min-height:60px; } .ca-fecho { text-align:left; } .ca-fecho h2 { margin-inline:0; max-width:14ch; font-size:clamp(2.7rem,12vw,5rem); line-height:.95; } .ca-fecho .lead { font-size:1.0625rem; margin-inline:0; } .ca-fecho .acoes .btn { width:100%; justify-content:space-between; font-size:.86rem; } } @media(max-width:359px) { .ca-hero h1 { font-size:3.25rem; } .caso-pagina--maria .ca-hero h1 { font-size:2.95rem; } .ca-numeros div { grid-template-columns:90px 1fr; } .ca-numeros dd { font-size:2.6rem; } } @media(max-width:760px) { .caso-pagina--testarudo .ca-hero h1 { font-size:clamp(3.25rem,15.4vw,6.8rem); } } /* A ação principal vem antes da prova visual; detalhes seguem depois do palco. */ @media(max-width:760px) { .ca-hero__lado { display:contents; } .ca-hero__lado .acoes { order:1; width:calc(100% - 2*var(--gut)); margin:0 auto 17px; } .ca-palco { order:2; min-height:clamp(275px,76vw,490px); } .ca-palco__cel { width:31.5%; } .ca-hero__status { order:3; width:calc(100% - 2*var(--gut)); margin:23px auto 15px; } .ca-hero__lado .lead { order:4; width:calc(100% - 2*var(--gut)); margin:0 auto 4px; } .ca-hero > .wrap:last-child { order:5; } } .ca-galeria__abrir { display:none; } @media(max-width:760px) { .ca-galeria__instrucoes { display:none; } .ca-galeria__abrir { display:inline-flex; align-items:center; min-height:44px; color:var(--osso); text-decoration:underline; text-underline-offset:5px; font:600 .83rem/1.4 var(--f-display); } } /* Rodada E9 (E9-05): a segunda peça da galeria do Forno & Pronto precisa de largura para cumprir a legenda — 326 px não mostram a página de revenda. */ @media(min-width:761px) { .caso-pagina--forno .ca-galeria__grade { grid-template-columns:1.15fr .85fr; } .caso-pagina--forno .ca-galeria__grade figure:nth-child(2) { width:100%; } } /* /assets/css/paginas/caso-capitulos.css */ /* Feitaz — capítulos de caso (14/10/2026). Peças narrativas que mostram a obra em ação: relógio do projeto, processo, parede de catálogo, dados, conversa, faixas de áudio, idiomas, diário de viagem, estante de dossiês. Usa os tokens de feitaz.css e o acento --cliente de cada caso. Sem JS tudo aparece em ordem de leitura; caso-capitulos.js só acrescenta controle e movimento. */ /* ---------- Acento de cada caso novo ---------- */ .caso-pagina--prumo { --cliente:#E9A27F; --cliente-halo:rgba(168,74,40,.30); --cx-escuro:#0F3B37; --cx-claro:#F3ECE1; --cx-tinta:#1A1714; --cx-forte:#913D20; } .caso-pagina--laos { --cliente:#D7A27C; --cliente-halo:rgba(140,87,55,.32); --cx-escuro:#1D1D1D; --cx-claro:#F4F1E9; --cx-tinta:#1D1D1D; --cx-forte:#8C5737; } .caso-pagina--freguia { --cliente:#DDF08A; --cliente-halo:rgba(196,71,50,.30); --cx-escuro:#102A25; --cx-claro:#FFF8EE; --cx-tinta:#243D37; --cx-forte:#C44732; } .caso-pagina--jarvis { --cliente:#FC693C; --cliente-halo:rgba(110,66,177,.34); --cx-escuro:#17151F; --cx-claro:#F6F3EC; --cx-tinta:#262720; --cx-forte:#A63D1F; } .caso-pagina--porto { --cliente:#EFB49C; --cliente-halo:rgba(37,103,84,.40); --cx-escuro:#173F35; --cx-claro:#F7F3E9; --cx-tinta:#173F35; --cx-forte:#B4532F; } .caso-pagina--viagem { --cliente:#E2B866; --cliente-halo:rgba(45,74,58,.48); --cx-escuro:#121915; --cx-claro:#F4EFE6; --cx-tinta:#1D1B18; --cx-forte:#8A611B; } /* ---------- Seção-base dos capítulos ---------- */ .cx { position:relative; padding:var(--sec) 0; overflow:hidden; overflow:clip; } .cx--escuro { background:var(--cx-escuro, var(--carvao-2)); color:var(--osso); } .cx--carvao { background:var(--carvao); color:var(--osso); border-top:1px solid var(--linha); } .cx--claro { background:var(--cx-claro, var(--osso)); color:var(--cx-tinta, var(--tinta)); color-scheme:light; } .cx--osso { background:var(--osso-2); color:var(--tinta); color-scheme:light; } .cx--claro .olho, .cx--osso .olho { color:var(--cx-forte, var(--brasa-escura)); } .cx--claro .olho::before, .cx--osso .olho::before { background:var(--cx-forte, var(--brasa-escura)); } .cx--escuro .olho, .cx--carvao .olho { color:var(--cliente); } .cx--escuro .olho::before, .cx--carvao .olho::before { background:var(--cliente); } .cx__cab { display:grid; gap:20px; margin-bottom:clamp(40px,5.5vw,80px); } .cx__cab--duo { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:end; gap:clamp(28px,6vw,96px); } .cx__cab h2 { margin-top:2px; max-width:16ch; } .cx__cab .lead { max-width:56ch; } .cx--claro .lead, .cx--osso .lead { color:color-mix(in srgb, currentColor 72%, transparent); } .cx--escuro .lead { color:color-mix(in srgb, var(--osso) 78%, transparent); } .cx__nota { margin-top:clamp(22px,3vw,36px); font:.72rem/1.6 var(--f-mono); letter-spacing:.02em; color:color-mix(in srgb, currentColor 78%, transparent); max-width:84ch; } .cx-oculto { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .cx__rotulo { display:inline-flex; align-items:center; gap:.6em; font:600 .66rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; padding:8px 11px; border-radius:999px; border:1px solid color-mix(in srgb, currentColor 25%, transparent); } .cx__rotulo::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--cliente); } .cx--claro .cx__rotulo::before, .cx--osso .cx__rotulo::before { background:var(--cx-forte); } /* ---------- 1. Relógio do projeto (marcos com tempo real) ---------- */ .cx-relogio__topo { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:clamp(24px,5vw,80px); margin-bottom:clamp(40px,6vw,86px); } .cx-relogio__total { display:grid; justify-items:end; text-align:right; gap:6px; } .cx-relogio__total strong { font:860 clamp(4.2rem,11vw,10.5rem)/.8 var(--f-display); font-stretch:122%; letter-spacing:-.06em; color:var(--cliente); } .cx--claro .cx-relogio__total strong, .cx--osso .cx-relogio__total strong { color:var(--cx-forte); } .cx-relogio__total span { font:.74rem/1.45 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; max-width:30ch; color:color-mix(in srgb, currentColor 66%, transparent); } .cx-relogio__fita { position:relative; height:4px; margin:0 0 30px; border-radius:4px; background:color-mix(in srgb, currentColor 16%, transparent); } .cx-relogio__fita::before { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--fogo); transform-origin:left center; } .cx-relogio__fita i { position:absolute; top:50%; left:calc(var(--t) * 100%); width:13px; height:13px; border-radius:50%; translate:-50% -50%; background:var(--carvao); border:2px solid var(--brasa); } .cx--claro .cx-relogio__fita i, .cx--osso .cx-relogio__fita i { background:var(--cx-claro, var(--osso)); border-color:var(--cx-forte); } .cx-relogio__fita i b { position:absolute; top:16px; left:50%; translate:-50% 0; font:600 .62rem var(--f-mono); color:color-mix(in srgb, currentColor 70%, transparent); } .cx-relogio__marcos { display:grid; grid-template-columns:repeat(var(--n,5), minmax(0,1fr)); gap:1px; margin-top:52px; list-style:none; padding:0; border:1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius:18px; overflow:hidden; background:color-mix(in srgb, currentColor 14%, transparent); } .cx-relogio__marcos li { display:flex; flex-direction:column; gap:12px; min-width:0; padding:clamp(20px,2.2vw,30px); background:var(--cx-escuro, var(--carvao-2)); } .cx--claro .cx-relogio__marcos li, .cx--osso .cx-relogio__marcos li { background:var(--cx-claro, var(--osso)); } .cx--carvao .cx-relogio__marcos li { background:var(--carvao-2); } .cx-relogio__marcos time { display:flex; justify-content:space-between; gap:10px; font:600 .7rem/1.3 var(--f-mono); letter-spacing:.06em; color:color-mix(in srgb, currentColor 66%, transparent); } .cx-relogio__marcos time b { color:var(--cliente); font-weight:700; } .cx--claro .cx-relogio__marcos time b, .cx--osso .cx-relogio__marcos time b { color:var(--cx-forte); } .cx-relogio__marcos strong { font-size:clamp(1.12rem,1.45vw,1.42rem); line-height:1.12; letter-spacing:-.02em; font-weight:760; font-stretch:108%; overflow-wrap:anywhere; hyphens:auto; } .cx-relogio__marcos p { font-size:.93rem; line-height:1.48; color:color-mix(in srgb, currentColor 74%, transparent); text-wrap:pretty; } .cx-relogio__marcos .cx-relogio__fim { background:radial-gradient(circle at 100% 0,var(--cliente-halo),transparent 70%),var(--cx-escuro, var(--carvao-2)); } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .cx-relogio__fita::before { animation:cx-encher linear both; animation-timeline:view(); animation-range:entry 30% cover 55%; } } } @keyframes cx-encher { from { transform:scaleX(0); } to { transform:scaleX(1); } } /* ---------- 2. Mostrador noturno (relógio de ponteiro, SVG) ---------- */ .cx-noite { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:center; gap:clamp(30px,6vw,100px); } .cx-noite__dial { position:relative; width:min(100%,560px); justify-self:center; aspect-ratio:1; } .cx-noite__dial svg { width:100%; height:100%; overflow:visible; } .cx-noite__centro { position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:6px; pointer-events:none; } .cx-noite__centro strong { font:860 clamp(3.4rem,8vw,6.4rem)/.82 var(--f-display); font-stretch:120%; letter-spacing:-.06em; color:var(--cliente); } .cx-noite__centro span { font:.72rem/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:color-mix(in srgb, var(--osso) 70%, transparent); } .cx-noite__arco { stroke-dasharray:var(--arco) 1000; stroke-dashoffset:0; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .cx-noite__arco { animation:cx-arco linear both; animation-timeline:view(); animation-range:entry 25% cover 50%; } } } @keyframes cx-arco { from { stroke-dasharray:0 1000; } to { stroke-dasharray:var(--arco) 1000; } } .cx-noite__lista { list-style:none; padding:0; display:grid; gap:0; border-top:1px solid var(--linha-2); } .cx-noite__lista li { display:grid; grid-template-columns:86px minmax(0,1fr); gap:18px; padding:20px 0; border-bottom:1px solid var(--linha-2); } .cx-noite__lista time { font:700 1rem/1.3 var(--f-mono); color:var(--cliente); font-variant-numeric:tabular-nums; } .cx-noite__lista strong { display:block; font-size:1.12rem; line-height:1.2; letter-spacing:-.015em; } .cx-noite__lista p { margin-top:5px; color:color-mix(in srgb, var(--osso) 72%, transparent); font-size:.94rem; line-height:1.48; } /* ---------- 3. Processo em etapas (foto → recorte → cenas) ---------- */ .cx-processo { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,22px); list-style:none; padding:0; counter-reset:passo; } .cx-processo li { position:relative; display:grid; gap:14px; align-content:start; counter-increment:passo; } .cx-processo figure { position:relative; aspect-ratio:3/4; border-radius:14px; overflow:hidden; background:#efe9de; border:1px solid rgba(29,29,29,.10); } .cx-processo li:nth-child(2) figure { background:repeating-conic-gradient(#ece6da 0 25%, #f7f3ea 0 50%) 0 0/22px 22px; } .cx-processo img { width:100%; height:100%; object-fit:cover; } .cx-processo li:nth-child(2) img { object-fit:contain; padding:10%; filter:drop-shadow(0 22px 26px rgba(0,0,0,.18)); } .cx-processo li > b { font:600 .66rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--cx-forte); } .cx-processo li > b::before { content:"0" counter(passo) " · "; } .cx-processo strong { font-size:1.15rem; line-height:1.15; letter-spacing:-.02em; } .cx-processo p { font-size:.92rem; line-height:1.45; color:color-mix(in srgb, currentColor 70%, transparent); } .cx-processo li:not(:last-child)::after { content:"→"; position:absolute; top:calc((100% - 120px) * .0 + 34%); right:calc(clamp(12px,1.6vw,22px) / -2); translate:50% 0; z-index:2; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--cx-claro); color:var(--cx-forte); font-size:1rem; box-shadow:0 6px 18px rgba(0,0,0,.14); } /* ---------- 4. Parede de catálogo (duas cenas por produto) ---------- */ .cx-parede { position:relative; } .cx-parede__controle { display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:rgba(29,29,29,.08); margin-bottom:26px; } .cx-parede__controle button { min-height:44px; padding:0 20px; border:0; border-radius:999px; background:transparent; color:inherit; font:650 .9rem var(--f-display); letter-spacing:-.01em; } .cx-parede__controle button[aria-pressed="true"] { background:var(--cx-tinta); color:var(--cx-claro); } .cx-parede__grade { list-style:none; padding:0; display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:6px; } .cx-parede__grade li { position:relative; aspect-ratio:3/4; border-radius:6px; overflow:hidden; background:#d99a5f; } .cx-parede__grade img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .7s var(--ease), transform 1.2s var(--ease); } .cx-parede__grade .cx-parede__f { opacity:0; } .cx-parede__grade li:hover .cx-parede__f, .cx-parede__grade li.ver-f .cx-parede__f, .cx-parede[data-cena="f"] .cx-parede__f { opacity:1; } .cx-parede[data-cena="f"] .cx-parede__grade li:hover .cx-parede__f, .cx-parede[data-cena="f"] .cx-parede__grade li.ver-f .cx-parede__f { opacity:0; } .cx-parede__grade li:focus-visible { outline:3px solid var(--cx-forte); outline-offset:2px; } .cx-parede__grade li[tabindex] { cursor:pointer; } /* o botão cobre o item inteiro: o clique continua em qualquer ponto da foto; o foco aparece no item */ .cx-parede__troca { position:absolute; inset:0; z-index:2; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; border-radius:inherit; } .cx-parede__troca:focus-visible { outline:3px solid var(--cx-forte); outline-offset:2px; } .cx-parede__grade li:hover img { transform:scale(1.04); } .cx-parede.cx-onda .cx-parede__f { transition-delay:calc(var(--i, 0) * 28ms); } .cx-parede__leg { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 30px; margin-top:20px; font:.72rem/1.5 var(--f-mono); color:color-mix(in srgb, currentColor 66%, transparent); } .cx-catalogo { margin-top:clamp(40px,6vw,80px); display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(24px,5vw,70px); align-items:center; } .cx-catalogo figure { border-radius:12px; overflow:hidden; box-shadow:0 30px 70px -30px rgba(60,30,10,.55); } .cx-catalogo img { width:100%; } .cx-catalogo strong { display:block; font:860 clamp(4rem,9vw,8.4rem)/.82 var(--f-display); font-stretch:122%; letter-spacing:-.06em; color:var(--cx-forte); } .cx-catalogo p { margin-top:14px; max-width:38ch; font-size:1.02rem; line-height:1.5; color:color-mix(in srgb, currentColor 74%, transparent); } /* ---------- 5. Atlas (destinos com coordenada) ---------- */ .cx-atlas { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,22px); } .cx-atlas li { display:grid; gap:12px; } .cx-atlas figure { position:relative; aspect-ratio:4/5; border-radius:12px; overflow:hidden; } .cx-atlas img { width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); } .cx-atlas li:hover img { transform:scale(1.05); } .cx-atlas figure span { position:absolute; left:12px; bottom:12px; padding:6px 9px; border-radius:6px; background:rgba(29,29,29,.62); color:#F4F1E9; font:.64rem var(--f-mono); letter-spacing:.06em; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .cx-atlas strong { font:italic 400 clamp(1.7rem,2.4vw,2.3rem)/1 var(--f-serifa); letter-spacing:-.01em; } .cx-atlas p { font-size:.9rem; line-height:1.45; color:color-mix(in srgb, currentColor 70%, transparent); } /* ---------- 6. Ficha de marca (logo, cores, tipos) ---------- */ .cx-marca { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:12px; } .cx-marca__palco { position:relative; display:grid; place-items:center; min-height:clamp(260px,32vw,440px); padding:clamp(28px,5vw,70px); border-radius:18px; background:var(--palco, var(--cx-escuro)); overflow:hidden; } .cx-marca__palco--topografia { background:#F4EFE6 url("/media/trabalhos/viagem-programada/textura-topografia-960.webp") center/cover; } .cx-emblema { width:min(56%,320px); height:auto; } .cx-marca__palco img { width:min(78%,520px); height:auto; } .cx-marca__palco--claro { background:var(--cx-claro); border:1px solid rgba(0,0,0,.08); } .cx-marca__lado { display:grid; gap:12px; grid-template-rows:auto 1fr; } .cx-marca__cores { list-style:none; padding:0; display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:6px; } .cx-marca__cores li { display:grid; align-content:end; gap:3px; min-height:130px; padding:12px; border-radius:12px; background:var(--c); color:var(--t, #fff); border:1px solid var(--b, rgba(0,0,0,.08)); } .cx-marca__cores span { font-size:.86rem; font-weight:700; line-height:1.1; } .cx-marca__cores code { font:.62rem var(--f-mono); opacity:1; } .cx-marca__tipos { display:grid; align-content:center; gap:10px; padding:clamp(20px,2.4vw,32px); border-radius:12px; background:#fffdf8; border:1px solid rgba(0,0,0,.08); color:var(--cx-tinta); } .cx-marca__tipos p { display:flex; justify-content:space-between; gap:16px; padding-bottom:10px; border-bottom:1px solid rgba(0,0,0,.08); font-size:1rem; } .cx-marca__tipos p:last-child { border:0; padding:0; } .cx-marca__tipos b { font-weight:760; } .cx-marca__tipos span { font:.7rem var(--f-mono); color:color-mix(in srgb, currentColor 78%, transparent); text-align:right; } /* ---------- 7. Dados (barras acessíveis em tabela) ---------- */ .cx-dados { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,3vw,40px); } .cx-dados__bloco { padding:clamp(22px,2.6vw,36px); border-radius:18px; background:color-mix(in srgb, currentColor 5%, transparent); border:1px solid color-mix(in srgb, currentColor 12%, transparent); } .cx-dados__bloco h3 { font:600 .7rem/1.3 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; color:color-mix(in srgb, currentColor 70%, transparent); } .cx-barras { width:100%; border-collapse:collapse; } .cx-barras caption { text-align:left; } .cx-barras th { width:36%; padding:9px 12px 9px 0; text-align:left; font-weight:560; font-size:.93rem; line-height:1.25; vertical-align:middle; } .cx-barras td { padding:9px 0; vertical-align:middle; } .cx-barras td:last-child { width:72px; text-align:right; font:700 .86rem var(--f-mono); font-variant-numeric:tabular-nums; } .cx-barras__b { display:block; height:12px; border-radius:3px; width:calc(var(--v) * 100%); min-width:3px; background:var(--cx-forte); transform-origin:left center; } .cx--escuro .cx-barras__b { background:var(--cliente); } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .cx-barras__b { animation:cx-crescer linear both; animation-timeline:view(); animation-range:entry 10% cover 35%; } } } @keyframes cx-crescer { from { transform:scaleX(0); } to { transform:scaleX(1); } } .cx-funil { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:clamp(20px,3vw,40px); border-radius:18px; overflow:hidden; background:color-mix(in srgb, currentColor 14%, transparent); } .cx-funil div { display:grid; gap:8px; align-content:start; padding:clamp(20px,2.4vw,32px); background:var(--cx-escuro, var(--carvao-2)); } .cx-funil dd { font:860 clamp(2.2rem,4vw,3.8rem)/.9 var(--f-display); font-stretch:118%; letter-spacing:-.05em; color:var(--cliente); } .cx-funil dt { font-size:.9rem; line-height:1.4; color:color-mix(in srgb, var(--osso) 74%, transparent); } .cx-funil div:last-child dd { color:var(--osso); } .cx-destaque { margin-top:clamp(26px,4vw,52px); display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:clamp(20px,4vw,60px); padding:clamp(24px,3.4vw,46px); border-radius:20px; background:var(--cliente); color:#13261f; } .cx-destaque strong { font:860 clamp(3.6rem,8vw,7rem)/.82 var(--f-display); font-stretch:122%; letter-spacing:-.06em; } .cx-destaque p { font-size:clamp(1.1rem,1.6vw,1.45rem); line-height:1.35; font-weight:560; letter-spacing:-.01em; max-width:42ch; } .cx-destaque p small { display:block; margin-top:10px; font:.7rem/1.5 var(--f-mono); letter-spacing:.04em; opacity:.78; } /* ---------- 8. Conversa (WhatsApp, exemplo interativo) ---------- */ .cx-conversa { position:relative; width:min(100%,430px); justify-self:center; border-radius:30px; padding:12px; background:linear-gradient(150deg,#2b2825,#121110 60%); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12), 0 50px 100px -40px rgba(0,0,0,.85); } .cx-conversa { --cv-fundo:#0b141a; --cv-tinta:#e9edef; --cv-topo:#1f2c34; --cv-topo-tinta:#e9edef; --cv-sub:#8696a0; --cv-eu:#005c4b; --cv-eu-tinta:#e9edef; --cv-ele:#1f2c34; --cv-ele-tinta:#e9edef; --cv-nota:#182229; --cv-nota-tinta:#8696a0; --cv-avatar:#f6f3ec; } .cx-conversa__tela { border-radius:22px; overflow:hidden; background-color:var(--cv-fundo); color:var(--cv-tinta); } .cx-conversa--wa .cx-conversa__tela { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='8' cy='8' r='1.2' fill='%23ffffff' fill-opacity='.05'/%3E%3Ccircle cx='38' cy='30' r='1' fill='%23ffffff' fill-opacity='.04'/%3E%3C/svg%3E"); } .cx-conversa__topo { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--cv-topo); color:var(--cv-topo-tinta); } .cx-conversa__topo img, .cx-conversa__avatar { width:38px; height:38px; flex:none; border-radius:50%; background:var(--cv-avatar); } .cx-conversa__avatar { display:grid; place-items:center; } .cx-conversa__topo img.cx-conversa__avatar--pad { padding:6px; } .cx-conversa__topo b { display:block; font-size:.98rem; line-height:1.1; } .cx-conversa__topo span { font:.68rem var(--f-mono); color:var(--cv-sub); } .cx-conversa--video { padding:10px; width:min(100%,400px); } .cx-conversa--video video { display:block; width:100%; height:auto; } .cx-conversa__botoes { display:inline-flex; gap:8px; margin-top:8px; } .cx-conversa__botao { padding:5px 12px; border-radius:999px; border:1px solid #D6DAD1; } .cx-conversa__botao--forte { background:#C44732; border-color:#C44732; color:#fff; font-weight:700; } .cx-conversa__fonte { text-align:left !important; } .cx-conversa__msgs { display:grid; gap:7px; padding:16px 12px 20px; list-style:none; margin:0; } .cx-conversa__msgs li { max-width:86%; padding:8px 11px 7px; border-radius:10px; font-size:.92rem; line-height:1.4; box-shadow:0 1px 1px rgba(0,0,0,.25); } .cx-conversa__msgs .eu { justify-self:end; background:var(--cv-eu); color:var(--cv-eu-tinta); border-top-right-radius:3px; } .cx-conversa__msgs .ele { justify-self:start; background:var(--cv-ele); color:var(--cv-ele-tinta); border-top-left-radius:3px; } .cx-conversa__msgs small { display:block; margin-top:3px; text-align:right; font:.6rem var(--f-mono); color:color-mix(in srgb, currentColor 80%, transparent); } .cx-conversa__msgs .cx-conversa__nota { justify-self:center; max-width:100%; padding:5px 10px; background:var(--cv-nota); color:var(--cv-nota-tinta); font:.64rem var(--f-mono); letter-spacing:.04em; box-shadow:none; } .cx-conversa__audio { display:flex; align-items:center; gap:10px; min-width:220px; } .cx-conversa__audio i { width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; background:#00a884; color:#0b141a; font-style:normal; font-size:.78rem; } .cx-conversa__audio span { flex:1; height:22px; background:repeating-linear-gradient(90deg, rgba(233,237,239,.55) 0 2px, transparent 2px 5px); -webkit-mask:linear-gradient(90deg,#000 0 30%, rgba(0,0,0,.45) 30%); mask:linear-gradient(90deg,#000 0 30%, rgba(0,0,0,.45) 30%); border-radius:2px; clip-path:polygon(0 40%,4% 20%,9% 55%,13% 10%,18% 45%,23% 25%,28% 60%,33% 15%,38% 50%,43% 30%,48% 65%,53% 20%,58% 45%,63% 35%,68% 60%,73% 25%,78% 55%,83% 40%,88% 65%,93% 30%,100% 50%,100% 100%,0 100%); } .cx-conversa__arquivo { display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px; background:rgba(0,0,0,.18); font-size:.86rem; } .cx-conversa__arquivo i { width:30px; height:36px; flex:none; border-radius:4px; background:#e5533d; display:grid; place-items:center; color:#fff; font:700 .55rem var(--f-mono); font-style:normal; } .cx-cena .ca-numeros dd { font-size:clamp(2.2rem,3.6vw,3.8rem); } .cx-cena .t-1 { font-size:clamp(2.5rem,4.5vw,4.7rem); } .cx--escuro .ca-numeros, .cx--carvao .ca-numeros { border-color:var(--linha-2); } .cx--escuro .ca-numeros dd, .cx--carvao .ca-numeros dd { color:var(--cliente); } .cx--escuro .ca-numeros dt, .cx--carvao .ca-numeros dt { color:color-mix(in srgb, var(--osso) 66%, transparent); } .cx--claro .ca-numeros dd, .cx--osso .ca-numeros dd { color:var(--cx-forte); } .cx--claro .ca-numeros, .cx--osso .ca-numeros { border-color:color-mix(in srgb, currentColor 18%, transparent); } .cx-cena .ca-numeros.cx-num-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .cx-cena { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,6vw,96px); align-items:center; } .cx-cena--inverte > :first-child { order:2; } /* ---------- 9. Faixas de áudio (músicas e voz reais) ---------- */ .cx-faixas { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .cx-faixa { display:flex; flex-direction:column; gap:16px; padding:clamp(20px,2.4vw,30px); border-radius:20px; background:#fffefb; color:var(--cx-tinta); border:1px solid rgba(38,39,32,.12); box-shadow:0 30px 60px -40px rgba(38,39,32,.45); } .cx-faixas > .cx-faixa:nth-child(2) { background:#d5c6f0; } .cx-faixas > .cx-faixa:nth-child(3) { background:#dce9ca; } .cx-faixa__genero { font:600 .64rem var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:#4A2A8A; } .cx-faixa h3 { font-size:clamp(1.5rem,2.2vw,2.1rem); line-height:1; letter-spacing:-.035em; font-weight:820; font-stretch:112%; } .cx-faixa blockquote { font:italic 400 1.18rem/1.25 var(--f-serifa); color:#3c3d35; } .cx-faixa__player { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:14px; margin-top:auto; } .cx-faixa__play { width:52px; height:52px; border-radius:50%; border:0; display:grid; place-items:center; background:var(--cx-tinta); color:var(--cx-claro); transition:transform .3s var(--ease), background-color .3s; } .cx-faixa__play:hover { background:#FC693C; color:#262720; transform:scale(1.06); } .cx-faixa__play svg { width:18px; height:18px; } .cx-faixa__play .pausa { display:none; } .cx-faixa[data-tocando] .cx-faixa__play .toca { display:none; } .cx-faixa[data-tocando] .cx-faixa__play .pausa { display:block; } .cx-faixa__onda { position:relative; display:flex; align-items:center; gap:2px; height:44px; cursor:pointer; } .cx-faixa__onda i { flex:1; height:calc(var(--h) * 100%); min-height:3px; border-radius:2px; background:rgba(38,39,32,.28); transition:background-color .2s; } .cx-faixa__onda i.ok { background:#262720; } .cx-faixa__onda--claro i { background:rgba(246,243,236,.28); } .cx-faixa__onda--claro i.ok { background:#FC693C; } .cx-faixa__onda:focus-visible { outline:2px solid #FC693C; outline-offset:4px; border-radius:4px; } .cx-faixa__tempo { display:flex; justify-content:space-between; font:.66rem var(--f-mono); color:rgba(38,39,32,.62); font-variant-numeric:tabular-nums; } .cx-faixa audio { width:100%; } .js .cx-faixa audio { display:none; } .cx-faixa__controles { display:none; } .js .cx-faixa__controles { display:grid; gap:6px; } .cx-faixa details { border-top:1px solid rgba(38,39,32,.14); padding-top:12px; } .cx-faixa summary { cursor:pointer; font:600 .78rem var(--f-mono); letter-spacing:.04em; list-style:none; min-height:32px; display:flex; align-items:center; } .cx-faixa summary::-webkit-details-marker { display:none; } .cx-faixa summary::after { content:"+"; margin-left:auto; font-size:1rem; } .cx-faixa details[open] summary::after { content:"–"; } .cx-faixa details p { margin-top:10px; font-size:.9rem; line-height:1.55; white-space:pre-line; color:#3c3d35; } .cx-faixa--escura { background:#2f302a; color:#f6f3ec; border-color:rgba(246,243,236,.14); } .cx-faixa--escura .cx-faixa__genero { color:#d5c6f0; } .cx-faixa--escura h3 { color:#f6f3ec; } .cx-faixa--escura .cx-faixa__play { background:#FC693C; color:#262720; } .cx-faixa--escura .cx-faixa__tempo { color:rgba(246,243,236,.6); } .cx-faixa--escura details { border-color:rgba(246,243,236,.16); } .cx-faixa--escura details p { color:rgba(246,243,236,.82); } .cx-mascote { width:clamp(120px,16vw,200px); height:auto; } .cx-voz { display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:center; margin-top:12px; padding:clamp(20px,2.4vw,30px); border-radius:20px; background:#262720; color:#f6f3ec; } .cx-voz .cx-faixa { box-shadow:none; } /* ---------- 10. Mapa de capacidades (famílias de ferramentas) ---------- */ .cx-capacidades { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } .cx-capacidades--5 { grid-template-columns:repeat(5,minmax(0,1fr)); } .cx-capacidades li { display:grid; gap:10px; align-content:start; padding:clamp(18px,2vw,26px); border-radius:16px; background:rgba(246,243,236,.05); border:1px solid rgba(246,243,236,.12); transition:border-color .35s, background-color .35s, transform .5s var(--ease); } .cx-capacidades li:hover { border-color:var(--cliente); background:rgba(252,105,60,.08); transform:translateY(-4px); } .cx-capacidades b { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font:600 .66rem var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--cliente); } .cx-capacidades b span { font:820 1.6rem/1 var(--f-display); letter-spacing:-.04em; color:var(--osso); } .cx-capacidades strong { font-size:1.12rem; line-height:1.18; letter-spacing:-.015em; } .cx-capacidades p { font-size:.88rem; line-height:1.45; color:color-mix(in srgb, var(--osso) 70%, transparent); } /* ---------- 11. Arquitetura (fluxo em camadas) ---------- */ .cx-fluxo { list-style:none; padding:0; display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:0; counter-reset:etapa; } .cx-fluxo li { position:relative; display:grid; gap:10px; align-content:start; padding:22px 22px 22px 0; border-top:2px solid color-mix(in srgb, currentColor 20%, transparent); counter-increment:etapa; } .cx-fluxo li::before { content:counter(etapa, decimal-leading-zero); font:600 .66rem var(--f-mono); letter-spacing:.1em; color:var(--cliente); } .cx--claro .cx-fluxo li::before, .cx--osso .cx-fluxo li::before { color:var(--cx-forte); } .cx-fluxo li::after { content:""; position:absolute; top:-6px; left:0; width:10px; height:10px; border-radius:50%; background:var(--cliente); } .cx--claro .cx-fluxo li::after, .cx--osso .cx-fluxo li::after { background:var(--cx-forte); } .cx-fluxo strong { font-size:1.08rem; line-height:1.2; letter-spacing:-.015em; } .cx-fluxo p { font-size:.9rem; line-height:1.45; color:color-mix(in srgb, currentColor 70%, transparent); max-width:28ch; } /* ---------- 12. Idiomas (mesma frase, duas línguas) ---------- */ .cx-idiomas { display:grid; gap:24px; } .cx-idiomas__troca { display:none; gap:4px; padding:4px; border-radius:999px; background:rgba(247,243,233,.1); justify-self:start; } .js .cx-idiomas__troca { display:inline-flex; } .cx-idiomas__troca button { min-height:44px; padding:0 20px; border:0; border-radius:999px; background:transparent; color:inherit; font:650 .9rem var(--f-display); } .cx-idiomas__troca button[aria-pressed="true"] { background:var(--cliente); color:#173F35; } .cx-idiomas__frases { display:grid; gap:18px; } .cx-idiomas__frase { display:grid; gap:10px; } .cx-idiomas__frase b { font:600 .66rem var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--cliente); } .cx-idiomas__frase p { font:italic 400 clamp(2.4rem,5.4vw,5.4rem)/.98 var(--f-serifa); letter-spacing:-.02em; text-wrap:balance; max-width:20ch; } .js .cx-idiomas[data-lingua="es"] .cx-idiomas__frase[lang="pt-BR"], .js .cx-idiomas[data-lingua="pt"] .cx-idiomas__frase[lang="es-AR"] { display:none; } /* ---------- 13. Filme em tela cheia ---------- */ .cx-filme { position:relative; min-height:min(92vh,860px); display:grid; align-items:end; overflow:hidden; color:#F7F3E9; background:#173F35; } .cx-filme > video, .cx-filme > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .cx-filme::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,24,20,.18) 0%,rgba(9,24,20,0) 30%,rgba(9,24,20,.25) 55%,rgba(9,24,20,.86) 100%); pointer-events:none; } .cx-filme__texto { position:relative; z-index:2; padding:0 0 clamp(40px,7vw,96px); } .cx-filme__texto .olho { color:#F7F3E9; } .cx-filme__texto .olho::before { background:#F7F3E9; } .cx-filme__texto h2 { margin-top:18px; max-width:15ch; } .cx-filme__pe { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:26px; } .cx-filme__pe p { font:.68rem var(--f-mono); letter-spacing:.06em; color:rgba(247,243,233,.78); } .cx-pausa { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:9px 14px; border-radius:6px; border:1px solid rgba(247,243,233,.35); background:rgba(9,24,20,.5); color:#F7F3E9; font:.68rem var(--f-mono); letter-spacing:.04em; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .cx-pausa:hover { border-color:var(--cliente); } .cx-pausa svg { width:13px; height:13px; } .cx-pausa .toca { display:none; } .cx-pausa[aria-pressed="true"] .par { display:none; } .cx-pausa[aria-pressed="true"] .toca { display:block; } @media (prefers-reduced-motion: reduce) { .cx-filme > video { display:none; } .cx-pausa { display:none; } } /* ---------- 14. Traços (galeria horizontal de ilustrações) ---------- */ .cx-tracos { display:grid; grid-auto-flow:column; grid-auto-columns:min(78vw,860px); gap:clamp(14px,2vw,26px); overflow-x:auto; scroll-snap-type:x mandatory; padding:0 var(--gut) 18px; scroll-padding-inline:var(--gut); overscroll-behavior-x:contain; scrollbar-color:var(--cliente) transparent; list-style:none; margin:0; } .cx-tracos:focus-visible { outline:2px solid var(--brasa); outline-offset:-4px; } .cx-tracos li { scroll-snap-align:start; display:grid; gap:14px; } .cx-tracos figure { position:relative; border-radius:6px; overflow:hidden; aspect-ratio:3/2; background:#e9e1cd; box-shadow:0 30px 60px -36px rgba(0,0,0,.7); } .cx-tracos img { width:100%; height:100%; object-fit:cover; } .cx-tracos figure span { position:absolute; top:14px; right:14px; padding:6px 10px; border-radius:3px; background:rgba(247,243,233,.88); color:#173F35; font:.64rem var(--f-mono); letter-spacing:.08em; } .cx-tracos strong { font:italic 400 clamp(1.6rem,2.4vw,2.2rem)/1 var(--f-serifa); } .cx-tracos p { font-size:.9rem; color:color-mix(in srgb, currentColor 72%, transparent); max-width:60ch; } .cx-tracos__dica { display:flex; justify-content:space-between; gap:18px; margin-top:12px; font:.68rem var(--f-mono); color:color-mix(in srgb, currentColor 60%, transparent); } /* ---------- 15. Diário (a viagem na ordem em que acontece) ---------- */ .cx-diario { list-style:none; padding:0; display:grid; gap:clamp(56px,9vw,130px); counter-reset:dia; } .cx-diario > li { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(24px,4.5vw,70px); align-items:end; counter-increment:dia; } .cx-diario > li:nth-child(even) { grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr); } .cx-diario > li:nth-child(even) > figure, .cx-diario > li:nth-child(even) > .cx-diario__duo { order:2; } .cx-diario figure { position:relative; border-radius:6px; overflow:hidden; aspect-ratio:3/2; } .cx-diario figure img { width:100%; height:100%; object-fit:cover; } .cx-diario__duo { display:grid; grid-template-columns:1.55fr 1fr; gap:10px; align-items:stretch; } .cx-diario__duo figure:first-child { aspect-ratio:auto; } .cx-diario__duo figure:last-child { aspect-ratio:2/3; } .cx-diario__txt { display:grid; gap:14px; padding-bottom:8px; } .cx-diario__txt::before { content:counter(dia, decimal-leading-zero); font:860 clamp(3.4rem,6vw,5.6rem)/.8 var(--f-display); font-stretch:122%; letter-spacing:-.06em; color:var(--cx-forte); } .cx--escuro .cx-diario__txt::before { color:var(--cliente); } .cx-diario__txt q { quotes:none; font:italic 400 clamp(1.7rem,2.6vw,2.5rem)/1.04 var(--f-serifa); letter-spacing:-.01em; text-wrap:balance; } .cx-diario__txt q[lang="es-AR"]::after { content:" ES"; font:600 .55rem var(--f-mono); letter-spacing:.12em; vertical-align:super; opacity:.6; } .cx-diario__txt p { font-size:.98rem; line-height:1.55; color:color-mix(in srgb, currentColor 74%, transparent); } .cx-diario figcaption { position:absolute; left:12px; bottom:12px; right:12px; font:.62rem/1.4 var(--f-mono); letter-spacing:.04em; color:rgba(255,255,255,.86); text-shadow:0 1px 6px rgba(0,0,0,.6); } /* ---------- 16. Regras de fidelidade (fichas de proibição) ---------- */ .cx-regras { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .cx-regras li { display:grid; gap:10px; align-content:start; padding:22px; border-radius:14px; background:#fffdf8; color:var(--cx-tinta, var(--tinta)); border:1px solid rgba(23,63,53,.14); } .cx-regras--duo { grid-template-columns:repeat(2,minmax(0,1fr)); } .cx-regras b { font:600 .64rem var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--cx-forte); } .cx-regras strong { font-size:1.06rem; line-height:1.3; letter-spacing:-.01em; } .cx-regras s { text-decoration-thickness:2px; text-decoration-color:var(--cx-forte); color:color-mix(in srgb, currentColor 58%, transparent); } /* ---------- 17. Estante de dossiês (mapa da pesquisa) ---------- */ .cx-estante { list-style:none; padding:0; display:grid; grid-template-columns:repeat(22,minmax(0,1fr)); gap:4px; } .cx-estante li { display:grid; place-items:center; aspect-ratio:3/4; border-radius:3px; font:600 clamp(.5rem,.62vw,.66rem)/1 var(--f-mono); color:rgba(244,239,230,.86); background:var(--c, #2D4A3A); } .cx-estante .k1 { --c:#1F5E68; } .cx-estante .k2 { --c:#2D4A3A; } .cx-estante .k3 { --c:#8A611B; } .cx-estante .k4 { --c:#A3452C; } .cx-estante .k5 { --c:#E2B866; color:#121915; } .cx-estante .k5 { outline:1px solid rgba(18,25,21,.2); } .cx-estante__leg { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:22px; font-size:.88rem; } .cx-estante__leg li { display:flex; align-items:center; gap:9px; } .cx-estante__leg i { width:14px; height:18px; border-radius:2px; background:var(--c); } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .cx-estante li { animation:cx-surgir linear both; animation-timeline:view(); animation-range:entry 0% cover 30%; } } } @keyframes cx-surgir { from { opacity:0; transform:translateY(10px) scale(.9); } to { opacity:1; transform:none; } } /* ---------- 18. Correções (o fato errado e o certo) ---------- */ .cx-correcoes { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border-radius:18px; overflow:hidden; background:color-mix(in srgb, currentColor 14%, transparent); } .cx-correcoes li { display:grid; gap:12px; align-content:start; padding:clamp(22px,2.6vw,34px); background:var(--cx-claro, var(--osso)); } .cx-correcoes b { font:600 .64rem var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:color-mix(in srgb, currentColor 58%, transparent); } .cx-correcoes s { font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.25; text-decoration-thickness:2px; text-decoration-color:#A3452C; color:color-mix(in srgb, currentColor 52%, transparent); } .cx-correcoes strong { font-size:clamp(1.25rem,1.8vw,1.6rem); line-height:1.15; letter-spacing:-.02em; color:#2D4A3A; } .cx-correcoes strong::before { content:"→ "; color:#B8862F; } /* ---------- 19. Barra empilhada (auditoria) ---------- */ .cx-pilha { display:flex; height:64px; border-radius:12px; overflow:hidden; margin:22px 0 14px; } .cx-pilha span { flex:var(--v) 0 0; display:flex; align-items:center; padding:0 16px; font:700 1.05rem var(--f-mono); color:#fff; white-space:nowrap; } .cx-pilha .ok { background:#2F6B45; } .cx-pilha .ajuste { background:#B8862F; } .cx-pilha .caiu { background:#A3452C; } .cx-pilha__leg { display:flex; flex-wrap:wrap; gap:8px 24px; font-size:.9rem; } .cx-pilha__leg span { display:inline-flex; align-items:center; gap:8px; } .cx-pilha__leg i { width:12px; height:12px; border-radius:3px; background:var(--c); } /* ---------- 20. Pêndulo (o símbolo que volta ao prumo) ---------- */ .cx-prumo { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(30px,6vw,100px); align-items:center; } .cx-prumo__simbolo { position:relative; display:grid; place-items:center; min-height:clamp(320px,40vw,560px); border-radius:24px; background:radial-gradient(circle at 50% 30%,rgba(233,162,127,.18),transparent 60%),#0F3B37; } .cx-prumo__simbolo svg { width:min(62%,330px); height:auto; overflow:visible; } .cx-prumo__pendulo { transform-origin:500px 60px; transform-box:view-box; } .cx-prumo__simbolo:hover .cx-prumo__pendulo { animation:cx-balanco 2.6s var(--ease); } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .cx-prumo__pendulo { animation:cx-balanco-vista linear both; animation-timeline:view(); animation-range:entry 10% cover 55%; } .cx-prumo__simbolo:hover .cx-prumo__pendulo { animation:cx-balanco 2.6s var(--ease); animation-timeline:auto; } } } .js .cx-prumo__simbolo.cx-balanca .cx-prumo__pendulo { animation:cx-balanco 2.8s var(--ease) both; } @keyframes cx-balanco { 0% { rotate:16deg; } 22% { rotate:-11deg; } 44% { rotate:7deg; } 64% { rotate:-4deg; } 82% { rotate:1.5deg; } 100% { rotate:0deg; } } @keyframes cx-balanco-vista { 0% { rotate:22deg; } 25% { rotate:-14deg; } 48% { rotate:8deg; } 68% { rotate:-4deg; } 86% { rotate:1.5deg; } 100% { rotate:0deg; } } @media (prefers-reduced-motion: reduce) { .cx-prumo__pendulo { animation:none !important; } } .cx-prumo__prumo { position:absolute; left:50%; top:0; bottom:0; width:1px; background:linear-gradient(rgba(243,236,225,0),rgba(243,236,225,.22) 20%,rgba(243,236,225,.22) 80%,rgba(243,236,225,0)); } .cx-prumo__leg { position:absolute; left:20px; right:20px; bottom:18px; display:flex; justify-content:space-between; font:.64rem var(--f-mono); letter-spacing:.08em; color:rgba(243,236,225,.6); } .cx-prumo__texto h2 { margin:18px 0 22px; } .cx-prumo__texto .lead { color:color-mix(in srgb, var(--osso) 78%, transparent); } .cx-prumo__marcas { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; } .cx-prumo__marcas span { padding:10px 14px; border-radius:999px; border:1px solid rgba(243,236,225,.2); font:.72rem var(--f-mono); letter-spacing:.04em; } /* ---------- 21. Território (rota em cartões) ---------- */ .cx-rota { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.4vw,18px); } .cx-rota li { display:grid; gap:12px; align-content:start; } .cx-rota figure { position:relative; aspect-ratio:4/5; border-radius:12px; overflow:hidden; } .cx-rota img { width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); } .cx-rota li:hover img { transform:scale(1.05); } .cx-rota figure b { position:absolute; left:12px; top:12px; padding:6px 9px; border-radius:999px; background:rgba(15,59,55,.78); color:#F3ECE1; font:600 .62rem var(--f-mono); letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .cx-rota strong { font:italic 400 clamp(1.45rem,2vw,1.9rem)/1.02 var(--f-serifa); } .cx-rota p { font-size:.9rem; line-height:1.45; color:color-mix(in srgb, currentColor 70%, transparent); } /* ---------- 22. Mesa de peças impressas ---------- */ .cx-mesa { position:relative; display:grid; grid-template-columns:.62fr 1fr .9fr; grid-template-rows:auto auto; gap:clamp(14px,2vw,28px); align-items:center; padding:clamp(24px,4vw,60px); border-radius:24px; background:radial-gradient(circle at 20% 0%,#fff9ef,transparent 60%),#E7D8C1; } .cx-mesa figure { position:relative; margin:0; } .cx-mesa img { width:100%; height:auto; border-radius:3px; box-shadow:0 2px 3px rgba(26,23,20,.12),0 26px 50px -24px rgba(26,23,20,.55); background:#fff; } .cx-mesa__banner { grid-row:1 / span 2; transform:rotate(-2deg); } .cx-mesa__cartaz { transform:rotate(1.5deg); } .cx-mesa__cartao { grid-column:2 / span 2; transform:rotate(-1deg); } .cx-mesa__post { display:grid; grid-template-columns:1fr 1fr; gap:10px; transform:rotate(2deg); } .cx-mesa figcaption { margin-top:10px; font:.62rem var(--f-mono); letter-spacing:.06em; color:rgba(26,23,20,.62); } /* ---------- 23. Estante de documentos (capas) ---------- */ .cx-docs { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,26px); align-items:end; } .cx-docs li { display:grid; gap:12px; } .cx-docs figure { position:relative; border-radius:4px 10px 10px 4px; overflow:hidden; aspect-ratio:210/297; background:#fff; box-shadow:inset 6px 0 10px -6px rgba(0,0,0,.35),0 30px 50px -30px rgba(0,0,0,.6); } .cx-docs figure.paisagem { aspect-ratio:297/210; } .cx-docs img { width:100%; height:100%; object-fit:cover; object-position:top center; } .cx-docs strong { display:flex; align-items:baseline; gap:8px; font:860 clamp(2rem,3.4vw,3.2rem)/.9 var(--f-display); font-stretch:120%; letter-spacing:-.05em; color:var(--cliente); } .cx-docs strong small { font:600 .7rem var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:color-mix(in srgb, var(--osso) 70%, transparent); } .cx-docs p { font-size:.92rem; line-height:1.45; color:color-mix(in srgb, var(--osso) 76%, transparent); } /* ---------- 24. Vitrine de demonstração (abrir e testar) ---------- */ .cx-teste { display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:12px; } .cx-teste a { position:relative; display:grid; gap:12px; align-content:start; min-height:220px; padding:clamp(22px,2.6vw,32px); border-radius:18px; text-decoration:none; background:var(--carvao-3); border:1px solid var(--linha); transition:border-color .35s, transform .5s var(--ease), background-color .35s; overflow:hidden; isolation:isolate; } .cx-teste a::before { content:""; position:absolute; inset:auto -20% -60% auto; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,var(--cliente-halo),transparent 70%); z-index:-1; transition:transform .8s var(--ease); } .cx-teste a:hover { border-color:var(--cliente); transform:translateY(-5px); background:var(--carvao-4); } .cx-teste a:hover::before { transform:scale(1.3); } .cx-teste b { font:600 .64rem var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--cliente); } .cx-teste strong { font-size:clamp(1.3rem,1.8vw,1.65rem); line-height:1.1; letter-spacing:-.025em; } .cx-teste p { font-size:.93rem; line-height:1.45; color:var(--cinza); } .cx-teste span { margin-top:auto; font:.72rem var(--f-mono); color:var(--osso); } /* ---------- 25. Citação ---------- */ .cx-citacao { display:grid; gap:18px; max-width:28ch; } .cx-citacao blockquote { font:italic 400 clamp(2.2rem,4.4vw,4.2rem)/1.02 var(--f-serifa); letter-spacing:-.02em; text-wrap:balance; } .cx-citacao figcaption { font:.74rem var(--f-mono); letter-spacing:.06em; color:color-mix(in srgb, currentColor 66%, transparent); } /* ---------- 26. Grade de nichos / etiquetas ---------- */ .cx-temas { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,2vw,26px); align-items:start; } .cx-temas img { width:100%; border-radius:18px; box-shadow:0 24px 50px -30px rgba(16,42,37,.6); } .cx-etiquetas { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; } .cx-etiquetas li { padding:11px 16px; border-radius:999px; font-size:.95rem; font-weight:560; background:#fffdf8; color:var(--cx-tinta); border:1px solid rgba(36,61,55,.16); } .cx-etiquetas li:nth-child(5n+1) { background:#DDF08A; } .cx-etiquetas li:nth-child(7n+3) { background:#C44732; color:#FFF8EE; border-color:#C44732; } .cx-troca { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(14px,3vw,40px); margin-top:clamp(28px,4vw,56px); padding:clamp(22px,3vw,40px); border-radius:20px; background:#183D36; color:#FFF8EE; } .cx-troca s { justify-self:end; font:820 clamp(1.6rem,3.4vw,3.2rem)/1 var(--f-display); font-stretch:116%; letter-spacing:-.04em; text-decoration-thickness:3px; text-decoration-color:#C44732; color:rgba(255,248,238,.55); } .cx-troca span { font-size:2rem; color:#DDF08A; } .cx-troca strong { font:820 clamp(2rem,4.6vw,4.2rem)/1 var(--f-display); font-stretch:116%; letter-spacing:-.04em; color:#DDF08A; } .cx-troca p { grid-column:1 / -1; text-align:center; font:.72rem var(--f-mono); letter-spacing:.06em; color:rgba(255,248,238,.66); } /* ---------- Telas (capturas soltas com moldura leve) ---------- */ .cx-telas { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(16px,2.4vw,34px); align-items:end; } .cx-telas figure { display:grid; gap:10px; } .cx-telas img { width:100%; border-radius:10px; border:1px solid color-mix(in srgb, currentColor 16%, transparent); box-shadow:0 30px 70px -40px rgba(0,0,0,.7); } .cx-telas figcaption { font:.68rem/1.5 var(--f-mono); color:color-mix(in srgb, currentColor 78%, transparent); } .cx-telas--tres { grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); align-items:start; } .cx-telas--tres > :nth-child(3) { grid-column:2; grid-row:1 / span 2; align-self:center; } .cx-voz > img { border-radius:18px; } .cx-telas .cel img { border-radius:22px; border:6px solid #1c1a18; } /* ---------- Linha do tempo vertical (marcos em lista, número grande ao lado) ---------- */ .cx-linha { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(30px,6vw,100px); align-items:start; } .cx-linha__lado { position:sticky; top:110px; display:grid; gap:20px; } .cx-linha__lado .t-1 { max-width:14ch; font-size:clamp(2.4rem,4.1vw,4.3rem); } .cx-linha__total { display:grid; gap:8px; margin-top:clamp(10px,2vw,26px); } .cx-linha__total strong { font:860 clamp(4.4rem,9vw,8.6rem)/.8 var(--f-display); font-stretch:122%; letter-spacing:-.06em; color:var(--cliente); } .cx--claro .cx-linha__total strong, .cx--osso .cx-linha__total strong { color:var(--cx-forte); } .cx-linha__total span { font:.74rem/1.45 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; max-width:32ch; color:color-mix(in srgb, currentColor 72%, transparent); } .cx-linha__lista { list-style:none; padding:0; margin:0; border-top:1px solid color-mix(in srgb, currentColor 18%, transparent); } .cx-linha__lista li { position:relative; display:grid; grid-template-columns:118px minmax(0,1fr); gap:18px; padding:20px 0 20px 22px; border-bottom:1px solid color-mix(in srgb, currentColor 13%, transparent); } .cx-linha__lista li::before { content:""; position:absolute; left:0; top:27px; width:9px; height:9px; border-radius:50%; background:color-mix(in srgb, currentColor 30%, transparent); } .cx-linha__lista li.cx-linha__fim::before { background:var(--cliente); box-shadow:0 0 0 5px color-mix(in srgb, var(--cliente) 22%, transparent); } .cx--claro .cx-linha__lista li.cx-linha__fim::before { background:var(--cx-forte); box-shadow:0 0 0 5px color-mix(in srgb, var(--cx-forte) 18%, transparent); } .cx-linha__lista time { font:700 .95rem/1.3 var(--f-mono); font-variant-numeric:tabular-nums; color:var(--cliente); } .cx--claro .cx-linha__lista time { color:var(--cx-forte); } .cx-linha__lista time b { display:block; margin-top:4px; font-size:.7rem; font-weight:600; letter-spacing:.06em; color:color-mix(in srgb, currentColor 80%, transparent); } .cx-linha__lista strong { display:block; font-size:clamp(1.08rem,1.3vw,1.25rem); line-height:1.2; letter-spacing:-.015em; } .cx-linha__lista p { margin-top:5px; font-size:.94rem; line-height:1.48; color:color-mix(in srgb, currentColor 76%, transparent); } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .cx-linha__lista li { animation:cx-surgir linear both; animation-timeline:view(); animation-range:entry 0% cover 22%; } } } /* ---------- Relógio fino (variação sem cartões: só a régua e os marcos) ---------- */ .cx-relogio--fino .cx-relogio__marcos { background:none; border:0; border-radius:0; gap:clamp(16px,2vw,30px); margin-top:30px; overflow:visible; } .cx-relogio--fino .cx-relogio__marcos li { background:none !important; padding:18px 0 0; border-top:2px solid color-mix(in srgb, currentColor 20%, transparent); } .cx-relogio--fino .cx-relogio__marcos .cx-relogio__fim { border-top-color:var(--cliente); } /* ---------- Utilitários de ritmo (sem style inline: a CSP aceita só propriedades personalizadas) ---------- */ .cx--sem-topo { padding-top:0; } .cx--pe-m { padding-bottom:clamp(60px,8vw,110px); } .cx-mt-0 { margin-top:0 !important; } .cx-mt-s { margin-top:12px; } .cx-mt-m { margin-top:clamp(26px,3vw,40px); } .cx-mt-l { margin-top:clamp(40px,6vw,80px); } .cx-mb-m { margin-bottom:22px; } .cx-lead-meio { margin:22px 0 28px; } .cx-m-titulo { margin:14px 0 6px; } .cx-sub-cab { margin:clamp(56px,8vw,110px) 0 28px; } .cx-legenda-filme { margin:12px 6px 4px; color:rgba(244,239,230,.62); } .cx-dado-num { font:860 clamp(3.4rem,6vw,5.6rem)/.85 var(--f-display); font-stretch:120%; letter-spacing:-.05em; color:#2D4A3A; } .cx-dado-sub { font:600 .8rem var(--f-mono); letter-spacing:.06em; color:#6B655B; } .cx-dado-txt { margin-top:14px; font-size:.98rem; line-height:1.5; color:#48443D; } .cx-cel-moldura { border-radius:22px; border:6px solid #1c1a18; } .cx-cobre { object-fit:cover; } .cx-pos { object-position:var(--pos, 50% 50%); } /* ---------- Responsivo ---------- */ @media (max-width:1100px) { .cx-relogio__marcos { grid-template-columns:repeat(min(var(--n,5),3),minmax(0,1fr)); } .cx-parede__grade { grid-template-columns:repeat(6,minmax(0,1fr)); } .cx-capacidades, .cx-capacidades--5 { grid-template-columns:repeat(3,minmax(0,1fr)); } .cx-estante { grid-template-columns:repeat(16,minmax(0,1fr)); } .cx-fluxo { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:10px; } } @media (max-width:760px) { .cx__cab--duo, .cx-relogio__topo, .cx-noite, .cx-cena, .cx-prumo, .cx-catalogo, .cx-dados, .cx-marca, .cx-telas { grid-template-columns:1fr; } .cx-cena--inverte > :first-child { order:0; } .cx-relogio__total { justify-items:start; text-align:left; } .cx-relogio__fita { display:none; } .cx-relogio__marcos { grid-template-columns:1fr; margin-top:0; border-radius:3px 22px 3px 3px; } .cx-relogio__marcos li { display:grid; grid-template-columns:96px minmax(0,1fr); gap:6px 16px; padding:20px 18px; } .cx-relogio__marcos time { grid-row:1 / span 3; flex-direction:column; justify-content:flex-start; gap:6px; } .caso-pagina--viagem .ca-hero h1 { font-size:clamp(2.6rem,10.2vw,5.5rem); } .cx-cena .ca-numeros.cx-num-2 { grid-template-columns:1fr; } .cx-atlas strong, .cx-rota strong { font-size:1.4rem; } .cx-processo { grid-template-columns:1fr 1fr; row-gap:30px; } .cx-processo li:not(:last-child)::after { display:none; } .cx-parede__grade { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; } .cx-parede__grade li:nth-child(n+21) { display:none; } .cx-atlas, .cx-rota { grid-template-columns:1fr 1fr; } .cx-marca__cores { grid-template-columns:repeat(2,minmax(0,1fr)); } .cx-marca__cores li { min-height:92px; } .cx-barras th { width:44%; font-size:.86rem; } .cx-funil { grid-template-columns:1fr 1fr; } .cx-destaque { grid-template-columns:1fr; } .cx-faixas { grid-template-columns:1fr; } .cx-voz { grid-template-columns:1fr; } .cx-capacidades, .cx-capacidades--5 { grid-template-columns:1fr 1fr; } .cx-temas { grid-template-columns:repeat(2,minmax(0,1fr)); } .cx-capacidades li { padding:16px; } .cx-capacidades p { font-size:.84rem; } .cx-linha { grid-template-columns:1fr; gap:26px; } .cx-linha__lado { position:static; } .cx-linha__lista li { grid-template-columns:86px minmax(0,1fr); gap:12px; padding-left:18px; } .cx-relogio--fino .cx-relogio__marcos li { padding:16px 0; } .cx-fluxo { grid-template-columns:1fr; } .cx-fluxo li { grid-template-columns:40px minmax(0,1fr); padding:18px 0 18px 0; border-top-width:1px; } .cx-fluxo li::before { grid-row:1 / span 2; } .cx-fluxo li::after { display:none; } .cx-diario > li, .cx-diario > li:nth-child(even) { grid-template-columns:1fr; gap:18px; } .cx-diario > li:nth-child(even) > figure, .cx-diario > li:nth-child(even) > .cx-diario__duo { order:0; } .cx-regras { grid-template-columns:1fr; } .cx-estante { grid-template-columns:repeat(11,minmax(0,1fr)); gap:3px; } .cx-estante li { font-size:.5rem; } .cx-correcoes { grid-template-columns:1fr; } .cx-pilha { height:54px; } .cx-pilha span { padding:0 10px; font-size:.86rem; } .cx-mesa { grid-template-columns:1fr 1fr; padding:20px; gap:16px; } .cx-mesa__banner { grid-row:auto; grid-column:1; } .cx-mesa__cartaz { grid-column:2; } .cx-mesa__cartao, .cx-mesa__post { grid-column:1 / -1; } .cx-docs { grid-template-columns:1fr 1fr; row-gap:30px; } .cx-teste { grid-template-columns:1fr; } .cx-teste a { min-height:0; } .cx-troca { grid-template-columns:1fr; text-align:center; } .cx-troca s { justify-self:center; } .cx-troca span { transform:rotate(90deg); justify-self:center; } .cx-tracos { grid-auto-columns:86vw; } .cx-telas--tres { grid-template-columns:1fr; } .cx-telas--tres > :nth-child(3) { grid-column:auto; grid-row:auto; width:72%; justify-self:center; } .cx-filme { min-height:78vh; } .cx-noite__lista li { grid-template-columns:70px minmax(0,1fr); gap:12px; } } @media (max-width:340px) { .cx-atlas, .cx-rota { grid-template-columns:1fr; } } @media (max-width:520px) { .cx-capacidades, .cx-capacidades--5 { grid-template-columns:1fr; } } @media (max-width:410px) { .cx-estante { grid-template-columns:repeat(10,minmax(0,1fr)); } }