/* ============================================================
   PetEco · Páginas legales (aviso legal, privacidad, cookies)
   Tipografía de lectura larga sobre el sistema de diseño del sitio
   ============================================================ */

.legal{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:start; }

/* ---------- Índice lateral ---------- */
.legal-toc{ position:sticky; top:calc(var(--nav-h,96px) + 20px); }
.legal-toc h2{ font-family:'Hanken Grotesk', system-ui, sans-serif; font-size:13px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.legal-toc ol{ list-style:none; display:flex; flex-direction:column; gap:2px; counter-reset:toc; }
.legal-toc a{ display:block; padding:7px 12px; border-radius:10px; font-size:14.5px; color:var(--muted);
  border-left:2px solid transparent; transition:color .25s var(--ease), background .25s var(--ease); }
.legal-toc a:hover{ color:var(--fg); background:var(--bg-soft); }

/* ---------- Cuerpo ---------- */
/* min-width:0 evita que la tabla ancha estire la columna y desborde la página */
.legal-body{ max-width:74ch; min-width:0; }
.legal-body section + section{ margin-top:clamp(34px,4vw,46px); }
.legal-body h2{ font-size:clamp(21px,2.6vw,25px); margin-bottom:14px; scroll-margin-top:calc(var(--nav-h,96px) + 24px); }
.legal-body h3{ font-size:17.5px; margin:24px 0 10px; }
.legal-body p{ color:var(--fg-2); margin-bottom:14px; }
.legal-body ul, .legal-body ol{ margin:0 0 16px 20px; color:var(--fg-2); display:flex; flex-direction:column; gap:9px; }
.legal-body li{ padding-left:4px; }
.legal-body a{ color:var(--brand-ink); text-decoration:underline; text-underline-offset:2px; }
.legal-body a:hover{ color:var(--fg); }
.legal-body strong{ color:var(--fg); font-weight:600; }
.legal-body .muted{ color:var(--muted); }

/* Ficha de datos (aviso legal) */
.legal-card{ background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-sm); padding:24px 26px; margin-bottom:18px; }
.legal-dl{ display:grid; grid-template-columns:auto 1fr; gap:10px 22px; font-size:15.5px; }
.legal-dl dt{ font-family:'Hanken Grotesk', system-ui, sans-serif; font-weight:600; color:var(--muted); }
.legal-dl dd{ color:var(--fg); }
.legal-dl dd a{ color:var(--brand-ink); }

/* Aviso de dato pendiente de confirmar por la clínica */
.legal-todo{ color:var(--muted); font-style:italic; white-space:nowrap; }

/* Tablas (cookies, tratamientos) */
.legal-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:18px; }
.legal-table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:640px; }
.legal-table th, .legal-table td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:top; }
.legal-table th{ font-family:'Hanken Grotesk', system-ui, sans-serif; font-weight:600; font-size:13.5px;
  letter-spacing:.03em; text-transform:uppercase; color:var(--muted); background:var(--bg-soft); }
.legal-table tr:last-child td{ border-bottom:0; }
.legal-table code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px;
  background:var(--grey); padding:2px 6px; border-radius:6px; }

/* Caja de acción (configurar cookies / ejercer derechos) */
.legal-box{ background:var(--brand-soft); border-radius:var(--radius-sm); padding:24px 26px; margin:22px 0; }
.legal-box h3{ margin-top:0; color:var(--brand-ink); }
.legal-box p{ color:var(--fg-2); }
.legal-box .btn{ margin-top:8px; }

.legal-updated{ margin-top:clamp(34px,4vw,46px); padding-top:22px; border-top:1px solid var(--border);
  font-size:14.5px; color:var(--muted); }

@media (max-width:900px){
  .legal{ grid-template-columns:minmax(0,1fr); }
  .legal-toc{ position:static; border:1px solid var(--border); border-radius:var(--radius-sm); padding:20px 22px; }
  .legal-toc ol{ gap:0; }
}
@media (max-width:560px){
  .legal-dl{ grid-template-columns:1fr; gap:3px 0; }
  .legal-dl dd{ margin-bottom:10px; }
}

/* Aviso de tabla desplazable: solo cuando de verdad se desplaza */
.legal-table-hint{ display:none; }
@media (max-width:700px){
  .legal-table-hint{ display:block; margin:-10px 0 18px; font-size:13px; color:var(--muted); }
}