/* =========================================================
   1. FONTS & EXTERNAL IMPORTS
   ========================================================= */

@import "https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,900&display=swap";

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v110/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}

@font-face {
  font-family: 'Material Icons Round';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconsround/v109/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons-round {
  font-family: 'Material Icons Round';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   2. GLOBAL VARIABLES & THEMES
   ========================================================= */

:root {
  --wco-font-family: "Figtree", sans-serif;
  --wco-color-primary-text: #fcfcfc;
  --wco-color-primary-50: #fff0e4;
  --wco-color-primary-100: #ffb578;
  --wco-color-primary-300: #ff8826;
  --wco-color-primary-500: #fa780c;
  --wco-color-primary-600: #bf5600;
  --wco-color-primary-700: #8f4000;
  --wco-color-primary-900: #301600;
  --wco-color-secondary-text: #fcfcfc;
  --wco-color-secondary-50: #ecdff0;
  --wco-color-secondary-100: #c69ed3;
  --wco-color-secondary-300: #aa6ebc;
  --wco-color-secondary-500: #a05eb5;
  --wco-color-secondary-600: #844597;
  --wco-color-secondary-700: #633471;
  --wco-color-secondary-900: #42234b;
  --wco-color-neutral-50: #FCFCFC;
  --wco-color-neutral-100: #E9EBEC;
  --wco-color-neutral-300: #C3C8CC;
  --wco-color-neutral-500: #8D9399;
  --wco-color-neutral-600: #6D747A;
  --wco-color-neutral-700: #50555A;
  --wco-color-neutral-900: #080809;
  --wco-color-bg: #EEEBEF;
  --wco-color-panel: #FCFCFC;
  --wco-color-success-50: #DAFFE2;
  --wco-color-success-100: #A1E5B0;
  --wco-color-success-300: #43BF5E;
  --wco-color-success-500: #008C1F;
  --wco-color-success-600: #007019;
  --wco-color-success-700: #005413;
  --wco-color-success-900: #00380C;
  --wco-color-warning-50: #FEF7EB;
  --wco-color-warning-100: #FCE6C4;
  --wco-color-warning-300: #F8BD63;
  --wco-color-warning-500: #F6AC3C;
  --wco-color-warning-600: #B06D08;
  --wco-color-warning-700: #754905;
  --wco-color-warning-900: #3B2403;
  --wco-color-danger-50: #FEE4E4;
  --wco-color-danger-100: #FC9393;
  --wco-color-danger-300: #F94242;
  --wco-color-danger-500: #E00707;
  --wco-color-danger-600: #9D0505;
  --wco-color-danger-700: #700404;
  --wco-color-danger-900: #430202;
  --wco-color-info-50: #E8F1FB;
  --wco-color-info-100: #BBD5F4;
  --wco-color-info-300: #5F9EE6;
  --wco-color-info-500: #2072D1;
  --wco-color-info-600: #175296;
  --wco-color-info-700: #103A6B;
  --wco-color-info-900: #0A2340;
  --wco-font-size-xxxs: 12px;
  --wco-font-size-xxs: 14px;
  --wco-font-size-xs: 16px;
  --wco-font-size-sm: 18px;
  --wco-font-size-md: 20px;
  --wco-font-size-lg: 24px;
  --wco-font-size-xl: 32px;
  --wco-font-size-xxl: 36px;
  --wco-font-size-xxxl: 48px;
  --wco-font-size-huge: 64px;
  --wco-spacing-none: 0px;
  --wco-spacing-quark: 4px;
  --wco-spacing-nano: 8px;
  --wco-spacing-xxxs: 12px;
  --wco-spacing-xxs: 16px;
  --wco-spacing-xs: 24px;
  --wco-spacing-sm: 32px;
  --wco-spacing-md: 40px;
  --wco-spacing-lg: 48px;
  --wco-spacing-xl: 56px;
  --wco-spacing-xxl: 64px;
  --wco-spacing-xxxl: 80px;
  --wco-spacing-huge: 120px;
  --wco-font-lineheight-tight: 100%;
  --wco-font-lineheight-500: 150%;
  --wco-font-lineheight-distant: 170%;
  --wco-font-lineheight-super-distant: 180%;
  --wco-font-lineheight-faraway: 200%;
  --wco-font-weight-300: 300;
  --wco-font-weight-regular: 400;
  --wco-font-weight-500: 500;
  --wco-font-weight-bold: 700;
  --wco-font-weight-black: 900;
  --wco-radius-none: 0px;
  --wco-radius-sm: 4px;
  --wco-radius-md: 8px;
  --wco-radius-lg: 24px;
  --wco-radius-pill: 500px;
  --wco-radius-circular: 50%;
  --wco-borderwidth-none: 0px;
  --wco-borderwidth-hairline: .5px;
  --wco-borderwidth-thin: 1px;
  --wco-borderwidth-thick: 2px;
  --wco-opacity-semi-transparent: 16%;
  --wco-opacity-100: 20%;
  --wco-opacity-500: 32%;
  --wco-shadow-level-0: 0px 0px 0px 0px rgba(0, 0, 0, .2);
  --wco-shadow-level-1: 0px 2px 16px 0px rgba(0, 0, 0, .2);
  --wco-shadow-level-2: 0px 4px 16px 0px rgba(0, 0, 0, .2);
  --wco-shadow-level-3: 0px 16px 32px rgba(0, 0, 0, .2);

  /* Custom Redirection Variables */
  --text: #333333;
  --text-dark: #242424;
  --muted: #666666;
  --bradesco: #a21626;
  --button-hover: #89121f;
  --white: #ffffff;
  --surface: #f7f7f8;
  --border: #e2e2e5;
}

body {
  --wco-color-primary-text: #fff;
  --wco-color-primary-50: #fdedef;
  --wco-color-primary-100: #f0939e;
  --wco-color-primary-300: #e54355;
  --wco-color-primary-500: #ce1c30;
  --wco-color-primary-600: #a21626;
  --wco-color-primary-700: #75101c;
  --wco-color-primary-900: #480a11;
  --wco-color-secondary-text: #fff;
  --wco-color-secondary-50: #eff0f0;
  --wco-color-secondary-100: #bbbcbe;
  --wco-color-secondary-300: #8d8e91;
  --wco-color-secondary-500: #6d6e71;
  --wco-color-secondary-600: #555658;
  --wco-color-secondary-700: #3c3d3e;
  --wco-color-secondary-900: #232324;
}

/* =========================================================
   3. RESET / BASE STYLES
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: 0;
}

html,
body {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html,
html > body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--wco-font-family);
  font-size: 16px;
  min-height: 100vh;
  overflow-x: clip;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--white);
  background-color: var(--wco-color-bg);
}

/* =========================================================
   4. SPECIFIC REDIRECT PAGE OVERRIDES (DESKTOP & GENERAL)
   ========================================================= */

.auth-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Alinha o card flutuante à direita */
  padding: 40px 80px;
  background-color: var(--white);
  overflow: hidden;
}

/* Imagem de fundo Fullscreen */
.auth-page::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("assets/hero-panel-desktop1.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 0;
}

/* Card Branco Flutuante na Direita */
.auth-page .card-auth {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;h2
  background: var(--white);
  border: 0;
  border-radius: 24px;
  box-shadow: var(--wco-shadow-level-3, 0px 16px 32px rgba(0, 0, 0, 0.2));
  opacity: 1;
  transform: none;
  animation: none;
background: white;
}

.auth-page .card-auth > * {
  width: 100%;
  min-width: 0;
}

.auth-page .partners {
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto 32px;
}

.auth-page .partners img {
  display: block;
  width: 100%;
  max-width: 408px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

/* Textos */
.auth-page h2,
.auth-page .title {
  margin: 0 0 24px;
  color: var(--text-dark);
  text-align: left;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.auth-page h3,
.auth-page .headline {
  margin: 0 0 16px;
  color: var(--text-dark);
  text-align: left;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 700;
}

.auth-page p,
.auth-page .description {
  margin: 0 0 16px;
  text-align: center;
  color: var(--text);
  font-size: 25px;
  line-height: 1.4;
  font-weight: 400;
margin-top:20px;
}

.auth-page .instruction {
  margin: 0 0 24px;
  color: var(--bradesco);
  font-size: 14px;
  line-height: 1.30;
  font-weight: 600;
  text-align: center;
  border-radius: 5px;
  background: #FDA7A6;
padding: 5px;
}

/* Botões */
.auth-page .btn-primary,
.auth-page .cta {
  display: inline-flex;
  width: auto;
  min-width: 210px;
  min-height: 48px;
  padding: 13px 24px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 19px;
  background: var(--bradesco);
  color: var(--white);
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.auth-page .btn-primary:hover,
.auth-page .cta:hover {
  background: var(--button-hover);
  box-shadow: 0 4px 12px rgba(162, 22, 38, 0.18);
}

.auth-page .btn-primary:active,
.auth-page .cta:active {
  transform: translateY(1px);
}

.auth-page .btn-primary:focus-visible,
.auth-page .cta:focus-visible {
  outline: 3px solid rgba(162, 22, 38, 0.25);
  outline-offset: 3px;
}

.auth-page .flex.justify-center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-page .auth-page--overlay {
  display: none !important;
}

/* =========================================================
   5. MEDIA QUERIES (TABLETS & PEQUENAS TELAS)
   ========================================================= */

@media (max-width: 1024px) {
  .auth-page {
    padding: 40px;
    justify-content: center; /* Centraliza o box flutuante em telas médias */
  }
}

@media (max-width: 675px) {
  .auth-page {
    padding: 24px 16px;
    align-items: center;
    justify-content: center;
  }

  .auth-page .card-auth {
    max-width: 100%;
    padding: 32px 24px;
    border-radius: 20px;
    background: white;
  }

  .auth-page .partners {
    max-width: 240px;
    margin-bottom: 24px;
  }

  .auth-page h2,
  .auth-page .title {
    font-size: 24px;
  }

  .auth-page .btn-primary,
  .auth-page .cta {
    width: 100%;
  }
}

/* =========================================================
   6. ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .auth-page .btn-primary,
  .auth-page .cta {
    transition: none;
  }
}