/* Landing del portal (no es Scalar): paleta propia Esofitec, marca por CSS y tarjetas.
   Claro/oscuro automático según el sistema (sin toggle, de momento). */

:root {
  --bg: #000000;
  --card: #1f1f1f;
  --card-hover: #2d2d2d;
  --text-1: #f5f5f7;
  --text-2: rgba(245, 245, 247, 0.58);
  --accent: #f9423a;
  --teal: #00b091;
  --cutout: #000000; /* = fondo tras el logotipo */
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #d9d9de;
    --card: #ffffff;
    --card-hover: #f4f4f6;
    --text-1: #262626;
    --text-2: rgba(38, 38, 38, 0.58);
    --cutout: #d9d9de;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text-1);
  font-family: "Quicksand", ui-sans-serif, system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

.home-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}

.home-header { margin-bottom: 56px; }

/* ---- Marca "esofitec | CoreDocs" (logotipo por CSS) ---- */
.esofitec-brand { user-select: none; }
.brand-wordmark {
  align-items: baseline;
  color: var(--text-1);
  display: inline-flex;
  flex-wrap: nowrap;
  font-family: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 2.4rem;
  gap: 0.16rem;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}
.brand-wordmark-company {
  font-size: 1.08em;
  font-weight: 1000;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0.035em currentColor;
  text-shadow: 0.035em 0 0 currentColor, -0.035em 0 0 currentColor, 0 0.02em 0 currentColor, 0 -0.02em 0 currentColor;
}
.brand-wordmark-fi { display: inline-flex; letter-spacing: -0.03em; position: relative; text-shadow: none; }
.brand-wordmark-f { display: inline-block; position: relative; z-index: 1; }
.brand-wordmark-f::after {
  background: var(--cutout); clip-path: polygon(71% 0, 100% 0, 100% 100%, 89% 100%);
  content: ""; height: 0.24em; position: absolute; right: -0.01em; top: 0; width: 0.13em;
}
.brand-wordmark-i { margin-left: -0.04em; margin-right: 0.02em; position: relative; z-index: 2; }
.brand-wordmark-i::before {
  background: currentColor; border-radius: 999px; content: "";
  height: 0.105em; left: 54%; position: absolute; top: 0.1em; transform: translateX(-50%); width: 0.105em;
}
.brand-wordmark-i::after {
  background: var(--cutout); content: "";
  height: 0.085em; left: 36%; position: absolute; top: 0.025em; transform: translateX(-50%); width: 0.42em; z-index: 2;
}
.brand-wordmark-fi::after {
  background: var(--cutout); content: "";
  height: 0.03em; left: 76%; position: absolute; top: 0.235em; transform: translateX(-50%); width: 0.22em; z-index: 2;
}
.brand-wordmark-dot { color: var(--accent); margin-left: 0.03em; position: relative; }
.brand-wordmark-dot::after {
  background: var(--cutout); content: "";
  height: 0.085em; left: 43%; position: absolute; top: 0.79em; transform: translateX(-50%); width: 0.26em;
}
.brand-wordmark-divider {
  background: currentColor; color: var(--text-1); display: inline-block;
  height: 0.88em; margin: 0 0.2rem; transform: translateY(0.12em); width: 0.012em;
}
.brand-wordmark-product {
  color: var(--teal); font-weight: 800;
  -webkit-text-stroke: 0.022em currentColor;
  text-shadow: 0.022em 0 0 currentColor, -0.022em 0 0 currentColor;
}
.brand-tagline {
  color: var(--text-2);
  font-family: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  margin: 0.6rem 0 0;
}

/* ---- Rejilla de APIs ---- */
.home-section-title {
  font-family: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 18px;
}
.api-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.api-card {
  background: var(--card);
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.api-card:hover { background: var(--card-hover); transform: translateY(-2px); }
.api-card-title {
  font-family: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
}
.api-card-meta { color: var(--text-2); font-size: 0.85rem; }
.api-card-cta { color: #ff6969; font-weight: 600; font-size: 0.9rem; margin-top: 8px; }
.api-card--soon { opacity: 0.72; }
.api-card--soon .api-card-cta { color: var(--text-2); }