/* ------------------------------------------------ GENERAL ------------------------------------------------ */

*{font-family: "RobotoA", "Arial"; margin: 0; padding: 0; scroll-behavior: smooth;}
h2, h3{font-family: "RobotoA", "Arial";}
::selection{background-color: rgb(60, 60, 60); color: white;}
h2:not(.FAQH2 h2, .parte1 h2).add-after{color: rgb(147, 147, 247) !important;}
h2:not(.PreguntaPRODUC h2, .parte1 h2).add-after::after{background-color: rgba(255, 255, 255, 0.3) !important; z-index: 60 !important;}
br{user-select: none;}
[id]{scroll-margin-top: 70px;}

/* ------------------------------------------------ FUENTES ------------------------------------------------ */

/* Fuentes por fonts.google.com */
@font-face{font-family: "Tiny5"; src: url("Fuentes/Tiny5-Regular.ttf");}
@font-face{font-family: "RobotoA"; src: url("Fuentes/Roboto-Regular.ttf");}
@font-face{font-family: "JosefinSans"; src: url("Fuentes/JosefinSans-Italic.ttf");}

/* ------------------------------------------------- INDICE ------------------------------------------------ */

.IndiceGlobal{text-align: center; margin-top: 50px; margin: 50px 10% 0 10% 0 !important; user-select: none;}
.IndiceGlobal h2{margin-bottom: 15px !important;}
.IndiceGlobal a{display: inline-block; margin-top: 5px; text-align: center; background-color: black; color: white; font-weight: bold; text-decoration: none; padding: 5px 15px; transition: all .5s;}
.IndiceGlobal a:hover{background-color: blue; border-radius: 20px;}

/* ----------------------------------------------- SCROLLBAR ----------------------------------------------- */

::-webkit-scrollbar{width: 5px; opacity: 100%; background-color: rgb(36,36,36);}
::-webkit-scrollbar-track{box-shadow: 0 0 5% black; transition: 0.5s;}
::-webkit-scrollbar-thumb{background-color: rgba(147, 147, 247, 0.2);}
::-webkit-scrollbar-thumb:hover{background: rgb(147, 147, 247); transition: 0.4s; border-radius: 50px;}

/* -------------------------------------------------- MENÚ -------------------------------------------------- */
  
