/* MD7: vidro no hero.
   Pílulas ovaladas de vidro flutuam em tela cheia atrás do título: brancas no meio,
   laranja nas pontas, em degradê suave. Uma passa na frente e refrata o texto.
   O CTA é uma cápsula de vidro laranja.
   Efeito adaptado em CSS puro do componente "liquid glass button" (React + Tailwind):
   backdrop-filter com filtro SVG (#vidro-liquido e #vidro-disco, no fim do index.html).
   Filtro SVG em backdrop-filter só age em navegador Chromium. Safari e Firefox caem
   para desfoque comum: vidro fosco no lugar de vidro líquido. */

/* O SVG só guarda os filtros: fora do fluxo para não abrir espaço no fim da página */
.filtros { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Pílulas ---------- */

.pilulas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.pilulas--fundo { z-index: 0; }
.pilulas--frente { z-index: 2; }

/* Cada pílula define --l --t (posição), --w (comprimento), --razao (altura sobre
   comprimento), --giro, --dur (flutuação) e --prof (paralaxe com o mouse). */
.pilula {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: calc(var(--w) * var(--razao));
  rotate: var(--giro);
  translate: calc(var(--px, 0) * var(--prof) * 1px) calc(var(--py, 0) * var(--prof) * 1px);
  transition: translate 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sombra solta no chão, com um pouco do laranja das pontas */
.pilula::after {
  content: "";
  position: absolute;
  left: 4%; right: 4%;
  top: 62%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 50, 20, 0.2), rgba(120, 50, 20, 0));
}

/* Corpo: nem elipse nem cápsula reta. Raio de 40% no comprimento deixa as pontas ovaladas.
   Três camadas: brilho, volume (claro em cima, sombra embaixo) e cor (laranja, branco, laranja).
   Os tons intermediários são o laranja da marca misturado com branco: sem patamar, o degradê não marca faixa. */
.pilula__corpo {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 40% / 50%;
  background:
    radial-gradient(44% 24% at 36% 15%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 34%, rgba(110, 40, 12, 0) 60%, rgba(110, 40, 12, 0.2) 100%),
    linear-gradient(90deg, var(--laranja) 0%, var(--laranja-hover) 8%, #FFB59B 22%, #FFEDE6 36%, var(--branco) 50%, #FFEDE6 64%, #FFB59B 78%, var(--laranja-hover) 92%, var(--laranja) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 2px 3px rgba(255, 255, 255, 0.95),
    inset 0 -2px 3px rgba(255, 255, 255, 0.45),
    inset 0 -16px 28px -12px rgba(110, 40, 12, 0.34);
}
/* Degradê em oklab: a passagem do laranja para o branco não acinzenta no meio */
@supports (background: linear-gradient(90deg in oklab, red, blue)) {
  .pilula__corpo {
    background:
      radial-gradient(44% 24% at 36% 15%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 72%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 34%, rgba(110, 40, 12, 0) 60%, rgba(110, 40, 12, 0.2) 100%),
      linear-gradient(90deg in oklab, var(--laranja) 0%, var(--laranja-hover) 8%, #FFB59B 22%, #FFEDE6 36%, var(--branco) 50%, #FFEDE6 64%, #FFB59B 78%, var(--laranja-hover) 92%, var(--laranja) 100%);
  }
}

/* Pílula que passa na frente do texto: translúcida, com refração */
.pilula--lente .pilula__corpo {
  background:
    radial-gradient(46% 38% at 30% 16%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 36%, rgba(110, 40, 12, 0) 60%, rgba(110, 40, 12, 0.16) 100%),
    linear-gradient(90deg, rgba(255, 69, 0, 0.66) 0%, rgba(255, 90, 31, 0.56) 10%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.2) 60%, rgba(255, 90, 31, 0.6) 90%, rgba(255, 69, 0, 0.72) 100%);
  -webkit-backdrop-filter: blur(5px) saturate(140%);
  backdrop-filter: blur(5px) saturate(140%);
}

/* Posições: celular primeiro */
.pilula--1 { --l: -6%;  --t: 12%; --w: 40vw; --razao: 0.44; --giro: -58deg; --dur: 13s; --prof: 10; }
.pilula--2 { display: none; }
.pilula--3 { --l: 58%;  --t: 11%; --w: 56vw; --razao: 0.42; --giro: -28deg; --dur: 17s; --prof: 16; }
.pilula--4 { --l: -24%; --t: 78%; --w: 54vw; --razao: 0.44; --giro: 20deg;  --dur: 15s; --prof: 20; }
.pilula--5 { --l: 93%;  --t: 27%; --w: 40vw; --razao: 0.46; --giro: 16deg;  --dur: 19s; --prof: 26; }
.pilula--6 { display: none; }
.pilula--7 { --l: 60%;  --t: 88%; --w: 38vw; --razao: 0.42; --giro: -40deg; --dur: 14s; --prof: 12; }

@media (min-width: 48rem) {
  .pilula--1 { --l: 22%; --t: 17%; --w: clamp(9rem, 14vw, 17rem); }
  .pilula--2 { display: block; --l: 47%; --t: -7%; --w: clamp(11rem, 17vw, 21rem); --razao: 0.44; --giro: 10deg; --dur: 21s; --prof: 8; }
  .pilula--3 { --l: 67%; --t: 13%; --w: clamp(13rem, 20vw, 25rem); }
  .pilula--4 { --l: 6%;  --t: 46%; --w: clamp(13rem, 20vw, 25rem); }
  .pilula--5 { --l: 77%; --t: 31%; --w: clamp(14rem, 22vw, 28rem); }
  .pilula--6 { display: block; --l: 13%; --t: 82%; --w: clamp(10rem, 15vw, 19rem); --razao: 0.4; --giro: -10deg; --dur: 16s; --prof: 14; }
  .pilula--7 { --l: 66%; --t: 74%; --w: clamp(10rem, 15vw, 19rem); }
}

/* ---------- CTA: cápsula de vidro laranja ---------- */

.vidro {
  position: relative;
  z-index: 3;
  min-height: 3.5rem;
  padding-inline: 2.5rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 90, 31, 0.86), rgba(255, 69, 0, 0.92));
  box-shadow:
    0 2px 6px rgba(10, 10, 11, 0.12),
    0 14px 30px -12px rgba(255, 69, 0, 0.6);
  transition: transform 0.2s var(--sobe), box-shadow 0.2s ease;
}
.vidro:hover { background: linear-gradient(180deg, rgba(255, 90, 31, 0.86), rgba(255, 69, 0, 0.92)); }
.vidro:active { transform: scale(0.97); }
.vidro:focus-visible { border-radius: 999px; }

