@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

/*
! tailwindcss v3.3.5 | 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.
*/

html {
  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, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", 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 */
}

/*
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. 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-size: 1em;
  /* 2 */
}

/*
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 */
  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,
[type='button'],
[type='reset'],
[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] {
  display: none;
}

body {
  font-family: "Inter", sans-serif;
}

*, ::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:  ;
}

::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:  ;
}

.container{
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 16px;
  padding-left: 16px;
}

@media (min-width: 540px){
  .container{
    max-width: 540px;
  }
}

@media (min-width: 720px){
  .container{
    max-width: 720px;
  }
}

@media (min-width: 960px){
  .container{
    max-width: 960px;
  }
}

@media (min-width: 1140px){
  .container{
    max-width: 1140px;
  }
}

@media (min-width: 1320px){
  .container{
    max-width: 1320px;
  }
}

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

.visible{
  visibility: visible;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.-inset-10{
  inset: -2.5rem;
}

.-bottom-40{
  bottom: -10rem;
}

.-left-12{
  left: -3rem;
}

.-left-16{
  left: -4rem;
}

.-left-40{
  left: -10rem;
}

.-right-16{
  right: -4rem;
}

.bottom-16{
  bottom: 4rem;
}

.bottom-24{
  bottom: 6rem;
}

.bottom-32{
  bottom: 8rem;
}

.bottom-8{
  bottom: 2rem;
}

.left-0{
  left: 0px;
}

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

.left-\[-9999px\]{
  left: -9999px;
}

.left-\[27px\]{
  left: 27px;
}

.left-auto{
  left: auto;
}

.right-0{
  right: 0px;
}

.right-4{
  right: 1rem;
}

.right-8{
  right: 2rem;
}

.top-0{
  top: 0px;
}

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

.top-1\/4{
  top: 25%;
}

.top-10{
  top: 2.5rem;
}

.top-16{
  top: 4rem;
}

.top-24{
  top: 6rem;
}

.top-full{
  top: 100%;
}

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

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

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

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

.z-\[999\]{
  z-index: 999;
}

.order-first{
  order: -9999;
}

.-mx-4{
  margin-left: -1rem;
  margin-right: -1rem;
}

.mx-8{
  margin-left: 2rem;
  margin-right: 2rem;
}

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

.my-\[6px\]{
  margin-top: 6px;
  margin-bottom: 6px;
}

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

.mb-11{
  margin-bottom: 2.75rem;
}

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

.mb-14{
  margin-bottom: 3.5rem;
}

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

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

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

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

.mb-5{
  margin-bottom: 1.25rem;
}

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

.mb-7{
  margin-bottom: 1.75rem;
}

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

.mb-9{
  margin-bottom: 2.25rem;
}

.mt-0{
  margin-top: 0px;
}

.mt-0\.5{
  margin-top: 0.125rem;
}

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

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

.mt-\[6px\]{
  margin-top: 6px;
}

.block{
  display: block;
}

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

.flex{
  display: flex;
}

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

.grid{
  display: grid;
}

.hidden{
  display: none;
}

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

.h-0{
  height: 0px;
}

.h-1{
  height: 0.25rem;
}

.h-1\.5{
  height: 0.375rem;
}

.h-10{
  height: 2.5rem;
}

.h-11{
  height: 2.75rem;
}

.h-14{
  height: 3.5rem;
}

.h-2{
  height: 0.5rem;
}

.h-3{
  height: 0.75rem;
}

.h-7{
  height: 1.75rem;
}

.h-8{
  height: 2rem;
}

.h-9{
  height: 2.25rem;
}

.h-\[26rem\]{
  height: 26rem;
}

.h-\[2px\]{
  height: 2px;
}

.h-\[30rem\]{
  height: 30rem;
}

.h-\[34rem\]{
  height: 34rem;
}

.h-\[36rem\]{
  height: 36rem;
}

.min-h-screen{
  min-height: 100vh;
}

.w-0{
  width: 0px;
}

.w-1{
  width: 0.25rem;
}

.w-1\.5{
  width: 0.375rem;
}

.w-10{
  width: 2.5rem;
}

.w-11{
  width: 2.75rem;
}

.w-14{
  width: 3.5rem;
}

.w-2{
  width: 0.5rem;
}

.w-3{
  width: 0.75rem;
}

.w-32{
  width: 8rem;
}

.w-40{
  width: 10rem;
}

.w-60{
  width: 15rem;
}

.w-7{
  width: 1.75rem;
}

.w-8{
  width: 2rem;
}

.w-9{
  width: 2.25rem;
}

.w-\[230px\]{
  width: 230px;
}

.w-\[30px\]{
  width: 30px;
}

.w-\[34rem\]{
  width: 34rem;
}

.w-\[36rem\]{
  width: 36rem;
}

.w-\[46rem\]{
  width: 46rem;
}

.w-\[52rem\]{
  width: 52rem;
}

.w-full{
  width: 100%;
}

.w-px{
  width: 1px;
}

.max-w-\[1000px\]{
  max-width: 1000px;
}

.max-w-\[1080px\]{
  max-width: 1080px;
}

.max-w-\[250px\]{
  max-width: 250px;
}

.max-w-\[360px\]{
  max-width: 360px;
}

.max-w-\[380px\]{
  max-width: 380px;
}

.max-w-\[440px\]{
  max-width: 440px;
}

.max-w-\[460px\]{
  max-width: 460px;
}

.max-w-\[480px\]{
  max-width: 480px;
}

.max-w-\[560px\]{
  max-width: 560px;
}

.max-w-\[600px\]{
  max-width: 600px;
}

.max-w-\[620px\]{
  max-width: 620px;
}

.max-w-\[640px\]{
  max-width: 640px;
}

.max-w-\[720px\]{
  max-width: 720px;
}

.max-w-\[760px\]{
  max-width: 760px;
}

.max-w-\[880px\]{
  max-width: 880px;
}

.max-w-\[980px\]{
  max-width: 980px;
}

.max-w-full{
  max-width: 100%;
}

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

.-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));
}

