.main{
        position:relative;
        width:100%;
        display:flex;
        background-color:black;
        justify-content:center;
        padding:195px 20px 0 20px;
      }

      .main .contenedor{
        display:flex;
        width:100%;
        /*background-color:brown;*/
        max-width:1064px;
        align-items:center;
        justify-content:space-between;
        z-index:4;
      }
      
      .main .parrafos{
         display:flex;
         width:100%;
         max-width:516px;
         flex-direction:column;
         /*background-color:pink;*/
      }
      
      .main .imagen{
        display:flex;
        width:528px;
        height:512px;
        /*background-color:black;*/
        position:relative;
        flex-shrink:0;
      }
      
      .main .cafecito{
        position:absolute;
        width:709px;
        height:608px;
        /*background-color:lightblue;*/
        top:0;
        left:0;
      }
      
      .main .abajo a{
        text-decoration:none;
        cursor:pointer;
        padding:14px 38px;
        border-radius:600px;
        background-color:#96D3DF;
        width:fit-content;
        color:#464646;
      }
      
           
      .main .titular{
        font-size:95px;
        line-height:74px;
        color:white;
        margin-bottom:18px;
      }
      
      .main .subtexto{
        font-size:24px;
        line-height:25px;
        color:#CF9947;
        margin-bottom:23px;
      }
      
      .main .ranita{
        width:135px;
        height:135px;
        /*background-color:black;*/
      }
      
      .main .abajo{
        display:flex;
        width:100%;
        gap:20px;
        justify-content:space-between;
        /*background-color:blue;*/
        align-items:center;
      }
      
      .main .background{
        display:flex;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        /*background-color:green;*/
        opacity:0.5;
        z-index:1;
      }
      
      .main .background img,
      .main .cafecito img,
      .main .ranita img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
      }

      @media(max-width:1024px){
        .main{
          padding-top:170px;
        }
      }

      @media(max-width:820px){
        .main{
          padding:128px 20px 0 20px;
          overflow:hidden;
        }

        .main .contenedor{
          flex-direction:column;
          align-items:flex-start;
        }

        .main .parrafos{
          max-width:100%;
        }

        .main .imagen{
          width:100%;
          height:360px;
        }

        .main .cafecito{
          width:520px;
          height:446px;
          left:50%;
          transform:translateX(-34%);
        }

        .main .titular{
          font-size:72px;
          line-height:59px;
        }
      }

      @media(max-width:540px){
        .main{
          padding:112px 16px 0 16px;
        }

        .main .subtexto{
          font-size:18px;
          line-height:20px;
          margin-bottom:14px;
        }

        .main .titular{
          font-size:52px;
          line-height:44px;
        }

        .main .abajo{
          gap:14px;
          align-items:flex-start;
          flex-direction:column;
        }

        .main .abajo a{
          padding:12px 28px;
        }

        .main .ranita{
          width:100px;
          height:100px;
        }

        .main .imagen{
          height:280px;
        }

        .main .cafecito{
          width:430px;
          height:369px;
          transform:translateX(-38%);
        }
      }