:root{
  /* Tu tema Amarillo (ajústalo si quieres) */
  --brand: #F4C400;        /* amarillo Yon Plan */
  --brand-2: #D4A800;      /* amarillo oscuro */
  --bg: #0B0B0E;
  --card: #101116;
  --text: #F6F6F7;
  --muted: #B8B8C2;
  --stroke: rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background: radial-gradient(1200px 800px at 50% -20%, rgba(244,196,0,.18), transparent 60%),
              radial-gradient(900px 700px at 20% 110%, rgba(244,196,0,.10), transparent 55%),
              var(--bg);
  color: var(--text);
}

.page{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 26px 16px;
}

.card{
  width:min(460px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--stroke);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: var(--shadow);
}

.hero{
  position:relative;
  height: 320px;
  background: #111;
}

.hero__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: contrast(1.05) saturate(1.02);
}

.hero__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.85)),
    radial-gradient(700px 400px at 50% 0%, rgba(244,196,0,.20), transparent 60%);
}

.brand{
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display:flex;
  align-items:center;
  gap: 12px;
}

.brand__logo{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit:cover;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 24px rgba(0,0,0,.45);
  background:#000;
}

.brand__handle{
  font-weight: 800;
  letter-spacing: .8px;
  font-size: 18px;
}

.brand__tagline{
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.links{
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.link{
  position:relative;
  display:grid;
  grid-template-columns: 48px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;

  padding: 14px 14px;
  border-radius: 16px;
  text-decoration:none;
  color: var(--text);
  border: 1px solid rgba(244,196,0,.28);
  background: linear-gradient(180deg, rgba(244,196,0,.18), rgba(244,196,0,.12));
  backdrop-filter: blur(6px);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.link:hover{
  transform: translateY(-1px);
  border-color: rgba(244,196,0,.55);
  background: linear-gradient(180deg, rgba(244,196,0,.22), rgba(244,196,0,.14));
}

.link:active{
  transform: translateY(0px);
}

.link__left{
  grid-row: 1 / span 2;
  display:flex;
  align-items:center;
  justify-content:center;
}

.link__icon{
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

.link__label{
  grid-column: 2;
  grid-row: 1;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: 13px;
  text-transform: uppercase;
}

.link__meta{
  grid-column: 2;
  grid-row: 2;
  font-size: 12px;
  color: rgba(255,255,255,.82);
}

.link__dots{
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self:center;
  opacity: .9;
  font-size: 18px;
}

.divider{
  height: 1px;
  margin: 8px 2px;
  background: rgba(255,255,255,.10);
}

.link--secondary{
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.link--secondary .link__label{
  grid-column: 1;
  grid-row: 1;
  text-transform:none;
  font-size: 14px;
  letter-spacing: 0;
}

.link--secondary .link__dots{
  grid-column: 2;
  grid-row: 1;
}

.social{
  padding: 0 16px 16px 16px;
  display:flex;
  gap: 10px;
  justify-content:center;
}

.social__btn{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  text-decoration:none;
  font-size: 13px;
}

.social__label{ color: rgba(255,255,255,.88); }

.footer{
  padding: 0 16px 18px 16px;
  text-align:center;
  color: rgba(255,255,255,.60);
  font-size: 12px;
}