/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL GESTIONA · páginas de texto
   Contacto, aviso legal, privacidad, cookies, términos y el 404.

   Estas páginas venían de la web antigua y enlazaban `css/style.css`,
   `css/cookies.css`, `js/main.js` y `js/cookies.js`, que no existen en este
   sitio: por eso se veían en blanco y negro, sin maquetar. Esta hoja las
   recoge a todas y las pone en la estética de la portada —el mismo fondo
   #0a0e17, el mismo cian, el mismo degradado a morado y la misma tipografía—.

   Regla que no se rompe: aquí NADA nace con opacity:0 esperando a que un
   guion lo revele. Esas páginas ya no llevan main.js, y una animación
   huérfana deja el texto invisible. El contenido se ve siempre.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:        #0a0e17;
  --bg-soft:   #0f1422;
  --primary:   #00f2ea;
  --secondary: #ff0050;
  --accent:    #7b2cbf;
  --text:      #ffffff;
  --muted:     #a0a0a0;
  --line:      rgba(255, 255, 255, .10);
  --glass:     rgba(255, 255, 255, .05);
  --gradient:  linear-gradient(135deg, #00f2ea 0%, #7b2cbf 100%);

  /* Nombres que las páginas antiguas usan en sus estilos en línea. Se dejan
     apuntando a la paleta nueva para no tener que tocar cada atributo. */
  --text-dim:     var(--muted);
  --accent-green: var(--primary);
  --glass-bg:     var(--glass);
  --glass-border: var(--line);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse 900px 600px at 15% -10%, rgba(0, 242, 234, .07), transparent 60%),
    radial-gradient(ellipse 800px 600px at 85% 8%,  rgba(123, 44, 191, .10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: Inter, "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── Rejilla ───────────────────────────────────────────────────────────── */

.container { width: min(1200px, 90vw); margin: 0 auto; }

/* Hueco para la barra fija de arriba, que va posicionada en línea. */
.content-page,
.contact-page { padding: 150px 0 90px; }

/* Medida de lectura: ~70 caracteres. Un texto legal a todo lo ancho de la
   pantalla no lo lee nadie. */
.text-container { max-width: 74ch; margin: 0 auto; }

/* ── Titulares ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--text);
}

h1 { font-size: clamp(2rem, 5vw, 3rem) !important; margin: 0 0 28px; }

h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  margin: 52px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.text-container > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 38px; }

h3 { font-size: 1.05rem; margin: 30px 0 8px; }
h4 { font-size: .98rem; margin: 0 0 4px; }

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Texto ─────────────────────────────────────────────────────────────── */

p  { color: #c6d1de; margin: 0 0 16px; }
ul, ol { color: #c6d1de; padding-left: 22px; margin: 0 0 18px; }
li { margin-bottom: 8px; }
li::marker { color: var(--primary); }
strong, b { color: var(--text); font-weight: 700; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

/* ── Cajas destacadas ──────────────────────────────────────────────────── */

.legal-box,
.glass-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  margin: 0 0 28px;
}
.legal-box p:last-child,
.glass-card p:last-child { margin-bottom: 0; }

/* El resumen de arriba del todo en privacidad y términos: se marca con una
   pincelada cian en el canto, no con otro borde más. */
.legal-box { border-left: 3px solid var(--primary); }

/* Lo que avisa de una consecuencia va en el color de aviso de la web. */
.legal-box.warning { border-left-color: var(--secondary); background: rgba(255, 0, 80, .06); }

.legal-meta { color: #6d8099; font-size: .82rem; margin: -14px 0 32px; }

/* ── Tabla de cookies ──────────────────────────────────────────────────── */

.table-cookies {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 30px;
  font-size: .9rem;
  table-layout: fixed;     /* si no, la columna de texto largo se come la tabla */
}
.table-cookies th:first-child,
.table-cookies td:first-child { width: 26%; }
.table-cookies td { overflow-wrap: anywhere; }
.table-cookies th,
.table-cookies td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.table-cookies thead th {
  color: var(--primary); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 800;
  border-bottom: 1px solid rgba(0, 242, 234, .35);
}
.table-cookies tbody tr:hover { background: rgba(255, 255, 255, .03); }
.table-cookies td { color: #c6d1de; }

/* ── Botones ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px;
  font-family: inherit; font-size: .95rem; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn-primary {
  background: var(--gradient); color: #05070c;
  box-shadow: 0 10px 30px -12px rgba(0, 242, 234, .55);
}
.btn-primary:hover { box-shadow: 0 16px 38px -12px rgba(0, 242, 234, .75); }

.btn-outline, .btn-ghost {
  background: transparent; color: var(--text); border-color: var(--line);
}
.btn-outline:hover, .btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

/* ── Barra de arriba ───────────────────────────────────────────────────── */
/* La barra lleva sus propios estilos en línea en cada página; aquí solo se
   ajusta lo que no cabía en un atributo. */

.nav-links a { color: #d6e0ec !important; font-weight: 500; }
.nav-links a:hover { color: var(--primary) !important; text-decoration: none; }

@media (max-width: 760px) {
  .nav-links { display: none !important; }
  .content-page, .contact-page { padding-top: 120px; }
}

/* ── Formulario de contacto ────────────────────────────────────────────── */

.form-container { max-width: 760px; margin: 0 auto; }

.input-group { display: flex; flex-direction: column; gap: 7px; }
.input-group label {
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 800; color: #8ea3bb;
}
.input-group input,
.input-group textarea {
  width: 100%; padding: 13px 15px; border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  color: var(--text); font: inherit; font-size: .95rem;
  transition: border-color .25s ease, background .25s ease;
}
.input-group input::placeholder,
.input-group textarea::placeholder { color: #5d7288; }
.input-group input:focus,
.input-group textarea:focus {
  outline: none; border-color: var(--primary);
  background: rgba(0, 242, 234, .04);
}
.input-group textarea { resize: vertical; min-height: 130px; }

.contact-form { padding: 34px !important; }

@media (max-width: 700px) {
  .contact-form { padding: 22px !important; }
  .contact-form > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ── Aviso legal ───────────────────────────────────────────────────────── */
/* Esa página venía ya maquetada, con su propia paleta azul de la marca
   antigua. Comparte estructura, así que se le da el mismo trato. */

.wrap { width: min(74ch, 90vw); margin: 0 auto; padding: 150px 0 80px; }
.volver { display: inline-block; color: var(--primary); font-size: .82rem; margin-bottom: 26px; }
.meta { color: #6d8099; font-size: .8rem; margin: -14px 0 32px; }
.caja {
  background: var(--glass); border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 16px; padding: 22px 24px; margin: 0 0 28px;
}
.caja p:last-child { margin-bottom: 0; }

/* ── Página no encontrada ──────────────────────────────────────────────── */

.error-page {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
}