:root{
--azul: #2f3a83;
--gris: #747578;
}

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

.azul {color: var(--azul);}
.gris {color: var(--gris);}

body{   
   height:100vh;
   width:100vw;   
   font-family: 'dinpro_medium';
   overflow-x: hidden;
   color: var(--azul);
   padding-top: 55px;
}

.textoduo{
   vertical-align: middle;
}

.textonormal, .textoduo, .texto12padding{
   position:relative;    
   color: --var(azul);
   font-size: 1.2em;
   width: 100%;
   background-color: #fff;
   text-align: justify;
   text-wrap: pretty;
}
.texto12padding{
   padding-left:12%;
   padding-right:12%;
}

.textoduo{
   flex-grow: 1;
   flex-direction: column;
   padding: 10px;
   display: flex; justify-content: center; align-items: center;
}

.fotoduo{
   position:relative;
   border-radius: 8px;
   width: 200px;
   min-width: 200px;
}

.hr
{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 96%;
  max-width: 1200px;
  height: 3px;
  background-color: var(--azul);
}

.mizq {
  padding-left: 40px!important;   
}

.mder {
  padding-right: 40px!important;   
}

.textonormal
{
   left:50%;
   transform: translateX(-50%);
   border-radius: 8px;
}

.tituloseccion{
    color: var(--azul);
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

.foto{
   position:relative;
   width: 100%;    
   left:50%;
   transform: translateX(-50%);
   border-radius: 8px;
}


.intro
{
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   background-color: #fff;
   border: 6px solid var(--azul);
   font-weight: bold;
   font-size: 1.6em;
   max-width: 980px;
   color: #000;
   padding: 40px;
   border-radius: 18px; 
}

#pie{
   vertical-align: auto;
   display:flex; 
   flex-wrap:wrap; 
   flex-direction:row;
   justify-content: center;
}

#address, #icons
{
   flex-wrap: wrap;
   justify-content: center;
}

#address{
   position:relative;
   padding: 8px;
   height:auto;
   max-width: 320px;
   text-align: center;
   flex-grow: 1;
}

#icons,
#icons-mobile
{
   position:relative;
   padding: 8px;
   width:65vw;
   display: flex;
   flex-grow: 2;
   justify-content: center;
}

.icon{
   padding: 0 10px;
   text-decoration: none;
   display: inline-block;
   text-align: center;
   line-height: 28px;
   font-size: 0.8em;
   font-weight: bold;
   color: var(--azul);
}

.icon img
{
   width:40px!important;
   height: 40px!important;
}

#redes
{
   padding: 8px;
   display: flex;
   align-items: center;
   align-content: stretch;
   flex-shrink: 0;
   min-width: 0;
   flex-grow: 1;
   justify-content: space-evenly;
}

.onlyOnMobile{
   display:none!important;
}

#redes a {
  padding-right: 10px;
}

.w20{
   width: 20%;
}

.w25{
   width: 25%;
}

.w33{
   width: 33%;
}

.w50{
   width: 50%;
}

.w66{
   width: 66%;
}

.w75{
   width: 75%;
}

.w80{
   width: 80%;
}

.caja
{
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   display:flex; 
   flex-wrap:wrap; 
   flex-direction:row;
   justify-content: center;
   width: 96%;
   max-width: 1500px;
}

.bloque
{
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   width: 96%;
   max-width: 1500px;
}

#tablas{
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   width: 96%;
   max-width: 1500px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   --flex-direction: row;
   gap: 8px;
}

td
{
   padding: 4px;
}

.tabla {
   width: 19%;
   min-width: 200px;
   align-self: flex-start;
   border-right: 1px solid var(--gris);
}

.tabla:last-child{
   border-right: 0;
}

.tnum{
   font-size: 3em;
   color: var(--azul);
   vertical-align: middle;
}

.ttexto1{
   font-size: 1.2em;
   color: var(--azul);
}

.ttexto2{
   font-size: 1em;
   color: var(--gris);
   text-wrap: pretty;
}

#productos, #procesos{
   position: relative;
   width: 100vw;
   display:flex;
   flex-wrap: wrap;
   justify-content: center;
}

.cuadro{  
   min-width:150px;
   width: 33%;
   display: flex; justify-content: center; align-items: center;
   font-size: 2em;
   flex-grow:1;
   background-size: cover;
   background-position: center;
   opacity: 0;
   transform: scale(0.1);
   transform-origin: center center;
   filter: blur(8px);
   transition:
     transform 0.7s ease,
     opacity 0.7s ease,
     filter 0.7s ease;
}

.proceso{
   min-width: 180px;
   max-width: 180px;
   justify-content: center; align-items: center;
   font-size: 1em;
   flex-grow:1;
   padding: 0 10px;
   text-decoration: none;
   text-align: center;
   display: inline-block;
   color: var(--azul);
}

.proceso img {
   width: 60%;
}

.cuadro.visible {
   opacity: 1;
   transform: scale(1);
   filter: blur(0);
}

.transversal
{
   width:100vw;
}

#contacto
{
  position: relative;
  left:50%;
  transform: translateX(-50%);
  max-width: 1000px;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}

#formulario, #mapa
{
   width: 50%;
   min-width: 300px;
   padding:20px;
}

.div_icono_procesos
{
  border: 2px solid var(--azul);
  border-radius: 50%;
  padding:12px;
  width:118px;
  justify-content: center; align-items: center;
  text-align: center;
}
.icono_procesos
{
  width:90px;
  height:90px;
}

.titulo_proceso
{
   font-weight: bold;
   text-align: center;
   font-size: 2em;
}

.bloque_proceso
{
  display:flex;
  flex-wrap: wrap;
  justify-content: center; align-items: center;
}

#divprocesos
{
  display:flex;
  flex-wrap: wrap;
  justify-content: center; align-items: center; 
}

#divprocesos a{
   text-decoration: none;
   font-weight: bold;
   color: var(--azul);
   padding:16px;
   display:flex;
   flex-direction: column;
   flex-wrap: wrap;
   justify-content: center; align-items: center;
}

.invisible{
   display: none;
}

.visible{
   display: inherit;
}

.subrayado{
   text-decoration: underline!important;
}

.foto50
{
   width:48%;
   min-width:300px;
   padding:1%;
}

.i36{
   margin-bottom:48px!important;
   width: 50%;
}

.aproceso2{
   text-align: center;
}