/* SoPlus Tecnologia - Static Site
   Modern, clean, responsive. Neon-green accent used on highlights (not on body text). */
:root {
    --bg: #070A0F;
    --bg2: #0B1220;
    --card: #0E172A;
    --text: #E6EAF2;
    --muted: #A8B0C3;
    --line: rgba(255,255,255,.10);
    --accent: #39FF88;

    /* neon green */
    --accent2: #00D1FF;

    /* subtle cyan for gradients */
    --danger: #FF4D6D;
    --shadow: 0 12px 30px rgba(0,0,0,.40);
    --radius: 18px;
    --max: 1120px;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(1000px 560px at 12% -10%, rgba(57,255,136,.15), transparent 55%),
      radial-gradient(920px 520px at 88% 0%, rgba(0,209,255,.10), transparent 55%),
      radial-gradient(900px 520px at 50% 105%, rgba(57,255,136,.10), transparent 60%),
      radial-gradient(720px 460px at 22% 70%, rgba(57,255,136,.06), transparent 62%),
      linear-gradient(180deg, rgba(57,255,136,.05) 0%, rgba(57,255,136,0) 22%, rgba(0,209,255,0) 78%, rgba(57,255,136,.05) 100%);
}


html {
    background: linear-gradient(180deg, var(--bg) 0%, #070A0F 55%, #05070B 100%);
}
body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;
    color: var(--text);
    background: transparent;
    line-height: 1.55;
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    grid-area: 1 / 1 / 2 / 3;
}

p {
    color: var(--muted);
    margin: 0 0 14px;
}

h1,
h2,
h3 {
    margin: 0 0 10px;
    line-height: 1.15;
    letter-spacing: -.02em;
}

h1 {
    font-size: clamp(34px, 4vw, 54px);
}

h2 {
    font-size: clamp(26px, 3vw, 36px);
}

h3 {
    font-size: 18px;
}

.container {
    width: min(var(--max), calc(100% - 40px));
    margin: 0 auto;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
    background: rgba(7,10,15,.72);
    border-bottom: 1px solid var(--line);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    gap: 10px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: radial-gradient(22px 22px at 20% 20%, rgba(57,255,136,.9), rgba(57,255,136,.10) 60%, transparent 65%),
    linear-gradient(135deg, rgba(0,209,255,.18), rgba(57,255,136,.10));
    border: 1px solid rgba(57,255,136,.25);
    box-shadow: 0 0 0 4px rgba(57,255,136,.06);
}

.brand-title {
    display: none;
}

.brand-title strong {
    font-size: 15px;
    letter-spacing: .02em;
}

.brand-title span {
    font-size: 12px;
    color: var(--muted);
    margin-top: -2px;
}

.menu {
    display: flex;
    align-items: center;
    gap: 14px;
}

.menu a {
    padding: 10px 10px;
    color: var(--muted);
    border-radius: 12px;
    transition: .18s ease;
}

.menu a:hover {
    color: var(--text);
    background: rgba(255,255,255,.05);
}

.menu a.active {
    color: var(--text);
    background: rgba(57,255,136,.10);
    border: 1px solid rgba(57,255,136,.25);
}

.actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.04);
    color: var(--text);
    font-weight: 650;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.btn:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
}

.btn:active {
    transform: translateY(0px);
}

.btn-accent {
    background: linear-gradient(135deg, rgba(57,255,136,.20), rgba(0,209,255,.10));
    border-color: rgba(57,255,136,.35);
}

.btn-accent:hover {
    box-shadow: 0 10px 26px rgba(57,255,136,.10);
    border-color: rgba(57,255,136,.55);
}

.btn-ghost {
    background: transparent;
    border-color: rgba(255,255,255,.14);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: var(--text);
    font-weight: 600;
    font-size: 12px;
}

.hero {
    padding: 52px 0 28px;
}


.hero:not(.hero-photo){
    position: relative;
    overflow: hidden;
}
.hero:not(.hero-photo)::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(900px 420px at 18% 0%, rgba(57,255,136,.10), transparent 58%),
      radial-gradient(860px 380px at 88% 18%, rgba(0,209,255,.08), transparent 62%);
    opacity: .95;
}
.hero:not(.hero-photo) > .container{
    position: relative;
    z-index: 1;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 26px;
    align-items: stretch;
}

.hero-card {
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow);
    padding: 26px;
    position: relative;
    overflow: hidden;
}

.hero-card:before {
    content: "";
    position: absolute;
    inset: -120px -120px auto auto;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(57,255,136,.18), transparent 60%);
    transform: rotate(18deg);
}

