/* =====================================================
   OZONTECK.EU
   PAINEL DO EMPREENDEDOR
   LOGIN EXPERIENCE PREMIUM

   Desktop • Notebook • Tablet • Mobile • PWA
===================================================== */


/* =====================================================
   DESIGN TOKENS
===================================================== */

:root{

  --oz-bg:#030711;
  --oz-bg-deep:#02050c;

  --oz-surface:#091426;
  --oz-surface-2:#0d192d;

  --oz-border:rgba(148,163,184,.13);
  --oz-border-soft:rgba(148,163,184,.08);

  --oz-cyan:#00e5ff;
  --oz-cyan-strong:#00c8ff;
  --oz-green:#00ffd1;

  --oz-text:#f8fafc;
  --oz-text-soft:#cbd5e1;

  --oz-muted:#8795a9;
  --oz-muted-2:#64748b;

  --oz-danger:#f87171;
  --oz-success:#34d399;

  --oz-shadow:
    0 30px 90px rgba(0,0,0,.48);

}


/* =====================================================
   RESET
===================================================== */

*{
  box-sizing:border-box;
}


html{
  width:100%;
  min-height:100%;

  margin:0;
  padding:0;

  background:var(--oz-bg);
}


body{
  width:100%;

  min-height:100vh;
  min-height:100dvh;

  margin:0;
  padding:0;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:var(--oz-text);

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}


button,
input{
  font:inherit;
}


button{
  -webkit-tap-highlight-color:transparent;
}


/* =====================================================
   PAGE
===================================================== */

body.login-page{

  overflow-x:hidden;

  background:

    radial-gradient(
      circle at 12% 18%,
      rgba(0,229,255,.085),
      transparent 29%
    ),

    radial-gradient(
      circle at 86% 82%,
      rgba(0,255,209,.055),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      #02050c 0%,
      #030813 48%,
      #050b16 100%
    );

}


/* grade tecnológica */

body.login-page::before{

  content:"";

  position:fixed;
  inset:0;

  z-index:0;

  pointer-events:none;

  background-image:

    linear-gradient(
      rgba(255,255,255,.015) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.015) 1px,
      transparent 1px
    );

  background-size:44px 44px;

  opacity:.52;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.72),
      transparent 90%
    );

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.72),
      transparent 90%
    );

}


/* =====================================================
   MASTER LAYOUT
===================================================== */

.login-experience{

  position:relative;
  z-index:1;

  width:100%;

  min-height:100vh;
  min-height:100dvh;

  display:grid;

  grid-template-columns:
    minmax(560px,1.14fr)
    minmax(430px,.86fr);

}


/* =====================================================
   EXPERIENCE PANEL
===================================================== */

.experience-panel{

  position:relative;

  min-width:0;

  min-height:100vh;
  min-height:100dvh;

  display:flex;
  align-items:center;

  padding:
    clamp(42px,5vw,78px)
    clamp(48px,6vw,92px);

  overflow:hidden;

  border-right:
    1px solid rgba(148,163,184,.065);

}


.experience-content{

  position:relative;
  z-index:4;

  width:100%;
  max-width:690px;

}


/* =====================================================
   AMBIENT GLOWS
===================================================== */

.experience-glow{

  position:absolute;

  border-radius:50%;

  pointer-events:none;

}


.experience-glow-one{

  width:660px;
  height:660px;

  top:-350px;
  left:-320px;

  background:
    radial-gradient(
      circle,
      rgba(0,229,255,.15) 0%,
      rgba(0,229,255,.06) 30%,
      transparent 70%
    );

  filter:blur(3px);

}


.experience-glow-two{

  width:540px;
  height:540px;

  right:-320px;
  bottom:-300px;

  background:
    radial-gradient(
      circle,
      rgba(0,255,209,.08),
      transparent 70%
    );

  filter:blur(3px);

}


/* =====================================================
   PREMIUM ARC / MEIA LUA

   Mais marcada conforme layout aprovado.
===================================================== */

