/* ==========================================================================
   BLACK VERSIONS — pages/home.css
   Solo lo especifico del HOME. El resto vive en components.css.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--hero-h);
  padding: 0 var(--pad-x) var(--hero-pad-b);
  overflow: hidden;
  background: var(--black);
}

.hero .hero-inner {
  padding-top: var(--hero-pad-t);
}

.hero h1 {
  margin-bottom: 30px;
}

/* Tres columnas de contexto bajo el hero */
.hero-facts {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--b-12);
}

@media (min-width: 901px) {
  .hero-facts {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hero-fact {
  padding: 24px 0 0;
}

@media (min-width: 901px) {
  .hero-fact {
    padding: 24px 34px 0;
    border-left: 1px solid var(--b-12);
  }
  .hero-fact:first-child {
    padding-left: 0;
    padding-right: 34px;
    border-left: none;
  }
  .hero-fact:last-child {
    padding-right: 0;
  }
}

.hero-fact-label {
  margin-bottom: 10px;
  font-weight: 300;
  font-size: 0.92rem;
  color: var(--text-hi);
}

.hero-fact p {
  font-size: 0.88rem;
  color: #8b8b8b;
}

/* --- Adornos del hero --- */
.hero .starburst,
.hero .dot-field {
  top: 16%;
  right: var(--burst-right);
}

/* ==========================================================================
   2. PROBLEMA / SOLUCION
   ========================================================================== */

.problem-media {
  position: relative;
}

@media (min-width: 901px) {
  .problem-media {
    position: sticky;
    top: calc(var(--nav-h) + 36px);
  }
}

.problem-text h2 {
  max-width: 16ch;
  margin-bottom: 26px;
  line-height: 1.12;
}

/* Los eyebrow tambien son <p>: se excluyen de las reglas de parrafo */
.problem-text > p:not(.eyebrow) {
  max-width: 60ch;
  margin-bottom: 18px;
  font-size: var(--fs-p-md);
}

.problem-text > p:not(.eyebrow):last-of-type {
  margin-bottom: 34px;
}

.problem .solution-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 901px) {
  .problem .solution-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.problem .tag-row {
  margin-top: 26px;
}

/* ==========================================================================
   3. DIFERENCIADOR
   ========================================================================== */

.diff .starburst--soft {
  top: 10%;
  left: var(--burst-right);
}

.diff-content > p:not(.eyebrow) {
  max-width: 56ch;
  margin-bottom: 16px;
  font-size: var(--fs-p-md);
}

.diff-content > p:not(.eyebrow):last-of-type {
  margin-bottom: 34px;
}

.diff h2 {
  font-size: var(--fs-h2s);
  line-height: 1.12;
  margin-bottom: 24px;
}

/* La caja SEO/GEO es compartida (components.css); aqui solo su separacion */
.diff .diff-boxes {
  margin-top: 44px;
}


/* Recuadro de la infografia: rejilla + abanico dentro del marco */
.diff-media {
  background: #070707;
}

.diff-media .decor-grid {
  background-size: 56px 56px;
}

.diff-media .starburst {
  inset: 0;
  width: 100%;
  height: 100%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.28) 0deg 0.14deg,
    transparent 0.14deg 18deg
  );
  mask-image: radial-gradient(circle, #000 4%, transparent 60%);
  -webkit-mask-image: radial-gradient(circle, #000 4%, transparent 60%);
  animation: none;
}

/* ==========================================================================
   4. CASO DE EXITO
   ========================================================================== */

.case h2 {
  max-width: 18ch;
  margin-bottom: 20px;
}

.case .pill {
  margin-bottom: var(--gap-md);
}

.case-note {
  max-width: 70ch;
  margin: 34px 0 18px;
  font-size: var(--fs-p-md);
}

/* ==========================================================================
   5. SERVICIOS Y PROCESO (titulos con ancho limitado)
   ========================================================================== */

.services h2 {
  max-width: 20ch;
}

.process h2 {
  max-width: 16ch;
  margin-bottom: var(--gap-md);
}

.metrics h2 {
  margin-bottom: var(--gap-md);
}

/* ==========================================================================
   6. CLIENTES
   ========================================================================== */

.clients h2 {
  margin-bottom: 32px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--text-muted);
  text-align: center;
  max-width: none;
}