* ------------------------------ */
/* RESET E TEMA GLOBAL            */
/* ------------------------------ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  height:100vh;overflow-x:hidden;background:#0d0d0d;color:#fff;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
/* util */
.hidden{display:none!important}

/* ------------------------------ */
/* FUNDO COM BLUR DINÂMICO        */
/* ------------------------------ */
.blur-background{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.blur-circle{position:absolute;border-radius:50%;filter:blur(120px);opacity:.4}
.circle1,.circle2,.circle3{animation:float-slow 40s ease-in-out infinite}
body.speedup .circle1,body.speedup .circle2,body.speedup .circle3{animation:float-fast 8s ease-in-out infinite}
.circle1{width:300px;height:300px;background:#fff;top:10%;left:20%}
.circle2{width:400px;height:400px;background:#007bff;top:50%;left:60%}
.circle3{width:250px;height:250px;background:#ff4d4d;top:70%;left:10%}
@keyframes float-slow{0%,100%{transform:translate(0,0)}25%{transform:translate(30px,-60px)}50%{transform:translate(-40px,-40px)}75%{transform:translate(50px,20px)}}
@keyframes float-fast{0%,100%{transform:translate(0,0)}25%{transform:translate(30px,-60px)}50%{transform:translate(-40px,-40px)}75%{transform:translate(50px,20px)}}

/* ------------------------------ */
/* HEADER                         */
/* ------------------------------ */
.navbar{
  position:fixed;top:0;width:100%;height:60px;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(0,0,0,.1);z-index:999;
  border-bottom:1px solid rgba(255,255,255,.05)
}
.logo a{font-weight:bold;font-size:1.2rem;letter-spacing:.5px;color:inherit;text-decoration:none}
.nav-links{display:flex;gap:2rem}
.nav-links a{font-weight:300;color:inherit;text-decoration:none;padding:.4rem 1rem;border-radius:100px;transition:.3s}
.nav-links a:hover{background:rgba(255,255,255,.1)}
.menu-toggle{display:none;background:none;border:none;font-size:1.8rem;color:inherit;cursor:pointer}
@media (max-width:768px){
  .nav-links{
    display:none;position:absolute;top:60px;right:0;background:rgba(0,0,0,.9);
    flex-direction:column;gap:1.2rem;padding:1.5rem 2rem;width:100%;
    border-top:1px solid rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
  }
  .nav-links.show{display:flex}
  .menu-toggle{display:block}
}

/* ------------------------------ */
/* INTRO                          */
/* ------------------------------ */
.intro{
  position:relative;z-index:2;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem
}
.intro h1{font-size:3rem;margin-bottom:1rem}
.intro p{font-size:1.2rem;margin-bottom:2rem;max-width:600px;opacity:.9}
.actions{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center}
.actions a,.actions button{
  background:transparent;border:1px solid currentColor;color:inherit;padding:.6rem 1.2rem;border-radius:999px;text-decoration:none;
  font-size:1rem;cursor:pointer;transition:.3s
}
.actions a:hover,.actions button:hover{background:currentColor;color:#fff}

/* ------------------------------ */
/* FOOTER                         */
/* ------------------------------ */
.site-footer{background:#0d0d0d;color:#fff;padding:60px 30px 30px;text-align:center;border-top:1px solid rgba(255,255,255,.05)}
.footer-top h3{font-size:1.6rem;margin-bottom:10px}
.footer-top p{font-size:1rem;opacity:.7;margin-bottom:20px;max-width:600px;margin-inline:auto}
.cta-footer{display:inline-block;border:1px solid currentColor;color:inherit;padding:10px 24px;font-weight:500;text-decoration:none;border-radius:50px;transition:.3s}
.cta-footer:hover{background:currentColor;color:#fff}
.footer-links{margin:30px 0 15px;display:flex;justify-content:center;flex-wrap:wrap;gap:20px}
.footer-links a{color:inherit;text-decoration:none;font-weight:400;transition:opacity .2s;opacity:.8}
.footer-links a:hover{opacity:1}
.footer-bottom{font-size:.9rem;opacity:.5}

/* ------------------------------ */
/* MODAL GENÉRICO                 */
/* ------------------------------ */
.modal{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);background:rgba(0,0,0,0);pointer-events:none;opacity:0;
  transition:backdrop-filter .3s ease,background .3s ease,opacity .3s ease
}
.modal.show,.modal:not(.hidden){
  pointer-events:auto;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(0,0,0,.4);opacity:1
}
.modal.hidden{display:none!important}
.modal-content{
  background:#111;color:#fff;width:90%;max-width:800px;border-radius:30px;padding:30px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);transform:translateY(20px);animation:modal-in .4s ease forwards
}
@keyframes modal-in{to{transform:translateY(0)}}
.modal-close{position:absolute;top:20px;right:25px;background:none;border:none;font-size:1.5rem;color:inherit;cursor:pointer}
.modal-title{font-size:1.9rem;margin-bottom:10px}
.modal-description{font-size:1rem;opacity:.85;line-height:1.6}
.modal-tags{list-style:none;display:flex;gap:10px;margin-top:20px;padding:0}
.modal-tags li{background:#fff;color:#000;padding:6px 14px;border-radius:30px;font-size:.85rem}

/* ------------------------------ */
/* MODAL PDF – Performance Apple  */
/* ------------------------------ */

/* ===== Variáveis de tamanho e tempos (ajuste aqui) ===== */
#pdf-modal{
  --icon-h: clamp(96px, 12vh, 120px);        /* altura da imagem interna */
  --icon-w: clamp(240px, 28vw, 360px);       /* largura da imagem interna */
  --icon-pad: 12px;                          /* espessura uniforme do “vidro” */
  --ease: cubic-bezier(.2,.8,.2,1);

  /* tempos da sequência (ícone → texto → pdf) */
  --t-icon: 1.8s;        /* duração da animação do ícone */
  --t-gap:  .35s;        /* respiro entre ícone e texto */
  --t-text-delay: calc(var(--t-icon) + var(--t-gap));
  --t-pdf-delay:  calc(var(--t-icon) + var(--t-gap) + .8s);
}

/* ===== Camadas básicas do modal ===== */
#pdf-modal{
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: flex-start; justify-content: center;
  padding: 88px 20px 40px;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0; transition: opacity .35s ease;
  overflow: hidden;
}
#pdf-modal.show{ display: flex; opacity: 1; }
#pdf-modal .modal-overlay{ width: 100%; display: flex; justify-content: center; }
#pdf-modal .modal-box{
  width: 100%; max-width: 980px;
  background: transparent; border: none; border-radius: 24px; box-shadow: none; overflow: visible;
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;

  /* reserva de espaço para não colidir com ícone+texto (que são fixed) */
  padding-top: calc(12vh + (var(--icon-h) + var(--icon-pad)*2) + 120px);
}

/* ===== Botão voltar ===== */
#voltar-pdf{
  position: fixed; top: 18px; right: 20px; z-index: 10020; display: none;
  padding: .6rem 1.2rem; font-size: .9rem; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#voltar-pdf.show{ display: inline-block; }
#voltar-pdf:hover{ background: rgba(255,255,255,.2); }

/* ===================== ÍCONE CAPSULADO (sem brilho e sem sobras) ===================== */
.floating-icon{
  position: fixed; left: 50%; top: 12vh; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--icon-pad);
  border-radius: 9999px;                    /* cápsula perfeita */
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 18px 60px rgba(32,161,255,.30);
  overflow: hidden;                         /* corta qualquer bleed do blur */
  z-index: 10010;
  opacity: 0;
  will-change: transform, opacity;
}
.floating-icon > img{
  display: block;
  inline-size: var(--icon-w);               /* width */
  block-size:  var(--icon-h);               /* height */
  object-fit: cover;
  border-radius: 9999px;                    /* laterais totalmente arredondadas */
}

/* mata qualquer brilho herdado do projeto antigo */
.floating-icon::before,
.floating-icon::after{ content: none !important; background: none !important; animation: none !important; }

/* Animação do ícone: surge grande lá embaixo e assenta no topo */
#pdf-modal.show .floating-icon{
  animation: icon-arrive var(--t-icon) var(--ease) .05s both;
}
@keyframes icon-arrive{
  0%   { transform: translate(-50%, 64vh) scale(2.00); opacity: 0; }
  35%  { opacity: 1; }
  65%  { transform: translate(-50%, -6px) scale(1.08); }
  100% { transform: translate(-50%, 0)    scale(1.00); }
}

/* ========= Flash gaussiano breve (na página, não no ícone) ========= */
#pdf-modal.show::after{
  content: ""; position: fixed; inset: 0; z-index: 10050; pointer-events: none;
  background: radial-gradient(42% 26% at 50% 30%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 65%);
  filter: blur(28px); opacity: 0;
  animation: page-flash 900ms ease-out .05s both;
}
@keyframes page-flash{ 0%{opacity:0} 22%{opacity:.85} 100%{opacity:0} }

/* ===================== TEXTO (sem fundo/blur) ===================== */
#project-intro-text{
  position: fixed;
  left: 50%;
  top: calc(12vh + (var(--icon-h) + var(--icon-pad)*2) + 20px); /* logo abaixo do ícone */
  transform: translateX(-50%);
  z-index: 10009;
  max-width: min(90vw, 860px);
  color: #fff; text-align: center;
  padding: 0; border: 0; background: none;    /* sem blur, sem caixa */
  opacity: 0;
  will-change: transform, opacity;
}
#project-intro-text h2{
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 700; letter-spacing: .2px; margin-bottom: 6px;
}
#project-intro-text p{
  font-size: clamp(.96rem, 2vw, 1.06rem);
  font-weight: 300; opacity: .92; line-height: 1.55;
}
#pdf-modal.show #project-intro-text{
  animation: text-in .55s var(--ease) var(--t-text-delay) both;
}
@keyframes text-in{
  from{ transform: translate(-50%, 8px); opacity: 0; }
  to  { transform: translate(-50%, 0);   opacity: 1; }
}

