input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
input {
  outline: 0;
}
@font-face {
  font-family: google;
  src: url(assets/emailVerification/GoogleSans-Regular.ttf);
}
*,
:after,
:before {
  --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-scroll-snap-strictness: proximity;
  --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;
}
::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-scroll-snap-strictness: proximity;
  --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;
}
*,
:after,
:before {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}
:after,
:before {
  --tw-content: "";
}
:host,
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family:
    ui-sans-serif,
    system-ui,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    Segoe UI Symbol,
    "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  line-height: inherit;
}
h1,
h2 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  color: inherit;
  text-decoration: inherit;
}
strong {
  font-weight: bolder;
}
button,
input {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button {
  text-transform: none;
}
button,
input:where([type="button"]),
input:where([type="reset"]),
input:where([type="submit"]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:-moz-focusring {
  outline: auto;
}
:-moz-ui-invalid {
  box-shadow: none;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
h1,
h2,
p {
  margin: 0;
}
input::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}
button {
  cursor: pointer;
}
:disabled {
  cursor: default;
}
img,
svg {
  display: block;
  vertical-align: middle;
}
img {
  max-width: 100%;
  height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
:root {
  color: hsl(var(--nextui-foreground));
  background-color: hsl(var(--nextui-background));
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.flex {
  display: flex;
}
.hidden {
  display: none;
}
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.h-\[24px\] {
  height: 24px;
}
.h-\[32px\] {
  height: 32px;
}
.h-\[35px\] {
  height: 35px;
}
.h-\[80px\] {
  height: 80px;
}
.min-h-\[calc\(100vh-80px\)\] {
  min-height: calc(100vh - 80px);
}
.w-\[24px\] {
  width: 24px;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-2 {
  gap: 0.5rem;
}
.border-b-\[1px\] {
  border-bottom-width: 1px;
}
.border-b-\[\#e6e6e6\] {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(230 230 230 / var(--tw-border-opacity, 1));
}
.bg-\[\#f6faff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(246 250 255 / var(--tw-bg-opacity, 1));
}
.px-\[10px\] {
  padding-left: 10px;
  padding-right: 10px;
}
.text-\[14px\] {
  font-size: 14px;
}
.font-medium {
  font-weight: 500;
}
.text-\[\#0043a9\] {
  --tw-text-opacity: 1;
  color: rgb(0 67 169 / var(--tw-text-opacity, 1));
}
:root {
  color-scheme: light;
  --nextui-background: 0 0% 100%;
  --nextui-foreground-50: 0 0% 98.04%;
  --nextui-foreground-100: 240 4.76% 95.88%;
  --nextui-foreground-200: 240 5.88% 90%;
  --nextui-foreground-300: 240 4.88% 83.92%;
  --nextui-foreground-400: 240 5.03% 64.9%;
  --nextui-foreground-500: 240 3.83% 46.08%;
  --nextui-foreground-600: 240 5.2% 33.92%;
  --nextui-foreground-700: 240 5.26% 26.08%;
  --nextui-foreground-800: 240 3.7% 15.88%;
  --nextui-foreground-900: 240 5.88% 10%;
  --nextui-foreground: 201.81999999999994 24.44% 8.82%;
  --nextui-divider: 0 0% 6.67%;
  --nextui-divider-opacity: 0.15;
  --nextui-focus: 212.01999999999998 100% 46.67%;
  --nextui-overlay: 0 0% 0%;
  --nextui-content1: 0 0% 100%;
  --nextui-content1-foreground: 201.81999999999994 24.44% 8.82%;
  --nextui-content2: 240 4.76% 95.88%;
  --nextui-content2-foreground: 240 3.7% 15.88%;
  --nextui-content3: 240 5.88% 90%;
  --nextui-content3-foreground: 240 5.26% 26.08%;
  --nextui-content4: 240 4.88% 83.92%;
  --nextui-content4-foreground: 240 5.2% 33.92%;
  --nextui-default-50: 0 0% 98.04%;
  --nextui-default-100: 240 4.76% 95.88%;
  --nextui-default-200: 240 5.88% 90%;
  --nextui-default-300: 240 4.88% 83.92%;
  --nextui-default-400: 240 5.03% 64.9%;
  --nextui-default-500: 240 3.83% 46.08%;
  --nextui-default-600: 240 5.2% 33.92%;
  --nextui-default-700: 240 5.26% 26.08%;
  --nextui-default-800: 240 3.7% 15.88%;
  --nextui-default-900: 240 5.88% 10%;
  --nextui-default-foreground: 0 0% 0%;
  --nextui-default: 240 4.88% 83.92%;
  --nextui-primary-50: 212.5 92.31% 94.9%;
  --nextui-primary-100: 211.84000000000003 92.45% 89.61%;
  --nextui-primary-200: 211.84000000000003 92.45% 79.22%;
  --nextui-primary-300: 212.24 92.45% 68.82%;
  --nextui-primary-400: 212.14 92.45% 58.43%;
  --nextui-primary-500: 212.01999999999998 100% 46.67%;
  --nextui-primary-600: 212.14 100% 38.43%;
  --nextui-primary-700: 212.24 100% 28.82%;
  --nextui-primary-800: 211.84000000000003 100% 19.22%;
  --nextui-primary-900: 211.84000000000003 100% 9.61%;
  --nextui-primary-foreground: 0 0% 100%;
  --nextui-primary: 212.01999999999998 100% 46.67%;
  --nextui-secondary-50: 270 61.54% 94.9%;
  --nextui-secondary-100: 270 59.26% 89.41%;
  --nextui-secondary-200: 270 59.26% 78.82%;
  --nextui-secondary-300: 270 59.26% 68.24%;
  --nextui-secondary-400: 270 59.26% 57.65%;
  --nextui-secondary-500: 270 66.67% 47.06%;
  --nextui-secondary-600: 270 66.67% 37.65%;
  --nextui-secondary-700: 270 66.67% 28.24%;
  --nextui-secondary-800: 270 66.67% 18.82%;
  --nextui-secondary-900: 270 66.67% 9.41%;
  --nextui-secondary-foreground: 0 0% 100%;
  --nextui-secondary: 270 66.67% 47.06%;
  --nextui-success-50: 146.66999999999996 64.29% 94.51%;
  --nextui-success-100: 145.71000000000004 61.4% 88.82%;
  --nextui-success-200: 146.2 61.74% 77.45%;
  --nextui-success-300: 145.78999999999996 62.57% 66.47%;
  --nextui-success-400: 146.01 62.45% 55.1%;
  --nextui-success-500: 145.96000000000004 79.46% 43.92%;
  --nextui-success-600: 146.01 79.89% 35.1%;
  --nextui-success-700: 145.78999999999996 79.26% 26.47%;
  --nextui-success-800: 146.2 79.78% 17.45%;
  --nextui-success-900: 145.71000000000004 77.78% 8.82%;
  --nextui-success-foreground: 0 0% 0%;
  --nextui-success: 145.96000000000004 79.46% 43.92%;
  --nextui-warning-50: 54.55000000000001 91.67% 95.29%;
  --nextui-warning-100: 37.139999999999986 91.3% 90.98%;
  --nextui-warning-200: 37.139999999999986 91.3% 81.96%;
  --nextui-warning-300: 36.95999999999998 91.24% 73.14%;
  --nextui-warning-400: 37.00999999999999 91.26% 64.12%;
  --nextui-warning-500: 37.02999999999997 91.27% 55.1%;
  --nextui-warning-600: 37.00999999999999 74.22% 44.12%;
  --nextui-warning-700: 36.95999999999998 73.96% 33.14%;
  --nextui-warning-800: 37.139999999999986 75% 21.96%;
  --nextui-warning-900: 37.139999999999986 75% 10.98%;
  --nextui-warning-foreground: 0 0% 0%;
  --nextui-warning: 37.02999999999997 91.27% 55.1%;
  --nextui-danger-50: 339.13 92% 95.1%;
  --nextui-danger-100: 340 91.84% 90.39%;
  --nextui-danger-200: 339.3299999999999 90% 80.39%;
  --nextui-danger-300: 339.11 90.6% 70.78%;
  --nextui-danger-400: 339 90% 60.78%;
  --nextui-danger-500: 339.20000000000005 90.36% 51.18%;
  --nextui-danger-600: 339 86.54% 40.78%;
  --nextui-danger-700: 339.11 85.99% 30.78%;
  --nextui-danger-800: 339.3299999999999 86.54% 20.39%;
  --nextui-danger-900: 340 84.91% 10.39%;
  --nextui-danger-foreground: 0 0% 100%;
  --nextui-danger: 339.20000000000005 90.36% 51.18%;
  --nextui-divider-weight: 1px;
  --nextui-disabled-opacity: 0.5;
  --nextui-font-size-tiny: 0.75rem;
  --nextui-font-size-small: 0.875rem;
  --nextui-font-size-medium: 1rem;
  --nextui-font-size-large: 1.125rem;
  --nextui-line-height-tiny: 1rem;
  --nextui-line-height-small: 1.25rem;
  --nextui-line-height-medium: 1.5rem;
  --nextui-line-height-large: 1.75rem;
  --nextui-radius-small: 8px;
  --nextui-radius-medium: 12px;
  --nextui-radius-large: 14px;
  --nextui-border-width-small: 1px;
  --nextui-border-width-medium: 2px;
  --nextui-border-width-large: 3px;
  --nextui-box-shadow-small:
    0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06),
    0px 0px 1px 0px rgb(0 0 0 / 0.3);
  --nextui-box-shadow-medium:
    0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08),
    0px 0px 1px 0px rgb(0 0 0 / 0.3);
  --nextui-box-shadow-large:
    0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12),
    0px 0px 1px 0px rgb(0 0 0 / 0.3);
  --nextui-hover-opacity: 0.8;
}
@font-face {
  font-family: Roboto;
  src: url(/assets/Roboto-WOy3sDCz.ttf);
}
* {
  font-family: Roboto, sans-serif;
}
@media (min-width: 768px) {
  .md\:block {
    display: block;
  }
  .md\:w-\[568px\] {
    width: 568px;
  }
  .md\:max-w-\[1168px\] {
    max-width: 1168px;
  }
  .md\:px-\[56px\] {
    padding-left: 56px;
    padding-right: 56px;
  }
}
.banner {
  border-radius: 1rem;
  height: 33.75rem;
  width: 100%;
  max-width: 26rem;
  overflow: hidden;
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}
.banner-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.banner-overlay {
  position: absolute;
  inset: 0;
  background: rgb(245 77 77 / 36%);
  z-index: 1;
}
.banner-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 2rem 1.5rem;
  z-index: 2;
  color: #fff;
}
.banner-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5rem;
}
.banner-title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.banner-description {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  max-width: 18rem;
}
.banner-btn {
  background: #c908083d;
  border: 2px solid #fff;
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.banner-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
.info-card {
  background: #fff;
  border: 1px solid #d4e5f8;
  border-radius: 1rem;
  max-width: 26rem;
  padding: 1.5rem;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}
.info-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #272833;
  margin-bottom: 1rem;
}
.info-card__tabs {
  display: flex;
  border-bottom: 1px solid #e6e6e6;
}
.info-card__tab {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0043a9;
  padding: 0.4rem 0;
  cursor: pointer;
}
.info-card__tab--active {
  border-bottom: 2px solid #0043a9;
  margin-bottom: -1px;
}
.info-card__content {
  background: #f6faff;
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.info-card__content p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #272833;
}
.info-card__footer {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
}
.info-card__btn {
  background: #0043a9;
  color: #fff;
  border: none;
  border-radius: 2rem;
  padding: 0.875rem 2rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.info-card__btn:hover {
  background: #00317e;
}
.footer {
  background: #0043a9;
  border-radius: 1rem;
  padding: 1.5rem;
  max-width: 26rem;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  color: #fff;
}
.footer__app {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.footer__app__logo {
  width: 3rem;
  height: 3rem;
  background: #ffffff00;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.footer__app__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.footer__app__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}
.footer__app__text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 1.25rem;
}
.footer__app__stores {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.footer__btn__store {
  display: block;
}
.footer__btn__store img {
  height: 2.75rem;
  width: auto;
  border-radius: 0.4rem;
}
.footer__ending {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.footer__ending__bdb img {
  height: 2.5rem;
  width: auto;
}
.footer__ending__superintendence {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.footer__vigilado {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border: 1px solid #fff;
  padding: 0.2rem 0.4rem;
  color: #fff;
}
.footer__super__text {
  font-size: 0.6rem;
  color: #fff;
  text-align: left;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.request-info-personal {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 16px;
  min-height: 10vh;
  background-color: #fff;
}
.request-info-personal__container {
  background-color: #f6faff;
  border-radius: 12px;
  padding: 32px 24px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(128, 128, 128, 0.3);
}
.request-info-personal__title {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Segoe UI",
    sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: #000;
  margin-bottom: 12px;
  line-height: 1.25;
}
.request-info-personal__description {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Segoe UI",
    sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #666;
  line-height: 1.5;
  margin-bottom: 24px;
}
.request-info-personal__inputs {
  display: flex;
  flex-direction: column;
}
.request-info-personal__inputs > div {
  display: flex;
  flex-direction: column;
}
.request-info-personal__inputs--divider {
  height: 20px;
}
.request-info-personal__label {
  display: block;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Segoe UI",
    sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #444;
  margin-bottom: 8px;
  line-height: 1.25;
}
.request-info-personal__field {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Segoe UI",
    sans-serif;
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 400;
  color: #333;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  outline: 0;
  transition:
    border-color 250ms ease,
    box-shadow 250ms ease;
  line-height: 1.5;
  box-sizing: border-box;
}
.request-info-personal__field:focus {
  border-color: #0043a9;
  background-color: #fff;
  box-shadow: 0 0 0 2px rgba(0, 67, 169, 0.15);
}
.request-info-personal__field:hover:not(:focus) {
  border-color: #ccc;
}
.request-info-personal__container-checkbox-text {
  margin-top: 4px;
  margin-bottom: 24px;
}
.request-info-personal__container-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.request-info-personal__terms {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Segoe UI",
    sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: #666;
  line-height: 1.5;
}
.request-info-personal__actions {
  margin-top: 0;
}
.request-info-personal__btn-send {
  width: 100%;
}
.bdb-at-btn {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Segoe UI",
    sans-serif;
  width: 100%;
  border: none;
  border-radius: 26px;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  transition:
    background-color 250ms ease,
    color 250ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bdb-at-btn--lg {
  padding: 14px 24px;
  font-size: 1rem;
}
.bdb-at-btn--primary {
  background-color: #0043a9;
  color: #fff;
}
.bdb-at-btn--primary:hover:not(:disabled) {
  background-color: #00317e;
}
.bdb-at-btn--primary:disabled {
  background-color: #e6e6e6;
  color: #999;
  cursor: not-allowed;
}
.bdb-at-btn--primary span {
  margin-left: 4px;
}
@media (max-width: 480px) {
  .request-info-personal__container {
    padding: 24px 16px;
    border-radius: 8px;
  }
  .request-info-personal__title {
    font-size: 1.25rem;
  }
  .request-info-personal {
    padding: 16px 12px;
  }
}

        .shape-red, .spinner-bdb {
            animation-duration: 4s;
            animation-iteration-count: infinite;
        }
        
        .spinner-bdb {
            height: 8rem;
            width: 6rem;
            position: relative;
            animation-name: spinner-bdb;
            transform-origin: 50% 25%;
        }
        
        .shape {
            height: 2.5rem;
            width: 2.5rem;
            border-radius: 50%;
            position: absolute;
        }
        
        .shape-red {
            background-color: #f23a31;
            animation-name: red;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
        }
        
        .shape-blue, .shape-yellow {
            animation-duration: 4s;
            animation-iteration-count: infinite;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(-100%);
            opacity: 0;
        }
        
        .shape-blue {
            background-color: #1c83e1;
            animation-name: blue;
        }
        
        .shape-yellow {
            background-color: #fdc130;
            animation-name: yellow;
        }
        
        @keyframes red {
            0%, 100% {
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                opacity: 1;
            }
            10%, 90% {
                top: 100%;
                left: 50%;
                transform: translateX(-50%) translateY(-100%);
                opacity: 1;
            }
            12%, 50% {
                top: 100%;
                left: 50%;
                transform: translateX(-50%) translateY(-100%) scaleY(80%);
                transform-origin: bottom;
                opacity: 0;
            }
            52% {
                top: 100%;
                left: 10%;
                transform: translateX(0) translateY(-100%) scaleY(1);
                opacity: 1;
            }
            60%, 80% {
                top: 0;
                left: 0;
                transform: translateX(0) translateY(0) scaleY(1);
                opacity: 1;
            }
        }
        
        @keyframes blue {
            0%, 100%, 90.1% {
                top: 100%;
                left: 50%;
                transform: translateX(-50%) translateY(-100%);
                opacity: 0;
            }
            10% {
                top: 100%;
                left: 50%;
                transform: translateX(-50%) translateY(-100%) scaleY(80%);
                opacity: 0;
            }
            12%, 32% {
                top: 100%;
                left: 50%;
                transform: translateX(-50%) translateY(-100%) scaleY(80%);
                transform-origin: bottom;
                opacity: 1;
            }
            20% {
                top: 0;
                left: 50%;
                transform: translateX(-50%) scaleY(80%);
                transform-origin: top;
                opacity: 1;
            }
            30% {
                top: 100%;
                left: 50%;
                transform: translateX(-50%) translateY(-100%) scaleY(100%);
                opacity: 1;
            }
            40%, 60%, 80% {
                top: 0;
                left: 100%;
                transform: translateX(-100%) translateY(0) scaleY(1);
                opacity: 1;
            }
            50% {
                top: 100%;
                left: 90%;
                transform: translateX(-100%) translateY(-100%) scaleY(1);
                opacity: 1;
            }
            52% {
                top: 100%;
                left: 90%;
                transform: translateX(-100%) translateY(-100%) scaleY(80%);
                opacity: 1;
            }
            90% {
                top: 100%;
                left: 50%;
                transform: translateX(-50%) translateY(-100%);
                opacity: 1;
            }
        }
        
        @keyframes yellow {
            0%, 10%, 100%, 12%, 20%, 30%, 90.1% {
                top: 100%;
                left: 50%;
                transform: translateX(-50%) translateY(-100%);
                opacity: 0;
            }
            32% {
                top: 100%;
                left: 50%;
                transform: translateX(-50%) translateY(-100%) scaleY(80%);
                transform-origin: bottom;
                opacity: 0;
            }
            40% {
                top: 0;
                transform: translateX(0) translateY(0) scaleY(1);
                left: 0;
                opacity: 1;
            }
            50% {
                top: 100%;
                left: 10%;
                transform: translateX(0) translateY(-100%) scaleY(1);
                opacity: 1;
            }
            50.1% {
                top: 100%;
                left: 90%;
                transform: translateX(-100%) translateY(-100%) scaleY(1);
                opacity: 1;
            }
            60%, 80% {
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%) scaleY(100%);
                transform-origin: bottom;
                opacity: 1;
            }
            90% {
                top: 100%;
                left: 50%;
                transform: translateX(-50%) translateY(-100%);
                opacity: 1;
            }
        }
        
        @keyframes spinner-bdb {
            0%, 60% {
                transform: rotateZ(0);
            }
            100%, 80% {
                transform: rotateZ(720deg);
            }
        }
        
        .spinner-bdb-container {
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #34486d;
            height: 100vh;
            width: 100vw;
            z-index: 9999;
        }
        #loader {
  display: none;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f6faff;
}/* ---- Validación de campos ---- */

.request-info-personal__field--error {
  border-color: #c94740;
  background-color: #ffe7e6;
}

.request-info-personal__field--error:focus {
  border-color: #c94740;
  box-shadow: 0px 0px 0px 2px rgba(201, 71, 64, 0.2);
}



.field-error {
  display: block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.75rem;
  color: #c94740;
  margin-top: 4px;
  line-height: 1.25;
}
/**
 * ESTILOS - SEGUROS ALFA / BANCO DE BOGOTÁ
 */

:root {
  --brand: #180adf;
  --brand-ink: #0f0a7a;
  --accent: #00ccea;
  --bg: #F7F7F7;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #667085;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(2, 8, 20, .06);
  --shadow-soft: 0 0 12px 1px rgba(57, 62, 100, .1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Header */
#cabecera {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(150%) blur(6px);
  border-bottom: 1px solid rgba(0, 0, 0, .04);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  padding: 14px 0;
}

#menu-bar {
  margin: 0 auto;
  width: 90%;
  max-width: 1216px;
  display: table
}

/* Botones */
.btn {
  background: linear-gradient(180deg, var(--brand), var(--brand-ink));
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 30px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(24, 10, 223, .18);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .2s;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(24, 10, 223, .22)
}

.btn:focus-visible {
  outline: 3px solid #aeb6ff;
  outline-offset: 2px
}

/* Tipografía */
.titulo-baner {
  font-weight: 800;
  font-size: clamp(24px, 4.8vw, 40px);
  line-height: 1.1
}

.titulo {
  font-weight: 800;
  font-size: clamp(20px, 4.2vw, 30px);
  text-align: center
}

.contenido {
  font-size: clamp(14px, 3.5vw, 16px);
  line-height: 1.6;
  color: var(--muted)
}

/* Layout principal */
#tbl-baner {
  margin: 0 auto;
  width: 90%;
  max-width: 1216px
}

#tbl-baner td {
  padding: 0 32px
}

.hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--brand-ink);
  text-decoration: none;
  margin-top: 8px
}

.hint img {
  width: 22px
}

/* Sección azul */
#seccion-azul {
  background: linear-gradient(135deg, var(--accent) 0%, #58e4f4 100%);
  padding: clamp(30px, 6vw, 68px) 0;
  color: #04222a
}

#tbl-azul {
  margin: 0 auto;
  width: 90%;
  max-width: 1216px
}