.hero p {
    font-size: 16px;
    max-width: 58ch;
}

.hero-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 18px;
}

.kpi {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(14,23,42,.45);
}

.kpi strong {
    display: block;
    font-size: 18px;
}

.kpi span {
    color: var(--muted);
    font-size: 12px;
}

.hero-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.panel {
    padding: 16px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(14,23,42,.45);
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.panel h3 {
    margin-bottom: 6px;
}

.panel ul {
    margin: 10px 0 0;
    padding-left: 18px;
    color: var(--muted);
}

.panel li {
    margin: 7px 0;
}

.section {
    padding: 34px 0;
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.section-head p {
    max-width: 70ch;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.card {
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(14,23,42,.45);
    padding: 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    position: relative;
    overflow: hidden;
    color: #e7e2e2;
}

.card:hover {
    border-color: rgba(57,255,136,.28);
}

.card .icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(57,255,136,.25);
    background: rgba(57,255,136,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--text);
    opacity: .95;
}

.card h3 {
    margin-bottom: 8px;
}

.card p {
    margin: 0;
}

.cta-strip {
    margin-top: 12px;
    border-radius: calc(var(--radius) + 6px);
    border: 1px solid rgba(57,255,136,.22);
    background: linear-gradient(135deg, rgba(57,255,136,.14), rgba(0,209,255,.08));
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.hr {
    height: 1px;
    background: var(--line);
    margin: 22px 0;
}

.footer {
    border-top: 1px solid var(--line);
    background: rgba(0,0,0,.20);
    padding: 26px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 18px;
    align-items: start;
}

.footer small {
    color: var(--muted);
}

.form {
    display: grid;
    gap: 10px;
}

.input {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.03);
    color: var(--text);
    outline: none;
}

.input:focus {
    border-color: rgba(57,255,136,.40);
    box-shadow: 0 0 0 4px rgba(57,255,136,.08);
}

textarea.input {
    min-height: 120px;
    resize: vertical;
}

.notice {
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px dashed rgba(255,255,255,.18);
    background: rgba(255,255,255,.03);
    color: var(--muted);
    font-size: 13px;
}

.breadcrumbs {
    padding: 18px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.breadcrumbs a {
    color: var(--muted);
}

.breadcrumbs a:hover {
    color: var(--text);
}

.tag {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: var(--muted);
    font-size: 12px;
    margin-right: 8px;
    margin-bottom: 8px;
}

.float-wa {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 80;
}

.float-wa a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 999px;
    border: 1px solid rgba(57,255,136,.35);
    background: rgba(7,10,15,.70);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.float-wa .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 6px rgba(57,255,136,.10);
}

@media (max-width: 960px){
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-compact {
        grid-template-columns: 1fr;
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .grid-4 {
        grid-template-columns: 1fr;
    }

    .section-split .split {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .menu {
        display: none;
    }

    .mobile-toggle {
        display: inline-flex;
    }
}

@media (min-width: 961px){
    .mobile-toggle {
        display: none;
    }
}

/* Mobile drawer */
.drawer {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px);
    display: none;
    z-index: 100;
}

.drawer.open {
    display: block;
}

.drawer-panel {
    position: absolute;
    top: 12px;
    right: 12px;
    width: min(340px, calc(100% - 24px));
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(14,23,42,.75);
    padding: 14px;
    box-shadow: var(--shadow);
}

.drawer-panel a {
    display: block;
    padding: 12px 12px;
    border-radius: 14px;
    color: var(--muted);
    border: 1px solid transparent;
}

.drawer-panel a:hover {
    background: rgba(255,255,255,.05);
    color: var(--text);
}

.drawer-panel a.active {
    background: rgba(57,255,136,.10);
    border-color: rgba(57,255,136,.25);
    color: var(--text);
}

/* Drawer header (used in the new home layout) */
.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 6px 10px;
}

.drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Home (new compact + photo hero) */
.hero.hero-photo {
    position: relative;
    overflow: hidden;
}

.hero.hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    filter: saturate(1.05) contrast(1.05);
    transform: scale(1.05);
    opacity: .32;
}

.hero.hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 450px at 18% 15%, rgba(57,255,136,.14), transparent 58%),
    radial-gradient(820px 380px at 85% 18%, rgba(0,209,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(7,10,15,.85), rgba(7,10,15,.65));
}

.hero.hero-photo > .container {
    position: relative;
    z-index: 1;
}