/* ===================== PDF (entra só depois do texto) ===================== */
.pdf-wrapper{
  position: relative; margin: 0 auto; width: 100%; max-width: 980px; height: 80vh;
  border-radius: 20px; overflow: hidden; background: #fff;

  opacity: 0; transform: translateY(14px);
  pointer-events: none;                     /* não clicável até aparecer */
  will-change: transform, opacity;
}
#pdf-frame{ width: 100%; height: 100%; border: none; display: block; }
.pdf-fade-bottom{
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.45)); pointer-events: none;
}

/* entrada do PDF após o texto */
#pdf-modal.show .pdf-wrapper{
  animation: pdf-in .6s var(--ease) var(--t-pdf-delay) both;
}
@keyframes pdf-in{ to{ opacity: 1; transform: translateY(0); } }

/* ao final (seu JS pode adicionar .unlock-scroll depois) */
#pdf-modal.stage-content .modal-box{
  background: #0f0f0f; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
#pdf-modal.stage-content .pdf-wrapper{ opacity: 1; transform: none; }
#pdf-modal.stage-content.unlock-scroll{ overflow-y: auto; }
#pdf-modal.stage-content #voltar-pdf{ display: inline-block; }

/* ===================== Responsivo ===================== */
@media (max-width: 960px){
  #pdf-modal .modal-box{ padding-top: calc(10vh + (var(--icon-h) + var(--icon-pad)*2) + 110px); }
  .pdf-wrapper{ height: 74vh; }
}
@media (max-width: 560px){
  #pdf-modal .modal-box{ padding-top: calc(9vh + (var(--icon-h) + var(--icon-pad)*2) + 100px); }
}
/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  #pdf-modal.show .floating-icon,
  #pdf-modal.show::after,
  #pdf-modal.show #project-intro-text,
  #pdf-modal.show .pdf-wrapper{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ------------------------------ */
/* PORTFÓLIO — ATUALIZADO         */
/* ------------------------------ */
.portfolio-section{
  position:relative; z-index:2;
  margin-top:-100px; padding:140px 2rem 100px;
  color:inherit; text-align:center;
}
.section-title{ font-size:2rem; margin-bottom:40px; font-weight:bold; }
.portfolio-columns{ display:flex; flex-wrap:wrap; gap:2.2rem; justify-content:center; }

/* Coluna: maior (largura/altura), scroll suave e clips corretos */
.portfolio-column{
  /* ↑ tamanho das colunas */
  flex:1;
  min-width:340px;            /* antes 280 */
  max-width:400px;            /* antes 320 */
  max-height:640px;           /* antes 520 */

  position:relative;
  overflow:hidden auto;       /* clip nos cantos + rolagem */
  scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;

  /* Safari-proof */
  mask-image:none !important;
  -webkit-mask-image:none !important;
  background-clip:padding-box;

  /* vidro/blur da “caixa” */
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  padding:1.5rem;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
  transition:transform .3s ease, background .3s ease;

  isolation:isolate;          /* garante pilha p/ ::after */
}
.portfolio-column::-webkit-scrollbar{ display:none; }
.portfolio-column:hover{ transform:translateY(-4px); background:rgba(255,255,255,.08); }

/* Tampa superior (anti-bleed) */
.portfolio-column::before{
  content:"";
  position:sticky; top:0; display:block; height:24px;
  margin:-1.5rem -1.5rem 0 -1.5rem;
  border-top-left-radius:20px; border-top-right-radius:20px;
  background:linear-gradient(to bottom, rgba(0,0,0,.85) 0%, rgba(0,0,0,.65) 60%, rgba(0,0,0,0) 100%);
  backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%);
  z-index:12; pointer-events:none;
}


/* Cabeçalho fixo com contexto próprio */
.portfolio-column>h3,
.portfolio-column .sticky-title{
  position:sticky; top:0; z-index:30;
  margin:0 -1.5rem 1rem -1.5rem; padding:14px 0; height:64px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%);
  border-radius:20px 20px 0 0;
  box-shadow:inset 0 -1px rgba(255,255,255,.08);
  border-bottom:none;
  font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#fff;
  transform:translateZ(0); contain:paint;
}
/* evita pulo no primeiro item */
.portfolio-column>h3+*,
.portfolio-column .sticky-title+*{ margin-top:.5rem; }

/* Cards estilo Apple */
.project-card{
  margin-bottom:1.2rem; border-radius:20px; overflow:hidden; cursor:pointer;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
  padding:12px; text-align:center;
}
.project-card:hover{ transform:translateY(-2px) scale(1.035); box-shadow:0 8px 24px rgba(0,0,0,.3); background:rgba(255,255,255,.055); }
.project-card img{ width:100%; display:block; border-radius:16px; transition:transform .3s ease; }
.project-title{
  margin-top:8px; font-size:.95rem; font-weight:400;
  font-family:"Helvetica Neue", Inter, system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  opacity:.85; text-align:center; letter-spacing:.2px;
}

/* ------------------------------ */
/* RESPONSIVO                     */
/* ------------------------------ */
@media (max-width:960px){
  .portfolio-columns{ flex-direction:column; align-items:center; }
  .portfolio-section{ margin-top:-80px; padding-top:120px; }
  .portfolio-column{ max-height:520px; } /* ↑ era 400 */
}

/* ===== logos (mantido) ===== */
.logos-grid{
  position:absolute; bottom:80px; left:50%; transform:translateX(-50%);
  display:grid; grid-template-columns:repeat(5,1fr); gap:20px 8px; justify-items:center; align-items:center;
  max-width:780px; width:100%; padding:0 20px; opacity:.8;
}
.logos-grid img{
  max-width:70px; max-height:30px; object-fit:contain; filter:brightness(0) invert(1);
  opacity:0; transform:translateY(20px); animation:fadeInUp 1.2s ease forwards; transition:transform .3s ease;
}
.logos-grid img:hover{ transform:scale(1.05); }
.logos-grid img:nth-child(1){animation-delay:0s}
.logos-grid img:nth-child(2){animation-delay:.1s}
.logos-grid img:nth-child(3){animation-delay:.2s}
.logos-grid img:nth-child(4){animation-delay:.3s}
.logos-grid img:nth-child(5){animation-delay:.4s}
.logos-grid img:nth-child(6){animation-delay:.5s}
.logos-grid img:nth-child(7){animation-delay:.6s}
.logos-grid img:nth-child(8){animation-delay:.7s}
.logos-grid img:nth-child(9){animation-delay:.8s}
.logos-grid img:nth-child(10){animation-delay:.9s}
@keyframes fadeInUp{ to{ opacity:1; transform:translateY(0); } }

@media (max-width:1024px){
  .logos-grid{ grid-template-columns:repeat(5,1fr); gap:16px 6px; bottom:60px; max-width:740px; }
  .logos-grid img{ max-width:64px; max-height:28px; }
  .actions{ gap:1rem; flex-direction:row; justify-content:center; flex-wrap:wrap; }
  .actions a,.actions button{ padding:.5rem 1.2rem; font-size:.95rem; }
}
@media (max-width:768px){
  .logos-grid{ grid-template-columns:repeat(5,1fr); gap:14px 5px; bottom:48px; max-width:680px; }
  .logos-grid img{ max-width:54px; max-height:22px; }
  .actions{ gap:.9rem; flex-direction:row; justify-content:center; flex-wrap:wrap; }
  .actions a,.actions button{ padding:.5rem 1rem; font-size:.9rem; }
  .intro h1{ font-size:2rem; }
  .intro p{ font-size:1rem; max-width:90%; }
}
@media (max-width:480px){
  .logos-grid{ grid-template-columns:repeat(5,1fr); gap:10px 4px; bottom:36px; max-width:92%; }
  .logos-grid img{ max-width:48px; max-height:20px; }
  .actions{ gap:.8rem; flex-direction:row; justify-content:center; flex-wrap:wrap; }
  .actions a,.actions button{ padding:.45rem .9rem; font-size:.88rem; }
  .intro{ padding-top:80px; }
  .intro h1{ font-size:1.8rem; }
  .intro p{ font-size:.95rem; max-width:95%; }
}

/* ===== HOTFIX SAFARI: faixa no topo com blur cinza, alinhada ao raio ===== */
.portfolio-column{
  --col-pad: 1.5rem;             /* TEM que bater com o padding lateral da coluna */
  isolation:isolate;
}


