/* 09/11/2026 (rodada 95): o movimento e os efeitos de hover do site, em todas as páginas públicas (_theme.php carrega este arquivo depois
   dos três ramos de CSS; as folhas de cada página, como landing-plan.css, vêm no corpo, depois, e por isso os seletores daqui começam com
   :root, para valerem mais que os de lá).
   - Os cartões sobem um pouco, ganham sombra e a borda azul; o brilho acompanha o mouse (as variáveis --mx e --my, do script de
     _theme.php) e o ícone do cartão gira de leve.
   - Os botões: o reflexo que passa no primário, a seta que anda e o "apertar" no clique.
   - O topo de vidro, o sublinhado que cresce no menu, as perguntas que abrem suave (no Chrome novo), o título do topo em degradê e a
     linha do sobretítulo que cresce quando a seção entra na tela.
   - Com "reduzir movimento" no sistema (o fim do arquivo): nada se desloca nem gira; ficam as cores, as sombras, o brilho e a opacidade
     mudando suave. Só no mouse (hover: hover): no celular, nada fica "preso" no estado do toque. */
:root {
  --ca-ease: cubic-bezier(.22, 1, .36, 1);
  --ca-ease-spring: cubic-bezier(.34, 1.45, .64, 1);
  --ca-t: .3s;
  --ca-card-lift: -5px;
  --ca-card-glow: 0 26px 52px -24px rgba(20, 74, 160, .42), 0 2px 10px rgba(20, 74, 160, .06);
  --ca-card-hover-line: rgba(20, 99, 232, .4);
  --ca-spot: rgba(20, 99, 232, .1);
}
html[data-theme="dark"] {
  --ca-card-glow: 0 28px 56px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(110, 168, 254, .1);
  --ca-card-hover-line: rgba(110, 168, 254, .5);
  --ca-spot: rgba(110, 168, 254, .14);
}

::selection { background: rgba(20, 99, 232, .2); }
html[data-theme="dark"] ::selection { background: rgba(110, 168, 254, .32); }

/* ---------- Os cartões ---------- */
:root :is(.ca-feature, .ca-post, .ca-news__card, .ca-calc-hub__card, .ca-security__grid > article, .ca-pains__card, .ca-product-tour__card, .ca-lp-card,
  .ca-lp-rival, .ca-lp-professions a, .ca-compare__card):not([data-ca-reveal]) {
  transition: transform var(--ca-t) var(--ca-ease), box-shadow var(--ca-t) var(--ca-ease), border-color var(--ca-t) ease, background-color var(--ca-t) ease;
}
:root :is(.ca-feature, .ca-lp-card, .ca-security__grid > article, .ca-pains__card, .ca-calc-hub__card, .ca-product-tour__card, .ca-compare__card, .ca-lp-professions a) [class*="__icon"] {
  transition: transform .5s var(--ca-ease-spring), background-color var(--ca-t) ease, color var(--ca-t) ease;
}
@media (hover: hover) and (pointer: fine) {
  :root :is(.ca-feature, .ca-post, .ca-news__card, .ca-calc-hub__card, .ca-security__grid > article, .ca-pains__card, .ca-product-tour__card, .ca-lp-card,
    .ca-lp-rival, .ca-lp-professions a, .ca-compare__card):not([data-ca-reveal]):hover {
    transform: translateY(var(--ca-card-lift));
    box-shadow: var(--ca-card-glow);
    border-color: var(--ca-card-hover-line);
  }
  /* A linha da lista de preços e as profissões sobem menos (são listas). */
  :root :is(.ca-lp-rival, .ca-lp-professions a):not([data-ca-reveal]):hover { transform: translateY(-2px); }
  :root :is(.ca-feature, .ca-lp-card, .ca-security__grid > article, .ca-pains__card, .ca-calc-hub__card, .ca-product-tour__card, .ca-compare__card, .ca-lp-professions a):hover [class*="__icon"] {
    transform: scale(1.1) rotate(-5deg);
  }

  /* O brilho que acompanha o mouse: por baixo do texto (isolation e z-index -1), por cima do fundo do cartão. */
  :root :is(.ca-feature, .ca-lp-card, .ca-compare__card, .ca-security__grid > article, .ca-pains__card) { position: relative; isolation: isolate; }
  :root :is(.ca-feature, .ca-lp-card, .ca-compare__card, .ca-security__grid > article, .ca-pains__card)::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), var(--ca-spot), transparent 62%);
    opacity: 0;
    transition: opacity .35s ease;
    content: "";
    pointer-events: none;
  }
  :root :is(.ca-feature, .ca-lp-card, .ca-compare__card, .ca-security__grid > article, .ca-pains__card):hover::after { opacity: 1; }

  /* A capa do artigo cresce dentro do cartão (a borda de baixo fica parada, sem cobrir o texto). */
  :root .ca-post .ca-post__image { transform-origin: center bottom; transition: transform .7s var(--ca-ease), filter .4s ease; }
  :root .ca-post:hover .ca-post__image { transform: scale(1.06); filter: saturate(1.08); }
}

