/* frontend/css/index.css
   Good4Leads — Liquid-glass carousel update
   Substitua totalmente o arquivo anterior por este.
*/

/* ---------- Variáveis ---------- */
:root{
  --bg-dark-1:#0b1336;
  --bg-dark-2:#143066;
  --accent:#2e86de;
  --accent-2:#1e3f86;
  --muted:#9fb0de;
  --card-bg:#ffffff;
  --card-border:rgba(16,24,40,.06);
  --shadow-lg:0 20px 40px rgba(9,20,60,.16);
  --card-width:560px;

  /* ajuste principal do carrossel */
  --carousel-width: 760px;   /* maior que antes, ajustável */
  --carousel-height: 460px;  /* maior que antes, ajustável */

  /* liquid glass tuning */
  --glass-border: rgba(255,255,255,0.06);
  --glass-inner-shadow: rgba(2,8,26,0.22);
  --glass-highlight: rgba(255,255,255,0.18);
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body.g4l-login-body{
  margin:0; min-height:100vh; font-family:"Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  -webkit-font-smoothing:antialiased; color:#0f1c4a; background:none; position:relative; overflow-x:hidden;
}

/* ---------- Animated background (mantive) ---------- */
.g4l-animated-bg{ position:fixed; inset:0; z-index:-3; pointer-events:none;
  background: linear-gradient(120deg, rgba(11,19,54,1) 0%, rgba(20,48,102,1) 30%, rgba(30,63,134,1) 60%, rgba(11,19,54,1) 100%);
  background-size: 300% 300%; animation: g4lGradientShift 18s ease-in-out infinite; }
.g4l-animated-bg::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(6,12,30,.12), rgba(6,12,30,.36)); mix-blend-mode:multiply; }
@keyframes g4lGradientShift{ 0%{background-position:0% 50%}25%{background-position:50% 40%}50%{background-position:100% 50%}75%{background-position:50% 60%}100%{background-position:0% 50%} }
@media (prefers-reduced-motion: reduce){ .g4l-animated-bg{ animation:none; background-size:100% 100% } }

/* ---------- Layout ---------- */
.g4l-login-wrap{ display:flex; min-height:100vh; align-items:stretch; z-index:0; }

/* LEFT hero */
.g4l-left-hero{ width:52%; min-width:420px; padding:56px 64px; display:flex; align-items:flex-start; overflow:hidden; position:relative; }
.g4l-hero-decor{ position:absolute; right:-12%; bottom:-8%; width:60vmax; height:60vmax; background: radial-gradient(circle at 30% 30%, rgba(46,134,222,.08), transparent 15%), radial-gradient(circle at 70% 70%, rgba(16,24,40,.06), transparent 12%); filter:blur(22px); transform:rotate(6deg); pointer-events:none; z-index:0; }
.g4l-hero-content{ position:relative; z-index:2; max-width:720px; }
.g4l-hero-mark{ font-weight:900; font-size:22px; color: rgba(234,241,255,0.88); margin-bottom:18px; display:inline-block; padding:6px 12px; border-radius:8px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.006)); box-shadow: 0 8px 22px rgba(3,12,36,0.06) inset; filter: drop-shadow(0 8px 20px rgba(2,8,26,0.28)); }
.g4l-hero-title{ margin:0 0 12px 0; font-size:40px; line-height:1.05; font-weight:900; color:#f0f6ff; }
.g4l-hero-title span{ color:#b9d6ff; }
.g4l-hero-sub{ margin:0; color: rgba(234,241,255,0.85); font-size:16px; max-width:640px; }

/* ---------- CARROSSEL (maior, liquid glass reforçado) ---------- */
.g4l-carousel{
  margin-top:28px;
  width:var(--carousel-width);
  max-width:92%;
  height:var(--carousel-height);
  position:relative;
  border-radius:18px;
  padding:12px;
  display:block;
}

/* viewport: mantém apenas a área visível e corta as outras imagens */
.g4l-c-viewport{
  width:100%;
  height:100%;
  border-radius:14px;
  overflow:hidden;           /* ESSENCIAL: esconde slides fora do viewport */
  position:relative;
  background: linear-gradient(180deg, rgba(6,14,34,.10), rgba(6,14,34,.02));
  box-shadow: 0 20px 50px rgba(6,12,30,.20), inset 0 1px 0 rgba(255,255,255,.02);
}

/* track: flex row, movemos via transform */
.g4l-c-track{
  display:flex;
  height:100%;
  width:100%;
  transition: transform .65s cubic-bezier(.22,.95,.28,1);
  will-change: transform;
}

/* slide ocupa 100% do viewport */
.g4l-c-slide{
  flex:0 0 100%;
  height:100%;
  position:relative;
  display:block;
  align-items:center;
  justify-content:center;
  overflow:visible;
  pointer-events:auto;
  padding:10px;
  transition: transform .4s ease, opacity .4s ease;
}

/* inner container com efeito liquid glass mais forte */
.g4l-slide-inner{
  position:relative;
  inset:0;
  width:100%;
  height:100%;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid var(--glass-border);
  box-shadow:
    0 30px 80px rgba(2,8,26,.28),     /* grande sombra externa para profundidade */
    inset 0 1px 0 rgba(255,255,255,.02),
    inset 0 -20px 50px rgba(10,20,40,.06); /* soma de profundidade interna */
  backdrop-filter: blur(10px) saturate(1.05);  /* mais blur para "liquid glass" */
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}

/* glossy highlight: suave brilho no topo */
.g4l-slide-inner::after{
  content:'';
  position:absolute;
  left:0; right:0; top:0;
  height:38%;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0));
  pointer-events:none;
  mix-blend-mode: overlay;
  transform: translateY(-6%);
  transition: transform .6s ease;
  border-top-left-radius:14px;
  border-top-right-radius:14px;
}

