/* ============================================================================
   LOS DOCUMENTOS LEGALES · /legal/tos y /legal/privacy
   ============================================================================

   Solo lo usa legal/index.html. Va aparte de base.css porque ninguna otra
   página lo necesita: meterlo allí sería cargar tablas legales en la
   portada.

   CÓMO SE LEE LA PÁGINA
   ---------------------
   Una sola página para los dos documentos (legal/index.html):
   · El hero, y debajo LO COMÚN, una vez: quiénes somos, definiciones,
     contacto y vigencia. Es la sección «00» del índice flotante.
   · El conmutador Términos ⇄ Privacidad: dos pestañas con un indicador
     amarillo que se desliza (legal.js cambia sin recargar).
   · El documento elegido: su cabecera, «Lo esencial» —cuatro fichas tipo
     marcador, resumen y no índice— y sus secciones numeradas, a una columna
     de lectura (46rem). El índice es el flotante (assets/indice.js), que
     solo lee las secciones del documento visible. Llegar al final lo
     celebra su check.

   LAS TABLAS NO EMPUJAN LA PÁGINA
   -------------------------------
   Llevan su propio scroll dentro del marco. Y por debajo de 560px se
   convierten en fichas: cada celda con su encabezado delante, que legal.js
   copia del <thead> a `data-th`. Sin JS se quedan en tabla con scroll, que
   se lee igual.

   LOS MARCOS USAN EL ARO `--filo`, como todo el sitio: `clip-path` se come el
   borde en los chaflanes. La receta, y por qué va dentro del `@supports`,
   está junto a `--filo` en marca.css.
   ========================================================================== */

/* Los botones de la barra. base.css no los declara: cada página pone los
   suyos, y estos son los del media kit (misma barra: Discord, uno amarillo y
   la hamburguesa). */
.nav-cta{display:flex;align-items:center;gap:.5rem;flex:none}
/* El mismo encaje que la portada y el media kit en 360px: logo 124, botones
   compactos. Sin esto la barra se pasa 21px y la página se arrastra. */
@media (max-width:620px){
  .nav-brand-logo img{height:24px;width:auto}
  .nav-in{gap:.6rem}
  .nav-cta .btn:not(.btn-icon){padding:.7rem .9rem;font-size:var(--tipo-leyenda)}
  .nav-cta .btn-icon{padding:0 .78rem}
  .nav-toggle{width:44px;padding:0 11px;flex:none}
}

/* El ancla cae debajo de la barra fija, no escondida detrás. */
.lg-sec{scroll-margin-top:calc(var(--nav-h) + 1rem)}

/* ── HERO ─────────────────────────────────────────────────────────────── */
.lg-hero{padding:3.5rem 0 2.25rem}
.lg-hero h1{font-size:var(--tipo-hero);margin:.7rem 0 1.1rem;overflow-wrap:anywhere}
.lg-lead{max-width:44rem;font-size:var(--tipo-entradilla);color:var(--texto-2)}

/* ── LO COMÚN · la intro ──────────────────────────────────────────────── */
.lg-intro{padding-top:.4rem;scroll-margin-top:calc(var(--nav-h) + 1rem)}
.lg-intro > h2.eyebrow{font-size:var(--tipo-antetitulo);line-height:1.6;margin-bottom:1rem;display:block}
/* Dos columnas: a la izquierda tres bloques cortos, a la derecha las
   definiciones, que son las largas, ocupando las tres filas. */
.lg-intro-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:var(--esp-rejilla)}
.lg-bloque{
  position:relative;padding:1.15rem 1.25rem 1.2rem;background:var(--surface);
  clip-path:var(--bevel-sm);
  --filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
  scroll-margin-top:calc(var(--nav-h) + 1rem);
}
.lg-bloque-def{grid-column:2;grid-row:1 / span 3}
.lg-bloque h3{
  font-family:var(--fuente-display-e);font-size:var(--tipo-dato);line-height:1;
  color:var(--yellow);margin:0 0 .6rem;text-transform:uppercase;letter-spacing:.01em;font-weight:700;
}
.lg-bloque p{font-size:var(--tipo-descripcion);line-height:1.65;color:var(--texto-2);margin-bottom:.7rem}
.lg-bloque p:last-child{margin-bottom:0}
.lg-bloque strong{color:var(--texto-1);font-weight:600}
.lg-bloque .btn{margin-top:.2rem}
.lg-chico{font-size:var(--tipo-leyenda)!important;color:var(--texto-3)!important}
.lg-bloque dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;font-size:var(--tipo-descripcion);line-height:1.55}
.lg-bloque dt{color:var(--texto-1);font-weight:600}
.lg-bloque dd{color:var(--texto-2)}
.lg-bloque:target{--filo-color:var(--yellow)}

