/* =========================================================================
 *  Astra SEO Local BCN - Theme CSS
 *  Dark Tech aesthetic · WPO-first · ~12kB minificado · 0 dependencies
 * ====================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  --sl-bg:        #0a0d12;
  --sl-bg-2:      #0f141b;
  --sl-bg-3:      #141b25;
  --sl-line:      rgba(255,255,255,.08);
  --sl-line-2:    rgba(255,255,255,.14);
  --sl-text:      #e6ecf3;
  --sl-text-dim:  #8a95a5;
  --sl-text-mute: #5b6573;
  --sl-accent:    #3df5a0;          /* verde neón */
  --sl-accent-2:  #5eead4;          /* cian */
  --sl-accent-3:  #a78bfa;          /* violeta secundario */
  --sl-danger:    #ff4d6d;
  --sl-radius:    14px;
  --sl-radius-sm: 10px;
  --sl-shadow:    0 20px 60px -20px rgba(61,245,160,.18);
  --sl-mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sl-sans:      -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --sl-container: 1180px;
}

/* ---------- 2. Base reset / Astra overrides ---------- */
html { scroll-behavior: smooth; }
body.ast-theme,
body {
  background: var(--sl-bg);
  color: var(--sl-text);
  font-family: var(--sl-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--sl-accent); color: #0a0d12; }

a { color: var(--sl-accent-2); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--sl-accent); }

img, svg, video { max-width: 100%; height: auto; display: block; }

/* ---------- 3. Layout helpers ---------- */
.sl-container {
  width: 100%;
  max-width: var(--sl-container);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}
.sl-eyebrow {
  font-family: var(--sl-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sl-accent);
  margin: 0 0 16px;
}
.sl-eyebrow::before { content: "// "; opacity: .6; }

.sl-h2 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 48px;
  font-weight: 700;
  color: #fff;
}
.sl-h2 .accent { color: var(--sl-accent); }

/* ---------- 4. Header / nav ---------- */
.sl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,13,18,.78);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--sl-line);
}
.sl-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.sl-logo {
  font-family: var(--sl-mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sl-logo__dot {
  width: 10px; height: 10px;
  background: var(--sl-accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--sl-accent);
}
.sl-nav { display: flex; gap: 28px; align-items: center; }
.sl-nav a {
  color: var(--sl-text-dim);
  font-size: 14px;
  font-weight: 500;
}
.sl-nav a:hover, .sl-nav a.is-active { color: #fff; }

/* ---------- 5. Buttons ---------- */
.sl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--sl-sans);
  letter-spacing: .01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  text-decoration: none;
  line-height: 1;
  will-change: transform;
}
.sl-btn--primary {
  background: var(--sl-accent);
  color: #06241a;
  box-shadow: 0 10px 30px -8px rgba(61,245,160,.55);
}
.sl-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -10px rgba(61,245,160,.7);
  color: #06241a;
}
.sl-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: var(--sl-line-2);
}
.sl-btn--ghost:hover {
  background: rgba(255,255,255,.04);
  border-color: var(--sl-accent);
  color: var(--sl-accent);
}
.sl-btn .arr { transition: transform .2s ease; }
.sl-btn:hover .arr { transform: translateX(3px); }

