/* ===========================================================================
   LAS PÁGINAS LEGALES
   ===========================================================================

   Hoja compartida por «Términos» y «Privacidad». Son dos páginas estáticas
   sueltas —no entran al index— porque tienen que poder abrirse por su URL
   directa: es la dirección que se cita en un contrato, la que revisa Google y
   la que alguien pega en un mail.

   Los tokens están copiados del index a propósito y no importados: la landing
   es un solo archivo autocontenido, y una hoja que dependa de él obligaría a
   partirlo. Son seis colores; si el index cambia de paleta, se copian de nuevo.
   =========================================================================== */
:root {
  --fondo:         #08080d;
  --fondo-tarjeta: #14141d;
  --borde:         #262633;
  --texto:         #f4f4f7;
  --texto-suave:   #a5a5ba;
  --texto-tenue:   #6b6b80;
  --acento:        #06b6d4;
  --acento-claro:  #22d3ee;
  --r-md: 14px;
  --ancho: 760px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.hoja { max-width: var(--ancho); margin: 0 auto; padding: 32px 22px 90px; }

/* La marca es también un enlace a la home: quien llega acá desde un buscador
   tiene que poder llegar al producto sin escribir la dirección de nuevo. */
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  color: var(--texto); text-decoration: none; margin-bottom: 40px;
}
.marca-icono {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--acento-claro), #0e7490);
  color: #fff; display: grid; place-items: center;
  font-size: 15px; font-weight: 800;
}

h1 { font-size: 30px; line-height: 1.25; letter-spacing: -.02em; }
.actualizado { color: var(--texto-tenue); font-size: 13px; margin: 10px 0 36px; }

h2 {
  font-size: 19px; margin: 40px 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--borde);
}
h3 { font-size: 15.5px; margin: 24px 0 6px; color: var(--acento-claro); }

p, li { color: var(--texto-suave); font-size: 15px; }
p { margin-bottom: 14px; }
ul { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 7px; }
strong { color: var(--texto); font-weight: 650; }
a { color: var(--acento-claro); }

/* El bloque de identificación: quién opera esto y cómo se lo contacta. Va en
   una tarjeta y no en un párrafo porque es el dato que se viene a buscar. */
.quien {
  background: var(--fondo-tarjeta); border: 1px solid var(--borde);
  border-radius: var(--r-md); padding: 20px 22px; margin: 0 0 30px;
}
.quien p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
th, td {
  padding: 10px 12px; text-align: left; font-size: 14.5px;
  border-bottom: 1px solid var(--borde); color: var(--texto-suave);
}
th { color: var(--texto); font-weight: 650; }
tr:last-child td { border-bottom: 0; }

footer {
  margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--borde);
  color: var(--texto-tenue); font-size: 13px;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
}
footer a { color: var(--texto-suave); text-decoration: none; }
footer a:hover { color: var(--acento-claro); }