*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

.pointer-events-auto {
  pointer-events: auto;
}

.visible {
  visibility: visible;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inset-0 {
  inset: 0px;
}

.bottom-2 {
  bottom: 0.5rem;
}

.left-1\/2 {
  left: 50%;
}

.left-2 {
  left: 0.5rem;
}

.right-2 {
  right: 0.5rem;
}

.top-1\/2 {
  top: 50%;
}

.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.h-12 {
  height: 3rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-auto {
  height: auto;
}

.w-12 {
  width: 3rem;
}

.w-2 {
  width: 0.5rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-72 {
  width: 18rem;
}

.w-8 {
  width: 2rem;
}

.w-full {
  width: 100%;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-md {
  max-width: 28rem;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
  cursor: pointer;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.resize {
  resize: both;
}

.list-none {
  list-style-type: none;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.items-stretch {
  align-items: stretch;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.375rem * var(--tw-space-x-reverse));
  margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.overflow-hidden {
  overflow: hidden;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.hyphens-auto {
  -webkit-hyphens: auto;
          hyphens: auto;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-gray-600 {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.border-gray-700\/50 {
  border-color: rgb(55 65 81 / 0.5);
}

.border-indigo-500\/50 {
  border-color: rgb(99 102 241 / 0.5);
}

.border-transparent {
  border-color: transparent;
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}

.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.bg-gray-800\/40 {
  background-color: rgb(31 41 55 / 0.4);
}

.bg-gray-900\/30 {
  background-color: rgb(17 24 39 / 0.3);
}

.bg-gray-900\/50 {
  background-color: rgb(17 24 39 / 0.5);
}

.bg-indigo-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}

.bg-indigo-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(49 46 129 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
  background-color: transparent;
}

.bg-white\/50 {
  background-color: rgb(255 255 255 / 0.5);
}

.bg-opacity-75 {
  --tw-bg-opacity: 0.75;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-tight {
  line-height: 1.25;
}

.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}

.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-indigo-200 {
  --tw-text-opacity: 1;
  color: rgb(199 210 254 / var(--tw-text-opacity, 1));
}

.text-indigo-300 {
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}

.text-indigo-400 {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}

.text-pink-300 {
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.opacity-80 {
  opacity: 0.8;
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-black {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
}

.ring-opacity-5 {
  --tw-ring-opacity: 0.05;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-700 {
  transition-duration: 700ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.open\:bg-gray-800\/80[open] {
  background-color: rgb(31 41 55 / 0.8);
}

.hover\:border-indigo-500\/50:hover {
  border-color: rgb(99 102 241 / 0.5);
}

.hover\:bg-black\/70:hover {
  background-color: rgb(0 0 0 / 0.7);
}

.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.hover\:bg-indigo-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:text-indigo-100:hover {
  --tw-text-opacity: 1;
  color: rgb(224 231 255 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.group[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 640px) {
  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 768px) {
  .md\:bottom-4 {
    bottom: 1rem;
  }

  .md\:left-4 {
    left: 1rem;
  }

  .md\:right-4 {
    right: 1rem;
  }

  .md\:ml-2 {
    margin-left: 0.5rem;
  }

  .md\:inline {
    display: inline;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.apps-free-section {
    position: relative;
    z-index: 5;
    text-align: center;
    margin: 42px auto 56px auto;
    padding: 10px 16px;
}

/* Botão principal cromado / prateado */
.chrome-apps-button {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 22px;
    padding: 24px 46px;
    min-width: min(92vw, 420px);
    cursor: pointer;
    background:
    linear-gradient(145deg,
        #f5fcff 0%,
        #9bdcff 12%,
        #e9f8ff 25%,
        #68bce8 42%,
        #d9f3ff 55%,
        #499fd2 72%,
        #bceaff 88%,
        #f5fcff 100%);
    box-shadow:
        0 10px 0 rgba(64, 68, 76, 0.95),
        0 22px 38px rgba(0, 0, 0, 0.65),
        inset 0 2px 2px rgba(255, 255, 255, 0.95),
        inset 0 -5px 12px rgba(40, 43, 50, 0.45),
        0 0 28px rgba(255, 255, 255, 0.22);
    transform: translateY(0);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.chrome-apps-button:hover {
    transform: translateY(-3px);
    filter: brightness(1.08) contrast(1.05);
    box-shadow:
        0 13px 0 rgba(64, 68, 76, 0.95),
        0 28px 48px rgba(0, 0, 0, 0.72),
        inset 0 2px 3px rgba(255, 255, 255, 1),
        inset 0 -5px 14px rgba(40, 43, 50, 0.48),
        0 0 38px rgba(255, 255, 255, 0.36);
}

.chrome-apps-button:active {
    transform: translateY(6px);
    box-shadow:
        0 4px 0 rgba(64, 68, 76, 0.95),
        0 12px 24px rgba(0, 0, 0, 0.65),
        inset 0 3px 8px rgba(0, 0, 0, 0.28);
}

.chrome-text {
    position: relative;
    z-index: 2;
    display: block;
    color: #12151c;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 800;
    letter-spacing: 0.03em;
    text-align: center;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95),
        0 -1px 0 rgba(0, 0, 0, 0.18);
}

.chrome-shine {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg,
            transparent 0%,
            transparent 28%,
            rgba(255, 255, 255, 0.75) 42%,
            rgba(255, 255, 255, 0.25) 50%,
            transparent 62%,
            transparent 100%);
    transform: translateX(-120%);
    animation: chromeButtonShine 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes chromeButtonShine {
    0%, 35% {
        transform: translateX(-120%);
    }
    58%, 100% {
        transform: translateX(120%);
    }
}

/* Modal */
.apps-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999998;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 38%),
        rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.apps-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.apps-modal-box {
    position: relative;
    width: min(1100px, 96vw);
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 28px;
    padding: 34px 28px 32px;
    background:
        linear-gradient(145deg, rgba(18, 18, 24, 0.96), rgba(5, 5, 8, 0.98)),
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 32%);
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.88),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 40px rgba(180, 180, 210, 0.12);
    transform: scale(0.94) translateY(12px);
    transition: transform 0.28s ease;
}

.apps-modal-overlay.active .apps-modal-box {
    transform: scale(1) translateY(0);
}

.apps-modal-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.09) 22%,
            transparent 38%,
            transparent 100%);
}

.apps-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 3;
}

.apps-modal-close:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: rotate(90deg) scale(1.05);
}

.apps-modal-header {
    text-align: center;
    margin: 4px auto 30px;
    max-width: 780px;
    position: relative;
    z-index: 2;
}

.apps-modal-kicker {
    display: inline-block;
    margin-bottom: 8px;
    color: #d7d7df;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

.apps-modal-header h2 {
    margin: 0 0 12px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    text-shadow:
        0 0 14px rgba(255, 255, 255, 0.28),
        0 0 34px rgba(168, 85, 247, 0.22);
}

.apps-modal-header p {
    margin: 0;
    color: rgba(235, 235, 245, 0.78);
    font-size: 1rem;
    line-height: 1.7;
}

.apps-modal-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.apps-modal-card {
    position: relative;
    min-height: 96px;
    padding: 20px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background:
        linear-gradient(145deg, rgba(161, 24, 174, 0.92), rgba(84, 16, 96, 0.96));
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 0 rgba(48, 8, 58, 0.95),
        0 18px 32px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.apps-modal-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 17px;
    background:
        linear-gradient(120deg,
            rgba(255, 255, 255, 0.18),
            transparent 38%,
            rgba(255, 255, 255, 0.05));
    pointer-events: none;
}

.apps-modal-card:hover {
    transform: translateY(-4px);
    filter: brightness(1.13);
    box-shadow:
        0 12px 0 rgba(48, 8, 58, 0.95),
        0 25px 45px rgba(0, 0, 0, 0.58),
        0 0 24px rgba(218, 90, 255, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.apps-modal-card:active {
    transform: translateY(4px);
    box-shadow:
        0 4px 0 rgba(48, 8, 58, 0.95),
        0 12px 24px rgba(0, 0, 0, 0.48),
        inset 0 3px 8px rgba(0, 0, 0, 0.3);
}

.apps-modal-card span {
    position: relative;
    z-index: 2;
    line-height: 1.35;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Responsivo */
@media (max-width: 900px) {
    .apps-modal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .chrome-apps-button {
        min-width: 88vw;
        padding: 20px 22px;
        border-radius: 18px;
    }

    .apps-modal-overlay {
        padding: 14px;
    }

    .apps-modal-box {
        padding: 30px 16px 24px;
        border-radius: 22px;
    }

    .apps-modal-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .apps-modal-card {
        min-height: 82px;
    }
}

/* --- CÓDIGO MOVIDO DO HTML PARA O CSS (24/03/2026) --- */

/* --- NOVO EFEITO DE FUNDO (STYLES) --- */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    background-color: transparent !important; /* Mudamos para transparente */
    background: transparent !important;       /* Garantia extra */
    min-height: 100vh;
}

#canvas-container {
    position: fixed; /* Alterado de absolute para fixed para cobrir a rolagem */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Colocado atrás de tudo */
    /* Degradê radial sutil atrás do canvas 3D para profundidade */
    background: radial-gradient(circle at center, #1a0524 0%, #000000 70%);
    pointer-events: none; /* Garante que cliques passem para o site */
}
        
/* Separador Místico com Estrela - Estilo Azul Estelar */
.ornament-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0;
    opacity: 1;
}

.ornament-divider::before,
.ornament-divider::after {
    content: '';
    flex: 1;
    max-width: 120px;
    height: 2px;
    /* Gradiente azul claro/branco que desaparece nas pontas */
    background: linear-gradient(90deg, transparent, #a5b4fc, #e0e7ff, transparent);
    /* Adiciona um brilho azul suave ao redor da linha */
    box-shadow: 0 0 8px rgba(165, 180, 252, 0.7);
    border-radius: 2px;
}

.ornament-symbol {
    color: #e0e7ff; /* Cor branca azulada */
    font-size: 1.4rem;
    /* Adiciona um brilho azul celestial ao símbolo */
    text-shadow: 0 0 10px rgba(165, 180, 252, 0.9), 0 0 20px rgba(199, 210, 254, 0.6);
}

/* Loading overlay */
#loader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1s ease;
}

/* Spinner */
.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(167, 139, 250, 0.3);
    border-radius: 50%;
    border-top-color: #a78bfa;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* GERAL DO SITE */
html { scroll-behavior: smooth; }
body {
    font-family: 'Poppins', sans-serif;
    color: #e2e8f0; /* Texto claro padrão */
    position: relative; 
    min-height: 100vh;
}
        
/* Estilo para o ponto ativo do carrossel */
.carousel-dot.active {
    background-color: white;
    transform: scale(1.2);
}

body.modal-open { overflow: hidden; }
        
/* --- ESTILOS FINAIS PARA O CONTADOR --- */
.final-counter-marquee-container {
    width: 95%;
    max-width: 450px; 
    height: 38px; 
    overflow: hidden;
    margin: 1rem auto;
    padding: 0;
    display: flex;
    align-items: center;
    /* VIDRO MAIS TRANSPARENTE */
    background-color: rgba(20, 20, 30, 0.25);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-sizing: border-box;
    position: relative;
}

.final-counter-marquee-content {
    font-family: 'Comfortaa', cursive;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
    white-space: nowrap;
    color: #e2e8f0; /* Texto claro */
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1;
    display: inline-block;
    position: absolute; 
    will-change: transform;
    animation: marquee-contador-final 10s linear infinite;
}

.final-counter-marquee-content span {
    color: #93c5fd; /* Azul claro neon */
    font-weight: 700;
}

@keyframes marquee-contador-final {
    0% { transform: translateX(100%); } 
    100% { transform: translateX(-100%); } 
}

@media (max-width: 639px) {
    .final-counter-marquee-container {
        max-width: 300px;
        height: 34px;
    }
    .final-counter-marquee-content {
        font-size: 0.85rem;
    }
}
        
/* === ESTILOS GERAIS DO MODAL === */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Menos opaco o fundo geral */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    padding: 1rem;
}

.modal.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
    z-index: 999999;
    pointer-events: auto;
}

.modal .modal-content-meditacao {
    /* Vidro Modal */
    background: rgba(30, 30, 40, 0.5); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(100, 149, 237, 0.3);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    max-height: 90vh; 
    overflow-y: auto; 
    color: #e2e8f0;
}

.modal.active .modal-content-meditacao {
    transform: scale(1);
}

.modal .modal-close-button {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    text-align: center;
    transition: color 0.2s ease;
}

.modal .modal-close-button:hover {
    color: #ffffff;
}

/* --- TIPOGRAFIA MÍSTICA --- */
.mystic-font { font-family: 'Marcellus', serif !important; letter-spacing: 0.02em; }
        
.content-card h2, .service-card h3, #sobre p, #servicos p {
    font-family: 'Marcellus', serif;
}

.content-container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; position: relative; z-index: 1; overflow-x: hidden; }

/* === CARDS DE MATERIAIS EXTRAS === */
.extra-material-card {
    display: block;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px); /* Adicionado blur */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.75rem;
    padding: 1.25rem; 
    text-align: center;
    text-decoration: none;
    color: #E5E7EB;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.extra-material-card:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
    border-color: rgba(147, 197, 253, 0.4);
}

.extra-material-card h3 {
    font-size: 1.25rem; 
    font-weight: 600;
    color: #93C5FD; 
    margin: 0 0 0.5rem 0; 
}

.extra-material-card p {
    font-size: 0.9rem; 
    color: #D1D5DB; 
    margin-bottom: 0;
}

.extra-material-card svg {
    color: #93C5FD;
}
        
/* ESTILOS DO LETREIRO SUPERIOR */
.marquee-container {
    width: 90%; max-width: 1000px; overflow: hidden; padding: 1.5rem 1rem;
    /* Efeito Vidro Transparente */
    background-color: rgba(255, 255, 255, 0.05); 
    border-radius: 15px; 
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px); /* Blur suave para ver particulas difusas */
    -webkit-backdrop-filter: blur(6px);
    position: relative; margin: 2rem auto;
}
        
.fade-sign-text {
    font-family: 'Comfortaa', cursive;
    text-shadow: 0 0 5px rgba(147, 197, 253, 0.6);
    color: #e2e8f0; 
    font-weight: 500;
    text-align: center;
    width: 100%;
    opacity: 0; /* Inicia invisível nas sombras */
    transition: opacity 1s ease-in-out; /* O segredo do surgimento suave */
}

.fade-sign-text.visible {
    opacity: 1; /* Revela o texto */
}

/* CAIXAS DE CONTEÚDO PRINCIPAL - VIDRO TRANSPARENTE */
.content-card {
    /* Opacidade reduzida (0.3) para transparência */
    background-color: rgba(20, 20, 35, 0.3); 
    /* Blur ajustado para ser 'difuso' (6px a 8px) */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 3rem; 
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    color: #f3f4f6; /* Texto claro */
}
@media (min-width: 768px) { .content-card { padding: 2rem; } }
        
/* AJUSTE DE CORES DOS TÍTULOS */
.title-dark-blue {
    color: #a5b4fc !important; /* Azul Lavanda Claro para contraste no escuro */
    text-shadow: 0 0 10px rgba(165, 180, 252, 0.4);
}

.glow-effect {
    color: #e2e8f0;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
        
/* Efeito especial para o texto de destaque nas datas */
.pulsating-led-text { 
    color: #fca5a5; /* Vermelho claro */
    animation: pulse-red 2s infinite ease-in-out; 
}
@keyframes pulse-red { 
    0%, 100% { text-shadow: 0 0 8px rgba(248, 113, 113, 0.5); opacity: 0.9; } 
    50% { text-shadow: 0 0 15px rgba(252, 165, 165, 0.8); opacity: 1; } 
}

/* CARDS DE SERVIÇOS - VIDRO TRANSPARENTE */
.service-card {
    background: rgba(255, 255, 255, 0.05); /* Bem transparente */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem; 
    padding: 1.5rem; 
    transition: all 0.3s ease-in-out; 
    backdrop-filter: blur(6px); /* Efeito difuso */
    -webkit-backdrop-filter: blur(6px);
    color: #d1d5db; 
}
.service-card:hover {
    transform: scale(1.02);
    border-color: rgba(147, 197, 253, 0.3);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
        
.service-card h3 {
    color: #fcd34d; /* Dourado claro */
}

.service-card p.text-justify, #sobre p.text-justify { 
    text-align: justify; 
    color: #cbd5e1; /* Cinza claro */
}

/* Botões (Mantidos estilo 3D mas garantindo contraste) */
.btn-3d-lapis-steel {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 1rem 2rem; border-radius: 9999px; font-size: 1.125rem; font-weight: 600;
    transition: all 0.2s ease-in-out; text-align: center; position: relative; overflow: hidden; cursor: pointer;
    min-height: 4rem; height: auto; width: 18rem;
    
    /* MUDANÇA: Texto Púrpura Claro Suave */
    color: #fae8ff;
    
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    
    /* MUDANÇA: Degradê Púrpura/Ameixa (mais avermelhado) */
    background: linear-gradient(to bottom, #a21caf 0%, #86198f 50%, #701a75 100%);
    
    /* MUDANÇA: Bordas e sombras ajustadas para o tom púrpura escuro profundo */
    border: 1px solid #701a75;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 3px 0px #4a044e, 0 5px 8px rgba(0, 0, 0, 0.5);
}

.btn-3d-lapis-steel:hover { transform: translateY(-2px); filter: brightness(1.2); }
.btn-3d-lapis-steel:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 0px #4a044e; }
.btn-3d-lapis-steel > span { display: block; }

.btn-3d-square-steel {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 1rem 2rem; border-radius: 0.75rem; font-size: 1.125rem; font-weight: 600;
    transition: all 0.2s ease-in-out; text-align: center; position: relative; overflow: hidden; cursor: pointer;
    min-height: 4rem; height: auto; width: 18rem;
    
    /* MUDANÇA 1: Cor do texto (Púrpura Claro Suave) */
    color: #fae8ff; 
    
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    
    /* MUDANÇA 2: Fundo degradê Púrpura/Ameixa */
    background: linear-gradient(to bottom, #a21caf 0%, #86198f 50%, #701a75 100%);
    
    /* MUDANÇA 3: Borda e Sombra inferior ajustadas para o tom púrpura escuro */
    border: 1px solid #701a75;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 3px 0px #4a044e, 0 5px 8px rgba(0, 0, 0, 0.5);
}

/* Mantém o efeito ao passar o mouse */
.btn-3d-square-steel:hover { transform: translateY(-2px); filter: brightness(1.2); }
.btn-3d-square-steel:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 0px #4a044e; }
.btn-3d-square-steel > span { display: block; }
        
.btn-3d-violet { 
    display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.8rem; border-radius: 9999px; 
    font-size: 1rem; font-weight: 600; transition: all 0.2s ease-in-out; text-align: center; cursor: pointer; 
    min-height: 3.5rem; height: 3.5rem; width: auto; color: #FFFFFF; text-shadow: 0 1px 1px rgba(0,0,0,0.3); 
    background: linear-gradient(to bottom, #a67b5b 0%, #8c5b41 100%); border: 1px solid #5e402d; 
    box-shadow: 0 3px 0px #5e402d, 0 5px 8px rgba(0, 0, 0, 0.5); 
}
.btn-3d-violet:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn-3d-violet:active { transform: translateY(1px); box-shadow: 0 1px 0px #5e402d; }

.btn-3d-gold {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.65rem 1.8rem; border-radius: 9999px; font-size: 1rem; font-weight: 600;
    transition: all 0.2s ease-in-out; text-align: center; cursor: pointer;
    min-height: 3.5rem; height: 3.5rem; width: auto; 
    color: #0a192f; /* Azul bem escuro, quase preto */
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); /* Sombra clarinha para dar relevo ao texto */
    background: linear-gradient(to bottom, #ffffff 0%, #e0e7ff 50%, #c7d2fe 100%); /* Azul estelar quase branco */
    border: 1px solid #a5b4fc; /* Borda suave azulada */
    box-shadow: 0 3px 0px #818cf8, 0 5px 8px rgba(0, 0, 0, 0.3); /* Base 3D azulada mantendo o estilo do site */
}

.btn-3d-gold:hover { 
    transform: translateY(-2px); 
    color: #020617; /* Mantém o texto escuro no hover */
    background: linear-gradient(to bottom, #ffffff 0%, #edf2ff 50%, #e0e7ff 100%); /* Brilho mais claro ao passar o mouse */
    box-shadow: 0 5px 0px #818cf8, 0 7px 10px rgba(0, 0, 0, 0.3);
}

.btn-3d-gold:active { 
    transform: translateY(1px); 
    box-shadow: 0 1px 0px #818cf8, 0 3px 5px rgba(0, 0, 0, 0.3); /* Efeito de afundar o botão ao clicar */
}

/* Ajuste do botão "Cursos de..." para ter texto legível */
/* Botões das Categorias de Cursos (Harmonizado) */
.btn-3d-polished-blue { 
    display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 2rem; 
    border-radius: 9999px; font-size: 1.125rem; font-weight: 600; transition: all 0.2s ease-in-out; 
    text-align: center; position: relative; overflow: hidden; cursor: pointer; 
    
    /* Mantendo as dimensões originais */
    height: 4rem; width: 18rem; min-height: 4rem; 
    
    /* MUDANÇA: Texto Púrpura Claro */
    color: #fae8ff;
    
    /* MUDANÇA: Degradê Púrpura/Ameixa */
    background: linear-gradient(to bottom, #a21caf 0%, #86198f 50%, #701a75 100%); 
    
    /* MUDANÇA: Ajuste de borda para o tema */
    border: 1px solid #701a75; 
    
    /* Sombra com um leve brilho púrpura avermelhado externo para destacar a categoria */
    box-shadow: 0 3px 0px #4a044e, 0 0 15px rgba(162, 28, 175, 0.4); 
    
    backdrop-filter: blur(5px);
}

.btn-3d-polished-blue:hover { 
    transform: translateY(-2px); 
    filter: brightness(1.2); 
    /* Aumenta o brilho púrpura externo ao passar o mouse */
    box-shadow: 0 5px 0px #4a044e, 0 0 20px rgba(162, 28, 175, 0.7);
}

.btn-3d-polished-blue:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 0px #4a044e;
}
        
.btn-3d-lapis-neon { 
    display: inline-flex; align-items: center; justify-content: center; padding: 0.8rem 2.2rem; border-radius: 9999px; 
    font-size: 1.1rem; font-weight: 700; transition: all 0.2s ease-in-out; text-align: center; cursor: pointer; 
    min-height: 3.8rem; height: 3.8rem; width: auto; color: #FFFFE0; 
    text-shadow: 0 0 4px rgba(255, 255, 224, 0.9); 
    background: linear-gradient(145deg, #A0B4C8 5%, #5A7CA8 30%, #26508C 70%, #1A355D 100%); 
    border: 1px solid #142A4A; box-shadow: 0 4px 0px #0E1F35, 0 6px 12px rgba(0, 0, 0, 0.5); 
}

.ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple-animation 0.6s linear; pointer-events: none; z-index: 1; background-color: rgba(255, 255, 255, 0.4); }
@keyframes ripple-animation { to { transform: scale(4); opacity: 0; } }
        
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.75rem; border: 0; }
        
a.text-indigo-300 { color: #fdba74; }
a.hover\:text-indigo-100:hover { color: #ffedd5; }

footer {color: #9ca3af;}
footer hr { border-color: rgba(255, 255, 255, 0.1); margin: 1rem auto; width: 25%; }
footer p { margin-bottom: 0.5rem; }
.hidden-modal-content { display: none; }

/* === SWIPER ATUALIZAÇÕES - VIDRO TRANSPARENTE === */
#atualizacoes-carousel-section { position: relative; }
.atualizacoes-swiper { width: 100%; max-width: 500px; padding-top: 20px; padding-bottom: 50px; margin-left: auto; margin-right: auto; }
.swiper-slide { display: flex; justify-content: center; align-items: flex-start; text-align: center; font-size: 18px; background: transparent; }
.update-card-link { display: block; color: inherit; text-decoration: none; width: 100%; }
        
@keyframes pulse-neon-blue {
    0%, 100% {
        border-color: rgba(100, 149, 237, 0.8);
        box-shadow: 0 0 8px rgba(13, 47, 102, 0.6), 0 0 15px rgba(13, 47, 102, 0.5);
    }
    50% {
        border-color: rgba(173, 216, 230, 1);
        box-shadow: 0 0 15px rgba(100, 149, 237, 0.9), 0 0 30px rgba(100, 149, 237, 0.7);
    }
}

.update-card {
    /* Vidro Transparente para os cards */
    background-color: rgba(40, 40, 50, 0.3); 
    backdrop-filter: blur(6px); 
    -webkit-backdrop-filter: blur(6px);
    border: 2px solid rgba(255, 215, 0, 0.7); 
    border-radius: 16px;
    padding: 2rem 1.5rem;
    width: 100%;
    max-width: 450px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    transition: transform 0.3s ease;
}
        
.update-card:hover { transform: scale(1.03); background-color: rgba(50, 50, 60, 0.4); }
.update-card-title { font-family: 'Comfortaa', cursive; font-size: clamp(1.3rem, 4vw, 1.7rem); font-weight: 700; margin-bottom: 1.5rem; letter-spacing: 0.03em; }
.update-card-list { list-style: none; padding: 0; margin: 0; width: 100%; }
.update-card-list li { font-family: 'Poppins', sans-serif; font-size: clamp(0.95rem, 2.5vw, 1.1rem); font-weight: 500; margin-bottom: 0.8rem; line-height: 1.5; }
.update-card-list li:last-child { margin-bottom: 0; }
        
/* Neon text colors */
.title-neon-pink, .item-neon-pink { color: #ffc0cb; text-shadow: 0 0 5px rgba(255, 192, 203, 0.7); }
.title-neon-blue, .item-neon-blue { color: #93c5fd; text-shadow: 0 0 5px rgba(147, 197, 253, 0.7); }
.title-neon-yellow, .item-neon-yellow { color: #fde047; text-shadow: 0 0 5px rgba(253, 224, 71, 0.7); }
.item-neon-green { color: #86efac; text-shadow: 0 0 5px rgba(134, 239, 172, 0.7); }
        
.card-segunda,.card-quinta, .card-domingo, .card-sabado { animation: pulse-neon-blue 1s infinite linear; }


/* Pontinhos inativos (agora brancos, maiores e com leve brilho) */
.swiper-pagination-bullet { 
    background-color: #ffffff !important; 
    opacity: 0.6 !important; 
    width: 8px !important; 
    height: 8px !important; 
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
    margin: 0 6px !important; /* Dá um espacinho melhor entre eles */
}

/* Pontinho ativo (azul neon, ainda maior e com brilho) */
.swiper-pagination-bullet-active { 
    background-color: #93c5fd !important; 
    opacity: 1 !important; 
    transform: scale(1.3) !important; 
    box-shadow: 0 0 10px rgba(147, 197, 253, 0.9);
}
.swiper-button-next, .swiper-button-prev { color: #e2e8f0; background-color: rgba(0, 0, 0, 0.3); border-radius: 50%; padding: 5px; width: 40px; height: 40px; }
.swiper-button-next:hover, .swiper-button-prev:hover { background-color: rgba(255,255,255,0.2); color: #ffffff; }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 18px !important; font-weight: bold; }
@media (max-width: 639px) { .atualizacoes-swiper { max-width: 90%; } .update-card { min-height: 280px; } .swiper-button-next { right: 0px; } .swiper-button-prev { left: 0px; } }

#push-toast.show { opacity: 1; pointer-events: auto; }

/* Botão Assistente IA */
.ia-assistant-button-container { text-align: center; margin: 30px 0; }
.styled-video-button { 
    display: inline-block; padding: 15px 40px; font-size: 1.5rem; font-family: 'Nunito', sans-serif; font-weight: 700; 
    color: #FFFFE0; background: linear-gradient(145deg, #2c3e50, #1a2533); border: none; border-radius: 50px; 
    position: relative; cursor: pointer; transition: all 0.2s ease-out; 
    text-shadow: 0 0 5px #FFFFA0; box-shadow: 0 6px 0 #0e131a, inset 0 1px 2px rgba(255, 255, 255, 0.15), 0 8px 15px rgba(0,0,0,0.5); 
    transform-style: preserve-3d; text-decoration: none; outline: none; white-space: nowrap; line-height: 1.3; text-align: center;
}
.styled-video-button:hover { 
    background: linear-gradient(145deg, #34495e, #212d3b); transform: translateY(2px); box-shadow: 0 4px 0 #0e131a; 
}
.styled-video-button:active { transform: translateY(4px); box-shadow: 0 2px 0 #0e131a; }

/* Modal do IA - Vidro Escuro */
#ia-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.85); z-index: 9999;
    display: flex; justify-content: center; align-items: center; backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.3s ease-out;
}
#ia-modal-content {
    width: 100%; max-width: 550px; background-color: rgba(30, 41, 59, 0.95); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; padding: 30px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7); color: #fefcbf; 
    font-family: 'Nunito', sans-serif; transform: scale(0.8); transition: all 0.3s ease-in-out; opacity: 0;
}
#ia-modal-overlay[data-open="true"] { opacity: 1; }
#ia-modal-overlay[data-open="true"] #ia-modal-content { opacity: 1; transform: scale(1); }
        
@media (max-width: 600px) {
    .styled-video-button { padding: 12px 25px; font-size: 0.9rem; white-space: normal; }
    #ia-modal-content { padding: 20px; }
}
        
#holo-search-container {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(12, 12, 16, 0.65);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(147, 197, 253, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
    border-radius: 50px;
    padding: 10px 20px;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 20px rgba(147, 197, 253, 0.05);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
    width: 90%;
    max-width: 550px; /* Limite expandido para dar mais espaço */
    margin: -20px auto 60px auto;
    position: relative;
    z-index: 100;
}

#holo-search-container:hover {
    border-top-color: rgba(147, 197, 253, 0.6);
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.9),
        0 0 30px rgba(147, 197, 253, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

#holo-search-container.is-floating {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    margin: 0;
}

#holo-search-container.is-floating:hover {
    transform: translateX(-50%) translateY(-2px);
}

#holo-search-input {
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
    
    /* A mágica do Neon atuando no texto real que você digita e clica: */
    color: #93c5fd;
    text-shadow: 0 0 10px rgba(147, 197, 253, 0.9);
    
    padding: 8px 15px;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.9rem, 1.5vw + 0.4rem, 1.1rem);
    outline: none;
    border-radius: 10px;
    transition: all 0.3s ease;
}

#holo-search-input:focus {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(147, 197, 253, 0.5);
    box-shadow: 
        inset 0 2px 5px rgba(0,0,0,0.8), 
        0 0 15px rgba(147, 197, 253, 0.15);
}


#holo-search-input::-moz-placeholder {
    color: #93c5fd !important;
    text-shadow: 0 0 10px rgba(147, 197, 253, 0.9) !important;
    opacity: 1 !important;
}

#holo-search-input::placeholder {
    color: #93c5fd !important;
    text-shadow: 0 0 10px rgba(147, 197, 253, 0.9) !important;
    opacity: 0.8 !important;
}

.holo-search-text {
    color: #93c5fd;
    font-family: 'Comfortaa', cursive;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    min-width: 40px;
    text-align: center;
    text-shadow: 0 0 5px rgba(147, 197, 253, 0.5);
}

.holo-search-text:empty {
    display: none;
}

.holo-search-btn {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(147, 197, 253, 0.3);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #93c5fd;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.1);
}
.holo-search-btn:hover {
    background: rgba(147, 197, 253, 0.05);
    border-color: rgba(147, 197, 253, 0.8);
    box-shadow: 0 0 15px rgba(147, 197, 253, 0.2), 0 8px 15px rgba(0,0,0,0.6);
    transform: scale(1.05);
}

.holo-search-btn:active {
    transform: scale(0.95);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
}

.holo-search-btn.close-btn {
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.3);
    display: none;
}

.holo-search-btn.close-btn:hover {
    background: linear-gradient(145deg, #ef4444, #7f1d1d);
    color: white;
    border-color: #f87171;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
}

mark.holo-highlight {
    background-color: rgba(147, 197, 253, 0.3);
    color: #fcd34d;
    border-radius: 4px;
    padding: 0 2px;
    box-shadow: 0 0 8px rgba(147, 197, 253, 0.4);
    transition: all 0.3s ease;
}

mark.holo-highlight.active {
    background-color: #be185d; 
    color: #ffe4e6;
    box-shadow: 0 0 15px rgba(190, 24, 93, 0.8);
    transform: scale(1.05);
    display: inline-block;
}

.whatsapp-center-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    width: 100%;
    position: relative;
    gap: 30px; /* Adicionado espaço entre os botões */
    flex-wrap: wrap; /* Para quebrar linha em telas pequenas se necessário */
}

.whatsapp-orb-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 15px rgba(37, 211, 102, 0.4));
    animation: float 6s ease-in-out infinite;
    text-decoration: none;
    z-index: 10;
}

.whatsapp-orb {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(145deg, #25D366, #128C7E);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3), inset 2px 2px 5px rgba(255,255,255,0.4), inset -2px -2px 5px rgba(0,0,0,0.2), 0 10px 20px rgba(0,0,0,0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.whatsapp-orb::after {
    content: '';
    position: absolute;
    top: 5%;
    left: 10%;
    width: 80%;
    height: 40%;
    border-radius: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0));
    opacity: 0.3;
    filter: blur(2px);
}

.whatsapp-icon {
    color: white;
    font-size: 42px;
    z-index: 10;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: transform 0.4s ease;
}

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #25D366;
    opacity: 0;
    animation: pulse-animation 3s infinite;
    pointer-events: none;
    top: 0;
    left: 0;
    box-sizing: border-box;
}
.pulse-ring:nth-child(2) { animation-delay: 1s; }

.whatsapp-tooltip {
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s ease;
    border: 1px solid rgba(37, 211, 102, 0.3);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    pointer-events: none;
}

.whatsapp-orb-container:hover .whatsapp-orb {
    transform: scale(1.1) translateY(-5px);
    background: linear-gradient(145deg, #34e076, #16a796);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3), 0 0 30px rgba(37, 211, 102, 0.6), 0 15px 30px rgba(0,0,0,0.4);
}

.whatsapp-orb-container:hover .whatsapp-icon { transform: rotate(-10deg) scale(1.1); }
.whatsapp-orb-container:hover .whatsapp-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse-animation { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.2); opacity: 0; } }

/* --- ESTILOS PARA O BOTÃO GOOGLE GROUPS (AZUL) --- */
.google-orb-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 15px rgba(66, 133, 244, 0.4));
    animation: float 6s ease-in-out infinite;
    animation-delay: 1s; /* Pequeno atraso para não flutuar junto com o whatsapp */
    text-decoration: none;
    z-index: 99999;
    cursor: pointer;
}

.google-orb {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* Gradiente Azul Google */
    background: linear-gradient(145deg, #4285F4, #2b56a8);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3), inset 2px 2px 5px rgba(255,255,255,0.4), inset -2px -2px 5px rgba(0,0,0,0.2), 0 10px 20px rgba(0,0,0,0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.google-orb::after {
    content: '';
    position: absolute;
    top: 5%;
    left: 10%;
    width: 80%;
    height: 40%;
    border-radius: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0));
    opacity: 0.3;
    filter: blur(2px);
}

.google-pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #4285F4;
    opacity: 0;
    animation: pulse-animation 3s infinite;
    pointer-events: none;
    top: 0;
    left: 0;
    box-sizing: border-box;
}
.google-pulse-ring:nth-child(2) { animation-delay: 1s; }