/* ── EL CONMUTADOR ────────────────────────────────────────────────────── */
/* Dos columnas iguales para que el indicador sea medio ancho exacto y
   deslizarlo sea un translateX(100%). El indicador es el ::before; el aro,
   el ::after, como en todo marco biselado. */
.lg-tabs{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  margin:2.4rem 0 .4rem;background:var(--surface);
  scroll-margin-top:calc(var(--nav-h) + .75rem);
  clip-path:var(--bevel-sm);
  --filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
}
.lg-tabs::before{
  content:'';position:absolute;z-index:1;left:0;bottom:0;width:50%;height:3px;background:var(--yellow);
  transition:transform .22s cubic-bezier(.3,.7,.2,1);
}
.lg-tabs[data-activo="privacy"]::before{transform:translateX(100%)}
.lg-tabs a{
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:1.05rem .8rem;font-size:var(--tipo-control);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);transition:color .15s ease, background .15s ease;
}
.lg-tabs a:hover{color:var(--texto-1);background:rgba(242,232,220,.04)}
.lg-tabs a[aria-selected="true"]{color:var(--texto-1);background:var(--surface-2)}
.lg-tabs a:focus-visible{outline:2px solid var(--yellow);outline-offset:-5px}
/* El nombre corto, para móvil: los textos de un menú caben en una línea. */
.lg-tab-c{display:none}
/* Sin JS no hay pestaña activa que marcar: legal.js pone data-activo al
   arrancar, y hasta entonces el indicador está en la primera, que es la
   que sirve /legal/ a secas. */

/* ── LA CABECERA DE CADA DOCUMENTO ────────────────────────────────────── */
.lg-doc{padding-top:1.8rem}
.lg-doc[hidden]{display:none}
.lg-doc-cab{margin-bottom:1.4rem}
.lg-doc-t{font-size:var(--tipo-titulo);margin:.5rem 0 .7rem}
.lg-doc-sub{max-width:44rem;color:var(--texto-3);font-size:var(--tipo-cuerpo)}
.lg-doc-sub a{color:var(--texto-1);text-decoration:underline;text-decoration-color:rgba(255,198,33,.6);text-underline-offset:3px}
.lg-doc-sub a:hover{color:var(--yellow)}

/* ── LO ESENCIAL · el marcador ────────────────────────────────────────── */
.lg-esencial{margin:.5rem 0 1rem}
.lg-esencial > .eyebrow{margin-bottom:.9rem}
.lg-fichas{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--esp-rejilla);list-style:none}
.lg-ficha{
  position:relative;padding:1.1rem 1.1rem 1.2rem;background:var(--surface);
  clip-path:var(--bevel-sm);
  --filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
  transition:transform .2s ease, background .2s ease;
}
.lg-ficha:hover{transform:translateY(-3px);background:var(--surface-2);--filo-color:rgba(255,198,33,.55)}
.lg-ficha b{
  display:block;font-family:var(--fuente-display-e);font-weight:800;
  font-size:var(--tipo-numeral);line-height:.9;color:var(--yellow);text-transform:uppercase;
  transition:transform .2s ease;transform-origin:left bottom;
}
.lg-ficha:hover b{transform:scale(1.06)}
.lg-ficha span{display:block;margin-top:.45rem;font-size:var(--tipo-leyenda);line-height:1.45;color:var(--texto-3)}
.lg-ficha a{color:var(--texto-1);text-decoration:underline;text-decoration-color:rgba(255,198,33,.5);text-underline-offset:3px;overflow-wrap:anywhere}

