em cada página), não no .site-header em si: um position:sticky só consegue "andar" com o scroll dentro dos limites do próprio contêiner pai. Como #header-mount só continha o header (altura igual à do header, sem sobra), o sticky no filho ficava preso e saía de tela após ~96px de rolagem. Aplicando sticky no mount (cujo pai é , do tamanho da página inteira) o header acompanha o scroll. */ #header-mount { position: sticky; top: 0; z-index: 50; } .site-header { background: #FFFFFF; height: var(--header-h); display: flex; align-items: stretch; border-bottom: 1px solid #E2E8F0; box-shadow: 0 1px 4px rgba(15,23,42,0.06); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; } .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand img { height: 68px; object-fit: contain; } .brand-text { display: flex; flex-direction: column; line-height: 1.25; } .brand-text strong { color: #0F172A; font-size: 1.15rem; letter-spacing: .01em; } .brand-text span { color: #475569; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 2px; } /* align-self: stretch faz o .main-nav ocupar a altura cheia do header — assim o indicador ativo (abaixo) pode ancorar com bottom:0 exatamente na borda inferior do header, sem depender de um valor fixo calculado a partir da fonte/logo. */ .main-nav { display: flex; gap: 26px; align-self: stretch; } .main-nav a { display: flex; align-items: center; color: #475569; font-size: .86rem; font-weight: 600; position: relative; padding: 0 2px; white-space: nowrap; transition: color .15s; } .main-nav a:hover { color: #1E3A8A; } .main-nav a.active { color: #1E3A8A; font-weight: 700; } /* Saliência que nasce da borda inferior do header e invade alguns pixels para cima — a cor acompanha a posição do item ao longo do degradê azul→vermelho. */ .main-nav a.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 6px; border-radius: 3px 3px 0 0; background: var(--azul); } .main-nav a:nth-child(1).active::after { background: #1E3A8A; } .main-nav a:nth-child(2).active::after { background: #443676; } .main-nav a:nth-child(3).active::after { background: #6A3262; } .main-nav a:nth-child(4).active::after { background: #902E4E; } .main-nav a:nth-child(5).active::after { background: #B62A3A; } .main-nav a:nth-child(6).active::after { background: #DC2626; } .header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .btn-wpp-header { display: inline-flex; align-items: center; gap: 8px; background: var(--verde-wpp); color: white; padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: .87rem; transition: transform .15s, background .15s; white-space: nowrap; } .btn-wpp-header:hover { background: var(--verde-wpp-escuro); color: white; transform: translateY(-1px); } .menu-toggle { display: none; background: none; border: 0; cursor: pointer; color: #0F172A; padding: 4px; } @media (max-width: 1080px) { .main-nav { gap: 16px; } .main-nav a { font-size: .80rem; } } @media (max-width: 900px) { .main-nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: var(--header-h); left: 0; right: 0; background: #FFFFFF; border-top: 1px solid #E2E8F0; padding: 12px 0; box-shadow: 0 8px 24px rgba(15,23,42,0.12); z-index: 200; /* estado inicial: oculto com transição */ opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .main-nav.open { opacity: 1; visibility: visible; transform: translateY(0); } .main-nav a { padding: 14px 24px; font-size: .95rem; } .main-nav a.active::after { display: none; } .menu-toggle { display: inline-flex; padding: 6px; } /* tap target maior */ .btn-wpp-header { display: none; } /* botão WPP do header some no mobile — FAB já cobre */ } @media (max-width: 640px) { :root { --header-h: 72px; } .brand img { height: 50px; } .menu-toggle { min-width: 44px; min-height: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; } } @media (max-width: 480px) { .brand-text span { display: none; } .site-header .container { padding: 0 8px; } } /* ======================== BOTÕES ======================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 1rem; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s, color .15s; text-decoration: none; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .btn-primary { background: var(--azul); color: white; } .btn-primary:hover { background: #1A317A; color: white; } .btn-vermelho { background: var(--vermelho); color: white; } .btn-vermelho:hover { background: var(--vermelho-escuro); color: white; } .btn-wpp { background: var(--verde-wpp); color: white; } .btn-wpp:hover { background: var(--verde-wpp-escuro); color: white; } .btn-ghost { background: transparent; color: var(--azul); border: 2px solid var(--azul); } .btn-ghost:hover { background: var(--azul); color: white; } .btn-block { width: 100%; } .btn-lg { padding: 18px 32px; font-size: 1.05rem; } /* ======================== HERO ======================== */ .hero { padding: 64px 0 80px; background: radial-gradient(60% 70% at 80% 20%, rgba(220,38,38,0.06), transparent 60%), radial-gradient(60% 70% at 20% 30%, rgba(30,58,138,0.10), transparent 60%), var(--branco); } .hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; } .hero h1 { color: var(--texto); } .hero h1 em { font-style: normal; color: var(--azul); } .hero .sub { font-size: 1.15rem; color: var(--texto-suave); max-width: 560px; margin-bottom: 28px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; } /* Placeholder editorial planejado da imagem */ .hero-placeholder { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 24px; padding: 48px; box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; aspect-ratio: 16/10; position: relative; overflow: hidden; } .placeholder-tag { display: inline-block; padding: 4px 12px; background: #E2E8F0; color: #475569; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 20px; } .placeholder-title { font-size: 0.88rem; color: var(--azul-claro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; } .placeholder-main { font-size: 1.8rem; color: var(--texto); font-weight: 800; margin: 0 0 12px 0; line-height: 1.25; } .placeholder-desc { font-size: 0.95rem; color: var(--texto-suave); line-height: 1.6; margin: 0; } @media (max-width: 900px) { .hero { padding: 40px 0 56px; } .hero-grid { grid-template-columns: 1fr; gap: 32px; } } /* ======================== SEÇÕES ======================== */ section { padding: 64px 0; } .section-header { text-align: center; margin-bottom: 48px; } .section-header h2 { color: var(--texto); } .section-header p { font-size: 1.1rem; max-width: 640px; margin: 0 auto; } .kicker { display: inline-block; padding: 6px 14px; background: var(--azul-suave); color: var(--azul); border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; } .kicker.vermelho { background: var(--vermelho-suave); color: var(--vermelho); } /* "Como funciona" - 3 passos */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .step { background: white; border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: 28px; position: relative; transition: transform .2s, box-shadow .2s; } .step:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .step-num { width: 40px; height: 40px; background: var(--azul); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 16px; } .step h3 { margin-bottom: 8px; } .step p { margin: 0; font-size: .98rem; } @media (max-width: 800px) { .steps { grid-template-columns: 1fr; } } @media (max-width: 480px) { .steps { gap: 14px; } .step { padding: 22px; } } /* Cards de serviços (4) */ .services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .service-card { background: white; border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: 24px; text-align: left; transition: all .2s; display: flex; flex-direction: column; } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--azul-claro); } .service-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 16px; } .service-icon.azul { background: var(--azul-suave); color: var(--azul); } .service-icon.vermelho { background: var(--vermelho-suave); color: var(--vermelho); } .service-card h3 { margin-bottom: 8px; } .service-card p { font-size: .95rem; flex: 1; } .service-card .arrow { color: var(--azul); font-weight: 600; font-size: .92rem; } @media (max-width: 900px) { .services { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .services { grid-template-columns: 1fr; } } @media (max-width: 480px) { .services { gap: 14px; } .service-card { padding: 20px; } } /* Por que escolher */ .why { background: linear-gradient(135deg, #C41E1E 0%, #DC2626 65%, #C92020 100%); color: white; position: relative; overflow: hidden; } .why::before { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 50% at 30% 20%, rgba(255,255,255,0.10), transparent 60%), radial-gradient(40% 50% at 70% 80%, rgba(255,255,255,0.08), transparent 60%); } .why .container { position: relative; } .why h2 { color: white; margin-bottom: 12px; } .why p { color: rgba(255,255,255,0.85); } .why-header { display: flex; align-items: center; gap: 40px; } .why-header-copy { flex: 1; } .why-header-copy p { max-width: 560px; margin: 0; } .why-seal { flex-shrink: 0; width: 280px; text-align: center; } .why-seal img { width: 100%; height: auto; display: block; } .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; } .why-item { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(10px); border-radius: var(--radius); padding: 28px 20px; transition: transform .2s; } .why-item:hover { transform: translateY(-4px); background: rgba(255,255,255,0.15); } .why-item .num { font-size: 2.5rem; font-weight: 800; color: white; margin-bottom: 6px; line-height: 1.1; } .why-item .label { font-size: .95rem; color: rgba(255,255,255,0.85); line-height: 1.4; } .why-num-sm { font-size: 1.7rem !important; line-height: 1.2 !important; letter-spacing: -0.01em; } @media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .why-header { flex-direction: column; align-items: flex-start; gap: 24px; } .why-seal { align-self: center; width: 190px; } } @media (max-width: 540px) { .why-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .why-grid { gap: 12px; margin-top: 28px; } .why-item { padding: 22px 18px; } } /* Banner parceria escolas (faixa — marquee infinito) */ .escolas-faixa-link { display: block; text-decoration: none; color: inherit; } .escolas-faixa { background: linear-gradient(90deg, var(--azul) 0%, var(--vermelho) 100%); padding: 16px 0; color: white; overflow: hidden; white-space: nowrap; } .faixa-track { display: inline-flex; align-items: center; gap: 40px; animation: marquee-scroll 28s linear infinite; will-change: transform; } .faixa-track:hover { animation-play-state: paused; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-25%); } } @media (prefers-reduced-motion: reduce) { .faixa-track { animation: none; } } .escola-pill { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 500; font-size: .92rem; flex-shrink: 0; text-decoration: none; color: inherit; } .escola-pill .badge { width: 32px; height: 32px; background: rgba(255,255,255,0.18); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } /* ======================== FORMULÁRIOS ======================== */ .form-card { background: white; border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow-sm); max-width: 620px; margin: 0 auto; } .form-group { margin-bottom: 18px; } .form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; color: var(--texto); } .form-group .hint { color: var(--texto-suave); font-size: .82rem; margin-top: 4px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px 14px; border: 1px solid var(--cinza-borda); border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; background: var(--cinza-fundo); transition: border-color .15s, background .15s; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--azul); background: white; } .form-group textarea { resize: vertical; min-height: 110px; } .upload-area { border: 2px dashed var(--cinza-borda); border-radius: var(--radius); padding: 40px 20px; text-align: center; background: var(--cinza-fundo); cursor: pointer; transition: all .2s; } .upload-area:hover, .upload-area.dragover { border-color: var(--azul); background: var(--azul-suave); } .upload-area .icon { font-size: 2.5rem; margin-bottom: 8px; } .upload-area .label { font-weight: 600; color: var(--texto); } .upload-area .hint { color: var(--texto-suave); font-size: .88rem; margin-top: 4px; } .dica-box { background: var(--azul-suave); border-left: 4px solid var(--azul); padding: 12px 16px; border-radius: var(--radius-sm); font-size: .92rem; color: var(--texto); margin-top: 16px; } /* ======================== FOOTER ======================== */ .site-footer { background: linear-gradient(135deg, #0D1B42 0%, #1C3580 52%, #4A1010 100%); color: #FFFFFF; margin-top: 80px; } /* Na Home a última seção antes do footer já é a foto full-bleed .loja-fw — o margin-top acima cria uma faixa branca entre ela e a barra do footer. Nas demais páginas o footer pode vir depois de conteúdo mais "solto" (texto, cards), onde os 80px continuam fazendo sentido — por isso a correção é isolada à Home, não global. */ body[data-page="home"] .site-footer { margin-top: 0; } .footer-accent-bar { height: 4px; background: linear-gradient(90deg, var(--azul) 0%, var(--vermelho) 100%); } .footer-container { padding-top: 24px; padding-bottom: 20px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px; margin-bottom: 0; } .footer-brand { text-align: center; display: flex; flex-direction: column; align-items: center; } .footer-logo-seal { display: block; background: transparent; border-radius: 0; padding: 0; margin-bottom: 6px; line-height: 0; text-align: center; } /* altura controlada (não largura) para a logo crescer sem esticar a linha do grid do footer */ .footer-brand img { width: auto; height: clamp(120px, 14vw, 190px); max-width: 100%; margin: 0 auto; } .footer-brand p { color: rgba(255,255,255,0.68); font-size: .93rem; line-height: 1.5; margin: 0; text-align: center; } .footer-col h4 { font-family: 'Archivo', sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.42); margin-bottom: 10px; } .footer-col a, .footer-col p { color: rgba(255,255,255,0.76); display: block; font-size: .95rem; margin-bottom: 6px; text-decoration: none; } .footer-col a:hover { color: #FFFFFF; } .footer-bottom { background: rgba(0,0,0,0.25); border-top: 1px solid rgba(255,255,255,0.10); } .footer-bottom-inner { padding-top: 16px; padding-bottom: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: .84rem; color: rgba(255,255,255,0.45); } .footer-digital-link { color: rgba(255,255,255,0.78); text-decoration: none; font-weight: 600; } .footer-digital-link:hover { color: #FFFFFF; text-decoration: underline; } .footer-ai-note { font-size: .72rem; color: rgba(255,255,255,0.28); line-height: 1.55; max-width: 700px; text-align: center; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.07); margin-top: 4px; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > .footer-brand { grid-column: 1 / -1; } } @media (max-width: 540px) { .footer-container { padding-top: 20px; padding-bottom: 16px; } .footer-grid { grid-template-columns: 1fr; gap: 0; } .footer-brand { align-items: center; text-align: center; } .footer-brand img { width: 250px; height: auto; } .footer-brand p { font-size: .82rem; line-height: 1.3; } .footer-col { text-align: center; padding-top: 14px; margin-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); } .footer-col h4 { font-size: .68rem; letter-spacing: .08em; margin-bottom: 8px; } .footer-col p { font-size: .84rem; margin-bottom: 5px; } .footer-col a { font-size: .84rem; margin-bottom: 0; padding: 6px 0; } .footer-bottom-inner { padding-top: 12px; padding-bottom: 12px; font-size: .78rem; gap: 4px; } } @media (max-width: 360px) { .footer-brand img { width: 220px; height: auto; } } /* ======================== PASSO A PASSO — LISTA ESCOLAR ======================== */ .lista-como-funciona { background: #F8FAFC; border-bottom: 1px solid #E2E8F0; } .lista-passos { display: flex; max-width: 900px; margin: 0 auto; padding: 36px 0; } .lista-passo { display: flex; gap: 16px; align-items: flex-start; flex: 1; padding: 0 28px; border-right: 1px solid #E2E8F0; } .lista-passo:first-child { padding-left: 0; } .lista-passo:last-child { border-right: none; padding-right: 0; } .lista-passo-num { width: 32px; height: 32px; border-radius: 50%; background: #1E3A8A; color: #FFFFFF; font-family: Archivo, sans-serif; font-weight: 800; font-size: .88rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .lista-passo strong { display: block; font-family: Archivo, sans-serif; font-weight: 700; font-size: .97rem; color: #0F172A; margin-bottom: 4px; } .lista-passo p { font-size: .86rem; color: #475569; margin: 0; line-height: 1.5; } @media (max-width: 768px) { .lista-passos { flex-direction: column; padding: 24px 0; gap: 0; } .lista-passo { padding: 18px 0; border-right: none; border-bottom: 1px solid #E2E8F0; } .lista-passo:last-child { border-bottom: none; } } /* ======================== BOTÃO FLUTUANTE ======================== */ .fab-wpp { position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 28px); z-index: 9000; display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--verde-wpp); color: white; border-radius: 999px; font-weight: 600; font-size: .92rem; box-shadow: 0 4px 20px rgba(0,0,0,0.22); transition: transform .15s, background .15s; text-decoration: none; } .fab-wpp:hover { transform: translateY(-3px) scale(1.02); color: white; } .fab-wpp.copias { background: var(--vermelho); } .fab-wpp.copias:hover { background: var(--vermelho-escuro); color: white; } .fab-wpp .ico { font-size: 1.4rem; flex-shrink: 0; } @media (max-width: 540px) { .fab-wpp .label { display: none; } .fab-wpp { padding: 14px; bottom: 18px; } } /* ======================== FERRAMENTA DE LISTA ======================== */ .lista-tool { padding: 28px 0 56px; } .lista-tool h1 { text-align: center; } .lista-tool .sub { text-align: center; color: var(--texto-suave); font-size: 1.1rem; margin-bottom: 36px; } .form-upload-intro { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--cinza-borda); } .form-upload-intro strong { display: block; font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--texto); margin-bottom: 4px; } .form-upload-intro p { margin: 0; font-size: .88rem; color: var(--texto-suave); } .estado { display: none; } .estado.ativo { display: block; } /* Estado Loading */ .loading-box { background: white; border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: 60px 30px; text-align: center; max-width: 500px; margin: 0 auto; box-shadow: var(--shadow-sm); } .loading-spinner { width: 60px; height: 60px; border: 4px solid var(--azul-suave); border-top-color: var(--azul); border-radius: 50%; margin: 0 auto 24px; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-msg { font-weight: 600; color: var(--texto); margin-bottom: 6px; } .loading-hint { color: var(--texto-suave); font-size: .92rem; } /* Estado Resultado */ .resultado-header { background: var(--azul-suave); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .resultado-header strong { color: var(--azul); } .resultado-header .info { font-size: .98rem; } .resultado-header .counter { background: var(--azul); color: white; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem; } /* Bloco de metadados da lista */ .meta-lista { background: var(--azul-suave); border: 1px solid #BFDBFE; border-radius: var(--radius); padding: 20px 24px; margin-bottom: 24px; } .meta-lista-titulo { font-weight: 700; font-size: .9rem; color: var(--azul); margin: 0 0 14px; text-transform: uppercase; letter-spacing: .04em; } .meta-lista-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; } .meta-lista-campos label { display: flex; flex-direction: column; font-size: .78rem; color: var(--texto-suave); font-weight: 600; gap: 4px; } .meta-lista-campos input { padding: 7px 10px; border: 1px solid var(--cinza-borda); border-radius: 8px; font-size: .88rem; background: white; color: var(--texto); font-family: inherit; } .meta-lista-campos input:focus { outline: 2px solid var(--azul); border-color: transparent; } .meta-lista-dica { font-size: .76rem; color: var(--texto-suave); margin: 0; } .itens-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-bottom: 120px; /* clearance so sticky .acoes-finais never covers last cards */ } .item-card { background: white; border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: 10px 14px; transition: all .2s; display: flex; flex-direction: column; gap: 8px; } .item-card.excluido { background: #F5F7FA; border-color: #E4E8EF; } /* Fade content; the choice toggle stays crisp for easy re-activation */ .item-card.excluido .item-info, .item-card.excluido .marca-sugerida, .item-card.excluido .marca-preferencia-toggle, .item-card.excluido .marca-preferencia-wrap, .item-card.excluido .item-img-buscar, .item-card.excluido .qty-control { opacity: 0.42; } .item-card.excluido .item-choice-toggle { opacity: 1; } /* When excluded, make "Quero comprar" visually stand out as the restore action */ .item-card.excluido .item-choice-option[data-acao="incluir"] { color: var(--azul); font-weight: 700; } .item-info { flex: 1; } .item-card h4 { font-size: .97rem; margin-bottom: 2px; line-height: 1.35; } .item-card .obs { font-size: .8rem; color: var(--texto-suave); margin: 0; } .item-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .qty-control { display: flex; align-items: center; gap: 8px; background: var(--cinza-fundo); border-radius: 999px; padding: 4px; } .qty-btn { width: 26px; height: 26px; border-radius: 50%; background: white; border: 1px solid var(--cinza-borda); color: var(--azul); font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; } .qty-btn:hover { background: var(--azul); color: white; border-color: var(--azul); } .qty-num { font-weight: 700; min-width: 18px; text-align: center; font-size: .95rem; } .toggle-incluir { background: none; border: 1px solid var(--cinza-borda); border-radius: 999px; padding: 6px 12px; font-size: .82rem; font-weight: 600; cursor: pointer; color: var(--texto-suave); transition: all .15s; } .toggle-incluir.sim { background: #DCFCE7; color: #166534; border-color: #BBF7D0; } .toggle-incluir.nao { background: #FEE2E2; color: #991B1B; border-color: #FECACA; } /* Toggle duplo: Quero comprar / Não quero */ .item-choice-toggle { display: flex; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--cinza-borda); flex-shrink: 0; } .item-choice-option { background: white; border: none; padding: 6px 10px; font-size: .77rem; font-weight: 600; cursor: pointer; color: var(--texto-suave); font-family: inherit; transition: background .15s, color .15s; white-space: nowrap; line-height: 1.3; } .item-choice-option + .item-choice-option { border-left: 1.5px solid var(--cinza-borda); } .item-choice-option.ativo[data-acao="incluir"] { background: #DCFCE7; color: #166534; } .item-choice-option.ativo[data-acao="excluir"] { background: #F1F5F9; color: var(--texto); } .acoes-finais { background: white; border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: sticky; bottom: 16px; z-index: 10; box-shadow: var(--shadow-lg); } .acoes-finais .resumo strong { color: var(--azul); } .acoes-finais .resumo { font-size: 1rem; } /* ======================== MÚLTIPLAS LISTAS ======================== */ .info-adicionando { background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 10px; padding: 14px 18px; font-size: .88rem; color: #1E3A8A; margin-bottom: 16px; line-height: 1.5; } .dica-analise { font-size: .8rem; color: var(--texto-suave); text-align: center; margin: 12px 0 0; } .aviso-lista-unica { display: flex; gap: 10px; align-items: flex-start; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 10px; padding: 12px 16px; font-size: .86rem; color: #1E40AF; line-height: 1.5; margin-bottom: 16px; } .aviso-lista-unica-ico { font-size: 1rem; flex-shrink: 0; margin-top: 2px; } .aviso-lista-unica p { margin: 0; } .pedido-resumo { background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; } .pedido-resumo-titulo { font-weight: 700; font-size: .95rem; color: #166534; margin: 0 0 8px; } .pedido-resumo-lista { margin: 0 0 6px; padding-left: 18px; font-size: .88rem; color: #166534; line-height: 1.7; } .pedido-resumo-dica { font-size: .78rem; color: #166534; opacity: .75; margin: 0; } .btn-adicionar { background: transparent; color: var(--azul); border: 2px solid var(--azul); } .btn-adicionar:hover { background: #EFF6FF; color: var(--azul); } /* ======================== LOADING CARD ======================== */ .lista-loading-card { max-width: 520px; margin: 56px auto; background: #fff; border: 1px solid #E2E8F0; border-radius: 20px; padding: 40px 36px 36px; text-align: center; box-shadow: 0 4px 24px rgba(0,0,0,.06); } .lista-loading-chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; } .loading-chip { display: inline-flex; align-items: center; gap: 5px; background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E3A8A; border-radius: 20px; padding: 6px 14px; font-size: .82rem; font-weight: 600; animation: chipBounce 1.6s ease-in-out infinite; } .loading-chip.chip-1 { animation-delay: 0s; } .loading-chip.chip-2 { animation-delay: .18s; } .loading-chip.chip-3 { animation-delay: .36s; } .loading-chip.chip-4 { animation-delay: .54s; } .loading-chip.chip-5 { animation-delay: .72s; } @keyframes chipBounce { 0%, 100% { transform: translateY(0); opacity: .65; } 50% { transform: translateY(-6px); opacity: 1; } } .lista-loading-titulo { font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.15rem; color: #1E3A8A; margin: 0 0 6px; } .lista-loading-hint { font-size: .88rem; color: var(--texto-suave); margin: 0 0 28px; min-height: 1.4em; } .lista-loading-bar { height: 4px; background: #E2E8F0; border-radius: 2px; overflow: hidden; } .lista-loading-bar-fill { height: 100%; width: 38%; background: #1E3A8A; border-radius: 2px; animation: barSlide 1.9s ease-in-out infinite; } @keyframes barSlide { 0% { transform: translateX(-160%); } 100% { transform: translateX(380%); } } @media (prefers-reduced-motion: reduce) { .loading-chip { animation: none; opacity: 1; } .lista-loading-bar-fill { animation: none; width: 100%; background: #BFDBFE; } } /* ======================== ERRO CARD ======================== */ .lista-erro-card { display: flex; align-items: flex-start; gap: 12px; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; color: #991B1B; font-size: .88rem; line-height: 1.5; } .lista-erro-card strong { display: block; font-weight: 700; font-size: .9rem; color: #7F1D1D; margin-bottom: 3px; } .lista-erro-card p { margin: 0; } .lista-erro-ico { font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; } /* ======================== CÓPIAS ======================== */ .copias-hero { padding: 64px 0 40px; background: radial-gradient(60% 70% at 80% 20%, rgba(220,38,38,0.10), transparent 60%), var(--branco); } .copias-hero .icon-circle { width: 80px; height: 80px; background: var(--vermelho); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 20px; box-shadow: 0 8px 24px rgba(220,38,38,0.3); } .copias-hero h1 em { color: var(--vermelho); font-style: normal; } .copias-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0; } .copias-cat { background: white; border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: 28px 22px; text-align: center; transition: all .2s; } .copias-cat:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--vermelho); } .copias-cat .ic { width: 56px; height: 56px; background: var(--vermelho-suave); color: var(--vermelho); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 14px; } .copias-cat h3 { margin-bottom: 6px; } .copias-cat p { font-size: .92rem; margin: 0; } @media (max-width: 800px) { .copias-cats { grid-template-columns: 1fr; } } .copias-cta-box { background: linear-gradient(135deg, var(--vermelho) 0%, #EF4444 100%); color: white; border-radius: var(--radius); padding: 40px; text-align: center; margin: 32px 0; } .copias-cta-box h2 { color: white; } .copias-cta-box p { color: rgba(255,255,255,0.9); margin-bottom: 24px; } .copias-cta-box .btn-vermelho-claro { background: white; color: var(--vermelho); font-weight: 700; } .copias-cta-box .btn-vermelho-claro:hover { background: rgba(255,255,255,0.92); color: var(--vermelho); } .copias-aviso { background: var(--vermelho-suave); border-left: 4px solid var(--vermelho); padding: 14px 18px; border-radius: var(--radius-sm); font-size: .92rem; } .copias-aviso strong { color: var(--vermelho); } /* ======================== EMPRESAS ======================== */ .boleto-destaque { background: linear-gradient(135deg, var(--azul) 0%, var(--azul-claro) 100%); color: white; border-radius: var(--radius); padding: 36px; margin-bottom: 40px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .boleto-destaque .ico-big { width: 80px; height: 80px; background: rgba(255,255,255,0.20); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; flex-shrink: 0; } .boleto-destaque h2 { color: white; margin-bottom: 6px; font-size: 1.6rem; } .boleto-destaque p { color: rgba(255,255,255,0.92); margin: 0; } .empresa-beneficios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 32px; } .beneficio { background: white; border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: 22px; text-align: center; transition: all .2s; } .beneficio:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .beneficio .ic { width: 48px; height: 48px; background: var(--azul-suave); color: var(--azul); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: 0 auto 12px; } .beneficio h4 { margin-bottom: 4px; font-size: 1rem; } .beneficio p { font-size: .88rem; margin: 0; } @media (max-width: 900px) { .empresa-beneficios { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .empresa-beneficios { grid-template-columns: 1fr; } } /* ======================== PRODUTOS ======================== */ .produtos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .produto-card { background: white; border: 1px solid var(--cinza-borda); border-radius: var(--radius); overflow: hidden; transition: all .2s; } .produto-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--azul-claro); } .produto-img { width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, var(--cinza-fundo), #E2E8F0); display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--texto-suave); position: relative; } .produto-img .placeholder-tag { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,0.9); color: var(--texto-suave); font-size: .68rem; padding: 3px 8px; border-radius: 999px; font-weight: 600; } .produto-tag-novo { position: absolute; top: 8px; left: 8px; background: var(--vermelho); color: white; font-size: .7rem; padding: 4px 10px; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .produto-info { padding: 16px; } .produto-info h4 { font-size: 1rem; margin-bottom: 4px; } .produto-info p { font-size: .85rem; margin-bottom: 12px; min-height: 36px; } .produto-info .btn { padding: 8px 14px; font-size: .85rem; width: 100%; } .cat-titulo { font-size: 1.4rem; font-weight: 800; color: var(--texto); margin: 40px 0 20px; display: flex; align-items: center; gap: 10px; } .cat-titulo .badge-cat { background: var(--azul); color: white; font-size: .65rem; padding: 4px 10px; border-radius: 999px; letter-spacing: .08em; text-transform: uppercase; } .cat-titulo .badge-cat.vermelho { background: var(--vermelho); } /* ======================== ESCOLAS ======================== */ .escola-card { background: white; border: 1px solid var(--cinza-borda); border-radius: var(--radius); overflow: hidden; transition: all .2s; display: flex; flex-direction: column; } .escola-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .escola-card .top { height: 80px; background: linear-gradient(135deg, var(--azul) 0%, var(--azul-claro) 100%); position: relative; display: flex; align-items: center; justify-content: center; } .escola-card .top.vermelho { background: linear-gradient(135deg, var(--vermelho) 0%, #EF4444 100%); } .escola-card .top .badge { position: absolute; bottom: -22px; width: 48px; height: 48px; background: white; color: var(--azul); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; box-shadow: var(--shadow); } .escola-card .top.vermelho .badge { color: var(--vermelho); } .escola-card .body { padding: 32px 22px 22px; flex: 1; display: flex; flex-direction: column; } .escola-card h3 { margin-bottom: 4px; } .escola-card .desc-escola { color: var(--texto-suave); font-size: .92rem; margin-bottom: 14px; } .escola-card .series-label { font-size: .82rem; font-weight: 600; color: var(--texto-suave); margin-bottom: 8px; } .escola-card .series { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .escola-card .serie-tag { background: var(--azul-suave); color: var(--azul); padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; } .escola-card .top.vermelho ~ .body .serie-tag { background: var(--vermelho-suave); color: var(--vermelho); } .escola-card .desconto-row { background: var(--cinza-fundo); border-radius: var(--radius-sm); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: .92rem; } .escola-card .desconto-row strong { color: var(--azul); font-size: 1.2rem; } .escola-card .acoes { display: flex; flex-direction: column; gap: 8px; margin-top: auto; } .escola-card .acoes .btn { width: 100%; padding: 10px 16px; font-size: .92rem; } .escola-card .acoes .btn-baixar { background: var(--cinza-fundo); color: var(--texto); border: 1px solid var(--cinza-borda); } .escola-card .acoes .btn-baixar:hover { background: var(--cinza-borda); color: var(--texto); } .escolas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .escolas-grid { grid-template-columns: 1fr; } } .faq-item { background: white; border: 1px solid var(--cinza-borda); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; } .faq-item summary { padding: 18px 22px; cursor: pointer; font-weight: 600; color: var(--texto); list-style: none; display: flex; align-items: center; justify-content: space-between; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.4rem; color: var(--azul); font-weight: 400; } .faq-item[open] summary::after { content: '−'; } .faq-item .resposta { padding: 0 22px 18px; color: var(--texto-suave); font-size: .95rem; } /* Utilitários */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: 16px; } .mt-4 { margin-top: 32px; } .mb-2 { margin-bottom: 16px; } .mb-4 { margin-bottom: 32px; } /* ======================== COMO USAR (Lista Escolar) ======================== */ .como-usar { padding: 64px 0; } .como-usar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } .como-usar-card { background: white; border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: 28px 24px; text-align: center; transition: transform .2s, box-shadow .2s; } .como-usar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .como-usar-num { width: 44px; height: 44px; background: var(--azul); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; margin: 0 auto 16px; } .como-usar-ico { font-size: 2.2rem; margin-bottom: 12px; } .como-usar-card h3 { font-size: 1.1rem; margin-bottom: 8px; } .como-usar-card p { font-size: .92rem; margin: 0; } @media (max-width: 800px) { .como-usar-grid { grid-template-columns: 1fr; } } /* ======================== PEDIDO EMPRESA ======================== */ .pedido-section { background: white; border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: 32px; margin-top: 32px; } .pedido-section h3 { margin-bottom: 4px; } .pedido-section > p { margin-bottom: 24px; font-size: .95rem; } .pedido-item-row { display: grid; grid-template-columns: 1fr 100px auto; gap: 12px; align-items: end; background: var(--cinza-fundo); border: 1px solid var(--cinza-borda); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 10px; } .pedido-item-row label { font-size: .82rem; font-weight: 600; color: var(--texto-suave); display: block; margin-bottom: 4px; } .pedido-item-row input { margin: 0; } .pedido-remove-btn { background: none; border: none; color: var(--vermelho); cursor: pointer; font-size: 1.2rem; padding: 4px; line-height: 1; align-self: center; transition: transform .15s; } .pedido-remove-btn:hover { transform: scale(1.2); } .pedido-add-btn { background: var(--azul-suave); color: var(--azul); border: 1px dashed var(--azul); border-radius: var(--radius-sm); padding: 10px; font-size: .9rem; font-weight: 600; cursor: pointer; width: 100%; margin-top: 8px; transition: background .15s; } .pedido-add-btn:hover { background: #dce8fb; } @media (max-width: 600px) { .pedido-item-row { grid-template-columns: 1fr; } } /* ======================== CATEGORIAS DE PRODUTOS ======================== */ .cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 32px; } .cat-card { background: white; border: 1px solid var(--cinza-borda); border-radius: var(--radius); overflow: hidden; transition: all .2s; display: flex; flex-direction: column; } .cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--azul-claro); } .cat-img-placeholder { width: 100%; aspect-ratio: 4/3; background: linear-gradient(145deg, var(--cinza-fundo) 0%, #E6ECF5 100%); border-bottom: 1px solid var(--cinza-borda); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .cat-img-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; } .cat-img-initials { width: 64px; height: 64px; background: var(--azul-suave); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; color: var(--azul); letter-spacing: .04em; text-transform: uppercase; text-align: center; line-height: 1.3; } .cat-img-label { font-size: .7rem; font-weight: 600; color: var(--texto-suave); letter-spacing: .05em; text-transform: uppercase; background: rgba(255,255,255,0.9); padding: 4px 12px; border-radius: 999px; border: 1px solid var(--cinza-borda); } .cat-body { padding: 24px; flex: 1; display: flex; flex-direction: column; } .cat-body h3 { font-size: 1.15rem; margin-bottom: 6px; } .cat-body p { font-size: .93rem; flex: 1; margin-bottom: 16px; } .cat-body .btn { padding: 10px 18px; font-size: .9rem; width: 100%; } @media (max-width: 700px) { .cat-grid { grid-template-columns: 1fr; } } /* Hero lista escolar — mockup de itens sem emoji */ .illu-thumb-text { width: 44px; height: 44px; background: var(--azul-suave); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 800; letter-spacing: .03em; color: var(--azul); flex-shrink: 0; text-transform: uppercase; line-height: 1.2; text-align: center; } .illu-msg-label { font-size: .68rem; font-weight: 700; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; text-align: center; } /* Serviço card — badge de destaque */ .service-badge { display: inline-block; background: var(--azul); color: white; font-size: .63rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: 10px; } /* ======================== BANNER DE IMPLANTAÇÃO ======================== */ .banner-implantacao { background: #EFF3FB; border-bottom: 1px solid #E2E8F0; padding: 11px 0; font-size: .87rem; color: #1E3A8A; } .banner-implantacao .container { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: left; } .banner-implantacao-ico { flex-shrink: 0; line-height: 1; } @media (max-width: 640px) { .banner-implantacao { padding: 8px 0; font-size: .79rem; } .banner-implantacao .container { align-items: flex-start; justify-content: flex-start; } .banner-implantacao-ico { margin-top: 2px; } } /* Link "O que é este item?" nos cards da lista */ .item-img-buscar { display: inline-block; margin-bottom: 4px; font-size: .78rem; color: var(--azul-claro); text-decoration: none; font-weight: 500; transition: color .15s; } .item-img-buscar:hover { color: var(--azul); text-decoration: underline; } /* ======================== LISTA ESCOLAR GRID ======================== */ .lista-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; } @media (max-width: 860px) { .lista-grid { grid-template-columns: 1fr; gap: 36px; } } /* ======================== HOME — PRÉVIA DO CATÁLOGO ======================== */ /* Demonstração estática (aria-hidden na marcação): a experiência real de busca, categorias e "Minha lista" vive só em produtos.html/catalog-app.js — aqui é só ilustração, por isso os elementos internos são spans/divs, nunca button/input. */ .hcp-section { background: var(--cinza-fundo); } .hcp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; } .hcp-copy { display: flex; flex-direction: column; gap: 16px; max-width: 520px; } .hcp-copy h2 { font-size: clamp(26px, 3.5vw, 38px); margin: 0; letter-spacing: -0.02em; line-height: 1.15; color: #0F172A; } .hcp-copy > p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--texto-suave); } .hcp-flow { align-self: flex-start; margin: 0; font-size: .84rem; font-weight: 700; color: var(--azul); background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 999px; padding: 8px 16px; } .hcp-cta { display: inline-block; background: var(--azul); color: var(--branco); text-decoration: none; font-weight: 700; font-size: 16px; padding: 14px 26px; border-radius: 13px; box-shadow: 0 4px 14px rgba(30,58,138,0.25); transition: background .15s; } .hcp-cta:hover { background: #1A317A; color: var(--branco); } .hcp-cta:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .hcp-cta-note { margin: 0; font-size: 13.5px; color: #94A3B8; } .hcp-preview-card { background: var(--branco); border-radius: 18px; box-shadow: 0 20px 56px rgba(30,58,138,0.12), 0 4px 16px rgba(0,0,0,0.06); border-top: 3px solid var(--azul); overflow: hidden; max-width: 440px; margin: 0 auto; } .hcp-preview-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cinza-borda); } .hcp-preview-search { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--cinza-fundo); border: 1px solid var(--cinza-borda); border-radius: 999px; padding: 8px 14px; color: var(--texto-suave); } .hcp-preview-search svg { flex-shrink: 0; } .hcp-preview-search span { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hcp-preview-list { display: inline-flex; align-items: center; gap: 6px; background: var(--azul); color: var(--branco); border-radius: 999px; padding: 8px 12px; font-size: .78rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; } .hcp-preview-list-count { background: rgba(255,255,255,0.22); border-radius: 999px; padding: 1px 7px; } .hcp-preview-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; } .hcp-preview-product { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--cinza-fundo); border: 1px solid var(--cinza-borda); border-radius: var(--radius-sm); padding: 10px 6px 12px; text-align: center; } .hcp-preview-product-media { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } .hcp-preview-product-media img { width: 70%; height: 70%; object-fit: contain; } .hcp-preview-product-name { font-size: .74rem; font-weight: 600; color: var(--texto); line-height: 1.25; } .hcp-preview-product-add { font-size: .66rem; font-weight: 700; color: var(--azul); background: var(--azul-suave); border-radius: 999px; padding: 3px 8px; white-space: nowrap; } .hcp-preview-ready { display: flex; align-items: center; gap: 8px; margin: 0 16px 16px; padding: 10px 12px; background: var(--azul-suave); border-radius: var(--radius-sm); font-size: .8rem; font-weight: 600; color: var(--azul); } .hcp-preview-ready-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--verde-wpp-escuro); color: var(--branco); font-size: .66rem; flex-shrink: 0; } @media (max-width: 860px) { .hcp-grid { grid-template-columns: 1fr; gap: 32px; } .hcp-copy { order: -1; max-width: none; } } @media (max-width: 420px) { .hcp-preview-product-name { font-size: .68rem; } .hcp-preview-product-add { font-size: .62rem; padding: 3px 6px; } } /* ======================== HOME — LISTA PREVIEW ANIMADA ======================== */ .hlp-panel { background: #FFFFFF; border-radius: 18px; box-shadow: 0 20px 56px rgba(30,58,138,0.12), 0 4px 16px rgba(0,0,0,0.06); overflow: hidden; border-top: 3px solid #1E3A8A; width: 100%; max-width: 400px; position: relative; display: flex; flex-direction: column; min-height: 590px; } .hlp-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #E2E8F0; gap: 10px; } .hlp-header strong { font-family: Archivo, sans-serif; font-weight: 700; font-size: 15px; color: #0F172A; } .hlp-badge { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #1E3A8A; background: #EFF3FB; padding: 4px 10px; border-radius: 100px; white-space: nowrap; flex-shrink: 0; } .hlp-card { padding: 12px 18px; border-bottom: 1px solid #F1F5F9; transition: background .3s, box-shadow .3s; } .hlp-card.hlp-is-active { background: #F8FBFF; box-shadow: inset 3px 0 0 #1E3A8A; } .hlp-card.hlp-excluido { background: #F5F7FA; } .hlp-card.hlp-excluido .hlp-card-main { opacity: 0.42; transition: opacity .3s; } .hlp-card.hlp-excluido .hlp-toggle { border-color: #FCA5A5; } .hlp-card-main { margin-bottom: 8px; } .hlp-name { font-size: 14px; font-weight: 600; color: #0F172A; line-height: 1.35; margin: 0 0 2px; } .hlp-obs { font-size: 11.5px; color: #64748B; display: block; } .hlp-pref { display: block; font-size: 11.5px; color: #1D4ED8; font-weight: 600; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; } .hlp-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .hlp-qty { display: flex; align-items: center; gap: 7px; background: #F8FAFC; border-radius: 999px; padding: 4px; } .hlp-qty-btn { width: 24px; height: 24px; border-radius: 50%; background: white; border: 1px solid #E2E8F0; color: #1E3A8A; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; pointer-events: none; user-select: none; line-height: 1; transition: background .15s, color .15s, border-color .15s, transform .1s; } .hlp-qty-btn.hlp-clicking { background: #1E3A8A; color: white; border-color: #1E3A8A; transform: scale(0.88); } .hlp-qty-num { font-weight: 700; min-width: 20px; text-align: center; font-size: 14px; } .hlp-toggle { display: flex; border-radius: 8px; overflow: hidden; border: 1.5px solid #E2E8F0; flex-shrink: 0; } .hlp-opt { padding: 5px 9px; font-size: 11px; font-weight: 600; color: #94A3B8; white-space: nowrap; line-height: 1.3; background: white; transition: background .15s, color .15s, opacity .1s, transform .1s; } .hlp-opt + .hlp-opt { border-left: 1.5px solid #E2E8F0; } .hlp-opt-inc.hlp-ativo { background: #DCFCE7; color: #166534; } .hlp-opt-exc.hlp-ativo { background: #F1F5F9; color: #475569; } .hlp-opt.hlp-clicking { opacity: 0.6; transform: scale(0.94); } .hlp-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid #E2E8F0; gap: 10px; } .hlp-footer-count { font-size: 13px; color: #475569; font-weight: 500; } .hlp-wpp-btn { background: #25D366; color: white; font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 10px; text-decoration: none; pointer-events: none; display: inline-block; transition: opacity .15s, transform .1s; } .hlp-wpp-btn.hlp-clicking { opacity: 0.7; transform: scale(0.96); } .hlp-popup { position: absolute; inset: 0; background: rgba(15,23,42,0.46); display: flex; align-items: flex-end; opacity: 0; pointer-events: none; transition: opacity .35s ease; z-index: 10; } .hlp-popup.hlp-popup-visible { opacity: 1; pointer-events: auto; } .hlp-popup-inner { width: 100%; background: white; border-top: 2px solid #25D366; padding: 14px 16px 16px; transform: translateY(16px); transition: transform .35s ease; } .hlp-popup.hlp-popup-visible .hlp-popup-inner { transform: translateY(0); } .hlp-popup-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .hlp-popup-icon { font-size: 1rem; } .hlp-popup-header strong { font-size: 13px; color: #0F172A; } .hlp-popup-body { font-size: 12px; color: #0F172A; line-height: 1.6; margin-bottom: 12px; } .hlp-popup-body p { margin: 0 0 2px; } .hlp-popup-item { padding-left: 8px; color: #334155; } .hlp-popup-btn { display: block; width: 100%; background: #25D366; color: white; font-weight: 700; font-size: 13px; padding: 10px; border-radius: 10px; border: none; cursor: default; font-family: inherit; transition: opacity .15s, transform .1s; } .hlp-popup-btn.hlp-clicking { opacity: 0.7; transform: scale(0.97); } @media (prefers-reduced-motion: reduce) { .hlp-card, .hlp-card-main, .hlp-qty-num, .hlp-opt, .hlp-qty-btn, .hlp-wpp-btn, .hlp-popup, .hlp-popup-inner, .hlp-popup-btn { transition: none !important; } } /* ======================== COMO FUNCIONA — GRADIENTE AZUL ======================== */ .como-funciona-azul { background: linear-gradient(135deg, #1B3A8A 0%, #2049B0 55%, #1D3F9E 100%); border-top: none !important; border-bottom: none !important; position: relative; } .como-funciona-azul::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 56px solid transparent; border-right: 56px solid transparent; border-top: 34px solid #FFFFFF; z-index: 2; pointer-events: none; } .como-funciona-azul h2 { color: #FFFFFF; } .como-funciona-azul .step { background: rgba(255, 255, 255, 0.97); border-color: rgba(255, 255, 255, 0.5); } /* ======================== HERO FULL WIDTH ======================== */ .hero-fw { position: relative; overflow: hidden; background: #F8FAFC; } .hero-fw::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--azul) 0%, var(--vermelho) 100%); z-index: 3; } .hero-fw-bg { position: absolute; inset: 0; z-index: 0; } .hero-fw-bg picture { display: block; width: 100%; height: 100%; } .hero-fw-bg img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; } .hero-fw-content { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 72px 24px 80px; min-height: 540px; display: flex; align-items: center; } .hero-fw-card { max-width: 480px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 18px; padding: 40px; box-shadow: 0 6px 32px rgba(15, 23, 42, 0.10); display: flex; flex-direction: column; gap: 20px; } .hero-fw-badge { align-self: center; background: var(--azul); color: #FFFFFF; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; } .hero-fw-card h1 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(26px, 3.5vw, 42px); line-height: 1.12; margin: 0; letter-spacing: -0.02em; color: #0F172A; text-align: center; } .hero-fw-subtitle { text-align: center; } .hero-fw-card p { margin: 0; font-size: 17px; line-height: 1.6; color: #475569; } .hero-fw-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* CTA principal do hero — leva a produtos.html, por isso usa o azul institucional (cor de maior destaque) em vez do verde do WhatsApp. */ .hero-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--azul); color: #FFFFFF; text-decoration: none; font-weight: 700; font-size: 16px; padding: 14px 24px; border-radius: 13px; box-shadow: 0 4px 14px rgba(30, 58, 138, 0.28); transition: background .15s; } .hero-btn-primary:hover { background: #16296B; color: #FFFFFF; } .hero-btn-primary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } /* CTA secundário — leva a lista-escolar.html: contorno, ainda claramente clicável. */ .hero-btn-secondary { display: inline-flex; align-items: center; background: transparent; color: var(--azul); border: 1.5px solid rgba(30, 58, 138, 0.45); text-decoration: none; font-weight: 700; font-size: 16px; padding: 14px 24px; border-radius: 13px; transition: background .15s; } .hero-btn-secondary:hover { background: rgba(30, 58, 138, 0.07); } .hero-btn-secondary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } /* Alternativa de atendimento direto — discreta, abaixo dos dois CTAs principais. */ .hero-fw-support { margin: 4px 0 0; text-align: center; font-size: 13.5px; color: var(--texto-suave); } .hero-fw-support a { color: var(--verde-wpp-escuro); font-weight: 700; text-decoration: underline; } .hero-fw-support a:hover { color: #17974A; } @media (max-width: 640px) { .hero-fw { display: block; overflow: hidden; min-height: 680px; /* remove o padding herdado de "section { padding: 64px 0; }" — sem isso, o card é empurrado para baixo e cobre o topo da fachada na imagem mobile */ padding: 0; } .hero-fw-bg { position: absolute; inset: 0; height: auto; overflow: visible; flex-shrink: unset; z-index: 0; } .hero-fw-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; } .hero-fw-content { position: relative; z-index: 2; min-height: 0; padding: 32px 16px 24px; background: transparent; align-items: flex-start; } .hero-fw-card { max-width: 100%; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 16px; padding: 20px 18px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.10); gap: 14px; } .hero-fw-card h1 { font-size: clamp(19px, 5vw, 24px); } .hero-fw-btns .hero-btn-primary, .hero-fw-btns .hero-btn-secondary { font-size: 14px; padding: 11px 18px; } .hero-fw-btns { flex-direction: column; align-items: stretch; } .hero-fw-btns .hero-btn-primary, .hero-fw-btns .hero-btn-secondary { justify-content: center; } } /* ======================== VISITE A SARTEC FULL WIDTH ======================== */ .loja-fw { position: relative; overflow: hidden; min-height: 640px; display: flex; align-items: flex-start; } .loja-fw-bg { position: absolute; inset: 0; z-index: 0; display: block; line-height: 0; } .loja-fw-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .loja-fw-content { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; padding: 44px 24px 56px; } .loja-fw-card { max-width: 440px; background: rgba(255, 255, 255, 0.90); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.70); border-radius: 16px; padding: 30px 32px; box-shadow: 0 6px 28px rgba(15, 23, 42, 0.10); display: flex; flex-direction: column; gap: 10px; } .loja-fw-card h2 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.01em; color: #0F172A; margin: 0; } .loja-fw-card p { font-size: 0.93rem; line-height: 1.55; color: #475569; margin: 0 0 8px; } .loja-fw-btns { display: flex; gap: 8px; flex-wrap: wrap; } .loja-btn-wpp { display: inline-flex; align-items: center; gap: 7px; background: var(--verde-wpp); color: #FFFFFF; text-decoration: none; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 11px; box-shadow: 0 2px 8px rgba(37, 211, 102, 0.30); transition: background .15s; } .loja-btn-wpp:hover { background: var(--verde-wpp-escuro); color: #FFFFFF; } .loja-btn-map { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1.5px solid rgba(15, 23, 42, 0.22); color: #0F172A; text-decoration: none; font-weight: 600; font-size: 13px; padding: 10px 16px; border-radius: 11px; transition: background .15s; } .loja-btn-map:hover { background: rgba(15, 23, 42, 0.07); color: #0F172A; } @media (max-width: 640px) { .loja-fw { min-height: 580px; } .loja-fw-bg img { object-position: center bottom; } .loja-fw-content { padding: 20px 16px; } .loja-fw-card { max-width: 100%; padding: 22px 18px; border-radius: 14px; } .loja-fw-card h2 { font-size: 1.1rem; } .loja-fw-card p { font-size: 0.88rem; } .loja-btn-wpp { font-size: 13px; padding: 9px 14px; } .loja-btn-map { font-size: 12px; padding: 9px 12px; } } /* ========================================================= SARTEC DIGITAL CARD — glass + circuit effects ========================================================= */ .sartec-digital-faixa::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(168,85,247,0.10) 39px, rgba(168,85,247,0.10) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(99,102,241,0.08) 39px, rgba(99,102,241,0.08) 40px); background-size: 40px 40px; opacity: 0.9; transition: opacity .28s ease, background-position .6s ease; pointer-events: none; border-radius: inherit; } .sartec-digital-faixa::after { content: ''; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,0.07) 0%, transparent 55%); pointer-events: none; border-radius: inherit; } .sartec-digital-faixa-row { position: relative; z-index: 2; } .sartec-digital-faixa:hover::before { opacity: 1; background-position: 4px 4px; } @media (prefers-reduced-motion: reduce) { .sartec-digital-faixa { transition: box-shadow .25s !important; transform: none !important; } .sartec-digital-faixa::before { transition: none !important; } } /* ========================================================= INTERNAL HERO — base reutilizável para páginas internas Mesmo conceito do .hero-fw da Home: imagem ocupa largura total + conteúdo sobre área livre ========================================================= */ .internal-hero { position: relative; overflow: hidden; background: #1E3A8A; min-height: 540px; display: flex; align-items: stretch; } /* Gradiente de implantação no topo (mesma barra que a Home) */ .internal-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--azul) 0%, var(--vermelho) 100%); z-index: 3; } /* Camada da imagem de fundo */ .internal-hero-media { position: absolute; inset: 0; z-index: 0; line-height: 0; } .internal-hero-media picture { display: block; width: 100%; height: 100%; } .internal-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; } /* Container do conteúdo (z-index acima da imagem) */ .internal-hero-content { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; padding: 72px 24px 80px; display: flex; align-items: center; } /* Card glassmorphism sobre a imagem */ .internal-hero-card { max-width: 480px; background: rgba(255, 255, 255, 0.90); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.70); border-radius: 18px; padding: 40px; box-shadow: 0 6px 32px rgba(15, 23, 42, 0.12); display: flex; flex-direction: column; gap: 18px; } /* Badge / kicker dentro do card */ .internal-hero-badge { align-self: flex-start; background: var(--azul); color: #FFFFFF; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; } .internal-hero-badge.vermelho { background: var(--vermelho); } /* Título */ .internal-hero-card h1 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(24px, 3.2vw, 40px); line-height: 1.12; margin: 0; letter-spacing: -0.02em; color: #0F172A; } /* Descrição */ .internal-hero-card p { margin: 0; font-size: 16px; line-height: 1.6; color: #475569; } /* CTAs */ .internal-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; } .internal-hero-btn-wpp { display: inline-flex; align-items: center; gap: 8px; background: #25D366; color: #FFFFFF; text-decoration: none; font-weight: 700; font-size: 15px; padding: 13px 22px; border-radius: 13px; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.28); transition: background .15s; } .internal-hero-btn-wpp:hover { background: #1FB858; color: #FFFFFF; } .internal-hero-btn-sec { display: inline-flex; align-items: center; background: transparent; color: var(--azul); border: 1.5px solid rgba(30, 58, 138, 0.45); text-decoration: none; font-weight: 700; font-size: 15px; padding: 13px 22px; border-radius: 13px; transition: background .15s; } .internal-hero-btn-sec:hover { background: rgba(30, 58, 138, 0.07); color: var(--azul); } /* ---- Modificadores de imagem por página ---- */ .hero-produtos .internal-hero-media img { object-position: center center; } .hero-lista-escolar .internal-hero-media img { object-position: center center; } .hero-escolas .internal-hero-media img { object-position: center center; } .hero-empresas .internal-hero-media img { object-position: center center; } .hero-copias .internal-hero-media img { object-position: center center; } /* ---- Responsividade mobile ---- */ @media (max-width: 640px) { .internal-hero { min-height: 680px; } .internal-hero-media img { object-position: center bottom; } .internal-hero-content { padding: 32px 16px 28px; align-items: flex-start; } .internal-hero-card { max-width: 100%; padding: 22px 18px; border-radius: 16px; gap: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .internal-hero-card h1 { font-size: clamp(20px, 5.5vw, 26px); } .internal-hero-card p { font-size: 14.5px; } .internal-hero-btn-wpp, .internal-hero-btn-sec { font-size: 14px; padding: 11px 18px; } } /* ======================== DADOS DO ALUNO ======================== */ .aluno-lista { background: white; border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: 18px 24px; margin-bottom: 20px; } .aluno-lista-titulo { font-weight: 700; font-size: .82rem; color: var(--texto); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 4px; } .aluno-lista-desc { font-size: .8rem; color: var(--texto-suave); margin: 0 0 14px; line-height: 1.45; } .aluno-lista-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (max-width: 640px) { .aluno-lista-grid { grid-template-columns: 1fr; } } .aluno-lista-field { display: flex; flex-direction: column; font-size: .78rem; color: var(--texto-suave); font-weight: 600; gap: 4px; } .aluno-lista-field-full { grid-column: 1 / -1; } .aluno-lista-field input { padding: 7px 10px; border: 1px solid var(--cinza-borda); border-radius: 8px; font-size: .88rem; background: white; color: var(--texto); font-family: inherit; font-weight: 400; } .aluno-lista-field input:focus { outline: 2px solid var(--azul); border-color: transparent; } /* ======================== PREFERÊNCIA DE ORÇAMENTO ======================== */ .preferencia-orcamento { background: white; border: 1px solid var(--cinza-borda); border-radius: var(--radius); padding: 18px 24px; margin-bottom: 20px; } .preferencia-titulo { font-weight: 700; font-size: .82rem; color: var(--texto); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 4px; } .preferencia-desc { font-size: .8rem; color: var(--texto-suave); margin: 0 0 14px; line-height: 1.45; } .preferencia-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @media (min-width: 720px) { .preferencia-options { grid-template-columns: repeat(4, 1fr); } } .preferencia-option { background: var(--cinza-fundo); border: 1.5px solid var(--cinza-borda); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; text-align: left; font-family: inherit; display: flex; flex-direction: column; gap: 3px; transition: border-color .15s, background .15s; } .preferencia-option strong { font-size: .85rem; color: var(--texto); font-weight: 700; line-height: 1.3; } .preferencia-option span { font-size: .74rem; color: var(--texto-suave); line-height: 1.4; } .preferencia-option:hover { border-color: var(--azul-claro); background: var(--azul-suave); } .preferencia-option.ativo { background: var(--azul-suave); border-color: var(--azul); } .preferencia-option.ativo strong { color: var(--azul); } /* ======================== MARCA / PREFERÊNCIA POR ITEM ======================== */ .marca-sugerida { font-size: .75rem; color: var(--texto-suave); margin: 0; line-height: 1.4; } .marca-sugerida strong { color: var(--texto); font-weight: 600; } .marca-preferencia-toggle { background: none; border: none; padding: 0; font-size: .75rem; color: var(--azul-claro); cursor: pointer; text-align: left; font-family: inherit; transition: color .15s; line-height: 1.4; } .marca-preferencia-toggle:hover { color: var(--azul); text-decoration: underline; } .marca-preferencia-wrap { margin-top: 4px; } .marca-preferencia-input { width: 100%; padding: 6px 10px; border: 1px solid var(--cinza-borda); border-radius: 8px; font-size: .82rem; background: white; color: var(--texto); font-family: inherit; transition: border-color .15s; } .marca-preferencia-input:focus { outline: 2px solid var(--azul); border-color: transparent; } /* ======================== LISTA ESCOLAR — MOBILE FIXES ======================== */ /* Single-column grid on narrow viewports */ @media (max-width: 640px) { .itens-grid { grid-template-columns: 1fr; /* Extra margin-bottom: bar on mobile is at bottom:80px + taller height */ margin-bottom: 200px; } /* Move sticky bar above FAB (icon ~50px + bottom 18px = top at ~68px from viewport bottom) */ .acoes-finais { bottom: 80px; } } /* Very narrow: stack bar vertically so resumo and buttons don't compete for space */ @media (max-width: 480px) { .acoes-finais { flex-direction: column; align-items: stretch; padding: 14px 16px; gap: 8px; } } /* ========================================================= PAGE TRANSITIONS Nota: body NÃO usa transform para não criar stacking context que quebraria position: fixed do FAB. ========================================================= */ body { opacity: 0; animation: page-fade-in 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes page-fade-in { to { opacity: 1; } } body.is-leaving { opacity: 0; transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { body { animation: none; opacity: 1; } body.is-leaving { transition: none; opacity: 1; } } /* ======================== MULTI-LISTA: FAIXAS ======================== */ #listas-container { margin-bottom: 16px; } .lista-faixa { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #F0FDF4; border: 1.5px solid #BBF7D0; border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; cursor: pointer; transition: background .15s, border-color .15s; } .lista-faixa:hover { background: #DCFCE7; border-color: #86EFAC; } .lista-faixa:last-child { margin-bottom: 0; } .lista-faixa-info { flex: 1; min-width: 0; } .lista-faixa-titulo { display: block; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: .95rem; color: #166534; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lista-faixa-resumo { font-size: .81rem; color: #166534; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .lista-faixa-btn { flex-shrink: 0; background: white; color: #166534; border: 1.5px solid #86EFAC; border-radius: 8px; padding: 7px 14px; font-size: .82rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .15s; white-space: nowrap; } .lista-faixa-btn:hover { background: #DCFCE7; } /* Nova lista: ocultar campos de responsável e aviso único */ #form-upload.nova-lista .campos-responsavel { display: none; } #form-upload.nova-lista .aviso-lista-unica { display: none; } /* Cabeçalho da nova lista no formulário */ .nova-lista-header { background: #EFF6FF; border: 1.5px solid #BFDBFE; border-radius: 12px; padding: 16px 20px; margin-bottom: 18px; } .nova-lista-header strong { display: block; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: .97rem; color: #1E3A8A; margin-bottom: 4px; } .nova-lista-header p { margin: 0; font-size: .86rem; color: #1E40AF; line-height: 1.5; } /* Badge de lista no resultado */ .resultado-lista-badge { display: inline-block; background: #1E3A8A; color: white; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: .82rem; border-radius: 8px; padding: 5px 13px; margin-bottom: 14px; letter-spacing: .02em; } /* Resumo total do pedido */ .resumo-total-pedido { background: #F0FDF4; border: 1.5px solid #BBF7D0; border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; } .resumo-total-titulo { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: .95rem; color: #166534; margin: 0 0 8px; } .resumo-total-titulo strong { color: #166534; } .resumo-total-lista { margin: 0; padding-left: 18px; font-size: .86rem; color: #166534; line-height: 1.8; } .resumo-total-lista em { font-style: normal; opacity: .65; } @media (max-width: 540px) { .lista-faixa { flex-direction: column; align-items: flex-start; gap: 10px; } .lista-faixa-btn { align-self: flex-end; } .lista-faixa-resumo { white-space: normal; } } /* ======================== VALIDAÇÃO DE CAMPOS OBRIGATÓRIOS ======================== */ .campo-req { color: var(--vermelho); margin-left: 2px; } .campo-obrigatorio-nota { font-size: .68rem; font-weight: 400; color: var(--texto-suave); text-transform: none; letter-spacing: 0; margin-left: 6px; } .campo-dica { font-size: .75rem; color: var(--texto-suave); line-height: 1.4; margin-top: 2px; display: block; } .campo-erro { border-color: var(--vermelho) !important; } .campo-erro:focus { outline: 2px solid rgba(220,38,38,.25) !important; border-color: var(--vermelho) !important; } .aluno-campo-erro-msg { font-size: .8rem; color: var(--vermelho); margin: 4px 0 0; font-weight: 600; line-height: 1.4; } /* ======================== UPLOAD — FEEDBACK DE ARQUIVO ======================== */ @keyframes spin { to { transform: rotate(360deg); } } .upload-spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(30,58,138,.18); border-top-color: #1E3A8A; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; flex-shrink: 0; } .upload-area.upload-lendo { border-color: #93C5FD; background: #EFF6FF; transition: border-color .2s, background .2s; } .upload-area.upload-ok { border-color: #86EFAC; background: #F0FDF4; transition: border-color .25s, background .25s; } .upload-area.upload-ok .label, .upload-area.upload-lendo .label { color: inherit; } /* ======================== BANNER — PEDIDO SALVO ======================== */ .pedido-salvo-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 10px; padding: 11px 18px; margin-bottom: 18px; font-size: .84rem; color: #1E3A8A; line-height: 1.4; } .pedido-salvo-texto { display: flex; flex-direction: column; gap: 2px; } .pedido-salvo-nota { font-size: .73rem; color: #3B82F6; opacity: .8; } .pedido-salvo-limpar { background: none; border: none; color: #1D4ED8; font-size: .81rem; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; font-family: inherit; white-space: nowrap; flex-shrink: 0; } .pedido-salvo-limpar:hover { color: #1E3A8A; } @media (max-width: 480px) { .pedido-salvo-banner { flex-direction: column; align-items: flex-start; gap: 8px; } } /* ======================== UPLOAD — MÚLTIPLOS ARQUIVOS ======================== */ .upload-arquivos-lista { display: block; font-size: .73rem; color: #166534; margin-top: 4px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* ======================== ERROS MULTI-ARQUIVO — BLOQUEIO E CONFIRMAÇÃO ======================== */ .lista-erro-dica { font-size: .82rem; color: inherit; opacity: .75; margin: 6px 0 0; line-height: 1.5; } .lista-erro-btn-novo { display: inline-block; margin-top: 12px; background: white; border: 1.5px solid currentColor; border-radius: 8px; padding: 7px 16px; font-size: .84rem; font-weight: 700; color: #C53030; cursor: pointer; font-family: inherit; transition: background .15s; } .lista-erro-btn-novo:hover { background: #FFF5F5; } .lista-confirmacao-card { background: #FFFBEB; border-color: #FCD34D; color: #78350F; } .lista-confirmacao-card .lista-erro-ico { font-size: 1.3rem; color: #D97706; } .lista-confirmacao-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .lista-confirmacao-btns .btn-primary { font-size: .88rem; padding: 10px 18px; } .lista-confirmacao-btns .btn-ghost { font-size: .88rem; padding: 10px 18px; } /* ====================================================== FAIXA SARTEC DIGITAL COMPACTA (páginas internas) ====================================================== */ .sdc-faixa { background: linear-gradient(90deg, #0D1F4A 0%, #0F2660 100%); padding: 12px 20px; } .sdc-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .sdc-copy { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; } .sdc-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7FA3F2; white-space: nowrap; flex-shrink: 0; } .sdc-sep { width: 1px; height: 13px; background: rgba(127,163,242,.28); flex-shrink: 0; } .sdc-text { font-size: 13px; color: #94A3B8; line-height: 1.4; } .sdc-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(127,163,242,.3); color: #CBD5E1; text-decoration: none; font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 8px; white-space: nowrap; transition: background .2s, border-color .2s; flex-shrink: 0; } .sdc-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(127,163,242,.55); } @media (max-width: 640px) { .sdc-text { display: none; } } /* ====================================================== HOME LIST PREVIEW — REDESIGN ANIMAÇÃO ====================================================== */ /* Cards: começam invisíveis, entram com cascade-in */ .hlp-card { opacity: 0; transform: translateY(-7px); transition: background .25s, box-shadow .25s, opacity .28s, transform .28s; } .hlp-card.hlp-card-in { opacity: 1; transform: translateY(0); } /* Upload area — visível por padrão, JS oculta ao revelar itens */ .hlp-upload-area { flex: 1; padding: 20px 18px; display: flex; flex-direction: column; justify-content: center; gap: 10px; } .hlp-file-card { display: flex; align-items: center; gap: 12px; background: #EFF6FF; border: 1.5px solid #BFDBFE; border-radius: 11px; padding: 13px 15px; } .hlp-file-ico { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 38px; height: 44px; background: white; border: 1px solid #BFDBFE; border-radius: 7px; color: #2563EB; flex-shrink: 0; } .hlp-file-ext { font-size: 8px; font-weight: 800; letter-spacing: .04em; color: #DC2626; background: #FEE2E2; border-radius: 3px; padding: 1px 4px; line-height: 1.4; } .hlp-file-info { flex: 1; min-width: 0; } .hlp-file-name { font-size: 13px; font-weight: 700; color: #1E293B; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hlp-file-status { font-size: 12px; color: #16A34A; font-weight: 600; display: block; margin-top: 3px; } .hlp-analisar-btn { width: 100%; background: #1E3A8A; color: white; border: none; border-radius: 10px; padding: 12px 16px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: default; text-align: center; transition: background .2s, opacity .15s, transform .1s; } .hlp-analisar-btn.hlp-analisando { background: #475569; } .hlp-analisar-btn.hlp-clicking { opacity: 0.72; transform: scale(0.97); } .hlp-analysis-row { display: none; align-items: center; gap: 10px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 9px; padding: 11px 13px; } .hlp-analysis-l1 { font-size: 13px; font-weight: 600; color: #1E293B; display: block; } .hlp-analysis-l2 { font-size: 12px; color: #64748B; display: block; margin-top: 2px; } .hlp-upload-spin { width: 13px; height: 13px; border: 2px solid #CBD5E1; border-top-color: #3B82F6; border-radius: 50%; display: inline-block; animation: spin .8s linear infinite; flex-shrink: 0; } /* Itens e rodapé: ocultos por padrão — JS mostra após análise */ .hlp-items-area { flex: 1; display: none; overflow: hidden; } .hlp-footer { flex-shrink: 0; display: none; } /* "Não quero" ativo: vermelho no demo */ .hlp-opt-exc.hlp-ativo { background: #FEE2E2; color: #B91C1C; } /* Confirmação final */ .hlp-confirm { position: absolute; inset: 0; background: rgba(15,23,42,0.52); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .38s; z-index: 10; } .hlp-confirm.hlp-confirm-visible { opacity: 1; } .hlp-confirm-inner { background: white; border-radius: 14px; padding: 22px 20px; width: 82%; max-width: 240px; text-align: center; transform: scale(0.88); transition: transform .38s; box-shadow: 0 8px 32px rgba(0,0,0,0.16); } .hlp-confirm.hlp-confirm-visible .hlp-confirm-inner { transform: scale(1); } .hlp-confirm-ico { width: 44px; height: 44px; background: #DCFCE7; color: #16A34A; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; line-height: 1; margin: 0 auto 12px; } .hlp-confirm-title { display: block; font-size: 14px; font-weight: 700; color: #0F172A; margin-bottom: 5px; } .hlp-confirm-sub { display: block; font-size: 12px; color: #475569; line-height: 1.55; } /* CHIPS: preferência / marca / cor — display:none até JS mostrar */ .hlp-chip { display: none; margin-top: 4px; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; opacity: 0; transition: opacity .3s ease; } .hlp-chip.hlp-chip-visible { opacity: 1; } /* PREF AREA: add-pref-btn + typing-row + chip */ .hlp-pref-area { display: none; margin-top: 4px; } .hlp-card.hlp-is-active .hlp-pref-area, .hlp-card.hlp-pref-done .hlp-pref-area { display: block; } .hlp-add-pref-btn { display: block; font-size: 11px; font-weight: 600; color: #60A5FA; line-height: 1.4; padding: 2px 0; cursor: default; } .hlp-add-pref-btn.hlp-clicking { opacity: 0.5; } .hlp-typing-row { display: none; align-items: center; font-size: 11px; line-height: 1.4; padding: 2px 0; white-space: nowrap; overflow: hidden; } .hlp-typing-label { color: #64748B; font-weight: 500; flex-shrink: 0; } .hlp-typing-text { color: #1E3A8A; font-weight: 600; } .hlp-cursor { display: inline-block; color: #3B82F6; font-weight: 300; margin-left: 1px; animation: hlpBlink .8s step-end infinite; } @keyframes hlpBlink { 50% { opacity: 0; } } /* SUMMARY OVERLAY */ .hlp-summary { position: absolute; inset: 0; background: rgba(255,255,255,0.98); z-index: 8; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .28s ease; border-radius: inherit; } .hlp-summary.hlp-summary-visible { opacity: 1; pointer-events: auto; } .hlp-summary-inner { width: 100%; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; } .hlp-summary-label { font-size: 13px; font-weight: 700; color: #0F172A; margin: 0 0 2px; } .hlp-summary-meta { font-size: 11px; color: #64748B; margin: 0 0 10px; } .hlp-sum-block { margin-bottom: 6px; } .hlp-sum-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: #334155; padding: 3px 0; } .hlp-sum-row span { font-weight: 700; color: #0F172A; white-space: nowrap; margin-left: 8px; } .hlp-sum-pref { font-size: 10.5px; color: #1D4ED8; margin: 1px 0 0; font-weight: 600; } .hlp-summary-send-btn { margin-top: 10px; display: block; text-align: center; } /* WAPP OVERLAY */ .hlp-wapp { position: absolute; inset: 0; background: #ECE5DD; z-index: 9; opacity: 0; pointer-events: none; transition: opacity .28s ease; border-radius: inherit; overflow: hidden; } .hlp-wapp.hlp-wapp-visible { opacity: 1; pointer-events: auto; } .hlp-wapp-inner { display: flex; flex-direction: column; height: 100%; } .hlp-wapp-topbar { background: #075E54; color: white; display: flex; align-items: center; gap: 8px; padding: 11px 16px; font-size: 13px; font-weight: 700; flex-shrink: 0; } .hlp-wapp-chat { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; justify-content: flex-end; } .hlp-wapp-bubble { align-self: flex-end; background: #DCF8C6; border-radius: 12px 12px 3px 12px; padding: 9px 12px 5px; max-width: 90%; opacity: 0; transform: scale(0.92) translateY(6px); transition: opacity .3s ease, transform .3s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.12); } .hlp-wapp-bubble.hlp-wapp-bubble-visible { opacity: 1; transform: scale(1) translateY(0); } .hlp-wapp-bubble p { margin: 0 0 3px; font-size: 12px; color: #111; line-height: 1.45; } .hlp-wapp-items { font-size: 10.5px !important; color: #475569 !important; } .hlp-wapp-check { display: block; text-align: right; font-size: 10px; color: #4FC3F7; margin-top: 3px; } .hlp-wapp-bar { background: white; border-top: 1px solid #D1D5DB; padding: 8px 12px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .hlp-wapp-input { flex: 1; background: #F0F2F5; border-radius: 20px; padding: 7px 12px; font-size: 11.5px; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hlp-wapp-send { background: #25D366; color: white; font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 20px; cursor: default; flex-shrink: 0; white-space: nowrap; transition: opacity .15s, transform .1s; } .hlp-wapp-send.hlp-clicking { opacity: 0.7; transform: scale(0.94); } /* Prefers-reduced-motion: estado estático final */ @media (prefers-reduced-motion: reduce) { .hlp-card { opacity: 1 !important; transform: none !important; } .hlp-chip { display: inline-block !important; opacity: 1 !important; } .hlp-pref-area { display: block !important; } .hlp-add-pref-btn { display: none !important; } .hlp-upload-area { display: none !important; } .hlp-items-area { display: block !important; } .hlp-footer { display: flex !important; } .hlp-cursor { animation: none !important; } }