/* subtle edge contour */
.g4l-slide-inner::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 10px 30px rgba(2,8,26,.06);
  mix-blend-mode: normal;
}

/* imagem ocupa todo o inner, com leve zoom e transição suave */
.g4l-slide-inner img{
  width:105%;   /* ligeiro overscale para sensação maior */
  height:105%;
  object-fit:cover;
  display:block;
  transform-origin:center center;
  transition: transform .9s cubic-bezier(.2,.9,.2,1), filter .45s ease;
  filter: contrast(1.03) saturate(1.02);
  border-radius:10px;
  margin: -2.5%;
}

/* slide ativo: traz a imagem para foco (remove crop exagerado) */
.g4l-c-slide.is-active .g4l-slide-inner img{
  width:100%;
  height:100%;
  transform: scale(1);
  margin:0;
  filter: contrast(1.04) saturate(1.05);
}

/* quando passar o mouse no slide ativo, faça um leve zoom in na imagem */
.g4l-c-slide.is-active:hover .g4l-slide-inner img{
  transform: scale(1.03);
}

/* nav buttons (bolas arredondadas, blur para levitar) */
.g4l-c-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:0; background:rgba(6,12,30,.28); color:#fff; cursor:pointer;
  box-shadow: 0 18px 40px rgba(2,8,26,.26); backdrop-filter: blur(8px); transition: transform .12s ease, background .12s ease;
  z-index:6;
}
.g4l-c-nav:hover{ transform:translateY(-50%) scale(1.04); background:rgba(6,12,30,.36); }
.g4l-c-prev{ left:18px; }
.g4l-c-next{ right:18px; }

/* dots */
.g4l-c-dots{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:6; }
.g4l-c-dot{ width:12px; height:8px; border-radius:10px; background:rgba(255,255,255,.18); border:0; padding:0; cursor:pointer; transition: all .18s ease; }
.g4l-c-dot.active{ width:34px; height:10px; border-radius:20px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); box-shadow:0 10px 30px rgba(30,63,134,.18); }

/* fallback: se imagem não existir mostra texto central */
.g4l-c-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.65);
  background:linear-gradient(180deg, rgba(8,18,36,.25), rgba(8,18,36,.25));
  font-weight:700; font-size:15px;
}

/* ---------- RIGHT card (mantive) ---------- */
.g4l-right-card{ width:48%; min-width:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 36px; }
.g4l-card{ width:100%; max-width:var(--card-width); background:var(--card-bg); color:#111827; border:1px solid var(--card-border); border-radius:16px; box-shadow:var(--shadow-lg); padding:28px 26px; }
.g4l-card-header{text-align:center;margin-bottom:14px}
.g4l-card-logo{ height:92px; width:auto; margin:0 auto 6px; display:block; object-fit:contain; filter: drop-shadow(0 10px 22px rgba(46,134,222,.08)) contrast(1.03); }
.g4l-card-title{ font-size:18px; font-weight:800; color:#0f1c4a; margin-bottom:8px }

/* form & outros (mantive estilos) */
.g4l-form{ margin-top:8px; width:100% }
.g4l-form-group{ margin-bottom:14px }
.g4l-label{ display:block; margin-bottom:6px; font-weight:700; color:#0f1c4a; font-size:13px }
.g4l-input{ width:100%; padding:12px 12px 12px 36px; border-radius:12px; border:1px solid #dbe3ff; outline:none; font-size:15px; background:#fbfdff; transition:box-shadow .15s ease, border-color .15s ease }
.g4l-input::placeholder{ color: #a9b9de; }
.g4l-input:focus{ border-color:var(--accent); box-shadow:0 6px 18px rgba(46,134,222,.12); transform: translateY(-1px); }
.g4l-btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:12px; padding:12px 16px; font-weight:800; letter-spacing:.3px; cursor:pointer; border:0; width:100%; transition:transform .12s ease, box-shadow .18s ease; }
.g4l-btn-primary{ background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%); color:#fff; box-shadow:0 12px 30px rgba(30,63,134,.18); }
.g4l-form-foot{ margin-top:12px; text-align:center }
.g4l-link-muted{ color:var(--muted); text-decoration:none; font-weight:700 }
.g4l-login-footer{ margin-top:18px; color:rgba(255,255,255,.12); font-size:12px }

/* responsive tuning */
@media (max-width:1200px){ :root{ --carousel-width:600px; --carousel-height:360px } }
@media (max-width:980px){ .g4l-left-hero{ display:none !important } }
@media (max-width:640px){ :root{ --carousel-width:100%; --carousel-height:220px } }

/* accessibility */
@media (prefers-reduced-motion: reduce){ .g4l-c-track, .g4l-c-slide, .g4l-animated-bg{ transition:none; animation:none } }