.rotate-45{
  --tw-rotate: 45deg;
  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));
}

.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

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

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

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

.items-start{
  align-items: flex-start;
}

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

.justify-end{
  justify-content: flex-end;
}

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

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

.gap-10{
  gap: 2.5rem;
}

.gap-12{
  gap: 3rem;
}

.gap-2{
  gap: 0.5rem;
}

.gap-2\.5{
  gap: 0.625rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-4{
  gap: 1rem;
}

.gap-5{
  gap: 1.25rem;
}

.gap-8{
  gap: 2rem;
}

.gap-x-12{
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}

.gap-y-12{
  row-gap: 3rem;
}

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

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

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

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

.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-stroke > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-divide-opacity));
}

.justify-self-end{
  justify-self: end;
}

.overflow-hidden{
  overflow: hidden;
}

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

.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-y{
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-l{
  border-left-width: 1px;
}

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

.border-primary\/40{
  border-color: rgb(37 99 235 / 0.4);
}

.border-stroke{
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity));
}

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

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

.border-white\/25{
  border-color: rgb(255 255 255 / 0.25);
}

.bg-\[\#28c840\]{
  --tw-bg-opacity: 1;
  background-color: rgb(40 200 64 / var(--tw-bg-opacity));
}

.bg-\[\#febc2e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(254 188 46 / var(--tw-bg-opacity));
}

.bg-\[\#ff5f57\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 95 87 / var(--tw-bg-opacity));
}

.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
}

.bg-emerald-300{
  --tw-bg-opacity: 1;
  background-color: rgb(110 231 183 / var(--tw-bg-opacity));
}

.bg-gray-1{
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 252 / var(--tw-bg-opacity));
}

.bg-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.bg-primary\/10{
  background-color: rgb(37 99 235 / 0.1);
}

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

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

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

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

.bg-opacity-20{
  --tw-bg-opacity: 0.2;
}

