:root { --ink:#18150f; --muted:#665f55; --paper:#f2ead9; --white:#fffdf6; --green:#177245; --red:#d63b2d; --blue:#174ea6; --line:#221f1b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:78px; }
body {
  margin:0;
  background:
    linear-gradient(135deg, rgba(214,59,45,.08), transparent 34%),
    var(--paper);
  color:var(--ink);
  font-family: "Trebuchet MS", Verdana, sans-serif;
}
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:.18em; }
header { min-height:96vh; }
nav {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.8rem;
  padding:1rem;
  font:900 .75rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  flex-wrap:wrap;
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(242,234,217,.94);
  border-bottom:1px solid var(--line);
}
nav a { background:var(--white); border:1px solid var(--line); padding:.55rem .8rem; text-decoration:none; box-shadow:3px 3px 0 var(--line); }
nav .brand { margin-right:auto; background:var(--ink); color:var(--white); }
.hero {
  min-height:calc(96vh - 58px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(290px,430px);
  gap:clamp(1.5rem,5vw,4rem);
  align-items:center;
  padding:clamp(1.2rem,5vw,4rem);
}
.copy {
  max-width:780px;
  transform:rotate(-.5deg);
}
.eyebrow {
  display:inline-block;
  margin:0 0 1rem;
  background:var(--green);
  color:#fff;
  padding:.45rem .65rem;
  font:900 .75rem/1 Inter, sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}
h1 {
  margin:0;
  font-size:clamp(3.1rem,8vw,8rem);
  line-height:.86;
  max-width:10ch;
  letter-spacing:0;
}
.copy p { color:var(--muted); line-height:1.75; font-size:1.12rem; max-width:650px; }
.poster {
  position:relative;
  aspect-ratio:3/4;
  background:var(--ink);
  color:#fff;
  display:grid;
  place-content:center;
  gap:.65rem;
  padding:2rem;
  border:2px solid var(--line);
  box-shadow:18px 18px 0 var(--red);
  overflow:hidden;
}
.poster::after {
  content:"revista no. 04";
  position:absolute;
  left:1rem;
  bottom:1rem;
  font:900 .72rem/1 Inter, sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.poster strong { font:900 8rem/.8 Inter, sans-serif; color:#f2c84b; }
.poster span { font:900 2rem/1 Inter, sans-serif; text-transform:uppercase; animation:bounce 4s infinite alternate ease-in-out; }
.poster span:nth-child(3){ color:#71d1f2; animation-delay:-1s; }
.poster span:nth-child(4){ color:#ff7a66; animation-delay:-2s; }
@keyframes bounce { to { transform:translateX(30px) rotate(-2deg); } }
main { max-width:1120px; margin:0 auto; padding:3rem clamp(1rem,4vw,3rem) 5rem; }
.ranking {
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:1rem;
}
.ranking article {
  grid-column:span 4;
  background:var(--white);
  border:1px solid var(--line);
  padding:1rem;
  box-shadow:5px 5px 0 rgba(24,21,15,.18);
}
.ranking span { display:inline-block; color:var(--blue); font:900 1.1rem/1 Inter, sans-serif; margin-bottom:.65rem; }
.ranking h2 { margin:0 0 .35rem; font-size:1.45rem; line-height:1.05; }
.ranking h2 a { text-decoration:none; }
.ranking h2 a:hover { text-decoration:underline; text-decoration-color:var(--red); }
.ranking p { margin:0; color:var(--muted); line-height:1.66; }
.ranking b { display:block; margin-top:.7rem; font-family:Inter, ui-sans-serif, system-ui, sans-serif; font-size:.82rem; }
.text-block {
  margin-top:3rem;
  padding:1.2rem;
  border:1px solid var(--line);
  background:var(--white);
}
.text-block h2 { margin:0 0 .5rem; font-size:2.1rem; }
.text-block p { color:var(--muted); line-height:1.75; max-width:800px; }
code { background:#eadfc8; padding:.12rem .35rem; }
@media (max-width:820px){
  nav{position:static; justify-content:flex-start; gap:.5rem;}
  nav .brand{width:100%; margin-right:0;}
  nav a{flex:1 1 auto; text-align:center; min-width:min(100%,130px);}
  .hero{grid-template-columns:1fr; min-height:auto;}
  h1{font-size:clamp(2.8rem,15vw,3.3rem);}
  .poster{max-width:360px;}
  .ranking article{grid-column:1 / -1;}
}
@media (max-width:520px){ main{padding-inline:.85rem;} .poster{box-shadow:8px 8px 0 var(--red);} }