/* home.css (VERSÃO CORRIGIDA E LIMPA) */
:root {
  --branco: #ffffff;
  --chumbo: #333333;
  --azul: #005b96;
  --laranja: #f7941d;
  --cinza-claro: #f4f4f4;
  --texto: #222222;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
}

/* --- ESTILOS EXCLUSIVOS PARA A PÁGINA DE LOGIN --- */
.login-wrapper { display: flex; min-height: 100vh; }
.login-left { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; background-color: #ffffff; }
.login-form-container { width: 100%; max-width: 400px; }
.login-right { flex: 1.5; background-size: cover; background-position: center; display: none; }
@media (min-width: 768px) { .login-right { display: block; } }

.form-group { position: relative; margin-bottom: 1.5rem; }
.form-group i { position: absolute; top: 50%; transform: translateY(-50%); color: #888; font-size: 1rem; }
.form-group input { width: 100%; padding: 0.75rem 3rem 0.75rem 2.5rem; border: 1px solid #ccc; box-sizing: border-box; border-radius: 2px; }
.form-group input:focus { border-color: var(--laranja); outline: none; }

.login-btn { width: 100%; background-color: var(--laranja); color: var(--branco); padding: 0.75rem; border: none; font-weight: bold; cursor: pointer; border-radius: 2px; transition: 0.3s; }
.login-btn:hover { background-color: #e67e0e; }

.toggle-password { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; }
.form-group i.fa-globe, .form-group i.fa-user, .form-group i.fa-lock { left: 1rem; }
.decorated-input { position: relative; padding-left: 8px; border-left: 4px solid var(--laranja); }


  body {
    /* CORREÇÃO: Fundo com gradiente para dar contraste */
    background: linear-gradient(to bottom, #ffffff, #f0f2f5);
    font-family: 'Inter', sans-serif;
  }
  .font-display {
    font-family: 'Poppins', sans-serif;
  }

  /* Estilo do card de plano */
  .plan-card {
    background-color: white;
    border: 2px solid transparent; /* Borda inicial para transição suave */
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    align-items: center;
  }
  .plan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px -5px rgba(0,0,0,0.1);
  }
  /* Efeito visual QUANDO o plano está SELECIONADO */
  .plan-card.selecionado {
    border-color: var(--roxo);
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 20px 30px -5px rgba(77, 54, 147, 0.15);
  }
  .destaque-visual {
    position: relative;
  }

  .plan-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  
  /* Animação para o formulário aparecer */
  #signup-section, #contact-section {
    transition: max-height 0.3s ease-in-out, opacity 0.5s ease-in-out, margin-top 0.5s ease, padding 0.5s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    border: none;
    
  }
  #signup-section.visible, #contact-section.visible {
    max-height: 1500px;
    opacity: 1;
    margin-top: 2rem;
    padding: 2.5rem 2.5rem 3rem;
    border: 1px solid #e5e7eb;
    overflow: visible;
  }

  /* base */
  .radio-card .card{
    border:1px solid #e5e7eb;                 /* gray-200 */
    background:#fff;
    border-radius:18px;
    transition: border-color .2s, box-shadow .2s, background-color .2s, transform .2s;
  }

  /* hover (desselecionado e selecionado) */
  .radio-card .card:hover{
    border-color:#dbeafe;                      /* indigo-100 */
    background:#f9fafb;                        /* gray-50 */
    box-shadow:0 8px 16px rgba(2,6,23,.06);    /* bem leve */
  }

  /* selecionado – mais discreto */
  .radio-card input[type="radio"]:checked + .card{
    border-color:#c7d2fe;                      /* indigo-200 */
    background:#f8faff;                        /* leve azulado */
    box-shadow:0 10px 20px rgba(99,102,241,.06); /* indigo-500 com opacidade baixa */
    transform:scale(1.005);                    /* quase imperceptível */
  }

  /* “check” sutil no canto */
  .radio-card .check{
    display:none;
    width:20px;height:20px;
    border-radius:9999px;
    background:#eef2ff;                        /* indigo-50 */
    color:#6366f1;                              /* indigo-500 */
    border:1.5px solid #a5b4fc;                /* indigo-300 */
    align-items:center;justify-content:center;
  }
  .radio-card input[type="radio"]:checked + .card .check{ display:inline-flex; }

  /* foco acessível */
  .radio-card input[type="radio"]:focus-visible + .card{
    outline:2px solid rgba(99,102,241,.25);    /* indigo-500/25 */
    outline-offset:3px;
  }

    :root{
    --icon-left: 16px;   /* distância da borda esquerda até o ícone */
    --icon-size: 18px;   /* largura “virtual” do ícone */
    --icon-gap:  10px;   /* espaço entre ícone e texto do input */
    --eye-right: 14px;   /* distância da borda direita até o botão olho */
    --eye-box:   36px;   /* caixa clicável do botão olho */
  }

  .login-form-container .decorated-input{ position: relative; }

  .login-form-container .decorated-input i{
    position: absolute;
    left: var(--icon-left);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size);
    text-align: center;
    color: #7c8a9a;
    pointer-events: none; /* não bloquear clique no input */
  }

  .login-form-container .decorated-input input{
    padding-left: calc(var(--icon-left) + var(--icon-size) + var(--icon-gap));
  }

    /* Botão “mostrar senha” à direita */
  .login-form-container .decorated-input .toggle-password{
    position: absolute;
    right: var(--eye-right);
    top: 50%;
    transform: translateY(-50%);
    width: var(--eye-box);
    height: var(--eye-box);
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer;
    z-index: 3;                 /* acima do input */
  }
  .login-form-container .decorated-input .toggle-password i{
    pointer-events: none;       /* clique pega no botão, não no ícone */
  }

/* Erro Tela de login */  
.alert-error{
  text-align:center;
  font-size:0.95rem;
  line-height:1.35;
  padding:10px 14px;
  margin:14px auto 0;
  max-width:640px;
  border-radius:10px;
  background:#fde8e8;
  color:#8d1b1b;
  border:1px solid #f3b1b1;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.04);
  /* 👇 piscada suave (2 vezes) */
  animation: errorPulse 1.25s ease-in-out 2;
}

/* animação sutil: leve variação de brilho + “halo” suave */
@keyframes errorPulse{
  0%,100%{
    background:#fde8e8;
    border-color:#f3b1b1;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.04), 0 0 0 0 rgba(205,40,40,0);
    opacity:1;
  }
  50%{
    background:#fbdede;                  /* um tiquinho mais forte */
    border-color:#e79b9b;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.04), 0 0 0 8px rgba(205,40,40,.10);
    opacity:.96;                          /* micro fade */
  }
}

/* acessibilidade: respeita redução de movimento */
@media (prefers-reduced-motion: reduce){
  .alert-error{ animation:none; }
}