.bg-gradient-to-b{
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-primary\/60{
  --tw-gradient-from: rgb(37 99 235 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-sky-200{
  --tw-gradient-from: #bae6fd var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(186 230 253 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-emerald-200{
  --tw-gradient-to: rgb(167 243 208 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #a7f3d0 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-primary\/25{
  --tw-gradient-to: rgb(37 99 235 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(37 99 235 / 0.25) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-sky-100{
  --tw-gradient-to: #e0f2fe var(--tw-gradient-to-position);
}

.to-transparent{
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.bg-clip-text{
  -webkit-background-clip: text;
          background-clip: text;
}

.fill-current{
  fill: currentColor;
}

.p-7{
  padding: 1.75rem;
}

.px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

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

.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

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

.px-7{
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

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

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

.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

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

.py-14{
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

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

.py-20{
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-24{
  padding-top: 6rem;
  padding-bottom: 6rem;
}

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

.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

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

.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-7{
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

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

.py-\[6px\]{
  padding-top: 6px;
  padding-bottom: 6px;
}

.pb-14{
  padding-bottom: 3.5rem;
}

.pb-16{
  padding-bottom: 4rem;
}

.pb-20{
  padding-bottom: 5rem;
}

.pl-3{
  padding-left: 0.75rem;
}

.pr-16{
  padding-right: 4rem;
}

.pr-5{
  padding-right: 1.25rem;
}

.pt-16{
  padding-top: 4rem;
}

.pt-20{
  padding-top: 5rem;
}

.pt-\[120px\]{
  padding-top: 120px;
}

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

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

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

.text-\[1\.35rem\]{
  font-size: 1.35rem;
}

.text-\[2\.1rem\]{
  font-size: 2.1rem;
}

.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;
}

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

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

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

.uppercase{
  text-transform: uppercase;
}

.leading-\[0\.74\]{
  line-height: 0.74;
}

.leading-\[1\.12\]{
  line-height: 1.12;
}

.leading-\[1\.15\]{
  line-height: 1.15;
}

.leading-\[1\.1\]{
  line-height: 1.1;
}

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

.leading-snug{
  line-height: 1.375;
}

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

.tracking-\[0\.14em\]{
  letter-spacing: 0.14em;
}

.tracking-\[0\.18em\]{
  letter-spacing: 0.18em;
}

.tracking-\[0\.2em\]{
  letter-spacing: 0.2em;
}

.tracking-tight{
  letter-spacing: -0.025em;
}

.text-black{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity));
}

.text-blue-100{
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity));
}

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

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

.text-body-color{
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity));
}

.text-body-secondary{
  --tw-text-opacity: 1;
  color: rgb(136 153 168 / var(--tw-text-opacity));
}

.text-dark{
  --tw-text-opacity: 1;
  color: rgb(17 25 40 / var(--tw-text-opacity));
}

.text-emerald-300{
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity));
}

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

.text-primary\/60{
  color: rgb(37 99 235 / 0.6);
}

.text-slate-300{
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity));
}

.text-slate-400{
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity));
}

.text-slate-500{
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity));
}

.text-transparent{
  color: transparent;
}

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

.text-opacity-80{
  --tw-text-opacity: 0.8;
}

.opacity-0{
  opacity: 0;
}

.opacity-40{
  opacity: 0.4;
}

.opacity-50{
  opacity: 0.5;
}

.opacity-60{
  opacity: 0.6;
}

.opacity-70{
  opacity: 0.7;
}

.shadow-2{
  --tw-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.10);
  --tw-shadow-colored: 0px 5px 12px 0px 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-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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-pricing{
  --tw-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.08);
  --tw-shadow-colored: 0px 0px 40px 0px 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-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.ring-primary{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
}

.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);
}

.blur-\[110px\]{
  --tw-blur: blur(110px);
  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);
}

.blur-\[120px\]{
  --tw-blur: blur(120px);
  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);
}

