/* daezpro.com — 15a-hub-cards.css
   Tarjetas del hub de educación (F4.D): temas, calculadoras, rutas, lecciones
   y Avíseme. Consume solo tokens de 00; escala a 42 rutas sin rediseño
   (grids auto-fill y tarjetas de ancho completo). */

/* ------------------------------------------------------------- HUB · TEMAS */
.edu-topic-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:clamp(18px, 2vw, 24px);
  margin-top:clamp(36px, 4vw, 52px);
}
.edu-topic-card{
  --topic-color: var(--primary);
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:clamp(22px, 2.4vw, 28px);
  border-top:3px solid var(--topic-color);
  color:inherit;
}
.edu-topic-card__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-h2);
  letter-spacing:-0.02em;
  color:var(--text-strong);
}
.edu-topic-card__tagline{
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--text-body);
}
.edu-topic-card__meta{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  font-size:var(--fs-sm);
  color:var(--text-muted);
}
.edu-topic-card__count{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.edu-topic-card__more{
  font-weight:600;
  color:var(--accent-strong);
}
.edu-topic-card:hover .edu-topic-card__more{ text-decoration:underline; }

/* ------------------------------------------------- HUB · CALCULADORAS */
.edu-calc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:clamp(16px, 1.8vw, 22px);
  margin-top:clamp(28px, 3vw, 40px);
}
.edu-calc-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:clamp(18px, 2vw, 22px);
}
.edu-calc-card__k{
  font-family:var(--font-mono);
  font-size:var(--fs-2xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.edu-calc-card__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-h3);
  letter-spacing:-0.01em;
  color:var(--text-strong);
}
.edu-calc-card__model{
  font-size:var(--fs-sm);
  line-height:1.5;
  color:var(--text-body);
}
.edu-calc-card__foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:var(--fs-sm);
}

/* ----------------------------------------------------------- CTA APP */
.edu-app-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-top:clamp(36px, 4vw, 52px);
  padding:clamp(24px, 3vw, 34px);
}
.edu-app-cta__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-h2);
  letter-spacing:-0.02em;
  color:var(--text-strong);
}
.edu-app-cta__sub{
  margin-top:8px;
  font-size:var(--fs-body);
  color:var(--text-body);
  max-width:52ch;
}

/* ------------------------------------------------------- TEMA · RUTAS */
.edu-path-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px, 1.8vw, 20px);
  margin-top:clamp(32px, 3.5vw, 44px);
}
.edu-path-card{
  --topic-color: var(--primary);
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:clamp(22px, 2.4vw, 28px);
  border-top:3px solid var(--topic-color);
}
.edu-path-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.edu-path-card__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-h2);
  letter-spacing:-0.02em;
  color:var(--text-strong);
}
.edu-path-card__promise{
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--text-body);
  max-width:64ch;
}
.edu-path-card__meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-size:var(--fs-sm);
  color:var(--text-muted);
}
.edu-path-card__meta b{
  font-family:var(--font-mono);
  font-weight:500;
  color:var(--text-strong);
}
.edu-path-card__cta{ margin-top:6px; }

/* -------------------------------------------------------- ESTADOS */
.edu-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:var(--r-pill);
  font-family:var(--font-mono);
  font-size:var(--fs-2xs);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.edu-status--published{ color:var(--success-text); background:var(--success-soft); border:1px solid var(--success); }
.edu-status--coming{ color:var(--warning-text); background:var(--warning-soft); border:1px solid var(--warning); }
.edu-status--account{ color:var(--info-text); background:var(--info-soft); border:1px solid var(--info); }

/* ---------------------------------------------------------- AVÍSEME */
.edu-avisame{
  display:grid;
  gap:10px;
  margin-top:12px;
  padding:14px 16px;
  border:1px dashed var(--border-strong);
  border-radius:var(--r-md);
  background:var(--bg-canvas);
}
.edu-avisame__row{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.edu-avisame input[type="email"]{
  flex:1 1 220px;
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--text-strong);
  font-family:var(--font-ui);
  font-size:var(--fs-title);
}
.edu-avisame input[type="email"]:focus-visible{
  outline:none;
  border-color:var(--primary);
  box-shadow:var(--sh-focus);
}
.edu-avisame__consent{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:var(--fs-sm);
  color:var(--text-body);
  line-height:1.45;
}
.edu-avisame__consent input{ margin-top:3px; }
.edu-avisame__note{
  font-size:var(--fs-sm);
  color:var(--text-muted);
}
.edu-avisame__note[hidden]{ display:none; }
.edu-avisame__ok{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:var(--success-text);
}
.edu-avisame__ok[hidden]{ display:none; }

/* ------------------------------------------------------ RUTA · PREVIEW */
.edu-preview__hero{ margin-bottom:clamp(28px, 3vw, 40px); }
.edu-unit{
  margin-top:clamp(28px, 3vw, 38px);
  padding-top:22px;
  border-top:1px solid var(--border);
}
.edu-unit__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.edu-unit__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-h3);
  color:var(--text-strong);
}
.edu-unit__meta{
  font-size:var(--fs-sm);
  color:var(--text-muted);
}
.edu-lesson{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin-top:8px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  color:inherit;
}
.edu-lesson__no{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--bg-canvas);
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--text-muted);
}
.edu-lesson__title{
  flex:1 1 auto;
  min-width:0;
  font-weight:600;
  color:var(--text-strong);
}
.edu-lesson__time{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  color:var(--text-muted);
}
.edu-lesson--published{ border-color:var(--success); }
.edu-lesson--published .edu-lesson__no{ background:var(--success-soft); color:var(--success-text); }
.edu-lesson--coming{ opacity:.72; }

/* ----------------------------------------------------------- RESPONSIVE */
@media (max-width:620px){
  .edu-path-card__head{ flex-direction:column; }
  .edu-lesson{ flex-wrap:wrap; }
}