.experience-panel::after{

  content:"";

  position:absolute;

  width:900px;
  height:900px;

  top:-700px;
  right:-290px;

  border:
    1.5px solid rgba(0,229,255,.68);

  border-radius:50%;

  box-shadow:

    0 0 8px rgba(0,229,255,.42),

    0 0 22px rgba(0,229,255,.24),

    0 0 58px rgba(0,229,255,.10),

    inset 0 0 14px rgba(0,229,255,.12);

  pointer-events:none;

  opacity:.95;

}


/* segundo halo sutil */

.experience-panel::before{

  content:"";

  position:absolute;

  width:936px;
  height:936px;

  top:-718px;
  right:-308px;

  border:
    1px solid rgba(0,229,255,.075);

  border-radius:50%;

  pointer-events:none;

}


/* =====================================================
   BRAND
===================================================== */

.experience-brand{

  position:relative;
  z-index:5;

  display:flex;
  align-items:center;

  gap:14px;

  margin-bottom:
    clamp(38px,5vh,58px);

}


/* =====================================================
   LOGO OFICIAL

   A moldura absorve visualmente o fundo quadrado
   da imagem e destaca somente o símbolo.
===================================================== */

.brand-logo{

  position:relative;

  width:58px;
  height:58px;

  flex:0 0 58px;

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

  overflow:hidden;

  border:
    1px solid rgba(0,229,255,.30);

  border-radius:16px;

  background:

    radial-gradient(
      circle at center,
      rgba(0,229,255,.11),
      rgba(5,16,29,.96) 72%
    );

  box-shadow:

    0 0 0 1px rgba(255,255,255,.025),

    0 8px 26px rgba(0,0,0,.28),

    0 0 24px rgba(0,229,255,.11),

    inset 0 0 18px rgba(0,229,255,.035);

}


/* brilho da moldura */

.brand-logo::after{

  content:"";

  position:absolute;
  inset:0;

  border-radius:inherit;

  pointer-events:none;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025);

}


/*
 * A imagem original possui área clara nas bordas.
 * O zoom recorta essa área dentro da moldura.
 */

.brand-logo-image{

  width:138%;
  height:138%;

  max-width:none;

  display:block;

  object-fit:cover;

  transform:scale(1.08);

  filter:
    saturate(1.12)
    contrast(1.06);

}


/* =====================================================
   BRAND IDENTIFICATION
===================================================== */

.brand-identification{
  min-width:0;
}


.brand-identification strong{

  display:block;

  color:#ffffff;

  font-size:17px;
  font-weight:900;

  line-height:1.1;

  letter-spacing:-.35px;

}


.brand-identification span{

  display:block;

  margin-top:5px;

  color:#708095;

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

  letter-spacing:1.3px;

  text-transform:uppercase;

}


/* =====================================================
   EXPERIENCE COPY
===================================================== */

.experience-copy{
  position:relative;
}


.experience-eyebrow{

  display:inline-flex;

  margin-bottom:15px;

  color:var(--oz-cyan);

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

  letter-spacing:1.65px;

  text-transform:uppercase;

}


.experience-copy h1{

  max-width:620px;

  margin:0;

  color:#f8fafc;

  font-size:
    clamp(42px,4.2vw,64px);

  font-weight:900;

  line-height:.98;

  letter-spacing:-3.2px;

}


.experience-copy h1 span{
  color:var(--oz-cyan);
}


.experience-copy p{

  max-width:570px;

  margin:22px 0 0;

  color:#94a3b8;

  font-size:
    clamp(13px,1.05vw,16px);

  font-weight:400;

  line-height:1.65;

}


/* =====================================================
   BENEFITS
===================================================== */

.experience-benefits{

  display:grid;

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

  gap:10px;

  max-width:620px;

  margin-top:
    clamp(28px,4vh,40px);

}


.benefit-card{

  min-width:0;
  min-height:68px;

  display:flex;
  align-items:center;

  gap:12px;

  padding:12px 13px;

  border:
    1px solid rgba(148,163,184,.085);

  border-radius:15px;

  background:
    linear-gradient(
      145deg,
      rgba(13,25,45,.64),
      rgba(7,15,28,.55)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018);

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;

}


.benefit-card:hover{

  transform:translateY(-1px);

  border-color:
    rgba(0,229,255,.16);

  background:
    linear-gradient(
      145deg,
      rgba(14,30,51,.75),
      rgba(7,17,31,.64)
    );

}


