:root {--naranja:#cb5400; --naranja-cc:#cb5400cc;--morado:#6963a3;--blanco:#e1e1ed}
body {  font-family: "Roboto Flex", sans-serif;text-align:justify}
*{text-decoration:none;margin:0}
h1,h2,h3,h4{font-family: "Allerta", sans-serif;color:var(--morado);font-variant:small-caps}

/* Estilo base para el menú */
.menu ul {list-style:none;margin:0;padding:0;}
.menu ul ul a{color:#fff}
.menu > ul > li  > a {line-height:60px;color:#fff;font-weight:700;font-size:18px;text-shadow:0 0 5px #000;padding:10px}
.menu ul li > a {display:inline-block;transition:transform 0.2s cubic-bezier(.4,0,.2,1), color 0.2s;}
.menu ul li > a:hover,.menu ul li > a:focus {transform: scale(1.07);}



.menu ul li {position:relative;display:inline-block;padding: 10px 15px;cursor: pointer;}
.menu ul li ul {opacity:0;visibility:hidden;position:absolute;left:0;top:80%;z-index:1000;background:#fff;min-width:180px;
                transform: translateY(10px) scaleY(0.98);transition: opacity 0.25s cubic-bezier(.4,0,.2,1), transform 0.25s cubic-bezier(.4,0,.2,1), visibility 0s linear 0.25s;
                box-shadow: 0 4px 12px rgba(0,0,0,0.08);}

.menu ul li:hover > ul,.menu ul li:focus-within > ul {opacity:1;visibility:visible;transform:translateY(0) scaleY(1);transition-delay:0s, 0s, 0s;}
.menu ul li ul li {display:block;padding:10px 15px;white-space:nowrap;background-color:var(--naranja-cc);}
.menu ul li ul li:hover {background-color:var(--naranja);}
.menu ul li:hover ul {display:block;}





.menu{height:100px}
.header{display:grid;grid-template-columns:1fr auto 1fr;width:1200px;margin:auto}
.header::before{background: linear-gradient(180deg, #000000cc 0%, rgba(196, 196, 196, 0) 100%);
    position:absolute;left:0;content:'';width:100%;height:196px;z-index: -1;}
.logo{background:url(logo.png) center center no-repeat;width:100px;height:100px;background-size:contain;}

.content{width:1200px;margin:auto}
.titular{position:absolute;top:20vh;width:600px}
.titular h1{background:var(--morado);padding:10px 20px;color:var(--blanco)}
.titular .subtexto{background:var(--naranja-cc);color:#FFF;padding:40px 20px}


.hero{display:flex;width:100%;height:45vh;z-index:-2}
.hero .img{background-image:url("portada/dni-defensa-de-los-ninos-hero-ninos-acostados-jugando.jpg");
           width:100%;height:50vh;top:0;position:absolute;z-index:-2;background-size:cover;background-position:center center}

.page{line-height:150%;letter-spacing:1px}
.page p{margin:24px 0}


.page .colDos{display:grid;grid-template-columns:1fr 20px 1fr; grid-gap:10px 10px;}

.footer{height:400px;background:#000;width:100%;display:block;display:grid;grid-template-columns:1fr 1200px 1fr;padding:20px 0;margin-top:60px}
.footer .footlinks{display:grid;grid-template-columns:1fr 1fr 1fr;color:#fff}
.footer .footlinks a{color:#fff}
.footer .footlinks p{line-height:150%;letter-spacing:1px}
.footer .footlinks svg{margin:0 10px}
.footer .footlinks h2{margin:16px 0}
.footer .linkrs{font-size:24px;margin:0}


.page h2 {opacity:0;transform:translateY(30px);animation:floatIn 1s cubic-bezier(.4,0,.2,1) forwards;animation-delay: 0.1s;}
.page p {opacity:0;transform:translateY(30px);animation:floatIn 1s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes floatIn {to{opacity:1;transform:translateY(0);}}


.page p:nth-of-type(1)  { animation-delay: 0.1s; }
.page p:nth-of-type(2)  { animation-delay: 0.3s; }
.page p:nth-of-type(3)  { animation-delay: 0.5s; }
.page p:nth-of-type(4)  { animation-delay: 0.7s; }
.page p:nth-of-type(5)  { animation-delay: 0.9s; }
.page p:nth-of-type(6)  { animation-delay: 1.1s; }
.page p:nth-of-type(7)  { animation-delay: 1.3s; }
.page p:nth-of-type(8)  { animation-delay: 1.5s; }
.page p:nth-of-type(9)  { animation-delay: 1.7s; }
.page p:nth-of-type(10) { animation-delay: 1.9s; }
.page p:nth-of-type(11) { animation-delay: 2.1s; }
.page p:nth-of-type(12) { animation-delay: 2.3s; }
.page p:nth-of-type(13) { animation-delay: 2.5s; }
.page p:nth-of-type(14) { animation-delay: 2.7s; }
.page p:nth-of-type(15) { animation-delay: 2.9s; }
.page p:nth-of-type(16) { animation-delay: 3.1s; }
.page p:nth-of-type(17) { animation-delay: 3.3s; }
.page p:nth-of-type(18) { animation-delay: 3.5s; }
.page p:nth-of-type(19) { animation-delay: 3.7s; }
.page p:nth-of-type(20) { animation-delay: 3.9s; }
.page p:nth-of-type(21) { animation-delay: 4.1s; }
.page p:nth-of-type(22) { animation-delay: 4.3s; }
.page p:nth-of-type(23) { animation-delay: 4.5s; }
.page p:nth-of-type(24) { animation-delay: 4.7s; }
.page p:nth-of-type(25) { animation-delay: 4.9s; }
.page p:nth-of-type(26) { animation-delay: 5.1s; }
.page p:nth-of-type(27) { animation-delay: 5.3s; }
.page p:nth-of-type(28) { animation-delay: 5.5s; }
.page p:nth-of-type(29) { animation-delay: 5.7s; }
.page p:nth-of-type(30) { animation-delay: 5.9s; }