/* Quantum Fly Web — stylesheet (v2, dark/resend-inspired redesign) */

:root {
  --bg: #060608;
  --bg-elevated: #0c0d12;
  --bg-elevated-2: #14151d;
  --ink: #f4f5fa;
  --ink-soft: #b6b8ca;
  --muted: #82849c;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Blue + near-black only, no purple — matches accounting.quantumflyweb.com's #3B82F6 primary. */
  --primary: #3b82f6;
  --secondary: #1d4ed8;
  --accent: #22d3ee;
  --black-fill: #0c0d12;

  --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --gradient-radial: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.22), transparent 60%);

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
  --shadow-sm: 0 14px 40px -20px rgba(0, 0, 0, 0.6);
  --glow: 0 0 0 1px rgba(59, 130, 246, 0.15), 0 20px 60px -20px rgba(59, 130, 246, 0.35);

  --font-heading: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink-soft);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--ink);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

p { color: var(--ink-soft); }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--primary); color: #fff; padding: 10px 16px; z-index: 200;
}
.skip-link:focus { left: 10px; top: 10px; }

/* Eyebrow tag — small uppercase label with a leading dot, resend-style. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.tag::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gradient);
  flex-shrink: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: rgba(59, 130, 246, 0.08);
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2), 0 16px 34px -14px rgba(59, 130, 246, 0.45);
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--border-strong);
}
.btn-outline:hover { background: var(--bg-elevated); border-color: var(--primary); transform: translateY(-2px); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border: 1.5px solid var(--border);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--border-strong); transform: translateY(-2px); }
.btn-lg { padding: 16px 30px; font-size: 16px; }
.btn-sm { padding: 9px 18px; font-size: 14px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6, 6, 8, 0.75);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-weight: 700; font-size: 17px;
  color: var(--ink);
}
.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a {
  font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
  transition: color 0.15s ease;
}
.main-nav a:hover { color: var(--ink); }

/* "Empresa" dropdown — click-toggled (not hover-only, so it works the same on touch and
   desktop) via .open on .nav-dropdown, added/removed in main.js. */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
  transition: color 0.15s ease;
}
.nav-dropdown-trigger:hover, .nav-dropdown.open .nav-dropdown-trigger { color: var(--ink); }
.nav-dropdown-trigger::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.nav-dropdown.open .nav-dropdown-trigger::after { transform: rotate(-135deg); margin-top: 2px; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 18px); left: 50%;
  min-width: 190px; transform: translateX(-50%) translateY(-6px);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px;
  padding: 8px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
}
.nav-dropdown-menu a:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 18px; }

.lang-switch {
  display: flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 600;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 6px;
}
.lang-btn {
  background: transparent; border: none; cursor: pointer;
  padding: 5px 10px; border-radius: 999px;
  color: var(--muted); font-weight: 600; font-size: 13px;
  transition: all 0.15s ease;
}
.lang-btn.active { background: var(--gradient); color: #fff; }
.lang-sep { color: var(--border-strong); font-size: 12px; }

.menu-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 34px; height: 34px; background: none; border: none; cursor: pointer;
}
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

