.elementor-42547 .elementor-element.elementor-element-bf7c671 > .elementor-widget-container{margin:-10px -10px -10px -10px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-bf7c671 *//* * SETA IT — /locacao-de-switches-cisco/ * Cole em: Elementor → ícone de engrenagem (Page Settings) → Custom CSS * Este CSS é injetado no apenas nesta página. * Prefixo: .sc- (switches cisco namespace) */ /* ── Variáveis ─────────────────────────────────────────────── */ /* ── Reset mínimo nos blocos ────────────────────────────────── */ .sc-root *, .sc-root *::before, .sc-root *::after { box-sizing: border-box; margin: 0; padding: 0; } .sc-root { font-family: 'Inter', 'Segoe UI', sans-serif; color: #1a2733; line-height: 1.6; } .sc-root a { text-decoration: none; color: inherit; } /* força branco em links dentro de fundos escuros */ .sc-hero a:not(.sc-btn), .sc-stats a, .sc-benefits a:not(.sc-btn), .sc-cta a:not(.sc-btn), .sc-related a { color: #ffffff !important; } /* força navy em links dentro de fundos claros */ .sc-oque a:not(.sc-btn), .sc-models a:not(.sc-btn), .sc-table-section a:not(.sc-btn), .sc-howto a:not(.sc-btn), .sc-sectors a:not(.sc-btn), .sc-faq a:not(.sc-btn) { color: #19324C !important; } /* CTA contacts (fundo navy) — branco explícito */ .sc-cta-contacts a { color: rgba(255,255,255,.75) !important; } .sc-cta-contacts a:hover { color: #ffffff !important; } .sc-fw { width: 100vw; margin-left: calc(-50vw + 50%); position: relative; } /* ── Tipografia ─────────────────────────────────────────────── */ .sc-root h1, .sc-root h2, .sc-root h3, .sc-root h4 { font-weight: 700; line-height: 1.2; color: #19324C; } .sc-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #E03A00; display: inline-block; margin-bottom: 12px; } .sc-divider { height: 3px; width: 50px; background: #E03A00; border-radius: 2px; margin: 16px 0 24px; } .sc-divider-c { margin: 16px auto 24px; } /* ── Botões ─────────────────────────────────────────────────── */ .sc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 6px; font-weight: 700; font-size: .95rem; cursor: pointer; transition: all .2s; border: none; font-family: inherit; text-decoration: none !important; } .sc-btn-primary, .sc-btn-primary:link, .sc-btn-primary:visited { background: #E03A00 !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(224,58,0,.35); } .sc-btn-primary:hover, .sc-btn-primary:focus { background: #c43200 !important; color: #ffffff !important; transform: translateY(-1px); } .sc-btn-outline, .sc-btn-outline:link, .sc-btn-outline:visited { background: transparent !important; color: #ffffff !important; border: 2px solid rgba(255,255,255,.5); } .sc-btn-outline:hover, .sc-btn-outline:focus { border-color: #ffffff !important; background: rgba(255,255,255,.08) !important; color: #ffffff !important; } /* ── Section ────────────────────────────────────────────────── */ .sc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .sc-section { padding: 80px 24px; max-width: 1200px; margin: 0 auto; } /* ── Breadcrumb ─────────────────────────────────────────────── */ .sc-breadcrumb { background: #0f2035; padding: 12px 24px; } .sc-breadcrumb nav { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 8px; font-size: .8rem; color: rgba(255,255,255,.6); } .sc-breadcrumb a { color: rgba(255,255,255,.6); transition: color .2s; } .sc-breadcrumb a:hover { color: #ff8c6b; } .sc-breadcrumb .sep { opacity: .4; } .sc-breadcrumb .cur { color: rgba(255,255,255,.9); } /* ── Hero ───────────────────────────────────────────────────── */ .sc-hero { background: #19324C; position: relative; overflow: hidden; padding: 72px 24px 80px; } .sc-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(224,58,0,.08) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 20% 80%, rgba(255,255,255,.03) 0%, transparent 70%); } .sc-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: #E03A00; opacity: .5; } .sc-hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: .04; background-image: linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px); background-size: 40px 40px; } .sc-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 420px; gap: 60px; align-items: center; } .sc-hero-kicker { display: inline-flex; align-items: center; gap: 8px; background: rgba(224,58,0,.15); border: 1px solid rgba(224,58,0,.3); color: #ff8c6b; padding: 6px 14px; border-radius: 20px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px; } .sc-hero h1 { font-size: clamp(2rem,4vw,3rem); color: #ffffff; font-weight: 800; line-height: 1.1; margin-bottom: 20px; } .sc-hero h1 em { color: #ff8c6b; font-style: normal; } .sc-hero-desc { color: rgba(255,255,255,.75); font-size: 1.1rem; max-width: 520px; margin-bottom: 32px; line-height: 1.7; } .sc-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .sc-hero-trust { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); display: flex; gap: 28px; flex-wrap: wrap; } .sc-hero-trust li { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: rgba(255,255,255,.65); list-style: none; } /* Hero Form Box */ .sc-hero-form { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 28px; backdrop-filter: blur(8px); } .sc-hero-form h3 { color: #ffffff; font-size: 1.1rem; margin-bottom: 6px; } .sc-hero-form p { color: rgba(255,255,255,.55); font-size: .82rem; margin-bottom: 20px; } .sc-hs-wrap { min-height: 300px; } /* ── Stats bar ──────────────────────────────────────────────── */ .sc-stats { background: #0f2035; border-bottom: 3px solid #E03A00; } .sc-stats-inner { max-width: 1200px; margin: 0 auto; padding: 28px 24px; display: grid; grid-template-columns: repeat(5,1fr); } .sc-stat { text-align: center; padding: 16px 12px; border-right: 1px solid rgba(255,255,255,.08); } .sc-stat:last-child { border-right: none; } .sc-stat strong { font-size: 1.75rem; font-weight: 800; color: #E03A00; display: block; line-height: 1; margin-bottom: 4px; } .sc-stat span { font-size: .75rem; color: rgba(255,255,255,.6); letter-spacing: .03em; line-height: 1.3; } /* ── O que é ────────────────────────────────────────────────── */ .sc-oque { background: #ffffff; } .sc-oque-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .sc-oque-text h2 { font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom: 20px; } .sc-oque-text p { color: #334155; margin-bottom: 18px; font-size: 1rem; line-height: 1.75; } .sc-tldr { background: #f8f9fa; border-left: 4px solid #E03A00; border-radius: 0 8px 8px 0; padding: 20px 24px; margin: 28px 0; } .sc-tldr-label { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #E03A00; margin-bottom: 8px; } .sc-tldr p { font-size: .9rem; color: #334155; margin: 0; line-height: 1.6; } .sc-oque-card { background: #19324C; border-radius: 12px; padding: 28px; color: #ffffff; } .sc-oque-card h4 { color: #ffffff; font-size: 1rem; margin-bottom: 20px; opacity: .9; } .sc-oque-feature { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; } .sc-oque-feature:last-child { margin-bottom: 0; } .sc-oque-icon { width: 36px; height: 36px; background: rgba(224,58,0,.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sc-oque-feature strong { display: block; font-size: .88rem; color: #ffffff; margin-bottom: 2px; } .sc-oque-feature em { font-style: normal; font-size: .8rem; color: rgba(255,255,255,.55); line-height: 1.4; display: block; } /* ── Seção header (títulos de seção) ────────────────────────── */ .sc-sh { text-align: center; margin-bottom: 48px; } .sc-sh h2 { font-size: clamp(1.6rem,3vw,2.2rem); } .sc-sh p { color: #64748b; max-width: 560px; margin: 12px auto 0; font-size: 1rem; } /* ── Modelos ────────────────────────────────────────────────── */ .sc-models { background: #f8f9fa; } .sc-tabs { display: flex; gap: 8px; margin-bottom: 36px; flex-wrap: wrap; } .sc-tab { padding: 9px 20px; border-radius: 6px; cursor: pointer; font-size: .85rem; font-weight: 600; transition: all .2s; background: #ffffff; color: #19324C; border: 2px solid #e2e8f0; } .sc-tab.active, .sc-tab:hover { background: #19324C; color: #ffffff; border-color: #19324C; } .sc-tab-panel { display: none; } .sc-tab-panel.active { display: block; } .sc-models-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 20px; } .sc-model-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 24px; transition: all .25s; position: relative; overflow: hidden; } .sc-model-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #19324C; transition: background .2s; } .sc-model-card:hover { border-color: #19324C; box-shadow: 0 8px 28px rgba(25,50,76,.12); transform: translateY(-2px); } .sc-model-card:hover::before { background: #E03A00; } .sc-model-family { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #E03A00; margin-bottom: 4px; } .sc-model-name { font-size: 1.25rem; font-weight: 800; color: #19324C; margin-bottom: 12px; } .sc-model-desc { font-size: .85rem; color: #64748b; margin-bottom: 16px; line-height: 1.55; } .sc-model-specs { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; } .sc-model-spec { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: #334155; } .sc-model-spec svg { flex-shrink: 0; color: #E03A00; } .sc-model-use { padding-top: 14px; border-top: 1px solid #f0f2f5; } .sc-model-use span { font-size: .75rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: 6px; } .sc-model-tags { display: flex; gap: 6px; flex-wrap: wrap; } .sc-model-tag { background: #f0f2f5; color: #334155; padding: 3px 9px; border-radius: 4px; font-size: .73rem; font-weight: 600; } /* ── Tabela ─────────────────────────────────────────────────── */ .sc-table-section { background: #ffffff; } .sc-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid #e2e8f0; } .sc-table { width: 100%; border-collapse: collapse; min-width: 700px; font-size: .85rem; } .sc-table thead th { background: #19324C; color: #ffffff; padding: 14px 18px; text-align: left; font-weight: 700; font-size: .82rem; white-space: nowrap; } .sc-table thead th:first-child { border-radius: 10px 0 0 0; } .sc-table thead th:last-child { border-radius: 0 10px 0 0; } .sc-table tbody tr { border-bottom: 1px solid #f0f2f5; transition: background .15s; } .sc-table tbody tr:last-child { border-bottom: none; } .sc-table tbody tr:hover { background: #f8f9fa; } .sc-table tbody td { padding: 13px 18px; color: #334155; vertical-align: middle; } .sc-table tbody td:first-child { font-weight: 700; color: #19324C; } .sc-check { color: #16a34a; } .sc-dash { color: #e2e8f0; } /* ── Benefícios ─────────────────────────────────────────────── */ .sc-benefits { background: #19324C; } .sc-benefits .sc-sh h2 { color: #ffffff; } .sc-benefits .sc-sh p { color: rgba(255,255,255,.6); } .sc-benefits-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .sc-benefit { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 28px; transition: all .2s; } .sc-benefit:hover { background: rgba(255,255,255,.08); border-color: rgba(224,58,0,.3); } .sc-benefit-icon { width: 48px; height: 48px; background: rgba(224,58,0,.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .sc-benefit h3 { color: #ffffff; font-size: 1rem; margin-bottom: 10px; } .sc-benefit p { color: rgba(255,255,255,.6); font-size: .875rem; line-height: 1.65; } /* ── HowTo ──────────────────────────────────────────────────── */ .sc-howto { background: #ffffff; } .sc-howto-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; position: relative; } .sc-howto-steps::before { content: ''; position: absolute; top: 32px; left: calc(10% + 32px); right: calc(10% + 32px); height: 2px; background: linear-gradient(90deg,#E03A00,#19324C); z-index: 0; } .sc-step { text-align: center; padding: 0 12px; position: relative; z-index: 1; } .sc-step-n { width: 64px; height: 64px; border-radius: 50%; background: #19324C; color: #ffffff; font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; position: relative; z-index: 2; box-shadow: 0 0 0 4px #ffffff, 0 0 0 6px #19324C; } .sc-step-n.hi { background: #E03A00; box-shadow: 0 0 0 4px #ffffff, 0 0 0 6px #E03A00; } .sc-step h4 { font-size: .9rem; color: #19324C; margin-bottom: 8px; } .sc-step p { font-size: .78rem; color: #64748b; line-height: 1.5; } /* ── Setores ────────────────────────────────────────────────── */ .sc-sectors { background: #f8f9fa; } .sc-sectors-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .sc-sector { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; display: flex; align-items: center; gap: 14px; transition: all .2s; } .sc-sector:hover { border-color: #19324C; box-shadow: 0 4px 16px rgba(25,50,76,.1); } .sc-sector-icon { width: 40px; height: 40px; background: rgba(25,50,76,.08); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sc-sector span { font-size: .88rem; font-weight: 600; color: #19324C; } /* ── Links internos ─────────────────────────────────────────── */ .sc-related { background: #19324C !important; } .sc-related .sc-wrap { padding-top: 56px; padding-bottom: 56px; } .sc-related-header { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; } .sc-related-header h3 { color: #ffffff !important; font-size: 1.1rem; font-weight: 700; margin: 0; white-space: nowrap; } .sc-related-line { flex: 1; height: 1px; background: rgba(255,255,255,.1); } .sc-related-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .sc-related-grid li { list-style: none; } .sc-related a, .sc-related a:link, .sc-related a:visited { display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 22px 20px !important; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 10px !important; color: #ffffff !important; transition: all .25s !important; position: relative !important; overflow: hidden !important; text-decoration: none !important; } .sc-related a::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #E03A00; transform: scaleX(0); transition: transform .25s; } .sc-related a:hover { background: rgba(255,255,255,.12) !important; border-color: rgba(224,58,0,.5) !important; transform: translateY(-2px); color: #ffffff !important; } .sc-related a:hover::before { transform: scaleX(1); } .sc-related-icon { width: 40px; height: 40px; background: rgba(224,58,0,.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sc-related-icon svg { stroke: #ff8c6b !important; } .sc-related-text strong { display: block !important; font-size: .9rem !important; font-weight: 700 !important; color: #ffffff !important; margin-bottom: 4px !important; } .sc-related-text span { font-size: .78rem !important; color: rgba(255,255,255,.6) !important; line-height: 1.4 !important; display: block !important; } .sc-related-arrow { margin-top: auto; font-size: .75rem; color: #ff8c6b !important; display: flex; align-items: center; gap: 4px; font-weight: 600; } .sc-related-arrow svg { stroke: #ff8c6b !important; } @media (max-width: 768px) { .sc-related-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 480px) { .sc-related-grid { grid-template-columns: 1fr; } } /* ── FAQ ────────────────────────────────────────────────────── */ .sc-faq { background: #f8f9fa; } .sc-faq-list { max-width: 800px; margin: 0 auto; } .sc-faq-item { border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 10px; background: #ffffff; overflow: hidden; } .sc-faq-q { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 22px; cursor: pointer; user-select: none; font-weight: 600; font-size: .95rem; color: #ffffff; background: #E03A00; transition: background .15s; } .sc-faq-q:hover { background: #c43200; } .sc-faq-q[aria-expanded="true"] { background: #19324C; color: #ffffff; } .sc-faq-icon { width: 22px; height: 22px; flex-shrink: 0; border: 2px solid currentColor; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .25s; } .sc-faq-q[aria-expanded="true"] .sc-faq-icon { transform: rotate(45deg); } .sc-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .sc-faq-a-in { padding: 0 22px 18px; font-size: .88rem; color: #334155; line-height: 1.7; } /* ── CTA Final ──────────────────────────────────────────────── */ .sc-cta { background: linear-gradient(135deg,#19324C 0%,#0f2035 100%); position: relative; overflow: hidden; } .sc-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 100% at 70% 50%,rgba(224,58,0,.12) 0%,transparent 65%); pointer-events: none; } .sc-cta-inner { max-width: 900px; margin: 0 auto; text-align: center; padding: 80px 24px; position: relative; z-index: 2; } .sc-cta-inner h2 { color: #ffffff; font-size: clamp(1.75rem,4vw,2.5rem); margin-bottom: 16px; } .sc-cta-inner p { color: rgba(255,255,255,.7); font-size: 1.05rem; max-width: 580px; margin: 0 auto 36px; } .sc-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .sc-cta-contacts { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); } .sc-cta-contacts li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); font-size: .88rem; list-style: none; } /* ── WhatsApp flutuante ─────────────────────────────────────── */ .sc-wa { position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.4); transition: transform .2s, box-shadow .2s; } .sc-wa:hover { transform: scale(1.08); box-shadow: 0 6px 26px rgba(37,211,102,.5); } /* ── Responsivo ─────────────────────────────────────────────── */ @media (max-width: 1024px) { .sc-hero-inner { grid-template-columns: 1fr; } .sc-hero-form { display: none; } .sc-stats-inner { grid-template-columns: repeat(3,1fr); } .sc-stat:nth-child(3) { border-right: none; } .sc-oque-grid { grid-template-columns: 1fr; } .sc-oque-card { display: none; } .sc-benefits-grid { grid-template-columns: repeat(2,1fr); } .sc-howto-steps { grid-template-columns: 1fr; gap: 24px; } .sc-howto-steps::before { display: none; } .sc-step { text-align: left; display: flex; gap: 20px; align-items: flex-start; } .sc-step-n { margin: 0; flex-shrink: 0; } .sc-sectors-grid { grid-template-columns: repeat(2,1fr); } .sc-related-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 768px) { .sc-section { padding: 56px 20px; } .sc-stats-inner { grid-template-columns: repeat(2,1fr); } .sc-stat:nth-child(2) { border-right: none; } .sc-models-grid { grid-template-columns: 1fr; } .sc-benefits-grid { grid-template-columns: 1fr; } .sc-sectors-grid { grid-template-columns: 1fr 1fr; } .sc-related-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .sc-hero { padding: 48px 20px 60px; } .sc-stats-inner { grid-template-columns: 1fr 1fr; } .sc-sectors-grid { grid-template-columns: 1fr; } .sc-hero-actions { flex-direction: column; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-edef41f *//* * SETA IT — /locacao-de-switches-cisco/ * Cole em: Elementor → ícone de engrenagem (Page Settings) → Custom CSS * Este CSS é injetado no apenas nesta página. * Prefixo: .sc- (switches cisco namespace) */ /* ── Variáveis ─────────────────────────────────────────────── */ .elementor-page { --navy: #19324C; --navy-d: #0f2035; --navy-l: #234868; --orange: #E03A00; --orange-h: #c43200; --orange-s: #ff8c6b; --white: #ffffff; --g50: #f8f9fa; --g100: #f0f2f5; --g200: #e2e8f0; --g500: #64748b; --g700: #334155; } /* ── Reset mínimo nos blocos ────────────────────────────────── */ .sc-root *, .sc-root *::before, .sc-root *::after { box-sizing: border-box; margin: 0; padding: 0; } .sc-root { font-family: 'Inter', 'Segoe UI', sans-serif; color: #1a2733; line-height: 1.6; } .sc-root a { text-decoration: none; color: inherit; } .sc-fw { width: 100vw; margin-left: calc(-50vw + 50%); position: relative; } /* ── Tipografia ─────────────────────────────────────────────── */ .sc-root h1, .sc-root h2, .sc-root h3, .sc-root h4 { font-weight: 700; line-height: 1.2; color: var(--navy); } .sc-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--orange); display: inline-block; margin-bottom: 12px; } .sc-divider { height: 3px; width: 50px; background: var(--orange); border-radius: 2px; margin: 16px 0 24px; } .sc-divider-c { margin: 16px auto 24px; } /* ── Botões ─────────────────────────────────────────────────── */ .sc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 6px; font-weight: 700; font-size: .95rem; cursor: pointer; transition: all .2s; border: none; font-family: inherit; } .sc-btn-primary { background: var(--orange); color: var(--white); box-shadow: 0 4px 14px rgba(224,58,0,.35); } .sc-btn-primary:hover { background: var(--orange-h); transform: translateY(-1px); } .sc-btn-outline { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.5); } .sc-btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,.08); } /* ── Section ────────────────────────────────────────────────── */ .sc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .sc-section { padding: 80px 24px; max-width: 1200px; margin: 0 auto; } /* ── Breadcrumb ─────────────────────────────────────────────── */ .sc-breadcrumb { background: var(--navy-d); padding: 12px 24px; } .sc-breadcrumb nav { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 8px; font-size: .8rem; color: rgba(255,255,255,.6); } .sc-breadcrumb a { color: rgba(255,255,255,.6); transition: color .2s; } .sc-breadcrumb a:hover { color: var(--orange-s); } .sc-breadcrumb .sep { opacity: .4; } .sc-breadcrumb .cur { color: rgba(255,255,255,.9); } /* ── Hero ───────────────────────────────────────────────────── */ .sc-hero { background: var(--navy); position: relative; overflow: hidden; padding: 72px 24px 80px; } .sc-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(224,58,0,.08) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 20% 80%, rgba(255,255,255,.03) 0%, transparent 70%); } .sc-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--orange); opacity: .5; } .sc-hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: .04; background-image: linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px); background-size: 40px 40px; } .sc-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 420px; gap: 60px; align-items: center; } .sc-hero-kicker { display: inline-flex; align-items: center; gap: 8px; background: rgba(224,58,0,.15); border: 1px solid rgba(224,58,0,.3); color: var(--orange-s); padding: 6px 14px; border-radius: 20px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px; } .sc-hero h1 { font-size: clamp(2rem,4vw,3rem); color: var(--white); font-weight: 800; line-height: 1.1; margin-bottom: 20px; } .sc-hero h1 em { color: var(--orange-s); font-style: normal; } .sc-hero-desc { color: rgba(255,255,255,.75); font-size: 1.1rem; max-width: 520px; margin-bottom: 32px; line-height: 1.7; } .sc-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .sc-hero-trust { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); display: flex; gap: 28px; flex-wrap: wrap; } .sc-hero-trust li { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: rgba(255,255,255,.65); list-style: none; } /* Hero Form Box */ .sc-hero-form { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 28px; backdrop-filter: blur(8px); } .sc-hero-form h3 { color: var(--white); font-size: 1.1rem; margin-bottom: 6px; } .sc-hero-form p { color: rgba(255,255,255,.55); font-size: .82rem; margin-bottom: 20px; } .sc-hs-wrap { min-height: 300px; } /* ── Stats bar ──────────────────────────────────────────────── */ .sc-stats { background: var(--navy-d); border-bottom: 3px solid var(--orange); } .sc-stats-inner { max-width: 1200px; margin: 0 auto; padding: 28px 24px; display: grid; grid-template-columns: repeat(5,1fr); } .sc-stat { text-align: center; padding: 16px 12px; border-right: 1px solid rgba(255,255,255,.08); } .sc-stat:last-child { border-right: none; } .sc-stat strong { font-size: 1.75rem; font-weight: 800; color: var(--orange); display: block; line-height: 1; margin-bottom: 4px; } .sc-stat span { font-size: .75rem; color: rgba(255,255,255,.6); letter-spacing: .03em; line-height: 1.3; } /* ── O que é ────────────────────────────────────────────────── */ .sc-oque { background: var(--white); } .sc-oque-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .sc-oque-text h2 { font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom: 20px; } .sc-oque-text p { color: var(--g700); margin-bottom: 18px; font-size: 1rem; line-height: 1.75; } .sc-tldr { background: var(--g50); border-left: 4px solid var(--orange); border-radius: 0 8px 8px 0; padding: 20px 24px; margin: 28px 0; } .sc-tldr-label { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; } .sc-tldr p { font-size: .9rem; color: var(--g700); margin: 0; line-height: 1.6; } .sc-oque-card { background: var(--navy); border-radius: 12px; padding: 28px; color: var(--white); } .sc-oque-card h4 { color: var(--white); font-size: 1rem; margin-bottom: 20px; opacity: .9; } .sc-oque-feature { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; } .sc-oque-feature:last-child { margin-bottom: 0; } .sc-oque-icon { width: 36px; height: 36px; background: rgba(224,58,0,.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sc-oque-feature strong { display: block; font-size: .88rem; color: var(--white); margin-bottom: 2px; } .sc-oque-feature em { font-style: normal; font-size: .8rem; color: rgba(255,255,255,.55); line-height: 1.4; display: block; } /* ── Seção header (títulos de seção) ────────────────────────── */ .sc-sh { text-align: center; margin-bottom: 48px; } .sc-sh h2 { font-size: clamp(1.6rem,3vw,2.2rem); } .sc-sh p { color: var(--g500); max-width: 560px; margin: 12px auto 0; font-size: 1rem; } /* ── Modelos ────────────────────────────────────────────────── */ .sc-models { background: var(--g50); } .sc-tabs { display: flex; gap: 8px; margin-bottom: 36px; flex-wrap: wrap; } .sc-tab { padding: 9px 20px; border-radius: 6px; cursor: pointer; font-size: .85rem; font-weight: 600; transition: all .2s; background: var(--white); color: var(--navy); border: 2px solid var(--g200); } .sc-tab.active, .sc-tab:hover { background: var(--navy); color: var(--white); border-color: var(--navy); } .sc-tab-panel { display: none; } .sc-tab-panel.active { display: block; } .sc-models-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 20px; } .sc-model-card { background: var(--white); border: 1px solid var(--g200); border-radius: 10px; padding: 24px; transition: all .25s; position: relative; overflow: hidden; } .sc-model-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--navy); transition: background .2s; } .sc-model-card:hover { border-color: var(--navy); box-shadow: 0 8px 28px rgba(25,50,76,.12); transform: translateY(-2px); } .sc-model-card:hover::before { background: var(--orange); } .sc-model-family { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin-bottom: 4px; } .sc-model-name { font-size: 1.25rem; font-weight: 800; color: var(--navy); margin-bottom: 12px; } .sc-model-desc { font-size: .85rem; color: var(--g500); margin-bottom: 16px; line-height: 1.55; } .sc-model-specs { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; } .sc-model-spec { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--g700); } .sc-model-spec svg { flex-shrink: 0; color: var(--orange); } .sc-model-use { padding-top: 14px; border-top: 1px solid var(--g100); } .sc-model-use span { font-size: .75rem; font-weight: 600; color: var(--g500); text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: 6px; } .sc-model-tags { display: flex; gap: 6px; flex-wrap: wrap; } .sc-model-tag { background: var(--g100); color: var(--g700); padding: 3px 9px; border-radius: 4px; font-size: .73rem; font-weight: 600; } /* ── Tabela ─────────────────────────────────────────────────── */ .sc-table-section { background: var(--white); } .sc-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--g200); } .sc-table { width: 100%; border-collapse: collapse; min-width: 700px; font-size: .85rem; } .sc-table thead th { background: var(--navy); color: var(--white); padding: 14px 18px; text-align: left; font-weight: 700; font-size: .82rem; white-space: nowrap; } .sc-table thead th:first-child { border-radius: 10px 0 0 0; } .sc-table thead th:last-child { border-radius: 0 10px 0 0; } .sc-table tbody tr { border-bottom: 1px solid var(--g100); transition: background .15s; } .sc-table tbody tr:last-child { border-bottom: none; } .sc-table tbody tr:hover { background: var(--g50); } .sc-table tbody td { padding: 13px 18px; color: var(--g700); vertical-align: middle; } .sc-table tbody td:first-child { font-weight: 700; color: var(--navy); } .sc-check { color: #16a34a; } .sc-dash { color: var(--g200); } /* ── Benefícios ─────────────────────────────────────────────── */ .sc-benefits { background: var(--navy); } .sc-benefits .sc-sh h2 { color: var(--white); } .sc-benefits .sc-sh p { color: rgba(255,255,255,.6); } .sc-benefits-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .sc-benefit { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 28px; transition: all .2s; } .sc-benefit:hover { background: rgba(255,255,255,.08); border-color: rgba(224,58,0,.3); } .sc-benefit-icon { width: 48px; height: 48px; background: rgba(224,58,0,.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .sc-benefit h3 { color: var(--white); font-size: 1rem; margin-bottom: 10px; } .sc-benefit p { color: rgba(255,255,255,.6); font-size: .875rem; line-height: 1.65; } /* ── HowTo ──────────────────────────────────────────────────── */ .sc-howto { background: var(--white); } .sc-howto-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; position: relative; } .sc-howto-steps::before { content: ''; position: absolute; top: 32px; left: calc(10% + 32px); right: calc(10% + 32px); height: 2px; background: linear-gradient(90deg,var(--orange),var(--navy)); z-index: 0; } .sc-step { text-align: center; padding: 0 12px; position: relative; z-index: 1; } .sc-step-n { width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; position: relative; z-index: 2; box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--navy); } .sc-step-n.hi { background: var(--orange); box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--orange); } .sc-step h4 { font-size: .9rem; color: var(--navy); margin-bottom: 8px; } .sc-step p { font-size: .78rem; color: var(--g500); line-height: 1.5; } /* ── Setores ────────────────────────────────────────────────── */ .sc-sectors { background: var(--g50); } .sc-sectors-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .sc-sector { background: var(--white); border: 1px solid var(--g200); border-radius: 8px; padding: 20px; display: flex; align-items: center; gap: 14px; transition: all .2s; } .sc-sector:hover { border-color: var(--navy); box-shadow: 0 4px 16px rgba(25,50,76,.1); } .sc-sector-icon { width: 40px; height: 40px; background: rgba(25,50,76,.08); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sc-sector span { font-size: .88rem; font-weight: 600; color: var(--navy); } /* ── Links internos ─────────────────────────────────────────── */ .sc-related { background: var(--white); border-top: 1px solid var(--g200); } .sc-related-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .sc-related a { display: flex; align-items: center; gap: 10px; padding: 16px; border: 1px solid var(--g200); border-radius: 8px; color: var(--navy); font-size: .85rem; font-weight: 600; transition: all .2s; } .sc-related a:hover { border-color: var(--orange); color: var(--orange); } /* ── FAQ ────────────────────────────────────────────────────── */ .sc-faq { background: var(--g50); } .sc-faq-list { max-width: 800px; margin: 0 auto; } .sc-faq-item { border: 1px solid var(--g200); border-radius: 8px; margin-bottom: 10px; background: var(--white); overflow: hidden; } .sc-faq-q { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 22px; cursor: pointer; user-select: none; font-weight: 600; font-size: .95rem; color: var(--white); background: var(--orange); transition: background .15s; } .sc-faq-q:hover { background: var(--orange-h); } .sc-faq-q[aria-expanded="true"] { background: var(--navy); color: var(--white); } .sc-faq-icon { width: 22px; height: 22px; flex-shrink: 0; border: 2px solid currentColor; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .25s; } .sc-faq-q[aria-expanded="true"] .sc-faq-icon { transform: rotate(45deg); } .sc-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .sc-faq-a-in { padding: 0 22px 18px; font-size: .88rem; color: var(--g700); line-height: 1.7; } /* ── CTA Final ──────────────────────────────────────────────── */ .sc-cta { background: linear-gradient(135deg,var(--navy) 0%,var(--navy-d) 100%); position: relative; overflow: hidden; } .sc-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 100% at 70% 50%,rgba(224,58,0,.12) 0%,transparent 65%); pointer-events: none; } .sc-cta-inner { max-width: 900px; margin: 0 auto; text-align: center; padding: 80px 24px; position: relative; z-index: 2; } .sc-cta-inner h2 { color: var(--white); font-size: clamp(1.75rem,4vw,2.5rem); margin-bottom: 16px; } .sc-cta-inner p { color: rgba(255,255,255,.7); font-size: 1.05rem; max-width: 580px; margin: 0 auto 36px; } .sc-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .sc-cta-contacts { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); } .sc-cta-contacts li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); font-size: .88rem; list-style: none; } /* ── WhatsApp flutuante ─────────────────────────────────────── */ .sc-wa { position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.4); transition: transform .2s, box-shadow .2s; } .sc-wa:hover { transform: scale(1.08); box-shadow: 0 6px 26px rgba(37,211,102,.5); } /* ── Responsivo ─────────────────────────────────────────────── */ @media (max-width: 1024px) { .sc-hero-inner { grid-template-columns: 1fr; } .sc-hero-form { display: none; } .sc-stats-inner { grid-template-columns: repeat(3,1fr); } .sc-stat:nth-child(3) { border-right: none; } .sc-oque-grid { grid-template-columns: 1fr; } .sc-oque-card { display: none; } .sc-benefits-grid { grid-template-columns: repeat(2,1fr); } .sc-howto-steps { grid-template-columns: 1fr; gap: 24px; } .sc-howto-steps::before { display: none; } .sc-step { text-align: left; display: flex; gap: 20px; align-items: flex-start; } .sc-step-n { margin: 0; flex-shrink: 0; } .sc-sectors-grid { grid-template-columns: repeat(2,1fr); } .sc-related-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 768px) { .sc-section { padding: 56px 20px; } .sc-stats-inner { grid-template-columns: repeat(2,1fr); } .sc-stat:nth-child(2) { border-right: none; } .sc-models-grid { grid-template-columns: 1fr; } .sc-benefits-grid { grid-template-columns: 1fr; } .sc-sectors-grid { grid-template-columns: 1fr 1fr; } .sc-related-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .sc-hero { padding: 48px 20px 60px; } .sc-stats-inner { grid-template-columns: 1fr 1fr; } .sc-sectors-grid { grid-template-columns: 1fr; } .sc-hero-actions { flex-direction: column; } }/* End custom CSS */