/* Principal */
.menú{background-color: #007bff; display: flex; justify-content: space-between; position: sticky; top: 0; height: 60px; transform: translateY(-1px); justify-content: center; z-index: 999; background-image: linear-gradient(to bottom, rgb(36,36,36), rgb(40, 40, 40), rgb(60, 60, 60), rgb(80, 80, 80), white, white); background-color: white;}
.MenúFIX{height: 2px; background-color: rgb(36,36,36);}

/* Logo */
.menú .logo{vertical-align: middle; padding: 20px !important; background-color: rgb(36,36,36); border-bottom-left-radius: 15px;; display: flex;}
.menú .logo img{width: 40px; height: 40px; border-radius: 5px; margin: -10px; user-select: none; transition: all .5s;}
.menú .logo img:hover{transform: scale(0.9) rotate(10deg);}
.menú .logo h1{transform: translateY(-2.2px); font-size: 20px; color: white; position: sticky; font-family: "Tiny5"; margin-left: 20px; user-select: none; display: none; justify-content: center; vertical-align: middle;}
.menú .logo h1 span{color: blue; font-family: "Tiny5";}

/* Elementos de la lista */
.menú div ul{display: flex; align-items: center; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; margin-right: 10px; background-color: rgb(36,36,36); border-bottom-right-radius: 15px;}
.menú div ul a{text-decoration: none; color: white; user-select: none; height: 100%; display: flex; align-items: center; padding: 0;}
.menú div ul a li, .menú div ul a span{padding: 0 15px; display: flex; align-items: center; height: 100%;}
.menú div ul a li:hover, .menú div ul a span:hover{background-color: gray;}
.menú div ul a li.LiUltMenu2:hover{border-bottom-right-radius: 20px;}

/* Cambiar el menú a llegar a top: 0; */
.menú.active{background-color: rgb(36,36,36); justify-content: space-between; background-image: none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
.menú.active .logo h1{display: inline;}
.menú.active div ul a li.LiUltMenu1:hover{border-bottom-left-radius: 0px;}

/* Qúe hacer cuando el botón de menú se hace click */
.menú div ul a.menucc{display: none;}
.menú div ul.active a li, .menú div ul.active a span{display: block; padding: 20px; color: white; border: 1px solid rgb(174, 174, 255) !important; background-color: rgb(36,36,36); width: 100%; height: min-content;}
.menú div ul.active{height: 100vh; overflow: auto;}
.menú div ul.active a.menucc{width: calc(100% - 42px);}
.menú div ul.active a{height: min-content; margin: 0;}
.menú div ul.active a span.ModoOscuroClass{margin: 0; height: min-content;}
.menú div ul.active{display: block; background-color: rgb(36,36,36); position: absolute; top: 0; left: 0;}

/* ------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------- */
/* PÁGINA "ClaveGratuita.html" y "aviso.html" */

/* Principal */
.ClaveGratuitaBody{display: flex; justify-content: center; align-items: center; height: 100vh;}
.ClaveGratuita{margin: 0 auto; border: 1px solid; padding: 10%; border-radius: 30px;}
.ClaveGratuitaLogo{position: absolute; text-align: center; bottom: 0; margin: 0 20px 20px 0; text-decoration: none; color: white;}
.ClaveGratuitaLogo h2:not(.ClaveGratuitaLogo h2 span){font-family: "Tiny5"; color: white !important;}
.ClaveGratuitaLogo span{font-family: "Tiny5"; color: blue; transition: all .5s;}
.ClaveGratuitaLogo:hover h2 span{color: #007bff !important;}

/* Qué hacer cuando se superponga el logo */
@media (max-width: 700px) {
    .ClaveGratuitaBody{display: block; margin-top: 10%;}
    .ClaveGratuitaLogo{position: inherit; margin-top: 10%;}
}

/* ------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------- */
/* PÁGINA "Extensión.html" */

/* Botón de Añadir a Chrome */
.AnadirChrome{padding: 1px 7px;; border: 1px solid blue; border-radius: 20px; font-weight: bold; background-color: blue; color: white; font-size: 15px; user-select: none;}

/* 2 Columnas */
.ExtensionDuo{display: flex; margin-top: 30px;}
.ExtensionDuo .divv1{width: 70%;}
.ExtensionDuo .divv1 img{width: 200px !important; transition: all .5s; background-color: rgba(62, 62, 62, 0.05); border-radius: 10px;}
.ExtensionDuo .divv1 img:hover{background-color: rgba(62, 62, 62, 0.1);}
.ExtensionDuo .prevzimg:hover{filter: none !important;}
.ExtensionDuo .divv2{width: 30%; align-items: center; display: flex;}
.ExtensionDuo .divv2 img{width: 55%;}
.prevz p span:not(.AnadirChrome), .prevz p b{color: rgb(141, 141, 216) !important;}
.TecnologíasExtensión{display: flex; flex-wrap: wrap; justify-content: center; margin-top: 20px; height: 70px;}
.TecnologíasExtensión img{height: 50px; margin: 0 10px 0 10px; transition: all .5s;}
.TecnologíasExtensión img:hover{height: 60px;}

@media (max-width: 768px) {
    .giff{width: 100% !important;}
    .muestraa{width: 30% !important;}
    .ExtensionDuo{display: block; margin-top: 30px;}
    .ExtensionDuo .divv1{width: 100%;}
    .ExtensionDuo .divv2{width: 100%; justify-content: center;}
    .ExtensionDuo .divv2 img{width: 40% !important;}
}

/* ------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------- */
/* PÁGINA "index.html" */

/* ------------------------------------------------ PARTE 1 ------------------------------------------------ */

/* El contenido del primer bloque en index.html */
.parte1{position: relative; background-repeat: no-repeat; background-color: #232323 !important; background-size: cover; background-image: url("Img/Fondos/FondoParte1.jpg"); background-attachment: fixed; min-height: 100vh; color: white; display: flex; align-items: center; justify-content: center;}
.parte1 h1{text-align: center; font-family: "Tiny5"; font-size: 80px; user-select: none; letter-spacing: -9px; margin-top: 50px;}
.parte1 h1 span{display: inline-block; transition: transform 0.5s ease-in-out; font-family: "Tiny5"; border-bottom: 2px solid rgba(255,255,255,0);}
.azul{color: blue;}
.parte1 .contenidopt1{display: grid;}
.parte1 .Significado1{font-size: 25px; margin-top: 20px;}
.parte1 h2{text-align: center; font-size: 30px;}
.parte1 .botones{text-align: center; margin: 50px 0 20% 0 !important; user-select: none;}
.parte1 .botones a{z-index: 2 !important; border: 1px solid rgba(255, 255, 255, 0); padding: 9px; background-color: white; text-decoration: none; color: black; border-radius: 10px; user-select: none; transition: all .2s;}
.parte1 .botones a:hover{border: 1px solid white; background-color: rgba(255, 255, 255, 0); color: white;}
.parte1 .botonflecha{text-align: center; font-size: 30px; position: absolute; bottom: 2%; left: 0; right: 0; display: flex; justify-content: center;}
.parte1 .botonflecha div{text-align: center; width: 60px;}
.parte1 .botonflecha a{color: white !important; text-decoration: none; transition: all .3s; animation: flecha 1s infinite; display: block;}
.parte1 .botonflecha a:hover{color: rgb(147, 147, 247) !important; font-weight: bold;}

/* Anuncio antes de la barra de menú */
.AnuncioPt1{background-color: rgb(36,36,36); min-height: 50px; color: black; justify-content: center; text-align: center; display: flex; vertical-align: middle;}
.AnuncioPt1 p{z-index: 2 !important; margin: 0 10px 10px 10px; font-size: 20px; color: white; margin-top: 10px;}
.AnuncioPt1 p a{color: rgb(107, 107, 236); text-decoration: none; transition: all .5s;}
.AnuncioPt1 p span{font-size: 11px;}
.AnuncioPt1 p a:hover{color: rgb(141, 141, 216); text-decoration: underline;}

/* Animaciones */
@keyframes subirBajar {
    0%{ transform: translateY(0); border-bottom: 2px solid rgba(255,255,255,0); }
    50%{ transform: translateY(-20px); border-bottom: 2px solid #007bff; }
    100%{ transform: translateY(0); border-bottom: 2px solid rgba(255,255,255,0); }
}
@keyframes cambiarbordersignificado {
    0%{ border-bottom: 2px solid rgba(255,255,255,0); }
    50%{ border-bottom: 2px solid #007bff; }
    100%{ border-bottom: 2px solid rgba(255,255,255,0); }
}
@keyframes flecha {
    0%{transform: translateY(-5px);}
    50%{transform: translateY(5px);}
    100%{transform: translateY(-5px);}
}

/* ------------------------------------------------ PRUEBA ------------------------------------------------ */

.block{opacity: 0; transform: translateY(50px); transition: all 0.6s ease-out;}
.show{opacity: 1; transform: translateY(0);}

/* ----------------------------------------------- PARTE 1.9 ----------------------------------------------- */

/* El eslógan */
.parte19{margin: 0 auto;; padding: 50px; border-radius: 30px; z-index: -2; width: fit-content;}
.parte19 p{font-size: 22px; font-family: "JosefinSans"; }
.parte19 .Comillas{user-select: none; margin: 0 10px; font-style: normal;}

/* ------------------------------------------------ PARTE 2 ------------------------------------------------ */
/* Nuestra misión, visión y valores */

/* Principal */
.parte2{margin: 20px 10% 0 10%; display: flex; flex-wrap: wrap; background-color: white; padding: 50px; z-index: -2;}
.parte2 br{user-select: none;}
.parte2 .flex{display: flex; margin-bottom: 20px;}
.parte2 p{margin-bottom: 25px;}
.parte2 p, .parte2fix p{font-size: 19px;}
.parte2 p a{text-decoration: none; border-radius: 20px; padding: 1px 10px; white-space: nowrap; transition: all .5s; border-bottom: 3px solid blue; border-left: 3px solid blue; color: black;}
.parte2 p a:hover{border-radius: 0px;}

/* Separar la imágen del logo de la misión y visión */
.parte2 .flex{width: 100%;}
.parte2 .flex .div1{width: 80%;}
.parte2 .flex .div2{width: 20%;}
.parte2 .div2 img{max-width: 180px; margin-left: 50px; transition: .5s all; user-select: none; border-radius: 20px !important; position: sticky; top: 70px;}
.parte2 .div2 img:hover{transform: scale(1.05);}

/* Los subtítulos */
.parte2 h2{color: blue; font-size: 30px; position: relative; display: inline-block; margin: 0 0 25px 0; user-select: none;}
.parte2 h2::after{content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: rgb(36,36,36); transition: width 0.3s ease-out; display: inline-block;} 
.parte2 h2:hover::after{width: 100%; z-index: 10;}
.parte2 h3{font-size: 21px; margin-bottom: 10px; transition: all .3s; display: inline-block;}
.compromisos h3 span{color: rgb(147, 147, 247) !important; user-select: none; display: inline-block; margin-right: 10px; transition: transform 0.3s ease-in-out;}
.compromisos div *{transition: all .5s;}
.compromisos div:hover p{border-left: 2px solid rgb(147, 147, 247); padding-left: 20px;}
.compromisos div:hover h3{color: #007bff !important; font-size: 21px; margin-bottom: 10px;}
.compromisos div:hover h3 span{transform: translateX(-20px) !important;}

/* Poner imágenes antes de cada título */
.parte2 .h21::before{position: absolute; transform: translateX(-50px) translateY(2px); content: ""; display: inline-block; width: 35px; height: 35px; background-image: url('Img/Index/a.png'); background-size: cover; background-position: center;}
.parte2 .h22::before{position: absolute; transform: translateX(-50px) translateY(2px); content: ""; margin-right: 20px; display: inline-block; width: 35px; height: 35px; background-image: url('Img/Index/b.png'); background-size: cover; background-position: center;}
.parte2 .h23::before{position: absolute; transform: translateX(-50px) translateY(2px); content: ""; margin-right: 20px; display: inline-block; width: 35px; height: 35px; background-image: url('Img/Index/c.png'); background-size: cover; background-position: center;}

/* ------------------------------------------------ FOOTER ------------------------------------------------ */

/* Principal */
footer{background-image: url("Img/Fondos/FondoFooter.png"); filter: brightness(1.2); background-repeat: no-repeat; background-size: cover; height: 100% !important;}
footer div.ContenidoNoBotton{display: flex; flex-wrap: wrap; justify-content: space-between !important; padding: 50px;}
.FooterAviso a{color: rgb(107, 107, 236); text-decoration: none; transition: all .2s;}
.FooterAviso a:hover{color: rgb(141, 141, 216); text-decoration: underline;}
footer p{color: white; user-select: none;}
footer h2, footer br{user-select: none;}
footer *::selection{background-color: rgb(89, 89, 254); color: black;}

/* Parte izquierda del logo */
.footerlogo{text-align: center; vertical-align: middle; margin: 10px 30px;}
.footerlogo h1{font-family: "Tiny5"; color: white !important; font-size: 40px;}
.footerlogo h1 span{font-family: "Tiny5"; color: blue;}
.corazon::after{animation: .5s corazonfooter infinite !important; display: inline-block; content: "❤️";}
.FooterSeparación{padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid rgb(60, 60, 60);}
img.FooterIESjg{user-select: none;}

/* Listas de enlaces */
.footerlinks{display: flex; flex-wrap: wrap;}
.footerlinks ul{text-align: center; margin: 10px 30px;}
.footerlinks ul li{list-style-type: none; margin-top: 5px;}
.footerlinks ul li a{text-decoration: none; color: white; transition: all .2s;}
.footerlinks ul li a:hover{color: rgb(141, 141, 216); text-decoration: underline;}
.OcultarGrande{display: none;}

/* Después del footer */
.AfterFooter{color: white !important; text-align: center; font-family: "Tiny5"; color: white; font-size: 100px;}
.AfterFooter span{font-family: "Tiny5"; color: blue !important;}

/* Animaciones */
@keyframes corazonfooter {
    0% {font-size: 12px; padding: 0; content: "❤️";}
    50% {font-size: 10px; padding: 0 1.4px; content: "💙";}
    100% {font-size: 12px; padding: 0; content: "❤️";}
}

/* ------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------- */
/* PÁGINA "Descargar.html" */

/* Principal */
.BodyDESCARGAS h1:not(.menú h1){font-family: "Tiny5"; color: blue; font-size: 50px; text-align: center; margin-top: 20px; user-select: none;}
.contenidoDESC{min-height: 90vh; margin-top: 70px;}
.ProbarMV{color: blue;}

/* Advertencia de Necesidad de clave */
.advertenciaH2CLAVE{color: rgb(36,36,36); font-size: 17px; text-align: center; margin: 50px 0 0 0;}
.advertenciaH2CLAVE a{text-decoration: none; color: rgb(141, 141, 216) !important; text-decoration: underline; transition: all .2s;}
.advertenciaH2CLAVE a:hover{text-decoration: none; color: orangered !important;}

/* Carrusel de requisitos */
.carrusel-container{width: 100%; overflow: hidden; position: relative; height: 50px; margin-bottom: 0 !important;}
.carrusel{display: flex; position: absolute; width: max-content; animation: mover 10s linear infinite;}
.carrusel-item{min-width: 300px; margin: 10px 10px 0 10px; padding: 10px; background-color: #007bff; color: white; border-radius: 5px; text-align: center;}
.carrusel.duplicado{position: absolute; left: 100%;}

/* Div englobador para las versions y el titulo */
.BodyDESCARGAS h2:not(footer h2){text-align: center; margin: 20px 0 20px 0;}
.InfoVersiones p{margin-bottom: 30px;}
.InfoVersiones{display: flex; flex-wrap: wrap; justify-content: center;}

/* Versiones */
.VersionesDESCARGA{margin: 15px; width: 100%; background-color: rgb(245, 227, 227);}
.VersionesDESCARGA div:not(.DivCentralSistemas){text-align: left;  padding: 30px; border-radius: 10px;}
.VersionesDESCARGA div p{user-select: none;}
.VersionesDESCARGA div p span{user-select: all; word-break: break-all;}
.VersionesDESCARGA div p a span{color: #007bff !important;}
.VersionesDESCARGA div p a, .VersionesDESCARGA div p a span{color: #007bff; transition: .5s; text-decoration: none;}
.VersionesDESCARGA div p a:hover span{color: rgb(107, 107, 236); text-decoration: underline;}
.VersionesDESCARGA:hover{border-radius: 0px;}

.VersionesDESCARGA .DivCentralSistemas{border: none !important; display: flex; padding: 0; width: 100%;}
.VersionesDESCARGA .DivCentralSistemas div{flex: 1; box-sizing: border-box; border: none !important;}
.VersionesDESCARGA .DivCentralSistemas div div{border: none !important; border-bottom: .5px solid !important; border-radius: 0; display: flex; justify-content: left; padding: 0;}
.VersionesDESCARGA .DivCentralSistemas div div img{height: 20px; margin-right: 20px; user-select: none;}
.VersionesDESCARGA .DivCentralSistemas ul li{margin-bottom: 20px; list-style: none;}
.VersionesDESCARGA .DivCentralSistemas ul li a{width: 100%; display: flex; text-align: left !important; justify-content: space-between !important; }
.VersionesDESCARGA .DivCentralSistemas div div{margin-bottom: 20px;}

.VersionesDESCARGA div:hover h3{color: rgb(36,36,36);}
.VersionesDESCARGA div:hover p{color: rgb(36,36,36)}
.VersionesDESCARGA div:hover p span{color: blue;}
.VersionesDESCARGA div:hover a{border-radius: 0px;}
.VersionesDESCARGA div h3{color: blue; margin-bottom: 15px;}
.VersionesDESCARGA div h3 span:not(.UltimaVersion){font-size: 25px;}
.VersionesDESCARGA div h3 span.UltimaVersion{font-size: 15px; margin-left: 15px;}
.VersionesDESCARGA div a:not(.VersionesDESCARGA div p a){border: none !important; user-select: none; text-align: center; text-decoration: none; color: white; background-color: rgb(36,36,36); padding: 6px 3px 6px 3px; border-radius: 5px;}
/* .VersionesDESCARGA div a:not(.VersionesDESCARGA div p a):hover{color: rgb(36,36,36); background-color: white;}
.VersionesDESCARGA div a:not(.VersionesDESCARGA div p a):hover span{color: rgb(36,36,36) !important; background-color: white !important;} */

.VersionesDESCARGA div a:not(.VersionesDESCARGA div p a) *{transition: all .2s !important;}
.VersionesDESCARGA div a:not(.VersionesDESCARGA div p a):hover .span1{color: rgba(0, 123, 255, 0.8) !important;}
.span1{transition: all .2s !important;}
.span1:hover{color: rgba(0, 123, 255, 0.8) !important;}

.contenidoDESC .TodoDESC{height: 100%;}

@media (max-width: 950px) {
    .VersionesDESCARGA .DivCentralSistemas{display: block;}
}

.ComandoInstalacion{text-align: center; letter-spacing: 1px; user-select: all !important; color: lightblue !important;}

/* Scrollbar de los filtros */
.Filtros::-webkit-scrollbar{width: 12px;}
.Filtros::-webkit-scrollbar-thumb{background-color: rgb(245, 227, 227); border: 4px solid white;}
.Filtros::-webkit-scrollbar-thumb:hover{border-radius: 0%;}
.Filtros::-webkit-scrollbar-track{background-color: white;}

.FiltrosVers, .FiltrosEspac, .FiltroFechas, .FiltroFechaSubida{display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; width: 100%;; font-size: 13px;}
.contenidoDESC .Filtros a{color: white; text-decoration: none; padding: 0 10px; background-color: rgb(36,36,36); border-radius: 10px; transition: all .3s;}
.contenidoDESC .Filtros a:hover{background-color: blue;}

/* Animaciones */
@keyframes mover{
    from{transform: translateX(0);}
    to{transform: translateX(-50%);}
}

@media (max-width: 1110px) {
    .contenidoDESC .Filtros{width: 50%;}
}

/* ------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------- */
/* PÁGINA "Contacto.html" */

/* Alinear títulos */
.H2ALINEAR{text-align: center;}
.H2ALINEAR .ParrafoExplicacionContacto{font-size: 18px;}

/* El div que engloba la localizacion física y las tarjetas */
.TodaInfoContacto{min-height: 100vh; padding: 50px;}
.ContactoH1{font-family: "Tiny5"; color: blue; font-size: 50px; text-align: center; user-select: none; margin-top: 20px;}
.TodaInfoContacto iframe{border: none; user-select: none;}
.ContactoBODYH1XX{font-family: "Tiny5"; color: blue; font-size: 50px; text-align: center; user-select: none; margin-top: 20px;}
.TodaInfoContacto h2{color: blue; margin-bottom: 20px; user-select: none;}

/* Localización física */
.LocalFisicamain{display: flex; justify-content: center;}
.LocalFisica{display: flex; flex-wrap: wrap; background-color: rgb(245, 227, 227); padding: 50px; margin: 20px 95px; border-radius: 50px; width: 800px;}
.LocalFisica .div1{width: 500px;}
.LocalFisica .div1 h2{color: blue; font-size: 30px; position: relative; display: inline-block; margin: 0 0 30px 0; user-select: none;}
.LocalFisica .div1 h2::after{content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: rgb(36,36,36); transition: width 0.3s ease-out; display: inline-block;} 
.LocalFisica:hover .div1 h2::after{width: 100%; z-index: 10;}
.DisplayNoneMapa{opacity: 0; user-select: none; cursor: default; pointer-events: none;}
.LocalFisica .div2{margin: 45px 50px;}
.LocalFisica .div2 .pBOLD{padding-top: 15px;}

/* Responsables del proyecto */
.Emails{justify-content: center; margin: 50px;}
.Emails h2{color: blue; font-size: 30px; position: relative; display: inline-block; margin: 0 0 30px 0; user-select: none;}
.Emails h2::after{content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: rgb(36,36,36); transition: width 0.3s ease-out; display: inline-block;} 
.Emails h2:hover::after{width: 100%; z-index: 10;}
.Emails .flexEMAILS{display: flex; flex-wrap: wrap; margin: 0 auto; justify-content: center; align-items: center;}
.Emails .flexEMAILS div:not(.DIVLinks, .Encargos, .LogoEMAILFoto, .LogoEMAILFoto div){background-color: rgb(245, 227, 227); padding: 30px; transition: .5s all; margin: 20px 50px 20px 50px; width: 60%; text-align: left;}
.Emails .flexEMAILS div:not(.DIVLinks, .Encargos, .LogoEMAILFoto, .LogoEMAILFoto div) a{padding: 3px 5px;}
.Emails .flexEMAILS div:not(.DIVLinks, .Encargos, .LogoEMAILFoto, .LogoEMAILFoto div):hover a{border-top-right-radius: 10px; border-bottom-left-radius: 10px;}
.Emails .flexEMAILS div:hover:not(.DIVLinks, .Encargos){border-radius: 20px;}
.Emails .flexEMAILS div div.Encargos{display: flex; flex-wrap: wrap; user-select: none; flex-wrap: wrap;}
.Emails .flexEMAILS div div.Encargos p{border: 1px solid blue; margin: 5px 10px 5px 0; padding: 5px; cursor: crosshair;}
#EmailPersonaBefore, #EmailPersonaBefore2, #EmailPersonaBefore3{position: relative;}
#EmailPersonaBefore::before{content: "A"; color: blue; font-family: "Tiny5"; font-size: 30px; left: -30px; top: 0; position: absolute;}
#EmailPersonaBefore2::before{content: "I"; color: blue; font-family: "Tiny5"; font-size: 30px; left: -30px; top: 0; position: absolute;}
#EmailPersonaBefore3::before{content: "L"; color: blue; font-family: "Tiny5"; font-size: 30px; left: -30px; top: 0; position: absolute;}
.Emails .flexEMAILS div .CargoEMAIL{font-size: 25px; user-select: none;}
.Emails .flexEMAILS div:hover .CargoEMAIL{text-decoration: underline;}
.Emails .flexEMAILS div .nombreEMAIL{font-weight: bold;}
.Emails .flexEMAILS div:hover .nombreEMAIL{color: blue;}
.Emails .flexEMAILS div .nombreEMAIL{font-size: 20px; margin: 10px 0 10px 0; transition: all .3s ease-in;}
.Emails .flexEMAILS div .DIVLinks{display: flex; margin-top: 10px; flex-wrap: wrap;}
.Emails .flexEMAILS div .DIVLinks a{cursor: pointer; background-color: blue; color: white; padding: 3px; text-decoration: none; transition: all .5s; margin: 0 10px 0 0; user-select: none;}
.Emails .flexEMAILS div .DIVLinks a:hover{background-color: rgb(255, 255, 255); color: black;}
.EncargadoTIT{margin-top: 20px;}
.Porcentaje{font-weight: bold; color: blue;}
.LogoEMAILFoto{display: flex;}
.LogoEMAILFoto div{text-align: left;}
.LogoEMAILFoto img{width: 70px; height: 70px; margin-right: 20px; user-select: none; border-radius: 15px;}

/* Redes Sociales */
.RRSS{margin-top: 40px 0 40px 0;}
.RRSS h2{color: blue; font-size: 30px; position: relative; display: inline-block; margin: 0 0 30px 0; user-select: none;}
.RRSS h2::after{content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: rgb(36,36,36); transition: width 0.3s ease-out; display: inline-block;} 
.RRSS h2:hover::after{width: 100%; z-index: 10;}
.RRSSElementos{display: flex; flex-wrap: wrap; justify-content: center; user-select: none;}
.RRSSElementos img{width: 40px !important; transition: all .5s; border-radius: 10px; background-color: black !important; margin: 5px;}
.RRSSElementos img:hover{filter: invert(1);}

/* Los DAFO personales */
.DAFO_PERSONALES div{display: none; width: 80vw; background-color: rgb(80, 80, 80); color: white;}
.DAFO_PERSONALES{background-color: rgb(245, 227, 227); border-radius: 40px;}
.DAFO_PERSONALES div{padding: 20px;}
.DAFO_PERSONALES h3{font-family: "Arial"; color: rgb(145, 145, 255); font-size: 20px;}
.DAFO_PERSONALES h4{font-family: "Arial"; font-size: 25px; margin-bottom: 20px;}
.DAFO_PERSONALES p{font-size: 17px;}
.DAFO_PERSONALES li{font-size: 17px; margin: 5px 5px 10px 25px;}
#DAFO_PERSONALES{display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgb(80, 80, 80); padding: 20px; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); z-index: 1000;}
#fondoOscuro{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999;}
.cerrar{cursor: pointer; background: rgb(147, 147, 247); color: black; font-weight: bold; border: none; padding: 5px 10px; border-radius: 5px; float: right;}

/* ------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------- */
/* PÁGINA "Productos.html" */

/* Principal */
.BodyPRODUCTO h1:not(.menú h1){font-family: "Tiny5"; color: blue; font-size: 50px; text-align: center; margin-top: 20px; user-select: none;}
.BodyPRODUCTO h2:not(.GuíaPRODUC h2){color: blue; font-size: 30px; position: relative; display: inline-block; user-select: none;}
.BodyPRODUCTO h2:not(.GuíaPRODUC h2)::after{content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: rgb(36,36,36); transition: width 0.3s ease-out; display: inline-block;} 
.BodyPRODUCTO h2:not(.GuíaPRODUC h2):hover::after{width: 100%; z-index: -10;}
.contenidoPRODUC{min-height: 90vh; padding: 0 50px 50px 50px;}

/* Extensión de Chrome */
.ExtensioChrome{text-align: center; margin-top: 50px; margin-left: 30px; margin-right: 30px;}
.ExtensioChrome img{width: 200px !important; border: 1px solid rgba(0, 0, 0, 0); border: 1px solid rgba(0, 123, 255, 0) !important; transition: all .5s; background-color: rgba(62, 62, 62, 0.3) !important; margin-top: 20px; border-radius: 10px;}
.ExtensioChrome img:hover, .hoverchrome2:hover{background-color: rgba(62, 62, 62, 0.0) !important; border: 1px solid !important;}
.hoverchrome2{border: 1px solid rgba(0, 123, 255, 0) !important;}

/* Por qué elegirnos */
.PorqueELERGIRNOS{display: flex; flex-wrap: wrap; margin: 50px 0 0 0;}
.PorqueELERGIRNOS p, .PorqueELERGIRNOS ul li, .ExplicacionELEGIRP2{font-size: 18px; margin-top: 20px; text-align: justify;}
.PorqueELERGIRNOS ul{margin-left: 25px;}
.PorqueELERGIRNOS ul li{margin-top: 5px;}
.ListadoELEGIR{text-decoration: underline;}
.PorqueELERGIRNOS .ExplicacionELEGIR{width: 100%;}
.PorqueELERGIRNOS .ExplicacionELEGIR p a, .ExplicacionELEGIRP2 a{color: white; background-color: black; padding: 0 5px; border-radius: 20px; text-decoration: none; transition: all .5s;}
.PorqueELERGIRNOS .ExplicacionELEGIR p a:hover, .ExplicacionELEGIRP2 a:hover{background-color: blue; border-radius: 0px;}
.margenantesdeH2{margin: 10px 0 10px 0;}
.PorqueELERGIRNOS .ELEGIRfoto{justify-content: center; padding: 15px; display: flex; flex-wrap: wrap; justify-content: right; margin: 0 auto;}
.PorqueELERGIRNOS .ELEGIRfoto a img{user-select: none; border-radius: 10px; width: 500px; margin-top: 20px;}
.Nomargenabajo{margin-bottom: -30px !important;}

/* Qué problemas solucionamos */
.QueProblemasSolucionamos{margin: 50px 0 0 0;}
.QueProblemasSolucionamos p, .QueProblemasSolucionamos ul li{font-size: 18px; margin-top: 20px; text-align: justify;}

/* A quién nos dirigimos */
.AQuienNosDirigimosFlex{display: flex; justify-content: center; margin: 0 !important; padding: 0 !important;}
.AQuienNosDirigimosFlex div{width: 300px; margin: 10px; background-color: rgb(245, 227, 227); padding: 30px; border-radius: 20px;}
.AQuienNosDirigimosFlex div h3{color: blue; transition: all .5s;}
.AQuienNosDirigimosFlex div:hover h3{color: black;}
#Innovación2 *{text-align: center !important;}
#Innovación2 .ExplicacionELEGIR p.margenantesdeH2{margin: 20px 10%;}
#Innovación2 .AQuienNosDirigimosFlex div *{text-align: justify !important;}

/* Tutorial */
div.Tutorial{text-align: center; margin-top: 50px;}
div.Tutorial br, div.TUTOTIAL img{user-select: none;}
div.Tutorial a:not(.SinEstiloA){text-decoration: none; background-color: rgb(36,36,36); padding: 1px 10px; color: white; border-radius: 20px; transition: all .5s; user-select: none;}
div.Tutorial a:not(.SinEstiloA):hover{background-color: blue; border-radius: 0px;}
div.Tutorial iframe{user-select: none; border-radius: 20px; box-shadow: 5px 5px 10px rgb(40, 40, 40); width: 50%; margin: 30px 2% 0 2%; width: 500px;}

/* Precios */
.Precios{margin-top: 50px;}
.H2Centrar{text-align: center !important;}
.Precios h3{text-align: center; color: black; font-size: 20px; user-select: none; margin-top: 20px; margin-bottom: 20px;}
.PreciosFlex{display: flex; flex-wrap: wrap; justify-content: center; margin-top: 10px;}
.PreciosFlex div:not(.FlexPrecioTitulo){background-color: rgb(245, 227, 227); margin: 10px; padding: 20px; width: 20%; min-width: 100px; transition: all .5s; border-radius: 10px;}
.PreciosFlex div:not(.FlexPrecioTitulo):hover{box-shadow: 3px 3px 7px black;}
.PreciosFlex div:not(.FlexPrecioTitulo):hover .FlexPrecioTitulo p{transform: rotate(5deg);}
.PreciosFlex div:not(.FlexPrecioTitulo):hover .PlanAmpliable{display: inline;}
.PreciosFlex div h4{color: blue; font-size: 25px; user-select: none;}
.PreciosFlex hr{border-radius: 20px; height: 2px; background-color: black; border: 1px solid; margin: 25px 0; transition: .7s all;}
.PreciosFlex div:not(.FlexPrecioTitulo):hover hr{background-color: blue;}
.PrecioDescripcion{margin-top: 10px;}
.FlexPrecioTitulo{display: flex; justify-content: space-between;}
.PrecioFinal{font-size: 20px; color: green; font-weight: bold; transition: all .3s;}
.PlanAmpliable{display: none;}
.LetraPequeña{text-align: center; margin-top: 20px;}
.OfertaRojo{color: red; text-decoration: line-through; font-size: 15px;}
.OfertaAmarillo{color: blue;}
.IndividualProducto{border: 2px solid blue;}
.BotonContactarPrecios{margin: 20px auto 0; margin-bottom: 0 !important; border: 1px solid rgba(0, 0, 0, 0); background-color: rgb(107, 107, 236); color: black; text-decoration: none; text-align: center; padding: 3px 10px; display: grid; transition: all .5s; border-radius: 20px;}
.BotonContactarPrecios:hover{background-color: rgb(213, 213, 255); border: 1px solid;}

/* Métodos de Pagos */
.MétodosPagos{display: flex; justify-content: center; margin-top: 20px;}
.MétodosPagos img{height: 25px; padding: 5px; user-select: none;}

/* Donaciones */
.Donaciones{text-align: center; margin-top: 50px;}
.Donaciones p{margin: 20px 0;}
.Donaciones a img{background-color: rgba(255, 255, 255, 0.4) !important; padding: 7px; margin: 3px; transition: all .5s; user-select: none;}
.Donaciones a img:hover{background-color: rgba(255, 255, 255, 0.8) !important; padding: 10px; margin: 0;}

/* ------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------- */
/* PÁGINA "Términos.html" */

/* Principal */
.TodoTERMINOS{padding: 50px; margin-top: -50px;}
.BodyPRODUCTOSh1{padding: 0 30px;}
.TodoTERMINOS hr{background-color: rgb(36,36,36); border: 1px solid rgb(36,36,36); margin: 60px 0; height: 3px; border-radius: 10px; margin: 50px 25% 50px 25%;}

/* Títulos */
.TodoTERMINOS h1{font-family: "Tiny5"; color: blue; font-size: 50px; text-align: center; user-select: none; margin-bottom: 20px;}
.TodoTERMINOS h1 span{color: rgb(147, 147, 247) !important;}
.IndiceGlobal h2{color: blue; font-size: 30px; position: relative; display: inline-block; user-select: none;}
.IndiceGlobal h2::after{content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: rgb(36,36,36); transition: width 0.3s ease-out; display: inline-block;} 
.IndiceGlobal h2:hover::after{width: 100%; z-index: -10;}
.TodoTERMINOS h2:not(.IndiceGlobal h2){color: rgb(36,36,36); font-size: 15px; text-align: center; user-select: none; margin-bottom: 40px;}
.TodoTERMINOS h2 span{user-select: all; color: blue;}
.TodoTERMINOS h3 span{color: blue;}
.TodoTERMINOS h3{font-size: 25px; user-select: none; margin: 15px 0;}
.TodoTERMINOS .h3_terminos{color: rgb(147, 147, 247) !important;}

/* Texto y listas */
.TodoTERMINOS p{text-align: justify; font-size: 18px; margin-bottom: 30px;}
.TodoTERMINOS p a{background-color: rgb(36,36,36); color: white; text-decoration: none; padding: 0 5px; border-radius: 20px; transition: all .5s; user-select: none;}
.TodoTERMINOS p a:hover{background-color: blue; color: white; border-radius: 0px;}
.TodoTERMINOS ul:not(.menú a){margin: 0 0 30px 30px; font-size: 18px}

/* ------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------- */
/* PÁGINA "FAQ.html" */

/* Principal */
.BodyFAQ h1:not(.menú h1){font-family: "Tiny5"; color: blue; font-size: 50px; text-align: center; margin-top: 20px; user-select: none;}
#PrGRID{margin-top: 0 !important;}

/* Div englobador de las preguntas */
.PreguntasPRODUC{min-height: 90vh; padding: 50px; display: flex; justify-content: center; flex-direction: column;}

/* Pregunta individual */
.PreguntaPRODUC{border: 1px solid black; padding: 30px 20px; margin: 0 auto; max-width: 1000px; transition: all .5s;}
.PreguntaPRODUC:hover{border: 1px solid blue; border-radius: 10px;}
.PreguntaPRODUC:hover h2{color: blue;}
.PreguntaPRODUC h2::before{content: "▷"; font-size: 13px; margin-right: 18px; transition: all .5s; display: inline-block;}
.PreguntaPRODUC:hover h2::before{transform: rotate(90deg); color: orange;}
.PreguntaPRODUC:hover .ListaElementoFlecha::marker{color: blue;}
.PreguntaPRODUC:hover b{text-decoration: underline;}
.PreguntaPRODUC a div ol li a{text-decoration: none; background-color: rgb(36,36,36); padding: 0 5px; color: white; border-radius: 20px; transition: all .5s; user-select: none;}
.PreguntaPRODUC{cursor: pointer;}
.PreguntaPRODUC a{background-color: black; border-radius: 20px; padding: 0 5px; color: white; text-decoration: none; transition: all .5s;}
.PreguntaPRODUC a:hover{background-color: blue; border-radius: 0px;}
.PreguntaPRODUC h2{margin-bottom: 0px; font-size: 18px;}
.PreguntaPRODUC *:not(.PreguntaPRODUC h2){font-size: 17px;}
.PreguntaPRODUC ol{margin-left: 25px;}
.PreguntaPRODUC code{background-color: lightgray !important; color: black !important;}
.PreguntaPRODUC ol li{font-size: 18px; margin-top: 10px; display: none;}
.ListaElementoFlecha::marker{content: "↪  ";}
.sepr{height: 20px !important;}

/* ------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------- */
/* PÁGINA "Empresa.html" */

/* Principal */
.EmpresaBODYH1XX{font-family: "Tiny5"; color: blue; font-size: 50px; text-align: center; user-select: none; margin-top: 20px;}
.EmpresaBODY h2{color: blue; font-size: 30px; position: relative; display: inline-block; user-select: none;}
.EmpresaBODY h2::after{content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: rgb(36,36,36); transition: width 0.3s ease-out; display: inline-block;} 
.EmpresaBODY h2:hover::after{width: 100%; z-index: -10;}
.EmpresaBODY .empresaselevator{margin-bottom: 0px !important;}
.EmpresaBODY .empresaselevatorantes{margin-bottom: 0 !important;}

/* Quiénes somos */
.QuienesSomos{text-align: center; user-select: none; margin: 50px 10% 0 10%;}
.QuienesSomos h2{color: blue; font-size: 30px; margin-bottom: 20px; position: relative; display: inline-block; user-select: none;}
.QuienesSomos h2::after{content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: rgb(36,36,36); transition: width 0.3s ease-out; display: inline-block;} 
.QuienesSomos h2:hover::after{width: 100%; z-index: 10;}
.QuienesSomos p{font-size: 18px; user-select: text; text-align: center;}
.QuienesSomos p u{color: gray !important; text-decoration: none;}
.QuienesSomos p a{text-decoration: none; background-color: rgb(36,36,36); padding: 0 5px; color: white; border-radius: 20px; transition: all .5s; user-select: none;}
.QuienesSomos p a:hover{background-color: blue; border-radius: 0px;}
.SubrayarLegal{background-color: rgb(176, 176, 255);}
.SubrayarLegal::selection{color: white; background-color: rgb(89, 89, 174);}

/* doble columna div */
.DuoEmpresa{display: flex; margin: 50px 10% 0 10% !important; text-align: center;}
.DuoEmpresa div{margin: 0 20px 0 20px !important; width: 50% !important;}
.DuoEmpresa div .gris{color: gray !important;}
.DuoEmpresa div h2{margin-bottom: 20px;}
.DuoEmpresa div p{font-size: 18px; user-select: text; text-align: center;}
.DuoEmpresa div p a{text-decoration: none; background-color: rgb(36,36,36); padding: 0 5px; color: white; border-radius: 20px; transition: all .5s; user-select: none;}
.DuoEmpresa div p a:hover{background-color: blue; border-radius: 0px;}

/* Análisis de la competencia */
.RSCxz{display: flex; flex-wrap: wrap; text-align: center; justify-content: center; vertical-align: middle;}
.RSCxz p{width: 200px; margin-top: 20px; border: rgb(147, 147, 247) 1px solid; border-top-left-radius: 20px; border-bottom-right-radius: 20px; padding: 10px; margin: 5px;}

/* RSC */
.RSC{margin: 70px 10% 0 10% !important; text-align: center;}
.RSC p:not(.Ptit, .NoPtit)::before{color: blue; content: "◤ "; font-size: 12px; vertical-align: top;}
.RSC p:not(.Ptit, .NoPtit)::after{color: blue; content: " ◢"; font-size: 12px;}
.RSC p{margin-bottom: 5px; font-size: 18px;}
.RSC h2{margin-bottom: 20px;}
.RSC h2 span{color: lightslategrey !important;}

/* Línea del tiempo  */
.NuestraHistoria{text-align: center; margin-top: 70px;}
.NuestraHistoria h2{color: blue; font-size: 30px; position: relative; display: inline-block; user-select: none;}
.NuestraHistoria h2::after{content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: rgb(36,36,36); transition: width 0.3s ease-out; display: inline-block;} 
.NuestraHistoria h2:hover::after{width: 100%; z-index: 10;}
.LineaTiempo{text-align: center; margin: 50px; user-select: none;}
.Mom{border-top: 3px solid black; display: inline-block; padding: 10px 0 50px 10px; width: 250px; text-align: left; transition: all .5s;}
.Mom:hover{border-top: 3px solid #007bff;}
.Mom h3{margin: 10px 10px 10px 0;}
.Mom p{user-select: text;}
.Mom h3 .icon{display: inline-block; color: blue; margin-right: 10px; font-weight: bold; transition: all 0.5s ease-in-out;}

/* DAFO de la empresa */
.DAFOEmpresa{display: flex; flex-wrap: wrap; justify-content: center;}
.DAFOEmpresa div{transition: all .5s; background-color: rgb(245, 227, 227); padding: 30px; border-radius: 20px; margin: 10px;   flex: 1 1 calc(43% - 10px); max-width: calc(43% - 10px); border: 2px solid rgb(245, 227, 227);}
.DAFOEmpresa div:hover{border-top-left-radius: 20px; border-bottom-right-radius: 20px; border-top-right-radius: 0; border-bottom-left-radius: 0; border: 2px solid #007bff;}
.DAFOEmpresa div:hover h3{color: black;}
.DAFOEmpresa div h3{color: blue; margin-bottom: 10px;}
.DAFOEmpresa div h3 span{color: #007bff !important; font-size: 28px; color: black;}

/* Trámites necesarios */
.SeparadoresTramites{color: #007bff !important; font-weight: bold; margin: 0 7px;}
.SeparadoresTramitesP{transition: all .5s;}
.SeparadoresTramitesP:hover{border-radius: 0;}
.SeparadoresTramitesP:hover u{color: blue;}
.SeparadoresTramitesP .titQuienesSomos, .titQuienesSomos{color: rgb(147, 147, 247) !important;}
.SeparadoresTramitesP u{text-decoration: none; font-size: 110%; font-weight: bold; transition: all .5s;}
.RSC2 p::before{content: "⇨ "; color: #007bff !important;}

/* Business Canvas */
.ax1 td{border: 2px solid rgb(245, 227, 227) !important; padding: 10px; text-align: left; vertical-align: top;}
.ax1 b{color: rgb(147, 147, 247) !important;}
table.ax1{max-width: 1200px; margin: 0 auto; border-collapse: collapse; user-select: text; width: 100%;}

@media (max-width: 768px) {
    .table-container{width: 100%; overflow-x: auto;}
    table.ax1{width: max-content; min-width: 600px;}
}

/* Análisis PORTER  */
.PORTER{display: flex; flex-wrap: wrap; justify-content: center;}
.PORTER h3{color: rgb(147, 147, 247) !important;}
.PORTER div:hover h3{text-decoration: underline;}
.PORTER, .PORTER *{transition: all .5s;}
.PORTER div:hover div{display: inherit !important;}
.PORTER div:not(.d1, .PORTER div div){width: 70%; border: 2px solid rgb(245, 227, 227); margin: 10px; padding: 20px;}
.PORTER div:hover:not(.d1, .PORTER div div){border: 2px solid #007bff; border-radius: 20px !important;}
.PORTER div:not(.d1) *{width: 100%;}
.PORTER div div:not(.p1){display: none; margin-top: 30px; position: relative; overflow: hidden;}

/* Animaciones  */
@keyframes Momento {
    0% {color: blue;}
    30% {color: red;}
    80% {color: red;}
    100% {color: blue;}
}

/* Sector: Rec. Hum. */
.PuestosBlue p b{color: #007bff !important;}
.PuestosBlue p i, .PuestosBlue p u:not(.PuestosBlueUNo){color: darkcyan !important;}

/* Sector: Marketing */
.SecMarkt p b, .SecMarkt p u{color: darkcyan !important;}

/* Costes de la empresa */
.Costes, .Costes2{display: flex; width: 100% !important; justify-content: center; align-items: center;}
.Costes td{width: 50%; margin: 0 10px 0 10px !important;}
.Costes2 td{margin: 0 10px 0 10px !important;}
.Costes td b, .Costes2 td b{color: darkcyan !important;}

/* ------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------- */
/* PÁGINAS "404.html", "400.HTML" */

/* Principal */
.MensajeError{height: 95vh; display: flex; justify-content: center; align-items: center; text-align: center;}
.z404BODY .Parte1404 h1, .z403BODY .Parte1404 h1{font-family: "Tiny5"; color: black; font-size: 50px; user-select: text;}
.z400BODY .Parte1404 h1, .z408BODY .Parte1404 h1{font-family: "Tiny5"; color: white; font-size: 50px; user-select: text;}
.Parte1404::selection, .Parte1404 h1::selection, .Parte1404 h1 span::selection{background-color: gray;}
.Parte1404 br{user-select: none;}
.Parte1404 h1 span{font-family: "Tiny5"; color: blue; font-size: 50px; text-align: center; user-select: text;}
.MensajeError img{max-width: 65%; border-radius: 30px; user-select: none;}
.Parte1404{position: relative; display: inline-block; text-align: center;}
.Parte1404 .centrado{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.CréditosImagen{text-align: center; margin-bottom: 30px;}

/* ------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------- */
/* PÁGINA "Legal.html" */

/* Principal */
.UsoLogo, .NoSomosEmpresa{margin-bottom: 70px !important;}

/* Explicar que no somos una empresa */
.NoSomosEmpresa{text-align: center; user-select: none; margin: 50px 10%;}
.NoSomosEmpresa h2{color: blue; font-size: 30px; margin-bottom: 20px; position: relative; display: inline-block; user-select: none;}
.NoSomosEmpresa h2::after{content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: rgb(36,36,36); transition: width 0.3s ease-out; display: inline-block;} 
.NoSomosEmpresa h2:hover::after{width: 100%; z-index: 10;}
.NoSomosEmpresa p{font-size: 18px; user-select: text; text-align: center;}
.NoSomosEmpresa p br{user-select: none;}
.NoSomosEmpresa p a{text-decoration: none; background-color: rgb(36,36,36); border-radius: 20px; padding: 2px 10px; color: white; transition: all .5s; user-select: none;}
.NoSomosEmpresa p a:hover{background-color: blue; border-radius: 0;}

/* Árbol de dominios */
.LiteralBroArbolDominiosH2div{justify-content: center; display: flex; margin-bottom: -5px;}
.LiteralBroArbolDominiosH2{color: blue; font-size: 30px; margin-bottom: 20px; position: relative; display: inline-block; user-select: none;}
.LiteralBroArbolDominiosH2::after{content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: rgb(36,36,36); transition: width 0.3s ease-out; display: inline-block;} 
.LiteralBroArbolDominiosH2:hover::after{width: 100%; z-index: 10;}

.LiteralBroArbolDominios{display: flex; flex-direction: column; align-items: center; padding: 20px; margin-bottom: -10px;} 
.LiteralBroArbolDominios div{display: flex; justify-content: center; position: relative; margin: 10px 0;}
.LiteralBroArbolDominios a{border: 0.1px solid rgb(201, 153, 153); border-radius: 5px; padding: 5px 30px; color: black; text-decoration: none; background: white; position: relative; font-size: 1.1vw;}  
.LiteralBroArbolDominios a:hover{color: rgb(145, 145, 255) !important;}
.LiteralBroArbolDominios div::before{content:""; position:absolute; top:-10px; left:50%; width:0; height:10px; border-left: 2px solid rgb(226, 213, 213);}  
.LiteralBroArbolDominios div:first-child::before{display:none;}  
.LiteralBroArbolDominios div a::before, .LiteralBroArbolDominios div a::after{content:""; position:absolute; top:-10px; width:50%; height:10px; border-top:2px solid rgb(226, 213, 213);}  
.LiteralBroArbolDominios div a::before{left:-50%; border-right: 2px solid rgb(226, 213, 213);}  
.LiteralBroArbolDominios div a::after{right:-50%; border-left: 2px solid rgb(226, 213, 213);}  
.LiteralBroArbolDominios div a:first-child::before{display: none;}  
.LiteralBroArbolDominios div a:last-child::after{display: none;}  

/* Cómo usar el logo */
.UsoLogo{text-align: center; user-select: none; margin: 50px 10%;}
.UsoLogo h2{color: blue; font-size: 30px; margin-bottom: 20px; position: relative; display: inline-block; user-select: none;}
.UsoLogo h2::after{content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: rgb(36,36,36); transition: width 0.3s ease-out; display: inline-block;} 
.UsoLogo h2:hover::after{width: 100%; z-index: 10;}
.UsoLogo p{font-size: 18px; user-select: text; text-align: center;}
.UsoLogo br{user-select: none;}
.UsoLogo p a{text-decoration: none; background-color: rgb(36,36,36); padding: 2px 10px; color: white; border-radius: 20px; transition: all .5s; user-select: none;}
.UsoLogo p a:hover{background-color: blue; border-radius: 0px;}

/* Enlaces a los logos */
.EnlNuevo{display: flex; flex-direction: column; align-items: center; margin: 10px 20% 20px 20%;}
.EnlNuevo a{display: inline-flex; border: 1px solid rgba(0,0,0,0); justify-content: space-between; align-items: center; padding: 10px; text-decoration: none; color: black; width: auto; transition: all .3s ease-in-out; margin: 5px 0; border-radius: 8px; background-color: rgba(0, 123, 255, 0.1);}
.EnlNuevo a:hover{background-color: rgba(0, 123, 255, 0); border: 1px solid;}
.EnlNuevo a:hover p{color: #007bff;}
.EnlNuevo2 a:not(.PythonLogoDescargas){filter: brightness(130%) !important;}
.UsoLogo2 p b{color: #7fbdfe !important;}
.EnlNuevo2 a:hover{filter: brightness(100%) !important;}

/* ------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------- */
/* PÁGINA "Registros.html" */

/* Principal */
.RegistrosGloba{min-height: 80vh;}
.RegistroCambios{text-align: center; user-select: none; margin: 50px 10%; display: flex;}

/* Parte Izquierda */
.RegistroCambios div.d1{width: 20%;}
.RegistroCambios div.d1 div{color: blue; top: 100px; position: sticky;}

/* Parte Derecha */
.RegistroCambios div.d2{width: 80%;}
.RegistroCambios div.d2 div.z100{height: 60px; display: flex; justify-content: center; vertical-align: middle; padding: 8px 0 0 0;}
.RegistroCambios div.d2 div.z100 a{background-color: black; color: white; height: min-content; margin: 0 2px 0 2px; padding: 5px; text-decoration: none; transition: all .5s;}
.RegistroCambios div.d2 div.z100 a:hover{color: rgb(174, 174, 255); border-radius: 10px;}
.RegistroCambios p{font-size: 18px; user-select: text; text-align: center; border: 1px solid; padding: 10px 0; border-radius: 10px;}
.RegistroCambios p br{user-select: none;}

/* ------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------ @MEDIA ------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------- */

@media (max-width: 320px){
    .menú .logo h1, .menú .logo h1 span{font-size: 0px;}
}

@media (max-width: 425px){
    .AQuienNosDirigimosFlex{display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap;}
    .AQuienNosDirigimosFlex div{width: 200px; margin: 3px;}
    .parte1 h1 span{font-size: 60px;}
    .parte1 .botones a{font-size: 14px;}
}

@media (max-width: 550px){
    .contenidoDESC .Filtros{width: 50% !important; margin: 0 auto !important;}
    /* Contacto - Responsables del proyecto */
    .LogoEMAILFoto{display: block;}
    .LogoEMAILFoto *, .H2ALINEAR *{word-break: keep-all;}
    /* Footer */
    img.FooterIESjg{width: fit-content !important;}
    .FooterSeparación{padding: 0; margin: 10px; border-bottom: 2px solid rgb(60, 60, 60); width: 100%;}
}

@media (max-width: 768px){
    /* SCOLLBAR */
    *{overflow:-moz-hidden-unscrollable !important;}
    /* Tutoriales */
    div.Tutorial iframe{width: 70% !important;}
    /* Menú */
    .menú div ul a li{display: none;}
    .menú .logo h1{display: inline !important;}
    .menú div ul a.menucc{display: inherit !important;}

    .menú .footerlinks ul li{text-align: right;}
    .menú.active .logo{display: flex;}
    .menú.active .logo h1{display: none;}
    /* Títulos INDEX */
    .parte19 h2, .parte2 h2, .parte22 h2{text-align: center !important;}
    /* PARTE 1 */
    .parte1 .Significado1{margin: 0 10%; margin-top: 30px; font-size: 20px;}
    .parte1{background-attachment: initial;}
    /* PARTE 1.9 */
    .parte19 p{text-align: center !important;}
    /* PARTE 2 */
    .parte2{margin: 0px !important;}
    /* PARTE 3 */
    .parte3{margin: 50px 100px 50px 100px; text-align: center;}
    .parte3 h2{display: block;}
    .parte3{margin: 50px;}
    .parte3 .compromisos div{background-color: rgb(245, 227, 227); width: 100%; min-height: 100% !important; margin: 10px 0;}

    /* Descargas */
    .VersionesDESCARGA div:hover{border-radius: 0px; transform: none !important;}
    .VersionesDESCARGA div:hover h3{transform: none !important; margin-bottom: 15px !important;}
    .VersionesDESCARGA div:hover p{transform: none !important;}
    .advertenciaH2CLAVE{padding: 5px 30px;}
    .contenidoDESC{padding-bottom: 0px; display: grid !important; justify-content: center;}
    .contenidoDESC .TodoDESC{width: 100% !important; padding-bottom: 50px; position: none !important; height: 100% !important;}
    .contenidoDESC .Filtros{width: 90%; position: unset !important; margin: 10px; padding: 20px !important;}
    .AvisoDescargaTEXTO{display: grid !important; padding-top: 20px !important; margin-bottom: 0 !important;}
    /* FAQ */
    .PreguntaPRODUC:hover ol li a{padding: 0 5px !important;}
    /* Precios */
    .PreciosFlex{display:grid; justify-content: center;}
    .PreciosFlex div:not(.FlexPrecioTitulo){background-color: rgb(245, 227, 227); margin: 10px; padding: 20px; width: 100%; max-width: 250px; transition: all .5s; border-radius: 10px;}
    .PreciosFlex div:not(.FlexPrecioTitulo):hover{transform: none; box-shadow: none;}
    .PreciosFlex div:not(.FlexPrecioTitulo):hover .FlexPrecioTitulo p{transform: none;}
    .PlanAmpliable{display: inline !important;}
    /* Empresa */
    .PlanEmpresa{padding: 30px; margin: 20px;}
    /* Legal */
    .UsoLogo p a{display: inline-block; margin-bottom: 10px;}
    .NuestrosDominios .Enl a{width: 100%; padding: 25px 0px; margin: 10px;}
    /* Error 404, 401, 403 */
    .MensajeError img{max-width: 100%; height: 200% ; border-radius: 30px; user-select: none;}
    /* Registros */
    .RegistroCambios{display: grid;}
    .RegistroCambios div.d1{width: 100%; margin-bottom: 30px;}
    .RegistroCambios div.d2{width: 100%;}
    .RegistroCambios div.d1 div{position: inherit;}
    .RegistroCambios p{padding: 10px;}
    /* Contacto */
    .VersionesDESCARGA{margin: 15px; width: 90%;}
    .LocalFisica{display: block; word-break: break-all !important;}
    .LocalFisica div{width: 100% !important;}
    /* Empresa */
    .DuoEmpresa{display: block; margin: 0 !important;}
    .DuoEmpresa div{margin: 20px 10% 50px 10% !important; width: inherit !important;}
    .zxzxaxaz{transform: translateY(0px) !important;}
    /* FOOTER */
    footer{display: block; justify-content: center; padding: 5%; height: 110% !important; align-items: center;}
    .footerlinks{display: block;}
    .footerlinks ul{text-align: center; margin: 0 auto; width: 250px; margin-bottom: 20px;}
    .OcultarGrande{display: none;}
    .OcultarGrande{display: inherit !important;}
}

@media (max-width: 850px){
    .esconderMÓVIL{display: none;}
    /* CONTACTO */
    .Emails .flexEMAILS div .DIVLinks a{margin-top: 10px;}
}

@media (max-width: 900px){
    /* CONTACTO */
    .LocalFisica{display: flex !important; padding: 30px !important; margin: 30px 0 !important; border-radius: 15px !important;}
    .LocalFisica .div1{width: 50%;}
    .LocalFisica .div1 iframe{max-width: 100% !important;}
    .LocalFisica .div2{margin: 15px !important;}
    .Emails{margin: 0px;}
    .Emails .flexEMAILS div:not(.DIVLinks, .Encargos, .LogoEMAILFoto, .LogoEMAILFoto div){margin: 20px 0px 20px 0px !important; width: 100% !important; word-break: break-all;}
    /* PORTER */
    .PORTER *{display: block !important;}
    .PORTER div{width: 100% !important;}
}

@media (max-width: 1200px){
    /* FOOTER */
    footer{display: block; justify-content: center; padding: 5%; height: 110% !important; align-items: center;}
    .footerlinks{margin: 0 auto; justify-content: center;}
    .abajofooter{height: 130px !important;}
    footer div.ContenidoNoBotton{justify-content: center !important;}
}

@media (max-width: 1210px){
    /* Parte 3 */
    .compromisos div:hover p{border-left: none !important; padding-left: 0px !important;}
    .compromisos div:hover h3 span{transform: none !important;}
    .compromisos div:hover h3{margin-bottom: none !important;}
    /* Parte 2 */
    .parte2{display: grid; text-align: center;}
    .parte2 .flex{display: block;}
    .parte2 .flex .div2 img{margin-bottom: 20px !important; margin-top: 20px !important;}
    .parte2 .flex .div1{width: 100% !important;}
    .parte2 .flex .div2{width: 100% !important;}
    .parte2 .div1 h2{text-align: center;}
    .parte2 .div2{margin: 0 !important; padding: 0 !important; text-align: center;}
    .parte2 .div2 img{margin: 50px 0 0 0 !important; padding: 0 !important;}
    /* PRODUCTOS */
    .contenidoPRODUC{padding: 50px 20px  !important;}
    .PorqueELERGIRNOS{display: grid !important;}
    .PorqueELERGIRNOS .ExplicacionELEGIR{width: 100% !important;}
    .PorqueELERGIRNOS .ELEGIRfoto{text-align: center; display: flex !important; flex-wrap: wrap; width: 90%; justify-content: center; margin: 0 auto !important;}
    .PorqueELERGIRNOS .ELEGIRfoto img{width: 200px !important; margin: 20px 20px 0 20px !important;}
    .GuíaPRODUC:hover a{padding: 0 5px;}
}

/* ------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------- */

/* TRADUCTOR */

.gtranslate_wrapper a{color: blue !important;}
.gtranslate_wrapper a:hover{color: rgb(36,36,36) !important;}
.gtranslate_wrapper img{width: 20px !important;}
.gt_switcher-popup span{font-size: 16px !important;}
.gt_switcher-popup span:nth-of-type(2){font-size: 8px !important;}
.gt_switcher-popup:hover span:nth-of-type(2){color: blue !important;}
.gt_white_content{background-color: rgb(36,36,36) !important; border-radius: 20px; border: rgb(147, 147, 247) 1px solid;}
.glink{border-bottom: 0px black !important;}
.glink span{color: white;}
.gt-current-lang span{color: rgb(147, 147, 247) !important; font-weight: normal;}

/* ------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------- FIN ------------------------------------------------- */