:root{
  --navy:#061a33;
  --navy2:#08284b;
  --blue:#0b3b67;
  --cyan:#21e4ef;
  --cyan-soft:#6bc6f1;
  --gold:#d7aa62;
  --white:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#03101f}
body{
  color:var(--white);
  font-family:Georgia,"Times New Roman",serif;
  background:
    radial-gradient(circle at 50% -10%,#0d3558 0,#061b34 38%,#03101f 100%);
}
.card{
  width:min(100%,520px);
  min-height:100vh;
  margin:0 auto;
  overflow:hidden;
  position:relative;
  padding-bottom:28px;
  background:
    linear-gradient(145deg,transparent 0 9%,rgba(21,70,109,.13) 9% 12%,transparent 12% 100%),
    linear-gradient(180deg,#071c36 0%,#06172d 100%);
}
.hero{
  width:100%;
  aspect-ratio:16/9;
  background-image:url('rogerio-escritorio.png');
  background-size:cover;
  background-position:center center;
  border-bottom:1px solid rgba(53,192,231,.22);
  box-shadow:0 10px 36px rgba(0,0,0,.28);
}
.identity{
  position:relative;
  text-align:center;
  padding:20px 22px 18px;
}
.justice{
  position:absolute;
  right:-2px;
  top:-20px;
  font-size:92px;
  line-height:1;
  color:#0b395e;
  opacity:.45;
  filter:saturate(.8);
  pointer-events:none;
}
h1{
  position:relative;
  margin:0;
  font-size:clamp(34px,8vw,48px);
  line-height:1.04;
  font-weight:700;
  letter-spacing:-.02em;
  text-shadow:0 2px 10px rgba(0,0,0,.3);
}
.role-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:12px auto 5px;
}
.role-row span{width:56px;height:2px;background:linear-gradient(90deg,transparent,var(--gold))}
.role-row span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.role-row p{
  margin:0;
  color:var(--gold);
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  font-weight:500;
  letter-spacing:.38em;
  padding-left:.38em;
}
.oab{
  position:relative;
  margin:7px 0 0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  letter-spacing:.29em;
  padding-left:.29em;
  color:#ecf2f7;
}
.actions{
  padding:2px 30px 20px;
  display:grid;
  gap:10px;
}
.action{
  min-height:84px;
  display:grid;
  grid-template-columns:58px 1fr 26px;
  align-items:center;
  gap:14px;
  padding:10px 18px;
  border-radius:22px;
  border:2px solid #76c9f5;
  background:linear-gradient(105deg,#0c3760 0%,#06203d 72%,#071c35 100%);
  box-shadow:inset 0 0 26px rgba(18,95,151,.20),0 8px 22px rgba(0,0,0,.18);
  text-decoration:none;
  color:#fff;
  transition:transform .18s ease,filter .18s ease;
}
.action:hover{transform:translateY(-1px);filter:brightness(1.06)}
.action.whatsapp{
  border-color:#28eff1;
  background:linear-gradient(105deg,#0aa9b6 0%,#087d94 45%,#0c3d60 100%);
  box-shadow:0 0 18px rgba(31,227,236,.20),inset 0 0 28px rgba(255,255,255,.06);
}
.icon-wrap{
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#245f9b,#103c6d);
  box-shadow:inset 0 0 18px rgba(255,255,255,.05);
}
.whatsapp .icon-wrap{background:linear-gradient(145deg,#19c9cb,#0797ae)}
.icon-wrap svg{width:31px;height:31px;fill:#fff}
.text{
  font-size:clamp(21px,5.7vw,30px);
  font-weight:700;
  line-height:1;
  text-align:left;
  white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.28);
}
.chev{
  font-family:Arial,Helvetica,sans-serif;
  font-size:43px;
  font-weight:300;
  line-height:1;
  text-align:center;
  margin-top:-4px;
}
@media(max-width:430px){
  .hero{aspect-ratio:16/8.7;background-position:center 46%}
  .identity{padding-top:16px;padding-bottom:15px}
  h1{font-size:37px}
  .role-row{margin-top:9px}
  .actions{padding:0 22px 22px;gap:9px}
  .action{min-height:78px;grid-template-columns:52px 1fr 22px;padding:9px 14px;border-radius:20px}
  .icon-wrap{width:52px;height:52px}
  .icon-wrap svg{width:28px;height:28px}
  .text{font-size:22px}
  .chev{font-size:38px}
}
@media(max-width:360px){
  h1{font-size:32px}
  .actions{padding-left:15px;padding-right:15px}
  .action{grid-template-columns:48px 1fr 20px;gap:10px}
  .icon-wrap{width:48px;height:48px}
  .text{font-size:19px}
}