/* ═══════════════════════════════════════════════════════════════
   SUDOCU — Firma Digital
   Dirección General de Informática · Universidad Nacional de Tucumán
   ═══════════════════════════════════════════════════════════════ */

/* ─── HERO ───────────────────────────────────────────────────── */
.fd-hero {
  padding: 90px 0 80px;
  background: linear-gradient(145deg, var(--blue-900) 0%, #1e3573 40%, #2a1f6e 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.fd-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px; pointer-events: none;
}
.fd-hero::after {
  content: '';
  position: absolute; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(59,130,246,.2), transparent 65%);
  top: -150px; right: -80px; border-radius: 50%; pointer-events: none;
}
.fd-hero .container { position: relative; z-index: 1; }
.fd-hero .section-tag {
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.2);
}
.fd-hero .section-title { color: var(--white); margin-bottom: 12px; }
.fd-hero .section-desc { color: rgba(255,255,255,.75); }

/* ─── TURNO ──────────────────────────────────────────────────── */
.fd-turno-section { padding: 64px 0; background: var(--slate-50); }
.fd-turno-card {
  display: flex; align-items: center; gap: 32px;
  padding: 36px 48px; border: 1.5px solid var(--blue-200);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #eff6ff 0%, var(--white) 60%);
  position: relative; overflow: hidden;
}
.fd-turno-card::after {
  content: '';
  position: absolute; top: -60px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(37,99,235,.1), transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.fd-turno-icon {
  width: 64px; height: 64px; flex-shrink: 0;
  background: var(--blue-600); color: var(--white);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
}
.fd-turno-icon svg { width: 30px; height: 30px; }
.fd-turno-content { flex: 1; position: relative; z-index: 1; }
.fd-turno-content h2 {
  font-size: 1.15rem; font-weight: 800; color: var(--navy); margin-bottom: 8px;
}
.fd-turno-content p {
  font-size: .9rem; color: var(--slate-500); line-height: 1.65;
}
.fd-turno-content p strong { color: var(--navy); }
.fd-turno-btn { flex-shrink: 0; position: relative; z-index: 1; }

/* ─── SECTIONS ───────────────────────────────────────────────── */
.fd-section { padding: 80px 0; }
.fd-section--white { background: var(--white); }
.fd-section--slate { background: var(--slate-50); }
.fd-section--dark {
  background: linear-gradient(160deg, var(--blue-900) 0%, var(--blue-800) 100%);
  position: relative; overflow: hidden;
}
.fd-section--dark::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px; pointer-events: none;
}
.fd-section--dark .section-header { position: relative; z-index: 1; }
.fd-section--dark .section-tag {
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.2);
}
.fd-section--dark .section-title { color: var(--white); }
.fd-section--dark .section-desc { color: rgba(255,255,255,.75); }
.fd-section--dark .fd-tokens-grid { position: relative; z-index: 1; }

/* ─── CERTIFICATE CARD ───────────────────────────────────────── */
.fd-cert-single {
  max-width: 620px; margin: 0 auto;
}
.fd-resource-card {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 28px; border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg); background: var(--white);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.fd-resource-card:hover {
  box-shadow: var(--shadow-md); border-color: var(--blue-200); transform: translateY(-2px);
}
.fd-card-icon {
  width: 52px; height: 52px; background: var(--ic-bg); color: var(--ic-color);
  border-radius: var(--radius-md); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.fd-card-body { flex: 1; }
.fd-card-body h3 {
  font-size: 1rem; font-weight: 700; color: var(--navy);
  margin-bottom: 6px; line-height: 1.3;
}
.fd-card-body p {
  font-size: .875rem; color: var(--slate-500); line-height: 1.6; margin-bottom: 8px;
}
.fd-card-meta {
  font-size: .75rem; font-weight: 600; color: var(--slate-400);
  text-transform: uppercase; letter-spacing: .06em;
}
.fd-download-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; background: var(--blue-50); color: var(--blue-700);
  border: 1px solid var(--blue-100); border-radius: var(--radius-sm);
  font-size: .85rem; font-weight: 600; white-space: nowrap;
  align-self: center; flex-shrink: 0; transition: var(--transition);
}
.fd-download-btn:hover { background: var(--blue-700); color: var(--white); }

/* ─── TOKEN CARDS ────────────────────────────────────────────── */
.fd-tokens-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.fd-token-card {
  background: var(--white); border: 1px solid var(--slate-100);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.fd-token-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-5px); }