.blur-\[80px\]{
  --tw-blur: blur(80px);
  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-md{
  --tw-backdrop-blur: blur(12px);
  -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-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

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

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

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

.sticky{
  position: fixed;
  z-index: 9999;
  background-color: rgb(255 255 255 / 0.8);
  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;
}

:is(.dark .sticky){
  background-color: rgb(17 25 40 / 0.8);
}

.sticky {
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
}

.sticky .navbar-logo{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.sticky #navbarToggler span{
  --tw-bg-opacity: 1;
  background-color: rgb(17 25 40 / var(--tw-bg-opacity));
}

:is(.dark .sticky #navbarToggler span){
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.sticky #navbarCollapse li > a{
  --tw-text-opacity: 1;
  color: rgb(17 25 40 / var(--tw-text-opacity));
}

.sticky #navbarCollapse li > a:hover{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
  opacity: 1;
}

:is(.dark .sticky #navbarCollapse li > a){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

:is(.dark .sticky #navbarCollapse li > a:hover){
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

#navbarCollapse li .ud-menu-scroll.active{
  opacity: 0.7;
}

.sticky #navbarCollapse li .ud-menu-scroll.active{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
  opacity: 1;
}

.sticky .loginBtn{
  --tw-text-opacity: 1;
  color: rgb(17 25 40 / var(--tw-text-opacity));
}

.sticky .loginBtn:hover{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
  opacity: 1;
}

:is(.dark .sticky .loginBtn){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

:is(.dark .sticky .loginBtn:hover){
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

.sticky .signUpBtn{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.sticky .signUpBtn:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.sticky #themeSwitcher ~ span{
  --tw-text-opacity: 1;
  color: rgb(17 25 40 / var(--tw-text-opacity));
}

:is(.dark .sticky #themeSwitcher ~ span){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.navbarTogglerActive > span:nth-child(1){
  top: 7px;
  --tw-rotate: 45deg;
  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));
}

.navbarTogglerActive > span:nth-child(2){
  opacity: 0;
}

.navbarTogglerActive > span:nth-child(3){
  top: -8px;
  --tw-rotate: 135deg;
  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));
}

.common-carousel .swiper-button-next:after,
.common-carousel .swiper-button-prev:after{
  display: none;
}

