/*
 * Marca CCC para las páginas sueltas (/teorico/, /recursos/, /como-usar/, legales...).
 * Mismos colores y letras de la portada (src/styles/theme.css y fonts.css), 30-10-2026.
 * Cada página mantiene su propio CSS; esto solo pone la base y el encabezado común.
 */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap");

:root {
  --ccc-azul: #0091c8;
  --ccc-azul-osc: #00577a;
  --ccc-tinta: #082038;
  --ccc-suave: #4a7090;
  --ccc-fondo: #f0f9ff;
  --ccc-celeste: #e0f5ff;
  --ccc-borde: rgba(0, 145, 200, 0.18);
  --ccc-amarillo: #facc15;
  --ccc-amarillo-hover: #fde047;
  --ccc-degradado: linear-gradient(135deg, #00577a 0%, #0091c8 60%, #29b6f6 100%);
}

body {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--ccc-fondo);
  color: var(--ccc-tinta);
}

h1, h2, h3, .ccc-titulo { font-family: "Outfit", "DM Sans", system-ui, sans-serif; letter-spacing: -0.01em; }

/* Encabezado igual al de la portada: blanco, logo a la izquierda, volver al inicio a la derecha. */
.ccc-top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ccc-borde);
}
.ccc-top-in {
  max-width: 1100px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}
.ccc-top-in > a.ccc-logo { display: flex; align-items: center; }
.ccc-top-in > a.ccc-logo img { height: 40px; width: auto; display: block; }
.ccc-top-in .ccc-links { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.ccc-top-in .ccc-links a {
  color: var(--ccc-suave); font-size: 14px; font-weight: 600; text-decoration: none;
}
.ccc-top-in .ccc-links a:hover { color: var(--ccc-azul); }

/* Pie común. */
.ccc-pie {
  border-top: 1px solid var(--ccc-borde); margin-top: 24px;
  padding: 20px 16px 28px; text-align: center; font-size: 13px; color: var(--ccc-suave);
}
.ccc-pie a { color: var(--ccc-suave); margin: 0 8px; }