/* ── EL CUERPO ────────────────────────────────────────────────────────── */
.lg-cuerpo{max-width:46rem;padding-bottom:4rem}
.lg-sec{padding:2.4rem 0 .6rem;border-top:1px solid var(--line)}
/* La primera no lleva raya: debajo de las fichas, que van a todo el ancho,
   una raya de 46rem se leía como cortada. */
.lg-sec:first-child{border-top:0;padding-top:1.6rem}
.lg-sec h2{font-weight:700;font-family:var(--fuente-display-e);
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  font-size:var(--tipo-subtitulo);margin-bottom:1.1rem;
}
/* El número del antetítulo, como en el resto del sitio («01 / …»). */
.lg-n{
  font-family:'Poppins',sans-serif;font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.22em;
  color:var(--yellow);transform:translateY(-.35em);
}
.lg-n::after{content:' /'}
.lg-sec h3{
  font-family:'Poppins',sans-serif;text-transform:none;letter-spacing:0;line-height:1.4;
  font-size:var(--tipo-entradilla);font-weight:600;margin:1.6rem 0 .5rem;color:var(--texto-1);
}
.lg-sec p,.lg-sec li{font-size:var(--tipo-cuerpo);line-height:1.75;color:var(--texto-2)}
.lg-sec p{margin-bottom:1rem}
.lg-sec strong{color:var(--texto-1);font-weight:600}
.lg-sec ul{list-style:none;margin:0 0 1rem}
.lg-sec li{position:relative;padding-left:1.35rem;margin:.45rem 0}
.lg-sec li::before{
  content:'';position:absolute;left:.15rem;top:.72em;width:6px;height:6px;
  background:var(--yellow);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:rotate(45deg);
}
.lg-sec a:not(.btn):not(.copy-mail){
  color:var(--texto-1);text-decoration:underline;text-decoration-color:rgba(255,198,33,.6);
  text-underline-offset:3px;transition:color .15s ease, text-decoration-color .15s ease;
}
.lg-sec a:not(.btn):not(.copy-mail):hover{color:var(--yellow);text-decoration-color:var(--yellow)}
.lg-sec code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;background:var(--surface-2);padding:.1rem .35rem}
/* La exclusión de garantías en mayúsculas, como manda la costumbre legal,
   pero sin gritar: un punto menor y con aire. */
.lg-caps{text-transform:uppercase;font-size:var(--tipo-descripcion)!important;letter-spacing:.03em}

/* ── NOTAS ────────────────────────────────────────────────────────────── */
.lg-nota{
  position:relative;margin:1.2rem 0 1.4rem;padding:1rem 1.2rem 1.05rem 1.4rem;
  background:var(--surface);clip-path:var(--bevel-sm);
  --filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color)), inset 3px 0 0 var(--yellow);
}
.lg-nota strong:first-child{display:block;margin-bottom:.3rem;color:var(--yellow);font-weight:600}
.lg-nota p:last-child{margin-bottom:0}
.lg-18{
  display:inline-block;margin-right:.5rem;padding:.28rem .5rem .26rem;
  font-family:'Poppins',sans-serif;font-size:var(--tipo-etiqueta);font-weight:700;letter-spacing:.06em;line-height:1;
  color:var(--sobre-amarillo);background:var(--yellow);
  clip-path:var(--bevel-sm);vertical-align:.12em;
}

/* ── TABLAS ───────────────────────────────────────────────────────────── */
.lg-tabla{
  position:relative;overflow-x:auto;margin:.8rem 0 1.4rem;background:var(--surface);
  --filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
}
.lg-tabla table{width:100%;border-collapse:collapse;font-size:var(--tipo-descripcion);min-width:32rem}
.lg-tabla th,.lg-tabla td{text-align:left;vertical-align:top;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.lg-tabla th{
  font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--yellow);background:var(--surface-2);
}
.lg-tabla td{color:var(--texto-2);line-height:1.6}
.lg-tabla td:first-child{color:var(--texto-1);font-weight:500}
.lg-tabla tr:last-child td{border-bottom:0}
.lg-tabla tbody tr{transition:background .15s ease}
.lg-tabla tbody tr:hover{background:rgba(242,232,220,.03)}