.hero-compact {
    display: block;
    width: 100%;
}

.hero-box {
    background: rgba(14,23,42,.78);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: calc(var(--radius) + 8px);
    box-shadow: var(--shadow);
    padding: 22px;
}

.hero-cardglass {
    background: rgba(14,23,42,.60);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: calc(var(--radius) + 8px);
    box-shadow: var(--shadow);
    padding: 18px;
}

.mini-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin-top: 14px;
}

.mini {
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
}

.mini strong {
    display: block;
    font-size: 13px;
}

.mini span {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}

.quick {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
}

.quick:hover {
    border-color: rgba(57,255,136,.25);
    background: rgba(57,255,136,.06);
}

.q-ico {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(57,255,136,.10);
}

.quick strong {
    display: block;
    font-size: 13px;
}

.quick span {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 1px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}

.card-media .media {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(14,23,42,.30);
}

.card-media .icon-media{display:grid;place-items:center;padding:18px;background:linear-gradient(135deg,rgba(57,255,136,.10),rgba(0,209,255,.06));}
.card-media .icon-media img{width:60px;height:60px;}
@media (max-width: 960px){
  .card-media .icon-media img{width:56px;height:56px;}
}
.card-media{
  display:flex;
  flex-direction:column;
}
.card-media .media{
  flex: 0 0 auto;
}
.card-media .card-body{
  padding-top: 12px;
  flex: 1 1 auto;
}

.section-split .split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    align-items: center;
}

.split-media {
    border-radius: calc(var(--radius) + 8px);
    border: 1px solid rgba(255,255,255,.12);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: rgba(14,23,42,.35);
}

.split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Illustrations */
.hero-illus {
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius) + 6px);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow);
    background: rgba(14,23,42,.30);
}

.card img.card-illus {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    margin-bottom: 12px;
    background: rgba(14,23,42,.30);
}

.brand .logoimg {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}


@media (max-width: 960px){
    .brand .logoimg {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}


    .hero-photo {
        height: 220px;
        max-height: 220px;
    }
}

@media (max-width: 960px){
    .brand .logoimg {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}


    @media (max-width: 960px){
        .brand .logoimg {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}


        .hero-photo {
            height: 220px;
            max-height: 220px;
        }
    }
}

/* Real photos tuning */
.hero-illus {
    object-fit: cover;
    max-height: 320px;
    object-position: center;
}

.card img.card-illus {
    height: 170px;
    object-position: center;
}

.drawer .logoimg {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}


img {
    max-width: 100%;
}

.whatsapp-btn::before {
    content: '';
    width: 26px;
    height: 26px;
    background: url('https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg') no-repeat center;
    background-size: contain;
    display: block;
}

/* WhatsApp button – layout aligned */
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg,#25D366,#1ebe5d);
    color: #0b1a12;
    font-weight: 700;
    border: 1px solid rgba(0,0,0,.08);
}

.whatsapp-btn svg {
    width: 22px;
    height: 22px;
    fill: #0b1a12;
}

/* WhatsApp flutuante (único CTA do site) */
.whatsapp-float{
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
    background: #25D366;
    border: 1px solid rgba(0,0,0,.08);
}

.whatsapp-float__icon{
    font-size: 26px;
    line-height: 1;
    color: #fff;
}

.whatsapp-float:hover{
    transform: translateY(-2px);
}


