:root {
   --main-background: #fff;
   --menu-background: #1d1d1d;
   --menu-text: #fff;
   --upper-menu-background: #e1251b;
   --first-banner-text: #fff;
   --first-banner-btn-bg: #fff;
   --first-banner-btn-color: #e90f2f;
   --side-nav-background:#1d1d1d;
   --side-nav-text:#fff;
}

html {
   scroll-behavior: smooth !important;
}

body {
   font-family: "open sans", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
   font-variation-settings: "wdth" 100;
   background-color: var(--main-background);
   color: var(--main-text);
   margin: auto;
}

.fixed-header {
   z-index:1000;
   position:fixed;
   width:100%;
   min-width: 300px;
   background-color: #000;
}

@font-face {
   font-family: "Gotham Bold";
   src: url("../styles/fonts/Gotham-Bold.eot"); /* IE9 Compat Modes */
   src: url("../styles/fonts/Gotham-Bold.eot?#iefix") format("embedded-opentype"),
     /* IE6-IE8 */ url("../styles/fonts/Gotham-Bold.woff") format("woff"),
     /* Modern Browsers */ url("../styles/fonts/Gotham-Bold.ttf") format("truetype"),
     /* Safari, Android, iOS */ url("../styles/fonts/Gotham-Bold.svg#svgFontName")
       format("svg"); /* Legacy iOS */
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: "Gotham Medium";
   src: url("../styles/fonts/Gotham-Medium.eot"); /* IE9 Compat Modes */
   src: url("../styles/fonts/Gotham-Medium.eot?#iefix") format("embedded-opentype"),
     /* IE6-IE8 */ url("../styles/fonts/Gotham-Medium.woff") format("woff"),
     /* Modern Browsers */ url("../styles/fonts/Gotham-Medium.ttf") format("truetype"),
     /* Safari, Android, iOS */ url("../styles/fonts/Gotham-Medium.svg#svgFontName")
       format("svg"); /* Legacy iOS */
   font-weight: normal;
   font-style: normal;
 }
 

 @font-face {
   font-family: "Gotham Black";
   src: url("../styles/fonts/Gotham-Black.eot"); /* IE9 Compat Modes */
   src: url("../styles/fonts/Gotham-Black.eot?#iefix") format("embedded-opentype"),
     /* IE6-IE8 */ url("../styles/fonts/Gotham-Black.woff") format("woff"),
     /* Modern Browsers */ url("../styles/fonts/Gotham-Black.ttf") format("truetype"),
     /* Safari, Android, iOS */ url("../styles/fonts/Gotham-Black.svg#svgFontName")
       format("svg"); /* Legacy iOS */
   font-weight: normal;
   font-style: normal;
 }

.title {
   font-family: "Gotham Bold", sans-serif;
   display: flex;
   justify-content: center;
   font-weight: 900;
   text-transform: uppercase;
   font-size: 3.5rem;
}


