/*
**
**
**
** CSS para resolución 3840 x 2160px
**
**
**
*/

/* Ajustes de escala para pantallas 4K */
@media (min-width: 1400px) {
    .container {
        max-width: 2640px;
    }
}

h1 { font-size: 8.4rem; color: #ffffff; font-family: EatonBol; margin: 160px 0 160px 0; }
h2 { font-size: 9rem; color: #ffffff; font-family: arial; margin: 160px 0 160px 0; }
h3 { font-size: 4rem; font-weight: bold; color: #005eb8; }
h5 { font-size: 4rem; }
p { font-size: 2.6rem; font-family: 'EatonReg'; }
p.intro { font-size: 4.2rem; color: #fff; font-family: arial; }


/* Fondos */
body#home,
body#formulario,
body#enlaces {
    color: #fff;
    font-family: 'EatonReg', 'EatonMed', 'EatonBol';
/*    background: url('../images/bg-home.jpg') no-repeat center center fixed;*/
    background: url('../images/fondo.png') no-repeat center center fixed;
    background-size: cover;
}

body#sector_distribucion-electrica {
    color: #fff;
    font-family: 'EatonReg', 'EatonMed', 'EatonBol';
/*    background: url('../images/bg-distribucion-electrica.jpg') no-repeat center center fixed;*/
    background: url('../images/fondo_sector.png') no-repeat center center fixed;
    background-size: cover;
}
body#sector_control-industrial {
    color: #fff;
    font-family: 'EatonReg', 'EatonMed', 'EatonBol';
/*    background: url('../images/bg-control-industrial.jpg') no-repeat center center fixed;*/
    background: url('../images/fondo_sector.png') no-repeat center center fixed;
    background-size: cover;
}
body#sector_calidad-de-energia {
    color: #fff;
    font-family: 'EatonReg', 'EatonMed', 'EatonBol';
/*    background: url('../images/bg-calidad-de-energia.jpg') no-repeat center center fixed;*/
    background: url('../images/fondo_sector.png') no-repeat center center fixed;
    background-size: cover;
}
body#sector_respaldo-de-energia {
    color: #fff;
    font-family: 'EatonReg', 'EatonMed', 'EatonBol';
/*    background: url('../images/bg-respaldo-de-energia.jpg') no-repeat center center fixed;*/
    background: url('../images/fondo_sector.png') no-repeat center center fixed;
    background-size: cover;
}


/* Sectores */
#sectores {
    font-family: 'EatonBol';
}

#sectores .btn { font-family: arial; font-size: 50px; border-radius: 20px; width: 100%; padding: 20px; color: #fff; margin-top: 120px; }

/* Sectores - Circunferencia de fondo de iconos */
#sectores .back-general-home {
    border-radius: 50%;
    border-width: 16px;
    border-style: solid;
    width: 38rem;
    height: 38rem;
    margin: -3rem 0 0 -1.2rem;
    position: absolute;
    z-index: -1;

}
#sectores .back-distribucion-electrica {
    border-color: #00b2a9;
}
#sectores .back-control-industrial {
    border-color: #f7931e;
}
#sectores .back-calidad-de-energia {
    border-color: #ebffff;
}
#sectores .back-respaldo-de-energia {
    border-color: #fcee21;
}
#sectores .icon-sector { margin-top: 30px; }


/* Sector - Circunferencia transparente de fondo */
#sector .back-sector-icon {
    display: none;
	border-radius: 50%;
	width: 80rem;
    height: 80rem;
    margin: -100px 0 0 0px;
    position: absolute;
    z-index: -1;
    background: #ffffff1c;
    filter: saturate(0.5);
}

/* Sector - Icono del sector */
#sector .icon-sector { margin: 420px 200px 200px 200px; width: 1400px; }


/* Sector - Botón de Volver */
#sector .btn-volver,
#sector .btn-volver:hover,
#sector .btn-volver:active { 
    background: none !important; 
    padding: 30px; 
    border: solid 4px #fff !important; 
    border-radius: 20px; color: #fff !important; 
    font-size: 44px; font-family: 'EatonBol'; 
}

/* Sector - Botónes de Iconos */
#sector .btn { position: absolute; font-size: 50px; }

