/* ========================== */ /* ========== TOKENS ======== */ /* ========================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap'); :root{--primary-color:#06162b;--secondary-color:#A4161A;--background-white:#FFFFFF;--text-dark:#212529;--text-light:#f0f0f0;--muted:#cccccc;--header-height:70px;} /* Classe utilitária para esconder elementos apenas visualmente (screen reader only). Colocamos o H1 principal do site com essa classe para melhorar SEO sem afetar o layout ou experiência do usuário. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} /* ========================== */ /* ========== BASE ========== */ /* ========================== */ *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{font-family:'Poppins',sans-serif;line-height:1.8;background:var(--background-white);color:var(--text-dark);font-size:16px} .container{max-width:1100px;margin:auto;padding:0 20px} h1,h2{font-size:2.4rem;font-weight:700;margin-bottom:14px;text-align:center;color:var(--primary-color)} .section-description{max-width:760px;margin:8px auto 48px;text-align:center;color:var(--text-dark)} main{display:block} /* HEADER */ .main-header{position:sticky;top:0;z-index:1000;background:var(--primary-color);height:var(--header-height);box-shadow:0 2px 10px rgba(0,0,0,.08)} .header-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:var(--header-height);gap:12px} /* Logo maior e colada à esquerda */ .logo-link{justify-self:start;display:inline-flex;align-items:center} .header-logo{max-height:55px;width:auto} /* Menu desktop */ .main-nav{justify-self:center} .main-nav ul{list-style:none;display:flex;align-items:center;justify-content:center;gap:28px} .main-nav a{color:#fff;text-decoration:none;font-weight:500;letter-spacing:.02em;padding:6px 2px;opacity:.9;position:relative;transition:opacity .2s ease} .main-nav a:hover,.main-nav a:focus{opacity:1} .main-nav a::after{content:'';position:absolute;left:0;bottom:-6px;height:3px;width:0;background:var(--secondary-color);transition:width .2s ease} .main-nav a:hover::after,.main-nav a.active::after{width:100%} /* Botão hamburguer no canto direito */ .nav-toggle{display:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;border-radius:8px;position:relative;justify-self:end} .nav-toggle-bar,.nav-toggle-bar::before,.nav-toggle-bar::after{position:absolute;left:8px;right:8px;height:2px;background:#fff;content:'';transition:transform .25s ease,opacity .25s ease,top .25s ease,bottom .25s ease} .nav-toggle-bar{top:50%;transform:translateY(-50%)} .nav-toggle-bar::before{top:-10px} .nav-toggle-bar::after{bottom:-10px} .main-header.open .nav-toggle-bar{background:transparent} .main-header.open .nav-toggle-bar::before{top:0;transform:rotate(45deg)} .main-header.open .nav-toggle-bar::after{bottom:0;transform:rotate(-45deg)} /* Mobile */ @media(max-width:992px){ .nav-toggle{display:inline-flex;align-items:center;justify-content:center} .main-nav{display:none;position:fixed;top:var(--header-height);left:0;right:0;background:var(--primary-color);padding:16px 20px 24px;box-shadow:0 8px 20px rgba(0,0,0,.12)} .main-header.open .main-nav{display:block} .main-nav ul{flex-direction:column;align-items:stretch;gap:6px} .main-nav a{display:block;padding:12px 4px;font-size:1.05rem} } /* ========================== */ /* ========= HERO =========== */ /* ========================== */ .hero-section{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;height:90vh;background-image:url('../midia/fundo.webp');background-size:cover;background-position:center} .hero-content{position:relative;width:100%;height:100%} .animated-tagline{position:absolute;left:50%;transform:translateX(-50%);top:12%;width:100%;text-align:center;z-index:2} .animated-tagline h1{font-family:'Dancing Script',cursive;font-weight:700;font-size:3rem;color:var(--text-dark);text-shadow:1px 1px 3px rgba(255,255,255,.7)} #animated-word{font-weight:700;display:inline-block;transition:opacity .5s,transform .5s} #animated-word.fade-out{opacity:0;transform:translateY(20px)} .hero-logo{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);max-width:440px;width:90%;filter:drop-shadow(0 8px 20px rgba(0,0,0,.25));z-index:1} .hero-character{position:absolute;bottom:0;max-height:330px;width:auto;z-index:0} .hero-character.left{left:40px} .hero-character.right{right:40px} /* ========================== */ /* ====== SEÇÕES BASE ======= */ /* ========================== */ .content-section{padding:70px 0;background:var(--background-white);color:var(--text-dark)} .content-section h2{color:var(--primary-color)} .section-dark{background:var(--primary-color);color:var(--text-light)} .section-dark h2{color:#fff} .section-dark .section-description{color:var(--muted)} /* ========================== */ /* ======= CARROSSEL ======== */ /* ========================== */ .slider-frame{max-width:900px;margin:0 auto;background:#dee2e6;border:1px solid #e9ecef;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.07);padding-top:35px;position:relative} .slider-frame::before{content:'';position:absolute;top:12px;left:15px;width:12px;height:12px;border-radius:50%;background:#fd6458;box-shadow:20px 0 0 #ffbf2b,40px 0 0 #24cc3d;z-index:3} .material-slider{width:100%;height:480px;border-bottom-left-radius:10px;border-bottom-right-radius:10px} .swiper-slide img{display:block;width:100%;height:auto;object-fit:contain} .swiper-button-next,.swiper-button-prev{color:var(--primary-color)} .section-dark .swiper-button-next,.section-dark .swiper-button-prev{color:#07203b} .swiper-pagination-bullet-active{background:var(--primary-color)} .section-dark .swiper-pagination-bullet-active{background:#07203b} @media(max-width:768px){ .material-slider{height:auto;max-height:260px} /* reduz altura no mobile */ .swiper-slide img{max-height:260px;margin:auto} } /* ========================== */ /* ========= VÍDEO ========= */ /* ========================== */ .video-container{border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.1);overflow:hidden;position:relative;padding-bottom:56.25%;height:0} .video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%} /* ========================== */ /* ===== SEÇÃO FUNDADOR ===== */ /* ========================== */ #fundador.content-section{padding:20px 0 0 0} #fundador h2{margin-bottom:20px} .founder-container{display:flex;align-items:stretch;gap:32px} .founder-bio{flex:1;display:flex;align-items:center;background:#8b1515;border-radius:12px;padding:28px;margin:0 20px 30px 20px;box-shadow:0 8px 20px rgba(0,0,0,.25)} .founder-bio .copy{font-family:'Playfair Display',serif;font-size:1.15rem;line-height:1.9;color:#fff;max-width:700px} .founder-bio .copy p{margin:0 0 14px 0} .founder-bio .copy p:last-child{margin-bottom:0} .founder-bio .copy strong{font-weight:700;color:#ffdddd} .founder-photo-wrapper{flex:1;display:flex;justify-content:center;align-items:flex-end} .founder-photo-wrapper img{display:block;max-width:100%;max-height:880px;height:auto;align-self:flex-end;filter:drop-shadow(0 16px 32px rgba(0,0,0,.3));} /* ========================== */ /* ===== RESPONSIVIDADE ===== */ /* ========================== */ @media(max-width:900px){ .founder-container{flex-direction:column;text-align:center;gap:2} /* remove o espaço entre os blocos */ .founder-bio{padding:14px;margin:0;border-radius:8px} /* sem margem extra */ .founder-bio .copy{font-size:0.95rem;line-height:1.6} .founder-photo-wrapper{min-height:auto;margin:0;padding:0} /* remove espaço forçado */ .founder-photo-wrapper img{max-height:440px;margin:0} /* personagem continua grande */ } /* ========================== */ /* ========= CTA/FOOTER ===== */ /* ========================== */ .cta-button{display:inline-block;background:var(--primary-color);color:#fff;padding:14px 36px;border-radius:50px;text-decoration:none;font-weight:600;box-shadow:0 4px 15px rgba(13,44,84,.2);transition:.3s} .cta-button:hover{background:var(--secondary-color);transform:translateY(-4px)} #agendamento .container{text-align:center} .main-footer{background:var(--primary-color);color:var(--text-light);text-align:center;padding:32px 0} /* ========================== */ /* ======= BREAKPOINTS ===== */ /* ========================== */ @media (max-width:768px){.hero-section{height:62vh}.animated-tagline{top:8%}.animated-tagline h1{font-size:2rem}.hero-logo{max-width:260px;top:50%}.hero-character{display:none}h2{font-size:2rem}} /* ========================================== */ /* ===== SEÇÃO DE VALORES (ESTILO ISOLADO) ===== */ /* ========================================== */ /* --- Configurações Gerais da Seção --- */ #valores { background-color: white; font-family: 'Poppins', sans-serif; padding: 70px 0; /* Adicione esta linha */ } #valores h2 { color: var(--secondary-color, #A4161A); font-size: 2.8rem; font-weight: 800; margin-bottom: 1rem; } #valores .section-description { font-size: 1.1rem; max-width: 700px; margin: 0 auto 50px auto; color: #6c757d; } #valores .pv-wrapper { background: #fff; border-radius: 24px; padding: 32px; border: 1px solid #e7eef7; box-shadow: 0 16px 40px rgba(13, 44, 84, 0.08); } #valores .content-section {padding:20px} /* --- Preço por Aula (em Destaque) --- */ #valores .pv-price-hero { text-align: center; margin-bottom: 8px; } #valores .pv-price-hero .pv-label { font-weight: 700; letter-spacing: 1px; color: #6c757d; font-size: 14px; text-transform: uppercase; } #valores .pv-price-hero .pv-price { font-size: 4rem; font-weight: 800; color: var(--primary-color, #06162b); line-height: 1.2; } #valores .pv-subtitle { margin: 16px 0 24px; text-align: center; font-weight: 700; color: var(--primary-color, #06162b); font-size: 18px; } /* --- Carrossel de Planos --- */ #valores .pv-carousel { position: relative; } #valores .pv-scroller { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 30px; margin: 0 -20px; -ms-overflow-style: none; scrollbar-width: none; } #valores .pv-scroller::-webkit-scrollbar { display: none; } /* --- Cards dos Planos --- */ #valores .pv-card { flex: 0 0 90%; max-width: 380px; min-height: 400px; scroll-snap-align: center; background: linear-gradient(145deg, #0d2c54 0%, #081f3d 100%); color: #ffffff; border-radius: 24px; padding: 28px; position: relative; display: flex; flex-direction: column; transition: transform 0.3s ease; } #valores .pv-card:hover { transform: translateY(-5px); } @media (min-width: 500px) { #valores .pv-card { flex-basis: 380px; } } /* Conteúdo do Card */ #valores .pv-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 24px; } #valores .pv-title .t { font-size: 26px; font-weight: 700; } #valores .pv-badge { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: 999px; } #valores .pv-burst { position: absolute; top: -15px; right: 20px; background: #ffc107; color: #212529; font-weight: 800; padding: 8px 14px; border-radius: 12px; transform: rotate(6deg); font-size: 16px;} #valores .pv-row { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 16px; } #valores .pv-row .k { color: #a9c2e6; } #valores .pv-row .pv-price { font-size: 18px; font-weight: 700; } #valores .pv-old { text-decoration: line-through; color: #a9c2e6; opacity: .8; margin-right: 12px; font-weight: 600; font-size: 16px; } #valores .pv-total { margin-top: auto; padding-top: 20px; text-align: right; } #valores .pv-total div:first-child { font-weight: 600; font-size: 18px; color: #a9c2e6; } #valores .pv-total .pv-price { font-size: 36px; font-weight: 800; color: #fff; } #valores .pv-total .pv-old { font-size: 20px; } #valores .pv-pair-total { margin-top: 12px; font-size: 14px; text-align: right; color: #a9c2e6; } /* --- Setas do Carrossel --- */ #valores .pv-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); cursor: pointer; user-select: none; transition: all 0.2s ease; z-index: 10; color: #081f3d; font-size: 1.5rem; font-weight: bold; display: grid; place-items: center; } #valores .pv-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.05); } #valores .pv-arrow:active { transform: translateY(-50%) scale(.95); } #valores .pv-arrow span { display: none; } #valores .pv-arrow::before { font-family: monospace; } #valores .pv-prev { left: -24px; } #valores .pv-prev::before { content: '<'; } #valores .pv-next { right: -24px; } #valores .pv-next::before { content: '>'; } /* --- Taxa de Material (NOVO LAYOUT) --- */ #valores .pv-fee { margin-top: 32px; background: #fff; border: 1px solid #e7eef7; border-radius: 16px; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } #valores .pv-fee .icon-wrapper { color: var(--primary-color, #06162b); } #valores .pv-fee .text-wrapper { text-align: left; } #valores .pv-fee .text-wrapper .t { font-weight: 700; font-size: 18px; color: var(--primary-color, #06162b); } #valores .pv-fee .text-wrapper .pv-muted { color: #6c757d; font-size: 14px; margin-top: 4px; } #valores .pv-fee .v { font-size: 24px; font-weight: 800; color: var(--primary-color, #06162b); white-space: nowrap; } /* --- Itens Inclusos --- */ #valores .pv-inclusive { margin-top: 24px; background: #f0f6ff; border: 1px dashed #dbe6fb; border-radius: 16px; padding: 24px; } #valores .pv-inclusive .t { font-weight: 700; color: var(--primary-color, #06162b); margin-bottom: 16px; font-size: 18px; } #valores .pv-inclusive ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } #valores .pv-inclusive li { display: flex; align-items: center; gap: 10px; color: #212529; } #valores .pv-inclusive li::before { content: '✔'; color: var(--primary-color, #06162b); font-weight: bold; } /* --- Botão de Contato (CTA) --- */ #valores .pv-contact { margin-top: 40px; text-align: center; } #valores .whatsapp-button { display: inline-flex; align-items: center; gap: 12px; background-color: #25D366; color: white; padding: 14px 28px; border-radius: 50px; text-decoration: none; font-weight: 600; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; } #valores .whatsapp-button:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4); } #valores .whatsapp-icon { width: 24px; height: 24px; } /* --- Responsividade --- */ @media (max-width: 768px) { #valores .pv-wrapper { padding: 24px; } #valores h2 { font-size: 2.2rem; } #valores .pv-price-hero .pv-price { font-size: 3rem; } /* Taxa de material no mobile (volta ao layout vertical) */ #valores .pv-fee { flex-direction: column; align-items: center; text-align: center; gap: 12px; } #valores .pv-fee .text-wrapper { text-align: center; } } @media (max-width: 600px) { #valores .pv-arrow { display: none; } #valores .pv-wrapper { padding: 20px 16px; } /* Ajusta o padding do wrapper */ /* AQUI ESTÁ A MUDANÇA PRINCIPAL */ #valores .pv-scroller { margin: 0; /* Remove a margem negativa */ padding: 0 20px; /* Adiciona padding para as laterais do scroller */ justify-content: flex-start; /* Garante que o scroll comece do início */ } /* Largura do card para celular, permite um pouco de espaço nas laterais */ #valores .pv-card { flex: 0 0 85%; /* Use uma porcentagem menor aqui */ } } .pv-photo-container { margin: 40px 0; text-align: center; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.15); background: linear-gradient(135deg, #A4161A 0%, #06162b 100%); padding: 10px; } .pv-photo-container img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 0 auto; } @media (max-width: 768px) { #valores .pv-wrapper { padding: 24px; } #valores h2 { font-size: 2.2rem; } #valores .pv-price-hero .pv-price { font-size: 3rem; } #valores .pv-fee { flex-direction: column; align-items: center; text-align: center; gap: 12px; } #valores .pv-fee .text-wrapper { text-align: center; } } @media (max-width: 600px) { #valores .pv-wrapper { padding: 20px 14px; } #valores .pv-scroller { padding: 12px; gap: 14px; } #valores .pv-card { flex: 0 0 72%; min-height: 300px; padding: 84px 18px 20px; } #valores .pv-burst { top: 10px; right: 12px; font-size: 16px; padding: 8px 14px; } #valores .pv-prev { left: 2px; } #valores .pv-next { right: 2px; } } /* ============ SOBRE (Timeline) ============ */ /* SOBRE – Timeline corrigida (desktop lado a lado; mobile texto acima e imagem abaixo; espaçamentos; bolinha oculta no mobile) */ /* SOBRE – base */ #sobre{padding:80px 0;background:#f8f9fa;} #sobre .about-wrapper{background:#fff;border:1px solid #e7eef7;border-radius:24px;padding:32px;box-shadow:0 20px 50px rgba(13,44,84,.07);} #sobre .about-hero{text-align:center;margin-bottom:40px;} #sobre .about-hero h2{color:#A4161A;font-size:2.6rem;font-weight:800;margin:0 0 8px;} #sobre .about-hero .about-sub{color:#52606d;font-size:1.1rem;max-width:700px;margin:0 auto;} #sobre .timeline{position:relative;margin:20px auto 0;max-width:980px;} /* Desktop: linha central + 2 colunas alternando */ @media (min-width:900px){#sobre .timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;background:#e9eef7;border-radius:2px;transform:translateX(-50%);} } #sobre .tl-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);gap:0;align-items:center;margin:64px 0;opacity:0;transform:translateY(30px) scale(.98);transition:all .8s cubic-bezier(.165,.84,.44,1);} #sobre .tl-item.reveal-in{opacity:1;transform:translateY(0) scale(1);} #sobre .tl-col{min-width:0;} #sobre .tl-item.left .tl-content{grid-column:1;text-align:left;} #sobre .tl-item.left .tl-media{grid-column:3;} #sobre .tl-item.right .tl-content{grid-column:3;text-align:right;} #sobre .tl-item.right .tl-media{grid-column:1;} #sobre .tl-content{position:relative;padding:0 20px;} #sobre .tl-content::before{content:'';position:absolute;top:20px;width:0;height:0;border-style:solid;} #sobre .tl-item.left .tl-content::before{left:0;border-width:8px 10px 8px 0;border-color:transparent #fff transparent transparent;} #sobre .tl-item.right .tl-content::before{right:0;border-width:8px 0 8px 10px;border-color:transparent transparent transparent #fff;} #sobre .tl-figure{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 16px 40px rgba(6,22,43,.12);border:1px solid #e7eef7;transition:transform .4s ease,box-shadow .4s ease;} #sobre .tl-figure:hover{transform:scale(1.03);box-shadow:0 20px 50px rgba(6,22,43,.18);} #sobre .tl-figure img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;max-height:480px;} #sobre .tl-year{color:#A4161A;font-weight:700;font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px;} #sobre .tl-title{margin:0;font-size:1.8rem;font-weight:700;color:#06162b;} #sobre .tl-body p{color:#4A5568;line-height:1.8;margin:12px 0 0;font-size:1.05rem;} #sobre .tl-node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;background:#A4161A;border:4px solid #fff;border-radius:50%;box-shadow:0 0 0 5px rgba(164,22,26,.2);z-index:1;animation:pulseNode 2s infinite cubic-bezier(.66,0,0,1);} @keyframes pulseNode{0%,100%{box-shadow:0 0 0 5px rgba(164,22,26,.2);}50%{box-shadow:0 0 0 10px rgba(164,22,26,0);}} /* Mobile: texto em cima, imagem embaixo; sem linha/bolinha; separador */ @media (max-width:768px){#sobre{padding:48px 0;}#sobre .about-wrapper{padding:22px;}#sobre .timeline::before{display:none;}#sobre .tl-node{display:none;}#sobre .tl-item{display:block;margin:40px 0 56px;}#sobre .tl-item .tl-content{padding:0 4px 10px;text-align:left;}#sobre .tl-item .tl-media{margin-top:10px;}#sobre .tl-content::before{display:none;}#sobre .tl-figure{border-radius:16px;box-shadow:0 12px 28px rgba(6,22,43,.12);}#sobre .tl-figure img{width:100%;height:auto;aspect-ratio:1/1;max-height:none;}#sobre .tl-title{font-size:1.35rem;}#sobre .tl-body p{font-size:1rem;line-height:1.75;white-space:normal;word-break:normal;overflow-wrap:break-word;}#sobre .tl-item:not(:last-child)::after{content:'';display:block;height:1px;background:linear-gradient(90deg,transparent,#e7eef7 25%,#e7eef7 75%,transparent);margin:18px 4px 0;} } @media (max-width:768px){#sobre .tl-item {display: flex !important;flex-direction: column !important;}#sobre .tl-item .tl-content {order: 1;}#sobre .tl-item .tl-media {order: 2;margin-top: 10px;}} /* ========================================================================== METODOLOGIA - REFINED STYLES ========================================================================== */ /* ========================================================================== METODOLOGIA - ESTILOS COMPLETOS (COM CARDS COLORIDOS) ========================================================================== */ /* -- Base da Seção -- */ #metodologia { padding: 80px 0; background-color: #f8f9fa; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* -- Container Principal (Wrapper) -- */ #metodologia .met-wrapper { background-color: #ffffff; border: 1px solid #e7eef7; border-radius: 24px; padding: 28px; box-shadow: 0 20px 60px rgba(13, 44, 84, 0.08); } /* -- Cabeçalho de Introdução (Hero) -- */ #metodologia .met-hero { text-align: center; max-width: 850px; margin: 0 auto 48px; } #metodologia .met-hero h2 { color: #A4161A; font-size: 2.8rem; font-weight: 800; margin-bottom: 16px; } #metodologia .met-hero .lead { font-size: 1.1rem; line-height: 1.9; margin: 16px auto; color: #344051; } #metodologia .met-hero .lead-list { list-style-type: '✓ '; margin: 24px auto; max-width: 500px; text-align: left; padding-left: 10px; color: #344051; } #metodologia .met-hero .lead-list li { padding-left: 12px; margin-bottom: 8px; } /* ========================================================================== Seções de Materiais ========================================================================== */ #metodologia .materials { max-width: 1100px; margin: 0 auto; display: grid; gap: 48px; } /* -- Card de cada Seção (Base) -- */ #metodologia .mat-section { display: grid; grid-template-columns: 1fr 0.8fr; gap: 48px; align-items: center; border-radius: 20px; padding: 40px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } #metodologia .mat-section:hover { transform: translateY(-8px); box-shadow: 0 24px 45px rgba(0, 0, 0, 0.2); } /* -- CORES ALTERNADAS PARA OS CARDS -- */ #metodologia .mat-section:nth-child(odd) { background-color: #0D2C4D; } /* Azul Escuro */ #metodologia .mat-section:nth-child(even) { background-color: #7A1D1D; } /* Vermelho Escuro */ /* -- Coluna de Conteúdo (Texto) -- */ #metodologia .mat-content { min-width: 0; } #metodologia .mat-content h3 { font-size: 2rem; font-weight: 700; color: #FFFFFF; margin: 0 0 16px; } #metodologia .mat-content p { margin: 16px 0; color: #DDE2E8; line-height: 1.8; font-size: 1.05rem; } /* -- Coluna de Mídia (Imagem) -- */ #metodologia .mat-media { min-width: 0; } #metodologia .mat-figure { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); } #metodologia .mat-figure img { display: block; width: 100%; height: auto;object-fit: cover; transition: transform 0.4s ease; } #metodologia .mat-section:hover .mat-figure img { transform: scale(1.05); } /* ========================================================================== Estilos dos Subtópicos (ADAPTADOS PARA FUNDO ESCURO) ========================================================================== */ /* -- Lista de Bullets -- */ #metodologia .mat-bullets { margin: 20px 0 10px; padding: 0; list-style: none; } #metodologia .mat-bullets li { position: relative; padding-left: 32px; margin-bottom: 12px; font-size: 1.05rem; line-height: 1.6; color: #DDE2E8; } #metodologia .mat-bullets li::before { content: ''; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } /* -- Lista de Chips -- */ #metodologia .mat-chips { margin: 20px 0 10px; padding: 0; list-style: none; display: grid; gap: 10px; } #metodologia .mat-chips li { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); padding: 12px 16px; border-radius: 12px; color: #DDE2E8; font-size: 0.95rem; } #metodologia .mat-chips li strong { color: #FFFFFF; } /* -- Seção com Cards Divididos (Split) -- */ #metodologia .mat-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; } #metodologia .split-card { display: flex; gap: 14px; align-items: flex-start; background-color: rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 16px; box-shadow: none; } #metodologia .split-card .ic { font-size: 24px; line-height: 1; margin-top: 2px; color: #FFFFFF; } #metodologia .split-card .t { font-weight: 700; color: #FFFFFF; margin-bottom: 4px; } #metodologia .split-card .d { color: #DDE2E8; font-size: 0.9rem; line-height: 1.6; } /* ========================================================================== Design Responsivo ========================================================================== */ @media (max-width: 1024px) { #metodologia .mat-section { grid-template-columns: 1fr 0.7fr; gap: 32px; padding: 32px; } } @media (max-width: 768px) { #metodologia { padding: 56px 0; } #metodologia .met-wrapper { padding: 28px; } #metodologia .met-hero h2 { font-size: 2.2rem; } #metodologia .mat-section { grid-template-columns: 1fr; gap: 24px; padding: 24px; } #metodologia .mat-media { grid-row: 1; } #metodologia .mat-content { grid-row: 2; } #metodologia .mat-split { grid-template-columns: 1fr; } } /* BASE */#metodologia{padding:80px 0;background-color:#f8f9fa;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}#metodologia .met-wrapper{background:#fff;border:1px solid #e7eef7;border-radius:24px;padding:28px;box-shadow:0 20px 60px rgba(13,44,84,.08)}#metodologia .met-hero{text-align:center;max-width:850px;margin:0 auto 48px}#metodologia .met-hero h2{color:#A4161A;font-size:2.8rem;font-weight:800;margin-bottom:16px}#metodologia .met-hero .lead{font-size:1.1rem;line-height:1.9;margin:16px auto;color:#344051}#metodologia .met-hero .lead-list{list-style-type:'✓ ';margin:24px auto;max-width:500px;text-align:left;padding-left:10px;color:#344051}#metodologia .met-hero .lead-list li{padding-left:12px;margin-bottom:8px} /* GRID */#metodologia .materials{max-width:1100px;margin:0 auto;display:grid;gap:48px}#metodologia .mat-section{display:grid;grid-template-columns:1fr .8fr;gap:48px;align-items:center;border-radius:20px;padding:40px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}#metodologia .mat-section:hover{transform:translateY(-8px);box-shadow:0 24px 45px rgba(0,0,0,.2)}#metodologia .mat-section:nth-child(odd){background:#0D2C4D}#metodologia .mat-section:nth-child(even){background:#7A1D1D}#metodologia .mat-section.right .mat-content{order:2}#metodologia .mat-section.right .mat-media{order:1} /* TEXTO/IMAGEM */#metodologia .mat-content h3{font-size:2rem;font-weight:700;color:#FFF;margin:0 0 16px}#metodologia .mat-content p{margin:16px 0;color:#DDE2E8;line-height:1.8;font-size:1.05rem}#metodologia .mat-figure{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.25)}#metodologia .mat-figure img{display:block;width:100%;height:auto;object-fit:cover;transition:transform .4s ease}#metodologia .mat-section:hover .mat-figure img{transform:scale(1.05)} /* LISTAS */#metodologia .mat-bullets{margin:20px 0 10px;padding:0;list-style:none}#metodologia .mat-bullets li{position:relative;padding-left:32px;margin-bottom:12px;font-size:1.05rem;line-height:1.6;color:#DDE2E8}#metodologia .mat-bullets li::before{content:'';position:absolute;left:0;top:3px;width:22px;height:22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center}#metodologia .mat-chips{margin:20px 0 10px;padding:0;list-style:none;display:grid;gap:10px}#metodologia .mat-chips li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:12px 16px;border-radius:12px;color:#DDE2E8;font-size:.95rem}#metodologia .mat-chips li strong{color:#FFF}#metodologia .mat-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}#metodologia .split-card{display:flex;gap:14px;align-items:flex-start;background:rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:16px}#metodologia .split-card .ic{font-size:24px;line-height:1;margin-top:2px;color:#FFF}#metodologia .split-card .t{font-weight:700;color:#FFF;margin-bottom:4px}#metodologia .split-card .d{color:#DDE2E8;font-size:.9rem;line-height:1.6} /* Wrapper para vídeos (YouTube e locais) */ #metodologia .video-wrapper{position:relative;width:100%;border-radius:16px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.25)} #metodologia .video-wrapper iframe, #metodologia .video-wrapper video{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block;object-fit:cover} /* ========================== */ /* SEÇÃO FINAL (Acesso Fácil) */ /* ========================== */ #metodologia .mat-final{ background:#2b2b2b; /* cinza claro */ padding:60px 20px; border-radius:16px; text-align:center; box-shadow:0 6px 20px rgba(0,0,0,.08); } #metodologia .mat-final-inner{max-width:800px;margin:0 auto;} #metodologia .mat-final h3{ font-size:2rem; font-weight:700; color:#ffffff; margin-bottom:16px; } #metodologia .mat-final p{ font-size:1.1rem; line-height:1.7; color:#f1f1f1; margin:0 auto; max-width:650px; }/* RESPONSIVO */@media(max-width:1024px){#metodologia .mat-section{grid-template-columns:1fr .7fr;gap:32px;padding:32px}}@media(max-width:768px){#metodologia{padding:56px 0}#metodologia .met-wrapper{padding:24px}#metodologia .met-hero h2{font-size:2.2rem}#metodologia .mat-section{grid-template-columns:1fr;gap:24px;padding:24px}#metodologia .mat-media{grid-row:2}#metodologia .mat-content{grid-row:1}#metodologia .mat-split{grid-template-columns:1fr}} /* ========================================================================== Plataforma ========================================================================== */ /* PLATAFORMA – container único por vez, vídeos alinhados e leves */ #plataforma{padding:80px 0;background:#f8f9fa;} #plataforma .plat-wrapper{background:#fff;border:1px solid #e7eef7;border-radius:24px;padding:28px 78px;box-shadow:0 20px 50px rgba(13,44,84,.07);} #plataforma .plat-hero{text-align:center;max-width:980px;margin:0 auto 20px;} #plataforma .plat-hero h2{color:#A4161A;font-size:2.6rem;font-weight:800;margin:0 0 10px;} #plataforma .plat-hero .lead{color:#334155;font-size:1.08rem;line-height:1.85;margin:10px auto;max-width:880px;} #plataforma .plat-carousel{position:relative;max-width:1080px;margin:0 auto;} #plataforma .plat-track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth;} #plataforma .plat-track::-webkit-scrollbar{display:none;} #plataforma .plat-slide{flex:0 0 100%;max-width:100%;scroll-snap-align:center;background:linear-gradient(180deg,#0d2c54 0%,#081f3d 100%);color:#fff;border-radius:20px;padding:22px 22px 18px;box-shadow:0 18px 48px rgba(6,22,43,.35);position:relative;isolation:isolate;margin:0 8px;} #plataforma .plat-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;} #plataforma .plat-chip{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:radial-gradient(100% 100% at 30% 10%,#ffe08a 0,#ffc107 50%,#ff9f1a 100%);color:#1a1a1a;font-weight:800;box-shadow:0 6px 16px rgba(255,193,7,.35);} #plataforma .plat-head h3{margin:0;font-weight:800;font-size:1.5rem;letter-spacing:.2px;} #plataforma .plat-body{margin:4px 0 12px;} #plataforma .plat-list{margin:0;padding-left:18px;display:block;} #plataforma .plat-list li{margin:6px 0;color:#d7e6ff;line-height:1.65;} #plataforma .plat-media{margin:8px 0 0;border-radius:16px;overflow:hidden;border:1px solid rgba(231,238,247,.2);box-shadow:0 12px 26px rgba(0,0,0,.28);background:#000;} #plataforma .plat-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;} #plataforma .plat-slide::after{content:'';position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,#67e8f9,transparent 60%);opacity:.12;z-index:-1;} #plataforma .plat-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:#dbdbdb;box-shadow:0 10px 24px rgba(0,0,0,.12);cursor:pointer;z-index:5;display:grid;place-items:center;transition:transform .2s ease;} #plataforma .plat-arrow:hover{transform:translateY(-50%) scale(1.05);} #plataforma .plat-arrow span{width:12px;height:12px;border:3px solid #0d2c54;border-left:0;border-top:0;display:inline-block;} #plataforma .plat-prev{left:-65px;} #plataforma .plat-prev span{transform:rotate(135deg);margin-left:6px;} #plataforma .plat-next{right:-65px;} #plataforma .plat-next span{transform:rotate(-45deg);margin-right:6px;} @media(max-width:980px){#plataforma{padding:56px 0;}#plataforma .plat-wrapper{padding:22px;}#plataforma .plat-hero h2{font-size:2.2rem;}#plataforma .plat-prev{left:-8px;}#plataforma .plat-next{right:-8px;}} @media(max-width:768px){#plataforma .plat-arrow{display:none;}#plataforma .plat-slide{border-radius:16px;margin:0;}} /* ===================================================================== */ /* ==================== COMPLEMENTOS (HOME) ============================ */ /* ===================================================================== */ /* Variável para o amarelo dos botões "Saiba mais" */ :root{ --accent-yellow:#ffc107; } .saiba-mais { color: #ffc107; /* amarelo */ font-weight: 600; margin-left: 6px; text-decoration: none; transition: color 0.3s ease; } .saiba-mais:hover { text-decoration: underline; color: #ffda47; } /* WhatsApp CTA (home e página de valores) */ .whatsapp-button{ display:inline-flex; align-items:center; gap:12px; background-color:#25D366; color:#fff; padding:14px 28px; border-radius:50px; text-decoration:none; font-weight:700; box-shadow:0 6px 18px rgba(37,211,102,.35); transition:transform .2s ease, box-shadow .2s ease; } .whatsapp-button:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(37,211,102,.45); } .whatsapp-icon{width:22px;height:22px;display:block} /* Teaser de Valores no HOME (não conflita com #valores da página) */ #valores-teaser .valores-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; margin-top:20px; } #valores-teaser .valores-text p{ color:#e9f1ff; /* texto claro porque a seção é .section-dark */ line-height:1.85; } #valores-teaser .valores-figure{ margin:0; border-radius:16px; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.15); } #valores-teaser .valores-figure img{ display:block;width:100%;height:auto;object-fit:cover; } @media(max-width:900px){ #valores-teaser .valores-grid{grid-template-columns:1fr;gap:18px} #valores-teaser .valores-figure{order:2} #valores-teaser .valores-text{order:1} } /* ========================== */ /* ====== SEÇÃO CINZA ESCURO no HOME ====== */ /* ========================== */ .section-dark-gray { background: #2b2b2b; color: #f1f1f1; } .section-dark-gray h2 { color: #fff; } .section-dark-gray .section-description { color: #ccc; } /* ===== Overlay de introdução Plataforma ===== */ #plat-intro-overlay{position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:9999;opacity:1;transition:opacity .5s ease} #plat-intro-overlay.leave{opacity:0;pointer-events:none} #plat-intro-video{max-width:100vw;max-height:100vh;object-fit:contain;display:block;background:#000} /* Botão de áudio (base, centro-inferior) */ #plat-intro-audio{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:56px;height:56px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#111;font:700 24px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.35);transition:transform .12s ease,background .2s ease} #plat-intro-audio:hover{background:#fff;transform:translateX(-50%) scale(1.04)} /* Botão pular */ #plat-intro-skip{position:absolute;right:20px;bottom:20px;padding:10px 14px;border:0;border-radius:999px;background:#fff;color:#111;font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25)} #plat-intro-skip:hover{background:#f2f2f2} /* Revelar página após overlay */ #plat-page{opacity:0;transition:opacity .6s ease} #plat-page:not(.plat-hidden){opacity:1} /* --- Estilos para Celular (Plataforma) --- */ #plat-swipe-hint {display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; padding: 10px 0; margin-top: 16px; color: #a0a0a0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.9rem; text-align: center; user-select: none;} #plat-swipe-hint .chev {font-size: 1.5rem; font-weight: 300; animation: swipe-pulse 1.7s ease-in-out infinite;} @keyframes swipe-pulse {0% {transform: translateX(0); opacity: 0.7;} 50% {transform: translateX(4px); opacity: 1;} 100% {transform: translateX(0); opacity: 0.7;}} #plat-swipe-hint .chev:first-child {animation-direction: reverse;} @media (min-width: 992px) {#plat-swipe-hint {display: none;}} /* --- Estilos para Celular (Valoores) --- */ #val-swipe-hint {display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; padding: 10px 0; margin-top: 16px; color: #a0a0a0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.9rem; text-align: center; user-select: none;} #val-swipe-hint .chev {font-size: 1.5rem; font-weight: 300; animation: swipe-pulse 1.7s ease-in-out infinite;} @keyframes swipe-pulse {0% {transform: translateX(0); opacity: 0.7;} 50% {transform: translateX(4px); opacity: 1;} 100% {transform: translateX(0); opacity: 0.7;}} #val-swipe-hint .chev:first-child {animation-direction: reverse;} @media (min-width: 992px) {#val-swipe-hint {display: none;}} /* ========================== */ /* ===== SEÇÃO EQUIPE ===== */ /* ========================== */ #equipe{padding:80px 0;background:#f8f9fa;} #equipe .about-wrapper{background:#fff;border:1px solid #e7eef7;border-radius:24px;padding:32px;box-shadow:0 20px 50px rgba(13,44,84,.07);} #equipe .about-hero{text-align:center;margin-bottom:48px;} #equipe .about-hero h2{color:#A4161A;font-size:2.3rem;font-weight:800;margin:0 0 8px;} #equipe .about-hero .about-sub{color:#52606d;font-size:1rem;max-width:700px;margin:0 auto;} /* Cards Preview */ .equipe-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1200px;margin:0 auto;} .equipe-card-preview{background:linear-gradient(135deg,#ffffff 0%,#f4f6fb 100%);border-radius:24px;padding:0;overflow:hidden;box-shadow:0 12px 32px rgba(6,22,43,.12);border:1px solid #e7eef7;transition:all .4s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;position:relative;min-height:420px;} .equipe-card-preview::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#A4161A 0%,#06162b 100%);opacity:0;transition:opacity .3s ease;} .equipe-card-preview:hover::before{opacity:1;} .equipe-card-preview:hover{transform:translateY(-12px);box-shadow:0 24px 48px rgba(6,22,43,.2);} .equipe-card-avatar-wrapper{position:relative;width:100%;height:320px;overflow:hidden;background:linear-gradient(135deg,#A4161A 0%,#06162b 100%);display:flex;align-items:center;justify-content:center;padding:8px;} .equipe-card-avatar{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .4s ease;} .equipe-card-preview:hover .equipe-card-avatar{transform:scale(1.08);} .equipe-card-preview-content{padding:16px 18px;flex:1;display:flex;flex-direction:column;gap:10px;} .equipe-card-preview-name{font-size:1.2rem;font-weight:700;color:var(--primary-color);margin:0;line-height:1.25;} .equipe-card-preview-posicao{font-size:0.8rem;font-weight:600;color:#7A1D1D;margin:-4px 0 0 0;line-height:1.3;} .equipe-card-preview-desc{font-size:0.85rem;line-height:1.45;color:var(--text-dark);margin:0;flex:1;} .equipe-card-saiba-mais{background:linear-gradient(135deg,#06162b 0%,#0d2c54 100%);color:#fff;border:none;border-radius:12px;padding:8px 18px;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 16px rgba(6,22,43,.2);align-self:flex-start;position:relative;overflow:hidden;} .equipe-card-saiba-mais::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease;} .equipe-card-saiba-mais:hover::before{left:100%;} .equipe-card-saiba-mais:hover{background:linear-gradient(135deg,#0d2c54 0%,#A4161A 100%);transform:translateY(-2px);box-shadow:0 8px 24px rgba(6,22,43,.3);} .equipe-card-saiba-mais:active{transform:translateY(0);} /* Overlay */ .equipe-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease;padding:20px;} .equipe-overlay.active{opacity:1;visibility:visible;} .equipe-overlay-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);} .equipe-card-detailed{position:relative;z-index:1;background:linear-gradient(145deg,#0a1a2e 0%,#162b4a 50%,#1a3a5e 100%);border-radius:32px;padding:0;max-width:900px;width:100%;max-height:90vh;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.2);transform:scale(.9) translateY(30px);transition:transform .4s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;} .equipe-overlay.active .equipe-card-detailed{transform:scale(1) translateY(0);} .equipe-close-btn{position:absolute;top:20px;right:20px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:10;box-shadow:0 4px 16px rgba(0,0,0,.3);} .equipe-close-btn:hover{background:rgba(255,255,255,.25);transform:rotate(90deg) scale(1.1);} .equipe-close-btn span{line-height:1;font-weight:300;} /* Conteúdo do Card */ .equipe-card-content{display:grid;grid-template-columns:1fr 1.2fr;gap:0;min-height:500px;align-items:stretch;} .equipe-card-image-wrapper{position:relative;background:rgba(10,26,46,.3);padding:20px;display:flex;align-items:center;justify-content:center;overflow:visible;} .equipe-card-image{width:calc(100% - 40px);height:calc(100% - 40px);min-height:460px;object-fit:cover;display:block;filter:brightness(1.05) contrast(1.05);border-radius:20px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 20px 60px rgba(0,0,0,.4),0 0 80px rgba(0,0,0,.2);position:relative;} .equipe-card-info{display:flex;flex-direction:column;justify-content:center;padding:48px 40px;background:rgba(10,26,46,.8);backdrop-filter:blur(20px);position:relative;} .equipe-card-name{font-size:2.4rem;font-weight:800;color:#fff;margin:0 0 12px;text-shadow:0 4px 20px rgba(0,0,0,.5);letter-spacing:.5px;line-height:1.2;} .equipe-card-posicao{font-size:1.2rem;font-weight:600;color:#7A1D1D;margin:0 0 24px;text-shadow:0 2px 8px rgba(0,0,0,.3);} .equipe-card-bio{font-size:1.15rem;line-height:1.9;color:rgba(255,255,255,.9);margin:0;text-shadow:0 2px 10px rgba(0,0,0,.3);} /* Responsividade */ @media(max-width:768px){ #equipe{padding:48px 0;} #equipe .about-wrapper{padding:24px;} #equipe .about-hero h2{font-size:2rem;} .equipe-cards-grid{grid-template-columns:1fr;gap:20px;} .equipe-card-avatar-wrapper{height:280px;} .equipe-card-preview-content{padding:18px;} .equipe-card-preview-name{font-size:1.25rem;} .equipe-card-preview-posicao{font-size:0.85rem;} .equipe-card-preview-desc{font-size:0.85rem;} .equipe-card-detailed{max-width:95%;border-radius:24px;} .equipe-card-content{grid-template-columns:1fr;min-height:auto;} .equipe-card-image-wrapper{padding:16px;order:1;} .equipe-card-image{width:calc(100% - 32px);height:calc(100% - 32px);min-height:350px;} .equipe-card-info{padding:32px 24px;order:2;} .equipe-card-name{font-size:1.8rem;margin-bottom:12px;} .equipe-card-posicao{font-size:1rem;margin-bottom:20px;} .equipe-card-bio{font-size:1rem;line-height:1.7;} .equipe-close-btn{top:12px;right:12px;width:40px;height:40px;font-size:24px;} } @media(max-width:480px){ #equipe .about-wrapper{padding:20px;} .equipe-cards-grid{gap:18px;} .equipe-card-avatar-wrapper{height:240px;} .equipe-card-preview-content{padding:16px;gap:10px;} .equipe-card-preview-name{font-size:1.2rem;} .equipe-card-preview-posicao{font-size:0.8rem;} .equipe-card-preview-desc{font-size:0.85rem;} .equipe-card-saiba-mais{padding:10px 20px;font-size:0.95rem;} .equipe-card-image{width:calc(100% - 24px);height:calc(100% - 24px);min-height:280px;} .equipe-card-info{padding:24px 20px;} .equipe-card-name{font-size:1.6rem;margin-bottom:10px;} .equipe-card-posicao{font-size:0.95rem;margin-bottom:18px;} } /* ========================== */ /* ===== PÁGINA DE ERRO ===== */ /* ========================== */ /* ===== 404 (escopado em .error-page para não afetar outras telas) ===== */ body.error-page{min-height:100vh;display:flex;flex-direction:column;background:#fff url('../midia/backerro.webp') center/cover no-repeat;} .error-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;/* sem padding para não empurrar nada */} .error-content{max-width:820px;margin:24px 16px 0;text-align:center;background:rgba(255,255,255,.92);backdrop-filter:saturate(120%) blur(2px);border-radius:16px;padding:22px 24px;box-shadow:0 8px 22px rgba(0,0,0,.08);} .error-title{font-size:3rem;line-height:1;font-weight:800;letter-spacing:.3px;color:#c9c9c9;margin:0 0 8px;} .error-desc{font-size:1.05rem;color:#5e6773;margin:0 auto 10px;line-height:1.7;} .error-url{font-size:.98rem;color:#7b8494;margin:0 auto 18px;word-break:break-all;} .error-avatar{width:100%;display:flex;justify-content:center;align-items:flex-end;margin:0;padding:0;/* gruda no fundo */} .error-avatar img{display:block;width:auto;max-height:42vh;object-fit:contain;margin:0} /* botão vivo, descrição neutra já acima */ .error-content .cta-button{margin-top:6px} /* ===== Responsivo ===== */ @media (max-width:992px){ .error-title{font-size:2.4rem} .error-desc{font-size:1rem} .error-avatar img{max-height:38vh} } @media (max-width:600px){ .error-content{max-width:94%;padding:18px} .error-title{font-size:2rem} .error-desc,.error-url{font-size:.95rem} .error-avatar img{max-height:34vh} }