*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
/* latin */

@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(fonts/MontserratAlternates-Bold.otf) format('otf');
}
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(fonts/Montserrat-Medium.otf) format('otf');
  }

body{
    font-size: 1.56rem;
    height: 100vh;
    width: 100%;
    background-image: url('img/celular/fra_seccion1.jpg');
    background-size: cover;
    background-position: bottom bottom;
    background-repeat: no-repeat;
    box-sizing: border-box;
}
  /* primer seccion  */
.container_seccion_franquicias{
    width: 100%;
    overflow: hidden;
}
.box1_franquicias{
    width: 100%;
    height: 700px;
    background-image: url('img/celular/fra_seccion1.jpg');
    background-size: cover;
    background-position: bottom bottom;
    background-repeat: no-repeat;
    box-sizing: border-box;
    /* border: solid 5px orange; */
}

.first_section_franquicias{
    display: flex;
    flex-flow: wrap;
}
.cont_text_franquicias{
    width: 100%;
    height: 45%;
    padding: 2rem;
    padding-top: 5rem;
    /* border: solid 5px blue; */
}

.titu_franquicias{
    text-align: center;
    font-size: 4rem;
    color: #ec1c24;
    font-family: 'Montserrat';
    font-weight: 300;
    line-height: 3.5rem;
}

.text_franquicias{
    text-align: center;
    font-size: 2.1rem;
    font-family: 'Montserrat';
    font-weight: 500;
}

.cont_img_franquicias{
    width: 100%;
    height: 55%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: solid 5px yellow; */
}
.pachuquin_fraquicias{
    width: 18rem;
    min-width: 18rem;
    max-width: 18rem;
    height: 28rem;
    min-height: 28rem;
    max-height: 28rem;
}


            /* segunda seccion  */
.second_section_franquicias{
    background-image: url('img/celular/fra_seccion2.jpg');
    background-size: cover;
    background-position: bottom bottom;
    background-repeat: no-repeat;
    position: relative;
    box-sizing: border-box;
}
.box2_franquicias{
    height: 1300px;
    min-height: 1300px;
}
.second_section_franquicias{
    display: flex;
    flex-flow: wrap;
}

.cont_text_fraquicias2{
    width: 100%;
    height: 42%;
    padding: 2rem;
    /* border: solid 5px red; */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.text_franquicias2{
    text-align: center;
    font-size: 2.1rem;
    font-family: 'Montserrat';
    font-weight: 500;
}
.cont_img_paste_logo{
    width: 100%;
    height: 28%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: solid 5px rgb(71, 218, 52); */
}
.paste_logo{
    width: 35rem;
    min-width: 35rem;
    max-width: 35rem;
    height: 20rem;
    min-height: 20rem;
    max-height: 20rem;
}
.titulo_franquicias2{
    text-align: center;
    font-size: 2.4rem;
    font-family: 'Montserrat';
    font-weight: 700;
}
.cont_buttos{
    width: 100%;
    height: 11%;
    justify-content: center;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: solid 5px rgb(31, 86, 24); */
}
.buttons {
    width: 65%;
    height: 4.5%;
    border: solid 2px white;    
    position: absolute;
    box-sizing: border-box;
}
  
.buttons button {
    width: 100%;
    height: 100%;
    /* background-color: white; */
    background: linear-gradient(to bottom right, #ec1c24, #ffdf7f);
    /* color: #343434; */
    color: white;
    position: relative;
    overflow: hidden;
    font-size: 1.6rem;
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}
  
.buttons button:before, .buttons button:after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    background-color: #3f5ca6;
    transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1);
}
  
.buttons button:before {
    right: 0;
    top: 0;
    transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
}
  
.buttons button:after {
    left: 0;
    bottom: 0;
}
  
.buttons button span {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    z-index: 1;
}
  
.buttons button span:before, .buttons button span:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 0;
    border: 5 solid #3f5ca6;
    background-color: #3f5ca6;
    transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1);
}
  
.buttons button span:before {
    right: 0;
    top: 0;
    transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
}
  
.buttons button span:after {
    left: 0;
    bottom: 0;
}
  
.buttons button p {
    padding: 0;
    margin: 0;
    transition: all 0.4s cubic-bezier(0.35, 0.1, 0.25, 1);
    position: absolute;
    width: 100%;
    height: 100%;
}
  
.buttons button p:before, .buttons button p:after {
    position: absolute;
    width: 100%;
    transition: all 0.4s cubic-bezier(0.35, 0.1, 0.25, 1);
    z-index: 1;
    left: 0;
}
  
.buttons button p:before {
    content: attr(data-title);
    top: 50%;
    transform: translateY(-50%);
}
  
.buttons button p:after {
    content: attr(data-text);
    top: 150%;
    /* color: #CB2229; */
    color: white;
    font-size: 16px;
}
  
.buttons button:hover:before, .buttons button:hover:after {
    width: 100%;
}
  
.buttons button:hover span {
    z-index: 1;
}
  
.buttons button:hover span:before, .buttons button:hover span:after {
    height: 100%;
}
  
.buttons button:hover p:before {
    top: -50%;
    transform: rotate(5deg);
}
  
.buttons button:hover p:after {
    top: 50%;
    transform: translateY(-50%);
}
  
.buttons button.start {
    background-color: #000000;
    box-shadow: 0px 5px 10px -10px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}
  
.buttons button.start p:before {
    top: -50%;
    transform: rotate(5deg);
}
  
.buttons button.start p:after {
    color: white;
    transition: all 0s ease;
    content: attr(data-start);
    top: 50%;
    transform: translateY(-50%);
    animation: start 0.3s ease;
    animation-fill-mode: forwards;
}
  
  @keyframes start {
    from {
      top: -50%;
    }
}
  
.buttons button.start:hover:before, .buttons button.start:hover:after {
    display: none;
}
  
.buttons button.start:hover span {
    display: none;
}
  
.buttons button:active {
    outline: none;
    border: none;
}
  
.buttons button:focus {
    outline: 0;
}

.cont_info_franquicias{
    width: 100%;
    height: 19%;
    background-color: #295ca9;
    /* border: solid 5px orange; */
}
.telefono_franquicias{
    width: 100%;
    padding: 2rem;
}
.correo_franquicias{
    width: 100%;
    padding: 2rem;
}
.titulo_franquicias3{
    text-align: center;
    font-size: 2.4rem;
    font-family: 'Montserrat';
    font-weight: 700;
    color: white;
}
.text_franquicias3{
    text-align: center;
    font-size: 2.1rem;
    font-family: 'Montserrat';
    font-weight: 500;
}
.franquicias_telefono{
    text-decoration: none;
    color: white;
}
.franquicias_correo{
    text-decoration: none;
    color: white;
}


@media screen and (min-width: 375px){
.box2_franquicias{
    height: 1200px;
    min-height: 1200px;
}
.cont_text_fraquicias2{
    height: 38%;
}
.cont_info_franquicias{
    height: 21%;
}
.cont_buttos{
    height: 13%;
}
.buttons {
    height: 5%;
}
}
@media screen and (min-width: 425px){
.cont_text_franquicias{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 3rem;
}
}
@media screen and (min-width: 660px){
.cont_text_franquicias{
    padding-top: 5rem;
}
}
@media screen and (min-width: 768px){
.cont_text_franquicias{
    padding-top: 8rem;
}
.titu_franquicias{
    font-size: 6rem;
    margin-bottom: 3rem;
}
}