:root{
  --navy:#001F3F;
  --navy-2:#00284f;
  --navy-3:#012a52;
  --cyan:#00F0FF;
  --orange:#FF6A3D;
  --orange-soft: rgba(255,106,61,0.12);
  --white:#FFFFFF;
  --ink:#dbeeff;
  --muted:#9fb8d1;
  --border: rgba(0,240,255,0.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background-color:var(--navy);
  background-image:
    radial-gradient(ellipse 80% 50% at 15% 0%, rgba(0,240,255,0.10), transparent 60%),
    radial-gradient(ellipse 60% 45% at 100% 20%, rgba(255,106,61,0.06), transparent 55%),
    radial-gradient(ellipse 70% 55% at 85% 75%, rgba(0,60,110,0.55), transparent 60%),
    radial-gradient(ellipse 90% 60% at 0% 100%, rgba(0,240,255,0.05), transparent 55%),
    linear-gradient(180deg, #001529 0%, #001F3F 35%, #002247 65%, #001a35 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--white);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:'Space Grotesk', sans-serif; letter-spacing:-0.02em; }
.mono{font-family:'JetBrains Mono', monospace;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}
section{position:relative;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

/* ===== FUNDOS ORGÂNICOS SUTIS POR SEÇÃO ===== */
/* Cada seção recebe uma composição diferente de gradientes radiais,
   sutis, para dar variação orgânica sem perder a identidade visual. */
#desenvolvimento{
  background:
    radial-gradient(ellipse 55% 50% at 8% 15%, rgba(0,240,255,0.07), transparent 60%),
    radial-gradient(ellipse 50% 45% at 95% 85%, rgba(255,106,61,0.05), transparent 55%);
}
#suporte{
  background:
    radial-gradient(ellipse 60% 50% at 90% 10%, rgba(255,106,61,0.06), transparent 55%),
    radial-gradient(ellipse 55% 45% at 10% 90%, rgba(0,240,255,0.06), transparent 60%);
}
#hospedagem{
  background:
    radial-gradient(ellipse 65% 55% at 50% 0%, rgba(0,240,255,0.07), transparent 60%),
    radial-gradient(ellipse 45% 40% at 50% 100%, rgba(255,106,61,0.05), transparent 55%);
}
#social-media{
  background:
    radial-gradient(ellipse 55% 50% at 85% 20%, rgba(0,240,255,0.06), transparent 55%),
    radial-gradient(ellipse 50% 45% at 5% 80%, rgba(255,106,61,0.06), transparent 55%);
}
#consultoria{
  background:
    radial-gradient(ellipse 55% 50% at 12% 20%, rgba(255,106,61,0.06), transparent 55%),
    radial-gradient(ellipse 55% 50% at 90% 85%, rgba(0,240,255,0.06), transparent 60%);
}
#trafego-pago{
  background:
    radial-gradient(ellipse 60% 50% at 90% 15%, rgba(255,106,61,0.08), transparent 55%),
    radial-gradient(ellipse 50% 45% at 10% 90%, rgba(0,240,255,0.05), transparent 55%);
}

/* Grid background texture (usado em detalhes pontuais) */
.grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
  pointer-events:none;
  opacity:0.5;
}

/* ===== HEADER ===== */
header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(0,31,63,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo{ font-size:1.3rem; font-weight:700; display:flex; align-items:center; gap:10px; }
.logo .dot{ width:10px; height:10px; background:var(--cyan); border-radius:2px; box-shadow:0 0 12px var(--cyan); }
.logo-img{ height:34px; width:auto; display:block; }
.footer-col .logo-img{ height:30px; }
nav.menu{ display:flex; align-items:center; gap:6px; }
nav.menu > ul{display:flex; align-items:center; gap:4px;}
.nav-item{position:relative;}
.nav-link{
  display:flex; align-items:center; gap:6px;
  padding:10px 16px; font-size:0.95rem; font-weight:500; color:var(--ink);
  border-radius:8px; transition:all .2s ease; cursor:pointer;
}
.nav-link:hover, .nav-item.open .nav-link{ color:var(--cyan); background:rgba(0,240,255,0.06); }
.caret{
  width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .2s ease; margin-top:-3px;
}
.nav-item.open .caret{ transform:rotate(-135deg); margin-top:3px; }
.submenu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:240px;
  background:var(--navy-2); border:1px solid var(--border); border-radius:12px; padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .2s ease;
  box-shadow:0 20px 40px rgba(0,0,0,0.4);
}
.nav-item.open .submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.submenu a{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:8px; font-size:0.9rem; color:var(--ink); transition:all .2s ease; }
.submenu a:hover{ background:rgba(0,240,255,0.08); color:var(--cyan); }
.submenu a .num{ font-family:'JetBrains Mono'; font-size:0.72rem; color:var(--cyan); opacity:0.7; }
.submenu-highlight{
  background:var(--orange) !important; color:var(--white) !important; font-weight:700;
  margin-top:6px; justify-content:center; text-align:center;
  box-shadow:0 4px 14px rgba(255,106,61,0.35);
}
.submenu-highlight:hover{
  background:#ff7f52 !important; color:var(--white) !important;
  box-shadow:0 6px 20px rgba(255,106,61,0.5); transform:translateY(-1px);
}
.nav-cta{ background:var(--cyan); color:var(--navy); font-weight:700; padding:11px 22px; border-radius:8px; font-size:0.9rem; }
.nav-cta:hover{ box-shadow:0 0 24px rgba(0,240,255,0.5); }
.burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1100; }
.burger span{ width:26px; height:2px; background:var(--white); transition:.3s; }