.fd-token-img-wrap {
  width: 100%; height: 180px;
  background: var(--slate-100);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.fd-token-img {
  max-width: 100%; max-height: 160px;
  object-fit: contain; padding: 16px;
}
.fd-token-img-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: var(--slate-300);
}
.fd-token-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.fd-token-header { display: flex; align-items: center; gap: 12px; }
.fd-token-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
  color: var(--white); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fd-token-header h3 {
  font-size: 1rem; font-weight: 800; color: var(--navy);
  line-height: 1.1; margin-bottom: 2px;
}
.fd-token-brand { font-size: .75rem; color: var(--slate-400); font-weight: 500; }
.fd-token-desc {
  font-size: .85rem; color: var(--slate-500); line-height: 1.65; flex: 1;
}
.fd-token-actions .btn { width: 100%; justify-content: center; }

/* ─── JAVA NOTICE ────────────────────────────────────────────── */
.fd-java-notice {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fef3c7; border: 1px solid #fcd34d;
  border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 40px;
}
.fd-java-notice-icon { color: #b45309; flex-shrink: 0; margin-top: 2px; }
.fd-java-notice strong {
  display: block; font-size: .9rem; color: #92400e; margin-bottom: 6px;
}
.fd-java-notice p {
  font-size: .875rem; color: #78350f; line-height: 1.65; margin-bottom: 14px;
}
.fd-java-notice p strong { display: inline; font-size: inherit; color: #78350f; }
.fd-java-downloads { display: flex; gap: 12px; flex-wrap: wrap; }
.fd-java-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; background: #b45309; color: var(--white);
  border-radius: var(--radius-sm); font-size: .8rem; font-weight: 600;
  transition: var(--transition);
}
.fd-java-link:hover { background: #92400e; }

/* ─── VERSION CARDS ──────────────────────────────────────────── */
.fd-versions-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.fd-version-card {
  background: var(--white); border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.fd-version-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.fd-version-card--latest {
  border-color: var(--blue-300);
  box-shadow: 0 0 0 1px var(--blue-200);
}
.fd-version-header {
  padding: 24px 24px 0; display: flex;
  align-items: center; gap: 10px; flex-wrap: wrap;
}
.fd-version-badge { font-size: 1.3rem; font-weight: 800; color: var(--navy); }
.fd-version-badge--latest { color: var(--blue-700); }
.fd-version-label { font-size: .78rem; color: var(--slate-400); font-weight: 500; }
.fd-latest-tag {
  margin-left: auto;
  background: var(--blue-600); color: var(--white);
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; padding: 3px 10px; border-radius: 99px;
}
.fd-version-body { padding: 16px 24px 20px; flex: 1; }
.fd-version-req {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--slate-500); font-weight: 500;
}
.fd-req-icon { color: var(--blue-600); flex-shrink: 0; }
.fd-version-download {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; background: var(--blue-50); color: var(--blue-700);
  border-top: 1px solid var(--slate-100);
  font-size: .875rem; font-weight: 600; transition: var(--transition);
}
.fd-version-download:hover { background: var(--blue-700); color: var(--white); }
.fd-version-download--latest { background: var(--blue-600); color: var(--white); }
.fd-version-download--latest:hover { background: var(--blue-700); }

/* ─── BETA card ──────────────────────────────────────────────── */
.fd-version-card--beta {
  border-color: #fcd34d;
  box-shadow: 0 0 0 1px #fde68a;
}
.fd-version-badge--beta { color: #92400e; }
.fd-beta-tag {
  margin-left: auto;
  background: #f59e0b; color: var(--white);
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; padding: 3px 10px; border-radius: 99px;
}
.fd-beta-notice {
  font-size: .78rem; color: #92400e; margin-top: 8px;
  background: #fef3c7; border-radius: 6px; padding: 6px 10px;
  line-height: 1.5;
}
.fd-version-download--beta {
  background: #fef3c7; color: #92400e;
  border-top: 1px solid #fde68a;
}
.fd-version-download--beta:hover { background: #f59e0b; color: var(--white); }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .fd-tokens-grid { grid-template-columns: repeat(2, 1fr); }
  .fd-versions-grid { grid-template-columns: repeat(2, 1fr); }

  .fd-turno-card { padding: 32px 36px; gap: 24px; }
}
@media (max-width: 768px) {
  .fd-section { padding: 60px 0; }
  .fd-tokens-grid { grid-template-columns: 1fr; }
  .fd-versions-grid { grid-template-columns: 1fr; }
  .fd-turno-card { flex-direction: column; padding: 28px 24px; gap: 16px; text-align: center; }
  .fd-turno-btn { width: 100%; }
  .fd-turno-btn .btn { width: 100%; justify-content: center; }
  .fd-resource-card { flex-direction: column; }
  .fd-download-btn { align-self: flex-start; }
}