/* ---------- O cartão do "Comece hoje" ---------- */
:root .ca-final__inner::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  /* Fraco de propósito: o branco clareia o azul embaixo do texto (o branco do cartão fica com 4,5:1 ou mais mesmo sob o ponteiro). */
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .05), transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
  content: "";
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  :root .ca-final__inner:hover::after { opacity: 1; }
}

/* ---------- Os botões ---------- */
:root .ca-button { position: relative; isolation: isolate; overflow: hidden; }
:root .ca-button > .bi-arrow-right { transition: transform .3s var(--ca-ease); }
:root .ca-button--primary::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .38) 50%, transparent 75%);
  transform: translateX(-130%);
  content: "";
  pointer-events: none;
}
:root .ca-final__inner .ca-button--primary::after { background: linear-gradient(110deg, transparent 25%, rgba(20, 99, 232, .16) 50%, transparent 75%); }
@media (hover: hover) and (pointer: fine) {
  :root .ca-button:hover > .bi-arrow-right { transform: translateX(4px); }
  :root .ca-button--primary:hover { box-shadow: 0 16px 32px -10px rgba(20, 99, 232, .6); }
  :root .ca-button--primary:hover::after { transform: translateX(130%); transition: transform .75s var(--ca-ease); }
}
:root .ca-button:active { transform: translateY(0) scale(.97); transition-duration: .08s; }

