/* RESET */
* { box-sizing: border-box; margin:0; padding:0; font-family:'Inter', sans-serif; }
body { background: #eef2f7; color: #111827; line-height:1.6; }

/* ================= HERO ================= */
.portal-header {
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
  align-items: center;
  padding:60px 20px;
  background: linear-gradient(135deg,#0f766e,#10b981);
  color:#fff;
  border-radius: 20px;
  margin:30px auto;
  max-width:1200px;
  gap:20px;
}

.header-content { max-width: 600px; }
.header-content h1 { font-size:3rem; margin-bottom:15px; }
.header-content p { font-size:1.2rem; margin-bottom:25px; }
.header-content .btn {
  padding:12px 25px; font-weight:600; border:none; border-radius:10px; cursor:pointer;
  background:#fff; color:#0f766e; transition: all .3s;
}
.header-content .btn:hover { background:#0f766e; color:#fff; }

.header-illustration img { max-width:200px; }

/* ================= CARDS ================= */
.portal-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
  max-width:1200px;
  margin:40px auto;
  padding:0 20px;
}

.portfolio-card {
  background:#fff; border-radius:15px; padding:25px; text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,.08); transition: all .3s;
  position:relative;
}

.portfolio-card:hover {
  transform: translateY(-7px) scale(1.02);
  box-shadow:0 15px 30px rgba(0,0,0,.12);
}

.portfolio-card h3 { font-size:1.4rem; color:#0f766e; margin-bottom:10px; }
.portfolio-card p { font-size:.95rem; color:#374151; margin-bottom:15px; }
.portfolio-card a {
  display:inline-block;
  padding:10px 20px;
  border-radius:8px;
  background:#0f766e;
  color:#fff;
  text-decoration:none;
  font-weight:500;
  transition:.3s;
}
.portfolio-card a:hover { background:#115e59; }

/* ================= MODAL ================= */
.modal {
  position: fixed; inset:0;
  display: none;
  background: rgba(0,0,0,0.6);
  align-items:center; justify-content:center;
  z-index:1000;
}
.modal-content {
  background:#fff; padding:30px; border-radius:15px;
  max-width:450px; width:95%; position:relative;
  animation:zoom .3s ease;
}
@keyframes zoom { from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }
.modal-content h2 { color:#0f766e; text-align:center; margin-bottom:20px; font-size:1.5rem; }
.modal-content ul { list-style:disc; margin-left:20px; margin-bottom:20px; }
.modal-content p.obs { font-size:.9rem; color:#6b7280; text-align:center; }
.close { position:absolute; top:15px; right:20px; font-size:22px; cursor:pointer; }

/* ================= FOOTER ================= */
footer { text-align:center; padding:30px 10px; color:#6b7280; font-size:.9rem; }
footer a { color:#0f766e; text-decoration:none; font-weight:600; }
footer a:hover { text-decoration:underline; }
/* RESET */
* { box-sizing: border-box; margin:0; padding:0; font-family:'Inter', sans-serif; }
body { background: #f0f4f8; color: #111827; line-height:1.6; }

/* ================= HERO ================= */
.portal-header {
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
  align-items: center;
  padding:60px 30px;
  background: linear-gradient(135deg,#0f766e,#10b981);
  color:#fff;
  border-radius: 20px;
  max-width:1200px;
  margin:40px auto;
  gap:20px;
  position:relative;
  overflow:hidden;
}

.portal-header::before {
  content:"";
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:radial-gradient(circle, rgba(255,255,255,.05) 20%, transparent 20%);
  background-size:50px 50px;
  pointer-events:none;
}

.header-content { max-width:600px; z-index:1; }
.header-content h1 { font-size:3rem; margin-bottom:15px; animation:fadeInDown .8s ease; }
.header-content p { font-size:1.2rem; margin-bottom:25px; animation:fadeInUp .8s ease; }
.hero-buttons { display:flex; gap:15px; flex-wrap:wrap; }
.btn, .btn-outline {
  padding:12px 25px; font-weight:600; border-radius:10px; cursor:pointer; transition: all .3s;
}
.btn { border:none; background:#fff; color:#0f766e; }
.btn:hover { background:#0f766e; color:#fff; }
.btn-outline { border:2px solid #fff; background:transparent; color:#fff; }
.btn-outline:hover { background:#fff; color:#0f766e; }

.header-illustration img { max-width:220px; animation:float 3s ease-in-out infinite; }

/* ================= CARDS ================= */
.portal-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
  max-width:1200px;
  margin:50px auto;
  padding:0 20px;
}

.portfolio-card {
  background:#fff; border-radius:15px; padding:25px; text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,.08); transition: all .4s;
  position:relative;
}

.portfolio-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.card-icon {
  font-size:2.5rem;
  margin-bottom:15px;
  display:inline-block;
  animation: bounce 2s infinite;
}

.portfolio-card h3 { font-size:1.4rem; color:#0f766e; margin-bottom:10px; }
.portfolio-card p { font-size:.95rem; color:#374151; margin-bottom:15px; }
.kpi {
  background: #10b98110; color:#0f766e; font-weight:600; padding:5px 12px; border-radius:50px;
  display:inline-block;
  font-size:.85rem;
}

/* ================= MODAL ================= */
.modal {
  position: fixed; inset:0;
  display: none;
  background: rgba(0,0,0,0.6);
  align-items:center; justify-content:center;
  z-index:1000;
}
.modal-content {
  background:#fff; padding:30px; border-radius:15px;
  max-width:450px; width:95%; position:relative;
  animation:zoom .3s ease;
}
@keyframes zoom { from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }
.modal-content h2 { color:#0f766e; text-align:center; margin-bottom:20px; font-size:1.5rem; }
.modal-content ul { list-style:disc; margin-left:20px; margin-bottom:20px; }
.modal-content p.obs { font-size:.9rem; color:#6b7280; text-align:center; }
.close { position:absolute; top:15px; right:20px; font-size:22px; cursor:pointer; }

/* ================= FOOTER ================= */
footer { text-align:center; padding:30px 10px; color:#6b7280; font-size:.9rem; }
footer a { color:#0f766e; text-decoration:none; font-weight:600; }
footer a:hover { text-decoration:underline; }

/* ================= ANIMATIONS ================= */
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes fadeInDown { 0% {opacity:0; transform:translateY(-20px);} 100% {opacity:1; transform:translateY(0);} }
@keyframes fadeInUp { 0% {opacity:0; transform:translateY(20px);} 100% {opacity:1; transform:translateY(0);} }