/* ==========================================================================
   La Inteligencia Artificial y el Estudiante Universitario
   Hoja de estilos principal
   ========================================================================== */

:root {
  --color-primary: #4f46e5;      /* indigo */
  --color-primary-dark: #3730a3;
  --color-accent: #06b6d4;       /* cyan */
  --color-dark: #0f172a;
  --color-light-bg: #f8fafc;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: #1e293b;
  background-color: var(--color-light-bg);
}

h1, h2, h3, h4, .font-heading {
  font-family: var(--font-heading);
}

/* ---------- Navbar ---------- */
.navbar {
  background: linear-gradient(90deg, var(--color-dark), var(--color-primary-dark));
}

.nav-link {
  position: relative;
  transition: color .2s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: var(--color-accent);
  transition: width .25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: #67e8f9;
}

/* ---------- Hero ---------- */
.hero-section {
  position: relative;
  background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(55,48,163,.85)), var(--hero-img) center/cover no-repeat;
  color: #fff;
}

.hero-badge {
  backdrop-filter: blur(4px);
  background: rgba(255,255,255,.12);
}

/* ---------- Cards ---------- */
.card-hover {
  transition: transform .25s ease, box-shadow .25s ease;
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px -10px rgba(79, 70, 229, .25);
}

.icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* ---------- Section title accent ---------- */
.section-eyebrow {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-primary);
}

.underline-accent {
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 4px;
}

/* ---------- Buttons ---------- */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -6px rgba(79,70,229,.5);
}

.btn-outline {
  border: 2px solid rgba(255,255,255,.7);
  color: #fff;
  transition: all .2s ease;
}
.btn-outline:hover {
  background: #fff;
  color: var(--color-primary-dark);
}

.btn-accent {
  background: linear-gradient(135deg, var(--color-accent), #0891b2);
  color: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -6px rgba(6,182,212,.5);
}

/* ---------- Timeline / list markers ---------- */
.check-item::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--color-accent);
  margin-right: .6rem;
}

.risk-item::before {
  content: "\f071";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #f59e0b;
  margin-right: .6rem;
}

/* ---------- Tabs (subtemas) ---------- */
.subtopic-tab {
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all .2s ease;
}
.subtopic-tab.active-tab {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary-dark);
  font-weight: 700;
}
.subtopic-panel {
  display: none;
}
.subtopic-panel.active-panel {
  display: block;
  animation: fadeIn .35s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- FAQ accordion ---------- */
.faq-question {
  cursor: pointer;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-item.open .faq-answer {
  max-height: 500px;
}
.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}
.faq-chevron {
  transition: transform .25s ease;
}

/* ---------- Presentation cards ---------- */
.platform-badge {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 999px;
}

.badge-prezi { background: #dbeafe; color: #1d4ed8; }
.badge-infogram { background: #fce7f3; color: #be185d; }
.badge-canva { background: #cffafe; color: #0e7490; }
.badge-genially { background: #fef3c7; color: #b45309; }
.badge-powerpoint { background: #fee2e2; color: #b91c1c; }
.badge-google-slides { background: #dcfce7; color: #15803d; }
.badge-otro { background: #e5e7eb; color: #374151; }

/* ---------- Footer ---------- */
footer a {
  transition: color .2s ease;
}

/* ---------- Utility ---------- */
.max-w-8xl {
  max-width: 88rem;
}

/* Scrollbar for embed frame wrapper */
.embed-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: .75rem;
  overflow: hidden;
  background: #0f172a;
}

/* Mobile menu */
#mobile-menu {
  display: none;
}
#mobile-menu.open {
  display: block;
}

/* Toast */
#toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 60;
  transform: translateY(120%);
  transition: transform .35s ease;
}
#toast.show {
  transform: translateY(0);
}