.google-tooltip {
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s ease;
    border: 1px solid rgba(66, 133, 244, 0.3);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    pointer-events: none;
}

.google-orb-container:hover .google-orb {
    transform: scale(1.1) translateY(-5px);
    background: linear-gradient(145deg, #5c9aff, #3367d6);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3), 0 0 30px rgba(66, 133, 244, 0.6), 0 15px 30px rgba(0,0,0,0.4);
}
.google-orb-container:hover .google-icon { transform: rotate(-10deg) scale(1.1); }
.google-orb-container:hover .google-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ========================================================
   EFEITO: OBSIDIANA POLIDA (DARK GLASSMORPHISM PREMIUM)
   ======================================================== */
.hologram-wrapper {
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    padding: 4rem 1rem;
    color: #fff;
    perspective: 1000px;
    position: relative;
    z-index: 50; /* Garante que fique acima do fundo 3D */
}

.hologram-wrapper * {
    box-sizing: border-box;
}

.device-container { 
    width: 100%; 
    max-width: 800px; 
    display: flex;
    justify-content: center;
    position: relative;
}

/* Brilho de fundo (Aura do dispositivo) */
.device-container::before {
    content: '';
    position: absolute;
    top: 10%; left: 10%; right: 10%; bottom: 10%;
    background: radial-gradient(circle at center, rgba(147, 197, 253, 0.15) 0%, transparent 70%);
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
}

.black-piano-device {
    width: 100%;
    background: rgba(12, 12, 16, 0.65);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(147, 197, 253, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 20px rgba(147, 197, 253, 0.05);
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
    z-index: 1;
}

.glass-glare {
    position: absolute; 
    top: 0; left: -50%; width: 200%; height: 100%;
    background: linear-gradient(
        105deg, 
        transparent 30%, 
        rgba(255,255,255,0.03) 40%, 
        rgba(255,255,255,0.08) 50%, 
        transparent 60%
    );
    pointer-events: none; 
    z-index: 1;
}

.black-piano-device:hover:not(.expanded) {
    border-top-color: rgba(147, 197, 253, 0.6);
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.9),
        0 0 30px rgba(147, 197, 253, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.collapsed-state { height: 120px; }
.expanded { cursor: default; height: auto; padding-bottom: 2.5rem; }

.led-visor {
    width: calc(100% - 30px); 
    margin: 15px auto 0 auto; 
    overflow: hidden; 
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    box-shadow: inset 0 5px 15px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,0.05);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 12px 0; 
    position: relative; 
    z-index: 2;
}

.led-marquee-text {
    font-family: 'Comfortaa', cursive; 
    font-weight: 700; 
    color: #93c5fd; 
    text-shadow: 0 0 5px rgba(147, 197, 253, 0.5), 0 0 15px rgba(147, 197, 253, 0.8);
    white-space: nowrap; 
    display: inline-block;
    animation: marquee 15s linear infinite; 
    padding-left: 100%;
    letter-spacing: 1px;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.form-content { opacity: 0; transition: opacity 0.5s ease 0.2s; display: none; margin-top: 2rem; padding: 0 2.5rem; z-index: 3; position: relative; }
.expanded .form-content { opacity: 1; display: block; }
.closed-content { opacity: 1; transition: opacity 0.3s; text-align: center; margin-top: 1.5rem; z-index: 3; pointer-events: none;}
.expanded .closed-content { opacity: 0; display: none; }

.text-blue-start { 
    color: #93c5fd; 
    font-weight: 700; 
    font-size: 0.9rem; 
    text-transform: uppercase; 
    letter-spacing: 0.15em; 
    text-shadow: 0 0 10px rgba(147, 197, 253, 0.4);
}

.holo-input {
    width: 100%; 
    background: rgba(0, 0, 0, 0.3); 
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
    color: #e2e8f0; 
    padding: 16px; 
    font-family: 'Poppins', sans-serif; 
    font-size: 1rem;
    transition: all 0.3s ease; 
    outline: none; 
    resize: none; 
    border-radius: 10px;
    margin-bottom: 1.25rem;
}

.holo-input:focus { 
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(147, 197, 253, 0.5); 
    box-shadow: 
        inset 0 2px 5px rgba(0,0,0,0.8), 
        0 0 15px rgba(147, 197, 253, 0.15); 
}

.holo-input::placeholder { color: rgba(255, 255, 255, 0.3); }

.file-attach-zone { margin-bottom: 1.5rem; }
.holo-file-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem;
    background: rgba(255, 255, 255, 0.02); 
    border: 1px dashed rgba(147, 197, 253, 0.3);
    color: #93c5fd; 
    padding: 14px 15px; 
    border-radius: 10px; 
    width: 100%;
    cursor: pointer; 
    transition: all 0.3s; 
    font-size: 0.95rem; 
    font-weight: 500;
}
.holo-file-btn:hover { 
    background: rgba(147, 197, 253, 0.05); 
    border-color: rgba(147, 197, 253, 0.8); 
    box-shadow: 0 0 15px rgba(147, 197, 253, 0.15); 
}
.holo-file-btn svg { width: 1.25rem; height: 1.25rem; }

.audio-record-zone {
    display: flex; align-items: center; gap: 1.5rem; margin-top: 0.5rem; 
    background: rgba(0, 0, 0, 0.4); 
    padding: 1.2rem; 
    border-radius: 12px; 
    border: 1px solid rgba(255,255,255,0.03); 
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}

.mic-btn {
    background: linear-gradient(145deg, #1e3a8a, #0f172a); 
    border: 1px solid rgba(147, 197, 253, 0.2); 
    border-radius: 50%; 
    width: 60px; height: 60px; min-width: 60px; min-height: 60px;
    flex-shrink: 0; 
    color: #93c5fd; 
    cursor: pointer; 
    display: flex; justify-content: center; align-items: center;
    box-shadow: 
        0 8px 15px rgba(0,0,0,0.6), 
        inset 0 2px 4px rgba(255,255,255,0.1),
        inset 0 -2px 4px rgba(0,0,0,0.4);
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.mic-btn svg { width: 1.8rem; height: 1.8rem; filter: drop-shadow(0 0 2px rgba(147,197,253,0.5)); }
.mic-btn:hover {
    transform: scale(1.05);
    box-shadow: 
        0 12px 20px rgba(0,0,0,0.7), 
        0 0 15px rgba(147, 197, 253, 0.3),
        inset 0 2px 4px rgba(255,255,255,0.2);
}
.mic-btn:active { 
    transform: scale(0.95); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.8), inset 0 2px 6px rgba(0,0,0,0.6); 
}

.mic-btn.recording {
    background: linear-gradient(145deg, #ef4444, #7f1d1d); 
    border-color: #f87171;
    color: #fff;
    box-shadow: 
        0 0 25px rgba(239, 68, 68, 0.6), 
        inset 0 2px 4px rgba(255,255,255,0.3);
    animation: pulse-recording 1.5s infinite alternate;
}
@keyframes pulse-recording { 
    0% { transform: scale(1); box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); } 
    100% { transform: scale(1.05); box-shadow: 0 0 30px rgba(239, 68, 68, 0.8); } 
}

.timer-text { font-family: monospace; font-size: 1.4rem; color: #93c5fd; font-weight: 700; letter-spacing: 2px; }
.audio-status { font-size: 0.85rem; color: #94a3b8; flex-grow: 1; line-height: 1.4; }

.send-btn {
    background: linear-gradient(to right, #be185d, #831843); 
    border: 1px solid #9d174d; 
    padding: 16px 30px; 
    border-radius: 12px;
    color: #ffe4e6; 
    font-weight: 700; 
    font-size: 1.1rem; 
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); 
    width: 100%; 
    margin-top: 2rem;
    box-shadow: 
        0 8px 20px rgba(0,0,0,0.6), 
        inset 0 1px 2px rgba(255,255,255,0.2);
    text-transform: uppercase; 
    letter-spacing: 1px;
}

.send-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
    box-shadow: 
        0 12px 25px rgba(0,0,0,0.7), 
        0 0 20px rgba(190, 24, 93, 0.4),
        inset 0 1px 2px rgba(255,255,255,0.2);
}

.send-btn:active { 
    transform: translateY(2px); 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); 
}

.send-btn:disabled { 
    opacity: 0.5; filter: grayscale(1); cursor: not-allowed; transform: none; box-shadow: none; 
}

.feedback-msg { text-align: center; margin-top: 1rem; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.05em; display: block; text-shadow: 0 0 10px rgba(74, 222, 128, 0.5); }

/* Forçando a quebra do bloqueio do Tailwind */
#holo-search-input::-webkit-input-placeholder {
    color: #93c5fd !important;
    -webkit-text-fill-color: #93c5fd !important;
    text-shadow: 0 0 12px rgba(147, 197, 253, 1) !important;
    opacity: 1 !important;
}
#holo-search-input::-moz-placeholder {
    color: #93c5fd !important;
    text-shadow: 0 0 12px rgba(147, 197, 253, 1) !important;
    opacity: 1 !important;
}
#holo-search-input::placeholder {
    color: #93c5fd !important;
    -webkit-text-fill-color: #93c5fd !important;
    text-shadow: 0 0 12px rgba(147, 197, 253, 1) !important;
    opacity: 1 !important;
}