/* O topo: os botões e o sublinhado que cresce do meio no menu do computador. */
.ca-landing #header .btn { transition: transform .2s var(--ca-ease), box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, filter .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .ca-landing #header .btn-primary:hover { box-shadow: 0 10px 22px -8px rgba(20, 99, 232, .6); transform: translateY(-1px); }
  .ca-landing #header .btn-outline-primary:hover { border-color: rgba(20, 99, 232, .45); transform: translateY(-1px); }
}
@media (min-width: 992px) {
  .ca-landing #navbarNavDropdownNav .nav-link:not(.btn) { position: relative; transition: color .2s ease; }
  .ca-landing #navbarNavDropdownNav .nav-link:not(.btn)::after {
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ca-blue), var(--ca-cyan));
    transform: scaleX(0);
    transition: transform .35s var(--ca-ease);
    content: "";
  }
  .ca-landing #navbarNavDropdownNav .nav-link:not(.btn):is(:hover, :focus-visible, [aria-current="page"])::after { transform: scaleX(1); }
}
/* O topo de vidro: o conteúdo passa por baixo desfocado. Só onde há o desfoque e o color-mix: com var() dentro, um color-mix que o
   navegador não conhece (Safari até 16.1, Chrome até 110) não cai para a regra de antes, deixa o fundo transparente. Sem os dois, o fundo de
   sempre, de landing-shell.css. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) and (background: color-mix(in srgb, red 50%, transparent)) {
  .ca-landing #header {
    background: color-mix(in srgb, var(--ca-surface) 84%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
}

/* ---------- O título do topo e os sobretítulos ---------- */
:root :is(.ca-hero__copy, .ca-app-hero__copy) h1 span {
  background: linear-gradient(92deg, #1463e8 0%, #2b7bf5 45%, #08a9d7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="dark"] :is(.ca-hero__copy, .ca-app-hero__copy) h1 span { background-image: linear-gradient(92deg, #6ea8fe 0%, #7cc4ff 50%, #38d0f0 100%); }
@media (forced-colors: active) {
  :root :is(.ca-hero__copy, .ca-app-hero__copy) h1 span { color: CanvasText; background: none; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-ca-reveal] .ca-eyebrow::before,
  [data-ca-reveal].ca-section__head .ca-eyebrow::before { width: 0; }
  .is-revealed .ca-eyebrow::before,
  .is-revealed.ca-section__head .ca-eyebrow::before { width: 1.7rem; transition: width .7s var(--ca-ease) .2s; }
}

/* ---------- As perguntas ---------- */
:root .ca-faq details { transition: border-color var(--ca-t) ease, background-color var(--ca-t) ease, box-shadow var(--ca-t) ease; }
@media (hover: hover) and (pointer: fine) {
  :root .ca-faq details:hover { border-color: var(--ca-card-hover-line); }
}
:root .ca-faq details[open] { box-shadow: 0 14px 30px -20px rgba(20, 74, 160, .35); }
/* Abrir e fechar suave (Chrome 131 em diante, ::details-content); nos outros, abre na hora, como antes. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  @media (prefers-reduced-motion: no-preference) {
    :root .ca-faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size .38s var(--ca-ease), content-visibility .38s allow-discrete; }
    :root .ca-faq details[open]::details-content { block-size: auto; }
  }
}

/* ---------- A entrada ao rolar ---------- */
/* O degrau de cada cartão (o --ca-reveal-delay do script) e um leve aumento junto da subida. */
@media (prefers-reduced-motion: no-preference) {
  [data-ca-reveal] { transform: translateY(22px) scale(.985); }
}

/* ---------- Com "reduzir movimento" ---------- */
@media (prefers-reduced-motion: reduce) {
  :root :is(.ca-feature, .ca-post, .ca-news__card, .ca-calc-hub__card, .ca-security__grid > article, .ca-pains__card, .ca-product-tour__card, .ca-lp-card,
    .ca-lp-rival, .ca-lp-professions a, .ca-compare__card, .ca-plan2):hover,
  :root .ca-button:hover,
  :root .ca-button:active,
  .ca-landing #header .btn:hover,
  :root .ca-gallery__item:hover .ca-phone,
  :root .ca-post:hover .ca-post__image,
  :root :is(.ca-feature, .ca-lp-card, .ca-security__grid > article, .ca-pains__card, .ca-calc-hub__card, .ca-product-tour__card, .ca-compare__card, .ca-lp-professions a):hover [class*="__icon"] {
    transform: none !important;
  }
  :root .ca-button--primary::after { display: none; }
  /* As transições que não deslocam nada voltam só aqui (modern-home.css zera todas dentro de .ca-home); o seletor mais longo vence o de lá. */
  :root :is(.ca-feature, .ca-post, .ca-news__card, .ca-calc-hub__card, .ca-security__grid > article, .ca-pains__card, .ca-product-tour__card, .ca-lp-card,
    .ca-lp-rival, .ca-lp-professions a, .ca-compare__card, .ca-plan2, .ca-button, .ca-faq details) {
    transition-property: color, background-color, border-color, box-shadow, opacity, filter !important;
    transition-duration: .28s !important;
  }
  :root :is(.ca-feature, .ca-lp-card, .ca-compare__card, .ca-security__grid > article, .ca-pains__card, .ca-final__inner)::after {
    transition-property: opacity !important;
    transition-duration: .35s !important;
  }
  .ca-landing #navbarNavDropdownNav .nav-link:not(.btn)::after { transform: none; opacity: 0; transition: opacity .25s ease; }
  .ca-landing #navbarNavDropdownNav .nav-link:not(.btn):is(:hover, :focus-visible, [aria-current="page"])::after { opacity: 1; }
  .ca-landing #header .navbar-toggler { transition-property: background-color, border-color, color; }
  .ca-landing #navbarNavDropdown { transition-property: opacity, visibility; }
}
@media print {
  /* Sem o azul no papel (o fundo nem sai, por padrão): o texto do cartão volta a escuro, e o destaque do título deixa de ser só o degradê. */
  :root .ca-final__inner { color: #000; background: none; border-color: #999; box-shadow: none; }
  :root .ca-final__inner::before,
  :root .ca-final__inner::after { display: none; }
  :root .ca-final__inner,
  :root .ca-final__inner * { color: #000 !important; }
  :root :is(.ca-hero__copy, .ca-app-hero__copy) h1 span { color: inherit; background: none; }
}