/* ecosistema.css — "el ecosistema." Los 4 servicios como FOLDERS que se apilan
   al scroll (sticky stack). Mecánica tipo card-stack, look propio: esquinas
   RECTAS. Ahora el COLOR del servicio PREDOMINA en cada tarjeta (superficie de
   categoría, opaca), con el texto en ink/paper según contraste. */

:root {
  --eco-nav: 80px;          /* alto del nav sticky */
  --eco-tab: 58px;          /* alto de pestaña / paso de cascada */
  --eco-ease-stand: cubic-bezier(.33, 1, .68, 1);
}

/* ── backdrop de capítulo: papel → ink al entrar (scroll-driven) ─────────── */
.eco-backdrop {
  position: fixed; inset: 0; z-index: 0;
  background: #0e0e0e;
  opacity: 0;                   /* lo maneja el scroll (Pagina.jsx) */
  pointer-events: none;
  will-change: opacity;
}

/* ── sección ─────────────────────────────────────────────────────────────── */
.eco { position: relative; z-index: 1; }
.eco-inner { max-width: 1160px; margin: 0 auto; padding: clamp(20px, 4vh, 56px) clamp(20px, 5vw, 56px) clamp(40px, 7vh, 90px); }
.eco-eyebrow {
  font-family: var(--type-family-workhorse); font-weight: 500;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute); display: inline-flex; align-items: center; gap: .8em;
}
.eco-eyebrow .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--cat-sienna); }
.eco-title {
  font-family: var(--type-family-workhorse); font-weight: 900;
  font-size: clamp(34px, 6vw, 76px); line-height: .98; letter-spacing: -0.035em;
  color: var(--paper); margin: clamp(14px, 2.4vh, 26px) 0 0;
}
.eco-title .dot { color: var(--cat-sienna); }
.eco-lede {
  font-family: var(--type-family-workhorse); font-weight: 500;
  font-size: clamp(15px, 1.6vw, 19px); line-height: 1.55; color: var(--mute);
  max-width: 46ch; margin: clamp(16px, 2.4vh, 26px) 0 0;
}

/* ── el stack ────────────────────────────────────────────────────────────── */
.eco-stack { position: relative; margin-top: clamp(28px, 4.5vh, 56px); }

.folder {
  position: sticky;
  top: calc(var(--eco-nav) + var(--i) * var(--eco-tab));
  z-index: var(--z);
  background: var(--cat);            /* opaco a nivel del folder (refuerza la cobertura al apilarse) */
  isolation: isolate;
  --on: var(--paper);               /* texto sobre la tarjeta de color */
  --on-soft: color-mix(in srgb, var(--paper) 64%, transparent);
}
.folder.ink-on-fill { --on: var(--ink); --on-soft: color-mix(in srgb, var(--ink) 60%, transparent); }

/* entrada simple — sin animación de transform (evita capas compuestas que
   podían verse semitransparentes al apilarse en sticky). */
.folder.in .folder-card { animation: none; }

/* la tarjeta: el COLOR del servicio predomina (superficie opaca) */
.folder-card {
  position: relative; background: var(--cat); color: var(--on);
  border-radius: 0;
  transition: opacity .25s var(--ease-out);
}
/* borde de PUNTOS en los 4 lados, en el color de texto */
.folder-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  --edge: color-mix(in srgb, var(--on) 30%, transparent);
  background:
    radial-gradient(circle, var(--edge) 1px, transparent 1.7px) left top / 9px 1px repeat-x,
    radial-gradient(circle, var(--edge) 1px, transparent 1.7px) left bottom / 9px 1px repeat-x,
    radial-gradient(circle, var(--edge) 1px, transparent 1.7px) left top / 1px 9px repeat-y,
    radial-gradient(circle, var(--edge) 1px, transparent 1.7px) right top / 1px 9px repeat-y;
}