/* =========================================================
   UPGRADE VISUAL - BOTÃO AJUSTE MAGNÉTICO + CARDS DOS GRUPOS
   Cole este bloco no FINAL do style.css
   ========================================================= */

.modern-updates-section {
    width: 100%;
    max-width: 980px;
    margin: 2rem auto 3rem auto;
    padding: 1rem;
    position: relative;
    z-index: 2;
}

.updates-heading {
    text-align: center;
    margin-bottom: 1.8rem;
}

.updates-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #bfdbfe;
    background: rgba(147, 197, 253, 0.08);
    border: 1px solid rgba(147, 197, 253, 0.22);
    box-shadow: 0 0 18px rgba(147, 197, 253, 0.08);
}

.updates-heading h2 {
    font-family: 'Marcellus', 'Cinzel', serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.05;
    color: #dbeafe;
    text-shadow:
        0 0 12px rgba(147, 197, 253, 0.35),
        0 0 35px rgba(59, 130, 246, 0.18);
    margin: 0;
}

.updates-heading p {
    max-width: 640px;
    margin: 0.8rem auto 0 auto;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.92rem, 2.4vw, 1.05rem);
    color: rgba(226, 232, 240, 0.78);
    line-height: 1.6;
}

/* BOTÃO AJUSTE MAGNÉTICO */