.header-section {
   height: 80px;
   padding-top: 15px;
   padding-bottom: 15px;
   padding-left: 17px;
   padding-right: 17px;
   display: flex;
   gap: 12px;
   align-items: center;
   justify-content: space-between;
}
#upper_menu {
   position: fixed;
   top: 0;
   height: 100px;
   width: 100vw;
   z-index: 300;
   mix-blend-mode: normal;
 }
 
 #menu_button {
   position: absolute;
   top: 53px;
   right: -59px;
   width: 174px;
   display: flex;
   align-items: center;
   gap: 40px;
 }
 
 .cls-1 {
   fill: none;
   stroke: #fff;
   stroke-miterlimit: 10;
 }
 
 #menu_button_1 {
   position: absolute;
   width: 67px;
   height: 65px;
   padding-top: 12px;
   cursor: pointer;
   z-index: 2;
 }
 
 .menu_button_1_hidden {
   display: none;
   opacity: 0;
   cursor: default !important;
 }
 
 #menu_button_2 {
   position: absolute;
   width: 67px;
   height: 65px;
   padding-top: 12px;
   cursor: pointer;
   z-index: 1;
 }
 
 .menu_button_2_hidden {
   display: none;
   opacity: 0;
   cursor: default !important;
 }
 
 #line3,
 #line4,
 #line5,
 #line8,
 #line9,
 #line10 {
   opacity: 0;
 }
 
 #side-menu {
   width: 600px;
   height: 100vh;
   position: fixed;
   background-color: #000;
   right: 0;
   z-index: 9;
 }
 
 #logo_vec {

   position: absolute;
   top: 19px; 
   /* left: 24px; */
   max-width: 40%;
   transform: scale(0.8);
 }

 .whatssapp{
   display: flex;
   max-width: 100%;
   justify-content: end;
   align-items: center;
 padding: 20px 0 20px 0;
 margin-right: 140px;}

 .social {
   display: flex;
   padding: 20px;
   margin-left: 50px;
   justify-content: space-between;
   max-width: 20%;
 }
 a .social {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   padding: 20px;
   margin: 40px;
   max-width: 100%;
   color: #fff;
 }
 
 .send-link-2 {
   transform: scale(1.8);
   margin-left: 9px;
   fill: #fcfcfc;
   transition: all 0.25s;
 }
 
 .send-link-1 {
   transform: scale(1.8);
   margin-left: 9px;
   fill: #fcfcfc;
   transition: all 0.25s;
 }
 .send-link-1:hover {
   fill: #e2261b;
 }
 
 
 #upper_menu {
   opacity: 0;
   top: 100vh;
   background-color: #1d1d1d;
 }
 
 
/* first banner */

.first-banner {
   position: relative;
   width:100%;
   height: calc(100vw* 0.5);
   min-height: 100px;
   margin-top:100px;
   font-family: "gotham black", sans-serif;
   font-weight: bold;
   background: url(../images/banner-main/fondo_rojo.jpg);
   /* color: var(--first-banner-text); */
}



 
.first-banner-cta {
   position: absolute;
    z-index: 3;
    left: 4vw;
    width: 50vw;
    bottom: -10px;
    transform: translateY(-50%);
}

#thumb {
  width: 50vw;
}
#thumb img {
  height: calc(100vh - 100px);
  width: auto;

  mask-image: url(../images/banner-main/mascara_negra.png);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-image: url(../images/banner-main/mascara_negra.png);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}


.first-banner-video {
  position: relative;
  height: calc(100vh - 100px);
  width: auto;
  position: absolute;
  left: 0;
  z-index: 1;
}
.first-banner-overlay {
  position: relative;
  width: 100%;
  height: auto;
  left: 0;
  z-index: 2;
}

#thumb {
  height: calc(100vh - 100px);
  position: absolute;
  top: 0;
  right: 0;
}

.video-mask {
  mask-image: url(../images/banner-main/mascara_negra.png);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-image: url(../images/banner-main/mascara_negra.png);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}

.first-banner-message-1 {
   font-size: 6vw;
   line-height: 6vw;
}
.first-banner-message-2 {
   font-size: 6vw;
   line-height: 6vw;
}

.first-banner-video {
   position: relative;
   height: auto;
   width: 50vw;
   position: absolute;
   right: 0;
   z-index: 1;
}
.first-banner-overlay {
   position: relative;
   width: 100%;
   height: auto;
   left: 0;
   z-index: 2;
}

.first-banner-cta-btn {
   font-size: 16px;
   background-color: var(--first-banner-btn-bg);
   color: var(--first-banner-btn-color);
   border-radius: 27px;
   width: 169px;
   height: 36px;
   margin-top: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   box-shadow: 0 12px 12px -12px black;
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
}

