:root{
      --azul:#0e4d92;
      --azul-claro:#4a90e2;
      --laranja:#ff7a00;
      --bg:#f4f8ff;
      --texto:#222;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family:Arial, Helvetica, sans-serif;
      background: #3E4095;
	  background: linear-gradient(to right, #3E4095, #000A55);
      color:var(--texto);
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
    }
/* ALTERAÇÃO IMPORTANTE: overflow visible para permitir que a imagem "saia" do retângulo */
.container{
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%;
  max-width:1000px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  /* REMOVIDO overflow:hidden; */
  overflow: visible;
  position: relative;
}

.container::before {
  content: "";
  position: absolute;
  inset: 0; /* cobre todo o container */
  background: url('../images/fundo.png') center/cover no-repeat;
  z-index: -1; /* fica atrás de todo o conteúdo */
  border-radius: 16px; /* segue o arredondado do container */
}

/* .left: usa pseudo-elemento para a imagem (mantendo a base alinhada) */
.left{
  position: relative;
  min-height:420px; /* base alinhada (ajuste se quiser) */
  overflow: visible; /* garante que o ::before seja visível */
  background: transparent; /* imagem é mostrada via ::before */
}

/* pseudo-elemento que carrega a imagem e sobe acima do retângulo */
.left::before{
  content: "";
  position: absolute;
  top: -45px;              /* <--- ajuste este valor para subir/baixo a cabeça */
  left: 0;
  right: 0;
  bottom: 0;               /* mantém a base igual ao .left */
  background-image: url('../images/back.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;  /* use contain/auto se preferir outro comportamento */
  z-index: 1;
  pointer-events: none;    /* não interfere em cliques */
  border-radius: 0 0 16px 16px; /* arredonda a base do bloco da imagem se precisar */
}
    .right{
      padding:40px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    h1{
      font-size:2rem;
      margin-bottom:12px;
      color:#fff;
    }
    p{
      margin-bottom:20px;
      color:#fff;
    }
    .search{
      margin-bottom:16px;
      display:flex;
      align-items:center;
      border:1px solid #ccc;
      border-radius:8px;
      padding:8px 12px;
      position:relative;
      background:#f9f9f9;
    }
    .search input{
      border:none;
      outline:none;
      flex:1;
      font-size:15px;
      background:transparent;
    }
    ul{
      list-style:none;
      max-height:200px;
      overflow-y:auto;
      margin-top:5px;
      display:none;
      border:1px solid #ccc;
      border-radius:8px;
      background:#fff;
      box-shadow:0 8px 20px rgba(0,0,0,0.1);
      position:absolute;
      top:100%;
      left:0;
      width:100%;
      z-index:10;
    }
    ul.show{display:block;}
    li{
      padding:10px;
      border-radius:6px;
      cursor:pointer;
      transition:background .2s;
    }
    li:hover{
      background:rgba(14,77,146,.08);
    }
    footer{
      margin-top:30px;
      font-size:12px;
      color:#fff;
      text-align:center;
    }
	.linha {
	display:none;
	}
    /* RESPONSIVIDADE */
    @media (max-width: 768px) {
      .container{grid-template-columns:1fr;}
      .left{min-height:250px;}
      .right{padding:20px;}
      .popup-content{
        margin:5px; /* margem de 5px em todos os lados no popup */
        flex-direction: column; /* imagem acima do texto */
        align-items: center;
      }
      .popup-content img{
        margin-bottom:15px;
        margin-right:0;
      }
	  .linha {
	  width:100%;
	  height:15px;
	  background:linear-gradient(to right, #000A55, #3E4095);
	  display:block;
	  }
    }
    /* POPUP */
    .popup{
      position:fixed;
      top:0; left:0;
      width:100%; height:100%;
      background:rgba(0,0,0,0.6);
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:100;
      display:none;
    }
    .popup-content{
      display:flex;
      align-items:center;
      background: linear-gradient(to bottom, var(--azul), var(--azul-claro));
      color:#fff;
      border-radius:16px;
      max-width:400px;
      padding:20px;
      text-align:left;
      box-shadow:0 10px 25px rgba(0,0,0,.25);
      animation:fadeIn .3s ease;
    }
    .popup-content img{
      width:120px;
      margin-right:15px;
    }
    .popup-content h2{
      font-size:18px;
      color:#fff;
      margin-bottom:10px;
    }
    .popup-content p{
      font-size:14px;
      color:#fff;
      margin-bottom:20px;
    }
    .popup-content button{
      padding:10px 20px;
      border:none;
      background:#000A55;
      color:#fff;
      font-weight:bold;
      border-radius:8px;
      cursor:pointer;
      transition:background .2s;
    }
    .popup-content button:hover{
	background:#3E4095;
}
    @keyframes fadeIn{
      from{opacity:0; transform:scale(.9)}
      to{opacity:1; transform:scale(1)}
    }