/* ---------- 6. Hero ---------- */
.sl-hero {
  position: relative;
  padding: 120px 0 100px;
  overflow: hidden;
  isolation: isolate;
}
.sl-hero__grid {
  position: absolute;
  inset: -10% -5% 0 -5%;
  background-image:
    linear-gradient(var(--sl-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--sl-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  z-index: -1;
}
.sl-hero::before {
  content: "";
  position: absolute;
  top: -30%; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(61,245,160,.18) 0%, transparent 60%);
  z-index: -2;
  pointer-events: none;
}
.sl-hero__title {
  font-size: clamp(44px, 8vw, 96px);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0 0 18px;
  font-weight: 800;
  color: #fff;
  max-width: 16ch;
}
.sl-hero__title .accent {
  background: linear-gradient(120deg, var(--sl-accent) 0%, var(--sl-accent-2) 60%, var(--sl-accent-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sl-hero__h2 {
  font-size: clamp(29px, 4.6vw, 54px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
  font-weight: 600;
  margin: 0 0 22px;
  max-width: 22ch;
}
.sl-hero__h2 .accent { color: var(--sl-accent); }
.sl-hero__subtitle {
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--sl-text-dim);
  max-width: 56ch;
  margin: 0 0 36px;
}
.sl-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.sl-hero__chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 56px;
}
.sl-chip {
  font-family: var(--sl-mono);
  font-size: 14px;
  color: var(--sl-text-dim);
  padding: 7px 12px;
  border: 1px solid var(--sl-line);
  border-radius: 999px;
  background: rgba(255,255,255,.02);
}
.sl-chip::before { content: "●"; color: var(--sl-accent); margin-right: 6px; font-size: 8px; vertical-align: middle; }

/* ---------- 7. Sections ---------- */
section { padding: 96px 0; }
.sl-services { background: var(--sl-bg); position: relative; }
.sl-metrics  { background: var(--sl-bg-2); border-top: 1px solid var(--sl-line); border-bottom: 1px solid var(--sl-line); padding: 64px 0; }

/* ---------- 8. Grids ---------- */
.sl-grid { display: grid; gap: 20px; }
.sl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sl-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sl-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ---------- 9. Cards ---------- */
.sl-card {
  position: relative;
  background: linear-gradient(180deg, var(--sl-bg-3) 0%, var(--sl-bg-2) 100%);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  padding: 32px 26px;
  transition: transform .25s ease, border-color .2s ease, box-shadow .25s ease;
  overflow: hidden;
}
.sl-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--sl-radius);
  padding: 1px;
  background: linear-gradient(135deg, rgba(61,245,160,.45), transparent 45%);
  -webkit-mask:
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.sl-card:hover {
  transform: translateY(-4px);
  border-color: var(--sl-line-2);
  box-shadow: var(--sl-shadow);
}
.sl-card:hover::after { opacity: 1; }
.sl-card__num {
  font-family: var(--sl-mono);
  font-size: 12px;
  color: var(--sl-accent);
  letter-spacing: .1em;
}
.sl-card__title {
  font-size: 20px;
  margin: 14px 0 10px;
  color: #fff;
  letter-spacing: -.01em;
  font-weight: 600;
}
.sl-card__text {
  color: var(--sl-text-dim);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* ---------- 10. Metrics ---------- */
.sl-metric { text-align: left; }
.sl-metric__num {
  font-family: var(--sl-mono);
  font-size: 28px;
  color: #fff;
  letter-spacing: -.02em;
  font-weight: 700;
  line-height: 1;
}
.sl-metric__num span { color: var(--sl-accent); }
.sl-metric__label {
  color: var(--sl-text-dim);
  font-size: 16px;
  margin-top: 8px;
  max-width: 22ch;
}

/* ---------- 11. CTA band ---------- */
.sl-cta-band {
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(61,245,160,.15) 0%, transparent 70%),
    var(--sl-bg-2);
  border-top: 1px solid var(--sl-line);
  border-bottom: 1px solid var(--sl-line);
  padding: 88px 0;
  text-align: center;
}
.sl-cta-band .sl-h2 { margin-bottom: 28px; }

/* ---------- 12. Footer ---------- */
.sl-footer {
  background: var(--sl-bg);
  border-top: 1px solid var(--sl-line);
  padding: 56px 0 32px;
  font-size: 14px;
  color: var(--sl-text-mute);
}
.sl-footer__cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.sl-footer h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 16px; }
.sl-footer a { color: var(--sl-text-dim); display: block; padding: 4px 0; }
.sl-footer a:hover { color: var(--sl-accent); }
.sl-footer__bottom {
  border-top: 1px solid var(--sl-line);
  padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}

/* ---------- 13. Blog ---------- */
.sl-blog-hero { padding: 80px 0 40px; }
.sl-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sl-post {
  background: var(--sl-bg-2);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  overflow: hidden;
  transition: transform .25s ease, border-color .2s ease;
}
.sl-post:hover { transform: translateY(-3px); border-color: var(--sl-accent); }
.sl-post__cover {
  aspect-ratio: 16/9;
  background:
    linear-gradient(135deg, rgba(61,245,160,.25), rgba(94,234,212,.1) 60%, transparent),
    radial-gradient(circle at 80% 20%, rgba(167,139,250,.25), transparent 50%),
    var(--sl-bg-3);
  position: relative;
}
.sl-post__cover::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--sl-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--sl-line) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .35;
}
.sl-post__body { padding: 22px 22px 26px; }
.sl-post__cat {
  font-family: var(--sl-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sl-accent);
}
.sl-post__title {
  font-size: 19px; line-height: 1.3; margin: 8px 0 12px;
  color: #fff; font-weight: 600; letter-spacing: -.01em;
}
.sl-post__meta { color: var(--sl-text-mute); font-size: 12px; font-family: var(--sl-mono); }