.magnetic-cta-wrapper {
    display: flex;
    justify-content: center;
    margin: 1.5rem auto 2rem auto;
}

.magnetic-cta-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: min(100%, 620px);
    min-height: 92px;
    padding: 1.1rem 1.35rem;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-decoration: none;
    color: #f8fbff;
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.18), transparent 28%),
        radial-gradient(circle at 85% 70%, rgba(96, 165, 250, 0.24), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 58, 138, 0.72), rgba(67, 56, 202, 0.58));
    border: 1px solid rgba(191, 219, 254, 0.32);
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.52),
        0 0 38px rgba(59, 130, 246, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(15, 23, 42, 0.8);
    transform: translateY(0);
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        filter 0.28s ease;
}

.magnetic-cta-button::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background:
        linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.13) 34%, transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
    opacity: 0.75;
    pointer-events: none;
    z-index: -1;
}

.magnetic-cta-button::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(219, 234, 254, 0.22), transparent 68%);
    filter: blur(2px);
    pointer-events: none;
    z-index: -1;
}

.magnetic-cta-button:hover {
    transform: translateY(-4px);
    border-color: rgba(219, 234, 254, 0.55);
    filter: brightness(1.08);
    box-shadow:
        0 28px 75px rgba(0, 0, 0, 0.62),
        0 0 58px rgba(96, 165, 250, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.magnetic-cta-button:active {
    transform: translateY(-1px) scale(0.99);
}

.magnetic-cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.magnetic-cta-label {
    width: fit-content;
    margin-bottom: 0.35rem;
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0f172a;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe, #fef3c7);
    box-shadow: 0 0 16px rgba(191, 219, 254, 0.28);
}

.magnetic-cta-title {
    font-family: 'Cinzel', 'Marcellus', serif;
    font-size: clamp(1.25rem, 4vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: #ffffff;
    text-shadow: 0 0 16px rgba(147, 197, 253, 0.38);
}

.magnetic-cta-date {
    margin-top: 0.35rem;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.82rem, 2.5vw, 0.98rem);
    color: rgba(226, 232, 240, 0.82);
}

.magnetic-cta-arrow {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    font-size: 1.4rem;
    color: #dbeafe;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(219, 234, 254, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: transform 0.28s ease, background 0.28s ease;
}

.magnetic-cta-button:hover .magnetic-cta-arrow {
    transform: translate(3px, -3px);
    background: rgba(255, 255, 255, 0.14);
}

.magnetic-cta-button .particles-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* CARDS DOS GRUPOS */

.modern-groups-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.modern-group-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 218px;
    padding: 1.15rem;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #e5e7eb;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(17, 24, 39, 0.48)),
        radial-gradient(circle at top left, rgba(147, 197, 253, 0.16), transparent 42%);
    border: 1px solid rgba(191, 219, 254, 0.16);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}

.modern-group-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(130deg, rgba(255, 255, 255, 0.10), transparent 34%, transparent 70%, rgba(147, 197, 253, 0.08)),
        radial-gradient(circle at 85% 12%, var(--group-glow, rgba(147, 197, 253, 0.22)), transparent 38%);
    opacity: 0.72;
    pointer-events: none;
    z-index: -1;
}

.modern-group-card::after {
    content: "";
    position: absolute;
    left: 1.15rem;
    right: 1.15rem;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    pointer-events: none;
}

.modern-group-card:hover {
    transform: translateY(-5px);
    border-color: rgba(219, 234, 254, 0.32);
    box-shadow:
        0 24px 65px rgba(0, 0, 0, 0.55),
        0 0 35px var(--group-shadow, rgba(96, 165, 250, 0.18)),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.group-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.group-day {
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #0f172a;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-radius: 999px;
    padding: 0.35rem 0.72rem;
}

.group-status {
    font-family: 'Poppins', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.72);
    white-space: nowrap;
}

.modern-group-card h3 {
    font-family: 'Marcellus', 'Cinzel', serif;
    font-size: clamp(1.25rem, 3vw, 1.55rem);
    line-height: 1.1;
    color: #f8fbff;
    margin: 0 0 0.9rem 0;
    text-shadow: 0 0 12px rgba(147, 197, 253, 0.22);
}

.group-course-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.group-course-list span {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.42rem 0.64rem;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    line-height: 1.25;
    color: rgba(241, 245, 249, 0.9);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.075);
}

.group-card-footer {
    margin-top: auto;
    padding-top: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Poppins', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    color: #bfdbfe;
}

.group-card-footer strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: #f8fafc;
    background: rgba(147, 197, 253, 0.12);
    border: 1px solid rgba(147, 197, 253, 0.18);
    transition: transform 0.28s ease, background 0.28s ease;
}

.modern-group-card:hover .group-card-footer strong {
    transform: translateX(4px);
    background: rgba(147, 197, 253, 0.2);
}

/* Cores sutis por grupo */

.group-domingo {
    --group-glow: rgba(236, 72, 153, 0.20);
    --group-shadow: rgba(236, 72, 153, 0.16);
}

.group-segunda {
    --group-glow: rgba(96, 165, 250, 0.24);
    --group-shadow: rgba(96, 165, 250, 0.18);
}

.group-quinta {
    --group-glow: rgba(167, 139, 250, 0.23);
    --group-shadow: rgba(167, 139, 250, 0.18);
}

.group-sabado {
    --group-glow: rgba(251, 191, 36, 0.18);
    --group-shadow: rgba(251, 191, 36, 0.14);
}

/* Responsivo */

