/* ============================================================
   QUIVOXLED · ESTILOS DE LAS PÁGINAS NUEVAS
   (header, cabeceras, tienda, producto, innovación, blog,
    nosotros, contacto, presupuesto, mensajes y WhatsApp)
   Usa los mismos colores que promo-mes.css / oferta-relampago.css
   ============================================================ */
:root {
    --qx-azul: #235ee7;
    --qx-cian: #4ae7fa;
    --qx-oscuro: #0e1526;
    --qx-oscuro-2: #16203a;
    --qx-texto: #1d2433;
    --qx-gris: #6b7385;
    --qx-borde: #e3e8f2;
    --qx-suave: #f5f7fb;
    --qx-verde-wa: #25d366;
    --qx-grad: linear-gradient(90deg, var(--qx-azul) 0%, var(--qx-cian) 100%);
    --qx-radio: 14px;
    --qx-sombra: 0 10px 30px rgba(14, 21, 38, .08);
}

/* ---------- utilidades ---------- */
.qx-grad { background: var(--qx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qx-kicker { display: inline-block; color: var(--qx-azul); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.qx-kicker--claro { color: var(--qx-cian); }
.qx-num { display: inline-block; background: var(--qx-grad); color: #fff; border-radius: 6px; padding: 1px 8px; margin-right: 6px; letter-spacing: 0; }
.qx-h2 { font-size: 34px; font-weight: 800; line-height: 1.2; color: var(--qx-texto); margin-bottom: 18px; }
.qx-h2--claro { color: #fff; }
.qx-h3 { font-size: 22px; font-weight: 700; color: var(--qx-texto); margin-bottom: 18px; }
.qx-lead { font-size: 17px; line-height: 1.7; color: var(--qx-gris); }
.qx-lead--centro { max-width: 820px; margin: 0 auto; }
.qx-lead--claro { color: #c4cad8; }
.qx-nota { font-size: 13px; color: var(--qx-gris); margin-top: 12px; }
.qx-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.qx-titulo-seccion { margin-bottom: 40px; }
.qx-titulo-seccion h2 { font-size: 34px; font-weight: 800; color: var(--qx-texto); margin: 0; }
.qx-titulo-seccion--fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.qx-link { color: var(--qx-azul); font-weight: 600; }
.qx-link:hover { color: var(--qx-oscuro); }

/* ---------- botones ---------- */
.qx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 30px; border-radius: 40px; font-weight: 700; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; border: 2px solid transparent; transition: all .25s ease; cursor: pointer; line-height: 1.2; text-align: center; }
.qx-btn--grad { background: var(--qx-grad); color: #fff !important; box-shadow: 0 8px 22px rgba(35, 94, 231, .3); }
.qx-btn--grad:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(35, 94, 231, .4); }
.qx-btn--ghost { border-color: rgba(255, 255, 255, .6); color: #fff !important; background: transparent; }
.qx-btn--ghost:hover { background: #fff; color: var(--qx-oscuro) !important; }
.qx-btn--borde { border-color: var(--qx-azul); color: var(--qx-azul) !important; background: transparent; }
.qx-btn--borde:hover { background: var(--qx-azul); color: #fff !important; }
.qx-btn--blanco { background: #fff; color: var(--qx-azul) !important; }
.qx-btn--blanco:hover { background: rgba(255, 255, 255, .85); }
.qx-btn--wa { background: var(--qx-verde-wa); color: #fff !important; }
.qx-btn--wa:hover { filter: brightness(.95); }
.qx-btn--chico { padding: 10px 20px; font-size: 12px; }
.qx-btn--bloque { width: 100%; }
.qx-botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.qx-botones--centro { justify-content: center; }
.qx-icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--qx-borde); background: #fff; color: var(--qx-azul); font-size: 20px; display: inline-grid; place-items: center; cursor: pointer; transition: all .2s; }
.qx-icon-btn:hover { background: var(--qx-grad); color: #fff; border-color: transparent; }
.qx-icon-btn--quitar { color: #c0392b; }

/* ---------- header ---------- */
.qx-topbar a { color: inherit; margin-right: 22px; }
.qx-topbar a:hover { color: var(--qx-azul); }
.qx-topbar i, .qx-header .top-link i { margin-right: 4px; }
.qx-header .main-menu > li > a { color: var(--qx-texto); font-weight: 600; font-size: 15px; }
.qx-header .main-menu > li:hover > a, .qx-header .main-menu > li.qx-activo > a { color: var(--qx-azul); }
.qx-header .main-menu > li > a::before, .qx-header .single-mega-item li a::before { background: var(--qx-grad); height: 2px; }
.qx-header .single-mega-item > li:hover > a { color: var(--qx-azul); }
.qx-header .logo img { max-height: 58px; width: auto; }
.qx-mega .single-mega-item { width: 50% !important; }
.qx-mega .mega-menu-link { width: 60%; }
.qx-mega .mega-menu-photo { width: 40%; }
.qx-mega .mega-menu-photo img { width: 100%; height: 230px; object-fit: cover; border-radius: 10px; }

/* ---------- mensajes ---------- */
.qx-mensajes { margin-top: 20px; }
.qx-mensaje { padding: 14px 20px; border-radius: 10px; margin-bottom: 10px; font-weight: 500; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.qx-mensaje a { font-weight: 700; text-decoration: underline; }
.qx-mensaje--success { background: #e7f8ef; color: #17643a; }
.qx-mensaje--error { background: #fdecec; color: #9b2222; }
.qx-mensaje--info, .qx-mensaje--warning { background: #eef4ff; color: #1f3f8f; }

/* ---------- WhatsApp flotante ---------- */
.qx-whatsapp { position: fixed; right: 22px; bottom: 22px; width: 58px; height: 58px; border-radius: 50%; background: var(--qx-verde-wa); color: #fff; display: grid; place-items: center; font-size: 30px; box-shadow: 0 8px 24px rgba(37, 211, 102, .45); z-index: 999; transition: transform .2s; }
.qx-whatsapp:hover { color: #fff; transform: scale(1.08); }

/* ---------- HERO HOME ---------- */
.qx-hero { background: var(--qx-oscuro) url("../img/bg/bg-11.jpg") center / cover no-repeat; position: relative; }
.qx-hero__kicker { color: var(--qx-cian); text-transform: uppercase; letter-spacing: 4px; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.qx-hero__titulo { color: #fff; font-size: 58px !important; line-height: 1.1 !important; font-weight: 800 !important; text-transform: none !important; }
.qx-hero__dest { background: var(--qx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qx-hero__palabras { color: #fff !important; font-size: 26px !important; margin-top: 10px; }
.qx-hero__palabras b { color: var(--qx-cian); }
.qx-hero__sub { color: #d8deea; max-width: 820px; margin: 18px auto 0; font-size: 17px; line-height: 1.7; }
.qx-hero__botones { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px !important; }

/* ---------- ¿Por qué elegir? ---------- */
.qx-porque { padding: 80px 0; background: var(--qx-suave); }
.qx-porque--blanco { background: #fff; }
.qx-porque__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.qx-porque__item { background: #fff; border-radius: var(--qx-radio); padding: 32px 26px; box-shadow: var(--qx-sombra); border-top: 4px solid transparent; border-image: var(--qx-grad) 1; transition: transform .25s; }
.qx-porque--blanco .qx-porque__item { background: var(--qx-suave); box-shadow: none; }
.qx-porque__item:hover { transform: translateY(-6px); }
.qx-porque__icono { width: 54px; height: 54px; border-radius: 14px; background: var(--qx-grad); color: #fff; display: grid; place-items: center; font-size: 26px; margin-bottom: 18px; }
.qx-porque__item h3 { font-size: 18px; font-weight: 700; color: var(--qx-texto); margin-bottom: 10px; line-height: 1.35; }
.qx-porque__item p { font-size: 14px; color: var(--qx-gris); line-height: 1.7; margin: 0; }

/* ---------- grillas y tarjetas de producto ---------- */
.qx-destacados, .qx-blog-home { padding: 80px 0; }
.qx-blog-home { background: var(--qx-suave); }
.qx-grid { display: grid; gap: 26px; }
.qx-grid--3 { grid-template-columns: repeat(3, 1fr); }
.qx-grid--4 { grid-template-columns: repeat(4, 1fr); }
.qx-card { background: #fff; border: 1px solid var(--qx-borde); border-radius: var(--qx-radio); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; }
.qx-card:hover { box-shadow: var(--qx-sombra); transform: translateY(-4px); }
.qx-card__img { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--qx-suave); overflow: hidden; }
.qx-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.qx-card:hover .qx-card__img img { transform: scale(1.05); }
.qx-badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--qx-grad); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 5px 12px; border-radius: 20px; }
.qx-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.qx-card__cat { font-size: 12px; color: var(--qx-azul); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.qx-card__titulo { font-size: 16px; font-weight: 700; line-height: 1.4; margin-bottom: 12px; }
.qx-card__titulo a { color: var(--qx-texto); }
.qx-card__titulo a:hover { color: var(--qx-azul); }
.qx-chips { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.qx-chips li { background: var(--qx-suave); color: var(--qx-gris); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.qx-chips--grande li { font-size: 13px; padding: 7px 14px; color: var(--qx-texto); }
.qx-chips--grande i { color: var(--qx-azul); margin-right: 4px; }
.qx-card__pie { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--qx-borde); padding-top: 14px; }
.qx-card__pie form { margin: 0; }
.qx-precio { margin: 0; font-size: 18px; font-weight: 800; color: var(--qx-texto); }
.qx-precio del { color: var(--qx-gris); font-size: 13px; font-weight: 400; }
.qx-precio small { font-size: 12px; color: var(--qx-gris); font-weight: 500; }
.qx-precio--consultar { font-size: 14px; color: var(--qx-azul); }

/* ---------- cabecera de páginas internas ---------- */
.qx-cabecera { background: var(--qx-oscuro); background-image: radial-gradient(circle at 85% 20%, rgba(74, 231, 250, .16) 0%, transparent 45%), radial-gradient(circle at 10% 90%, rgba(35, 94, 231, .25) 0%, transparent 50%); padding: 70px 0 60px; color: #fff; position: relative; overflow: hidden; }
.qx-cabecera--imagen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 21, 38, .96) 35%, rgba(14, 21, 38, .55)), var(--qx-cabecera-img) center / cover; z-index: 0; }
.qx-cabecera .container { position: relative; z-index: 1; }
.qx-cabecera .qx-kicker { color: var(--qx-cian); }
.qx-cabecera__titulo { color: #fff; font-size: 42px; font-weight: 800; line-height: 1.15; max-width: 900px; margin-bottom: 14px; }
.qx-cabecera__sub { color: #c4cad8; font-size: 16px; line-height: 1.7; max-width: 860px; margin: 0; }
.qx-migas { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: #9aa3b8; }
.qx-migas li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.qx-migas a { color: #c4cad8; }
.qx-migas a:hover { color: var(--qx-cian); }
.qx-migas--oscuro { color: var(--qx-gris); }
.qx-migas--oscuro a { color: var(--qx-texto); }
.qx-migas-barra { background: var(--qx-suave); padding: 16px 0 2px; }

/* ---------- tienda ---------- */
.qx-tienda { padding: 60px 0 80px; }
.qx-filtros { position: sticky; top: 20px; }
.qx-buscador { display: flex; border: 1px solid var(--qx-borde); border-radius: 40px; overflow: hidden; background: #fff; margin-bottom: 28px; }
.qx-buscador input { border: 0; padding: 12px 18px; flex: 1; min-width: 0; background: transparent; height: auto; margin: 0; }
.qx-buscador button { border: 0; background: var(--qx-grad); color: #fff; width: 50px; font-size: 18px; }
.qx-buscador--chico { max-width: 320px; margin-bottom: 0; }
.qx-buscador--centro { max-width: 460px; margin: 26px auto 0; }
.qx-filtros__titulo { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--qx-texto); margin: 0 0 12px; }
.qx-filtros__lista { list-style: none; padding: 0; margin: 0 0 28px; }
.qx-filtros__lista a { display: flex; justify-content: space-between; padding: 9px 14px; border-radius: 8px; color: var(--qx-texto); font-size: 14px; }
.qx-filtros__lista a span { color: var(--qx-gris); font-size: 12px; background: var(--qx-suave); border-radius: 10px; padding: 1px 8px; }
.qx-filtros__lista li.activo a, .qx-filtros__lista a:hover { background: var(--qx-suave); color: var(--qx-azul); font-weight: 700; }
.qx-filtros__chips { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.qx-filtros__chips a { display: inline-block; padding: 7px 16px; border: 1px solid var(--qx-borde); border-radius: 20px; font-size: 13px; color: var(--qx-texto); font-weight: 600; }
.qx-filtros__chips a.activo, .qx-filtros__chips a:hover { background: var(--qx-grad); border-color: transparent; color: #fff; }
.qx-ayuda { background: var(--qx-oscuro); color: #c4cad8; border-radius: var(--qx-radio); padding: 26px 22px; }
.qx-ayuda i { font-size: 32px; color: var(--qx-cian); }
.qx-ayuda h6 { color: #fff; font-size: 17px; font-weight: 700; margin: 10px 0 8px; }
.qx-ayuda p { font-size: 13px; line-height: 1.6; }
.qx-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--qx-suave); border-radius: 10px; padding: 12px 18px; margin-bottom: 26px; }
.qx-barra__total { margin: 0; color: var(--qx-gris); font-size: 14px; }
.qx-barra__orden { display: flex; align-items: center; gap: 8px; margin: 0; }
.qx-barra__orden label { margin: 0; font-size: 13px; color: var(--qx-gris); }
.qx-barra__orden select { border: 1px solid var(--qx-borde); border-radius: 8px; padding: 6px 10px; background: #fff; height: auto; width: auto; margin: 0; }
.qx-paginacion { display: flex; justify-content: center; gap: 8px; margin-top: 44px; }
.qx-paginacion a, .qx-paginacion span { min-width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--qx-borde); color: var(--qx-texto); font-weight: 700; }
.qx-paginacion .activo { background: var(--qx-grad); color: #fff; border-color: transparent; }
.qx-paginacion__gap { border: 0 !important; }
.qx-vacio { text-align: center; padding: 60px 20px; background: var(--qx-suave); border-radius: var(--qx-radio); }
.qx-vacio > i { font-size: 54px; color: var(--qx-azul); }
.qx-vacio h4 { margin: 14px 0 10px; font-weight: 700; }
.qx-vacio p { color: var(--qx-gris); margin-bottom: 22px; }

/* ---------- producto ---------- */
.qx-producto { padding: 40px 0 80px; }
.qx-galeria__principal { position: relative; border-radius: var(--qx-radio); overflow: hidden; background: var(--qx-suave); aspect-ratio: 1 / 1; border: 1px solid var(--qx-borde); }
.qx-galeria__principal img { width: 100%; height: 100%; object-fit: contain; transition: opacity .2s; }
.qx-galeria__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
.qx-galeria__thumbs button { border: 2px solid transparent; border-radius: 10px; padding: 0; overflow: hidden; background: var(--qx-suave); aspect-ratio: 1 / 1; cursor: pointer; }
.qx-galeria__thumbs button.activo { border-color: var(--qx-azul); }
.qx-galeria__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.qx-producto__titulo { font-size: 32px; font-weight: 800; line-height: 1.25; color: var(--qx-texto); margin-bottom: 16px; }
.qx-producto__resumen { font-size: 16px; line-height: 1.7; color: var(--qx-gris); }
.qx-producto__precio { background: var(--qx-suave); border-radius: 12px; padding: 16px 20px; margin: 22px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.qx-producto__precio strong { font-size: 24px; color: var(--qx-texto); }
.qx-producto__precio del { color: var(--qx-gris); }
.qx-producto__precio span { font-size: 13px; color: var(--qx-gris); }
.qx-cotizar__campos label { display: block; width: 100%; margin-bottom: 14px; }
.qx-cotizar__campos span { display: block; font-size: 13px; font-weight: 700; color: var(--qx-texto); margin-bottom: 6px; }
.qx-cotizar__campos input { width: 100%; border: 1px solid var(--qx-borde); border-radius: 10px; padding: 12px 14px; height: auto; margin: 0; }
.qx-cotizar__botones { display: flex; flex-wrap: wrap; gap: 12px; }
.qx-cotizar__ok { margin-top: 12px; color: #17643a; font-size: 14px; }
.qx-cotizar__ok a { font-weight: 700; text-decoration: underline; }
.qx-puntos { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.qx-puntos li { display: flex; gap: 12px; align-items: flex-start; }
.qx-puntos li > i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--qx-grad); color: #fff; display: grid; place-items: center; font-size: 14px; margin-top: 2px; }
.qx-puntos strong { display: block; color: var(--qx-texto); font-size: 15px; }
.qx-puntos span { font-size: 14px; color: var(--qx-gris); line-height: 1.6; }
.qx-tabs { margin-top: 60px; }
.qx-tabs__nav { display: flex; gap: 6px; border-bottom: 2px solid var(--qx-borde); overflow-x: auto; }
.qx-tabs__nav button { border: 0; background: transparent; padding: 14px 22px; font-weight: 700; color: var(--qx-gris); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; cursor: pointer; }
.qx-tabs__nav button.activo { color: var(--qx-azul); border-bottom-color: var(--qx-azul); }
.qx-tabs__panel { display: none; padding: 30px 0; }
.qx-tabs__panel.activo { display: block; }
.qx-ficha { width: 100%; max-width: 860px; border-collapse: collapse; font-size: 15px; }
.qx-ficha th, .qx-ficha td { padding: 12px 16px; border-bottom: 1px solid var(--qx-borde); text-align: left; vertical-align: top; }
.qx-ficha th { width: 38%; color: var(--qx-gris); font-weight: 600; background: var(--qx-suave); }
.qx-ficha td { color: var(--qx-texto); font-weight: 500; }
.qx-imgs-desc { max-width: 760px; margin: 0 auto; display: grid; gap: 0; }
.qx-imgs-desc img { width: 100%; display: block; }
.qx-videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.qx-videos video { width: 100%; border-radius: var(--qx-radio); background: #000; aspect-ratio: 16 / 9; }
.qx-cta-banda { background: var(--qx-grad); border-radius: var(--qx-radio); color: #fff; padding: 34px 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 30px; }
.qx-cta-banda h3 { color: #fff; font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.qx-cta-banda p { margin: 0; opacity: .92; max-width: 640px; }
.qx-cta-banda--margen { margin: 20px 0 80px; }
.qx-relacionados { padding: 60px 0 0; }
.qx-relacionados--fondo { background: var(--qx-suave); padding: 60px 0; margin-top: 60px; }

/* ---------- prosa (HTML del CMS) ---------- */
.qx-prosa { font-size: 16px; line-height: 1.8; color: #3b4356; }
.qx-prosa p { margin-bottom: 16px; }
.qx-prosa h3 { font-size: 22px; font-weight: 800; color: var(--qx-texto); margin: 34px 0 12px; }
.qx-prosa ul { padding-left: 0; list-style: none; margin-bottom: 18px; }
.qx-prosa ul li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.qx-prosa ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--qx-grad); }
.qx-prosa a { color: var(--qx-azul); font-weight: 600; text-decoration: underline; }
.qx-prosa strong { color: var(--qx-texto); }
.qx-prosa--claro, .qx-prosa--claro strong { color: #c4cad8; }
.qx-prosa--claro strong { color: #fff; }
.qx-prosa--grande { font-size: 18px; }
.qx-prosa--articulo { font-size: 17px; }

/* ---------- innovación ---------- */
.qx-inno-hero { background: var(--qx-oscuro); position: relative; padding: 110px 0 100px; color: #fff; overflow: hidden; }
.qx-inno-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 21, 38, .97) 40%, rgba(14, 21, 38, .6)), var(--qx-hero-img, none) center / cover; }
.qx-inno-hero .container { position: relative; }
.qx-inno-hero h1 { color: #fff; font-size: 50px; font-weight: 800; line-height: 1.12; max-width: 900px; }
.qx-inno-hero__sub { color: #c4cad8; font-size: 18px; line-height: 1.7; max-width: 760px; margin-top: 20px; }
.qx-inno-sec { padding: 90px 0; }
.qx-inno-sec--eco { background: linear-gradient(180deg, #f2fbf8 0%, #fff 100%); }
.qx-inno-sec--eco .qx-kicker { color: #12946b; }
.qx-inno-sec--eco .qx-num { background: linear-gradient(90deg, #12946b, #4ae7c0); }
.qx-inno-sec--oscura { background: var(--qx-oscuro); background-image: radial-gradient(circle at 85% 20%, rgba(74, 231, 250, .12) 0%, transparent 45%), radial-gradient(circle at 10% 90%, rgba(35, 94, 231, .18) 0%, transparent 45%); }
.qx-solucion { border-left: 4px solid var(--qx-azul); background: var(--qx-suave); padding: 18px 22px; border-radius: 0 12px 12px 0; margin-top: 24px; }
.qx-solucion p:last-child { margin: 0; }
.qx-antes-ahora { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.qx-antes-ahora__item { border-radius: var(--qx-radio); padding: 22px; background: #fdf0f0; }
.qx-antes-ahora__item span { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #b23b3b; }
.qx-antes-ahora__item p { margin: 8px 0 0; color: var(--qx-texto); font-size: 14px; line-height: 1.6; }
.qx-antes-ahora__item--ahora { background: var(--qx-grad); }
.qx-antes-ahora__item--ahora span, .qx-antes-ahora__item--ahora p { color: #fff; }
.qx-inno-img { width: 100%; border-radius: var(--qx-radio); max-height: 340px; object-fit: cover; }
.qx-pregunta { display: inline-block; margin-top: 22px; font-weight: 700; color: var(--qx-texto); font-size: 18px; }
.qx-feature { background: #fff; border-radius: var(--qx-radio); padding: 32px 28px; box-shadow: var(--qx-sombra); }
.qx-feature__icono { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #12946b, #4ae7c0); color: #fff; display: grid; place-items: center; font-size: 26px; margin-bottom: 18px; }
.qx-feature h3 { font-size: 19px; font-weight: 700; color: var(--qx-texto); margin-bottom: 10px; }
.qx-feature p { color: var(--qx-gris); font-size: 15px; line-height: 1.7; margin: 0; }
.qx-aportes { display: grid; gap: 16px; }
.qx-aporte { display: flex; gap: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--qx-radio); padding: 22px; }
.qx-aporte__icono { flex: none; width: 50px; height: 50px; border-radius: 12px; background: var(--qx-grad); color: #fff; display: grid; place-items: center; font-size: 22px; }
.qx-aporte h3 { color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.qx-aporte p { color: #aeb6c9; font-size: 14px; line-height: 1.6; margin: 0; }
.qx-roadmap { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: paso; position: relative; }
.qx-roadmap::before { content: ""; position: absolute; top: 22px; left: 5%; right: 5%; height: 3px; background: var(--qx-borde); }
.qx-roadmap__paso { position: relative; padding-top: 62px; counter-increment: paso; }
.qx-roadmap__paso::before { content: counter(paso); position: absolute; top: 0; left: 0; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 3px solid var(--qx-borde); display: grid; place-items: center; font-weight: 800; color: var(--qx-gris); }
.qx-roadmap__paso--hecho::before { background: var(--qx-grad); border-color: transparent; color: #fff; content: "✓"; }
.qx-roadmap__paso--en-curso::before { border-color: var(--qx-azul); color: var(--qx-azul); box-shadow: 0 0 0 6px rgba(35, 94, 231, .15); }
.qx-roadmap__estado { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--qx-gris); }
.qx-roadmap__paso--hecho .qx-roadmap__estado { color: #12946b; }
.qx-roadmap__paso--en-curso .qx-roadmap__estado { color: var(--qx-azul); }
.qx-roadmap h3 { font-size: 17px; font-weight: 700; color: var(--qx-texto); margin: 6px 0 8px; }
.qx-roadmap p { font-size: 14px; color: var(--qx-gris); line-height: 1.6; }

/* ---------- blog ---------- */
.qx-blog { padding: 50px 0 80px; }
.qx-blog__filtros { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 34px; }
.qx-blog__filtros .qx-filtros__chips { margin: 0; }
.qx-post { background: #fff; border-radius: var(--qx-radio); overflow: hidden; border: 1px solid var(--qx-borde); display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; }
.qx-post:hover { box-shadow: var(--qx-sombra); transform: translateY(-4px); }
.qx-post__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--qx-suave); }
.qx-post__img img { width: 100%; height: 100%; object-fit: cover; }
.qx-post__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.qx-post__fecha { font-size: 13px; color: var(--qx-gris); margin-bottom: 8px; }
.qx-post__titulo { font-size: 18px; font-weight: 800; line-height: 1.35; margin-bottom: 10px; }
.qx-post__titulo a { color: var(--qx-texto); }
.qx-post__titulo a:hover { color: var(--qx-azul); }
.qx-post__resumen { color: var(--qx-gris); font-size: 14px; line-height: 1.7; }
.qx-post .qx-link { margin-top: auto; }
.qx-post-destacado { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--qx-oscuro); border-radius: var(--qx-radio); overflow: hidden; margin-bottom: 34px; }
.qx-post-destacado__img img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }
.qx-post-destacado__body { padding: 44px; color: #c4cad8; display: flex; flex-direction: column; justify-content: center; }
.qx-post-destacado__body .qx-kicker { color: var(--qx-cian); }
.qx-post-destacado__body h2 { font-size: 28px; font-weight: 800; line-height: 1.3; margin-bottom: 14px; }
.qx-post-destacado__body h2 a { color: #fff; }
.qx-post-destacado__body p { line-height: 1.7; margin-bottom: 24px; }
.qx-post-destacado__body .qx-btn { align-self: flex-start; }
.qx-articulo__cabecera { background: var(--qx-suave); padding: 40px 0 90px; }
.qx-articulo__ancho { max-width: 860px; }
.qx-articulo__cabecera h1 { font-size: 40px; font-weight: 800; line-height: 1.2; color: var(--qx-texto); }
.qx-articulo__meta { display: flex; gap: 22px; color: var(--qx-gris); font-size: 14px; margin-top: 14px; }
.qx-articulo__portada { max-width: 1060px; margin-top: -60px; }
.qx-articulo__portada img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--qx-radio); box-shadow: var(--qx-sombra); }
.qx-articulo__bajada { font-size: 20px; line-height: 1.6; color: var(--qx-texto); font-weight: 500; margin: 40px 0 26px; padding-left: 18px; border-left: 4px solid var(--qx-azul); }
.qx-articulo__tags { margin-top: 30px; }
.qx-compartir { display: flex; align-items: center; gap: 10px; margin: 26px 0; padding: 18px 0; border-top: 1px solid var(--qx-borde); border-bottom: 1px solid var(--qx-borde); }
.qx-compartir span { font-weight: 700; color: var(--qx-texto); margin-right: 6px; }
.qx-compartir a { width: 40px; height: 40px; border-radius: 50%; background: var(--qx-suave); color: var(--qx-azul); display: grid; place-items: center; font-size: 20px; }
.qx-compartir a:hover { background: var(--qx-grad); color: #fff; }
.qx-articulo__nav { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.qx-articulo__nav a { flex: 1; max-width: 48%; color: var(--qx-texto); font-weight: 700; line-height: 1.4; }
.qx-articulo__nav a small { display: block; color: var(--qx-azul); font-weight: 600; margin-bottom: 4px; }
.qx-articulo__nav a.der { text-align: right; margin-left: auto; }

/* ---------- nosotros ---------- */
.qx-nosotros { padding: 80px 0; }
.qx-nosotros__img { width: 100%; border-radius: var(--qx-radio); box-shadow: var(--qx-sombra); max-height: 460px; object-fit: cover; }
.qx-cifras { background: var(--qx-grad); padding: 50px 0; }
.qx-cifras__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; color: #fff; }
.qx-cifras__grid strong { display: block; font-size: 40px; font-weight: 800; line-height: 1.1; }
.qx-cifras__grid span { opacity: .9; font-size: 14px; }

/* ---------- contacto / formularios ---------- */
.qx-contacto, .qx-presupuesto { padding: 60px 0 80px; }
.qx-contacto__datos { display: grid; gap: 14px; }
.qx-dato { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border: 1px solid var(--qx-borde); border-radius: var(--qx-radio); color: var(--qx-texto); background: #fff; transition: all .2s; }
a.qx-dato:hover { border-color: var(--qx-azul); box-shadow: var(--qx-sombra); color: var(--qx-texto); }
.qx-dato > i { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--qx-grad); color: #fff; display: grid; place-items: center; font-size: 22px; }
.qx-dato--wa > i { background: var(--qx-verde-wa); }
.qx-dato small { display: block; color: var(--qx-gris); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.qx-dato strong { display: block; font-size: 15px; word-break: break-word; }
.qx-dato span { display: block; font-size: 13px; color: var(--qx-gris); }
.qx-form { background: #fff; }
.qx-form--caja { border: 1px solid var(--qx-borde); border-radius: var(--qx-radio); padding: 28px; box-shadow: var(--qx-sombra); position: sticky; top: 20px; }
.qx-form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qx-campo { margin-bottom: 14px; }
.qx-campo label { display: block; font-size: 13px; font-weight: 700; color: var(--qx-texto); margin-bottom: 6px; }
.qx-campo input, .qx-campo select, .qx-campo textarea, .qx-item__campos input { width: 100%; border: 1px solid var(--qx-borde); border-radius: 10px; padding: 12px 14px; font-size: 15px; background: #fff; height: auto; margin: 0; color: var(--qx-texto); }
.qx-campo input:focus, .qx-campo select:focus, .qx-campo textarea:focus, .qx-item__campos input:focus { outline: none; border-color: var(--qx-azul); box-shadow: 0 0 0 3px rgba(35, 94, 231, .12); }
.qx-campo.error input, .qx-campo.error textarea { border-color: #d64545; }
.qx-campo .errorlist { list-style: none; padding: 0; margin: 4px 0 0; color: #d64545; font-size: 13px; }
.qx-mapa iframe { width: 100%; height: 380px; border: 0; margin-top: 60px; display: block; }
.qx-items { display: grid; gap: 14px; }
.qx-item { display: grid; grid-template-columns: 90px 1fr auto; gap: 16px; align-items: center; border: 1px solid var(--qx-borde); border-radius: var(--qx-radio); padding: 14px; }
.qx-item__img { display: block; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--qx-suave); }
.qx-item__img img { width: 100%; height: 100%; object-fit: cover; }
.qx-item__nombre { display: block; font-weight: 700; color: var(--qx-texto); line-height: 1.35; }
.qx-item__body small { color: var(--qx-gris); }
.qx-item__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.qx-item__campos input { padding: 9px 12px; font-size: 14px; }
.qx-items__acciones { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.qx-gracias { padding: 110px 0; }
.qx-gracias__icono { width: 90px; height: 90px; border-radius: 50%; background: var(--qx-grad); color: #fff; display: inline-grid; place-items: center; font-size: 46px; margin-bottom: 24px; }
.qx-gracias h1 { font-size: 36px; font-weight: 800; color: var(--qx-texto); }
.qx-gracias p { color: var(--qx-gris); font-size: 16px; line-height: 1.7; }
.qx-404 { font-size: 120px; font-weight: 900; line-height: 1; margin: 0; background: var(--qx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- footer ---------- */
.qx-footer-texto { color: var(--qx-gris); margin: 14px 0 0; letter-spacing: 1px; font-size: 13px; }
.qx-footer-contacto { list-style: none; padding: 0; margin: 18px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 26px; font-size: 14px; }
.qx-footer-contacto a { color: var(--qx-gris); }
.qx-footer-contacto a:hover { color: var(--qx-azul); }
.footer-social-2 .whatsapp:hover { background: var(--qx-verde-wa); }

/* ============================================================ RESPONSIVE */
@media (max-width: 1199.98px) {
    .qx-grid--4 { grid-template-columns: repeat(3, 1fr); }
    .qx-porque__grid { grid-template-columns: repeat(2, 1fr); }
    .qx-roadmap { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
    .qx-roadmap::before { display: none; }
}
@media (max-width: 991.98px) {
    .qx-grid--3, .qx-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .qx-hero__titulo { font-size: 42px !important; }
    .qx-inno-hero h1 { font-size: 38px; }
    .qx-cabecera__titulo, .qx-articulo__cabecera h1 { font-size: 32px; }
    .qx-post-destacado { grid-template-columns: 1fr; }
    .qx-post-destacado__img img { min-height: 240px; max-height: 320px; }
    .qx-post-destacado__body { padding: 30px; }
    .qx-filtros { position: static; margin-top: 30px; }
    .qx-form--caja { position: static; }
    .qx-cifras__grid { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
    .qx-videos { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .qx-titulo-seccion h2, .qx-h2 { font-size: 26px; }
    .qx-hero__titulo { font-size: 32px !important; }
    .qx-hero__palabras { font-size: 20px !important; }
    .qx-hero__sub { font-size: 15px; }
    .qx-porque__grid, .qx-roadmap, .qx-antes-ahora { grid-template-columns: 1fr; }
    .qx-producto__titulo { font-size: 24px; }
    .qx-galeria__thumbs { grid-template-columns: repeat(4, 1fr); }
    .qx-form__fila, .qx-item__campos { grid-template-columns: 1fr; }
    .qx-cta-banda { padding: 26px; }
    .qx-inno-hero { padding: 70px 0; }
    .qx-inno-hero h1 { font-size: 30px; }
    .qx-inno-sec { padding: 60px 0; }
    .qx-articulo__nav { flex-direction: column; }
    .qx-articulo__nav a { max-width: 100%; }
    .qx-articulo__nav a.der { text-align: left; margin-left: 0; }
    .qx-topbar { display: none; }
    .qx-item { grid-template-columns: 64px 1fr auto; }
}
@media (max-width: 575.98px) {
    .qx-grid--3, .qx-grid--4 { grid-template-columns: 1fr; }
    .qx-cabecera { padding: 46px 0 40px; }
    .qx-cabecera__titulo, .qx-articulo__cabecera h1 { font-size: 26px; }
    .qx-btn { padding: 13px 22px; }
    .qx-cotizar__botones .qx-btn { width: 100%; }
}

/* ---------- ajustes sobre estilos base del theme (p a 13px gris) ---------- */
.qx-prosa p, .qx-prosa li { font-size: inherit; line-height: inherit; color: inherit; }
.qx-cta-banda p { color: rgba(255, 255, 255, .92); font-size: 15px; line-height: 1.6; }
.qx-ayuda p { color: #aeb6c9; }
.qx-post-destacado__body p { color: #c4cad8; font-size: 15px; line-height: 1.7; }
.qx-feature p, .qx-porque__item p, .qx-aporte p, .qx-roadmap p, .qx-antes-ahora__item p, .qx-post__resumen { line-height: 1.7; }
.qx-cabecera__sub, .qx-inno-hero__sub, .qx-lead { line-height: 1.7; }
.qx-tabs__nav button, .qx-paginacion, .qx-btn, .qx-campo input, .qx-campo select, .qx-campo textarea { font-family: inherit; }
.qx-tabs__nav button { font-size: 15px; }

/* En mobile el theme deja flotando el header/menú: las secciones con overflow:hidden
   quedaban con ancho 0. clear:both las baja debajo de los floats. */
.qx-cabecera, .qx-inno-hero, .qx-migas-barra, .qx-articulo, .qx-mensajes, .qx-gracias, .qx-tienda,
.qx-producto, .qx-contacto, .qx-presupuesto, .qx-blog, .qx-nosotros, .qx-hero, .presentacion-empresa { clear: both; }

/* ============================================================
   HEADER NEGRO Y FIJO (se queda arriba al bajar la página)
   - La barra superior (teléfono/email) se va con el scroll;
     la banda del menú queda fija.
   - Al bajar, la banda se achica un poco (clase .qx-scrolled, JS en quivox-paginas.js)
   ============================================================ */
.qx-header {
    position: sticky;
    top: 0;               /* el JS lo ajusta a -alto de la barra superior */
    z-index: 9990;
}
.qx-header .header-middle-area {
    background: #0b0f1a;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    transition: box-shadow .3s ease;
}
.qx-header.qx-scrolled .header-middle-area { box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.qx-header .main-menu > li { transition: padding .3s ease; }
.qx-header.qx-scrolled .main-menu > li { padding: 30px 0; }
.qx-header .logo img { transition: max-height .3s ease; }
.qx-header.qx-scrolled .logo img { max-height: 46px; }

/* Links del menú en blanco */
.qx-header .main-menu > li > a { color: #ffffff; }
.qx-header .main-menu > li:hover > a,
.qx-header .main-menu > li.qx-activo > a { color: var(--qx-cian); }

/* Lupa y presupuesto en blanco */
.qx-header .search-toggle,
.qx-header .search-toggle i,
.qx-header .cart-toggler a,
.qx-header .cart-quantity,
.qx-header .cart-icon i { color: #ffffff; }
.qx-header .search-toggle { background: transparent; }
.qx-header .cart-toggler a:hover .cart-icon i,
.qx-header .search-toggle:hover i { color: var(--qx-cian); }

/* Celular / tablet: el menú del theme (barra "MENU") queda fijo arriba */
@media (max-width: 991.98px) {
    .qx-header { position: relative; top: auto !important; }
    .mobile-menu-area { position: sticky; top: 0; z-index: 9990; clear: both; }
    .qx-header .header-middle-area { padding-bottom: 10px; }
}

/* ============================================================
   "¿POR QUÉ ELEGIR QUIVOXLED?" CON IMAGEN DE FONDO (inicio)
   Imagen: la de la sección en SWH (home / por_que › Imagen);
   si no tiene, usa img/bg/porque-fondo.jpg
   ============================================================ */
.qx-porque--fondo {
    position: relative;
    background: #0b0f1a var(--qx-porque-img, url("../img/bg/porque-fondo.jpg")) center / cover no-repeat fixed;
    padding: 100px 0;
}
.qx-porque--fondo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 15, 26, .72) 0%, rgba(14, 21, 38, .48) 50%, rgba(11, 15, 26, .75) 100%);
}
.qx-porque--fondo .container { position: relative; z-index: 1; }
.qx-porque--fondo .qx-titulo-seccion h2 { color: #ffffff; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.qx-porque--fondo .qx-kicker { color: var(--qx-cian); }
.qx-porque--fondo .qx-porque__item { box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
/* en celulares el "fixed" se ve mal: fondo normal */
@media (max-width: 991.98px) {
    .qx-porque--fondo { background-attachment: scroll; padding: 70px 0; }
}

/* ============================================================
   RITMO DE COLOR DEL INICIO (para que la parte de abajo no sea toda blanca)
   destacados (celeste suave) → oferta relámpago (oscuro) → nuevos (claro)
   → blog (celeste) → newsletter (degradé azul) → footer (negro, como el menú)
   ============================================================ */
.qx-destacados {
    background:
        radial-gradient(circle at 1px 1px, rgba(35, 94, 231, .10) 1px, transparent 0) 0 0 / 22px 22px,
        linear-gradient(180deg, #eef3fc 0%, #f7f9fe 100%);
}
.qx-blog-home {
    background: linear-gradient(180deg, #e8f0fc 0%, #f2f7fe 100%);
}

/* Newsletter: degradé de marca, texto blanco */
.newsletter-section.section-bg-tb { margin: 0; padding: 70px 0 80px !important; }
.newsletter-section.section-bg-tb::before {
    background: linear-gradient(90deg, #235ee7 0%, #4ae7fa 100%);
    transform: none;
}
.newsletter-section .newsletter-title { color: #ffffff; }
.newsletter-section .newsletter-info p { color: rgba(255, 255, 255, .9); }
.newsletter-section .subcribe input {
    background: #ffffff;
    border: 0;
    border-radius: 40px 0 0 40px;
    padding-left: 22px;
    color: var(--qx-texto);
}
.newsletter-section .subcribe .submit-btn-2 {
    background: #0b0f1a;
    color: #ffffff;
    border: 0;
    border-radius: 0 40px 40px 0;
    font-weight: 700;
}
.newsletter-section .subcribe .submit-btn-2:hover { background: #16203a; color: var(--qx-cian); }

/* Footer negro, igual que el menú */
.footer-area.footer-2 .footer-top-2 { background: #0b0f1a; }
.footer-area.footer-2 .footer-menu-2 li a { color: #c4cad8; }
.footer-area.footer-2 .footer-menu-2 li a:hover { color: var(--qx-cian); }
.footer-area.footer-2 .qx-footer-texto { color: #8f98ad; }
.footer-area.footer-2 .qx-footer-contacto a { color: #aeb6c9; }
.footer-area.footer-2 .qx-footer-contacto a:hover { color: var(--qx-cian); }
.footer-area.footer-2 .footer-bottom-2.gray-bg { background: #070a12; border-top: 1px solid rgba(255, 255, 255, .06); }
.footer-area.footer-2 .copyright-text-2 p, .footer-area.footer-2 .copy-text { color: #8f98ad; }
.footer-area.footer-2 .copy-text strong, .footer-area.footer-2 .company-name strong { color: #ffffff; }
.footer-area.footer-2 .footer-social-2 li a { background: rgba(255, 255, 255, .06); color: #c4cad8; }
.footer-area.footer-2 .footer-social-2 li a:hover { color: #ffffff; }