/*
Neón rosa 
Elsa Fuentes Muñoz 
*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css");
:root{
  --bg1: #0b0210;
  --bg2: #15021b;
  --neon: #ff3ecf;
  --neon2: #ff3b76;
  --neon-dim: rgba(255,62,207,0.65);
  --glass: rgba(255,255,255,0.03);
  --text: #f8eefe;
  --muted: rgba(248,238,254,0.6);
}
*{box-sizing:border-box;}
html,body{
  height:100%;margin:0;
  font-family:"Poppins",Arial,sans-serif;
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
#contenedor{
  max-width:1100px;
  margin:32px auto;
  padding:28px;
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  border-radius:16px;
  box-shadow:0 8px 40px rgba(0,0,0,0.6),0 0 40px var(--neon-dim);
  border:1px solid rgba(255,62,207,0.06);
}
h1 span,h2 span,h3 span{
  display:inline-block;
  color:var(--text);
  text-shadow:0 0 12px var(--neon),0 0 22px var(--neon),
               0 0 40px var(--neon),0 0 70px var(--neon2);
}
h1{font-size:34px;margin:0 0 6px;}
h2{font-size:18px;margin:0 0 10px;font-weight:500;color:var(--muted);}
#titulo{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
#titulo::before{
  content:"\f0e7";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:48px;
  color:var(--neon);
  margin-right:6px;
  text-shadow:0 0 18px var(--neon),0 0 30px var(--neon2),0 0 50px var(--neon);
}
#resumen p,#apartados p,#profesores p{
  line-height:1.6;color:var(--muted);
}
span{vertical-align:middle;}
ul.ul1,ul.ul2,#lrecursos ul,#lselecciona ul{
  list-style:none;
  padding-left:0;
  margin:10px 0 20px;
}
ul.ul1 li,ul.ul2 li,#lrecursos li,#lselecciona li{
  position:relative;
  padding-left:44px;
  margin:8px 0;
  padding-right:8px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.01));
  border-radius:8px;
  padding-top:10px;
  padding-bottom:10px;
  transition:transform .18s ease,box-shadow .18s ease;
}
ul.ul1 li::before,ul.ul2 li::before,#lrecursos li::before,#lselecciona li::before{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:18px;
  color:var(--neon);
  text-shadow:0 0 10px var(--neon),0 0 22px rgba(255,62,207,0.12);
  content:"\f111";
}
ul.ul1 li:hover,ul.ul2 li:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,0.6),0 0 40px var(--neon-dim);
}
a{
  color:var(--neon);
  text-decoration:none;
  border-bottom:1px dashed rgba(255,62,207,0.18);
  padding-bottom:2px;
}
a:hover{
  color:#fff;
  box-shadow:0 0 16px rgba(255,62,207,0.12);
  transform:translateZ(0);
}
#enlaces,#enlacesversiones{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:20px;
}
#enlaces h3,#enlacesversiones h3{
  margin:0 0 8px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,62,207,0.05),rgba(255,62,207,0.02));
  border:1px solid rgba(255,62,207,0.06);
  font-size:13px;
  color:var(--neon);
  text-shadow:0 0 6px rgba(255,62,207,0.06);
}
.badge i{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  margin-right:6px;
}
#extraDiv1,#extraDiv2,#extraDiv3,#extraDiv4,#extraDiv5,#extraDiv6{
  display:none;
}


@media (max-width:780px){
  #enlaces{grid-template-columns:1fr;}
  #titulo{flex-direction:column;align-items:flex-start;}
  ul.ul1 li,ul.ul2 li{padding-left:52px;}
}


h1,h2,h3{
  position:relative;
  display:inline-block;
  filter:drop-shadow(0 0 10px var(--neon)) drop-shadow(0 0 25px var(--neon2));
}
h1::before,h2::before,h3::before,
h1::after,h2::after,h3::after{
  content:attr(data-text);
  position:absolute;top:0;left:0;
  color:var(--neon);opacity:.9;
  mix-blend-mode:difference;pointer-events:none;
}
h1::before,h2::before,h3::before{
  text-shadow:-3px 0 var(--neon),3px 0 var(--neon2);
  animation:glitchTop 1.3s infinite linear alternate-reverse;
}
h1::after,h2::after,h3::after{
  text-shadow:3px 0 var(--neon2),-3px 0 var(--neon);
  animation:glitchBottom 1.5s infinite linear alternate-reverse;
}
@keyframes glitchTop{
  0%{transform:translate(-3px,-3px);opacity:.6;}
  50%{transform:translate(3px,2px);opacity:1;}
  100%{transform:translate(-2px,1px);opacity:.7;}
}
@keyframes glitchBottom{
  0%{transform:translate(3px,1px);opacity:.7;}
  50%{transform:translate(-3px,-2px);opacity:1;}
  100%{transform:translate(2px,-3px);opacity:.6;}
}


h1 span.emoji, h2 span.emoji, h3 span.emoji{
  display:inline-block;
  animation:emojiFloat 2.2s ease-in-out infinite,
             emojiBlink 1.5s infinite steps(2, jump-none);
}
@keyframes emojiFloat{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
  100%{ transform:translateY(0); }
}
@keyframes emojiBlink{
  0%,100%{ opacity:1; }
  50%{ opacity:0.55; }
}


ul.ul1 li::before,
ul.ul2 li::before,
#lrecursos li::before,
#lselecciona li::before{
  animation:emojiBounce 1.4s ease-in-out infinite;
}
@keyframes emojiBounce{
  0%{ transform:translateY(-50%) scale(1); }
  50%{ transform:translateY(-55%) scale(1.15); }
  100%{ transform:translateY(-50%) scale(1); }
}