:root{
  --navy:#082d5b;
  --navy-2:#0f447f;
  --gold:#c9a75b;
  --bg:#f4f7fb;
  --card:#ffffff;
  --text:#10243d;
  --muted:#66778b;
  --line:#dce5ef;
  --shadow:0 10px 30px rgba(4,32,67,.09);
}

*{
  box-sizing:border-box;
}

html{
  min-height:100%;
  background:var(--bg);
}

body{
  margin:0;
  min-height:100%;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 50% -10%,rgba(17,78,138,.14),transparent 32rem),
    linear-gradient(180deg,#eef4fa 0,#f8fafc 44%,#f4f7fb 100%);
}

body:before{
  content:"";
  display:block;
  height:7px;
  background:linear-gradient(90deg,var(--navy),var(--gold),var(--navy));
}

.page-shell{
  width:min(760px,calc(100% - 28px));
  margin:0 auto;
  padding:28px 0 30px;
}

/* TOPO */
.profile{
  text-align:center;
  margin-bottom:24px;
}

/* LOGO SOLTA - SEM QUADRADO */
.logo-wrap{
  width:auto;
  height:auto;
  margin:0 auto 14px;
  background:transparent;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow:none;
  border:none;
  padding:0;
  border-radius:0;
}

.logo{
  width:410px;
  max-width:90%;
  height:auto;
  object-fit:contain;
  display:block;
  margin:0 auto;
}

h1{
  font-size:clamp(24px,5vw,34px);
  margin:0 0 5px;
  color:var(--navy);
  letter-spacing:-.02em;
}

.tagline{
  margin:0;
  color:var(--muted);
  font-size:15px;
}

/* DESTAQUE */
.hero-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-decoration:none;
  color:white;
  padding:20px 22px;
  border-radius:22px;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  box-shadow:0 14px 34px rgba(5,44,88,.24);
  margin-bottom:26px;
  position:relative;
  overflow:hidden;
}

.hero-card:after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  border-radius:50%;
  right:-60px;
  top:-90px;
  background:rgba(255,255,255,.09);
}

.hero-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  color:#ffe4a8;
}

.hero-card strong{
  font-size:21px;
}

.hero-card span:last-child{
  opacity:.84;
  font-size:14px;
}

/* CATEGORIAS */
.category-block{
  margin:24px 0;
}

.category-block h2{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#597087;
  margin:0 0 10px 5px;
}

.links-grid{
  display:grid;
  gap:11px;
}

/* BOTÕES */
.link-card{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:70px;
  padding:12px 14px;
  color:var(--text);
  text-decoration:none;
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 5px 18px rgba(15,51,88,.055);
  transition:.18s ease;
}

.link-card:hover{
  transform:translateY(-2px);
  border-color:#b8cada;
  box-shadow:var(--shadow);
}

.link-card.featured{
  border:1.5px solid var(--gold);
  box-shadow:0 8px 24px rgba(151,111,31,.11);
}

.icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#edf4fb;
  font-size:21px;
}

.link-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.link-copy strong{
  font-size:16px;
  color:var(--navy);
}

.link-copy small{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.3;
}

.arrow{
  margin-left:auto;
  font-size:29px;
  color:#91a2b5;
  font-weight:300;
}

.empty-state{
  text-align:center;
  background:white;
  border:1px dashed #c8d5e3;
  border-radius:18px;
  padding:28px;
  color:var(--muted);
}

footer{
  text-align:center;
  color:#8795a5;
  padding:20px 0 4px;
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:12px;
}

/* DESKTOP */
@media(min-width:680px){
  .links-grid.two-cols{
    grid-template-columns:1fr 1fr;
  }
}

/* CELULAR */
@media(max-width:600px){
  .page-shell{
    width:min(100% - 20px,760px);
    padding-top:22px;
  }

  .logo{
    width:175px;
  }

  h1{
    font-size:26px;
  }

  .tagline{
    font-size:14px;
  }

  .hero-card{
    padding:18px;
    border-radius:18px;
  }

  .hero-card strong{
    font-size:19px;
  }

  .link-card{
    min-height:66px;
    border-radius:16px;
    padding:11px 12px;
  }

  .icon{
    width:42px;
    height:42px;
    flex-basis:42px;
  }

  .link-copy strong{
    font-size:15px;
  }

  .link-copy small{
    font-size:12px;
  }
}