/* ============================
   Paleta Synaslogy
   ============================ */
:root {
  --syn-bg: #050814;              /* fondo principal (casi negro, pero no tanto) */
  --syn-bg-soft: #070b19;         /* zonas grandes / columnas */
  --syn-card: #0d1324;            /* tarjetas de servicios */
  --syn-card-hover: #111a30;      /* tarjeta en hover */
  --syn-border: #1e90ff;          /* azul neón principal */
  --syn-border-soft: rgba(30,144,255,.35);
  --syn-border-strong: rgba(30,144,255,.9);
  --syn-text-main: #e5e7eb;
  --syn-text-soft: #9ca3af;
  --syn-accent: #1e90ff;
  --syn-accent-soft: rgba(30,144,255,.15);
}

/* ============================
   Base: fondo + tipografía
   ============================ */
html,
body,
#__nuxt,
.main,
.page {
  background-color: var(--syn-bg) !important;
  color: var(--syn-text-main) !important;
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif !important;
  font-weight: 400 !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* No machacamos fondos de TODO (para que iconos/imágenes se vean bien) */
* {
  box-sizing: border-box;
}

/* ============================
   Títulos (Core / Media / IPTV…)
   ============================ */
h1, h2, h3,
.page-title,
.group .title {
  font-family: "Elephant", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em;
  color: #e5f0ff !important;
}

/* ============================
   Columnas / grupos (Core, Media…)
   ============================ */
.group {
  background: linear-gradient(145deg, var(--syn-bg-soft), #050814) !important;
  border-radius: 18px !important;
  border: 2px solid var(--syn-border-soft) !important; /* borde más grueso */
  padding-top: .35rem !important;
  padding-bottom: .45rem !important;
}

/* ============================
   Tarjetas de servicio
   ============================ */
.service,
.item.service,
.card {
  background-color: var(--syn-card) !important;              /* más claro que el fondo */
  border-radius: 14px !important;
  border: 2px solid rgba(10,16,30,.9) !important;           /* marco más gordo */
  transition:
    background-color .18s ease-out,
    border-color .18s ease-out,
    box-shadow .18s ease-out,
    transform .18s ease-out;
}

/* Hover: cambio de color + brillo neón azul */
.service:hover,
.item.service:hover,
.card:hover {
  background: radial-gradient(circle at top left,
              rgba(30,144,255,.33),
              var(--syn-card-hover)) !important;
  border-color: var(--syn-border-strong) !important;
  box-shadow:
    0 0 0 1px var(--syn-border-soft),
    0 0 18px rgba(30,144,255,.6) !important;
  transform: translateY(-1px);
}

/* Texto dentro de las tarjetas siempre en Palatino fino */
.group .service,
.group .service *,
.service,
.service *,
.item.service,
.item.service * {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.1px !important;
}

/* Subtítulos / detalles más suaves */
.service .subtitle,
.service small,
.stat-label {
  color: var(--syn-text-soft) !important;
  font-size: .8rem !important;
}

/* ============================
   Chips / estadísticas (CPU, RAM…)
   ============================ */
.chip,
.stat {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif !important;
  font-weight: 400 !important;
  background-color: var(--syn-accent-soft) !important;
  border: 1px solid var(--syn-border-soft) !important;
  color: var(--syn-text-main) !important;
  border-radius: 999px !important;
}

/* ============================
   Barra superior (Hola, crirodgut…)
   ============================ */
header,
.navbar,
.top-bar {
  background: linear-gradient(to right, #020617, #020b1b) !important;
  border-bottom: 1px solid rgba(15,23,42,.9) !important;
}

/* ============================
   Enlaces
   ============================ */
a {
  color: var(--syn-accent) !important;
  text-decoration: none !important;
}

a:hover {
  color: #66b2ff !important;
}

/* Opcional: líneas de separación muy suaves entre servicios */
.group .service + .service {
  margin-top: .30rem !important;
}