.common-carousel .swiper-button-next,
.common-carousel .swiper-button-prev{
  position: static !important;
  margin: 0px;
  height: 3rem;
  width: 3rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(17 25 40 / var(--tw-text-opacity));
  --tw-shadow: 0px 8px 15px 0px rgba(72, 72, 138, 0.08);
  --tw-shadow-colored: 0px 8px 15px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.common-carousel .swiper-button-next:hover,
.common-carousel .swiper-button-prev:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

:is(.dark .common-carousel .swiper-button-next),:is(.dark 
.common-carousel .swiper-button-prev){
  --tw-bg-opacity: 1;
  background-color: rgb(17 25 40 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.common-carousel .swiper-button-next svg,
.common-carousel .swiper-button-prev svg{
  height: auto;
  width: auto;
}

/* Marca en la barra: sobre el bloque de color va en blanco, y al fijarse
   cambia a tinta. El template hace lo mismo con su logo, pero el nuestro es
   isotipo mas texto, asi que se resuelve por CSS y no por JavaScript. */

.sticky .marca-texto{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity));
}

.sticky .marca-iso-blanco{
  display: none;
}

.sticky .marca-iso-color{
  display: block;
}

/* ======================================================================
   Capa de movimiento y profundidad
   El template traia WOW.js con una sola animacion. Todo lo de abajo es
   propio: los efectos se declaran por atributo en el HTML (ver anima.js)
   para que sumar uno nuevo sea agregar una regla, no tocar cada seccion.
   ====================================================================== */

/* ---- Revelado por scroll --------------------------------------------- */

[data-anima] {
  opacity: 0;
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-anima="rise"] {
  transform: translate3d(0, 34px, 0);
}

[data-anima="left"] {
  transform: translate3d(-40px, 0, 0);
}

[data-anima="right"] {
  transform: translate3d(40px, 0, 0);
}

[data-anima="scale"] {
  transform: scale(0.94);
}

[data-anima="blur"] {
  transform: translate3d(0, 20px, 0);
  filter: blur(10px);
}

[data-anima].anima-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Sin JavaScript el contenido tiene que verse igual: sin esto la pagina
   entera queda invisible, que es el mismo pozo del que nos saco el
   <noscript> de WOW. */

.sin-js [data-anima] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Con las animaciones del sistema apagadas se apaga lo gratuito, no todo.
   Un desplazamiento lineal y constante como el de la marquesina no dispara
   malestar vestibular; lo que si lo dispara es el zoom, el parallax y la
   rotacion en profundidad. Apagar el movimiento entero dejaba la pagina
   muerta para cualquiera con esa preferencia puesta. */

@media (prefers-reduced-motion: reduce) {
  /* El contenido entra, pero solo con fundido: sin desplazamiento ni escala. */

  [data-anima] {
    transform: none !important;
    filter: none !important;
    transition: opacity 0.5s ease !important;
  }

  /* Efectos que si se apagan: respiran, laten o mueven el plano. */

  .flotar,
  .aurora::before,
  .aurora::after,
  .pulso::before {
    animation: none !important;
  }

  /* La marquesina sigue, mas despacio. */

  .marquee__pista {
    animation-duration: calc(var(--marquee-tiempo, 20s) * 2);
  }
}

/* ---- Barra de progreso de lectura ------------------------------------ */

.progreso{
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 10000;
  height: 5px;
  width: 100%;
  transform-origin: left;
  background: linear-gradient(90deg, #2563eb, #38bdf8, #10b981);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.55);
  transform: scaleX(0);
}

/* ---- Fondo del hero: luz difusa + reticula ---------------------------- */

.aurora {
  position: relative;
  isolation: isolate;
}

/* Dos manchas de luz que respiran a distinto ritmo. Con dos basta: tres o
   mas se leen como fondo de plantilla. */

.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 9999px;
  filter: blur(90px);
  pointer-events: none;
}

.aurora::before {
  width: 46rem;
  height: 46rem;
  top: -18rem;
  left: -12rem;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.5), transparent 68%);
  animation: derivar-a 22s ease-in-out infinite;
}

.aurora::after {
  width: 40rem;
  height: 40rem;
  right: -14rem;
  top: 4rem;
  background: radial-gradient(
    circle,
    rgba(16, 185, 129, 0.32),
    transparent 68%
  );
  animation: derivar-b 26s ease-in-out infinite;
}

@keyframes derivar-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(7rem, 4rem, 0) scale(1.12);
  }
}

@keyframes derivar-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1.08);
  }

  50% {
    transform: translate3d(-6rem, 5rem, 0) scale(0.94);
  }
}

/* Reticula de puntos que se desvanece hacia abajo, para que el corte con la
   seccion siguiente no sea una linea dura. */

.reticula {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.16) 1px,
    transparent 1px
  );
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, black 5%, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, black 5%, transparent 78%);
}

/* ---- Ventana del navegador alrededor de las capturas ------------------ */

.ventana{
  overflow: hidden;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.08),
    0 24px 48px -12px rgba(15, 23, 42, 0.32),
    0 48px 96px -24px rgba(15, 23, 42, 0.28);
}

.ventana__barra{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 252 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.ventana__punto{
  height: 10px;
  width: 10px;
  border-radius: 9999px;
}

/* Captura que se asoma: se corta a proposito contra la seccion siguiente.
   La altura la fija el contenedor y el pie pierde el radio, asi el filo cae
   recto sobre el borde de la seccion en vez de mostrar una esquina redondeada
   flotando a media pantalla. */

.ventana--asomada {
  max-height: 27rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.08),
    0 24px 48px -12px rgba(15, 23, 42, 0.32);
}

.ventana__url{
  margin-left: 0.75rem;
  display: none;
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(136 153 168 / var(--tw-text-opacity));
}

@media (min-width: 540px){
  .ventana__url{
    display: block;
  }
}

/* ---- Flotacion y pulso ------------------------------------------------ */

.flotar {
  animation: flotar 7s ease-in-out infinite;
}