@media (max-width: 760px) {
    .modern-updates-section {
        padding: 0.75rem;
        margin-top: 1.5rem;
    }

    .modern-groups-grid {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .modern-group-card {
        min-height: auto;
        padding: 1rem;
        border-radius: 22px;
    }

    .magnetic-cta-button {
        min-height: 88px;
        border-radius: 24px;
        padding: 1rem;
    }

    .magnetic-cta-arrow {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .group-card-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }

    .group-status {
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .magnetic-cta-button {
        align-items: flex-start;
    }

    .magnetic-cta-arrow {
        display: none;
    }

    .group-course-list span {
        font-size: 0.76rem;
    }
}

/* =========================================================
   EFEITO PREMIUM - CARDS INICIANDO
   Ative no HTML com:
   is-starting effect-flow
   ou
   is-starting effect-spiral
   ========================================================= */

.modern-group-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.modern-group-card > :not(.group-glitter-flow) {
    position: relative;
    z-index: 3;
}

.group-glitter-flow {
    position: absolute;
    inset: -12%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
    border-radius: inherit;
}

.modern-group-card.is-starting .group-glitter-flow {
    opacity: 1;
}

/* reforço do card ativo */
.modern-group-card.is-starting {
    border-color: rgba(219, 234, 254, 0.34);
    box-shadow:
        0 22px 58px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(147, 197, 253, 0.14),
        0 0 40px var(--group-shadow, rgba(96, 165, 250, 0.16)),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* selo superior automático */
.modern-group-card.is-starting .group-card-top::after {
    content: "Atualizado Recentemente";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.32rem 0.72rem;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #0f172a;
    background: linear-gradient(135deg, #fef3c7, #fbcfe8, #bfdbfe);
    box-shadow:
        0 0 18px rgba(251, 191, 36, 0.22),
        0 0 24px rgba(147, 197, 253, 0.14);
}

.modern-group-card.is-starting .group-status {
    color: #f8fafc;
    text-shadow:
        0 0 10px rgba(255,255,255,0.20),
        0 0 14px rgba(147, 197, 253, 0.20);
}

/* =========================================
   MODO 1 - FLOW
   fluxo de glitter passando no card
   ========================================= */

.modern-group-card.effect-flow .group-glitter-flow::before {
    content: "";
    position: absolute;
    inset: -42% -28%;
    border-radius: inherit;
    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 23%,
            rgba(255,255,255,0.00) 28%,
            rgba(255,255,255,0.03) 31%,
            rgba(191, 219, 254, 0.18) 38%,
            rgba(244, 114, 182, 0.14) 45%,
            rgba(251, 191, 36, 0.12) 51%,
            rgba(167, 139, 250, 0.12) 57%,
            rgba(255,255,255,0.03) 64%,
            transparent 72%,
            transparent 100%
        );
    filter: blur(18px) saturate(125%);
    transform: translateX(-72%) rotate(8deg) scale(1.08);
    opacity: 0;
    animation: glitterSweep 7.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    mix-blend-mode: screen;
}

.modern-group-card.effect-flow .group-glitter-flow::after {
    content: "";
    position: absolute;
    inset: -20%;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 18% 30%, rgba(191, 219, 254, 0.12), transparent 34%),
        radial-gradient(ellipse at 72% 40%, rgba(244, 114, 182, 0.08), transparent 28%),
        radial-gradient(ellipse at 62% 75%, rgba(251, 191, 36, 0.08), transparent 24%),
        radial-gradient(ellipse at 35% 68%, rgba(167, 139, 250, 0.08), transparent 26%);
    filter: blur(28px);
    animation: glitterCloud 8.5s ease-in-out infinite alternate;
    mix-blend-mode: screen;
    opacity: 0.78;
}

/* =========================================
   MODO 2 - SPIRAL
   energia espiral suave ao fundo
   ========================================= */

.modern-group-card.effect-spiral .group-glitter-flow {
    overflow: hidden;
}

.modern-group-card.effect-spiral .group-glitter-flow::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: 58%;
    top: 52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(255,255,255,0.10) 0deg 8deg,
            transparent 8deg 18deg,
            rgba(191, 219, 254, 0.12) 18deg 28deg,
            transparent 28deg 40deg,
            rgba(244, 114, 182, 0.10) 40deg 50deg,
            transparent 50deg 64deg,
            rgba(251, 191, 36, 0.10) 64deg 74deg,
            transparent 74deg 88deg
        );
    -webkit-mask: radial-gradient(circle, transparent 0 13%, #000 18% 56%, transparent 70%);
    mask: radial-gradient(circle, transparent 0 13%, #000 18% 56%, transparent 70%);
    filter: blur(10px);
    opacity: 0.55;
    mix-blend-mode: screen;
    animation: spiralRotate 15s linear infinite;
}

.modern-group-card.effect-spiral .group-glitter-flow::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    left: 58%;
    top: 52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(191, 219, 254, 0.16), transparent 28%),
        radial-gradient(circle at 52% 48%, rgba(255,255,255,0.14), transparent 10%),
        radial-gradient(circle at 47% 54%, rgba(251, 191, 36, 0.10), transparent 8%),
        radial-gradient(circle at 56% 44%, rgba(244, 114, 182, 0.10), transparent 9%);
    filter: blur(20px);
    opacity: 0.65;
    mix-blend-mode: screen;
    animation: spiralPulse 7s ease-in-out infinite;
}

/* =========================================
   ANIMAÇÕES
   ========================================= */

@keyframes glitterSweep {
    0% {
        transform: translateX(-72%) rotate(8deg) scale(1.08);
        opacity: 0;
    }
    12% {
        opacity: 0.88;
    }
    45% {
        opacity: 0.72;
    }
    100% {
        transform: translateX(72%) rotate(8deg) scale(1.08);
        opacity: 0;
    }
}

@keyframes glitterCloud {
    0% {
        transform: translate(-3%, -2%) scale(0.98);
        opacity: 0.58;
    }
    50% {
        transform: translate(3%, 2%) scale(1.05);
        opacity: 0.84;
    }
    100% {
        transform: translate(-1%, 3%) scale(1.02);
        opacity: 0.66;
    }
}

@keyframes spiralRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(0.96);
    }
    50% {
        transform: translate(-49%, -51%) rotate(180deg) scale(1.03);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(0.96);
    }
}

@keyframes spiralPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.92);
        opacity: 0.45;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 0.82;
    }
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce) {
    .modern-group-card.effect-flow .group-glitter-flow::before,
    .modern-group-card.effect-flow .group-glitter-flow::after,
    .modern-group-card.effect-spiral .group-glitter-flow::before,
    .modern-group-card.effect-spiral .group-glitter-flow::after {
        animation: none;
    }
}

/* =========================================================
   AURA LED VERMELHA FORTE - CARD INICIANDO
   ========================================================= */

.modern-updates-section,
.modern-groups-grid {
    overflow: visible !important;
}

.modern-group-card.glitter-live.is-starting {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;

    border: 1px solid rgba(255, 120, 120, 0.85) !important;

    box-shadow:
        0 24px 65px rgba(0, 0, 0, 0.58),
        0 0 14px rgba(255, 70, 70, 0.55),
        inset 0 0 14px rgba(255, 80, 80, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* Mantém o conteúdo acima da aura */
.modern-group-card.glitter-live.is-starting > :not(.group-glitter-flow) {
    position: relative !important;
    z-index: 5 !important;
}

/* Mantém o glitter preso dentro do card, mesmo com o card em overflow visible */
.modern-group-card.glitter-live.is-starting .group-glitter-flow {
    inset: 0 !important;
    overflow: hidden !important;
    border-radius: inherit !important;
    z-index: 2 !important;
}

/* Aura externa forte */
.modern-group-card.glitter-live.is-starting::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 0 !important;

    box-shadow:
        0 0 18px 5px rgba(255, 80, 80, 0.95),
        0 0 44px 16px rgba(255, 35, 35, 0.68),
        0 0 88px 30px rgba(255, 0, 0, 0.46),
        0 0 145px 48px rgba(255, 0, 0, 0.28);

    opacity: 0.55;
    transform: scale(1);
    animation: redLedAuraStrong 2.4s ease-in-out infinite;
}

.site-footer-info {
    position: relative !important;
    z-index: 20 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    max-width: 920px;
    margin: 58px auto 34px auto;
    padding: 26px 24px;

    color: #e5e7eb !important;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.75;

    background: rgba(5, 5, 8, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.site-footer-info p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #e5e7eb !important;
    margin: 8px 0;
}

.site-footer-info strong {
    color: #ffffff !important;
    font-weight: 700;
}

.site-footer-info hr {
    border: 0;
    height: 1px;
    margin: 18px auto;
    max-width: 760px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.28),
        transparent
    );
}

.site-footer-info img {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* =========================================================
   AURA LED AZUL CELESTE MAIS AZUL - CARD INICIANDO
   ========================================================= */

.modern-group-card.glitter-live.is-starting {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;

    border: 1px solid rgba(0, 170, 255, 0.50) !important;

    box-shadow:
        0 24px 65px rgba(0, 0, 0, 0.58),
        0 0 14px rgba(0, 170, 255, 0.55),
        inset 0 0 14px rgba(0, 150, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

/* Conteúdo acima da aura */
.modern-group-card.glitter-live.is-starting > :not(.group-glitter-flow) {
    position: relative !important;
    z-index: 5 !important;
}

/* Glitter preso dentro do card */
.modern-group-card.glitter-live.is-starting .group-glitter-flow {
    inset: 0 !important;
    overflow: hidden !important;
    border-radius: inherit !important;
    z-index: 2 !important;
}

/* Aura externa azul celeste mais azul */
.modern-group-card.glitter-live.is-starting::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 0 !important;

    box-shadow:
        0 0 6px 1px rgba(80, 190, 255, 0.72),
        0 0 14px 3px rgba(0, 170, 255, 0.42),
        0 0 26px 6px rgba(0, 120, 255, 0.22),
        0 0 40px 8px rgba(0, 80, 255, 0.10);

    opacity: 0.38;
    transform: scale(1);
    animation: blueLedAuraStrong 2.8s ease-in-out infinite;
}

/* Luz interna azulada */
.modern-group-card.glitter-live.is-starting::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 1 !important;

    box-shadow:
        inset 0 0 18px rgba(0, 170, 255, 0.24),
        inset 0 0 38px rgba(0, 120, 255, 0.16),
        inset 0 0 70px rgba(0, 80, 255, 0.10);

    opacity: 0.30;
    animation: blueLedInnerStrong 2.8s ease-in-out infinite;
}

@keyframes blueLedAuraStrong {
    0%, 100% {
        opacity: 0.38;
        transform: scale(0.995);
        filter: brightness(0.85) saturate(1.25);
    }

    50% {
        opacity: 1;
        transform: scale(1.015);
        filter: brightness(1.12) saturate(1.85);
    }
}

@keyframes blueLedAuraStrong {
    0%, 100% {
        opacity: 0.30;
        transform: scale(0.998);
        filter: brightness(0.90) saturate(1.20);
    }

    50% {
        opacity: 0.62;
        transform: scale(1.006);
        filter: brightness(1.03) saturate(1.45);
    }
}

.servicos-modal-section {
    position: relative;
    z-index: 5;
    text-align: center;
}

.servicos-modal-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    margin-top: 24px;
}

.service-chrome-button {
    min-width: min(92vw, 430px);
    min-height: 96px;
}

.service-chrome-button .chrome-text {
    line-height: 1.25;
}

.service-info-modal-box {
    max-width: 920px;
}

.service-modal-body {
    position: relative;
    z-index: 2;
    color: #e5e7eb;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.96rem, 1.7vw, 1.08rem);
    line-height: 1.82;
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
}

.service-modal-body p {
    margin: 0 0 18px;
    color: rgba(240, 240, 248, 0.86);
}

.service-modal-body strong {
    color: #ffffff;
    font-weight: 800;
}

.service-modal-price-box {
    margin: 24px 0;
    padding: 22px 20px;
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 14px 32px rgba(0, 0, 0, 0.35);
}

.service-price-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.service-price-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.service-price-item span {
    color: rgba(245, 245, 250, 0.88);
}

.service-price-item a,
.service-modal-alert a {
    color: #60a5fa !important;
    font-weight: 800;
    text-decoration: none;
    text-shadow: 0 0 12px rgba(96, 165, 250, 0.22);
}

.service-price-item a:hover,
.service-modal-alert a:hover {
    color: #93c5fd !important;
    text-decoration: underline;
}

.service-modal-alert {
    margin-top: 22px !important;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

@media (max-width: 680px) {
    .servicos-modal-buttons {
        gap: 18px;
    }

    .service-chrome-button {
        min-width: 88vw;
        min-height: 86px;
        padding-left: 22px;
        padding-right: 22px;
    }

    .service-modal-body {
        text-align: left;
        line-height: 1.72;
    }

    .service-modal-price-box {
        padding: 18px 16px;
    }
}

.search-bottom-wrapper {
    position: relative;
    z-index: 20;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 18px auto 34px auto;
    padding: 0 12px;
}

.holo-search-container-duplo {
    position: relative;
    z-index: 50;
    width: min(92vw, 760px);
    margin: 22px auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 999px;
    background:
        linear-gradient(145deg, rgba(10, 12, 18, 0.96), rgba(4, 5, 8, 0.96));
    border: 1px solid rgba(147, 197, 253, 0.22);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 24px rgba(147, 197, 253, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all 0.28s ease;
}

.holo-search-container-duplo.is-floating {
    position: fixed !important;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999 !important;
    margin: 0 !important;
    width: min(92vw, 760px);
    animation: searchFloatIn 0.25s ease both;
}

@keyframes searchFloatIn {
    from {
        opacity: 0.2;
        transform: translateX(-50%) translateY(-12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.holo-search-container-duplo svg {
    flex-shrink: 0;
}

.holo-search-container-duplo input {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    outline: none;
    border-radius: 12px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.62);
    color: #dbeafe;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.7);
}

.holo-search-container-duplo input::placeholder {
    color: #93c5fd;
    opacity: 0.92;
}

.holo-search-container-duplo input:focus {
    border-color: rgba(147, 197, 253, 0.55);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.82),
        0 0 18px rgba(147, 197, 253, 0.20);
}

.holo-search-text {
    color: #bfdbfe;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.holo-search-btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    border: 1px solid rgba(147, 197, 253, 0.32);
    background:
        linear-gradient(145deg, rgba(17, 24, 39, 0.98), rgba(5, 8, 15, 0.98));
    color: #93c5fd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.18s ease;
}

.holo-search-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(147, 197, 253, 0.75);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.55),
        0 0 16px rgba(147, 197, 253, 0.18);
}

.holo-search-btn.close-btn {
    display: none;
}

mark.holo-highlight {
    background: rgba(96, 165, 250, 0.35);
    color: #ffffff;
    padding: 1px 4px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.35);
}