.benefit-icon{

  width:38px;
  height:38px;

  flex:0 0 38px;

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

  color:var(--oz-cyan);

  border:
    1px solid rgba(0,229,255,.10);

  border-radius:11px;

  background:
    rgba(0,229,255,.055);

}


.benefit-icon svg{
  width:19px;
  height:19px;
}


.benefit-content{
  min-width:0;
}


.benefit-content strong{

  display:block;

  color:#edf4fb;

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

  line-height:1.3;

}


.benefit-content span{

  display:block;

  margin-top:4px;

  color:#738399;

  font-size:8px;
  font-weight:500;

  line-height:1.35;

}


/* =====================================================
   SEXTOU COM PIX
===================================================== */

.pix-experience{

  position:relative;

  width:100%;
  max-width:620px;

  margin-top:16px;

  padding:17px 18px 14px;

  overflow:hidden;

  border:
    1px solid rgba(0,229,255,.34);

  border-radius:17px;

  background:

    radial-gradient(
      circle at 12% 20%,
      rgba(0,255,209,.11),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      rgba(5,25,38,.94),
      rgba(4,14,27,.98)
    );

  box-shadow:

    0 14px 38px rgba(0,0,0,.16),

    0 0 22px rgba(0,229,255,.035),

    inset 0 1px 0 rgba(255,255,255,.025);

}


.pix-experience::before{

  content:"";

  position:absolute;

  width:170px;
  height:170px;

  right:-65px;
  top:-75px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(0,229,255,.12),
      transparent 70%
    );

  pointer-events:none;

}


.pix-top{

  position:relative;
  z-index:2;

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

  gap:14px;

}


.pix-heading{

  min-width:0;

  display:flex;
  align-items:center;

  gap:11px;

}


.pix-icon{

  width:38px;
  height:38px;

  flex:0 0 38px;

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

  border:
    1px solid rgba(0,255,209,.20);

  border-radius:12px;

  background:
    rgba(0,255,209,.075);

  font-size:18px;

}


.pix-title{
  min-width:0;
}


.pix-label{

  display:block;

  color:#00f5d4;

  font-size:8px;
  font-weight:900;

  letter-spacing:1.25px;

}


.pix-title strong{

  display:block;

  margin-top:3px;

  color:#f8fafc;

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

  line-height:1.2;

}


.pix-badge{

  flex:0 0 auto;

  padding:6px 9px;

  border:
    1px solid rgba(0,229,255,.18);

  border-radius:999px;

  background:
    rgba(0,229,255,.06);

  color:#5eeafa;

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

  letter-spacing:.8px;

}


.pix-description{

  max-width:480px;

  margin:12px 0 0;

  color:#8291a5;

  font-size:9px;

  line-height:1.45;

}


.pix-generations{

  display:grid;

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

  margin-top:14px;

  padding-top:13px;

  border-top:
    1px solid rgba(148,163,184,.085);

}


.pix-generation{

  min-width:0;

  padding:0 10px;

  text-align:center;

}


.pix-generation +
.pix-generation{

  border-left:
    1px solid rgba(148,163,184,.09);

}


.pix-generation span{

  display:block;

  color:#63dff0;

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

  letter-spacing:.65px;

  text-transform:uppercase;

}


.pix-generation strong{

  display:block;

  margin-top:4px;

  color:#ffffff;

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

  line-height:1;

}


.pix-message{

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

  gap:7px;

  margin-top:13px;
  padding-top:11px;

  border-top:
    1px solid rgba(148,163,184,.07);

  color:#91a0b3;

  font-size:8px;

  text-align:center;

}


.pix-message strong{
  color:#e7faff;
}


.pix-message-dot{

  width:5px;
  height:5px;

  flex:0 0 5px;

  border-radius:50%;

  background:var(--oz-green);

  box-shadow:
    0 0 10px rgba(0,255,209,.65);

}


/* =====================================================
   ACCESS PANEL
===================================================== */

.access-panel{

  position:relative;

  min-width:0;

  min-height:100vh;
  min-height:100dvh;

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

  padding:
    clamp(34px,5vw,70px);

}


.access-panel::before{

  content:"";

  position:absolute;

  width:470px;
  height:470px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(0,229,255,.07),
      transparent 68%
    );

  pointer-events:none;

}


