body {
    overflow-x: hidden;
    background: var(--fondo);
}

/* SPAN PARA PALABRAS */
.nubes {
	color: rgba(0, 0, 0, 0); /* Color con opacidad */
	-webkit-text-stroke: 0.1rem #ffffff; /* Ancho del borde y color */
}

.secundario {
 font-weight: 1;   
}

/* TITULO */
#titulo {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 70rem;
    font-size: 4rem;
}

#titulo video {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 45rem;
    background: black;
}

#info_video {
    gap: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    top: 6rem;
    left: 0;
    position: absolute;
    padding-left: 15rem;
    font-size: 1.2rem;
    color: white;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.4);
}

#info_video i {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}

#titulo_texto {
    box-sizing: border-box;
    width: 100%;
    gap: 1rem;
    background: linear-gradient(360deg, var(--fondo) 0%, transparent 200%);
    backdrop-filter: blur(30px);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%);
    position: absolute;
    bottom: 0;
    padding: 4rem 0 20rem 0;
    display: flex;
    flex-direction: column;
}

#margenes_texto {
    max-width: 1200px;
    margin: 0 auto;
}

#titulo h1 {
    color: white;
    font-size: 3rem;
    z-index: 999;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.4);
}

#titulo p {
    color: #9a9a9a;
    font-size: 2rem;
    z-index: 999;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.4);
}

#titulo #fondo_titulo {
    pointer-events: none;
    user-select: none;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#titulo a {
    cursor: pointer;
    border: var(--border);
    background: transparent;
    border-radius: 16px;
    padding: 0.7rem 2rem;
    z-index: 999;
    width: fit-content;
    font-size: 1.5rem;
    font-weight: 900;
    text-decoration: none;
    text-align: center;
    color: white;
    transition: all 0.2s ease;
}

#titulo a:hover {
    background: white;
    color: black;
}

/* CONTENIDO */
#contenido {
    /* background-image: linear-gradient(#181818 1px, transparent 1px), linear-gradient(to right, #181818 1px, transparent 1px);
    background-size: 3rem 3rem; */
    
    margin-top: -15rem;
    position: relative;
}

/* TEXTO_CONTENIDO */
.texto_inicio {
    display: flex;
    text-decoration: none;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 9999;
}