.contactenos {
   pointer-events: auto;
   cursor: pointer;
   background-color: var(--first-banner-btn-bg);
   color: var(--upper-menu-background);
   border: none;
   padding: 0.5rem 3rem;
   margin: 30px 0;
   font-family: inherit;
   font-weight: 600;
   font-size: 16px;
   position: relative;
   display: inline-block;
   box-shadow: 0 12px 12px -12px black;
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
}

.contactenos::before,
.contactenos::after {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.contactenos--calypso {
   overflow: hidden;
   font-size: 1.15rem;
   border-radius: 3rem;
}

.contactenos--calypso span {
   display: block;
   position: relative;
   /* mix-blend-mode: difference;  */
   z-index: 10;
}

.contactenos--calypso:hover span {
   color: #fff;
}

@keyframes MoveScaleUpInitial {
   to {
      transform: translate3d(0, -105%, 0) scale3d(1, 2, 1);
      opacity: 0;
   }
}

@keyframes MoveScaleUpEnd {
   from {
      transform: translate3d(0, 100%, 0) scale3d(1, 2, 1);
      opacity: 0;
   }
   to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
   }
}

.contactenos--calypso::before {
   content: "";
   background: var(--menu-background);
   color: #fff;
   width: 120%;
   height: 0;
   padding-bottom: 120%;
   top: -110%;
   left: -10%;
   border-radius: 50%;
   transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
}