/* Cabeçalho sticky: cola no topo e é puxado visualmente pra cima */
.portfolio-column > h3,
.portfolio-column .sticky-title{
  position: sticky;
  top: 0;                         /* Safari gosta de top:0 */
  /* expande até as bordas internas da coluna */
  margin: 0 calc(var(--col-pad) * -1) 1rem calc(var(--col-pad) * -1);
  /* puxa pra cima exatamente o padding da coluna + 1px da borda */
  transform: translateY(calc(var(--col-pad) * -1 - 1px));
  will-change: transform;

  height: 112px;                  /* ajuste fino da altura da faixa */
  z-index: 60;
  display:flex; align-items:center; justify-content:center;

  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none; border: 0;

  font-size: 1rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: #fff;
}



/* ===== FIX DEFINITIVO: título cola no topo real da coluna + blur cinza ===== */

/* 1) tira o padding do topo da coluna (era 1.5rem) */
.portfolio-column{
  padding: 0 1.5rem 1.5rem 1.5rem !important; /* top 0, laterais e bottom mantidos */
  isolation: isolate;
}

/* 2) garante que nenhuma tampa antiga esteja ativa */
.portfolio-column::before,
.portfolio-column::after{ content: none !important; }

/* 3) título sticky encostando no topo da coluna, com largura até as bordas */
.portfolio-column > h3,
.portfolio-column .sticky-title{
  position: sticky;
  top: 0;                     /* agora top:0 é o topo REAL da coluna */
  z-index: 60;
  height: 112px;              /* ajuste fino da faixa */
  margin: 0 -1.5rem 1rem -1.5rem; /* encosta nas bordas arredondadas */
  display: flex; align-items: center; justify-content: center;

  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none; border: 0;

  font-size: 1rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: #fff;
}


/* 5) leve sombra na base da faixa para separar dos cards */
.portfolio-column > h3::after,
.portfolio-column .sticky-title::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:24px;
  background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,0));
  pointer-events:none;
}

/* ===== CAPA: blur constante + gradiente cosmético ===== */
.portfolio-column{
  padding: 0 1.5rem 1.5rem 1.5rem !important;
  isolation: isolate;
}
.portfolio-column::before,
.portfolio-column::after{ content:none !important; }

.portfolio-column > h3,
.portfolio-column .sticky-title{
  position: sticky;
  top: 0;
  z-index: 60;
  height: 112px;
  margin: 0 -1.5rem 1rem -1.5rem;
  display: flex; align-items: center; justify-content: center;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none; border: 0;

  font-size: 1rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: #fff;
}

/* 1) BLUR BASE (sempre presente em 100% da faixa) */
.portfolio-column > h3::before,
.portfolio-column .sticky-title::before{
  content: "";
  position: absolute; inset: 0;
  border-top-left-radius: 20px; border-top-right-radius: 20px;
  background: rgba(58,58,58,.18);               /* cinza leve constante */
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  pointer-events: none;
  z-index: -1;                                   /* atrás do texto, acima dos cards */
}

/* 2) GRADIENTE COSMÉTICO (escurece o topo, sem matar o blur) */
.portfolio-column > h3::after,
.portfolio-column .sticky-title::after{
  content: "";
  position: absolute; inset: 0;
  border-top-left-radius: 20px; border-top-right-radius: 20px;
  background: linear-gradient(
    to bottom,
    rgba(58,58,58,.42) 0%,
    rgba(58,58,58,.28) 60%,
    rgba(58,58,58,.12) 85%,
    rgba(58,58,58,0) 100%
  );
  pointer-events: none;
}

:root{ --ease-pin: cubic-bezier(.2,.8,.2,1); }

/* Container que “pina” a intro por 100vh e revela o segundo frame */
.pin-2{ position: relative; height: 200vh; }

/* Ambos ocupam 100vh e ficam “grudados” no topo */
.pin-2 .frame-1,
.pin-2 .frame-2{
  position: sticky;
  top: 0;
  height: 100vh;
}

/* Frame 1 por cima; Frame 2 começa lá embaixo, invisível */
.pin-2 .frame-1{ z-index: 3; }
.pin-2 .frame-2{
  z-index: 2;
  transform: translateY(24vh);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform .8s var(--ease-pin), opacity .8s var(--ease-pin);
}

/* Quando habilitar a classe (via JS), o Frame 2 sobe e o 1 desvanece */
.pin-2.pin-show2 .frame-2{
  transform: translateY(0);
  opacity: 1;
}
.pin-2.pin-show2 .frame-1{
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease-pin) .35s;
}

/* Ajuste fino: dentro do pin, neutraliza o “puxão” do margin-top negativo */
.pin-2 .portfolio-section{
  margin-top: 0 !important;
  padding-top: 140px; /* mantém sua folga original */
}

/* Mobile: sobe um pouco menos para ficar mais suave */
@media (max-width:768px){
  .pin-2 .frame-2{ transform: translateY(16vh); }
}

/* ===================== PIN 2: frame fixo + reveal ===================== */
:root{
  --ease-pin: cubic-bezier(.2,.8,.2,1);
  --nav-h: 60px; /* ajuste conforme sua navbar real */
}

/* ---- Container do pin ---- */
.pin-2{
  position: relative;
  min-height: 220vh;                  /* percurso do reveal */
  /* variáveis controladas por JS/estados */
  --f1-alpha: 1;                      /* opacidade do conteúdo do Frame 1 */
  --f1-mask: 0;                       /* “tinta” escura do Frame 1 (0..1) */
  --f2-alpha: 0;                      /* visibilidade base do Frame 2 (0..1) */
  --lock-alpha: 0;                    /* progresso do lock do F2 durante chat (0..1) */
}

/* viewport “presa” sob a navbar */
.pin-2 .pin-viewport{
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
}

/* ===== Frames ocupam toda a viewport do pin ===== */
.pin-2 .frame{
  position: absolute;
  inset: 0;
  display: block;
  will-change: transform, opacity, filter;
}

/* ---------------- FRAME 1 (fixo) ---------------- */
.pin-2 .frame-1{
  z-index: 1;                         /* por baixo do frame-2 */
  position: relative;
  isolation: isolate;                 /* para o ::after não vazar */
  /* F1 é controlado por opacidade — JS pode escrever inline; var é fallback */
  opacity: var(--f1-alpha);
  filter: none;
  transform: none;
  transition:
    opacity .80s var(--ease-pin),
    filter .45s var(--ease-pin),
    transform .45s var(--ease-pin);
}

/* HARD reset: voltou ao Frame 1? garanta zero blur/scale */
.pin-2:not(.pin-show2) .frame-1{ filter: none !important; transform: none !important; }

/* “tinta” SUAVE SÓ no frame-1 (não lava o frame-2) */
.pin-2 .frame-1::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index: 2;                         /* acima do conteúdo do frame-1 */
  opacity: var(--f1-mask);            /* 0..1 */
  background: linear-gradient(
    to bottom,
    rgba(22,22,22,.25) 0%,
    rgba(22,22,22,.16) 36%,
    rgba(22,22,22,0) 72%
  );
  transition: opacity .90s var(--ease-pin);
}

/* Enquanto o F2 começa a entrar, leve profundidade ao F1 (sem blur agressivo) */
.pin-2.pin-show2{
  --f1-mask: .40;                     /* preto presente mas discreto */
  --f2-alpha: 1;                      /* F2 agora pode aparecer */
}
.pin-2.pin-show2 .frame-1{
  transform: scale(.992);             /* sutileza de “afastar” */
  filter: none;                       /* (opcional) poderia ser blur(4px) */
}

/* Quando F2 ocupa quase tudo OU já passou do pin, F1 zera por alpha */
.pin-2.pin-full,
.pin-2.pin-after{
  --f1-alpha: 0;
  --f1-mask: 0;
}
/* Mantém transição de volta quando o usuário retorna ao F1 */
.pin-2.pin-full .frame-1,
.pin-2.pin-after .frame-1{
  pointer-events: none;               /* evita clique; sem visibility:hidden pra permitir fade de volta */
}

/* ---------------- FRAME 2 (reveal) ---------------- */
.pin-2 .frame-2{
  z-index: 3;                          /* acima do frame-1 e do ::after dele */
  /* A opacidade do F2 considera o lock do chat:  α2_base * (1 - lock) */
  opacity: calc(var(--f2-alpha) * (1 - var(--lock-alpha)));
  transform: translateY(8vh);
  filter: blur(18px);
  transition:
    opacity .70s var(--ease-pin),
    transform .70s var(--ease-pin),
    filter .70s var(--ease-pin);
}

/* Halo/névoa ATRÁS do conteúdo do frame-2 (não afeta imagens) */
.pin-2 .frame-2::before{
  content:"";
  position:absolute; inset:0;
  z-index: 0;                          /* atrás dos filhos do frame-2 */
  pointer-events:none;
  /* halo também respeita o lock para sumir suavemente junto do F2 */
  opacity: calc(var(--f2-alpha) * (1 - var(--lock-alpha)));
  filter: blur(14px);
  background: radial-gradient(120% 80% at 50% 0%,
              rgba(30,30,30,.30) 0%,
              rgba(30,30,30,.14) 35%,
              rgba(30,30,30,0) 70%);
  transition: opacity .90s var(--ease-pin);
}

/* filhos do frame-2 sempre acima do halo */
.pin-2 .frame-2 > *{ position: relative; z-index: 1; }

/* Garantias de nitidez */
.pin-2 .frame-2 .project-card{ z-index: 2; }
.pin-2 .frame-2 .project-card img{
  z-index: 3;
  mix-blend-mode: normal;
  opacity: 1;
}

