/* ===== Páginas internas del blog (blog.php / articulo.php) ===== */

/* Espacio para que la cabecera transparente no tape el contenido */
.pagina-interna .qd-page-title {
    padding-top: 180px;
    padding-bottom: 40px;
}
.qd-page-title .qd-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 15px;
    font-size: 15px;
    opacity: .8;
}
.qd-page-title .qd-breadcrumb li + li::before {
    content: "/";
    margin-right: 8px;
}
.qd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 15px;
    opacity: .8;
}
.qd-meta i { margin-right: 6px; }

/* Portada del artículo */
.qd-articulo-portada img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: 10px;
}

/* Contenido que viene del editor del panel */
.qd-articulo-contenido {
    font-size: 17px;
    line-height: 1.8;
}
.qd-articulo-contenido img,
.qd-articulo-contenido figure {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.qd-articulo-contenido h2,
.qd-articulo-contenido h3,
.qd-articulo-contenido h4 { margin: 1.6em 0 .6em; }
.qd-articulo-contenido p,
.qd-articulo-contenido ul,
.qd-articulo-contenido ol { margin-bottom: 1.2em; }
.qd-articulo-contenido blockquote {
    border-left: 4px solid currentColor;
    padding: 10px 20px;
    margin: 1.5em 0;
    opacity: .9;
    font-style: italic;
}
.qd-articulo-contenido table {
    width: 100%;
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
}
.qd-articulo-contenido td,
.qd-articulo-contenido th {
    border: 1px solid rgba(128, 128, 128, .3);
    padding: 8px 12px;
}

/* Tarjetas del listado: altura de imagen uniforme */
.qd-blog-grid .thumbnail img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* Paginación */
.qd-paginacion {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 50px 0 0;
}
.qd-paginacion a,
.qd-paginacion span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid rgba(128, 128, 128, .35);
}
.qd-paginacion .activo span {
    background: var(--color-primary, #3b82f6);
    border-color: var(--color-primary, #3b82f6);
    color: #fff;
}

/* ===== Proyectos Realizados ===== */
/* Miniaturas de YouTube (vienen 4:3 con franjas negras): recortar a 16:9 */
.tmp-portfolio-area .card-image img.qd-yt-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
/* Categorías como etiquetas (no son enlaces) */
.tmp-portfolio-area .tmp-badge-group .tmp-badge-2 {
    cursor: default;
}

/* ===== Sección "Artículos Recientes" del inicio ===== */
/* Tarjeta grande: ocupa toda la altura de la columna derecha y la imagen rellena el espacio */
#blog .col-lg-5 .bentostyle-left-blog,
#blog .col-lg-5 .bentostyle-left-blog > .inner {
    height: 100%;
}
#blog .col-lg-5 .bentostyle-left-blog > .inner {
    display: flex;
    flex-direction: column;
}
#blog .bentostyle-left-blog .thumbnail {
    position: relative;
    flex: 1 1 auto;
    min-height: 300px;
    overflow: hidden;
}
#blog .bentostyle-left-blog .thumbnail a.image {
    position: absolute;
    inset: 0;
    display: block;
}
#blog .bentostyle-left-blog .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#blog .card-list-view .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#blog .card-list-view .title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#blog .card-list-view .descriptiion {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#blog .bentostyle-left-blog .descriptiion {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Testimonios (Client Feedback) ===== */
.testimonial-style-one .rating span { display: inline-block; }
.testimonial-style-one .rating .qd-estrella-vacia img { opacity: .2; filter: grayscale(1); }
/* Fotos subidas desde el panel: siempre cuadradas y recortadas */
.testimonial-style-one .content-bottom .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Avatar con iniciales cuando no hay foto */
.qd-avatar-iniciales {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
    border-radius: inherit;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .5px;
}

/* ===== Planes de hosting: íconos en cada característica ===== */
.pricing-table-items .pricing-table ul.feature-lists li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.pricing-table-items .pricing-table ul.feature-lists li i {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-primary);
}