/* ==========================================================================
   Mis Dulces Sueños — legal.css
   Aviso legal, privacidad y cookies. Se carga después de base, layout y
   components: sólo añade lo propio de las páginas de lectura larga.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cabecera de la página · campo crema
   -------------------------------------------------------------------------- */
.ley-cab {
  background: var(--c-crema);
  padding-top: calc(var(--cab-alto) + clamp(var(--e6), 5vw, var(--e8)));
  padding-bottom: clamp(var(--e7), 6vw, var(--e8));
}

.ley-volver {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  margin-bottom: var(--e5);
  font-size: var(--t-pq);
  text-decoration: none;
}
.ley-volver svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transform: scaleX(-1);
  transition: transform .25s var(--salida);
}
.ley-volver:hover { text-decoration: underline; }
.ley-volver:hover svg { transform: scaleX(-1) translateX(3px); }

.ley-fecha {
  margin-top: var(--sep-titulo);
  font-size: var(--t-pq);
  color: var(--c-marron-suave);
}

/* En resumen: tres columnas separadas por filete, nunca tres tarjetas */
.ley-resumen {
  margin-top: clamp(var(--e6), 4vw, var(--e7));
  padding-top: var(--e5);
  border-top: 2px solid var(--c-marron);
}
.ley-resumen__t {
  font-size: 1.05rem;
  letter-spacing: .07em;
  color: var(--c-marron-suave);
  margin-bottom: var(--e4);
}
.ley-resumen dl { display: grid; gap: var(--e5); }
.ley-resumen dt {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  line-height: 1.3;
  margin-bottom: var(--e2);
}
.ley-resumen dd {
  font-size: var(--t-pq);
  color: var(--c-marron-suave);
  max-width: 40ch;
}

@media (min-width: 52em) {
  .ley-resumen dl { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .ley-resumen dl > div { padding-inline: clamp(var(--e5), 2.5vw, var(--e6)); }
  .ley-resumen dl > div + div { border-left: 1px solid var(--c-beige); }
  .ley-resumen dl > div:first-child { padding-left: 0; }
  .ley-resumen dl > div:last-child { padding-right: 0; }
}

/* --------------------------------------------------------------------------
   Cuerpo: índice + texto
   -------------------------------------------------------------------------- */
.ley {
  padding-block: clamp(var(--e7), 7vw, var(--e9));
  display: grid;
  gap: var(--e7);
}

@media (min-width: 62em) {
  .ley { grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(var(--e7), 6vw, var(--e9)); }
  .ley-indice { position: sticky; top: calc(var(--cab-alto) + var(--e6)); align-self: start; }
}

.ley-indice__t {
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: .07em;
  color: var(--c-marron-suave);
  margin-bottom: var(--e3);
}
.ley-indice ol { border-left: 1px solid var(--c-beige); }
.ley-indice a {
  position: relative;
  display: block;
  padding: .45rem 0 .45rem var(--e4);
  font-size: var(--t-pq);
  line-height: 1.4;
  color: var(--c-marron-suave);
  text-decoration: none;
  transition: color .2s var(--salida);
}
/* Activo: color y marca a la vez, nunca una sola señal */
.ley-indice a::before {
  content: "";
  position: absolute; left: -1px; top: .35rem; bottom: .35rem;
  width: 2px;
  background: var(--c-azul-fuerte);
  transform: scaleY(0);
  transition: transform .3s var(--salida);
}
.ley-indice a:hover { color: var(--c-azul-fuerte); }
.ley-indice a[aria-current="true"] { color: var(--c-azul-fuerte); }
.ley-indice a[aria-current="true"]::before { transform: scaleY(1); }

/* En móvil el índice es una lista corta antes del texto */
@media (max-width: 61.99em) {
  .ley-indice ol { columns: 2 12rem; column-gap: var(--e5); }
  .ley-indice li { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   Texto
   -------------------------------------------------------------------------- */
.ley-texto { max-width: 68ch; }
.ley-texto > section { scroll-margin-top: calc(var(--cab-alto) + var(--e5)); }
.ley-texto > section + section {
  margin-top: clamp(var(--e7), 5vw, var(--e8));
  padding-top: clamp(var(--e6), 4vw, var(--e7));
  border-top: var(--filete);
}
.ley-texto h2 { font-size: var(--t-h3); margin-bottom: var(--e4); }
.ley-texto h3 {
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: 0;
  margin: var(--e5) 0 var(--e2);
}
.ley-texto p { color: var(--c-marron-suave); }
.ley-texto strong { color: var(--c-marron); font-weight: 600; }

.ley-texto ul { margin: 0 0 1.4rem; }
.ley-texto ul:last-child { margin-bottom: 0; }
.ley-texto li {
  position: relative;
  padding: .3rem 0 .3rem 1.4rem;
  color: var(--c-marron-suave);
}
.ley-texto li::before {
  content: "";
  position: absolute; left: .25rem; top: calc(.3rem + .72em);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-azul);
}

/* Ficha de datos: filas separadas por filete */
.ley-ficha { margin: 0 0 1.4rem; border-top: var(--filete); }
.ley-ficha > div {
  display: grid;
  gap: .1rem var(--e5);
  padding-block: .8rem;
  border-bottom: var(--filete);
}
.ley-ficha dt { font-size: var(--t-pq); color: var(--c-marron-suave); }
.ley-ficha dd { color: var(--c-marron); overflow-wrap: anywhere; }
@media (min-width: 40em) {
  .ley-ficha > div { grid-template-columns: 11rem 1fr; }
}

/* Aviso que importa más que el resto (urgencias) */
.ley-texto .ley-aviso {
  margin: var(--e5) 0;
  padding: var(--e4) var(--e5);
  border-left: 2px solid var(--c-azul-fuerte);
  background: var(--c-azul-tenue);
  max-width: none;
  color: var(--c-marron);
}

/* --------------------------------------------------------------------------
   Dato pendiente. El discontinuo es la misma señal que el hueco de la
   fotografía de Eva: esto falta, no es una decisión de diseño.
   Buscar «pendiente» en /legal para encontrar todos antes de publicar.
   -------------------------------------------------------------------------- */
.pendiente {
  display: inline-block;
  padding: 0 .45em;
  border: 1.5px dashed var(--c-marron-tenue);
  border-radius: var(--r-pq);
  font-size: .9em;
  line-height: 1.6;
  color: var(--c-marron-suave);
  background: color-mix(in srgb, var(--c-crema) 52%, var(--c-fondo));
}

/* Enlace del pie que corresponde a la página abierta */
.pie__legal a[aria-current="page"] { color: var(--c-crema); text-decoration-color: currentColor; }