.compradores-top-5 {
    list-style: none;
    padding: 0;
}

.compradores-top-5 .comprador-name {
    font-size: 1em;
    font-weight: 500;
    color: var(--color-cafe);
    display: inline-block;
}

.compradores-top-5 li {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.compradores-top-5 .comprador-points {
    font-family: Anton, sans-serif;
    font-size: 1.3em;
    background-color: var(--color-verde);
    display: inline-flex;
    width: 75px;
    height: 50px;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: auto;
    color: var(--color-beige);
}

.compradores-top-5 small {
    font-family: Anton, sans-serif;
    font-size: 1.3em;
    margin-left: 10px;
    color: var(--color-verde);
}

.compradores-top-5 .comprador-position {
    background-image: url(/wp-content/uploads/2024/02/estrella.svg);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-verde);
    font-family: Anton, sans-serif;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 30px;
    padding-left: 3px;
}/** INICIO **/

.restaurantes-top-3 {
    list-style: none;
    padding: 0;
}

.inicio .restaurantes-top-3 li {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
}

.inicio .restaurantes-top-3 .restaurante-dish-image {
    width: 260px;
    height: 90px;
    border-radius: 16px;
    background-position: center;
    background-size: cover;
    flex-grow: 1;
}

.inicio .restaurantes-top-3 .restaurante-dish-image img {
    width: 100%;
}

.inicio .restaurantes-top-3 .restaurante-data,
.inicio .restaurantes-top-3 .estaurante-points {
    width: 100%;
}

.inicio .restaurantes-top-3 .restaurante-name,
.inicio .restaurantes-top-3 .restaurante-dish,
.inicio .restaurantes-top-3 .restaurante-location {
    line-height: 1;
    height: auto;
    color: var(--color-cafe);
}

.inicio .restaurantes-top-3 .restaurante-name {
    font-family: Anton, sans-serif;
    font-size: 1.3em;
    text-transform: uppercase;
    margin-top: 0;
}

.inicio .restaurantes-top-3 .restaurante-dish {
    font-family: Anton, sans-serif;
    text-transform: capitalize;
}

.inicio .restaurantes-top-3 .restaurante-location {
    text-transform: capitalize;
}

.inicio .restaurantes-top-3 .restaurante-data h3,
.inicio .restaurantes-top-3 .restaurante-data p {
    margin-bottom: 0.2em;
}

.inicio .restaurantes-top-3 .restaurante-points {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--color-agua-marina);
    width: 130px;
    padding: 0.5em;
    border-radius: 12px;
}

.inicio .restaurantes-top-3 .restaurante-points span:nth-child(1) {
    font-family: Anton, sans-serif;
    font-size: 1.6em;
    color: var(--color-blanco);
}

.inicio .restaurantes-top-3 .restaurante-points span:nth-child(2) {
    color: var(--color-blanco);
}

/** RESTAURANTES **/

.disfruta .restaurantes-top-3 {
    display: flex;
    gap: 30px;
    justify-content: space-around;
    flex-wrap: wrap;
}

.disfruta .restaurantes-top-3 li {
    position: relative;
}

.disfruta .restaurantes-top-3 .restaurante-dish-image {
    width: 320px;
    height: 300px;
    border-radius: 16px;
    background-position: center;
    background-size: cover;
    position: relative;
}

.disfruta .restaurante-dish-image::after {
    content: '';
    display: block;
    width: 100%;
    height: 140px;
    bottom: 0;
    position: absolute;
    border-radius: 0 0 16px 16px;
}

.disfruta .restaurante-dish-image::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.8) 100%);
}

.disfruta .restaurante-dish-image .disfruta .restaurantes-top-3 li {
    width: 100%;
    position: relative;
}

.disfruta .restaurantes-top-3 .restaurante-name {
    font-family: Anton, sans-serif;
    font-size: 1.8em;
    text-transform: uppercase;
    margin-top: 0;
}

.disfruta .restaurantes-top-3 .restaurante-data {
    position: absolute;
    bottom: 0.5em;
    padding: 1em;
    color: var(--color-blanco);
}