/* ===== BOTÕES ===== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:8px; font-weight:600; font-size:0.95rem;
  cursor:pointer; border:1px solid transparent; transition:all .2s ease;
}
.btn-primary{ background:var(--cyan); color:var(--navy); }
.btn-primary:hover{ box-shadow:0 0 30px rgba(0,240,255,0.45); transform:translateY(-2px); }
.btn-orange{ background:var(--orange); color:var(--white); }
.btn-orange:hover{ box-shadow:0 0 30px rgba(255,106,61,0.45); transform:translateY(-2px); }
.btn-ghost{ border-color:var(--border); color:var(--white); }
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); }

/* ===== SECTION LABELS ===== */
.section-head{ max-width:640px; margin-bottom:56px; }
.eyebrow{
  font-family:'JetBrains Mono'; font-size:0.78rem; color:var(--cyan);
  text-transform:uppercase; letter-spacing:0.14em; margin-bottom:16px; display:block;
}
.eyebrow.orange{ color:var(--orange); }
.section-head h2{ font-size:clamp(1.8rem,3.6vw,2.6rem); font-weight:700; }
.section-head p{ color:var(--muted); margin-top:16px; font-size:1.02rem; }

.group-band{ padding:110px 0 40px; }
.group-band .wrap > .eyebrow{ text-align:center; display:block; }
.group-title{ text-align:center; font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:12px;}
.group-sub{ text-align:center; color:var(--muted); max-width:600px; margin:0 auto 20px; }

.service-section{ padding:90px 0; border-top:1px solid var(--border); }
.service-index{ font-family:'JetBrains Mono'; color:var(--cyan); font-size:0.85rem; opacity:0.8; margin-bottom:14px; }
.service-index.orange{ color:var(--orange); }
.service-index.center{ display:flex; justify-content:center; }
h3{ font-size:2rem; margin-bottom:18px; }
.service-section p{ color:var(--ink); margin-bottom:16px; }
.feature-list{ margin:24px 0 32px; }
.feature-list li{
  display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border);
  font-size:0.95rem; color:var(--ink);
}
.feature-list li::before{ content:'▹'; color:var(--cyan); font-weight:700; }
.feature-list li b{ color:var(--white); font-weight:700; }
.feature-list.orange li::before{ color:var(--orange); }
.badge{
  display:inline-block; padding:4px 10px; border:1px solid var(--cyan); color:var(--cyan);
  border-radius:20px; font-size:0.72rem; font-family:'JetBrains Mono';
}
.badge-orange{ border-color:var(--orange); color:var(--orange); }
.quote-btn-wrap{ margin-top:32px; }
.quote-btn-wrap.center{ text-align:center; margin-top:36px; }

/* ===== LAYOUT 1 — DESENVOLVIMENTO: split imagem + conteúdo com badge flutuante ===== */
.split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.split-media{ position:relative; border-radius:20px; overflow:hidden; }
.split-media img{ width:100%; height:420px; object-fit:cover; display:block; }
.floating-badge{
  position:absolute; bottom:-22px; left:-22px;
  background:var(--navy-2); border:1px solid var(--border); border-radius:14px;
  padding:16px 22px; box-shadow:0 20px 40px rgba(0,0,0,0.45);
}
.floating-badge b{ color:var(--cyan); font-size:1.6rem; display:block; font-family:'Space Grotesk'; }
.floating-badge span{ color:var(--muted); font-size:0.78rem; }

/* ===== LAYOUT 2 — SUPORTE: banner full-width + mini-cards sobrepostos ===== */
.layout-banner{ padding:0 0 90px; }
.banner-media{ position:relative; height:380px; overflow:hidden; }
.banner-media img{ width:100%; height:100%; object-fit:cover; filter:brightness(0.5) saturate(1.1); }
.banner-overlay{
  position:absolute; inset:0; display:flex; align-items:center;
  background:linear-gradient(90deg, rgba(0,31,63,0.94) 25%, rgba(0,31,63,0.35));
}
.banner-overlay h3{ margin-bottom:14px; }
.banner-overlay p{ max-width:500px; }
.mini-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:-64px; position:relative; z-index:2; }
.mini-card{ background:var(--navy-2); border:1px solid var(--border); border-radius:14px; padding:26px; text-align:center; }
.mini-card b{ display:block; color:var(--orange); font-size:1.9rem; font-family:'Space Grotesk'; margin-bottom:6px; }
.mini-card span{ color:var(--muted); font-size:0.85rem; }

/* ===== LAYOUT 3 — HOSPEDAGEM: conteúdo centralizado + imagem circular ===== */
.layout-centered .centered-content{ max-width:720px; margin:0 auto; text-align:center; }
.circle-media{
  width:260px; height:260px; border-radius:50%; overflow:hidden; margin:32px auto;
  border:3px solid var(--orange); box-shadow:0 0 0 10px rgba(255,106,61,0.08);
}
.circle-media img{ width:100%; height:100%; object-fit:cover; }
.ring-stats{ display:flex; justify-content:center; gap:44px; flex-wrap:wrap; margin:32px 0; }
.ring-stat b{ display:block; color:var(--cyan); font-size:1.4rem; font-family:'Space Grotesk'; }
.ring-stat span{ color:var(--muted); font-size:0.82rem; }

