/* ============================================================
   ENTRADA (view-inicio) — palco escuro em tela cheia.
   Contrato: docs/design/sara-front-novo.html, tela 1.
   Mantido o fundo fotografico atual (assets/bg-tcm-entrada.jpg) com
   sobreposicao em gradiente navy, por ser identidade ja em uso; o
   mockup usa so o gradiente solido (--sara-stage-gradient).
   ============================================================ */
.content-area:has(#view-inicio.active) { max-width: none; padding: 0; }

.entrada-stage {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(18,46,82,0.90) 0%, rgba(8,23,38,0.95) 100%),
    url("../assets/bg-tcm-entrada.jpg") center center / cover no-repeat fixed;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: var(--sara-space-7) var(--sara-space-5);
  position:relative;
  overflow:hidden;
}
.entrada-stage::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 12%, rgba(197,165,90,0.10), transparent 40%),
    radial-gradient(circle at 84% 82%, rgba(197,165,90,0.08), transparent 45%);
  pointer-events:none;
}
.entrada-inner {
  position:relative;
  max-width: 1040px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.entrada-logo {
  background:#fff;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.32);
  margin-bottom: var(--sara-space-5);
  animation: sara-fade-up 0.6s ease both;
}
.entrada-logo img { height: 42px; width:auto; display:block; }
.entrada-wordmark {
  font-size: 40px;
  font-weight: 800;
  color: var(--sara-gold);
  letter-spacing: 0.04em;
  animation: sara-fade-up 0.6s ease 0.05s both;
}
.entrada-institucional {
  font-size: 13px;
  color: rgba(255,255,255,0.66);
  margin-top: 6px;
  font-weight:600;
  letter-spacing:0.03em;
  animation: sara-fade-up 0.6s ease 0.1s both;
}
.entrada-tagline {
  font-size: 16.5px;
  color: rgba(255,255,255,0.86);
  max-width: 640px;
  margin: var(--sara-space-4) auto var(--sara-space-6);
  line-height:1.6;
  animation: sara-fade-up 0.6s ease 0.15s both;
}
.env-card-grid {
  width:100%;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sara-space-4);
  text-align:left;
}
.env-card {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--sara-radius);
  padding: var(--sara-space-4);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap: 10px;
  font-family: var(--sara-font);
  transition: transform var(--sara-transition), box-shadow var(--sara-transition), background var(--sara-transition), border-color var(--sara-transition);
  animation: sara-fade-up 0.6s ease both;
}
.env-card:nth-child(1) { animation-delay: 0.18s; }
.env-card:nth-child(2) { animation-delay: 0.24s; }
.env-card:nth-child(3) { animation-delay: 0.30s; }
.env-card:nth-child(4) { animation-delay: 0.36s; }
.env-card:hover,
.env-card:focus-visible {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.08);
  border-color: var(--sara-gold);
  box-shadow: 0 14px 30px rgba(0,0,0,0.3), 0 0 0 1px rgba(197,165,90,0.25) inset;
}
.env-card-icon {
  width:38px; height:38px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--sara-gold-light), var(--sara-gold));
  color: var(--sara-navy-dark);
  display:flex; align-items:center; justify-content:center;
}
.env-card-icon svg { width:19px; height:19px; }
.env-card-title { display:block; color:#fff; font-size:15px; font-weight:800; }
.env-card-desc { display:block; color: rgba(255,255,255,0.62); font-size:12.5px; line-height:1.5; flex:1; }
.env-card-arrow { display:flex; justify-content:flex-end; color: var(--sara-gold); }
.env-card-arrow svg { width:17px; height:17px; transition: transform var(--sara-transition); }
.env-card:hover .env-card-arrow svg { transform: translateX(4px); }

.entrada-footer {
  margin-top: var(--sara-space-7);
  color: rgba(255,255,255,0.42);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  position:relative;
}

@keyframes sara-fade-up {
  from { opacity:0; transform: translateY(10px); }
  to { opacity:1; transform: translateY(0); }
}

@media (max-width: 1180px) {
  .env-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .env-card-grid { grid-template-columns: 1fr; }
  .entrada-wordmark { font-size: 32px; }
  .entrada-tagline { font-size: 14.5px; }
}