.disfruta .restaurantes-top-3 .restaurante-name,
.disfruta .restaurantes-top-3 .restaurante-dish,
.disfruta .restaurantes-top-3 .restaurante-location {
    margin-bottom: 0;
}

.disfruta .restaurantes-top-3 .restaurante-dish,
.disfruta .restaurantes-top-3 .restaurante-location {
    text-transform: capitalize;
}

.disfruta .restaurantes-top-3 .restaurante-dish {
    font-weight: 600;
    line-height: 1.2;
}

.disfruta .restaurantes-top-3 .restaurante-points {
    display: block;
    position: absolute;
    top: 0;
    color: var(--color-blanco);
    padding: 0.2em 1em;
    font-weight: 600;
    border-radius: 16px 0;
}

.disfruta li:nth-child(1) .restaurante-dish-image::after {
    background-color: rgba(244, 126, 62, 0.7)
}

.disfruta .restaurantes-top-3 li:nth-child(1) .restaurante-points {
    background-color: var(--color-naranja)
}

.disfruta li:nth-child(2) .restaurante-dish-image::after {
    background-color: rgba(0, 174, 75, 0.7)
}

.disfruta .restaurantes-top-3 li:nth-child(2) .restaurante-points {
    background-color: var(--color-verde)
}

.disfruta li:nth-child(3) .restaurante-dish-image::after {
    background-color: rgba(72, 183, 205, 0.7);
}

.disfruta .restaurantes-top-3 li:nth-child(3) .restaurante-points {
    background-color: var(--color-azul)
}

@media (width<=820px) {
    .disfruta .restaurantes-top-3 {
        gap: 10px;
    }

    .disfruta .restaurantes-top-3 .restaurante-dish-image {
        width: 230px;
        height: 230px;
    }

    .disfruta .restaurantes-top-3 .restaurante-name {
        font-size: 1.4em;
    }

    .disfruta .restaurante-dish-image:after {
        height: 130px;
    }
}

@media (width<=430px) {
    .disfruta .restaurantes-top-3 .restaurante-dish-image {
        width: 350px;
        height: 300px;
    }

    .disfruta .restaurantes-top-3 .restaurante-name {
        font-size: 2em;
    }

    .disfruta .restaurante-dish-image:after {
        height: 145px;
    }

}/** INICIO **/

.restaurantes-top-3-especiales {
    list-style: none;
    padding: 0;
}

.inicio .restaurantes-top-3-especiales li {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
}

.inicio .restaurantes-top-3-especiales .restaurante-dish-image {
    width: 260px;
    height: 90px;
    border-radius: 16px;
    background-position: center;
    background-size: cover;
    flex-grow: 1;
}

.inicio .restaurantes-top-3-especiales .restaurante-dish-image img {
    width: 100%;
}

.inicio .restaurantes-top-3-especiales .restaurante-data,
.inicio .restaurantes-top-3-especiales .estaurante-points {
    width: 100%;
}

.inicio .restaurantes-top-3-especiales .restaurante-name,
.inicio .restaurantes-top-3-especiales .restaurante-dish,
.inicio .restaurantes-top-3-especiales .restaurante-location {
    line-height: 1;
    height: auto;
    color: var(--color-cafe);
}

.inicio .restaurantes-top-3-especiales .restaurante-name {
    font-family: Anton, sans-serif;
    font-size: 1.3em;
    text-transform: uppercase;
    margin-top: 0;
}

.inicio .restaurantes-top-3-especiales .restaurante-dish {
    font-family: Anton, sans-serif;
    text-transform: capitalize;
}

.inicio .restaurantes-top-3-especiales .restaurante-location {
    text-transform: capitalize;
}

.inicio .restaurantes-top-3-especiales .restaurante-data h3,
.inicio .restaurantes-top-3-especiales .restaurante-data p {
    margin-bottom: 0.2em;
}

.inicio .restaurantes-top-3-especiales .restaurante-points {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--color-agua-marina);
    width: 130px;
    padding: 0.5em;
    border-radius: 12px;
}

.inicio .restaurantes-top-3-especiales .restaurante-points span:nth-child(1) {
    font-family: Anton, sans-serif;
    font-size: 1.6em;
    color: var(--color-blanco);
}