/* ===== LAYOUT 4 — SOCIAL MEDIA: galeria assimétrica de imagens ===== */
.gallery-head{ max-width:760px; margin-bottom:40px; }
.gallery-head p{ margin-bottom:14px; }
.gallery-head p:last-child{ margin-bottom:0; }
.lead-highlight{
  font-family:'Playfair Display', serif; font-weight:600; font-size:1.3rem;
  color:var(--white); line-height:1.4; margin-bottom:18px !important;
}
.gallery-grid{
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:20px; margin-bottom:36px;
}
.gallery-item{ border-radius:16px; overflow:hidden; }
.gallery-item.big{ grid-row:span 2; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-item:not(.big) img{ height:190px; }
.gallery-item.big img{ height:100%; min-height:400px; }

/* ===== LAYOUT 5 — CONSULTORIA: imagem lateral + timeline de etapas ===== */
.timeline-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start; }
.timeline-media{ border-radius:20px; overflow:hidden; height:460px; }
.timeline-media img{ width:100%; height:100%; object-fit:cover; }
.timeline{ margin:28px 0; }
.timeline-step{
  display:flex; padding:14px 0 14px 26px; border-left:2px solid var(--border);
  position:relative; margin-left:12px;
}
.timeline-step:last-child{ border-left-color:transparent; }
.t-num{
  position:absolute; left:-19px; top:12px; width:36px; height:36px; border-radius:50%;
  background:var(--orange); color:var(--white); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.78rem; font-family:'JetBrains Mono';
}
.timeline-step b{ display:block; margin-bottom:4px; font-size:1.02rem; }
.timeline-step p{ color:var(--muted); font-size:0.88rem; margin:0; }

/* ===== LAYOUT 6 — TRÁFEGO PAGO: imagem dashboard com KPIs flutuantes ===== */
.dash-head{ max-width:680px; margin-bottom:36px; }
.dash-media{ position:relative; border-radius:20px; overflow:hidden; margin-bottom:40px; }
.dash-media img{ width:100%; display:block; filter:brightness(0.82); max-height:480px; object-fit:cover; }
.kpi-float{
  position:absolute; background:var(--navy-2); border:1px solid var(--orange); border-radius:12px;
  padding:14px 20px; box-shadow:0 16px 30px rgba(0,0,0,0.45);
}
.kpi-1{ top:24px; left:24px; }
.kpi-2{ bottom:24px; right:24px; }
.kpi-float b{ color:var(--orange); font-size:1.5rem; display:block; font-family:'Space Grotesk'; }
.kpi-float span{ color:var(--muted); font-size:0.78rem; }
.dash-footer{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; }

/* ===== BLOG — layout editorial ===== */
.blog-section{ padding:130px 0; border-top:1px solid var(--border); }
.blog-section-head{ margin-bottom:64px; }
.blog-section-head h2{ font-family:'Playfair Display', serif; font-weight:600; }
.blog-section-head h2 em{ font-style:italic; color:var(--orange); }

/* --- Post em destaque --- */
.blog-featured{
  display:grid; grid-template-columns:1.15fr 1fr; gap:0; align-items:stretch;
  background:rgba(0,40,79,0.4); border:1px solid var(--border); border-radius:20px;
  overflow:hidden; margin-bottom:16px;
}
.blog-featured-media{ display:block; overflow:hidden; min-height:340px; }
.blog-featured-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.blog-featured:hover .blog-featured-media img{ transform:scale(1.045); }
.blog-featured-body{ padding:48px 48px 44px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.blog-featured-label{
  font-family:'JetBrains Mono'; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--orange); display:flex; align-items:center; gap:8px;
}
.blog-featured-label::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 10px var(--orange); }
.blog-featured-body h3{
  font-family:'Playfair Display', serif; font-weight:600; font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1.22; margin:0;
}
.blog-featured-body h3 a:hover{ color:var(--cyan); }
.blog-featured-body > p{ color:var(--muted); font-size:1rem; line-height:1.75; margin:0; }

/* --- Tag de categoria --- */
.blog-tag{
  font-family:'JetBrains Mono'; font-size:0.7rem; color:var(--cyan); text-transform:uppercase;
  letter-spacing:0.1em; border:1px solid var(--cyan); border-radius:20px; padding:4px 12px; display:inline-block;
}
.blog-tag.orange{ color:var(--orange); border-color:var(--orange); }

/* --- Autor / avatar --- */
.blog-author{ display:flex; align-items:center; gap:12px; margin-top:4px; }
.avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--cyan), #0090a0);
  color:var(--navy); font-family:'Space Grotesk'; font-weight:700; font-size:0.85rem;
  display:flex; align-items:center; justify-content:center; letter-spacing:0.02em;
}
.avatar-sm{ width:24px; height:24px; font-size:0.65rem; }
.blog-author-info{ display:flex; flex-direction:column; }
.blog-author-info b{ font-size:0.9rem; font-weight:600; }
.blog-author-info span{ font-size:0.78rem; color:var(--muted); font-family:'JetBrains Mono'; }
.blog-featured-body .btn{ margin-top:8px; }

/* --- Divisor "Mais artigos" --- */
.blog-divider{
  display:flex; align-items:center; gap:18px; margin:56px 0 32px;
  font-family:'JetBrains Mono'; font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
}
.blog-divider::before, .blog-divider::after{ content:''; flex:1; height:1px; background:var(--border); }

/* --- Grid secundário --- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.blog-card{
  background:rgba(0,40,79,0.4); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.blog-card:hover{ transform:translateY(-6px); border-color:var(--cyan); box-shadow:0 24px 40px rgba(0,0,0,0.35); }
.blog-card-media{ position:relative; height:190px; overflow:hidden; display:block; }
.blog-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.blog-card:hover .blog-card-media img{ transform:scale(1.08); }
.blog-card-tag{
  position:absolute; top:14px; left:14px; background:rgba(0,21,41,0.85); backdrop-filter:blur(4px);
  font-family:'JetBrains Mono'; font-size:0.66rem; color:var(--cyan); text-transform:uppercase;
  letter-spacing:0.08em; border-radius:20px; padding:5px 12px;
}
.blog-card-tag.orange{ color:var(--orange); }
.blog-card-body{ padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.blog-card h4{ font-family:'Playfair Display', serif; font-weight:600; font-size:1.18rem; line-height:1.35; }
.blog-card h4 a:hover{ color:var(--cyan); }
.blog-card p{ color:var(--muted); font-size:0.9rem; line-height:1.6; flex:1; }
.blog-meta{
  display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; color:var(--muted);
  border-top:1px solid var(--border); padding-top:14px; margin-top:6px; font-family:'JetBrains Mono';
}
.blog-meta-author{ display:flex; align-items:center; gap:8px; font-family:'Inter'; }

/* --- Estado vazio --- */
.blog-empty{
  text-align:center; padding:64px 32px; border:1px dashed var(--border); border-radius:20px;
  background:rgba(0,40,79,0.3);
}
.blog-empty h3{ font-family:'Playfair Display', serif; margin:16px 0 10px; font-size:1.4rem; }
.blog-empty p{ color:var(--muted); max-width:420px; margin:0 auto; }

