/* ============================================================
   IDIOLIBRE — css/style.css
   Identidade visual: carimbo de passaporte vintage.
   Papel envelhecido, azul-marinho, verde-floresta e dourado.

   Este arquivo cobre o "chrome" do site, compartilhado por TODAS
   as páginas: variáveis de cor, reset, tela de boas-vindas (home),
   topo de página (.page-topbar), troca de nível (.level-switch) e
   o modal de login. O conteúdo específico das aulas (cartões de
   vocabulário, cena, exercícios, etc.) fica em css/lessons.css.
   ============================================================ */

/* Paleta extraída da própria logo (carimbo de passaporte): o azul-marinho
   do anel/texto, o verde do globo e o dourado do selo — as três cores
   foram medidas pixel a pixel em images/logo.jpg. --rust mantém o nome
   antigo por compatibilidade (é usado em dezenas de seletores neste
   arquivo e em lessons.css), mas seu valor agora É o verde da logo, não
   um tom terracota. --gold é uma versão um pouco mais clara/saturada do
   dourado real da logo (#C0A136), só pra manter contraste de leitura
   adequado quando usado como texto sobre o azul-marinho escuro. */
:root{
    --paper:#F4E8CC;
    --paper-2:#FFFFFF;
    --ink:#241F1A;
    --ink-soft:#5C5850;
    --blue:#2B6693;
    --blue-deep:#28426B;
    --blue-light:#DCE7F2;
    --rust:#1B391F;
    --rust-light:#E0EBE2;
    --gold:#E0B74A;
    --line:#D9CBA0;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    line-height:1.55;
  }
  h1,h2,h3,.brand{font-family:'Fraunces',serif;}
  button{font-family:inherit;}
  a{color:inherit;}
  /* ===== WELCOME SCREEN ===== */
  .site-header{
    position:absolute;
    top:0; left:0; right:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:22px 20px;
  }
  .login-btn{
    position:absolute;
    top:16px; right:18px;
    background:var(--paper-2);
    border:1px solid var(--line);
    color:var(--blue-deep);
    font-weight:600;
    font-size:0.82rem;
    padding:8px 16px;
    border-radius:20px;
    cursor:pointer;
    transition:background 0.15s ease;
  }
  .login-btn:hover{background:var(--blue-light);}
  .logout-link{
    font-size:0.78rem;
    color:var(--ink-soft);
    text-decoration:none;
    border:1px solid var(--line);
    padding:6px 12px;
    border-radius:16px;
  }
  .logout-link:hover{background:var(--blue-light);}
  .locked-banner{
    max-width:420px;
    margin:0 auto 20px;
    background:var(--rust-light);
    color:#1F3B27;
    border:1px solid var(--rust);
    border-radius:8px;
    padding:12px 16px;
    font-size:0.85rem;
    text-align:center;
  }
  /* ---- modal de login ---- */
  .modal-overlay{
    display:none;
    position:fixed; inset:0;
    background:rgba(23,53,83,0.45);
    align-items:center; justify-content:center;
    z-index:100;
    padding:20px;
  }
  .modal-box{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:12px;
    max-width:380px;
    width:100%;
    padding:28px 26px;
    position:relative;
    box-shadow:0 20px 50px rgba(0,0,0,0.25);
  }
  .modal-box h3{font-family:'Fraunces',serif;margin:0 0 8px;color:var(--blue-deep);}
  .modal-box p{color:var(--ink-soft);font-size:0.9rem;margin:0 0 16px;}
  .modal-close{
    position:absolute; top:12px; right:14px;
    background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--ink-soft);
  }
  #login-email{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:6px;
    font-size:0.95rem;
    font-family:'Inter',sans-serif;
    margin-bottom:14px;
    background:var(--paper-2);
  }
  .modal-box .cta-btn{width:100%;text-align:center;padding:13px;font-size:0.9rem;border:none;}
  .modal-msg{margin-top:12px;font-size:0.85rem;min-height:1.2em;}
  .modal-msg.ok{color:var(--rust);font-weight:600;}
  .modal-msg.pending{color:var(--blue);font-weight:600;}
  .modal-msg.error{color:#B23A2E;font-weight:600;}

  .modal-divider{
    display:flex; align-items:center; gap:10px;
    margin:16px 0 14px;
    color:var(--ink-soft); font-size:0.72rem;
    text-transform:uppercase; letter-spacing:0.08em;
  }
  .modal-divider::before,.modal-divider::after{content:'';flex:1;height:1px;background:var(--line);}
  .whatsapp-btn{
    display:block; width:100%; text-align:center;
    background:var(--rust); color:#fff;
    padding:13px; border-radius:30px;
    font-weight:600; font-size:0.9rem;
    text-decoration:none; box-sizing:border-box;
    box-shadow:0 6px 18px rgba(44,74,50,0.25);
    transition:transform 0.15s ease;
  }
  .whatsapp-btn:hover{transform:translateY(-2px);}
  .whatsapp-note{margin-top:10px; font-size:0.78rem; color:var(--ink-soft); text-align:center;}
  .site-header .logo-mark{
    width:30px;height:30px;
    border-radius:8px;
    background:var(--blue-deep);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:1rem;

  }
  .site-header .logo-name{
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:1.15rem;
    color:var(--ink);
    letter-spacing:-0.01em;
  }
  .brand-stamp{
    position:absolute;
    top:14px; right:18px;
    width:64px; height:64px;
    border-radius:50%;
    box-shadow:0 4px 14px rgba(23,53,83,0.25);
    object-fit:cover;
  }
  .page-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 24px;
    background:var(--paper-2);
    border-bottom:1px solid var(--line);
  }
  .page-topbar .brand-link{
    display:flex;align-items:center;gap:10px;
    text-decoration:none;color:var(--blue-deep);
    font-family:'Fraunces',serif;font-weight:700;font-size:1.1rem;
  }
  .page-topbar .brand-link img{width:34px;height:34px;border-radius:50%;box-shadow:0 3px 8px rgba(23,53,83,0.2);}
  .page-topbar .back-link{
    font-size:0.82rem;color:var(--blue-deep);text-decoration:none;font-weight:600;
    border:1px solid var(--line);padding:7px 16px;border-radius:20px;
    transition:background 0.15s ease;
  }
  .page-topbar .back-link:hover{background:var(--blue-light);}
  .welcome-wrap{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 24px;
    background:
      radial-gradient(circle at 15% 20%, rgba(43,102,147,0.14), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(44,74,50,0.12), transparent 45%),
      var(--paper);
  }
  .welcome-card{
    max-width:560px;
    text-align:center;
    width:100%;
  }
  .route-svg{width:100%;max-width:420px;margin:0 auto 12px;display:block;}
  .kicker{
    letter-spacing:0.12em;
    text-transform:uppercase;
    font-size:0.72rem;
    font-weight:600;
    color:var(--blue);
    margin-bottom:14px;
  }
  .welcome-title{
    font-size:2.5rem;
    line-height:1.15;
    font-weight:700;
    margin:0 0 18px;
    color:var(--ink);
  }
  .welcome-title em{
    font-style:italic;
    color:var(--rust);
  }
  .welcome-sub{
    color:var(--ink-soft);
    font-size:1.05rem;
    max-width:44ch;
    margin:0 auto 34px;
  }
  @media (max-width:480px){
    .welcome-wrap{padding:28px 18px;}
    .welcome-title{font-size:1.7rem;}
    .welcome-sub{font-size:0.95rem;}
    .kicker{font-size:0.68rem;}
  }
  .cta-btn{
    display:inline-block;
    background:var(--blue-deep);
    color:#fff;
    border:none;
    padding:15px 34px;
    border-radius:30px;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
    box-shadow:0 6px 18px rgba(41,74,59,0.25);
    transition:transform 0.15s ease;
  }
  .cta-btn:hover{transform:translateY(-2px);}
  .stops{
    display:flex;
    justify-content:center;
    gap:22px;
    margin-top:34px;
    flex-wrap:wrap;
  }
  .stop{
    font-size:0.8rem;
    color:var(--ink-soft);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    cursor:pointer;
    text-decoration:none;
  }
  .stop:hover .stop-badge{border-color:var(--blue);transform:translateY(-2px);}
  .stop-badge{
    width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--paper-2);border:1px solid var(--line);
    font-size:1.1rem;
    transition:transform 0.15s ease, border-color 0.15s ease;
  }
  /* ===== NÍVEIS (A1 / A2) ===== */
  .header-actions{
    position:absolute; top:16px; right:18px;
    display:flex; align-items:center; gap:8px;
  }
  .header-actions .login-btn{position:static;top:auto;right:auto;}
  .level-link{
    font-size:0.78rem; color:var(--blue-deep); text-decoration:none;
    border:1px solid var(--line); padding:8px 16px; border-radius:20px;
    background:var(--paper-2); font-weight:600; white-space:nowrap;
    transition:background 0.15s ease;
  }
  .level-link:hover{background:var(--blue-light);}

  .level-switch{
    display:flex; gap:4px; background:var(--paper); border:1px solid var(--line);
    border-radius:20px; padding:3px;
  }
  .level-pill{
    font-size:0.78rem; font-weight:700; color:var(--ink-soft); text-decoration:none;
    padding:6px 14px; border-radius:16px; transition:background 0.15s ease,color 0.15s ease;
  }
  .level-pill.active{background:var(--blue-deep); color:#fff;}
  .level-pill:not(.active):hover{background:var(--blue-light);}
  @media (max-width:760px){
    .page-topbar{flex-wrap:wrap; gap:10px;}
  }