/* contasuma — páginas legales (privacidad y términos).
 *
 * Estas dos páginas se leen, no se ojean. Todo aquí sirve a eso:
 *
 *  - Medida corta. Una línea de 90 caracteres es donde el ojo pierde el
 *    renglón, y en un texto legal perder el renglón es dejar de leer.
 *  - Sin letra pequeña. Literalmente: no hay ningún tamaño por debajo del
 *    cuerpo del texto. Si algo importa lo suficiente para estar escrito,
 *    importa lo suficiente para leerse.
 *  - Índice al principio, porque a estas páginas se viene a buscar una cosa
 *    concreta.
 */

/* El encabezado comparte la MEDIDA del texto, no el ancho del sitio. Con el
   .container de 1120 px, el titulo empezaba a la izquierda del todo y el texto
   arrancaba 80 px mas adentro: dos columnas distintas en la misma pagina. */
.legal-hero .container{max-width:74ch}

.legal-hero{
  padding-top:clamp(40px,7vw,76px);
  padding-bottom:clamp(28px,5vw,48px);
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%, rgba(5,150,105,.07), transparent 60%),
    var(--paper);
  border-bottom:1px solid var(--line);
}
.legal-hero h1{
  font-size:clamp(2rem,5vw,3rem);font-weight:700;letter-spacing:-.02em;
  margin:14px 0 16px;max-width:20ch;
}
.legal-hero h1 em{font-style:normal;color:var(--emerald-dark)}
.legal-hero p{font-size:1.1rem;color:var(--ink-soft);max-width:60ch}
.legal-fecha{
  margin-top:20px;font-size:.85rem;color:var(--ink-soft);
  border-top:1px solid var(--line);padding-top:14px;display:inline-block;
}

.legal{
  max-width:74ch;
  padding-top:clamp(32px,5vw,56px);
  padding-bottom:88px;
}
.legal section{margin-bottom:44px;scroll-margin-top:88px}
.legal h2{
  font-size:1.4rem;font-weight:700;letter-spacing:-.01em;
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
.legal h2 em{font-style:normal;color:var(--emerald-dark)}
.legal h3{
  font-family:'Sora',sans-serif;font-size:1.02rem;font-weight:600;
  margin:26px 0 8px;
}
.legal p{margin-bottom:14px;color:var(--ink)}
.legal a{
  color:var(--emerald-dark);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
}
.legal a:hover{color:var(--emerald-deep)}

/* ── índice ── */
.legal-indice{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin-bottom:44px;
}
.legal-indice h2{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-soft);border:none;padding:0;margin-bottom:14px;
}
.legal-indice ol{
  list-style:none;counter-reset:apartado;
  columns:2;column-gap:32px;
}
.legal-indice li{counter-increment:apartado;margin-bottom:9px;break-inside:avoid}
.legal-indice li::before{
  content:counter(apartado) ".";
  font-family:'IBM Plex Mono',monospace;font-size:.82rem;
  color:var(--emerald);margin-right:8px;
}
.legal-indice a{font-weight:500;color:var(--ink);text-decoration:none}
.legal-indice a:hover{color:var(--emerald-dark);text-decoration:underline;text-underline-offset:3px}
.legal-indice em{font-style:normal;color:var(--emerald-dark)}

/* ── bloque destacado ──
   Para lo que no puede pasar desapercibido: el resumen de la privacidad y el
   "lo que contasuma NO es" de los términos. Es exactamente lo que en otros
   sitios va en letra pequeña. */
.legal-destacado{
  background:var(--emerald-soft);border:1px solid #BBEBD5;
  border-radius:var(--radius);padding:26px 28px;
}
.legal-destacado h2{border-bottom-color:#BBEBD5}

.lista-marcada{list-style:none;margin-bottom:14px}
.lista-marcada li{
  position:relative;padding-left:26px;margin-bottom:11px;
}
.lista-marcada li::before{
  content:"";position:absolute;left:4px;top:.62em;
  width:7px;height:7px;border-radius:2px;background:var(--emerald);
}

.legal-nota{
  border-left:3px solid var(--amber);
  padding:2px 0 2px 16px;color:var(--ink-soft);
}

.legal-vecina{
  margin-top:56px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--ink-soft);
}

@media(max-width:640px){
  .legal-indice ol{columns:1}
  .legal-destacado{padding:20px 18px}
}