@font-face {
	font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
	font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
	font-family: 'Roboto Light';
  src: url('../fonts/Roboto-Light.ttf') format('truetype');
  font-display: swap;
}

/* ********************************************************************** */
/* *********************** RESETEO DE ESTILOS NAVEGADOR ***************** */
/* ********************************************************************** */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto";
  font-size: 14px;
  list-style-type: none;
}
*:focus,*:hover{
  outline:none;
}
a {
  text-decoration: none;
  text-transform: uppercase;
}
img{
  width: 100%;
}

/* ********************************************************************** */
/* ******************************** VARIABLES *************************** */
/* ********************************************************************** */
:root {
  /* Colores */
  --colorAzul: #00e8fd;
  --colorAzul2: #01cfe2;
  --colorAzul3: #02b6c6;
  --colorAzulDark: #004fac;
  --colorAzulPP: #0070ba;
  --colorBlanco: #ffffff;
  --colorMorado: #282140;
  --colorMoradoDark: #1d182e;
  --colorMoradoLight: #39394d;
  --colorVerde: #00fd6b;
  --colorGris: #1d1e22;
  --colorGrisLight: #3a3c44;
  --colorGrisLighter: #5d606d;
  --colorGrisLighter2: #d5d9ea;
  --colorRojoLight: #e03069;
  --colorAdvertencia: #fc2400;
  /* Iconos */
  --iconoContacto: url(../img/icons/mailIcono.svg);
  --iconoFacebook: url(../img/icons/facebookIcono.svg);
  --iconoTwitter: url(../img/icons/twitterIcono.svg);
  --iconoLinkedIn: url(../img/icons/linkedInIcono.svg);
  --iconoPinterest: url(../img/icons/pinterestIcono.svg);
  --iconoDireccion: url(../img/icons/01-DIRECCION.svg);
  --iconoTelefono: url(../img/icons/02-TELEFONO.svg);
  --iconoEmail: url(../img/icons/03-EMAIL.svg);
  --iconoWhatsApp1: url(../img/icons/01-WHATSAPP.svg);
  --iconoWhatsApp2: url(../img/icons/whatsapp-logo-contacto.svg);
  --iconoFacebook1: url(../img/icons/02-FACEBOOK.svg);
  --iconoTwitter1: url(../img/icons/05-TWITTER.svg);
  --iconoPinterest1: url(../img/icons/04-PINTEREST1.svg);
  --iconoLinkedIn1: url(../img/icons/03-LINKEDIN.svg);
  --iconoPayPal1: url(../img/icons/FOOTER-PAYPAL.svg);
  --iconoVisa1: url(../img/icons/FOOTER-VISA.svg);
  --iconoMasterCard1: url(../img/icons/FOOTER-MASTERCARD2.svg);
  --iconoVolver: url(../img/icons/volver.svg);
  --iconoInstagram: url(../img/icons/instagramIcono.svg);
  --iconoInstagram1: url(../img/icons/03-INSTAGRAM.svg);
  --iconoInstagram4: url(../img/icons/04-INSTAGRAM.svg);
  --iconoWAHeader: url(../img/icons/icono-whatsApp-header.svg);
  --iconoGithub: url(../img/icons/iconoGithub.svg);
  --iconoGithubSQ: url(../img/icons/iconoGithubSQ.svg);
  --iconoYoutube: url(../img/icons/iconoYoutube.svg);
  --iconoYoutubeSQ: url(../img/icons/iconoYoutubSq.svg);
  --iconoleetcodeicon: url(../img/icons/leetcodeicon.svg);
  --iconleetcode: url(../img/icons/iconleetcode.svg);
  
  /* Tamaño textos */
  --tamanioTitulo: clamp(30px, 5vw, 50px);
  --tamanioTitulo2: clamp(20px, 5vw, 40px);
  --tamanioSUbtitulo2: clamp(18px, 4vw, 38px);
  --tamanioSubtitulo3: clamp(18px, 3vw, 30px);
  --tamanioDescripcion: clamp(14px, 2vw, 18px);
  --tamanioDescripcion2: clamp(10px, 2vw, 14px);
  --tamanioDescripcion3: clamp(16px, 2vw, 20px);
}

/* Barra de desplazamiento */
body::-webkit-scrollbar {
  width: 12px;
}

body::-webkit-scrollbar-track {
  background: var(--colorMorado);
}

body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--colorRojoLight);
}

/* ********************************************************************** */
/* **************************** PROPIEDADES ICONOS ********************** */
/* ********************************************************************** */
.icon {
  margin: 4px;
  vertical-align: middle;
  height: 22px;
  width: 22px;
  display: inline-block;
}

.icon2 {
  margin: 4px;
  vertical-align: middle;
  height: 34px;
  width: 34px;
  display: inline-block;  
  filter: sepia(100%) saturate(2%) hue-rotate(156deg) brightness(104%) contrast(101%); 
}

.icon7 {
  margin: 4px;
  vertical-align: middle;
  height: 37px;
  width: 37px;
  display: inline-block;  
}

.icon3 {
  margin: 4px;
  vertical-align: middle;
  height: 18px;
  width: 71px;
  display: inline-block;
  filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(156deg) brightness(104%) contrast(101%); 
}

.icon4 {
  margin: 4px;
  vertical-align: middle;
  height: 25px;
  width: 25px;
  display: inline-block;  
  filter: sepia(100%) saturate(2%) hue-rotate(156deg) brightness(104%) contrast(101%); 
}

.icon5 {
  margin: 4px;
  vertical-align: middle;
  height: 8px;
  width: 8px;
  display: inline-block;  
  filter: sepia(100%) saturate(2%) hue-rotate(156deg) brightness(104%) contrast(101%); 
}

.iconFooter {
  margin: 4px;
  vertical-align: middle;
  height: 22px;
  width: 22px;
  display: inline-block;
  filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(156deg) brightness(104%) contrast(101%); 
}

.iconFooter1 {
  margin: 4px;
  vertical-align: middle;
  height: 22px;
  width: 22px;
  display: inline-block;
}

.icon5 {
  margin: 4px;
  vertical-align: middle;
  height: 30px;
  width: 30px;
  display: inline-block;
}

.icon6 {
  margin: 4px;
  vertical-align: middle;
  height: 46px;
  width: 46px;
  display: inline-block;
}

.icon6:hover {
  transform: scale(1.3);
  transition: 0.5s transform ease-out;
}

.icon:hover {
  transform: scale(2);
  transition: 0.5s transform ease-out;
}

.icon_regresar {
  margin: 4px;
  vertical-align: middle;
  height: 22px;
  width: 22px;
  display: inline-block;
}
.icon_regresar:hover {
  transform: scale(1.2);
  transition: 0.5s transform ease-out;
}

.escalar_texto{
  transform: scale(1.2);
  transition: 0.5s transform ease-out;
}

.center_text_button{
  text-align: center;
}

/* ********************************************************************** */
/* ****************************** ASIGNACION ICONOS ********************* */
/* ********************************************************************** */
.icon__linkedin {
  background: var(--iconoLinkedIn) no-repeat;
}
.icon__facebook {
  background: var(--iconoFacebook) no-repeat;
}
.icon__twitter {
  background: var(--iconoTwitter) no-repeat;
}
.icon__instagram {
  background: var(--iconoInstagram) no-repeat;
}
.icon__pinterest {
  background: var(--iconoPinterest) no-repeat;
}
.icon__contacto {
  background: var(--iconoContacto) no-repeat;
}
.icon__direccion {
  background: var(--iconoDireccion) no-repeat;
}
.icon__telefono {
  background: var(--iconoTelefono) no-repeat;
}
.icon__email {
  background: var(--iconoEmail) no-repeat;
}
.icon__whatsapp1 {
  background: var(--iconoWhatsApp1) no-repeat;
}
.icon__Facebook1 {
  background: var(--iconoFacebook1) no-repeat;
}
.icon__Twitter1 {
  background: var(--iconoTwitter1) no-repeat;
}
.icon__Pinterest1 {
  background: var(--iconoPinterest1) no-repeat;
}
.icon__LinkedIn1 {
  background: var(--iconoLinkedIn1) no-repeat;
}
.icon__Instagram1 {
  background: var(--iconoInstagram1) no-repeat;
}
.icon__Instagram4{
  background: var(--iconoInstagram4) no-repeat;
}
.icon__Paypal1 {
  background: var(--iconoPayPal1) no-repeat;
}
.icon__Visa1 {
  background: var(--iconoVisa1) no-repeat;
}
.icon__MasterCard1 {
  background: var(--iconoMasterCard1) no-repeat;
}
.icon_WhatsApp2{
  background: var(--iconoWhatsApp2) no-repeat;
}
.icon__volver {
  background: var(--iconoVolver) no-repeat;
}
.icon__whats_App_header {
  background: var(--iconoWAHeader) no-repeat;
}

.icono__Github {
  background: var(--iconoGithub) no-repeat;
}
.icono__GithubSQ {
  background: var(--iconoGithubSQ) no-repeat;
}
.icono__Youtube {
  background: var(--iconoYoutube) no-repeat;
}
.icono__YoutubeSQ {
  background: var(--iconoYoutubeSQ) no-repeat;
}

.icono__leetcodew {
  background: var(--iconoleetcodeicon) no-repeat;
}

.icono__leetcodeg {
  background: var(--iconleetcode) no-repeat;
}

/* ********************************************************************** */
/* ****************************** ESTILOS BOTONES *********************** */
/* ********************************************************************** */