/* =====================================================
   ACCESS CARD
===================================================== */

.access-card{

  position:relative;
  z-index:2;

  width:100%;
  max-width:440px;

  padding:34px;

  overflow:hidden;

  border:
    1px solid rgba(0,229,255,.18);

  border-radius:25px;

  background:
    linear-gradient(
      145deg,
      rgba(14,26,46,.97),
      rgba(7,16,30,.985)
    );

  box-shadow:

    var(--oz-shadow),

    0 0 32px rgba(0,229,255,.035),

    inset 0 1px 0 rgba(255,255,255,.024);

  backdrop-filter:blur(18px);

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

}


.access-card::before{

  content:"";

  position:absolute;

  top:0;
  left:8%;
  right:8%;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,229,255,.68),
      transparent
    );

}


/* =====================================================
   ACCESS BADGE
===================================================== */

.access-badge{

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

  gap:8px;

  min-height:28px;

  padding:6px 10px;

  margin-bottom:22px;

  border:
    1px solid rgba(0,229,255,.17);

  border-radius:999px;

  background:
    rgba(0,229,255,.06);

  color:#6ee8f5;

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

  letter-spacing:1.05px;

}


.access-dot{

  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--oz-green);

  box-shadow:

    0 0 0 4px rgba(0,255,209,.08),

    0 0 10px rgba(0,255,209,.48);

}


/* =====================================================
   ACCESS HEADER
===================================================== */

.access-header{
  margin-bottom:26px;
}


.access-header h2{

  margin:0;

  color:#f8fafc;

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

  line-height:1.1;

  letter-spacing:-1.1px;

}


.access-header p{

  max-width:350px;

  margin:10px 0 0;

  color:#8593a7;

  font-size:12px;

  line-height:1.55;

}


/* =====================================================
   FORM
===================================================== */

#loginForm{

  display:flex;
  flex-direction:column;

  gap:17px;

}


.login-field{

  display:flex;
  flex-direction:column;

  gap:7px;

}


.login-field label{

  color:#c3cedb;

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

  letter-spacing:.15px;

}


/* =====================================================
   INPUTS
===================================================== */

.login-input{
  position:relative;
}


.login-input-icon{

  position:absolute;

  top:50%;
  left:15px;

  width:18px;
  height:18px;

  display:flex;

  color:#5f6e82;

  transform:
    translateY(-50%);

  pointer-events:none;

  transition:
    color .2s ease;

}


.login-input-icon svg{
  width:18px;
  height:18px;
}


.login-input:focus-within
.login-input-icon{
  color:var(--oz-cyan);
}


.login-input input{

  width:100%;
  height:52px;

  padding:
    0 15px 0 45px;

  border:
    1px solid rgba(148,163,184,.13);

  border-radius:13px;

  outline:none;

  background:
    rgba(3,9,19,.72);

  color:#f8fafc;

  font-size:13px;
  font-weight:500;

  transition:

    border-color .2s ease,

    background .2s ease,

    box-shadow .2s ease;

}


.login-input input::placeholder{
  color:#4d5b70;
}


.login-input input:hover{

  border-color:
    rgba(148,163,184,.22);

}


.login-input input:focus{

  border-color:
    rgba(0,229,255,.50);

  background:
    rgba(4,12,24,.93);

  box-shadow:
    0 0 0 3px rgba(0,229,255,.065);

}


/* autofill */

.login-input input:-webkit-autofill,
.login-input input:-webkit-autofill:hover,
.login-input input:-webkit-autofill:focus{

  -webkit-text-fill-color:#f8fafc;

  -webkit-box-shadow:
    0 0 0 1000px #071322 inset;

  transition:
    background-color 9999s ease-out;

}


/* =====================================================
   LOGIN BUTTON
===================================================== */

#btnLogin{

  width:100%;
  height:52px;

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

  gap:9px;

  margin-top:2px;

  padding:0 18px;

  border:0;

  border-radius:13px;

  background:
    linear-gradient(
      100deg,
      #00f1d0 0%,
      #00d4ff 100%
    );

  color:#011116;

  cursor:pointer;

  font-size:11px;
  font-weight:900;

  letter-spacing:.1px;

  box-shadow:
    0 14px 30px rgba(0,229,255,.12);

  transition:

    transform .18s ease,

    filter .18s ease,

    box-shadow .18s ease;

}


