/* ===================================================== Landing Pages Individuais — Planos Corporativos Complementa custom.css com estilos por plano ===================================================== */ /* ---- Paleta por plano (aplicada via classe no ) ---- */ /* Maré Suave — Azul */ .plano-suave { --plano-primary: #0d6efd; --plano-primary-light: #cfe2ff; --plano-primary-dark: #084298; --plano-gradient: linear-gradient(135deg, #0d6efd, #084298); --plano-badge-bg: #cfe2ff; --plano-badge-text: #084298; } /* Maré Boa — Verde/Teal */ .plano-boa { --plano-primary: #0f6e56; --plano-primary-light: #d1e7dd; --plano-primary-dark: #0a4f3e; --plano-gradient: linear-gradient(135deg, #0f6e56, #198754); --plano-badge-bg: #d1e7dd; --plano-badge-text: #0f6e56; } /* Maré Cheia — Laranja/Dourado */ .plano-cheia { --plano-primary: #f57c1f; --plano-primary-light: #fff3cd; --plano-primary-dark: #c55a10; --plano-gradient: linear-gradient(135deg, #f57c1f, #e06c14); --plano-badge-bg: #fff3cd; --plano-badge-text: #c55a10; } /* ---- Hero override por plano ---- */ .plano-suave .hero-section::before { background: linear-gradient(135deg, rgba(13,110,253,0.55), rgba(8,66,152,0.75)); } .plano-boa .hero-section::before { background: linear-gradient(135deg, rgba(15,110,86,0.55), rgba(10,79,62,0.75)); } .plano-cheia .hero-section::before { background: linear-gradient(135deg, rgba(245,124,31,0.45), rgba(197,90,16,0.7)); } /* ---- Badge do plano no hero ---- */ .plano-badge-hero { display: inline-block; padding: 0.5rem 1.5rem; border-radius: 50px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; background: var(--plano-badge-bg); color: var(--plano-badge-text); margin-bottom: 1rem; } /* ---- Card detalhes do plano ---- */ .card-plano-destaque { border: 3px solid var(--plano-primary); border-radius: 16px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-plano-destaque:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); } .card-plano-destaque .card-header { background: var(--plano-gradient); color: #fff; padding: 1.5rem; text-align: center; border: none; } .card-plano-destaque .card-header h3 { margin: 0; font-weight: 800; font-size: 1.8rem; } .card-plano-destaque .card-header .plano-pescarias { font-size: 1.1rem; opacity: 0.9; margin-top: 0.25rem; } .card-plano-destaque .card-body { padding: 2rem; } /* Ícones na lista de benefícios do plano */ .plano-item-icon { color: var(--plano-primary); font-size: 1.1rem; min-width: 24px; } .plano-items-list li { padding: 0.4rem 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; } .plano-items-list { list-style: none; padding: 0; margin: 0; } /* Condições comerciais — badges */ .condicao-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: 12px; background: var(--plano-primary-light); color: var(--plano-primary-dark); font-weight: 600; font-size: 0.95rem; } .condicao-badge i { font-size: 1.2rem; } /* ---- Botão CTA do plano ---- */ .btn-plano-cta { background: var(--plano-gradient); border: none; color: #fff; padding: 1rem 2.5rem; font-size: 1.15rem; font-weight: 700; border-radius: 50px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-plano-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); color: #fff; filter: brightness(1.1); } .btn-plano-cta:active { transform: scale(0.98); } /* Animação pulsar por cor do plano */ .btn-plano-pulsar { animation: pulsar-plano 2s infinite; } @keyframes pulsar-plano { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--plano-primary) 50%, transparent); } 70% { box-shadow: 0 0 0 14px transparent; } 100%{ box-shadow: 0 0 0 0 transparent; } } /* Fallback para navegadores sem color-mix */ .plano-suave .btn-plano-pulsar { animation: pulsar-azul 2s infinite; } .plano-boa .btn-plano-pulsar { animation: pulsar-verde 2s infinite; } .plano-cheia .btn-plano-pulsar { animation: pulsar-laranja-p 2s infinite; } @keyframes pulsar-azul { 0% { box-shadow: 0 0 0 0 rgba(13,110,253,0.5); } 70% { box-shadow: 0 0 0 14px rgba(13,110,253,0); } 100%{ box-shadow: 0 0 0 0 rgba(13,110,253,0); } } @keyframes pulsar-verde { 0% { box-shadow: 0 0 0 0 rgba(15,110,86,0.5); } 70% { box-shadow: 0 0 0 14px rgba(15,110,86,0); } 100%{ box-shadow: 0 0 0 0 rgba(15,110,86,0); } } @keyframes pulsar-laranja-p { 0% { box-shadow: 0 0 0 0 rgba(245,124,31,0.5); } 70% { box-shadow: 0 0 0 14px rgba(245,124,31,0); } 100%{ box-shadow: 0 0 0 0 rgba(245,124,31,0); } } /* ---- Badge flutuante (Mais Popular / Premium) ---- */ .badge-destaque { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 0.4rem 1.5rem; border-radius: 50px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; z-index: 5; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .badge-popular { background: var(--plano-primary); color: #fff; } .badge-premium { background: linear-gradient(135deg, #f57c1f, #ffc107); color: #fff; } /* ---- Seção "Para Quem É" ---- */ .para-quem-card { border: none; border-radius: 16px; padding: 2rem; background: linear-gradient(135deg, var(--plano-primary-light), #fff); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } .para-quem-card .icon-circle { width: 60px; height: 60px; border-radius: 50%; background: var(--plano-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } /* ---- Mini comparativo ---- */ .mini-comparativo { background: #f8f9fa; border-radius: 12px; padding: 1.5rem; margin-top: 2rem; } .mini-comparativo .outro-plano { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-radius: 8px; background: #fff; margin-bottom: 0.5rem; transition: all 0.2s ease; text-decoration: none; color: inherit; border: 1px solid #e9ecef; } .mini-comparativo .outro-plano:hover { border-color: var(--plano-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transform: translateX(4px); } .mini-comparativo .outro-plano:last-child { margin-bottom: 0; } /* ---- CTA Final adaptado ---- */ .cta-box-plano { background: var(--plano-gradient); border-radius: 16px; padding: 3rem; } /* ---- Seção plano — Header da seção ---- */ .secao-plano-header { color: var(--plano-primary); } /* ---- Divisor decorativo ---- */ .divisor-plano { width: 80px; height: 4px; background: var(--plano-gradient); border-radius: 2px; margin: 0 auto 1.5rem; } /* ---- Responsivo ---- */ @media (max-width: 768px) { .card-plano-destaque .card-body { padding: 1.25rem; } .btn-plano-cta { width: 100%; justify-content: center; font-size: 1.05rem; padding: 0.9rem 1.5rem; } .condicao-badge { font-size: 0.85rem; padding: 0.6rem 1rem; } .para-quem-card { padding: 1.25rem; } .cta-box-plano { padding: 2rem 1.25rem; } .badge-destaque { font-size: 0.7rem; padding: 0.35rem 1rem; } } /* ---- Indicação do afiliado ---- */ .ref-afiliado { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.5rem; } /* ---- Seções de Experiência (fotos-demo) — Card com imagem ao lado ---- */ .experiencia-card { border-radius: 16px; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); background: #fff; } .experiencia-card img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; } .experiencia-card .experiencia-texto { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; } .experiencia-card .experiencia-texto h3 { font-weight: 800; color: var(--plano-primary, #005f9e); margin-bottom: 1rem; } .experiencia-card .experiencia-texto p { color: #6c757d; font-size: 1.05rem; line-height: 1.7; margin-bottom: 0; } .experiencia-card .experiencia-texto .experiencia-icone { width: 50px; height: 50px; border-radius: 12px; background: var(--plano-primary-light, #cfe2ff); color: var(--plano-primary, #005f9e); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1rem; } @media (max-width: 768px) { .experiencia-card .experiencia-texto { padding: 1.5rem; } }