/* ¬¬¬¬¬¬¬¬¬ BOTON AZUL -> VERDE ¬¬¬¬¬¬ */
.btnAzul {
  background: var(--colorAzul);
  color: var(--colorMorado);
  /* border-radius: 25px; */
  border-radius: 15px 0 15px 0;
  padding: 10px 15px;
  text-transform: uppercase;
  font-size: clamp(10px, 2vw, 15px);
  font-weight: 500;
}
.btnAzul:hover {
  background: var(--colorVerde);
  color: var(--colorMorado);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

/* ¬¬¬¬¬¬¬¬¬¬¬ BOTON VERDE ¬¬¬¬¬¬¬¬¬¬¬¬¬*/
.btnVerde {
  background: var(--colorVerde);
  color: var(--colorMorado);
  border-radius: 5px;
  padding: 10px 15px;
  text-transform: uppercase;
  font-size: clamp(10px, 2vw, 15px);
  font-weight: 500;
}
.btnVerde:hover {
  background: var(--colorAzul);
  color: var(--colorBlanco);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

/* ¬¬¬¬¬¬¬¬¬¬¬ BOTON MORADO ¬¬¬¬¬¬¬¬¬¬¬¬¬*/
.btnRojoLight {
  background: var(--colorRojoLight);
  color: var(--colorBlanco);
  border-radius: 15px 0 15px 0;
  padding: 10px 15px;
  text-transform: uppercase;
  font-size: clamp(10px, 2vw, 15px);
  font-weight: 500;
}
.btnRojoLight:hover {
  background: var(--colorVerde);
  color: var(--colorMoradoDark);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

/* ¬¬¬¬¬¬¬¬¬ BOTON SIN FONDO -> HOVER AZUL ¬¬¬¬¬¬ */
.btnFondo {
  background: none;
  color: var(--colorBlanco);
  border: 1px solid var(--colorBlanco);
  padding: 7px 7px;
  text-transform: uppercase;
  font-size: clamp(9px, 2vw, 15px);
  font-weight: 400;
}
.btnFondo:hover {
  background: var(--colorAzul);
  border: 1px solid var(--colorAzul);
  color: var(--colorMorado);
  cursor: pointer;
  border: 0;
  transition: all 0.3s ease-in-out;
}

.btnFondo2 {
  background: none;
  color: var(--colorBlanco);
  border-radius: 4px;
  padding: 2px 2px;
  text-transform: uppercase;
  font-size: clamp(9px, 2vw, 15px);
  font-weight: 400;
}
.btnFondo2:hover {
  background: var(--colorAzul);
  color: var(--colorMorado);
  cursor: pointer;
  border: 0;
  transition: all 0.3s ease-in-out;
}

.btnFooterWP {
  color: var(--colorBlanco);
  font-size: clamp(1rem, 2vw, 15px);
  font-weight: 400;
  text-transform: none;
}

.btnFooterContacto {
  color: var(--colorAzul);
  font-size: clamp(2rem, 2vw, 15px);
  font-weight: 400;
  text-transform: none;
}

.linea_blanca{
  margin: 2rem 0;

}

.txt_color{
  color: var(--colorBlanco);
}

/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* -------------- A) CONTENEDOR PRESENTACION PAGINA INICIO  ------------- */
/* ------------------- HEADER Y BANNER PRINCIPAL INICIO ----------------- */
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
.contenedor {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  height: 100vh;
  background-image: url("../img/dh-web-design-fondo-inicio.webp");
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
  align-content: start;
  align-items: start;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬ HEADER | BARRA NAVEGACION | BOTON MOVIL | LOGO ¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */

.encabezado {
  display: flex;
  width: 100%;
  height: 60px;
  padding: 5px 15px;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: 9999;
}

/* ========== FONDO MOVIL BARRA NAVEGACION AL DESPLAZARSE ========= */
.fondo_encabezado{
  background-color: rgba(40, 33, 64, .95);
  transition: all 0.3s ease-in-out;
}

/* ========== 1- CONTENEDOR DIV BOTON HAMBURGESA =========== */
.encabezado_boton {
  width: 60px;
  height: 60px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: none;
  opacity: 0;
}

/* ¬¬¬¬¬¬¬¬¬¬¬ LINEA PRINCIPAL BOTON HAMBURGUEA ¬¬¬¬¬¬¬¬¬¬ */
.encabezado_boton-burger {
  width: 40px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 101, 47, 0.2);
  transition: all 0.5s ease-in-out;
}

/* ¬¬¬¬¬¬¬¬¬¬ LINEAS SECUNDARIA BOTON HAMBURGUEA ¬¬¬¬¬¬¬¬¬ */
.encabezado_boton-burger::before,
.encabezado_boton-burger::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 101, 47, 0.2);
  transition: all 0.5s ease-in-out;
}

/* ¬¬¬¬¬¬¬¬¬ MOVER LINEA SUPERIOR BOTON HAMBURGUEA ¬¬¬¬¬¬¬ */
.encabezado_boton-burger::before {
  transform: translateY(-16px);
}

/* ¬¬¬¬¬¬¬¬¬ MOVER LINEA INFERIOR HAMBURGUEA ¬¬¬¬¬¬¬ */
.encabezado_boton-burger::after {
  transform: translateY(16px);
}

/* ¬¬¬¬¬¬¬¬¬ ANIMAR ASIGNAR CLASE OPEN CON JS ¬¬¬¬¬¬ */
.encabezado_boton.open .encabezado_boton-burger {
  transform: translateX(-50px);
  background: transparent;
  box-shadow: none;
}
.encabezado_boton.open .encabezado_boton-burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}
.encabezado_boton.open .encabezado_boton-burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}

