/* ============================= */
/* RESET */
/* ============================= */

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

/* ============================= */
/* HEADER */
/* ============================= */

#header{
position:relative;
z-index:10;
overflow:visible;
}

/* ============================= */
/* MAPA CEREBRAL FRACTAL */
/* ============================= */

#header::before{

content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:-2;

background:

radial-gradient(circle at 20% 30%, rgba(255,215,0,.35) 1px, transparent 3px),
radial-gradient(circle at 70% 40%, rgba(255,215,0,.35) 1px, transparent 3px),
radial-gradient(circle at 40% 70%, rgba(255,215,0,.35) 1px, transparent 3px),
radial-gradient(circle at 85% 65%, rgba(255,215,0,.35) 1px, transparent 3px),

repeating-linear-gradient(
120deg,
rgba(255,215,0,0.06),
rgba(255,215,0,0.06) 2px,
transparent 3px,
transparent 24px
),

repeating-linear-gradient(
60deg,
rgba(255,215,0,0.05),
rgba(255,215,0,0.05) 2px,
transparent 3px,
transparent 20px
),

radial-gradient(circle at 60% 50%, rgba(178,108,255,.25), transparent 55%),
radial-gradient(circle at 30% 60%, rgba(178,108,255,.18), transparent 60%);

animation:
brainFlow 40s linear infinite,
brainPulse 9s ease-in-out infinite alternate;

}

/* ============================= */
/* FONDO COGNITIVO */
/* ============================= */

#header::after{

content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:

repeating-radial-gradient(
circle at 50% 50%,
rgba(255,215,0,0.08) 0px,
rgba(255,215,0,0.08) 2px,
transparent 3px,
transparent 16px
),

repeating-linear-gradient(
60deg,
rgba(255,215,0,0.04),
rgba(255,215,0,0.04) 2px,
transparent 3px,
transparent 18px
),

radial-gradient(circle at 40% 60%, rgba(255,230,120,0.15), transparent 60%),
radial-gradient(circle at 70% 40%, rgba(255,210,90,0.12), transparent 65%),

url('../images/loc.jpg') center/cover no-repeat;

animation:
fractalMind 28s linear infinite,
mentalPulse 8s ease-in-out infinite alternate;

z-index:-1;
pointer-events:none;

}

/* ============================= */
/* MENÚ */
/* ============================= */

.nav{

list-style:none;
background:#000;
width:160px;
position:relative;
z-index:5000;

box-shadow:
0 0 18px rgba(255,215,0,0.12),
inset 0 0 10px rgba(255,215,0,0.05);

}

/* ============================= */
/* BARRA NEURONAL */
/* ============================= */