.contactenos--calypso:hover::before {
   transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.contactenos--calypso::after {
   content: "";
   background: var(--menu-background);
   color: #fff;
   transform: translate3d(0, -100%, 0);
   transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.contactenos--calypso:hover::after {
   transform: translate3d(0, 0, 0);
   transition-duration: 0.05s;
   transition-delay: 0.4s;
   transition-timing-function: linear;
}

.counter-container {
   width: 100%;
   background-color: #343434;
   height: 900px;
   display: flex;
   justify-content: center;
 }
 
 b { 
   font-weight: 900;
   font-size: 4rem;
   /* color: #fff; */
}

.border1 {
   /* padding: 30px; */
   margin: 30px 0;
   border-left: 1px solid rgb(255, 255, 255);
   height: 80px;
   display: flex;
   flex-direction: column;
   align-self: center;
   justify-content: center;
 }
 
 .border2 {
   padding-bottom: 60px;
   /* padding: 30px; */
   margin: 30px 0;
   border-left: 1px solid rgb(255, 255, 255);
   height: 80px;
   display: flex;
   flex-direction: column;
   align-self: center;
   justify-content: center;
 }

 .counters1 {
   margin: 15px auto;
   display: flex;
   height: 100%;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: 40px;
   flex-wrap: nowrap;
 }
 
 .icon-counter {
   width: 70%;
   height: auto;
 }
 
 .counter-detail {
   display: flex;
   align-items: self-end;
   height: max-content;
   color: #fff;
 }
 
 .counter1 {
   margin-left: -500px;
 }
 
 .counter2 {
   margin-right: -500px;
 }
 
 .counter3 {
   margin-left: -500px;
 }
 
 .counter-detail1 {
  width: 200px;
   flex-wrap: nowrap;
   flex-direction: column;
   justify-content: center;
   display: flex;
   align-items: center;
   height: max-content;
   min-width: max-content;
   margin-left: -40px;
 }
 
 .counter-detail > *:first-child {
   align-self: stretch;
 }
 .counter-detail .selected {
   align-self: center;
 }
 
 .counter-detail span {
   font-weight: 800;
   font-size: 3.3rem;
   color: #e2261b;
   width: fit-content;
   text-align: center;
 }
 
 .counter-detail p {
   margin-top: -8px;
   font-weight: 800;
   font-size: xx-large;
   color: #fff;
   line-height: normal;
 }
 

.image-wrapper {
   width: max-content;
   border-radius: 6px;
   display: flex;
   align-items: center;
   text-align: center;
   line-height: 1.6;
   background-color: var(--upper-menu-background);
   width: 38px;
   height: 38px;
   border-radius: 38px;
   pointer-events: auto;
   cursor: pointer;
   img {
      height: auto;
      max-width: 100%;
   }
}

.image-wrapper::before,
.image-wrapper::after {
   /*	position: absolute; */
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.shine {
   overflow: hidden;
   font-size: 1.15rem;
   border-radius: 3rem;
   position: relative;
   display: block;
}

.shine img {
   display: block;
   position: relative;
   z-index: 10;
}

.shine .shine-icon {
   filter: invert(100%) sepia(0%) saturate(7488%) hue-rotate(165deg)
      brightness(103%) contrast(105%);
}

.shine:hover .shine-icon {
   filter: invert(24%) sepia(87%) saturate(5917%) hue-rotate(354deg)
      brightness(93%) contrast(90%);
   animation: MoveScaleUpInitialRound 0.3s forwards,
      MoveScaleUpEndRound 0.3s forwards 0.3s;
}

@keyframes MoveScaleUpInitialRound {
   to {
      transform: translate3d(0, -105%, 0) scale3d(1, 2, 1);
      opacity: 1;
   }
}

@keyframes MoveScaleUpEndRound {
   from {
      transform: translate3d(0, 100%, 0) scale3d(1, 2, 1);
      opacity: 1;
   }
   to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
   }
}

.shine::before {
   content: "";
   background: white;
   color: #fff;
   width: 38px;
   height: 38px;
   padding-bottom: 6%;
   top: 0px;
   left: 0;
   border-radius: 50%;
   transform: translate3d(0, 58%, 0) scale3d(0, 0, 0);
   position: absolute;
   display: block;
}

.shine:hover::before {
   transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.shine::after {
   content: "";
   position: absolute;
   background: white;
   color: #fff;
   transform: translate3d(0, -100%, 0);
   transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.shine:hover::after {
   transform: translate3d(0, 0, 0);
   transition-duration: 0.05s;
   transition-delay: 0.4s;
   transition-timing-function: linear;
}


.container {
   min-width: 300px;
   max-width: 100%;
   width: 100%;
   height: auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   background-color: #1d1d1d;
}

#texto-container {
   position: relative;
   width: 805px;
   /* height: 341px; */
   font-family: "open sans", sans-serif;
   color: #fff;
   display: flex;
   gap: 20px;
   flex-direction: column;
   width: 100%;
  height: 900px;
  align-items: center;
  justify-content: center;
  background-color: #000;
  margin-top: -4px;
 }

 #small-texto-container{
  position: relative;
   width: 805px;
   /* height: 341px; */
   font-family: "open sans", sans-serif;
   color: #fff;
   display: flex;
   gap: 20px;
   flex-direction: column;
   width: 100%;
  height: 95vw;
  align-items: center;
  justify-content: center;
  background-color: #000;
  margin-top: -4px;
 }

 #who-we-are-title {
   font-family: "Gotham Black";
   font-weight: 900;
   font-size: 76px;
   width: 805px;
   text-align: center;
   position: relative;
 }
 
 #texto {
   width: 689px;
   font-size: 24px;
   line-height: 32px;
   z-index: 3;
   padding-left: 59px;
 }
 
 #texto2 {
   font-weight: 700;
 }

 #cuadro1 {
   width: 0px;
   /* width: 622px; */
   height: 28px;
   /*
   position: absolute;
   top: 145px;
   left: 51px;
   */
   background-color: #f00;
   z-index: 2;
   margin-top: -188px;
   margin-left:-10px;
 }
 
 #cuadro2 {
   width: 0px;
   /* width: 678px; */
   height: 28px;
   /*
   position: absolute;
   top: 177px;
   left: 51px;
   */
   background-color: #f00;
   z-index: 2;
   margin-top: 4px;
   margin-left:-10px;
 }
 
 #cuadro3 {
   width: 0px;
   /* width: 225px; */
   height: 28px;
   /*
   position: absolute;
   top: 209px;
   left: 51px;
   */
   background-color: #f00;
   z-index: 2;

   margin-top: 4px;
   margin-left:-10px;
 }



 
 #cuadro4 {
  width: 0px;
  height: 3.1vw;
  background-color: #f00;
  z-index: 2;
  margin-top: -20vw;
  margin-left: 0.5vw;
}

