/* Por Adrián L. G. P. */

/* ========================================================= */
/* PRINCIPAL */

*{margin: 0; padding: 0; box-sizing: border-box; font-family: Arial; scroll-behavior: smooth;}
html, body{font-family: Arial; height: 100%; -webkit-user-select: none; user-select: none; overflow-x: hidden; background-color: #222523;}
a{text-decoration: none;}

p a::selection{text-decoration: underline;}

::-webkit-scrollbar{width: 5px; opacity: 100%; background-color: #222523;}
::-webkit-scrollbar-track{box-shadow: 0 0 5% black; transition: 0.5s; background-color: #222523;}
::-webkit-scrollbar-thumb{background-color: #555; transition: all 0.4s;}
::-webkit-scrollbar-thumb:hover{background-color: #666;}

/* ========================================================= */
/* FUENTES */

@font-face{font-family: "Oswald"; src: url("../fuentes/Oswald.ttf");}
@font-face{font-family: "Smoch"; src: url("../fuentes/SmoochSans-VariableFont_wght.ttf");}

/* ========================================================= */
/* NAV BAR */

.menu_bar{position: relative; background-color: #222523; height: 50px; width: 100%; max-width: 1500px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 5%; position: -webkit-sticky; position: sticky; top: 0; z-index: 9999;}
.menu_bar ul{list-style: none; display: flex;}
.menu_bar .logo a, .logo a span{font-size: 25px; font-family: "Smoch" !important;}
.menu_bar ul li{padding: 0 10px 0 10px;}
.menu_bar ul li a{color: white; text-decoration: none; font-size: 16px; padding: 0 5px 0 5px; cursor: pointer;}
.menu_bar ul li a.actual{color: #7cfb2d;}
.menu_bar ul li a:hover{text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #7cfb2d;}
.menu_bar .logo{color: white; font-size: 20px; text-align: center; padding-left: 0%; margin-left: 0%;}
.menu_bar .logo a{text-decoration: none; color: white;}
.menu_bar .logo span{color: #7cfb2d; transition: all .5s; cursor: pointer;}
.menu_bar .logo:hover:not(.nohover) span:not(.menu_toggle){color: white; text-decoration: underline;}

.menu_toggle{display: none;}
.menu_bar_activo{backdrop-filter: blur(10px); background-color: rgba(34, 37, 35, 0.7);}

/* ========================================================= */
/* BODY */

.fondo{min-height: 100vh; margin: 0 auto; max-width: 1500px; padding-bottom: 30px; background-color: #222523; background-size: cover; background-repeat: no-repeat; align-items: center; background-position: center; justify-content: center;}
.fondo p{color: white; text-align: center; padding-bottom: 25px; font-size: 20px;}

.fondo h2{font-family: "Smoch"; color: white; max-width: 100%; min-width: 50%; text-align: center; padding: 10px 0px 20px 0px; font-size: 70px;}
.fondo h2 span{color: #7cfb2d; font-family: "Smoch";}

.fondo-img{padding-top: 80px; text-align: center;}
.fondo-img img{height: 250px; width: 250px; border-radius: 19px; user-select: none;}

.fondo-imagenes{display: flex; flex-wrap: wrap; justify-content: center; margin-top: 14px;}
.fondo-imagenes a{display: inline-block; padding: 4px; border-radius: 10px; transition: transform 0.3s cubic-bezier(0.2, 1.3, 0.3, 1); border: 2px solid transparent;}
.fondo-imagenes img{width: 30px; height: 28px; transition: transform 0.3s ease; filter: invert();}
.fondo-imagenes .HoverParaEnseñar{position: relative; text-align: center;}
.fondo-imagenes *{transition: all .5s;}

.fondo-imagenes .HoverParaEnseñar:hover{transform: translateY(-5px); border-color: #7cfb2d;}
.fondo-imagenes .HoverParaEnseñar:hover a{transform: translateY(-5px); border-color: #7cfb2d;}
.fondo-imagenes .HoverParaEnseñar a img{vertical-align: middle;}

.fondo-imagenes .HoverParaEnseñar p{position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; color: #7cfb2d; text-align: center; opacity: 0; transition: opacity 0.3s ease; visibility: hidden;}
.fondo-imagenes .HoverParaEnseñar:hover p{opacity: 1; visibility: visible; transform: translateY(1px) translateX(-50%);}

/* ========================================================= */
/* PROYECTOS */

.projects-title{font-size: 36px; margin-bottom: 20px; padding-top: 20px; color: white; position: relative; display: inline-block;color: #58a926;} 

.ProyectosInfoAvanzada{min-height: 100vh; margin: 0 auto; max-width: 1500px;}

.ProyectosInfoAvanzada .ProyectoDIV{margin-left: 5vw; margin-right: 5vw; text-align: left; display: flex; min-height: 300px; align-items: center;}
.ProyectosInfoAvanzada .ImgA{margin-top: 20px; display: flex; flex-wrap: wrap;}
.ProyectosInfoAvanzada .ImgA a{display: inline-block; margin-right: 20px;}
.ProyectosInfoAvanzada .contenidoProyecto{width: 70%; padding-right: 20px;}
.ProyectosInfoAvanzada .contenidoProyecto p{user-select: text; color: white;}
.ProyectosInfoAvanzada .logoProyecto{width: 30%; text-align: center;}

.ProyectosInfoAvanzada .logoProyecto .a1{background-color: #222523; border-top: 3px solid #7cfb2d !important; user-select: text;}
.ProyectosInfoAvanzada .logoProyecto .a12{background-color: #222523; user-select: text;}

.ProyectosInfoAvanzada .logoProyecto .a1, .ProyectosInfoAvanzada .logoProyecto .a1 div{border: .5px solid gray;}
.ProyectosInfoAvanzada .logoProyecto .a1 div{padding: 20px;}
.ProyectosInfoAvanzada .logoProyecto .a1 *{color: white;}

.ProyectosInfoAvanzada .logoProyecto .a12 p{color: rgb(228, 196, 196);}
.ProyectosInfoAvanzada .logoProyecto .a12 .codigo{user-select: text; background-color: #7cfb2d; color: black !important; display: inline-block; padding: 10px 20px; margin-top: 10px; margin-bottom: 10px; border: .5px solid #222523; border-radius: 5px;}
.ProyectosInfoAvanzada .logoProyecto .a12 .codigo::selection{background-color: #58a926; color: black;}

.ProyectosInfoAvanzada .logoProyecto .a12 a{background-color: #7cfb2d; user-select: none; color: black !important; display: inline-block; padding: 10px 20px; margin-top: 10px; margin-bottom: 10px; border: .5px solid #222523; border-radius: 5px;}
.ProyectosInfoAvanzada .logoProyecto .a12 a:hover{background-color: #58a926; border: .5px solid gray; cursor: pointer;}
.ProyectosInfoAvanzada .logoProyecto .a13 p{user-select: text;}
.ProyectosInfoAvanzada .logoProyecto .a13 a{color: #7cfb2d;}
.ProyectosInfoAvanzada .logoProyecto .a13 a:hover{text-decoration: underline;}

.ProyectosInfoAvanzada .contenidoProyecto h2{font-size: 25px; margin-bottom: 20px; padding-top: 20px; display: inline-block; color: rgba(167, 255, 112, 0.5);}
.ProyectosInfoAvanzada .contenidoProyecto h2:hover{text-decoration: underline; text-underline-offset: 10px; text-decoration-color: #7cfb2d;}

@media screen and (max-width: 600px) {
  .ProyectosInfoAvanzada .ImgA{justify-content: center;}
  .ProyectosInfoAvanzada .ImgA a{margin-top: 10px;}
}

@media screen and (max-width: 1000px) {
  .ProyectoDIV{display: block !important; height: 100% !important;}
  .ProyectosInfoAvanzada .contenidoProyecto{width: 100%; padding-right: 0px;}
  .ProyectosInfoAvanzada .logoProyecto{width: 100%; margin-top: 50px; margin-bottom: 20px;}
}

/* ========================================================= */
/* TRADUCTOR */

.gt_white_content{background-color: black !important; border-radius: 20px; border: 2px solid #7cfb2d; height: fit-content !important;}
.gt_white_content::-webkit-scrollbar{display: none;}
.gt_white_content a{border-bottom: 0px black !important;}
.gtranslate_wrapper a{color: white !important;}
.gt_black_overlay{background-color: black !important; opacity: 0.9 !important;}

/* ========================================================= */
/* PRIVACIDAD */

.privacy{padding: 20px; min-height: 100vh; margin: 0 auto; max-width: 1500px}
.privacy h1, h2{color: white; margin-top: 0; margin-bottom: 10px;}
.privacy h1{color: #58a926;}
.privacy p{font-size: 16px; line-height: 1.5; margin-bottom: 20px; color: rgb(228, 196, 196); text-align: justify; user-select: text;}
.privacy a{color: #7cfb2d; text-decoration: none; transition: all .4s;}
.privacy a:hover{border-bottom: 1px solid #7cfb2d;}
.privacy br{user-select: none;}
.privacy span.fecha{color: #7cfb2d;}

/* ========================================================= */
/* CONTACTO */

.ContactoP{user-select: text; color: rgb(228, 196, 196); margin-bottom: 50px; margin-left: 20px; margin-right: 20px;}
.ContactoP span{color: #7cfb2d; user-select: all;}
.ContactoP a{color: #7cfb2d; text-decoration: none; transition: all .4s; user-select: text;}
.ContactoP a:hover{border-bottom: 1px solid #7cfb2d;}

.DivPrincipal .objectDIV{margin-bottom: 50px;}
.DivPrincipal object{display: block; justify-content: center !important; color: white !important; border: .5px solid gray; border-top: 3px solid #7cfb2d !important; background-color: #222523; width: 500px; height: 400px; margin: 0 auto;}

.ParrotOSLink{display: flex; border: 1px solid #7cfb2d; display: inline-block; border-radius: 20px; color: white; }
.ParrotOSLink span{padding: 10px; display: inline-block;}
.ParrotOSLink .span2{background-color: #7cfb2d; border-left: 1px solid #7cfb2d; border-bottom-right-radius: 20px; border-top-right-radius: 20px; color: black; font-weight: bold;}

.ParrotOSLink:hover .span2{background-color: #222523; border-left: 1px solid gray; color: #7cfb2d;}

.ContactoDivPrincipal h2{padding: 0; margin-bottom: 20px;}
.ContactoDivPrincipal h2.primero{margin-top: 20px;}

/* ========================================================= */
/* GUÍA */

.DivPrincipal{text-align: center; min-height: 100vh; margin: 0 auto; max-width: 1500px;}
.BlogEntradas{margin: 20px; display: flex; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0;}

.BlogEntradas a{margin: 10px; position: relative; display: inline-block; overflow: hidden;}
.BlogEntradas a .Entrada{background-color: #222523; color: white; min-height: 150px; width: 320px; transition: all .5s; border: 1px solid gray; border-top: none; position: relative; overflow: hidden;}

.BlogEntradas a .Entrada.Color0{border-top: 3px solid gray;}
.BlogEntradas a .Entrada.Color1{border-top: 3px solid rgb(128, 128, 255);}
.BlogEntradas a .Entrada.Color2{border-top: 3px solid #7cfb2d;}

.BlogEntradas a .Entrada .SOBlog{max-width: 14px; transform: translateY(3px); transition: all .5s;}
.BlogEntradas a .Entrada div{display: flex; background-color: #222523; padding: 20px; border-bottom: 1px solid gray;}
.BlogEntradas a .Entrada div h3{width: 70%; text-align: left;}
.BlogEntradas a .Entrada div p{width: 30%; transition: all .5s; text-align: right; vertical-align: middle;}
.BlogEntradas a .Entrada p:not(.Entrada div p){text-align: left; padding: 20px;}
.BlogEntradas .Color0 div p, .BlogEntradas .Color1 div p, .BlogEntradas .Color2 div p{transition: none !important;}

.BlogEntradas .Color0:hover div p{color: transparent !important; position: relative;}
.BlogEntradas .Color1:hover div p{color: transparent !important; position: relative;}
.BlogEntradas .Color2:hover div p{color: transparent !important; position: relative;}

.BlogEntradas a .Color0:hover div p::after{content: "Redes"; position: absolute; right: 0; top: 0; color: gray !important;}
.BlogEntradas a .Color1:hover div p::after{content: "S.M.R."; position: absolute; right: 0; top: 0; color: rgb(128, 128, 255) !important;}
.BlogEntradas a .Color2:hover div p::after{content: "A.S.I.R."; position: absolute; right: 0; top: 0; color: #7cfb2d !important;}

.GuiasBordeColores .Espaciador{margin-left: 20px;}
.GuiasBordeColores button{color: white; background-color: #222523; border-bottom: 1px solid #222523 !important; border: none; cursor: pointer; margin-right: 10px; font-size: 15px;}
.GuiasBordeColores button:hover{border-bottom: 1px solid #7cfb2d !important;}

.GuiasBordeColores .Color0{color: gray;}
.GuiasBordeColores .Color1{color: rgb(128, 128, 255);}
.GuiasBordeColores .Color2{color: #7cfb2d;}

.LinkEntrada::before{content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 3px; background: #222523; z-index: 10;}
.LinkEntrada:hover::before{animation: bordeAnim 0.8s forwards;}

@keyframes bordeAnim{0%{left:-100%;} 50%{left:0;} 100%{left:100%;}}

/* ========================================================= */
/* FOOTER */

footer{padding: 30px; text-align: center; color: white; position: relative; max-width: 1500px; margin: 0 auto;}
footer::before{content: ""; position: absolute; top: 0; left: 50px; right: 50px; height: 1px; background-color: #7cfb2d;}
.footer-content{max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}

.footer-left{text-align: left;}
.footer-left h3{margin-bottom: 10px; font-size: 30px; color: white; font-family: "Smoch";}
.footer-left h3 span{color: #7cfb2d; font-family: "Smoch";}
.footer-links ul{list-style: none; margin: 0; padding: 0;}
.footer-links li{margin-bottom: 10px;}

.footer-left p *{vertical-align: middle;}

.footer-links ul li a{color: white;} 
.footer-links ul li a.actual{color: #7cfb2d;} 
.footer-links ul li a:hover{text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #7cfb2d;}

footer .cloudflare-logo img{height: 1em; vertical-align: middle;}

/* ========================================================= */
/* @MEDIA */

@media screen and (max-width: 768px){
  /* SCROLLBAR */
  *{scrollbar-width: none !important;}
  /* GUÍAS */
  .BlogEntradas*{transition: all .5s ease-in-out;}
  .BlogEntradas a .Entrada{width: 80vw; min-height: 100% !important;}
  .BlogEntradas a .Entrada div p{width: 30%; transition: all .5s; text-align: right;}

  /* FOOTER */
  footer{background-color: #222523; padding: 30px; width: 100%; text-align: center; color: white; justify-content: center; text-align: center;}
  .footer-content{max-width: 1200px; margin: 0 auto; display: block; flex-wrap: wrap; justify-content: space-between; align-items: center;}
  .footer-left{text-align: center;}
  .footer-left p{margin-bottom: 20px;}
}

@media screen and (max-width: 500px){
  .menu_toggle{display: block;}
  .menu_bar ul{display: none; flex-direction: column; width: 100%; text-align: center; border-top: 1px solid gray; background-color: #222523; position: absolute; top: 50px; left: 0; z-index: 10000; overflow-y: auto; max-height: 100vh;}
  .menu_bar ul li{border: 1px solid gray; border-top: none;}

  .menu_bar ul li:hover{background-color: #555;}
  .menu_bar ul li a{padding: 20px 0 20px 0; display: block;}
  .menu_bar.active ul{display: flex;}
  .menu_bar .logo{flex: 1; display: flex; justify-content: space-between; align-items: center;}

  /* CONTACTO */
  .DivPrincipal object{width: 100%; min-height: 300px;}
}

@media screen and (max-width: 350px){
  /* GUÍAS */
  .BlogEntradas a .Entrada div{display: block;}
  .BlogEntradas a .Entrada div h3{width: 100%; text-align: center; margin-bottom: 5px;}
  .BlogEntradas a .Entrada div p{width: 100%; text-align: center;}
  .BlogEntradas a .Entrada p{text-align: center !important;}
}

@media screen and (max-width: 200px){
  /* GUÍAS */
  .BlogEntradas a .Entrada div h3, .BlogEntradas a .Entrada div p, .BlogEntradas a .Entrada p{font-size: 10vw;}
  .BlogEntradas a .Entrada p{word-break: break-all;}
  .ocultarMOVIL{display: none;}
}

/* ========================================================= */