/* WhatsApp flutuante: ícone real */
.whatsapp-float__svg{width:28px;height:28px;color:#fff;}


/* Badge logo on hero */
.badge-logo{
  width: 34px;
  height: 34px;
  object-fit: contain;
  vertical-align: middle;
}

/* Never round logos in footer/drawer */
.footer img, .drawer-brand img{
  border-radius: 0 !important;
}


/* Header logo larger on desktop */
.topbar .logoimg,
.topbar .brand .logoimg{
  width: 96px;
  height: 96px;
}

/* Ensure hero heading uses full width */
.hero .hero-box, .hero-compact, .hero-compact > *{
  max-width: 100%;
}

/* Mobile refinements */
@media (max-width: 720px){
  .topbar .logoimg{ width: 112px; height: 112px; }
.badge{ padding: 10px 14px; }
  .badge-logo{ width: 30px; height: 30px; }
  h1{ font-size: clamp(30px, 7vw, 44px); line-height: 1.08; }
  .hero{ padding: 44px 0 22px; }
  .hero-box{ padding: 18px; }
  .hero-cta{ flex-wrap: wrap; }
  .hero-cta .btn{ width: 100%; justify-content: center; }
  .grid-3{ grid-template-columns: 1fr; gap: 14px; }
  .section{ padding: 36px 0; }
}

@media (max-width: 420px){
  .topbar .brand-title strong{ font-size: 14px; }
  .topbar .brand-title span{ font-size: 11px; }
  .badge-logo{ width: 28px; height: 28px; }
  .hero-box{ padding: 16px; }
}





/* Header logo (maior, ainda equilibrada) */
.topbar .logoimg{
  width: 76px;
  height: 76px;
}

@media (max-width: 720px){
  .topbar .logoimg{ width: 112px; height: 112px; }
}


/* === SoPlus ajustes mobile/logo (Jan 2026) === */
/* Logo maior no topo (desktop e mobile) */
.topbar .logoimg{
  width: 76px !important;
  height: 76px !important;
}

/* Corrige corte do texto do HERO no mobile (evita altura fixa em .hero-photo) */
@media (max-width: 960px){
  .topbar .logoimg{
    width: 64px !important;
    height: 64px !important;
  }
  .hero-photo{
    height: auto !important;
    max-height: none !important;
  }
}

@media (max-width: 420px){
  .topbar .logoimg{
    width: 60px !important;
    height: 60px !important;
  }
}

/* --- SoPlus ajustes: logo mobile + quick contact + fundo --- */
.topbar .brand .logoimg{
  width: 74px;
  height: 74px;
}
@media (max-width: 720px){
  .topbar .brand .logoimg{
    width: 68px;
    height: 68px;
  }
}
@media (max-width: 420px){
  .topbar .brand .logoimg{
    width: 64px;
    height: 64px;
  }
}

/* Quick Contact (antes do rodapé) */
.quick-contact{
  padding-top: 14px;
  padding-bottom: 14px;
}
.quick-card{
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(57,255,136,.18);
  background: radial-gradient(900px 450px at 15% 20%, rgba(57,255,136,.12), transparent 55%),
              radial-gradient(900px 450px at 85% 30%, rgba(0,209,255,.10), transparent 55%),
              rgba(14,23,42,.25);
  box-shadow: var(--shadow);
  padding: 18px;
}
.quick-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.quick-head h2{
  margin: 0;
  font-size: 20px;
}
.quick-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}


/* Glow de transição do "Contato rápido" para o rodapé (mais natural) */
.quick-contact{
  position: relative;
  overflow: hidden;
}
.quick-contact::after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-48px;
  height:160px;
  background: radial-gradient(700px 160px at 50% 0%, rgba(57,255,136,.14), transparent 70%),
              radial-gradient(700px 160px at 60% 10%, rgba(0,209,255,.10), transparent 72%);
  filter: blur(0.2px);
  pointer-events:none;
}

/* Rodapé com transição mais suave */
.footer{
  background: linear-gradient(180deg, rgba(57,255,136,.08) 0%, rgba(11,18,32,.55) 45%, rgba(0,0,0,.22) 100%);
  box-shadow: inset 0 1px 0 rgba(57,255,136,.10);
}


/* === FINAL: Logo maior no PC (sem mexer no mobile) === */
/* Desktop */
@media (min-width: 961px){
  .topbar .brand .logoimg{
    width: 92px !important;
    height: 92px !important;
  }
}
/* Tablet / Mobile (mantém o tamanho atual) */
@media (max-width: 960px){
  .topbar .brand .logoimg{
    width: 68px !important;
    height: 68px !important;
  }
}
@media (max-width: 420px){
  .topbar .brand .logoimg{
    width: 64px !important;
    height: 64px !important;
  }
}

/* === FINAL: Logo maior no PC (ajuste solicitado) === */
@media (min-width: 961px){
  .topbar .brand .logoimg{
    width: 92px !important;
    height: 92px !important;
  }
}
@media (max-width: 960px){
  .topbar .brand .logoimg{
    width: 72px !important;
    height: 72px !important;
  }
}
@media (max-width: 720px){
  .topbar .brand .logoimg{
    width: 68px !important;
    height: 68px !important;
  }
}
@media (max-width: 420px){
  .topbar .brand .logoimg{
    width: 64px !important;
    height: 64px !important;
  }
}


/* ============================================================
   v11 Ajustes solicitados (logo 2x, favicon maior, contato verde, alinhamento mobile)
   ============================================================ */

/* Logo maior (desktop) */
.topbar .logoimg,
.topbar .brand .logoimg{
  width: 128px !important;
  height: 128px !important;
}