.lado-der>div {
  height: auto;
  max-height: 460px;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow)
}

/* Sección registro */
#seccion-registro {
  padding: clamp(30px, 6vw, 68px) 0
}

.registro {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}

.registro:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow)
}

.titulo-registro {
  padding: 18px 18px 0;
  text-align: left;
  font-weight: 800;
  font-size: 18px
}

.descripcion-registro {
  padding: 12px 18px 22px;
  font-size: 15px;
  color: var(--muted);
  text-align: left
}

/* Ayuda */
#ayuda {
  background: linear-gradient(180deg, #fff 0%, #fff 60%, rgba(2, 8, 20, .02) 100%);
  padding: clamp(28px, 5vw, 48px) 0 clamp(72px, 8vw, 110px);
  text-align: center;
}

/* Contacto */
#seccion-contacto {
  padding: 0
}

#contacto,
#contacto-mob {
  position: relative;
  margin: -58px auto 0;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 20px 40px rgba(2, 8, 20, .06);
  width: 90%;
  padding: clamp(22px, 6vw, 48px) 0;
}

.tipo-contacto {
  font-size: 15px;
  font-weight: 800
}

.info-contacto {
  font-size: 14px;
  color: var(--muted)
}

/* Footer */
footer {
  padding: 28px;
  background: #fff;
  border-top: 1px solid #eceff3;
  font-size: 12px;
  color: #5b6574
}

