:root {
  --main-font: "Raleway";
  --alternate-font: sans-serif;
  --font-size: 16px;
  --line-height: 1.6;

  --main-color: rgb(0, 145, 2);
  --second-color: rgb(00, 00, 00);

  --color_de_fondo: #f2f2f2;
  --color_de_hedear: var(--second-color);
  --color_del_nav_menu: var(--second-color);
  --color_font_white: #fff;

  --action-color: rgb(84, 194, 141);
  --action-color_hover: rgb(71, 163, 118);

  --text-color: #515b6d;
  --title-color: #333;

  --link-color: #509ee3;
  --link-hover-color: var(--main-color);

  --pestañas-activa: #dee2e6;

  --max-width: 1200px;
  --header-height: 5rem;

  --logo-width: 3.5rem;
  --logo-height: 3.5rem;
  --logo-spacing: 0.5rem;

  --bg-inicio: linear-gradient(
    131deg,
    rgba(28, 118, 173, 0.92),
    rgba(83, 184, 152, 1)
  );
  --bg-color: rgb(242, 244, 247);
}

/* delcaración de variables */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
} /* Reseteo simple de parametros */

html {
  font-family: var(--main-font), var(--alternate-font);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--text-color);
  background-color: var(--color-de-fondo);
}
body {
  min-height: 100vh;
  max-width: 100%;
  width: 100%;
  background-color: rgb(255, 255, 255);
}
.container {
}

/* Menu ***************************************************************** */

header {
  width: 100%; /* header ocupa el 100% del ancho */
  background-color: var(--color_del_nav_menu); /* color de fondo del header */
  top: 0;
  height: 60px;
  z-index: 50;
}
.fa_left {
  margin-left: -20px;
}
.grid_nav {
  background-color: var(--second-color);
  position: relative;
  display: grid;
  grid-template-columns: 300px 10px 30px;
  grid-template-rows: 60px;
  justify-content: space-between;
  align-items: center;
  z-index: 9;
  margin-top: -1px;
}
#nav_btn {
  display: none; /* ocultamos el checkbox */
}
.over {
  overflow: hidden;
}
header label {
  display: none; /* ocultamos el icono del nav_menu para el responsive */
  /* width: 30px; /* le damos un ancho de 30px */
  /* height: 30px; /*  le damos un algo de 30px */
  /* padding: 15px 33px 30px 15px; /* le damos un padding de  */
  /*border-right: 1px solid #fff; una rayita blanca a la derecha  pero no me gusta mucho*/
}
/* header > label " > hijo directo, porque hay optro label que toma el color". */
header > label:hover {
  cursor: pointer; /*  puntero de la manito cuando passe el  raton */
  background-color: #fff; /*  color de fondo negro con trasparencia de 0.1 */
}

header label i:hover {
  cursor: pointer; /*  puntero de la manito cuando passe el  raton */
  color: var(--main-color);
}

.services label {
  color: var(--color_font_white);
  display: block;
  min-width: 100px;
  min-height: 48px;
}

.services:hover ul {
  display: block;
}

#nav_btn {
  grid-column: 2 / 3;
  text-align: right;
}
header label {
  display: block;
  grid-column: 3 / 4;
  width: 16px;
  height: 16px;
}
label i {
  /*  margin-left: -25px; */
}
.nav_logo {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.nav_logo-web {
  display: none;
  max-width: 300px;
  max-height: 55px;
}

.nav_logo-movil {
  width: 90%;
  max-width: 300px;
  max-height: 55px;
}
.nav_menu {
  position: absolute;
  background-color: var(--color_del_nav_menu);
  width: 100%;
  top: 60px;
  margin-left: -100%;
  transition: all 0.3s;
  z-index: 3;
}
.nav_menu ul {
  flex-direction: column;
}
.nav_menu li a,
.nav_menu li span {
  display: block; /*  loa link en bloques */
  padding: 15px 10px;
  color: var(--link-hover-color);
  text-decoration: none; /*  quitamos la decoracion de los link, el subrayado y el color violeta al entrar */
  font-size: 1.15rem;
  font-weight: bold;
  transition: all 0.3s ease;
}
.nav_menu ul li :hover {
  /* border-right: 1px solid #fff;  borde derecho en blanco como efecto pero no me gusta mucho */
  background-color: rgba(
    112,
    114,
    112,
    0.2
  ); /*  color de fondo negro con trasparencia de 0.1 */
  color: var(--color_font_white);
}

#nav_btn:checked ~ .nav_menu {
  margin-left: 0;
  display: block;
}