/* ========== 2. CONTENEDOR IMAGEN LOGO =========== */
.encabezado_logo {
  width: 13rem;
  opacity: 0;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬ ELEMENTOS UL BARRA NAVEGACION | BOTON CONTACTO  ¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.navegacion_menu {
  justify-content: space-around;
  width: 500px;
  display: flex;
  opacity: 0;
}

/* ¬¬¬¬¬¬¬¬¬ ITEMS MENU NAVEGACION ¬¬¬¬¬¬ */
.navegacion_menu-item, .navegacion_menu-item > a{
  color: #fff;
  text-transform: uppercase;
  font-size: 0.85rem;
  position: relative;
  text-align: center;
}

.navegacion_menu-item > a:hover {
  color: var(--colorMoradoDark);
}

/* ¬¬¬¬¬¬¬¬¬ HOVER - ITEMS MENU NAVEGACION ¬¬¬¬¬¬ */
.navegacion_menu-item:hover{
  cursor: pointer;
  width: 5.9rem;
  color: var(--colorMorado);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 5px 5px 0 0;
  transition: all 0.2s ease-in-out;
}

/* ¬¬¬¬¬¬¬¬¬ MOSTRAR BLOQUE SUBMENUS ¬¬¬¬¬¬ */
.navegacion_menu-item:hover > .submenu_lista,
.navegacion_menu-item:focus-within > .submenu_lista,
.submenu_lista:hover,
.submenu_lista:focus-within {
  cursor: pointer;
  visibility: visible;
  display: block;
}

/* ¬¬¬¬¬¬¬¬¬ OCULTAMOS EL ULTIMO ELEMENTO DEL SUBMENU ¬¬¬¬¬¬ */
.navegacion_menu-item:last-child {
  visibility: hidden;
  display: none;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ SIN FONDO ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬|*/
.navegacion_menu-item:last-child:hover {
  background-color: rgba(255, 255, 255, 0);
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬ SUBMENUS DE NAVEGACION ¬¬¬¬¬¬¬¬¬¬¬ */
.submenu_lista {
  position: absolute;
  cursor: default;
  width: 15vw;
  border-radius: 0 5px 5px 5px;
  padding: 0.5rem 0;
  line-height: 2rem;
  visibility: hidden;
  display: none;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 20;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬ ITEMS SUBMENUS ¬¬¬¬¬¬¬¬¬¬¬ */
.submenu_item {
  color: var(--colorMorado);
  text-align: left;
  padding: 0 0 0 2.5rem;
  font-size: 0.7rem;
}

.submenu_item > a {
  color: var(--colorMorado);
  text-align: left;
  font-size: 0.7rem;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬ ITEMS SUBMENUS HOVER ¬¬¬¬¬¬¬¬¬¬¬ */
.submenu_item:hover{
  background-color: var(--colorAzul);
  cursor: pointer;
  width: 100%;
  transition: all 0.3s ease-in-out;
}

.submenu_item {
  clear: both;
  width: 100%;
}

/* ¬¬¬¬¬¬¬¬¬4. BOTON CONTACTO ¬¬¬¬¬¬ */
.encabezado_contacto {
  opacity: 0;
}


.link_whatsapp_header{
  color: #fff;
  text-transform: uppercase;
  font-size: 0.85rem;
  position: relative;
  text-align: center;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ CONTENEDOR ICONOS SOCIALES MOVILES  ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.iconos-sociales--movil {
  display: flex;
  justify-content: space-between;
  width: 85vw;
  height: 6vh;
  position: relative;
  padding: 10px;
}

/* ¬¬¬¬¬¬¬¬¬ LINEA INFERIOR ICONOS SOCIALES ¬¬¬¬¬¬ */
.iconos-sociales--movil:before {
  content: "";
  position: absolute;
  border: 1px solid #fff;
  width: 100%;
  top: -0.5rem;
  left: 0;
}

/* ¬¬¬¬¬¬¬¬¬ EFECTO HOVER ICONOS SOCIALES ¬¬¬¬¬¬ */
.iconos-sociales--movil:hover {
  cursor: pointer;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬ CONTENEDOR BANER INFORMATIVO PAGINA INICIO  ¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.banner_inicio {
  display: grid;
  grid-template-columns: 60% auto;
  align-items: start;
  align-self: start;
  margin-top: 10rem;
}

/* ========== 2-1 CONTENEDOR IZQUIERDA =========== */
.banner_inicio-izquierda {
  padding: 10px 5px 20px 5px;
}

/* ¬¬¬¬¬¬¬¬¬ CONTENEDOR ICONOS SOCIALES ¬¬¬¬¬¬ */
.banner_inicio-sociales {
  display: flex;
  justify-content: space-between;
  height: 30%;
  flex-direction: column;
  position: absolute;
  top: 30%;
  left: 0;
  padding: 10px;
  transform: translateX(-100%);
}

/* ¬¬¬¬¬¬¬¬¬ LINEA INFERIOR ICONOS SOCIALES ¬¬¬¬¬¬ */
.banner_inicio-sociales:before {
  content: "";
  position: absolute;
  border: 1px solid #fff;
  width: 25px;
  top: -25px;
  left: 12px;
  transform: rotate(-90deg);
}

.banner_inicio-sociales:after {
  content: "";
  position: absolute;
  border: 1px solid #fff;
  width: 25px;
  top: 290px;
  left: 12px;
  transform: rotate(-90deg);
}

/* ¬¬¬¬¬¬¬¬¬ EFECTO HOVER ICONOS SOCIALES ¬¬¬¬¬¬ */
.banner_inicio-sociales:hover {
  cursor: pointer;
}

/* ¬¬¬¬¬¬¬¬¬ TITULO INICIO ¬¬¬¬¬¬ */
.banner_titulo {
  font-size: var(--tamanioTitulo);
  color: #fff;
  margin: 15px 80px;
  opacity: 0;
  transform: translateY(-120%);
}

/* ¬¬¬¬¬¬¬¬¬ DESCRIPCION INICIO ¬¬¬¬¬¬ */
.banner_descripcion {
  font-size: var(--tamanioDescripcion);
  color: #fff;
  margin: 15px 105px 35px 80px;
  line-height: 30px;
  opacity: 0;
  transform: translateY(-120%);
}

/* ¬¬¬¬¬¬¬¬¬ BOTON INICIO ¬¬¬¬¬¬ */
.banner_boton {
  margin: 150px 105px 15px 80px;
  opacity: 0;
}

/* ========== 2-2 CONTENEDOR DERECHA =========== */
.banner_inicio-derecha {
  padding: 100px 50px 0 10px;
}

/* ¬¬¬¬¬¬¬¬¬ CONTENEDOR TARJETAS (<UL>) ¬¬¬¬¬¬ */
.banner_tarjetas {
  perspective: 1000px;
  opacity: 0;
  transform: translateX(-50%);
}

/* ¬¬¬¬¬¬¬¬¬ TARJETAS (<LI>) ¬¬¬¬¬¬ */
.banner_tarjetas-item {
  width: 95%;
  display: grid;
  grid-template-columns: 20% auto;
  border-radius: 10px;
  padding: 25px;
  margin: 0 25px;
  transform: rotateY(-30deg) rotateX(15deg);
  position: absolute;
  border-bottom: 4px solid rgba(0, 0, 0, 0.2);
  /* mix-blend-mode: multiply; */
}

/* ¬¬¬¬¬¬¬¬¬ FORMATO Y POSICION A TARJETAS  ¬¬¬¬¬¬ */
.banner_tarjetas-item:nth-child(1),
.banner_tarjetas-item:nth-child(2),
.banner_tarjetas-item:nth-child(3) {
  background: rgba(255, 255, 255, 0.6);
}

.banner_tarjetas-item:nth-child(1) {
  top: -115px;
  z-index: 2;
}
.banner_tarjetas-item:nth-child(2) {
  z-index: 1;
}
.banner_tarjetas-item:nth-child(3) {
  top: 120px;
}

/* ¬¬¬¬¬¬¬¬¬ EFECTO HOVER A TARJETAS  ¬¬¬¬¬¬ */
.banner_tarjetas-item:hover {
  background: rgba(255, 255, 255, .85);
  transform: rotateY(-22deg) rotateX(7deg) scale(1.03);
  transition: transform 0.4s ease-out;
  z-index: 3;
  mix-blend-mode: normal;
}

/* ¬¬¬¬¬¬¬¬¬ ICONO TARJETA  ¬¬¬¬¬¬ */
.tarjeta_icon {
  width: 100%;
}

/* ¬¬¬¬¬¬¬¬¬ TITULO TARJETA  ¬¬¬¬¬¬ */
.tarjeta_titulo {
  font-size: clamp(12px, 1.5vw, 18px);
  color: var(--colorMorado);
  padding: 0 30px;
  text-align: end;
}

/* ¬¬¬¬¬¬¬¬¬ DESCRIPCION TARJETA  ¬¬¬¬¬¬ */
.tarjeta_descripcion {
  font-size: clamp(4px, 1.5vw, 16px);
  color: var(--colorMorado);
  padding: 0 30px;
}

.link_tarjetas_iniciales{
  font-size: clamp(4px, 1.5vw, 16px);
  color: var(--colorMorado);
  text-transform: none;
}

/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* -------------- CONTENEDOR PRINCIPAL CONTENIDOS <main>  ------------ */
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
.principal{
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--colorMoradoDark);
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ SECCION INICIO ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio{
  display: flex;
  flex-direction: column;
  background-color: var(--colorMorado);
  background-size: cover;
  position: relative;
  overflow: hidden;
  height: auto;
  position: relative;
  padding-bottom: 3.5rem;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ FONDO SECCION ¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio_bg{
  width: 30%;
  height: 100%;
  clip-path: polygon(0 0, 23% 0, 23% 100%, 0% 100%);
  background-color: var(--colorMoradoDark);
  z-index: 1;
  left: 0;
  position: absolute;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Bloque Superior ¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio_top{
  z-index: 5;
  margin: 2rem 0 2rem 0;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Titulo ¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio_titulo{
  font-size: var(--tamanioTitulo2);
  color: var(--colorBlanco);
  text-align: center;
  padding: 1.5rem 0 0 0;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Estilo <span> ¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio_titulo > span{
  font-size: var(--tamanioTitulo2);
  color: var(--colorAzul);
  font-style: italic;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Bloque inferior ¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio_bottom{
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  z-index: 5;  
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Bloque inferior seccion izquierda ¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio_izq{
  width: 85%;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Imagen bloque ¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio_imagen{
  border-radius: 0 1.5rem 1.5rem 1.5rem;
  box-shadow: 25px 25px var(--colorRojoLight);
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Bloque inferior seccion derecha descripcion ¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio_descripcion{
  font-size: var(--tamanioDescripcion);
  color: var(--colorBlanco);
  padding: 1.5rem 0 1.5rem 0;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Lista  ¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio_lista{
  margin-bottom: 2rem;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Estilos lista  ¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio_lista li{
  position: relative;
  padding: 0 0 0 20px;
  font-size: var(--tamanioDescripcion);
  color: var(--colorBlanco);
  line-height: 2rem;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ flecha items lista  ¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio_lista li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  height: 6px;
  width: 6px;
  border: 1px solid var(--colorBlanco);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Boton  ¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio-boton{
  margin: 1.5rem 0 1.5rem 0;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ SECCION TITULO / CAJAS SERVICIOS ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio_top-servicios{
  z-index: 5;
  margin: 2rem 0 2rem 0;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Titulo ¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio_titulo-servicios{
  font-size: var(--tamanioTitulo2);
  color: var(--colorBlanco);
  text-align: center;
  padding: 1.5rem .7rem 0 .7rem;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Estilo <span> ¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio_titulo-servicios > span{
  font-size: var(--tamanioTitulo2);
  color: var(--colorAzul);
  font-style: italic;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬ CONTENEDOR CAJAS SERVICIOS PAGINA INICIO ¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio_cajas{
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  justify-items: center;
  padding: 1rem 3rem;
  position: relative;
  overflow: hidden;
  z-index: 5;  
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Cajas  ¬¬¬¬¬¬¬¬¬¬¬¬ */
.caja{
  width: 90%;
  border: 5px solid rgba(145, 145, 145, 0.2);
  box-shadow: 35px 35px 0px -25px rgba(145, 145, 145, 0.2);
  border-radius: 35px 0 35px 0;
  display: flex;
  align-content: center;
  padding: 1rem;
  overflow: hidden;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Caja seccion izquierda imagen  ¬¬¬¬¬¬¬¬¬¬¬¬ */
.caja_img{
  width: 20%;
  align-self: flex-start;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Caja seccion derecha  ¬¬¬¬¬¬¬¬¬¬¬¬ */
.caja_der{
  width: 80%;
  display: flex;
  flex-direction: column;
  padding: 0 .8rem 0 .8rem;
  align-items: baseline;
  color: #fff;
  overflow: hidden;
}

.caja_titulo{
  font-size: var(--tamanioSubtitulo3);
  padding-bottom: .7rem;
}

.caja_descripcion{
  font-size: var(--tamanioDescripcion);
  padding-bottom: .7rem;
  line-height: 1.7rem;
  font-weight: normal;
}

.caja_boton{  
  margin-top: auto;
  margin-right: auto;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ PRESENTACION PORTAFOLIO ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_uno{
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  background-color: var(--colorMorado);
  padding: 3rem .5rem 3rem .5rem;
  position: relative;
  overflow: hidden;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬ Imagenes fondo ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.bg, .bg2{
  position: absolute;
}

.bg{
  width: 50%;
  height: 100%;
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  background-color: var(--colorMoradoDark);
  z-index: 1;
  left: -100px;
}

.bg2{
  right: 0;
  bottom: 0;
  z-index: 1;
}

.slogan{
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: rgba(255, 255, 255, .3);
  font-size: var(--tamanioTitulo);
  z-index: 10;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ CONTENEDORES BLOQUE IZQ Y DER ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬*/
.seccion_uno_item{  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 1.2rem;
  padding: 1rem;
  position: relative;
  height: auto;
  z-index: 5;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Titulo ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion__uno-titulo{
  font-size: var(--tamanioTitulo);
  color: var(--colorBlanco);
  padding-bottom: 2rem;
}

.seccion__uno-titulo > span{
  font-size: var(--tamanioTitulo);
  color: var(--colorAzul);
  font-style: italic;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Descripcion ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion__uno-descripcion{
  font-size: var(--tamanioSubtitulo3);
  color: var(--colorBlanco);
  padding-bottom: 2rem;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Boton ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion__uno-boton{
  align-self: start;
}

/* ¬¬¬¬¬¬ Item derecha seccion uno ¬¬¬¬¬¬¬¬ */
.secc_uno_item_der{
  align-items: center;
}

/* ¬¬¬¬¬¬¬ contenedor grid imagenes ¬¬¬¬¬¬¬¬ */
.seccion2{
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 15px;
  transition: all 0.5s ease-in-out;
}

/* ¬¬¬¬¬¬¬¬ item 1 ¬¬¬¬¬¬¬¬ */
.item_img:nth-child(1){
  grid-column-start: 1;
  grid-column-end: 4;
}
.item_img:nth-child(1) > img{
  border-radius: 25px 0 25px 0;
  border-bottom: 4px solid rgba(255, 255, 255, 0.3);
}

/* ¬¬¬¬¬¬¬¬ item 2 ¬¬¬¬¬¬¬¬ */
.item_img:nth-child(2){
  grid-column-start: 1;
  grid-column-end: 3;  
}
.item_img:nth-child(2) > img,
.item_img:nth-child(3) > img{
  border-radius: 0 30px 0 30px; 
  border-bottom: 4px solid rgba(255, 255, 255, 0.3);
}

/* ¬¬¬¬¬¬¬¬ item 3 ¬¬¬¬¬¬¬¬ */
.item_img:nth-child(3){
  grid-column-start: 3;
  grid-column-end: 4;
}
.item_img > img:hover{
  transform: scale(1.2);
  transition: transform 0.8s ease-out;  
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ SECCION PORTAFOLIO ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_portafolio{
  margin: 2rem 0;
  position: relative;
  max-width: 100%;
  display: flex;
  overflow: hidden;
  z-index: 8888;
}

.item_portafolio{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-flow: dense;  
  gap: 10px;
  padding: 1rem;
  width: 400px;
  animation: moverItemsSlide 60s linear infinite;
}

.item_portafolio--pausa{
  animation-play-state: paused;
}

.item_efecto{
  overflow: initial;
  position: relative;
}

.item_efecto img{
  position: relative;
  transition: transform .5s;
  z-index: 20;
}

.item_efecto:hover img{
  transform: scale(1.06);
  z-index: 20;
}

.portafolio_textos{
  display: flex;
  flex-direction: column;
  align-content: space-between;
  position: absolute;
  border-radius: 20px 5px 20px 5px;
  color: var(--colorBlanco);
  background: rgba(40, 33, 64, .8);
  transition: transform .5s;
  width: 98%;
  padding: .8rem 1.5rem;
}

.item_efecto:hover .portafolio_textos {
  transform: translateX(-3px);
  z-index: 20;
}

.portafolio_titulo{
  font-size: var(--tamanioDescripcion3);
  text-transform: uppercase;
  padding-bottom: 2rem;
}

.portafolio_descripcion{
  font-size: var(--tamanioDescripcion);
  padding-bottom: 2rem;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ SECCION CASOS ESTUDIO / TESTIMONOOS ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_casos-estudios{
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  background-color: var(--colorMoradoDark);
  padding: 2rem .5rem 2rem .5rem;
  position: relative;
  overflow: hidden;
}

/* *** bloques contenedores (izq y der)*/
.seccion_casos-estudios--item{  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 1.2rem;
  padding: 1rem;
  position: relative;
  height: auto;
  z-index: 5;
}

.seccion__casos-titulo{
  font-size: var(--tamanioTitulo);
  color: var(--colorBlanco);
  border: 5px solid rgba(145, 145, 145, 0.2);
  box-shadow: 35px 35px 0px -25px rgba(145, 145, 145, .2);
  border-radius: 35px 0 35px 0;
  padding: 1rem;
  margin-bottom: 3rem;
}

.seccion__casos-titulo > span{
  font-size: var(--tamanioTitulo);
  color: var(--colorAzul);
  font-style: italic;
}

.seccion__casos-descripcion{
  font-size: var(--tamanioSubtitulo3);
  color: var(--colorBlanco);
  padding-bottom: 2rem;
}

.extra-margen{
  padding-left: 2.5rem;
  position: relative;
}

.extra-margen:before{
  content: "";
  position: absolute;
  border: 7px solid var(--colorAzul);
  width: 25%;
  top: 39%;
  left: -12%;
  transform: rotate(90deg);
}

.margen_boton{
  margin-left: 2.5rem;
}

/* ¬¬¬¬¬¬¬¬ TESTIMONINOS ¬¬¬¬¬¬¬¬ */
.secc_casos_item_der{
  position: relative;
}

/* contenedor slide testimonios*/
.contenedor-slide{
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* contenedor citas testimonios (globo mensaje)*/
.bg3{
  position: absolute;
  width: 100%;
  height: 105%;
  border-radius: 15px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 75% 90%, 43% 100%, 50% 90%, 0 90%);
  background-color: rgba(57, 57, 77, .4);
  z-index: -1;
  top: 0;
  right: 0;
}

.slides {
  /* display: none; */
  padding: 1rem 40px;
  text-align: center;
  height: 100%;  
}

.seccion__testimonios-titulo{
  margin-bottom: .3rem;
}

.seccion__testimonios-titulo > span{
  font-size: var(--tamanioSubtitulo3);
  color: var(--colorAzul);
  font-style: italic;
}

.cita{
  font-size: var(--tamanioSubtitulo3);
  font-family: 'Roboto Light';
  margin-top: 1rem;
  font-style: italic;
  color: #fff;
}

.cita > footer{
  margin: 1rem 0;
}

.autor {  
  color: var(--colorVerde);
  font-size: var(--tamanioDescripcion3);
  font-weight: normal;
}

/* flechas anterior siguiente*/
#anterior, #siguiente {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 16px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

#siguiente {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

#anterior:hover, #siguiente:hover {
  background-color: var(--colorMoradoLight);
  color: white;
}
/* FIN TEST FELCHAS*/

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ SECCION LOGOS CLIENTES / MARCAS ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_marcas{
  display: flex;
  flex-direction: column;
  background-size: cover;
  position: relative;
  overflow: hidden;
  height: auto;
  position: relative;
  margin-bottom: 2rem;
}

.seccion_marcas_top{
  z-index: 5;
  margin: 2rem 0 2rem 0;
}

.seccion_marcas_titulo{
  font-size: var(--tamanioTitulo2);
  color: var(--colorBlanco);
  text-align: center;
  padding: 1.5rem 0 0 0;
}

.seccion_marcas_titulo > span{
  font-size: var(--tamanioTitulo2);
  color: var(--colorAzul);
  font-style: italic;
}

.seccion_marcas_bottom{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  z-index: 5;  
}

.item_efecto-marcas img{
  filter: grayscale(1);
  background-color: rgba(255, 255, 255, 0);
  transition: all .5s; 
  z-index: 20;
  opacity: 0.8;
  
}

.item_efecto-marcas:hover img{
  filter: none;
  transform: scale(1.06);
  z-index: 20;
  border-radius: 15px 0 15px 0;
  opacity: 1;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ SECCION CONTACTO PRE-FOOTER ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_contacto{
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  justify-content: space-evenly;
  position: relative;
  overflow: hidden;
  z-index: 5;  
  background-color: var(--colorAzul);
  height: 300px; /* cambiar en tablets y cel*/
}

.seccion_contacto_izq,
.seccion_contacto_der{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.seccion_contacto_izq{
  padding: 2rem 1.5rem;
  align-items: flex-end;
}

.seccion_contacto_titulo{
  font-size: var(--tamanioTitulo);
  color: var(--colorBlanco);
  padding: 2rem;
  text-align: center;
}

.seccion_contacto-boton{
  align-self: center;
}

.seccion_contacto_img{
  height: 300px;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ SECCION FOOTER ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.footer{
  background-image: url("../img/dh-web-design-fondo-inicio.webp");
  object-fit: contain;
  object-position: right;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  padding: 1.5rem 0 0 0;
}

/* CONTENEDORES */
.footer_uno,
.footer_dos,
.footer_tres,
.footer_cuatro{
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 100%; 
}

.footer_logo{
  height: 45px;
}

.footer_dos{
  padding: .7rem 0;
}

.footer_centro-datos{
  display: flex;
  width: auto;
  justify-content: center;
  padding: 0 1rem;
  overflow: hidden;  
}

.footer_datos-uno{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem;
  line-height: 1.5rem;
  color: var(--colorBlanco);
  font-weight: lighter;
  letter-spacing: 1px;
}

.footer_tres{
  padding: 0 0 1.5rem 0;
}

.footer_cuatro{
  /* padding: 0 0 .7rem 0; */
  border-top: 1px solid var(--colorGrisLighter);
}

.footer_aviso-uno{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .3rem 1rem;
  line-height: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: lighter;
  letter-spacing: 1px;
  font-size: 12px;
}


/* **************************************************************** */
/* **************************************************************** */
/* **************************************************************** */
/* ************************** PAGINAS WEB ************************* */
/* **************************************************************** */
/* **************************************************************** */
/* **************************************************************** */
/* **************************************************************** */

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬ ENCABEZADO MENU Y BANNER INICIAL INICIO ¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.contenedor_inicial_paginas {
  display: grid;
  grid-template-columns: 1fr;
  height: auto;
  overflow: hidden;
  align-content: start;
  align-items: start;  
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ HEADER ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬ BARRA DE NAVEGACION ¬¬¬¬¬ */

.encabezado_paginas {
  display: flex;
  width: 100%;
  height: 60px;
  padding: 5px 15px;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: 9999;
  background-color: rgba(40,33,64, .94);
  box-shadow: 0px 2px 8px 0px rgba(47,51,91,1);
}

/* ¬¬¬¬¬¬¬¬ 02 DIV CONTENEDOR BANER INICIO ¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.banner_inicio_paginas {
  display: grid;
  height: calc(100% - 60px);
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  margin-top: 60px;
  background-color: var(--colorAzul2);
  position: relative;
}

.banner_inicio_paginas2 {
  display: grid;
  /* height: calc(auto - 60px); */
  height: calc(100% - 60px);
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  margin-top: 60px;
  /* background-color: var(--colorAzul2); */
  background-color: var(--colorRojoLight);
  position: relative;
}

.banner_inicio_proyectos {
  display: grid;
  /* height: calc(auto - 60px); */
  height: calc(100% - 60px);
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  margin-top: 60px;
  /* background-color: var(--colorAzul2); */
  background-color: var(--colorAzul3);
  position: relative;
}

.bg_fondo_geom{
  width: 250%;
  position: absolute;
  opacity: .4;
  top: -110px;
  left: -860px;
}

/* ========== 2-1 CONTENEDOR IZQUIERDA =========== */
.paginas_inicio-izquierda {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  padding: 3rem 1.8rem;
  z-index: 8888;
}

/* ========== 2-2 CONTENEDOR DERECHA =========== */
.paginas_inicio-derecha {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  z-index: 7777;
}

/* ========== PAGINAS: TITULO Y DESCRIPCION BANNER INICIAL =========== */
.paginas_titulo {
  font-size: var(--tamanioTitulo);
  color: var(--colorBlanco);
  padding: 0 1.8rem 0 0;
  opacity: 0;
}

.paginas_titulo > span {
  font-size: var(--tamanioTitulo);
  color: var(--colorBlanco);
  font-style: italic;
}

.paginas_descripcion {
  font-size: var(--tamanioDescripcion3);
  color: var(--colorGris);
  line-height: 30px;
  padding: 1rem 2rem 0 0;
  opacity: 0;
}

.paginas_descripcion > span {
  font-size: var(--tamanioSubtitulo2);
  font-weight: bolder;
  color: var(--colorBlanco);
  font-style: italic;
}

/* ========== IMAGENES INICIALES PAGINAS =========== */
/* img pagina quienes somos | marketing | software | soporte */
.bg_inicio{
  height: 25rem;
  padding: 3rem 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0);
}

.bg_inicio2{
  height: 23rem;
  padding: 3rem 2rem;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0);
}

/* img pagina diseño web */
.bg_inicio_dw{
  height: 25rem;
  padding: 2rem 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0);
}

/* img pagina desarrollo web */
.bg_inicio_desarrollo_web{
  height: 30rem;
  padding: 3rem 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0);
}

/* img pagina comercio electronico */
.bg_inicio_tienda{
  height: 30rem;
  padding: 2rem 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0);
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬ QUIENES SOMOS BLOQUE INICIAL  ¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicial{
  display: flex;
  flex-direction: column;
  background-color: var(--colorMorado);
  background-size: cover;
  position: relative;
  overflow: hidden;
  height: auto;
  position: relative;
  padding-bottom: 1rem;
}

.inicio_paginas_bloque1{
  z-index: 5;
  margin: 2.5rem 2rem 1rem 2rem;
  opacity: 0;
}

.paginas_subtitulo{
  font-size: var(--tamanioTitulo2);
  color: var(--colorBlanco);
}

.inicio_paginas_bloque2{
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  padding: 1.5rem 1.5rem 0 1.5rem;
  position: relative;
  overflow: hidden;
  z-index: 5;  
}

.paginas_inicio_izq{
  width: 95%;
  padding: 1.5rem;
  border-radius: 1.5rem 0 1.5rem 0;
  opacity: 0;
}

.paginas_inicio_imagen{
  border-radius: 1.5rem 0 1.5rem 0;
  box-shadow: 1.2rem 4.1rem 0 -2.4rem  var(--colorRojoLight);
}

.paginas_inicio_izq:before{
  content: "";
  position: absolute;
  border: 100px solid var(--colorRojoLight);
  width: 7rem;
  top: 2rem;
  left: .7em;
  transform: rotate(-200deg);
  border-radius: 1.5rem;
  z-index: -1;
}

.paginas_inicio_der{
  /* padding: 1.5rem 2rem 0 2rem; */
  padding: 1rem 2rem;
  opacity: 0;
}

.paginas_inicio_der > p:nth-child(1),
.paginas_inicio_der > p:nth-child(2),
.paginas_inicio_der > p:nth-child(3){
  margin-bottom: 1rem;
}

.paginas_inicio_descripcion{
  font-size: var(--tamanioDescripcion); 
  color: var(--colorBlanco);
  font-weight: lighter;
  letter-spacing: .05rem;
}

.paginas_inicio_descripcion:nth-child(2) > span{
  color: var(--colorAzul);
  font-size: var(--tamanioDescripcion3);
  font-family: 'Roboto Light';
}

.paginas_inicio_descripcion:nth-child(3) > span{
  color: var(--colorAzul);
  text-transform: uppercase;
  font-size: var(--tamanioDescripcion);
  font-style: italic;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬ QUIENES SOMOS SEGUNDO BLOQUE  ¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ QUE HACEMOS ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.seccion_inicio_paginas{
  display: flex;
  flex-direction: column;
  background-color: var(--colorMorado);
  background-size: cover;
  overflow: hidden;
  height: auto;
  position: relative;
  padding-bottom: 3.5rem;
} 

.inicio_paginas_bloque3{
  z-index: 5;
  margin: 2.5rem 2rem 1rem 2rem;
}

.paginas_subtitulo_b3{
  font-size: var(--tamanioTitulo2);
  color: var(--colorBlanco);
}

.inicio_paginas-bloque4{
  display: flex;
  padding: 1rem 1rem;
  height: auto;
}

.bloque2_izquierda{
  width: 17rem;
  z-index: 2;
}

.bloque2_derecha{
  padding: 0 0 0 1.5rem;
  flex: 1;
  height: auto;
  display: grid; 
  column-gap: 1.5rem;
  row-gap: 4.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* ==== CONTENEDOR BLOQUE CAJAS SERVICIOS ==== */
.bloque2_derecha-item{
  border-left: 1px solid var(--colorBlanco);
  display: flex;
  align-content: center;
  padding: 1rem;
  overflow: hidden;
}

/* ===================================== */
/* ========== CAJAS SERVICIOS ========== */
.caja_servicios{
  width: 100%;
  display: flex;
  align-content: center;
  padding: 1rem;
  overflow: hidden;
}

.caja_botones_pago{
  width: 100%;
  background-color: rgba(255, 255, 255, .60);
  padding: 8px;
  border-radius: 6px;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Caja seccion izquierda imagen  ¬¬¬¬¬¬¬¬¬¬¬¬ */
.caja_img_servicios{
  width: 20%;
  align-self: flex-start;
}

.img-tamanio{
  width: 10%;
  align-self: flex-start;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Caja seccion derecha  ¬¬¬¬¬¬¬¬¬¬¬¬ */
.caja_der_servicios{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 .8rem 0 .8rem;
  align-items: baseline;
  color: #fff;
  overflow: hidden;
}

.caja_titulo_servicios{
  font-size: var(--tamanioDescripcion3);
  font-family: 'Roboto Light';
  padding-bottom: .7rem;
}

.caja_descripcion_servicios{
  font-size: var(--tamanioDescripcion2);
  padding-bottom: .7rem;
  line-height: 1.7rem;
  font-family: 'Roboto Light';
}

/* ¬¬¬¬ LISTA ITEMS CAJA SERVICIOS QUIENES SOMOS ¬¬¬¬ */
.caja_lista_items{
  margin-bottom: 2rem;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Estilos lista  ¬¬¬¬¬¬¬¬¬¬¬¬ */
.caja_lista_items li{
  position: relative;
  padding: 0 0 0 20px;
  font-family: 'Roboto Light';
  color: var(--colorBlanco);
  line-height: 1.6rem;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ flecha items lista  ¬¬¬¬¬¬¬¬¬¬¬¬ */
.caja_lista_items li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 6.5px;
  height: 6px;
  width: 6px;
  border: 1px solid var(--colorBlanco);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

.caja_boton_servicios{  
  margin-top: auto;
  margin-right: auto;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬ QUIENES SOMOS TERCER BLOQUE ¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ EXPERIENCIA ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.bg_experiencia{
  position: absolute;
  width: 50%;
  height: 100%;
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  background-color: var(--colorMoradoDark);
  z-index: 1;
  left: -100px;
}

/* ====================================== */
/* ========== TABS EXPERIENCIA ========== */

.tabs{
  display: flex;
  width: 100%;
  padding-left: 2rem;
}

.tabs_lateral{
  width: 12rem;
  flex-shrink: 0;
  background: none;
}

.tabs_boton{
  display: block;
  padding: 10px;
  border: none;
  width: 100%;
  outline: none;
  cursor: pointer;
  background: none;
  text-align: left;
  color: var(--colorBlanco);
  font-family: 'Roboto Light';
  text-transform: uppercase;
}

.tabs_boton--active{
  color: var(--colorAzul);
  border-left: 2px solid var(--colorAzul);
  background: var(--colorMoradoDark);
  transition: all 0.2s ease-in-out;
}

.tabs_contenido{
  padding: 15px;
  font-size: 0.8rem;
  display: none;
  border-left: 1px solid var(--colorGrisLighter);
}

.tabs_contenido--active{
  display: flex;
  justify-content: space-around;
  width: 100%; 
  opacity: 0;
  animation: moverXTabs 0.2s ease-in 0.2s forwards;
}

.tabs_listas{ 
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-around;
  border-right: 1px solid var(--colorBlanco);
}

.tabs_listas li{
  padding: 0 1rem 1.4rem 0;
  color: var(--colorBlanco);
  font-family: 'Roboto';
  font-size: .9rem;
  letter-spacing: .1rem;
  color: var(--colorAzul); 
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ CUARTO BLOQUE ¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬  ENFOQUE  ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */

.seccion_paginas_cuarto_bloque{
  z-index: 5;
  margin: 0 2rem 0 2rem;
}

.paginas_inicio_descripcion--dos{
  font-size: var(--tamanioDescripcion); 
  color: var(--colorBlanco);
  font-weight: lighter;
  letter-spacing: .05rem;
  margin: 0 2rem 2rem 0;
}

.paginas_inicio_descripcion--tres{
  font-size: var(--tamanioDescripcion); 
  color: var(--colorBlanco);
  font-weight: lighter;
  /* letter-spacing: .05rem; */
  margin: 0 2rem 2rem 0;
  font-family: 'Roboto Light';
}

.paginas_inicio_descripcion--tres > span{
  color: var(--colorVerde);
  font-weight: 900;
  font-family: 'Roboto Light';
  font-size: var(--tamanioSubtitulo3);
  font-style: italic;
  /* letter-spacing: 1.5px; */
  /* word-spacing: 2px; */
}

.seccion_inicio_cajas--enfoque{
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  justify-content: space-evenly;
  padding: 1rem 3rem;
  position: relative;
  overflow: hidden;
  z-index: 5; 
}

.caja_enfoque{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 1rem;
  overflow: hidden;
  border-bottom: 1px solid var(--colorGrisLighter);
}

.caja_der--enfoque{
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 .8rem 0 .8rem;
  justify-content: space-evenly;
  align-items: center;
  color: #fff;
  overflow: hidden;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Caja seccion izquierda imagen  ¬¬¬¬¬¬¬¬¬¬¬¬ */
.caja_img--enfoque{
  width: 20%;
}

.caja_titulo--enfoque{
  font-family: 'Roboto Light';
  font-weight: lighter;
  letter-spacing: .1rem;
  font-size: var(--tamanioSubtitulo3);
  padding: .7rem 0;
}

.caja_descripcion--enfoque{
  text-align: center;
  font-size: var(--tamanioDescripcion);
  padding-bottom: .7rem;
  line-height: 1.7rem;
  font-weight: normal;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬ TESTIMONIOS BLOQUE INICIAL CLIENTES ¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬ descripcion  ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬  */
.testimonios_inicio_descripcion{
  font-size: var(--tamanioDescripcion); 
  color: var(--colorBlanco);
  font-weight: lighter;
  letter-spacing: .05rem;
  margin: 1.5rem 0;
}

.testimonios_inicio_descripcion > span{
  color: var(--colorAzul);
  font-size: var(--tamanioDescripcion3);
  font-family: 'Roboto Light';
}

.testimonios_bloque2_izquierda{
  width: 17rem;
  border-right: 1px solid #ffffff50;
}

.testimonios_bloque2_derecha{
  padding: 0 0 0 1.5rem;
  flex: 1;
  height: auto;
  display: grid; 
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* ¬¬¬¬¬¬¬¬¬¬¬ cajas testimonios ¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.caja_testimonios-item{
  background: rgba(29, 24, 46, .7);
  border-radius: 8px;
  display: flex;  
  flex-flow: column;
  justify-content: flex-start;
  padding: 1rem;
  overflow: hidden;
}

.testimonios_encabezado{
  display: flex;
  justify-content: space-between;
  margin-bottom: .7rem;
}

.caja_testimonios{
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.caja_testimonios:hover{
  cursor: pointer;
  transform: scale(1.03);
  transition: transform 0.8s ease-out;
}

.caja_der_testimonios{
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  padding: 0 .8rem 0 .8rem;
  color: #fff;
  overflow: hidden;
}

.caja_titulo_testimonios{
  font-size: var(--tamanioDescripcion3);
  font-family: 'Roboto Light';
}

.cita_testimonio{
  font-size: var(--tamanioDescripcion);
  font-family: 'Roboto Light';
  font-style: italic;
  color: #fff;
  margin: 1rem 0;
}

.autor_testimonio {  
  color: var(--colorBlanco);
  font-size: var(--tamanioDescripcion);
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0;
}

.cita_testimonio > footer{
  margin: .5rem 0;
}

.caja_der_testimonios > p{
  align-self: flex-end;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬ SECCION CLIENTES LOGO - TESTIMONIOS  ¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.testimonios_logos_descripcion{
    font-size: var(--tamanioDescripcion); 
    color: var(--colorBlanco);
    font-weight: lighter;
    letter-spacing: .05rem;
    margin: 0 0 1.5rem 0;
  }
  
  .testimonios_logos_descripcion > span{
    color: var(--colorAzul);
    font-size: var(--tamanioDescripcion3);
    font-family: 'Roboto Light';
  }


.testimonios_imagenes_logos{
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    justify-content: space-evenly;
    padding: 5rem 3rem 0 3rem;
    position: relative;
    overflow: hidden;
    z-index: 5;  
  }
  
.testimonios_logos {
    width: 75vw;
    height: auto;
    margin: -5vw auto 0;
    list-style: none;
    display: grid;
    gap: .7rem;
    /* grid-template-columns: repeat(17, 5vw);
    grid-template-rows: repeat(16, 9vw); */
    grid-template-columns: repeat(17, 5vw);
    grid-template-rows: repeat(18, 9vw);
}

.testimonios_logos_img:hover{
    cursor: pointer;
    transform: scale(1.1);
    transition: transform .5s ease-in-out;
}
  
.testimonios_logos-clientes {
    width: 20vw;
    height: 18vw;
    grid-area: span 2 / span 4;
    clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
}


.testimonios_logos > li:nth-child(2n + 1) {
    margin-top: 9vw;
}
  
.testimonios_logos > li:nth-child(2n) {
    margin-left: -5vw;
}
  
.testimonios_logos > li:nth-child(4n + 3) {
    margin-left: -10vw;
}
  
.testimonios_logos > li:nth-child(4n + 4) {
    margin-left: -15vw;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ AVISO DE PRIVACIDAD  ¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.aviso_subtitulo{
  font-family: 'Roboto Light';
  color: var(--colorBlanco);
  font-size: var(--tamanioSubtitulo3);
}


/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ PAGINA CONTACTO ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.contacto_paginas-bloque4{
  display: flex;
  height: auto;
}

.contacto_bloque2_izquierda{
  width: 30rem;
  display: grid;
  grid-template-columns: 1fr;
  padding: 2rem 2rem;
  background-image: url("../img/img_contacto1.jpg");
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
  align-content: start;
  align-items: start;
  opacity: 0;
}

.encabezado_contacto_titulo{
  font-family: 'Roboto';
  font-weight: 800;
  /* font-weight: lighter; */
  font-size: var(--tamanioSUbtitulo2);
  letter-spacing: .1rem;
  color: var(--colorBlanco);
}

.encabezado_contacto_subtitulo{
  font-family: 'Roboto Light';
  font-weight: lighter;
  color: var(--colorBlanco);
  letter-spacing: .1rem;
  font-size: var(--tamanioDescripcion3);
  padding: 3rem 0 1rem 0;
}

.contacto_boton_dos{  
  margin-top: auto;
  margin-right: auto;
  width: 23rem;
  text-align: center;
  color: var(--colorBlanco);
  font-family: 'Roboto';
  font-weight: 900;
  font-size: var(--tamanioSubtitulo3);
  letter-spacing: .1rem;
  margin-bottom: 3rem;
}

.contacto_datos{
  padding: 1rem 0 0 0;
  font-family: 'Roboto';
  font-size: var(--tamanioDescripcion);
  font-weight: 900;
  letter-spacing: .1rem;
  color: var(--colorBlanco);
}

.contacto_datos > span{
  font-family: 'Roboto Light';
  font-weight: lighter;
  font-size: var(--tamanioDescripcion);
  color: var(--colorAzul);
}

.contacto_footer_sociales{  
  display: flex;
  width: 100%;
  justify-content: flex-start;
  padding: 2rem 0;
  overflow: hidden;  
}

.contacto_bloque2_derecha_ini{
  flex: 1;
  height: auto;
  display: grid; 
  grid-template-columns: 1fr;
  align-content: start;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Titulo ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.contacto_derecha-titulo{
  font-size: var(--tamanioTitulo);
  color: var(--colorBlanco);
  padding: 2rem 1rem 1rem 0;
}

.contacto_derecha-titulo > span{
  font-size: var(--tamanioTitulo);
  color: var(--colorAzul);
  font-style: italic;
}

.contacto_bloque2_derecha{
  padding: 0 0 0 1.5rem;
  flex: 1;
  height: auto;
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

.contacto_bloque2_derecha-item{
  padding: 0 0;
  overflow: hidden;
}

.contacto_caja_der_servicios{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 0;
  align-items: baseline;
  color: #fff;
  overflow: hidden;
}

/* #contactoForm input:not([type="submit"]),  */
#contactoForm input[type='text'], 
#contactoForm input[type='email'],
#contactoForm input[type='tel'],
#contactoForm select, 
#contactoForm textarea{
	border:dashed 1px #fff;
	background: rgb(245, 231, 245);
	border-radius: 5px;
	color: black;
}

#contactoForm textarea.contactoForm_elemento-dimension{
	width: 90%;
	height: 8rem;
	margin:5px 0 0 0;
	padding:8px;
}

/*SELECTORES PARA EL PLACEHOLDER*/
#contactoform input:not([type="submit"])::placeholder,
#contactoform select::placeholder
#contactoform textarea::placeholder {
	color: var(--colorGrisLight); 
	font-family: 'Roboto Light'; 
	font-size: var(--tamanioDescripcion2);
}


#contactoForm input:not([type='submit']).contactoForm_elemento-dimension,
#contactoForm select.contactoForm_elemento-dimension{
	width: 90%;
	height: 3rem;
	margin:5px 0 0 0;
	padding:8px;
}

/* ¬¬¬¬¬¬¬¬¬ BOTON SUBMIT CONTACTO ¬¬¬¬¬¬ */
#contactoForm input[type='submit']{
	border: none;
  cursor: pointer;
  margin-top: 1.5rem;
  width: 10rem;
  background: var(--colorVerde);
  color: var(--colorBlanco);
  padding: 10px 15px;
  text-transform: uppercase;
  font-size: clamp(10px, 2vw, 15px);
  font-weight: 900;
  letter-spacing: .1rem;
}

#contactoForm input[type='submit']:hover{
	background: var(--colorAzul);
  color: var(--colorMorado);
  cursor: pointer;
  border: 0;
  transition: all 0.3s ease-in-out;
}

#contactoForm input:active,
#contactoForm select:active,
#contactoForm textarea:active{
  box-shadow: inset 0px 0px 9px 9px #303030;
}

#contactoForm input:focus,
#contactoForm select:focus,
#contactoForm textarea:focus{	
  box-shadow: inset 0px 0px 9px 9px #303030;
  box-shadow: 0px 0px 9px -1px var(--colorAzul);
}

.mensaje_formulario{
  background-color: var(--colorAdvertencia);
  width: 90%;
  padding: .7rem 1rem;
  text-align: center;
  text-transform: uppercase;
  border-radius: .5rem;
}

.ocultar--mensaje{
  display: none;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ PAGINA DISEÑO WEB ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.pag_disweb_bloque2{
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  padding: 1.5rem 1.5rem 2rem 1.5rem;
  position: relative;
  overflow: hidden;
  z-index: 5;  

}

.pag_disweb_izq{
  width: 95%;
  opacity: 0;
}

.pag_disweb_izq_imagen{
  border-radius: 1.5rem 0 1.5rem 0;
}

.pag_disweb_izq:before{
  content: "";
  position: absolute;
  border: 100px solid var(--colorRojoLight);
  width: 7rem;
  top: 2.8rem;
  left: 1.5em;
  transform: rotate(-200deg);
  border-radius: 1.5rem;
  z-index: -1;
}

.disweb_bloque2_izq{
  width: 30rem;
  display: grid;
  grid-template-columns: 1fr;
  padding: 2rem 2rem;
  background-image: url("../img/disenio-web-fondo.webp");
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
  justify-content: space-around;
  opacity: 0;
}

.paginas_disweb_bloque1{
  z-index: 5;
  margin: 0 2rem 2rem 2rem;
}

.disweb_bloque2_derecha{
  padding: 0 0 0 1.5rem;
  flex: 1;
  height: auto;
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.caja_der_servicios2{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 .8rem 0 .8rem;
  color: #fff;
  overflow: hidden;
}

/* ¬¬¬¬¬¬¬¬¬ Seccion galeria proyectos ¬¬¬¬¬¬¬ */

.disweb_galeria{
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 .8rem 0 .8rem;
  justify-content: space-evenly;
  align-items: center;
  overflow: hidden;
}

.escala{
  overflow: initial;
  position: relative;
}

.escala img{
  position: relative;
  /* transform-origin: desde donde queremos que empiece la animacion [eje horizontal right, eje vertical center] */
  transform-origin: right center;
  transition: transform .5s;
  z-index: 10;
}

.escala:hover img{
  transform: scale(.6) translateX(1.3rem);
}

.disweb_contenedor_textos{
  position: absolute;  
  transition: transform .5s;
  width: 12rem;
  height: 10rem;
  display: flex;
  padding: .5rem .5rem;
  flex-flow: column;
  background: var(--colorMoradoDark);
  justify-content: space-between;
}

.escala:hover .disweb_contenedor_textos{
  transform: translateX(-120px);
}

.disweb_contenedor_titulo{
  font-family: 'Roboto Light';
  font-size: 1rem;
  color: var(--colorBlanco);
  text-transform: uppercase;
  padding-bottom: 1rem;
}

.disweb_contenedor_descripcion{
  font-family: 'Roboto Light';
  font-weight: lighter;
  font-size: 1rem;
  color: var(--colorBlanco);
}

.disweb_contenedor_textos a{
  font-size: .8rem;
}

.disweb_botones{
  z-index: 5;
  margin: 2rem 2rem 0 2rem;
}

/* ¬¬¬¬¬¬¬¬¬ Seccion beneficios procesos ¬¬¬¬¬¬¬ */

.disweb_bloqueCajas_izq{
  width: 30rem;
  display: grid;
  grid-template-columns: 1fr;
  padding: 2rem 2rem;
  border-right: .1rem solid var(--colorGrisLighter);
  overflow: hidden;
  justify-content: space-around;
  opacity: 0;
}

.disweb_bloqueCajas_derecha{  
  flex: 1;
  height: auto;
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.disweb_caja_proceso{
  width: 100%;
  display: flex;
  flex-flow: column;
  padding: .8rem .8rem;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  overflow: hidden;
  border-bottom: .1rem solid var(--colorGrisLighter);
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ PAGINA DESARROLLO WEB ¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.pag_desarrollo_web_izq{
  width: 95%;
  opacity: 0;
}

.pag_desarrollo_web_izq_imagen{
  border-radius: 1.5rem 0 1.5rem 0;
}

.pag_desarrollo_web_izq:before{
  content: "";
  position: absolute;
  border: 100px solid var(--colorRojoLight);
  width: 9rem;
  top: 4rem;
  left: 7rem;
  transform: rotate(-200deg);
  border-radius: 1.5rem;
  z-index: -1;
}

/* ¬¬¬¬¬¬¬¬¬ Seccion soluciones y estrategias ¬¬¬¬¬¬¬ */

.desarrollo_web_proceso{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content: space-evenly;
  padding: 1rem 0;
  position: relative;
  overflow: hidden;
  z-index: 5; 
}

.desarrollo_web_cajas{
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--colorGrisLighter);
  padding: 1rem .5rem;
}

.desarrollo_web_caja_contenido{
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
  justify-content: space-evenly;
  align-items: center;
  color: #fff;
  overflow: hidden;
}

.desweb_caja_imagen{
  width: 30%;
}

.desweb_caja_titulo{
  font-family: 'Roboto Light';
  font-weight: lighter;
  letter-spacing: .1rem;
  font-size: var(--tamanioSubtitulo3);
  padding: .7rem 0;
}

.desweb_caja_descripcion{
  text-align: center;
  font-size: var(--tamanioDescripcion);
  padding-bottom: .7rem;
  line-height: 1.7rem;
  font-weight: normal;
}

/* ¬¬¬¬¬¬¬¬¬ Seccion mantenimiento ¬¬¬¬¬¬¬ */
.desarrollo_web_img_soporte{
  margin-top: 2rem;
}

.desarrollo_web_soporte_descripcion{
  font-family: 'Roboto Light';
  font-weight: lighter;
  color: var(--colorBlanco);  
  font-size: var(--tamanioDescripcion3);
  padding: 2rem 0 1rem 0;
}

.desweb_caja_der_soporte{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 .8rem 1.3rem .8rem;
  color: #fff;
  overflow: hidden;
}

.bloque_botones_desweb_soporte{
  z-index: 5;
  margin: 2rem 2rem 0 0;
}

.desweb_boton_experiencia{
  z-index: 5;
  margin: 2rem 0;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬ PAGINA MARKETING REDES SOCIALES ¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.blanco--activo{
  color: var(--colorBlanco);
}

.caja_img--marketing{
  width: 60%;
  margin-bottom: 1rem;
}

.fondo_subt--activo{
  background: var(--colorMorado);
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ CAJA PLANES ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.caja_planes_marketing{
  border: 1px solid var(--colorAzul);
  border-radius: .5rem;
  box-shadow: rgba(0, 232, 253, 0.7) 0px 2px 8px 0px;
  display: flex;
  align-content: center;
  padding: 1rem;
  overflow: hidden;  
}

.plan_costo_b{
  font-size: var(--tamanioDescripcion2);
  font-family: 'Roboto Light';
  letter-spacing: .15rem;
  padding-bottom: .7rem;
  color: var(--colorGrisLighter2);
  /* text-decoration: line-through; */
}

.plan_costo_b::after{
  position: absolute;
  content: '';
  border: 1px solid rgba(255, 0, 0, 1);
  width: 90px;
  transform: rotate(3deg) translate(-90px, 11px);
}



.plan_costo{
  font-size: var(--tamanioSubtitulo3);
  letter-spacing: .2rem;
  padding-bottom: .7rem;
  color: var(--colorAzul);
}

/* ************* SOPORTE Y MANTENIMIENTO ************ */
/* ************************************************** */

.pag_mantenimiento_izq{
  width: 95%;
  opacity: 0;
}

.pag_mantenimiento_izq_imagen{
  border-radius: 1.5rem 0 1.5rem 0;
}

.pag_mantenimiento_izq:before{
  content: "";
  position: absolute;
  border: 100px solid #c6c6c6;
  width: 9rem;
  top: 4rem;
  left: 7rem;
  transform: rotate(-200deg);
  border-radius: 1.5rem;
  z-index: -1;
}

.caja_img--servicios{
  width: 20%;
  margin-bottom: 1.5rem;
}

.seccion_datos_soporte{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  justify-content: space-evenly;
}

.contenedor_datos{
  display:flex;
  flex-flow: column;
  padding: 2rem 2rem;
}

.contenedor_datos > p{
  margin: 2rem 0 3rem 0;
}

.contenedor_datos > figure{
  width: 65%;
  align-self: center;
  margin-bottom: 2rem;
}

/* ************ PAGINA PORTAFOLIO ************ */
/* ****************************************** */


.portafolio_categorias{
  display: flex;
  flex-flow: row;  
  flex-wrap: wrap;
  margin: 2rem 1rem;
}

.tipo_categoria {
  text-transform: none;
  color: var(--colorBlanco);
  font-size: var(--tamanioDescripcion); 
  font-weight: lighter;
  letter-spacing: .05rem;
  background: var(--colorMoradoLight);
  border-radius: 1rem;
  padding: .4rem;
  margin: .3rem .2rem;
}

.seleccionado{
  color: var(--colorMoradoDark);
  background: var(--colorAzul);
}

.tipo_categoria:hover {
  color: var(--colorMoradoDark);
  background: var(--colorAzul);
  transition: all .5s ease-out;
}



/* ********** PAGINAS PROYECTOS INDIVIDUALES ********* */
/* *************************************************** */
.seccion_proyectos_individuales{
  display: flex;
  flex-direction: column;
  background-size: cover;
  overflow: hidden;
  height: auto;
  position: relative;
  margin-top: 2rem;
  padding-bottom: 3.5rem;
} 

.proyecto_bloques{
  display: flex;
  height: auto;
  align-items: flex-start;
}

.proyecto_bloqueCajas_izq{
  width: 23rem;
  display: grid;
  grid-template-columns: 1fr;
  padding: 2rem 2rem;
  overflow: hidden;
  align-items: start;
  opacity: 0;
}

.proyecto_bloqueCajas_der{
  flex: 1;
  height: auto;
  display: grid; 
  grid-template-columns: 1fr;
  align-content: start;
  padding: 0 2rem;
  border-left: .1rem solid var(--colorGrisLighter);
}

.proyecto_datos{
  z-index: 5;
  margin: 0 2rem 2rem 0;
}

.proyecto_encabezado_subtitulo{
  font-family: 'Roboto Light';
  font-weight: lighter;
  color: var(--colorBlanco);
  letter-spacing: .1rem;
  font-size: var(--tamanioDescripcion3);
  margin-bottom: .5rem;
}

/* INICIA */
.lista_caracteristicas_proyecto{
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ Estilos lista  ¬¬¬¬¬¬¬¬¬¬¬¬ */
.lista_caracteristicas_proyecto li{
  position: relative;
  padding: .2rem .3rem;
  margin: .3rem .3rem;
  text-align: center;
  font-family: 'Roboto Light';
  color: var(--colorBlanco);
  line-height: 1.6rem;
  border: 1px solid #fff;
  border-radius: .5rem;
}
/*TERMINA*/

.proyecto_imagen_figure{
  width: 100%;
}

.imagen_proyecto_individual{
  border-radius: 1.5rem 1.5rem;
} 

.seccion-proyecto-slide{  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  height: auto;
  z-index: 5;
  border-bottom: .1rem solid var(--colorGrisLighter);
}

.proyecto_relacionados{
  z-index: 5;
  margin: 2rem 2rem 0 2rem;
}

.precarga{
  opacity: 0;
}

/* ********************************** */
/* *********** PAGINA 404 *********** */
/* ********************************** */

.principal_404{
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--colorMoradoDark);
  padding: 3rem 4rem 0;
  margin-top: 60px;
  padding-bottom: 60px;
  justify-items: center;
  position: relative;
  overflow: hidden;
}

.imagen_404{
  width: 40%;
  margin-bottom: 1rem;
}

.titulo_404{
  font-size: var(--tamanioTitulo);
  letter-spacing: .1rem;
  color: var(--colorBlanco);
  margin-bottom: 1rem;
}

.subtitulo_404{
  font-size: var(--tamanioSUbtitulo2);
  color: var(--colorBlanco);
  letter-spacing: .2rem;
  margin-bottom: 2rem;
  font-family: 'Roboto Light';
  font-weight: lighter;
}

.descripcion_404{
  font-family: 'Roboto Light';
  font-weight: lighter;
  color: var(--colorBlanco);
  font-size: var(--tamanioSubtitulo3);
  text-align: center;
  margin-bottom: 2rem;
}

.boton_404{
  align-self: center;
}

.fondo_404{
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg_fondo_geom_404{
  width: 250%;
  position: absolute;
  opacity: .06;
  top: -110px;
  left: -860px;
  overflow-x: inherit;
}

.botones_pagina_no_encontrada{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1rem;
}

.botones_pagina_no_encontrada a{
  font-family: 'Roboto Light';
  font-size: .9rem;
  margin: .5rem;
}

/* **************************************************************** */
/* **************************************************************** */
/* ************************ FIN PAGINAS WEB *********************** */
/* **************************************************************** */
/* **************************************************************** */

/* ************************************************* */
/* ***** SLIDE DE IMAGENES PROYECTO INDIVIDUAL ***** */
/* ************************************************* */
.proyecto_imagenes_slider{
  max-width: 100%;
  position: relative;
  margin: auto;
  height: auto;
}

.proyecto_imagenes_slider .elemento_slider img {
  object-fit: cover;
  width: 100%;
  height: auto;
}


.proyecto_imagenes_slider .retroceder, .proyecto_imagenes_slider .avanzar {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 16px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  background-color: rgba(224, 48, 105, .8);
}
.proyecto_imagenes_slider .avanzar {
  right: 0;
  border-radius: 3px 0 0 3px;
}


.proyecto_imagenes_slider .retroceder:hover,
.proyecto_imagenes_slider .avanzar:hover {
  background-color: rgba(0, 79, 172, .5);
}


.proyecto_imagenes_slider .elemento_slider {
  animation-name: efectoImagenProyecto;
  animation-duration: 1.5s;
}
@keyframes efectoImagenProyecto {
  from {
      opacity: 0.4
  }
  to {
      opacity: 1
  }
}

/* ********************************** */
/* ***** VENTANA MODAL MENSAJES ***** */
/* ********************************** */

/* VENTANA MODAL */
.modal {
  display: none; 
  position: fixed; 
  z-index: 9999; 
  padding-top: 80px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: hidden; /* habilitar scroll si es necesario */
  background-color: rgba(0,0,0,0.8); 
}

/* CONTENIDO */
.contenido__modal {
  position: relative;
  background-color: rgba(255, 255, 255, .9);
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* ANIMACION */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* CERRAR */
.cerrarModal {
  color: white;
  /* float: right; */
  position: absolute;
  top: 0;
  right: 16px;
  font-size: 50px;
  vertical-align: middle;
  font-weight: bold;
}

.cerrarModal:hover,
.cerrarModal:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.encabezado_modal {
  padding: 1rem 1rem;
  background-color: rgba(255, 0, 0, .7);
  color: white;
}

.encabezado_modal h2{
  font-size: 19px;
}

.encabezado_modal_pp {
  padding: 1rem 1rem;
  background-color: var(--colorAzulPP);
  color: white;
}

.encabezado_modal_pp h2{
  font-size: 19px;
}

.cuerpo_modal {padding: .8rem 1rem;}

.cuerpo_modal p{
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
}

/* ********************************** */
/* ************* VIDEOS ************* */
/* ********************************** */

.contenedor_media{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  min-width: 320px;
  max-width: 1280px;
}

.contenedor_video{
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}

.video{
  position: absolute;
  width: 100%;
  height: 100%;
}

/* ********************************************* */
/* *************** MEDIA QUERIES *************** */
/* ********************************************* */

/* --------------------------------------------------- */
/* -------------------- A) TABLETS  ------------------ */
/* --------------------------------------------------- */
@media screen and (max-width: 992px) {
  .seccion__uno-izq{
    width: 50%;
  }

  .seccion__uno-izq{
    width: 50%;
  }

  /* CONTENEDOR CABECERA Y BANNER */
  .contenedor {
    height: auto;
  }

  /* ¬¬¬¬¬¬¬¬¬ MOSTRAR ICONO MENU MOVIL ¬¬¬¬¬¬ */
  .encabezado_boton {
    display: flex;
    transition: all 0.5s ease-in-out;
  }

  /* ¬¬¬¬¬¬¬¬¬ BARRA DE NAVEGACION MENU ¬¬¬¬¬¬ */
  .navegacion_menu {
    transform: translateX(-100%);
    transition: all 0.5s ease-in-out;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: rgba(40, 33, 64, 0.98);
    width: 100%;
    height: 100%;
    padding: 15px;
    position: absolute;
    top: 60px;
    left: -100%;
    position: fixed;
    z-index: 9999;
  }

  /* ¬¬¬¬¬¬¬¬¬ ANIMAR ASIGNANDO CLASE OPEN (CON JS) ¬¬¬¬¬¬ */
  .navegacion_menu.open {
    transform: translateX(100%);
    transition: all 0.5s ease-in-out;
    overflow: hidden;
    z-index: 9999;
  }

  /* ¬¬¬¬¬¬¬¬¬ ITEMS MENU NAVEGACION ¬¬¬¬¬¬ */
  .navegacion_menu-item {
    padding: 15px;
  }

  /* ¬¬¬¬¬¬¬¬¬ EFECTO HOVER ITEMS NAVEGACION ¬¬¬¬¬¬ */
  .navegacion_menu-item:hover {
    cursor: pointer;
    border-radius: 5px 0 0 5px;
    transition: all 0.2s ease-in-out;
  }

  /* ¬¬¬¬¬¬¬¬¬ ITEMS SUB MENU NAVEGACION ¬¬¬¬¬¬ */

  .submenu_lista {
    top: 0;
    left: 6rem;
    width: 26vw;
  }

  /* ¬¬¬¬¬¬¬¬¬ CONTENEDOR DE BANNER -IZQUIERDA/DERECHA ¬¬¬¬¬¬ */
  .banner_inicio {
    margin-top: 7rem;
    height: 100vh;
  }

  /* ¬¬¬¬¬¬¬¬¬ CONTENEDORES IZQUIERDA/DERECHA ¬¬¬¬¬¬ */
  .banner_inicio-izquierda,
  .banner_inicio-derecha {
    width: 100%;
    height: 100%;
    padding: 2px 2px;
    margin: 1rem 0;
    overflow: hidden;
  }

  /* ¬¬¬¬¬¬¬¬¬ ICONOS SOCIALES ¬¬¬¬¬¬ */
  .banner_inicio-sociales {
    top: 7rem;
    height: 20%;
  }

  /* ¬¬¬¬¬¬¬¬¬ LINEA INFERIOR ICONOS SOCIALES ¬¬¬¬¬¬ */
  .banner_inicio-sociales:before {
    top: 230px;
  }

  /* ¬¬¬¬¬¬¬¬¬ TITULO INICIO ¬¬¬¬¬¬ */
  .banner_titulo {
    margin: 1rem 0.5rem 1rem 5rem;
  }

  /* ¬¬¬¬¬¬¬¬¬ DESCRIPCION INICIO ¬¬¬¬¬¬ */
  .banner_descripcion {
    margin: 1rem 0.5rem 2rem 5rem;
    line-height: 1.5rem;
  }

  /* ¬¬¬¬¬¬¬¬¬ BOTON INICIO ¬¬¬¬¬¬ */
  .banner_boton {
    margin: 1.5rem 0.5rem 1rem 5rem;
  }

  /* ¬¬¬¬¬¬¬¬¬ CONTENEDOR TARJETAS (<UL>) ¬¬¬¬¬¬ */
  .banner_tarjetas {
    perspective: 1000px;
    margin: 6rem 0;
  }

  /* ¬¬¬¬¬¬¬¬¬ TARJETAS (<LI>) ¬¬¬¬¬¬ */
  .banner_tarjetas-item {
    width: 90%;
    margin: 5px 5px;
  }

  /* ¬¬¬¬¬¬¬¬¬ POSICION TARJETAS ¬¬¬¬¬¬ */
  .banner_tarjetas-item:nth-child(1) {
    top: -85px;
    z-index: 2;
  }
  .banner_tarjetas-item:nth-child(2) {
    z-index: 1;
  }
  .banner_tarjetas-item:nth-child(3) {
    top: 90px;
  }

  .slogan{
    bottom: 10px;
    font-size: var(--tamanioTitulo2);
    width: 450px;
  }

  .seccion_inicio_top{
    margin: 2rem 1rem 0 1rem;
  }

  .bg_fondo_geom{  
    top: -50px;
    left: -600px;
  }  

  .bg_inicio{
    height: 25rem;
    padding: 0 5rem 3rem 0;
  }

  .bg_inicio_desarrollo_web{
    height: 25rem;
    padding: 0 0 3rem 0;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .bg_inicio_dw{
    height: 20rem;
    padding: 0 0 2rem 0;
  }

  .bg_inicio_tienda{
    height: 25rem;
    padding: 0 0 2rem 0;
  }

  .inicio_paginas-bloque2{
    flex-wrap: wrap;
  }

  .bloque2_izquierda{
    width: 5rem;
  }

  .contacto_paginas-bloque4{
    display: flex;
    flex-flow: column;
    /* padding: 1rem 1rem; */
    height: auto;
  }

  .proyecto_bloques{
    display: flex;
    flex-flow: column;
    /* padding: 1rem 1rem; */
    height: auto;
  }

  .contacto_bloque2_izquierda{
    width: 100%;
  }

  .pag_disweb_izq:before{
    width: 3rem;
    top: .8rem;
    left: 4.5em;
  }

  .disweb_bloque2_izq{
    width: 100%;
  }

  .disweb_bloqueCajas_izq{
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--colorGrisLighter);
  }  

  .escala:hover .disweb_contenedor_textos{
    transform: translateX(-110px);
    padding-right: 2.5rem;
  }

  /* .pag_disweb_izq:before, */
.pag_desarrollo_web_izq:before{
  border: 70px solid var(--colorRojoLight);
  width: 6rem;
  top: 2rem;
  left: 4.5rem;
}

.pag_mantenimiento_izq:before{
  border: 70px solid #c6c6c6;
  width: 6rem;
  top: 2rem;
  left: 4.5rem;
}

.proyecto_bloqueCajas_izq{
  width: 90%;
  order: 1;
}

.imagen_404{
  width: 60%;
}

.bg_fondo_geom_404{  
  top: -150px;
  left: -1000px;
  width: 500%;
}

}

/* ---------------------------------------------------------------------------------------- */
/* -------------------- A) CELULARES  ----------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
@media screen and (max-width: 688px) {
  /* ¬¬¬¬¬¬¬¬¬ ITEMS MENU NAVEGACION ¬¬¬¬¬¬ */
  .navegacion_menu-item {
    padding: 12px;
  }

  /* ¬¬¬¬¬¬¬¬¬ ITEMS SUB MENU NAVEGACION ¬¬¬¬¬¬ */
  .submenu_lista {
    top: 0;
    left: 6rem;
    width: 50vw;
  }

  .navegacion_menu-item:last-child {
    visibility: visible;
    display: block;
  }

  .link_whatsapp_header{
    font-size: 0.65rem;
  }

  .encabezado_logo{
    width: 11rem;
  }

  /* OCULTAR BOTON CONTACTO*/
  .encabezado_contacto {
    display: block; /* none*/
  }
  /* OCULTAR ICONOS SOCIALES*/
  .banner_inicio-sociales {
    display: none;
  }

  /* BANNER PRINCIPAL */
  .banner_inicio {
    grid-template-columns: 1fr;
    margin-top: 5em;
    height: 100%;
  }

  .banner_inicio-izquierda,
  .banner_inicio-derecha {
    margin: 2rem 0;
  }

  /* ¬¬¬¬¬¬¬¬¬ TITULO INICIO ¬¬¬¬¬¬ */
  .banner_titulo {
    margin: 1rem 1rem;
  }

  /* ¬¬¬¬¬¬¬¬¬ DESCRIPCION INICIO ¬¬¬¬¬¬ */
  .banner_descripcion {
    margin: 1rem 1rem 2rem 1rem;
    /* line-height: 30px; */
  }

  /* ¬¬¬¬¬¬¬¬¬ BOTON INICIO ¬¬¬¬¬¬ */
  .banner_boton {
    margin: 1rem 1rem;
  }

  .banner_tarjetas {
    perspective: 1000px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: space-between;
    margin: 5px auto;
  }

  /* ORIGINAL */
  .banner_tarjetas-item {
    grid-template-columns: 1fr;
    justify-items: center;
    justify-content: space-between;
    align-content: space-between;
    padding: 20px 5px;
    margin: 0 5px;
    position: relative;
    transform: rotateY(0deg) rotateX(0deg);
    mix-blend-mode: normal;
  }

  .banner_tarjetas-item:hover {
    transform: scale(1.08);
  }

  /* ¬¬¬¬¬¬¬¬¬ POSICION TARJETAS ¬¬¬¬¬¬ */
  .banner_tarjetas-item:nth-child(1) {
    background: rgba(255, 255, 255, 0.2);
    top: 0px;
    z-index: 2;
  }
  .banner_tarjetas-item:nth-child(2) {
    background: rgba(255, 255, 255, 0.2);
    z-index: 1;
  }
  .banner_tarjetas-item:nth-child(3) {
    background: rgba(255, 255, 255, 0.2);
    top: 0px;
  }

  .tarjeta_icon {
    width: 70%;
    padding: 5px 0;
  }
  .tarjeta_titulo {
    color: var(--colorBlanco);
    padding: 0 5px;
  }

  .tarjeta_descripcion {
    color: var(--colorBlanco);
    font-size: 0.7rem;
    padding: 0 5px;
    align-items: flex-end;
  }

  .link_tarjetas_iniciales{
    color: #fff;
    font-size: 0.7rem;
    align-items: flex-end;
  }

  .seccion_inicio_izq{
    padding: 0 1rem 0 0;
  }

  .seccion_inicio_titulo{
    opacity: 0;
  }

  .seccion_inicio_imagen{
    opacity: 0;
  }

  .cargar .seccion_inicio_titulo,
  .cargar .seccion_inicio_imagen {
    animation: moverXmovil 1s ease-in 0.8s forwards;
  }
  @keyframes moverXmovil {
    60% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
      transform: translateX(0%);
    }
  }

  .seccion_inicio_descripcion{
    padding: 2rem 3rem 1.5rem 0;
  }

  .seccion_inicio_cajas{
    gap: 30px;
    padding: 1rem 3rem 0 0;
  }

  .caja{
    width: 83%;
    padding: 1rem;
  }

  .paginas_inicio_der{
    /* padding: 1.5rem 2rem 0 2rem; */
    padding: 1rem 3rem 1rem 1rem;
    opacity: 0;
  }

  .seccion_inicio_top{
    margin: 2rem 1rem 0 1rem;
  }

  .seccion_contacto_img{
    width: 100%;
    padding: 1rem;
  }

  .footer_centro-datos{
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0;
}

.footer_datos-uno:not(:last-child){
  padding-bottom: 2rem;
}

.seccion_contacto_img{
  height: 150px;
}

.bg_fondo_geom{
  bottom: 100px;
  left: -300px;
  transform: rotate(90deg);
}

.bg_inicio{
  height: 17rem;
  padding: 0 2rem 3rem 0;
}

.bg_inicio2{
  height: 15rem;
  padding: 0 2rem 1rem 1rem;
}

.bg_inicio_dw{
  height: 15rem;
  padding: 0 5rem 1.5rem 0;
}

.bg_inicio_desarrollo_web{
  height: 17rem;
  padding: 0 3rem 2rem 0;
}

.bg_inicio_tienda{
  height: 20rem;
  padding: 0 2rem 2rem 0;
}

.testimonios_bloque2_izquierda{
  width: 0;
}

.caja_descripcion_servicios{
  font-size: var(--tamanioDescripcion);
  font-family: 'Roboto Light';
}

.desweb_caja_der_soporte{
  padding: 0 2rem 1.3rem 0;
}

.testimonios_logos {
    gap: .2rem;
}

.pag_disweb_izq:before{
  border: 80px solid var(--colorRojoLight);
  width: 9rem;
  top: 1.5rem;
  left: 2em;
}

.disweb_contenedor_textos{
  width: 10rem;
  height: 12rem;
  /* padding: .5rem .5rem; */
}

.escala:hover .disweb_contenedor_textos{
  transform: translateX(-103px);
}

.pag_desarrollo_web_izq:before{
  border: 60px solid var(--colorRojoLight);
  width: 7rem;
  top: 3rem;
  left: 4rem;
}

.pag_mantenimiento_izq:before{
  border: 60px solid #c6c6c6;
  width: 7rem;
  top: 3rem;
  left: 4rem;
}

.seccion_datos_soporte{
  grid-template-columns: 1fr;
}

.seccion_paginas_cuarto_bloque{
  margin: 0 3rem 0 2rem;
}

.imagen_404{
  width: 100%;
}

.bg_fondo_geom_404{
  top: -120px;
  left: -1000px;
  width: 800%;

}

.encabezado_contacto_titulo{
  margin-bottom: 1rem;
}

.botones_pagina_no_encontrada{
  justify-content: center;
}

}

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ ANIMACIONES ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */

/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ ANIMACION PARA INTERSECTION OBERVER ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ */
.anim{
  opacity: 0;
}

@keyframes anim1 {
  from {
    transform: translateY(-40px);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ANIMAR CON JS AL CARGAR LA PAGINA (clase: .cargar) */
/* BOTON ENCABEZADO Y SECCION TITULO */
/* ¬ ANIMACION AL CARGAR LA PAGINA CON JS INICIO ICONOS SOCIALES ¬ */
/* ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ SE AGREGA pag subtitulos en adelante, para pagina "quienes somos" bloque inicial */
.cargar .encabezado_boton,
.cargar .seccion_inicio_titulo,
.cargar .banner_inicio-sociales,
.cargar .paginas_subtitulo,
.cargar .paginas_inicio_izq,
.cargar .paginas_inicio_der,
.pag_disweb_izq,
.pag_desarrollo_web_izq,
.pag_mantenimiento_izq {
  animation: moverX 1s ease-in 0.2s forwards;
}
@keyframes moverX {
  60% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

/* ANIMAR ENCABEZADO CON JS (onload) AL CARGAR LA PAGINA  */
.cargar .encabezado_logo,
.cargar .navegacion_menu,
.cargar .encabezado_contacto {
  animation: fadeIn 0.5s ease-in 0.5s forwards;
}
@keyframes fadeIn {
  60% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* ¬ ANIMACION JS AL CARGAR LA PAGINA INICIO SECCION IZQUIERDA ¬ */
.cargar .banner_titulo,
.cargar .banner_descripcion,
.cargar .banner_boton {
  animation: trasladarY 0.6s ease-in 0.7s forwards;
}
@keyframes trasladarY {
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

/* ¬¬¬¬¬¬¬¬¬ ANIMACION JS INICIAL TARJETAS (AL CARGAR LA VENTANA) ¬¬¬¬¬¬ */
.cargar .banner_tarjetas {
  animation: trasladarX 1s ease-in 0.7s forwards;
}
@keyframes trasladarX {
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

/* **** animacion scroll imagenes portafolio ****/
@keyframes moverItemsSlide {
  100% { 
    transform: translateX(-1200%);  
  }
}


/*  ========================================================== */
/*  **** CLASE "CARGAR" ANIMACIONES AL ENTRAR A LA PAGINA **** */
/*  ========================================================== */
.cargar .bg_inicio,
.cargar .bg_inicio2,
.cargar .bg_inicio_dw,
.cargar .bg_inicio_desarrollo_web,
.cargar .bg_inicio_tienda{
  /* animation: animacon_imagenes_pags 1s .8s forwards cubic-bezier(.22,.52,1,-0.4); */
  animation: animacon_imagenes_pags 1s .8s forwards ease-in;
}

@keyframes animacon_imagenes_pags{
  0%{
    opacity: 0;
    transform: scale(0);
  }

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

/* ¬ ANIMACION JS AL CARGAR LA PAGINA INICIO SECCION IZQUIERDA ¬ */
.cargar .paginas_titulo,
.cargar .paginas_descripcion {
  transform: translateX(-500px);
  animation: trasladarNosotros .7s forwards cubic-bezier(.59,1.11,.63,-0.37);
}
@keyframes trasladarNosotros {
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

.cargar .inicio_paginas_bloque1,
.cargar .contacto_bloque2_izquierda,
.cargar .precarga {
    animation: moveX 1s ease-in .8s forwards;
  }
  @keyframes moveX {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
      transform: translateX(0%);
    }
  }

  /* Animacion tabs */
@keyframes moverXTabs {
  60% {
    opacity: 0;
    transform: translateX(-45%);
  }

  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

/* ============================================================ */
/* = FIN DE CLASE "CARGAR" ANIMACIONES AL ENTRAR A LA PAGINA =  */
/* ============================================================ */