mark.holo-highlight.active {
    background: rgba(250, 204, 21, 0.92);
    color: #111827;
    box-shadow: 0 0 18px rgba(250, 204, 21, 0.72);
}

@media (max-width: 640px) {
    .holo-search-container-duplo {
        gap: 8px;
        padding: 10px 12px;
    }

    .holo-search-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .holo-search-text {
        display: none;
    }
}

/* FORÇA O TEXTO DO BUSCADOR PARA VERMELHO NEON */
#holo-search-input,
#holo-search-input-bottom {
    color: #ff1744 !important;
    -webkit-text-fill-color: #ff1744 !important;
    caret-color: #ff1744 !important;
    text-shadow:
        0 0 4px #ff1744,
        0 0 10px #ff1744,
        0 0 18px #ff003c !important;
}

#holo-search-input::placeholder,
#holo-search-input-bottom::placeholder {
    color: #ff1744 !important;
    -webkit-text-fill-color: #ff1744 !important;
    opacity: 1 !important;
    text-shadow:
        0 0 4px #ff1744,
        0 0 10px #ff1744,
        0 0 18px #ff003c !important;
}

#holo-search-input::-webkit-input-placeholder,
#holo-search-input-bottom::-webkit-input-placeholder {
    color: #ff1744 !important;
    -webkit-text-fill-color: #ff1744 !important;
    opacity: 1 !important;
    text-shadow:
        0 0 4px #ff1744,
        0 0 10px #ff1744,
        0 0 18px #ff003c !important;
}

#holo-search-input::-moz-placeholder,
#holo-search-input-bottom::-moz-placeholder {
    color: #ff1744 !important;
    opacity: 1 !important;
    text-shadow:
        0 0 4px #ff1744,
        0 0 10px #ff1744,
        0 0 18px #ff003c !important;
}


/* =========================================================
   BOTÃO PÍLULA 3D — ÁREA DO ALUNO
   TEMA VERDE ESMERALDA
   ========================================================= */

.student-pill-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 30px auto 42px;
    padding: 0 16px;
    position: relative;
    z-index: 5;
}

.student-pill-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: min(100%, 450px);
    min-height: 95px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;
    padding: 17px 32px;

    border-radius: 999px;

    border: 1px solid rgba(52, 211, 153, 0.90);

    /* MESMA PALETA DO BUSCADOR E CONTATO */
    background:
        linear-gradient(
            180deg,
            #34d399 0%,
            #10b981 27%,
            #079669 52%,
            #047857 74%,
            #064e3b 100%
        );

    /* EFEITO 3D ELEVADO */
    box-shadow:
        0 9px 0 #022c22,
        0 12px 0 rgba(0, 18, 14, 0.95),
        0 19px 32px rgba(0, 0, 0, 0.68),
        0 0 24px rgba(16, 185, 129, 0.30),

        inset 0 2px 0 rgba(167, 243, 208, 0.65),
        inset 0 -8px 15px rgba(0, 45, 34, 0.42);

    text-decoration: none;
    text-align: center;

    font-family: "Poppins", sans-serif;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease;
}


/* Reflexo fixo na parte superior */
.student-pill-button::after {
    content: "";

    position: absolute;

    top: 4px;
    left: 7%;

    width: 86%;
    height: 42%;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.48) 0%,
            rgba(167,243,208,0.20) 48%,
            rgba(255,255,255,0) 100%
        );

    opacity: 0.70;

    pointer-events: none;

    z-index: 1;
}


/* BRILHO QUE ATRAVESSA O BOTÃO */
.student-pill-button::before {
    content: "";

    position: absolute;

    top: -90%;
    left: -35%;

    width: 18%;
    height: 280%;

    transform: rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(110,231,183,0.15),
            rgba(255,255,255,0.90),
            rgba(110,231,183,0.18),
            transparent
        );

    filter: blur(1px);

    animation:
        studentEmeraldShine 4s ease-in-out infinite;

    pointer-events: none;

    z-index: 5;
}


/* TÍTULO */
.student-pill-button > span {
    position: relative;
    z-index: 4;

    color: #020806;

    font-size: 24px;
    font-weight: 800;

    line-height: 1.15;

    letter-spacing: 0.01em;

    text-shadow:
        0 1px 0 rgba(167,243,208,0.55);
}


/* TEXTOS INFERIORES */
.student-pill-lines {
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 2px;
}

.student-pill-lines small {
    display: block;

    color: #020806;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.35;

    text-shadow:
        0 1px 0 rgba(167,243,208,0.32);
}

.student-pill-lines small:last-child {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.80;
}


/* PASSAR O MOUSE */
.student-pill-button:hover {

    transform:
        translateY(-4px)
        scale(1.015);

    filter:
        brightness(1.08)
        saturate(1.06);

    box-shadow:
        0 11px 0 #022c22,
        0 14px 0 rgba(0,18,14,0.95),
        0 24px 38px rgba(0,0,0,0.70),

        0 0 18px rgba(52,211,153,0.55),
        0 0 35px rgba(16,185,129,0.30),

        inset 0 2px 0 rgba(167,243,208,0.72),
        inset 0 -8px 15px rgba(0,45,34,0.38);
}


/* EFEITO DE BOTÃO SENDO PRESSIONADO */
.student-pill-button:active {

    transform:
        translateY(6px)
        scale(0.995);

    box-shadow:
        0 2px 0 #022c22,
        0 5px 10px rgba(0,0,0,0.65),

        0 0 15px rgba(16,185,129,0.25),

        inset 0 4px 8px rgba(0,45,34,0.38);
}


/* FOCO */
.student-pill-button:focus-visible {
    outline:
        3px solid rgba(52,211,153,0.85);

    outline-offset: 5px;
}


/* ANIMAÇÃO DO REFLEXO */
@keyframes studentEmeraldShine {

    0%,
    58% {
        left: -35%;
        opacity: 0;
    }

    64% {
        opacity: 1;
    }

    82% {
        left: 125%;
        opacity: 0.95;
    }

    88%,
    100% {
        left: 125%;
        opacity: 0;
    }
}


/* CELULAR */
@media (max-width: 640px) {

    .student-pill-wrapper {
        margin: 26px auto 36px;
        padding: 0 11px;
    }

    .student-pill-button {

        width: 100%;

        min-height: 90px;

        padding: 15px 18px;
    }

    .student-pill-button > span {
        font-size: 21px;
    }

    .student-pill-lines small {
        font-size: 12px;
    }

    .student-pill-lines small:last-child {
        font-size: 10px;
    }
}


/* ACESSIBILIDADE */
@media (prefers-reduced-motion: reduce) {

    .student-pill-button::before {
        animation: none;
    }
}

/* =========================================================
   BUSCADOR DE CURSOS — TEMA VERDE ESMERALDA
   ========================================================= */

/* Corpo externo do buscador */
.holo-search-container-duplo {
    background:
        linear-gradient(
            145deg,
            rgba(0, 72, 55, 0.98),
            rgba(0, 32, 25, 0.98)
        ) !important;

    border: 1px solid rgba(16, 185, 129, 0.65) !important;

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(110, 255, 204, 0.20),
        0 0 24px rgba(16, 185, 129, 0.30) !important;
}


/* Campo onde aparece "Pesquisar cursos" */
.holo-search-container-duplo input {
    background: #000000 !important;

    border: 1px solid rgba(16, 185, 129, 0.32) !important;

    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(16, 185, 129, 0.10) !important;
}


/* Campo quando está selecionado */
.holo-search-container-duplo input:focus {
    background: #000000 !important;

    border-color: rgba(52, 211, 153, 0.85) !important;

    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.95),
        0 0 18px rgba(16, 185, 129, 0.38) !important;
}


/* Lupa */
.holo-search-container-duplo > svg {
    stroke: #34d399 !important;
    filter: drop-shadow(0 0 5px rgba(52, 211, 153, 0.70));
}


/* Botões das setas */
.holo-search-btn {
    border: 1px solid rgba(52, 211, 153, 0.55) !important;

    background:
        linear-gradient(
            145deg,
            rgba(0, 70, 52, 0.98),
            rgba(0, 28, 22, 0.98)
        ) !important;

    color: #6ee7b7 !important;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(110, 231, 183, 0.18),
        0 0 8px rgba(16, 185, 129, 0.16) !important;
}


/* Botões ao passar o mouse */
.holo-search-btn:hover {
    border-color: #34d399 !important;

    background:
        linear-gradient(
            145deg,
            rgba(0, 110, 78, 1),
            rgba(0, 55, 40, 1)
        ) !important;

    color: #a7f3d0 !important;

    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.60),
        0 0 20px rgba(16, 185, 129, 0.50) !important;
}


/* Contador de resultados */
.holo-search-text {
    color: #ff1744 !important;

    text-shadow:
        0 0 4px #ff1744,
        0 0 9px rgba(255, 23, 68, 0.75) !important;
}


/* TEXTO DIGITADO — VERDE ESMERALDA */
#holo-search-input,
#holo-search-input-bottom {
    color: #34d399 !important;
    -webkit-text-fill-color: #34d399 !important;
    caret-color: #34d399 !important;

    text-shadow:
        0 0 4px rgba(52, 211, 153, 0.85),
        0 0 10px rgba(16, 185, 129, 0.65),
        0 0 18px rgba(16, 185, 129, 0.35) !important;
}


/* TEXTO "PESQUISAR CURSOS" — VERDE ESMERALDA */
#holo-search-input::placeholder,
#holo-search-input-bottom::placeholder {
    color: #34d399 !important;
    -webkit-text-fill-color: #34d399 !important;
    opacity: 1 !important;

    text-shadow:
        0 0 4px rgba(52, 211, 153, 0.85),
        0 0 10px rgba(16, 185, 129, 0.65),
        0 0 18px rgba(16, 185, 129, 0.35) !important;
}

/* =========================================================
   CONTATO HOLOGRÁFICO — TEMA VERDE ESMERALDA
   ========================================================= */

/* Aura externa atrás do módulo */
.device-container::before {
    background:
        radial-gradient(
            circle at center,
            rgba(16, 185, 129, 0.22) 0%,
            transparent 70%
        ) !important;
}


/* Corpo principal */
.black-piano-device {
    background:
        linear-gradient(
            145deg,
            rgba(0, 55, 42, 0.88),
            rgba(0, 18, 14, 0.94)
        ) !important;

    border: 1px solid rgba(16, 185, 129, 0.28) !important;
    border-top: 1px solid rgba(52, 211, 153, 0.68) !important;
    border-bottom: 1px solid rgba(0, 20, 15, 0.95) !important;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.82),
        0 0 0 1px rgba(0, 50, 38, 0.65),
        inset 0 1px 0 rgba(110, 231, 183, 0.18),
        inset 0 0 25px rgba(16, 185, 129, 0.12),
        0 0 22px rgba(16, 185, 129, 0.12) !important;
}


/* Hover do módulo */
.black-piano-device:hover:not(.expanded) {
    border-top-color: #34d399 !important;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.90),
        0 0 30px rgba(16, 185, 129, 0.28),
        inset 0 1px 0 rgba(110, 231, 183, 0.24) !important;
}


/* Visor onde passa a frase */
.led-visor {
    background: #000000 !important;

    border: 1px solid rgba(16, 185, 129, 0.28) !important;

    box-shadow:
        inset 0 5px 15px rgba(0, 0, 0, 1),
        0 1px 0 rgba(110, 231, 183, 0.12),
        0 0 10px rgba(16, 185, 129, 0.10) !important;
}


/* Texto que fica passando */
.led-marquee-text {
    color: #34d399 !important;

    text-shadow:
        0 0 5px rgba(52, 211, 153, 0.75),
        0 0 15px rgba(16, 185, 129, 0.85),
        0 0 25px rgba(5, 150, 105, 0.45) !important;
}


/* "CLIQUE PARA ENTRAR EM CONTATO" */
.text-blue-start {
    color: #6ee7b7 !important;

    text-shadow:
        0 0 6px rgba(52, 211, 153, 0.75),
        0 0 14px rgba(16, 185, 129, 0.55) !important;
}


/* Campos quando o módulo estiver aberto */
.holo-input {
    background: #000000 !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
    color: #d1fae5 !important;

    box-shadow:
        inset 0 2px 7px rgba(0, 0, 0, 0.85) !important;
}

