/* ====== Look & feel corporativo ====== */
.hero-title { font-size: clamp(1.9rem, 2.6vw + 1rem, 2.8rem); }

/* Botones */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:.75rem; padding:.5rem 1rem; font-weight:600;
  transition: box-shadow .2s, transform .08s, background-color .2s, border-color .2s, opacity .2s;
  outline: none; user-select: none;
}
.btn:focus-visible { box-shadow:0 0 0 3px rgba(0,162,255,.35); }
.btn:active { transform: translateY(1px); }
.btn--primary { background:#00a2ff; color:#fff; }
.btn--primary:hover { background:#0090e6; }
.btn--outline { background:#fff; color:#0b6cbf; border:1px solid #0b6cbf; }
.btn--outline:hover { background:#e6f2ff; }

/* Estados para quiz */
.btn--correct{
  background:#00a2ff; color:#fff; border-color:#0090e6;
  box-shadow:0 0 0 3px rgba(0,162,255,.25), 0 6px 14px rgba(11,108,191,.18);
}
.btn--wrong{
  opacity:.65;
  text-decoration: line-through;
}

/* Badges */
.badge { display:inline-block; font-size:.75rem; font-weight:700; padding:.25rem .6rem; border-radius:.6rem; }
.badge--inverted { background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.25); }

/* Cards */
.card { background:#e6f2ff; border:1px solid #0b6cbf; border-radius:1rem; padding:1.25rem; box-shadow:0 6px 14px rgba(11,108,191,.08); }
.subcard { background:#fff; border:1px solid #0b6cbf; border-radius:.85rem; padding:1rem; }
.card-title, .subcard-title { color:#0b6cbf; font-weight:600; margin-bottom:.25rem; }
.hover-card { transition: background .2s, transform .08s; }
.hover-card:hover { background:#d9ebff; transform: translateY(-1px); }

/* Títulos de sección */
.section-title {
  color:#0b6cbf; font-weight:800; font-size:1.25rem;
  display:inline-flex; align-items:center; gap:.75rem; position:relative;
}
.section-title::after {
  content:""; height:3px; width:72px;
  background:linear-gradient(90deg,#0b6cbf,#00a2ff); border-radius:999px;
}

/* Acordeones */
.acc {
  background:#e6f2ff; border:1px solid #0b6cbf; border-radius:.85rem; padding:.9rem 1rem;
  transition: box-shadow .2s, background .2s, padding .2s;
  align-self:start;
}
.acc[open] { box-shadow:0 6px 14px rgba(11,108,191,.08); }
.acc:not([open]) { background:transparent; padding:.6rem 1rem; }
.acc > summary { cursor:pointer; font-weight:600; color:#0b6cbf; outline:none; }
.acc > p { margin-top:.6rem; color:#374151; }

/* Checkboxes */
.checkbox {
  margin-top:.25rem; width:1.1rem; height:1.1rem; border-radius:.25rem;
  border:1px solid #0b6cbf; background:#fff; accent-color:#0b6cbf;
}

/* Progreso checklist — sólo width (20% por ítem) */
.progress { width:100%; height:10px; background:#d9ebff; border-radius:999px; overflow:hidden; }
.progress__bar {
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#00a2ff,#0b6cbf);
  transition: width .35s ease-in-out;
}

.card {
  @apply bg-white border border-gray-200 rounded-lg shadow-sm transition;
}

.hover-card:hover {
  @apply shadow-md;
}

.card-title {
  @apply text-lg font-semibold text-gray-900 mb-1;
}


/* Utilidades */
.hidden { display:none !important; }