:root{
  --bg:#0b1020;
  --surface:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --primary:#1d4ed8;
  --primary-ink:#ffffff;
  --ring: 2px solid rgba(29,78,216,.35);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
  color: var(--ink);
  background: linear-gradient(180deg, #f6f8ff, #f9fafb);
}

.skip-link{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:static; width:auto; height:auto; padding:.5rem .75rem;
  background:#000; color:#fff; border-radius:.5rem;
}

.container{max-width:1100px; margin:0 auto; padding:1rem}

.site-header{
  background:#0f172a;
  color:#fff;
}
.site-header .container{
  display:flex; align-items:center; gap:1rem; justify-content:space-between;
}
.brand{height:40px;width:220px;}
.main-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1rem; flex-wrap:wrap}
.main-nav a{color:#e5e7eb; text-decoration:none; padding:.4rem .6rem; border-radius:.5rem}
.main-nav a:hover, .main-nav a:focus{background:#111827; outline:none}

.hero{
  display:grid; grid-template-columns: 1.2fr .8fr; align-items:center; gap:2rem;
  padding:2rem 0;
}
.hero-text .lead{color:var(--muted); font-size:1.1rem}
.hero-actions{display:flex; gap:1rem; margin-top:1rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.1rem; border-radius:12px; border:1px solid #e5e7eb;
  background:#fff; color:#111827; text-decoration:none; cursor:pointer; box-shadow: var(--shadow);
}
.btn.primary{background:var(--primary); color:var(--primary-ink); border-color: transparent}
.btn.outline{background:#fff}
.btn:focus{outline: none; box-shadow: 0 0 0 3px rgba(29,78,216,.35)}

.card{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding:1.25rem; margin:1rem 0;
}

.grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem}
.field{display:flex; flex-direction:column; gap:.4rem}
.field input[type="number"]{padding:.7rem .8rem; border-radius:.6rem; border:1px solid #e5e7eb}
fieldset.field{border:1px solid #e5e7eb; padding: .8rem; border-radius:.8rem}
legend{padding:0 .4rem; color:#374151; font-weight:600}
.actions{display:flex; gap:.75rem; align-items:center}

.result{margin-top:1rem}
.result-list{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.6rem; list-style:none; padding:0; margin:0}
.result-list li{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border:1px solid #eef2ff; border-radius:.6rem; padding:.6rem .7rem; background:#f8fafc;
}
.copy-btn{
  border:none; border-radius:.5rem; padding:.45rem .6rem; cursor:pointer;
  background:#e5edff;
}
.copy-btn:focus{outline:none; box-shadow: 0 0 0 3px rgba(29,78,216,.35)}

.ads-section{margin:1rem 0}

.site-footer{background:#f3f4f6; margin-top:2rem; padding:1.25rem 0}
.site-footer nav a{color:#374151; text-decoration:none; margin-right:1rem}
.site-footer nav a:hover{text-decoration:underline}

.hero-figure img{max-width:100%; height:auto}

@media (max-width: 768px){
  .hero{grid-template-columns: 1fr; text-align:center}
  .hero-actions{justify-content:center}
  .result-list{grid-template-columns: 1fr}
  .grid{grid-template-columns: 1fr}
}

.visually-hidden{
  position:absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding:0 !important;
  border:0 !important;
  height:1px !important; width:1px !important;
  overflow:hidden;
  white-space:nowrap;
}

.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #333;
    color: #fff;
    padding: 12px 18px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9999;
    font-family: sans-serif;
  }

.toast.show {
    opacity: 1;
    transform: translateY(0);
  }


/* ####### BOTÕES DE COMPARTILHAMENTO ####### */
/* Container principal */
.floating-share {
    position: fixed;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

/* Ícones */
.floating-share a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 20px;
    transition: 0.25s ease-in-out;
}

.floating-share a:hover {
    transform: scale(1.12);
    opacity: 0.9;
}

/* Cores padrão */
.share-whatsapp { background: #25D366; }
.share-facebook { background: #1877F2; }
.share-linkedin { background: #0A66C2; }
.share-twitter  { background: #000; }
.share-telegram { background: #0088cc; }

/* ------ Mobile: vira barra inferior ------ */
@media (max-width: 768px) {
    .floating-share {
        top: auto;
        left: 0;
        bottom: 0;
        width: 100%;
        transform: none;
        flex-direction: row;
        justify-content: space-around;
        padding: 10px 0;
        background: #ffffffdd;
        backdrop-filter: blur(6px);
        border-top: 1px solid #ddd;
    }

    .floating-share a {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}