#cuadro5 {
  width: 0px;
  height: 3.1vw;
  background-color: #f00;
  z-index: 2;
  margin-top: 0.3vw;
  margin-left:0.5vw;
}

#cuadro6 {
  width: 0px;
  height: 3.1vw;
  background-color: #f00;
  z-index: 2;
  margin-top: 0.3vw;
  margin-left:0.5vw;
}
 

 #product-1,
#product-2,
#product-3 {
  opacity: 0;
}

.products {
  position: relative;
   background-image: url("../images/FONDO_ROJO_TRAMA_1.jpg");
   background-size: cover;
   height: fit-content;
   min-height: 900px;
   margin: auto;
   text-align: center;
   color: #fff;
}
.outdoor {
   background-image: url("../images/FONDO_ROJO_TRAMA_1.jpg");
   background-size: cover;
   height: fit-content;
   margin: auto;
   text-align: center;
   color: #fff;
}

.indoor {
   background-image: url("../images/FONDO_negro_TRAMA.jpg");
   background-size: cover;
   height: fit-content;
   margin: auto;
   text-align: center;
   color: #fff;
}

img.img-hight {
   height: auto;
   max-width: 95%;
}

.products-section {
   width: 70%;
   display: flex;
   justify-content: center;
   margin-top: 40px;
   color: #fff;
 }
 
 .products-section1 {
   /* width: 100%;
      display: grid;
      grid-gap: 40px;
      grid-template-columns: repeat(auto-fit, 500px);
      padding: 20px;
      margin: 40px auto;
      justify-content: center;
      margin-bottom: 40px; */
   margin-bottom: 40px;
   display: flex;
   padding: 0 40px;
   gap: 90px;
   flex-wrap: wrap;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .products-out {
   margin-bottom: 40px;
   width: 70%;
   display: flex;
   flex-wrap: wrap;
   padding: 10px 80px;
   margin-left: auto;
   margin-right: auto;
   justify-content: center;
 }
 
 .products-in {
   margin-bottom: 40px;
   width: 70%;
   display: flex;
   flex-wrap: wrap;
   padding: 10px 80px;
   margin-left: auto;
   margin-right: auto;
   justify-content: center;
 }
 
 .producto-highlight {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   flex-wrap: nowrap;
   font-size: xx-large;
   color: #fff;
   padding: 30px;
   margin: 15px 10px;
   max-width: 100%;
 }
 
 .fade-in {
   opacity: 0.7;
   filter: grayscale(100%);
   transition: opacity 1s;
   -moz-transition: opacity 1s;
   -webkit-transition: opacity 1s;
 }
 
 .fade-in:hover {
   opacity: 1;
   filter: none;
 }

 .comprar-section {
   text-align: center;
   width: 100%;
   height: 900px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   flex-wrap: nowrap;
   padding-bottom: 24px;
   position:relative;
 }

 .comprar-section-overlay{
   top:0;
   text-align: center;
   width: 100%;
   height: 900px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   flex-wrap: nowrap;
   padding-bottom: 24px;
   position:absolute;
   background-image: url("../images/banner-main/fondo_rojo.jpg");
   background-size: cover;
   overflow:hidden;
   clip-path: rect(0% 100% 100% 0%);
  -web-clip-path: rect(0% 100% 100% 0%);
 }
 
 .comprar-section1 {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   text-align: center;
   /* text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    padding-bottom: 24px; */
 }
.button1 {
   cursor: pointer;
   border: 1px solid #fff;
   background: none;
   color: #fff;
   font-weight: 600;
   padding: 10px;
   border-radius: 40px;
   width: 100px;
 }
 
 
 .button2 {
   cursor: pointer;
   align-self: center;
   border: 1px solid #fff;
   background: none;
   color: #fff;
   transition: all 0.4s ;
   font-weight: 600;
   padding: 20px 80px;
   border-radius: 80px;
   width: fit-content;
 }
 
 .button2:hover {
   color: #e1251b;
   border: 1px solid #e1251b;
 }
 
 .button2 span {
   font-size: 3.3rem;
 }

 .button2-2:hover {
  color: #fff;
  border: 1px solid #fff;
}
 
.comprar-texto {
   width: 95%;
   padding: 10px;
   margin: 10px;
   padding:10px 0; 
   color: #e1251b;
   font-weight: 600;
   font-size: 3rem;
}
/*
.comprar-texto b {
  color: #fff;
}
  */
.comprar-texto-2 {
  color: #fff;
}

@keyframes MoveScaleUpInitial {
   to {
      transform: translate3d(0, -105%, 0) scale3d(1, 2, 1);
      opacity: 0;
   }
}

@keyframes MoveScaleUpEnd {
   from {
      transform: translate3d(0, 100%, 0) scale3d(1, 2, 1);
      opacity: 0;
   }
   to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
   }
}