/* Estado revelado: frame-2 sobe e fica nítido; halo aparece (opacidade via var) */
.pin-2.pin-show2 .frame-2{
  transform: translateY(0);
  filter: blur(0);
}

/* ===== Remoções importantes ===== (evita overlay global lavando tudo) */
.pin-2 .pin-viewport::after{ content:none !important; display:none !important; }

/* ===================== LOCK DO FRAME 2 (duas opções) ===================== */
/* A) OPÇÃO 1 (compatível com JS de overlay antigo): elementos gerados via JS */
.f2-overlay{
  position: fixed;
  left: 0; right: 0;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  z-index: 2;                 /* atrás do chat */
  pointer-events: none;
  opacity: 1;
  will-change: opacity, transform;
  transition: opacity .55s var(--ease-pin);
}
.f2-overlay .overlay-clone{
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: none !important;
  filter: none !important;
}

/* B) OPÇÃO 2 (recomendada — sem overlay, fixando o próprio F2) */
.pin-2.pin-lock2 .frame-2{
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  height: calc(100vh - var(--nav-h));
  transform: none !important;
  filter: none !important;
  z-index: 2;                 /* atrás do chat */
  pointer-events: none;       /* não captura cliques */
}


/* Garante que o conteúdo do chat esteja acima do F2 (qualquer opção) */
#frame-3, .frame-3, #diagnostico, #chat, #chatbot, .chat-section{
  position: relative; z-index: 10;
}

/* Depois do pin inteiro, mantenha F1 0% sempre (garantia) */
.pin-2.pin-after .frame-1{ opacity: 0 !important; }

/* ===================== PREFERS-REDUCED-MOTION ===================== */
@media (prefers-reduced-motion: reduce){
  .pin-2 .frame-1,
  .pin-2 .frame-1::after,
  .pin-2 .frame-2,
  .pin-2 .frame-2::before,
  .pin-2 .frame-2::after,
  .f2-overlay{ transition-duration: .01ms !important; }
}

/* ===== Modal do Projeto — Hero vertical (bottom→top) ===== */
.project-modal{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; overflow: hidden;   /* scroll bloqueado por padrão */
  z-index: 9999;
}
.project-modal.hidden{ display: none; }
.project-modal.unlock-scroll{ overflow: auto; } /* liberado no fim da animação */
.project-modal .modal-box{
  position: relative; margin: 0 auto;
  padding-top: var(--nav-h,60px);
  min-height: 100%;
  width: 100%;
}

/* ===== HERO (blur preservado) ===== */
.hero-wrap{
  position: relative;
  width: 100%;
  height: calc(100vh - var(--nav-h,60px));
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.hero-art{
  width: min(86vw, 1120px);
  aspect-ratio: 16 / 9;              /* 1920x1080 */
  position: relative;
  border-radius: 22px;
  transform-origin: center top;
  opacity: 0;
}
.hero-art .hero-blur,
.hero-art .hero-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
}
.hero-art .hero-blur{
  filter: blur(18px) saturate(1.06);
  transform: scale(1.08);
  opacity: .35;                      /* mantém aquele “glow” do hero */
}
.hero-art .hero-img{
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
}

/* ===== TEXTO abaixo do hero — SEM placa/fundo/blur ===== */
#project-intro-text{
  width: min(86vw, 1120px);
  margin: 22px auto 0;
  text-align: center;
  color: #fff;

  /* limpa qualquer “vidro”/placa */
  padding: 0;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;

  /* animação já existente */
  opacity: 0; 
  transform: translateY(18px);
  transition: opacity .9s var(--ease-pin), transform .9s var(--ease-pin);

  position: relative;
  z-index: 3;  /* acima do hero; não cria placa */
}
#project-intro-text::before,
#project-intro-text::after{ content: none !important; }  /* mata resquícios */
.stage-text #project-intro-text{ opacity: 1; transform: translateY(0); }

/* Animação: surge de baixo (maior) e assenta no topo */
@keyframes heroIn {
  0%   { transform: translateY(55vh) scale(1.35); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.stage-hero .hero-art{ animation: heroIn 1.25s var(--ease-pin) forwards; }

/* ===== TEXTOS (headline + sub) — fade-up lento depois do hero */
#project-intro-text{
  width: min(86vw, 1120px);
  margin: 22px auto 0;
  text-align: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity .9s var(--ease-pin), transform .9s var(--ease-pin);
}
.stage-text #project-intro-text{ opacity: 1; transform: translateY(0); }

/* ===== PDF — só aparece depois do texto; fica abaixo deles */
#pdf-frame{
  display: block;
  width: min(86vw, 1120px);
  height: calc(100vh - var(--nav-h,60px) - 160px);
  margin: 28px auto 80px;
  background: #0b0b0b;
  border: 0; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.40);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease-pin), transform .5s var(--ease-pin);
}
.stage-content #pdf-frame{ opacity: 1; transform: translateY(0); }

/* Botão voltar (se houver) */
#voltar-pdf{
  position: sticky; top: calc(var(--nav-h,60px) + 12px);
  margin-left: min(7vw, 56px);
  z-index: 2;
}

/* Acessibilidade: reduz animações */
@media (prefers-reduced-motion: reduce){
  .stage-hero .hero-art{ animation-duration: .01ms !important; }
  #project-intro-text, #pdf-frame{ transition-duration: .01ms !important; }
}

/* ================= PATCH #1 — MODAL STATE (show/hide) ================= */

/* Base: elemento pode existir no DOM sem piscar (fica invisível) */
.project-modal{
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease-pin), visibility .28s var(--ease-pin);
}

/* Quando o JS chama show(): adicionar .show já basta */
.project-modal.show{
  display: flex;             /* mantém seu layout flex */
  opacity: 1;
  visibility: visible;
}

/* Alias para o "hero" entrar assim que .show aparecer
   (funciona mesmo que você não use mais .stage-hero) */
.stage-hero .hero-art,
.project-modal.show .hero-art{
  animation: heroIn 1.25s var(--ease-pin) forwards;
}

/* Quando o JS marcar .stage-text e .stage-content,
   seus seletores atuais já dão conta (mantidos): 
   .stage-text #project-intro-text { opacity:1; transform:none; }
   .stage-content #pdf-frame { opacity:1; transform:none; }
*/

/* Oculta suavemente o hero/headline quando o modal rola */
.project-modal.conceal-intro .hero-wrap{
  opacity: .0;
  transform: translateY(-6px) scale(.985);
  transition: opacity .25s var(--ease-pin), transform .25s var(--ease-pin);
}
.project-modal.conceal-intro #project-intro-text{
  opacity: 0;
  transform: translateY(-8px);
}

/* Se o elemento começa com .hidden no HTML, continua valendo:
   .project-modal.hidden { display:none; }  — permanece no seu CSS */

/* ============== PATCH #2 — PIN-2 CLICK FIX (F1 não intercepta) ============== */

/* Ordem de pilha inequívoca */
.pin-2 .frame-1{ z-index: 1; }
.pin-2 .frame-2{ z-index: 3; }

/* Quando o F2 já está "revelado", o F1 não pode capturar cliques */
.pin-2.pin-show2 .frame-1{ pointer-events: none; }
/* Voltou para cima do pin? Reabilita o F1 */
.pin-2:not(.pin-show2) .frame-1{ pointer-events: auto; }

/* Garantia de clique direto nos cards/imagens do F2 */
.pin-2 .frame-2 .project-card{ position: relative; z-index: 3; }
.pin-2 .frame-2 .project-card img{ position: relative; z-index: 4; }

/* Se você estiver usando a OPÇÃO B (pin-lock2) para “prender” o F2 durante o chat,
   o F2 fica sem clique enquanto travado — esperado. */
.pin-2.pin-lock2 .frame-2{ pointer-events: none; }

/* ============== PATCH #3 — SUAVIDADE DO REVEAL F1→F2 (qualidade de vida) ============== */

/* Ajuda a evitar "lavada" global por sobreposição antiga */
.pin-2 .pin-viewport::after{ content:none !important; display:none !important; }

/* Mantém o F1 totalmente zerado após passar do pin (como já estava) */
.pin-2.pin-after .frame-1{ opacity: 0 !important; }

/* ===========================================================
   PATCH — PDF logo abaixo das pílulas (colocar no FINAL)
   =========================================================== */

/* 1) Ajustes de gap (você pode mexer só nesses valores) */
#pdf-modal{
  --gap-subtitle-tags: 16px;  /* distância do texto para as pílulas */
  --after-tags-gap: 8px;      /* distância das pílulas até o PDF */
  --pdf-lift: -80px;          /* sobe tudo um pouco (use -64, -96, -120...) */
}

/* 2) Força o cálculo curto: PDF começa imediatamente após as pílulas */
#pdf-modal .pdf-wrapper{
  margin-top: calc(
    var(--panel-top) +
    var(--intro-h) +
    var(--gap-subtitle-tags, 16px) +
    var(--tags-h) +
    8px +            /* folga mínima abaixo das pílulas */
    var(--pdf-lift)  /* “lift” extra para subir se ainda ficar baixo */
  ) !important;
}

/* 3) Se seu modal usa o iframe direto (sem .pdf-wrapper), cobre também */
#pdf-modal #pdf-frame{
  margin: 12px auto 64px !important;  /* encosta em cima, mantém respiro embaixo */
  display: block !important;
}

/* 4) (Opcional) algumas versões reservam espaço demais no topo do painel.
      Se ainda assim ficar baixo, reduza esse padding-top do modal-box. */
