/* ============================================================
   Aviso legal y políticas — El Clan del Dojo
   Hereda paleta y tipografías de estilo.css. Aquí manda LEER:
   medida de línea corta, jerarquía clara y un índice pegajoso.
   ============================================================ */

.legal .cabecera{position:fixed}
.legal__main{padding:calc(var(--cabecera) + clamp(2.5rem,6vw,4.5rem)) 0 clamp(3.5rem,7vw,6rem)}

/* Columna de lectura centrada. El contenedor general de la web son 1760 px,
   pero aquí el texto se limita a 74ch: sin esto, todo quedaría pegado a la
   izquierda con media pantalla en blanco. La cabecera y el pie mantienen el
   ancho normal del sitio. */
.legal__main .env{width:min(100% - 2.6rem,940px)}

.legal__main h1{
  font-size:clamp(2rem,4.6vw,3.1rem);margin:0 0 .6rem;line-height:1.14;
}
.legal__intro{color:var(--suave);margin:0 0 clamp(2rem,4vw,3rem);font-size:1.05rem}

/* ------------------------------ índice ------------------------------ */
.indice{
  background:var(--h-papel);border:1px solid var(--borde);
  padding:1.5rem 1.6rem;margin-bottom:clamp(2.4rem,5vw,3.6rem);
  max-width:640px;
}
.indice__tit{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--suave);margin:0 0 .9rem;
}
.indice ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.indice a{
  font-family:var(--titulo);font-size:1.05rem;color:var(--negro);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .25s ease;
}
.indice a:hover,.indice a:focus-visible{border-bottom-color:var(--negro)}

/* --------------------------- cuerpo del texto ----------------------- */
.legal__texto{max-width:74ch}
.legal__texto p{margin:0 0 1.15em;line-height:1.78}
.legal__texto a{color:var(--acento);text-decoration:underline;text-underline-offset:2px}
.legal__texto a:hover,.legal__texto a:focus-visible{color:var(--negro)}

.legal__texto h2{
  font-size:clamp(1.5rem,3.2vw,2.1rem);margin:clamp(3rem,6vw,4.5rem) 0 1.2rem;
  padding-top:1.6rem;border-top:2px solid var(--negro);scroll-margin-top:calc(var(--cabecera) + 1rem);
  display:flex;gap:.7rem;align-items:baseline;
}
.legal__texto h2 span{
  font-family:var(--cuerpo);font-size:.8rem;letter-spacing:.14em;color:var(--suave);
  flex-shrink:0;
}
.legal__texto h3{
  font-size:1.18rem;margin:2.3rem 0 .8rem;color:var(--negro);
  scroll-margin-top:calc(var(--cabecera) + 1rem);
}
.legal__texto h4{
  font-family:var(--cuerpo);font-size:.98rem;letter-spacing:.02em;
  margin:1.8rem 0 .7rem;color:var(--negro);
}
.legal__texto ol{margin:0 0 1.3em;padding-left:1.4rem;line-height:1.75}
.legal__texto ol li{margin-bottom:.5em}

/* ---------------- cuadro «Información básica» ----------------------- */
.cuadro{
  background:var(--h-papel);border-left:3px solid var(--h-sello);
  padding:1.4rem 1.6rem;margin:0 0 1.6rem;
}
.cuadro__tit{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--suave);margin:0 0 1rem !important;
}
.cuadro dl{margin:0;display:grid;gap:.75rem}
.cuadro dt{
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--h-tinta);font-weight:400;
}
.cuadro dd{margin:.15rem 0 0;font-size:.96rem;line-height:1.65;color:var(--texto)}

/* --------------------- ficha de datos «Campo: valor» ---------------- */
.ficha{list-style:none;margin:0 0 1.5em;padding:0;border-top:1px solid var(--borde)}
.ficha li{padding:.7rem 0;border-bottom:1px solid var(--borde);font-size:.97rem}
.ficha span{
  display:block;font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--suave);margin-bottom:.18rem;
}

/* ---------------------------- tabla de cookies ---------------------- */
.tabla-scroll{overflow-x:auto;margin:0 0 1.2rem;-webkit-overflow-scrolling:touch}
table.cookies{border-collapse:collapse;width:100%;min-width:640px;font-size:.86rem}
table.cookies th,table.cookies td{
  border:1px solid var(--borde);padding:.7rem .8rem;text-align:left;vertical-align:top;
}
table.cookies th{background:var(--h-papel);font-weight:400;color:var(--h-tinta);font-size:.78rem}
table.cookies td.vacia{color:var(--suave);text-align:center;padding:1.3rem .8rem}

.nota{
  background:var(--h-nino);border:1px solid var(--h-linea);
  padding:1.1rem 1.3rem;font-size:.92rem;line-height:1.68;color:var(--texto);
  margin:0 0 1.6em !important;
}

/* -------------------------------- firma ----------------------------- */
.legal__firma{
  margin:clamp(3rem,6vw,4.5rem) 0 0;padding-top:1.6rem;
  border-top:1px solid var(--borde);
  font-size:.84rem;color:var(--suave);line-height:1.7;max-width:74ch;
}

@media (max-width:640px){
  .cuadro,.indice{padding:1.2rem 1.1rem}
  .legal__texto h2{flex-direction:column;gap:.2rem}
}