/* ════════════════════════════════════════════════════════════════════
   COP · PÁGINAS LEGALES — hoja compartida  (16/09/2026)

   La usan `privacidad.html` y `terminos.html`, que son **una sola
   pieza escrita dos veces**: misma columna de lectura, mismos títulos,
   misma separación por línea. Escribirla en el `<style>` de cada una
   era garantizar que en dos semanas no se parecieran — el problema de
   las cuatro tarjetas de historial, otra vez.

   ⚠ `borrar-cuenta.html` NO SE MIGRÓ, Y ES A PROPÓSITO. Su bloque
   `.bc-*` es casi idéntico al de acá, así que la regla «se muda, no se
   copia» diría que tiene que venir. Pero esa página es la que ABRE
   GOOGLE para revisar la app, y pasarla a depender de una hoja más es
   agregarle una forma nueva de fallar a la única página cuya caída no
   aparece en ningún registro nuestro. Queda anotado como deuda, con su
   motivo, en vez de hecho a medias.

   ⚠ Estas páginas NO usan `.cop-main`: esa clase descuenta el rail
   lateral y la barra de abajo, que acá no existen. Puede llegar alguien
   que nunca abrió la app — desde la ficha de la App Store, por ejemplo.
   ════════════════════════════════════════════════════════════════════ */

/* ⚠ EN EL COMPONENTE, NUNCA CONFIANDO EN EL RESET DE LA PÁGINA: hay
   páginas de este proyecto que no traen `*{box-sizing:border-box}` y
   ahí el relleno se SUMA al ancho. Van tres veces con este mismo bug. */
.cop-leg-wrap,
.cop-leg-wrap *{box-sizing:border-box}

.cop-leg-wrap{
  max-width:640px;
  margin:0 auto;
  padding:calc(var(--gap-2xl,1.8rem) + env(safe-area-inset-top,0px)) var(--aire-contenido,16px)
          calc(2.4rem + env(safe-area-inset-bottom,0px));
}
/* ⚠ El aire de ARRIBA suma el área segura (25/09/2026): estas páginas no
   tienen topbar, y dentro de la app la marca quedaba a 29 px, debajo del
   notch. `_app-nativa` C1 lo cazó. En el navegador el área vale 0 y no se
   mueve nada. */

/* ── La marca ──────────────────────────────────────────────────── */
.cop-leg-marca{
  display:flex;align-items:center;gap:var(--gap-md,.7rem);
  margin-bottom:var(--gap-xl,1.2rem);
  text-decoration:none;color:inherit;
}
.cop-leg-marca img{width:38px;height:38px;border-radius:var(--r-card,14px)}
.cop-leg-marca span{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:var(--fs-xl, 1.3rem);letter-spacing:.02em;text-transform:uppercase;
}