.vidro__lente,
.vidro__brilho {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
/* Lente: refrata o que passar atrás e carrega as manchas de luz do líquido */
.vidro__lente {
  background:
    radial-gradient(38% 90% at 16% 22%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 72%),
    radial-gradient(30% 80% at 80% 88%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 72%),
    radial-gradient(24% 60% at 58% 10%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 72%);
  -webkit-backdrop-filter: blur(4px) saturate(160%);
  backdrop-filter: blur(4px) saturate(160%);
}
/* Mesmas sombras do componente original (modo claro), no Preto Profundo, e um reflexo no alto */
.vidro__brilho {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 44%);
  box-shadow:
    inset 3px 3px 0.5px -3px rgba(10, 10, 11, 0.9),
    inset -3px -3px 0.5px -3px rgba(10, 10, 11, 0.85),
    inset 1px 1px 1px -0.5px rgba(10, 10, 11, 0.6),
    inset -1px -1px 1px -0.5px rgba(10, 10, 11, 0.6),
    inset 0 0 6px 6px rgba(10, 10, 11, 0.10),
    inset 0 0 2px 2px rgba(10, 10, 11, 0.06),
    inset 0 2px 1px -1px rgba(255, 255, 255, 0.95);
}
.vidro__texto { position: relative; }

/* Só Chromium aplica filtro SVG em backdrop-filter. Firefox e Safari ficam com o desfoque. */
@supports (backdrop-filter: url("#a")) and (not (-moz-appearance: none)) and (not (font: -apple-system-body)) {
  .vidro__lente {
    -webkit-backdrop-filter: url("#vidro-liquido") saturate(150%);
    backdrop-filter: url("#vidro-liquido") saturate(150%);
  }
  .pilula--lente .pilula__corpo {
    -webkit-backdrop-filter: url("#vidro-disco");
    backdrop-filter: url("#vidro-disco");
  }
}

/* Hover só para mouse: no toque, o estado preso depois do toque atrapalha. */
@media (hover: hover) and (pointer: fine) {
  .vidro:hover {
    transform: scale(1.04);
    box-shadow:
      0 2px 6px rgba(10, 10, 11, 0.12),
      0 20px 38px -14px rgba(255, 69, 0, 0.7);
  }
  .vidro:hover:active { transform: scale(0.97); }
}

/* Flutuação lenta. Parada com movimento reduzido. */
@media (prefers-reduced-motion: no-preference) {
  .pilula { animation: flutuar var(--dur) ease-in-out infinite alternate; }
  .pilula:nth-child(even) { animation-direction: alternate-reverse; }
}
@keyframes flutuar {
  from { transform: translate3d(0, 0.6rem, 0) rotate(-2deg); }
  to   { transform: translate3d(0, -0.9rem, 0) rotate(3deg); }
}