/* TRANTIA — landing mínima.
 *
 * 🔴 EN FICHERO APARTE, NO EN <style>: la CSP de la distribución es
 * `style-src 'self'` SIN unsafe-inline. Un bloque <style> se bloquea y la
 * página sale sin estilos, sin error visible. Misma razón por la que los
 * legales externalizaron su CSS a /legal/legal.css.
 *
 * 🔴 NOMBRES OFICIALES DE LA PALETA (MARCA_TRANTIA_BrandBoard.html).
 * La versión anterior redeclaraba los mismos colores con alias propios
 * (--fondo, --azul, --tenue). El color era correcto; el nombre inventado
 * es lo que rompe la convención — y un alias privado convierte cualquier
 * cambio de marca futuro en una búsqueda a mano.
 *
 * Lo único que NO sale del brand board son los bordes: la paleta no define
 * token de borde, así que se DERIVAN de --hueso con alfa en vez de
 * inventarse un hex nuevo. Queda dicho para que se vea que es derivación,
 * no invención.
 */
:root{
  --tinta:#0B0E14;        /* fondo */
  --hueso:#F5F3EF;        /* titulares y texto fuerte */
  --texto:#AEB6C4;        /* cuerpo sobre oscuro */
  --gris-texto:#5A6272;   /* secundario */
  --azul-senal:#5B8CFF;   /* enlaces sobre oscuro */
  --azul-trantia:#2148E5; /* acento de marca */

  --borde:rgba(245,243,239,.10);  /* = --hueso al 10% */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--tinta); color:var(--hueso);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
.envoltura{max-width:760px;margin:0 auto;padding:56px 24px 72px}
header{display:flex;align-items:center;gap:14px;margin-bottom:56px}
header img{height:34px;width:auto}
header span{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris-texto)}
h1{
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:clamp(1.9rem,5vw,2.7rem); line-height:1.2;
  margin:0 0 18px; font-weight:700; letter-spacing:-.02em;
}
.entrada{font-size:1.12rem;color:var(--texto);margin:0 0 40px;max-width:62ch}
h2{
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--azul-senal);margin:44px 0 14px;font-weight:600;
}
p,ul{color:var(--texto)}
p{margin:0 0 14px;max-width:66ch}
ul{margin:0 0 14px;padding-left:20px;max-width:66ch}
li{margin-bottom:8px}
strong{color:var(--hueso);font-weight:600}
.tarjeta{
  border:1px solid var(--borde);
  border-left:3px solid var(--azul-trantia);
  border-radius:10px;padding:22px 24px;margin:20px 0;
}
.tarjeta p{margin:0 0 6px}
.tarjeta p:last-child{margin:0}
.etiqueta{color:var(--gris-texto);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}
a{color:var(--azul-senal);text-decoration:none;border-bottom:1px solid transparent}
a:hover{border-bottom-color:var(--azul-senal)}
footer{
  margin-top:56px;padding-top:24px;border-top:1px solid var(--borde);
  color:var(--gris-texto);font-size:.86rem;
}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:16px}
@media (max-width:520px){ .envoltura{padding:36px 18px 56px} }