/* ============================================
       VARIÁVEIS E RESET (padrão LP Internet)
    ============================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --c-primary: #0170B9;
      --c-primary-light: #2196F3;
      --c-primary-dark: #015a94;
      --c-bg: #FFFFFF;
      --c-bg-section: #F8FBFF;
      --c-bg-alt: #EDF4FB;
      --c-text: #FFFFFF;
      --c-titulo: #1a3a5c;
      --c-corpo: #4a5568;
      --c-muted: #718096;
      --c-borda: #E2E8F0;
      --c-borda-destaque: rgba(1,112,185,0.2);
      --c-sucesso: #10B981;
      --c-erro: #EF4444;
      --c-aviso: #F59E0B;
      --c-info: #3B82F6;
      --c-whatsapp: #25D366;
      --c-gray: #3a3a3a;
      --shadow: 0 10px 30px rgba(1,112,185,.15);
      --radius: 16px;
      --led: drop-shadow(0 0 6px rgba(1,112,185,.6)) drop-shadow(0 0 18px rgba(33,150,243,.3));
      --grad-principal: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
      --grad-suave: linear-gradient(180deg, #F8FBFF 0%, #EDF4FB 100%);
      --grad-footer: linear-gradient(180deg, #0170B9 0%, #015a94 100%);
    }

    html, body {
      margin: 0;
      padding: 0;
      background: #0a0f20 !important;
      color: var(--c-text);
      font: 16px/1.6 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    .container { width: min(1180px, 92vw); margin-inline: auto; }

    /* ============================================
       HEADER / MENU (idêntico ao index.html)
    ============================================ */
    .logo-link {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .menu-logo {
      width: 110px;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 0 8px rgba(255,255,255,0.6)) drop-shadow(0 0 15px rgba(255,255,255,0.3));
      transition: transform .3s ease, filter .3s ease;
    }
    .header-slogan {
      font-size: 0.75rem;
      color: rgba(255,255,255,0.9);
      font-weight: 500;
      margin-left: 12px;
      white-space: nowrap;
      letter-spacing: 0.5px;
    }
    .menu-logo:hover {
      transform: scale(1.08);
      filter: drop-shadow(0 0 12px rgba(255,255,255,0.9)) drop-shadow(0 0 25px rgba(255,255,255,0.5)) drop-shadow(0 0 40px rgba(100,200,255,0.4));
    }

    @media (max-width: 980px) {
      .logo-link { margin-right: auto; }
      .menu-logo { width: 90px; }
      .header-slogan { display: none; }
    }

    .main-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      background: linear-gradient(135deg, rgba(1,112,185,0.95) 0%, rgba(0,60,120,0.98) 100%);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      border-bottom: 1px solid rgba(255,255,255,0.1);
      transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
    }

    .main-header.scrolled {
      background: linear-gradient(135deg, rgba(1,112,185,0.85) 0%, rgba(0,60,120,0.9) 100%);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 4px 30px rgba(0,0,0,.2);
      border-bottom: 1px solid rgba(255,255,255,0.15);
    }

    .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; position: relative; gap: 16px; }
    .nav nav { display: flex; justify-content: center; }
    .nav .cta { flex-shrink: 0; }
    nav ul { display: flex; list-style: none; gap: 18px; margin: 0; padding: 0; }
    nav a { font-weight: 600; color: rgba(255,255,255,0.9); font-size: 0.85rem; white-space: nowrap; transition: color 0.2s; }
    nav a:hover { color: #fff; }
    nav a.active { color: #fff; font-weight: 700; }
    .cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light)); color: #fff; font-weight: 800; font-size: 0.8rem; letter-spacing: .3px; box-shadow: var(--shadow); transition: transform .15s ease, filter .2s ease; white-space: nowrap; }
    .cta:hover { transform: translateY(-1px); filter: brightness(1.05); }

    .led-bar { position: absolute; left: 0; bottom: -2px; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, var(--c-primary-light), var(--c-primary), transparent); filter: var(--led); animation: scan 3.6s linear infinite; }
    @keyframes scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

    /* Mobile Menu Button */
    .menu-btn {
      display: none;
      background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
      color: #fff;
      border: none;
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 18px;
      cursor: pointer;
      margin-left: 10px;
    }

    @media (max-width: 980px) {
      .nav nav, .nav .cta { display: none; }
      .menu-btn { display: flex; }
    }

    /* Mobile Menu Overlay */
    .mobile-menu-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 9999;
      opacity: 0;
      transition: opacity 0.3s ease;
      overflow: visible;
    }
    .mobile-menu-overlay.show { opacity: 1; }

    .mobile-menu-content {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 300px;
      max-width: 85vw;
      background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
      display: flex;
      flex-direction: column;
      padding: 20px;
      box-sizing: border-box;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      box-shadow: -5px 0 30px rgba(1, 112, 185, 0.4);
      overflow: visible;
    }
    .mobile-menu-overlay.show .mobile-menu-content { transform: translateX(0); }

    .menu-close {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(255, 255, 255, 0.15);
      border: none;
      color: #fff;
      font-size: 24px;
      cursor: pointer;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      z-index: 10;
    }
    .menu-close:hover { background: rgba(255, 255, 255, 0.25); }

    .mobile-menu-mascot {
      position: fixed;
      right: 220px;
      top: 50%;
      transform: translateY(-50%) translateX(100%);
      height: 280px;
      width: auto;
      filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.6));
      z-index: 10000;
      pointer-events: none;
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .mobile-menu-overlay.show .mobile-menu-mascot {
      transform: translateY(-50%) translateX(0);
      opacity: 1;
    }

    .mobile-menu-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 20px 0 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      margin-bottom: 20px;
    }
    .mobile-menu-logo {
      height: 40px;
      width: auto;
      margin-bottom: 6px;
      display: block;
    }
    .mobile-menu-slogan {
      display: block;
      color: rgba(255, 255, 255, 0.9);
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.5px;
    }

    .mobile-menu-nav {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 20px;
    }
    .mobile-menu-nav a {
      color: #fff;
      font-size: 1.1rem;
      font-weight: 600;
      text-decoration: none;
      padding: 14px 16px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.1);
      transition: all 0.2s ease;
    }
    .mobile-menu-nav a:hover,
    .mobile-menu-nav a:active { background: rgba(255, 255, 255, 0.2); color: #fff; }

    .mobile-menu-contact {
      display: flex;
      gap: 10px;
      margin-bottom: 16px;
    }
    .contact-whatsapp,
    .contact-phone {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 8px;
      border-radius: 10px;
      text-decoration: none;
      font-size: 0.75rem;
      font-weight: 600;
    }
    .contact-whatsapp {
      background: rgba(37, 211, 102, 0.9);
      color: #fff;
      border: none;
    }
    .contact-whatsapp:hover { background: #25d366; }
    .contact-phone {
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      border: none;
    }
    .contact-phone:hover { background: rgba(255, 255, 255, 0.25); }

    .mobile-cta {
      background: #fff;
      color: var(--c-primary);
      padding: 14px 20px;
      border-radius: 10px;
      text-decoration: none;
      font-weight: 700;
      font-size: 0.9rem;
      text-align: center;
      margin-bottom: 16px;
      transition: all 0.2s ease;
    }
    .mobile-cta:hover { background: var(--c-bg-section); }

    .mobile-menu-social {
      display: flex;
      justify-content: center;
      gap: 12px;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      margin-top: auto;
    }
    .mobile-menu-social a {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
    }
    .mobile-menu-social a:hover { background: rgba(255, 255, 255, 0.25); }

    /* ============================================
       MODAL/GAVETA DE SELEÇÃO DE BRINDES
       ============================================ */
    .selecao-brinde-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .selecao-brinde-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }
    .selecao-brinde-modal {
      background: #fff;
      border-radius: 24px;
      width: 90%;
      max-width: 720px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
      transform: scale(0.9) translateY(30px);
      transition: transform 0.3s ease;
    }
    .selecao-brinde-overlay.active .selecao-brinde-modal {
      transform: scale(1) translateY(0);
    }
    .selecao-brinde-drag { display: none; }
    .selecao-brinde-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 24px 16px;
      border-bottom: 1px solid var(--c-borda);
    }
    .selecao-brinde-title {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .selecao-brinde-icon {
      width: 52px;
      height: 52px;
      background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px rgba(1, 112, 185, 0.3);
    }
    .selecao-brinde-icon svg { width: 28px; height: 28px; fill: #fff; }
    .selecao-brinde-title h3 { margin: 0; font-size: 1.4rem; color: var(--c-titulo); }
    .selecao-brinde-title p { margin: 4px 0 0; font-size: 0.9rem; color: var(--c-primary); font-weight: 600; }
    .selecao-brinde-close {
      width: 40px;
      height: 40px;
      border: none;
      background: var(--c-bg-section);
      border-radius: 50%;
      font-size: 1.8rem;
      color: var(--c-muted);
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    .selecao-brinde-close:hover { background: var(--c-erro); color: #fff; }
    .selecao-brinde-info {
      padding: 16px 24px;
      margin: 0;
      font-size: 0.95rem;
      color: var(--c-corpo);
      background: var(--c-bg-section);
    }
    .selecao-brinde-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      padding: 24px;
    }
    @media (max-width: 600px) {
      .selecao-brinde-grid { grid-template-columns: repeat(2, 1fr); }
    }
    .selecao-brinde-card {
      background: #fff;
      border: 2px solid var(--c-borda);
      border-radius: 16px;
      padding: 20px;
      cursor: pointer;
      transition: all 0.25s ease;
      position: relative;
      text-align: center;
    }
    .selecao-brinde-card:hover {
      border-color: var(--c-primary-light);
      box-shadow: 0 8px 24px rgba(1, 112, 185, 0.12);
    }
    .selecao-brinde-card.selected {
      border-color: var(--c-primary);
      background: linear-gradient(180deg, rgba(1, 112, 185, 0.05) 0%, rgba(1, 112, 185, 0.02) 100%);
      box-shadow: 0 8px 24px rgba(1, 112, 185, 0.15);
    }
    .selecao-brinde-card.selected::after {
      content: '';
      position: absolute;
      top: 12px;
      right: 12px;
      width: 24px;
      height: 24px;
      background: var(--c-sucesso);
      border-radius: 50%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
      background-size: 16px;
      background-position: center;
      background-repeat: no-repeat;
    }
    .selecao-brinde-card-img {
      width: 80px;
      height: 80px;
      margin: 0 auto 12px;
      object-fit: contain;
      border-radius: 12px;
    }
    .selecao-brinde-card-nome { font-size: 1rem; font-weight: 700; color: var(--c-titulo); margin: 0 0 4px; }
    .selecao-brinde-card-desc { font-size: 0.8rem; color: var(--c-muted); margin: 0; }
    .selecao-brinde-footer {
      padding: 20px 24px 24px;
      border-top: 1px solid var(--c-borda);
      text-align: center;
    }
    .selecao-brinde-btn-confirmar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 16px 32px;
      border: none;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
      color: #fff;
      font-size: 1.05rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 8px 24px rgba(1, 112, 185, 0.3);
    }
    .selecao-brinde-btn-confirmar:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(1, 112, 185, 0.4);
    }
    .selecao-brinde-btn-confirmar:disabled { opacity: 0.5; cursor: not-allowed; }
    .selecao-brinde-btn-confirmar svg { width: 20px; height: 20px; }
    .selecao-brinde-footer small { display: block; margin-top: 12px; font-size: 0.8rem; color: var(--c-muted); }

    @media (max-width: 768px) {
      .selecao-brinde-overlay { align-items: flex-end; }
      .selecao-brinde-modal {
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        border-radius: 24px 24px 0 0;
        transform: translateY(100%);
      }
      .selecao-brinde-overlay.active .selecao-brinde-modal { transform: translateY(0); }
      .selecao-brinde-drag {
        display: block;
        width: 40px;
        height: 5px;
        background: var(--c-borda);
        border-radius: 3px;
        margin: 12px auto 0;
      }
    }

    /* ============================================
       HERO SECTION - Design Moderno
    ============================================ */
    .hero {
      position: relative;
      min-height: 90vh;
      display: flex;
      align-items: center;
      background: url('img/servicos/hero-bg.jpg') center center / cover no-repeat;
      overflow: hidden;
      padding-top: 80px;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(1,112,185,0.92) 0%, rgba(0,50,100,0.85) 100%);
    }

    .hero::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 80px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%230a0f20' d='M0,60 C360,120 720,0 1080,60 C1260,90 1380,90 1440,60 L1440,120 L0,120 Z'/%3E%3C/svg%3E") no-repeat bottom center;
      background-size: 100% 100%;
      z-index: 3;
    }

    /* Hero Canvas e Elementos Animados */
    .hero-canvas {
      position: absolute;
      inset: 0;
      z-index: 2;
      opacity: 0.8;
      pointer-events: none;
    }

    .floating-orb {
      position: absolute;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(0,114,254,.6), rgba(1,112,185,.2));
      box-shadow: 0 0 20px rgba(0,114,254,.4), inset 0 0 20px rgba(255,255,255,.1);
      animation: floatOrb 25s infinite ease-in-out;
      opacity: 0.6;
      z-index: 2;
      pointer-events: none;
    }

    @keyframes floatOrb {
      0%, 100% { transform: translate(0,0) scale(1); }
      25% { transform: translate(30px,-50px) scale(1.1); }
      50% { transform: translate(-20px,30px) scale(0.9); }
      75% { transform: translate(40px,-10px) scale(1.05); }
    }

    .floating-logo {
      position: absolute;
      width: 80px;
      height: 80px;
      opacity: 0.08;
      animation: floatLogo 20s infinite linear;
      transform: translateZ(0);
      will-change: transform;
      z-index: 2;
      pointer-events: none;
    }

    @keyframes floatLogo {
      0% { transform: translate(0,0) rotate(0deg) scale(1); }
      25% { transform: translate(50px,-30px) rotate(90deg) scale(1.1); }
      50% { transform: translate(20px,40px) rotate(180deg) scale(0.9); }
      75% { transform: translate(-30px,-20px) rotate(270deg) scale(1.05); }
      100% { transform: translate(0,0) rotate(360deg) scale(1); }
    }

    .hero-content {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 60px;
      align-items: center;
      padding: 80px 0;
    }

    .hero-text h1 {
      font-size: clamp(2.8rem, 5vw, 4.5rem);
      font-weight: 900;
      color: white;
      line-height: 1.05;
      margin-bottom: 24px;
      text-shadow: 0 4px 30px rgba(0,0,0,0.3);
    }

    .hero-text h1 span {
      display: block;
      background: linear-gradient(90deg, #00D9FF, #00FFC8);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 20px rgba(0,217,255,0.5));
    }

    .hero-subtitle {
      font-size: 1.1rem;
      color: rgba(255,255,255,0.85);
      margin-bottom: 12px;
      font-weight: 500;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .hero-text p {
      font-size: 1.25rem;
      color: rgba(255,255,255,0.9);
      margin-bottom: 35px;
      max-width: 550px;
      line-height: 1.7;
    }

    .hero-buttons {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 18px 36px;
      background: linear-gradient(135deg, #00D9FF, #00B4D8);
      color: #003366;
      font-weight: 800;
      font-size: 1rem;
      border-radius: 50px;
      box-shadow: 0 10px 40px rgba(0,217,255,0.4);
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .btn-primary:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 15px 50px rgba(0,217,255,0.6);
      background: linear-gradient(135deg, #00FFC8, #00D9FF);
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 18px 36px;
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
      color: white;
      font-weight: 700;
      font-size: 1rem;
      border: 2px solid rgba(255,255,255,0.3);
      border-radius: 50px;
      transition: all 0.3s ease;
    }
    .btn-secondary:hover {
      background: rgba(255,255,255,0.2);
      border-color: rgba(255,255,255,0.6);
      transform: translateY(-2px);
    }

    .hero-image {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .hero-image img {
      max-width: 100%;
      height: auto;
      filter: drop-shadow(0 20px 60px rgba(0,0,0,0.4));
      animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
    }

    .hero-badges {
      display: flex;
      gap: 16px;
      margin-top: 35px;
      flex-wrap: wrap;
    }

    .hero-badge {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 20px;
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 50px;
      color: white;
      font-size: 0.85rem;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    .hero-badge:hover {
      background: rgba(255,255,255,0.2);
      transform: translateY(-2px);
    }

    .hero-badge svg {
      width: 22px;
      height: 22px;
      color: #00D9FF;
    }

    /* Stats no Hero */
    .hero-stats {
      display: flex;
      gap: 40px;
      margin-top: 50px;
      padding-top: 30px;
      border-top: 1px solid rgba(255,255,255,0.2);
    }

    .hero-stat {
      text-align: left;
    }

    .hero-stat-value {
      font-size: 2.5rem;
      font-weight: 900;
      color: #00D9FF;
      line-height: 1;
    }

    .hero-stat-label {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.7);
      margin-top: 4px;
    }

    @media (max-width: 980px) {
      .hero { min-height: 100vh; }
      .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 60px 0;
      }
      .hero-text p { margin-inline: auto; }
      .hero-buttons { justify-content: center; }
      .hero-badges { justify-content: center; }
      .hero-stats { justify-content: center; gap: 30px; }
      .hero-stat { text-align: center; }
      .hero-image { order: -1; }
      .hero-image img { max-width: 280px; }
    }

    @media (max-width: 768px) {
      .hero {
        min-height: 35vh;
        padding-top: 70px;
      }
      .hero-content {
        display: flex;
        justify-content: center;
        padding: 30px 0;
      }
      .hero-text {
        display: none;
      }
      .hero-image {
        order: 0;
      }
      .hero-image img {
        max-width: 200px;
        max-height: 180px;
      }
      .hero::after {
        height: 50px;
      }
    }

    /* ============================================
       BENEFÍCIOS / DIFERENCIAIS
    ============================================ */
    .benefits-section {
      background: #0a0f20;
      padding: 80px 0;
      position: relative;
      overflow: hidden;
    }

    .benefits-section .bg-effect {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background:
        radial-gradient(ellipse 600px 400px at 10% 50%, rgba(1,112,185,0.15) 0%, transparent 70%),
        radial-gradient(ellipse 500px 350px at 90% 30%, rgba(0,217,255,0.1) 0%, transparent 70%),
        radial-gradient(ellipse 400px 300px at 50% 80%, rgba(0,255,200,0.08) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    #matrixCanvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      opacity: 0.4;
    }

    .benefits-section::before {
      content: '';
      position: absolute;
      top: -40px;
      left: 0;
      right: 0;
      height: 80px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%2300D9FF' stroke-width='3' d='M0,60 C360,120 720,0 1080,60 C1260,90 1380,90 1440,60'/%3E%3C/svg%3E") no-repeat top center;
      background-size: 100% 100%;
      z-index: 5;
      filter: drop-shadow(0 0 8px #0170B9) drop-shadow(0 0 15px #00D9FF) drop-shadow(0 0 25px rgba(0,217,255,0.5));
    }

    .benefits-section::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      height: 3px;
      background: linear-gradient(90deg, transparent, #0170B9, #00D9FF, #0170B9, transparent);
      box-shadow: 0 0 20px #0170B9, 0 0 40px rgba(0,217,255,0.5);
    }

    .benefits-header {
      text-align: center;
      margin-bottom: 50px;
      position: relative;
      z-index: 1;
    }

    .benefits-header h2 {
      font-size: 2.5rem;
      font-weight: 800;
      background: linear-gradient(135deg, #fff 0%, #00D9FF 50%, #00FFC8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 16px;
    }

    .benefits-header p {
      font-size: 1.1rem;
      color: rgba(255,255,255,0.7);
      max-width: 600px;
      margin: 0 auto;
    }

    .benefits-wrapper {
      display: flex;
      align-items: center;
      gap: 60px;
      position: relative;
      z-index: 1;
    }

    .benefits-mascot-single {
      flex-shrink: 0;
      width: 400px;
      z-index: 2;
      position: relative;
    }

    .benefits-mascot-single img {
      width: 100%;
      height: auto;
      filter: drop-shadow(0 0 30px rgba(0,217,255,0.4)) drop-shadow(0 0 60px rgba(1,112,185,0.3));
    }

    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      flex: 1;
      position: relative;
      z-index: 1;
    }

    .benefit-card {
      background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 20px;
      padding: 28px 22px;
      text-align: center;
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
    }

    .benefit-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #00D9FF, #00FFC8);
      opacity: 0;
      transition: opacity 0.3s;
    }

    .benefit-card:hover {
      transform: translateY(-8px);
      background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
      box-shadow: 0 20px 40px rgba(0,217,255,0.15);
    }

    .benefit-card:hover::before {
      opacity: 1;
    }

    .benefit-icon {
      width: 60px;
      height: 60px;
      margin: 0 auto 16px;
      background: linear-gradient(135deg, rgba(0,217,255,0.2), rgba(0,255,200,0.1));
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .benefit-icon svg {
      width: 32px;
      height: 32px;
      color: #00D9FF;
    }

    .benefit-card h3 {
      font-size: 1rem;
      font-weight: 700;
      color: white;
      margin-bottom: 10px;
    }

    .benefit-card p {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.6);
      line-height: 1.5;
    }

    @media (max-width: 1024px) {
      .benefits-header h2 {
        font-size: 2rem;
      }
      .benefits-header p {
        font-size: 1rem;
      }
      .benefits-wrapper {
        flex-direction: column;
        gap: 30px;
      }
      .benefits-mascot-single {
        width: 300px;
        order: -1;
      }
      .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .benefits-header h2 {
        font-size: 1.6rem;
      }
      .benefits-grid { grid-template-columns: 1fr; }
      .benefits-mascot-single {
        width: 220px;
      }
    }

    /* ============================================
       NOSSAS LOJAS
    ============================================ */
    /* Ajuste da seção de streaming para transição suave */
    #streaming {
      margin-bottom: -30px;
      padding-bottom: 50px;
    }

    .stores-section {
      background: linear-gradient(180deg, #0a0f20 0%, #0d1529 100%);
      padding: 120px 0 130px;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    .stores-wave {
      position: absolute;
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
      z-index: 3;
    }

    .stores-wave-top {
      top: -1px;
    }

    .stores-wave-bottom {
      bottom: -1px;
      transform: rotate(180deg);
    }

    .stores-wave svg {
      position: relative;
      display: block;
      width: calc(100% + 1.3px);
      height: 70px;
    }

    .stores-wave-top .shape-fill {
      fill: #EDF4FB;
    }

    .stores-wave-bottom .shape-fill {
      fill: #0170B9;
    }

    /* Efeitos de fundo animados */
    .stores-bg-effects {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
    }

    .stores-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(40px);
      animation: storeOrbFloat 20s infinite ease-in-out;
    }

    .stores-orb-1 {
      width: 350px;
      height: 350px;
      background: rgba(0,217,255,0.3);
      top: -50px;
      left: -100px;
      animation-delay: 0s;
    }

    .stores-orb-2 {
      width: 300px;
      height: 300px;
      background: rgba(1,112,185,0.4);
      top: 40%;
      right: -80px;
      animation-delay: -5s;
    }

    .stores-orb-3 {
      width: 250px;
      height: 250px;
      background: rgba(0,217,255,0.25);
      bottom: -50px;
      left: 40%;
      animation-delay: -10s;
    }

    .stores-orb-4 {
      width: 200px;
      height: 200px;
      background: rgba(1,112,185,0.35);
      top: 20%;
      left: 60%;
      animation-delay: -15s;
    }

    @keyframes storeOrbFloat {
      0%, 100% { transform: translate(0, 0) scale(1); }
      25% { transform: translate(40px, -30px) scale(1.1); }
      50% { transform: translate(-20px, 40px) scale(0.95); }
      75% { transform: translate(30px, 20px) scale(1.05); }
    }

    .stores-grid-pattern {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    .stores-section > .container {
      position: relative;
      z-index: 1;
    }

    .stores-header {
      text-align: center;
      margin-bottom: 50px;
    }

    .stores-header h2 {
      font-size: 2.2rem;
      font-weight: 800;
      color: white;
      margin-bottom: 12px;
    }

    .stores-header p {
      color: rgba(255,255,255,0.6);
      font-size: 1.1rem;
    }

    .stores-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .store-card {
      background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      overflow: hidden;
      transition: all 0.3s ease;
      position: relative;
    }

    .store-card:hover {
      transform: translateY(-6px);
      border-color: rgba(0,217,255,0.5);
      box-shadow: 0 15px 35px rgba(0,217,255,0.2);
    }

    .store-image {
      width: 100%;
      height: 140px;
      overflow: hidden;
      position: relative;
    }

    .store-image::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      background: linear-gradient(to top, rgba(10,15,32,0.9), transparent);
    }

    .store-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }

    .store-card:hover .store-image img {
      transform: scale(1.08);
    }

    .store-city {
      position: absolute;
      top: 12px;
      left: 12px;
      background: linear-gradient(135deg, #0170B9, #00D9FF);
      color: white;
      font-size: 0.7rem;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      z-index: 2;
      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }

    .store-info {
      padding: 16px;
    }

    .store-address {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 12px;
    }

    .store-address svg {
      width: 16px;
      height: 16px;
      color: #00D9FF;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .store-address p {
      color: rgba(255,255,255,0.85);
      font-size: 0.78rem;
      line-height: 1.4;
      margin: 0;
    }

    .store-hours {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    .store-hours svg {
      width: 16px;
      height: 16px;
      color: #10B981;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .store-hours p {
      color: rgba(255,255,255,0.6);
      font-size: 0.72rem;
      line-height: 1.5;
      margin: 0;
    }

    .store-actions {
      display: flex;
      gap: 8px;
      margin-top: 14px;
    }

    .store-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 8px;
      border-radius: 8px;
      font-size: 0.72rem;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .store-btn svg {
      width: 14px;
      height: 14px;
    }

    .store-btn-maps {
      background: rgba(16,185,129,0.15);
      color: #10B981;
      border: 1px solid rgba(16,185,129,0.3);
    }

    .store-btn-maps:hover {
      background: #10B981;
      color: white;
      transform: scale(1.02);
    }

    .store-btn-whatsapp {
      background: rgba(37,211,102,0.15);
      color: #25D366;
      border: 1px solid rgba(37,211,102,0.3);
    }

    .store-btn-whatsapp:hover {
      background: #25D366;
      color: white;
      transform: scale(1.02);
    }

    @media (max-width: 1100px) {
      .stores-grid { grid-template-columns: repeat(2, 1fr); }
      .store-image { height: 160px; }
    }

    @media (max-width: 768px) {
      .stores-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding: 10px 20px 20px;
        margin: 0 -20px;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .stores-grid::-webkit-scrollbar {
        display: none;
      }
      .store-card {
        flex: 0 0 280px;
        scroll-snap-align: center;
      }
      .store-image { height: 160px; }
      .store-info { padding: 16px; }
      .store-address p, .store-hours p { font-size: 0.8rem; }
      .store-btn { font-size: 0.78rem; padding: 10px; }

      /* Indicadores do carrossel */
      .stores-carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
      }
      .stores-carousel-dots span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255,255,255,0.3);
        transition: all 0.3s ease;
        cursor: pointer;
      }
      .stores-carousel-dots span.active {
        background: #00D9FF;
        width: 24px;
        border-radius: 4px;
      }
    }

    @media (min-width: 769px) {
      .stores-carousel-dots {
        display: none;
      }
    }

    /* ============================================
       LED DIVIDER
    ============================================ */
    .led-divider {
      background: linear-gradient(180deg, var(--c-primary-dark) 0%, #0a0f20 100%);
      padding: 20px 0;
      position: relative;
      overflow: hidden;
    }

    .led-line {
      height: 4px;
      background: linear-gradient(90deg, transparent, var(--c-primary-light), var(--c-primary), var(--c-primary-light), transparent);
      position: relative;
      border-radius: 2px;
      filter: var(--led);
    }

    /* ============================================
       SECTION COMUM
    ============================================ */
    .section {
      padding: 80px 0;
      position: relative;
    }

    .section-light {
      background: var(--grad-suave);
    }

    .section-dark {
      background: linear-gradient(180deg, #0a0f20 0%, #0d1526 100%);
    }

    .section-header {
      text-align: center;
      margin-bottom: 60px;
    }

    .section-header h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      margin-bottom: 16px;
    }

    .section-light .section-header h2 { color: var(--c-titulo); }
    .section-dark .section-header h2 { color: white; }

    .section-header p {
      font-size: 1.1rem;
      max-width: 600px;
      margin-inline: auto;
    }

    .section-light .section-header p { color: var(--c-muted); }
    .section-dark .section-header p { color: rgba(255,255,255,0.7); }

    .section-icon {
      width: 60px;
      height: 60px;
      background: var(--grad-principal);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      color: white;
    }

    /* ============================================
       PLANOS DE INTERNET - ESTILO INDEX (CÓPIA EXATA)
    ============================================ */
    .plans-section{
      background: var(--grad-suave);
      padding: 80px 0;
      position: relative;
      overflow: visible;
    }
    .plans-section > .container{
      width: 100% !important;
      max-width: none !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    @media (max-width: 980px){
      .plans-section{
        overflow: visible !important;
        padding-left: 0;
        padding-right: 0;
      }
      .plans-section > .container{
        width: 100%;
        max-width: 100%;
        padding: 0;
        overflow: visible;
      }
      .plans-category{
        overflow: visible !important;
        margin-left: 0;
        margin-right: 0;
      }
    }
    .plans-section::before{
      content:"";
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:4px;
      background:linear-gradient(90deg, transparent, var(--c-primary), var(--c-primary-light), var(--c-primary), transparent);
    }
    .plans-headline{
      text-align:center;
      margin-bottom: 80px;
      margin-left: auto;
      margin-right: auto;
      max-width: 1200px;
      padding: 0 20px;
      position: relative;
      z-index: 100;
      isolation: isolate;
    }
    .plans-headline h2{
      margin:0;
      font-size: clamp(2rem,4vw,3rem);
      letter-spacing:.5px;
      color: var(--c-titulo);
      font-weight: 800;
    }
    .plans-headline p{
      margin:.8rem 0 0;
      font-size: 1.1rem;
      color: var(--c-muted);
    }

    /* Plans Category Tabs - OCULTO */
    .plans-tabs{
      display:none !important;
    }
    .plans-tab{
      padding:14px 28px;
      border:2px solid var(--c-primary);
      border-radius:50px;
      background:transparent;
      color:var(--c-primary);
      font-weight:700;
      font-size:1rem;
      cursor:pointer;
      transition:all 0.3s ease;
    }
    .plans-tab:hover{
      background:rgba(1,112,185,0.1);
      transform:translateY(-2px);
    }
    .plans-tab.active{
      background: var(--grad-principal);
      color:#fff;
      border-color:transparent;
      box-shadow:0 4px 15px rgba(1,112,185,0.4);
    }
    .plans-category{
      display:none;
      position: relative;
      z-index: 10;
      isolation: isolate;
      margin-top: 60px;
      margin-bottom: 60px;
      width: 100%;
    }
    .plans-category.active{
      display:block;
      animation:fadeInPlans 0.4s ease;
    }
    @keyframes fadeInPlans{
      from{opacity:0;transform:translateY(10px)}
      to{opacity:1;transform:translateY(0)}
    }

    /* Plans Slider Dots */
    .plans-slider-dots{
      display: none;
      justify-content: center;
      gap: 8px;
      margin-top: 16px;
      position: relative;
      z-index: 50;
    }
    @media (max-width: 980px){
      .plans-slider-dots{
        display: flex;
      }
    }
    .plans-slider-dot{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 0;
    }
    .plans-slider-dot.active{
      background: var(--c-primary-light);
      transform: scale(1.2);
    }

    /* ===== PLANS GRID - LAYOUT LADO A LADO ===== */
    .plans-carousel-wrapper{
      position: relative;
      padding: 0;
      margin: 0;
      width: 100%;
      max-width: 100%;
      z-index: 1;
    }
    /* Grid de planos - sempre lado a lado */
    .plans-grid{
      display: flex;
      gap: clamp(24px, 3vw, 48px);
      justify-content: center;
      align-items: stretch;
      flex-wrap: wrap;
      padding: 20px 5vw;
      width: 100%;
      box-sizing: border-box;
    }
    .plans-grid .plan-card{
      flex: 0 0 320px;
      max-width: 360px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    @media (min-width: 1600px) {
      .plans-grid{
        gap: 48px;
        padding: 20px 8vw;
      }
      .plans-grid .plan-card{
        flex: 0 0 350px;
        max-width: 400px;
      }
    }
    @media (min-width: 1920px) {
      .plans-grid .plan-card{
        flex: 0 0 380px;
        max-width: 420px;
      }
    }
    .plans-grid .plan-card:hover{
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }
    /* Setas de navegação - só quando tem carousel (mais de 3 planos) */
    .plans-nav-btn{
      display: none;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
      border: 2px solid rgba(255,255,255,0.3);
      color: white;
      cursor: pointer;
      z-index: 30;
      box-shadow: 0 4px 20px rgba(1,112,185,0.4);
      transition: all 0.3s ease;
      align-items: center;
      justify-content: center;
    }
    .plans-nav-btn svg{
      width: 24px;
      height: 24px;
      stroke: currentColor;
      stroke-width: 2.5;
      fill: none;
    }
    .plans-nav-btn:hover{
      transform: translateY(-50%) scale(1.1);
      box-shadow: 0 6px 25px rgba(1,112,185,0.5);
    }
    .plans-nav-btn.prev{ left: 10px; }
    .plans-nav-btn.next{ right: 10px; }
    .plans-nav-btn.hidden{ opacity: 0.3; pointer-events: none; }
    /* Animação pulsante */
    @keyframes pulse-arrow{
      0%, 100%{ transform: translateY(-50%) scale(1); }
      50%{ transform: translateY(-50%) scale(1.12); }
    }
    .plans-nav-btn.pulse{
      animation: pulse-arrow 1.8s ease-in-out infinite;
    }
    .plans-nav-btn.pulse:hover{
      animation: none;
      transform: translateY(-50%) scale(1.1);
    }
    /* Mostrar setas apenas quando tem carousel (mais de 3 planos) */
    .plans-carousel-wrapper.has-carousel .plans-nav-btn{
      display: flex;
    }
    /* Quando tem carousel - scroll horizontal */
    .plans-carousel-wrapper.has-carousel{
      padding: 0;
      overflow: visible;
      display: flex;
      align-items: center;
      width: 100%;
    }
    .plans-carousel-wrapper.has-carousel .plans-grid{
      flex: 1;
      flex-wrap: nowrap;
      justify-content: center;
      overflow-x: auto;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 20px 60px;
    }
    .plans-carousel-wrapper.has-carousel .plans-grid::-webkit-scrollbar{
      display: none;
    }
    .plans-carousel-wrapper.has-carousel .plans-grid .plan-card{
      scroll-snap-align: center;
      flex-shrink: 0;
    }
    .plans-carousel-wrapper.has-carousel .plans-nav-btn{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      flex-shrink: 0;
    }
    .plans-carousel-wrapper.has-carousel .plans-nav-btn.prev{
      left: 15px;
    }
    .plans-carousel-wrapper.has-carousel .plans-nav-btn.next{
      right: 15px;
    }
    .plans-carousel-wrapper.has-carousel .plans-nav-btn:hover{
      transform: translateY(-50%) scale(1.1);
    }
    /* Desktop dots - OCULTOS */
    .plans-desktop-dots{
      display: none !important;
    }
    @media (max-width: 1200px){
      .plans-carousel-wrapper.has-carousel{
        padding: 0;
      }
    }
    @media (max-width: 980px){
      .plans-carousel-wrapper,
      .plans-carousel-wrapper.has-carousel{
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .plans-carousel-wrapper::-webkit-scrollbar{
        display: none;
      }
      .plans-carousel-wrapper.has-carousel .plans-nav-btn{
        display: none !important;
      }
      .plans-grid{
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 16px !important;
        padding: 16px !important;
        margin: 0 !important;
        width: fit-content !important;
      }
      .plans-grid,
      .plans-carousel-wrapper.has-carousel .plans-grid{
        scroll-snap-type: none !important;
      }
      .plans-grid .plan-card,
      .plans-carousel-wrapper.has-carousel .plans-grid .plan-card{
        flex: 0 0 280px !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        margin: 0 !important;
        scroll-snap-align: none !important;
      }
    }

    .plan-card{
      position:relative;
      background: linear-gradient(135deg, #2196F3 0%, #42A5F5 50%, #64B5F6 100%);
      border: 2px solid rgba(33,150,243,.3);
      border-radius: 16px;
      padding: 14px 14px 14px;
      box-shadow: 0 10px 30px rgba(33,150,243,.2);
      overflow:hidden;
      isolation:isolate;
      transition: transform .3s ease, box-shadow .3s ease;
      display: flex;
      flex-direction: column;
    }
    .plan-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 15px 40px rgba(33,150,243,.3);
    }
    .plan-card::after{
      content:"";
      position:absolute;
      inset:-40% -20% auto auto;
      width:60%;
      height:160%;
      background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent 70%);
      transform: rotate(20deg);
      pointer-events:none;
    }
    .plan-badge{
      position:absolute;
      top:14px;
      right:14px;
      background:rgba(255,255,255,.14);
      color:#fff;
      padding:6px 10px;
      border-radius: 999px;
      font-size:.7rem;
      letter-spacing:.2px;
      background:rgba(10,15,32,0.9);
      border:1px solid rgba(255,255,255,.25);
      font-weight: 600;
      max-width: 100px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      z-index: 1;
    }
    .plan-badge.popular{
      background:linear-gradient(90deg, #ffd84d, #ffb800);
      color:#262200;
      border:none;
      font-weight:800;
    }

    .plan-title{
      text-align:center;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-shrink: 0;
    }
    .plan-title .plan-name{
      display:block;
      font-weight:800;
      letter-spacing:1px;
      font-size: clamp(1.1rem, 2.5vw, 1.5rem);
      color: white;
      margin-bottom: 4px;
    }
    .plan-title .plan-speed{
      font-size: clamp(2rem, 6vw, 3.5rem);
      font-weight:900;
      line-height: .85;
      color: white;
    }
    .plan-title .mega{
      font-size: clamp(0.9rem, 2vw, 1.2rem);
      margin-left:.3ch;
      letter-spacing:.5px;
    }

    .plan-divider{
      height:2px;
      min-height: 2px;
      width:90%;
      margin:10px auto;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
      flex-shrink: 0;
    }

    .plan-brinde{
      text-align:center;
      margin: 0 0 6px;
      width: 100%;
      min-height: 35px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      flex-grow: 1;
    }
    .plan-brinde .plus-icon{
      display:inline-grid;
      place-items:center;
      width:24px;
      height:24px;
      margin: 0 6px 0 0;
      background: #ffc400;
      color:#102000;
      font-weight:900;
      border-radius: 6px;
      transform: translateY(2px) rotate(-6deg);
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .plan-brinde .plus-icon:hover{
      transform: translateY(0) rotate(0deg) scale(1.2);
      background: linear-gradient(135deg, #ffd700, #ffaa00);
      box-shadow: 0 0 20px rgba(255, 196, 0, 0.8), 0 0 40px rgba(255, 196, 0, 0.4);
      border-radius: 50%;
    }
    .plan-brinde small{
      opacity:.9;
      letter-spacing:.3px;
      color: rgba(255,255,255,.9);
      font-weight: 600;
      font-size: .7rem;
    }
    .brandline{
      margin-top:4px;
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      width: 100%;
      justify-content: center;
    }
    .chip{
      border:1px solid rgba(255,255,255,.35);
      background:rgba(255,255,255,.12);
      padding:2px 5px;
      border-radius:999px;
      font-size:.55rem;
      white-space:nowrap;
      color: white;
      font-weight: 500;
      text-align: center;
      box-sizing: border-box;
    }
    /* Chips curtos (streaming) - 4 por linha */
    .plan-brinde:not(.pme-brinde) .chip{
      flex: 0 0 calc(25% - 3px);
      max-width: calc(25% - 3px);
    }

    .plan-features{
      margin-top: auto;
      padding-top: 8px;
      margin-bottom: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      flex-shrink: 0;
      width: 100%;
    }
    .feat{
      background:rgba(255,255,255,.15);
      border:1px solid rgba(255,255,255,.3);
      border-radius: 8px;
      padding: 5px 6px;
      text-align: center;
      font-weight:600;
      letter-spacing:.2px;
      color: white;
      font-size: .65rem;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      line-height: 1.2;
    }

    /* === CARDS DE PLANOS - RESPONSIVO MOBILE === */
    @media (max-width: 480px) {
      .plan-card {
        padding: 12px 10px 12px;
        border-radius: 12px;
      }
      .plan-title {
        margin-bottom: 6px;
      }
      .plan-title .plan-name {
        font-size: 1rem;
        margin-bottom: 2px;
      }
      .plan-speed {
        font-size: 2.2rem;
      }
      .plan-speed .mega {
        font-size: 0.9rem;
      }
      .plan-divider {
        margin: 8px 0;
      }
      .plan-brinde {
        padding: 6px 6px;
        min-height: auto;
      }
      .plan-price {
        padding: 8px 0;
      }
      .plan-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3px;
        padding-top: 6px;
      }
      .feat {
        padding: 4px 3px;
        font-size: 0.55rem;
        border-radius: 5px;
        letter-spacing: 0;
        line-height: 1.1;
      }
      .plan-cta {
        margin-top: 8px;
        min-height: 40px;
      }
      .plan-btn {
        padding: 10px 18px;
        font-size: 0.8rem;
      }
    }

    .plan-cta{
      display:flex;
      justify-content:center;
      align-items: center;
      margin-top: 10px;
      padding-top: 0;
      min-height: 45px;
      flex-shrink: 0;
    }
    .plan-btn{
      background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
      color:#fff;
      font-weight:800;
      letter-spacing:.5px;
      border:none;
      border-radius: 50px;
      padding: 10px 22px;
      box-shadow: 0 4px 15px rgba(1,112,185,.4);
      cursor:pointer;
      transition: transform .2s ease, box-shadow .2s ease;
      text-decoration:none;
      display:inline-block;
      font-size: .85rem;
      font-family: inherit;
    }
    .plan-btn:hover{
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(1,112,185,.5);
    }
    .plan-btn:active{
      transform: translateY(0);
    }

    /* Variações por plano */
    .plan-card.plus {
      background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-dark) 100%) !important;
    }
    .plan-card.ultra {
      background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-dark) 100%) !important;
    }
    .plan-card.gold {
      background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-dark) 100%) !important;
    }

    .plans-footnote{
      margin-top:30px;
      text-align:center;
      opacity:.7;
      font-size:.9rem;
      color: var(--c-muted);
      position: relative;
      z-index: 100;
    }

    /* Preços dinâmicos nos cards */
    .plan-price-tag {
      margin: 16px 0;
      padding: 12px;
      background: rgba(0, 168, 255, 0.05);
      border-radius: 12px;
      min-height: 70px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .plan-price-value {
      font-size: 2.2rem;
      font-weight: 900;
      color: #fff;
      line-height: 1;
    }
    .plan-price-value small {
      font-size: 1rem;
      font-weight: 600;
      color: rgba(255,255,255,0.85);
    }
    .plan-price-periodo {
      font-size: 0.8rem;
      color: var(--c-muted);
    }
    body.cidade-selecionada .plan-price-tag {
      opacity: 1;
      transform: translateY(0);
    }
    /* Placeholder de preço antes da seleção */
    .plan-price-placeholder {
      margin: 16px 0;
      padding: 16px 12px;
      background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
      border: 2px dashed rgba(255, 255, 255, 0.4);
      border-radius: 12px;
      text-align: center;
      transition: all 0.3s ease;
      cursor: pointer;
      animation: pulsePlaceholder 2s ease-in-out infinite;
      min-height: 70px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
    }
    .plan-price-placeholder:hover {
      background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 100%);
      border-color: rgba(255, 255, 255, 0.6);
      transform: scale(1.02);
    }
    @keyframes pulsePlaceholder {
      0%, 100% { border-color: rgba(255, 255, 255, 0.4); }
      50% { border-color: rgba(255, 255, 255, 0.7); }
    }
    .plan-price-placeholder .placeholder-icon {
      font-size: 1.5rem;
      margin-bottom: 6px;
      display: block;
    }
    .plan-price-placeholder span {
      color: rgba(255, 255, 255, 0.9);
      font-size: 0.85rem;
      font-weight: 600;
      display: block;
    }
    .plan-price-placeholder .placeholder-cta {
      color: #fbbf24;
      font-size: 0.75rem;
      font-weight: 700;
      margin-top: 6px;
      display: block;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    body.cidade-selecionada .plan-price-placeholder {
      display: none;
    }

    /* Loading state */
    .plans-loading {
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px;
      color: var(--c-muted);
      gap: 12px;
    }

    .loading-spinner {
      width: 32px;
      height: 32px;
      border: 3px solid var(--c-borda);
      border-top-color: var(--c-primary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .plans-loading span {
      font-size: 0.85rem;
    }

    /* ============================================
       SEGURANÇA / CÂMERAS
    ============================================ */
    #seguranca {
      position: relative;
      padding-top: 100px;
    }

    #seguranca::before {
      content: '';
      position: absolute;
      top: -1px;
      left: 0;
      right: 0;
      height: 80px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23EDF4FB' d='M0,60 C360,120 720,0 1080,60 C1260,90 1380,90 1440,60 L1440,0 L0,0 Z'/%3E%3C/svg%3E") no-repeat top center;
      background-size: 100% 100%;
      z-index: 1;
    }

    #seguranca::after {
      content: '';
      position: absolute;
      top: 38px;
      left: 0;
      right: 0;
      height: 80px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%2300D9FF' stroke-width='3' d='M0,60 C360,120 720,0 1080,60 C1260,90 1380,90 1440,60'/%3E%3C/svg%3E") no-repeat top center;
      background-size: 100% 100%;
      z-index: 2;
      filter: drop-shadow(0 0 8px #0170B9) drop-shadow(0 0 15px #00D9FF) drop-shadow(0 0 25px rgba(0,217,255,0.5));
    }

    .security-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    .security-image {
      position: relative;
      max-width: 350px;
    }

    .security-image img {
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2);
      max-width: 100%;
      height: auto;
    }

    .security-image::after {
      content: '';
      position: absolute;
      top: -20px;
      right: -20px;
      width: 100%;
      height: 100%;
      border: 3px solid var(--c-primary);
      border-radius: 20px;
      z-index: -1;
    }

    .security-text h3 {
      font-size: 2rem;
      font-weight: 800;
      color: white;
      margin-bottom: 20px;
    }

    .security-text p {
      color: rgba(255,255,255,0.8);
      font-size: 1.1rem;
      margin-bottom: 30px;
      line-height: 1.8;
    }

    .security-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 30px;
    }

    .security-feature {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 16px;
      background: rgba(255,255,255,0.1);
      border-radius: 12px;
    }

    .security-feature svg {
      width: 24px;
      height: 24px;
      color: var(--c-primary-light);
      flex-shrink: 0;
    }

    .security-feature span {
      color: white;
      font-weight: 600;
      font-size: 0.95rem;
    }

    .produto-obs {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.75);
      background: rgba(255,255,255,0.05);
      border-left: 3px solid var(--accent);
      padding: 12px 16px;
      margin-top: 16px;
      border-radius: 0 8px 8px 0;
      line-height: 1.5;
    }

    .produto-obs strong {
      color: var(--accent);
    }

    /* Pacotes de Câmeras - Design Compacto */
    .security-packages {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 40px;
      align-items: stretch;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }

    .security-package {
      position: relative;
      background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 16px;
      padding: 20px 16px;
      text-align: center;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }

    .security-package::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--c-primary), var(--c-primary-light));
      opacity: 0;
      transition: opacity 0.3s;
    }

    .security-package:hover {
      transform: translateY(-5px);
      background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
      border-color: rgba(var(--c-primary-rgb, 1,112,185),0.4);
      box-shadow: 0 12px 25px rgba(0,0,0,0.3);
    }

    .security-package:hover::before {
      opacity: 1;
    }

    /* Pacote Destaque (Mais Popular) */
    .security-package.featured {
      background: linear-gradient(145deg, rgba(1,112,185,0.2), rgba(1,112,185,0.08));
      border: 2px solid var(--c-primary);
      transform: scale(1.03);
      box-shadow: 0 15px 35px rgba(1,112,185,0.25);
    }

    .security-package.featured::before {
      opacity: 1;
      height: 3px;
    }

    .security-package.featured:hover {
      transform: scale(1.03) translateY(-5px);
    }

    .security-badge {
      position: absolute;
      top: -1px;
      right: -1px;
      background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
      color: white;
      font-size: 0.55rem;
      font-weight: 700;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 0 14px 0 8px;
      letter-spacing: 0.3px;
    }

    .security-package-icon {
      width: 50px;
      height: 50px;
      margin: 0 auto 12px;
      background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px rgba(1,112,185,0.3);
    }

    .security-package-icon svg {
      width: 26px;
      height: 26px;
      color: white;
    }

    .security-package h4 {
      color: var(--c-primary-light);
      font-size: 0.95rem;
      font-weight: 700;
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .security-package .pkg-desc {
      color: rgba(255,255,255,0.6);
      font-size: 0.75rem;
      margin-bottom: 12px;
    }

    .security-package .cameras {
      font-size: 2.5rem;
      font-weight: 900;
      background: linear-gradient(135deg, #fff, rgba(255,255,255,0.8));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
    }

    .security-package .cameras span {
      display: block;
      font-size: 0.8rem;
      font-weight: 600;
      color: rgba(255,255,255,0.6);
      -webkit-text-fill-color: rgba(255,255,255,0.6);
      margin-top: 2px;
    }

    .security-package .pkg-features {
      margin: 12px 0;
      padding: 10px 0;
      border-top: 1px solid rgba(255,255,255,0.1);
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .security-package .pkg-feature {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: rgba(255,255,255,0.8);
      font-size: 0.7rem;
      padding: 4px 0;
    }

    .security-package .pkg-feature svg {
      width: 12px;
      height: 12px;
      color: var(--c-sucesso);
      flex-shrink: 0;
    }

    .security-package .price {
      margin: 12px 0 10px;
    }

    .security-package .price-label {
      font-size: 0.65rem;
      color: rgba(255,255,255,0.5);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .security-package .price-value {
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--c-sucesso);
      line-height: 1.2;
    }

    .security-package .price-value small {
      font-size: 0.75rem;
      font-weight: 500;
      color: rgba(255,255,255,0.5);
    }

    .security-package .pkg-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      padding: 10px 16px;
      background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
      color: white;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-radius: 12px;
      text-decoration: none;
      transition: all 0.3s;
      box-shadow: 0 4px 15px rgba(1,112,185,0.3);
    }

    .security-package .pkg-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(1,112,185,0.4);
    }

    .security-package .pkg-btn svg {
      width: 14px;
      height: 14px;
    }

    .security-package.featured .pkg-btn {
      background: linear-gradient(135deg, #25d366, #128c7e);
      box-shadow: 0 4px 15px rgba(37,211,102,0.3);
    }

    .security-package.featured .pkg-btn:hover {
      box-shadow: 0 8px 25px rgba(37,211,102,0.4);
    }

    /* Selo de Instalação Grátis */
    .security-promo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 40px;
      padding: 20px;
      background: linear-gradient(135deg, rgba(37,211,102,0.15), rgba(37,211,102,0.05));
      border: 1px solid rgba(37,211,102,0.3);
      border-radius: 16px;
    }

    .security-promo svg {
      width: 28px;
      height: 28px;
      color: var(--c-sucesso);
    }

    .security-promo span {
      color: white;
      font-size: 1rem;
      font-weight: 600;
    }

    .security-promo strong {
      color: var(--c-sucesso);
    }

    @media (max-width: 1100px) {
      .security-packages {
        gap: 16px;
      }
      .security-package {
        padding: 24px 16px;
      }
      .security-package.featured {
        transform: scale(1.02);
      }
    }

    @media (max-width: 980px) {
      .security-content {
        grid-template-columns: 1fr;
      }
      .security-image { order: -1; }
      .security-features { grid-template-columns: 1fr; }
      .security-packages {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
      }
      .security-package.featured {
        transform: scale(1);
        order: -1;
      }
      .security-package.featured:hover {
        transform: translateY(-8px);
      }
    }

    @media (max-width: 600px) {
      /* Centralizar toda a seção de câmeras no mobile */
      #seguranca .section-header {
        text-align: center;
      }
      #seguranca .section-header h2,
      #seguranca .section-header p {
        text-align: center;
      }
      .security-content {
        gap: 30px;
      }
      .security-image {
        display: flex;
        justify-content: center;
      }
      .security-image img {
        max-width: 280px;
        width: 100%;
      }
      .security-image::after {
        display: none;
      }
      .security-text {
        text-align: center;
      }
      .security-text h3 {
        font-size: 1.4rem;
        text-align: center;
      }
      .security-text p {
        font-size: 0.95rem;
        text-align: center;
      }
      .security-features {
        gap: 10px;
      }
      .security-feature {
        justify-content: center;
        text-align: center;
        padding: 12px;
      }
      .security-text .btn-primary {
        display: block;
        text-align: center;
        margin: 0 auto;
      }
      .security-packages {
        max-width: 100%;
        padding: 0 10px;
      }
      .security-package {
        padding: 16px 12px;
      }
      .security-package h4 {
        font-size: 0.85rem;
      }
      .security-package .cameras {
        font-size: 2rem;
      }
      .security-package .cameras span {
        font-size: 0.7rem;
      }
      .security-package .pkg-feature {
        font-size: 0.65rem;
      }
      .security-package .price-value {
        font-size: 1.1rem;
      }
      .security-package .pkg-btn {
        font-size: 0.75rem;
        padding: 10px 14px;
      }
    }

    /* ============================================
       STREAMING / PARCEIROS
    ============================================ */
    .streaming-intro {
      text-align: center;
      margin-bottom: 50px;
    }

    .streaming-intro p {
      font-size: 1.1rem;
      color: var(--c-muted);
      max-width: 700px;
      margin-inline: auto;
    }

    /* Subcategorias de Parceiros */
    .partners-category {
      margin-bottom: 50px;
    }

    .partners-category-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--c-borda);
    }

    .partners-category-header svg {
      width: 28px;
      height: 28px;
      color: var(--c-primary);
    }

    .partners-category-header h3 {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--c-titulo);
      margin: 0;
    }

    .partners-category-header span {
      font-size: 0.85rem;
      color: var(--c-muted);
      background: var(--c-fundo);
      padding: 4px 12px;
      border-radius: 20px;
    }

    .streaming-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 20px;
    }

    .streaming-card {
      background: #1a3a5c;
      border-radius: 16px;
      padding: 24px 16px;
      text-align: center;
      box-shadow: 0 8px 30px rgba(0,0,0,0.15);
      border: 2px solid rgba(255,255,255,0.1);
      transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    }

    .streaming-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 40px rgba(1,112,185,0.35);
      border-color: #00D9FF;
      background: #1e4a6e;
    }

    .streaming-card img {
      width: 70px;
      height: 70px;
      object-fit: contain;
      margin: 0 auto 12px;
      border-radius: 12px;
      transition: transform 0.3s ease;
    }

    .streaming-card:hover img {
      transform: scale(1.05);
    }

    .streaming-card h4 {
      font-size: 0.9rem;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 6px;
    }

    .streaming-card p {
      font-size: 0.8rem;
      color: rgba(255,255,255,0.75);
      line-height: 1.4;
    }

    /* Balãozinho de pensamento */
    .streaming-card {
      position: relative;
      cursor: pointer;
    }

    .streaming-bubble {
      position: absolute;
      bottom: calc(100% + 15px);
      left: 50%;
      transform: translateX(-50%) scale(0.8);
      background: linear-gradient(135deg, #0170B9, #00D9FF);
      color: white;
      padding: 14px 18px;
      border-radius: 16px;
      font-size: 0.85rem;
      line-height: 1.5;
      min-width: 220px;
      max-width: 280px;
      text-align: left;
      box-shadow: 0 10px 40px rgba(1,112,185,0.4);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 100;
    }

    .streaming-bubble::before {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 10px 10px 0 10px;
      border-style: solid;
      border-color: #00D9FF transparent transparent transparent;
    }

    /* Círculos do balão de pensamento */
    .streaming-bubble::after {
      content: '';
      position: absolute;
      bottom: -20px;
      left: 50%;
      transform: translateX(-50%);
      width: 8px;
      height: 8px;
      background: #00D9FF;
      border-radius: 50%;
      box-shadow:
        -12px 5px 0 -1px #00D9FF,
        12px 5px 0 -1px #00D9FF;
    }

    .streaming-card.bubble-active .streaming-bubble {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) scale(1);
    }

    .streaming-bubble strong {
      display: block;
      font-size: 0.95rem;
      margin-bottom: 6px;
    }

    /* Fechar bubble */
    .bubble-close {
      position: absolute;
      top: 6px;
      right: 8px;
      width: 20px;
      height: 20px;
      background: rgba(255,255,255,0.2);
      border: none;
      border-radius: 50%;
      color: white;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .bubble-close:hover {
      background: rgba(255,255,255,0.3);
    }

    /* Card compacto para benefícios */
    .streaming-grid.compact {
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 16px;
    }

    .streaming-grid.compact .streaming-card {
      padding: 20px 12px;
    }

    .streaming-grid.compact .streaming-card img {
      width: 60px;
      height: 60px;
    }

    .streaming-grid.compact .streaming-card h4 {
      font-size: 0.85rem;
    }

    .streaming-grid.compact .streaming-card p {
      font-size: 0.75rem;
    }

    .streaming-cta {
      text-align: center;
      margin-top: 50px;
    }

    .streaming-cta p {
      font-size: 1.1rem;
      color: var(--c-corpo);
      margin-bottom: 20px;
    }

    .streaming-cta p strong {
      color: var(--c-primary);
    }

    @media (max-width: 768px) {
      .streaming-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      .streaming-grid.compact {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 480px) {
      .streaming-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .streaming-grid.compact {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ============================================
       CTA FINAL
    ============================================ */
    .cta-section {
      background: linear-gradient(180deg, #0170B9 0%, #015a94 100%);
      padding: 80px 0;
      padding-top: 100px;
      margin-top: -30px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .cta-section::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 50%);
      animation: pulse-bg 10s ease-in-out infinite;
    }

    @keyframes pulse-bg {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.2); }
    }

    .cta-content {
      position: relative;
      z-index: 2;
    }

    .cta-section h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      color: white;
      margin-bottom: 16px;
    }

    .cta-section p {
      font-size: 1.2rem;
      color: rgba(255,255,255,0.9);
      margin-bottom: 30px;
      max-width: 600px;
      margin-inline: auto;
    }

    .cta-buttons {
      display: flex;
      gap: 20px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .cta-btn-whatsapp {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 18px 36px;
      background: var(--c-whatsapp);
      color: white;
      font-weight: 800;
      font-size: 1.1rem;
      border-radius: 50px;
      box-shadow: 0 10px 40px rgba(37,211,102,0.3);
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .cta-btn-whatsapp:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 50px rgba(37,211,102,0.4);
    }

    .cta-btn-phone {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 18px 36px;
      background: white;
      color: var(--c-primary);
      font-weight: 800;
      font-size: 1.1rem;
      border-radius: 50px;
      transition: transform 0.2s;
    }

    .cta-btn-phone:hover {
      transform: translateY(-3px);
    }

    /* ============================================
       FOOTER
    ============================================ */
    .footer {
      background: var(--grad-footer);
      padding: 60px 0 30px;
      color: white;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 40px;
    }

    .footer-brand img {
      width: 140px;
      margin-bottom: 20px;
      filter: brightness(0) invert(1);
    }

    .footer-brand p {
      color: rgba(255,255,255,0.7);
      font-size: 0.95rem;
      line-height: 1.7;
    }

    .footer-col h4 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 20px;
      color: white;
    }

    .footer-col ul {
      list-style: none;
    }

    .footer-col ul li {
      margin-bottom: 12px;
    }

    .footer-col ul li a {
      color: rgba(255,255,255,0.7);
      font-size: 0.9rem;
      transition: color 0.2s;
    }

    .footer-col ul li a:hover {
      color: white;
    }

    .footer-social {
      display: flex;
      gap: 12px;
      margin-top: 20px;
    }

    .footer-social a {
      width: 40px;
      height: 40px;
      background: rgba(255,255,255,0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }

    .footer-social a:hover {
      background: rgba(255,255,255,0.2);
    }

    .footer-social svg {
      width: 20px;
      height: 20px;
    }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 30px;
      text-align: center;
    }

    .footer-bottom p {
      color: rgba(255,255,255,0.6);
      font-size: 0.85rem;
    }

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

    @media (max-width: 600px) {
      .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 24px;
      }
      .footer-grid > div {
        padding: 0 16px;
      }
      .footer-grid a {
        word-break: break-all;
        overflow-wrap: anywhere;
        font-size: 0.85rem;
      }
      .footer-social { justify-content: center; }
    }

    /* ============================================
       ANIMAÇÕES
    ============================================ */
    [data-animate] {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    [data-animate].animate {
      opacity: 1;
      transform: translateY(0);
    }

    /* ============================================
       CIDADE AVISO / PREÇOS DINÂMICOS
    ============================================ */
    .cidade-aviso {
      background: linear-gradient(135deg, #FFF3CD 0%, #FFF8E1 100%);
      border: 2px solid #FFE082;
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 40px;
      box-shadow: 0 4px 20px rgba(255,193,7,0.15);
    }

    .cidade-aviso-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .cidade-aviso-content svg {
      color: #F59E0B;
      flex-shrink: 0;
    }

    .cidade-aviso-content span {
      color: #92400E;
      font-weight: 600;
      font-size: 1rem;
    }

    .cidade-aviso-btn {
      background: var(--c-primary);
      color: white;
      padding: 10px 20px;
      border-radius: 50px;
      font-weight: 700;
      font-size: 0.85rem;
      transition: background 0.2s, transform 0.2s;
    }

    .cidade-aviso-btn:hover {
      background: var(--c-primary-dark);
      transform: translateY(-2px);
    }

    .plan-price-placeholder {
      background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
      border: 1px dashed var(--c-primary-light);
      border-radius: 8px;
      padding: 8px 6px;
      text-align: center;
    }

    .plan-price-placeholder span {
      color: var(--c-primary);
      font-weight: 600;
      font-size: 0.6rem;
    }

    .plan-price-tag {
      text-align: center;
      padding: 4px 0;
    }

    .plan-price-tag .from {
      font-size: 0.6rem;
      color: var(--c-muted);
      text-decoration: line-through;
    }

    .plan-price-tag .amount {
      font-size: 1.3rem;
      font-weight: 800;
      color: var(--c-primary);
      line-height: 1.1;
    }

    .plan-price-tag .amount small {
      font-size: 0.65rem;
      font-weight: 600;
    }

    .plan-price-tag .period {
      font-size: 0.6rem;
      color: var(--c-muted);
    }

    /* Badge de cidade no header */
    .cidade-badge-header {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(1,112,185,0.1);
      padding: 6px 12px;
      border-radius: 50px;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--c-primary);
      margin-right: 10px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .cidade-badge-header:hover {
      background: rgba(1,112,185,0.2);
    }

    .cidade-badge-header svg {
      width: 14px;
      height: 14px;
    }

    @media (max-width: 768px) {
      .cidade-aviso-content {
        flex-direction: column;
        text-align: center;
      }

      .cidade-badge-header {
        display: none;
      }
    }