/*
Theme Name: Qatech Elementor Pro
Author: Qatech
Description: Tema visual dark-tech, onepage, optimizado para Elementor y consultoría IT & IA.
Version: 1.2
Text Domain: qatech-elementor-pro
*/

/* ===== Variables base ===== */
:root{
  --q-p:#6366f1; --q-p2:#4f46e5; --q-s:#22c55e;
  --q-bg:#020817; --q-bg2:#0f172a; --q-light:#f9fafb;
  --q-text:#e5e7eb; --q-soft:#9ca3af;
}
*{box-sizing:border-box}

/* ===== Utilidad de contenedor ===== */
.qwrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* ===== HEADER (QH) ===== */
.qh-header{
  position:sticky; top:0; z-index:999;
  background:rgba(2,8,23,.96);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom:1px solid rgba(148,163,253,.18);
}
.qh-row{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0}
.qh-brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.qh-logo{width:34px;height:34px;border-radius:12px; background:radial-gradient(circle at 0 0,#22c55e,#6366f1); box-shadow:0 8px 18px rgba(15,23,42,.5)}
.qh-brand-text{display:flex; flex-direction:column; line-height:1.1}
.qh-title{color:#f9fafb; font-size:1.2rem}
.qh-tagline{color:#9ca3af; font-size:.72rem}

/* Toggle mobile sin JS */
.qh-toggle{display:none}
.qh-burger{display:none; cursor:pointer; width:32px; height:28px; gap:5px; flex-direction:column; justify-content:center}
.qh-burger span{display:block; height:2px; background:#d1d5db; border-radius:2px}

/* Nav */
.qh-nav{display:flex; align-items:center; gap:18px}
.qh-menu{display:flex; gap:18px; list-style:none; margin:0; padding:0; font-size:.92rem}
.qh-menu a{color:#d1d5db; text-decoration:none; padding-bottom:4px; border-bottom:2px solid transparent}
.qh-menu a:hover{color:#fff; border-bottom-color:#6366f1}
.qh-cta .qh-btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:999px;
  background:linear-gradient(90deg,#6366f1,#4f46e5); color:#fff; font-weight:600; font-size:.82rem;
  box-shadow:0 10px 26px rgba(79,70,229,.45); text-decoration:none;
}

/* Mobile behavior */
@media (max-width: 960px){
  .qh-burger{display:flex}
  .qh-nav{
    position:absolute; left:0; right:0; top:100%; background:#0b1020;
    border-bottom:1px solid rgba(148,163,253,.18);
    display:grid; gap:12px; padding:12px 24px; transform-origin:top; transform:scaleY(0); opacity:0; pointer-events:none;
  }
  .qh-menu{flex-direction:column; gap:10px}
  .qh-cta{padding-bottom:8px}
  #qh-toggle:checked ~ .qh-nav{transform:scaleY(1); opacity:1; pointer-events:auto}
}

/* Que el header sticky no tape los anchors */
[id]{scroll-margin-top:90px}

/* ===== FOOTER (QF) ===== */
.qf-footer{background:#020817; color:#9ca3af; border-top:1px solid rgba(75,85,99,.6); padding:34px 0 18px; font-size:.88rem}
.qf-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:26px; margin-bottom:14px}
.qf-brand{display:flex; align-items:center; gap:12px}
.qf-logo{width:28px; height:28px; border-radius:10px; background:radial-gradient(circle at 0 0,#22c55e,#6366f1)}
.qf-sub{font-size:.74rem; color:#6b7280}
.qf-desc{margin-top:8px}
.qf-title{color:#e5e7eb; font-weight:600; margin-bottom:6px}
.qf-list{list-style:none; margin:0; padding:0}
.qf-list li{margin-bottom:6px}
.qf-list a{color:#6b7280; text-decoration:none}
.qf-list a:hover{color:#e5e7eb}
.qf-bottom{text-align:center; color:#6b7280; font-size:.8rem}
@media (max-width:820px){.qf-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.qf-grid{grid-template-columns:1fr}}

/* ===== LANDING (QV) ===== */
.qv{font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--q-text)}
.qv a{text-decoration:none}
.qv .container{max-width:1240px;margin:0 auto;padding:0 24px}

/* HERO */
.qv .hero{position:relative;padding:88px 0 70px;overflow:hidden;background:
 radial-gradient(circle at top left, rgba(99,102,241,.25), transparent 60%),
 radial-gradient(circle at top right, rgba(34,197,94,.14), transparent 55%),
 var(--q-bg)}
.qv .hero-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1.3fr);gap:40px;align-items:center}
.qv .label{display:inline-flex;gap:8px;padding:4px 12px;border-radius:999px;border:1px solid rgba(148,163,253,.35);background:rgba(6,8,18,.98);color:var(--q-soft);font-size:.72rem}
.qv .label b{color:var(--q-s)}
.qv .h1{margin:14px 0 8px;font-size:2.5rem;line-height:1.08;font-weight:750;color:#fff}
.qv .sub{color:var(--q-soft);max-width:560px}
.qv .pills{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.qv .pill{padding:4px 10px;border-radius:999px;border:1px solid rgba(148,163,253,.35);color:var(--q-soft);font-size:.72rem;background:rgba(9,11,20,.96)}
.qv .cta{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.qv .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;font-weight:600;font-size:.86rem}
.qv .btn--primary{background:linear-gradient(90deg,var(--q-p),var(--q-p2));color:#fff;box-shadow:0 16px 40px rgba(79,70,229,.45)}
.qv .btn--ghost{border:1px solid rgba(148,163,253,.55);color:#e5e7eb}
.qv .meta{display:flex;flex-wrap:wrap;gap:16px;color:#6b7280;font-size:.76rem;margin-top:8px}
.qv .stack{display:grid;gap:10px}
.qv .card-hero{background:linear-gradient(180deg, rgba(148,163,253,.12),transparent),rgba(6,8,18,.98);border:1px solid rgba(75,85,99,.9);border-radius:20px;padding:14px;color:var(--q-soft);box-shadow:0 14px 38px rgba(2,8,23,.45)}
.qv .card-hero h6{margin:0 0 4px;color:#9ca3af;font-size:.78rem}
.qv .metric{color:var(--q-s);font-weight:700;font-size:1.35rem;margin:4px 0}

/* Secciones */
.qv .section{padding:64px 0 44px}
.qv .light{background:var(--q-light);color:#111827}
.qv .dark{background:var(--q-bg2);color:var(--q-text)}
.qv .title{position:relative;display:inline-block;margin:0 0 8px;font-size:1.7rem}
.qv .title:after{content:"";position:absolute;left:0;bottom:-6px;width:56%;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--q-p),var(--q-s));opacity:.9}
.qv .lead{color:#6b7280}

/* Grids */
.qv .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.qv .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:980px){.qv .hero-grid{grid-template-columns:1fr}.qv .g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.qv .g3,.qv .g4{grid-template-columns:1fr}}

/* Cards y elementos */
.qv .card{border-radius:18px;padding:18px 16px;background:#fff;border:1px solid rgba(17,24,39,.08);box-shadow:0 16px 44px rgba(15,23,42,.08)}
.qv .dark .card{background:linear-gradient(180deg, rgba(99,102,241,.1),transparent),#020817;border:1px solid rgba(75,85,99,.9);color:var(--q-soft)}
.qv .badge{display:inline-block;padding:5px 10px;border-radius:999px;border:1px solid rgba(148,163,253,.35);background:rgba(99,102,241,.06);color:#4f46e5;font-size:.68rem;margin-bottom:8px}
.qv .benefit{display:flex;gap:10px;align-items:flex-start;color:inherit}
.qv .dot{margin-top:6px;width:10px;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--q-p),var(--q-s));flex:0 0 10px}

/* Casos */
.qv .case{border-radius:16px;padding:16px;background:#fff;border:1px solid rgba(17,24,39,.08);box-shadow:0 16px 44px rgba(15,23,42,.08)}
.qv .dark .case{background:rgba(2,8,23,.75);border:1px solid rgba(148,163,253,.2);color:var(--q-soft)}

/* Metodología */
.qv .step{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;background:rgba(6,8,18,.95);border:1px solid rgba(75,85,99,.65);color:var(--q-soft)}
.qv .num{min-width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--q-p),var(--q-s));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}

/* Recursos */
.qv .resource{border-radius:16px;padding:16px;background:#0a0f1f;border:1px solid rgba(99,102,241,.2);color:var(--q-soft)}
.qv .resource h4{color:#e5e7eb;margin:0 0 6px}

/* Contacto */
.qv .panel{background:#0b1020;border:1px solid rgba(148,163,253,.18);border-radius:20px;padding:18px;display:grid;gap:22px;grid-template-columns:1.2fr 1.8fr}
@media (max-width:860px){.qv .panel{grid-template-columns:1fr}}

/* Trustbar + CTA band */
.qv .trust{padding:26px 0}
.qv .logos{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:center;opacity:.95}
.qv .logos img{display:inline-block;height:28px;margin:0 6px;background:transparent}
.qv .cta-band{background:radial-gradient(circle at 20% -10%, rgba(99,102,241,.25),transparent 55%),#0b1020;border:1px solid rgba(148,163,253,.2);border-radius:20px;padding:22px;display:flex;gap:12px;align-items:center;justify-content:space-between;box-shadow:0 20px 56px rgba(2,8,23,.45)}

/* ===== Cambios solicitados previos ===== */
/* 1) Fuentes header y footer = Inter */
.qh-header, .qh-header *,
.qf-footer, .qf-footer * {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
.qh-title { font-weight: 700; }
.qh-tagline, .qh-menu a, .qf-list a, .qf-sub { font-weight: 500; }
.qh-cta .qh-btn { font-weight: 600; }

/* 2) Claim del CTA-band en blanco */
.qv .cta-band h3 { color: #fff !important; }

/* 3) Texto del bloque de contacto en blanco */
#contacto .panel,
#contacto .panel p,
#contacto .panel strong,
#contacto .panel small,
#contacto .panel a {
  color: #fff !important;
}

/* ===== FULL-BLEED DARK / SIN BORDES BLANCOS ===== */
html, body { background: #020817 !important; }
body { margin: 0 !important; overflow-x: hidden; }

/* Estira a viewport completo para eliminar halos/blancos en laterales y top/bottom */
.qv .hero,
.qv .section,
.qh-header,
.qf-footer {
  width: 100vw; position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
}

/* Sustituye “claro” por oscuro suave para consistencia full-bleed */
.qv .light { background: #0b1020 !important; color: #e5e7eb; }
.qv .lead { color: #9ca3af; }

.qv .light .card {
  background: #0f172a;
  border-color: rgba(148,163,253,.16);
  color: #cbd5e1;
  box-shadow: 0 16px 44px rgba(2,8,23,.35);
}
.qv .light .badge { background: rgba(99,102,241,.14); color: #a5b4fc; border-color: rgba(148,163,253,.35); }

/* ===== POLISH extra ===== */
.qv .section + .section.dark { border-top: 1px solid rgba(148,163,253,.08); }
.site-main { background: transparent; }