:root{
    --bg:#f4f6f9;
    --text:#1f2937;
    --muted:#6b7280;
    --cinza:#efefef;
    --verde:#216a4f;

    /* tamanhos configuráveis */
    --avatar: 200px;   
    --radius: 26px;      

    /* barra vertical do painel */
    --vbar: 5px;         
    --vbar-color:#e5e7eb;
    --gap: 14px;
    --brand:#216a4f;
    --brand-strong:#1b5841;
  }

  *{box-sizing:border-box}
  body{
    margin:0; padding:40px 16px;
    background:var(--bg); color:var(--text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  }
  .container{
    max-width: 1200px;     
    margin: 40px auto 56px;
    padding: 0 20px;
  }
  /* ===== CABEÇALHO ===== */
  .page-header{margin:0 0 40px}
  .page-header h1{
    text-align:center;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 40px;
    position: relative;
  }
  .page-header h1::after{
    content:"";
    display:block;
    width:120px;
    height:3px;
    margin:14px auto 0;
    background:linear-gradient(90deg, var(--brand), var(--brand-strong));
    border-radius:999px;
    opacity:.25;
  }

  /* ===== rádios ===== */
  input[type="radio"]{display:none}

  /* ===== ABAS (cards) ===== */
  .tabs{
    display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
    position:relative; z-index:0;
  }
  .tab{
    position:relative; z-index:0;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    background:var(--cinza); border-radius:22px; cursor:pointer;
    padding:22px 16px; height:calc(var(--avatar) + 150px);
    user-select:none; transition:background .2s ease;
  }

  /* avatar (foto + sombra) */
  .avatar{
    position:relative; width:var(--avatar); height:var(--avatar);
    margin-bottom:16px; border-radius:var(--radius); overflow:hidden;
  }
  .avatar img{
    position:absolute; inset:0; margin:auto;
    width:100%; height:100%; object-fit:cover; border-radius:inherit; pointer-events:none;
  }
  .avatar .photo{z-index:2}
  .avatar .shadow{
    z-index:1; filter:blur(1px); opacity:0;
    transform:translateX(0) scale(1.04);
    transition:transform .25s ease, opacity .25s ease;
  }

  .tab b{font-size:20px; line-height:1.15; margin-bottom:6px}
  .tab small{font-size:15px; color:var(--muted); margin-bottom:auto}

  /* barrinha sob o cargo — só no ativo */
  .bar{display:none; width:68px; height:4px; background:var(--verde); border-radius:2px; margin-top:auto; margin-bottom:12px}

  /* ===== estados ativos ===== */
  #oleno:checked    ~ .tabs label[for="oleno"],
  #natanael:checked ~ .tabs label[for="natanael"],
  #lenir:checked    ~ .tabs label[for="lenir"]{
    background:#fff; border-bottom-left-radius:0; border-bottom-right-radius:0; z-index:2;
  }
  #oleno:checked    ~ .tabs label[for="oleno"] .bar,
  #natanael:checked ~ .tabs label[for="natanael"] .bar,
  #lenir:checked    ~ .tabs label[for="lenir"] .bar{display:block}
  #oleno:checked    ~ .tabs label[for="oleno"] .shadow,
  #natanael:checked ~ .tabs label[for="natanael"] .shadow,
  #lenir:checked    ~ .tabs label[for="lenir"] .shadow{
    opacity:.9; transform:translateX(-8px) scale(1.04);
  }

  /* ===== PAINÉIS ===== */
  .panels{
    position:relative; z-index:1; background:#fff;
    margin-top:-4px; border-radius:0 0 22px 22px; padding:26px;
  }
  .panel{display:none; line-height:1.8}
  .panel p{margin:0 0 12px}

  /* título + cargo com barrinha vertical que pega ambos */
  .panel-title{display:flex; align-items:flex-start; gap:var(--gap); margin:0 0 8px}
  .panel-title .vbar{
    width:var(--vbar); background:var(--vbar-color);
    border-radius:3px; flex:0 0 var(--vbar); align-self:stretch;
  }
  .panel-title .title-wrap h2{
    margin:0 0 6px; color:var(--verde); font-size:30px; line-height:1.2;
  }
  .panel-title .title-wrap .cargo{
    margin:0; color:var(--muted); font-weight:600; font-size:16px;
  }

  /* conteúdo justificado e alinhado ao título */
  .panel-content{ padding-left: calc(var(--vbar) + var(--gap)) }
  .panel-content p{ text-align:justify; text-justify:inter-word; hyphens:auto }

  /* mostrar painel correspondente */
  #oleno:checked    ~ .panels #panel-oleno,
  #natanael:checked ~ .panels #panel-natanael,
  #lenir:checked    ~ .panels #panel-lenir{display:block}

  /* responsivo */
  @media (max-width:900px){.tabs{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){
    .tabs{grid-template-columns:1fr}
    .panel-title .title-wrap h2{font-size:26px}
  }