@keyframes flotar {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

.pulso {
  position: relative;
}

.pulso::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: currentColor;
  animation: pulso 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulso {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }

  70% {
    transform: scale(2.4);
    opacity: 0;
  }

  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* ---- Chips de datos sobre la captura ---------------------------------- */

.chip-dato{
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.28);
}

/* ---- Boton con destello al pasar -------------------------------------- */

.btn-brillo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-brillo::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.42),
    transparent
  );
}

.btn-brillo:hover::after {
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateX(130%) skewX(-18deg);
}

/* ---- Marquesina de marcas --------------------------------------------- */

/* El ancho lo pone el contenido y la pista se duplica en el HTML, asi que
   sumar una marca no obliga a recalcular ningun tiempo ni ancho. */

.marquee{
  position: relative;
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent,
    black 30%,
    black 70%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    black 30%,
    black 70%,
    transparent
  );
}

.marquee__pista{
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--marquee-gap, 4rem);
  padding-right: var(--marquee-gap, 4rem);
  animation: desfilar var(--marquee-tiempo, 38s) linear infinite;
}

.marquee:hover .marquee__pista {
  animation-play-state: paused;
}

@keyframes desfilar {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* Logo de marca. Los archivos vienen de cada fabricante y tienen
   proporciones muy distintas: unos son una franja baja de texto, otros traen
   el tagline en una segunda linea. Igualar el alto a ciegas los deja de pesos
   opticos distintos, asi que hay dos alturas y cada logo elige la suya. Un
   logo nuevo entra en una de las dos, no obliga a una regla propia. */

.marca{
  display: flex;
  flex-shrink: 0;
  align-items: center;
  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: 300ms;
  height: 34px;
}

.marca--doble {
  height: 44px;
}

.marca img{
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}

/* Separador entre logos, para que se lea como una cinta que pasa y no como
   una lista que se repite. */

.marca::after {
  content: "";
  position: absolute;
  right: calc(var(--marquee-gap, 4rem) / -2);
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.3;
  transform: translate(50%, -50%);
}

.marca {
  position: relative;
}

/* ---- Pasos con hilo conductor ----------------------------------------- */

.paso__hilo{
  position: absolute;
  left: calc(50% + 2.25rem);
  top: 2.25rem;
  display: none;
  height: 1px;
  width: calc(100% - 4.5rem);
}

@media (min-width: 960px){
  .paso__hilo{
    display: block;
  }
}

.paso__hilo {
  background: linear-gradient(
    90deg,
    rgba(37, 99, 235, 0.32),
    rgba(37, 99, 235, 0.06)
  );
}

.paso:last-child .paso__hilo {
  display: none;
}

/* ---- Desplazamiento por scroll ---------------------------------------- */

[data-parallax] {
  transform: translate3d(0, var(--parallax, 0), 0);
}

/* Pieza que se endereza al subir. La perspectiva va en el contenedor para
   que la rotacion se lea en profundidad y no como un aplastado. */

[data-enderezar] {
  transform: perspective(1800px) rotateX(var(--girox, 0deg)) scale(var(--escala, 1));
  transform-origin: center top;
  will-change: transform;
}

/* ======================================================================
   Grilla con borde iluminado que sigue al cursor

   Portado del pen "Magical Hover Effect" de Hyperplexed
   (https://codepen.io/Hyperplexed/pen/MWQeYLW), el mismo que freefrontend
   lista como "Interactive Glowing Grid Cards".

   Lo que lo distingue de un hover comun: el listener vive en el CONTENEDOR,
   asi que al mover el mouse se iluminan los bordes de TODAS las tarjetas
   segun su distancia al cursor, no solo el de la que esta debajo. Esa es la
   sensacion de linterna que no se consigue con un :hover por tarjeta.

   La tecnica: dos pseudo-elementos con el mismo degradado radial centrado en
   la posicion del mouse. El de abajo (::after) pinta el borde; encima va
   .halo__cara con inset:1px, que tapa todo menos ese pixel de contorno. El
   de arriba (::before) es el brillo interior y solo aparece en la tarjeta
   que se esta tocando.
   ====================================================================== */

.halo-grilla {
  display: grid;
}

/* La capa de abajo ES el borde: la cara va con inset de 1px y deja ver este
   fondo alrededor. En reposo se lee como un borde gris comun; el degradado
   radial de ::after lo enciende cuando el cursor se acerca. Sin este color
   base la tarjeta queda sin contorno hasta que alguien pasa el mouse. */

.halo {
  position: relative;
  border-radius: 1rem;
  background-color: var(--halo-superficie, #e2e8f0);
  padding: 1px;
}

.halo::before,
.halo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 500ms;
  pointer-events: none;
}

/* Brillo interior: solo la tarjeta que se toca. */

.halo::before {
  z-index: 3;
  background: radial-gradient(
    46rem circle at var(--mouse-x) var(--mouse-y),
    var(--halo-brillo, rgba(37, 99, 235, 0.1)),
    transparent 40%
  );
}

/* Borde: se enciende en toda la grilla apenas el cursor entra. */

.halo::after {
  z-index: 1;
  background: radial-gradient(
    34rem circle at var(--mouse-x) var(--mouse-y),
    var(--halo-borde, rgba(37, 99, 235, 0.55)),
    transparent 40%
  );
}

.halo-grilla:hover > .halo::after {
  opacity: 1;
}

.halo:hover::before {
  opacity: 1;
}

/* Tapa todo menos el contorno de un pixel. */

.halo__cara {
  position: relative;
  z-index: 2;
  height: 100%;
  border-radius: calc(1rem - 1px);
  background-color: var(--halo-fondo, #ffffff);
}

/* Sin cursor fino el efecto no existe, y el borde de 1px se ve como un
   defecto: en tactil la tarjeta lleva su propio borde. */

@media (hover: none), (pointer: coarse) {
  .halo::before,
  .halo::after {
    display: none;
  }
}

.placeholder\:text-body-secondary::-moz-placeholder{
  --tw-text-opacity: 1;
  color: rgb(136 153 168 / var(--tw-text-opacity));
}

.placeholder\:text-body-secondary::placeholder{
  --tw-text-opacity: 1;
  color: rgb(136 153 168 / var(--tw-text-opacity));
}

.hover\:-translate-y-0:hover{
  --tw-translate-y: -0px;
  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));
}