.texto_inicio h2 {
    color: var(--color_p);
    margin-top: 4rem;
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

.texto_inicio h2 i {
    font-size: 1.4rem;
}

.texto_inicio p {
    font-size: 2rem;
    color: #8e8e8e;
    margin-bottom: 1rem;
}

/* SERVICIOS */
.seccion {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#caja_servicio:hover p,
#caja_servicio:hover h2,
#caja_servicio:hover i {
    color: black;
}

.cajas_caja {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 32px 16px, rgba(0, 0, 0, 0.1) 0px 16px 8px, rgba(0, 0, 0, 0.1) 0px 8px 4px, rgba(0, 0, 0, 0.1) 0px 4px 2px, rgba(0, 0, 0, 0.1) 0px 2px 1px;
    min-height: 25rem;
    position: relative;
    
    text-decoration: none;
    border-radius: 16px;
	background: var(--background_div);
    color: var(--color_p);
    transition: all 0.3s ease; /* Añade una transición suave para el hover */
    overflow: hidden;
}

/* Pseudo-elemento para el borde difuminado */
.cajas_caja::after {
    z-index: 9999;
  content: "";
  position: absolute;
  inset: 0; /* ocupa todo el contenedor */
  border-radius: 16px;
  padding: 2px; /* grosor del borde difuminado */
  
  /* borde difuminado estilo gradiente gris */
  background: linear-gradient(180deg,
              rgba(140,140,140,0.3) 0%,
              rgba(128,128,128,0.2) 50%,
              rgba(110,110,110,0.2) 100%);
  -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none; /* para no interferir con clicks */
  box-sizing: border-box;
}

.cajas_caja:hover::after {
  background: linear-gradient(
      160deg,
      rgba(255,255,255,0.4) 0%,
      rgba(255,255,255,0.4) 100%
  );
}

.fondo_servicios  {
    pointer-events: none;
    user-select: none;
    
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease; /* Transición suave para la opacidad */
}

.fondo_servicios_fondo {
    opacity: 0.2;
    filter: blur(400px);
    position: absolute;
    width: 100%;
    height: 25rem;
}

.cajas_caja:hover .fondo_servicios {
    display: block;
    opacity: 1; /* Ajusta la opacidad según el efecto deseado */
}

.dron_servicios {
    pointer-events: none;
    user-select: none;
    
    z-index: 2;
    right: -20rem;
    top: 20rem;
    position: absolute;
    width: 20rem;
    transition: all 0.4s ease;
}

.cajas_caja:hover .dron_servicios {
    top: 0;
    right: 0;
    display: block;
}

.difuminado_top {
    position: relative;
    z-index: 9999;
    background: linear-gradient(to top, var(--background_div) 50%, rgba(0,0,0,0) 85%); /* Valor por defecto */
    overflow: hidden;
    height: 100%;
    padding: 2rem;
    transition: all 0.5s ease; /* Transición suave para la opacidad */
}

.cajas_caja:hover .difuminado_top {
    background: var(--color-difuminado_top);
    padding: 6rem 2rem 2rem 2rem;
}

:root {
    --color-difuminado_top: linear-gradient(to top, rgba(255,255,255, 1) 50%, rgba(0,0,0,0) 85%);
}

.difuminado_rosa {
    --color-difuminado_top: linear-gradient(to top, rgba(53,88,127,1) 50%, rgba(0,0,0,0) 85%);
}

.difuminado_azul {
    --color-difuminado_top: linear-gradient(to top, rgba(190,218,247, 1) 50%, rgba(0,0,0,0) 85%);
}

.difuminado_azul_dos {
    --color-difuminado_top: linear-gradient(to top, rgba(191,190,247, 1) 50%, rgba(0,0,0,0) 100%);
}

.difuminado_gris {
    --color-difuminado_top: linear-gradient(to top, #F2EFE8 50%, rgba(0,0,0,0) 100%);
}






.cajas_caja i {
    transition: all 1s ease; /* Transición suave para la opacidad */
    color: grey;
    font-size: 2.5rem;
}

.cajas_caja:hover i {
    color: white;
}

.cajas_caja h2 {
    margin-top: 1rem;
    font-size: 1.7rem;
}

.cajas_caja p {
    font-size: 1.3rem;
    margin-top: 1rem;
}



/* TEST */
#a_tests {
    display: flex;
    background: var(--background_div);
    border-radius: 16px;
}

#tests {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 32px 16px, rgba(0, 0, 0, 0.1) 0px 16px 8px, rgba(0, 0, 0, 0.1) 0px 8px 4px, rgba(0, 0, 0, 0.1) 0px 4px 2px, rgba(0, 0, 0, 0.1) 0px 2px 1px;
    overflow: hidden;
    display: flex;
    width: -webkit-fill-available;
    position: relative;
    border-radius: 16px;
}

/* Pseudo-elemento para el borde difuminado */
#tests::after {
    z-index: 9999999;
  content: "";
  position: absolute;
  inset: 0; /* ocupa todo el contenedor */
  border-radius: 16px;
  padding: 1px; /* grosor del borde difuminado */   
  
  /* borde difuminado estilo gradiente gris */
  background: linear-gradient(140deg,
              rgba(31,45,88,1) 0%,
              rgba(118,103,106,1) 100%);
  -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none; /* para no interferir con clicks */
  box-sizing: border-box;
}

#tests:hover::after {
  background: linear-gradient(
      160deg,
      rgba(255,255,255,0.5) 0%,
      rgba(255,255,255,0.5) 100%
  );
}
    