.inicio .restaurantes-top-3-especiales .restaurante-points span:nth-child(2) {
    color: var(--color-blanco);
}

/** RESTAURANTES **/

.disfruta .restaurantes-top-3-especiales {
    display: flex;
    gap: 30px;
    justify-content: space-around;
    flex-wrap: wrap;
}

.disfruta .restaurantes-top-3-especiales li {
    position: relative;
}

.disfruta .restaurantes-top-3-especiales .restaurante-dish-image {
    width: 320px;
    height: 300px;
    border-radius: 16px;
    background-position: center;
    background-size: cover;
    position: relative;
}

.disfruta .restaurante-dish-image::after {
    content: '';
    display: block;
    width: 100%;
    height: 140px;
    bottom: 0;
    position: absolute;
    border-radius: 0 0 16px 16px;
}

.disfruta .restaurante-dish-image::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.8) 100%);
}

.disfruta .restaurante-dish-image .disfruta .restaurantes-top-3-especiales li {
    width: 100%;
    position: relative;
}

.disfruta .restaurantes-top-3-especiales .restaurante-name {
    font-family: Anton, sans-serif;
    font-size: 1.8em;
    text-transform: uppercase;
    margin-top: 0;
}

.disfruta .restaurantes-top-3-especiales .restaurante-data {
    position: absolute;
    bottom: 0.5em;
    padding: 1em;
    color: var(--color-blanco);
}

.disfruta .restaurantes-top-3-especiales .restaurante-name,
.disfruta .restaurantes-top-3-especiales .restaurante-dish,
.disfruta .restaurantes-top-3-especiales .restaurante-location {
    margin-bottom: 0;
}

.disfruta .restaurantes-top-3-especiales .restaurante-dish,
.disfruta .restaurantes-top-3-especiales .restaurante-location {
    text-transform: capitalize;
}

.disfruta .restaurantes-top-3-especiales .restaurante-dish {
    font-weight: 600;
    line-height: 1.2;
}

.disfruta .restaurantes-top-3-especiales .restaurante-points {
    display: block;
    position: absolute;
    top: 0;
    color: var(--color-blanco);
    padding: 0.2em 1em;
    font-weight: 600;
    border-radius: 16px 0;
}

.disfruta li:nth-child(1) .restaurante-dish-image::after {
    background-color: rgba(244, 126, 62, 0.7)
}

.disfruta .restaurantes-top-3-especiales li:nth-child(1) .restaurante-points {
    background-color: var(--color-naranja)
}

.disfruta li:nth-child(2) .restaurante-dish-image::after {
    background-color: rgba(0, 174, 75, 0.7)
}

.disfruta .restaurantes-top-3-especiales li:nth-child(2) .restaurante-points {
    background-color: var(--color-verde)
}

.disfruta li:nth-child(3) .restaurante-dish-image::after {
    background-color: rgba(72, 183, 205, 0.7);
}

.disfruta .restaurantes-top-3-especiales li:nth-child(3) .restaurante-points {
    background-color: var(--color-azul)
}

@media (width<=820px) {
    .disfruta .restaurantes-top-3-especiales {
        gap: 10px;
    }

    .disfruta .restaurantes-top-3-especiales .restaurante-dish-image {
        width: 230px;
        height: 230px;
    }

    .disfruta .restaurantes-top-3-especiales .restaurante-name {
        font-size: 1.4em;
    }

    .disfruta .restaurante-dish-image:after {
        height: 130px;
    }
}

@media (width<=430px) {
    .disfruta .restaurantes-top-3-especiales .restaurante-dish-image {
        width: 350px;
        height: 300px;
    }

    .disfruta .restaurantes-top-3-especiales .restaurante-name {
        font-size: 2em;
    }

    .disfruta .restaurante-dish-image:after {
        height: 145px;
    }

}.compradores-top-10 {
    list-style: none;
    padding: 0;
}

.compradores-top-10 .comprador-name {
    font-size: 1.3em;
    font-weight: 500;
    color: var(--color-cafe);
    display: inline-block;
}

