/* ============================================================ HUB LOGÍSTICO — Color Printi Estilos da seção "Ponto de Coleta Oficial". Depende das fontes Plus Jakarta Sans + Inter carregadas no do site (ver instruções de instalação). ============================================================ */ .hub-logistico { --cp-primary: #0F2C59; --cp-primary-dark: #0a1e3d; --cp-secondary: #00A8E8; --cp-cta: #FF6B35; --cp-cta-dark: #e5551f; --cp-bg: #F8F9FA; --cp-surface: #ffffff; --cp-border: #e5e8ec; --cp-text: #1A1D20; --cp-text-muted: #5b6470; background: var(--cp-bg); color: var(--cp-text); padding: clamp(2.5rem, 6vw, 5rem) 1.25rem; font-family: "Inter", "Roboto", system-ui, -apple-system, sans-serif; } .hub-logistico * { box-sizing: border-box; } .hub-logistico h2, .hub-logistico h3, .hub-logistico h4 { font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif; } .hub-container { max-width: 1100px; margin: 0 auto; } .hub-header { text-align: center; max-width: 720px; margin: 0 auto clamp(2rem, 5vw, 3rem); } .hub-badge { display: inline-block; background: var(--cp-cta); color: #fff; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; padding: 0.4rem 0.9rem; border-radius: 999px; margin-bottom: 1rem; } .hub-header h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 0.75rem; font-weight: 800; color: var(--cp-primary); } .hub-subtitle { color: var(--cp-text-muted); font-size: 1.05rem; line-height: 1.6; margin: 0; } .hub-content-card { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2rem); max-width: 760px; margin: 0 auto; } .hub-content-card h3 { margin: 0 0 0.75rem; font-size: 1.3rem; font-weight: 800; color: var(--cp-primary); } .hub-content-card p { color: var(--cp-text-muted); line-height: 1.65; margin: 0 0 1rem; } .hub-subheading { margin: 1.5rem 0 0.75rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cp-text-muted); font-weight: 700; } .hub-rules { margin: 0; padding-left: 1.1rem; color: var(--cp-text-muted); line-height: 1.7; font-size: 0.94rem; } .hub-rules li { margin-bottom: 0.3rem; } .hub-carriers-block { max-width: 1000px; margin: clamp(2rem, 5vw, 3rem) auto 0; text-align: center; } .hub-carriers-heading { margin: 0 0 1.25rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cp-text-muted); font-weight: 700; } .hub-carousel { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .hub-carousel__track { display: flex; width: max-content; gap: 2.5rem; align-items: center; animation: hub-carousel-scroll 28s linear infinite; } .hub-carousel:hover .hub-carousel__track { animation-play-state: paused; } .hub-carousel__item { flex: none; display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; padding: 1rem; border: 1px solid var(--cp-border); border-radius: 10px; background: var(--cp-surface); color: var(--cp-text-muted); font-weight: 700; font-size: 0.9rem; white-space: nowrap; } .hub-carousel__item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } @keyframes hub-carousel-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .hub-note { margin-top: 1.25rem !important; font-size: 0.78rem !important; color: #94a3b8 !important; } .hub-segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto clamp(2rem, 5vw, 3rem); } .segment-card { background: var(--cp-primary); border-radius: 20px; padding: 0 1.5rem 2rem; text-align: center; } .segment-card__photo { aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; margin: -1.75rem 0 1.5rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25); } .segment-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .segment-card__photo--placeholder { display: flex; align-items: center; justify-content: center; background: #1c3d6e; color: #9db4d4; font-size: 0.85rem; font-weight: 600; } .segment-card h3 { color: #fff; font-size: 1.05rem; font-weight: 800; margin: 0 0 0.4rem; letter-spacing: 0.01em; } .segment-card__subtitle { color: var(--cp-secondary); font-size: 0.88rem; font-weight: 700; margin: 0 0 0.6rem; } .segment-card__desc { color: #c3d3e8; font-size: 0.9rem; line-height: 1.55; margin: 0; } @media (max-width: 860px) { .hub-segments { grid-template-columns: 1fr; max-width: 420px; } }