/* =====================================================================
   ESTILOS.CSS — Vitória Caroline | Psicóloga Clínica
   =====================================================================
   Este arquivo controla TODA a aparência do site: cores, fontes,
   espaçamentos, animações e responsividade (versão celular).

   ÍNDICE (use Ctrl+F para pular direto na seção que precisa mexer):

   1. TOKENS ................ cores, fontes e variáveis reutilizadas
   2. BASE GERAL ............ resets e regras que valem para o site todo
   3. TEXTURA DE ESTRELAS ... o padrão de estrelinhas do fundo (SVG)
   4. LOGO (SVG) ............ estilo do símbolo/marca reutilizável
   5. MENU (NAV) ............ barra fixa no topo + menu mobile
   6. HERO (topo/abertura) .. seção de entrada com o título grande
   7. BOTÕES ................ estilo do botão "Agendar sessão" etc.
   8. SEÇÃO "SOBRE" ......... foto em polaroid + texto
   9. SEÇÃO "ABORDAGEM" ..... bloco de texto sobre Logoterapia
   10. SEÇÃO "ÁREAS DE CUIDADO"  cards de Infância/Adolescência/Adulto
   11. SEÇÃO "TRAJETÓRIA" ... linha do tempo (timeline)
   12. SEÇÃO "CONTATO" ...... links de Instagram/WhatsApp/E-mail
   13. RODAPÉ (footer)
   14. ANIMAÇÃO DE ENTRADA (fade-up) ao rolar a página
   15. ANIMAÇÃO EM CASCATA .. cards/timeline/links aparecem em sequência
   16. MICRO-INTERAÇÕES ..... hover em cards, botões, foto, menu, etc.
   17. ESTRELAS CINTILANTES . brilho aleatório e ocasional no fundo
        (os elementos <span class="twinkle-star"> são criados pelo
         script.js — aqui só definimos a APARÊNCIA/ANIMAÇÃO deles)

   DICA: quase toda cor do site vem das variáveis lá no topo (seção 1).
   Se quiser mudar a paleta de cores inteira, mude só ali.
   ===================================================================== */