/* Logo maior dentro do menu mobile (drawer) */
.drawer .logoimg{
  width: 112px !important;
  height: 112px !important;
}
/* Logo maior (mobile) + pequenos ajustes de espaçamento do header */
@media (max-width: 720px){
  .topbar .logoimg,
  .topbar .brand .logoimg{
    width: 112px !important;
    height: 112px !important;
  }
  .nav{ padding: 10px 0 !important; }
}
/* Fundo mais harmonioso APENAS na página de contato */
body.page-contato::before{
  background:
    radial-gradient(1000px 560px at 12% -10%, rgba(57,255,136,.18), transparent 58%),
    radial-gradient(920px 520px at 88% 0%, rgba(0,209,255,.12), transparent 58%),
    radial-gradient(900px 520px at 50% 105%, rgba(57,255,136,.14), transparent 62%),
    radial-gradient(720px 460px at 22% 70%, rgba(57,255,136,.08), transparent 66%),
    linear-gradient(180deg, rgba(57,255,136,.06) 0%, rgba(57,255,136,0) 22%, rgba(0,209,255,0) 78%, rgba(57,255,136,.06) 100%);
}
/* Hero glow um pouco mais suave no contato */
body.page-contato .hero:not(.hero-photo)::before{
  opacity: .78;
  background:
    radial-gradient(980px 440px at 18% 0%, rgba(57,255,136,.12), transparent 60%),
    radial-gradient(920px 420px at 88% 18%, rgba(0,209,255,.10), transparent 65%);
}

/* Alinhamento melhor (texto + foto) no mobile na tela inicial */
@media (max-width: 720px){
  .section-split .split{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
.section-split .split > div:last-child{
    display: flex;
    justify-content: center;
  }
  .section-split .hero-illus{
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }
}

/* =========================================================
   v13 — Ajustes finais: logo proporcional maior + fotos reais nos cards
   ========================================================= */

/* Logo do cabeçalho: aumentar sem achatar (logo é retangular) */
.topbar .brand .logoimg{
  height: 74px !important;
  width: auto !important;
  max-width: 260px;
  object-fit: contain;
}
@media (max-width: 720px){
  .topbar .brand .logoimg{ height: 64px !important; }
}
@media (max-width: 420px){
  .topbar .brand .logoimg{ height: 58px !important; }
}

/* Logo do menu lateral (drawer) */
.drawer .logoimg{
  height: 64px !important;
  width: auto !important;
  max-width: 220px;
  object-fit: contain;
}

/* Cards de serviços: usar fotos (sem restringir a 60x60 do ícone) */
.card-media .photo-media{
  padding: 0 !important;
  display: block !important;
  overflow: hidden;
  background: rgba(14,23,42,.25) !important;
}
.card-media .photo-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* =========================================================
   v14 — Teste de velocidade
   ========================================================= */
.metrics-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
  margin-top: 14px;
}
@media (max-width: 960px){
  .metrics-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.metric{
  padding: 14px;
}
.metric .label{
  color: var(--muted);
  font-size: 12px;
}
.metric .value{
  font-size: 22px;
  font-weight: 800;
  margin-top: 6px;
}
.meter{
  margin-top: 14px;
  height: 10px;
  width: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
}
.meter > div{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(57,255,136,.8), rgba(0,209,255,.65));
}
.note{
  color: var(--muted);
  font-size: 12px;
  margin-top: 10px;
  line-height: 1.45;
}

/* =========================================================
   v18 — Ajustes finais solicitados (Jan 2026)
   - Logo menor (mais agradável no PC e no mobile)
   ========================================================= */

/* Desktop */
@media (min-width: 961px){
  .topbar .brand .logoimg{
    height: 70px !important;
    width: auto !important;
    max-width: 260px !important;
  }
}

/* Tablet / Mobile */
@media (max-width: 960px){
  .topbar .brand .logoimg{
    height: 60px !important;
    width: auto !important;
    max-width: 220px !important;
  }
}
@media (max-width: 420px){
  .topbar .brand .logoimg{
    height: 54px !important;
    width: auto !important;
    max-width: 210px !important;
  }
}


/* =========================================================
   v20 — Ajustes HostGator + SpeedTest (Jan 2026)
   ========================================================= */

/* Evita “sumir” item do menu por mudança de tamanho quando fica ativo */
.menu a,
.drawer-panel a{
  border: 1px solid transparent;
  box-sizing: border-box;
}
.menu a.active,
.drawer-panel a.active{
  border-color: rgba(57,255,136,.25);
}

