/* hrrr.ws · portada pública. Un solo tema: papel y tinta deliberados. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;display:flex;flex-direction:column;
  background:var(--hw-papel);color:var(--hw-tinta);
  font-family:var(--font-display);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--hw-tinta)}
a:focus-visible{outline:2px solid var(--hw-ink-indigo);outline-offset:3px}

.banda{
  height:46px;display:flex;align-items:center;gap:14px;padding:0 16px;
  border-bottom:1px solid var(--hw-tinta);background-color:var(--hw-papel);
}
.banda .meta{background:var(--hw-papel);padding:4px 8px;font-size:9.5px}
.banda .relleno{flex:1}

.hoja{
  flex:1;display:flex;flex-direction:column;
  width:100%;max-width:720px;margin:0 auto;padding:56px 16px 28px;
}
.marca{display:inline-block;color:var(--hw-tinta);align-self:flex-start;margin-bottom:44px}
.marca svg{display:block;width:124px;height:auto}
.marca:hover{color:var(--hw-ink-indigo)}

.fecha{color:var(--hw-medio);margin:0 0 10px}
h1{
  font-size:clamp(34px,7vw,56px);line-height:.98;font-weight:700;
  letter-spacing:-.035em;text-transform:uppercase;margin:0 0 16px;text-wrap:balance;
}
.bajada{font-size:18px;line-height:1.5;color:var(--hw-apagado);max-width:52ch;margin:0 0 32px;text-wrap:pretty}
.bajada strong{color:var(--hw-tinta);font-family:var(--font-mono);font-size:.88em;font-weight:700}

.acciones{display:flex;flex-wrap:wrap;gap:10px}
.boton{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border:1px solid var(--hw-tinta);text-decoration:none;
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:background var(--hw-motion),color var(--hw-motion);
}
.boton:hover{background:rgba(38,35,32,.06)}
.boton.pleno{background:var(--hw-tinta);color:var(--hw-papel)}
.boton.pleno:hover{background:var(--hw-ink-indigo);border-color:var(--hw-ink-indigo);color:var(--hw-papel)}

.pie{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--hw-tinta);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:var(--hw-medio);
}
.hoja > .acciones{margin-bottom:72px}
.pie a{color:var(--hw-medio);text-decoration:none}
.pie a:hover{color:var(--hw-tinta)}