#imagen_tests {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#imagen_test::after {
    z-index: 9999999;
  content: "";
  position: absolute;
  inset: 0; /* ocupa todo el contenedor */
  border-radius: 16px;
  padding: 1px; /* grosor del borde difuminado */   
  
  /* borde difuminado estilo gradiente gris */
  background: linear-gradient(140deg,
              rgba(31,45,88,1) 0%,
              rgba(118,103,106,1) 100%);
  -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none; /* para no interferir con clicks */
  box-sizing: border-box;
}

/* SEGUNDA SECCION */
#texto {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 32px 16px, rgba(0, 0, 0, 0.1) 0px 16px 8px, rgba(0, 0, 0, 0.1) 0px 8px 4px, rgba(0, 0, 0, 0.1) 0px 4px 2px, rgba(0, 0, 0, 0.1) 0px 2px 1px;
    width: 100%;
    margin-top: 1rem;
	background: var(--background_div);
	border: var(--border);
	position: relative;
	overflow: hidden;
	z-index: 9;
	color: #383414;
	padding: 2rem;
	border-radius: 16px;
	font-size: 3rem;
}

#mas_usados {
    overflow-y: auto;
    max-width: 1200px;
    margin: 0 auto;
}

#texto h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
	color: white;
	font-weight: bold;
	position: relative;
	overflow: hidden;
}

#texto p {
    font-size: 1.3rem;
	color: white;
	font-weight: bold;
	position: relative;
    margin-right: 40rem;	
}

.imagen_texto {
	pointer-events: none;
	user-select: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
}

#imagen_fotos {
	pointer-events: none;
	user-select: none;

	z-index: 99;
	position: absolute;
	top: 0;
	right: 0rem;
	width: 35rem;
}

.difuminado {
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, var(--background_div) 50%, rgba(0,0,0,0) 140%);

	position: absolute;
	top: 0;
	left: 0;
}

/* TERCERA SECCION */
.servicio {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 32px 16px, rgba(0, 0, 0, 0.1) 0px 16px 8px, rgba(0, 0, 0, 0.1) 0px 8px 4px, rgba(0, 0, 0, 0.1) 0px 4px 2px, rgba(0, 0, 0, 0.1) 0px 2px 1px;
    text-decoration: none;
	overflow: hidden;
	position: relative;
	border-radius: 16px;

    background: var(--background_div);

	height: 18rem;
}

.servicio::after {
    z-index: 9999;
  content: "";
  position: absolute;
  inset: 0; /* ocupa todo el contenedor */
  border-radius: 16px;
  padding: 2px; /* grosor del borde difuminado */
  
  /* borde difuminado estilo gradiente gris */
  background: linear-gradient(180deg,
              rgba(140,140,140,0.3) 0%,
              rgba(128,128,128,0.2) 50%,
              rgba(110,110,110,0.2) 100%);
  -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none; /* para no interferir con clicks */
  box-sizing: border-box;
}


.servicio:hover .fondo_servicio {
	opacity: 1;
}

/*
.servicio a {
    position: relative;
    z-index: 9999;

	overflow: hidden;
	background: transparent;
	border: var(--border);
	border-radius: 16px;
	font-size: 1.3rem;
	padding: 0.7rem 2rem;
	text-decoration: none;
	color: va;
	font-weight: bold;
}

.servicio a:hover {
    background: white;
    color: black;
}
*/

.editar_a {
    margin-top: 2rem;  
}

.fondo_servicio  {
    opacity: 0;
    
    pointer-events: none;
    user-select: none;
    
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease; /* Transición suave para la opacidad */
}

.difuminado_negro {
    width: 100%;
    height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
    backdrop-filter: blur(50px);
    position: absolute;
    top: 0;
    z-index: 9;
}