.boton--comprar::before {
   content: "";
   background: var(--main-background);
   color: #fff;
   width: 120%;
   height: 0;
   padding-bottom: 120%;
   top: -110%;
   left: -10%;
   border-radius: 50%;
   transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
}

.boton--comprar:hover::before {
   transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
   transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.boton--comprar::after {
   content: "";
   background: var(--main-background);
   color: #fff;
   transform: translate3d(0, -100%, 0);
   transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.boton--comprar:hover::after {
   transform: translate3d(0, 0, 0);
   transition-duration: 0.05s;
   transition-delay: 0.4s;
   transition-timing-function: linear;
}

.casos-exito {
  

   height: fit-content;
   margin: auto;
   color: #fff;
   background-color: #F4F4F4;
}

.casos-section {
   width: 70%;
   display: flex;
   justify-content: center;
   margin-top: 40px;
}

.casos {
   margin-bottom: 40px;
   width: 70%;
   /* display: grid; */
   /* grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(3, 1fr); */
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   padding: 10px;
   margin-left: auto;
   margin-right: auto;
   justify-content: center;
}

.casos-highlighter {
   margin: auto;
   margin: auto;
   padding: auto;
   padding: 8px;
}

.img-casos {
   width: 100%;
   height: 100%;
}

.clientes {
   background-color: #F4F4F4;
   height: 250px;
   position: relative;
}

.clientes-section {
   width: 70%;
   display: flex;
   justify-content: center;
   margin-top: 40px;
}

.clientes-tittle {
   color: #797979;
}

.contactanos {
   background-image: url("../images/FONDO_negro_TRAMA_1.jpg");
   height: fit-content;
   margin: auto;
   color: #fff;
   padding-top: 36px;
   position:relative;
}

.contacto-form-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
.contacto-form {
  margin-top: 24px;
  margin-bottom: 84px;
  /* width: 100%; */
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  flex-wrap: wrap;
  gap: 16px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 14px;
  background-color: #2D2D2D; 
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #797979;
  /* border-color: var(--square-border); */
  /* border-style: solid;
  border-width: 1px; */
  box-shadow: rgba(0, 0, 0, 0.02) 0px 0.839802px 1.17572px -0.125px, rgba(0, 0, 0, 0.024) 0px 1.99048px 2.78667px -0.25px, rgba(0, 0, 0, 0.024) 0px 3.63084px 5.08318px -0.375px, rgba(0, 0, 0, 0.027) 0px 6.03627px 8.45077px -0.5px, rgba(0, 0, 0, 0.03) 0px 9.74808px 13.6473px -0.625px, rgba(0, 0, 0, 0.04) 0px 15.9566px 22.3393px -0.75px, rgba(0, 0, 0, 0.055) 0px 27.4762px 38.4667px -0.875px, rgba(0, 0, 0, 0.08) 0px 50px 70px -1px;
}
.contacto-field {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
label {
  display: block;
  width: 100%;
  text-align: left;
  
}
input, select, textarea {
  width: 100%;
  border-radius: 6px;
  background-color: #424242 !important; 
  /* border: 1px solid #000; */
  color: #fff;
}
input { 
  /* -webkit-border-radius: 6px;
  -moz-border-radius: 6px; */
  padding: 16px 8px 16px 8px;
  box-shadow: 0 0 0 0px var(--menu-hover) 
 /* {
     "name":"Primary. 400"
 }
  */
 , inset 0 0 0 1px var(--menu-hover);
  transition: 0.25s;
  outline: none;
  border: none;
}


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
   -webkit-background-clip: text;
   -webkit-text-fill-color: rgb(66, 66, 66);
   -webkit-box-shadow: 0 0 0 30px rgb(66, 66, 66) inset !important;
   transition: background-color 5000s ease-in-out 0s;
   box-shadow: inset 0 0 20px 20px rgb(66, 66, 66);
}


input:-webkit-autofill{
  -webkit-text-fill-color: #fff !important;
  caret-color: white;
}


select {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  box-shadow: 0 0 0 0px var(--menu-hover) 
 /* {
     "name":"Primary. 400"
 }
  */

 , inset 0 0 0 1px var(--menu-hover);
  transition: 0.25s;
  outline: none;
  border: none;
  padding: 16px 8px 16px 8px;
}

textarea {
  resize: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 16px 8px 16px 8px;
  box-shadow: 0 0 0 0px var(--menu-hover) 
 /* {
     "name":"Primary. 400"
 }
  */
 , inset 0 0 0 1px var(--menu-hover);
  transition: 0.25s;
  outline: none;
  border: none;
}
input[type="text"]:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 1px var(--menu-hover) 
 /* {
     "name":"Primary. 400"
 }
  */
 , inset 0 0 0 1px var(--menu-hover);
}
.form-error {
  width: 100%;
  color: #e2261b;
  text-align: right;
}
.form-send-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
.field-2 {
  grid-column: span 1;
}

@keyframes MoveScaleUpInitial {
  to {
     transform: translate3d(0, -105%, 0) scale3d(1, 2, 1);
     opacity: 0;
  }
}

@keyframes MoveScaleUpEnd {
  from {
     transform: translate3d(0, 100%, 0) scale3d(1, 2, 1);
     opacity: 0;
  }
  to {
     transform: translate3d(0, 0, 0);
     opacity: 1;
  }
}



.checkbox-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
 grid-column-gap: 4px;
  grid-row-gap: 4px;
  text-align: center;
  margin: auto;
}