.services:hover ul {
  display: none;
}
.subnav_menu li {
  padding-left: 20px;
}
#sub-nav_menu:checked ~ .subnav_menu {
  display: block;
  position: relative;
}
/* Menu end **************************************** */
/* BODY ************************************  */
/* BODY End ************************************  */

/* inicio  **************************************** */
.inicio_screen {
  margin: 0;
}
.inicio {
  width: 100%;
  background-image: linear-gradient(
    131deg,
    rgba(28, 118, 173, 0.92),
    rgba(83, 184, 152, 1)
  );
}
.inicio_flex {
  display: flex;
  flex-direction: column;
}
.inicio_text {
  padding: 25px;
  color: #fff;
  font-family: var(--main-font), var(--alternate-font);
}
.inicio_h2 {
  font-family: var(--main-font), var(--alternate-font);
  font-size: 2em;
  margin-bottom: 10px;
}
.inicio_p {
  margin-bottom: 25px;
  font-size: 1.2em;
}
.inicio-imagen {
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-inicio {
  align-content: center;
  width: 95%;
}
/* Inicio Fin **************************************** */

/* servicios  **************************************** */
.services {
  margin-bottom: 20px;
}
.services_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  padding: 50px 0 10px;
  justify-items: center;
  grid-gap: 20px 0px;
}
.services_card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  width: 95%;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.services_card_image {
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
.services_card img {
  background-color: var(--bg-color);
}
.services_card_body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}
.services_card_title {
  font-size: 1.2rem;
}
.services_card_text {
  font-size: 0.8rem;
}
/* ********************************* */

/*  Fin **************************************** */

/*  Fin **************************************** */

/* Trabajo  **************************************** */

.trabajo {
  margin-top: 50px auto;
}
.Trabajo_grid {
  margin: 0 auto;
}
.trabajo_card {
  padding: 30px 15px 0 15px;
}
.trabajo_h3 {
  font-family: var(--main-font);
  font-size: 2.5rem;
  font-weight: 500;
}
.trabajo_body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-content: flex-end;
  row-gap: 8px;
}
.trabajo_p {
  font-size: 1rem;
}
.trabajo_image {
  padding-top: 20px;
}
.trabajo_img {
  width: 100%;
}

/* Como funciona Fin **************************************** */

/* Productos  **************************************** */
.productos_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  padding: 50px 0 10px;
  justify-items: center;
  grid-gap: 20px 0px;
}
.productos_card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  width: 98%;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.productos_card_image {
  min-width: 160px;
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
.productos_card img {
  background-color: var(--bg-color);
}
.productos_card_body {
  display: grid;
  grid-template-rows: 1fr 2fr 1fr 20px;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.25rem;
}
.productos_card_title {
  font-size: 1rem;
}
.productos_card_title1 {
  font-size: 0.8rem;
  text-align: end;
  padding-right: 10px;
  margin-top: -7px;
}
.productos_card_price {
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
}
.productos_card_text {
  font-size: 0.6rem;
  font-weight: 600;
  text-align: left;
}

.productos_card_link {
  text-align: end;
  display: none;
}
/* Productos Fin **************************************** */

/* Interesado **************************************** */
.interesado {
  margin-top: 50px;
}
.interesado_grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  flex-wrap: wrap;
  background-color: var(--bg-color);
  padding: 10px;
}
.interesado_body {
  position: relative;
  width: 95%;
  text-align: center;
}
.interesado_title {
  font-size: 2.3rem;
  font-weight: 500;
  margin: 20px 0;
}
.interesado_comentarios {
  font-size: 1.3rem;
  font-weight: 400;
  margin: 20px 0;
}
.interesado_info {
  font-size: 1rem;
  font-weight: 400;
  margin: 20px 0 -5px;
}

