:root{
  --verde:#57b34e;
  --verde-oscuro:#2f7f47;
  --marron:#63452f;
  --texto:#3b3936;
  --fondo:#f5f3ed;
  --blanco:#ffffff;
  --linea:#dcd8cf;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
}

body{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--texto);
  background:
    radial-gradient(circle at 50% 0%, #ffffff 0%, var(--fondo) 62%);
}

.page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 18px;
}

.card{
  width:min(820px,100%);
  background:rgba(255,255,255,.97);
  border:1px solid #e7e3dc;
  border-radius:14px;
  box-shadow:0 14px 38px rgba(68,54,39,.10);
  overflow:hidden;
}

.topline{
  height:5px;
  background:linear-gradient(90deg,var(--verde-oscuro),var(--verde));
}

.content{
  padding:52px 54px 46px;
  text-align:center;
}

.logo{
  display:block;
  width:min(400px,82%);
  height:auto;
  margin:0 auto 34px;
}

.separator{
  width:76px;
  height:2px;
  background:var(--verde);
  margin:0 auto 28px;
  opacity:.9;
}

h1{
  margin:0 0 24px;
  color:var(--marron);
  font-size:clamp(30px,5vw,46px);
  line-height:1.12;
  font-weight:700;
}

p{
  max-width:660px;
  margin:12px auto;
  font-size:18px;
  line-height:1.68;
}

.highlight{
  margin-top:26px;
  color:var(--verde-oscuro);
  font-size:25px;
  font-weight:700;
}

.signature{
  margin-top:28px;
}

.code404{
  margin:2px 0 14px;
  color:var(--verde);
  font-size:64px;
  line-height:1;
  font-weight:700;
  letter-spacing:1px;
}

a{
  color:var(--verde-oscuro);
  font-weight:700;
  text-decoration:none;
}

a:hover,
a:focus{
  text-decoration:underline;
}

.footer{
  padding:16px 24px;
  border-top:1px solid var(--linea);
  background:#faf9f6;
  text-align:center;
  color:#776f66;
  font-size:14px;
}

@media(max-width:600px){
  .page{padding:12px}
  .content{padding:36px 22px 32px}
  .logo{width:min(340px,90%);margin-bottom:28px}
  p{font-size:17px;line-height:1.6}
  .highlight{font-size:22px}
  .code404{font-size:54px}
  .footer{font-size:13px}
}

.bottomline{
  min-height:42px;
  background:var(--marron);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 18px;
  font-size:15px;
  line-height:1.35;
  text-align:center;
}