/* Hero */
.hero {
  position: relative;
  background: var(--bg);
  color: #fff;
  overflow: hidden;
  padding: 130px 0 100px;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg .orb {
  position: absolute; border-radius: 50%;
  filter: blur(110px); opacity: 0.35;
}
.orb-1 { width: 560px; height: 560px; background: var(--primary); top: -220px; left: -160px; }
.orb-2 { width: 480px; height: 480px; background: var(--secondary); bottom: -220px; right: -140px; }
.grid-overlay {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.hero-inner { position: relative; z-index: 1; max-width: 460px; }
.hero h1 {
  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
  margin-bottom: 22px;
  /* Holographic foil effect: a light-blue/cyan/white gradient that slowly shifts across the
     text, rather than flat white — ties the headline visually to the plane/palette below it. */
  background: linear-gradient(120deg, #ffffff 0%, #a8c5ff 22%, #7dd3fc 45%, #ffffff 68%, #a8c5ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hologram-shift 7s ease-in-out infinite;
}
@keyframes hologram-shift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 { animation: none; }
}
.hero-subtitle { color: var(--ink-soft); font-size: 17px; max-width: 560px; margin-bottom: 34px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 64px; }
.hero-stats { display: flex; gap: 44px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; }
.stat-num {
  font-family: var(--font-heading); font-size: 26px; font-weight: 700;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { font-size: 12.5px; color: var(--muted); }

/* 3D plane hero visual — canvas mount point, replaces the old hero-visual photo. Positioned
   with clearance from .hero-inner (max-width 460px) toward the right side, floored at 16px so
   it always stays fully inside the viewport instead of clipping off the right edge on common
   laptop widths (1280-1440px). */
.hero-3d {
  position: absolute;
  right: max(16px, calc((100% - 1180px) / 2 - 40px));
  top: 50%;
  transform: translateY(-50%);
  width: min(560px, 42vw);
  height: 640px;
  z-index: 1;
  pointer-events: none;
}
.hero-3d canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 1300px) {
  .hero-3d { width: min(480px, 38vw); }
}
@media (max-width: 1080px) {
  .hero-3d { display: none; }
}

/* Section shared */
section { padding: 110px 0; }
.section-head { max-width: 640px; margin: 0 auto 60px; text-align: center; }
.section-head .tag { margin-left: auto; margin-right: auto; }
.section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin-bottom: 16px; }
.section-head p { font-size: 16px; }

/* Services */
.services { background: var(--bg); border-top: 1px solid var(--border); }
.service-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-bottom: 76px;
}
.service-card {
  background: var(--bg-elevated); border-radius: var(--radius); padding: 40px 34px;
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.service-card--primary { border-top: 2px solid var(--primary); }
.service-card--secondary { border-top: 2px solid var(--secondary); }
.badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--primary); background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 22px;
}
.badge--alt { color: var(--accent); background: rgba(34, 211, 238, 0.1); border-color: rgba(34, 211, 238, 0.25); }
.service-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--black-fill); color: var(--primary);
  border: 1px solid rgba(59, 130, 246, 0.3);
  margin-bottom: 22px;
}
.service-icon--alt { color: var(--accent); border-color: rgba(34, 211, 238, 0.3); }
.service-card h3 { font-size: 21px; margin-bottom: 12px; }
.service-card > p { margin-bottom: 24px; }
.feature-list { list-style: none; margin-bottom: 28px; flex-grow: 1; }
.feature-list li {
  position: relative; padding-left: 26px; margin-bottom: 13px;
  font-size: 14.5px; color: var(--ink-soft);
}
.feature-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--primary); font-weight: 700;
}
.service-card--secondary .feature-list li::before { color: var(--secondary); }
.service-card .btn { align-self: flex-start; }

.process h3 { text-align: center; font-size: 21px; margin-bottom: 40px; color: var(--ink); }
.process-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
}
.process-step {
  background: var(--bg-elevated); border-radius: var(--radius-sm); padding: 26px 18px;
  text-align: center; border: 1px solid var(--border);
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--black-fill); color: var(--primary); font-weight: 700; font-size: 13px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  margin-bottom: 16px;
}
.process-step h4 { font-size: 14.5px; margin-bottom: 8px; color: var(--ink); }
.process-step p { font-size: 12.8px; }
.timing-note { text-align: center; margin-top: 32px; font-size: 13.5px; color: var(--muted); }

/* Product spotlight — QuantumFly Accounting cross-promo, styled as a distinct highlighted
   panel (subtle blue border glow) rather than blending into the regular section rhythm, since
   this is meant to read as "also check out our own product," not just another service. */
.product-spotlight { background: var(--bg); }
.product-spotlight-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  background: var(--bg-elevated);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 28px;
  padding: 56px;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.08), 0 40px 80px -40px rgba(59, 130, 246, 0.25);
}
.product-spotlight-text h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 16px; }
.product-spotlight-text p { font-size: 15.5px; margin-bottom: 24px; }
.product-spotlight-text .feature-list { margin-bottom: 30px; }
.browser-frame {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}
.browser-frame-bar {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg); padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.browser-frame-bar span:not(.browser-frame-url) {
  width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.15);
}
.browser-frame-url {
  margin-left: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  background: rgba(255, 255, 255, 0.04); padding: 4px 10px; border-radius: 6px;
}
.browser-frame img { width: 100%; display: block; }
@media (max-width: 980px) {
  .product-spotlight-inner { grid-template-columns: 1fr; padding: 36px 28px; gap: 36px; }
}

