@font-face {
    font-family: Inter-Bold;
    src: url("./static/Inter-Bold.ttf");
}
@font-face {
    font-family: Inter-Regular;
    src: url("./static/Inter-Regular.ttf");
}
@font-face {
    font-family: Semi-Bold;
    src: url("./static/Inter-SemiBold.ttf");
}
@font-face {
    font-family: Inter-Medium;
    src: url("./static/Inter-Medium.ttf");
}
@font-face {
    font-family: Inter-Light;
    src: url("./static/Inter-Light.ttf");
}
@font-face {
    font-family: Poppins-regular;
    src: url("./Poppins/Poppins-Regular.ttf");
}

body {
    
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  label{
    display: flex;
    width: 277px;
    height: 55px;
    padding: 5px 17px;
    align-items: center;
    gap: 10px;
    margin: 18px;
    border: none;
    border-radius: 8px;
    background: #FFF;
  }
  nav {
    background-color: #333;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  nav h1 {
    margin: 0;
  }
  
  nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
  }
  nav{
    /* display: none; */
    background: #FFF;
    height: 68px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    z-index: 1;
  }
  .logo{
    margin-top: 0px;
    width: 164px;
    height: 164px;
  }
  a{
    text-decoration: none;
    margin: 0 -4px;
    color: #4A5568;
    font-family: Inter-Medium;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    position: relative;
    left: 1px;
    line-height: normal;
    padding: 11px;
  }
  h40{
    font-family: Inter-Light;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px;
    margin: -1px;
    color: #FAFAFA;

  }
  button#contact-button{
    /* display: flex; */
    padding: 14px 25px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    background: #FF4001;
  }
  nav ul li {
    margin-right: 20px;
  }
  #toggle-label {
    display: none;
  }
  label{
    display: none;
    color: #FF4001;
    cursor: pointer;
    /* background-color: chocolate; */
  }
  #toggle {
    display: none;
  }
  h2{
    color: #4A5568;
    width: 356px;
    font-family: Inter;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}

.container {
    max-width: 1235px;
    margin: 64px auto;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    flex-wrap: 10px;
}

.text-section {
    flex: 1;
    margin-right: 20px;
}

.image-section {
    flex: 1;
    margin-top: 20px;
}

.image {
    max-width: 100%;
    height: auto;
    display: block;
}

.image-description {
    display: flex;
    align-items: flex-start;
    margin-top: -414px;
    flex-direction: column;
    margin-left: 40px;
}
h1{
    color: #4A5568;
    font-family: Semi-Bold;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 55px;
}
.image-description2 {
    display: flex;
    align-items: flex-start;
    margin-top: 34px;
    flex-direction: column;
    margin-left: 40px;
}
.image-description3 {
    display: flex;
    align-items: flex-start;
    margin-top: 35px;
    flex-direction: column;
    margin-left: 40px;
}
h4{
    color: #4A5568;
    font-family: Inter-Regular;
    font-size: 20px;
    width: 337px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}
p{
    color: #4A5568;
    text-align: justify;
    font-family: Inter-Regular;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    width: 323px;
    margin-top: -15px;
}

