:root{
  --crema:      #F8F4E4;
  --crema-alta: #FDFBF2;
  --tinta:      #0B1E3D;
  --marino:     #1B3B6F;
  --verde:      #145A38;
  --verde-vivo: #1B7A4B;
  --linea:      rgba(27,59,111,.22);
  --linea-suave:rgba(27,59,111,.11);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  line-height:1.6;
}

a{ color:inherit; }
:focus-visible{ outline:2px solid var(--verde-vivo); outline-offset:3px; border-radius:4px; }

.contenedor{ width:min(1340px, 94vw); margin:0 auto; }

.marca-barra{ padding:24px 0 18px; }
.marca{
  display:inline-block;
  background: var(--marino);
  color: var(--crema-alta);
  padding:11px 22px;
  border-radius:999px;
  font-weight:700;
  font-size:17px;
  letter-spacing:.06em;
  text-decoration:none;
}
.lema{
  margin:12px 0 0;
  font-size:14px;
  color: var(--marino);
  letter-spacing:.01em;
}

.nav-barra{
  background: var(--verde);
  border-top:1px solid var(--marino);
  border-bottom:1px solid var(--marino);
  padding:13px 0;
}
.nav{ display:flex; gap:10px; flex-wrap:wrap; }
.nav a{
  display:inline-flex;
  align-items:center;
  padding:9px 18px;
  border-radius:999px;
  border:1px solid rgba(248,244,228,.55);
  background: transparent;
  color: var(--crema-alta);
  font-size:14.5px;
  font-weight:600;
  text-decoration:none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav a:hover{
  background: var(--crema-alta);
  border-color: var(--crema-alta);
  color: var(--marino);
}
.nav a[aria-current="page"]{
  background: var(--crema-alta);
  border-color: var(--crema-alta);
  color: var(--marino);
  cursor:default;
}

.rejilla{
  display:grid;
  grid-template-columns: minmax(0,1fr) 286px;
  align-items:start;
}
.columna-principal{ padding:38px 66px 64px 0; }
.columna-registro{
  padding:38px 0 64px 30px;
  border-left:1px solid var(--marino);
  position:sticky;
  top:0;
}

.folio{
  font-family: var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  color: var(--verde-vivo);
  font-weight:600;
  margin:0 0 10px;
}
.titulo{
  font-size: clamp(28px, 3.6vw, 44px);
  line-height:1.13;
  letter-spacing:-.02em;
  font-weight:750;
  margin:0 0 12px;
  max-width:26ch;
}
.sello{
  font-family: var(--mono);
  font-size:12.5px;
  color: var(--marino);
  letter-spacing:.04em;
  padding-bottom:20px;
  border-bottom:1px solid var(--linea);
  margin:0 0 28px;
}

.cuerpo{ font-family: var(--serif); font-size:17.5px; line-height:1.72; }
.cuerpo p{ margin:0 0 18px; max-width:74ch; }
.cuerpo > p:first-child{ font-size:19.5px; }
.cuerpo strong{ font-weight:700; }
.cuerpo h2{
  font-family: var(--sans);
  font-size:20px;
  letter-spacing:-.01em;
  margin:34px 0 12px;
  max-width:60ch;
}
.cuerpo h3{
  font-family: var(--sans);
  font-size:16px;
  margin:26px 0 10px;
}
.cuerpo ul, .cuerpo ol{ max-width:70ch; margin:0 0 18px; padding-left:22px; }
.cuerpo li{ margin:6px 0; }
.cuerpo blockquote{
  margin:22px 0;
  padding:2px 0 2px 20px;
  border-left:3px solid var(--verde-vivo);
  color: var(--marino);
  max-width:68ch;
}
.cuerpo a{ color: var(--verde); text-underline-offset:2px; }
.cuerpo code{
  font-family: var(--mono);
  font-size:.88em;
  font-weight:600;
  background: rgba(27,122,75,.10);
  color: var(--verde);
  padding:1px 6px;
  border-radius:4px;
  white-space:nowrap;
}

.cuerpo table{
  width:100%;
  max-width:74ch;
  border-collapse:collapse;
  margin:26px 0;
  font-family: var(--mono);
  font-size:13.5px;
}
.cuerpo table th{
  text-align:left;
  font-weight:600;
  border-bottom:1px solid var(--marino);
  padding:8px 12px 8px 0;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.cuerpo table td{
  padding:9px 12px 9px 0;
  border-bottom:1px solid var(--linea-suave);
}
.cuerpo table td:last-child,
.cuerpo table th:last-child{ text-align:right; padding-right:0; }
.cuerpo table tr:last-child td{ border-bottom:1px solid var(--marino); font-weight:700; }

.pie-articulo{
  margin-top:36px;
  padding-top:18px;
  border-top:1px solid var(--linea);
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  font-size:13px;
  color: var(--marino);
  max-width:74ch;
}
.pie-articulo h2{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 8px;
  color: var(--tinta);
}
.pie-articulo ul{ margin:0; padding-left:16px; }
.pie-articulo li{ margin:3px 0; }
.firma{ font-family: var(--mono); font-size:12.5px; text-align:right; }

.sin-entradas{
  border:1px solid var(--linea);
  border-radius:10px;
  background: var(--crema-alta);
  padding:34px 30px;
  max-width:74ch;
}
.sin-entradas h1{
  font-size:21px;
  font-weight:700;
  letter-spacing:-.01em;
  margin:0 0 8px;
}
.sin-entradas p{
  margin:0;
  font-size:15px;
  color: var(--marino);
  max-width:56ch;
}

.registro-titulo{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  margin:0 0 4px;
}
.registro-nota{
  font-size:12px;
  color: var(--marino);
  margin:0 0 18px;
}
.registro{ list-style:none; margin:0; padding:0; }
.registro li{ border-bottom:1px solid var(--linea-suave); }
.registro a{
  display:grid;
  grid-template-columns: 82px 1fr;
  gap:10px;
  padding:11px 0;
  text-decoration:none;
  align-items:baseline;
}
.registro a:hover .r-titulo{ color: var(--verde-vivo); }
.r-fecha{
  font-family: var(--mono);
  font-size:11.5px;
  color: var(--marino);
  letter-spacing:.02em;
}
.r-titulo{ font-size:13.5px; line-height:1.42; font-weight:600; transition:color .15s ease; }
.registro .actual .r-fecha{ color: var(--verde-vivo); font-weight:700; }
.registro .actual .r-titulo::after{
  content:"";
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background: var(--verde-vivo);
  margin-left:7px;
  vertical-align:middle;
}

.registro-hueco{
  font-family: var(--mono);
  font-size:12px;
  color: var(--marino);
  padding:11px 0;
  border-bottom:1px solid var(--linea-suave);
  opacity:.5;
}

.pie{
  border-top:1px solid var(--marino);
  padding:22px 0 40px;
  font-size:12.5px;
  color: var(--marino);
}
.pie-fila{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.pie a{ text-decoration:none; }
.pie a:hover{ color: var(--verde-vivo); }
.pie-enlaces{ display:flex; gap:18px; flex-wrap:wrap; }

@media (max-width: 960px){
  .rejilla{ grid-template-columns:1fr; }
  .columna-principal{ padding:30px 0 36px; }
  .columna-registro{
    border-left:0;
    border-top:1px solid var(--marino);
    padding:28px 0 60px;
    position:static;
  }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}

.pagina{ padding:44px 0 70px; }
.bloque{ max-width:78ch; }

.encabezado-pagina{
  padding-bottom:34px;
  border-bottom:1px solid var(--marino);
  margin-bottom:38px;
}
.titulo-pagina{
  font-size: clamp(30px, 4vw, 48px);
  line-height:1.1;
  letter-spacing:-.025em;
  font-weight:750;
  margin:0 0 16px;
  max-width:20ch;
}
.titulo-pagina em{ font-style:normal; color: var(--verde); }
.entradilla{
  font-family: var(--serif);
  font-size:19px;
  line-height:1.65;
  margin:0 0 24px;
  max-width:68ch;
}

.acciones{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 24px;
  border-radius:999px;
  border:1px solid var(--verde);
  background: var(--verde);
  color: var(--crema-alta);
  font-size:15px;
  font-weight:650;
  text-decoration:none;
  transition: background .15s ease, color .15s ease;
}
.boton:hover{ background: var(--verde-vivo); border-color: var(--verde-vivo); }
.boton--linea{
  background: transparent;
  color: var(--marino);
  border-color: var(--marino);
}
.boton--linea:hover{ background: var(--marino); color: var(--crema-alta); }

.seccion{ padding:44px 0; border-top:1px solid var(--linea); }
.seccion:first-of-type{ border-top:0; padding-top:0; }
.seccion > h2{
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color: var(--verde);
  margin:0 0 18px;
}
.seccion h3{
  font-size:26px;
  letter-spacing:-.015em;
  font-weight:700;
  margin:0 0 14px;
  max-width:28ch;
}
.seccion p{
  font-family: var(--serif);
  font-size:17px;
  line-height:1.7;
  margin:0 0 16px;
  max-width:72ch;
}

.tarjetas{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:26px;
}
.tarjeta{
  border:1px solid var(--linea);
  border-radius:12px;
  background: var(--crema-alta);
  padding:24px 22px;
}
.tarjeta--marcada{ border-color: var(--verde); border-width:2px; }
.bloque-referencia{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(300px, 400px);
  gap:32px;
  align-items:start;
  margin-bottom:28px;
}
.tarjeta h4{
  font-size:15px;
  font-weight:700;
  margin:0 0 4px;
  letter-spacing:-.01em;
}
.tarjeta .escala{
  font-family: var(--mono);
  font-size:11.5px;
  color: var(--marino);
  letter-spacing:.04em;
  margin:0 0 16px;
}
.tarjeta .precio{
  font-family: var(--mono);
  font-size:27px;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0;
  line-height:1.1;
}
.tarjeta .precio-nota{
  font-size:12px;
  color: var(--marino);
  margin:5px 0 18px;
  font-family: var(--sans);
}
.tarjeta ul{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--linea-suave);
  padding-top:14px;
}
.tarjeta li{
  font-family: var(--mono);
  font-size:12px;
  padding:5px 0;
  color: var(--marino);
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.tarjeta li b{ color: var(--tinta); font-weight:600; }

.pasos{ counter-reset:paso; margin-top:24px; }
.paso{
  counter-increment:paso;
  display:grid;
  grid-template-columns:44px 1fr;
  gap:18px;
  padding:20px 0;
  border-bottom:1px solid var(--linea-suave);
  align-items:start;
}
.paso::before{
  content:counter(paso);
  font-family: var(--mono);
  font-size:13px;
  font-weight:700;
  color: var(--crema-alta);
  background: var(--marino);
  width:30px; height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.paso h4{ font-size:16px; font-weight:700; margin:4px 0 6px; }
.paso p{ margin:0; font-size:16px; max-width:64ch; }

.dos-columnas{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}

/* Dos bloques de prosa en el mismo renglon dentro de una seccion.
   Es distinta de .dos-columnas a proposito: aquella empareja paneles que ya
   traen borde y fondo propios, asi que le basta un hueco de 16px. Aqui las
   columnas son texto suelto, y lo que las separa tiene que ser aire y un hilo,
   no un hueco. El idioma del hilo es el de .columna-registro: border-left en
   la segunda columna, que al colapsar se convierte en border-top.

   El relleno va en las DOS columnas, 32px cada una contra el hilo, en vez de
   usar gap. Con gap el padding de la segunda le comeria ancho util y las dos
   cajas de texto quedarian desiguales; asi el hilo cae exacto en la mitad y
   las dos columnas miden lo mismo.

   minmax(0,1fr) y no 1fr: una tabla dentro de una pista 1fr la ensancha hasta
   su min-content y saca la pagina de cuadro en horizontal. Es la misma guarda
   que .rejilla y .tarjetas. */
.pareja{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  align-items:start;
}
.pareja > *{ min-width:0; padding-right:32px; }
.pareja > * + *{
  padding-right:0;
  padding-left:32px;
  border-left:1px solid var(--linea);
}
.panel{
  border:1px solid var(--linea);
  border-radius:12px;
  padding:22px;
  background: var(--crema-alta);
}
.panel h4{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 12px;
  font-weight:700;
}
.panel ul{ margin:0; padding-left:18px; font-size:15px; }
.panel li{ margin:8px 0; line-height:1.55; }

.aviso{
  border-left:3px solid var(--verde);
  background: rgba(27,122,75,.06);
  padding:18px 22px;
  border-radius:0 8px 8px 0;
  margin:26px 0;
  max-width:72ch;
}
.aviso p{ margin:0; font-size:16px; }
.aviso strong{ font-weight:700; }

.pregunta{
  border-bottom:1px solid var(--linea-suave);
  padding:2px 0;
}
.pregunta summary{
  cursor:pointer;
  font-weight:650;
  font-size:16px;
  padding:16px 0;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
}
.pregunta summary::-webkit-details-marker{ display:none; }
.pregunta summary::after{
  content:"+";
  font-family: var(--mono);
  font-size:19px;
  color: var(--verde);
  flex-shrink:0;
}
.pregunta[open] summary::after{ content:"–"; }
.pregunta p{ margin:0 0 18px; font-size:16px; }

.contacto-caja{
  border:1px solid var(--marino);
  border-radius:12px;
  padding:30px;
  margin-top:26px;
  max-width:72ch;
}

@media (max-width: 860px){
  .tarjetas{ grid-template-columns:1fr; }
  .bloque-referencia{ grid-template-columns:1fr; }
  .dos-columnas{ grid-template-columns: minmax(0,1fr); }
  /* Mismo punto de quiebre que las demas, para que la pagina entera cambie de
     forma a la vez y no a trompicones. El hilo vertical pasa a horizontal.
     Y minmax(0,1fr) tambien en una sola pista: el minimo auto de 1fr sigue
     siendo el min-content, y esta es la pista que lleva la tabla de costos. */
  .pareja{ grid-template-columns: minmax(0,1fr); }
  .pareja > *{ padding-right:0; }
  .pareja > * + *{
    padding-left:0;
    border-left:0;
    border-top:1px solid var(--linea);
    margin-top:34px;
    padding-top:34px;
  }
}

.acciones--pegadas{ margin-top:0; }
.nota-fiscal{
  margin-top:22px;
  font-family: var(--sans);
  font-size:14px;
  color: var(--marino);
  max-width:70ch;
}

/* ── Documento de condiciones · /conectablockchain/condiciones/ ──────────
   Mismo lenguaje que las secciones de la comercial: titulo de clausula al
   tamano de .seccion h3, subtitulos con el tratamiento verde en versalitas
   de .seccion > h2, y cuerpo en la serif a 72ch. */

.marca-arriba{
  display:inline-block;
  font-family: var(--sans);
  font-size:14px;
  font-weight:600;
  color: var(--marino);
  text-decoration:none;
  margin-bottom:28px;
}
.marca-arriba:hover{ color: var(--verde-vivo); }

.doc-encabezado{
  padding-bottom:26px;
  border-bottom:1px solid var(--marino);
  margin-bottom:34px;
}
.doc-titulo{
  font-size: clamp(28px, 3.4vw, 40px);
  line-height:1.12;
  letter-spacing:-.022em;
  font-weight:750;
  margin:0 0 10px;
  max-width:24ch;
}
.doc-meta{
  font-family: var(--mono);
  font-size:13px;
  color: var(--marino);
  margin:0;
}

.indice{
  border-left:3px solid var(--verde);
  background: rgba(27,122,75,.06);
  padding:20px 24px;
  border-radius:0 8px 8px 0;
  margin-bottom:40px;
  max-width:72ch;
}
.indice h2{
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color: var(--verde);
  margin:0 0 12px;
}
.indice ol{ margin:0; padding-left:20px; }
.indice li{ margin:6px 0; font-family: var(--sans); font-size:15.5px; }
.indice a{ color: var(--tinta); text-underline-offset:3px; }
.indice a:hover{ color: var(--verde-vivo); }

.clausulas{ counter-reset: clausula; }

.clausula{
  padding:36px 0;
  border-top:1px solid var(--linea);
  scroll-margin-top:24px;
}
.clausula:first-child{ border-top:0; padding-top:0; }
.clausula > h2{
  counter-increment: clausula;
  font-size:26px;
  letter-spacing:-.015em;
  font-weight:700;
  margin:0 0 16px;
  max-width:30ch;
}
.clausula > h2::before{
  content: counter(clausula) ". ";
  color: var(--verde);
  font-family: var(--mono);
  font-size:20px;
  font-weight:700;
}
.clausula h3{
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color: var(--verde);
  margin:26px 0 12px;
}
.clausula p{
  font-family: var(--serif);
  font-size:17px;
  line-height:1.7;
  margin:0 0 16px;
  max-width:72ch;
}
.clausula ul{
  font-family: var(--serif);
  font-size:17px;
  line-height:1.7;
  margin:0 0 16px;
  padding-left:22px;
  max-width:72ch;
}
.clausula li{ margin:8px 0; }
.clausula strong{ font-weight:700; }

.tabla-datos{
  width:100%;
  max-width:60ch;
  border-collapse:collapse;
  font-family: var(--sans);
  font-size:15px;
  margin:0 0 18px;
}
.tabla-datos td{
  padding:10px 0;
  border-bottom:1px solid var(--linea-suave);
  vertical-align:top;
}
.tabla-datos td:last-child{
  text-align:right;
  font-family: var(--mono);
  font-size:13px;
  color: var(--marino);
  white-space:nowrap;
  padding-left:18px;
}
.tabla-datos tr:last-child td{ border-bottom:0; }

/* ── Tabla de evidencia · el costo de quemar TRX ─────────────────────────
   Es el dato que sostiene el argumento de toda la pagina, asi que lleva el
   tratamiento de .tarjeta--marcada: caja en crema alta con el borde verde de
   dos pixeles. La columna de costo es el ancla visual. Sin JS: la CSP de
   esta pagina declara script-src 'none'. */

.tabla-evidencia{
  border:2px solid var(--verde);
  border-radius:12px;
  background: var(--crema-alta);
  padding:26px 26px 22px;
  margin:26px 0;
  max-width:72ch;
  overflow-x:auto;
}
.tabla-evidencia table{ width:100%; border-collapse:collapse; }
.tabla-evidencia caption{
  caption-side:top;
  text-align:left;
  font-family: var(--sans);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color: var(--verde);
  padding:0 0 18px;
}
.tabla-evidencia th{
  font-family: var(--sans);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  color: var(--marino);
  text-align:left;
  padding:0 0 10px;
  border-bottom:1px solid var(--linea);
}
.tabla-evidencia td{
  font-family: var(--sans);
  font-size:16px;
  padding:15px 0;
  border-bottom:1px solid var(--linea-suave);
  vertical-align:baseline;
}
.tabla-evidencia tr:last-child td{ border-bottom:0; padding-bottom:0; }
.tabla-evidencia th:not(:first-child),
.tabla-evidencia td:not(:first-child){ text-align:right; padding-left:20px; }
.tabla-evidencia td:nth-child(2){
  font-family: var(--mono);
  font-size:14.5px;
  color: var(--marino);
  white-space:nowrap;
}
.tabla-evidencia td:last-child{
  font-family: var(--mono);
  font-size:21px;
  font-weight:700;
  letter-spacing:-.02em;
  color: var(--tinta);
  white-space:nowrap;
}

/* Cuatro tarjetas: piso garantizado, tipico y maximo junto al bloque. A tres
   columnas la cuarta se quedaba huerfana en una fila propia. */
.tarjetas--cuatro{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1180px){
  .tarjetas--cuatro{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px){
  .tarjetas--cuatro{ grid-template-columns:1fr; }
}