.holo-input:focus {
    background: #000000 !important;
    border-color: rgba(52, 211, 153, 0.70) !important;

    box-shadow:
        inset 0 2px 7px rgba(0, 0, 0, 0.90),
        0 0 17px rgba(16, 185, 129, 0.30) !important;
}


/* Botão para anexar arquivos */
.holo-file-btn {
    background: rgba(0, 45, 34, 0.45) !important;
    border: 1px dashed rgba(52, 211, 153, 0.52) !important;
    color: #6ee7b7 !important;
}

.holo-file-btn:hover {
    background: rgba(16, 185, 129, 0.10) !important;
    border-color: #34d399 !important;

    box-shadow:
        0 0 16px rgba(16, 185, 129, 0.28) !important;
}


/* Área da gravação */
.audio-record-zone {
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(16, 185, 129, 0.15) !important;
}


/* Botão do microfone */
.mic-btn:not(.recording) {
    background:
        linear-gradient(
            145deg,
            #047857,
            #022c22
        ) !important;

    border: 1px solid rgba(52, 211, 153, 0.45) !important;
    color: #6ee7b7 !important;

    box-shadow:
        0 8px 15px rgba(0, 0, 0, 0.65),
        inset 0 2px 4px rgba(110, 231, 183, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.50) !important;
}

.mic-btn:not(.recording):hover {
    box-shadow:
        0 12px 20px rgba(0, 0, 0, 0.70),
        0 0 18px rgba(16, 185, 129, 0.42),
        inset 0 2px 4px rgba(110, 231, 183, 0.22) !important;
}

.mic-btn:not(.recording) svg {
    filter:
        drop-shadow(0 0 4px rgba(52, 211, 153, 0.70)) !important;
}


/* Cronômetro */
.timer-text {
    color: #34d399 !important;

    text-shadow:
        0 0 7px rgba(16, 185, 129, 0.65) !important;
}


/* Botão de envio */
.send-btn {
    background:
        linear-gradient(
            to right,
            #047857,
            #064e3b
        ) !important;

    border: 1px solid #10b981 !important;
    color: #d1fae5 !important;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.65),
        inset 0 1px 2px rgba(110, 231, 183, 0.20),
        0 0 12px rgba(16, 185, 129, 0.15) !important;
}

.send-btn:hover {
    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.72),
        0 0 22px rgba(16, 185, 129, 0.48),
        inset 0 1px 2px rgba(110, 231, 183, 0.25) !important;
}

/* =========================================================
   BOTÕES DE IMAGEM — PÁGINA PRINCIPAL
   ========================================================= */

.botao-imagem-principal {
    appearance: none !important;
    -webkit-appearance: none !important;

    background: transparent !important;
    border: none !important;
    outline: none;

    padding: 0 !important;
    margin: 18px auto;

    display: block;
    width: min(520px, 94vw);
    max-width: 100%;

    cursor: pointer;
    text-decoration: none !important;

    transition:
        transform 0.10s ease,
        filter 0.10s ease;

    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}


/* A própria imagem */

.botao-imagem-principal img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;

    filter:
        drop-shadow(0 8px 8px rgba(0, 0, 0, 0.50));

    transition:
        transform 0.10s ease,
        filter 0.10s ease;
}


/* =========================================================
   PASSAR O MOUSE
   ========================================================= */

.botao-imagem-principal:hover {
    transform:
        translateY(-2px)
        scale(1.012);
}

.botao-imagem-principal:hover img {
    filter:
        brightness(1.06)
        drop-shadow(0 11px 11px rgba(0, 0, 0, 0.55));
}


/* =========================================================
   CLIQUE — BOTÃO AFUNDA
   ========================================================= */

.botao-imagem-principal:active {
    transform:
        translateY(5px)
        scale(0.975);
}

.botao-imagem-principal:active img {
    filter:
        brightness(0.88)
        drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}


/* =========================================================
   ACESSIBILIDADE PELO TECLADO
   ========================================================= */

.botao-imagem-principal:focus-visible {
    outline: 2px solid rgba(190, 205, 255, 0.90);
    outline-offset: 5px;
    border-radius: 30px;
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 600px) {

    .botao-imagem-principal {
        width: min(460px, 94vw);
        margin: 14px auto;
    }

}

/* =========================================================
   CORREÇÃO DO ESPAÇO ENTRE OS 3 BOTÕES
   Aplicativos / Grupos / Categorias
   ========================================================= */

#grupos-apps,
#grupos-cursos-ao-vivo,
#categorias-cursos {
    margin: 0 !important;
    padding: 0 !important;

    min-height: 0 !important;
    height: auto !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}


/* Espaço real entre os botões */
#grupos-apps .botao-imagem-principal,
#grupos-cursos-ao-vivo .botao-imagem-principal,
#categorias-cursos .botao-imagem-principal {
    margin: 8px auto !important;
}


/* =========================================================
   1. ÁREA DO ALUNO + ESPAÇO ESPECIAL
   30% MENORES + ESPAÇO ENTRE ELES
   ========================================================= */

#exclusive-content .student-pill-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}


/* ÁREA DO ALUNO */
#exclusive-content .student-pill-wrapper .botao-imagem-principal {
    width: min(364px, 70vw) !important;
    margin: 0 auto !important;
}


/* ESPAÇO ESPECIAL */
#exclusive-content > #openEspacoEspecial {
    width: min(364px, 70vw) !important;

    /* espaço entre os dois */
    margin: 18px auto 0 auto !important;
}


/* garante que as imagens preencham o novo tamanho */
#exclusive-content .botao-imagem-principal img {
    width: 100% !important;
    height: auto !important;
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 600px) {

    #exclusive-content .student-pill-wrapper .botao-imagem-principal,
    #exclusive-content > #openEspacoEspecial {
        width: min(322px, 76vw) !important;
    }

    #exclusive-content > #openEspacoEspecial {
        margin-top: 18px !important;
    }

}


/* =========================================================
   2. CURSOS PARTICULARES + GRUPOS DE ESTUDO E PRÁTICA
   ========================================================= */

#servicos .servicos-modal-buttons {
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

#servicos .servicos-modal-buttons .botao-imagem-principal {
    margin: 0 auto !important;
}

#openGruposPraticaModal {
    margin-top: -14px !important;
}


/* =========================================================
   3. APLICATIVOS + MEDITAÇÃO + CATEGORIAS
   ========================================================= */

#grupos-apps,
#grupos-cursos-ao-vivo,
#categorias-cursos {
    padding: 0 !important;

    min-height: 0 !important;
    height: auto !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}


#grupos-apps .botao-imagem-principal,
#grupos-cursos-ao-vivo .botao-imagem-principal,
#categorias-cursos .botao-imagem-principal {
    margin: 0 auto !important;
}


/* Primeiro botão */
#grupos-apps {
    margin: 0 0 -10px 0 !important;
}


/* Botão do meio */
#grupos-cursos-ao-vivo {
    margin: -10px 0 -10px 0 !important;
}


/* Último botão */
#categorias-cursos {
    margin: -10px 0 0 0 !important;
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 600px) {

    #exclusive-content > #openEspacoEspecial {
        margin-top: -14px !important;
    }

    #openGruposPraticaModal {
        margin-top: -16px !important;
    }

    #grupos-apps {
        margin-bottom: -12px !important;
    }

    #grupos-cursos-ao-vivo {
        margin-top: -12px !important;
        margin-bottom: -12px !important;
    }

    #categorias-cursos {
        margin-top: -12px !important;
    }
}

/* =========================================================
   TAMANHO ÚNICO PARA TODOS OS BOTÕES DE IMAGEM
   ========================================================= */

/* Área do Aluno */
#exclusive-content .student-pill-wrapper .botao-imagem-principal,

/* Espaço Especial */
#openEspacoEspecial,

/* Assistente IA */
#btnAssistenteIA,

/* Cursos Particulares */
#openCursosParticularesModal,

/* Grupos de Estudo e Prática */
#openGruposPraticaModal,

/* Aplicativos Esotéricos */
#openAppsModal,

/* Grupos de Estudo e Meditação */
#openGruposModal,

/* Categorias de Cursos */
#openCategoriasModal {

    width: min(364px, 70vw) !important;
    max-width: 364px !important;
}


/* =========================================================
   CELULAR — TODOS EXATAMENTE DO MESMO TAMANHO
   ========================================================= */

@media (max-width: 600px) {

    #exclusive-content .student-pill-wrapper .botao-imagem-principal,
    #openEspacoEspecial,
    #btnAssistenteIA,
    #openCursosParticularesModal,
    #openGruposPraticaModal,
    #openAppsModal,
    #openGruposModal,
    #openCategoriasModal {

        width: 76vw !important;
        max-width: 322px !important;
    }

}
.espaco-entre-botoes {
    height: 22px;
}

/* =========================================================
   ESPAÇO ENTRE ÁREA DO ALUNO E ESPAÇO ESPECIAL
   RESPONSIVO
   ========================================================= */

/* DESKTOP */
.espaco-entre-botoes {
    height: 10px !important;
}

/* Remove qualquer margem antiga do segundo botão */
#exclusive-content > #openEspacoEspecial {
    margin-top: 0 !important;
}


/* CELULAR — mantém como está bonito atualmente */
@media (max-width: 600px) {

    .espaco-entre-botoes {
        height: 22px !important;
    }

    #exclusive-content > #openEspacoEspecial {
        margin-top: 0 !important;
    }

}

/* =========================================================
   BUSCADOR FLUTUANTE — POSIÇÃO NO CELULAR
   ========================================================= */

@media (max-width: 640px) {

    .holo-search-container-duplo.is-floating {
        top: calc(35px + env(safe-area-inset-top, 0px)) !important;
    }

}

/* =========================================================
   SETA PARA BAIXO — AVISO DE RESULTADOS ENCONTRADOS
   ========================================================= */

.holo-search-btn.piscar-busca {
    animation: piscarSetaBusca 0.8s ease-in-out infinite !important;
}

@keyframes piscarSetaBusca {

    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 8px 18px rgba(0, 0, 0, 0.55),
            0 0 8px rgba(16, 185, 129, 0.25);
    }

    50% {
        transform: scale(1.13);
        box-shadow:
            0 8px 18px rgba(0, 0, 0, 0.55),
            0 0 12px rgba(52, 211, 153, 0.90),
            0 0 28px rgba(16, 185, 129, 0.80),
            0 0 42px rgba(16, 185, 129, 0.45);
    }
}

/* =========================================================
   =========================================================
   CENTRAL DE VÍDEOS — REIKI ESSENCIAL

   - Funciona como uma página interna independente
   - Fica totalmente escondida até ser aberta
   - Abre em tela cheia sobre o site principal
   - Possui rolagem própria
   - Responsiva para computador, tablet e celular
   - Todas as classes usam prefixo rv-
   =========================================================
   ========================================================= */


/* =========================================================
   1. PÁGINA INTERNA / TELA CHEIA
   ========================================================= */

.rv-pagina-videos {
    display: none;

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;
    height: 100dvh;

    z-index: 999999;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    background: #050609;

    color: #f6f7fb;

    font-family: inherit;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(169, 135, 255, 0.55)
        rgba(255, 255, 255, 0.04);
}


/* QUANDO A CENTRAL FOR ABERTA */

.rv-pagina-videos.rv-pagina-aberta {
    display: block;
}


/* IMPEDE A PÁGINA PRINCIPAL DE ROLAR ATRÁS */

body.rv-bloquear-site {
    overflow: hidden !important;
}


/* SCROLLBAR — CHROME / EDGE */

.rv-pagina-videos::-webkit-scrollbar {
    width: 9px;
}

.rv-pagina-videos::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.025);
}

.rv-pagina-videos::-webkit-scrollbar-thumb {
    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            rgba(164, 112, 255, 0.75),
            rgba(72, 142, 255, 0.55)
        );
}



/* =========================================================
   2. BARRA SUPERIOR DA PÁGINA
   ========================================================= */

.rv-pagina-topo {
    position: sticky;

    top: 0;

    z-index: 1000;

    display: flex;
    align-items: center;

    width: 100%;

    min-height: 68px;

    padding:
        12px
        clamp(15px, 3vw, 35px);

    background:
        linear-gradient(
            180deg,
            rgba(5, 6, 9, 0.98),
            rgba(5, 6, 9, 0.92)
        );

    border-bottom:
        1px solid rgba(255, 255, 255, 0.085);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.28);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* =========================================================
   BOTÃO VOLTAR
   ========================================================= */

.rv-botao-voltar {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 10px 19px;

    border:
        1px solid rgba(184, 158, 255, 0.30);

    border-radius: 12px;

    outline: none;

    background:
        linear-gradient(
            145deg,
            rgba(125, 91, 205, 0.20),
            rgba(70, 50, 125, 0.10)
        );

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.2px;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}


.rv-botao-voltar:hover {
    transform: translateX(-3px);

    border-color:
        rgba(194, 170, 255, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(135, 95, 225, 0.32),
            rgba(80, 55, 145, 0.18)
        );

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.30),
        0 0 22px rgba(147, 100, 255, 0.10);
}


.rv-botao-voltar:active {
    transform: translateX(-1px) scale(0.98);
}



/* =========================================================
   3. ESTRUTURA PRINCIPAL DA CENTRAL
   ========================================================= */