svg{
  width: 142.17px;
  height:59px;
}
input[name="name"] {
  color: #4A5568;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
input[name="email"] {
  color: #4A5568;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

h3 {
    color: #4A5568;
    font-family: Semi-Bold;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
   
}
h10{
    color: #4A5568;
    font-family: Inter-Regular;
    font-size: 18px;
    font-style: normal;
    width: 586px;
    font-weight: 400;
    line-height: normal;
}
.cabecera-form{
    width: 728px;
    height: 100px;
    /* margin: 10px; */
    display: flex;
    align-items: center;
    background: #BFC1C6;
    border-radius: 16px;
}
.linea {
    border-top: 4px solid #FF4001;
    width: 91px;
    /* text-align: center; */
    padding-top: 10px;
}

.form-section {
    flex: 1;
    margin-top: 186px;
}
.text-form{
    display: flex;
    margin: 10px;
}
.form-b {
    color: #4A5568;
    font-family: Inter-Regular;
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
input{
    display: flex;
    width: 277px;
    height: 55px;
    padding: 5px 17px;
    align-items: center;
    gap: 10px;
    margin: 18px;
    border: none;
    border-radius: 8px;
    background: #FFF;
}
select {
    display: flex;
    width: 315px;
    height: 64px;
    padding: 5px 17px;
    align-items: center;
    gap: 10px;
    margin: 18px;
    border: none;
    border-radius: 8px;
    background: #FFF;
    flex-shrink: 0;
}
input[value="Enviar"] {
    color: #FFF;
    font-family: Inter-Regular;
    font-size: 20px;
    font-style: normal;
    justify-content: center;
    align-items: center;
    display: flex;
    font-weight: 400;
    line-height: normal;
}
.inp {
    display: flex;
    width: 695px;
    height: 55px;
    padding: 10px 16px;
    align-items: center;
    gap: 10px;
    margin-top: -34px;
    margin-bottom: 26px;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    background: #FF4001;
    flex-shrink: 0;
}
textarea {
    background: #FFF;
    border-radius: 10px;
    border: none;
    margin-top: 27px;
    width: 672px;
    height: 345px;
}
.caj3 {
  height: 788px;
  flex-shrink: 0;
  width: auto;
  margin-top: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3F4F6;
}
h11 {
  color: #4A5568;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-form{
  margin: 10px;
}
.caj-fle{
    display: flex;
    margin: 10px;
    align-items: flex-start;
    flex-direction:row;
}
.caj-fle2{
    display: flex;
    margin: 23px;
    align-items: flex-start;
    flex-direction:column;
}
label {
    color: #4A5568;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    
    
    line-height: normal;
}

form {
    max-width: 728px;
    height: 828px;
    margin: 0 auto;
    border-radius: 16px;
    background: #F3F4F6;
}
.container-tar {
  max-width: 1300px;
  margin: 7px auto;
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 1;
  padding: 13px;
  margin: 15px;
  margin-left: 85px;
  box-sizing: border-box;
}

.right-column {
  /* background-color: #ffffff; */
}

.left-column {
  /* background-color: #ffffff; */
}

.card {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  /* width: 563px; */
  overflow: hidden;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.card:hover {
  transform: scale(1.05);
}

.expanded {
  background-color: var(--primary-red, #FF4001);
  color: #fff; /* Cambia el color del texto al expandirse */
  /* width: 700px; */
}

.card-header {
  padding: 16px;
  /* border-bottom: 1px solid #ddd; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h6 {
  color: #4A5568;
  text-align: justify;
  font-family: Inter-Regular;
  font-size: 17px;
  font-style: normal;
  margin: 15px;
  font-weight: 100;
  line-height: 40px;
}

.card-content {
  padding: 15px;
  display: none;
}
h16{
  color: #4A5568;
  text-align: left;
  font-family: Inter-Light;
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  /* margin-top: 129px; */
  line-height: 136.023%;
}
.parr{
  color: #4A5568;
  text-align: justify;
  font-family: Inter-Regular;
  font-size: 18px;
  width: 474px;
  margin-top: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}
.card-tittle{
  width: auto;
}
.card.expanded  h6 {
  color: #F3F4F6;
}
.expand-btn{
  /* color: #3d62a2; */
}
.card.expanded  p {
  color: #F3F4F6;
}

.expand-btn {
  cursor: pointer;
  font-size: 18px;
  margin-top: -34px;
  /* width: 20px; */
  padding: 10px;
  margin-right: -6px;
}
.excep{
  color: var(--primary-red, #FF4001);
  font-family: Semi-Bold;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 136.023%;
}

.expanded .card-content {
  display: block;
  /* width: 325px; */
}
img.close{
  opacity: 0;
}
.det{
  color: #4A5568;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.expanded .expand-btn {
  display: block;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transform: rotate(180deg);
}
.expand-btn img{
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  display: block;
}
.card.expanded .close {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  display: block;
  width: 20px;
  opacity: 100;
}
.card.expanded img.open{
  transform: rotate(180deg);
  opacity: 0; 

}


.expand-btn img.open {
  transform: rotate(180deg);
  /* width: 23px; */
}
footer {
  background-color: #fff;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  width: auto;
  height: 671px;
  justify-content: space-between;
  align-items: flex-start;
}

.column-footer {
  flex: 1;
  margin-top: 92px;
  margin-bottom: 15px; /* Añadido para espaciar las columnas en dispositivos pequeños */
  /* width: 128px; */
}
.column-footer2 {
  flex: 1;
  margin-top: 92px;
  margin-bottom: 15px; /* Añadido para espaciar las columnas en dispositivos pequeños */
  /* width: 200px; */
  margin-left: -69px;
}
.contact-info{
  font-family: Inter-Regular;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  width: 300px;
  margin-top: 0px;
  color: #4A5568;
}

.logo-footer {
  /* width: 50px; */
  /* height: auto; */
  margin-left: 52px;
  margin-top: -80px;
}
.num{
  font-family: Inter-Regular;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  width: 274px;
  margin-left: -6px;
  margin-top: 0px;
  color: #4A5568;
}

.title-footer {
  font-family: Inter-Bold;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 15px;
  margin-left: 4px;
  letter-spacing: -0.09px;
  color: #4A5568;
}

.links-footer a {
  text-decoration: none;
  display: block;
  font-family: Inter-regular;
  color: #4A5568;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  text-align: left;
  line-height: 236.3%;
}
.title-footer2 {
  font-family: Inter-Bold;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-left: -3px;
  letter-spacing: -0.09px;
  color: #4A5568;
}
.links, .contact-info {
  list-style: none;
  padding: 0;
  margin-left: -6px;
  margin-top: 27px;
  text-decoration: none;
}

.column-contact {
  text-align: center; 
}
input[name="nombre"]{
  color: #4A5568;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
input[name="correo"]{
  color: #4A5568;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
input[name="servicio"]{
  color: #4A5568;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
select[name="intereses"]{
  color: #4A5568;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}


.column-contact img {
  /* width: 30px; */
  height: auto;
  margin-top: 585px;
  /* margin-right: 282px; */
}

@media (min-width: 390px) and (max-width: 768px) {
    .text-section, .image-section, .form-section {
        flex: 100%;
        margin-right: 0;
        /* width: 296px; */
        margin-top: 20px;
    }
    .num {
      font-family: Inter-Regular;
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 30px;
      width: 274px;
      margin-left: 103px;
      margin-top: 0px;
      color: #4A5568;
  }
    .links, .contact-info {
      list-style: none;
      padding: 0;
      margin-left: 101px;
      margin-top: 27px;
      text-decoration: none;
  }
    .title-footer2 {
      font-family: Inter-Bold;
      font-size: 18px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      margin-left: 100px;
      width: 200px;
      letter-spacing: -0.09px;
      color: #4A5568;
  }
    .links-footer{
      position: relative;
      top: -101px;
      left: 126px;
    }
    .column-contact img {
      /* width: 30px; */
      /* height: 300px; */
      margin-top: 115px;
      margin-left: 294px;
  }
  .logo-footer {
      /* width: 50px; */
      /* height: auto; */
      margin-left: 101px;
      position: relative;
      top: -48px;
  }
  .column-footer {
      flex: 1;
      margin-top: 86px;
      margin-bottom: 15px;
      position: relative;
      left: -86px;
  }
  .column-footer2 {
      flex: 1;
      position: relative;
      margin-bottom: 15px;
      width: 88px;
      left: -245px;
      top: 331px;
      margin-left: 13px;
  }
    .menu-drop {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 80px;
      left: 0;
      gap: 12px;
      width: 100%;
      background-color: #fff;
  }
  .card.expanded .close {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    display: block;
    width: 20px;
    opacity: 100;
}
  .expanded .close {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    display: block;
    width: 20px;
    /* opacity: 100; */
}
  img.close{
    opacity: 0;
  }
  .det {
    color: #4A5568;
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-left: 10px;
    margin-bottom: 22px;
    width: 262px;
}
  input {
    display: flex;
    width: 277px;
    height: 55px;
    padding: 5px 17px;
    align-items: center;
    gap: 10px;
    margin: 18px;
    margin-bottom: -37px;
    border: none;
    border-radius: 8px;
    background: #FFF;
}
  .right-column {
    margin: 0px;
}
  .left-column {
    margin: 0px;
}
  .column {
    flex: 1;
    padding: 0px;
    margin: 0px;
    margin-left: 73px;
    box-sizing: border-box;
}
    #contact-button {
      display: none;
  }
    nav ul li {
      margin: 0;
      text-align: center;
      padding: 10px;
  }
    #toggle:checked + label + .menu-drop {
      display: flex;
  }
    label {
      display: block;
      font-size: 25px;
      color: #FF4001;
      width: 0px;
  }
    h16{
      color: #4A5568;
      text-align: left;
      font-family: Inter-Light;
      font-size: 24px;
      font-style: normal;
      font-weight: 300;
      margin-left: -38px;
      /* margin-top: 129px; */
      line-height: 136.023%;
    }
    .card.expanded p {
      color: #F3F4F6;
      width: 300px;
      margin-left: 10px;
  }
    .expand-btn img {
      transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
      display: block;
      width: 20px;
      /* opacity: 100; */
  }
    .expand-btn img.open {
      transform: rotate(180deg);
      width: 16px;
      margin-bottom: 36px;
  }
    h11 {
      color: #4A5568;
      font-family: Inter;
      font-size: 15px;
      font-style: normal;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
  }
    .parr {
      color: #4A5568;
      text-align: justify;
      font-family: Inter-Regular;
      font-size: 18px;
      width: 314px;
      margin-left: -40px;
      margin-top: 10px;
      font-style: normal;
      font-weight: 400;
      line-height: 30px;
  }
    .card {
      margin-bottom: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      width: 350px;
      margin-left: -57px;
      overflow: hidden;
      transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  }
    .caj3 {
      height: 1039px;
      flex-shrink: 0;
      width: auto;
      margin-top: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #F3F4F6;
  }
    select {
        display: flex;
        width: 315px;
        height: 64px;
        padding: 5px 17px;
        align-items: center;
        gap: 10px;
        margin: 18px;
        border: none;
        border-radius: 8px;
        background: #FFF;
        flex-shrink: 0;
    }
    form {
        max-width: 766px;
        margin: 0 auto;
        background: #F3F4F6;
    }
    .inp {
        display: flex;
        width: 326px;
        height: 55px;
        padding: 10px 16px;
        align-items: center;
        gap: 10px;
        margin-top: -34px;
        margin-bottom: 26px;
        cursor: pointer;
        border: none;
        border-radius: 8px;
        background: #FF4001;
        flex-shrink: 0;
    }
    textarea {
        background: #FFF;
        border-radius: 10px;
        display: flex;
        margin: 5px;
        width: 300px;
        align-items: flex-start;
        flex-direction:column;
    }
    .image-description3 {
        display: flex;
        align-items: flex-start;
        margin-top: 7px;
        flex-direction: column;
        margin-left: 40px;
    }
    form {
        max-width: 373px;
        margin: 0 auto;
        height: 1067px;
        background: #F3F4F6;
    }
    .caj-fle {
        
display: flex;
        
align-items: flex-start;
        
flex-direction:column;
        
margin: 0px;
        
/* margin-bottom: -50px; */
    }
    .container {
        max-width: 1235px;
        margin: 0 auto;
        padding: 11px;
        display: flex;
        flex-wrap: wrap;
        flex-wrap: 10px;
    }
    p {
        color: #4A5568;
        text-align: justify;
        font-family: Inter-Regular;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        width: 283px;
        margin-top: -15px;
    }
    .form-b {
        color: #4A5568;
        font-family: Inter-Regular;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    h10 {
        color: #4A5568;
        font-family: Inter-Regular;
        font-size: 14px;
        font-style: normal;
        width: 221px;
        font-weight: 400;
        line-height: normal;
    }
    .cabecera-form {
        width: 369px;
        height: 100px;
        display: flex;
        align-items: center;
        background: #BFC1C6;
        border-radius: 16px;
    }
}
@media only screen and (min-width: 850px) and (max-width: 1050px){
  h6 {
    color: #4A5568;
    text-align: justify;
    font-family: Inter-Bold;
    font-size: 18px;
    font-style: normal;
    margin: 2px;
    font-weight: 400;
    line-height: 40px;
}
.text-section {
  flex: 1;
  position: relative;
  left: 38px;
}
.caj3 {
  height: 919px;
  flex-shrink: 0;
  width: auto;
  margin-top: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3F4F6;
}
.container-tar {
  max-width: 1349px;
  margin: 7px auto;
  display: flex;
  flex-wrap: wrap;
}
.cabecera-form {
  width: 728px;
  height: 100px;
  /* margin: 10px; */
  position: relative;
  left: 100px;
  display: flex;
  align-items: center;
  background: #BFC1C6;
  border-radius: 16px;
}
  .column {
    flex: 1;
    padding: 13px;
    margin: 15px;
    /* margin-left: 85px; */
    box-sizing: border-box;
}
}