#btnLogin svg{

  width:16px;
  height:16px;

  flex:0 0 16px;

}


#btnLogin:hover:not(:disabled){

  transform:
    translateY(-1px);

  filter:
    brightness(1.04);

  box-shadow:
    0 18px 36px rgba(0,229,255,.17);

}


#btnLogin:active:not(:disabled){
  transform:none;
}


#btnLogin:disabled{

  opacity:.62;

  cursor:wait;

  transform:none;

  box-shadow:none;

}


/* =====================================================
   LOGIN STATUS
===================================================== */

.login-status{

  min-height:15px;

  margin:-5px 0 0;

  color:var(--oz-danger);

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

  line-height:1.4;

  text-align:center;

}


/* =====================================================
   FORGOT PASSWORD
===================================================== */

.access-footer{

  display:flex;
  justify-content:center;

  margin-top:1px;

}


.forgot-btn{

  min-height:36px;

  padding:7px 12px;

  border:0;

  border-radius:9px;

  background:transparent;

  color:#63dfef;

  cursor:pointer;

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

  transition:

    background .18s ease,

    color .18s ease;

}


.forgot-btn:hover{

  color:#a4f5ff;

  background:
    rgba(0,229,255,.045);

}


/* =====================================================
   SECURITY FOOTER
===================================================== */

.access-security{

  display:flex;
  align-items:center;

  gap:9px;

  margin-top:20px;
  padding-top:17px;

  border-top:
    1px solid rgba(148,163,184,.08);

}


.security-icon{

  width:27px;
  height:27px;

  flex:0 0 27px;

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

  border:
    1px solid rgba(0,229,255,.10);

  border-radius:9px;

  background:
    rgba(0,229,255,.04);

  color:#66ddeb;

}


.security-icon svg{
  width:14px;
  height:14px;
}


.access-security > div{
  min-width:0;
}


.access-security strong{

  display:block;

  color:#8291a4;

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

}


.access-security span{

  display:block;

  margin-top:2px;

  color:#4f5e72;

  font-size:7px;

}


/* =====================================================
   TOAST
===================================================== */

#toastGlobal{

  position:fixed !important;

  top:
    calc(
      18px +
      env(safe-area-inset-top,0px)
    ) !important;

  right:18px !important;

  z-index:999999 !important;

  width:auto !important;

  max-width:
    min(
      360px,
      calc(100vw - 32px)
    ) !important;

  padding:
    13px 16px !important;

  border:
    1px solid rgba(0,229,255,.12) !important;

  border-left:
    3px solid var(--oz-green) !important;

  border-radius:
    12px !important;

  background:
    rgba(6,14,27,.97) !important;

  color:#e9f1f8 !important;

  box-shadow:
    0 16px 42px rgba(0,0,0,.42) !important;

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  font-family:
    Inter,
    system-ui,
    sans-serif !important;

  font-size:10px !important;

  font-weight:600 !important;

  line-height:1.45 !important;

  white-space:
    pre-line !important;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width:1120px){

  .login-experience{

    grid-template-columns:
      minmax(440px,1fr)
      minmax(390px,1fr);

  }


  .experience-panel{
    padding:42px;
  }


  .experience-copy h1{
    font-size:46px;
  }


  .experience-copy p{
    font-size:13px;
  }


  .experience-benefits{

    grid-template-columns:1fr;

    max-width:350px;

  }


  .pix-experience{
    max-width:400px;
  }


  .access-panel{
    padding:32px;
  }

}


/* =====================================================
   NOTEBOOK / TELAS BAIXAS

   Consolidado em uma única regra para evitar
   conflito entre 780px e 820px.
===================================================== */