@media (max-width:900px){
  .blog-featured{ grid-template-columns:1fr; }
  .blog-featured-media{ min-height:260px; }
  .blog-featured-body{ padding:32px 28px; }
}

/* ===== CTA FINAL ===== */
.cta-final{
  padding:100px 0; text-align:center; border-top:1px solid var(--border);
  background:radial-gradient(ellipse at 50% 0%, rgba(255,106,61,0.08), transparent 60%);
}
.cta-final h2{ font-size:clamp(1.8rem,4vw,2.8rem); max-width:700px; margin:0 auto 24px; }
.cta-final p{ color:var(--muted); max-width:520px; margin:0 auto 36px; }

/* ===== FOOTER ===== */
footer{ padding:60px 0 32px; border-top:1px solid var(--border); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.footer-col h5{ font-size:0.85rem; color:var(--cyan); margin-bottom:16px; font-family:'JetBrains Mono'; text-transform:uppercase; letter-spacing:0.08em;}
.footer-col li{ margin-bottom:10px; }
.footer-col a{ color:var(--muted); font-size:0.9rem; }
.footer-col a:hover{ color:var(--cyan); }
.footer-bottom{
  display:flex; justify-content:space-between; padding-top:28px; border-top:1px solid var(--border);
  color:var(--muted); font-size:0.82rem; flex-wrap:wrap; gap:12px;
}
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  transition:all .2s ease;
}
.footer-social a:hover{ color:var(--navy); background:var(--cyan); border-color:var(--cyan); }
.footer-social svg{ width:18px; height:18px; }

