/* Estilo compartido por las páginas legales (aviso-legal, privacidad,
   cookies) de soluma-time.es. Reutiliza la misma paleta, tipografías,
   cabecera y pie que index.html -- la diferencia es el cuerpo: un
   texto legal largo en blanco sobre el fondo oscuro de la portada
   sería difícil de leer, así que el contenido va en una tarjeta clara
   (texto oscuro sobre blanco), igual que las páginas legales del
   panel (frontend-web/src/pages/legal). El fondo, la cabecera y el
   pie siguen siendo los mismos que en la portada. */
:root {
  --azul: #205072;
  --azul-hondo: #102C40;
  --azul-noche: #0A1E2C;
  --turquesa: #329D9C;
  --verde: #56C596;
  --verde-claro: #7BE495;
  --menta: #CFF4D2;
  --tinta-suave: #9FBCC9;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: Inter, system-ui, sans-serif;
  color: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(60% 70% at 78% 30%, rgba(50,157,156,.30), transparent 70%),
    linear-gradient(160deg, var(--azul-hondo) 0%, var(--azul-noche) 70%);
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--verde-claro); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }

/* ---------- Cabecera: igual que la portada ---------- */
.top { padding: 32px 0 0; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.top img { height: 56px; width: auto; display: block; }
.acceso.chico { padding: 10px 22px; font-size: .92rem; margin-top: 0; }
.acceso {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 1rem;
  color: var(--azul-noche); text-decoration: none;
  background: var(--verde-claro);
  padding: 16px 30px; border-radius: 999px;
  transition: transform .2s ease, background .2s ease;
}
.acceso:hover { background: #95EEAB; transform: translateY(-2px); }
@media (max-width: 480px) { .top img { height: 40px; } }

/* ---------- Contenido legal: tarjeta clara para que se lea bien ---------- */
main.legal { flex: 1; padding: 48px 0 64px; }
.tarjeta {
  background: #fff;
  color: #1a2733;
  border-radius: 20px;
  padding: clamp(24px, 5vw, 56px);
  max-width: 760px;
  margin-inline: auto;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.35);
}
.tarjeta h1 {
  font-family: Poppins, sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--azul-hondo); margin-bottom: 6px;
}
.tarjeta .fecha { color: #5b6b78; font-size: .9rem; margin-bottom: 28px; }
.tarjeta h2 {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 1.1rem;
  color: var(--azul); margin: 32px 0 12px;
}
.tarjeta h2:first-of-type { margin-top: 0; }
.tarjeta p { margin-bottom: 14px; }
.tarjeta ul { margin: 0 0 14px 22px; }
.tarjeta li { margin-bottom: 8px; }
.tarjeta a { color: var(--turquesa); text-decoration: underline; }
.tarjeta strong { color: #0f1b25; }
.tarjeta table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: .95rem; }
.tarjeta th, .tarjeta td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e3e8eb; }
.tarjeta th { color: var(--azul-hondo); font-weight: 600; }
.aviso {
  background: #eef6f5; border: 1px solid #c9e4e1; border-radius: 10px;
  padding: 14px 16px; font-size: .92rem; color: #1a2733; margin-bottom: 24px;
}
.enlaces-legales { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid #e3e8eb; font-size: .92rem; }

/* ---------- Pie: igual que la portada ---------- */
footer { padding: 24px 0 32px; font-size: .85rem; color: var(--tinta-suave); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 32px; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
footer nav a { text-decoration: none; }
footer nav a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 480px) { footer .wrap { justify-content: center; text-align: center; } }