@media
(max-height:820px)
and
(min-width:901px){

  .experience-panel{

    padding-top:28px;
    padding-bottom:28px;

  }


  .experience-brand{
    margin-bottom:24px;
  }


  .experience-copy h1{

    font-size:46px;

    line-height:1;

  }


  .experience-copy p{

    margin-top:14px;

    font-size:11px;

    line-height:1.5;

  }


  .experience-benefits{

    margin-top:20px;

    gap:8px;

  }


  .benefit-card{

    min-height:54px;

    padding:9px 11px;

  }


  .pix-experience{

    margin-top:10px;

    padding:
      12px 14px 10px;

  }


  .pix-title strong{
    font-size:12px;
  }


  .pix-description{
    margin-top:8px;
  }


  .pix-generations{

    margin-top:8px;

    padding-top:8px;

  }


  .pix-generation strong{
    font-size:19px;
  }


  .pix-message{

    margin-top:8px;

    padding-top:7px;

  }


  .access-card{
    padding:28px;
  }


  .access-badge{
    margin-bottom:18px;
  }


  .access-header{
    margin-bottom:20px;
  }


  .access-header h2{
    font-size:25px;
  }


  #loginForm{
    gap:13px;
  }


  .login-input input,
  #btnLogin{
    height:48px;
  }


  .access-security{

    margin-top:14px;

    padding-top:13px;

  }

}


/* =====================================================
   MOBILE / PWA
===================================================== */

@media (max-width:900px){

  body.login-page{
    overflow:auto;
  }


  body.login-page::before{
    background-size:34px 34px;
  }


  .login-experience{

    display:block;

    min-height:100vh;
    min-height:100dvh;

  }


  /* ===================================================
     EXPERIENCE MOBILE
  ==================================================== */

  .experience-panel{

    min-height:auto;

    display:block;

    padding:

      calc(
        26px +
        env(safe-area-inset-top,0px)
      )

      18px

      20px;

    border-right:0;

    border-bottom:
      1px solid rgba(148,163,184,.07);

  }


  /*
   * No mobile a meia-lua grande é retirada para
   * não competir com o conteúdo.
   */

  .experience-panel::before,
  .experience-panel::after,
  .experience-glow-two{
    display:none;
  }


  .experience-glow-one{

    width:380px;
    height:380px;

    top:-230px;
    left:-140px;

  }


  .experience-content{

    max-width:520px;

    margin:0 auto;

  }


  .experience-brand{
    margin-bottom:20px;
  }


  .brand-logo{

    width:46px;
    height:46px;

    flex-basis:46px;

    border-radius:13px;

  }


  .brand-logo-image{

    width:140%;
    height:140%;

  }


  .brand-identification strong{
    font-size:14px;
  }


  .brand-identification span{
    font-size:7px;
  }


  .experience-eyebrow{

    margin-bottom:8px;

    font-size:7px;

  }


  .experience-copy h1{

    font-size:30px;

    line-height:1.02;

    letter-spacing:-1.7px;

  }


  .experience-copy h1 br{
    display:none;
  }


  .experience-copy h1 span{
    margin-left:5px;
  }


  .experience-copy p{

    max-width:450px;

    margin-top:11px;

    font-size:10px;

    line-height:1.5;

  }


  /*
   * Benefícios completos saem no mobile.
   * A motivação principal fica no Sextou com PIX.
   */

  .experience-benefits{
    display:none;
  }


  /* ===================================================
     PIX MOBILE
  ==================================================== */

  .pix-experience{

    max-width:520px;

    margin-top:16px;

    padding:
      13px 14px 11px;

    border-radius:14px;

  }


  .pix-top{
    gap:10px;
  }


  .pix-icon{

    width:32px;
    height:32px;

    flex-basis:32px;

    border-radius:10px;

    font-size:14px;

  }


  .pix-label{
    font-size:7px;
  }


  .pix-title strong{
    font-size:11px;
  }


  .pix-badge{

    padding:5px 7px;

    font-size:6px;

  }


  .pix-description{

    margin-top:9px;

    font-size:8px;

  }


  .pix-generations{

    margin-top:10px;

    padding-top:10px;

  }


  .pix-generation span{
    font-size:6px;
  }


  .pix-generation strong{
    font-size:18px;
  }


  .pix-message{

    margin-top:9px;

    padding-top:8px;

    font-size:7px;

  }


  /* ===================================================
     ACCESS MOBILE
  ==================================================== */

  .access-panel{

    width:100%;

    min-height:auto;

    padding:

      18px

      14px

      calc(
        26px +
        env(safe-area-inset-bottom,0px)
      );

  }


  .access-panel::before{

    width:320px;
    height:320px;

    right:-160px;
    bottom:-100px;

  }


  .access-card{

    max-width:520px;

    padding:25px 22px;

    border-radius:20px;

  }


  .access-badge{

    margin-bottom:18px;

    font-size:7px;

  }


  .access-header{
    margin-bottom:21px;
  }


  .access-header h2{
    font-size:24px;
  }


  .access-header p{
    font-size:10px;
  }


  #loginForm{
    gap:14px;
  }


  .login-field label{
    font-size:9px;
  }


  .login-input input{

    height:50px;

    /*
     * 16px evita zoom automático
     * em alguns navegadores mobile.
     */
    font-size:16px;

  }


  #btnLogin{

    height:50px;

    font-size:10px;

  }


  .forgot-btn{
    font-size:9px;
  }

}


