/* ========================================================================== :re tech — Design System Paleta: grafite escuro + azul elétrico + verde (ações positivas/WhatsApp) Temas: dark (padrão) e light — troca via [data-theme] no ========================================================================== */ :root{ /* Cores base — tema escuro (padrão) */ --bg:#0b0e13; --bg-2:#0f131a; --surface:#141924; --surface-2:#1a202d; --line:#242c3b; --text:#f2f5f9; --text-2:#a9b4c4; --text-3:#7d8899; --accent:#4f8cff; /* azul elétrico */ --accent-strong:#2563eb; --accent-soft:rgba(79,140,255,.13); --green:#2fd479; /* ações positivas / garantia */ --green-soft:rgba(47,212,121,.12); --whats:#25d366; --warn:#f5b04c; --warn-soft:rgba(245,176,76,.12); --danger:#f0616d; --radius:16px; --radius-sm:10px; --radius-lg:24px; --shadow:0 8px 30px rgba(0,0,0,.35); --shadow-soft:0 4px 16px rgba(0,0,0,.22); --font-body:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-display:"Sora","Inter",-apple-system,"Segoe UI",Roboto,sans-serif; --header-h:68px; } [data-theme="light"]{ --bg:#f5f7fb; --bg-2:#eef1f7; --surface:#ffffff; --surface-2:#f2f5fa; --line:#dfe5ee; --text:#0f1626; --text-2:#48556b; --text-3:#6b7890; --accent:#2563eb; --accent-strong:#1d4ed8; --accent-soft:rgba(37,99,235,.10); --green:#149e56; --green-soft:rgba(20,158,86,.10); --warn:#9a6a10; --warn-soft:rgba(180,124,20,.14); --danger:#c73340; --shadow:0 8px 30px rgba(15,22,38,.10); --shadow-soft:0 4px 14px rgba(15,22,38,.08); } /* Seções que forçam contexto claro (alternância) — mantém vars locais */ .sec-light{ --bg:#f5f7fb; --bg-2:#eef1f7; --surface:#ffffff; --surface-2:#f2f5fa; --line:#dfe5ee; --text:#0f1626; --text-2:#48556b; --text-3:#6b7890; --accent:#2563eb; --accent-strong:#1d4ed8; --accent-soft:rgba(37,99,235,.10); --green:#149e56; --green-soft:rgba(20,158,86,.10); --warn:#9a6a10; --warn-soft:rgba(180,124,20,.14); --danger:#c73340; --shadow:0 8px 30px rgba(15,22,38,.10); --shadow-soft:0 4px 14px rgba(15,22,38,.08); background:var(--bg); color:var(--text); } /* Seções que forçam contexto escuro (ex.: hero) mesmo no tema claro */ .sec-dark{ --bg:#0b0e13; --bg-2:#0f131a; --surface:#141924; --surface-2:#1a202d; --line:#242c3b; --text:#f2f5f9; --text-2:#a9b4c4; --text-3:#7d8899; --accent:#4f8cff; --accent-strong:#2563eb; --accent-soft:rgba(79,140,255,.13); --green:#2fd479; --green-soft:rgba(47,212,121,.12); --warn:#f5b04c; --warn-soft:rgba(245,176,76,.12); --danger:#f0616d; --shadow:0 8px 30px rgba(0,0,0,.35); --shadow-soft:0 4px 16px rgba(0,0,0,.22); background:var(--bg); color:var(--text); } /* No modo dia, as seções escuras clareiam para tons de grafite (cinza-escuro), acompanhando o branco do restante do site */ [data-theme="light"] .sec-dark{ --bg:#333e4f; --bg-2:#3a4759; --surface:#414f63; --surface-2:#4a596f; --line:#57667e; --text:#f4f7fa; --text-2:#c6cfdd; --text-3:#9daabd; --accent:#7aa5ff; --accent-strong:#5b8bf0; --accent-soft:rgba(122,165,255,.16); --green:#4ade80; --green-soft:rgba(74,222,128,.14); --warn:#fbbf24; --warn-soft:rgba(251,191,36,.14); --danger:#fca5a5; --shadow:0 8px 30px rgba(30,41,59,.28); --shadow-soft:0 4px 16px rgba(30,41,59,.18); } /* ============================== Reset ============================== */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } body{ margin:0; font-family:var(--font-body); background:var(--bg); color:var(--text); line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased; padding-top:var(--header-h); } img,svg{max-width:100%;display:block} [id]{scroll-margin-top:calc(var(--header-h) + 16px)} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} button{font-family:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} .skip-link{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--accent);color:#fff;padding:10px 16px;border-radius:0 0 10px 0; } .skip-link:focus{left:0} /* ============================== Tipografia ============================== */ h1,h2,h3,h4{font-family:var(--font-display);line-height:1.18;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em} h1{font-size:clamp(2rem,5.5vw,3.4rem)} h2{font-size:clamp(1.5rem,3.4vw,2.2rem)} h3{font-size:1.18rem} h4{font-size:1rem} p{margin:0 0 1em} .lead{font-size:clamp(1.02rem,2vw,1.2rem);color:var(--text-2);max-width:46ch} .muted{color:var(--text-2)} .small{font-size:.86rem} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);margin-bottom:14px; } .eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px} /* ============================== Layout ============================== */ .container{width:min(1160px,92%);margin-inline:auto} .container-narrow{width:min(820px,92%);margin-inline:auto} .sec{padding:clamp(60px,9vw,104px) 0} .sec-tight{padding:clamp(40px,6vw,64px) 0} .sec-head{max-width:640px;margin-bottom:clamp(30px,5vw,52px)} .sec-head.center{margin-inline:auto;text-align:center} .sec-head.center .eyebrow{justify-content:center} .sec-head.center .lead{margin-inline:auto} .sec-foot{margin-top:clamp(28px,4vw,44px);text-align:center} .grid{display:grid;gap:20px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} @media (max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}} /* ============================== Header ============================== */ .site-header{ position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:100; background:color-mix(in srgb,var(--bg) 82%,transparent); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transition:box-shadow .25s ease; } .site-header.scrolled{box-shadow:var(--shadow-soft)} .header-inner{ width:min(1240px,94%);margin-inline:auto;height:100%; display:flex;align-items:center;gap:18px; } .logo{ display:inline-flex;align-items:baseline;gap:2px; font-family:var(--font-display);font-weight:800;font-size:1.35rem; color:var(--text);text-decoration:none;letter-spacing:-.02em;white-space:nowrap; } .logo:hover{text-decoration:none} .logo .re{color:var(--accent)} .logo .tech{font-weight:500;color:var(--text-2);margin-left:4px} .main-nav{display:flex;align-items:center;gap:2px;margin-left:auto} .main-nav a{ color:var(--text-2);font-size:.93rem;font-weight:500; padding:8px 12px;border-radius:10px;transition:color .18s,background .18s; } .main-nav a:hover{color:var(--text);background:var(--surface-2);text-decoration:none} .main-nav a.active{color:var(--accent);background:var(--accent-soft)} .main-nav .nav-cta{display:none} .header-actions{display:flex;align-items:center;gap:10px;margin-left:8px} .icon-btn{ display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:12px;border:1px solid var(--line); background:transparent;color:var(--text-2);cursor:pointer; transition:color .18s,border-color .18s,background .18s; } .icon-btn:hover{color:var(--text);border-color:var(--text-3);text-decoration:none} .icon-btn svg{width:19px;height:19px} .icon-btn.whats:hover{color:var(--whats);border-color:var(--whats)} .nav-toggle{display:none} @media (max-width:1060px){ .main-nav{ position:fixed;top:var(--header-h);left:0;right:0; flex-direction:column;align-items:stretch;gap:4px; background:var(--bg);border-bottom:1px solid var(--line); padding:14px 5%;box-shadow:var(--shadow); transform:translateY(-12px);opacity:0;pointer-events:none; transition:transform .22s ease,opacity .22s ease; } .main-nav.open{transform:translateY(0);opacity:1;pointer-events:auto} .main-nav a{padding:12px 14px;font-size:1rem} .main-nav .nav-cta{ display:block;text-align:center;font-weight:600;margin-top:8px; background:var(--accent);color:#fff; } .main-nav .nav-cta:hover{background:var(--accent-strong);color:#fff} .nav-toggle{display:inline-flex;order:5} .header-actions{margin-left:auto} .header-actions .header-cta{display:none} } @media (max-width:360px){ .header-actions .theme-btn{display:none} } /* ============================== Botões ============================== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:12px 22px;border-radius:13px;border:1px solid transparent; font-weight:600;font-size:.95rem;font-family:var(--font-body); cursor:pointer;text-decoration:none;line-height:1.2; transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s,color .16s; white-space:nowrap; } .btn:hover{text-decoration:none;transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn svg{width:18px;height:18px;flex:none} .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-strong);box-shadow:0 6px 20px rgba(59,110,255,.35)} .btn-whats{background:var(--whats);color:#06281a} .btn-whats:hover{background:#1fc65b;box-shadow:0 6px 20px rgba(37,211,102,.32)} .btn-ghost{background:transparent;color:var(--text);border-color:var(--line)} .btn-ghost:hover{border-color:var(--text-3);background:var(--surface-2)} .btn-soft{background:var(--accent-soft);color:var(--accent)} .btn-soft:hover{background:var(--accent);color:#fff} .btn-lg{padding:15px 30px;font-size:1.02rem;border-radius:15px} .btn-sm{padding:8px 14px;font-size:.85rem;border-radius:10px} .btn-block{width:100%;white-space:normal} .btn{max-width:100%} .btn[disabled],.btn.is-loading{opacity:.65;pointer-events:none} .btn.is-loading .btn-label{visibility:hidden} .btn.is-loading{position:relative} .btn.is-loading::after{ content:"";position:absolute;width:18px;height:18px;border-radius:50%; border:2px solid currentColor;border-top-color:transparent; animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} /* ============================== Chips & Badges ============================== */ .chip{ display:inline-flex;align-items:center;gap:8px; padding:8px 14px;border-radius:999px; background:var(--surface);border:1px solid var(--line); font-size:.86rem;font-weight:500;color:var(--text-2); } .chip svg{width:15px;height:15px;color:var(--green)} .badge{ display:inline-flex;align-items:center;gap:5px; padding:4px 10px;border-radius:999px; font-size:.72rem;font-weight:600;letter-spacing:.02em; } .badge svg{width:12px;height:12px} .badge-novo{background:var(--accent-soft);color:var(--accent)} .badge-seminovo{background:var(--warn-soft);color:var(--warn)} .badge-recondicionado{background:rgba(167,139,250,.14);color:#a78bfa} .sec-light .badge-recondicionado,[data-theme="light"] .badge-recondicionado{background:rgba(124,58,237,.10);color:#7c3aed} .badge-testado{background:var(--green-soft);color:var(--green)} .badge-garantia{background:var(--green-soft);color:var(--green)} .badge-vendido{background:rgba(240,97,109,.14);color:var(--danger)} .badge-destaque{background:var(--accent-soft);color:var(--accent)} /* ============================== Cards genéricos ============================== */ .card{ background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:26px; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; } .card.hover:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))} .icon-tile{ width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; background:var(--accent-soft);color:var(--accent);margin-bottom:16px; } .icon-tile svg{width:22px;height:22px} .icon-tile.green{background:var(--green-soft);color:var(--green)} /* Serviços */ .svc-card{display:flex;flex-direction:column} .svc-card h3{font-size:1.05rem} .svc-card p{color:var(--text-2);font-size:.92rem;flex:1} .svc-card .svc-link{ font-size:.88rem;font-weight:600;color:var(--accent); display:inline-flex;align-items:center;gap:6px;margin-top:6px; } .svc-card .svc-link svg{width:14px;height:14px;transition:transform .18s} .svc-card:hover .svc-link svg{transform:translateX(3px)} /* Benefícios */ .bene-item{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--radius);transition:background .2s} .bene-item:hover{background:var(--surface)} .bene-item .icon-tile{width:40px;height:40px;margin:0;flex:none;border-radius:11px} .bene-item .icon-tile svg{width:19px;height:19px} .bene-item h3{font-size:.98rem;margin-bottom:2px} .bene-item p{font-size:.88rem;color:var(--text-2);margin:0} /* ============================== Hero ============================== */ .hero{ position:relative;overflow:hidden; padding:clamp(56px,9vw,110px) 0 clamp(64px,9vw,110px); } .hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(56% 46% at 78% 18%,rgba(79,140,255,.16),transparent 68%), radial-gradient(40% 36% at 12% 86%,rgba(47,212,121,.07),transparent 70%); } .hero-grid{ position:relative;display:grid;grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px);align-items:center; } @media (max-width:900px){.hero-grid{grid-template-columns:1fr}} .hero h1{max-width:14ch} .hero .lead{margin-bottom:28px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px} .hero-chips{display:flex;gap:10px;flex-wrap:wrap} .hero-art{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)} .hero-art svg{width:100%;height:auto} /* ============================== Produtos ============================== */ .prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px} .prod-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;display:flex;flex-direction:column; transition:transform .2s ease,box-shadow .2s ease,border-color .2s; } .prod-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))} .prod-media{position:relative;aspect-ratio:4/3;background:var(--surface-2)} .prod-media svg{width:100%;height:100%;object-fit:cover} .prod-media .badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap} .prod-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1} .prod-body h3{font-size:1rem;margin:0} .prod-body h3 a{color:var(--text)} .prod-specs{font-size:.83rem;color:var(--text-2);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .prod-price{font-family:var(--font-display);font-weight:700;font-size:1.3rem;margin-top:auto} .prod-price .old{font-size:.85rem;font-weight:500;color:var(--text-3);text-decoration:line-through;margin-right:8px} .prod-seals{display:flex;gap:6px;flex-wrap:wrap} .prod-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px} .prod-actions .btn{padding:10px 8px;font-size:.84rem} /* Toolbar do catálogo */ .catalog-toolbar{ display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:12px; margin-bottom:28px; } @media (max-width:960px){.catalog-toolbar{grid-template-columns:1fr 1fr}} @media (max-width:560px){.catalog-toolbar{grid-template-columns:1fr}} .search-wrap{position:relative} .search-wrap svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--text-3);pointer-events:none} .catalog-toolbar .search-wrap input,.search-wrap input{padding-left:40px!important} .result-count{font-size:.88rem;color:var(--text-2);margin-bottom:18px} .empty-state{ text-align:center;padding:60px 20px;border:1px dashed var(--line); border-radius:var(--radius);color:var(--text-2); } /* Página do produto */ .product-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,48px);align-items:start} @media (max-width:880px){.product-layout{grid-template-columns:1fr}} .gallery-main{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface-2);aspect-ratio:4/3} .gallery-main svg{width:100%;height:100%} .gallery-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px} .gallery-thumbs button{ border:2px solid var(--line);border-radius:var(--radius-sm);overflow:hidden; background:var(--surface-2);cursor:pointer;padding:0;aspect-ratio:4/3; transition:border-color .18s; } .gallery-thumbs button.active{border-color:var(--accent)} .gallery-thumbs svg{width:100%;height:100%} .product-info h1{font-size:clamp(1.4rem,3vw,1.9rem)} .price-line{display:flex;align-items:baseline;gap:12px;margin:14px 0 6px} .price-line .price{font-family:var(--font-display);font-weight:800;font-size:2rem} .spec-table{width:100%;border-collapse:collapse;font-size:.9rem;margin:8px 0 4px} .spec-table th,.spec-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top} .spec-table th{color:var(--text-2);font-weight:500;width:42%} .info-block{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-top:14px;background:var(--surface)} .info-block h3{font-size:.95rem;margin-bottom:8px;display:flex;align-items:center;gap:8px} .info-block h3 svg{width:16px;height:16px;color:var(--accent)} .info-block ul{margin:0;padding-left:18px;color:var(--text-2);font-size:.9rem} .info-block p{color:var(--text-2);font-size:.9rem;margin:0} /* Produto vendido */ .prod-card.is-vendido .prod-media svg{filter:grayscale(.85);opacity:.7} .prod-card.is-vendido .prod-price{color:var(--text-3)} .vendido-faixa{ position:absolute;inset:auto 0 0 0;padding:8px 12px;text-align:center; background:rgba(12,16,24,.82);color:#fff;font-weight:700;font-size:.82rem; letter-spacing:.08em;text-transform:uppercase; } /* Badges de conservação (escala :re tech) */ .badge-cons-excelente{background:var(--green-soft);color:var(--green)} .badge-cons-muito-bom{background:var(--accent-soft);color:var(--accent)} .badge-cons-bom{background:var(--warn-soft);color:var(--warn)} .badge-cons-economico{background:rgba(148,163,184,.16);color:#94a3b8} .sec-light .badge-cons-economico,[data-theme="light"] .badge-cons-economico{background:rgba(100,116,139,.12);color:#64748b} .badge-codigo{ background:var(--surface-2);color:var(--text-3);border:1px solid var(--line); font-family:Consolas,Menlo,monospace;letter-spacing:.04em; } /* Escala de conservação (legenda na página do produto) */ .cons-scale{display:grid;gap:7px;margin-top:12px} .cons-item{display:flex;gap:9px;font-size:.83rem;color:var(--text-3);align-items:baseline} .cons-item.atual{color:var(--text);font-weight:600} .cons-item .dot{width:8px;height:8px;border-radius:50%;flex:none;transform:translateY(-1px);background:var(--text-3)} .cons-item.c-excelente .dot{background:var(--green)} .cons-item.c-muito-bom .dot{background:var(--accent)} .cons-item.c-bom .dot{background:var(--warn)} .cons-item.c-economico .dot{background:#94a3b8} /* Checklist de testes */ .check-panel{ border:1px solid color-mix(in srgb,var(--green) 32%,var(--line)); background:var(--green-soft);border-radius:var(--radius); padding:18px 20px;margin-top:16px; } .check-panel h3{display:flex;align-items:center;gap:9px;font-size:.98rem;margin-bottom:4px} .check-panel h3 svg{width:18px;height:18px;color:var(--green);flex:none} .check-panel .sub{font-size:.82rem;color:var(--text-2);margin:0 0 12px} .check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px 14px;margin:0;padding:0;list-style:none} .check-grid li{display:flex;gap:8px;align-items:center;font-size:.86rem;color:var(--text-2)} .check-grid li svg{width:14px;height:14px;color:var(--green);flex:none} /* Caixa "O que você precisa saber" (defeitos declarados + acessórios) */ .aviso-box{ border:1px solid color-mix(in srgb,var(--warn) 48%,var(--line)); background:var(--warn-soft);border-radius:var(--radius); padding:18px 20px;margin:16px 0; } .aviso-box h3{display:flex;align-items:center;gap:9px;font-size:.98rem;margin-bottom:12px} .aviso-box h3 svg{width:17px;height:17px;color:var(--warn);flex:none} .aviso-box ul{margin:0;padding:0;list-style:none;display:grid;gap:8px} .aviso-box li{display:flex;gap:9px;align-items:flex-start;font-size:.9rem;color:var(--text-2)} .aviso-box li svg{width:14px;height:14px;flex:none;margin-top:4px} .aviso-box li.item-aviso svg{color:var(--warn)} .aviso-box li.item-nao svg{color:var(--danger)} .aviso-box li.item-sim svg{color:var(--green)} /* Seção de orçamento rápido (home) */ .quote-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,60px);align-items:center} @media (max-width:900px){.quote-grid{grid-template-columns:1fr}} /* Aviso anti-golpe no rodapé */ .footer-alert{ display:flex;gap:12px;align-items:flex-start; border:1px solid var(--line);border-radius:var(--radius); padding:14px 18px;margin-bottom:28px;font-size:.85rem;color:var(--text-2); background:var(--surface); } .footer-alert svg{width:18px;height:18px;color:var(--green);flex:none;margin-top:2px} /* ============================== Notas / avisos ============================== */ .notice{ display:flex;gap:12px;align-items:flex-start; border-radius:var(--radius);padding:16px 18px;font-size:.9rem; border:1px solid var(--line);background:var(--surface);color:var(--text-2); } .notice svg{width:18px;height:18px;flex:none;margin-top:2px} .notice.info{border-color:color-mix(in srgb,var(--accent) 34%,var(--line));background:var(--accent-soft);color:var(--text)} .notice.info svg{color:var(--accent)} .notice.good{border-color:color-mix(in srgb,var(--green) 34%,var(--line));background:var(--green-soft);color:var(--text)} .notice.good svg{color:var(--green)} .notice.warn{border-color:color-mix(in srgb,var(--warn) 40%,var(--line));background:var(--warn-soft);color:var(--text)} .notice.warn svg{color:var(--warn)} /* ============================== Timeline (Como funciona) ============================== */ .timeline{position:relative;max-width:720px;margin-inline:auto} .timeline::before{ content:"";position:absolute;left:10px;top:14px;bottom:14px;width:2px; background:linear-gradient(var(--accent),var(--green));border-radius:2px;opacity:.5; } .tl-step{position:relative;padding:0 0 34px 104px} .tl-step:last-child{padding-bottom:0} .tl-num{ position:absolute;left:34px;top:0;width:44px;height:44px;border-radius:50%; background:var(--surface);border:2px solid var(--accent);color:var(--accent); display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:700;font-size:1rem; } @media (max-width:520px){ .timeline::before{left:8px} .tl-num{left:26px;width:40px;height:40px;font-size:.92rem} .tl-step{padding-left:86px;padding-bottom:28px} } .tl-step:last-child .tl-num{border-color:var(--green);color:var(--green)} .tl-step h3{font-size:1.02rem;margin-bottom:4px;padding-top:8px} .tl-step p{color:var(--text-2);font-size:.92rem;margin:0} /* ============================== FAQ (accordion) ============================== */ .faq-item{ border:1px solid var(--line);border-radius:var(--radius); background:var(--surface);margin-bottom:12px;overflow:hidden; transition:border-color .2s; } .faq-item[open]{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))} .faq-item summary{ list-style:none;cursor:pointer;padding:18px 22px; font-weight:600;font-size:.98rem;display:flex;align-items:center;gap:12px; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{ content:"+";margin-left:auto;font-size:1.3rem;font-weight:400;color:var(--accent); transition:transform .2s;line-height:1; } .faq-item[open] summary::after{transform:rotate(45deg)} .faq-item .faq-body{padding:0 22px 18px;color:var(--text-2);font-size:.93rem} .faq-item .faq-body p{margin:0} /* ============================== Antes & Depois ============================== */ .ba-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)} .ba-panel{position:relative;aspect-ratio:1/1;background:var(--surface-2);display:flex;align-items:center;justify-content:center} .ba-panel svg{width:100%;height:100%} .ba-tag{ position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:999px; font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; } .ba-tag.antes{background:rgba(240,97,109,.9);color:#fff} .ba-tag.depois{background:var(--green);color:#04240f} .ba-card figcaption{padding:14px 18px;font-size:.9rem;color:var(--text-2)} .ba-card figcaption strong{color:var(--text);display:block;font-size:.95rem} /* ============================== Galeria ============================== */ .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media (max-width:760px){.gallery-grid{grid-template-columns:repeat(2,1fr)}} .gallery-tile{ border-radius:var(--radius);overflow:hidden;border:1px solid var(--line); background:var(--surface-2);aspect-ratio:4/3;position:relative; } .gallery-tile svg{width:100%;height:100%} .gallery-tile figcaption{ position:absolute;inset:auto 0 0 0;padding:22px 14px 10px; background:linear-gradient(transparent,rgba(5,8,12,.78)); color:#e9eef5;font-size:.82rem;font-weight:500; } /* ============================== Depoimentos ============================== */ .depo-card{display:flex;flex-direction:column;gap:12px} .stars{display:flex;gap:2px;color:var(--warn)} .stars svg{width:16px;height:16px} .depo-card blockquote{margin:0;color:var(--text-2);font-size:.94rem} .depo-who{display:flex;align-items:center;gap:12px;margin-top:auto} .depo-avatar{ width:42px;height:42px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center; font-weight:700;font-family:var(--font-display);color:#fff;font-size:.95rem; } .depo-who strong{display:block;font-size:.92rem;line-height:1.3} .depo-who span{font-size:.8rem;color:var(--text-3)} /* ============================== Marcas ============================== */ .brand-strip{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .brand-strip span{ padding:12px 26px;border-radius:13px;border:1px solid var(--line); background:var(--surface);color:var(--text-2); font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:.02em; transition:color .2s,border-color .2s,transform .2s; } .brand-strip span:hover{color:var(--text);border-color:var(--text-3);transform:translateY(-2px)} /* ============================== Formulários ============================== */ .form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,4vw,40px)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px} @media (max-width:640px){.form-grid{grid-template-columns:1fr}} .field{display:flex;flex-direction:column;gap:6px;min-width:0} .field.full{grid-column:1/-1} .field label{font-size:.88rem;font-weight:600} .field label .opt{font-weight:400;color:var(--text-3);font-size:.8rem} .field input,.field select,.field textarea, .search-wrap input,select.ctl,input.ctl{ width:100%;padding:12px 14px;border-radius:12px; border:1px solid var(--line);background:var(--bg-2);color:var(--text); font-family:inherit;font-size:.95rem; transition:border-color .18s,box-shadow .18s; } [data-theme="light"] .field input,[data-theme="light"] .field select,[data-theme="light"] .field textarea, .sec-light .field input,.sec-light .field select,.sec-light .field textarea, [data-theme="light"] .search-wrap input,[data-theme="light"] select.ctl, .sec-light .search-wrap input,.sec-light select.ctl{background:#fff} .field textarea{resize:vertical;min-height:104px} .field input:focus,.field select:focus,.field textarea:focus, .search-wrap input:focus,select.ctl:focus{ outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft); } .field .err-msg{display:none;font-size:.8rem;color:var(--danger)} .field.error input,.field.error select,.field.error textarea{border-color:var(--danger)} .field.error .err-msg{display:block} .radio-pills{display:flex;gap:8px;flex-wrap:wrap} .radio-pills label{ position:relative; display:inline-flex;align-items:center;gap:7px;cursor:pointer; padding:9px 16px;border-radius:999px;border:1px solid var(--line); font-size:.88rem;font-weight:500;color:var(--text-2); transition:all .16s; } .radio-pills input{position:absolute;left:0;top:0;width:1px!important;height:1px;opacity:0;pointer-events:none} .radio-pills label:has(input:checked){ background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600; } .radio-pills label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px} .consent{display:flex;gap:10px;align-items:flex-start;font-size:.83rem;color:var(--text-2)} .consent input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;flex:none} .file-drop{ position:relative;display:block; border:1.5px dashed var(--line);border-radius:12px;padding:18px; text-align:center;color:var(--text-3);font-size:.86rem;font-weight:400;cursor:pointer; transition:border-color .18s,color .18s,box-shadow .18s; } .file-drop:hover{border-color:var(--accent);color:var(--text-2)} .file-drop:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);color:var(--text-2)} .file-drop input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%)} .file-drop .files-list{margin-top:6px;font-size:.8rem;color:var(--accent)} /* Tabs (orçamento / vender) */ .tabs{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap} .tabs button{ padding:11px 22px;border-radius:999px;border:1px solid var(--line); background:transparent;color:var(--text-2);font-weight:600;font-size:.92rem;cursor:pointer; transition:all .18s; } .tabs button.active{background:var(--accent);border-color:var(--accent);color:#fff} .tab-panel{display:none} .tab-panel.active{display:block} /* ============================== Consulta OS ============================== */ .os-pipeline{display:grid;gap:10px;margin-top:26px} .os-status{ display:flex;align-items:center;gap:14px;padding:13px 18px; border:1px solid var(--line);border-radius:13px;background:var(--surface);font-size:.92rem; } .os-status .dot{width:10px;height:10px;border-radius:50%;background:var(--text-3);flex:none} .os-status.s1 .dot{background:#8b96a8}.os-status.s2 .dot{background:var(--accent)} .os-status.s3 .dot{background:var(--warn)}.os-status.s4 .dot{background:#a78bfa} .os-status.s5 .dot{background:#38bdf8}.os-status.s6 .dot{background:var(--green)} .os-status.s7 .dot{background:var(--green)} .os-status span{color:var(--text-2);font-size:.82rem;margin-left:auto;text-align:right} /* ============================== Contato ============================== */ .contact-card{display:flex;gap:14px;align-items:flex-start} .contact-card .icon-tile{margin:0;flex:none} .contact-card h3{font-size:.95rem;margin-bottom:2px} .contact-card p{margin:0;color:var(--text-2);font-size:.92rem} .map-placeholder{ border:1px solid var(--line);border-radius:var(--radius-lg); min-height:320px;display:flex;flex-direction:column;gap:10px; align-items:center;justify-content:center;text-align:center; color:var(--text-2);padding:30px;background:var(--surface); text-decoration:none;transition:border-color .2s,transform .2s; } a.map-placeholder:hover{border-color:var(--accent);transform:translateY(-2px);text-decoration:none} .map-placeholder svg{width:40px;height:40px;color:var(--accent)} .map-placeholder strong{color:var(--text)} .map-frame{ display:block;width:100%;height:100%;min-height:380px; border:1px solid var(--line);border-radius:var(--radius-lg); background:var(--surface-2); } .loc-grid{align-items:stretch} .loc-grid .loc-info{display:flex;flex-direction:column;gap:14px} @media (max-width:620px){.map-frame{min-height:300px}} /* ============================== Blog ============================== */ .blog-card{display:flex;flex-direction:column;overflow:hidden;padding:0} .blog-card .blog-media{aspect-ratio:16/9;background:var(--surface-2)} .blog-card .blog-media svg{width:100%;height:100%} .blog-card .blog-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1} .blog-card .cat{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)} .blog-card h3{font-size:1.05rem;margin:0} .blog-card h3 a{color:var(--text)} .blog-card p{color:var(--text-2);font-size:.9rem;margin:0;flex:1} .blog-card .meta{font-size:.8rem;color:var(--text-3)} .article-body{font-size:1.02rem} .article-body h2{font-size:1.4rem;margin-top:1.6em} .article-body p{color:var(--text-2)} .article-body ul{color:var(--text-2)} /* ============================== CTA band ============================== */ .cta-band{ border-radius:var(--radius-lg);padding:clamp(34px,6vw,64px);text-align:center; background: radial-gradient(80% 120% at 50% 0%,rgba(79,140,255,.22),transparent 70%), var(--surface); border:1px solid var(--line); } .cta-band h2{max-width:22ch;margin-inline:auto} .cta-band .lead{margin-inline:auto;margin-bottom:26px} .cta-band .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ============================== Footer ============================== */ .site-footer{ --bg:#080a0e; --surface:#11151d; --line:#1d2430; --text:#eef2f7; --text-2:#9aa5b5; --text-3:#6d788a; --accent:#4f8cff; background:var(--bg);color:var(--text-2); border-top:1px solid var(--line); padding:clamp(44px,7vw,72px) 0 0;font-size:.92rem; } /* Modo dia: rodapé em grafite, acompanhando o branco do site */ [data-theme="light"] .site-footer{ --bg:#333e4f; --surface:#415064; --line:#4d5c73; --text:#f4f7fa; --text-2:#c0cad9; --text-3:#95a3b7; --accent:#7aa5ff; --accent-soft:rgba(122,165,255,.16); --surface-2:#4a596f; --green-soft:rgba(74,222,128,.14); --whats:#25d366; } [data-theme="light"] .site-footer .footer-alert{background:#3c4a5e;border-color:#4d5c73} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:44px} @media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.footer-grid{grid-template-columns:1fr}} .site-footer h4{color:var(--text);font-size:.95rem;margin-bottom:14px} .site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .site-footer a{color:var(--text-2)} .site-footer a:hover{color:var(--text)} .footer-brand p{margin:12px 0 18px;max-width:32ch} .social-row{display:flex;gap:10px} .social-row a{ width:38px;height:38px;border-radius:11px;border:1px solid var(--line); display:flex;align-items:center;justify-content:center;color:var(--text-2); transition:all .18s; } .social-row a:hover{color:#fff;border-color:var(--accent);background:var(--accent-soft);text-decoration:none} .social-row svg{width:17px;height:17px} .footer-bottom{ border-top:1px solid var(--line);padding:20px 0; display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; font-size:.83rem;color:var(--text-3); } .footer-bottom ul{flex-direction:row;gap:18px;flex-wrap:wrap} /* ============================== Flutuantes ============================== */ .float-whats{ position:fixed;right:20px;bottom:20px;z-index:90; width:58px;height:58px;border-radius:50%; background:var(--whats);color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 26px rgba(37,211,102,.42); transition:transform .2s ease,box-shadow .2s ease; } .float-whats:hover{transform:scale(1.08);text-decoration:none;box-shadow:0 10px 32px rgba(37,211,102,.55)} .float-whats svg{width:30px;height:30px} .float-whats::after{ content:attr(data-tip);position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%); background:#0c1118;color:#fff;font-size:.8rem;font-weight:600;white-space:nowrap; padding:8px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .18s; border:1px solid #232c3a; } .float-whats:hover::after{opacity:1} @media (max-width:640px){.float-whats::after{display:none}} .back-top{ position:fixed;right:24px;bottom:92px;z-index:89; width:44px;height:44px;border-radius:13px;border:1px solid var(--line); background:var(--surface);color:var(--text-2);cursor:pointer; display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transform:translateY(8px); transition:all .22s ease; } .back-top.show{opacity:1;pointer-events:auto;transform:translateY(0)} .back-top:hover{color:var(--accent);border-color:var(--accent)} .back-top svg{width:18px;height:18px} /* Cookie banner */ .cookie-banner{ position:fixed;left:16px;right:16px;bottom:16px;z-index:95; max-width:520px;margin-inline:auto; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:18px 20px;box-shadow:var(--shadow);font-size:.86rem;color:var(--text-2); display:none;gap:14px;flex-wrap:wrap;align-items:center; } .cookie-banner.show{display:flex} .cookie-banner p{margin:0;flex:1;min-width:220px} .cookie-banner .btn{padding:9px 18px;font-size:.85rem} /* ============================== Admin ============================== */ body[data-page="admin"]{padding-top:0} /* ---- Login ---- */ .login-hero{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden} .login-hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(52% 42% at 50% 0%,rgba(79,140,255,.15),transparent 70%); } .login-card{position:relative;width:min(440px,100%)} .login-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px} .brand-tag{ font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:999px;white-space:nowrap; } .login-back{position:absolute;top:18px;left:22px;font-size:.88rem;color:var(--text-2);display:inline-flex;align-items:center;gap:7px;z-index:2} .login-back svg{width:15px;height:15px} .login-back:hover{color:var(--text);text-decoration:none} /* ---- Shell ---- */ .admin-app{display:grid;grid-template-columns:250px 1fr;min-height:100vh} .admin-sidebar{ position:sticky;top:0;height:100vh;display:flex;flex-direction:column; background:var(--bg-2);border-right:1px solid var(--line); padding:18px 12px;overflow-y:auto; } .admin-brand{display:flex;align-items:center;gap:9px;padding:4px 10px 18px} .admin-brand .logo{font-size:1.15rem} .admin-nav{display:flex;flex-direction:column;gap:2px} .side-label{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding:14px 12px 6px} .side-link{ display:flex;align-items:center;gap:11px;width:100%;text-align:left; padding:10px 12px;border-radius:10px;border:0;background:transparent; color:var(--text-2);font-size:.9rem;font-weight:500;cursor:pointer; transition:all .15s;white-space:nowrap;text-decoration:none;font-family:inherit; } .side-link svg{width:17px;height:17px;flex:none} .side-link:hover{background:var(--surface-2);color:var(--text);text-decoration:none} .side-link.active{background:var(--accent-soft);color:var(--accent);font-weight:600} .side-link .count{ margin-left:auto;font-size:.68rem;font-weight:700; background:var(--surface-2);color:var(--text-2);border-radius:999px;padding:2px 8px; } .side-link.active .count{background:var(--accent);color:#fff} .side-link.danger:hover{background:rgba(240,97,109,.1);color:var(--danger)} .admin-side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px} .admin-body{min-width:0;display:flex;flex-direction:column} .admin-topbar{ position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px; padding:12px 24px;border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 85%,transparent); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); } .admin-topbar h1{font-size:1.05rem;margin:0} .demo-chip{ display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600; color:var(--warn);background:var(--warn-soft); border:1px solid color-mix(in srgb,var(--warn) 35%,transparent); padding:4px 10px;border-radius:999px;white-space:nowrap; } .demo-chip svg{width:12px;height:12px} .admin-content{padding:24px;width:100%;max-width:1240px} @media (max-width:920px){ .admin-app{grid-template-columns:1fr} .admin-sidebar{position:static;height:auto;flex-direction:row;align-items:center;gap:4px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px 12px} .admin-brand{padding:0 10px 0 0} .admin-nav{flex-direction:row} .side-label{display:none} .side-link{width:auto;padding:8px 12px} .side-link .count{margin-left:6px} .admin-side-foot{margin:0 0 0 auto;padding:0 0 0 10px;border-top:0;flex-direction:row} .admin-topbar{padding:12px 16px;flex-wrap:wrap} .admin-content{padding:16px} } /* ---- Cards, painéis e listas ---- */ .admin-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px} @media (max-width:1100px){.admin-cards{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.admin-cards{grid-template-columns:1fr}} .stat-card{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px} .stat-card .icon-tile{margin:0;width:42px;height:42px;flex:none;border-radius:12px} .stat-card .icon-tile svg{width:20px;height:20px} .stat-card .num{font-family:var(--font-display);font-weight:800;font-size:1.4rem;line-height:1.15} .stat-card .lbl{font-size:.8rem;color:var(--text-2)} .admin-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px} .admin-panel h2{font-size:1rem;margin-bottom:14px;display:flex;align-items:center;gap:8px} .admin-panel h2 svg{width:16px;height:16px;color:var(--accent)} .admin-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} @media (max-width:980px){.admin-grid-2{grid-template-columns:1fr}} .admin-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center} .admin-toolbar .search-wrap{flex:1;min-width:180px} .admin-toolbar select.ctl{width:auto} .admin-toolbar p{min-width:min(240px,100%)} .bar-row{display:grid;grid-template-columns:110px 1fr 34px;gap:10px;align-items:center;font-size:.84rem;color:var(--text-2);margin-bottom:9px} .bar-row:last-child{margin-bottom:0} .bar-track{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden} .bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#7a5cff)} .mini-item{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:.87rem} .mini-item:last-child{border-bottom:0} .mini-item .who{min-width:0;flex:1} .mini-item .who strong{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mini-item .who span{font-size:.76rem;color:var(--text-3)} .pill{font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--text-2);white-space:nowrap} .pill.blue{background:var(--accent-soft);color:var(--accent)} .pill.green{background:var(--green-soft);color:var(--green)} .pill.amber{background:var(--warn-soft);color:var(--warn)} .pill.purple{background:rgba(167,139,250,.14);color:#a78bfa} .pill.red{background:rgba(240,97,109,.14);color:var(--danger)} /* ---- Tabelas ---- */ .admin-table{width:100%;border-collapse:collapse;font-size:.88rem} .admin-table th,.admin-table td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle} .admin-table tr:last-child td{border-bottom:0} .admin-table th{color:var(--text-3);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em} .admin-table .row-actions{display:flex;gap:6px;flex-wrap:nowrap} .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)} .prod-cell{display:flex;gap:12px;align-items:center;min-width:230px} .thumb{width:46px;height:36px;border-radius:8px;overflow:hidden;flex:none;border:1px solid var(--line);background:var(--surface-2)} .thumb svg{width:100%;height:100%} .prod-cell strong{display:block;font-size:.88rem;line-height:1.3} .prod-cell span{font-size:.75rem;color:var(--text-3)} .icon-act{ width:32px;height:32px;border-radius:9px;border:1px solid var(--line); background:transparent;color:var(--text-2);flex:none; display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s; } .icon-act svg{width:15px;height:15px} .icon-act:hover{color:var(--accent);border-color:var(--accent)} .icon-act.danger:hover{color:var(--danger);border-color:var(--danger)} .icon-act.on{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 55%,var(--line))} .stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden} .stepper button{width:26px;height:28px;border:0;background:var(--surface-2);color:var(--text-2);cursor:pointer;font-size:1rem;line-height:1} .stepper button:hover{color:var(--accent)} .stepper span{min-width:34px;text-align:center;font-weight:600;font-size:.88rem} .price-btn{ background:none;border:0;padding:2px 3px;font:inherit;font-weight:600;color:var(--text); cursor:pointer;border-radius:6px;border-bottom:1px dashed var(--text-3);white-space:nowrap; } .price-btn:hover{color:var(--accent);border-color:var(--accent)} .price-input{width:96px;padding:6px 8px;border-radius:8px;border:1px solid var(--accent);background:var(--bg-2);color:var(--text);font:inherit;font-size:.88rem} .status-sel{ padding:7px 10px;border-radius:9px;border:1px solid var(--line); background:var(--bg-2);color:var(--text);font-size:.82rem;font-family:inherit;max-width:180px; } /* ---- FAQ / depoimentos (admin) ---- */ .faq-row{display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--line)} .faq-row:last-child{border-bottom:0} .faq-row .q{flex:1;font-size:.9rem;font-weight:500;min-width:0} .depo-admin{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px} .star-pick{display:flex;gap:2px} .star-pick button{background:none;border:0;cursor:pointer;color:var(--text-3);padding:2px} .star-pick button svg{width:22px;height:22px} .star-pick button.on{color:var(--warn)} /* ---- Toasts ---- */ .toast-wrap{position:fixed;right:18px;bottom:18px;z-index:300;display:flex;flex-direction:column;gap:10px;max-width:min(360px,90vw)} .toast{ display:flex;align-items:center;gap:10px;background:var(--surface); border:1px solid var(--line);border-left:3px solid var(--green); border-radius:12px;padding:12px 16px;font-size:.88rem;box-shadow:var(--shadow); animation:toastIn .22s ease; } .toast svg{width:16px;height:16px;color:var(--green);flex:none} .toast.warn{border-left-color:var(--warn)} .toast.warn svg{color:var(--warn)} @keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ---- Modais ---- */ .modal-back{ position:fixed;inset:0;z-index:120;background:rgba(4,7,12,.66); display:none;align-items:center;justify-content:center;padding:20px; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); } .modal-back.open{display:flex} .modal{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); width:min(600px,100%);max-height:88vh;overflow:auto;padding:26px; } .modal.modal-sm{width:min(420px,100%)} .modal.modal-lg{width:min(760px,100%)} .modal h3{margin-bottom:16px} .modal textarea.code{ font-family:Consolas,Menlo,monospace;font-size:.76rem;line-height:1.5; min-height:280px;white-space:pre;overflow:auto; } /* ============================== Reveal (animações discretas) ============================== */ html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease} html.js .reveal.in{opacity:1;transform:none} html.js .reveal.d1{transition-delay:.08s} html.js .reveal.d2{transition-delay:.16s} html.js .reveal.d3{transition-delay:.24s} @media (prefers-reduced-motion:reduce){ html.js .reveal{opacity:1;transform:none} } /* ============================== Page hero (páginas internas) ============================== */ .page-hero{padding:clamp(44px,7vw,80px) 0 clamp(34px,5vw,56px)} .page-hero h1{max-width:20ch} .page-hero .lead{max-width:56ch} .breadcrumb{font-size:.83rem;color:var(--text-3);margin-bottom:16px} .breadcrumb a{color:var(--text-3)} .breadcrumb a:hover{color:var(--accent)} /* ============================== Utilidades ============================== */ .mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px} .mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px} .tc{text-align:center} .flex{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .flex-between{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap} .w-full{width:100%} .divider{border:0;border-top:1px solid var(--line);margin:34px 0} .hidden{display:none!important}