.imagen_servicio {
	width: 27rem;
	position: absolute;
	top: 8rem;
	left: 11rem;
	z-index: 9999;
	transform: rotate(-5deg);
	user-select: none;      /* Desactiva la selección de texto e imágenes */
  	pointer-events: none;   /* Desactiva los eventos de clic */
}

.texto_servicio {
    z-index: 99;
    padding: 2rem;
	position: relative;
}

.texto_servicio h3 {
    color: var(--color_p);
    font-size: 1.7rem;
}

.texto_servicio p {
    font-size: 1.3rem;
    margin-top: 1rem;
    color: grey;
}



.noticias {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 32px 16px, rgba(0, 0, 0, 0.1) 0px 16px 8px, rgba(0, 0, 0, 0.1) 0px 8px 4px, rgba(0, 0, 0, 0.1) 0px 4px 2px, rgba(0, 0, 0, 0.1) 0px 2px 1px;
    text-decoration: none;
	position: relative;
	border-radius: 16px;

    background: var(--background_div);
    
    overflow: hidden;
    
	height: 18rem;
}

.noticias::after {
        z-index: 9999;
  content: "";
  position: absolute;
  inset: 0; /* ocupa todo el contenedor */
  border-radius: 16px;
  padding: 2px; /* grosor del borde difuminado */
  
  /* borde difuminado estilo gradiente gris */
  background: linear-gradient(180deg,
              rgba(140,140,140,0.3) 0%,
              rgba(128,128,128,0.2) 50%,
              rgba(110,110,110,0.2) 100%);
  -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none; /* para no interferir con clicks */
  box-sizing: border-box;
}

.noticias .fondo_servicio {
	opacity: 1;
}

.texto_noticias {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
    backdrop-filter: blur(50px);
    z-index: 99;
    padding: 2rem 2rem 10rem 2rem;
	position: relative;
}

.texto_noticias h3 {
    color: white;
    font-size: 1.7rem;
}

.texto_noticias p {
    font-size: 1.3rem;
    margin-top: 1rem;
    color: grey;
}

/* LINEA DE GALERIA */
#espacio {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 120%;
    height: 10rem;
    margin-top: 10rem;
    margin-left: -1rem;
    background: rgba(30, 30, 30, 1);
    border: var(--border);
    transform: rotate(-2deg);
    z-index: 9999;
}

#espacio h2 {
    margin-left: 4rem;
    font-size: 4rem;
    color: #ffb357;
}

#espacio_dos {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    border: var(--border);
    display: flex;
    position: relative;
    overflow: hidden;
    width: 120%;
    height: 8rem;
    margin-top: -8rem;
    margin-bottom: 5rem;
    margin-left: -1rem;
    background: #3d3d3d;
    transform: rotate(3deg);
    z-index: 999;
}

/* ESPACIO IMAGENES */
/* IMAGENES */
#imagen_dron_uno {
    pointer-events: none;
    user-select: none;
    top: -2rem;
    left: -6rem;
    position: absolute;
    width: 48rem;
    height: 18rem;
}

/* GALERIA */
#imagenes {
    max-width: 1200px;
    margin: 0 auto;
}

.inner-container {
    width: 100%;
    overflow: visible;
    
    display: grid;
    grid-template-rows: repeat(1, 1fr); /* Dos filas iguales */
    grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales */
    gap: 1rem; /* Espacio entre las celdas */
}

.inner-container_dos {
    overflow: visible;
    padding-bottom: 4rem;
    display: grid;
    grid-template-rows: repeat(1, 1fr); /* Dos filas iguales */
    grid-template-columns: repeat(2, 1fr); /* Tres columnas iguales */
    gap: 1rem; /* Espacio entre las celdas */
}

.inner-container_tres {
    overflow: visible;
    
    width: fit-content;
    display: flex;
    gap: 1rem;
}


.div_imagen {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 32px 16px, rgba(0, 0, 0, 0.1) 0px 16px 8px, rgba(0, 0, 0, 0.1) 0px 8px 4px, rgba(0, 0, 0, 0.1) 0px 4px 2px, rgba(0, 0, 0, 0.1) 0px 2px 1px;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    height: 25rem;
}