#pdf-modal .modal-box{
  padding-top: calc(12vh + (var(--icon-h, 96px) + var(--icon-pad, 12px)*2) + 56px) !important;
}

/* 5) Se você estiver usando o modal novo (.project-modal), aplica o mesmo raciocínio */
.project-modal.stage-content #pdf-frame{
  margin: 12px auto 56px !important;
}

/* ===== Material Symbols ajustes (peso/opsz) ===== */
.material-symbols-rounded{
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
  line-height: 1; display:inline-block; vertical-align: middle;
}

/* ===========================================================
   CHATBOT — Apple-like UI (embutido + flutuante)
   =========================================================== */

:root{
  --chat-blue: #0f3efa;               /* Azul da marca */
  --brand-green: #17e30d;             /* Verde do preço/CTA */
  --chat-bg: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.10);
  --glass-line: rgba(255,255,255,.08);
  --bot-bg: #ffffff;
  --bot-fg: #0c0c0c;
  --user-bg: #0f3efa;
  --user-fg: #ffffff;
  --radius: 20px;
  --msg-radius: 18px;
  --shadow-1: 0 12px 40px rgba(0,0,0,.25);
}

/* utils */
.hidden{ display:none !important; }

/* Evita fallback de Material Symbols virarem texto (ex.: “autorenew”) */
.material-symbols-rounded{ display:none !important; }

/* Links dentro das mensagens */
.chat-messages a{
  color: var(--chat-blue); text-decoration: none; font-weight: 700;
}
.chat-messages a:hover{ text-decoration: underline; }

/* ===========================================================
   CONTAINERS
   =========================================================== */

#frame-3.chatbot-frame,
#chatbot-frame{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 20px;
}

.chatbot,
.chatbot-frame-container{
  max-width: 960px; margin: 0 auto;
  background: var(--chat-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

/* Cabeçalho do cartão */
.chat-header{
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 18px;
  background: rgba(20,20,20,.55);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid var(--glass-line);
}

/* Botão Reiniciar */
#chat-reset{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  background: var(--chat-blue); color: #fff; border: 0;
  border-radius: 999px; font-weight: 800; letter-spacing: .2px;
  box-shadow: 0 10px 24px rgba(15,62,250,.28), inset 0 0 0 1px rgba(255,255,255,.14);
  cursor: pointer; transition: transform .12s ease, filter .12s ease;
}
#chat-reset:hover{ transform: translateY(-1px); filter: brightness(1.03); }

/* Bloco de headline/subheadline (opcional) */
.chat-hero{
  padding: 18px 18px 6px;
  border-bottom: 1px solid var(--glass-line);
  background: transparent;
  text-align: center;
}
.chat-hero h2{
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  font-weight: 800; letter-spacing:.2px; margin: 0 0 6px;
}
.chat-hero p{
  margin: 0 0 4px;
  color: rgba(255,255,255,.75);
  font-size: .98rem;
}

/* Área de mensagens */
.chat-messages{
  height: min(54vh, 520px);
  overflow: auto;
  padding: 16px 14px 10px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
  scroll-behavior: smooth;
  background: transparent;
}
.chat-messages::-webkit-scrollbar{ width: 8px; }
.chat-messages::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.22); border-radius: 999px; }

/* ===========================================================
   BALÕES DE FALA
   =========================================================== */

.msg,
.chat-message{
  position: relative;
  max-width: 72%;
  padding: 12px 14px; margin: 10px 0;
  border-radius: var(--msg-radius);
  line-height: 1.45; font-size: .98rem;
  word-wrap: break-word;
  animation: bubble-in .45s cubic-bezier(.2,.8,.2,1) both;
}

/* Bot (esquerda) — branco puro + cauda */
.msg.bot,
.chat-message.bot{
  margin-right: auto;
  color: var(--bot-fg);
  background: var(--bot-bg);
  border: 1px solid rgba(0,0,0,.06);
}
.msg.bot::after,
.chat-message.bot::after{
  content:""; position:absolute; left:-4px; bottom:8px;
  width:12px; height:12px; background: var(--bot-bg);
  transform: rotate(45deg); border-radius: 2px;
  box-shadow: -1px 1px 0 rgba(0,0,0,.06);
}

/* Emoji deve aparecer DENTRO do balão (sem pseudo externo) */
.chat-messages .msg.bot:first-child::before,
.msg.bot.welcome::before{ content:none !important; }

/* Usuário (direita) — azul da marca + cauda */
.msg.user,
.chat-message.user{
  margin-left: auto; color: var(--user-fg);
  background: var(--user-bg);
  border: 1px solid rgba(255,255,255,.18);
}
.msg.user::after,
.chat-message.user::after{
  content:""; position:absolute; right:-4px; bottom:8px;
  width:12px; height:12px; background: var(--user-bg);
  transform: rotate(45deg); border-radius: 2px;
}

/* Animação de entrada */
@keyframes bubble-in{
  from{ opacity:0; transform: translateY(6px) scale(.98); }
  to  { opacity:1; transform: translateY(0)   scale(1); }
}

/* “Digitando…” */
.typing{ display:inline-flex; gap:6px; align-items:center; }
.typing .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .6;
  animation: blink 1.2s infinite ease-in-out;
}
.typing .dot:nth-child(2){ animation-delay: .15s; }
.typing .dot:nth-child(3){ animation-delay: .30s; }
@keyframes blink{ 0%,80%,100%{ transform:translateY(0); opacity:.4; } 40%{ transform:translateY(-2px); opacity:1; } }

/* Oculta títulos legados */
.msg.section-title{ display:none !important; }

/* Lista de entregáveis dentro do balão do bot */
.chat-messages .entregaveis-list{
  margin:.5rem 0 0 0;
  padding:0;
}
.chat-messages .entregaveis-list li{
  list-style:none;
  margin:8px 0;
  padding-left:26px;
  line-height:1.45;
  position:relative;
}
.chat-messages .entregaveis-list li::before{
  content:"";
  position:absolute; left:0; top:.35em;
  width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #17e30d, #0f3efa);
  box-shadow: 0 0 0 2px rgba(255,255,255,.14),
              0 6px 16px rgba(15,62,250,.28);
}

/* (opcional) se quiser versão numerada: use .entregaveis-list--num */
.chat-messages .entregaveis-list--num{
  counter-reset: it;
}
.chat-messages .entregaveis-list--num li{
  padding-left:32px;
}
.chat-messages .entregaveis-list--num li::before{
  counter-increment: it;
  content: counter(it) ".";
  width:auto; height:auto; border-radius:6px;
  background: transparent; color:#0f3efa; font-weight:900;
  left:0; top:0;
  box-shadow:none;
}

/* ===========================================================
   CHIPS / OPCÕES
   =========================================================== */

.chip-row,
.quick-replies{
  display:flex; flex-wrap:wrap; gap:10px; margin: 8px 0 2px; padding: 0;
}

.chat-messages .msg.bot + .chip-row,
.chat-messages .msg.bot + .quick-replies{
  margin-top: 6px;
  margin-left: 0;
  margin-right: auto;
  max-width: 76%;
}

#quickReplies{ position: relative; top: -10px; margin-bottom: 6px; }

