:root{
      --primary:#0B4AA2; --accent:#E11D2E; --ink:#0F172A; --muted:#475569;
      --card:#ffffff; --ring:rgba(11,74,162,.35); --shadow:0 10px 30px rgba(2,8,23,.15);
      --radius:16px; --transition:200ms ease; --colW:min(520px, 92vw);
      --dur: 18s; /* duração padrão (JS sobrescreve) */
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
      color:var(--ink); background:#0b1020; overflow:hidden;
    }

    /* --- FUNDO GLOBAL (carrossel) --- */
    .bg{ position:fixed; inset:0; z-index:0; overflow:hidden; }

    /* Leve efeito "fumê" para modernizar o fundo (com fallback) */
    .bg::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(1200px 700px at 50% 35%, rgba(0,0,0,.18), rgba(0,0,0,.48)),
        linear-gradient(180deg, rgba(2,6,23,.22), rgba(2,6,23,.42));
      z-index:1;
    }
    @supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
      .bg::after{
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
      }
    }

    .bg .slide{
      position:absolute; inset:0; width:100%; height:100%;
      object-fit:cover; object-position:center;
      z-index:0;
      opacity:0;
      /* duração controlada via --dur; delays definidos em JS */
      animation: fade var(--dur, 18s) linear infinite;
      -webkit-animation: fade var(--dur, 18s) linear infinite;
      transform:scale(1.03);
      will-change:opacity, transform;
    }
    
    /* --- Slideshow via JS (fallback / reduced-motion) --- */
    .bg.js-slideshow .slide{
      animation:none !important;
      opacity:0;
      transition: opacity .9s ease;
    }
    .bg.js-slideshow .slide.is-active{
      opacity:1;
    }
@-webkit-keyframes fade{
      0%{opacity:0}
      5%{opacity:1}
      28%{opacity:1}
      33%{opacity:0}
      100%{opacity:0}
    }
    @keyframes fade{
      0%{opacity:0}
      5%{opacity:1}
      28%{opacity:1}
      33%{opacity:0}
      100%{opacity:0}
    }
    .bg::after{
      content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
      background:linear-gradient(90deg, rgba(2,8,23,.18) 0%, rgba(2,8,23,.42) 50%,
        rgba(2,8,23,.70) 72%, rgba(2,8,23,.88) 100%);
    }

    /* --- LAYOUT --- */
    .wrap{
      position:relative; z-index:2; height:100svh; min-height:100svh; display:grid;
      grid-template-columns: 1fr var(--colW); gap: clamp(8px, 1.6vw, 20px);
      padding: env(safe-area-inset-top) clamp(10px, 2vw, 20px)
               env(safe-area-inset-bottom) clamp(10px, 2vw, 20px);
    }

    .hero-brand{
      align-self:end; padding:clamp(16px, 4vw, 40px); color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.35);
    }
    .hero-brand h1{ margin:0 0 6px 0; font-size:clamp(28px, 4.2vw, 42px); font-weight:700 }
    .hero-brand p{ margin:0; opacity:.9; font-size:clamp(12px, 1.6vw, 16px) }

    .panel{ display:grid; place-items:center; padding: clamp(10px, 3vh, 28px); }
    .card{
      width:100%; max-width:520px; background:var(--card); border-radius:var(--radius);
      box-shadow:var(--shadow); padding: clamp(18px, 2.6vw, 26px);
      max-height: calc(100svh - 2 * clamp(10px, 3vh, 28px)); overflow:auto;
    }

    .brand{ display:flex; align-items:center; gap:12px; margin-bottom:6px }
    .brand-logo{
      width:40px; height:40px; border-radius:10px;
      background: conic-gradient(from 210deg, var(--accent), var(--primary), var(--accent));
      display:grid; place-items:center; color:#fff; font-weight:800; letter-spacing:.5px; font-size:12px;
    }
    .brand h2{ margin:0; font-size:16px; font-weight:700 }
    .brand small{ display:block; color:var(--muted); font-size:12px }

    .title{ margin:12px 0 6px; font-size:clamp(18px, 2.2vw, 22px); font-weight:700 }
    .subtitle{ margin:0 0 14px; color:var(--muted); font-size:clamp(12px, 1.6vw, 14px) }

    form{ display:grid; gap:12px }
    .field{ display:grid; gap:8px }
    label{ font-size:13px; color:#111827; font-weight:600 }
    .input{
      display:flex; align-items:center; gap:10px; border:1px solid #e5e7eb; border-radius:12px;
      padding:12px 14px; background:#fff; transition:border-color var(--transition), box-shadow var(--transition);
    }
    .input:focus-within{ border-color:var(--primary); box-shadow:0 0 0 4px var(--ring) }
    .input input{ width:100%; border:0; outline:0; font:inherit; color:var(--ink); min-width:0 }
    .muted{ color:var(--muted); font-size:13px }
    .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; flex-wrap:wrap }
    .checkbox{ display:flex; align-items:center; gap:8px; font-size:13px }
    .checkbox input{ width:16px; height:16px; accent-color:var(--primary) }
    .link{ color:var(--primary); text-decoration:none; font-weight:600 }
    .btn{
      width:100%; border:0; border-radius:12px; padding:12px 16px;
      background:linear-gradient(135deg, var(--primary), #08357A); color:#fff; font-weight:700; letter-spacing:.3px; cursor:pointer;
      transition:transform var(--transition), filter var(--transition);
    }
    .btn:hover{ filter:brightness(1.05) }
    .btn:active{ transform:translateY(1px) }
    .sep{ display:flex; align-items:center; gap:10px; margin:10px 0 }
    .sep hr{ flex:1; border:none; height:1px; background:#e5e7eb }
    .footer{ margin-top:10px; font-size:12px; color:var(--muted); text-align:center }

    @media (min-width:1600px){
      :root{ --colW:min(560px, 38vw) }
      .bg::after{ background:linear-gradient(90deg, rgba(2,8,23,.12) 0%, rgba(2,8,23,.36) 46%, rgba(2,8,23,.68) 70%, rgba(2,8,23,.90) 100%) }
    }
    @media (max-width:980px){
      .wrap{ grid-template-columns:1fr }
      .hero-brand{ display:none }
      body{ overflow:auto }
      .bg::after{ background:linear-gradient(180deg, rgba(2,8,23,.30) 0%, rgba(2,8,23,.60) 60%, rgba(2,8,23,.85) 100%) }
    }
    @media (max-height:700px){ body{ overflow:auto } }
    .tooltip-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
  }

  .tooltip-balao {
    pointer-events: none;            /* não bloqueia o clique */
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 140%;                    /* acima do link */
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    max-width: 80vw;
    background: #25d366;
    color: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.45;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    transition: opacity 0.18s ease-in-out, visibility 0.18s ease-in-out;
    z-index: 1000;
    text-align: left;
    white-space: normal;
  }

  .tooltip-balao::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: #25d366 transparent transparent transparent;
  }

  /* Exibição no hover e foco (acessível) */
  .tooltip-link:hover .tooltip-balao,
  .tooltip-link:focus .tooltip-balao,
  .tooltip-link.show-tooltip .tooltip-balao {
    visibility: visible;
    opacity: 1;
  }