:root {
    --color-primario: #1C1C1C;
    --color-secundario: #FFFFFF;
    --color-tercero: #F41420;
    --color-cuarto: #4272BA;
    font-family: 'regular';
      }
  @media (prefers-color-scheme: dark) {
    :root {
      --color-primario: #1C1C1C;
      --color-secundario: #FFFFFF;
      --color-tercero: #F41420;
    }
  }
  @media (prefers-contrast: high) {
    :root {
      --color-primario: var(--color-primario);
      --color-secundario: #FFFFFF;
    }
  }
::selection {
    background-color: var(--color-tercero);
    color: var(--color-secundario);
  }

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--color-primario);
    font-family: 'regular';
 }
body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
header {
    width: clamp(320px, 100vw, 920px);
    background-color: var(--color-primario);
    display: flex;
    justify-content: space-around;
}
.ht h3:nth-child(1) {
  font-size: clamp(20px, 4.5vw, 40px);
}
.ht p:nth-child(2) {
  font-size: clamp(20px, 4.5vw, 38px);
}
.ht {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ht, h3, h2, h1, p {
    color: var(--color-secundario);
    font-size: clamp(20px, 3.5vw, 25px);
}
mark {
    background-color: var(--color-tercero);
    color: var(--color-secundario);
}
.logo {
  width: clamp(120px, 35vw, 306px);
}
section, .fondo {
  width: clamp(320px, 100vw, 920px);
}
.s1, .s3 {
  margin-bottom: -4px;
}
.s2 {
  background-color: #1C1C1C;
  display: flex;
  justify-content: space-evenly;
  padding: 30px 0 30px 0;
  align-items: center;
}
.app {
  width: clamp(250px, 45vw, 400px);
}
.st2 {
  width: 40%;
  text-align: justify;
}
span {
  font-family:'bold';
  color: var(--color-tercero);
}
.st2 h1 {
    font-size: clamp(25px, 6vw, 36px);
    line-height: 1;
}
.price {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-tercero);
  padding: 10px
}
.price a {
  text-decoration: none;
  font-size: clamp(29px, 6vw, 55px);
  font-family: 'black';
  color: var(--color-secundario);
}
.price h2 {
  font-size: clamp(14px, 4vw, 30px);
  font-family: 'bold';
}
.servicios {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(50px, 3.12vw, 25px);
    padding: 20px 0 20px 0;
}
.adicional {
  display: flex;
  width: 231px;
  padding: 19px;
  flex-direction: column;
  align-items: center;
  box-shadow: 5px 5px 18px #0000004a;
  gap: 10px;
}
.adicional img {
  width: clamp(206px, 15vw, 213px);
}
.adicional h3 {
  font-size: clamp(19px, 3vw, 20px);
  color: var(--color-primario);
}
.adicional p {
  font-size: clamp(15px, 3vw, 17px);
  text-align: justify;
  color: var(--color-primario);
}
.btn_ser {
  display: flex;
  width: clamp(134px, 13vw, 140px);
  /* padding: 5px; */
  background-color: #3AAA35;
  border: none;
  align-items: center;
  justify-content: center;
}
.btn_ser a {
  text-align: left;
    line-height: 2;
    width: 80%;
    height: 100%;
    color: var(--color-secundario);
    cursor: pointer;
    text-decoration: none;
    font-size: clamp(18px, 3vw, 18px);
    font-family: 'bold';
}
.icon {
  width: 65px;
    height: 39px;
    background: url(../Img/Icon-11.png);
    background-size: 190px;
    background-position: -88px -9px;
}
.div_video {
  display: flex;
  align-items: center;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    padding: 25px 0 35px 0;
}
.video {
  width: clamp(300px, 20vw, 420px);
}
.coment {
  display: flex;
    width: clamp(330px, 25vw, 400px);
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.coment h1 {
  color: var(--color-primario);
  font-family: 'bold';
}
.banner_02 {
  width: clamp(320px, 100vw, 920px);
}
.s4 {
  display: flex;
  padding: 20px;
  background-color: var(--color-tercero);
}
.s4 span {
  color: var(--color-secundario);
  font-size: clamp(19px, 3vw, 27px);
}
.stc {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}
.tc {
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.stc a {
    width: 94px;
    height: 41px;
    background: url(../Img/Tcredito-02.jpg)0 0;
    background-size: 468px;
    background-position: -354px -21px;
    border-radius: 7px;
} 
.stc a:nth-child(2) {
    background-position: -487px -21px;
}
.stc a:nth-child(3) {
    background-position: -131px -23px;
}
.stc a:nth-child(4) {
    background-position: 227px -23px;
}
  
.s4 h3 {
  font-size: clamp(30px, 5vw, 45px);
  text-align: center;
  line-height: 0.7;
}
.bfriday {
  width: clamp(250px, 45vw, 400px);
}
.s5 {
   width: clamp(320px, 100vw, 920px);
    display: flex;
    
    flex-direction: row-reverse;
    justify-content: space-around;
    /*gap: 15px;*/
}
.s5 h1 {
    font-size: clamp(30px, 5vw, 35px);
    color: var(--color-primario);
    text-align: center;
    padding: 0 0 20px 0;
}
form h3{
    font-size: clamp(25px, 5vw, 35px);
    text-align: center;
    padding: 0 0 20px 0;
}
form {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 25px);
  padding: 20px 0 20px 0;

}
form textarea:nth-child(5) {
  padding: 10px 0 20px 15px;
  line-height: 20px;
}
form input:nth-child(6) {
  padding: 15px 0 15px 0;
}
form input, textarea {
font-size: clamp(14px, 2vw, 20px);
line-height: 40px;
padding-left: 15px;
margin: 0 12px 0 12px;
}
.form {
  background-color: var(--color-primario);
}
.map {
  width: 100%;
}
.smap {
  padding: 20px 0 0 0;
}
.smap, .form {
  width: 50%;
}
footer {
  width: clamp(320px, 100vw, 920px);
  background-color: #626262;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
footer h3 {
  font-size: clamp(14px, 2vw, 20px);
}
footer a {
  display: block;
  width: 100px;
  height: 45px;
  background: url(../Img/Icon-11.png)0 0;
  background-size: 248px;
  background-position: 113px 98px;
}
.confs {
  width: 100%;
  font-size: clamp(25px, 5vw, 35px);
  padding: 120px 60px 120px 60px;
}

@media screen and (min-width:0) and (max-width:444px) {
.s2 {
  flex-direction: column;
  align-items: center;
}

.st2 {
  width: clamp(300px, 7vw, 255px);
}
.ht {
  width: clamp(155px, 4vw, 43px);
}
.div_video {
  flex-direction: column-reverse;
}
.s5 {
  flex-direction: column;
    align-items: center;
  }
  .smap, .form {
    width: 100%;
}
.s4 {
  flex-direction: column;
  align-items: center;
}
}
@media screen and (min-width:445px) and (max-width:650px) {
  .s2 {
    flex-direction: column;
    align-items: center;
  }
  .st2 {
    width:  clamp(305px, 7vw, 275px);
  }
  .div_video {
    flex-direction: column-reverse;
  }
  .s5 {
  flex-direction: column;
    align-items: center;
  }
  .smap, .form {
    width: 90%;
}
.s4 {
    flex-direction: column;
    align-items: center;
}
}