/* Coração de Anjo — v116
   Movimento editorial, interação e acabamento visual. */

:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-soft: cubic-bezier(.2, .75, .3, 1);
  --motion-fast: 320ms;
  --motion-slow: 780ms;
  --motion-x: 0px;
  --motion-y: 0px;
}

html { scroll-behavior: smooth; }

body {
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

/* Linguagem tipográfica: títulos firmes com contraste editorial em itálico. */
:where(h1, h2, .section-title, .product-hero h1) {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.052em;
  text-wrap: balance;
}

:where(h1, h2, .section-title, .product-hero h1) em {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.035em;
}

:where(p, li) { text-wrap: pretty; }

/* Cabeçalho com vidro discreto após a rolagem. */
.topbar {
  transition: background-color var(--motion-fast) ease,
              box-shadow var(--motion-fast) ease,
              backdrop-filter var(--motion-fast) ease;
}

.topbar.is-scrolled {
  background: color-mix(in srgb, #fbfaf6 88%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 12px 38px rgba(5, 55, 73, .09);
}

/* Hero com luz e formas vivas, sem disputar atenção com a mensagem. */
.care-first-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.care-first-hero::before,
.care-first-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(4px);
  will-change: transform;
}

.care-first-hero::before {
  width: min(46vw, 720px);
  aspect-ratio: 1;
  right: -13vw;
  top: -24%;
  background: radial-gradient(circle at 42% 45%, rgba(184, 205, 133, .34), rgba(121, 157, 111, .10) 46%, transparent 72%);
  animation: care-orbit-one 14s ease-in-out infinite alternate;
}

.care-first-hero::after {
  width: min(38vw, 570px);
  aspect-ratio: 1;
  left: -16vw;
  bottom: -47%;
  background: radial-gradient(circle, rgba(7, 72, 94, .14), rgba(7, 72, 94, .03) 52%, transparent 72%);
  animation: care-orbit-two 17s ease-in-out infinite alternate;
}

@keyframes care-orbit-one {
  to { transform: translate3d(-6vw, 5vh, 0) scale(1.12); }
}

@keyframes care-orbit-two {
  to { transform: translate3d(8vw, -5vh, 0) scale(.92); }
}

.care-first-copy > * {
  animation: care-enter var(--motion-slow) var(--motion-ease) both;
}

.care-first-copy > :nth-child(2) { animation-delay: 80ms; }
.care-first-copy > :nth-child(3) { animation-delay: 150ms; }
.care-first-copy > :nth-child(4) { animation-delay: 220ms; }
.care-first-copy > :nth-child(5) { animation-delay: 290ms; }
.care-first-copy > :nth-child(6) { animation-delay: 360ms; }

@keyframes care-enter {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: none; }
}

.care-first-visual,
.product-hero-image,
.app-showcase {
  transform: translate3d(var(--motion-x), var(--motion-y), 0);
  transition: transform 700ms var(--motion-ease);
  will-change: transform;
}

.care-first-visual {
  animation: care-float 7s ease-in-out 900ms infinite alternate;
}

@keyframes care-float {
  from { margin-top: 0; }
  to { margin-top: -10px; }
}

.care-hero-video,
.product-hero-image,
.app-showcase {
  box-shadow: 0 24px 70px rgba(4, 47, 63, .16);
}

.care-hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.16), transparent 32% 70%, rgba(181,205,135,.11));
}

/* Aparição progressiva durante a rolagem. */
.motion-ready .motion-reveal {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 30px, 0) scale(.985);
  transition: opacity var(--motion-slow) var(--motion-ease),
              transform var(--motion-slow) var(--motion-ease),
              filter 650ms ease;
  transition-delay: calc(var(--motion-order, 0) * 70ms);
}

.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}

.motion-ready :where(.product-hero-image, .app-showcase).motion-reveal.is-visible {
  transform: translate3d(var(--motion-x), var(--motion-y), 0);
}

/* Cartões com profundidade leve e imagens mais vivas. */
:where(.service-photo-card, .equipment-card, .trust-proof-grid article,
       .process-grid article, .partner-card, .content-card,
       .product-main-card, .product-side-card, .app-features-grid article,
       .app-audience-card, .faq-wrap details) {
  transition: transform 420ms var(--motion-ease),
              box-shadow 420ms var(--motion-ease),
              border-color 300ms ease;
}

