/* ============================================================
   AERIA · vuelalegal.com , Estilos de la página legal
   Reutiliza tokens, nav, footer y botones de style.css.
   ============================================================ */
.legal{ max-width:780px; margin:0 auto; padding:130px 24px 90px; }
.legal__eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--cyan);
}
.legal__title{
  font-family:var(--display); font-weight:600; font-size:clamp(30px,5vw,42px);
  letter-spacing:-0.02em; margin:14px 0 8px;
}
.legal__updated{ font-family:var(--mono); font-size:12px; color:var(--slate); margin-bottom:14px; }
.legal__toc{ display:flex; gap:10px; flex-wrap:wrap; margin:24px 0 40px; }
.legal__toc a{
  font-family:var(--mono); font-size:12px; letter-spacing:0.06em;
  padding:7px 14px; border:1px solid var(--line); border-radius:999px; color:var(--fog);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.legal__toc a:hover{ border-color:var(--line-cyan); color:var(--cyan); }
.legal h2{
  font-family:var(--display); font-weight:600; font-size:23px; letter-spacing:-0.01em;
  margin:48px 0 14px; padding-top:24px; border-top:1px solid var(--line);
}
.legal h3{ font-family:var(--display); font-weight:600; font-size:17px; margin:26px 0 8px; }
.legal p,.legal li{ color:var(--slate); font-size:15.5px; margin-bottom:12px; }
.legal strong{ color:var(--fog); }
.legal ul{ padding-left:22px; list-style:disc; }
.legal li{ margin-bottom:8px; }
.legal a.legal__link{ color:var(--cyan); }
.legal a.legal__link:hover{ text-decoration:underline; }
.legal__note{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:18px 20px; font-size:14px; color:var(--slate); margin:20px 0;
}
.legal__back{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--slate); }
.legal__back:hover{ color:var(--cyan); }

/* ===== Guías (reutilizan el layout .legal) ===== */
.legal__crumb{ font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--slate); margin-bottom:18px; }
.legal__crumb a{ color:var(--cyan); }
.legal__crumb a:hover{ text-decoration:underline; }
.legal__crumb span{ color:var(--fog); }
.legal__cta{
  margin:36px 0; padding:24px 22px; border:1px solid var(--line-cy); border-radius:var(--radius-sm);
  background:linear-gradient(180deg, rgba(45,212,222,0.07), rgba(45,212,222,0));
}
.legal__cta-text{ color:var(--fog); margin-bottom:16px; }
.legal__back-wrap{ margin-top:42px; padding-top:24px; border-top:1px solid var(--line); }

/* ===== Hub de guías + relacionadas ===== */
.legal .gcards{ list-style:none; padding:0; margin:34px 0 10px; display:grid; gap:14px; }
.legal .gcard{ margin:0; }
.gcard a{
  display:block; padding:20px 22px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--panel); transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.gcard a:hover{ border-color:var(--line-cy); transform:translateY(-2px); }
.gcard__kicker{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--cyan); }
.gcard__title{ display:block; font-family:var(--display); font-weight:600; font-size:19px; color:var(--fog); margin:6px 0 6px; }
.gcard__desc{ color:var(--slate); font-size:14.5px; margin:0; }

/* Portada de artículo de blog */
.legal__hero{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);margin:6px 0 26px;aspect-ratio:900/506;object-fit:cover}