*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:#03111d;color:white}
body{overflow:hidden}
.page{position:relative;width:100vw;height:100vh;min-height:680px;isolation:isolate;overflow:hidden}
.photo,.overlay,.vignette{position:absolute;inset:0}
.photo{z-index:-4;background:url("../images/guaraquecaba.jpg") center 54%/cover no-repeat}
.overlay{z-index:-3;background:
linear-gradient(90deg,rgba(0,14,27,.90) 0%,rgba(3,24,39,.75) 28%,rgba(2,25,41,.59) 53%,rgba(1,20,35,.70) 76%,rgba(0,11,22,.88) 100%),
linear-gradient(180deg,rgba(0,11,20,.44),rgba(0,16,28,.22) 48%,rgba(0,9,18,.68))}
.vignette{z-index:-2;background:radial-gradient(circle at 50% 48%,transparent 10%,transparent 35%,rgba(0,7,14,.16) 67%,rgba(0,5,12,.45) 100%)}

.city-brand{position:absolute;left:4.25vw;top:6.2vh;display:flex;align-items:flex-start;gap:18px}
.city-brand img{width:126px;height:126px;object-fit:contain;filter:none;flex:none}
.city-copy{padding-top:11px}
.city-brand span{display:block;font-size:14px;font-weight:500;letter-spacing:3.6px;color:#cbd8e0}
.city-brand h1{font-size:28px;line-height:1;margin:7px 0 9px;font-weight:800;letter-spacing:1px}
.city-brand i{display:block;width:73px;height:3px;background:#18aee0;margin:0 0 11px}
.city-brand b{font-size:13px;letter-spacing:2.5px;color:#9fb4c1;font-weight:500}

.motto{position:absolute;right:6.1vw;top:7.1vh;text-align:left;font-size:12px;line-height:1.55;letter-spacing:2.4px;font-weight:500;color:#c8d4dc}
.motto span{display:block}
.motto i{display:block;width:55px;height:3px;background:#16aadd;margin-top:10px}

.message{position:absolute;left:4.35vw;top:25.7vh}
.message .bar{display:block;width:76px;height:4px;border-radius:2px;background:#17ace0;margin-bottom:26px}
.message h2{margin:0;font-size:41px;line-height:1.14;font-weight:300;letter-spacing:-.8px;text-shadow:0 2px 14px rgba(0,0,0,.36)}
.message h2 strong{font-weight:800;color:#13aee3}
.message p{font-size:16px;line-height:1.55;color:#b7c8d3;margin:24px 0 31px}
.message .bar.short{width:58px;height:3px;margin-bottom:24px}
.message em{font-family:Georgia,serif;font-size:16px;line-height:1.65;color:#d8e2e7}

.card{position:absolute;left:50%;top:48.7%;transform:translate(-50%,-50%);width:410px;padding:30px 30px 31px;border-radius:16px;border:1px solid rgba(45,156,207,.45);background:linear-gradient(145deg,rgba(5,27,44,.92),rgba(2,18,32,.93));box-shadow:0 28px 90px rgba(0,0,0,.50),inset 0 1px rgba(255,255,255,.035);backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:15px;justify-content:center;margin-bottom:22px}
.cart{width:52px;height:46px;display:block;overflow:visible;flex:none}
.brandcopy{min-width:0}
.brandtop{display:flex;align-items:baseline;gap:18px}
.brandtop strong{font-size:25px;line-height:1;font-weight:800;letter-spacing:.2px}
.brandtop span{font-size:8px;color:#718996;white-space:nowrap}
.brandtop span b{color:#c6dbe5;font-weight:700}
.brandcopy small{display:block;font-size:10px;color:#0d9fd3;letter-spacing:.25px;margin-top:4px}
.cardtitle{text-align:center;font-size:13px;color:#d7e1e6;margin:0 0 22px}
.login-messages{margin:-6px 0 12px}
.login-message{padding:9px 11px;border-radius:7px;font-size:11px;text-align:center}
.login-message-error{color:#ffd8dc;background:rgba(190,38,58,.22);border:1px solid rgba(255,104,122,.38)}
.enter:disabled{cursor:wait;opacity:.82}

.field{height:45px;border:1px solid rgba(30,136,184,.55);border-radius:8px;background:rgba(3,19,32,.59);display:flex;align-items:center;padding:0 14px;margin:14px 0}
.field:focus-within{border-color:#18b6e6;box-shadow:0 0 0 2px rgba(24,182,230,.08)}
.field>svg,.field button svg{width:20px;height:20px;stroke:#13b1e3;fill:none;stroke-width:1.8}
.field input{flex:1;border:0;outline:0;background:transparent;color:#eaf5f8;font-size:14px;padding:0 13px}
.field input::placeholder{color:#8aa0ad}
.field button{border:0;background:transparent;cursor:pointer;padding:5px}
.enter{width:100%;height:44px;border:0;border-radius:8px;background:linear-gradient(90deg,#058be8,#138df7);color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.enter span{float:right;margin-right:4px;font-size:18px;font-weight:400}
.meta{display:flex;align-items:center;justify-content:space-between;margin:17px 0 18px;font-size:11px;color:#b9c6ce}
.meta label{display:flex;gap:7px;align-items:center}
.meta input{width:16px;height:16px;accent-color:#14aede}
.meta a{color:#13afe3;text-decoration:underline;text-underline-offset:2px}
.or{display:flex;align-items:center;gap:14px;color:#8297a3;font-size:11px}
.or i{height:1px;background:rgba(122,154,171,.26);flex:1}
.restricted{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:22px}
.restricted svg{width:27px;height:27px;stroke:#11b3e7;fill:none;stroke-width:1.8}
.restricted p{margin:0;color:#97a9b4;font-size:11px;line-height:1.45}

.benefits{position:absolute;left:4.25vw;bottom:9.8vh;display:flex;gap:45px}
.benefits article{display:flex;align-items:center;gap:15px;min-width:185px}
.iconbox{width:57px;height:57px;border:1px solid rgba(25,137,186,.36);border-radius:13px;display:grid;place-items:center;background:rgba(3,24,39,.22)}
.iconbox svg{width:28px;height:28px;stroke:#12afe1;fill:none;stroke-width:1.7}
.benefits b,.benefits span{display:block}
.benefits b{font-size:12px}
.benefits span{font-size:11px;color:#8fa3af;margin-top:4px}

.signature{position:absolute;right:5.6vw;bottom:7.1vh;text-align:right}
.signature strong{display:block;font-family:"Segoe Script","Brush Script MT",cursive;font-size:35px;font-weight:400;color:#f2f7f9;transform:rotate(-6deg);text-shadow:0 2px 8px rgba(0,0,0,.48)}
.signature span{display:block;margin-top:8px;font-size:9px;letter-spacing:3px;color:#aab9c2}

footer{position:absolute;left:0;right:0;bottom:0;height:64px;border-top:1px solid rgba(115,152,172,.17);display:flex;align-items:center;justify-content:space-between;padding:0 4.1vw;color:#9aabb5;font-size:11px;background:rgba(0,12,21,.33)}
footer b{font-weight:400;color:#18aee0;margin:0 6px}

@media(max-width:1400px) and (max-height:850px){
  .city-brand{left:4.4vw;top:5.4vh;gap:14px}
  .city-brand img{width:92px;height:92px}
  .city-copy{padding-top:7px}
  .city-brand span{font-size:10px;letter-spacing:3px}
  .city-brand h1{font-size:24px;margin:5px 0 7px}
  .city-brand b{font-size:10px}
  .message{left:4.8vw;top:31vh}
  .message .bar{width:58px;margin-bottom:18px}
  .message h2{font-size:32px}
  .message p{font-size:13px;margin:18px 0 20px}
  .message em{font-size:13px}
  .card{top:47%;width:374px;padding:24px 28px 25px;border-radius:12px}
  .brand{margin-bottom:17px}
  .brandtop strong{font-size:23px}
  .brandcopy small{font-size:8px}
  .brandtop span{font-size:7px}
  .cardtitle{font-size:11px;margin-bottom:16px}
  .field{height:40px;margin:10px 0}
  .field input{font-size:11px}
  .enter{height:40px;font-size:12px}
  .meta{margin:11px 0 12px;font-size:8px}
  .restricted{margin-top:13px}
  .restricted p{font-size:8px}
  .restricted svg{width:21px;height:21px}
  .benefits{left:4.4vw;bottom:10.5vh;gap:28px}
  .benefits article{min-width:160px;gap:11px}
  .iconbox{width:46px;height:46px}
  .benefits b{font-size:10px}
  .benefits span{font-size:9px}
  .signature{bottom:10vh}
  footer{height:46px;font-size:8px}
}
@media(max-width:850px){
  body{overflow:auto}
  .page{min-height:900px}
  .motto,.message,.signature{display:none}
  .city-brand{left:5vw;top:4vh}
  .city-brand img{width:76px;height:76px}
  .city-copy{padding-top:6px}
  .city-brand span{font-size:10px;letter-spacing:2.5px}
  .city-brand h1{font-size:22px}
  .city-brand b{font-size:10px}
  .card{top:47%;width:min(90vw,440px)}
  .benefits{left:50%;transform:translateX(-50%);bottom:9%;width:92%;justify-content:center;gap:16px}
  .benefits article{min-width:0}
  .benefits span{display:none}
  footer{font-size:8px}
}

@media(max-width:1366px) and (max-height:768px){
  .card{left:54%}
  .benefits{max-width:43vw;flex-wrap:nowrap}
  .benefits article{min-width:135px}
}

.cart-modern{filter:drop-shadow(0 0 8px rgba(24,174,255,.28))}
.cart-modern path,.cart-modern circle{vector-effect:non-scaling-stroke}

/* Branding COMPRAS v8 — conjunto único para futura animação */
.brand-premium{
  justify-content:center;
  gap:14px;
  margin-bottom:22px;
}
.brand-premium .cart{
  width:54px;
  height:49px;
}
.brand-divider{
  width:1px;
  height:45px;
  flex:none;
  background:linear-gradient(180deg,transparent 0%,#72d9ff 18%,#2eaef1 82%,transparent 100%);
  box-shadow:0 0 8px rgba(51,180,244,.35);
}
.brand-premium .brandcopy{
  position:relative;
  padding-right:0;
}
.brand-premium .brandtop{
  display:block;
}
.brand-premium .brandtop strong{
  display:block;
  font-size:27px;
  line-height:.95;
  letter-spacing:.5px;
  font-weight:800;
  background:linear-gradient(180deg,#fff 0%,#e7f2ff 52%,#a9c7ec 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 1px 8px rgba(85,176,255,.10);
}
.brand-premium .brandcopy small{
  display:block;
  margin-top:7px;
  color:#a9c7e7;
  font-size:7.3px;
  letter-spacing:2px;
  white-space:nowrap;
}
.brand-premium .lippe-credit{
  display:block;
  margin-top:6px;
  color:#758d9c;
  font-size:7px;
  letter-spacing:.1px;
  white-space:nowrap;
}
.brand-premium .lippe-credit b{
  color:#d7e8f2;
  font-weight:700;
}
@media(max-width:1400px) and (max-height:850px){
  .brand-premium{gap:11px;margin-bottom:16px}
  .brand-premium .cart{width:49px;height:45px}
  .brand-divider{height:40px}
  .brand-premium .brandtop strong{font-size:24px}
  .brand-premium .brandcopy small{font-size:6.4px;letter-spacing:1.55px;margin-top:5px}
  .brand-premium .lippe-credit{font-size:6.2px;margin-top:4px}
}

/* v9 — melhora de legibilidade/qualidade em notebook */
.brand-premium,
.brand-premium *{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

.brand-premium .lippe-credit{
  font-size:8.2px;
  margin-top:7px;
  letter-spacing:.15px;
  color:#91a9b8;
}

.brand-premium .lippe-credit b{
  font-size:8.6px;
  color:#e5f2f8;
  font-weight:700;
}

/* Em telas menores, evita o aspecto "borrado" do texto com gradient clipping */
@media(max-width:1400px) and (max-height:850px){
  .brand-premium .brandtop strong{
    font-size:25px;
    background:none;
    -webkit-background-clip:initial;
    background-clip:initial;
    color:#f2f7fb;
    text-shadow:none;
  }

  .brand-premium .brandcopy small{
    font-size:7.2px;
    letter-spacing:1.35px;
    color:#88b8d5;
  }

  .brand-premium .lippe-credit{
    font-size:7.5px;
    margin-top:5px;
    color:#9bb0bd;
  }

  .brand-premium .lippe-credit b{
    font-size:7.8px;
    color:#eef7fb;
  }

  .brand-premium .cart{
    width:51px;
    height:47px;
    shape-rendering:geometricPrecision;
  }

  .brand-divider{
    width:1px;
    opacity:.9;
    box-shadow:none;
  }
}

/* Ajuste adicional típico de notebook 1366x768 */
@media(max-width:1366px) and (max-height:768px){
  .brand-premium{
    gap:12px;
  }

  .brand-premium .brandtop strong{
    font-size:26px;
  }

  .brand-premium .brandcopy small{
    font-size:7.4px;
    letter-spacing:1.25px;
  }

  .brand-premium .lippe-credit{
    font-size:7.7px;
  }

  .brand-premium .lippe-credit b{
    font-size:8px;
  }
}

/* v10 — alinha benefícios e assinatura Guaraqueçaba - PR */
.benefits,
.signature{
  bottom:9.8vh;
}

.signature{
  transform:translateY(0);
}

@media(max-width:1400px) and (max-height:850px){
  .benefits,
  .signature{
    bottom:10.5vh;
  }
}

@media(max-width:1366px) and (max-height:768px){
  .benefits,
  .signature{
    bottom:10.5vh;
  }
}


/* v11 — transição do Login para a Home */
.transition-curtain{
  position:fixed;
  inset:0;
  z-index:9000;
  background:
    radial-gradient(circle at 50% 50%, rgba(3,28,46,.96) 0%, rgba(1,13,24,.985) 52%, #020a12 100%);
  opacity:0;
  pointer-events:none;
  transition:opacity 420ms ease;
}

/* Esconde a interface inteira rapidamente, evitando o carrinho girar sobre a tela antiga */
.page.login-exiting .city-brand,
.page.login-exiting .motto,
.page.login-exiting .message,
.page.login-exiting .card,
.page.login-exiting .benefits,
.page.login-exiting .signature,
.page.login-exiting footer{
  opacity:0;
  filter:blur(2px);
  transform:scale(.992);
  transition:
    opacity 310ms ease,
    filter 360ms ease,
    transform 360ms cubic-bezier(.2,.8,.2,1);
}

.page.login-exiting .photo,
.page.login-exiting .overlay,
.page.login-exiting .vignette{
  opacity:0;
  transition:opacity 420ms ease;
}

.page.login-exiting .transition-curtain{
  opacity:1;
}

.page.login-hidden .city-brand,
.page.login-hidden .motto,
.page.login-hidden .message,
.page.login-hidden .card,
.page.login-hidden .benefits,
.page.login-hidden .signature,
.page.login-hidden footer,
.page.login-hidden .photo,
.page.login-hidden .overlay,
.page.login-hidden .vignette{
  visibility:hidden;
}

/* Aceno de partida: um clone fixed do carrinho pulsa no lugar exato do
   original, por cima do curtain (que teria z-index maior que o .card e
   apagaria o carrinho original junto com o resto da tela) — assim ele
   continua visível durante todo o escurecimento, e só some no corte real
   da navegação. A viagem de verdade acontece só na Home, que conhece a
   posição real de chegada (ver home.js). */
.login-transition-cart{
  position:fixed;
  z-index:9500;
  pointer-events:none;
}

.login-cart-liftoff{
  animation:cartLiftoff 200ms cubic-bezier(.3,.7,.4,1) both;
}

@keyframes cartLiftoff{
  0%{transform:scale(1);filter:drop-shadow(0 0 8px rgba(24,174,255,.28))}
  55%{transform:scale(1.14);filter:drop-shadow(0 0 18px rgba(87,201,255,.65))}
  100%{transform:scale(1.05);filter:drop-shadow(0 0 14px rgba(87,201,255,.5))}
}

@media(prefers-reduced-motion:reduce){
  .login-cart-liftoff{animation:none}
}

/* Prevent accidental input during transition */
.page.login-exiting{
  pointer-events:none;
}

@media(prefers-reduced-motion:reduce){
  .page.login-exiting .city-brand,
  .page.login-exiting .motto,
  .page.login-exiting .message,
  .page.login-exiting .card,
  .page.login-exiting .benefits,
  .page.login-exiting .signature,
  .page.login-exiting footer,
  .page.login-exiting .photo,
  .page.login-exiting .overlay,
  .page.login-exiting .vignette{
    transition:none!important;
  }
  .page.login-exiting .transition-curtain{
    opacity:1;
    transition:none!important;
  }
}


/* v17 — máxima fluidez da transição
   Evita blur/filter e animações em dezenas de elementos ao mesmo tempo. */
.page.login-exiting .city-brand,
.page.login-exiting .motto,
.page.login-exiting .message,
.page.login-exiting .card,
.page.login-exiting .benefits,
.page.login-exiting .signature,
.page.login-exiting footer{
  opacity:0 !important;
  filter:none !important;
  transform:none !important;
  transition:opacity 220ms linear !important;
}

.page.login-exiting .photo,
.page.login-exiting .overlay,
.page.login-exiting .vignette{
  opacity:0 !important;
  filter:none !important;
  transform:none !important;
  transition:opacity 260ms linear !important;
}

.page.login-exiting .transition-curtain{
  opacity:1 !important;
  transition:opacity 220ms linear !important;
}