:where(.service-photo-card, .equipment-card, .product-main-card, .product-side-card) img {
  transition: transform 750ms var(--motion-ease), filter 500ms ease;
}

@media (hover:hover) and (pointer:fine) {
  :where(.service-photo-card, .equipment-card, .trust-proof-grid article,
         .process-grid article, .content-card, .product-main-card,
         .product-side-card, .app-features-grid article, .app-audience-card):hover {
    transform: translateY(-7px);
    box-shadow: 0 24px 58px rgba(4, 49, 66, .13);
    border-color: rgba(126, 154, 104, .38);
  }

  :where(.service-photo-card, .equipment-card, .product-main-card, .product-side-card):hover img {
    transform: scale(1.035);
    filter: saturate(1.04) contrast(1.02);
  }
}

/* Linha de percurso que se desenha quando a seção aparece. */
.process-grid {
  position: relative;
  isolation: isolate;
}

@media (min-width: 821px) {
  .process-grid::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 7%;
    right: 7%;
    top: 34px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(127, 154, 105, .75) 12% 88%, transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.25s var(--motion-ease) 200ms;
  }

  .process-grid.is-visible::before { transform: scaleX(1); }
}

/* Seções especiais ganham luz e textura sem perder legibilidade. */
.lead-capture,
.home-portal-compact,
.partner-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.lead-capture::after,
.home-portal-compact::after,
.partner-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 420px;
  aspect-ratio: 1;
  right: -210px;
  top: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(187, 207, 141, .22), transparent 67%);
  transform: translateY(-50%);
  animation: care-glow 9s ease-in-out infinite alternate;
}

@keyframes care-glow {
  to { transform: translate3d(-42px, -46%, 0) scale(1.12); opacity: .72; }
}

.partner-card {
  position: relative;
  overflow: hidden;
}

.partner-card::before {
  content: "";
  position: absolute;
  inset: -80% -30%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 44%, rgba(255,255,255,.14) 50%, transparent 56%);
  transform: translateX(-35%) rotate(4deg);
  animation: partner-light 8s ease-in-out infinite;
}

@keyframes partner-light {
  0%, 35% { transform: translateX(-45%) rotate(4deg); }
  65%, 100% { transform: translateX(45%) rotate(4deg); }
}

/* Botões com resposta tátil e brilho pontual. */
:where(.btn, .nav-cta, .whatsapp-float, .mobile-contact-bar a) {
  position: relative;
  overflow: hidden;
  transition: transform 260ms var(--motion-ease), box-shadow 260ms ease,
              background-color 260ms ease, color 260ms ease;
}

:where(.btn, .nav-cta)::after {
  content: "";
  position: absolute;
  inset: -120% auto -120% -35%;
  width: 22%;
  background: rgba(255,255,255,.28);
  transform: rotate(18deg) translateX(-220%);
  transition: transform 650ms var(--motion-ease);
}

@media (hover:hover) and (pointer:fine) {
  :where(.btn, .nav-cta, .whatsapp-float, .mobile-contact-bar a):hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(5, 56, 74, .19);
  }

  :where(.btn, .nav-cta):hover::after { transform: rotate(18deg) translateX(700%); }
}

.whatsapp-float { animation: care-pulse-once 1.2s var(--motion-ease) 2.1s both; }

@keyframes care-pulse-once {
  0%, 100% { box-shadow: inherit; }
  45% { box-shadow: 0 0 0 12px rgba(74, 155, 93, 0), 0 14px 30px rgba(4, 64, 73, .20); }
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(137, 169, 93, .62);
  outline-offset: 4px;
}

@media (max-width: 820px) {
  .care-first-hero::before {
    width: 520px;
    right: -350px;
    top: -90px;
    opacity: .78;
  }

  .care-first-hero::after { display: none; }
  .care-first-visual { animation: none; }

  .motion-ready .motion-reveal {
    filter: none;
    transform: translate3d(0, 18px, 0);
    transition-duration: 560ms;
    transition-delay: calc(min(var(--motion-order, 0), 3) * 55ms);
  }

  .lead-capture::after,
  .home-portal-compact::after,
  .partner-section::after { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  .motion-reveal,
  .motion-ready .motion-reveal {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}