/* Costito · guías. Van arriba de sitio.css: la misma hoja de libreta con su renglón rojo (.papel-texto),
   más lo propio de una cuenta hecha a mano: la tabla de la receta, la suma con su raya y el resultado con doble subrayado.
   Sin estilos en línea: la página tiene la misma política de contenido que el resto del sitio. */

.migas { max-width: 760px; margin: 18px auto 0; font-size: 14.5px; color: var(--tinta2); display: flex; flex-wrap: wrap; gap: 0 8px; }
.migas a { display: inline-block; padding: 6px 0; }
.migas span[aria-hidden] { padding: 6px 0; }
.migas + .papel-texto { margin-top: 8px; }

.papel-texto .bajada { font-size: 18.5px; line-height: 1.45; margin-top: 14px; }
.papel-texto h2 { scroll-margin-top: 16px; }
.papel-texto h3 { font: 750 17.5px/1.3 var(--fuente); margin-top: 22px; }

/* el índice: renglones numerados, como la lista de pasos de una receta */
.indice { margin-top: 24px; padding: 16px 18px 14px; border: 1.5px solid var(--linea); border-top: 4px solid var(--margen); border-radius: 0 0 var(--radio) var(--radio); background: var(--papel); }
.indice p { margin: 0 !important; font-weight: 750; }
.indice ol { margin-top: 8px !important; padding-left: 22px; display: grid; gap: 2px; }
.indice li { margin: 0 !important; }
.indice a { display: inline-block; padding: 5px 0; }

/* la fórmula, escrita como cuenta */
.formula { margin-top: 16px; padding: 16px 18px; background: var(--azul-suave); border-left: 4px solid var(--azul); border-radius: 0 var(--radio) var(--radio) 0; font-weight: 650; line-height: 1.6; }
.formula p { margin: 0 !important; }
.formula p + p { margin-top: 6px !important; }

/* la tabla de la receta */
.tabla-cuenta { margin-top: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-cuenta table { width: 100%; border-collapse: collapse; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.tabla-cuenta caption { text-align: left; font-size: 14px; color: var(--tinta2); padding-bottom: 8px; caption-side: top; }
.tabla-cuenta th, .tabla-cuenta td { padding: 9px 10px 9px 0; border-bottom: 1.5px solid var(--renglon); text-align: left; vertical-align: top; }
.tabla-cuenta th { font-size: 13.5px; font-weight: 750; color: var(--tinta2); text-transform: uppercase; letter-spacing: .03em; }
.tabla-cuenta .plata { text-align: right; white-space: nowrap; padding-right: 0; }
.tabla-cuenta tfoot td { border-bottom: 0; border-top: 2px solid var(--tinta); font-weight: 800; padding-top: 11px; }
.tabla-cuenta td small { display: block; color: var(--tinta2); font-size: 13.5px; }
.tabla-cuenta .total td { font-size: 17px; }
.tabla-cuenta .total .plata b { color: var(--azul); border-bottom: 4px double var(--azul); }

/* el resultado de una cuenta */
.resultado { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 14px 0; border-top: 1.5px solid var(--renglon); border-bottom: 1.5px solid var(--renglon); }
.resultado span { color: var(--tinta2); font-weight: 650; }
.resultado b { font: 800 30px/1.1 var(--fuente); color: var(--azul); border-bottom: 5px double var(--azul); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ejemplo { display: inline-block; font-size: 13px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--rojo); border: 1.5px solid var(--rojo); border-radius: 4px; padding: 1px 6px; transform: rotate(-2deg); }

/* probar Costito: la ficha con cinta, como la compra */
.proba { position: relative; margin-top: 36px; padding: 22px 20px; border-radius: var(--radio); background: var(--papel); border: 2px solid var(--azul); }
.proba h2 { margin-top: 0 !important; }
.proba .btn { width: 100%; }
.proba .chica { color: var(--tinta2); font-size: 14.5px; }

.papel-texto .actualizada { color: var(--tinta2); font-size: 14px; margin-top: 30px; padding-top: 14px; border-top: 1.5px solid var(--linea); }