.hover\:-translate-y-0\.5:hover{
  --tw-translate-y: -0.125rem;
  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));
}

.hover\:gap-3:hover{
  gap: 0.75rem;
}

.hover\:border-primary\/40:hover{
  border-color: rgb(37 99 235 / 0.4);
}

.hover\:bg-blue-dark:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}

.hover\:bg-dark:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(17 25 40 / var(--tw-bg-opacity));
}

.hover\:bg-gray-2:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 249 / var(--tw-bg-opacity));
}

.hover\:bg-white\/20:hover{
  background-color: rgb(255 255 255 / 0.2);
}

.hover\:bg-opacity-100:hover{
  --tw-bg-opacity: 1;
}

.hover\:text-blue-dark:hover{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
}

.hover\:text-dark:hover{
  --tw-text-opacity: 1;
  color: rgb(17 25 40 / var(--tw-text-opacity));
}

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

.hover\:shadow-lg:hover{
  --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);
}

.hover\:shadow-pricing:hover{
  --tw-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.08);
  --tw-shadow-colored: 0px 0px 40px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-primary\/30:hover{
  --tw-shadow-color: rgb(37 99 235 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.focus\:border-primary:focus{
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}

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

.focus\:ring-2:focus{
  --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(2px + 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);
}

.focus\:ring-4:focus{
  --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(4px + 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);
}

.focus\:ring-primary\/10:focus{
  --tw-ring-color: rgb(37 99 235 / 0.1);
}

.group:hover .group-hover\:translate-x-1{
  --tw-translate-x: 0.25rem;
  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));
}

.group:hover .group-hover\:-rotate-6{
  --tw-rotate: -6deg;
  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));
}