.chip,
.quick-replies .chip{
  padding: 10px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); font-weight: 600;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display:inline-flex; align-items:center; gap:8px;
}
.chip svg{ flex:0 0 auto; }
.chip.primary,
.quick-replies .chip.primary{
  background: var(--chat-blue); color:#fff;
  box-shadow: 0 6px 18px rgba(15,111,255,.35), inset 0 0 0 1px rgba(255,255,255,.08);
}
.chip.secondary{ background: rgba(255,255,255,.12); color:#fff; }
.chip.ghost{ background: rgba(255,255,255,.06); color:#fff; }
.chip:focus-visible{ outline: 2px solid rgba(15,62,250,.5); outline-offset: 2px; }

/* Link-botão inline (mensagens) */
.btn-link{
  display:inline-flex; align-items:center; gap:8px;
  font-weight: 800; letter-spacing: .2px; text-decoration: none;
  color: var(--chat-blue);
}
.btn-link svg{ flex:0 0 auto; }

/* ===========================================================
   INPUT / RODAPÉ DO CHAT
   =========================================================== */

.chat-input,
.chat-input-area{
  display:flex; gap:10px; align-items:center;
  padding:12px; border-top:1px solid var(--glass-line);
  background: rgba(20,20,20,.45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.chat-input input,
.chat-input-area input{
  flex:1; height:44px; padding:0 14px;
  color:#fff; background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16); border-radius: 14px;
  outline:none; transition: border-color .2s ease, background .2s ease;
}
.chat-input input::placeholder,
.chat-input-area input::placeholder{ color: rgba(255,255,255,.55); }
.chat-input input:focus,
.chat-input-area input:focus{
  border-color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.10);
}

/* Mantém visual ok mesmo se “disabled” for usado para travar input */
.chat-input input:disabled,
.chat-input-area input:disabled{
  background: rgba(255,255,255,.06);
  color:#fff; border-color: rgba(255,255,255,.16);
  cursor:text; opacity: 1;
}

.chat-input button,
.chat-input-area .icon-btn,
.chat-input-area button{
  height:44px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--chat-blue);
  color:#fff; border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 18px rgba(15,111,255,.35), inset 0 0 0 1px rgba(255,255,255,.14);
  padding: 0 16px; font-weight: 800; letter-spacing: .2px; cursor: pointer;
  transition: transform .12s ease, filter .12s ease, box-shadow .2s ease;
}
.chat-input button:hover,
.chat-input-area button:hover{ transform: translateY(-1px); filter: brightness(1.02); }

/* ===========================================================
   PRICING / CTAs — PRO
   Fundo glass escuro + glow, preço com brilho (sheen),
   PIX + bandeiras + "até 18x" + badges de confiança (top-right)
   =========================================================== */

:root{
  --chat-blue:   #0f3efa;
  --brand-green: #17e30d;
  --pricing-ink: rgba(255,255,255,.12);
  --pricing-line: rgba(255,255,255,.14);
  --pricing-glow: 0 24px 72px rgba(15,62,250,.16), 0 20px 64px rgba(0,0,0,.35);
}

/* Balão do bot específico de pricing (container) */
.msg.bot.pricing{
  position: relative;
  background: rgba(17,17,19,.92);
  color: #fff;
  border: 1px solid var(--pricing-ink);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--pricing-glow), inset 0 0 0 1px rgba(255,255,255,.04);
  padding: 0; /* o cartão interno controla o padding */
}

/* Glow suave (radiais) no fundo */
.msg.bot.pricing::before{
  content:"";
  position:absolute; inset:-10%;
  background:
    radial-gradient(1200px 320px at -10% 0%, rgba(15,62,250,.24), transparent 60%),
    radial-gradient(900px 260px at 110% 20%, rgba(23,227,13,.18), transparent 60%),
    radial-gradient(700px 220px at 30% 110%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none;
  filter: blur(0.2px);
}

/* ===== Badges de confiança (canto superior direito) ===== */
.trust-badges{
  position: absolute; right: 12px; top: 10px; z-index: 2;
  display: flex; gap: 8px; align-items: center;
  pointer-events: none; /* decorativo; não bloqueia clique no chat */
}
.trust-badge{
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.20);
  font-weight: 800; letter-spacing: .2px; font-size: .78rem; color:#fff;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  white-space: nowrap;
}
.trust-badge::before{
  content:""; width: 14px; height: 14px; border-radius: 4px;
  background: linear-gradient(135deg,#00d19a,#00ffa7);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.trust-badge.lock::before{
  /* cadeado simples */
  mask: radial-gradient(circle at 50% 25%, transparent 30%, #000 31%) top/100% 70% no-repeat,
        linear-gradient(#000 0 0) bottom/100% 40% no-repeat;
  -webkit-mask: radial-gradient(circle at 50% 25%, transparent 30%, #000 31%) top/100% 70% no-repeat,
                 linear-gradient(#000 0 0) bottom/100% 40% no-repeat;
  background: linear-gradient(135deg,#00ffa7,#00d19a);
}
.trust-badge.ssl::before{
  /* chave */
  mask: radial-gradient(circle 3px at 35% 50%, #000 98%, transparent 100%) left/70% 70% no-repeat,
        linear-gradient(#000 0 0) right/45% 30% no-repeat;
  -webkit-mask: radial-gradient(circle 3px at 35% 50%, #000 98%, transparent 100%) left/70% 70% no-repeat,
                linear-gradient(#000 0 0) right/45% 30% no-repeat;
  background: linear-gradient(135deg,#8ec5ff,#b1e0ff);
}
.trust-badge.shield::before{
  /* escudo */
  mask: radial-gradient(120% 90% at 50% -10%, #000 72%, transparent 73%) top/100% 70% no-repeat,
        linear-gradient(#000 0 0) bottom/75% 45% no-repeat;
  -webkit-mask: radial-gradient(120% 90% at 50% -10%, #000 72%, transparent 73%) top/100% 70% no-repeat,
                linear-gradient(#000 0 0) bottom/75% 45% no-repeat;
  background: linear-gradient(135deg,#ffd36b,#ffb52e);
}

/* Cartão interno de pricing */
.pricing-card{
  position: relative; z-index: 1;
  display: grid; place-items: center;
  gap: 12px; text-align: center;
  padding: 22px 18px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Título / subtítulo */
.pricing-title{
  font-size: 1.08rem; font-weight: 900; letter-spacing:.2px;
  margin: 0; color:#fff;
}
.pricing-sub{
  margin: 0; font-size: .95rem; color: rgba(255,255,255,.85);
}

/* Valor com pílula + brilho (sheen) */
.pricing-value{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--brand-green);
  color: #031b06;
  font-size: 2.05rem; font-weight: 900; line-height: 1.1;
  letter-spacing: .2px;
  box-shadow: 0 18px 42px rgba(23,227,13,.26), inset 0 0 0 1px rgba(0,0,0,.06);
  overflow: hidden;
}
.pricing-value::after{
  /* brilho correndo */
  content:"";
  position:absolute; inset:-40%;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,0) 20%,
      rgba(255,255,255,.42) 50%,
      rgba(255,255,255,0) 80%);
  transform: translateX(-60%) rotate(6deg);
  animation: sheen-run 2.4s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes sheen-run{
  0%   { transform: translateX(-60%) rotate(6deg); opacity:.7; }
  45%  { transform: translateX(60%)  rotate(6deg); opacity:.9; }
  100% { transform: translateX(60%)  rotate(6deg); opacity:0; }
}

/* Nota abaixo do preço */
.pricing-note{
  opacity: .9; font-size: .94rem; letter-spacing:.1px;
}

/* Linha de aceitações: PIX + bandeiras + até 18x */
.pricing-accept{
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: center;
  margin-top: 2px;
}

/* Badge PIX */
.pix-badge{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(23,227,13,.18);
  color:#eaffea; border:1px solid rgba(23,227,13,.35);
  font-weight: 800; letter-spacing:.2px; font-size: .9rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.pix-badge::before{
  content:""; width: 14px; height: 14px; border-radius: 3px;
  background: var(--brand-green);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
  transform: rotate(45deg);
}

/* Badge "até 18x" */
.installments-badge{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,.10);
  color:#fff; border:1px solid var(--pricing-line);
  font-weight: 800; letter-spacing:.2px; font-size: .9rem;
}
.installments-badge::before{
  content:"18×"; font-weight: 900; background: #fff; color:#111;
  border-radius: 8px; padding: 2px 6px; line-height: 1;
}

/* Bandeiras (pílulas) */
.card-flags{
  display: inline-flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: center;
}
.card-flag{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; min-width: 58px; padding: 0 8px;
  border-radius: 8px; font-size: .78rem; font-weight: 900;
  color:#fff; letter-spacing:.2px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.18);
  text-transform: uppercase;
  overflow: hidden;
}

/* Temas por bandeira (cores oficiais aproximadas) */
.card-flag.visa,        .card-flag[data-flag="visa"]        { background: linear-gradient(135deg,#1434cb,#284bff); }
.card-flag.mastercard,  .card-flag[data-flag="mastercard"]  { background: linear-gradient(135deg,#ea001b,#ff8f00); }
.card-flag.elo,         .card-flag[data-flag="elo"]         { background: linear-gradient(135deg,#222,#444); }
.card-flag.amex,        .card-flag[data-flag="amex"]        { background: linear-gradient(135deg,#0077a6,#00a6c9); }
.card-flag.hipercard,   .card-flag[data-flag="hipercard"]   { background: linear-gradient(135deg,#b00020,#e53935); }
.card-flag.diners,      .card-flag[data-flag="diners"]      { background: linear-gradient(135deg,#1b3b6f,#2b6cb0); }

/* Ícones simplificados dentro das bandeiras (pseudo) */
.card-flag[data-flag="mastercard"]::before{
  content:""; position:absolute; left:10px; width:28px; height:28px;
  background:
    radial-gradient(circle 12px at 40% 50%, #ea001b 98%, transparent 100%),
    radial-gradient(circle 12px at 60% 50%, #ff8f00 98%, transparent 100%);
  opacity:.95; filter: drop-shadow(0 0 2px rgba(0,0,0,.25));
}
.card-flag[data-flag="visa"]::before{
  content:"VISA"; position:relative; z-index:1; font-weight:900; letter-spacing:.8px;
}
.card-flag[data-flag="amex"]::before{
  content:"AMEX"; position:relative; z-index:1; font-weight:900; letter-spacing:.8px;
}
.card-flag[data-flag="elo"]::before{
  content:"elo"; position:relative; z-index:1; font-weight:900; letter-spacing:.6px; text-transform:none;
}
.card-flag[data-flag="hipercard"]::before{
  content:"Hipercard"; position:relative; z-index:1; font-weight:900; letter-spacing:.4px;
}
.card-flag[data-flag="diners"]::before{
  content:"Diners"; position:relative; z-index:1; font-weight:900; letter-spacing:.4px;
}

/* Ações (botões) */
.pricing-actions{
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 6px;
}
.btn-pay, .btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 11px 16px; border-radius: 999px; text-decoration: none;
  font-weight: 900; letter-spacing: .2px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .12s ease, filter .12s ease, box-shadow .2s ease;
}
.btn-pay{
  background: var(--chat-blue); color:#fff;
  box-shadow: 0 12px 28px rgba(15,62,250,.30), inset 0 0 0 1px rgba(255,255,255,.14);
}
.btn-ghost{
  background: rgba(255,255,255,.10); color:#fff;
}

/* Hover/active nos botões */
.btn-pay:hover, .btn-ghost:hover{ transform: translateY(-1px); filter: brightness(1.04); }
.btn-pay:active, .btn-ghost:active{ transform: translateY(0); }

/* Linha divisória sutil entre blocos do pricing (opcional) */
.pricing-sep{
  height:1px; width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  margin: 6px 0 4px;
}

/* Responsivo */
@media (max-width: 560px){
  .pricing-value{ font-size: 1.8rem; padding: 11px 16px; }
  .card-flag{ min-width: 50px; height: 24px; font-size: .72rem; }
  .trust-badges{ right: 8px; top: 8px; gap: 6px; }
  .trust-badge{ padding: 5px 8px; font-size: .72rem; }
}

/* Acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce){
  .pricing-value::after{ animation: none !important; }
  .btn-pay, .btn-ghost{ transition: none !important; }
}

/* ===========================================================
   MODAL (Popup de Pagamento) — PRO (coeso com o JS)
   =========================================================== */

:root{
  --chat-blue: #0f3efa;
  --brand-green: #17e30d;
  --glass-ink: rgba(255,255,255,.10);
  --glass-line: rgba(255,255,255,.12);
  --shadow-modal: 0 24px 72px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Base / layout */
.modal{ position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.modal.hidden{ display:none !important; }

.modal-backdrop{
  position:absolute; inset:0;
  background: rgba(10,15,30,.45);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  animation: fade-in .18s ease-out both;
}

/* Card com glass */
.modal-card{
  position:relative; z-index:1;
  width:min(920px, 92vw); height:min(640px, 85vh);
  background: rgba(17,17,19,.86); color:#fff;
  border-radius:18px; overflow:hidden;
  border:1px solid var(--glass-ink);
  box-shadow: var(--shadow-modal);
  display:flex; flex-direction:column;
  transform-origin: 50% 55%;
  animation: modal-pop .22s cubic-bezier(.2,.8,.2,1) both;
}

/* Header */
.modal-top{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--glass-line);
}

/* Avatar/ícone à esquerda (injetado inline no JS) */
.modal-top .brand-dot{
  display:inline-flex; width:34px; height:34px; border-radius:8px;
  background: var(--chat-blue);
  box-shadow: 0 6px 18px rgba(15,62,250,.35), inset 0 0 0 1px rgba(255,255,255,.16);
}

/* Títulos/Metas (id="payTitle" e id="payMeta") */
#payTitle{ font-size:14px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#payMeta{ font-size:12px; opacity:.85; }

/* Ação “Abrir em nova aba” */
#openInNew{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; text-decoration:none; color:#fff;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 8px 12px;
  transition: filter .12s ease, transform .12s ease;
}
#openInNew:hover{ filter: brightness(1.05); transform: translateY(-1px); }
#openInNew:focus-visible{ outline:2px solid rgba(255,255,255,.45); outline-offset:2px; }

/* Botão fechar sempre visível */
#modalClose, .modal-close{
  width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
  background: var(--chat-blue); color:#fff; font-size:18px;
  box-shadow: 0 10px 24px rgba(15,62,250,.28), inset 0 0 0 1px rgba(255,255,255,.18);
  display:inline-grid; place-items:center;
  transition: filter .12s ease, transform .12s ease;
}
#modalClose:hover{ filter: brightness(1.05); transform: translateY(-1px); }
#modalClose:focus-visible{ outline:2px solid rgba(255,255,255,.45); outline-offset:2px; }

/* Corpo */
#modalIframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; background:#fff;
}

/* Spinner de carregamento */
#modalSpinner{
  position:absolute; inset:0;
  display:none; place-items:center; gap:10px;
  background: rgba(10,15,30,.25);
  color:#fff;
}
#modalSpinner .ring{
  width:38px; height:38px; border-radius:50%;
  border:3px solid rgba(255,255,255,.25); border-top-color:#fff;
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Fallback quando o provedor bloqueia iFrame */
#modalFallback{
  position:absolute; inset:0;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:16px; text-align:center; color:#fff;
  background: rgba(17,17,19,.92);
}
#modalOk, #modalFallback .btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:900; text-decoration:none; color:#fff;
  background: var(--chat-blue);
  border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:10px 14px;
  box-shadow: 0 10px 24px rgba(15,62,250,.28);
  transition: filter .12s ease, transform .12s ease;
}
#modalOk:hover{ filter:brightness(1.05); transform: translateY(-1px); }
#modalOk:focus-visible{ outline:2px solid rgba(255,255,255,.45); outline-offset:2px; }

/* Faixa segura (opcional, caso queira exibir “Conexão segura • https …”) */
.modal-safe-bar{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; font-size:12px; color:#cfd3ff;
  background: rgba(255,255,255,.04); border-top:1px solid var(--glass-line);
}

/* Animações */
@keyframes fade-in{ from{ opacity:0 } to{ opacity:1 } }
@keyframes modal-pop{
  from{ opacity:0; transform: translateY(6px) scale(.98); }
  to  { opacity:1; transform: translateY(0)   scale(1); }
}

/* Acessibilidade / reduz movimento */
@media (prefers-reduced-motion: reduce){
  .modal-backdrop, .modal-card{ animation:none !important; }
}

/* Responsivo */
@media (max-width: 560px){
  .modal-card{ width: min(520px, 94vw); height: min(620px, 88vh); border-radius:16px; }
  .modal-top{ padding:10px 12px; }
  #openInNew{ padding:7px 10px; }
}

/* Impressão: oculta modal */
@media print{
  .modal{ display:none !important; }
}

/* ===========================================================
   SCHEDULER (Agenda 10:00–18:00 a cada 30’)
   — Blur escuro + animações + glass, coeso com o modal
   =========================================================== */

:root{
  --chat-blue: #0f3efa;
  --brand-green: #17e30d;
  --glass-ink: rgba(255,255,255,.10);
  --glass-line: rgba(255,255,255,.12);
  --shadow-modal: 0 24px 72px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}

.scheduler{ position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  animation: fade-in .22s ease-out both; }
.scheduler.hidden{ display: none !important; }

/* Backdrop com blur escuro */
.scheduler::before{
  content:""; position: absolute; inset:0;
  background: rgba(10,15,30,.55);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}

/* Card “glass” */
.scheduler-card{
  position: relative; z-index: 1;
  width: min(720px, 92vw);
  background: rgba(17,17,19,.86);
  color:#fff; border-radius: 18px;
  border: 1px solid var(--glass-ink);
  box-shadow: var(--shadow-modal);
  padding: 18px 18px 16px;
  animation: modal-pop .24s cubic-bezier(.2,.8,.2,1) both;
}

/* Títulos e textos */
.scheduler-card h4{ margin: 0 0 6px; font-size: 1.06rem; letter-spacing:.2px; }
.scheduler-card p{ margin: 0 0 10px; color: rgba(255,255,255,.85); }

/* Linha de data */
.date-row{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.date-row span{ min-width: 44px; display: inline-block; color: rgba(255,255,255,.85); }

/* Date picker em dark */
#datePicker{
  height: 40px; padding: 0 10px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:#fff; outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#datePicker:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); }
#datePicker:focus-visible{
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 3px rgba(15,62,250,.35);
}
/* ícone do calendário visível no dark */
#datePicker::-webkit-calendar-picker-indicator{ filter: invert(1) opacity(.9); }

/* Slots de horário */
.time-slots{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; max-height: 320px; overflow: auto; padding: 2px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
}
.time-slots::-webkit-scrollbar{ width: 8px; }
.time-slots::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.22); border-radius: 999px; }

/* Botão/slot glass */
.slot{
  border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  padding: 10px 12px; text-align: center; cursor: pointer;
  background: rgba(255,255,255,.06); color:#fff;
  transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.slot:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.24);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
.slot:active{ transform: translateY(0); }
.slot:focus-visible{
  outline: 2px solid rgba(15,62,250,.55);
  outline-offset: 2px;
}

/* Selecionado */
.slot.selected{
  background: var(--chat-blue);
  color: #fff;
  border-color: var(--chat-blue);
  box-shadow: 0 10px 26px rgba(15,62,250,.38), inset 0 0 0 1px rgba(255,255,255,.14);
}

/* Ocupado */
.slot.busy{
  opacity:.45; cursor:not-allowed; pointer-events:none;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.09) 0 6px, rgba(255,255,255,.06) 6px 12px);
  border-color: rgba(255,255,255,.14);
}

/* Ações do rodapé (ex.: Fechar/Confirmar, se existirem) */
.scheduler-actions{
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;
}
.scheduler-actions .btn-primary{
  background: var(--chat-blue); color:#fff; border:0; border-radius:12px; padding:10px 14px; cursor:pointer;
  box-shadow: 0 10px 24px rgba(15,62,250,.28), inset 0 0 0 1px rgba(255,255,255,.14);
  font-weight: 800; letter-spacing: .2px; transition: filter .12s ease, transform .12s ease;
}
.scheduler-actions .btn-primary:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.scheduler-actions .btn-ghost{
  background: rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.18);
  border-radius:12px; padding:10px 14px; cursor:pointer;
}
.scheduler-actions .btn-ghost:hover{ filter: brightness(1.05); }

/* Animações (coerentes com o modal) */
@keyframes fade-in{ from{ opacity:0 } to{ opacity:1 } }
@keyframes modal-pop{
  from{ opacity:0; transform: translateY(6px) scale(.98); }
  to  { opacity:1; transform: translateY(0)   scale(1); }
}

/* Responsivo */
@media (max-width: 560px){
  .scheduler-card{ width: min(520px, 94vw); border-radius:16px; padding: 16px; }
  .time-slots{ max-height: 300px; }
}

/* Acessibilidade / reduz movimento */
@media (prefers-reduced-motion: reduce){
  .scheduler, .scheduler-card{ animation:none !important; }
}

/* Impressão: oculta agenda */
@media print{
  .scheduler{ display:none !important; }
}

/* ===========================================================
   FLUTUANTE
   =========================================================== */

#chatbot-toggle{
  position: fixed; bottom: 2rem; right: 2rem;
  background-color: #111; color:#fff; border:none;
  border-radius: 50%; width: 60px; height: 60px; font-size: 24px;
  cursor: pointer; z-index: 1000; box-shadow: 0 0 10px rgba(0,0,0,0.4);
  transition: transform .12s ease, filter .12s ease, background .3s;
}
#chatbot-toggle:hover{ transform: translateY(-1px); filter: brightness(1.05); }

#chatbot-box{
  position: fixed; right: 2rem;
  bottom: calc(2rem + 72px);
  z-index: 999;
  width: min(380px, 92vw);
  max-height: min(76vh, 720px);
  display: flex; flex-direction: column;
  background: var(--chat-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
#chatbot-box.hidden{ display:none !important; }
#chatbot-box .chat-header{ position: sticky; top:0; }
#chatbot-box .chat-messages{ height: min(56vh, 520px); }

/* ===========================================================
   LIGHT THEME
   =========================================================== */

body.light .chatbot,
body.light .chatbot-frame-container,
body.light #chatbot-box{
  background: rgba(255,255,255,.9); color:#111; border-color: rgba(0,0,0,.08);
}
body.light .chat-header{ background: rgba(255,255,255,.7); border-color: rgba(0,0,0,.06); }
body.light .chat-hero p{ color: rgba(0,0,0,.65); }
body.light .chat-messages::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.22); }
body.light .chat-input,
body.light .chat-input-area{
  background: rgba(255,255,255,.7); border-color: rgba(0,0,0,.06);
}
body.light .chat-input input,
body.light .chat-input-area input{
  background: rgba(0,0,0,.04); color:#111; border-color: rgba(0,0,0,.12);
}
body.light .msg.bot{ background:#fff; color:#111; border-color: rgba(0,0,0,.08); }
body.light .msg.bot::after{ background:#fff; box-shadow: -1px 1px 0 rgba(0,0,0,.08); }

/* ===========================================================
   RESPONSIVO / ACESSIBILIDADE
   =========================================================== */

@media (max-width: 768px){
  .chat-messages{ height: min(54vh, 60vh); padding: 14px 12px 8px; }
  .msg, .chat-message{ max-width: 86%; font-size: .97rem; }
  .chat-hero{ padding: 16px 14px 6px; }
  #chatbot-box{ right: 1rem; left: 1rem; width: auto; }
  #chatbot-toggle{ right: 1rem; bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce){
  .msg, .chat-message{ animation:none !important; }
  .chat-input button{ transition:none !important; }
}


/* ===========================================================
   PRINCING CARTAO BLUR = SELOS
   =========================================================== */
/* === PRICING (chat) — cartão com blur + selos no canto superior direito === */
.pricing-card{
  position: relative;
  border-radius: 16px;
  padding: 18px 16px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 16px 48px rgba(0,0,0,.30);
}

/* selos no topo direito (Compra 100% segura, SSL etc.) */
.pricing-card .trust-badges{
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 60%;
  justify-content: flex-end;
}
.trust-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.16);
  white-space: nowrap;
}
.trust-badge.lock::before{content:"🔒";}
.trust-badge.ssl::before{content:"⚡";}
.trust-badge.shield::before{content:"🛡️";}

/* conteúdo do card (títulos e valores) */
.pricing-card .pricing-title{ margin: 18px 0 4px; font-weight: 900; letter-spacing:.2px; }
.pricing-card .pricing-value{
  font-size: 28px; font-weight: 900;
  display:inline-block; padding:10px 14px; border-radius:12px;
  background:#17e30d; color:#031b06;
  box-shadow: 0 10px 26px rgba(23,227,13,.28);
}
.pricing-card .pricing-sub{ margin-top:8px; opacity:.9; }
.pricing-card .pricing-sep{
  height:1px; background:rgba(255,255,255,.12); margin:12px 0;
}

/* área de formas de pagamento (PIX + até 18x + bandeiras) */
.pricing-accept{
  display: grid;
  gap: 10px;
  grid-template-columns: auto auto;
  align-items: center;
}
.pix-badge, .installments-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 12px; font-weight: 900;
  padding: 6px 10px; border-radius: 10px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
}
.pix-badge::before{content:"⚡";}
.installments-badge::before{content:"💳";}

/* bandeiras dos cartões */
.card-flags{
  grid-column: 1 / -1;
  display:flex; gap:10px; flex-wrap: wrap; align-items:center;
}
.card-flag{
  width: 44px; height: 28px; border-radius: 6px;
  background: #fff center/contain no-repeat;

  outline: 1px solid rgba(0,0,0,.06);
}

/* ajuste caminhos conforme seus assets locais */
.card-flag[data-flag="visa"]       { background-image: url("assets/flags/visa.svg"); }
.card-flag[data-flag="mastercard"] { background-image: url("assets/flags/mastercard.svg"); }
.card-flag[data-flag="elo"]        { background-image: url("assets/flags/elo.svg"); }
.card-flag[data-flag="amex"]       { background-image: url("assets/flags/amex.svg"); }
.card-flag[data-flag="hipercard"]  { background-image: url("assets/flags/hipercard.svg"); }
.card-flag[data-flag="diners"]     { background-image: url("assets/flags/diners.svg"); }

/* fallback de acessibilidade (se a imagem não carregar, mostra o nome) */
.card-flag::after{
  content: attr(aria-label);
  display:flex; align-items:center; justify-content:center;
  font-size: 10px; font-weight: 900; color:#111;
}

/* === PATCH DE CONFIABILIDADE — MODAIS & IDs === */

/* 1) Estado base de QUALQUER .modal: totalmente fora do fluxo */
.modal{ 
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.modal.show{
  display: grid !important;      /* ou flex, se seu modal usar flex */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 2) Project modal: nunca visível sem .show */
.project-modal{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.project-modal.show{
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 3) PDF modal: idem */
#pdf-modal{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#pdf-modal.show{
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}



/* Altura do chat em desktop */
@media (min-width: 1024px) {
  .chat-shell,
  .chat-container,
  .chat-card,
  #frame-3 .chat-card {
    /* ajusta conforme seu layout, mas a lógica é:
       usar quase a tela inteira, descontando header/margens */
    height: calc(100vh - 180px);
    max-height: 920px;
  }

  #chatMessages {
    /* altura = card completo - (header do chat + área do input) */
    height: calc(100% - 120px);
    max-height: none;
    overflow-y: auto;
  }
}

.pricing-card .card-flags {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pricing-card .card-flag {
  height: 22px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Área de mensagens do chat — altura fixa */
#chatMessages {
  min-height: 420px;
  height: 520px;        /* ajuste fino pra caber o pricing inteiro */
  max-height: 520px;
  overflow-y: auto;
}

/* Mobile: um pouco menor */
@media (max-width: 960px) {
  #chatMessages {
    min-height: 260px;
    height: 340px;
    max-height: 340px;
  }
}

.pricing-card .trust-badge-img {
  image-rendering: auto;
}

/* Bandeiras no card de pricing do chat */
.pricing-card .card-flags {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

.pricing-card .card-flags .card-flag {
  height: 22px;
  width: auto;
  display: block;
  object-fit: contain;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  /* força o ícone a ficar branco em fundo escuro */
  filter: brightness(0) invert(1);
}

/* ========================= */
/* Selo "Compra 100% Segura" */
/* ========================= */

.pricing-card .trust-badges {
  position: absolute;
  right: 18px;
  top: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 5;
}

/* Desktop: maior e nítido */
.pricing-card .trust-badges img {
  height: 72px !important;   /* força sobre o inline */
  width: auto !important;
  display: block;
  object-fit: contain;
  image-rendering: auto;
}

/* Tablets */
@media (max-width: 1024px) {
  .pricing-card .trust-badges img {
    height: 60px !important;
  }
}

/* Mobile: ainda legível, sem dominar o card */
@media (max-width: 768px) {
  .pricing-card .trust-badges {
    right: 12px;
    top: 10px;
  }

  .pricing-card .trust-badges img {
    height: 50px !important;
  }
}

/* Botões do Hero - base */
.intro .actions a {
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #ffffff;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
}

/* Portfólio = "desselecionado" (outline) */
.intro .actions a.btn-hero-outline {
  background: transparent;
  color: #ffffff;
}

/* Hover Portfólio = fica selecionado (branco) */
.intro .actions a.btn-hero-outline:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* Iniciar = destaque inicial (branco) */
.intro .actions a.btn-hero-primary {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* Hover Iniciar = azul com texto branco */
.intro .actions a.btn-hero-primary:hover {
  background: #0f3efa;
  color: #ffffff;
  border-color: #0f3efa;
}