.compradores-top-10 .comprador-name small {
    font-size: .8em;
    margin-left: 20px;
    color: var(--color-cafe);
}

.compradores-top-10 li {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.compradores-top-10 .comprador-points {
    font-family: Anton, sans-serif;
    font-size: 1.3em;
    background-color: var(--color-verde);
    display: inline-flex;
    width: 75px;
    height: 50px;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: auto;
    color: var(--color-beige);
}

.compradores-top-10 .comprador-points+small {
    font-family: Anton, sans-serif;
    font-size: 1.3em;
    margin-left: 10px;
    color: var(--color-verde);
}

.compradores-top-10 .comprador-position {
    background-image: url(/wp-content/uploads/2024/02/estrella.svg);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-verde);
    font-family: Anton, sans-serif;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 30px;
    padding-left: 3px;
}

@media (width<=430px) {
    .compradores-top-10 .comprador-name small {
        display: none;
    }
}.restaurante-card {
    --perspective: 1000px
}

.restaurantes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
    justify-content: center;
}

.restaurantes-grid .restaurante-card {
    position: relative;
    width: 300px;
    height: 330px;
}

.restaurantes-grid .restaurante-card .front,
.restaurantes-grid .restaurante-card .back {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
    transition: 1s;
    border-radius: 16px;
}

.restaurantes-grid .restaurante-card .front {
    transform: perspective(var(--perspective)) rotateY(0deg);
}

.restaurantes-grid .restaurante-card h3 {
    font-size: 2.5em;
    margin-bottom: 0;
    line-height: 1.1;
}

.restaurantes-grid .restaurante-card p {
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    margin-bottom: 0;
    text-transform: capitalize;
    font-weight: 600;
}

.restaurantes-grid .restaurante-card .front-color {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.8) 100%);
    height: 100%;
    width: 100%;
    position: absolute;
    border-radius: 16px;
    padding: 1rem;
    color: var(--color-blanco);
    font-family: Anton, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}

.restaurantes-grid .restaurante-card .front-image {
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%;
    border-radius: 16px;
}

.restaurantes-grid .restaurante-card .back {
    transform: perspective(var(--perspective)) rotateY(180deg);
}

.restaurantes-grid .restaurante-card .back-color {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.9) 100%);
    height: 100%;
    width: 100%;
    position: absolute;
    border-radius: 16px;
    padding: 1rem;
    color: var(--color-blanco);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
}

.restaurantes-grid .restaurante-card .back-color .description {
    height: 150px;
    overflow-y: scroll;
    opacity: 0;
    transition: 0.2s;
}

.restaurantes-grid .restaurante-card .description p {
    font-size: 0.8em;
    font-weight: 400;
    line-height: 1.2;
    text-transform: none;
}

.restaurantes-grid .restaurante-card .header h4 {
    text-transform: capitalize;
    font-size: 1.2em;
    line-height: 1.1;
}

.restaurantes-grid .restaurante-card:hover .back-color .description {
    opacity: 1;
    transition: 0.3s;
    transition-delay: 0.6s;
}

.restaurantes-grid .restaurante-card .back-image {
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%;
    border-radius: 16px;
}

.restaurantes-grid .restaurante-card:hover .front {
    transform: perspective(var(--perspective)) rotateY(180deg);
}

.restaurantes-grid .restaurante-card:hover .back {
    transform: perspective(var(--perspective)) rotateY(360deg);
}

.restaurantes-grid .restaurante-card .restaurante-points,
.restaurantes-grid .restaurante-card .vota-aqui {
    display: block !important;
    position: absolute;
    z-index: 10;
}

.restaurantes-grid .restaurante-card .restaurante-points {
    top: 0;
    left: 0;
    color: var(--color-blanco);
    padding: 0.2em 1em;
    font-weight: 600;
    border-radius: 16px 0;
    background-color: var(--color-verde);
}

.restaurantes-grid .restaurante-card .vota-aqui {
    top: -20px;
    right: -10px;
    color: var(--color-blanco);
    background-color: var(--color-naranja);
    text-transform: uppercase;
    font-family: Anton, sans-serif;
    border-radius: 8px;
    font-size: 1.2em;
    line-height: 1.2;
    padding: 0.5em;
    transition: 0.3s;
    border: 1px solid var(--color-naranja);
}