/* ===== 1. TOKENS — cores, fontes, medidas reutilizadas ===== */
  :root{
    --teal:      #2C5468;
    --cream:     #EFEEE7;
    --plum:      #3E3A52;
    --sage:      #B6B99C;
    --teal-soft: #6F97A6;
    --skyblue:   #A7C1D3;

    --ink-on-dark: #F3F1EA;
    --ink-on-light: #33313F;
    --ink-muted-dark: #C7CBCE;
    --ink-muted-light: #6B6878;

    --font-display: 'IM Fell English', Georgia, serif;
    --font-body: 'Inter', sans-serif;
    --font-signature: 'Mrs Saint Delafield', cursive;

    --max: 640px;
    --gutter: 6vw;

    --ease: cubic-bezier(.22,.61,.36,1);
  }

  /* ===== 2. BASE GERAL — resets e regras globais do site ===== */
  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
  }

  body{
    margin:0;
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--ink-on-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1,h2,h3{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    margin: 0;
    line-height: 1.15;
  }

  a{ color: inherit; }
  img,svg{ display:block; max-width:100%; }

  a:focus-visible, button:focus-visible{
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
  }

  section[id], header[id]{
    scroll-margin-top: 76px;
  }

  .section{
    padding: clamp(72px, 12vw, 128px) var(--gutter);
    position: relative;
  }
  .section-inner{ position: relative; z-index: 1; }
  .section-inner{
    max-width: var(--max);
    margin: 0 auto;
  }
  .section-inner.wide{ max-width: 880px; }

  .eyebrow{
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: inherit;
    opacity: 0.75;
    margin: 0 0 10px;
  }

  .bg-teal{ background: var(--teal); color: var(--ink-on-dark); }
  .bg-cream{ background: var(--cream); color: var(--ink-on-light); }
  .bg-plum{ background: var(--plum); color: var(--ink-on-dark); }

  /* ===== 3. TEXTURA DE ESTRELAS — padrão SVG repetido no fundo =====
     .stars-light  -> usado em fundos escuros (teal)
     .stars-dark   -> usado em fundos claros (cream)
     Para trocar o desenho das estrelas, troque o SVG dentro do
     'url("data:image/svg+xml...")' abaixo. */
  .stars{ position: relative; overflow: hidden; }
  .stars::before{
    content:'';
    position:absolute; inset:0;
    pointer-events:none;
    z-index:0;
    background-repeat: repeat;
    background-size: 260px 260px;
  }
  .stars-light::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23F3F1EA'%3E%3Cpath opacity='1.0' transform='translate(24,34) scale(1.7)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='0.77' transform='translate(80,18) scale(1.0)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='1.0' transform='translate(135,55) scale(2.0)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='0.85' transform='translate(215,28) scale(1.3)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='0.61' transform='translate(40,100) scale(0.9)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='0.93' transform='translate(175,110) scale(1.6)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='0.69' transform='translate(100,150) scale(1.1)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='1.0' transform='translate(230,165) scale(2.1)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='0.69' transform='translate(55,205) scale(1.2)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='0.53' transform='translate(150,225) scale(0.9)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='0.45' transform='translate(200,80) scale(0.7)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3C/g%3E%3C/svg%3E");
  }
  .stars-dark::before{
    opacity: 0.75;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%233E3A52'%3E%3Cpath opacity='0.7' transform='translate(24,34) scale(1.9)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='0.45' transform='translate(90,20) scale(1.3)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='0.5' transform='translate(150,60) scale(1.8)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='0.4' transform='translate(210,35) scale(1.2)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='0.45' transform='translate(50,110) scale(1.3)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='0.55' transform='translate(190,120) scale(1.7)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='0.42' transform='translate(110,165) scale(1.2)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3Cpath opacity='0.45' transform='translate(60,210) scale(1.3)' d='M0,-1L0.28,-0.28L1,0L0.28,0.28L0,1L-0.28,0.28L-1,0L-0.28,-0.28Z'/%3E%3C/g%3E%3C/svg%3E");
  }

  /* ===== 4. LOGO (SVG) — estilo do símbolo/marca ===== */
  .mark{ color: currentColor; }
  .mark path{ fill:none; stroke:currentColor; stroke-linecap:round; }
  .mark .star{ fill:currentColor; stroke:none; }
  .mark .dot{ fill:currentColor; stroke:none; }

  /* ===== 5. MENU (NAV) — barra fixa no topo + menu mobile ===== */
  .nav{
    position: fixed;
    top:0; left:0; right:0;
    z-index: 100;
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 16px var(--gutter);
    /* fundo 100% opaco: com transparência (mesmo que pouca), o que
       estivesse por trás do menu no primeiro carregamento podia vazar
       e deixar essa faixa com uma cor mais clara que o resto do site */
    background: var(--teal);
    color: var(--ink-on-dark);
    transition: padding .3s var(--ease);
  }
  .nav-brand{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:inherit;
  }
  .nav-brand img.nav-symbol{ width:32px; height:32px; object-fit:contain; }
  .nav-brand img.nav-wordmark{ height:26px; width:auto; object-fit:contain; }
  .nav-brand span{
    font-family: var(--font-signature);
    font-style: normal;
    font-size: 1.6rem;
  }
  .nav-links{
    display:flex;
    gap: clamp(16px, 2.4vw, 34px);
    list-style:none;
    margin:0; padding:0;
  }
  .nav-links a{
    text-decoration:none;
    font-size: 0.92rem;
    color: var(--ink-muted-dark);
    padding: 4px 2px;
    border-bottom: 1px solid transparent;
    transition: color .25s, border-color .25s;
  }
  .nav-links a:hover,
  .nav-links a.active{
    color: var(--ink-on-dark);
    border-bottom-color: var(--skyblue);
  }
  .nav-toggle{
    display:none;
    background:none;
    border:none;
    color: var(--ink-on-dark);
    cursor:pointer;
    padding: 6px;
  }
  .nav-toggle svg{ width:24px; height:24px; }

  @media (max-width: 720px){
    .nav-links{
      position:fixed;
      top:0; right:0;
      height:100vh;
      width: min(76vw, 300px);
      background: var(--cream);
      box-shadow: -8px 0 24px rgba(0,0,0,0.25);
      flex-direction:column;
      justify-content:center;
      align-items:flex-start;
      padding: 32px var(--gutter);
      gap: 22px;
      transform: translateX(100%);
      transition: transform .35s var(--ease);
    }
    .nav-links.open{ transform: translateX(0); }
    .nav-links a{ font-size: 1.05rem; color: var(--ink-on-light); }
    .nav-links a:hover,
    .nav-links a.active{ color: var(--teal); border-bottom-color: var(--teal); }
    .nav-toggle{ display:block; }
  }

  /* ===== 6. HERO — seção de abertura com título grande ===== */
  .hero{
    min-height: 100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: 120px var(--gutter) 80px;
  }
  .hero > *{ position: relative; z-index: 1; }
  .hero-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: clamp(8px, 1.6vw, 14px);
    margin-bottom: 6px;
  }
  .hero-mark{
    width: clamp(60px, 9vw, 120px);
    height: clamp(60px, 9vw, 120px);
    object-fit: contain;
    flex-shrink:0;
    opacity:0;
    transform: translateY(12px);
  }
  .hero-wordmark{
    width: clamp(220px, 27vw, 480px);
    height: auto;
    object-fit: contain;
    opacity:0;
    transform: translateY(12px);
  }
  .hero .crp{
    margin: 18px 0 26px;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--ink-muted-dark);
    opacity:0;
    transform: translateY(12px);
  }
  .hero p.tagline{
    max-width: 480px;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--ink-on-dark);
    opacity:0;
    transform: translateY(12px);
  }
  .hero .cta{
    margin-top: 34px;
    opacity:0;
    transform: translateY(12px);
  }

  .hero.reveal .hero-mark,
  .hero.reveal .hero-wordmark,
  .hero.reveal .crp,
  .hero.reveal p.tagline,
  .hero.reveal .cta{
    animation: rise .8s var(--ease) forwards;
  }
  .hero.reveal .hero-wordmark{ animation-delay: .12s; }
  .hero.reveal .crp{ animation-delay: .22s; }
  .hero.reveal p.tagline{ animation-delay: .32s; }
  .hero.reveal .cta{ animation-delay: .42s; }
  @keyframes rise{
    to{ opacity:1; transform: translateY(0); }
  }

  /* ===== 7. BOTÕES — estilo base do botão (ex: "Agendar sessão") ===== */
  .btn{
    display:inline-block;
    text-decoration:none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 15px 36px;
    border: 1px solid currentColor;
    border-radius: 999px;
    transition: background .25s, color .25s, transform .25s, box-shadow .25s;
  }
  .hero .btn{
    background: var(--ink-on-dark);
    color: var(--teal);
    border-color: var(--ink-on-dark);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  }
  .hero .btn:hover{
    background: var(--sage);
    border-color: var(--sage);
    color: var(--ink-on-light);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.3);
  }
  .btn:hover{
    background: var(--ink-on-dark);
    color: var(--teal);
  }

  /* ===== 8. SEÇÃO "SOBRE" — foto em polaroid + texto ===== */
  .sobre .section-inner.wide{
    display:grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(32px, 6vw, 64px);
    align-items:center;
  }
  .polaroid{
    width: 100%;
    background: #fff;
    padding: 14px 14px 40px;
    box-shadow: 0 14px 28px rgba(62,58,82,0.22), 0 2px 6px rgba(62,58,82,0.12);
    transform: rotate(-4deg);
    transition: transform .35s var(--ease);
  }
  .polaroid:hover{ transform: rotate(-1.5deg) scale(1.02); }
  .sobre-photo{
    display:block;
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: center 12%;
  }
  @media (max-width: 640px){
    .sobre .section-inner.wide{
      grid-template-columns: 1fr;
      justify-items: center;
      text-align:left;
    }
    .polaroid{ width: 62%; max-width: 220px; }
  }
  .sobre h2{ font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 24px; }
  .sobre p{ margin: 0 0 16px; color: var(--ink-muted-light); }
  .sobre p:last-of-type{ margin-bottom:0; }
  .sobre p.pull{
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink-on-light);
    border-left: 2px solid var(--skyblue);
    padding-left: 18px;
    margin: 28px 0;
  }

  /* ===== 9. SEÇÃO "ABORDAGEM" — texto sobre Logoterapia ===== */
  .abordagem h2{ font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 12px; }
  .abordagem > .section-inner > p{
    color: var(--ink-muted-dark);
    max-width: 62ch;
    margin: 0 0 20px;
  }
  .abordagem > .section-inner > p:last-child{ margin-bottom: 0; }

  /* ===== 10. SEÇÃO "ÁREAS DE CUIDADO" — cards (Infância/Adolescência/Adulto) ===== */
  .areas-cuidado h2{ font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 12px; }
  .areas-cuidado > .section-inner > p{
    color: var(--ink-muted-light);
    max-width: 62ch;
    margin: 0 0 36px;
  }
  .cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  @media (max-width: 720px){
    .cards{ grid-template-columns: 1fr; }
  }
  .card{
    padding: 28px 24px;
    border-top: 3px solid var(--accent, var(--sage));
  }
  .card h3{
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--ink-on-light);
  }
  .card p{
    font-size: 0.94rem;
    color: var(--ink-muted-light);
    margin:0;
  }

  /* ===== 11. SEÇÃO "TRAJETÓRIA" — linha do tempo (timeline) ===== */
  .trajetoria h2{ font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 44px; }
  .timeline{
    list-style:none;
    margin:0; padding:0;
    border-left: 1px solid rgba(243,241,234,0.3);
  }
  .timeline li{
    position: relative;
    padding: 0 0 40px 30px;
  }
  .timeline li:last-child{ padding-bottom:0; }
  .timeline li::before{
    content:'';
    position:absolute;
    left:-5px; top:4px;
    width:9px; height:9px;
    border-radius:50%;
    background: var(--ink-on-dark);
  }
  .timeline .when{
    display:block;
    font-size: 0.8rem;
    letter-spacing:0.04em;
    color: var(--ink-muted-dark);
    margin-bottom: 4px;
  }
  .timeline h3{
    font-size: 1.2rem;
    margin-bottom: 4px;
  }
  .timeline p{
    margin:0;
    font-size: 0.94rem;
    color: var(--ink-muted-dark);
  }

  /* ===== 12. SEÇÃO "CONTATO" — links de Instagram/WhatsApp/E-mail ===== */
  .contato{ text-align:center; }
  .contato h2{ font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 16px; }
  .contato p.lead{
    max-width: 440px;
    margin: 0 auto 36px;
    color: var(--ink-muted-light);
  }
  .contact-links{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 16px;
    margin-bottom: 44px;
  }
  .contact-links a{
    text-decoration:none;
    font-size: 1.05rem;
    color: var(--ink-on-light);
    border-bottom: 1px solid rgba(51,49,63,0.25);
    padding-bottom: 2px;
    transition: border-color .25s;
  }
  .contact-links a:hover{ border-color: var(--ink-on-light); }

  /* ===== 13. RODAPÉ (footer) ===== */
  footer{
    padding: 26px var(--gutter) 34px;
    text-align:center;
    background: var(--teal);
    color: var(--ink-muted-dark);
    font-size: 0.8rem;
  }

  /* ===== 14. ANIMAÇÃO DE ENTRADA (fade-up) —
     aplica-se a cada seção; a classe "in-view" é adicionada
     pelo script.js quando a seção entra na tela ===== */
  .fade-up{
    opacity:0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .fade-up.in-view{
    opacity:1;
    transform: translateY(0);
  }

  /* ===== 15. ANIMAÇÃO EM CASCATA —
     os cards, itens da timeline e links de contato aparecem
     um depois do outro (usando transition-delay) em vez de
     todos ao mesmo tempo ===== */
  .fade-up .cards .card,
  .fade-up .timeline li,
  .fade-up .contact-links a{
    opacity:0;
    transform: translateY(14px);
    transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .3s var(--ease);
  }
  .fade-up.in-view .cards .card,
  .fade-up.in-view .timeline li,
  .fade-up.in-view .contact-links a{
    opacity:1;
    transform: translateY(0);
  }
  .fade-up.in-view .cards .card:nth-child(1){ transition-delay: .05s; }
  .fade-up.in-view .cards .card:nth-child(2){ transition-delay: .17s; }
  .fade-up.in-view .cards .card:nth-child(3){ transition-delay: .29s; }
  .fade-up.in-view .timeline li:nth-child(1){ transition-delay: .04s; }
  .fade-up.in-view .timeline li:nth-child(2){ transition-delay: .12s; }
  .fade-up.in-view .timeline li:nth-child(3){ transition-delay: .20s; }
  .fade-up.in-view .timeline li:nth-child(4){ transition-delay: .28s; }
  .fade-up.in-view .timeline li:nth-child(5){ transition-delay: .36s; }
  .fade-up.in-view .contact-links a:nth-child(1){ transition-delay: .05s; }
  .fade-up.in-view .contact-links a:nth-child(2){ transition-delay: .15s; }
  .fade-up.in-view .contact-links a:nth-child(3){ transition-delay: .25s; }

  /* ===== 16. MICRO-INTERAÇÕES —
     pequenos efeitos de hover/transição para deixar o site
     mais "vivo": cards, timeline, botão, foto, menu, links ===== */
  .card{
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
    border-radius: 4px;
  }
  .card:hover{
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(62,58,82,0.12);
  }
  .timeline li::before{
    transition: transform .35s var(--ease), background .35s var(--ease);
  }
  .timeline li:hover::before{
    transform: scale(1.6);
    background: var(--skyblue);
  }
  .contact-links a{
    display:inline-block;
    transition: transform .3s var(--ease), border-color .25s, color .25s;
  }
  .contact-links a:hover{
    transform: translateY(-2px) scale(1.03);
  }
  .nav-brand img.nav-symbol{
    transition: transform .5s var(--ease);
  }
  .nav-brand:hover img.nav-symbol{
    transform: rotate(-8deg) scale(1.08);
  }
  .btn{
    position: relative;
    overflow: hidden;
  }
  .btn::after{
    content:'';
    position:absolute;
    inset:0;
    background: radial-gradient(circle, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 70%);
    opacity:0;
    transform: scale(0.6);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
    pointer-events:none;
  }
  .btn:hover::after{
    opacity:1;
    transform: scale(1);
  }
  .nav{
    transition: background .35s var(--ease), box-shadow .35s var(--ease);
  }
  .nav.scrolled{
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  }
  html{
    scroll-behavior: smooth;
  }
  .sobre-photo{
    transition: transform .6s var(--ease);
  }
  .polaroid:hover .sobre-photo{
    transform: scale(1.04);
  }
  a, button{
    transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  }

  /* ===== 17. ESTRELAS CINTILANTES —
     aparência/animação dos pontinhos de brilho. Quem CRIA os
     elementos <span class="twinkle-star"> é o script.js
     (função initTwinklingStars). Aqui só definimos como cada
     estrelinha se comporta: tamanho, cor, brilho e o ritmo do
     "pisca" (ver @keyframes twinkle logo abaixo). ===== */
  .stars{
    isolation: isolate;
  }
  .twinkle-layer{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
  }
  .twinkle-star{
    position:absolute;
    border-radius:50%;
    background: currentColor;
    opacity: .18;
    will-change: opacity, transform;
    animation-name: twinkle;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }
  .stars-light .twinkle-star{ color: var(--ink-on-dark); }
  .stars-dark .twinkle-star{ color: var(--plum); }
  @keyframes twinkle{
    0%, 82%{
      opacity: .18;
      transform: scale(1);
      filter: drop-shadow(0 0 0px currentColor);
    }
    92%{
      /* pico do brilho: aumentado (opacidade, escala e glow maiores,
         e uma janela mais larga do ciclo) para o "pisca" ficar
         perceptível, não só um blip quase invisível */
      opacity: 1;
      transform: scale(1.7);
      filter: drop-shadow(0 0 7px currentColor);
    }
    100%{
      opacity: .18;
      transform: scale(1);
      filter: drop-shadow(0 0 0px currentColor);
    }
  }
  @media (prefers-reduced-motion: reduce){
    .twinkle-star{ animation: none !important; opacity: .2; }
  }

  /* ===== 18. COMETAS SUTIS —
     de vez em quando, um risco de luz atravessa a seção em diagonal
     e some (bem discreto, como uma estrela cadente ao longe).
     Quem CRIA o elemento <span class="comet"> e decide QUANDO ele
     aparece, em qual DIREÇÃO (--comet-angle) e por qual TRAJETO
     (--comet-dx / --comet-dy) é o script.js (função initComets, seção 8).
     Aqui definimos só a aparência dele: o "rastro" (gradiente) e como
     essas variáveis são aplicadas na animação. */
  .comet{
    position:absolute;
    top:0;
    left:0;
    width: 140px;
    height: 2px;
    border-radius: 999px;
    pointer-events:none;
    z-index:0;
    opacity:0;
    /* rastro que esmaece da cauda (transparente, atrás) até a cabeça
       brilhante (currentColor, na frente — no sentido do movimento).
       Isso funciona porque o "rotate(var(--comet-angle))" abaixo gira o
       eixo horizontal do elemento exatamente para a mesma direção do
       "translate", então a ponta brilhante (100% do gradiente) sempre
       fica voltada para onde o cometa está indo. */
    background: linear-gradient(90deg, transparent, currentColor);
    filter: drop-shadow(0 0 3px currentColor);
    animation-name: comet-fly;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
  }
  .stars-light .comet{ color: var(--ink-on-dark); }
  .stars-dark .comet{ color: var(--plum); }
  @keyframes comet-fly{
    0%{
      opacity: 0;
      transform: translate(0, 0) rotate(var(--comet-angle, -18deg)) scaleX(.4);
    }
    8%{
      /* aparece suavemente, sempre com opacidade baixa (sutil) */
      opacity: .55;
      transform: translate(0, 0) rotate(var(--comet-angle, -18deg)) scaleX(1);
    }
    85%{
      opacity: .4;
    }
    100%{
      opacity: 0;
      transform: translate(var(--comet-dx, 70vw), var(--comet-dy, 46vh)) rotate(var(--comet-angle, -18deg)) scaleX(1);
    }
  }
  @media (prefers-reduced-motion: reduce){
    .comet{ display:none; }
  }