/* =====================================================
   MOBILE PEQUENO
===================================================== */

@media (max-width:520px){

  .experience-panel{

    padding-right:14px;
    padding-left:14px;

  }


  .experience-brand{
    gap:10px;
  }


  .brand-logo{

    width:42px;
    height:42px;

    flex-basis:42px;

  }


  .experience-copy h1{
    font-size:27px;
  }


  .experience-copy p{
    font-size:9px;
  }


  .pix-experience{
    padding:12px;
  }


  .pix-description{
    max-width:100%;
  }


  .access-panel{

    padding:

      14px

      12px

      calc(
        22px +
        env(safe-area-inset-bottom,0px)
      );

  }


  .access-card{

    padding:23px 18px;

    border-radius:18px;

  }


  .access-header h2{
    font-size:22px;
  }


  .login-input input{
    height:49px;
  }


  #btnLogin{
    height:49px;
  }


  #toastGlobal{

    top:
      calc(
        12px +
        env(safe-area-inset-top,0px)
      ) !important;

    right:12px !important;
    left:12px !important;

    max-width:none !important;

  }

}


/* =====================================================
   MICRO MOBILE
===================================================== */

@media (max-width:370px){

  .experience-copy h1{
    font-size:25px;
  }


  .pix-generation{
    padding:0 5px;
  }


  .pix-generation strong{
    font-size:16px;
  }


  .access-card{
    padding:21px 16px;
  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{

    scroll-behavior:auto !important;

    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;

  }

}

/* =====================================================
   PATCH FINAL — POSIÇÃO DO ARCO
   Mantém desenho original e afasta da marca
===================================================== */

@media (min-width: 901px) {

  .experience-panel::after {
    right: -380px !important;
  }

}

/* =====================================================
   PATCH FINAL — LOGO LOGIN
   Mais respiro branco ao redor da marca
===================================================== */

.experience-brand-logo {
  overflow: hidden !important;
  background: #ffffff !important;
}

.experience-brand-logo img {
  width: 86% !important;
  height: 86% !important;

  object-fit: contain !important;
  object-position: center !important;

  display: block !important;
  margin: auto !important;

  transform: none !important;
}


/* =====================================================
   PATCH FINAL — LOGO LOGIN
   Reduz o zoom e mostra o branco ao redor
===================================================== */

.brand-logo {
  overflow: hidden !important;
  background: #ffffff !important;
}

.brand-logo-image {
  width: 92% !important;
  height: 92% !important;

  max-width: 92% !important;

  object-fit: contain !important;
  object-position: center !important;

  transform: none !important;

  display: block !important;
}


/* =====================================================
   MOSTRAR / OCULTAR SENHA
===================================================== */

.login-input {
  position: relative;
}

.login-input input[type="password"],
.login-input input[type="text"] {
  padding-right: 56px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 14px;

  width: 38px;
  height: 38px;

  transform: translateY(-50%);

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

  padding: 0;
  margin: 0;

  border: 0;
  border-radius: 10px;

  background: transparent;
  color: #7f8da3;

  cursor: pointer;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.password-toggle svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.password-toggle:hover {
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.08);
}

.password-toggle:focus-visible {
  outline: 2px solid #00e5ff;
  outline-offset: 2px;
}

.password-toggle:active {
  transform:
    translateY(-50%)
    scale(0.94);
}