/* Logo do topo: tamanho mais agradável (desktop e mobile) */
.topbar .logoimg,
.topbar .brand .logoimg{
  width: 68px !important;
  height: 68px !important;
}
@media (max-width: 960px){
  .topbar .logoimg,
  .topbar .brand .logoimg{
    width: 56px !important;
    height: 56px !important;
  }
}


/* v21 logo sizing (igual à versão 19) */
.brand .logoimg{width:74px; height:74px;}
@media (max-width: 960px){ .brand .logoimg{width:66px; height:66px;} }
@media (max-width: 420px){ .brand .logoimg{width:60px; height:60px;} }


/* === SoPlus v22: ajuste final da logo (igual à v19) === */
.topbar .brand .logoimg{
  width: 84px !important;
  height: 84px !important;
}
@media (max-width: 720px){
  .topbar .brand .logoimg{ width: 72px !important; height: 72px !important; }
}
@media (max-width: 420px){
  .topbar .brand .logoimg{ width: 66px !important; height: 66px !important; }
}


/* === SoPlus v23: logo maior (override final) === */
.topbar .brand .logoimg{
  width: 120px !important;
  height: 120px !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
}
@media (max-width: 1200px){
  .topbar .brand .logoimg{ width: 110px !important; height: 110px !important; }
}
@media (max-width: 960px){
  .topbar .brand .logoimg{ width: 104px !important; height: 104px !important; }
}
@media (max-width: 720px){
  .topbar .brand .logoimg{ width: 96px !important; height: 96px !important; }
}
@media (max-width: 420px){
  .topbar .brand .logoimg{ width: 88px !important; height: 88px !important; }
}

/* Ajusta o topo para acomodar a logo maior sem “apertar” */
@media (max-width: 720px){
  .nav{ padding: 10px 0 !important; }
}


/* === SoPlus v24: logo retangular (tamanho real pra logo larga) === */
/* A logo SoPlus é bem “larga”, então o que manda é ALTURA + largura automática */
.topbar .brand .logoimg{
  height: 64px !important;
  width: auto !important;
  max-height: none !important;
  display: block;
}
@media (max-width: 1200px){
  .topbar .brand .logoimg{ height: 58px !important; }
}
@media (max-width: 960px){
  .topbar .brand .logoimg{ height: 54px !important; }
}
@media (max-width: 720px){
  .topbar .brand .logoimg{ height: 60px !important; } /* no mobile pode ficar maior */
}
@media (max-width: 420px){
  .topbar .brand .logoimg{ height: 56px !important; }
}


/* v25 - ajuste fino do tamanho da logo (um pouco menor) + mantém proporção */
.topbar .brand .logoimg{
  height: 64px !important;
  width: auto !important;
  max-width: 220px;
}
@media (max-width: 980px){
  .topbar .brand .logoimg{ height: 58px !important; max-width: 200px; }
}
@media (max-width: 420px){
  .topbar .brand .logoimg{ height: 54px !important; max-width: 180px; }
}



/* v26 - logo menor (metade) */
.brand .logoimg,
header .logoimg,
.topnav .logoimg{
  height: 28px !important;
  width: auto !important;
  max-width: 180px !important;
}
@media (max-width: 768px){
  .brand .logoimg,
  header .logoimg,
  .topnav .logoimg{
    height: 26px !important;
  }
}
@media (max-width: 420px){
  .brand .logoimg,
  header .logoimg,
  .topnav .logoimg{
    height: 24px !important;
  }
}

/* =============================
   AJUSTE FINAL DA LOGO (HEADER)
   ============================= */
.topbar .brand .logoimg{
  height: 36px !important;
  width: auto !important;
  max-width: 200px !important;
}
@media (max-width: 960px){
  .topbar .brand .logoimg{
    height: 32px !important;
    max-width: 190px !important;
  }
}
@media (max-width: 420px){
  .topbar .brand .logoimg{
    height: 28px !important;
    max-width: 170px !important;
  }
}



/* =========================================================
   v41 — Ajuste foto "Quem somos" (evitar cortar rostos)
   ========================================================= */
body.page-sobre .hero-side img.hero-illus{
  /* evita corte: mostra a imagem inteira */
  height: clamp(320px, 42vw, 520px);
  width: 100%;
  object-fit: contain !important;
  object-position: center top;
  background: rgba(14,23,42,.30);
  padding: 8px;
}

@media (max-width: 720px){
  body.page-sobre .hero-side img.hero-illus{
    height: 360px;
    padding: 6px;
  }
}