/* ==========================================================================
   Blog Qloudea — estilos del frontend
   Cárgalo desde: https://recursos.qloudea.com/blog/css/blog.css
   Complementa a Bootstrap 5.3.3 (no lo sustituye).
   ========================================================================== */

/* ---------- Tipografía oficial: WF Visual Sans ----------
   Archivos servidos desde https://recursos.qloudea.com/fonts/
   Si los nombres reales en el servidor difieren, ajústalos aquí. */
@font-face {
    font-family: 'WF Visual Sans';
    src: url('https://recursos.qloudea.com/fonts/65258e6f9f50f2d876a4f384_WFVisualSans-RegularText.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'WF Visual Sans';
    src: url('https://recursos.qloudea.com/fonts/65258e6fb4479820549d1044_WFVisualSans-Medium.woff') format('woff');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'WF Visual Sans';
    src: url('https://recursos.qloudea.com/fonts/65258e6ffaf4654a99eceefd_WFVisualSans-SemiBoldText.woff') format('woff');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'WF Visual Sans';
    src: url('https://recursos.qloudea.com/fonts/65258e6f74892e61c00dc42e_WFVisualSans-SemiBold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

:root {
    /* Colores de marca Qloudea */
    --qld-lima:    #c3fe33;   /* VerdeOn — cabecera */
    --qld-lima-d:  #aef000;
    --qld-dark:    #112230;   /* AzulTrust — nav, títulos, footer */
    --qld-dark-2:  #1a3344;
    --qld-teal:    #006b82;   /* AzulSoft — enlaces, categorías, acentos */
    --qld-teal-d:  #00536a;
    --qld-light:   #bbf6e1;   /* AzulLight — fondos suaves */
    --qld-rojo:    #ff4f40;
    --qld-naranja: #ff6b1b;
    --qld-text:    #3f4c5a;   /* cuerpo de texto */
    --qld-muted:   #8c927c;   /* Caqui — texto secundario */
    --qld-line:    #e1e6ea;   /* líneas y separadores */
    --qld-bg:      #ebebeb;   /* gris de fondo de página */
    --qld-radius:  14px;
}

/* ---------- Base ---------- */
body {
    font-family: 'WF Visual Sans', 'Poppins', 'Kanit', system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--qld-text);
    background: #fff;
}
h1, h2, h3, h4, h5, .qld-title { color: var(--qld-dark); font-weight: 700; }
a { text-decoration: none; }

/* ---------- Barra superior lima ---------- */
.qld-topbar {
    background: var(--qld-lima);
    padding: 1.1rem 0;
}
.qld-logo { display: inline-block; line-height: 0; }
.qld-logo-img { height: 34px; width: auto; }
.qld-footer .qld-logo-img { filter: brightness(0) invert(1); }  /* logo blanco sobre footer oscuro */
.qld-btn-tienda {
    display: inline-block;
    background: var(--qld-dark);
    color: #fff;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .04em;
    padding: .75rem 1.6rem;
    border-radius: 999px;
    transition: transform .15s ease, background .15s ease;
}
.qld-btn-tienda:hover { background: #000; color: #fff; transform: translateY(-2px); }

/* ---------- Navegación principal oscura ---------- */
.qld-nav {
    background: var(--qld-dark);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow .2s ease;
}
.qld-nav.scrolled { box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.qld-nav .navbar-toggler {
    border-color: rgba(255,255,255,.4);
}
.qld-nav .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}
.qld-menu .nav-link,
.qld-actions .nav-link {
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 1.15rem .95rem;
    position: relative;
}
.qld-menu .nav-link:hover,
.qld-actions .nav-link:hover { color: var(--qld-teal); }
.qld-menu .nav-link.active { color: #fff; }
.qld-menu .nav-link.active::after {
    content: "";
    position: absolute;
    left: .95rem; right: .95rem; bottom: .6rem;
    height: 3px;
    background: var(--qld-teal);
    border-radius: 3px;
}
.qld-actions .nav-link { font-size: 1rem; padding: 1.15rem .6rem; }
.qld-nav .dropdown-menu {
    border: 0;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
    padding: .4rem;
    margin-top: .2rem;
}
.qld-nav .dropdown-item {
    border-radius: 8px;
    font-weight: 500;
    color: var(--qld-dark);
    padding: .5rem .8rem;
}
.qld-nav .dropdown-item:hover { background: #f0fbfa; color: var(--qld-teal-d); }

/* ---------- Hero del post (imagen de fondo + título) ---------- */
.qld-hero {
    background-size: cover;
    background-position: center;
    background-color: var(--qld-dark);
}
.qld-hero__inner {
    background: linear-gradient(rgba(17,34,48,.55), rgba(17,34,48,.78));
    padding: clamp(3rem, 7vw, 6rem) 0;
    text-align: center;
}
.qld-hero__title {
    color: #fff;
    font-weight: 700;
    font-size: clamp(1.8rem, 4.2vw, 3rem);
    line-height: 1.15;
    max-width: 920px;
    margin: 0 auto;
}
.qld-hero__meta {
    color: rgba(255,255,255,.85);
    font-size: .9rem;
    margin-top: 1rem;
}

/* ---------- Zona de contenido ---------- */
.qld-content { padding: 2.5rem 0 3.5rem; }

/* ---------- Tarjetas de post (listado) ---------- */
.qld-post {
    display: flex;
    gap: 1.5rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--qld-line);
}
.qld-post:last-child { border-bottom: 0; }
.qld-post__media {
    flex: 0 0 42%;
    max-width: 42%;
    border-radius: var(--qld-radius);
    overflow: hidden;
    aspect-ratio: 16 / 11;
}
.qld-post__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.qld-post:hover .qld-post__media img { transform: scale(1.05); }
.qld-post__cat {
    color: var(--qld-teal);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.qld-post__cat a { color: inherit; }
.qld-post__title {
    font-size: 1.6rem;
    line-height: 1.2;
    margin: .35rem 0 .6rem;
}
.qld-post__title a { color: var(--qld-dark); transition: color .15s ease; }
.qld-post__title a:hover { color: var(--qld-teal-d); }
.qld-post__excerpt { color: var(--qld-text); margin-bottom: .8rem; }
.qld-more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--qld-teal);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.qld-more i { transition: transform .2s ease; }
.qld-more:hover { color: var(--qld-teal-d); }
.qld-more:hover i { transform: translateX(4px); }

/* ---------- Paginación ---------- */
.qld-pagination .page-link {
    color: var(--qld-dark);
    border-color: var(--qld-line);
    border-radius: 8px !important;
    margin: 0 .15rem;
    font-weight: 600;
}
.qld-pagination .page-item.active .page-link {
    background: var(--qld-teal);
    border-color: var(--qld-teal);
}

/* ---------- Sidebar ---------- */
.qld-search { position: relative; }
.qld-search .form-control {
    border-radius: 999px;
    padding: .8rem 3rem .8rem 1.2rem;
    border-color: var(--qld-line);
}
.qld-search .form-control:focus {
    border-color: var(--qld-teal);
    box-shadow: 0 0 0 .2rem rgba(0,178,163,.15);
}
.qld-search .btn {
    position: absolute;
    right: .35rem; top: 50%;
    transform: translateY(-50%);
    color: var(--qld-teal);
    border: 0; background: transparent;
    font-size: 1.1rem;
}
.qld-search-results {
    position: absolute;
    z-index: 30;
    left: 0; right: 0; top: calc(100% + .4rem);
    background: #fff;
    border: 1px solid var(--qld-line);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(17,34,48,.12);
    max-height: 360px;
    overflow: auto;
    padding: .35rem;
}
.qld-search-item {
    display: block;
    padding: .6rem .7rem;
    border-radius: 10px;
    color: var(--qld-dark);
    line-height: 1.3;
}
.qld-search-item strong { display: block; font-size: .92rem; }
.qld-search-item span {
    display: block;
    font-size: .8rem;
    color: #6b7a85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qld-search-item:hover { background: #f1fbf9; color: var(--qld-dark); }
.qld-search-empty { padding: .7rem; color: #6b7a85; font-size: .88rem; }
.qld-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 2px solid var(--qld-teal);
    border-radius: var(--qld-radius);
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.2rem;
    color: var(--qld-dark);
    font-weight: 600;
    line-height: 1.25;
    transition: background .2s ease, transform .2s ease;
}
.qld-cta:hover { background: #effdfb; transform: translateY(-2px); color: var(--qld-dark); }
.qld-cta-ico {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border: 2px solid var(--qld-teal);
    border-radius: 50%;
    color: var(--qld-teal);
    font-size: 1.5rem;
}
.qld-side-title {
    font-size: 1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--qld-line);
    padding-bottom: .7rem;
    margin: 2rem 0 1.2rem;
}
.qld-reviews li {
    display: flex;
    gap: .9rem;
    align-items: center;
    padding: .65rem 0;
    border-bottom: 1px solid var(--qld-line);
}
.qld-reviews li:last-child { border-bottom: 0; }
.qld-reviews img {
    flex: 0 0 64px;
    width: 64px; height: 48px;
    object-fit: cover;
    border-radius: 8px;
}
.qld-reviews a {
    color: var(--qld-dark);
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.25;
}
.qld-reviews a:hover { color: var(--qld-teal-d); }

/* ---------- Footer ---------- */
.qld-footer {
    background: var(--qld-dark);
    color: #aebccb;
    padding: 3rem 0 1.5rem;
    margin-top: 2rem;
}
.qld-footer .qld-logo { color: #fff; }
.qld-footer h4 {
    color: #fff;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.qld-footer a { color: #aebccb; transition: color .15s ease; }
.qld-footer a:hover { color: var(--qld-teal); }
.qld-footer ul { list-style: none; padding: 0; margin: 0; }
.qld-footer li { margin-bottom: .5rem; }
.qld-footer-social a {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    margin-right: .4rem;
    color: #fff;
}
.qld-footer-social a:hover { background: var(--qld-teal); border-color: var(--qld-teal); }
.qld-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 2.2rem; padding-top: 1.2rem;
    font-size: .85rem;
}

/* ---------- Animación de entrada ---------- */
.qld-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.qld-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .qld-menu .nav-link, .qld-actions .nav-link { padding: .6rem .4rem; }
    .qld-menu .nav-link.active::after { display: none; }
    .qld-actions { flex-direction: row; flex-wrap: wrap; margin-top: .5rem; }
}
@media (max-width: 575.98px) {
    .qld-post { flex-direction: column; gap: 1rem; }
    .qld-post__media { flex: 0 0 auto; max-width: 100%; }
    .qld-post__title { font-size: 1.35rem; }
    .qld-btn-tienda { font-size: .68rem; padding: .6rem 1rem; }
    .qld-logo { font-size: 1.5rem; }
}

/* ---------- Listado de categoría + paginación ---------- */
.qld-post__body { flex: 1; min-width: 0; }
.qld-empty { color: var(--qld-text); padding: 1.5rem 0; }
.qld-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    margin-top: 2.5rem;
}
.qld-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 .7rem;
    border-radius: 10px;
    border: 1px solid var(--qld-line);
    color: var(--qld-dark);
    font-weight: 600;
    text-decoration: none;
    transition: all .15s ease;
}
.qld-page:hover { background: #f1fbf9; border-color: var(--qld-teal); color: var(--qld-teal-d); }
.qld-page.current { background: var(--qld-teal); border-color: var(--qld-teal); color: #fff; }
/* ---------- Página de resultados de búsqueda (/blog/buscar/) ---------- */
.qld-search-count {
    color: var(--qld-muted);
    font-size: .9rem;
    margin: 0 0 1.5rem;
}
.qld-search-count strong, .qld-empty strong { color: var(--qld-dark); }
.qld-post__title mark,
.qld-post__excerpt mark,
.qld-search-item mark {
    background: var(--qld-lima);
    color: var(--qld-dark);
    padding: 0 .1em;
    border-radius: 3px;
}
.qld-page-gap {
    display: inline-flex;
    align-items: center;
    min-width: 40px; height: 40px;
    justify-content: center;
    color: var(--qld-muted);
}
/* Pie del desplegable del sidebar: "Ver todos los resultados" */
.qld-search-all {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem .7rem;
    margin-top: .15rem;
    border-top: 1px solid var(--qld-line);
    color: var(--qld-teal);
    font-weight: 700;
    font-size: .82rem;
}
.qld-search-all:hover { color: var(--qld-teal-d); }