/*TARJETA HORARIOS DE ATENCIÓN*/

.mark{
    text-decoration: underline solid var(--colorRojo) 10px;
}

.mark_red{
    text-decoration: underline solid var(--colorBlanco) 10px;
}

.cabecera{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.card{
    padding: 10vh 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
}

.card .horarios{
    width: 90%;
    border: solid var(--colorNegro);
    border-radius: 25px;
    height: auto;
    box-shadow:  20px 20px 60px #bdb6a3,
                -20px -20px 60px #fff6dd;
}

.card .horarios .header{
    width: 100%;
    -webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
    background-color: var(--colorRojo);
    color: var(--colorTextoClaro);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
    vertical-align: middle;
    border-bottom: solid var(--colorNegro);
}

.horarios .header .icono{
    padding: .5rem .5rem;
    background-color: var(--colorBlanco);
    border-radius: 12.5px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    box-shadow:  5px 5px 30px #b13236,
             -5px -5px 30px #ef444a;
}

.header .icono span{
    font-size: 2.5rem;
    color: var(--colorTextoOscuro);
}

.header .icono .badge {
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 10px 10px;
  border-radius: 50%;
  background: var(--colorRojo);
  color: white;
  border: solid var(--colorBlanco);
  
}

.card .horarios .cuerpo{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 1.5rem;
}

.card .horarios .cuerpo .semana{
    width: 45%;
}

.card .horarios .cuerpo .fin_semana{
    width: 45%;
    
}

.horarios .cuerpo .subtitulo{
    text-align: center;
}

.horarios .cuerpo .texto{
    text-align: center;
}


/*TARJETA NOSOTROS*/

.card_nosotros{
    display: flex;
    padding: 10vh 0;
    position: relative;
    background-color: var(--colorBlanco);
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
}

.card_nosotros .container {  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "imagen info";
    width: 90%;
    border: solid var(--colorNegro);
    border-radius: 25px;
    box-shadow:  20px 20px 60px #bdb6a3,
                -20px -20px 60px #fff6dd;
}

.card_nosotros .imagen { grid-area: imagen; 
    min-height: 85vh;
background: url(../assets/imagenes/CAFETERIA\ EXTERIOR.avif);
background-position: center;
background-size: cover;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}

.card_nosotros .info {  display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--colorNegro);
    -webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}

.card_nosotros .info .texto{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: end;
    padding: 2.5rem;
    margin: auto;
    -webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
color: var(--colorBlanco);
height: 90%;
}

.card_nosotros .info .boton_nosotros{
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    gap: 2.5rem;
    color: var(--colorBlanco);
    font-size: var(--subtitulo);
    text-align: center;
    background-color: var(--colorRojo);
    padding: 2.5rem;
    -webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
position: relative;
bottom: 0;
}


.card_nosotros .info .boton_nosotros span{
    align-items: center;
    vertical-align: middle;
    font-size: 3.5rem;
}


/*Tarjeta mapa google*/

.mapa_container{
    width: 100%;
    height: auto;
    padding: 10vh 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mapa_container .mapa{
    width: 90%;
}

.mapa_container .mapa img{
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width:900px) {
    .card_nosotros .imagen {
        height: 50vh;
        -webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 0px;
    }
    .card_nosotros .container{
        display: flex;
        flex-direction: column;
    }

    .card_nosotros .info{
    -webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-right-radius: 0px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
    }

    .card_nosotros .info .boton_nosotros{
        -webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
    }

    .card_nosotros .imagen {  
    min-height: 35vh;
    }
}

@media screen and (max-width: 850px) {
    .card .horarios .cuerpo{
        flex-direction: column;
        gap: 1rem;
    }
}

@media screen and (max-width: 750px) {
    .card .horarios .cuerpo .semana{
    width: 95%;
}

.card .horarios .cuerpo .fin_semana{
    width: 95%;
    
}
}

@media screen and (max-width:650px) {
    .cabecera{
        padding: 0 0 0 5%;
    }

    .card_nosotros .info .texto{
        padding: 2rem  1rem;
    text-align: justify;
}

    .card_nosotros .info .texto .titulo{
        font-size: var(--subtitulo);
        font-weight: bolder;
    }

    .card_nosotros .info .boton_nosotros{
        padding: 1rem;
    }

    .mapa_container{
    width: 100%;
    height: 65vh;
    padding: 10vh 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5rem 0;
}
.mapa_container .mapa img{
    border: solid var(--colorNegro);
    width: 100%;
    height: 65vh;
    object-fit: cover;
    border-radius: 25px;
    box-shadow:  20px 20px 60px #bdb6a3,
                -20px -20px 60px #fff6dd;
}
}


@media screen and (max-width: 450px) {
    .card .horarios .subtitulo{
        font-size: 24px;
    }
}