:root{
  font-size:10px;
  --bg-dark:#111417;
  --red:#d62828;
  --orange:#f77f00;
  --light:#fef6f0;
  --gray:#d1d5db;
  --radius:1.2rem;
  --shadow:0 10px 24px rgba(0,0,0,.35);
  --wrap-max:88rem;
  --wrap-min:60rem;
  --pad-x:3.2rem;
  --pad-y:3.2rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* Fondo */
body{
  display:flex;flex-direction:column;align-items:center;
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(255,120,0,0.25) 0%, transparent 70%),
    radial-gradient(600px 500px at 100% 100%, rgba(255,60,0,0.15) 0%, transparent 70%),
    repeating-linear-gradient(45deg,#1b1b1b 0 4px,#181a1b 4px 8px),
    var(--bg-dark);
  background-attachment:fixed;
  font-family:"Bebas Neue","Oswald","Roboto Condensed",sans-serif;
  color:var(--light);
  line-height:1.6;
}

/* ===== TARJETA BASE ===== */
header, body>ul, section, article, footer{
  width:100%;
  max-width:var(--wrap-max);
  min-width:var(--wrap-min);
  margin:1.6rem auto;
  padding:var(--pad-y) var(--pad-x);
  background:linear-gradient(180deg, rgba(26,26,26,.85), rgba(17,17,17,.95));
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  text-align:center; /* centramos todo el contenido dentro */
}

/* ===== HEADER ===== */
header{
  display:flex;flex-direction:column;align-items:center;gap:1.6rem;
  margin-top:3.2rem;
}
header h1{
  font-size:4rem;color:var(--orange);
  text-transform:uppercase;letter-spacing:.05em;
  text-shadow:0 0 8px rgba(255,80,0,.8);
  animation:flicker 3s infinite ease-in-out;
}
header h2{font-size:2rem;color:var(--gray);font-weight:400;}
header img{
  width:16rem;height:16rem;border-radius:50%;
  border:.5rem solid var(--red);box-shadow:0 0 25px rgba(255,80,0,.4);
}

/* ===== NAVEGACIÓN ===== */
body>ul{list-style:none;}
body>ul>h2{
  font-size:2.8rem;color:var(--orange);text-transform:uppercase;
  letter-spacing:.03em;margin:0 0 1.6rem 0;font-weight:700;
}
.menu-botones{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:2rem; /* más separación entre botones */
}
.menu-botones a{
  background:var(--red);color:#fff;padding:1.3rem 2.6rem;
  border-radius:999px;font-size:1.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  border:1px solid transparent;transition:all .25s ease;
  text-decoration:none;
}
.menu-botones a:hover{
  background:var(--orange);
  box-shadow:0 0 18px rgba(255,120,0,.6);
  transform:translateY(-2px);
}

/* ===== SECCIONES ===== */
section h1, h3{
  font-size:2.8rem;color:var(--orange);
  text-transform:uppercase;letter-spacing:.03em;
  font-weight:700;margin:0 0 1.2rem 0;
}
.maerias{font-size:2.4rem;color:var(--light);margin-bottom:1.2rem;font-weight:400;}
article h4{
  color:var(--red);font-size:1.9rem;letter-spacing:.02em;
  margin:1.6rem 0 .8rem 0;font-weight:500;
}
ul{
  list-style:none;padding:0;margin:0 auto;text-align:center;
}
ul li{
  background:rgba(255,255,255,.08);color:var(--gray);
  margin:.35rem .4rem;padding:.6rem 1.2rem;border-radius:.6rem;
  display:inline-block;font-size:1.6rem;font-weight:400;
}
p{
  font-size:1.6rem;line-height:1.6;color:var(--gray);
  margin:.4rem 0;font-weight:400;
}

/* ===== INSTITUCIONAL ===== */
section:nth-of-type(2) nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;margin:1rem 0 0 0;
}
section:nth-of-type(2) nav a{
  display:inline-block;font-size:1.4rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
  padding:.6rem 1.2rem;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:var(--gray);text-decoration:none;transition:all .25s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.3);
}
section:nth-of-type(2) nav a:hover{
  background:var(--orange);color:#fff;transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(255,120,0,.5);
}
section:nth-of-type(2) nav a:active{
  transform:translateY(0);background:var(--red);
}

/* ===== FOOTER ===== */
footer{color:var(--gray);font-size:1.5rem;font-weight:400;line-height:1.6;text-align:center;}

/* ===== RESPONSIVE ===== */
@media(max-width:680px){
  :root{--wrap-min:auto;}
  header,body>ul,section,article,footer{min-width:0;padding:2rem 1.6rem;}
  .menu-botones{gap:1.4rem;}
  .menu-botones a{padding:1.1rem 2rem;font-size:1.6rem;}
  section h1,h3{font-size:2.2rem;}
}

/* ===== EFECTO TÍTULO ===== */
@keyframes flicker{
  0%,19%,21%,23%,25%,54%,56%,100%{opacity:1;}
  20%,24%,55%{opacity:.7;}
}