.group:hover .group-hover\:border-blue-400\/40{
  border-color: rgb(96 165 250 / 0.4);
}

.group:hover .group-hover\:bg-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

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

.group:hover .group-hover\:text-primary{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

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

@media (min-width: 540px){
  .sm\:col-span-1{
    grid-column: span 1 / span 1;
  }

  .sm\:block{
    display: block;
  }

  .sm\:flex{
    display: flex;
  }

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

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

  .sm\:grid-cols-\[auto\2c 1fr\]{
    grid-template-columns: auto 1fr;
  }

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

  .sm\:gap-10{
    gap: 2.5rem;
  }

  .sm\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

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

  .sm\:text-5xl{
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-\[2\.15rem\]{
    font-size: 2.15rem;
  }

  .sm\:text-\[28px\]{
    font-size: 28px;
  }

  .sm\:text-\[32px\]{
    font-size: 32px;
  }

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

@media (min-width: 720px){
  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:py-\[130px\]{
    padding-top: 130px;
    padding-bottom: 130px;
  }

  .md\:pt-\[130px\]{
    padding-top: 130px;
  }

  .md\:text-\[40px\]{
    font-size: 40px;
  }

  .md\:text-\[42px\]{
    font-size: 42px;
  }

  .md\:text-\[44px\]{
    font-size: 44px;
  }

  .md\:text-\[46px\]{
    font-size: 46px;
  }

  .md\:leading-\[1\.15\]{
    line-height: 1.15;
  }

  .md\:leading-\[1\.2\]{
    line-height: 1.2;
  }
}

@media (min-width: 960px){
  .lg\:static{
    position: static;
  }

  .lg\:order-last{
    order: 9999;
  }

  .lg\:col-span-3{
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-5{
    grid-column: span 5 / span 5;
  }

  .lg\:-mr-6{
    margin-right: -1.5rem;
  }

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

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

  .lg\:mr-0{
    margin-right: 0px;
  }

  .lg\:block{
    display: block;
  }

  .lg\:flex{
    display: flex;
  }

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

  .lg\:hidden{
    display: none;
  }

  .lg\:w-1\/2{
    width: 50%;
  }

  .lg\:w-5\/12{
    width: 41.666667%;
  }

  .lg\:w-7\/12{
    width: 58.333333%;
  }

  .lg\:w-full{
    width: 100%;
  }

  .lg\:max-w-full{
    max-width: 100%;
  }

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

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

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

  .lg\:grid-cols-\[auto\2c 1fr\2c auto\]{
    grid-template-columns: auto 1fr auto;
  }

  .lg\:gap-20{
    gap: 5rem;
  }

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

  .lg\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }

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

  .lg\:py-0{
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .lg\:py-20{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:py-6{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .lg\:py-\[120px\]{
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .lg\:py-\[130px\]{
    padding-top: 130px;
    padding-bottom: 130px;
  }

  .lg\:pb-20{
    padding-bottom: 5rem;
  }

  .lg\:pb-28{
    padding-bottom: 7rem;
  }

  .lg\:pl-0{
    padding-left: 0px;
  }

  .lg\:pr-0{
    padding-right: 0px;
  }

  .lg\:pr-10{
    padding-right: 2.5rem;
  }

  .lg\:pr-8{
    padding-right: 2rem;
  }

  .lg\:pt-24{
    padding-top: 6rem;
  }

  .lg\:pt-\[165px\]{
    padding-top: 165px;
  }

  .lg\:text-\[4rem\]{
    font-size: 4rem;
  }

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

  .lg\:shadow-none{
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .group:hover .lg\:group-hover\:text-white{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }

  .group:hover .lg\:group-hover\:opacity-70{
    opacity: 0.7;
  }
}

@media (min-width: 1140px){
  .xl\:-mr-14{
    margin-right: -3.5rem;
  }

  .xl\:ml-10{
    margin-left: 2.5rem;
  }

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

@media (min-width: 1320px){
  .\32xl\:ml-20{
    margin-left: 5rem;
  }
}