/* =====================================================================
   Sección 2 · Qué hacemos (2026-10)
   Mismo lenguaje que el hero (hero-es.css): serif fina con cursiva, eyebrow
   mono rosa, ventanas tipo app y fondos de color con grano.
   Tarjetas al estilo "How it works" de heylemon.ai: visual arriba, texto abajo.
   Ritmo en escala de 8 · texto mínimo 11px · contraste AA.
   Clases con prefijo sx- para no chocar con style.css/ds-es.css.
   ===================================================================== */

.sx {
  --sx-ink: #061424;
  --sx-serif: 'Times New Roman', Times, Tinos, serif;
  --sx-sans: Arial, Helvetica, Arimo, sans-serif;
  --sx-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --sx-geist: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --sx-gmono: 'Geist Mono', ui-monospace, monospace;
  max-width: 1220px;
  margin: 0 auto;
  padding: 96px 24px;
  color: var(--sx-ink);
  font-family: var(--sx-sans);
  /* style.css pone 1.6 en body; aquí manda el interlineado normal del mockup */
  line-height: normal;
}

/* ---------- Cabecera ---------- */
.sx .sx-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.sx .sx-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; font: 11px var(--sx-mono); letter-spacing: 2.2px; text-transform: uppercase; color: #bd166c; }
.sx .sx-eyebrow::before, .sx .sx-eyebrow::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }
/* #operating-title.sx-title: gana a la regla "Titulares unificados" (#operating-title) de style.css */
.sx .sx-title, #operating-title.sx-title { margin: 0; font: 400 clamp(40px, 4.4vw, 64px)/1.02 var(--sx-serif); letter-spacing: -.035em; color: var(--sx-ink); text-wrap: balance; }
.sx .sx-title em { font-style: italic; font-weight: 400; }
.sx .sx-lede { max-width: 560px; margin: 24px auto 0; font-size: 17px; line-height: 1.55; color: #55647a; text-wrap: balance; }

/* ---------- Tarjetas ---------- */
.sx .sx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sx .sx-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #E6E9EF; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(11,26,46,.04); }
.sx .sx-ai { --tone: #0A8FE0; --tone-soft: #E3F5FF; --tone-ink: #0A6FB0; }
.sx .sx-vm { --tone: #E0137F; --tone-soft: #FFE6F2; --tone-ink: #B30F66; }
/* Misma altura en las dos para que los textos queden alineados */
.sx .sx-visual { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 304px; padding: 32px; overflow: hidden; }
.sx .sx-visual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url('assets/brand/grano-fuerte.svg') 0 0 / 220px 220px; mix-blend-mode: soft-light; opacity: .75; pointer-events: none; }
.sx .sx-ai .sx-visual { background: radial-gradient(ellipse at 20% 0%, #eaf3ff 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, #bcdcff 0%, transparent 60%), linear-gradient(160deg, #9cc1f0 0%, #c6dbf7 55%, #e3eefc 100%); }
.sx .sx-vm .sx-visual { background: radial-gradient(ellipse at 15% 0%, #fff1f6 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, #f7b7d3 0%, transparent 60%), linear-gradient(160deg, #f2bcd6 0%, #f6d3e1 55%, #fcebf2 100%); }

/* Ventana tipo app, igual que la del hero */
.sx .sx-win { width: min(100%, 420px); overflow: hidden; border-radius: 16px; background: rgba(255,253,247,.94); box-shadow: 0 18px 40px rgba(40,30,80,.14), 0 0 0 1px rgba(17,19,24,.06); font-family: var(--sx-geist); }
.sx .sx-win-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #EEEBE2; }
.sx .sx-win-head span { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #1A1C22; }
.sx .sx-win-head span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.sx .sx-win-head em { padding: 4px 8px; border-radius: 999px; background: var(--tone); color: #fff; font: normal 500 10px var(--sx-gmono); letter-spacing: .12em; text-transform: uppercase; }

/* AI: el flujo de presupuestos se recorre paso a paso */
.sx .sx-flow { margin: 0; padding: 8px 16px; list-style: none; }
.sx .sx-flow li { display: grid; grid-template-columns: 80px 1fr 16px; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #ECE8DE; font-size: 13px; color: #2A2D35; transition: color .3s; }
.sx .sx-flow li:last-child { border-bottom: 0; }
.sx .sx-flow i { padding: 4px 0; border-radius: 999px; background: #EFECE4; color: #5B5F6A; font: normal 500 10px var(--sx-gmono); letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.sx .sx-flow i.sx-agent { background: var(--tone-soft); color: var(--tone-ink); }
.sx .sx-flow i.sx-person { background: #111318; color: #fff; }
.sx .sx-flow b { width: 16px; height: 16px; border: 1.5px solid #DDD8CC; border-radius: 50%; transition: background .35s, border-color .35s; }
.sx .sx-flow li.is-on { color: #111318; font-weight: 500; }
.sx .sx-flow li.is-on b { border-color: var(--tone); background: radial-gradient(circle, var(--tone) 0 4px, transparent 5px); }
.sx .sx-flow li.is-done b { border-color: var(--tone); background: var(--tone); }

/* VentureMode™: las fases se llenan de forma continua; Escalar queda en curso */
.sx .sx-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 16px 16px 8px; list-style: none; }
.sx .sx-stages li { font-size: 12px; color: #6F6B61; transition: color .3s; }
.sx .sx-stages li i { display: block; height: 4px; margin-bottom: 8px; overflow: hidden; border-radius: 4px; background: #ECE8DE; }
.sx .sx-stages li i::before { content: ""; display: block; width: 100%; height: 100%; background: var(--tone); transform: scaleX(0); transform-origin: left; }
.sx .sx-stages li.is-now { color: var(--tone-ink); font-weight: 500; }
.sx .sx-stages li.is-now i::before { transform: scaleX(.6); transition: transform var(--step, 1s) ease-out; }
.sx .sx-stages li.is-done { color: #111318; }
.sx .sx-stages li.is-done i::before { transform: scaleX(1); }
.sx .sx-split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px 16px 16px; }
.sx .sx-split span { padding: 10px 12px; border-radius: 10px; background: #F5F2EA; color: #5B5F6A; font-size: 12px; line-height: 1.35; }
.sx .sx-split span b { display: block; color: #111318; font-size: 12.5px; font-weight: 600; }
.sx .sx-split span:last-child { background: var(--tone-soft); }
.sx .sx-split > i { color: var(--tone); font: normal 500 14px var(--sx-gmono); }

/* Texto de la tarjeta */
.sx .sx-body { display: flex; flex-direction: column; gap: 12px; padding: 32px; }
.sx .sx-kicker { margin: 0; color: var(--tone-ink); font: 500 11px var(--sx-gmono); letter-spacing: .14em; text-transform: uppercase; }
.sx .sx-name { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sx .sx-name h3 { margin: 0; color: var(--sx-ink); font: 600 28px/1.15 var(--sx-sans); letter-spacing: -.02em; }
.sx .sx-name img { width: auto; height: 32px; opacity: .85; }
.sx .sx-desc { max-width: 52ch; margin: 0; color: #3A4A60; font-size: 16px; line-height: 1.55; }
.sx .sx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.sx .sx-tags li { padding: 6px 12px; border: 1px solid #E6E9EF; border-radius: 999px; color: #2A2D35; font-size: 13px; }
.sx .sx-close { margin: 48px 0 0; color: #55647a; font-size: 16px; text-align: center; text-wrap: balance; }
.sx .sx-close b { color: var(--sx-ink); font-weight: 600; }

@media (max-width: 860px) {
  .sx .sx-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sx { padding: 64px 24px; }
  .sx .sx-head { margin-bottom: 40px; }
  .sx .sx-eyebrow { margin-bottom: 16px; }
  .sx .sx-title, #operating-title.sx-title { font-size: clamp(36px, 10.4vw, 52px); }
  .sx .sx-lede { margin-top: 16px; font-size: 15px; }
  .sx .sx-grid { gap: 16px; }
  .sx .sx-card { border-radius: 20px; }
  .sx .sx-visual { min-height: 0; padding: 24px 16px; }
  .sx .sx-body { padding: 24px; }
  .sx .sx-name h3 { font-size: 24px; }
  .sx .sx-name img { height: 28px; }
  .sx .sx-desc { font-size: 15px; }
  .sx .sx-close { margin-top: 32px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .sx .sx-flow li, .sx .sx-flow b, .sx .sx-stages li i::before { transition: none !important; }
}

/* Texto mínimo 11px (revisión previa a producción) */
.sx .sx-win-head em, .sx .sx-flow i { font-size: 11px; }