#tbl-footer,
#tbl-footer2 {
  margin: 0 auto;
  width: 90%;
  max-width: 980px
}

#tbl-footer img,
#tbl-footer2 img {
  display: block;
  margin: 0 auto
}

/* Loader para validación JS */
#js-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e0e0e0;
  border-top: 4px solid var(--brand);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#js-loader p {
  margin-top: 20px;
  color: var(--muted);
  font-size: 14px;
}

/* Contenido principal oculto inicialmente */
#main-content {
  display: none;
}

/* Landing page */
.landing-desktop {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.landing-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.landing-card {
  background: white;
  padding: 60px 40px;
  border-radius: 20px;
  box-shadow: var(--shadow);
  max-width: 600px;
}

.landing-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.landing-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 16px;
}

.landing-text {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 30px;
}

.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.feature-item {
  padding: 20px;
  background: #f8f9fc;
  border-radius: 12px;
}

.feature-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.feature-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.feature-desc {
  font-size: 13px;
  color: var(--muted);
}

.mobile-notice {
  background: linear-gradient(180deg, var(--brand), var(--brand-ink));
  color: white;
  padding: 20px;
  border-radius: 12px;
  margin-top: 30px;
}

.mobile-notice-icon {
  font-size: 24px;
  margin-bottom: 10px;
}

