/* AIGOS · página «Planes». Mismo lenguaje que aigos.css y conector.css. */
.tramo { padding-bottom: var(--e8); }
.tramo-grid { display: grid; gap: var(--e5); }
.tramo-tit { max-width: 18ch; }
@media (min-width: 1024px) { .tramo-grid { grid-template-columns: 4fr 8fr; gap: var(--e8); } .tramo { padding-bottom: var(--e9); } }
.heroe-planes { padding-bottom: var(--e8); }
.heroe-planes-in { display: grid; gap: var(--e6); align-items: start; padding-top: var(--e5); }
.heroe-planes .heroe-texto { grid-area: auto; gap: var(--e4); }
.heroe-planes .doc { animation: pagina 600ms var(--curva-llegar) 120ms both; }
@media (min-width: 1024px) { .heroe-planes-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--e8); padding-top: var(--e7); } }
.display-medio { font-size: 32px; }
@media (min-width: 640px) { .display-medio { font-size: 40px; } }
@media (min-width: 1024px) { .display-medio { font-size: 56px; } }
.heroe-botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-top: var(--e2); }
@media (max-width: 639px) { .heroe-botones .boton { width: 100%; } }
.estado { list-style: none; display: grid; margin-top: var(--e3); }
.estado li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e1) var(--e4); padding: var(--e3) 0; border-top: 1px solid var(--arena-suave); font-size: 14px; }
.estado li span:first-child { color: var(--tinta-2); }
.estado li span:last-child { font-weight: 500; text-align: right; }

.aviso { margin-top: var(--e4); padding-left: var(--e4); border-left: 2px solid var(--advertencia-acc); max-width: 68ch; color: var(--tinta-2); }
.aviso strong { color: var(--tinta); font-weight: 500; }

/* planes propuestos: composición por reglas, sin tarjetas */
.planes { display: grid; gap: var(--e6); margin: var(--e6) 0 var(--e7); }
.plan { display: grid; gap: var(--e3); align-content: start; padding-top: var(--e4); border-top: 1px solid var(--arena); }
.plan-nombre { font: 500 24px/1.2 var(--f-display); letter-spacing: -.01em; }
.plan-para { color: var(--tinta-2); max-width: 40ch; }
.precio { font: 600 24px/1.2 var(--f-display); font-variant-numeric: tabular-nums; }
.precio-nota { color: var(--tinta-2); font-size: 14px; }
.plan ul { list-style: none; display: grid; gap: var(--e2); margin-top: var(--e2); }
.plan li { position: relative; padding-left: var(--e5); font-size: 14px; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 9px; height: 5px; border-left: 1.5px solid var(--tinta); border-bottom: 1.5px solid var(--tinta); transform: rotate(-45deg); }
@media (min-width: 1024px) { .planes { grid-template-columns: repeat(3, 1fr); gap: var(--e5); } }

/* tabla del libro: versalitas, sin zebra, reglas finas */
.tabla-planes caption { padding-bottom: var(--e3); color: var(--tinta-2); font-size: 14px; }
.tabla-planes thead th { font-variant-caps: all-small-caps; text-transform: none; letter-spacing: .1em; font-size: 15px; }
.tabla-planes tbody th[scope="row"] { font-weight: 500; max-width: 34ch; }
.tabla-planes tbody th[scope="row"] small { display: block; font-weight: 400; color: var(--tinta-2); font-size: 13px; }
.tabla-planes td { width: 17%; }
.tabla-planes .ico { width: 18px; height: 18px; }
.tabla-planes .sin { color: var(--tinta-3); }
@media (max-width: 1023px) {
  .tabla-planes, .tabla-planes tbody, .tabla-planes th, .tabla-planes td, .tabla-planes caption { display: block; }
  .tabla-planes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-planes tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2) var(--e3); padding: var(--e4) 0; border-top: 1px solid var(--arena); }
  .tabla-planes tr:last-child { border-bottom: 1px solid var(--arena); }
  .tabla-planes th, .tabla-planes td { padding: 0; border: 0; max-width: none; width: auto; }
  .tabla-planes th[scope="row"] { grid-column: 1 / -1; }
  .tabla-planes td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 11px/1.4 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
}

/* bolsas de documentos */
.tabla-bolsas .num { text-align: right; }
.tabla-bolsas th[scope="row"] { font: 500 17px/1.3 var(--f-texto); }
.cuenta { list-style: none; display: grid; max-width: 760px; margin-top: var(--e4); border-bottom: 1px solid var(--arena); }
.cuenta li { padding: var(--e3) 0; border-top: 1px solid var(--arena); display: grid; gap: var(--e1); }
@media (min-width: 640px) { .cuenta li { grid-template-columns: 240px 1fr; gap: var(--e5); } }
.cuenta strong { font-weight: 500; }
.cuenta span { color: var(--tinta-2); }
.h-sub { margin: var(--e6) 0 var(--e2); font: 500 19px/1.3 var(--f-texto); }
.tramo .cuerpo { min-width: 0; }
.cuerpo > .tabla-bolsas, .cuerpo > .tabla-planes { margin-top: var(--e4); }
.cuerpo > .tabla-bolsas { max-width: 640px; }
.nota-pie { margin-top: var(--e3); color: var(--tinta-2); font-size: 14px; }
