.oferta{
        width:100%;
        display:flex;
        padding:106px 20px;
        justify-content:center;
        /*background-color:brown;*/
        background:linear-gradient(to bottom, #E3E3E3, #BEBEBE, #E3E3E3);
      }
      
      .oferta .contenedor{
        display:flex;
        width:100%;
        /*background-color:green;*/
        align-items:center;
        flex-direction:column;
        gap:70px;
        max-width:1249px;
      }

      .oferta .ofertaHead{
        width:100%;
        display:flex;
        align-items:center;
        gap:20px;
        text-align: center;
        justify-content: center;
      }

      .oferta .ofertaCategorias{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:30px;
      }

      .oferta .categoryRow{
        width:100%;
        display:flex;
        flex-direction: column;
        gap:20px;
        justify-content:space-between;
        align-items:flex-start;
        max-width: 1000px;
      }

      .oferta .compilado{
        display:flex;
        width:100%;
        /*background-color:grey;*/
        align-items:center;
        flex-direction:column;
        overflow:visible;
        gap: 15px;
        position: relative;
        transition: margin-top .35s ease;
      }

      .oferta .compilado.is-open + .compilado{
        margin-top: 20px;
      }
      
      .oferta .top{
        display:flex;
        width:100%;
        padding:30px 30px 30px 53px;
        gap:15px;
        align-items: center;
        justify-content:space-between;
        border-radius:42px;
        background-color:rgb(255, 255, 255);
      }
      
      .oferta .titular{
        font-size:43px;
        line-height:45px;
        max-width:330px;
        width:100%;
        /*background-color:pink;*/
      }
      
      .oferta .generalidades{
        width:100%;
        display:flex;
        max-width:656px;
        /*background-color:lightblue;*/
        gap:20px;
      }
      
      .oferta .modales{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:12px;
      }
      
      .oferta .plecas{
        width:100%;
        display:flex;
        gap:10px;
        /*background-color:brown;*/
      }
      
      .oferta .pleca{
        width:100%;
        padding:13px 14px;
        display:flex;
        background:linear-gradient(to right, #5E655B, #323231);
        gap:10px;
        border-radius:9px;
        color:white;
        align-items:center;
      }
      
      .oferta .plecaGris{
        background:linear-gradient(to right, #8F948D, #717170);
      }
      
      .oferta .vineta{
        width:14.08px;
        height:15.03px;
      }
      
      .oferta .flecha{
        width:40px;
        height:40px;
        flex-shrink:0;
      }

      .oferta button.flecha{
        appearance:none;
        -webkit-appearance:none;
        border:none;
        background:none;
        padding:0;
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:center;
        transition:transform .35s ease, opacity .35s ease;
      }

      .oferta button.flecha img{
        transform:rotate(0deg);
        transition:transform .35s ease;
      }

      .oferta .compilado.is-open .top .flecha img{
        transform:rotate(180deg);
      }

      .oferta .bottom{
        width:100%;
        display:flex;
        height: fit-content;
        /*background-color:darkblue;*/
        gap:50px;
        justify-content:space-between;
        max-width: 1000px;
        overflow:visible;
        align-items:stretch;
        padding-left: 50px;
      }

      .oferta .compilado .bottom{
        overflow:hidden;
        height: fit-content;
        opacity:0;
        transform:translateY(-12px);
        pointer-events:none;
        transition:max-height .5s ease, opacity .35s ease, transform .35s ease;
      }

      .oferta .compilado.is-open .bottom{
        opacity:1;
        transform:translateY(0);
        pointer-events:auto;
      }

      .oferta .programas{
        display:flex;
        flex-direction:column;
        gap:40px;
        padding-top: 30px;
      }
      
      .oferta .programa{
        display:flex;
        width: 100%;
        max-width:507px;
        flex-direction:column;
        /*background-color:darkgreen;*/
      }
      
      .oferta .portada{
        width:507px;
        flex-shrink:0;
        height: auto;
        background-color:black;
        border-radius:16px;
      }
      
      .oferta .name{
        padding-top:20px;
        padding-bottom:7px;
      }
      
      .oferta .formularioSpace{
        display: flex;
        width:fit-content;
        max-width:394px;
        /*background-color:olive;*/
        z-index:2;
        align-items:stretch;
        position: relative;
        padding-bottom: 30px;
        padding-top: 20px;
      }
      
      
      
      
      
      
      
      
      
       
      
      
      
.formularioReal{
    padding:30px 15px;
    background: rgb(255, 255, 255, 0.3);
    border-radius:45px;
    display:flex;
    justify-content:center;
    max-width: 500px;
    height: fit-content;
    position: sticky;
     top: 140px;
}
      
   .formularioReal .container{
            display:flex;
            flex-direction:column;
            gap:18px;
            /*background-color:pink;*/
            max-width:400px;
     align-items:center;
      }

.formularioReal form{

    display:flex;
    flex-direction:column;
    gap:10px;

}

.formularioReal h2{

    text-align:center;
    font-size:25px;
    line-height:24px;
    font-weight:700;

}

.formularioReal h2 span{

    color:#B5324A;

}

.formularioReal .descripcion{

    text-align:center;

    font-size:16px;
    line-height:19px;
    font-weight:600;
    color:#444;
  max-width:400px;
  padding-bottom: 5px;

}

.formularioReal .campo{

    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;

}

.formularioReal .campo label{

    font-size:15px;
    line-height:17px;
    font-weight:600;

    color:#3c3c3c;

}

.formularioReal .campo input,
.formularioReal .campo textarea{

    width:100%;

    padding:8px 18px;

    border-radius:18px;

    border:1px solid #bdbdbd;

    outline:none;

    font-size:14.5px;
    line-height:18px;
  font-family:"roboto";

}

.formularioReal .campo textarea{

    resize:none;
    height: 80px;

}

.formularioReal .fila{

    display:flex;
    flex-direction: column;
    gap:10px;

}

.formularioReal .ancho{

    width:100%;

}

.formularioReal .privacidad{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.formularioReal .checkbox{

    margin-top:5px;

}

.formularioReal .checkbox input{
    font-size:13.5px;
    line-height:17px;
    width:24px;
    height:24px;

}

.formularioReal .texto{

    display:flex;
    flex-direction:column;
    gap:12px;

}

.formularioReal .texto p{
    font-size:12px;
    line-height:12px;
    color:#8b8b8b;
    line-height:1.5;

}

.formularioReal .texto a{
    font-size:13.5px;
    line-height:17px;
    font-weight:700;
    color:#444;
    text-decoration:none;

}

.formularioReal button{
    align-self:center;
    padding:10px;
    width:100%;
    max-width:207px;
    border-radius:50px;
    border:1px solid #C52D4B;
    background:white;
    font-size:15px;
    line-height:17px;
    cursor:pointer;
    transition:.3s;
    font-weight:600;
}

.formularioReal button:hover{

    background:#C52D4B;
    color:white;

}
      
      
      .oferta .titularTitle{
        font-size:44px;
        line-height:46px;
      }
      
      .oferta .programasTitle{
        font-size:33px;
        line-height:36px;
        max-width:330px;
        min-width:270px;
      }
      
      .oferta .modalidadesTitle{
        font-size:20px;
        line-height:22px;
      }
      
      .oferta .plecaTitle{
        font-size:17px;
        line-height:18px;
      }

      .oferta .nameTitle{
        font-size:25px;
        line-height:28px;
      }
      
      .oferta .texto{
        font-size:16px;
        line-height:28px;
      }

      .oferta .rvoeNota{
        font-size:12px;
        line-height:16px;
        color:#252525;
      }
      
      .oferta img{
        object-position:center;
        object-fit:cover;
        width:100%;
        height:100%;
      }
      
      .oferta .portada img{
        border-radius:16px;
      }
      
      
      
.oferta .generalidadesDos{
    width:100%;
    max-width:656px;
    display:flex;
    gap:20px;
    align-items:flex-start;
}

.oferta .datoGeneral{
    width:100%;

    display:flex;
    flex-direction:column;
    gap:19px;
}
      
.oferta .brillo{
        color:#AC344D;
      }


      .oferta .generalidadesWrapper{
        /*background-color: grey;*/
        display: flex;
        width: 100%;
        gap: 10px;
      }


      @media(max-width:1160px){

        .oferta .bottom{
          padding-left: 0;
        }

      }


      @media(max-width:925px){

        .oferta .bottom{
          flex-direction: column;
          align-items: center;
        }

        .oferta .formularioSpace{
          padding-top: 0;
          max-width: 700px;
          width: 100%;
        }

        .oferta .formularioReal{
          width: 100%;
          max-width: 100%;
          padding: 30px;
        }

        .oferta .container{
          max-width: 100%;
        }

      }


@media(max-width:823px){


.oferta .top{
  flex-direction: column;
  align-items: flex-start;
}

.oferta .programasTitle{
  max-width: 100%;
}
.oferta .programasTitle br{
  display: none;
}

.oferta button{
  margin-top: 10px;
}

.oferta .bottom{
  padding-left: 0;
}

.oferta .programas{
  align-items: center;
}



}


@media(max-width:700px){

.oferta .plecas{
  flex-direction: column;
}

.oferta .generalidadesDos .datoGeneral{
  flex-direction: row;
  align-items: center;
}

.oferta .generalidadesDos .datoGeneral .modalidadesTitle{
  min-width: 89px;
}

.oferta .generalidadesDos{
  flex-direction: column;
  gap: 10px;
  margin-top: 7px;
}




.oferta .portada{
  
  width: 100%;
  max-width: 450px;
  height: auto;
  aspect-ratio: 1000/600;

}

.oferta .programa{
  align-items: center;
  text-align: center;
}

.oferta .programasTitle br{
  display: inline;
}

}





@media (max-width:700px){

  .oferta{
    padding:74.2px 14px;
  }

  .oferta .contenedor{
    gap:39px;
  }

  .oferta .ofertaHead{
    gap:14px;
  }

  .oferta .ofertaCategorias{
    gap:21px;
  }

  .oferta .categoryRow{
    gap:14px;
  }

  .oferta .compilado{
    gap:10.5px;
  }

  .oferta .compilado.is-open + .compilado{
    margin-top:14px;
  }

  .oferta .top{
    padding:21px 21px 21px 37.1px;
    gap:10.5px;
    border-radius:29.4px;
  }

  .oferta .generalidades{
    gap:14px;
  }

  .oferta .modales{
    gap:8.4px;
  }

  .oferta .plecas{
    gap:7px;
  }

  .oferta .pleca{
    padding:9.1px 9.8px;
    gap:7px;
    border-radius:6.3px;
  }

  .oferta .bottom{
    gap:35px;
  }

  .oferta .programas{
    gap:28px;
    padding-top:21px;
  }

  .oferta .portada{
    border-radius:11.2px;
  }

  .oferta .portada img{
    border-radius:11.2px;
  }

  .oferta .name{
    padding-top:14px;
    padding-bottom:4.9px;
  }

  .oferta .formularioSpace{
    padding-top:14px;
    padding-bottom:21px;
  }

  .formularioReal{
    padding:21px 10.5px;
    border-radius:31.5px;
  }

  .formularioReal .container{
    gap:12.6px;
  }

  .formularioReal form{
    gap:7px;
  }

  .formularioReal .descripcion{
    padding-bottom:3.5px;
  }

  .formularioReal .campo{
    gap:7px;
  }

  .formularioReal .campo input,
  .formularioReal .campo textarea{
    padding:9px 14px;
    border-radius:12.6px;
  }

  .formularioReal .fila{
    gap:7px;
  }

  .formularioReal .privacidad{
    gap:12.6px;
  }

  .formularioReal .checkbox{
    margin-top:3.5px;
  }

  .formularioReal .texto{
    gap:8.4px;
  }

  .formularioReal button{
    padding:7px;
    border-radius:35px;
  }

  .oferta .generalidadesDos{
    gap:14px;
  }

  .oferta .datoGeneral{
    gap:13.3px;
  }

  .oferta .generalidadesWrapper{
    gap:7px;
  }

  /* Tipografías */

  .oferta .titular{
    font-size:30px;
    line-height:32px;
  }

  .formularioReal h2{
    font-size:18.75px;
    line-height:18px;
  }

  .formularioReal .descripcion{
    font-size:16px;
    line-height:18px;
  }

  .formularioReal .campo label{
    font-size:16px;
    line-height:18px;
    padding-top: 10px;
  }

  .formularioReal .campo input,
  .formularioReal .campo textarea{
    font-size:16px;
    line-height:15px;
  }

  .formularioReal .checkbox input{
    font-size:16px;
    line-height:15px;
  }

  .formularioReal .texto p{
    font-size:16px;
    line-height:1.5;
  }

  .formularioReal .texto a{
    font-size:16px;
    line-height:19px;
  }

  .formularioReal button{
    font-size:16px;
    line-height:15px;
  }

  .oferta .titularTitle{
    font-size:33px;
    line-height:34.5px;
  }

  .oferta .programasTitle{
    font-size:24.75px;
    line-height:27px;
  }

  .oferta .programasTitle br{
    display: none;
  } 

  .oferta .modalidadesTitle{
    font-size:16px;
    line-height:16.5px;
  }

  .oferta .plecaTitle{
    font-size:16px;
    line-height:15px;
  }

  .oferta .nameTitle{
    font-size:18.75px;
    line-height:21px;
  }

  .oferta .texto{
    font-size:16px;
    line-height:21px;
  }

  .oferta .rvoeNota{
    font-size:11px;
    line-height:15px;
  }

}