/* app/static/css/home.css */

.pe-logo-hero{
  width: min(520px, 92%);
  height: auto;
  display:block;
}

/* ===========================
   Logo: manter destaque, SEM verde
   - borda navy/silver neutra
   - sombra premium
=========================== */
.pe-logo-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  border-radius: 22px;

  border: 2px solid rgba(11,31,58,.22);
  background: rgba(255,255,255,.55);

  box-shadow:
    0 18px 50px rgba(0,0,0,.16),
    0 1px 0 rgba(255,255,255,.55) inset;

  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* brilho neutro (sem teal) */
.pe-logo-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 240px at 30% 10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(700px 240px at 80% 30%, rgba(11,31,58,.10), transparent 65%);
  opacity: .55;
  pointer-events:none;
}

/* hover sutil */
.pe-logo-wrap:hover{
  transform: translateY(-1px);
  box-shadow:
    0 22px 60px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.58) inset;
}

/* ===========================
   Botão "Entrar" teal (Home)
=========================== */
.pe-btn-enter{
  background: rgba(31,183,173,.12);
  border: 1px solid rgba(31,183,173,.55);
  color: var(--pe-teal-2);
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 700;

  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.pe-btn-enter:hover{
  background: rgba(31,183,173,.18);
  border-color: rgba(31,183,173,.78);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(31,183,173,.12);
}
.pe-btn-enter:focus,
.pe-btn-enter:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(31,183,173,.18);
}

/* ===========================
   Tipografia
=========================== */
.pe-title{
  font-weight: 800;
  letter-spacing: -.02em;
  color: #0b1f3a;
  line-height: 1.12;
  font-size: clamp(1.5rem, 2.2vw + 1rem, 2.25rem);
}
.pe-accent{ color: #0f8f88; }

.pe-subtitle{
  font-size: 1.05rem;
  color: rgba(11,23,48,.78);
}

/* ===========================
   Card "O que você ganha"
=========================== */
.pe-benefits{
  list-style: none;
  padding: 0;
  margin: 0;
}
.pe-benefits li{
  position: relative;
  padding-left: 28px;
  margin: .70rem 0;
  color: rgba(11,23,48,.78);
  line-height: 1.45;
}
.pe-benefits li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
  color: var(--pe-teal-2);
}
.pe-subtitle-compact{
  color: rgba(11,23,48,.72);
  margin-bottom: 0;
}
.pe-card-title{
  font-weight: 800;
  letter-spacing: -.01em;
  color: #0b1f3a;
}

/* mobile */
@media (max-width: 575.98px){
  .pe-logo-wrap{
    padding: 14px 16px;
    border-radius: 18px;
  }
}

/* =========================
   HOME — fundo preencher tela no mobile
   ========================= */

/* garante que a Home use o viewport inteiro */
body.home-page.bg-school{
  min-height: 100vh;
}

/* em mobile, evite efeitos de "faixa" por conta de fixed/scroll */
@media (max-width: 991.98px){
  body.home-page.bg-school{
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important; /* evita bug do iOS/Android com fixed */
  }

  /* garante que o conteúdo centralize sem “sobrar” área branca */
  main.flex-grow-1{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* opcional: reduz padding para caber melhor no viewport */
  .container.py-4.py-md-5{
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

/* app/static/css/home.css */

/* Caixinhas reutilizadas na Home (sem inline) */
.pe-info-box{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 14px 16px;
}

/* Ícones Lucide na home com tamanho consistente */
.pe-info-box i[data-lucide]{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  opacity: .95;
}