/* ---------- 14. Services detail ---------- */
.sl-service-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: center; padding: 80px 0;
  border-bottom: 1px solid var(--sl-line);
}
.sl-service-row:nth-child(even) > div:first-child { order: 2; }
.sl-service-row h3 { font-size: clamp(24px, 3vw, 34px); color: #fff; margin: 0 0 16px; letter-spacing: -.02em; }
.sl-service-row p { color: var(--sl-text-dim); }
.sl-service-row ul { list-style: none; padding: 0; margin: 18px 0 0; }
.sl-service-row li {
  padding: 8px 0 8px 26px; position: relative; color: var(--sl-text);
  border-bottom: 1px dashed var(--sl-line);
}
.sl-service-row li::before {
  content: "→"; color: var(--sl-accent); position: absolute; left: 0;
  font-family: var(--sl-mono);
}
.sl-service-visual {
  background: var(--sl-bg-2);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  padding: 40px;
  font-family: var(--sl-mono);
  font-size: 13px;
  color: var(--sl-text-dim);
  line-height: 1.8;
}
.sl-service-visual .k { color: var(--sl-accent); }
.sl-service-visual .v { color: #fff; }
.sl-service-visual .c { color: var(--sl-text-mute); }

/* ---------- 15. Case studies ---------- */
.sl-case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sl-case {
  background: var(--sl-bg-2);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  padding: 36px;
  display: flex; flex-direction: column; gap: 20px;
  transition: border-color .2s, transform .2s;
}
.sl-case:hover { border-color: var(--sl-accent); transform: translateY(-3px); }
.sl-case__tag {
  display: inline-flex; gap: 8px; font-family: var(--sl-mono);
  font-size: 11px; color: var(--sl-accent); text-transform: uppercase; letter-spacing: .14em;
}
.sl-case__title { font-size: 24px; color: #fff; margin: 0; letter-spacing: -.01em; font-weight: 600; }
.sl-case__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid var(--sl-line); padding-top: 20px; }
.sl-case__kpi-n { color: var(--sl-accent); font-family: var(--sl-mono); font-size: 22px; font-weight: 700; }
.sl-case__kpi-l { color: var(--sl-text-dim); font-size: 12px; }

/* ---------- 16. Contact ---------- */
.sl-contact { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }
.sl-form { display: grid; gap: 16px; }
.sl-input, .sl-textarea {
  width: 100%;
  background: var(--sl-bg-2);
  border: 1px solid var(--sl-line);
  color: #fff;
  font-family: var(--sl-sans); font-size: 15px;
  padding: 14px 16px;
  border-radius: var(--sl-radius-sm);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sl-input:focus, .sl-textarea:focus {
  border-color: var(--sl-accent);
  box-shadow: 0 0 0 3px rgba(61,245,160,.15);
}
.sl-textarea { min-height: 140px; resize: vertical; }
.sl-contact-info {
  background: var(--sl-bg-2);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  padding: 32px;
}
.sl-contact-info h4 { color: #fff; margin: 0 0 8px; font-size: 16px; }
.sl-contact-info p { color: var(--sl-text-dim); margin: 0 0 24px; }

/* ---------- 17. Team ---------- */
.sl-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sl-person {
  background: var(--sl-bg-2);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  padding: 24px;
  text-align: center;
}
.sl-person__avatar {
  width: 80px; height: 80px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sl-accent), var(--sl-accent-3));
  font-family: var(--sl-mono);
  font-size: 26px; color: #0a0d12;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sl-person h4 { color: #fff; margin: 0 0 4px; font-size: 16px; }
.sl-person p  { color: var(--sl-text-dim); font-size: 13px; margin: 0; }

/* ---------- 18. Process timeline ---------- */
.sl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; }
.sl-step {
  position: relative;
  padding: 28px 22px;
  border-left: 1px solid var(--sl-line);
}
.sl-step:first-child { border-left-color: transparent; }
.sl-step__num {
  font-family: var(--sl-mono);
  color: var(--sl-accent);
  font-size: 13px;
}
.sl-step h4 { color: #fff; margin: 12px 0 8px; font-size: 17px; }
.sl-step p { color: var(--sl-text-dim); font-size: 14px; margin: 0; }

/* ---------- 18.1 Hero USP banner ---------- */
.sl-hero__usp {
  margin-top: 48px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--sl-line-2);
  background: linear-gradient(90deg, rgba(61,245,160,.06), rgba(94,234,212,.02));
  border-radius: 14px;
  color: var(--sl-text-dim);
  font-size: 15px;
  max-width: 640px;
}
.sl-hero__usp-icon {
  flex: 0 0 44px; width: 44px; height: 44px;
  background: var(--sl-accent); color: #06241a;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  box-shadow: 0 8px 24px -8px rgba(61,245,160,.55);
}
.sl-hero__usp .accent { color: var(--sl-accent); font-weight: 600; }

/* ---------- 18.2 Sección Método propio ---------- */
.sl-asset { background: var(--sl-bg); padding: 96px 0; }
.sl-asset__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.sl-tick {
  padding: 10px 0 10px 28px;
  position: relative;
  color: var(--sl-text);
  border-bottom: 1px dashed var(--sl-line);
  font-size: 15px;
}
.sl-tick::before {
  content: "✓"; color: var(--sl-accent);
  position: absolute; left: 0; font-weight: 700; font-family: var(--sl-mono);
}
.sl-asset__visual {
  position: relative;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(61,245,160,.12), transparent 70%),
    linear-gradient(180deg, var(--sl-bg-3), var(--sl-bg-2));
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  padding: 36px;
  overflow: hidden;
}
.sl-asset__visual::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--sl-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--sl-line) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .25;
  pointer-events: none;
}
.sl-asset__badge {
  position: relative; z-index: 1;
  display: inline-flex; gap: 12px; align-items: center;
  padding: 10px 14px;
  background: rgba(10,13,18,.6);
  border: 1px solid var(--sl-line-2);
  border-radius: 12px;
  margin-bottom: 28px;
}
.sl-asset__badge-star {
  width: 36px; height: 36px;
  background: var(--sl-accent);
  color: #06241a;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
}
.sl-asset__counter { position: relative; z-index: 1; margin-bottom: 32px; }
.sl-asset__counter-num {
  font-family: var(--sl-mono);
  font-size: clamp(64px, 9vw, 110px);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  letter-spacing: -.04em;
  background: linear-gradient(140deg, #fff 0%, var(--sl-accent) 60%, var(--sl-accent-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sl-asset__counter-label { color: var(--sl-text-dim); font-family: var(--sl-mono); font-size: 13px; letter-spacing: .1em; }
.sl-asset__stats {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--sl-line);
}
.sl-asset__stats > div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.sl-asset__stats .k { color: var(--sl-text-dim); font-family: var(--sl-mono); font-size: 12px; }
.sl-asset__stats .v { color: var(--sl-accent); font-family: var(--sl-mono); font-weight: 600; }

/* ---------- 18.2b Método propio - visual tipo terminal ---------- */
.sl-method-card {
  position: relative; z-index: 1;
  background: rgba(10,13,18,.7);
  border: 1px solid var(--sl-line-2);
  border-radius: 12px;
  padding: 24px;
  font-family: var(--sl-mono);
  font-size: 13px;
  line-height: 2;
}
.sl-method-row { display: flex; justify-content: space-between; gap: 16px; }
.sl-method-row .k { color: var(--sl-accent); }
.sl-method-row .v { color: #fff; }
.sl-method-row--out {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--sl-line);
}
.sl-method-row--out .v { color: var(--sl-accent); font-weight: 600; }
.sl-method-tags {
  position: relative; z-index: 1;
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 20px;
}
.sl-method-tags span {
  font-family: var(--sl-mono);
  font-size: 11px; color: var(--sl-text-dim);
  padding: 5px 10px;
  border: 1px solid var(--sl-line);
  border-radius: 999px;
  background: rgba(255,255,255,.02);
}

/* ---------- 18.2c Panel propio (mock) ---------- */
.sl-panel {
  background: var(--sl-bg-2);
  border-top: 1px solid var(--sl-line);
  border-bottom: 1px solid var(--sl-line);
  padding: 96px 0;
}
.sl-panel__mock {
  background: linear-gradient(180deg, var(--sl-bg-3), var(--sl-bg));
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
}
.sl-panel__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sl-line);
  background: rgba(0,0,0,.25);
}
.sl-panel__url {
  font-family: var(--sl-mono);
  font-size: 12px; color: var(--sl-text-dim);
}
.sl-panel__user {
  font-family: var(--sl-mono); font-size: 11px;
  color: var(--sl-accent);
  display: inline-flex; gap: 6px; align-items: center;
}
.sl-panel__head {
  padding: 22px 24px 18px;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
}
.sl-panel__label { font-family: var(--sl-mono); font-size: 11px; color: var(--sl-text-mute); letter-spacing: .14em; text-transform: uppercase; }
.sl-panel__title { color: #fff; font-size: 17px; font-weight: 600; margin-top: 4px; }
.sl-panel__live {
  font-family: var(--sl-mono); font-size: 10px;
  background: rgba(61,245,160,.12);
  color: var(--sl-accent);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(61,245,160,.25);
  letter-spacing: .14em;
}
.sl-panel__kpis {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--sl-line);
  border-top: 1px solid var(--sl-line);
  border-bottom: 1px solid var(--sl-line);
}
.sl-panel__kpi {
  background: var(--sl-bg-2);
  padding: 18px 20px;
}
.sl-panel__kpi .kn { font-family: var(--sl-mono); font-size: 26px; color: #fff; font-weight: 700; letter-spacing: -.02em; }
.sl-panel__kpi .kl { color: var(--sl-text-dim); font-size: 12px; margin-top: 4px; }
.sl-panel__chart { padding: 16px 20px; }

/* ---------- 18.3 Timeline / Plan 90 días ---------- */
.sl-timeline { background: var(--sl-bg-2); border-top: 1px solid var(--sl-line); border-bottom: 1px solid var(--sl-line); }
.sl-timeline__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.sl-timeline__track::before {
  content: ""; position: absolute;
  left: 24px; right: 24px; top: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--sl-line), var(--sl-accent), var(--sl-line));
}
.sl-tline {
  background: var(--sl-bg);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  padding: 24px;
  position: relative;
}
.sl-tline::before {
  content: ""; position: absolute;
  top: 28px; left: 24px;
  width: 12px; height: 12px;
  background: var(--sl-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--sl-bg-2), 0 0 12px var(--sl-accent);
}
.sl-tline__when {
  font-family: var(--sl-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sl-accent);
  margin-left: 22px;
  margin-bottom: 18px;
}
.sl-tline h4 { color: #fff; font-size: 17px; margin: 0 0 8px; font-weight: 600; }
.sl-tline p { color: var(--sl-text-dim); font-size: 14px; margin: 0; line-height: 1.55; }

/* ---------- 18.4 Manifiesto / VS ---------- */
.sl-manifesto { background: var(--sl-bg); }
.sl-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sl-vs__col {
  background: var(--sl-bg-2);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  padding: 32px;
}
.sl-vs__col h4 { color: #fff; font-size: 18px; margin: 0 0 20px; font-weight: 600; }
.sl-vs__col ul { list-style: none; padding: 0; margin: 0; }
.sl-vs__col li {
  position: relative;
  padding: 12px 0 12px 32px;
  border-bottom: 1px dashed var(--sl-line);
  color: var(--sl-text-dim);
  font-size: 15px;
  line-height: 1.5;
}
.sl-vs__col li::before {
  position: absolute; left: 0;
  font-family: var(--sl-mono); font-weight: 700;
}
.sl-vs__col li.bad::before  { content: "✕"; color: var(--sl-danger); }
.sl-vs__col li.good::before { content: "✓"; color: var(--sl-accent); }
.sl-vs__col--us {
  background: linear-gradient(180deg, rgba(61,245,160,.06), var(--sl-bg-2));
  border-color: var(--sl-accent);
  box-shadow: 0 20px 60px -30px rgba(61,245,160,.4);
}
.sl-vs__col--us li { color: var(--sl-text); }

/* ---------- 18.5 Proyectos propios ---------- */
.sl-own { background: var(--sl-bg-2); border-top: 1px solid var(--sl-line); border-bottom: 1px solid var(--sl-line); }
.sl-own__card {
  background: var(--sl-bg);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  padding: 28px;
  transition: border-color .2s, transform .2s;
}
.sl-own__card:hover { border-color: var(--sl-accent); transform: translateY(-3px); }
.sl-own__pill {
  display: inline-flex;
  font-family: var(--sl-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sl-accent);
  padding: 5px 10px;
  border: 1px solid var(--sl-line-2);
  border-radius: 999px;
  margin-bottom: 16px;
}
.sl-own__card h3 { color: #fff; font-size: 18px; margin: 0 0 10px; font-weight: 600; letter-spacing: -.01em; }
.sl-own__card p { color: var(--sl-text-dim); font-size: 14px; margin: 0 0 22px; line-height: 1.55; }
.sl-own__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--sl-line); padding-top: 18px; }
.sl-own__kpis .n { color: var(--sl-accent); font-family: var(--sl-mono); font-size: 22px; font-weight: 700; }
.sl-own__kpis .l { color: var(--sl-text-dim); font-size: 12px; }

/* ---------- 18.6 FAQ ---------- */
.sl-faq { background: var(--sl-bg); }
.sl-faq__list { max-width: 820px; margin: 0 auto; }
.sl-faq__item {
  border-bottom: 1px solid var(--sl-line);
  padding: 4px 0;
}
.sl-faq__item summary {
  list-style: none;
  cursor: pointer;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  padding: 22px 36px 22px 0;
  position: relative;
  letter-spacing: -.01em;
  transition: color .15s ease;
}
.sl-faq__item summary::-webkit-details-marker { display: none; }
/* La pregunta es un <h3> dentro del summary: que herede el estilo y no
 * rompa la maquetación del acordeón (sin margen, en línea). */
.sl-faq__q {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1.4;
  color: #fff !important; /* Astra pinta los h3 en gris oscuro; forzamos blanco */
}
.sl-faq__item summary:hover .sl-faq__q { color: var(--sl-accent) !important; }
.sl-faq__item summary::after {
  content: "+";
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  color: var(--sl-accent);
  font-size: 22px;
  font-family: var(--sl-mono);
  transition: transform .2s ease;
}
.sl-faq__item[open] summary::after { content: "−"; }
.sl-faq__item summary:hover { color: var(--sl-accent); }
.sl-faq__item p { color: var(--sl-text-dim); font-size: 15px; line-height: 1.7; margin: 0 0 22px; max-width: 64ch; }

/* ---------- 19. Responsive ---------- */
@media (max-width: 1024px) {
  .sl-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .sl-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .sl-post-grid { grid-template-columns: repeat(2, 1fr); }
  .sl-team { grid-template-columns: repeat(2, 1fr); }
  .sl-footer__cols { grid-template-columns: 1fr 1fr; }
  .sl-service-row { grid-template-columns: 1fr; gap: 24px; }
  .sl-service-row:nth-child(even) > div:first-child { order: unset; }
  .sl-case-grid { grid-template-columns: 1fr; }
  .sl-contact { grid-template-columns: 1fr; }
  .sl-steps { grid-template-columns: 1fr 1fr; }
  .sl-step { border-left: none; border-top: 1px solid var(--sl-line); }
  .sl-step:nth-child(-n+2) { border-top: none; }
  .sl-asset__grid { grid-template-columns: 1fr; gap: 36px; }
  .sl-timeline__track { grid-template-columns: 1fr 1fr; }
  .sl-timeline__track::before { display: none; }
  .sl-vs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  section, .sl-metrics, .sl-asset { padding: 32px 0; }
  .sl-hero { padding: 40px 0 56px; }
  .sl-grid--3, .sl-grid--4 { grid-template-columns: 1fr; }
  .sl-post-grid, .sl-team, .sl-steps { grid-template-columns: 1fr; }
  .sl-step { border-top: 1px solid var(--sl-line); }
  .sl-step:first-child { border-top: none; }
  .sl-footer__cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .sl-nav { display: none; }
  .sl-h2 { margin-bottom: 32px; }
  .sl-timeline__track { grid-template-columns: 1fr; }
  .sl-asset__visual { padding: 24px; }
  .sl-faq__item summary { font-size: 16px; padding-right: 32px; }
}

/* ---------- 20. Reveal on scroll (progressive enhancement) ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 21. Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================================
 *  22. INTEGRACIÓN CON ASTRA (overrides del tema padre)
 *  Astra envuelve el contenido en un contenedor "boxed" con fondo claro y
 *  ancho máximo. Esto anula ese fondo, lo hace full-width y oscurece el
 *  header por defecto para que TODO el sitio se vea dark-tech.
 * ====================================================================== */

/* 22.1 Fondo oscuro en todos los contenedores de Astra */
html,
body,
#page,
#content,
.site-content,
.ast-container,
.ast-container-fluid,
.site-primary-content-wrapper,
#primary,
.content-area,
.site-main,
.sl-main {
  background: var(--sl-bg) !important;
  box-shadow: none !important;
}

/* 22.2 Quitar el ancho máximo y el padding del contenedor para que las
 *      secciones lleguen de borde a borde (cada .sl-container ya centra) */
#content .ast-container,
#primary,
.site-primary-content-wrapper,
.content-area,
.site-main {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* 22.3 El hero necesita su propio fondo (no tenía y se veía el de Astra) */
.sl-hero { background: var(--sl-bg); }

/* 22.3b Astra mete 4em de padding vertical en #primary → hueco muerto
 *       encima del hero. Lo quitamos (el aire lo dan el hero y, en
 *       páginas normales, el padding del artículo en la sección 24.3). */
.ast-separate-container #primary,
.ast-plain-container #primary,
.ast-narrow-container #primary,
#primary {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 22.4 Header por defecto de Astra en modo oscuro */
.site-header,
.ast-primary-header-bar,
.main-header-bar,
.ast-above-header,
.ast-below-header,
header.site-header .main-header-bar {
  background: rgba(10,13,18,.85) !important;
  border-bottom: 1px solid var(--sl-line) !important;
  box-shadow: none !important;
}
.site-title a,
.site-title,
.ast-site-title-wrap a,
.main-header-menu a,
.ast-header-break-point .main-header-menu a,
.main-navigation a,
.site-branding a {
  color: var(--sl-text) !important;
}
.main-header-menu a:hover,
.main-navigation a:hover { color: var(--sl-accent) !important; }
.site-description { color: var(--sl-text-dim) !important; }
/* Icono hamburguesa móvil de Astra */
.ast-mobile-menu-buttons-fill { fill: var(--sl-text) !important; }

/* 22.5 Footer por defecto de Astra en oscuro (por si no usas el custom) */
.site-footer,
.ast-small-footer,
footer.site-footer {
  background: var(--sl-bg-2) !important;
  color: var(--sl-text-dim) !important;
  border-top: 1px solid var(--sl-line) !important;
}
.site-footer a { color: var(--sl-accent-2) !important; }

/* =========================================================================
 *  23. TIPOGRAFÍA DEL CONTENIDO (páginas y entradas normales de WordPress)
 *  Astra colorea el texto y los títulos con tonos oscuros pensados para
 *  fondo claro. Sobre el dark se leen mal. Esto los pasa a colores legibles
 *  y aplica a TODO el contenido que crees con el editor (páginas servicio,
 *  posts del blog, página de ejemplo, etc.).
 * ====================================================================== */

/* 23.1 Títulos de página / entrada (el H1 que se veía casi negro) */
.entry-title,
.entry-title a,
.ast-archive-title,
.page-title,
.ast-single-post .entry-title,
h1.entry-title {
  color: #fff !important;
}

/* 23.2 Cuerpo de texto y encabezados dentro del contenido */
.entry-content,
.ast-article-single,
.ast-article-post,
.entry-content p,
.entry-content li,
.entry-content td,
.ast-content,
.site-content article {
  color: var(--sl-text) !important;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 { color: #fff !important; }

/* 23.3 Enlaces dentro del contenido */
.entry-content a { color: var(--sl-accent-2) !important; }
.entry-content a:hover { color: var(--sl-accent) !important; }

/* 23.4 Citas / testimonios (blockquote) — legibles y con barra de acento */
.entry-content blockquote,
blockquote {
  color: var(--sl-text-dim) !important;
  border-left: 3px solid var(--sl-accent) !important;
  background: var(--sl-bg-2) !important;
  padding: 18px 24px !important;
  border-radius: var(--sl-radius-sm);
}
.entry-content blockquote p { color: var(--sl-text-dim) !important; }

/* 23.5 Metadatos, fechas y textos secundarios de Astra */
.ast-author-name,
.posted-on,
.ast-blog-single-element,
.entry-meta,
.entry-meta a { color: var(--sl-text-dim) !important; }

/* 23.6 Tablas, código y líneas divisorias */
.entry-content hr { border-color: var(--sl-line) !important; }
.entry-content code,
.entry-content pre {
  background: var(--sl-bg-3) !important;
  color: var(--sl-accent-2) !important;
  border: 1px solid var(--sl-line) !important;
}

/* =========================================================================
 *  24. PÁGINAS / ENTRADAS NORMALES: columna centrada y legible
 *  Como el contenedor es full-width (para el home), el contenido normal
 *  quedaba pegado a la izquierda. Esto le devuelve una columna centrada
 *  con aire. NO afecta a front-page.php (usa sus propios .sl-container).
 * ====================================================================== */

/* 24.1 Título de página/entrada centrado */
.entry-header,
.ast-single-post .entry-header,
.ast-archive-description { text-align: center !important; }
.entry-title,
.ast-archive-title,
.page-title { text-align: center !important; }

/* 24.2 Columna centrada con padding para el header y el contenido */
.entry-header,
.entry-content,
.ast-article-single,
.ast-article-post,
.ast-pagination,
.comments-area {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* 24.3 Un poco de aire arriba para que el H1 no quede pegado al header */
.ast-article-single,
.ast-article-post { padding-top: 64px !important; padding-bottom: 64px !important; }

/* =========================================================================
 *  25. MENÚ MÓVIL (hamburguesa) en modo oscuro
 *  Astra deja el desplegable/off-canvas con fondo blanco y texto gris.
 *  Esto lo adapta a la paleta dark-tech. Cubre tanto el menú clásico
 *  desplegable como el off-canvas (popup) de versiones recientes de Astra.
 * ====================================================================== */

/* 25.1 Fondo del contenedor del menú móvil (clásico + off-canvas) */
.main-header-menu,
.ast-builder-menu-mobile .main-header-menu,
.ast-mobile-popup-drawer .ast-mobile-popup-content,
.ast-mobile-popup-drawer .main-header-menu,
#ast-mobile-popup,
.ast-mobile-popup-inner,
.ast-mobile-header-content,
.main-navigation .menu-toggle + .main-header-menu {
  background: var(--sl-bg-2) !important;
  border-color: var(--sl-line) !important;
}

/* 25.2 Enlaces del menú móvil */
.main-header-menu .menu-item a,
.main-header-menu .menu-link,
.ast-builder-menu-mobile .menu-item a,
.ast-mobile-popup-drawer .menu-item a,
.ast-mobile-popup-drawer .menu-link,
.ast-mobile-header-content .menu-item a {
  color: var(--sl-text) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--sl-line) !important;
}
.main-header-menu .menu-item a:hover,
.ast-mobile-popup-drawer .menu-item a:hover,
.main-header-menu .current-menu-item > a,
.ast-mobile-popup-drawer .current-menu-item > a {
  color: var(--sl-accent) !important;
  background: rgba(61,245,160,.06) !important;
}

/* 25.3 Submenús */
.main-header-menu .sub-menu,
.ast-mobile-popup-drawer .sub-menu {
  background: var(--sl-bg-3) !important;
  border-color: var(--sl-line) !important;
}

/* 25.4 Botón hamburguesa: borde e icono en color del diseño */
.ast-mobile-menu-trigger-fill,
.ast-mobile-menu-trigger-minimal,
.menu-toggle {
  color: var(--sl-text) !important;
  border-color: var(--sl-line) !important;
  background: transparent !important;
}
.ast-mobile-menu-buttons-fill,
.menu-toggle .ast-mobile-svg,
.ast-button-wrap .mobile-menu-wrap svg { fill: var(--sl-text) !important; }
/* Icono de cerrar (X) del off-canvas */
.ast-mobile-popup-drawer .menu-toggle-close,
.ast-mobile-popup-header .menu-toggle-close { color: var(--sl-text) !important; }

/* 25.5 Cabecera del off-canvas (logo/título dentro del popup) */
.ast-mobile-popup-header { background: var(--sl-bg) !important; border-bottom: 1px solid var(--sl-line) !important; }

/* =========================================================================
 *  26. SECCIÓN "POR QUÉ ELEGIRME" (bloque editorial)
 * ====================================================================== */
.sl-why { background: var(--sl-bg); }
.sl-why .sl-h2 { max-width: 22ch; margin-bottom: 36px; }
.sl-prose { max-width: 70ch; }
.sl-prose p {
  color: var(--sl-text-dim);
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 20px;
}
.sl-prose p:last-child { margin-bottom: 0; }
.sl-prose strong { color: var(--sl-text); font-weight: 600; }
.sl-prose h3 {
  color: #fff;
  font-size: clamp(24px, 2.6vw, 27px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 44px 0 20px;
  padding-top: 28px;
  border-top: 1px solid var(--sl-line);
  max-width: 28ch;
}

/* =========================================================================
 *  27. SECCIÓN SERVICIOS (resultados reales) con iconos
 * ====================================================================== */
.sl-svc {
  background: var(--sl-bg-2);
  border-top: 1px solid var(--sl-line);
  border-bottom: 1px solid var(--sl-line);
}
.sl-svc .sl-h2 { max-width: 24ch; margin-bottom: 24px; }
.sl-svc__intro { max-width: 68ch; margin-bottom: 44px; }
.sl-svc__intro p {
  color: var(--sl-text-dim);
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 14px;
}
.sl-svc__intro p:last-child { margin-bottom: 0; }

.sl-svc__list { display: flex; flex-direction: column; gap: 20px; }
.sl-svc__item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 22px;
  padding: 30px;
  background: var(--sl-bg);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  transition: border-color .2s ease, transform .2s ease;
}
.sl-svc__item:hover {
  border-color: var(--sl-line-2);
  transform: translateY(-2px);
}
.sl-svc__icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sl-accent);
  background: rgba(61,245,160,.08);
  border: 1px solid rgba(61,245,160,.22);
}
.sl-svc__icon svg { width: 28px; height: 28px; display: block; }
.sl-svc__body h3 {
  color: #fff;
  font-size: clamp(24px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 4px 0 14px;
}
.sl-svc__body p {
  color: var(--sl-text-dim);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 14px;
}
.sl-svc__body p:last-child { margin-bottom: 0; }
.sl-svc__cta { margin-top: 44px; }

@media (max-width: 640px) {
  .sl-svc__item { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .sl-svc__icon { width: 52px; height: 52px; }
  .sl-svc__icon svg { width: 24px; height: 24px; }
}