/* =============================================================================
   Glotus — pages/home.css · CSS condicional de la front page (Pieza 10)
   -----------------------------------------------------------------------------
   v1.0 (2026-06-11) — extraído del <style> del artifact canónico
   wordpress/piezas/10-home (solo los bloques de <main class="home">; header,
   footer y franja viven en components.css — referencia no re-montada).
   Capa legacy (--bg, --fg-*, --brand-*, --border-*, --radius-*, --ease-*)
   remapeada a --glotus-* según pre-sync de CD. Cero literales de color.
   Enqueue: is_front_page() · dependencia glotus-components.
   Deltas Gutenberg (documentados en los patterns): selectores modifier
   .method__step--NN junto a [data-step], y hover de .line-card sobre div.
   ============================================================================= */

/* ─── Contenedor + eyebrow ───────────────────────────────────────────────── */

main.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.eyebrow {
  font-family: var(--glotus-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--glotus-fg-secondary);
  margin: 0;
  font-weight: 500;
}

/* ─── Bloque 1 · Hero ────────────────────────────────────────────────────── */

.hero {
  min-height: calc(75vh - 72px);
  padding: 80px 0 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 880px;
}
.hero__lockup {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin-bottom: 48px;
}
.hero__lockup .glotus-wordmark { font-size: 44px; }
.hero__title {
  font-family: var(--glotus-font-serif);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(48px, 6.2vw, 84px);
  line-height: 1.02;
  letter-spacing: -.022em;
  color: var(--glotus-fg-primary);
  margin: 0 0 24px;
  max-width: 18ch;
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  color: var(--glotus-color-primary);
  font-weight: 500;
}
.hero__lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--glotus-fg-secondary);
  margin: 0 0 40px;
  max-width: 48ch;
  font-weight: 400;
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  background: var(--glotus-color-primary);
  color: var(--glotus-paper);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 24px;
  border-radius: var(--glotus-radius-2);
  border: 1px solid var(--glotus-color-primary);
  transition: background 120ms, transform 120ms;
}
.hero__cta:hover { background: var(--glotus-color-primary-deep); }
.hero__cta:active { transform: scale(.99); }
.hero__cta svg { width: 16px; height: 16px; }

/* ─── Bloque 2 · Método (D3 sub-marks, escalada cromática) ───────────────── */

.method {
  padding: 96px 0 112px;
  position: relative;
  isolation: isolate;
}
.method__eyebrow { margin-bottom: 40px; }

.method__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 880px;
}
.method__step {
  display: grid;
  grid-template-columns: 48px 64px 1fr;
  gap: 20px;
  align-items: center;
}
.method__num {
  font-family: var(--glotus-font-mono);
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--glotus-fg-tertiary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  align-self: center;
}
.method__submark {
  display: block;
  width: 48px;
  height: 48px;
  align-self: center;
}
.method__submark svg { display: block; width: 100%; height: 100%; }
.method__text {
  font-family: var(--glotus-font-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--glotus-fg-primary);
  margin: 0;
}
/* Highlight del paso 4 — "lo ensayás con la IA" — sin gritarlo.
   Doble selector: data-step (fidelidad al artifact) + modifier (render
   Gutenberg actual, ver delta en el pattern). */
.method__step[data-step="04"] .method__text em,
.method__step--04 .method__text em {
  color: var(--glotus-color-accent);
  font-style: italic;
  font-weight: 400;
}

.method__cta {
  margin-top: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--glotus-color-primary);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 120ms;
}
.method__cta:hover { color: var(--glotus-color-primary-deep); }

/* ─── Bloque 3 · Líneas de negocio ───────────────────────────────────────── */

.lines { padding: 96px 0; }
.lines__eyebrow { margin-bottom: 32px; }
.lines__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.line-card {
  background: var(--glotus-bg-elevated);
  border: 1px solid var(--glotus-border-hairline);
  border-radius: var(--glotus-radius-3);
  padding: 32px 28px 28px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color 160ms, transform 160ms;
  position: relative;
}
/* Hover de elevación — cubre el <a> del artifact y el div del montaje */
a.line-card:hover,
.line-card:not(.line-card--soon):hover {
  border-color: var(--glotus-border-visible);
  transform: translateY(-2px);
}
.line-card__illo {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}
.line-card__illo svg { display: block; width: 100%; height: 100%; }
.line-card__title {
  font-family: var(--glotus-font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--glotus-fg-primary);
  margin: 0;
}
.line-card__body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--glotus-fg-secondary);
  margin: 0;
  flex-grow: 1;
  text-wrap: pretty;
}
.line-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--glotus-color-primary);
  margin-top: auto;
  padding-top: 4px;
  text-decoration: none;
}
.line-card__arrow svg { width: 14px; height: 14px; transition: transform 160ms; }
a.line-card:hover .line-card__arrow svg,
.line-card:hover .line-card__arrow svg { transform: translateX(3px); }