/* About */
.about { background: var(--bg-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.about-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.about-text p { margin-bottom: 16px; font-size: 15.5px; }
.values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.value-card {
  background: var(--bg); border-radius: var(--radius-sm); padding: 24px;
  border: 1px solid var(--border);
}
.value-icon { font-size: 24px; margin-bottom: 12px; }
.value-card h4 { font-size: 15px; margin-bottom: 8px; color: var(--ink); }
.value-card p { font-size: 13.5px; }

/* Portfolio */
.portfolio { background: var(--bg); }
.portfolio-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.portfolio-card {
  background: var(--bg-elevated); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: block;
}
.portfolio-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.portfolio-card--live { cursor: pointer; }
.portfolio-visual {
  height: 150px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.portfolio-visual span {
  font-family: var(--font-heading); font-size: 44px; font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
}
.portfolio-visual--photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.9) brightness(0.92);
}
.portfolio-visual .portfolio-real-badge {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  color: var(--bg); background: var(--ink);
  padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.portfolio-link {
  display: inline-block; margin-top: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--primary);
}
.portfolio-card--live:hover .portfolio-link { text-decoration: underline; }
.grad-1 .portfolio-visual { background: linear-gradient(135deg, #1d3a8a, #0e7490); }
.grad-2 .portfolio-visual { background: linear-gradient(135deg, #0c1428, #1d4ed8); }
.grad-3 .portfolio-visual { background: linear-gradient(135deg, #0e7490, #1d4ed8); }
.grad-4 .portfolio-visual { background: linear-gradient(135deg, #0a0a0f, #1e3a8a); }
.grad-5 .portfolio-visual { background: linear-gradient(135deg, #1d4ed8, #0a0a0f); }
.grad-6 .portfolio-visual { background: linear-gradient(135deg, #0c1428, #22d3ee); }
.portfolio-body { padding: 22px; }
.tag-sm {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase;
  color: var(--primary); margin-bottom: 10px; letter-spacing: 0.04em;
}
.portfolio-body h4 { font-size: 15.5px; margin-bottom: 8px; color: var(--ink); }
.portfolio-body p { font-size: 13.5px; }
.portfolio-note { text-align: center; margin-top: 36px; font-size: 13px; color: var(--muted); }

/* Testimonials */
.testimonials { background: var(--bg-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.testimonial-card {
  background: var(--bg); border-radius: var(--radius); padding: 30px;
  border: 1px solid var(--border);
}
.stars { color: var(--secondary); letter-spacing: 2px; margin-bottom: 16px; font-size: 14px; }
.testimonial-card > p { font-size: 15px; color: var(--ink-soft); margin-bottom: 22px; font-style: italic; }
.testimonial-person { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gradient); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-heading);
}
.testimonial-person div { display: flex; flex-direction: column; }
.testimonial-person strong { font-size: 14px; color: var(--ink); }
.testimonial-person span { font-size: 12.5px; color: var(--muted); }

/* Contact */
.contact { background: var(--bg); }
.contact-inner {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px;
}
.info-block { margin-top: 34px; }
.info-block h4 { font-size: 15.5px; margin-bottom: 18px; color: var(--ink); }
.info-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.info-list li { display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; }
.info-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; color: var(--primary); letter-spacing: 0.05em; }
.info-list a { color: var(--ink); }
.info-list a:hover { color: var(--primary); }

.contact-form {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px;
}
.form-row { margin-bottom: 18px; display: flex; flex-direction: column; gap: 7px; }
.form-row--half { flex-direction: row; gap: 16px; }
.form-row--half > div { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.form-row label { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.form-row input, .form-row select, .form-row textarea {
  font-family: var(--font-body); font-size: 14.5px;
  padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--bg); color: var(--ink); resize: vertical;
}
.form-row select option { background: var(--bg-elevated); color: var(--ink); }
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--muted); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--primary);
}
.contact-form .btn { width: 100%; margin-top: 6px; }
.form-status { margin-top: 14px; font-size: 14px; text-align: center; min-height: 20px; }
.form-status.success { color: #34d399; }
.form-status.error { color: #f87171; }

/* Footer */
.site-footer { background: var(--bg); color: var(--ink-soft); padding-top: 70px; border-top: 1px solid var(--border); }
.footer-inner {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 50px; border-bottom: 1px solid var(--border);
}
.footer-brand .logo { color: var(--ink); margin-bottom: 14px; }
.footer-brand p { color: var(--muted); font-size: 13.5px; max-width: 260px; }
.footer-col h5 { color: var(--ink); font-size: 13.5px; margin-bottom: 16px; font-weight: 600; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--muted); font-size: 13.5px; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { padding: 22px 0; }
.footer-bottom p { color: var(--muted); font-size: 13px; text-align: center; }
.footer-legal { margin-top: 4px; font-size: 12px; opacity: 0.7; }

/* WhatsApp floating button */
.qfw-whatsapp-btn {
  position: fixed; bottom: 24px; left: 24px; z-index: 999;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -8px rgba(37, 211, 102, 0.6);
  transition: transform 0.2s ease;
}
.qfw-whatsapp-btn:hover { transform: scale(1.06); color: #fff; }
.qfw-whatsapp-btn svg { width: 28px; height: 28px; }

/* Chat widget */
.qfw-chat-toggle {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--gradient); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -8px rgba(59, 130, 246, 0.6);
  transition: transform 0.2s ease;
}
.qfw-chat-toggle:hover { transform: scale(1.06); }
.qfw-chat-toggle svg { width: 26px; height: 26px; }
.qfw-chat-badge {
  position: absolute; top: -2px; right: -2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
}

.qfw-chat-window {
  position: fixed; bottom: 96px; right: 24px; z-index: 999;
  width: 360px; max-width: calc(100vw - 32px);
  height: 500px; max-height: calc(100vh - 140px);
  background: var(--bg-elevated); border-radius: 18px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border);
  transform: translateY(16px) scale(0.98); opacity: 0; pointer-events: none;
  transition: all 0.2s ease;
}
.qfw-chat-window.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

.qfw-chat-header {
  background: var(--bg-elevated-2); color: var(--ink); padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border);
}
.qfw-chat-header .avatar { background: var(--gradient); width: 38px; height: 38px; flex-shrink: 0; }
.qfw-chat-header-text { flex-grow: 1; }
.qfw-chat-header-text strong { display: block; font-size: 14px; }
.qfw-chat-header-text span { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.qfw-chat-header-text span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; }
.qfw-chat-close { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 20px; opacity: 0.8; }
.qfw-chat-close:hover { opacity: 1; }

.qfw-chat-body {
  flex-grow: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px;
  background: var(--bg);
}
.qfw-msg { max-width: 85%; font-size: 13.8px; line-height: 1.5; padding: 10px 14px; border-radius: 14px; white-space: pre-line; }
.qfw-msg-bot { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--ink-soft); align-self: flex-start; border-bottom-left-radius: 4px; }
.qfw-msg-user { background: var(--gradient); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }

.qfw-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; background: var(--bg); }
.qfw-quick-btn {
  background: var(--bg-elevated); border: 1.5px solid var(--primary); color: var(--primary);
  font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer;
}
.qfw-quick-btn:hover { background: rgba(59, 130, 246, 0.1); }

.qfw-chat-input-row {
  display: flex; align-items: center; gap: 10px; padding: 14px;
  border-top: 1px solid var(--border); background: var(--bg-elevated);
}
.qfw-chat-input-row input {
  flex-grow: 1; border: 1.5px solid var(--border); border-radius: 999px;
  padding: 10px 16px; font-size: 13.8px; font-family: var(--font-body);
  background: var(--bg); color: var(--ink);
}
.qfw-chat-input-row input::placeholder { color: var(--muted); }
.qfw-chat-input-row input:focus { outline: none; border-color: var(--primary); }
.qfw-chat-send {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--gradient); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Responsive */
@media (max-width: 980px) {
  .service-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .about-inner { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .contact-inner { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* El menú de escritorio (6 links + botón CTA) necesita bastante ancho;
   lo colapsamos a hamburguesa antes de que quede apretado en tablets. */
@media (max-width: 980px) {
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
  .header-cta { display: none; }
  .site-header.nav-open .main-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--border); padding: 10px 24px 20px;
  }
  .site-header.nav-open .main-nav a { padding: 12px 0; border-bottom: 1px solid var(--border); }
  /* On mobile the dropdown has no room to float — it always renders open, indented,
     inline in the stacked menu instead of needing a second tap. */
  .site-header.nav-open .nav-dropdown-trigger {
    width: 100%; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border);
  }
  .site-header.nav-open .nav-dropdown-menu {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; border: none; background: transparent; padding: 0 0 4px 14px; margin: 0;
  }
  .site-header.nav-open .nav-dropdown-menu a { padding: 10px 0; border-bottom: none; color: var(--muted); }
}

@media (max-width: 760px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: 1fr; }
  .form-row--half { flex-direction: column; }
  .footer-inner { grid-template-columns: 1fr; }
  .qfw-chat-window { right: 12px; left: 12px; width: auto; bottom: 88px; }
  .qfw-chat-toggle { right: 16px; bottom: 16px; }
  .qfw-whatsapp-btn { left: 16px; bottom: 16px; width: 52px; height: 52px; }
  .qfw-whatsapp-btn svg { width: 26px; height: 26px; }
  section { padding: 76px 0; }
  .hero { padding: 110px 0 60px; }
}

@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .hero-stats { gap: 26px; }
  .stat-num { font-size: 23px; }
  .values-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .service-card { padding: 30px 22px; }
  .contact-form { padding: 24px 20px; }
  .testimonial-card { padding: 22px; }
  section { padding: 60px 0; }
  .hero { padding: 100px 0 50px; }
}

.service-card-img {
  margin: -40px -34px 24px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  height: 170px;
  border-bottom: 1px solid var(--border);
}
.service-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9) brightness(0.9); }
@media (max-width: 480px) {
  .service-card-img { margin: -30px -22px 20px; height: 150px; }
}

.about-photo {
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 24px;
  border: 1px solid var(--border);
}
.about-photo img { width: 100%; height: 220px; object-fit: cover; display: block; filter: saturate(0.9) brightness(0.9); }

/* Blog list */
.blog-list { display: grid; gap: 20px; margin-top: 10px; }
.post-card {
  background: var(--bg-elevated); border-radius: var(--radius); border: 1px solid var(--border);
  padding: 32px; display: block; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.post-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.post-card-date { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-bottom: 12px; display: block; }
.post-card h3 { font-size: 20px; margin-bottom: 10px; }
.post-card p { font-size: 14.5px; margin-bottom: 16px; }
.post-card-link { font-size: 13px; font-weight: 600; color: var(--primary); }
.post-card:hover .post-card-link { text-decoration: underline; }

/* Article */
.article-header { padding: 100px 0 40px; }
.article-header .container { max-width: 760px; }
.article-header h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.article-meta { display: flex; gap: 14px; align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 18px; flex-wrap: wrap; }
.article-body { padding: 20px 0 80px; }
.article-body .container { max-width: 760px; }
.article-body h2 { font-size: 24px; margin: 42px 0 16px; }
.article-body h3 { font-size: 18px; margin: 30px 0 12px; color: var(--ink); }
.article-body p { font-size: 16px; margin-bottom: 18px; }
.article-body ul, .article-body ol { margin: 0 0 18px 22px; }
.article-body li { font-size: 16px; color: var(--ink-soft); margin-bottom: 8px; }
.article-body strong { color: var(--ink); }
.article-cta {
  margin-top: 50px; padding: 30px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-elevated); text-align: center;
}
.article-cta p { margin-bottom: 18px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.back-link:hover { color: var(--ink); }

@media (max-width: 480px) {
  .article-header { padding: 90px 0 30px; }
  .post-card { padding: 24px 20px; }
}

/* Team profile */
.team-section { padding: 20px 0 100px; }
.team-list { display: grid; gap: 20px; }
.team-profile {
  display: flex; gap: 28px; align-items: flex-start;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px; max-width: 720px; margin: 0 auto;
}
.team-avatar {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  background: var(--gradient); color: #fff; font-weight: 800; font-size: 22px;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-heading);
}
.team-info h3 { font-size: 19px; margin-bottom: 6px; }
.team-info .tag-sm { margin-bottom: 14px; }
.team-info p { font-size: 14.5px; }
@media (max-width: 600px) {
  .team-profile { flex-direction: column; padding: 26px 22px; }
}