/* ═══════════════════════════════════════════════
   Guía FYO — legal.css (Etapa 8)
   Estilos para Términos y Condiciones + Privacidad
   ═══════════════════════════════════════════════ */

:root {
  --orange: #E8650A;
  --yellow: #F5A623;
  --teal:   #1DBFA3;
  --navy:   #0F1923;
  --navy2:  #1A2535;
  --cream:  #FFF8F0;
  --text:   #B0C4D8;
  --muted:  #5A7A8A;
  --border: rgba(255,255,255,0.07);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Nunito', sans-serif; background: var(--navy); color: var(--text); min-height: 100vh; }

/* Nav */
.legal-nav {
  background: var(--navy2); border-bottom: 1px solid var(--border);
  padding: 16px 24px; display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 10;
}
.legal-nav a { text-decoration: none; display: flex; align-items: center; gap: 8px; }
.legal-nav .paw { font-size: 1.3rem; }
.legal-nav .brand { font-family: 'Fredoka One', cursive; color: var(--yellow); font-size: 1.1rem; }
.legal-nav .back { color: var(--muted); font-size: 0.85rem; font-weight: 700; margin-left: auto; }
.legal-nav .back:hover { color: white; }

/* Content */
.legal-content {
  max-width: 780px; margin: 0 auto; padding: 48px 24px 80px;
}
.legal-content h1 {
  font-family: 'Fredoka One', cursive; color: white; font-size: 2rem;
  margin-bottom: 8px;
}
.legal-date { color: var(--muted); font-size: 0.85rem; font-weight: 700; margin-bottom: 36px; display: block; }

.legal-content h2 {
  color: var(--orange); font-size: 1.1rem; font-weight: 800;
  margin-top: 36px; margin-bottom: 12px;
}
.legal-content p {
  line-height: 1.8; font-size: 0.92rem; margin-bottom: 14px;
}
.legal-content ul {
  margin: 8px 0 14px 24px; line-height: 1.8; font-size: 0.92rem;
}
.legal-content a { color: var(--teal); text-decoration: none; }
.legal-content a:hover { text-decoration: underline; }
.legal-content strong { color: white; }

/* Footer */
.legal-footer {
  background: var(--navy2); border-top: 1px solid var(--border);
  padding: 24px; text-align: center; color: var(--muted); font-size: 0.82rem;
}
.legal-footer a { color: var(--teal); text-decoration: none; }

@media (max-width: 600px) {
  .legal-content { padding: 32px 16px 60px; }
  .legal-content h1 { font-size: 1.5rem; }
}