.rv-video-hub {
    --rv-bg: #050609;
    --rv-bg-soft: #0b0d13;

    --rv-card:
        rgba(17, 19, 28, 0.88);

    --rv-card-hover:
        rgba(24, 27, 39, 0.96);

    --rv-text: #f6f7fb;
    --rv-text-soft: #b8bdca;
    --rv-text-muted: #858b99;

    --rv-border:
        rgba(255, 255, 255, 0.10);

    position: relative;

    width: 100%;
    min-height: calc(100dvh - 68px);

    overflow: hidden;

    padding:
        65px
        20px
        80px;

    color: var(--rv-text);

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(111, 57, 255, 0.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 30%,
            rgba(0, 197, 255, 0.10),
            transparent 31%
        ),
        radial-gradient(
            circle at 50% 90%,
            rgba(255, 180, 60, 0.08),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #050609 0%,
            #080a10 48%,
            #050609 100%
        );

    box-sizing: border-box;

    scroll-behavior: smooth;
}


.rv-video-hub *,
.rv-video-hub *::before,
.rv-video-hub *::after {
    box-sizing: border-box;
}


.rv-video-container {
    width: min(1380px, 100%);
    margin: 0 auto;
}



/* =========================================================
   4. CABEÇALHO PRINCIPAL
   ========================================================= */

.rv-video-hero {
    max-width: 920px;

    margin:
        0
        auto
        55px;

    text-align: center;
}


.rv-video-eyebrow {
    display: inline-flex;

    padding:
        8px
        16px;

    margin-bottom: 20px;

    border:
        1px solid rgba(169, 129, 255, 0.35);

    border-radius: 999px;

    background:
        rgba(115, 76, 180, 0.12);

    color: #cbb7ff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;
}


.rv-video-hero h2 {
    margin:
        0
        0
        22px;

    font-size:
        clamp(32px, 5vw, 58px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.4px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #d7d9e1,
            #aeb4c5
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.rv-video-hero p {
    max-width: 760px;

    margin: 0 auto;

    color: var(--rv-text-soft);

    font-size: 17px;
    line-height: 1.75;
}



/* =========================================================
   5. MENU DAS TRÊS ÁREAS
   ========================================================= */

.rv-video-nav {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 80px;
}


.rv-nav-card {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 125px;

    padding: 22px;

    overflow: hidden;

    text-decoration: none;

    border-radius: 22px;

    border:
        1px solid var(--rv-border);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}


.rv-nav-card::before {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    right: -78px;
    top: -78px;

    border-radius: 50%;

    background:
        rgba(var(--rv-nav-rgb), 0.80);

    opacity: 0.12;

    filter: blur(14px);

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}


.rv-nav-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(var(--rv-nav-rgb), 0.50);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.035)
        );

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.38),
        0 0 32px rgba(var(--rv-nav-rgb), 0.12);
}


.rv-nav-card:hover::before {
    transform: scale(1.3);

    opacity: 0.20;
}



/* CORES DE CADA BOTÃO */

.rv-nav-tratamentos {
    --rv-nav-rgb: 213, 82, 255;
}


.rv-nav-tecnicas {
    --rv-nav-rgb: 40, 201, 255;
}


.rv-nav-sintonizacoes {
    --rv-nav-rgb: 232, 184, 90;
}



/* NÚMERO DO BOTÃO */

.rv-nav-number {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    margin-right: 16px;

    border-radius: 15px;

    color: #ffffff;

    font-weight: 800;
    font-size: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(var(--rv-nav-rgb), 1),
            rgba(var(--rv-nav-rgb), 0.55)
        );

    box-shadow:
        0 9px 22px
        rgba(var(--rv-nav-rgb), 0.22);
}


.rv-nav-content {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.rv-nav-content strong {
    margin-bottom: 7px;

    color: #ffffff;

    font-size: 16px;
    line-height: 1.25;
}


.rv-nav-content small {
    color: var(--rv-text-muted);

    font-size: 12.5px;
    line-height: 1.5;
}


.rv-nav-arrow {
    margin-left: auto;

    padding-left: 12px;

    color:
        rgb(var(--rv-nav-rgb));

    font-size: 22px;

    transition:
        transform 0.25s ease;
}


.rv-nav-card:hover .rv-nav-arrow {
    transform: translateY(5px);
}



/* =========================================================
   6. BLOCOS DAS CATEGORIAS
   ========================================================= */

.rv-category {
    --rv-accent: #d552ff;
    --rv-accent-rgb: 213, 82, 255;

    position: relative;

    margin-bottom: 80px;

    padding: 38px;

    border-radius: 30px;

    border:
        1px solid
        rgba(var(--rv-accent-rgb), 0.24);

    background:
        linear-gradient(
            145deg,
            rgba(var(--rv-accent-rgb), 0.055),
            rgba(255, 255, 255, 0.018)
        );

    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /*
       Importante:
       impede o cabeçalho fixo de cobrir
       o início da categoria ao clicar
       nos botões superiores.
    */

    scroll-margin-top: 95px;
}


.rv-category::before {
    content: "";

    position: absolute;

    left: 45px;
    right: 45px;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--rv-accent-rgb), 0.80),
            transparent
        );
}



/* CORES DAS 3 ÁREAS */

.rv-category-tratamentos {
    --rv-accent: #d552ff;
    --rv-accent-rgb: 213, 82, 255;
}


.rv-category-tecnicas {
    --rv-accent: #27c8ff;
    --rv-accent-rgb: 39, 200, 255;
}


.rv-category-sintonizacoes {
    --rv-accent: #e9b95b;
    --rv-accent-rgb: 233, 185, 91;
}



/* =========================================================
   7. CABEÇALHO DAS CATEGORIAS
   ========================================================= */

.rv-category-header {
    display: flex;
    align-items: flex-start;

    gap: 25px;

    margin-bottom: 34px;
}


.rv-category-number {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;

    border-radius: 20px;

    color: #ffffff;

    font-size: 20px;
    font-weight: 900;

    background:
        linear-gradient(
            145deg,
            rgba(var(--rv-accent-rgb), 0.95),
            rgba(var(--rv-accent-rgb), 0.45)
        );

    box-shadow:
        0 13px 30px
            rgba(var(--rv-accent-rgb), 0.22),
        inset 0 1px 0
            rgba(255, 255, 255, 0.30);
}


.rv-category-title {
    max-width: 900px;
}


.rv-category-label {
    display: block;

    margin-bottom: 6px;

    color: var(--rv-accent);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.9px;
}


.rv-category-title h3 {
    margin:
        0
        0
        10px;

    color: #ffffff;

    font-size:
        clamp(25px, 4vw, 37px);

    line-height: 1.15;

    letter-spacing: -0.5px;
}


.rv-category-title p {
    margin: 0;

    color: var(--rv-text-soft);

    font-size: 15px;
    line-height: 1.7;
}



/* =========================================================
   8. GRADE DOS VÍDEOS
   ========================================================= */

.rv-video-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}



/* =========================================================
   9. CARD DE CADA VÍDEO
   ========================================================= */

.rv-video-card {
    position: relative;

    overflow: hidden;

    border-radius: 22px;

    border:
        1px solid rgba(255, 255, 255, 0.09);

    background:
        linear-gradient(
            160deg,
            rgba(22, 24, 34, 0.96),
            rgba(10, 12, 18, 0.96)
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.30);

    transition:
        transform 0.30s ease,
        border-color 0.30s ease,
        box-shadow 0.30s ease;
}


.rv-video-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(var(--rv-accent-rgb), 0.40);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.40),
        0 0 25px
            rgba(var(--rv-accent-rgb), 0.08);
}



/* =========================================================
   10. YOUTUBE RESPONSIVO
   ========================================================= */

.rv-video-frame {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #000000;
}


.rv-video-frame::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--rv-accent-rgb), 0.70),
            transparent
        );
}


.rv-video-frame iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}



/* =========================================================
   11. CONTEÚDO DOS CARDS
   ========================================================= */

.rv-video-body {
    padding: 23px;
}


.rv-video-type {
    display: inline-flex;

    margin-bottom: 11px;

    padding:
        6px
        10px;

    border-radius: 7px;

    color: var(--rv-accent);

    background:
        rgba(var(--rv-accent-rgb), 0.10);

    border:
        1px solid
        rgba(var(--rv-accent-rgb), 0.20);

    font-size: 9.5px;
    font-weight: 800;

    letter-spacing: 1.4px;
}


.rv-video-body h4 {
    margin:
        0
        0
        10px;

    color: #ffffff;

    font-size: 20px;
    line-height: 1.3;
}


.rv-video-body p {
    margin:
        0
        0
        18px;

    color: var(--rv-text-soft);

    font-size: 14px;
    line-height: 1.65;
}



/* =========================================================
   12. INFORMAÇÕES DO VÍDEO
   ========================================================= */

.rv-video-info {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


.rv-video-info span {
    display: inline-flex;
    align-items: center;

    padding:
        7px
        10px;

    border-radius: 8px;

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid rgba(255, 255, 255, 0.065);

    color: #9fa5b2;

    font-size: 11px;
}



/* =========================================================
   13. RODAPÉ DA CENTRAL
   ========================================================= */

.rv-video-footer {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    padding:
        35px
        20px
        10px;
}


.rv-footer-symbol {
    margin-bottom: 10px;

    color: #a987ff;

    font-size: 24px;
}


.rv-video-footer p {
    margin:
        0
        0
        15px;

    color: var(--rv-text-muted);

    font-size: 13px;
}


.rv-video-footer a {
    color: #c5b4ff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        color 0.20s ease,
        transform 0.20s ease;
}


.rv-video-footer a:hover {
    color: #ffffff;
}



/* =========================================================
   14. TABLETS
   ========================================================= */

@media (max-width: 1000px) {

    .rv-video-nav {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .rv-nav-card {
        min-height: 105px;
    }


    .rv-video-hub {
        padding-top: 55px;
    }

}



/* =========================================================
   15. CELULARES
   ========================================================= */

@media (max-width: 760px) {

    .rv-pagina-topo {
        min-height: 60px;

        padding:
            9px
            13px;
    }


    .rv-botao-voltar {
        min-height: 39px;

        padding:
            8px
            15px;

        font-size: 13px;
    }


    .rv-video-hub {
        min-height:
            calc(100dvh - 60px);

        padding:
            42px
            14px
            55px;
    }


    .rv-video-hero {
        margin-bottom: 38px;
    }


    .rv-video-hero h2 {
        font-size:
            clamp(29px, 9vw, 42px);

        letter-spacing: -0.8px;
    }


    .rv-video-hero p {
        font-size: 15px;

        line-height: 1.65;
    }


    .rv-video-nav {
        margin-bottom: 55px;

        gap: 13px;
    }


    .rv-nav-card {
        min-height: 95px;

        padding: 17px;

        border-radius: 18px;
    }


    .rv-nav-number {
        width: 46px;
        height: 46px;

        margin-right: 13px;
    }


    .rv-category {
        padding:
            25px
            17px;

        margin-bottom: 50px;

        border-radius: 23px;

        scroll-margin-top: 78px;
    }


    .rv-category-header {
        flex-direction: column;

        gap: 17px;
    }


    .rv-category-number {
        width: 56px;
        height: 56px;

        border-radius: 16px;

        font-size: 16px;
    }


    .rv-category-title h3 {
        font-size: 27px;
    }


    .rv-video-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .rv-video-card {
        border-radius: 18px;
    }


    .rv-video-body {
        padding: 19px;
    }

}



/* =========================================================
   16. CELULARES PEQUENOS
   ========================================================= */

@media (max-width: 430px) {

    .rv-video-hub {
        padding:
            35px
            10px
            45px;
    }


    .rv-video-eyebrow {
        padding:
            7px
            12px;

        font-size: 9px;

        letter-spacing: 1.4px;
    }


    .rv-video-hero h2 {
        font-size:
            clamp(27px, 9vw, 36px);
    }


    .rv-nav-content small {
        display: none;
    }


    .rv-nav-card {
        min-height: 82px;
    }


    .rv-nav-arrow {
        font-size: 17px;
    }


    .rv-category {
        padding:
            22px
            12px;

        border-radius: 19px;
    }


    .rv-category-title p {
        font-size: 14px;
    }


    .rv-video-body h4 {
        font-size: 18px;
    }

}



/* =========================================================
   17. ACESSIBILIDADE — REDUZIR ANIMAÇÕES
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .rv-video-hub *,
    .rv-video-hub *::before,
    .rv-video-hub *::after,
    .rv-pagina-topo *,
    .rv-pagina-topo *::before,
    .rv-pagina-topo *::after {

        scroll-behavior: auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;
    }

}

/* =========================================================
   PROTEÇÃO PNG — ANDROID / PWA / WEBVIEW
   ========================================================= */

.botao-imagem-principal {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
}

.botao-imagem-principal img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center !important;
}


/* Em telas touch, evita o hover persistente de alguns Androids */
@media (hover: none) and (pointer: coarse) {

    .botao-imagem-principal:hover {
        transform: none !important;
    }

}

/* Deixa o botão da chave do mesmo tamanho dos outros */
#btnLiberarAcesso {
    width: min(400px, 94vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#btnLiberarAcesso img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}