/* Sectores/Sector - Botones de Iconos */
.btn-distribucion-electrica,
.btn-distribucion-electrica:hover,
.btn-distribucion-electrica:active {
    background-color: #00b2a9;
    border-color: #00b2a9;
}
.btn-control-industrial,
.btn-control-industrial:hover,
.btn-control-industrial:active {
    background-color: #f7931e;
    border-color: #f7931e;
}
.btn-calidad-de-energia,
.btn-calidad-de-energia:hover,
.btn-calidad-de-energia:active {
    background-color: #ebffff;
    border-color: #ebffff;
	  color: #1c66e2;
}
.btn-respaldo-de-energia,
.btn-respaldo-de-energia:hover,
.btn-respaldo-de-energia:active {
    background-color: #fcee21;
    border-color: #fcee21;
	  color: #1c66e2;
}

.btn-home {
    background-color: #1572b3;
    border-color: #1572b3;
}


/* Sector - Animación botón */
#sector .btn-distribucion-electrica {
  animation: pulse-distribucion-electrica 2s infinite;
}
#sector .btn-control-industrial {
  animation: pulse-control-industrial 2s infinite;
}
#sector .btn-calidad-de-energia {
  animation: pulse-calidad-de-energia 2s infinite;
}
#sector .btn-respaldo-de-energia {
  animation: pulse-respaldo-de-energia 2s infinite;
}

@keyframes pulse-distribucion-electrica {
  0% {
    box-shadow: 0 0 0 0 #00b2a9;
  }
  70% {
    box-shadow: 0 0 0 16px rgba(0, 123, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

@keyframes pulse-control-industrial {
  0% {
    box-shadow: 0 0 0 0 #f7931e;
  }
  70% {
    box-shadow: 0 0 0 16px rgba(0, 123, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

@keyframes pulse-calidad-de-energia {
  0% {
    box-shadow: 0 0 0 0 #ebffff;
  }
  70% {
    box-shadow: 0 0 0 16px rgba(0, 123, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

@keyframes pulse-respaldo-de-energia {
  0% {
    box-shadow: 0 0 0 0 #fcee21;
  }
  70% {
    box-shadow: 0 0 0 16px rgba(0, 123, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}


/* Sector - Ubicacióbn de los botones de productos */
.btn-producto-1 { top:740px; left:1400px; }
.btn-producto-2 { top:700px; left:2680px; }
.btn-producto-3 { top:1060px; left:1310px; }
.btn-producto-4 { top:1200px; left:2600px; }
.btn-producto-5 { top:1600px; left:1960px; }

.btn-producto-6 { top:600px; left:1900px; }
.btn-producto-7 { top:800px; left:1600px; }
.btn-producto-8 { top:1000px; left:1500px; }
.btn-producto-9 { top:1200px; left:1600px; }
.btn-producto-10 { top:1400px; left:1700px; }
.btn-producto-11 { top:1600px; left:1600px; }
.btn-producto-12 { top:1800px; left:1900px; }
.btn-producto-13 { top:600px; left:2900px; }
.btn-producto-14 { top:800px; left:2800px; }
.btn-producto-15 { top:1000px; left:2900px; }
.btn-producto-16 { top:1200px; left:3000px; }
.btn-producto-17 { top:1400px; left:2900px; }
.btn-producto-18 { top:1600px; left:2800px; }
.btn-producto-19 { top:1800px; left:2900px; }

.btn-producto-20 { top:1600px; left:2100px; }

.btn-producto-21 { top:740px; left:1600px; }
.btn-producto-22 { top:780px; left:2800px; }
.btn-producto-23 { top:1700px; left:2180px; }


/* Modal - Cuerpo */
@media (min-width: 1984px) {
    .modal-lg, .modal-xl {
      margin-top: 240px;
      max-width: 2200px;
    }

    .modal-content {
        border-radius: 2rem;
    }
}

/* Modal - iFrame */
#modalProducto #iframeProducto {
    width: 100%;
    height: 1200px;
    border: none;
}

/* Modal - Producto */
body#producto {
    color: #000;
    font-family: 'EatonReg', 'EatonMed', 'EatonBol';
    background: #fff;
}

body#producto #qr h2 {
    color: #fff;
    font-size: 40px;
}

body#producto #qr .fondo_qr_azul {
    height: 12rem;
    margin: 2rem 0 -30rem 0;
    background-color: #005eb8;
    z-index: -1;
    border-radius: 20px;
    color: #fff !important;
}