/* ==========================================================================
   ECOSISTEMA — estilos de página
   ========================================================================== */
.eco-hero{
  padding:150px 0 70px;
  background:var(--paper);
  text-align:left;
}
.eco-hero h1{ font-size:clamp(2.3rem,5vw,3.8rem); margin-top:18px; line-height:1.06; max-width:16ch; }
.eco-hero h1 em{ font-style:italic; color:var(--pine); font-weight:400; }
.eco-hero p{ margin-top:22px; max-width:52ch; color:var(--text-muted); font-size:1.08rem; }

.eco-item{ overflow:hidden; }
.eco-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.eco-item--rev .eco-grid > div:first-child{ order:2; }
.eco-index{ font-size:.85rem; color:var(--gold); display:block; margin-bottom:14px; }
.eco-item h2{ font-size:clamp(1.8rem,3.2vw,2.4rem); margin-top:16px; }
.eco-item p{ margin-top:16px; color:var(--text-muted); font-size:1.02rem; max-width:44ch; }
.eco-features{ margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.eco-features li{
  position:relative; padding-left:24px; font-size:.94rem; color:var(--text-dark);
}
.eco-features li::before{
  content:''; position:absolute; left:0; top:8px; width:12px; height:1.5px; background:var(--gold);
}
.eco-item .btn{ margin-top:30px; }

/* --- Mockups genéricos --- */
.eco-visual{ display:flex; justify-content:center; }
.eco-mock{
  width:100%; max-width:400px; aspect-ratio:1/.82;
  background:var(--ink); border-radius:var(--radius-l);
  padding:32px; box-shadow:0 40px 90px -30px rgba(15,27,45,.35);
  display:flex; flex-direction:column; gap:22px; justify-content:center;
}

/* Dashboard */
.eco-mock-ring{ position:relative; width:130px; height:130px; margin-inline:auto; }
.eco-mock-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.eco-ring-fill{ transition:stroke-dashoffset 1.4s var(--ease); }
.eco-mock-ring-label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.eco-mock-ring-label strong{ font-family:var(--font-display); font-size:1.6rem; color:var(--text-light); }
.eco-mock-ring-label small{ font-family:var(--font-mono); font-size:.62rem; color:var(--text-light-muted); }
.eco-mock-bars{ display:flex; flex-direction:column; gap:12px; }
.eco-mock-bars div{ display:flex; flex-direction:column; gap:6px; }
.eco-mock-bars span{ font-family:var(--font-mono); font-size:.66rem; color:var(--text-light-muted); }
.eco-mock-bars i{ display:block; height:5px; border-radius:100px; background:var(--gold); }

/* Planificador */
.eco-mock--doc{ align-items:center; position:relative; }
.eco-doc-page{
  width:170px; background:var(--paper); border-radius:8px; padding:20px 18px;
  display:flex; flex-direction:column; gap:9px; box-shadow:0 20px 40px rgba(0,0,0,.35);
  transform:rotate(-3deg);
}
.eco-doc-page span{ display:block; height:6px; background:var(--paper-3); border-radius:4px; }
.eco-doc-page span.short{ width:60%; }
.eco-doc-block{ height:36px; background:rgba(47,110,98,.18); border:1px dashed var(--pine); border-radius:6px; margin:4px 0; }
.eco-doc-tag{ font-family:var(--font-mono); font-size:.66rem; color:var(--gold); border:1px solid rgba(199,154,60,.4); padding:5px 10px; border-radius:100px; }

/* EduGame AI */
.eco-mock--ai{ position:relative; gap:16px; }
.eco-ai-line{ height:9px; border-radius:100px; background:var(--ink-2); width:100%; overflow:hidden; position:relative; }
.eco-ai-line span{ position:absolute; inset:0; background:linear-gradient(90deg, transparent, var(--gold-soft), transparent); animation:ecoShine 2.4s linear infinite; }
@keyframes ecoShine{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }
.eco-ai-spark{ position:absolute; top:20px; right:26px; width:28px; height:28px; animation:ecoSpin 5s linear infinite; }
@keyframes ecoSpin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }

/* EduBoard */
.eco-mock--lms{ flex-direction:row; gap:14px; align-items:stretch; }
.eco-lms-col{ flex:1; background:var(--ink-2); border:1px solid var(--ink-3); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.eco-lms-col span{ display:block; height:22px; border-radius:6px; background:var(--ink-3); }
.eco-lms-col span:nth-child(1){ background:rgba(199,154,60,.4); }

@media (max-width:900px){
  .eco-grid{ grid-template-columns:1fr; gap:40px; }
  .eco-item--rev .eco-grid > div:first-child{ order:0; }
}