/* ===== MODAL (Orçamento) ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,10,20,0.7); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:2000; padding:20px;
}
.modal-overlay.active{ display:flex; }
.modal{ background:var(--navy-2); border:1px solid var(--border); border-radius:16px; padding:40px; max-width:460px; width:100%; position:relative; }
.modal-close{ position:absolute; top:18px; right:18px; cursor:pointer; color:var(--muted); font-size:1.4rem; line-height:1; }
.modal-close:hover{ color:var(--cyan); }
.modal h3{ font-size:1.5rem; margin-bottom:6px; }
.modal .service-tag{ color:var(--cyan); font-family:'JetBrains Mono'; font-size:0.82rem; margin-bottom:24px; display:block; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:0.82rem; color:var(--muted); margin-bottom:6px; }
.field input, .field textarea{
  width:100%; background:var(--navy); border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; color:var(--white); font-family:'Inter'; font-size:0.92rem;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--cyan); }
.modal .btn-primary{ width:100%; justify-content:center; margin-top:8px; }

/* ===== WHATSAPP FLUTUANTE ===== */
.whatsapp-float{
  position:fixed; bottom:26px; right:26px; z-index:1500;
  width:62px; height:62px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(0,0,0,0.35), 0 0 0 0 rgba(37,211,102,0.6);
  animation:wa-pulse 2.4s infinite;
  cursor:pointer; transition:transform .2s ease;
}
.whatsapp-float:hover{ transform:scale(1.08); }
.whatsapp-float svg{ width:32px; height:32px; }
.whatsapp-tooltip{
  position:absolute; right:74px; top:50%; transform:translateY(-50%);
  background:var(--navy-2); border:1px solid var(--border); color:var(--white);
  padding:8px 14px; border-radius:8px; font-size:0.82rem; white-space:nowrap;
  opacity:0; visibility:hidden; transition:all .2s ease;
}
.whatsapp-float:hover .whatsapp-tooltip{ opacity:1; visibility:visible; right:80px; }
@keyframes wa-pulse{
  0%{ box-shadow:0 6px 24px rgba(0,0,0,0.35), 0 0 0 0 rgba(37,211,102,0.55); }
  70%{ box-shadow:0 6px 24px rgba(0,0,0,0.35), 0 0 0 14px rgba(37,211,102,0); }
  100%{ box-shadow:0 6px 24px rgba(0,0,0,0.35), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width:520px){
  .whatsapp-float{ width:54px; height:54px; bottom:18px; right:18px; }
  .whatsapp-float svg{ width:28px; height:28px; }
}

/* ===== POP-UP: Plano de Marketing Grátis ===== */
.promo-popup-overlay{
  position:fixed; inset:0; background:rgba(0,10,20,0.75); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:2500; padding:20px;
  opacity:0; transition:opacity .3s ease;
}
.promo-popup-overlay.active{ display:flex; opacity:1; }
.promo-popup{
  position:relative; background:var(--navy-2); border:1px solid var(--border); border-radius:20px;
  padding:44px 40px; max-width:420px; width:100%; text-align:center;
  box-shadow:0 40px 80px rgba(0,0,0,0.5);
  transform:scale(0.92) translateY(10px); transition:transform .3s ease;
}
.promo-popup-overlay.active .promo-popup{ transform:scale(1) translateY(0); }
.promo-popup-close{
  position:absolute; top:16px; right:18px; cursor:pointer; color:var(--muted); font-size:1.5rem; line-height:1;
}
.promo-popup-close:hover{ color:var(--cyan); }
.promo-popup-badge{
  display:inline-block; background:rgba(255,106,61,0.12); color:var(--orange);
  font-family:'JetBrains Mono'; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em;
  padding:6px 14px; border-radius:20px; margin-bottom:18px;
}
.promo-popup h3{
  font-family:'Playfair Display', serif; font-weight:600; font-size:1.5rem; line-height:1.3; margin-bottom:12px;
}
.promo-popup p{ color:var(--muted); font-size:0.94rem; margin-bottom:26px; }
.promo-popup-dismiss{
  background:none; border:none; color:var(--muted); font-size:0.82rem; margin-top:14px;
  cursor:pointer; text-decoration:underline;
}
.promo-popup-dismiss:hover{ color:var(--ink); }
@media (max-width:480px){
  .promo-popup{ padding:36px 26px; }
}

/* ===== SLIDER (3 slides) — agora é a primeira seção da página ===== */
.slider-section{ position:relative; padding:0; border-bottom:1px solid var(--border); margin-top:76px; }
.slider{ position:relative; height:560px; overflow:hidden; }
.slide{
  position:absolute; inset:0; display:flex; align-items:center;
  opacity:0; visibility:hidden; transform:scale(1.04);
  transition:opacity .7s ease, transform 1.1s ease, visibility 0s linear .7s;
}
.slide.active{
  opacity:1; visibility:visible; transform:scale(1);
  transition:opacity .7s ease, transform 1.1s ease, visibility 0s linear 0s; z-index:2;
}
.slide-bg{ position:absolute; inset:0; z-index:0; }
.slide-bg::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 18% 15%, rgba(0,240,255,0.10), transparent 60%),
    radial-gradient(ellipse 50% 45% at 85% 85%, rgba(0,240,255,0.06), transparent 55%),
    radial-gradient(ellipse 55% 45% at 75% 5%, rgba(255,106,61,0.04), transparent 55%),
    var(--navy);
}
.slide-bg.mixed::before{
  background:
    radial-gradient(ellipse 55% 50% at 80% 15%, rgba(0,240,255,0.09), transparent 58%),
    radial-gradient(ellipse 50% 45% at 12% 85%, rgba(255,106,61,0.07), transparent 55%),
    radial-gradient(ellipse 45% 40% at 40% 0%, rgba(0,240,255,0.05), transparent 55%),
    var(--navy);
}
.slide-bg.orange::before{
  background:
    radial-gradient(ellipse 60% 50% at 82% 15%, rgba(255,106,61,0.13), transparent 60%),
    radial-gradient(ellipse 50% 45% at 15% 85%, rgba(255,106,61,0.06), transparent 55%),
    radial-gradient(ellipse 55% 45% at 30% 5%, rgba(0,240,255,0.05), transparent 55%),
    var(--navy);
}
.slide-bg-photo{
  background-size:cover; background-position:center 25%; background-repeat:no-repeat;
}
.slide-bg-photo::before{
  background:
    linear-gradient(90deg, rgba(0,21,41,0.96) 0%, rgba(0,21,41,0.85) 32%, rgba(0,21,41,0.45) 62%, rgba(0,21,41,0.15) 100%),
    radial-gradient(ellipse 55% 50% at 90% 90%, rgba(0,240,255,0.07), transparent 55%);
}
.slide-bg .stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1.6px 1.6px at 40px 60px, #ffffff, transparent),
    radial-gradient(1.2px 1.2px at 120px 20px, #ffffff, transparent),
    radial-gradient(1px 1px at 200px 110px, #ffffff, transparent),
    radial-gradient(1.4px 1.4px at 260px 40px, var(--cyan), transparent),
    radial-gradient(1px 1px at 320px 150px, #ffffff, transparent),
    radial-gradient(1.2px 1.2px at 30px 170px, #ffffff, transparent),
    radial-gradient(1px 1px at 170px 190px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 90px 130px, #ffffff, transparent),
    radial-gradient(1px 1px at 380px 80px, #ffffff, transparent),
    radial-gradient(1.3px 1.3px at 220px 220px, var(--cyan), transparent);
  background-repeat:repeat;
  background-size:420px 240px;
  opacity:0.55;
  animation:star-twinkle 6s ease-in-out infinite alternate;
}
@keyframes star-twinkle{
  0%{ opacity:0.35; }
  50%{ opacity:0.75; }
  100%{ opacity:0.45; }
}
.slide-content{ position:relative; z-index:2; max-width:640px; }
.slide-portfolio-empty{
  grid-column:1/-1; color:var(--muted); font-size:0.85rem; padding:22px; text-align:center;
  border:1px dashed var(--border); border-radius:10px;
}

/* ===== CARDS DO PROCESSO DE CRIAÇÃO (Desenvolvimento) ===== */
.process-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin:0 0 8px;
}
.process-card{
  background:rgba(0,40,79,0.45); border:1px solid var(--border); border-radius:16px; padding:28px;
  transition:transform .2s ease, border-color .2s ease;
}
.process-card:hover{ transform:translateY(-4px); border-color:var(--cyan); }
.process-card .step-num{
  font-family:'JetBrains Mono'; color:var(--cyan); font-size:0.76rem; letter-spacing:0.08em;
  text-transform:uppercase; display:block; margin-bottom:12px;
}
.process-card h4{ font-size:1.02rem; line-height:1.4; margin-bottom:16px; }
.process-card ul{ margin:0; }
.process-card ul li{
  font-size:0.85rem; padding:8px 0; border-bottom:1px solid var(--border);
  color:var(--ink); display:flex; align-items:flex-start; gap:8px;
}
.process-card ul li:last-child{ border-bottom:none; padding-bottom:0; }
.process-card ul li::before{ content:'✓'; color:var(--cyan); font-weight:700; flex-shrink:0; }
.process-card > p{ color:var(--muted); font-size:0.88rem; line-height:1.65; margin:0; }
.process-grid-6{ grid-template-columns:repeat(3, 1fr); }

/* ===== PORTFÓLIO DE SITES — painel claro na seção Desenvolvimento ===== */
.site-showcase{
  background:#ffffff; border-radius:24px; padding:48px; margin-top:48px;
  box-shadow:0 30px 60px rgba(0,0,0,0.25);
}
.site-showcase-head{ margin-bottom:32px; }
.site-showcase-head h4{
  font-family:'Playfair Display', serif; font-weight:600; font-size:1.5rem; color:#14161a; margin-bottom:8px;
}
.site-showcase-head p{ color:#6b7280; font-size:0.94rem; margin:0; }
.site-showcase-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:36px 28px;
}
.site-showcase-card{ display:block; }
.site-showcase-media{
  border-radius:12px; overflow:hidden; border:1px solid #ececec; margin-bottom:16px;
  background:#f4f2ee;
}
.site-showcase-media img{ width:100%; height:170px; object-fit:cover; display:block; transition:transform .4s ease; }
.site-showcase-card:hover .site-showcase-media img{ transform:scale(1.05); }
.site-showcase-footer{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.site-showcase-text h5{ color:#14161a; font-size:1rem; font-weight:700; margin-bottom:4px; }
.site-showcase-text p{ color:#8a8f98; font-size:0.86rem; margin:0; line-height:1.4; }
.site-showcase-btn{
  flex-shrink:0; background:#f0eee9; color:#14161a; font-size:0.8rem; font-weight:600;
  padding:9px 18px; border-radius:20px; white-space:nowrap; transition:background .2s ease;
}
.site-showcase-card:hover .site-showcase-btn{ background:var(--cyan); color:var(--navy); }
.site-showcase-empty{
  grid-column:1/-1; color:#8a8f98; font-size:0.9rem; padding:30px; text-align:center;
  border:1px dashed #ddd; border-radius:12px;
}
.slide-index{
  font-family:'JetBrains Mono'; color:var(--cyan); font-size:0.82rem; letter-spacing:0.14em;
  text-transform:uppercase; margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.slide-index.orange{ color:var(--orange); }
.slide-index::before{ content:''; width:28px; height:1px; background:currentColor; }
.slide-content h2{ font-size:clamp(2.1rem,4.4vw,3.4rem); font-weight:700; line-height:1.05; margin-bottom:20px; }
.slide-content h2 .accent{ color:var(--cyan); }
.slide-content h2 .accent.orange{ color:var(--orange); }
.slide-content p{ color:var(--muted); font-size:1.05rem; max-width:480px; margin-bottom:32px; }
.slide-tags{ display:flex; gap:10px; margin-bottom:32px; flex-wrap:wrap; }
.slide-tags span{
  font-family:'JetBrains Mono'; font-size:0.74rem; color:var(--cyan);
  border:1px solid var(--cyan); border-radius:20px; padding:5px 12px;
}
.slide-tags.orange span{ color:var(--orange); border-color:var(--orange); }
.slider-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:48px; height:48px; border-radius:50%; border:1px solid var(--border);
  background:rgba(0,31,63,0.6); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--white); transition:all .2s ease;
}
.slider-nav:hover{ border-color:var(--cyan); color:var(--cyan); }
.slider-prev{ left:24px; }
.slider-next{ right:24px; }
.slider-dots{ position:absolute; bottom:26px; left:0; right:0; z-index:5; display:flex; justify-content:center; gap:12px; }
.slider-dots button{ width:34px; height:4px; border-radius:2px; background:var(--border); border:none; cursor:pointer; transition:all .25s ease; padding:0; }
.slider-dots button.active{ background:var(--cyan); box-shadow:0 0 10px rgba(0,240,255,0.6); }

/* ===== PÁGINA DE POST (artigo do blog) ===== */
.post-hero{ margin-top:76px; position:relative; height:480px; overflow:hidden; }
.post-hero img{ width:100%; height:100%; object-fit:cover; filter:brightness(0.4) saturate(1.05); }
.post-hero-overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(0,21,41,0.15) 0%, rgba(0,21,41,0.75) 55%, rgba(0,21,41,0.98) 100%);
  padding-bottom:52px;
}
.post-hero-overlay .wrap{ width:100%; max-width:920px; }
.post-back{ color:var(--cyan); font-size:0.85rem; display:inline-flex; align-items:center; gap:6px; margin-bottom:22px; }
.post-back:hover{ color:var(--orange); }
.post-hero .blog-tag{ margin-bottom:18px; }
.post-hero h1{
  font-family:'Playfair Display', serif; font-weight:600;
  font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.18; max-width:820px;
}
.post-hero-meta{ display:flex; align-items:center; gap:14px; margin-top:28px; }
.post-body{ padding:76px 0 110px; }
.post-content{ max-width:720px; margin:0 auto; }
.post-content .post-lead{
  font-size:1.25rem; color:var(--ink); line-height:1.7; margin-bottom:36px;
  padding-bottom:32px; border-bottom:1px solid var(--border);
}
.post-content > p:first-of-type:first-letter{
  float:left; font-family:'Playfair Display', serif; font-size:4.2rem; line-height:0.8;
  font-weight:700; color:var(--cyan); padding:8px 10px 0 0;
}
.post-content p{ color:var(--ink); margin-bottom:22px; font-size:1.08rem; line-height:1.85; }
.post-content h2, .post-content h3{ font-family:'Playfair Display', serif; font-weight:600; margin:44px 0 18px; }
.post-content h2{ font-size:1.65rem; } .post-content h3{ font-size:1.3rem; }
.post-content ul, .post-content ol{ margin:0 0 22px 24px; color:var(--ink); font-size:1.05rem; line-height:1.85; }
.post-content ul{ list-style:disc; }
.post-content ol{ list-style:decimal; }
.post-content li{ margin-bottom:8px; }
.post-content a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.post-content a:hover{ color:var(--orange); }
.post-content strong{ color:var(--white); }
.post-content blockquote{
  border-left:3px solid var(--orange); padding:6px 0 6px 24px; margin:32px 0;
  color:var(--ink); font-style:italic; font-size:1.2rem; font-family:'Playfair Display', serif;
}
.post-content img{ max-width:100%; border-radius:14px; margin:32px 0; display:block; box-shadow:0 20px 40px rgba(0,0,0,0.3); }

.post-cta{
  max-width:720px; margin:64px auto 0; padding:40px; border:1px solid var(--border); border-radius:18px;
  background:linear-gradient(160deg, rgba(0,40,79,0.6), rgba(255,106,61,0.06)); text-align:center;
}
.post-cta h3{ font-family:'Playfair Display', serif; font-size:1.4rem; margin-bottom:8px; }
.post-cta p{ color:var(--muted); margin-bottom:22px; }

.post-not-found{ max-width:600px; margin:200px auto; text-align:center; padding:0 32px; }
.post-not-found h1{ font-family:'Playfair Display', serif; font-size:2.1rem; margin-bottom:16px; }
.post-not-found p{ color:var(--muted); margin-bottom:28px; }

/* --- Relacionados --- */
.related-posts{ max-width:920px; margin:0 auto; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.related-card{ display:block; }
.related-card-media{ height:150px; border-radius:14px; overflow:hidden; margin-bottom:14px; }
.related-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.related-card:hover .related-card-media img{ transform:scale(1.06); }
.related-card .blog-tag{ margin-bottom:10px; }
.related-card h4{ font-family:'Playfair Display', serif; font-weight:600; font-size:1rem; line-height:1.4; }
.related-card:hover h4{ color:var(--cyan); }

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

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  nav.menu{
    position:fixed; top:76px; left:0; right:0; bottom:0;
    background:var(--navy); flex-direction:column; align-items:stretch;
    padding:24px; gap:0; transform:translateX(100%); transition:transform .3s ease;
    overflow-y:auto;
  }
  nav.menu.active{ transform:translateX(0); }
  nav.menu > ul{ flex-direction:column; align-items:stretch; width:100%; }
  .nav-item{ width:100%; }
  .submenu{ position:static; opacity:1; visibility:visible; transform:none; max-height:0; overflow:hidden; padding:0; border:none; transition:max-height .25s ease; }
  .nav-item.open .submenu{ max-height:300px; padding:8px; border:1px solid var(--border); margin:4px 0 8px; }
  .nav-cta{ margin-top:16px; text-align:center; justify-content:center; }
  .burger{ display:flex; }

  .split-grid, .timeline-grid, .dash-footer{ grid-template-columns:1fr; gap:36px; }
  .timeline-media{ height:280px; }
  .mini-cards{ grid-template-columns:1fr; margin-top:24px; }
  .gallery-grid{ grid-template-columns:1fr; }
  .gallery-item.big img, .gallery-item:not(.big) img{ height:240px; }
  .kpi-float{ position:static; margin-bottom:12px; display:inline-block; }
  .blog-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .slider{ height:auto; min-height:560px; }
  .site-showcase{ padding:28px 22px; border-radius:18px; }
  .process-grid{ grid-template-columns:1fr; }
  .site-showcase-grid{ grid-template-columns:repeat(2, 1fr); gap:28px; }
  .slide{ padding:140px 0 90px; position:absolute; }
  .slider-nav{ width:40px; height:40px; }
  .slider-prev{ left:12px; } .slider-next{ right:12px; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
  .circle-media{ width:200px; height:200px; }
  .post-hero{ height:320px; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}

/* ===== CARDS DE VANTAGENS (por serviço) ===== */
.content-label{
  font-family:'JetBrains Mono'; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--muted); margin:38px 0 16px; display:flex; align-items:center; gap:12px;
}
.content-label::before{ content:''; width:22px; height:1px; background:var(--border); flex-shrink:0; }
.content-label.first{ margin-top:28px; }
.advantages-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px;
  margin:0 0 8px;
}
.advantage-card{
  background:rgba(0,40,79,0.45); border:1px solid var(--border); border-radius:14px;
  padding:24px; transition:transform .2s ease, border-color .2s ease;
}
.advantage-card:hover{ transform:translateY(-4px); border-color:var(--cyan); }
.advantage-card.is-orange:hover{ border-color:var(--orange); }
.advantage-icon{
  width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(0,240,255,0.1); color:var(--cyan); margin-bottom:16px;
}
.advantage-card.is-orange .advantage-icon{ background:rgba(255,106,61,0.12); color:var(--orange); }
.advantage-icon svg{ width:22px; height:22px; }
.advantage-card h4{ font-size:1rem; margin-bottom:8px; font-weight:600; }
.advantage-card p{ color:var(--muted); font-size:0.86rem; line-height:1.6; margin:0; }

/* ===== GRÁFICOS ILUSTRATIVOS (por seção) ===== */
.chart-card{
  background:rgba(0,40,79,0.45); border:1px solid var(--border); border-radius:16px;
  padding:26px 28px; margin:32px 0;
}
.chart-card-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; flex-wrap:wrap; gap:8px; }
.chart-card-head h4{ font-size:0.95rem; font-weight:600; }
.chart-card-head span{ font-family:'JetBrains Mono'; font-size:0.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }
.chart-svg{ width:100%; height:auto; display:block; }
.chart-caption{ margin-top:14px; font-size:0.78rem; color:var(--muted); text-align:center; }
.chart-legend{ display:flex; gap:20px; margin-top:14px; flex-wrap:wrap; justify-content:center; }
.chart-legend span{ display:flex; align-items:center; gap:7px; font-size:0.78rem; color:var(--muted); }
.chart-legend .dot{ width:9px; height:9px; border-radius:2px; display:inline-block; }

/* ===== GRID DE PORTFÓLIO — SOCIAL MEDIA (estilo feed do Instagram) ===== */
.portfolio-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin:48px 0 22px; flex-wrap:wrap; }
.portfolio-head h4{ font-family:'Playfair Display', serif; font-weight:600; font-size:1.3rem; }
.portfolio-head p{ color:var(--muted); font-size:0.9rem; margin-top:4px; max-width:480px; }
.instagram-frame{
  background:var(--navy-2); border:1px solid var(--border); border-radius:18px; padding:18px; margin-bottom:36px;
}
.instagram-frame-head{ display:flex; align-items:center; gap:12px; padding:6px 8px 16px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.instagram-frame-head .avatar{ background:linear-gradient(135deg, var(--orange), var(--cyan)); }
.instagram-frame-head b{ font-size:0.9rem; }
.instagram-frame-head span{ display:block; color:var(--muted); font-size:0.74rem; font-family:'JetBrains Mono'; }
.instagram-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; }
.instagram-post{
  position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:4px; cursor:pointer;
}
.instagram-post img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.instagram-post:hover img{ transform:scale(1.08); }
.instagram-post-overlay{
  position:absolute; inset:0; background:rgba(0,21,41,0.72); opacity:0; transition:opacity .25s ease;
  display:flex; align-items:center; justify-content:center; gap:18px;
}
.instagram-post:hover .instagram-post-overlay{ opacity:1; }
.instagram-post-overlay span{
  display:flex; align-items:center; gap:6px; color:var(--white); font-size:0.82rem; font-weight:700;
}
.instagram-post-overlay svg{ width:16px; height:16px; }
.instagram-post-tag{
  position:absolute; top:8px; left:8px; background:rgba(0,21,41,0.75); backdrop-filter:blur(3px);
  color:var(--cyan); font-family:'JetBrains Mono'; font-size:0.6rem; text-transform:uppercase;
  padding:3px 8px; border-radius:20px; letter-spacing:0.05em;
}

@media (max-width:600px){
  .advantages-grid{ grid-template-columns:1fr 1fr; }
  .site-showcase-grid{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .advantages-grid{ grid-template-columns:1fr; }
}

/* ===== PLANO DE MARKETING (ferramenta gratuita) ===== */
.planner-hero{
  margin-top:76px; padding:80px 0 50px;
  background:
    radial-gradient(ellipse 70% 55% at 15% 0%, rgba(255,106,61,0.10), transparent 60%),
    radial-gradient(ellipse 55% 50% at 90% 100%, rgba(0,240,255,0.07), transparent 55%);
}
.planner-hero h1{
  font-family:'Playfair Display', serif; font-weight:600; font-size:clamp(2rem,4.4vw,3rem);
  margin:16px 0 18px; max-width:760px;
}
.planner-hero p{ color:var(--muted); max-width:600px; font-size:1.05rem; }
.planner-body{ padding:20px 0 100px; }
.planner-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:32px; align-items:start; }
.planner-card{
  background:rgba(0,40,79,0.5); border:1px solid var(--border); border-radius:18px; padding:32px;
}
.planner-card h3{ font-size:1.15rem; margin-bottom:22px; }
.planner-hint{ font-size:0.78rem; color:var(--muted); margin-top:14px; }
.planner-list-card{ min-height:100%; }
.planner-list-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.planner-list-head h3{ margin:0; }
.planner-empty{
  color:var(--muted); font-size:0.9rem; text-align:center; padding:40px 20px;
  border:1px dashed var(--border); border-radius:12px;
}
.planner-table{ width:100%; border-collapse:collapse; }
.planner-table th{
  text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--border); font-family:'JetBrains Mono';
}
.planner-table td{ padding:12px; border-bottom:1px solid var(--border); font-size:0.88rem; color:var(--ink); }
.planner-remove{
  background:none; border:none; color:var(--muted); font-size:1.1rem; cursor:pointer; line-height:1;
  width:26px; height:26px; border-radius:50%; transition:all .2s ease;
}
.planner-remove:hover{ background:rgba(255,84,112,0.15); color:#ff5470; }

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

/* ===== ÁREA DE IMPRESSÃO (gera o PDF via impressão do navegador) ===== */
#printArea{ display:none; }
.print-header{ display:flex; align-items:center; gap:20px; margin-bottom:24px; }
.print-logo{ height:48px; width:auto; }
.print-header h2{ font-size:1.4rem; margin:0; }
.print-header span{ font-size:0.85rem; color:#666; }
.print-client{ margin-bottom:18px; font-size:0.95rem; }
.print-table{ width:100%; border-collapse:collapse; margin-bottom:24px; }
.print-table th, .print-table td{ border:1px solid #ccc; padding:10px 12px; text-align:left; font-size:0.88rem; }
.print-table th{ background:#f2f2f2; }
.print-footer{ font-size:0.78rem; color:#888; }

@media print{
  body *{ visibility:hidden; }
  #printArea, #printArea *{ visibility:visible; }
  #printArea{
    display:block; position:absolute; top:0; left:0; width:100%;
    color:#111; background:#fff; padding:20px;
  }
}