@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  /* ===========================
     THEME: LIGHT (com efeitos)
     =========================== */

  --background: 220 33% 98%;
  --foreground: 222 47% 11%;

  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;

  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;

  --primary: 199 89% 48%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 20% 96%;
  --secondary-foreground: 222 47% 11%;

  --muted: 220 18% 94%;
  --muted-foreground: 215 16% 36%;

  --accent: 199 89% 48%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 220 14% 86%;
  --input: 220 14% 86%;
  --ring: 199 89% 48%;
  --radius: 0.75rem;

  /* ===== mantém o "DNA" visual do dark ===== */
  --gradient-primary: linear-gradient(135deg, hsl(199 89% 48%) 0%, hsl(220 90% 56%) 100%);

  /* cards com leve profundidade (sem ficar chapado) */
  --gradient-card: linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(220 33% 97%) 100%);

  /* hero: mesmo efeito do seu, só calibrado pro claro */
  --gradient-hero: radial-gradient(ellipse at 30% 0%, hsl(199 89% 48% / 0.14) 0%, transparent 55%);

  /* glow e sombra no claro (mantém impacto) */
  --shadow-glow: 0 0 60px -14px hsl(199 89% 48% / 0.40);
  --shadow-card: 0 14px 34px -18px rgba(0,0,0,.26);

  /* borda viva (efeito “premium”) */
  --border-glow: 0 0 0 1px hsl(var(--primary) / 0.16), 0 10px 28px -20px hsl(var(--primary) / 0.32);
  --border-glow-hover: 0 0 0 1px hsl(var(--primary) / 0.26), 0 18px 40px -24px hsl(var(--primary) / 0.42);

  /* micro-interações */
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ===== base ===== */
html{ scroll-behavior:smooth; }
body{
  font-family: Inter, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* ======================================
   Helpers / Efeitos (mantidos e reforçados)
   ====================================== */

/* Gradiente do texto (igual seu DNA) */
.text-gradient{
  background-image: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Glass card com borda + brilho leve */
.glass-card{
  background: hsl(var(--card) / 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  border: 1px solid hsl(var(--border) / 0.65);
  box-shadow: var(--shadow-card), var(--border-glow);

  transition:
    transform .18s var(--ease),
    box-shadow .18s var(--ease),
    border-color .18s var(--ease),
    background-color .18s var(--ease);
}

/* Hover do card (mantém o efeito de borda e elevação) */
.glass-card:hover{
  transform: translateY(-2px);
  border-color: hsl(var(--primary) / 0.35);
  box-shadow: var(--shadow-card), var(--border-glow-hover);
}

/* Glow (CTA / botões) */
.glow{
  box-shadow: var(--shadow-glow);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease), opacity .18s var(--ease);
}
.glow:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 70px -16px hsl(199 89% 48% / 0.48);
}

/* Botões (quando o Tailwind usa bg-primary + hover opacity) */
a.bg-primary,
button.bg-primary{
  box-shadow: 0 14px 32px -18px hsl(var(--primary) / .55);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease);
}
a.bg-primary:hover,
button.bg-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px -22px hsl(var(--primary) / .65);
}

/* Botões outline (borda) — mantém a borda e “vida” */
a.border,
button.border{
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
a.border:hover,
button.border:hover{
  transform: translateY(-1px);
  border-color: hsl(var(--primary) / 0.40);
  box-shadow: 0 12px 34px -26px hsl(var(--primary) / .55);
}

/* Melhor feedback de foco (acessibilidade, mas também passa “capricho”) */
:focus-visible{
  outline: 2px solid hsl(var(--primary) / .55);
  outline-offset: 3px;
  border-radius: 14px;
}

/* <details> accordion polish (mantido) */
details > summary{ list-style:none; }
details > summary::-webkit-details-marker{ display:none; }

/* Opcional: animação suave no abrir/fechar sem JS (não quebra nada) */
details[open]{
  animation: details-open .18s var(--ease) both;
}
@keyframes details-open{
  from{ transform: translateY(2px); opacity: .92; }
  to{ transform: translateY(0); opacity: 1; }
}
/* =================================================
   PATCH: Garantir borda quando usar border-*
   Se tiver class "border-border/.." mas esqueceram "border",
   isso força border-width 1px nos links/botões.
   ================================================= */

a[class*="border-border"],
button[class*="border-border"],
div[class*="border-border"],
section[class*="border-border"]{
  border-width: 1px;
  border-style: solid;
}

/* Quando for Tailwind border-primary/* também */
a[class*="border-primary"],
button[class*="border-primary"],
div[class*="border-primary"]{
  border-width: 1px;
  border-style: solid;
}

/* Scroll offset por seção (header fixo) */
.scroll-50{  scroll-margin-top: 50px; }
.scroll-60{  scroll-margin-top: 60px; }
.scroll-70{  scroll-margin-top: 70px; }
.scroll-80{  scroll-margin-top: 80px; }
.scroll-90{  scroll-margin-top: 90px; }
.scroll-100{  scroll-margin-top: 100px; }
.scroll-110{  scroll-margin-top: 110px; }
.scroll-120{  scroll-margin-top: 120px; }
.scroll-130{  scroll-margin-top: 130px; }
.scroll-140{  scroll-margin-top: 140px; }
.scroll-150{  scroll-margin-top: 150px; }

/* =========================
   POPUP INTELICAR (escopado)
   ========================= */
.intelicar-popup-b2b { max-width: 720px; margin: 0 auto; }
.intelicar-popup-card{
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  border: 1px solid rgba(0,0,0,.06);
}

.intelicar-popup-title{
  margin: 0 38px 8px 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
  color: #0f172a;
}

.intelicar-popup-text{
  margin: 0 38px 14px 0;
  color: rgba(15, 23, 42, .75);
  font-size: 14px;
  line-height: 1.45;
}

.intelicar-popup-form{ display: grid; gap: 10px; margin-top: 8px; }
.intelicar-popup-label span{
  display: block; font-size: 12px; font-weight: 700;
  color: rgba(15, 23, 42, .75); margin: 6px 0 6px;
}

.intelicar-popup-form input,
.intelicar-popup-form select{
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: #fff;
  color: #0f172a;
  outline: none;
}

.intelicar-popup-form input:focus,
.intelicar-popup-form select:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}