.nav::before{

content:"";
position:absolute;
left:-4px;
top:0;

width:4px;
height:100%;

background:

linear-gradient(
to bottom,
transparent,
rgba(178,108,255,.7),
transparent
),

radial-gradient(circle,#b26cff 1px,transparent 2px);

background-size:
100% 100%,
4px 30px;

animation:
neuralBar 6s linear infinite,
neuralCurrent 1.8s linear infinite;

}

/* ============================= */
/* ITEMS */
/* ============================= */

.nav > li{
position:relative;
width:100%;
}

.nav li a{

display:block;
color:white;
text-decoration:none;
padding:9px 12px;
background:#000;
width:100%;
position:relative;
transition:.25s;

}

/* ============================= */
/* SINAPSIS */
/* ============================= */

.nav li a::after{

content:"";
position:absolute;

right:8px;
top:50%;

width:6px;
height:6px;

background:#b26cff;
border-radius:50%;

transform:translateY(-50%) scale(.4);
opacity:0;

box-shadow:
0 0 6px #b26cff,
0 0 12px #a050ff,
0 0 18px #7a3cff;

}

/* ACTIVACIÓN */

.nav li a:hover::after{
animation:synapsePulse .6s ease forwards;
}

.nav li a:hover{

background:#434343;

box-shadow:
0 0 8px rgba(178,108,255,0.7),
0 0 16px rgba(178,108,255,0.4),
inset 0 0 6px rgba(178,108,255,0.4);

}

/* ============================= */
/* SUBMENÚ HOLOGRÁFICO */
/* ============================= */

.nav ul{

position:absolute;
top:0;
left:100%;

width:200px;

background:rgba(10,10,10,0.78);
backdrop-filter:blur(7px);

border:1px solid rgba(255,215,0,0.20);

box-shadow:
0 0 18px rgba(255,215,0,0.28),
0 0 32px rgba(255,215,0,0.12),
inset 0 0 12px rgba(255,215,0,0.08);

border-radius:5px;

list-style:none;

opacity:0;
visibility:hidden;

transform:translateX(-6px);

transition:
opacity .25s ease,
transform .25s ease;

z-index:6000;

}

/* mostrar submenú */

.nav li:hover > ul{
opacity:1;
visibility:visible;
transform:translateX(0);
}

/* SUBMENÚ NIVEL 2 */

.nav ul li{
position:relative;
}

/* SUBMENÚ NIVEL 3 */

.nav ul li ul{

position:absolute;
top:0;
left:100%;

width:200px;

opacity:0;
visibility:hidden;

transform:translateX(-6px);

transition:.25s;
z-index:7000;

}

.nav ul li:hover > ul{

opacity:1;
visibility:visible;
transform:translateX(0);

}

/* ============================= */
/* ANIMACIONES */
/* ============================= */

@keyframes neuralBar{

0%{opacity:.3;}
50%{opacity:1;}
100%{opacity:.3;}

}

@keyframes neuralCurrent{

0%{
background-position:0 0,0 0;
}

100%{
background-position:0 0,0 40px;
}

}

@keyframes synapsePulse{

0%{
opacity:0;
transform:translateY(-50%) scale(.3);
}

50%{
opacity:1;
transform:translateY(-50%) scale(1.5);
}

100%{
opacity:1;
transform:translateY(-50%) scale(1);
}

}

@keyframes fractalMind{

0%{
background-position:
50% 50%,
50% 50%,
40% 60%,
70% 40%,
center;
}

50%{
background-position:
52% 48%,
48% 52%,
45% 55%,
65% 45%,
center;
}

100%{
background-position:
48% 52%,
52% 48%,
42% 58%,
68% 42%,
center;
}

}

@keyframes mentalPulse{

0%{opacity:.85;}
100%{opacity:1;}

}

@keyframes brainFlow{

0%{
background-position:
20% 30%,70% 40%,40% 70%,85% 65%,
0 0,0 0,
60% 50%,30% 60%;
}

50%{
background-position:
22% 32%,68% 42%,43% 68%,82% 63%,
20px 30px,-30px 20px,
58% 52%,33% 57%;
}

100%{
background-position:
18% 28%,72% 38%,38% 72%,88% 67%,
40px 60px,-60px 40px,
63% 48%,28% 63%;
}

}

@keyframes brainPulse{

0%{
opacity:.65;
filter:blur(.4px);
}

50%{
opacity:.9;
filter:blur(.2px);
}

100%{
opacity:.75;
filter:blur(.5px);
}

}
/* CONTENEDOR TESTS */

.tabla-tests{
width:450px;
margin:20px auto;
padding:10px;
background:#1e1e1e;
color:#e6e6e6;
font-family:Georgia,"Times New Roman",serif;
line-height:1.6;
}

.tabla-tests h3{
color:#c7b6ff;
font-weight:normal;
margin-top:0;
}

.linea-neuronal{
height:2px;
margin:6px 0 14px 0;
background:linear-gradient(90deg,#4b2cff,#a855f7,#4b2cff);
background-size:200% 100%;
box-shadow:0 0 6px #7a4cff;
animation:flujoNeuronal 6s linear infinite;
}

@keyframes flujoNeuronal{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.columnas{
display:flex;
gap:20px;
}

.col{
width:50%;
}

.col h4{
color:#e0d4ff;
font-weight:normal;
margin-bottom:8px;
}

.col ul{
padding-left:18px;
}

img{
max-width:100%;
height:auto;
}

/* ============================= */
/* COLAPSO BASE */
/* ============================= */

.genetica ul ul{
  max-height:0;
  overflow:hidden;
  opacity:0;

  transition:
    max-height .4s ease,
    opacity .3s ease;
}

/* ============================= */
/* EXPANSIÓN POR SENTIDO */
/* ============================= */

/* desarrollo abre nivel 2 */

#des:target ~ .genetica a[href="#des"] + ul,
#b1:target ~ .genetica a[href="#des"] + ul,
#b11:target ~ .genetica a[href="#des"] + ul,
#b111:target ~ .genetica a[href="#des"] + ul,
#b112:target ~ .genetica a[href="#des"] + ul,
#b113:target ~ .genetica a[href="#des"] + ul,
#b2:target ~ .genetica a[href="#des"] + ul{

  max-height:500px;
  opacity:1;
}

/* b1 abre nivel 3 */

#b1:target ~ .genetica a[href="#b1"] + ul,
#b11:target ~ .genetica a[href="#b1"] + ul,
#b111:target ~ .genetica a[href="#b1"] + ul,
#b112:target ~ .genetica a[href="#b1"] + ul,
#b113:target ~ .genetica a[href="#b1"] + ul{

  max-height:400px;
  opacity:1;
}

/* b11 abre nivel 4 */

#b11:target ~ .genetica a[href="#b11"] + ul,
#b111:target ~ .genetica a[href="#b11"] + ul,
#b112:target ~ .genetica a[href="#b11"] + ul,
#b113:target ~ .genetica a[href="#b11"] + ul{

  max-height:300px;
  opacity:1;
}

/* ============================= */
/* ACTIVO */
/* ============================= */