/* ── Título y bajada ───────────────────────────────────────────── */
.cop-leg-h1{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  /* ⚠ el techo del TEXTO es 1.5rem (`--fs-2xl`). Franco: «no quiero
     textos tan grandes». Los números de display son la excepción, y acá
     no hay ninguno. */
  font-size:var(--fs-2xl, 1.5rem);line-height:var(--lh-tight,1.1);
  text-transform:uppercase;letter-spacing:.01em;
  margin-bottom:var(--gap-md,.7rem);
}
.cop-leg-bajada{
  font-size:var(--fs-base, 1rem);line-height:var(--lh-loose,1.5);
  color:var(--text-dim,#9aa3b5);
}
.cop-leg-fecha{
  margin-top:var(--gap-md,.7rem);
  font-size:var(--fs-sm, .8rem);line-height:var(--lh-base,1.3);
  color:var(--text-faint,#5a6275);
}

/* ── El índice ─────────────────────────────────────────────────── */
/* Es una lista de enlaces, no botones: llevan a otro contenido de la
   misma página. La familia «botón» ejecuta una acción. */
.cop-leg-indice{
  margin-top:var(--gap-2xl,1.8rem);
  border-top:1px solid var(--card-border,#1e2330);
  padding-top:var(--gap-lg,1rem);
}
.cop-leg-indice ol{list-style:none;margin:0;padding:0;counter-reset:ix}
.cop-leg-indice li{counter-increment:ix}
.cop-leg-indice a{
  display:block;position:relative;
  padding:var(--gap-sm,.5rem) 0 var(--gap-sm,.5rem) 1.9rem;
  font-size:var(--fs-md, .88rem);line-height:var(--lh-base,1.3);
  color:var(--text,#f4f6fb);text-decoration:none;
}
.cop-leg-indice a::before{
  content:counter(ix);
  position:absolute;left:0;top:var(--gap-sm,.5rem);
  font-weight:800;font-size:var(--fs-md, .88rem);
  color:rgba(var(--cop-acento-rgb,12,149,235),1);
}
@media (hover:hover) and (pointer:fine){
  .cop-leg-indice a:hover{color:rgba(var(--cop-acento-rgb,12,149,235),1)}
}

/* ── Secciones: línea, nunca caja ──────────────────────────────── */
/* Regla 1 del sistema: las secciones se apoyan sobre el fondo de la
   página y se separan con una línea. */
.cop-leg-sec{
  border-top:1px solid var(--card-border,#1e2330);
  padding:var(--gap-xl,1.2rem) 0;
  /* para que el ancla del índice no quede debajo de nada */
  scroll-margin-top:var(--gap-lg,1rem);
}
.cop-leg-sec h2{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:var(--fs-xl, 1.3rem);text-transform:uppercase;letter-spacing:.02em;
  margin-bottom:var(--gap-md,.7rem);
}
.cop-leg-sec h3{
  font-family:'Inter',system-ui,sans-serif;font-weight:800;
  font-size:var(--fs-base, 1rem);line-height:var(--lh-base,1.3);
  margin:var(--gap-lg,1rem) 0 var(--gap-sm,.5rem);
}
.cop-leg-sec p,
.cop-leg-sec li{
  font-size:var(--fs-md, .88rem);line-height:var(--lh-loose,1.5);
  color:var(--text,#f4f6fb);
}
.cop-leg-sec p + p{margin-top:var(--gap-md,.7rem)}
.cop-leg-sec b{font-weight:800}
.cop-leg-sec a{color:rgba(var(--cop-acento-rgb,12,149,235),1)}

.cop-leg-sec ul{list-style:none;margin:var(--gap-sm,.5rem) 0 0;padding:0}
.cop-leg-sec li{padding:var(--gap-sm,.5rem) 0 var(--gap-sm,.5rem) 1.1rem;position:relative}
.cop-leg-sec li::before{
  content:'';position:absolute;left:0;top:1.05em;
  width:5px;height:5px;border-radius:50%;
  background:rgba(var(--cop-acento-rgb,12,149,235),.9);
}

/* ── La tabla de datos ─────────────────────────────────────────── */
/* ⚠ LAS DIVISIONES VAN COMO BORDES DE LAS CELDAS, no pintando el fondo
   del contenedor y dejando asomar el `gap`: eso deja trazos sueltos
   cuando las filas no miden igual. Está escrito en el sistema. */
.cop-leg-tabla{
  width:100%;border-collapse:collapse;
  margin-top:var(--gap-md,.7rem);
}
.cop-leg-tabla th,
.cop-leg-tabla td{
  text-align:left;vertical-align:top;
  padding:var(--gap-md,.7rem) var(--gap-md,.7rem) var(--gap-md,.7rem) 0;
  border-bottom:1px solid var(--card-border,#1e2330);
  font-size:var(--fs-sm, .8rem);line-height:var(--lh-base,1.3);
}
.cop-leg-tabla th{
  font-family:'Inter',system-ui,sans-serif;font-weight:800;
  color:var(--text-dim,#9aa3b5);
  text-transform:uppercase;letter-spacing:.04em;
  font-size:var(--fs-xs, .72rem);
}
.cop-leg-tabla td:last-child,
.cop-leg-tabla th:last-child{padding-right:0}
.cop-leg-tabla tr:last-child td{border-bottom:none}
.cop-leg-tabla td b{font-weight:800}

/* ── El renglón destacado (lo que NO se hace) ──────────────────── */
.cop-leg-nota{
  margin-top:var(--gap-lg,1rem);
  font-size:var(--fs-sm, .8rem);line-height:var(--lh-base,1.3);
  color:var(--text-faint,#5a6275);
}

/* ── Contacto ──────────────────────────────────────────────────── */
.cop-leg-contacto{
  border-top:1px solid var(--card-border,#1e2330);
  padding-top:var(--gap-xl,1.2rem);
  margin-top:var(--gap-lg,1rem);
}
.cop-leg-contacto .cop-b{width:100%;margin-top:var(--gap-lg,1rem)}

/* ── Pie ───────────────────────────────────────────────────────── */
.cop-leg-pie{
  margin-top:var(--gap-2xl,1.8rem);
  padding-top:var(--gap-lg,1rem);
  border-top:1px solid var(--card-border,#1e2330);
  display:flex;flex-wrap:wrap;gap:var(--gap-md,.7rem);
  align-items:center;justify-content:center;
  font-size:var(--fs-sm, .8rem);color:var(--text-faint,#5a6275);
  text-align:center;
}
.cop-leg-pie a{color:var(--text-dim,#9aa3b5)}
.cop-leg-pie span{opacity:.5}

/* ⚠ TODO COMPONENTE QUE DECLARE `display` DECLARA TAMBIÉN SU `[hidden]`.
   `[hidden]{display:none}` tiene especificidad 0-1-0, la misma que una
   clase, y en empate gana la declarada después. Van ocho apariciones de
   este bug en el proyecto. */
.cop-leg-marca[hidden],
.cop-leg-pie[hidden],
.cop-leg-indice a[hidden]{display:none}

@media (max-width:359px){
  .cop-leg-tabla th,
  .cop-leg-tabla td{padding-right:var(--gap-sm,.5rem)}
}