/* Responsive */
@media (max-width:1098px) {
  #carr-servicios2 {
    display: initial
  }

  #carr-servicios {
    display: none
  }
}

@media (max-width:1023px) {
  .quitar1 {
    display: none
  }

  #banner-mob {
    margin: 20px;
    text-align: center;
    display: block
  }

  #tbl-baner {
    text-align: center
  }

  .registro {
    max-width: 380px
  }
}

@media (max-width:768px) {
  #tbl-baner,
  #tbl-baner tr,
  #tbl-baner td,
  #tbl-azul,
  #tbl-azul tr,
  #tbl-azul td,
  #tbl-registro,
  #tbl-registro tr,
  #tbl-registro td,
  #contacto table,
  #contacto tr,
  #contacto td {
    display: block;
    width: 100% !important;
    text-align: center
  }

  #contacto td[width="1%"] {
    display: none !important
  }

  #tbl-baner td {
    padding: 10px 0
  }

  .lado-der>div {
    max-height: none
  }

  #ayuda {
    padding: 24px 0 56px
  }

  #contacto {
    margin: -36px auto 0
  }
}

@media (max-width:716px) {
  .lado-der {
    display: none
  }
}

/* Links */
a {
  color: inherit
}

a:focus-visible {
  outline: 3px solid #a0f0ff;
  outline-offset: 3px;
  border-radius: 8px
}

/* Animaciones */
.fade-in {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease
}

.fade-in.is-visible {
  opacity: 1;
  transform: none
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important
  }

  html {
    scroll-behavior: auto
  }
}

/* Honeypot - invisible para usuarios */
.hp-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
}