#pro:target ~ .genetica a[href="#pro"],
#intro:target ~ .genetica a[href="#intro"],
#des:target ~ .genetica a[href="#des"],
#b1:target ~ .genetica a[href="#b1"],
#b11:target ~ .genetica a[href="#b11"],
#b111:target ~ .genetica a[href="#b111"],
#b112:target ~ .genetica a[href="#b112"],
#b113:target ~ .genetica a[href="#b113"],
#b2:target ~ .genetica a[href="#b2"],
#con:target ~ .genetica a[href="#con"],
#jui:target ~ .genetica a[href="#jui"],
#bi:target ~ .genetica a[href="#bi"]{

  color:#fff3c0;
  text-shadow:0 0 8px rgba(214,184,92,0.9);
}

/* ============================= */
/* BASE */
/* ============================= */

.genetica ul ul{
  max-height:0;
  overflow:hidden;
  opacity:0;

  transition:
    max-height .4s ease,
    opacity .3s ease;
}

/* ============================= */
/* MEMORIA TENUE */
/* ============================= */

.genetica a{
  opacity:.45;
  transition:.25s;
}

.genetica a:hover{
  opacity:1;
}

/* ============================= */
/* ACTIVO */
/* ============================= */

#pro:target ~ .genetica a[href="#pro"],
#intro:target ~ .genetica a[href="#intro"],
#des:target ~ .genetica a[href="#des"],
#b1:target ~ .genetica a[href="#b1"],
#b11:target ~ .genetica a[href="#b11"],
#b111:target ~ .genetica a[href="#b111"],
#b112:target ~ .genetica a[href="#b112"],
#b113:target ~ .genetica a[href="#b113"],
#b2:target ~ .genetica a[href="#b2"],
#con:target ~ .genetica a[href="#con"],
#jui:target ~ .genetica a[href="#jui"],
#bi:target ~ .genetica a[href="#bi"]{

  opacity:1;

  color:#fff3c0;

  text-shadow:
    0 0 6px rgba(214,184,92,0.9),
    0 0 12px rgba(214,184,92,0.6);

  transform:translateX(4px);
}

/* ============================= */
/* EXPANSIÓN INTELIGENTE */
/* ============================= */

/* abre DESARROLLO */

#des:target ~ .genetica a[href="#des"] + ul,
#b1:target ~ .genetica a[href="#des"] + ul,
#b11:target ~ .genetica a[href="#des"] + ul,
#b111:target ~ .genetica a[href="#des"] + ul,
#b112:target ~ .genetica a[href="#des"] + ul,
#b113:target ~ .genetica a[href="#des"] + ul,
#b2:target ~ .genetica a[href="#des"] + ul{

  max-height:500px;
  opacity:1;
}

/* abre B1 */

#b1:target ~ .genetica a[href="#b1"] + ul,
#b11:target ~ .genetica a[href="#b1"] + ul,
#b111:target ~ .genetica a[href="#b1"] + ul,
#b112:target ~ .genetica a[href="#b1"] + ul,
#b113:target ~ .genetica a[href="#b1"] + ul{

  max-height:400px;
  opacity:1;
}

/* abre B11 */

#b11:target ~ .genetica a[href="#b11"] + ul,
#b111:target ~ .genetica a[href="#b11"] + ul,
#b112:target ~ .genetica a[href="#b11"] + ul,
#b113:target ~ .genetica a[href="#b11"] + ul{

  max-height:300px;
  opacity:1;
}

/* ============================= */
/* PULSO SUAVE (ILLEX) */
/* ============================= */

#pro:target ~ .genetica a[href="#pro"],
#intro:target ~ .genetica a[href="#intro"],
#des:target ~ .genetica a[href="#des"],
#b1:target ~ .genetica a[href="#b1"],
#b11:target ~ .genetica a[href="#b11"]{

  animation:illexPulse 1.6s ease-in-out infinite;
}

@keyframes illexPulse{
  0%{ text-shadow:0 0 6px rgba(214,184,92,0.6); }
  50%{ text-shadow:0 0 14px rgba(214,184,92,1); }
  100%{ text-shadow:0 0 6px rgba(214,184,92,0.6); }
}
.modo-libro h2{
  margin-top:32px;
}

/* FIX PORTADA MENÚ */
.modo-libro #header{
  float:none;
  margin:0;
}

/* ============================= */
/* FIX SUPERPOSICIÓN MENÚ */
/* ============================= */

td{
  position:relative;
  z-index:1;
}

.modo-libro{
  position:relative;
  z-index:10;
}

#header{
  position:relative;
  z-index:9999;
}

.nav ul{
  z-index:10000;
}

/* SOLO afecta esta página */

.modo-libro .nav ul{
  left:auto;
  right:100%;
}

.lista-piaget{
  padding-left:100px;
  line-height:1.6;
}
.lista-piaget li{
  margin-bottom:6px;
}

 .btnadultos-nav img{
      transition: filter 0.25s ease, transform 0.25s ease;
    }

    .btnadultos-nav:hover img{
      filter:
        brightness(1.2)
        drop-shadow(0 0 4px rgba(214,184,92,0.6))
        drop-shadow(0 0 8px rgba(214,184,92,0.4));
      transform: translateY(-1px);
    }

    .btnadultos-nav:active img{
      transform: translateY(0px);
      filter:
        brightness(1.1)
        drop-shadow(0 0 3px rgba(214,184,92,0.5));
    }