/* ================================================================ Dede Viagens — Landing de jogo Estrutura herdada da landing Flamengo x Cruzeiro entregue pelo cliente, reescrita sobre o design system do site: base clara, muito branco, e a cor do time entrando como ACENTO — nunca como fundo de secao inteira. TEMA POR TIME Cada pagina define no as variaveis --tint (acento), --tint-deep (hover/contraste) e --tint-soft (fundo levissimo). Nenhuma regra abaixo tem cor de time fixa. Flamengo vermelho Vasco preto Fluminense verde Botafogo preto Sumario 01. Tema e base 02. Topline 03. Hero 04. Motivos 05. Experiencia (colagem) 06. O que inclui 07. Como funciona 08. Pacotes 09. Setores e opcionais 10. Roteiro no Rio 11. Embarques 12. FAQ 13. CTA final 14. Responsivo ================================================================ */ /* --- 01. Tema e base --- */ .lp{--tint:#e3131b;--tint-deep:#b3060d;--tint-soft:#fff1f1;--tint-ink:#16171b} .lp-flamengo{--tint:#e3131b;--tint-deep:#b3060d;--tint-soft:#fff1f1;--tint-ink:#16171b} .lp-vasco{--tint:#1b1b1b;--tint-deep:#000;--tint-soft:#f2f3f5;--tint-ink:#101114} .lp-fluminense{--tint:#0d7a4a;--tint-deep:#075534;--tint-soft:#eef8f2;--tint-ink:#14181a} .lp-botafogo{--tint:#1b1b1b;--tint-deep:#000;--tint-soft:#f2f3f5;--tint-ink:#101114} /* Turismo: cada destino tem seu acento, sem escurecer a base clara. */ .lp-turismo{--tint:#0e8ba8;--tint-deep:#086a82;--tint-soft:#e9f7fb;--tint-ink:#0c2b33} .lp-carnaval{--tint:#d6157a;--tint-deep:#a70b5c;--tint-soft:#fdeaf4;--tint-ink:#2a0d1d} .lp-paraguai{--tint:#1f6feb;--tint-deep:#1552b8;--tint-soft:#eaf1fe;--tint-ink:#0f1c2e} .lp-xuxa{--tint:#e8a600;--tint-deep:#b98200;--tint-soft:#fff6e0;--tint-ink:#2a2110} .lp-parque{--tint:#e2521a;--tint-deep:#b23c0e;--tint-soft:#fdeee7;--tint-ink:#2c1409} .lp .shell{width:var(--shell);margin-inline:auto} .lp .lp-section{padding:96px 0} .lp .lp-section-tight{padding:64px 0} .lp .lp-soft{background:var(--paper-soft)} .lp .lp-tinted{background:var(--tint-soft)} .lp .kicker{margin:0 0 18px;display:flex;align-items:center;gap:10px;color:var(--tint);font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase} .lp .kicker span{display:block;width:26px;height:2px;background:currentColor;flex-shrink:0} .lp .kicker-light{color:rgba(255,255,255,.75)} .lp h2{margin:0;font-size:clamp(30px,3.9vw,50px);line-height:1.04;letter-spacing:-.035em} .lp h2 strong{color:var(--tint);font-weight:800} .lp .lp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:44px;margin-bottom:46px} .lp .lp-head>p{max-width:430px;margin:0;color:var(--muted);line-height:1.65} .lp .lp-lead{font-size:17px;line-height:1.68;color:var(--muted)} /* botao com a cor do time */ .lp .button-tint{color:#fff;background:var(--tint);box-shadow:0 12px 28px color-mix(in srgb,var(--tint) 30%,transparent)} .lp .button-tint:hover{background:var(--tint-deep)} .lp .button-tint-ghost{color:var(--tint-ink);background:transparent;border-color:var(--line)} .lp .button-tint-ghost:hover{border-color:var(--tint);color:var(--tint);background:var(--tint-soft)} .lp .text-link:hover{color:var(--tint)} /* --- 02. Topline --- */ .lp-topline{background:var(--tint-ink);color:#fff} .lp-topline-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;flex-wrap:wrap} .lp-topline p{margin:0;display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:600;letter-spacing:.02em} .lp-topline p i{display:block;width:5px;height:5px;border-radius:50%;background:var(--tint);flex-shrink:0} .lp-topline a{display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:12.5px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .2s} .lp-topline a:hover{border-color:#fff} .lp-topline svg{width:15px;height:15px;fill:currentColor} /* --- 03. Hero --- */ .lp-hero{position:relative;overflow:hidden;padding:66px 0 78px;background:var(--paper);isolation:isolate} .lp-hero:before{content:"";position:absolute;z-index:-2;inset:0;background: radial-gradient(80% 60% at 88% 6%,color-mix(in srgb,var(--tint) 13%,transparent),transparent 62%), radial-gradient(60% 50% at 0% 96%,var(--tint-soft),transparent 65%)} .lp-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center} .lp-hero h1{margin:0;font-size:clamp(40px,5.6vw,74px);line-height:.98;letter-spacing:-.045em;text-wrap:balance} .lp-hero h1 strong{display:block;color:var(--tint);font-weight:800} .lp-hero-lead{max-width:520px;margin:22px 0 0;color:var(--muted);font-size:18px;line-height:1.6} .lp-badges{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0} .lp-badge-price{display:inline-flex;align-items:baseline;gap:8px;padding:11px 18px;border-radius:999px;background:var(--tint-ink);color:#fff;font-size:13px;font-weight:600} .lp-badge-price b{font-family:var(--font-sans);font-size:20px;font-weight:800;letter-spacing:-.03em} .lp-badge-info{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;font-weight:700;color:var(--tint-ink)} .lp-badge-info svg{width:17px;height:17px;fill:none;stroke:var(--tint);stroke-width:1.9} .lp-hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin:30px 0 0} .lp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:38px 0 0;padding:0;list-style:none} .lp-thumbs li{text-align:center} .lp-thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;background:var(--paper-mist)} .lp-thumbs p{margin:9px 0 0;color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.03em} .lp-hero-art{position:relative;display:grid;place-items:center;min-height:440px} .lp-hero-art:before{content:"";position:absolute;z-index:-1;width:82%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--tint) 16%,transparent),transparent 68%)} .lp-shield{width:min(360px,78%);height:auto;filter:drop-shadow(0 28px 50px rgba(11,31,58,.24))} .lp-ticket{position:absolute;right:-6px;bottom:6px;min-width:210px;padding:16px 20px;border-radius:18px;background:#fff;box-shadow:0 24px 54px rgba(11,31,58,.17);border:1px solid var(--line-soft)} .lp-ticket p{margin:0;color:var(--tint);font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase} .lp-ticket-row{display:flex;align-items:center;gap:12px;margin:8px 0 6px;font-family:var(--font-sans);font-size:27px;font-weight:800;letter-spacing:-.04em;color:var(--tint-ink)} .lp-ticket-row span{color:var(--muted-soft);font-size:17px;font-weight:600} .lp-ticket small{display:block;color:var(--muted);font-size:11.5px;line-height:1.45} /* --- 04. Motivos --- */ .lp-reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .lp-reason{display:flex;flex-direction:column;padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:transform .28s var(--dv-ease-boarding,ease),box-shadow .28s,border-color .28s} .lp-reason:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:transparent} .lp-reason-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:20px;border-radius:15px;background:var(--tint-soft)} .lp-reason-icon svg{width:23px;height:23px;fill:none;stroke:var(--tint);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .lp-reason h3{margin:0 0 9px;font-size:19px} .lp-reason p{flex:1;margin:0 0 18px;color:var(--muted);font-size:14.5px;line-height:1.6} .lp-reason a{display:inline-flex;align-items:center;gap:7px;color:var(--tint);font-family:var(--font-sans);font-size:13px;font-weight:800;transition:gap .2s} .lp-reason a:hover{gap:12px} /* --- 05. Experiencia (colagem) --- */ .lp-collage{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:220px 180px;gap:14px} .lp-collage figure{position:relative;margin:0;overflow:hidden;border-radius:var(--radius);background:var(--paper-mist)} .lp-collage img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--dv-ease-boarding,ease)} .lp-collage figure:hover img{transform:scale(1.05)} .lp-collage figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 18px 15px;background:linear-gradient(180deg,transparent,rgba(7,21,40,.86));color:#fff;font-size:12.5px;font-weight:600} .lp-collage-main{grid-column:span 2;grid-row:span 2} .lp-collage-note{grid-column:span 2;display:flex;align-items:center;gap:18px;padding:26px;border-radius:var(--radius);background:var(--tint-ink);color:#fff} .lp-collage-note strong{font-family:var(--font-sans);font-size:52px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--tint)} .lp-collage-note span{font-size:14.5px;line-height:1.45;color:#c9d4e0} /* --- 06. O que inclui --- */ .lp-included{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center} .lp-included-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .lp-included-grid article{padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:#fff} .lp-included-grid span{display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:14px;border-radius:11px;background:var(--tint);color:#fff;font-family:var(--font-sans);font-size:12.5px;font-weight:800} .lp-included-grid h3{margin:0 0 7px;font-size:16.5px} .lp-included-grid p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55} /* --- 07. Como funciona --- */ .lp-steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:52px;align-items:start} .lp-steps-list{display:grid;gap:16px;margin:0;padding:0;list-style:none} .lp-steps-list li{display:flex;gap:20px;padding:24px 26px;border:1px solid var(--line);border-radius:var(--radius);background:#fff} .lp-steps-list b{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--tint);color:#fff;font-family:var(--font-sans);font-size:14px;font-weight:800;flex-shrink:0} .lp-steps-list h3{margin:0 0 6px;font-size:17px} .lp-steps-list p{margin:0;color:var(--muted);font-size:14px;line-height:1.6} .lp-steps-media{position:relative;overflow:hidden;border-radius:var(--radius-lg);aspect-ratio:4/5;background:var(--paper-mist)} .lp-steps-media img{width:100%;height:100%;object-fit:cover} .lp-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 0;padding:0;list-style:none;grid-column:1/-1} .lp-numbers li{padding:22px 24px;border-radius:var(--radius);background:var(--paper-soft);border:1px solid var(--line-soft)} .lp-numbers strong{display:block;font-family:var(--font-sans);font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.04em;color:var(--tint-ink);line-height:1} .lp-numbers span{display:block;margin-top:8px;color:var(--muted);font-size:12.5px;line-height:1.45} /* --- 08. Pacotes --- */ .lp-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start} .lp-pack{position:relative;display:flex;flex-direction:column;padding:32px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;overflow:hidden;transition:transform .3s var(--dv-ease-boarding,ease),box-shadow .3s,border-color .3s} .lp-pack:hover{transform:translateY(-5px);box-shadow:var(--shadow-card)} .lp-pack-top{border-color:transparent;box-shadow:0 24px 60px color-mix(in srgb,var(--tint) 18%,transparent);outline:2px solid var(--tint);outline-offset:-2px} .lp-pack-flag{position:absolute;top:20px;right:-34px;width:140px;padding:6px 0;background:var(--tint);color:#fff;text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;transform:rotate(38deg)} .lp-gem{display:block;width:46px;height:46px;margin-bottom:16px} .lp-pack-kicker{margin:0 0 6px;color:var(--tint);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase} .lp-pack h3{margin:0 0 10px;font-size:25px} .lp-pack-lead{margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.55} .lp-pack-features{flex:1;margin:0 0 24px;padding:0;list-style:none;display:grid;gap:10px} .lp-pack-features li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5} .lp-pack-features li:before{content:"";flex-shrink:0;width:17px;height:17px;margin-top:2px;border-radius:50%;background:var(--tint-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23111'/%3E%3C/svg%3E") center/11px no-repeat} .lp-pack-price{margin:0 0 18px;padding-top:20px;border-top:1px solid var(--line-soft)} .lp-pack-price b{display:flex;align-items:baseline;gap:3px;font-family:var(--font-sans);font-size:42px;font-weight:800;letter-spacing:-.045em;color:var(--tint-ink);line-height:1} .lp-pack-price b sup{font-size:17px;font-weight:700;color:var(--muted)} .lp-pack-price span{display:block;margin-top:8px;color:var(--muted);font-size:12.5px} .lp-pack .button{width:100%} /* --- 09. Setores e opcionais --- */ .lp-two{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;align-items:start} .lp-note{margin:16px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55} .lp-alert{display:flex;gap:14px;padding:18px 20px;border-radius:var(--radius-sm);background:#fff8e6;border:1px solid #f2dfa8;color:#6b5310;font-size:13.5px;line-height:1.55} .lp-alert svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:#b98900;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .lp-alert strong{color:#4d3b06} /* --- 10. Roteiro no Rio --- */ .lp-rio{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:52px;align-items:center} .lp-rio-gallery{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:200px 160px;gap:14px} .lp-rio-gallery figure{position:relative;margin:0;overflow:hidden;border-radius:var(--radius);background:var(--paper-mist)} .lp-rio-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--dv-ease-boarding,ease)} .lp-rio-gallery figure:hover img{transform:scale(1.05)} .lp-rio-gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(180deg,transparent,rgba(7,21,40,.85));color:#fff;font-size:12px;font-weight:600} .lp-rio-gallery figure:first-child{grid-row:span 2} /* --- 11. Embarques --- */ .lp-boarding{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:52px;align-items:start} .lp-board-list{display:grid;gap:12px} .lp-board{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden;transition:border-color .22s,box-shadow .22s} .lp-board[open]{border-color:var(--tint);box-shadow:var(--shadow-soft)} .lp-board summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:18px 22px;font-family:var(--font-sans);font-weight:700;color:var(--tint-ink)} .lp-board summary::-webkit-details-marker{display:none} .lp-board summary em{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--tint-soft);color:var(--tint);font-size:11.5px;font-weight:800;font-style:normal;flex-shrink:0} .lp-board summary b{margin-left:auto;position:relative;width:15px;height:15px;flex-shrink:0} .lp-board summary b:before,.lp-board summary b:after{content:"";position:absolute;top:50%;left:0;width:15px;height:2px;border-radius:2px;background:var(--tint);transition:transform .25s} .lp-board summary b:after{transform:rotate(90deg)} .lp-board[open] summary b:after{transform:rotate(0)} .lp-board-body{padding:0 22px 20px} .lp-board-body ul{margin:0;padding:0;list-style:none;display:grid;gap:9px} .lp-board-body li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px;color:#3d4d5c} .lp-board-body li:last-child{border-bottom:0} .lp-board-body li b{margin-left:auto;font-family:var(--font-sans);font-size:13px;font-weight:800;color:var(--tint-ink)} /* --- 12. FAQ --- */ .lp-faq{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:52px;align-items:start} /* --- 13. CTA final --- */ .lp-final{position:relative;overflow:hidden;padding:0 0 96px} .lp-final-panel{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:40px;padding:56px;border-radius:var(--radius-lg);background:var(--tint-ink);color:#fff;isolation:isolate} .lp-final-panel:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(70% 90% at 88% 20%,color-mix(in srgb,var(--tint) 42%,transparent),transparent 66%)} .lp-final-panel h2{color:#fff;font-size:clamp(28px,3.4vw,44px)} .lp-final-panel h2 strong{color:var(--tint);filter:brightness(1.7)} .lp-final-panel>div>p{margin:16px 0 28px;color:#c9d4e0;font-size:16.5px} .lp-final-actions{display:flex;flex-wrap:wrap;gap:13px} .lp-final-panel small{display:block;margin-top:22px;color:#93a5b8;font-size:12.5px} .lp-final-shield{width:100%;max-width:250px;justify-self:center;filter:drop-shadow(0 24px 44px rgba(0,0,0,.5))} /* Bloco reservado para imagem que o cliente ainda vai enviar */ .lp-photo-slot{display:grid;place-items:center;min-height:190px;padding:26px;border:2px dashed #c9d5e0;border-radius:var(--radius);background:repeating-linear-gradient(135deg,#f5f8fa,#f5f8fa 10px,#eef3f7 10px,#eef3f7 20px);color:#69798a;text-align:center;font-family:var(--font-sans);font-size:12px;font-weight:700;line-height:1.6} .lp-photo-slot b{display:block;color:var(--navy);font-size:13px} .lp-photo-slot small{display:block;margin-top:5px;font-weight:600;opacity:.85} /* --- 14. Responsivo --- */ @media(max-width:1080px){ .lp .lp-section{padding:74px 0} .lp-hero-grid,.lp-included,.lp-steps,.lp-rio,.lp-boarding,.lp-faq{grid-template-columns:1fr} .lp-hero-art{order:-1;min-height:0} .lp-shield{width:min(280px,60%)} .lp-ticket{position:static;margin:22px auto 0;max-width:280px} .lp-packs{grid-template-columns:1fr;max-width:520px;margin-inline:auto} .lp-final-panel{grid-template-columns:1fr;padding:40px} .lp-final-shield{display:none} .lp-collage{grid-template-rows:200px 150px 150px} .lp-collage-main{grid-column:span 4} .lp-collage-note{grid-column:span 4} .lp-rio-gallery{grid-template-rows:180px 140px} } @media(max-width:800px){ .lp .lp-section{padding:56px 0} .lp .lp-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:30px} .lp-reasons,.lp-included-grid,.lp-numbers,.lp-two{grid-template-columns:1fr} .lp-collage{grid-template-columns:repeat(2,1fr);grid-template-rows:180px 130px 130px} .lp-collage-main{grid-column:span 2} .lp-collage-note{grid-column:span 2} .lp-thumbs{grid-template-columns:repeat(4,1fr);gap:8px} .lp-thumbs p{font-size:10px} .lp-topline-inner{justify-content:center;text-align:center;padding:8px 0} .lp-pack{padding:26px} .lp-final-panel{padding:30px 24px} } @media(max-width:520px){ .lp-rio-gallery{grid-template-columns:1fr;grid-template-rows:repeat(3,170px)} .lp-rio-gallery figure:first-child{grid-row:span 1} .lp-thumbs{grid-template-columns:repeat(2,1fr)} }