.line-card--soon { cursor: default; pointer-events: none; }
.line-card--soon .line-card__illo { opacity: .6; }
.line-card--soon .line-card__title,
.line-card--soon .line-card__body { color: var(--glotus-fg-secondary); }
.line-card__tag {
  align-self: flex-start;
  font-family: var(--glotus-font-mono);
  font-size: 10.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--glotus-fg-secondary);
  background: var(--glotus-bg-sunken);
  padding: 4px 10px;
  border-radius: var(--glotus-radius-pill);
}

/* ─── Bloque 4 · Quiénes somos ───────────────────────────────────────────── */

.institution {
  position: relative;
  padding: 80px 0 128px;
  border-top: 1px solid var(--glotus-border-hairline);
  margin-top: 32px;
  overflow: visible;
}
.institution__inner {
  max-width: 680px;
  position: relative;
  z-index: 1;
}
.institution__text {
  font-family: var(--glotus-font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.42;
  letter-spacing: -.005em;
  color: var(--glotus-fg-primary);
  margin: 0 0 24px;
  text-wrap: pretty;
}
.institution__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--glotus-color-primary);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 120ms;
}
.institution__cta:hover { color: var(--glotus-color-primary-deep); }

.institution__watermark {
  position: absolute;
  right: -40px;
  bottom: -80px;
  width: 380px;
  height: 380px;
  opacity: .07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ─── Responsive · tablet 768–1023 ───────────────────────────────────────── */

@media (max-width: 1023px) {
  main.home { padding: 0 28px; }

  .hero { min-height: auto; padding: 56px 0 48px; }
  .hero__lockup { margin-bottom: 36px; }
  .hero__lockup .glotus-wordmark { font-size: 38px; }
  .hero__title { font-size: clamp(40px, 6vw, 60px); }
  .hero__lede { font-size: 18px; }

  .method { padding: 72px 0 80px; }
  .method__steps { gap: 28px; }
  .method__step { grid-template-columns: 40px 52px 1fr; gap: 16px; }
  .method__submark { width: 40px; height: 40px; }
  .method__text { font-size: 21px; }

  .lines { padding: 72px 0; }
  .lines__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .line-card { padding: 24px 22px; }
  .line-card__title { font-size: 21px; }
  .line-card__body { font-size: 14px; }

  .institution { padding: 64px 0 96px; }
  .institution__text { font-size: 19px; }
  .institution__watermark { width: 300px; height: 300px; right: -60px; bottom: -60px; opacity: .06; }
}

/* ─── Responsive · mobile <768 ───────────────────────────────────────────── */

@media (max-width: 767px) {
  main.home { padding: 0 20px; }

  .hero { padding: 40px 0 32px; }
  .hero__lockup { margin-bottom: 28px; gap: 9px; }
  .hero__lockup .glotus-wordmark { font-size: 32px; }
  .hero__title { font-size: clamp(36px, 9vw, 48px); max-width: 14ch; }
  .hero__lede { font-size: 16px; margin-bottom: 32px; }
  .hero__cta { padding: 13px 20px; font-size: 15px; }

  .method { padding: 56px 0 64px; }
  .method__steps { gap: 24px; }
  .method__step { grid-template-columns: 32px 40px 1fr; gap: 12px; }
  .method__submark { width: 32px; height: 32px; }
  .method__num { font-size: 12px; }
  .method__text { font-size: 18px; line-height: 1.32; }
  .method__cta { margin-top: 36px; font-size: 15px; }

  .lines { padding: 56px 0; }
  .lines__grid { grid-template-columns: 1fr; gap: 14px; }
  .line-card { flex-direction: row; padding: 20px; gap: 18px; align-items: flex-start; }
  .line-card__illo { width: 64px; height: 64px; flex-shrink: 0; }
  .line-card__content { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
  .line-card__title { font-size: 19px; }
  .line-card__body { font-size: 14px; }
  .line-card__arrow { margin-top: 8px; }

  .institution { padding: 48px 0 80px; margin-top: 16px; }
  .institution__text { font-size: 18px; line-height: 1.4; }
  .institution__watermark { width: 240px; height: 240px; right: -60px; bottom: -40px; opacity: .05; }
}