.heroTitles{
  font-family: "Sorts Mill Goudy", serif;
  font-weight: 400;
  font-style: normal;
  font-size:45px;
  font-style: normal;
  line-height:62px;
  color:white;
}

/* <weight>: Use a value from 100 to 900*/

.heroTexto{
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:19px;
  line-height:26px;
  letter-spacing:0.02em;
  color:white;
  max-width:841px;
}      
           
      
      .hero{
        display:flex;
        width:100%;
        height:791px;
        background-color:black;
        justify-content:center;
        align-items:center;
        position:relative;
      }
      
      .heroContainer{
        display:flex;
        width:100%;
        max-width:1067px;
        /*background-color:purple;*/
        flex-direction:column;
        align-items:center;
        gap:91px;
        flex-direction:column;
        z-index:2;
      }
      
      .heroTextual{
        display:flex;
        width:100%;
        max-width:1000px;
        gap:27px;
        text-align:center;
        justify-content:center;
        flex-direction:column;
        /*background-color:blue;*/
        align-items:center;
      }
      
      .heroBotones{
        display:flex;
        padding-top:19px;
        gap:52px;
        justify-content:center;
      }
      
      a.heroBoton{
        all:unset;
        position:relative;
        cursor:pointer;
        padding:13px 19px;
        background-color:#AE864E;
        text-align:center;
        border-radius:10px;
        color:white;
        font-family: "Inter", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size:17.44px;
        line-height:12.7px;
        letter-spacing:0.02em;
        transition:all 0.20s ease;
      }
      
      a.heroBoton:hover, a.heroBoton2:hover{
        transform:translateY(-8px);
      }
      
      a.heroBoton2{
        all:unset;
        display:flex;
        width:fit-content;
        flex-direction:column;
        cursor:pointer;
        font-family: "Inter", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size:17.44px;
        line-height:12.7px;
        letter-spacing:0.02em;
        transition:all 0.20s ease;
      }
      
      .heroContacto{
        padding:13px 8px 11px 8px;
        color:white;
      }
      
      .heroLine{
        width:100%;
        height:1.5px;
        background-color:#C9C9C9;
      }
      
      .heroRasgos{
        display:flex;
        width:100%;
        justify-content:space-between;
        /*background-color:green;*/
        flex-wrap:wrap;
      }
      
      .heroRasgoBox{
        display:flex;
        width:248.6px;
        padding:16px 19px;
        background-color:#F1F1F1;
        border-radius:9px;
        justify-content:space-between;
        align-items:center;
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size:14.75px;
        line-height:17.6px;
        letter-spacing:0.02em;
        gap:10px;
        color:#5F5C5C;
        transition:all 0.20s ease;
        transform-origin: center center;
      }
      
      .heroRasgoBox:hover.bloque{
        transform: scale(1.05);
      }
      
      .heroIcon{
        display:flex;
        width:67px;
        height:67px;
        /*background-color:black;*/
        flex-shrink:0;
      }
      
      .heroIcon img{
          width:100%;
          object-position:center;
          object-fit:cover; 
      }
      
      .heroFondo{
        display:flex;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:grey;
        z-index:1;
      }
      
      .hero img{
       width:100%;
       object-position:center;
       object-fit:cover; 
      }

      .bloque {
  pointer-events: auto;
}



/* ──────────────── MEDIA QUERIES ──────────────── */

/* TABLETAS (hasta 1000px) */
@media (max-width: 1070px) {

  .hero {
    height: fit-content;
    padding: 80px 20px;
  }

  .heroContainer {
    gap: 50px;
    max-width: 900px;
  }

  .heroTextual {
    gap: 20px;
    max-width: 85%;
  }

  .heroBotones {
    gap: 30px;
    padding-top: 15px;
  }

  .heroRasgos {
    justify-content: center;
    max-width: 600px;
    gap: 20px;
  }

  .heroRasgoBox {
    width: 220px;
    padding: 14px 17px;
    font-size: 14px;
    line-height: 17px;
  }

  .heroIcon {
    width: 60px;
    height: 60px;
  }
}

/* CELULARES (hasta 600px) */
@media (max-width: 600px) {

  .hero {
    height: auto; /* que crezca según el contenido */
    padding: 70px 20px;
  }

  .heroContainer {
    gap: 45px;
  }

  .heroTextual {
    gap: 16px;
    text-align: center;
  }

  .heroTitles {
    font-size: 30px;   /* antes 45px */
    line-height: 44px; /* antes 62px */
  }

  .heroTexto {
    font-size: 15px;   /* antes 19px */
    line-height: 23px; /* antes 26px */
  }

  .heroBotones {
    flex-direction: column;
    gap: 12px;
    padding-top: 8px;
  }

  a.heroBoton,
  a.heroBoton2 {
    font-size: 15px;  /* antes 17.44px */
    padding: 11px 15px;
  }

  a.heroBoton2 {
    border: 1px solid #C9C9C9;
    border-radius: 10px;
  }

  .heroContacto {
    padding: 0;
  }

  .heroLine {
    display: none;
  }

  .heroRasgos {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .heroRasgoBox {
    width: 85%;
    padding: 14px 20px;
    font-size: 13.5px;
    line-height: 17px;
    height: 90px;
  }

  .heroIcon {
    width: 55px;
    height: 55px;
  }
}