@font-face { font-family: "Anton"; src: url("assets/anton-regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Barlow C"; src: url("assets/barlow-condensed-extrabold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Roboto C"; src: url("assets/roboto-condensed-medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Roboto C"; src: url("assets/roboto-condensed-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --crema: #F6E8D0;
  --negro: #141110;
  --celeste: #74ACDF;
  --oro: #F2CF1D;
  --rojo: #D7161B;
}

* { box-sizing: border-box; margin: 0; }

html, body { overflow-x: hidden; }
body {
  background: var(--crema);
  color: var(--negro);
  font-family: "Roboto C", "Arial Narrow", sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.5;
  /* grano de papel */
  background-image: radial-gradient(rgba(20,17,16,.07) 1px, transparent 1px);
  background-size: 4px 4px;
}

mark { background: var(--oro); color: var(--negro); padding: 0 .2em; }

/* --- portada --- */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 3rem 1.25rem 3.5rem;
  border-bottom: 6px solid var(--negro);
}
.sol {
  pointer-events: none;
  position: absolute;
  inset: -40%;
  background: repeating-conic-gradient(from 0deg at 50% 38%, rgba(242,207,29,.55) 0deg 7deg, transparent 7deg 18deg);
  z-index: -1;
}
.escudo {
  width: min(62vw, 280px);
  height: auto;
  filter: drop-shadow(6px 6px 0 var(--celeste));
}
h1 {
  font-family: "Anton", Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 13vw, 5.5rem);
  line-height: .95;
  margin-top: 1rem;
  text-shadow: 4px 4px 0 var(--celeste);
}
h1 span { font-size: .62em; }
.bajada {
  font-family: "Barlow C", sans-serif;
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  line-height: 1.25;
  max-width: 34rem;
  margin: 1.2rem auto 1.8rem;
}

/* --- botón --- */
.boton {
  display: inline-block;
  font-family: "Anton", Impact, sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 6vw, 1.9rem);
  letter-spacing: .03em;
  color: #fff;
  background: var(--rojo);
  text-decoration: none;
  padding: .7rem 1.8rem;
  border: 4px solid var(--negro);
  box-shadow: 7px 7px 0 var(--negro);
  transform: rotate(-1.5deg);
  transition: transform .12s, box-shadow .12s;
}
.boton:hover, .boton:focus-visible { transform: rotate(-1.5deg) translate(3px, 3px); box-shadow: 4px 4px 0 var(--negro); }
.boton:focus-visible { outline: 4px solid var(--celeste); outline-offset: 4px; }

/* --- cuerpo --- */
main { max-width: 40rem; margin: 0 auto; padding: 2.5rem 1.25rem; }
h2 {
  font-family: "Anton", Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 2.2rem;
  margin-bottom: .6rem;
}
.que-es p + p { margin-top: .9rem; }
.remate {
  font-family: "Barlow C", sans-serif;
  font-size: 1.6rem;
  line-height: 1.2;
  border-left: 8px solid var(--celeste);
  padding-left: .8rem;
}

.pasos { display: grid; gap: .8rem; margin: 2.5rem 0; }
.pasos div {
  display: flex; align-items: center; gap: 1rem;
  background: #fff8ec;
  border: 3px solid var(--negro);
  box-shadow: 5px 5px 0 var(--celeste);
  padding: .7rem 1rem;
}
.pasos b {
  font-family: "Anton", Impact, sans-serif;
  font-weight: 400;
  font-size: 2rem;
  background: var(--oro);
  border: 3px solid var(--negro);
  border-radius: 50%;
  width: 3rem; height: 3rem; flex: none;
  display: grid; place-items: center;
}

.manifiesto { border: 3px solid var(--negro); background: #fff8ec; }
.manifiesto summary {
  cursor: pointer;
  font-family: "Anton", Impact, sans-serif;
  text-transform: uppercase;
  font-size: 1.5rem;
  padding: .8rem 1rem;
  background: var(--negro);
  color: var(--crema);
}
.manifiesto .texto { padding: 1.2rem 1.2rem 1.5rem; }
.manifiesto .texto p + p { margin-top: .9rem; }

.cierre { text-align: center; margin-top: 3rem; }
.cierre p {
  font-family: "Anton", Impact, sans-serif;
  text-transform: uppercase;
  font-size: clamp(2rem, 9vw, 3rem);
  margin-bottom: 1.4rem;
}

footer { text-align: center; padding-bottom: 2rem; font-family: "Barlow C", sans-serif; }
.banda {
  display: block; height: 30px; margin-bottom: 1.2rem;
  background: linear-gradient(var(--celeste) 0 33.3%, #fff 33.3% 66.6%, var(--celeste) 66.6%);
  border-block: 3px solid var(--negro);
}

@media (prefers-reduced-motion: reduce) { .boton { transition: none; } }

.redes { margin-bottom: .4rem; }
.redes a { color: var(--negro); }