/* =====================================
   CONTAINER
===================================== */
.arvore-container{
  max-width:1100px;
  margin:40px auto;
  background:#fdf6e3;
  padding:40px 30px;
  border-radius:18px;
  box-shadow:0 0 40px rgba(0,0,0,0.4);
}

.arvore-container h1{
  text-align:center;
  margin-bottom:40px;
  color:#3b2f1e;
  font-size:2rem;
}

/* =====================================
   ÁRVORE BASE
===================================== */
.tree{
  list-style:none;
  padding-left:0;
}

.tree ul{
  list-style:none;
  margin-left:35px;
  padding-left:25px;
  border-left:2px solid #CFAF45;
  display:none;
  animation:fadeDown 0.4s ease forwards;
}

.tree ul.open{
  display:block;
}

.tree li{
  position:relative;
  margin:18px 0;
}

.tree li::before{
  content:"";
  position:absolute;
  top:24px;
  left:-25px;
  width:25px;
  height:2px;
  background:#CFAF45;
}

/* =====================================
   BLOCO PESSOA
===================================== */
.person{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

/* BOTÃO */
.toggle{
  min-width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#CFAF45,#f4d97a);
  color:#000;
  font-weight:bold;
  border-radius:50%;
  cursor:pointer;
  font-size:18px;
  transition:all 0.3s ease;
}

.toggle:hover{
  transform:scale(1.1);
}

/* CARTÃO */
.name{
  background:#fff;
  padding:14px 18px;
  border-radius:12px;
  font-size:clamp(14px,2.2vw,17px);
  line-height:1.5;
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
  color:#2b1f14;
  max-width:100%;
  word-break:break-word;
  transition:0.3s ease;
}

.name:hover{
  background:#f7edd2;
  transform:translateY(-2px);
}

/* =====================================
   ANIMAÇÃO
===================================== */
@keyframes fadeDown{
  from{
    opacity:0;
    transform:translateY(-8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =====================================
   RESPONSIVO
===================================== */
@media(max-width:768px){

  .arvore-container{
    padding:25px 18px;
  }

  .tree ul{
    margin-left:20px;
    padding-left:18px;
  }

  .tree li::before{
    left:-18px;
    width:18px;
  }

  .toggle{
    min-width:40px;
    height:40px;
    font-size:20px;
  }
}

@media(max-width:480px){

  .arvore-container{
    padding:20px 14px;
  }

  .name{
    font-size:14px;
  }

  .toggle{
    min-width:42px;
    height:42px;
  }
}