.div_imagen::after {
        z-index: 9999;
  content: "";
  position: absolute;
  inset: 0; /* ocupa todo el contenedor */
  border-radius: 16px;
  padding: 2px; /* grosor del borde difuminado */
  
  /* borde difuminado estilo gradiente gris */
  background: linear-gradient(180deg,
              rgba(140,140,140,0.3) 0%,
              rgba(128,128,128,0.2) 50%,
              rgba(110,110,110,0.2) 100%);
  -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none; /* para no interferir con clicks */
  box-sizing: border-box;
}

.difuminado_imagen {
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 9999;
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
    backdrop-filter: blur(30px);
    width: 100%;
    padding: 3rem 2rem 2rem 2rem;
    transition: all 0.5s ease;
    color: white;
}

.difuminado_imagen h3 {
    font-size: 1.5rem;
}

.difuminado_imagen p {
    font-size: 1.3rem;
    opacity: 0.6;
}

.imagen_galeria {
    width: 100%;
    height: 100%;
    background: black;
}


/* RESPONSIVE */
@media (max-width: 800px) {
    .fondo_servicios_fondo {
        opacity: 0.7;
        filter: blur(40px);
    }
    
    #titulo {
        height: 30rem;
        margin-top: 6rem;
    }
    
    #titulo h1 {
        font-size: 2rem;
    }
    
    #titulo p {
        font-size: 1.5rem;
    }
    
    #titulo_texto {
        bottom: -10rem;
        padding-right: 1rem !important;
        padding: 4rem 1rem 2rem 1rem;
        -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
        backdrop-filter: blur(5px);
    }
    
    #titulo video {
        height: 30rem;
        -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 100%);
    }
    
    #info_video {
        display: none;
    }

    #imagen_dron_uno {
        display: none;
    }
    
    #texto {
        display: none;
    }
    
    #mas_usados, .texto_inicio {
        margin: 0 1rem;
    }
    
    #titulo a {
        border-color: var(--color_p);
        color: var(--color_p);
        margin: 1rem;
        width: auto;
    }
    
    .seccion, #imagenes {
        padding: 0 1rem 1rem 1rem;
    }
    
    .texto_inicio h2 {
        margin-top: 4rem;
        font-size: 2rem;
    }
    
    #contenido {
        margin-top: 10rem;
        padding-top: 1rem;
    }
    
    .seccion {
        margin-top: 1rem;
        padding: 0 1rem 0 1rem;
    }

    .noticias {
        width: 22rem;
    }    
    
    
    .inner-container {
        clear: both;
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* Tres columnas iguales */
    }
    
    .inner-container_dos {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* Tres columnas iguales */
    }
    
    .texto_inicio:last-child, #fondo_titulo {
        display: none;
    }
    
    
    /* CAJAS CAJA */
    .cajas_caja {
        min-height: 0;
    }
    
    .cajas_caja h2 {
        font-size: 1.5rem;
    }
    
    .cajas_caja p {
        font-size: 1.1rem;
    }
    
    .cajas_caja .dron_servicios {
        top: 0;
        right: 0;
        display: block;
    }
    
    .cajas_caja .fondo_servicios {
        display: block;
        opacity: 0.9; 
    }
    
    .cajas_caja .difuminado_top, .cajas_caja .difuminado_top:hover {
        background: var(--color-difuminado_top);
        padding: 10rem 2rem 2rem 2rem;
        
        color: black;
    }
    
    .cajas_caja i {
        color: black;
    }
    
    .servicio .fondo_servicio {
    	opacity: 1;
    }
    
    #nuestros_proyectos {
        display: none;
    }
    
    .difuminado_rosa, .difuminado_rosa i {
        color: white !important;
    }
    
  


}

/* RESPONSIVE FIN */