/* =====================================================================
   IN STAGE — legales.css
   Hoja COMPARTIDA por las cuatro páginas legales:
   aviso-legal.html · privacidad.html · cookies.html · terminos.html
   Layout "página legal": hero compacto + índice + prosa legible.
   (Los tokens y componentes vienen de base.css)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) HERO COMPACTO
--------------------------------------------------------------------- */
.legal-hero{
  background: var(--gris-fondo);
  border-bottom: 1px solid var(--linea);
  padding-block: clamp(3rem, 7vw, 4.75rem);
}
.legal-hero h1{
  font-size: clamp(2.4rem, 5.5vw, 4.25rem);
  max-width: 18ch;
}
.legal-hero__meta{
  margin-top: var(--sp-2);
  color: var(--texto-suave);
  font-size: var(--fs-small);
  max-width: 65ch;
}

/* ---------------------------------------------------------------------
   2) LAYOUT: ÍNDICE (aside pegajoso) + PROSA
--------------------------------------------------------------------- */
.legal-layout{
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  align-items: start;
}
@media (min-width: 900px){
  .legal-layout{ grid-template-columns: 280px minmax(0, 1fr); }
  .legal-indice{ position: sticky; top: calc(var(--header-h) + 24px); }
}

/* Índice de secciones (tarjeta con numeración rosa) */
.legal-indice{
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-m);
  padding: var(--sp-4);
}
.legal-indice ol{
  counter-reset: indice;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.legal-indice a{
  counter-increment: indice;
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  transition: color var(--t-micro) ease-out;
}
.legal-indice a::before{
  content: counter(indice, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  color: var(--rosa-tinta);
  flex: none;
}
.legal-indice a:hover{ color: var(--morado); }

/* ---------------------------------------------------------------------
   3) PROSA LEGAL (ancho de lectura, h2 numerados, h3, listas)
--------------------------------------------------------------------- */
.legal-prosa{ counter-reset: apartado; max-width: 70ch; }
.legal-prosa > section + section{ margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* h2 con numeral editorial (detalle distintivo del spec) */
.legal-prosa h2{
  counter-increment: apartado;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: var(--sp-3);
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.legal-prosa h2::before{
  content: counter(apartado, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 1.35rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--morado);
  flex: none;
  user-select: none;
}
.legal-prosa h3{
  font-size: 1.15rem;
  margin: var(--sp-4) 0 var(--sp-2);
}
.legal-prosa p{ max-width: none; color: var(--tinta); }
.legal-prosa p + p{ margin-top: var(--sp-2); }
.legal-prosa p a{ color: var(--morado); text-underline-offset: 3px; }
.legal-prosa ul{ margin-top: var(--sp-2); }
.legal-prosa .lista-puntitos li + li{ margin-top: 6px; }
.legal-prosa .tabla-envoltura{ margin-block: var(--sp-3); }

/* ---------------------------------------------------------------------
   4) FICHA DE DATOS DEL TITULAR (tarjeta gris con dl)
--------------------------------------------------------------------- */
.legal-datos{
  background: var(--gris-fondo);
  border-radius: var(--radio-m);
  padding: var(--sp-4);
  margin-block: var(--sp-3);
  display: grid;
  gap: var(--sp-2) var(--sp-4);
}
@media (min-width: 640px){ .legal-datos{ grid-template-columns: repeat(2, 1fr); } }
.legal-datos div{ display: flex; flex-direction: column; gap: 2px; }
.legal-datos dt{
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rosa-tinta);
}
.legal-datos dd{
  margin: 0;
  font-weight: 600;
  color: var(--tinta);
}
.legal-datos dd a{ color: var(--morado); text-decoration: none; }
.legal-datos dd a:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* Nota destacada (aviso corto dentro de la prosa) */
.legal-nota{
  border-left: 3px solid var(--rosa);
  background: var(--rosa-palo);
  border-radius: 0 var(--radio-s) var(--radio-s) 0;
  padding: var(--sp-2) var(--sp-3);
  margin-block: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--morado);
}

/* Pie de la prosa: fecha + volver arriba */
.legal-pie{
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-small);
  color: var(--texto-suave);
}