/* ── CONTACTO ─────────────────────────────────────────────────────────── */
.lg-contacto{display:flex;flex-wrap:wrap;gap:.7rem;margin:.4rem 0 1rem}

/* ── PIE ──────────────────────────────────────────────────────────────── */
.lg-pie{border-top:1px solid var(--line);padding:2rem 0;font-size:var(--tipo-leyenda);color:var(--texto-3)}
.lg-pie .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem 1.5rem;flex-wrap:wrap}
.lg-pie nav{display:flex;gap:1.3rem;flex-wrap:wrap}
.lg-pie a{transition:color .15s ease}
.lg-pie a:hover{color:var(--texto-1)}
.lg-pie a[aria-current="page"]{color:var(--texto-1)}

/* ── EL ARO ───────────────────────────────────────────────────────────── */
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .lg-tabs::after,.lg-bloque::after,.lg-ficha::after,.lg-nota::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    clip-path:var(--filo-sm);background:var(--filo-color);
  }
  /* La nota conserva su barra amarilla: solo se apaga el contorno de reserva. */
  .lg-nota{box-shadow:inset 3px 0 0 var(--yellow)}
  /* La tabla es un rectángulo, sin chaflán: su contorno de reserva ya es
     completo y no hace falta aro. Se vuelve a encender aquí porque el
     :root de base.css apaga TODAS las reservas dentro de este @supports. */
  .lg-tabla{box-shadow:inset 0 0 0 1px var(--line)}
}

/* ── ANCHOS ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .nav-toggle{display:flex}
  .lg-fichas{grid-template-columns:repeat(2,1fr)}
  .lg-intro-rejilla{grid-template-columns:1fr}
  .lg-bloque-def{grid-column:auto;grid-row:auto}
}
@media (max-width:620px){
  .lg-hero{padding:2.4rem 0 1.6rem}
  .lg-tabs a{padding:.95rem .4rem;font-size:var(--tipo-leyenda);letter-spacing:.12em}
  .lg-tab-l{display:none}
  .lg-tab-c{display:inline}
}
@media (max-width:560px){
  /* La tabla pasa a fichas: una fila, un bloque; cada celda con su
     encabezado delante (data-th, que pone legal.js). */
  .lg-tabla{overflow:visible;background:none;box-shadow:none!important}
  .lg-tabla table{min-width:0}
  .lg-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .lg-tabla table,.lg-tabla tbody,.lg-tabla tr,.lg-tabla td{display:block}
  .lg-tabla tr{background:var(--surface);border:1px solid var(--line);margin-bottom:.6rem;padding:.35rem 0}
  .lg-tabla td{border:0;padding:.35rem .9rem}
  .lg-tabla td[data-th]::before{
    content:attr(data-th);display:block;font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--yellow);margin-bottom:.1rem;
  }
  .lg-ficha{padding:.9rem .85rem 1rem}
  .lg-ficha b{font-weight:700;font-family:var(--fuente-display-e);font-size:var(--tipo-dato)}
}

@media (prefers-reduced-motion: reduce){
  .lg-ficha,.lg-ficha b,.lg-tabs a,.lg-tabs::before,.lg-tabla tbody tr{transition:none}
  .lg-ficha:hover,.lg-ficha:hover b{transform:none}
}

/* ── IMPRESIÓN ────────────────────────────────────────────────────────── */
@media print{
  .nav,.prog,.lg-pie,.lg-tabs,.lg-bloque .btn,.lg-contacto,.indice,.lang-sw,.lang-tip{display:none!important}
  body{background:#fff;color:#000}
  .lg-hero h1,.lg-sec h2,.lg-doc-t,.lg-bloque h3,.lg-ficha b,.lg-n,.lg-nota strong:first-child,.lg-tabla th{color:#000!important}
  .lg-sec p,.lg-sec li,.lg-tabla td,.lg-lead,.lg-ficha span{color:#222!important;opacity:1}
  .lg-ficha,.lg-nota,.lg-bloque,.lg-tabla,.lg-tabla th{background:#fff!important}
  .lg-bloque p,.lg-bloque dd,.lg-doc-sub{color:#222!important}
  .lg-sec{break-inside:avoid-page}
  .lg-sec a{color:#000!important}
}