/* ========================================================================
   02-layout.css — LAYOUT GERAL
   ------------------------------------------------------------------------
   Esqueleto da página: cabeçalho com logo, barra lateral com as abas,
   área principal (<main>) e títulos de seção.
   HTML relacionado: <header class="topheader">, <nav class="sidebar">, <main class="main">
   ======================================================================== */

/* ---- Grade de 2 colunas (menu lateral + conteúdo) e ajustes para telas pequenas. ---- */
.app{display:grid;grid-template-columns:250px 1fr;min-height:calc(100vh - 100px);}
@media (max-width:820px){ .app{grid-template-columns:150px 1fr;}
  .topheader{padding:10px 16px;}
  .logo-mark{height:30px;}
  .brand .sub{display:none;}
  .tab{font-size:12.5px;padding:10px 10px;}
}

/* ---- Cabeçalho branco com o logo e a "onda" verde logo abaixo dele. ---- */
.topheader{background:#fff;padding:calc(14px + env(safe-area-inset-top)) 30px 14px;box-shadow:0 2px 8px rgba(0,0,0,0.06);position:relative;overflow:hidden;}
.topheader::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle, rgba(217,227,107,0.30), transparent 70%);top:-160px;right:10%;pointer-events:none;}
.wave-divider{height:16px;width:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8 C 15 0 35 16 50 8 C 65 0 85 16 100 8 L100 16 L0 16 Z' fill='%234FB477'/%3E%3C/svg%3E");background-size:100% 100%;}

/* ---- Barra lateral (menu) e bloco da marca "LIMDA/UFRJ · Protótipo". ---- */
/* Barra lateral com o gradiente verde-água da marca */
.sidebar{background:linear-gradient(160deg,var(--blue) 0%,var(--teal-mid) 45%,var(--blue-deep) 100%);color:#EAF5FE;position:relative;padding:22px 12px 22px 12px;overflow:hidden;}
.sidebar::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle, rgba(217,227,107,0.22), transparent 70%);top:-90px;right:-110px;pointer-events:none;}
.sidebar::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);bottom:-70px;left:-90px;pointer-events:none;}
.brand{padding:0 10px 18px 10px;border-bottom:2px dashed rgba(255,255,255,0.35);margin-bottom:14px;position:relative;z-index:1;}
.brand .sub{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow);font-weight:800;}

/* ---- Botões das abas do menu lateral (aba ativa fica amarela). ---- */
.tabs{display:flex;flex-direction:column;gap:4px;position:relative;z-index:1;}
.tab{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;
  border:none;background:transparent;color:#EAF5FE;text-align:left;
  border-radius:14px;
  font-size:14px;font-weight:700;
  position:relative;
}
.tab .num{display:none;}
.tab:hover{background:rgba(255,255,255,0.12);}
.tab.active{
  background:linear-gradient(120deg,var(--yellow),var(--yellow-2));color:var(--blue-deep);
  box-shadow:0 4px 12px rgba(191,207,72,0.45);
}
.tab.active .num{color:var(--orange-2);}

/* ---- Área de conteúdo, barra superior ("Conectada(o) como…") e títulos de seção. ---- */
.main{padding:28px 36px 60px 36px;max-width:1100px;}
@media (max-width:600px){ .main{padding:20px 16px 50px 16px;} }
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;flex-wrap:wrap;gap:10px;}
.who{font-size:13px;color:var(--blue-2);font-weight:700;}
.who b{color:var(--ink);}
.section-title{font-size:30px;font-weight:700;margin:0 0 4px 0;color:var(--blue-deep);position:relative;padding-bottom:14px;}
.section-title::after{content:"";display:block;position:absolute;left:2px;bottom:0;width:64px;height:10px;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='10' viewBox='0 0 64 10'%3E%3Cpath d='M2 6 C 10 -2 18 12 26 6 C 34 0 42 12 50 6 C 54 3 58 3 62 6' stroke='%234FB477' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");}
.section-kicker{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--orange-2);margin-bottom:2px;}
.section-desc{color:#4C6178;font-size:14.5px;max-width:620px;margin-bottom:26px;line-height:1.5;}