textarea.form-control {
  height: auto;
}

.form-control {
  border-color: var(--second-color);
  /* border-radius: 0.25rem; */
  /* transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; */
}

.form-control {
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border-color: var(--second-color);
  background-clip: padding-box;
  resize: none;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
  border: 2px solid var(--main-color);
  outline: none;
}

/* Interesado Fin **************************************** */

/* Footer  **************************************** */

footer {
  padding-top: 10px;
  background-color: var(--color_del_nav_menu);
}
f.flex-column {
  flex-direction: column;
}
.footer_grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr) 30px 120px;
  grid-template-rows: 1fr 1fr 30px;
  justify-content: center;
}
.footer_media {
  grid-row: 1 / 3;
  grid-column: 1 / 7;
}
.SocialMedia {
  align-items: center;
  justify-content: space-evenly;
  font-size: 1.25rem;
  padding-left: 0;
  list-style: none;
  margin-top: 0;
  margin-bottom: 1rem;
}
.footer_aviso {
  grid-row: 1 / span 3;
  grid-column: 6 / 8;
}
.footer_media-1 {
  display: none;
}

/**************************************************** */
.footer_aviso ul {
  padding: 0%;
  margin: 0%;
}

a {
  text-decoration: none;
  color: var(--link-color);
  transition: all 0.3s ease-out;
  font-weight: 700;
}
.avisos_li {
  font-size: 0.7rem;
  text-align: left;
  text-decoration: none;
  list-style: none;
  margin: 0px;
}
.footer_copy {
  grid-row: 3 /4;
  grid-column: 1 / 6;
}
.small,
small {
  font-size: 0.8rem;
  font-weight: 600;
}
.sidenav {
  display: none;
}

/* Footer Fin **************************************** */
.space {
  width: 100%;
  height: 50px;
}

/* componentes ***************************************************************** */
.button_flex {
  display: flex;
  align-content: space-around;
  justify-content: space-around;
}
.button {
  display: inline-block;
  width: 100%;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4caf50;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px #999;
}

.button:hover {
  background-color: #3e8e41;
}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 3px #666;
  transform: translateY(2px);
}

/* Componentes Fin  ***************************************************************** */

/* modal cookies ******************************************************* */
.cookies_container {
  width: 350px;
  height: 240px;
  border-radius: 10px;
  background-color: var(--text-color);
  position: fixed;
  bottom: 15px;
  left: 25px;
  display: block;
}

.group_cookies_p {
  margin: 15px;
}
.cookies_p {
  font-size: 0.8em;
  color: white;
  margin-bottom: 2px;
}

.cookies_pLine {
  display: inline;
}
.cookies_btn {
  position: relative;
  width: 150px;
  padding: 0 3;
  font-size: 0.9em;
  font-weight: 700;
  border-width: 2px;
  border-style: solid;
  text-align: center;
  color: rgb(255, 255, 255);
  border-color: transparent;
  border-radius: 10px;
  left: 180px;
  bottom: 10px;
  z-index: 1;
  background-color: #c2c5c3;
}

/* Modificadores ********************************* */
.text-white {
  color: #fff !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.trabajo_aclaracion_b {
  font-size: 1rem;
}
.d-flex {
  display: flex;
}
.j-c_center {
  justify-content: center;
}
.a-i_center {
  align-items: center;
}
.j-i_center {
  justify-items: center;
}
.item-center {
  align-self: center;
  justify-self: center;
}
.item-left {
  align-self: end;
  justify-self: end;
}
.center {
  margin: 0 auto;
}
.btn_inicio {
  background-color: var(--action-color) !important;
  width: 200px;
}
.active {
  color: rgb(0, 145, 2);
}
.width-100 {
  width: 100%;
}
.oculto {
  display: none;
}

/* Modificadores  Fin ********************************* */

.border-0 {
  border: olive solid 6px;
}
.border-1 {
  border: rgb(128, 0, 60) solid 6px;
}
.border-2 {
  border: rgb(28, 0, 128) solid 6px;
}

/* ****************************************************** */
.A_container {
  max-width: 1200px;
  margin: 0 auto;
}

.A_body {
  padding: 10px;
}