.checkbox-inline {
  width: fit-content;
  display: inline-flex;
text-wrap: nowrap;}

  .checkbox {
     max-width: 20px;
  }


  input[type='checkbox'] {
   accent-color: #424242;
}



  .sending-screen {
     z-index: 2000;
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0px;
     left: 0px;
     background-color: #000;
     pointer-events: none;
     opacity: 0;
     transition: 0.25s ease;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   .sending-message {
     display: block;
   }
   .sending-area {
     display: flex;
     gap: 16px;
     flex-direction: column;
     text-align: center;
   }
   .sending-result {
     margin-top: -40px;
   }
   .sending-second-result {
     margin-top: 7px;
   }
   .sending-close {
     position: absolute;
     top: 16px;
     right: 16px;
     font-size: 50px;
    /* opacity */
     transition: 0.25s ease;
     color: #fff;
     text-decoration: none;
   }
   .sending-close:hover {
     color: #e2261b;
   }
   .sending-message {
     -moz-animation: fadeinphoto forwards 2s infinite;
     -webkit-animation: fadeinphoto forwards 2s infinite;
     -o-animation: fadeinphoto forwards 2s infinite;
     animation: fadeinphoto forwards 2s infinite;
     margin-top: 20px;
   }
   @keyframes fadeinphoto {
     0% {
         color: #fff;
    }
     50% {
         color: #e2261b;
    }
     100% {
         color: #fff;
    }
   }
   @-moz-keyframes fadeinphoto {
     0% {
         color: #fff;
    }
     50% {
         color: #e2261b;
    }
     100% {
         color: #fff;
    }
   }
   @-webkit-keyframes fadeinphoto {
     0% {
         color: #fff;
    }
     50% {
         color: #e2261b;
    }
     100% {
         color: #fff;
    }
   }
   @-o-keyframes fadeinphoto {
     0% {
         color: #fff;
    }
     50% {
         color: #e2261b;
    }
     100% {
         color: #fff;
    }
   }

   .clickable {
     pointer-events: all;
   }
   .non-transparent {
     opacity: 1;
   }

  h2 .sub-title {
   font-size: 3rem;
   /* margin: -10px 0; */
   }

   h2.sub-title1 {
      margin: 40px 0;
      margin-top: 70px;
      padding-top: 20px;
   }

.sub-tittle1{
   margin-top: -40px;
}


a:link, a:visited, a:active {
   text-decoration:none;
}

.detail {color: #fff;}



   /* Tablets y phablets */
@media only screen and (min-width: 576px) and (max-width: 890px){

   .button2 {
      max-width: 70%;
    }

    .button2 span {
      font-size: 2rem;
    }
    

  h1.title {
     font-size:xx-large;
  }
  .comprar-texto {
     width:95%; 
     text-wrap:pretty;
      font-size: 32px;
   }
   .comprar-texto b {
    font-size:40px;
   }

   .right-menu {display: none;} 

   .hamburger {
     display: flex;
     gap: 16px;
     cursor: pointer;
     position: relative;
     width: 25px;
     height: 20px;
   }
   .hamburger img {
     height: 100%;
     position: absolute;
     padding: 8px;
   }
   .hamburger-container {
     display: flex;
     gap: 11px;
     cursor: pointer;
     margin-right: 6px;
     position: relative;
   }
   .hamburger img:nth-child(2) {
     transition: opacity 0.2s;
     opacity: 0;
   }


   #cobertura {
    
    top:-85px !important;
  }

  }



/* Teléfonos */
@media only screen and (max-width: 575px){

   .button2 {
      max-width: 70%;
    }

    .button2 span {
      font-size: 1.5rem;
    }
    
    

  h1.title {
     font-size:xx-large;
  }

  .comprar-texto {
     width:95%; 
     text-wrap:pretty;
      font-size: 22px;
   }
   .comprar-texto b {
    font-size:30px;
   }
   .right-menu {display: none;}


   /* .hamburger {
     display: flex;
     gap: 16px;
     cursor: pointer;
     position: relative;
     width: 25px;
     height: 20px;
   } */
   .hamburger {
     display: flex;
      margin:5px;
      margin-top: 5px;
      padding:5px;
     cursor: pointer;
     position: relative;
   }
   
   .hamburger img {
     position: absolute;
   }
   .hamburger-container {
     display: flex;
     gap: 6px;
     cursor: pointer;
     margin-right: 6px;
     position: relative;
   }
   .hamburger img:nth-child(2) {
     transition: opacity 0.2s;
     opacity: 0;
   }

   .image-wrapper {
     scale: 0.7;
     margin-left: -10px;
     width: 38px;
     height: 38px;
     border-radius: 38px;
     pointer-events: auto;
     cursor: pointer;
     
  }


}