.restaurantes-grid .restaurante-card .vota-aqui:hover {
    scale: 1.1;
    border: 1px solid var(--color-naranja);
    background-color: var(--color-blanco);
    color: var(--color-naranja);
}

@media (width<=430px) {
    .restaurantes-grid .restaurante-card {
        width: 350px;
        height: 380px;
    }
}

/** MODAL **/
dialog {
    width: 50%;
    padding: 4em 3em;
    border-radius: 16px;
    background-color: var(--color-naranja);
    border: none;
    position: relative;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

dialog h3 {
    font-family: Anton, sans-serif;
    font-size: 2.3em;
    color: var(--color-cafe);
    text-transform: uppercase;
}

dialog input {
    border: 1px solid var(--color-cafe) !important;
    margin-bottom: 0.6em;
}

dialog label {
    color: var(--color-cafe);
}

dialog input[type="submit"] {
    background-color: var(--color-blanco);
    border: 1px solid var(--color-cafe);
    color: var(--color-cafe);
    font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
    font-weight: var(--e-global-typography-secondary-font-weight);
}

dialog input[type="submit"]:hover,
dialog button.cerrar-modal:hover {
    background-color: var(--color-verde);
    color: var(--color-blanco);
}

dialog button.cerrar-modal {
    position: absolute;
    font-family: Anton, sans-serif;
    font-size: 1.3em;
    background-color: var(--color-blanco);
    border: 1px solid var(--color-cafe);
    color: var(--color-cafe);
    right: 15px;
    top: 15px;
}


@media (width<=820px) {
    dialog {
        width: 70%;
    }
}

@media (width<=430px) {
    dialog {
        width: 90%;
    }
}.restaurant-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.restaurant-pagination button {
    font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
    font-weight: var(--e-global-typography-secondary-font-weight);
    background-color: transparent;
    border-radius: 8px;
    padding: 0.5em 1em;
    border: 1px solid var(--color-cafe);
    color: var(--color-cafe);
}

.restaurant-pagination button:hover,
.restaurant-pagination button:focus {
    background-color: var(--color-naranja);
}

.restaurant-pagination .current-page {
    font-family: Anton, sans-serif;
    color: var(--color-cafe);
    font-size: 0.9em;
}
/*-------------------*/


.page-numbers {
    display: flex;
}

.page-number {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
    padding: 8px 12px;
    margin: 0 2px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.page-number:hover {
    background-color: #e0e0e0;
}

.page-number.active {
    background-color: #f47e3e;
    color: #fff;
    border-color: #4b1c10;
}.restaurant-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.restaurant-filters h2 {
    color: var(--color-naranja);
    font-family: Anton, sans-serif;
    font-size: 2em;
}

.restaurant-filters .filters {
    display: flex;
    gap: 16px;
}

.restaurant-filters .filters select {
    width: 250px;
}

@media (width<=820px) {
    .restaurant-filters {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin-bottom: 60px;
    }

    .restaurant-filters h2 {
        font-size: 2.5em;
        rotate: var(--text-rotation);
        text-align: center;
    }

}

@media (width<=430px) {
    .restaurant-filters .filters {
        flex-wrap: wrap;
    }

    .restaurant-filters .filters select {
        width: 100%;
    }
}.map .map-container {
    width: 100%;
    height: 500px;
    margin-top: 30px;
    border-radius: 16px;
}

.map .map-container .info-window {
    padding: 1em;
}

.map .map-container .info-window h3 {
    font-size: 1.2em;
    color: var(--color-verde);
    margin-top: 0;
    text-transform: uppercase;
}

.map .map-container .info-window p {
    margin-bottom: 0.4em;
}

.map .map-container .info-window small {
    text-transform: capitalize;
}

/* Aseguramos que el mapa ocupe el espacio necesario */
.map-container {
    width: 70%;  /* Ajusta el tamaño según tu diseño */
    height: 100vh;
    float: left;  /* Posiciona el mapa a la izquierda */
}

/* El contenedor de información al lado del mapa */

/* Hacer que el scroll sea suave */
.info-container {
    scroll-behavior: smooth; /* Hace que el scroll sea suave */
    overflow-y: auto; /* Asegura que haya scroll si es necesario */
}

/* Personalizar el ancho y estilo del scroll solo en navegadores que usan Webkit (Chrome, Safari, etc.) */
.info-container::-webkit-scrollbar {
    width: 6px; /* Ancho del scroll (ajustar según preferencia) */
}

.info-container::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color del track (fondo del scroll) */
}

.info-container::-webkit-scrollbar-thumb {
    background-color: #888; /* Color del scroll */
    border-radius: 10px; /* Redondear el scroll */
}

.info-container::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color cuando se pasa el mouse sobre el scroll */
}