/* ── pestaña: header del folder (banda un punto más oscura del mismo color) ─ */
.folder-tab {
  position: relative; z-index: 2;
  height: var(--eco-tab);
  display: flex; align-items: center; gap: 14px;
  padding: 0 clamp(18px, 2.4vw, 30px);
  background: color-mix(in srgb, var(--cat) 82%, #000);
  border-bottom: 1px solid color-mix(in srgb, var(--on) 18%, transparent);
  cursor: pointer; text-decoration: none;
  transition: background .28s var(--ease-out);
}
.folder-num {
  font-family: var(--type-family-workhorse); font-weight: 600;
  font-size: 12px; letter-spacing: 0.14em; color: var(--on-soft);
  font-variant-numeric: tabular-nums;
}
.folder-bullet {
  width: 10px; height: 10px; border-radius: 50%; background: var(--on); flex: none;
  transition: transform .28s var(--eco-ease-stand);
}
.folder-label {
  font-family: var(--type-family-workhorse); font-weight: 600;
  font-size: 14px; letter-spacing: 0.06em; color: var(--on);
}
.folder-tabarrow { margin-left: auto; color: var(--on-soft); display: inline-flex; }

/* HOVER: atenúa a ~92% y el punto escala 1.2. NO se levanta, NO sombra. */
.folder-card:hover { opacity: .92; }
.folder-card:hover .folder-bullet { transform: scale(1.2); }

/* ── cuerpo del folder ───────────────────────────────────────────────────── */
.folder-body {
  position: relative; overflow: hidden;
  min-height: calc(100vh - 130px);
  min-height: calc(100dvh - 130px);   /* dvh: cubre el viewport real aunque el chrome móvil cambie */
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 64px);
  align-items: center;                 /* centra el contenido en la tarjeta alta (no queda hasta abajo) */
  padding: clamp(28px, 4.6vh, 56px) clamp(20px, 2.6vw, 36px) clamp(30px, 5vh, 56px);
}
/* (DotField retirado de las tarjetas: el color del servicio queda PLANO y sólido,
   sin textura que se lea como transparencia) */
.folder-field { display: none; }
.folder-content { position: relative; z-index: 1; display: flex; flex-direction: column; }
.folder-name {
  font-family: var(--type-family-workhorse); font-weight: 900;
  font-size: clamp(34px, 4.8vw, 64px); line-height: .98; letter-spacing: -0.035em;
  color: var(--on); margin: 0;
}
.folder-solves {
  font-family: var(--type-family-workhorse); font-weight: 500;
  font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; color: var(--on-soft);
  max-width: 30ch; margin: clamp(14px, 2vh, 22px) 0 0; text-wrap: balance;
}
.folder-cta { margin-top: clamp(26px, 4vh, 44px); }

/* directorio de "archivos" (sin precios) */
.folder-files { position: relative; z-index: 1; display: flex; flex-direction: column; }
.folder-files-h {
  font-family: var(--type-family-workhorse); font-weight: 500;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-soft);
  margin: 0 0 6px;
}
.file-row {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline;
  padding: clamp(14px, 2vh, 20px) 2px;
}
.file-num {
  font-family: var(--type-family-workhorse); font-weight: 600; font-size: 12px;
  letter-spacing: 0.1em; color: var(--on); opacity: .7; font-variant-numeric: tabular-nums;
}
.file-name {
  font-family: var(--type-family-workhorse); font-weight: 500;
  font-size: clamp(16px, 1.5vw, 20px); color: var(--on); letter-spacing: -0.01em;
}
.folder-files .dot-divider { --dot-ink: color-mix(in srgb, var(--on) 30%, transparent); }

/* ── mobile: folders full-width, apilados, tap para entrar ───────────────── */
@media (max-width: 760px) {
  :root { --eco-tab: 52px; }
  .folder-body { grid-template-columns: 1fr; gap: clamp(22px, 5vh, 36px); min-height: calc(100vh - 96px); min-height: calc(100dvh - 96px); padding-bottom: clamp(28px, 5vh, 44px); align-content: center; }
  .folder-files { align-self: auto; }
  .folder-cta { padding-top: clamp(20px, 3vh, 32px); }
}