/* legal-coco-v1.css — páginas de texto largo de getcocobank.com (/privacidad y /soporte), 4-nov-2026.
   Usa los tokens de coco-tokens-v3.css. /brand/ es caché inmutable: cualquier cambio va en un archivo
   con nombre nuevo (legal-coco-v2.css) y se cambia el <link> en src/privacidad.html y src/soporte.html. */

.legal-vigencia{ margin:0 auto; padding:0; font-size:14px; line-height:20px; font-weight:550; color:var(--tinta3); }
.hero-centro .btn-verde{ margin:0 auto; }

/* ————— Texto largo con índice ————— */
.legal{ padding:80px 0 112px; }
.legal-grid{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:72px; align-items:start; }
.legal-indice{ position:sticky; top:96px; }
.legal-indice b{ display:block; font-size:13px; line-height:18px; font-weight:600; color:var(--tinta2); margin-bottom:10px; }
.legal-indice ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--linea2); }
.legal-indice a{ display:block; margin-left:-1px; padding:6px 0 6px 14px; border-left:1px solid transparent;
  font-size:14px; line-height:1.4; color:var(--tinta3); transition:color .15s ease, border-color .15s ease; }
.legal-indice a:hover{ color:var(--tinta); border-left-color:var(--tinta); }

.prosa{ max-width:46rem; min-width:0; }
.prosa p{ max-width:none; margin:0 0 16px; padding:0; color:var(--tinta2); font-size:16.5px; line-height:1.7; }
.prosa h2{ font-size:clamp(1.55rem,2.6vw,2rem); line-height:1.15; letter-spacing:-.03em; margin:64px 0 16px; scroll-margin-top:96px; }
.prosa h3{ font-size:1.12rem; line-height:1.35; letter-spacing:-.015em; margin:32px 0 8px; color:var(--tinta); }
.prosa ul, .prosa ol{ margin:0 0 16px; padding:0 0 0 22px; color:var(--tinta2); }
.prosa li{ margin:8px 0; font-size:16.5px; line-height:1.65; }
.prosa li::marker{ color:var(--tinta3); }
.prosa b{ font-weight:600; color:var(--tinta); }
.prosa a{ color:var(--positivo); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.prosa a:hover{ color:var(--tinta); }

.resumen{ background:var(--lateral); border:1px solid var(--linea); border-radius:18px; padding:24px 28px; margin:0 0 8px; }
.resumen > b{ display:block; font-size:15px; font-weight:600; color:var(--tinta); margin-bottom:6px; }
.resumen ul{ margin:0; }
.resumen li{ font-size:16px; }

.tabla-caja{ border:1px solid var(--linea); border-radius:16px; overflow:hidden; margin:8px 0 20px; }
.tabla{ width:100%; border-collapse:collapse; }
.tabla th{ text-align:left; background:var(--tabla-cabecera); color:var(--tinta2); font-size:13.5px; line-height:18px; font-weight:600;
  padding:12px 16px; border-bottom:1px solid var(--linea2); }
.tabla td{ padding:16px; border-bottom:1px solid var(--linea); vertical-align:top; color:var(--tinta2); font-size:15px; line-height:1.55; }
.tabla tr:last-child td{ border-bottom:0; }
.tabla td:first-child{ width:24%; font-weight:600; color:var(--tinta); }

.firma{ margin-top:56px; padding-top:24px; border-top:1px solid var(--linea); }
.firma p{ font-size:15px; color:var(--tinta3); margin:0 0 4px; }

/* ————— Soporte ————— */
.celda .celda-enlace{ display:inline-block; margin-top:12px; font-size:15px; font-weight:600; color:var(--positivo);
  text-decoration:underline; text-underline-offset:2px; }
.celda p a{ color:var(--positivo); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.soporte-intro{ max-width:44rem; }
.soporte-intro p{ max-width:none; margin:0; padding:0; }
.pasos{ list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; counter-reset:paso; }
.pasos li{ counter-increment:paso; background:#fff; border-radius:18px; padding:28px 28px 28px 80px; position:relative;
  box-shadow:inset 0 0 0 1px var(--linea); }
.pasos li::before{ content:counter(paso); position:absolute; left:28px; top:26px; width:32px; height:32px; border-radius:50%;
  background:var(--coco); color:var(--sobre-coco); font-weight:650; font-size:15px; line-height:32px; text-align:center; }
.pasos b{ display:block; font-size:17.5px; font-weight:550; letter-spacing:-.02em; line-height:1.3; margin-bottom:6px; color:var(--tinta); }
.pasos p{ max-width:none; margin:0; padding:0; color:var(--tinta3); font-size:15.5px; line-height:1.55; }
.pasos p a{ color:var(--positivo); text-decoration:underline; text-underline-offset:2px; }

@media (max-width:980px){
  .legal-grid{ grid-template-columns:1fr; gap:40px; }
  .legal-indice{ position:static; }
  .pasos{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .legal{ padding:56px 0 80px; }
  .prosa h2{ margin-top:48px; }
  .resumen{ padding:20px; }
  .tabla thead{ display:none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td{ display:block; width:auto; }
  .tabla tr{ padding:16px; border-bottom:1px solid var(--linea); }
  .tabla tr:last-child{ border-bottom:0; }
  .tabla td, .tabla td:first-child{ width:auto; padding:0; border:0; }
  .tabla td + td{ margin-top:8px; }
  .tabla td[data-r]::before{ content:attr(data-r); display:block; font-size:12.5px; line-height:16px; font-weight:600; color:var(--tinta3); margin-bottom:2px; }
  .pasos li{ padding:24px 20px 24px 68px; }
  .pasos li::before{ left:20px; top:22px; }
}