.intelicar-popup-cta{
  margin-top: 6px;
  height: 46px;
  border: 0;
  border-radius: 12px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(37,99,235,1), rgba(59,130,246,1));
}

.intelicar-popup-note{
  display: block;
  text-align: center;
  margin-top: 4px;
  color: rgba(15, 23, 42, .55);
  font-size: 12px;
}

/* Seu X */
.intelicar-popup-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: rgba(15, 23, 42, .75);
}

/* ✅ Remove o X padrão do Magnific (evita aparecer 2x) */
#popup-intelicar-b2b .mfp-close{ display: none !important; }

/* Ajuste mobile */
@media (max-width: 520px){
  .intelicar-popup-card{ padding: 18px 16px 14px; }
  .intelicar-popup-title{ font-size: 18px; }
}

/* =====================================================
   WHATSAPP FLOAT (avatar da atendente) - Intelicar
   HTML:
   <a class="wa-float" ...><img ...></a>
   <div class="wa-float-label">Fale com a Gabriela 🙂</div>
   ===================================================== */

.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 14px 34px rgba(2,6,23,.18);

  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}

.wa-float:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(2,6,23,.22);
  border-color: hsl(var(--primary) / 0.35);
}

.wa-float:active{ transform: translateY(0); }

.wa-float img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wa-float::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 2px hsl(var(--primary) / 0.10);
}

/* Label (opcional) */
.wa-float-label{
  position: fixed;
  right: 92px;
  bottom: 32px;
  z-index: 9999;
  padding: 8px 10px;
  border-radius: 12px;

  background: rgba(15,23,42,.92);
  color: rgba(255,255,255,.95);
  font-size: 13px;
  font-weight: 650;

  box-shadow: 0 14px 34px rgba(2,6,23,.22);
  border: 1px solid rgba(255,255,255,.10);

  max-width: 240px;
  line-height: 1.25;
}

/* Seta do balão */
.wa-float-label::after{
  content:"";
  position:absolute;
  right: -6px;
  bottom: 14px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: rgba(15,23,42,.92);
  border-right: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Mobile: reduz e esconde o label (fica só o avatar) */
@media (max-width: 760px){
  .wa-float{ width: 58px; height: 58px; right: 14px; bottom: 14px; }
  .wa-float-label{ display:none; }
}

/* Offset do header fixo (evita conteúdo “entrar” embaixo do header) */
body{ padding-top: 96px; }          /* ajuste fino */
@media (max-width: 760px){
  body{ padding-top: 88px; }        /* mobile costuma ser um pouco menor */
}

/* =====================================
   HEADER FIXED OFFSET (SOLUÇÃO LIMPA)
   ===================================== */

/* Altura real aproximada do header desktop */
body{
  padding-top: 110px;
}

/* Header menor no mobile */
@media (max-width: 768px){
  body{
    padding-top: 92px;
  }
}

/* ajuste apenas para mobile */
@media (max-width:768px){

  #planos .grid{
    grid-template-columns: 1fr;
  }

  #planos .glass-card{
    padding:22px;
  }

  #planos h3{
    font-size:20px;
  }

  #planos .text-2xl{
    font-size:22px;
  }

  #planos ul li{
    font-size:14px;
  }

}