/* Imersão Piscicultura Lucrativa 2027 · landing page 1) Componentes do kit da marca 2) Estilos da página */ /* Imersão Piscicultura Lucrativa 2027 — classes compartilhadas. Valores vêm de tokens.css (var(--…)); nada de cor solta aqui. */ .pl, .pl * { box-sizing: border-box; } .pl { font-family: var(--font-texto); color: var(--texto); -webkit-font-smoothing: antialiased; } .pl-num { font-family: var(--font-display); font-variant-numeric: tabular-nums lining-nums; } .pl-sobre { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-texto); } .pl-suave { color: var(--texto-suave); } /* Botões */ .pl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border: 0; border-radius: var(--raio-sm); background: var(--acento); color: var(--sobre-acento); font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .pl-btn:hover { filter: brightness(1.06); } .pl-btn:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; } .pl-btn[disabled], .pl-btn[aria-disabled="true"] { background: var(--superficie-elevada); color: var(--texto-suave); cursor: not-allowed; filter: none; } .pl-btn--sec { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 2px var(--linha-forte); } .pl-btn--claro { background: var(--areia); color: var(--preto-profundo); } .pl-btn--bloco { display: flex; width: 100%; } .pl-btn small { font-family: var(--font-texto); font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none; } /* Caixa da oferta escondida */ .pl-oculta { border: 2px dashed var(--acento); border-radius: var(--raio-md); padding: 24px; text-align: center; background: var(--superficie); } .pl-oculta__q { font-family: var(--font-display); font-weight: 800; font-size: 96px; line-height: .9; color: var(--acento-texto); letter-spacing: .04em; } .pl-oculta__t { margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--texto); } /* Selo de lote */ .pl-lote { display: inline-flex; align-items: stretch; border-radius: var(--raio-sm); overflow: hidden; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); } .pl-lote__tag { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 14px; background: var(--acento); color: var(--sobre-acento); font-family: var(--font-display); } .pl-lote__tag b { font-size: 13px; letter-spacing: .14em; font-weight: 700; } .pl-lote__tag span { font-size: 44px; font-weight: 800; line-height: .9; } .pl-lote__info { padding: 10px 16px; display: flex; flex-direction: column; justify-content: center; } .pl-lote__preco { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--texto); font-variant-numeric: tabular-nums; } .pl-lote__datas { font-size: 14px; font-weight: 600; color: var(--texto-suave); margin-top: 2px; } .pl-lote--encerrado { opacity: 1; } .pl-lote--encerrado .pl-lote__tag { background: var(--superficie-elevada); color: var(--texto-suave); } .pl-lote--encerrado .pl-lote__preco { text-decoration: line-through; text-decoration-thickness: 3px; color: var(--texto-suave); } .pl-lote--proximo { box-shadow: inset 0 0 0 2px var(--linha-forte); background: transparent; } .pl-lote--proximo .pl-lote__tag { background: transparent; color: var(--texto); box-shadow: inset -1px 0 0 var(--linha-forte); } /* Faixa de manchete / barras */ .pl-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; background: var(--superficie); color: var(--texto); font-family: var(--font-display); font-weight: 700; font-size: 20px; } .pl-barra .pl-sep { width: 4px; height: 4px; border-radius: 99px; background: var(--linha-forte); } .pl-barra .pl-preco { color: var(--acento-texto); font-size: 26px; font-variant-numeric: tabular-nums; } /* Placeholder de foto real */ .pl-foto-real { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; background: repeating-linear-gradient(135deg, var(--superficie) 0 14px, var(--superficie-elevada) 14px 28px); border: 2px dashed var(--linha-forte); color: var(--texto); font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .04em; } .pl-foto-real::before { content: "FOTO REAL: "; color: var(--acento-texto); margin-right: .3em; } /* Selo Black Friday (entra e sai) */ .pl-bf { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--raio-pill); background: var(--preto-profundo); box-shadow: inset 0 0 0 1.5px var(--mostarda); color: var(--mostarda); font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .pl-bf i { width: 6px; height: 6px; border-radius: 99px; background: var(--mostarda); } /* Marca "demonstração" para protótipos */ .pl-demo { display: inline-block; padding: 3px 8px; border-radius: var(--raio-sm); box-shadow: inset 0 0 0 1.5px var(--linha-forte); color: var(--texto); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; } .pl-foto-real--video::before { content: "VÍDEO REAL: "; } /* Moldes em tamanho real (px do arquivo), reduzidos só para o preview */ .pl-quadro { position: relative; overflow: hidden; background: var(--preto-profundo); color: var(--areia); font-family: var(--font-texto); } .pl-quadro--916 { width: 1080px; height: 1920px; } .pl-quadro--45 { width: 1080px; height: 1350px; } .pl-quadro--169 { width: 1920px; height: 1080px; } .pl-quadro__video { position: absolute; inset: 0; background: var(--petroleo) center/cover; } .pl-quadro__tag { position: absolute; right: 72px; top: 240px; padding: 8px 16px; border-radius: var(--raio-sm); background: rgba(13,23,23,.7); color: var(--areia); font: 700 28px/1 var(--font-display); letter-spacing: .14em; } /* Faixa de manchete em px reais */ .pl-faixa { position: absolute; left: 0; right: 0; background: var(--preto-profundo); padding: 28px 72px 32px; border-bottom: 8px solid var(--mostarda); } .pl-faixa__s { font: 700 30px/1 var(--font-display); letter-spacing: .16em; color: var(--mostarda); text-transform: uppercase; } .pl-faixa__h { font: 800 76px/.98 var(--font-display); color: var(--areia); margin-top: 12px; } /* Legenda (fala) e nome */ .pl-legenda { position: absolute; left: 72px; right: 72px; text-align: center; font: 700 44px/1.25 var(--font-texto); color: var(--areia); } .pl-legenda span { background: rgba(13,23,23,.82); padding: 6px 14px; border-radius: var(--raio-sm); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .pl-nome { position: absolute; display: inline-flex; flex-direction: column; gap: 6px; padding: 20px 28px 22px; background: var(--petroleo); border-bottom: 6px solid var(--mostarda); border-radius: var(--raio-sm) var(--raio-sm) 0 0; } .pl-nome b { font: 800 52px/1 var(--font-display); color: var(--areia); } .pl-nome span { font: 600 28px/1.2 var(--font-texto); color: var(--areia); opacity: .9; } /* Valor de marcação: número provisório, ainda não definido. Troque antes de publicar. */ .pl-marca { text-decoration: underline dotted; text-decoration-thickness: .08em; text-underline-offset: .14em; text-decoration-color: currentColor; } /* ---------- Página ---------- */ body{margin:0;background:#0D1717} html{scroll-behavior:smooth} .pl{--petroleo:#103D38;--preto-profundo:#0D1717;--mostarda:#D6A642;--areia:#F2E8D2;--branco:#FFFFFF;--petroleo-claro:#1A4F48;--areia-escura:#E6D8B8;--mostarda-texto:#7A5A12;--nevoa:#8FA6A0;--fundo:#0D1717;--superficie:#103D38;--superficie-elevada:#1A4F48;--texto:#F2E8D2;--texto-suave:#B8C7C1;--acento:#D6A642;--sobre-acento:#0D1717;--acento-texto:#D6A642;--linha:#2E5A54;--linha-forte:#7FA09A;--foco:#D6A642;--font-display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--font-texto:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--raio-sm:4px;--raio-md:8px;--raio-pill:999px} .pl [data-theme="claro"]{--fundo:#F2E8D2;--superficie:#FFFFFF;--superficie-elevada:#E6D8B8;--texto:#0D1717;--texto-suave:#4A5E5A;--acento-texto:#7A5A12;--linha:#CDBF9F;--linha-forte:#6B7A76;--foco:#103D38} .pl h1,.pl h2,.pl h3,.pl p,.pl figure,.pl blockquote{margin:0} .pl img{display:block;max-width:100%} .pl ::selection{background:#D6A642;color:#0D1717} a{color:#D6A642} a:hover{color:#F2E8D2} .pl [data-theme="claro"] a:not(.pl-btn){color:#7A5A12} .pl [data-theme="claro"] a:not(.pl-btn):hover{color:#0D1717} .pl a:focus-visible,.pl summary:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:4px} .pl section[id],.pl header[id]{scroll-margin-top:72px} .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .sobre{display:flex;align-items:center;gap:12px;font-weight:700;font-size:13px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:#D6A642} .sobre::before{content:"";flex:none;width:28px;height:2px;background:currentColor} .pl [data-theme="claro"] .sobre{color:#7A5A12} .pl .pl-btn{font-family:var(--font-display);font-size:16px;font-weight:800;letter-spacing:.04em;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,filter .25s ease} .pl .pl-btn small{font-family:var(--font-texto);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none} .pl .pl-btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px -18px rgba(0,0,0,.6);color:#0D1717} .pl .pl-btn .seta{flex:none;transition:transform .25s cubic-bezier(.2,.7,.2,1)} .pl .pl-btn:hover .seta{transform:translateX(4px)} .pl .pl-bf{font-size:12px;letter-spacing:.12em;padding:6px 13px} .pl .pl-foto-real{font-size:13px;letter-spacing:.06em} .cta-brilho{position:relative;overflow:hidden;isolation:isolate} .cta-brilho::after{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 65%);transform:translateX(-120%);animation:pl-brilho 6s ease-in-out 2.4s infinite;pointer-events:none} .to-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 24px} .to-tempo{display:flex;align-items:center;gap:10px} .to-rotulo{font-weight:600;font-size:14px;line-height:1.2;color:#F2E8D2;white-space:nowrap} .hero-veu{background:linear-gradient(90deg,#0D1717 0%,rgba(13,23,23,.93) 34%,rgba(13,23,23,.55) 58%,rgba(13,23,23,.1) 82%,rgba(13,23,23,.2) 100%),linear-gradient(180deg,rgba(13,23,23,.62) 0%,rgba(13,23,23,0) 24%,rgba(13,23,23,0) 68%,rgba(13,23,23,.8) 100%)} .hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:24px;align-items:end} .hero-texto{align-self:center;padding-bottom:clamp(40px,5vw,72px)} .hero-figura{position:relative;align-self:end;justify-self:start} .hero-figura img{width:min(124%,calc(100% + max(16px,(100vw - 1200px) / 2) - 16px));max-width:none;height:auto} .hero-nome{position:absolute;left:0;bottom:clamp(20px,3.6vw,52px);margin:0;display:flex;flex-direction:column;gap:4px;padding:12px 18px 14px;background:#103D38;border-bottom:4px solid #D6A642;border-radius:4px 4px 0 0;box-shadow:0 18px 40px -20px rgba(0,0,0,.75)} .hero-nome b{font-weight:800;font-size:clamp(16px,1.3vw,19px);line-height:1.15;letter-spacing:-.01em;color:#F2E8D2} .hero-nome span{font-size:13px;line-height:1.35;font-weight:600;color:#F2E8D2} .foto-zoom{overflow:hidden;border-radius:8px} .foto-zoom img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)} .foto-zoom:hover img{transform:scale(1.04)} .ano-gigante{color:transparent;-webkit-text-stroke:2px #CDBF9F;pointer-events:none;user-select:none} .plano-fundo{transform:rotate(4deg) translate(14px,10px);transition:transform .6s cubic-bezier(.2,.7,.2,1)} .plano-doc{transform:rotate(-2deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)} .plano-pilha:hover .plano-doc{transform:rotate(0deg) translateY(-6px)} .plano-pilha:hover .plano-fundo{transform:rotate(6deg) translate(22px,14px)} .lote{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 14px 9px 9px;border-radius:4px;box-shadow:inset 0 0 0 1px #2E5A54;color:#F2E8D2} .lote-n{font-weight:700;font-size:12px;letter-spacing:.1em;padding:6px 9px;border-radius:4px;box-shadow:inset 0 0 0 1px #7FA09A;white-space:nowrap} .lote-d{font-size:14px;font-weight:500;color:#B8C7C1} .lote-p{font-weight:800;font-size:18px;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap} .lote-agora{background:#0D1717;box-shadow:inset 0 0 0 2px #D6A642} .lote-agora .lote-n{background:#D6A642;color:#0D1717;box-shadow:none} .lote-agora .lote-d{color:#F2E8D2} .lote-agora .lote-p{color:#D6A642} .lote-encerrado .lote-n{background:#1A4F48;color:#B8C7C1;box-shadow:none} .lote-encerrado .lote-p{color:#B8C7C1;text-decoration:line-through;text-decoration-thickness:2px} .lote-proximo .lote-n{color:#8FA6A0;box-shadow:inset 0 0 0 1px #2E5A54} .lote-proximo .lote-d,.lote-proximo .lote-p{color:#8FA6A0} .cadeado{display:inline-block;vertical-align:-2px;margin-right:6px} .faq{border-bottom:1px solid #CDBF9F} .faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-weight:700;font-size:clamp(16px,1.3vw,18px);line-height:1.4;letter-spacing:-.005em;color:#0D1717} .faq summary::-webkit-details-marker{display:none} .faq-mais{flex:none;width:40px;height:40px;border-radius:99px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1.5px #6B7A76;color:#0D1717;transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .3s ease,box-shadow .3s ease} .faq summary:hover .faq-mais{background:#E6D8B8} .faq[open] .faq-mais{transform:rotate(45deg);background:#D6A642;box-shadow:none} .faq-resp{margin:0;padding:0 56px 26px 0;max-width:42em;font-size:16px;line-height:26px;color:#4A5E5A} .final-foto{position:relative;height:clamp(340px,44vw,640px)} @media (min-width:901px){.faq-cabeca{position:sticky;top:96px}} @keyframes pl-sobe{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} @keyframes pl-surge{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}} @keyframes pl-horizonte{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes pl-brilho{0%{transform:translateX(-120%)}24%,100%{transform:translateX(120%)}} .anim-1{animation:pl-sobe .8s cubic-bezier(.2,.7,.2,1) .05s both} .anim-2{animation:pl-sobe .8s cubic-bezier(.2,.7,.2,1) .14s both} .anim-3{animation:pl-sobe .9s cubic-bezier(.2,.7,.2,1) .22s both} .anim-4{animation:pl-sobe .9s cubic-bezier(.2,.7,.2,1) .32s both} .anim-5{animation:pl-sobe .9s cubic-bezier(.2,.7,.2,1) .42s both} .anim-figura{animation:pl-surge 1.1s cubic-bezier(.2,.7,.2,1) .18s both} .anim-linha{transform-origin:left center;animation:pl-horizonte 1.4s cubic-bezier(.65,0,.35,1) .45s both} @supports (animation-timeline: view()){ .rv{animation:pl-sobe linear both;animation-timeline:view();animation-range:entry 0% entry 100%} .rv-linha{transform-origin:left center;animation:pl-horizonte linear both;animation-timeline:view();animation-range:entry 0% entry 100%} } .dep-video{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0D1717;color:#0D1717;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent} .dep-video img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)} .dep-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,23,23,0) 40%,rgba(13,23,23,.5) 100%);pointer-events:none} .dep-play{position:absolute;left:16px;bottom:16px;z-index:1;width:52px;height:52px;border-radius:99px;background:#D6A642;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px rgba(214,166,66,.3),0 12px 26px -12px rgba(13,23,23,.85);transition:transform .25s cubic-bezier(.2,.7,.2,1)} .dep-play svg{margin-left:3px} .dep-video:hover img{transform:scale(1.035)} .dep-video:hover .dep-play,.dep-video:focus-visible .dep-play{transform:scale(1.08)} .dep-video:focus-visible{outline:3px solid #D6A642;outline-offset:-3px} .dep-frame{position:relative;aspect-ratio:16/9;background:#0D1717} .dep-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .pl-modal{position:fixed;inset:0;z-index:200;display:flex;padding:16px;background:rgba(7,14,14,.8);overflow-y:auto;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} dialog.pl-modal{width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;color:inherit} dialog.pl-modal:not([open]){display:none} dialog.pl-modal::backdrop{background:transparent} html.pl-travado{overflow:hidden} .pl .pl-btn{-webkit-tap-highlight-color:transparent} .pl-modal-caixa{position:relative;box-sizing:border-box;width:min(100%,460px);margin:auto;padding:36px 32px 28px;border-radius:12px;background:#F2E8D2;color:#0D1717;box-shadow:0 40px 90px -30px rgba(0,0,0,.75);animation:pl-sobe .45s cubic-bezier(.2,.7,.2,1) both} .pl-modal-fechar{position:absolute;top:10px;right:10px;width:44px;height:44px;padding:0;border:0;border-radius:99px;background:transparent;color:#4A5E5A;display:flex;align-items:center;justify-content:center;cursor:pointer} .pl-modal-fechar:hover{background:#E6D8B8;color:#0D1717} .pl-modal-fechar:focus-visible{outline:3px solid #103D38;outline-offset:2px} .pl-form{display:flex;flex-direction:column;gap:16px;margin-top:24px} .pl-campo{display:flex;flex-direction:column;gap:6px} .pl-campo label{font-weight:700;font-size:14px;line-height:1.3;color:#0D1717} .pl-campo input{box-sizing:border-box;width:100%;min-height:52px;padding:0 16px;border:1.5px solid #CDBF9F;border-radius:8px;background:#FFFFFF;color:#0D1717;font-family:inherit;font-size:16px;font-weight:500;transition:border-color .2s ease,box-shadow .2s ease} .pl-campo input::placeholder{color:#6B7A76;opacity:1} .pl-campo input:focus{outline:none;border-color:#103D38;box-shadow:0 0 0 3px rgba(16,61,56,.2)} .pl-campo input[aria-invalid="true"]{border-color:#B42318} .pl-campo input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(180,35,24,.18)} .pl-campo-erro{margin:0;font-size:13px;line-height:18px;font-weight:600;color:#B42318} .pl-campo-erro:empty{display:none} .pl-form-nota{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;line-height:1.4;font-weight:600;color:#4A5E5A} .pl-form-lgpd{font-size:12px;line-height:17px;color:#4A5E5A;text-align:center;text-wrap:balance} @media (max-width:560px){ .pl-modal{padding:10px} .pl-modal-caixa{padding:30px 20px 22px} } @media (max-width:900px){ .to-tempo{flex-wrap:wrap;justify-content:center;gap:8px} .to-rotulo{font-size:13px} .hero-veu{background:linear-gradient(180deg,rgba(13,23,23,.95) 0%,rgba(13,23,23,.9) 46%,rgba(13,23,23,.4) 76%,rgba(13,23,23,.75) 100%)} .hero-bg{object-position:92% 30%!important} .hero-grid{grid-template-columns:minmax(0,1fr);gap:12px} .hero-texto{align-self:auto;padding-bottom:8px} .hero-figura{justify-self:center;width:min(100%,460px)} .hero-figura img{width:100%} } @media (max-width:560px){ .faq-resp{padding-right:0} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .pl *,.pl *::before,.pl *::after{animation:none!important;transition:none!important} } .pl [hidden]{display:none!important} /* ------------------------------------------------------------------ Acrescentado na hospedagem (lp.aquasucesso.com.br/imersao) ------------------------------------------------------------------- */ /* Botões que levam ao pagamento: VERDES, regra do Raphael para todo checkout (mesmo verde do /pap). Selos e detalhes seguem na mostarda. */ .pl-btn[data-checkout], .pl-form .pl-btn[type="submit"] { background: #16a34a; color: #FFFFFF; } .pl-btn[data-checkout]:hover, .pl-form .pl-btn[type="submit"]:hover { background: #15803d; filter: none; } .pl-form .pl-btn[type="submit"][aria-busy="true"] { background: #15803d; cursor: progress; } /* WhatsApp com código do país (DDI), mesmo esquema do site institucional: o