@media (min-width: 992px){
    .typo-line{
        padding-left: 140px;
        margin-bottom: 40px;
        position: relative;
    }
    
    .typo-line .category{
        transform: translateY(-50%);
        top: 50%;
        left: 0px;
        position: absolute;
    }   
}

.all-icons [class^="pe-"]{
    font-size: 40px;
}
.all-icons input{
    border: 0;
}
.all-icons .font-icon-detail{
    text-align: center;
    padding: 45px 0px 30px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    margin: 15px 0;
}
.all-icons .font-icon-container a{
    padding: 5px 0;
    display: block;
    color: #666666;
}
.all-icons .font-icon-detail input{
    margin: 25px auto 0;
    width: 100%;
    text-align: center;
    display: block;
    color: #aaa;
    font-size: 13px;
}
.all-icons h5{
    margin-top: 60px;
}
.all-icons > div > .row:first-child h5{
    margin-top: 15px;
}

.places-buttons .btn{
    margin-bottom: 30px
}

.buttons-with-margin .btn{
    margin-bottom: 5px;
}

.animated .img-rounded{
    width: 150px;
    height: 150px;
    overflow: hidden;
    margin: 0 auto;
    display: block;
}
.animated .img-rounded img{
    width: 100%;
}


/* =================================================== */
/* ==== INICIA CÓDIGO RESPONSIVO PARA TABLAS (NUEVO) ==== */
/* =================================================== */
@media (max-width: 767px) {
    
    /* Oculta los encabezados de la tabla original en móvil */
    #datatables thead {
        display: none;
    }

    /* Cada fila (TR) se convierte en una "tarjeta" */
    #datatables tr {
        display: block;
        margin-bottom: 1.5rem; /* Espacio entre "tarjetas" */
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* cada celda (TD) se apila verticalmente */
    #datatables td {
        display: block;
        text-align: left;    /* <<-- CAMBIO: Alinear a la izquierda */
        padding: 10px 15px;  /* <<-- CAMBIO: Padding normal */
        position: relative;
        border-bottom: 1px dotted #eee;
    }
    
    /* La última celda de cada "tarjeta" no necesita borde */
    #datatables tr td:last-child {
        border-bottom: 0;
    }

    /*
    * LA MAGIA PARA EL TEXTO LARGO (Problema de "Servicio")
    * Esto convierte la etiqueta en un "título" de bloque.
    */
    #datatables td:before {
        content: attr(data-label);
        display: block;      /* <<-- CAMBIO: La etiqueta es un bloque */
        font-weight: bold;
        color: #333;
        font-size: 11px;     /* Más pequeño para que parezca etiqueta */
        text-transform: uppercase; /* Opcional: para que se vea bien */
        margin-bottom: 5px;  /* Espacio entre la etiqueta y el valor */
    }

    /*
    * ARREGLO PARA CELDA DE "ACCIONES" (Problema de "Acciones")
    */
    #datatables td.td-actions {
        text-align: center;  /* Centra los botones */
        padding-top: 15px;
        padding-bottom: 15px;
    }

    /* Ocultamos la etiqueta "data-label" de acciones...*/
    #datatables td.td-actions:before {
        display: none; /* No queremos que diga "Acciones:" */
    }
}
/* =================================================== */
/* ===== FIN CÓDIGO RESPONSIVO PARA TABLAS (NUEVO) ===== */
/* =================================================== */