@media (max-width: 767px) {
    .info-container{
        padding: 25px;
    overflow-y: auto;
    max-height: 560px;
    display: flex;
    flex-wrap: nowrap;
}
}

.icono-telefono {
    width: 15px; /* Ajusta el tamaño del ícono */
    height: 15px;
    margin-right: 5px; /* Espacio entre el ícono y la palabra "Contacto" */
    vertical-align: middle; /* Alinea el ícono con el texto */
}


/* Ocultar inicialmente y posicionar fuera de la vista a la derecha */
.info-container {
    display: none; /* Oculto inicialmente */
    transform: translateX(100%); /* Mover el contenedor fuera de la vista hacia la derecha */
    transition: transform 1.5s ease-in-out; /* Transición suave de 0.5s */
    flex-direction: column;
    /* Otros estilos del contenedor */
}

/* Cuando el contenedor es visible, hacer la transición hacia su posición normal */
.info-container {
     transition: transform 1.5s ease-in-out;
    display: flex; /* Mostrar el contenedor */
    transform: translateX(0); /* Moverlo a su posición original */
}
.info-container{
    padding: 25px;
    text-transform: capitalize;
    overflow-y: auto;
    display: none;
    background: white;
    border-radius: 16px;
    overflow-y: auto;
    max-height: 580px;
}

.direccion-container-principal{
    text-transform: capitalize;
    position: relative;
    
    font-family: Anton, sans-serif;
    color: var(--color-naranja);
    font-size: 2.em;
    margin-bottom: 0;
    margin-top: 0;
    
}

.ciudad-container-principal{
    text-transform: uppercase;
    color: var(--e-global-color-72f11fc);
    font-family: "Anton", Sans-serif;
    font-size: 1.2em;
    font-weight: 500;
}

.lugar-container{
    background-color:#FF8941 ;
    padding: 20px;
    border-radius: 15px;
}
.lugar-local{
   text-transform: capitalize;
    background-color: #f5f4f3;
    color: #ff8941;
    padding-left: 5px;
    padding-right: 5px;
    width: max-content;
    margin-bottom: -5px;
    font-family: 'Anton';
}

.text-rotate {
    display: inline-block;
    transform: rotate(-2deg); /* Rota solo el texto */
}

.lugar-titulo{
    text-transform: capitalize;
        font-family: Anton, sans-serif;
    font-weight: 500;
    color: white;
    font-size: 1.5em;
    margin-bottom: 10px;
}

.lugar-telefono{
    text-transform: capitalize;
    font-family: 'Montserrat';
    color: white;
    font-weight: 500;
    margin-bottom: -5px;
}
.lugar-telefono-numero{
    font-weight: 300;
}


.map .filter-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.map .filter-wrapper h2 {
    font-family: Anton, sans-serif;
    color: var(--color-naranja);
    font-size: 1.8em;
    margin-bottom: 0;
    margin-top: 0;
}

.map .filter-wrapper select {
    border: 1px solid var(--color-cafe);
    width: 300px;
}

@media (width<=820px) {
    .map .filter-wrapper h2 {
        font-family: Anton, sans-serif;
        color: var(--color-naranja);
        font-size: 1.7em;
    }
}

@media (width<=430px) {
    .map .filter-wrapper {
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
    }

    .map .filter-wrapper select {
        width: 100%;
    }

    .map .filter-wrapper h2 {
        text-align: center;
        rotate: var(--text-rotation);
    }
}